/* ===========================================================
   FULL DIARY — design system
   Palette: hi-vis lime, ink, warm paper, oxide rust
   Type:    Archivo (display, expanded) / Public Sans (text)
            Martian Mono (labels, figures, timestamps)
   =========================================================== */

/* Self-hosted variable faces. Same bytes as Google Fonts, minus two DNS
   lookups, two TLS handshakes and a render-blocking third-party stylesheet
   — this site has to meet the load time it sells. */
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url("fonts/archivo-var.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Public Sans";font-style:normal;font-display:swap;
  font-weight:100 900;
  src:url("fonts/public-sans-var.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Martian Mono";font-style:normal;font-display:swap;
  font-weight:100 800;
  src:url("fonts/martian-mono-var.woff2") format("woff2-variations");
}

:root{
  --ink:#0B1013;
  --ink-2:#131A1F;
  --ink-3:#1D262C;
  --ink-4:#2B363D;

  --paper:#F6F3EC;
  --paper-2:#EBE5D8;
  --paper-3:#DCD5C4;

  --hi:#C2CE63;     /* muted hi-vis, not a highlighter */
  --hi-2:#AEBA52;
  --hi-wash:rgba(194,206,99,.26);  /* highlight sweep on ink */
  --hi-ring:rgba(194,206,99,.45);  /* focus ring on a field */
  --hi-3:#5B6612;

  --rust:#C8502A;
  --rust-2:#E2703F;
  --steel:#5C6870;    /* metadata on paper */
  --steel-2:#93A0A7;  /* metadata on ink */

  --line:rgba(11,16,19,.16);
  --line-2:rgba(11,16,19,.08);
  --line-dark:rgba(246,243,236,.18);
  --line-dark-2:rgba(246,243,236,.09);

  /* --- type roles ---------------------------------------
     One ramp. Steps sit at >=1.25x so each role is doing a
     visibly different job. Only two body sizes exist.      */
  --t-display:clamp(1.7rem,3vw,2.9rem);
  --t-pitch:clamp(2rem,3.8vw,3.6rem);   /* screen-one tagline */
  --t-h2:clamp(1.6rem,2.6vw,2.35rem);
  --t-h3:clamp(1.4rem,2vw,1.75rem);
  --t-h4:1.0625rem;
  --t-lede:clamp(1.15rem,1.5vw,1.375rem);
  --t-body:1.0625rem;   /* 17px */
  --t-sm:0.9375rem;     /* 15px */
  --t-label:0.625rem;   /* mono, tracked, uppercase */
  --t-label-lg:0.6875rem;
  --t-eyebrow:0.75rem;  /* section eyebrows, a step above the label role */
  --t-micro:0.5rem;     /* legends, flags, small print */
  --t-nano:0.4375rem;   /* inside a diary slot only */
  --t-xs:0.8125rem;     /* the SMS mockup's own scale */
  /* figure roles: numbers set as objects, not as text */
  --t-figure:clamp(1.9rem,3.3vw,2.7rem);
  --t-figure-lg:clamp(2.2rem,4.6vw,3.6rem);
  --t-kicker:clamp(1.2rem,2.2vw,1.7rem);
  --t-display-sm:clamp(1.9rem,3.6vw,3rem);

  --r:3px;
  --r-md:6px;
  --r-lg:10px;
  --r-pill:999px;
  --r-bubble:14px;   /* SMS bubbles */
  --r-device:34px;   /* the phone shell */

  /* text on grounds that aren't paper */
  --on-ink:#C8CFD3;
  --on-ink-2:#AEB7BC;
  --on-rust:#FFFFFF;
  --bezel:#05090B;
  --void:#000;

  --pad-section:clamp(64px,7vw,116px);
  --gut:clamp(20px,4vw,40px);

  --hdr-h:74px;
  --hero-scroll:132vh;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);

  --shadow-sm:0 1px 2px rgba(11,16,19,.06), 0 4px 14px rgba(11,16,19,.05);
  --shadow-md:0 2px 6px rgba(11,16,19,.07), 0 18px 44px rgba(11,16,19,.09);
  --shadow-hi:0 10px 26px rgba(91,102,18,.24);
  /* the two elements rendered as physical objects */
  --shadow-object:0 40px 90px rgba(0,0,0,.45);
}

