/* ==========================================================================
   Bhardwaj Infrastructure — base
   Tokens, type, layout, shared components.
   v7.0 — readable type pass. Marcellus + Manrope, self-hosted. Exact logo ratios.
   ========================================================================== */

:root{
  /* Black and gold, measured off the logo artwork. Nothing else. The tonal
     blacks do the work a second colour would normally do, so the gold never
     has to compete. */
  --ink:#0b0a0b;
  --ink-2:#131113;
  --ink-3:#1b181b;
  --vault:#0f0e0f;        /* the deep sections that used to be paper */
  --gold:#d7b778;
  --gold-deep:#b99a5b;
  --gold-light:#f4e3bd;
  --bone:#f2efe9;

  --paper-text:#f2efe9;
  --paper-muted:#9a948b;
  --on-ink:#f2efe9;
  --on-ink-muted:#a49e95;

  --line:rgba(215,183,120,.16);
  --line-strong:rgba(215,183,120,.34);
  --line-paper:rgba(215,183,120,.16);

  /* Foil. A struck-gold gradient, used on the display type and the rules. */
  --foil:linear-gradient(100deg,
    #9c7f45 0%, #b99a5b 14%, #d7b778 28%, #f4e3bd 41%,
    #fffaf0 48%, #f4e3bd 55%, #d7b778 70%, #b99a5b 86%, #9c7f45 100%);

  /* Type. One family carries the whole site now: readable at 320px, readable
     on a projector. Mono is kept only for numbers and instrument labels. */
  /* The logo is set in Kudryashev Display Contrast Sans, which is licensed
     and not a web font. The logo artwork carries its own outlines so it never
     depends on the font being present. If the licence is extended to web,
     drop the files into assets/fonts/, uncomment the @font-face block below
     and put the family first in --display. Nothing else needs changing. */
  /* Marcellus for the display voice. It is a roman inscriptional face — the
     lineage the Versace wordmark comes out of — but its stroke contrast is
     about 1:2.5 rather than a didone's 1:8, so the thin strokes survive gold
     on black at any size. That was the whole problem with the didone: it was
     beautiful at 64px and gone at 17px. Marcellus ships one weight, 400, and
     the site never asks for another, so nothing is ever synthetically
     emboldened (a fake bold is a blurred bold).
     Manrope carries the body: geometric enough to sit in the same room as the
     Vuitton register, but with a far larger x-height and open counters, which
     is most of what small-size legibility actually is.
     TO SWAP THE DISPLAY FACE: change --display below and the family in the
     FONTS constant in build.py. Nothing else needs touching — every display
     rule on the site asks for weight 400. */
  --display:"Marcellus","Optima","Palatino Linotype",Georgia,serif;
  --body:"Manrope","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Manrope",system-ui,-apple-system,sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
  --band:clamp(72px,10vw,132px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.62s;
}

/*
@font-face{
  font-family:"Kudryashev Display Contrast Sans";
  src:url("../fonts/kudryashev-display-contrast-sans.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* --- Type scale ---------------------------------------------------------- */

.d1,.d2,.d3,.d4{
  text-wrap:balance;
  font-family:var(--display);
  font-weight:400;
  line-height:1.16;
  letter-spacing:.002em;
  margin:0;
}
/* Marcellus has taller ascenders and a shorter x-height than the didone did,
   so every line-height here is looser than it was. Tight leading on a roman
   face closes up the counters and that is what makes big type hard to read. */
.d1{font-size:clamp(1.95rem,1rem + 4.2vw,4.1rem);line-height:1.12}
.d2{font-size:clamp(1.66rem,1.05rem + 2.7vw,3.05rem);line-height:1.16}
.d3{font-size:clamp(1.42rem,1rem + 1.9vw,2.35rem);line-height:1.22}
.d4{font-size:clamp(1.16rem,1.65vw,1.38rem);line-height:1.32;font-weight:400}

.lede{
  text-wrap:pretty;
  font-size:clamp(1.02rem,1.3vw,1.14rem);
  line-height:1.66;
  color:var(--on-ink-muted);
  max-width:56ch;
  margin:0;
  font-weight:400;
}
.label{
  display:inline-block;
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.muted{color:var(--on-ink-muted)}

p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* --- Layout -------------------------------------------------------------- */

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.band{padding:var(--band) 0;position:relative}
.band-tight{padding:clamp(48px,6vw,78px) 0;position:relative}

/* Was paper, now the vault: a deeper black with a gold hairline top and
   bottom. The client asked for black and gold only, so contrast comes from
   tone and rule weight rather than from a second colour. */
.paper{
  background:var(--vault);color:var(--paper-text);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.paper .lede,.paper .muted{color:var(--paper-muted)}
.paper .label{color:var(--gold-deep)}
.paper .d1,.paper .d2,.paper .d3,.paper .d4{color:var(--paper-text)}

.grid{display:grid;gap:clamp(28px,4vw,56px)}
.g-side{grid-template-columns:1fr}
.g-head{grid-template-columns:1fr}
@media(min-width:900px){
  .g-side{grid-template-columns:.85fr 1fr}
  .g-head{grid-template-columns:1.05fr .95fr}
}

.shead{
  display:grid;
  gap:clamp(18px,3vw,44px);
  grid-template-columns:1fr;
  align-items:end;
  margin-bottom:clamp(34px,5vw,62px);
}
.shead .d2{margin-top:16px}
@media(min-width:900px){.shead{grid-template-columns:1.05fr .95fr}}

/* --- Navigation ---------------------------------------------------------- */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:22px;
  padding:20px var(--gutter);
  background:rgba(22,21,22,0);
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(20,19,20,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:11px;padding-bottom:11px;
}
.brand{display:flex;align-items:center;gap:15px;margin-right:auto;color:var(--on-ink)}
/* Both logo elements are sized on width alone with the artwork's own ratio
   restated, so neither can ever be squashed by a stray height and neither
   reflows while the file loads. Mark 112.289 x 184.648, wordmark
   306.267 x 66.948, lockup 306.267 x 271.860 — straight off the viewBoxes. */
.brand svg{width:28px;height:auto;aspect-ratio:112.289/184.648;color:var(--gold);flex:none}
.brand-type{
  font-family:var(--display);
  font-size:.95rem;font-weight:400;letter-spacing:0;line-height:1.1;
  display:flex;flex-direction:column;
}
.brand-type i{
  font-style:normal;
  font-family:var(--mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-muted);font-weight:600;margin-top:2px;
}
.menu{display:none;gap:26px;align-items:center}
.menu a{
  font-size:.9rem;font-weight:500;color:var(--on-ink-muted);
  position:relative;padding:4px 0;transition:color .3s var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.menu a[aria-current="page"]{color:var(--on-ink)}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .menu a:hover{color:var(--on-ink)}
  .menu a:hover::after{transform:scaleX(1)}
}
.nav-cta{
  display:none;
  font-size:.82rem;letter-spacing:.01em;
  padding:9px 18px;border:1px solid var(--line-strong);border-radius:2px;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
}
@media(min-width:1040px){.menu{display:flex}.nav-cta{display:inline-block}}

.burger{
  width:38px;height:38px;display:grid;place-content:center;gap:6px;
  border:1px solid var(--line-strong);border-radius:2px;
}
.burger span{display:block;width:16px;height:1px;background:var(--on-ink);transition:transform .34s var(--ease),opacity .28s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:55;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gutter);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease-out);
  pointer-events:none;
}
.drawer.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer a{
  font-family:var(--display);font-size:clamp(1.6rem,7vw,2.4rem);font-weight:400;
  letter-spacing:0;padding:11px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.drawer.is-open a{opacity:1;transform:none}
.drawer button{
  margin-top:26px;align-self:flex-start;
  border:1px solid var(--gold);color:var(--gold);
  padding:12px 24px;border-radius:2px;font-size:.9rem;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s;
}
.drawer.is-open button{opacity:1;transform:none}

@media(min-width:1040px){.burger,.drawer{display:none}}

/* --- Chainage rail ------------------------------------------------------- */

.rail{
  position:fixed;right:max(14px,calc(var(--gutter) * .42));top:22vh;bottom:22vh;
  width:34px;z-index:40;display:none;pointer-events:none;
}
@media(min-width:1100px){.rail{display:block}}
.rail-line{position:absolute;left:16px;top:0;bottom:0;width:1px;background:var(--line)}
.rail-fill{position:absolute;left:16px;top:0;width:1px;height:0;background:var(--gold);transform-origin:top}
.rail-ticks{position:absolute;left:11px;top:0;bottom:0;width:11px}
.rail-ticks i{position:absolute;left:0;width:7px;height:1px;background:var(--line-strong)}
.rail-read{
  /* Reads inward, not outward. Sitting to the right of the line pushed the
     text off the edge of the window and the browser silently clipped it. */
  position:absolute;right:24px;left:auto;top:0;text-align:right;
  font-family:var(--mono);font-size:.65rem;font-weight:600;letter-spacing:.1em;
  color:var(--on-ink-muted);white-space:nowrap;
  transform:translateY(-50%);
}

/* --- Page shutter -------------------------------------------------------- */

.shutter{
  position:fixed;inset:0;z-index:200;display:flex;pointer-events:none;
}
.shutter i{
  flex:1;background:var(--ink);transform-origin:bottom;
  transform:scaleY(1);
  transition:transform .72s var(--ease-out);
}
.shutter.is-open i{transform:scaleY(0)}
.shutter.is-closing i{transform-origin:top;transform:scaleY(1)}
.shutter.is-done{display:none}

/* --- Hero ---------------------------------------------------------------- */

.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:132px 0 clamp(48px,7vw,90px);
  overflow:hidden;
}
.hero-page{min-height:82svh}
.canvas-wrap{position:absolute;inset:0;z-index:0}
.canvas-wrap canvas{width:100%;height:100%;display:block}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(150% 115% at 72% 46%,rgba(22,21,22,0) 0%,rgba(22,21,22,.42) 58%,rgba(22,21,22,.88) 88%,var(--ink) 100%),
    linear-gradient(to top,var(--ink) 2%,rgba(22,21,22,.24) 42%,rgba(22,21,22,.06) 100%);
}
.hero-inner{position:relative;z-index:2;display:grid;gap:clamp(34px,5vw,60px);align-items:end}
@media(min-width:1040px){.hero-inner{grid-template-columns:1.25fr .75fr}}
.hero-inner .lede{margin-top:24px;max-width:50ch}
.hero-inner h1{max-width:22ch}
.hero .btn-row{margin-top:32px}

.hero-meta{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
}
/* Slightly translucent so the scene behind it reads as depth rather than
   being cut off by a solid rectangle. */
.hero-meta>div{background:rgba(30,28,30,.88);padding:15px 17px}
.hero-meta b{
  display:block;font-family:var(--mono);font-size:.67rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;
}
.hero-meta span{display:block;font-size:.94rem;color:var(--on-ink);line-height:1.5}

.hero-side{border-top:1px solid var(--line-strong);padding-top:20px}
.hero-side ol{list-style:none;margin:14px 0 0;padding:0}
.hero-side li{border-bottom:1px solid var(--line)}
.hero-side a{
  display:flex;align-items:baseline;gap:14px;padding:13px 2px;
  font-family:var(--body);font-size:1.02rem;font-weight:600;letter-spacing:.002em;
  transition:padding-left .34s var(--ease),color .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .hero-side a:hover{padding-left:9px;color:var(--gold)}
}
.hero-side em{font-family:var(--mono);font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--gold)}

