/* Skin: Resend design system (style-library/resend.md)
   Las Vegas Car Wraps — pitch site, re-skinned.

   Role mapping: canvas/surfaces are pure #000; every layer separates with a 1px
   #292d30 hairline, never a shadow. Headings are white, body is bone (#f0f0f0),
   metadata is ash (#a1a4a5). The shop's own logo orange (#ed7000) fills the
   accent role — small strings, markers, and identifiers only, like syntax
   highlighting; never large type, never fills. Type: serif display (Playfair
   Display, 400) for the hero statements, Inter 400 with tight -0.05em tracking
   for section heads, JetBrains Mono for labels, captions, and identifiers.
   Radius scale is two values: 6px (buttons, badges, inputs) and 16px (cards).

   COLOUR RULE: every literal value lives in :root. Components compose tokens only. */

:root{
  /* ---- primitives ---- */
  --bg:#000000;             /* void black canvas */
  --well:#000000;           /* behind photos */
  --surface:#000000;        /* cards sit on black; hairlines do the separating */
  --surface-2:#0b0e14;      /* subtle surface lift for hover states */
  --line:#292d30;           /* graphite hairline — defines every layer */
  --line-hi:#6e727a;        /* iron — raised border on hover */
  --ink:#ffffff;            /* headings, hero text, button labels */
  --text:#f0f0f0;           /* bone — the primary reading colour */
  --muted:#a1a4a5;          /* ash — metadata, captions, third-tier text */
  --faint:#6e727a;          /* legal lines, lowest-emphasis text */
  --orange:#ed7000;         /* their logo orange — the accent role */
  --orange-soft:#ff8b1f;    /* accent glow variant */
  --green:#3ad389;          /* supporting accent, unused chrome */
  --blue:#3b9eff;           /* focused / selected states */
  --on-orange:#000000;      /* dark text on orange (selection) */

  /* ---- ground alphas (nav + overlays) ---- */
  --bg-a88:rgba(0,0,0,.88);
  --bg-a94:rgba(0,0,0,.95);

  /* ---- elevation: none. Hairline borders only. ---- */
  --shadow-1:none;
  --shadow-glow:none;
  --shadow-hero:none;

  --ease:cubic-bezier(0,0,.2,1);   /* ease-out — hovers run at .15s */
  --disp:"Inter",system-ui,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.noanim{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--disp);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--text)}
::selection{background:var(--orange);color:var(--on-orange)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink);text-wrap:balance}
h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.04;font-size:clamp(2.7rem,7.6vw,6rem)}
h2{font-family:var(--disp);font-weight:400;letter-spacing:-.05em;line-height:1.2;font-size:clamp(1.9rem,4vw,3.1rem);margin-bottom:1.4rem}
h3{font-family:var(--disp);font-weight:500;letter-spacing:-.01em;line-height:1.3;font-size:clamp(1.1rem,1.7vw,1.3rem)}
/* the accent-word device is retired: emphasized words sit flush in the headline */
.acc{font:inherit;letter-spacing:inherit;color:inherit}
.marker{font-family:var(--mono);font-size:.8rem;color:var(--orange);display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.marker::before{content:"";width:34px;height:1px;background:var(--line-hi);flex:0 0 auto}
.prose{max-width:62ch;color:var(--muted)}
.prose strong{color:var(--text);font-weight:600}

/* micro-labels — terminal badges in mono */
.mlabel{
  font-family:var(--mono);
  font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}

/* ---------- nav ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:var(--bg-a88);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border-bottom:1px solid var(--line);
  transition:padding .35s var(--ease),background .35s var(--ease);
}
.bar-in{max-width:1200px;margin:0 auto;padding:.55rem clamp(16px,3vw,40px);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;transition:padding .35s var(--ease)}
.bar.condensed{background:var(--bg-a94)}
.bar.condensed .bar-in{padding-block:.2rem}
.bar.condensed .brand img{height:30px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.98rem;letter-spacing:0;min-height:44px}
.brand img{height:38px;width:auto;border-radius:6px;transition:height .35s var(--ease)}
.bar nav{display:flex;align-items:center;gap:.15rem;margin-left:auto;flex-wrap:wrap}
.bar nav a{
  text-decoration:none;color:var(--text);font-size:.875rem;font-weight:400;
  padding:.72rem .8rem;border-radius:6px;min-height:44px;display:inline-flex;align-items:center;
  transition:color .15s var(--ease);
}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current="page"]{color:var(--blue)}
.bar .call{
  font-family:var(--mono);font-size:.8125rem;font-weight:400;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:6px;
  padding:.72rem 1.15rem;margin-left:.5rem;white-space:nowrap;
  transition:border-color .15s var(--ease);
}
.bar .call:hover{background:transparent;border-color:var(--ink)}

/* ---------- buttons — ghost on black, always ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.85rem 1.7rem;border-radius:6px;text-decoration:none;
  font-weight:500;font-size:.95rem;letter-spacing:0;
  background:transparent;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.btn-primary{border:1px solid var(--line-hi);color:var(--ink)}
.btn-primary:hover{border-color:var(--ink)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--line-hi);color:var(--ink)}
.tlink{color:var(--text);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-hi);padding:.6rem 0 .15rem;min-height:44px;display:inline-flex;align-items:flex-end;transition:color .15s var(--ease),border-color .15s var(--ease)}
.tlink:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- photo treatment ----------
   The source photos are the client's own phone snapshots. Graded dark against
   the void; the base scrim keeps overlay captions legible. No new asset files. */
.shot{position:relative;overflow:hidden;background:var(--well);border-radius:16px;isolation:isolate}
.shot img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);
  filter:contrast(1.08) saturate(1.06) brightness(.94);
  transition:transform 1.2s var(--ease),opacity .4s var(--ease);
}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,0) 55%);
}

