/* ============================================================================
   DATUM — The Precision Instrument
   ACE International Consulting Engineers · v3
   100% self-hosted. No external requests. No CDN. No remote fonts or images.
   ========================================================================= */

/* ---------- self-hosted typefaces ---------- */
@import url("fonts/google/oswald.css");
@import url("fonts/google/inter-tight.css");
@import url("fonts/google/ibm-plex-mono.css");

/* ============================== TOKENS ================================== */
:root{
  /* surfaces */
  --ink-0:#020F2B;        /* Abyss Navy   — primary dark surface        */
  --ink-1:#001E4C;        /* Charter Navy — brand navy, raised panels   */
  --vellum:#FFFFFF;       /* White sheet — primary light surface        */
  --vellum-2:#F3F4F6;     /* Sheet Edge   — cards, title-block cells    */

  /* brand + instrument */
  --teal-500:#267F85;     /* ACE Teal     — buttons, active fills       */
  --teal-300:#3FC1CB;     /* Optic Teal   — live readouts on dark only  */
  --datum-red:#C8401F;    /* Benchmark Red — RATIONED, max ~1% viewport */
  --cyanotype:#0A2A52;    /* blueprint duotone shadow                   */

  /* lines + secondary text */
  --line-dark:#8FA0BF;    /* hairlines/mono on dark                     */
  --line-light:#9AA1AA;   /* hairlines on white (neutral, not warm)     */
  --ink-mute:#555D68;     /* body-secondary on white                    */

  /* alpha rules — hairlines are the whole design, keep them exact */
  --rule-dark:rgba(143,160,191,.24);
  --rule-dark-2:rgba(143,160,191,.42);
  --rule-light:rgba(154,161,170,.34);
  --rule-light-2:rgba(154,161,170,.62);

  /* type families
     display : Oswald — heavy condensed industrial grotesque, chosen to match
               the ACE logo lettering (squared terminals, tight condensed caps,
               engineering-signage weight). Nameplate + section H2s.
     sans    : Inter Tight — refined neutral. Body copy, H3s, UI.
     mono    : IBM Plex Mono — the instrument voice: every readout and label. */
  --ff-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --ff-body:"Inter Tight",system-ui,-apple-system,Segoe UI,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  /* type scale — a condensed face fits far more per line, so the nameplate
     can run larger than the serif did without breaking the grid. */
  --fs-nameplate:clamp(2.5rem,.9rem + 5.4vw,6.2rem);
  --fs-h2:clamp(2rem,1.35rem + 2.8vw,4.25rem);
  --fs-h3:clamp(1.375rem,1.2rem + .9vw,2rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --fs-data:clamp(.6875rem,.66rem + .15vw,.8125rem);
  --fs-micro:.625rem;

  --lh-nameplate:.98; --lh-display:1.1; --lh-body:1.65; --lh-data:1.5;

  /* grid */
  --maxw:1440px;
  --margin:clamp(20px,4vw,96px);
  --gutter:clamp(16px,1.5vw,24px);
  --rail:56px;                      /* chainage rail width (desktop)    */

  /* button pair — kept explicit so neither theme can break its contrast */
  --btn-bg:var(--teal-500);
  --btn-fg:#ffffff;
  --btn-bg-hover:var(--teal-300);
  --btn-fg-hover:var(--ink-0);

  /* ambient backlight — large soft ellipses, the instrument's glow.
     Same technique as remarketly.io: oversized radial, accent, transparent. */
  --glow-1:rgba(63,193,203,.13);
  --glow-2:rgba(38,127,133,.10);
  --glow-3:rgba(200,64,31,.05);

  /* motion */
  --e-reveal:cubic-bezier(.16,1,.3,1);      /* expo.out    */
  --e-machine:cubic-bezier(.65,0,.35,1);    /* power2.inOut*/
  --d-micro:.22s; --d-std:.6s; --d-major:1s;

  color-scheme:dark;
}

/* ==========================================================================
   LIGHT THEME
   Light the whole way down — white, not an inversion. The band rhythm is kept
   by tinting (white against a faint cool grey) rather than by flipping to
   navy, so the hairline + mono layer does the structural work instead.
   ========================================================================== */
[data-theme="light"]{
  color-scheme:light;

  --ink-0:#FFFFFF;        /* primary band → white                          */
  --vellum:#0E1B2E;       /* TEXT on white. This token also names the alt
                             band, so the band rules are overridden below. */
  --ink-1:#0E1B2E;        /* text on the tinted band                       */
  --vellum-2:#FFFFFF;     /* raised cells                                  */

  --line-dark:#5A6470;    /* mono + hairlines on white                     */
  --line-light:#8A929E;   /* hairlines on the tinted band                  */
  --ink-mute:#5A6470;     /* secondary text                                */

  --rule-dark:rgba(90,100,112,.26);
  --rule-dark-2:rgba(90,100,112,.46);
  --rule-light:rgba(90,100,112,.22);
  --rule-light-2:rgba(90,100,112,.40);

  --teal-300:#1B6E75;     /* accent — darkened to hold AA on white         */
  --teal-500:#1B6E75;
  --datum-red:#A8331A;

  --btn-bg:#1B6E75;
  --btn-fg:#ffffff;
  --btn-bg-hover:#0E1B2E;
  --btn-fg-hover:#FFFFFF;

  --glow-1:rgba(27,110,117,.09);
  --glow-2:rgba(38,127,133,.06);
  --glow-3:rgba(168,51,26,.035);
}
[data-theme="light"] body{background:#FFFFFF;color:#0E1B2E}
[data-theme="light"] .on-ink,
[data-theme="light"] .hero{background-color:#FFFFFF;color:#0E1B2E}
[data-theme="light"] .on-vellum{background:#F6F7F9;color:#0E1B2E}
[data-theme="light"] .on-charter{background:#EDF0F4;color:#0E1B2E}
[data-theme="light"] .strip{background:#FFFFFF}
[data-theme="light"] .strip li b{color:#0E1B2E}
[data-theme="light"] .hero-figure .plate img{filter:none}
[data-theme="light"] .hero-hud{background:rgba(255,255,255,.92)}
[data-theme="light"] .hero-hud div{color:#5A6470}
[data-theme="light"] .titleblock .v,
[data-theme="light"] .station .yr,
[data-theme="light"] .odo{color:#0E1B2E}
[data-theme="light"] .foot-mark text{stroke:#0E1B2E;opacity:.45}
[data-theme="light"] .stamp text,
[data-theme="light"] .stamp .mark{fill:#0E1B2E}
[data-theme="light"] .stamp circle{stroke:rgba(14,27,46,.3)}
[data-theme="light"] .chainage{
  background:linear-gradient(to left,rgba(0,0,0,.03),transparent);
  border-left-color:rgba(90,100,112,.26);
}
[data-theme="light"] .nav.is-stuck{
  background:rgba(255,255,255,.9);border-bottom-color:rgba(90,100,112,.26);
}
[data-theme="light"] .sheet{background:#FFFFFF}
[data-theme="light"] .theatre-map .land{stroke:rgba(90,100,112,.45)}
[data-theme="light"] .bm text{fill:#5A6470}

/* ============================== RESET =================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ink-0);
  color:var(--vellum);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--teal-300);color:var(--ink-0)}

/* focus — visible, instrument-like, never removed */
:focus-visible{
  outline:2px solid var(--teal-300);
  outline-offset:3px;
}
.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;
}
.skip-link{
  position:absolute;top:-100%;left:var(--margin);z-index:999;
  background:var(--teal-300);color:var(--ink-0);
  padding:12px 20px;font-family:var(--ff-mono);font-size:var(--fs-data);
  text-transform:uppercase;letter-spacing:.1em;
}
.skip-link:focus{top:12px}

/* ============================== PRIMITIVES ============================== */
.grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--margin);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
}
.section{position:relative;padding-block:clamp(72px,10vw,160px)}
.on-vellum{background:var(--vellum);color:var(--ink-1)}
.on-ink{background:var(--ink-0);color:var(--vellum)}
.on-charter{background:var(--ink-1);color:var(--vellum)}

/* ---- ambient backlight -------------------------------------------------
   Oversized soft radials layered over the primary surface. Painted on a
   single fixed pseudo-element so it costs one composited layer for the whole
   page rather than one per section, and never repaints on scroll.        */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -8%,  var(--glow-1), transparent 62%),
    radial-gradient(760px 420px at 8% 22%,    var(--glow-2), transparent 68%),
    radial-gradient(620px 380px at 96% 68%,   var(--glow-2), transparent 66%),
    radial-gradient(420px 300px at 78% 8%,    var(--glow-3), transparent 70%);
  transition:background .4s ease;
}
/* every band paints above the glow; the dark bands let it through */
.section,.strip,.sheets-viewport,.hero,footer{position:relative;z-index:1}
.on-ink,.hero{background-color:color-mix(in srgb,var(--ink-0) 88%,transparent)}
.on-vellum,.on-charter{isolation:isolate}

/* mono data label — the voice of the instrument */
.mono{
  font-family:var(--ff-mono);font-size:var(--fs-data);font-weight:400;
  text-transform:uppercase;letter-spacing:.1em;line-height:var(--lh-data);
  font-variant-numeric:tabular-nums;
}
.mono-micro{font-size:var(--fs-micro);letter-spacing:.12em}
.num{font-variant-numeric:tabular-nums}

/* section eyebrow: index + rule + label */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(24px,3vw,48px)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule-dark)}
.on-vellum .eyebrow::after{background:var(--rule-light)}
.eyebrow .idx{color:var(--datum-red)}
.on-vellum .eyebrow .label{color:var(--ink-mute)}
.eyebrow .label{color:var(--line-dark)}

/* headings
   H2 = the elegant register (serif, single weight, opened line-height).
   H3 = the working register (Inter Tight 600) — holds up at small sizes and
        on dark navy where the serif's thin strokes would go weak. */
.h2{
  font-family:var(--ff-display);font-weight:600;
  font-size:var(--fs-h2);line-height:1.08;letter-spacing:.004em;
  max-width:22ch;
}
.h3{
  font-family:var(--ff-body);font-weight:600;
  font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.015em;
}
/* Accent phrase. Oswald ships no italic and a synthesised oblique on a heavy
   condensed face looks broken — so emphasis is carried by colour + weight,
   which is also more at home in a drawing than italics are. */
.it{color:var(--teal-300);font-weight:500}
.on-vellum .it{color:var(--teal-500)}
.lede{
  font-size:var(--fs-body);line-height:var(--lh-body);max-width:62ch;
  color:color-mix(in srgb,currentColor 78%,transparent);
}

/* dimension underline — hairline + perpendicular end ticks + measured value */
.dim{position:relative;white-space:nowrap}
.dim::after{
  content:"";position:absolute;left:0;right:0;bottom:-.18em;height:7px;
  border-bottom:1px solid var(--datum-red);
  border-left:1px solid var(--datum-red);
  border-right:1px solid var(--datum-red);
  opacity:.9;
}
.dim[data-value]::before{
  content:attr(data-value);
  position:absolute;left:50%;transform:translate(-50%,0);bottom:-1.45em;
  font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.12em;
  color:var(--datum-red);background:inherit;padding:0 6px;
}

/* hairline frame with corner registration marks */
.frame{position:relative;border:1px solid var(--rule-dark)}
.on-vellum .frame{border-color:var(--rule-light)}
.frame::before,.frame::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:var(--teal-300);
}
.on-vellum .frame::before,.on-vellum .frame::after{border-color:var(--teal-500)}
.frame::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.frame::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* buttons — toolbar controls, never rounded */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ff-mono);font-size:var(--fs-data);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;
  transition:background var(--d-micro) ease,color var(--d-micro) ease,
             border-color var(--d-micro) ease;
}
.btn-fill{background:var(--btn-bg);color:var(--btn-fg)}
.btn-fill:hover,.btn-fill:focus-visible{background:var(--btn-bg-hover);color:var(--btn-fg-hover)}
.btn-ghost{border-color:var(--rule-dark-2);color:currentColor;position:relative}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--teal-300);color:var(--teal-300)}
.on-vellum .btn-ghost{border-color:var(--rule-light-2)}
.on-vellum .btn-ghost:hover{border-color:var(--teal-500);color:var(--teal-500)}
.btn .arw{transition:transform var(--d-micro) var(--e-machine)}
.btn:hover .arw{transform:translateX(4px)}

/* image plate: LQIP background + fade-in, prevents layout shift */
.plate{position:relative;overflow:hidden;background:var(--cyanotype)}
.plate img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
}
.plate img.is-loaded{opacity:1}
.plate .lqip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(12px);transform:scale(1.06);opacity:1;
  transition:opacity .5s ease;
}
.plate.is-ready .lqip{opacity:0}

