/* ==========================================================================
   SpansCall — site.css
   One stylesheet for every page. Brand tokens, layout, components, motion.
   ========================================================================== */

:root{
  /* Brand */
  --ink:#1B0A0C;        /* page background, dark */
  --ink-2:#150709;      /* footer */
  --maroon:#5E1A1F;
  --maroon-2:#6A2026;
  --maroon-3:#3B0F13;
  --cream:#F6EFE4;
  --cream-2:#ECE6DC;
  --cream-3:#DED5C6;
  --cream-4:#EEE7DB;
  --gold:#D8A23F;
  --gold-light:#F0CB7E;
  --gold-dark:#C7882B;
  --ochre:#9C6C1F;
  --ochre-2:#BD8434;
  --green:#7FCB9B;
  --red:#E06B6B;

  /* Text on cream */
  --text-dark:#241C14;
  --text-muted:#564B40;
  --text-faint:#857A69;

  /* Text on dark */
  --on-dark:rgba(246,239,228,.72);
  --on-dark-2:rgba(246,239,228,.6);
  --on-dark-3:rgba(246,239,228,.45);
  --line-dark:rgba(246,239,228,.12);
  --line-dark-2:rgba(246,239,228,.14);

  /* Type */
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-display:'Chakra Petch','Plus Jakarta Sans',sans-serif;
  --font-script:'Dancing Script',cursive;

  --container:1180px;
  --pad-x:40px;
  --radius:18px;
  --radius-sm:14px;
  --header-h:70px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--cream);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-decoration:none; transition:color .2s ease, background-color .2s ease, border-color .2s ease; }
a:hover{ color:var(--cream); }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:#2A120A; }

