/* ===================== TOKENS ===================== */
:root {
  --bg:        #0f0f0f;
  --bg-2:      #161616;
  --bg-3:      #1c1c1c;
  --bg-card:   #1a1a1a;
  --ink:       #f4f1ec;
  --ink-dim:   #a8a39a;
  --ink-faint: #6e695f;
  --line:      rgba(244, 241, 236, 0.10);
  --line-strong: rgba(244, 241, 236, 0.18);
  --accent:    #e8e2d4;
  --warm:      #d9c79b;
  --serif:     "Fraunces", "Times New Roman", serif;
  --sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --maxw:      1280px;
  --pad:       clamp(20px, 5vw, 56px);
  --radius:    14px;
  --ease:      cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--warm); color: var(--bg); }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: clip (not hidden) so position:fixed children stay anchored to the viewport.
     `hidden` creates a new containing block in some browsers, which breaks the fixed paint bg. */
  overflow-x: clip;
  cursor: none;
}

a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
img, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===================== PSYCHEDELIC TRAIL ===================== */
.psy-trail {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1500;            /* above nav (100) + sound-unlock (200), below cursor */
  mix-blend-mode: screen;   /* additive — glows on top of dark scenes */
}
@media (prefers-reduced-motion: reduce) {
  .psy-trail { display: none; }
}

/* ===================== CUSTOM CURSOR ===================== */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  position: absolute;
  top: -6px; left: -6px;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.cursor.is-hover .cursor-dot { transform: scale(2.6); }
.cursor.is-text  .cursor-dot { transform: scale(.5); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  body { cursor: auto; }
  .cursor { display: none; }
}

/* ===================== TYPE ===================== */
.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .04em;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.eyebrow.mono { text-transform: none; letter-spacing: .1em; }
.serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}
.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 14px;
  margin-bottom: 16px;
}
.section-sub {
  color: var(--ink-dim);
  font-size: 16px;
  max-width: 56ch;
  margin-top: 4px;
}

/* ===================== NAV ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  z-index: 100;
  background: linear-gradient(to bottom, rgba(15,15,15,.85), rgba(15,15,15,0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .3s var(--ease), padding .3s var(--ease);
}
.nav.is-scrolled {
  background: rgba(15,15,15,.92);
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.brand .dot { color: var(--warm); }
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.nav-links a { position: relative; transition: color .2s var(--ease), font-family .15s var(--ease); }
.nav-links a:hover {
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.cta-mini {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(244, 241, 236, 0.04);
  transition: all .25s var(--ease);
}
.cta-mini:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: all .25s var(--ease);
  cursor: pointer;
  will-change: transform;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--warm);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink);
}
.btn-large {
  padding: 18px 36px;
  font-size: 15px;
}

/* ===================== HERO =====================
   NO isolation, NO z-index, NO background. The hero must NOT create a sealed
   stacking context — otherwise the page paint can't slide ABOVE the head video
   only. Body is already black so the hero region stays dark before video loads. */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.hero-stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad) clamp(60px, 10vh, 120px);
  box-sizing: border-box;
}
.hero-reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;        /* head visible at z:0 (above body's black bg). Page paint
                        sits at z:1 ABOVE the head; hero gradient (z:2), cue (z:2),
                        and hero-inner (z:3) all sit above paint, still readable. */
  filter: brightness(.95) saturate(1.1);
}
/* The page paint drop. Position:fixed so it stays in the viewport and follows the
   user as they scroll DOWN THE SITE. Z-index 1: ABOVE the head video (z:0) inside
   the hero, BELOW the hero's gradient (z:2)/cue (z:2)/inner-text (z:3) so the H1
   and CTAs stay readable. Sections also live at z:1 but come AFTER the paint in
   HTML order, so they cover the paint everywhere outside the hero region.
   Result: drop above the head in the hero only; behind every other panel. */
