/* ==========================================================================
   the GEO folk - website v4
   Reference implementation of the locked design system.

   Tokens below are transcribed from 00_Agency\brand-guidelines.md and from
   nowhere else. If a value here disagrees with that file, that file wins and
   this file is the defect. Change the guidelines first, then this, in the
   same edit - that is the token sync rule.
   ========================================================================== */

:root{
  /* ---- 1. Colour ---- */
  --ink:#0A0A0A;
  --carbon:#161616;
  --graphite:#3A3A3A;      /* light surfaces only - fails AA on dark */
  --mist:#A3A3A3;          /* muted text on dark - passes AA at body sizes */
  --yellow:#FFD60A;
  --yellow-pressed:#E6BF09;
  --bone:#F2F2F2;
  --white:#FFFFFF;
  --line:#E5E5E5;

  /* raised surfaces derived from Carbon, kept honest to the palette */
  --carbon-2:#1C1C1C;
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.16);

  /* ---- 2. Type scale - eight steps, no in-between sizes, ever ---- */
  --t-display:clamp(42px,6vw,68px);
  --t-h1:clamp(30px,4vw,46px);
  --t-h2:26px;
  --t-h3:21px;
  --t-lead:19px;
  --t-body:17px;
  --t-small:15px;
  --t-term:14px;

  --f-display:'Fraunces',Georgia,serif;
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-term:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* ---- 3. Spacing menu - every gap comes from this list ---- */
  --xs:4px;  --s:8px;   --m:16px;  --l:24px;
  --xl:32px; --2xl:48px; --3xl:96px; --4xl:128px;

  /* ---- 4. Motion ---- */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-emph:cubic-bezier(0.65,0,0.35,1);
  --quick:120ms; --base:220ms; --slow:360ms;

  --wrap:1140px;
}

/* ---------- reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font:400 var(--t-body)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 var(--m)}
h1,h2,h3{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

/* every corner on this site is square. circles stay circles. */
input,button,textarea,select,img,a,div,section,article{border-radius:0}

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

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

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--yellow);color:var(--ink);padding:var(--m);font-weight:600}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--l)}

/* ---------- type steps ---------- */
.display{
  font:600 var(--t-display)/1.06 var(--f-display);
  font-optical-sizing:auto;
  letter-spacing:-.015em;
  margin:0 0 var(--m);
}
.h1{font:600 var(--t-h1)/1.1 var(--f-display);font-optical-sizing:auto;letter-spacing:-.01em;margin:0 0 var(--s)}
h2{font:600 var(--t-h2)/1.2 var(--f-display);font-optical-sizing:auto}
h3{font:600 var(--t-h3)/1.3 var(--f-body)}
.lead{font:400 var(--t-lead)/1.55 var(--f-body);color:var(--mist);max-width:56ch}
.small{font-size:var(--t-small);color:var(--mist);line-height:1.55}

/* terminal accent. sentence case, never all-caps. seasoning, never the meal. */
.term,.promise,.tag,.pill,.brk-cta,.ann-a,.cta-lab,.dest-t{
  font-family:var(--f-term);
  font-size:var(--t-term);
  line-height:1.5;
  letter-spacing:0;
}
.pr{color:var(--yellow)}

/* ---------- the bracket frame: four yellow corner ticks ---------- */
.bracket{position:relative}
.bracket::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:2px solid var(--yellow);opacity:0;
}
@supports ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .bracket::before{
    opacity:1;
    --c:linear-gradient(#000 0 0);
    -webkit-mask:var(--c) top left/18px 18px no-repeat,var(--c) top right/18px 18px no-repeat,
                 var(--c) bottom left/18px 18px no-repeat,var(--c) bottom right/18px 18px no-repeat;
            mask:var(--c) top left/18px 18px no-repeat,var(--c) top right/18px 18px no-repeat,
                 var(--c) bottom left/18px 18px no-repeat,var(--c) bottom right/18px 18px no-repeat;
  }
}

/* ---------- CTA set ---------- */
/* primary: the terminal pill. square, yellow outline, blinking cursor. */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:15px 22px;
  background:#121212;
  border:1.5px solid var(--yellow);
  color:var(--yellow);
  font-weight:500;
  transition:background var(--base) var(--ease),box-shadow var(--base) var(--ease);
}
.pill .cur{width:8px;height:15px;background:var(--yellow);margin-left:2px;animation:blink 1s steps(1,end) infinite}
.pill:hover{background:#1E1B0C;box-shadow:0 0 0 1px var(--yellow),0 0 30px rgba(255,214,10,.34)}
.pill:active{background:var(--yellow-pressed);color:var(--ink);border-color:var(--yellow-pressed);transform:translateY(1px)}
.pill:active .cur{background:var(--ink)}

/* secondary: the bracket CTA. white mono, four yellow corner ticks.
   No "> " prefix here on purpose - the prefix belongs to the pill, so the two
   treatments never read as the same button at two sizes.

   HOVER (Darren, 10 Aug 2026 - canonical, replaces the old underline): the
   four ticks EXTEND along the edges and join into a complete rectangle. It is
   one animated property - the mask's tile size grows from 12px to half the
   button - so the ticks visibly travel rather than cross-fading. */
.brk-cta{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:14px 18px;color:var(--white);
}
.brk-cta::before{content:'';position:absolute;inset:0;border:1.5px solid var(--yellow);opacity:0}
@supports ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .brk-cta::before{
    opacity:1;--c:linear-gradient(#000 0 0);--tick:12px;
    -webkit-mask:var(--c) top left/var(--tick) var(--tick) no-repeat,var(--c) top right/var(--tick) var(--tick) no-repeat,
                 var(--c) bottom left/var(--tick) var(--tick) no-repeat,var(--c) bottom right/var(--tick) var(--tick) no-repeat;
            mask:var(--c) top left/var(--tick) var(--tick) no-repeat,var(--c) top right/var(--tick) var(--tick) no-repeat,
                 var(--c) bottom left/var(--tick) var(--tick) no-repeat,var(--c) bottom right/var(--tick) var(--tick) no-repeat;
    transition:-webkit-mask-size var(--base) var(--ease),mask-size var(--base) var(--ease);
  }
  .brk-cta:hover::before,.brk-cta:focus-visible::before{--tick:50.5%}
}
/* browsers without mask support get the full outline on hover instead of
   nothing - the affordance never disappears. */
@supports not ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .brk-cta:hover::before,.brk-cta:focus-visible::before{opacity:1}
}

.tlink{
  color:var(--white);font-weight:600;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat left 100%/0 1.5px;
  transition:background-size var(--base) var(--ease);
}
.tlink:hover{background-size:100% 1.5px}

@keyframes blink{0%,50%{background:var(--yellow)}50.01%,100%{background:transparent}}

/* ==========================================================================
   ANNOUNCEMENT BAR - the human ask, above everything, no dismiss control.
   Deliberately a small signal, not a dominant yellow element: only the
   prefix and the hover underline are yellow, so the hero pill still owns
   screen one.
   ========================================================================== */
.ann{background:var(--carbon);border-bottom:1px solid var(--hair)}
.ann-row{display:flex;justify-content:center}
/* Smaller reads more premium - a thin line of type, not a banner. 13px on a
   30px bar, letter-spaced so it stays legible and still catches the eye.
   Darren, 12 Aug 2026. */
.ann-a{
  display:inline-flex;align-items:center;gap:var(--xs);
  min-height:30px;padding:4px 0;color:var(--mist);
  font-size:13px;letter-spacing:.02em;
}
.ann-tx{
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat left 100%/0 1.5px;
  transition:background-size var(--base) var(--ease);
}
.ann-a b{color:var(--white);font-weight:500}
.ann-a:hover .ann-tx{background-size:100% 1.5px}



/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:40;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.hdr-row{display:flex;align-items:center;gap:var(--l);min-height:76px}
.brand{display:flex;align-items:center;gap:var(--s);flex:0 0 auto}
.brand-tx{display:flex;flex-direction:column;line-height:1.15}
.brand-wm{height:40px;width:auto;display:block}
@media (max-width:760px){.brand-wm{height:32px}}
.about-formerly{font-size:var(--t-small);color:var(--mist);margin:0 0 var(--m)}
.brand-tx b{font:600 var(--t-small)/1.2 var(--f-body);letter-spacing:.01em}
.brand-tx small{font:400 12px/1.3 var(--f-body);color:var(--mist)}
/* the permanent customer strapline. Quiet by design - the wordmark above it
   stays dominant. One line while the header has room; below that it wraps to
   two balanced lines rather than one long one and one orphan.
   Sits at the 15px type-scale floor (--t-small) in header AND footer: 12px was
   an inherited v4.0 value and brand-level copy respects the scale. V4.3.1. */
.brand-tx small.strapline{font-size:var(--t-small)}
.strapline{text-wrap:balance}
@media (max-width:1100px){.strapline{max-width:26ch}}

.nav{display:flex;align-items:center;gap:var(--l);margin-left:auto}
.nav .top{font-size:var(--t-small);color:var(--white);padding:12px 0;display:inline-flex;align-items:center;gap:6px}
.nav .top:hover{color:var(--yellow)}
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}

.ni{position:relative}
.panel{
  position:absolute;top:100%;left:-16px;min-width:320px;
  background:var(--carbon);border:1px solid var(--hair-2);
  padding:var(--s);display:none;
}
.ni:hover .panel,.ni:focus-within .panel{display:block}
.p-item{display:block;padding:12px var(--m)}
.p-item b{display:block;font-size:var(--t-small);font-weight:600}
.p-item small{display:block;font-size:13px;color:var(--mist)}
.p-item:hover{background:#202020}
.p-item:hover b{color:var(--yellow)}

.menu{display:none}
.burger{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin-left:auto}
.burger::-webkit-details-marker{display:none}
.burger i{width:22px;height:1.5px;background:var(--white);position:relative;display:block}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:22px;height:1.5px;background:var(--white)}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.menu[open] .burger i{background:transparent}
.menu[open] .burger i::before{top:0;transform:rotate(45deg);background:var(--yellow)}
.menu[open] .burger i::after{top:0;transform:rotate(-45deg);background:var(--yellow)}

/* ==========================================================================
   FLOW A - one continuous surface behind hero, situations and destinations.
   This is the anti-block device: the dot grid and the route line do not stop
   at a section boundary, so the eye never registers a stripe.
   ========================================================================== */
.flow{
  position:relative;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:28px 28px;
  background-position:0 0;
}
.flow::after{ /* the grid fades out into the next section rather than stopping */
  content:'';position:absolute;left:0;right:0;bottom:0;height:220px;
  background:linear-gradient(to bottom,transparent,var(--ink));
  pointer-events:none;
}
.route-a{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.route-a path{
  fill:none;stroke:var(--yellow);stroke-opacity:.30;stroke-width:1.5;
  stroke-dasharray:5 8;vector-effect:non-scaling-stroke;
}

/* ---------- 1. HERO ----------
   The hero owns one screen exactly, so the word budget for the first
   viewport is the hero's own copy and nothing else. The situation cards
   below then peek by the height of their overlap - enough to say "there
   is more", not enough to spend the next screen's words early.

   Spacing (Darren, 10 Aug): the copy sits UP. Top padding drops two steps on
   the menu (4xl to 2xl) and the row aligns to the top rather than centring,
   so the writing is the first thing the page says. One clear step of air
   still separates it from the header. */
.hero{
  position:relative;z-index:1;
  min-height:calc(100svh - 76px);
  display:flex;align-items:flex-start;
  padding:var(--2xl) 0 var(--4xl);
}

/* ---- hero wave (canvas ocean, hero only) ----
   Namespaced .hwave so it never collides with the .wave section divider. */
.hwave{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hwave canvas{display:block;width:100%;height:100%;opacity:.55}
/* Sector pages put the mini flow map in the second track. 300px fixed was too
   narrow for it, and .hero-mini's width:min(420px,44%) then resolved against
   that track (44% of 300px = 132px), which is why the map rendered as a
   squeezed strip of wrapped monospace. Track now flexes 340-440px. */
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:var(--2xl);align-items:center;width:100%}
.hero-copy{max-width:720px}          /* deliberately not the full measure */
.kicker{
  font:500 var(--t-term)/1.5 var(--f-term);
  color:var(--mist);margin:0 0 var(--m);letter-spacing:.01em;
}
p.kicker{display:none!important}
.kicker .fs{color:var(--yellow)}
.hero-sub{margin:0 0 var(--xl);max-width:46ch}
/* the seed line above the hero CTA (V5 GPT Review). Mono, Mist, quiet - it
   frames the button rather than competing with it, so the CTA never travels
   without its reason attached. */
.hero-seed{font:400 var(--t-term)/1.6 var(--f-term);color:var(--mist);margin:0 0 var(--m);max-width:46ch}
.hero-copy .hero-sub:has(+ .hero-seed){margin-bottom:var(--l)}

/* PINNED - the map-geometry flourish, entering on the cursor-reveal */
.flourish{position:relative;justify-self:end;width:260px;height:220px}
.reveal{
  clip-path:inset(0 100% 0 0);
  animation:sweep 900ms var(--ease-emph) 450ms forwards;
}
@keyframes sweep{to{clip-path:inset(0 0 0 0)}}
.rv-cur{
  position:absolute;top:26%;left:0;width:11px;height:34px;background:var(--yellow);
  animation:curSweep 900ms var(--ease-emph) 450ms forwards,
            curBlink 225ms steps(1,end) 450ms 4;
}
@keyframes curSweep{from{left:0}99%{left:calc(100% - 11px);visibility:visible}to{left:calc(100% - 11px);visibility:hidden}}
@keyframes curBlink{0%,50%{background:var(--yellow)}50.01%,100%{background:transparent}}
.flourish .rt{stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-dasharray:4 6}
.flourish .nd{fill:none;stroke:var(--white);stroke-width:1.5}
.flourish .nd.on{fill:var(--yellow);stroke:var(--yellow)}
.flourish .gt{fill:none;stroke:var(--yellow);stroke-width:1.5}
.flourish .ah{fill:none;stroke:var(--yellow);stroke-width:1.5}

/* ==========================================================================
   1b. THE FOUR SITUATIONS - tiles that open into terminal windows.

   The <summary> is the tile face when closed and the window title bar when
   open. That is the whole trick: the close control in the title bar is the
   summary itself, so closing works with JavaScript off, from the keyboard,
   and on touch, with no ARIA of our own.
   ========================================================================== */
.sits{position:relative;z-index:2;margin-top:-72px;padding-bottom:var(--3xl)}
.sits .wrap{max-width:1080px}

/* ---- the section now introduces itself (V5 GPT Review) ----
   The heading used to be screen-reader only, which meant the four tiles
   arrived with no framing and the reader had to work out what they were for.
   One question does that job, and it sets the mental model: you are telling
   us where you are, not filling anything in. Also the scroll target for the
   hero CTA, hence the anchor offset for the sticky header. */
.sits-head{max-width:620px;margin:0 0 var(--xl)}
.sits-head .h1{margin-bottom:var(--s)}
.sits-head .lead{max-width:46ch;margin:0}
.sit-anchor{scroll-margin-top:96px}

/* the honest limit, closing the section. The site has not been inside their
   business and says so - challenge without arrogance, per the brand. */
.sit-foot{
  margin:var(--2xl) 0 0;max-width:70ch;
  font:400 var(--t-term)/1.7 var(--f-term);color:var(--mist);
}
.sit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--xl);align-items:start}
.sit-grid > :nth-child(2){margin-top:88px}
.sit-grid > :nth-child(3){margin-top:-24px}
.sit-grid > :nth-child(4){margin-top:64px}

