/* ==========================================================================
   Ravri Precision — v2
   Separation by space, not by borders. Light display type at large sizes.
   Photography as the connective tissue between sections.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root{
  --graphite:#0d0f10;
  --graphite-2:#131617;
  --graphite-3:#1b1f21;

  --film:#f1f3f4;
  --film-2:#ffffff;

  --amber:#e0a03c;
  --amber-hi:#f0c57e;
  --gold-img:url("../img/gold-texture.jpg");
  --gold-deep:#8a5a12;        /* the brand gold, dark enough to pass AA on film */
  --blueprint:#6aa0bf;      /* for dark bands */
  --blueprint-ink:#3d6b87;  /* the same hue, dark enough for the light ones */
  --ice:#8fb3c4;

  --on-dark:#e9ecee;
  --on-dark-2:#a8b0b5;
  --on-dark-3:#828b90;      /* 5.5:1 on graphite — was 4.2 and failing AA */
  --on-film:#15181a;
  --on-film-2:#5d666b;
  --on-film-3:#5f686c;      /* 4.7:1 on the darkest film tone — was 2.3 */

  --hair-dark:rgba(255,255,255,.09);
  --hair-film:rgba(21,24,26,.11);

  --flag:#d9664e;           /* for dark bands */
  --flag-ink:#b34530;       /* 4.95:1 on --film, which the form now sits on */

  --ff-display:"Archivo",system-ui,sans-serif;
  --ff-body:"Archivo",system-ui,-apple-system,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --band:clamp(92px,10.5vw,172px);
  --gap:clamp(40px,5.5vw,84px);
  --nav-h:128px;
  /* readability floors: no tracked label under 11.5px, no supporting copy under 14px.
     Audit found dt labels at 9px and footnotes at 10.9px. */
  --fs-label:.72rem;
  --fs-small:.875rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
summary::-webkit-details-marker{display:none}

p,li,dd,figcaption,address{text-wrap:pretty}   /* no single-word last lines */

body{
  font-family:var(--ff-body);
  font-variation-settings:"wdth" 100;
  font-size:1rem;
  line-height:1.6;
  background:var(--graphite);
  color:var(--on-dark);
  -webkit-font-smoothing:antialiased;
}

/* --- Layout -------------------------------------------------------------- */
.wrap{width:min(1280px,100% - 56px);margin-inline:auto}
/* A tight section keeps the page's left edge and limits its own measure instead of
   centring a narrower column — a second left margin read as a mistake. */
.wrap--tight{width:min(1280px,100% - 56px);margin-inline:auto}
.wrap--tight > *{max-width:900px}

.band{position:relative;z-index:1;padding:var(--band) 0}
.band--dark{background:var(--graphite);color:var(--on-dark)}
.band--dark-2{background:var(--graphite-2);color:var(--on-dark)}
.band--film{background:var(--film);color:var(--on-film)}
.band--snug{padding-top:clamp(56px,6vw,96px)}
.band--pinned{padding:0}

/* --- Type ---------------------------------------------------------------- */
.display-1,.display-2,.display-3{
  font-family:var(--ff-display);
  font-variation-settings:"wdth" 104;
  font-weight:450;
  text-wrap:balance;
}
.display-1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.035em}
.display-2{font-size:clamp(1.85rem,3.1vw,2.7rem);line-height:1.08;letter-spacing:-.03em}
.display-3{font-size:clamp(1.15rem,1.5vw,1.38rem);font-weight:500;line-height:1.2;letter-spacing:-.015em}

.lead{font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.6;color:var(--on-dark-2)}
.band--film .lead{color:var(--on-film-2)}
.measure{max-width:60ch}
.measure--short{max-width:44ch}

.eyebrow{
  font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3);
}
.band--film .eyebrow{color:var(--on-film-3)}

.mono{font-family:var(--ff-mono)}
.mute{color:var(--on-dark-2)}
.band--film .mute{color:var(--on-film-2)}

.stack > * + *{margin-top:20px}
.stack-lg > * + *{margin-top:30px}

/* --- Section heads ------------------------------------------------------- */
.sechead{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;
  margin-bottom:clamp(44px,5.5vw,80px)}
.sechead__text > * + *{margin-top:18px}
.sechead .eyebrow + .display-2{margin-top:22px}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:15px 24px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),transform .25s var(--ease);
}
.btn svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:#ffffff;color:var(--graphite);border-color:#ffffff}
.btn--primary:hover{background:#e7ebed;border-color:#e7ebed}
.band--film .btn--primary{background:var(--graphite);color:#ffffff;border-color:var(--graphite)}
.band--film .btn--primary:hover{background:#242a2d;border-color:#242a2d}
.btn--ghost{background:#23282b;color:var(--on-dark);border-color:#23282b}
.btn--ghost:hover{background:#2e3438;border-color:#2e3438}
.band--film .btn--ghost{background:#dfe4e7;color:var(--on-film);border-color:#dfe4e7}
.band--film .btn--ghost:hover{background:#d2d9dd;border-color:#d2d9dd}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.btn--text{
  display:inline-flex;align-items:center;gap:9px;padding:0;border:0;background:none;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);cursor:pointer;
}
.btn--text svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.btn--text:hover svg{transform:translateX(4px)}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--amber);outline-offset:4px;border-radius:2px;
}

/* --- Nav ----------------------------------------------------------------- */
/* The bar itself carries no fill — it reads whatever band is behind it and
   flips its ink to suit. `--nav-ink` is the one knob everything in here uses,
   so a tone change is a single transition rather than six. */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  background:transparent;
  --nav-ink:var(--on-dark);
  --nav-ink-2:var(--on-dark-2);
  --nav-hair:var(--hair-dark);
  transition:transform .4s var(--ease);
}
.nav.is-light{
  --nav-ink:var(--graphite);
  --nav-ink-2:#4a5257;
  --nav-hair:var(--hair-film);
}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--nav-hair);opacity:0;transition:opacity .3s var(--ease)}
.nav.is-stuck::after{opacity:1}
/* far enough to clear the bar and its shadow, since the floating pill sits
   lower in the nav box than a full-bleed bar would */