.skip-link{
  position:absolute; left:-999px; top:8px; z-index:100;
  background:var(--gold); color:#2A120A; padding:10px 16px; border-radius:999px; font-weight:700;
}
.skip-link:focus{ left:8px; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container{ max-width:var(--container); margin:0 auto; width:100%; position:relative; }
.section{ position:relative; padding:120px var(--pad-x); }
.section--tight{ padding-top:90px; padding-bottom:90px; }
.section--hero{ padding-top:calc(var(--header-h) + 100px); padding-bottom:90px; overflow:hidden; }
.section--cream{ background:var(--cream); color:var(--text-dark); }
.section--cream-2{ background:var(--cream-2); color:var(--text-dark); }
.section--dark{ background:var(--ink); color:var(--cream); }
.section--glow{
  background:radial-gradient(1100px 660px at 78% 18%, var(--maroon-2) 0%, var(--maroon-3) 42%, var(--ink) 78%);
  overflow:hidden;
}
.section--glow-soft{
  background:radial-gradient(900px 560px at 74% 26%, var(--maroon-2) 0%, var(--maroon-3) 46%, var(--ink) 82%);
  overflow:hidden;
}
.section--maroon{ background:var(--maroon); color:var(--cream); }

.grid{ display:grid; gap:18px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--5{ grid-template-columns:repeat(5,1fr); }
.grid--split{ grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.grid--split-start{ align-items:start; }
.grid--sidebar{ grid-template-columns:1fr 1.4fr; gap:56px; align-items:start; }
.grid--sidebar-r{ grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }

.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.row--between{ justify-content:space-between; }

/* Spacing helpers (few, deliberate) */
.mt-1{ margin-top:8px } .mt-2{ margin-top:14px } .mt-3{ margin-top:22px } .mt-4{ margin-top:32px }
.mt-5{ margin-top:44px } .mt-6{ margin-top:56px } .mt-7{ margin-top:72px }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-dark);
}
.eyebrow--gold{ color:var(--gold); }
.eyebrow--ochre{ color:var(--ochre); }
.eyebrow--muted{ color:var(--on-dark-3); font-family:var(--font-sans); letter-spacing:.14em; }
.eyebrow--muted-light{ color:var(--ochre); font-family:var(--font-sans); letter-spacing:.14em; font-size:10.5px; }

.h1{ font-size:clamp(42px,6.6vw,92px); line-height:.96; letter-spacing:-.044em; max-width:15ch; text-wrap:balance; margin-top:24px; }
.h1--xl{ font-size:clamp(46px,7.4vw,104px); line-height:.94; }
.h2{ font-size:clamp(32px,4.4vw,60px); line-height:1.02; letter-spacing:-.036em; max-width:18ch; text-wrap:balance; margin-top:20px; }
.h2--lg{ font-size:clamp(34px,5vw,68px); line-height:1; max-width:16ch; }
.h3{ font-size:clamp(22px,2.4vw,30px); letter-spacing:-.025em; line-height:1.1; }
.h4{ font-size:19px; letter-spacing:-.015em; line-height:1.2; }

.lede{ margin-top:24px; font-size:17px; line-height:1.6; color:var(--on-dark); max-width:56ch; text-wrap:pretty; }
.lede--sm{ font-size:15.5px; max-width:52ch; }
.section--cream .lede,.section--cream-2 .lede{ color:var(--text-muted); }
.muted{ color:var(--on-dark-2); }
.section--cream .muted,.section--cream-2 .muted,.card--light .muted{ color:var(--text-muted); }
.faint{ color:var(--on-dark-3); }
.section--cream .faint,.section--cream-2 .faint,.card--light .faint{ color:var(--text-faint); }
.gold{ color:var(--gold); }
.ochre{ color:var(--ochre); }
.mono{ font-family:var(--font-mono); }
.small{ font-size:13px; line-height:1.55; }
.xsmall{ font-size:11.5px; line-height:1.45; }
.bold{ font-weight:700; }
.balance{ text-wrap:balance; }
.pretty{ text-wrap:pretty; }
.max-44{ max-width:44ch } .max-52{ max-width:52ch } .max-62{ max-width:62ch }

.wordmark{
  font-family:var(--font-display); font-style:italic; font-weight:700; line-height:1; letter-spacing:0;
}
.wordmark span:first-child{ color:var(--cream); }
.wordmark span:last-child{ color:var(--gold); }

/* --------------------------------------------------------------------------
   Buttons, badges, pills
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; padding:15px 27px; font-size:14px; font-weight:700; line-height:1;
  border:1px solid transparent; white-space:nowrap; transition:all .2s ease;
}
.btn--lg{ padding:16px 30px; font-size:14.5px; }
.btn--sm{ padding:9px 17px; font-size:12.5px; }
.btn--gold{ background:var(--gold); color:#2A120A; }
.btn--gold:hover{ background:var(--gold-light); color:#2A120A; }
.btn--ghost{ border-color:rgba(246,239,228,.26); color:var(--cream); font-weight:600; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--ghost-dark{ border-color:var(--cream-3); color:var(--text-dark); background:#fff; font-weight:600; }
.btn--ghost-dark:hover{ border-color:var(--gold-dark); color:var(--text-dark); }
.btn--maroon{ background:var(--maroon); color:var(--cream); }
.btn--maroon:hover{ background:var(--maroon-2); color:var(--cream); }
.btn-group{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:36px; }

.badge{
  display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:7px 15px;
  border:1px solid rgba(216,162,63,.32); background:rgba(216,162,63,.1);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light);
  white-space:nowrap;
}
.badge--green{ border-color:rgba(127,203,155,.35); background:rgba(127,203,155,.08); color:var(--green); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; animation:scBlink 1.8s ease-in-out infinite; }
.dot--gold{ background:var(--gold); }
.dot--dark{ background:#2A120A; width:6px; height:6px; animation-duration:1.6s; }

.pill{
  display:inline-block; min-width:78px; text-align:center; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:3px 10px; flex-shrink:0; border:1px solid var(--line-dark-2); color:var(--on-dark);
}
.pill--ringing{ color:rgba(246,239,228,.7); border-color:rgba(246,239,228,.28); }
.pill--waiting{ color:var(--gold); border-color:rgba(216,162,63,.4); }
.pill--talking{ color:var(--green); border-color:rgba(127,203,155,.4); }
.pill--wrap{ color:var(--gold-light); border-color:rgba(240,203,126,.35); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  border:1px solid var(--line-dark-2); border-radius:var(--radius); padding:26px 28px; background:transparent;
}
.card--light{ background:#fff; border-color:var(--cream-3); color:var(--text-dark); }
.card--cream{ background:var(--cream-2); border-color:var(--cream-3); color:var(--text-dark); }
.card--maroon{ background:var(--maroon); border-color:transparent; color:var(--cream); }
.card--maroon-soft{ background:linear-gradient(165deg,rgba(106,32,38,.4),rgba(27,10,12,.9)); border-color:var(--line-dark-2); }
.card--gold{ border-color:rgba(216,162,63,.45); background:rgba(216,162,63,.1); }
.card--accent{ border-left:3px solid var(--ochre-2); }
.card--sm{ padding:22px 24px; border-radius:16px; }
.card--lg{ padding:34px 32px 30px; border-radius:22px; }
a.card{ display:block; transition:border-color .2s ease, background-color .2s ease, transform .2s ease; }
a.card:hover{ border-color:var(--gold-dark); }
a.card--maroon:hover{ background:var(--maroon-2); color:var(--cream); }
.card__kicker{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--ochre); }
.card--maroon .card__kicker,.card--dark .card__kicker,.section--dark .card:not(.card--light):not(.card--cream) .card__kicker{ color:var(--gold); }
.card__title{ font-size:26px; font-weight:800; margin-top:9px; letter-spacing:-.025em; line-height:1.1; }
.card__title--sm{ font-size:19px; }
.card__text{ font-size:14px; line-height:1.6; margin-top:8px; max-width:44ch; }
.card__cta{ font-size:13px; font-weight:700; color:var(--ochre); margin-top:16px; }
.card--maroon .card__cta{ color:var(--gold); }

/* Stat blocks */
.stats{ display:flex; margin-top:64px; border-top:1px solid var(--line-dark); padding-top:22px; max-width:780px; }
.stat{ flex:1; padding:0 22px; border-left:1px solid var(--line-dark); }
.stat:first-child{ padding-left:0; border-left:0; }
.stat__value{ font-family:var(--font-mono); font-size:27px; font-weight:700; color:var(--cream); line-height:1.15; }
.stat__value--gold{ color:var(--gold); }
.stat__label{ font-size:11.5px; color:var(--on-dark-3); margin-top:5px; }
.stats--cream{ border-top:0; padding:28px 32px; background:var(--cream-2); border-radius:var(--radius); max-width:none; gap:22px; display:grid; grid-template-columns:repeat(4,1fr); margin-top:44px; }
.stats--cream .stat{ border-left:0; padding:0; }
.stats--cream .stat__value{ font-size:34px; color:var(--maroon); }
.stats--cream .stat__value--gold{ color:var(--ochre); }
.stats--cream .stat__label{ font-size:13px; font-weight:700; color:var(--text-dark); }
.stats--cream .stat__sub{ font-size:11.5px; color:var(--text-faint); line-height:1.45; margin-top:3px; }

/* Lettered / numbered rows */
.rows{ display:flex; flex-direction:column; margin-top:44px; }
.rows__item{ display:flex; gap:18px; padding:17px 0; border-top:1px solid var(--line-dark); }
.rows__item:last-child{ border-bottom:1px solid var(--line-dark); }
.rows__key{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--gold-dark); width:18px; flex-shrink:0; padding-top:4px; }
.rows__title{ font-size:15.5px; font-weight:700; }
.rows__text{ font-size:13px; line-height:1.55; color:var(--on-dark-2); margin-top:4px; }
.section--cream .rows__item{ border-color:var(--cream-4); }
.section--cream .rows__key{ color:var(--ochre); }
.section--cream .rows__text{ color:var(--text-muted); }

