/* ==========================================================================
   Cookie Golf Studios
   Dark-first. Studio Black field, Bone ink, square corners, no shadows.
   Tokens follow CookieGolfStudios_Main_Logos/06_Colour/cookie-palette.css
   Type and spacing follow brand guidelines §7 and §8.
   ========================================================================== */

:root{
  /* core */
  --black:   #0B0B0B;
  --bone:    #EDE6D8;
  --charcoal:#1C1C1C;
  --ash:     #8A857C;
  --bone70:  #A9A49A;

  /* derived hairlines, §8.3: bone at 12–20% */
  --rule:      rgba(237,230,216,.12);
  --rule-str:  rgba(237,230,216,.20);
  --rule-soft: rgba(237,230,216,.07);

  /* type */
  --display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* spacing scale, §8.2: 4 8 16 24 40 64 104 160 */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px; --s8:160px;

  --pad: clamp(24px, 5vw, 64px);
  --sect: clamp(64px, 9vw, 104px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* The announcement bar's height, so anchor scrolling can allow for it.
     Zero unless a bar is actually in the markup: the investor page has a fixed
     header and no bar, and would otherwise scroll 39px too far. */
  --abar-h: 0px;
}
/* A dismissed bar is display:none but still in the DOM, so :has() alone would
   keep reserving its height. Both conditions live in one selector so the rules
   cannot be reordered into a bug. */
:root:has(.abar):not(.abar-off){--abar-h:39px}
@media (max-width:640px){
  :root:has(.abar):not(.abar-off){--abar-h:35px}
}

/* --- reset --- */
*,*::before,*::after{box-sizing:border-box}

/* An author display rule beats the UA stylesheet's [hidden] { display:none },
   so .check{display:flex} was keeping the marketing consent box on screen for
   corporate enquiries even though script.js sets consentRow.hidden = true. The
   privacy notice and the lead-forms runbook both state that the corporate form
   does not show the box at all, so this guard is load-bearing, not tidying. */
[hidden] { display: none !important; }
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* clear the fixed header, plus the bar when it is showing, so a nav link
     lands on the section heading rather than under the logo */
  scroll-padding-top:calc(88px + var(--abar-h));
}
body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* fine grain over flat black, §8.5 - 4%, never an obvious effect */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bone);color:var(--black);padding:12px 20px}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);width:100%}

/* --- type roles, §7.4 --- */
.eyebrow{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--bone70);
  margin-bottom:var(--s4);
}
.h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4.4vw,48px);line-height:1.1;
  text-transform:uppercase;letter-spacing:.10em;
}
.h2--lg{font-size:clamp(32px,6vw,68px)}
.lead{
  font-size:clamp(17px,1.35vw,20px);line-height:1.55;
  color:var(--bone70);max-width:56ch;
  text-wrap:pretty;
}
.note{font-size:14px;color:var(--bone70);letter-spacing:.01em}
.micro{
  font-family:var(--display);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ash);
}

/* --- buttons, §13.4 --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;border-radius:2px;
  font-family:var(--display);font-weight:500;font-size:15px;
  text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--primary{background:var(--bone);color:var(--black)}
.btn--primary:hover{background:#fff}
.btn--ghost{border:1px solid rgba(237,230,216,.4);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone);background:rgba(237,230,216,.06)}
.btn--sm{min-height:42px;padding:0 20px;font-size:13px}
.btn--lg{min-height:56px;padding:0 44px;font-size:16px}
.btn--full{display:flex;width:100%}

.link{
  display:inline-block;font-family:var(--display);font-weight:500;font-size:15px;
  text-transform:uppercase;letter-spacing:.12em;
  border-bottom:1px solid rgba(237,230,216,.35);padding-bottom:6px;
  transition:border-color .18s var(--ease)
}
.link:hover{border-color:var(--bone)}
.link span{display:inline-block;transition:transform .18s var(--ease)}
.link:hover span{transform:translateX(4px)}

/* ==========================================================================
   ANNOUNCEMENT BAR
   Sits inside the fixed header, so the header box owns its height and no
   section below needs a matching offset. Quiet by design: this is a standing
   notice on every page, not a promotion, so it takes charcoal and 12px caps
   rather than the bone accent, which stays reserved for Book a bay.
   ========================================================================== */
.abar{background:var(--charcoal);border-bottom:1px solid var(--rule)}
.abar__in{
  max-width:var(--maxw);margin-inline:auto;padding:7px var(--pad);
  display:flex;align-items:center;gap:var(--s4);
}
.abar__txt{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--bone70);margin:0;line-height:1.4;
}
.abar__txt a{
  color:var(--bone);border-bottom:1px solid var(--rule-str);
  transition:border-color .18s var(--ease);
}
.abar__txt a:hover{border-bottom-color:var(--bone)}
.abar__x{
  margin-left:auto;flex:0 0 auto;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ash);transition:color .18s var(--ease);
}
.abar__x:hover{color:var(--bone)}
.abar__x svg{width:13px;height:13px}
/* set by the inline head script, so a dismissed bar never flashes in */
.abar-off .abar{display:none}

/* One line on a phone or it stops reading as a note and starts reading as a
   paragraph. The word "opening" is dropped rather than the sentence shrunk to
   nothing: "Join the list" still says what the link does. */
