/* JN1 Performance
   Black and cream alternating by section, one restrained gold.
   Display is Bodoni Moda, body is Archivo. Both self-hosted, both variable,
   both swappable here if Jools licenses Canela or GT Sectra later. */

@font-face{
  /* Fraunces, not Bodoni Moda. His brief named Canela, GT Sectra and Freight
     Display, all moderate-contrast editorial serifs; Bodoni is a Didone, the
     most extreme-contrast category there is, so its hairlines were the
     thinnest strokes on the page and broke up over a photograph.

     Newsreader, and not Fraunces, which was the first swap. Fraunces is the
     closer match to Canela but it is one of the faces every AI-generated
     layout now reaches for, and a site that must not read as generated cannot
     afford its default typeface. Newsreader sits against Freight Display, the
     third pairing he named, "classic, old-money, Savile Row", and it is the
     most readable of the three. */
  font-family:"Newsreader";
  src:url("/assets/newsreader-var.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/archivo-var.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  --ink:#100F0D;
  --cream:#F4EFE7;
  --gold:#7C5F2A;          /* on cream 5.20:1, measured, not estimated */
  --gold-lit:#C9A45C;      /* on ink 8.16:1 */
  --rule-d:rgba(244,239,231,.18);
  --rule-l:rgba(16,15,13,.16);
  --ff:"Archivo",-apple-system,"Segoe UI",sans-serif;
  --ffd:"Newsreader",Georgia,serif;
  --gut:clamp(1.25rem,5vw,5.5rem);
  --maxw:1500px;
  --pad:max(var(--gut),(100vw - var(--maxw))/2);
  --band:clamp(4.5rem,11vw,10rem);
  --meas:64ch;
  --fs-micro:.8125rem;      /* attribution titles only */
  --fs-label:.875rem;       /* uppercase labels: tier names, field labels */
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{
  margin:0; overflow-x:clip;
  background:var(--cream); color:var(--ink);
  font:400 clamp(1.0625rem,.4vw + 1rem,1.1875rem)/1.65 var(--ff);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3{font-family:var(--ffd);font-weight:500;letter-spacing:-.018em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}

.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:.75rem;left:.75rem;z-index:60;width:auto;height:auto;clip-path:none;
  background:var(--ink);color:var(--cream);padding:.7rem 1.1rem}
.hp{position:absolute;left:-9999px}

/* ---- the switch. Taken off his own wordmark, where the two Os make a toggle
   sitting in the on position. ---- */
.swmark{width:2.55rem;height:auto;overflow:visible}
.swmark rect{fill:none;stroke:currentColor;stroke-width:11}
.swmark circle{fill:currentColor}
.swmark--lg{width:4.6rem;color:var(--gold-lit);margin-bottom:1.6rem}

/* ---- masthead ---- */
.masthead{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(.7rem,1.1vw,1rem) var(--pad);
  color:var(--cream);
  transition:background .28s ease,color .28s ease,box-shadow .28s ease;
}
.masthead.is-set{background:var(--ink);box-shadow:0 1px 0 var(--rule-d)}
.masthead__mark{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.masthead__name{font:500 .95rem/1 var(--ffd);letter-spacing:.14em;text-transform:uppercase}
.masthead__name i{font-style:normal;font-family:var(--ff);font-weight:400;
  letter-spacing:.2em;font-size:.62em;display:block;margin-top:.34em;opacity:.72}
.masthead__nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem)}
.masthead__nav a{
  text-decoration:none;font-size:.9375rem;letter-spacing:.04em;
  position:relative;padding-block:.35rem;
}
.masthead__nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.masthead__nav a:not(.btn):hover::after,
.masthead__nav a:not(.btn):focus-visible::after{transform:scaleX(1)}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer;color:inherit}
.burger span[aria-hidden]{display:block;width:26px;height:1.5px;background:currentColor;
  transition:transform .3s ease,opacity .25s ease}
.burger span+span{margin-top:7px}
.burger[aria-expanded="true"] span:first-of-type{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-of-type{transform:translateY(-4.25px) rotate(-45deg)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.85rem 1.6rem;text-decoration:none;cursor:pointer;
  font:500 .9375rem/1 var(--ff);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--gold-lit);background:none;color:inherit;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn--edge:hover,.btn--edge:focus-visible{background:var(--gold-lit);color:var(--ink);border-color:var(--gold-lit)}
.btn--solid{background:var(--gold-lit);border-color:var(--gold-lit);color:var(--ink)}
.btn--solid:hover,.btn--solid:focus-visible{background:transparent;color:var(--gold-lit)}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;display:grid;background:var(--ink);isolation:isolate}
.hero picture,.hero img{grid-area:1/1;width:100%;height:100%;object-fit:cover;object-position:52% 32%}
.hero::after{
  content:"";grid-area:1/1;z-index:1;
  background:linear-gradient(180deg,rgba(16,15,13,.58) 0%,rgba(16,15,13,.40) 34%,rgba(16,15,13,.70) 70%,rgba(16,15,13,.93) 100%);
}
.hero__text{
  grid-area:1/1;z-index:2;align-self:end;
  padding:0 var(--pad) clamp(3.5rem,8vw,6.5rem);
  color:var(--cream);
}
.hero h1{
  font-size:clamp(2.55rem,6.4vw,5.6rem);line-height:1.02;
  max-width:min(20ch,68vw);margin:0 0 clamp(1.6rem,3vw,2.4rem);
}
.hero h1 span{
  display:block;margin-top:clamp(1rem,1.8vw,1.5rem);
  /* 17px floor, not 16: PRODUCT.md sets it for an audience of 35 to 60
     reading this on a phone, and the hero sub-line is the one run that sits
     over a photograph. It was the last 16px body run left on the site. */
  font:400 clamp(1.0625rem,1.1vw + .7rem,1.1875rem)/1.5 var(--ff);
  letter-spacing:.01em;max-width:34ch;opacity:.84;
}

/* ---- recognition ---- */
.recognise{
  background:var(--cream);padding:var(--band) var(--pad) clamp(3rem,7vw,5rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  column-gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.recognise__col{
  grid-column:1;grid-row:1;display:grid;align-content:start;
  grid-template-rows:auto auto auto;
}
.recognise__lead,.recognise__body,.recognise__turn{grid-column:1}
.recognise__shot{grid-column:2;grid-row:1;position:sticky;top:clamp(6rem,11vw,9rem);align-self:start}
.recognise__shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 30%}
.recognise__shot figcaption{
  margin-top:1.1rem;font-size:1.0625rem;line-height:1.55;opacity:.72;max-width:34ch;
}
.recognise__lead{
  font:400 clamp(1.125rem,.55vw + 1rem,1.3125rem)/1.62 var(--ff);
  max-width:var(--meas);margin-bottom:clamp(1.3rem,2.4vw,1.9rem);
}
.recognise__body{max-width:var(--meas);display:grid;gap:clamp(1.3rem,2.4vw,1.9rem)}
.recognise__body p{font-size:clamp(1.125rem,.55vw + 1rem,1.3125rem);line-height:1.62}
.recognise__body p:first-child{font-size:clamp(1.3rem,1.4vw + 1rem,1.85rem);line-height:1.42;font-family:var(--ffd);font-weight:400}
.recognise__turn{
  max-width:24ch;margin-top:clamp(3.2rem,7vw,5.5rem);
  font:500 clamp(1.7rem,3.4vw,3.1rem)/1.16 var(--ffd);letter-spacing:-.02em;
}
.recognise__turn b{display:block;margin:.42em 0;font-weight:600;color:var(--gold)}
/* the closing line steps back to body scale so the gold line lands hardest */
.recognise__turn i{
  display:block;margin-top:.9em;font-style:normal;
  font:400 1.125rem/1.6 var(--ff);letter-spacing:0;opacity:.72;max-width:52ch;
}

/* ---- diagnostic ---- */
.diag{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad);text-align:center}
.diag__inner{max-width:52ch;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.diag h2{font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.14;margin-bottom:1.1rem}
.diag p{max-width:44ch;margin-bottom:clamp(2rem,3.5vw,2.75rem);opacity:.8}

/* ---- audit ---- */
.audit{
  display:grid;gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  padding:var(--band) var(--pad);
}
.audit h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.08;margin-bottom:clamp(1.6rem,3vw,2.2rem)}
.audit__text{display:grid;gap:1.35rem;max-width:56ch}
.audit__pull{font:600 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--ffd);margin-block:.3rem}
.audit__close{border-top:1px solid var(--rule-d);padding-top:1.5rem;margin-top:.6rem}
.audit__shot{margin-right:calc(-1 * var(--pad))}
.audit__shot img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---- proof ---- */
.shift{background:var(--cream);padding:var(--band) var(--pad)}
.shift h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:20ch;margin-bottom:clamp(3rem,6vw,4.5rem)}
.shift__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.shift__list li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding:clamp(2.2rem,4vw,3.2rem) 0;border-top:1px solid var(--rule-l);
}
.shift__list li:last-child{border-bottom:1px solid var(--rule-l)}
.shift h3{font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.14;margin-bottom:.75rem}
.shift__lead{max-width:36ch}
.shift__lead p{opacity:.78}
.shift blockquote{margin:0;align-self:center}
.shift blockquote p{
  font:400 clamp(1.15rem,1.5vw,1.45rem)/1.46 var(--ffd);
  text-indent:-.42em;
}
.shift blockquote p::before{content:"\201C"}
.shift blockquote p::after{content:"\201D"}
.shift footer{
  margin-top:1.15rem;font:500 1.0625rem/1.45 var(--ff);letter-spacing:.03em;
  color:var(--gold);
}
.shift footer span{display:block;font-weight:400;letter-spacing:.09em;font-size:var(--fs-micro);
  text-transform:uppercase;color:var(--ink);opacity:.62;margin-top:.3rem}

