/* =========================================================================
   Humayun Roshid · pitch site (system A)
   Oxium house skin (house/pitch-skin.css): navy-black, flat tinted glass, lit edges.
   ========================================================================= */

@font-face { font-family: "Cabinet Grotesk"; src: url("assets/fonts/cabinet-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("assets/fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("assets/fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f4f5f3;
  --bg-2: #eceeeb;
  --surface: #ffffff;
  --surface-2: #f7f8f6;
  --line: rgba(214, 232, 255, 0.12);
  --line-soft: rgba(214, 232, 255, 0.07);

  --text: #15201f;
  --text-2: #586664;
  --text-3: #5d6a68;

  --accent: #1d6b63;
  --accent-2: #2a8c82;
  --accent-deep: #174f4a;
  --accent-ink: #f4f5f3;
  --accent-soft: rgba(110, 200, 245, 0.10);

  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Cabinet Grotesk", "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  --section-y: clamp(72px, 11vh, 132px);
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------- Base --------------------------------- */
[hidden] { display: none !important; } /* mode-switched elements must stay hidden even when a component sets display */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* page canvas: light corner tech-frame accents + brushed diagonal streaks (gradients.md #10 + #9) */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(110, 200, 245, 0.10), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(110, 200, 245, 0.07), transparent 60%),
    repeating-linear-gradient(115deg, rgba(214, 232, 255, 0.018) 0 1px, transparent 1px 9px),
    linear-gradient(115deg, var(--bg), var(--bg-2)); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; }
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }

/* ------------------------------ Typography ------------------------------ */
.hero__eyebrow { color: var(--accent); }
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.section__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Small directional arrows */
.arrow, .arrow-down {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  vertical-align: middle;
  margin-left: 7px;
  transition: transform 0.3s var(--ease);
}
.arrow { transform: rotate(-45deg); }
.arrow-down { transform: rotate(45deg); margin-left: 8px; }

/* -------------------------------- Reveal -------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.hero__inner .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero__inner .reveal:nth-child(2) { transition-delay: 0.18s; }
.hero__inner .reveal:nth-child(3) { transition-delay: 0.3s; }

/* -------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 26px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: var(--accent-ink); position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent); transition: transform 0.6s var(--ease); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(110, 200, 245, 0.45); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 17px 40px; font-size: 1.1rem; }

/* --------------------------------- Hero --------------------------------- */
.hero {
  text-align: center;
  padding-top: clamp(80px, 13vh, 148px);
  padding-bottom: clamp(24px, 4vh, 48px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% 0 -5%;
  background: radial-gradient(120% 70% at 50% -10%, rgba(110, 200, 245, 0.10), transparent 60%);
  pointer-events: none;
  animation: glowDrift 16s ease-in-out infinite alternate;
}
.hero__inner { position: relative; }
.hero__title {
  margin: 0 auto;
  max-width: 1080px;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}
/* Word-by-word reveal (applied once JS splits the headline) */
.hero__title.split { opacity: 1; transform: none; transition: none; } /* the words carry the entrance; no transition on the h1 itself so GSAP never samples a half-way state */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  will-change: opacity, transform, filter;
}
.hero__title.is-in .word { opacity: 1; transform: none; filter: blur(0); }

.mark { position: relative; white-space: nowrap; color: var(--accent-deep); }
.mark::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -0.04em;
  height: 0.09em;
  background: var(--accent);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.5s;
}
.hero__title.is-in .mark::after { transform: scaleX(1); }

.hero__actions { margin-top: 40px; display: flex; justify-content: center; }
.hero__actions .arrow-down { animation: chevBob 2.2s var(--ease) infinite; }

/* -------------------------------- Player --------------------------------
   The custom native player. Its constants are tuned — recolour it, never
   redesign it (references/hero-video-player.md). Two deliberate choices:
   NO time readouts (a visible duration invites "how long is this?" before
   they have started), and captions ON by default with the live word painted
   in the accent, because most of these get opened on mute in a DM. */
.hplayer { margin: 44px auto 0; max-width: 760px; }
.hplayer__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #05060a; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.hplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #05060a; }

/* dark scrim behind the big play button (idle only) */
.hplayer__scrim { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  background: radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0.12), rgba(0,0,0,0.55)); }
.hplayer__stage:not([data-state="idle"]) .hplayer__scrim { opacity: 0; }