@media (max-width:760px){ :root{ --hero-scroll:88vh } }
@media (max-width:600px){ :root{ --hdr-h:66px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--t-body);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

::selection{background:var(--hi);color:var(--ink)}

:focus-visible{outline:2px solid var(--hi-3);outline-offset:3px;border-radius:var(--r)}
.on-ink :focus-visible{outline-color:var(--hi)}

/* ---------- type ---------- */
h1,h2,h3,h4,.display{
  font-family:"Archivo","Public Sans",sans-serif;
  font-weight:800;
  line-height:.96;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
}
/* Two headline registers, not one setting at maximum.

   REGISTER 1 — livery caps. Uppercase, expanded, heavy. It is the
   loudest thing the type system can do, so it happens once per page,
   on the page title, and nowhere else. Held back from full 125%
   width: at display size the widest cut sprawls rather than lands.

   REGISTER 2 — section headings. Sentence case at normal width and
   one weight step down. Still unmistakably a heading — it is heavier
   than anything near it, a clear size step above the lede, and it
   carries a lime eyebrow above it — but it states rather than shouts,
   which is what lets register 1 mean something when it arrives. */
h1,.h1{
  font-size:var(--t-display);
  font-weight:800;
  font-stretch:110%;
  letter-spacing:-.032em;
  line-height:.94;
  text-transform:uppercase;
}
h2,.h2{
  font-size:var(--t-h2);
  font-weight:750;
  font-stretch:105%;
  letter-spacing:-.024em;
  line-height:1.06;
  text-transform:none;
}
h3,.h3{font-size:var(--t-h3);font-weight:700;line-height:1.12;letter-spacing:-.022em}
h4,.h4{font-size:var(--t-h4);font-weight:700;line-height:1.25;letter-spacing:-.012em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* more air above a heading than below it */
* + h2,* + .h2{margin-top:.4em}
.head h2 + p{margin-top:1.2rem}
h2 + .lede,h2 + p{margin-top:1.1rem}

.lede{
  font-size:var(--t-lede);line-height:1.5;font-weight:400;
  color:color-mix(in srgb,var(--ink) 74%,transparent);
  max-width:52ch;text-wrap:pretty;
}
.on-ink .lede{color:var(--on-ink);line-height:1.54}

.eyebrow{
  font-family:"Martian Mono","Public Sans",monospace;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.85em;margin:0 0 1.25rem;color:var(--hi-3);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--hi-3);flex:none}
.on-ink .eyebrow{color:var(--hi)}
.on-ink .eyebrow::before{background:var(--hi)}

.mono{font-family:"Martian Mono",monospace;font-size:var(--t-label-lg);letter-spacing:.11em;text-transform:uppercase;font-weight:500}
.hl{background:linear-gradient(transparent 60%,var(--hi) 60%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.on-ink .hl{background:linear-gradient(transparent 60%,var(--hi-wash) 60%)}
.tint{color:var(--hi-3)}
.on-ink .tint{color:var(--hi)}
.muted{color:color-mix(in srgb,var(--ink) 64%,transparent)}
.on-ink .muted{color:var(--steel-2)}
.small{font-size:var(--t-sm)}

/* ---------- layout ---------- */
.wrap{width:min(1220px,100% - (var(--gut) * 2));margin-inline:auto}
.wrap-narrow{width:min(880px,100% - (var(--gut) * 2));margin-inline:auto}
.section{padding-block:var(--pad-section);position:relative}
.section--tight{padding-block:clamp(56px,6vw,92px)}
.on-ink{background:var(--ink);color:var(--paper)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:var(--paper)}
.tone-2{background:var(--paper-2)}

.head{max-width:54rem;margin-bottom:clamp(40px,4.8vw,72px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow{justify-content:center}
.head--center .lede{margin-inline:auto}

.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,84px);align-items:center}
.split--top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:38px}}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--hi);--fg:var(--ink);--bd:var(--hi);
  display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  padding:.94em 1.5em;border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:"Archivo","Public Sans",sans-serif;
  font-weight:700;font-size:var(--t-sm);letter-spacing:.005em;text-decoration:none;border-radius:var(--r);
  cursor:pointer;position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--ink{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.btn--ink:hover{box-shadow:0 10px 26px rgba(11,16,19,.25)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bd:var(--ink);box-shadow:none}
.on-ink .btn--ghost{--fg:var(--paper);--bd:var(--line-dark)}
.on-ink .btn--ghost:hover{--bd:var(--hi);--fg:var(--hi)}
.btn--sm{padding:.66em 1.02em;font-size:var(--t-xs)}
.btn--lg{padding:1.08em 1.9em;font-size:var(--t-body)}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--t-sm);text-decoration:none;
  border-bottom:1.5px solid var(--hi-3);padding-bottom:2px;transition:gap .2s var(--ease),border-color .2s
}
.link-arrow:hover{gap:.85em}
.on-ink .link-arrow{border-color:var(--hi)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.is-stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 95%,transparent)}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:none}
.brand__mark{width:32px;height:32px;flex:none}
.brand__name{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112.5%;font-size:var(--t-h4);letter-spacing:-.02em;line-height:1;text-transform:uppercase}
.brand__name small{display:block;font-family:"Martian Mono",monospace;font-size:var(--t-nano);letter-spacing:.2em;font-weight:500;color:var(--steel-2);margin-top:4px;text-transform:uppercase;font-stretch:normal}

.nav{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);margin-left:auto}
.nav a{text-decoration:none;font-size:var(--t-sm);font-weight:500;color:color-mix(in srgb,var(--ink) 74%,transparent);position:relative;padding:.35em 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--hi-3);transition:right .28s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.hdr__cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr__tel{text-decoration:none;font-family:"Martian Mono",monospace;font-size:var(--t-label-lg);font-weight:600;display:flex;align-items:center;gap:.5em}
.hdr__tel svg{width:14px;height:14px}
@media (max-width:1080px){.nav,.hdr__tel{display:none}}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1.5px solid var(--line);background:transparent;border-radius:var(--r);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:1.6px;background:var(--ink);position:relative;transition:transform .28s var(--ease),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:var(--ink);transition:transform .28s var(--ease),top .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1080px){.burger{display:flex}.hdr__cta{margin-left:auto}}
@media (max-width:600px){.hdr__cta{display:none}.hdr__in{height:66px}.mnav{top:66px}}

/* ---------- mobile menu ----------
   The old rule styled every <a> inside, button included, so the call
   button was being set at display size and overran its own box. Type
   is now scoped to the list, leaving .btn to be a button. */
.mnav{
  display:none;position:fixed;inset:74px 0 0;z-index:99;
  background:var(--ink);color:var(--paper);overflow-y:auto;
  padding:clamp(18px,4.5vw,34px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 26px);
}
.mnav.is-open{display:flex;flex-direction:column;min-height:0}

.mnav__list{border-top:1px solid var(--line-dark-2)}
.mnav__list a{
  display:flex;align-items:baseline;gap:.9rem;position:relative;
  text-decoration:none;color:var(--paper);
  padding:.6em 0;border-bottom:1px solid var(--line-dark-2);
}
.mnav__n{
  flex:none;width:2.2em;
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.16em;color:var(--steel-2);transition:color .2s;
}
.mnav__t{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112.5%;
  text-transform:uppercase;font-size:clamp(1.45rem,6.4vw,2rem);
  letter-spacing:-.028em;line-height:1.06;
  transition:transform .25s var(--ease),color .2s;
}
.mnav__list a:hover .mnav__t,
.mnav__list a:focus-visible .mnav__t{color:var(--hi);transform:translateX(5px)}
.mnav__list a:hover .mnav__n{color:var(--hi)}
/* where you are now, marked in the gutter */
.mnav__list a[aria-current] .mnav__t,
.mnav__list a[aria-current] .mnav__n{color:var(--hi)}
.mnav__list a[aria-current]::after{
  content:"";position:absolute;right:2px;top:50%;margin-top:-4px;
  width:8px;height:8px;background:var(--hi);border-radius:2px;
}

.mnav__cta{margin-top:clamp(20px,4vw,28px)}

