/* ==========================================================================
   Sections — homepage and page-level composition
   ========================================================================== */

/* ==========================================================================
   01 · Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: 0;
  overflow: hidden;
  background: var(--void);
  border-bottom: 0;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.08) brightness(0.82);
}

.hero__media video {
  position: absolute;
  inset: 0;
}

/* Blue-field grade + vignette so headline always clears contrast */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 100% at 78% 18%, rgba(0, 56, 168, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.48) 0%, rgba(8, 9, 11, 0.18) 40%, var(--bg) 96%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--s-7);
}

/* Brand mark in the headline stack, flush with "WHERE".
   A step above half the type size of that word. The hero uses a 4× asset
   so this size stays sharp instead of stretching the small header file. */
.hero__mark {
  margin: 0 0 0.16em;
  font-size: var(--fs-mega);
  line-height: 0;
}

.hero__mark img {
  display: block;
  width: auto;
  height: 0.65em;
  min-height: 3.15rem;
  aspect-ratio: 944 / 304;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.hero__h1 {
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

/* Per-word clip reveal — words wrapped by motion.js, safe without JS */
.hero__h1 .word {
  display: inline-block;
}

.hero__h1 em {
  font-style: normal;
  color: var(--orange-hot);
}

.hero__lede {
  max-width: 54ch;
  margin-bottom: var(--s-6);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-mid);
}

/* Bottom instrument strip */
.hero__strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
}

.hero__cell {
  background: rgba(11, 13, 16, 0.72);
  backdrop-filter: blur(8px);
  padding: var(--s-4) var(--s-5);
}

.hero__cell dt {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s-2);
}

.hero__cell dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

.hero__cell dd a:hover {
  color: var(--orange-hot);
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: 148px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
}

.hero__cue::after {
  content: "";
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, var(--orange), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media video {
    display: none;
  }
}

/* ==========================================================================
   02 · Proof scoreboard
   ========================================================================== */

.board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--hairline);
}

.board__cell {
  background: var(--bg);
  padding: var(--s-5) var(--s-4);
}

.board__n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: var(--s-3);
}

.board__n span {
  font-size: 0.45em;
  color: var(--orange-hot);
  margin-left: 0.15em;
  letter-spacing: 0;
}

.board__k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ==========================================================================
   03 · Service lines — sticky dossier stack

   Each plate is a full spec sheet with a numbered spine. CSS sticky pins
   them so the spines remain visible as tabs (`--stack-peek` tall) while the
   next plate slides over the body. No JS required for the stack itself;
   motion.js used to pin+dim+scale these and that is what made them look
   broken. Do not reintroduce transform/filter on the card.
   ========================================================================== */

.lines {
  --stack-peek: 2.75rem;
  display: flex;
  flex-direction: column;
}

.line {
  position: sticky;
  top: calc(var(--header-h) + (var(--i, 0) * var(--stack-peek)));
  z-index: calc(2 + var(--i, 0));
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--header-h) - (2 * var(--stack-peek)));
  background: var(--bg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  /* Adjacent plates share an edge; collapse the double line. */
  margin-top: -1px;
}

.line:first-child {
  margin-top: 0;
}

.line__spine {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: 0 0 var(--stack-peek);
  height: var(--stack-peek);
  padding: 0 var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.line__idx {
  color: var(--orange-hot);
}

.line__spine-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line__flag {
  color: var(--orange-hot);
}

.line__count {
  color: var(--text-dim);
  text-align: right;
}

.line__body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  flex: 1 1 auto;
  min-height: 0;
}

.line__text {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border-right: 1px solid var(--hairline);
}

.line__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  max-width: 14ch;
  margin-bottom: var(--s-4);
}

.line__def {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  max-width: 46ch;
  margin: 0 0 var(--s-5);
}