/* ---- a full-width breath between the proof and the method ---- */
.bleed{background:var(--cream)}
.bleed img{width:100%;height:clamp(20rem,46vw,34rem);object-fit:cover;object-position:50% 55%}

/* ---- the system ---- */
.system{
  background:var(--cream);display:grid;gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start;
  padding:clamp(3.5rem,8vw,6rem) var(--pad) var(--band);
}
.system__text{display:grid;gap:1.35rem;max-width:58ch;grid-column:2}
.system__col{grid-column:1;grid-row:1;display:grid;align-content:start;gap:clamp(2rem,4vw,3rem)}
.system h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.08;margin:0}
/* the sticky heading went when the figure arrived: a head that tracks the
   scroll works beside prose and fights a picture sitting under it */
.system__shot{margin:0}
.system__shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 40%;display:block}
.system__stat{font:400 clamp(1.25rem,1.8vw,1.65rem)/1.3 var(--ffd);opacity:.72}
.system__pull{font:600 clamp(1.35rem,2.2vw,1.95rem)/1.26 var(--ffd);margin-block:.4rem}
.system__where{list-style:none;margin:1rem 0 0;padding:0;display:grid}
.system__where li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1.5rem;align-items:baseline;
  padding:1.15rem 0;border-top:1px solid var(--rule-l);font-size:1.0625rem;
}
.system__where li:last-child{border-bottom:1px solid var(--rule-l)}
.system__where b{font:500 1.0625rem/1.3 var(--ffd);letter-spacing:.01em;grid-column:1}
.system__where a{grid-column:2;grid-row:1/span 2;align-self:center;text-decoration:none;
  color:var(--gold);letter-spacing:.04em;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.system__where a:hover,.system__where a:focus-visible{border-bottom-color:currentColor}

/* ---- investment ---- */
.invest{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad)}
.invest__head{max-width:52ch;margin-bottom:clamp(2.75rem,5vw,4rem)}
.invest h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin-bottom:1.1rem}
.invest__head p{opacity:.78}
.invest__tiers{list-style:none;margin:0;padding:0;display:grid}
.invest__tiers li{
  display:grid;grid-template-columns:minmax(0,7rem) minmax(0,10rem) minmax(0,1fr);
  gap:.4rem clamp(1.5rem,4vw,4rem);align-items:baseline;
  padding:clamp(1.5rem,2.6vw,2.1rem) 0;border-top:1px solid var(--rule-d);
}
.invest__tiers li:last-child{border-bottom:1px solid var(--rule-d)}
.invest h3{font:400 var(--fs-label)/1.5 var(--ff);letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-lit);margin:0}
.invest__fig{font:600 clamp(1.9rem,2.9vw,2.6rem)/1 var(--ffd);letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.55rem;white-space:nowrap}
.invest__fig i{font:400 var(--fs-micro)/1 var(--ff);letter-spacing:.13em;
  text-transform:uppercase;opacity:.5;font-style:normal}
.invest__what{font-size:1.0625rem;line-height:1.55;opacity:.8;max-width:44ch}
.invest__note{margin-top:clamp(1.8rem,3vw,2.4rem);font-size:1.0625rem;opacity:.76;max-width:60ch}
.invest__note a{color:var(--gold-lit);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s ease}
.invest__note a:hover,.invest__note a:focus-visible{border-bottom-color:currentColor}

/* ---- close ---- */
.close{
  background:var(--cream);display:grid;gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
  padding:var(--band) var(--pad);
}
.close h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.08;margin-bottom:1.6rem}
.close__text{display:grid;gap:1.3rem;max-width:46ch}
.close__pull{font:600 clamp(1.3rem,2.1vw,1.8rem)/1.28 var(--ffd);margin-top:.5rem}
.close__form{display:grid;gap:1.15rem;max-width:34rem;width:100%}
.field{display:grid;gap:.45rem}
.field label{font:500 var(--fs-label)/1.3 var(--ff);letter-spacing:.08em;text-transform:uppercase;opacity:.82}
.field input,.field select,.field textarea{
  font:400 1.0625rem/1.5 var(--ff);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule-l);
  padding:.7rem 0;min-height:48px;width:100%;border-radius:0;
  transition:border-color .3s ease;
}
.field textarea{resize:vertical;min-height:110px}
.field :is(input,select,textarea):focus{border-bottom-color:var(--gold);outline:0}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.close__form .btn{justify-self:start;margin-top:.6rem}
.close__small{font-size:1.0625rem;line-height:1.55;opacity:.72}
.close__small.is-err{color:var(--gold);opacity:1}

/* ---- footer ---- */
.foot{background:var(--ink);color:var(--cream);padding:clamp(3.5rem,7vw,5.5rem) var(--pad) clamp(2rem,4vw,3rem)}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule-d)}
.foot__mark{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.foot__nav{display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center}
.foot__nav a{text-decoration:none;font-size:.9375rem;opacity:.74;
  border-bottom:1px solid transparent;transition:opacity .3s ease,border-color .3s ease}
.foot__nav a:hover,.foot__nav a:focus-visible{opacity:1;border-bottom-color:var(--gold-lit)}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:clamp(1.6rem,3vw,2.2rem);font-size:.875rem;opacity:.58}
.foot__bottom p{max-width:60ch}

/* ---- reveal. Hidden state lives in the keyframe with fill both, never on the
   element, so a failed script can never leave the page blank. ---- */