/* the dead space under the button, spent on the two things a trade
   actually wants at 8pm: a number and an address */
.mnav__foot{margin-top:auto;padding-top:clamp(24px,5vw,36px)}
.mnav__footttl{
  display:flex;align-items:center;gap:.8em;margin:0 0 .9rem;
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel-2);
}
.mnav__footttl::after{content:"";flex:1;height:1px;background:var(--line-dark-2)}
.mnav__tel{
  display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--hi);
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112.5%;
  font-size:clamp(1.3rem,5.4vw,1.6rem);letter-spacing:-.022em;
}
.mnav__tel svg{width:19px;height:19px;flex:none}
.mnav__mail{
  display:inline-block;margin-top:.7rem;color:var(--on-ink);
  font-size:var(--t-sm);text-decoration:none;border-bottom:1px solid var(--line-dark);
}
.mnav__hours{
  margin:1.05rem 0 0;font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);line-height:1.9;
}

/* items arrive in sequence rather than the panel appearing all at once */
@keyframes mnavIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mnav.is-open .mnav__list a,
.mnav.is-open .mnav__cta,
.mnav.is-open .mnav__foot{animation:mnavIn .4s var(--ease) both}
.mnav.is-open .mnav__list a:nth-child(1){animation-delay:.02s}
.mnav.is-open .mnav__list a:nth-child(2){animation-delay:.06s}
.mnav.is-open .mnav__list a:nth-child(3){animation-delay:.10s}
.mnav.is-open .mnav__list a:nth-child(4){animation-delay:.14s}
.mnav.is-open .mnav__list a:nth-child(5){animation-delay:.18s}
.mnav.is-open .mnav__list a:nth-child(6){animation-delay:.22s}
.mnav.is-open .mnav__cta{animation-delay:.26s}
.mnav.is-open .mnav__foot{animation-delay:.30s}

/* ===========================================================
   SCREEN 1 — the promise

   A full-bleed backdrop with the copy held to the left half.
   The scrim is a hard left-to-right ramp, not a flat wash, so
   the photo stays visible on the right while the type keeps a
   guaranteed dark ground underneath it.
   =========================================================== */
.pitch{
  position:relative;isolation:isolate;
  min-height:calc(100vh - var(--hdr-h));
  display:flex;align-items:center;
  padding-block:clamp(48px,8vh,96px) clamp(64px,10vh,112px);
  overflow:hidden;
}

/* backdrop ------------------------------------------------- */
/* The coded field. Not a gradient for decoration's sake: it is lit like a
   photograph — one warm source low on the right, one cool lime lift high on
   the right, a slate rise in the top-left corner, and a long shaft across
   the middle. All of it sits right of the copy. Grain goes over the top in
   ::before, which is what stops it reading as CSS. */
.pitch__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    /* two diffuse falls of light, as if through a shutter — structure, so the
       right half has something to look at without becoming wallpaper */
    linear-gradient(96deg, transparent 48%, rgba(246,243,236,.13) 57.5%, transparent 66%),
    linear-gradient(96deg, transparent 69%, rgba(246,243,236,.075) 77%, transparent 85%),
    /* warm source, low right */
    radial-gradient(95% 75% at 80% 76%, rgba(226,112,63,.55) 0%, rgba(200,80,42,.18) 38%, transparent 62%),
    /* cool lift, high right */
    radial-gradient(75% 58% at 93% 14%, rgba(194,206,99,.24) 0%, transparent 56%),
    radial-gradient(130% 110% at 6% 4%, rgba(43,54,61,.55) 0%, transparent 64%),
    linear-gradient(158deg, #101720 0%, var(--ink) 42%, #05080A 100%);
}
/* film grain — cheap, static, and the whole reason this reads as depth
   rather than as a blurred gradient */
.pitch__bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the scrim only earns its keep once there's an image under it */
.pitch__bg:not(:has(.pitch__img))::after{display:none}
.pitch__bg picture{position:absolute;inset:0;display:block}
.pitch__img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}

/* coded field, visible until a photo is dropped in and behind it after */
/* the scrim: solid under the copy, clear over the image */
.pitch__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0 26%, rgba(11,16,19,.88) 44%, rgba(11,16,19,.42) 68%, rgba(11,16,19,.25) 100%),
    linear-gradient(0deg, rgba(11,16,19,.72) 0 8%, transparent 34%);
}
@media (max-width:900px){
  /* the phone file is already composed — dead space top-left for the
     headline, wrench lower-right — so it wants centring, not panning */
  .pitch__img{object-position:50% 50%}
  .pitch__bg::after{background:linear-gradient(90deg,var(--ink) 0 10%,rgba(11,16,19,.86) 55%,rgba(11,16,19,.7) 100%),linear-gradient(0deg,rgba(11,16,19,.8) 0 12%,transparent 46%)}
}

/* copy ------------------------------------------------------ */
.pitch .wrap{position:relative}
.pitch__in{max-width:min(56ch,56%)}
@media (max-width:1080px){ .pitch__in{max-width:min(58ch,78%)} }
@media (max-width:760px){ .pitch__in{max-width:100%} }

.pitch__eyebrow{
  font-family:"Martian Mono",monospace;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--hi);
  margin:0 0 clamp(18px,2.6vh,28px);
}
/* The tagline is a sentence, not a sign. It drops the brand's uppercase
   and expanded width so it stays legible at speed and fits a half-width
   column: the only place in the system where display type is set this way. */
.pitch h1{
  font-size:var(--t-pitch);font-weight:800;font-stretch:100%;
  text-transform:none;letter-spacing:-.028em;line-height:1.04;
  margin:0 0 clamp(18px,2.6vh,28px);
  max-width:20ch;text-wrap:balance;
}
.pitch h1 em{font-style:normal;color:var(--hi);display:inline-block}
.pitch__sub{
  font-size:var(--t-lede);line-height:1.5;color:var(--on-ink);
  max-width:46ch;margin:0 0 clamp(16px,2.2vh,24px);text-wrap:pretty;
}
.pitch__promise{
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:112.5%;
  font-size:var(--t-body);letter-spacing:-.01em;color:var(--hi);
  margin:0 0 clamp(22px,3vh,32px);max-width:40ch;
}
.pitch__acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(18px,2.4vh,26px)}
.pitch__meta{
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-ink-2);margin:0;line-height:2;
}

