/* ═══════════════════════════════════════════════════════════
   home.css: Homepage-only styles. Loaded conditionally
   by header.php when $bodyClass === 'page-home'.
   ═══════════════════════════════════════════════════════════ */

/* Homepage: no divider line under the navbar — it sits flush against the page,
   matching every other page. The 2px transparent border keeps the header
   height identical whether the drawer is open or closed. */
.page-home #navbar{border-bottom:2px solid transparent;}

/* ── HERO · a single full-bleed photo (desktop) / video (mobile) with the
   headline overlaid low in the frame. Dark theme. ── */
/* .hero-stack wraps #hero + #mission for CARD-STACK A: #hero scrolls normally
   while #mission slides UP over it (the "eat", driven by js/site.js #8). Must
   NOT clip overflow, so the sticky children can pin. */
.hero-stack{position:relative}


.page-home #hero{
  /* Hero scrolls up NORMALLY (no pin) while #mission eases up and overlaps its
     bottom edge (the subtle card-glide). A gentle parallax on the hero's inner
     content (js/site.js #8) makes it linger slightly as it leaves. */
  position:relative;
  display:flex;align-items:flex-end;       /* heading sits low in the frame (lifted off the bottom, below centre) */
  min-height:100vh;            /* fallback for browsers without svh (older iOS/Chrome) */
  min-height:100svh;
  padding:0 0 clamp(96px,17vh,200px);
  overflow:hidden;
  background:#1A1A2E;                         /* fallback behind the photo */
  z-index:0;
}

/* Desktop: anchor the heading in the BOTTOM-LEFT corner (Eddie 2026-07-09).
   Two parts: (1) sit low but not slammed to the bottom, and (2) break out of the
   centred 1240 column so the heading hugs the LEFT edge (the nav keeps its own
   centred position). Mobile is untouched (this override is desktop-only). */
@media (min-width:900px){
  .page-home #hero{ padding-bottom:clamp(80px,10vh,140px); }
  .page-home #hero .hero-card{ max-width:none; margin:0; padding-left:clamp(40px,4.5vw,84px); }
}

/* Full-bleed background photo. overflow:hidden here too so the mobile scale(1.26)
   is clipped at the image's own box (iOS belt-and-braces). */
.hero-bg{position:absolute;inset:0;z-index:0;display:block;margin:0;overflow:hidden}
.hero-bg .hero-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;   /* show lower part → subject/hands sit higher, clear of the heading */
}
/* Background layers: photo (desktop) + video (mobile only). Both fill .hero-bg so
   the linger parallax (site.js #8, which moves .hero-bg) carries whichever shows. */
.hero-photo,.hero-video,.hero-video-desktop{position:absolute;inset:0;width:100%;height:100%}
.hero-video{object-fit:cover;object-position:50% 50%;display:none}   /* desktop hides it; the @media below shows it on phones */
/* Desktop hero video sits over .hero-photo. Stays hidden until js/site.js reveals
   it (desktop + motion only), so no-JS / reduced-motion keep the still photo. */
.hero-video-desktop{object-fit:cover;object-position:50% 50%;display:none;opacity:0;transition:opacity .6s ease}
.hero-video-desktop.is-playing{opacity:1}   /* js/site.js adds .is-playing on the 'playing' event, so the clip FADES in over the still photo instead of a hard snap */

/* Dark scrim for legibility — stronger at the bottom (behind the text) and a
   touch on the left, lighter up top so the photo still reads. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,6,20,0.30) 0%, rgba(8,6,20,0) 24%, rgba(8,6,20,0) 44%, rgba(8,6,20,0.55) 82%, rgba(8,6,20,0.80) 100%),
    linear-gradient(90deg, rgba(8,6,20,0.40) 0%, rgba(8,6,20,0) 60%);
}

/* Overlaid content — same unified 1240 content box as every section. */
.hero-card{
  position:relative;z-index:2;
  width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(28px,3vw,32px);
}
.hero-body{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(28px,4vw,40px);
}
.hero-h1{
  color:#fff;margin:0;
  font-size:var(--text-h2);   /* match the h2 / section-title size */
  line-height:1.05;letter-spacing:-0.02em;
  max-width:20ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,0.35);
}
/* Desktop: cap the width so the headline balances to exactly two lines
   (overrides the site-wide one-line/nowrap heading rule for the hero only).
   Mobile keeps its natural wrap at the current size. */
@media(min-width:861px){
  .hero-h1{white-space:normal;max-width:30ch;}
}
/* "Technology" + "people" fade white→magenta→pink (the dark-background grade,
   adapted from the old black→magenta which only worked on white). */
