/* ===================================================================
   LOFTY-LAB VISUAL SYSTEM · UN-HERD CONTENT
   =================================================================== */
/* ─── Accessibility: skip link, focus, reduced motion ────────────── */
.skip-link{
  position:absolute; top:-44px; left:16px;
  background:#030f2e; color:#fefbf6;
  padding:10px 18px; border-radius:8px;
  font-family:'Figtree',sans-serif; font-weight:700; font-size:14px;
  text-decoration:none; z-index:9999;
  transition:top .2s;
}
.skip-link:focus{ top:16px; outline:3px solid #eee85c; outline-offset:2px; }

*:focus-visible{
  outline:3px solid #6cc5ec;
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible, button:focus-visible{
  outline:3px solid #6cc5ec;
  outline-offset:3px;
}

/* honor reader-requested reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track{ animation:none !important; }
}

html{ scroll-behavior:smooth; }

:root{
  --dark:      #02091d;
  --ink:       #030f2e;
  --ink-soft:  rgba(3,15,46,0.72);
  --blue:      #2bc4be;
  --blue-soft: #8fe3df;
  --orange:    #0e7c72;
  --green:     #58c99b;
  --yellow:    #ebe34d;
  --purple:    #2bc4be;
  --pink:      #f58fc4;
  --lavender:  #a78bfa;
  --sky:       #57b3ea;
  --mint:      #93e6cf;
  --fuchsia:   #e85fb0;
  --bg:        #fefbf6;
  --bg-warm:   #faf3e0;
  --line:      #02091d;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overscroll-behavior:none; }
html{ scroll-behavior:smooth; background:#030f2e; }
body{
  background:#030f2e;
  color:var(--ink);
  font-family:'Figtree','Inter',system-ui,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }

.script{
  font-family:'Caveat','Caveat Brush',cursive;
  font-weight:600;
  font-style:normal;
}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}
.container--wide{ max-width:1440px; }

/* ===================================================================
   NAV
   =================================================================== */
.nav{
  position:fixed;
  top:18px;
  left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.nav-inner{
  background:var(--ink);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 8px 8px 28px;
  border-radius:999px;
  pointer-events:auto;
  box-shadow:0 6px 32px rgba(3,15,46,0.18);
}
.nav-mark{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.02em;
  margin-right:18px;
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-mark .em{ font-weight:600; }
.nav-mark .herd{ font-style:italic; color:var(--blue); font-weight:700; }

.nav-btn{
  display:inline-block;
  padding:9px 18px;
  border-radius:999px;
  font-family:'Figtree';
  font-weight:700;
  font-size:13.5px;
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1), filter .25s;
}
.nav-btn:hover{ transform:translateY(-1px); filter:brightness(0.95); }
.nav-btn.blue{   background:var(--blue);     color:var(--ink); }
.nav-btn.orange{ background:var(--yellow);   color:var(--ink); }
.nav-btn.green{  background:var(--mint);    color:var(--ink); }
.nav-btn.purple{ background:var(--lavender);   color:var(--ink); }

@media (max-width:720px){
  .nav-mark{ margin-right:6px; font-size:16px; }
  .nav-btn{ padding:7px 11px; font-size:11px; }
}

/* ===================================================================
   STICKY HERO + CLOUD-EDGE (preserved from prior build)
   =================================================================== */
.sticky-stage{ position:relative; background:transparent; }

.hero{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  z-index:1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, #ffd9b8 0%, transparent 60%),
    linear-gradient(180deg, #fef5e6 0%, #ffe6cd 55%, #ffd5b3 100%);
}

.hero-cloud-frame{
  position:absolute;
  left:-15%;
  bottom:-12%;
  width:130%;
  height:90%;
  z-index:1;
  pointer-events:none;
}
.hero-cloud-bg-wrap{
  position:absolute;
  left:0; right:0; bottom:0; top:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  will-change:transform;
}
.hero-cloud-bg{
  width:100%;
  height:auto;
  max-height:130%;
  opacity:0.95;
  /* spin removed - constellation looks weird tumbling */
  transform-origin:50% 60%;
  will-change:transform;
}
@keyframes cloud-spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

.hero-content{
  position:relative;
  z-index:5;
  text-align:center;
  padding:0 24px;
  width:100%;
  max-width:1200px;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

/* Big wordmark - chunky display */
/* Hero entrance — staggered reveal on page load */
@keyframes heroFadeUp{
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes heroScaleIn{
  from { opacity:0; transform:scale(0.96); }
  to   { opacity:1; transform:scale(1); }
}
.h-hero, .hero-tag, .hero-body, .hero-cta-row{
  opacity:0;
}
.h-hero{
  animation:heroScaleIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}
.hero-tag{
  animation:heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 600ms forwards;
}
.hero-body{
  animation:heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}
.hero-cta-row{
  animation:heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 1150ms forwards;
}

@media (prefers-reduced-motion: reduce){
  .h-hero, .hero-tag, .hero-body, .hero-cta-row{
    opacity:1 !important;
    animation:none !important;
  }
}

.h-hero{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(80px, 14vw, 200px);
  line-height:0.88;
  letter-spacing:-0.045em;
  color:var(--ink);
  margin:0;
}
.h-hero .line{ display:block; }
.h-hero .ital{
  font-style:italic;
  font-weight:800;
  color:var(--yellow);
  position:relative;
  display:inline-block;
}
.h-hero .em-dash{
  font-weight:500;
  display:inline-block;
  padding:0 0.04em;
  transform:translateY(-0.16em);
  color:var(--ink);
}

.hero-tag{
  margin-top:32px;
  font-family:'Figtree';
  font-weight:500;
  font-size:clamp(18px, 1.8vw, 24px);
  line-height:1.35;
  color:var(--ink);
  max-width:42ch;
  margin-left:auto; margin-right:auto;
}
.hero-body{
  font-family:'Figtree';
  font-weight:500;
  font-size:clamp(16px, 1.4vw, 19px);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:48ch;
  margin:24px auto 0;
  text-align:center;
}
.hero-tag .scr{
  font-family:'Caveat';
  font-weight:600;
  font-size:1.55em;
  color:var(--orange);
  display:inline-block;
  line-height:1;
  vertical-align:-0.05em;
  transform:rotate(-2deg);
  margin:0 0.05em;
}

.hero-cta-row{
  margin-top:40px;
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:16px 28px;
  border-radius:999px;
  font-family:'Figtree';
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1), filter .25s, box-shadow .25s;
  border:none;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(3,15,46,0.18); }
.btn--ink{    background:var(--ink);   color:#fff; }
.btn--orange{ background:var(--orange);color:var(--ink); }
.btn--green{  background:var(--green); color:var(--ink); }
.btn--blue{   background:var(--blue);  color:var(--ink); }
.btn--yellow{ background:var(--yellow);color:var(--ink); }
.btn--ghost{  background:transparent; color:var(--ink); border:1.5px solid var(--ink); }

/* Decorative doodles around the hero */
.doodle{
  position:absolute;
  z-index:4;
  pointer-events:none;
  user-select:none;
}
.doodle img{ width:100%; height:auto; }
.spin-slow{ animation:spin 18s linear infinite; }
.spin-rev { animation:spin 24s linear infinite reverse; }
.float    { animation:float 5s ease-in-out infinite; }
.float-2  { animation:float 7s ease-in-out infinite reverse; }
.wiggle   { animation:wiggle 4s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes wiggle{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }


/* The new hero cloud is an inline SVG - keep it sized like the old img */
.hero-cloud-bg{ width:100%; height:auto; max-height:130%; opacity:1; }

/* ===================================================================
   CLOUD-EDGE TRANSITION
   =================================================================== */
.about-cloud-edge{
  position:relative;
  background:transparent; /* was #101308 — let sticky hero show through behind clouds */
  width:100%;
  display:flex;
  flex-flow:row;
  align-items:flex-end;
  place-content:flex-end center;
  overflow:hidden;
  margin-bottom:-1px;
  pointer-events:none;
}
.cloud-bump{
  aspect-ratio:1;
  flex:1 0 0;
  width:1px;
  background:var(--bg);
  border-radius:184px;
  border-top:3px solid var(--ink);
  position:relative;
  z-index:1;
}
.cloud-bump.wider{ flex:1.3 0 0; }
.cloud-bridge{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:40%;
  background:var(--bg);
  z-index:2;
}

/* ===== block ===== */

/* ========================================================
   MORSE-CODE PULSE — centre dot + tick ring
   ======================================================== */

.morse-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #e8c97e;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 0 6px 2px rgba(232,201,126,0.5);
}

/* Morse rhythm: dit dit dah  (. . —)  repeating */
@keyframes morse-pulse {
  0%    { opacity: 1;   transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 6px 2px rgba(232,201,126,0.6); }
  4%    { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.1); }
  8%    { opacity: 1;   transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 6px 2px rgba(232,201,126,0.6); }
  13%   { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.1); }
  17%   { opacity: 1;   transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 6px 2px rgba(232,201,126,0.6); }
  /* dah — long hold bright */
  30%   { opacity: 1;   transform: translate(-50%,-50%) scale(1.15); box-shadow: 0 0 10px 4px rgba(232,201,126,0.7); }
  40%   { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.1); }
  /* silence */
  100%  { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.05); }
}

.morse-dot {
  animation: morse-pulse 3.2s ease-in-out infinite;
}

/* Tick marks light up in sequence — driven by CSS animation-delay stagger */
@keyframes tick-light {
  0%, 100% { background: rgba(250,243,224,0.30); }
  50%       { background: rgba(232,201,126,0.90); box-shadow: 0 0 4px rgba(232,201,126,0.6); }
}

.tick:nth-child(1)  { animation: tick-light 3.2s 0.00s ease-in-out infinite; }
.tick:nth-child(2)  { animation: tick-light 3.2s 0.27s ease-in-out infinite; }
.tick:nth-child(3)  { animation: tick-light 3.2s 0.53s ease-in-out infinite; }
.tick:nth-child(4)  { animation: tick-light 3.2s 0.80s ease-in-out infinite; }
.tick:nth-child(5)  { animation: tick-light 3.2s 1.07s ease-in-out infinite; }
.tick:nth-child(6)  { animation: tick-light 3.2s 1.33s ease-in-out infinite; }
.tick:nth-child(7)  { animation: tick-light 3.2s 1.60s ease-in-out infinite; }
.tick:nth-child(8)  { animation: tick-light 3.2s 1.87s ease-in-out infinite; }
.tick:nth-child(9)  { animation: tick-light 3.2s 2.13s ease-in-out infinite; }
.tick:nth-child(10) { animation: tick-light 3.2s 2.40s ease-in-out infinite; }
.tick:nth-child(11) { animation: tick-light 3.2s 2.67s ease-in-out infinite; }
.tick:nth-child(12) { animation: tick-light 3.2s 2.93s ease-in-out infinite; }

/* Major ticks glow brighter when lit */
@keyframes tick-major-light {
  0%, 100% { background: rgba(250,243,224,0.65); }
  50%       { background: rgba(232,201,126,1.0);  box-shadow: 0 0 6px rgba(232,201,126,0.8); }
}

.tick.major:nth-child(13) { animation: tick-major-light 3.2s 0.00s ease-in-out infinite; }
.tick.major:nth-child(14) { animation: tick-major-light 3.2s 0.53s ease-in-out infinite; }
.tick.major:nth-child(15) { animation: tick-major-light 3.2s 1.07s ease-in-out infinite; }
.tick.major:nth-child(16) { animation: tick-major-light 3.2s 1.60s ease-in-out infinite; }
.tick.major:nth-child(17) { animation: tick-major-light 3.2s 2.13s ease-in-out infinite; }
.tick.major:nth-child(18) { animation: tick-major-light 3.2s 2.67s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .morse-dot { animation: none; opacity: 1; }
  .tick, .tick.major { animation: none; }
}

/* ========================================================
   SVG UNDERLINE DRAW-ON
   ======================================================== */

.sig-wrap {
  position: relative;
  display: inline-block;
}

.sig-underline {
  display: block;
  width: 100%;
  height: 18px;
  margin-top: 2px;
  overflow: visible;
}

.sig-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0s; /* default off — JS will trigger */
}

.note-sign.signed .sig-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .sig-line { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ========================================================
   TALLY COUNT-UP — stutter/flicker on landing
   ======================================================== */

@keyframes tally-flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.3; }
  35%  { opacity: 1; }
  55%  { opacity: 0.5; }
  70%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { opacity: 1; }
}

.tally-num.flickering {
  animation: tally-flicker 0.35s ease-out forwards;
  color: var(--orange);
}

.tally-num {
  transition: color 0.3s ease;
  font-variant-numeric: tabular-nums;
}

/* ===== block ===== */

.note-grid { display:grid !important; grid-template-columns:1.5fr 1fr !important; gap:80px !important; align-items:start !important; }
.note-h { font-size:clamp(32px,4.5vw,64px) !important; line-height:1.05 !important; }
.note-margins { display:flex !important; flex-direction:column !important; min-width:0 !important; }
.note-pull p { font-size:clamp(20px,2.8vw,38px) !important; }
.cta-h { font-size:clamp(36px,6vw,90px) !important; text-align:center !important; }
.cta-sub { text-align:center !important; }
@media(max-width:809px){ .note-grid{ grid-template-columns:1fr !important; } }

/* ===== block ===== */