.sit{
  min-width:0;   /* the title bar must never widen its own grid track */
  background:var(--carbon);border:1px solid var(--hair);
  transition:border-color var(--base) var(--ease),opacity var(--base) var(--ease),
             box-shadow var(--base) var(--ease),background var(--base) var(--ease),
             transform var(--base) var(--ease);
}
/* A closed tile lifts off the surface and warms one tone. Physical movement,
   small enough to read as "this thing is pickupable" rather than as animation
   (V5 GPT Review). Never on an open tile - that one is a window, and windows
   sit still. */
.sit:not([open]):hover{border-color:var(--hair-2);background:var(--carbon-2);transform:translateY(-3px)}
.sit > summary{
  list-style:none;cursor:pointer;display:block;padding:var(--xl);position:relative;
  min-height:44px;
  transition:background var(--base) var(--ease),padding var(--base) var(--ease);
}
.sit > summary::-webkit-details-marker{display:none}

/* ---- the resting state does the inviting (V5 GPT Review) ----
   Three additions, all from the existing vocabulary, no new colour:

   1. BRACKET TICKS THAT ASSEMBLE. The signature frame, animated the same way
      the secondary CTA animates it - one mask-size property, so the four ticks
      visibly grow out of the corners instead of cross-fading in. Rest is zero
      length, so the tile is quiet until you approach it.
   2. THE SCENARIO NUMERAL. Large mono index, ghosted at rest and tinted on
      approach. Gives the panel composition and a sense of "one of four" that
      the flat card never had. Sits at --t-h1 so it stays inside the locked
      type scale.
   3. THE HUMAN ASIDE. A mono line of reassurance on the face itself, so the
      tile is already talking to the reader before anything is clicked. */
.sit:not([open]) > summary::before{
  content:'';position:absolute;inset:-1px;pointer-events:none;
  border:1.5px solid var(--yellow);opacity:0;
  transition:opacity var(--base) var(--ease);
}
@supports ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .sit:not([open]) > summary::before{
    opacity:1;--c:linear-gradient(#000 0 0);--tick:0px;
    -webkit-mask:var(--c) top left/var(--tick) var(--tick) no-repeat,var(--c) top right/var(--tick) var(--tick) no-repeat,
                 var(--c) bottom left/var(--tick) var(--tick) no-repeat,var(--c) bottom right/var(--tick) var(--tick) no-repeat;
            mask:var(--c) top left/var(--tick) var(--tick) no-repeat,var(--c) top right/var(--tick) var(--tick) no-repeat,
                 var(--c) bottom left/var(--tick) var(--tick) no-repeat,var(--c) bottom right/var(--tick) var(--tick) no-repeat;
    transition:-webkit-mask-size var(--base) var(--ease),mask-size var(--base) var(--ease);
  }
  .sit:not([open]) > summary:hover::before,
  .sit:not([open]) > summary:focus-visible::before{--tick:26px}
}
/* no mask support: the ticks become a full outline on approach rather than
   nothing at all. The affordance never disappears. */
@supports not ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .sit:not([open]) > summary:hover::before,
  .sit:not([open]) > summary:focus-visible::before{opacity:1}
}
/* press-down. The panel takes the click physically before it opens. */
@supports selector(:has(*)){
  .sit:not([open]):has(> summary:active){transform:translateY(1px)}
}

/* room for the numeral, so a long tile name never runs underneath it */
.sit:not([open]) > summary{padding-right:calc(var(--xl) + 56px)}
.sit-n{
  position:absolute;top:var(--l);right:var(--l);
  font:500 var(--t-h1)/1 var(--f-term);
  color:rgba(255,255,255,.07);font-variant-numeric:tabular-nums;
  pointer-events:none;transition:color var(--base) var(--ease);
}
.sit:not([open]) > summary:hover .sit-n,
.sit:not([open]) > summary:focus-visible .sit-n{color:rgba(255,214,10,.22)}
.sit[open] .sit-n{display:none}

/* the aside. Mist body weight, yellow only on the prefix - it is a signal,
   not a second CTA. */
.sit-note{
  display:block;margin-top:var(--m);
  font:400 var(--t-term)/1.5 var(--f-term);color:var(--mist);
}
.sit[open] .sit-note{display:none}
/* No bullet marker on the face (Darren, 10 Aug). Collapsed tiles are
   typographic: title, quote, affordance. The three dots belong to the
   expanded window's title bar and nowhere else. */
.sit-t{display:block;font:600 var(--t-h3)/1.3 var(--f-body);margin-bottom:var(--s)}
.sit-s{display:block;color:var(--mist);font-size:var(--t-body);max-width:34ch}
.sit-go{
  display:inline-flex;align-items:center;gap:var(--s);
  margin-top:var(--m);color:var(--yellow);font:500 var(--t-term)/1 var(--f-term);
}
.sit-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--base) var(--ease)}
.sit > summary:hover .sit-go svg{transform:translateX(4px)}

/* the title-bar furniture is invisible until the tile is a window */
.dots,.win-x{display:none}

/* ---- open: the tile IS a terminal window ---- */
.sit-grid > .sit[open]{grid-column:1/-1;margin-top:var(--l)}
.sit[open]{
  border-color:rgba(255,214,10,.45);
  box-shadow:0 0 0 1px rgba(255,214,10,.12),0 24px 60px rgba(0,0,0,.45);
}
.sit[open] > summary{
  display:flex;align-items:center;gap:var(--m);
  padding:var(--m) var(--l);min-height:48px;
  background:var(--carbon-2);border-bottom:1px solid var(--hair);
}
.sit[open] .sit-s,.sit[open] .sit-go{display:none}
.sit[open] .dots{display:inline-flex;gap:6px;flex:0 0 auto}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);display:block}
.dots i:first-child{background:var(--yellow)}
.sit[open] .sit-t{
  font:500 var(--t-term)/1.5 var(--f-term);color:var(--mist);
  margin:0;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* the close control, drawn square. The summary is the button. */
.sit[open] .win-x{
  display:block;position:relative;flex:0 0 auto;
  width:24px;height:24px;margin-left:auto;
}
.win-x::before,.win-x::after{
  content:'';position:absolute;left:3px;top:11px;width:18px;height:1.5px;background:var(--mist);
  transition:background var(--quick) var(--ease);
}
.win-x::before{transform:rotate(45deg)}
.win-x::after{transform:rotate(-45deg)}
.sit[open] > summary:hover .win-x::before,
.sit[open] > summary:hover .win-x::after{background:var(--yellow)}

/* the window body. Scanlines, barely visible, only ever inside a terminal panel. */
.win{
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.020) 0 1px,transparent 1px 3px),
    var(--carbon);
  animation:winIn var(--base) var(--ease) both;
}
@keyframes winIn{from{opacity:0;transform:scale(.985)}}
.win-body{padding:var(--s) var(--xl) var(--xl)}

/* the journey inside the window. Beats laid along a dashed route. */
.beat{position:relative;padding:var(--l) 0 var(--l) var(--xl)}
.beat::before{ /* node dot */
  content:'';position:absolute;left:0;top:calc(var(--l) + 8px);
  width:7px;height:7px;border-radius:50%;border:1.5px solid var(--white);opacity:.55;
}
.beat::after{ /* dashed route between beats */
  content:'';position:absolute;left:3px;top:calc(var(--l) + 20px);bottom:-4px;
  border-left:1.5px dashed rgba(255,214,10,.35);
}
.beat-end::after{display:none}
.beat-end::before{background:var(--yellow);border-color:var(--yellow);opacity:1}
.beat .tag{color:var(--yellow);margin:0 0 var(--s);opacity:.85}
.beat h3{margin:0 0 var(--m);max-width:none}
.beat p:not(.tag){color:var(--mist);margin:0 0 var(--m);font-size:var(--t-body);max-width:62ch}
.beat p:not(.tag):last-child{margin-bottom:0}
/* Darren's first-person promise. Fraunces, because it is him speaking. */
.beat-promise{
  font:500 var(--t-h2)/1.25 var(--f-display);font-optical-sizing:auto;
  max-width:30ch;
}

.ctas{margin-top:var(--l);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s)}
.cta-lab{color:var(--mist);margin:0}
.cta-lab-2{margin-top:var(--m)}
.beat-question,.beat-link{margin-top:var(--m) !important}
.beat-question{font:400 var(--t-term)/1.6 var(--f-term) !important;color:var(--white) !important}

/* ---------- homepage routes: an editorial index, not four cards ----------
   Each situation is a station on one exploratory rail. The numbering makes
   the field scannable; the copy explicitly says the routes are not a ladder.
   Opening a station connects its node to one shared response surface. */
.route-home{
  position:relative;display:block;padding-left:72px;
  border-top:1px solid var(--hair);
}
.route-home::before{
  content:'';position:absolute;left:31px;top:34px;bottom:34px;
  border-left:1.5px dashed rgba(255,255,255,.20);pointer-events:none;
}
.route-home > .sit:nth-child(n){margin:0}
.route-home .sit{
  position:relative;background:transparent;border:0;border-bottom:1px solid var(--hair);
  box-shadow:none;
}
.route-home .sit::before{
  content:'';position:absolute;z-index:3;left:-47px;top:33px;width:14px;height:14px;
  border-radius:50%;background:var(--ink);border:1.5px solid var(--white);opacity:.62;
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease),
             opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.route-home .sit::after{
  content:'';position:absolute;z-index:2;left:-33px;top:39px;width:33px;
  border-top:1.5px dashed transparent;transition:border-color var(--base) var(--ease);
}
.route-home .sit:not([open]):hover{background:transparent;border-color:var(--hair-2);transform:none}
.route-home .sit:not([open]):hover::before,
.route-home .sit:has(> summary:focus-visible)::before{border-color:var(--yellow);opacity:1;transform:scale(1.08)}
.route-home .sit:not([open]) > summary{
  display:grid;grid-template-columns:72px minmax(200px,.8fr) minmax(240px,1.2fr) auto;
  align-items:center;gap:var(--l);padding:var(--l) 0;padding-right:0;
}
.route-home .sit:not([open]) > summary::before{inset:6px -1px}
.route-home .sit-n{
  position:static;grid-column:1;color:rgba(255,255,255,.22);
  font-size:var(--t-h2);align-self:start;padding-top:2px;
}
.route-home .sit-t{grid-column:2;margin:0;font-family:var(--f-display);font-size:var(--t-h2);line-height:1.2}
.route-home .sit-s{grid-column:3;max-width:38ch}
.route-home .sit-note{display:none}
.route-home .sit-go{grid-column:4;margin:0;white-space:nowrap}
.route-home .sit[open]{margin:0;border:0;box-shadow:none;background:transparent}
.route-home .sit[open]::before{background:var(--yellow);border-color:var(--yellow);opacity:1;transform:scale(1.08)}
.route-home .sit[open]::after{border-color:rgba(255,214,10,.48)}
.route-home .sit[open] > summary,
.route-home .sit[open] .win{margin-left:0}
.route-home .sit[open] > summary{border:1px solid rgba(255,214,10,.34);border-bottom-color:var(--hair)}
.route-home .sit[open] .win{border:1px solid rgba(255,214,10,.24);border-top:0}

/* Light working surface for the expanded homepage journey. */
.route-home .sit[open] > summary{
  background:var(--bone);border-color:var(--line);color:var(--ink);
  border-radius:var(--r) var(--r) 0 0;
}
.route-home .sit[open] .sit-t{color:var(--graphite)}
.route-home .sit[open] .dots i{background:rgba(10,10,10,.28)}
.route-home .sit[open] .dots i:first-child{background:var(--yellow)}
.route-home .sit[open] .win-x::before,
.route-home .sit[open] .win-x::after{background:var(--graphite)}
.route-home .sit[open] .win{
  background:repeating-linear-gradient(to bottom,rgba(10,10,10,.022) 0 1px,transparent 1px 3px),var(--bone);
  border-color:var(--line);color:var(--ink);border-radius:0 0 var(--r) var(--r);
}
.route-home .beat h3{color:var(--ink)}
.route-home .beat p:not(.tag){color:var(--graphite)}
.route-home .beat .tag{color:var(--ink);font-weight:600}
.route-home .beat::before{border-color:var(--ink)}
.route-home .beat::after{border-color:rgba(10,10,10,.22)}
.route-home .beat-end::before{background:var(--yellow);border-color:var(--ink)}
.route-home .beat-question{color:var(--ink) !important}
.route-home .tlink{color:var(--ink)}
.route-home .sess-bar{border-top-color:var(--line)}
.route-home .sess-dot::before{border-color:var(--ink)}
.route-home .sess-dot[aria-current="true"]::before{background:var(--yellow);border-color:var(--ink)}
.route-home .sess-btn{border-color:var(--line);color:var(--graphite)}
.journey-action{margin-top:var(--l);padding-top:var(--l);border-top:1px solid var(--line);scroll-margin-top:112px}
.journey-action > p{margin:0 0 var(--m) !important;max-width:56ch !important;color:var(--ink) !important;font-weight:500}
.journey-action .pill{font-size:var(--t-small)}

/* Services receives two homepage journeys at precise anchors. */
#adoption,#governance{scroll-margin-top:112px}
#adoption:target,#governance:target{
  background:rgba(255,214,10,.045);box-shadow:0 0 0 1px rgba(255,214,10,.34);
}
.svc-arrival{margin:0 0 var(--m);font:500 var(--t-small)/1.55 var(--f-term);color:var(--white)}
.svc-follow{margin:var(--l) 0 0}

/* ---------- recruitment routes: four briefs around a central rail ----------
   Related to the homepage through nodes, route geometry and the shared
   response surface; composed as alternating hiring briefs so it does not feel
   like the same component with different words. */
.route-hire{
  position:relative;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--l) 96px;align-items:start;
}
.route-hire::before{
  content:'';position:absolute;left:50%;top:34px;bottom:34px;
  border-left:1.5px dashed rgba(255,255,255,.18);pointer-events:none;
}
.route-hire > .sit:nth-child(n){margin:0}
.route-hire > .sit:nth-child(odd){grid-column:1}
.route-hire > .sit:nth-child(even){grid-column:2;margin-top:64px}
.route-hire .sit{
  position:relative;background:transparent;border:0;border-top:1px solid var(--hair);
  box-shadow:none;
}
.route-hire .sit::after{
  content:'';position:absolute;z-index:3;top:28px;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--white);opacity:.58;
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease),
             opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.route-hire > .sit:nth-child(odd)::after{right:-55px}
.route-hire > .sit:nth-child(even)::after{left:-55px}
.route-hire .sit:not([open]):hover{background:transparent;border-color:var(--hair-2);transform:none}
.route-hire .sit:not([open]):hover::after,
.route-hire .sit:has(> summary:focus-visible)::after{border-color:var(--yellow);opacity:1;transform:scale(1.08)}
.route-hire .sit:not([open]) > summary{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s) var(--m);
  padding:var(--l) 0;padding-right:0;
}
.route-hire .sit:not([open]) > summary::before{inset:5px -1px}
.route-hire .sit-n{
  position:static;grid-column:1;grid-row:1/5;align-self:start;
  font-size:var(--t-h1);color:rgba(255,255,255,.10);
}
.route-hire .sit-t{grid-column:2;margin:0}
.route-hire .sit-s{grid-column:2;max-width:32ch}
.route-hire .sit-note{grid-column:2;margin-top:var(--s)}
.route-hire .sit-go{grid-column:2;margin-top:var(--s)}
.route-hire > .sit[open]{grid-column:1/-1;margin:var(--m) 0;border:0;box-shadow:none}
.route-hire > .sit[open]::after{left:calc(50% - 6px);right:auto;background:var(--yellow);border-color:var(--yellow);opacity:1}
.route-hire .sit[open] > summary{border:1px solid rgba(255,214,10,.34);border-bottom-color:var(--hair)}
.route-hire .sit[open] .win{border:1px solid rgba(255,214,10,.24);border-top:0}