/* ============================== 01 · NAV ================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:64px;
  display:flex;align-items:center;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--ink-0) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--rule-dark);
}
.nav .grid{align-items:center}
.nav-logo{grid-column:1/span 3;display:flex;align-items:center}
.nav-logo img{height:34px;width:auto}
.nav-list{grid-column:5/span 6;display:flex;gap:clamp(14px,2vw,30px);justify-content:center}
.nav-list a{display:flex;align-items:baseline;gap:6px;position:relative;padding:6px 0}
.nav-list .i{color:var(--line-dark);font-size:var(--fs-micro);transition:color var(--d-micro)}
.nav-list a:hover .i,.nav-list a:focus-visible .i{color:var(--teal-300)}
.nav-list a::before{
  content:"";position:absolute;left:-10px;top:50%;width:0;height:1px;
  background:var(--teal-300);transition:width var(--d-micro) var(--e-machine);
}
.nav-list a:hover::before,.nav-list a:focus-visible::before{width:6px}
.nav-meta{grid-column:11/span 2;text-align:right;color:var(--line-dark)}
.nav-meta .clock{color:var(--teal-300)}
.nav-burger{display:none;grid-column:12;justify-self:end;background:none;border:0;padding:8px;cursor:pointer}
.nav-burger svg{width:26px;height:14px;stroke:currentColor}

/* mobile sheet */
.sheet{
  position:fixed;inset:0;z-index:99;background:var(--vellum);color:var(--ink-1);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:var(--margin);
  clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--e-machine);
  visibility:hidden;
}
.sheet.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.sheet a{
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;font-size:calc(var(--fs-h3)*1.1);
  display:flex;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule-light);
}
.sheet a .i{font-family:var(--ff-mono);font-size:var(--fs-micro);color:var(--datum-red)}