@media (prefers-reduced-motion: reduce) {
  .morse-dit, .morse-dah {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ===== block ===== */

/* ── Studio terminal ── */
.studio-terminal {
  margin-top: 28px;
  border-top: 1px solid rgba(8,49,42,0.15);
  padding-top: 22px;
}

.terminal-chrome {
  background: #07211b;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.terminal-titlebar {
  background: #0d2e26;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.t-btn {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.t-btn:nth-child(1) { background: #ff5f57; }
.t-btn:nth-child(2) { background: #febc2e; }
.t-btn:nth-child(3) { background: #28c840; }

.t-file {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(250,243,224,0.25);
  flex: 1;
  text-align: center;
}

.terminal-body {
  padding: 14px 16px 16px;
  min-height: 220px;
}

.t-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.75;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.t-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Token colours */
.t-prompt  { color: #c9a55c; }
.t-cmd     { color: rgba(250,243,224,0.90); }
.t-key     { color: rgba(250,243,224,0.45); }
.t-val     { color: #4A90D9; }
.t-ok      { color: #3dd68c; }
.t-warn    { color: #febc2e; }
.t-hi      { color: #E8541A; }
.t-dim     { color: rgba(250,243,224,0.28); }

/* Blinking block cursor */
.t-cursor {
  display: inline-block;
  width: 7px; height: 11px;
  background: #c9a55c;
  vertical-align: middle;
  margin-left: 2px;
  animation: t-blink 1s step-end infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .t-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .t-cursor { animation: none; }
}

/* ===== block ===== */

/* ── Studio data card ── */
.studio-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 8px;
  padding: 36px 36px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(3,15,30,0.3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.studio-card.sc-visible {
  opacity: 1;
  transform: translateY(0);
}

.studio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, transparent 100%);
}

.sc-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.sc-blink {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  animation: sc-blink 1.4s ease-in-out infinite;
}

@keyframes sc-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.2; transform:scale(0.7); }
}

.sc-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,243,224,0.3);
}

.sc-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(250,243,224,0.06);
}
.sc-row:last-of-type { border-bottom: none; }

.sc-num {
  font-family: 'Figtree', sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FAF3E0;
  min-width: 96px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: opacity 0.08s ease;
}
.sc-num.orange { color: var(--orange); }
.sc-num.gold   { color: #c9a55c; }
.sc-num.dim    { color: rgba(250,243,224,0.35); font-size:40px; }

.sc-meta { flex: 1; min-width: 0; }

.sc-label {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(250,243,224,0.4);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.sc-bar {
  height: 3px;
  background: rgba(250,243,224,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.sc-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 1px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

.studio-card.sc-visible .sc-fill {
  width: var(--w, 0%);
}

/* Stagger fill delays */
.sc-row:nth-child(2) .sc-fill { transition-delay: 0.1s; }
.sc-row:nth-child(3) .sc-fill { transition-delay: 0.25s; }
.sc-row:nth-child(4) .sc-fill { transition-delay: 0.4s; }
.sc-row:nth-child(5) .sc-fill { transition-delay: 0.55s; background: rgba(250,243,224,0.2); }

.sc-divider {
  height: 1px;
  background: rgba(250,243,224,0.07);
  margin: 16px 0 14px;
}

.sc-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(250,243,224,0.18);
  line-height: 1.6;
}

@media (max-width:809px) {
  .studio-card { max-width: 100%; }
  .sc-num { font-size: 42px; min-width: 80px; }
}

/* ===== block ===== */

:root{--sx:50%;--sy:46%;--sr:400px;}
/* native cursor restored */
#hero{background:#101308 !important;}
#hero::before{display:none !important;}
.hero-blobs{display:none !important;}
.hero-cloud-frame{display:none !important;}
#hero .h-hero{color:#EEF5D5 !important;}
#hero .h-hero .em-dash{color:#EEF5D5 !important;}
#hero .h-hero .ital{color:#2bc4be !important;}
#hero .hero-tag{color:rgba(238,245,213,.88) !important;}
#hero .hero-tag .ital{color:#ebe34d !important;}
#hero .hero-tag .scr{color:#e85fb0 !important;opacity:1 !important;}
#hero .hero-body{color:rgba(232,245,200,.55) !important;}
#hero .btn--ink{background:#58c99b !important;color:#0a1005 !important;font-weight:800 !important;}
#hero .btn--ghost{color:rgba(232,245,210,.92) !important;border-color:rgba(232,245,210,.45) !important;}
#hero .hero-content{z-index:8 !important;}
.hero-wt{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:1;transition:opacity 2.2s ease;}
.hero-wt.faded{opacity:.07;}
.hero-sw{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle calc(var(--sr)*.27) at var(--sx) var(--sy),rgba(255,240,130,.36) 0%,rgba(220,198,78,.16) 55%,transparent 100%),
             radial-gradient(circle var(--sr) at var(--sx) var(--sy),rgba(212,190,72,.16) 0%,rgba(185,165,50,.06) 52%,transparent 100%),
             radial-gradient(circle calc(var(--sr)*1.65) at var(--sx) var(--sy),rgba(165,145,38,.05) 0%,transparent 100%);}
.hero-sm{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle var(--sr) at var(--sx) var(--sy),transparent 0%,transparent 44%,rgba(16,19,8,.65) 62%,rgba(16,19,8,.93) 79%,rgba(16,19,8,.985) 92%,rgba(16,19,8,.998) 100%);}
.hero-wb{position:absolute;inset:0;z-index:7;pointer-events:none;
  -webkit-clip-path:circle(var(--sr) at var(--sx) var(--sy));
  clip-path:circle(var(--sr) at var(--sx) var(--sy));}
.mw{position:absolute;font-family:'Figtree',sans-serif;font-weight:900;letter-spacing:-.04em;color:rgba(232,245,202,.92);white-space:nowrap;line-height:1;}
.mw-i{font-style:italic;font-weight:800;}
.spot-orb{position:fixed;pointer-events:none;z-index:9999;width:12px;height:12px;border-radius:50%;background:rgba(120,224,214,.95);box-shadow:0 0 0 2px rgba(70,200,195,.22),0 0 14px 4px rgba(70,200,195,.62),0 0 32px 10px rgba(40,170,165,.32),0 0 62px 20px rgba(40,170,165,.14);transform:translate(-50%,-50%);transition:width .22s cubic-bezier(.34,1.56,.64,1),height .22s,box-shadow .22s;animation:orbB 3s ease-in-out infinite;}
.spot-orb.hov{width:22px;height:22px;box-shadow:0 0 0 3px rgba(70,200,195,.2),0 0 22px 7px rgba(70,200,195,.68),0 0 50px 16px rgba(40,170,165,.36),0 0 90px 30px rgba(40,170,165,.16);}
.spot-orb.clk{width:6px;height:6px;}
@keyframes orbB{0%,100%{box-shadow:0 0 0 2px rgba(70,200,195,.22),0 0 14px 4px rgba(70,200,195,.62),0 0 32px 10px rgba(40,170,165,.32),0 0 62px 20px rgba(40,170,165,.14);}50%{box-shadow:0 0 0 2px rgba(70,200,195,.30),0 0 20px 6px rgba(70,200,195,.74),0 0 44px 14px rgba(40,170,165,.40),0 0 82px 26px rgba(40,170,165,.18);}}
@keyframes hintBlink{0%,100%{opacity:.3;}50%{opacity:.9;}}
.cs{position:absolute;pointer-events:none;z-index:22;display:block;}.cs svg{display:block;width:100%;height:100%;overflow:visible;}
.cr{position:absolute;pointer-events:none;z-index:22;border-radius:50%;border:2px solid;animation:crOut .95s ease-out forwards;}
@keyframes crOut{from{transform:scale(0);opacity:.8;}to{transform:scale(6);opacity:0;}}

/* ===== block ===== */

@media (prefers-reduced-motion: reduce) {
  .morse-dit, .morse-dah {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ===================================================================
   CINEMATIC INTRO TRANSITION
   =================================================================== */
.intro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:#fefbf6;
  display:flex;
  align-items:center;
  justify-content:center;
  /* The whole overlay lifts away at the end */
  animation:introExit 700ms cubic-bezier(0.76, 0, 0.24, 1) 3200ms forwards;
}
body.intro-done .intro{ display:none; }
@keyframes introExit{
  to{ transform:translateY(-100%); }
}

/* Lock scroll while intro plays */
body.intro-playing{ overflow:hidden; }

/* ── Curtain panels that wipe up one after another ── */
.intro-panels{
  position:absolute; inset:0;
  display:flex;
  z-index:1;
  pointer-events:none;
}
.intro-panel{
  flex:1;
  height:100%;
  transform:translateY(0);
}
.intro-panel.p1{ background:#2bc4be; }
.intro-panel.p2{ background:#a9bff0; }
.intro-panel.p3{ background:#9be3c0; }
.intro-panel.p4{ background:#eee85c; }
.intro-panel.p5{ background:#6cc5ec; }
/* Panels rise in to cover, then slide away revealing cream center */
.intro-panel{
  animation:panelDrop 600ms cubic-bezier(0.16,1,0.3,1) forwards,
            panelLift 600ms cubic-bezier(0.76,0,0.24,1) forwards;
}
.intro-panel.p1{ animation-delay:0ms,        2500ms; }
.intro-panel.p2{ animation-delay:80ms,       2560ms; }
.intro-panel.p3{ animation-delay:160ms,      2620ms; }
.intro-panel.p4{ animation-delay:240ms,      2680ms; }
.intro-panel.p5{ animation-delay:320ms,      2740ms; }
@keyframes panelDrop{
  from{ transform:translateY(-100%); }
  to  { transform:translateY(0); }
}
@keyframes panelLift{
  from{ transform:translateY(0); }
  to  { transform:translateY(-100%); }
}

/* ── Sweeping brand shapes behind the wordmark ── */
.intro-shapes{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.intro-shape{ position:absolute; border-radius:50%; filter:blur(8px); opacity:0; }
.intro-shape.sh1{
  width:260px;height:260px;left:12%;top:30%;
  background:radial-gradient(circle,#ffd9b8,transparent 70%);
  animation:shapeSweep 1600ms ease-out 900ms forwards;
}
.intro-shape.sh2{
  width:200px;height:200px;right:14%;top:24%;
  background:radial-gradient(circle,#f6c9ff,transparent 70%);
  animation:shapeSweep 1600ms ease-out 1050ms forwards;
}
.intro-shape.sh3{
  width:300px;height:300px;left:40%;bottom:14%;
  background:radial-gradient(circle,#bff0d6,transparent 70%);
  animation:shapeSweep 1600ms ease-out 1200ms forwards;
}
@keyframes shapeSweep{
  0%  { opacity:0; transform:translateY(40px) scale(0.8); }
  40% { opacity:0.8; }
  100%{ opacity:0.5; transform:translateY(0) scale(1.15); }
}

/* ── Center stage ── */
.intro-stage{
  position:relative;
  z-index:3;
  text-align:center;
  padding:0 24px;
}
.intro-kicker{
  margin:0 0 14px;
  font-family:'Caveat', cursive;
  font-weight:600;
  font-size:clamp(20px, 3vw, 30px);
  color:#2bc4be;
  overflow:hidden;
}
.intro-kicker span{
  display:inline-block;
  transform:translateY(110%);
  animation:introRise 700ms cubic-bezier(0.16,1,0.3,1) 600ms forwards;
}
.intro-word{
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:900;
  font-size:clamp(64px, 12vw, 168px);
  line-height:0.9;
  letter-spacing:-0.045em;
  color:#030f2e;
  display:flex;
  justify-content:center;
  align-items:baseline;
}
.intro-word .iw{
  display:inline-block;
  opacity:0;
  transform:translateY(60px) rotate(8deg);
  animation:iwRise 720ms cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.intro-word .iw-pink{
  color:#f58fc4;
  font-style:italic;
  font-weight:800;
}
.intro-word .iw:nth-child(1){ animation-delay:850ms; }
.intro-word .iw:nth-child(2){ animation-delay:930ms; }
.intro-word .iw:nth-child(4){ animation-delay:1100ms; }
.intro-word .iw:nth-child(5){ animation-delay:1180ms; }
.intro-word .iw:nth-child(6){ animation-delay:1260ms; }
.intro-word .iw:nth-child(7){ animation-delay:1340ms; }
.intro-dash{
  display:inline-block;
  color:#030f2e;
  font-weight:500;
  padding:0 0.04em;
  transform:scaleX(0);
  transform-origin:left center;
  animation:dashGrow 460ms cubic-bezier(0.16,1,0.3,1) 1020ms forwards;
}
@keyframes iwRise{
  to{ opacity:1; transform:translateY(0) rotate(0deg); }
}
@keyframes dashGrow{
  to{ transform:scaleX(1); }
}
.intro-sub{
  margin:22px 0 0;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:clamp(15px, 1.6vw, 20px);
  color:#030f2e;
  overflow:hidden;
}
.intro-sub span{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  animation:introFade 700ms ease 1700ms forwards;
}
.intro-loadbar{
  margin:34px auto 0;
  width:160px; height:3px;
  background:rgba(3,15,46,0.12);
  border-radius:99px;
  overflow:hidden;
}
.intro-loadbar span{
  display:block; height:100%;
  width:0;
  background:linear-gradient(90deg,#2bc4be,#a9bff0,#9be3c0);
  border-radius:99px;
  animation:loadFill 2200ms cubic-bezier(0.4,0,0.2,1) 700ms forwards;
}
@keyframes introRise{ to{ transform:translateY(0); } }
@keyframes introFade{ to{ opacity:1; transform:translateY(0); } }
@keyframes loadFill{ to{ width:100%; } }

@media (prefers-reduced-motion: reduce){
  .intro{ animation:none; transition:opacity 400ms ease; }
  .intro-panel, .intro-shape, .intro-kicker span, .intro-word .iw,
  .intro-dash, .intro-sub span, .intro-loadbar span{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* ===================================================================
   LOFTY-LAB VISUAL SYSTEM · UN-HERD CONTENT
   =================================================================== */
/* ─── Accessibility: skip link, focus, reduced motion ────────────── */
.skip-link{
  position:absolute; top:-44px; left:16px;
  background:#030f2e; color:#fefbf6;
  padding:10px 18px; border-radius:8px;
  font-family:'Figtree',sans-serif; font-weight:700; font-size:14px;
  text-decoration:none; z-index:9999;
  transition:top .2s;
}
.skip-link:focus{ top:16px; outline:3px solid #eee85c; outline-offset:2px; }

*:focus-visible{
  outline:3px solid #6cc5ec;
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible, button:focus-visible{
  outline:3px solid #6cc5ec;
  outline-offset:3px;
}

/* honor reader-requested reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track{ animation:none !important; }
}

html{ scroll-behavior:smooth; }

:root{
  --dark:      #02091d;
  --ink:       #030f2e;
  --ink-soft:  rgba(3,15,46,0.72);
  --blue:      #2bc4be;
  --blue-soft: #8fe3df;
  --orange:    #0e7c72;
  --green:     #58c99b;
  --yellow:    #ebe34d;
  --purple:    #2bc4be;
  --pink:      #f58fc4;
  --lavender:  #a78bfa;
  --sky:       #57b3ea;
  --mint:      #93e6cf;
  --fuchsia:   #e85fb0;
  --bg:        #fefbf6;
  --bg-warm:   #faf3e0;
  --line:      #02091d;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overscroll-behavior:none; }
html{ scroll-behavior:smooth; background:#030f2e; }
body{
  background:#030f2e;
  color:var(--ink);
  font-family:'Figtree','Inter',system-ui,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }

.script{
  font-family:'Caveat','Caveat Brush',cursive;
  font-weight:600;
  font-style:normal;
}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}
.container--wide{ max-width:1440px; }

/* ===================================================================
   NAV
   =================================================================== */
.nav{
  position:fixed;
  top:18px;
  left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.nav-inner{
  background:var(--ink);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 8px 8px 28px;
  border-radius:999px;
  pointer-events:auto;
  box-shadow:0 6px 32px rgba(3,15,46,0.18);
}
.nav-mark{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.02em;
  margin-right:18px;
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-mark .em{ font-weight:600; }
.nav-mark .herd{ font-style:italic; color:var(--blue); font-weight:700; }

.nav-btn{
  display:inline-block;
  padding:9px 18px;
  border-radius:999px;
  font-family:'Figtree';
  font-weight:700;
  font-size:13.5px;
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1), filter .25s;
}
.nav-btn:hover{ transform:translateY(-1px); filter:brightness(0.95); }
.nav-btn.blue{   background:var(--blue);     color:var(--ink); }
.nav-btn.orange{ background:var(--yellow);   color:var(--ink); }
.nav-btn.green{  background:var(--mint);    color:var(--ink); }
.nav-btn.purple{ background:var(--lavender);   color:var(--ink); }

@media (max-width:720px){
  .nav-mark{ margin-right:6px; font-size:16px; }
  .nav-btn{ padding:7px 11px; font-size:11px; }
}

/* ===================================================================
   STICKY HERO + CLOUD-EDGE (preserved from prior build)
   =================================================================== */
.sticky-stage{ position:relative; background:transparent; }

.hero{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  z-index:1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, #ffd9b8 0%, transparent 60%),
    linear-gradient(180deg, #fef5e6 0%, #ffe6cd 55%, #ffd5b3 100%);
}

.hero-cloud-frame{
  position:absolute;
  left:-15%;
  bottom:-12%;
  width:130%;
  height:90%;
  z-index:1;
  pointer-events:none;
}
.hero-cloud-bg-wrap{
  position:absolute;
  left:0; right:0; bottom:0; top:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  will-change:transform;
}
.hero-cloud-bg{
  width:100%;
  height:auto;
  max-height:130%;
  opacity:0.95;
  transform-origin:50% 60%;
  will-change:transform;
}
@keyframes cloud-spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* Drifting blob layers — slow organic movement behind the wordmark */
.hero-blobs{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(46px);
  opacity:0.5;
  mix-blend-mode:multiply;
  will-change:transform;
}
.hero-blob.b1{
  width:560px; height:560px;
  left:6%; bottom:-8%;
  background:radial-gradient(circle at 40% 40%, #ffc89c, transparent 68%);
  animation:blobDrift1 22s ease-in-out infinite;
}
.hero-blob.b2{
  width:680px; height:680px;
  right:2%; bottom:-12%;
  background:radial-gradient(circle at 55% 45%, #ffd9b8, transparent 68%);
  animation:blobDrift2 27s ease-in-out infinite;
}
.hero-blob.b3{
  width:480px; height:480px;
  left:38%; bottom:-18%;
  background:radial-gradient(circle at 50% 50%, #ffe1c9, transparent 70%);
  animation:blobDrift3 19s ease-in-out infinite;
}
@keyframes blobDrift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(48px,-36px) scale(1.08); }
  66%    { transform:translate(-30px,-18px) scale(0.96); }
}
@keyframes blobDrift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  40%    { transform:translate(-54px,-30px) scale(1.06); }
  70%    { transform:translate(26px,-44px) scale(0.94); }
}
@keyframes blobDrift3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(34px,-50px) scale(1.1); }
}

/* Animated gradient sheen on the hero background */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(120deg, rgba(255,116,46,0.05), rgba(229,160,250,0.05), rgba(45,105,255,0.04));
  background-size:200% 200%;
  animation:heroSheen 18s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroSheen{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* Grain overlay for editorial tactility */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-content{
  position:relative;
  z-index:5;
  text-align:center;
  padding:0 24px;
  width:100%;
  max-width:1200px;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

/* Big wordmark - chunky display */
/* Hero entrance — staggered reveal on page load */
@keyframes heroFadeUp{
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes heroScaleIn{
  from { opacity:0; transform:scale(0.96); }
  to   { opacity:1; transform:scale(1); }
}
.h-hero, .hero-tag, .hero-body, .hero-cta-row{
  opacity:0;
}
.h-hero{
  /* container no longer animates as a block; letters animate individually */
  opacity:1;
}
/* Hero entrance animations are paused until the intro lifts away */
.h-hero .hch,
.h-hero .em-dash,
.hero-tag,
.hero-body,
.hero-cta-row,
.scroll-cue,
.doodle .dood-inner{
  animation-play-state:paused;
}
body.intro-done .h-hero .hch,
body.intro-done .h-hero .em-dash,
body.intro-done .hero-tag,
body.intro-done .hero-body,
body.intro-done .hero-cta-row,
body.intro-done .scroll-cue,
body.intro-done .doodle .dood-inner{
  animation-play-state:running;
}
/* Per-letter staggered reveal */
.h-hero .hch{
  display:inline-block;
  opacity:0;
  transform:translateY(40px) rotate(6deg);
  animation:chRise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes chRise{
  to{ opacity:1; transform:translateY(0) rotate(0deg); }
}
/* "herd" letters land last with a touch of overshoot */
.h-hero .ital .hch{
  animation:chRiseOvershoot 1000ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes chRiseOvershoot{
  0%  { opacity:0; transform:translateY(46px) rotate(8deg); }
  100%{ opacity:1; transform:translateY(0) rotate(0deg); }
}
/* The dash draws itself in and gives a subtle pulse */
.h-hero .em-dash{
  opacity:0;
  transform:scaleX(0) translateY(-0.16em);
  transform-origin:left center;
  animation:dashDraw 600ms cubic-bezier(0.16,1,0.3,1) 700ms forwards, dashPulse 3.4s ease-in-out 1600ms infinite;
}
@keyframes dashDraw{
  to{ opacity:1; transform:scaleX(1) translateY(-0.16em); }
}
@keyframes dashPulse{
  0%,100%{ transform:scaleX(1) translateY(-0.16em); }
  50%    { transform:scaleX(1.18) translateY(-0.16em); }
}
.hero-tag{
  animation:heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 1500ms forwards;
}
.hero-body{
  animation:heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 1750ms forwards;
}
.hero-cta-row{
  animation:heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 2000ms forwards;
}

@media (prefers-reduced-motion: reduce){
  .h-hero, .hero-tag, .hero-body, .hero-cta-row,
  .h-hero .hch, .h-hero .em-dash{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .h-hero .em-dash{ transform:translateY(-0.16em) !important; }
}

.h-hero{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(80px, 14vw, 200px);
  line-height:0.88;
  letter-spacing:-0.045em;
  color:var(--ink);
  margin:0;
}
.h-hero .line{ display:block; }
.h-hero .ital{
  font-style:italic;
  font-weight:800;
  color:var(--yellow);
  position:relative;
  display:inline-block;
}
.h-hero .em-dash{
  font-weight:500;
  display:inline-block;
  padding:0 0.04em;
  transform:translateY(-0.16em);
  color:var(--ink);
}

.hero-tag{
  margin-top:32px;
  font-family:'Figtree';
  font-weight:500;
  font-size:clamp(18px, 1.8vw, 24px);
  line-height:1.35;
  color:var(--ink);
  max-width:42ch;
  margin-left:auto; margin-right:auto;
}
.hero-body{
  font-family:'Figtree';
  font-weight:500;
  font-size:clamp(16px, 1.4vw, 19px);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:48ch;
  margin:24px auto 0;
  text-align:center;
}
.hero-tag .scr{
  font-family:'Caveat';
  font-weight:600;
  font-size:1.55em;
  color:var(--orange);
  display:inline-block;
  line-height:1;
  vertical-align:-0.05em;
  transform:rotate(-2deg);
  margin:0 0.05em;
}

.hero-cta-row{
  margin-top:40px;
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:16px 28px;
  border-radius:999px;
  font-family:'Figtree';
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1), filter .25s, box-shadow .25s;
  border:none;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(3,15,46,0.18); }
.btn--ink{    background:var(--ink);   color:#fff; }
.btn--orange{ background:var(--orange);color:var(--ink); }
.btn--green{  background:var(--green); color:var(--ink); }
.btn--blue{   background:var(--blue);  color:var(--ink); }
.btn--yellow{ background:var(--yellow);color:var(--ink); }
.btn--ghost{  background:transparent; color:var(--ink); border:1.5px solid var(--ink); }

/* Arrow nudges right on hover */
.btn .arr{ display:inline-block; transition:transform .25s cubic-bezier(.4,0,.2,1); }
.btn:hover .arr{ transform:translateX(5px); }

/* Rotating word in the tagline */
.rotator{
  display:inline-block;
  position:relative;
  min-width:5.5ch;
  text-align:left;
  vertical-align:bottom;
}
.rotator .rot-word{
  display:inline-block;
  font-family:'Caveat';
  font-weight:600;
  font-size:1.55em;
  color:var(--orange);
  line-height:1;
  transform:rotate(-2deg);
  transition:opacity .4s ease, transform .4s ease;
}
.rotator .rot-word.out{
  opacity:0;
  transform:rotate(-2deg) translateY(10px);
}

/* Scroll cue at bottom of hero */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:38px;
  transform:translateX(-50%);
  z-index:7;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  animation:cueFade 800ms ease 2400ms forwards;
  pointer-events:none;
}
.scroll-cue .cue-txt{
  font-family:'Caveat';
  font-weight:600;
  font-size:19px;
  color:var(--ink);
  opacity:0.7;
}
.scroll-cue .cue-arrow{
  width:24px; height:24px;
  border-right:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg);
  animation:cueBounce 1.8s ease-in-out infinite;
  opacity:0.65;
}
@keyframes cueFade{ to{ opacity:1; } }
@keyframes cueBounce{
  0%,100%{ transform:rotate(45deg) translate(0,0); }
  50%    { transform:rotate(45deg) translate(5px,5px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation:none; opacity:1; }
  .scroll-cue .cue-arrow{ animation:none; }
}

/* Decorative doodles around the hero */
.doodle{
  position:absolute;
  z-index:4;
  pointer-events:none;
  user-select:none;
  --px:0px; --py:0px;
  transform:translate3d(var(--px), var(--py), 0);
}
.doodle .dood-inner{
  display:block;
  width:100%; height:100%;
  opacity:0;
  animation:doodleIn 700ms ease forwards;
}
@keyframes doodleIn{ to{ opacity:0.7; } }
.doodle svg{ display:block; width:100%; height:100%; overflow:visible; }
.doodle.d1{ top:14%;  left:5%;  width:58px; height:58px; }
.doodle.d2{ top:12%;  right:6%; width:50px; height:50px; }
.doodle.d3{ bottom:20%; left:8%; width:48px; height:48px; }
.doodle.d4{ bottom:24%; right:9%; width:42px; height:42px; }
.doodle.d1 .dood-inner{ animation-delay:2200ms; }
.doodle.d2 .dood-inner{ animation-delay:2400ms; }
.doodle.d3 .dood-inner{ animation-delay:2600ms; }
.doodle.d4 .dood-inner{ animation-delay:2500ms; }
.spin-slow{ animation:doodleIn 700ms ease forwards, spin 18s linear infinite; }
.spin-rev { animation:doodleIn 700ms ease forwards, spin 24s linear infinite reverse; }
.float    { animation:doodleIn 700ms ease forwards, float 5s ease-in-out infinite; }
.float-2  { animation:doodleIn 700ms ease forwards, float 7s ease-in-out infinite reverse; }
.wiggle   { animation:doodleIn 700ms ease forwards, wiggle 4s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes wiggle{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }
@media (prefers-reduced-motion: reduce){
  .doodle .dood-inner, .spin-slow, .spin-rev, .float, .float-2, .wiggle{
    animation:none !important; opacity:0.9 !important;
  }
}


/* The new hero cloud is an inline SVG - keep it sized like the old img */
.hero-cloud-bg{ width:100%; height:auto; max-height:130%; opacity:1; }

/* ===================================================================
   CLOUD-EDGE TRANSITION
   =================================================================== */
.about-cloud-edge{
  position:relative;
  background:transparent; /* was #101308 — let sticky hero show through behind clouds */
  width:100%;
  display:flex;
  flex-flow:row;
  align-items:flex-end;
  place-content:flex-end center;
  overflow:hidden;
  margin-bottom:-1px;
  pointer-events:none;
}
.cloud-bump{
  aspect-ratio:1;
  flex:1 0 0;
  width:1px;
  background:var(--bg);
  border-radius:184px;
  border-top:3px solid var(--ink);
  position:relative;
  z-index:1;
}
.cloud-bump.wider{ flex:1.3 0 0; }
.cloud-bridge{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:40%;
  background:var(--bg);
  z-index:2;
}

/* ═══════════════════════════════════════════ */

/* ========================================================
   MORSE-CODE PULSE — centre dot + tick ring
   ======================================================== */

.morse-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #e8c97e;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 0 6px 2px rgba(232,201,126,0.5);
}

/* Morse rhythm: dit dit dah  (. . —)  repeating */
@keyframes morse-pulse {
  0%    { opacity: 1;   transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 6px 2px rgba(232,201,126,0.6); }
  4%    { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.1); }
  8%    { opacity: 1;   transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 6px 2px rgba(232,201,126,0.6); }
  13%   { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.1); }
  17%   { opacity: 1;   transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 6px 2px rgba(232,201,126,0.6); }
  /* dah — long hold bright */
  30%   { opacity: 1;   transform: translate(-50%,-50%) scale(1.15); box-shadow: 0 0 10px 4px rgba(232,201,126,0.7); }
  40%   { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.1); }
  /* silence */
  100%  { opacity: 0.15; transform: translate(-50%,-50%) scale(0.6); box-shadow: 0 0 2px 1px rgba(232,201,126,0.05); }
}

.morse-dot {
  animation: morse-pulse 3.2s ease-in-out infinite;
}

/* Tick marks light up in sequence — driven by CSS animation-delay stagger */
@keyframes tick-light {
  0%, 100% { background: rgba(250,243,224,0.30); }
  50%       { background: rgba(232,201,126,0.90); box-shadow: 0 0 4px rgba(232,201,126,0.6); }
}

.tick:nth-child(1)  { animation: tick-light 3.2s 0.00s ease-in-out infinite; }
.tick:nth-child(2)  { animation: tick-light 3.2s 0.27s ease-in-out infinite; }
.tick:nth-child(3)  { animation: tick-light 3.2s 0.53s ease-in-out infinite; }
.tick:nth-child(4)  { animation: tick-light 3.2s 0.80s ease-in-out infinite; }
.tick:nth-child(5)  { animation: tick-light 3.2s 1.07s ease-in-out infinite; }
.tick:nth-child(6)  { animation: tick-light 3.2s 1.33s ease-in-out infinite; }
.tick:nth-child(7)  { animation: tick-light 3.2s 1.60s ease-in-out infinite; }
.tick:nth-child(8)  { animation: tick-light 3.2s 1.87s ease-in-out infinite; }
.tick:nth-child(9)  { animation: tick-light 3.2s 2.13s ease-in-out infinite; }
.tick:nth-child(10) { animation: tick-light 3.2s 2.40s ease-in-out infinite; }
.tick:nth-child(11) { animation: tick-light 3.2s 2.67s ease-in-out infinite; }
.tick:nth-child(12) { animation: tick-light 3.2s 2.93s ease-in-out infinite; }

/* Major ticks glow brighter when lit */
@keyframes tick-major-light {
  0%, 100% { background: rgba(250,243,224,0.65); }
  50%       { background: rgba(232,201,126,1.0);  box-shadow: 0 0 6px rgba(232,201,126,0.8); }
}

.tick.major:nth-child(13) { animation: tick-major-light 3.2s 0.00s ease-in-out infinite; }
.tick.major:nth-child(14) { animation: tick-major-light 3.2s 0.53s ease-in-out infinite; }
.tick.major:nth-child(15) { animation: tick-major-light 3.2s 1.07s ease-in-out infinite; }
.tick.major:nth-child(16) { animation: tick-major-light 3.2s 1.60s ease-in-out infinite; }
.tick.major:nth-child(17) { animation: tick-major-light 3.2s 2.13s ease-in-out infinite; }
.tick.major:nth-child(18) { animation: tick-major-light 3.2s 2.67s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .morse-dot { animation: none; opacity: 1; }
  .tick, .tick.major { animation: none; }
}

/* ========================================================
   SVG UNDERLINE DRAW-ON
   ======================================================== */

.sig-wrap {
  position: relative;
  display: inline-block;
}

.sig-underline {
  display: block;
  width: 100%;
  height: 18px;
  margin-top: 2px;
  overflow: visible;
}

.sig-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0s; /* default off — JS will trigger */
}

.note-sign.signed .sig-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .sig-line { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ========================================================
   TALLY COUNT-UP — stutter/flicker on landing
   ======================================================== */

@keyframes tally-flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.3; }
  35%  { opacity: 1; }
  55%  { opacity: 0.5; }
  70%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { opacity: 1; }
}

.tally-num.flickering {
  animation: tally-flicker 0.35s ease-out forwards;
  color: var(--orange);
}

.tally-num {
  transition: color 0.3s ease;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════ */

.note-grid { display:grid !important; grid-template-columns:1.5fr 1fr !important; gap:80px !important; align-items:start !important; }
.note-h { font-size:clamp(32px,4.5vw,64px) !important; line-height:1.05 !important; }
.note-margins { display:flex !important; flex-direction:column !important; min-width:0 !important; }
.note-pull p { font-size:clamp(20px,2.8vw,38px) !important; }
.cta-h { font-size:clamp(36px,6vw,90px) !important; text-align:center !important; }
.cta-sub { text-align:center !important; }
@media(max-width:809px){ .note-grid{ grid-template-columns:1fr !important; } }

/* ═══════════════════════════════════════════ */

/* ── Studio terminal ── */
.studio-terminal {
  margin-top: 28px;
  border-top: 1px solid rgba(8,49,42,0.15);
  padding-top: 22px;
}

.terminal-chrome {
  background: #07211b;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.terminal-titlebar {
  background: #0d2e26;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.t-btn {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.t-btn:nth-child(1) { background: #ff5f57; }
.t-btn:nth-child(2) { background: #febc2e; }
.t-btn:nth-child(3) { background: #28c840; }

.t-file {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(250,243,224,0.25);
  flex: 1;
  text-align: center;
}

.terminal-body {
  padding: 14px 16px 16px;
  min-height: 220px;
}

.t-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.75;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.t-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Token colours */
.t-prompt  { color: #c9a55c; }
.t-cmd     { color: rgba(250,243,224,0.90); }
.t-key     { color: rgba(250,243,224,0.45); }
.t-val     { color: #4A90D9; }
.t-ok      { color: #3dd68c; }
.t-warn    { color: #febc2e; }
.t-hi      { color: #E8541A; }
.t-dim     { color: rgba(250,243,224,0.28); }

/* Blinking block cursor */
.t-cursor {
  display: inline-block;
  width: 7px; height: 11px;
  background: #c9a55c;
  vertical-align: middle;
  margin-left: 2px;
  animation: t-blink 1s step-end infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .t-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .t-cursor { animation: none; }
}

/* ═══════════════════════════════════════════ */

/* ── Studio data card ── */
.studio-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 8px;
  padding: 36px 36px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(3,15,30,0.3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.studio-card.sc-visible {
  opacity: 1;
  transform: translateY(0);
}

.studio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, transparent 100%);
}

.sc-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.sc-blink {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  animation: sc-blink 1.4s ease-in-out infinite;
}

@keyframes sc-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.2; transform:scale(0.7); }
}

.sc-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,243,224,0.3);
}

.sc-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(250,243,224,0.06);
}
.sc-row:last-of-type { border-bottom: none; }

.sc-num {
  font-family: 'Figtree', sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FAF3E0;
  min-width: 96px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: opacity 0.08s ease;
}
.sc-num.orange { color: var(--orange); }
.sc-num.gold   { color: #c9a55c; }
.sc-num.dim    { color: rgba(250,243,224,0.35); font-size:40px; }

.sc-meta { flex: 1; min-width: 0; }

.sc-label {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(250,243,224,0.4);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.sc-bar {
  height: 3px;
  background: rgba(250,243,224,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.sc-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 1px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

.studio-card.sc-visible .sc-fill {
  width: var(--w, 0%);
}

/* Stagger fill delays */
.sc-row:nth-child(2) .sc-fill { transition-delay: 0.1s; }
.sc-row:nth-child(3) .sc-fill { transition-delay: 0.25s; }
.sc-row:nth-child(4) .sc-fill { transition-delay: 0.4s; }
.sc-row:nth-child(5) .sc-fill { transition-delay: 0.55s; background: rgba(250,243,224,0.2); }

.sc-divider {
  height: 1px;
  background: rgba(250,243,224,0.07);
  margin: 16px 0 14px;
}

.sc-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(250,243,224,0.18);
  line-height: 1.6;
}

@media (max-width:809px) {
  .studio-card { max-width: 100%; }
  .sc-num { font-size: 42px; min-width: 80px; }
}

/* ═══════════════════════════════════════════ */

.svc-train-strip{background:var(--bg-warm);position:relative;width:100%;height:245px;overflow:hidden;border-bottom:3px solid var(--ink);}
.svc-track{position:absolute;inset:0;pointer-events:none;}
.svc-track svg{width:100%;height:100%;display:block;}
.svc-mover{position:absolute;top:0;left:0;height:100%;width:max-content;will-change:transform;animation:svc-roll 42s linear infinite;animation-play-state:paused;}
.svc-mover svg{height:100%;display:block;}
.svc-train-strip.rolling .svc-mover{animation-play-state:running;}
@keyframes svc-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.svc-train-strip:hover .svc-mover{animation-play-state:paused;}
.wspk{transform-box:fill-box;transform-origin:center;animation:wspn 1.6s linear infinite;animation-play-state:paused;}
.svc-train-strip.rolling .wspk{animation-play-state:running;}
@keyframes wspn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.svc-mover,.wspk{animation:none;}}
@media(max-width:800px){.svc-train-strip{height:190px;}.svc-mover{animation-duration:32s;}}

/* ═══════════════════════════════════════════ */

/* ============ MANIFESTO ============ */
.manifesto-body{
  background:var(--bg);
  padding:80px 0 140px;
  position:relative;
}
.manifesto-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:36px;
}
.manifesto-eyebrow .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.manifesto-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:28px;
  color:var(--orange);
  line-height:1;
}
.manifesto h2{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(48px, 7.5vw, 104px);
  line-height:0.95;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin:0 0 36px;
  max-width:18ch;
}
.manifesto h2 .ital{
  font-style:italic;
  font-weight:800;
  color:var(--orange);
}
.manifesto h2 .underline{
  background:linear-gradient(transparent 65%, var(--yellow) 65%);
  display:inline;
  padding:0 0.04em;
}
.manifesto-prose{
  max-width:64ch;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}
.manifesto-prose p{ margin:0 0 16px; }
.manifesto-prose em{ color:var(--orange); font-style:italic; font-weight:600; }

.manifesto-boxes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:64px 0 56px;
}
.mbox{
  border-radius:24px;
  padding:36px 32px 40px;
  position:relative;
  overflow:hidden;
}
.mbox--green{  background:var(--mint); }
.mbox--purple{ background:var(--purple); }
.mbox--orange{ background:var(--lavender); color:var(--ink); }
.mbox--yellow{ background:var(--yellow); }
.mbox-eyebrow{
  font-family:'Caveat';
  font-weight:700;
  font-size:28px;
  color:var(--ink);
  display:block;
  margin-bottom:14px;
  line-height:1;
}
.mbox--orange .mbox-eyebrow{ color:var(--ink); }
.mbox h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0 0 12px;
}
.mbox--orange h3{ color:var(--ink); }
.mbox p{
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
}
.mbox--orange p{ color:var(--ink); }
.mbox .floater{
  position:absolute;
  width:90px;
  top:-22px; right:-22px;
  opacity:0.9;
}

.pull-quote-wrap{
  margin-top:80px;
  padding:48px 32px;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  position:relative;
}
.pull-quote{
  font-family:'Figtree';
  font-weight:800;
  font-style:italic;
  font-size:clamp(28px, 4.2vw, 56px);
  line-height:1.1;
  letter-spacing:-0.022em;
  color:var(--ink);
  margin:0;
  max-width:24ch;
}
.pull-quote .accent{
  background:linear-gradient(transparent 60%, var(--pink) 60%);
  padding:0 0.06em;
}
.pull-quote-attr{
  margin-top:18px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  opacity:0.85;
}

@media (max-width:809px){
  .manifesto-boxes{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════ */

.trusted-logos-section{
  background:var(--bg-warm);
  padding:40px 0 44px;
  overflow:hidden;
  border-top:1px solid rgba(3,15,46,0.08);
  border-bottom:1px solid rgba(3,15,46,0.08);
}
.trusted-logos-eyebrow{
  text-align:center;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:30px;
  color:var(--orange);
  margin:0 0 36px;
  line-height:1;
}
.logo-marquee{
  display:flex;
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track{
  display:flex;
  gap:60px;
  align-items:center;
  flex-shrink:0;
  padding-right:60px;
  animation:logoMarqueeScroll 65s linear infinite;
}
@keyframes logoMarqueeScroll{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
.brand-logo{
  flex:0 0 auto;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
}
.brand-logo svg{
  display:block;
  max-height:48px;
  max-width:140px;
  width:auto;
  height:auto;
  opacity:0.88;
  transition:opacity 320ms ease;
}
.brand-logo:hover svg{ opacity:1; }
.brand-logo img{
  display:block;
  max-height:48px;
  max-width:150px;
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:0.88;
  transition:opacity 320ms ease;
}
.brand-logo:hover img{ opacity:1; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.logo-marquee:hover .logo-marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation:none !important; }
}
@media (max-width: 720px){
  .trusted-logos-section{ padding:48px 0 50px; }
  .trusted-logos-eyebrow{ font-size:26px; margin-bottom:28px; }
  .brand-logo{ height:38px; padding:0 12px; }
  .brand-logo img{ max-height:38px; max-width:110px; }
  .logo-marquee-track{ gap:46px; padding-right:46px; }
}

/* ═══════════════════════════════════════════ */

.works-section{
  background:var(--bg);
  padding:72px 0;
  position:relative;
}
.section-eyebrow{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 700ms ease, transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.section-eyebrow.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .section-eyebrow{ opacity:1; transform:none; transition:none; }
}
.section-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
}
.section-eyebrow .dot{ width:10px; height:10px; border-radius:50%; }
.section-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:30px;
  line-height:1;
}
.section-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(48px, 7vw, 96px);
  line-height:0.92;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin:0 0 24px;
  max-width:18ch;
}
.section-h .ital{ font-style:italic; font-weight:800; }
.section-lede{
  max-width:62ch;
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 56px;
}

.works-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:56px;
}
.work-card{
  border-radius:32px;
  padding:36px 36px 40px;
  position:relative;
  overflow:hidden;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:2.5px solid var(--ink);
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  opacity:0;
  transform:translateY(40px);
}
.work-card.in-view{ opacity:1; transform:translateY(0); }
.work-card:nth-child(odd).in-view{  transform:translateY(0) translateX(0); }
.work-card:nth-child(even).in-view{ transform:translateY(0) translateX(0); }
.work-card:nth-child(odd){  transform:translateY(40px) translateX(-30px); }
.work-card:nth-child(even){ transform:translateY(40px) translateX(30px); }
.work-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(3,15,46,0.18); }

.wc-blue{   background:var(--blue);    color:#fff; }
.wc-orange{ background:var(--ink);  color:#fff; }
.wc-green{  background:var(--green);   color:var(--ink); }
.wc-purple{ background:var(--lavender);  color:var(--ink); }
.wc-yellow{ background:var(--yellow);  color:var(--ink); }

.wc-tag{
  font-family:'Caveat';
  font-weight:600;
  font-size:26px;
  line-height:1;
  margin-bottom:14px;
  display:block;
}
.wc-blue .wc-tag, .wc-orange .wc-tag{ color:rgba(255,255,255,0.85); }
.wc-green .wc-tag, .wc-purple .wc-tag, .wc-yellow .wc-tag{ color:var(--ink); }

.wc-stat{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(72px, 9vw, 124px);
  line-height:0.88;
  letter-spacing:-0.045em;
  margin:0 0 8px;
}
.wc-stat .unit{
  font-size:0.5em;
  font-weight:700;
  font-style:italic;
}
.wc-stat-lbl{
  font-family:'Figtree';
  font-weight:600;
  font-size:14px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin:0 0 28px;
  opacity:0.85;
}
.wc-title{
  font-family:'Figtree';
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin:0 0 14px;
}
.wc-title .ital{ font-style:italic; font-weight:700; }
.wc-body{
  font-size:15.5px;
  line-height:1.5;
  margin:0;
  opacity:0.92;
}
.wc-floater{
  position:absolute;
  width:100px;
  bottom:-16px; right:-16px;
  opacity:0.85;
  pointer-events:none;
}
.wc-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(0,0,0,0.12);
  margin-top:18px;
  font-size:18px;
  font-weight:700;
}
.wc-blue .wc-arrow{ background:rgba(255,255,255,0.2); }
.wc-orange .wc-arrow{ background:rgba(255,255,255,0.2); }

/* The 5th card spans 2 cols, looks like a "summary" tile */
.work-card.span2{
  grid-column:1 / -1;
  min-height:280px;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.work-card.span2 .wc-stat{ font-size:clamp(96px, 11vw, 160px); }
.work-card.span2 .wc-right{ flex:1; max-width:520px; }

@media (max-width:809px){
  .works-grid{ grid-template-columns:1fr; }
  .work-card.span2{ flex-direction:column; align-items:flex-start; min-height:0; }
}

/* ═══════════════════════════════════════════ */

.services-section{
  background:var(--bg-warm);
  padding:60px 0 0;
  position:relative;
}
.services-section .container{ position:relative; }
.services-intro{ margin-bottom:80px; }

.pillar-stack{
  position:relative;
  padding-bottom:0;
}
.pillar-card{
  position:sticky;
  top:120px;
  margin:0 auto 0;
  max-width:1100px;
  border-radius:36px;
  padding:48px 56px 56px;
  border:2.5px solid var(--ink);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
  min-height:420px;
  box-shadow:0 12px 40px rgba(3,15,46,0.08);
}
.pillar-card .num{
  font-family:'Figtree';
  font-weight:900;
  font-size:180px;
  line-height:0.8;
  letter-spacing:-0.06em;
  color:var(--ink);
  opacity:0.18;
  margin:0;
}
.pillar-card .num-row{
  display:flex; align-items:center; gap:24px;
  margin-bottom:16px;
}
.pillar-card .num-row .scr{
  font-family:'Caveat';
  font-weight:700;
  font-size:36px;
  line-height:1;
}
.pillar-card .tag{
  font-family:'Caveat';
  font-weight:600;
  font-size:30px;
  color:var(--ink);
  opacity:0.7;
  margin-bottom:14px;
  display:inline-block;
  line-height:1;
}
.pillar-card h3{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(40px, 4.5vw, 64px);
  line-height:0.96;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0 0 22px;
}
.pillar-card h3 .ital{ font-style:italic; }
.pillar-card .quote{
  font-family:'Figtree';
  font-style:italic;
  font-weight:500;
  font-size:18px;
  line-height:1.35;
  color:var(--ink);
  opacity:0.78;
  margin:0;
  max-width:36ch;
}
.pillar-card .body{
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  margin:0 0 18px;
}
.pillar-card .body em{ font-style:italic; font-weight:600; }
.pillar-card .caps-list{
  font-family:'Figtree';
  font-weight:600;
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:20px;
  opacity:0.72;
}
.pillar-card .caps-list .sep{
  margin:0 8px;
  opacity:0.5;
  font-weight:500;
}

.pillar-card.p-blue{   background:var(--yellow); }
.pillar-card.p-orange{ background:var(--blue); }
.pillar-card.p-green{  background:var(--mint); }
.pillar-card.p-purple{ background:var(--lavender); }
.pillar-card.p-yellow{ background:var(--sky); }
.pillar-card.p-pink{   background:var(--fuchsia); }
.pillar-card.p-ink{    background:var(--ink);     color:#fff; }

.pillar-card.p-ink *{ color:#fff; }
.pillar-card.p-ink .num{ opacity:0.28; }
.pillar-card.p-ink .caps-list{ color:#fff; opacity:0.78; }
.pillar-card.p-ink .body em{ color:var(--yellow); }

.pillar-card.p-orange .body em, .pillar-card.p-blue .body em, .pillar-card.p-green .body em, .pillar-card.p-yellow .body em, .pillar-card.p-purple .body em{ color:var(--ink); }
.pillar-card.p-pink .body em{ color:var(--ink); }

.pillar-card .governor{
  margin-top:18px;
  padding-top:14px;
  border-top:1.5px solid currentColor;
  font-family:'Figtree';
  font-style:italic;
  font-weight:500;
  font-size:14.5px;
  line-height:1.5;
  opacity:0.82;
}
.pillar-card .governor strong{
  font-style:normal;
  font-weight:800;
  opacity:1;
}
.pillar-card.p-ink .governor{ border-top-color:rgba(255,255,255,0.4); }
.pillar-card .explore-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-family:'Figtree';
  font-weight:700;
  font-size:14px;
  color:inherit;
  text-decoration:none;
  border-bottom:1.5px solid currentColor;
  padding-bottom:3px;
  opacity:0.9;
  transition:opacity .2s, transform .2s;
}
.pillar-card .explore-link:hover{ opacity:1; transform:translateX(3px); }

/* Stagger top offset so each card stacks slightly behind the previous */
.pillar-card:nth-child(1){ top:120px; }
.pillar-card:nth-child(2){ top:135px; }
.pillar-card:nth-child(3){ top:150px; }
.pillar-card:nth-child(4){ top:165px; }
.pillar-card:nth-child(5){ top:180px; }
.pillar-card:nth-child(6){ top:195px; }
.pillar-card:nth-child(7){ top:210px; }

@media (max-width:809px){
  .pillar-card{ grid-template-columns:1fr; padding:32px 28px 36px; gap:20px; min-height:0; }
  .pillar-card .num{ font-size:96px; }
  .pillar-stack{ padding-bottom:0; }
}

/* ═══════════════════════════════════════════ */

.network-section{
  background:var(--green);
  padding:80px 0 0;
  position:relative;
  overflow:visible;
  border-top:3px solid var(--ink);
}

/* Wave bottom edge of network section */
.network-wave {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-top: 60px;
  flex-shrink: 0;
  line-height: 0;
  display: block;
  background: var(--bg); /* matches next section — shows below the wave */
}

.network-wave svg {
  width: 110%;
  height: 100%;
  margin-left: -5%;
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.nw-fill { /* JS-driven */ }
.nw-stroke { /* JS-driven */ }

/* Wave is JS-driven — see <script> at end of body */
.network-section .container{ position:relative; z-index:2; }
.network-section .doodle-bg{
  position:absolute; pointer-events:none; z-index:1;
}
.network-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
  margin-top:48px;
}
.network-grid h2{ font-family:'Figtree'; font-weight:900; font-size:clamp(48px, 7vw, 96px); line-height:0.92; letter-spacing:-0.035em; margin:0 0 28px; color:var(--ink); }
.network-grid h2 .ital{ font-style:italic; }
.network-grid h2 .scr-overlay-deprecated{
  display:inline-block;
  font-family:'Caveat';
  font-weight:700;
  font-style:normal;
  font-size:0.45em;
  color:var(--blue);
  vertical-align:0.4em;
  transform:rotate(-4deg);
  margin-left:0.1em;
}
.network-grid .body{
  font-size:18px; line-height:1.55; color:var(--ink); margin:0 0 32px;
  max-width:54ch;
}
.network-grid .body em{ font-style:italic; font-weight:600; color:var(--orange); }

.tier-list{ margin:0; padding:0; list-style:none; }
.tier-item{
  display:flex; gap:16px;
  padding:18px 0;
  border-top:2px solid var(--ink);
}
.tier-item:last-child{ border-bottom:2px solid var(--ink); }
.tier-item .tier-n{
  font-family:'Figtree';
  font-weight:900;
  font-size:30px;
  line-height:1;
  width:48px;
  flex:none;
  color:var(--ink);
}
.tier-item .tier-body h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:21px;
  margin:0 0 4px;
  color:var(--ink);
}
.tier-item .tier-body p{
  margin:0;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink);
  opacity:0.85;
}

/* ========== ELEGANT VINTAGE TUNER DIAL ==========
   Dark navy face with brass accents — Braun/Dieter Rams sensibility.
   No knurling. No colored triangle pointer. No scale-up on active.
   Just a precision instrument with restrained motion. */

.network-illust{
  position:relative;
  width:100%;
  max-width:420px;
  height:420px;
  min-height:380px;
  margin:0 auto;
}

/* --- Dial assembly --- */
.dial-assembly{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:240px;
  height:240px;
}

/* Dial face — dark navy with subtle highlight at top-center */
.dial-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(
    circle at 50% 38%,
    #15233e 0%,
    var(--ink) 55%,
    #010614 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 92, 0.55),     /* hairline brass ring */
    inset 0 0 0 2px rgba(0, 0, 0, 0.4),           /* depth shadow inside ring */
    inset 0 0 36px rgba(0, 0, 0, 0.45),           /* darkening at edges */
    inset 0 1px 0 rgba(255, 255, 255, 0.05),      /* hairline top highlight */
    0 10px 28px rgba(3, 15, 46, 0.35);            /* lifted drop shadow */
}

/* Subtle inner decorative ring (very faint) */
.dial-face::before{
  content:'';
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:0.5px solid rgba(201, 165, 92, 0.12);
  pointer-events:none;
}

/* Knurling REMOVED — was the most cartoony element */
.dial-knurl{ display:none; }

/* Center hub — small brass jewel */
.dial-hub{
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  border-radius:50%;
  background:radial-gradient(
    circle at 35% 35%,
    #e8c97e 0%,
    #c9a55c 50%,
    #8a7039 100%
  );
  transform:translate(-50%, -50%);
  z-index:3;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.35),
    0 0 4px rgba(201, 165, 92, 0.25);
}

/* Minor tick marks (12, every 30°) — thin cream lines */
.tick{
  position:absolute;
  left:50%; top:9px;
  width:1px;
  height:5px;
  background:rgba(250, 243, 224, 0.30);
  transform-origin:50% 111px;
  transform:translateX(-50%) rotate(var(--a));
  z-index:2;
}

/* Major tick marks (6, every 60°) — slightly longer and brighter */
.tick.major{
  height:10px;
  width:1.5px;
  background:rgba(250, 243, 224, 0.65);
  top:7px;
  transform-origin:50% 113px;
}

/* Pointer — a thin brass line from the center outward.
   No triangle, no bright color. Just a precise line, like a watch hand. */
.dial-pointer{
  position:absolute;
  left:50%; top:50%;
  width:1.5px;
  height:96px;
  background:linear-gradient(
    to top,
    transparent 0%,
    rgba(201, 165, 92, 0.35) 10%,
    #c9a55c 40%,
    #e8c97e 90%,
    #f0d690 100%
  );
  transform-origin:50% 100%;                       /* rotate around the BOTTOM of the line (= dial center) */
  transform:translate(-50%, -100%) rotate(0deg);
  transition:transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  border:none;
  border-radius:0;
  z-index:2;
  filter:drop-shadow(0 0 1.5px rgba(232, 201, 126, 0.4));
}

/* --- Channel labels around the dial --- */
.ch{
  position:absolute;
  left:50%; top:50%;
  font-family:'Figtree', system-ui, sans-serif;
  font-weight:600;
  font-size:16px;
  color:var(--ink);
  white-space:nowrap;
  text-align:center;
  letter-spacing:0.005em;
  opacity:0.45;
  transition:opacity 0.5s ease, font-weight 0.5s ease;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(-172px)
    rotate(calc(-1 * var(--a)));
  z-index:2;
}

/* Active label — restrained. No scale, no color change. Just weight & opacity. */
.ch.active{
  opacity:1;
  font-weight:800;
}

/* Thin brass accent line under the active label */
.ch::after{
  content:'';
  position:absolute;
  left:50%; bottom:-8px;
  width:0;
  height:1px;
  background:#c9a55c;
  transform:translateX(-50%);
  transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ch.active::after{
  width:55%;
}

.ch1{ --a:0deg;   }
.ch2{ --a:60deg;  }
.ch3{ --a:120deg; }
.ch4{ --a:180deg; }
.ch5{ --a:240deg; }
.ch6{ --a:300deg; }

/* Channel readout — small, refined, INSIDE the dial below the hub */
.ch-display{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, 30px);
  background:transparent;
  padding:0;
  border-radius:0;
  box-shadow:none;
  color:rgba(250, 243, 224, 0.6);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px;
  font-weight:500;
  letter-spacing:0.22em;
  z-index:3;
  text-transform:uppercase;
}
.ch-display-label{
  opacity:0.55;
  margin-right:5px;
}
.ch-display-num{
  text-shadow:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dial-pointer, .ch, .ch::after{ transition:none; }
}

@media (max-width:809px){
  .network-grid{ grid-template-columns:1fr; gap:48px; }
  .network-illust{ max-width:340px; height:340px; min-height:340px; }
}

/* ═══════════════════════════════════════════ */

.process-section{
  background:var(--bg);
  padding:140px 0;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
  margin:64px 0;
  position:relative;
}
.process-step{
  text-align:center;
  position:relative;
}
.process-step::after{
  content:"→";
  position:absolute;
  top:38px;
  right:-20px;
  font-family:'Figtree';
  font-weight:700;
  font-size:24px;
  color:var(--ink);
  opacity:0.4;
}
.process-step:last-child::after{ display:none; }
.process-step .circle{
  width:88px; height:88px;
  border-radius:50%;
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Figtree';
  font-weight:900;
  font-size:30px;
  margin:0 auto 18px;
  position:relative;
  z-index:2;
}
.process-step .circle.s1{ background:var(--blue);   color:#fff; }
.process-step .circle.s2{ background:var(--orange); color:#fff; }
.process-step .circle.s3{ background:var(--yellow); color:var(--ink); }
.process-step .circle.s4{ background:var(--green);  color:var(--ink); }
.process-step .circle.s5{ background:var(--purple); color:var(--ink); }
.process-step h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:19px;
  margin:0 0 6px;
  color:var(--ink);
}
.process-step p{
  font-size:14px;
  line-height:1.4;
  color:var(--ink-soft);
  margin:0;
  max-width:20ch;
  margin-left:auto; margin-right:auto;
}

.cadence-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:48px;
  padding-top:48px;
  border-top:2px solid var(--ink);
}
.cadence-card{
  background:var(--bg-warm);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:24px 26px 26px;
}
.cadence-card .tag{
  font-family:'Caveat';
  font-weight:700;
  font-size:24px;
  line-height:1;
  margin-bottom:8px;
  display:block;
}
.cadence-card.c-blue   .tag{ color:var(--blue); }
.cadence-card.c-orange .tag{ color:var(--orange); }
.cadence-card.c-green  .tag{ color:#2d8b5e; }
.cadence-card h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  margin:0 0 4px;
}
.cadence-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink-soft);
}

@media (max-width:809px){
  .process-grid{ grid-template-columns:1fr 1fr; gap:32px 16px; }
  .process-step::after{ display:none; }
  .cadence-strip{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════ */

.why-section{
  background:var(--bg);
  padding:140px 0;
  position:relative;
}
.why-section .doodle-bg{ position:absolute; pointer-events:none; }
.why-grid{
  display:block;
  overflow:hidden;
  position:relative;
  padding:14px 0;
  margin-top:64px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
/* When a card is hovered: pause is handled by .why-track:hover.
   We also drop the mask + overflow clip so the enlarged card isn't cut off at edges. */
.why-grid:has(.why-card:hover){
  overflow:visible;
  -webkit-mask-image:none;
          mask-image:none;
}
.why-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:marqueeWhy 26s linear infinite;
  will-change:transform;
}
.why-track:hover{ animation-play-state:paused; }
@keyframes marqueeWhy{
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-50% - 12px)); }
}
/* Smooth interpolation requires the angle to be a typed custom property */
@property --grad-angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.why-card{
  flex:0 0 290px;
  width:290px;
  transition:transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 500ms ease;
  /* Transparent border reserves space; the conic gradient shows through it */
  border:3px solid transparent;
  border-radius:20px;
  padding:34px 28px 36px;
  position:relative;
  height:420px;          /* Fixed (was min-height) so the dot path matches every card */
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 22px rgba(3,15,46,0.10), 0 2px 6px rgba(3,15,46,0.06);
  transform-origin:center center;
  overflow:visible;      /* Let the dot extend slightly past the card edge */
  /* Two stacked backgrounds:
     1. Inner color (per-card via --card-bg) clipped to padding-box (inside border)
     2. Conic gradient through the 7 brand colors, clipped to border-box (shows in the 3px border ring) */
  background:
    linear-gradient(var(--card-bg, var(--bg-warm)), var(--card-bg, var(--bg-warm))) padding-box,
    conic-gradient(from var(--grad-angle, 0deg),
      var(--orange) 0%,
      var(--blue)   17%,
      var(--green)  33%,
      var(--purple) 50%,
      var(--yellow) 67%,
      var(--pink)   83%,
      var(--orange) 100%
    ) border-box;
  animation:gradSpin 5s linear infinite;
}
@keyframes gradSpin{
  to { --grad-angle: 360deg; }
}

/* The bright "character" dot — travels around the card's rounded perimeter via CSS Motion Path */
.why-card::before{
  content:'';
  position:absolute;
  /* Explicit anchor at padding-box origin — without this, the browser may interpret
     offset-path coords relative to the pseudo's natural static position (inside padding). */
  top:0; left:0;
  width:12px; height:12px;
  margin:0;
  border-radius:50%;
  background:#fff;
  /* Pure white glow — no yellow tint so the appearance is identical
     against any gradient color (orange, blue, green, etc.) */
  box-shadow:
    0 0 7px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,0.9),
    0 0 24px rgba(255,255,255,0.55),
    0 0 36px rgba(255,255,255,0.25);
  z-index:5;
  pointer-events:none;
  /* Path traces the outer border-box perimeter: 290 × 420 with 20px rounded corners */
  offset-path: path('M 17,-9 H 267 A 26,26 0 0 1 293,17 V 397 A 26,26 0 0 1 267,423 H 17 A 26,26 0 0 1 -9,397 V 17 A 26,26 0 0 1 17,-9 Z');
  offset-anchor: 50% 50%;
  offset-distance:0%;
  offset-rotate:0deg;
  animation:dotRun 5s linear infinite;
}
/* Stagger start positions so the 5 dots sit at different perimeter points at any moment */
.why-card.w1::before{ animation-delay:0s; }
.why-card.w2::before{ animation-delay:-0.7s; }
.why-card.w3::before{ animation-delay:-1.4s; }
.why-card.w4::before{ animation-delay:-2.1s; }
.why-card.w5::before{ animation-delay:-2.8s; }
@keyframes dotRun{
  to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .why-card{ animation:none !important; }
  .why-card::before{ animation:none !important; }
}
/* Cards display immediately; no per-card entrance now */
@media (prefers-reduced-motion: reduce){
  .why-track{ animation:none !important; }
  .why-card .roman{ animation:none !important; }
}
.why-card:hover{
  transform:scale(1.20) translateY(-10px);
  box-shadow:0 32px 64px rgba(3,15,46,0.22), 0 10px 22px rgba(3,15,46,0.14);
  cursor:default;
  rotate:0deg;
  z-index:10;
}

.why-card.w1{ --card-bg:var(--bg-warm); }
.why-card.w2{ --card-bg:var(--yellow);  }
.why-card.w3{ --card-bg:var(--lavender);  }
.why-card.w4{ --card-bg:var(--green);   }
.why-card.w5{ --card-bg:var(--sky);  }
.why-card .roman{
  font-family:'Figtree';
  font-style:italic;
  font-weight:800;
  font-size:48px;
  line-height:1;
  color:var(--ink);
  margin:0 0 18px;
}
.why-card .roman .scr-mark{
  display:block;
  font-family:'Caveat';
  font-weight:600;
  font-size:0.5em;
  color:var(--orange);
  font-style:normal;
  line-height:1;
  margin-top:4px;
}
.why-card h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:22px;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 12px;
}
.why-card h3 .ital{ font-style:italic; }
.why-card p{
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
  opacity:0.88;
}

@media (max-width:809px){
  .why-card{ flex:0 0 250px; width:250px; padding:26px 20px 28px; min-height:300px; }
  .why-card{ min-height:0; }
}

/* ═══════════════════════════════════════════ */

.metrics-section{
  position:relative;
  overflow:hidden;
  background:#f0f6f3;
  color:var(--ink);
  padding:120px 0;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.metrics-section .doodle-bg{ position:absolute; pointer-events:none; }
/* ── Title glow: soft yellow halo pulsing behind the metrics heading ── */
.title-glow{
  position:absolute;
  top:50%; left:50%;
  width:680px; height:340px;
  transform:translate(-50%, -50%);
  background:radial-gradient(ellipse at center,
    rgba(43,196,190,0.16) 0%,
    rgba(43,196,190,0.08) 30%,
    rgba(43,196,190,0) 65%);
  pointer-events:none;
  z-index:0;
  animation:glowPulse 5s ease-in-out infinite;
  filter:blur(8px);
}

/* ── Speed lines: 6 horizontal streaks racing right→left across the section ── */
.speed-lines{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.speed-line{
  position:absolute;
  right:-200px;
  height:2px;
  border-radius:2px;
  opacity:0;
  will-change:transform, opacity;
}
.speed-line.sl1{ top:24%;  width:110px; animation-delay:0.4s !important; animation-duration:0.7s !important; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.speed-line.sl2{ top:38%;  width:170px; animation-delay:0.9s !important; animation-duration:1.0s !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); height:1.5px; }
.speed-line.sl3{ top:52%;  width:130px; animation-delay:1.4s !important; animation-duration:0.8s !important; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.speed-line.sl4{ top:68%;  width:90px;  animation-delay:0.6s !important; animation-duration:0.9s !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); height:1.5px; }
.speed-line.sl5{ top:82%;  width:150px; animation-delay:2.0s !important; animation-duration:0.7s !important; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.speed-line.sl6{ top:18%;  width:100px; animation-delay:2.6s !important; animation-duration:0.85s !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }

/* ── Confetti burst: 12 colored pieces explode + fall when ribbon breaks ── */
.confetti-burst{
  position:absolute;
  top:0; right:50%;
  margin-right:-260px;     /* roughly aligned with finish line position */
  width:0; height:0;
  pointer-events:none;
  z-index:3;
}
.confetti-piece{
  position:absolute;
  top:54px; right:0;       /* origin at finish line height */
  opacity:0;
  will-change:transform, opacity;
  border-radius:1px;
}
.confetti-piece.cp1  { --tx:-30px;  --ty:-50px; --rot: 720deg;  width:7px; height:11px; background:var(--yellow); }
.confetti-piece.cp2  { --tx:-80px;  --ty:-30px; --rot:-540deg;  width:9px; height:5px;  background:var(--pink);   }
.confetti-piece.cp3  { --tx: 30px;  --ty:-60px; --rot: 540deg;  width:6px; height:10px; background:var(--green);  }
.confetti-piece.cp4  { --tx:-110px; --ty:-45px; --rot: 360deg;  width:8px; height:5px;  background:var(--blue);   }
.confetti-piece.cp5  { --tx: 60px;  --ty:-40px; --rot:-720deg;  width:6px; height:9px;  background:var(--purple); }
.confetti-piece.cp6  { --tx:-50px;  --ty:-75px; --rot: 540deg;  width:7px; height:7px;  background:var(--orange); border-radius:50%; }
.confetti-piece.cp7  { --tx:-90px;  --ty:-25px; --rot:-360deg;  width:9px; height:5px;  background:var(--yellow); }
.confetti-piece.cp8  { --tx: 0px;   --ty:-80px; --rot: 720deg;  width:6px; height:10px; background:var(--pink);   }
.confetti-piece.cp9  { --tx:-130px; --ty:-50px; --rot:-540deg;  width:7px; height:6px;  background:#fff;          }
.confetti-piece.cp10 { --tx: 80px;  --ty:-35px; --rot: 360deg;  width:8px; height:4px;  background:var(--green);  }
.confetti-piece.cp11 { --tx:-70px;  --ty:-15px; --rot: 720deg;  width:6px; height:6px;  background:var(--blue);   border-radius:50%; }
.confetti-piece.cp12 { --tx: 100px; --ty:-55px; --rot:-540deg;  width:7px; height:10px; background:var(--orange); }

/* Ambient pulse on metric numbers — kicks in AFTER count-up completes */
.metric.in-view .num{
  animation:numPulse 3.2s ease-in-out infinite;
  animation-delay:calc(var(--d, 0ms) + 2200ms);
}
.metric.w1 .num, .metric:nth-child(1) .num{ animation-delay:calc(var(--d, 0ms) + 2200ms); }
.metric:nth-child(2) .num{ animation-delay:calc(var(--d, 0ms) + 2400ms); }
.metric:nth-child(3) .num{ animation-delay:calc(var(--d, 0ms) + 2600ms); }
.metric:nth-child(4) .num{ animation-delay:calc(var(--d, 0ms) + 2800ms); }
.metric:nth-child(5) .num{ animation-delay:calc(var(--d, 0ms) + 3000ms); }

@keyframes numPulse{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .title-glow, .speed-lines, .confetti-burst{ display:none !important; }
  .runner{ display:none !important; }
  .metric .num{ animation:none !important; }
}

/* ── Title race: runner sprints from "Numbers" → "moved", crosses the ribbon ── */
.race-row{
  position:relative;
  display:inline-block;
  margin:0 auto 48px;
}
.race-row .metrics-h{ margin:0; }
.race-stage{
  position:absolute;
  top:-72px;
  /* Visible area aligned to title text ('N' to 'd'), but the stage itself
     extends 60px past 'd' on the right — that overhang gives the runner room
     to physically cross the finish line and continue past it before clipping. */
  left:0; right:-60px;
  height:68px;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  /* SOFT-FADE MASK at the finish line position. The mask is fully opaque
     up to 70px from the stage's right edge, then fades to transparent over
     a 14px gradient ending at calc(100% - 56px). Body parts that cross the
     line smoothly disappear into invisibility — no hard cut, no opacity-fade
     of the whole figure. The runner is effectively "running through a door". */
  mask-image:linear-gradient(90deg,
    #000 calc(100% - 70px),
    transparent calc(100% - 56px));
  -webkit-mask-image:linear-gradient(90deg,
    #000 calc(100% - 70px),
    transparent calc(100% - 56px));
}
.runner{
  position:absolute;
  /* Starts off-screen LEFT — runAcross moves it rightward across the stage */
  left:-4px; top:20px;
  width:38px; height:48px;
  transform-origin:center bottom;
  /* Mirror the figure so it visually faces RIGHT (head appears right of hip).
     The SVG internally still has head at x=16, hip at x=18; scaleX(-1) flips
     it horizontally. All limb rotations stay numerically the same but are
     visually mirrored, which preserves correct cross-coordination. */
  transform:scaleX(-1);
}
.runner-bounce{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}
.runner svg{ width:100%; height:100%; display:block; }
/* Each limb rotates around its joint via CSS — much smoother than 2-pose flicker */
.rn-arm-r, .rn-arm-l{
  transform-origin:17px 19px;  /* shoulder on flipped body */
  transform-box:view-box;
}
.rn-leg-r, .rn-leg-l{
  transform-origin:18px 30px;  /* hip — thigh rotates here */
  transform-box:view-box;
}
.rn-lower-r, .rn-lower-l{
  /* Shin rotates around the KNEE, which moves with the thigh.
     fill-box anchors the origin to the element's own bbox top-center,
     so as the parent thigh rotates, the shin's pivot follows the knee. */
  transform-origin:50% 0%;
  transform-box:fill-box;
}
/* Ground line — the "track" where the feet land. Subtle dashed line
   across the bottom of the race-stage. Positioned so the runner's feet
   touch it at the extension of each stride. Ends at the finish line. */
.ground-line{
  position:absolute;
  bottom:8px;
  left:0;
  right:68px;        /* ends just before finish-line LEFT edge (60+8 = 68) */
  height:2px;
  background:repeating-linear-gradient(
    to right,
    rgba(3, 15, 46, 0.30) 0 6px,
    transparent 6px 10px
  );
  pointer-events:none;
  z-index:1;         /* below runner (2) but visible */
}
/* The .finish container sits at the door cutoff (60px from the right edge
   of the race-stage). The checkered .finish-pole inside it is the visible
   finish line that the runner crosses past before vanishing. */
.finish{
  position:absolute;
  right:60px;          /* aligned with 'd' (stage extends 60px past, so right:60 = above 'd') */
  top:0;
  width:8px;
  height:100%;
  z-index:3;           /* above runner so the checker stays visible during the cross */
  pointer-events:none;
}
.finish-pole{
  position:absolute;
  left:0; top:0;
  width:8px;
  height:100%;
  box-shadow:0 0 0 1px rgba(3,15,46,0.4);  /* faint outline keeps it crisp */
}
.finish-pole svg{
  width:100%;
  height:100%;
  display:block;
}
/* Trigger: .metrics-section gains .race-on via IntersectionObserver */
/* Race ends at 4.9s. Runner pauses 0.15s, then fades smoothly over 1.2s. */
.metrics-section.race-on .runner{
  /* `both` fill-mode keeps runner at runAcross's `from` value during the 0.4s
     delay (off-screen left) instead of its CSS position. runVanish is now a
     smooth 0.4s ease-out fade starting exactly when the runner reaches the
     finish line (5.9s = 0.4s delay + 5.5s run). */
  animation:
    runAcross 5.5s linear 0.4s both;
    /* runVanish removed — the soft-fade mask on .race-stage handles the
       smooth disappearance as the runner crosses the finish line. */
}


/* ===== Process circles: drop-and-bounce on scroll-in ===== */
.process-step .circle{
  /* Initial state: hidden above their landing position */
  opacity:0;
  transform:translateY(-80px) scale(0.85);
  /* Re-establish positioning since transform was inline */
  will-change:transform, opacity;
}
.process-section.steps-in .process-step .circle{
  /* 1.6s with ease-in feel for the falling part — gravity acceleration —
     plus the bounce keyframes naturally provide the rebound feel. */
  animation:circleDropBounce 1.6s cubic-bezier(0.45, 0, 0.7, 1.05) forwards;
}
/* Staggered cascade — each subsequent circle starts 180ms after the previous */
.process-section.steps-in .process-step:nth-child(1) .circle{ animation-delay:0s;    }
.process-section.steps-in .process-step:nth-child(2) .circle{ animation-delay:0.30s; }
.process-section.steps-in .process-step:nth-child(3) .circle{ animation-delay:0.60s; }
.process-section.steps-in .process-step:nth-child(4) .circle{ animation-delay:0.90s; }
.process-section.steps-in .process-step:nth-child(5) .circle{ animation-delay:1.20s; }

/* Title and label fade in too, slightly delayed after each circle lands */
.process-step h3, .process-step p{
  opacity:0;
  transform:translateY(6px);
  transition:opacity 380ms ease, transform 380ms ease;
}
.process-section.steps-in .process-step:nth-child(1) h3,
.process-section.steps-in .process-step:nth-child(1) p{ transition-delay:1.10s; }
.process-section.steps-in .process-step:nth-child(2) h3,
.process-section.steps-in .process-step:nth-child(2) p{ transition-delay:1.40s; }
.process-section.steps-in .process-step:nth-child(3) h3,
.process-section.steps-in .process-step:nth-child(3) p{ transition-delay:1.70s; }
.process-section.steps-in .process-step:nth-child(4) h3,
.process-section.steps-in .process-step:nth-child(4) p{ transition-delay:2.00s; }
.process-section.steps-in .process-step:nth-child(5) h3,
.process-section.steps-in .process-step:nth-child(5) p{ transition-delay:2.30s; }
.process-section.steps-in .process-step h3,
.process-section.steps-in .process-step p{
  opacity:1;
  transform:translateY(0);
}

/* Connector arrows (::after) fade in after the next circle has landed */
.process-step::after{ opacity:0; transition:opacity 380ms ease; }
.process-section.steps-in .process-step:nth-child(1)::after{ transition-delay:1.45s; opacity:1; }
.process-section.steps-in .process-step:nth-child(2)::after{ transition-delay:1.75s; opacity:1; }
.process-section.steps-in .process-step:nth-child(3)::after{ transition-delay:2.05s; opacity:1; }
.process-section.steps-in .process-step:nth-child(4)::after{ transition-delay:2.35s; opacity:1; }

@keyframes circleDropBounce{
  /* Start WAY above the viewport so the circle "falls from the top of the page". */
  0%   { transform:translateY(-120vh) scale(0.9); opacity:0; }
  /* Become visible once it's near the section */
  18%  { opacity:1; }
  /* Approaching landing — accelerating */
  55%  { transform:translateY(-40px) scale(0.94); opacity:1; }
  /* Land with squash (wider, shorter) */
  64%  { transform:translateY(12px) scale(1.10, 0.92); }
  /* Bounce up + stretch (taller, narrower) */
  76%  { transform:translateY(-14px) scale(0.96, 1.04); }
  /* Small second bounce */
  86%  { transform:translateY(5px) scale(1.03, 0.99); }
  93%  { transform:translateY(-2px) scale(1.01); }
  100% { transform:translateY(0) scale(1); opacity:1; }
}

/* Reduced-motion fallback: circles just fade in, no bounce */
@media (prefers-reduced-motion: reduce){
  .process-step .circle{ opacity:1; transform:none; }
  .process-section.steps-in .process-step .circle{ animation:none; }
  .process-step h3, .process-step p{ opacity:1; transform:none; transition:none; }
  .process-step::after{ opacity:1; }
}


  100% { opacity:0; }
}
.metrics-section.race-on .runner-bounce{
  /* 0.25s × 22 = 5.5s — limbs keep moving through the doorway vanish (ends with vanish at 5.9s) */
  animation:runBounce 0.25s ease-in-out 0.4s 22 forwards;
}
/* Limb rotations — running cadence (0.3s) with cross-coordination
   (right arm + left leg in phase; left arm + right leg opposite).
   Arms swing at ±40°, legs at ±60° (sprinter stride). */
.metrics-section.race-on .rn-arm-r{
  animation:swingA 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-arm-l{
  animation:swingB 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-leg-l{
  /* Thigh swings (in phase with right arm — cross coordination) */
  animation:legSwingA 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-leg-r{
  /* Thigh swings (in phase with left arm) */
  animation:legSwingB 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-lower-l{
  /* LEADING leg (for leftward motion) — starts BENT (knee high, foot tucked) */
  animation:shinBendB 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-lower-r{
  /* TRAILING leg — starts STRAIGHT (push-off extended) */
  animation:shinBendA 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .finish-pole{
  animation:poleShudder 0.5s ease-out 5.15s;
}
/* Speed lines streak right→left during the race */
.metrics-section.race-on .speed-line{
  animation:speedStreak 0.9s linear 0.4s infinite;
}
.metrics-section.race-on .speed-line.sl-stop{
  animation-iteration-count:6;
}
/* Confetti bursts at the moment runner crosses the finish line */
.metrics-section.race-on .confetti-piece{
  animation:confettiBurst 1.6s cubic-bezier(0.15, 0.65, 0.45, 1) 5.2s forwards;
}

@keyframes runAcross{
  /* LEFT TO RIGHT motion. The runner now runs PAST the finish line and
     into the soft-fade mask zone, so body parts vanish smoothly as they
     cross. Finish line is at calc(100% - 68px) to calc(100% - 60px) (above 'd').
     End position calc(100% - 30px) places the runner fully past the finish
     line — left edge 30px past, body fully behind the fade mask. */
  from { left:-38px; }
  to   { left:calc(100% - 30px); }
}
@keyframes runBounce{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
@keyframes poleShudder{
  0%, 100% { transform:translateX(0); }
  25%      { transform:translateX(-2px); }
  60%      { transform:translateX(1.5px); }
}
/* ── Arms: single-line, ±60° around shoulder ── */
@keyframes swingA{
  from { transform:rotate(-60deg); }
  to   { transform:rotate(60deg); }
}
@keyframes swingB{
  from { transform:rotate(60deg); }
  to   { transform:rotate(-60deg); }
}
/* ── Thighs: rotate ±55° around hip (less dramatic than ±75°) ── */
@keyframes legSwingA{
  from { transform:rotate(-55deg); }
  to   { transform:rotate(55deg); }
}
@keyframes legSwingB{
  from { transform:rotate(55deg); }
  to   { transform:rotate(-55deg); }
}
/* ── Shins: rotate RELATIVE to thigh — bends the knee.
       At thigh-back (push-off): shin straight (0° relative to thigh).
       At thigh-forward (knee lifted): shin bent back ~95° (foot toward butt). ── */
@keyframes shinBendA{
  from { transform:rotate(0deg);    }
  to   { transform:rotate(-65deg);  }
}
@keyframes shinBendB{
  from { transform:rotate(-65deg);  }
  to   { transform:rotate(0deg);    }
}
/* Speed lines — streak from right to left during the race */
@keyframes speedStreak{
  0%   { transform:translateX(0);          opacity:0; }
  15%  { opacity:0.65; }
  85%  { opacity:0.65; }
  100% { transform:translateX(-110vw);     opacity:0; }
}
/* Confetti — bursts outward then falls under gravity, rotating */
@keyframes confettiBurst{
  0%   { opacity:0; transform:translate(0, 0) rotate(0); }
  10%  { opacity:1; }
  100% {
    opacity:0;
    transform:translate(var(--tx, 0), calc(var(--ty, 0) + 180px)) rotate(var(--rot, 360deg));
  }
}
/* Title glow — subtle pulse behind the metrics heading */
@keyframes glowPulse{
  0%, 100% { opacity:0.5; transform:translate(-50%, -50%) scale(1); }
  50%      { opacity:0.85; transform:translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce){
  .race-stage{ display:none !important; }
}

.metrics-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(40px, 5.5vw, 72px);
  line-height:0.95;
  letter-spacing:-0.03em;
  margin:0 0 48px;
  color:var(--ink);
  text-align:center;
}
.metrics-h .ital{ font-style:italic; color:var(--orange); }
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}
.metric{
  text-align:center;
  padding:24px 16px;
  border-right:2px solid rgba(3,15,46,0.15);
}
.metric:last-child{ border-right:none; }
.metric .num{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(48px, 6.2vw, 84px);
  line-height:0.88;
  letter-spacing:-0.04em;
  color:var(--yellow);
  margin:0 0 14px;
  position:relative;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  white-space:nowrap;
  flex-wrap:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Number slide + bounce in */
.metric .num .count{
  display:inline-block;
  transform:translateY(56px) scale(0.92);
  opacity:0;
  transition:transform 1000ms cubic-bezier(0.34, 1.56, 0.64, 1),
             opacity 700ms ease;
  transition-delay:var(--d, 0ms);
}
.metric.in-view .num .count{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Unit symbol fades in after the number lands */
.metric .num .u{
  display:inline-block;
  opacity:0;
  transform:translateX(-12px);
  transition:opacity 500ms ease, transform 600ms cubic-bezier(0.16,1,0.3,1);
  transition-delay:calc(var(--d, 0ms) + 800ms);
}
.metric.in-view .num .u{ opacity:1; transform:translateX(0); }

/* Bigger, brighter halo glow burst */
.metric .num .halo{
  position:absolute;
  inset:-30% -20%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(248,244,124,0.85),
    rgba(248,244,124,0.35) 45%,
    rgba(43,196,190,0) 75%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transform:scale(0.3);
  filter:blur(8px);
}
.metric.in-view .num .halo{
  animation:metricHalo 1.8s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay:calc(var(--d, 0ms) + 850ms);
}
@keyframes metricHalo{
  0%   { opacity:0;    transform:scale(0.3); }
  30%  { opacity:1;    transform:scale(1.05); }
  100% { opacity:0;    transform:scale(2);    }
}
.metric .lbl{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 500ms ease, transform 500ms ease;
  transition-delay:calc(var(--d, 0ms) + 500ms);
}
.metric.in-view .lbl{ opacity:0.92; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .metric .num .count, .metric .lbl{ transform:none; opacity:1; transition:none; }
  .metric .num .halo{ animation:none; }
}
.metric .num .u{
  font-size:0.5em;
  font-style:italic;
  font-weight:700;
}
.metric .lbl{
  font-family:'Figtree';
  font-weight:600;
  font-size:14px;
  line-height:1.35;
  color:var(--ink);
  margin:0;
}

@media (max-width:809px){
  .metrics-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .metric{ border-right:none; border-bottom:1px solid rgba(3,15,46,0.12); padding-bottom:24px; }
}

/* ═══════════════════════════════════════════ */

.compare-section{
  background:var(--bg);
  padding:140px 0;
}
.compare-legend{
  display:flex;
  gap:24px;
  margin:32px 0 48px;
  padding-bottom:18px;
  border-bottom:2px solid var(--ink);
}
.compare-legend .item{
  display:flex; align-items:center; gap:10px;
  font-family:'Figtree';
  font-weight:700;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.compare-legend .sw{ width:22px; height:14px; }
.cmp-row{
  padding:30px 0 36px;
  border-bottom:1.5px solid rgba(3,15,46,0.08);
}
.cmp-row:last-of-type{ border-bottom:none; }
.cmp-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:18px;
}
.cmp-header .label{
  font-family:'Figtree';
  font-weight:700;
  font-size:clamp(17px, 1.5vw, 20px);
  color:var(--ink);
  letter-spacing:-0.01em;
  margin:0;
}
.cmp-header .label em{ font-style:italic; color:var(--orange); font-weight:800; }
.cmp-header .delta{
  font-family:'Figtree';
  font-weight:800;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--orange);
  background:rgba(255,116,46,0.10);
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}

/* Diverging bars from center axis */
.cmp-diverge{
  display:grid;
  grid-template-columns:1fr 3px 1fr;
  align-items:center;
  height:52px;
  position:relative;
}
.cmp-axis{
  background:var(--ink);
  height:100%;
  z-index:2;
  position:relative;
}
.cmp-axis::before, .cmp-axis::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:9px; height:2px;
  background:var(--ink);
}
.cmp-axis::before{ top:-2px; }
.cmp-axis::after{ bottom:-2px; }

.cmp-them, .cmp-us{
  display:flex;
  align-items:center;
  gap:14px;
  height:100%;
  position:relative;
}
.cmp-them{
  justify-content:flex-end;
  padding-right:14px;
}
.cmp-us{
  justify-content:flex-start;
  padding-left:14px;
}

.side-lbl{
  font-family:'Figtree';
  font-weight:600;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(3,15,46,0.55);
  white-space:nowrap;
}
.cmp-us .side-lbl{ color:var(--ink); }

.side-val{
  font-family:'Figtree';
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.01em;
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cmp-them .side-val{ color:rgba(3,15,46,0.6); font-weight:700; }

.side-bar{
  display:block;
  height:24px;
  width:0;
  background:rgba(180,170,140,0.55);
  border:1.5px solid rgba(3,15,46,0.30);
  transition:width 1000ms cubic-bezier(0.65,0,0.35,1);
  transition-delay:var(--delay, 0ms);
}
.cmp-us .side-bar{
  background:var(--blue);
  border-color:var(--ink);
}
.cmp-us.us-orange .side-bar{ background:var(--orange); }
.cmp-us.us-green  .side-bar{ background:var(--green); }
.cmp-us.us-purple .side-bar{ background:var(--purple); }
.cmp-us.us-yellow .side-bar{ background:var(--yellow); }

.cmp-row.in-view .cmp-them .side-bar{ width:var(--them); }
.cmp-row.in-view .cmp-us   .side-bar{ width:var(--us); transition-delay:calc(var(--delay, 0ms) + 120ms); }

/* Soft pulse on the axis when bars land — quietly emphasizes the center */
.cmp-axis::after, .cmp-axis::before{
  transition:transform 600ms ease;
  transition-delay:calc(var(--delay, 0ms) + 800ms);
}
.cmp-row.in-view .cmp-axis::before{ transform:translateX(-50%) scaleX(1.4); }
.cmp-row.in-view .cmp-axis::after { transform:translateX(-50%) scaleX(1.4); }

@media (prefers-reduced-motion: reduce){
  .side-bar{ transition:none !important; }
  .cmp-row .cmp-them .side-bar{ width:var(--them); }
  .cmp-row .cmp-us   .side-bar{ width:var(--us); }
}

@media (max-width:809px){
  .cmp-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cmp-diverge{ grid-template-columns:1fr 2px 1fr; }
  .side-lbl{ display:none; }
}

/* legacy lollipop styles (kept harmless, no targets) */
.cmp-track .axis{
  position:absolute;
  top:32px; left:0; right:0;
  height:1.5px;
  background:rgba(3,15,46,0.10);
}
.cmp-track .axis::before,
.cmp-track .axis::after{
  content:'';
  position:absolute;
  top:-3px;
  width:1.5px; height:9px;
  background:rgba(3,15,46,0.18);
}
.cmp-track .axis::before{ left:0; }
.cmp-track .axis::after{ right:0; }
.cmp-track .axis-lbl{
  position:absolute;
  top:14px;
  font-family:'Figtree'; font-weight:600; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(3,15,46,0.4);
}
.cmp-track .axis-lbl.l0{ left:0; }
.cmp-track .axis-lbl.l100{ right:0; }

.cmp-track .connector{
  position:absolute;
  top:32px;
  height:1.5px;
  background:var(--ink);
  left:var(--them);
  width:0;
  transition:width 800ms cubic-bezier(0.65,0,0.35,1);
  transition-delay:calc(var(--delay, 0ms) + 350ms);
  z-index:1;
}
.cmp-row.in-view .connector{
  width:calc(var(--us) - var(--them));
}

.cmp-track .marker{
  position:absolute;
  top:26px;
  transform:translateX(-50%);
  left:0;
  transition:left 900ms cubic-bezier(0.65,0,0.35,1);
  transition-delay:var(--delay, 0ms);
  z-index:2;
}
.cmp-row.in-view .marker.us{ left:var(--us); }
.cmp-row.in-view .marker.them{ left:var(--them); transition-delay:calc(var(--delay, 0ms) + 120ms); }

.cmp-track .marker .dot{
  display:block;
  border-radius:50%;
  margin:0 auto;
}
.cmp-track .marker.us .dot{
  width:18px; height:18px;
  background:var(--blue);
  border:3px solid var(--bg);
  box-shadow:0 0 0 2px var(--ink);
}
.cmp-track .marker.us.us-orange .dot{ background:var(--orange); }
.cmp-track .marker.us.us-green  .dot{ background:var(--green); }
.cmp-track .marker.us.us-purple .dot{ background:var(--purple); }
.cmp-track .marker.us.us-yellow .dot{ background:var(--yellow); }
.cmp-track .marker.them .dot{
  width:12px; height:12px;
  background:transparent;
  border:2px solid rgba(3,15,46,0.45);
  margin-top:3px;
}
.cmp-track .marker .v{
  position:absolute;
  font-family:'Figtree';
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  left:50%; transform:translateX(-50%);
  letter-spacing:-0.01em;
}
.cmp-track .marker.us .v{ top:-22px; color:var(--ink); }
.cmp-track .marker.them .v{ top:22px; color:rgba(3,15,46,0.55); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .cmp-track .connector,
  .cmp-track .marker{ transition:none !important; }
  .cmp-row .marker.us{ left:var(--us); }
  .cmp-row .marker.them{ left:var(--them); }
  .cmp-row .connector{ width:calc(var(--us) - var(--them)); }
}

@media (max-width:809px){
  .cmp-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cmp-track{ height:64px; }
}

.cmp-footer{
  margin-top:48px;
  text-align:center;
  font-family:'Figtree';
  font-style:italic;
  font-weight:800;
  font-size:clamp(24px, 3vw, 40px);
  line-height:1.1;
  color:var(--ink);
}
.cmp-footer .ital{ color:var(--orange); }

/* ═══════════════════════════════════════════ */

.note-section{
  background:var(--bg-warm);
  padding:80px 0 80px;
  position:relative;
  border-top:3px solid var(--ink);
  overflow:hidden;
}
.note-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:80px;
  align-items:start;
}
.note-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:28px;
}
.note-eyebrow .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.note-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:28px;
  color:var(--orange);
  line-height:1;
}
.note-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(40px, 5.5vw, 76px);
  line-height:0.96;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0 0 36px;
  max-width:22ch;
}
.note-h .ital{ font-style:italic; font-weight:800; color:var(--orange); }
.note-body{
  font-family:'Figtree';
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  max-width:58ch;
}
.note-body p{ margin:0 0 18px; }
.note-body em{ font-style:italic; font-weight:600; color:var(--orange); }
.note-body strong{ font-weight:800; color:var(--ink); }
.note-stats{
  margin-top:32px;
  padding:24px 0;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  font-family:'Figtree';
  font-weight:600;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
}
.note-stats em{ font-style:italic; color:var(--orange); }
.note-sign{
  margin-top:32px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
}
.note-sign .sig{ font-family:'Caveat'; font-weight:700; font-size:34px; color:var(--blue); font-style:normal; }

.note-margins{
  display:flex;
  flex-direction:column;
  gap:0;
}
.brief-excerpt{
  position:relative;
  padding:14px 0 14px 22px;
  border-left:2px solid var(--ink);
}
.brief-excerpt + .brief-excerpt{ margin-top:22px; }
.brief-excerpt .src{
  display:block;
  font-family:'Figtree';
  font-weight:600;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.55;
  margin-bottom:8px;
}
.brief-excerpt p{
  margin:0;
  font-family:'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-weight:500;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.brief-excerpt p em{
  font-style:italic;
  color:var(--orange);
  font-weight:600;
}

.note-pull{
  margin-top:64px;
  padding:36px 0 0;
  border-top:3px solid var(--ink);
}
.note-pull p{
  font-family:'Figtree';
  font-weight:800;
  font-style:italic;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  max-width:30ch;
}
.note-pull .accent{
  background:linear-gradient(transparent 60%, var(--yellow) 60%);
  padding:0 0.05em;
}
.note-pull .attr{
  margin-top:18px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  opacity:0.85;
}

@media (max-width:809px){
  .note-grid{ grid-template-columns:1fr; gap:48px; }

}

.cta-section{
  background:var(--purple);
  padding:80px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-top:3px solid var(--ink);
}
.cta-section .doodle-bg{ position:absolute; pointer-events:none; }
.cta-section .container{ position:relative; z-index:2; }
.cta-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(60px, 10vw, 160px);
  line-height:0.88;
  letter-spacing:-0.045em;
  color:var(--ink);
  margin:0 0 24px;
}
.cta-h .ital{ font-style:italic; }
.cta-h .scr-overlay-deprecated{
  display:inline-block;
  font-family:'Caveat';
  font-weight:700;
  font-style:normal;
  font-size:0.34em;
  color:var(--blue);
  vertical-align:0.6em;
  transform:rotate(-3deg);
  margin-left:-0.1em;
}
.cta-sub{
  font-family:'Figtree';
  font-weight:500;
  font-size:clamp(18px, 1.8vw, 22px);
  line-height:1.45;
  color:var(--ink);
  max-width:54ch;
  margin:0 auto 48px;
  opacity:0.85;
}
.cta-btn-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:72px;
}
.cta-btn-row .btn{ padding:20px 36px; font-size:16px; }

.contact-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  border-top:2px solid var(--ink);
  padding-top:48px;
  margin-top:48px;
  text-align:left;
}
.contact-card{
  padding:0;
}
.contact-card .tag{
  font-family:'Caveat';
  font-weight:700;
  font-size:26px;
  line-height:1;
  margin:0 0 10px;
  color:var(--ink);
  opacity:0.7;
  display:block;
}
.contact-card a{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  color:var(--ink);
  text-decoration:none;
  word-break:break-word;
  transition:color .2s;
}
.contact-card a:hover{ color:var(--blue); }
.contact-card p{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  margin:0;
  color:var(--ink);
}

@media (max-width:809px){
  .contact-strip{ grid-template-columns:1fr 1fr; gap:24px; }
}

.site-footer{
  background:var(--ink);
  color:var(--bg);
  padding:48px 0 36px;
  text-align:center;
}
.site-footer .footer-mark{
  font-family:'Figtree';
  font-weight:800;
  font-size:28px;
  letter-spacing:-0.02em;
  margin:0 0 8px;
}
.site-footer .footer-mark .ital{ font-style:italic; color:var(--blue); }
.site-footer .footer-tag{
  font-family:'Caveat';
  font-size:20px;
  color:var(--yellow);
  margin:0 0 18px;
}
.site-footer .footer-fine{
  font-family:'Figtree';
  font-size:13px;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.55);
  margin:0;
  text-transform:uppercase;
}

at end of body */
.network-section .container{ position:relative; z-index:2; }
.network-section .doodle-bg{
  position:absolute; pointer-events:none; z-index:1;
}
.network-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
  margin-top:48px;
}
.network-grid h2{ font-family:'Figtree'; font-weight:900; font-size:clamp(48px, 7vw, 96px); line-height:0.92; letter-spacing:-0.035em; margin:0 0 28px; color:var(--ink); }
.network-grid h2 .ital{ font-style:italic; }
.network-grid h2 .scr-overlay-deprecated{
  display:inline-block;
  font-family:'Caveat';
  font-weight:700;
  font-style:normal;
  font-size:0.45em;
  color:var(--blue);
  vertical-align:0.4em;
  transform:rotate(-4deg);
  margin-left:0.1em;
}
.network-grid .body{
  font-size:18px; line-height:1.55; color:var(--ink); margin:0 0 32px;
  max-width:54ch;
}
.network-grid .body em{ font-style:italic; font-weight:600; color:var(--orange); }

.tier-list{ margin:0; padding:0; list-style:none; }
.tier-item{
  display:flex; gap:16px;
  padding:18px 0;
  border-top:2px solid var(--ink);
}
.tier-item:last-child{ border-bottom:2px solid var(--ink); }
.tier-item .tier-n{
  font-family:'Figtree';
  font-weight:900;
  font-size:30px;
  line-height:1;
  width:48px;
  flex:none;
  color:var(--ink);
}
.tier-item .tier-body h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:21px;
  margin:0 0 4px;
  color:var(--ink);
}
.tier-item .tier-body p{
  margin:0;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink);
  opacity:0.85;
}

/* ========== ELEGANT VINTAGE TUNER DIAL ==========
   Dark navy face with brass accents — Braun/Dieter Rams sensibility.
   No knurling. No colored triangle pointer. No scale-up on active.
   Just a precision instrument with restrained motion. */

.network-illust{
  position:relative;
  width:100%;
  max-width:420px;
  height:420px;
  min-height:380px;
  margin:0 auto;
}

/* --- Dial assembly --- */
.dial-assembly{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:240px;
  height:240px;
}

/* Dial face — dark navy with subtle highlight at top-center */
.dial-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(
    circle at 50% 38%,
    #15233e 0%,
    var(--ink) 55%,
    #010614 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 92, 0.55),     /* hairline brass ring */
    inset 0 0 0 2px rgba(0, 0, 0, 0.4),           /* depth shadow inside ring */
    inset 0 0 36px rgba(0, 0, 0, 0.45),           /* darkening at edges */
    inset 0 1px 0 rgba(255, 255, 255, 0.05),      /* hairline top highlight */
    0 10px 28px rgba(3, 15, 46, 0.35);            /* lifted drop shadow */
}

/* Subtle inner decorative ring (very faint) */
.dial-face::before{
  content:'';
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:0.5px solid rgba(201, 165, 92, 0.12);
  pointer-events:none;
}

/* Knurling REMOVED — was the most cartoony element */
.dial-knurl{ display:none; }

/* Center hub — small brass jewel */
.dial-hub{
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  border-radius:50%;
  background:radial-gradient(
    circle at 35% 35%,
    #e8c97e 0%,
    #c9a55c 50%,
    #8a7039 100%
  );
  transform:translate(-50%, -50%);
  z-index:3;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.35),
    0 0 4px rgba(201, 165, 92, 0.25);
}

/* Minor tick marks (12, every 30°) — thin cream lines */
.tick{
  position:absolute;
  left:50%; top:9px;
  width:1px;
  height:5px;
  background:rgba(250, 243, 224, 0.30);
  transform-origin:50% 111px;
  transform:translateX(-50%) rotate(var(--a));
  z-index:2;
}

/* Major tick marks (6, every 60°) — slightly longer and brighter */
.tick.major{
  height:10px;
  width:1.5px;
  background:rgba(250, 243, 224, 0.65);
  top:7px;
  transform-origin:50% 113px;
}

/* Pointer — a thin brass line from the center outward.
   No triangle, no bright color. Just a precise line, like a watch hand. */
.dial-pointer{
  position:absolute;
  left:50%; top:50%;
  width:1.5px;
  height:96px;
  background:linear-gradient(
    to top,
    transparent 0%,
    rgba(201, 165, 92, 0.35) 10%,
    #c9a55c 40%,
    #e8c97e 90%,
    #f0d690 100%
  );
  transform-origin:50% 100%;                       /* rotate around the BOTTOM of the line (= dial center) */
  transform:translate(-50%, -100%) rotate(0deg);
  transition:transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  border:none;
  border-radius:0;
  z-index:2;
  filter:drop-shadow(0 0 1.5px rgba(232, 201, 126, 0.4));
}

/* --- Channel labels around the dial --- */
.ch{
  position:absolute;
  left:50%; top:50%;
  font-family:'Figtree', system-ui, sans-serif;
  font-weight:600;
  font-size:16px;
  color:var(--ink);
  white-space:nowrap;
  text-align:center;
  letter-spacing:0.005em;
  opacity:0.45;
  transition:opacity 0.5s ease, font-weight 0.5s ease;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(-172px)
    rotate(calc(-1 * var(--a)));
  z-index:2;
}

/* Active label — restrained. No scale, no color change. Just weight & opacity. */
.ch.active{
  opacity:1;
  font-weight:800;
}

/* Thin brass accent line under the active label */
.ch::after{
  content:'';
  position:absolute;
  left:50%; bottom:-8px;
  width:0;
  height:1px;
  background:#c9a55c;
  transform:translateX(-50%);
  transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ch.active::after{
  width:55%;
}

.ch1{ --a:0deg;   }
.ch2{ --a:60deg;  }
.ch3{ --a:120deg; }
.ch4{ --a:180deg; }
.ch5{ --a:240deg; }
.ch6{ --a:300deg; }

/* Channel readout — small, refined, INSIDE the dial below the hub */
.ch-display{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, 30px);
  background:transparent;
  padding:0;
  border-radius:0;
  box-shadow:none;
  color:rgba(250, 243, 224, 0.6);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px;
  font-weight:500;
  letter-spacing:0.22em;
  z-index:3;
  text-transform:uppercase;
}
.ch-display-label{
  opacity:0.55;
  margin-right:5px;
}
.ch-display-num{
  text-shadow:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dial-pointer, .ch, .ch::after{ transition:none; }
}

@media (max-width:809px){
  .network-grid{ grid-template-columns:1fr; gap:48px; }
  .network-illust{ max-width:340px; height:340px; min-height:340px; }
}

/* ═══════════════════════════════════════════ */

.process-section{
  background:var(--bg);
  padding:140px 0;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
  margin:64px 0;
  position:relative;
}
.process-step{
  text-align:center;
  position:relative;
}
.process-step::after{
  content:"→";
  position:absolute;
  top:38px;
  right:-20px;
  font-family:'Figtree';
  font-weight:700;
  font-size:24px;
  color:var(--ink);
  opacity:0.4;
}
.process-step:last-child::after{ display:none; }
.process-step .circle{
  width:88px; height:88px;
  border-radius:50%;
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Figtree';
  font-weight:900;
  font-size:30px;
  margin:0 auto 18px;
  position:relative;
  z-index:2;
}
.process-step .circle.s1{ background:var(--blue);   color:#fff; }
.process-step .circle.s2{ background:var(--orange); color:#fff; }
.process-step .circle.s3{ background:var(--yellow); color:var(--ink); }
.process-step .circle.s4{ background:var(--green);  color:var(--ink); }
.process-step .circle.s5{ background:var(--purple); color:var(--ink); }
.process-step h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:19px;
  margin:0 0 6px;
  color:var(--ink);
}
.process-step p{
  font-size:14px;
  line-height:1.4;
  color:var(--ink-soft);
  margin:0;
  max-width:20ch;
  margin-left:auto; margin-right:auto;
}

.cadence-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:48px;
  padding-top:48px;
  border-top:2px solid var(--ink);
}
.cadence-card{
  background:var(--bg-warm);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:24px 26px 26px;
}
.cadence-card .tag{
  font-family:'Caveat';
  font-weight:700;
  font-size:24px;
  line-height:1;
  margin-bottom:8px;
  display:block;
}
.cadence-card.c-blue   .tag{ color:var(--blue); }
.cadence-card.c-orange .tag{ color:var(--orange); }
.cadence-card.c-green  .tag{ color:#2d8b5e; }
.cadence-card h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  margin:0 0 4px;
}
.cadence-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink-soft);
}

@media (max-width:809px){
  .process-grid{ grid-template-columns:1fr 1fr; gap:32px 16px; }
  .process-step::after{ display:none; }
  .cadence-strip{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════ */

.why-section{
  background:var(--bg);
  padding:140px 0;
  position:relative;
}
.why-section .doodle-bg{ position:absolute; pointer-events:none; }
.why-grid{
  display:block;
  overflow:hidden;
  position:relative;
  padding:14px 0;
  margin-top:64px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
/* When a card is hovered: pause is handled by .why-track:hover.
   We also drop the mask + overflow clip so the enlarged card isn't cut off at edges. */
.why-grid:has(.why-card:hover){
  overflow:visible;
  -webkit-mask-image:none;
          mask-image:none;
}
.why-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:marqueeWhy 26s linear infinite;
  will-change:transform;
}
.why-track:hover{ animation-play-state:paused; }
@keyframes marqueeWhy{
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-50% - 12px)); }
}
/* Smooth interpolation requires the angle to be a typed custom property */
@property --grad-angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.why-card{
  flex:0 0 290px;
  width:290px;
  transition:transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 500ms ease;
  /* Transparent border reserves space; the conic gradient shows through it */
  border:3px solid transparent;
  border-radius:20px;
  padding:34px 28px 36px;
  position:relative;
  height:420px;          /* Fixed (was min-height) so the dot path matches every card */
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 22px rgba(3,15,46,0.10), 0 2px 6px rgba(3,15,46,0.06);
  transform-origin:center center;
  overflow:visible;      /* Let the dot extend slightly past the card edge */
  /* Two stacked backgrounds:
     1. Inner color (per-card via --card-bg) clipped to padding-box (inside border)
     2. Conic gradient through the 7 brand colors, clipped to border-box (shows in the 3px border ring) */
  background:
    linear-gradient(var(--card-bg, var(--bg-warm)), var(--card-bg, var(--bg-warm))) padding-box,
    conic-gradient(from var(--grad-angle, 0deg),
      var(--orange) 0%,
      var(--blue)   17%,
      var(--green)  33%,
      var(--purple) 50%,
      var(--yellow) 67%,
      var(--pink)   83%,
      var(--orange) 100%
    ) border-box;
  animation:gradSpin 5s linear infinite;
}
@keyframes gradSpin{
  to { --grad-angle: 360deg; }
}

/* The bright "character" dot — travels around the card's rounded perimeter via CSS Motion Path */
.why-card::before{
  content:'';
  position:absolute;
  /* Explicit anchor at padding-box origin — without this, the browser may interpret
     offset-path coords relative to the pseudo's natural static position (inside padding). */
  top:0; left:0;
  width:12px; height:12px;
  margin:0;
  border-radius:50%;
  background:#fff;
  /* Pure white glow — no yellow tint so the appearance is identical
     against any gradient color (orange, blue, green, etc.) */
  box-shadow:
    0 0 7px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,0.9),
    0 0 24px rgba(255,255,255,0.55),
    0 0 36px rgba(255,255,255,0.25);
  z-index:5;
  pointer-events:none;
  /* Path traces the outer border-box perimeter: 290 × 420 with 20px rounded corners */
  offset-path: path('M 17,-9 H 267 A 26,26 0 0 1 293,17 V 397 A 26,26 0 0 1 267,423 H 17 A 26,26 0 0 1 -9,397 V 17 A 26,26 0 0 1 17,-9 Z');
  offset-anchor: 50% 50%;
  offset-distance:0%;
  offset-rotate:0deg;
  animation:dotRun 5s linear infinite;
}
/* Stagger start positions so the 5 dots sit at different perimeter points at any moment */
.why-card.w1::before{ animation-delay:0s; }
.why-card.w2::before{ animation-delay:-0.7s; }
.why-card.w3::before{ animation-delay:-1.4s; }
.why-card.w4::before{ animation-delay:-2.1s; }
.why-card.w5::before{ animation-delay:-2.8s; }
@keyframes dotRun{
  to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .why-card{ animation:none !important; }
  .why-card::before{ animation:none !important; }
}
/* Cards display immediately; no per-card entrance now */
@media (prefers-reduced-motion: reduce){
  .why-track{ animation:none !important; }
  .why-card .roman{ animation:none !important; }
}
.why-card:hover{
  transform:scale(1.20) translateY(-10px);
  box-shadow:0 32px 64px rgba(3,15,46,0.22), 0 10px 22px rgba(3,15,46,0.14);
  cursor:default;
  rotate:0deg;
  z-index:10;
}

.why-card.w1{ --card-bg:var(--bg-warm); }
.why-card.w2{ --card-bg:var(--yellow);  }
.why-card.w3{ --card-bg:var(--lavender);  }
.why-card.w4{ --card-bg:var(--green);   }
.why-card.w5{ --card-bg:var(--sky);  }
.why-card .roman{
  font-family:'Figtree';
  font-style:italic;
  font-weight:800;
  font-size:48px;
  line-height:1;
  color:var(--ink);
  margin:0 0 18px;
}
.why-card .roman .scr-mark{
  display:block;
  font-family:'Caveat';
  font-weight:600;
  font-size:0.5em;
  color:var(--orange);
  font-style:normal;
  line-height:1;
  margin-top:4px;
}
.why-card h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:22px;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 12px;
}
.why-card h3 .ital{ font-style:italic; }
.why-card p{
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
  opacity:0.88;
}

@media (max-width:809px){
  .why-card{ flex:0 0 250px; width:250px; padding:26px 20px 28px; min-height:300px; }
  .why-card{ min-height:0; }
}

/* ═══════════════════════════════════════════ */

.metrics-section{
  position:relative;
  overflow:hidden;
  background:#f0f6f3;
  color:var(--ink);
  padding:120px 0;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.metrics-section .doodle-bg{ position:absolute; pointer-events:none; }
/* ── Title glow: soft yellow halo pulsing behind the metrics heading ── */
.title-glow{
  position:absolute;
  top:50%; left:50%;
  width:680px; height:340px;
  transform:translate(-50%, -50%);
  background:radial-gradient(ellipse at center,
    rgba(43,196,190,0.16) 0%,
    rgba(43,196,190,0.08) 30%,
    rgba(43,196,190,0) 65%);
  pointer-events:none;
  z-index:0;
  animation:glowPulse 5s ease-in-out infinite;
  filter:blur(8px);
}

/* ── Speed lines: 6 horizontal streaks racing right→left across the section ── */
.speed-lines{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.speed-line{
  position:absolute;
  right:-200px;
  height:2px;
  border-radius:2px;
  opacity:0;
  will-change:transform, opacity;
}
.speed-line.sl1{ top:24%;  width:110px; animation-delay:0.4s !important; animation-duration:0.7s !important; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.speed-line.sl2{ top:38%;  width:170px; animation-delay:0.9s !important; animation-duration:1.0s !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); height:1.5px; }
.speed-line.sl3{ top:52%;  width:130px; animation-delay:1.4s !important; animation-duration:0.8s !important; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.speed-line.sl4{ top:68%;  width:90px;  animation-delay:0.6s !important; animation-duration:0.9s !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); height:1.5px; }
.speed-line.sl5{ top:82%;  width:150px; animation-delay:2.0s !important; animation-duration:0.7s !important; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.speed-line.sl6{ top:18%;  width:100px; animation-delay:2.6s !important; animation-duration:0.85s !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }

/* ── Confetti burst: 12 colored pieces explode + fall when ribbon breaks ── */
.confetti-burst{
  position:absolute;
  top:0; right:50%;
  margin-right:-260px;     /* roughly aligned with finish line position */
  width:0; height:0;
  pointer-events:none;
  z-index:3;
}
.confetti-piece{
  position:absolute;
  top:54px; right:0;       /* origin at finish line height */
  opacity:0;
  will-change:transform, opacity;
  border-radius:1px;
}
.confetti-piece.cp1  { --tx:-30px;  --ty:-50px; --rot: 720deg;  width:7px; height:11px; background:var(--yellow); }
.confetti-piece.cp2  { --tx:-80px;  --ty:-30px; --rot:-540deg;  width:9px; height:5px;  background:var(--pink);   }
.confetti-piece.cp3  { --tx: 30px;  --ty:-60px; --rot: 540deg;  width:6px; height:10px; background:var(--green);  }
.confetti-piece.cp4  { --tx:-110px; --ty:-45px; --rot: 360deg;  width:8px; height:5px;  background:var(--blue);   }
.confetti-piece.cp5  { --tx: 60px;  --ty:-40px; --rot:-720deg;  width:6px; height:9px;  background:var(--purple); }
.confetti-piece.cp6  { --tx:-50px;  --ty:-75px; --rot: 540deg;  width:7px; height:7px;  background:var(--orange); border-radius:50%; }
.confetti-piece.cp7  { --tx:-90px;  --ty:-25px; --rot:-360deg;  width:9px; height:5px;  background:var(--yellow); }
.confetti-piece.cp8  { --tx: 0px;   --ty:-80px; --rot: 720deg;  width:6px; height:10px; background:var(--pink);   }
.confetti-piece.cp9  { --tx:-130px; --ty:-50px; --rot:-540deg;  width:7px; height:6px;  background:#fff;          }
.confetti-piece.cp10 { --tx: 80px;  --ty:-35px; --rot: 360deg;  width:8px; height:4px;  background:var(--green);  }
.confetti-piece.cp11 { --tx:-70px;  --ty:-15px; --rot: 720deg;  width:6px; height:6px;  background:var(--blue);   border-radius:50%; }
.confetti-piece.cp12 { --tx: 100px; --ty:-55px; --rot:-540deg;  width:7px; height:10px; background:var(--orange); }

/* Ambient pulse on metric numbers — kicks in AFTER count-up completes */
.metric.in-view .num{
  animation:numPulse 3.2s ease-in-out infinite;
  animation-delay:calc(var(--d, 0ms) + 2200ms);
}
.metric.w1 .num, .metric:nth-child(1) .num{ animation-delay:calc(var(--d, 0ms) + 2200ms); }
.metric:nth-child(2) .num{ animation-delay:calc(var(--d, 0ms) + 2400ms); }
.metric:nth-child(3) .num{ animation-delay:calc(var(--d, 0ms) + 2600ms); }
.metric:nth-child(4) .num{ animation-delay:calc(var(--d, 0ms) + 2800ms); }
.metric:nth-child(5) .num{ animation-delay:calc(var(--d, 0ms) + 3000ms); }

@keyframes numPulse{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .title-glow, .speed-lines, .confetti-burst{ display:none !important; }
  .runner{ display:none !important; }
  .metric .num{ animation:none !important; }
}

/* ── Title race: runner sprints from "Numbers" → "moved", crosses the ribbon ── */
.race-row{
  position:relative;
  display:inline-block;
  margin:0 auto 48px;
}
.race-row .metrics-h{ margin:0; }
.race-stage{
  position:absolute;
  top:-72px;
  /* Visible area aligned to title text ('N' to 'd'), but the stage itself
     extends 60px past 'd' on the right — that overhang gives the runner room
     to physically cross the finish line and continue past it before clipping. */
  left:0; right:-60px;
  height:68px;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  /* SOFT-FADE MASK at the finish line position. The mask is fully opaque
     up to 70px from the stage's right edge, then fades to transparent over
     a 14px gradient ending at calc(100% - 56px). Body parts that cross the
     line smoothly disappear into invisibility — no hard cut, no opacity-fade
     of the whole figure. The runner is effectively "running through a door". */
  mask-image:linear-gradient(90deg,
    #000 calc(100% - 70px),
    transparent calc(100% - 56px));
  -webkit-mask-image:linear-gradient(90deg,
    #000 calc(100% - 70px),
    transparent calc(100% - 56px));
}
.runner{
  position:absolute;
  /* Starts off-screen LEFT — runAcross moves it rightward across the stage */
  left:-4px; top:20px;
  width:38px; height:48px;
  transform-origin:center bottom;
  /* Mirror the figure so it visually faces RIGHT (head appears right of hip).
     The SVG internally still has head at x=16, hip at x=18; scaleX(-1) flips
     it horizontally. All limb rotations stay numerically the same but are
     visually mirrored, which preserves correct cross-coordination. */
  transform:scaleX(-1);
}
.runner-bounce{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}
.runner svg{ width:100%; height:100%; display:block; }
/* Each limb rotates around its joint via CSS — much smoother than 2-pose flicker */
.rn-arm-r, .rn-arm-l{
  transform-origin:17px 19px;  /* shoulder on flipped body */
  transform-box:view-box;
}
.rn-leg-r, .rn-leg-l{
  transform-origin:18px 30px;  /* hip — thigh rotates here */
  transform-box:view-box;
}
.rn-lower-r, .rn-lower-l{
  /* Shin rotates around the KNEE, which moves with the thigh.
     fill-box anchors the origin to the element's own bbox top-center,
     so as the parent thigh rotates, the shin's pivot follows the knee. */
  transform-origin:50% 0%;
  transform-box:fill-box;
}
/* Ground line — the "track" where the feet land. Subtle dashed line
   across the bottom of the race-stage. Positioned so the runner's feet
   touch it at the extension of each stride. Ends at the finish line. */
.ground-line{
  position:absolute;
  bottom:8px;
  left:0;
  right:68px;        /* ends just before finish-line LEFT edge (60+8 = 68) */
  height:2px;
  background:repeating-linear-gradient(
    to right,
    rgba(3, 15, 46, 0.30) 0 6px,
    transparent 6px 10px
  );
  pointer-events:none;
  z-index:1;         /* below runner (2) but visible */
}
/* The .finish container sits at the door cutoff (60px from the right edge
   of the race-stage). The checkered .finish-pole inside it is the visible
   finish line that the runner crosses past before vanishing. */
.finish{
  position:absolute;
  right:60px;          /* aligned with 'd' (stage extends 60px past, so right:60 = above 'd') */
  top:0;
  width:8px;
  height:100%;
  z-index:3;           /* above runner so the checker stays visible during the cross */
  pointer-events:none;
}
.finish-pole{
  position:absolute;
  left:0; top:0;
  width:8px;
  height:100%;
  box-shadow:0 0 0 1px rgba(3,15,46,0.4);  /* faint outline keeps it crisp */
}
.finish-pole svg{
  width:100%;
  height:100%;
  display:block;
}
/* Trigger: .metrics-section gains .race-on via IntersectionObserver */
/* Race ends at 4.9s. Runner pauses 0.15s, then fades smoothly over 1.2s. */
.metrics-section.race-on .runner{
  /* `both` fill-mode keeps runner at runAcross's `from` value during the 0.4s
     delay (off-screen left) instead of its CSS position. runVanish is now a
     smooth 0.4s ease-out fade starting exactly when the runner reaches the
     finish line (5.9s = 0.4s delay + 5.5s run). */
  animation:
    runAcross 5.5s linear 0.4s both;
    /* runVanish removed — the soft-fade mask on .race-stage handles the
       smooth disappearance as the runner crosses the finish line. */
}


/* ===== Process circles: drop-and-bounce on scroll-in ===== */
.process-step .circle{
  /* Initial state: hidden above their landing position */
  opacity:0;
  transform:translateY(-80px) scale(0.85);
  /* Re-establish positioning since transform was inline */
  will-change:transform, opacity;
}
.process-section.steps-in .process-step .circle{
  /* 1.6s with ease-in feel for the falling part — gravity acceleration —
     plus the bounce keyframes naturally provide the rebound feel. */
  animation:circleDropBounce 1.6s cubic-bezier(0.45, 0, 0.7, 1.05) forwards;
}
/* Staggered cascade — each subsequent circle starts 180ms after the previous */
.process-section.steps-in .process-step:nth-child(1) .circle{ animation-delay:0s;    }
.process-section.steps-in .process-step:nth-child(2) .circle{ animation-delay:0.30s; }
.process-section.steps-in .process-step:nth-child(3) .circle{ animation-delay:0.60s; }
.process-section.steps-in .process-step:nth-child(4) .circle{ animation-delay:0.90s; }
.process-section.steps-in .process-step:nth-child(5) .circle{ animation-delay:1.20s; }

/* Title and label fade in too, slightly delayed after each circle lands */
.process-step h3, .process-step p{
  opacity:0;
  transform:translateY(6px);
  transition:opacity 380ms ease, transform 380ms ease;
}
.process-section.steps-in .process-step:nth-child(1) h3,
.process-section.steps-in .process-step:nth-child(1) p{ transition-delay:1.10s; }
.process-section.steps-in .process-step:nth-child(2) h3,
.process-section.steps-in .process-step:nth-child(2) p{ transition-delay:1.40s; }
.process-section.steps-in .process-step:nth-child(3) h3,
.process-section.steps-in .process-step:nth-child(3) p{ transition-delay:1.70s; }
.process-section.steps-in .process-step:nth-child(4) h3,
.process-section.steps-in .process-step:nth-child(4) p{ transition-delay:2.00s; }
.process-section.steps-in .process-step:nth-child(5) h3,
.process-section.steps-in .process-step:nth-child(5) p{ transition-delay:2.30s; }
.process-section.steps-in .process-step h3,
.process-section.steps-in .process-step p{
  opacity:1;
  transform:translateY(0);
}

/* Connector arrows (::after) fade in after the next circle has landed */
.process-step::after{ opacity:0; transition:opacity 380ms ease; }
.process-section.steps-in .process-step:nth-child(1)::after{ transition-delay:1.45s; opacity:1; }
.process-section.steps-in .process-step:nth-child(2)::after{ transition-delay:1.75s; opacity:1; }
.process-section.steps-in .process-step:nth-child(3)::after{ transition-delay:2.05s; opacity:1; }
.process-section.steps-in .process-step:nth-child(4)::after{ transition-delay:2.35s; opacity:1; }

@keyframes circleDropBounce{
  /* Start WAY above the viewport so the circle "falls from the top of the page". */
  0%   { transform:translateY(-120vh) scale(0.9); opacity:0; }
  /* Become visible once it's near the section */
  18%  { opacity:1; }
  /* Approaching landing — accelerating */
  55%  { transform:translateY(-40px) scale(0.94); opacity:1; }
  /* Land with squash (wider, shorter) */
  64%  { transform:translateY(12px) scale(1.10, 0.92); }
  /* Bounce up + stretch (taller, narrower) */
  76%  { transform:translateY(-14px) scale(0.96, 1.04); }
  /* Small second bounce */
  86%  { transform:translateY(5px) scale(1.03, 0.99); }
  93%  { transform:translateY(-2px) scale(1.01); }
  100% { transform:translateY(0) scale(1); opacity:1; }
}

/* Reduced-motion fallback: circles just fade in, no bounce */
@media (prefers-reduced-motion: reduce){
  .process-step .circle{ opacity:1; transform:none; }
  .process-section.steps-in .process-step .circle{ animation:none; }
  .process-step h3, .process-step p{ opacity:1; transform:none; transition:none; }
  .process-step::after{ opacity:1; }
}


  100% { opacity:0; }
}
.metrics-section.race-on .runner-bounce{
  /* 0.25s × 22 = 5.5s — limbs keep moving through the doorway vanish (ends with vanish at 5.9s) */
  animation:runBounce 0.25s ease-in-out 0.4s 22 forwards;
}
/* Limb rotations — running cadence (0.3s) with cross-coordination
   (right arm + left leg in phase; left arm + right leg opposite).
   Arms swing at ±40°, legs at ±60° (sprinter stride). */
.metrics-section.race-on .rn-arm-r{
  animation:swingA 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-arm-l{
  animation:swingB 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-leg-l{
  /* Thigh swings (in phase with right arm — cross coordination) */
  animation:legSwingA 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-leg-r{
  /* Thigh swings (in phase with left arm) */
  animation:legSwingB 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-lower-l{
  /* LEADING leg (for leftward motion) — starts BENT (knee high, foot tucked) */
  animation:shinBendB 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .rn-lower-r{
  /* TRAILING leg — starts STRAIGHT (push-off extended) */
  animation:shinBendA 0.25s ease-in-out 0.4s 22 alternate forwards;
}
.metrics-section.race-on .finish-pole{
  animation:poleShudder 0.5s ease-out 5.15s;
}
/* Speed lines streak right→left during the race */
.metrics-section.race-on .speed-line{
  animation:speedStreak 0.9s linear 0.4s infinite;
}
.metrics-section.race-on .speed-line.sl-stop{
  animation-iteration-count:6;
}
/* Confetti bursts at the moment runner crosses the finish line */
.metrics-section.race-on .confetti-piece{
  animation:confettiBurst 1.6s cubic-bezier(0.15, 0.65, 0.45, 1) 5.2s forwards;
}

@keyframes runAcross{
  /* LEFT TO RIGHT motion. The runner now runs PAST the finish line and
     into the soft-fade mask zone, so body parts vanish smoothly as they
     cross. Finish line is at calc(100% - 68px) to calc(100% - 60px) (above 'd').
     End position calc(100% - 30px) places the runner fully past the finish
     line — left edge 30px past, body fully behind the fade mask. */
  from { left:-38px; }
  to   { left:calc(100% - 30px); }
}
@keyframes runBounce{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
@keyframes poleShudder{
  0%, 100% { transform:translateX(0); }
  25%      { transform:translateX(-2px); }
  60%      { transform:translateX(1.5px); }
}
/* ── Arms: single-line, ±60° around shoulder ── */
@keyframes swingA{
  from { transform:rotate(-60deg); }
  to   { transform:rotate(60deg); }
}
@keyframes swingB{
  from { transform:rotate(60deg); }
  to   { transform:rotate(-60deg); }
}
/* ── Thighs: rotate ±55° around hip (less dramatic than ±75°) ── */
@keyframes legSwingA{
  from { transform:rotate(-55deg); }
  to   { transform:rotate(55deg); }
}
@keyframes legSwingB{
  from { transform:rotate(55deg); }
  to   { transform:rotate(-55deg); }
}
/* ── Shins: rotate RELATIVE to thigh — bends the knee.
       At thigh-back (push-off): shin straight (0° relative to thigh).
       At thigh-forward (knee lifted): shin bent back ~95° (foot toward butt). ── */
@keyframes shinBendA{
  from { transform:rotate(0deg);    }
  to   { transform:rotate(-65deg);  }
}
@keyframes shinBendB{
  from { transform:rotate(-65deg);  }
  to   { transform:rotate(0deg);    }
}
/* Speed lines — streak from right to left during the race */
@keyframes speedStreak{
  0%   { transform:translateX(0);          opacity:0; }
  15%  { opacity:0.65; }
  85%  { opacity:0.65; }
  100% { transform:translateX(-110vw);     opacity:0; }
}
/* Confetti — bursts outward then falls under gravity, rotating */
@keyframes confettiBurst{
  0%   { opacity:0; transform:translate(0, 0) rotate(0); }
  10%  { opacity:1; }
  100% {
    opacity:0;
    transform:translate(var(--tx, 0), calc(var(--ty, 0) + 180px)) rotate(var(--rot, 360deg));
  }
}
/* Title glow — subtle pulse behind the metrics heading */
@keyframes glowPulse{
  0%, 100% { opacity:0.5; transform:translate(-50%, -50%) scale(1); }
  50%      { opacity:0.85; transform:translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce){
  .race-stage{ display:none !important; }
}

.metrics-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(40px, 5.5vw, 72px);
  line-height:0.95;
  letter-spacing:-0.03em;
  margin:0 0 48px;
  color:var(--ink);
  text-align:center;
}
.metrics-h .ital{ font-style:italic; color:var(--orange); }
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}
.metric{
  text-align:center;
  padding:24px 16px;
  border-right:2px solid rgba(3,15,46,0.15);
}
.metric:last-child{ border-right:none; }
.metric .num{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(48px, 6.2vw, 84px);
  line-height:0.88;
  letter-spacing:-0.04em;
  color:var(--yellow);
  margin:0 0 14px;
  position:relative;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  white-space:nowrap;
  flex-wrap:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Number slide + bounce in */
.metric .num .count{
  display:inline-block;
  transform:translateY(56px) scale(0.92);
  opacity:0;
  transition:transform 1000ms cubic-bezier(0.34, 1.56, 0.64, 1),
             opacity 700ms ease;
  transition-delay:var(--d, 0ms);
}
.metric.in-view .num .count{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Unit symbol fades in after the number lands */
.metric .num .u{
  display:inline-block;
  opacity:0;
  transform:translateX(-12px);
  transition:opacity 500ms ease, transform 600ms cubic-bezier(0.16,1,0.3,1);
  transition-delay:calc(var(--d, 0ms) + 800ms);
}
.metric.in-view .num .u{ opacity:1; transform:translateX(0); }

/* Bigger, brighter halo glow burst */
.metric .num .halo{
  position:absolute;
  inset:-30% -20%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(248,244,124,0.85),
    rgba(248,244,124,0.35) 45%,
    rgba(43,196,190,0) 75%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transform:scale(0.3);
  filter:blur(8px);
}
.metric.in-view .num .halo{
  animation:metricHalo 1.8s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay:calc(var(--d, 0ms) + 850ms);
}
@keyframes metricHalo{
  0%   { opacity:0;    transform:scale(0.3); }
  30%  { opacity:1;    transform:scale(1.05); }
  100% { opacity:0;    transform:scale(2);    }
}
.metric .lbl{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 500ms ease, transform 500ms ease;
  transition-delay:calc(var(--d, 0ms) + 500ms);
}
.metric.in-view .lbl{ opacity:0.92; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .metric .num .count, .metric .lbl{ transform:none; opacity:1; transition:none; }
  .metric .num .halo{ animation:none; }
}
.metric .num .u{
  font-size:0.5em;
  font-style:italic;
  font-weight:700;
}
.metric .lbl{
  font-family:'Figtree';
  font-weight:600;
  font-size:14px;
  line-height:1.35;
  color:var(--ink);
  margin:0;
}

@media (max-width:809px){
  .metrics-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .metric{ border-right:none; border-bottom:1px solid rgba(3,15,46,0.12); padding-bottom:24px; }
}

/* ═══════════════════════════════════════════ */

.compare-section{
  background:var(--bg);
  padding:140px 0;
}
.compare-legend{
  display:flex;
  gap:24px;
  margin:32px 0 48px;
  padding-bottom:18px;
  border-bottom:2px solid var(--ink);
}
.compare-legend .item{
  display:flex; align-items:center; gap:10px;
  font-family:'Figtree';
  font-weight:700;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.compare-legend .sw{ width:22px; height:14px; }
.cmp-row{
  padding:30px 0 36px;
  border-bottom:1.5px solid rgba(3,15,46,0.08);
}
.cmp-row:last-of-type{ border-bottom:none; }
.cmp-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:18px;
}
.cmp-header .label{
  font-family:'Figtree';
  font-weight:700;
  font-size:clamp(17px, 1.5vw, 20px);
  color:var(--ink);
  letter-spacing:-0.01em;
  margin:0;
}
.cmp-header .label em{ font-style:italic; color:var(--orange); font-weight:800; }
.cmp-header .delta{
  font-family:'Figtree';
  font-weight:800;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--orange);
  background:rgba(255,116,46,0.10);
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}

/* Diverging bars from center axis */
.cmp-diverge{
  display:grid;
  grid-template-columns:1fr 3px 1fr;
  align-items:center;
  height:52px;
  position:relative;
}
.cmp-axis{
  background:var(--ink);
  height:100%;
  z-index:2;
  position:relative;
}
.cmp-axis::before, .cmp-axis::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:9px; height:2px;
  background:var(--ink);
}
.cmp-axis::before{ top:-2px; }
.cmp-axis::after{ bottom:-2px; }

.cmp-them, .cmp-us{
  display:flex;
  align-items:center;
  gap:14px;
  height:100%;
  position:relative;
}
.cmp-them{
  justify-content:flex-end;
  padding-right:14px;
}
.cmp-us{
  justify-content:flex-start;
  padding-left:14px;
}

.side-lbl{
  font-family:'Figtree';
  font-weight:600;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(3,15,46,0.55);
  white-space:nowrap;
}
.cmp-us .side-lbl{ color:var(--ink); }

.side-val{
  font-family:'Figtree';
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.01em;
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cmp-them .side-val{ color:rgba(3,15,46,0.6); font-weight:700; }

.side-bar{
  display:block;
  height:24px;
  width:0;
  background:rgba(180,170,140,0.55);
  border:1.5px solid rgba(3,15,46,0.30);
  transition:width 1000ms cubic-bezier(0.65,0,0.35,1);
  transition-delay:var(--delay, 0ms);
}
.cmp-us .side-bar{
  background:var(--blue);
  border-color:var(--ink);
}
.cmp-us.us-orange .side-bar{ background:var(--orange); }
.cmp-us.us-green  .side-bar{ background:var(--green); }
.cmp-us.us-purple .side-bar{ background:var(--purple); }
.cmp-us.us-yellow .side-bar{ background:var(--yellow); }

.cmp-row.in-view .cmp-them .side-bar{ width:var(--them); }
.cmp-row.in-view .cmp-us   .side-bar{ width:var(--us); transition-delay:calc(var(--delay, 0ms) + 120ms); }

/* Soft pulse on the axis when bars land — quietly emphasizes the center */
.cmp-axis::after, .cmp-axis::before{
  transition:transform 600ms ease;
  transition-delay:calc(var(--delay, 0ms) + 800ms);
}
.cmp-row.in-view .cmp-axis::before{ transform:translateX(-50%) scaleX(1.4); }
.cmp-row.in-view .cmp-axis::after { transform:translateX(-50%) scaleX(1.4); }

@media (prefers-reduced-motion: reduce){
  .side-bar{ transition:none !important; }
  .cmp-row .cmp-them .side-bar{ width:var(--them); }
  .cmp-row .cmp-us   .side-bar{ width:var(--us); }
}

@media (max-width:809px){
  .cmp-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cmp-diverge{ grid-template-columns:1fr 2px 1fr; }
  .side-lbl{ display:none; }
}

/* legacy lollipop styles (kept harmless, no targets) */
.cmp-track .axis{
  position:absolute;
  top:32px; left:0; right:0;
  height:1.5px;
  background:rgba(3,15,46,0.10);
}
.cmp-track .axis::before,
.cmp-track .axis::after{
  content:'';
  position:absolute;
  top:-3px;
  width:1.5px; height:9px;
  background:rgba(3,15,46,0.18);
}
.cmp-track .axis::before{ left:0; }
.cmp-track .axis::after{ right:0; }
.cmp-track .axis-lbl{
  position:absolute;
  top:14px;
  font-family:'Figtree'; font-weight:600; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(3,15,46,0.4);
}
.cmp-track .axis-lbl.l0{ left:0; }
.cmp-track .axis-lbl.l100{ right:0; }

.cmp-track .connector{
  position:absolute;
  top:32px;
  height:1.5px;
  background:var(--ink);
  left:var(--them);
  width:0;
  transition:width 800ms cubic-bezier(0.65,0,0.35,1);
  transition-delay:calc(var(--delay, 0ms) + 350ms);
  z-index:1;
}
.cmp-row.in-view .connector{
  width:calc(var(--us) - var(--them));
}

.cmp-track .marker{
  position:absolute;
  top:26px;
  transform:translateX(-50%);
  left:0;
  transition:left 900ms cubic-bezier(0.65,0,0.35,1);
  transition-delay:var(--delay, 0ms);
  z-index:2;
}
.cmp-row.in-view .marker.us{ left:var(--us); }
.cmp-row.in-view .marker.them{ left:var(--them); transition-delay:calc(var(--delay, 0ms) + 120ms); }

.cmp-track .marker .dot{
  display:block;
  border-radius:50%;
  margin:0 auto;
}
.cmp-track .marker.us .dot{
  width:18px; height:18px;
  background:var(--blue);
  border:3px solid var(--bg);
  box-shadow:0 0 0 2px var(--ink);
}
.cmp-track .marker.us.us-orange .dot{ background:var(--orange); }
.cmp-track .marker.us.us-green  .dot{ background:var(--green); }
.cmp-track .marker.us.us-purple .dot{ background:var(--purple); }
.cmp-track .marker.us.us-yellow .dot{ background:var(--yellow); }
.cmp-track .marker.them .dot{
  width:12px; height:12px;
  background:transparent;
  border:2px solid rgba(3,15,46,0.45);
  margin-top:3px;
}
.cmp-track .marker .v{
  position:absolute;
  font-family:'Figtree';
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  left:50%; transform:translateX(-50%);
  letter-spacing:-0.01em;
}
.cmp-track .marker.us .v{ top:-22px; color:var(--ink); }
.cmp-track .marker.them .v{ top:22px; color:rgba(3,15,46,0.55); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .cmp-track .connector,
  .cmp-track .marker{ transition:none !important; }
  .cmp-row .marker.us{ left:var(--us); }
  .cmp-row .marker.them{ left:var(--them); }
  .cmp-row .connector{ width:calc(var(--us) - var(--them)); }
}

@media (max-width:809px){
  .cmp-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cmp-track{ height:64px; }
}

.cmp-footer{
  margin-top:48px;
  text-align:center;
  font-family:'Figtree';
  font-style:italic;
  font-weight:800;
  font-size:clamp(24px, 3vw, 40px);
  line-height:1.1;
  color:var(--ink);
}
.cmp-footer .ital{ color:var(--orange); }

/* ═══════════════════════════════════════════ */

.note-section{
  background:var(--bg-warm);
  padding:80px 0 80px;
  position:relative;
  border-top:3px solid var(--ink);
  overflow:hidden;
}
.note-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:80px;
  align-items:start;
}
.note-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:28px;
}
.note-eyebrow .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.note-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:28px;
  color:var(--orange);
  line-height:1;
}
.note-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(40px, 5.5vw, 76px);
  line-height:0.96;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0 0 36px;
  max-width:22ch;
}
.note-h .ital{ font-style:italic; font-weight:800; color:var(--orange); }
.note-body{
  font-family:'Figtree';
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  max-width:58ch;
}
.note-body p{ margin:0 0 18px; }
.note-body em{ font-style:italic; font-weight:600; color:var(--orange); }
.note-body strong{ font-weight:800; color:var(--ink); }
.note-stats{
  margin-top:32px;
  padding:24px 0;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  font-family:'Figtree';
  font-weight:600;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
}
.note-stats em{ font-style:italic; color:var(--orange); }
.note-sign{
  margin-top:32px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
}
.note-sign .sig{ font-family:'Caveat'; font-weight:700; font-size:34px; color:var(--blue); font-style:normal; }

.note-margins{
  display:flex;
  flex-direction:column;
  gap:0;
}
.brief-excerpt{
  position:relative;
  padding:14px 0 14px 22px;
  border-left:2px solid var(--ink);
}
.brief-excerpt + .brief-excerpt{ margin-top:22px; }
.brief-excerpt .src{
  display:block;
  font-family:'Figtree';
  font-weight:600;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.55;
  margin-bottom:8px;
}
.brief-excerpt p{
  margin:0;
  font-family:'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-weight:500;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.brief-excerpt p em{
  font-style:italic;
  color:var(--orange);
  font-weight:600;
}

.note-pull{
  margin-top:64px;
  padding:36px 0 0;
  border-top:3px solid var(--ink);
}
.note-pull p{
  font-family:'Figtree';
  font-weight:800;
  font-style:italic;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  max-width:30ch;
}
.note-pull .accent{
  background:linear-gradient(transparent 60%, var(--yellow) 60%);
  padding:0 0.05em;
}
.note-pull .attr{
  margin-top:18px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  opacity:0.85;
}

@media (max-width:809px){
  .note-grid{ grid-template-columns:1fr; gap:48px; }

}

.cta-section{
  background:var(--purple);
  padding:80px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-top:3px solid var(--ink);
}
.cta-section .doodle-bg{ position:absolute; pointer-events:none; }
.cta-section .container{ position:relative; z-index:2; }
.cta-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(60px, 10vw, 160px);
  line-height:0.88;
  letter-spacing:-0.045em;
  color:var(--ink);
  margin:0 0 24px;
}
.cta-h .ital{ font-style:italic; }
.cta-h .scr-overlay-deprecated{
  display:inline-block;
  font-family:'Caveat';
  font-weight:700;
  font-style:normal;
  font-size:0.34em;
  color:var(--blue);
  vertical-align:0.6em;
  transform:rotate(-3deg);
  margin-left:-0.1em;
}
.cta-sub{
  font-family:'Figtree';
  font-weight:500;
  font-size:clamp(18px, 1.8vw, 22px);
  line-height:1.45;
  color:var(--ink);
  max-width:54ch;
  margin:0 auto 48px;
  opacity:0.85;
}
.cta-btn-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:72px;
}
.cta-btn-row .btn{ padding:20px 36px; font-size:16px; }

.contact-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  border-top:2px solid var(--ink);
  padding-top:48px;
  margin-top:48px;
  text-align:left;
}
.contact-card{
  padding:0;
}
.contact-card .tag{
  font-family:'Caveat';
  font-weight:700;
  font-size:26px;
  line-height:1;
  margin:0 0 10px;
  color:var(--ink);
  opacity:0.7;
  display:block;
}
.contact-card a{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  color:var(--ink);
  text-decoration:none;
  word-break:break-word;
  transition:color .2s;
}
.contact-card a:hover{ color:var(--blue); }
.contact-card p{
  font-family:'Figtree';
  font-weight:800;
  font-size:18px;
  margin:0;
  color:var(--ink);
}

@media (max-width:809px){
  .contact-strip{ grid-template-columns:1fr 1fr; gap:24px; }
}

.site-footer{
  background:var(--ink);
  color:var(--bg);
  padding:48px 0 36px;
  text-align:center;
}
.site-footer .footer-mark{
  font-family:'Figtree';
  font-weight:800;
  font-size:28px;
  letter-spacing:-0.02em;
  margin:0 0 8px;
}
.site-footer .footer-mark .ital{ font-style:italic; color:var(--blue); }
.site-footer .footer-tag{
  font-family:'Caveat';
  font-size:20px;
  color:var(--yellow);
  margin:0 0 18px;
}
.site-footer .footer-fine{
  font-family:'Figtree';
  font-size:13px;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.55);
  margin:0;
  text-transform:uppercase;
}

/* ===================================================================
   PILLAR CARD — clickable glow + custom "read" cursor (ATL pillar only)
   =================================================================== */
.pillar-card.pillar-clickable{
  cursor:pointer;
  transition:
    box-shadow .45s cubic-bezier(.16,1,.3,1),
    transform .45s cubic-bezier(.16,1,.3,1);
}
.pillar-card.p-blue.pillar-clickable:hover,
.pillar-card.p-blue.pillar-clickable:focus-visible{
  transform:translateY(-6px);
  outline:none;
  box-shadow:0 0 0 2.5px var(--ink), 0 26px 70px rgba(45,105,255,.55), 0 0 60px rgba(45,105,255,.35);
}
.pillar-card.pillar-clickable:hover .pillar-cs-btn{ opacity:1; }
.pillar-card.pillar-clickable:hover .pillar-cs-arrow{ transform:translateX(4px); }

/* custom cursor: only suppress native on the clickable ATL card */
@media (hover:hover) and (pointer:fine){
  .pillar-card.pillar-clickable,
  .pillar-card.pillar-clickable *{ cursor:pointer; }
}

.uh-cursor{
  position:fixed; top:0; left:0;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  display:none; place-items:center;
  opacity:0;
  transition:opacity .2s ease, width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.uh-cursor.is-active{ opacity:1; }
.uh-cursor__label{
  font-family:'Caveat','Caveat Brush',cursive;
  font-weight:700;
  font-size:0;
  color:#fff;
  line-height:1;
  white-space:nowrap;
  transform:rotate(-6deg);
  transition:font-size .25s cubic-bezier(.2,.8,.2,1);
}
.uh-cursor.is-read{ width:80px; height:80px; background:var(--orange); }
.uh-cursor.is-read .uh-cursor__label{ font-size:24px; }
@media (hover:none){ .uh-cursor{ display:none !important; } }

/* ===================================================================
   ATL CASE STUDY — image gallery (cdeck)
   =================================================================== */
.atl-cdeck{
  margin:0 0 32px;
  background:var(--ink);
  border-radius:20px;
  overflow:hidden;
  position:relative;
}
.atl-cdeck__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.atl-cdeck__label{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  min-height:1.4em;
  transition:color .2s;
}
.atl-cdeck__nav{ display:flex; align-items:center; gap:10px; }
.atl-cdeck__nav button{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff; border-radius:50%;
  width:28px; height:28px;
  display:grid; place-items:center;
  cursor:pointer; font-size:13px;
  transition:background .2s;
}
.atl-cdeck__nav button:hover{ background:rgba(255,255,255,.2); }
.atl-cdeck__cur{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:11px; color:rgba(255,255,255,.45);
  min-width:36px; text-align:center;
}
.atl-cdeck__track{
  position:relative;
  overflow:hidden;
}
.atl-cdeck__card{
  display:none;
  position:relative;
}
.atl-cdeck__card.is-active{ display:block; }
.atl-cdeck__card img{
  width:100%; display:block;
  object-fit:cover;
  max-height:480px;
}
.atl-cdeck__card-info{
  position:absolute; bottom:0; left:0; right:0;
  padding:28px 20px 16px;
  background:linear-gradient(to top, rgba(3,15,46,.8) 0%, transparent 100%);
  display:flex; gap:8px; align-items:flex-end;
}
.atl-cdeck__card-info span{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.85); background:rgba(3,15,46,.55);
  padding:3px 8px; border-radius:4px;
}


footer.site-footer{ margin-bottom:0 !important; }
body{ min-height:0 !important; }

/* ===== block ===== */

/* ============ MANIFESTO ============ */
.manifesto-body{
  background:var(--bg);
  padding:80px 0 140px;
  position:relative;
}
.manifesto-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:36px;
}
.manifesto-eyebrow .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.manifesto-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:28px;
  color:var(--orange);
  line-height:1;
}
.manifesto h2{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(48px, 7.5vw, 104px);
  line-height:0.95;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin:0 0 36px;
  max-width:18ch;
}
.manifesto h2 .ital{
  font-style:italic;
  font-weight:800;
  color:var(--orange);
}
.manifesto h2 .underline{
  background:linear-gradient(transparent 65%, var(--yellow) 65%);
  display:inline;
  padding:0 0.04em;
}
.manifesto-prose{
  max-width:64ch;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}
.manifesto-prose p{ margin:0 0 16px; }
.manifesto-prose em{ color:var(--orange); font-style:italic; font-weight:600; }

.manifesto-boxes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:64px 0 56px;
}
.mbox{
  border-radius:24px;
  padding:36px 32px 40px;
  position:relative;
  overflow:hidden;
}
.mbox--green{  background:var(--mint); }
.mbox--purple{ background:var(--purple); }
.mbox--orange{ background:var(--lavender); color:var(--ink); }
.mbox--yellow{ background:var(--yellow); }
.mbox-eyebrow{
  font-family:'Caveat';
  font-weight:700;
  font-size:28px;
  color:var(--ink);
  display:block;
  margin-bottom:14px;
  line-height:1;
}
.mbox--orange .mbox-eyebrow{ color:var(--ink); }
.mbox h3{
  font-family:'Figtree';
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0 0 12px;
}
.mbox--orange h3{ color:var(--ink); }
.mbox p{
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
}
.mbox--orange p{ color:var(--ink); }
.mbox .floater{
  position:absolute;
  width:90px;
  top:-22px; right:-22px;
  opacity:0.9;
}

.pull-quote-wrap{
  margin-top:80px;
  padding:48px 32px;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  position:relative;
}
.pull-quote{
  font-family:'Figtree';
  font-weight:800;
  font-style:italic;
  font-size:clamp(28px, 4.2vw, 56px);
  line-height:1.1;
  letter-spacing:-0.022em;
  color:var(--ink);
  margin:0;
  max-width:24ch;
}
.pull-quote .accent{
  background:linear-gradient(transparent 60%, var(--pink) 60%);
  padding:0 0.06em;
}
.pull-quote-attr{
  margin-top:18px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  opacity:0.85;
}

@media (max-width:809px){
  .manifesto-boxes{ grid-template-columns:1fr; }
}

/* ===== block ===== */

.trusted-logos-section{
  background:var(--bg-warm);
  padding:60px 0 64px;
  overflow:hidden;
  border-top:1px solid rgba(3,15,46,0.08);
  border-bottom:1px solid rgba(3,15,46,0.08);
}
.trusted-logos-eyebrow{
  text-align:center;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:30px;
  color:var(--orange);
  margin:0 0 36px;
  line-height:1;
}
.logo-marquee{
  display:flex;
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track{
  display:flex;
  gap:60px;
  align-items:center;
  flex-shrink:0;
  padding-right:60px;
  animation:logoMarqueeScroll 65s linear infinite;
}
@keyframes logoMarqueeScroll{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
.brand-logo{
  flex:0 0 auto;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
}
.brand-logo svg{
  display:block;
  max-height:48px;
  max-width:140px;
  width:auto;
  height:auto;
  opacity:0.88;
  transition:opacity 320ms ease;
}
.brand-logo:hover svg{ opacity:1; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.logo-marquee:hover .logo-marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation:none !important; }
}
@media (max-width: 720px){
  .trusted-logos-section{ padding:48px 0 50px; }
  .trusted-logos-eyebrow{ font-size:26px; margin-bottom:28px; }
  .brand-logo{ height:38px; padding:0 12px; }
  .brand-logo img{ max-height:38px; max-width:110px; }
  .logo-marquee-track{ gap:46px; padding-right:46px; }
}

/* ===== block ===== */

.works-section{
  background:var(--bg);
  padding:120px 0;
  position:relative;
}
.section-eyebrow{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 700ms ease, transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.section-eyebrow.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .section-eyebrow{ opacity:1; transform:none; transition:none; }
}
.section-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
}
.section-eyebrow .dot{ width:10px; height:10px; border-radius:50%; }
.section-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:30px;
  line-height:1;
}
.section-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(48px, 7vw, 96px);
  line-height:0.92;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin:0 0 24px;
  max-width:18ch;
}
.section-h .ital{ font-style:italic; font-weight:800; }
.section-lede{
  max-width:62ch;
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 56px;
}

.works-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:56px;
}
.work-card{
  border-radius:32px;
  padding:36px 36px 40px;
  position:relative;
  overflow:hidden;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:2.5px solid var(--ink);
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  opacity:0;
  transform:translateY(40px);
}
.work-card.in-view{ opacity:1; transform:translateY(0); }
.work-card:nth-child(odd).in-view{  transform:translateY(0) translateX(0); }
.work-card:nth-child(even).in-view{ transform:translateY(0) translateX(0); }
.work-card:nth-child(odd){  transform:translateY(40px) translateX(-30px); }
.work-card:nth-child(even){ transform:translateY(40px) translateX(30px); }
.work-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(3,15,46,0.18); }

.wc-blue{   background:var(--blue);    color:#fff; }
.wc-orange{ background:var(--ink);  color:#fff; }
.wc-green{  background:var(--green);   color:var(--ink); }
.wc-purple{ background:var(--lavender);  color:var(--ink); }
.wc-yellow{ background:var(--yellow);  color:var(--ink); }

.wc-tag{
  font-family:'Caveat';
  font-weight:600;
  font-size:26px;
  line-height:1;
  margin-bottom:14px;
  display:block;
}
.wc-blue .wc-tag, .wc-orange .wc-tag{ color:rgba(255,255,255,0.85); }
.wc-green .wc-tag, .wc-purple .wc-tag, .wc-yellow .wc-tag{ color:var(--ink); }

.wc-stat{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(72px, 9vw, 124px);
  line-height:0.88;
  letter-spacing:-0.045em;
  margin:0 0 8px;
}
.wc-stat .unit{
  font-size:0.5em;
  font-weight:700;
  font-style:italic;
}
.wc-stat-lbl{
  font-family:'Figtree';
  font-weight:600;
  font-size:14px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin:0 0 28px;
  opacity:0.85;
}
.wc-title{
  font-family:'Figtree';
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin:0 0 14px;
}
.wc-title .ital{ font-style:italic; font-weight:700; }
.wc-body{
  font-size:15.5px;
  line-height:1.5;
  margin:0;
  opacity:0.92;
}
.wc-floater{
  position:absolute;
  width:100px;
  bottom:-16px; right:-16px;
  opacity:0.85;
  pointer-events:none;
}
.wc-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(0,0,0,0.12);
  margin-top:18px;
  font-size:18px;
  font-weight:700;
}
.wc-blue .wc-arrow{ background:rgba(255,255,255,0.2); }
.wc-orange .wc-arrow{ background:rgba(255,255,255,0.2); }

/* The 5th card spans 2 cols, looks like a "summary" tile */
.work-card.span2{
  grid-column:1 / -1;
  min-height:280px;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.work-card.span2 .wc-stat{ font-size:clamp(96px, 11vw, 160px); }
.work-card.span2 .wc-right{ flex:1; max-width:520px; }

@media (max-width:809px){
  .works-grid{ grid-template-columns:1fr; }
  .work-card.span2{ flex-direction:column; align-items:flex-start; min-height:0; }
}

/* ===== block ===== */

.note-section{
  background:var(--bg-warm);
  padding:80px 0 80px;
  position:relative;
  border-top:3px solid var(--ink);
  overflow:hidden;
}
.note-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:80px;
  align-items:start;
}
.note-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:28px;
}
.note-eyebrow .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.note-eyebrow .lbl{
  font-family:'Caveat';
  font-weight:600;
  font-size:28px;
  color:var(--orange);
  line-height:1;
}
.note-h{
  font-family:'Figtree';
  font-weight:900;
  font-size:clamp(40px, 5.5vw, 76px);
  line-height:0.96;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0 0 36px;
  max-width:22ch;
}
.note-h .ital{ font-style:italic; font-weight:800; color:var(--orange); }
.note-body{
  font-family:'Figtree';
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  max-width:58ch;
}
.note-body p{ margin:0 0 18px; }
.note-body em{ font-style:italic; font-weight:600; color:var(--orange); }
.note-body strong{ font-weight:800; color:var(--ink); }
.note-stats{
  margin-top:32px;
  padding:24px 0;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  font-family:'Figtree';
  font-weight:600;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
}
.note-stats em{ font-style:italic; color:var(--orange); }
.note-sign{
  margin-top:32px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
}
.note-sign .sig{ font-family:'Caveat'; font-weight:700; font-size:34px; color:var(--blue); font-style:normal; }

.note-margins{
  display:flex;
  flex-direction:column;
  gap:0;
}
.brief-excerpt{
  position:relative;
  padding:14px 0 14px 22px;
  border-left:2px solid var(--ink);
}
.brief-excerpt + .brief-excerpt{ margin-top:22px; }
.brief-excerpt .src{
  display:block;
  font-family:'Figtree';
  font-weight:600;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.55;
  margin-bottom:8px;
}
.brief-excerpt p{
  margin:0;
  font-family:'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-weight:500;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.brief-excerpt p em{
  font-style:italic;
  color:var(--orange);
  font-weight:600;
}

.note-pull{
  margin-top:64px;
  padding:36px 0 0;
  border-top:3px solid var(--ink);
}
.note-pull p{
  font-family:'Figtree';
  font-weight:800;
  font-style:italic;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
  max-width:30ch;
}
.note-pull .accent{
  background:linear-gradient(transparent 60%, var(--yellow) 60%);
  padding:0 0.05em;
}
.note-pull .attr{
  margin-top:18px;
  font-family:'Figtree';
  font-style:italic;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  opacity:0.85;
}

@media (max-width:809px){
  .note-grid{ grid-template-columns:1fr; gap:48px; }

}

/* ===== block ===== */

.pillar-cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 20px;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.pillar-cs-btn:hover {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}
.pillar-cs-arrow {
  font-size: 16px;
  transition: transform 0.2s;
}
.pillar-cs-btn:hover .pillar-cs-arrow {
  transform: translateX(4px);
}

/* ===== ATL · BTL · TTL CASE STUDY MODAL (HootHoot-style, Un-herd palette) ===== */
.atl-modal {
  position: fixed; inset: 0; z-index: 9000;
  visibility: hidden; pointer-events: none;
}
.atl-modal.is-open { visibility: visible; pointer-events: auto; }

.atl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 9, 29, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1);
  cursor: pointer;
}
.atl-modal.is-open .atl-modal__backdrop { opacity: 1; }

.atl-modal__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(920px, 100%);
  background: var(--bg);
  border-left: 3px solid var(--ink);
  transform: translateX(105%);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
  outline: none;
  box-shadow: -30px 0 80px rgba(2,9,29,0.22);
}
.atl-modal.is-open .atl-modal__panel { transform: translateX(0); }

