/* ============================================================
   vbv.css — Virginia Business Visuals design system
   ------------------------------------------------------------
   Every page links this one file. Colour, type, spacing and all
   shared components (utility bar, nav, hero, hairline grids,
   process steps, band, footer) live here and nowhere else.

   To change the accent across the whole site, edit --accent,
   --accent-bright and --band below. Do not hard-code a colour
   in a page; add a token here instead.
   ============================================================ */

/* ===================== TOKENS ===================== */
:root{
  --paper:#FFFFFF;
  --wash:#ECF0EE;          /* light section ground */
  --dark:#0A1013;          /* dark section + footer ground */
  --dark-2:#111A1E;
  --band:#8AD7D0;          /* the big CTA band — light teal green/blue */
  --band-ink:#052A27;

  --ink:#0B1417;
  --ink-2:#3B4A4E;
  --muted:#5C6D71;
  --line:#D9E0DD;
  --line-dark:#1E2C31;

  --accent:#0F9A92;        /* marks + text-scale accent on light grounds */
  --accent-bright:#5FCFC6; /* marks on dark grounds */
  --accent-wash:#DCF2EF;

  --on-dark:#F2F8F7;
  --on-dark-2:#CBDEDD;

  --f:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1200px;
  --pad:28px;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.6;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--f);letter-spacing:-.028em;line-height:1.02;text-wrap:balance}
h1{font-variation-settings:"wdth" 96,"wght" 500;font-size:clamp(2.25rem,4.3vw,3.55rem)}
h2{font-variation-settings:"wdth" 96,"wght" 500;font-size:clamp(1.85rem,3.05vw,2.7rem)}
h3{font-variation-settings:"wdth" 100,"wght" 500;font-size:1.24rem;letter-spacing:-.018em;line-height:1.18}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding:126px 0}
@media(max-width:760px){.sec{padding:76px 0}}
.on-wash{background:var(--wash)}
.on-dark{background:var(--dark);color:var(--on-dark)}
.on-dark h2,.on-dark h3{color:var(--on-dark)}
/* Text on dark grounds is set lighter, heavier and a touch larger than its
   light-ground counterpart. Reversed type reads thinner than positive type at
   the same weight, so matching the weight is not the same as matching the
   legibility. Every pairing below clears WCAG AAA (7:1). */
.on-dark p,.on-dark li{font-variation-settings:"wdth" 100,"wght" 450}

/* eyebrow with the short rule, as on the reference layout */
.eyebrow{
  display:flex;align-items:center;gap:16px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-2);margin-bottom:30px;
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--accent);flex:none}
.on-dark .eyebrow{color:var(--on-dark-2)}
.on-dark .eyebrow::before{background:var(--accent-bright)}
.band .eyebrow{color:var(--band-ink)}
.band .eyebrow::before{background:var(--band-ink)}

/* two-column section head: headline left, supporting copy right */
.head{
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,0.78fr);
  gap:40px 8.5%;align-items:start;margin-bottom:74px;
}
.head h2{max-width:9.6em}
.head-note{color:var(--ink-2);font-size:.98rem;line-height:1.72;max-width:26em;padding-top:9px}
.on-dark .head-note{color:var(--on-dark-2);font-size:1.01rem;font-variation-settings:"wdth" 100,"wght" 450}
@media(max-width:860px){.head{grid-template-columns:1fr;gap:20px;margin-bottom:44px}}

/* ===================== UTILITY BAR ===================== */
/* The live site carries this on every page. Keeping it means the new pages
   sit in the same information architecture as the other 18 while the visual
   system converts. */
