body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
[id]{scroll-margin-top:6.5rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.eyebrow{
  font-family:var(--cond);font-weight:400;font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1;
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* underline link ----------------------------------------------
   Open Sans 600 at near-normal tracking: condensed letterforms plus .2em of
   letter-spacing read as scattered capitals rather than a word. */
.ulink{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:.9375rem;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.42em;position:relative;color:var(--ink-deep);
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .42s var(--ease);
}
.ulink:hover::after{transform:scaleX(0);transform-origin:left}
.ulink .arw{transition:transform .42s var(--ease)}
.ulink:hover .arw{transform:translateX(5px)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.6rem 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}


/* ====================== CORPORATE HERO ======================= */
/* height-capped so the terracotta stats bar is already in the first screen.

   the ground is the home page's: blush, the darker beige of the palette,
   with soft gradient discs along the edges — see index.html. the disc
   positions are mirrored here, because this page puts the portrait left
   and the copy right, the reverse of the home hero. */
.chero{
  background:var(--blush);
  /* bottom padding held at 35% of the old value so the press row sits close
     above the terracotta stats bar instead of floating in the middle */
  padding:clamp(8rem,13vh,10rem) 0 clamp(.875rem,1.6vw,1.4rem);
  /* the glow layer measures itself against this box, overflow keeps the discs
     off the stats bar below, and isolation holds the z-index:-1 layer inside
     the section instead of dropping it behind the page */
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* ---- gradient discs ------------------------------------------
   four soft discs, each half out of frame, so colour sits along the
   edges and the middle stays quiet. the blur is on the layer, not on
   every disc — one filter instead of four. */
.chero__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  filter:blur(clamp(45px,7vw,110px));
  /* the blur would otherwise pull the edges back in as a pale seam */
  transform:scale(1.08);
}
.chero__glow i{
  position:absolute;display:block;border-radius:50%;
}
/* top right, apricot */
.chero__glow i:nth-child(1){
  right:-8%;top:-18%;width:38vw;height:38vw;max-width:640px;max-height:640px;
  background:radial-gradient(circle,rgba(237,165,125,.85) 0,rgba(237,165,125,0) 70%);
}
/* bottom right, tan — holds the text column together at the foot */
.chero__glow i:nth-child(2){
  right:-14%;bottom:-26%;width:34vw;height:34vw;max-width:560px;max-height:560px;
  background:radial-gradient(circle,rgba(169,133,112,.5) 0,rgba(169,133,112,0) 70%);
}
/* top left, terracotta — sits behind the portrait */
.chero__glow i:nth-child(3){
  left:-12%;top:-14%;width:40vw;height:40vw;max-width:680px;max-height:680px;
  background:radial-gradient(circle,rgba(196,99,60,.42) 0,rgba(196,99,60,0) 70%);
}
/* bottom left, cream — lifts the corner above the bar */
.chero__glow i:nth-child(4){
  left:-6%;bottom:-22%;width:30vw;height:30vw;max-width:520px;max-height:520px;
  background:radial-gradient(circle,rgba(251,249,248,.9) 0,rgba(251,249,248,0) 70%);
}
.chero__grid{
  position:relative;
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,5.5rem);align-items:center;
}
/* cut-out portrait, lifted off the beige by a soft light disc.
   sized by height so the section always fits above the fold.
   the disc is cream, not blush: on the blush ground a blush plate is
   invisible, and light is what lifts the cut-out here — same as index.html */
.chero__cut{
  margin:0 auto;position:relative;isolation:isolate;
  width:fit-content;max-width:100%;
}
.chero__cut::before{
  content:"";position:absolute;z-index:-1;inset:6% -10% 10% -10%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(251,249,248,.85),rgba(251,249,248,0) 70%);
}
.chero__cut img{
  height:clamp(390px,57vh,598px);width:auto;max-width:100%;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}
/* one shared rhythm for the whole copy stack: name → role → line → button →
   press row all sit the same distance apart, which pushes the press row down */
.chero__copy{
  position:relative;text-align:center;
  --stack:clamp(2rem,3.6vw,2.9rem);
  --tight:calc(var(--stack) * .45);
}
/* name sits on one line — sized so it never outruns its column.
   the name and the role under it read as one unit: they sit a --tight gap
   apart and the pair carries its own lead-in, which drops it down the column */
.chero__name{
  font-family:var(--serif);
  font-size:clamp(3.12rem,1.08rem + 6.48vw,7.2rem);
  line-height:1;letter-spacing:-.035em;
  margin:calc(var(--stack) * .4) 0 0;
}
.chero__name .hi{
  font-style:italic;font-weight:500;color:var(--terracotta);letter-spacing:-.02em;
}
.chero__role{
  margin:var(--tight) auto 0;
  font-family:var(--cond);font-weight:400;
  font-size:clamp(.975rem,.9rem + .34vw,1.125rem);
  letter-spacing:.18em;text-transform:uppercase;
  line-height:1.5;color:var(--ink-soft);
}
/* highlighter stroke behind the role — a marker pen swept left to right once
   the line itself has finished arriving (.1s reveal delay + .95s fade = .9s is
   the last moment before it lands), so it reads as a second beat rather than
   part of the fade. the ink stays on top: the wash is translucent apricot, and
   the uneven radius plus the slight tilt keep it off a drawn box.
   the vertical insets come off Barlow's own metrics — in a 1.5em line box its
   1.2em content area starts at .15em, which puts the baseline at 1.15em and the
   .7em cap top at .45em; .28em / .19em therefore leave ~.17em of wash above the
   caps and ~.16em below the baseline. the right inset is shorter than the left
   to pay back the .18em of trailing letter-spacing the last character carries,
   so the wash sits centred on the words rather than on their box. */
