:root{
  --canvas:#F7F7F5;
  --canvas-deep:#EFEEEA;
  --canvas-ink:#191D16;
  --panel:#FFFFFF;
  --ink:#141711;
  --ink-soft:#54584D;
  --ink-faint:#8B8E84;
  --hair:#DCDBD5;
  --hair-strong:#C3C2BA;
  --gold:#B4913F;
  --gold-soft:rgba(180,145,63,.30);
  --accent:#1B6B4A;
  --accent-hi:#2E8C63;
  --accent-deep:#12523A;
  --accent-muted:rgba(27,107,74,.10);

  --display:'Playfair Display','Iowan Old Style',Georgia,serif;
  --body:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --nav-h:90px;
  --pad:clamp(1.25rem,4vw,2rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(247,247,245,.9),0 2px 10px rgba(247,247,245,.7);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-weight:300;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
::selection{background:var(--accent-muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--canvas);padding:.7rem 1.1rem;font-size:.85rem}
.skip:focus{left:0}

.wrap{width:min(1240px,100% - (var(--pad) * 2));margin-inline:auto}

/* ---------- type ---------- */
/* Playfair at 900 carries far more weight than the old 400, so sizes come down
   a touch and the tracking tightens. Heavy serifs need less air between letters
   or they read as loose. */
h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(2.3rem,4.5vw,3.9rem);line-height:1.05;text-wrap:balance}
.h1-hit{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.016em;font-size:min(1.38em,14vw);line-height:.9}
.h1-soft{display:block;font-style:italic;color:var(--accent);line-height:1.04;
  letter-spacing:-.018em;margin-top:.08em}
h2{font-size:clamp(1.85rem,3.2vw,2.8rem);line-height:1.1;text-wrap:balance}
h3{font-size:clamp(1.1rem,1.5vw,1.34rem);line-height:1.24;font-weight:700;letter-spacing:-.012em}
h1 em,h2 em{font-style:italic;font-weight:900}
p{margin:0}

.lede{font-size:clamp(1rem,1.25vw,1.1rem);color:var(--ink-soft);max-width:56ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--body);font-size:.82rem;font-weight:400;letter-spacing:.02em;
  /* Pills, so the nav button nests cleanly inside the capsule instead of
     fighting its curve. Applied to every button so shapes stay consistent. */
  padding:.8em 1.8em;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),transform .45s var(--ease);
}
.btn--solid{background:var(--accent);color:#F7F7F5}
.btn--solid:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 8px 22px rgba(18,82,58,.2)}
/* The arrow nudges rather than the whole button, so the label stays put. */
.btn--arrow{gap:.62em}
.btn__arrow{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.btn--arrow:hover .btn__arrow{transform:translateX(3px)}
.btn--ghost{border-color:var(--hair-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--canvas)}
/* Over the marble a bare hairline vanishes, so the secondary button gets the
   same frosted backing the nav capsule uses. */
.hero__cta .btn--ghost{background:rgba(255,255,255,.6);backdrop-filter:blur(10px)}
.hero__cta .btn--ghost:hover{background:var(--ink)}
@media (pointer:coarse){.btn{min-height:44px}}
/* The button that closes every homepage section: a pill one and a half times the
   hero's (66px to 44px), set in the headline's Bebas caps. The caps run a little
   larger than a straight 1.5x because a condensed face reads small; line-height 1
   with even padding measures dead centre for both the caps and the arrow. Bebas
   has one weight that already reads bold, so no synthetic bold, and the arrow's
   stroke is thickened to match. */
.btn--xl{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.36rem;line-height:1;letter-spacing:.05em;
  text-transform:uppercase;padding:.9em 1.75em}
.btn--xl .btn__arrow{width:1.14em;height:1.14em}
.btn--xl .btn__arrow path{stroke-width:2.1}
/* A long label (the case studies button) shrinks with a small phone instead of
   running off it. With the tighter padding the pill is about 15.6 times its font
   size wide, so the type is capped to fit inside the page margins, one line. */
@media (max-width:480px){
  .btn--xl.btn--long{padding-inline:1.2em;font-size:min(1.36rem,calc((100vw - 2 * var(--pad) - 8px) / 15.6))}
}
.sec-cta{display:flex;justify-content:center;margin-top:clamp(2.8rem,6vw,4.5rem)}
.stages > .sec-cta{margin:0;padding:clamp(1rem,3vw,2rem) var(--pad) clamp(4.5rem,9vw,7rem)}
/* While the stages are pinned, the last frame ends in empty space under the
   centred stage, so the button rides up into it rather than leaving a gap. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .stages > .sec-cta{position:relative;margin-top:-10vh}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  padding-inline:var(--pad);
}
/* Three tracks with equal outer columns, so the links sit on the true centre of
   the page rather than the centre of whatever space the logo and button leave.
   Shrinking max-width collapses those outer 1fr tracks, which is what walks the
   logo and the button inward until all three sit together in one capsule. */
.nav__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  width:100%;max-width:1240px;margin-inline:auto;
  border:1px solid transparent;border-radius:0;
  padding:.4rem 0;
  transition:
    max-width .38s var(--ease),
    border-radius .38s var(--ease),
    background-color .38s var(--ease),
    border-color .38s var(--ease),
    box-shadow .38s var(--ease),
    backdrop-filter .38s var(--ease),
    padding .38s var(--ease);
}
.nav.is-lifted .nav__inner{
  max-width:var(--nav-pill-w,700px);
  border-radius:999px;
  background:rgba(250,250,248,.78);
  border-color:var(--hair);
  backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:0 12px 40px rgba(20,23,17,.10);
  padding:.45rem .5rem .45rem 1.3rem;
}
/* The lockup steps down inside the capsule so the pill stays a neat height. */
.nav.is-lifted .brand__logo{height:clamp(26px,2.4vw,32px)}
.nav.is-lifted .nav__links{gap:1.9rem}
/* Columns are assigned explicitly: hiding the links on mobile would otherwise
   let auto-placement pull the button into the middle track. */
.brand{display:flex;align-items:center;justify-self:start;grid-column:1}
/* The lockup is 864x264 in the source, cropped to its own ink with no padding,
   so height alone controls it and the width follows. */
.brand__logo{height:clamp(34px,3.4vw,46px);width:auto;display:block;transition:height .38s var(--ease)}
.nav__inner > .btn{justify-self:end;grid-column:3}
.nav__links{display:flex;gap:2.4rem;font-size:.82rem;letter-spacing:.04em;justify-self:center;grid-column:2}
.nav__links a{position:relative;padding:.4rem 0;color:var(--ink-soft);transition:color .35s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
/* Built by the nav script rather than written into 35 pages, so there is only
   ever one list of links and the two layouts cannot drift apart. */
.nav__burger{display:none;grid-column:1;justify-self:end;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:-.2rem;background:none;border:0;cursor:pointer;
  flex-direction:column;gap:5px}
.nav__burger span{display:block;width:19px;height:1.5px;background:var(--ink);border-radius:1px;
  transition:transform .38s var(--ease),opacity .28s var(--ease)}
html.nav-open .nav__burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
html.nav-open .nav__burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav__burger:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Cloned from the header's nav by assets/nav.js and appended to <body>, because
   the header's capsule carries a backdrop-filter and would otherwise become the
   containing block for a fixed panel inside it. */
/* The phone call to action. Hidden on wide screens, where the header keeps
   its own button. */
.topbar{display:none;align-items:center;justify-content:center;gap:.5rem;
  height:38px;flex:none;background:var(--accent);color:#fff;
  font-size:.86rem;letter-spacing:.01em;
  /* the same sheen as the solid buttons, at the header's slower rate: it sits
     on screen the whole time someone is reading */
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 60%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:190% 0;
  animation:lpSheen 11s ease-in-out infinite}
.topbar svg{width:17px;height:17px;animation:topbarNudge 2.6s var(--ease) infinite}
.topbar svg path{stroke-width:2.2}
.topbar:active svg{animation:none;transform:translateX(4px);transition:transform .2s var(--ease)}
/* Two nudges then a long rest. A arrow that never stops reads as decoration;
   one that moves, stops, and moves again reads as something to press. */
@keyframes topbarNudge{
  0%,52%,100%{transform:translateX(0)}
  62%{transform:translateX(6px)}
  72%{transform:translateX(0)}
  80%{transform:translateX(4px)}
  88%{transform:translateX(0)}
}

/* Two things keep this from eating the page's clicks while it is invisible.
   The [hidden] attribute alone does nothing here: it works through the browser's
   own display:none, and the display:flex below is an author rule, so it wins.
   pointer-events is the belt to that braces, covering the 380ms it spends
   fading out as well. */
.navmenu[hidden]{display:none}
.navmenu{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:stretch;
  background:rgba(20,23,17,.26);opacity:0;pointer-events:none;
  transition:opacity .38s var(--ease)}
.navmenu.is-on{opacity:1;pointer-events:auto}
.navmenu__list{display:flex;flex-direction:column;justify-content:center;
  width:100%;min-height:100svh;
  padding:calc(var(--nav-h) + 1.5rem) 1.5rem 3rem;
  background:var(--canvas-ink);
  transform:translateY(-12px);transition:transform .38s var(--ease)}
.navmenu.is-on .navmenu__list{transform:none}
.navmenu__list a{padding:.42rem .2rem;text-align:center;
  font-family:var(--display);font-weight:900;letter-spacing:-.015em;line-height:1.08;
  font-size:clamp(2.1rem,9.5vw,3rem);color:#EDEDE8;
  border-bottom:0;transition:color .3s var(--ease);
  /* each name waits its turn. --i is set per item by assets/nav.js, so adding
     a nav link needs no change here. */
  opacity:0;transform:translateY(14px)}
.navmenu.is-on .navmenu__list a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .55s var(--ease),color .3s var(--ease);
  transition-delay:calc(.12s + var(--i,0) * .07s)}
.navmenu__list a[aria-current]{color:#fff}
.navmenu__list a:active{color:var(--gold)}
/* the whole screen is the panel now, so the scrim behind it is pointless */
.navmenu{background:none}
@media (prefers-reduced-motion:reduce){
  .navmenu,.navmenu__list,.navmenu__list a{transition:none;transform:none}
  .navmenu__list a{opacity:1}
  .topbar,.topbar svg{animation:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;--hero-x:64;--hero-y:50}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--canvas)}
.hero__media img{width:100%;height:100%;display:block;object-fit:cover;object-position:calc(var(--hero-x) * 1%) calc(var(--hero-y) * 1%)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--hero-x) * 1%) calc(var(--hero-y) * 1%);opacity:0;transition:opacity .9s var(--ease);will-change:transform}
.hero.video-ready .hero__video{opacity:1}
/* The mobile cut is already cropped to the focal band, so re-applying
   --hero-x would crop it a second time. Centre it instead. */
.hero__video.is-tall{object-position:50% 50%}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(247,247,245,.94) 0%,rgba(247,247,245,.86) 26%,rgba(247,247,245,.42) 46%,rgba(247,247,245,0) 64%),
    linear-gradient(to bottom,rgba(247,247,245,.5) 0%,rgba(247,247,245,0) 20%),
    linear-gradient(to top,rgba(247,247,245,.55) 0%,rgba(247,247,245,0) 26%);
}
/* Above the climb overlay (z-index 1): where a milestone label lands on the
   copy or a button, the copy wins. */
.hero__inner{position:relative;z-index:2;width:min(1240px,100% - (var(--pad) * 2));margin-inline:auto;padding-top:var(--nav-h)}
.hero__copy{max-width:40rem}
.hero h1{margin:0 0 1.5rem}
/* One block. Widened and tightened so the extra measure buys back the lines
   the paragraph breaks were costing, and the hero stays inside one screen. */
.hero__sub{margin:0 0 1.9rem;max-width:56ch}
.hero__sub p{font-size:clamp(.92rem,1.08vw,1rem);line-height:1.54;color:var(--ink-soft)}
.hero__sub strong{font-weight:500;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ---------- the climb ---------- */
.climb{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.climb__frame{position:absolute;left:0;top:0}
.climb__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.climb__path{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;opacity:.5}

.ms{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;white-space:nowrap;
  opacity:.5;transition:opacity .7s var(--ease);
}
.ms__dot{
  width:7px;height:7px;flex:none;border-radius:50%;background:var(--canvas);border:1.5px solid var(--ink-faint);
  transition:background-color .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease);
}
/* The marble under these labels measures 137 to 193 in luminance across the
   loop. At the dark end, ink-soft only reached 2.1:1. Darker glyph plus a
   white halo puts every label clear of the 3.5:1 floor on both extremes,
   and the halo is what keeps the carved look rather than a flat sticker. */
.ms__label{
  margin-left:1.7rem;font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:0;
  color:var(--ink);
  text-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 8px rgba(255,255,255,.75),
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 0 rgba(20,23,17,.22);
  transition:color .6s var(--ease);
}
.ms.is-lit{opacity:1}
.ms.is-lit .ms__dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(27,107,74,.14);transform:scale(1.12)}
.ms.is-lit .ms__label{color:var(--accent-deep)}

.cue{position:absolute;left:var(--pad);bottom:2rem;z-index:2;font-family:var(--display);font-weight:500;font-size:.95rem;letter-spacing:0;color:var(--ink-faint)}
@media (max-height:620px){.cue{display:none}}

/* ---------- floating figure card ----------
   Frosted glass over the hero art: a mono caps line, a ring, one big number.
   Wide screens float it bottom right, over the brightest marble in the picture.
   Below 1200px the art has no clear air, so it joins the column under the
   buttons. The small lines are sized to be read, not just seen.
   Clear glass, the same family as the RenewBee orb: a light fill thin enough for
   the blurred marble to show through, dark type, and emerald only on the ring
   and the figure. No glow; the site's own emerald, never a bright green.
   Over this marble dark type reads at 6:1 or better where white managed 2:1. */
.fc{
  position:relative;z-index:2;color:var(--ink);border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 18px),rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 24px 60px rgba(20,23,17,.12),inset 0 1px 0 rgba(255,255,255,.95);
  animation:fcin 1.1s var(--ease) .55s backwards;
}
/* It arrives once and then holds still. A looping bob was tried and measured
   with the hero video playing: the moving glass made the page redraw every
   frame, about 2.7x the GPU drawing of the page with no card. Held still, the
   page stays idle between video frames and the blur adds 1 to 3ms a second. */
@keyframes fcin{from{opacity:0;translate:0 18px}}
.fc__k{margin:0;font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.35;letter-spacing:0;
  text-wrap:balance;color:var(--ink-soft)}
.fc__ring{position:relative;flex:none}
.fc__ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.fc__track,.fc__arc{fill:none;stroke-width:5}
.fc__track{stroke:rgba(20,23,17,.12)}
/* r=52, so the full circle is 326.73 long; the gap left open is a fifth. */
.fc__arc{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:65.35;
  animation:fcdraw 1.8s var(--ease) .75s backwards}
@keyframes fcdraw{from{stroke-dashoffset:326.73}}
.fc__mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fc__n{font-family:var(--body);font-weight:300;line-height:1;letter-spacing:-.05em;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--accent)}
.fc__x{font-size:.62em;margin-left:.04em}
.fc__u{margin-top:.45em;font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.01em;color:var(--ink-soft)}
@media (min-width:1200px){
  /* bottom is only the starting point: the hero script lowers the card if a
     milestone label on the slope would sit underneath it. */
  .fc{position:absolute;right:3vw;bottom:max(28px,6vh);width:clamp(200px,14.5vw,244px);padding:16px 16px 20px}
  .fc__ring{width:80%;aspect-ratio:1;margin:12px auto 0}
  .fc__n{font-size:clamp(2rem,2.6vw,2.7rem)}
}
.ms.is-under{visibility:hidden}
@media (max-width:1199px){
  .hero{flex-direction:column;justify-content:center;align-items:stretch;padding-bottom:3.5rem}
  .fc{display:flex;align-items:center;justify-content:space-between;gap:1rem;align-self:flex-start;
    width:min(330px,100% - var(--pad) * 2);margin:1.8rem var(--pad) 0;padding:14px 14px 14px 18px}
  .fc__ring{width:108px;height:108px}
  .fc__n{font-size:1.75rem}
  .fc__u{font-size:.62rem}
}

/* ---------- sections ---------- */
section{position:relative}
.band{padding:clamp(5rem,10vw,8.5rem) 0;position:relative}
.band--tint{background:var(--canvas-deep)}
.band--ink{background:var(--canvas-ink);color:#EDEDE8}
.band--ink .lede{color:#A6A99F}
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ceiling */


/* ---------- case study rail ----------
   Dark band: the page runs light from the hero down, and the work deserves a
   hard change of ground so it reads as a separate claim. */
.kases{background:var(--canvas-ink);color:#EDEDE8;padding:clamp(4rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,3.5rem);overflow:hidden}
.kases__head h2{color:#fff;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.03em}

/* Drives itself, no dragging. Same technique as the logo strip: the cards are
   duplicated and the track travels exactly half its width, so the loop closes
   on itself with no jump. */
.kases__viewport{
  margin-top:clamp(2.4rem,5vw,3.6rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
/* The space between cards is a margin, not a gap. A flex gap sits only
   between items, so eighteen cards carry seventeen gaps and half the track is
   half a gap short of one full set: every lap the row snapped back a few
   pixels. As a margin each card carries its own space and half the track is
   exactly nine cards, so the loop closes invisibly. */
.kases__track{
  display:flex;width:max-content;
  animation:kaseroll 79s linear infinite;  /* 70s for eight cards; nine keeps the same speed */
  will-change:transform;   /* Safari otherwise runs this row on the main thread */
}
/* Starts at the first card rather than halfway along, so a visitor's first
   view is RenewBee on the left and the row plays through to Tennis before it
   repeats. This also means cards travel leftward, which is the only direction
   that lets a sequence read in order over time. */
/* An exact pixel distance, measured on the device and written into --roll by
   the page script. Safari resolves the -50% against the wrong width for a
   max-content flex row, which left the row crawling at 15px a second on an
   iPhone instead of 365. The 50% stays as the fallback if script never runs. */
@keyframes kaseroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--roll,50%)),0,0)}}
/* Keeps moving under the mouse. Only keyboard focus holds it, so a card
   someone has tabbed to does not slide away from under the focus ring. */
.kases__viewport:has(:focus-visible) .kases__track{animation-play-state:paused}
/* Phones: no edge fade. The mask makes Safari redraw the whole 5000px row every
   frame instead of sliding a ready-made layer, which is where it gives up and
   the row sits still. The fade is only about 20px on a phone anyway. */
.kase{
  position:relative;flex:0 0 clamp(260px,26vw,360px);margin-right:clamp(1rem,1.8vw,1.6rem);
  aspect-ratio:3/4;border-radius:18px;overflow:hidden;display:block;padding:0;
  transition:transform .5s var(--ease);
}
.kase:hover{transform:translateY(-6px)}
.kase__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Lifts the lower third toward the page canvas so dark type has something to
   sit on, without flattening the image into a solid block. */
/* Veil runs from the top now that the label sits up there, in the clear space
   above the device in both shots. */
.kase__veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,23,17,.66) 0%,rgba(20,23,17,.30) 20%,rgba(20,23,17,0) 44%)}
/* Same Bebas caps as the hero headline. White needs a dark ground to read, so
   the veil above runs dark from the top rather than light. No panel, the veil
   does the work. */