.page-paint-bg {
  position: fixed;
  top: -20vh;
  left: 0;
  width: 100vw;
  height: 120vh;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  filter: brightness(1.05) saturate(1.15);
  pointer-events: none;
  will-change: opacity;
}
html, body { background: #000; }

/* Sections sit at z:1 in root, ABOVE the page paint (z:0). They cover the paint
   wherever they overlap. The hero is intentionally NOT in this group — it has
   no z-index, no stacking context, so the page paint slides ABOVE the head video
   (z:-1) inside the hero and BELOW everything else. */
.stats, .logos, .work, .case, .vs, .offers, .included,
.process, .faq, .about, .start, .studying, .footer {
  position: relative;
  z-index: 1;
}

/* Sections are TRANSPARENT — the page-paint-bg shows through them as background.
   Inside each section, individual content blocks (cards with videos, text scrim
   cards) have their own solid backgrounds, so videos read with full fidelity and
   text reads with full contrast. Paint visible everywhere; never tints content. */
.work, .case, .offers, .process, .start, .included,
.stats, .logos, .faq, .about, .studying, .vs {
  background: transparent;
}

/* TEXT SCRIMS — sections above "Three ways to start" (stats) keep a light scrim.
   Sections BELOW "Three ways to start" have NO scrim card at all — paint shows
   through completely; readability comes from text-shadow on the copy itself. */
.section-head {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 1), 0 0 36px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 1);
}

/* Stats-inner: NO scrim card. Transparent — the drop flows through unchanged
   from the hero into the stats area, no visible card edge. */
.stats-inner {
  background: transparent;
}

/* Sections BELOW offers — scrim cards at ~78% opacity to match offer cards. Text
   reads clearly; paint still hints through the slight transparency + blur. */
.case-text,
.process-steps li,
.vs-table,
.faq-list,
.about-text,
.start-inner,
.studying-list {
  background: rgba(26, 26, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.case-text     { padding: clamp(28px, 4vw, 44px); border-radius: 18px; }
.process-steps li { border-radius: 14px; margin: 0 4px; }
.vs-table      { border-radius: var(--radius); overflow: hidden; }
.faq-list      { border-radius: 18px; padding: 12px 36px !important; }
.about-text    { padding: clamp(28px, 4vw, 44px); border-radius: 18px; }
.start-inner   { padding: clamp(36px, 6vw, 64px) clamp(24px, 4vw, 48px); border-radius: 18px; }
.studying-list { border-radius: 999px; padding: 22px 36px !important; display: inline-flex !important; flex-wrap: wrap; }
.vs-row        { background: transparent; }
.vs-row.vs-head { background: rgba(40, 40, 40, 0.7); }
.faq-item      { background: transparent; }

/* Strong text-shadow on the actual TEXT inside scrim cards — this is what makes
   copy readable against the scrim. Without it, headlines + paragraphs disappear
   into bright paint streaks behind. */
.case-text, .case-row p, .case-row h4, .pull-quote,
.process-steps h3, .process-steps p,
.vs-row, .vs-label, .vs-self,
.faq-q, .faq-a p,
.about-text p, .about-credentials,
.start-sub, .start-or,
.studying-list li,
.stat-num, .stat-label {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.85);
}

/* ===================== CONTENT LIFTED ABOVE PAINT =====================
   Paint sits at z-index 50 with mix-blend-mode: screen. Any element painted AFTER
   the paint (higher z-index) is unaffected by the screen blend — colors stay true,
   text stays sharp. So every readable content block sits at z-index 51 to punch
   through the paint, while section backgrounds (which are below) still let the paint
   show as atmospheric color in negative space. */
.section-head,
.card,
.offer,
.included-card,
.logo-link,
.case-video-wrap,
.about-photo,
.vs-table,
.process-steps li,
.faq-item,
.start-form,
.start-or,
.studying-list,
.hero-inner,
.case-text {
  position: relative;
  z-index: 51;
}

/* Footer stays solid for clean page-end. */
.footer { background: var(--bg); }
.hero-gradient {
  position: absolute;
  inset: 0;
  /* Soft wash only — NO solid color at the bottom so there's no dark band between
     the hero and the stats panel. H1 legibility comes from text-shadow on the
     hero-title and hero-sub themselves. */
  background:
    linear-gradient(to top, rgba(0,0,0,.4) 0%, rgba(0,0,0,.18) 30%, transparent 60%);
  z-index: 2;
  pointer-events: none;
}
.hero-cue {
  position: absolute;
  top: 22px;
  right: var(--pad);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--ink-dim);
  padding-top: 22px;
}
.hero-cue p { font-size: 11px; }
.hero-cue .cue-track { color: var(--ink); }
.hero-inner {
  max-width: 880px;
  position: relative;
  z-index: 3;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 18px 0 24px;
  /* H1 sits over the head video + paint, no solid gradient behind anymore — heavy
     layered shadow gives the white serif enough contrast on bright colors. */
  text-shadow: 0 2px 24px rgba(0,0,0,0.95), 0 0 36px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,1);
}
.hero-sub {
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-dim);
  max-width: 60ch;
  margin-bottom: 36px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,1);
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero-trust {
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .03em;
}

