/* Avid Inventions — v5
   Drafting-sheet system. Paper, ink, and CAD layer colours.
   Cut red and bend blue are the two accents; both carry meaning.
*/

:root{
  --paper:    #F7F7F4;
  --sheet:    #FFFFFF;
  --ink:      #14161A;
  --graphite: #5B6169;
  --faint:    #8B9099;
  --rule:     #DAD9D2;
  --rule-soft:#EAE9E3;
  --cut:      #C9382A;
  --cut-soft: rgba(201,56,42,.10);
  --bend:     #2C6BA6;
  --bend-soft:rgba(44,107,166,.10);
  --dark:     #101317;

  --max: 1180px;
  --pad: clamp(18px, 2.4vw, 30px);
  --r: 4px;

  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --body:    "Archivo", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --h1: clamp(36px, 5.4vw, 68px);
  --h2: clamp(25px, 3.3vw, 40px);
  --h3: clamp(17px, 1.6vw, 21px);
  --p:  clamp(15px, 1.15vw, 17px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--p); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); letter-spacing:-.022em; line-height:1.08; margin:0; font-weight:700; }
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); letter-spacing:-.012em; line-height:1.3; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

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

.wrap{ max-width:var(--max); width:calc(100% - 2*var(--pad)); margin:0 auto; }
.sec{ padding:clamp(58px,7vw,104px) 0; }
.sec-t{ padding:clamp(42px,5vw,72px) 0; }
.bleed-rule{ border-top:1px solid var(--rule); }

/* ── technical annotation ─────────────────────────────────────────── */
.tag{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
}
.tag-cut{ color:var(--cut); }
.tag-bend{ color:var(--bend); }

.callout{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--graphite);
}
.callout::before{
  content:""; width:22px; height:1px; background:var(--cut); flex:none;
}

.lead{ font-size:clamp(16px,1.4vw,19px); color:var(--graphite); max-width:62ch; }
.muted{ color:var(--graphite); }
.small{ font-size:14px; }

/* ── header ───────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(247,247,244,.88); -webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav{ display:flex; align-items:center; gap:20px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; }
.brand svg{ width:30px; height:30px; flex:none; }
.brand span{ font-family:var(--display); }
.navlinks{ display:none; margin-left:auto; gap:26px; align-items:center; }
.navlinks a{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); padding:6px 0;
  border-bottom:1px solid transparent;
}
.navlinks a:hover{ color:var(--ink); border-bottom-color:var(--cut); }
.navlinks a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--cut); }
.nav .btn{ margin-left:auto; }
.navlinks + .btn{ margin-left:0; }
.burger{ margin-left:auto; }
.drawer[hidden]{ display:none; }
.drawer{ display:grid; gap:2px; padding:10px 0 18px; border-top:1px solid var(--rule); }
.drawer a{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; padding:11px 2px; border-bottom:1px solid var(--rule-soft);
}
@media (min-width:900px){
  .navlinks{ display:flex; }
  .nav .burger{ display:none; }
  .drawer, .drawer[hidden]{ display:none !important; }
}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  padding:11px 17px; border:1px solid var(--ink); border-radius:var(--r);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn.solid:hover{ background:var(--cut); border-color:var(--cut); }
.btn.ghost{ border-color:var(--rule); color:var(--graphite); }
.btn.ghost:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn svg{ width:14px; height:14px; flex:none; }

/* ── title block — the signature device ───────────────────────────── */
.tblock{
  border:1px solid var(--ink); border-radius:var(--r); background:var(--sheet);
  display:grid; grid-template-columns:repeat(2,1fr); overflow:hidden;
}
@media (min-width:760px){ .tblock{ grid-template-columns:repeat(4,1fr); } }
.tblock .cell{ padding:12px 14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.tblock .cell:nth-child(2n){ border-right:0; }
@media (min-width:760px){
  .tblock .cell{ border-right:1px solid var(--rule); }
  .tblock .cell:nth-child(2n){ border-right:1px solid var(--rule); }
  .tblock .cell:nth-child(4n){ border-right:0; }
}
.tblock .cell:last-child{ border-right:0; }
.tblock .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); display:block; margin-bottom:5px;
}
.tblock .v{ font-family:var(--mono); font-size:12.5px; color:var(--ink); font-weight:500; line-height:1.45; word-break:break-word; }

/* ── cards ────────────────────────────────────────────────────────── */
.card{
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(18px,2vw,24px); position:relative;
}
.card.edge{ border-left:2px solid var(--cut); }
.card.edge-b{ border-left:2px solid var(--bend); }
.card h3{ margin:0 0 8px; }
.card p{ color:var(--graphite); font-size:15px; }
.card .tag{ display:block; margin-bottom:12px; }

