/* ===================================================================
   Traids - 2026 Home Services Benchmark · V13
   Brand (locked): navy #233D5C · orange #E2542A · Figtree
   V13 changes vs V12:
     1. HEADER: one consistent navy gradient bar at every scroll position.
        The transparent-over-hero -> solid-white flip is gone; brand + nav
        read white everywhere. .scrolled only adds a grounding shadow.
     2. READOUT CARD: rebuilt around what the Tally survey actually measures -
        a five-stage AI-adoption distribution with a You marker (.curve) and a
        you-vs-peer-median dot plot over the survey's 1-5 pain matrix (.pains).
        The old .bars "% automated" chart is retired.
     3. SERVICES: three offerings on a 3-up grid (was four on 2x2).
     4. CLOSE: the "Five minutes now" block is centered on the light background.
   All V11/V12 content, palette, and accessibility work is otherwise preserved.
   =================================================================== */

:root{
  --navy:        #233D5C;
  --navy-deep:   #16293f;
  --navy-ink:    #0d1c2d;
  --orange:      #E2542A;  /* brand orange - accents on dark, decorative fills */
  --orange-deep: #C4401A;  /* accessible orange - white text on it = 5.13:1 (AA) */
  --orange-press:#A93513;  /* pressed / hover-darken step */
  --orange-soft: #f47a52;
  --orange-tint: #fdeee8;
  --ink:         #1d2a38;
  --muted:       #51606f;
  --line:        #e8e5dd;  /* warm hairline */
  --bg:          #ffffff;
  --bg-alt:      #f7f6f2;  /* warm chalk */
  --maxw:        1180px;
  --radius:      18px;
  --radius-sm:   10px;
  --shadow:      0 24px 60px -28px rgba(13,28,45,.45);
  --shadow-soft: 0 18px 44px -26px rgba(13,28,45,.4);
  --ease:        cubic-bezier(.16,.84,.44,1);

  /* semantic z-index scale */
  --z-hero-bg:   0;
  --z-content:   2;
  --z-hint:      3;
  --z-dots:      45;
  --z-header:    50;
  --z-skip:      60;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:72px;}
body{
  margin:0;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{line-height:1.12;margin:0 0 .5em;color:var(--navy);font-weight:800;letter-spacing:-.02em;text-wrap:balance;}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;}