.scroll-hint{
  display:none;
  position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);
  flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-muted);
}
@media(min-width:1040px){.scroll-hint{display:flex}}
.scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:drop 2.3s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* --- Buttons ------------------------------------------------------------- */

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border:1px solid var(--line-strong);border-radius:2px;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;
  overflow:hidden;isolation:isolate;color:var(--on-ink);
  transition:border-color .34s var(--ease),color .34s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--gold);
  transform:scaleX(0);transform-origin:right;
  transition:transform .46s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--ink);border-color:var(--gold)}
  .btn:hover::before{transform:scaleX(1);transform-origin:left}
}
.btn-solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-solid::before{background:var(--on-ink)}
@media (hover:hover) and (pointer:fine){
  .btn-solid:hover{color:var(--ink);border-color:var(--on-ink)}
}
.paper .btn{border-color:var(--line-paper);color:var(--paper-text)}
@media (hover:hover) and (pointer:fine){
  .paper .btn:hover{border-color:var(--gold-deep)}
}
.paper .btn-solid{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.paper .btn-solid::before{background:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .paper .btn-solid:hover{color:var(--ink)}
}

.arrow-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
}
.arrow-link i{
  display:block;width:22px;height:1px;background:currentColor;
  transition:width .36s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .arrow-link:hover i{width:38px}
}