.utility{background:#04161A;border-bottom:1px solid #123037}
.utility-in{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;
  padding:11px 0;font-size:.8rem;color:var(--on-dark-2);
  font-variation-settings:"wdth" 100,"wght" 450;text-align:center;
}
.utility-in a{color:var(--accent-bright);text-decoration:none;font-variation-settings:"wght" 550}
.utility-in a:hover{text-decoration:underline}
@media(max-width:560px){.utility-in{font-size:.74rem;padding:9px 0}}

/* ===================== NAV ===================== */
.nav{position:sticky;top:0;z-index:80;transition:background .25s ease,border-color .25s ease}
.nav-in{display:flex;align-items:center;gap:26px;height:74px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;color:var(--on-dark)}
.mark .box{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid currentColor;font-family:var(--f-mono);font-size:9.5px;
  font-weight:600;letter-spacing:.08em;
}
.mark .wm{display:flex;flex-direction:column;gap:2px}
.mark b{font-variation-settings:"wdth" 100,"wght" 600;font-size:.94rem;letter-spacing:-.015em;white-space:nowrap;line-height:1.1}
.mark em{
  font-style:normal;font-family:var(--f-mono);font-size:8.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap;
}
@media(max-width:1080px){.mark em{display:none}}
.nav-links{display:flex;gap:22px}
.nav-links a{font-size:.9rem;font-variation-settings:"wght" 520;text-decoration:none;color:var(--on-dark);opacity:.94}
.nav-links a:hover{opacity:1;color:var(--accent-bright)}
.nav .btn-outline{
  border:1px solid rgba(242,248,247,.7);color:var(--on-dark);
  padding:11px 20px;font-size:.88rem;text-decoration:none;
  font-variation-settings:"wght" 600;transition:background .18s ease,border-color .18s ease;
}
.nav .btn-outline:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.nav.solid{background:rgba(10,16,19,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark)}
@media(max-width:1180px){.nav-links{display:none}}
@media(max-width:520px){.mark .wm{display:none}.nav-in{height:64px}}

/* ===================== HERO ===================== */
.hero{position:relative;background:var(--dark);color:var(--on-dark);margin-top:-74px;padding-top:74px}
@media(max-width:520px){.hero{margin-top:-64px;padding-top:64px}}
.hero-media{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(1100px 620px at 76% 22%, #1D3B41 0%, rgba(29,59,65,0) 62%),
  radial-gradient(760px 520px at 18% 88%, #123037 0%, rgba(18,48,55,0) 60%),
  linear-gradient(180deg,#0C1519 0%,#081114 100%);
}
/* HERO PHOTOGRAPH -----------------------------------------------
   A page opts in by adding "has-photo" to its .hero-media div: that
   hides the generated canvas backdrop, shows the image, and keeps
   .hero-scrim so the headline stays legible. Default img/hero.jpg;
   override per page with style="--hero-img:url('img/other.jpg')". */
.hero-media.has-photo{
  background-image:var(--hero-img,url('img/hero.jpg'));
  background-size:cover; background-position:center;
}
.hero-media.has-photo #heroart{display:none}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(8,17,20,.94) 0%, rgba(8,17,20,.72) 46%, rgba(8,17,20,.34) 100%);
}
#heroart{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;z-index:2;padding:96px 0 168px}
@media(max-width:760px){.hero-in{padding:64px 0 132px}}
.hero h1{max-width:12.9em;margin-bottom:30px}
.hero-lede{font-size:1.06rem;line-height:1.68;color:#DEEBEA;max-width:31em;margin-bottom:38px;font-variation-settings:"wdth" 100,"wght" 450}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.btn-fill{
  background:var(--accent-bright);color:#04241F;padding:15px 26px;
  text-decoration:none;font-size:.95rem;font-variation-settings:"wght" 600;
  border:0;cursor:pointer;transition:background .18s ease,transform .12s ease;
}
.btn-fill:hover{background:#7FE0D6;transform:translateY(-1px)}
.btn-text{
  display:inline-flex;align-items:center;gap:9px;color:var(--on-dark);
  text-decoration:none;font-size:.95rem;font-variation-settings:"wght" 550;
}
.btn-text .arw{transition:transform .18s ease}
.btn-text:hover .arw{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){.btn-fill:hover,.btn-text:hover .arw{transform:none}}

.slot-tag{
  position:absolute;right:var(--pad);bottom:200px;z-index:2;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#CBDEDD;border:1px dashed rgba(203,222,221,.55);padding:6px 10px;font-weight:500;
}
@media(max-width:900px){.slot-tag{display:none}}

/* stat strip overlapping the hero edge */
.stats-wrap{position:relative;margin-top:-96px;z-index:3}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-left:auto;max-width:660px}
.stat{background:var(--paper);padding:24px 26px}
.stat b{display:block;font-size:1.12rem;font-variation-settings:"wdth" 100,"wght" 600;letter-spacing:-.02em}
.stat span{display:block;font-size:.85rem;color:var(--muted);margin-top:5px;line-height:1.48}
@media(max-width:760px){.stats{grid-template-columns:1fr;max-width:none}.stats-wrap{margin-top:-72px}}

/* audience bar */
.audience{border-bottom:1px solid var(--line);background:var(--paper)}
.audience-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 38px;padding:28px 0}
.audience .lbl{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);flex:none}
.audience ul{display:flex;flex-wrap:wrap;gap:12px 32px;list-style:none;margin:0;padding:0}
.audience li{font-size:.9rem;font-variation-settings:"wght" 480;color:var(--ink-2)}

/* ===================== HAIRLINE GRIDS ===================== */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.grid-3,.grid-2{grid-template-columns:1fr}}
.cell{background:var(--paper);padding:30px 30px 30px;display:flex;flex-direction:column}