h2{font-size:clamp(1.7rem,3.8vw,2.7rem);}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 1.1rem;text-wrap:pretty;}
/* links on light backgrounds use the accessible orange (bare #E2542A on white = 3.79:1, fails AA) */
a{color:var(--orange-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
strong{font-weight:700;color:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;}
.narrow{max-width:760px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* skip link - hidden until focused, then a clear pill top-left */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:var(--z-skip);
  background:var(--navy);color:#fff;font-weight:700;font-size:.95rem;
  padding:.7rem 1.2rem;border-radius:999px;
  transform:translateY(-200%);transition:transform .2s var(--ease);
}
.skip-link:focus-visible{transform:none;text-decoration:none;}

/* visible keyboard focus everywhere */
:focus-visible{outline:2px solid var(--orange-deep);outline-offset:3px;border-radius:6px;}
.btn:focus-visible{outline-offset:4px;}
/* focus target sections (script.js focuses them after in-page jumps) - no ring on
   the section itself, the jump is the feedback */
.frame:focus-visible,main:focus-visible{outline:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  text-decoration:none;line-height:1;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn--primary{background:var(--orange-deep);color:#fff;box-shadow:0 14px 30px -12px rgba(196,64,26,.7);}
.btn--primary:hover{background:var(--orange-press);box-shadow:0 18px 38px -12px rgba(196,64,26,.8);}
.btn--primary:active{background:#96300f;}
.btn--ghost{background:transparent;color:var(--navy);border-color:rgba(35,61,92,.28);}
.btn--ghost:hover{border-color:var(--navy);background:rgba(35,61,92,.04);}
.btn--lg{font-size:1.08rem;padding:1.05rem 2rem;}
.btn--sm{padding:.6rem 1.1rem;font-size:.92rem;}
/* a two-line CTA: bold action + quiet duration under it (kept ≥4.7:1 on orange-deep) */
.btn .btn-sub{display:block;font-weight:500;font-size:.78rem;opacity:.95;letter-spacing:.02em;margin-top:.18rem;}
.btn--lg{flex-direction:column;gap:0;line-height:1.15;}

/* ===================================================================
   HEADER  (V13: one consistent navy gradient, white text, at every
   scroll position - over the hero, over light sections, everywhere)
   =================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  background:linear-gradient(94deg,
    rgba(13,28,45,.96) 0%,
    rgba(22,41,63,.94) 46%,
    rgba(35,61,92,.9) 100%);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  transition:box-shadow .3s var(--ease);
  padding:.4rem 0;
}
/* once past the hero the bar earns a grounding shadow; the gradient never changes */
.site-header.scrolled{box-shadow:0 14px 34px -22px rgba(13,28,45,.75);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;}
.brand:hover{text-decoration:none;}
/* the mark's navy parts follow currentColor - white on the gradient bar */
.brand-mark{display:inline-flex;color:#fff;}
.brand-mark .mark{display:block;}
.brand-word{font-family:'Figtree',sans-serif;font-size:1.42rem;letter-spacing:-.03em;font-weight:800;color:#fff;text-transform:lowercase;}
.brand-word .wm-ai{color:var(--orange-soft);}

.nav{display:flex;align-items:center;gap:1.6rem;}
.nav a{color:rgba(255,255,255,.92);font-weight:600;font-size:.96rem;}
.nav a:hover{color:#fff;text-decoration:none;}
.nav .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.nav .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;}
/* open state: the three bars become an X */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile menu continues the header's dark surface so the bar stays one system */
.mobile-menu{
  display:none;flex-direction:column;gap:.25rem;padding:1rem 24px 1.4rem;
  background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy-ink) 100%);
  box-shadow:0 18px 38px -16px rgba(13,28,45,.6);
}
.mobile-menu a{color:rgba(255,255,255,.92);font-weight:600;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.12);}
.mobile-menu a:hover{text-decoration:none;color:var(--orange-soft);}
.mobile-menu .btn{margin-top:.8rem;border-bottom:0;color:#fff;}

/* ===================================================================
   SECTIONS as full-height panels (normal scroll - V11)
   The page scrolls normally. Each section fills the viewport so it reads as a
   panel, but nothing is locked or transformed.
   =================================================================== */
.frames{position:relative;}
.frame{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
/* clear the fixed header + give breathing room */
.frame.section{padding:clamp(92px,12vh,132px) 0 clamp(48px,7vh,84px);}

/* ---------- section dot-nav (right edge, desktop) ---------- */
.frame-dots{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:var(--z-dots);display:flex;flex-direction:column;gap:14px;align-items:center;
}
/* the [hidden] attribute must win over display:flex */
.frame-dots[hidden]{display:none;}
.frame-dots button{
  position:relative;
  width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(35,61,92,.28);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
/* invisible enlarged hit area - 11px dots are miserable click targets on their own */
.frame-dots button::before{content:"";position:absolute;inset:-8px;border-radius:50%;}
/* the section's name, revealed on hover/keyboard focus (script.js sets data-label) */
.frame-dots button::after{
  content:attr(data-label);
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-weight:600;font-size:.74rem;letter-spacing:.02em;
  color:#fff;background:rgba(13,28,45,.88);padding:.34rem .7rem;border-radius:7px;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.frame-dots button:hover::after,.frame-dots button:focus-visible::after{opacity:1;}
.frame-dots button:hover{background:rgba(35,61,92,.55);transform:scale(1.25);}
.frame-dots button.active{background:var(--orange-deep);transform:scale(1.55);}
/* when the active section is dark, flip the inactive dots to light so they stay visible */
.frame-dots.on-dark button{background:rgba(255,255,255,.32);}
.frame-dots.on-dark button:hover{background:rgba(255,255,255,.6);}
.frame-dots.on-dark button.active{background:var(--orange);}

/* ===================================================================
   HERO - dark full-bleed clip + white copy on a navy wash
   =================================================================== */
.frame--hero{padding:0;}
.hero{
  position:relative;overflow:hidden;
  background:var(--navy-ink);
  display:flex;align-items:center;
  padding:clamp(76px,11vh,104px) 0 clamp(56px,8vh,84px);
}
.hero-media{position:absolute;inset:0;width:100%;height:100%;}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:72% 38%;display:block;background:var(--navy-ink);}
/* scrim: ONE navy wash from the left carries headline contrast; the operators read
   clearly on the right; light top band under the header bar; bottom band grounds the cue. */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(13,28,45,.93) 0%,
      rgba(13,28,45,.88) 34%,
      rgba(13,28,45,.78) 50%,
      rgba(13,28,45,.74) 57%,
      rgba(13,28,45,.42) 68%,
      rgba(13,28,45,.16) 80%,
      rgba(13,28,45,.06) 92%,
      rgba(13,28,45,.14) 100%),
    linear-gradient(180deg, rgba(13,28,45,.52) 0%, rgba(13,28,45,.18) 16%, rgba(13,28,45,0) 30%),
    linear-gradient(0deg, rgba(13,28,45,.5) 0%, rgba(13,28,45,.14) 18%, rgba(13,28,45,0) 34%);
}
.hero-wrap{position:relative;z-index:var(--z-content);width:100%;}
.hero-inner{max-width:640px;}

.eyebrow{
  display:inline-block;color:var(--orange-soft);font-weight:700;font-size:.86rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;
}
.hero-title{color:#fff;margin-bottom:.45em;font-size:clamp(1.9rem,3.4vw,3rem);text-shadow:0 2px 24px rgba(13,28,45,.55);}
.hero-title .accent{color:var(--orange-soft);}
.hero-sub{
  color:rgba(255,255,255,.94);font-size:clamp(1.02rem,1.35vw,1.18rem);
  max-width:50ch;font-weight:400;line-height:1.55;margin-bottom:.7rem;
  text-shadow:0 1px 12px rgba(13,28,45,.5);
}
.hero-sub strong{color:#fff;font-weight:700;}
.hero-offer{color:rgba(255,255,255,.85);font-size:1rem;max-width:52ch;line-height:1.55;margin-bottom:1.5rem;
  text-shadow:0 1px 12px rgba(13,28,45,.5);}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.85rem;}
.hero-microcopy{color:rgba(255,255,255,.82);font-size:.93rem;font-weight:600;margin:0;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;max-width:56ch;
  text-shadow:0 1px 10px rgba(13,28,45,.5);}
.hero-microcopy a{color:var(--orange-soft);font-weight:700;}
.microcopy-sep{color:rgba(255,255,255,.45);}

/* the hero stack must FIT the viewport on shorter laptops - compact the type instead
   of letting it collide with the fixed header / scroll cue */
@media (min-width:921px) and (max-height:840px){
  .eyebrow{margin-bottom:.7rem;font-size:.8rem;}
  .hero-title{font-size:clamp(1.7rem,3vw,2.5rem);}
  .hero-sub{font-size:1rem;}
  .hero-offer{font-size:.94rem;margin-bottom:1.1rem;}
  .hero-cta{margin-bottom:.7rem;}
  .btn--lg{font-size:1rem;padding:.9rem 1.7rem;}
}

.scroll-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:var(--z-hint);
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:flex;justify-content:center;padding-top:7px;}
.scroll-hint span{width:4px;height:8px;background:rgba(255,255,255,.85);border-radius:2px;animation:scrollDot 1.8s var(--ease) infinite;}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-4px);}40%{opacity:1;}80%{opacity:0;transform:translateY(10px);}100%{opacity:0;}}

/* ===================================================================
   SECTIONS
   =================================================================== */
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;}
.section--light{background:var(--bg-alt);}
.section--accent{background:linear-gradient(135deg,var(--orange-tint) 0%,#fff6f2 100%);}
.section--dark{background:radial-gradient(120% 140% at 85% 0%,#26456a 0%,#16293f 55%,#0d1c2d 100%);color:#fff;}
.section--dark h2{color:#fff;}

.section-head{margin-bottom:2.6rem;max-width:20ch;}
.section-head--wide{max-width:24ch;}
.lede{font-size:clamp(1.06rem,1.5vw,1.26rem);color:var(--muted);line-height:1.7;max-width:64ch;}
.lede--light{color:rgba(255,255,255,.85);}
.signoff{font-weight:700;color:var(--navy);font-size:1.05rem;margin:0;}

/* ---------- WHAT THIS IS - copy left, the nine survey areas right ---------- */
.bench-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.2rem,4.5vw,4rem);align-items:start;}
.bench-copy .lede{margin-bottom:0;}
.who-note{border-top:1px solid var(--line);margin-top:1.9rem;padding-top:1.5rem;}
.who-note p:first-child{color:var(--muted);font-size:1rem;line-height:1.7;max-width:62ch;margin-bottom:1rem;}
.bench-areas-label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;}
.areas{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);}
.area{border-top:1px solid var(--line);}
.area:first-child{border-top:2px solid var(--navy);}
.area-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  background:none;border:0;padding:.72rem 0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--navy);
  transition:color .25s var(--ease);
}
.area-mark{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(35,61,92,.35);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:1.05rem;line-height:1;
  transition:transform .3s var(--ease),border-color .25s,color .25s;
}
.area:hover .area-head,.area.open .area-head{color:var(--orange-deep);}
.area:hover .area-mark,.area.open .area-mark{border-color:var(--orange-deep);color:var(--orange-deep);}
.area.open .area-mark{transform:rotate(45deg);}
/* the detail line: closed = a 0fr grid row (clips clean); hover peeks, .open pins */
.area-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease);}
.area-body > p{
  overflow:hidden;min-height:0;margin:0;padding-bottom:0;
  color:var(--muted);font-size:.95rem;line-height:1.6;max-width:52ch;
  transition:padding .38s var(--ease);
}
.area:hover .area-body,.area.open .area-body{grid-template-rows:1fr;}
.area:hover .area-body > p,.area.open .area-body > p{padding-bottom:1rem;}
.areas-hint{margin:.9rem 0 0;font-size:.86rem;font-weight:600;color:var(--muted);}