.nav.is-away{transform:translateY(calc(-100% - 24px))}

/* The bar's box never changes — it is 20px of padding wider than the page grid
   on each side, so whatever is inside it lands on the same 1280px column as the
   rest of the page in both states. Only the fill, the corners and the shadow
   arrive when it starts floating; nothing resizes. */
.nav__inner{position:relative;display:flex;align-items:center;gap:30px;
  width:min(1320px,100% - 24px);margin-inline:auto;
  padding:15px 20px;border-radius:0;background:transparent;
  transition:background .35s var(--ease),border-radius .35s var(--ease),
             box-shadow .35s var(--ease);}

/* Once you start coming back up the page the bar detaches and floats as a solid
   block, so it never has to compete with whatever is behind it. It is always
   dark, so its ink is fixed and the band-tone switching stops applying. */
.nav.is-float .nav__inner{
  background:var(--graphite);
  border-radius:0;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
}
.nav.is-float::after{opacity:0}
.nav__logo{display:flex;align-items:center;flex:none}
/* The mark is the brushed-gold texture, masked to the letterforms — so it picks up
   real metal grain instead of a flat gradient. */
.logomark{
  display:block;height:38px;aspect-ratio:1000 / 339.58;
  background:url("../img/gold-texture.jpg") center/cover no-repeat;
  -webkit-mask:url("../img/logo-mask.svg") center/contain no-repeat;
          mask:url("../img/logo-mask.svg") center/contain no-repeat;
}
.nav__logo--foot .logomark{height:44px;margin-bottom:24px}
.nav__wordmark{
  font-family:var(--ff-display);font-weight:600;font-size:1rem;
  font-variation-settings:"wdth" 108;letter-spacing:.02em;line-height:1;
}
.nav__wordmark span{display:block;font-family:var(--ff-mono);font-size:.5rem;font-weight:400;
  letter-spacing:.24em;color:var(--on-dark-3);margin-top:4px}
.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{
  position:relative;font-family:var(--ff-mono);font-size:.78rem;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;color:var(--nav-ink-2);
  padding:8px 0;transition:color .22s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--nav-ink);opacity:.9;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--nav-ink)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--nav-ink)}