.route-close{margin-top:var(--2xl)}
.route-close .sit-foot{margin:0 0 var(--xl)}
.route-invite{
  display:flex;align-items:center;justify-content:space-between;gap:var(--xl);
  padding:var(--xl);max-width:900px;
}
.route-invite > p{margin:0;font:500 var(--t-h2)/1.25 var(--f-display);max-width:28ch}
.route-invite .pill{flex:0 0 auto}
.lens-chain{
  margin:var(--2xl) auto 0;max-width:76ch;text-align:center;
  font:400 var(--t-term)/1.7 var(--f-term);color:var(--mist);
}
.shortlist-standard{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--xl);
  margin:var(--2xl) auto 0;padding:var(--xl);max-width:1100px;
}
.shortlist-standard p{margin:0;color:var(--mist);line-height:1.65}
.shortlist-standard strong{display:block;margin-bottom:var(--s);color:var(--white);font-size:var(--t-body)}
.human-proof-sec{padding:var(--3xl) 0;border-top:1px solid var(--hair)}
.human-proof-sec .h1{max-width:22ch;margin-bottom:var(--2xl)}
.human-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--2xl)}
.human-proof-grid article{padding-top:var(--l);border-top:1px solid var(--hair-2)}
.human-proof-grid h3{margin:0 0 var(--m);font-size:var(--t-h2);max-width:24ch}
.human-proof-grid article > p:last-child{margin:0;color:var(--mist);line-height:1.65;max-width:58ch}
.recruit-guarantee{margin-top:var(--2xl);padding:var(--xl);max-width:900px}
.recruit-guarantee p{margin:0;color:var(--mist);line-height:1.65}
.recruit-guarantee strong{color:var(--white)}
.recruitment-evidence{margin-top:var(--2xl)}
.recruitment-primary-cta{margin-top:var(--2xl)}
.secondary-briefs .ex-head{max-width:760px}

@media (max-width:760px){
  .shortlist-standard,.human-proof-grid{grid-template-columns:1fr}
  .shortlist-standard{gap:var(--l);padding:var(--l)}
  .human-proof-grid{gap:var(--xl)}
}

/* ---------- the terminal session ----------
   v4.js adds .sess to the window and plays the three beats one at a time.
   Everything below is scoped to .sess, so the no-JS and reduced-motion state
   is exactly the stacked v4.2 layout - the fallback IS the base state. */
[hidden]{display:none !important}

.win.sess{cursor:pointer}
.win.sess .beat{display:none}
.win.sess .beat.on{display:block;animation:riseIn var(--slow) var(--ease) both}
/* mid-session beats carry no trailing route - the line would point at nothing */
.win.sess .beat::after{display:none}
/* the reserve stops the window's height jumping between short and long beats */
/* min-height equalisation removed 27 Aug 2026 (Darren) - the window fits the part it is showing */

.sess-bar{
  display:flex;align-items:center;gap:var(--m);
  margin-top:var(--l);padding-top:var(--m);
  border-top:1px solid var(--hair);
}
.sess-step{
  font:400 var(--t-term)/1.5 var(--f-term);color:var(--mist);
  font-variant-numeric:tabular-nums;
}
/* ---- progress as map geometry (V5 GPT Review) ----
   The "1 / 3" counter is replaced by the house node-dot standard: yellow is
   the beat you are on, white outline is a beat you can go to. And they are
   real buttons, so the reader can step back and re-read rather than waiting
   for the session to wrap round. That is the difference between being guided
   and being played at.

   v4.js builds these at session start, so the no-JS state - three beats
   stacked, no bar at all - is untouched. */
.sess-bar.has-dots .sess-step{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 44px tap targets, per the touch rule - the visible dot stays 8px, the
   button around it is the size a thumb needs. */
.sess-dots{display:flex;align-items:center;margin-left:calc(var(--m) * -1)}
.sess-dot{
  width:44px;height:44px;padding:0;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:0;
}
.sess-dot::before{
  content:'';width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--white);opacity:.5;
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease),
             opacity var(--base) var(--ease);
}
.sess-dot:hover::before{opacity:1}
.sess-dot[aria-current="true"]::before{
  background:var(--yellow);border-color:var(--yellow);opacity:1;
}
.sess-btn{
  margin-left:auto;width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1.5px solid var(--hair-2);color:var(--mist);
  transition:border-color var(--base) var(--ease),color var(--base) var(--ease);
}
.sess-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.sess-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sess-btn .i-replay{display:none}
.sess-bar.at-end .sess-btn .i-next{display:none}
.sess-bar.at-end .sess-btn .i-replay{display:block}
.route-home .sess-bar.at-end .sess-btn .i-next{display:block;transform:rotate(90deg)}
.route-home .sess-bar.at-end .sess-btn .i-replay{display:none}
.route-home .sess-bar.at-end.to-page .sess-btn .i-next{transform:none}

/* ==========================================================================
   2. FROM STRETCHED TO MEASURED - destinations first.
   The face carries what you get. The mechanism and the dial live in the
   hover/focus layer and never appear on the visible layer.
   ========================================================================== */
.dest-sec{position:relative;z-index:2;padding:0 0 var(--3xl)}
.dest-head{max-width:none;margin-bottom:var(--2xl)}
.dest-head .h1{margin-bottom:var(--l)}
.dest-head .lead{max-width:60ch;margin:0 0 var(--m)}
.outcome-agreement{
  margin:var(--xl) 0 0;font:500 var(--t-h2)/1.3 var(--f-display);color:var(--white);max-width:30ch;
}

/* Boxes and node dots scrapped (Darren, 10 Aug). Three icon-led items sitting
   on the open surface - no card, no border, no fill. */
.dest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--2xl) var(--l)}
.dest{
  position:relative;background:none;border:0;padding:0 var(--m) var(--l);
  text-align:center;cursor:default;
}
.dest-ico{
  width:180px;height:180px;margin:0 auto var(--m);
  display:grid;place-items:center;
  transition:filter var(--base) var(--ease),transform var(--base) var(--ease);
}
@media (max-width:760px){
  .dest-ico{width:150px;height:150px}
}
.dest-ico svg,.dest-ico img{display:block;width:100%;height:100%}
.dest:hover .dest-ico,.dest:focus .dest-ico,.dest:focus-within .dest-ico,
.dest.on .dest-ico{
  filter:drop-shadow(0 0 14px rgba(255,214,10,.45)) drop-shadow(0 0 34px rgba(255,214,10,.22));
  transform:translateY(-2px);
}
.dest-t{
  font:600 var(--t-h3)/1.3 var(--f-body);margin:0;
}
/* the drip. Present in the HTML at all times - the reveal only changes
   whether you can see it, never whether it exists. */
.dest-rv{
  margin-top:var(--m);opacity:0;transform:translateY(6px);
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.dest:hover .dest-rv,.dest:focus .dest-rv,.dest:focus-within .dest-rv,
.dest.on .dest-rv{opacity:1;transform:none}
.dest-rv p{color:var(--mist);margin:0 0 var(--s);font-size:var(--t-small)}
.dest-rv .promise{margin:0}

/* the "there is more here" tell, drawn as an arrowhead from the map
   geometry rather than written as a line of copy. It leaves as the drip
   arrives, so the item is never carrying both. */
.dest::after{
  content:'';position:absolute;left:50%;bottom:0;
  width:9px;height:9px;margin-left:-5px;
  border-right:1.5px solid var(--yellow);border-bottom:1.5px solid var(--yellow);
  transform:rotate(45deg);opacity:.65;
  transition:opacity var(--base) var(--ease);
}
.dest:hover::after,.dest:focus::after,.dest:focus-within::after,
.dest.on::after{opacity:0}

/* touch has no hover: tap toggles one at a time (v4.js adds .on), so the
   tell stays until it is tapped. */

/* ---- the guarantee. It owns this screen; the pill sits under it. ----
   Column-reverse because `::before` is already spoken for by the bracket
   ticks: the gate rule is drawn with `::after` and flipped above the
   statement, so the markup stays statement-first for anything ignoring CSS. */
.outcome-chain{
  display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);
  align-items:center;gap:var(--s);margin:var(--2xl) auto 0;max-width:980px;
  font:500 var(--t-term)/1.5 var(--f-term);color:var(--white);text-align:center;
}
.outcome-chain i{display:block;border-top:1.5px dashed rgba(255,214,10,.42);position:relative}
.outcome-chain i::after{
  content:'';position:absolute;right:0;top:-4px;width:7px;height:7px;
  border-top:1.5px solid var(--yellow);border-right:1.5px solid var(--yellow);transform:rotate(45deg);
}

.gtee-wrap{margin-top:var(--3xl);display:flex;flex-direction:column;align-items:center;text-align:center;scroll-margin-top:96px}
.gtee{
  max-width:760px;padding:var(--xl) var(--2xl);
  display:flex;flex-direction:column-reverse;align-items:center;
}
.gtee::after{ /* the approval-gate mark: one thick yellow rule */
  content:'';display:block;width:56px;height:3px;background:var(--yellow);margin:0 0 var(--l);
}
.gtx{
  font:600 var(--t-h1)/1.15 var(--f-display);font-optical-sizing:auto;
  letter-spacing:-.01em;color:var(--white);margin:0;max-width:22ch;
}
.gtee-wrap .pill{margin-top:var(--xl)}
.gtee-account{
  display:block;max-width:900px;width:100%;padding:var(--xl);text-align:left;
}
.gtee-account::after{display:none}
.gtee-account .kicker{margin-bottom:var(--m)}
.gtee-account .gtx{font-size:var(--t-h1);max-width:22ch;margin-bottom:var(--xl)}
.gtee-dials{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);
  margin:0 0 var(--xl);
}
.gtee-dials span{display:flex;flex-direction:column;gap:var(--s);padding:var(--l)}
.gtee-dials span + span{border-left:1px solid var(--hair-2)}
.gtee-dials b{font:600 var(--t-h3)/1.3 var(--f-body);color:var(--white)}
.gtee-dials small{font:400 var(--t-term)/1.4 var(--f-term);color:var(--yellow)}
.gtee-copy{margin:0;max-width:72ch;color:var(--white);font-size:var(--t-lead);line-height:1.6}

/* ---------- the one wave on the page ---------- */
.wave{position:relative;height:120px;margin:0 0 var(--3xl)}
.wave svg{position:absolute;inset:0;width:100%;height:120px}
.wave path{stroke:rgba(255,255,255,.16);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.wave-dot{position:absolute;left:28.3%;top:19px;width:7px;height:7px;border-radius:50%;background:var(--yellow)}

/* ==========================================================================
   3. HIRING - one quiet strip, ahead of the examples.
   ========================================================================== */
.hire{padding:0 0 var(--4xl)}
.hire .wrap{max-width:940px}
.hire .row{
  display:flex;flex-wrap:wrap;gap:var(--m) var(--l);align-items:center;justify-content:space-between;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:var(--l) 0;
}
.hire p{margin:0;color:var(--mist);font-size:var(--t-small);max-width:62ch}
.hire b{color:var(--white);font-weight:600}

/* ==========================================================================
   4. WORKED EXAMPLES - narrower measure, stepped off the left edge, so the
   page does not read as a stack of equal bands. The page ends here.
   ========================================================================== */
.ex-sec{padding:0 0 var(--4xl)}
.ex-sec .wrap{max-width:1000px}
.ex-head{max-width:620px;margin:0 0 var(--2xl) auto;text-align:right}
.ex-head .lead{margin-left:auto}
.ex-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--xl)}
.ex-grid > :nth-child(2){margin-top:var(--2xl)}
.ex{
  display:block;padding:var(--xl);background:var(--carbon);border:1px solid var(--hair);
  transition:border-color var(--base) var(--ease),transform var(--base) var(--ease);
}
.ex:hover{border-color:var(--hair-2);transform:translateY(-3px)}
.ex-t{display:block;font:600 var(--t-h3)/1.3 var(--f-body);margin-bottom:var(--s)}
.ex-s{display:block;color:var(--mist);margin-bottom:var(--l);max-width:32ch}
.ex-go{display:inline-flex;align-items:center;gap:var(--s);color:var(--yellow);font:500 var(--t-term)/1 var(--f-term)}
.ex-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--base) var(--ease)}
.ex:hover .ex-go svg{transform:translateX(4px)}

.promise{font-family:var(--f-term);font-size:var(--t-term);color:var(--mist);line-height:1.5}

/* ==========================================================================
   FOOTER - lane 1 lives here. Untouched this round.
   ========================================================================== */
.ft{border-top:1px solid var(--hair);background:#0C0C0C;padding:var(--3xl) 0 var(--xl)}
.ft-top{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--2xl)}
.ft-brand .brand{margin-bottom:var(--m)}
.strap{font:600 var(--t-h2)/1.2 var(--f-display);margin:0 0 var(--s)}
.strap em{font-style:italic;color:var(--yellow)}
.phil{font-size:var(--t-small);color:var(--mist);max-width:38ch}

.nl{margin-top:var(--l)}
.hp{display:none}
.nl-line{display:block;font-size:var(--t-small);color:var(--mist);margin-bottom:var(--s)}
.nl-row{display:flex;gap:var(--s)}
.nl-row input{
  flex:1 1 auto;min-width:0;height:46px;padding:0 var(--m);
  background:var(--ink);border:1px solid var(--hair-2);color:var(--white);
  font:400 var(--t-small)/1 var(--f-body);
}
.nl-row input::placeholder{color:var(--mist)}
.btn-line{
  height:46px;padding:0 var(--m);cursor:pointer;
  background:transparent;border:1.5px solid var(--yellow);color:var(--yellow);
  font:500 var(--t-term)/1 var(--f-term);
}
.btn-line:hover{background:var(--yellow);color:var(--ink)}
.nl-note{font-size:13px;color:var(--mist);margin:var(--s) 0 0}
.nl-msg{font-size:13px;color:var(--yellow);margin:var(--s) 0 0;min-height:1em}
.nl.done .nl-row{display:none}

.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--xl) var(--l)}
.ft-col h3{font:600 var(--t-small)/1.3 var(--f-body);margin:0 0 var(--m);color:var(--white)}
.ft-col a{display:block;font-size:var(--t-small);color:var(--mist);padding:10px 0}
.ft-col a:hover{color:var(--yellow)}
.ft-bot{
  display:flex;flex-wrap:wrap;gap:var(--m);justify-content:space-between;
  border-top:1px solid var(--hair);margin-top:var(--2xl);padding-top:var(--l);
  font-size:13px;color:var(--mist);
}
.ft-bot a{color:var(--mist)}
.ft-bot a:hover{color:var(--yellow)}

/* ==========================================================================
   TEXT ENTRANCES - restrained fade and rise. Kinetic typography is in the
   confirmed motion set; this is the quiet end of it.

   Two mechanisms, both pure CSS, both entrances only:
   1. The hero arrives on load, staggered by the spacing of the reading eye.
   2. Section headings arrive on scroll via `animation-timeline: view()`.
      Browsers without scroll-driven animations never enter that block and
      simply render the finished state, which is the base state everywhere.
   ========================================================================== */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}}