@media (prefers-reduced-motion:no-preference){
  [data-sw]{animation:sw-rise .9s cubic-bezier(.16,.84,.3,1) both;animation-play-state:paused}
  [data-sw].is-in{animation-play-state:running}
  /* the ruled rows are the page's authored moment: the rule draws itself across
     and the row clears from under it, rather than every band rising 22px. */
  .shift__list li[data-sw],.invest__tiers li[data-sw]{
    animation:sw-wipe 1.05s cubic-bezier(.16,.84,.3,1) both;
  }
  .shift__list li[data-sw]{animation-delay:calc(var(--i,0) * 90ms)}
  .invest__tiers li[data-sw]{animation-delay:calc(var(--i,0) * 70ms)}
}
@keyframes sw-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sw-wipe{
  from{opacity:0;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}

/* ---- responsive ---- */
@media (max-width:1100px){
  .recognise{grid-template-columns:1fr}
  .recognise__col{grid-row:auto}
  .recognise__shot{grid-column:1;grid-row:auto;position:static;
    margin-inline:calc(-1 * var(--pad));margin-top:clamp(2.5rem,6vw,4rem)}
  .recognise__shot figcaption{padding-inline:var(--pad)}
}
@media (max-width:1000px){
  .audit,.system,.close{grid-template-columns:1fr}
  .audit__shot{margin-inline:calc(-1 * var(--pad))}
  .system__col{grid-column:1;grid-row:auto}
  .system__text{grid-column:1}
  .shift__list li{grid-template-columns:1fr;gap:1.4rem}
  .shift blockquote{grid-column:1;grid-row:auto;
    border-left:1px solid var(--rule-l);padding-left:clamp(1.1rem,3vw,1.6rem)}
  .system__text,.system h2{grid-column:1}
  .invest__tiers li{grid-template-columns:1fr;gap:.55rem}
  .invest__fig{margin-block:.15rem}
}
@media (max-width:760px){
  .burger{display:flex}
  .masthead__nav{
    position:fixed;inset:0;z-index:-1;background:var(--ink);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:clamp(1.1rem,3.5vh,1.9rem);padding:0 var(--pad);
    clip-path:inset(0 0 100% 0);pointer-events:none;
    transition:clip-path .5s cubic-bezier(.16,.84,.3,1);
  }
  .masthead__nav.is-open{clip-path:inset(0);pointer-events:auto}
  .masthead__nav a{font:500 1.85rem/1.2 var(--ffd);letter-spacing:-.01em}
  .masthead__cta{font:500 .9375rem/1 var(--ff);letter-spacing:.06em;margin-top:1rem}
  .hero img{object-position:50% 30%}
  .hero h1{max-width:none}
  .hero__text{padding-bottom:clamp(6.5rem,17vw,8rem)}
  .foot__bottom{flex-direction:column}
}
@media (max-width:420px){
  .shift blockquote p{font-size:1.1rem}
  .btn{width:100%}
  .close__form .btn{justify-self:stretch}
}
/* ---------------------------------------------------------------
   WhatsApp enquiry tab
   Floating tap-to-chat with the message already written for them.
   Icon only, no text label, the glyph does the explaining.
   Inherits the host site's --pill / --ease / --card / --ink tokens
   if they exist, falls back to sane values if they don't.
   --------------------------------------------------------------- */

/* tokens live on :root, not on .wa-tap. the bubble is a sibling of the button,
   so anything scoped to .wa-tap is invisible to it. */
:root{
  /* deeper than stock WhatsApp green (#25d366) on purpose. the stock neon reads as
     a bolted-on widget next to most brand palettes, this still reads as WhatsApp
     instantly but sits in the design. stock green is one line away if wanted. */
  --wa:#1fa855;                /* button fill */
  --wa-deep:#17904a;           /* button fill on hover */

  /* neutral elevation, not a coloured glow. a tinted halo is the giveaway of a
     bolted-on chat widget, plain shadow reads as part of the site. */
  --wa-shadow:0 12px 28px -10px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --wa-shadow-hover:0 18px 36px -12px rgba(0,0,0,.68), 0 2px 6px rgba(0,0,0,.32);

  --wa-gap:clamp(.9rem,2.2vw,1.4rem);
  --wa-size:60px;              /* button diameter, the bubble offsets off this */
}

.wa-tap,.wa-peek,.wa-peek *{
  box-sizing:border-box;         /* don't rely on the host site having a reset */
}

.wa-tap{
  position:fixed;
  right:var(--wa-gap,1.25rem);
  bottom:calc(var(--wa-gap,1.25rem) + env(safe-area-inset-bottom,0px));
  z-index:85;                     /* under a typical fixed header, over page content */

  display:grid;
  place-items:center;
  width:var(--wa-size);
  height:var(--wa-size);
  border-radius:50%;
  background:var(--wa);
  color:#fff;
  text-decoration:none;           /* don't rely on the host site's link reset */
  -webkit-tap-highlight-color:transparent;
  box-shadow:var(--wa-shadow);

  /* entry state, flipped by data-wa-state="in" once the page has settled */
  opacity:0;
  transform:translateY(14px) scale(.94);
  transition:opacity .45s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .45s var(--ease,cubic-bezier(.16,1,.3,1)),
             background .22s ease,
             box-shadow .28s var(--ease,cubic-bezier(.16,1,.3,1));
}
.wa-tap[data-wa-state="in"]{opacity:1;transform:none}

.wa-tap:hover{
  background:var(--wa-deep);
  box-shadow:var(--wa-shadow-hover);
}
.wa-tap[data-wa-state="in"]:hover{transform:translateY(-2px)}
.wa-tap:active{transform:translateY(0) scale(.96)}

.wa-tap svg{width:31px;height:31px;fill:currentColor}

/* the nudge bubble: fires once, then remembers it was dismissed */
.wa-peek{
  position:fixed;
  right:var(--wa-gap,1.25rem);
  bottom:calc(var(--wa-size,60px) + var(--wa-gap,1.25rem) + .65rem + env(safe-area-inset-bottom,0px));
  z-index:86;
  width:max-content;                    /* hugs short labels, wraps long ones */
  max-width:min(17rem,calc(100vw - 2.5rem));
  padding:.7rem 1.9rem .7rem .9rem;
  border-radius:14px 14px 5px 14px;
  background:var(--card,#fff);
  color:var(--ink,#282320);
  border:1px solid var(--line,rgba(0,0,0,.1));
  box-shadow:0 14px 34px -18px rgba(0,0,0,.36);
  font-family:inherit;
  /* px, not rem, deliberately. The bubble used to scale off the host's root
     font size, so a site with an 18px base rendered it noticeably larger than
     one with 16px and it started covering body copy. Absolute units keep it
     the same physical size everywhere. */
  font-size:14px;
  line-height:1.4;
  text-align:left;
  opacity:0;
  transform:translateY(8px) scale(.96);
  transform-origin:100% 100%;
  transition:opacity .4s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .4s var(--ease,cubic-bezier(.16,1,.3,1));
}
.wa-peek[data-wa-state="in"]{opacity:1;transform:none}
.wa-peek[hidden]{display:none}

.wa-peek-close{
  position:absolute;
  top:.3rem;
  right:.3rem;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:0;
  background:none;
  color:var(--ink-soft,#6b625a);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  border-radius:50%;
  transition:color .2s ease,background .2s ease;
}
.wa-peek-close:hover{color:var(--ink,#282320);background:rgba(0,0,0,.06)}

/* --- collision handling ------------------------------------------------ */

/* get out of the way of an open mobile nav. one selector per pattern we use:
   .site-header.menu-open is Yerby, .mobile-menu.open is the ATA site,
   #pkMobNav.open is The Park PT, .nav-open is the generic fallback. add the
   site's own class here if it differs. */
body:has(.site-header.menu-open) .wa-tap,
body:has(.site-header.menu-open) .wa-peek,
body:has(.mobile-menu.open) .wa-tap,
body:has(.mobile-menu.open) .wa-peek,
body:has(#pkMobNav.open) .wa-tap,
body:has(#pkMobNav.open) .wa-peek,
body:has(.nav-open) .wa-tap,
body:has(.nav-open) .wa-peek{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.94);
}

/* --- mobile sizing -----------------------------------------------------
   60px reads fine on a laptop and heavy on a phone, where the button sits in
   the thumb zone and competes with the content. Slightly smaller, and closer
   to the edge: bottom used to be gap PLUS the safe-area inset, which stacks
   two clearances on a notched iPhone and floats the button well up the screen.
   max() takes whichever single clearance is larger instead. */
@media(max-width:560px){
  :root{
    --wa-size:52px;
    --wa-gap:.8rem;
  }
  .wa-tap{
    bottom:max(var(--wa-gap,.8rem), env(safe-area-inset-bottom,0px));
  }
  .wa-tap svg{width:27px;height:27px}
  /* Sized in px, not rem, on purpose. The bubble used to inherit the host's
     root font size and typeface, so on a site with a larger base size or a
     wider face it rendered noticeably bigger and covered body copy. Absolute
     units keep it the same physical size on every site. */
  .wa-peek{
    bottom:calc(var(--wa-size,52px) + max(var(--wa-gap,.8rem), env(safe-area-inset-bottom,0px)) + .5rem);
    max-width:min(13rem,calc(100vw - 5.5rem));
    padding:.6rem 1.7rem .6rem .75rem;
    border-radius:13px 13px 5px 13px;
    font-size:13px;
    line-height:1.35;
    box-shadow:0 12px 30px -16px rgba(0,0,0,.34);
  }
  .wa-peek-close{width:24px;height:24px;font-size:.95rem;top:.15rem;right:.15rem}
}

/* on narrow screens the cookie banner goes full width, so sit above it.
   .cookie-banner[hidden] is the pattern on our own builds. The Park PT keeps its
   bar in the DOM and slides it in with .visible instead, so it needs its own
   selector: a :not([hidden]) test would match it permanently. */
@media(max-width:560px){
  body:has(.cookie-banner:not([hidden])) .wa-tap,
  body:has(.pk-cookie-bar.visible) .wa-tap{bottom:calc(var(--wa-gap,1.25rem) + 9.5rem + env(safe-area-inset-bottom,0px))}
  body:has(.cookie-banner:not([hidden])) .wa-peek,
  body:has(.pk-cookie-bar.visible) .wa-peek{display:none}
}

@media(prefers-reduced-motion:reduce){
  .wa-tap,.wa-peek{transition:none}
  .wa-tap[data-wa-state="in"],.wa-peek[data-wa-state="in"]{transform:none}
  .wa-tap[data-wa-state="in"]:hover,.wa-tap:active{transform:none}
}

/* print / no-js: no point showing it */
@media print{.wa-tap,.wa-peek{display:none}}
html:not(.js) .wa-tap,html:not(.js) .wa-peek{display:none}

/* ============================================================
   Location pages. Same bands, same ruled rows, nothing new invented.
   Order on Liverpool Street is ink, cream, ink, cream, ink, cream,
   ink, cream, ink so the grounds keep alternating.
   ============================================================ */

/* the location hero leads on the room rather than on him */
.hero--loc img{object-position:50% 58%}
.hero--loc .hero__text h1{max-width:min(19ch,62vw)}


/* the location recognition band carries a taller frame and no sticky travel:
   its passage is two paragraphs, so there is nothing for it to track */
.hero--loc ~ .recognise .recognise__shot{position:static}
.hero--loc ~ .recognise .recognise__shot img{aspect-ratio:3/4;object-position:50% 38%}
/* two paragraphs rather than the homepage's five, so the turn line sits closer
   and the column reads as one block instead of two halves */
.hero--loc ~ .recognise .recognise__turn{margin-top:clamp(1.8rem,3.4vw,2.8rem)}

/* a single quote sitting inside prose, on the ink ground */
.loc-quote{
  margin:clamp(1.8rem,3vw,2.4rem) 0 0;padding-top:clamp(1.5rem,2.6vw,2rem);
  border-top:1px solid var(--rule-d);
}
.loc-quote p{
  font:400 clamp(1.15rem,1.5vw,1.45rem)/1.46 var(--ffd);text-indent:-.42em;
}
.loc-quote p::before{content:"\201C"}
.loc-quote p::after{content:"\201D"}
.loc-quote footer{margin-top:1rem;font:500 1.0625rem/1.45 var(--ff);letter-spacing:.03em;color:var(--gold-lit)}
.loc-quote footer span{display:block;font-weight:400;letter-spacing:.09em;font-size:var(--fs-micro);
  text-transform:uppercase;opacity:.6;margin-top:.3rem}
/* a photographic ground is brighter and less even than flat ink, so the micro
   label needs more of its own colour. Measured: .6 gave 4.11:1 against a 4.5 floor. */
.on-photo .loc-quote footer span{opacity:.82}


/* the location audit band runs as prose across the full measure, so it does not
   repeat the two-column-plus-image shape of the recognition band above it.
   The client quote becomes the band's anchor rather than a footnote. */
.audit--prose{
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  column-gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
/* one grid item per column, never several. A spanning child distributes its
   height across every row it covers and pulls the other column apart. */
.audit__col{grid-column:1;grid-row:1;display:grid;align-content:start;gap:clamp(2rem,4vw,3rem)}
.audit--prose h2{max-width:18ch;font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0}
.audit--prose .audit__text{
  grid-column:2;grid-row:1;max-width:58ch;display:grid;gap:1.35rem;align-content:start;
}
.audit--prose .loc-quote{
  margin:0;border-top:0;border-left:1px solid var(--rule-d);
  padding:0 0 0 clamp(1.2rem,2.6vw,2rem);max-width:30ch;
}
.audit--prose .loc-quote p{font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.34}

@media (max-width:1000px){
  .audit--prose{grid-template-columns:1fr}
  .audit__col,.audit--prose .audit__text{grid-column:1;grid-row:auto}
  .audit--prose .loc-quote{max-width:none}
  .audit__shot{margin-inline:calc(-1 * var(--pad))}
  .system__col{grid-column:1;grid-row:auto}
  .system__text{grid-column:1}
}

/* the facility, as a two-column spec grid */
.facility{background:var(--cream);padding:var(--band) var(--pad)}
.facility__head{max-width:54ch;margin-bottom:clamp(2.5rem,4.5vw,3.5rem)}
.facility h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin-bottom:1.1rem}
.facility__head p{font-size:clamp(1.125rem,.55vw + 1rem,1.3125rem);line-height:1.6}
.facility__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.2rem,4vw,3.4rem) clamp(2.5rem,6vw,6rem);
  border-top:1px solid var(--rule-l);padding-top:clamp(2.2rem,4vw,3.2rem);
}
.facility__list li{display:grid;gap:.5rem;align-content:start}
.facility__list b{font:500 clamp(1.25rem,1.8vw,1.65rem)/1.22 var(--ffd);letter-spacing:-.012em}
.facility__list span{font-size:1.0625rem;line-height:1.6;opacity:.8}

/* getting here. The section that earns the search term. */
/* ---- a band whose ground is a photograph ------------------------------------
   The image sits behind at z-index -2, a scrim at -1, both inside an isolation
   context so the stacking cannot leak. The scrim's last stop is solid ink so the
   flat band below continues the ground rather than cutting the photograph off. */
.on-photo{position:relative;isolation:isolate;color:var(--cream);background:var(--ink)}
.on-photo > .band-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.on-photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(16,15,13,.90) 0%, rgba(16,15,13,.72) 26%,
    rgba(16,15,13,.80) 62%, rgba(16,15,13,.97) 92%, var(--ink) 100%);
}
.audit--prose > .band-bg{object-position:50% 52%}
.getting > .band-bg{object-position:50% 22%}

.getting{padding:var(--band) var(--pad)}
.getting__head{max-width:56ch;margin-bottom:clamp(2.5rem,4.5vw,3.5rem)}
.getting h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin-bottom:1.1rem}
.getting__head p{font-size:1.0625rem;line-height:1.6;opacity:.82}
.getting__list{list-style:none;margin:0;padding:0;display:grid}
.getting__list li{
  display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr) auto;
  gap:.35rem clamp(1.5rem,4vw,4rem);align-items:baseline;
  padding:clamp(1.2rem,2.2vw,1.7rem) 0;border-top:1px solid var(--rule-d);
}
.getting__list li:last-child{border-bottom:1px solid var(--rule-d)}
.getting__list b{font:500 1.0625rem/1.35 var(--ffd);letter-spacing:.01em}
.getting__list span{font-size:1.0625rem;line-height:1.5;opacity:.68}
.getting__list i{font:500 1.0625rem/1.35 var(--ff);font-style:normal;
  color:var(--gold-lit);white-space:nowrap}
.getting__note{margin-top:clamp(1.6rem,2.6vw,2.1rem);font-size:1.0625rem;opacity:.62;max-width:60ch}


/* the tier rows on the cream ground, kept for later pages */
.invest--cream{background:var(--cream);color:var(--ink)}
.invest--cream .invest__head p{opacity:.82}
.invest--cream .invest__tiers li{border-top-color:var(--rule-l)}
.invest--cream .invest__tiers li:last-child{border-bottom-color:var(--rule-l)}
.invest--cream h3{color:var(--gold)}
.invest--cream .invest__note a{color:var(--gold)}

/* FAQ. Ruled rows again, opened by a native details element so it works
   with the script dead and is findable by the browser's own find-in-page. */
.faq{background:var(--cream);padding:var(--band) var(--pad)}
.faq h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:22ch;
  margin-bottom:clamp(2.5rem,4.5vw,3.5rem)}