.grid2{ display:grid; gap:14px; grid-template-columns:1fr; }
.grid3{ display:grid; gap:14px; grid-template-columns:1fr; }
.grid4{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (min-width:720px){ .grid2{ grid-template-columns:1fr 1fr; } .grid3{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .grid3{ grid-template-columns:repeat(3,1fr); } .grid4{ grid-template-columns:repeat(4,1fr); } }

/* ── spec list: dimension-line styling ────────────────────────────── */
.spec{ list-style:none; margin:0; padding:0; }
.spec li{
  display:flex; gap:14px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--rule-soft);
  font-size:15px;
}
.spec li:last-child{ border-bottom:0; }
.spec .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); flex:none; width:104px;
}
.spec .val{ color:var(--ink); }
.spec .lbl:empty{ visibility:hidden; }   /* holds the column so rows stay aligned */

/* comparison marks */
.mark{ flex:none; width:20px; font-family:var(--mono); font-size:14px; line-height:1.5; }
.mark.no{ color:var(--faint); }
.mark.yes{ color:var(--cut); }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{ padding:clamp(38px,5vw,64px) 0 clamp(28px,4vw,48px); }
.heroGrid{ display:grid; gap:clamp(26px,3.5vw,44px); grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px){ .heroGrid{ grid-template-columns:1.02fr .98fr; } }
.hero h1{ margin:16px 0 0; }
.hero .lead{ margin-top:18px; }
.ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

/* drawing frame */
.dwg{
  background:var(--sheet); border:1px solid var(--ink); border-radius:var(--r);
  position:relative; overflow:hidden;
}
.dwg .dwgTop{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 13px; border-bottom:1px solid var(--rule);
}
.dwg .dwgBody{ padding:8px; }
.dwg svg{ display:block; width:100%; height:auto; }
.legend{
  display:flex; flex-wrap:wrap; gap:16px; padding:10px 13px;
  border-top:1px solid var(--rule);
}
.legend span{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--graphite);
}
.legend i{ width:14px; height:2px; display:block; border-radius:2px; }

/* self-drawing part lines */
.draws path, .draws circle, .draws line, .draws polyline{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.1s cubic-bezier(.6,.05,.2,1) forwards;
}
.draws .d2{ animation-delay:.35s; }
.draws .d3{ animation-delay:.7s; }
.draws .d4{ animation-delay:1.0s; }
.draws text{ opacity:0; animation:fade .6s ease forwards; animation-delay:1.3s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .draws path,.draws circle,.draws line,.draws polyline{ animation:none; stroke-dashoffset:0; }
  .draws text{ animation:none; opacity:1; }
}