.hero-copy .kicker,
.hero-copy .display,
.hero-copy .hero-sub,
.hero-copy .hero-seed,
.hero-copy .pill{animation:riseIn var(--slow) var(--ease) backwards}
.hero-copy .display{animation-delay:80ms}
.hero-copy .hero-sub{animation-delay:160ms}
.hero-copy .hero-seed{animation-delay:240ms}
.hero-copy .pill{animation-delay:320ms}

@supports (animation-timeline:view()){
  .dest-head > *,
  .dest-grid > .dest,
  .gtee-wrap > *,
  .hire .row > *,
  .ex-head > *{
    animation:riseIn var(--slow) var(--ease) both;
    animation-timeline:view();
    animation-range:entry 6% cover 24%;
  }
  .dest-grid > .dest:nth-child(2){animation-range:entry 9% cover 27%}
  .dest-grid > .dest:nth-child(3){animation-range:entry 12% cover 30%}
}

/* the tile faces never animate on scroll - they are the router, and a router
   that fades in is a router you cannot scan. */

/* ==========================================================================
   ONE OPEN AT A TIME - the rest of the field dims while a window is up.
   Pure CSS where :has() exists; v4.js does the closing for browsers without
   exclusive <details>, and nothing here depends on the script.
   ========================================================================== */
@supports selector(:has(*)){
  .sit-grid:has(.sit[open]) .sit:not([open]){opacity:.42}
  .sit-grid:has(.sit[open]) .sit:not([open]):hover{opacity:.7}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .gtee{padding:var(--xl) var(--l)}
}

@media (max-width:860px){
  /* icons stay centred over their text at every width - a left-aligned icon
     with centred text reads as a broken grid */
  .dest-grid{grid-template-columns:1fr;gap:var(--xl)}
  .dest-ico{width:96px;height:96px}
}

@media (max-width:960px){
  .menu{display:block;margin-left:auto}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--carbon);border-bottom:1px solid var(--hair-2);padding:var(--m) var(--l) var(--l);
  }
  .menu[open] ~ .nav{display:flex}
  .nav .top{padding:14px 0;border-bottom:1px solid var(--hair)}
  .ni{position:static}
  .caret{display:none}   /* the panel is already open on a phone */
  .panel{position:static;display:block;border:0;background:transparent;padding:0 0 var(--s) var(--m);min-width:0}
  .nav .brk-cta{margin-top:var(--m);justify-content:center}
  .hero-row{grid-template-columns:1fr}
  .flourish{justify-self:start;margin-top:var(--xl)}
  .ex-head{margin-left:0;text-align:left}
  .ex-head .lead{margin-left:0}
  .ex-grid{grid-template-columns:1fr}
  .ex-grid > :nth-child(2){margin-top:0}
  .ft-top{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  .hdr-row{gap:var(--s)}
  .menu{flex:0 0 44px}
}

@media (max-width:760px){
  /* single column, and the section breaks compress to 56-72px.
     Hero top padding drops two steps here too (2xl to l). */
  .hero{padding:var(--l) 0 var(--3xl)}
  .sits{margin-top:-40px;padding-bottom:64px}
  .dest-sec{padding-bottom:64px}
  .ex-sec{padding-bottom:64px}
  .hire{padding-bottom:64px}
  .gtee-wrap{margin-top:64px}

  /* minmax(0,...) not 1fr: a single-column track takes its floor from the
     widest item's min-content, and the open window's title bar is one long
     unbroken line. Without this the grid is wider than the phone. */
  .sit-grid{grid-template-columns:minmax(0,1fr)}
  .sit-grid > :nth-child(n){margin-top:0}
  .sit > summary{padding:var(--l)}
  .sit[open] > summary{padding:var(--m) var(--l);align-items:flex-start}
  /* the long tile names wrap in the bar rather than truncating on a phone */
  .sit[open] .sit-t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
  .sit[open] .dots,.sit[open] .win-x{margin-top:2px}
  .win-body{padding:var(--s) var(--l) var(--l)}
  .ctas .pill,.ctas .brk-cta{width:100%;justify-content:center;text-align:center}
  .beat-promise{font-size:var(--t-h3);line-height:1.3}

  .route-home{padding-left:32px}
  .route-home::before{left:11px;top:30px;bottom:30px}
  .route-home .sit::before{left:-27px;top:29px;width:12px;height:12px}
  .route-home .sit::after{left:-21px;top:34px;width:21px}
  .route-home .sit:not([open]) > summary{
    grid-template-columns:44px minmax(0,1fr);gap:var(--s) var(--m);padding:var(--l) 0;
  }
  .route-home .sit-n{grid-column:1;grid-row:1/4;font-size:var(--t-h3)}
  .route-home .sit-t{grid-column:2;font-size:var(--t-h3)}
  .route-home .sit-s{grid-column:2;font-size:var(--t-small)}
  .route-home .sit-go{grid-column:2;margin-top:var(--s);white-space:normal}
  .route-home .sit[open] > summary{padding:var(--m)}
  .route-home .sit[open] .win-body{padding:var(--s) var(--m) var(--l)}
  .route-hire{display:block;padding-left:32px}
  .route-hire::before{left:11px;top:30px;bottom:30px}
  .route-hire > .sit:nth-child(n){margin:0;grid-column:auto}
  .route-hire .sit::after,
  .route-hire > .sit:nth-child(odd)::after,
  .route-hire > .sit:nth-child(even)::after{left:-27px;right:auto;top:29px;width:12px;height:12px}
  .route-hire .sit:not([open]) > summary{grid-template-columns:44px minmax(0,1fr);padding:var(--l) 0}
  .route-hire .sit-n{font-size:var(--t-h3)}
  .route-hire .sit[open] > summary{padding:var(--m)}
  .route-hire .sit[open] .win-body{padding:var(--s) var(--m) var(--l)}
  .route-invite{align-items:flex-start;flex-direction:column;padding:var(--l)}
  .route-invite > p{font-size:var(--t-h3)}
  .route-invite .pill{width:100%;justify-content:center;text-align:center}

  .outcome-chain{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;max-width:320px;
    border-left:1.5px dashed rgba(255,214,10,.42);padding-left:var(--l);
  }
  .outcome-chain span{position:relative;padding:var(--m) 0}
  .outcome-chain span::before{content:'';position:absolute;left:calc(var(--l) * -1 - 5px);top:23px;width:8px;height:8px;border-radius:50%;background:var(--ink);border:1.5px solid var(--white)}
  .outcome-chain span:last-child::before{background:var(--yellow);border-color:var(--yellow)}
  .outcome-chain i{display:none}
  .gtee-account{padding:var(--xl) var(--l)}
  .gtee-account .gtx{font-size:var(--t-h2)}
  .gtee-dials{grid-template-columns:1fr}
  .gtee-dials span{padding:var(--m) 0}
  .gtee-dials span + span{border-left:0;border-top:1px solid var(--hair)}

  .gtx{font-size:var(--t-h2);max-width:26ch}

  .ft-cols{grid-template-columns:1fr}

  .wave{height:80px}
  .wave svg{height:80px}
  .wave-dot{top:12px}
}

/* ==========================================================================
   REDUCED MOTION - every entrance stills. Nothing on this page needs motion
   to become readable; the finished state is the default state.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:1ms !important;scroll-behavior:auto !important;
  }
  .reveal{clip-path:none}
  .rv-cur{display:none}
  .pill .cur{background:var(--yellow)}
  .win{animation:none}
  /* belt and braces: v4.js never starts a session under reduced motion, so
     the three beats stay stacked. This makes it true even if it did. */
  .win.sess .beat{display:block;animation:none}
  .win.sess{cursor:auto}
  .sess-bar{display:none}
  .dest-ico{transform:none}
  .hero-copy .kicker,.hero-copy .display,.hero-copy .hero-sub,
  .hero-copy .hero-seed,.hero-copy .pill{animation:none}
  .ex:hover{transform:none}
}

/* ============================================================
   LEAD-MAGNET FORMS - added 11 Aug 2026.
   Square corners, yellow focus ring, Figtree body, mono labels.
   No JS dependency: these are plain Netlify POST forms so the
   page works with scripting off, per the content rule.
   ============================================================ */
.lm{max-width:640px}
/* Contact forms sit on Bone. Darren, 14 Aug 2026: "lets use the bone for
   contact forms, I think it creates a good balance of light and dark."
   Same treatment as the contact page and the homepage journey window -
   Bone surface, Line borders, Ink type, 6px radius. */
.lm{background:var(--bone);border:1px solid var(--line);border-radius:6px;padding:var(--xl);color:var(--ink)}
.lm-field{display:flex;flex-direction:column;gap:var(--s);margin:0 0 var(--l)}
.lm-field label{font:500 var(--t-term)/1.4 var(--f-mono);color:var(--graphite)}
.lm-field .hint{font:400 var(--t-small)/1.5 var(--f-body);color:var(--graphite);margin:0}
.lm-field input,.lm-field textarea,.lm-field select{
  font:400 var(--t-body)/1.5 var(--f-body);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;width:100%}
.lm-field textarea{min-height:132px;resize:vertical}
.lm-field input::placeholder,.lm-field textarea::placeholder{color:rgba(58,58,58,.45)}
.lm-field input:focus,.lm-field textarea:focus,.lm-field select:focus{
  outline:none;border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,214,10,.45)}
.lm .pill{border-color:var(--ink);color:var(--ink)}
.lm .pill:hover{background:var(--yellow);border-color:var(--ink);color:var(--ink)}
.lm-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--l)}
.lm .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lm-submit{margin-top:var(--m)}
.lm-note{font:400 var(--t-small)/1.55 var(--f-body);color:var(--mist);max-width:56ch;margin:var(--l) 0 0}
.lm-promise{margin:0 0 var(--2xl);padding:var(--xl);position:relative}
.lm-promise p{color:var(--white);max-width:60ch;margin:0 0 var(--s)}
.lm-promise p:last-child{margin:0}
.lm-promise .promise{color:var(--yellow)}
@media (max-width:640px){.lm-row{grid-template-columns:1fr}}

/* ========================================================================== 
   About - founder-led editorial journey
   ========================================================================== */
.about-page{overflow:hidden}

.about-hero{position:relative;padding:var(--3xl) 0 var(--4xl);border-bottom:1px solid var(--hair)}
.about-hero::before{content:'';position:absolute;width:420px;height:420px;right:-180px;top:-160px;
  border:1px solid rgba(255,214,10,.22);border-radius:50%}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:var(--3xl);align-items:center}
.about-hero-copy h1{font:600 clamp(34px,4.2vw,54px)/1.06 var(--f-display);letter-spacing:-.02em;
  max-width:24ch;margin:0 0 var(--l)}  /* was 68px in a 13ch column - same tower fault as the heroes (27 Aug) */
.about-hero-copy h1::after{content:'.';color:var(--yellow)}
.about-hero-lead{font-size:var(--t-lead);line-height:1.55;color:var(--mist);max-width:55ch;margin:0 0 var(--xl)}
.about-hero-lead strong{color:var(--white);font-weight:600}
.about-actions{display:flex;align-items:center;gap:var(--l);flex-wrap:wrap}
.about-jump{font:500 var(--t-term)/1.4 var(--f-term);border-bottom:1px solid var(--hair-2);
  padding:var(--s) 0;transition:color var(--base),border-color var(--base)}
.about-jump:hover{color:var(--yellow);border-color:var(--yellow)}
.about-portrait{margin:0;position:relative}
.about-portrait::before{content:'';position:absolute;inset:var(--l) calc(var(--l) * -1) calc(var(--l) * -1) var(--l);
  background:var(--yellow);z-index:0}
.about-portrait-frame{position:relative;z-index:1;background:var(--carbon);padding:var(--s);border:1px solid var(--hair-2)}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.about-portrait figcaption{position:relative;z-index:2;display:flex;justify-content:space-between;gap:var(--m);
  margin-left:var(--l);padding:var(--m);background:var(--yellow);color:var(--ink);
  font:500 var(--t-term)/1.4 var(--f-term)}
.about-portrait figcaption span{color:var(--graphite)}

.about-origin{background:var(--bone);color:var(--ink);padding:var(--4xl) 0}
.about-origin-grid{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:var(--3xl)}
.about-origin-head{position:sticky;top:var(--xl);align-self:start}
.about-count{font:500 var(--t-term)/1.2 var(--f-term);text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 var(--m);color:var(--graphite)}
.about-origin-head h2{font-size:var(--t-h1);line-height:1.08;max-width:9ch}
.about-origin-copy{font-size:var(--t-lead);line-height:1.62;max-width:670px}
.about-origin-copy p{margin:0 0 var(--l)}
.about-origin-copy blockquote{font:600 clamp(26px,2.6vw,34px)/1.2 var(--f-display);letter-spacing:-.015em;
  margin:var(--2xl) 0;padding:0 0 0 var(--l);border-left:4px solid var(--yellow)}
.about-human-note{background:var(--ink);color:var(--white);font-size:var(--t-body);line-height:1.65;
  margin:var(--2xl) 0 0;padding:var(--xl);box-shadow:var(--l) var(--l) 0 var(--yellow)}

.about-bridge{padding:var(--4xl) 0;background:var(--ink)}
.about-bridge h2,.about-values h2,.about-positions h2{font-size:var(--t-h1);line-height:1.08;margin:0 0 var(--m)}
.about-bridge-lead{font-size:var(--t-lead);color:var(--mist);max-width:58ch;margin:0 0 var(--2xl)}
.about-practices{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair-2)}
.about-practice{position:relative;display:flex;flex-direction:column;min-height:390px;padding:var(--2xl);
  overflow:hidden;transition:background var(--slow),color var(--slow),transform var(--slow)}
.about-practice + .about-practice{border-left:1px solid var(--hair-2)}
.about-practice::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:5px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--slow) var(--ease)}
.about-practice:hover,.about-practice:focus-visible{background:var(--bone);color:var(--ink);transform:translateY(-8px)}
.about-practice:hover::after,.about-practice:focus-visible::after{transform:scaleX(1)}
.about-practice-no{font:500 var(--t-term)/1 var(--f-term);color:var(--yellow);margin:0 0 var(--l)}
.about-practice:hover .about-practice-no,.about-practice:focus-visible .about-practice-no{color:var(--ink)}
.about-practice h3{font:600 clamp(30px,3vw,42px)/1.08 var(--f-display);margin:0 0 var(--m)}
.about-practice p{max-width:46ch;color:var(--mist);margin:0 0 var(--xl)}
.about-practice:hover p,.about-practice:focus-visible p{color:var(--graphite)}
.about-practice-line{font:500 var(--t-term)/1.4 var(--f-term);margin-top:auto}
.about-practice-line b{color:var(--yellow);display:inline-block;transition:transform var(--base)}
.about-practice:hover .about-practice-line b{transform:translateX(var(--s));color:var(--ink)}

.about-values{padding:var(--4xl) 0;background:var(--carbon)}
.about-values h2{margin-bottom:var(--2xl)}
.about-value-list{border-top:1px solid var(--hair-2)}
.about-value{display:grid;grid-template-columns:70px minmax(220px,.85fr) minmax(0,1.15fr);gap:var(--xl);
  align-items:start;padding:var(--xl) 0;border-bottom:1px solid var(--hair-2)}
.about-value > span{font:500 var(--t-term)/1.3 var(--f-term);color:var(--yellow)}
.about-value h3{font-family:var(--f-display);font-size:var(--t-h2)}
.about-value-copy{max-width:56ch}
.about-value p{color:var(--mist);margin:0}