.checklist{ display:flex; flex-direction:column; }
.checklist__item{ padding:14px 0; border-bottom:1px solid var(--cream-4); }
.checklist__item:last-child{ border-bottom:0; }
.checklist__title{ font-size:15px; font-weight:700; }
.checklist__text{ font-size:13px; line-height:1.5; color:var(--text-muted); margin-top:3px; }
.card:not(.card--light):not(.card--cream) .checklist__item{ border-color:var(--line-dark); }
.card:not(.card--light):not(.card--cream) .checklist__text{ color:var(--on-dark-2); }

.quote{ margin-top:18px; border-left:2px solid var(--gold); padding-left:20px; font-size:15px; line-height:1.6; color:rgba(246,239,228,.78); text-wrap:pretty; }
.section--cream .quote{ color:var(--text-muted); border-color:var(--ochre-2); }

/* Contact channel links */
.channel{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  border:1px solid var(--cream-3); background:#fff; color:var(--text-dark); border-radius:var(--radius-sm); padding:19px 24px;
}
.channel:hover{ border-color:var(--gold-dark); color:var(--text-dark); }
.channel--maroon{ background:var(--maroon); border-color:transparent; color:var(--cream); }
.channel--maroon:hover{ background:var(--maroon-2); color:var(--cream); }
.channel__label{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); }
.channel--maroon .channel__label{ color:var(--gold); }
.channel__value{ font-family:var(--font-mono); font-size:17px; font-weight:500; margin-top:4px; }
.channel__cta{ font-size:13px; font-weight:700; color:var(--ochre); white-space:nowrap; }
.channel--maroon .channel__cta{ color:var(--gold); }

