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;
}
section{position:relative}
[id]{scroll-margin-top:6.5rem}
/* the form is display:grid, so the UA's [hidden] rule alone would lose */
[hidden]{display:none!important}

/* type primitives -------------------------------------------- */
.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;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}
.btn--light{--bg:var(--cream);--fg:var(--ink)}
.btn--light::before{background:var(--white)}
.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;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
  padding:1.6rem 0;
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}


/* ====================== CORPORATE HERO ======================= */
/* inverted, and no longer the warm two-column head that index.html
   still runs — the two pages part ways here. deep ink ground, the
   wordmark centred in cream and apricot, under it a terracotta arch
   carrying the cut-out portrait, whose shoulders are meant to break
   over the arch edge. the promise sits on one line below the figure,
   the press row on a hairline closes the head. one centre axis top to
   bottom, and deliberately no buttons: the head states what this is,
   the sections underneath carry the routes. the terracotta stats bar
   runs full width beneath, as before. */

/* ---- the nav on a dark ground --------------------------------
   the bar is transparent over the hero, so its type has to run light
   — and go back to ink the moment it docks onto its cream plate. */
.nav{color:var(--cream)}
.nav .burger span{background:var(--cream)}
/* the "Other" panel keeps its own cream plate, so it must not take the cream
   type down with it — its links inherit from .nav and would otherwise be cream
   on cream, readable only under the hover state that repaints them terracotta.
   set on the panel, not the link, so anything else put in there lands on ink
   too. the mobile menu is unaffected: it lies on cream and .nav__links already
   turns the type back to ink below 1080px. */
.nav .nav__sub{color:var(--ink)}
/* terracotta on this ground is too close to the background to read as
   the current page; apricot is the same accent one step brighter */
.nav .nav__link[aria-current="page"]{color:var(--apricot)}
.nav.is-stuck{color:var(--ink)}
.nav.is-stuck .burger span{background:var(--ink)}
.nav.is-stuck .nav__link[aria-current="page"]{color:var(--terracotta)}
@media (max-width:1080px){
  /* the full-screen menu lies on cream, so dark type again in there */
  .nav__links{color:var(--ink)}
  .nav__links .nav__link[aria-current="page"]{color:var(--terracotta)}
  .nav.is-open .burger span{background:var(--ink)}
}

/* ---- the stage ------------------------------------------------
   two conditions on the height: the press row has to make the first
   screen, and the terracotta stats bar below it must not.

   min-height:100svh settles the second — the head is at least as tall
   as the window, so the bar starts at the very edge at the earliest.
   align-content:center holds the column in the middle, so a tall
   window does not park its whole reserve under the press row.

   .hero must NOT become a flex or grid container for that. .hero__in
   is .wrap, and .wrap carries margin-inline:auto — auto margins on the
   cross axis switch off the stretching of a flex/grid item, so the
   column would size to its content. Together with container-type:
   inline-size, which does not count its own contents towards its
   width, it then collapses to width 0: cqi becomes 0, every type size
   hanging off it becomes 0, and the head renders empty.
   align-content:center centres in block layout instead and leaves the
   children's sizing alone.

   The first condition hangs on the portrait, and not on a fixed vh
   share but on what is left over: everything else in the column is
   either width-led (wordmark 18.05cqi, promise with its gap 6.76cqi,
   plus the 3cqi of air the arch stands clear of the wordmark by =
   27.8cqi) or fixed (11svh of top pad, ~95px of press row, ~42px of
   bottom pad, plus 8px of reserve = 11svh + 145px). What remains goes
   to the image:
     image height = 89svh − 27.8cqi − 145px
   The column fills the window to within a few pixels that way, with no
   jump at any media query edge — the wordmark is never touched, the
   picture is the only thing that gives. That figure is --cut-h below;
   the picture is drawn 4% over it and pulled back up by the same 4%, so
   it overshoots into the wordmark without spending anything here.

   The 89 and the 11svh of top pad are a pair — they have to add up to
   100. On a window tall enough to carry it the pad is cut back and the
   89 goes up by the same amount, which is the whole of how the picture
   gets bigger there; see the two height branches at the foot of the
   sheet. Both leave this sum intact, so the press row lands in the same
   place either way. */
.hero{
  background:var(--ink-deep);
  color:var(--cream);
  padding:clamp(6rem,11vh,8.5rem) 0 clamp(1.8rem,3.4vw,2.6rem);
  min-height:100vh;
  min-height:100svh;
  align-content:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* spotlight: a warm cone behind the arch, breathing slowly */
.hero__spot{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 50% 42%, rgba(196,99,60,.42) 0, rgba(196,99,60,0) 70%),
    radial-gradient(40% 44% at 12% 78%, rgba(169,133,112,.3) 0, rgba(169,133,112,0) 70%),
    radial-gradient(38% 40% at 90% 20%, rgba(237,165,125,.26) 0, rgba(237,165,125,0) 70%);
  animation:breathe 14s var(--ease) infinite alternate;
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.09)}}

.hero__in{position:relative;z-index:1;container-type:inline-size}

/* ---- the wordmark ---------------------------------------------
   the two lines are set at different sizes on purpose: "ADHD
   WORKPLACE" measures 8.54em with its negative tracking, "& Strategy
   Consultant" in italic 9.01em (both measured off the shipped woff2,
   not estimated). The sizes are picked so the two come out the same
   width — about 84% of the measure — and stand as one centred block.
   The size hangs on the width alone; only under 760px of window height
   does it also get a vh cap, see the rule at the foot of the sheet. */
