/* =========================================================================
   HOME — homepage sections, in Figma order. Tokens only; media queries are
   layout flips. Geometry notes cite the Figma frame (1920) values.
   ========================================================================= */

/* --- 02 HERO (3033:198) — pinned like revelatio.studio: the section is two screens tall, the image
   sticks for the first screen and slowly grows while the strapline + CTA scroll away at page speed,
   then the image releases into the statement. Pure sticky, no scroll hijack. ------------------- */
.hero { position: relative; height: 320svh; min-height: 2050px; background: var(--bg); overflow: clip; }   /* clip, not hidden: hidden would break sticky */
.hero__media { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; }
/* resting state = the panel (revelatio.studio): 60vw, lifted; JS scales it to full bleed over the first 1.5 screens of scroll */
.hero__media { transform: scale(var(--panel-scale)) translateY(var(--panel-lift)); border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .hero__media { transform: none; border-radius: 0; } }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* the container scales (M11); the image just fills it */
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 68%, var(--bg) 100%), rgba(0, 0, 0, .10); pointer-events: none; }   /* flat 10% tint over the hero (Chiara 16 Sep): its own layer, so the scrim's .55 opacity does not water it down */
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); opacity: .55; pointer-events: none; }
@media (max-width: 767px) { .hero__scrim { opacity: .72; } }   /* phone (Chiara 16 Sep): the headline crosses the lit white skirt in the AAPC hero — more of the same scrim token so white-on-white stays legible */
.hero__in { position: sticky; top: 0; z-index: 2; will-change: transform; height: 100svh;   /* stationary while the image grows; JS slides it off once full bleed */ min-height: 640px; margin-top: -100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--space-xl); }
.hero__strap { max-width: 21.2em; font-size: var(--type-lead-hero, var(--type-lead)); }   /* Figma 763px @36px = 2 lines */
.hero .cta { margin-top: var(--space-lg); align-self: flex-start; }
@media (max-width: 767px) { .hero { height: calc(100vh + 110svh); height: calc(100lvh + 110svh); min-height: 0; } .hero__media { height: 100vh; height: 100lvh; min-height: 0; } .hero__in { min-height: 0; height: 100svh; margin-top: -100vh; margin-top: -100lvh; padding-bottom: var(--space-2xl); } }   /* lvh (Alex 16 Sep): mobile browsers grow the screen when the address bar shrinks on scroll — the pinned image is sized to the LARGE viewport so it stays full bleed through the hold; the headline keeps the small viewport so the button is visible on load */   /* phones (Alex 16 Sep): image full-bleed from the start and pinned for 60svh while the headline slides up and off, then the page moves on */
/* intro sequence (M1) — Figma's four beats (3007:10), nothing added. Exit uses a 0.7s ease-in-out
   crossfade while the hero image develops to full brightness. States set by JS on <body data-intro>. */