/* ============================== 02 · HERO =============================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:64px;overflow:hidden}
.hero .grid{width:100%;align-items:center;row-gap:clamp(28px,5vw,56px)}
.hero-copy{grid-column:1/span 6;position:relative;z-index:2}
.hero-kicker{color:var(--teal-300);margin-bottom:22px}
.hero-title{
  font-family:var(--ff-display);font-weight:700;
  font-size:var(--fs-nameplate);line-height:.96;
  letter-spacing:.005em;text-transform:uppercase;margin-bottom:26px;
}
.hero-title .ln{display:block;overflow:hidden;white-space:nowrap}
.hero-title .ln>span{display:block}
.hero-lede{max-width:44ch;margin-bottom:34px;color:color-mix(in srgb,var(--vellum) 74%,transparent)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

.hero-plate{grid-column:7/span 6;position:relative}
.hero-figure{position:relative;aspect-ratio:16/11}
.hero-figure .plate{position:absolute;inset:0}
.hero-figure .plate img{filter:brightness(.8)}
/* faint blueprint grid over the photo */
.hero-figure .netgrid{
  position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:linear-gradient(var(--teal-300) 1px,transparent 1px),
                   linear-gradient(90deg,var(--teal-300) 1px,transparent 1px);
  background-size:40px 40px;
}
/* live theodolite canvas */
.hero-canvas{position:absolute;inset:0;pointer-events:none;z-index:3}
/* dimension callout overlay */
.hero-dims{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.hero-dims line,.hero-dims path{stroke:var(--teal-300);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hero-dims text{font-family:var(--ff-mono);font-size:9px;letter-spacing:.12em;fill:var(--teal-300)}
/* HUD readout — DOM, not canvas, so it is selectable + accessible */
.hero-hud{
  position:absolute;right:0;bottom:0;z-index:5;
  background:color-mix(in srgb,var(--ink-0) 82%,transparent);
  border:1px solid var(--rule-dark);border-right:0;border-bottom:0;
  padding:12px 16px;display:grid;gap:4px;min-width:210px;
}
.hero-hud div{display:flex;justify-content:space-between;gap:18px;color:var(--line-dark)}
.hero-hud b{font-weight:400;color:var(--teal-300)}

/* ============================== 03 · DATUM STRIP ======================== */
.strip{border-block:1px solid var(--rule-dark);background:var(--ink-0)}
.strip .grid{padding-block:22px}
.strip ul{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px}
.strip li{display:flex;align-items:center;gap:12px;color:var(--line-dark)}
.strip li b{font-weight:400;color:var(--vellum)}
.strip li::before{content:"";width:5px;height:5px;background:var(--teal-300);transform:rotate(45deg);flex:none}

/* ============================== 04 · FIRM / BASELINE ==================== */
.firm .eyebrow .label{color:var(--ink-mute)}
.firm-head{grid-column:1/span 8;margin-bottom:clamp(40px,6vw,80px)}
/* The baseline is wider than the viewport by design. It scrolls on its own
   axis so it never depends on a ScrollTrigger pin — which means it still
   works with JS off, under reduced-motion, and for keyboard/touch users. */
.baseline-wrap{
  grid-column:1/-1;position:relative;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--line-light) transparent;
  padding-bottom:6px;
}
/* When JS pins the section, scroll becomes the transport — the native
   scrollbar is handed back only as the no-JS / reduced-motion fallback. */
.baseline-wrap.is-pinned{
  overflow:hidden;scroll-snap-type:none;padding-bottom:0;
}
/* Trailing run-off so the LAST station can still travel all the way to the
   benchmark. Without it the row stops when its right edge meets the frame and
   the final years never reach the marker. */
.baseline-wrap.is-pinned .baseline{padding-right:72vw}
.baseline-wrap.is-pinned .bl-rule{right:72vw}
.baseline-wrap::-webkit-scrollbar{height:3px}
.baseline-wrap::-webkit-scrollbar-thumb{background:var(--line-light)}
.baseline-wrap::-webkit-scrollbar-track{background:var(--rule-light)}
.baseline{
  position:relative;display:flex;gap:clamp(24px,4vw,64px);
  padding-top:56px;padding-bottom:20px;
  width:max-content;min-width:100%;
}
.station{scroll-snap-align:start}

/* the survey baseline itself — a real element so it can be drawn on scrub */
.bl-rule{
  position:absolute;left:0;right:0;top:56px;height:1px;
  background:var(--rule-light-2);transform-origin:left center;
}
/* Benchmark that the timeline runs past. It stays put in the viewport while
   the years travel, which is how a survey marker actually behaves. */
.bl-mark{
  position:absolute;top:56px;left:9%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%);
}
.bl-mark i{
  display:block;width:0;height:0;margin-inline:auto;
  border:5px solid transparent;border-top-color:var(--datum-red);
}
.bl-mark span{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.12em;
  color:var(--datum-red);white-space:nowrap;
}
.baseline-wrap:not(.is-pinned) .bl-mark{display:none}