/* ===================== STATS STRIP ===================== */
.stats {
  /* No borders — hero blends seamlessly into stats so the drop continues without
     a visible separator line between the panels. */
}
.stats-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stat-num span {
  font-size: 14px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .04em;
}
.stat-label {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  font-family: var(--mono);
}

/* ===================== LOGO STRIP ===================== */
.logos {
  padding: 56px var(--pad);
  border-bottom: 1px solid var(--line);
}
.logos-label {
  text-align: center;
  color: var(--ink-faint);
  margin-bottom: 28px;
}
.logos-row {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(28px, 8vw, 80px);
}
.logo-brand {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.logo-placeholder {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
  padding: 8px 18px;
  border-radius: 4px;
}

/* Linked client logos: black card + monochrome white silhouette + visible name caption underneath.
   Hover lifts the whole stack and brightens the silhouette + caption. */
.logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform .25s var(--ease);
}
.logo-link:hover { transform: translateY(-4px); }
.logo-link:hover .logo-card {
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.logo-link:hover .logo-img,
.logo-link:hover .logo-wordmark-text { opacity: 1; }
.logo-link:hover .logo-caption { color: var(--ink); }

.logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: rgba(10, 10, 10, 0.5);   /* 50% opaque per Sen's note — paint shows through */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  min-width: 130px;
  min-height: 70px;
}
.logo-img {
  height: clamp(36px, 4vw, 48px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: .92;
  transition: opacity .25s var(--ease);
}
/* Tōrō wordmark is solid black — flip to white so it shows on the black card. */
.logo-img.logo-invert {
  filter: brightness(0) invert(1);
}
/* Jessgo logo is black ink with a red heart. invert+hue-rotate flips black→white
   while preserving the red heart (red→cyan→red after the 180° hue rotation). */
.logo-img.logo-keep-color {
  filter: invert(1) hue-rotate(180deg);
}
.logo-caption {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: .12em;
  transition: color .25s var(--ease);
}
.logo-wordmark-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: .82;
  transition: opacity .25s var(--ease);
}

/* ===================== SECTION HEAD ===================== */
.section-head {
  max-width: var(--maxw);
  margin: 0 auto 56px;
  padding: 0 var(--pad);
}

/* ===================== WORK GRID ===================== */
.work {
  padding: clamp(80px, 12vh, 140px) 0;
}
.grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 18px;
}
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  transition: transform .4s var(--ease);
  isolation: isolate;
}
.card:hover { transform: translateY(-4px); }
.card-tall { grid-row: span 2; }
.card-wide { grid-column: span 2; }
.card.feature { grid-column: span 2; grid-row: span 2; }
.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .8s var(--ease), filter .4s var(--ease);
}
.card:hover .card-video { transform: scale(1.04); filter: brightness(.92); }

.card-idx {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .08em;
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.card-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  z-index: 2;
  background: linear-gradient(to top, rgba(15,15,15,.95) 0%, rgba(15,15,15,.55) 55%, transparent 100%);
  color: var(--ink);
  opacity: 1;
  transform: none;
  transition: background .3s var(--ease);
}
.card:hover .card-meta { background: linear-gradient(to top, rgba(15,15,15,.96) 0%, rgba(15,15,15,.72) 55%, rgba(15,15,15,.1) 100%); }
.tag {
  display: inline-block;
  color: var(--warm);
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .12em;
}
.card-meta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.card-meta p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ===================== CASE STUDY ===================== */
.case {
  padding: clamp(80px, 12vh, 140px) var(--pad);
  background: transparent;
}
.case-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.case-rows {
  margin: 36px 0 36px;
  display: grid;
  gap: 0;
}
.case-row {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.case-row:last-child { border-bottom: 1px solid var(--line); }
.case-row h4 {
  color: var(--ink-faint);
  font-weight: 400;
  margin-bottom: 10px;
}
.case-row p { color: var(--ink-dim); font-size: 15.5px; }
.case-row strong { color: var(--ink); font-weight: 500; }
.pull-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink) !important;
}
.pull-quote .quote-attr {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 14px;
  letter-spacing: .04em;
}
.case-video-wrap {
  position: sticky;
  top: 100px;
}
.case-video {
  width: 100%;
  border-radius: var(--radius);
  background: var(--bg-card);
  aspect-ratio: 9/16;
  object-fit: cover;
  max-height: 78vh;
}
.caption {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 12px;
  text-align: center;
}