/* big centred play */
.hplayer__big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.09); backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease), border-color 0.4s var(--ease); }
.hplayer__big svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; position: relative; z-index: 1; }
.hplayer__big-glow { position: absolute; inset: 0; border-radius: 50%; animation: hpPulse 2.8s ease-out infinite; }
.hplayer__big:hover { transform: translate(-50%, -50%) scale(1.07); background: rgba(255,255,255,0.17); border-color: #fff; }
.hplayer__stage:not([data-state="idle"]) .hplayer__big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }
@keyframes hpPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  70%  { box-shadow: 0 0 0 22px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* captions overlay */
.hplayer__cc { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); max-width: 84%; text-align: center;
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.08rem); line-height: 1.4; color: #fff; pointer-events: none;
  transition: bottom 0.3s var(--ease); }
.hplayer__cc span { background: rgba(6,8,14,0.64); padding: 3px 10px; border-radius: 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hplayer__cc i { font-style: normal; transition: color 0.12s linear; }
/* the live word's plate is drawn with box-shadow spread, not padding, so nothing reflows */
.hplayer__cc i.is-live { color: var(--accent); border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.hplayer__cc:empty { display: none; }
/* captions stay out of the idle frame: poster, one play button, nothing else */
.hplayer__stage[data-state="idle"] .hplayer__cc { opacity: 0; }
.hplayer__stage:hover .hplayer__cc, .hplayer__stage[data-state="paused"] .hplayer__cc { bottom: 82px; }

/* control bar */
.hplayer__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: linear-gradient(to top, rgba(4,6,10,0.85), rgba(4,6,10,0.4) 60%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.hplayer__stage:hover .hplayer__bar, .hplayer__stage[data-state="paused"] .hplayer__bar,
.hplayer__stage.hp-touch .hplayer__bar { opacity: 1; transform: none; }
.hplayer__stage[data-state="idle"] .hplayer__bar { opacity: 0; pointer-events: none; }

.hp-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: none; background: transparent;
  color: #fff; cursor: pointer; border-radius: 8px; opacity: 0.82; transition: opacity 0.2s var(--ease), background 0.2s var(--ease); }
.hp-btn:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.hp-btn svg { width: 20px; height: 20px; fill: #fff; }
.hp-btn--mute svg, .hp-btn--full svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-i-play, .hp-i-sound { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-pause, .hplayer__stage[data-state="idle"] .hp-i-pause { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-play, .hplayer__stage[data-state="idle"] .hp-i-play { display: block; }

.hp-spacer { flex: 1 1 auto; }

/* the progress line: bottom edge of the frame, above the bar, always visible in playback */
.hp-scrub { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 22px;
  display: flex; align-items: flex-end; cursor: pointer; touch-action: none;
  opacity: 0; transition: opacity 0.3s var(--ease); }
.hplayer__stage:not([data-state="idle"]) .hp-scrub { opacity: 1; }
.hplayer__stage[data-state="idle"] .hp-scrub { pointer-events: none; }
/* a dark plate so the line survives bright footage and reads at 0% */
.hp-scrub__plate { position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: rgba(4,6,10,0.6); transition: height 0.15s var(--ease); }
.hp-scrub__track { position: relative; width: 100%; height: 6px; overflow: hidden;
  background: rgba(255,255,255,0.18); transition: height 0.15s var(--ease); }
.hp-scrub:hover .hp-scrub__track, .hp-scrub.dragging .hp-scrub__track,
.hp-scrub:focus-visible .hp-scrub__track { height: 10px; }
.hp-scrub:hover .hp-scrub__plate, .hp-scrub.dragging .hp-scrub__plate,
.hp-scrub:focus-visible .hp-scrub__plate { height: 10px; }
.hp-scrub__buf { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(255,255,255,0.26); }
.hp-scrub__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
/* white leading-edge cap, something to aim the drag at */
.hp-scrub__cap { position: absolute; bottom: 0; left: 0; width: 4px; height: 14px; background: #fff;
  border-radius: 2px; transform: translateX(-50%) scaleY(0); transform-origin: bottom center;
  transition: transform 0.18s var(--ease); box-shadow: 0 0 8px rgba(255,255,255,0.6); }
.hp-scrub:hover .hp-scrub__cap, .hp-scrub.dragging .hp-scrub__cap,
.hp-scrub:focus-visible .hp-scrub__cap { transform: translateX(-50%) scaleY(1); }
.hp-scrub:focus-visible { outline: none; }

/* CC toggle */
.hp-btn--cc { width: auto; padding: 0 9px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; }
.hp-btn--cc.is-on { background: rgba(255,255,255,0.18); opacity: 1; }

/* speed */
.hp-speed { position: relative; }
.hp-btn--speed { width: auto; padding: 0 9px; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-speed__menu { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); min-width: 76px; padding: 6px;
  background: rgba(10,12,18,0.97); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: none; flex-direction: column; gap: 2px; }
.hp-speed__menu.open { display: flex; }
.hp-speed__menu button { border: none; background: transparent; color: rgba(255,255,255,0.8); font-size: 0.78rem; font-weight: 600;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; }
.hp-speed__menu button:hover { background: rgba(255,255,255,0.09); color: #fff; }
.hp-speed__menu button.is-on { background: rgba(255,255,255,0.15); color: #fff; }

@media (max-width: 560px) {
  .hp-btn { width: 30px; height: 30px; }
  .hp-btn--full { display: none; }
  .hplayer__cc { bottom: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .hplayer__big-glow { animation: none; }
  .hplayer__big, .hplayer__bar, .hplayer__scrim, .hplayer__cc,
  .hp-scrub, .hp-scrub__track, .hp-scrub__plate, .hp-scrub__cap { transition: none; }
  .hplayer__cc i { transition: none; }
}

/* ----------------------------- Deliverables ----------------------------- */
.deliverables { padding-top: clamp(28px, 4.5vh, 56px); }
.deliverables__title { text-align: center; margin-bottom: clamp(48px, 8vh, 84px); }

.group { margin-bottom: clamp(64px, 10vh, 112px); }
.group:last-child { margin-bottom: 0; }
.group__head { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 36px; }
.group__rule { flex: 1; height: 1px; background: var(--line); max-width: 220px; transform: scaleX(0); transform-origin: center; transition: transform 0.9s var(--ease); }
.group__head.is-in .group__rule { transform: scaleX(1); }
.group__meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.group__label { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.group__count { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.18em; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.grid--1 { grid-template-columns: 1fr; }

/* Preview card: a framed browser window + clear type hierarchy */
/* ---------------------------- Deliverable card ---------------------------
   Deliberately minimal: a preview image, a title, and "Preview". No browser
   chrome on the thumb, no kicker, no description — the card's job is to make
   the prospect open it, and every extra line competes with that. */
.pcard {
  appearance: none; font: inherit; color: inherit; text-align: center; position: relative;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 12px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 10px 30px -22px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pcard:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.70), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 44%); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.pcard:hover::after { opacity: 1; }

.thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.75); }
.thumb--wide { aspect-ratio: 960 / 260; }
.thumb__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; transition: transform 0.6s var(--ease); }
.pcard:hover .thumb__img { transform: scale(1.035); }
.thumb--wide .thumb__img { object-position: 50% 50%; }
.thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }

.pcard__title { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); }
.pcard__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text-3); letter-spacing: 0.005em; transition: gap 0.3s var(--ease), color 0.3s var(--ease); }
.pcard:hover .pcard__link { gap: 10px; color: var(--accent); }
.pcard__link .arrow { margin-left: 0; border-color: currentColor; }

/* --------------------------- Slim card (featured) -------------------------
   The one card that breaks the minimal rule above, and only ever one per
   build: the funnel map. Thumbnail left, copy right, full width, sitting above
   every other deliverable. It earns a kicker and a description because its job
   is the opposite of the others: the prospect should understand the whole
   system from this card BEFORE deciding what to click. A second slim card on a
   page destroys that, so there's never more than one. */
.pcard--slim {
  grid-column: 1 / -1; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px); align-items: center;
  padding: clamp(14px, 2vw, 20px);
}
.pcard--slim .thumb { aspect-ratio: 16 / 10; }
.pcard--slim .thumb__img { object-position: 50% 50%; }
.pcard--slim .pcard__body { display: flex; flex-direction: column; gap: 10px; padding-right: clamp(0px, 2vw, 18px); }
.pcard__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.pcard--slim .pcard__title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.pcard__desc { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-2); }
.pcard--slim .pcard__link { justify-content: flex-start; }
@media (max-width: 760px) {
  .pcard--slim { grid-template-columns: minmax(0, 1fr); }
  .pcard--slim .pcard__body { padding-right: 0; }
}

/* SVG mock palette (legacy) */
.mock { width: 100%; height: auto; }
.m-stroke { fill: none; stroke: rgba(214, 232, 255, 0.28); stroke-width: 2; }
.m-line { stroke: rgba(214, 232, 255, 0.12); stroke-width: 1.5; }
.m-fill { fill: var(--accent); }
.m-soft { fill: rgba(214, 232, 255, 0.16); }
.m-faint { fill: rgba(214, 232, 255, 0.07); }
.m-panel { fill: var(--surface-2); stroke: rgba(214, 232, 255, 0.12); stroke-width: 1; }

/* --------------------------------- CTA ---------------------------------- */
.cta { text-align: center; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 120%, rgba(110, 200, 245, 0.12), transparent 70%);
  pointer-events: none;
}
.cta__wrap { position: relative; }
.cta__title {
  margin: 0 0 36px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* -------------------------------- Footer -------------------------------- */
.footer { position: relative; height: 72px; background: rgba(214, 232, 255, 0.04); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(214, 232, 255, 0.04)); }
.footer__inner { height: 100%; display: flex; align-items: center; justify-content: center; }
.footer__note { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); line-height: 48px; }

