/* 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:stretch}
.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);overflow:hidden;position:relative;display:flex;flex-direction:column}
.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:6px;border-top:1px solid var(--line-soft);padding-top:22px}
/* both cards stretch to the same height; the footnote sits on the bottom edge */
.calc-foot{margin-top:auto;padding-top:6px}

/* ---------- 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}

/* ---------- 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);
}

/* Trade icon tile: dark glass with a gold line icon. Forty solid gold
   blocks in motion read heavy; a lit outline on dark stays crisp. */
.client-icon{
  position:relative;width:40px;height:40px;flex:none;border-radius:12px;
  display:grid;place-items:center;color:var(--gold-hi);
  background:
    radial-gradient(120% 120% at 30% 20%,rgba(251,191,36,.22),rgba(212,150,10,.04) 60%),
    linear-gradient(160deg,#1D1A12,#0F0D09);
  border:1px solid rgba(212,150,10,.38);
  box-shadow:inset 0 1px 0 rgba(255,231,160,.14),0 0 18px rgba(212,150,10,.10);
  transition:border-color .28s,box-shadow .28s;
}
.client-icon svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(251,191,36,.35));
}
.client:hover .client-icon{border-color:rgba(251,191,36,.7);box-shadow:inset 0 1px 0 rgba(255,231,160,.2),0 0 24px rgba(212,150,10,.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}
/* copy on the left, the live booking calendar on the right */
.cta .wrap.cta-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
.cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;position:sticky;top:110px}
.booking{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:#FFFFFF;border:1px solid rgba(212,150,10,.4);
  box-shadow:0 0 0 6px rgba(212,150,10,.06),0 30px 70px rgba(0,0,0,.55);
  padding:6px;
}
/* holds the space until the embed script sizes the frame to the calendar */
.booking iframe{display:block;min-height:680px;width:100%;border:none;overflow:hidden}
/* same height as the calendar, so nothing shifts when it loads */
.booking-wait{
  display:flex;align-items:center;justify-content:center;min-height:680px;margin:0;
  color:#6B7280;font-size:14px;letter-spacing:.02em;
}
.booking-wait .dots::after{content:"...";animation:bookingDots 1.4s steps(4,end) infinite;display:inline-block;width:1.2em;text-align:left;overflow:hidden;vertical-align:bottom}
@keyframes bookingDots{0%{width:0}100%{width:1.2em}}
@media (prefers-reduced-motion:reduce){.booking-wait .dots::after{animation:none}}
.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 */
.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}

/* 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)}}

/* ==========================================================
   Illustrated graphics, drawn in brand gold
   ========================================================== */

.hl{font-style:normal;color:var(--gold)}

/* two-column section: headline on the left, graphic on the right */
.split-2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:center}

/* ---------- bento: isometric cards around a feature card ---------- */