/* ── dark panel ───────────────────────────────────────────────────── */
.dark{ background:var(--dark); color:#EDEFF2; }
.dark h2,.dark h3{ color:#FFF; }
.dark .lead,.dark p{ color:#A7AEB8; }
.dark .tag{ color:#79818C; }
.dark .card{ background:#171B21; border-color:#252A32; }
.dark .card p{ color:#A7AEB8; }
.dark .spec li{ border-bottom-color:#252A32; }
.dark .spec .val{ color:#EDEFF2; }
.dark .btn{ border-color:#3A414B; color:#EDEFF2; }
.dark .btn:hover{ background:#EDEFF2; color:var(--dark); }
.dark .btn.solid{ background:#EDEFF2; color:var(--dark); border-color:#EDEFF2; }
.dark .btn.solid:hover{ background:var(--cut); border-color:var(--cut); color:#fff; }
.dark .tblock{ border-color:#3A414B; background:#171B21; }
.dark .tblock .cell{ border-color:#252A32; }
.dark .tblock .v{ color:#EDEFF2; }
.dark .callout{ color:#A7AEB8; }

/* ── code block ───────────────────────────────────────────────────── */
.code{
  background:#0C0F13; color:#C9D1D9; border:1px solid #252A32; border-radius:var(--r);
  padding:16px 18px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.75; margin:0;
}
.code .c{ color:#6E7681; }
.code .g{ color:#5FD3A6; }
.code .r{ color:#E5705F; }
.code .b{ color:#79B8E8; }

/* ── flow strip ───────────────────────────────────────────────────── */
.flow{ display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--sheet); }
@media (min-width:860px){ .flow{ grid-template-columns:repeat(5,1fr); } }
.flow .step{ padding:18px 16px; border-bottom:1px solid var(--rule); }
.flow .step:last-child{ border-bottom:0; }
@media (min-width:860px){
  .flow .step{ border-bottom:0; border-right:1px solid var(--rule); }
  .flow .step:last-child{ border-right:0; }
}
.flow .n{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--cut); display:block; margin-bottom:9px; }
.flow .t{ font-weight:600; font-size:15px; display:block; margin-bottom:5px; }
.flow .d{ font-size:13.5px; color:var(--graphite); }

/* ── stat rail ────────────────────────────────────────────────────── */
.rail{ display:grid; gap:0; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:820px){ .rail{ grid-template-columns:repeat(4,1fr); } }
.rail .it{ padding:20px 18px 20px 0; border-right:1px solid var(--rule); }
.rail .it:nth-child(2n){ border-right:0; padding-left:18px; }
@media (min-width:820px){
  .rail .it{ border-right:1px solid var(--rule); padding-left:0; }
  .rail .it:nth-child(2n){ border-right:1px solid var(--rule); padding-left:18px; }
  .rail .it:not(:first-child){ padding-left:18px; }
  .rail .it:last-child{ border-right:0; }
}
.rail .num{ font-family:var(--display); font-size:clamp(26px,3vw,36px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.rail .cap{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:8px; display:block; }

/* ── notice ───────────────────────────────────────────────────────── */
.notice{
  border:1px solid var(--rule); border-left:2px solid var(--bend);
  background:var(--sheet); border-radius:var(--r); padding:16px 18px;
}
.notice .tag{ display:block; margin-bottom:7px; }
.notice p{ font-size:14.5px; color:var(--graphite); }

/* ── form ─────────────────────────────────────────────────────────── */
.field{ display:block; margin-bottom:14px; }
.field .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:6px; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r);
  padding:11px 13px;
}
.field textarea{ min-height:130px; resize:vertical; }

/* ── footer ───────────────────────────────────────────────────────── */
.ftr{ border-top:1px solid var(--rule); padding:clamp(34px,4vw,52px) 0 30px; }
.ftrGrid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:860px){ .ftrGrid{ grid-template-columns:1.5fr 1fr; } }
.ftrLinks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; }
.ftrLinks a{ font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--graphite); padding:4px 0; }
.ftrLinks a:hover{ color:var(--cut); }
.copy{ margin-top:26px; padding-top:18px; border-top:1px solid var(--rule-soft); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:99; background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:var(--r); }

/* ═══ v6 additions ═══════════════════════════════════════════════════ */

/* illustrations */
.ill{ display:block; width:100%; height:auto; }
.illbox{
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r);
  padding:10px; overflow:hidden;
}
.illbox.tight{ padding:4px; }
.dark .illbox{ background:#12161B; border-color:#252A32; }
.dark .illbox .ill [stroke="#E4E3DD"]{ stroke:#232830; }

/* scroll reveal */
/* .rv retained as a hook only — no reveal animation. Content is never hidden. */

/* alternating product rows */
.prow{ display:grid; gap:clamp(22px,3vw,44px); grid-template-columns:1fr; align-items:center; padding:clamp(30px,4vw,56px) 0; border-top:1px solid var(--rule); }
.prow:first-of-type{ border-top:0; }
@media (min-width:940px){
  .prow{ grid-template-columns:1fr 1.06fr; }
  .prow.flip .pcopy{ order:2; }
  .prow.flip .part{ order:1; }
}
.prow h3{ font-size:clamp(21px,2.4vw,29px); letter-spacing:-.02em; margin:12px 0 12px; }
.prow p{ color:var(--graphite); max-width:52ch; }
.pmeta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pill{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--rule); border-radius:99px; color:var(--graphite);
}
.pill.live{ border-color:var(--cut); color:var(--cut); }
.dark .pill{ border-color:#2E3540; color:#A7AEB8; }
.dark .pill.live{ border-color:var(--cut); color:#F0857A; }

/* industry cards */
.ind{ background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.ind .art{ border-bottom:1px solid var(--rule); padding:8px; }
.ind .body{ padding:18px 20px 22px; flex:1; }
.ind h3{ margin:0 0 8px; }
.ind p{ color:var(--graphite); font-size:14.5px; }
.ind .foot{ margin-top:14px; padding-top:13px; border-top:1px solid var(--rule-soft); }

/* equipment grid */
.eq{ background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.eq .art{ border-bottom:1px solid var(--rule); padding:6px; }
.eq .body{ padding:14px 16px 18px; }
.eq h3{ font-size:16px; margin:0 0 5px; }
.eq p{ font-size:13.5px; color:var(--graphite); }

/* section head */
.shead{ max-width:64ch; }
.shead h2{ margin:14px 0 0; }
.shead .lead{ margin-top:16px; }

/* two-up split */
.split{ display:grid; gap:clamp(24px,3.4vw,52px); grid-template-columns:1fr; align-items:start; }
@media (min-width:940px){ .split{ grid-template-columns:1fr 1fr; } }
.split.wide-l{ grid-template-columns:1fr; }
@media (min-width:940px){ .split.wide-l{ grid-template-columns:1.15fr .85fr; } }

/* quiet band */
.band{ background:var(--sheet); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

/* number list */
.nlist{ list-style:none; margin:0; padding:0; counter-reset:n; }
.nlist li{ counter-increment:n; display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule-soft); }
.nlist li:last-child{ border-bottom:0; }
.nlist li::before{
  content:counter(n,decimal-leading-zero); font-family:var(--mono); font-size:11px;
  color:var(--cut); flex:none; width:26px; padding-top:3px; letter-spacing:.06em;
}
.nlist strong{ display:block; margin-bottom:4px; font-weight:600; }
.nlist span{ color:var(--graphite); font-size:14.5px; }

/* horizontal rail on mobile */
.hrail{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (max-width:719px){
  .hrail{
    grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
    margin-inline:calc(-1*var(--pad)); padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .hrail::-webkit-scrollbar{ display:none; }
  .hrail > *{ scroll-snap-align:start; }
}
@media (min-width:720px){ .hrail{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .hrail.c3{ grid-template-columns:repeat(3,1fr); } }

/* CTA band */
.cta{ padding:clamp(48px,6vw,84px) 0; }
.cta h2{ max-width:20ch; }

/* mobile polish */
@media (max-width:719px){
  .ctas .btn{ flex:1 1 auto; justify-content:center; }
  .rail .it{ padding:16px 12px 16px 0; }
  .tblock .cell{ padding:11px 12px; }
  .hero{ padding-top:26px; }
}

/* ═══ v7 — depth, texture, presence ══════════════════════════════════ */

/* the page itself is a drafting sheet */
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(20,22,26,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,26,.030) 1px, transparent 1px),
    linear-gradient(rgba(20,22,26,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,26,.055) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 130px 130px, 130px 130px;
  background-position:-1px -1px;
}

/* type gets more presence */
:root{
  --h1: clamp(40px, 6.4vw, 82px);
  --h2: clamp(27px, 3.9vw, 47px);
}
h1{ letter-spacing:-.035em; line-height:1.0; }
h2{ letter-spacing:-.028em; line-height:1.06; }
.hero h1{ margin-top:20px; }
.hero .lead{ font-size:clamp(16px,1.55vw,20px); }

/* cards lift off the sheet */
.card,.ind,.eq,.illbox,.dwg,.flow,.notice,.tblock{
  box-shadow:0 1px 2px rgba(20,22,26,.04), 0 8px 26px -14px rgba(20,22,26,.14);
}
.card,.ind,.eq{ transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease; }
@media (hover:hover){
  .card:hover,.ind:hover,.eq:hover{
    transform:translateY(-3px);
    box-shadow:0 2px 4px rgba(20,22,26,.05), 0 18px 40px -20px rgba(20,22,26,.28);
    border-color:#C8C7BF;
  }
}
.dark .card{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -18px rgba(0,0,0,.8); }
@media (hover:hover){ .dark .card:hover{ border-color:#39414D; } }

/* opaque surfaces sit above the grid */
.band{ background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.card,.ind,.eq,.illbox,.dwg,.flow,.notice,.tblock{ background:var(--sheet); }

/* dark sections get atmosphere */
.dark{
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(201,56,42,.16), transparent 62%),
    radial-gradient(760px 400px at 88% 108%, rgba(44,107,166,.16), transparent 60%),
    var(--dark);
  position:relative;
}
.dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:130px 130px, 130px 130px;
}
.dark > *{ position:relative; z-index:1; }

/* headings get a struck rule, like a drawing callout */
.shead h2::after, .hero h1::after{
  content:""; display:block; width:60px; height:3px; margin-top:22px;
  background:var(--cut); border-radius:2px;
}
.dark .shead h2::after{ background:var(--cut); }

/* eyebrow gets weight */
.callout{ font-size:11.5px; letter-spacing:.19em; color:var(--ink); font-weight:500; }
.callout::before{ width:28px; height:2px; }
.dark .callout{ color:#E6EDF6; }

/* illustration boxes get a tinted well */
.illbox{
  background:
    linear-gradient(180deg, rgba(201,56,42,.028), rgba(255,255,255,0) 46%),
    var(--sheet);
}
.dark .illbox{
  background:linear-gradient(180deg, rgba(44,107,166,.10), rgba(0,0,0,0) 50%), #12161B;
}

/* stat rail becomes a feature */
.rail .num{ font-size:clamp(34px,4.4vw,54px); letter-spacing:-.045em; }
.rail .it:first-child .num{ color:var(--cut); }

/* buttons get more body */
.btn{ padding:13px 20px; font-size:12.5px; letter-spacing:.1em; }
.btn.solid{ box-shadow:0 6px 18px -8px rgba(20,22,26,.55); }
.btn.solid:hover{ box-shadow:0 8px 22px -8px rgba(201,56,42,.55); transform:translateY(-1px); }

/* pills read brighter */
.pill{ background:var(--sheet); }
.pill.live{ background:var(--cut-soft); font-weight:500; }

/* drawing frame gets a mat */
.dwg{ border-width:1px; }
.dwg .dwgBody{ background:#FCFCFA; border-radius:2px; padding:12px; }

/* flow steps alternate tint */
.flow .step:nth-child(odd){ background:rgba(201,56,42,.018); }
.dark .flow .step:nth-child(odd){ background:rgba(255,255,255,.02); }

/* section rhythm */
.sec{ padding:clamp(70px,8vw,124px) 0; }
.hero{ padding:clamp(46px,6vw,84px) 0 clamp(34px,4vw,56px); }

/* product rows get a hairline index */
.prow{ position:relative; }
.prow .pcopy h3{ font-size:clamp(24px,2.9vw,36px); }

/* footer sits on a sheet */
.ftr{ background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

@media (max-width:719px){
  body{ background-size:22px 22px, 22px 22px, 110px 110px, 110px 110px; }
  .shead h2::after, .hero h1::after{ margin-top:18px; width:48px; }
}

/* ═══ v8 — surfaces, colour, density ═════════════════════════════════ */

:root{
  --blue-deep:#0E2E4A;
  --blue-mid:#16436B;
  --cyan:#7FD8FF;
  --sand:#F1EEE6;
  --sand-2:#EAE5D9;
}

/* paired title block — wide cells so emails and place names never split */
@media (min-width:620px){
  .tblock.pair{ grid-template-columns:1fr 1fr; }
  .tblock.pair .cell:nth-child(2n){ border-right:0; }
  .tblock.pair .cell:nth-child(4n){ border-right:0; }
}
.tblock .v{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tblock.pair .v{ white-space:normal; word-break:normal; overflow-wrap:anywhere; }
.tblock .v a{ border-bottom:1px solid var(--cut); }
.dark .tblock .v a,.blueprint .tblock .v a{ border-bottom-color:var(--cyan); }

/* ── warm sand surface ───────────────────────────────────────────── */
.tint{
  background:
    radial-gradient(760px 380px at 88% 0%, rgba(201,56,42,.07), transparent 62%),
    linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}

/* ── cyanotype blueprint surface ─────────────────────────────────── */
.blueprint{
  background:
    radial-gradient(880px 460px at 8% -10%, rgba(127,216,255,.16), transparent 60%),
    radial-gradient(700px 420px at 96% 110%, rgba(201,56,42,.14), transparent 58%),
    linear-gradient(165deg, var(--blue-mid) 0%, var(--blue-deep) 62%, #0A2439 100%);
  color:#E4F1FA; position:relative; overflow:hidden;
}
.blueprint::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
}
.blueprint > *{ position:relative; z-index:1; }
.blueprint h1,.blueprint h2,.blueprint h3{ color:#FFF; }
.blueprint p,.blueprint .lead{ color:#B9D4E6; }
.blueprint .callout{ color:#FFF; }
.blueprint .callout::before{ background:var(--cyan); }
.blueprint .tag{ color:#8FB4CC; }
.blueprint .shead h2::after{ background:var(--cyan); }
.blueprint .card{
  background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -22px rgba(0,0,0,.85);
}
.blueprint .card p{ color:#B9D4E6; }
@media (hover:hover){ .blueprint .card:hover{ border-color:rgba(127,216,255,.55); } }
.blueprint .spec li{ border-bottom-color:rgba(255,255,255,.14); }
.blueprint .spec .val{ color:#E4F1FA; }
.blueprint .spec .lbl{ color:#7FA6C0; }
.blueprint .btn{ border-color:rgba(255,255,255,.4); color:#FFF; }
.blueprint .btn:hover{ background:#FFF; color:var(--blue-deep); }
.blueprint .btn.solid{ background:var(--cyan); border-color:var(--cyan); color:#062033; font-weight:500; }
.blueprint .btn.solid:hover{ background:#FFF; border-color:#FFF; }
.blueprint .tblock{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.28); }
.blueprint .tblock .cell{ border-color:rgba(255,255,255,.16); }
.blueprint .tblock .k{ color:#7FA6C0; }
.blueprint .tblock .v{ color:#FFF; }
.blueprint .illbox{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.2); }

/* drawings re-render as blueprints — presentation attrs lose to CSS */
.blueprint .ill [stroke="#E4E3DD"]{ stroke:rgba(255,255,255,.16); }
.blueprint .ill [stroke="#C9382A"]{ stroke:#FFFFFF; }
.blueprint .ill [stroke="#2C6BA6"]{ stroke:var(--cyan); }
.blueprint .ill [stroke="#5B6169"]{ stroke:rgba(255,255,255,.6); }
.blueprint .ill [stroke="#8B9099"]{ stroke:rgba(255,255,255,.45); }
.blueprint .ill [stroke="#14161A"]{ stroke:rgba(255,255,255,.9); }
.blueprint .ill [fill="#C9382A"]{ fill:#FFFFFF; }
.blueprint .ill [fill="#2C6BA6"]{ fill:var(--cyan); }
.blueprint .ill [fill="#5B6169"]{ fill:rgba(255,255,255,.7); }
.blueprint .ill [fill="#8B9099"]{ fill:rgba(255,255,255,.5); }

/* dark surface: cooler, deeper */
.dark .ill [stroke="#E4E3DD"]{ stroke:rgba(255,255,255,.10); }
.dark .ill [stroke="#5B6169"]{ stroke:rgba(255,255,255,.5); }
.dark .ill [stroke="#8B9099"]{ stroke:rgba(255,255,255,.38); }
.dark .ill [stroke="#14161A"]{ stroke:rgba(255,255,255,.8); }
.dark .ill [fill="#5B6169"]{ fill:rgba(255,255,255,.62); }
.dark .ill [fill="#8B9099"]{ fill:rgba(255,255,255,.45); }

/* illustration wells get real colour */
.illbox{
  background:
    radial-gradient(420px 220px at 82% 6%, rgba(44,107,166,.09), transparent 64%),
    radial-gradient(360px 200px at 8% 96%, rgba(201,56,42,.075), transparent 62%),
    var(--sheet);
}
.ind .art, .eq .art{
  background:
    radial-gradient(300px 160px at 88% 4%, rgba(44,107,166,.10), transparent 66%),
    linear-gradient(180deg, rgba(201,56,42,.05), rgba(255,255,255,0) 58%);
}

/* hero drawing frame — deeper mat, coloured rim */
.dwg{ border-color:var(--ink); }
.dwg .dwgTop{ background:linear-gradient(180deg, rgba(201,56,42,.06), transparent); }
.dwg .dwgBody{
  background:
    radial-gradient(520px 260px at 84% 8%, rgba(44,107,166,.08), transparent 62%),
    #FCFCFA;
}

/* alternate product rows sit on a tinted card */
.prow .part{ position:relative; }
.prow:nth-of-type(even) .illbox{
  background:
    radial-gradient(420px 220px at 18% 8%, rgba(44,107,166,.11), transparent 62%),
    radial-gradient(360px 200px at 92% 92%, rgba(201,56,42,.06), transparent 60%),
    var(--sheet);
}

/* stat rail: colour the numerals */
.rail .it:nth-child(1) .num{ color:var(--cut); }
.rail .it:nth-child(3) .num{ color:var(--bend); }

/* pills get colour by state */
.pill.live{ background:var(--cut-soft); border-color:rgba(201,56,42,.4); color:var(--cut); }
.blueprint .pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#CFE4F2; }

/* code block warms up */
.code{ background:linear-gradient(160deg,#101820,#0A0D11); border-color:#243040; }

/* section rhythm helpers */
.sec.blueprint{ padding:clamp(74px,8.4vw,132px) 0; }

/* ═══ v9 — photographic layer ════════════════════════════════════════ */

.photo{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r);
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(44,107,166,.22), transparent 62%),
    linear-gradient(150deg,#1A2029 0%,#0D1116 100%);
  isolation:isolate;
}
.photo::after{           /* grain — keeps flat renders from looking synthetic */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:.20; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  position:relative; z-index:1;
  filter:saturate(.72) contrast(1.06);
  transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.photo .grade{           /* cool duotone wash + vignette */
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(8,12,18,.62) 100%),
    linear-gradient(180deg, rgba(14,46,74,.30), rgba(10,14,20,.30));
  mix-blend-mode:multiply;
}
@media (hover:hover){
  .prow:hover .photo img, .ind:hover .photo img{ transform:scale(1.035); filter:saturate(.88) contrast(1.08); }
}
.r-32{ aspect-ratio:3/2; }
.r-43{ aspect-ratio:4/3; }
.r-169{ aspect-ratio:16/9; }
.r-219{ aspect-ratio:21/9; }
@media (max-width:719px){ .r-219{ aspect-ratio:16/10; } }

/* photo hero */
.phero{ position:relative; overflow:hidden; background:#0A0E15; }
.phero .bg{ position:absolute; inset:0; z-index:0; }
.phero .bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6) contrast(1.1); }
.phero .bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,12,18,.94) 0%, rgba(8,12,18,.82) 38%, rgba(8,12,18,.38) 72%, rgba(8,12,18,.55) 100%),
    radial-gradient(900px 520px at 88% 14%, rgba(127,216,255,.16), transparent 62%);
}
.phero .inner{ position:relative; z-index:2; padding:clamp(64px,9vw,132px) 0 clamp(48px,6vw,88px); }
.phero h1{ color:#fff; max-width:15ch; }
.phero .lead{ color:#C4D2DE; max-width:52ch; }
.phero .callout{ color:#fff; }
.phero .callout::before{ background:var(--cyan); }
.phero h1::after{ background:var(--cyan); }
.phero .btn{ border-color:rgba(255,255,255,.42); color:#fff; }
.phero .btn:hover{ background:#fff; color:#0A0E15; }
.phero .btn.solid{ background:var(--cyan); border-color:var(--cyan); color:#062033; font-weight:500; }
.phero .btn.solid:hover{ background:#fff; border-color:#fff; }
.phero .tblock{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.26); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.phero .tblock .cell{ border-color:rgba(255,255,255,.16); }
.phero .tblock .k{ color:#89A8BE; }
.phero .tblock .v{ color:#fff; }

/* drawing card floating over the hero photo */
.phero .dwg{
  background:rgba(252,252,250,.97); border-color:rgba(255,255,255,.3);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* full-bleed banner */
.banner{ position:relative; overflow:hidden; }
.banner .photo{ border-radius:0; }
.banner .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:clamp(20px,3vw,38px) 0;
  background:linear-gradient(0deg, rgba(8,12,18,.86), transparent);
}
.banner .cap .tag{ color:#9FB6C6; }
.banner .cap h2{ color:#fff; margin-top:8px; }

/* industry card with photo */
.ind .photo{ border-radius:0; }
.ind .art{ padding:0; border-bottom:1px solid var(--rule); }

/* NVIDIA alignment strip */
.stack-strip{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:760px){ .stack-strip{ grid-template-columns:repeat(3,1fr); } }
.stack-item{
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r);
  background:rgba(255,255,255,.05); padding:18px 20px;
}
.stack-item .k{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:8px; }
.stack-item .v{ color:#fff; font-weight:600; font-size:15px; display:block; margin-bottom:5px; }
.stack-item .d{ color:#B9D4E6; font-size:13.5px; }

/* ── phero corrections ─────────────────────────────────────────────── */
.phero h1{
  font-size:clamp(34px,4.5vw,60px);
  max-width:17ch; line-height:1.04;
}
.shead h2::after, .hero h1::after, .phero h1::after{
  content:""; display:block; width:60px; height:3px; margin-top:22px;
  background:var(--cut); border-radius:2px;
}
.phero h1::after{ background:var(--cyan); }
.phero .lead{ margin-top:20px; }
.phero .heroGrid{ align-items:center; }
@media (max-width:999px){
  .phero .inner{ padding-top:clamp(44px,7vw,72px); }
  .phero h1{ max-width:none; }
}

/* ── full-bleed photo hero (no card overlay) ───────────────────────── */
.phero .inner{ padding:clamp(96px,15vw,210px) 0 clamp(78px,11vw,150px); max-width:var(--max); }
.phero h1{ font-size:clamp(40px,6.6vw,86px); max-width:14ch; letter-spacing:-.035em; }
.phero .lead{ max-width:56ch; font-size:clamp(16px,1.5vw,21px); }
.phero .bg::after{
  background:
    linear-gradient(96deg, rgba(6,10,15,.95) 0%, rgba(6,10,15,.86) 26%, rgba(6,10,15,.42) 58%, rgba(6,10,15,.30) 78%, rgba(6,10,15,.62) 100%),
    linear-gradient(180deg, rgba(6,10,15,.55) 0%, transparent 26%, rgba(6,10,15,.72) 100%),
    radial-gradient(1000px 560px at 74% 46%, rgba(127,216,255,.13), transparent 64%);
}
.phero .bg img{ object-position:58% 52%; filter:saturate(.66) contrast(1.12); }
.phero::after{           /* grain over the whole hero */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (max-width:719px){
  .phero .inner{ padding:clamp(72px,16vw,110px) 0 clamp(56px,10vw,84px); }
  .phero .bg img{ object-position:62% 54%; }
}

/* ── grade correction: sources are already dark, don't crush them ──── */
.photo img{ filter:saturate(.82) contrast(1.04) brightness(1.16); }
.photo .grade{
  background:
    radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(8,12,18,.40) 100%),
    linear-gradient(180deg, rgba(14,46,74,.14), rgba(10,14,20,.16));
}
.ind .photo img{ brightness:1; filter:saturate(.84) contrast(1.03) brightness(1.22); }
.ind .photo .grade{
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 58%, rgba(8,12,18,.32) 100%),
    linear-gradient(180deg, rgba(14,46,74,.10), rgba(10,14,20,.12));
}
.banner .photo img{ filter:saturate(.80) contrast(1.05) brightness(1.10); }
@media (hover:hover){
  .prow:hover .photo img,.ind:hover .photo img{ filter:saturate(.95) contrast(1.05) brightness(1.26); }
}

/* ── narrow screens: title blocks go single column so values never split ── */
@media (max-width:560px){
  .tblock.pair{ grid-template-columns:1fr; }
  .tblock.pair .cell{ border-right:0 !important; }
  .tblock.pair .cell:last-child{ border-bottom:0; }
}

/* ── contact form states ───────────────────────────────────────────── */
.hp{ position:absolute!important; left:-9999px; opacity:0; height:0; width:0; }
.formMsg{
  margin-top:14px; font-family:var(--mono); font-size:13px; line-height:1.6;
  padding:12px 14px; border-radius:var(--r); border:1px solid var(--rule);
}
.formMsg.ok{ border-left:2px solid var(--bend); color:var(--ink); background:var(--bend-soft); }
.formMsg.err{ border-left:2px solid var(--cut); color:var(--ink); background:var(--cut-soft); }
.btn[disabled]{ opacity:.55; cursor:default; }

/* ═══ v10 — cross-browser hardening ══════════════════════════════════ */

/* Safari/WebKit fallbacks: if backdrop-filter is unsupported the surface
   must still be legible, so raise the base opacity rather than relying on blur. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hdr{ background:rgba(247,247,244,.985); }
  .band{ background:rgba(255,255,255,.94); }
  .ftr{ background:rgba(255,255,255,.94); }
  .blueprint .card{ background:rgba(255,255,255,.10); }
  .phero .tblock{ background:rgba(10,16,24,.72); }
  .phero .dwg{ background:rgba(252,252,250,1); }
}

/* mix-blend-mode on the grain layer renders inconsistently in some WebKit
   builds; opacity alone is a safe floor. */
@supports not (mix-blend-mode:overlay){
  .photo::after,.phero::after{ opacity:.10; mix-blend-mode:normal; }
  .photo .grade{ mix-blend-mode:normal; opacity:.75; }
}

/* aspect-ratio fallback for older WebKit (padding-hack) */
@supports not (aspect-ratio:3/2){
  .r-32,.r-43,.r-169,.r-219{ position:relative; height:0; }
  .r-32{ padding-bottom:66.667%; }
  .r-43{ padding-bottom:75%; }
  .r-169{ padding-bottom:56.25%; }
  .r-219{ padding-bottom:42.857%; }
  .r-32 img,.r-43 img,.r-169 img,.r-219 img{ position:absolute; inset:0; }
}

/* iOS: prevent the 100vh/sticky jitter and text auto-inflation */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-font-smoothing:antialiased; }

/* long strings must never overflow their container on any engine */
.tblock .v, .spec .val, .card p, .lead, .ind p, .eq p{ overflow-wrap:break-word; }
.code{ -webkit-overflow-scrolling:touch; }

/* select element styling is inconsistent across engines — normalise it */
.field select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6169' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}

/* inputs inherit iOS defaults otherwise */
.field input,.field textarea,.field select{ -webkit-appearance:none; border-radius:var(--r); font-size:16px; }

/* ═══ v11 — audit fixes ══════════════════════════════════════════════ */

/* 1. Grid/flex children default to min-width:auto, so a wide child (the code
      block on /forge/) blows out its track and scrolls the whole page. */
.heroGrid > *, .split > *, .grid2 > *, .grid3 > *, .grid4 > *,
.hrail > *, .prow > *, .ftrGrid > *{ min-width:0; }
.code{ max-width:100%; overflow-x:auto; }
.phero .inner > *{ min-width:0; }

/* 2. Card headings promoted to h2 for correct document outline —
      hold their previous visual size. */
.card h2, .ind h2, .eq h2, .stack-item h2{
  font-size:var(--h3); letter-spacing:-.012em; line-height:1.3; margin:0 0 8px;
}
.prow .pcopy h2{ font-size:clamp(24px,2.9vw,36px); letter-spacing:-.02em; margin:12px 0 12px; line-height:1.08; }
.flow h2{ font-size:15px; margin:0 0 5px; }

/* 3. Brand link tap target was 30px; iOS wants 44px minimum. */
.brand{ padding:7px 0; }
.ftrLinks a{ padding:8px 0; }

/* tap target for inline links inside title blocks */
.tblock .v a{ display:inline-block; padding:13px 0; margin:-11px 0; }

/* code block reads better on narrow screens */
@media (max-width:719px){
  .code{ font-size:11px; line-height:1.7; padding:14px; }
}