.hero-grad-word{
  background:linear-gradient(96deg, #fff 0%, #fff 22%, #CE00B8 66%, #F06FD6 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ── Phone (≤767px): full-width heading, photo framed a touch higher
   so faces stay visible above the bottom scrim. ── */
@media (max-width:767px){
  .hero-h1{max-width:none;}
  /* Full image height is shown on phones (sides crop), so object-position can't
     move it vertically — a small zoom anchored to the bottom lifts the subject
     and hands up, above the heading, leaving floor behind the text. */
  .hero-bg .hero-img{object-position:50% 50%;transform:scale(1.26);transform-origin:50% 100%;}
  /* Phones swap the photo for the autoplay hero video. */
  .hero-photo{display:none}
  .hero-video{display:block}
}

/* Entrance: the heading fades up. */
.hero-body{
  opacity:0;transform:translateY(14px);
  animation:heroTextIn 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.25s both;
}
@keyframes heroTextIn{
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-body{ animation:none;opacity:1;transform:none; }
}


/* ─────────────────────────────────────────────────────────
   MISSION  ·  .hm-mission
   Simon's mission statement as its own section, placed right after the
   hero. It is the 2nd section and the one the hero glides up over (the "eat"),
   so it is full-height and z-indexed above #hero. LEFT-aligned (Eddie) like the
   rest of the home page: eyebrow chip, display statement, supporting prose.
   ───────────────────────────────────────────────────────── */
.hm-mission{
  position:sticky; top:calc(100svh - 1028px); z-index:1;   /* PINS on its LAST screen: the negative offset (viewport minus the section's own height, ~1028px on phones) lets you scroll through the whole mission first, then it freezes on the last paragraph while #tech-teaser (z-index:2) slides UP over it. Above the hero (z-index:0) so it covers the hero as it enters. */
  background:#fff;                         /* opaque, so it fully covers whatever is behind it */
  min-height:100svh;                       /* one screen tall */
  display:flex; align-items:center;
  padding:var(--sec-pt) 0;
}
/* Desktop: the mission fits in one screen (short, centred), so pin it flush at the
   top, no scroll offset needed. Phones keep the offset above because the copy is
   taller than the screen there. */
/* Desktop (>=900px): the card-stack still runs (mission pins, the next cards slide
   up over it), same as phone/tablet. Only difference: the mission bar is a static
   full gradient here (no scroll-fill), per Eddie. */
@media(min-width:900px){
  .hm-mission{ top:0 }
  .hm-mission-body{ --mission-fill:100% }
}
/* Two columns on desktop: heading + accent rule (left), the paragraphs (right).
   Stacks to one column on phones. The whole grid is vertically centred in the
   full-height section by the .hm-mission flex above. */
.hm-mission-inner{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
}
.hm-mission-head{ min-width:0; }
.hm-mission-statement{
  margin:clamp(16px,2.2vw,24px) 0 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.7rem,1rem + 2.2vw,2.8rem);
  line-height:1.16;
  letter-spacing:-0.025em;
  color:var(--text);
}
.hm-mission-statement em{
  font-style:normal;
  /* Same "cells" gradient as the tech-teaser heading (.tm-head .g): dark, with pink at the end. */
  background:linear-gradient(96deg,#1A1A2E 0%,#1A1A2E 22%,#CE00B8 66%,#F06FD6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Box 1: short gradient accent rule, tucked right under the heading. */
.hm-mission-rule{
  display:block;width:64px;height:3px;border-radius:2px;
  margin-top:clamp(22px,2.6vw,30px);
  background:var(--btn-gradient);
}
/* Right column: paragraphs, each with a soft magenta side-bar. */
.hm-mission-body{
  position:relative;
  display:flex; flex-direction:column; gap:clamp(18px,2vw,24px); min-width:0;
  padding-left:clamp(18px,1.6vw,24px);
}
/* ONE continuous gradient line down the whole column (magenta to purple, matching
   the heading rule), instead of a separate chopped bar per paragraph. */
/* Scroll-fill progress bar (Eddie): ::before is the faint track, ::after is the
   brand-gradient fill that grows top to bottom as you scroll through the mission
   (its height is driven by --mission-fill, set in js/site.js). */
.hm-mission-body::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; border-radius:2px;
  background:rgba(26,26,46,.12);
}
.hm-mission-body::after{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg,#CE00B8 0%,#7B2FBE 100%);
  clip-path:inset(0 0 calc(100% - var(--mission-fill,0%)) 0);
  transition:clip-path .12s linear;
}
.hm-mission-p{
  margin:0;
  font-family:var(--font-prose);
  font-size:var(--body-size);
  line-height:var(--body-line);
  color:var(--body-color);
}
.hm-mission-p--lead{ font-weight:600; }                 /* Box 2: first paragraph bolder */
/* Box 3: soft underlined link to the practitioners page (same text colour). */
.hm-mission-link{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.hm-mission-link:hover{ text-decoration-color:var(--accent); }
/* Phones (max-width 860px): single column, stacked. */
@media (max-width:860px){
  .hm-mission-inner{ grid-template-columns:1fr; gap:clamp(26px,5vw,34px); }
}

/* Section dividers between adjacent light sections use the global
   .section-divider class (see base.css). */


/* ═══════════════════════════════════════════════════════════
   #testimonials — practitioner carousel (Section 2)

   Single-card, fully contained in the viewport on every device.
   Direction-aware slide (←/→) + per-element stagger on entry.

   Breakpoint 1100px: below this, arrows sit inline with dots.
   Above, arrows float to the section edges; card stays centred.
   ═══════════════════════════════════════════════════════════ */

.testi{
  background:#FFFFFF;
  padding:clamp(56px,8vw,88px) 0;
  /* z-2 so it covers the still-pinned #outcomes (z-1) as the card-stack
     releases — otherwise a sliver of its background shows in the seam. */
  position:relative;z-index:2;
}

/* ── Section CTA ── black button, white label, accent-pink arrow — mirrors the
   mobile-menu "Book a Demo" treatment. */
.testi-cta-wrap{display:flex;justify-content:center;margin-top:clamp(34px,5vw,50px);padding:0 24px}
.testi-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 30px;
  background:#000;color:#fff;text-decoration:none;
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:0.20em;text-transform:uppercase;
  transition:opacity .2s ease,transform .2s ease;
}
.testi-cta:hover{opacity:0.92;transform:translateY(-1px)}

/* ── Stage: a transform-driven drag carousel with side peeks (shared engine,
   swipe.js). .testi-viewport is the overflow-hidden window; .testi-stage is the
   flex track the engine translates. The slimmer card width lets the next
   testimonial peek in at the edge. carousel.js syncs the dots + auto-advance. ── */
.testi-viewport{overflow:hidden}
.testi-stage{
  display:flex;align-items:stretch;gap:16px;
  padding:6px 0;
  will-change:transform;   /* the engine animates translate3d on this element */
}

/* Section header — reuses the .po-head pattern (two-dash eyebrow + heading +
   hairline) and adds a section number top-right, matching the other sections. */
.testi-head-wrap{max-width:1240px;margin:0 auto clamp(36px,5vw,52px);padding:0 clamp(28px,3vw,32px)}
.testi-head{position:relative;margin-bottom:0}
/* Wrapper holds the stage + the desktop side-arrows. */
.testi-stage-wrap{position:relative;max-width:1000px;margin:0 auto}

/* Side arrows — circle-less chevrons (consistent with the Breakthroughs
   arrows). Hidden on touch/mobile (swipe + dots); shown ≥769px, where a mouse
   can't swipe. */
.testi-arrow{
  display:none;
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;padding:0;
  border:none;background:transparent;color:var(--text);cursor:pointer;
  place-items:center;
  transition:color .2s ease,transform .2s ease;
}
.testi-arrow svg{width:26px;height:26px}
.testi-arrow:hover{color:var(--magenta);transform:translateY(-50%) scale(1.12)}
.testi-arrow-prev{left:clamp(0px,1.5vw,16px)}
.testi-arrow-next{right:clamp(0px,1.5vw,16px)}

/* ── Card ── */
.testi-slide{
  flex:0 0 auto;
  width:min(560px,80vw);
  -webkit-user-select:none;user-select:none;   /* a drag on the quote text moves the track, never selects */
  background:#fff;
  border:1px solid rgba(22,20,15,0.10);
  border-radius:6px;
  padding:44px 48px 36px;
  box-sizing:border-box;
  min-height:360px;
  display:flex;flex-direction:column;gap:24px;
}

/* ── Quote glyph ── */
.testi-quotemark{
  font-family:var(--font-display);
  font-weight:300;color:var(--text);   /* was 350, a weight never loaded (only 300/500/600/700 are); this already rendered as 300 */
  font-size:84px;line-height:0.75;margin-bottom:-8px;
}
.testi-role{
  font-family:var(--font-body);
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--text);
}
.testi-quote{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;line-height:1.55;font-weight:400;
  color:var(--text);text-wrap:pretty;
}
.testi-cite-row{
  margin-top:auto;
  display:flex;align-items:center;justify-content:flex-start;
  gap:14px;padding-top:8px;min-width:0;
}
.testi-portrait{
  position:relative;
  width:56px;height:56px;border-radius:50%;
  overflow:hidden;flex-shrink:0;          /* plain circular photo — no ring */
}
.testi-portrait img{
  position:absolute;inset:0;
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;          /* full colour; covers the fallback once loaded */
}
/* Initials placeholder shown until a portrait photo is added (the <img> sits on
   top and hides this; onerror removes a broken <img> so this shows through). */
.testi-portrait-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F4E9F2,#EAD8E6);
  font-family:var(--font-display);font-weight:400;font-size:16px;
  color:var(--accent);letter-spacing:0.02em;
}
.testi-cite-text{
  display:flex;flex-direction:column;gap:2px;
  text-align:left;min-width:0;flex:1 1 auto;
}
.testi-cite-name{
  font-family:var(--font-body);
  font-size:14.5px;font-weight:500;
  color:var(--text-primary,#1A1A2E);line-height:1.3;letter-spacing:0.01em;
  text-wrap:balance;
}
.testi-cite-meta{
  font-family:var(--font-body);
  font-size:13px;color:var(--text-primary,#1A1A2E);line-height:1.35;
}
/* Instagram handle — magenta with an underlined handle, matching the
   case-study citation (.cases-cite-ig). */
.testi-cite-ig{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;width:fit-content;
  font-family:var(--font-body);font-size:13px;font-weight:500;
  color:var(--accent);text-decoration:none;
  letter-spacing:0.01em;line-height:1;
  transition:opacity .18s ease;
}
.testi-cite-ig span{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
}
.testi-cite-ig:hover{opacity:0.78}
.testi-cite-ig svg{width:14px;height:14px;flex-shrink:0;display:block;color:var(--accent)}

/* ── Controls: a slim auto-advance progress bar stacked above the dots ── */
.testi-controls{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;margin-top:28px;padding:0 24px;
}

/* Auto-advance track — a centered hairline; the fill sweeps left→right over
   one card's display time, then carousel.js steps to the next card. */
.testi-progress{
  width:min(240px,56vw);height:2px;
  background:rgba(26,26,46,0.14);
  border-radius:2px;overflow:hidden;
}
.testi-progress-fill{
  --testi-dur:5000ms;
  display:block;height:100%;width:100%;
  background:var(--magenta);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;   /* scaleX → GPU-cheap, no layout */
}
/* JS adds .is-running to (re)start the sweep; it toggles animation-play-state
   to pause/resume on hover, focus, off-screen, or a hidden tab. */
.testi-progress-fill.is-running{
  animation:testiProgressFill var(--testi-dur) linear forwards;
}
@keyframes testiProgressFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.testi-dots-row{display:flex;align-items:center;justify-content:center;gap:10px}
.testi-dots{display:flex;align-items:center;gap:10px}
/* Pause/play toggle, merged into the dots row (no border, blends in until you
   look for it) so stopping the auto-advance doesn't need a new visual element. */
.testi-pause{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:0;background:transparent;
  color:var(--muted);cursor:pointer;flex:none;
  transition:color .2s ease;
}
.testi-pause:hover,.testi-pause:focus-visible{color:var(--accent)}
.testi-pause svg{width:12px;height:12px}
.testi-pause[hidden]{display:none}   /* the class's own display:inline-flex would otherwise beat [hidden] */
.testi-dot{
  width:8px;height:8px;border-radius:4px;
  background:rgba(26,26,46,0.60);   /* 4.5:1 on white, clears the WCAG 3:1 minimum for controls */
  border:none;padding:0;cursor:pointer;
  transition:width .32s ease,background .32s ease;
}
.testi-dot.is-active{width:28px;background:var(--text)}
/* WCAG 2.5.8 (AA) — give the tiny carousel pips a 24x24 clickable area via an
   invisible centered pseudo-element. Visible pip size & the row layout are
   unchanged; only the hit target grows. Applies to all three dot styles. */
.testi-dot,.cases-dot,.po-seg{position:relative}
.testi-dot::after,.cases-dot::after,.po-seg::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;
}

/* ═══ Responsive ═══ */
@media (max-width:1099px){
  .testi-slide{padding:32px 28px 28px;min-height:300px}
  .testi-quotemark{font-size:64px}
  .testi-quote{font-size:16px}
}
/* Mobile peek carousel: inset the track so the FIRST and LAST cards don't sit
   flush against the screen edges (centred middle cards already get breathing room
   from their peeks). Card width is unchanged, so the peek stays exactly the same. */
@media (max-width:768px){
  .testi-stage{padding-left:clamp(20px,5vw,28px);padding-right:clamp(20px,5vw,28px)}
}
/* iPhone-narrow guardrails (≤380px) */
@media (max-width:380px){
  .testi-slide{padding:28px 22px 24px}
  .testi-cite-row{gap:10px}
  .testi-portrait{width:48px;height:48px}
  .testi-cite-name{font-size:13.5px}
  .testi-cite-meta{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  /* No auto-advance for reduced-motion users, so the progress track is noise. */
  .testi-progress{display:none}
}

/* Desktop (≥769px): one centered card + side arrows (no peek). The viewport is
   the 640px window; the track holds full-width cards. Placed after the base +
   mobile rules so it wins the cascade for the card width. */
@media (min-width:769px){
  .testi-arrow{display:grid}
  .testi-viewport{max-width:640px;margin:0 auto}
  .testi-slide{width:100%}
}

/* ═══════════════════════════════════════════════════════════
   Section 3 — Case Studies / Cinema Reel
   Namespaced under .cases / cases-* — no collisions with
   the rest of home.css. Mirrors the same type system and
   magenta token vocabulary as the testimonials section.
   ═══════════════════════════════════════════════════════════ */

.cases{
  /* Stories section. It is the LAST card in the merged stack, so it must sit on
     top of every earlier pinned card. #tech-teaser freezes at z-index:2 and stays
     frozen (sticky) until the whole stack ends, i.e. right through this section;
     z-index:4 (opaque white) covers it so the stories are never hidden behind the
     frozen tech card on any screen size. On phone/tablet .cases also pins/slides
     (max-width:899px block below); on desktop it just scrolls, still on top.   */
  background:#fff;
  padding:var(--sec-pt) 0 var(--sec-pb);
  position:relative;
  z-index:4;
}
.cases-container{max-width:1240px;margin:0 auto;padding:0 clamp(28px,3vw,32px)}

/* ── Header ── */
.cases-head{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  justify-items:center;   /* centre the eyebrow+heading (desktop; phone resets to left below) */
  gap:14px;
  margin-bottom:clamp(18px,2.5vw,26px);   /* line → intro (intro now sits below the rule) */
  border-bottom:1px solid rgba(22,20,15,0.08);
  padding-bottom:clamp(28px,3vw,32px);
  text-align:center;
}
.cases-eyebrow-block{display:flex;flex-direction:column;gap:14px;align-items:center}
.cases-intro-heading{
  color:var(--text-primary, #1A1A2E);
}
.cases-intro-text{
  /* Standardized to match .po-intro-text: a LEFT-aligned 60ch block. */
  margin:0 0 clamp(28px,4vw,44px);max-width:60ch;
  font-family:var(--font-body);font-weight:var(--body-weight);
  font-size:var(--body-size);line-height:1.6;color:var(--body-color);
  text-align:left;
}

/* ── Reel: hero video + meta sidecar ── */
.cases-reel{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:clamp(24px,3vw,40px);
  margin-bottom:clamp(28px,3.5vw,44px);
  align-items:stretch;
}

/* ── Hero video frame ── */

/* ── Case-study hero: poster → click → SproutVideo iframe ──────────────
   The hero button holds the gradient + real poster + play/coming-soon.
   The iframe (when playing) mounts into .cases-hero-embed, which overlays
   the same grid cell. */
.cases-reel{position:relative}

/* Real SproutVideo poster covering the hero box */
.cases-hero-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;
}

/* Play button only when the active case has a video */
.cases.is-soon .cases-hero-play{display:none}
.cases.has-video .cases-hero-play{display:inline-flex}

/* Coming-soon overlay only when the active case has no video */
.cases-hero-soon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.86);
  padding:10px 18px;border:1px solid rgba(255,255,255,0.4);border-radius:100px;
  background:rgba(0,0,0,0.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;
}
.cases.is-soon .cases-hero-soon{display:block}
.cases.is-soon .cases-hero{cursor:default}

/* Iframe mount: overlays the hero cell only while playing */
.cases-hero-embed{
  grid-column:1;grid-row:1;
  position:relative;align-self:start;
  width:100%;aspect-ratio:16/9;
  border-radius:6px;overflow:hidden;
  background:#0D0D1A;
  z-index:3;
  display:none;
}
.cases.is-playing .cases-hero-embed{display:block}
.cases.is-playing .cases-hero{display:none}   /* hide poster/button while playing */
.cases-hero-embed .cases-hero-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

.cases-hero{
  position:relative;
  display:block;
  width:100%;
  align-self:start;        /* Safari: a stretched grid item ignores aspect-ratio and
                              collapses to 0 height (all children are absolute). Opting
                              out of the stretch lets it size from width via aspect-ratio. */
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  background:#0D0D1A;
  cursor:pointer;
  isolation:isolate;
}

.cases-hero-video{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 30% 28%, rgba(206,0,184,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 70%, rgba(123,47,190,0.32) 0%, transparent 55%),
    linear-gradient(135deg, #180A2E 0%, #0A0518 100%);
  transition:opacity .45s ease, transform .55s cubic-bezier(0.2,0.7,0.2,1), filter .45s ease;
}
.cases-hero-video::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.6) 100%);
}

