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

/* Locations, his requested nav dropdown.

   A disclosure button, not a hover flyout. Hover is unreachable by keyboard and
   meaningless on a phone, and below 760px this nav becomes a full-screen panel
   where a floating menu makes no sense at all. So: the button toggles on the
   desktop, and on a phone the list is simply shown open as two more nav lines.
   The button inherits the nav's own underline behaviour so it does not read as
   a different kind of thing from the links beside it. */
.navdrop{position:relative}
.navdrop__btn{
  background:none;border:0;padding:.35rem 1.1rem .35rem 0;cursor:pointer;
  color:inherit;font:inherit;font-size:.9375rem;letter-spacing:.04em;
  position:relative;
}
.navdrop__btn::after{
  content:"";position:absolute;right:.1rem;top:50%;width:.4rem;height:.4rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.navdrop__btn[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.navdrop__btn:focus{outline:none}
.navdrop__btn:focus-visible{outline:2px solid var(--gold-lit);outline-offset:4px}
.navdrop__list{
  list-style:none;margin:0;padding:0;
  position:absolute;top:calc(100% + .9rem);left:0;min-width:12rem;z-index:5;
  background:var(--ink);border:1px solid var(--rule-d);
  padding:.5rem 0;display:none;
}
.navdrop__btn[aria-expanded="true"] + .navdrop__list{display:block}
.navdrop__list a{display:block;padding:.55rem 1.1rem;white-space:nowrap}
.navdrop__list a::after{left:1.1rem;right:1.1rem;bottom:.35rem}

@media (max-width:760px){
  /* the panel: no flyout, the two locations just sit in the list */
  .navdrop{display:contents}
  .navdrop__btn{display:none}
  .navdrop__list{position:static;display:block;border:0;background:none;
    padding:0;min-width:0}
  .navdrop__list a{padding:0}
  .navdrop__list a::after{left:0;right:0;bottom:0}
}

.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}
/* Three bars, and the cross is built off nth-child rather than first/last-of-type.
   The button used to carry a third span holding the word "Menu" for screen
   readers, which made it the last span: the closing rule was rotating that
   instead of the bottom bar, so only one line ever turned and the X came out
   bent. The label is an aria-label on the button now and every child here is a
   bar. Centres sit 8.5px apart (1.5 bar + 7 gap), so the outer two travel
   exactly that to meet in the middle. */
.burger span[aria-hidden]{transform-origin:center}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) 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}

/* One figure, not three. His 29 Sep copy prices the whole thing "from £497 a
   month" with the session count as the variable, so the band leads on the
   number at display size and the rows underneath say what it buys. The three
   tier rows it replaces are held until he confirms they are current, because
   £560 for eight sessions and £497 for four to twelve cannot both be true. */
.invest__lead{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:0;
  font:600 clamp(2.9rem,6.6vw,5.4rem)/1 var(--ffd);letter-spacing:-.03em}
.invest__lead em{font:400 var(--fs-label)/1.5 var(--ff);letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold-lit);font-style:normal;align-self:center}
.invest__lead i{font:400 var(--fs-micro)/1 var(--ff);letter-spacing:.13em;
  text-transform:uppercase;opacity:.5;font-style:normal}
.invest__inc{list-style:none;margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding:clamp(2.2rem,4vw,3.2rem) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,3.6vw,3rem) clamp(2.2rem,5vw,4.5rem);
  border-top:1px solid var(--rule-d)}
.invest__inc li{display:grid;gap:.55rem;align-content:start}
.invest__inc b{font:500 clamp(1.15rem,1.6vw,1.45rem)/1.25 var(--ffd);letter-spacing:-.012em}
.invest__inc span{font-size:1.0625rem;line-height:1.6;opacity:.8}
@media (max-width:820px){.invest__inc{grid-template-columns:1fr}}
.invest--cream .invest__inc{border-top-color:var(--rule-l)}
.invest--cream .invest__lead em{color:var(--gold)}
.invest__sub{
  max-width:46ch;margin:clamp(.8rem,1.4vw,1.1rem) 0 0;
  font-size:1.0625rem;line-height:1.6;opacity:.82;
}