/* ---------- hero ---------- */
/* 68px header + ~96px for the pinned claim bar, so the finish chips are never
   hidden underneath it on a first-screen view. Canvas stays flat black —
   no blooms, no gradients. */
.hero{position:relative;min-height:calc(100dvh - 164px);display:flex;flex-direction:column;isolation:isolate}
.hero-main{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,4vw,4.5rem);max-width:1200px;width:100%;margin:0 auto;padding:clamp(3.2rem,5vh,4.2rem) clamp(20px,3.5vw,48px) .8rem}
.hero h1{margin:.7rem 0 1rem;font-size:clamp(2.6rem,6vw,4.8rem)}
.hero .lead{max-width:52ch;color:var(--text);font-size:clamp(1rem,1.35vw,1.125rem)}
.hero .btn-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.5rem}
.hero-note{font-size:.85rem;color:var(--muted);margin-top:1.2rem;max-width:52ch}
.hero-note b{color:var(--text);font-weight:600}
.hero .proof-card{max-width:580px;justify-self:end;width:100%}

/* proof card — the product, at size, in a hairline frame.
   Box is 1.9:1 — wide enough to crop the powerlines out of the Jaguar shot,
   tight enough that bmw-gloss (only 360px wide) never upscales past ~1.6x. */
.proof-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;overflow:hidden}
.proof-card .shot{aspect-ratio:1.9/1;border-radius:0}
.proof-card figcaption{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;padding:.95rem 1.15rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.proof-card figcaption b{color:var(--ink);font-weight:500}

/* finish chips — four real cars, four films, one click */
.chips{max-width:1200px;width:100%;margin:0 auto;padding:0 clamp(20px,3.5vw,48px) clamp(1.2rem,2.5vh,1.8rem)}
.chips-label{font-family:var(--mono);color:var(--muted);font-size:.78rem;margin-bottom:.7rem}
.chips-row{display:flex;gap:.7rem;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:.75rem;min-height:60px;padding:.5rem 1rem .5rem .55rem;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;cursor:pointer;
  color:var(--text);font-family:var(--disp);text-align:left;
  transition:border-color .15s var(--ease);
}
.chip img{width:52px;height:52px;object-fit:cover;border-radius:4px}
.chip small{display:block;font-family:var(--mono);color:var(--muted);font-size:.68rem;line-height:1.35}
.chip strong{font-size:.9rem;font-weight:500;line-height:1.2;display:block;color:var(--ink)}
.chip:hover{border-color:var(--line-hi)}
.chip[aria-pressed="true"]{border-color:var(--orange);background:var(--surface)}

/* ---------- trust bar ----------
   Every figure below is verified in mining-sheet.md. No invented numbers. */
.trust{border-block:1px solid var(--line);background:var(--surface)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.6rem);padding-block:clamp(2.6rem,5vw,3.6rem)}
.trust-item{border-left:1px solid var(--line);padding-left:clamp(.9rem,1.6vw,1.3rem)}
.trust-fig{
  display:block;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--ink);
  white-space:nowrap;   /* stop hyphenated figures like "In-house" splitting across lines */
}
.trust-item .mlabel{margin-top:.6rem;display:block}