.atl-modal__panel.is-flipping .atl-modal__inner {
  animation: atlFlip 0.45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes atlFlip {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* top bar */
.atl-modal__bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: rgba(254, 251, 246, 0.9);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 2px solid var(--ink);
  gap: 16px;
}
.atl-modal__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.atl-modal__tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--_accent, var(--blue));
}
.atl-modal__nav {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px;
  background: rgba(3,15,46,0.06);
  border-radius: 999px;
}
.atl-modal__navbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent; color: var(--ink); border: 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.atl-modal__navbtn svg { width: 15px; height: 15px; }
.atl-modal__navbtn:hover { background: var(--ink); color: var(--bg); }
.atl-modal__navbtn:active { transform: scale(0.92); }
.atl-modal__progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.08em; padding: 0 6px;
  min-width: 40px; text-align: center;
}
.atl-modal__close {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-family: 'Figtree', sans-serif;
  font-size: 13px; font-weight: 600; border: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.atl-modal__close:hover { background: var(--_accent, var(--blue)); }
.atl-modal__close-label { letter-spacing: 0.04em; }
.atl-modal__close-icon {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.atl-modal__close-icon svg { width: 14px; height: 14px; }

/* scroll area */
.atl-modal__inner {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.atl-modal__inner::-webkit-scrollbar { width: 8px; }
.atl-modal__inner::-webkit-scrollbar-thumb { background: rgba(3,15,46,0.2); border-radius: 4px; }

/* hero */
.atl-cs-hero {
  padding: 60px 48px 44px;
  background: var(--_accent, var(--blue));
  color: #fff;
  position: relative; overflow: hidden;
}
.atl-cs-hero__bignum {
  position: absolute; top: 4px; right: -6px;
  font-family: 'Figtree', sans-serif; font-weight: 900;
  font-size: 240px; line-height: 0.8; font-style: italic;
  color: rgba(255,255,255,0.12);
  pointer-events: none;
}
.atl-cs-hero__eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 20px; position: relative;
}
.atl-cs-hero__eyebrow .sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
}
.atl-cs-hero__brand {
  font-family: 'Figtree', sans-serif; font-weight: 900;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 10px; position: relative;
}
.atl-cs-hero__headline {
  font-family: 'Figtree', sans-serif; font-weight: 600;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.22; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.95);
  max-width: 32ch; margin: 0 0 28px; position: relative;
}
.atl-cs-hero__headline em { font-style: italic; }
.atl-cs-hero__meta {
  display: flex; gap: 30px; flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.25);
  position: relative;
}
.atl-cs-hero__meta-item { display: flex; flex-direction: column; gap: 4px; }
.atl-cs-hero__meta-item .lbl {
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.65); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.atl-cs-hero__meta-item strong {
  font-family: 'Figtree', sans-serif;
  font-size: 16px; font-weight: 700;
}