.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}
/* Contact details in the footer, his instruction. Set as links so a phone
   taps to dial and the address opens a mail client, and sized with the rest of
   the bottom row rather than shouting. */
.foot__reach{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;margin-top:.55rem}
.foot__reach a{color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease,opacity .3s ease}
.foot__reach a:hover,.foot__reach a:focus-visible{opacity:1;border-bottom-color:var(--gold-lit)}
.foot__legal{text-align:right}
/* Our credit. Deliberately the quietest line in the footer: the brief asks for
   understatement throughout, and a studio byline that announces itself is the
   one thing a client's eye lands on for the wrong reason. It inherits the
   footer's .58 opacity and only takes the gold on hover, like the nav above. */
.foot__priv{display:block;margin-top:.5rem;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.foot__priv:hover,.foot__priv:focus-visible{border-bottom-color:var(--gold-lit)}
.foot__by{display:block;margin-top:.5rem;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,opacity .3s ease}
.foot__by:hover,.foot__by:focus-visible{opacity:1;border-bottom-color:var(--gold-lit)}

/* The T100 finish photo, top of the right-hand panel in his brief: picture,
   then label, text, table, footnote. 4:5 to match the other portraits. */
.season__shot{margin:0 0 clamp(1.6rem,3vw,2.2rem)}
.season__shot img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

/* The Leeds headshot his October brief adds to the right of that section.
   The band was a head-and-list two-up with nothing in the right column below
   the list; the portrait fills it at the same 4:5 the rest of his crops use. */
/* His brief puts the headshot in this section's right column, which did not
   exist: the band was display:block, so grid-column did nothing and the
   portrait rendered at the full 1500px measure. The band becomes a two-up,
   with the copy and the credentials stacked on the left and the portrait
   holding the right for both rows. */
.lineage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  column-gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
.lineage__head{grid-column:1}
.lineage__list{grid-column:1}
.lineage__shot{grid-column:2;grid-row:1/span 2;margin:0}
.lineage__shot img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media (max-width:900px){
  .lineage{grid-template-columns:1fr}
  .lineage__head,.lineage__list{grid-column:auto}
  .lineage__shot{grid-column:auto;grid-row:auto;margin-top:clamp(2rem,4vw,3rem);max-width:26rem}
}

/* ---- the legal page -------------------------------------------------------
   A reading page, not a selling one. One column at a comfortable measure,
   the same type ramp as everywhere else, and no photography: a privacy policy
   that tries to be art is a privacy policy nobody finishes. */
.legal{background:var(--cream);color:var(--ink);padding:var(--band) var(--pad)}
.legal__head{max-width:34ch;margin-bottom:clamp(2.6rem,5vw,4rem)}
.legal h1{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0 0 1.1rem}
.legal__lead{font-size:1.0625rem;line-height:1.6;opacity:.74}
.legal__body{max-width:68ch}
.legal__body h2{
  font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.2;
  margin:clamp(2.6rem,4.5vw,3.4rem) 0 .9rem;
  padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--rule-l);
}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body p{font-size:1.0625rem;line-height:1.68;margin:0 0 1.1rem;opacity:.86}
.legal__body ul{margin:0 0 1.1rem;padding-left:1.1rem}
.legal__body li{font-size:1.0625rem;line-height:1.68;margin-bottom:.5rem;opacity:.86}
.legal__body b{font-weight:600;opacity:1}
/* No monospace. The site has two typefaces and a privacy policy is not a
   reason to introduce a third; the stored value is set apart by its ground
   instead. */
.legal__body code{font-family:inherit;font-size:.9375rem;
  background:rgba(16,15,13,.07);padding:.1em .4em}
.legal__body a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid currentColor;transition:opacity .3s ease}
.legal__body a:hover,.legal__body a:focus-visible{opacity:.7}

/* ---- results page, his October edits ------------------------------------

   The timeframe used to be burnt into the photograph, next to a SWITCHON logo.
   Both are cropped off now, so the number lives here instead: it is selectable,
   it is in the alt text, and it can be corrected without reopening an image.
   Gold uppercase, the same label register as every other small caption. */