.station{position:relative;flex:1 0 clamp(210px,22vw,290px)}
.station::before{ /* tick riser */
  content:"";position:absolute;left:0;top:-18px;width:1px;height:18px;
  background:var(--line-light);transform-origin:bottom center;
}
.station .yr{
  font-family:var(--ff-display);font-weight:700;font-size:clamp(1.7rem,2.2vw,2.5rem);
  letter-spacing:.01em;color:var(--ink-1);line-height:1;margin-bottom:10px;
  transition:color .35s ease;
}
.station .plate{aspect-ratio:4/3;margin-bottom:12px;filter:grayscale(1);
  transition:filter .5s ease}
.station:hover .plate,.station.is-on .plate{filter:grayscale(0)}
.station.is-on .yr{color:var(--teal-500)}
.station .cap{color:var(--ink-mute)}

/* ============================== 05 · SERVICES =========================== */
.svc-index{grid-column:1/span 4;position:sticky;top:104px;align-self:start}
.svc-row{
  display:flex;align-items:center;gap:14px;padding:18px 0;
  border-bottom:1px solid var(--rule-dark);color:var(--line-dark);
  cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;
  width:100%;text-align:left;transition:color var(--d-micro);position:relative;
}
.svc-row .dot{
  width:6px;height:6px;border:1px solid var(--line-dark);border-radius:50%;flex:none;
  transition:background var(--d-micro),border-color var(--d-micro),box-shadow var(--d-micro);
}
.svc-row .nm{flex:1}
.svc-row[aria-selected="true"]{color:var(--vellum)}
.svc-row[aria-selected="true"] .dot{background:var(--teal-300);border-color:var(--teal-300);
  box-shadow:0 0 10px var(--teal-300)}
.svc-row[aria-selected="true"]::before{
  content:"";position:absolute;left:-14px;top:50%;width:8px;height:1px;background:var(--teal-300);
}
.svc-panel-wrap{grid-column:6/span 7}
.svc-panel{display:none}
.svc-panel.is-active{display:block}
.svc-panel .h3{margin-bottom:18px}
.svc-panel .lede{margin-bottom:26px}
.svc-specs{display:grid;gap:10px;margin-bottom:30px}
.svc-specs li{display:flex;gap:14px;color:var(--line-dark);padding-bottom:10px;
  border-bottom:1px solid var(--rule-dark)}
.svc-specs li b{font-weight:400;color:var(--teal-300);flex:none;min-width:96px}
.svc-figure{position:relative;aspect-ratio:16/10}
.svc-figure .plate{position:absolute;inset:0}
.svc-diagram{position:absolute;right:14px;bottom:14px;width:clamp(90px,12vw,140px);height:auto;z-index:2}
.svc-diagram *{stroke:var(--teal-300);fill:none;stroke-width:1;vector-effect:non-scaling-stroke}