.kase__label{position:absolute;left:6.5%;right:6.5%;top:5%;margin:0;
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2.3rem,3.45vw,3.15rem);line-height:.88;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;
  text-shadow:0 1px 12px rgba(20,23,17,.45)}

/* One label is much longer than the rest. A notch smaller keeps it to two
   lines so it clears the device in the photograph. */
.kase__label--long{font-size:clamp(1.9rem,2.8vw,2.55rem)}

/* ---- phones ---- */
@media (max-width:700px){
  .kases__viewport{-webkit-mask-image:none;mask-image:none}
  /* Phone cards are about half the screen, so two and a bit show at once and
     the row reads as a reel rather than one card at a time. */
  .kase{flex-basis:clamp(160px,48vw,210px)}
  /* The label keeps its share of the card: it was 14% of the card's width. */
  .kase__label{font-size:clamp(1.25rem,6.8vw,1.9rem)}
  .kase__label--long{font-size:clamp(1rem,5.5vw,1.55rem)}
  /* Picked on the user's own iPhone: 46px a second, a card every 4.4s, which
     is about the pace the desktop row runs at. */
  .kases__track{animation-duration:40s}
}

/* Templates: no image yet. Dark, dashed, obviously a slot rather than work. */
.kase--tpl{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.26)}
/* The frosted panel exists to lift type off a photograph. A template has no
   photograph, so the panel becomes a grey slab. Bare text on the dark card. */
.kase--tpl .kase__label{color:rgba(255,255,255,.5);text-shadow:none}
.kase--tpl .kase__note{position:absolute;left:7%;right:7%;bottom:6.5%;margin:0;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,237,232,.55);line-height:1.6}


.kase__stats{display:flex;gap:1.6rem;margin:0;flex-wrap:wrap}
.kase__stats div{margin:0}
.kase__stats dt{
  font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1;color:#fff;letter-spacing:-.02em;
}
/* Playfair ships no euro glyph, so the symbol was silently falling back to a
   system serif and reading as a thin C beside the heavy digits. Sora has one. */
/* Playfair has no euro and a very light multiplication sign, so both are set
   in the body face instead. Global, because these appear outside the rail too. */
.kase__stats dd{margin:.4rem 0 0;font-size:.76rem;line-height:1.4;color:rgba(255,255,255,.7);max-width:16ch}


/* Motion off: the track stops dead and becomes a normal scrollable row, so the
   content is still reachable rather than frozen half off screen. */
@media (prefers-reduced-motion:reduce){
  .kases__viewport{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .kases__track{animation:none}
  .kases__track .kase[aria-hidden="true"]{display:none}
  .kase:hover{transform:none}
}

/* ---------- client logos ----------
   Dark band on purpose: the supplied logos are white with transparency, so a
   light background would make them disappear. */
/* Same ground as the pinned stages below, so the two run as one surface. */
.clients{background:var(--canvas-deep);padding:clamp(2.6rem,5vw,3.8rem) 0;overflow:hidden}
.clients__label{
  font-size:.92rem;color:var(--ink-soft);text-align:center;margin:0 0 clamp(1.6rem,3vw,2.4rem);
  padding-inline:var(--pad);
}
/* A narrow window, so only three or four logos are on screen at once and the
   row reads as a considered detail rather than a banner spanning the page.
   Masked at both ends so logos fade instead of being chopped mid word. */
.clients__viewport{
  width:min(760px,100% - (var(--pad) * 2));margin-inline:auto;
  /* No border: at 760 by 60 the pill's curved ends sit under the mask, so the
     only parts that ever showed were its top and bottom edges, reading as two
     stray hairlines. The mask alone defines the window. */
  padding-block:1.1rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.clients__track{
  display:flex;align-items:center;width:max-content;
  animation:marquee 46s linear infinite;
}
/* The supplied files are white silhouettes. brightness(0) flattens any colour
   to black while leaving alpha alone, so they work on a light background with
   no new assets and the weight stays a number I can tune. */
.clients__track img{
  height:clamp(26px,2.6vw,34px);width:auto;flex:none;display:block;
  margin-right:clamp(3rem,6vw,5.5rem);   /* see .kases__track: margins, not gap */
  /* invert, not brightness(0): it keeps interior line work, so RenewBee's bee
     still reads as a bee and Hangman's H still knocks through. */
  filter:invert(1);opacity:.5;
  transition:opacity .4s var(--ease);
}
.clients__track img:hover{opacity:.85}
/* Travels right, and never pauses. */
@keyframes marquee{from{transform:translate3d(calc(-1 * var(--roll,50%)),0,0)}to{transform:translate3d(0,0,0)}}

/* Motion off: the track stops and simply wraps onto as many lines as it needs. */
@media (prefers-reduced-motion:reduce){
  .clients__viewport{-webkit-mask-image:none;mask-image:none}
  .clients__track img{margin-right:0}
  .clients__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;
    row-gap:2rem;column-gap:clamp(3rem,6vw,5.5rem);padding-inline:var(--pad)}
  .clients__track img[aria-hidden="true"]{display:none}
}

/* ---------- pinned stages ----------
   The track is the scroll distance. The pin inside it is sticky, so the stage
   holds still while the page scrolls past it. One screen of travel per stage,
   plus a little extra so the first and last get a beat at full opacity. */
.stages{position:relative;background:var(--canvas-deep)}
/* 4 stages. Travel is (track - viewport), so 300vh gives 200vh of scroll,
   half a screen per stage, the same pace as when there were five. At nearly a
   full screen each it felt like the section had stalled. */
.stages__track{height:300vh}
.stages__pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--nav-h) * .6) 2rem;overflow:hidden;
}
.stages__deck{position:relative;flex:1;min-height:0}
.stage{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,4rem);
  align-content:center;align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .55s var(--ease);
}
@media (min-width:900px){.stage{grid-template-columns:1.05fr .95fr}}
.stage.is-active{opacity:1;pointer-events:auto}
/* The stage is centred in a frame one screen tall, so on the way in the first
   stage sat about a third of a screen below the logos. While it pins, the
   section tucks up under the logo strip by the empty part of that frame
   (--stages-pull, measured in the page script), so the logos lead straight into
   Diagnose. The strip only ever covers empty frame and has scrolled away before
   the second stage shows; the pinned scroll itself is unchanged. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .clients{position:relative;z-index:2}
  .stages{margin-top:calc(-1 * var(--stages-pull,0px))}
}
/* Where the rail runs across the top, it and the stage below are centred as one
   group: the second row is sized to the tallest stage (--deck-h, measured in the
   page script) instead of taking half the leftover height each, which used to
   leave a gap between the rail and the stage. */
@media (min-width:900px) and (max-width:1079px) and (prefers-reduced-motion:no-preference){
  .stages__layout{grid-template-rows:auto var(--deck-h,1fr);align-content:center}
}

/* Art and copy each carry their own small offset, so the swap reads as two
   things arriving rather than one block blinking. */
/* The ornaments were generated on a pale ivory ground that no colour or
   luminance key can separate: the marble is brighter than parts of the
   background, and the background is a gradient rather than a flat tone.
   multiply against the section's own pale ground erases the edge for free,
   keeps the cast shadow, and costs nothing to undo. */
.stage__art{display:flex;align-items:center;justify-content:center;min-height:0}
.stage__art img{filter:brightness(1.09);mix-blend-mode:multiply}
/* A full scene rather than an object on ivory: blending it into the page
   would wash the sky out, so it keeps its own edges and gets a radius. */
.stage__art img.is-scene{filter:none;mix-blend-mode:normal;border-radius:14px}
.stage__art img,.stage__art > svg{
  width:auto;max-width:100%;height:auto;max-height:46svh;display:block;
  transform:scale(.965);transition:transform .7s var(--ease);
}
.stage.is-active .stage__art img,.stage.is-active .stage__art > svg{transform:none}
/* The chart layer tracks the photo exactly, so the ceilings stay pinned to the
   carved ridge at any size. */

.stage__txt{transform:translateY(16px);transition:transform .6s var(--ease)}
.stage.is-active .stage__txt{transform:none}
.stage__txt .lede{margin-top:1.3rem}

/* Each stroke draws itself when its stage becomes the active one. */
.stage__art .d{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.1s var(--ease);
}
.stage.is-active .stage__art .d{stroke-dashoffset:0}
.stage__art circle[fill]{opacity:0;transition:opacity .5s var(--ease) .35s}
.stage.is-active .stage__art circle[fill]{opacity:1}

/* Timeline down the left. It shows all four stops at once, so the visitor can
   see how far through they are and how much is left, which a single changing
   label cannot tell them. */
.stages__layout{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3.5rem);flex:1;min-height:0;align-items:center}
@media (min-width:1080px){.stages__layout{grid-template-columns:208px 1fr}}

.timeline{position:relative;list-style:none;margin:0;padding:.4rem 0;display:grid;gap:clamp(1.8rem,4.2vh,3.1rem)}
.timeline::before,.timeline::after{content:"";position:absolute;left:8px;width:4px;border-radius:2px}
.timeline::before{top:10px;bottom:10px;background:var(--hair-strong)}
/* The emerald fill climbs to whichever dot is current, so the line itself
   reports progress rather than just the labels. */
.timeline::after{
  top:10px;height:calc((100% - 20px) * var(--prog,0));background:var(--accent);
  transition:height .25s linear;
}
.timeline li{
  position:relative;padding-left:2.6rem;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:0;
  color:var(--ink-faint);transition:color .5s var(--ease);
}
.timeline__dot{
  position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--canvas-deep);border:2.5px solid var(--hair-strong);
  transition:background-color .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),transform .45s var(--ease);
}
.timeline li.is-done{color:var(--ink-soft)}
.timeline li.is-done .timeline__dot{background:var(--accent);border-color:var(--accent)}
.timeline li.is-active{color:var(--accent-deep)}
.timeline li.is-active .timeline__dot{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 8px var(--accent-muted);transform:scale(1.14);
}

/* Horizontal above the deck on narrower desktops, where a left column would
   eat width the illustration needs. */
@media (max-width:1079px){
  .timeline{grid-template-columns:repeat(4,1fr);gap:0;padding:0}
  .timeline::before{left:0;right:0;top:0;bottom:auto;width:auto;height:4px}
  .timeline::after{left:0;top:0;width:calc(100% * var(--prog,0));height:4px;transition:width .25s linear}
  .timeline li{padding-left:0;padding-top:1.5rem}
  .timeline__dot{top:-8px;left:0}
}

/* Below the pin breakpoint, and whenever motion is reduced, the whole thing
   becomes four ordinary stacked blocks. Nothing is hidden and nothing pins. */
@media (max-width:899px),(prefers-reduced-motion:reduce){
  /* Links to #diagnose land the first stage just under the nav. While pinned
     there is no margin: the section's top is exactly where the pin locks. */
  .stages{scroll-margin-top:var(--nav-h)}
  .stages__track{height:auto}
  .stages__pin{position:static;height:auto;display:block;padding-block:clamp(2.25rem,5vw,4rem) clamp(4rem,9vw,7rem);overflow:visible}
  .stages__deck{flex:none}
  .stage{position:static;opacity:1;pointer-events:auto}
  .stage + .stage{margin-top:clamp(3.5rem,8vw,6rem)}
  .stage__art svg{max-height:none;transform:none}
  .stage__txt{transform:none}
  .stage__art .d{stroke-dashoffset:0}
  .stage__art circle[fill]{opacity:1}
  .stages__rail{display:none}
}
.stat{border-top:1px solid var(--hair);padding-top:1.1rem}
.stat + .stat{margin-top:1.9rem}
.stat__n{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1;letter-spacing:-.02em;display:block;font-weight:900}
.stat__n em{font-style:normal;color:var(--accent)}
.stat__t{font-size:.92rem;color:var(--ink-soft);margin-top:.55rem;max-width:36ch}

/* two paths */
.paths{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:860px){.paths{grid-template-columns:1fr 1fr}}
.path{
  position:relative;background:var(--panel);border:1px solid var(--hair);padding:clamp(1.8rem,3vw,2.6rem);
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.path:hover{border-color:var(--hair-strong);transform:translateY(-3px);box-shadow:0 18px 44px rgba(20,23,17,.07)}
.path__tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem}
.path__quote{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.3;margin:0 0 1.2rem;font-weight:700}
.path__body{font-size:.94rem;color:var(--ink-soft)}
.path__fix{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hair);font-size:.9rem}
.path__fix b{font-weight:500;color:var(--accent-deep);display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem}

/* steps */
.steps{counter-reset:s;display:grid;gap:0;margin-top:3rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.6rem);padding:2rem 0;border-top:1px solid var(--hair);align-items:start}
.step:last-child{border-bottom:1px solid var(--hair)}
.step__n{counter-increment:s;font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;color:var(--accent);padding-top:.45rem}
.step__n::before{content:"0" counter(s)}
.step__t{margin-bottom:.6rem}
.step__b{font-size:.95rem;color:var(--ink-soft);max-width:60ch}