/* --- Reveals ------------------------------------------------------------- */

[data-rise]{opacity:0;transform:translateY(20px);transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
[data-rise].is-in{opacity:1;transform:none}
[data-mask]{display:block;overflow:hidden}
[data-mask]>span{display:block;transform:translateY(104%);transition:transform .86s var(--ease-out)}
[data-mask].is-in>span{transform:none}
[data-draw]{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
[data-draw].is-in{transform:scaleX(1)}

/* --- Footer -------------------------------------------------------------- */

.foot{border-top:1px solid var(--line);padding:clamp(52px,7vw,84px) 0 28px;background:var(--ink)}
.foot-grid{display:grid;gap:clamp(30px,4vw,48px);grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.5fr .8fr .8fr 1fr}}
.foot h4{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 15px;
}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem;color:var(--on-ink-muted)}
.foot-list a{transition:color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .foot-list a:hover{color:var(--gold)}
}
.foot-base{
  margin-top:clamp(38px,5vw,60px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--on-ink-muted);
}

/* --- Modal --------------------------------------------------------------- */

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;visibility:hidden}
.modal.is-open{visibility:visible}
.modal-veil{
  position:absolute;inset:0;background:rgba(10,9,10,.76);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .4s var(--ease);
}
.modal.is-open .modal-veil{opacity:1}
.modal-card{
  position:relative;width:min(560px,100%);max-height:88svh;overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line-strong);border-radius:3px;
  padding:clamp(26px,4vw,38px);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .46s var(--ease-out),transform .46s var(--ease-out);
}
.modal.is-open .modal-card{opacity:1;transform:none}
.modal-close{
  position:absolute;top:12px;right:14px;width:32px;height:32px;
  display:grid;place-content:center;font-size:1.35rem;line-height:1;
  color:var(--on-ink-muted);transition:color .3s var(--ease)
}
@media (hover:hover) and (pointer:fine){
  .modal-close:hover{color:var(--gold)}
}