/* Forms */
.form{ display:grid; gap:14px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; color:var(--text-dark); background:#fff; border:1px solid var(--cream-3);
  border-radius:12px; padding:13px 15px; width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold-dark); box-shadow:0 0 0 3px rgba(216,162,63,.2); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C6C1F' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; }
.form__note{ font-size:12.5px; color:var(--text-faint); line-height:1.5; }
.form__status{ display:none; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.5; font-weight:600; }
.form__status.is-ok{ display:block; background:rgba(127,203,155,.18); color:#1F6B3F; border:1px solid rgba(31,107,63,.25); }
.form__status.is-err{ display:block; background:rgba(224,107,107,.14); color:#8A2A2A; border:1px solid rgba(138,42,42,.25); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Marquee */
.marquee{ overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:inline-flex; gap:0; animation:scMarquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:14px; padding:0 22px; font-size:15px; font-weight:700; white-space:nowrap; }
.marquee__item::after{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7; }

/* Decorative pulse rings */
.rings{ position:absolute; pointer-events:none; }
.rings--hero{ right:-4%; top:50%; width:820px; height:820px; margin-top:-410px; }
.rings--cta{ right:-6%; top:4%; width:540px; height:540px; }
.rings__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(216,162,63,.4); animation:scPulse 5.2s ease-out infinite; }
.rings__ring:nth-child(2){ border-color:rgba(216,162,63,.34); animation-delay:1.3s; }
.rings__ring:nth-child(3){ border-color:rgba(216,162,63,.28); animation-delay:2.6s; }
.rings__ring:nth-child(4){ border-color:rgba(216,162,63,.22); animation-delay:3.9s; }
.rings--cta .rings__ring{ border-color:rgba(216,162,63,.16); animation-duration:6s; }
.rings--cta .rings__ring:nth-child(2){ border-color:rgba(216,162,63,.12); animation-delay:2s; }
.rings--cta .rings__ring:nth-child(3){ border-color:rgba(216,162,63,.1); animation-delay:4s; }
.rings__core{ position:absolute; left:50%; top:50%; width:190px; height:190px; margin:-95px 0 0 -95px; border-radius:50%; background:radial-gradient(circle,rgba(216,162,63,.2),transparent 68%); }

/* Wave bars */
.wave{ display:flex; gap:5px; align-items:flex-end; height:52px; margin-top:26px; }
.wave span{ flex:1; border-radius:2px; height:100%; transform-origin:bottom; animation:scWave 1.5s ease-in-out infinite; background:var(--gold-dark); }
.wave span:nth-child(1){ background:#5E1A1F; animation-delay:0s }   .wave span:nth-child(2){ background:#7A2228; animation-delay:.12s }
.wave span:nth-child(3){ background:#962C31; animation-delay:.24s } .wave span:nth-child(4){ background:#B0642C; animation-delay:.36s }
.wave span:nth-child(5){ background:#C7882B; animation-delay:.48s } .wave span:nth-child(6){ background:#D8A23F; animation-delay:.6s }
.wave span:nth-child(7){ background:#C7882B; animation-delay:.72s } .wave span:nth-child(8){ background:#B0642C; animation-delay:.84s }
.wave span:nth-child(9){ background:#962C31; animation-delay:.96s } .wave span:nth-child(10){ background:#7A2228; animation-delay:1.08s }

/* Scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:30px; margin-left:-9px; width:18px; height:28px; border:1px solid rgba(246,239,228,.3); border-radius:999px; display:flex; justify-content:center; padding-top:6px; }
.scroll-cue span{ width:3px; height:7px; border-radius:2px; background:var(--gold); animation:scBob 1.9s ease-in-out infinite; }

/* Tabs */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
  border:1px solid var(--line-dark-2); background:transparent; color:var(--on-dark); border-radius:999px;
  padding:9px 16px; font-size:12.5px; font-weight:700; transition:all .2s ease;
}
.tab:hover{ border-color:var(--gold); color:var(--cream); }
.tab.is-active{ background:var(--gold); border-color:var(--gold); color:#2A120A; }

/* Live board rows */
.board{ border:1px solid var(--line-dark-2); border-radius:22px; background:linear-gradient(165deg,rgba(106,32,38,.35),rgba(27,10,12,.92)); overflow:hidden; }
.board__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line-dark); flex-wrap:wrap; }
.board__title{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); }
.board__meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--gold); }
.board__rows{ display:flex; flex-direction:column; }
.board__row{ display:flex; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line-dark); animation:scRowIn .45s ease both; }
.board__row:last-child{ border-bottom:0; }
.board__name{ font-size:14.5px; font-weight:700; }
.board__detail{ font-family:var(--font-mono); font-size:11.5px; color:var(--on-dark-3); margin-top:3px; }
.board__clock{ font-family:var(--font-mono); font-size:13px; color:var(--cream); min-width:52px; text-align:right; }
.board__main{ flex:1; min-width:0; }
.board__foot{ display:flex; gap:28px; padding:16px 24px; border-top:1px solid var(--line-dark); flex-wrap:wrap; }
.board__stat{ font-family:var(--font-mono); font-size:12px; color:var(--on-dark-2); }
.board__stat strong{ color:var(--cream); font-weight:700; }