/* Per-slide tints */
.cases[data-active="1"] .cases-hero-video{background:radial-gradient(ellipse at 30% 28%, rgba(206,0,184,0.30) 0%, transparent 55%), radial-gradient(ellipse at 72% 70%, rgba(217,69,116,0.22) 0%, transparent 55%), linear-gradient(135deg,#1F0815 0%, #0A0510 100%)}
.cases[data-active="2"] .cases-hero-video{background:radial-gradient(ellipse at 30% 28%, rgba(86,134,255,0.22) 0%, transparent 55%), radial-gradient(ellipse at 72% 70%, rgba(123,47,190,0.24) 0%, transparent 55%), linear-gradient(135deg,#0A1224 0%, #060A18 100%)}

/* Rack-focus swap transition */
.cases-hero-duration{transition:opacity .25s ease}
.cases-meta-headline,
.cases-meta-cite{
  transition:opacity .42s ease, transform .5s cubic-bezier(0.2,0.7,0.2,1), filter .42s ease;
  will-change:opacity, transform;
}
.cases.is-swapping .cases-hero-video{opacity:.2;transform:scale(1.07);filter:blur(12px) saturate(1.25)}
.cases.is-swapping .cases-hero-play,
.cases.is-swapping .cases-hero-duration{opacity:0}
.cases.is-swapping .cases-meta-headline{opacity:0;transform:translateY(12px);filter:blur(2px)}
.cases.is-swapping .cases-meta-cite{opacity:0;transform:translateY(16px)}

/* Duration — top-right */
.cases-hero-duration{
  position:absolute;top:18px;right:18px;z-index:3;
  font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:0.04em;color:#fff;
  background:rgba(10,5,20,0.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:5px 10px;border-radius:4px;
  border:1px solid rgba(255,255,255,0.08);
}

/* Play button — upper-left, frosted glass pill */
.cases-hero-play{
  position:absolute;top:18px;left:18px;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px 11px 16px;border-radius:100px;
  background:rgba(255,255,255,0.16);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1.5px solid rgba(255,255,255,0.55);
  z-index:3;
  box-shadow:0 4px 22px rgba(0,0,0,0.22);
  transition:transform .35s cubic-bezier(0.2,0.8,0.2,1), background .25s ease, border-color .25s ease;
  animation:casePlayBreathe 3.4s ease-in-out infinite;
}
.cases-hero-play svg{width:15px;height:15px;fill:#FFFFFF;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.4))}
.cases-hero-play-label{
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.cases-hero:hover .cases-hero-play{
  background:rgba(255,255,255,0.26);
  border-color:rgba(255,255,255,0.9);
  transform:scale(1.05);
  animation-play-state:paused;
}
/* Subtle "I'm clickable" cue: a soft ring breathes outward, barely there. */
@keyframes casePlayBreathe{
  0%,100%{ box-shadow:0 4px 22px rgba(0,0,0,0.22), 0 0 0 0 rgba(255,255,255,0.22); }
  50%    { box-shadow:0 4px 22px rgba(0,0,0,0.22), 0 0 0 7px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion:reduce){
  .cases-hero-play{animation:none}
}


/* ── Meta sidecar ── */
.cases-meta{
  display:flex;flex-direction:column;
  justify-content:center;
  padding:8px 0 0 0;
  gap:20px;
}

.cases-meta-headline{
  font-family:var(--font-display);font-weight:300;   /* was 350, a weight never loaded; this already rendered as 300 */
  font-size:clamp(1.25rem, 0.9rem + 1vw, 1.6rem);
  line-height:1.18;letter-spacing:-0.018em;
  color:var(--text-primary, #1A1A2E);
  text-wrap:balance;
}

.cases-meta-cite{
  display:flex;align-items:center;gap:14px;
  padding-top:6px;
  min-width:0;
}
.cases-portrait{
  width:52px;height:52px;border-radius:50%;
  overflow:hidden;flex-shrink:0;   /* plain circular photo — no ring/border */
}
.cases-portrait img,.cases-portrait .cases-portrait-fallback{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;
}
.cases-portrait img[hidden]{display:none!important}   /* truly hide when no avatar */
.cases-portrait-fallback{
  background:linear-gradient(135deg,#F4E9F2,#EAD8E6);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:400;font-size:16px;
  color:var(--accent);letter-spacing:0.02em;
}
.cases-cite-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;overflow:hidden}
.cases-cite-name{
  font-family:var(--font-body);font-size:14.5px;font-weight:500;
  color:var(--text-primary, #1A1A2E);line-height:1.3;letter-spacing:0.01em;text-wrap:balance;
  overflow-wrap:break-word;
}
.cases-cite-meta{
  font-family:var(--font-body);font-size:13px;color:var(--text-primary, #1A1A2E);line-height:1.35;
}
/* Practitioner title (e.g. "Founder / Director ..."), sits under the name,
   above the company line. Slightly emphasized vs the muted company meta. */
.cases-cite-title{
  font-family:var(--font-body);font-size:12.5px;font-weight:500;
  color:#4B5563;line-height:1.35;letter-spacing:0.01em;
}
.cases-cite-title[hidden]{display:none!important}

/* Optional Instagram handle, small + sleek. Sits under clinic line, hover
   tints to the site accent. */
.cases-cite-ig{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;
  font-family:var(--font-body);font-size:13px;font-weight:500;
  color:var(--accent);text-decoration:none;
  letter-spacing:0.01em;line-height:1;
  width:fit-content;
  transition:color .18s ease,opacity .18s ease;
}
/* The handle text reads as a clickable link: pink + underlined. Kept on the
   span (not the whole anchor) so the icon itself isn't underlined. line-height
   and flex centering align the text box to the icon's center on every card. */
.cases-cite-ig [data-cases-ig-handle]{
  display:inline-flex;align-items:center;line-height:1;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.cases-cite-ig:hover{opacity:0.78}
.cases-cite-ig-icon{width:14px;height:14px;flex-shrink:0;display:block;color:var(--accent)}
.cases-cite-ig-icon[hidden]{display:none}
.cases-cite-ig[hidden]{display:none!important}


/* ── Thumbnail strip ── */
.cases-strip-wrap{position:relative}
.cases-swipe-hint{display:none}
.cases-nav{display:none}
/* Pagination dots: phones only (the desktop 3-up grid needs none). Shown in
   the max-width:560px block below; same dot treatment as .po-seg / .testi-dot. */
.cases-dots{display:none}
.cases-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  /* No bottom margin — the strip is the section's last content, so the shared
     --sec-pb is the only gap to the divider (consistent with every section). */
  margin-bottom:0;
}
.cases-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius:4px;
  overflow:hidden;
  cursor:pointer;
  background:#0D0D1A;
  display:block;text-align:left;width:100%;padding:0;
  opacity:0.62;
  transition:transform .25s cubic-bezier(0.2,0.8,0.2,1);
}
.cases-thumb::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 32% 30%, rgba(206,0,184,0.22) 0%, transparent 55%),
    linear-gradient(135deg, #180A2E 0%, #0A0518 100%);
}
.cases-thumb::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.62) 100%);
}
.cases-thumb[data-tint="warm"]::before{background:radial-gradient(ellipse at 32% 30%, rgba(217,69,116,0.24) 0%, transparent 55%), linear-gradient(135deg,#1F0815 0%, #0A0510 100%)}
.cases-thumb[data-tint="deep"]::before{background:radial-gradient(ellipse at 32% 30%, rgba(50,20,90,0.40) 0%, transparent 55%), linear-gradient(135deg,#0E0820 0%, #050310 100%)}

.cases-thumb:hover{opacity:0.86;transform:translateY(-2px)}
.cases-thumb.is-active{
  opacity:1;
  box-shadow:0 0 0 3px var(--accent);   /* selected video → magenta ring (box-shadow = no layout shift) */
}

/* These tiles/players are <button>s, so the browser draws its own border
   and a focus outline on click — that's the remaining edge. Strip both so
   nothing frames the video. (Outline is removed for mouse AND keyboard; add
   a :focus-visible style back if you want a keyboard-only indicator.) */
.cases-hero,
.cases-thumb,
.instrument-video-trigger{
  border:0;
  -webkit-tap-highlight-color:transparent;
}
.cases-hero:focus,
.cases-thumb:focus,
.instrument-video-trigger:focus{
  outline:none;   /* no ring for mouse/touch focus */
}
/* …but keyboard users MUST see focus (WCAG 2.4.7) — these are real buttons. */
.cases-hero:focus-visible,
.cases-thumb:focus-visible,
.instrument-video-trigger:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.cases-thumb-duration{
  position:absolute;top:8px;right:8px;z-index:3;
  font-family:var(--font-body);font-size:10px;font-weight:500;
  letter-spacing:0.04em;color:#fff;
  background:rgba(10,5,20,0.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:3px 7px;border-radius:3px;
}
.cases-thumb-caption{
  position:absolute;left:10px;bottom:9px;right:10px;z-index:3;
  display:flex;flex-direction:column;gap:2px;
  color:#FFFFFF;
}
.cases-thumb-name{
  font-family:var(--font-body);font-size:13px;font-weight:500;
  letter-spacing:-0.005em;line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,0.55);
}
.cases-thumb-index{
  position:absolute;top:8px;left:8px;z-index:3;
  font-family:var(--font-body);font-size:10px;font-weight:500;
  letter-spacing:0.22em;color:#fff;
  /* Dark pill so the numeral stays legible over any poster frame (bare 0.7 white
     was ~1:1 over bright frames). Matches the duration chip. */
  background:rgba(10,5,20,0.72);padding:3px 7px;border-radius:3px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cases-thumb.is-active .cases-thumb-index{color:#F06FD6}   /* light pink reads on the dark pill (was --accent, too dark at 10px) */

/* Real SproutVideo poster on cards that have a video. Sits above the
   gradient (::before, z0) but below the dark scrim (::after, z1). */
.cases-thumb-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;
}
/* Hover play icon — subtle, appears only on cards with a video. */
.cases-thumb-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.9);
  z-index:3;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.cases-thumb-play svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.cases-thumb.has-video:hover .cases-thumb-play,
.cases-thumb.has-video.is-active .cases-thumb-play{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}


/* ── Responsive ── */
@media (max-width:960px){
  .cases-head{
    grid-template-columns:1fr;
    align-items:start;
    gap:20px;
  }
  .cases-reel{
    grid-template-columns:1fr;
    gap:24px;
  }
  .cases-meta{padding:0}
}

@media (max-width:560px){
  /* No padding override here — .cases keeps the shared --sec-pt/--sec-pb
     rhythm at every width so its gaps match #instrument and #outcomes. */
  .cases-hero-play{top:14px;left:14px;padding:9px 16px 9px 13px;gap:8px}
  .cases-hero-play svg{width:13px;height:13px}
  .cases-hero-play-label{font-size:10px;letter-spacing:0.12em}
  .cases-hero-duration{top:12px;right:12px;font-size:10px;padding:4px 8px}
  .cases-strip-wrap{
    margin-left:-16px;margin-right:-16px;
  }
  .cases-strip-wrap::after{
    content:'';position:absolute;z-index:4;pointer-events:none;
    top:0;bottom:16px;right:0;width:52px;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 82%);
    transition:opacity .3s ease;
  }
  .cases-strip-wrap.at-end::after{opacity:0}
  .cases-swipe-hint{
    display:inline-flex;align-items:center;gap:7px;
    position:absolute;z-index:5;right:18px;top:-30px;
    font-family:var(--font-body);font-size:10px;font-weight:500;
    letter-spacing:0.2em;text-transform:uppercase;color:#6B7280;
    transition:opacity .35s ease;
  }
  .cases-swipe-hint .chev{
    color:var(--accent);font-size:13px;line-height:1;
    animation:caseSwipeNudge 1.3s ease-in-out infinite;
  }
  .cases-strip-wrap.scrolled .cases-swipe-hint{opacity:0;pointer-events:none}
  /* Carousel only on mobile: the viewport clips, the strip becomes the track.
     (On desktop the strip is a static 3-up grid, so no viewport clipping there —
     that would crop the thumbs' hover-lift.) */
  .cases-strip-viewport{overflow:hidden}
  .cases-strip{
    display:flex;
    gap:10px;
    padding:4px 16px 16px;
    will-change:transform;   /* shared engine (swipe.js) translates the strip */
  }
  .cases-thumb{
    flex:0 0 72%;            /* one thumb fills most of the rail; the next peeks */
  }

  /* Prev / next arrows — float over the rail edges on mobile */
  .cases-nav{
    display:flex;align-items:center;justify-content:center;
    position:absolute;z-index:6;
    top:calc(50% - 13px);transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,0.94);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(22,20,15,0.10);
    box-shadow:0 6px 18px -4px rgba(21,6,42,0.28);
    color:var(--accent);cursor:pointer;padding:0;
    transition:opacity .25s ease, transform .18s ease, box-shadow .2s ease;
  }
  .cases-nav svg{width:17px;height:17px}
  .cases-nav--prev{left:8px}
  .cases-nav--next{right:8px}
  .cases-nav:active{transform:translateY(-50%) scale(0.9)}
  .cases-strip-wrap.at-start .cases-nav--prev{opacity:0;pointer-events:none}
  .cases-strip-wrap.at-end .cases-nav--next{opacity:0;pointer-events:none}

  /* Pagination dots under the rail — mirrors the other carousels' dots. */
  .cases-dots{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:18px;
  }
  .cases-dot{
    width:7px;height:7px;border-radius:999px;border:0;padding:0;cursor:pointer;
    background:rgba(26,20,46,.60);transition:background .3s ease,width .3s ease;   /* 4.5:1 on white */
  }
  .cases-dot.is-active{background:#1A1A2E;width:28px}
}
@keyframes caseSwipeNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ── COMMUNITY · #instrument, "How Electrons Plus fits into a practice" ──
   A normal flat white section (no card-stack): standard section rhythm. It is
   the one white band that keeps Patient Outcomes as the sole dark section. ── */

#instrument {
  background: #FFFFFF;   /* keeps Patient Outcomes as the one standout dark section */
  position: relative;
  z-index: 1;
  border-radius: 0;
  /* Shared section rhythm — gap = a section's bottom padding + the next
     one's top, identical for every section (see --sec-pt/--sec-pb). */
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
}

#instrument .container {
  position: relative;
  z-index: 1;
}

/* Desktop (>=861px): two columns, the video (left) + copy (right), matching the
   practitioners "letter from the founder" spread. The eyebrow + heading ABOVE
   stay centred (Eddie likes that, see .instrument-header). Stacks on <=860px
   (tablet/phone, see below).
   Video+copy are treated as ONE paired unit and centred as a block within the
   already page-centred .container (Eddie, 2026-07-07): equal breathing room
   left of the video and right of the copy, instead of the old space-between,
   which pinned the video flush to the left edge and copy flush to the right
   edge with one big uneven gap between them. */
.instrument-layout {
  display: grid;
  grid-template-columns: clamp(300px, 28vw, 360px) minmax(0, 540px);
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;   /* copy block centred on the video's midline */
}
.instrument-text-col { max-width: 540px; }

/* Founder byline above the copy — mirrors the practitioners "letter from the
   founder" name/role (.pr-letter-name / .pr-letter-role). */
.instrument-byline-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
}
.instrument-byline-name span { color: var(--muted); font-weight: 400; }
.instrument-byline-role {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
}

/* ── Left column ── */

.instrument-together-title {
  color: var(--text);
}
/* Each line of the heading stays whole; the two <br>s in the markup are the
   only break points, so the title reads as three lines on every screen size:
   "How Electrons Plus" / "Supports" / "Manual Therapists". All three lines are
   short enough to fit even on narrow phones, so nowrap is safe everywhere. */
.instrument-together-title .nb { white-space: nowrap; }

/* Full-width header row (eyebrow + heading) with the same edge-to-edge
   hairline + gap as Section 3's .cases-head. */
#instrument .instrument-header{
  border-bottom: 1px solid rgba(22,20,15,0.08);
  padding-bottom: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
  text-align: center;   /* centred eyebrow + heading (tablet/desktop; phone reset below) */
}

/* Purple brand-gradient accent band down the left of the copy — matches the
   practitioners "letter from the founder" spread (.pr-letter-body::before). */
#instrument .instrument-col--body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;   /* clear separation between the 3 paragraphs — matches .pr-letter-body */
  padding-left: clamp(20px, 4vw, 28px);
}
#instrument .instrument-col--body::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #CE00B8 0%, #7B2FBE 100%);
}

#instrument .instrument-col--body p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  color: var(--body-color);
  font-size: 15.5px;
  line-height: 1.7;
  letter-spacing: -0.008em;
  text-align: left;
  text-wrap: pretty;
}

.instrument-col--body p + p {
  margin-top: 0;   /* spacing now comes from the flex gap on .instrument-col--body */
}

.instrument-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;   /* its parent is a flex column — without this the button
                               stretches to the full column width (looked "bigger"
                               than the other CTAs). Keeps it hugging its label. */
  justify-content: space-between;
  gap: 12px;
  width: var(--cta-width);
  max-width: 100%;
  min-height: var(--cta-min-height);
  box-sizing: border-box;
  margin-top: 2.25rem;
  padding: 16px 28px;
  background: #14121C;   /* black button */
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: opacity .2s ease, transform .2s ease;
}
.instrument-cta:hover { opacity: 0.92; transform: translateY(-1px); }

/* ── Right column — community video ── */
.instrument-video {
  position: relative;
  width: 100%;
  /* Cropped hard from 9/16 → 4/5 (a clearly shorter, premium portrait — the
     9/14 trim was too subtle to read). Both the poster and the played iframe
     are bottom-anchored 9:16, so the 4/5 box clips the same band off the top
     of each (dead canopy), keeping the subject + the table at the bottom. */
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: #0C0718;     /* solid dark backing behind the SproutVideo player */
}

/* Poster/thumbnail shown before play; covers the box, cropped off the top. */
.instrument-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;   /* framed higher so the founder's head isn't cropped */
  display: block;
  z-index: 1;
}