.nav__cta{flex:none;padding:12px 20px}
/* on a light band the solid-white button would vanish, so it inverts with the bar */
.nav.is-light .nav__cta{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.nav.is-light .nav__cta:hover{background:#242a2d;border-color:#242a2d}
.nav.is-float,.nav.is-float.is-light{
  --nav-ink:var(--on-dark);--nav-ink-2:var(--on-dark-2);--nav-hair:var(--hair-dark);
}
.nav.is-float .nav__cta,.nav.is-float.is-light .nav__cta{
  background:#fff;color:var(--graphite);border-color:#fff}
.nav.is-float .nav__cta:hover,.nav.is-float.is-light .nav__cta:hover{
  background:#e7ebed;border-color:#e7ebed}
.nav__burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav__burger span{display:block;width:20px;height:1.5px;background:var(--nav-ink);
  transition:transform .3s var(--ease),opacity .2s}
.nav__burger span + span{margin-top:5px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;z-index:1;overflow:hidden;
  background:var(--graphite);
  min-height:calc(100svh - var(--nav-h));
  display:flex;
}
/* Bottom-heavy before, because the grid took every spare pixel and centred
   inside it, parking the strip on the floor. The stack now centres as one
   block, with more room reserved beneath the strip than above the heading, so
   the composition sits optically high rather than low. */
.hero > .wrap{
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:clamp(24px,3.5vh,56px);
  padding-bottom:clamp(44px,6.5vh,88px);
  gap:clamp(40px,5vh,72px);
}
/* The stage column takes the extra width, so the figure grows to the LEFT and
   its right edge — and the gap to it — stays where it was. The heading still
   breaks after "quoted" at this measure. */
.hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;
  min-height:0;padding:0;                   /* sized by content, not by slack */
}
.hero h1{margin-bottom:28px}
/* Two lines, deliberately. The stage column took width for the larger figure,
   so the size is set by what "Precision parts, quoted" can be and still fit the
   remaining measure on one line — 56px here against a 576px column. */
/* A hand-placed <br> only ever held at the one window size it was measured at:
   go narrower and the first half wrapped too, giving three lines. The text
   column is roughly 0.42 of the viewport and this string needs about 10.3
   characters of width per line to split evenly, so tying the size to 3.8vw
   keeps two balanced lines at any width and `balance` does the splitting. */
.hero__h1{max-width:none;font-size:clamp(1.9rem,3.8vw,3.5rem);text-wrap:balance}
.hero__h1 em{font-style:italic;font-variation-settings:"wdth" 96;letter-spacing:-.02em}
.hero__h1 em .build__ch{transition:opacity .14s linear}
.hero__sub{max-width:42ch;margin-bottom:44px;font-size:clamp(1rem,1.25vw,1.16rem)}

/* the part sits in space on a grid that fades out — no frame */
.stage{position:relative}
.stage__field{
  position:relative;aspect-ratio:1/.88;max-width:640px;margin-inline:auto;
  display:grid;place-items:center;
}
/* In the hero the figure is sized from the screen, not from the column, so a
   short window gets a smaller part rather than the stats pushed off the bottom.
   The height has to be a definite length: `min(100%, …)` resolves to auto
   against a parent with no fixed height and is dropped entirely. It stays
   right-aligned, so the gap on that side never moves. */
.hero .stage{display:flex;justify-content:flex-end;width:100%;min-width:0}
.hero .stage__field{
  aspect-ratio:440/330;                 /* the canvas's own shape: no dead band above or below */
  height:clamp(240px,calc(100svh - var(--nav-h) - 320px),480px);
  width:auto;max-width:100%;min-width:0;margin:0;
}
/* A hairline field that brightens where the cursor is. Two identical grids sit
   on top of each other; the upper one is brighter and shows only through a soft
   radial hole that follows the pointer. The hole's position is damped hard in
   JS, so the light moves through the grid like something in a thick fluid
   rather than snapping to the cursor. */
.gridfield{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  --gx:50%;--gy:50%;--glow:0;
}
.gridfield::before,.gridfield::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--grid-ink) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-ink) 1px,transparent 1px);
  background-size:var(--grid-step,42px) var(--grid-step,42px);
}
.gridfield::before{-webkit-mask-image:var(--grid-fade,none);mask-image:var(--grid-fade,none)}
.gridfield::after{
  --grid-ink:var(--grid-ink-hot);
  opacity:var(--glow);
  -webkit-mask-image:radial-gradient(circle var(--grid-reach,460px) at var(--gx) var(--gy),
    #000 0%,rgba(0,0,0,.52) 26%,rgba(0,0,0,.16) 56%,transparent 88%);
          mask-image:radial-gradient(circle var(--grid-reach,460px) at var(--gx) var(--gy),
    #000 0%,rgba(0,0,0,.52) 26%,rgba(0,0,0,.16) 56%,transparent 88%);
}
.stage__field{
  --grid-ink:rgba(143,179,196,.10);--grid-ink-hot:rgba(176,210,230,.19);
  --grid-fade:radial-gradient(circle at 50% 50%,#000 28%,transparent 72%);
}
/* nothing at rest: the footer grid exists only where the cursor is */
.foot .gridfield{
  --grid-ink:transparent;--grid-ink-hot:rgba(176,210,230,.17);
  --grid-step:52px;--grid-reach:520px;
  --grid-fade:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.gridfield::after{display:none}}
.stage__spec{position:relative;width:100%;aspect-ratio:440/330}
.part3d{position:absolute;inset:0}
.part3d canvas{width:100%!important;height:100%!important}
.part-fallback{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 54%,transparent 76%);
          mask-image:radial-gradient(circle at 50% 50%,#000 54%,transparent 76%);
}
.part3d.is-live .part-fallback{display:none}
.dim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;
  transition:opacity .8s var(--ease) .4s}
.dim.is-placed{opacity:1}
.dim line,.dim path{stroke:var(--ice);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;opacity:.75}
.dim .lead-line{stroke-dasharray:3 4;opacity:.42}
.dim text{font-family:var(--ff-mono);font-size:10.5px;fill:var(--ice);letter-spacing:.07em;opacity:.9}
.dim .tol{fill:var(--ice);opacity:.55}

/* caption under the stage, no box */

/* --- Spec strip: columns of air, one hairline above -------------------- */
.specstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--hair-dark);
}
.specstrip dt{
  font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:14px;
}
.specstrip dd{
  font-family:var(--ff-display);font-variation-settings:"wdth" 104;
  font-weight:450;font-size:clamp(1.5rem,2.1vw,1.95rem);line-height:1.05;letter-spacing:-.025em;
}
.specstrip dd small{display:block;font-family:var(--ff-mono);font-size:var(--fs-small);font-weight:400;
  letter-spacing:0;color:var(--on-dark-3);margin-top:10px;line-height:1.55;text-wrap:pretty}

/* --- Full-bleed image: the connective tissue ---------------------------- */
/* The banner pins at the top of the viewport and the next section scrolls up
   over it, so the footage reads as a reveal instead of costing its own screen. */
.bleed{
  position:sticky;top:0;z-index:0;
  height:100vh;height:100svh;min-height:520px;
  overflow:hidden;background:var(--graphite);
}
.bleed__media{position:relative;height:100%;overflow:hidden}
.bleed.is-covered .bleed__media{visibility:hidden}
.bleed__media img,.bleed__media video{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
}
.bleed__media video{opacity:0;transition:opacity 1s var(--ease)}
.bleed__media.is-playing video{opacity:1}
.bleed__media.is-playing img{opacity:0;transition:opacity 1s var(--ease)}
.bleed__veil{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(13,15,16,.82) 0%,rgba(13,15,16,.45) 42%,rgba(13,15,16,.05) 72%),
    linear-gradient(180deg,rgba(13,15,16,.5) 0%,rgba(13,15,16,.1) 40%,rgba(13,15,16,.55) 100%)}
.bleed__caption{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
}
.bleed__caption p{
  font-family:var(--ff-display);font-variation-settings:"wdth" 104;font-weight:450;
  font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.03em;
  max-width:18ch;color:var(--on-dark);text-wrap:balance;
}
.bleed__caption > .wrap > span{
  display:block;font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:16px;
}

/* Caption assembles as the banner arrives: line by line, letters in random order. */
.build__ch{opacity:0;transition:opacity .18s linear}
.build__ch.is-on{opacity:1}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Capability accordion: image left, panels right --------------------- */
/* Both columns pin for one viewport per panel; the wrapper is (N+1) screens tall,
   so scrolling through it drives which panel is open and how far its rule has run. */
