/* TES holding page: an engineering drawing sheet.
   Static by default. Every movement lives inside the prefers-reduced-motion: no-preference block,
   so reduced motion (and any browser without the query) gets the finished drawing.
   The text never animates, so it is readable on the first paint. The "Animation" switch
   (a native checkbox, no script) removes every animation and shows the finished drawing. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #142b3b;
  --ink: #0c1c27;
  --ink-deep: #08141c;
  --green: #347a38;
  --pale: #c5ddb4;
  --pale-2: #b7d7a4;
  --pale-3: #d7ebc8;
  --white: #ffffff;

  --text: var(--white);
  --text-soft: var(--pale-3);
  --text-body: #dfe6e2; /* white over navy at 86% */
  --label: var(--pale-2);
  --rule: rgba(197, 221, 180, 0.2);
  --rule-strong: rgba(197, 221, 180, 0.42);
  --frame: rgba(215, 235, 200, 0.5);
  --frame-strong: rgba(215, 235, 200, 0.78);

  --edge: 6px;
  --zone: 1.25rem;
  --zone-side: 6px;
  --pad: 14px;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--edge);
  background: var(--ink-deep);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--pale-3);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- sheet and border */

.sheet {
  display: grid;
  grid-template-columns: var(--zone-side) minmax(0, 1fr) var(--zone-side);
  grid-template-rows: var(--zone) minmax(0, 1fr) var(--zone);
  max-width: 2240px;
  min-height: calc(100vh - 2 * var(--edge));
  min-height: calc(100dvh - 2 * var(--edge));
  margin: 0 auto;
  border: 1px solid var(--frame);
  background: var(--ink);
}

.zones {
  display: flex;
  min-width: 0;
  min-height: 0;
  color: var(--pale-2);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  user-select: none;
}

.zones > span {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.zones-top { grid-column: 2; grid-row: 1; }
.zones-bottom { grid-column: 2; grid-row: 3; }
.zones-left { grid-column: 1; grid-row: 2; flex-direction: column; }
.zones-right { grid-column: 3; grid-row: 2; flex-direction: column; }

.zones-top > span + span,
.zones-bottom > span + span {
  border-left: 1px solid var(--rule-strong);
}

.zones-left > span + span,
.zones-right > span + span {
  border-top: 1px solid var(--rule-strong);
}

/* Phones keep four zones and drop the side letters. */
.zones-top > span:nth-child(n + 5),
.zones-bottom > span:nth-child(n + 5),
.zones-left > span:nth-child(n + 5),
.zones-right > span:nth-child(n + 5) {
  display: none;
}

.zones-left,
.zones-right {
  font-size: 0;
}

.frame {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "draw"
    "block"
    "foot";
  align-content: start;
  min-width: 0;
  border: 2px solid var(--frame-strong);
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, rgba(183, 215, 164, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(183, 215, 164, 0.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(183, 215, 164, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(183, 215, 164, 0.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  grid-area: head;
  display: flex;
  align-items: center;
  padding: 10px var(--pad);
  border-top: 3px solid var(--green);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--navy);
}

.wordmark {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 44px;
  margin: 0 -8px;
  padding: 0 8px;
  color: var(--white);
  text-decoration: none;
}

.wordmark-short {
  padding-right: 12px;
  border-right: 1px solid var(--rule-strong);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
}

.wordmark-name {
  color: var(--pale-3);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- drawing */

.drawing {
  --dp-x: 8px;
  --dp-b: 10px;
  grid-area: draw;
  position: relative;
  min-width: 0;
  padding: 0 0 var(--dp-b);
}

.drawing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  min-height: 2.75rem;
  padding: 0 var(--pad);
}

.drawing-label {
  margin: 0;
  color: var(--pale-2);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Phones drop the second half of the label so the switch fits beside it. */
.label-extra {
  display: none;
}

.art-box {
  position: relative;
  margin: 0 var(--dp-x);
}

/* ---------------------------------------------------------------- animation switch
   A native checkbox (role="switch") laid over its label, so the whole label is the
   44px target. Hidden where :has() is missing (it could not act) and under reduced motion
   (nothing moves). Turning it off removes every animation, which leaves the finished drawing. */

.motion {
  position: relative;
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  color: var(--pale-2);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

@supports selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    .motion {
      display: inline-flex;
    }
  }
}

.motion-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.motion-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border: 1px solid var(--pale-2);
  border-radius: 10px;
  background: var(--ink);
  transition: background-color 0.2s;
}

.motion-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pale-3);
  transition: transform 0.2s;
}

.motion-input:checked ~ .motion-track {
  background: var(--green);
}

.motion-input:checked ~ .motion-track::after {
  background: var(--white);
  transform: translateX(14px);
}

.motion:hover .motion-track {
  border-color: var(--pale-3);
}

.motion:has(.motion-input:focus-visible) {
  outline: 3px solid var(--pale-3);
  outline-offset: 2px;
  border-radius: 4px;
}

.frame:has(.motion-input:not(:checked)) :is(.art, .art *, .status-dot),
.frame:has(.motion-input:not(:checked)) .status-dot::after {
  animation: none !important;
}

.drawing-label .sep,
.foot-meta .sep {
  padding: 0 0.4em;
  color: var(--pale-2);
}

.art {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(150px, 27vh, 280px);
  max-height: clamp(150px, 27svh, 280px);
  overflow: visible;
  --lw: 2.8px;
  --a-line: #d7ebc8;
  --a-body: #142b3b;
  --a-face: #1d3a47;
  --a-accent: #b7d7a4;
  --a-hole: #08141c;
}

/* The overlay fills the art box, which is exactly the base drawing box, so both viewBoxes line up. */
.art.art-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  pointer-events: none;
}