.hero__t{text-align:center;margin:0}
.hero__t .lo,
.hero__t .hi{
  display:block;white-space:nowrap;
  font-family:var(--serif);font-weight:400;line-height:.94;
}
.hero__t .lo{
  font-size:min(9.85cqi,159px);
  text-transform:uppercase;letter-spacing:-.042em;color:var(--cream);
}
.hero__t .hi{
  position:relative;z-index:2;
  font-size:min(9.35cqi,151px);
  font-style:italic;font-weight:500;letter-spacing:-.028em;color:var(--apricot);
}

/* ---- middle: the arch, the promise under it -------------------
   one centre axis — wordmark, arch, promise and press row all stand
   on the same middle. */
.hero__stage{
  display:grid;justify-items:center;
  /* the arch used to be pulled up into the second line of the wordmark by
     -1.4cqi; with the figure carrying z-index 3 the crown then crossed the
     italic's descenders in front of them, and her hair sat over the letters.
     It stands clear below the wordmark now. The figure's own 4% overshoot
     still pulls the picture up inside its box, so of this air the arch itself
     keeps about 3cqi and the crown of her head roughly a third less — the
     figure is what the gap is measured against, not the arch.
     The height budget above carries the same 3cqi, so the air is taken out
     of the picture rather than out of the window: the arch's floor, the
     promise and the press row all stay where they stood. */
  margin-top:3cqi;
}

/* the promise as one continuous line under the portrait, straight
   above the hairline of the press row. The sentence measures 24.33em
   in Playfair including its negative tracking, so 3.8cqi fills 92.5%
   of the measure — the rest is air in case Georgia stands in. */
.hero__line{
  margin:clamp(.9rem,2.5cqi,2.3rem) 0 0;
  text-align:center;white-space:nowrap;
  font-family:var(--serif);font-weight:400;
  font-size:min(3.8cqi,47px);
  line-height:1.12;letter-spacing:-.026em;color:var(--cream);
}
.hero__line em{font-style:italic;color:var(--apricot)}

/* ---- the arch with the portrait -------------------------------
   the arch is its own body behind the picture. Its width hangs on the
   portrait (width:fit-content) rather than a clamp of its own — with a
   fixed width it would stay put while the height is being computed
   down, and the figure would suddenly sit lost in too wide a shape. */
.hero__cut{
  /* the height the window leaves for her. It used to sit on the img; it lives
     here so the pull-up below can be a share of the same number. The pair of
     declarations is the svh fallback — a browser without svh keeps the vh line,
     and it has to run through @supports rather than the usual two-declarations
     trick, because a custom property swallows a unit it does not know instead of
     dropping the declaration, and would then poison every calc() that reads it. */
  --cut-h:clamp(230px,calc(89vh - 27.8cqi - 145px),560px);
  /* and then she is set over that height and pulled back up by exactly what she
     gained, so the floor of the arch does not move and the whole of the growth
     goes upward, into the wordmark. Because the two cancel, her outer box is
     still --cut-h and the head's height budget above is untouched.
     A margin and not a transform: the figure carries .rv, whose
     .rv.is-in{transform:none} sits later in the sheet and would win. */
  --cut-grow:1.04;
  /* one number over the top of the budget: the arch and the picture in it are
     drawn a tenth larger than the window worked out for them. It multiplies
     --cut-h before anything else reads it — the margin below and the image's
     own height both go through it — so the two stay locked and the figure
     scales as one piece rather than the picture growing inside a fixed arch.
     The tenth is not free: it is the one part of the head that is not paid
     for out of the height budget above, so the column carries 10% of --cut-h
     more than it reserved and the window gives it up out of its own slack. */
  --cut-scale:1.1;
  /* front-most layer of the head: over .hero__t .hi, which holds z-index 2 and
     used to paint across her hair. The z-index makes this a stacking context, so
     the arch's z-index:-1 below is now scoped to the figure — it still sits
     behind her, but the pair travels forward together. */
  position:relative;z-index:3;
  margin:calc(var(--cut-h) * var(--cut-scale) * (1 - var(--cut-grow))) 0 0;
  width:fit-content;
  display:flex;justify-content:center;align-items:flex-end;
}
@supports (height:1svh){
  .hero__cut{--cut-h:clamp(230px,calc(89svh - 27.8cqi - 145px),560px)}
}
.hero__cut::before{
  content:"";position:absolute;z-index:-1;left:-1.5%;right:-1.5%;bottom:0;top:9%;
  border-radius:999px 999px 6px 6px;
  background:linear-gradient(172deg,#E08153 0%,var(--terracotta) 46%,#7E3A1F 100%);
  box-shadow:0 40px 90px -40px rgba(196,99,60,.65);
}
.hero__cut img{
  position:relative;
  height:calc(var(--cut-h) * var(--cut-scale) * var(--cut-grow));
  width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
}

/* ---- the press row --------------------------------------------
   it closes the head at the foot and so lies in the bottom 8% of the
   window — exactly the strip the shared observer in the page script
   takes out of triggering via rootMargin. Through .rv it clears that
   observer's 14% threshold by a few pixels or not at all, and would
   stay invisible until someone scrolls. So it does not hang on the
   observer but runs on a fixed delay behind the promise: that starts
   at .2s on .rv-d2, the row follows at .45s. The values are the ones
   .rv itself uses (28px, .95s, --ease) so the motion stays the same.

   The doubled class on the sizes is deliberate: at equal specificity
   the .pressrow rules further down the sheet would win on source order
   and flatten these. */
.hero__press{
  justify-content:center;
  margin-top:clamp(1.3rem,2.8vw,1.9rem);
  padding-top:clamp(1rem,2vw,1.5rem);
  border-top:1px solid rgba(245,242,241,.2);
  opacity:0;transform:translateY(28px);
  animation:pressIn .95s var(--ease) .45s forwards;
}
@keyframes pressIn{to{opacity:1;transform:none}}
.hero__press .logo-mark{color:var(--cream);opacity:.85}
.hero__press .logo-mark--bbc span{background:var(--cream);color:var(--ink-deep)}
.hero__press.pressrow .pressrow__t{
  color:rgba(245,242,241,.72);
  font-size:clamp(1rem,.92rem + .38vw,1.22rem);
}
.hero__press.pressrow .logo-mark--stylist,
.hero__press.pressrow .logo-mark--huff{font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem)}
.hero__press.pressrow .logo-mark--bbc{font-size:clamp(1.04rem,.86rem + .62vw,1.52rem)}