/* Timeline */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--line-dark-2); }
.timeline__fill{ position:absolute; left:8px; top:0; width:2px; height:0; background:linear-gradient(180deg,var(--gold-dark),var(--gold-light)); transition:height .2s linear; }
.section--cream .timeline::before{ background:var(--cream-3); }
.timeline__item{ position:relative; padding:0 0 34px; }
.timeline__item::before{ content:''; position:absolute; left:-31px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--ink); border:2px solid var(--gold); }
.section--cream .timeline__item::before{ background:var(--cream); }
.timeline__item:last-child{ padding-bottom:0; }

/* Table-ish list */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ text-align:left; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3); padding:12px 0; border-bottom:1px solid var(--line-dark-2); }
.table td{ padding:14px 0; border-bottom:1px solid var(--line-dark); vertical-align:top; }
.table tr:last-child td{ border-bottom:0; }
.section--cream .table th{ color:var(--text-faint); border-color:var(--cream-3); }
.section--cream .table td{ border-color:var(--cream-4); }
.table-wrap{ overflow-x:auto; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--gold-dark),var(--gold-light)); z-index:70; pointer-events:none; }

.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(27,10,12,.74); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(246,239,228,.08);
  transition:background-color .3s ease;
}
.header.is-scrolled{ background:rgba(27,10,12,.92); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--pad-x); min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:12px; color:var(--cream); }
.brand:hover{ color:var(--cream); }
.brand__mark{ width:46px; height:auto; flex-shrink:0; }
.brand .wordmark{ font-size:23px; }
.nav{ display:flex; align-items:center; gap:22px; }
.nav__link{ font-size:12.5px; font-weight:600; color:rgba(246,239,228,.68); white-space:nowrap; padding:6px 0; }
.nav__link:hover{ color:var(--cream); }
.nav__link.is-current{ color:var(--gold); font-weight:700; }
.nav__cta{ margin-left:6px; }
.nav-toggle{
  display:none; background:transparent; border:1px solid rgba(246,239,228,.2); color:var(--cream);
  border-radius:10px; width:44px; height:40px; align-items:center; justify-content:center; padding:0;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--cream); position:relative; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:var(--cream); transition:transform .25s ease, top .25s ease; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer{ background:var(--ink-2); border-top:1px solid rgba(246,239,228,.1); padding:48px var(--pad-x) 40px; color:var(--cream); }
.footer__inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand .brand__mark{ width:52px; }
.footer__brand .wordmark{ font-size:24px; }
.footer__tagline{ font-family:var(--font-script); font-weight:600; font-size:16px; color:var(--gold); margin-top:2px; }
.footer__cols{ display:flex; gap:30px; font-size:12.5px; font-weight:600; }
.footer__col{ display:flex; flex-direction:column; gap:7px; }
.footer__col a{ color:rgba(246,239,228,.6); }
.footer__col a:hover{ color:var(--cream); }
.footer__col span{ color:rgba(246,239,228,.35); }
.footer__contact{ font-family:var(--font-mono); font-size:12.5px; line-height:1.9; text-align:right; }
.footer__contact .faint{ color:rgba(246,239,228,.4); }
.footer__legal{ margin-top:34px; padding:18px 80px 0 0; border-top:1px solid rgba(246,239,228,.08); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11.5px; color:rgba(246,239,228,.38); }
.footer__legal a{ color:rgba(246,239,228,.5); }