:root { --ease-io: cubic-bezier(.65, 0, .35, 1); }
.intro { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; align-items: center; justify-content: center; gap: var(--space-2xl); padding-inline: calc(var(--gutter) * 2); pointer-events: none; }   /* desktop: strapline left, wordmark right */
.intro__strap { max-width: min(100%, 21.2em); font-size: var(--type-lead-intro, var(--type-lead)); filter: blur(14px); opacity: 0; }
.intro__mark { width: clamp(88px, 42px + 4.2vw, 126px);   /* +5% (Chiara 15 Sep) */ opacity: 0; flex: 0 0 auto; }   /* strapline left, wordmark right (Chiara 16 Sep: back to the original order) */
body:not([data-intro]) .intro, body[data-intro="done"] .intro { display: none; }
body[data-intro="1"] .intro__strap { filter: blur(0); opacity: 1; transition: filter 2.2s var(--ease-io), opacity 2.2s var(--ease-io); }   /* beat 1: blurs in */
body[data-intro="2"] .intro__strap { filter: blur(0); opacity: 1; }   /* desktop beat 2: strapline stays, wordmark joins it on the right */
body[data-intro="3"] .intro__strap { filter: blur(0); opacity: 1; }   /* beat 3 (Chiara 16 Sep): hold the strapline so it fades out WITH the wordmark. Without this it falls back to the base opacity:0 and snaps away 324ms early. Phones override this below, where the swap is deliberate */
body[data-intro="2"] .intro__mark, body[data-intro="3"] .intro__mark { opacity: 1; transition: opacity .9s var(--ease-out) .2s; }          /* …and the wordmark appears in its place */
body[data-intro="3"] .intro { opacity: 0; transition: opacity .45s var(--ease-io); }   /* overlay drops fast, then the wipe */
/* the inset panel (Figma beat ③), proportioned like revelatio.studio's container: 60vw wide, lifted 3em. */
:root { --panel-scale: .6; --panel-lift: -60px; }
@media (max-width: 767px) { :root { --panel-scale: .75; --panel-lift: 16px; } }   /* phones (Chiara 5 Oct): opens at .75 (was .85, before that .9), so the growth reads. (Chiara 16 Sep): a gentle panel, sides on the page gutter, top clear of the nav — grows to full bleed over half a screen */
.hero__media { transform-origin: 50% 46%; will-change: transform; }
/* the screen turns on (revelatio.studio): the panel opens from a horizontal line at its centre at the hand-off */
body[data-intro]:not([data-intro="3"]):not([data-intro="done"]) .hero__media { clip-path: inset(50% 0 50% 0); }
body[data-intro="3"] .hero__media, body[data-intro="done"] .hero__media { clip-path: inset(0 0 0 0); transition: clip-path .65s cubic-bezier(.16, 1, .3, 1) .15s; }   /* sharp swipe open from the centre line, after the overlay has gone */
body[data-intro] .hero__media img { filter: brightness(.14) blur(1.4px); opacity: .62; }
body[data-intro="3"] .hero__media img, body[data-intro="done"] .hero__media img { filter: brightness(1) blur(0); opacity: 1; transition: filter .2s linear, opacity .2s linear; }   /* full brightness before the wipe so the edge is crisp */
body[data-intro]:not([data-intro="3"]):not([data-intro="done"]) .nav { transform: translateY(calc(-1 * (var(--nav-top) + var(--nav-h) + 8px))); }
.nav { transition: transform 1s var(--ease-expo); }

/* --- 03 STATEMENT (3048:59/62, stripes, stat strip 3101:128) -------------- */
.statement { position: relative; overflow: hidden; background: var(--statement-bg); padding-block: var(--space-3xl) var(--space-xl); }   /* Figma: 196 top, 76 bottom */
.statement__bg { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%); }   /* Chiara 16 Sep: the stripes ramp in, so the hero fades to black and the section starts from black rather than stepping to the texture */
.statement__bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }   /* Figma Layer_2 (Chiara 15 Sep): stripes + ball in one image */
.statement__in { position: relative; }
.statement h2 { max-width: min(100%, 59.4vw); }   /* Figma 1140 @1920 */
.statement__body { margin-top: var(--space-3xl); margin-left: auto; width: min(100%, 52vw); }   /* Figma: x 817, w 999, 199 below the heading */
.statement__body p + p { margin-top: var(--space-md); }
[data-scrub] span { transition: opacity .12s linear; }
/* stat strip (Group 50, 3101:122): sentence · hairline · sentence on ONE line. Default = 17px stub after the first
   sentence; Variant2 = the line has grown across to the second sentence, which fades in as it arrives. */
.statement__stats { display: flex; align-items: center; gap: var(--space-md); margin-top: calc(var(--space-2xl) + var(--space-lg)); }   /* Figma: 167 below the body */
.statement__stats span { font-size: var(--type-body); letter-spacing: .04em; text-transform: uppercase; color: var(--white-50); white-space: nowrap; }
.statement__stat2 { opacity: 0; transition: opacity .8s var(--ease-out); }
.statement__line { flex: 1 1 auto; height: 1px; position: relative; min-width: 17px; }
.statement__line i { position: absolute; inset: 0; background: var(--white-50); transform: scaleX(0); transform-origin: left center; }
.statement__stats.is-in .statement__line i { transform: scaleX(1); transition: transform 1.8s var(--ease-io) .2s; }
.statement__stats.is-in .statement__stat2 { opacity: 1; transition-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .statement__line i { transform: none !important; } .statement__stat2 { opacity: 1 !important; } }
@media (max-width: 640px) {
  .statement { padding-block: var(--space-lg) var(--space-xl); }                          /* Alex 430: tighter section; top trimmed to lg (Chiara 5 Oct) */
  .statement__bg img { object-position: center; }   /* phones: centred so the stripes sit back behind the copy (Chiara 15 Sep) */
  .statement__body { margin-top: var(--space-xl); }
  .statement__stats { flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; }   /* stacked, centred, short vertical divider */
  .statement__stats span { white-space: normal; font-size: var(--type-nav); }
  .statement__line { flex: 0 0 auto; width: 1px; min-width: 0; height: var(--space-sm); }
  .statement__line i { transform: scaleY(0); transform-origin: center top; }
  .statement__stats.is-in .statement__line i { transform: scaleY(1); transition: transform .7s var(--ease-io) .2s; }   /* divider draws down… */
  .statement__stats.is-in .statement__stat2 { transition-delay: .8s; }                    /* …then the second stat fades in */
}