/* ---------- sections ---------- */
section{padding-block:clamp(64px,9vw,96px)}
section.dense{padding-block:clamp(48px,7vw,72px)}
.band{background:var(--surface);border-block:1px solid var(--line)}
/* the work reel sits directly under the hero — let it hug rather than float */
.hero + section{padding-top:clamp(2rem,4.5vw,3.4rem)}
/* two stacked surface bands shouldn't show a doubled hairline */
.band + .trust{border-top:0}

/* receipts ledger */
.ledger{display:grid;gap:0;border-top:1px solid var(--line);margin-top:2.5rem}
.ledger-row{
  display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.4fr);gap:1.4rem;align-items:baseline;
  padding:1.6rem .4rem;border-bottom:1px solid var(--line);
  transition:background .15s var(--ease),padding-left .2s var(--ease);
}
.ledger-row:hover{background:var(--surface-2);padding-left:1rem}
.ledger-row .idx{font-family:var(--mono);color:var(--muted);font-size:.8rem}
.ledger-row h3{margin:0}
.ledger-row p{color:var(--muted);font-size:.95rem}
.badge-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.badge-row img{height:52px;width:auto;border-radius:6px;background:var(--text);padding:3px}
.client-names{display:flex;flex-wrap:wrap;gap:.5rem 0;margin-top:.6rem}
.client-names span{font-weight:500;font-size:.875rem;padding:.45rem .8rem;border:1px solid var(--line);border-radius:6px;margin-right:.5rem;color:var(--text)}

/* specimen rows */
.specimen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4.5vw,5rem);align-items:center;padding-block:3.4rem;border-top:1px solid var(--line)}
.specimen:first-of-type{border-top:0;padding-top:0}
.specimen.flip .spec-media{order:2}
.spec-media{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:border-color .15s var(--ease)}
.spec-media .shot{aspect-ratio:16/9;border-radius:0}
.specimen:hover .spec-media{border-color:var(--line-hi)}
.specimen:hover .spec-media img{transform:scale(1.03)}
.spec-num{font-family:var(--mono);color:var(--muted);font-size:.8rem}
.spec-meta{font-family:var(--mono);color:var(--muted);font-size:.75rem;display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.spec-meta span+span::before{content:"·";margin-right:.6rem;color:var(--orange)}
.specimen p{color:var(--muted)}
.specimen .tlink{margin-top:1.1rem}

/* ---------- homepage work reel ----------
   The portfolio belongs on the homepage, not behind a nav click. */
.reel{position:relative;overflow:hidden;margin-top:2.6rem;
  -webkit-mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);
  mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent)}
.reel-track{display:flex;gap:14px;width:max-content;animation:reelDrift 64s linear infinite}
.reel:hover .reel-track,.reel:focus-within .reel-track{animation-play-state:paused}
.reel figure{width:clamp(240px,26vw,340px);flex:0 0 auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:border-color .15s var(--ease)}
.reel figure:hover{border-color:var(--line-hi)}
.reel .shot{aspect-ratio:16/10;border-radius:0}
.reel figcaption{padding:.7rem .9rem;font-family:var(--mono);font-size:.7rem;color:var(--muted);border-top:1px solid var(--line)}
.reel figcaption b{color:var(--ink);font-weight:500;display:block;font-size:.75rem}
@keyframes reelDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* services ledger */
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:2.4rem}
.svc-cols h3{margin-bottom:1rem;color:var(--ink)}
.svc-list{list-style:none}
.svc-list li{
  display:flex;align-items:center;gap:.9rem;padding:.8rem .2rem;border-bottom:1px solid var(--line);
  font-weight:500;font-size:.98rem;transition:padding-left .15s var(--ease),color .15s var(--ease);
}
.svc-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-hi);transition:background .15s var(--ease);flex:0 0 auto}
.svc-list li:hover{padding-left:.85rem;color:var(--ink)}
.svc-list li:hover::before{background:var(--orange)}