.line__ctx {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.line__ctx li {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.line__foot {
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

/* Stretched hit-target. The visible label is the text-link treatment; the
   ::after covers the whole plate so one click opens the line. */
.line__go {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--orange-hot);
}

.line__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.line__go::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width var(--t-base) var(--ease-out);
}

.line:hover .line__go::after,
.line__go:focus-visible::after {
  width: 48px;
}

.line:focus-within {
  outline: 1px solid var(--orange);
  outline-offset: -1px;
}

.line__media {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  background: var(--void);
}

.line__photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 0;
}

.line__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.08) brightness(0.88);
  transform: scale(1.04);
  transition:
    filter var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.line:hover .line__photo img {
  filter: grayscale(0) contrast(1.06) brightness(0.96);
  transform: scale(1.08);
}

/* Scroll-driven wipe as each plate arrives. motion.js writes only the raw
   progress number into --wipe and this template does the rest; tweening a
   clip-path string directly gets collapsed to a shorthand by the browser and
   the tween silently freezes. The card itself is never touched — see the
   warning at the top of this section. */
.js-motion .line__photo img {
  clip-path: inset(0 calc(100% - var(--wipe, 1) * 100%) 0 0);
}

/* Digit columns for the inventory counts and plate numerals. Every cell is
   exactly 1em tall and each column holds twenty of them, which is what lets
   motion.js address a place as a flat -5% of the column height. */
.odo {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
  line-height: 1;
}

.odo__col {
  display: block;
}

.odo__d {
  display: block;
  height: 1em;
  line-height: 1;
}

.line__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 16, 0.08), rgba(11, 13, 16, 0.45)),
    linear-gradient(90deg, rgba(0, 56, 168, 0.18), transparent 55%);
  pointer-events: none;
}

.line__num {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-3);
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.75;
  letter-spacing: -0.06em;
  color: rgba(232, 234, 237, 0.14);
  pointer-events: none;
}

.line__inv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}

.line__inv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0.45rem 0.75rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.line__inv > div:nth-child(2n) {
  border-right: 0;
}

/* Three categories fill the row instead of leaving a hanging cell. */
.line__inv:has(> :nth-child(3):last-child) {
  grid-template-columns: 1fr 1fr 1fr;
}

.line__inv:has(> :nth-child(3):last-child) > div {
  border-right: 1px solid var(--hairline);
}

.line__inv:has(> :nth-child(3):last-child) > div:last-child {
  border-right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .line__photo img,
  .line:hover .line__photo img {
    transform: none;
  }
}

.line__inv dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-dim);
}

.line__inv dd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   04 · Equipment index — list + reserved image well

   Copy stays on the left. The plate lives in its own column so imagery never
   covers the heading, lede, names, or tags. Hover (desktop) and scroll
   (touch) swap the plate; without JS the first image simply sits in the well.
   ========================================================================== */

.idx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  grid-template-areas:
    "head well"
    "body well";
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: var(--s-5);
  align-items: start;
}

.idx-head {
  grid-area: head;
}

.idx-head .h2 {
  max-width: 22ch;
  margin-bottom: var(--s-4);
}

.idx-head .lede {
  max-width: 62ch;
}

.idx-body {
  grid-area: body;
  min-width: 0;
}

.idx__well {
  grid-area: well;
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  align-self: start;
}

.idx {
  border-top: 1px solid var(--hairline);
}

.idx__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, auto) 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  transition:
    color var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out);
}

.idx__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--orange-hot);
}

.idx__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.idx__rule {
  height: 1px;
  background: var(--hairline);
}

.idx__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Siblings recede so the active row carries the eye on its own. */
.idx.is-tracking .idx__row,
.idx:hover .idx__row {
  opacity: 0.34;
}

.idx .idx__row:hover,
.idx .idx__row:focus-visible,
.idx.is-tracking .idx__row.is-viewing,
.idx .idx__row.is-viewing:hover {
  opacity: 1;
  color: var(--orange-hot);
}

.idx__row:hover .idx__tag,
.idx__row.is-viewing .idx__tag {
  color: var(--text-mid);
}