.bento{
  display:grid;gap:14px;margin-top:44px;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:"a f b" "c f d";
}
.b-card{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(243,240,233,.035),rgba(243,240,233,0) 55%),var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 26px 28px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .3s,transform .3s;
}
.b-card:hover{border-color:rgba(212,150,10,.35);transform:translateY(-3px)}
.b-card h3{font-size:clamp(18px,1.8vw,21px);margin-top:4px}
.b-card p{font-size:15px;color:var(--muted);line-height:1.6}
.iso{display:block;width:100%;height:auto;aspect-ratio:240 / 150;margin-bottom:4px;overflow:visible}
/* strokes stay a constant pixel weight however far each drawing is zoomed */
.iso .edge,.iso .dash,.iso .floor{vector-effect:non-scaling-stroke}
.iso .edge{fill:none;stroke:#D4960A;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.iso .top{fill:rgba(212,150,10,.16)}
.iso .side-r{fill:rgba(212,150,10,.08)}
.iso .side-l{fill:rgba(212,150,10,.03)}
.iso .dash{fill:none;stroke:#D4960A;stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.iso .floor{fill:none;stroke:rgba(243,240,233,.09);stroke-width:.7}
.iso .glyph{fill:#FBBF24;font-family:"Space Grotesk",sans-serif;font-weight:700}
.b-card .iso-wrap{filter:drop-shadow(0 0 10px rgba(212,150,10,.28))}

.b-feature{
  grid-area:f;position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid rgba(212,150,10,.35);
  background:
    radial-gradient(80% 60% at 70% 35%,rgba(251,191,36,.22),transparent 70%),
    linear-gradient(165deg,#241803 0%,#3b2906 42%,#120c02 100%);
  min-height:560px;display:flex;flex-direction:column;justify-content:space-between;
  padding:32px 30px 30px;isolation:isolate;
  container-type:inline-size;
}
.b-feature .ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.b-feature::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,7,2,.72) 0%,rgba(10,7,2,0) 34%,rgba(10,7,2,0) 64%,rgba(10,7,2,.78) 100%);
}
.b-feature h3{font-size:clamp(26px,2.8vw,34px);line-height:1.12;letter-spacing:-.03em;max-width:13ch}
.b-feature p{font-size:15.5px;color:rgba(243,240,233,.88);line-height:1.6;max-width:34ch}

.toolbar{
  display:flex;align-items:center;gap:7px;align-self:center;
  padding:9px;border-radius:22px;max-width:calc(100% + 36px);
  background:rgba(20,14,4,.55);border:1px solid rgba(251,191,36,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.tool{
  --t:clamp(36px,calc((100cqi - 40px) / 5),54px);
  width:var(--t);height:var(--t);border-radius:calc(var(--t) * .29);display:grid;place-items:center;flex:none;
  color:#1A1204;
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F0E9 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.4),0 2px 0 rgba(255,255,255,.9) inset,0 -2px 0 rgba(26,18,4,.08) inset;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
}
.tool:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.45),0 0 0 3px rgba(251,191,36,.35),0 2px 0 rgba(255,255,255,.9) inset}
.tool svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool.mark{
  background:linear-gradient(160deg,#1A1610,#050505);color:var(--gold-hi);
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 0 0 1px rgba(251,191,36,.45),inset 0 1px 0 rgba(255,231,160,.2);
}
/* the Luxe letterform, lit gold like the wordmark */
.mark-l{
  font-family:var(--f-display);font-weight:700;font-size:clamp(19px,calc((100cqi - 40px) / 10),28px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(170deg,#FFE7A3 0%,#FBBF24 45%,#B47F0C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(251,191,36,.35));
}
.tool-plus{color:rgba(243,240,233,.7);font-size:20px;line-height:1;padding:0 2px}

/* ---------- integrations constellation ---------- */

.orbit{
  position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1 / 1;
}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-svg .ring{fill:none;stroke:rgba(243,240,233,.08);stroke-width:.25}
.orbit-svg .spoke{stroke:rgba(243,240,233,.1);stroke-width:.22}
.orbit-svg .spark{fill:#FBBF24}
.bracket{position:absolute;width:26px;height:26px;border-color:rgba(243,240,233,.28);border-style:solid;border-width:0}
.bracket.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.bracket.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.bracket.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.bracket.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}

.o-tile{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(38px,9%,54px);aspect-ratio:1 / 1;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#1B1F27,#101318);
  border:1px solid rgba(243,240,233,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--cream);transition:border-color .25s,color .25s,transform .25s;
}
.o-tile svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.o-tile:hover{border-color:rgba(212,150,10,.55);color:var(--gold-hi);transform:translate(-50%,-50%) scale(1.08)}
.o-tile .o-label{
  position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;white-space:nowrap;
  color:var(--muted);opacity:0;transition:opacity .2s;pointer-events:none;
}
.o-tile:hover .o-label,.o-tile:focus-visible .o-label{opacity:1}

.orbit-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40%;border-radius:12px;overflow:hidden;
  background:var(--card);border:1px solid rgba(212,150,10,.4);
  box-shadow:0 0 0 6px rgba(212,150,10,.06),0 0 60px rgba(212,150,10,.22),0 20px 40px rgba(0,0,0,.6);
  padding:8px;display:flex;flex-direction:column;gap:6px;
}
.core-bar{display:flex;align-items:center;gap:4px}
.core-bar i{width:5px;height:5px;border-radius:50%;background:rgba(243,240,233,.25)}
.core-bar b{margin-left:auto;font-family:var(--f-mono);font-size:7px;letter-spacing:.08em;color:var(--gold);font-weight:500}
.core-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.core-kpis span{
  display:flex;flex-direction:column;gap:1px;padding:5px;border-radius:5px;
  background:var(--fill-2);font-family:var(--f-display);font-size:9px;font-weight:600;color:var(--cream);
}
.core-kpis span small{font-family:var(--f-mono);font-size:6px;color:var(--muted-2);font-weight:400;letter-spacing:.06em}
.core-chart{display:block;width:100%;height:34px}
.core-rows{display:flex;flex-direction:column;gap:3px}
.core-rows i{display:block;height:5px;border-radius:3px;background:var(--fill-2)}
.core-rows i:nth-child(1){width:92%}
.core-rows i:nth-child(2){width:74%}
.core-rows i:nth-child(3){width:84%}

.orbit-caption{
  margin-top:26px;text-align:center;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;color:var(--muted-2);line-height:1.9;
}

/* ---------- layered rollout stack ---------- */

/* the front card stays in normal flow so the section grows with it;
   only the two ghost cards behind it are absolutely placed */
.stack{position:relative;padding-top:84px}
.s-card{
  position:absolute;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--card);box-shadow:0 30px 60px rgba(0,0,0,.55);
}
.s-card.back-2{
  top:0;right:0;width:72%;padding:18px 20px;
  opacity:.58;filter:blur(1px);transform:rotate(1.5deg);
}
.s-card.back-1{
  top:54px;left:0;width:46%;padding:18px 18px;
  opacity:.66;filter:blur(.6px);transform:rotate(-3deg);
}
.s-card.front{
  position:relative;margin-left:18%;margin-right:4%;padding:22px 22px 12px;z-index:1;
  background:linear-gradient(170deg,#161A21,#0E1015 60%);
  border-color:rgba(243,240,233,.16);
  box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(212,150,10,.06);
}
.s-ghost-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:5px 0}
.s-ghost-row b{font-family:var(--f-mono);font-weight:400;color:var(--cream-2)}
.s-ghost-num{font-family:var(--f-display);font-weight:700;font-size:26px;color:var(--cream);letter-spacing:-.04em;margin-top:8px}
.s-ghost-bar{height:5px;border-radius:3px;background:var(--fill-2);margin:6px 0 10px;position:relative;overflow:hidden}
.s-ghost-bar i{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--gold);border-radius:3px}