/* shop / gate */
.gate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.gate-grid .spec-media .shot{aspect-ratio:4/3}
/* directions read like a terminal window: black, hairline, mono */
.gate-plate{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:1.5rem 1.7rem;margin-top:1.6rem}
.gate-plate p{font-family:var(--mono);color:var(--muted);font-size:.8rem;line-height:1.7}
.gate-plate b{color:var(--text);font-weight:500}
address{font-style:normal;color:var(--muted)}

/* ---------- gallery mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:2.6rem}
.mosaic figure{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:border-color .15s var(--ease)}
.mosaic figure:hover{border-color:var(--line-hi)}
.mosaic .w3{grid-column:span 3}
.mosaic .w2{grid-column:span 2}
.mosaic .w4{grid-column:span 4}
.mosaic .w6{grid-column:span 6}
/* 2:1 is wider than every source photo, so the crop bites vertically and --pos
   can pull each tile onto its subject instead of onto sky and asphalt */
.mosaic .shot{aspect-ratio:2/1;border-radius:0}
.mosaic figure:hover img{transform:scale(1.03)}
.mosaic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem .8rem;font-family:var(--mono);font-size:.72rem;color:var(--text);
  pointer-events:none;
}
.mosaic figcaption b{color:var(--ink);font-weight:500}
/* the whole tile is the lightbox trigger */
.lb-open{position:absolute;inset:0;z-index:2;border:0;background:none;cursor:zoom-in;padding:0;font:inherit;color:transparent}
.lb-open:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:2147483100;display:none;align-items:center;justify-content:center;
  background:var(--bg-a94);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);padding:clamp(1rem,4vw,3rem)}
.lb[open],.lb.on{display:flex}
.lb-fig{max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:.9rem}
.lb-fig img{max-height:76vh;width:auto;max-width:100%;object-fit:contain;border-radius:16px;border:1px solid var(--line);background:var(--well)}
.lb-cap{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:center}
.lb-cap b{color:var(--ink);font-weight:500}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:6px;border:1px solid var(--line);background:var(--bg-a88);
  color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s var(--ease);
}
.lb-btn:hover{border-color:var(--ink)}
.lb-prev{left:clamp(.5rem,2vw,2rem)}
.lb-next{right:clamp(.5rem,2vw,2rem)}
.lb-close{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);transform:none}

/* page hero (interior) */
.page-head{padding:clamp(4.2rem,9vh,7rem) 0 0}
/* a page head already supplies the breathing room; don't stack a full section pad on top */
.page-head + section,.page-head + .trust + section,
.page-hero + section,.page-hero + .trust + section{padding-top:clamp(2.4rem,5vw,3.6rem)}

/* interior pages get the homepage's photo-led treatment, at a shorter height.
   Canvas stays flat black — no blooms. */
.page-hero{position:relative;isolation:isolate;padding:clamp(3rem,7vh,5rem) 0 clamp(2.6rem,5vw,4rem)}
.page-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(2rem,4vw,4.5rem);
  max-width:1200px;margin:0 auto;padding-inline:clamp(20px,3.5vw,48px)}
/* deliberately below the homepage hero's size — the interior pages should not
   out-shout the front door */