/* the interactive moment */
.shape{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:940px){.shape{grid-template-columns:.85fr 1.15fr;align-items:center}}
.shape__stage{position:relative;background:#101410;border:1px solid rgba(180,145,63,.22);padding:clamp(1.2rem,2.5vw,2rem);overflow:hidden}
.shape__svg{display:block;width:100%;height:auto}
.shape__grid line{stroke:rgba(237,237,232,.09);stroke-width:1}
.shape__curve{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .8s var(--ease)}
.shape.is-done .shape__curve{stroke:var(--accent-hi)}
.shape__fill{fill:url(#shapeFill);opacity:calc(.10 + .35 * var(--m,0));transition:opacity .4s linear}
.shape__axis{stroke:rgba(237,237,232,.3);stroke-width:1}
.shape__tick{font-family:var(--mono);font-size:9px;fill:rgba(237,237,232,.5);letter-spacing:.1em}
.shape__hold{
  margin-top:1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.hold{
  position:relative;overflow:hidden;border:1px solid rgba(180,145,63,.45);background:transparent;color:#EDEDE8;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.95em 1.8em;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:border-color .5s var(--ease),color .5s var(--ease);
}
.hold::before{
  content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(var(--m,0));transition:transform .1s linear;z-index:-1;
}
.hold span{position:relative;z-index:1}
.hold.is-done{border-color:var(--accent-hi);color:#fff}
.shape__hint{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;color:#8E9188}

/* case studies */
.cases{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:900px){.cases{grid-template-columns:repeat(2,1fr)}}
.case{
  position:relative;background:var(--panel);border:1px solid var(--hair);
  padding:clamp(1.6rem,2.6vw,2.2rem);overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.case::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--case-tint);opacity:.9}
.case:hover{transform:translateY(-3px);border-color:var(--hair-strong);box-shadow:0 20px 48px rgba(20,23,17,.08)}
.case__name{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1}
.case__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:.6rem}

/* The device photo sets the box; the screen sits on top, transformed to match. */
.mock{position:relative;margin:1.8rem 0 1.6rem;overflow:hidden;background:var(--canvas-deep)}
.mock__device{display:block;width:100%;height:auto}
.mock__screen{position:absolute;inset:0;pointer-events:none}
.mock__screen img{
  position:absolute;left:0;top:0;display:block;
  /* The page-wide img{max-width:100%} would cap this to the card width while
     the transform assumes its full 1440px box, squashing the screen. */
  max-width:none;
  transform-origin:0 0;backface-visibility:hidden;
  /* Hidden until the transform is applied, so it never flashes untransformed. */
  opacity:0;transition:opacity .5s var(--ease);
}
.mock.is-set .mock__screen img{opacity:1}

.case__stats{display:flex;gap:2.6rem;margin:0;flex-wrap:wrap}
.case__stats div{margin:0}
.case__stats dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.case__big{font-family:var(--display);font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;margin:.4rem 0 0;letter-spacing:-.02em;color:var(--case-tint);font-weight:900}
.case__big span{font-family:var(--body);font-size:.9rem;font-weight:300;color:var(--ink-soft);letter-spacing:0}
.case__note{margin-top:1.4rem;padding-top:1rem;border-top:1px dashed var(--hair-strong);font-family:var(--mono);font-size:.62rem;line-height:1.7;color:var(--gold)}

/* ---------- the gap: globe and figures ----------
   The heading over the top of a white globe whose curve comes down just inside
   the two outer figures, so the three cards sit across it. The cards are
   near-opaque on purpose: a blur over a canvas that redraws every frame would
   have to be recomputed every frame too.
   The band carries its geometry in its padding so globe.js can read it resolved:
   padding-top is the air above the globe, padding-bottom (--globe-k) is how far
   the cards overlap it, where the globe fades out; what is left between them
   (--globe-cap) is the part you see above the cards. The radius follows from
   that and the band's width. */
/* The cap also answers to the viewport height, so on a short laptop screen the
   figures still land on screen as the heading does. */
.gap{--globe-cap:clamp(150px,min(19vw,29vh),280px);--globe-k:clamp(90px,9vw,130px);text-align:center}
.gap h2{max-width:26ch;margin-inline:auto}
.gap .lede{margin-inline:auto}
.gap__globe{position:relative;box-sizing:border-box;height:calc(24px + var(--globe-cap) + var(--globe-k));
  padding:24px 0 var(--globe-k);margin-top:clamp(.8rem,2vw,1.4rem)}
.gap__globe canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;
  transition:opacity 1.2s var(--ease);cursor:grab;touch-action:pan-y}
.gap__globe.is-ready canvas{opacity:1}
.gap__globe canvas:active{cursor:grabbing}
.gap__globe.is-static{background:url(globe-poster.jpg) center top/100% auto no-repeat}
.gap .figs{position:relative;z-index:1;margin-top:calc(-1 * var(--globe-k))}
/* Tighter than on a case study page, so all three still land on a short laptop
   screen together with the heading. */
.gap .fig{text-align:left;box-shadow:0 18px 44px rgba(20,23,17,.08);min-height:0;
  padding:clamp(1.1rem,1.8vw,1.4rem) clamp(1.2rem,2vw,1.6rem)}
.gap .fig__top{margin-bottom:.9rem}
.gap .fig__scale{padding-top:1.1rem}
.gap .fig__orb{max-width:128px;margin:-.3rem auto -.6rem}
/* The orb is drawn smaller here than on a case study, so its label is set larger
   in the drawing to land at the same size on screen, about 8px. */
.gap .orb__k{font-size:13px;letter-spacing:.01em}
.gap .proof__src{margin-inline:auto}
.gap__close{margin-top:2rem}

/* Small print under the stats: these are real studies, so they get named. */
.proof__src{font-family:var(--body);font-size:.8rem;line-height:1.75;letter-spacing:0;
  color:var(--ink-faint);margin-top:1.2rem;max-width:64ch}

/* not coaches */

/* faq */
/* Centred as a block. The questions and answers stay left-aligned inside it,
   so a long answer still reads line to line. */
#faq h2{text-align:center}
.faq{max-width:56rem;margin:2.5rem auto 0}
.q{border-top:1px solid var(--hair)}
.q:last-child{border-bottom:1px solid var(--hair)}
.q__btn{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink);padding:1.5rem 3rem 1.5rem 0;position:relative;
}
.q__btn::after{
  content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .5s var(--ease);
}
.q.is-open .q__btn::after{transform:translateY(-30%) rotate(225deg)}
.q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.q.is-open .q__a{grid-template-rows:1fr}
.q__a > div{overflow:hidden}
.q__a p + p{margin-top:.9rem}
.q__list{margin:.9rem 0 0;padding-left:1.1rem;list-style:disc}
.q__a ul + p{margin-top:.9rem}
.q__list li + li{margin-top:.5rem}
.q__list b{font-weight:500;color:var(--ink)}
/* Marked so it cannot ship by accident: the source answer on the live site is
   the wrong one, pasted from the commitment question. */
.q--todo .q__btn{color:var(--gold)}
.q--todo .q__a p:first-child{color:var(--gold);font-family:var(--mono);font-size:.72rem;line-height:1.7}
.q__a p{padding:0 0 1.6rem;color:var(--ink-soft);font-size:.95rem;max-width:62ch}

/* careers
   Sits after the booking CTA on purpose: different audience, and it must not
   interrupt the path to the form. The empty state is the honest default, so
   the section is shippable with no roles open. */
.careers__list{margin-top:clamp(2.2rem,4vw,3rem);max-width:60rem;border-top:1px solid var(--hair)}
.role{display:grid;gap:.5rem 1.5rem;grid-template-columns:1fr;align-items:center;
  padding:1.5rem 0;border-bottom:1px solid var(--hair)}
@media (min-width:760px){.role{grid-template-columns:1fr auto auto}}
.role__t{font-family:var(--display);font-weight:900;letter-spacing:-.02em;margin:0;
  font-size:clamp(1.15rem,1.7vw,1.45rem)}
.role__m{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:0;
  color:var(--ink-faint)}
.careers__none{margin-top:clamp(2.2rem,4vw,3rem);max-width:46rem;border:1px solid var(--hair-strong);
  border-radius:4px;background:var(--canvas);padding:clamp(1.6rem,3vw,2.2rem)}
.careers__none p{margin:0;max-width:54ch;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.careers__none p + p{margin-top:.9rem}
.careers__none strong{font-weight:500;color:var(--ink)}
.careers__cta{margin-top:1.7rem}


/* footer */
/* ---------- footer ----------
   Brand and contact, then the full disclaimer in small type, then the legal line.
   The two small headings are plain labels in the body face, not display type.
   Every grey here measures at least 5.3:1 on the dark ground. */
.foot{background:var(--canvas-ink);color:#A6A99F;padding:clamp(3rem,6vw,4.5rem) 0 clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid rgba(237,237,232,.1)}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:#FFFFFF}
.foot__top{display:grid;gap:2.2rem;grid-template-columns:1fr;padding-bottom:clamp(2.2rem,4vw,3rem)}
.foot__logo{height:30px;width:auto;display:block;opacity:.9}
.foot__tag{margin-top:1.1rem;font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:0;color:#8E9188}
.foot__back{display:inline-block;margin-top:1rem;font-size:.85rem;color:#D6D8D0;
  border-bottom:1px solid rgba(237,237,232,.25);padding-bottom:1px}
.foot__h{font-family:var(--body);font-weight:500;font-size:.95rem;line-height:1.3;letter-spacing:0;
  color:#EDEDE8;margin:0 0 .9rem;text-wrap:initial}
.foot__address{font-style:normal;display:grid;gap:.45rem;justify-items:start;font-size:.92rem;line-height:1.55}
.foot__address a{color:#D6D8D0}
.foot__legal{border-top:1px solid rgba(237,237,232,.1);padding-top:clamp(2rem,4vw,2.6rem)}
.foot__disclaimer p{font-size:.74rem;line-height:1.75;color:#8E9188;margin:0 0 .9rem;break-inside:avoid-column}
.foot__base{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(237,237,232,.1);margin-top:clamp(1.2rem,3vw,1.8rem);padding-top:clamp(1.4rem,3vw,1.8rem);
  font-size:.8rem;color:#8E9188}
.foot__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot__links a{color:#A6A99F}
@media (min-width:900px){
  /* The contact column starts where the disclaimer's second column does. */
  .foot__top{grid-template-columns:1fr 1fr;column-gap:clamp(2.4rem,4vw,3.6rem);align-items:start}
  .foot__disclaimer{columns:2;column-gap:clamp(2.4rem,4vw,3.6rem)}
}

/* ---------- entrances ---------- */
.rise{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.is-in .rise,.rise.is-in{opacity:1;transform:none}
.is-in .rise:nth-child(1){transition-delay:.05s}
.is-in .rise:nth-child(2){transition-delay:.15s}
.is-in .rise:nth-child(3){transition-delay:.25s}
.is-in .rise:nth-child(4){transition-delay:.35s}
.is-in .rise:nth-child(5){transition-delay:.45s}

/* A drawn hairline that draws itself as its section arrives. */
.draw{stroke-dasharray:var(--len,1);stroke-dashoffset:var(--len,1);transition:stroke-dashoffset 1.6s var(--ease)}
.is-in .draw{stroke-dashoffset:0}

@media (max-aspect-ratio:1.45/1){ .hero{--hero-x:85} }
@media (max-width:900px){
  :root{--nav-h:104px}
  html.no-topbar{--nav-h:66px}
  html.no-topbar .nav{height:66px}
  /* Logo and menu button together, and the call to action moves out of the
     header into its own bar above it. --nav-h covers both, so every rule that
     already offsets for the header keeps working. */
  .nav{flex-direction:column;align-items:stretch;height:104px;padding-inline:0}
  .nav__inner{padding-inline:var(--pad);flex:1}
  .nav__inner > .btn{display:none}
  /* The logo moves to the middle track so it sits on the true centre of the
     page rather than the centre of the space the menu button leaves. */
  .brand{grid-column:2;justify-self:center}
  .brand__logo{height:46px}
  .nav.is-lifted .brand__logo{height:40px}
  .topbar{display:flex}
  .nav__burger{display:flex;grid-column:3;justify-self:end;margin-right:0}
  .nav__links{display:none}
  .nav.is-lifted .nav__inner{max-width:none;border-radius:0;background:none;
    border-color:transparent;box-shadow:none;backdrop-filter:none;padding:.4rem 0}
  html.nav-open,html.nav-open body{overflow:hidden}
  html.nav-open .nav__burger span{background:var(--canvas)}
  .hero{--hero-x:88}
  .hero__scrim{background:linear-gradient(168deg,rgba(247,247,245,.96) 0%,rgba(247,247,245,.88) 40%,rgba(247,247,245,.44) 68%,rgba(247,247,245,.06) 100%)}
  .ms__label{font-size:.66rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rise{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
}

/* ---------- careers page ----------
   A secondary page, so it gets the plain Playfair heading rather than the
   hero's Bebas treatment. That pairing stays the homepage's moment. */
.pagehead{padding:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(2.4rem,5vw,3.4rem)}
.role__main{min-width:0}
.role__d{margin:.3rem 0 0;color:var(--ink-soft);font-size:.94rem;line-height:1.55;max-width:54ch}

/* ---------- legal pages ----------
   Long reading at a comfortable measure: one column, numbered sections, and a
   contents list up top so people can jump to the part they came for. */
/* The heading shares the reading column, so title, contents and text line up. */
.doc__head .wrap,.doc{max-width:46rem}
.doc__head .lede{margin-top:1.2rem}
.doc__meta{margin-top:1rem;font-size:.85rem;color:var(--ink-faint)}
.doc__band{padding:clamp(.5rem,2vw,1rem) 0 clamp(4.5rem,9vw,7rem)}
.doc__toc{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:1.3rem 1.6rem 1.4rem;
  margin-bottom:clamp(2.6rem,5vw,3.6rem)}
.doc .doc__toc-h{font-family:var(--body);font-weight:500;font-size:.95rem;letter-spacing:0;line-height:1.3;margin:0 0 .8rem}
.doc__toc ol{margin:0;padding-left:1.25rem;columns:2 15rem;column-gap:2.4rem}
.doc__toc li{font-size:.9rem;line-height:1.5;padding:.18rem 0;break-inside:avoid;color:var(--ink-faint)}
.doc__toc a{color:var(--ink-soft)}
.doc__toc a:hover{color:var(--accent)}
.doc section{scroll-margin-top:calc(var(--nav-h) + 1rem)}
.doc section + section{margin-top:clamp(2.4rem,4.5vw,3.2rem)}
.doc h2{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 1rem}
.doc h3{font-family:var(--body);font-weight:500;font-size:1rem;letter-spacing:0;line-height:1.4;margin:1.5rem 0 .6rem;color:var(--ink)}
.doc p,.doc li{font-size:.98rem;line-height:1.72;color:var(--ink-soft)}
.doc p + p,.doc ul + p,.doc p + ul{margin-top:.9rem}
.doc section ul{margin-bottom:0;padding-left:1.25rem}
.doc section li + li{margin-top:.5rem}
.doc strong{font-weight:500;color:var(--ink)}
.doc section a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.doc section a:hover{color:var(--accent-deep)}

/* ---------- booking page ----------
   One job: the calendar. The GoHighLevel widget draws its own panel and sets its
   own height from inside the frame, so the page centres it and holds a sensible
   height until the widget reports its real one. */
.book{text-align:center;padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.book h1{max-width:18ch;margin-inline:auto}
.book .lede{margin:1.4rem auto 0;max-width:58ch}
.book__band{padding-bottom:clamp(4rem,8vw,6rem)}
.book__cal{max-width:1000px;margin-inline:auto}
.book__cal iframe{display:block;min-height:640px}
/* GoHighLevel's embed script hides the frame while the calendar loads and is
   meant to reveal it once the calendar reports in. On some loads the reveal never
   comes (4 of 7 test loads left no calendar on the page), although the calendar
   has loaded and sized itself. So the frame is kept visible and in place; the
   script still sets its height. */
.book__cal iframe{position:relative!important;left:auto!important;opacity:1!important;
  visibility:visible!important;pointer-events:auto!important}

/* ---------- role pages ----------
   One page per role, ending in the application form. The form is a LeadConnector
   embed that sets its own height from inside the frame, so the page only gives it
   a ground and a width. Lists are numbered rather than bulleted: no dash marks. */
.pagehead h1 + .lede{margin-top:1.4rem}
.pagehead .lede + .lede{margin-top:1rem}
.rp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.8rem}
.rp__tag{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:0;
  color:var(--ink-soft);border:1px solid var(--hair-strong);border-radius:999px;padding:.46rem .95rem}
.rp__go{margin-top:2rem}
.rp__cols{display:grid;gap:clamp(2.8rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){.rp__cols{grid-template-columns:1fr 1fr}}
.rp__list{list-style:none;margin:clamp(1.6rem,3vw,2.2rem) 0 0;padding:0;border-top:1px solid var(--hair);counter-reset:rp}
.rp__list li{counter-increment:rp;display:grid;grid-template-columns:2.6rem 1fr;padding:1.05rem 0;
  border-bottom:1px solid var(--hair);color:var(--ink-soft);font-size:.98rem;line-height:1.6}
.rp__list li::before{content:counter(rp,decimal-leading-zero);font-family:var(--body);font-weight:500;font-size:.8rem;
  letter-spacing:0;color:var(--accent);padding-top:.34em}
/* Directly under its h2, so it takes the hero's italic green rather than a
   second upright serif that would read as another heading. */
.rp__number{font-family:var(--display);font-style:italic;font-weight:700;color:var(--accent);
  font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.3;letter-spacing:-.01em;max-width:36ch;margin-top:1.5rem}
.rp__number + .lede{margin-top:1.1rem}
.apply{display:grid;gap:clamp(2.2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:980px){
  .apply{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .apply__intro{position:sticky;top:calc(var(--nav-h) + 2rem)}
  .apply__form{justify-self:end}
}
.apply__intro .lede{margin-top:1.4rem;color:#A6A99F}
.apply__intro .lede + .lede{margin-top:1rem}
/* The form draws its own white panel, 650px at most, with a grey drop shadow.
   Capping the card at that width lets the panel fill it edge to edge, so the
   shadow falls outside the frame; the last few pixels are clipped for the
   shadow under the panel's bottom edge. */
.apply__form{width:100%;max-width:650px;background:#fff;border-radius:18px;overflow:hidden;min-height:640px}
.apply__form iframe{display:block;margin-bottom:-8px}

/* ---------- case study page ---------- */
.cs__hero{padding:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(2.2rem,5vw,3.2rem)}
.cs__hero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.02;max-width:20ch}
.stats{display:grid;gap:clamp(1.4rem,3vw,2.2rem);grid-template-columns:repeat(2,1fr);
  margin-top:clamp(2rem,4vw,2.8rem)}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat__v{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1;letter-spacing:-.02em;color:var(--accent-deep);display:block}
.stat__k{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);margin:.55rem 0 0;line-height:1.6}
.cs__body h2{margin-bottom:1.15rem}
.cs__body p{font-size:1rem;line-height:1.62;color:var(--ink-soft);max-width:62ch;margin:0 0 1rem}
.cs__list{margin:1rem 0 0;padding:0;list-style:none;max-width:62ch}
.cs__list li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;color:var(--ink-soft);line-height:1.6}
.cs__list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.evidence{margin-top:clamp(2rem,4vw,2.8rem);border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;background:var(--panel)}
.evidence img{width:100%;height:auto;display:block}
/* Needs the parent in the selector: .cs__body p is more specific than a single
   class, so the size written here was being ignored on every case study. */
.evidence .evidence__cap{font-family:var(--body);font-weight:400;font-size:.78rem;letter-spacing:0;
  color:var(--ink-faint);padding:.9rem 1.1rem;border-top:1px solid var(--hair);margin:0;line-height:1.6}
.plot{margin-top:clamp(2rem,4vw,2.6rem);max-width:52rem}
.plot svg{width:100%;height:auto;display:block;overflow:visible}
.plot__row-l{font-family:var(--body);font-weight:400;font-size:10.5px;fill:var(--ink-soft)}
.plot__row-v{font-family:var(--body);font-size:10px;fill:var(--ink);font-weight:500}
.plot__bar{fill:var(--accent)}
.plot__bar--hi{fill:var(--accent-deep)}
/* Marked so it cannot ship by accident: narrative not supplied yet. */
.cs--todo{border-left:3px solid var(--gold);padding-left:1.2rem}
.cs--todo p:first-child{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  line-height:1.7;color:#8A6D1F;background:rgba(180,145,63,.12);
  display:inline-block;padding:.4rem .6rem;border-radius:3px}

/* service icon grid */
.svcs{display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:repeat(2,1fr);margin-top:1.5rem;max-width:52rem}
@media (min-width:680px){.svcs{grid-template-columns:repeat(3,1fr)}}
.svc{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;
  border:1px solid var(--hair);border-radius:8px;background:var(--panel)}
.svc__i{width:22px;height:22px;flex:none;color:var(--accent)}
.svc__t{margin:0;font-size:.88rem;line-height:1.35;color:var(--ink)}

/* dot plot */
.plot__rule{stroke:var(--hair);stroke-width:1}
.plot__grid{stroke:var(--hair);stroke-width:1;stroke-dasharray:2 4}
.plot__tick{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-faint);text-anchor:middle}
.plot__tick--y{text-anchor:end}
.plot__dot{fill:var(--accent);opacity:.55}
.plot__dot--hi{fill:var(--accent-deep);opacity:1}
.plot__avg{stroke:var(--gold);stroke-width:1.5}
.plot__avg-l{font-family:var(--body);font-weight:400;font-size:10px;fill:#8A6D1F}
.cs__body h3{font-family:var(--display);font-weight:900;font-size:clamp(1.15rem,1.8vw,1.45rem);
  letter-spacing:-.02em;margin:0 0 .9rem}

/* what you get — centred, and the image held well short of full width so it
   reads as an object on the page rather than a band across it */
.toolkit{text-align:center}
/* This heading carries the offer now, so it runs at the same scale as "Case
   studies." rather than at the size of an ordinary section heading. Two sizes
   on the page, not three. */
.toolkit h2{font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.03em}
.toolkit h2{margin-inline:auto}
.toolkit .lede{margin-inline:auto;max-width:52ch}
.toolkit__img{display:block;width:min(880px,100%);height:auto;
  margin:clamp(2.2rem,5vw,3.4rem) auto 0}

/* ---------- trade hub ---------- */
.hub__up{margin:0 0 .9rem;font-size:.84rem}
.hub__up a{color:var(--accent-deep);border-bottom:1px solid rgba(27,107,74,.32)}
.hub__intro{max-width:min(68ch,100% - (var(--pad) * 2));margin-bottom:clamp(2rem,4vw,3rem)}
.hub__intro p{color:var(--ink-soft);font-size:1.07rem;line-height:1.72}
.hub__intro p + p{margin-top:1.15rem}
.hub__row{margin:0 0 clamp(1.4rem,3vw,2rem);font-size:.9rem;color:var(--ink-faint)}
.hub__row a{color:var(--accent-deep);border-bottom:1px solid rgba(27,107,74,.32)}

/* ---------- span line, ownership matrix, seat curve ---------- */
.spanline__rail{stroke:var(--hair-strong);stroke-width:2}
.spanline__dot{fill:var(--hair-strong)}
.spanline__dot.is-on{fill:var(--accent)}
.spanline__k{font-family:var(--body);font-weight:500;font-size:11.5px;fill:var(--ink)}
.spanline__per{font-family:var(--body);font-weight:400;font-size:10.5px;fill:var(--ink-soft)}
.spanline__sub{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-faint)}
.spanline__k--start{text-anchor:start}.spanline__k--middle{text-anchor:middle}.spanline__k--end{text-anchor:end}
.spanline__brace{stroke:var(--gold);stroke-width:1.5}
.spanline__brace-l{font-family:var(--body);font-weight:400;font-size:10.5px;fill:#8A6D1F;text-anchor:middle}

.own{margin-top:clamp(1.6rem,3vw,2.2rem);overflow-x:auto}
.own__head,.own__row,.own__caps{display:grid;grid-template-columns:15rem repeat(3,1fr);
  gap:.4rem .6rem;align-items:center;min-width:34rem}
.own__head p{margin:0;font-size:.76rem;font-weight:500;color:var(--ink);text-align:center;line-height:1.3}
.own__row{padding:.3rem 0;border-top:1px solid var(--hair)}
.own__k{margin:0;font-size:.8rem;color:var(--ink-soft)}
.own__k b{font-family:var(--display);font-weight:700;color:var(--ink);margin-right:.3rem}
.own__dot{width:14px;height:14px;border-radius:50%;display:block;margin:0 auto;background:var(--hair-strong)}
.own__dot--prod{background:var(--accent)}
.own__dot--pm{background:#4C5A51}
.own__dot--coord{background:#C6C9C0}
.own__dot--office{background:none;border:1.6px solid var(--ink-faint)}
.own__dot--super{background:#DDE4DC;
  background-image:repeating-linear-gradient(45deg,rgba(27,107,74,.6) 0 2px,transparent 2px 5px)}
.own__pair{display:flex;gap:2px;justify-content:center}
.own__pair .own__dot{width:9px;height:14px;border-radius:7px/50%;margin:0}
.own__caps{border-top:1px solid var(--hair);padding-top:.5rem;margin-top:.2rem}
.own__caps p{margin:0;font-size:.72rem;color:var(--ink-faint);text-align:center;line-height:1.35}
.own__key{margin-top:1rem}
.own__key .key__swatch{width:14px;height:14px;border-radius:50%}

.curve__pt{fill:var(--accent-deep)}
.curve__band{fill:var(--gold);opacity:.18}
.curve__band-l{font-family:var(--body);font-weight:400;font-size:10px;fill:#8A6D1F;text-anchor:end}
.curve__box rect{fill:var(--canvas-deep);stroke:var(--hair);stroke-width:1}
.curve__box text{font-family:var(--body);font-weight:400;font-size:9.5px;fill:var(--ink-soft);text-anchor:middle}

/* ---------- log ladder, strip plot, roster bars ---------- */
.ladder__rail{stroke:var(--hair-strong);stroke-width:2}
.ladder__rung{stroke:var(--ink-soft);stroke-width:3}
.ladder__k{font-family:var(--body);font-weight:500;font-size:11.5px;fill:var(--ink);text-anchor:end}
.ladder__v{font-family:var(--body);font-weight:400;font-size:11px;fill:var(--ink-soft)}
.ladder__ref{stroke:var(--accent);stroke-width:1;stroke-dasharray:4 4;opacity:.75}
.ladder__ref-l{font-family:var(--body);font-weight:500;font-size:10.5px;fill:var(--accent-deep);text-anchor:end}
.ladder__brace{stroke:var(--gold);stroke-width:2}
.ladder__brace-l{font-family:var(--body);font-weight:400;font-size:10.5px;fill:#8A6D1F}

.strip__d--on{fill:var(--accent)}
.strip__d--off{fill:var(--hair-strong)}
.strip__d--out{fill:none;stroke:var(--ink-soft);stroke-width:1.6}
.strip__pool{fill:var(--accent-deep)}
.strip__tag{font-family:var(--body);font-weight:400;font-size:9.5px;fill:var(--ink-faint);text-anchor:middle}
.strip__band{fill:var(--canvas-deep);opacity:.7}
.strip__band-l{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-faint);text-anchor:middle}
.strip__avg{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 3}
.strip__avg-l{font-family:var(--body);font-weight:500;font-size:10.5px;fill:var(--ink);text-anchor:middle}

.roster__bar{fill:var(--hair-strong)}
.roster__bar.is-on{fill:var(--accent)}
.roster__brace{stroke:var(--gold);stroke-width:2}
.roster__brace-l{font-family:var(--body);font-weight:400;font-size:10.5px;fill:#8A6D1F;text-anchor:end}

/* ---------- yardsticks, step jump, dumbbell ---------- */
.yard__dot{fill:var(--ink-soft)}
.yard__link{stroke:var(--ink-soft);stroke-width:2}
.yard__band{fill:#DDE4DC;background:none;
  fill-opacity:1;stroke:var(--hair-strong);stroke-width:1}
.yard__band.is-on{fill:var(--accent);fill-opacity:.8;stroke:none}
.yard__need{fill:var(--gold);opacity:.16}
.yard__need-l{font-family:var(--body);font-weight:500;font-size:10.5px;fill:#8A6D1F;text-anchor:middle}

.step__line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round}
.step__jump{stroke:var(--accent-deep);stroke-width:5;stroke-linecap:round}
.step__jump-l{font-family:var(--body);font-weight:500;font-size:11px;fill:var(--accent-deep)}
.step__band{fill:var(--canvas-deep);opacity:.75}
.step__band-l{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-faint);text-anchor:middle}

.dumb__bar{stroke:var(--hair-strong);stroke-width:3}
.dumb__lo{fill:var(--hair-strong)}
.dumb__hi{fill:var(--accent)}
.dumb__n{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-faint);text-anchor:middle}
.dumb__n--on{fill:var(--accent-deep);font-weight:500}

/* ---------- management cost post: dot ladder, staircase, tornado ---------- */
.dot__k{font-family:var(--body);font-weight:500;font-size:11.5px;fill:var(--ink);text-anchor:end}
.dot__n{font-family:var(--body);font-weight:400;font-size:9.5px;fill:var(--ink-faint);text-anchor:end}
.dot__link{stroke:var(--hair-strong);stroke-width:2}
.dot__wage{fill:var(--hair-strong)}
.dot__load{fill:var(--accent)}
.dot__v{font-family:var(--body);font-weight:500;font-size:11px;fill:var(--ink)}
.dot__mult{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-faint)}

.stair__step{fill:var(--accent)}
.stair__step--0{fill-opacity:.42}.stair__step--1{fill-opacity:.58}
.stair__step--2{fill-opacity:.76}.stair__step--3{fill-opacity:.95}
.stair__pc{font-family:var(--display);font-weight:900;font-size:17px;fill:var(--ink);text-anchor:middle}
.stair__d{font-family:var(--body);font-weight:500;font-size:11px;fill:#fff;text-anchor:middle}
.stair__d--dark{fill:var(--ink)}
.stair__k{font-family:var(--body);font-weight:400;font-size:10px;fill:var(--ink-soft);text-anchor:middle}
.stair__bench{fill:var(--canvas-deep);stroke:var(--hair);stroke-width:1}
.stair__bench-l{font-family:var(--body);font-weight:500;font-size:11px;fill:var(--ink-soft)}
.stair__break{font-family:var(--body);font-size:15px;fill:var(--hair-strong)}
.stair__brace{stroke:var(--gold);stroke-width:2}
.stair__brace-l{font-family:var(--body);font-weight:500;font-size:11px;fill:#8A6D1F}

.torn__lo{fill:var(--hair-strong)}
.torn__hi{fill:var(--accent);fill-opacity:.85}
.torn__base{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 3}
.torn__base-l{font-family:var(--body);font-weight:500;font-size:11px;fill:var(--ink);text-anchor:middle}

/* ---------- sales manager post: meters, heat grid, cash curves, lanes, swimlane ---- */
.hat{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2rem);margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (min-width:760px){.hat{grid-template-columns:1.35fr 1fr;align-items:center}}
.hat__row{display:grid;grid-template-columns:1fr 3rem;gap:.1rem .7rem;margin-bottom:1rem}
.hat__k{margin:0;grid-column:1;font-size:.84rem;color:var(--ink-soft)}
.hat__row.is-on .hat__k{color:var(--ink);font-weight:500}
.hat__pill{grid-column:1;display:block;height:14px;border-radius:999px;background:var(--canvas-deep);overflow:hidden}
.hat__fill{display:block;height:100%;border-radius:999px;background:var(--hair-strong)}
.hat__row.is-on .hat__fill{background:var(--accent)}
.hat__v{grid-column:2;grid-row:1 / span 2;margin:0;align-self:center;font-family:var(--display);
  font-weight:900;font-size:1.15rem;color:var(--ink);text-align:right}
.hat__inset{text-align:center}
.hat__boxes{position:relative;width:100%;max-width:230px;aspect-ratio:1;margin:0 auto}
.hat__box{position:absolute;left:0;bottom:0;border-radius:3px}
.hat__box--all{width:100%;height:100%;background:var(--canvas-deep);border:1px solid var(--hair)}
.hat__box--mgr{background:var(--accent)}
.hat__cap{margin:.8rem 0 0;font-size:.8rem;line-height:1.6;color:var(--ink-soft)}
.hat__cap b{font-family:var(--display);font-weight:900;color:var(--ink)}
.hat__cap--on{color:var(--accent-deep)}
.hat__note{margin:.3rem 0 0;font-size:.78rem;color:var(--ink-faint)}

.grid6{margin-top:clamp(1.6rem,3vw,2.2rem);overflow-x:auto}
.grid6__head,.grid6__body{display:grid;grid-template-columns:5.2rem repeat(3,1fr);gap:4px;min-width:23rem}
.grid6__head{margin-bottom:4px}
.grid__h{margin:0;text-align:center;font-size:.82rem;color:var(--ink);font-weight:500}
.grid__h span{display:block;font-size:.7rem;font-weight:400;color:var(--ink-faint)}
.grid__k{margin:0;align-self:center;font-size:.82rem;color:var(--ink-soft)}
.grid__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.6rem .2rem;border-radius:4px;font-size:.84rem;color:var(--ink);
  background:color-mix(in srgb, var(--accent) calc(var(--heat) * 78%), #F2F3EF)}
.grid__cell em{font-style:normal;font-size:.68rem;color:var(--ink-faint);margin-top:.15rem}
.grid__cell.is-ring{outline:2px solid var(--accent-deep);outline-offset:-2px}

.curve{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.curve--flat{stroke:var(--hair-strong)}
.curve--mid{stroke:#7E8C82}
.curve--peak{stroke:var(--accent);stroke-width:3}
.curve__l{font-family:var(--body);font-weight:500;font-size:11px}
.curve__l--flat{fill:var(--ink-faint)}.curve__l--mid{fill:#5E6B62}.curve__l--peak{fill:var(--accent-deep)}
.curve__zero{stroke:var(--ink);stroke-width:1.4}
.curve__under{fill:var(--canvas-deep);opacity:.5}
.curve__flag{font-family:var(--body);font-weight:500;font-size:11px;fill:var(--accent-deep);text-anchor:middle}
.curve__flag--off{fill:var(--ink-faint);font-weight:400;text-anchor:end}

.span__band{fill:var(--hair-strong)}
.span__band.is-on{fill:var(--accent)}
.span__whisk{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:2 3}
.span__dia{fill:var(--accent-deep)}
.span__note{font-size:9.5px;fill:var(--ink-faint)}
.span__guide{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:.55}

.swim{margin-top:clamp(1.6rem,3vw,2.2rem)}
.swim__scale{display:flex;justify-content:space-between;margin-left:5rem;font-size:.74rem;color:var(--ink-faint)}
.swim__lane{display:grid;grid-template-columns:5rem 1fr;gap:.8rem;align-items:center;margin-top:.5rem}
.swim__k{margin:0;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
.swim__track{position:relative;height:44px}
.swim__bar{position:absolute;left:var(--a);width:calc(var(--w) - 3px);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;padding:0 .5rem;border-radius:4px;overflow:hidden}
.swim__bar em{font-style:normal;font-size:.68rem;line-height:1.25;white-space:normal}
.swim__bar--solid{height:30px;background:var(--canvas-deep);color:var(--ink-soft)}
.swim__bar--light{height:24px;background:#EEF0EB;color:var(--ink-faint)}
.swim__bar--dot{height:20px;background:none;border:1px dashed var(--hair-strong);color:var(--ink-faint)}
.swim__bar--on1{height:24px;background:rgba(27,107,74,.3);color:var(--accent-deep)}
.swim__bar--on2{height:30px;background:rgba(27,107,74,.55);color:#fff}
.swim__bar--on3{height:38px;background:var(--accent);color:#fff}
.swim__marks{position:relative;margin:.6rem 0 0 5.8rem;height:2.6rem}
.swim__mark{position:absolute;left:var(--a);transform:translateX(-50%);width:7.5rem;text-align:center;
  font-size:.68rem;line-height:1.3;color:var(--ink-faint)}
.swim__mark i{display:block;width:9px;height:9px;margin:0 auto .3rem;background:var(--gold);transform:rotate(45deg)}
@media (max-width:620px){
  .swim__lane{grid-template-columns:3.6rem 1fr;gap:.5rem}
  .swim__scale{margin-left:4.1rem}
  .swim__marks{margin-left:4.1rem}
  .swim__bar em{font-size:.6rem}
  .swim__mark{width:5.5rem;font-size:.6rem}
}

/* ---------- lollipop, sales bench and capacity map ----------
   Built for the remodeling org chart post. Ghost icons carry the top of a
   range: a seat that may or may not exist should not look like one that does. */
.lolly{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,2vw,1.4rem);
  margin-top:clamp(1.8rem,3vw,2.4rem);align-items:end}
@media (min-width:760px){.lolly{grid-template-columns:repeat(5,1fr)}}
.lolly__col{display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
.lolly__fact{margin:0 0 2rem;font-size:.72rem;line-height:1.45;color:var(--ink-faint)}
/* The track is a fixed height so --h is a percentage of a known number. Sizing
   the stem against whatever space the text left over clamped the two tallest
   to the same height, which made $21.5M and $23.6M look identical. */
.lolly__track{position:relative;height:clamp(130px,19vw,200px)}
.lolly__stem{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:3px;height:var(--h);border-radius:2px;background:var(--hair-strong)}
.lolly__stem::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--hair-strong)}
.lolly__v{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translateX(-50%);
  font-style:normal;font-family:var(--display);font-weight:900;white-space:nowrap;
  font-size:clamp(.95rem,1.9vw,1.25rem);color:var(--ink);letter-spacing:-.02em}
.lolly__col.is-on .lolly__stem,.lolly__col.is-on .lolly__stem::before{background:var(--accent)}
.lolly__name{margin:.5rem 0 0;font-size:.8rem;color:var(--ink-soft)}

.bench{margin-top:clamp(1.6rem,3vw,2.2rem);display:grid;gap:clamp(1rem,2.2vw,1.5rem)}
.bench__row{display:grid;grid-template-columns:3.4rem 1fr;gap:.2rem .9rem;align-items:center}
.bench__k{margin:0;grid-row:span 2;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.bench__strip{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.bench__cap{margin:.15rem 0 0;font-size:.78rem;color:var(--ink-faint)}
.bench__i{width:.78rem;height:1.04rem;display:block;fill:var(--accent)}
.bench__p.is-ghost .bench__i{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.55}
.bench__gap{width:.9rem}
.bench__m{width:.9rem;height:.9rem;border-radius:2px;background:var(--gold);display:block}
.bench__m.is-ghost{background:none;border:1.2px solid var(--gold);opacity:.6}
.key__swatch--ghost{background:none;border:1.2px solid var(--accent);opacity:.6}
.key__swatch--mgr{background:var(--gold)}

.cap{display:grid;grid-template-columns:1fr;gap:clamp(1.3rem,3vw,2rem);margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (min-width:820px){.cap{grid-template-columns:1fr 1fr}}
.cap__panel svg{width:100%;height:auto;display:block;overflow:visible}
.cap__h{margin:0 0 .5rem;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.cap__cap{margin:.5rem 0 0;font-size:.8rem;color:var(--ink-faint)}
.cap__pm{fill:var(--accent);fill-opacity:.85}
.cap__lc{fill:var(--hair-strong)}
.cap__job{fill:#fff;stroke:var(--hair);stroke-width:1}
.cap__n{font-family:var(--body);font-weight:400;font-size:20px;fill:var(--ink-faint);text-anchor:middle}

/* ---------- buyer ladder, waffle grids and margin ruler ----------
   Built for the remodeling valuation post. SDE and EBITDA are different bases,
   so the SDE rungs are hatched rather than coloured: a reader skimming the
   chart should not read them as part of one scale. */
.lad__bar{fill:var(--accent);fill-opacity:.78}
.lad__bar--sde{fill:url(#sdeHatch);fill-opacity:1}
.lad__tick{stroke:var(--ink);stroke-width:2}
.lad__step{fill:none;stroke:var(--accent-deep);stroke-width:1.5}
.lad__ref{fill:var(--hair-strong)}
.lad__cut{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
.lad__cut-l{font-family:var(--body);font-weight:500;font-size:11px;fill:var(--accent-deep);text-anchor:middle}
/* two classes, so it beats the rule above whatever the source order */
.lad__cut-l.lad__cut-l--end{text-anchor:end}
.plot__row-v.lad__out{text-anchor:end}
.lad__need{fill:var(--accent);fill-opacity:.2}
.lad__below{fill:var(--canvas-deep);opacity:.55}

.waffle{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2rem);margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (min-width:620px){.waffle{grid-template-columns:repeat(3,1fr)}}
.waffle__h{margin:0 0 .6rem;font-size:.86rem;color:var(--ink-soft)}
.waffle__h b{font-family:var(--display);font-weight:700;color:var(--ink);margin-right:.3rem}
.waffle__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.waffle__sq{aspect-ratio:1;border-radius:1px;background:#8E938A}
.waffle__sq--o{background:#C6C9C0}
.waffle__sq--p{background:var(--accent)}
.waffle__sum{margin:.7rem 0 0;font-size:.8rem;color:var(--ink-faint)}
.waffle__v{margin:.1rem 0 0;font-family:var(--display);font-weight:900;
  font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--ink);letter-spacing:-.02em}
.key__swatch--oh{background:#C6C9C0}
.key__swatch--cos{background:#8E938A}
.key__swatch--sde{background:#DDE4DC;
  background-image:repeating-linear-gradient(45deg,rgba(27,107,74,.55) 0 2px,transparent 2px 5px)}

/* ---------- glass bubble chart ----------
   Translucent spheres: a radial gradient for the body, a soft white ellipse
   offset up and left for the specular highlight, a thin gold rim, and a blurred
   cast shadow beneath. Overlaps read through each other, which is the point. */
.bub{transition:transform .5s var(--ease)}
.bub:hover{transform:translateY(-3px)}
.bub__body{fill:url(#glass)}
.bub__rim{fill:none;stroke:var(--gold);stroke-opacity:.5;stroke-width:1}
.bub__shine{fill:url(#shine)}
.bub__cast{fill:#12523A;opacity:.20}
.bub__grid{stroke:var(--hair);stroke-width:1;stroke-dasharray:2 5}
.bub__axis{stroke:var(--hair-strong);stroke-width:1}
.bub__avg{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 4}
.bub__avg-l{font-family:var(--mono);font-size:8.5px;fill:#8A6D1F}
.bub__tick{font-family:var(--mono);font-size:8.5px;fill:var(--ink-faint);text-anchor:middle}
.bub__tick--y{text-anchor:end}
.bub__lab{font-family:var(--body);font-weight:400;font-size:9.5px;fill:var(--ink-soft);text-anchor:middle}
.bub__ax{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:.6rem 0 0}

/* glass capsules for the leads chart */
.cap__track{fill:var(--hair);opacity:.5}
.cap__fill{fill:url(#capGrad)}
.cap__rim{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:.8}
.cap__gloss{fill:#fff;opacity:.28}
.bub__lab--in{fill:#fff;font-weight:500;font-size:10.5px;
  paint-order:stroke;stroke:#12523A;stroke-width:2.5px;stroke-opacity:.35;stroke-linejoin:round}

/* ---------- stat cards ----------
   Pale, near-white, the number doing the work. One accent, used once. */
.figs{display:grid;gap:clamp(.9rem,1.6vw,1.2rem);grid-template-columns:1fr;margin-top:clamp(2.2rem,4vw,3rem)}
@media (min-width:640px){.figs{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{background:#fff;border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.3rem,2.2vw,1.7rem);display:flex;flex-direction:column;min-height:190px}
.fig__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.4rem}
.figs .fig__k{font-size:.84rem;color:var(--ink);margin:0;line-height:1.3}
/* Chips and axis labels split on purpose: a chip carries a phrase in the
   brand's voice and gets Playfair, while anything labelling a bar or a scale
   gets Sora, where legibility at 12px is the only job. */
.fig__pill{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:0;
  color:var(--ink-faint);background:var(--canvas-deep);padding:.26rem .68rem;border-radius:999px;white-space:nowrap}
.fig__pill--good{color:var(--accent-deep);background:rgba(46,140,99,.12)}
.figs .fig__v{font-family:var(--body);font-weight:300;font-size:clamp(2.6rem,4.6vw,3.6rem);
  line-height:.92;letter-spacing:-.045em;color:var(--ink);margin:0}
.figs .fig__v .u{font-size:.42em;font-weight:400;letter-spacing:-.01em;margin-left:.12em;color:var(--ink-soft)}
.fig__scale{margin-top:auto;padding-top:1.5rem}
.fig__mark{font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:0;
  color:var(--ink-soft);display:block;margin-bottom:.45rem}
.fig__track{position:relative;height:4px;border-radius:2px;background:var(--canvas-deep)}
.fig__span{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--hair-strong)}
.fig__dot{position:absolute;top:-4px;width:2px;height:12px;border-radius:1px;background:var(--ink)}
.fig__ends{display:flex;justify-content:space-between;margin-top:.5rem}
.fig__ends span{font-family:var(--body);font-weight:400;font-size:.76rem;letter-spacing:0;color:var(--ink-faint)}
/* Three across from 760px; one column before that rather than two and an orphan. */
@media (min-width:640px){.figs.figs--3{grid-template-columns:1fr}}
@media (min-width:760px){.figs.figs--3{grid-template-columns:repeat(3,1fr)}}
.fig__orb{display:block;width:100%;max-width:150px;height:auto;margin:-.5rem auto -.8rem}

/* pale glass orb — white, not green */
.orb__body{fill:url(#orbGlass)}
.orb__rim{fill:none;stroke:#D4D8D2;stroke-width:1}
.orb__shine{fill:url(#orbShine)}
.orb__cast{fill:#141711;opacity:.10}
.orb__v{font-family:var(--body);font-weight:300;font-size:44px;letter-spacing:-.04em;
  fill:var(--ink);text-anchor:middle}
.orb__k{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.01em;fill:var(--ink-faint);text-anchor:middle}
.orb__ring{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;opacity:.9}
.orb__ringbg{fill:none;stroke:var(--hair);stroke-width:3}

/* case study hero: copy left, the client's own site right */
.cs__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.cs__grid{grid-template-columns:1.05fr .95fr}}
.cs__shot{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(20,23,17,.14);
  max-width:420px;width:100%;justify-self:center}
.cs__shot img{display:block;width:100%;height:auto}
.evidence + .evidence{margin-top:1.4rem}

/* ---------- legal ----------
   Small print, but not hidden: it sits on a light ground above the footer at a
   readable size rather than 9px grey on grey. */
.legal{background:var(--canvas-deep);padding:clamp(2.2rem,4vw,3rem) 0}
.legal__h{font-weight:500;font-size:.84rem;color:var(--ink);margin:0 0 .9rem}
.legal p{font-size:.78rem;line-height:1.7;color:var(--ink-soft);margin:0 0 .9rem;max-width:88ch}
.legal p:last-child{margin-bottom:0}
/* Shots with a bright sky behind the label. The veil gets most of the way there
   (10:1 over the dark parts) but gaps of sky still measure about 1.4:1, so the
   type also carries a tighter shadow. A gradient cannot fix a varied backdrop;
   a shadow travels with the glyph. */
.kase--bright .kase__veil{
  background:linear-gradient(to bottom,rgba(20,23,17,.86) 0%,rgba(20,23,17,.46) 22%,rgba(20,23,17,0) 48%)}
.kase--bright .kase__label{
  text-shadow:0 1px 2px rgba(20,23,17,.9), 0 2px 10px rgba(20,23,17,.75), 0 0 22px rgba(20,23,17,.5)}

/* ---------- 404 ----------
   Built like the hero: he fills the screen, a wash of canvas keeps the words
   readable over him, the copy sits on top. Served at whatever address was
   missed, so every link and asset in the page is absolute. */
.e404{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate}
.e404__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--canvas)}
/* The scene was composed with the bath centre right and the sky and marble
   floor left of it, which is where the copy sits. Holding the left edge keeps
   the words over the empty part and pushes him clear of them. */
.e404__vid{width:100%;height:100%;display:block;object-fit:cover;object-position:8% 52%}
/* Barely there. The scene is white marble and the words are ink, so they read
   without washing him out: a little canvas under the nav, a little under the
   button, and the words carry their own soft halo instead of a full wash. */
.e404__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(247,247,245,.72) 0%,rgba(247,247,245,0) 13%),
    linear-gradient(to top,rgba(247,247,245,.45) 0%,rgba(247,247,245,0) 16%);
}
/* The words sit on their own pool of light rather than a wash over the whole
   picture: canvas, not grey, strongest where the copy is and gone by halfway,
   so the bath and the boulder stay as bright as they were. */
.e404__focus{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(247,247,245,.92) 0%,rgba(247,247,245,.86) 22%,
    rgba(247,247,245,.55) 42%,rgba(247,247,245,0) 62%)}
.e404__inner{text-shadow:0 1px 10px rgba(247,247,245,.8)}
/* The halo is for ink on marble. On a solid green button it just fogs the
   label, so the button keeps its own clean type. */
.e404__inner .btn{text-shadow:none}
/* The button takes the same tall face as the number, so the page has one voice
   top to bottom. Bebas only draws capitals, so it wants a larger size and a
   little letter spacing to carry the same weight as the body face would. */
.e404 .hero__cta .btn{font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.5rem;line-height:1;letter-spacing:.05em;padding:.72em 1.6em}
.e404 .hero__cta .btn__arrow{width:1em;height:1em}
.e404__inner{position:relative;z-index:2;width:min(1240px,100% - (var(--pad) * 2));margin-inline:auto;padding:calc(var(--nav-h) + 1rem) 0 2rem}
/* Set like the hero: the tall face carries the number, the italic carries the
   line under it, and the rest reads as body copy with the button beneath. */
.e404 h1{margin:0 0 1rem}
/* The number is the loudest thing on the page, three times the size it takes
   on the homepage, and the line under it reads at twice the hero's body size.
   The copy block widens to match so the paragraph does not run to six lines. */
.e404 .h1-hit{color:var(--ink);font-size:min(4.14em,30vw);margin-bottom:.06em}
.e404 .hero__copy{max-width:56rem}
.e404 .hero__sub{margin:0 0 .7rem;max-width:none}
/* Set in the heavier weight so it holds up against the marble behind it, and
   sitting low enough that every line lands on the floor rather than the bath. */
.e404 .hero__sub p{font-size:clamp(1.5rem,2.16vw,2rem);line-height:1.4;font-weight:500}
.e404__num{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(5rem,17vw,8.5rem);
  line-height:.85;letter-spacing:.03em;color:var(--accent);margin:0}

/* The bottom block is set in Bebas: it only draws capitals, so it wants a
   little letter spacing and a larger size than the body face to hold the same
   weight of voice. */
.e404__bottom{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.045em}
.e404__line{color:var(--ink);font-size:clamp(1.25rem,4.4vw,1.5rem);line-height:1.2;margin:1rem 0 0}
.e404__strong{margin:1.4rem 0 0;font-size:clamp(1.45rem,5vw,1.75rem);line-height:1.15;color:var(--ink)}
.e404 .sec-cta{margin-top:clamp(1.6rem,3.5vw,2.4rem)}
/* Desktop: the number and the heading ride the top of the shot, the rest sits
   on the rocks at the bottom where the marble is bright and busy, so it takes
   a heavier, larger setting. */
@media (min-width:701px){
  .e404{align-items:stretch}
  .e404{align-items:flex-end}
  .e404__inner{padding:calc(var(--nav-h) + .5rem) 0 clamp(1.4rem,4vh,2.8rem)}
  .e404__bottom .e404__line{font-size:clamp(1.45rem,1.9vw,1.85rem);line-height:1.22}
  .e404__strong{font-size:clamp(1.7rem,2.3vw,2.2rem)}
}
/* A phone crops the scene to a tall slice, which puts him behind the words.
   The copy drops to the lower half so his head and the curtain stay clear. */
@media (max-width:700px){
  .e404{align-items:flex-end}
  .e404__inner{padding:0 0 clamp(2.2rem,7vh,4rem)}
  /* A tall slice off a wide scene: hold the bath high in the frame so he is
     visible, and let the marble floor fill the bottom where the words go. */
  .e404__vid{object-position:44% 40%}
  .e404__focus{background:linear-gradient(to top,
    rgba(247,247,245,.94) 0%,rgba(247,247,245,.88) 34%,
    rgba(247,247,245,.5) 52%,rgba(247,247,245,0) 68%)}
  .e404__scrim{background:
    linear-gradient(to bottom,rgba(247,247,245,.7) 0%,rgba(247,247,245,0) 15%),
    linear-gradient(to top,rgba(247,247,245,.6) 0%,rgba(247,247,245,0) 34%)}
  /* A phone crops to a tall slice, so his snorkel comes up behind the copy.
     The halo tightens and the lines take full ink rather than washing him out
     with another layer of canvas. */
  .e404__inner{text-shadow:0 1px 3px rgba(247,247,245,.95),0 1px 12px rgba(247,247,245,.98),0 0 26px rgba(247,247,245,.9)}
  .e404__line{color:var(--ink)}   /* phones: full ink over the busier crop */
}

/* ---------- blog ----------
   Reading column is about 68 characters. Graphics and the post's own tables
   break out wider than the text, centred on it, and each one scrolls inside
   itself on a phone rather than pushing the page sideways. */
.post__head{padding-bottom:clamp(1.6rem,4vw,2.4rem)}
.post__kicker{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .9rem}
.post__kicker a{color:var(--accent);text-decoration:none}
.post__kicker a:hover{text-decoration:underline}
.post__meta{font-size:.9rem;color:var(--ink-soft);margin:1rem 0 0}
.post__body{width:min(68ch,100% - (var(--pad) * 2));padding-bottom:clamp(2rem,5vw,3rem)}
.post__body > * + *{margin-top:1.15rem}
.post__body h2{font-size:clamp(1.55rem,2.8vw,2.1rem);line-height:1.12;margin-top:clamp(2.6rem,5vw,3.6rem)}
.post__body h3{font-size:clamp(1.15rem,1.7vw,1.32rem);line-height:1.2;margin-top:clamp(1.8rem,3.4vw,2.4rem)}
.post__body > p,.post__body > ul > li,.post__body > ol > li{color:var(--ink-soft);font-size:1.07rem;line-height:1.72}
.post__body > p strong,.post__body > ul strong,.post__body > ol strong{color:var(--ink);font-weight:500}
.post__body em{font-style:italic}
/* Prose links. The global rule is a{color:inherit;text-decoration:none}, so a
   link inside a paragraph takes the body colour and disappears. Until this post
   there was almost no inline linking, so it never showed. */
.post__body a{color:var(--accent-deep);border-bottom:1px solid rgba(27,107,74,.32);
  transition:border-color .3s var(--ease)}
.post__body a:hover,.post__body a:focus-visible{border-bottom-color:var(--accent)}
.post__lead{font-size:clamp(1.14rem,1.6vw,1.3rem);line-height:1.5}
.post__lead strong{font-weight:500}
.post__body > ul,.post__body > ol{padding-left:1.25rem}
.post__body > ul > li + li,.post__body > ol > li + li{margin-top:.6rem}
.post__body > ul{list-style:disc}
.post__body > ol{list-style:decimal}
.post__body hr{border:0;border-top:1px solid var(--hair);margin-top:clamp(2.4rem,5vw,3.4rem)}
.post__sources{font-size:.85rem;line-height:1.72;color:var(--ink-faint)}
.post__sources strong{color:var(--ink-faint);font-weight:500}

/* tables: header rule, row dividers, figures that line up */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.post__body table,.gfx table{width:100%;border-collapse:collapse;font-size:.97rem;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.post__body th,.gfx th{text-align:left;font-weight:500;color:var(--ink);padding:.7rem .9rem .7rem 0;
  border-bottom:2px solid var(--hair-strong);white-space:nowrap}
.post__body td,.gfx td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--hair);color:var(--ink-soft);vertical-align:top}
.post__body tbody tr:last-child td{border-bottom:0}

/* the wider band for graphics and the post's own tables */
.post__body > .tablewrap,.post__body > .gfx{width:min(1040px,100vw - (var(--pad) * 2));margin-left:50%;transform:translateX(-50%)}
.post__body > .tablewrap{margin-top:clamp(1.4rem,3vw,2rem)}

/* ---------- blog index ---------- */
.band--tight{padding-top:clamp(1rem,3vw,2rem)}
.posts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,2.5vw,1.8rem)}
@media (min-width:860px){.posts{grid-template-columns:repeat(2,1fr)}}
.postcard{background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.4rem,2.6vw,2rem);box-shadow:0 18px 44px rgba(20,23,17,.05)}
.postcard__meta{display:flex;gap:.8rem;align-items:center;font-size:.78rem;color:var(--ink-faint);margin:0}
.postcard__cat{background:var(--accent-muted);color:var(--accent-deep);border-radius:999px;padding:.25em .8em;letter-spacing:.04em}
.postcard__title{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;margin:.9rem 0 0}
.postcard__title a{color:var(--ink);text-decoration:none}
.postcard__title a:hover{color:var(--accent)}
.postcard__excerpt{color:var(--ink-soft);font-size:1.02rem;line-height:1.62;margin:.8rem 0 0}
.postcard__more{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-size:.88rem;color:var(--accent);text-decoration:none}
.postcard__more:hover{text-decoration:underline}
.postcard__more .btn__arrow{width:1em;height:1em}

/* ---------- graphics ---------- */
.gfx{margin:clamp(2rem,4.5vw,3rem) 0 0;padding:clamp(1.2rem,2.6vw,1.9rem);
  background:var(--panel);border:1px solid var(--hair);border-radius:16px}
.gfx__title{font-family:var(--display);font-weight:900;font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--ink);margin-bottom:1.2rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.gfx__sample{font-family:var(--body);font-weight:400;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--hair-strong);border-radius:999px;padding:.2em .7em}
.gfx ul,.gfx ol{list-style:none;margin:0;padding:0}
.gfx p,.gfx li,.gfx dd,.gfx dt{line-height:1.4}
.gfx__note{font-size:.76rem;line-height:1.6;color:var(--ink-faint);margin:1.1rem 0 0}
.gfx__cap{font-size:.9rem;color:var(--ink-soft);margin:1.2rem 0 0;text-align:center}

/* 1. the volume jump */
.vol{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.vol{grid-template-columns:repeat(3,1fr)}}
.vol__col{border:1px solid var(--hair);border-radius:12px;padding:1.1rem}
.vol__col--peak{border-color:var(--accent);background:var(--accent-muted)}
.vol__rev{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1;margin:0 0 .9rem;color:var(--ink)}
.vol__col--peak .vol__rev{color:var(--accent-deep)}
.vol__stats{margin:0}
.vol__stats > div + div{margin-top:.75rem}
.vol__stats dt{font-size:.74rem;letter-spacing:.03em;color:var(--ink-faint);margin:0}
.vol__stats dd{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.1;margin:.15rem 0 0;color:var(--ink);font-variant-numeric:tabular-nums}
.vol__barh{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:1.6rem 0 .7rem}
.vol__bars{display:grid;gap:.55rem}
.vol__bar{display:grid;grid-template-columns:3.2rem 1fr 2.2rem;align-items:center;gap:.7rem}
.vol__barkey{font-size:.82rem;color:var(--ink-soft)}
.vol__track{background:var(--canvas-deep);border-radius:999px;height:12px;display:block}
.vol__fill{display:block;height:100%;border-radius:999px;background:var(--hair-strong)}
.vol__bar--peak .vol__fill{background:var(--accent)}
.vol__barval{font-size:.85rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* 2. hub and spoke */
.hub{display:grid;gap:1rem;align-items:center;grid-template-columns:1fr}
@media (min-width:760px){.hub{grid-template-columns:1fr auto 1fr;gap:2.4rem}}
.hub__core{font-family:var(--display);font-weight:900;font-size:1.25rem;color:#fff;background:var(--accent);
  border-radius:50%;width:9rem;height:9rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto;text-align:center;order:-1}
@media (min-width:760px){.hub__core{order:0}}
.hub__side{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.hub__box{position:relative;border:1px solid var(--hair-strong);border-radius:10px;background:var(--canvas);
  padding:.7rem 1rem;font-size:.92rem;color:var(--ink);text-align:center}
.hub__box::before{content:"\2191";display:block;font-size:.8rem;color:var(--ink-faint);line-height:1}
@media (min-width:760px){
  .hub__side--left{text-align:right}
  .hub__box::before{display:none}
  .hub__box::after{content:"";position:absolute;top:50%;width:2.4rem;height:1px;background:var(--hair-strong)}
  .hub__side--left .hub__box::after{left:100%;
    background:linear-gradient(to right,var(--hair-strong) 70%,transparent 70%),
      linear-gradient(to right,transparent 70%,var(--hair-strong) 70%);}
  .hub__side--left .hub__box{box-shadow:none}
  .hub__side--right .hub__box::after{right:100%}
}
/* arrowheads pointing in at the owner */
@media (min-width:760px){
  .hub__side--left .hub__box::after{background:var(--hair-strong);
    clip-path:polygon(0 40%,70% 40%,70% 0,100% 50%,70% 100%,70% 60%,0 60%);height:10px;margin-top:-5px}
  .hub__side--right .hub__box::after{background:var(--hair-strong);
    clip-path:polygon(100% 40%,30% 40%,30% 0,0 50%,30% 100%,30% 60%,100% 60%);height:10px;margin-top:-5px}
}

/* 3. the hire sequence */
.seq__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.seq{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.seq__step{position:relative;padding-left:1.6rem}
.seq__step::before{content:"";position:absolute;left:5px;top:.55rem;bottom:-1.1rem;width:2px;background:var(--hair)}
.seq__step:last-child::before{display:none}
.seq__dot{position:absolute;left:0;top:.35rem;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.seq__rev{font-size:.75rem;letter-spacing:.05em;color:var(--ink-faint);margin:0}
.seq__role{font-size:.95rem;color:var(--ink);font-weight:500;margin:.15rem 0 0}
.seq__flag{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);
  background:var(--accent-muted);border-radius:999px;padding:.2em .65em;margin-left:.5rem;white-space:nowrap}
.seq__trigger{font-size:.82rem;color:var(--ink-soft);margin:.3rem 0 0;line-height:1.45}
@media (min-width:860px){
  .seq{grid-auto-flow:column;grid-auto-columns:1fr;gap:0;min-width:1000px;position:relative;padding-top:2.6rem}
  .seq::before{content:"";position:absolute;left:0;right:0;top:3.3rem;height:2px;background:var(--hair)}
  .seq__step{padding:0 .55rem}
  .seq__role{font-size:.9rem}
  .seq__trigger{font-size:.78rem}
  .seq__step::before{display:none}
  .seq__rev{min-height:1.2rem}
  .seq__dot{position:relative;left:auto;top:auto;display:block;margin:.45rem 0 .9rem}
  .seq__flag{display:block;margin:.35rem 0 0;width:max-content}
}

/* 4. the $20M org chart */
.tree{text-align:center}
.tree__top,.tree__gm{display:block;width:max-content;margin:0 auto;border-radius:10px;padding:.7rem 1.4rem;
  font-size:.98rem;font-weight:500;position:relative}
.tree__top{background:var(--accent);color:#fff}
.tree__gm{background:var(--canvas);border:1px solid var(--hair-strong);color:var(--ink);margin-top:2rem}
.tree__top::after,.tree__gm::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:2rem;background:var(--hair-strong)}
.tree__row{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem;position:relative}
@media (min-width:900px){
  .tree__row{grid-template-columns:repeat(4,1fr)}
  .tree__row::before{content:"";position:absolute;left:12.5%;right:12.5%;top:-1rem;height:1px;background:var(--hair-strong)}
  .tree__dept::before{content:"";position:absolute;left:50%;top:-1rem;width:1px;height:1rem;background:var(--hair-strong)}
}
.tree__dept{position:relative;border:1px solid var(--hair);border-radius:12px;background:var(--canvas);
  padding:1rem;text-align:left}
.tree__deptname{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.tree__lead{font-size:.98rem;font-weight:500;color:var(--ink);margin:.4rem 0 0}
.tree__under{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.3rem}
.tree__under li{font-size:.85rem;color:var(--ink-soft);padding-left:.85rem;position:relative}
.tree__under li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:1px;background:var(--hair-strong)}
.tree__num{font-size:.76rem;color:var(--ink-faint);margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--hair)}

/* 5. overhead steps, gross profit climbs */
.chart__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart{display:block;width:100%;min-width:720px;height:auto}
.chart__grid line{stroke:var(--hair);stroke-width:1}
.chart__axis{stroke:var(--hair-strong);stroke-width:1.5}
.chart__band{fill:var(--accent-muted)}
.chart__gap{fill:rgba(180,145,63,.12)}
.chart__gp{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.chart__oh{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:square}
.chart text{font-family:var(--body);font-size:13px;fill:var(--ink-soft)}
.chart__ylab text,.chart__xlab text{font-size:12px;fill:var(--ink-faint)}
.chart__steplab text{font-size:12px;fill:var(--ink)}
.chart__note{font-size:13px;fill:var(--accent-deep)}
.chart__note--mid{fill:var(--gold)}
.chart__callout line{stroke:var(--hair-strong);stroke-width:1}
.chart__callout text{font-size:11.5px;fill:var(--ink-faint)}
.chart__keyband{fill:var(--accent-muted);stroke:var(--accent);stroke-width:1}
.chart__keyline{stroke:var(--ink);stroke-width:2.2}

/* 6. weekly scorecard */
.kpi{min-width:820px;font-size:.88rem}
.kpi th[scope="row"]{font-weight:500;white-space:nowrap;padding-right:1rem}
.kpi__now{color:var(--ink);font-weight:500;white-space:nowrap}
.kpi__prev{white-space:nowrap}
.kpi__spark{width:84px;height:24px;display:block}
.kpi__spark polyline{fill:none;stroke:var(--ink-faint);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.kpi__pill{display:inline-block;border-radius:999px;padding:.22em .75em;font-size:.74rem;white-space:nowrap}
.kpi__pill--good{background:rgba(46,125,50,.12);color:#2E7D32}
.kpi__pill--watch{background:rgba(183,121,31,.14);color:#8A5A0F}
.kpi__pill--off{background:rgba(179,38,30,.11);color:#B3261E}

/* 7. same company, different org chart */
.val{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.6rem,2vw,1.6rem);align-items:end;text-align:center}
.val__bar{display:flex;flex-direction:column;justify-content:flex-end}
.val__track{height:clamp(8rem,22vw,13rem);display:flex;align-items:flex-end}
.val__amount{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,3vw,2rem);line-height:1;margin:0 0 .6rem;color:var(--ink)}
.val__bar--peak .val__amount{color:var(--accent-deep)}
.val__stack{width:100%;background:var(--hair-strong);border-radius:8px 8px 0 0}
.val__bar--peak .val__stack{background:var(--accent)}
.val__label{font-size:.85rem;color:var(--ink);margin:.7rem 0 0}
.val__mult{font-size:.76rem;color:var(--ink-faint);margin:.2rem 0 0}
.val__delta{align-self:center;font-family:var(--display);font-weight:900;font-size:clamp(1rem,2vw,1.35rem);
  color:var(--gold);margin:0;line-height:1.2}
.val__delta span{display:block;font-family:var(--body);font-weight:400;font-size:.72rem;color:var(--ink-faint);margin-top:.3rem;max-width:8rem}

/* ---------- figures read as figures ----------
   Playfair sets old-style numerals by default, which turns $20M into $2oM.
   Every heading and every number the site prints uses lining figures, and the
   ones in tables stay tabular so columns line up. */
h1,h2,h3,h4,
.vol__rev,.vol__stats dd,.val__amount,.val__delta,.seq__rev,.stat__n,.fig__n,.orb__n,
.kase__stats dt,.cs__figs dt,.postcard__title,.post__lead,.hub__core,.e404__num{
  font-variant-numeric:lining-nums proportional-nums;
  font-feature-settings:"lnum" 1,"onum" 0;
}
.post__body,.gfx{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0}
.post__body table,.gfx table{font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"onum" 0,"tnum" 1}

/* ---------- the header keeps its own ground on small screens ----------
   The lifted capsule only covers its own width, so on a phone the page used to
   run under the logo and the button. Below the capsule's breakpoint the bar
   takes the page's own background and a hairline once scrolled. */
@media (max-width:900px){
  .nav.is-lifted{background:var(--canvas);border-bottom:1px solid var(--hair)}
  .nav.is-lifted .nav__inner{background:transparent;border-color:transparent;box-shadow:none;
    backdrop-filter:none;max-width:100%;padding:.45rem 0}
}

/* ---------- the overhead chart fits a phone ----------
   It used to need sideways scrolling and cut the label off. Now the drawing
   scales to the container and the labels swap to short forms, sized up so they
   survive being scaled down with the rest of the picture. */
.chart .sm{display:none}
@media (max-width:760px){
  .chart{min-width:0}
  .chart .lg{display:none}
  .chart .sm{display:inline}
  .chart text{font-size:29px}
  .chart__ylab text,.chart__xlab text{font-size:27px}
  .chart__steplab text{font-size:27px}
  .chart__note{font-size:29px}
  .chart__callout text{font-size:28px}
  .chart__key text{font-size:27px}
}

/* ---------- entrances are an enhancement, never a gate ----------
   Sections start visible. The page script marks the document once it is ready
   to animate, and only then does anything wait to be scrolled into view, so a
   fast scroll, a link preview or a stalled script can never leave a blank. */
.rise{opacity:1;transform:none}
.js-anim .rise:not(.is-in){opacity:0;transform:translateY(20px)}
/* The hero's lines are revealed by the wrapper around them, which carries
   is-in from the start, so the guard above must not outrank that. */
.js-anim .is-in .rise,.js-anim .rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .rise:not(.is-in){opacity:1;transform:none}
}

/* the org chart's top two seats carry what they actually do */
.tree__box{display:block;width:min(22rem,100%);margin:0 auto;border-radius:10px;padding:.7rem 1.1rem;position:relative}
.tree__box--top{background:var(--accent);color:#fff}
.tree__box--gm{background:var(--canvas);border:1px solid var(--hair-strong);color:var(--ink);margin-top:2rem}
.tree__box::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:2rem;background:var(--hair-strong)}
.tree__role{font-size:.98rem;font-weight:500;margin:0}
.tree__does{font-size:.8rem;margin:.25rem 0 0;opacity:.85}
.tree__box--top .tree__does{color:rgba(255,255,255,.88);opacity:1}
.tree__box--gm .tree__does{color:var(--ink-soft)}
/* the scorecard's reading column */
.kpi__reveals{color:var(--ink-faint);min-width:13rem}

/* ---------- the profit post: action steps, numbered steps, four drawings ----
   Every drawing here scales to its container: the viewBox does the work and the
   labels swap to short forms on a phone, so nothing needs sideways scrolling.
   Only the KPI sheet scrolls, and it scrolls inside its own box.
   Colours are set on the drawing and inherited, so a single class on a label is
   enough to override one. */

/* "How:" and the bullets under it: the lever's action steps */
.how{border-left:3px solid var(--accent);background:var(--accent-muted);
  border-radius:0 12px 12px 0;padding:1rem 1.2rem 1.05rem}
.how__label{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  color:var(--accent-deep);margin:0 0 .6rem}
.how__list{list-style:none;margin:0;padding:0}
.how__list li{position:relative;padding-left:1.3rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.62}
.how__list li + li{margin-top:.62rem}
.how__list li::before{content:"";position:absolute;left:.15rem;top:.68em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.8}
.how__list strong{color:var(--ink);font-weight:500}

/* a numbered process, set as steps */
.post__body > ol.steps{list-style:none;padding-left:0;counter-reset:step}
.post__body > ol.steps > li{counter-increment:step;position:relative;padding-left:3rem;
  color:var(--ink-soft);font-size:1.07rem;line-height:1.72}
.post__body > ol.steps > li + li{margin-top:1rem}
.post__body > ol.steps > li::before{content:counter(step);position:absolute;left:0;top:.05em;
  width:2rem;height:2rem;border-radius:50%;background:var(--panel);border:1px solid var(--accent);
  color:var(--accent-deep);font-family:var(--display);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1,"onum" 0}

/* the drawings: one scale, no minimum width */
.plot{display:block;width:100%;height:auto;fill:var(--ink-soft)}
.plot text{font-family:var(--body);font-size:14px}
.plot .sm{display:none}
.plot .plot__axis{stroke:var(--hair-strong);stroke-width:1.5;fill:none}
.plot .plot__grid line{stroke:var(--hair);stroke-width:1}
.plot .plot__xlab text,.plot .plot__ylab text{font-size:13px;fill:var(--ink-faint)}

/* 1. same revenue, double the profit */
.plot .plot__bar--flat{fill:var(--hair-strong)}
.plot .plot__bar--peak{fill:var(--accent)}
.plot .plot__val{font-size:15px;fill:var(--ink)}
.plot .plot__val--peak{fill:var(--accent-deep)}
.plot .plot__brace{fill:none;stroke:var(--gold);stroke-width:1.4}
.plot .plot__gap{font-size:15px;fill:var(--gold)}
.key{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.1rem 0 0;padding:0}
.key__item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-soft)}
.key__swatch{width:1.1rem;height:.62rem;border-radius:2px;flex:none}
.key__swatch--flat{background:var(--hair-strong)}
.key__swatch--peak{background:var(--accent)}

/* 2. the levers, as a waterfall */
.plot .wf__bar--flat{fill:var(--hair-strong)}
.plot .wf__bar--step{fill:var(--gold)}
.plot .wf__bar--peak{fill:var(--accent)}
.plot .wf__link{stroke:var(--hair-strong);stroke-width:1.2;stroke-dasharray:4 4;fill:none}
.plot .wf__lab{fill:var(--ink)}
.plot .wf__pts{fill:var(--accent-deep)}
.plot .wf__in{fill:var(--ink)}
.plot .wf__in--on{fill:#FFFFFF}

/* 3. price, the lever without a ceiling */
.plot .pc__band{fill:var(--accent-muted)}
.plot .pc__bandlab{font-size:13px;fill:var(--accent-deep)}
.plot .pc__line{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.plot .pc__dot{fill:var(--accent)}
.plot .pc__star{fill:var(--gold);stroke:var(--panel);stroke-width:2.5}
.plot .pc__starlab{font-size:14px;fill:var(--gold)}
.plot .pc__lab{font-size:14px;fill:var(--accent-deep)}
.plot .pc__onlab{font-size:13px;fill:var(--ink-faint)}

/* 6. what a price rise can afford to lose */
.hbars{display:grid;gap:.9rem}
.hbars__row{display:grid;grid-template-columns:minmax(0,1fr) 3.4rem;
  grid-template-areas:"key val" "bar bar";gap:.35rem .8rem;align-items:center}
@media (min-width:620px){
  .hbars__row{grid-template-columns:9.5rem minmax(0,1fr) 3.4rem;
    grid-template-areas:"key bar val";gap:.9rem}
}
.hbars__key{grid-area:key;font-size:.92rem;color:var(--ink);margin:0}
.hbars__track{grid-area:bar;background:var(--canvas-deep);border-radius:999px;height:14px;display:block}
.hbars__fill{display:block;height:100%;border-radius:999px;background:var(--accent)}
.hbars__val{grid-area:val;margin:0;text-align:right;font-family:var(--display);font-weight:700;
  font-size:1.1rem;color:var(--accent-deep);font-variant-numeric:lining-nums proportional-nums}

/* 5. the margin scorecard */
.kpi--margin{min-width:640px}
.kpi--margin th[scope="row"]{white-space:normal;min-width:13rem;line-height:1.35}
@media (max-width:760px){.kpi--margin th[scope="row"]{min-width:10.5rem}}
/* a caption long enough to be a paragraph reads better ranged left */
.gfx__cap--long{text-align:left;font-size:.84rem}
.kpi__sub{display:block;font-weight:300;font-size:.78rem;color:var(--ink-faint);margin-top:.15rem}

/* on a phone the drawings shrink with their container, so the type is sized up
   to survive it, and the long labels swap for short ones */
@media (max-width:760px){
  .plot .lg{display:none}
  .plot .sm{display:inline}
  .plot text{font-size:28px}
  .plot .plot__xlab text,.plot .plot__ylab text{font-size:27px}
  .plot .plot__val,.plot .plot__gap{font-size:29px}
  .plot .pc__bandlab,.plot .pc__onlab{font-size:27px}
  .plot .pc__starlab,.plot .pc__lab{font-size:29px}
  .plot .pc__dot{r:8}
  .plot .pc__star{r:12}
}

/* ---------- insights: the articles row on the homepage ----------
   Picture first, then the line about it, the way a news page reads. The cards
   themselves are written by make_blog.py from the posts. */
.ins__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.ins__head h2{margin:0}
.ins__all{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--accent);white-space:nowrap}
.ins__all:hover{text-decoration:underline}
.ins__all .btn__arrow{width:1em;height:1em}
.ins{list-style:none;margin:clamp(1.8rem,4vw,2.8rem) 0 0;padding:0;display:grid;
  gap:clamp(1.8rem,3.6vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ins__link{display:flex;flex-direction:column;height:100%}
.ins__shot{display:block;overflow:hidden;border-radius:12px;background:var(--canvas-deep);aspect-ratio:3 / 2}
.ins__shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.ins__link:hover .ins__shot img,.ins__link:focus-visible .ins__shot img{transform:scale(1.045)}
.ins__meta{display:flex;align-items:center;gap:.75rem;margin:1.15rem 0 0;font-size:.78rem;color:var(--ink-faint)}
.ins__cat{background:var(--accent-muted);color:var(--accent-deep);border-radius:999px;padding:.25em .8em;letter-spacing:.04em}
.ins__title{font-family:var(--display);font-weight:700;font-size:clamp(1.18rem,1.8vw,1.45rem);
  line-height:1.18;margin:.75rem 0 0;color:var(--ink);transition:color .3s var(--ease-soft)}
.ins__link:hover .ins__title{color:var(--accent)}
.ins__dek{margin:.65rem 0 0;color:var(--ink-soft);font-size:.97rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ins__more{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1rem;
  font-size:.86rem;color:var(--accent)}
.ins__link:hover .ins__more{text-decoration:underline}
.ins__more .btn__arrow{width:1em;height:1em}
@media (prefers-reduced-motion:reduce){
  .ins__shot img{transition:none}
  .ins__link:hover .ins__shot img,.ins__link:focus-visible .ins__shot img{transform:none}
}

/* ---------- pictures on the blog ----------
   The same picture the card uses: at the top of a card on the index, and once
   under the title on the post, at reading width so it never pushes the opening
   paragraph off the screen. */
.postcard{overflow:hidden}
.postcard__shot{display:block;margin:0 0 1.2rem;border-radius:12px;overflow:hidden;
  background:var(--canvas-deep);aspect-ratio:3 / 2}
.postcard__img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.postcard:hover .postcard__img{transform:scale(1.04)}
.post__shotwrap{margin-top:0;margin-bottom:clamp(1.4rem,3vw,2rem);padding:0}
/* A drawn figure rather than a photograph: it keeps its own shape, because the
   2:1 crop below would cut the top and bottom off a circular one. */
.post__shot.post__shot--tall{aspect-ratio:1086 / 869}
.post__shot{display:block;width:100%;height:auto;aspect-ratio:2 / 1;object-fit:cover;
  border-radius:12px;background:var(--canvas-deep)}
@media (min-width:760px){
  .post__shotwrap{width:min(68ch,100% - (var(--pad) * 2))}
}
@media (prefers-reduced-motion:reduce){
  .postcard__img{transition:none}
  .postcard:hover .postcard__img{transform:none}
}

/* ---------- the blog index reads as a list, not a wall ----------
   Two posts in a two column grid gave two enormous blocks. One row per post,
   picture beside the words, holds its shape whether there are two posts or
   twenty. Below the breakpoint it stacks back to picture on top. */
@media (min-width:760px){
  .posts{grid-template-columns:1fr;gap:clamp(1.1rem,2.2vw,1.6rem)}
  .postcard{display:grid;grid-template-columns:minmax(0,clamp(230px,28%,320px)) minmax(0,1fr);
    gap:clamp(1.4rem,3vw,2.2rem);align-items:center;padding:clamp(1rem,1.8vw,1.4rem)}
  .postcard__shot{margin:0}
  .postcard__meta{margin-top:0}
  .postcard__title{font-size:clamp(1.2rem,1.8vw,1.48rem);margin-top:.65rem}
  .postcard__excerpt{margin-top:.55rem;font-size:.97rem;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .postcard__more{margin-top:.85rem}
}

/* ---------- the HVAC post: a ladder, two lines and a road ----------
   Same rules as the other drawings: the viewBox scales, labels swap to short
   forms on a phone, and the timeline stops being a timeline on a narrow screen
   and becomes a list. */

/* 1. the multiple ladder */
.plot .lad__whisk{stroke:var(--ink);stroke-width:2;opacity:.55}
.plot .lad__cap{stroke:var(--ink);stroke-width:2;opacity:.55}
.plot .lad__split{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:4 5}
.plot .lad__dot{fill:var(--gold)}
.plot .lad__deal{font-size:15px;fill:var(--gold)}
.plot .lad__dealsub{font-size:12.5px;fill:var(--ink-faint)}

/* 3. renewal compounding */
.plot .rn__slow{fill:none;stroke:var(--hair-strong);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.plot .rn__fast{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.plot .rn__dot--slow{fill:var(--hair-strong)}
.plot .rn__dot--fast{fill:var(--accent)}
.plot .rn__end{font-size:15px}
.plot .rn__end--fast{fill:var(--accent-deep)}
.plot .rn__end--slow{fill:var(--ink-faint)}
.plot .rn__note{font-size:13.5px;fill:var(--gold)}

/* 4. the road to exit */
.tl__scale{display:none;margin:0 0 .5rem;color:var(--ink-faint);font-size:.74rem}
.tl__rows{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.tl__when{margin:0;font-size:.78rem;color:var(--ink-faint);letter-spacing:.02em}
.tl__title{display:block;color:var(--ink);font-weight:500;font-size:.98rem;margin-bottom:.1rem}
.tl__months{display:block}
.tl__track{position:relative;height:34px;margin:.4rem 0 0;background:var(--canvas-deep);border-radius:8px}
.tl__bar{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:8px;
  display:flex;align-items:center;padding:0 .85rem;
  left:calc(var(--from) / 24 * 100%);width:calc((var(--to) - var(--from)) / 24 * 100%)}
.tl__bar span{color:#fff;font-size:.86rem;font-weight:400;white-space:nowrap}
.tl__what{margin:.45rem 0 0;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.tl__after{margin-top:1.4rem;border-top:1px solid var(--hair);padding-top:1.1rem}
.tl__aftertitle{margin:0;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.tl__miles{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 0;padding:0}
.tl__miles li{border:1px solid var(--hair-strong);border-radius:999px;padding:.25em .85em;
  font-size:.78rem;color:var(--ink-soft)}
@media (min-width:760px){
  .tl__scale{display:grid;grid-template-columns:repeat(4,1fr) auto;margin-left:12.5rem}
  .tl__scale span{text-align:left}
  .tl__scale span:last-child{text-align:right}
  .tl__row{display:grid;grid-template-columns:12rem minmax(0,1fr);column-gap:1.2rem;align-items:start}
  .tl__when{grid-column:1;grid-row:1 / span 2;padding-top:.5rem;text-align:right}
  .tl__title{display:none}
  .tl__track{grid-column:2;grid-row:1;margin-top:0}
  .tl__what{grid-column:2;grid-row:2}
  .tl__after{margin-left:13.2rem}
}
/* on a phone a twelve month bar inside a narrow track says nothing, so the
   bars keep their proportions but the label sits outside them */
@media (max-width:759px){
  .tl__bar span{display:none}
  .tl__bar{padding:0}
}

/* 5. the readiness sheet */
.kpi--ready{min-width:600px}
.kpi--ready th[scope="row"]{white-space:normal;min-width:9.5rem}

/* ---------- the solar post: a rail, two splits, a funnel and the years ----- */

/* 1. four years of scale and collapse */
.evt{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative}
.evt::before{content:"";position:absolute;left:5px;top:.6rem;bottom:.6rem;width:2px;background:var(--hair)}
.evt__item{position:relative;padding-bottom:1.15rem}
.evt__item:last-child{padding-bottom:0}
.evt__item::before{content:"";position:absolute;left:-1.6rem;top:.42rem;width:12px;height:12px;
  border-radius:50%;background:var(--canvas);border:2px solid var(--hair-strong)}
.evt__item--law::before{border-color:var(--accent);background:var(--accent)}
.evt__when{margin:0;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.evt__who{margin:.15rem 0 0;font-size:1.02rem;font-weight:500;color:var(--ink)}
.evt__item--law .evt__who{color:var(--accent-deep)}
.evt__what{margin:.2rem 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}

/* 2 and 5. one bar, split */
.split__bar{display:flex;height:46px;border-radius:10px;overflow:hidden;background:var(--canvas-deep)}
.split__part{display:flex;align-items:center;justify-content:center;min-width:0}
.split__part span{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff}
.split__part--peak{background:var(--accent)}
.split__part--mid{background:var(--gold)}
.split__part--flat{background:var(--hair-strong)}
.split__part--flat span{color:var(--ink)}
.split__callout{margin:1.1rem 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-soft);
  border-left:3px solid var(--gold);padding-left:.9rem}
.split__callout b{color:var(--ink);font-weight:500}
.key__swatch--mid{background:var(--gold)}
.cx__head{margin:0 0 1rem;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink)}
.cx__head b{color:var(--accent-deep);font-weight:900;font-size:1.5rem}
.cx__head span{display:inline-block;font-family:var(--body);font-weight:300;font-size:.82rem;
  color:var(--ink-faint);margin-left:.5rem}

/* 3. what is left of the credits */
.yr__scale{display:grid;grid-template-columns:repeat(4,1fr) auto;margin:0 0 .5rem;
  color:var(--ink-faint);font-size:.74rem}
.yr__scale span:last-child{text-align:right}
.yr__rows{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.yr__row{display:grid;gap:.35rem}
.yr__lab{margin:0;font-size:.95rem;color:var(--ink)}
.yr__lab b{font-weight:500;color:var(--accent-deep)}
.yr__track{position:relative;height:26px;background:var(--canvas-deep);border-radius:7px}
.yr__bar{position:absolute;top:0;bottom:0;border-radius:7px;
  left:calc(var(--from) / 11 * 100%);width:calc((var(--solid) - var(--from)) / 11 * 100%)}
.yr__bar--flat{background:var(--hair-strong)}
.yr__bar--mid{background:var(--accent-hi)}
.yr__bar--peak{background:var(--accent)}
.yr__fade{position:absolute;top:0;bottom:0;left:100%;border-radius:0 7px 7px 0;
  width:calc((var(--to) - var(--solid)) / (var(--solid) - var(--from)) * 100%);
  background:repeating-linear-gradient(135deg,var(--accent-muted) 0 6px,transparent 6px 12px);
  border:1px solid var(--accent-muted);border-left:0}
.yr__note{margin:0;font-size:.85rem;color:var(--ink-soft)}
.yr__today{position:relative;margin:.7rem 0 0;font-size:.72rem;color:var(--gold);
  letter-spacing:.06em;text-transform:uppercase}
.yr__today span{position:relative;left:calc(1.75 / 11 * 100%)}
.yr__today::before{content:"";position:absolute;left:calc(1.75 / 11 * 100%);top:-9.2rem;height:9rem;
  width:1px;background:var(--gold);opacity:.55}
.yr__tiles{display:grid;gap:.8rem;margin-top:1.3rem}
@media (min-width:620px){.yr__tiles{grid-template-columns:1fr 1fr}}
.yr__tile{margin:0;border:1px solid var(--hair);border-radius:12px;padding:.85rem 1rem;
  font-size:.82rem;line-height:1.45;color:var(--ink-faint)}
.yr__tile b{display:block;font-family:var(--display);font-weight:900;font-size:1.3rem;
  color:var(--ink);margin-bottom:.2rem;font-variant-numeric:lining-nums proportional-nums}

/* 4. the two funnels */
.fnl{display:grid;gap:1.4rem}
@media (min-width:640px){.fnl{grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.2rem)}}
.fnl__head{margin:0 0 .8rem;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink)}
.fnl__col--peak .fnl__head{color:var(--accent-deep)}
.fnl__stages{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fnl__stage{display:grid;gap:.15rem}
.fnl__bar{display:flex;align-items:center;justify-content:center;height:44px;width:var(--w);
  margin-inline:auto;border-radius:7px;background:var(--hair-strong)}
.fnl__col--peak .fnl__bar{background:var(--accent)}
.fnl__bar b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);
  font-variant-numeric:lining-nums proportional-nums}
.fnl__col--peak .fnl__bar b{color:#fff}
.fnl__name{text-align:center;font-size:.8rem;color:var(--ink-faint)}
.fnl__rate{margin:.9rem 0 0;text-align:center;font-size:.88rem;color:var(--ink-soft)}
.fnl__drops{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.3rem 0 0;padding:0;
  border-top:1px solid var(--hair);padding-top:1rem}
.fnl__drops li{font-size:.86rem;color:var(--ink-soft)}
.fnl__drops b{font-family:var(--display);font-weight:700;color:var(--gold);font-size:1rem}

/* 6. a bar that is not the point, and one that is */
.hbars__fill--flat{background:var(--hair-strong)}
.hbars__fill--ghost{background:repeating-linear-gradient(135deg,var(--hair) 0 5px,transparent 5px 10px);
  border:1px solid var(--hair)}
.hbars__val--none{color:var(--ink-faint);font-family:var(--body);font-weight:300;font-size:.82rem}
.hbars__row--last .hbars__key{color:var(--ink-faint)}

/* 8. the case study tiles, borrowed */
.figs--4{grid-template-columns:1fr}
@media (min-width:560px){.figs--4{grid-template-columns:1fr 1fr}}
.gfx .fig{padding:1.1rem 1.2rem 1.2rem}
.gfx .figs{margin-top:0}
.gfx .figs .fig__v{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.fig--peak{border-color:var(--accent);background:var(--accent-muted)}
.gfx__link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* 7. the widest scorecard yet */
.kpi--solar{min-width:660px}
.kpi--solar th[scope="row"]{white-space:normal;min-width:13rem}

/* a post whose picture has not been made yet still reads as a row */
@media (min-width:760px){
  .postcard--nopic{grid-template-columns:1fr}
}

/* ---------- a label that sits over a line stays readable ----------
   The panel colour is painted behind the letters before they are filled, so a
   gridline, a whisker or a callout passes behind the number instead of through
   it. Only labels that can land on a stroke carry it. */
.plot .halo,.chart .halo{paint-order:stroke fill;stroke:var(--panel);stroke-width:3px;
  stroke-linejoin:round;stroke-linecap:round}
@media (max-width:760px){
  .plot .halo,.chart .halo{stroke-width:6px}
}

/* ---------- call booked ----------
   Where people land once the calendar has taken the booking. One job: the
   video that tells them what happens next. A YouTube frame carries no height
   of its own, so the block holds the sixteen by nine shape and the frame
   fills it, which keeps the picture the right shape at every width. */
.done{text-align:center;padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.done h1{max-width:20ch;margin-inline:auto}
.done .lede{margin:1.4rem auto 0;max-width:60ch}
.done__band{padding-bottom:clamp(4rem,8vw,6rem)}
.done__vid{max-width:900px;margin-inline:auto;aspect-ratio:16 / 9;border-radius:16px;
  overflow:hidden;background:var(--canvas-ink);border:1px solid var(--hair)}
.done__vid iframe{display:block;width:100%;height:100%;border:0}

/* ---------- the $100M Growth Plan landing page ----------
   One page with one job: send an owner into the quiz. So it carries the brand
   and nothing else that competes with the button, and it repeats that button
   three times down the page plus once on the phone bar. */
/* Brand only on this page. The bar is a three column grid, so centring is a
   matter of putting the mark in the middle column rather than the first,
   where it would otherwise sit with nothing on the right to balance it. */
.nav--plain .brand{grid-column:2}
.lp__hero{text-align:center;padding-bottom:clamp(2rem,4vw,3rem)}
.lp__over{margin:0 0 1.1rem;font-size:.95rem;color:var(--accent);font-weight:500}
.lp__hero h1{max-width:16ch;margin-inline:auto}
.lp__sub{margin:1.1rem auto 0;max-width:60ch}
.lp__cta{margin:clamp(1.8rem,3.5vw,2.6rem) 0 0}
.lp__fine{margin:1rem 0 0;font-size:.86rem;color:var(--ink-faint)}
.lp__body{max-width:62ch;margin-top:1.4rem}
.lp__body p{color:var(--ink-soft);line-height:1.72}
.lp__body p + p{margin-top:1rem}
.band--ink .lp__body p{color:#A6A99F}
.lp__tag{font-family:var(--display);font-weight:700;font-style:italic;color:var(--ink)}

/* proof */
.lp__label{font-family:var(--body);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--ink-faint)}
.lp__proof .lede{margin-top:.7rem}
.lp__figs{display:grid;gap:clamp(1.6rem,4vw,3rem);margin-top:clamp(2.2rem,4vw,3rem);
  grid-template-columns:1fr}
@media (min-width:700px){.lp__figs{grid-template-columns:repeat(2,1fr);max-width:62rem}}
.lp__fig{border-top:1px solid var(--hair-strong);padding-top:1.1rem}
.lp__fign{font-family:var(--display);font-weight:900;letter-spacing:-.02em;color:var(--accent);
  font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;margin:0;
  font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1,"onum" 0}
.lp__figt{margin:.6rem 0 0;font-size:.92rem;color:var(--ink-soft);max-width:34ch}
.lp__clients{list-style:none;margin:clamp(2.4rem,4vw,3.2rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem .7rem}
.lp__clients li{border:1px solid var(--hair-strong);border-radius:999px;padding:.42em 1em;
  font-size:.83rem;color:var(--ink-soft);background:var(--panel)}

/* cards */
.lp__cards{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);margin-top:clamp(2.2rem,4vw,3rem);
  grid-template-columns:1fr}
@media (min-width:760px){
  .lp__cards--2{grid-template-columns:repeat(2,1fr)}
  .lp__cards--3{grid-template-columns:repeat(3,1fr)}
  .lp__card--wide{grid-column:1 / -1}
}
.lp__card{background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.4rem,2.6vw,1.9rem)}
.band--tint .lp__card{background:var(--panel)}
.lp__card h3{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:0 0 .7rem}
.lp__card p{margin:0;font-size:.95rem;line-height:1.68;color:var(--ink-soft)}
.lp__list{margin:0;padding-left:1.15rem}
.lp__list li{font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.lp__list li + li{margin-top:.55rem}
.lp__close{margin:clamp(2rem,3.5vw,2.6rem) 0 0;font-family:var(--display);font-weight:900;
  letter-spacing:-.02em;font-size:clamp(1.4rem,2.6vw,2rem)}

/* the stage table, the one wide thing on the page */
.lp__scroll{margin-top:clamp(2.2rem,4vw,3rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
.lp__stages{border-collapse:collapse;width:100%;min-width:640px;background:var(--panel);
  border:1px solid var(--hair);border-radius:12px;overflow:hidden;
  font-variant-numeric:lining-nums proportional-nums}
.lp__stages th,.lp__stages td{text-align:left;padding:.9rem 1rem;font-size:.9rem;
  border-bottom:1px solid var(--hair);vertical-align:top}
.lp__stages thead th{font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint);background:var(--canvas-deep)}
.lp__stages tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.lp__stages td{color:var(--ink-soft)}
.lp__stages tr:last-child th,.lp__stages tr:last-child td{border-bottom:0}
.lp__sn{font-family:var(--display);font-weight:900;color:var(--accent);width:1.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* steps */
.lp__steps{list-style:none;counter-reset:lp;margin:clamp(2.2rem,4vw,3rem) 0 0;padding:0;
  max-width:54rem}
.lp__steps li{counter-increment:lp;position:relative;padding:0 0 1.6rem 3.2rem;
  border-bottom:1px solid var(--hair)}
.lp__steps li + li{padding-top:1.6rem}
.lp__steps li:last-child{border-bottom:0;padding-bottom:0}
.lp__steps li::before{content:counter(lp);position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--accent);line-height:1.1;
  font-variant-numeric:lining-nums}
.lp__steps li + li::before{top:1.6rem}
.lp__steps h3{font-size:clamp(1.1rem,1.7vw,1.3rem);margin:0 0 .45rem}
.lp__steps p{margin:0;font-size:.95rem;line-height:1.68;color:var(--ink-soft);max-width:60ch}

/* the quote and the pictures */
.lp__quote{margin:clamp(2rem,3.5vw,2.6rem) 0 0;padding:1.3rem 1.5rem;background:var(--panel);
  border-left:3px solid var(--gold);border-radius:0 12px 12px 0;max-width:62ch}
.lp__quote p{margin:0;font-size:.98rem;line-height:1.7;color:var(--ink)}
/* The pages are cut out of their background, so no frame, no corner radius
   and no border: they float on the page the way the marble does on the home
   page. The shadow is already painted into the picture. */
.lp__shot{margin:clamp(2.4rem,4.5vw,3.4rem) 0 0}
.lp__shot img{display:block;width:100%;height:auto}
/* Sits between the headline and the promise, and held well under the width of
   the page. A picture asked to fill 1500px needs 3000 real ones on a retina
   screen; at 760 it needs 1520 and gets 2600, so every page in the fan is
   drawn with pixels to spare. Smaller is what makes it look sharp. */
.lp__hero-shot{margin:clamp(1rem,2.2vw,1.6rem) auto clamp(.6rem,1.4vw,1rem);width:min(640px,88vw)}
.lp__hero-shot img{display:block;width:100%;height:auto}
@media (max-width:760px){
  .lp__hero-shot{width:94vw}
}

/* trades */
.lp__trades{list-style:none;margin:clamp(2rem,3.5vw,2.6rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem .7rem;max-width:58rem}
.lp__trades li{border:1px solid var(--hair-strong);border-radius:999px;padding:.45em 1.05em;
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);background:var(--panel)}
.lp__note{margin:1.6rem 0 0;font-size:.92rem;color:var(--ink-soft);max-width:60ch}

.lp__end{text-align:center}
.lp__end .lede{margin:1.2rem auto 0;max-width:46ch}
.lp__legal{padding:clamp(2.2rem,4vw,3rem) 0;background:var(--canvas)}
.lp__legal p{margin:0;max-width:72ch;font-size:.78rem;line-height:1.7;color:var(--ink-faint)}

/* the phone bar */
.lp__sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  align-items:center;gap:1rem;padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(247,247,245,.94);backdrop-filter:blur(10px);border-top:1px solid var(--hair);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.lp__sticky.is-up{transform:none}
.lp__stickyt{margin:0;flex:1;font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2}
.lp__stickyt span{display:block;font-family:var(--body);font-weight:300;font-size:.76rem;color:var(--ink-faint)}
.lp__sticky .btn{padding:.6em 1.3em;font-size:.9rem}
@media (max-width:760px){
  .lp__sticky{display:flex}
  .lp__legal{padding-bottom:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  .lp__sticky{transition:none}
}

/* the industries row, built like the case study row. It sits inside the hero
   now, close under the line that says what the plan costs and how long it
   takes, so the trades read as part of the offer rather than a section. */
/* The sentence the row finishes. It sits close to the pills on purpose: read
   together they say who this is for, and apart they say nothing. */
.ind__lead{margin:clamp(.7rem,1.6vw,1.1rem) 0 0;text-align:center;font-size:.95rem;
  color:var(--ink-soft)}
/* Masked to the width of the orbit rather than the window, so a trade sharpens
   as it crosses into the rings and dissolves on the way out. */
.ind__viewport{margin-top:clamp(.3rem,.8vw,.5rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 360px),#000 calc(50% - 215px),
    #000 calc(50% + 215px),transparent calc(50% + 360px));
  mask-image:linear-gradient(90deg,transparent calc(50% - 360px),#000 calc(50% - 215px),
    #000 calc(50% + 215px),transparent calc(50% + 360px))}
/* Margin, not gap: a gap sits only between items, so one set would be half a
   gap short of the distance the animation travels and the row would snap back
   a few pixels every lap. */
.ind__track{display:flex;width:max-content;list-style:none;margin:0;padding:0;
  animation:indroll 46s linear infinite;will-change:transform}
.ind__item{flex:none;margin-right:clamp(.7rem,1.6vw,1.1rem);
  border:1px solid var(--hair-strong);border-radius:999px;background:var(--panel);
  padding:.5em 1.15em;font-family:var(--display);font-weight:700;
  font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--ink);white-space:nowrap}
@keyframes indroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--roll,50%)),0,0)}}
@media (max-width:760px){
  /* A phone is narrower than the orbit, so the mask goes back to the edges.
     Softer than the desktop one, and Safari keeps sliding a ready made layer. */
  .ind__viewport{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .ind__viewport{overflow-x:auto}
  .ind__track{animation:none}
  .ind__track .ind__item[aria-hidden="true"]{display:none}
}

/* ---------- the landing page's flash ----------
   Two things only: a sheen that crosses the solid buttons every few seconds,
   and a set of rings turning behind the headline. Both are scoped to .lp so
   nothing else on the site picks them up. */

/* Every solid button on the site. The sheen is a background image on the
   button rather than an overlay, so it paints above the green and below the
   label without any z-index argument. */
.btn--solid{
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.46) 50%, rgba(255,255,255,0) 60%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  background-position:190% 0;
  animation:lpSheen 4s ease-in-out infinite;
}
/* It waits, crosses, then waits again. A sheen that never stops reads as a
   loading bar rather than a highlight. */
@keyframes lpSheen{
  0%,55%{background-position:190% 0}
  100%{background-position:-90% 0}
}
.btn--solid:hover{background-position:-90% 0}
/* The one in the header sits on screen the whole time someone is reading, so
   it crosses far less often. At the same rate as the rest it flickers in the
   corner of the eye for the length of the page. */
.nav .btn--solid{animation-duration:11s}

.lp__hero{position:relative;isolation:isolate}
.lp__orbit{
  position:absolute;z-index:-1;pointer-events:none;
  top:calc(var(--nav-h) + clamp(1rem,4vw,3rem));left:50%;transform:translateX(-50%);
  width:min(680px,108vw);aspect-ratio:1;
}
.lp__orbit svg{width:100%;height:100%;display:block;overflow:visible}
.lp__orbit circle{fill:none}
.orb__ring{stroke:var(--accent);stroke-opacity:.13;stroke-width:1}
.orb__spin{stroke:var(--gold);stroke-opacity:.42;stroke-width:1.5;
  stroke-dasharray:2 16;stroke-linecap:round;
  transform-origin:50% 50%;animation:lpOrbit 38s linear infinite}
.orb__spin--back{stroke:var(--accent);stroke-opacity:.3;
  stroke-dasharray:46 26;animation-duration:64s;animation-direction:reverse}
@keyframes lpOrbit{to{transform:rotate(360deg)}}

@media (max-width:760px){
  /* Smaller and fainter on a phone: at this size the rings crowd the headline
     rather than sitting behind it. */
  .lp__orbit{width:132vw;opacity:.72}
}
@media (prefers-reduced-motion:reduce){
  .btn--solid{animation:none;background-position:190% 0}
  .orb__spin{animation:none}
}

/* ---------- the six stages, as a chart ----------
   Columns sized by the revenue band, so the climb is visible before a word is
   read. Tabs rather than links: the detail swaps in place and the page never
   jumps. */
.stg{margin-top:clamp(2.2rem,4vw,3rem)}
.stg__bars{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.4rem,1.2vw,.9rem);
  align-items:end}
.stg__bar{background:none;border:0;padding:0 0 .9rem;cursor:pointer;display:block;width:100%;
  text-align:center;color:inherit;font:inherit;border-bottom:2px solid var(--hair)}
.stg__col{display:block;height:clamp(90px,16vw,180px);display:flex;align-items:flex-end;
  margin-bottom:.7rem}
.stg__fill{display:block;width:100%;height:var(--h);border-radius:6px 6px 0 0;
  background:var(--hair-strong);transition:background .4s var(--ease),transform .4s var(--ease);
  transform-origin:50% 100%}
.stg__num{display:block;font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1;
  color:var(--ink-faint);font-variant-numeric:lining-nums}
.stg__name{display:none}
.stg__bar:hover .stg__fill{background:var(--accent-hi)}
.stg__bar.is-on{border-bottom-color:var(--accent)}
.stg__bar.is-on .stg__fill{background:var(--accent)}
.stg__bar.is-on .stg__num{color:var(--accent)}
.stg__bar:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

.stg__panels{margin-top:clamp(1.6rem,3vw,2.2rem)}
.stg__panel{background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.4rem,3vw,2rem);animation:stgIn .45s var(--ease) both}
@keyframes stgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stg__kicker{margin:0 0 .4rem;font-family:var(--body);font-weight:500;font-size:.82rem;letter-spacing:0;
  color:var(--ink-faint);font-variant-numeric:lining-nums}
.stg__panel h3{font-size:clamp(1.4rem,2.6vw,2rem);margin:0}
.stg__meta{margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  font-size:.92rem;color:var(--accent-deep);font-variant-numeric:lining-nums}
.stg__meta span + span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--gold);margin-right:.7rem;vertical-align:middle}
.stg__holds{margin:.9rem 0 0;font-size:1rem;line-height:1.65;color:var(--ink-soft);max-width:60ch}
@media (min-width:900px){
  /* Room for the names under the columns once there is width for them. */
  .stg__name{display:block;margin-top:.45rem;font-size:.78rem;line-height:1.3;color:var(--ink-faint)}
  .stg__bar.is-on .stg__name{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .stg__panel{animation:none}
  .stg__fill{transition:none}
}

/* ---------- built for, and not ----------
   One block lit and one dark, so which side you are on is obvious before the
   words are read. */
.fit{display:grid;gap:clamp(1rem,2.5vw,1.6rem);grid-template-columns:1fr}
@media (min-width:820px){.fit{grid-template-columns:1fr 1fr}}
.fit__card{border-radius:20px;padding:clamp(1.6rem,3.2vw,2.4rem);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fit__card:hover{transform:translateY(-3px)}
.fit__card h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 1.2rem}
.fit__list{list-style:none;margin:0;padding:0}
.fit__list li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;line-height:1.6}
.fit__list li + li{margin-top:1rem}
.fit__mark{flex:none;width:1.4em;height:1.4em;margin-top:.05em}

.fit__card--yes{background:var(--panel);border:1px solid var(--hair);
  box-shadow:0 10px 30px rgba(20,23,17,.05)}
.fit__card--yes:hover{box-shadow:0 18px 44px rgba(20,23,17,.09)}
.fit__card--yes .fit__mark{color:var(--accent)}
.fit__card--yes li{color:var(--ink-soft)}

.fit__card--no{background:var(--canvas-ink);color:#EDEDE8;border:1px solid #2A2F26;
  box-shadow:0 10px 30px rgba(20,23,17,.14)}
.fit__card--no:hover{box-shadow:0 18px 44px rgba(20,23,17,.22)}
.fit__card--no h3{color:#fff}
.fit__card--no li{color:#A6A99F}
/* The one red on the whole site, and only ever as a cross. */
.fit__card--no .fit__mark{color:#C4584A}
@media (prefers-reduced-motion:reduce){
  .fit__card{transition:none}
  .fit__card:hover{transform:none}
}

/* ---------- the five areas, as an org chart ----------
   The five hang off the business, which is what the scoring does. Connectors
   are drawn with borders so they follow the boxes at every width instead of
   being an image that only fits one. */
.org{margin-top:clamp(2.2rem,4vw,3rem)}
.org__head{display:flex;justify-content:center}
.org__hub{display:inline-block;background:var(--canvas-ink);color:#fff;border-radius:999px;
  padding:.65em 1.6em;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.6vw,1.2rem)}
.org__row{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:1fr}
.org__node{background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.2rem,2.4vw,1.6rem);position:relative;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.org__node:hover{transform:translateY(-3px);border-color:var(--accent)}
.org__node h3{font-size:clamp(1.1rem,1.8vw,1.3rem);margin:0 0 .5rem}
.org__node p{margin:0;font-size:.93rem;line-height:1.62;color:var(--ink-soft)}

@media (max-width:899px){
  /* Narrow: the chart becomes a spine down the left, which is the only way
     five boxes and their lines fit a phone without shrinking to nothing. */
  .org__head{justify-content:flex-start;padding-left:.6rem}
  .org__row{margin-top:0;padding-left:1.9rem;border-left:1px solid var(--hair-strong);
    margin-left:1.35rem;padding-top:1.2rem}
  .org__node::before{content:"";position:absolute;left:-1.9rem;top:1.9rem;width:1.9rem;
    height:1px;background:var(--hair-strong)}
}
@media (min-width:900px){
  .org__row{grid-template-columns:repeat(5,1fr);margin-top:2.6rem;position:relative}
  /* the beam the five hang from, stopping at the centre of the outer two */
  .org__row::before{content:"";position:absolute;top:-1.3rem;left:10%;right:10%;height:1px;
    background:var(--hair-strong)}
  /* the drop from the hub down to that beam */
  .org__head{position:relative;padding-bottom:1.3rem}
  .org__head::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:1.3rem;
    background:var(--hair-strong)}
  /* and a drop from the beam into each box */
  .org__node::before{content:"";position:absolute;left:50%;top:-1.3rem;width:1px;height:1.3rem;
    background:var(--hair-strong)}
}
@media (prefers-reduced-motion:reduce){
  .org__node{transition:none}
  .org__node:hover{transform:none}
}

/* ---------- one number against another ----------
   The gap between the best and the rest is the whole argument, so it is drawn
   rather than described. */
.vs{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
.vs__row{display:grid;grid-template-columns:4.6rem 1fr 2.6rem;align-items:center;gap:.7rem}
.vs__row + .vs__row{margin-top:.6rem}
.vs__who{margin:0;font-size:.82rem;color:var(--ink-faint)}
.vs__track{height:10px;background:var(--canvas-deep);border-radius:999px;overflow:hidden}
.vs__bar{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--hair-strong)}
.vs__bar--good{background:var(--accent)}
.vs__n{margin:0;text-align:right;font-family:var(--display);font-weight:900;font-size:1rem;
  color:var(--ink);font-variant-numeric:lining-nums}
.vs__cap{margin:.8rem 0 0;font-size:.76rem;color:var(--ink-faint)}

/* ---------- the one ask an article makes ----------
   A panel in the middle on a desktop, a sheet off the bottom edge on a phone,
   which is where a thumb is. It asks once and then never again. */
.ask{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:var(--pad)}
.ask__veil{position:absolute;inset:0;background:rgba(20,23,17,.46);
  opacity:0;transition:opacity .4s var(--ease-soft);backdrop-filter:blur(2px)}
.ask.is-on .ask__veil{opacity:1}
.ask__panel{position:relative;background:var(--panel);border-radius:22px;
  padding:clamp(2.2rem,4.4vw,3.2rem) clamp(1.8rem,4vw,2.6rem) clamp(2.4rem,4.6vw,3rem);
  width:min(29rem,100%);text-align:center;
  box-shadow:0 30px 80px rgba(20,23,17,.26);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
.ask.is-on .ask__panel{opacity:1;transform:none}
.ask__x{position:absolute;top:.8rem;right:.8rem;width:2rem;height:2rem;border:0;background:none;
  cursor:pointer;color:var(--ink-faint);border-radius:50%;display:grid;place-items:center}
.ask__x svg{width:1rem;height:1rem}
.ask__x:hover{color:var(--ink);background:var(--canvas-deep)}
/* The inserts themselves, cut out and floating. Decoration in the sense that
   the words carry the offer without it, so it is hidden from a screen reader,
   but it is the thing being offered and seeing it is most of the pitch. */
/* The tall one, at the top, with the inserts underneath it. */
.ask__label{margin:0 0 .9rem;font-family:'Bebas Neue',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(2.1rem,4.8vw,2.7rem);line-height:.9;
  letter-spacing:.035em;color:var(--accent)}
.ask__pic{display:block;width:100%;height:auto;margin:0 0 1.3rem}
.ask__h{font-size:clamp(1.35rem,2.6vw,1.65rem);line-height:1.15;margin:.55rem 0 0}
.ask__b{margin:.9rem 0 0;font-size:.96rem;line-height:1.6;color:var(--ink-soft)}
.ask__go{margin-top:1.9rem}
.ask__no{display:block;margin:.9rem auto 0;border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:.85rem;color:var(--ink-faint);text-decoration:underline;
  text-underline-offset:3px}
.ask__no:hover{color:var(--ink-soft)}
/* The page behind holds still, so the reader does not lose their place. */
.ask-open,.ask-open body{overflow:hidden}

@media (max-width:620px){
  /* A sheet off the bottom: the panel is within reach of a thumb, and sliding
     up from the edge reads as a layer rather than something that jumped out. */
  .ask{align-items:flex-end;padding:0}
  .ask__panel{width:100%;border-radius:22px 22px 0 0;
    padding:2rem var(--pad) calc(1.6rem + env(safe-area-inset-bottom));
    transform:translateY(100%) scale(1)}
  .ask.is-on .ask__panel{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ask__veil,.ask__panel{transition:none}
  .ask__panel{transform:none}
}

/* ---------- graphics for the brand post ----------
   Three new shapes: a bar row that carries its own sample line, a two panel
   comparison, and a column chart where each column says three things. */

/* a bar row with the sample size under the label, because the whole point of
   that chart is who was asking */
.hbars--tall .hbars__row{align-items:flex-start}
.hbars__sub{display:block;margin-top:.2rem;font-size:.72rem;line-height:1.35;color:var(--ink-faint)}

/* branded against non-branded */
.duo{display:grid;gap:clamp(1.2rem,2.6vw,2rem);margin-top:1.2rem;grid-template-columns:1fr}
@media (min-width:820px){.duo{grid-template-columns:1.25fr 1fr}}
.duo__panel{background:var(--panel);border:1px solid var(--hair);border-radius:14px;
  padding:clamp(1rem,2.2vw,1.4rem)}
.duo__h{margin:0 0 1rem;font-size:.82rem;font-weight:500;color:var(--ink-soft)}
.duo__row + .duo__row{margin-top:.95rem}
.duo__k{margin:0 0 .4rem;font-size:.8rem;color:var(--ink-faint)}
.duo__pair{display:flex;gap:3px}
.duo__bar{display:flex;align-items:center;justify-content:flex-end;height:26px;border-radius:4px;
  padding-right:.45rem;min-width:2.6rem}
.duo__bar em{font-style:normal;font-size:.74rem;font-weight:500;
  font-variant-numeric:lining-nums tabular-nums}
.duo__bar--on{background:var(--accent)}
.duo__bar--on em{color:#fff}
.duo__bar--off{background:var(--hair-strong)}
.duo__bar--off em{color:var(--ink)}
.duo__cost + .duo__cost{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair)}
.duo__v{margin:.2rem 0 0;font-family:var(--display);font-weight:900;font-size:1.05rem;
  font-variant-numeric:lining-nums proportional-nums}
.duo__v--on{color:var(--accent)}
.duo__v--off{color:var(--ink-faint)}
.gfx__callout{margin:1rem 0 0;padding:.75rem 1rem;background:var(--canvas-deep);border-radius:10px;
  border-left:3px solid var(--gold);font-size:.88rem;line-height:1.55;color:var(--ink)}

/* what a premium is worth: bar, the value it buys, and the loss it absorbs */
.prem.prem--3{grid-template-columns:repeat(3,1fr)}
.prem{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.4vw,1rem);
  margin-top:1.4rem;align-items:end}
.prem__col{text-align:center;display:flex;flex-direction:column}
.prem__bar{display:block;height:clamp(80px,13vw,150px);position:relative;margin-bottom:.6rem}
.prem__bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h);
  background:var(--hair-strong);border-radius:5px 5px 0 0}
.prem__col.is-on .prem__bar::after{background:var(--accent)}
.prem__at{position:absolute;left:0;right:0;bottom:calc(var(--h) + .3rem);font-style:normal;
  font-size:.72rem;font-weight:500;color:var(--ink-soft);
  font-variant-numeric:lining-nums proportional-nums}
.prem__col.is-on .prem__at{color:var(--accent-deep)}
.prem__v{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(.95rem,2vw,1.2rem);
  line-height:1.1;font-variant-numeric:lining-nums proportional-nums}
.prem__k{margin:.2rem 0 0;font-size:.78rem;color:var(--ink-faint)}
.prem__loss{margin:.45rem 0 0;padding-top:.45rem;border-top:1px solid var(--hair);
  font-size:.7rem;line-height:1.35;color:var(--ink-faint)}
.prem__loss strong{font-weight:500;color:var(--ink)}
.gfx__legend{margin:1rem 0 0;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}

/* a stat tile whose number is not the good news */
.fig__v--flat{color:var(--ink)}

.kpi--brand{min-width:680px}
.kpi--brand th[scope="row"]{white-space:normal;min-width:14rem}

@media (max-width:620px){
  /* four columns of three facts do not fit a phone, so they become two rows */
  .prem{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}
}