/* ---------- WHAT YOU GET - ruled blocks ---------- */
.gets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 2.2rem;}
.get{position:relative;padding-top:1.3rem;border-top:2px solid var(--navy);}
.get h3{margin-bottom:.5rem;color:var(--navy);}
.get p{color:var(--muted);font-size:.99rem;margin:0;}

/* ---------- SAMPLE READOUT (dark) - holds the merged "what you get" list ---------- */
.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center;}
.readout-copy .gets{display:flex;flex-direction:column;gap:1.15rem;margin:0;padding:0;}
.gets--dark .get,.gets--dark .get:first-child{border-top:2px solid rgba(255,255,255,.28);padding:.95rem 0 0;}
.gets--dark h3{color:#fff;margin-bottom:.35rem;}
.gets--dark .get p{color:rgba(255,255,255,.82);font-size:.95rem;}
.readout-copy .disclaimer{margin-top:1.6rem;}
.disclaimer{font-size:.86rem;color:rgba(255,255,255,.78);font-style:italic;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.7rem .9rem;margin-top:1.4rem;}
.readout-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:1.4rem 1.6rem 1.5rem;
  backdrop-filter:blur(6px);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.readout-card-head{display:flex;align-items:center;gap:.4rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:1.15rem;flex-wrap:wrap;}
.readout-card-head .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);}
.readout-tag{margin-left:auto;font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.7);text-transform:uppercase;font-weight:700;}