/* ------------------------------ Sticky CTA ------------------------------ */
/* Booking one tap away for the whole scroll; yields only to the closing CTA. */
.stickycta {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 980px;
  background: var(--accent, var(--text));
  color: var(--accent-ink, var(--bg));
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 38%, transparent),
    0 0 0 1px rgba(214, 232, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.stickycta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(1);
  transition: opacity 0.35s var(--ease), transform 0.25s var(--ease), visibility 0s;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.stickycta.is-visible:hover { transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px)) scale(1.02); }
.stickycta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-ink, var(--bg));
  animation: stickyPulse 2.4s var(--ease) infinite;
}
@keyframes stickyPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-ink) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (max-width: 560px) {
  .stickycta { left: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); justify-content: center; }
}

/* ------------------------------- Lightbox ------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__inner {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lightbox__stage {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  max-height: 78vh;
  transform-origin: top left;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.lightbox__stage img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; }
.lightbox__stage--embed { height: 78vh; background: #fff; }
.lightbox__frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.lightbox__open { margin-left: 12px; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: color 0.3s var(--ease); }
.lightbox__open:hover { color: #fff; }
.lightbox__placeholder { padding: clamp(28px, 6vw, 64px); text-align: center; }
.lightbox__placeholder .mock { max-width: 560px; margin: 0 auto 22px; }
.lightbox__placeholder p { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.lightbox__title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; }
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); }

/* --------------------------- Calendly popup ----------------------------- */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.cal-modal.open { opacity: 1; visibility: visible; }
.cal-frame {
  position: relative;
  width: min(820px, 100%);
  height: min(1000px, 92vh);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  transform: scale(0.98);
  transition: transform 0.28s var(--ease);
}
.cal-modal.open .cal-frame { transform: scale(1); }
.cal-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.cal-loader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.3s var(--ease);
}
.cal-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: calDot 1s ease-in-out infinite; }
.cal-loader span:nth-child(2) { animation-delay: 0.15s; }
.cal-loader span:nth-child(3) { animation-delay: 0.3s; }
.cal-modal.cal-ready .cal-loader { opacity: 0; }