.chero__role .mark{position:relative;display:inline-block;isolation:isolate}
.chero__role .mark::before{
  content:"";position:absolute;z-index:-1;
  inset:.28em -.32em .19em -.5em;
  border-radius:.5em .35em .45em .3em / .9em .8em .85em .95em;
  background:linear-gradient(101deg,
    rgba(237,165,125,.78) 0%,rgba(237,165,125,.62) 46%,rgba(196,99,60,.30) 100%);
  transform:rotate(-.35deg);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .78s var(--ease) .9s;
}
.chero__role.is-in .mark::before{clip-path:inset(0 0 0 0)}
.chero__line{
  margin:var(--stack) auto 0;max-width:22ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.56rem,1.2rem + 1.62vw,2.7rem);
  line-height:1.2;letter-spacing:-.028em;color:var(--ink);
}
.chero__line em{font-style:italic;color:var(--terracotta)}
.chero__cta{
  margin-top:var(--stack);
  display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;
}
/* the press line, same as on the corporate offerings page: no plaque, just a
   hairline with the label and the three marks sitting in one row under it.
   the gap to the buttons is split around the rule — 55% above, 45% below — so
   it sits just past the middle and still reads as part of the press row */
.chero__feat{
  --feat-gap:var(--stack);
  margin-top:calc(var(--feat-gap) * .55);
  padding-top:calc(var(--feat-gap) * .45);
  border-top:1px solid rgba(83,79,81,.22);
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:clamp(.9rem,1.9vw,1.6rem);
}
/* the inner wrapper hands its children straight to the row above */
.chero__feat-in{display:contents}
.chero__feat-t{
  font-family:var(--serif);font-style:italic;font-weight:400;line-height:1;
  font-size:clamp(1.3rem,1.15rem + .55vw,1.6rem);color:var(--ink);
  white-space:nowrap;
}
/* this column is narrower than the corporate one, so the label and the three
   marks are held ~12% below the corporate scale and the gap is tightened —
   the row keeps its relative weighting but stays on one line */
.chero__feat .logo-mark{white-space:nowrap}
.chero__feat .logo-mark--stylist,
.chero__feat .logo-mark--huff{font-size:clamp(1.25rem,1.05rem + .8vw,1.85rem)}
.chero__feat .logo-mark--bbc{font-size:clamp(1rem,.85rem + .58vw,1.48rem)}

/* pulsing request button -------------------------------------
   three stacked box-shadow rings ripple outwards in the button's
   own pill shape, then fade — no extra elements needed */
.btn--pulse{
  animation:pulseRipple 3s infinite cubic-bezier(.25,.8,.25,1);
}
.btn--pulse:hover,.btn--pulse:focus-visible{animation:none}
/* the arrow points down, so nudge it down rather than sideways on hover */
.btn--pulse:hover .arw{transform:translateY(3px)}
@keyframes pulseRipple{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(196,99,60,.5),
               0 0 0 0 rgba(196,99,60,.3),
               0 0 0 0 rgba(196,99,60,.16);
  }
  50%{
    transform:scale(1.06);
    box-shadow:0 0 0 10px rgba(196,99,60,0),
               0 0 0 22px rgba(196,99,60,0),
               0 0 0 34px rgba(196,99,60,0);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(196,99,60,0),
               0 0 0 0 rgba(196,99,60,0),
               0 0 0 0 rgba(196,99,60,0);
  }
}

/* ========================== STATS ============================ */
.stats{background:var(--terracotta);color:#fff}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{
  position:relative;text-align:center;
  /* the numeral size lives on the card, not on .stat__n, because the label's
     optical pull below is a fraction of it and has to follow it through the
     clamp and through the 560px step-down */
  --stat-n:clamp(2.3rem,1.5rem + 2.7vw,3.85rem);
  padding:clamp(1.5rem,2.5vw,2.05rem) clamp(.9rem,2.2vw,2rem) clamp(1.25rem,2vw,1.6rem);
}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;
  background:rgba(255,255,255,.34);
}
.stat__n{
  display:block;font-family:var(--serif);font-weight:400;color:#fff;
  font-size:var(--stat-n);
  line-height:.92;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.stat__n i{font-style:normal}
.stat__l{
  display:block;margin:clamp(.55rem,1.1vw,.85rem) auto 0;
  font-family:var(--cond);font-weight:500;
  font-size:clamp(.75rem,.71rem + .18vw,.8125rem);
  /* Tracking was .2em, which opened the words up so far they read as loose
     letters rather than a label. .12em still sets them apart at this size. */
  letter-spacing:.12em;text-transform:uppercase;line-height:1.55;
  /* Optical centring under the numeral. letter-spacing is applied after the
     last letter too, so each line's ink sits .06em (half the tracking) left of
     its box -> pad that back. An extra .156em used to ride along here to
     compensate for the numerals' sidebearings, but it overshot and read as the
     label sitting right of the number, so it's gone — the same call the home
     page already made.
     max-width carries the pad so the content box stays 20ch and the two-line
     breaks hold; 20ch keeps "Tailored Strategies" wrapping with room to spare
     at the tighter tracking, where 22ch left only ~1.6px of margin. */
  color:#fff;max-width:calc(20ch + .12em);padding-left:.12em;
  /* and then the pull below, which is what actually hangs it on the number.
     An offset rather than a margin, so it cannot touch the 20ch wrap width. */
  position:relative;left:calc(var(--stat-n) * var(--stat-pull,0));
}
/* Every numeral here closes on a sign the eye does not count as part of the
   number, and the label is hung on the centre of the whole line — so it lands
   right of the number itself, worst under the wide "%". Each pull is the
   distance from that line's centre to the centre of the number's own ink,
   measured with fontTools off the shipped Playfair (glyph advances under the
   numeral's -.035em tracking), and given in the numeral's own em so it follows
   --stat-n through both of its clamps:
       "56k+"  number "56k"  ->  -.239em    ~15px at the desktop maximum
       "5+"    number "5"    ->  -.256em    ~16px
       "100+"  number "100"  ->  -.262em    ~16px
       "100%"  number "100"  ->  -.205em    ~13px, on the shortened % below
   The k stays with "56": it is part of the count, only the + is a sign. */
.stat:nth-child(1){--stat-pull:-.239}
.stat:nth-child(2){--stat-pull:-.256}
.stat:nth-child(3){--stat-pull:-.262}
.stat:nth-child(4){--stat-pull:-.205}
/* Playfair's figures are old-style — "100" tops out at 529 of the em — but its
   "%" is drawn for lining figures and runs -55..824, half again as tall, which
   is why it read as a size larger than the number beside it. .642em sets its top
   on the digits' 529 and leaves it a 35-unit descender, so it measures 564
   against their 543. Scaling costs stroke: the ring stem goes 70 -> 45 where the
   digits carry 97, so the sign takes the 500 weight of the variable face to win
   a little of that back (50) without changing its drawing. The "+" signs are
   left alone — at 501 units they already sit inside the figures' height. */
.stat:nth-child(4) .stat__n i{font-size:.642em;font-weight:500}

/* ===================== PRESS WORDMARKS ======================= */
/* the marks are links now — a{color:inherit} in the reset does not
   strip the UA underline, and on the BBC blocks it would sit across
   the knocked-out letters */
.logo-mark{color:var(--ink);opacity:.78;transition:opacity .4s var(--ease);line-height:1;text-decoration:none}
.logo-mark:hover,.logo-mark:focus-visible{opacity:1}
.logo-mark--stylist{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.75rem,1.25rem + 2.1vw,3.05rem);
  letter-spacing:.06em;text-transform:uppercase;
}
.logo-mark--huff{
  font-family:var(--cond);font-weight:600;font-style:italic;
  font-size:clamp(1.75rem,1.25rem + 2.1vw,3.05rem);
  letter-spacing:-.012em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.2em;
}
.logo-mark--huff::before,.logo-mark--huff::after{
  content:"";width:.13em;height:.82em;background:currentColor;
}
.logo-mark--bbc{
  display:inline-flex;gap:.14em;
  font-family:var(--cond);font-weight:600;
  font-size:clamp(1.5rem,1.05rem + 1.85vw,2.6rem);text-transform:uppercase;
}
.logo-mark--bbc span{
  background:var(--ink);color:var(--cream);
  padding:.15em .28em;line-height:1;letter-spacing:.02em;
}