/* The SproutVideo iframe injected on click. Solid dark backing so
   the magenta gradient box never shows through while the video buffers. */
.instrument-video-frame {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: auto;   /* bottom-anchored: top cropped by the 4/5 box */
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;   /* native player ratio → fills edge-to-edge, no letterbox */
  border: 0;
  z-index: 3;
  background: #0C0718;
}

/* Once playing, hide the poster so only the video shows. */
.instrument-video.playing .instrument-video-poster {
  opacity: 0;
  pointer-events: none;
}


/* Click-to-play trigger: poster + frosted "Watch video" pill (matches case studies) */
.instrument-video-trigger{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;margin:0;background:none;cursor:pointer;
  display:block;z-index:2;
}
.instrument-video-trigger .cases-hero-play{top:74%;left:50%;transform:translate(-50%,-50%)}   /* lower-centre, toward his chest — clear of Simon's face (Eddie) */
.instrument-video-trigger:hover .cases-hero-play{
  background:rgba(255,255,255,0.26);
  border-color:rgba(255,255,255,0.9);
  transform:translate(-50%,-50%) scale(1.05);
  animation-play-state:paused;
}
.instrument-video.playing .instrument-video-trigger{display:none}


@media (max-width: 767px) {
  /* PHONES ONLY now (Eddie, 2026-07-07): stack with the VIDEO FIRST, then the
     paragraphs, then the Apply button (video, P1, P2, CTA). Tablets (768px and up)
     keep the side-by-side centred pairing from the desktop rule above, so Eddie
     can judge the side-by-side on a real tablet. Lower this back to 860px to send
     tablets back to stacking.
     (The eyebrow + heading above stay centred down to the phone breakpoint.) */
  .instrument-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.9rem, 6vw, 2.5rem);
  }
  /* DOM order is already video → byline → copy → button (the video's .instrument-aside-col
     precedes .instrument-text-col), so NO display:contents / order juggling is needed.
     The text column stays a normal block — keeping the byline name/role tight together
     and the copy's accent band, exactly like the founder spread on the practitioners page.
     (Flattening with display:contents made the name + role separate flex items, so the
     layout's ~2rem gap pushed "FOUNDER & CEO" far below the name.) */
  .instrument-cta { margin-top: clamp(1.5rem, 5vw, 2rem); }   /* space above the full-width Apply button */
}