@media (max-width:640px){
  .abar__in{padding:6px var(--pad);gap:var(--s3)}
  .abar__txt{font-size:10.5px;letter-spacing:.08em}
  .abar__wide{display:none}
  .abar__x{width:22px;height:22px}
  .abar__x svg{width:12px;height:12px}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:20;
  transition:background .25s var(--ease),border-color .25s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(11,11,11,.92);backdrop-filter:blur(10px);border-bottom-color:var(--rule)}

/* Document pages (terms, privacy) have no hero for the header to sit over, so
   it sticks rather than floats. That way its height is part of the layout and
   the page below cannot slide under it, however tall the announcement bar
   makes it. */
/* Two classes, not one: the phone breakpoint further down sets .hdr to fixed,
   and at equal weight that later rule won, so on phones the header slid back
   over the page and covered the top of it. */
.hdr.hdr--doc{position:sticky;background:var(--black)}

/* read progress, drawn on the header hairline. Scroll-driven CSS, no JS and
   no library: browsers without animation-timeline simply never show it. */
.hdr__prog{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--bone);transform-origin:0 50%;transform:scaleX(0);
  opacity:0;transition:opacity .25s var(--ease);
}
.hdr.is-stuck .hdr__prog{opacity:.55}
@supports (animation-timeline: scroll()){
  .hdr__prog{
    animation:prog linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hdr__in{
  max-width:var(--maxw);margin-inline:auto;padding:var(--s3) var(--pad);
  display:flex;align-items:center;gap:var(--s5);
}
.hdr__mark img{height:46px;width:auto;transition:height .25s var(--ease)}
.hdr.is-stuck .hdr__mark img{height:38px}

.nav{display:flex;gap:var(--s5);margin-left:auto}
.nav a{
  font-family:var(--display);font-weight:500;font-size:13px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--bone70);
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.nav a:hover{color:var(--bone);border-bottom-color:var(--bone)}

.hdr__act{display:flex;align-items:center;gap:var(--s3)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.burger span{display:block;width:24px;height:1px;background:var(--bone);transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 55%}
/* gradient scrim, §8.4: black 85% at base to 0 at 60% height */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(11,11,11,.97) 0%, rgba(11,11,11,.82) 26%, rgba(11,11,11,0) 64%),
    linear-gradient(to right, rgba(11,11,11,.78) 0%, rgba(11,11,11,.18) 58%, rgba(11,11,11,.40) 100%);
}
.hero__body{position:relative;padding-bottom:clamp(72px,10vh,120px)}
.hero__h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(40px,7.2vw,96px);line-height:1.04;
  text-transform:uppercase;letter-spacing:.10em;
  margin-bottom:var(--s4);
}
/* each line rises out of its own mask, §13.4 timing, fade and translate only */
.hero__h1 .mask{display:block;overflow:hidden}
.hero__h1 .mask > span{display:block;transform:translateY(105%);animation:rise .75s var(--ease) forwards}
.hero__h1 .mask:nth-child(1) > span{animation-delay:.10s}
.hero__h1 .mask:nth-child(2) > span{animation-delay:.20s}
.hero__h1 .mask:nth-child(3) > span{animation-delay:.30s}
@keyframes rise{to{transform:none}}

.hero__eyebrow{margin-bottom:var(--s3);color:var(--bone70)}
/* §7.3 measure is 60-75 characters, §7.4 puts a lead paragraph at 20px. This
   was 44ch at body size, which sat at 41% of the headline width and read as a
   narrow column pinned to the left edge. */
.hero__lead{
  font-size:clamp(18px,1.5vw,20px);line-height:1.55;
  max-width:64ch;color:var(--bone);opacity:.9;text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s5)}
.cta__note{font-size:14px;color:var(--bone70)}


/* opening state. §13.4: functional colour as a 4 px left bar on a Charcoal
   row, and never colour on its own, so the label always carries the meaning */
.status{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  background:var(--charcoal);border-left:4px solid var(--ash);
  padding:10px var(--s3);min-height:44px;align-content:center;
}
.status--wide{margin-bottom:var(--s6)}
.status[data-state="open"]{border-left-color:#7C9A6B}
.status[data-state="holding"]{border-left-color:#B89A5E}
.status[data-state="closed"]{border-left-color:#B0645A}
.status__t{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--bone);
}
.status__q{font-size:13px;color:var(--bone70)}
.status__q:empty{display:none}

/* ==========================================================================
   INTRO
   Asymmetric: bank line on the left, the plain explanation on the right.
   ========================================================================== */
.intro{padding-block:var(--sect)}
.intro__in{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:var(--s7);align-items:start;
}
/* §7.4 Lead paragraph: Inter, sentence case, 20 px ceiling. Inter is never used
   above that, because 24-28 px is the Jost sub-head slot. */
.intro__p{
  font-size:clamp(18px,1.5vw,20px);line-height:1.55;
  color:var(--bone);max-width:46ch;text-wrap:pretty;
}
.intro__sub{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:16px;color:var(--bone70);max-width:60ch;text-wrap:pretty;
}
.intro__sub + .intro__sub{border-top-color:var(--rule-soft)}

/* ==========================================================================
   2 · THE OFFER, THREE LINES
   ========================================================================== */
.offer{padding-block:var(--sect)}
.offer__row{
  display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s5);align-items:start;
  padding-block:var(--s5);border-top:1px solid var(--rule);
}
.offer__row:last-child{border-bottom:1px solid var(--rule)}
.offer__no{
  font-family:var(--display);font-weight:400;font-size:13px;
  letter-spacing:.18em;color:var(--ash);padding-top:.5em;
}
.offer__h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.6vw,44px);line-height:1.1;
  text-transform:uppercase;letter-spacing:.09em;
}
.offer__p{color:var(--bone70);max-width:60ch;padding-top:.35em;text-wrap:pretty}