.idx__plate {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  background: var(--void);
}

.idx__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--scanline);
  opacity: 0.45;
}

.idx__float {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.idx__float img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.06) brightness(0.92);
}

.idx__float.is-pending img {
  opacity: 0 !important;
}

.idx__float.is-pending::after {
  content: "Photo updating";
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.idx__float [data-idx-b] {
  opacity: 0;
}

.idx__plate-meta {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 880px) {
  .idx-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "well"
      "body";
    row-gap: var(--s-5);
  }

  .idx__well {
    position: relative;
    top: auto;
  }

  .idx__plate {
    max-width: 36rem;
    max-height: 38vh;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 720px) {
  .idx__row {
    grid-template-columns: 2.25rem 1fr;
    row-gap: var(--s-2);
  }

  .idx__rule {
    display: none;
  }

  .idx__tag {
    grid-column: 2;
  }
}

@media (hover: none) {
  .idx:hover .idx__row {
    opacity: 1;
  }

  .idx.is-tracking .idx__row {
    opacity: 0.4;
  }

  .idx.is-tracking .idx__row.is-viewing {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .idx:hover .idx__row {
    opacity: 1;
  }
}

/* ==========================================================================
   05 · Shear assembly — pinned scroll sequence
   ========================================================================== */

.assembly {
  position: relative;
  background: var(--void);
  border-top: 1px solid var(--hairline);
}

.assembly__pin {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 50% 45%, rgba(0, 56, 168, 0.22), transparent 65%),
    var(--void);
}

/* Engineering graph paper */
.assembly__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(var(--hairline-lo) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-lo) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 78%);
}

.assembly__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-block: var(--s-8);
}

.assembly__svg {
  width: min(860px, 88vw);
  height: auto;
  overflow: visible;
}

/* SVG part styling */
.asm-part {
  fill: var(--surface-2);
  stroke: var(--text-mid);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.asm-part--accent {
  fill: var(--orange-dim);
  stroke: var(--orange-hot);
}

.asm-line {
  fill: none;
  stroke: var(--hairline-hi);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.asm-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-dim);
}

.asm-label--accent {
  fill: var(--orange-hot);
}

.asm-logo {
  fill: var(--orange);
}

/* The mark is the last frame of the scroll sequence. Without JS — or under
   reduced motion, where the sequence never runs — it would sit on top of the
   assembled shear, so it starts hidden and the timeline reveals it. */
#asm-mark {
  opacity: 0;
}

.asm-word {
  font-family: var(--font-display);
  fill: var(--text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Copy rail + live readout */
.assembly__copy {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  max-width: 30ch;
  pointer-events: none;
}

.assembly__readout {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: var(--s-7);
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  min-width: 210px;
}

.assembly__readout > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  background: rgba(11, 13, 16, 0.88);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.assembly__readout dt {
  color: var(--text-dim);
}

.assembly__readout dd {
  margin: 0;
  color: var(--orange-hot);
  font-variant-numeric: tabular-nums;
}

/* Phase captions swapped by scroll progress */
.assembly__phase {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-height: 3em;
}

.assembly__phase b {
  display: block;
  color: var(--orange-hot);
  margin-bottom: var(--s-2);
}

/* ==========================================================================
   05 · Flagship spotlight
   ========================================================================== */

.flag__head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-7);
}

.flag__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.flag__item {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 13, 16, 0.72);
  padding: var(--s-5);
  overflow: hidden;
  transition: background-color var(--t-base) var(--ease-out);
}

.flag__item:hover {
  background: rgba(2, 16, 47, 0.85);
}

.flag__item__n {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--orange-hot);
  margin-bottom: var(--s-4);
}

.flag__item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.flag__item p {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 var(--s-4);
}

.flag__stat {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.flag__stat b {
  display: block;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-transform: none;
  margin-top: var(--s-1);
}

/* Applications grid */
.apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: var(--s-6);
}