/* #instrument (Community) is a normal flat section (no card-stack) since the
   June 2026 rework — the card-stack now runs #outcomes ← .cases above it. */


/* ═══════════════════════════════════════════════════════════
   Tech teaser ("A charger for your cells"). .tm-* namespace.
   Light two-column band: copy plus a click-to-play product video.
   Sits right after the hero (section 2) and pins as a card-stack
   layer (see .page-home #tech-teaser below).
   ═══════════════════════════════════════════════════════════ */
.page-home #tech-teaser{position:sticky; top:calc(100svh - 1049px); z-index:2; overflow:hidden;
  background:#fff;
  /* Card-stack (Eddie): slides UP over the pinned mission, then PINS on its own last
     screen (sticky, same read-then-freeze offset trick as the mission ~1049px tall)
     while #outcomes slides up over it. Rounded top + soft UPWARD shadow so it reads
     as a lifting card. Desktop resets top:0 in the @media below (it fits one screen). */
  border-radius:22px 22px 0 0;
  box-shadow:0 -22px 48px -20px rgba(26,26,46,.22), 0 -6px 16px -9px rgba(26,26,46,.10);
  border-bottom:1px solid rgba(206,0,184,0.14)}
/* Premium background (Eddie): a soft purple glow (hue 293) over the solid white
   base, with faint film-grain on top. Both layers are pointer-events:none and sit
   UNDER the copy (.tm-wrap is z-index:2), so they never block taps or muddy text.
   ::before = colour glow (mobile placement); ::after = grain. Desktop shifts the
   glow placement in the @media(min-width:900px) block below. */
.page-home #tech-teaser::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  /* "Whisper" glow (Eddie 2026-07-07): a quiet, deep violet bloom instead of the
     old loud magenta. Mobile places it as a soft top-left haze. */
  background:radial-gradient(90% 72% at 10% 4%,
    hsla(274,44%,30%,.4), transparent 80%)}
.page-home #tech-teaser::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.65;mix-blend-mode:soft-light;
  background:url('../assets/home/grain.png') 0 0 / 150px 150px}
.tm-wrap{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:var(--sec-pt) clamp(28px,3vw,32px) var(--sec-pb)}

/* Phones: one column stacked as heading + first paragraph, then animation, then
   the rest of the copy + button. The cell sits AFTER the first paragraph; the grid
   gap gives clear padding above and below it. Wide screens become two columns (all
   copy on the left, the animation spanning the right) via the grid areas below. */
/* MOBILE / TABLET (base, up to 900px): the animation is its OWN block, right-
   aligned, about 25% smaller than full width, with clear padding above and below
   so it sits alone (Eddie). DESKTOP (900px and up) restores the untouched two-
   column in the @media below. */
.tm-grid{display:flex;flex-direction:column;align-items:stretch}
.tm-content{position:relative;max-width:none;margin:0;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left}
/* Mobile reading order (Eddie): head → lead1 → tail → video → CTA. lead1 and
   tail both just use .tm-lead's own natural top margin, plain paragraph-to-
   paragraph gaps. The CTA below is the one exception, since IT follows the
   video instead of a paragraph, so its own margin is zeroed instead, the
   video's bottom margin (below) is already the spacer. Desktop (media query
   below) restores its own zeroes/margins for its different row order. */