.accsplit{
  display:grid;grid-template-columns:46fr 54fr;
  gap:clamp(32px,4.5vw,76px);align-items:start;
  height:calc(var(--acc-panels, 3) * 72vh + 100vh);
  height:calc(var(--acc-panels, 3) * 72svh + 100svh);
}
.accsplit__media{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#e2e6e8;
}
.accsplit__body{position:sticky;top:0}
.accsplit__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity .8s var(--ease),transform 1.4s var(--ease-soft);
}
.accsplit__img.is-on{opacity:1;transform:scale(var(--acc-zoom,1))}
.accsplit__body{
  padding-right:max(28px,calc((100vw - 1280px) / 2));
  height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;

}
.accsplit__head{margin-bottom:clamp(30px,6vh,74px)}   /* the heading needs air before the list */
.accsplit__head .eyebrow{margin-bottom:clamp(10px,1.4vh,18px)}
.accsplit__head .display-2{font-size:clamp(1.45rem,3.6vh,2.3rem)}
.accsplit__foot{display:flex;margin-top:clamp(18px,2.8vh,38px)}
@media (max-height:780px){ .accsplit__foot{display:none} }

.acc{border-top:1px solid var(--hair-film)}
.acc__item{position:relative;border-bottom:1px solid var(--hair-film)}
/* The rule above the open panel doubles as its timer. */
/* Scroll indicator: fills across the active panel as you scroll through its screen. */
.acc__bar{
  position:absolute;top:-1px;left:0;width:0;height:2px;
  background:var(--on-film);pointer-events:none;
}
.acc__sum{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  padding:clamp(18px,3.6vh,52px) 0;cursor:pointer;list-style:none;
}
.acc__no{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.16em;color:var(--on-film-3)}
.acc__title{
  font-family:var(--ff-display);font-variation-settings:"wdth" 104;font-weight:450;
  font-size:clamp(1.2rem,3.1vh,2.05rem);line-height:1.08;letter-spacing:-.03em;
  color:var(--on-film-3);transition:color .4s var(--ease);text-wrap:balance;
}
.acc__item[open] .acc__title,.acc__sum:hover .acc__title{color:var(--on-film)}
.acc__sign{position:relative;width:16px;height:16px;flex:none}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:var(--on-film-2);transition:transform .4s var(--ease);
}
.acc__sign::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.acc__sign::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.acc__item[open] .acc__sign::after{transform:scaleY(0)}
.acc__panel{overflow:hidden}
.acc__body{padding:2px 0 clamp(18px,3vh,44px)}
.acc__body > p{color:var(--on-film-2);max-width:none;margin-bottom:clamp(16px,2.6vh,34px);font-size:clamp(.92rem,1.6vh,1rem)}
/* Specs sit in tinted blocks, not ruled rows — the rules were stacking up under
   the accordion's own dividers, and a full-width row left a void in the middle. */
.acc__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.4vh,14px)}
.acc__specs > div{
  background:#e6eaec;border-radius:2px;
  padding:clamp(13px,2vh,21px) clamp(14px,1.5vw,19px);
}
.acc__specs dt{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.17em;
  text-transform:uppercase;color:var(--on-film-3)}
.acc__specs dd{font-family:var(--ff-mono);font-size:clamp(var(--fs-small),1.5vh,.95rem);
  color:var(--on-film);margin-top:6px;line-height:1.4}


/* Gold carries the real texture rather than a flat swatch, and it is reserved
   for the mark itself and for things reacting to the cursor (the nav underline,
   the gridbox pins). Static labels stay neutral: a tag sitting exactly where
   every other eyebrow sits should look like every other eyebrow. The solid
   colour stays as the painted value in case background-clip:text is missing,
   and a 1px hairline cannot show grain, so hairlines keep solid gold. */
.gold-ink{color:var(--amber)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-ink{
    background-image:var(--gold-img);background-size:240px auto;background-position:center;
    -webkit-background-clip:text;background-clip:text;
    /* text-fill-color, not color: a band's generic colour rule outranks `color`
       here and would paint flat grey straight over the texture */
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
.gold-fill{background-image:var(--gold-img);background-size:180px auto;background-position:center}


/* Light bands re-point the accent token rather than overriding each use of it,
   so a blue that passes on graphite does not get reused on white. */
.band--film,.rfq,.band--film *{--blueprint:var(--blueprint-ink);--flag:var(--flag-ink)}

/* --- RFQ: the shop on the left, the form on the right --------------------- */
/* A centred form on an empty field reads like a contact page; set beside a
   photograph of the work it is asking about, it reads like a quote request.
   True halves, edge to edge — the section drops the usual page gutter so the
   photograph can reach the left edge of the window. */
.rfqband{padding:0}
.rfqsplit{display:grid;grid-template-columns:1fr 1fr}

/* The photograph fills its half outright rather than sticking. A sticky element
   can only hold for the difference between its own height and its container's,
   so any overshoot in the form column showed up as the image drifting a little
   before it caught — worse than it simply filling the column. */
/* The photo must contribute NOTHING to the row's height. In flow, an <img>
   with height:100% against an indefinite row falls back to its intrinsic
   size, so a 900×1350 image in a 720px column made the row 1080px tall at
   every window shorter than that — the section read as 1.2 screens on a
   900px window. Absolutely positioned, it has no intrinsic contribution;
   the row is sized by the form, the figure fills whatever that is, and
   object-fit:cover crops the photo to it. */
.rfqsplit__media{position:relative;min-height:100svh}
.rfqsplit__shot{position:absolute;inset:0;margin:0;overflow:hidden}
.rfqsplit__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* The form column sets its own gutters, since the section has none. It is
   allowed to run past one screen — squeezing a twelve-field form into 100vh is
   what makes a form feel cramped — and the photograph stays pinned beside it. */
.rfqsplit__panel{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(44px,6.5vh,76px);
  padding:clamp(30px,4vh,52px) clamp(32px,4vw,68px);
  min-width:0;
}
.rfqsplit__head{max-width:46ch}
.rfqsplit__head .eyebrow{display:block;margin-bottom:20px}
.rfqsplit__head h2{margin-bottom:8px}
.rfqsplit__head .lead{margin:0;max-width:42ch}

/* room to breathe inside the title block itself */
.rfqband .rfq .field{padding:13px 22px}
.rfqband .rfq__foot{padding:17px 22px}
.rfqband .field textarea{min-height:64px}

@media (max-width:980px){
  .rfqsplit{grid-template-columns:1fr}
  .rfqsplit__media{height:clamp(240px,42vh,360px);min-height:0}
  .rfqsplit__shot{position:absolute;inset:0;height:auto;min-height:0}
  .rfqsplit__panel{min-height:0;padding:clamp(48px,7vw,72px) 0;gap:32px;
    width:min(100% - 34px,1280px);margin-inline:auto}
}

/* --- a section that owns the screen -------------------------------------- */
.band--full{
  min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(56px,7vh,88px);
}
.band--full > .wrap{width:min(1280px,100% - 56px)}
/* Industries + parts is more than one screen of content; rather than centre it
   in a box it overflows, it flows from the top with equal padding each end. */
.band--tall{align-items:flex-start;padding-block:clamp(72px,9vh,112px)}

@media (max-width:980px){
  .band--full{min-height:0;display:block}
}

/* --- Industries: columns, no cards -------------------------------------- */
.ind p.ind__tag{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:18px}
.band--film .ind p.ind__tag{color:var(--on-film-3)}
.ind h3{margin-bottom:14px}
.ind p{color:var(--on-dark-2);font-size:.97rem;margin-bottom:22px}
.ind__list li{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--on-dark-3);line-height:2.1}

/* --- Parts: bigger, no frames ------------------------------------------- */
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.part figure,.part{margin:0}
/* each part floats on its own patch of the same grid, lit by the cursor like
   the hero stage and the footer */
.part__frame{position:relative;display:block;aspect-ratio:1/.84;
  --grid-ink:rgba(143,179,196,.07);--grid-ink-hot:rgba(176,210,230,.30);
  --grid-step:34px;--grid-reach:230px;
  --grid-fade:radial-gradient(circle at 50% 50%,#000 26%,transparent 78%)}
.band--film .part__frame{--grid-ink:rgba(21,24,26,.07);--grid-ink-hot:rgba(21,24,26,.20)}
.part img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  transition:transform .6s var(--ease-soft)}
.part:hover img{transform:scale(1.04)}
.part dt{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--on-dark-3);margin-top:16px}
.part dd{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--on-dark-2);margin-top:5px}
.part figcaption{margin-top:14px}
/* the parts grid also runs on light bands, where the dark-band ink is unreadable */
.band--film .part dt{color:var(--on-film-3)}
.band--film .part dd{color:var(--on-film-2)}