/* ------------------------------- Keyframes ------------------------------ */
@keyframes glowDrift {
  0% { transform: translate3d(-1.5%, 0, 0); opacity: 0.8; }
  100% { transform: translate3d(1.5%, 1.5%, 0); opacity: 1; }
}
@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.16); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}
@keyframes chevBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}
@keyframes calDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .thumb--wide { aspect-ratio: 16 / 9; }
  .group__rule { max-width: 60px; }
  .hero__actions .btn { width: 100%; }
  .stickycta { padding: 12px 22px; }
  .cal-frame { height: 90vh; border-radius: 16px; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lightbox, .lightbox__stage { transition: none; }
  .hero::before, .hplayer__big-glow, .hero__actions .arrow-down { animation: none; }
  .mark::after { transition: none; transform: scaleX(1); }
  .group__rule { transition: none; transform: scaleX(1); }
  .thumb__img { transition: none; }
  .pcard { transition: none; }
  .stickycta { transform: none; transition: opacity 0.25s linear, visibility 0s linear 0.25s; }
  .stickycta.is-visible { transform: none; transition: opacity 0.25s linear; }
  .stickycta__dot { animation: none; }
  .cal-modal { transition: opacity 0.15s linear; }
  .cal-frame { transition: none; transform: none; }
  .cal-loader span { animation: none; }
}