/* 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}
/* nudge direction belongs to the glyph, not the pulse — a pulsing button with a
   sideways arrow keeps the base button's sideways nudge */
.btn:hover .arw--down,.btn:focus-visible .arw--down{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 full-width "%". 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 at 400 (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;
}
/* the press line in compact form: one row, no plaque */
.pressrow{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(1.1rem,2.6vw,2.2rem)}
.pressrow__t{
  font-family:var(--serif);font-style:italic;font-weight:400;line-height:1;
  font-size:clamp(.87rem,.81rem + .28vw,1.02rem);color:var(--ink);white-space:nowrap;
}
.pressrow .logo-mark--stylist,
.pressrow .logo-mark--huff{font-size:clamp(1.02rem,.9rem + .6vw,1.44rem)}
.pressrow .logo-mark--bbc{font-size:clamp(.82rem,.74rem + .44vw,1.16rem)}

/* ===================== THE UNDERSTANDING ===================== */
/* bottom pad halved to match the top one — the closing statement no longer
   floats above a large empty gap before the next section */
.under{background:var(--white);padding:clamp(2.75rem,5.5vw,4.75rem) 0}
/* headline + subline run the full column width */
.under__head{padding-bottom:clamp(2.2rem,4vw,3rem);border-bottom:1px solid var(--hairline)}
.under__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;
}
.under__t em{font-style:italic;color:var(--terracotta)}
/* copy left, portrait right */
.under__grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  margin-top:clamp(2.4rem,4.4vw,3.6rem);
}
.under__grid p{
  color:var(--ink-soft);line-height:1.72;
  font-size:clamp(1.12rem,1.05rem + .4vw,1.31rem);
}
.under__cta{margin-top:clamp(1.6rem,2.9vw,2.2rem)}
/* reads as a normal body paragraph; only the closing clause is underlined */
.under__pull b{
  font-weight:400;
  text-decoration:underline;
  text-decoration-color:var(--apricot);
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
}
.under__fig{margin:0;position:relative}
/* only the right-column portrait exists on desktop; the in-flow copy that sits
   between the second and third paragraph is a stacked-layout thing (see 1080px) */
.under__fig--flow{display:none}
/* same square as the photo, just offset down-right */
.under__fig::before{
  content:"";position:absolute;z-index:0;inset:0;
  transform:translate(6%,6%);
  background:var(--blush);border-radius:6px;
}
.under__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);
}
/* closing statement, full width again */
.under__close{
  margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--hairline);
}
.under__here{
  font-family:var(--script);font-size:clamp(2.7rem,2.03rem + 2.7vw,4.19rem);
  color:var(--terracotta);transform:rotate(-2deg);display:inline-block;
  margin-bottom:.3em;
}
.under__close p{
  font-family:var(--sans);font-weight:300;color:var(--ink);
  font-size:clamp(1.15rem,.95rem + .95vw,1.75rem);
  line-height:1.6;
}

/* ========================= BENEFITS ========================== */
/* dark ground, so the copy inside has to flip to the light end */
.bene{
  background:rgb(84 79 81);color:var(--cream);
  /* the lead-in at the top is halved, so the portrait and the heading start
     closer to the boundary with the story section above; the bottom keeps the
     standard section rhythm */
  padding:clamp(2.75rem,5.5vw,4.75rem) 0 clamp(5.5rem,11vw,9.5rem);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;
  /* ~20% up on the old scale. the top end stops at 1.275rem and the vw slope is
     kept flat enough that the longest row still clears the two-column copy
     width at the 1080px breakpoint, where the column is at its narrowest. */
  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. each row is its
   own .rv, so the step below only stacks up for rows that enter the viewport
   together — a row scrolled in on its own still comes in near enough at once,
   which is why the steps stay short. */
.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}
.checks li:nth-child(7){transition-delay:.48s}
/* the ripple needs room to expand without the section clipping it */
.bene__cta{margin-top:clamp(2.2rem,4vw,3.2rem);padding-bottom:.4rem}

/* ========================== STORY ============================
   Text-only spread: with no photo, the headline carries the section
   and the pull quote takes over the visual weight the portrait had.  */
/* half the usual section lead-in at the top and the same half at the bottom, so
   the closing line sits closer to the boundary with the dark section below */
.story{
  background:var(--sand);
  padding:clamp(2.75rem,5.5vw,4.75rem) 0;overflow:hidden;
}

/* The headline opens the section on the open cream ground — no panel, so it
   reads as the heading for the copy underneath rather than a closing block. */