/* ===========================================================
   SCREEN 2 — the board

   Owns --hero-scroll of extra height; its panel sticks under
   the header for that distance while the week fills.
   =========================================================== */
.board{
  position:relative;
  height:calc(100vh + var(--hero-scroll));
  border-top:1px solid var(--line-dark-2);
}
.board__stick{
  position:sticky;top:var(--hdr-h);height:calc(100vh - var(--hdr-h));
  display:flex;flex-direction:column;gap:clamp(14px,2.2vh,26px);
  overflow:hidden;
  padding-block:clamp(26px,4vh,52px) clamp(20px,3vh,34px);
}
.board__head{flex:none}
.board__head .eyebrow{margin-bottom:.9rem}
.board__head h2{font-size:var(--t-h3);text-transform:none;letter-spacing:-.022em;line-height:1.12}

/* the board itself, held slightly in from the page edges */
.board__in{flex:1;min-height:0;display:flex;max-width:min(1080px,100% - (var(--gut) * 2))}

.diary{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line-dark);
  padding:clamp(13px,1.6vh,19px) clamp(13px,1.2vw,18px);position:relative;
}
.diary__top{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2.4vw,36px);
  padding-bottom:clamp(9px,1.2vh,14px);margin-bottom:clamp(9px,1.2vh,14px);
  border-bottom:1px solid var(--line-dark-2);
}
.diary__ttl{
  font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel-2);line-height:1.6;flex:none;
}
.diary__ttl b{display:block;color:var(--paper);font-weight:500}
.diary__count{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;
  font-size:var(--t-figure);letter-spacing:-.04em;color:var(--hi);line-height:.86;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.14em;flex:none;
}
.diary__count small{
  font-family:"Martian Mono",monospace;font-size:var(--t-label-lg);font-weight:400;
  color:var(--steel-2);letter-spacing:.08em;font-stretch:normal;
}
.diary__key{
  display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-2);
}
.diary__key span{display:flex;align-items:center;gap:6px}
.diary__key i{width:8px;height:8px;flex:none;font-style:normal}
.diary__key i.k-base{background:var(--ink-3);border:1px solid var(--ink-4)}
.diary__key i.k-won{background:var(--hi)}
.diary__key i.k-urgent{background:var(--rust)}

/* the running commentary: what the system just did */
.diary__cap{
  flex:1;margin:0;text-align:center;min-width:0;
  font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-2);line-height:1.6;
}
.diary__cap b{color:var(--hi);font-weight:600}
@media (max-width:900px){ .diary__cap{display:none} }

/* legend and the demo-data label, under the grid and inside the board */
.diary__legend{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  padding-top:clamp(8px,1vh,12px);margin-top:clamp(8px,1vh,12px);
  border-top:1px solid var(--line-dark-2);
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-2);
}

.diary__days{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,.5vw,8px);
}
.diary__day{display:flex;flex-direction:column;gap:clamp(4px,.5vh,8px);min-height:0}
.diary__dl{
  order:-1;flex:none;font-family:"Martian Mono",monospace;font-size:var(--t-label);
  letter-spacing:.18em;color:var(--steel-2);text-align:center;
  margin-bottom:clamp(2px,.5vh,6px);text-transform:uppercase;
}

.slot{
  flex:1;min-height:0;border:1px dashed rgba(246,243,236,.16);
  background:rgba(246,243,236,.035);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:clamp(6px,.9vh,10px) clamp(6px,.7vw,11px);
  transform:scale(.97);opacity:.72;
  transition:transform .42s var(--ease),opacity .42s var(--ease),background .42s var(--ease),border-color .42s var(--ease);
}
.slot__t,.slot__j{
  font-family:"Martian Mono",monospace;letter-spacing:.02em;line-height:1.1;
  white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .3s var(--ease) .06s;
}
.slot__t{font-size:var(--t-label);font-weight:600}
.slot__j{font-size:var(--t-label);font-weight:400}
@media (max-width:760px){ .slot__j{display:none} }

/* a job the trade was already getting */
.slot.is-on{transform:none;opacity:1;border-style:solid;border-color:#3B4850;background:#2B363D}
.slot.is-on .slot__t,.slot.is-on .slot__j{opacity:1}
.slot.is-on .slot__t{color:var(--paper)}
.slot.is-on .slot__j{color:var(--steel-2)}

/* a job the system won back */
.slot.is-on.is-won{background:var(--hi);border-color:var(--hi)}
.slot.is-on.is-won .slot__t{color:var(--ink)}
.slot.is-on.is-won .slot__j{color:color-mix(in srgb,var(--ink) 66%,transparent)}

/* the one that would have been lost without the receptionist */
.slot.is-on.is-urgent{background:var(--rust);border-color:var(--rust)}
.slot.is-on.is-urgent .slot__t{color:var(--on-rust)}
.slot.is-on.is-urgent .slot__j{color:var(--on-rust)}

/* --- the foot: the action, and nothing else ---------------- */
.board__foot{flex:none;display:flex;justify-content:center}
.board__cta{
  flex:none;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.board.is-full .board__cta{opacity:1;transform:none;pointer-events:auto}

/* no scrub: reduced motion, no JS, or a viewport too short to hold it */
.board.is-static{height:auto}
.board.is-static .board__stick{
  position:static;height:auto;
  padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,72px);
}
.board.is-static .board__in{min-height:56vh}
.board.is-static .board__cta{opacity:1;transform:none;pointer-events:auto}

@media (max-width:900px){
  .board__in{max-width:100%}
}

/* ---------- cards / panels ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,32px);position:relative;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.panel:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.panel--flat{box-shadow:none}
.panel--flat:hover{transform:none;box-shadow:none}
/* shadow reads as mud on the ink ground; dark surfaces stay flat */
.on-ink .panel{background:var(--ink-2);border-color:var(--line-dark);box-shadow:none}
.on-ink .panel:hover{border-color:var(--hi)}
.panel h3{margin-bottom:.6rem}
.panel p{font-size:var(--t-sm);color:color-mix(in srgb,var(--ink) 70%,transparent)}
.on-ink .panel p{color:var(--on-ink-2)}

.num{font-family:"Martian Mono",monospace;font-size:var(--t-label-lg);font-weight:600;letter-spacing:.11em;color:var(--hi-3);display:block;margin-bottom:1.1rem}
.on-ink .num{color:var(--hi)}

.ico{width:36px;height:36px;margin-bottom:1.2rem;color:var(--ink);stroke-width:1.4}
.on-ink .ico{color:var(--hi)}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.on-ink .stats{border-color:var(--line-dark);background:var(--ink-2)}
.stat{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line)}
.on-ink .stat{border-color:var(--line-dark)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;font-size:var(--t-figure-lg);letter-spacing:-.045em;line-height:1;margin-bottom:.6rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.on-ink .stat b{color:var(--paper)}
/* Tracked uppercase mono needs width. Below roughly 240px a cell these
   labels break to four lines and the figure stops reading as the point
   of the tile, which is why this band is laid out full-bleed rather than
   squeezed into a half-width column. */
/* Direct child only. `.stat span` also matched the <span data-countto>
   nested inside the <b>, so every animated figure was being rendered at
   label size in label type — only the one hard-coded figure (24/7)
   escaped it and looked correct. */
.stat > span{display:block;font-family:"Martian Mono",monospace;font-size:var(--t-label-lg);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);line-height:1.7;max-width:22ch}
.on-ink .stat > span{color:var(--steel-2)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.on-ink .stat:nth-child(-n+2){border-bottom-color:var(--line-dark)}}
@media (max-width:460px){.stats{grid-template-columns:1fr}.stat{border-right:0 !important;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}}