/* ---------------------- Hero photo-swarm (signature) -------------------- */
/* Overlay above the already-visible hero. pointer-events none throughout. */
.swarm { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.swarm__ph { position: absolute; width: clamp(84px, 9vw, 128px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.75); background: var(--surface);
  opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); will-change: transform, opacity; }
.swarm__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swarm.is-on .swarm__ph { animation: swarmIn 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes swarmIn {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
  28%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  52%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) { .swarm { display: none; } }
@media (max-width: 760px) { .swarm { display: none; } }

/* reduced / static: jump to final states (no mid-transition captures, honours prefers-reduced-motion) */
html.reduced *, html.reduced *::before, html.reduced *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; transition-delay: 0s !important; }

/* ------------------------- Sender options (pitch site) ------------------- */
/* Agency branding: small top-left lockup. Configured in PITCH_CONFIG.brand; removed when empty. */
/* Agency lockup: centred at the top of the hero, mark + wordmark. It is the only
   agency branding on the page besides the footer line. */
.agency-bar { position: absolute; top: clamp(18px, 3vw, 28px); left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 10px; }
.agency-bar a { display: inline-flex; align-items: center; gap: 10px; }
.agency-bar img { height: 30px; width: auto; display: block; }
.agency-bar span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.hero { position: relative; }

/* Hero embed (Loom / Wistia) */
.hplayer__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #05060a; }
.hplayer__stage[data-state="embed"] .hplayer__scrim, .hplayer__stage[data-state="embed"] .hplayer__big, .hplayer__stage[data-state="embed"] .hplayer__bar, .hplayer__stage[data-state="embed"] .hplayer__cc { display: none; }

/* Inline Calendly (replaces the CTA button + modal) */
.cta__title { margin-bottom: 28px; }
.cal-inline { position: relative; width: min(900px, 100%); margin: 0 auto; height: min(760px, 92vh); border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.75); }
.cal-inline iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================ CASE STUDIES =============================
   Built pages, not screenshots. Each card carries the client, the money
   figure as its headline, and one line of context, and opens the full case
   study in the same lightbox the deliverable cards use.

   WHY THIS REPLACED THE OLD 9:16 GRAPHIC GRID: a story graphic is a picture of
   proof and a prospect reads it as a screenshot someone could have made. A
   page they can open, scroll and check reads as the same class of object as
   every other deliverable on the site, which is the point. The 9:16 graphic
   didn't go away, it became the card's preview image, so the work that went
   into those graphics still carries.

   THREE IS THE SHAPE. Not nine. Three named clients with real numbers beat a
   wall of thumbnails, and the licensed set is three (see house/HOUSE.md). */
.case-studies { padding-top: 0; }
.case-studies__title { text-align: center; margin-bottom: clamp(36px, 6vh, 60px); }
.cs-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 26px; max-width: 1140px; margin-inline: auto;
}
.cs-card {
  flex: 0 1 calc((100% - 52px) / 3); max-width: 360px; min-width: 0;
  display: flex; flex-direction: column; gap: 0; padding: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface); color: inherit; text-align: left;
  cursor: pointer; font: inherit; overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.cs-card:hover { transform: translateY(-6px); }
.cs-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the preview. 9:16 so the existing story graphics drop straight in. */
.cs-media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16; background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
}
.cs-media img, .cs-media iframe { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; border: 0; }

.cs-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }

/* who it was. A number with no person attached is a claim; a number with a
   named person and their niche is a case. Never ship .cs-big without .cs-who. */
