/* Luxe Consulting
   Layout language matched to consulting.ie: near-black ground, cream type,
   animated warm-gradient offer bar, pill controls, rounded hairline cards,
   faint graph-paper grid.
   Colour is Luxe's own, brand gold #D4960A, not consulting.ie's blue.
   Committed dark theme, every colour is painted explicitly. */

:root{
  /* grounds */
  --ink:#08090C;
  --ink-2:#0C0C0C;
  --card:#0E1015;
  --card-2:#14171D;
  --card-3:#0C0E12;

  /* type */
  --cream:#F3F0E9;
  --cream-2:rgba(243,240,233,.82);
  --muted:#9AA0AC;
  --muted-2:#868C99;

  /* accent, Luxe Consulting brand gold.
     --gold is the accent set on [data-acc="luxe"] in the Command Center;
     --gold-wordmark is the softer gold the dashboard wordmark uses. */
  --gold:#D4960A;
  --gold-hi:#FBBF24;
  --gold-2:#9A7416;
  --gold-wordmark:#C9A24B;
  --gold-soft:rgba(212,150,10,.20);
  --gold-faint:rgba(212,150,10,.09);

  /* semantic */
  --good:#6FD79E;
  --bad:#FF7A6B;

  /* lines + fills */
  --line:rgba(243,240,233,.12);
  --line-soft:rgba(243,240,233,.07);
  --fill:rgba(243,240,233,.027);
  --fill-2:rgba(243,240,233,.055);

  --warm:linear-gradient(90deg,#FFD23F,#FF9E2C,#FF5E3A,#FFB838,#FF7A2F,#FF4D5E,#FF9E2C,#FFD23F);

  --f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-pill:999px;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:12px;

  --wrap:1200px;
  --pad:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.03em;
  text-wrap:balance;
  margin:0;
  color:var(--cream);
}
p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
svg{max-width:100%}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cream);color:#0C0C0C;padding:12px 18px;border-radius:var(--r-pill);font-weight:600}
.skip:focus{left:12px;top:12px}

