/* ==========================================================================
   Nightshift — site stylesheet
   Design plan: white ground, rationed orange, IBM Plex Mono display /
   Archivo body, square corners, hairline rules, one moment of motion.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* --- tokens --------------------------------------------------------------- */
:root{
  --ground:#FFFFFF;
  --surface:#F7F5F2;
  --surface-2:#EFEBE6;
  --ink:#14100E;
  --ink-2:#5F5651;
  --line:#E8E3DD;
  --line-strong:#CFC7BE;
  --accent:#FF4A1C;        /* marks, large display type only */
  --accent-strong:#D63F10; /* any orange surface carrying white text */
  --accent-ink:#BE2F0B;    /* orange as text on a light ground */
  --bubble-in:#F2EEE9;
  --shadow:0 1px 2px rgba(20,16,14,.05), 0 14px 38px -16px rgba(20,16,14,.2);

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

  --measure:66ch;
  --pad:clamp(20px, 5vw, 64px);
  --gap-section:clamp(56px, 9vw, 128px);
  --maxw:1180px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#100D0C; --surface:#1A1614; --surface-2:#241E1B;
    --ink:#F7F4F1; --ink-2:#A29891;
    --line:#2C2623; --line-strong:#453B36;
    --accent:#FF5F32; --accent-strong:#D63F10; --accent-ink:#FF8058;
    --bubble-in:#241E1B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 38px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --ground:#100D0C; --surface:#1A1614; --surface-2:#241E1B;
  --ink:#F7F4F1; --ink-2:#A29891;
  --line:#2C2623; --line-strong:#453B36;
  --accent:#FF5F32; --accent-strong:#D63F10; --accent-ink:#FF8058;
  --bubble-in:#241E1B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 38px -16px rgba(0,0,0,.75);
}
:root[data-theme="light"]{
  --ground:#FFFFFF; --surface:#F7F5F2; --surface-2:#EFEBE6;
  --ink:#14100E; --ink-2:#5F5651;
  --line:#E8E3DD; --line-strong:#CFC7BE;
  --accent:#FF4A1C; --accent-strong:#D63F10; --accent-ink:#BE2F0B;
  --bubble-in:#F2EEE9;
  --shadow:0 1px 2px rgba(20,16,14,.05), 0 14px 38px -16px rgba(20,16,14,.2);
}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ text-wrap:balance; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent-strong); color:#fff; padding:12px 18px;
  font-family:var(--display); font-size:13px;
}
.skip:focus{ left:0; }

/* --- shared type ---------------------------------------------------------- */
.eyebrow{
  font-family:var(--display);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; }

.h-xl{ font-family:var(--display); font-weight:600; font-size:clamp(34px,6vw,62px); line-height:1.0; letter-spacing:-.04em; }
.h-lg{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.6vw,40px); line-height:1.08; letter-spacing:-.03em; }
.h-md{ font-family:var(--display); font-weight:600; font-size:clamp(20px,2.4vw,26px); line-height:1.18; letter-spacing:-.02em; }
.h-sm{ font-family:var(--display); font-weight:600; font-size:16px; line-height:1.3; letter-spacing:-.01em; }

.lead{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:52ch; }
.body-text{ max-width:var(--measure); }
.body-text > * + *{ margin-top:1.05em; }
.muted{ color:var(--ink-2); }
.tabular{ font-variant-numeric:tabular-nums; }

/* --- header --------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{
  font-family:var(--display); font-weight:600; font-size:17px;
  letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center;
}
/* the clock mark — hands at 2 o'clock, the hour the bot keeps working.
   margin, not flex gap: a gap would also push the wordmark's full stop away */
.logo .mark-clock{ flex:none; color:var(--ink); margin-right:8px; }
.logo .dot{ color:var(--accent-ink); }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-size:14.5px; text-decoration:none; color:var(--ink-2);
  padding:4px 0; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--line-strong); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }

/* the nav CTA is a button first and a nav link second — .nav a would
   otherwise out-specify .btn and strip its padding and colour */