.faq__list{display:grid;max-width:78ch}
.faq details{border-top:1px solid var(--rule-l)}
.faq details:last-child{border-bottom:1px solid var(--rule-l)}
.faq summary{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
  padding:clamp(1.3rem,2.3vw,1.8rem) 0;cursor:pointer;list-style:none;
  font:500 clamp(1.15rem,1.6vw,1.5rem)/1.35 var(--ffd);letter-spacing:-.01em;
  min-height:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:.9rem;height:.9rem;align-self:center;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .4s cubic-bezier(.16,.84,.3,1);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq summary:hover span,.faq summary:focus-visible span{color:var(--gold)}
.faq details > p{
  font-size:1.0625rem;line-height:1.65;opacity:.82;max-width:68ch;
  padding-bottom:clamp(1.3rem,2.3vw,1.8rem);margin-top:-.2rem;
}

@media (max-width:1000px){
  .facility__list{grid-template-columns:1fr}
  .getting__list li{grid-template-columns:1fr;gap:.45rem}
  .getting__list i{margin-top:.2rem}
}

/* WhatsApp tab, taken off the shared snippet and repainted into this palette.
   Jools asked specifically for it not to arrive in WhatsApp green. */
:root{
  --wa:var(--ink);
  --wa-deep:var(--gold-lit);
  --card:var(--cream);
  --ink-soft:rgba(16,15,13,.62);
  --line:var(--rule-l);
  --ease:cubic-bezier(.16,.84,.3,1);
}
.wa-tap{border:1px solid var(--gold-lit);color:var(--gold-lit)}
.wa-tap:hover,.wa-tap:focus-visible{background:var(--gold-lit);color:var(--ink)}
.wa-peek{font-family:var(--ff);border:1px solid var(--rule-l)}

/* the stacked layout moves the gold walk times over a brighter part of the
   photograph, so the scrim goes deeper on a narrow viewport. Measured: the
   times were 3.63:1 against a 4.5 floor before this. */
@media (max-width:760px){
  .on-photo::before{
    background:linear-gradient(180deg,
      rgba(16,15,13,.93) 0%, rgba(16,15,13,.88) 26%,
      rgba(16,15,13,.91) 62%, rgba(16,15,13,.98) 92%, var(--ink) 100%);
  }
}

/* ---- ground modifiers ------------------------------------------------------
   The location page carries one fewer flat band than the homepage because the
   transport section sits on a photograph, so these two keep ink and cream
   alternating all the way to the footer. They live at the end of the file
   deliberately: each has the same specificity as the base class it overrides. */
.diag--cream{background:var(--cream);color:var(--ink)}
.diag--cream .swmark--lg{color:var(--gold)}
.diag--cream p{opacity:.78}
.diag--cream .btn--solid{background:var(--gold);border-color:var(--gold);color:var(--cream)}
.diag--cream .btn--solid:hover,.diag--cream .btn--solid:focus-visible{
  background:transparent;color:var(--gold)}

.faq--ink{background:var(--ink);color:var(--cream)}
.faq--ink details{border-top-color:var(--rule-d)}
.faq--ink details:last-child{border-bottom-color:var(--rule-d)}
.faq--ink summary::after{border-right-color:var(--gold-lit);border-bottom-color:var(--gold-lit)}
.faq--ink summary:hover span,.faq--ink summary:focus-visible span{color:var(--gold-lit)}

/* ---- Canary Wharf framing --------------------------------------------------
   Three frames that need a different crop from the Liverpool Street ones.
   Measured before placing, as the notes now insist: the arrival shot is mean
   luminance 121 over the whole frame but 71 across its bottom 38%, because the
   sky is what lifts the average. It ships pre-cropped to the arcade, and these
   positions hold that crop rather than drifting back up into the glass. */
.hero--cw img{object-position:50% 62%}
.audit--cw > .band-bg{object-position:50% 34%}
.getting--cw > .band-bg{object-position:50% 72%}

/* six rows here against five at Liverpool Street, because the Wharf genuinely
   has six stations inside a ten minute walk. The extra row is absorbed by the
   list rather than by the band. */
.getting--cw .getting__list{row-gap:clamp(.9rem,1.5vw,1.2rem)}

/* The masthead floats transparent over the hero and borrows its contrast from
   whatever photograph happens to be behind it. Measured on the Canary Wharf
   hero, whose top right corner is a lit ceiling panel: the nav ran 3.79:1
   against a 4.5 floor. One short scrim under the header fixes every hero at
   once rather than re-grading each photograph, and it retires the moment the
   solid scrolled state takes over. */
.masthead::before{
  content:"";position:absolute;inset:0 0 auto;height:calc(100% + 3.5rem);
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(16,15,13,.74) 0%, rgba(16,15,13,.46) 54%, rgba(16,15,13,0) 100%);
  transition:opacity .28s ease;
}
.masthead.is-set::before{opacity:0}