/* --- Process: a line, not boxes ------------------------------------------ */
.op__no{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.18em;
  color:var(--blueprint);margin-bottom:14px}
.op h3{font-family:var(--ff-display);font-variation-settings:"wdth" 104;font-weight:500;
  font-size:1.08rem;letter-spacing:-.012em;margin-bottom:9px;text-wrap:balance}
.op p{font-size:.94rem;color:var(--on-film-2)}

/* --- Checklist & stats --------------------------------------------------- */
.checklist li{display:flex;gap:14px;padding:15px 0;font-size:.97rem;
  border-bottom:1px solid var(--hair-dark)}
.band--film .checklist li{border-bottom-color:var(--hair-film)}
.checklist li:first-child{border-top:1px solid var(--hair-dark)}
.band--film .checklist li:first-child{border-top-color:var(--hair-film)}
.checklist svg{width:14px;height:14px;flex:none;margin-top:6px;stroke:var(--amber);fill:none;stroke-width:1.7}
.checklist strong{font-weight:600}
.checklist span{color:var(--on-dark-2)}
.band--film .checklist span{color:var(--on-film-2)}

.statgrid{margin-top:clamp(40px,5vw,72px)}
.statgrid dt{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:12px}
.band--film .statgrid dt{color:var(--on-film-3)}
.statgrid dd{font-family:var(--ff-display);font-variation-settings:"wdth" 104;font-weight:450;
  font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.03em}

.qgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--gap);align-items:start}
.qgrid__pin{position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:980px){.qgrid__pin{position:static}}

/* --- RFQ ----------------------------------------------------------------- */
/* No fill: a white panel on the film band was a box inside a box. What is left
   is the cell grid itself, closed on all four sides and anchored at every
   corner — the same treatment as .gridbox, so the form belongs to the system
   rather than being a shape of its own. */
.rfq{position:relative;background:transparent;border-top:1px solid var(--hair-film);
  border-left:1px solid var(--hair-film)}
.rfq__fields{display:grid;grid-template-columns:repeat(2,1fr)}
.field{padding:18px 30px;display:flex;flex-direction:column;
  border-bottom:1px solid var(--hair-film);border-right:1px solid var(--hair-film)}
.field--full{grid-column:1/-1}
.field label{font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-film-3);margin-bottom:9px}
.field label .req{color:var(--flag)}
.field input,.field select,.field textarea{
  border:0;background:transparent;padding:5px 0;font-size:.97rem;color:var(--on-film);
  border-bottom:1px solid transparent;width:100%;transition:border-color .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-film-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold-deep)}
.field textarea{resize:vertical;min-height:80px;font-family:inherit}
.field__file{display:flex;align-items:center;gap:13px;border:1px dashed var(--hair-film);
  border-radius:2px;padding:15px 17px;cursor:pointer;transition:border-color .25s,background .25s}
.field__file:hover{border-color:var(--gold-deep);background:#fbfcfc}
.field__file svg{width:17px;height:17px;stroke:var(--on-film-2);fill:none;stroke-width:1.5;flex:none}
.field__file span{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--on-film-2)}
.field__file input{display:none}
.rfq__foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  justify-content:space-between;padding:24px 30px;
  border-right:1px solid var(--hair-film);border-bottom:1px solid var(--hair-film)}