/* ==========================================================================
   3 · PRICING  (editorial side-image, 45/55)
   ========================================================================== */
.price{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:stretch;gap:0;border-top:1px solid var(--rule);
}
.price__media{position:relative;min-height:420px}
.price__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 46%}
.price__body{
  padding:var(--sect) var(--pad);
  max-width:760px;
}
.price .h2{margin-bottom:var(--s4)}

.rate{margin-top:var(--s6);border-top:1px solid var(--rule)}
.rate__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);border-bottom:1px solid var(--rule);
}
.rate__t{
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.5vw,19px);
  text-transform:uppercase;letter-spacing:.10em;
}
.rate__q{display:block;font-family:var(--body);font-size:13px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ash);margin-top:6px}
.rate__v{
  font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,44px);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rate__u{font-size:13px;font-weight:400;letter-spacing:.08em;color:var(--ash);
  text-transform:uppercase;margin-left:8px}
.price .note{margin-top:var(--s4)}

/* ==========================================================================
   4 · MEMBERSHIP
   ========================================================================== */
.mem{padding-block:var(--sect);border-top:1px solid var(--rule)}
.mem__head{max-width:760px;margin-bottom:var(--s7)}
.mem__head .h2{margin-bottom:var(--s4)}
.mem__head .h2:last-child{margin-bottom:0}

.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.tier{
  position:relative;background:var(--charcoal);
  padding:var(--s5) var(--s4) var(--s5);
  display:flex;flex-direction:column;
}
.tier{transition:background .2s var(--ease)}
.tier:hover{background:#232323}
.tier--lead{background:#232323}
.tier--lead:hover{background:#2A2A2A}
.tier__flag{
  position:absolute;top:0;left:var(--s4);transform:translateY(-50%);
  background:var(--bone);color:var(--black);padding:5px 10px;
  font-family:var(--display);font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.16em;
}
.tier__n{
  font-family:var(--display);font-weight:500;font-size:15px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--bone70);
}
.tier__price{
  font-family:var(--display);font-weight:700;font-size:clamp(40px,4.4vw,56px);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1;
  margin:var(--s4) 0 var(--s5);
}
.tier__price span{
  display:block;font-size:12px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ash);margin-top:10px;
}
.tier__list{border-top:1px solid var(--rule);margin-bottom:var(--s4)}
.tier__list li{
  font-size:15px;color:var(--bone);padding-block:12px;
  border-bottom:1px solid var(--rule-soft);
}
.tier__for{font-size:14px;color:var(--bone70);margin-bottom:var(--s5);flex:1}

/* Label, price and button on one line, the detail on its own row beneath.
   The detail used to share the row and was squeezed into 259px, which ran it
   to six lines. Full width gives it two. */
.mem__found{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;gap:var(--s4) var(--s5);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule);
}
.mem__found .micro{grid-column:1;grid-row:1}
.mem__found-h{grid-column:2;grid-row:1}
.mem__found-cta{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}
.mem__found-p{grid-column:1 / -1;grid-row:2}
.mem__found-h{
  font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mem__found-u{
  display:block;font-family:var(--body);font-weight:400;font-size:12px;
  text-transform:uppercase;letter-spacing:.10em;color:var(--bone70);margin-top:6px;
}
.mem__found-p{font-size:15px;line-height:1.6;color:var(--bone70);max-width:72ch;text-wrap:pretty}

/* the annual option is the commercially important one, so it gets a panel */
.annual{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s5);align-items:center;
  margin-top:var(--s5);padding:var(--s5) var(--s4);background:var(--charcoal);
  border-left:4px solid var(--bone);
}
.annual__cta{white-space:nowrap}
.annual__h{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,26px);
  text-transform:uppercase;letter-spacing:.10em;white-space:nowrap;
}
.annual__p{color:var(--bone70);max-width:64ch;font-size:16px;text-wrap:balance}

/* ==========================================================================
   5 · THE ROOM
   ========================================================================== */
.room{padding-block:var(--sect);border-top:1px solid var(--rule)}
.room__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s7);align-items:end;margin-bottom:var(--s7);
}
.room__head .h2{margin-bottom:0}

/* Scroll-snap carousel. Native overflow scrolling does the work, so it swipes,
   drags and keyboard-scrolls with no library and no build step. §13.4 bans
   parallax and scroll-jacking, so nothing here hijacks the page scroll. */
.room__track{
  /* Flex, not grid: grid-auto-columns with a minmax(0,..) min lets the columns
     shrink to fit, so the track never overflowed and the arrows stayed dead.
     flex:0 0 <width> refuses to shrink, which is what makes it scroll.
     The frame width also has to be large enough to be worth scrolling. At 45%
     the whole track overflowed by 363px, less than one frame, so the arrows had
     almost nowhere to go. At 66% there are three real stops. */
  display:flex;gap:var(--s5);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* bleed to the right edge so a partial next frame signals "there is more" */
  margin-right:calc(var(--pad) * -1);padding-right:var(--pad);
  scrollbar-width:none;
}
.room__track::-webkit-scrollbar{display:none}
.room__track:focus-visible{outline:2px solid var(--bone);outline-offset:6px}
.room__fig{
  margin:0;scroll-snap-align:start;
  flex:0 0 min(66%, 720px);
}
/* Every frame aligns to the left edge. The last one cannot get there, so the
   browser clamps it to the end of the track, which is exactly the stop the
   script scrolls to. Do not give it scroll-snap-align:end: that rests it 64px
   short of the clamp and the arrow states then disagree with the position. */