/* --- 04 WORK WITH BEN (3048:68/69/64/65, 3126:582) ------------------------- */
.wwb { position: relative; min-height: clamp(560px, 62.6vw, 1202px); overflow: hidden; background: var(--bg); }
.wwb__media { position: absolute; inset: 0; overflow: hidden; }
.wwb__media img { position: absolute; left: 0; top: -6%; width: 100%; height: 140%; object-fit: cover; object-position: 50% 22%; will-change: transform; }   /* 30% slack for the Day-1-Run parallax (M7): ~1/6 scroll speed, lagging */
.wwb__scrim { position: absolute; inset: 0; background: var(--scrim-side); }
.wwb__scrim::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 17%; background: var(--scrim-top); }
.wwb__scrim::after  { content: ''; position: absolute; inset: auto 0 0 0; height: 21%; background: var(--scrim-bottom); }
.wwb__in { position: relative; padding-top: clamp(96px, 9.74vw, 187px); padding-bottom: calc(var(--cards-overlap) + var(--space-2xl)); padding-left: calc(var(--gutter) + clamp(0px, 10.35vw - 20px, 178px)); }
.wwb h2 { max-width: 12ch; }
.wwb__body { margin-top: var(--space-sm); max-width: 32ch; }
.wwb .cta { margin-top: var(--space-xl); }

/* --- 05 PATHWAY CARDS (3101:294) — row overlaps the WWB image bottom ------- */
:root { --cards-overlap: clamp(120px, 19.5vw, 375px); }
.cards { position: relative; z-index: 2; margin-top: calc(-1 * var(--cards-overlap)); padding-bottom: 0; background: transparent; }
.cards::after { content: ''; position: absolute; left: 0; right: 0; top: var(--cards-overlap); bottom: 0; background: var(--bg); z-index: -1; }
.cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.cards__count { display: none; }
.card { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius); padding: var(--space-md) clamp(20px, 1.8229vw, 35px) clamp(24px, 1.8229vw, 35px); min-height: clamp(300px, 10.5vw + 218px, 419px); }
.card__eyebrow { margin-bottom: var(--space-xs); }
.card p { margin-top: var(--space-sm); max-width: 44ch; }
.card .cta { margin-top: auto; padding-top: 0; align-self: flex-start; }
.card .cta { margin-top: var(--space-lg); }