.readout-block{margin-bottom:1.3rem;}
.readout-block-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin:0 0 .85rem;font-size:.78rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.75);
}
.readout-qual{font-weight:600;font-size:.7rem;letter-spacing:.03em;text-transform:none;color:rgba(255,255,255,.55);}

/* -- block 1: the five-stage AI-adoption distribution (survey Q: "current use of AI") --
   --h on each column = peer share, normalized so the tallest column fills the track. */
.curve{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;align-items:end;padding-top:1.5rem;/* headroom for the You pill */}
.curve-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0;}
.curve-pct{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.75);}
.curve-track{height:64px;width:100%;display:flex;align-items:flex-end;}
.curve-bar{
  width:100%;height:var(--h);border-radius:5px 5px 2px 2px;
  background:rgba(255,255,255,.22);
  transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease);
}
.readout-card.animate .curve-bar{transform:scaleY(1);}
.readout-card.animate .curve-col:nth-child(1) .curve-bar{transition-delay:.05s;}
.readout-card.animate .curve-col:nth-child(2) .curve-bar{transition-delay:.13s;}
.readout-card.animate .curve-col:nth-child(3) .curve-bar{transition-delay:.21s;}
.readout-card.animate .curve-col:nth-child(4) .curve-bar{transition-delay:.29s;}
.readout-card.animate .curve-col:nth-child(5) .curve-bar{transition-delay:.37s;}
.curve-label{font-size:.63rem;font-weight:600;line-height:1.25;text-align:center;color:rgba(255,255,255,.62);}
.curve-col--you .curve-bar{background:linear-gradient(180deg,var(--orange-soft),var(--orange));}
.curve-col--you .curve-pct,.curve-col--you .curve-label{color:#fff;}
.curve-you{
  position:absolute;top:-1.45rem;font-size:.64rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--orange-deep);
  padding:.14rem .5rem;border-radius:999px;
}