.tm-content--cta .tm-cta{margin-top:0}
/* Video slot. Holds the shared portrait thumbnail (.ep-vthumb, base.css): a 3:4
   poster that opens a fullscreen 9:16 popup on click. Centered so the narrower
   portrait thumbnail sits balanced in this column (the old inline 16:9 player was
   removed with the vertical-clip swap; .ep-vthumb caps its own width at 440px). */
.tm-media{position:relative;margin:clamp(2rem,7vw,3.5rem) 0;width:100%;
  display:flex;justify-content:center}

/* DESKTOP (900px and up): the untouched two-column. Copy on the left, the
   animation as a box on the right, vertically centred. This layout must NOT
   change for the mobile tweaks. */
@media(min-width:900px){
  .tm-grid{display:grid;grid-template-columns:.9fr 1.1fr;
    column-gap:clamp(2.5rem,5vw,5rem);row-gap:clamp(1.3rem,2.5vw,1.7rem);
    /* Four named rows in the left column (heading, first paragraph, tail,
       CTA), so .tm-media can span all four (grid-row below) and stay tall +
       centered beside the whole text block, exactly as when the CTA still
       lived inside the tail row (mobile-only reorder split it out below). */
    grid-template-areas:"head media" "lead1 media" "tail media" "cta media";align-items:center}
  .tm-content{grid-area:head;max-width:none}
  .tm-content--lead1{grid-area:lead1}
  .tm-content--tail{grid-area:tail}
  /* Here (not on mobile) the row-gap above is the spacer, so zero each
     paragraph's own margin, keeping every gap the same size. */
  .tm-content--lead1 .tm-lead,
  .tm-content--tail .tm-lead{margin-top:0}
  .tm-content--cta{grid-area:cta;
    /* Cancels the row-gap above so the CTA's own margin below (unchanged,
       matches every other CTA site-wide) is the only gap, same as when tail
       and CTA were still one block. */
    margin-top:calc(-1 * clamp(1.3rem,2.5vw,1.7rem))}
  .tm-content--cta .tm-cta{margin-top:clamp(1.8rem,3vw,2.4rem)}
  .tm-media{grid-area:media;grid-row:1 / 5;align-self:center;margin:0;width:100%}
  /* Desktop pin offset: tech is ~960px (taller than one screen), so it uses the
     read-then-freeze offset (this rule is AFTER the base one, so it wins). */
  .page-home #tech-teaser{ top:calc(100svh - 960px) }
  /* Desktop "Whisper" glow (Eddie 2026-07-07): quiet deep-violet bloom, left side. */
  .page-home #tech-teaser::before{
    background:radial-gradient(90% 80% at -6% 30%,
      hsla(274,44%,30%,.4), transparent 80%)}
}

/* Eyebrow + heading use the shared .ep-headwrap (eyebrow pinned to the heading's
   left edge). */

.tm-head{color:#1A1A2E;margin:0;width:100%;text-align:left;
  font-family:var(--font-display);font-weight:600;white-space:normal;
  font-size:clamp(1.85rem,1.1rem + 1.9vw,2.5rem);line-height:1.12;letter-spacing:-0.02em}