.apps li {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 13, 16, 0.6);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.apps li:hover {
  color: var(--orange-hot);
  background: rgba(2, 16, 47, 0.8);
}

/* ==========================================================================
   06 · Capability rail — horizontal scroll hijack
   ========================================================================== */

.rail {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

.rail__pin {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s-7);
}

.rail__head {
  margin-bottom: var(--s-6);
}

.rail__track {
  display: flex;
  gap: 1px;
  background: var(--hairline);
  width: max-content;
  border-block: 1px solid var(--hairline);
  will-change: transform;
}

.rail__card {
  width: clamp(280px, 34vw, 420px);
  flex-shrink: 0;
  background: var(--bg);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
}

.rail__card__n {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--orange-hot);
  margin-bottom: var(--s-5);
}

.rail__card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

.rail__card p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 var(--s-5);
}

.rail__kit {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.rail__kit dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}

.rail__kit dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-mid);
}

/* Fallback: plain horizontal scroll if pinning is off */
.rail--scroll .rail__track {
  overflow-x: auto;
  width: 100%;
}

/* ==========================================================================
   07 · Why GOR
   ========================================================================== */

.why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.why__item {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
}

.why__item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: var(--s-4) 0 var(--s-3);
}

.why__item p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

.why__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--orange-hot);
}

.why__fig {
  margin-top: auto;
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Copy on the left, a data block on the right — keeps a short section from
   running half-empty across a 1500px shell. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}

/* ==========================================================================
   08 · Quality / ISO
   ========================================================================== */

.qual {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  align-items: start;
}

.qual__cert {
  border: 1px solid var(--hairline);
  padding: var(--s-4);
  background: var(--surface);
}

.qual__cert img {
  width: 100%;
  filter: grayscale(0.25) contrast(1.05);
}

.qual__steps {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.qual__step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-4);
  background: var(--bg);
  padding: var(--s-4) var(--s-5);
}

.qual__step > .mono {
  color: var(--orange-hot);
}

/* The step number occupies the narrow first column; heading and copy both
   belong in the second so the paragraph is not squeezed into 3.5rem. */
.qual__step h3,
.qual__step p {
  grid-column: 2;
}

.qual__step h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: var(--s-2);
}

.qual__step p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ==========================================================================
   09 · Article cards
   ========================================================================== */

/* Cell-drawn gridlines — see .grid-eq. A short last row must not leave
   visible empty boxes as the archive grows or gets filtered. */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.post {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  padding: var(--s-5);
  transition: background-color var(--t-base) var(--ease-out);
}

.post:hover {
  background: var(--surface);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.post__meta .cat {
  color: var(--orange-hot);
}

.post h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
}

.post p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 var(--s-5);
}

.post .tlink {
  margin-top: auto;
}

/* ==========================================================================
   Product Service Lines hub
   ========================================================================== */

.psl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.psl__card {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.psl__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--void);
}

.psl__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.1) brightness(0.78);
  transition: filter var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.psl__card:hover .psl__media img {
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1.04);
}

.psl__n {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--orange-hot);
}

.psl__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
}

.psl__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}

.psl__body p {
  color: var(--text-mid);
  font-size: var(--fs-sm);
  margin: 0;
}

.psl__body .line__go {
  margin-top: auto;
}

/* ==========================================================================
   10 · CTA band
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(90% 130% at 22% 100%, rgba(0, 56, 168, 0.4), transparent 60%),
    var(--void);
}

.cta__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--s-9);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: center;
}

.cta__phone {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.02em;
  color: var(--text);
  transition: color var(--t-fast);
}

.cta__phone:hover {
  color: var(--orange-hot);
}

.cta__aside {
  border-left: 1px solid var(--hairline);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6);
}

/* ==========================================================================
   Article / prose pages
   ========================================================================== */

.article {
  max-width: 74ch;
}

