:root{
  --navy-950:#070b16;
  --navy-900:#0b1121;
  --navy-800:#111a30;
  --navy-700:#182446;
  --gold:#f5a623;
  --gold-bright:#ffc35a;
  --blue:#2f6bff;
  /* Same hue as --blue, lifted for use as text on navy. --blue itself is a
     button-fill colour and only clears ~3:1 against #0b1121 as type. */
  --blue-bright:#5b8dff;
  --teal:#04d9ff;
  --text-hi:#f5f7fb;
  --text-mid:#c3cadd;
  --text-dim:#8993ac;
  --border:rgba(255,255,255,0.09);
  --serif:'Fraunces',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-950);
  color:var(--text-mid);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.section{padding:110px 0;}
.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:16px;
}
.eyebrow.center{display:block;text-align:center;}
.eyebrow.accent{color:var(--gold-bright);}
.eyebrow.eyebrow-lg{font-size:26px;}
.center{text-align:center;}
h1,h2,h3{font-family:var(--serif);color:var(--text-hi);font-weight:700;letter-spacing:-0.01em;}
/* Scaled with the hero — a 42px section title under a 92px headline reads as
   a different website. Tracking tightens as the size climbs. */
.section-title{font-size:clamp(34px,4.8vw,60px);line-height:1.04;letter-spacing:-0.025em;margin-bottom:18px;}
.section-sub{max-width:720px;margin:0 auto 60px;color:var(--text-mid);font-size:18px;}
.accent{color:var(--gold);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--blue),#1d4fd6);color:#fff;box-shadow:0 8px 24px rgba(47,107,255,0.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(47,107,255,0.45);}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--text-hi);border-color:var(--border);}
.btn-ghost:hover{background:rgba(255,255,255,0.09);transform:translateY(-2px);}
.btn-lg{padding:15px 30px;font-size:15px;}

/* scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:60;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 8px rgba(245,166,35,0.6);
  transition:width .1s linear;
}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,11,22,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--gold);}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:600;color:var(--text-mid);}
.nav-links a{position:relative;padding-bottom:4px;transition:color .2s ease;}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--gold-bright);transition:width .25s ease;
}
.nav-links a:hover{color:var(--gold-bright);}
.nav-links a:hover::after{width:100%;}

/* Mobile nav. Below 820px .nav-links is hidden, and until now nothing replaced
   it — the section links simply did not exist on a phone. The drawer is
   `hidden` in markup rather than only display:none in CSS, so with JS off it
   stays out of the accessibility tree instead of becoming an unreachable list. */