.nav a.btn{ padding:10px 16px; border-bottom:1px solid transparent; }
.nav a.btn-primary,
.nav a.btn-primary:hover,
.nav a.btn-primary[aria-current="page"]{ color:#fff; border-bottom-color:transparent; }
.nav a.btn-primary:hover{ filter:brightness(.9); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  color:var(--ink); font-family:var(--display); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; padding:9px 13px; cursor:pointer;
}
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ground); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav .btn{ margin-top:14px; text-align:center; }
}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--body); font-weight:600; font-size:15px;
  line-height:1.2; padding:14px 24px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn-primary{ background:var(--accent-strong); color:#fff; }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(.9); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:none; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ padding:10px 16px; font-size:14px; }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* --- sections ------------------------------------------------------------- */
.band{ padding-block:var(--gap-section); border-bottom:1px solid var(--line); }
.band-surface{ background:var(--surface); }
.band-ink{ background:var(--ink); color:var(--ground); border-bottom-color:transparent; }
.band-ink .eyebrow{ color:color-mix(in srgb, var(--ground) 62%, transparent); }
.band-ink .muted, .band-ink .lead{ color:color-mix(in srgb, var(--ground) 68%, transparent); }

.sec-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(30px,4vw,52px); }
.sec-head .lead{ margin:0; }

/* --- hero ----------------------------------------------------------------- */
.hero{ padding-block:clamp(44px,7vw,92px) clamp(52px,8vw,104px); border-bottom:1px solid var(--line); }
.hero .grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,6vw,72px); align-items:center;
}
/* a grid item is min-width:auto by default, which lets the scrolling tab strip
   push the whole page wider than the screen — this is what forced a zoom-out */
.hero .grid > *{ min-width:0; }
@media (max-width:900px){ .hero .grid{ grid-template-columns:minmax(0,1fr); } }

.hero .kicker{
  font-family:var(--display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:24px;
}
.hero h1 .dot{ color:var(--accent); }
.hero .sub{ margin-top:22px; font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); max-width:36ch; }
.hero .btn-row{ margin-top:34px; }
.hero .under{
  margin-top:22px; font-family:var(--display); font-size:12px;
  color:var(--ink-2); letter-spacing:.02em;
}

/* --- chat mock ------------------------------------------------------------ */
.chat-shell{ position:relative; min-width:0; max-width:100%; }
/* the panel is swipeable, so let the browser own vertical scrolling and leave
   the horizontal gesture to us */
.chat{ touch-action:pan-y; }
.chat:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.chat{
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:18px 16px 16px; display:flex; flex-direction:column; gap:10px;
  min-height:360px;
  /* The conversation now runs long enough to need a window rather than a wall.
     Capping it and scrolling as it plays keeps the panel a sensible height on a
     phone — and it reads like a real thread instead of a tall empty box waiting
     to be filled. */
  max-height:min(560px, 72vh); overflow-y:auto; scrollbar-width:none;
}
.chat::-webkit-scrollbar{ display:none; }
.chat > :first-child{ margin-top:auto; }
/* trade selector above the hero conversation — the visitor is a restaurant
   or a salon, so they should be able to see themselves in it */
.chat-tabs{
  display:flex; gap:1px; background:var(--line);
  border:1px solid var(--line); border-bottom:none;
  /* eight trades will not fit across a phone, so the strip scrolls and snaps.
     The scrollbar is hidden because the tabs themselves are the affordance —
     you can see the next one half on screen. */
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  max-width:100%; min-width:0;
}
.chat-tabs::-webkit-scrollbar{ display:none; }
.chat-tab{
  flex:0 0 auto; scroll-snap-align:center; white-space:nowrap;
  background:var(--ground); border:none; cursor:pointer;
  padding:12px 6px; font-family:var(--display); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  transition:color .14s ease, background-color .14s ease;
}
.chat-tab:hover{ color:var(--ink); }
.chat-tab[aria-pressed="true"]{
  background:var(--surface); color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent);
}

.chat-hd{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid var(--line); padding-bottom:12px;
}
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

.mark{ position:absolute; width:11px; height:11px; pointer-events:none; }
.mark::before,.mark::after{ content:""; position:absolute; background:var(--accent); }
.mark::before{ left:0; top:5px; width:11px; height:1px; }
.mark::after{ top:0; left:5px; width:1px; height:11px; }
.mark.tl{ left:-6px; top:-6px; }  .mark.tr{ right:-6px; top:-6px; }
.mark.bl{ left:-6px; bottom:-6px; } .mark.br{ right:-6px; bottom:-6px; }