.story__head{
  /* gap down to the running copy. the script line took ~36px of this space for
     itself (its margin-top above), so the same amount comes off here — the two
     columns keep the position they had, only the script line moves down. */
  position:relative;margin-bottom:clamp(1.8rem,3.45vw,2.95rem);
  text-align:center;
  /* back on full width, so the headline can take the larger cap again —
     then the whole block scaled up a further 25% */
  --ttl:clamp(2.75rem,1.5rem + 5.25vw,7.25rem);
}
/* twice the usual eyebrow size, then the same 25% as the rest of the block */
.story__head .eyebrow{
  font-size:clamp(2.1875rem,2rem + 1.05vw,2.8125rem);letter-spacing:.2em;
  color:var(--terracotta);
}
.story__ttl{
  font-family:var(--serif);font-size:var(--ttl);
  /* 1.5rem, scaled with the rest of the block, then trimmed 10% */
  line-height:.94;letter-spacing:-.048em;margin-top:1.6875rem;
}
.story__ttl .sub{
  display:block;font-family:var(--script);color:var(--terracotta);
  /* the script line sits midway between the headline above and the running
     copy below: .78em here is what --story-sub-drop below is compensating for,
     so the two columns stay exactly where they are */
  font-size:.5em;line-height:1;margin-top:.78em;margin-left:.05em;
  transform:rotate(-1.8deg);transform-origin:left;
}
/* centred under the headline, so the rotation has to pivot on the centre
   or the line drifts off axis */
.story__head .story__ttl .sub{transform-origin:center}

/* running copy left, the turn of the story right. */
.story__grid{
  position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(2.2rem,5vw,5.5rem);
  align-items:start;
}
.story__body{
  color:var(--ink-soft);max-width:50ch;
  font-size:clamp(1.0625rem,1rem + .42vw,1.3rem);line-height:1.72;
}
.story__pivot{
  margin:0;padding-left:clamp(1.3rem,2.4vw,2.1rem);
  border-left:2px solid var(--terracotta);
  font-family:var(--serif);font-style:italic;color:var(--ink);
  /* sized so the quote ends level with the paragraphs in the left column */
  font-size:clamp(1.1rem,.89rem + .9vw,1.75rem);
  line-height:1.32;letter-spacing:-.026em;
}
.story__pivot .lbl{
  display:block;font-family:var(--cond);font-style:normal;font-weight:500;
  /* double size; the margin halves to .5em so the gap below stays as it was */
  font-size:.8em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:.5em;line-height:1;
}

/* closing statement. The hairline rule above it keeps the grid separated. */
.story__role{
  position:relative;margin-top:clamp(2.6rem,5vw,4.2rem);
  padding-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--hairline);
  /* wide enough measure + a touch less type so the statement lands on three
     lines instead of four, with "had." no longer stranded on its own row */
  max-width:70ch;margin-inline:auto;
  text-align:center;font-family:var(--sans);font-weight:400;color:var(--ink);
  font-size:clamp(1.42rem,.95rem + 1.05vw,1.85rem);line-height:1.52;
  text-wrap:balance;
}
/* apricot would wash out on cream — the accent has to darken with the ground */
.story__role b{color:var(--terracotta);font-weight:400;font-style:italic}

/* ======================== OFFERINGS ========================== */
.offers{background:var(--white);padding:clamp(2.75rem,5.5vw,4.75rem) 0 clamp(3.3rem,6.6vw,5.7rem)}
.sec-head{margin-bottom:clamp(2.8rem,5.5vw,4.5rem)}
.sec-head__t{
  font-family:var(--serif);font-size:clamp(2.3rem,6.2vw,5.6rem);
  line-height:1;letter-spacing:-.038em;
}
.sec-head__t em{font-style:italic;color:var(--terracotta)}

/* stacked full-width rows: photo on the left, copy on the right,
   note + CTA spanning the whole card underneath */
.ocards{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,2.6vw,2.4rem)}
.ocard{
  position:relative;display:grid;
  grid-template-columns:.78fr 1.22fr;
  grid-template-areas:"fig head" "fig body" "foot foot";
  grid-template-rows:auto 1fr auto;
  min-height:clamp(340px,30vw,440px);
  background:var(--sand);border:1px solid var(--hairline);border-radius:8px;
  overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .55s var(--ease),background .55s var(--ease);
}
/* accent rule wipes in across the top on hover */
.ocard::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);
}
/* the .offers prefix is load-bearing: the cards also carry .rv, and
   .rv.is-in{transform:none} sits later in the sheet — at equal specificity it
   would win and the lift would never happen */
/* the ground stays on sand through the hover — flipping it to white washed out
   the white-on-sand elements inside the card */
.offers .ocard:hover{
  transform:translateY(-10px);border-color:transparent;
  box-shadow:0 50px 80px -48px rgba(83,79,81,.6);
  transition-delay:0s;
}
.ocard:hover::before{transform:scaleX(1)}

.ocard__head{
  grid-area:head;
  padding:clamp(1.7rem,2.6vw,2.4rem) clamp(1.6rem,2.6vw,2.4rem) clamp(1rem,1.6vw,1.3rem);
}
.ocard__num{font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1;color:var(--apricot)}
.ocard__title{
  font-family:var(--serif);font-size:clamp(1.45rem,1.2rem + .95vw,2.15rem);
  line-height:1.08;letter-spacing:-.03em;margin-top:.7rem;
}
/* the photo fills whatever height the copy column ends up needing */
.ocard__fig{grid-area:fig;margin:0;position:relative;overflow:hidden;background:var(--blush)}
.ocard__fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
/* portrait sources in a boxier frame: park the crop window high enough that
   nobody loses their head, low enough to skip the Instagram chrome.
   These values hold at both the side-by-side and the stacked aspect ratio. */