/* ============================== 06 · SHEETS (projects) ================== */
.sheets-viewport{position:relative;overflow:hidden}
.sheets-track{display:flex;will-change:transform}
.sheet-item{
  flex:0 0 100vw;min-height:100svh;display:flex;align-items:center;
}
.sheet-item .grid{width:100%;align-items:center;row-gap:24px}
.sheet-figure{grid-column:1/span 8;position:relative;aspect-ratio:16/10}
.sheet-figure .plate{position:absolute;inset:0}
/* the duotone copy sits on top and is revealed by the cut line */
.sheet-figure .cut-copy{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 100% 0 0);           /* JS drives the right inset */
}
.sheet-figure .cut-copy img{filter:url(#blueprint)}
.cutline{
  position:absolute;top:-10px;bottom:-10px;width:1px;background:var(--datum-red);
  left:0;z-index:4;pointer-events:none;
}
.cutline span{
  position:absolute;top:-10px;left:6px;white-space:nowrap;
  font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.12em;
  color:var(--datum-red);
}
.sheet-block{grid-column:10/span 3;position:relative}
/* the whole plate is the target — a drawing sheet you can open */
a.sheet-figure{display:block;text-decoration:none;cursor:pointer}
a.sheet-figure:hover .plate img{transform:scale(1.015)}
a.sheet-figure .plate img{transition:transform .5s var(--e-reveal)}
a.sheet-figure:focus-visible{outline:2px solid var(--teal-300);outline-offset:4px}
.titleblock .nm a{color:inherit;text-decoration:none}
.titleblock .nm a:hover{color:var(--teal-500)}
.titleblock .r.open{grid-template-columns:1fr;padding:0}
.openlink{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 12px;background:var(--teal-500);color:#fff;
  font-family:var(--ff-mono);font-size:var(--fs-data);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  transition:background var(--d-micro) ease;
}
.openlink:hover,.openlink:focus-visible{background:var(--ink-1);color:#fff}
.openlink .arw{transition:transform var(--d-micro) var(--e-machine);flex:none}
.openlink:hover .arw{transform:translateX(3px)}
[data-theme="light"] .openlink{background:#1B6E75;color:#fff}
[data-theme="light"] .openlink:hover{background:#0E1B2E}
.sheet-ghost{
  position:absolute;right:0;top:-.35em;z-index:0;
  font-family:var(--ff-display);font-weight:700;font-size:24vw;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--rule-light-2);
  pointer-events:none;user-select:none;
}
.titleblock{position:relative;z-index:1;border:1px solid var(--rule-light-2)}
.titleblock .r{display:grid;grid-template-columns:auto 1fr;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--rule-light)}
.titleblock .r:last-child{border-bottom:0}
.titleblock .k{color:var(--ink-mute)}
.titleblock .v{color:var(--ink-1);text-align:right}
.titleblock .nm{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;font-size:calc(var(--fs-h3)*1.08);
  letter-spacing:-.015em;text-transform:none;line-height:1.15}

/* ============================== 07 · METRICS ============================ */
.metrics .grid{row-gap:clamp(36px,5vw,56px)}
.metric{grid-column:span 3;position:relative;text-align:left}
.metric .dial{position:absolute;left:-6px;top:-16px;width:96px;height:48px;opacity:.35;z-index:0}
.metric .dial line{stroke:var(--line-dark);stroke-width:1}
.odo{
  position:relative;z-index:1;display:flex;align-items:baseline;
  font-family:var(--ff-body);font-weight:600;
  font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--vellum);
}
.odo .cell{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom}
.odo .cell .strip-d{display:block;will-change:transform}
.odo .cell .strip-d i{display:block;height:1em;line-height:1;font-style:normal}
.odo .fix{color:var(--teal-300)}
.metric .lab{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule-dark);
  color:var(--line-dark)}

/* ============================== 08 · THEATRE (offices) ================== */
.theatre-map{grid-column:1/span 9;position:relative}
.theatre-map svg{width:100%;height:auto;overflow:visible}
.theatre-map .land{stroke:var(--rule-dark-2);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.theatre-map .arc{stroke:var(--teal-300);stroke-width:1;fill:none;opacity:.45}
.bm{cursor:pointer}
.bm circle{fill:none;stroke:var(--teal-300);stroke-width:1;transition:stroke .25s}
.bm .x{stroke:var(--teal-300);stroke-width:1}
.bm text{font-family:var(--ff-mono);font-size:8px;letter-spacing:.1em;fill:var(--line-dark)}
.bm.is-origin circle,.bm.is-origin .x{stroke:var(--datum-red)}
.bm:hover circle,.bm.is-on circle{stroke:var(--vellum);filter:drop-shadow(0 0 6px var(--teal-300))}
.bm:hover text,.bm.is-on text{fill:var(--vellum)}
.office-reg{grid-column:11/span 2}
.office-reg li{padding:9px 0;border-bottom:1px solid var(--rule-dark)}
.office-reg button{background:none;border:0;padding:0;width:100%;text-align:left;
  cursor:pointer;color:var(--line-dark);display:flex;justify-content:space-between;gap:10px;
  transition:color var(--d-micro)}
.office-reg button:hover,.office-reg button.is-on{color:var(--teal-300)}

/* ============================== 09 · REGISTER (clients) ================= */
.reg-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light)}
.reg-cell{
  position:relative;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  padding:22px 16px;border-right:1px solid var(--rule-light);
  border-bottom:1px solid var(--rule-light);transition:border-color var(--d-micro);
}
/* --line-light is a hairline colour, not a text colour: at 10px on vellum it
   measures 2.63:1. Index labels use the muted ink instead so the register
   stays readable at AA. */
.reg-cell .ix{position:absolute;top:7px;left:9px;color:var(--ink-mute);
  font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.1em}
/* Client marks are reproduced in their own colours — no grayscale, no
   opacity veil. A register of real clients should look like the real marks. */
.reg-cell img{max-height:52px;width:auto;object-fit:contain;
  transition:transform var(--d-micro)}
.reg-cell:hover img{transform:scale(1.04)}
.reg-cell:hover{border-color:var(--teal-500)}