/* --- 06 FOUNDED BY BEN (3101:324–342, 3261:145) ---------------------------- */
.founder { padding-block: calc(var(--space-2xl) + var(--space-sm)) var(--space-2xl); }   /* Figma: 139 from the cards' bottom to the eyebrow */
.founder__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
.founder__text { grid-column: 3 / 7; }
.founder__media { grid-column: 7 / 11; }
.founder__media { position: relative; width: 100%; aspect-ratio: 562 / 797; overflow: hidden; border-radius: var(--radius); }   /* explicit width: the image inside is absolute, so without it the frame collapses to 0 in the phone column layout */
.founder__media img { position: absolute; left: -15%; top: -22%; width: 130%; height: auto; max-width: none; will-change: transform; }   /* the mockup portrait (dark, rim light) restored 23 Sep; 30% larger and lifted so the face sits in the upper third */
.founder h2 { margin-top: var(--space-xs); }
.founder__bio { margin-top: var(--space-md); max-width: 50ch; }
.founder .cta--text { margin-top: var(--space-lg); }
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: var(--space-xl); max-width: min(100%, 26vw); }
.logos li { aspect-ratio: 1; background: var(--white-10); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.logos img, .logos svg { width: 62%; max-height: 40%; object-fit: contain; }
.logos .logo-ft { position: relative; width: 38%; }
.logos .logo-bbc { display: flex; gap: 8%; width: 70%; }
.logos .logo-bbc img { width: 30%; max-height: none; }

/* --- 07 TESTIMONIALS (3120:449) — slider, counter, hairline progress ------- */
.testimonials { padding-block: var(--space-2xl) var(--space-3xl); }
.slider { position: relative; margin-top: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--line-dark); }
.slider__track { display: grid; margin-left: 33.7%; }   /* every quote shares one grid cell: the track is always as tall as the longest quote, so nothing below it moves */
.slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; visibility: hidden; pointer-events: none; }   /* name pinned to the bottom of the shared cell */
.slide[data-active], .slide[data-leaving] { visibility: visible; }
.slide[data-active] { pointer-events: auto; }
/* line reveal (revelatio.studio testimonials.js): each line slides inside its own clipping mask */
.t-mask { display: block; overflow: clip; }
.t-line { display: block; will-change: transform; }
.slide blockquote { max-width: 60ch; }
.slide cite { display: block; font-style: normal; margin-top: var(--space-xl); }
.slide cite > span { display: block; color: var(--white-50); }
.slide cite > .slide__name { color: var(--white); }
.slider__foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: var(--space-2xl); }
.slider__count { font-size: var(--type-body); color: var(--white-50); }
.slider__count .n { color: var(--accent); }
.slider__arrows { display: flex; gap: var(--space-xs); }
.slider__btn { width: clamp(64px, 55.9px + 1.8792vw, 92px); height: clamp(36px, 32.8px + 0.7383vw, 47px); border-radius: 30px; background: var(--white); display: flex; align-items: center; justify-content: center; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.slider__btn img { width: 22px; }
.slider__btn--prev img { transform: rotate(180deg); }
.slider__btn[disabled] { opacity: .25; cursor: default; }
.slider__btn:not([disabled]):hover { transform: translateY(-2px); }
.slider__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 16.66%; background: var(--accent); transition: width .45s var(--ease-out); }

/* --- 08 INSIDER 22 COLLAGE (3126:562) — 5300px strip drifts on scroll (M5) - */
/* --- 08 INSIDER 22 — pinned sideways scroll (Chiara 15 Sep). The whole Group 71 strip (16 photos in one
   transparent image) travels right → left while the copy holds centre. JS sets --insider-travel from the
   strip's rendered width, so every photo passes on any screen. --------------------------------------------- */
.insider { position: relative; height: calc(100svh + var(--insider-travel, 1600px) + var(--insider-hold, 0px)); background: var(--bg); }   /* + the phone hold before the strip moves */
.insider__pin { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; }
.strip { position: absolute; left: 0; top: 5%; height: 90%; will-change: transform; }
.strip picture { display: block; height: 100%; }   /* must pass the height down, or the image renders at natural size and the travel undershoots */
.strip img { display: block; width: auto; max-width: none; height: 100%; }
.insider__pin::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--scrim-spot); pointer-events: none; }   /* spotlight: between the strip and the copy */
.insider__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.insider--static { height: auto; }
.insider--static .insider__pin { position: relative; height: clamp(640px, 56vw, 1074px); }
.insider h2 { margin-top: var(--space-sm); max-width: min(100%, 49vw); text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.insider__body { margin-top: var(--space-md); max-width: 44ch; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.insider .cta { margin-top: var(--space-lg); }

/* --- 09 NEWSLETTER BAND (3190:185, 3136:*, 3206:186) ----------------------- */
.newsletter { position: relative; overflow: hidden; background: var(--paper-2); color: var(--ink-2); }
.newsletter__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%); min-height: clamp(560px, 20vw + 300px, 958px); padding-block: var(--space-3xl) var(--space-2xl); }
.newsletter__sub { margin-top: var(--space-md); max-width: 30ch; font-size: var(--type-sub-nl); }
.newsletter__body { margin-top: var(--space-md); max-width: 40ch; }
.newsletter__media { position: absolute; right: 0; top: 0; height: 100%; width: 58%; }
.newsletter__media { overflow: hidden; }
.newsletter__media img { position: absolute; left: 0; top: -10%; height: 120%; width: 100%; object-fit: cover; object-position: left center; will-change: transform; }   /* 20% slack for the parallax (M7) */
.nl-form { margin-top: auto; padding-top: var(--space-2xl); }
.nl-form__tray { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 6px; border-radius: 999px;   /* a true pill at any height, same shape as the fields */ background: color-mix(in srgb, var(--paper-2) 50%, transparent); box-shadow: 2px 2px 4px 4px rgba(0,0,0,.08); max-width: 919px; }
.nl-form input { flex: 1 1 200px; min-width: 0;   /* Safari + Firefox keep an input's built-in width as its flex minimum, so at 1280 the row overflowed and Subscribe dropped to a second line (cross-browser pass 28 Sep) */ height: var(--cta-h); padding-inline: var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--ink-2); background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); font-size: max(16px, var(--cta-size));   /* ≥16px: iOS must not zoom on focus */ font-weight: 500; letter-spacing: var(--track-cta); text-transform: uppercase; color: var(--ink-2); }
.nl-form input::placeholder { color: var(--ink-2); opacity: .8; }
.nl-form input:focus { outline: none; border-color: var(--accent); background: var(--white); }
.nl-form .cta { flex: 0 0 auto; }
.nl-form__trust { margin-top: var(--space-sm); font-size: var(--type-meta); color: var(--ink-2); }
.nl-form__status { min-height: 1.4em; font-size: var(--type-meta); }
.br-phone { display: none; }   /* line breaks that only apply on phones */
.field--honey { position: absolute; left: -9999px; }