.ocard__fig--panel img{object-position:50% 30%}
.ocard__fig--head  img{object-position:50% 20%}
.ocard__fig--stage img{object-position:50% 60%}
.ocard:hover .ocard__fig img{transform:scale(1.06)}
.ocard__fig .tag{
  position:absolute;left:clamp(.8rem,1.4vw,1.1rem);bottom:clamp(.8rem,1.4vw,1.1rem);
  background:rgba(251,249,248,.94);border-color:transparent;color:var(--ink-deep);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ocard__body{
  grid-area:body;
  padding:0 clamp(1.6rem,2.6vw,2.4rem) clamp(1.6rem,2.4vw,2.2rem);
}
/* Open Sans 600 instead of condensed-plus-wide-tracking. The clamp's upper bound
   drops because Open Sans sets much wider than Barlow Condensed; below 640px the
   tracking tightens further so the longest of these labels still holds one line. */
.ocard__meta{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:clamp(.6875rem,.55rem + .55vw,1.0625rem);letter-spacing:.04em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:1.1rem;line-height:1.4;
}
.ocard__label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-deep);margin-bottom:1.2rem;
}
/* note + CTA span the whole card width, under both columns */
.ocard__foot{
  grid-area:foot;border-top:1px solid var(--hairline);
  padding:clamp(1.3rem,2.2vw,1.8rem) clamp(1.6rem,2.6vw,2.4rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem clamp(2rem,4vw,3.5rem);flex-wrap:wrap;
}
.ocard__note{
  font-size:.9rem;line-height:1.65;color:var(--ink-faint);font-style:italic;
  margin:0;max-width:70ch;flex:1 1 24rem;
}
.ocard__foot .ulink{flex:0 0 auto}
.ocard__body .tick-list{margin-bottom:0}
/* the "Read more" control belongs to the phone layout alone — see the 640px
   block at the foot of the sheet. display:none also keeps it out of the card's
   grid: it has no named area here, and an auto-placed item would open an
   implicit row under the foot. */
.ocard__more{display:none}

.tag{
  font-family:var(--sans);font-weight:600;font-size:.75rem;letter-spacing:.05em;
  text-transform:uppercase;
  border:1px solid var(--hairline);color:var(--ink-deep);
  padding:.5em 1em;border-radius:999px;line-height:1;display:inline-block;
}
.tick-list{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.85rem}
/* body copy is 300, so 600 already reads as a firm bold against it */
.tick-list li{
  position:relative;padding-left:1.9rem;font-weight:600;
  font-size:.9375rem;line-height:1.6;color:var(--ink-soft);
}
/* the arrow is a bullet, not a word — at 600 the seven of them run together
   into a stripe down the left edge */
.tick-list li::before{
  content:"→";position:absolute;left:0;top:0;font-weight:400;
  font-size:.9em;line-height:1.78;color:var(--apricot);
}
/* speaking CTA band -------------------------------------------
   --blush rather than the cards' --sand: this points off-page, so it should not
   read as a fourth offering. 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. (The head used to run on the same blush; since it turned dark this
   is the only place on the page where that ground still shows.)
   Narrower than the cards and centred in the wrap — at the cards' full width the
   copy ran out well before the right edge and left a dead third of blush behind it. */
.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 */
.offers .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. */
.offers .speak-cta:hover .speak-cta__fig img{transform:scale(1.035)}
/* bottom-aligned and flush to the floor of the box — the alpha cut-out has no
   ground of its own, so anything else leaves her hovering. The inline margin is
   what walks her off the left edge: the PNG's own transparent margin scales with
   the image, so growing it alone barely shifts her. */
.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);
}
/* symmetric padding + centred text, so the copy sits in the middle of what is
   left between the cut-out and the band's right edge */
.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}