.s-title{font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:-.02em}
.s-window{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:var(--cream-2)}
.s-window svg{width:16px;height:16px;fill:none;stroke:var(--gold-hi);stroke-width:2;stroke-linejoin:round}
.s-scope{
  margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--fill);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.s-scope .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);width:100%}
.s-scope .v{font-size:15px;font-weight:500}
.s-scope .p{font-size:14px;color:var(--muted)}
.s-live{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 6px}
.s-live span:first-child{font-family:var(--f-display);font-weight:600;font-size:16px}
.s-live span:last-child{font-size:13px;color:var(--muted)}
.s-rows{display:flex;flex-direction:column}
.s-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line-soft)}
.s-av{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(251,191,36,.3),rgba(154,116,22,.25));
  border:1px solid rgba(212,150,10,.4);color:var(--gold-hi);
}
.s-av svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.s-who{font-size:14.5px;font-weight:500;line-height:1.25}
.s-what{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--muted-2);margin-top:2px;letter-spacing:.03em}
.s-day{font-family:var(--f-display);font-weight:600;font-size:14.5px;color:var(--cream)}
.s-row.done .s-day{color:var(--gold-hi)}

/* ---------- 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){
  .split-2{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"f f" "a b" "c d"}
  .b-feature{min-height:460px}
  .s-card.front{margin-left:6%;margin-right:0}
}

@media (max-width:600px){
  .bento{grid-template-columns:1fr;grid-template-areas:"f" "a" "b" "c" "d"}
  .s-card.back-1,.s-card.back-2{display:none}
  .stack{padding-top:0}
  .s-card.front{margin-left:0;margin-right:0}
  /* the core must stay inside the inner ring (r=28%) or it covers those tiles */
  .orbit-core{width:32%;padding:5px;gap:4px}
  .core-kpis span{font-size:7px;padding:3px}
  .core-chart{height:20px}
}

@media (max-width:960px){
  .manifesto-grid,.calc,.app-cols{grid-template-columns:1fr}
  .cta .wrap.cta-grid{grid-template-columns:1fr}
  .cta-copy{position:static}
  .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}
}