/* ============================== 10 · AOR STAMP ========================== */
.aor{min-height:50vh;display:flex;align-items:center}
.aor-copy{grid-column:1/span 7}
.aor-stamp{grid-column:9/span 3;display:flex;justify-content:center;position:relative}
.stamp{width:min(260px,60vw);height:auto;position:relative}
.stamp .ring{animation:spin 120s linear infinite}
.stamp text{font-family:var(--ff-mono);font-size:7.4px;letter-spacing:.24em;
  fill:var(--vellum);opacity:.75;text-transform:uppercase}
.stamp .mark{fill:var(--vellum);opacity:.9}
.stamp .rev{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;
  fill:var(--datum-red);text-anchor:middle;
}
.stamp .revline{stroke:var(--datum-red);stroke-width:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================== 11 · CONTACT ============================ */
.tb-form{grid-column:2/span 10;border:1px solid var(--rule-light-2);background:var(--vellum-2)}
.tb-row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--rule-light)}
.tb-row:last-of-type{border-bottom:0}
.tb-row label{padding:16px 18px;border-right:1px solid var(--rule-light);
  color:var(--ink-mute);display:flex;align-items:center}
.tb-row .fld{padding:6px 10px;display:flex;align-items:center}
.tb-row input,.tb-row select,.tb-row textarea{
  width:100%;background:transparent;border:0;padding:10px 8px;
  font-family:var(--ff-body);color:var(--ink-1);outline:0;
  border-bottom:1px solid transparent;transition:border-color var(--d-micro);
}
.tb-row textarea{resize:vertical;min-height:96px}
.tb-row input:focus,.tb-row select:focus,.tb-row textarea:focus{border-bottom-color:var(--teal-500)}
.tb-meta{grid-column:2/span 10;display:flex;flex-wrap:wrap;gap:18px 40px;
  margin-top:14px;color:var(--ink-mute)}
.tb-submit{grid-column:2/span 10;margin-top:22px}
.offices-3{grid-column:2/span 10;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);margin-top:clamp(48px,6vw,84px)}
.offices-3 .o{border-top:1px solid var(--rule-light-2);padding-top:16px;color:var(--ink-mute)}
.offices-3 .o b{display:block;color:var(--ink-1);font-weight:400;margin-bottom:8px}

/* ============================== 12 · FOOTER ============================= */
.foot-mark{grid-column:1/-1;margin-bottom:clamp(40px,6vw,72px)}
.foot-mark svg{width:100%;height:auto;overflow:visible}
.foot-mark text{
  font-family:var(--ff-display);font-weight:700;font-size:118px;letter-spacing:.01em;
  fill:transparent;stroke:var(--vellum);stroke-width:1;opacity:.55;
}
.foot-cols{grid-column:1/span 9;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.foot-cols h4{color:var(--teal-300);margin-bottom:14px}
.foot-cols li{padding:5px 0}
.foot-cols a{color:var(--line-dark);transition:color var(--d-micro)}
.foot-cols a:hover{color:var(--vellum)}
.foot-rail{
  grid-column:1/-1;margin-top:clamp(40px,5vw,64px);padding-top:18px;
  border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  color:var(--line-dark);
}

/* ============================== CHAINAGE RAIL =========================== */
.chainage{
  position:fixed;top:0;right:0;bottom:0;width:var(--rail);z-index:90;
  pointer-events:none;
  border-left:1px solid var(--rule-dark);
  background:linear-gradient(to left,color-mix(in srgb,var(--ink-0) 55%,transparent),transparent);
}
.chainage .ticks{position:absolute;inset:0;width:100%;height:100%}
.chainage .ticks line{stroke:var(--line-dark);stroke-width:1;opacity:.45}
.chainage .ticks line.maj{opacity:.8;stroke:var(--line-dark)}
.chainage .stations{position:absolute;inset:0;pointer-events:auto}
.chainage .st{
  position:absolute;right:5px;transform:translateY(-50%);
  font-family:var(--ff-mono);font-size:7.5px;letter-spacing:.06em;
  color:var(--line-dark);writing-mode:vertical-rl;white-space:nowrap;
  padding:3px 1px;transition:color var(--d-micro);
  max-height:150px;overflow:hidden;
}
.chainage .st:hover,.chainage .st:focus-visible{color:var(--teal-300)}
.needle{position:absolute;left:0;right:0;height:0;will-change:transform}
.needle::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--datum-red)}
.needle::after{
  content:"";position:absolute;left:2px;top:-3.5px;
  border:3.5px solid transparent;border-left-color:var(--datum-red);
}
.needle .read{
  position:absolute;right:4px;top:4px;white-space:nowrap;
  font-family:var(--ff-mono);font-size:8px;letter-spacing:.1em;color:var(--datum-red);
}
/* the vellum sections need dark-on-light rail ticks */
.chainage.on-light{border-left-color:var(--rule-light)}
.chainage.on-light .ticks line{stroke:var(--line-light)}
.chainage.on-light .st{color:var(--ink-mute)}

/* ============================== BOOT ==================================== */
.boot{
  position:fixed;inset:0;z-index:200;background:var(--vellum);color:var(--ink-1);
  display:flex;align-items:center;justify-content:center;
}
.boot-logo{width:min(300px,55vw);height:auto}
.boot-logo path,.boot-logo polygon,.boot-logo rect,.boot-logo circle{
  fill:none;stroke:var(--ink-1);stroke-width:1;
}
.boot-list{position:absolute;left:var(--margin);bottom:var(--margin);display:grid;gap:6px}
.boot-list li{color:var(--ink-mute);clip-path:inset(0 100% 0 0)}
.boot-list li b{font-weight:400;color:var(--teal-500)}
.boot-dwg{position:absolute;right:var(--margin);bottom:var(--margin);color:var(--line-light)}
.boot-tick{position:absolute;left:50%;top:62%;width:14px;height:14px;opacity:0}
.boot-tick line{stroke:var(--datum-red);stroke-width:1.5}