/* metrics */
.atl-cs-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 40px 48px; gap: 0;
  border-bottom: 2px solid var(--ink);
}
.atl-cs-metric {
  display: flex; flex-direction: column; gap: 8px;
  padding-right: 24px;
  border-right: 1px solid rgba(3,15,46,0.14);
}
.atl-cs-metric:last-child { border-right: none; }
.atl-cs-metric__val {
  font-family: 'Figtree', sans-serif; font-weight: 900;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--_accent, var(--blue));
}
.atl-cs-metric__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* body */
.atl-cs-body { padding: 48px 48px 20px; }
.atl-cs-section { margin-bottom: 42px; }
.atl-cs-section h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--_accent, var(--blue));
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(3,15,46,0.18);
}
.atl-cs-section p {
  font-family: 'Figtree', sans-serif;
  font-size: 16.5px; line-height: 1.62;
  color: var(--ink-soft); max-width: 64ch; margin: 0;
}

/* clients */
.atl-cs-clients { display: flex; flex-wrap: wrap; gap: 8px; }
.atl-cs-clients span {
  padding: 6px 14px;
  border: 1.5px solid rgba(3,15,46,0.18);
  border-radius: 100px;
  font-family: 'Figtree', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.atl-cs-clients span:hover {
  background: var(--_accent, var(--blue));
  border-color: var(--_accent, var(--blue));
  color: #fff;
}

/* deliverables list */
.atl-cs-samples {
  padding: 24px 48px 56px;
  border-top: 1px solid rgba(3,15,46,0.12); margin-top: 8px;
}
.atl-cs-samples h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--_accent, var(--blue)); margin: 0 0 18px;
}
.atl-cs-samples ul { list-style: none; margin: 0; padding: 0; }
.atl-cs-samples li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(3,15,46,0.18);
  font-family: 'Figtree', sans-serif;
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink);
  transition: padding 0.3s ease, color 0.3s;
}
.atl-cs-samples li::before {
  content: "→";
  color: var(--_accent, var(--blue));
  flex-shrink: 0; font-size: 16px; margin-top: 3px;
  transition: transform 0.3s ease;
}
.atl-cs-samples li:hover { padding-left: 8px; color: var(--_accent, var(--blue)); }
.atl-cs-samples li:hover::before { transform: translateX(4px); }