/* graph-paper grid, used on dark panels */
.grid-bg{
  background-image:
    linear-gradient(to right,rgba(243,240,232,.1) 1px,rgba(0,0,0,0) 1px),
    linear-gradient(rgba(243,240,232,.1) 1px,rgba(0,0,0,0) 1px);
  background-size:64px 64px;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.mute{color:var(--muted-2)}

.lede{font-size:clamp(17px,1.6vw,19px);line-height:1.7;color:var(--cream-2);max-width:62ch}
.note{font-size:14px;line-height:1.6;color:var(--muted-2);max-width:44ch}

/* ---------- offer bar ---------- */

.topbar{position:relative;overflow:hidden;background:#0C0C0C}
.topbar::before{
  content:"";position:absolute;inset:0;
  background:var(--warm);background-size:220% 100%;
  animation:drift 14s linear infinite;
  opacity:.92;
}
@keyframes drift{to{background-position:220% 0}}
.topbar .wrap{
  position:relative;display:flex;gap:12px;align-items:center;justify-content:center;
  padding-block:9px;text-align:center;flex-wrap:wrap;
  font-size:13px;color:#1A0F00;
}
.topbar strong{font-weight:600}
.topbar a{color:#1A0F00;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(26,15,0,.4);white-space:nowrap}
.topbar a:hover{border-bottom-color:#1A0F00}

/* ---------- nav ---------- */

.nav-shell{position:sticky;top:0;z-index:80;padding:14px 0;background:linear-gradient(var(--ink) 55%,rgba(8,9,12,0))}
nav{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
  background:rgba(10,14,20,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 7px 7px 20px;
  transition:background .3s,border-color .3s;
}
.nav-shell.stuck .nav-inner{background:rgba(10,14,20,.9)}

/* Luxe Consulting wordmark, same construction as the dashboard logo:
   LUXE in heavy sans, CONSULTING in gold Georgia at wide tracking. */
.brand{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;line-height:1}
.brand-luxe{
  font-family:var(--f-display);font-weight:700;font-size:18px;
  letter-spacing:.05em;color:var(--cream);
}
.brand-consulting{
  font-family:Georgia,"Times New Roman",serif;
  font-size:9px;letter-spacing:.22em;color:var(--gold-wordmark);
}
.brand-lg{flex-direction:column;align-items:flex-start;gap:0}
.brand-lg .brand-luxe{font-size:34px;border-bottom:2px solid var(--gold-wordmark);padding-bottom:6px}
.brand-lg .brand-consulting{font-size:13px;letter-spacing:.3em;margin-top:7px}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--cream-2);padding:8px 14px;border-radius:var(--r-pill);transition:background .2s,color .2s}
.nav-links a:hover{background:var(--fill-2);color:var(--cream)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  border-radius:var(--r-pill);padding:9px 20px;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn-primary{background:var(--cream);color:#0C0C0C;border-color:var(--cream);font-weight:600}
.btn-primary:hover{transform:translateY(-1px);background:#fff}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.btn-ghost:hover{background:var(--fill-2);border-color:rgba(243,240,233,.22)}

/* pill button with the trailing arrow disc */
.btn-arrow{padding:4px 4px 4px 20px}
.btn-arrow .disc{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#0C0C0C;color:var(--cream);font-size:13px;flex:none;
  transition:transform .2s;
}
.btn-arrow:hover .disc{transform:translate(2px,-2px)}
.btn-lg{font-size:15px;padding:12px 26px}
.btn-lg.btn-arrow{padding:5px 5px 5px 24px}
.btn-lg.btn-arrow .disc{width:36px;height:36px;font-size:14px}

:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- hero ---------- */

.hero{padding:8px 0 clamp(40px,6vw,72px)}
.hero .wrap{padding-inline:var(--pad)}

.hero-panel{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-2);
  padding:clamp(34px,6vw,88px) clamp(22px,5vw,68px) 0;
  isolation:isolate;
}
.hero-panel .grid-layer{position:absolute;inset:0;opacity:.5;z-index:0}
.hero-panel .glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 42% at 22% 8%,rgba(212,150,10,.16),transparent 62%),
    radial-gradient(52% 38% at 88% 4%,rgba(255,122,47,.13),transparent 66%),
    radial-gradient(125% 95% at 50% 42%,rgba(0,0,0,0) 45%,rgba(12,12,12,.62) 100%);
}
.hero-inner{position:relative;z-index:1}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--cream-2);background:var(--fill);border:1px solid var(--line);
  padding:6px 12px;border-radius:var(--r-pill);
}

h1{
  font-size:clamp(38px,7.6vw,86px);
  font-weight:600;letter-spacing:-.032em;line-height:1.03;
  margin:24px 0 0;max-width:15ch;
}
h1 .w{display:inline-block;animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
h1 em{font-style:normal;color:var(--gold)}

.hero-sub{margin-top:26px;max-width:58ch;font-size:clamp(16px,1.6vw,19px);color:var(--cream-2);line-height:1.7}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

/* the dashboard peeking out of the bottom of the hero */
.hero-preview{
  margin-top:clamp(34px,5vw,64px);
  border:1px solid var(--line);border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md);
  border-bottom:0;background:var(--card);overflow:hidden;
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
}

/* ---------- app-window dashboard mock ---------- */

.app{display:grid;grid-template-columns:190px 1fr;min-height:0}
.app-side{border-right:1px solid var(--line);padding:16px 12px;background:var(--card-3);display:flex;flex-direction:column;gap:16px}
.app-brand{display:flex;align-items:center;gap:9px;padding:4px 8px}
.app-logo{width:24px;height:24px;border-radius:7px;background:linear-gradient(120deg,#9A7416,#FBBF24 55%,#D4960A);flex:none}
.app-brand span{font-size:13px;font-weight:600;color:var(--cream)}
.app-nav{display:flex;flex-direction:column;gap:2px}
.app-nav li{
  font-size:12.5px;color:var(--muted);padding:7px 10px;border-radius:9px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.app-nav li.on{background:var(--fill-2);color:var(--cream)}
.app-nav .tag{font-family:var(--f-mono);font-size:10px;color:var(--gold);background:var(--gold-faint);padding:2px 6px;border-radius:var(--r-pill)}

.app-main{padding:16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.app-title{font-family:var(--f-display);font-size:15px;font-weight:600}
.app-sub{font-family:var(--f-mono);font-size:11px;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--fill);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:13px}
.kpi-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.kpi-val{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,2vw,24px);margin-top:7px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kpi-delta{font-size:11px;margin-top:4px;color:var(--good)}

.app-cols{display:grid;grid-template-columns:1.45fr .85fr 1fr;gap:10px;min-width:0}
.panel{background:var(--fill);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px;min-width:0}
.panel-title{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.spark{display:block;width:100%;height:118px}
.spark .gridline{stroke:rgba(243,240,232,.07)}
.spark-line{fill:none;stroke:#D4960A;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark-dot{fill:#D4960A}

.jobs{display:flex;flex-direction:column}
.job-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.job-row:last-child{border-bottom:0}
.job-row .src{color:var(--muted-2);font-size:10.5px;display:block;margin-top:2px;font-family:var(--f-mono)}
.badge{font-family:var(--f-mono);font-size:9.5px;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.06em;text-transform:uppercase}
.badge.won{background:rgba(111,215,158,.12);color:var(--good)}
.badge.booked{background:var(--gold-faint);color:var(--gold)}
.badge.new{background:var(--fill-2);color:var(--muted)}

/* ---------- sections ---------- */

section{padding:clamp(60px,8vw,110px) 0}
.section-head{max-width:66ch;display:flex;flex-direction:column;gap:14px}
h2{font-size:clamp(28px,4.4vw,54px);letter-spacing:-.03em;line-height:1.08}
h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.02em;line-height:1.22}

/* manifesto */
.manifesto{border-block:1px solid var(--line);background:var(--ink-2)}
.manifesto-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,5vw,64px);align-items:center}
.manifesto blockquote{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(21px,3vw,34px);line-height:1.22;letter-spacing:-.035em;max-width:22ch;
}
.sign{font-size:13px;color:var(--muted-2);margin-top:20px}
.sign strong{color:var(--cream);font-weight:600;display:block}

/* ---------- calculator ---------- */

.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,48px);margin-top:40px;align-items:start}
.controls{display:flex;flex-direction:column;gap:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,3vw,30px)}
.ctrl{display:flex;flex-direction:column;gap:8px}
.ctrl-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.ctrl-label{font-size:13.5px;color:var(--cream-2)}
.ctrl-val{font-family:var(--f-mono);font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:var(--r-pill);background:var(--fill-2);outline:none;margin:8px 0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cream);border:0;cursor:pointer;box-shadow:0 0 0 4px rgba(243,240,233,.1)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--cream);border:0;cursor:pointer;box-shadow:0 0 0 4px rgba(243,240,233,.1)}