/* ============================== RESPONSIVE ============================== */
@media(max-width:1200px){
  .hero-copy{grid-column:1/span 6}
  .hero-plate{grid-column:7/span 6}
  .svc-panel-wrap{grid-column:6/span 7}
  .theatre-map{grid-column:1/span 8}
  .office-reg{grid-column:10/span 3}
}
@media(max-width:1023px){
  :root{--rail:0px}
  .chainage{display:none}
  .nav-list{display:none}
  /* The burger needs a real hit area — a single 12th column collapses to
     ~16px at 375px and clips the icon. Give it two columns. */
  .nav-logo{grid-column:1/span 5}
  .nav-meta{grid-column:6/span 5;text-align:right}
  .nav-burger{display:block;grid-column:11/span 2;justify-self:end;width:44px;height:44px}
  .nav-burger svg{width:26px;height:14px;stroke-width:1.5;margin-inline:auto}
  .reg-grid{grid-template-columns:repeat(4,1fr)}
  .foot-cols{grid-column:1/-1;grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:860px){
  .hero{min-height:auto;padding-block:104px clamp(48px,8vw,80px)}
  .hero-copy{grid-column:1/-1}
  .hero-plate{grid-column:1/-1}
  .hero-figure{aspect-ratio:4/3}
  .svc-index{grid-column:1/-1;position:static}
  .svc-panel-wrap{grid-column:1/-1;margin-top:28px}
  .metric{grid-column:span 6}
  .sheet-item{flex:0 0 100%;min-height:auto;padding-block:44px}
  .sheet-figure{grid-column:1/-1}
  .sheet-block{grid-column:1/-1}
  .sheet-ghost{font-size:34vw;top:auto;bottom:100%}
  .theatre-map{grid-column:1/-1}
  .office-reg{grid-column:1/-1;margin-top:32px;
    display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
  .tb-form,.tb-meta,.tb-submit,.offices-3{grid-column:1/-1}
  .tb-row{grid-template-columns:1fr}
  .tb-row label{border-right:0;border-bottom:1px solid var(--rule-light);padding-bottom:8px}
  .offices-3{grid-template-columns:1fr;gap:26px}
  .baseline{flex-direction:column;padding-top:0;padding-left:26px}
  .baseline::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .station{flex:none}
  .station::before{left:-26px;top:10px;width:18px;height:1px}
  .foot-mark text{font-size:60px}
}
@media(max-width:560px){
  /* keep the live clock (the heartbeat), drop the site coordinates —
     three wrapped lines will not sit in a 64px bar */
  .nav-meta div:last-child{display:none}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .reg-grid{grid-template-columns:repeat(3,1fr)}
  .metric{grid-column:1/-1}
  .strip ul{flex-direction:column;gap:10px}
  .hero-hud{position:static;margin-top:14px;border:1px solid var(--rule-dark);min-width:0}
}

/* ============================== REDUCED MOTION ==========================
   Not a fallback — a first-class art direction. Everything renders final. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .boot{display:none}
  .hero-canvas{display:none}
  /* No pin means no horizontal travel — the drawing set becomes a vertical
     stack of sheets rather than a row that runs off the side of the page. */
  .sheets-track{transform:none !important;flex-direction:column}
  .sheet-item{flex:0 0 auto;min-height:auto;padding-block:clamp(40px,6vw,72px)}
  .sheets-viewport{overflow:visible}
  .sheet-figure .cut-copy{clip-path:inset(0 100% 0 0)}
  .stamp .ring{animation:none}
  .boot-list li{clip-path:none}
}

/* ============================== PRINT =================================== */
@media print{
  .chainage,.nav,.boot,.hero-canvas{display:none}
  body{background:#fff;color:#000}
}

/* ---- theme toggle ------------------------------------------------------ */
.theme-btn{
  background:none;border:1px solid var(--rule-dark-2);cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;flex:none;
  color:currentColor;transition:border-color var(--d-micro),color var(--d-micro);
}
.theme-btn:hover,.theme-btn:focus-visible{border-color:var(--teal-300);color:var(--teal-300)}
.theme-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.2}
.theme-btn .sun{display:none}
[data-theme=light] .theme-btn .sun{display:block}
[data-theme=light] .theme-btn .moon{display:none}
.nav-meta{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.nav-meta .readouts{text-align:right}
@media(max-width:1023px){ .nav-meta{grid-column:6/span 4} .theme-btn{width:30px;height:30px} }


/* ==========================================================================
   ===== PROJECT PAGES (detail + register) =================================
   ========================================================================== */
.pj-hero{padding:calc(64px + clamp(48px,7vw,110px)) 0 clamp(24px,3vw,40px)}
.pj-head{grid-column:1/span 9}
.pj-title{
  font-family:var(--ff-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,.9rem + 3.4vw,4.2rem);line-height:1;letter-spacing:.005em;
  margin-bottom:20px;
}
.pj-back{display:inline-flex;align-items:center;gap:8px;color:var(--teal-300);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--d-micro)}
.pj-back:hover{border-bottom-color:var(--teal-300)}

.pj-main{padding-bottom:clamp(56px,7vw,110px)}
.pj-main .grid{row-gap:clamp(26px,3vw,42px)}
.pj-figure{grid-column:1/span 8;margin:0;position:relative;aspect-ratio:16/10}
.pj-figure .plate{position:absolute;inset:0}
.pj-block{grid-column:10/span 3}
.pj-block .titleblock{border-color:var(--rule-dark)}
.pj-block .titleblock .r{border-bottom-color:var(--rule-dark)}
.pj-block .titleblock .k{color:var(--line-dark)}
.pj-block .titleblock .v{color:var(--vellum)}
.pj-copy{grid-column:1/span 8}
.pj-copy p{margin-bottom:16px;color:color-mix(in srgb,currentColor 80%,transparent);max-width:68ch}
.pj-list{margin:0 0 18px;padding:0;list-style:none;max-width:68ch}
.pj-list li{
  position:relative;padding-left:20px;margin-bottom:8px;
  color:color-mix(in srgb,currentColor 78%,transparent);
}
.pj-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--teal-300);
}