/* -- block 2: pain scores, you vs peer median, on the survey's 1-5 scale --
   --you / --peer are (score - 1) / 4 as a percentage of the track. */
.pains{display:flex;flex-direction:column;gap:.8rem;margin-top:1.7rem;}
.pain-label{display:block;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.88);margin-bottom:.38rem;}
.pain-track{
  position:relative;height:6px;border-radius:4px;background:rgba(255,255,255,.12);
  /* quiet stops at scores 2, 3, 4 so the dots read against a scale */
  background-image:linear-gradient(90deg,
    transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.14) calc(25% - 1px), rgba(255,255,255,.14) calc(25% + 1px),
    transparent calc(25% + 1px), transparent calc(50% - 1px), rgba(255,255,255,.14) calc(50% - 1px), rgba(255,255,255,.14) calc(50% + 1px),
    transparent calc(50% + 1px), transparent calc(75% - 1px), rgba(255,255,255,.14) calc(75% - 1px), rgba(255,255,255,.14) calc(75% + 1px),
    transparent calc(75% + 1px));
  margin:0 7px; /* keep edge dots from clipping the card padding */
}
.pain-peer{
  position:absolute;top:50%;left:var(--peer);width:3px;height:15px;border-radius:2px;
  transform:translate(-50%,-50%);background:rgba(255,255,255,.85);
  box-shadow:0 0 0 1.5px rgba(13,28,45,.55);
}
.pain-you{
  position:absolute;top:50%;left:var(--you);width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  background:linear-gradient(135deg,var(--orange-soft),var(--orange));
  box-shadow:0 0 0 2px rgba(13,28,45,.6),0 2px 8px rgba(0,0,0,.4);
  transition:transform .55s var(--ease),opacity .4s var(--ease);z-index:1;
}
.readout-card.animate .pain-you{transform:translate(-50%,-50%) scale(1);opacity:1;}
.readout-card.animate .pain:nth-child(1) .pain-you{transition-delay:.4s;}
.readout-card.animate .pain:nth-child(2) .pain-you{transition-delay:.48s;}
.readout-card.animate .pain:nth-child(3) .pain-you{transition-delay:.56s;}
.readout-card.animate .pain:nth-child(4) .pain-you{transition-delay:.64s;}
.readout-card.animate .pain:nth-child(5) .pain-you{transition-delay:.72s;}
.pains-more{margin:.85rem 0 0;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.55);}