.readout{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,3vw,34px);position:sticky;top:100px;overflow:hidden;position:relative}
.readout .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 50% 0%,rgba(255,94,58,.10),transparent 70%)}
.readout > *{position:relative}
.big-num{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(40px,6.4vw,68px);line-height:1;letter-spacing:-.05em;
  color:var(--cream);font-variant-numeric:tabular-nums;margin:12px 0 6px;
}
.big-num.good{color:var(--good)}
.breakdown{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.brow{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.brow dt{color:var(--muted-2)}
.brow dd{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--cream)}
.recover{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:20px}

/* ---------- stages ---------- */

.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.stage{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;
  transition:background .25s,border-color .25s,transform .25s;
}
.stage:hover{background:var(--card-2);border-color:rgba(243,240,233,.2);transform:translateY(-2px)}
.stage-n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.stage p:not(.stage-n){font-size:15px;color:var(--cream-2);line-height:1.65}

/* ---------- pills row ---------- */

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.pills li{
  font-size:14.5px;color:var(--cream-2);background:var(--fill);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:10px 18px;transition:background .2s,color .2s;
}
.pills li:hover{background:var(--fill-2);color:var(--cream)}

/* ---------- rollout timeline ---------- */

.rollout{margin-top:40px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.rollout-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.roll-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.roll-row:last-child{border-bottom:0}
.roll-who{font-size:14px;font-weight:500}
.roll-what{font-family:var(--f-mono);font-size:11.5px;color:var(--muted-2);display:block;margin-top:3px;letter-spacing:.05em}
.roll-day{font-family:var(--f-mono);font-size:12px;color:var(--gold);white-space:nowrap}

/* ---------- clients ---------- */

/* ---------- client tape ----------
   A continuous marquee running right-to-left. The track holds the roster
   twice over, so translating it exactly -50% lands on an identical frame
   and the loop is seamless. Full-bleed, with the edges masked out. */

.tape{
  position:relative;
  margin-top:44px;
  width:100vw;margin-left:calc(50% - 50vw);
  padding-block:6px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.tape-track{
  display:flex;width:max-content;
  animation:tape 64s linear infinite;
  will-change:transform;
}
/* Spacing goes on every item rather than in `gap`. With gap, the track
   measures sum(items) + 39 gaps, so -50% lands half a gap short of the
   clone and the loop visibly jumps. A trailing margin on each item makes
   the pattern perfectly periodic, so -50% is exactly one full set. */
.tape-track > .client{margin-right:10px}
@keyframes tape{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tape:hover .tape-track,.tape:focus-within .tape-track{animation-play-state:paused}

.client{
  position:relative;flex:none;
  display:flex;align-items:center;gap:13px;
  padding:13px 22px 13px 14px;white-space:nowrap;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(243,240,233,.055),rgba(243,240,233,.012) 46%),var(--card);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s;
}
/* a hairline of brand gold catching the top edge, like light on a rail */
.client::before{
  content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  opacity:.85;
}
.client:hover{
  transform:translateY(-3px);
  border-color:rgba(212,150,10,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(212,150,10,.10);
}

.client-mono{
  width:34px;height:34px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.02em;
  color:#1A1204;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 55%,var(--gold-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.client-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.client-name{font-size:14.5px;font-weight:500;color:var(--cream);line-height:1.2}
.client-sector{font-family:var(--f-mono);font-size:10px;color:var(--gold);letter-spacing:.11em;text-transform:uppercase;line-height:1}

/* ---------- VSL placeholder ----------
   Drop a real embed in by replacing the .vsl-inner contents with an
   <iframe> or <video>; the 16:9 frame and styling stay as they are. */

.vsl{padding-top:0}
.vsl-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-2);
  aspect-ratio:16 / 9;
  isolation:isolate;
}
.vsl-frame .grid-layer{position:absolute;inset:0;opacity:.38;z-index:0}
.vsl-frame .glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 55% at 50% 46%,rgba(212,150,10,.15),transparent 68%),
    radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 40%,rgba(8,9,12,.75) 100%);
}
.vsl-inner{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;padding:24px;
}
.vsl-play{
  width:78px;height:78px;border-radius:50%;flex:none;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(212,150,10,.45);
  background:linear-gradient(140deg,rgba(212,150,10,.22),rgba(212,150,10,.06));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .25s,border-color .25s,background .25s;
}
.vsl-play::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:19px solid var(--gold-hi);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}
.vsl-play:hover{transform:scale(1.06);border-color:var(--gold);background:linear-gradient(140deg,rgba(212,150,10,.32),rgba(212,150,10,.1))}
@media (prefers-reduced-motion:no-preference){
  .vsl-play{animation:halo 3.4s ease-out infinite}
}
@keyframes halo{
  0%{box-shadow:0 0 0 0 rgba(212,150,10,.30)}
  70%{box-shadow:0 0 0 26px rgba(212,150,10,0)}
  100%{box-shadow:0 0 0 0 rgba(212,150,10,0)}
}
.vsl-title{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.03em;max-width:22ch}
.vsl-meta{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.vsl-note{
  position:absolute;left:16px;bottom:14px;z-index:1;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}

/* A moving tape is decoration. Without motion it becomes a plain
   horizontally scrollable row that the reader drives themselves. */
@media (prefers-reduced-motion:reduce){
  .tape{overflow-x:auto;-webkit-mask-image:none;mask-image:none;width:auto;margin-left:0}
  .tape-track{animation:none;width:auto}
}

.quote-slot{border:1px dashed var(--line);border-radius:var(--r-md);padding:clamp(24px,3.4vw,40px);margin-top:36px;background:var(--fill)}
.quote-slot blockquote{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2.4vw,26px);line-height:1.28;letter-spacing:-.03em;color:var(--muted);max-width:34ch;margin-top:12px}