/* WhatsApp float */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:55; width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:transform .2s ease;
}
.wa-float:hover{ transform:translateY(-2px); color:#fff; }
.wa-float svg{ width:28px; height:28px; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes scPulse{ 0%{ transform:scale(.55); opacity:0; } 12%{ opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
@keyframes scWave{ 0%,100%{ transform:scaleY(.22); } 50%{ transform:scaleY(1); } }
@keyframes scBob{ 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(8px); opacity:1; } }
@keyframes scBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes scMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes scRowIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Reveal: content is visible by default. Only when JS is running (html.js) do we
   hide-then-reveal, and never when the user prefers reduced motion. */
html.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal].is-visible{ opacity:1; transform:none; }
html.js [data-reveal][data-delay="1"]{ transition-delay:.07s } html.js [data-reveal][data-delay="2"]{ transition-delay:.14s }
html.js [data-reveal][data-delay="3"]{ transition-delay:.21s } html.js [data-reveal][data-delay="4"]{ transition-delay:.28s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .rings__ring,.wave span,.dot,.scroll-cue span,.marquee__track,.board__row{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1020px){
  .grid--4,.grid--5{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .stats--cream{ grid-template-columns:repeat(2,1fr); }
  .grid--split{ gap:48px; }
}
@media (max-width:880px){
  :root{ --pad-x:20px; --header-h:62px; }
  .section{ padding-top:72px; padding-bottom:72px; }
  .section--hero{ padding-top:calc(var(--header-h) + 56px); padding-bottom:64px; min-height:0 !important; }
  .scroll-cue{ display:none; }
  .h1{ margin-top:20px; }
  .lede{ margin-top:18px; font-size:16px; }
  .grid--2,.grid--3,.grid--split,.grid--sidebar,.grid--sidebar-r{ grid-template-columns:1fr; gap:18px; }
  .grid--split{ gap:40px; }
  .form__row{ grid-template-columns:1fr; }
  .btn-group{ margin-top:28px; }
  .stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 16px; max-width:none; margin-top:44px; padding-top:22px; }
  .stat{ border-left:0; padding:0; margin-top:0; }
  .stat__value{ font-size:24px; }
  .stats--cream{ padding:22px 20px; margin-top:32px; }
  .rows{ margin-top:32px; }
  .rings--hero{ width:520px; height:520px; margin-top:-260px; right:-30%; }
  .footer__inner{ align-items:flex-start; }
  .footer__contact{ text-align:left; }
  .footer__cols{ flex-wrap:wrap; gap:22px 30px; }

  /* No hide-then-reveal on phones: content is simply there. */
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }

  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 30px;
    background:rgba(27,10,12,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid rgba(246,239,228,.08);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease, transform .22s ease, visibility 0s; }
  .nav__link{ font-size:17px; font-weight:600; padding:15px 0; border-bottom:1px solid rgba(246,239,228,.08); }
  .nav__cta{ margin:18px 0 0; justify-content:center; padding:15px 20px; font-size:14px; }
  body.nav-open{ overflow:hidden; }
}
@media (max-width:560px){
  .badge{ white-space:normal; text-align:left; line-height:1.4; }
  .grid--4,.grid--5{ grid-template-columns:1fr; }
  .stats--cream{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .stats--cream .stat__value{ font-size:28px; }
  .btn{ padding:14px 22px; }
  .btn-group .btn{ width:100%; }
  .btn-group{ gap:10px; }
  .h1{ font-size:clamp(38px,11vw,54px); }
  .card{ padding:22px 20px; }
  .card--lg{ padding:26px 22px; }
  .board__row{ flex-wrap:wrap; gap:10px 14px; padding:14px 18px; }
  .board__main{ flex:1 1 100%; }
  .board__clock{ order:3; min-width:0; text-align:left; margin-left:auto; }
  .board__head,.board__foot{ padding-left:18px; padding-right:18px; }
}