/* "Canary Wharf." is four characters shorter than "Liverpool Street.", so the
   15ch cap that held the Liverpool headline to two lines squeezed the address
   line underneath it into three. The headline still breaks after "trainer,". */
.hero--cw .hero__text h1{max-width:min(30ch,62vw)}

/* Ivan Foong's testimonial runs 43 words against Adrian Wals's nine. The 30ch
   measure that suited one line turned it into a twelve-line ribbon down the
   left of the band, so it gets a wider measure and steps back down to the base
   Quote size. The promoted step exists to give a short quote presence; a quote
   this long already has presence from its mass, and at the promoted size it
   out-shouts the head above it. Both sizes are the documented ramp, this one
   just picks the other rung. */
.audit--cw .loc-quote{max-width:46ch;padding-left:clamp(1.1rem,2.1vw,1.6rem)}
.audit--cw .loc-quote p{font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.46}
.audit--cw .audit__col{gap:clamp(1.6rem,3vw,2.4rem)}

/* text-wrap:balance is set on every heading, and the hero sub-line inherits it
   because it lives inside the h1. Balance is right for a two-line display
   headline and wrong for a running sentence: it was breaking the address into
   three 220px stubs inside a 370px measure. Pretty leaves the line filling and
   only guards the last-line orphan. */
.hero h1 span{text-wrap:pretty}
/* and two characters more measure, because "30 South Colonnade." is one word
   longer than "280 Bishops Square." and was dropping "station." onto a third
   line on its own. */
.hero--cw h1 span{max-width:40ch}

/* The location-page headline caps are desktop measures. They were written as
   `.hero--loc .hero__text h1`, which outranks the `.hero h1{max-width:none}`
   inside the phone media query, so both location heroes were silently capped
   at 62vw on a phone: 242px of a 350px column, and the address line underneath
   broke into three stubs. Phones get the full column back. */
@media (max-width:760px){
  .hero--loc .hero__text h1,
  .hero--cw .hero__text h1,
  .hero--cw h1 span{max-width:none}
}

/* ============================================================
   THE METHOD PAGE
   The location pages answer "where". This one answers "what actually
   happens", so it carries more continuous reading than anything else on the
   site and its bands are built for that: wider measures, fewer photographs,
   and the three pillars given the whole width of the darkest band.
   ============================================================ */

/* the method hero leads on a bright interior rather than a dark room, so its
   scrim runs deeper than the location one. Measured, not guessed: the h1 over
   the untouched gradient came back under the 3:1 large-text floor. */
.hero--method::after{
  background:linear-gradient(180deg,
    rgba(16,15,13,.62) 0%, rgba(16,15,13,.50) 30%,
    rgba(16,15,13,.80) 66%, rgba(16,15,13,.96) 100%);
}
.hero--method img{object-position:50% 38%}  /* clears his hands so the headline is not set across the book */
.hero--method .hero__text h1{max-width:min(25ch,66vw)}
.hero--method h1 span{max-width:46ch}

/* a light-ground variant of the quote that carries the ink rule instead of
   the cream one. Same component, opposite side of the palette. */
.loc-quote--light{border-color:var(--rule-l)}
.loc-quote--light footer{color:var(--gold)}
.loc-quote--light footer span{color:var(--ink);opacity:.62}

/* ---- partnership: statement left, the client's own words right ---- */
.partnership{
  background:var(--cream);padding:var(--band) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(2.5rem,7vw,7rem);align-items:start;
}
.partnership__col{display:grid;align-content:start;gap:clamp(1.1rem,1.8vw,1.5rem)}
.partnership__lead{max-width:24ch;
  font:400 clamp(1.3rem,1.4vw + 1rem,1.85rem)/1.42 var(--ffd);
  color:var(--gold);margin:0;
}
.partnership h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0;max-width:18ch}
.partnership__col p:not(.partnership__lead){opacity:.82;max-width:46ch}
.partnership .loc-quote{
  margin:0;border-top:0;border-left:1px solid var(--rule-l);
  padding:0 0 0 clamp(1.2rem,2.6vw,2rem);max-width:38ch;align-self:start;
  margin-top:clamp(0rem,7vw,6rem);
}
.partnership .loc-quote p{font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.46}

/* ---- the three pillars ----
   A numeral column that stays narrow, a name that reads as a heading with its
   verb beneath it, and the prose on a comfortable measure. Hairlines between,
   in the same grammar as every other ruled row on the site, so the page's one
   piece of unique furniture is the numeral and nothing else. */