/* ===================== VS TABLE ===================== */
.vs {
  padding: clamp(80px, 12vh, 140px) var(--pad);
}
.vs-table {
  max-width: var(--maxw);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.vs-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  padding: 22px clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.vs-row:first-child { border-top: none; }
.vs-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-2);
}
.vs-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--ink-dim);
}
.vs-self {
  color: var(--ink);
  font-weight: 500;
}
.vs-head .vs-self { color: var(--warm); font-weight: 400; }

/* ===================== OFFERS (productized SKUs) ===================== */
.offers {
  padding: clamp(80px, 12vh, 140px) 0;
  background: transparent;
}
.offers-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.offer {
  padding: 36px 32px 40px;
  /* 78% opaque per Sen's note — readable, but paint still visible in gaps between cards */
  background: rgba(26, 26, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: all .3s var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  /* anchor-as-card defaults to override */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.offer:hover { color: inherit; }
.offer:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.offer-featured {
  background: linear-gradient(to bottom, rgba(217, 199, 155, 0.14), rgba(26, 26, 26, 0.85));
  border-color: rgba(217, 199, 155, 0.25);
}
.offer-num {
  color: var(--warm);
  font-size: 12px;
}
.offer-eyebrow {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 16px;
}
.offer h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.offer-desc { color: var(--ink-dim); font-size: 14px; margin-bottom: 22px; line-height: 1.55; }
.offer-list {
  list-style: none;
  margin-bottom: 24px;
  flex-grow: 1;
}
.offer-list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-dim);
}
.offer-list li::before {
  content: "·  ";
  color: var(--warm);
}
.offer-list strong { color: var(--ink); font-weight: 500; }
.offer-price {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.offer-price > span {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.offer-price strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  font-size: 32px;
  letter-spacing: -0.02em;
}
.offer-timeline {
  color: var(--ink-faint);
}
.offers-custom {
  max-width: var(--maxw);
  margin: 36px auto 0;
  padding: 0 var(--pad);
  text-align: center;
  color: var(--ink-faint);
}
.offers-custom a {
  color: var(--warm);
  border-bottom: 1px solid currentColor;
}
.offers-custom strong { color: var(--ink); font-weight: 500; }

/* ===================== INCLUDED (this site IS the demo) ===================== */
.included {
  padding: clamp(80px, 12vh, 140px) 0;
}
.included-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.included-card {
  padding: 28px 24px 30px;
  background: rgba(26, 26, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.included-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.included-num {
  color: var(--warm);
  font-size: 11px;
  margin-bottom: 10px;
}
.included-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.included-card p {
  color: var(--ink-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.included-card strong { color: var(--warm); font-weight: 500; }
.included-cta {
  max-width: var(--maxw);
  margin: 36px auto 0;
  padding: 0 var(--pad);
  text-align: center;
  color: var(--ink-faint);
}
.included-cta a {
  color: var(--warm);
  border-bottom: 1px solid currentColor;
}

/* ===================== PROCESS ===================== */
.process {
  padding: clamp(80px, 12vh, 140px) 0;
  background: transparent;
}
.process-steps {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process-steps li {
  padding: 28px 26px 32px;
  border-left: 1px solid var(--line);
  position: relative;
}
.process-steps li:first-child { border-left: none; padding-left: 0; }
.process-steps li::before {
  content: "";
  position: absolute;
  top: 36px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warm);
}
.process-steps li:first-child::before { display: none; }
.step-num {
  color: var(--warm);
  margin-bottom: 14px;
}
.process-steps h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.process-steps p { color: var(--ink-dim); font-size: 14px; }
.process-steps strong { color: var(--ink); font-weight: 500; }

/* ===================== FAQ ===================== */
.faq {
  padding: clamp(80px, 12vh, 140px) 0;
}
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq-item summary {
  display: grid;
  grid-template-columns: 60px 1fr 30px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
  gap: 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num {
  color: var(--ink-faint);
}
.faq-q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.faq-toggle {
  text-align: right;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  color: var(--ink-faint);
  transition: transform .25s var(--ease), color .2s var(--ease);
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  color: var(--warm);
}
.faq-a {
  padding: 0 0 28px 84px;
}
.faq-a p {
  color: var(--ink-dim);
  font-size: 15.5px;
  max-width: 58ch;
}

/* ===================== ABOUT ===================== */
.about {
  padding: clamp(80px, 12vh, 140px) var(--pad);
}
.about-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.about-text p {
  color: var(--ink-dim);
  font-size: 16.5px;
  margin-bottom: 16px;
  max-width: 58ch;
}
.about-text strong { color: var(--ink); font-weight: 500; }
.about-text a { color: var(--warm); border-bottom: 1px solid currentColor; }
.about-credentials {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint) !important;
}
.about-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}
.about-photo .card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ===================== START / CTA ===================== */
.start {
  padding: clamp(80px, 12vh, 140px) var(--pad);
  background: transparent;
}
.start-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.start-sub {
  font-size: 17px;
  color: var(--ink-dim);
  margin-bottom: 48px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.start-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  margin-bottom: 24px;
}
.start-form label { display: block; }
.start-form label.full { grid-column: 1 / -1; }
.start-form span {
  display: block;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.start-form input,
.start-form textarea,
.start-form select {
  width: 100%;
  background: rgba(244, 241, 236, 0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  border-radius: 8px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.start-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a8a39a' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.start-form input:focus,
.start-form textarea:focus,
.start-form select:focus {
  outline: none;
  border-color: var(--warm);
  background: rgba(244, 241, 236, 0.06);
}
.start-form textarea { resize: vertical; min-height: 120px; }
.start-form button { margin-top: 8px; width: 100%; justify-content: center; }
.start-or {
  color: var(--ink-faint);
  margin-top: 28px;
}
.start-or a {
  color: var(--warm);
  border-bottom: 1px solid currentColor;
}

/* ===================== CURRENTLY STUDYING ===================== */
.studying {
  padding: 60px var(--pad);
  border-top: 1px solid var(--line);
  text-align: center;
}
.studying .eyebrow { margin-bottom: 24px; }
.studying-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  max-width: 900px;
  margin: 0 auto;
}
.studying-list li {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--ink-dim);
  position: relative;
  padding-right: 24px;
}
.studying-list li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 0;
  color: var(--ink-faint);
}

/* ===================== FOOTER ===================== */
.footer {
  padding: 28px var(--pad);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-faint);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink); }

/* ===================== SOUND UNLOCK BUTTON ===================== */
/* Big visual play button — sits higher on the screen, hides itself on scroll. */
.sound-unlock {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 180px;
  height: 180px;
  padding: 22px;
  background: rgba(15, 15, 15, 0.6);
  border: 1.5px solid rgba(244, 241, 236, 0.35);
  color: var(--ink);
  border-radius: 28px;
  cursor: pointer;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity .5s var(--ease), transform .35s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.65);
}
.sound-unlock:hover {
  background: rgba(15, 15, 15, 0.85);
  border-color: var(--warm);
  color: var(--warm);
  transform: translate(-50%, -50%) scale(1.04);
}
/* Either explicit click OR scrolling past first few hundred px hides the button. */
.sound-unlock.is-hidden,
.sound-unlock.is-scrolled-past {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
}
.sound-unlock-icon { display: inline-flex; align-items: center; justify-content: center; }
.sound-unlock-icon svg { width: 56px; height: 56px; }
.sound-unlock-label { white-space: nowrap; }
.sound-unlock::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  border: 1.5px solid rgba(217, 199, 155, 0.5);
  animation: soundRing 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes soundRing {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (max-width: 640px) {
  /* Pull the play button up and shrink it on small screens so it doesn't sit on
     top of the H1. Also widens vertical clearance to the buttons below. */
  .sound-unlock {
    width: 108px; height: 108px; border-radius: 22px;
    top: 22%;
    padding: 14px;
    gap: 6px;
    font-size: 10px;
  }
  .sound-unlock-icon svg { width: 40px; height: 40px; }
  .sound-unlock::after { inset: -6px; border-radius: 26px; }
}

/* ===================== AUDIO TOGGLE ===================== */
.audio-toggle {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 12px;
  background: rgba(15, 15, 15, 0.78);
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.audio-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.audio-toggle.is-on { color: var(--warm); border-color: rgba(217, 199, 155, 0.4); background: rgba(15, 15, 15, 0.85); }
.audio-icon { display: inline-flex; align-items: center; justify-content: center; }
.audio-icon-on { display: none; }
.audio-toggle.is-on .audio-icon-off { display: none; }
.audio-toggle.is-on .audio-icon-on { display: inline-flex; }
.audio-label { letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
@media (max-width: 640px) {
  .audio-toggle { bottom: 18px; left: 18px; padding: 9px 12px 9px 10px; }
  .audio-label { display: none; }
}
/* Audio toggle stays visible even under reduced motion — sound is a separate axis from motion */
.audio-toggle.is-hint::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid var(--warm);
  opacity: .55;
  animation: pulseHint 2.4s ease-in-out 2;
  pointer-events: none;
}
@keyframes pulseHint {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(1.12); opacity: 0; }
}

/* ===================== FLOATING CTA ===================== */
.float-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .2s var(--ease);
}
.float-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.float-cta:hover { background: var(--warm); }
.float-cta span { color: inherit; }

/* ===================== SCROLL REVEAL ===================== */
.section-head, .case-grid, .process-steps, .about-grid, .start-inner, .vs-table, .faq-list, .stats-inner, .offers-grid, .included-grid {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.in {
  opacity: 1 !important;
  transform: none !important;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
    gap: 14px;
  }
  .card.feature { grid-column: span 2; grid-row: span 2; }
  .card-wide { grid-column: span 2; }
  .offers-grid { grid-template-columns: 1fr; }
  .included-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps li { padding-left: 26px; border-left: 1px solid var(--line); }
  .case-grid { grid-template-columns: 1fr; }
  .case-video-wrap { position: static; max-width: 480px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .vs-row { grid-template-columns: 1.2fr 1fr 1fr; padding: 16px 20px; font-size: 13.5px; }
  .vs-label { font-size: 14px; }
  .hero-cue { right: 18px; top: 70px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; }
  body { font-size: 15px; cursor: auto; }
  .cursor { display: none; }
  .nav { padding: 14px var(--pad); }
  .cta-mini { padding: 8px 14px; font-size: 11px; }

  .hero { min-height: 92svh; padding-bottom: 56px; }
  .hero-title { font-size: 42px; line-height: 1.04; }
  .hero-sub { font-size: 15px; }
  .hero-trust { font-size: 10px; line-height: 1.6; }
  .hero-ctas .btn { padding: 13px 22px; font-size: 13px; }
  .hero-cue { display: none; }

  .stats-inner { grid-template-columns: 1fr; gap: 20px; padding: 40px var(--pad); }
  .stat-num { font-size: 32px; }

  .logos { padding: 40px var(--pad); }
  .logos-row { gap: 24px; }
  .logo-brand { font-size: 18px; }

  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 280px;
    gap: 12px;
  }
  .card-tall, .card-wide, .card.feature {
    grid-column: span 1;
    grid-row: span 1;
  }
  .card.feature { grid-row: span 2; }
  .card-meta { opacity: 1; transform: none; }

  .vs-table .vs-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .vs-head { display: none; }
  .vs-label {
    font-size: 11px;
    color: var(--ink-faint);
    font-family: var(--mono);
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .vs-self { font-size: 15px; }

  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-steps li { padding: 22px 18px; }
  .included-grid { grid-template-columns: 1fr; }

  .faq-item summary { grid-template-columns: 36px 1fr 22px; gap: 14px; padding: 22px 0; }
  .faq-num { font-size: 10px; }
  .faq-a { padding-left: 50px; }

  .start-form { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; text-align: center; }

  .float-cta { bottom: 18px; right: 18px; padding: 12px 18px; }
  .float-cta span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Force scroll-reveal content visible immediately. The paint scrub is also
     disabled by the JS reduceMotion check, so the page is fully static. */
  .section-head, .case-grid, .process-steps,
  .about-grid, .start-inner, .vs-table, .faq-list, .stats-inner,
  .offers-grid, .included-grid {
    opacity: 1 !important; transform: none !important;
  }
}