.pj-gallery .grid{row-gap:var(--gutter)}
.pj-shot{grid-column:span 4;margin:0;position:relative;aspect-ratio:4/3}
.pj-shot .plate{position:absolute;inset:0}

.pj-nav{padding-block:clamp(40px,5vw,72px)}
.pj-adj{grid-column:span 6;display:flex;flex-direction:column;gap:8px;
  padding:20px 22px;border:1px solid var(--rule-dark);transition:border-color var(--d-micro),background var(--d-micro)}
.pj-adj:hover{border-color:var(--teal-300);background:color-mix(in srgb,var(--teal-300) 6%,transparent)}
.pj-adj .lbl{color:var(--teal-300)}
.pj-adj .nm{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1rem,.9rem + .5vw,1.4rem);line-height:1.15;letter-spacing:.01em}
.pj-adj.next{text-align:right;align-items:flex-end}

/* ---- register (projects index) ---- */
.pfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3vw,44px)}
.pf-btn{
  background:none;border:1px solid var(--rule-dark-2);color:var(--line-dark);cursor:pointer;
  padding:9px 16px;font-family:var(--ff-mono);font-size:var(--fs-data);
  text-transform:uppercase;letter-spacing:.1em;
  transition:color var(--d-micro),border-color var(--d-micro),background var(--d-micro);
}
.pf-btn:hover{color:var(--teal-300);border-color:var(--teal-300)}
.pf-btn.is-on{background:var(--teal-500);border-color:var(--teal-500);color:#fff}
[data-theme="light"] .pf-btn.is-on{background:#1B6E75;border-color:#1B6E75;color:#fff}

.pgrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.pcard{display:flex;flex-direction:column;gap:12px}
.pcard-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.pcard-img img{transition:transform .55s var(--e-reveal)}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-meta{display:flex;flex-direction:column;gap:5px}
.pcard-meta .ix{color:var(--datum-red)}
.pcard-nm{
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;
  font-size:1rem;line-height:1.2;letter-spacing:.01em;
  transition:color var(--d-micro);
}
.pcard:hover .pcard-nm{color:var(--teal-300)}
.pcard-meta .loc{color:var(--line-dark);font-size:var(--fs-micro)}
.pcard.is-hidden{display:none}

/* No photograph on record — 22 of the 169 projects (sewerage, drainage,
   irrigation) never had a site photo on the original site. A drawing sheet
   without a photograph is a normal state in a drawing set, so it is styled
   as one rather than left as an empty box. */
.plate.is-empty{
  display:grid;place-items:center;background:var(--cyanotype);
  background-image:linear-gradient(rgba(63,193,203,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,193,203,.10) 1px,transparent 1px);
  background-size:26px 26px;
}
.plate.is-empty .ph{
  text-align:center;color:var(--teal-300);opacity:.9;padding:10px;
  font-family:var(--ff-mono);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.16em;line-height:1.9;
}
.plate.is-empty .ph b{
  display:block;font-weight:400;font-size:var(--fs-data);
  color:var(--vellum);opacity:.8;margin-bottom:2px;
}
[data-theme="light"] .plate.is-empty{background-color:#0E1B2E}

@media(max-width:1200px){
  .pj-figure{grid-column:1/span 7}.pj-block{grid-column:9/span 4}.pj-copy{grid-column:1/span 9}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .pj-head,.pj-figure,.pj-block,.pj-copy{grid-column:1/-1}
  .pj-shot{grid-column:span 6}
  .pj-adj{grid-column:1/-1}
  .pj-adj.next{text-align:left;align-items:flex-start}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pj-shot{grid-column:1/-1}
  .pgrid{grid-template-columns:1fr}
}

/* ==========================================================================
   ===== DOWNLOADS / PREQUALIFICATION ======================================
   ========================================================================== */
.dl-hero{grid-column:1/-1;border:1px solid var(--rule-dark);padding:clamp(24px,3vw,44px)}
.dl-hero-txt{max-width:56ch}
.dl-tag{color:var(--teal-300);letter-spacing:.16em}
.dl-size{color:var(--line-dark);white-space:nowrap}

.dl-office{grid-column:span 6}
.dl-office-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--rule-light-2);margin-bottom:8px}
.dl-office-h .mono{color:var(--ink-mute)}
.dl-note{color:var(--ink-mute);margin-bottom:14px}
.dl-list{display:grid;gap:10px}

.dl-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

.dl-card{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--rule-dark);
  transition:border-color var(--d-micro),background var(--d-micro),transform var(--d-micro);
}
.on-vellum .dl-card{border-color:var(--rule-light-2)}
.dl-card:hover,.dl-card:focus-visible{
  border-color:var(--teal-300);
  background:color-mix(in srgb,var(--teal-300) 7%,transparent);
}
.dl-ico{flex:none;width:22px;color:var(--teal-300)}
.on-vellum .dl-ico{color:var(--teal-500)}
.dl-ico svg{width:100%;height:auto;stroke-width:1;vector-effect:non-scaling-stroke}
.dl-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-txt b{font-weight:600;font-size:.95rem;letter-spacing:-.005em}
.dl-sub{color:var(--line-dark);font-size:var(--fs-micro)}
.on-vellum .dl-sub{color:var(--ink-mute)}

@media(max-width:1023px){ .dl-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  .dl-office{grid-column:1/-1}
  .dl-grid{grid-template-columns:1fr}
}