.pillars{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad)}
.pillars__head{max-width:46ch;margin-bottom:clamp(2.6rem,5vw,4rem)}
.pillars h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:20ch;margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.pillars__head p{opacity:.78}
.pillars__list{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.pillars__list li{
  display:grid;grid-template-columns:clamp(3.2rem,6vw,5.5rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding:clamp(2.2rem,4vw,3.4rem) 0;border-top:1px solid var(--rule-d);
}
.pillars__list li:last-child{border-bottom:1px solid var(--rule-d)}
.pillars__num{
  font:400 clamp(2.4rem,5vw,4.4rem)/.92 var(--ffd);
  color:var(--gold-lit);margin:0;letter-spacing:.01em;
}
.pillars__body{max-width:56ch}
.pillars h3{
  font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.14;margin-bottom:.9rem;
}
.pillars h3 i{
  display:block;margin-top:.5rem;font-style:normal;
  font:400 var(--fs-label)/1.4 var(--ff);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-lit);
}
.pillars__body p{opacity:.86}
.pillars__note{
  margin-top:clamp(2.2rem,4vw,3rem);max-width:58ch;opacity:.8;line-height:1.7;
}
.pillars__note a{color:var(--gold-lit)}

/* ---- the timeline ----
   A definition list, because that is what it is: three stages and what is
   true by each. The term sits in the margin on a wide screen and above its
   own description on a narrow one. */
.stages{background:var(--cream);padding:var(--band) var(--pad)}
.stages__head{max-width:52ch;margin-bottom:clamp(2.6rem,5vw,4rem)}
.stages h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.stages__head p{opacity:.78;font-size:clamp(1.125rem,.55vw + 1rem,1.3125rem);line-height:1.62}
.stages__list{margin:0}
.stages__list > div{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem);
  padding:clamp(1.8rem,3.4vw,2.8rem) 0;border-top:1px solid var(--rule-l);
}
.stages__list > div:last-child{border-bottom:1px solid var(--rule-l)}
.stages dt{
  font:500 clamp(1.25rem,1.8vw,1.65rem)/1.22 var(--ffd);
  letter-spacing:-.012em;margin:0;
}
.stages dd{margin:0;max-width:58ch;opacity:.84}
.stages__quote{
  margin-top:clamp(2.4rem,4.5vw,3.4rem);max-width:52ch;
  border-top:0;border-left:1px solid var(--rule-l);
  padding:0 0 0 clamp(1.2rem,2.6vw,2rem);
}
.stages__quote p{font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.46}

/* ---- two sides of the partnership ----
   Head across the top, the two obligations side by side under it, his line
   about the board member closing the band across the full width. */
.both{padding:var(--band) var(--pad);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:clamp(2.2rem,4vw,3.2rem);
}
.both__head{grid-column:1/-1;max-width:48ch}
.both h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:19ch;margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.both__head p{opacity:.82}
.both h3{
  font:400 var(--fs-label)/1.4 var(--ff);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-lit);
  padding-bottom:1rem;border-bottom:1px solid var(--rule-d);margin-bottom:1.4rem;
}
.both__side ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
.both__side li{max-width:40ch;opacity:.88}
.both__side b{font-weight:500}
.both__pull{
  grid-column:1/-1;max-width:56ch;
  font:400 clamp(1.3rem,2.1vw,1.8rem)/1.28 var(--ffd);
  padding-top:clamp(1.8rem,3.4vw,2.6rem);border-top:1px solid var(--rule-d);
}

@media (max-width:900px){
  .partnership{grid-template-columns:1fr;row-gap:clamp(2.2rem,5vw,3rem)}
  .partnership .loc-quote{max-width:none;align-self:start}
  .both{grid-template-columns:1fr}
  .pillars__list li{grid-template-columns:1fr;gap:.9rem}
  .pillars__num{font-size:clamp(2rem,9vw,2.6rem)}
  .stages__list > div{grid-template-columns:1fr;gap:.7rem}
}

/* The hero's photograph was a grid item, so it sized the row: a landscape
   frame happened to land near one viewport, and a portrait one made the hero
   2500px tall and pushed the headline and the call to action off the first
   screen entirely. Capping the height only clipped them, because the row was
   still that tall. The photograph comes out of flow instead, so the row is
   sized by the text and `min-height:100svh` finally means what it says,
   whatever shape the photograph happens to be. */
.hero > picture{position:absolute;inset:0;z-index:0}
.hero > picture > img{width:100%;height:100%}
.both > .band-bg{object-position:50% 34%}

/* Two columns of copy across the full width put text over more of the frame
   than the single-column location bands do, so this one's scrim runs deeper.
   Measured, not guessed: the uppercase labels came back at 3.78:1 against a
   4.5 floor on the stock gradient. */
.both::before{
  background:linear-gradient(180deg,
    rgba(16,15,13,.93) 0%, rgba(16,15,13,.87) 24%,
    rgba(16,15,13,.91) 58%, rgba(16,15,13,.98) 92%, var(--ink) 100%);
}

/* ============================================================
   ABOUT
   The credentials page. Everywhere else a qualification is a clause inside an
   argument; here the names are the content, so they get a ruled list of their
   own and Person schema underneath.
   ============================================================ */

.hero--about img{object-position:50% 22%}  /* his face, not the ceiling above it */
.hero--about .hero__text h1{max-width:min(21ch,62vw)}
.hero--about h1 span{max-width:44ch}

/* ---- same season: the claim on the left, the evidence for it on the right ---- */
.season{
  background:var(--cream);padding:var(--band) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:clamp(2.5rem,7vw,7rem);row-gap:clamp(2.4rem,5vw,3.4rem);align-items:start;
}
.season__col{display:grid;align-content:start;gap:clamp(1.1rem,1.8vw,1.5rem)}
.season h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:15ch;margin:0}
.season__col p{max-width:46ch;opacity:.84}
.season__turn{
  font:400 clamp(1.3rem,1.4vw + 1rem,1.85rem)/1.42 var(--ffd);
  opacity:1 !important;max-width:34ch;
  padding-top:clamp(1.4rem,2.4vw,1.9rem);border-top:1px solid var(--rule-l);
  margin-top:clamp(.4rem,1vw,.8rem);
}
/* the endurance event, set as a small record rather than a paragraph: it is
   four numbers and a time, and numbers read as numbers */
.season__event{
  border-left:1px solid var(--rule-l);padding-left:clamp(1.4rem,3vw,2.4rem);
  max-width:38ch;
}
.season__event h3{
  font:400 var(--fs-label)/1.4 var(--ff);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;
}
.season__event > p{opacity:.84}
.season__stats{
  list-style:none;margin:clamp(1.4rem,2.6vw,2rem) 0 1rem;padding:0;display:grid;gap:0;
}
.season__stats li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.85rem 0;border-top:1px solid var(--rule-l);
}
.season__stats li:last-child{border-bottom:1px solid var(--rule-l)}
.season__stats b{
  font:400 var(--fs-label)/1 var(--ff);letter-spacing:.14em;
  text-transform:uppercase;opacity:.62;
}
.season__stats i{font:500 clamp(1.25rem,1.8vw,1.65rem)/1 var(--ffd);font-style:normal;letter-spacing:-.012em}
.season__note{font-size:1.0625rem;line-height:1.55;opacity:.72;margin:0}

/* ---- lineage and credentials ---- */
.lineage{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad)}
.lineage__head{max-width:58ch;margin-bottom:clamp(2.6rem,5vw,4rem);display:grid;gap:1.35rem}
.lineage h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0 0 .6rem}
.lineage__head p{opacity:.84}
.lineage__creed{
  font:600 clamp(1.3rem,2.1vw,1.8rem)/1.28 var(--ffd);opacity:1 !important;max-width:34ch;
}
.lineage__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lineage__list li{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.4rem,2.6vw,2rem) 0;border-top:1px solid var(--rule-d);
}
.lineage__list li:last-child{border-bottom:1px solid var(--rule-d)}
.lineage__list b{font:500 clamp(1.25rem,1.8vw,1.65rem)/1.22 var(--ffd);letter-spacing:-.012em}
.lineage__list span{
  font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-lit);
}

/* ---- what a decade taught me ---- */
.taught{
  background:var(--cream);padding:var(--band) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:clamp(2.4rem,5vw,3.4rem);align-items:start;
}
.taught__col{display:grid;align-content:start;gap:clamp(1.1rem,1.8vw,1.5rem)}
.taught h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:19ch;margin:0}
.taught__col p{max-width:48ch;opacity:.84}
.taught__pull{
  font:600 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--ffd);opacity:1 !important;
  margin-block:.4rem;
}
.taught__col a{color:var(--gold)}
.taught__shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 62%}
.taught__shot figcaption{
  margin-top:1.1rem;font-size:1.0625rem;line-height:1.55;opacity:.72;max-width:34ch;
}