.transf__stat{
  margin-top:clamp(.9rem,1.6vw,1.2rem);
  font:400 var(--fs-label)/1.5 var(--ff);letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);
}

/* Jeremy's quote, pulled out of the carousel and given a band of its own. No
   photograph behind it: the line is the content and anything under it would be
   competing. */
.pull{margin:clamp(2.6rem,5vw,4rem) auto 0;text-align:center}
/* The measure sits on the paragraph, not the blockquote. `ch` resolves against
   the element's own font-size, and the blockquote inherits body size: 24ch on
   the wrapper came out at 200px and set the whole quote as a one-word ribbon.
   On the paragraph it resolves against the display size, which is the measure
   actually wanted. */
.pull p{
  font:500 clamp(1.7rem,3.4vw,2.6rem)/1.16 var(--ffd);letter-spacing:-.02em;
  text-wrap:balance;margin:0 auto clamp(1.4rem,2.6vw,2rem);max-width:20ch;
}
.pull p::before{content:"\201C"}
.pull p::after{content:"\201D"}
.pull footer{font:400 var(--fs-micro)/1.6 var(--ff);letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-lit)}
.pull footer span{display:block;color:var(--cream);opacity:.6;letter-spacing:.1em}
.pull__cta{margin:clamp(2rem,3.6vw,2.8rem) 0 0}

/* The quiet calls to action between the case studies. A gold text link, not a
   button: his note is explicit, and at this point in the page a filled button
   would interrupt a run of proof that is doing the persuading on its own. */
.transf__aside{list-style:none}
.transf__aside p{margin:0}
.pull__cta a,.transf__aside a{
  font:400 var(--fs-label)/1.5 var(--ff);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-lit);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.transf__aside a{color:var(--gold)}
.pull__cta a:hover,.pull__cta a:focus-visible,
.transf__aside a:hover,.transf__aside a:focus-visible{border-bottom-color:currentColor}

.diag__actions{display:flex;flex-wrap:wrap;gap:.9rem 1rem;justify-content:center}

/* ---- 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}
  .foot__legal{text-align:left}
}
@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%}
/* the online hero is a portrait source: on a wide viewport cover shows a
   horizontal band, and his face sits in the top fifth of the frame. */
.hero--online img{object-position:50% 16%}
.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}
/* two client voices, carried on cream so they break the ink bands either side.
   The headline is the pull; the full account sits under it at reading size. */
.said{background:var(--cream);color:var(--ink);padding:var(--band) var(--pad)}
.said__head{max-width:46ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.said h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.08;margin:0}
.said__list{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.4rem,5vw,4.5rem);
  border-top:1px solid var(--rule-l);padding-top:clamp(2.2rem,4vw,3.2rem);
}
.said__quote{margin:0}
.said__lead{
  font:400 clamp(1.3rem,1.9vw,1.75rem)/1.32 var(--ffd);
  text-indent:-.42em;margin:0 0 clamp(1rem,1.8vw,1.4rem);text-wrap:pretty;
}
.said__lead::before{content:"\201C"} .said__lead::after{content:"\201D"}
.said__body p{font-size:1.0625rem;line-height:1.62;opacity:.82;margin:0 0 .9rem}
.said__body p:last-child{margin-bottom:0}
.said__quote footer{
  margin-top:clamp(1rem,1.8vw,1.3rem);font:500 1.0625rem/1.45 var(--ff);
  letter-spacing:.03em;color:var(--gold);
}
.said__quote footer span{
  display:block;font-weight:400;letter-spacing:.09em;font-size:var(--fs-micro);
  text-transform:uppercase;opacity:.62;margin-top:.3rem;color:var(--ink);
}
@media (max-width:760px){ .said__list{grid-template-columns:1fr} }