/* ---------- leak diagram ---------- */
.leak{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
.leak__step{padding:clamp(20px,2.3vw,28px);border-right:1px solid var(--line-dark);position:relative;background:var(--ink-2)}
.leak__step:last-child{border-right:0}
/* Three equal rules. They mark the three leaks; they are not a bar chart,
   so they carry no width or colour difference to be misread as a quantity. */
.leak__bar{width:100%;height:6px;border-radius:3px;background:var(--hi);margin-bottom:1.2rem;transform-origin:left;animation:barIn .9s var(--ease) both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.leak__pct{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;font-size:var(--t-figure);letter-spacing:-.04em;line-height:1;margin-bottom:.55rem;color:var(--paper);text-transform:uppercase}
.leak__step h3,.leak__step h4{margin-bottom:.45rem}
.leak__step p{font-size:var(--t-sm);color:var(--steel-2);margin:0}
@media (max-width:860px){.leak{grid-template-columns:1fr}.leak__step{border-right:0;border-bottom:1px solid var(--line-dark)}.leak__step:last-child{border-bottom:0}}

/* ---------- two-column compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.compare__col{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);background:var(--paper)}
.compare__col--good{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.compare__col--good h3{color:var(--hi)}
.tick-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem}
.tick-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--t-sm);line-height:1.5}
.tick-list li svg{width:17px;height:17px;flex:none;margin-top:3px}
.tick-list--bad li svg{color:var(--rust)}
.tick-list--good li svg{color:var(--hi)}
.compare__col--good li{color:var(--on-ink)}

/* ---------- SMS demo ---------- */
.demo{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.5vw,64px);align-items:center}
@media (max-width:900px){.demo{grid-template-columns:1fr}}
.phone{width:min(320px,100%);margin-inline:auto;background:var(--ink-2);border:8px solid var(--bezel);border-radius:var(--r-device);padding:14px 12px 18px;box-shadow:var(--shadow-object);position:relative}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:3px;background:var(--void)}
.phone__bar{display:flex;align-items:center;gap:8px;padding:14px 6px 12px;border-bottom:1px solid var(--line-dark-2);margin-bottom:12px}
.phone__av{width:26px;height:26px;border-radius:50%;background:var(--hi);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:800;font-family:"Archivo",sans-serif;flex:none}
.phone__name{font-size:var(--t-xs);font-weight:600;color:var(--paper);line-height:1.2}
.phone__name small{display:block;font-family:"Martian Mono",monospace;font-size:var(--t-nano);letter-spacing:.11em;color:var(--steel-2);text-transform:uppercase;margin-top:3px;font-weight:400}
.thread{min-height:300px;display:flex;flex-direction:column;gap:9px;padding:2px 4px}
.bub{max-width:84%;padding:.62em .85em;border-radius:var(--r-bubble);font-size:var(--t-xs);line-height:1.42;animation:bubIn .38s var(--ease) both}
.bub--out{align-self:flex-end;background:var(--hi);color:var(--ink);border-bottom-right-radius:4px}
.bub--in{align-self:flex-start;background:var(--ink-3);color:var(--paper);border-bottom-left-radius:4px}
.bub--sys{align-self:center;background:transparent;color:var(--steel-2);font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;padding:.3em 0;text-align:center}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.demo__ctrls{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.7rem}
.branch{display:grid;gap:12px;margin-top:1.6rem}
.branch__row{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border:1px solid var(--line-dark);border-radius:var(--r-md);background:var(--ink-2)}
.branch__row b{display:block;font-size:var(--t-sm);margin-bottom:.25rem;color:var(--paper)}
.branch__row p{font-size:var(--t-sm);color:var(--steel-2);margin:0}
.branch__dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px}
.branch__dot--up{background:var(--hi)}
.branch__dot--down{background:var(--rust)}

/* ---------- steps ---------- */
/* One shared number column for the whole list, via subgrid. Each .step
   used to be its own grid, so a row labelled "D1" and a row labelled
   "D3–5" sized their first column independently and the headings landed
   at different left edges. */
.steps{display:grid;gap:0 clamp(18px,3vw,44px);grid-template-columns:auto minmax(0,1fr);counter-reset:s}
.step{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
@supports not (grid-template-columns:subgrid){
  .steps{display:block}
  .step{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,3vw,44px)}
}
.step:last-child{border-bottom:1px solid var(--line)}
.on-ink .step{border-color:var(--line-dark)}
.step__n{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;font-size:var(--t-figure-lg);letter-spacing:-.05em;line-height:.85;color:var(--paper-3);min-width:2.4ch}
.on-ink .step__n{color:var(--ink-4)}
.step__b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(10px,2.4vw,40px);align-items:start}
@media (max-width:760px){.step__b{grid-template-columns:1fr;gap:.7rem}}
.step__b p{margin:0;font-size:var(--t-sm);color:color-mix(in srgb,var(--ink) 70%,transparent)}
.on-ink .step__b p{color:var(--on-ink-2)}