@media (max-width:820px){.nav-links{display:none;}}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  /* flex:0 0 44px, not width:44px. As a flex child of .header-inner it inherits
     flex-shrink:1, and at 390px the brand + CTA already fill the row — the
     button was being squeezed to zero width and rendering as nothing at all.
     44px is also the minimum comfortable touch target. */
  flex:0 0 44px;height:44px;padding:11px 10px;margin-left:10px;
  flex-direction:column;justify-content:space-between;
}
.nav-toggle span{
  display:block;height:2px;width:100%;border-radius:2px;
  background:var(--gold-bright);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.nav-drawer{
  display:none;flex-direction:column;
  border-top:1px solid var(--border);
  background:rgba(7,11,22,0.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:8px 24px 20px;
}
.nav-drawer a{
  padding:15px 2px;font-size:16px;font-weight:600;color:var(--text-mid);
  border-bottom:1px solid var(--border);
}
.nav-drawer a:last-child{border-bottom:0;}
.nav-drawer a:hover,.nav-drawer a:focus-visible{color:var(--gold-bright);}
@media (max-width:820px){
  .nav-toggle{display:flex;}
  .nav-drawer:not([hidden]){display:flex;}
}
/* The book CTA is the one thing that must survive on a narrow screen; it just
   gets tighter rather than being swept into the drawer with the nav links. */
@media (max-width:520px){
  .site-header .btn-primary{padding:10px 14px;font-size:13px;flex-shrink:0;}
  /* The brand is the only element allowed to give up space; it truncates
     rather than pushing the toggle off the edge. */
  .brand{font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* hero */
.hero{
  position:relative;overflow:hidden;
  /* Capped rather than a bare 100vh: on a tall monitor a full-viewport hero
     just re-introduces the dead black space this layout exists to remove. */
  min-height:min(100vh,940px);display:flex;align-items:center;
  padding:104px 0 64px;
}

/* Full-bleed hero b-roll. Kept at a REAL, visible opacity on purpose — an
   earlier pass ran it at 0.14 and it read as pure black. Legibility comes
   from .hero-video-scrim below (a scrim behind the copy), never from
   hiding the footage. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0.7;filter:grayscale(0.3) contrast(1.12) brightness(1.05) saturate(1.1);
  pointer-events:none;z-index:0;
}
/* Two stacked gradients: left→right darkening puts the copy column on a
   near-solid base while the right side of the frame stays visibly in motion;
   top/bottom fades blend the footage into the navy page. */
.hero-video-scrim{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(100deg, rgba(7,11,22,0.96) 0%, rgba(7,11,22,0.88) 32%, rgba(7,11,22,0.40) 60%, rgba(7,11,22,0.22) 100%),
    linear-gradient(180deg, var(--navy-950) 0%, rgba(7,11,22,0) 22%, rgba(7,11,22,0) 72%, var(--navy-950) 100%);
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.35;pointer-events:none;z-index:2;}

/* Single-column layout has no empty right-hand side for the footage to live
   in — the copy sits directly on top of it — so the scrim goes uniform and
   much heavier here, and the video drops to a true ambient level. */
@media (max-width:900px){
  .hero{min-height:auto;padding:80px 0 64px;}
  .hero-video{opacity:0.4;}
  .hero-video-scrim{
    background:
      linear-gradient(180deg, var(--navy-950) 0%, rgba(7,11,22,0.86) 14%, rgba(7,11,22,0.86) 86%, var(--navy-950) 100%);
  }
}
.hero-glow{
  position:absolute;top:-200px;right:-150px;width:700px;height:700px;
  background:radial-gradient(circle,rgba(245,166,35,0.18),transparent 70%);
  filter:blur(10px);pointer-events:none;
}
.hero-mesh{
  position:absolute;left:-180px;bottom:-240px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(47,107,255,0.14),transparent 70%);
  filter:blur(20px);pointer-events:none;opacity:0.5;
}
.hero-inner{display:grid;grid-template-columns:1.2fr 0.8fr;gap:48px;align-items:center;position:relative;z-index:3;}
.badge{
  display:inline-block;background:rgba(245,166,35,0.1);border:1px solid rgba(245,166,35,0.35);
  color:var(--gold-bright);font-size:12px;font-weight:700;letter-spacing:0.1em;
  padding:8px 16px;border-radius:999px;margin-bottom:18px;
}
/* Framer-scale display type — the headline is meant to dominate the viewport,
   not sit politely inside it. Tight leading/tracking is what keeps a 90px
   serif from looking like a mistake. */
.hero h1{
  font-size:clamp(46px,7.4vw,92px);
  line-height:0.98;letter-spacing:-0.035em;margin-bottom:18px;
  text-wrap:balance;
}
.hero h1 .human-line{
  text-shadow:0 0 42px rgba(245,166,35,0.35), 0 2px 30px rgba(0,0,0,0.55);
}
.hero h1 .ai-line{text-shadow:0 2px 30px rgba(0,0,0,0.6);}
.hero-sub{font-size:clamp(20px,1.85vw,26px);color:var(--text-mid);max-width:580px;margin-bottom:28px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
.hero-ctas.center{justify-content:center;}
.hero-quote{
  margin-top:26px;padding-left:20px;border-left:3px solid var(--gold);
  max-width:480px;
}
.hero-quote p{font-family:var(--serif);font-style:italic;color:var(--text-hi);font-size:17px;margin-bottom:8px;}
.hero-quote span{font-size:13px;color:var(--text-dim);font-weight:600;}
.hero-cover{position:relative;perspective:1600px;padding:20px;display:flex;justify-content:center;}
.book-3d{
  --bw:340px; --bh:500px; --bd:46px;
  position:relative;width:var(--bw);height:var(--bh);
  transform-style:preserve-3d;
  transform:rotateY(-24deg) rotateX(2deg);
  cursor:grab;
  will-change:transform;
}
.book-3d.dragging{cursor:grabbing;}
.book-face{
  position:absolute;top:0;left:0;width:var(--bw);height:var(--bh);
  border-radius:10px;
  backface-visibility:hidden;
}
.book-front{
  transform:translateZ(calc(var(--bd)/2));
  box-shadow:
    0 0 0 1px rgba(245,166,35,0.55),
    0 0 30px rgba(245,166,35,0.25),
    0 35px 80px rgba(0,0,0,0.6);
  overflow:hidden;
}
.book-front img{width:100%;height:100%;object-fit:cover;display:block;}
.gold-rim{
  position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,200,90,0.5), inset 0 0 40px rgba(245,166,35,0.08);
}
.cover-shine{
  position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 35%);
  opacity:0;transition:opacity .3s ease;
  mix-blend-mode:overlay;
}
.hero-cover:hover .cover-shine{opacity:1;}

/* page stack — right edge (book thickness), spans exactly between front and back */
.book-pages{
  width:var(--bd);height:calc(var(--bh) - 6px);top:3px;left:calc(var(--bw)/2 - var(--bd)/2);
  transform:rotateY(90deg) translateZ(calc(var(--bw)/2));
  background:
    repeating-linear-gradient(180deg,
      #f2ead8 0px, #f2ead8 1.4px,
      #e0d4b6 1.4px, #e0d4b6 2.4px);
  box-shadow:inset 0 10px 16px rgba(0,0,0,0.4), inset 0 -10px 16px rgba(0,0,0,0.4);
  border-radius:0;
}
.book-pages::after{
  content:"";position:absolute;top:0;right:0;width:6px;height:100%;
  background:linear-gradient(90deg, transparent, rgba(245,197,90,0.95));
}

/* spine — left edge, gilded binding */
.book-spine{
  width:var(--bd);height:calc(var(--bh) - 6px);top:3px;left:calc(var(--bw)/2 - var(--bd)/2);
  transform:rotateY(-90deg) translateZ(calc(var(--bw)/2));
  background:linear-gradient(90deg, #6f4a10 0%, #b4801f 35%, #f5d385 52%, #b4801f 68%, #6f4a10 100%);
  box-shadow:inset 0 0 18px rgba(0,0,0,0.5);
}

.book-back{
  transform:translateZ(calc(var(--bd)/-2)) rotateY(180deg);
  background:linear-gradient(155deg,var(--navy-800),var(--navy-900));
  box-shadow:0 0 0 1px rgba(245,166,35,0.3);
}
.drag-hint{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:0.08em;color:var(--text-dim);
  text-transform:uppercase;font-weight:600;opacity:0.8;
  pointer-events:none;
}
@media (max-width:900px){
  .book-3d{--bw:230px; --bh:338px; --bd:32px; transform:rotateY(-16deg);}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-cover{max-width:280px;margin:0 auto;}
}

/* stats strip */
.stats-strip{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 140% at 50% 0%, rgba(47,107,255,0.10), transparent 70%),
    var(--navy-900);
}
/* Precision grid drawn with gradients — replaces a 192x128 JPEG that was being
   upscaled across the full page width. Vector-sharp at any size, zero bytes. */
.stats-texture{
  position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background-image:
    linear-gradient(rgba(245,166,35,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.10) 1px, transparent 1px);
  background-size:56px 56px, 56px 56px;
  mask-image:radial-gradient(ellipse 65% 110% at 50% 50%, black, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 65% 110% at 50% 50%, black, transparent 88%);
}
.stats-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:64px 24px;gap:24px;}
.stat{text-align:center;position:relative;}
/* Hairline dividers between stats — gives the strip structure instead of
   three numbers floating in a void. */
.stat + .stat::before{
  content:"";position:absolute;left:-12px;top:12%;height:76%;width:1px;
  background:linear-gradient(180deg, transparent, rgba(245,166,35,0.28), transparent);
}
/* Direct children only — matches the 132px ring height so all three numbers
   share a centre line and their labels start at the same y. The ring's own
   numeral lives deeper in the tree and is styled separately below. */
.stat > strong{
  height:132px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:76px;line-height:1;
  letter-spacing:-0.03em;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #b8791a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.stat span{display:block;font-size:14px;color:var(--text-mid);margin-top:12px;max-width:230px;margin-inline:auto;line-height:1.5;}
@media (max-width:700px){
  .stats-grid{grid-template-columns:1fr;gap:44px;}
  .stat + .stat::before{display:none;}
}

.stat-ring-wrap{display:flex;flex-direction:column;align-items:center;}
.stat-ring{position:relative;width:132px;height:132px;margin:0 auto;}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:6;}
.ring-fill{
  fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  filter:drop-shadow(0 0 6px rgba(245,166,35,0.55));
}
/* Sits inside the 132px ring, so it must opt out of the oversized
   `.stat strong` display size (which has the higher specificity). */
.stat .ring-number{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:46px;line-height:1;color:var(--gold);
}

/* Ambient section background video. Same treatment as .hero-video — identical
   opacity and identical filter — so the footage reads at the same strength here
   as it does in the hero.

   The previous values stacked three separate knockdowns on top of each other:
   opacity 0.42, then brightness(0.85), then a flat 0.72 black overlay. That
   multiplies out to about 0.10 effective — the video was technically playing and
   effectively invisible. Contrast is protected by shaping the overlay around
   where the text actually sits (below), not by dimming the whole layer. */
.section-bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0.7;filter:grayscale(0.3) contrast(1.12) brightness(1.05) saturate(1.1);
  pointer-events:none;
}
/* Default overlay, for any section that doesn't shape its own. */
.section-bg-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, var(--navy-950) 0%, rgba(7,11,22,0.72) 14%, rgba(7,11,22,0.72) 86%, var(--navy-950) 100%);
}
@media (prefers-reduced-motion: reduce){
  .section-bg-video,.hero-video{display:none;}
}