.rfq__foot p{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--on-film-3);max-width:34ch;line-height:1.7}
.rfq__status{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--blueprint);min-height:1.2em}

/* --- Contact rail -------------------------------------------------------- */
.rail > div{padding:22px 0;border-bottom:1px solid var(--hair-dark)}
.rail > div:first-child{border-top:1px solid var(--hair-dark)}
.rail dt{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:10px}
.rail dd{font-size:.96rem;line-height:1.65;color:var(--on-dark-2)}
.rail dd a{color:var(--on-dark);transition:color .2s}
.rail dd a:hover{color:var(--amber-hi)}
.band--film .rail > div{border-bottom-color:var(--hair-film)}
.band--film .rail > div:first-child{border-top-color:var(--hair-film)}
.band--film .rail dt{color:var(--on-film-3)}
.band--film .rail dd{color:var(--on-film-2)}
.band--film .rail dd a{color:var(--on-film)}
.band--film .rail dd a:hover{color:var(--gold-deep)}
.rail a{color:var(--on-dark)}
.rail a:hover{color:var(--on-dark)}

/* --- Footer -------------------------------------------------------------- */
.foot{position:relative;z-index:1;background:var(--graphite-2);padding-top:clamp(64px,7vw,104px);
  padding-bottom:clamp(20px,3vh,36px)}
.foot > .wrap{position:relative;z-index:1}
.foot__main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--gap);
  padding-bottom:clamp(48px,5.5vw,76px)}
.foot h4{font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:20px}
.foot li + li{margin-top:11px}
.foot li a,.foot address{font-size:.93rem;font-style:normal;color:var(--on-dark-2);line-height:1.75}
.foot li a{transition:color .2s}
.foot li a:hover{color:var(--on-dark)}
.foot__block{display:flex;flex-wrap:wrap;gap:12px 40px;padding:22px 0 26px;
  border-top:1px solid var(--hair-dark)}
.foot__block div{display:flex;gap:9px;align-items:baseline}
.foot__block dt{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3)}
.foot__block dd{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--on-dark-2)}

/* --- Page head (inner pages) --------------------------------------------- */
.pagehead{
  position:relative;z-index:1;
  padding:clamp(72px,8vw,124px) 0 clamp(52px,6vw,88px);
  background:var(--graphite);
}
.pagehead h1{margin:24px 0 24px}
.crumb{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:26px}
.crumb a:hover{color:var(--on-dark)}

/* --- Data tables: hairlines only ----------------------------------------- */
.dtable caption{text-align:left;font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-film-3);
  padding-bottom:16px;border-bottom:1px solid var(--hair-film)}
.dtable th,.dtable td{font-family:var(--ff-mono);font-size:var(--fs-small);padding:14px 0;text-align:left;
  border-bottom:1px solid var(--hair-film);vertical-align:top}
.dtable thead th{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--on-film-3);font-weight:500}
.dtable tbody th{font-weight:400;color:var(--on-film-2);width:50%;padding-right:20px}
.dtable tbody td{color:var(--on-film)}
.band--dark .dtable caption,.band--dark-2 .dtable caption{color:var(--on-dark-3);border-bottom-color:var(--hair-dark)}
.band--dark .dtable th,.band--dark .dtable td,
.band--dark-2 .dtable th,.band--dark-2 .dtable td{border-bottom-color:var(--hair-dark)}
.band--dark .dtable tbody th,.band--dark-2 .dtable tbody th{color:var(--on-dark-3)}
.band--dark .dtable tbody td,.band--dark-2 .dtable tbody td{color:var(--on-dark)}
.tablewrap{overflow-x:auto}

/* --- Inner-page pieces --------------------------------------------------- */
.proc{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--gap);align-items:start}
.proc + .proc{margin-top:var(--band);padding-top:var(--band);border-top:1px solid var(--hair-film)}
.band--dark .proc + .proc,.band--dark-2 .proc + .proc{border-top-color:var(--hair-dark)}
.proc__head > * + *{margin-top:16px}

.notelist li{display:flex;gap:16px;padding:17px 0;font-size:.97rem;
  border-bottom:1px solid var(--hair-film)}
.band--dark .notelist li,.band--dark-2 .notelist li{border-bottom-color:var(--hair-dark)}
.notelist li::before{content:attr(data-n);font-family:var(--ff-mono);font-size:var(--fs-label);
  color:var(--blueprint);flex:none;padding-top:5px;letter-spacing:.1em}

.cert__state{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:16px}
.cert__state--gap{background:none;color:var(--flag);-webkit-text-fill-color:var(--flag)}
.cert h3{font-family:var(--ff-display);font-variation-settings:"wdth" 104;font-weight:500;
  font-size:1.2rem;margin-bottom:11px;text-wrap:balance}
.cert p{font-size:.93rem;color:var(--on-dark-2)}
.band--film .cert__state{color:var(--on-film-3)}
.band--film .cert__state--gap{color:var(--flag);-webkit-text-fill-color:var(--flag)}
.band--film .cert p{color:var(--on-film-2)}

.mapbox{position:relative;aspect-ratio:16/7;background:var(--graphite-2);border-radius:3px;
  display:grid;place-items:center;text-align:center;padding:28px}
.mapbox p{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--on-dark-3);line-height:1.9}
.mapbox strong{display:block;color:var(--on-dark-2);letter-spacing:.16em;text-transform:uppercase;
  font-size:var(--fs-label);margin-bottom:10px}
.photoslot{margin-top:clamp(40px,5vw,72px)}
/* People cards hold a 4:5 frame for the portrait the client has yet to send. */
.person__photo{aspect-ratio:4/5;margin:0 0 24px;background:var(--graphite-3);display:grid;place-items:center;
  border:1px solid var(--hair-dark)}