.article h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.3125rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.article h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  margin: var(--s-6) 0 var(--s-3);
}

.article p,
.article ul,
.article ol {
  color: var(--text-mid);
  margin: 0 0 var(--s-5);
}

.article .lede {
  max-width: none;
}

.article ul,
.article ol {
  display: grid;
  gap: var(--s-2);
  padding-left: 0;
}

.article ul li {
  position: relative;
  padding-left: 1.5rem;
}

.article ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.75em;
  color: var(--orange-hot);
}

.article ol {
  counter-reset: n;
}

.article ol li {
  position: relative;
  padding-left: 2rem;
  counter-increment: n;
}

.article ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--orange-hot);
  top: 0.3em;
}

.article strong {
  color: var(--text);
  font-weight: 600;
}

.article a:not(.btn):not(.tlink) {
  color: var(--orange-hot);
  border-bottom: 1px solid var(--orange-dim);
}

.article a:not(.btn):not(.tlink):hover {
  border-bottom-color: var(--orange);
}

.article blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  border-left: 2px solid var(--orange);
  background: var(--surface);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
}

.callout {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--orange);
  background: var(--surface);
}

.callout > .mono {
  display: block;
  margin-bottom: var(--s-3);
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   404
   ========================================================================== */

.fault {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  text-align: left;
  padding-block: var(--s-9);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(0, 56, 168, 0.25), transparent 60%),
    var(--bg);
}

/* place-content: center would shrink the shell to its content width and break
   the left gutter every other page shares. */
.fault .shell {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* The numeral is wallpaper, not a stacked block — sitting it in the flow pushed
   every useful link below the fold. */
.fault__code {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--surface-2);
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   Interior page masthead — service lines, equipment, about, news, contact
   ========================================================================== */

.phead {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: var(--s-7);
  border-bottom: 0;
  overflow: hidden;
  background: var(--void);
}

/* Faint plate photograph behind the masthead — documentation, not decoration */
.phead__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.phead__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(0.18) contrast(1.06) brightness(0.72);
}

.phead__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--scanline),
    radial-gradient(110% 100% at 82% 10%, rgba(0, 56, 168, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.58) 0%, rgba(8, 9, 11, 0.42) 45%, var(--void) 100%);
}

/* Indexed hairline between masthead/hero and the next section */
.mast-break {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.mast-break__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-hot);
  flex-shrink: 0;
}

.mast-break__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--orange) 0, var(--orange) 28px, var(--hairline) 28px, var(--hairline) 100%);
  opacity: 0.9;
}

.mast-break__mark {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1;
  color: var(--text-faint);
  flex-shrink: 0;
}

.phead__inner {
  position: relative;
  z-index: 1;
}

.phead h1 {
  max-width: 24ch;
  margin-bottom: var(--s-5);
}

.phead__lede {
  max-width: 62ch;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-mid);
}

/* Instrument strip: the numbers that qualify the line */
.phead__strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: var(--s-7);
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
}

.phead__cell {
  background: rgba(11, 13, 16, 0.72);
  backdrop-filter: blur(8px);
  padding: var(--s-4) var(--s-5);
}

.phead__cell dt {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s-2);
}

.phead__cell dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

.phead__cell dd b {
  color: var(--orange-hot);
  font-weight: 500;
}

/* ==========================================================================
   Line notes — the three operating facts under each catalog
   ========================================================================== */

.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.notes__item {
  background: var(--bg);
  padding: var(--s-5);
}

.notes__item > .mono {
  display: block;
  color: var(--orange-hot);
  margin-bottom: var(--s-3);
}

.notes__item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  margin-bottom: var(--s-3);
}

.notes__item p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ==========================================================================
   Equipment detail page
   ========================================================================== */

.dp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.dp__gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
}

.dp__hero {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--void);
}

.dp__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flex rather than grid: thumbs grow to fill each row exactly, so a short
   gallery never leaves empty bordered cells behind. */