/* ======================== REVEALS ============================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

main{flex:1 0 auto}

/* ======================= THE SPEAKER ========================= */
/* the page's opening statement, same construction as the corporate page's
   understanding block: headline over a hairline, then copy left / portrait
   right. Half the usual section lead-in at both ends so the terracotta stats
   bar above it and the topics below stay close. */
.speaker{background:var(--white);padding:clamp(2.75rem,5.5vw,4.75rem) 0}
.speaker__head{padding-bottom:clamp(2.2rem,4vw,3rem);border-bottom:1px solid var(--hairline)}
.speaker__t{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,1.1rem + 3.3vw,4rem);
  line-height:1.08;letter-spacing:-.034em;
}
.speaker__t em{font-style:italic;color:var(--terracotta)}
.speaker__grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);align-items:start;
  margin-top:clamp(2.4rem,4.4vw,3.6rem);
}
.speaker__grid p{
  color:var(--ink-soft);line-height:1.72;
  font-size:clamp(1.01rem,.95rem + .36vw,1.18rem);
}
/* reads as a normal body paragraph; only the closing clause is underlined */
.speaker__pull b{
  font-weight:400;
  text-decoration:underline;
  text-decoration-color:var(--apricot);
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
}
.speaker__cta{margin-top:clamp(1.6rem,2.9vw,2.2rem)}
.speaker__fig{margin:0;position:relative}
/* same square as the photo, just offset down-right */
.speaker__fig::before{
  content:"";position:absolute;z-index:0;inset:0;
  transform:translate(6%,6%);
  background:var(--blush);border-radius:6px;
}
.speaker__fig img{
  position:relative;z-index:1;width:100%;border-radius:6px;
  aspect-ratio:1;object-fit:cover;   /* square crop */
  box-shadow:0 40px 80px -55px rgba(20,18,17,.6);
}

/* ======================= SECTION HEAD ======================== */
.sec-head{margin-bottom:clamp(2.4rem,4.6vw,3.6rem)}
.sec-head__t{
  font-family:var(--serif);font-size:clamp(2.1rem,5.4vw,4.6rem);
  line-height:1.02;letter-spacing:-.038em;
}
.sec-head__t em{font-style:italic;color:var(--terracotta)}
.sec-head__p{
  margin-top:clamp(1.1rem,2.2vw,1.6rem);
  color:var(--ink-soft);font-size:clamp(1.02rem,.97rem + .3vw,1.14rem);line-height:1.75;
}

/* ====================== KEYNOTE TOPICS ======================= */
.topics{background:var(--sand);padding:clamp(2.75rem,5.5vw,4.75rem) 0 clamp(3.3rem,6.6vw,5.7rem)}
/* align-items:start rather than the default stretch: the copy is collapsed to a
   three-line preview, so a card that is opened grows past its row-mate. Stretched,
   the one still closed would grow with it and hold a column of empty white
   between its preview and its buttons. Each card carries its own height instead;
   closed, they only differ by how many lines the title takes. */
.kcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,2.4vw,2rem);align-items:start}
.kcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--hairline);border-radius:8px;
  padding:clamp(1.7rem,2.8vw,2.5rem);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .55s var(--ease);
}
/* accent rule wipes in across the top on hover, same as the corporate cards */
.kcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  background:var(--terracotta);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.kcard:hover{
  transform:translateY(-10px);border-color:transparent;
  box-shadow:0 50px 80px -48px rgba(83,79,81,.6);
  transition-delay:0s;
}
.kcard:hover::before{transform:scaleX(1)}
.kcard__num{font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1;color:var(--apricot)}
.kcard__title{
  font-family:var(--serif);font-size:clamp(1.4rem,1.15rem + .9vw,2.05rem);
  line-height:1.1;letter-spacing:-.03em;margin-top:.7rem;
}
/* topic 03's is the longest of the four titles and at some widths its natural
   break leaves the first line all but flush with the column edge — 99% of it
   around 1280px, close enough that a font swap or a rounding difference would
   tip it to three lines. balance splits the two evenly instead. It cannot add a
   line: the browser settles the line count first and balances within it, so this
   only ever moves where the break falls, never how many there are. */
.kcard__title--long{text-wrap:balance}
/* .839375rem is the .9875rem body size less 15% — the card copy only, the title
   keeps its own scale. The leading comes in from 1.8 to 1.7 to match: 1.8 was set
   for 16px text and leaves rivers at 13.4px. */
/* margin-bottom is zeroed against the global p{margin:0 0 1.15em}: the card is a
   flex column, so sibling margins do not collapse the way they would in normal
   flow — a body paragraph followed by another was carrying 1.15em + the top
   margin below, i.e. roughly double the gap the copy was meant to have. The
   top margin alone sets it now, so title-to-copy and copy-to-copy match. */
.kcard__body{
  margin:clamp(1rem,1.8vw,1.4rem) 0 0;
  color:var(--ink-soft);font-size:.839375rem;line-height:1.7;
}
/* the full margin above is the step down from the title. Between paragraphs it
   read as a blank line: at this leading the two half-leadings already carry ~10px
   of their own, so 1.4rem on top of that opened a gap taller than a line of text.
   Roughly half that is enough to mark the break. */
.kcard__body + .kcard__body{margin-top:clamp(.55rem,1vw,.75rem)}

/* the copy panel: three lines of preview, the rest dissolving into the card ----
   --kline is one line box of .kcard__body — its .839375rem size times its 1.7
   leading — so everything here is stated in lines rather than in round rem
   figures that would drift off the baseline the day that type scale is touched.
   4.5 of them, not 3: two lines read clean, the third is where the fade opens,
   and the rest is its working space. A fade needs room — cut at 3.75 with a
   one-line gradient it had two thirds of a line to act in and the fourth line
   came out chopped rather than dissolved.
   4.5 also puts the clip above the point where the cards stop agreeing with each
   other. Topic 01's first paragraph runs to four lines, topic 02's runs past
   five, so at a deeper clip 01's fifth visible line was not its fifth line at
   all but the *next paragraph's* first — sitting half a line lower for the
   paragraph gap above it, and that half line was enough to drop it from 60% to
   84% white. Same gradient, and the left-hand card looked like it had simply
   ended while the right-hand one dissolved. Clipped here, that paragraph falls
   below the edge entirely and every card fades on its own line four.
   The clamp on top is the first paragraph's step down from the title, counted in
   because overflow:hidden makes this its own block formatting context and holds
   that margin inside rather than letting it escape to the title above.
   max-height rather than height because the open state has no number to animate
   to: the script writes the measured pixel height in, lets the transition run,
   and then clears it to none so the card can reflow with the viewport. */
.kcard__panel{
  --kline:calc(.839375rem * 1.7);
  position:relative;overflow:hidden;
  max-height:calc(clamp(1rem,1.8vw,1.4rem) + var(--kline) * 4.5);
  transition:max-height .55s var(--ease);
}
/* the paywall fade. Pinned to the clip edge and 2.5 lines tall, so it opens on
   the top edge of the third line box: two lines read clean, the third is going
   (10% white at its ascenders, 38% by its descenders), the fourth is most of the
   way gone at 60–87%, and it is solid --white — the card ground — a fifth of a
   line before the edge, so the clip itself never shows.
   The stops are a curve, not the straight ramp two colours would interpolate.
   Where the fade *starts* and where it *reads* as starting are not the same
   point: against dark text the eye finds the first few per cent of white, so an
   ease that idles at the top pushes the apparent start a full line down — which
   is how a gradient that opened in line three read as beginning in line five.
   These stops bite early instead, 10% white inside the opening line's own
   ascenders, then run near-linear so there is no edge to find at either end. */
.kcard__panel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:calc(var(--kline) * 2.5);
  background:linear-gradient(to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.10) 12%,
    rgba(255,255,255,.28) 28%,
    rgba(255,255,255,.50) 45%,
    rgba(255,255,255,.72) 62%,
    rgba(255,255,255,.89) 78%,
    var(--white)          92%);
  pointer-events:none;transition:opacity .4s var(--ease);
}
.kcard.is-open .kcard__panel::after{opacity:0}
/* no-JS: the panel opens rather than trapping the copy behind a dead button */
.no-js .kcard__panel{max-height:none}
.no-js .kcard__panel::after,.no-js .kcard__toggle{display:none}

/* the buttons are pinned to the floor of the card and sit side by side, the
   toggle first: it is the one that acts on the card it lives in, the terracotta
   one leaves the section. */
.kcard__cta{
  margin-top:auto;padding-top:clamp(1.5rem,2.6vw,2.1rem);
  display:flex;flex-wrap:wrap;gap:.7rem;
}
.kcard__cta .btn{padding:.85em 1.75em;font-size:.875rem;letter-spacing:.16em}
/* .btn slides the arrow sideways on hover, which reads as "onward" — wrong for
   a control that opens the box you are standing in. It nods down instead, and
   flips to point back up once the copy is out. */
.kcard__toggle .arw{transform:none}
.kcard__toggle:hover .arw,.kcard__toggle:focus-visible .arw{transform:translateY(3px)}
.kcard.is-open .kcard__toggle .arw{transform:rotate(180deg)}
.kcard.is-open .kcard__toggle:hover .arw,
.kcard.is-open .kcard__toggle:focus-visible .arw{transform:rotate(180deg) translateY(3px)}