/* arrows sit with the heading, not over the photographs */
.room__nav{display:flex;gap:var(--s2);justify-content:flex-end;align-items:flex-end}
.room__arrow{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-str);border-radius:2px;color:var(--bone);
  font-size:17px;line-height:1;
  transition:border-color .18s var(--ease),background .18s var(--ease),opacity .18s var(--ease);
}
.room__arrow:hover:not(:disabled){border-color:var(--bone);background:rgba(237,230,216,.06)}
.room__arrow:disabled{opacity:.3;cursor:default}
/* Lucide arrows, inline SVG rather than the ← and → characters, which render
   at different weights and baselines across platforms. Square caps, not
   Lucide's default round, to sit with 8.3. */
.room__arrow svg{width:17px;height:17px;display:block}

/* progress bar, 1px hairline per §8.3 rather than dots */
.room__bar{
  margin-top:var(--s5);height:1px;background:var(--rule);position:relative;overflow:hidden;
}
.room__bar span{
  display:block;height:100%;width:33%;background:var(--bone);
  transform-origin:left;transition:transform .2s var(--ease);
}
.room__fig img{width:100%;aspect-ratio:4 / 3;object-fit:cover;filter:saturate(.9)}
@media (max-width:1080px){
  .room__fig{flex:0 0 74%}
}
@media (max-width:640px){
  .room__fig img{aspect-ratio:16 / 10}
  .room__fig{flex:0 0 88%}
  .room__head{grid-template-columns:1fr;gap:var(--s4)}
  .room__nav{justify-content:flex-start}
}

/* no smooth scroll and no sliding bar when motion is reduced */
@media (prefers-reduced-motion:reduce){
  .room__track{scroll-behavior:auto}
  .room__bar span{transition:none}
}

/* ==========================================================================
   6 · CORPORATE  (full bleed, tonal overlay)
   ========================================================================== */
.corp{position:relative;isolation:isolate;overflow:hidden;min-height:74svh;display:flex;align-items:center}
.corp__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 55%;filter:grayscale(.2) contrast(1.06);
}
.corp__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to left, rgba(11,11,11,.95) 0%, rgba(11,11,11,.84) 42%, rgba(11,11,11,.30) 100%);
}
.corp__body{position:relative;padding-block:var(--sect);display:flex;justify-content:flex-end}
.corp__col{max-width:52ch}
.corp__body .h2{margin-bottom:var(--s4)}
.corp__body .lead{margin-bottom:var(--s5)}

/* ==========================================================================
   7 · PRACTICAL
   ========================================================================== */
.prac{padding-block:var(--sect);border-top:1px solid var(--rule)}
.prac__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s7)}
.prac__row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s4);
  padding-block:var(--s4);border-top:1px solid var(--rule);
}
.prac__row:last-child{border-bottom:1px solid var(--rule)}
.prac__row dt{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ash);padding-top:.35em;
}
.prac__row dd{margin:0;color:var(--bone);max-width:44ch}
.prac__side{border-left:1px solid var(--rule);padding-left:var(--s5)}
.prac__q{
  font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,26px);
  line-height:1.25;text-transform:uppercase;letter-spacing:.09em;margin-bottom:var(--s4);
}
.prac__a{color:var(--bone70);font-size:16px;text-wrap:pretty}

/* ==========================================================================
   8 · CLOSING CTA  (mini, mostly negative space)
   ========================================================================== */
.close{
  padding-block:clamp(96px,15vw,180px);
  border-top:1px solid var(--rule);text-align:center;
}
.close__in{max-width:640px;margin-inline:auto;padding-inline:var(--pad)}
.close__mark{width:auto;height:clamp(120px,16vw,170px);margin:0 auto var(--s6);opacity:.96}
.close__h{
  font-family:var(--display);font-weight:500;font-size:clamp(20px,2.6vw,30px);
  line-height:1.3;text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--s5);
  text-wrap:balance;
}
.close__note{margin-top:var(--s4);font-size:14px;color:var(--bone70)}

/* ==========================================================================
   FAQ
   Native <details>, so it opens with no JavaScript and stays accessible.
   ========================================================================== */
.faq{padding-block:var(--sect);border-top:1px solid var(--rule)}
.faq__head{margin-bottom:var(--s6);max-width:640px}
.faq__head .h2{margin-bottom:0}
/* the head is capped at 640, so the list gets a measure too. Full-bleed
   questions over a 66ch answer read as two different columns. */
.faq__list{border-top:1px solid var(--rule);max-width:920px}

.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:500;
  font-size:clamp(17px,1.7vw,21px);line-height:1.35;
  text-transform:uppercase;letter-spacing:.06em;color:var(--bone);
  transition:color .18s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:#fff}
.faq__q::after{
  content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.35em;
  background:
    linear-gradient(var(--bone70),var(--bone70)) center/14px 1px no-repeat,
    linear-gradient(var(--bone70),var(--bone70)) center/1px 14px no-repeat;
  transition:transform .2s var(--ease);
}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}