.about-positions{background:var(--bone);color:var(--ink);padding:var(--4xl) 0}
.about-positions-grid{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:var(--3xl)}
.about-positions-head p{color:var(--graphite);max-width:32ch}
.about-disclosures{border-top:1px solid rgba(10,10,10,.18)}
.about-position{border-bottom:1px solid rgba(10,10,10,.18)}
.about-position summary{position:relative;cursor:pointer;list-style:none;font:600 var(--t-h3)/1.35 var(--f-body);
  padding:var(--l) var(--2xl) var(--l) 0}
.about-position summary::-webkit-details-marker{display:none}
.about-position summary span{position:absolute;right:var(--s);top:50%;width:18px;height:18px;transform:translateY(-50%)}
.about-position summary span::before,.about-position summary span::after{content:'';position:absolute;background:var(--ink);
  left:0;top:8px;width:18px;height:2px;transition:transform var(--base)}
.about-position summary span::after{transform:rotate(90deg)}
.about-position[open] summary span::after{transform:rotate(0)}
.about-position[open] summary{color:var(--ink)}
.about-position[open] summary::before{content:'';position:absolute;left:calc(var(--l) * -1);top:var(--l);bottom:var(--l);
  width:4px;background:var(--yellow)}
.about-position div{max-width:64ch;padding:0 var(--2xl) var(--l) 0;color:var(--graphite)}
.about-position div p{margin:0 0 var(--m)}
.about-position div p:last-child{margin-bottom:0}
.about-position div strong{color:var(--ink);font-weight:600}

.about-close{padding:var(--4xl) 0;background:var(--ink)}
.about-close-grid{display:grid;grid-template-columns:minmax(180px,.45fr) minmax(0,1fr);gap:var(--3xl);align-items:start}
.about-close-grid > p{font:500 var(--t-term)/1.4 var(--f-term);color:var(--yellow);margin:var(--s) 0 0}
.about-close h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;max-width:16ch;margin:0 0 var(--xl)}

@media (max-width:900px){
  .about-hero-grid{grid-template-columns:1fr .72fr;gap:var(--2xl)}
  .about-origin-grid,.about-positions-grid{grid-template-columns:1fr;gap:var(--2xl)}
  .about-origin-head{position:static}
  .about-origin-head h2{max-width:14ch}
}
@media (max-width:700px){
  .about-hero{padding:var(--2xl) 0 var(--3xl)}
  .about-hero-grid{grid-template-columns:1fr;gap:var(--2xl)}
  .about-hero-copy h1{font-size:clamp(38px,10.5vw,46px)}
  .about-portrait{width:min(88%,430px);margin:0 auto}
  .about-origin,.about-bridge,.about-values,.about-positions,.about-close{padding:var(--3xl) 0}
  .about-practices{grid-template-columns:1fr}
  .about-practice{min-height:330px;padding:var(--xl)}
  .about-practice + .about-practice{border-left:0;border-top:1px solid var(--hair-2)}
  .about-value{grid-template-columns:44px 1fr;gap:var(--m)}
  .about-value-copy{grid-column:2}
  .about-close-grid{grid-template-columns:1fr;gap:var(--l)}
  .about-close-grid > p{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .about-practice,.about-practice::after,.about-practice-line b{transition:none}
  .about-practice:hover,.about-practice:focus-visible{transform:none}
}

/* The step-through walk - bare .beat items on a dashed route. No JS: the route
   and node dots are CSS, so a step-through survives scripting being off. */
.walk{max-width:70ch}
.faq-list h3{margin:var(--xl) 0 var(--s)}
.faq-list p{color:var(--mist);max-width:68ch}

/* ==========================================================================
   SECTOR PAGE COMPONENTS - added 11 Aug 2026.
   The homepage owns tiles, destinations and the canvas wave. A sector page
   owns THIS: the agent accordion, and the flow diagram that opens inside it.
   Ported from the v2 kit and rebuilt on V4 tokens - kit.css is never shipped,
   because it redefines .hero, .sect, .band, .btn, .card, .nav, .ft and .wrap.
   See PAGE-STRUCTURES.md.
   ========================================================================== */

/* ---------- the agent accordion ---------- */
.ag-list{border-top:1px solid var(--hair);max-width:none}
.ag{border-bottom:1px solid var(--hair)}
.ag > summary{
  display:flex;align-items:center;gap:var(--m);cursor:pointer;
  padding:var(--l) 0;list-style:none;
  transition:color var(--base) var(--ease);
}
.ag > summary::-webkit-details-marker{display:none}
.ag > summary:hover .ag-ttl{color:var(--yellow)}
.ag-ttl{font:600 var(--t-h3)/1.3 var(--f-body);flex:1 1 auto}
.ag-stat{font-family:var(--f-term);font-size:var(--t-term);color:var(--mist);flex:0 0 auto}
/* the plus/minus, drawn not typed */
.ag-pm{position:relative;width:16px;height:16px;flex:0 0 auto;margin-left:var(--s)}
.ag-pm::before,.ag-pm::after{content:'';position:absolute;background:var(--yellow);transition:transform var(--base) var(--ease)}
.ag-pm::before{top:7px;left:0;width:16px;height:2px}
.ag-pm::after{left:7px;top:0;width:2px;height:16px}
.ag[open] .ag-pm::after{transform:rotate(90deg) scaleX(0)}
.ag-body{padding:0 0 var(--xl);display:grid;grid-template-columns:1fr 1fr;gap:var(--2xl);align-items:start}
.ag-body p{color:var(--mist);max-width:56ch;margin:0 0 var(--m)}
.ag-keep{display:block;font-family:var(--f-term);font-size:var(--t-term);color:var(--yellow);margin-top:var(--m)}

/* ---------- the flow diagram: the method made visible ---------- */
.stage{background:var(--carbon);padding:var(--xl);border:1px solid var(--hair)}
.stage-h{display:flex;flex-direction:column;gap:var(--xs);margin-bottom:var(--l)}
.stage-h .lab{font-family:var(--f-term);font-size:var(--t-term);color:var(--mist)}
.stage-h .big{font:600 var(--t-h3)/1.25 var(--f-body);color:var(--white)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s);margin-bottom:var(--l)}
.chip{
  font-family:var(--f-term);font-size:var(--t-term);color:var(--mist);
  border:1px solid var(--hair-2);padding:5px 10px;
}
/* nodes on the flow */
.fnode{display:flex;align-items:flex-start;gap:var(--m);padding:var(--m);border:1px solid var(--hair-2);background:var(--ink)}
.fnode b{display:block;font:600 var(--t-small)/1.35 var(--f-body);color:var(--white)}
.fnode small{display:block;font-size:var(--t-term);font-family:var(--f-term);color:var(--mist);margin-top:2px}
.fnode.gate{border-color:var(--yellow)}
.fnode.gate b{color:var(--yellow)}
.fnode.fin{background:var(--yellow);border-color:var(--yellow)}
.fnode.fin b,.fnode.fin small{color:var(--ink)}
/* the skills the agent runs, between the nodes */
.skill{
  display:flex;align-items:center;gap:var(--s);
  font-family:var(--f-term);font-size:var(--t-term);color:var(--white);
  padding:10px var(--m);margin:var(--s) 0 var(--s) var(--l);
  border-left:1.5px dashed var(--yellow);
}
.skill::before{content:'>';color:var(--yellow);font-weight:500}
/* the connector arrow */
.farr{display:block;width:1.5px;height:22px;margin:var(--xs) 0 var(--xs) 28px;
  background:repeating-linear-gradient(var(--yellow) 0 4px,transparent 4px 9px);position:relative}
.farr::after{content:'';position:absolute;left:-3px;bottom:-1px;width:7px;height:7px;
  border-right:1.5px solid var(--yellow);border-bottom:1.5px solid var(--yellow);transform:rotate(45deg)}

/* ---------- the walk, on a rail ---------- */
.walk-rail{position:relative;padding-left:var(--2xl);max-width:72ch}
.walk-rail::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:1.5px;
  background:repeating-linear-gradient(var(--yellow) 0 5px,transparent 5px 11px);opacity:.5}
.wstep{position:relative;padding-bottom:var(--2xl)}
.wstep:last-child{padding-bottom:0}
.wstep::before{content:'';position:absolute;left:calc(var(--2xl) * -1 + 5px);top:6px;
  width:13px;height:13px;border:1.5px solid var(--white);background:var(--ink)}
.wstep.gate::before{border-color:var(--yellow);transform:rotate(45deg)}
.wstep.fin::before{background:var(--yellow);border-color:var(--yellow)}
.wstep .tagline{font-family:var(--f-term);font-size:var(--t-term);color:var(--yellow);display:block;margin-bottom:var(--xs)}
.wstep h3{margin:0 0 var(--s)}
.wstep p{color:var(--mist);max-width:62ch;margin:0}

/* ---------- the evidence band ---------- */
.evband{background:var(--carbon);padding:var(--3xl) 0}
.ev-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--xl);align-items:center;max-width:900px}
.ev-side .lab{font-family:var(--f-term);font-size:var(--t-term);color:var(--mist);display:block;margin-bottom:var(--s)}
.ev-side .num{font:600 var(--t-h1)/1 var(--f-display);color:var(--white);display:block;margin-bottom:var(--s)}
.ev-side.on .num{color:var(--yellow)}
.ev-side p{color:var(--mist);margin:0;font-size:var(--t-small)}
.ev-mid{font-family:var(--f-term);font-size:var(--t-term);color:var(--yellow);text-align:center}
.ev-note{color:var(--mist);font-size:var(--t-small);line-height:1.55;max-width:78ch;margin:var(--2xl) 0 0}

@media (max-width:860px){
  .ag-body{grid-template-columns:1fr;gap:var(--l)}
  .ev-pair{grid-template-columns:1fr;gap:var(--l)}
  .ev-mid{text-align:left}
  .walk-rail{padding-left:var(--xl)}
  .wstep::before{left:calc(var(--xl) * -1 + 3px)}
}

/* sector page scaffolding */
.sect{padding:var(--3xl) 0}
/* Lives in a grid track, not a flex row - the track sizes it. The old
   flex/percentage pair is what collapsed the map. */
.hero-mini{width:100%}
.credline{padding:var(--l) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.credline p{color:var(--mist);font-size:var(--t-small);max-width:78ch;margin:0}
.offerband{padding:var(--3xl) 0;border-top:1px solid var(--hair)}
.offerband .lead{margin-bottom:var(--l)}
.related{padding:var(--2xl) 0;border-top:1px solid var(--hair)}
.related p{color:var(--mist);font-size:var(--t-small);max-width:80ch;margin:0}
@media (max-width:960px){.hero-mini{width:100%;margin-top:var(--xl)}}

/* ==========================================================================
   V5 GPT REVIEW - added components. Nothing above this line changed except
   the scenario panels and the session bar.

   THE PROBE - "one click, one useful reveal".

   The homepage tile is the signature interaction: choose, then a three-beat
   session plays. That is deliberately the only place on the site that does
   it. Everywhere else that a reader should be able to say "that one sounds
   like us", this is the pattern instead - a single disclosure that answers
   with a point of view rather than a product.

   It is a native <details>: no script, keyboard and touch for free, and the
   content exists whether or not anything runs. Same bracket-tick assembly as
   the tiles so the two read as one family, one louder than the other.
   ========================================================================== */
.probes{
  display:flex;flex-direction:column;
  margin-top:var(--xl);border-top:1px solid var(--hair);
}
.probe{border-bottom:1px solid var(--hair);position:relative}
.probe > summary{
  list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--xs) var(--m);align-items:baseline;
  padding:var(--l) var(--m);
  transition:background var(--base) var(--ease);
}
.probe > summary::-webkit-details-marker{display:none}
.probe:not([open]) > summary:hover{background:var(--carbon)}

/* the ticks, assembling out of the corners - the tile gesture at a quieter
   volume, because this component sits in a list rather than on a grid */
.probe > summary::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:1.5px solid var(--yellow);opacity:0;
  transition:opacity var(--base) var(--ease);
}
@supports ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .probe > summary::after{
    opacity:1;--c:linear-gradient(#000 0 0);--tick:0px;
    -webkit-mask:var(--c) top left/var(--tick) var(--tick) no-repeat,var(--c) top right/var(--tick) var(--tick) no-repeat,
                 var(--c) bottom left/var(--tick) var(--tick) no-repeat,var(--c) bottom right/var(--tick) var(--tick) no-repeat;
            mask:var(--c) top left/var(--tick) var(--tick) no-repeat,var(--c) top right/var(--tick) var(--tick) no-repeat,
                 var(--c) bottom left/var(--tick) var(--tick) no-repeat,var(--c) bottom right/var(--tick) var(--tick) no-repeat;
    transition:-webkit-mask-size var(--base) var(--ease),mask-size var(--base) var(--ease);
  }
  .probe > summary:hover::after,
  .probe > summary:focus-visible::after{--tick:18px}
  .probe[open] > summary::after{--tick:18px}
}
@supports not ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .probe > summary:hover::after,
  .probe > summary:focus-visible::after,
  .probe[open] > summary::after{opacity:1}
}

.probe-n{
  grid-row:1/3;
  font:500 var(--t-term)/1.6 var(--f-term);color:var(--mist);
  font-variant-numeric:tabular-nums;
}
.probe[open] .probe-n{color:var(--yellow)}
.probe-q{
  font:600 var(--t-h3)/1.35 var(--f-body);color:var(--white);
  transition:color var(--base) var(--ease);
}
.probe > summary:hover .probe-q{color:var(--yellow)}
.probe-go{
  display:inline-flex;align-items:center;gap:var(--s);
  font:500 var(--t-term)/1.5 var(--f-term);color:var(--yellow);
}
.probe-go svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--base) var(--ease);
}
.probe > summary:hover .probe-go svg{transform:translateX(4px)}
/* open: the affordance becomes the close instruction, drawn by rotating the
   same arrow a quarter turn. No second icon, no icon set. */
.probe[open] .probe-go svg{transform:rotate(-90deg)}
.probe[open] > summary:hover .probe-go svg{transform:rotate(-90deg) translateX(4px)}
.probe-go .lab-shut{display:none}
.probe[open] .probe-go .lab-open{display:none}
.probe[open] .probe-go .lab-shut{display:inline}

/* the reveal. Indented to the question's measure and hung off a dashed route,
   so the answer visibly belongs to the thing that was asked. */
.probe-body{
  padding:0 var(--m) var(--xl) calc(var(--m) + var(--xl));
  position:relative;
  animation:riseIn var(--base) var(--ease) both;
}
.probe-body::before{
  content:'';position:absolute;left:var(--l);top:0;bottom:var(--xl);
  border-left:1.5px dashed rgba(255,214,10,.35);
}
.probe-take{
  font:500 var(--t-h2)/1.3 var(--f-display);font-optical-sizing:auto;
  color:var(--white);margin:0 0 var(--s);max-width:34ch;
}
.probe-body p{color:var(--mist);margin:0 0 var(--l);max-width:62ch}
.probe-body .probe-take + p{margin-bottom:var(--xl)}
.probe-body > :last-child{margin-bottom:0}
.probe-limit{
  font:400 var(--t-term)/1.6 var(--f-term);color:var(--mist);
  margin:0 0 var(--m) !important;
}
.probe-more{margin-top:var(--s)}
/* the honest limit under a set of probes */
.probe-foot{
  margin:var(--xl) 0 0;max-width:70ch;
  font:400 var(--t-term)/1.7 var(--f-term);color:var(--mist);
}
/* a single probe sitting inside a centred block (the recruitment appetite
   claim) needs its own measure and its own alignment */
.probes-solo{width:100%;max-width:720px;text-align:left;margin-top:var(--xl)}