/* --- Forms --------------------------------------------------------------- */

.form{margin-top:24px;display:grid;gap:19px}
.field-row{display:grid;gap:19px}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.field{position:relative;display:flex;flex-direction:column}
.field label{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-muted);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  font:inherit;
  font-size:1rem;            /* never below 16px: iOS zooms the page otherwise */
  color:var(--on-ink);
  background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  padding:11px 0;border-radius:0;width:100%;min-block-size:44px;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:64px}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 11px) 15px,calc(100% - 6px) 15px;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
.field select option{background:var(--ink-2);color:var(--on-ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:transparent}
.field .bar{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-out);
}
.field:focus-within .bar{transform:scaleX(1)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--on-ink);-webkit-box-shadow:0 0 0 40px var(--ink-2) inset}
.form-note{font-size:.82rem;color:var(--on-ink-muted);margin:0;line-height:1.55}
.form-error{font-size:.85rem;color:#e0a4a4;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hp input{font-size:1rem}

.form-done{display:none;margin-top:26px;padding:24px;border:1px solid var(--gold);border-radius:2px}
.form-done p{margin:12px 0 0;font-size:.95rem;color:var(--on-ink)}
.is-sent .form{display:none}
.is-sent .form-done{display:block}

/* --- Draft mode ---------------------------------------------------------- */

.draft [data-ph]{position:relative;outline:1px dashed var(--gold-deep);outline-offset:3px}
.draft [data-ph]::after{
  content:attr(data-ph);
  position:absolute;left:0;top:-9px;transform:translateY(-100%);
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;
  background:var(--gold);color:var(--ink);padding:2px 7px;border-radius:2px;
  white-space:nowrap;z-index:30;pointer-events:none;
}

/* --- Reduced motion ------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rise]{opacity:1;transform:none;transition:none}
  [data-mask]>span{transform:none;transition:none}
  [data-draw]{transform:scaleX(1);transition:none}
  .shutter{display:none}
  .scroll-hint i,.ticker-track{animation:none}
  .btn::before,.arrow-link i,.hero-side a,.menu a::after{transition:none}
  .modal-card,.modal-veil{transition-duration:.12s}
  .drawer{transition:none}
  .drawer a,.drawer button{opacity:1;transform:none;transition:none}
}

/* Footer buttons sit in the link list and should read as links. */
.foot-list button{padding:0;text-align:left;color:var(--gold);font-size:inherit;line-height:inherit}
@media (hover:hover) and (pointer:fine){
  .foot-list button:hover{opacity:.75}
}

/* --- Brand lockup -------------------------------------------------------- */
/* The wordmark is the supplied logo artwork with its type converted to
   outlines, so the logo and its typeface render exactly without needing the
   licensed font installed anywhere. Do not replace this with live text. */

.brand-word{display:block;width:200px;height:auto;aspect-ratio:306.267/66.948;flex:none}
@media(max-width:900px){.brand-word{width:170px}.brand svg{width:24px}}
@media(max-width:520px){.brand-word{width:146px}.brand svg{width:21px}}
@media(max-width:360px){.brand-word{width:126px}.brand svg{width:19px}}
.foot-lockup{width:214px;height:auto;aspect-ratio:306.267/271.860}

/* Anchor targets must clear the fixed header. */
section[id],[id^="sub-"],#certifications,#general,#divisions,#categories{scroll-margin-top:88px}

/* ==========================================================================
   Devices
   Everything below adapts the same design to the machine it is being read on.
   No layout is redrawn here, only sized, spaced and paced for the input
   method and the amount of screen actually available.
   ========================================================================== */

/* --- Safe areas ---------------------------------------------------------- */
/* Notches and home indicators. On a phone without them these all resolve to
   zero, so the desktop layout is untouched. */

.nav,.wrap,.foot .wrap{
  padding-inline:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right));
}
.foot{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.drawer{
  padding-inline:max(var(--gutter),env(safe-area-inset-left));
  padding-bottom:env(safe-area-inset-bottom);
}

/* --- Touch targets ------------------------------------------------------- */
/* WCAG 2.5.8 asks for 24px. A thumb wants 44. Bumped only where the pointer
   is coarse, so the desktop rhythm does not loosen. */

@media (pointer:coarse){
  .menu a{min-block-size:44px;display:flex;align-items:center}
  .brand{min-block-size:44px;align-items:center}
  .foot-list{gap:2px}
  .foot-list li{display:flex}
  /* The row is the target, not the text inside it. */
  .foot-list li>a,.foot-list li>button{
    min-block-size:44px;display:flex;align-items:center;inline-size:100%;
  }
  .btn{min-block-size:48px;padding-block:14px}
  .nav-cta{min-block-size:44px}
  .burger{inline-size:46px;block-size:46px}
  .modal-close{inline-size:44px;block-size:44px;top:6px;right:8px}
  .arrow-link{min-block-size:44px;align-items:center}
  .contact-block a,.offices a{
    display:inline-flex;align-items:center;min-block-size:44px;
  }
  .contact-block p{margin-bottom:2px}
  .hero-side a{padding-block:16px}
  .tags span{min-block-size:38px;display:inline-flex;align-items:center}
}

/* --- Long strings -------------------------------------------------------- */

.contact-block a,.foot-list a,.offices a{overflow-wrap:break-word}

/* --- Heroes on short screens --------------------------------------------- */
/* svh rather than dvh on purpose: the hero should not resize while the
   address bar hides, which would reflow the page mid-scroll. Landscape phones
   get a shorter hero so the content is not crushed under the header. */

.hero{min-height:100vh;min-height:100svh}
.hero-page{min-height:82vh;min-height:82svh}

@media (max-height:560px) and (orientation:landscape){
  .hero,.hero-page{min-height:auto;padding-block:104px 56px}
  .hero-inner{gap:26px}
  .scroll-hint{display:none}
}
@media (max-width:640px){
  .hero{min-height:auto;padding-block:120px 64px}
  .hero-page{min-height:auto;padding-block:112px 56px}
  .hero-inner{gap:32px}
}

/* --- Phone spacing ------------------------------------------------------- */

@media (max-width:640px){
  :root{--band:64px}
  .nav{padding-block:12px}
  .hero-inner .lede{margin-top:18px}
  .hero .btn-row{margin-top:26px}
  .btn-row{gap:10px}
  .btn-row .btn{flex:1 1 auto;justify-content:center}
  .hero-meta>div{padding:14px 15px}
  .shead{margin-bottom:30px}
  .foot{padding-top:52px}
  .foot-base{gap:6px;flex-direction:column}
}

/* Small phones. The gutter narrows before the type does. */
@media (max-width:380px){
  :root{--gutter:18px}
  .btn{padding-inline:18px;font-size:.89rem}
}

/* --- Modal on a phone ---------------------------------------------------- */
/* A sheet anchored to the bottom, sized in dvh so it fits whatever the
   browser chrome has left, and clear of the home indicator. */

@media (max-width:640px){
  .modal{padding:0;place-items:end stretch}
  .modal-card{
    inline-size:100%;
    max-block-size:92dvh;
    border-radius:14px 14px 0 0;
    border-bottom:0;
    padding:26px 20px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(24px);
  }
  .modal.is-open .modal-card{transform:none}
  .field-row{gap:16px}
}

/* Blur is expensive on mid-range phones and the veil reads fine without it. */
@media (max-width:640px),(pointer:coarse){
  .modal-veil{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,9,10,.88)}
  .nav.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,19,20,.97)}
}