/* speaking CTA band --------------------------------------------
   --blush rather than the cards' white: this closes the topic list rather than
   reading as a fifth topic. It is also the ground the cut-out standing in this
   band was shot against, which keeps the terracotta dress off a same-hue
   background. */
.speak-cta{
  margin:clamp(2.4rem,4.4vw,3.6rem) auto 0;
  max-width:min(100%,50rem);
  background:var(--blush);border-radius:8px;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:end;gap:clamp(1rem,2vw,1.8rem);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* the extra selector is load-bearing: the band also carries .rv, and
   .rv.is-in{transform:none} sits later in the sheet — at equal specificity it
   would win and the lift would never happen */
.topics .speak-cta:hover{
  transform:translateY(-6px);
  box-shadow:0 48px 78px -50px rgba(83,79,81,.6);
}
/* she grows with the band rather than riding it flat. Origin at the floor so her
   feet stay planted — scaling from the centre lifts her off it. */
.topics .speak-cta:hover .speak-cta__fig img{transform:scale(1.035)}
.speak-cta__fig{margin:0 0 0 clamp(.8rem,2.6vw,2.6rem);align-self:end}
.speak-cta__fig img{
  height:clamp(250px,24vw,370px);width:auto;max-width:100%;
  transform-origin:50% 100%;transition:transform .55s var(--ease);
}
.speak-cta__body{
  padding:clamp(1.9rem,3.2vw,2.9rem) clamp(1.5rem,2.6vw,2.2rem);
  text-align:center;
}
.speak-cta__label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta);
  margin-bottom:.75rem;
}
.speak-cta__t{
  font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + .9vw,1.95rem);
  line-height:1.2;letter-spacing:-.02em;margin:0 0 .7rem;
}
.speak-cta__p{
  font-size:.9375rem;line-height:1.7;color:var(--ink-soft);
  margin:0 auto clamp(1.3rem,2.2vw,1.7rem);max-width:46ch;
}
/* the site button carries 1.02em of vertical padding, sized for a button standing
   alone — inside the band that reads as a slab with a word floating in it.
   margin-bottom keeps the outermost pulse ring off the band's own edge. */
.speak-cta__body .btn{padding-block:.72em;margin-bottom:.4rem}

/* ========================= WHY ROSIE ========================= */
/* dark ground, so the copy inside has to flip to the light end */
.bene{
  background:rgb(84 79 81);color:var(--cream);
  padding:clamp(4rem,8vw,7rem) 0;overflow:hidden;
}
.bene__grid{
  position:relative;display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
/* portrait with a thin apricot outline offset behind it */
.bene__fig{margin:0;position:relative;max-width:520px}
.bene__fig::before{
  content:"";position:absolute;z-index:0;inset:7% 11% -7% -11%;
  border:1px solid var(--apricot);border-radius:2px;
}
.bene__fig img{
  position:relative;z-index:1;width:100%;border-radius:2px;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;
}
.bene__t{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,1.15rem + 2.5vw,3.2rem);
  line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.1rem,2.2vw,1.7rem)}
.checks li{
  display:flex;gap:clamp(.9rem,1.8vw,1.3rem);align-items:center;
  font-size:clamp(1.125rem,.92rem + .38vw,1.275rem);
  /* ink-soft is near-black — it has to invert on the dark ground */
  line-height:1.5;color:var(--white);
}
.checks .ico{
  flex:0 0 auto;color:var(--apricot);
  width:clamp(1.6rem,1.4rem + .8vw,2.1rem);
  height:clamp(1.6rem,1.4rem + .8vw,2.1rem);
}
/* the rows reveal one after the other instead of as one block */
.checks li:nth-child(1){transition-delay:.06s}
.checks li:nth-child(2){transition-delay:.13s}
.checks li:nth-child(3){transition-delay:.2s}
.checks li:nth-child(4){transition-delay:.27s}
.checks li:nth-child(5){transition-delay:.34s}
.checks li:nth-child(6){transition-delay:.41s}
/* the ripple needs room to expand without the section clipping it */
.bene__cta{margin-top:clamp(2.2rem,4vw,3.2rem);padding-bottom:.4rem}

/* ========================== PILLARS ========================== */
/* the three turns the story took, side by side — one card each */
.pill{background:var(--sand);padding:clamp(2.75rem,5.5vw,4.75rem) 0}
.pill__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.4vw,2rem)}
/* a column, so the illustration can be pushed to the floor of the card and the
   three of them line up however long the copy above each one runs */
.pcard{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--hairline);border-radius:8px;
  padding:clamp(1.7rem,2.8vw,2.4rem);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.pcard:hover{
  transform:translateY(-8px);border-color:transparent;
  box-shadow:0 46px 76px -50px rgba(83,79,81,.55);
}
.pcard__n{
  font-family:var(--cond);font-weight:500;font-size:.8125rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terracotta);display:block;
}
.pcard__t{
  font-family:var(--serif);font-size:clamp(1.35rem,1.15rem + .75vw,1.85rem);
  line-height:1.12;letter-spacing:-.03em;margin-top:.75rem;
}
.pcard__p{margin-top:1.05rem;color:var(--ink-soft);font-size:.9375rem;line-height:1.82;flex:1}
/* transparent PNGs standing on the card's own white — no plate behind them, they
   carry their own silhouette. They rise with the card on hover so the whole thing
   moves as one object rather than the drawing lagging behind the box.
   A fixed band rather than a fixed width: the three drawings do not share a
   proportion — the desk scene is close to 2:1 where the other two are square — so
   sizing them by width stood them on three different heights and the gap above
   each one came out different. Sized by height they sit in one band, and the
   space above them is the margin and nothing else. The drawings are bottom-
   aligned inside it, on the floor of the card. */