.readout-note{
  margin:0 0 .9rem;padding:.65rem .85rem;font-size:.85rem;line-height:1.5;
  color:rgba(255,255,255,.85);background:rgba(226,84,42,.12);
  border:1px solid rgba(226,84,42,.3);border-radius:var(--radius-sm);
}
.readout-note strong{color:#fff;}
.readout-foot{font-size:.78rem;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:.4rem;}
.legend-you{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--orange);}
.legend-peer{display:inline-block;width:3px;height:13px;border-radius:2px;background:rgba(255,255,255,.85);}

/* ---------- HOW TO GET IT - free (invited) vs paid paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
.path{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
}
.path-flag{
  align-self:flex-start;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--orange-deep);border-radius:999px;padding:.32rem .85rem;margin-bottom:1rem;
}
.path-flag--quiet{background:var(--navy);}
.path h3{margin-bottom:.5rem;color:var(--navy);font-size:1.32rem;}
.path p{color:var(--muted);font-size:1rem;}
.path .btn{align-self:flex-start;margin:.5rem 0 .9rem;}
.path-fine{font-size:.86rem;color:var(--muted);margin:auto 0 0;font-weight:600;}
.paths-note{margin:1.6rem 0 0;font-size:.92rem;font-weight:600;color:var(--muted);max-width:70ch;}

/* ---------- WORK WITH US (consulting, dark) ----------
   V13: three offerings on one row (workshops · strategy · build). */