/* ── SERVICE CARD IMAGE ───────────────────────────────────────────
   Each card has a 4:3 image area that bleeds to the cell edges.
   To drop a photograph in, replace the commented-out line inside
   the .shot div with:  <img src="events.jpg" alt="…">
   The placeholder label hides itself automatically once an <img>
   is present — no CSS change needed.                              */
.shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  margin:-30px -30px 28px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 30% 15%, #17393D 0%, rgba(23,57,61,0) 62%),
    linear-gradient(150deg,#0E272B 0%,#12343A 52%,#0B1D21 100%);
}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot::after{
  content:attr(data-label);position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:#DCEDEB;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.shot::before{
  content:"";position:absolute;left:16px;top:16px;width:26px;height:26px;
  border:1px solid rgba(159,196,192,.4);border-radius:50%;
  box-shadow:inset 0 0 0 5px rgba(159,196,192,.16);
}
.shot:has(img)::after,.shot:has(img)::before{display:none}
.on-wash .cell{background:var(--wash)}
.num{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;color:var(--muted);margin-bottom:54px}
.cell h3{margin-bottom:13px}
.cell p{font-size:.92rem;line-height:1.68;color:var(--ink-2)}
.tags{
  margin-top:auto;padding-top:22px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);line-height:1.7;
}

/* two-column numbered list (the "why" block) */
.why{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:860px){.why{grid-template-columns:1fr}}
.why-item{display:grid;grid-template-columns:34px 1fr;gap:0 26px;padding:30px 34px 30px 0;border-top:1px solid var(--line)}
.why-item:nth-child(2n){padding-left:34px;border-left:1px solid var(--line)}
@media(max-width:860px){.why-item:nth-child(2n){padding-left:0;border-left:0}}
.why-item .n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);padding-top:6px}
.why-item h3{font-size:1.1rem;margin-bottom:9px}
.why-item p{font-size:.92rem;line-height:1.68;color:var(--ink-2)}

/* ===================== PROCESS (dark) ===================== */
.proc{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.3fr);gap:56px 9%;align-items:start}
@media(max-width:900px){.proc{grid-template-columns:1fr;gap:40px}}
.proc-left h2{margin-bottom:24px;max-width:8.4em}
.proc-left p{color:var(--on-dark-2);font-size:1.01rem;line-height:1.72;margin-bottom:28px;max-width:26em;font-variation-settings:"wdth" 100,"wght" 450}
.proc-left .btn-text{color:var(--accent-bright)}
.steps{border-top:1px solid var(--line-dark)}
.step{display:grid;grid-template-columns:40px 1fr;gap:0 28px;padding:26px 0;border-bottom:1px solid var(--line-dark)}
.step .n{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid #2C444A;
  font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--accent-bright);
}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{color:var(--on-dark-2);font-size:.94rem;line-height:1.68;max-width:34em;font-variation-settings:"wdth" 100,"wght" 450}