/* CTA */
.atl-cs-cta {
  padding: 32px 48px 48px;
  background: var(--bg-warm);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  border-top: 2px solid var(--ink);
}
.atl-cs-cta p {
  font-family: 'Figtree', sans-serif; font-weight: 800;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.15;
  max-width: 32ch; margin: 0; letter-spacing: -0.02em;
}
.atl-cs-cta p em { font-style: italic; color: var(--_accent, var(--blue)); }
.atl-cs-cta__btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-radius: 100px;
  background: var(--ink); color: #fff; border: 0;
  font-family: 'Figtree', sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
.atl-cs-cta__btn:hover { background: var(--_accent, var(--blue)); transform: translateY(-2px); }
.atl-cs-cta__btn svg { width: 18px; height: 18px; }

/* footer nav */
.atl-modal__foot {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 22px 28px 28px;
  border-top: 2px solid var(--ink);
  background: var(--bg);
}
.atl-modal__foot-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: 1.5px solid rgba(3,15,46,0.16);
  border-radius: 16px; color: var(--ink);
  text-align: left; cursor: pointer; min-width: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.atl-modal__foot-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.atl-modal__foot-btn--prev { justify-self: start; }
.atl-modal__foot-btn--next { justify-self: end; flex-direction: row-reverse; text-align: right; }
.atl-modal__foot-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.3s ease; }
.atl-modal__foot-btn--prev:hover svg { transform: translateX(-3px); }
.atl-modal__foot-btn--next:hover svg { transform: translateX(3px); }
.atl-modal__foot-btn > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.atl-modal__foot-btn .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.3s;
}
.atl-modal__foot-btn:hover .lbl { color: rgba(254,251,246,0.6); }
.atl-modal__foot-btn strong {
  font-family: 'Figtree', sans-serif; font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.atl-modal__foot-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); white-space: nowrap;
}