/* ---- the people around him ---- */
.around{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad)}
.around__head{max-width:46ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.around h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:18ch;margin-bottom:clamp(.9rem,1.6vw,1.2rem)}
.around__head p{opacity:.78}
.around__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.around__list li{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.5rem,2.8vw,2.2rem) 0;border-top:1px solid var(--rule-d);
}
.around__list li:last-child{border-bottom:1px solid var(--rule-d)}
.around__list b{font:500 clamp(1.15rem,1.5vw,1.45rem)/1.26 var(--ffd);letter-spacing:-.01em}
.around__list span{opacity:.82}
.around__note{margin-top:clamp(2rem,3.6vw,2.8rem);max-width:60ch;opacity:.8;line-height:1.7}
.around__note a{color:var(--gold-lit)}

@media (max-width:900px){
  .season,.taught{grid-template-columns:1fr}
  .season__event{border-left:0;padding-left:0;max-width:none;
    border-top:1px solid var(--rule-l);padding-top:clamp(1.8rem,4vw,2.4rem)}
  .lineage__list li,.around__list li{grid-template-columns:1fr;gap:.6rem}
}

/* ============================================================
   RESULTS
   The one page where he is not the one talking. His copy is the frame and
   everything inside it is a client's own words, so the typography gets out of
   the way: the quotes are the largest thing on the band and the attributions
   are the only gold.
   ============================================================ */

.hero--results img{object-position:50% 46%}
.hero--results .hero__text h1{max-width:min(13ch,52vw)}
.hero--results h1 span{max-width:42ch}

/* ---- the question everyone arrives with ---- */
.asked--ink{background:var(--ink);color:var(--cream)}
.asked{padding:var(--band) var(--pad)}
.asked__inner{max-width:60ch;margin-inline:auto;text-align:center;display:grid;gap:1.4rem}
.asked h2{
  font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.14;
  max-width:27ch;margin:0 auto;
}
.asked__q{
  font:400 clamp(2rem,4.6vw,4rem)/1.1 var(--ffd);
  color:var(--gold-lit);margin:clamp(.6rem,1.4vw,1.1rem) 0 0;
}
.asked__a{
  font:600 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--ffd);margin:0 0 clamp(.6rem,1.4vw,1rem);
}
.asked__inner p:not(.asked__q):not(.asked__a){opacity:.8;max-width:52ch;margin-inline:auto}

/* ---- four transformations, image and words alternating sides ----
   Cream ground on purpose: the cards are his own SWITCH ON exports on a white
   field, and on the ink band each one reads as a hard bright rectangle. */
.transf{background:var(--cream);padding:var(--band) var(--pad)}
.transf__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.transf__list li{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(2.6rem,5vw,4.4rem) 0;border-top:1px solid var(--rule-l);
}
.transf__list li:last-child{border-bottom:1px solid var(--rule-l)}
/* the second and fourth flip, so the eye is not tracking down one rail */
.transf__list li:nth-child(even) figure{grid-column:2;grid-row:1}
.transf__list li:nth-child(even) blockquote{grid-column:1;grid-row:1}
.transf figure{margin:0}
.transf figure img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.transf blockquote{margin:0;max-width:46ch}
.transf blockquote p{
  font:400 clamp(1.15rem,1.5vw,1.45rem)/1.46 var(--ffd);text-indent:-.42em;margin:0;
}
.transf blockquote p::before{content:"\201C"}
.transf blockquote p::after{content:"\201D"}
.transf footer{
  margin-top:1.3rem;font:500 1.0625rem/1.45 var(--ff);letter-spacing:.03em;color:var(--gold);
}
.transf footer span{
  display:block;font-weight:400;letter-spacing:.09em;font-size:var(--fs-micro);
  text-transform:uppercase;color:var(--ink);opacity:.62;margin-top:.3rem;
}

/* ---- the review rail ----
   A continuous run rather than two columns of standing text. No boxes: each
   voice is separated by the same hairline every other list on the site uses,
   and the rail fades at both edges so quotes arrive and leave rather than
   being chopped. It pauses when you hover or tab into it, because a quote you
   cannot finish reading is worse than no quote. */
.voices{padding:var(--band) var(--pad)}
.voices__head{max-width:44ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.voices h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0}
.voices__head p{opacity:.78}
.voices__rail{
  margin-inline:calc(-1 * var(--pad));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--ink) 13%,var(--ink) 87%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,var(--ink) 13%,var(--ink) 87%,transparent 100%);
}
.voices__track{list-style:none;margin:0;padding:0;display:flex;width:max-content}
.voices__track.is-running{animation:voices-run var(--voices-dur,90s) linear infinite}
.voices__rail:hover .voices__track.is-running,
.voices__rail:focus-within .voices__track.is-running{animation-play-state:paused}
@keyframes voices-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.voices__track > li{
  flex:0 0 clamp(17rem,24vw,23rem);
  padding-inline:clamp(1.6rem,3.2vw,2.8rem);
  border-left:1px solid var(--rule-d);
  display:flex;
}
.voices blockquote{margin:0;display:flex;flex-direction:column;width:100%}
.voices blockquote footer{margin-top:auto;padding-top:1.1rem}
.voices blockquote p{
  font:400 clamp(1.0625rem,.4vw + .95rem,1.1875rem)/1.62 var(--ff);
  margin:0;text-indent:-.42em;
}
.voices blockquote p::before{content:"\201C"}
.voices blockquote p::after{content:"\201D"}
.voices footer{
  font:500 1.0625rem/1.45 var(--ff);letter-spacing:.03em;color:var(--gold-lit);
}
.voices footer span{
  display:block;font-weight:400;letter-spacing:.09em;font-size:var(--fs-micro);
  text-transform:uppercase;opacity:.82;margin-top:.3rem;
}
/* no clone is made when motion is reduced, so the rail simply becomes a
   horizontally scrollable row of the six real quotes */
@media (prefers-reduced-motion:reduce){
  .voices__rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .voices__track{animation:none !important}
}

@media (max-width:900px){
  .transf__list li{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.2rem)}
  .transf__list li:nth-child(even) figure,
  .transf__list li:nth-child(even) blockquote{grid-column:1;grid-row:auto}
  .transf figure img{max-width:26rem;margin-inline:auto}
  .voices__track > li{flex-basis:clamp(15rem,72vw,19rem)}
  /* one item plus a sliver fits on a phone, so the fade has to work harder
     to stop the outgoing quote reading as a chopped one */
  .voices__rail{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--ink) 21%,var(--ink) 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,var(--ink) 21%,var(--ink) 88%,transparent 100%);
  }
}

/* ============================================================
   PRICING
   The one page where the numbers are the argument, so they get the largest
   type on their band and nothing competes with them.
   ============================================================ */

.hero--price img{object-position:50% 16%}  /* his face, and the headline lands on the plant and the wall beside it */
.hero--price .hero__text h1{max-width:min(19ch,62vw)}
.hero--price h1 span{max-width:50ch}

/* ---- why it is published at all, with the three figures beside it ---- */
.why{
  background:var(--cream);padding:var(--band) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);
  column-gap:clamp(2.5rem,7vw,7rem);row-gap:clamp(2.4rem,5vw,3.4rem);align-items:start;
}
.why__col{display:grid;align-content:start;gap:clamp(1.1rem,1.8vw,1.5rem)}
.why h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;max-width:18ch;margin:0}
.why__col p{max-width:48ch;opacity:.84}
.why__turn{
  font:600 clamp(1.3rem,2.1vw,1.8rem)/1.28 var(--ffd);opacity:1 !important;max-width:34ch;
  padding-top:clamp(1.4rem,2.4vw,1.9rem);border-top:1px solid var(--rule-l);margin-top:.4rem;
}
/* the answer, before any of the reasoning: three names and three numbers */
.why__quick{list-style:none;margin:0;padding:0;display:grid;gap:0}
.why__quick li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(.8rem,2vw,1.6rem);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;border-top:1px solid var(--rule-l);
}
.why__quick li:last-child{border-bottom:1px solid var(--rule-l)}
.why__quick b{
  font:400 var(--fs-label)/1 var(--ff);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.why__quick i{
  grid-column:3;font:600 clamp(1.9rem,2.9vw,2.6rem)/1 var(--ffd);
  font-style:normal;letter-spacing:-.02em;
}
.why__quick span{grid-column:1/-1;font-size:1.0625rem;opacity:.7;margin-top:.4rem}

/* ---- what is in each ---- */
.tiers{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad)}
.tiers__head{max-width:48ch;margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.tiers h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin-bottom:clamp(.9rem,1.6vw,1.2rem)}
.tiers__head p{opacity:.78}
.tiers__list{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.tiers__list > li{
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding:clamp(2.2rem,4vw,3.2rem) 0;border-top:1px solid var(--rule-d);
}
.tiers__list > li:last-child{border-bottom:1px solid var(--rule-d)}
.tiers h3{font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.14;margin-bottom:.7rem}
.tiers__fig{
  font:600 clamp(1.9rem,2.9vw,2.6rem)/1 var(--ffd);letter-spacing:-.02em;margin:0;
}
.tiers__fig i{
  font:400 var(--fs-micro)/1 var(--ff);font-style:normal;letter-spacing:.13em;
  text-transform:uppercase;opacity:.5;margin-left:.6rem;
}
.tiers__list ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;max-width:50ch}
.tiers__list ul li{
  padding-left:1.5rem;position:relative;opacity:.88;
}
.tiers__list ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:.5rem;height:1px;background:var(--gold-lit);
}