.art .sl {
  fill: var(--a-body);
  stroke: var(--a-line);
  stroke-width: var(--lw);
  stroke-linejoin: round;
}

.art .ln {
  fill: none;
  stroke: var(--a-line);
  stroke-width: var(--lw);
  stroke-linejoin: round;
}

.art .ln.thin,
.art .ln.wd {
  stroke-width: calc(var(--lw) * 0.6);
  stroke-opacity: 0.75;
}

.art .ff {
  fill: var(--a-face);
}

.art .hole {
  fill: var(--a-hole);
  stroke: var(--a-line);
  stroke-width: calc(var(--lw) * 0.6);
}

.art .bore {
  fill: var(--a-hole);
}

.art .bolt {
  fill: var(--a-line);
  fill-opacity: 0.8;
}

.art .tb-o {
  fill: none;
  stroke: var(--a-line);
}

.art .tb-i {
  fill: none;
  stroke: var(--a-body);
}

/* pipe radius 9: projected diameter 22.05 */
.art .p9 .tb-o { stroke-width: calc(22.05px + var(--lw)); }
.art .p9 .tb-i { stroke-width: calc(22.05px - var(--lw)); }

.art .hw-rim {
  fill: var(--a-line);
  fill-rule: evenodd;
}

/* No vector-effect here: non-scaling strokes stop Chrome compositing the spin. */
.art .hw-sp {
  fill: none;
  stroke: var(--a-line);
  stroke-width: calc(var(--lw) * 1.1);
  stroke-linecap: round;
}

.art .hw-hub {
  fill: var(--a-line);
}

.art .cl {
  fill: none;
  stroke: var(--a-accent);
  stroke-width: calc(var(--lw) * 0.55);
  stroke-dasharray: 22 4 3 4;
  stroke-opacity: 0.6;
}

.art .dm {
  fill: none;
  stroke: var(--a-accent);
  stroke-width: calc(var(--lw) * 0.55);
}

.art .dm-a {
  fill: var(--a-accent);
}

.art text {
  font-family: "Manrope", system-ui, sans-serif;
  text-anchor: middle;
}