.msg{
  font-family:var(--ui); font-size:14.5px; line-height:1.45;
  padding:9px 13px; max-width:84%;
  opacity:0; transform:translateY(8px);
  animation:msg-in .38s cubic-bezier(.2,.8,.3,1) forwards;
}
.msg .stamp{ display:block; font-size:10px; margin-top:4px; font-variant-numeric:tabular-nums; }
/* 10px text still needs 4.5:1 — a faded white on orange only reached 2.33 */
.msg.in .stamp{ color:var(--ink-2); }
.msg.out .stamp{ color:#fff; }
.msg.in{ align-self:flex-start; background:var(--bubble-in); color:var(--ink); border-radius:2px 12px 12px 12px; }
.msg.out{ align-self:flex-end; background:var(--accent-strong); color:#fff; border-radius:12px 2px 12px 12px; }
@keyframes msg-in{ to{ opacity:1; transform:none; } }

/* The photo options the bot sends, with a code under each. This is the whole
   pitch in one glance: the customer never has to describe what they want, they
   just type A2. Sits on the bot's side of the thread. */
.chat-album{
  align-self:flex-end; width:100%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  opacity:0; transform:translateY(8px);
  animation:msg-in .42s cubic-bezier(.2,.8,.3,1) forwards;
}
.chat-album figure{ margin:0; }
.chat-album img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:9px; background:var(--bubble-in);
}
.chat-album figcaption{
  display:flex; flex-direction:column; gap:1px; margin-top:5px;
  font-family:var(--ui); font-size:11px; line-height:1.3;
}
.chat-album figcaption b{
  font-family:var(--display); font-size:10.5px; letter-spacing:.1em;
  color:var(--accent-ink);
}
.chat-album figcaption span{ color:var(--ink-2); }

/* The silence. Every owner reading this page knows this moment — the customer
   goes quiet and that is normally where the sale dies. Here it is where the
   bot follows up on its own. */
.chat-gap{
  align-self:stretch; display:flex; align-items:center; gap:10px;
  margin:2px 0; font-family:var(--display); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  opacity:0; animation:msg-in .5s ease forwards;
}
.chat-gap::before,.chat-gap::after{
  content:""; flex:1; height:1px; background:var(--line);
}

@media (max-width:420px){
  .chat-album figcaption{ font-size:10px; }
}

.typing{
  align-self:flex-end; background:var(--bubble-in);
  border-radius:12px 2px 12px 12px; padding:12px 14px;
  display:flex; gap:4px; opacity:0; animation:msg-in .3s ease forwards;
}
.typing i{ width:5px; height:5px; border-radius:50%; background:var(--ink-2); animation:blink 1.1s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{opacity:.25} 30%{opacity:.9} }

@media (prefers-reduced-motion:reduce){
  .msg{ animation:none; opacity:1; transform:none; }
  .typing{ display:none; }
}

/* --- leak / failure states ------------------------------------------------ */
.leaks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.leak{ background:var(--ground); padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:12px; }
.band-surface .leak{ background:var(--surface); }
.leak .when{ font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.leak p{ color:var(--ink-2); font-size:15.5px; }

/* --- same answer, three languages ---------------------------------------- */
/* Rodney, 12 Aug: people here type in Creole and Spanish all day and get
   answered in English or not at all. Showing the SAME question three ways
   proves it faster than any sentence about "multilingual support". */
.langs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.lang{
  background:var(--surface); padding:clamp(20px,2.6vw,28px);
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0;
}
.lang-name{
  font-family:var(--display); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink);
}
/* these are static, not a playing thread — no entrance animation */
.lang .msg{ opacity:1; transform:none; animation:none; max-width:94%; }
.lang-note{
  margin-top:22px; color:var(--ink-2); font-size:15.5px; max-width:var(--measure);
}

/* --- tier cards ----------------------------------------------------------- */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.tier{ background:var(--ground); padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:14px; text-decoration:none; }
.band-surface .tier{ background:var(--surface); }
.tier .from{ font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.tier .price{ font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tier p{ color:var(--ink-2); font-size:15.5px; flex:1; }
.tier .go{ font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
a.tier:hover{ background:var(--surface-2); }
.tier-ask .price{ color:var(--accent-ink); }
.band-surface .tier-ask{ background:var(--surface-2); }

/* --- steps ---------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(24px,3vw,40px); }
.step{ display:flex; flex-direction:column; gap:11px; padding-top:18px; border-top:2px solid var(--accent); }
.step .n{ font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.step p{ color:var(--ink-2); font-size:15.5px; }

/* --- trust ---------------------------------------------------------------- */
.trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.trust-item{ background:var(--ground); padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:9px; }
.band-surface .trust-item{ background:var(--surface); }
.trust-item p{ color:var(--ink-2); font-size:15px; }

.spotlight{
  border:1px solid var(--accent); padding:clamp(26px,4vw,44px);
  display:flex; flex-direction:column; gap:16px; max-width:760px;
}
.spotlight p{ color:var(--ink-2); }
.band-ink .spotlight p{ color:color-mix(in srgb, var(--ground) 70%, transparent); }

/* --- pricing table -------------------------------------------------------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); }
table.rate{ width:100%; border-collapse:collapse; min-width:660px; }
table.rate th, table.rate td{ text-align:left; padding:18px 20px; border-bottom:1px solid var(--line); vertical-align:top; }
table.rate thead th{
  font-family:var(--display); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); font-weight:400;
  background:var(--surface);
}
table.rate tbody tr:last-child td{ border-bottom:none; }
table.rate .tier-name{ font-family:var(--display); font-weight:600; font-size:16px; white-space:nowrap; }
table.rate .amount{ font-family:var(--display); font-weight:600; font-size:17px; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.rate .term{ font-family:var(--display); font-size:13px; color:var(--ink-2); white-space:nowrap; }
table.rate td ul{ padding-left:1.1em; color:var(--ink-2); font-size:15px; }
table.rate td li + li{ margin-top:3px; }

/* --- addon list ----------------------------------------------------------- */
.addons{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.addons li{ background:var(--ground); padding:20px 22px; display:flex; flex-direction:column; gap:7px; }
.band-surface .addons li{ background:var(--surface); }
.addons .name{ font-family:var(--display); font-weight:600; font-size:15px; }
.addons .note{ color:var(--ink-2); font-size:14.5px; }

/* --- FAQ ------------------------------------------------------------------ */
.faq{ border-top:1px solid var(--line); max-width:840px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 42px 22px 0; position:relative;
  font-family:var(--display); font-weight:500; font-size:16.5px; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:20px;
  font-family:var(--display); font-size:20px; color:var(--accent-ink); line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 24px; color:var(--ink-2); max-width:var(--measure); }
.faq summary:hover{ color:var(--accent-ink); }

/* --- case study ----------------------------------------------------------- */
.phase{ display:grid; grid-template-columns:170px 1fr; gap:clamp(20px,4vw,48px); padding-block:clamp(30px,4vw,48px); border-top:1px solid var(--line); }
@media (max-width:760px){ .phase{ grid-template-columns:1fr; gap:16px; } }
.phase .tag{ font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); padding-top:5px; }
.phase .content{ display:flex; flex-direction:column; gap:14px; }
.phase p{ color:var(--ink-2); max-width:var(--measure); }
.phase ul{ padding-left:1.15em; color:var(--ink-2); max-width:var(--measure); }
.phase li + li{ margin-top:7px; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--ground); padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:8px; }
.band-surface .stat{ background:var(--surface); }
.stat .label{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.stat .figure{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* a number Rodney has not confirmed yet — must look unfinished on purpose */
.slot{
  display:inline-block; font-family:var(--display); font-weight:500;
  font-size:14px; letter-spacing:.04em;
  color:var(--accent-ink); border:1px dashed var(--accent);
  padding:5px 10px; background:color-mix(in srgb, var(--accent) 7%, transparent);
}

.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font-family:var(--display); font-size:14px; }
.flow span{ border:1px solid var(--line-strong); padding:9px 14px; white-space:nowrap; }
.flow .arrow{ border:none; padding:0; color:var(--accent-ink); }

/* --- testimonial slots ---------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.quote{ background:var(--ground); padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:14px; min-height:190px; }
.band-surface .quote{ background:var(--surface); }
.quote .seat{ font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.quote .empty{ color:var(--ink-2); font-size:15px; font-style:italic; }

/* --- form ----------------------------------------------------------------- */
.form{ display:flex; flex-direction:column; gap:20px; max-width:560px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-strong);
  padding:13px 14px; border-radius:0; width:100%;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.form .hint{ font-size:13.5px; color:var(--ink-2); }
.hp{ position:absolute; left:-9999px; }

.contact-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,64px); align-items:start;
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* --- footer --------------------------------------------------------------- */
.site-foot{ padding-block:clamp(44px,6vw,72px) 40px; background:var(--ground); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(26px,4vw,48px); padding-bottom:36px; border-bottom:1px solid var(--line); }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid .foot-brand{ grid-column:1 / -1; } }
.foot-brand p{ color:var(--ink-2); font-size:15px; max-width:34ch; margin-top:12px; }
.foot-col h3{ font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-weight:400; margin-bottom:14px; }
.foot-col ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-col a{ text-decoration:none; font-size:15px; color:var(--ink-2); }
.foot-col a:hover{ color:var(--accent-ink); }
.foot-base{ padding-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; font-family:var(--display); font-size:12px; color:var(--ink-2); }

/* --- utility -------------------------------------------------------------- */
.stack{ display:flex; flex-direction:column; }
.stack-sm{ gap:12px; } .stack-md{ gap:22px; } .stack-lg{ gap:34px; }
.no-border{ border-bottom:none; }