/* ---- what is in all of them, and what can be added ---- */
.extras{
  background:var(--cream);padding:var(--band) var(--pad);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:clamp(2.2rem,4vw,3rem);align-items:start;
}
.extras__col h3{
  font:400 var(--fs-label)/1.4 var(--ff);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
  padding-bottom:1rem;border-bottom:1px solid var(--rule-l);margin-bottom:1.4rem;
}
.extras__col ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.9rem,1.8vw,1.3rem)}
.extras__col li{max-width:42ch;opacity:.86;padding-left:1.5rem;position:relative}
.extras__col li::before{
  content:"";position:absolute;left:0;top:.72em;width:.5rem;height:1px;background:var(--gold);
}
.extras__note{
  margin-top:clamp(1.4rem,2.6vw,2rem);max-width:42ch;opacity:.7;
  font-size:1.0625rem;line-height:1.6;
}

/* the diagnostic as a secondary line under a close, where a page does not
   give it a band of its own */
.close__alt{
  margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:clamp(1.4rem,2.4vw,1.9rem);
  border-top:1px solid var(--rule-l);max-width:46ch;opacity:.84;
}
.close__alt a{color:var(--gold)}

@media (max-width:900px){
  .why,.extras{grid-template-columns:1fr}
  .tiers__list > li{grid-template-columns:1fr;gap:1.2rem}
}
/* the line that makes the homepage's title tag true. It targets "personal
   trainer City of London", which the SEO plan calls the sleeper term at £11.48
   a click, and the body said neither phrase once before this. */
.system__where-lead{max-width:52ch;opacity:.8;margin-bottom:clamp(1.6rem,3vw,2.4rem)}

/* The burger's box was 29px tall, under the 44px minimum, on every page. The
   bars stay the same size; the padding grows so the thing you actually tap is
   the right size. No `display` here: this rule sits after the media query that
   reveals it, and repeating the property would hide it on exactly the screens
   that need it. */
.burger{padding:.9rem .6rem;margin-right:-.6rem;min-height:44px;min-width:44px;
  align-items:center;justify-content:center;flex-direction:column}
/* the homepage's version of the prose audit carries its opening movement in
   the left column instead of a client quote, since the homepage has no quote
   at that point in the argument */
.audit--prose .audit__lead{
  font:400 clamp(1.3rem,1.4vw + 1rem,1.85rem)/1.42 var(--ffd);opacity:.92;margin-top:1.4rem;
}
.audit--prose .audit__col .audit__pull{
  margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:clamp(1.4rem,2.4vw,2rem);
  border-top:1px solid var(--rule-d);
}

/* The homepage's audit band had no ground of its own, so it inherited cream
   from the body and sat between two other cream bands: three in a row. It
   read as one long light stretch and neither my band check nor my eye caught
   it, because the check treated "transparent" as ink. The location pages set
   this ground via .on-photo; the homepage needs it stated. */
.audit{background:var(--ink);color:var(--cream)}
.audit--prose .audit__lead{color:var(--cream)}

/* The full-bleed separator. One picture, one line, no container: the band is
   the photograph. It sits between the proof and the diagnostic so the page
   takes a breath before it asks for anything. */
.bleed{position:relative;isolation:isolate;display:grid;background:var(--ink)}
.bleed img{grid-area:1/1;width:100%;height:clamp(26rem,72vh,44rem);object-fit:cover;object-position:50% 44%}
.bleed::after{
  content:"";grid-area:1/1;z-index:1;
  background:linear-gradient(180deg,rgba(16,15,13,.18) 0%,rgba(16,15,13,.10) 45%,rgba(16,15,13,.82) 100%);
}
.bleed__line{
  grid-area:1/1;z-index:2;align-self:end;margin:0;
  padding:0 var(--pad) clamp(2rem,4vw,3.2rem);
  color:var(--cream);font:600 clamp(1.5rem,3vw,2.6rem)/1.2 var(--ffd);
}
/* no max-width on this line. `--pad` is up to 250px a side on a wide screen and
   box-sizing is border-box, so a measure cap smaller than the padding leaves a
   content box of nothing and the sentence breaks a word at a time. The line is
   short enough not to need one. */

/* Inline links that end in an arrow do not break. "See the Method" split
   across two lines on the About page and left the arrow on its own. */
.around__note a,.taught__col a,.invest__note a,.pillars__note a,.close__alt a,
.getting__note a,.audit__text a{white-space:nowrap}

/* Two actions in the hero. The diagnostic is the one Jools actually wants
   people to complete, so it takes the filled button and the call sits beside
   it. They stack on a phone rather than shrinking, because a 48px button that
   has been squeezed to fit is worse than two of them. */
.hero__actions{display:flex;flex-wrap:wrap;gap:clamp(.7rem,1.4vw,1rem)}
@media (max-width:560px){
  .hero__actions{display:grid;gap:.7rem;justify-items:start}
  .hero__actions .btn{width:100%;max-width:22rem}
}

/* His own wordmark, from the brand guide that arrived 1 Oct. It replaces the
   lockup I had built: the switch device as SVG next to JN1 set in type. His
   artwork has the device built into the two O's of JOOLS, so one mark does
   what two elements were doing. The SVG device stays for the diagnostic
   bands, where it is tinted gold and a flat PNG could not be. */
.masthead__mark .brandmark{width:138px;height:auto;display:block}
.foot__mark .brandmark{width:178px;height:auto;display:block}
@media (max-width:560px){ .masthead__mark .brandmark{width:104px} }
/* his own second heading in that band, restored */
.around__sub{
  font:400 var(--fs-label)/1.4 var(--ff);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lit);margin-top:clamp(2rem,3.6vw,2.8rem);
}
.around__sub + .around__note{margin-top:1.1rem}

/* ---- 404 ----
   The masthead is already solid here, so the band starts below it rather than
   under it. One screen, no scroll, every route on the site in reach. */
.lost{
  background:var(--ink);color:var(--cream);
  min-height:100svh;display:grid;place-items:center;
  padding:calc(var(--band) + 4rem) var(--pad) var(--band);
}
.lost__inner{max-width:52ch;text-align:center;display:grid;justify-items:center;gap:1.2rem}
.lost__code{
  font:400 clamp(4rem,14vw,9rem)/1 var(--ffd);color:var(--gold-lit);opacity:.3;margin:0;
  letter-spacing:.02em;
}
.lost h1{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0}
.lost__inner > p{opacity:.8;max-width:44ch}
.lost__links{
  list-style:none;margin:clamp(.6rem,1.4vw,1.2rem) 0 .6rem;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;
}
.lost__links a{color:var(--gold-lit);text-decoration:none;border-bottom:1px solid transparent}
.lost__links a:hover,.lost__links a:focus-visible{border-bottom-color:var(--gold-lit)}

/* Newsreader's optical size axis runs 6 to 72. Pushing it up on display type
   gives the finer modelling the big settings want without thinning the
   smaller headings. */

/* Newsreader's optical size axis runs 6 to 72. Pushed up on display type it
   gives the big settings the finer modelling they want, and left alone the
   smaller headings keep their weight. */
h1,h2,h3,.recognise__turn,.audit__pull,.system__pull,.close__pull,.asked__q,.asked__a,
.lineage__creed,.taught__pull,.partnership__lead,.season__turn,.why__turn,.bleed__line,
.invest__fig,.tiers__fig,.why__quick i,.stages dt,.loc-quote p,.shift blockquote p,
.transf blockquote p,.pillars__num,.lost__code{
  font-variation-settings:"opsz" 60;
}

/* mobile bleed crop */
@media (max-width:760px){
  /* a narrow crop of a wide frame put his out-of-focus shoulder in the corner
     where the line sits, so the phone crop favours the skyline instead */
  .bleed img{object-position:66% 44%}
}