@media (max-width: 640px) {
  .atl-modal__bar { padding: 12px 16px; gap: 8px; }
  .atl-modal__close-label { display: none; }
  .atl-cs-hero { padding: 44px 24px 32px; }
  .atl-cs-hero__bignum { font-size: 160px; right: -16px; }
  .atl-cs-metrics { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
  .atl-cs-metric { border-right: none; border-bottom: 1px solid rgba(3,15,46,0.12); padding: 0 0 20px; }
  .atl-cs-metric:last-child { border-bottom: none; padding-bottom: 0; }
  .atl-cs-body, .atl-cs-samples, .atl-cs-cta { padding-left: 24px; padding-right: 24px; }
  .atl-modal__foot { grid-template-columns: 1fr 1fr; padding: 16px 20px 24px; }
  .atl-modal__foot-hint { display: none; }
  .atl-modal__foot-btn { padding: 10px 12px; gap: 8px; }
  .atl-modal__foot-btn strong { font-size: 14px; max-width: 100px; }
}


/* ===================================================================
   CASE-STUDY IMAGE GALLERY — folder-driven scroll strip (self-hiding)
   Injected into the ATL · BTL · TTL case-study pop-up by script.js.
   Sits in the modal's normal flow; appears only when a folder has images.
   =================================================================== */
.atl-cs-gallery { margin: 8px 0 4px; }
.atl-cs-gallery__h{
  font-family:'Figtree',sans-serif;
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; color:var(--orange); margin:0 0 14px;
}
.csflow{ position: relative; }
.csflow__track{
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.csflow__track::-webkit-scrollbar{ height: 8px; }
.csflow__track::-webkit-scrollbar-thumb{ background: rgba(3,15,46,0.25); border-radius: 999px; }
.csflow__slide{
  flex: 0 0 100%; scroll-snap-align: center; margin: 0;
  border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 8px 24px rgba(2,9,29,0.18);
}
.csflow__slide img{
  display: block; width: 100%; height: clamp(220px, 42vh, 420px);
  object-fit: cover;
}
.csflow__btn{
  position: absolute; top: calc(50% - 5px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--bg); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 0.2s ease, color 0.2s ease;
}
.csflow__btn:hover{ background: var(--orange); color: #fff; }
.csflow__btn svg{ width: 20px; height: 20px; }
.csflow__btn--prev{ left: 10px; }
.csflow__btn--next{ right: 10px; }
.csflow__count{
  font-family:'JetBrains Mono',monospace; font-size: 13px; letter-spacing: 0.08em;
  color: var(--ink-soft); text-align: center; margin-top: 10px;
}
@media (max-width: 640px){
  .csflow__btn{ width: 38px; height: 38px; }
}


/* ===================================================================
   LEAD CAPTURE MODAL ("Start a brief")  — Un-herd themed
   Opened by any [data-lead-open] trigger; posts to submit.php.
   =================================================================== */
body.lead-locked { overflow: hidden; }

.lead-modal{
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.lead-modal.is-open{ opacity: 1; visibility: visible; }
.lead-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(2,9,29,0.74);
}
.lead-modal__panel{
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(2,9,29,0.45);
  padding: 36px 34px 30px;
  transform: translateY(24px) scale(.98);
  opacity: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.lead-modal.is-open .lead-modal__panel{ transform: translateY(0) scale(1); opacity: 1; }

.lead-modal__close{
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.lead-modal__close:hover{ background: var(--ink); color: var(--bg); }
.lead-modal__close svg{ width: 14px; height: 14px; }

.lead-modal__eyebrow{ display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.lead-modal__eyebrow-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--orange); display: inline-block; }
.lead-modal__eyebrow .mono{ font-family:'JetBrains Mono',monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.lead-modal__title{
  font-family:'Figtree',sans-serif; font-weight: 800;
  font-size: clamp(26px, 4vw, 34px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 8px;
}
.lead-modal__title em{ font-style: italic; color: var(--orange); }
.lead-modal__sub{ font-family:'Figtree',sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 22px; }

.lead-form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-form__field{ margin-bottom: 16px; }
.lead-form__label{ display: block; font-family:'Figtree',sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 7px; }
.lead-form__input, .lead-form__select, .lead-form__textarea{
  width: 100%; box-sizing: border-box;
  font-family:'Figtree',sans-serif; font-size: 15px; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 8px;
  padding: 12px 14px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lead-form__textarea{ resize: vertical; min-height: 84px; }
.lead-form__input:focus, .lead-form__select:focus, .lead-form__textarea:focus{
  border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,116,46,0.18);
}
.lead-form__input::placeholder, .lead-form__textarea::placeholder{ color: rgba(3,15,46,0.4); }
.lead-form__field.is-invalid .lead-form__input,
.lead-form__field.is-invalid .lead-form__select,
.lead-form__field.is-invalid .lead-form__textarea{ border-color: #d8362f; box-shadow: 0 0 0 3px rgba(216,54,47,0.16); }
.lead-form__error{ display: block; min-height: 14px; font-family:'Figtree',sans-serif; font-size: 12px; color: #d8362f; margin-top: 5px; }

/* Honeypot — visually hidden but reachable to bots */
.lead-form__hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-form__submit{
  position: relative; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family:'Figtree',sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .01em;
  color: #fff; background: var(--orange);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 14px 24px; cursor: pointer; margin-top: 4px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.lead-form__submit:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,116,46,0.32); }
.lead-form__submit:disabled{ opacity: .8; cursor: default; transform: none; box-shadow: none; }
.lead-form__submit-arrow{ width: 16px; height: 16px; }
.lead-form__submit-spin{ display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: leadspin .7s linear infinite; }
.lead-form__submit.is-loading .lead-form__submit-label,
.lead-form__submit.is-loading .lead-form__submit-arrow{ display: none; }
.lead-form__submit.is-loading .lead-form__submit-spin{ display: inline-block; }
@keyframes leadspin{ to{ transform: rotate(360deg); } }

.lead-form__foot{ font-family:'Figtree',sans-serif; font-size: 13px; color: var(--ink-soft); text-align: center; margin: 14px 0 2px; }
.lead-form__consent{ font-family:'Figtree',sans-serif; font-size: 11px; color: rgba(3,15,46,0.5); text-align: center; margin: 0; }
.lead-form__alert{ margin-top: 14px; padding: 12px 14px; border-radius: 8px; border: 2px solid #d8362f; background: rgba(216,54,47,0.08); color: #b02a24; font-family:'Figtree',sans-serif; font-size: 14px; }

/* Success state */
.lead-modal__view--ok{ text-align: center; padding: 10px 4px 6px; }
.lead-ok__mark{
  width: 64px; height: 64px; margin: 6px auto 18px; border-radius: 50%;
  border: 3px solid var(--ink); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.lead-ok__mark svg{ width: 30px; height: 30px; }
.lead-ok__title{ font-family:'Figtree',sans-serif; font-weight: 800; font-size: 30px; color: var(--ink); margin: 0 0 8px; }
.lead-ok__title em{ font-style: italic; color: var(--orange); }
.lead-ok__sub{ font-family:'Figtree',sans-serif; font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 auto 18px; max-width: 380px; }
.lead-ok__mark-word{ font-family:'Figtree',sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.lead-ok__mark-word .em{ font-weight: 500; }
.lead-ok__mark-word .ital{ font-style: italic; }

@media (max-width: 560px){
  .lead-modal__panel{ padding: 30px 22px 24px; }
  .lead-form__row{ grid-template-columns: 1fr; gap: 0; }
}


/* ===================================================================
   PILLAR 01 -> external link (HootHoot). Whole card is clickable via a
   stretched transparent link; a small "Visit HootHoot" cue makes it
   discoverable. Pillar cards are position:sticky, so inset:0 scopes here.
   =================================================================== */
.pillar-card.pillar-linked{ cursor:pointer; }
.pillar-card.pillar-linked .pillar-link{
  position:absolute; inset:0; z-index:6;
  display:block; text-indent:-9999px; overflow:hidden;
}
.pillar-visit-cue{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  font-family:'Figtree',sans-serif; font-weight:800;
  font-size:14px; letter-spacing:0.02em;
  color:inherit; opacity:0.92;
}
.pillar-visit-arrow{ transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pillar-card.pillar-linked:hover .pillar-visit-cue{ text-decoration:underline; text-underline-offset:4px; }
.pillar-card.pillar-linked:hover .pillar-visit-arrow{ transform:translate(3px,-3px); }


/* ===================================================================
   Collapse the breathing room that used to wrap the trusted-by logos
   while that section is hidden, so the manifesto flows straight into
   "selected work". When logos are added, the loader sets
   body.has-trusted-logos and the original generous spacing returns.
   =================================================================== */
.manifesto-body{ padding-bottom:48px; }
.works-section{ padding-top:48px; }
body.has-trusted-logos .manifesto-body{ padding-bottom:120px; }
body.has-trusted-logos .works-section{ padding-top:96px; }


/* ===================================================================
   CONTACT STRIP — make the 4-up grid responsive. The grid columns are
   set inline (repeat(4,1fr)); these overrides collapse it to 2-up on
   tablets/phones so the cards don't get crushed or overflow.
   =================================================================== */
@media (max-width: 760px){
  .cta-section .contact-strip{
    grid-template-columns:repeat(2,1fr) !important;
    gap:30px 22px !important;
    padding-top:36px !important;
    margin-top:36px !important;
  }
}
@media (max-width: 380px){
  .cta-section .contact-strip{ grid-template-columns:1fr !important; }
}


/* ===================================================================
   CONTACT CARDS — make the email / phone / linkedin read as links
   (they are real mailto:/tel:/https links) and keep them on one line
   on smaller screens.
   =================================================================== */
.cta-section .contact-card a{ text-decoration:none; }
.cta-section .contact-card a:hover,
.cta-section .contact-card a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 760px){
  .cta-section .contact-card a,
  .cta-section .contact-card p{ font-size:15px; }
}


/* ===================================================================
   CTA SECTION — ideas 2 + 4 + 5: per-word headline pop, a hand-drawn
   underline under "specific?", and a magnetic primary button. The sub,
   buttons and contact strip still fade up after the headline.
   =================================================================== */

/* idea 4 — per-word headline pop (staggered) */
.cta-section .cta-h .cta-word{ display:inline-block; opacity:0;
  transform:translateY(42px) scale(0.7) rotate(-6deg); }
.cta-section.in-view .cta-h .cta-word{
  animation:ctaWordPop 0.62s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.cta-section.in-view .cta-h .cta-word:nth-child(1){ animation-delay:0.05s; }
.cta-section.in-view .cta-h .cta-word:nth-child(2){ animation-delay:0.17s; }
.cta-section.in-view .cta-h .cta-word:nth-child(3){ animation-delay:0.29s; }
@keyframes ctaWordPop{ to{ opacity:1; transform:none; } }

/* idea 2 — hand-drawn underline under "specific?" */
.cta-section .cta-underline-word{ position:relative; display:inline-block; }
.cta-section .cta-uline{ position:absolute; left:-5%; bottom:-0.14em;
  width:110%; height:0.34em; overflow:visible; pointer-events:none; }
.cta-section .cta-uline path{ fill:none; stroke:var(--pink);
  stroke-width:8; stroke-linecap:round;
  stroke-dasharray:640; stroke-dashoffset:640; }
.cta-section.in-view .cta-uline path{ animation:ctaDraw 0.9s ease forwards 0.9s; }
@keyframes ctaDraw{ to{ stroke-dashoffset:0; } }

/* staggered entrance for the rest of the content */
.cta-section .cta-sub,
.cta-section .cta-btn-row,
.cta-section .contact-strip{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.cta-section.in-view .cta-sub{        opacity:1; transform:none; transition-delay:.34s; }
.cta-section.in-view .cta-btn-row{    opacity:1; transform:none; transition-delay:.46s; }
.cta-section.in-view .contact-strip{  opacity:1; transform:none; transition-delay:.56s; }

/* idea 5 — magnetic primary button (JS sets the transform) */
.cta-section .cta-btn-row .btn--orange{ position:relative;
  transition:transform 0.2s cubic-bezier(0.16,1,0.3,1); will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .cta-section .cta-h .cta-word{ animation:none; opacity:1; transform:none; }
  .cta-section .cta-uline path{ animation:none; stroke-dashoffset:0; }
  .cta-section .cta-sub,
  .cta-section .cta-btn-row,
  .cta-section .contact-strip{ opacity:1; transform:none; transition:none; }
}


/* ===== CTA background doodles (cool palette, behind the content) ===== */
.cta-section .cta-bg-doodle{ position:absolute; z-index:1; pointer-events:none; opacity:0;
  animation:ctaBgIn .9s ease forwards, ctaBgFloat 10s ease-in-out infinite; will-change:transform; }
.cta-section .cta-bg-doodle svg{ display:block; width:100%; height:100%; }
@keyframes ctaBgIn{ to{ opacity:.5; } }
@keyframes ctaBgFloat{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-16px) rotate(calc(var(--r,0deg) + 8deg)); } }
@media (prefers-reduced-motion: reduce){ .cta-section .cta-bg-doodle{ animation:none; opacity:.45; } }


/* ===== Metrics: balanced colourful numbers on the light background ===== */
.metrics-grid .metric:nth-child(1) .num{ color:var(--blue) !important; }
.metrics-grid .metric:nth-child(2) .num{ color:var(--green) !important; }
.metrics-grid .metric:nth-child(3) .num{ color:var(--orange) !important; }
.metrics-grid .metric:nth-child(4) .num{ color:var(--pink) !important; }
.metrics-grid .metric:nth-child(5) .num{ color:var(--ink) !important; }

.nav-btn.sky{ background:var(--sky); color:var(--ink); }

/* ════════════════════════════════════════════════════════════
   METRICS — dark theme so the flowing yellow speed-lines are visible
   (flips the section dark + recolors the dark runner/labels/dividers
   to light; numbers #3 and #5 re-tinted to read on the dark bg)
   ════════════════════════════════════════════════════════════ */
.metrics-section{ background:#0e2a26 !important; color:#fefbf6 !important; }
.metrics-h .ital{ color:var(--blue) !important; }
.metrics-section .metrics-h{ color:#fefbf6 !important; }
.metrics-grid .metric:nth-child(3) .num{ color:var(--yellow) !important; }
.metrics-grid .metric:nth-child(5) .num{ color:#fefbf6 !important; }
.metrics-section .metric .lbl{ color:#fefbf6 !important; }
.metrics-section .metric{ border-right-color:rgba(232,243,239,0.20) !important; }
.metrics-section .ground-line{
  background:repeating-linear-gradient(to right, rgba(232,243,239,0.45) 0 6px, transparent 6px 10px) !important;
}
/* recolor only the dark parts of the runner doodle to light (keeps its white + yellow accents) */
.metrics-section .runner svg [stroke="#030f2e"]{ stroke:#eaf4f0 !important; }
.metrics-section .runner svg [fill="#030f2e"]{ fill:#eaf4f0 !important; }
/* slightly stronger glow + speed-lines on the darker field */
.metrics-section .title-glow{ opacity:1; }
@media(max-width:760px){
  .metrics-section .metric{ border-bottom-color:rgba(232,243,239,0.16) !important; }
}

/* Trusted-by: bare transparent logos on the cream band — uniform height, smooth GPU scroll */
.brand-logo{ background:none !important; box-shadow:none !important; border:none !important; height:48px !important; padding:0 16px !important; }
.brand-logo img, .brand-logo svg{ max-height:40px !important; max-width:240px !important; width:auto !important; height:auto !important; object-fit:contain !important; opacity:0.95 !important; }
.logo-marquee-track{ will-change:transform !important; backface-visibility:hidden !important; }
@media(max-width:760px){
  .brand-logo{ height:38px !important; padding:0 12px !important; }
  .brand-logo img, .brand-logo svg{ max-height:30px !important; max-width:180px !important; }
}

/* Hero→cloud: keep the cloud edge pinned to the BOTTOM of the hero so the
   first screen is pure hero and the clouds only rise on scroll. JS confirms
   this (margin-top:0 !important); this is the no-JS fallback. */
.manifesto{ margin-top:0; }

/* ===================================================================
   MOBILE NAV TIGHTEN (phones ≤430px)
   Keeps the nav as a single tidy pill row — tightens gap/padding/font
   and forces button labels onto one line so "Start a brief" no longer
   wraps or clips. Larger screens are untouched.
   =================================================================== */
@media (max-width:430px){
  .nav{ top:12px; }
  .nav-inner{
    gap:4px;
    padding:6px 8px;            /* symmetric — the wordmark is hidden on phones */
    max-width:calc(100vw - 12px);
  }
  /* The "Un-herd" brand is shown large in the hero, so the tiny nav wordmark
     is dropped on phones to let the five links sit on one tidy row. */
  .nav-mark{ display:none; }
  .nav-btn{
    padding:11px 10px; /* taller tap target (~35px, matches desktop pill); horizontal unchanged so one-row fit holds */
    font-size:11px;
    white-space:nowrap; /* never break a label onto two lines */
    flex:0 0 auto;      /* keep natural width; don't squish */
  }
}

/* ===================================================================
   PRESS FEEDBACK (:active) — buttons & pills give a tactile scale-down
   on press (design-engineering: a button must feel responsive to touch).
   Honors reduced-motion.
   =================================================================== */
.btn:active,
.nav-btn:active,
.pillar-cs-btn:active,
.lead-form__submit:active,
.lead-modal__close:active,
.atl-modal__close:active{
  transform:scale(0.97);
}
@media (prefers-reduced-motion: reduce){
  .btn:active,
  .nav-btn:active,
  .pillar-cs-btn:active,
  .lead-form__submit:active,
  .lead-modal__close:active,
  .atl-modal__close:active{ transform:none; }
}

/* ===================================================================
   CONTACT STRIP — email + location as a centered, balanced pair.
   Render both values as blocks with matching line-height so the email
   <a> and the location <p> sit on the same baseline (fixes the vertical
   misalignment). Cards keep their natural width and don't stretch.
   =================================================================== */
.cta-section .contact-strip .contact-card{ flex:0 0 auto; }
.cta-section .contact-card a,
.cta-section .contact-card p{
  display:block;
  margin:0;
  line-height:1.5;
}

/* ===================================================================
   MOBILE FIXES (June 2026)
   1) Hero: hide the cursor-stamp scatter words + spotlight mask + the
      "hidden texts" hint on small screens. Their desktop-tuned percentage
      positions land on top of the hero copy on narrow viewports, making it
      look cluttered/superimposed. The signature stamp interaction stays on
      desktop (where there's a cursor and room in the margins).
   2) Pillars: drop the sticky fan-stack on small screens. Single-column
      pillar cards are taller than the viewport, so a pinned card loses its
      bottom before the next card covers it. Plain vertical flow with spacing
      shows each card in full as you scroll.
   =================================================================== */
@media (max-width:809px){
  .hero-wt, .hero-wb, .hero-sw, .hero-sm{ display:none !important; }
  .hero-hint{ display:none !important; }
  .spot-orb{ display:none !important; } /* no cursor to follow on touch — was a stray dot */

  .pillar-card{ position:relative !important; top:auto !important; margin-bottom:22px; }
  .pillar-card:last-child{ margin-bottom:0; }
}