.dp__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.dp__thumb {
  flex: 1 1 84px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  background: var(--void);
  opacity: 0.5;
  transition: opacity var(--t-fast) var(--ease-out);
}

.dp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp__thumb[aria-pressed="true"],
.dp__thumb:hover {
  opacity: 1;
}

.dp__block {
  margin-bottom: var(--s-6);
}

/* Detail pages carry four specs each — a fixed pair of columns tiles them
   evenly instead of orphaning one in an auto-fit row. */
.dp .specs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dp__block > h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

.dp__cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   Related items
   ========================================================================== */

.rel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.rel__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-4);
  background: var(--bg);
  transition: background-color var(--t-base) var(--ease-out);
}

.rel__item:hover {
  background: var(--surface);
}

.rel__item b {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: -0.012em;
}

.rel__item span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Six vignettes tile 3×2 exactly; auto-fit would orphan the last two. */
.why--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ==========================================================================
   About — values creed and facility plates
   ========================================================================== */

.creed {
  margin: 0;
}

/* The measure has to live on the element that carries the display font —
   `ch` on the blockquote would resolve against the inherited body size. */
.creed p {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

.creed em {
  font-style: normal;
  color: var(--orange-hot);
}

.creed footer {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
}

.plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.plates--people {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-6);
}

/* Shop portraits are 3:4. A 4:3 cover crop would cut off the person and the work. */
.plates--people .plate img {
  aspect-ratio: 3 / 4;
}

.plate {
  margin: 0;
  background: var(--void);
}

.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.04) brightness(0.96);
  transition: filter var(--t-slow) var(--ease-out);
}

.plate:hover img {
  filter: grayscale(0) contrast(1.02) brightness(1);
}

/* Keep the GOR sign on yard-01 fully in frame (portrait photo in 4:3 crop) */
.plate--sign img {
  object-position: center top;
}

.plate--team {
  grid-column: 1 / -1;
}

.plate--team img {
  aspect-ratio: 21 / 9;
  object-position: center 30%;
}

.plate figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
}

.plate__note {
  color: var(--orange-hot);
}

@media (max-width: 720px) {
  .plates--people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plate--team img {
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   Article pages
   ========================================================================== */

.artmast {
  margin-bottom: var(--s-6);
}

/* Measure belongs on the headline itself — `ch` on the wrapper would resolve
   against the inherited body size and crush the display type. */
.artmast h1 {
  max-width: 20ch;
}

.artmast .post__meta {
  margin-bottom: var(--s-4);
}

.artfig {
  margin: 0 0 var(--s-7);
  border: 1px solid var(--hairline);
  background: var(--void);
  overflow: hidden;
}

/* Google's embed has no dark style, so invert it into the substrate. The double
   hue-rotate keeps landmarks and the marker close to their real colours. */
.map iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.75) brightness(0.95) contrast(0.9);
}

.artfig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Data tables inside article prose */
.dtable {
  width: 100%;
  margin: var(--s-6) 0;
  border-collapse: separate;
  border-spacing: 1px;
  background: var(--hairline);
  font-size: var(--fs-xs);
  text-align: left;
}