/* --- Drawer -------------------------------------------------------------- */

.drawer{overflow-y:auto;overscroll-behavior:contain}
@media (max-height:560px) and (orientation:landscape){
  .drawer{justify-content:flex-start;padding-block:78px 24px}
  .drawer a{font-size:1.15rem;padding-block:7px}
}

/* --- Rendering ----------------------------------------------------------- */
/* content-visibility:auto was tried on the bands and taken back out. A section
   skipped for rendering has no box, so the reveal observer inside it can miss
   its entry on a fast scroll and the content stays at zero opacity. Correct
   beats cheap. Containment on the leaf components is kept, since those hold no
   reveal targets of their own. */

.division,.cat,.step,.assurance article,.certs>div,.theme{contain:layout style}

/* Scrolling inside an open sheet must not chain to the page behind it. */
.modal-card,.drawer{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* --- Hero scene on a phone ----------------------------------------------- */
/* There is no room beside a headline at 390px, so the scene sits behind the
   content. The veil is heavy where the type is and lifts toward the bottom,
   which is where the scenes put their brightest work. */

@media (max-width:760px){
  .hero-vignette{
    background:linear-gradient(to bottom,
      var(--ink) 0%,
      var(--ink) 25%,
      rgba(22,21,22,.88) 42%,
      rgba(22,21,22,.58) 64%,
      rgba(22,21,22,.34) 100%);
  }
  /* The meta panel would otherwise cover the liveliest part of the scene, so
     it goes translucent and lets it through. */
  .hero-meta{background:rgba(239,236,230,.1)}
  .hero-meta>div{background:rgba(30,28,30,.74)}
}