/* an answer belongs to its question, so it sits close under it and further
   from the next item. Was 24 above and 48 below, which grouped badly. */
.faq__item[open] .faq__q{padding-bottom:var(--s3)}
.faq__a{padding-bottom:var(--s5);max-width:66ch}
.faq__a p{color:var(--bone70);font-size:16px;line-height:1.6;text-wrap:pretty}

@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__a{animation:faqIn .2s var(--ease) both}
  @keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ==========================================================================
   LEGAL PAGES  (privacy.html, terms.html)
   Long-form prose. Measure held tight, hairlines instead of boxes.
   ========================================================================== */
.legal{padding-block:var(--sect);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.legal__head{padding-bottom:var(--s5);margin-bottom:var(--s6);border-bottom:1px solid var(--rule)}
.legal__head .h2{margin-bottom:var(--s4)}
.legal__meta{font-size:14px;color:var(--bone70)}

.legal__body{max-width:72ch}
.legal__body h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.2vw,26px);line-height:1.2;
  text-transform:uppercase;letter-spacing:.09em;
  margin:var(--s7) 0 var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);
}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body h3{
  font-family:var(--display);font-weight:500;font-size:17px;
  text-transform:uppercase;letter-spacing:.09em;margin:var(--s5) 0 var(--s3);
}
.legal__body p{margin-bottom:var(--s4);color:var(--bone);text-wrap:pretty}
.legal__body p.muted{color:var(--bone70)}
.legal__body strong{font-weight:600}
.legal__body a{border-bottom:1px solid var(--rule-str);transition:border-color .18s var(--ease)}
.legal__body a:hover{border-bottom-color:var(--bone)}

.legal__body ul{margin:0 0 var(--s4);padding:0}
.legal__body ul li{
  position:relative;padding:0 0 12px 22px;color:var(--bone);
}
.legal__body ul li::before{
  content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--bone70);
}

.legal__body dl{margin:0 0 var(--s4);border-top:1px solid var(--rule)}
.legal__body dl > div{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--rule-soft);
}
.legal__body dt{font-weight:600;color:var(--bone)}
.legal__body dd{margin:0;color:var(--bone70)}

.legal__note{
  background:var(--charcoal);border-left:4px solid var(--bone);
  padding:var(--s4);margin-bottom:var(--s5);
}
.legal__note p:last-child{margin-bottom:0}

.legal__toc{
  background:var(--charcoal);padding:var(--s4);margin-bottom:var(--s6);
}
.legal__toc p{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ash);margin-bottom:var(--s3);
}
.legal__toc ol{counter-reset:toc;columns:2;column-gap:var(--s5)}
.legal__toc li{counter-increment:toc;padding-bottom:8px;font-size:15px;break-inside:avoid}
.legal__toc li a{color:var(--bone70)}
.legal__toc li a:hover{color:var(--bone)}
.legal__toc li::before{content:counter(toc) ". ";color:var(--ash);font-size:13px}

@media (max-width:860px){
  .legal__body dl > div{grid-template-columns:1fr;gap:var(--s1)}
  .legal__toc ol{columns:1}
}

/* ==========================================================================
   FOOTER
   The section most sites neglect. Given the same grid discipline as the page.
   ========================================================================== */
.ftr{border-top:1px solid var(--rule);padding-block:var(--s7) var(--s5)}
.ftr__top{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:var(--s7);padding-bottom:var(--s6);
}
.ftr__line{
  font-family:var(--display);font-weight:500;font-size:clamp(17px, 2.1vw, 22px);
  text-transform:uppercase;letter-spacing:.11em;color:var(--bone);
  margin-bottom:var(--s5);max-width:15ch;line-height:1.45;
}

.ftr__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.ftr__col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ftr__h{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ash);
  margin-bottom:var(--s2);
}
.ftr__col a,.ftr__col p{font-size:15px;color:var(--bone70);line-height:1.5;margin:0}
.ftr__col a{
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.ftr__col a:hover{color:var(--bone);border-bottom-color:var(--rule-str)}

/* The closing gesture. Footer.design calls this the typographic footer, and it
   suits a brand whose logo is a wordmark: the name set large enough to be a
   graphic, with the hairline above doing the separating rather than a box. It
   is capped in vw so it scales with the column instead of swamping a phone. */
.ftr__sign{
  padding-block:var(--s6) var(--s5);
  border-top:1px solid var(--rule);
}
.ftr__sign img{
  display:block;width:auto;height:clamp(66px, 14.5vw, 196px);
  opacity:.92;
}

.ftr__base{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding-top:var(--s4);border-top:1px solid var(--rule);
}
.ftr__meta{font-size:12px;color:var(--ash);letter-spacing:.06em}
.ftr__legal{display:flex;gap:var(--s4);flex-wrap:wrap}
.ftr__legal a{
  font-size:12px;color:var(--ash);letter-spacing:.06em;
  transition:color .18s var(--ease);
}
.ftr__legal a:hover{color:var(--bone)}
/* agency credit, on its own line under the legal row */
.ftr__credit{flex-basis:100%;margin:0;font-size:12px;color:var(--ash);letter-spacing:.06em}
.ftr__credit a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .18s var(--ease)}
.ftr__credit a:hover{color:var(--bone)}