/* --- reveal (M8, revelatio.studio grammar, 14 Sep): lines fade in and rise 12px with a 70ms stagger;
   images enter at 1.09 and settle to size; blocks rise 16px. -------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-lines] > * { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 70ms), transform .7s var(--ease-out) calc(var(--i, 0) * 70ms); }
[data-lines].is-in > * { opacity: 1; transform: none; }
[data-settle] { scale: 1.09; transition: scale 1.4s var(--ease-io); }
[data-settle].is-in { scale: 1; }
[data-stagger] > * { opacity: 0; transform: translateY(120px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > :nth-child(2) { transition-delay: .12s; }
[data-stagger].is-in > :nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-lines] > *, [data-stagger] > * { opacity: 1; transform: none; }
  [data-settle] { scale: 1; }
  .wwb__media img { height: 100%; top: 0; transform: none !important; }
  .founder__media img { transform: none !important; }
}

/* --- responsive: layout flips only (spec §9 tablet; mobile provisional) ---- */
@media (max-width: 1024px) {
  .statement__body { margin-left: 0; width: min(100%, 60ch); }
  .wwb__in { padding-left: var(--gutter); padding-top: clamp(96px, 30vw, 260px); }
  .cards__grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-sm); -webkit-overflow-scrolling: touch; }
  .card { flex: 0 0 78vw; scroll-snap-align: start; }
  .founder__text { grid-column: 1 / 8; }
  .founder__media { grid-column: 8 / 13; }
  .slider__track { margin-left: 0; }
  .newsletter__in { grid-template-columns: 1fr; }
  .newsletter__media { display: none; }
}
@media (max-width: 640px) {
  .intro { display: grid; place-items: center; text-align: center; }                      /* phones: wordmark takes the strapline's place */
  .intro__strap, .intro__mark { grid-area: 1 / 1; order: 0; }
  body[data-intro="2"] .intro__strap, body[data-intro="3"] .intro__strap { filter: blur(14px); opacity: 0; transition: filter 1s var(--ease-io), opacity 1s var(--ease-io); }
  body[data-intro="2"] .intro__mark, body[data-intro="3"] .intro__mark { transition: opacity .9s var(--ease-out) 1.3s; }   /* phones: the 22 waits until the strapline has fully gone, plus a beat, before fading in (Chiara 15 Sep) */
  .nl-form__tray { flex-direction: column; flex-wrap: nowrap; padding: 6px; border-radius: calc(var(--cta-h) / 2 + 6px); }   /* client 20 Sep: name, email and subscribe stack on phones so a full email address stays readable; tray corners concentric with the fields */
  .nl-form input { flex: 0 0 auto; width: 100%; min-width: 0; text-transform: none; letter-spacing: .02em; font-weight: 400; }        /* 16px must stay (iOS zoom); sentence case reads a size smaller */
  .nl-form .cta { width: 100%; }
  .nl-form input::placeholder { text-transform: none; letter-spacing: .02em; }
  .hero .cta, .wwb .cta, .insider .cta { width: 100%; align-self: stretch; }               /* solid section buttons full width on phones */
  .insider h2, .wwb h2 { font-size: var(--type-display); }   /* every H2 on the phone ladder (was h3 = 28, now 32; Chiara 5 Oct audit) */
  .statement h2 br { display: none; }   /* phones: let the headline wrap naturally, balanced, hyphenated word kept whole */
  .statement h2 { text-wrap: balance; }
  .statement h2 .accent { white-space: nowrap; }
  .intro__strap, .hero__strap { max-width: 100%; text-wrap: balance; }   /* no orphaned last word */
  /* Work with Ben on phones (Alex 430): copy at the top over a top scrim, Ben fills the frame below, the cards overlap the bottom */
  :root { --cards-overlap: 72vw; }
  .wwb { min-height: 214vw; }
  .wwb__media img { top: -2%; height: 118%; object-position: 76% 50%; }   /* Alex 430 frame: Ben's whole upper body, face below the CTA. Section ≈ one screen tall, so parallax edges never show */
  .wwb__scrim::before { height: 42%; }
  .wwb__scrim::after { height: 30%; }
  .wwb__in { position: relative; inset: auto; display: block; padding-top: var(--space-2xl); padding-bottom: 0; }
  .wwb__body { max-width: none; }
  .hero { min-height: 560px; }
  /* phones: the collage is a swipeable photo row above the copy, not a backdrop behind it */
  .insider__pin::after { background: var(--scrim-spot-phone); }   /* Alex 430: photos behind the copy, spotlight sized for full-width text */
  .insider h2, .insider__body, .statement h2, .wwb h2, .wwb__body { max-width: none; }   /* phones: headlines use the full measure */
  .hero .cta { align-self: stretch; }
  .cards__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-sm); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }   /* Alex 430: swipe carousel, next card peeks */
  .cards__grid::-webkit-scrollbar { display: none; }
  .cards__grid.is-drifting { scroll-snap-type: none; overflow-x: hidden; }   /* scroll-driven on phones: no snap fighting the drift, no finger scroll fighting it either */
  .cards__count { display: block; margin-top: var(--space-sm); }
  .card { flex: 0 0 calc(100% - var(--space-lg)); min-height: 0; scroll-snap-align: start; }
  .founder__grid { display: flex; flex-direction: column-reverse; gap: var(--space-lg); }
  .logos { max-width: none; }
  .slider__foot { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  /* one motion per photo on phones (Chiara 15 Sep): no entrance zoom on top of the parallax */
  .wwb__media, .newsletter__media { scale: 1; }
  /* Newsletter on phones (Alex 430, form stacked per client 20 Sep): copy, a stacked form, then the phone-in-hand rising from the bottom edge */
  .br-phone { display: inline; }
  .newsletter { display: flex; flex-direction: column; }
  .newsletter__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--space-xl) 0; }   /* minmax(0): the form must not stretch the column past the screen */
  .nl-form { padding-top: var(--space-lg); }
  .nl-form__trust { text-align: center; }
  .newsletter__media { display: block; position: relative; order: 2; right: auto; top: auto; width: 100%; height: auto; aspect-ratio: 430 / 415; }   /* no top margin: the crop's own headroom gives Alex's ≈40px gap under the trust line */
  .newsletter__media img { top: auto; bottom: -11.3%; height: auto; }   /* image is 11% taller than the frame: slack below for the parallax, transparent above */
}