.art .dm-t {
  fill: var(--pale);
  font-size: 15px;
  font-weight: 700;
}

.art .tg-l {
  fill: none;
  stroke: var(--a-accent);
  stroke-width: calc(var(--lw) * 0.55);
}

.art .tg-d {
  fill: var(--a-accent);
}

.art .tg-b {
  fill: var(--ink);
  stroke: var(--a-accent);
  stroke-width: calc(var(--lw) * 0.6);
}

.art .tg-t {
  fill: var(--pale-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.art .na {
  fill: none;
  stroke: var(--a-accent);
  stroke-width: calc(var(--lw) * 0.7);
}

.art .na-h {
  fill: var(--a-accent);
}

.art .na-t {
  fill: var(--pale-3);
  font-size: 16px;
  font-weight: 800;
}

.art .fa {
  fill: none;
  stroke: var(--pale-2);
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fine detail that turns to noise at phone scale. */
.art .bolt,
.art .hatch,
.art .tags,
.art .dim,
.art .north {
  display: none;
}

/* ---------------------------------------------------------------- title block */

.block {
  grid-area: block;
  min-width: 0;
  background: var(--navy);
}

.cell {
  padding: 18px var(--pad);
  border-top: 1px solid var(--rule-strong);
}

.cell:first-child {
  border-top: 0;
}

.label {
  margin: 0 0 10px;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.status-dot {
  position: relative;
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5625rem;
  border-radius: 50%;
  background: var(--pale-2);
  vertical-align: 0.05em;
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--pale-2);
  border-radius: 50%;
  opacity: 0;
}

h1 {
  margin: 0;
  font-size: clamp(1.875rem, 1.35rem + 1.7vw, 2.875rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.accent {
  color: var(--pale);
}

.lead {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
}

.about {
  margin: 0;
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.contact {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.contact li {
  border-bottom: 1px solid var(--rule);
}

.contact a {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 7px 4px;
  color: var(--white);
  text-decoration: none;
}

.contact a:hover {
  background: rgba(52, 122, 56, 0.32);
}

.contact a:hover .v {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kv {
  display: block;
  min-width: 0;
}

.k {
  display: block;
  margin: 0;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

.ico {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--pale-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office {
  padding: 14px 4px 0;
}

address {
  margin: 4px 0 0;
  color: var(--text-body);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.55;
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 4px;
  color: var(--pale-3);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(215, 235, 200, 0.5);
  text-underline-offset: 4px;
}

.map-link:hover {
  text-decoration-color: currentColor;
}

.cell-notes {
  display: grid;
  gap: 18px;
}

.industries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.industries li {
  padding: 3px 10px;
  border: 1px solid var(--rule-strong);
  color: var(--pale-3);
  font-size: 0.8125rem;
  font-weight: 600;
}

.disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: discipline;
}

.disciplines li {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.4;
  counter-increment: discipline;
}

.disciplines li::before {
  content: counter(discipline, decimal-leading-zero);
  flex: none;
  padding-top: 0.15em;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- footer */

.foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 10px var(--pad);
  border-top: 1px solid var(--rule-strong);
  background: var(--ink);
  color: var(--pale-3);
  font-size: 0.8125rem;
}

.foot p {
  margin: 0;
}

.foot-meta {
  color: var(--pale-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Very large text on a narrow screen (for example 200% text at 320px, about 10em wide):
   drop the decorative icons and keep the unbroken phone numbers inside the column. */
@media (max-width: 15em) {
  :root {
    --pad: 10px;
  }

  .contact a {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact .ico {
    display: none;
  }

  .contact .nowrap {
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------------------------- larger phones and tablets */

@media (min-width: 30em) {
  :root {
    --edge: 10px;
    --zone-side: 1.25rem;
    --pad: 18px;
  }

  .zones-left,
  .zones-right {
    font-size: 0.625rem;
  }

  .label-extra {
    display: inline;
  }

  .art {
    --lw: 2.2px;
  }
}

@media (min-width: 40em) {
  .zones-top > span:nth-child(n + 5),
  .zones-bottom > span:nth-child(n + 5),
  .zones-left > span:nth-child(n + 5),
  .zones-right > span:nth-child(n + 5) {
    display: flex;
  }

  .art {
    --lw: 1.8px;
    max-height: max(280px, 70vh);
  }

  .art .bolt,
  .art .hatch,
  .art .tags,
  .art .dim,
  .art .north {
    display: inline;
  }

  .drawing {
    --dp-x: 16px;
    --dp-b: 16px;
  }

  .block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cell-status {
    border-right: 1px solid var(--rule-strong);
  }

  .cell-contact {
    border-top: 0;
  }

  .cell-notes {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "about disciplines"
      "industries disciplines";
    align-content: start;
    column-gap: 32px;
  }

  .note-about { grid-area: about; }
  .note-industries { grid-area: industries; }
  .note-disciplines { grid-area: disciplines; }
}

/* Phones held sideways: drawing and title block side by side so the heading stays on screen. */
@media (min-width: 40em) and (max-width: 63.99em) and (max-height: 32em) {
  .frame {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "draw block"
      "foot foot";
  }

  .drawing {
    --dp-x: 12px;
    --dp-b: 12px;
    align-self: start;
  }

  .art {
    max-height: none;
  }

  .block {
    display: block;
    border-left: 1px solid var(--rule-strong);
  }

  .cell-status {
    border-right: 0;
  }

  .cell-contact {
    border-top: 1px solid var(--rule-strong);
  }

  .cell-notes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "about"
      "industries"
      "disciplines";
  }
}

/* ---------------------------------------------------------------- desktop: drawing left, title block right,
   notes strip along the bottom of the sheet (subgrid places the notes cell outside the title block column) */

@media (min-width: 64em) {
  :root {
    --edge: 14px;
    --zone: 1.5rem;
    --zone-side: 1.5rem;
    --pad: 22px;
    --notes-reserve: 0px;
  }

  .frame {
    grid-template-columns: minmax(0, 1fr) clamp(380px, 31vw, 540px);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    align-content: stretch;
  }

  .masthead {
    grid-column: 2;
    grid-row: 1;
    padding: 16px var(--pad);
    border-left: 1px solid var(--rule-strong);
  }

  .drawing {
    --dp-x: 28px;
    --dp-b: 24px;
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: center;
  }

  .drawing-head {
    padding: 0 24px;
  }

  .block {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2 / 5;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    background: transparent;
  }

  .cell-status,
  .cell-contact {
    grid-column: 2;
    border-left: 1px solid var(--rule-strong);
    background: var(--navy);
  }

  .cell-status {
    grid-row: 1;
    border-right: 0;
  }

  .cell-contact {
    grid-row: 2;
    border-top: 1px solid var(--rule-strong);
  }

  .cell-notes {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.9fr);
    grid-template-areas: "about industries disciplines";
    column-gap: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: var(--navy);
  }

  .art {
    --lw: 1.6px;
    max-height: calc(100vh - 2 * var(--zone) - var(--edge) - 70px - var(--notes-reserve));
    max-height: calc(100dvh - 2 * var(--zone) - var(--edge) - 70px - var(--notes-reserve));
    min-height: 340px;
  }

  .foot {
    grid-column: 1 / -1;
    grid-row: 5;
    background: transparent;
  }
}

/* Tall desktop screens keep the notes strip on the first screen too. */
@media (min-width: 64em) and (min-height: 60em) {
  :root {
    --notes-reserve: 260px;
  }
}

@supports not (grid-template-rows: subgrid) {
  @media (min-width: 64em) {
    .block {
      display: block;
      grid-column: 2;
      grid-row: 2 / 5;
      border-left: 1px solid var(--rule-strong);
      background: var(--navy);
    }

    .cell-status,
    .cell-contact,
    .cell-notes {
      border-left: 0;
    }

    .cell-notes {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "about" "industries" "disciplines";
      border-top: 1px solid var(--rule-strong);
    }

    .art {
      --notes-reserve: 0px;
    }
  }
}

@media (min-width: 100em) {
  .art {
    --lw: 1.3px;
  }
}

@media (min-width: 140em) {
  .art {
    --lw: 1.05px;
  }
}

/* ---------------------------------------------------------------- build sequence */

.q1 { --d: 0.12s; }
.q2 { --d: 0.38s; }
.q3 { --d: 0.6s; }
.q4 { --d: 0.45s; }
.q5 { --d: 0.7s; }
.q6 { --d: 0.9s; }
.q7 { --d: 1.1s; }
.q8 { --d: 1.3s; }
.q9 { --d: 1.45s; }
.q10 { --d: 1.6s; }
.q11 { --d: 1.8s; }
.q12 { --d: 1.9s; }
.q13 { --d: 2.0s; }
.q14 { --d: 2.3s; }
.q15 { --d: 2.6s; }
.q16 { --d: 2.45s; }
.q17 { --d: 2.9s; }
.q18 { --d: 3.05s; }
.q19 { --d: 3.3s; }
.q20 { --d: 3.45s; }
.q21 { --d: 3.65s; }
.q22 { --d: 3.85s; }
.q23 { --d: 4.2s; }

@media (prefers-reduced-motion: no-preference) {
  .art {
    --ease: cubic-bezier(0.42, 0.05, 0.3, 1);
  }

  .art .ln,
  .art .tb-o,
  .art .tb-i {
    animation: draw 1.3s var(--ease) var(--d, 0s) both;
  }

  .art .sl {
    animation:
      draw 1.3s var(--ease) var(--d, 0s) both,
      fill-in 0.6s ease-out calc(var(--d, 0s) + 0.9s) both;
  }

  .art .ff,
  .art .hole,
  .art .bore,
  .art .bolt,
  .art .ln.hatch {
    animation: fade-in 0.6s ease-out calc(var(--d, 0s) + 0.9s) both;
  }

  .art .fd,
  .art .cls,
  .art .dim,
  .art .tags,
  .art .north {
    animation: fade-in 0.9s ease-out var(--d, 0s) both;
  }

  .art .dim .ln,
  .art .tags .ln {
    animation: none;
  }

  .art .flows {
    animation: fade-in 0.8s ease-out var(--d, 0s) both;
  }

  .art .fa {
    animation: flow 2.2s linear calc(var(--d, 0s) + 0.2s) infinite both;
  }

  .art .fa-in { animation-name: flow-in; }
  .art .fa-out { animation-name: flow-out; }
  .art .fa-io { animation-name: flow-io; }

  .art .spin-a,
  .art .spin-b {
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .art .spin-a {
    animation: turn 12s cubic-bezier(0.45, 0, 0.3, 1) 4.8s infinite;
  }

  .art .spin-b {
    animation: turn-b 12s cubic-bezier(0.45, 0, 0.3, 1) 4.8s infinite;
  }

  .zones {
    animation: fade-in 0.8s ease-out 0.1s both;
  }

  .status-dot::after {
    animation: ping 3s ease-out 1s infinite;
  }
}

@keyframes ping {
  from {
    opacity: 0.85;
    transform: scale(0.45);
  }
  70%,
  to {
    opacity: 0;
    transform: scale(1.25);
  }
}

@keyframes draw {
  from {
    stroke-dasharray: 1 3;
    stroke-dashoffset: 1.02;
  }
  99% {
    stroke-dasharray: 1 3;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@keyframes fill-in {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Chevrons sit 34 units apart; each moves one spacing per cycle so the loop is seamless. */
@keyframes flow {
  from { transform: translateX(-17px); }
  to { transform: translateX(17px); }
}

@keyframes flow-in {
  from { transform: translateX(-17px); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translateX(17px); opacity: 1; }
}

@keyframes flow-out {
  from { transform: translateX(-17px); opacity: 1; }
  65% { opacity: 1; }
  to { transform: translateX(17px); opacity: 0; }
}

@keyframes flow-io {
  from { transform: translateX(-17px); opacity: 0; }
  35% { opacity: 1; }
  65% { opacity: 1; }
  to { transform: translateX(17px); opacity: 0; }
}

/* Three spokes: a 120 degree step looks identical, so each cycle continues the turn. */
@keyframes turn {
  0%, 8% { transform: rotate(0deg); }
  42%, 100% { transform: rotate(120deg); }
}

@keyframes turn-b {
  0%, 50% { transform: rotate(0deg); }
  84%, 100% { transform: rotate(-120deg); }
}

/* ---------------------------------------------------------------- forced colours */

@media (forced-colors: active) {
  .sheet,
  .frame,
  .masthead,
  .block,
  .foot {
    border-color: CanvasText;
  }

  .frame {
    background-image: none;
  }

  .art {
    forced-color-adjust: none;
  }

  .art .sl,
  .art .tb-i,
  .art .ff,
  .art .tg-b {
    fill: Canvas;
  }

  .art .sl,
  .art .ln,
  .art .tb-o,
  .art .cl,
  .art .dm,
  .art .tg-l,
  .art .tg-b,
  .art .na,
  .art .hole {
    stroke: CanvasText;
  }

  .art .tb-i {
    stroke: Canvas;
  }

  .art .hw-rim,
  .art .hw-hub,
  .art .bolt,
  .art .dm-a,
  .art .tg-d,
  .art .na-h,
  .art .tg-t,
  .art .dm-t,
  .art .na-t {
    fill: CanvasText;
  }

  .status-dot {
    background: CanvasText;
  }

  .status-dot::after {
    border-color: CanvasText;
  }

  .art .hw-sp,
  .art .fa {
    stroke: Highlight;
  }

  .art .hole,
  .art .bore {
    fill: Canvas;
  }

  .contact a,
  .map-link {
    color: LinkText;
  }

  .ico {
    stroke: currentColor;
  }

  a:focus-visible,
  .motion:has(.motion-input:focus-visible) {
    outline-color: Highlight;
  }

  .motion-track {
    forced-color-adjust: none;
    border-color: ButtonText;
    background: ButtonFace;
  }

  .motion-track::after {
    background: ButtonText;
  }

  .motion-input:checked ~ .motion-track {
    border-color: Highlight;
    background: Highlight;
  }

  .motion-input:checked ~ .motion-track::after {
    background: HighlightText;
  }
}

/* ---------------------------------------------------------------- print */

@media print {
  @page {
    margin: 16mm;
  }

  html,
  body,
  .sheet,
  .frame,
  .masthead,
  .block,
  .cell,
  .foot {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    padding: 0;
    min-height: 0;
  }

  .sheet,
  .frame {
    display: block;
    min-height: 0;
    border: 0;
    background-image: none !important;
  }

  .zones,
  .drawing,
  .motion,
  .foot-meta,
  .ico,
  .map-link,
  .status-dot {
    display: none !important;
  }

  .cell-notes {
    display: block;
  }

  .note {
    margin-bottom: 8pt;
  }

  .industries li {
    border-color: #999;
  }

  .industries li,
  .disciplines li,
  .disciplines li::before {
    color: #000 !important;
  }

  .masthead,
  .cell,
  .foot {
    padding: 0 0 10pt;
    border: 0;
  }

  .block {
    display: block;
  }

  .wordmark,
  .wordmark-name,
  .wordmark-short,
  .accent,
  .label,
  .k,
  .lead,
  .about,
  address,
  .contact a,
  .v {
    color: #000 !important;
  }

  .wordmark-short {
    border-color: #000;
  }

  h1 {
    font-size: 20pt;
  }

  .contact,
  .contact li {
    border-color: #999;
  }

  .contact a {
    min-height: 0;
    padding: 4pt 0;
    grid-template-columns: minmax(0, 1fr);
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}