.tm-head .g{
  /* Dark-start fade into the brand gradient — mirrors the hero's white→gradient
     word (.hero-grad-word), but starts on the heading ink since the bg is light. */
  background:linear-gradient(96deg, #1A1A2E 0%, #1A1A2E 22%, #CE00B8 66%, #F06FD6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.tm-lead{font-family:var(--font-body);font-weight:var(--body-weight);
  font-size:var(--body-size);line-height:var(--body-line);color:rgba(26,26,46,.74);
  margin:1.3rem 0 0;text-align:left;text-wrap:pretty;max-width:52ch}
.tm-lead strong{color:#1A1A2E;font-weight:500}

/* "Learn more" CTA. The silk .ep-cta2 styling comes from base.css; the layout
   margins below still apply. */
.tm-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:.7rem;
  width:var(--cta-width);max-width:100%;min-height:var(--cta-min-height);padding:.95rem 2rem;box-sizing:border-box;
  border:1px solid #fff;border-radius:2px;font-family:var(--font-body);font-size:.7rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;background:transparent;color:#fff;transition:opacity .2s,transform .2s;
  margin-top:clamp(1.8rem,3vw,2.4rem)}
.tm-cta:hover{opacity:.92;transform:translateY(-1px)}
.tm-cta svg{width:14px;height:14px;color:var(--accent);transition:transform .25s}
.tm-cta:hover svg{transform:translateX(4px)}

/* Mobile: single column, content-height (no viewport-height math), so it renders
   identically on every phone (fixes the iPhone-vs-emulator drift). */
@media(max-width:767px){
  .tm-wrap{padding-top:clamp(36px,9vw,56px)}
}

/* == Direction "A / Charged" dark theme for #tech-teaser (Eddie, 2026-07-07) ==
   Restyles ONLY colour + atmosphere: dark electric ground, glowing video, a
   gradient heading, light body copy, and the eyebrow's dark-background variant.
   LAYOUT, the grid, font + heading sizes, the shared .ep-eyebrow chip, the
   .ep-cta2 silk button, the card-stack pin/lift, and the scroll corner-morph
   are all left exactly as they were. Grouped + high specificity so it overrides
   the light defaults above WITHOUT editing them, and reverts by deleting this
   block. The existing ::before glow (hue 293) is deliberately left untouched so
   Eddie's tuned mobile + desktop glow placements still win; it simply reads as a
   charged purple haze on the dark ground now. */
/* Dark ground + a BOTTOM purple fade (Eddie, 2026-07-07): only the bottom edge
   melts into the bridge purple (--bridge) so it flows seamlessly into #outcomes
   below, which starts on the exact same purple. The rest of the section (top-left
   glow, black body) is unchanged. */
.page-home #tech-teaser{
  --bridge:#1c0d38;   /* Option C: deep, quiet purple */
  /* Fade to the bridge purple over a FIXED 300px (not a %), so the bloom is the
     same size regardless of section height and stays balanced with #outcomes'
     matching fade below. Ends exactly on --bridge at the seam. */
  background:linear-gradient(180deg, #0a0714 calc(100% - 300px), var(--bridge) 100%), #0a0714;
  /* Drop the old 1px magenta bottom divider: it showed as an odd line across the
     seamless purple bridge into #outcomes. */
  border-bottom:0;
}
/* Grain off (Eddie): the ::after film-grain texture reads as noise on the dark
   ground, so drop it here. The glow ::before stays. */
.page-home #tech-teaser::after{ display:none }
/* Heading: white ink fading into the brand gradient (white start reads on dark). */
.page-home #tech-teaser .tm-head{ color:#fff }
.page-home #tech-teaser .tm-head .g{
  background:linear-gradient(96deg,#fff 0%,#F06FD6 52%,#CE00B8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* Glowing "charge" line under the heading. Sits inside the head grid area, block
   flow, so it adds no layout shift; scaleX animation avoids any reflow. */
.page-home #tech-teaser .tm-head::after{
  content:'';display:block;height:3px;width:150px;border-radius:2px;margin:16px 0 0;
  transform-origin:left center;
  background:linear-gradient(90deg,#CE00B8,#F06FD6);
  box-shadow:0 0 18px 2px rgba(240,111,214,.55);
  animation:tm-charge 4.5s ease-in-out infinite}
@keyframes tm-charge{0%,100%{transform:scaleX(.72);opacity:.85}50%{transform:scaleX(1);opacity:1}}
/* Body copy: light on dark. */
.page-home #tech-teaser .tm-lead{ color:rgba(255,255,255,.74) }
.page-home #tech-teaser .tm-lead strong{ color:#fff }
/* Same eyebrow chip, its dark-background variant (matches #outcomes' eyebrow). */
#tech-teaser .tm-eyebrow.ep-eyebrow.ep-eyebrow{ color:#F3EAF7; border-color:rgba(255,255,255,.3) }
/* Magenta glow removed (Eddie, 2026-07-07): felt cleaner without it. The
   thumbnail keeps .ep-vthumb's own plain black drop shadow, unchanged. */
@media (prefers-reduced-motion:reduce){
  .page-home #tech-teaser .tm-head::after{ animation:none; transform:scaleX(1) }
}

/* No card-stack between #tech-teaser and #outcomes (Eddie, 2026-07-07): stop
   #tech-teaser from PINNING, so it scrolls normally and #outcomes simply follows
   it in sequence instead of sliding UP over it. Mission still pins and tech still
   rises over it (z-index:2 is kept, so the mission->tech corner reveal is intact);
   only the tech<->outcomes overlap is removed. top:auto is required because the
   old negative sticky offset would otherwise shift a relative box off-position. */
.page-home #tech-teaser{ position:relative; top:auto }
@media(min-width:900px){ .page-home #tech-teaser{ position:relative; top:auto } }

/* ══════════════════════════════════════════════════════════════
   SECTION 3b · Patient Outcomes ("Real results, recorded.")
   Scroll-snap carousel of vertical reels + lightbox. Behavior: outcomes.js.
   ══════════════════════════════════════════════════════════════ */
#outcomes{
  padding:var(--sec-pt) 0 var(--sec-pb);
  position:relative;z-index:3;     /* above #tech-teaser (z-index:2) */
  margin-top:-1px;                 /* overlap the tech section by 1px so no sub-pixel hairline (white page behind) shows at the bridge seam */
  overflow:hidden;                 /* clip slivers */
  /* Flat, flush top (Eddie, 2026-07-07): the rounded top + upward lift shadow
     were the old "sliding card" look. With the tech<->outcomes card-stack gone,
     they only made a visible seam (a white sliver in the corner + a dark edge),
     so drop both. Now this section's near-black top meets the tech section's
     near-black bottom with no break, one continuous dark canvas, and the purple
     glow still blooms just below and fades to black. Tech section is untouched. */
  border-radius:0;
  box-shadow:none;
  /* Tighter top gap (Eddie, 2026-07-07): the site-wide --sec-pt (up to 132px) plus
     the tech section's own bottom padding stacked into a big empty gap now that
     there's no card sliding in to fill it visually. Cut just THIS section's top
     padding, --sec-pt stays untouched everywhere else on the site. */
  padding-top:clamp(40px,5vw,64px);
}
.po-container{max-width:1240px;margin:0 auto;padding:0 clamp(28px,3vw,32px)}

/* ── Header ── */
.po-head{
  display:flex;justify-content:center;align-items:flex-end;
  gap:24px;margin-bottom:clamp(18px,2.5vw,26px);   /* line → intro (intro now below the rule) */
  /* Divider hairline under the heading — same as .cases-head. */
  border-bottom:1px solid rgba(22,20,15,0.08);
  padding-bottom:clamp(28px,3vw,32px);
  text-align:center;   /* centre the eyebrow+heading (desktop; phone resets to left below) */
}
.po-eyebrow-block{display:flex;flex-direction:column;gap:14px;align-items:center}
.po-heading{color:var(--text)}
/* Small body under the heading — mirrors .cases-intro-text. */
.po-intro-text{
  margin:0 0 clamp(28px,4vw,44px);max-width:60ch;   /* left-aligned to match the left-aligned header */
  font-family:var(--font-body);font-weight:var(--body-weight);
  font-size:var(--body-size);line-height:1.6;color:var(--body-color);   /* size/weight match body copy (Eddie unified them) */
  text-align:left;
}
/* ── Carousel: a horizontal scroll-snap row with side peeks (matches the
   testimonials). Each card is self-contained — a 4:5 video on top, then the
   text below. Swipe or tap a dot to move. ── */
.po-stage-wrap{
  position:relative;width:100%;
  /* Thinner cards — the old 460px cards felt fat (Eddie). ~3 across on desktop. */
  --po-card-w:clamp(280px, 26vw, 340px);
}

/* Controls row — prev / dots / next, centred BELOW the cards so the arrows
   never sit on top of a video (the old absolute side-arrows overlapped a card
   on one side and floated in empty space on the other). */
.po-controls{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);
  margin:clamp(22px,3vw,32px) auto clamp(28px,6vw,56px);
}
/* Desktop only (no card-stack here): #outcomes and 'Practitioners' stories' are
   adjacent same-colour sections, so the controls' bottom margin + #outcomes
   bottom padding + .cases top padding stacked into a ~284px gap. Trim all three
   so the two related sections read as a connected pair. (Mobile keeps the pin.) */
@media (min-width: 769px) {
  .po-controls { margin-bottom: clamp(6px, 1vw, 14px); }
  #outcomes    { padding-bottom: clamp(44px, 5.5vw, 76px); }
  .cases       { padding-top: clamp(48px, 6vw, 84px); }
}
.po-arrow{
  display:grid;place-items:center;
  width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(22,20,15,0.14);background:#fff;color:var(--text);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.po-arrow svg{width:20px;height:20px}
.po-arrow:hover{color:var(--magenta);border-color:var(--magenta);transform:scale(1.06)}
/* .po-viewport is the native scroll-snap scroller (see the next comment);
   .po-stage is the flex track inside it. Cards stay flush-LEFT (start align),
   so card 1 lines up with the heading + intro and a peek of the next card on
   the right signals there's more. */
/* Native horizontal scroll-snap carousel — the BROWSER owns the touch physics
   (momentum, axis-locking, one-card snapping). outcomes.js only adds arrows/dots
   on top. This is what makes it reliable on mobile vs the old JS drag engine. */
.po-viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;         /* full-card snapping (one swipe = one card) */
  -webkit-overflow-scrolling:touch;     /* iOS momentum scrolling */
  overscroll-behavior-x:contain;        /* a horizontal flick won't fire browser back-swipe */
  scrollbar-width:none;                 /* Firefox: hide the scrollbar */
}
.po-viewport::-webkit-scrollbar{display:none}   /* WebKit / Blink: hide the scrollbar */
.po-stage{
  display:flex;align-items:stretch;gap:var(--po-gap);   /* stretch = every card the same height as the tallest */
  --po-gap:18px;
  padding:6px 0;
  position:relative;
}

.po-card{
  flex:0 0 auto;
  width:var(--po-card-w);
  scroll-snap-align:start;       /* each card snaps softly flush-left (proximity → never forced) */
  -webkit-user-select:none;user-select:none;
  display:flex;flex-direction:column;
  /* Media + text read as one bordered card (the media's corners are clipped to
     the card radius by overflow:hidden). */
  background:#fff;
  border:1px solid rgba(22,20,15,0.12);
  border-radius:6px;   /* match the Case Studies video frames (.cases-hero) */
  overflow:hidden;
  box-shadow:0 1px 2px rgba(21,6,42,0.04);
}

/* Media — the 4:5 video / poster block. No own radius: the card clips it. */
.po-media{
  position:relative;width:100%;aspect-ratio:4 / 5;
  border-radius:0;overflow:hidden;isolation:isolate;
  background:#0A0518;cursor:pointer;
}
.po-card-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 30% 28%, rgba(206,0,184,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 70%, rgba(123,47,190,0.32) 0%, transparent 55%),
    linear-gradient(135deg,#180A2E 0%,#0A0518 100%);
}
.po-card-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}