/* ==========================================================================
   PAGE TRANSITIONS
   Native View Transitions, so the cross-fade between index, terms, privacy and
   the investor page costs nothing: no library, no router, no JavaScript. A
   browser without support simply navigates as it always did. 13.4 allows a
   fade, so that is all this is, held to the 150-250ms band.
   ========================================================================== */
@view-transition{navigation:auto}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.22s;
  animation-timing-function:var(--ease);
}

/* ==========================================================================
   REVEAL  (§13.4: 150–250ms, ease-out, fade and small translate only)
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   INVESTOR PAGE  (investors.html)
   Unlisted, noindex. Business register in the words, full brand visually.
   Reuses the site tokens throughout: no new colours, no new spacing values.
   ========================================================================== */

/* header label standing in for the nav, since this page has no nav */
.inv__badge{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ash);
  margin-left:auto;
}

/* --- hero --- */
.ihero{min-height:94svh}
.ihero__img{object-position:56% 52%}
.ihero__h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(34px,5.6vw,72px);line-height:1.06;
  text-transform:uppercase;letter-spacing:.10em;
  max-width:16ch;margin-bottom:var(--s4);
}
.ihero__h1 .mask{display:block;overflow:hidden}
.ihero__h1 .mask > span{display:block;transform:translateY(105%);animation:rise .75s var(--ease) forwards}
.ihero__h1 .mask:nth-child(1) > span{animation-delay:.10s}
.ihero__h1 .mask:nth-child(2) > span{animation-delay:.20s}
.ihero__h1 .mask:nth-child(3) > span{animation-delay:.34s}
/* the second sentence drops to the sub-head slot, §7.4, so the first still leads */
.ihero__h1-sub{
  font-size:clamp(15px,1.75vw,24px);letter-spacing:.12em;color:var(--bone70);
  padding-top:var(--s3);
  /* balance the two lines rather than leaving a short widow on the second */
  text-wrap:balance;
}
.ihero__stand{
  font-size:clamp(17px,1.35vw,20px);line-height:1.55;
  color:var(--bone);max-width:52ch;text-wrap:pretty;opacity:.9;
}

/* --- proof strip. Four checkable facts straight under the fold. Jost tabular
       figures per §7.5, and no money on this page by decision. --- */
.proof{padding-block:var(--s6);border-top:1px solid var(--rule);background:var(--charcoal)}
.proof__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}
.proof__cell{border-left:1px solid var(--rule-str);padding-left:var(--s4)}
.proof__n{
  font-family:var(--display);font-weight:700;font-size:clamp(36px,4.4vw,56px);
  line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--bone);margin-bottom:var(--s3);
}
.proof__l{margin:0;font-size:14px;line-height:1.45;color:var(--bone70);text-wrap:pretty}

/* --- generic investor section --- */
.inv{padding-block:var(--sect);border-top:1px solid var(--rule)}
.inv--panel{background:var(--charcoal);border-top:0}
.inv__split{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--s6) var(--s7);align-items:start;
}
/* the split heads sit in the narrower column, so they take the bottom of the
   §7.4 section-head range rather than the top, and the authored <br> holds */
.inv__head .h2{font-size:clamp(26px,3.4vw,40px);text-wrap:pretty}
.inv__head--wide{max-width:720px;margin-bottom:var(--s7)}
.inv__body{display:grid;gap:var(--s4)}
.inv__p{font-size:17px;line-height:1.65;color:var(--bone70);max-width:64ch;text-wrap:pretty}
.inv__p--strong{color:var(--bone)}

/* --- why now, two items and deliberately not three --- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
.why__item{border-top:1px solid var(--rule-str);padding-top:var(--s4)}
.why__no{
  display:block;font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.18em;color:var(--ash);margin-bottom:var(--s4);
}
.why__h{
  font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,26px);
  line-height:1.2;text-transform:uppercase;letter-spacing:.10em;
  margin-bottom:var(--s3);text-wrap:balance;
}
.why__p{font-size:16px;line-height:1.6;color:var(--bone70);text-wrap:pretty}

/* --- the work already done. Numbered rows, the same pattern the homepage
       offer section uses, because it is the brand's proven list treatment --- */
.work{display:grid;gap:0;border-top:1px solid var(--rule)}
.work__row{
  display:grid;grid-template-columns:minmax(0,90px) minmax(0,1fr);
  gap:var(--s4);padding-block:var(--s5);border-bottom:1px solid var(--rule);
}
.work__no{
  font-family:var(--display);font-weight:500;font-size:13px;
  letter-spacing:.18em;color:var(--ash);padding-top:6px;
}
.work__h{
  font-family:var(--display);font-weight:500;font-size:clamp(18px,1.9vw,23px);
  line-height:1.25;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:var(--s3);max-width:30ch;text-wrap:balance;
}
.work__p{font-size:16px;line-height:1.6;color:var(--bone70);max-width:70ch;text-wrap:pretty}

/* --- team. At this stage the people are the investment, so they get cards
       rather than a paragraph --- */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.team__card{background:var(--black);padding:var(--s5) var(--s4);border-top:2px solid var(--bone)}
/* headshot. Square, desaturated per §9.3 so a portrait sits in the same
   register as the interior shots rather than jumping out of the page. */