/* book section */
.book-section{position:relative;overflow:hidden;}
/* Two columns: the research card on the left brings its own background, the body
   copy on the right sits directly on the video. So the scrim runs horizontally —
   heavy under the copy, nearly clear under the card. Same trick as the hero. */
.book-section .section-bg-overlay{
  background:
    linear-gradient(90deg, rgba(7,11,22,0.18) 0%, rgba(7,11,22,0.34) 34%, rgba(7,11,22,0.82) 52%, rgba(7,11,22,0.88) 100%),
    linear-gradient(180deg, var(--navy-950) 0%, rgba(7,11,22,0) 16%, rgba(7,11,22,0) 84%, var(--navy-950) 100%);
}
.book-grid{position:relative;z-index:1;display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:center;}
.book-copy h2{font-size:clamp(32px,4.3vw,54px);line-height:1.05;letter-spacing:-0.025em;margin-bottom:20px;}
.book-copy p{margin-bottom:16px;color:var(--text-mid);}
.checklist{list-style:none;margin-top:24px;}
.checklist li{
  position:relative;padding-left:28px;margin-bottom:14px;color:var(--text-hi);font-weight:500;font-size:15px;
  opacity:0;transform:translateY(10px);transition:opacity .8s ease, transform .8s ease;
}
.checklist li.visible{opacity:1;transform:translateY(0);}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:900;
}
.li-first{color:var(--gold-bright);font-weight:800;}
.color-cycle{animation:color-cycle 6s ease-in-out infinite;}
@keyframes color-cycle{
  /* Was --teal. Scott: the teal read as weak against the navy; this is the
     same blue as the "Get the Book" button, so the emphasis matches the CTA. */
  0%,100%{color:var(--blue-bright);}
  50%{color:var(--gold);}
}
.quote-card{
  background:linear-gradient(155deg,var(--navy-800),var(--navy-900));
  border:1px solid var(--border);border-radius:18px;padding:36px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.quote-card-label{font-size:12px;font-weight:700;letter-spacing:0.12em;color:var(--gold);margin-bottom:10px;}
.quote-card h3{font-size:24px;margin-bottom:14px;}
.quote-card p{color:var(--text-mid);font-size:15px;}

/* research paper treatment */
.paper-card{
  position:relative;
  border:1px solid rgba(245,166,35,0.28);
  background-image:
    linear-gradient(155deg,var(--navy-800),var(--navy-900)),
    linear-gradient(rgba(245,166,35,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.05) 1px, transparent 1px);
  background-size:auto, 26px 26px, 26px 26px;
  background-blend-mode:normal, screen, screen;
  box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,166,35,0.06), inset 0 0 60px rgba(245,166,35,0.03);
  overflow:hidden;
  cursor:pointer;
  animation:pulse-border-paper 3.6s ease-in-out 3;
}
.paper-card.card-active{
  animation:none;
  border-color:rgba(245,166,35,0.8);
  box-shadow:0 0 0 1px rgba(245,166,35,0.55), 0 0 28px rgba(245,166,35,0.4), 0 20px 50px rgba(0,0,0,0.4), inset 0 0 60px rgba(245,166,35,0.05);
}
@keyframes pulse-border-paper{
  0%,100%{border-color:rgba(245,166,35,0.28); box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,166,35,0.06), inset 0 0 60px rgba(245,166,35,0.03);}
  50%{border-color:rgba(245,166,35,0.65); box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 22px rgba(245,166,35,0.3), inset 0 0 60px rgba(245,166,35,0.05);}
}
.paper-corner{
  position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;
  border-width:0 46px 46px 0;
  border-color:transparent rgba(245,166,35,0.14) transparent transparent;
}
.paper-corner::after{
  content:"§";
  position:absolute;top:6px;right:-40px;
  color:rgba(245,166,35,0.6);font-family:var(--serif);font-size:14px;
}
.paper-meta{
  font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:11px !important;color:var(--text-dim) !important;
  letter-spacing:0.02em;
  padding-bottom:16px;margin-bottom:16px !important;
  border-bottom:1px dashed rgba(255,255,255,0.15);
}
.paper-abstract-label{
  font-size:10px !important;font-weight:700;letter-spacing:0.18em;
  color:rgba(255,255,255,0.35) !important;margin-bottom:8px !important;
}
.paper-footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.paper-tag{
  font-size:11px;font-family:'Roboto Mono',ui-monospace,monospace;
  color:var(--gold-bright);background:rgba(245,166,35,0.08);
  border:1px solid rgba(245,166,35,0.25);border-radius:999px;
  padding:4px 12px;
}
.paper-citation{
  font-size:11px !important;line-height:1.5;color:var(--text-dim) !important;
  margin-top:18px !important;padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
@media (max-width:900px){.book-grid{grid-template-columns:1fr;}}

/* themes */
.themes-section{position:relative;overflow:hidden;background:var(--navy-900);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.themes-section > .wrap{position:relative;z-index:1;}
/* Only the eyebrow, title and sub-head sit directly on the video, and they live
   in the top fifth of the section. Everything below that is covered by the cards,
   which are opaque. So the scrim is dense across the heading band and then opens
   right up — the footage reads through the gutters between the cards. */
.themes-section .section-bg-overlay{
  background:linear-gradient(180deg,
    var(--navy-950) 0%,
    rgba(7,11,22,0.90) 7%,
    rgba(7,11,22,0.86) 19%,
    rgba(7,11,22,0.42) 32%,
    rgba(7,11,22,0.34) 88%,
    var(--navy-950) 100%);
}
.themes-cover{display:flex;justify-content:center;margin-bottom:28px;}
.themes-cover img{
  width:172px;border-radius:10px;
  box-shadow:0 0 0 1px rgba(245,166,35,0.45), 0 20px 46px rgba(0,0,0,0.5), 0 0 36px rgba(245,166,35,0.15);
}
/* Image-led chapter cards. The chapter art used to be a 56px thumbnail
   tucked in the corner — nine near-identical text boxes down the tallest
   section on the page. The art is now the card: a full-bleed banner with the
   chapter numeral set over it, which is what makes this grid scan as a
   designed piece rather than a list. */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1000px;}
.theme-card{
  position:relative;
  background:linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 75%);
  border:1px solid var(--border);border-radius:16px;
  padding:0 0 26px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s ease, box-shadow .35s ease;
  transform-style:preserve-3d;
  cursor:pointer;
  animation:pulse-border 3.6s ease-in-out 3;
  animation-delay:calc(var(--pulse-i, 0) * 0.3s);
}
.theme-card-img{
  position:static;width:100%;height:190px;
  border-radius:0;object-fit:cover;box-shadow:none;
  filter:saturate(1.08) contrast(1.06);
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.theme-card:hover .theme-card-img{transform:scale(1.07);}
/* Veil fading the art down into the card body so the seam disappears. */
.theme-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:190px;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,11,22,0.10) 0%, rgba(7,11,22,0.30) 50%, rgba(17,26,48,0.97) 100%);
}
.theme-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,166,35,0.45);
  box-shadow:0 26px 54px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,166,35,0.18);
}
.theme-card.card-active{
  animation:none;
  border-color:rgba(245,166,35,0.75);
  box-shadow:0 0 0 1px rgba(245,166,35,0.5), 0 0 24px rgba(245,166,35,0.35), 0 20px 40px rgba(0,0,0,0.4);
}