/* ---------- phases ---------- */

.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.phase{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:12px}
.phase .when{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.phase ul{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.phase li{font-size:14.5px;color:var(--cream-2);line-height:1.6;padding-left:16px;position:relative}
.phase li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold)}

/* ---------- cta + footer ---------- */

.cta{border-top:1px solid var(--line);background:var(--ink-2);position:relative;overflow:hidden}
.cta .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 0%,rgba(212,150,10,.12),transparent 70%)}
.cta .wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.cta h2{max-width:17ch}
.contact-line{font-size:14px;color:var(--muted-2)}
.contact-line a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(212,150,10,.35)}
.contact-line a:hover{border-bottom-color:var(--gold)}

.big-foot{border-top:1px solid var(--line);padding:clamp(44px,7vw,90px) 0 0;background:var(--ink)}
.big-foot h2{font-size:clamp(28px,6vw,66px);letter-spacing:-.045em;max-width:18ch}
footer{padding:32px 0;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:clamp(34px,5vw,60px);border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- charts ----------
   Series colours are validated for dark-surface CVD separation
   (gold #BE8A05 / blue #3E8FD0, adjacent CVD ΔE 23.6).
   Labels and values always wear text tokens, never the series colour. */

.chart-cap{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:14px;
}

/* horizontal magnitude bars, used by the leak funnel and the scorecard */
.bars{display:flex;flex-direction:column;gap:13px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:baseline}
.bar-k{font-size:13.5px;line-height:1.4;color:var(--cream-2)}
.bar-v{font-family:var(--f-mono);font-size:13.5px;color:var(--cream);font-variant-numeric:tabular-nums}
.bar-track{grid-column:1 / -1;height:9px;background:var(--fill-2);border-radius:var(--r-pill);overflow:hidden}
.bar-fill{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--gold);width:0;
  transition:width .55s cubic-bezier(.2,.7,.3,1);
}
/* "lost" is a state, not a series, reserved status colour, always labelled */
.bar-row.lost .bar-k{color:var(--bad)}
.bar-row.lost .bar-fill{background:var(--bad)}
.bar-row.muted .bar-fill{background:var(--gold-2)}

.funnel{margin-top:24px;border-top:1px solid var(--line-soft);padding-top:20px}

/* scorecard */
.scorecard{
  margin-top:40px;display:grid;grid-template-columns:1.15fr .85fr;gap:12px;align-items:start;
}
.score-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.6vw,30px)}
.score-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.score-total{font-family:var(--f-display);font-weight:600;font-size:34px;letter-spacing:-.04em;color:var(--gold);font-variant-numeric:tabular-nums}
.score-total small{font-size:15px;color:var(--muted-2);font-weight:400;letter-spacing:0}