.person__photo span{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}
.band--film .person__photo{background:#e2e6e8;border-color:var(--hair-film)}
.band--film .person__photo span{color:var(--on-film-3)}
.band--film .mapbox{background:#e2e6e8}
.band--film .mapbox p{color:var(--on-film-3)}
.band--film .mapbox strong{color:var(--on-film-2)}

.cta{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}

/* --- Inner-page head with media ----------------------------------------- */
/* The inner pages open the way the homepage does: text on the left column,
   a photograph on the right running to the window edge, a little over half a
   screen tall. The plain text pagehead stays for pages that have no media. */
.pagehead--media{
  padding:0;min-height:min(72svh,760px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;overflow:hidden;
}
.pagehead--media .pagehead__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,8vh,110px) clamp(32px,4vw,72px) clamp(56px,8vh,110px) max(28px,calc((100vw - 1280px)/2));
  min-width:0;
}
.pagehead--media .pagehead__text h1{margin:22px 0 22px}
.pagehead--media .pagehead__text .lead{max-width:44ch}
.pagehead__shot{position:relative;margin:0;min-height:320px}
.pagehead__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* a quiet gradient keeps the text column's edge from fighting a bright photo */
.pagehead__shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--graphite) 0%,rgba(13,15,16,0) 22%);pointer-events:none}
@media (max-width:980px){
  .pagehead--media{grid-template-columns:1fr;min-height:0}
  .pagehead--media .pagehead__text{padding:clamp(44px,7vw,72px) 28px}
  .pagehead__shot{min-height:0;height:clamp(240px,42vh,380px)}
  .pagehead__shot::after{background:linear-gradient(to bottom,var(--graphite) 0%,rgba(13,15,16,0) 30%)}
}

/* --- Operation icons: thin line, hollow, drawn on a 24-unit grid ---------- */
.op__icon{display:block;width:30px;height:30px;margin-bottom:20px;
  fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--on-film-3);transition:color .3s var(--ease)}
.gridbox__cell:hover .op__icon{color:var(--on-film)}
.band--dark .op__icon,.band--dark-2 .op__icon{color:var(--on-dark-3)}
.band--dark .gridbox__cell:hover .op__icon,.band--dark-2 .gridbox__cell:hover .op__icon{color:var(--on-dark)}
.band--dark .op p,.band--dark-2 .op p{color:var(--on-dark-2)}
.band--dark .op p.op__no,.band--dark-2 .op p.op__no{color:var(--on-dark-3)}

/* --- Video page heads reuse the banner loader --------------------------- */
.pagehead__shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1s var(--ease)}
.pagehead__shot.is-playing video{opacity:1}
.pagehead__shot.is-playing img{opacity:0;transition:opacity 1s var(--ease)}
.pagehead h1.display-1{font-size:clamp(2.2rem,4.2vw,3.6rem)}

/* --- Sector: photograph, then the head and its table ---------------------- */
.sector{display:grid;grid-template-columns:.72fr 1.28fr;gap:var(--gap);align-items:start}
.sector + .sector{margin-top:var(--band);padding-top:var(--band);border-top:1px solid var(--hair-film)}
.sector__shot{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:#dfe4e7}
.sector__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.sector:hover .sector__shot img{transform:scale(1.03)}
.sector__body > * + *{margin-top:clamp(26px,3vw,40px)}
.sector__head .eyebrow + .display-2{margin-top:18px}
.sector__head .mute{margin-top:16px;max-width:52ch}
@media (max-width:980px){
  .sector{grid-template-columns:1fr}
  .sector__shot{aspect-ratio:3/2;max-height:420px}
}

/* --- Photographic page head: full-bleed image, title low-left, lead low-right --- */
.pagehead--bleed{padding:0;min-height:min(78svh,820px);display:flex;align-items:flex-end;overflow:hidden}
.pagehead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.pagehead__veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,15,16,.55) 0%,rgba(13,15,16,.15) 35%,rgba(13,15,16,.78) 100%),
    linear-gradient(90deg,rgba(13,15,16,.55) 0%,rgba(13,15,16,.1) 60%)}
.pagehead__over{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap);
  align-items:end;padding:clamp(56px,8vh,110px) 0 clamp(48px,6vh,80px)}
.pagehead--bleed h1{margin:22px 0 0}
.pagehead__aside{display:flex;flex-direction:column;gap:26px;padding-bottom:6px}
.pagehead__aside .lead{max-width:40ch}
@media (max-width:980px){
  .pagehead__over{grid-template-columns:1fr;padding-top:clamp(120px,24vh,220px)}
  .pagehead__aside{padding-bottom:0}
}

/* --- Contact: details on the left, the form on the right ------------------- */
.contactsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:var(--gap);align-items:start}
.contactsplit__side{position:sticky;top:calc(var(--nav-h) + 24px)}
.contactsplit__side .eyebrow + .display-2{margin-top:18px}
.contactsplit__side .rail{margin-top:clamp(28px,3.4vw,44px)}
.contactsplit__head{margin-bottom:clamp(26px,3vw,40px)}
.contactsplit__head .eyebrow + .display-3{margin-top:16px;max-width:30ch}
.contactsplit__head .mute{margin-top:12px;max-width:52ch}
@media (max-width:980px){
  .contactsplit{grid-template-columns:1fr}
  .contactsplit__side{position:static}
}

/* --- Placeholder flagging ------------------------------------------------ */
.ph{}  /* invisible by default — the toggle is the only thing that reveals them */
body.show-ph .ph{background:rgba(200,83,59,.15);box-shadow:0 0 0 1px rgba(200,83,59,.5);
  border-radius:2px;border-bottom:0}