.pcard__ill{
  margin:clamp(.8rem,1.4vw,1.1rem) auto 0;
  height:clamp(6.5rem,9vw,9.375rem);
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform .55s var(--ease);
}
.pcard:hover .pcard__ill{transform:translateY(-4px) scale(1.04)}
/* max-* rather than height:100%: on the narrowest three-column layout the wide
   drawing runs out of room sideways first, and this lets it give up height for
   width instead of distorting */
.pcard__ill img{max-height:100%;max-width:100%;width:auto;height:auto}
.pill__more{margin-top:clamp(2rem,3.6vw,2.8rem);text-align:center}

/* ============================================================
   FAQ — sticky heading, native <details> accordion
   <details> so the answers are readable and linkable with JS off.
   ============================================================ */
.faq{background:var(--white);padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3.5rem,7vw,6.3rem)}
/* The headline sits in its own row so the questions can start level with the
   photograph rather than with the top of the headline. */
.faq__grid{
  display:grid;grid-template-columns:.72fr 1.28fr;
  grid-template-areas:"head head" "fig list" "cta cta";
  column-gap:clamp(2.5rem,6vw,5.5rem);row-gap:clamp(1.8rem,3.4vw,2.6rem);
  align-items:start;
}
.faq__head{grid-area:head;text-align:center}
/* one line, centred, across the whole grid. The vw term is what keeps it to that
   one line: it sizes the headline off the viewport until the wrap stops growing,
   and the 4.4rem cap is the largest that still clears the gutters at 1320px. */
.faq__t{
  font-family:var(--serif);font-size:clamp(1rem,5.45vw,4.4rem);
  line-height:1;letter-spacing:-.038em;text-transform:uppercase;white-space:nowrap;
}
.faq__t em{font-style:italic;color:var(--terracotta);text-transform:none}
.faq__fig{grid-area:fig;margin:0;position:relative}
.faq__fig::before{
  content:"";position:absolute;inset:7% -8% -7% 8%;border:1px solid var(--apricot);border-radius:2px;
}
.faq__fig img{
  position:relative;width:100%;border-radius:2px;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 20%;
  box-shadow:0 40px 80px -58px rgba(20,18,17,.65);
}
.faq__list{grid-area:list;display:grid}
.qa{border-top:1px solid var(--hairline)}
.qa:last-child{border-bottom:1px solid var(--hairline)}
.qa > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;
  padding:clamp(1.2rem,2.4vw,1.75rem) 0;
  font-family:var(--cond);font-weight:500;
  font-size:clamp(1rem,.92rem + .42vw,1.25rem);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35;
  color:var(--ink-soft);transition:color .4s var(--ease);
}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:hover{color:var(--terracotta)}
.qa__pm{flex:0 0 auto;width:1.5rem;height:1.5rem;position:relative}
.qa__pm::before,.qa__pm::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--terracotta);
  transform:translate(-50%,-50%);transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.qa__pm::before{width:1.1rem;height:1.5px}
.qa__pm::after{width:1.5px;height:1.1rem}
.qa[open] .qa__pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa__a{
  padding:0 0 clamp(1.4rem,2.6vw,2rem);max-width:62ch;
  color:var(--ink-soft);font-size:.9875rem;line-height:1.82;
  animation:qaIn .55s var(--ease) both;
}
@keyframes qaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.qa__a p{margin-bottom:1em}
.qa__a p:last-child{margin-bottom:0}
.qa__a b{font-weight:600;color:var(--ink)}
/* spans both columns under the photograph and the questions, so the closing
   button sits on the section's centre rather than on the list's */
.faq__cta{grid-area:cta;margin-top:clamp(.6rem,1.6vw,1.2rem);text-align:center}

/* ========================== ENQUIRE ========================== */
/* same apricot closer as the corporate page's form section */
.enq{
  background:var(--apricot);color:var(--ink-deep);
  padding:clamp(2.75rem,5.5vw,4.75rem) 0;position:relative;overflow:hidden;
}
.enq::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:52vw;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.24);
}
/* lifts the stack above the ::before disc.
   Copy and form are stacked rather than set side by side: the script heading now
   runs on one line, which is wider than the old left column ever was, and the
   form gets the full wrap width instead of ~55% of it. */
.enq__grid{
  display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,3vw,2.6rem);
  align-items:start;position:relative;
}
/* white on the apricot ground. One line on anything wide enough to hold it; the
   clamp plus natural wrapping folds it back onto two lines on a phone, which is
   why there is no <br> and no nowrap here. */
.enq__script{
  font-family:var(--script);font-size:clamp(3.72rem,2.64rem + 4.65vw,6.51rem);
  line-height:1.02;transform:rotate(-2deg);display:inline-block;color:var(--white);
}
/* set 50% up from the .9875rem body size, so the two enquiry paragraphs hold
   their own under the script heading.
   The 40ch measure these carried is gone: the copy now runs the full wrap width
   above the form rather than sitting in a ~490px column beside it. That is a long
   line for 23px text, so the leading goes back out to 1.6 — at 1.5 the eye loses
   the line it is returning to. */
.enq__p{margin-top:clamp(1.2rem,2.4vw,1.8rem);color:var(--ink-soft);font-size:1.48125rem;line-height:1.6;max-width:none}
.mailto{
  font-weight:600;color:var(--ink-deep);text-decoration:none;
  border-bottom:1px solid rgba(53,50,51,.4);padding-bottom:1px;
  transition:border-color .35s var(--ease);
}
.mailto:hover{border-color:var(--ink-deep)}

/* the padding is deliberately tighter than the cards elsewhere on the page:
   every rem taken off here goes straight into the field columns, which are the
   part that was actually cramped */
.formcard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:6px;
  padding:clamp(1.4rem,2.2vw,1.9rem);
  box-shadow:0 44px 84px -70px rgba(83,79,81,.75);
}
/* three columns, not two: the card spans the full wrap now, and eight fields in
   two columns made a very tall block under the copy. Nine cells over three rows —
   the timeframe input takes the ninth by spanning two — so nothing is left
   hanging in a half-empty row. */