@keyframes pulse-border{
  0%,100%{border-color:var(--border); box-shadow:0 0 0 rgba(245,166,35,0);}
  50%{border-color:rgba(245,166,35,0.5); box-shadow:0 0 18px rgba(245,166,35,0.22);}
}
/* chapter timeline */
.chapter-timeline{position:relative;max-width:900px;margin:0 auto 56px;padding:0 10px;}
.timeline-line{position:absolute;top:9px;left:10px;right:10px;height:2px;background:rgba(255,255,255,0.08);border-radius:2px;}
.timeline-line-fill{
  height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 10px rgba(245,166,35,0.55);
}
.timeline-nodes{position:relative;display:flex;justify-content:space-between;}
.timeline-node{
  position:relative;width:20px;height:20px;border-radius:50%;
  background:var(--navy-800);border:2px solid var(--gold);
  transform:scale(0.4);opacity:0.4;
  box-shadow:0 0 0 4px var(--navy-950);
}
.timeline-node::after{
  content:attr(data-n);position:absolute;top:28px;left:50%;transform:translateX(-50%);
  font-size:11px;color:var(--text-dim);font-weight:700;
}
@media (max-width:700px){
  .chapter-timeline{display:none;}
}

/* Chapter numeral sits over the bottom of the art, not above the title —
   it reads as a plate number and gives the grid a repeating anchor point. */