/* two-series stacked split bar */
.split{margin-top:4px}
.split-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:11px}
.lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--cream-2)}
.lg i{width:9px;height:9px;border-radius:3px;flex:none}
.split-bar{display:flex;gap:2px;height:11px;margin-bottom:9px}
.split-bar .seg{display:block;height:100%;border-radius:3px}
.split-bar .seg:first-child{border-radius:var(--r-pill) 3px 3px var(--r-pill)}
.split-bar .seg:last-child{border-radius:3px var(--r-pill) var(--r-pill) 3px}
.split-labels{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:11px;color:var(--muted-2)}

/* KPI sparkline */
.kpi-spark{display:block;width:100%;height:22px;margin-top:8px;overflow:visible}
.kpi-spark path{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kpi-spark circle{fill:var(--gold-hi)}

/* ---------- six-stage flow diagram ---------- */

.flow{margin-top:40px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:26px 22px 20px;overflow-x:auto}
.flow svg{display:block;min-width:760px;width:100%;height:auto}
.flow .rail{stroke:var(--line);stroke-width:2;fill:none}
.flow .rail-lit{stroke:var(--gold);stroke-width:2;fill:none;opacity:.55}
.flow .node{fill:var(--card-2);stroke:var(--gold);stroke-width:1.5}
.flow .node-n{font-family:var(--f-mono);font-size:10px;fill:var(--gold)}
.flow .node-t{font-family:"Inter",sans-serif;font-size:12px;fill:#F3F0E9}
.flow .node-s{font-family:"JetBrains Mono",monospace;font-size:9px;fill:#8B909B;letter-spacing:.06em}
.flow .pulse{fill:var(--gold-hi)}
@media (prefers-reduced-motion:no-preference){
  .flow .pulse{animation:travel 7s linear infinite}
}
@keyframes travel{from{transform:translateX(0)}to{transform:translateX(700px)}}

/* ---------- reveal ---------- */

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  h1 .w{animation:none;opacity:1;transform:none}
}

/* ---------- responsive ---------- */

@media (max-width:960px){
  .manifesto-grid,.calc,.app-cols,.scorecard{grid-template-columns:1fr}
  .stages,.phases{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .readout{position:static}
  .nav-links{display:none}
  .app{grid-template-columns:1fr}
  .app-side{display:none}
}

@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
  .roll-row{grid-template-columns:1fr auto}
  .topbar .wrap{font-size:12px}
}