.team__shot{
  display:block;width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:50% 30%;
  margin-bottom:var(--s4);filter:saturate(.75) contrast(1.02);
}
/* the empty state, until real photographs exist */
.team__shot--empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  background:var(--charcoal);border:1px solid var(--rule);filter:none;
}
.team__shot--empty img{width:34%;height:auto;opacity:.22}
.team__shot-l{
  font-family:var(--display);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ash);
}
.team__n{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,2.1vw,25px);
  line-height:1.15;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s2);
}
.team__r{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ash);margin-bottom:var(--s4);
}
.team__p{font-size:15px;line-height:1.55;color:var(--bone70);text-wrap:pretty}
/* the background, under a hairline so it reads as a separate block from the
   line above it, which is what they own here rather than where they came from */
.team__bio{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:14px;line-height:1.55;color:var(--bone70);text-wrap:pretty;
}
/* same quiet underline the legal pages and the form note use */
.team__bio a{
  border-bottom:1px solid var(--rule-str);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.team__bio a:hover{border-bottom-color:var(--bone);color:var(--bone)}
.team__bio--empty{
  font-family:var(--display);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ash);
}
.team__note{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:15px;line-height:1.6;color:var(--bone70);max-width:76ch;text-wrap:pretty;
}

/* --- ambition, a full-bleed statement panel: one of the two places §8.2
       permits centring --- */
.ambition{position:relative;padding-block:clamp(96px,14vw,180px);overflow:hidden;text-align:center}
.ambition__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;filter:saturate(.85);
}
.ambition__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(11,11,11,.88) 0%, rgba(11,11,11,.80) 50%, rgba(11,11,11,.94) 100%);
}
.ambition__body{position:relative;max-width:820px}
.ambition__body .h2{margin-bottom:var(--s5)}
.ambition__lead{margin-inline:auto;color:var(--bone70)}
.ambition__lead + .ambition__lead{margin-top:var(--s4)}
/* the closing line is the point of the panel, so it comes back up to full Bone */
.ambition__lead--last{
  margin-top:var(--s5);color:var(--bone);
  font-family:var(--display);font-weight:500;
  font-size:clamp(18px,2vw,24px);line-height:1.3;
  text-transform:uppercase;letter-spacing:.10em;text-wrap:balance;
}

/* --- what is already built --- */
.built{border-top:1px solid var(--rule);margin-bottom:var(--s4)}
.built__row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--rule);
}
.built dt{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ash);padding-top:3px;
}
.built dd{margin:0;font-size:16px;line-height:1.55;color:var(--bone);text-wrap:pretty}

/* --- the numbers are not on this page --- */
.numbers{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--s5) var(--s7);align-items:start;
}
.numbers__h{text-wrap:pretty}
.numbers__body{display:grid;gap:var(--s4)}

/* --- the form --- */
.enq{padding-block:var(--sect);border-top:1px solid var(--rule)}
.enq__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--s6) var(--s7);align-items:start;
}
.enq__head .h2{margin-bottom:var(--s4);text-wrap:balance}
.enq__form{background:var(--charcoal);padding:var(--s5) clamp(24px,3vw,40px);border-top:2px solid var(--bone)}
.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:var(--s2)}
.field__l{
  font-family:var(--display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--bone70);
}
.field__i{
  width:100%;min-height:48px;padding:0 16px;border-radius:2px;
  background:var(--black);border:1px solid var(--rule-str);color:var(--bone);
  font-family:var(--body);font-size:16px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.field__i:hover{border-color:rgba(237,230,216,.34)}
.field__i:focus{outline:none;border-color:var(--bone);background:#111}
/* --- homepage capture form, inside the closing panel --- */
.capture{
  max-width:420px;margin:var(--s5) auto 0;text-align:left;
  padding-top:var(--s5);border-top:1px solid var(--rule);
}
.capture__note{
  max-width:46ch;margin:0 auto;font-size:15px;line-height:1.55;
  color:var(--bone70);text-wrap:pretty;
}
.field__opt{
  font-family:var(--body);font-weight:400;font-size:11px;
  text-transform:none;letter-spacing:0;color:var(--ash);margin-left:6px;
}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;cursor:pointer}
.check input{
  width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--bone);
  border-radius:2px;cursor:pointer;
}
.check span{font-size:13px;line-height:1.5;color:var(--bone70);text-wrap:pretty}