.page-hero h1{margin:.6rem 0 1rem;font-size:clamp(2.4rem,5vw,4rem)}
.page-hero .lead{max-width:52ch;color:var(--text);font-size:clamp(1rem,1.4vw,1.125rem)}
.page-hero .proof-card{max-width:580px;width:100%;justify-self:end}
.page-hero .btn-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem}
@media (max-width:1024px){
  .page-hero-in{grid-template-columns:1fr;gap:2.2rem}
  .page-hero .proof-card{justify-self:start}
}
.page-head .lead{max-width:58ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.125rem);margin-top:1.2rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,5vw,5rem)}
.big-phone{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:inline-block;padding:.3rem 0;border-bottom:1px solid var(--orange);transition:color .15s var(--ease)}
.big-phone:hover{color:var(--orange-soft)}
.contact-lines{margin-top:2rem;display:grid;gap:1.1rem}
.contact-lines .row{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:1.1rem}
.contact-lines .row .k{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.contact-lines a{min-height:40px;display:inline-flex;align-items:center}
.qform{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:clamp(1.4rem,3vw,2rem)}
.qform label{display:block;font-weight:500;font-size:.875rem;margin:1.1rem 0 .4rem;color:var(--text)}
.qform input,.qform textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-family:var(--disp);font-size:1rem;padding:.85rem .95rem;min-height:48px;
}
.qform input:focus,.qform textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.qform button{cursor:pointer;width:100%;margin-top:1.4rem;font-family:var(--disp)}
.qform .note{font-size:.82rem;color:var(--muted);margin-top:.9rem}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--surface);padding:clamp(3.5rem,7vh,5.5rem) 0 2.2rem}
.foot-call{font-family:var(--mono);color:var(--muted);font-size:.8rem}
.foot-phone{display:inline-block;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(2.4rem,7vw,5.4rem);line-height:1;color:var(--ink);text-decoration:none;margin:.6rem 0 1rem;transition:color .15s var(--ease)}
.foot-phone:hover{color:var(--orange-soft)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.foot-grid h3{font-size:.95rem;font-weight:500;margin-bottom:.8rem;color:var(--ink)}
.foot-grid a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:40px;transition:color .15s var(--ease)}
.foot-grid a:hover{color:var(--text)}
.foot-grid ul{list-style:none}
.foot-grid p{color:var(--muted);font-size:.95rem}
.foot-badges{display:flex;gap:.8rem;align-items:center;margin-top:.9rem}
.foot-badges img{height:40px;width:auto;background:var(--text);border-radius:5px;padding:2px}
.foot-legal{margin-top:2.6rem;color:var(--faint);font-size:.82rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* email addresses read like identifiers: mono, accent-marked */
.foot-grid a[href^="mailto:"],.contact-lines a[href^="mailto:"]{font-family:var(--mono);font-size:.9em;color:var(--orange)}

/* ---------- entrances ---------- */
html.anim .rv{opacity:0;transform:translateY(26px);filter:blur(10px)}
html.anim .rv.in{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
html.anim .rv.d1.in{transition-delay:.12s}
html.anim .rv.d2.in{transition-delay:.24s}
html.anim .rv.d3.in{transition-delay:.36s}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-main{grid-template-columns:1fr;align-content:center;gap:2.2rem;padding-top:5rem}
  .hero .proof-card{max-width:580px;justify-self:start}
}
@media (max-width:900px){
  .specimen,.gate-grid,.contact-grid,.svc-cols{grid-template-columns:1fr}
  .specimen.flip .spec-media{order:0}
  .ledger-row{grid-template-columns:52px minmax(0,1fr)}
  .ledger-row p{grid-column:2}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
}
@media (max-width:768px){
  .mosaic{grid-template-columns:1fr 1fr;gap:10px}
  .mosaic .w2,.mosaic .w3,.mosaic .w4,.mosaic .w6{grid-column:span 2}
  .lb-btn{width:46px;height:46px}
}
@media (max-width:640px){
  .call-lead{display:none}
  /* three tight rows (brand / links / call) instead of the nav wrapping into five —
     the header was eating ~40% of a phone screen before the hero got a word in */
  .bar nav{width:100%;margin-left:0;gap:0;justify-content:space-between}
  .bar nav a{padding:.6rem .35rem;font-size:.85rem}
  .bar .call{width:100%;margin:.35rem 0 0;justify-content:center;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  /* the claim bar is ~280px tall on a phone; let the hero be content-sized and scroll */
  .hero{min-height:0;padding-bottom:1.2rem}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .chips-row{flex-direction:column;align-items:stretch}
  .contact-lines .row{grid-template-columns:1fr;gap:.15rem}
}

/* reduced motion (system-level) — everything readable, nothing moves */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html .rv{opacity:1!important;transform:none!important;filter:none!important}
  html{scroll-behavior:auto}
  .reel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .reel-track{width:auto}
}
html.noanim *,html.noanim *::before,html.noanim *::after{animation:none!important;transition:none!important}
html.noanim .reel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html.noanim .reel-track{width:auto}