/* the question a worked-example or magnet card answers, above its own name -
   so the card is legible before the reader knows what we call the thing */
.ex-q{
  display:block;margin-bottom:var(--m);
  font:400 var(--t-term)/1.6 var(--f-term);color:var(--yellow);
}

@media (max-width:760px){
  .probe > summary{padding:var(--l) var(--s);gap:var(--xs) var(--m)}
  .probe-body{padding:0 var(--s) var(--l) calc(var(--s) + var(--l))}
  .probe-body::before{left:var(--m);bottom:var(--l)}
  .probe-take{font-size:var(--t-h3);line-height:1.35}
}

/* ==========================================================================
   MOBILE - the scenario numeral moves rather than shrinks.

   On desktop the numeral sits top-right and the summary reserves 56px for it.
   On a 390px phone that reserve costs a quarter of the tile's measure, and
   "Confident with a touch of imposter syndrome" ends up in a 213px column.

   So on a phone the numeral drops to the bottom-right instead, where the
   affordance row already leaves it empty space. Full measure for the title,
   the numeral keeps its job, and nothing has to get smaller to fit.
   ========================================================================== */
@media (max-width:760px){
  .sit:not([open]) > summary{padding-right:var(--l)}
  .sit-n{top:auto;bottom:var(--l);right:var(--l)}
}

/* ==========================================================================
   THE CLOSING INVITATION - the homepage now ends on the ask.

   It used to end on the worked examples, which are the possibility beat: the
   page delivered its most confident material and then simply stopped. The
   ask is here, after the thinking, rather than stapled to every section.
   ========================================================================== */
.close-sec{padding:0 0 var(--4xl)}
.close-sec .wrap{max-width:820px}
.close-sec .h1{max-width:24ch;margin-bottom:var(--m)}
.close-sec .lead{max-width:54ch;margin-bottom:var(--xl)}
.close-meta{
  font:400 var(--t-term)/1.6 var(--f-term);color:var(--mist);
  margin:var(--m) 0 0;
}
@media (max-width:760px){
  .close-sec{padding-bottom:64px}
  .close-sec .pill{width:100%;justify-content:center}
}

/* ==========================================================================
   ANCHOR OFFSET AND SCROLL

   The hero CTA is a plain in-page link, so it works with scripting off. Two
   things make it feel deliberate rather than like a jump cut: a smooth scroll,
   and an offset that clears the sticky header. The reduced-motion block above
   already forces scroll-behavior back to auto.
   ========================================================================== */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}

/* ==========================================================================
   REDUCED MOTION - the V5 additions. The block earlier in this file already
   flattens every duration; these are the pieces that need a resting state
   declared rather than a duration removed.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .sit:not([open]):hover{transform:none}
  .probe-body{animation:none}
  /* the ticks still appear on approach, they just stop travelling */
  .sit:not([open]) > summary:hover::before,
  .probe > summary:hover::after{transition:none}
}

/* ========================================================================== 
   HUMAN OUTCOME BRIDGE - a Bone chapter between recognition and results.
   The photograph supplies human presence; the moving line introduces the
   three outcomes before the existing animations explain and measure them.
   ========================================================================== */