body.show-ph text.ph{fill:var(--flag);background:none;box-shadow:none}
.phtoggle{
  position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  background:rgba(19,22,23,.9);backdrop-filter:blur(10px);
  border:1px solid var(--hair-dark);color:var(--on-dark-2);
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 15px;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:border-color .25s,color .25s;
}
.phtoggle:hover{border-color:var(--flag)}
.phtoggle__dot{width:7px;height:7px;border-radius:50%;background:var(--on-dark-3);transition:background .25s}
body.show-ph .phtoggle{border-color:var(--flag);color:#edb5a8}
body.show-ph .phtoggle__dot{background:var(--flag)}

/* --- Reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:48px;min-height:0;align-items:start}
  .stage__field{max-width:460px}
  /* once the columns stack there is no spare height to size against, so the
     figure goes back to being driven by width */
  .hero .stage{justify-content:center}
  .hero .stage__field{height:auto;width:100%;max-width:460px;margin-inline:auto}
  .specstrip{grid-template-columns:1fr 1fr;gap:40px}
  .parts{grid-template-columns:repeat(2,1fr)}
  .foot__main{grid-template-columns:1fr 1fr}
  .acc__body{grid-template-columns:1fr}
  .qgrid,.proc{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* the bar is sized for the lockup, but 96px is a lot of a phone screen */
  :root{--nav-h:92px}
  .nav .logomark{height:32px}
  .wrap,.wrap--tight{width:min(100% - 34px,1280px)}
  .nav__links{display:none}
  .nav__links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--graphite-2);padding:6px 20px 20px;
    box-shadow:0 18px 44px rgba(0,0,0,.42)}
  .nav__links.open a{padding:14px 0;border-bottom:1px solid var(--hair-dark)}
  .nav__burger{display:block}
  .nav__cta{display:none}
  .nav__inner{width:min(100% - 20px,1280px);padding:12px 16px}

  .statgrid,.rfq__fields,.foot__main{grid-template-columns:1fr}
  .field:nth-child(odd){border-right:0}
  .sechead{grid-template-columns:1fr;gap:26px}
  .stage__meta{gap:0 26px}
  .acc__sum{grid-template-columns:auto 1fr auto;gap:16px}
  .phtoggle{right:12px;bottom:12px;font-size:.6rem;padding:9px 12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .dim{opacity:1}
}

@media (max-width:1080px){
  .accsplit{grid-template-columns:1fr;gap:34px;height:auto}
  .accsplit__body{position:static;height:auto}
  .acc__bar{display:none}
  .accsplit__media{position:relative;top:auto;height:auto;aspect-ratio:16/9}
  .accsplit__body{padding-right:0;padding-left:max(28px,(100vw - 1280px) / 2);min-height:0;display:block}
}
@media (max-width:760px){
  .acc__specs{grid-template-columns:1fr}
  .acc__sum{grid-template-columns:auto 1fr auto;gap:14px}
  .gridbox__cell::before,.gridbox__cell::after,
  .gridbox__pins::before,.gridbox__pins::after{width:5px;height:5px}
}

/* --- Grid box: hairline cells with a solid pin at every intersection, the way
       a drawing terminates its rules. One component, used everywhere. -------- */
.gridbox{
  display:grid;
  border-top:1px solid var(--hair-dark);
  border-left:1px solid var(--hair-dark);
}
.band--film .gridbox{border-top-color:var(--hair-film);border-left-color:var(--hair-film)}
.gridbox--3{grid-template-columns:repeat(3,1fr)}
.gridbox--2{grid-template-columns:repeat(2,1fr)}
.gridbox--4{grid-template-columns:repeat(4,1fr)}

.gridbox__cell{
  position:relative;
  padding:clamp(24px,2.6vw,38px);
  border-right:1px solid var(--hair-dark);
  border-bottom:1px solid var(--hair-dark);
}
.band--film .gridbox__cell{border-right-color:var(--hair-film);border-bottom-color:var(--hair-film)}

/* four pins per cell; neighbours overlap exactly, so every crossing is covered */
.gridbox__cell::before,.gridbox__cell::after,
.gridbox__pins::before,.gridbox__pins::after{
  content:"";position:absolute;width:6px;height:6px;
  background:var(--on-dark-2);transition:background .35s var(--ease);
}
.band--film .gridbox__cell::before,.band--film .gridbox__cell::after,
.band--film .gridbox__pins::before,.band--film .gridbox__pins::after{background:var(--on-film-2)}
.gridbox__cell::before{top:-3px;left:-3px}
.gridbox__cell::after{top:-3px;right:-3px}
.gridbox__pins{
  position:absolute;inset:-1px;pointer-events:none;
  border:1px solid transparent;transition:border-color .35s var(--ease);
}
.gridbox__pins::before{bottom:-2px;left:-2px}
.gridbox__pins::after{bottom:-2px;right:-2px}
/* the cell owns only two of its four hairlines, so the overlay draws all four */
/* the hairlines lift to ink on hover; the pins alone carry the gold */
.gridbox__cell:hover .gridbox__pins{border-color:var(--on-dark-2)}
/* on film the lift is proportionate — a 30% ink, not the near-black of the copy */
.band--film .gridbox__cell:hover .gridbox__pins{border-color:rgba(21,24,26,.3)}

.gridbox__cell:hover::before,.gridbox__cell:hover::after,
.gridbox__cell:hover .gridbox__pins::before,.gridbox__cell:hover .gridbox__pins::after{
  background:var(--gold-img) center/120px auto,var(--amber);
}
/* The texture only works on dark: its 150–252 luminance is a pale smudge on film.
   There the pins take the solid deep gold, the same value the form focus uses. */
.band--film .gridbox__cell:hover::before,.band--film .gridbox__cell:hover::after,
.band--film .gridbox__cell:hover .gridbox__pins::before,.band--film .gridbox__cell:hover .gridbox__pins::after{
  background:var(--gold-deep);
}

@media (max-width:1080px){ .gridbox--3,.gridbox--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .gridbox--3,.gridbox--2,.gridbox--4{grid-template-columns:1fr} }