/* ---------- track: the seven-day method ----------
   A works schedule, not a list. A lime rail runs the height of the
   section; each day is a stamped node with the deliverables printed
   beside it, and the rail terminates in the guarantee.            */
.track{list-style:none;margin:0;padding:0;display:grid;gap:0}
.track__step{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.6vw,36px);align-items:stretch;
}

/* rail column: the node, then a hairline that carries on to the next node */
.track__mark{display:flex;flex-direction:column;align-items:center;gap:10px}
.track__mark::after{content:"";flex:1;width:2px;min-height:16px;background:var(--line-dark)}
.track__step:last-child .track__mark::after{display:none}
.track__n{
  display:grid;place-items:center;flex:none;
  width:clamp(46px,4.4vw,58px);height:clamp(46px,4.4vw,58px);
  border:2px solid var(--hi);border-radius:var(--r-md);background:var(--ink);
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.04em;color:var(--hi);
  font-variant-numeric:tabular-nums;
}

.track__body{padding-bottom:clamp(28px,3.2vw,44px)}
.track__step:last-child .track__body{padding-bottom:0}
.track__when{
  font-family:"Martian Mono",monospace;font-size:var(--t-label-lg);
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--hi);margin:0 0 .5rem;
}
.track__body h3{margin:0 0 .6rem}
.track__body > p{margin:0;font-size:var(--t-sm);color:var(--on-ink-2);max-width:62ch}

/* what actually lands that day */
.track__out{
  list-style:none;margin:1.15rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.track__out li{
  display:flex;gap:.6rem;align-items:flex-start;
  border:1px solid var(--line-dark);border-radius:var(--r-md);
  background:var(--ink-2);padding:.72rem .9rem;
  font-size:var(--t-sm);line-height:1.34;color:var(--on-ink);
}
.track__out li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:.42em;
  background:var(--hi);border-radius:2px;
}

/* the rail terminates in the promise */
.track__end{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;
  margin:clamp(26px,3vw,38px) 0 0;
  border:2px solid var(--hi);border-radius:var(--r-md);
  padding:clamp(14px,1.6vw,18px) clamp(15px,2vw,22px);
  background:color-mix(in srgb,var(--hi) 9%,transparent);
}
.track__endtag{
  flex:none;font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:var(--hi);color:var(--ink);padding:.5em .75em;border-radius:var(--r);
}
.track__endtxt{
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:112.5%;
  font-size:var(--t-body);letter-spacing:-.014em;color:var(--paper);text-wrap:balance;
}

@media (max-width:860px){
  .track__out{grid-template-columns:1fr;gap:8px}
}
@media (max-width:600px){
  .track__n{width:42px;height:42px;font-size:1rem;border-width:2px}
  .track__step{gap:14px}
}

/* ===========================================================
   WHAT WE BUILD

   Three devices, in order of the page: the loop shown as a
   strip, the four parts as spec plates, and the rest as a
   divided board. Dividers are drawn with a 1px grid gap over
   a line-coloured ground, so no nth-child arithmetic is
   needed when the column count changes.
   =========================================================== */

/* ---------- flow: the machine, drawn as a loop ---------- */
.flow{
  list-style:none;margin:clamp(26px,3.2vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
}
.flow li{
  position:relative;background:var(--ink-2);
  padding:clamp(15px,1.7vw,21px);display:grid;gap:.28rem;align-content:start;
}
.flow li:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.flow li:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0}
.flow__k{
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--hi);
}
.flow b{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112.5%;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:-.022em;color:var(--paper);
}
.flow small{font-size:var(--t-sm);color:var(--steel-2);line-height:1.35}
/* the joint between two cells, sitting over the divider */
.flow li:not(:last-child)::after{
  content:"";position:absolute;z-index:2;right:-6px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-top:2px solid var(--hi);border-right:2px solid var(--hi);
  transform:rotate(45deg);background:var(--ink-2);
}
.flow__note{
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2);
  margin:.9rem 0 0;
}
@media (max-width:820px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow li,.flow li:first-child,.flow li:last-child{border-radius:0}
  .flow li::after{display:none}
}
@media (max-width:480px){ .flow{grid-template-columns:1fr} }

/* ---------- parts: four spec plates ---------- */
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.part{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.part::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--hi)}
.part:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.part__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
/* number and icon read as one stamped mark, not two competing corners */
.part__mark{display:flex;align-items:center;gap:.85rem}
.part__n{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;
  font-size:var(--t-figure);letter-spacing:-.05em;line-height:.82;
  color:var(--paper-3);font-variant-numeric:tabular-nums;
}
/* which plan turns this part on — the question the page has to answer */
.part__tier{
  flex:none;font-family:"Martian Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.52em .85em;color:var(--steel);white-space:nowrap;
}
.part__tier--all{background:var(--hi);border-color:var(--hi);color:var(--ink)}
.part .ico{width:28px;height:28px;margin-bottom:0;stroke-width:1.6;color:var(--hi-3)}
.part h3{margin-bottom:.6rem}
.part__copy{font-size:var(--t-sm);color:color-mix(in srgb,var(--ink) 70%,transparent);margin:0}
.part__go{margin-top:auto;padding-top:1.35rem}
@media (max-width:820px){.parts{grid-template-columns:1fr}}

/* ---------- spec board: included on every build ---------- */
.spec{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
}
.spec__row{background:var(--ink-2);padding:clamp(20px,2.2vw,28px)}
.spec__tick{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;margin-bottom:.95rem;
  border:1.5px solid var(--hi);border-radius:var(--r);color:var(--hi);
}
.spec__tick svg{width:15px;height:15px}
.spec__row h3{margin-bottom:.45rem}
.spec__row p{font-size:var(--t-sm);color:var(--steel-2);margin:0}
@media (max-width:960px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.spec{grid-template-columns:1fr}}