.human-bridge{
  position:relative;z-index:3;padding:var(--2xl) 0;
  background:var(--bone);color:var(--ink);
}
.human-bridge-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;gap:clamp(40px,5vw,72px);
}
.human-bridge .kicker{color:#686864;margin-bottom:var(--l)}
.human-bridge .pr{color:#8B7300}
.human-bridge .h1{max-width:12ch;margin-bottom:var(--l)}
.outcome-rotator{
  position:relative;height:clamp(120px,11vw,154px);overflow:hidden;
  font:600 clamp(40px,4.8vw,58px)/1.02 var(--f-display);letter-spacing:-.035em;
}
.outcome-rotator span{
  position:absolute;inset:0;display:flex;align-items:center;padding:5px 2px 9px;
  opacity:0;transform:translateY(72%);
  transition:opacity .5s var(--ease),transform .65s var(--ease);
}
.outcome-rotator span.is-current{opacity:1;transform:none}
.outcome-rotator span.is-leaving{opacity:0;transform:translateY(-72%)}
.human-photo{
  position:relative;margin:0;overflow:hidden;border-radius:24px;background:#111;
  box-shadow:0 28px 78px rgba(10,10,10,.18);
}
.human-photo::before,.human-photo::after{
  content:'';position:absolute;z-index:2;width:34px;height:34px;pointer-events:none;
}
.human-photo::before{top:18px;left:18px;border-top:2px solid var(--yellow);border-left:2px solid var(--yellow)}
.human-photo::after{right:18px;bottom:18px;border-right:2px solid var(--yellow);border-bottom:2px solid var(--yellow)}
.human-photo img{display:block;width:100%;height:100%;object-fit:cover}
.human-photo-home{aspect-ratio:3/2}
.human-photo-home img{object-position:center 56%}
.human-bridge + .dest-sec{padding-top:clamp(80px,8vw,120px)}

/* ========================================================================== 
   INTENT CTA - a contextual value prompt after genuine reading intent.
   It replaces the old full-width timed bar on Services and supporting pages.
   ========================================================================== */
.intent-cta{
  position:fixed;right:20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 28px));
  padding:22px 48px 22px 24px;border:1px solid rgba(255,214,10,.6);border-radius:16px;
  background:var(--bone);color:var(--ink);box-shadow:0 22px 70px rgba(0,0,0,.32);
  opacity:0;transform:translateY(18px) scale(.98);pointer-events:none;
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.intent-cta.is-in{opacity:1;transform:none;pointer-events:auto}
.intent-cta p{margin:0 0 10px;font:600 19px/1.3 var(--f-display)}
/* The payoff line under the question. Body face, not display, so the
   question stays the thing the eye lands on. The emphasis treatment is
   the one Darren signed off on the old timed prompt: bold italic yellow,
   held on one line. */
.intent-cta .intent-cta-sub{margin:0 0 12px;font:500 var(--t-small)/1.5 var(--f-body);color:var(--ink)}
.intent-cta .intent-cta-sub em{font-style:italic;font-weight:700;color:var(--yellow);white-space:nowrap}
.intent-cta .tlink{color:var(--ink);font-size:12px}
.intent-cta-x{
  position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;background:transparent;
  color:#666;font:400 24px/1 var(--f-body);cursor:pointer;
}
.intent-cta-x:hover,.intent-cta-x:focus-visible{color:var(--ink);outline:1px solid var(--yellow)}

/* ========================================================================== 
   AUTHORED ROUTE CHANGE - shrink the current page, flick the route across,
   then let the destination expand. Only links marked data-route-transition
   use it; ordinary navigation remains ordinary.
   ========================================================================== */
html.route-leaving{overflow:hidden;background:#050505}
html.route-leaving body{
  pointer-events:none;transform-origin:50% 50%;overflow:hidden;border-radius:26px;
  animation:routeShrink .46s cubic-bezier(.7,0,.2,1) both;
}
html.route-leaving::after{
  content:'';position:fixed;z-index:9999;left:-25vw;top:50%;width:22vw;height:3px;
  background:var(--yellow);box-shadow:0 0 22px rgba(255,214,10,.45);
  animation:routeFlick .46s cubic-bezier(.75,0,.25,1) both;pointer-events:none;
}
html.route-arriving body{transform-origin:50% 50%;animation:routeExpand .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes routeShrink{
  0%{transform:none;filter:none}
  58%{transform:scale(.955);filter:brightness(.82)}
  100%{transform:scale(.93) translateX(-2vw);filter:brightness(.55)}
}
@keyframes routeFlick{
  0%{transform:translateX(0);opacity:0}
  20%{opacity:1}
  100%{transform:translateX(150vw);opacity:0}
}
@keyframes routeExpand{
  0%{transform:scale(.94) translateX(2vw);filter:brightness(.62);border-radius:26px}
  100%{transform:none;filter:none;border-radius:0}
}

@media (max-width:760px){
  .human-bridge{padding:56px 0}
  .human-bridge-grid{grid-template-columns:1fr;gap:36px}
  .outcome-rotator{height:112px;font-size:clamp(36px,11vw,44px);line-height:1.02}
  .human-photo{border-radius:18px}
  .human-photo-home{aspect-ratio:4/3}
  .human-bridge + .dest-sec{padding-top:88px}
  .intent-cta{right:14px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  .outcome-rotator{height:auto;overflow:visible;display:grid;gap:8px}
  .outcome-rotator span,.outcome-rotator span.is-current,.outcome-rotator span.is-leaving{
    position:static;display:block;opacity:1;transform:none;transition:none;
  }
  html.route-leaving body,html.route-arriving body{animation:none;transform:none;filter:none;border-radius:0}
  html.route-leaving::after{display:none}
  .intent-cta{transition:none}
}

/* ==========================================================================
   JOURNEY BRIDGE
   The section that routes an SEO or blog page into the customer journey.
   It shipped with no rules of its own and .bracket carries no padding, so the
   bracket corners sat tight against the copy and the block read as loose text
   with no separation from the section above. Added 14 August 2026.
   ========================================================================== */
.p-bridge{padding:var(--3xl) 0;border-top:1px solid var(--hair)}
.p-bridge .bracket{padding:var(--xl);background:var(--carbon)}
.p-bridge .kicker{margin-bottom:var(--m)}
.p-bridge-line{
  font:500 var(--t-lead)/1.4 var(--f-display);
  color:var(--white);margin:0 0 var(--s);max-width:40ch;
}
.p-bridge p{color:var(--mist);max-width:60ch;margin:0 0 var(--l)}
.p-bridge .ctas{display:flex;align-items:center;gap:var(--l);flex-wrap:wrap;margin:0}
.p-bridge-more{margin-top:var(--m)!important}
@media (max-width:860px){
  .p-bridge{padding:64px 0}
  .p-bridge .bracket{padding:var(--l)}
}


/* ==========================================================================
   THE MAP STRIP
   A slim line under the header, only as wide as its own text. It reads as
   part of the navigation rather than a banner, which is what the old
   announcement bar got wrong. Carbon on Ink, hairline edge, yellow only on
   the price. Darren, 14 August 2026.
   ========================================================================== */
.mapstrip{display:flex;justify-content:flex-end;border-bottom:1px solid var(--hair);background:var(--ink)}
.mapstrip-a{
  display:inline-flex;align-items:center;gap:var(--m);
  padding:7px 18px;background:var(--carbon);
  border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  border-bottom-left-radius:6px;border-bottom-right-radius:6px;
  font-family:var(--f-term);font-size:13px;line-height:1.5;letter-spacing:.01em;
  color:var(--mist);margin-right:var(--l);
  transition:background var(--base) var(--ease),color var(--base) var(--ease);
}
.mapstrip-a b{color:var(--white);font-weight:500}
.mapstrip-cost{
  color:var(--ink);background:var(--yellow);
  padding:2px 8px;border-radius:999px;
  font-weight:600;font-size:12px;white-space:nowrap;
}
.mapstrip-a:hover{background:#1b1b1b;color:var(--white)}
.mapstrip-a:hover b{color:var(--yellow)}

@media (max-width:860px){
  .mapstrip{justify-content:stretch}
  .mapstrip-a{
    width:100%;margin-right:0;border-radius:0;border-left:0;border-right:0;
    justify-content:center;gap:var(--s);padding:9px var(--m);font-size:12px;
  }
  .mapstrip-tx b{display:inline}
}
@media (max-width:520px){
  .mapstrip-tx{display:none}
  .mapstrip-a::before{content:'What should AI be doing for you?';color:var(--white)}
}

/* ==========================================================================
   THE TIMED PROMPT
   A small Bone card in the bottom-right after twenty seconds. Softly rounded,
   plain text in the body face, the price in italics on a yellow block -
   yellow as a fill, never as type on a light surface.
   ========================================================================== */

/* ==========================================================================
   AI VISIBILITY CHECK - the three flows and the result panel
   Built 17 August 2026. Square corners, Figtree/Fraunces/Plex per the locked
   type system, yellow rationed to signals and the CTA.

   STATUS COLOURS - the one deliberate palette extension, flagged for Darren.
   BRAND.md has no status trio, and a diagnostic panel needs three states that
   read instantly. Yellow already means "signal", so it carries the warning.
   Green and red are new and defined ONCE here: change these two lines and
   every verdict on the page changes with them.
   ========================================================================== */
:root{
  --avc-ok:#7ED9A4;    /* passes AA on Carbon */
  --avc-bad:#FF7D6E;   /* passes AA on Carbon */
  --avc-warn:var(--yellow);
}

.sits-sub{
  margin-top:var(--m);color:var(--mist);
  font:400 var(--t-body)/1.6 var(--f-body);max-width:44ch;
}

/* Three tiles, not four. The 2-col stagger belongs to the old set. */
.sit-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sit-grid-3 > :nth-child(n){margin-top:0}
.sit-grid-3 > :nth-child(2){margin-top:56px}
.sit-grid-3 > :nth-child(3){margin-top:-20px}

.avc-lede{color:var(--white) !important;font-weight:600}

.avc-three{margin:var(--m) 0 0;padding:0;list-style:none;counter-reset:avc}
.avc-three li{
  counter-increment:avc;position:relative;padding-left:34px;margin-bottom:var(--m);
  color:var(--mist);font:400 var(--t-body)/1.6 var(--f-body);
}
.avc-three li:last-child{margin-bottom:0}
.avc-three li b{color:var(--white);font-weight:600}
.avc-three li::before{
  content:counter(avc);position:absolute;left:0;top:1px;
  width:22px;height:22px;display:grid;place-items:center;
  font:500 12px/1 var(--f-term);color:var(--yellow);
  border:1px solid rgba(255,214,10,.45);
}

/* ---- the ask ---- */
.avc-ask em{color:var(--yellow);font-style:italic;font-weight:600}
.avc-form{display:flex;gap:var(--s);flex-wrap:wrap;margin-top:var(--m)}
.avc-input{
  flex:1 1 240px;min-width:0;
  background:var(--ink);border:1px solid var(--hair);color:var(--white);
  padding:13px var(--m);font:400 var(--t-term)/1.4 var(--f-term);
}
.avc-input::placeholder{color:var(--mist);opacity:.75}
.avc-input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 1px rgba(255,214,10,.35)}
.avc-input.is-bad{border-color:var(--avc-bad)}
.avc-go[disabled]{opacity:.5;pointer-events:none}
.avc-err{margin-top:var(--s);color:var(--avc-bad);font:400 var(--t-term)/1.5 var(--f-term)}

/* ---- the result panel ---- */
.avc-out{margin-top:var(--l)}
.avc-panel{background:var(--ink);border:1px solid var(--hair);padding:var(--l)}
.avc-checked{font:400 12px/1.4 var(--f-term);color:var(--mist);margin:0 0 var(--s)}
.avc-head{font:600 var(--t-h3)/1.35 var(--f-body);color:var(--white);margin:0 0 6px}
.avc-sub{font:400 var(--t-body)/1.55 var(--f-body);color:var(--mist);margin:0}

/* the two alarms, above everything */
.avc-alarm{border-left:3px solid var(--avc-bad);background:rgba(255,125,110,.09);padding:var(--m);margin:0 0 var(--l)}
.avc-alarm.is-amber{border-left-color:var(--yellow);background:rgba(255,214,10,.08)}
.avc-alarm h4{font:600 var(--t-body)/1.4 var(--f-body);color:var(--white);margin:0 0 4px}
.avc-alarm p{font:400 var(--t-term)/1.6 var(--f-body);color:var(--mist);margin:0}

/* engine table */
.avc-table{margin:var(--l) 0 0;border-top:1px solid var(--hair)}
.avc-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--s);padding:11px 0;border-bottom:1px solid var(--hair);align-items:center}
.avc-row.is-head{border-bottom:1px solid var(--hair);padding:8px 0}
.avc-row.is-head span{font:400 11px/1.3 var(--f-term);color:var(--mist);letter-spacing:.06em;text-transform:uppercase}
.avc-eng{font:500 var(--t-body)/1.3 var(--f-body);color:var(--white)}
.avc-v{font:400 var(--t-term)/1.3 var(--f-term)}
.avc-v.ok{color:var(--avc-ok)}
.avc-v.bad{color:var(--avc-bad)}
.avc-v.warn{color:var(--yellow)}
.avc-v.na{color:var(--mist);opacity:.65}

/* the concern strip */
.avc-note{margin:var(--l) 0 0;padding:var(--m);border-left:3px solid var(--yellow);background:rgba(255,214,10,.07)}
.avc-note.is-good{border-left-color:var(--avc-ok);background:rgba(126,217,164,.08)}
.avc-note.is-bad{border-left-color:var(--avc-bad);background:rgba(255,125,110,.09)}
.avc-note p{margin:0;font:400 var(--t-term)/1.65 var(--f-body);color:var(--mist)}
.avc-note b{color:var(--white);font-weight:600}

/* evidence drawer - what turns a widget into an audit */
.avc-eviw{margin-top:var(--l)}
.avc-eviw summary{cursor:pointer;font:400 var(--t-term)/1.5 var(--f-body);color:var(--mist);list-style:none}
.avc-eviw summary::-webkit-details-marker{display:none}
.avc-eviw summary::before{content:'> ';font-family:var(--f-term);color:var(--yellow)}
.avc-eviw summary:hover{color:var(--white)}
.avc-evi{margin-top:var(--s);padding:var(--m);background:var(--carbon);border:1px solid var(--hair);
  font:400 12px/1.85 var(--f-term);color:var(--mist);overflow-wrap:anywhere}
.avc-evi b{color:var(--white);font-weight:500}

/* the universal closing */
.avc-close{margin-top:var(--l);padding-top:var(--l);border-top:1px solid var(--hair)}
.avc-close h4{font:600 var(--t-body)/1.4 var(--f-body);color:var(--white);margin:0 0 4px}
.avc-close p{font:400 var(--t-term)/1.65 var(--f-body);color:var(--mist);margin:0 0 var(--m)}

/* the manual fallback */
.avc-fallback{margin-top:var(--l);padding-top:var(--l);border-top:1px solid var(--hair)}
.avc-fallback .avc-form{flex-direction:column;align-items:stretch}
.avc-fallback .avc-input{flex:1 1 auto}
.avc-done{font:400 var(--t-body)/1.6 var(--f-body);color:var(--avc-ok);margin:0}

/* the wait */
.avc-load{display:flex;align-items:center;gap:10px;font:400 var(--t-term)/1.4 var(--f-term);color:var(--mist);padding:var(--m) 0}
.avc-load i{width:6px;height:6px;background:var(--yellow);display:block;animation:avcp 1.1s infinite ease-in-out}
.avc-load i:nth-child(2){animation-delay:.15s}
.avc-load i:nth-child(3){animation-delay:.3s}
@keyframes avcp{0%,80%,100%{opacity:.2}40%{opacity:1}}

@media (max-width:1040px){
  .sit-grid-3{grid-template-columns:minmax(0,1fr)}
  .sit-grid-3 > :nth-child(n){margin-top:0}
}
@media (prefers-reduced-motion:reduce){ .avc-load i{animation:none;opacity:.6} }

/* --------------------------------------------------------------------------
   FIXES 17 Aug 2026, from Darren's first read of the trial.

   1. The open homepage tile flips to a Bone working surface with Ink text
      (.route-home .sit[open] .win). Every white line inside the flows was
      therefore invisible. Anything that sets its own colour needs a
      .route-home counterpart, or it disappears the moment a tile opens.
   2. The section subhead is the proposition now, so it carries display size.
-------------------------------------------------------------------------- */
.route-home .avc-lede{color:var(--ink) !important}
.route-home .avc-three li{color:var(--graphite)}
.route-home .avc-three li b{color:var(--ink)}
.route-home .avc-three li::before{color:var(--ink);border-color:rgba(10,10,10,.28)}
.route-home .avc-ask em{color:var(--ink);background:rgba(255,214,10,.42);padding:0 4px}
.route-home .avc-input{background:var(--white);border-color:var(--line);color:var(--ink)}
.route-home .avc-input::placeholder{color:var(--graphite);opacity:.7}
.route-home .avc-form .pill{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* The panel stays dark on the Bone surface. Deliberate: the result is a
   different kind of object from the copy around it, and the contrast is what
   makes it read as a finding rather than more page. */
.route-home .avc-panel{border-color:var(--ink)}

/* The subhead is doing the selling now the hero line is gone. */
.sits-sub{
  font:600 var(--t-h2,28px)/1.35 var(--f-display);
  color:var(--white);max-width:22ch;margin-top:var(--m);
}
@media (max-width:760px){ .sits-sub{font-size:23px} }

/* Tile faces: the arrow is the affordance, the label was noise. Darren,
   17 Aug 2026. The accessible name survives in a visually hidden span. */
.sit-go{gap:0}

/* Hero sub retired 17 Aug 2026 (no SEO value, and fluff for this audience).
   It was carrying the 32px gap above the CTA, so the display line takes it
   over - otherwise the button sits hard against the headline. */
.hero-copy .display + .pill{margin-top:var(--m)}

/* ==========================================================================
   THE HERO ROUTER - 17 August 2026
   The hero is the navigation. One question, three doors, one per service.

   Deliberately NOT the .sit terminal-card language. That pattern belongs to
   the destination pages now, and a visitor should be able to tell which kind
   of page they are on before reading a word (PAGE-STRUCTURES.md).

   The interaction is the canonical bracket from brand-guidelines: corner
   ticks at rest, closing into a full rectangle outline on hover. No boxes,
   no fills, no dots - hairlines and type doing the work.
   ========================================================================== */
.hero-router .hero-row{padding-bottom:var(--xl)}

/* The question is a sub-header now, not a mono label (Darren, 17 Aug 2026):
   display typeface, yellow, a step down from the hero line, and given real
   room above and below so it reads as the page asking rather than a caption.
   This is a sanctioned yellow moment - it IS the instruction, which is what
   the rationing rule reserves yellow for. */
.router-q{
  font:600 var(--t-h1)/1.15 var(--f-display);
  font-optical-sizing:auto;letter-spacing:-.01em;
  color:var(--yellow);
  margin:var(--xl) 0 var(--l);
  max-width:20ch;
}

.router{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--hair);
}

.rdoor{
  position:relative;display:flex;flex-direction:column;
  padding:var(--xl) var(--l) var(--l);
  border-right:1px solid var(--hair);
  text-decoration:none;min-width:0;
  transition:background var(--base) var(--ease);
}
.rdoor:last-child{border-right:0}

/* Bracket corners. Two pseudo-elements, each drawing two ticks. On hover the
   ticks grow to full width and height, which reads as the outline closing. */
.rdoor::before,.rdoor::after{
  content:'';position:absolute;width:14px;height:14px;
  border-color:var(--yellow);border-style:solid;border-width:0;
  transition:width var(--base) var(--ease),height var(--base) var(--ease),opacity var(--base) var(--ease);
  opacity:.55;pointer-events:none;
}
.rdoor::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.rdoor::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

.rdoor:hover,.rdoor:focus-visible{background:rgba(255,214,10,.035);outline:none}
.rdoor:hover::before,.rdoor:focus-visible::before,
.rdoor:hover::after,.rdoor:focus-visible::after{
  width:100%;height:100%;opacity:1;
}

.rdoor-lab{
  font:500 var(--t-term)/1.4 var(--f-term);
  color:var(--yellow);letter-spacing:.02em;margin-bottom:var(--m);
}
.rdoor-t{
  font:600 var(--t-h3)/1.25 var(--f-display);
  color:var(--white);margin-bottom:var(--s);text-wrap:balance;
}
.rdoor-s{
  font:400 var(--t-term)/1.65 var(--f-body);
  color:var(--mist);margin-bottom:var(--l);max-width:34ch;
}
.rdoor-go{margin-top:auto;display:block;line-height:0}
.rdoor-go svg{
  width:26px;height:26px;fill:none;stroke:var(--yellow);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--base) var(--ease);
}
.rdoor:hover .rdoor-go svg,.rdoor:focus-visible .rdoor-go svg{transform:translateX(7px)}

@media (max-width:900px){
  .router{grid-template-columns:minmax(0,1fr)}
  .rdoor{border-right:0;border-bottom:1px solid var(--hair);padding:var(--l) 0}
  .rdoor:last-child{border-bottom:0}
  .rdoor::before,.rdoor::after{display:none}
  .rdoor-s{margin-bottom:var(--m)}
}
@media (prefers-reduced-motion:reduce){
  .rdoor::before,.rdoor::after,.rdoor-go svg{transition:none}
}

/* --------------------------------------------------------------------------
   HERO ROUTER LAYOUT FIX - 17 Aug 2026.

   The stock .hero-row is a two-track grid: copy in 1fr, flourish in up to
   440px. That was right when the copy carried a kicker, a display line, a sub
   and a CTA. The router hero carries two short lines, so the copy was being
   squeezed into ~60% of the measure and reading as bundled into the corner
   while the flourish held a third of the screen for decoration.

   Fix: the router hero is a SINGLE column. Copy full width, display line at
   full size with room to breathe, three doors underneath. The flourish is
   hidden here on purpose - a canvas wave, three bracket doors and a decorative
   map SVG is three pieces of visual interest competing in one viewport, and
   the doors are the point of the page. It is one line to bring back.
-------------------------------------------------------------------------- */
.hero-router{min-height:0;padding:calc(var(--2xl) + 64px) 0 var(--xl)}
.hero-router .hero-row{grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.hero-router .flourish{display:none}
.hero-router .hero-copy{max-width:none}
.hero-router .kicker{margin-bottom:var(--l)}
.hero-router .display{max-width:18ch;margin-bottom:0}

@media (max-width:760px){
  .hero-router .display{max-width:none}
}

/* ==========================================================================
   AI VISIBILITY FLOWS - window treatment and session controls
   17 August 2026, from Darren's read of the trial.
   Scoped to .sit-grid-3 so the four-tile adoption journey is untouched.
   ========================================================================== */

/* ---- the window: dark task bar, clean bone body ----
   Was Bone-on-Bone with a hairline pattern in the body. Now the task bar is
   Carbon - dark, but a clear step lighter than the Ink behind it, so the
   window reads as sitting ON the page rather than cut out of it - and the
   body is flat Bone with the pattern gone. */
.sit-grid-3 .sit[open] > summary{
  background:var(--carbon-2);border-color:rgba(255,214,10,.34);color:var(--white);
}
.sit-grid-3 .sit[open] .sit-t{color:var(--white)}
.sit-grid-3 .sit[open] .sit-s{color:var(--mist)}
.sit-grid-3 .sit[open] .dots i{background:rgba(255,255,255,.24)}
.sit-grid-3 .sit[open] .dots i:first-child{background:var(--yellow)}
.sit-grid-3 .sit[open] .win-x::before,
.sit-grid-3 .sit[open] .win-x::after{background:var(--mist)}
.sit-grid-3 .sit[open] .win{
  background:var(--bone);border-color:var(--line);color:var(--ink);
}

/* ---- tile face: the reader's line is the headline now ---- */
.sit-grid-3 .sit-t{font:600 var(--t-h3)/1.3 var(--f-display);color:var(--white)}
.sit-grid-3 .sit-s{
  display:block;font:400 var(--t-term)/1.5 var(--f-term);
  color:var(--mist);max-width:none;margin-top:var(--s);
}

/* ---- beats: node dots and dashed route removed (Darren, 17 Aug) ---- */
.sit-grid-3 .beat{padding-left:0}
.sit-grid-3 .beat::before,
.sit-grid-3 .beat::after{display:none}

/* ---- session controls: one wide arrow forward, one small step back ---- */
.sit-grid-3 .sess-bar{gap:var(--s);border-top-color:var(--line)}

.sit-grid-3 .sess-back{
  flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(10,10,10,.22);cursor:pointer;
  transition:border-color var(--base) var(--ease),background var(--base) var(--ease),opacity var(--base) var(--ease);
}
.sit-grid-3 .sess-back svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sit-grid-3 .sess-back:hover:not(:disabled){background:rgba(10,10,10,.05);border-color:var(--ink)}
.sit-grid-3 .sess-back:disabled{opacity:.28;cursor:default}

.sit-grid-3 .sess-next{
  flex:1 1 auto;min-width:0;height:46px;
  display:flex;align-items:center;gap:var(--m);padding:0 var(--m);
  background:var(--ink);border:1px solid var(--ink);color:var(--white);cursor:pointer;
  transition:background var(--base) var(--ease);
}
.sit-grid-3 .sess-next:hover{background:#000}
.sit-grid-3 .sess-next .sess-step{
  flex:0 0 auto;color:var(--yellow);
  font:500 var(--t-term)/1 var(--f-term);font-variant-numeric:tabular-nums;
}
/* the long shaft of the arrow - it grows to fill whatever is left */
.sit-grid-3 .sess-rule{flex:1 1 auto;height:1px;background:rgba(255,255,255,.42);min-width:24px}
.sit-grid-3 .sess-arrow{flex:0 0 auto;line-height:0;transition:transform var(--base) var(--ease)}
.sit-grid-3 .sess-arrow svg{width:20px;height:20px;fill:none;stroke:var(--yellow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;margin-left:-9px}
.sit-grid-3 .sess-next:hover .sess-arrow{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
  .sit-grid-3 .sess-arrow{transition:none}
}

/* ==========================================================================
   CORNERS - Darren's rule, 17 August 2026

   NOT a blanket softening. The shape now carries meaning:

     SQUARE   = you can act on this. Tiles, CTAs, buttons, inputs, cards
                you click. The square edge IS the affordance.
     ROUNDED  = you are inside it now. A tile that has opened into a window,
                and the surfaces that live within that window.

   So the same tile is square shut and rounded open, and the corner is doing
   a job rather than being a style preference.

   SUPERSEDES "square corners sitewide" in BRAND.md Part 2 section 3b, locked
   7 Aug 2026. NEEDS RECORDING THERE - see CORNER-RULE-NOTE.md. A guideline
   that changed on the site and not in the manual is how the last drift began.

   One token: change --r and every window on the site moves together.
   ========================================================================== */
:root{ --r:6px; }

/* --- ROUNDED: the window, and what lives inside it --- */
.sit[open] > summary{ border-radius:var(--r) var(--r) 0 0 }
.sit[open] .win{ border-radius:0 0 var(--r) var(--r) }
.avc-panel,
.avc-evi{ border-radius:var(--r) }
/* left-edge strips keep their square edge against the border they hang off */
.avc-note,
.avc-alarm{ border-radius:0 var(--r) var(--r) 0 }

/* --- SQUARE: everything you act on. Explicit, so nothing inherits by
       accident and the intent is readable in the file. --- */
.sit,
.sit > summary,
.rdoor,
.router,
.sess-back,
.sess-next,
.avc-input,
.avc-go,
.pill{ border-radius:0 }

/* ==========================================================================
   THE RESULT PANEL, ON BONE - Darren, 17 August 2026

   It was an Ink panel sitting inside a Bone window, and the window's own
   `.route-home .beat p:not(.tag)` rule (Graphite) out-specified the panel's
   white text - so the verdict rendered dark-on-dark and could not be read.

   Rather than fight the cascade, the panel joins the window: Bone body, Ink
   outline, same corner radius. Everything below is scoped `.route-home
   .avc-panel` so it matches that specificity and wins on source order.

   The three status colours are re-cut for a light surface. The dark-surface
   pair at the top of the AI Visibility block is now unused by this panel but
   is kept for anything that renders on Ink later.
   ========================================================================== */
:root{
  --avc-ok-l:#146B3A;    /* AA on Bone */
  --avc-bad-l:#A32D2D;
  --avc-warn-l:#8A6A00;  /* yellow is unreadable as text on Bone */
}

.route-home .avc-panel{
  background:var(--bone);border:1px solid var(--ink);border-radius:var(--r);
  color:var(--ink);
}

.route-home .avc-panel p.avc-checked{color:var(--graphite)}
.route-home .avc-panel h3.avc-head{color:var(--ink)}
.route-home .avc-panel p.avc-sub{color:var(--graphite)}

/* engine table */
.route-home .avc-panel .avc-table{border-top-color:rgba(10,10,10,.18)}
.route-home .avc-panel .avc-row{border-bottom-color:rgba(10,10,10,.12)}
.route-home .avc-panel .avc-row.is-head span{color:var(--graphite)}
.route-home .avc-panel span.avc-eng{color:var(--ink)}
.route-home .avc-panel .avc-v.ok{color:var(--avc-ok-l)}
.route-home .avc-panel .avc-v.bad{color:var(--avc-bad-l)}
.route-home .avc-panel .avc-v.warn{color:var(--avc-warn-l)}
.route-home .avc-panel .avc-v.na{color:var(--graphite);opacity:.6}

/* concern strips */
.route-home .avc-panel .avc-note{
  background:rgba(255,214,10,.16);border-left-color:var(--avc-warn-l);border-radius:0 var(--r) var(--r) 0;
}
.route-home .avc-panel .avc-note.is-good{background:rgba(20,107,58,.10);border-left-color:var(--avc-ok-l)}
.route-home .avc-panel .avc-note.is-bad{background:rgba(163,45,45,.10);border-left-color:var(--avc-bad-l)}
.route-home .avc-panel .avc-note p{color:var(--graphite)}
.route-home .avc-panel .avc-note b{color:var(--ink)}

/* the two alarms */
.route-home .avc-panel .avc-alarm{
  background:rgba(163,45,45,.10);border-left-color:var(--avc-bad-l);border-radius:0 var(--r) var(--r) 0;
}
.route-home .avc-panel .avc-alarm.is-amber{background:rgba(255,214,10,.16);border-left-color:var(--avc-warn-l)}
.route-home .avc-panel .avc-alarm h4{color:var(--ink)}
.route-home .avc-panel .avc-alarm p{color:var(--graphite)}

/* evidence drawer - the bit that makes it an audit */
.route-home .avc-panel .avc-eviw summary{color:var(--graphite)}
.route-home .avc-panel .avc-eviw summary:hover{color:var(--ink)}
.route-home .avc-panel .avc-evi{
  background:var(--white);border-color:var(--line);color:var(--graphite);border-radius:var(--r);
}
.route-home .avc-panel .avc-evi b{color:var(--ink)}

/* the universal closing */
.route-home .avc-panel .avc-close{border-top-color:rgba(10,10,10,.14)}
.route-home .avc-panel .avc-close h4{color:var(--ink)}
.route-home .avc-panel .avc-close p{color:var(--graphite)}
.route-home .avc-panel .avc-fallback{border-top-color:rgba(10,10,10,.14)}
.route-home .avc-panel p.avc-done{color:var(--avc-ok-l)}

/* the wait */
.route-home .avc-load{color:var(--graphite)}

/* The .sits block was drawn to tuck under the homepage hero (-72px). On the
   adoption page it follows .p-hero, which has its own spacing, so the pull-up
   would crop it. 17 Aug 2026. */
.p-hero + .sits{margin-top:0;padding-top:var(--2xl)}

/* The surface caveat that closes every result. Quieter than the verdict above
   it, but the offer inside it is the actual conversion, so the bold carries
   weight the rest of the line does not. 18 Aug 2026. */
.route-home .avc-panel p.avc-surface{
  margin:var(--m) 0 var(--l);padding-top:var(--m);
  border-top:1px dashed rgba(10,10,10,.18);
  font:400 var(--t-term)/1.7 var(--f-body);color:var(--graphite);
}
.route-home .avc-panel p.avc-surface b{color:var(--ink);font-weight:600}
.avc-surface{font:400 var(--t-term)/1.7 var(--f-body);color:var(--mist);margin:var(--m) 0 var(--l)}
.avc-surface b{color:var(--white);font-weight:600}

/* The closing button sits on its own line. It was riding up next to the copy
   above it because .pill is inline-flex and had nothing forcing a break.
   Darren, 18 Aug 2026. */
.avc-close .pill{margin-top:var(--m)}
.avc-close p{margin-bottom:0}

/* The joke asset - B-84. Awards, commendations and the FAQ disclosure.
   Reuses the page-type shell; only these three need anything new. */
.awards,.commend{list-style:none;padding:0;margin:var(--l) 0 0;max-width:62ch}
.awards li,.commend li{
  padding:var(--m) 0;border-bottom:1px solid var(--hair);
  font:400 var(--t-body)/1.6 var(--f-body);color:var(--mist);
}
.awards li:last-child,.commend li:last-child{border-bottom:0}
.awards b,.commend b{color:var(--white);font-weight:600;margin-right:10px}
.awards small,.commend small{color:var(--mist);opacity:.7;font-size:var(--t-term)}

.faq-list{margin-top:var(--l);max-width:70ch}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--l) 0;
  display:flex;align-items:baseline;gap:var(--m);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';font:500 var(--t-h3)/1 var(--f-term);color:var(--yellow);flex:0 0 auto}
.faq[open] summary::before{content:'\2212'}
.faq summary h3{margin:0;font:600 var(--t-body)/1.45 var(--f-body);color:var(--white)}
.faq summary:hover h3{color:var(--yellow)}
.faq-a{padding:0 0 var(--l) calc(var(--m) + 14px)}
.faq-a p{margin:0;color:var(--mist);font:400 var(--t-body)/1.7 var(--f-body);max-width:64ch}

/* --------------------------------------------------------------------------
   ROUTER - SOLO MODIFIER + HERO STACKING FIX. Final pass 27 Aug 2026.

   ROOT CAUSE, found by browser measurement: .hero is display:flex (row) and
   the router hero holds TWO .wrap children - copy and router. With no
   stacking rule they sat side by side at 50/50 AT EVERY WIDTH, which crushed
   the headline into a 584px column on desktop and a 139px one on phones.
   The live site never used .hero-router, so this had never been exercised.

   The fix is the section stacking vertically. Copy takes the full measure,
   the door sits under it on the right. Applies at all widths, which is why
   the mobile failure disappears with the same line.

   Type: the hero now steps 1 (display, one line at desktop) / 3 (question,
   26px) / 5 (sub, 19px) so it reads as headline, question, explanation
   rather than two shouts and a whisper. All sizes are existing scale steps.

   TO RESTORE THE THREE-DOOR ROUTER: delete "router-solo" from the <nav> in
   index.html and add the other two .rdoor blocks back.
   -------------------------------------------------------------------------- */
.hero-router{flex-direction:column;justify-content:flex-start}

/* Hierarchy flipped 27 Aug 2026 (Darren): the yellow question is the loud
   line, the statement sets it up. Statement one line, question bigger. */
.hero-router .display{
  max-width:none;
  font-size:clamp(26px,2.6vw,36px);
  margin-bottom:var(--s);
}
.hero-router .router-q{
  font-size:clamp(38px,5vw,62px);
  margin:0 0 var(--m);max-width:none;
}
.hero-router .hero-sub{
  font-size:var(--t-lead);color:var(--mist);
  margin:0;max-width:56ch;
}

/* the door: below the copy, bottom right, brackets tight to the panel */
.router.router-solo{
  grid-template-columns:minmax(0,1fr);
  justify-items:end;
  border-top:0;                 /* the full-width seam went with the label row */
  margin-top:calc(-1*var(--xl));/* pulls the door up beside the closing sentence */
}
.router.router-solo .rdoor{
  border-right:0;
  width:min(380px,100%);
  padding:var(--m) var(--m);
  align-items:center;text-align:center;justify-content:center;  /* centred in the box (Darren, 27 Aug) */
}
.router.router-solo .rdoor .rdoor-go{align-self:center}
.router.router-solo .rdoor::before,
.router.router-solo .rdoor::after{right:0}

@media (max-width:760px){
  .router.router-solo{justify-items:stretch;margin-top:var(--l)}
  .router.router-solo .rdoor{width:100%}
  .hero-router .display{font-size:clamp(20px,5.5vw,26px)}
  .hero-router .router-q{font-size:clamp(32px,9vw,40px)}
}

/* --------------------------------------------------------------------------
   KICKER RESTORED ON SERVICE HERO. The base rule p.kicker{display:none} was
   written when kickers were h1s. The customer acquisition hero legitimately
   carries a <p class="kicker"> label above an <h1 class="display">.
   -------------------------------------------------------------------------- */
.hero .hero-copy p.kicker{display:block!important}

/* --------------------------------------------------------------------------
   HOMEPAGE PHOTO SECTION - the rotator was the same size and face as the
   heading above it, so the two read as a duplicated-heading fault. The
   rotator drops to h3 size in the mono face, which is the label register.
   -------------------------------------------------------------------------- */
/* rotator override removed 27 Aug 2026 - base serif style restored (Darren) */

/* --------------------------------------------------------------------------
   PANEL CLOSE - the Part stepper scrolls the window and loses the header.
   The open panel summary (which carries the close control) becomes sticky
   inside the viewport while its panel is open.
   -------------------------------------------------------------------------- */
.sits .sit[open] > summary{position:sticky;top:76px;z-index:5}

/* --------------------------------------------------------------------------
   MOBILE TYPE AND TAP TARGETS - from the 390px review, 27 Aug 2026.
   Applied under 760px only; desktop sizes untouched.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .nav .top{min-height:44px;display:inline-flex;align-items:center;font-size:16px;padding:0 var(--s)}
  .nav .brk-cta{font-size:16px;min-height:44px}
  .sit-s,.sit .kicker{font-size:16px}
  .dest-rv p{font-size:16px}
  .cf-label{font-size:16px}
  .cf-input{font-size:16px}   /* also stops iOS zoom-on-focus */
  .pill{min-height:44px;font-size:16px}
  .about-jump{min-height:44px;display:inline-flex;align-items:center;font-size:16px}
  .c-mail a,.ft a{min-height:44px;display:inline-flex;align-items:center}
  .ft-cols a,.ft-bottom a,.ft-bottom div{font-size:16px}
  .tlink{min-height:44px;display:inline-flex;align-items:center}
}

/* closing line under the three outcome cards (Darren, 27 Aug 2026) */
.dest-close{margin-top:var(--2xl);max-width:none}

/* service-page hero type, one step calmer than the homepage (Darren, 27 Aug 2026 -
   "the writing is still far too big", fourth time of asking) */
.hero:not(.hero-router) .display{font-size:clamp(32px,4.2vw,52px);max-width:none}
.hero:not(.hero-router) .hero-sub{font-size:var(--t-lead);color:var(--mist);max-width:56ch}

/* form-page intro: space between paragraphs, same skim rule as the flows */
.c-top .lead{max-width:60ch;margin:0 0 var(--m)}

/* CA hero: the payoff lines sit in yellow italics under the dash, and the
   hero releases its full-viewport height so the tiles move up (27 Aug 2026) */
.hero:not(.hero-router){min-height:0;padding:var(--xl) 0}
.customer-acquisition-page .hero .display{font-size:clamp(27px,4.2vw,52px)}
.display .hero-line{display:block}
.display .place-lock{display:inline-grid;grid-template-columns:auto auto;column-gap:.35em;align-items:start}
.display .place-prefix{color:var(--white);font-style:normal}
.display .rpt{display:block;font-style:italic;color:var(--yellow)}
.customer-acquisition-page .sits{margin-top:var(--m)}
@media (max-width:760px){
  .customer-acquisition-page .hero .flourish{display:none}
}

/* about cards: paragraph gaps, same skim rule as everywhere else (27 Aug) */
.about-practice p{margin:0 0 var(--m)}
.about-practice p:last-of-type{margin-bottom:var(--s)}
.about-value p{margin:0 0 var(--m)}
.about-value p:last-child{margin-bottom:0}

/* ==========================================================================
   THE GAP - "How this works" homepage section. Added 27 Aug 2026 (Darren).
   Dark section, brand tokens only. The graph is inline SVG in the house
   line-drawing style; labels are mono, the gap marker is yellow.
   ========================================================================== */
.gap-sec{padding:var(--3xl) 0;border-top:1px solid var(--hair)}
.gap-sec .kicker{display:block}
.gap-sec .h1{color:var(--white);margin-bottom:var(--m)}
.gap-lead{font-size:var(--t-lead);color:var(--mist);max-width:56ch;margin:0 0 var(--xl)}
.gap-fig{margin:0 0 var(--xl);max-width:900px}
.gap-fig svg{width:100%;height:auto;display:block}
.gap-fig .gx{font:400 13px 'IBM Plex Mono',ui-monospace,monospace;fill:var(--mist)}
.gap-fig .gl{font:500 14px 'IBM Plex Mono',ui-monospace,monospace}
.gap-fig .gl-tech{fill:var(--yellow)}
.gap-fig .gl-cust{fill:var(--white)}
.gap-fig .gl-rec{fill:var(--mist)}
.gap-fig .gl-gap{fill:var(--yellow);font-weight:600}
.gap-job{font:500 var(--t-h3)/1.4 var(--f-display);color:var(--white);max-width:44ch;margin:0 0 var(--xl)}
.gap-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--l);margin:0;padding:0}
.gap-card{border:1px solid var(--hair);padding:var(--l);border-radius:14px}
.gap-card h3{font:600 var(--t-h3)/1.25 var(--f-display);margin:0 0 var(--s);color:var(--white)}
.gap-card p{margin:0;font-size:var(--t-body);color:var(--mist)}
@media (max-width:860px){
  .gap-grid{grid-template-columns:1fr;gap:var(--m)}
  .gap-sec{padding:var(--2xl) 0}
  .gap-fig .gl{font-size:16px}
}

/* about-origin: head column scrapped 27 Aug 2026 (Darren) - copy takes the
   page width and reads as one column of text */
.about-origin-grid{grid-template-columns:minmax(0,1fr)}
.about-origin-copy{max-width:72ch}

/* bullet list inside a flow beat (Darren, 27 Aug 2026) */
.beat-list{margin:0 0 var(--m);padding-left:1.2em;color:var(--mist);font-size:var(--t-body);max-width:62ch}
.beat-list li{margin:0 0 var(--s)}
.beat-list li::marker{color:var(--yellow)}

/* closing double CTA on the homepage - the hero door pattern, twice */
.close-doors{padding:var(--2xl) 0 var(--3xl);border-top:1px solid var(--hair)}
.close-router{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--l);border-top:0}
.close-router .rdoor{border-right:0;border:1px solid var(--hair);border-radius:14px;padding:var(--l);align-items:center;text-align:center}
@media (max-width:760px){.close-router{grid-template-columns:1fr}}