.dtable th {
  background: var(--surface-2);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dtable td {
  background: var(--bg);
  padding: var(--s-3) var(--s-4);
  line-height: 1.5;
  vertical-align: top;
  color: var(--text-mid);
}

.dtable tbody tr:hover td {
  background: var(--surface);
  color: var(--text);
}

.artfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  max-width: 68ch;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.artfoot > .mono {
  width: 100%;
  color: var(--text-faint);
}

/* News index runs a wider grid than the homepage teaser row */
.posts--index {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.post[hidden] {
  display: none;
}

/* ==========================================================================
   Contact + brochure two-column layout
   ========================================================================== */

.ctwo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.ctwo > aside {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  background: var(--surface);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  border-top: 1px solid var(--hairline);
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  list-style: none;
  transition: color var(--t-fast) var(--ease-out);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--orange-hot);
}

.faq__item[open] summary::after {
  content: "–";
}

.faq__item summary:hover {
  color: var(--orange-hot);
}

.faq__item p {
  max-width: 68ch;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-dim);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .board {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__strip,
  .phead__strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .dp {
    grid-template-columns: 1fr;
  }

  .why--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dp__gallery {
    position: static;
  }

  .duo,
  .qual,
  .flag__head,
  .cta__inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .cta__aside {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding: var(--s-5);
  }
}

@media (max-width: 900px) {
  .psl {
    grid-template-columns: 1fr;
  }

  .line {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
  }

  .line__body {
    grid-template-columns: 1fr;
  }

  .line__text {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .line__name {
    max-width: none;
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }

  .line__photo {
    min-height: 240px;
  }

  .line__num {
    font-size: 4.5rem;
  }

  .line__inv,
  .line__inv:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr 1fr;
  }

  .line__inv:has(> :nth-child(3):last-child) > div:nth-child(2n) {
    border-right: 0;
  }

  .notes,
  .why--3,
  .plates:not(.plates--people) {
    grid-template-columns: 1fr;
  }

  .ctwo {
    grid-template-columns: 1fr;
  }

  .line__media {
    min-height: 0;
  }

  .assembly__copy {
    position: static;
    transform: none;
    max-width: none;
    padding: 0 var(--gutter) var(--s-5);
  }

  .assembly__readout {
    position: static;
    margin: var(--s-5) var(--gutter) 0;
  }

  .assembly__pin {
    min-height: auto;
    padding-block: var(--s-8);
  }
}

@media (max-width: 640px) {
  .board {
    grid-template-columns: repeat(2, 1fr);
  }

  .line__inv,
  .line__inv:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }

  .line__inv > div,
  .line__inv:has(> :nth-child(3):last-child) > div {
    border-right: 0;
  }

  .hero__strip,
  .phead__strip {
    grid-template-columns: 1fr;
  }

  .hero__cue {
    display: none;
  }

  .rail__pin {
    min-height: auto;
  }
}

/* ==========================================================================
   Offshore well lifecycle — scroll-scrubbed frame sequence over a drafting plate.

   Base rules are the static layout (no JS, reduced motion): the poster plate,
   then the six stages as a grid. `.js-motion` turns it into a pinned stage
   where the canvas fills the viewport and one card shows at a time.
   ========================================================================== */

.lifecycle {
  --plate: #f3f3f1;
  --ink: #0b0d10;
  --ink-mid: #3b414a;
  --ink-dim: #5d646e;
  padding: 0;
}

.lifecycle__pin {
  padding-block: var(--section-y);
}

.lifecycle__plate {
  width: min(100% - 2 * var(--gutter), var(--shell));
  margin: 0 auto var(--s-7);
  aspect-ratio: 16 / 9;
  background: var(--plate);
  overflow: hidden;
}

.lifecycle__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lifecycle__canvas {
  display: none;
}

.lifecycle__head {
  max-width: 62ch;
  margin-bottom: var(--s-7);
}

.lifecycle__head .h2 {
  max-width: 18ch;
  margin-bottom: var(--s-4);
}

.lifecycle__stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
}

.lifecycle__stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--blue-lift);
  container-type: inline-size;
}

.lifecycle__stage[data-band="core"] {
  border-top-color: var(--orange);
}

.lifecycle__band {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-lift);
}

.lifecycle__stage[data-band="core"] .lifecycle__band {
  color: var(--orange-hot);
}

.lifecycle__n {
  color: var(--text-faint);
}

.lifecycle__stage h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: min(1.35rem, 9.2cqi);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lifecycle__stage p:last-child {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-mid);
}

.lifecycle__rail {
  display: none;
}

@media (max-width: 1100px) {
  .lifecycle__stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .lifecycle__stages {
    grid-template-columns: 1fr;
  }
}