/* ======================== LOVE NOTES ========================= */
.notes{background:var(--sand);padding:clamp(2.75rem,5.5vw,4.75rem) 0 clamp(5.5rem,11vw,9.5rem);position:relative;overflow:hidden}
.notes__head{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.2vw,.9rem);margin-bottom:clamp(2.6rem,5vw,4rem);position:relative;
}
.notes__title{
  font-family:var(--script);font-size:clamp(3.2rem,2rem + 5vw,6.4rem);
  color:var(--terracotta);line-height:.85;transform:rotate(-2deg);display:inline-block;
}
.notes__sub{
  font-family:var(--cond);font-weight:500;font-size:clamp(.875rem,.82rem + .24vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.slider{position:relative;max-width:1100px;margin-inline:auto}
.cf{
  display:grid;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.cf-item{
  grid-area:1/1;justify-self:center;width:min(54%,600px);margin:0;
  /* white on the beige section, so the cards lift off the ground */
  background:var(--white);border-radius:6px;
  padding:clamp(1.7rem,2.9vw,2.7rem);
  display:flex;flex-direction:column;
  box-shadow:0 44px 84px -62px rgba(83,79,81,.75);
  transition:transform .75s var(--ease),opacity .75s var(--ease);
  will-change:transform,opacity;
}
.cf-item:not(.is-active){cursor:pointer}
/* pre-JS default. go() inline-styles the whole stack, but it only runs with the
   script at the foot of the page — until then every card sits in the same grid
   cell untransformed and the LAST one in the DOM paints on top, so the slider
   opened on the wrong quote. The scroll reveal normally covers that (.slider is
   .rv, opacity:0 until it enters the viewport), but under prefers-reduced-motion
   .rv is opaque from the first frame and the flash was on show. */
.cf-item:not(:first-child){opacity:0}
.quote-card__pull{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,.98rem + .8vw,1.65rem);
  line-height:1.26;letter-spacing:-.022em;position:relative;padding-top:.7em;
}
.quote-card__pull::before{
  content:"\201C";position:absolute;top:-.1em;left:-.06em;
  font-size:3.2em;line-height:1;color:var(--apricot);opacity:.5;font-style:normal;
}
.quote-card__body{margin-top:1.3rem;font-size:.9125rem;line-height:1.8;color:var(--ink-soft);flex:1}
.cf-item--long .quote-card__body{font-size:.855rem;line-height:1.76}
.cf-item--long .quote-card__pull{font-size:clamp(1.05rem,.92rem + .68vw,1.5rem)}
.quote-card__body p+p{margin-top:1em}
.quote-card__who{
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
.quote-card__initials{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em}
.quote-card__loc{font-family:var(--cond);font-weight:400;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.slider__ui{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:clamp(2rem,3.6vw,2.8rem)}
.sbtn{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--hairline);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.sbtn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dots{display:flex;gap:.6rem}
.dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--ink-faint);cursor:pointer;transition:.4s var(--ease)}
.dot[aria-current="true"]{background:var(--terracotta);width:26px;border-radius:999px}

/* ========================== ENQUIRE ========================== */
/* same apricot closer as the home page's .cta, incl. the soft white disc */
.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 other cards 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 interest select 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}
/* the one select whose options are full phrases ("ADHD workplace & strategy
   consulting") — at a third of the card it clipped its own value */
.field--wide{grid-column:span 2}
/* tighter than the .14em the rest of the site's small caps carry: these labels are
   full phrases ("Tell me a bit about what you're looking for"), not one-word kickers,
   and they sit directly above the box they name, so they read as a line of words
   rather than as a rule of 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}

/* ======================== 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}

/* ====================== 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}
  .under__grid{grid-template-columns:1fr;gap:2.4rem}
  .under__fig{max-width:520px;margin-inline:auto}
  /* the portrait moves up into the copy, between the second and third paragraph,
     instead of trailing the whole text block plus its CTA */
  .under__fig--desk{display:none}
  .under__fig--flow{display:block;margin-block:clamp(1.8rem,4.5vw,2.6rem)}
  .under__t{max-width:none}
  .bene__grid{grid-template-columns:1fr;gap:2.8rem}
  .bene__fig{max-width:420px;margin-inline:auto}
  .story__grid{grid-template-columns:1fr;gap:2.6rem}
  .story__body{max-width:none}
  .ocard{grid-template-columns:.85fr 1.15fr;min-height:0}
  .cf-item{width:min(78%,600px)}
}
/* ---- the head, narrower --------------------------------------
   the wordmark's two lines stop being set to a nowrap measure here and
   are allowed to break; the arch drops below the wordmark instead of
   tucking under it, and the promise goes back to a wrapped block once
   one line would only be 12-20px tall. */