/* ---------- rules: numbered plates on the step rhythm ----------
   The ghost numerals were --ink-4 on an ink ground: technically present,
   practically invisible. Same row layout, but the number becomes a lime
   plate, which also ties the page to the seven-day track. */
.steps--rules .step__n{
  display:grid;place-items:center;
  width:clamp(42px,3.6vw,52px);height:clamp(42px,3.6vw,52px);
  border:2px solid var(--hi);border-radius:var(--r-md);
  font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1;color:var(--hi);
  font-stretch:112.5%;letter-spacing:-.03em;
}
.on-ink .steps--rules .step__n{color:var(--hi)}
.steps--rules .step{align-items:start}

/* ---------- upside/risk grid ---------- */
.updown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,16px)}
.updown .panel--flat{display:flex;flex-direction:column;gap:.45rem}
/* the honest counterweight is marked, not hidden among the upsides */
.updown__risk{border-color:var(--rust);background:color-mix(in srgb,var(--rust) 6%,transparent)}
.updown__flag{
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--rust);margin-bottom:.15rem;
}
@media (max-width:620px){.updown{grid-template-columns:1fr}}

/* ===========================================================
   STRAIGHT TALK

   Sixteen questions in one narrow column gave no sense of place
   and left half the viewport empty. A sticky rail carries the
   four groups, so the page always says where you are and how
   much is left, and the answers get the width back.
   =========================================================== */
.qa{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.qa__rail{position:sticky;top:calc(var(--hdr-h) + 28px)}
.qa__railttl{
  font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);margin:0 0 1rem;
}
.qa__nav{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.qa__nav li{border-bottom:1px solid var(--line)}
.qa__nav a{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.8rem 0;text-decoration:none;color:var(--ink);
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:105%;
  font-size:var(--t-h4);letter-spacing:-.014em;
  border-left:2px solid transparent;padding-left:0;
  transition:color .2s,border-color .2s,padding-left .2s var(--ease);
}
.qa__nav a:hover{color:var(--hi-3);padding-left:.55rem;border-left-color:var(--hi)}
.qa__nav a[aria-current="true"]{color:var(--hi-3);padding-left:.55rem;border-left-color:var(--hi)}
.qa__n{font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.14em;color:var(--steel);flex:none}
.qa__railfoot{margin-top:1.6rem;font-size:var(--t-sm);color:var(--steel)}

.qa__group{margin-bottom:clamp(40px,4.4vw,64px)}
.qa__group:last-child{margin-bottom:0}
.qa__head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.1rem;scroll-margin-top:calc(var(--hdr-h) + 24px)}
.qa__head h2{font-size:var(--t-h3)}
.qa__count{font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

/* open question gets a lime edge so the answer is clearly attached to it */
.faq details[open]{box-shadow:inset 2px 0 0 var(--hi)}
.faq details[open] summary,.faq details[open] .faq__a{padding-left:1.1rem}

@media (max-width:900px){
  .qa{grid-template-columns:1fr;gap:0}
  .qa__rail{position:static;margin-bottom:2.4rem}
  .qa__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .qa__nav a{border-left:0;border-top:2px solid var(--line)}
  .qa__nav a:hover,.qa__nav a[aria-current="true"]{padding-left:0;border-left-color:transparent;border-top-color:var(--hi)}
  .qa__nav li{border-bottom:0}
  .qa__railfoot{display:none}
}
@media (max-width:520px){ .qa__nav{grid-template-columns:1fr} }

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media (max-width:960px){.tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.tier{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:clamp(22px,2.2vw,28px);position:relative;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier--feat{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--shadow-md)}
.tier--feat h3{color:var(--paper)}
.tier__flag{position:absolute;top:-1px;right:18px;background:var(--hi);color:var(--ink);font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.46em .72em;border-radius:0 0 var(--r) var(--r)}
.tier__stage{font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:.7rem}
.tier--feat .tier__stage{color:var(--hi)}
.tier h3{margin-bottom:.5rem}
.tier__for{font-size:var(--t-sm);line-height:1.45;color:color-mix(in srgb,var(--ink) 64%,transparent);min-height:3em;margin-bottom:1.2rem}
.tier--feat .tier__for{color:var(--on-ink-2)}
.tier__price{display:flex;align-items:baseline;gap:.3rem;margin-bottom:.35rem}
.tier__price b{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;font-size:var(--t-figure);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.tier__price span{font-size:var(--t-sm);color:var(--steel)}
.tier__vat{font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--steel);margin-bottom:1.4rem}
.tier__feats{list-style:none;margin:0 0 1.6rem;padding:1.4rem 0 0;border-top:1px solid var(--line);display:grid;gap:.72rem;flex:1}
.tier--feat .tier__feats{border-color:var(--line-dark)}
.tier__feats li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);line-height:1.42}
.tier__feats svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--hi-3)}
.tier--feat .tier__feats svg{color:var(--hi)}
.tier__feats li.is-key{font-weight:600}
.tier .btn{margin-top:auto}

/* Full Fit-Out — warm rust accent so the top stage reads as a real step up,
   not a leftover column. Deliberately a different temperature to the lime
   on Second Fix, so the two never compete for the same glance. */
.tier--prem{background:var(--paper-2);border-color:color-mix(in srgb,var(--rust) 40%,transparent);box-shadow:var(--shadow-md)}
.tier--prem::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,var(--rust),var(--rust-2))}
.tier--prem .tier__flag{background:var(--rust);color:var(--paper);z-index:1}
.tier--prem .tier__stage{color:var(--rust)}
.tier--prem .tier__feats svg{color:var(--rust)}
.tier--prem .tier__feats{border-color:color-mix(in srgb,var(--rust) 24%,transparent)}
.tier--prem .btn--ghost{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}