.facility__shot{
  margin:0 calc(-1 * var(--pad)) clamp(2.5rem,4.5vw,3.5rem);
}
.facility__shot img{
  width:100%;height:clamp(18rem,38vw,30rem);
  object-fit:cover;object-position:50% 42%;display:block;
}
.facility__shot figcaption{
  margin:1rem var(--pad) 0;font:400 var(--fs-label)/1.6 var(--ff);
  letter-spacing:.14em;text-transform:uppercase;opacity:.6;
}
/* both faces sit across the middle of the frame, so the crop tightens
   rather than recentres as the viewport narrows */
@media (max-width:700px){
  .facility__shot img{height:clamp(15rem,58vw,20rem);object-position:46% 38%}
}

.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}

/* Two bands his 29 Sep rewrite added to the location page.

   numbers: his figures, set at display size with nothing else in the band.
   They are the most concrete thing on the page and they are his sentence
   verbatim, so the band does not chop them into cards and invent a label for
   each one.

   how: the only place on the site that answers what happens if you get in
   touch. Counters come from CSS so the step number is never in the markup
   twice. */
.numbers{background:var(--ink);color:var(--cream);padding:var(--band) var(--pad)}
.numbers h2{font:400 var(--fs-label)/1.5 var(--ff);letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold-lit);margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.numbers__line{margin:0;max-width:22ch;
  font:500 clamp(2.1rem,4.6vw,4rem)/1.08 var(--ffd);letter-spacing:-.022em;text-wrap:balance}

.how{background:var(--cream);color:var(--ink);padding:var(--band) var(--pad)}
.how h2{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.06;margin:0 0 clamp(2.4rem,4vw,3.4rem)}
.how__steps{list-style:none;margin:0;padding:0;counter-reset:step;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.2rem,4vw,3.2rem) clamp(2.4rem,5vw,4.5rem)}
.how__steps li{counter-increment:step;display:grid;gap:.55rem;align-content:start;
  border-top:1px solid var(--rule-l);padding-top:clamp(1.3rem,2.4vw,1.8rem)}
.how__steps li::before{content:counter(step,decimal-leading-zero);
  font:400 var(--fs-micro)/1 var(--ff);letter-spacing:.17em;color:var(--gold);
  margin-bottom:.35rem}
.how__steps b{font:500 clamp(1.3rem,1.9vw,1.75rem)/1.2 var(--ffd);letter-spacing:-.014em}
.how__steps span{font-size:1.0625rem;line-height:1.6;opacity:.82}
@media (max-width:820px){.how__steps{grid-template-columns:1fr}}

/* 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%);
}
/* The walk-time table sits across the middle of this band, which is where the
   gradient is lightest and where the photograph has faces in it. Scoped to
   .getting so the other photo bands keep the cover they were measured at. */
.getting::before{
  background:linear-gradient(180deg,
    rgba(16,15,13,.92) 0%, rgba(16,15,13,.84) 26%,
    rgba(16,15,13,.88) 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)}
/* The blue box Jools saw is the browser's default focus ring, which fires on a
   mouse click as well as a keyboard tab. Suppressing it outright would strip
   the only cue a keyboard user gets, so it is replaced rather than removed:
   nothing on click, a gold ring on :focus-visible. */
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.faq--ink summary:focus-visible{outline-color:var(--gold-lit)}
/* A way out of a deliberately short FAQ list. The location pages answer the
   local questions and hand the rest to the page that owns them. */
.faq__more{margin:clamp(1.8rem,3vw,2.4rem) 0 0}
.faq__more a{font:400 var(--fs-label)/1.5 var(--ff);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-lit);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.faq__more a:hover,.faq__more a:focus-visible{border-bottom-color:currentColor}
.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);
  /* was -.2rem, which tucked the answer under its own question. His note asked
     for 16 to 24px of air once a question is open. */
  margin-top:clamp(1rem,1.6vw,1.5rem);
}

@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)}

/* The masthead floats transparent over the hero and borrows its contrast from
   whatever photograph happens to be behind it. Measured against a hero whose
   top right corner was 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}

/* 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}
/* 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{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;
}
/* His note asks for a way out of the page here, between the pillars and the
   roadmap. It is the point where a reader who is sold has read enough, and
   until now the next action was six hundred pixels further down. Outlined
   rather than filled: the filled gold belongs to the diagnostic, which is the
   primary action everywhere else. */