@media (max-width:900px){
  .hero__t .lo,.hero__t .hi{white-space:normal;font-size:min(13.5cqi,74px)}
  .hero__stage{margin-top:clamp(1rem,3vw,1.8rem)}
  /* her own height here, and no growth with it: the 4% overshoot exists to push
     her up into the wordmark, and from here down the arch stands below it. Left
     on, the pull would still be a share of the desktop budget and would drag her
     out of a composition she no longer overlaps. */
  .hero__cut{--cut-h:clamp(240px,38vh,360px);--cut-grow:1}
}
@media (max-width:860px){
  .hero__line{
    white-space:normal;max-width:24ch;
    font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);line-height:1.24;
  }
}
/* the split card gets too cramped below this — photo moves above the copy */
@media (max-width:1000px){
  .ocard{
    grid-template-columns:1fr;
    grid-template-areas:"head" "fig" "body" "foot";
    grid-template-rows:auto auto 1fr auto;
  }
  .ocard__fig{aspect-ratio:4/3}
  .ocard__body{padding-top:clamp(1.4rem,2.2vw,1.8rem)}
}
@media (max-width:860px){
  /* three columns stop being usable somewhere around here: the two selects and
     the location input start clipping their own placeholders. Two columns, and the
     interest select drops its span — eight fields divide evenly into 2 without it,
     and spanning would strand the email 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)}
  .stats__grid{grid-template-columns:1fr 1fr}
  .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}
  /* the second row's divider runs the full height so it meets the rule above it */
  .stat:nth-child(4)::before{top:0;bottom:0}
  .cf-item{width:min(88%,600px)}
  .cf{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  /* mobile only: the eyebrow broke over two lines because .2em of tracking on
     17 characters is wider than a phone. tighter tracking plus a viewport cap on
     the size keeps "Why work with me?" on one line down to the narrowest phones. */
  .story__head .eyebrow{
    font-size:min(2.1875rem,9.2vw);letter-spacing:.06em;
    white-space:nowrap;
  }
  /* the headline block (and with it the script line, which is .5em of it) goes up
     30% here. the second term is what the line can actually hold — "Because I get
     it." runs ~6.2em wide, so dividing the free width by 6.4 keeps a small margin
     and the cap only takes over on phones too narrow for the full 30%. */
  .story__head{
    --ttl:min(
      calc(clamp(2.75rem,1.5rem + 5.25vw,7.25rem) * 1.3),
      calc((100vw - 2 * var(--gutter)) / 6.4)
    );
  }
  /* the script line takes a further 40% on top of that: .5em → .7em of the
     headline. Caveat is narrow enough that it still holds one line on a phone.
     the gap above it is set in its own em, so it is pinned back to what .5em
     gave — otherwise it would open up by the same 40%. */
  .story__head .story__ttl .sub{font-size:.7em;margin-top:.557em}
  /* 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 interest select 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}
  .ocard__meta{letter-spacing:.01em}

  /* Nur auf dem Handy: die Karte zieht sich zusammen. Die Abstände sind für die
     zweispaltige Fassung gesetzt, wo Bild und Text nebeneinander stehen und die
     Höhe vom Bild kommt; gestapelt addieren sich dieselben Werte zu einer Karte,
     die auch aufgeklappt kaum auf den Schirm passt. Jeder senkrechte Schritt geht
     rund ein Viertel zurück — Kopf, Bild, Body, die Zeilen der Liste, Button und
     Fuß. Die seitliche Polsterung bleibt, wie sie ist: Meta, Liste, Button und
     Fuß stehen alle auf derselben Kante, und die verschiebt sich damit nicht.
     Das Bild geht von 4:3 auf 3:2. Es ist der größte einzelne Block der Karte,
     und die Ausschnitte sind über object-position gesetzt, nicht über das
     Seitenverhältnis — der Bildausschnitt bleibt also derselbe, das Fenster wird
     nur flacher.
     Die Zeilenhöhe der Liste geht von 1.6 auf 1.5, und der Pfeil davor im selben
     Verhältnis mit (1.78 → 1.67), sonst säße er unter seiner eigenen Zeile. */
  .ocards{gap:1.15rem}
  .ocard__head{padding-top:1.25rem;padding-bottom:.75rem}
  .ocard__title{margin-top:.5rem}
  .ocard__fig{aspect-ratio:3/2}
  .ocard__body{padding-top:1.05rem;padding-bottom:1.2rem}
  .ocard__meta{margin-bottom:.8rem}
  .ocard__label{margin-bottom:.9rem}
  .tick-list{gap:.65rem}
  .tick-list li{line-height:1.5}
  .tick-list li::before{line-height:1.67}
  .ocard__foot{padding-block:1rem;gap:.8rem}
  .ocard__note{font-size:.85rem;line-height:1.55}

  /* Nur auf dem Handy: die drei Angebotskarten klappen auf, wie die Pakete auf
     der Coaching-Seite und die Keynote-Karten auf der Speaking-Seite. Jede Karte
     trägt Bild, Titel, sieben Listenpunkte und den Fuß untereinander und ist
     damit über zwei Bildschirme hoch — geschnitten wird deshalb nach dem dritten
     Punkt, der Rest kommt über den Button.
     Geschnitten wird .ocard__body: Meta- und Label-Zeile stehen darüber im selben
     Block und bleiben stehen, weil der Schnitt weiter unten liegt. Der Fuß mit
     Notiz und CTA bleibt außerhalb und damit sichtbar.
     Wo der Schnitt liegt, steht nicht hier — das hängt davon ab, wie viele der
     ersten Punkte umbrechen. Das Skript misst es pro Karte, schreibt --oc-clip
     hinein und setzt dazu .ocard--collapsible. Ohne JS fehlt beides: max-height
     wird mit unbekannter Variable ungültig und fällt auf none zurück, der Button
     bleibt aus, die Karte steht ganz da.
     --oc-line ist eine Zeile der Liste (.9375rem mal 1.5 Zeilenhöhe, wie oben in
     diesem Block gesetzt) — alles hier drunter rechnet in Zeilen statt in runden
     rem-Werten. */
  .ocard--collapsible{
    grid-template-areas:"head" "fig" "body" "more" "foot";
    grid-template-rows:auto auto 1fr auto auto;
  }
  .ocard--collapsible .ocard__body{
    --oc-line:calc(.9375rem * 1.5);
    position:relative;overflow:hidden;max-height:var(--oc-clip);
    padding-bottom:0;
    transition:max-height .55s var(--ease);
  }
  /* Der Übergang bricht nicht hart ab, sondern verblasst — dieselbe Rampe wie auf
     der Coaching-Seite, auch derselbe Grund (--sand ist hier wie dort die
     Kartenfarbe). Die Höhe steht in --oc-fade und wird gemessen: die Strecke vom
     Fuß des dritten Punktes bis zur Kante, plus 30%. Der vierte Punkt geht damit
     über seine ganze Höhe weg, und die 30% sind das Stück, das der Verlauf über
     den dritten hinausreicht — als Anteil der Strecke und nicht als feste Zeile,
     damit ein zweizeiliger vierter Punkt den Verlauf nicht auf der einen Karte
     früher beginnen lässt als auf der anderen. Ab 88% steht voll --sand, damit
     die abgeschnittenen Unterlängen an der Kante gedeckt sind.
     position:absolute ist Pflicht: .ocard__body ist eine Zelle des Kartengrids,
     ein ::after im Fluss würde unter der Liste eine eigene Zeile aufmachen. */
  .ocard--collapsible .ocard__body::after{
    content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
    height:var(--oc-fade,calc(var(--oc-line) * 3));
    background:linear-gradient(to bottom,
      rgba(239,231,225,0)    0%,
      rgba(239,231,225,.14) 10%,
      rgba(239,231,225,.36) 26%,
      rgba(239,231,225,.58) 44%,
      rgba(239,231,225,.78) 62%,
      rgba(239,231,225,.93) 78%,
      var(--sand)           88%);
    pointer-events:none;transition:opacity .4s var(--ease);
  }
  .ocard.is-open .ocard__body::after{opacity:0}
  .ocard--collapsible .ocard__more{
    grid-area:more;display:flex;
    padding:.95rem clamp(1.6rem,2.6vw,2.4rem) 1.15rem;
  }
  .ocard__more .btn{
    width:100%;justify-content:center;
    padding:.85em 1.75em;font-size:.875rem;letter-spacing:.16em;
  }
  /* der Pfeil nickt nach unten statt zur Seite — er öffnet die Karte, in der er
     steht, und dreht sich um, sobald sie offen ist */
  .ocard__toggle .arw{transform:none}
  .ocard__toggle:hover .arw,.ocard__toggle:focus-visible .arw{transform:translateY(3px)}
  .ocard.is-open .ocard__toggle .arw{transform:rotate(180deg)}
  .ocard.is-open .ocard__toggle:hover .arw,
  .ocard.is-open .ocard__toggle:focus-visible .arw{transform:rotate(180deg) translateY(3px)}

  .hero__press{gap:1.1rem}
  /* on a phone the long quotes ran taller than the screen. the body drops
     another step, the card's padding and rules close up with it, and the
     --long variants are named too — they are two classes deep and a media
     query adds no specificity, so they would otherwise win on their own size. */
  .cf-item{padding:1.35rem 1.25rem 1.45rem}
  .quote-card__pull,
  .cf-item--long .quote-card__pull{font-size:1.06rem;line-height:1.3}
  .quote-card__body,
  .cf-item--long .quote-card__body{margin-top:.95rem;font-size:.8125rem;line-height:1.62}
  .quote-card__who{margin-top:1.1rem;padding-top:.9rem;gap:.6rem}
  .quote-card__initials{font-size:1.15rem}
  .quote-card__loc{font-size:.75rem;letter-spacing:.1em}
  /* all three cards sit in the same grid cell and stretch to the height of the
     longest one, so the two shorter notes were left with dead space under them.
     Their type goes up 10% to take some of it back — pull 1.06→1.17rem, body
     .8125→.89rem. The --long card keeps the sizes above; :not() puts these at
     (0,3,0), so they win on specificity as well as on order. */
  .cf-item:not(.cf-item--long) .quote-card__pull{font-size:1.17rem}
  .cf-item:not(.cf-item--long) .quote-card__body{font-size:.89rem}
  .foot__grid{grid-template-columns:1fr}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{justify-content:center}

  /* 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 move as the band on the speaking and coaching pages. The
     button lives inside the body, so `order` alone can't walk it past the
     figure — the body drops its own box with `display:contents` and its children
     become items of the band's grid instead, which means the padding the body
     used to give them is re-applied per child.
     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 fade 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. */
  .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}
}
/* ---- the head, flatter ----------------------------------------
   Below roughly 723px of window height the image calculation hits its
   230px floor, and the width-led wordmark alone fills the window. Only
   from here — and only here — does it get a vh cap too, and the pads
   close up. Held above 900px of width so it never collides with the
   stacked layout above, where the wordmark already wraps. */