.services-lede{margin-bottom:2.2rem;}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.svc{
  position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:1.5rem 1.7rem 1.6rem;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.svc:hover{
  background:rgba(255,255,255,.095);border-color:rgba(255,255,255,.26);
  transform:translateY(-3px);
}
.svc h3{color:#fff;margin:0;}
.svc-meta{color:var(--orange-soft);font-size:.8rem;font-weight:700;letter-spacing:.04em;margin:0 0 .55rem;text-transform:uppercase;}
.svc-body{color:rgba(255,255,255,.82);font-size:.95rem;margin:.75rem 0 0;line-height:1.55;}
.svc-foot{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.2rem;}
.svc-wall{flex:1;min-width:280px;color:rgba(255,255,255,.66);font-size:.9rem;margin:0;line-height:1.6;}

/* ---------- CLOSE (survey first) + EMAIL CAPTURE + end panel ----------
   V13: the whole closing block is centered on the light background. */
.frame--end{justify-content:flex-start;}
.frame--end .frame-body{flex:1;display:flex;align-items:center;width:100%;padding:clamp(92px,12vh,132px) 0 clamp(2.4rem,5vh,3.6rem);}
.end-center{text-align:center;}
.end-center .lede{margin-left:auto;margin-right:auto;}
.end-cta{margin:1.6rem 0 0;}
.end-list{border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.8rem;}
.end-list h3{color:var(--navy);margin-bottom:.4rem;}
.end-list > p{color:var(--muted);font-size:1rem;max-width:60ch;}
.end-center .end-list > p{margin-left:auto;margin-right:auto;}
.email-form{display:flex;gap:.75rem;margin-top:1.4rem;max-width:520px;flex-wrap:wrap;}
.end-center .email-form{margin-left:auto;margin-right:auto;justify-content:center;}
.email-form input[type=email]{
  flex:1;min-width:220px;font-family:inherit;font-size:1rem;padding:.95rem 1.2rem;
  border:2px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);transition:border-color .2s;
}
.email-form input[type=email]::placeholder{color:#5d6b7a;}
.email-form input[type=email]:focus{outline:none;border-color:var(--orange-deep);}
.email-form .btn{flex-shrink:0;}
.email-form .btn[disabled]{opacity:.7;cursor:default;transform:none;}
.hp{position:absolute;left:-9999px;}
.form-note{margin-top:1rem;color:#1a7a4a;font-weight:700;}
.form-note--error{color:#b3261e;}
.form-note--error a{font-weight:700;}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{background:var(--navy-ink);color:rgba(255,255,255,.72);padding:3rem 0 2.4rem;}
.footer-inner{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:baseline;justify-content:space-between;}
.footer-brand .brand-word{color:#fff;font-size:1.35rem;display:block;margin-bottom:.3rem;}
.footer-brand .brand-word .wm-ai{color:var(--orange-soft);}
.footer-brand p{margin:0;font-size:.92rem;}
.footer-brand a,.footer-fine a{color:var(--orange-soft);font-weight:600;}
.footer-fine{font-size:.84rem;max-width:46ch;margin:0;line-height:1.6;}
.footer-copy{font-size:.84rem;margin:0;color:rgba(255,255,255,.5);}

/* ===================================================================
   REVEAL / ENTRANCE  (enhancement only - content is visible without JS)
   =================================================================== */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .62s var(--ease),transform .62s var(--ease);}
.js .rise.rise-in{opacity:1;transform:none;}
.js .svc.rise,.js .path.rise,.js .readout-card.rise{transform:translateY(26px) scale(.98);}
.js .svc.rise.rise-in,.js .path.rise.rise-in,.js .readout-card.rise.rise-in{transform:none;}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:920px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{display:none;}
  .mobile-menu.open{display:flex;}
  /* the dot-nav is a desktop affordance; mobile uses the hamburger */
  .frame-dots{display:none !important;}

  .frame.section{padding:clamp(88px,13vh,120px) 0 clamp(40px,6vh,64px);}
  .hero-inner{max-width:none;}
  .hero-sub,.hero-offer{max-width:56ch;}
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(13,28,45,.85) 0%, rgba(13,28,45,.74) 40%, rgba(13,28,45,.7) 70%, rgba(13,28,45,.8) 100%);
  }

  .gets{grid-template-columns:1fr;gap:0;}
  .get{border-top:1px solid var(--line);padding:1.3rem 0;}
  .get:first-child{border-top:2px solid var(--navy);}

  .bench-grid{grid-template-columns:1fr;gap:2.2rem;}
  .readout-grid{grid-template-columns:1fr;gap:2.2rem;}
  .paths{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;gap:.8rem;}
  .svc{padding:1.25rem 1.3rem 1.35rem;}
}
@media (max-width:560px){
  .btn--lg{width:100%;}
  .email-form{flex-direction:column;}
  .email-form .btn{width:100%;}
  .hero-cta{gap:.75rem;}
  .path .btn{align-self:stretch;}
  .readout-tag{margin-left:0;flex-basis:100%;order:3;margin-top:.5rem;}
  .readout-card{padding:1.2rem 1.1rem 1.3rem;}
  .curve{gap:.35rem;}
  .curve-label{font-size:.58rem;}
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .js .rise,.js .rise.rise-in{opacity:1 !important;transform:none !important;transition:none;}
  .curve-bar{transform:scaleY(1) !important;transition:none !important;}
  .pain-you{left:var(--you) !important;transition:none !important;}
  .scroll-hint{display:none;}
  html{scroll-behavior:auto;}
  .area-body,.area-body>p,.svc,.svc-body{transition:none !important;}
}