.pillars__cta{margin-top:clamp(1.8rem,3vw,2.4rem)}
.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.
   ============================================================ */

/* The laptop frame is a bright room: pale panelling, white glassware, bare
   forearms. On a phone the crop put the sub-line over skin and it measured
   3.96:1 against a 4.5 floor. Pulling the crop right puts the darker half of
   the picture, his navy top, behind the text, and the band of extra shade at
   the foot covers the rest. Both measured, not guessed. */
.hero--price img{object-position:50% 30%}
@media (max-width:760px){ .hero--price img{object-position:76% 34%} }
.hero--price::after{
  background:linear-gradient(180deg,
    rgba(16,15,13,.56) 0%, rgba(16,15,13,.34) 30%,
    rgba(16,15,13,.74) 64%, rgba(16,15,13,.95) 100%);
}
.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}
/* Ivan's line sits under the figures panel, his instruction. It is the only
   testimonial on the site that is about money rather than training, which is
   why it earns a place on this page and nowhere else. Set small and ruled off
   rather than promoted, so it reads as corroboration of the number above it
   instead of competing with it. */
/* It belongs under the figures, not under the argument: his note says "add
   under the panel", and read there it corroborates the number rather than
   adding a fourth paragraph to a column that already has three. */
.why__quote{grid-column:2;margin:clamp(1.6rem,3vw,2.2rem) 0 0;
  padding-top:clamp(1.4rem,2.6vw,1.9rem);border-top:1px solid var(--rule-l)}
@media (max-width:900px){ .why__quote{grid-column:auto} }
.why__quote p{font:400 clamp(1.05rem,1.3vw,1.2rem)/1.5 var(--ffd);margin:0 0 .8rem}
.why__quote p::before{content:"\201C"}
.why__quote p::after{content:"\201D"}
.why__quote footer{font:400 var(--fs-micro)/1.5 var(--ff);letter-spacing:.13em;
  text-transform:uppercase;opacity:.62}
.why__quote footer span{display:block;opacity:.8;letter-spacing:.1em}

/* ---- 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. */
/* His brief splits what used to be one sub-line into two: a promise, and then
   where the work actually happens. The second is the one carrying the place
   names, so it is set smaller and quieter, closer to a standfirst than to the
   headline it sits under. */
/* His note: keep the text off the bright ceiling panels. On a phone the hero
   runs the full height of the portrait, so the panels cannot be cropped out of
   the frame, only out of the text's way. Measured in ten bands down the image:
   the top half means 47 to 94 and the bottom fifth means 12, so the crop holds
   the text in the dark end and a deeper scrim covers the highlights that still
   reach into it. Desktop keeps the standard scrim; only the phone needed it. */
.hero--home img{object-position:50% 38%}
.hero--home::after{
  background:linear-gradient(180deg,
    rgba(16,15,13,.60) 0%, rgba(16,15,13,.42) 32%,
    rgba(16,15,13,.80) 66%, rgba(16,15,13,.96) 100%);
}
@media (max-width:760px){
  .hero--home img{object-position:58% 26%}
  .hero--home::after{
    background:linear-gradient(180deg,
      rgba(16,15,13,.54) 0%, rgba(16,15,13,.38) 24%,
      rgba(16,15,13,.86) 50%, rgba(16,15,13,.95) 70%, rgba(16,15,13,.98) 100%);
  }
}
/* Small additions from his October notes: the reassurance under the diagnostic
   button, the second route out of the enquiry form, and the link into the
   Method from the testing paragraph. All quiet on purpose, each sitting with
   the thing it qualifies rather than becoming a feature of its own. */
.diag__note{margin:clamp(1.1rem,2vw,1.5rem) 0 0;font-size:1.0625rem;opacity:.66}
.close__alt2{margin-top:.55rem}
.close__alt2 a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.close__alt2 a:hover,.close__alt2 a:focus-visible{border-bottom-color:currentColor}
/* gold-lit, not gold: this band is ink. --gold is the 5.20:1 value measured
   against cream and it runs 3.22:1 against ink, which is what the checker
   caught. The two tokens are not interchangeable; each is measured for one
   ground. */