.cs-who { display: flex; align-items: center; gap: 10px; }
.cs-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.cs-name { font-size: 0.86rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.cs-niche { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* the money figure IS the headline. It's the biggest type in the card. */
.cs-big {
  font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em; color: var(--text); margin: 2px 0 0;
}
.cs-result { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.cs-text { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--text-2); }
.cs-title { display: none; }

@media (max-width: 860px) {
  .cs-grid { gap: 20px; }
  .cs-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
  .cs-grid { gap: 16px; }
  .cs-card { flex-basis: 100%; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card { transition: none; }
  .cs-card:hover { transform: none; }
}

/* ------------------------- Bridge (unaware mode) ------------------------- */
.bridge { padding-bottom: clamp(24px, 4vh, 48px); }
.bridge__head { text-align: center; margin-bottom: clamp(56px, 9vh, 96px); }
.bridge__head .eyebrow { margin-bottom: 14px; }
.beat { display: grid; grid-template-columns: 92px minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line-soft); }
.beat:last-of-type { border-bottom: 1px solid var(--line-soft); }
.beat__num { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.beat__idx { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--accent); }
.beat__rule { width: 36px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.25s; }
.beat.is-in .beat__rule { transform: scaleX(1); }
.beat__kicker { margin: 0 0 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.beat__title { margin: 0 0 16px; font-family: var(--display); font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.022em; text-wrap: balance; }
.beat__text { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text-2); max-width: 56ch; }
.beat__aside { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.55); }
.aside__note { margin: 16px 0 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
/* 01 · price ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.95rem; }
.ladder li span { color: var(--text-2); }
.ladder li b { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.ladder__gap { background: transparent !important; border: 1px dashed rgba(110, 200, 245, 0.45); }
.ladder__gap b { color: var(--accent); font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
/* 02 · before / after */
.shift { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 10px; }
.shift__col { display: grid; gap: 4px; padding: 14px 12px; border-radius: 12px; background: var(--surface-2); }
.shift__col--on { background: var(--accent-soft); border: 1px solid rgba(110, 200, 245, 0.25); }
.shift__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.shift__col b { font-family: var(--display); font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; }
.shift__col--on b { color: var(--accent-deep); }
.shift__sub { font-size: 0.8rem; color: var(--text-2); line-height: 1.35; }
.shift__arrow { width: 22px; height: 22px; border-right: 1.6px solid var(--accent); border-top: 1.6px solid var(--accent); transform: rotate(45deg) scale(0.6); justify-self: center; }
/* 03 · sums */
.sums { display: grid; gap: 10px; }
.sum { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.sum b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.sum span { font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.sum--on { background: var(--accent-soft); border: 1px solid rgba(110, 200, 245, 0.25); }
.sum--on b { color: var(--accent-deep); }
/* 04 · the week */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.week li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.week b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
.week span { font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.bridge__close { text-align: center; padding-top: clamp(44px, 7vh, 72px); display: grid; gap: 24px; justify-items: center; }
.bridge__closing { margin: 0; max-width: 46ch; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; text-wrap: balance; }
.cta__sub { margin: -12px auto 32px; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) {
  .beat { grid-template-columns: 1fr; gap: 22px; }
  .beat__num { flex-direction: row; align-items: center; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption,
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}

/* =========================================================================
   OXIUM HOUSE SKIN · pitch site (index.html) only.
   Locked 2026-10-10 by DJ. Glass treatment rebuilt 2026-11-02 to match the
   Content Command dashboard.
   ---------------------------------------------------------------------------
   The pitch site is the AGENCY's page, so it wears the agency's colour on every
   build, never a colour lifted from the prospect.

   THE GLASS IS BUILT WITHOUT A SINGLE COLOUR GRADIENT. Depth comes from four
   things stacked, exactly as the Content Command builds it:

     --tint   a flat translucent fill, one colour
     --edge   a solid 1px border in the bright version of that colour
     --glow   three inset shadows plus one outer drop
              + a glossy white highlight along the top edge
              + backdrop-filter: blur(14px) saturate(150%)

   The old `--glass` token was a five-stop rainbow sweep
   (ice -> cyan -> azure -> violet -> pink) painted through text, borders and
   fills, and it's retired. A sweep reads as decoration; a lit edge over flat tinted
   glass reads as a material, and it survives being scaled down to a 40px pill
   or up to a full-width player, which the sweep never did.

   Ambient canvas light is the one exception and it stays: body::before and
   .hero::before keep their radial washes, because a full page with no
   ambient light goes flat. Those are light, not colour transitions on an
   object. Never add a gradient to an object.

   HOW TO APPLY (every build):
     1. Replace the :root colour tokens in the build's styles.css with the block
        marked TOKENS below (fonts, spacing and radius stay as they're).
     2. Paste everything below "OVERRIDES" at the very END of styles.css.
     3. Sweep any remaining literal accent rgba() left by the template skin
        (grep the old accent's rgb triple) to rgba(110, 200, 245, a).
   The prospect's funnel pages (brand.css) are untouched: those stay in the
   prospect's own brand.
   ========================================================================= */

/* ------------------------------- TOKENS --------------------------------- */
:root {
  --bg: #05070c;
  --bg-2: #080b13;
  --surface: #0d111a;
  --surface-2: #131824;
  --line: rgba(214, 232, 255, 0.13);
  --line-soft: rgba(214, 232, 255, 0.07);

  --text: #eef4fb;
  --text-2: #a3b0c2;
  --text-3: #8a97aa;

  --accent: #6ec8f5;          /* solid ice-cyan, for small UI and Calendly's primary colour */
  --accent-2: #b8e8fc;
  --accent-deep: #3d8fd6;
  --accent-violet: #9b8cff;
  --accent-ink: #04070d;
  --accent-soft: rgba(110, 200, 245, 0.13);

  /* the five hues, as solid values. No sweep, no interpolation. */
  --ox-cyan: #6ec8f5;
  --ox-azure: #5b95ff;
  --ox-violet: #a597ff;
  --ox-pink: #e8b0ff;
  --ox-ice: #b8e8fc;

  /* the default glass set. Any object can override these four and inherit the
     whole treatment; that's the entire system. */
  --tint: rgba(40, 150, 235, 0.14);
  --edge: rgba(110, 200, 245, 0.55);
  --glow: rgba(64, 170, 255, 0.45);
  --lbl: #7fd3ff;

  /* the stack itself, so nothing re-types it */
  --glass-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 10px 18px -12px rgba(255, 255, 255, 0.22);
  --glass-inner: inset 0 -22px 44px -26px var(--glow), inset 0 0 22px -8px var(--glow);
  --glass-drop: 0 16px 40px -24px var(--glow);
  --glass-shadow: var(--glass-gloss), var(--glass-inner), var(--glass-drop);
  --glass-blur: blur(14px) saturate(150%);
}

/* ------------------------------ OVERRIDES ------------------------------- */
/* canvas: navy-black with a cool blue bloom up top and a faint violet one low.
   Ambient light, not an object gradient. This is the one place it belongs. */
body::before {
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(79, 141, 255, 0.16), transparent 62%),
    radial-gradient(45% 35% at 100% 8%, rgba(110, 200, 245, 0.07), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(155, 140, 255, 0.06), transparent 60%),
    repeating-linear-gradient(115deg, rgba(214, 232, 255, 0.012) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--bg), var(--bg-2)) !important;
}
.hero::before { background: radial-gradient(120% 70% at 50% -10%, rgba(110, 200, 245, 0.10), transparent 60%) !important; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* the glass variants. Set four values, inherit the whole material. */
.g-cyan   { --tint: rgba(15, 150, 215, 0.28); --edge: #4fcbf7; --glow: rgba(35, 180, 240, 0.72); --lbl: #9fe2ff; }
.g-azure  { --tint: rgba(45, 105, 255, 0.28); --edge: #6f9bff; --glow: rgba(70, 120, 255, 0.75); --lbl: #a9c3ff; }
.g-violet { --tint: rgba(115, 75, 255, 0.28); --edge: #a68bff; --glow: rgba(130, 95, 255, 0.72); --lbl: #c9b9ff; }
.g-pink   { --tint: rgba(175, 70, 235, 0.26); --edge: #cf8cff; --glow: rgba(190, 95, 255, 0.66); --lbl: #e3bcff; }
.g-ice    { --tint: rgba(30, 165, 240, 0.30); --edge: #8fe0ff; --glow: rgba(70, 200, 255, 0.85); --lbl: #b5ecff; }
/* the quiet half-strength set, for anything that mustn't shout */
.g-cyan--soft   { --tint: rgba(15, 150, 215, 0.12); --edge: rgba(79, 203, 247, 0.5);  --glow: rgba(35, 180, 240, 0.38); --lbl: #6fd0fa; }
.g-azure--soft  { --tint: rgba(45, 105, 255, 0.12); --edge: rgba(111, 155, 255, 0.5); --glow: rgba(70, 120, 255, 0.4);  --lbl: #8fb0ff; }
.g-violet--soft { --tint: rgba(115, 75, 255, 0.12); --edge: rgba(166, 139, 255, 0.5); --glow: rgba(130, 95, 255, 0.4);  --lbl: #b3a0ff; }
.g-pink--soft   { --tint: rgba(175, 70, 235, 0.12); --edge: rgba(207, 140, 255, 0.5); --glow: rgba(190, 95, 255, 0.36); --lbl: #d9a6ff; }
.g-ice--soft    { --tint: rgba(120, 200, 255, 0.09); --edge: rgba(184, 232, 252, 0.42); --glow: rgba(110, 200, 245, 0.3); --lbl: #b8e8fc; }

/* glass text: eyebrows and the hero's money mark.
   Solid now. background-clip:text over a sweep is what made these shimmer, and
   it's also what made them illegible at small sizes on half the handsets. */
.eyebrow, .hero__eyebrow { color: var(--lbl) !important; -webkit-text-fill-color: currentColor; }
.mark { color: var(--ox-ice) !important; -webkit-text-fill-color: currentColor; text-shadow: 0 0 22px var(--glow); }
.mark::after {
  background: var(--edge) !important;
  box-shadow: 0 0 14px var(--glow);
}

/* glass pill: tinted fill, one lit edge, the gloss on top */
.btn--primary, .stickycta {
  --tint: rgba(30, 165, 240, 0.30); --edge: #8fe0ff; --glow: rgba(70, 200, 255, 0.85);
  background: var(--tint) !important;
  border: 1px solid var(--edge) !important;
  color: var(--text) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.btn--primary:hover, .stickycta.is-visible:hover {
  box-shadow: var(--glass-gloss), inset 0 -22px 44px -22px var(--glow), inset 0 0 26px -6px var(--glow), 0 22px 56px -22px var(--glow) !important;
}
.stickycta__dot { background: var(--edge) !important; box-shadow: 0 0 10px var(--glow); animation: oxPulse 2.4s var(--ease) infinite !important; }
@keyframes oxPulse {
  0% { box-shadow: 0 0 0 0 rgba(110, 200, 245, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(110, 200, 245, 0); }
}
.btn--ghost:hover { border-color: rgba(110, 200, 245, 0.55); color: var(--text); box-shadow: 0 0 24px -8px rgba(110, 200, 245, 0.5); }

/* player: solid scrubber fill */
.hp-scrub__fill { background: var(--ox-cyan) !important; box-shadow: 0 0 12px var(--glow) !important; }

/* deliverable cards: the glass lights up on hover, it doesn't change colour */
.pcard:hover {
  background: var(--tint) !important;
  border-color: var(--edge) !important;
  box-shadow: var(--glass-gloss), inset 0 0 26px -10px var(--glow), 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 16px 40px -24px var(--glow) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.pcard:hover .pcard__link { color: var(--lbl); }
.cal-loader span { background: var(--ox-cyan); }

/* hero player: one lit rim and a cool halo, the biggest object above the fold */
.hplayer__stage {
  --edge: #8fe0ff; --glow: rgba(70, 200, 255, 0.6);
  background: #000 !important;
  border: 1px solid var(--edge) !important;
  box-shadow: var(--glass-gloss), 0 40px 120px -40px var(--glow), 0 30px 90px -50px rgba(155, 140, 255, 0.45) !important;
}
.hplayer__big { border-color: var(--edge) !important; box-shadow: 0 0 40px -6px var(--glow); }

/* Funnel map card: the thumbnail sits in a browser window, matched to Rayan's
   (traffic-light dots + a "funnel map" address pill). */
.thumb--win { display: flex; flex-direction: column; background: #0b1424; }
.win-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #1b1f27; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-url { flex: 1; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-family: var(--mono); font-size: 0.78rem; color: var(--text-3); text-align: left; }
.thumb--win .thumb__img { flex: 1 1 0; min-height: 0; height: auto; width: 100%; object-fit: cover; object-position: 50% 0%; }

/* Phone section rhythm (DJ 2026-11-03): ~100px between sections at 375px, like Phil Keipp's pages. */
@media (max-width: 640px) { :root { --section-y: 52px; } }