/* honeypot. Off-screen rather than display:none, which some bots detect */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{
  font-size:14px;line-height:1.5;padding:12px 14px;border-left:3px solid var(--rule-str);
  background:var(--black);color:var(--bone70);text-wrap:pretty;
}
.form__status[data-kind="ok"]{border-left-color:#7C9A6B;color:var(--bone)}
.form__status[data-kind="error"]{border-left-color:#B4705A;color:var(--bone)}
.form__status[data-kind="busy"]{border-left-color:var(--ash)}
.form__status a{border-bottom:1px solid var(--rule-str)}
.form__note{font-size:13px;line-height:1.55;color:var(--ash);text-wrap:pretty}
.form__note a{border-bottom:1px solid var(--rule-str)}
.form__note a:hover{border-bottom-color:var(--bone)}

/* --- closing --- */
.close--inv{border-top:1px solid var(--rule)}
.ftr__base--inv{border-top:0;padding-top:0}
.inv__disclaimer{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:12px;line-height:1.6;color:var(--ash);max-width:75ch;
}

/* ==========================================================================
   WORD SPACING ON TRACKED CAPS
   letter-spacing is added to the space character as well as between letters,
   so heavy tracking inflates word gaps faster than letter gaps. At 92px the
   hero's word gap measured 0.40em against a natural Jost space of about 0.30em.
   Each rule below gives back exactly what its own tracking added, so the word
   space returns to the typeface's own, rather than to an arbitrary number.
   Body-size type is left alone: at 12px, 0.15em is under 2px and invisible.
   ========================================================================== */
.hero__h1,
.ihero__h1,
.h2,
.annual__h,
.why__h,
.ambition__lead--last  { word-spacing:-.10em }

.close__h,
.tier__n,
.ftr__line             { word-spacing:-.12em }

.abar__txt             { word-spacing:-.14em }

.offer__h,
.prac__q,
.legal__body h2,
.legal__body h3        { word-spacing:-.09em }

.work__h,
.team__n               { word-spacing:-.08em }

.status__t             { word-spacing:-.15em }
.faq__q                { word-spacing:-.06em }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .price{grid-template-columns:1fr}
  .price__media{min-height:52svh}
  .price__body{max-width:none}
  .tiers{grid-template-columns:1fr}
  .tier--lead{order:-1}
  .tier__flag{left:auto;right:var(--s4)}
  .corp__body{justify-content:flex-start}
  .corp__col{max-width:none}
  .prac__grid{grid-template-columns:1fr;gap:var(--s6)}
  .prac__side{border-left:0;border-top:0;padding-left:0;padding-top:0}
  .prac__row:last-child{border-bottom:0}
  .ftr__top{grid-template-columns:1fr;gap:var(--s6)}
  .intro__in{grid-template-columns:1fr;gap:var(--s5)}
  .room__head{grid-template-columns:1fr;gap:var(--s5)}
}

@media (max-width:860px){
  .hdr{position:fixed}
  .hdr.has-nav{background:var(--black);border-bottom-color:var(--rule)}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--black);
    border-bottom:1px solid var(--rule);
    padding:var(--s2) var(--pad) var(--s4);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:18px 0;border-bottom:1px solid var(--rule-soft);font-size:15px}
  .nav a:hover{border-bottom-color:var(--rule-soft)}
  .nav a:last-child{border-bottom:0}
  .burger{display:flex}
  .hdr__act{margin-left:auto}
  /* narrow crops land on the lit screen, so deepen the scrim rather than
     shadowing the type (§8.4) */
  .hero__img{object-position:30% 55%}
  .hero__scrim{
    background:linear-gradient(to top, rgba(11,11,11,.97) 0%, rgba(11,11,11,.90) 38%, rgba(11,11,11,.55) 72%, rgba(11,11,11,.30) 100%);
  }
  .offer__row{grid-template-columns:44px minmax(0,1fr);gap:var(--s3) var(--s4)}
  .offer__p{grid-column:2}
  .mem__found{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .mem__found .micro,.mem__found-h,.mem__found-cta,.mem__found-p{grid-column:1;grid-row:auto}
  .mem__found-cta{justify-self:start}
  .annual{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .annual__cta{justify-self:start}
  .prac__row{grid-template-columns:1fr;gap:var(--s2)}
  .ftr__cols{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
}

@media (max-width:520px){
  body{font-size:16px}
  .hdr__mark img{height:38px}
  .rate__row{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .hero__cta .btn{flex:1 1 100%}
  .ftr__cols{grid-template-columns:1fr}
}

/* investor page, stacked */
@media (max-width:1080px){
  .proof__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
  .team{grid-template-columns:1fr}
}
@media (max-width:900px){
  .work__row{grid-template-columns:1fr;gap:var(--s2)}
  .work__no{padding-top:0}
  /* narrow viewports put the headline over the lit screen, so the scrim stops
     working left-to-right and has to carry the contrast from the base up */
  .ihero .hero__scrim{
    background:linear-gradient(to top, rgba(11,11,11,.97) 0%, rgba(11,11,11,.91) 46%, rgba(11,11,11,.64) 100%);
  }
  .inv__split,.numbers,.enq__in{grid-template-columns:1fr;gap:var(--s5)}
  .why{grid-template-columns:1fr;gap:var(--s5)}
  .inv__head--wide{margin-bottom:var(--s5)}
  .ihero__h1{max-width:none}
}
@media (max-width:520px){
  .built__row{grid-template-columns:1fr;gap:var(--s2)}
  .enq__form{padding:var(--s4) var(--s4)}
  .inv__badge{display:none}
  .proof__grid{grid-template-columns:1fr;gap:var(--s4)}
}

/* ==========================================================================
   MOTION AND PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* the * rule above cannot reach these, they are not elements */
  @view-transition{navigation:none}
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important}
  .reveal{opacity:1;transform:none}
  .hero__h1 .mask > span,.ihero__h1 .mask > span{transform:none;animation:none}
  .hdr__prog{animation:none;display:none}
}

/* §13.1: print inverts, nobody wants a black-flooded A4 */
@media print{
  body{background:#fff;color:#0B0B0B}
  body::after,.hdr,.abar,.hero__img,.hero__scrim,.corp__img,.corp__scrim,.burger,.hdr__prog,
  .ftr__sign,.ambition__img,.ambition__scrim{display:none!important}
  .status{background:none;border-left-color:#0B0B0B}
  .hero{min-height:auto}
  .tier,.tier--lead{background:#fff;border:1px solid #ccc}
  .lead,.note,.micro,.tier__for,.prac__a{color:#333}
  a{color:#0B0B0B}
}