.audit__more{white-space:nowrap;color:var(--gold-lit);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.audit__more:hover,.audit__more:focus-visible{border-bottom-color:currentColor}
.hero__where{
  margin:clamp(1rem,1.8vw,1.4rem) 0 0;max-width:46ch;
  font:400 var(--fs-label)/1.6 var(--ff);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-lit);
}
/* .hero__actions sits flush under whatever precedes it, which was fine when
   that was the h1's sub-line and its own leading supplied the gap. The
   location line is set tight and uppercase, so it needs the space declared. */
.hero__where + .hero__actions{margin-top:clamp(1.6rem,3vw,2.4rem)}
.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%}
}

/* The two short-version quotes Jools sent for the homepage. They sit at the
   foot of the "what changes" band rather than in a band of their own: the
   page alternates ink and cream the whole way down, and a cream band of
   quotes would have landed directly under the cream band above it. Inside,
   under a hairline, they read as a coda to the four changes, which is what
   they are. */
.shift__women{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,3.6vw,2.8rem);
  border-top:1px solid var(--rule-l);
}
.shift__women h3{
  font:400 var(--fs-micro)/1 var(--ff);letter-spacing:.2em;text-transform:uppercase;
  opacity:.55;margin:0 0 clamp(1.6rem,3vw,2.2rem);
}
.shift__women ul{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4.5vw,4rem);
}
.shift__women blockquote{margin:0}
.shift__women blockquote p{
  font:400 clamp(1.15rem,1.5vw,1.4rem)/1.38 var(--ffd);margin:0;
  text-indent:-.42em;text-wrap:pretty;
}
.shift__women blockquote p::before{content:"\201C"}
.shift__women blockquote p::after{content:"\201D"}
.shift__women footer{
  margin-top:.9rem;font:500 1rem/1.45 var(--ff);letter-spacing:.03em;color:var(--gold);
}
.shift__women footer span{
  display:block;font-weight:400;letter-spacing:.09em;font-size:var(--fs-micro);
  text-transform:uppercase;opacity:.62;margin-top:.3rem;color:var(--ink);
}
@media (max-width:760px){
  .shift__women ul{grid-template-columns:1fr;gap:2.2rem}
}

/* ---- the mobile nav panel, three corrections ----

   1. The diagnostic button was rendering at 1.85rem in the display serif, in
      caps, wrapping onto two lines. `.masthead__cta` sets the right font but
      it is one class, and `.masthead__nav a` is a class plus a type, so the
      nav's own link size was winning and the button never got its own
      treatment at all. Specificity, not taste.

   2. `.navdrop{display:contents}` dropped the <ul> into the nav's flex flow
      as a single child. The nav's gap therefore fell either side of the
      locations group and nothing at all fell between the three links inside
      it, so Liverpool Street, Soho and Online stacked tight at line-height
      1.2 while every other line had 1.5rem of air. It read as a fault.

   3. With the gap fixed they would have become three more equal-weight lines
      in a flat list of seven. They are a group on the desktop nav and they
      stay one here: their own label, a hairline down the left, a step down in
      size. Subordinate on purpose rather than cramped by accident. */
.navdrop__head{display:none}
@media (max-width:760px){
  .navdrop{display:block}
  .navdrop__head{
    display:block;margin:0 0 .85rem;
    font:400 .6875rem/1 var(--ff);letter-spacing:.2em;text-transform:uppercase;
    opacity:.45;
  }
  .navdrop__list{padding-left:1.05rem;border-left:1px solid var(--rule-d)}
  .masthead__nav .navdrop__list a{
    display:block;padding:.56rem 0;font:500 1.35rem/1.24 var(--ffd);letter-spacing:-.005em;
  }
  .navdrop__list a::after{bottom:.34rem}
  .masthead__nav .masthead__cta{
    font:500 .9375rem/1 var(--ff);letter-spacing:.06em;
    align-self:stretch;margin-top:1.3rem;
  }
}