@media (max-height:760px) and (min-width:901px){
  .hero{padding:clamp(4.6rem,9vh,7rem) 0 clamp(1.2rem,2.4vw,2rem)}
  .hero__t .lo{font-size:min(9.85cqi,11.7vh,159px)}
  .hero__t .hi{font-size:min(9.35cqi,11.1vh,151px)}
  .hero__line{margin-top:clamp(.6rem,1.8cqi,1.4rem);font-size:min(3.8cqi,4.6vh,47px)}
  .hero__press{margin-top:clamp(.9rem,2vw,1.5rem);padding-top:clamp(.7rem,1.5vw,1.1rem)}
  /* and the floor is lifted off 230px with what those two caps just gave
     back. It is the vh caps that pay for it: a window this flat is already
     full, so every pixel the picture gains here has to come out of the
     wordmark — one line of type about 7% smaller, against a portrait about
     15% larger. Capped at 268px so it stays a floor and not a second budget,
     and read as 37svh under that so the flattest windows of all — 640px and
     less, where 230px was already more than the column could carry — are
     left where they were rather than pushed over their own bottom edge. */
  .hero__cut{--cut-h:clamp(min(268px,37vh),calc(89vh - 27.8cqi - 145px),560px)}
  @supports (height:1svh){
    .hero__cut{--cut-h:clamp(min(268px,37svh),calc(89svh - 27.8cqi - 145px),560px)}
  }
}
/* ---- the head, taller ------------------------------------------
   the other side of the same trade. From 780px of window height up
   there is enough room that the 11svh reserved above the wordmark is
   more air than the composition wants, so it comes down to 8.5svh and
   the picture's share goes up by the 2.5svh released — 89 becomes 91.5,
   the sum stays 100, and the press row does not move. The wordmark
   travels up by what the pad gave up and the picture follows it by the
   same amount, so the air between the two is untouched; only the arch
   grows, downwards from a fixed floor. The cap goes with it, 560px to
   610px, otherwise a very tall window would hand the extra height
   straight back. Held above 900px of width like its flatter twin, so
   neither can reach the stacked layout. */
@media (min-height:780px) and (min-width:901px){
  .hero{padding:clamp(4.5rem,8.5vh,7rem) 0 clamp(1.8rem,3.4vw,2.6rem)}
  .hero__cut{--cut-h:clamp(230px,calc(91.5vh - 27.8cqi - 145px),610px)}
  @supports (height:1svh){
    .hero__cut{--cut-h:clamp(230px,calc(91.5svh - 27.8cqi - 145px),610px)}
  }
}
@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}
}