/* Small play + duration pill, bottom-left (per the reference design) */
.po-play-pill{
  position:absolute;left:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(10,5,20,0.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transition:background .25s ease,transform .25s ease;
}
.po-play-pill svg{width:11px;height:11px;flex:none;fill:#fff}
.po-media:hover .po-play-pill{background:rgba(10,5,20,0.72);transform:scale(1.04)}

/* Fullscreen overlay player — the Sprout iframe mounts HERE, never in a card,
   so a playing video can never sit over the carousel and intercept swipes.
   Appended to <body> by outcomes.js; shown by toggling [hidden] + .is-open. */
.po-lightbox{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  opacity:0;transition:opacity .22s ease;
}
.po-lightbox.is-open{opacity:1}
.po-lightbox[hidden]{display:none}        /* fully removed from a11y tree when closed */
.po-lightbox-backdrop{
  position:absolute;inset:0;
  background:rgba(8,4,18,0.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.po-lightbox-dialog{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.985);transition:transform .22s ease;
}
.po-lightbox.is-open .po-lightbox-dialog{transform:none}
/* Portrait video box, matched to the 4:5 card media; fits within the viewport
   on any screen. SproutVideo letterboxes its own source inside this if needed. */
.po-lightbox-frame{
  position:relative;
  width:min(92vw, calc(86vh * 4 / 5));
  aspect-ratio:4 / 5;max-height:86vh;
  background:#000;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 70px -12px rgba(0,0,0,0.6);
}
.po-lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.po-lightbox-close{
  position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;z-index:2;
  display:grid;place-items:center;width:42px;height:42px;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,transform .2s ease;
}
.po-lightbox-close svg{width:20px;height:20px}
.po-lightbox-close:hover{background:rgba(255,255,255,0.26);transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .po-lightbox,.po-lightbox-dialog{transition:none}
}

/* ── Text block below the media: discipline → title → one-line summary → IG ── */
.po-text{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px}
.po-discipline{
  font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--text);
}
.po-title{
  margin:0;font-family:var(--font-body);font-weight:700;
  font-size:14px;line-height:1.4;letter-spacing:-.005em;
  color:var(--text);text-wrap:balance;
}
.po-blurb{
  margin:0;font-family:var(--font-body);font-weight:400;
  font-size:14px;line-height:1.5;color:var(--muted);
  text-align:left;   /* narrow card text — justify (base p) would gap badly */
}
.po-ig{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;width:fit-content;
  font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--accent);
  text-decoration:none;letter-spacing:.01em;line-height:1;transition:opacity .18s ease;
}
.po-ig span{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.po-ig:hover{opacity:.78}
.po-ig-glyph{width:14px;height:14px;flex:none;color:var(--accent)}

/* ── Progress dots — centered below the carousel, with breathing room beneath ── */
.po-segs{display:flex;align-items:center;gap:8px;justify-content:center;margin:0}
.po-seg{
  width:7px;height:7px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(26,20,46,.18);transition:background .3s ease,width .3s ease;
}
.po-seg:hover{background:rgba(26,20,46,.34)}
.po-seg.is-active{background:#1A1A2E;width:28px}

@media(max-width:768px){
  .po-stage-wrap{--po-card-w:min(300px,72vw)}   /* narrower cards → a bigger, more obvious peek of the next card */
}

/* Card-stack effects. Each pin lives on its section's own base rule; each glider
   carries the rounded top + lift shadow that make it read as a rising card.
   ALL widths: #hero (scrolls) is covered by #mission, then #tech-teaser.
   PHONE + TABLET only (desktop is flat): #outcomes pins and .cases covers it.
   Each glider sits one z-index above the section it covers; Community is flat. */
/* Pair B detail (phones + tablets <900px): #outcomes pins and .cases rises up over
   it as the rounded card, so the stories videos stay on TOP and playable. The
   rounded top + lift shadow belong ONLY here (desktop .cases is flat). .cases is
   pointer-events:none so its overlapping top edge can never eat a carousel swipe
   (the .ep-fab lesson); .cases-container re-enables interaction. z-index:4 keeps
   .cases above the still-pinned #tech-teaser (z-2). Tune pin depth with --po-pin. */
@media(max-width:899px){
  /* --po-pin is how far the section's top is tucked ABOVE the fold when it
     freezes. More negative = the frozen card sits HIGHER on screen. Eddie's
     target (2026-07-04): the card freezes with the top ~20% of the video card
     tucked behind the floating nav bar. On a 812px-tall phone the video is
     ~335px and sits ~564px below the section top, so -69vh (~-560px) puts the
     video's 20%-down line right at the nav's bottom edge. */
  #outcomes{position:sticky;top:var(--po-pin,-69vh);z-index:3}
  .cases{z-index:4;pointer-events:none;border-radius:22px 22px 0 0;box-shadow:none}
  .cases-container{pointer-events:auto}
}

/* Card-stack CORNER MORPH (Eddie, 2026-07-06): each stacking card's top corners
   start SQUARE and round off to 22px as the card rises into view. A real geometry
   change on the card's OWN corners (not a reveal-from-behind trick), so it reads
   the same no matter what colour sits behind it. Driven by js/site.js #10 (same
   scrollY pattern as the mission fill-bar #9), which sets an inline
   border-top-*-radius per card on phone/tablet; desktop keeps the static radius
   below. CSS scroll-driven animation (view timeline) was tried first but did not
   morph reliably on these tall position:sticky cards. */

@media(prefers-reduced-motion:reduce){
  .po-seg,.po-play-pill{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════
   Mastermind — annual community gathering (homepage, after
   Testimonials). Built on the shared standards: section rhythm
   (--sec-pt/--sec-pb), the #instrument two-column + eyebrow/
   heading/body/CTA recipe, and the .cases frosted overlay pills.
   ═══════════════════════════════════════════════════════════ */
#mastermind{
  background:#fff;
  padding:var(--sec-pt) 0 var(--sec-pb);
  position:relative;z-index:1;
}
.mm-layout{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;   /* image · content — matches .instrument-layout */
  gap:clamp(3rem,5vw,5.5rem);
  align-items:center;
}

/* ── Media (left): static Mastermind event photo ── */
.mm-media{
  position:relative;width:100%;aspect-ratio:3 / 2;
  border-radius:6px;overflow:hidden;isolation:isolate;   /* match the 6px used everywhere else */
  /* Dark backing so a missing/loading poster reads as intentional, not broken. */
  background:
    radial-gradient(ellipse at 30% 28%, rgba(206,0,184,0.20) 0%, transparent 55%),
    linear-gradient(135deg,#180A2E 0%,#0A0518 100%);
  box-shadow:0 30px 60px -34px rgba(21,6,42,0.45);
}
.mm-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
}

/* ── Section header — centred eyebrow + heading + hairline (matches
   .instrument-header / .cases-head; phone resets to left in the ≤767 block). ── */
#mastermind .mm-header{
  border-bottom:1px solid rgba(22,20,15,0.08);
  padding-bottom:clamp(28px,3vw,32px);
  margin-bottom:clamp(28px,4vw,44px);
  text-align:center;
}
.mm-title{color:var(--text);margin:0}
.mm-lead{
  margin:0;   /* lead is now the first item in the content column (heading moved to the top header) */
  font-family:var(--font-prose);font-weight:var(--body-weight);
  color:var(--body-color);font-size:var(--body-size);line-height:var(--body-line);
  letter-spacing:-0.012em;max-width:none;text-align:left;
}
.mm-rule{height:1px;background:rgba(22,20,15,0.08);margin:clamp(24px,3.5vw,36px) 0}

.mm-next-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;
}
/* Marker before the label — the same --accent dash the section eyebrows use
   (replaced the round dot). */
.mm-next-label::before{content:'';width:24px;height:1px;background:var(--accent);flex:none}
.mm-date{
  margin:0;font-family:var(--font-display);font-weight:600;color:var(--text);
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.15rem);line-height:1;letter-spacing:-0.015em;
}
.mm-date .mm-meta{font-size:0.62em;font-weight:400;color:var(--muted);letter-spacing:0}

/* ── Countdown to the next Mastermind — one calm line (text set by site.js) ── */
.mm-away{
  margin:clamp(20px,2.6vw,28px) 0 0;
  font-family:var(--font-display);font-weight:600;color:var(--text);
  font-size:clamp(1.35rem,1.1rem + 1.2vw,1.7rem);line-height:1;letter-spacing:-0.01em;
}

.mm-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;
  width:var(--cta-width);max-width:100%;min-height:var(--cta-min-height);box-sizing:border-box;
  margin-top:clamp(28px,3.5vw,40px);padding:16px 28px;
  background:var(--btn-gradient);color:#fff;text-decoration:none;
  font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;
  transition:opacity .2s ease,transform .2s ease;
}
.mm-cta:hover{opacity:0.92;transform:translateY(-1px)}

/* ── Mobile: stack, image on top ── */
@media (max-width:768px){
  .mm-layout{grid-template-columns:1fr;gap:clamp(2rem,7vw,2.6rem)}
  .mm-cta{width:100%}
}

/* ── ONE uniform CTA — matches the mobile-menu "Apply for a Demo" button (Eddie) ──
   MOBILE: full-width + LEFT-aligned text (exactly like that menu button).
   DESKTOP: the SAME size as mobile (capped ~360px) + left text — never stretched
   wide. Higher specificity (.x.ep-cta2 = 0,2,0) wins over a.ep-cta2's --ep-w:auto.
   align-self keeps it left in flex parents; on mobile it stretches to fill. */
.tm-cta.ep-cta2,
.mm-cta.ep-cta2,
.instrument-cta.ep-cta2,
.testi-cta.ep-cta2{ --ep-w:360px; max-width:100%; align-self:flex-start; }
.tm-cta .ep-cta2-text,
.mm-cta .ep-cta2-text,
.instrument-cta .ep-cta2-text,
.testi-cta .ep-cta2-text{ text-align:left; }

@media (max-width:860px){
  .tm-cta.ep-cta2,
  .mm-cta.ep-cta2,
  .instrument-cta.ep-cta2,
  .testi-cta.ep-cta2{ --ep-w:100%; align-self:stretch; }
}

/* Unified button corner radius (Eddie): every action button matches the 6px
   video/media frames. Placed last so it overrides each button's own radius. */
.instrument-cta,
.tm-cta,
.mm-cta,
.testi-cta,
.mob-cta{
  border-radius:6px;
}

/* ─────────────────────────────────────────────────────────────
   EYEBROW + HEADING  ·  .ep-headwrap
   Eyebrow stacked above a LEFT-aligned heading, both flush to the content's
   left edge, with ONE consistent gap site-wide (fixes the eyebrow→heading gap
   drifting between sections). Used across the home page's section headers.
   ───────────────────────────────────────────────────────────── */
.ep-headwrap{
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  width:100%;max-width:100%;margin-left:0;margin-right:0;text-align:left;
}
.ep-headwrap > h1,.ep-headwrap > h2,.ep-headwrap > h3,
.ep-headwrap > .section-heading{width:100%;text-align:left;margin:0}

/* #outcomes: DARK "see-it-work" treatment, near-black (#08070c) + a soft
   top-right purple glow, white text. Scoped to #outcomes ONLY. The .po-*
   classes are shared with the (light) testimonials section, so must not leak. */
/* Option C bridge (Eddie): starts on the SAME deep purple as #tech-teaser's
   bottom edge so the two meet invisibly, then eases to near-black. Fixed-px
   stops mirror the tech fade above (300px there, ~260px hold + fade here), so
   the bloom is balanced across the seam, no sudden "purple starts here" step.
   The old top-right radial glow is dropped: Option C is a clean vertical fade. */
#outcomes{
  background:linear-gradient(180deg, #1c0d38 0px, #120a25 260px, #08070c 520px), #08070c;
  color:#fff; isolation:isolate;
}
#outcomes::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:none; }
#outcomes .po-head{ border-bottom-color:rgba(255,255,255,0.14); }
#outcomes .po-eyebrow{ color:#F3EAF7; border-color:rgba(255,255,255,0.3); }   /* light eyebrow on dark (matches .ep-eyebrow--dark) */
#outcomes .po-heading{ color:#fff; }
#outcomes .po-intro-text{ color:rgba(255,255,255,0.74); }
#outcomes .po-arrow{ background:transparent; border-color:rgba(255,255,255,0.28); color:#fff; }
#outcomes .po-seg{ background:rgba(255,255,255,0.55); }   /* 6.3:1 on #08070c, clears the WCAG 3:1 minimum */
#outcomes .po-seg.is-active{ background:#fff; }