/* ===================== COVERAGE ===================== */
.zones{border-top:1px solid var(--line)}
.zrow{
  display:grid;grid-template-columns:70px 1.05fr 1.7fr .95fr;gap:0 28px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.zrow .zc{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.zrow .zn{font-size:1.02rem;font-variation-settings:"wght" 550;letter-spacing:-.015em}
.zrow .za{font-size:.92rem;line-height:1.62;color:var(--ink-2)}
.zrow .zt{font-family:var(--f-mono);font-size:11.5px;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:860px){
  .zrow{grid-template-columns:1fr;gap:6px}
  .zrow .zt{text-align:left}
}

/* ===================== PROGRAMS ===================== */
.programs{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
@media(max-width:940px){.programs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.programs{grid-template-columns:1fr}}
.prog{background:var(--paper);padding:24px 26px}
.on-wash .prog{background:var(--wash)}
.prog.lead{background:var(--dark);color:var(--on-dark)}
.prog b{display:block;font-size:1rem;font-variation-settings:"wght" 600;letter-spacing:-.015em}
.prog em{display:block;font-style:normal;font-size:.88rem;color:var(--muted);margin-top:5px}
.prog.lead em{color:var(--on-dark-2)}
.prog .v{display:block;margin-top:14px;font-family:var(--f-mono);font-size:1.06rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.prog.lead .v{color:var(--accent-bright)}
.range-note{margin-top:28px;font-size:.95rem;line-height:1.75;color:var(--ink-2);max-width:52em;border-left:2px solid var(--accent);padding-left:20px}
.range-note b{font-variation-settings:"wght" 620;color:var(--ink)}

/* ===================== REVIEWS ===================== */
.stars{color:var(--accent);font-family:var(--f-mono);font-size:.9rem;letter-spacing:.16em;margin-bottom:14px}
.cell blockquote{margin:0;font-size:1.02rem;color:var(--ink-2)}
.who{margin-top:auto;padding-top:20px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.ph{
  display:inline-block;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:#B03047;border:1px dashed #B03047;padding:3px 7px;margin-bottom:16px;
}
.logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.logo-slot{
  border:1px dashed var(--line);padding:12px 20px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
}

/* ===================== FAQ ===================== */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-size:1.04rem;font-variation-settings:"wght" 520;letter-spacing:-.015em;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:20px;font-family:var(--f-mono);font-size:1.15rem;color:var(--accent)}
details[open] summary::after{content:"–"}
details p{padding:0 60px 26px 0;color:var(--ink-2);font-size:.95rem;line-height:1.75;max-width:54em}

/* ===================== RESTRICTED (dark) ===================== */
.sec-note{
  margin-top:30px;padding-top:18px;border-top:1px solid #2C444A;
  font-family:var(--f-mono);font-size:12.5px;font-weight:500;line-height:1.8;color:var(--accent-bright);max-width:56em;
}

/* ===================== INQUIRY BAND ===================== */
.band{background:var(--band);color:var(--band-ink)}
.band h2{color:var(--band-ink)}
.band-grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.05fr);gap:52px 8%;align-items:start}
@media(max-width:1000px){.band-grid{grid-template-columns:1fr;gap:36px}}
.band-left h2{max-width:8.8em;margin-bottom:24px}
.band-left p{color:#04322E;font-size:1.01rem;line-height:1.72;max-width:27em;font-variation-settings:"wdth" 100,"wght" 450}
.band-facts{margin-top:32px;border-top:1px solid rgba(5,42,39,.22)}
.band-facts div{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid rgba(5,42,39,.32);font-family:var(--f-mono);font-size:12.5px;font-weight:500;color:var(--band-ink)}
.band-facts span:last-child{margin-left:auto;text-align:right}

/* estimator card */
.quote{background:var(--paper);border:1px solid rgba(5,42,39,.18);box-shadow:0 30px 60px -30px rgba(5,42,39,.5)}
.quote-head{display:flex;align-items:center;gap:10px;padding:15px 24px;border-bottom:1px solid var(--line);background:#F5FAF9}
.tally{width:7px;height:7px;border-radius:50%;background:#C0223A;flex:none;box-shadow:0 0 0 3px rgba(192,34,58,.2)}
.quote-head .hd{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.quote-head .step2{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.quote-body{padding:24px}
.field{margin-bottom:22px}
.flabel{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.flabel .l{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.flabel .hint{margin-left:auto;font-family:var(--f-mono);font-size:10px;color:var(--muted)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:430px){.tiles{grid-template-columns:1fr}}
.tile{text-align:left;background:var(--paper);border:1px solid var(--line);padding:11px 12px;cursor:pointer;line-height:1.25;transition:border-color .12s ease,background .12s ease}
.tile:hover{border-color:var(--muted)}
.tile b{display:block;font-size:.85rem;font-variation-settings:"wght" 580}
.tile span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.tile[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tile[aria-pressed="true"] span{color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--paper);border:1px solid var(--line);padding:8px 14px;cursor:pointer;font-size:.82rem;font-variation-settings:"wght" 520;transition:border-color .12s ease,background .12s ease}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#FFF}

.adjust{border-top:1px solid var(--line);margin-top:20px}
.adjust summary{padding:15px 0 5px;font-family:var(--f);font-size:.86rem;font-variation-settings:"wght" 560;color:var(--accent)}
.adjust summary::after{top:13px;right:2px;font-size:1rem}
.adjust-body{padding-top:14px}
.adjust-body .field:last-child{margin-bottom:6px}

.stepper{display:flex;align-items:center;border:1px solid var(--line);width:max-content}
.stepper button{width:38px;height:38px;background:none;border:0;cursor:pointer;font-family:var(--f-mono);font-size:1rem}
.stepper button:hover{background:var(--wash)}
.stepper output{min-width:78px;text-align:center;font-family:var(--f-mono);font-size:.87rem;font-variant-numeric:tabular-nums;border-inline:1px solid var(--line);padding:9px 6px}

.addons{display:grid;gap:7px}
.addon{display:flex;align-items:center;gap:11px;cursor:pointer;border:1px solid var(--line);padding:10px 12px;transition:border-color .12s ease}
.addon:hover{border-color:var(--muted)}
.addon input{accent-color:var(--accent);width:15px;height:15px;flex:none;margin:0}
.addon .an{font-size:.84rem;font-variation-settings:"wght" 480}
.addon .ap{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.addon:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}

.readout{border-top:1px solid var(--line);background:#F5FAF9;padding:22px 24px}
.rlabel{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.lines{display:grid;gap:0}
.li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2)}
.li span:first-child{color:var(--muted);flex:none;min-width:98px}
.li span:last-child{text-align:right;margin-left:auto;color:var(--ink)}
.deliver{font-family:var(--f-mono);font-size:11px;color:var(--accent);margin-top:14px}
.btn-block{display:block;width:100%;text-align:center;background:var(--ink);color:var(--paper);border:0;padding:16px;font-size:.95rem;font-variation-settings:"wght" 600;cursor:pointer;margin-top:18px;transition:background .18s ease}
.btn-block:hover{background:#16292E}
.fineprint{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.8}
.fineprint a{color:var(--accent)}

.hold{display:none;border-top:1px solid var(--line);padding:24px;background:var(--paper)}
.hold.on{display:block}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:470px){.inputs{grid-template-columns:1fr}}
.inputs .full{grid-column:1/-1}
.inputs input{width:100%;padding:12px 13px;border:1px solid var(--line);background:var(--paper);font-size:.88rem}
.done{display:none;padding:30px 24px;border-top:1px solid var(--line);text-align:center;background:var(--paper)}
.done.on{display:block}
.done .ck{width:40px;height:40px;border-radius:50%;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin:0 auto 14px;font-size:1.15rem}
.done p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* ===================== FOOTER ===================== */
footer{background:var(--dark);color:var(--on-dark);padding:64px 0 48px}
.foot{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:44px 48px;align-items:start}
@media(max-width:960px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot{grid-template-columns:1fr;gap:34px}}
.foot h4{
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);margin:0 0 18px;
}
.foot p{color:var(--on-dark-2);font-size:.93rem;line-height:1.7;font-variation-settings:"wdth" 100,"wght" 450}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot li{color:var(--on-dark-2);font-size:.91rem;font-variation-settings:"wdth" 100,"wght" 450}
.foot li a{color:var(--on-dark-2);text-decoration:none}
.foot li a:hover{color:var(--accent-bright);text-decoration:underline}
.foot address{
  font-style:normal;color:var(--on-dark-2);font-size:.91rem;line-height:1.95;
  margin-top:20px;font-variation-settings:"wdth" 100,"wght" 450;
}
.foot address a{color:var(--on-dark-2);text-decoration:none}
.foot address a:hover{color:var(--accent-bright)}
.foot-base{
  grid-column:1/-1;margin-top:38px;padding-top:22px;border-top:1px solid #2C444A;
  display:flex;flex-wrap:wrap;gap:10px 24px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;color:#A4BBBD;
}
.foot-base span:last-child{margin-left:auto}
@media(max-width:600px){.foot-base span:last-child{margin-left:0}}