/* Founder portrait = Ben speaking at NYC Sessions (C79A7973, Ben's pick, 5 Oct), cut out onto black */
.founder__media img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }   /* no crop slack: the image ground is black, so parallax travel never shows an edge, and the shoulder stays in frame */
@media (min-width: 961px) { .founder__media { width: 110%; } }   /* Ben's portrait 10% bigger on desktop (Chiara 5 Oct): grows into the empty column to its right; phones already run it full width */
@media (max-width: 960px) { .founder__media { aspect-ratio: 1200 / 1420; } .founder__media img { object-position: 50% 25%; } }   /* phones/tablets: frame tightened round the figure, so no empty black above the head or below the fade (Chiara 5 Oct) */
@media (max-width: 640px) { .founder { padding-top: var(--space-md); } }   /* phones: less air between the testimonials and Ben (Chiara 5 Oct) */
@media (max-width: 640px) {   /* phones: a shorter pinned stage, so the strip sections do not trail a near-empty half screen (Chiara 5 Oct) */
  .insider { height: calc(78svh + var(--insider-travel, 1600px) + var(--insider-hold, 0px)); }
  .insider__pin { height: 78svh; min-height: 560px; }
}
@media (max-width: 640px) { .insider__in { justify-content: flex-end; padding-bottom: var(--space-xl); } }   /* phones: the strip copy sits low in the stage, so no empty band trails it into the next section (Chiara 5 Oct) */