.form{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.5vw,1.15rem)}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field--full{grid-column:1/-1}
/* fills the trailing gap in the third row; at a third of the card the timeframe
   placeholder was the one clipping itself */
.field--wide{grid-column:span 2}
/* tighter than the .14em the rest of the site's small caps carry: these labels
   are full phrases, not one-word kickers, and they sit directly above the box
   they name, so they read as a line of words rather than as spaced capitals */
.field > label{
  font-family:var(--cond);font-weight:500;font-size:.8125rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.3;
}
.field .req{color:var(--terracotta)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-weight:300;font-size:.9375rem;line-height:1.5;
  color:var(--ink-soft);background:var(--white);
  border:1px solid var(--hairline);border-radius:4px;
  padding:.72em .9em;width:100%;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{resize:vertical;min-height:6rem}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.6em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23423D3F' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(196,99,60,.14);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(83,79,81,.45)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;margin-top:.6rem;
}
.form__fine{font-size:.8125rem;line-height:1.6;color:var(--ink-faint);max-width:34ch}
.form__status{
  grid-column:1/-1;margin:0;padding:1em 1.2em;border-radius:4px;
  font-size:.9375rem;line-height:1.6;display:none;
}
.form__status.is-on{display:block}
.form__status.is-ok{background:rgba(196,99,60,.1);border:1px solid rgba(196,99,60,.3);color:var(--ink-soft)}
.form__status.is-err{background:#FDECE6;border:1px solid rgba(196,99,60,.45);color:var(--ink-soft)}
.form__done{text-align:center;padding:clamp(2rem,4vw,3.4rem) 1rem}
.form__done .script{font-size:clamp(2rem,1.5rem + 2vw,3rem);display:inline-block;transform:rotate(-2deg)}
.form__done p{margin-top:1.2rem;color:var(--ink-soft);font-size:.9875rem}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem;flex-shrink:0}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:2rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}
  .chero__grid{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
  .chero__cut img{height:clamp(345px,48vh,483px);display:block}
  /* stacked, the copy sits under a portrait whose bottom 12% the mask has already
     faded to nothing, so the grid gap and the name's lead-in land on top of a strip
     that is empty anyway and the whole block reads as detached. the block moves up
     as one unit: the gap goes, the name drops its lead-in, and the pull below eats
     ~6% of the image — half its fade, tracking the same 48vh the height does, so
     the name starts where the portrait stops at every phone height. the rhythm
     inside the block (--stack / --tight) is untouched. */
  .chero__copy{margin-top:clamp(-1.8rem,-2.9vh,-1.3rem)}
  .chero__name{margin-top:0}
  /* one column is narrower than the discs' vw widths assume, so they are
     capped and re-measured against the viewport — the same step the home
     hero takes at this breakpoint, so the two grounds still match */
  .chero__glow i{max-width:420px;max-height:420px}
  .chero__glow i:nth-child(1),.chero__glow i:nth-child(3){width:58vw;height:58vw}
  .chero__glow i:nth-child(2),.chero__glow i:nth-child(4){width:52vw;height:52vw}
  .speaker__grid{grid-template-columns:1fr;gap:2.4rem}
  .speaker__fig{max-width:520px;margin-inline:auto}
  .bene__grid{grid-template-columns:1fr;gap:2.8rem}
  .bene__fig{max-width:420px;margin-inline:auto}
  /* the photo stops sitting beside the questions and becomes a lead-in above
     them, so neither column has to give up its measure */
  .faq__grid{grid-template-columns:1fr;grid-template-areas:"head" "fig" "list" "cta"}
  .faq__fig{max-width:420px;margin-inline:auto}
}
/* two topic cards side by side get too narrow to hold their measure here */
@media (max-width:980px){
  .kcards{grid-template-columns:1fr}
  .pill__grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .stats__grid{grid-template-columns:1fr 1fr}
  /* three columns stop being usable somewhere around here: the select and the
     location input start clipping their own placeholders. Two columns, and the
     timeframe input drops its span — eight fields divide evenly into 2 without
     it, and spanning would strand the name field alone on its row. */
  .form{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:auto}
  /* the cut-out is a fixed-height figure, so the text column is what gives —
     stack before it gets too narrow to hold a sensible measure. Copy goes above
     the figure so she still stands on the floor of the box rather than on the text. */
  .speak-cta{grid-template-columns:1fr;gap:0}
  .speak-cta__body{
    grid-row:1;
    padding-inline:clamp(1.7rem,3vw,2.9rem);
    padding-bottom:clamp(1.5rem,2.6vw,2rem);
  }
  /* the desktop left margin walks her off the edge of a two-column row; stacked
     she is centred instead, and it would just throw the centring off */
  .speak-cta__fig{grid-row:2;justify-self:center;margin-left:0}
  .speak-cta__fig img{height:clamp(200px,42vw,260px)}
  /* in the 2×2 the vertical rule runs the full cell height, so the two rows
     read as one grid rather than four floating pairs */
  .stat:nth-child(3)::before,.stat:nth-child(4)::before{top:0;bottom:0}
  .stat:nth-child(3)::after,.stat:nth-child(4)::after{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.34);
  }
  .stat:nth-child(3)::before{display:none}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  /* on a phone the column is too narrow to hold the four items on one line —
     wrapping is allowed again here rather than letting the row overflow */
  .chero__feat{flex-wrap:wrap;gap:1rem 1.2rem}
  /* the role wraps to two lines below ~450px, and one absolutely-positioned box
     would tint the empty ground beside the shorter line. so here the wash moves
     onto the span's own background and is cloned per line fragment — each line
     gets a stroke its own width, wiped by background-size instead of clip-path.
     it costs the tilt and the uneven radius; the alternative costs the shape. */
  .chero__role .mark{
    display:inline;padding:0 .45em;border-radius:.4em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    background-image:linear-gradient(101deg,
      rgba(237,165,125,.78) 0%,rgba(237,165,125,.62) 46%,rgba(196,99,60,.30) 100%);
    background-repeat:no-repeat;background-size:0 100%;
    transition:background-size .78s var(--ease) .9s;
  }
  .chero__role .mark::before{display:none}
  .chero__role.is-in .mark{background-size:100% 100%}
  .foot__grid{grid-template-columns:1fr}
  /* mobile only: the script heading centres over the column. block instead of
     inline-block is what gives text-align something to work on — both of its
     lines then centre individually, and the rotation pivots on the same centre. */
  .enq__script{display:block;text-align:center}
  /* the enquiry copy is set 50% up from body size to carry the full-width band
     under the script on a desktop. On a phone that size only eats the screen, so
     it comes back to a normal reading size. */
  .enq__p{font-size:1.0625rem;line-height:1.6}
  /* one column, and the timeframe input stops spanning — span 2 on a 1-column
     grid would silently widen the whole form */
  .form{grid-template-columns:1fr}
  .field--wide{grid-column:auto}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{justify-content:center}
  .kcard__cta .btn{justify-content:center;width:100%}
  /* the link under the pillars wraps on a phone whatever its size, so the only
     question is where. at 15px it broke after "AND HER" and left "TRAINING"
     alone on the second line. a step up to 16px moves the break earlier and
     `balance` then evens the two lines out; where balance isn't supported the
     larger size alone already gives the better break. desktop is untouched. */
  .pill__more .ulink{font-size:1rem;text-wrap:balance}
  /* mobile only: stacked, the hairline sits right on top of the copy it used to
     separate from the portrait column, so it reads as a divider inside one block
     of text. It goes, and its padding with it — the grid's own margin-top is
     then the whole gap. The headline carries the section instead, a fifth larger
     (every clamp stop ×1.2). Desktop keeps rule and size. */
  .speaker__head{border-bottom:0;padding-bottom:0}
  .speaker__t{font-size:clamp(2.28rem,1.32rem + 3.96vw,4.8rem)}
  /* mobile only: stacked, the portrait landed after all three paragraphs and the
     button — a long run of copy before any picture. `display:contents` drops the
     copy column's own box so its children become items of the grid itself, and
     the figure can then be ordered between paragraph two and three. Costs the
     column its scroll-reveal fade (no box, nothing to fade) — the copy is simply
     there. Two-column desktop, and its fade, are untouched.
     The grid gap goes with it: at 2.4rem it was spacing two columns, and it would
     now sit between every paragraph. Margins do the vertical rhythm instead —
     grid items don't collapse theirs, so the paragraphs carry bottom-only. */
  .speaker__grid{gap:0}
  /* the div, not `.rv` — the figure carries that class too, and it needs to keep
     its box: it is what the offset blush square behind the photo is drawn on */
  .speaker__grid > div{display:contents}
  .speaker__grid > div > p{margin:0 0 1.05rem}
  .speaker__pull{order:1}
  .speaker__grid > div > p:nth-of-type(2){order:2;margin-bottom:0}
  /* `auto` inline keeps the centring the 1080px rule sets up */
  .speaker__fig{order:3;margin:1.7rem auto}
  .speaker__grid > div > p:nth-of-type(3){order:4}
  .speaker__cta{order:5}
  /* mobile only: the band reads label → headline → copy → cut-out → button, so
     the action is the last thing on the screen instead of being buried above a
     260px photo. Same `display:contents` move as above — the body stops being a
     box so its children can be ordered against the figure — which means the
     body's padding goes with it and each child re-applies the inline inset.
     The figure's 860px `grid-row:2` has to go too: explicit placement would
     override the ordering. Desktop stays two columns, body beside the cut-out. */
  .speak-cta{--sc-pad:1.5rem}
  .speak-cta__body{display:contents}
  .speak-cta__label{order:1;padding:1.5rem var(--sc-pad) 0;margin-bottom:.6rem}
  .speak-cta__t{order:2;padding-inline:var(--sc-pad);margin-bottom:.55rem}
  /* the copy's own bottom margin would stack with the figure's top one */
  .speak-cta__p{order:3;padding-inline:var(--sc-pad);margin-bottom:0}
  .speak-cta__fig{order:4;grid-row:auto;margin:1.1rem 0 0}
  /* she stood on the floor of the band; with the button below her the shorter
     crop is what keeps the box from growing a screen taller than it needs.
     It also exposes the cut-out's own flat bottom edge, which the band's edge
     used to hide — the hero's fade (see .chero__cut img) puts it back. */
  .speak-cta__fig img{
    height:clamp(180px,36vw,225px);
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
  }
  /* justify-self, not a width: as a grid item the button would otherwise blockify
     and stretch the full column */
  .speak-cta__body .btn{order:5;justify-self:center;margin:1.1rem var(--sc-pad) 1.6rem}
}
@media (max-width:560px){
  /* four stacked numerals took most of a phone screen. the 2×2 from 860px holds
     — including its dividers — and is tightened instead: less padding, numerals
     and labels a step down. Same as the home page. */
  .stat{padding:clamp(1.1rem,4.2vw,1.5rem) clamp(.4rem,2.2vw,.9rem) clamp(.95rem,3.6vw,1.3rem)}
  .stat{--stat-n:clamp(2rem,1.15rem + 3.4vw,2.6rem)}
  /* the 20ch cap stays — at this size it is what still breaks the two long
     labels over two lines instead of three */
  .stat__l{font-size:.6875rem;letter-spacing:.1em;line-height:1.45;margin-top:.45rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .btn--pulse{animation:none}
  /* the wash is part of the design, not the motion — it stays, the sweep goes.
     the rule above zeroes its duration but not its delay, hence these lines */
  .chero__role .mark{background-size:100% 100%;transition-delay:0s}
  .chero__role .mark::before{clip-path:none;transition-delay:0s}
}