/* ---- Motion: pinned drafting plate --------------------------------------- */

.js-motion .lifecycle__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--plate);
  color: var(--ink);
}

.js-motion .lifecycle__plate {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
}

.js-motion .lifecycle__poster {
  display: none;
}

.js-motion .lifecycle__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.js-motion .lifecycle__ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-5);
  pointer-events: none;
}

.js-motion .lifecycle__head {
  max-width: min(30rem, 34vw);
  margin: 0;
}

.js-motion .lifecycle__head .eyebrow {
  color: var(--ink-dim);
}

.js-motion .lifecycle__head .eyebrow::after {
  background: rgba(11, 13, 16, 0.14);
}

.js-motion .lifecycle__head .h2 {
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.js-motion .lifecycle__head .prose {
  color: var(--ink-mid);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.js-motion .lifecycle__stages {
  grid-row: 3;
  display: grid;
  grid-template-columns: none;
  grid-template-areas: "stack";
  width: min(32rem, 40vw);
  margin-bottom: var(--s-5);
}

.js-motion .lifecycle__stage {
  grid-area: stack;
  align-self: end;
  gap: var(--s-4);
  padding: var(--s-6);
  background: rgba(11, 13, 16, 0.94);
  border: 0;
  border-top: 3px solid var(--blue-lift);
  box-shadow: 0 24px 48px -24px rgba(11, 13, 16, 0.45);
  color: var(--text);
  visibility: hidden;
}

.js-motion .lifecycle__stage[data-band="core"] {
  border-top-color: var(--orange);
}

.js-motion .lifecycle__band {
  font-size: var(--fs-xs);
}

.js-motion .lifecycle__stage h3 {
  font-size: clamp(1.85rem, 2.8vw, 2.65rem);
  letter-spacing: 0.02em;
}

.js-motion .lifecycle__stage p:last-child {
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 42ch;
}

.js-motion .lifecycle__rail {
  grid-row: 4;
  display: grid;
  gap: var(--s-2);
}

.lifecycle__ticks {
  display: grid;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lifecycle__ticks {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3);
  color: var(--ink-dim);
}

.lifecycle__ticks span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--t-base) var(--ease-out);
}

.lifecycle__ticks span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--s-2);
  border: 1px solid currentColor;
  vertical-align: 0.05em;
  transition: background var(--t-base) var(--ease-out);
}

.lifecycle__ticks span.is-past {
  color: var(--ink-mid);
}

.lifecycle__ticks span.is-past::before {
  background: currentColor;
}

.lifecycle__ticks span.is-active {
  color: var(--ink);
}

.lifecycle__ticks span.is-active[data-band="growth"]::before {
  background: var(--blue);
  border-color: var(--blue);
}

.lifecycle__ticks span.is-active[data-band="core"]::before {
  background: var(--orange);
  border-color: var(--orange);
}

.lifecycle__bar {
  height: 3px;
  background: rgba(11, 13, 16, 0.1);
}

.lifecycle__bar i {
  --p: 0;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0 50%, var(--orange) 50% 100%);
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}

@media (max-width: 900px) {
  .js-motion .lifecycle__head .prose {
    display: none;
  }

  .js-motion .lifecycle__head,
  .js-motion .lifecycle__stages {
    width: auto;
    max-width: none;
  }

  .js-motion .lifecycle__head .h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    max-width: 16ch;
  }

  .js-motion .lifecycle__stages {
    margin-bottom: var(--s-4);
  }

  .js-motion .lifecycle__stage {
    padding: var(--s-4);
    gap: var(--s-2);
  }

  .js-motion .lifecycle__stage h3 {
    font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  }

  .js-motion .lifecycle__stage p:last-child {
    font-size: var(--fs-xs);
  }

  .lifecycle__ticks span {
    font-size: 0;
    letter-spacing: 0;
  }

  .lifecycle__ticks span::before {
    margin-right: 0;
  }
}