/* value proof — what the stage replaces, so the price reads as a saving */
.tier__value{margin:0 0 1.3rem;padding:.85rem 0 .85rem 1rem;border-left:3px solid var(--rust)}
.tier__value b{display:block;font-family:"Martian Mono",monospace;font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--rust);margin-bottom:.4rem}
.tier__value span{display:block;font-size:var(--t-sm);line-height:1.45;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.tier--feat .tier__value{border-color:var(--hi)}
.tier--feat .tier__value b{color:var(--hi)}
.tier--feat .tier__value span{color:var(--on-ink-2)}

.ptable{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ptable th,.ptable td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--line-2)}
.ptable th:first-child,.ptable td:first-child{text-align:left;font-weight:500}
.ptable thead th{background:var(--ink);color:var(--paper);font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-bottom:0}
.ptable tbody tr:hover{background:var(--paper-2)}
.ptable .yes{color:var(--hi-3);font-weight:700}
.ptable .no{color:var(--paper-3)}
.ptable .no::before{content:"–";font-weight:600}
.ptable td small{display:block;font-size:var(--t-xs);color:var(--steel)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll table{min-width:720px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.on-ink .faq{border-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line)}
.on-ink .faq details{border-color:var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 3rem 1.3rem 0;position:relative;font-family:"Archivo",sans-serif;font-weight:700;font-size:var(--t-h3);letter-spacing:-.022em;line-height:1.22;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--hi-3)}
.on-ink .faq summary:hover{color:var(--hi)}
.faq summary::after{content:"";position:absolute;right:6px;top:1.6rem;width:14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 100% no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(90deg);opacity:.5}
.faq details[open] summary{color:var(--hi-3)}
.on-ink .faq details[open] summary{color:var(--hi)}
.faq__a{padding:0 clamp(0px,6vw,80px) 1.6rem 0;font-size:var(--t-body);color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:68ch;animation:fadeUp .35s var(--ease)}
.on-ink .faq__a{color:var(--on-ink-2)}

/* ---------- cta band ---------- */
.cta{position:relative;background:var(--hi);color:var(--ink);overflow:hidden}
.cta__in{position:relative;text-align:center;max-width:44rem;margin-inline:auto}
.cta h2{margin-bottom:1.1rem}
.cta p{font-size:var(--t-lede);color:rgba(11,16,19,.74);margin-bottom:1.9rem}
.cta__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:.45rem}
.field label{font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.field input,.field select,.field textarea{
  width:100%;padding:.85em 1em;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r);
  font-family:inherit;font-size:var(--t-body);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--hi-ring)}
.field textarea{resize:vertical;min-height:130px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--paper);padding-block:clamp(50px,6vw,80px) 30px}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px);padding-bottom:clamp(30px,4vw,52px);border-bottom:1px solid var(--line-dark-2)}
@media (max-width:900px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__top{grid-template-columns:1fr}}
.ftr h2,.ftr h4,.ftr .h4{font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.17em;text-transform:uppercase;color:var(--hi);margin-bottom:1.2rem;font-weight:600;line-height:1.4}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ftr a{text-decoration:none;font-size:var(--t-sm);color:var(--on-ink-2);transition:color .2s}
.ftr a:hover{color:var(--hi)}
.ftr__blurb{font-size:var(--t-sm);color:var(--on-ink-2);max-width:32ch;margin-top:1.1rem}
.ftr__hours{font-size:var(--t-sm);color:var(--on-ink-2)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:26px;font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--steel-2)}
.ftr__bot a{font-family:inherit;font-size:inherit;letter-spacing:inherit}

/* ---------- mobile action bar ----------

   The bar stows itself whenever a real "Book a call" button is on
   screen, so the same action is never offered twice at once. It rises
   only in the gaps between them.

   Without JS it simply stays up: a visitor never loses the action
   because a script didn't run. The padding on body is held constant
   either way, so the bar sliding in and out never reflows the page. */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);
  border-top:1.5px solid var(--hi);
  transition:transform .3s var(--ease);
}
.mbar a{display:flex;align-items:center;justify-content:center;gap:.5em;padding:1em;text-decoration:none;font-weight:700;font-family:"Archivo",sans-serif;font-size:var(--t-sm);background:var(--ink);color:var(--paper)}
.mbar a.p{background:var(--hi);color:var(--ink)}
.mbar svg{width:16px;height:16px}
@media (max-width:760px){.mbar{display:grid}body{padding-bottom:56px}}

/* stowed by default once JS is running; raised only when told to */
.js .mbar{transform:translateY(110%)}
.js .mbar.is-up{transform:none}
/* the open menu carries its own full-width call button */
.mnav.is-open ~ .mbar{transform:translateY(110%)}

/* ---------- reveal ----------
   Only hide content once JS has confirmed it can reveal it. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
/* already on screen at load: no entrance, no delay */
.js .rv.no-anim{transition:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- page header (inner pages) ---------- */
.phead{padding-block:clamp(44px,5.2vw,78px) clamp(38px,4.6vw,66px);position:relative;overflow:hidden}
.phead__in{position:relative;max-width:52rem}
.phead + .section,.phead + .section--tight{padding-top:clamp(36px,4vw,58px)}
.phead h1{font-size:var(--t-display-sm);margin-bottom:1.05rem}
.phead .lede{max-width:56ch}
.crumb{font-family:"Martian Mono",monospace;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2);margin-bottom:1.6rem;display:flex;gap:.6em;flex-wrap:wrap}
.crumb a{text-decoration:none;color:var(--steel-2)}
.crumb a:hover{color:var(--hi)}

/* misc */
.note{
  border-top:2px solid var(--ink);padding-top:.85rem;
  font-size:var(--t-sm);color:color-mix(in srgb,var(--ink) 72%,transparent);
}
.on-ink .note{border-top-color:var(--hi);color:var(--on-ink-2)}
/* A pull-quote, not a heading. It used to be uppercase-expanded-800,
   which outranked the section heading above it and inverted the order
   of the page. It now sits deliberately below h2: same sentence case,
   lighter, tinted, and set on a shorter measure so it still lands. */
.kicker{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:105%;font-size:var(--t-kicker);letter-spacing:-.02em;line-height:1.22;text-wrap:balance;color:var(--hi-3)}
.on-ink .kicker{color:var(--hi)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:var(--r-pill);padding:.42em .95em;font-size:var(--t-sm);background:var(--paper)}
.on-ink .chip{border-color:var(--line-dark);background:var(--ink-2);color:var(--on-ink)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* utility spacing, replaces inline styles */
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:2rem}
.stack-sm{display:grid;gap:.85rem}
.list-plain{list-style:none;margin:0;padding:0}