.theme-num{
  position:absolute;top:126px;left:24px;z-index:3;
  font-family:var(--serif);color:var(--gold);font-size:44px;font-weight:700;
  line-height:1;letter-spacing:-0.02em;
  text-shadow:0 2px 20px rgba(0,0,0,0.85), 0 0 30px rgba(245,166,35,0.25);
}
.theme-card h3{font-size:22px;margin:24px 24px 10px;}
.theme-card p{font-size:14.5px;color:var(--text-mid);margin:0 24px;line-height:1.62;}
@media (max-width:900px){.theme-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.theme-grid{grid-template-columns:1fr;}}

/* AI section */
.ai-section{position:relative;overflow:hidden;}
.ai-bg{
  position:absolute;inset:0;background-size:cover;background-position:center 42%;
  opacity:0.55;pointer-events:none;
  filter:brightness(1.35) saturate(1.15) contrast(1.05);
  mask-image:linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}
.ai-bg-fade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, var(--navy-950) 0%, rgba(11,17,33,0.85) 30%, transparent 58%);
}
.ai-glow{
  position:absolute;left:-200px;top:20%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(47,107,255,0.18),transparent 70%);
  pointer-events:none;
}
.ai-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;position:relative;}
.ai-copy h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:20px;}
.ai-copy p{margin-bottom:16px;}
.prompt-card{
  margin-top:28px;background:rgba(245,166,35,0.06);border:1px solid rgba(245,166,35,0.3);
  border-radius:14px;padding:24px;
}
.prompt-label{font-size:11px;font-weight:700;letter-spacing:0.1em;color:var(--gold);margin-bottom:10px;}
.prompt-text{font-size:14px;color:var(--text-hi);font-style:italic;}
.cursor-blink{
  display:inline-block;color:var(--gold-bright);font-style:normal;
  animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.ai-card{
  background:var(--navy-800);border:1px solid var(--border);border-radius:18px;padding:32px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.ai-card-row span{display:block;font-size:14.5px;font-weight:700;color:var(--text-hi);margin-bottom:10px;letter-spacing:0.01em;}
/* The bar widths are now the cited figures themselves, scaled against the 3%
   ceiling: 1.2 -> 40, ~2.0 -> 67, 3.0 -> 100. That is why the numbers can be
   printed. The previous 35/60/96 were a visual analogy with nothing behind
   them, sitting under a caption that called it "the measurable gap" — either
   the numbers get a source or the claim goes. They got a source. */
.bar{
  height:28px;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.35);
}
.bar div{
  height:100%;width:0;border-radius:7px;
  transition:width 1.4s cubic-bezier(.16,.9,.3,1);
  position:relative;
}
/* Sheen across the fill, so the bars read as material rather than flat blocks. */
.bar div::after{
  content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%);
}
.bar-dim div{background:linear-gradient(90deg,#454e66,#5b6580);}
.bar-mid div{background:linear-gradient(90deg,#1e4bc4,var(--blue));box-shadow:0 0 16px rgba(47,107,255,0.4);}
.bar-gold div{background:linear-gradient(90deg,#c07f13,var(--gold) 55%,var(--gold-bright));box-shadow:0 0 22px rgba(245,166,35,0.55);}
.ai-card-title{
  font-family:var(--serif);font-size:19px;color:var(--gold-bright);
  margin-bottom:22px;letter-spacing:-0.01em;
}
.ai-card-row{margin-bottom:22px;}
.bar-note{font-size:11.5px;line-height:1.5;color:var(--text-mid);margin-top:8px;}
.ai-card-row span b{color:var(--gold-bright);font-weight:800;}
.ai-card-caption{
  font-size:12.5px;line-height:1.55;color:var(--text-mid);
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}
.ai-card-cite{font-size:10.5px;line-height:1.5;color:var(--text-dim);margin-top:10px;}
.ai-visual{display:flex;align-items:center;gap:32px;}
.ai-words{
  list-style:none;display:flex;flex-direction:column;gap:14px;font-weight:800;letter-spacing:0.04em;font-size:15px;text-transform:uppercase;
  position:relative;z-index:2;background:rgba(7,11,22,0.5);padding:18px 22px;border-radius:12px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.ai-word{
  color:var(--text-dim);
  animation-duration:9s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-delay:calc(var(--word-i) * 2s);
}
.ai-word-teal{animation-name:word-pulse-teal;}
.ai-word-gold{animation-name:word-pulse-gold;}
@keyframes word-pulse-teal{
  0%{color:var(--text-dim);}
  4%{color:var(--teal);}
  18%{color:var(--teal);}
  22%{color:var(--text-dim);}
  100%{color:var(--text-dim);}
}
@keyframes word-pulse-gold{
  0%{color:var(--text-dim);}
  4%{color:var(--gold-bright);}
  18%{color:var(--gold-bright);}
  22%{color:var(--text-dim);}
  100%{color:var(--text-dim);}
}
@media (max-width:900px){.ai-grid{grid-template-columns:1fr;}.ai-visual{flex-direction:column;align-items:flex-start;}.ai-words{margin-top:8px;}}

/* author */
.author-grid{max-width:760px;margin:0 auto;text-align:left;}
.author-section h2{font-size:clamp(32px,4.2vw,52px);line-height:1.05;letter-spacing:-0.025em;margin-bottom:20px;}
.author-section p{margin-bottom:16px;}
.author-copy .btn{margin-top:10px;}

/* Credential chips — the bio paragraph carries real, specific proof points
   that were buried in prose. Surfacing them gives this section the visual
   density it was missing without adding a single new claim. */
.cred-chips{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin:26px 0 28px;
}
.cred-chips li{
  background:linear-gradient(160deg, rgba(245,166,35,0.09), rgba(47,107,255,0.06));
  border:1px solid rgba(245,166,35,0.22);border-radius:12px;
  padding:16px 14px;text-align:center;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.cred-chips li:hover{border-color:rgba(245,166,35,0.55);transform:translateY(-3px);}
.cred-chips strong{
  display:block;font-family:var(--serif);color:var(--gold);
  font-size:26px;line-height:1.1;margin-bottom:5px;letter-spacing:-0.02em;
}
.cred-chips span{display:block;font-size:12px;color:var(--text-mid);line-height:1.35;}
@media (max-width:900px){.cred-chips{grid-template-columns:repeat(2,1fr);}}

.author-grid-photo{
  display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:center;
  max-width:920px;margin:0 auto;
}
.author-photo{position:relative;}
.author-photo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top center;
  border-radius:50%;
  border:2px solid rgba(245,166,35,0.35);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  position:relative;z-index:2;
}
.author-photo-glow{
  position:absolute;inset:-16px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,0.18), transparent 70%);
  z-index:1;
}
@media (max-width:760px){
  .author-grid-photo{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .author-photo{max-width:220px;}
}

/* CTA */
.cta-section{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);text-align:center;
}
.cta-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0.5;filter:grayscale(0.25) contrast(1.12) brightness(1.02);
}
.cta-overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(245,166,35,0.12), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, rgba(11,17,33,0.88) 40%, var(--navy-900) 100%);
}
.cta-inner{position:relative;z-index:2;}
.cta-inner h2{
  font-size:clamp(36px,5.6vw,72px);line-height:1.02;letter-spacing:-0.03em;margin-bottom:18px;
  text-shadow:0 2px 30px rgba(0,0,0,0.6);
}
.cta-inner p{max-width:600px;margin:0 auto 34px;font-size:19px;color:var(--text-mid);}

/* lead magnet */
.lead-magnet-section{
  background:radial-gradient(circle at 20% 20%, rgba(245,166,35,0.08), transparent 55%), var(--navy-900);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.lead-magnet-grid{display:grid;grid-template-columns:0.6fr 1.4fr;gap:56px;align-items:center;max-width:980px;margin:0 auto;}
.lead-magnet-cover{position:relative;max-width:220px;margin:0 auto;}
.lead-magnet-cover img{
  border-radius:10px;box-shadow:0 0 0 1px rgba(245,166,35,0.5), 0 25px 50px rgba(0,0,0,0.5), 0 0 30px rgba(245,166,35,0.15);
}
.lead-magnet-badge{
  position:absolute;top:-10px;right:-14px;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  color:var(--navy-950);font-size:11px;font-weight:800;letter-spacing:0.04em;
  padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(245,166,35,0.4);
  transform:rotate(6deg);
}
.lead-magnet-copy h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:14px;}
.lead-magnet-copy > p{margin-bottom:24px;}
.lead-magnet-form{
  display:flex;flex-direction:column;gap:16px;max-width:420px;
}
.lead-magnet-form .form-field{margin-bottom:0;}
.lead-magnet-form .btn{margin-top:4px;}
.lead-magnet-success{
  max-width:420px;padding:24px;border-radius:14px;
  background:rgba(245,166,35,0.08);border:1px solid rgba(245,166,35,0.3);
}
.lead-magnet-success p{margin-bottom:16px;color:var(--text-hi);font-weight:600;}
@media (max-width:760px){
  .lead-magnet-grid{grid-template-columns:1fr;text-align:center;}
  .lead-magnet-form,.lead-magnet-success{margin:0 auto;}
}

/* contact */
.contact-section{background:var(--navy-900);border-top:1px solid var(--border);}
.contact-inner{max-width:640px;margin:0 auto;}
.contact-form{
  background:var(--navy-800);border:1px solid var(--border);border-radius:18px;
  padding:40px;box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-field{margin-bottom:20px;}
.form-field label{
  display:block;font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:8px;
}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  background:var(--navy-900);border:1.5px solid var(--blue);
  color:var(--text-hi);font-family:var(--sans);font-size:14px;
  transition:border-color .15s ease;
  animation:pulse-border-blue 3.2s ease-in-out 2;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--gold);
  animation:none;
}
.form-field textarea{resize:vertical;}
.contact-form .btn{width:100%;margin-top:4px;}
.contact-form .btn-primary{
  border:1.5px solid var(--blue);
  animation:pulse-border-blue 3.2s ease-in-out 2;
}
@keyframes pulse-border-blue{
  0%,100%{border-color:rgba(47,107,255,0.4); box-shadow:0 0 0 rgba(47,107,255,0);}
  50%{border-color:rgba(47,107,255,1); box-shadow:0 0 16px rgba(47,107,255,0.5);}
}
.form-note{font-size:12px;color:var(--text-dim);text-align:center;margin-top:16px;}
@media (max-width:600px){
  .form-row.two-col{grid-template-columns:1fr;}
  .contact-form{padding:28px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}

/* footer */
.site-footer{border-top:1px solid var(--border);padding:32px 0;background:var(--navy-950);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--text-dim);}
.footer-links{display:flex;gap:20px;}
.footer-links a:hover{color:var(--gold);}

/* Hero text build — one-shot entrance. Every element below is fully visible
   by default; script.js adds `.entrance` to .hero to layer the animation on
   top. If the class is never added (JS off, reduced motion, a script error),
   the hero still reads correctly. Never make legibility depend on this. */
.hero h1 .ai-line{display:inline;}
.hero h1 .human-line{display:inline;}

/* Deliberately NO animation-delay and NO animation-fill-mode.
   `fill-mode: both` (or a delay, or GSAP's .from()) parks the element in its
   opacity:0 start state before the animation begins — so a page that never
   gets painted (background tab, a renderer that never composites) holds the
   headline invisible forever. That was the original bug here, twice.
   Instead the stagger is baked into the keyframes as a hold-at-zero segment,
   and every animation starts at t=0 with fill-mode:none. Before it runs and
   after it ends, the element falls back to its normal fully-visible style.
   The safe state in every direction is "visible". */
@keyframes heroRise{
  0%,45%{opacity:0;transform:translateY(26px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes heroDrop{
  0%{opacity:0;transform:translateY(-12px);}
  100%{opacity:1;transform:translateY(0);}
}
.hero.entrance .badge{animation:heroDrop .6s cubic-bezier(.16,1,.3,1);}
.hero.entrance h1 .ai-line{display:inline-block;animation:heroRise .9s cubic-bezier(.16,1,.3,1);}
.hero.entrance h1 .human-line{display:inline-block;animation:heroRise 1.15s cubic-bezier(.16,1,.3,1);}
.hero.entrance .hero-ctas .btn:nth-child(1){animation:heroRise 1.45s cubic-bezier(.16,1,.3,1);}
.hero.entrance .hero-ctas .btn:nth-child(2){animation:heroRise 1.55s cubic-bezier(.16,1,.3,1);}
.hero.entrance .hero-quote{animation:heroRise 1.8s cubic-bezier(.16,1,.3,1);}
.hero.entrance .hero-cover{animation:heroRise 1.1s cubic-bezier(.16,1,.3,1);}

/* Slow ambient drift on the blue mesh glow — was a GSAP yoyo tween, now CSS
   so nothing in the hero depends on a JS animation ticker. */
@keyframes meshPulse{
  0%,100%{opacity:0.5;}
  50%{opacity:0.8;}
}
.hero-mesh{animation:meshPulse 9s ease-in-out infinite;}

/* Hero subheading typewriter and bold styling */
#hero-typewriter strong {
  color: var(--text-hi);
  font-weight: 700;
}

/* Fade-in animations for specific phrases in blue */
@keyframes fadeInBluePhrase1 {
  0% { opacity: 0; color: var(--blue); }
  100% { opacity: 1; color: var(--blue); }
}

@keyframes fadeInBluePhrase2 {
  0% { opacity: 0; color: var(--blue); }
  100% { opacity: 1; color: var(--blue); }
}

#hero-typewriter .fade-in-phrase-1 {
  animation: fadeInBluePhrase1 1s ease-in 12s forwards;
  color: var(--text-hi);
}

#hero-typewriter .fade-in-phrase-2 {
  animation: fadeInBluePhrase2 1s ease-in 17s forwards;
  color: var(--text-hi);
}

#hero-typewriter .cursor-blink {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Ambient video: three more sections (2026-08-07)

   Each gets its own scrim shaped around where that section's text actually
   sits. Reusing the flat default overlay is what made the earlier clips
   disappear — a uniform 0.72 black on top of an already-reduced layer
   multiplies down to nothing. Dim where the words are, open everywhere else.
--------------------------------------------------------------------------- */

.lead-magnet-section,
.author-section,
.contact-section{position:relative;overflow:hidden;}
.lead-magnet-section > .wrap,
.author-section > .wrap,
.contact-section > .wrap{position:relative;z-index:1;}

/* Cover art left, headline + email form right. Copy on the right needs cover;
   the cover image brings its own. Horizontal scrim, plus a soft top/bottom
   fade so the clip doesn't butt hard against the neighbouring sections. */
.lead-magnet-section .section-bg-overlay{
  background:
    linear-gradient(90deg, rgba(7,11,22,0.22) 0%, rgba(7,11,22,0.40) 30%, rgba(7,11,22,0.80) 48%, rgba(7,11,22,0.78) 100%),
    linear-gradient(180deg, var(--navy-950) 0%, rgba(7,11,22,0) 18%, rgba(7,11,22,0) 82%, var(--navy-950) 100%);
}

/* Headshot left, bio right — mirror of the above. */
.author-section .section-bg-overlay{
  background:
    linear-gradient(90deg, rgba(7,11,22,0.20) 0%, rgba(7,11,22,0.38) 32%, rgba(7,11,22,0.85) 50%, rgba(7,11,22,0.90) 100%),
    linear-gradient(180deg, var(--navy-950) 0%, rgba(7,11,22,0) 16%, rgba(7,11,22,0) 84%, var(--navy-950) 100%);
}

/* A single centred 640px column: eyebrow, title and sub-head ride on the video
   at the top, then the form card takes over and is opaque. So the scrim is
   dense across that heading band and then opens up — the footage reads in the
   wide gutters either side of the form. */
.contact-section .section-bg-overlay{
  background:
    linear-gradient(180deg,
      var(--navy-950) 0%,
      rgba(7,11,22,0.90) 8%,
      rgba(7,11,22,0.86) 24%,
      rgba(7,11,22,0.44) 38%,
      rgba(7,11,22,0.38) 88%,
      var(--navy-950) 100%);
}

/* The AI section's background is now footage rather than a still, so .ai-bg
   needs object-fit. Everything else about the treatment — the opacity, the
   top/bottom mask, the .ai-bg-fade wedge over the left-hand copy — carries
   over unchanged. Brightness comes down from 1.35 because the clip is already
   graded; the still it replaced was underexposed and needed the lift. */
video.ai-bg{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:0.62;filter:brightness(1.05) saturate(1.12) contrast(1.06);
}