/* GainSpring "Coil" (Cosmos) design language — shared stylesheet for the full site. */
:root{
  --paper:#F3EDE1; --paper-2:#FBF8F1; --paper-3:#E9E0CF;
  --ink:#1A1712; --ink-soft:#544E42;
  --cobalt:#2536E4; --cobalt-deep:#1A25A8;
  --lime:#C4EC3D; --red:#E8402A;

  /* ===== ACCENT SYSTEM =================================================
     FOUR ACCENTS. ONE VALUE EACH. They are the brand's own highlighter
     colours — the same four you see on the service cards — and there is no
     darker "text-safe" variant of any of them, because a second value of a
     hue reads as a second colour. One green on this site. One red.

       blue    #2536E4  the brand cobalt                     (Build)
       lime    #C4EC3D  the brand lime — THE green, always   (Report)
       orange  #FFB02E  cobalt/red's construction at hue 37, taken to the
                        same brightness as the lime so the four read as one
                        family rather than three brights and one deep tone
       red     #E8402A  the brand red                        (Shift)

     THE RULE THAT MAKES ONE VALUE ENOUGH:
       HUE IS FILL. Dots, bars, chips, quadrant washes, badges — anything
       carried by area. Never a label, never a hairline.
       TYPE IS INK. Labels sit in --ink beside a filled swatch, or knock out
       ON the fill using that accent's --on-* pairing below. Structural
       strokes are ink too. This is the pattern the report's survey charts
       already use, and it is why they read cleanly.

     --on-* is the only legible foreground for text placed on that fill:
     white survives on cobalt and red, ink is required on lime and orange.  */
  --acc-blue:#2536E4;   --on-blue:#FFFFFF;
  --acc-lime:#C4EC3D;   --on-lime:#1A1712;
  --acc-orange:#FFB02E; --on-orange:#1A1712;
  --acc-red:#E8402A;    --on-red:#FFFFFF;
  /* Quadrant SURFACES — the wash step, resolved to hex because the SVG
     engines in app.js paint the same four surfaces and both sides must agree
     exactly. Formula: mix(accent N%, --paper-2). N is NOT constant: lime and
     orange are far lighter than cobalt, so an equal mix would leave two
     quadrants invisible. N is tuned per hue for equal presence. Regenerate
     all four together whenever an accent changes.                          */
  --tint-blue:#DBDBEF;   /* acc-blue   15% */
  --tint-lime:#E8F4B4;   /* acc-lime   34% */
  --tint-orange:#FCE2B7; /* acc-orange 30% */
  --tint-red:#F8DCD3;    /* acc-red    15% */
  /* ===== SERVICE COLOURS ================================================
     Which accent belongs to which service. This is a SEPARATE mapping from
     the matrix quadrants, which use the same four accents for a different
     job: on the matrix a colour names a corner of the grid, here it names a
     service. Set here once; cards, numerals and rules all follow.
       01 Identify  red     the exposure nobody has looked at yet
       02 Report    orange  the diagnosis
       03 Build     blue    the system
       04 Shift     lime    the payoff, and green is the good outcome     */
  --svc-1:var(--acc-red);    --on-svc-1:var(--on-red);
  --svc-2:var(--acc-orange); --on-svc-2:var(--on-orange);
  --svc-3:var(--acc-blue);   --on-svc-3:var(--on-blue);
  --svc-4:var(--acc-lime);   --on-svc-4:var(--on-lime);
  /* semantic aliases — everything downstream reads these */
  --gain:var(--acc-lime); --loss:var(--acc-red); --caution:var(--acc-orange);
  --disp:"Bricolage Grotesque", system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --max:1440px; --gut:clamp(20px,5vw,64px);
  --line:1.5px solid var(--ink);
  --hair:1px solid rgba(26,23,18,.16);
}
*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:.98;letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);}
/* eyebrow — mixed case, cobalt, untracked (design-system treatment) */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;color:var(--cobalt);}
/* emphasis — display/sans in cobalt, never italic/serif. Heading accents go cobalt; lead paragraphs stay as written. */
.serif-it{font-family:inherit;font-style:normal;letter-spacing:inherit;}
h1 .serif-it,h2 .serif-it,h3 .serif-it{color:var(--cobalt);}
.lede{font-size:clamp(16.5px,1.5vw,20px);color:var(--ink-soft);max-width:52ch;}
/* confident aside under a hero headline */
.hero-sub{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.2vw,30px);line-height:1.1;letter-spacing:-0.025em;color:var(--ink-soft);margin-top:16px;}
.prose{font-size:17px;line-height:1.68;color:var(--ink-soft);max-width:64ch;}
.prose.strong{color:var(--ink);}

/* ===== BUTTONS — one call-to-action component ==========================
   Every CTA on this site is a pill with a right arrow. The arrow is drawn
   by the component, never typed into the markup, so it can never go
   missing on one page and appear on another.

   WIDTH: a pill is sized by its label, full stop. width:fit-content is
   load-bearing — a pill dropped into a column flexbox (.stack, .col-text)
   would otherwise stretch to the width of the paragraph above it, which
   reads as a banner instead of a button.

   COLOUR: cobalt is the CTA colour everywhere on the site. Lime is
   reserved for the one primary action in the pre-footer, so the closing
   ask is the only green button a visitor ever sees.                      */
.pill{display:inline-flex;align-items:center;gap:9px;width:fit-content;max-width:100%;border-radius:999px;padding:13px 24px;font-family:var(--sans);font-weight:700;font-size:15px;transition:transform .15s,background .2s,color .2s,border-color .2s;cursor:pointer;white-space:nowrap;}
.pill::after{content:"\2192";font-size:1.06em;line-height:1;transition:transform .18s ease;}
.pill:hover{transform:translateY(-1px);}
.pill:hover::after{transform:translateX(3px);}
.pill-ink{background:var(--ink);color:var(--paper);}
.pill-cobalt{background:var(--cobalt);color:#fff;}
.pill-cobalt:hover{background:var(--cobalt-deep);}
.pill-lime{background:var(--lime);color:var(--ink);}
.pill-outline{border:1.5px solid var(--cobalt);color:var(--cobalt);}
.pill-outline:hover{background:var(--cobalt);color:#fff;}
.pill-ghost{border:1.5px solid rgba(243,237,225,.5);color:var(--paper);}
@media(prefers-reduced-motion:reduce){ .pill,.pill:hover,.pill::after,.pill:hover::after{transition:none;transform:none;} }
.link-u{font-weight:600;color:var(--cobalt-deep);border-bottom:1.5px solid rgba(26,23,18,.28);padding-bottom:2px;}

/* ===== NUMBERS — design-language rule =================================
   EVERY number on this site follows the same three rules.

   1. NO LEADING ZERO. It is 1, 2, 3, 4. Never 01. A zero-padded numeral
      implies a list long enough to need the alignment, and four services
      is not that list.
   2. IT LIVES IN A ROUNDED SQUARE, filled with the colour that number
      stands for, with the numeral knocked out in whatever survives on
      that fill. Never a bare coloured numeral: two of the four accents
      cannot be read as type on paper, and they all read as a fill.
   3. TWO TIERS, and the offset shadow is what separates them.
      .numbox        supporting. A step in a list, a rail marker, a score.
                     Flat, no shadow, sized down.
      .numbox--lead  core. The thing the section is about. Carries a hard
                     offset shadow, down AND right, like a second square
                     sitting behind it. That is the pop.

   Set --nb (fill) and --nb-on (numeral) on the element or any ancestor.  */
.numbox{display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:var(--nb,var(--cobalt));color:var(--nb-on,#fff);
  font-family:var(--disp);font-weight:800;line-height:1;letter-spacing:-0.02em;
  width:30px;height:30px;border-radius:9px;font-size:15px;}
.numbox--lead{width:clamp(54px,5.4vw,74px);height:clamp(54px,5.4vw,74px);border-radius:17px;
  font-size:clamp(26px,2.7vw,36px);
  box-shadow:3px 3px 0 rgba(26,23,18,.18);}
.numbox--sm{width:23px;height:23px;border-radius:7px;font-size:12px;}

/* logo lockup */
.lock{display:inline-flex;align-items:center;gap:11px;}
.lock [data-mark]{display:inline-flex;align-items:center;line-height:0;}
.word{font-family:var(--disp);font-weight:800;letter-spacing:-0.03em;font-size:22px;}
.word .ai{color:var(--cobalt);}
.on-ink .word{color:var(--paper);} .on-ink .word .ai{color:var(--lime);}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 84%, transparent);backdrop-filter:blur(10px);border-bottom:var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px;}
.nav nav{display:flex;align-items:center;gap:24px;}
.nav nav a.plain{font-weight:600;font-size:14.5px;}
.nav nav a.plain:hover{color:var(--cobalt);}
.nav nav a.active{color:var(--cobalt);}
.nav .navitem{position:relative;align-self:stretch;display:flex;align-items:center;}
.mega{position:absolute;top:100%;left:-14px;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60;}
.nav .navitem:hover .mega,.nav .navitem:focus-within .mega{opacity:1;visibility:visible;transform:none;}
/* Services mega menu: a 2x2 of the four services, each with a one-line summary,
   so the menu explains the method instead of just listing four words. */
.mega{left:-260px;}
.mega-inner{background:var(--paper-2);border:var(--hair);border-radius:16px;box-shadow:0 26px 54px -20px rgba(26,23,18,.36);padding:12px;width:640px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.mega-card{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:5px;align-items:baseline;padding:14px 15px 15px;border-radius:12px;transition:background .15s;}
.mega-card:hover{background:var(--paper-3);}
.mega-card .mn{align-self:center;}
.mega-card:nth-child(1){--nb:var(--svc-1);--nb-on:var(--on-svc-1);}
.mega-card:nth-child(2){--nb:var(--svc-2);--nb-on:var(--on-svc-2);}
.mega-card:nth-child(3){--nb:var(--svc-3);--nb-on:var(--on-svc-3);}
.mega-card:nth-child(4){--nb:var(--svc-4);--nb-on:var(--on-svc-4);}
.mega-card .mt{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-0.02em;color:var(--ink);}
.mega-card:hover .mt{color:var(--cobalt);}
.mega-card .md{grid-column:2;font-family:var(--sans);font-weight:400;font-size:13px;line-height:1.45;color:var(--ink-soft);}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:9px;padding:11px 15px 3px;border-top:var(--hair);font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);}
.mega-foot a{font-weight:700;color:var(--cobalt-deep);white-space:nowrap;}
@media(max-width:1180px){ .mega-inner{width:520px;} .mega{left:-200px;} }
.nav-mobile a.sub{padding-left:22px;font-size:14px;color:var(--ink-soft);border-bottom:none;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-mobile{display:none;border-top:var(--hair);padding:8px var(--gut) 20px;}
.nav-mobile a{display:block;padding:13px 0;font-size:16px;font-weight:600;border-bottom:var(--hair);}

/* section shells */
.section{padding-block:clamp(56px,8vw,104px);}
.section--paper{background:var(--paper);}
.section--card{background:var(--paper-2);}
.section--recessed{background:var(--paper-3);}
.section--cobalt{background:var(--cobalt);color:#fff;}
.section--ink{background:var(--ink);color:var(--paper);}
.hairline-top{border-top:var(--line);}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:var(--line);}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr);gap:40px;align-items:center;padding-block:clamp(48px,7vw,92px);}
.hero h1{font-size:clamp(44px,6vw,96px);letter-spacing:-0.04em;}
.hero h1 .serif-it{padding-right:.04em;}
.hero .lede{margin-top:24px;}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
/* A hero can carry a figure instead of the mark. Same slot, same alignment;
   the figure keeps the graphic frame every other chart on the site sits in. */
.hero-fig{display:flex;align-items:center;justify-content:center;}
.hero-fig .gfx{width:100%;max-width:540px;}
.fig-sq{aspect-ratio:1/1;position:relative;}
.fig-sq > [data-illo]{position:absolute;inset:0;}
/* a headline with two clauses needs to come down a step or it runs seven lines */
.hero h1.h1-long{font-size:clamp(32px,4.1vw,62px);letter-spacing:-0.035em;}
.hero-coil{display:flex;align-items:center;justify-content:center;}
.hero-coil svg{width:min(42vw,440px);height:auto;}
.hero--solo .wrap{grid-template-columns:1fr;}
.hero--solo .hero-coil{position:absolute;right:calc(var(--gut) * -0.4);top:50%;transform:translateY(-50%);opacity:.9;pointer-events:none;}
.hero--solo .hero-inner{position:relative;z-index:1;max-width:64ch;}

/* sticky content section (the pattern Mike loved) */
.sticky-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:start;}
.sticky-head{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:18px;}
.sticky-head h2{font-size:clamp(30px,4vw,52px);}
.rule{height:1.5px;background:var(--cobalt);width:150px;}

/* stat blocks */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);border-block:var(--line);}
.block{padding:clamp(34px,4vw,56px) var(--gut);border-right:var(--line);}
.block:last-child{border-right:none;}
.block .num{font-family:var(--disp);font-weight:800;font-size:clamp(52px,7vw,88px);line-height:.9;letter-spacing:-0.04em;}
.block .num .u{font-size:.38em;font-weight:700;}
.block p{margin-top:14px;font-size:15px;color:var(--ink-soft);max-width:26ch;}
.b-cobalt{background:var(--cobalt);color:#fff;} .b-cobalt p{color:rgba(255,255,255,.85);}
.b-lime{background:var(--lime);} .b-lime p{color:var(--ink);}

/* phase / color cards */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.card-grid.two{grid-template-columns:1fr 1fr;}
.card-grid.three{grid-template-columns:repeat(3,1fr);}
.pcard{border-radius:18px;padding:26px 24px 28px;display:flex;flex-direction:column;border:var(--line);min-height:280px;}
/* On a service card the badge inverts: it fills with the card's foreground and
   the numeral takes the card's own colour. That reads on all four accents
   without needing a fifth. */
.pcard .pn{--nb:var(--on-svc,var(--cobalt));--nb-on:var(--svc,#fff);}
.c-identify{--svc:var(--svc-1);--on-svc:var(--on-svc-1);}
.c-report{--svc:var(--svc-2);--on-svc:var(--on-svc-2);}
.c-build{--svc:var(--svc-3);--on-svc:var(--on-svc-3);}
.c-shift{--svc:var(--svc-4);--on-svc:var(--on-svc-4);}
.c-paper .pn{--nb:var(--cobalt);--nb-on:#fff;}
.pcard h3{font-size:25px;margin:12px 0 12px;}
.pcard p{font-size:14.5px;line-height:1.5;}
.pcard .arrow{margin-top:auto;font-family:var(--disp);font-weight:800;font-size:24px;padding-top:16px;}
.c-paper{background:var(--paper-2);} .c-paper .pn,.c-paper .arrow{color:var(--cobalt);}
/* the four service cards. Named for the service so the mapping is legible in
   the markup and a colour change never means hunting for ".c-red". */
.c-identify{background:var(--svc-1);color:var(--on-svc-1);}
.c-report{background:var(--svc-2);color:var(--on-svc-2);}
.c-build{background:var(--svc-3);color:var(--on-svc-3);}
.c-shift{background:var(--svc-4);color:var(--on-svc-4);}
.c-lime{background:var(--lime);}
.c-cobalt{background:var(--cobalt);color:#fff;}
.c-red{background:var(--red);color:#fff;}
.c-ink{background:var(--ink);color:var(--paper);}

/* plain card */
.card{background:var(--paper-2);border:var(--line);border-radius:16px;padding:28px 26px;}
.card h3{font-size:22px;margin-bottom:10px;}

/* table */
.gtable{width:100%;border-collapse:collapse;border:var(--line);border-radius:12px;overflow:hidden;}
.gtable th,.gtable td{text-align:left;vertical-align:top;padding:15px 18px;border-bottom:var(--hair);}
.gtable th{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;background:var(--paper-3);}
.gtable tr:last-child td{border-bottom:none;}
.gtable .term{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--cobalt-deep);}
.tscroll{overflow-x:auto;}
/* frozen full-width report tables (scorecard, revenue, dept, tech, kpis) */
.sticky-grid.sg-stack{display:block;}
.sticky-grid.sg-stack .sticky-head{position:static;top:auto;margin-bottom:30px;}
.gt-freeze{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0;}
.gt-freeze tr:first-child th{position:sticky;top:70px;z-index:6;border-bottom:var(--line);box-shadow:0 9px 14px -10px rgba(26,23,18,.34);}
/* revenue-lens: keep the service-line + score on one line so the left column reads cleanly */
#revenue .term{white-space:nowrap;}

/* chips / tags */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{border:var(--hair);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;}
.score{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;font-family:var(--disp);font-weight:800;color:#fff;}

/* ===== GRAPHIC FRAME — design-language rule ==========================
   EVERY graphic on this site sits inside a rounded-square frame: matrices,
   diagrams, charts, scatter maps, illustrations, image placeholders. The
   frame is what makes a drawing read as a considered figure instead of art
   floating on the page. Paper-2 surface, hairline border, 16px radius,
   generous inset padding so the figure never touches its own edge.
   NEVER render a bare diagram straight onto a section background.
   Apply .gfx to the container. On dark sections the frame stays light so
   the figure keeps its own paper surface.                                */
.gfx,.smx,.smxsys,.jv-scatter{background:var(--paper-2);border:var(--hair);border-radius:16px;padding:clamp(14px,2vw,22px);}
.gfx > svg,.jv-scatter > svg{width:100%;height:auto;display:block;}
/* never double-frame: a figure nested inside .gfx drops its own frame */
.gfx .smx,.gfx .smxsys,.gfx .jv-scatter,.gfx .plate{background:none;border:none;padding:0;}
.gfx-cap{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:12px;}
.section--ink .gfx,.section--ink .smx,.section--ink .smxsys,
.section--cobalt .gfx,.section--cobalt .smx{border-color:rgba(26,23,18,.10);}

/* image plate (placeholder for Claw Design art) — the frame plus registration ticks */
.plate{position:relative;aspect-ratio:4/3;border:var(--line);border-radius:18px;background:var(--paper-2);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;}
.plate.tall{aspect-ratio:3/4;} .plate.wide{aspect-ratio:16/9;} .plate.sq{aspect-ratio:1/1;}
.plate.on-cobalt{background:var(--cobalt-deep);border-color:rgba(243,237,225,.3);color:#fff;}
.plate .pl-num{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.plate.on-cobalt .pl-num{color:rgba(243,237,225,.75);}
.plate .pl-cap{font-family:var(--sans);font-size:14px;margin-top:8px;color:var(--ink-soft);max-width:40ch;}
.plate.on-cobalt .pl-cap{color:rgba(243,237,225,.85);}
.plate::before,.plate::after,.plate .tk::before,.plate .tk::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid currentColor;opacity:.35;}
.plate::before{top:12px;left:12px;border-right:0;border-bottom:0;}
.plate::after{top:12px;right:12px;border-left:0;border-bottom:0;}
.plate .tk::before{bottom:12px;left:12px;border-right:0;border-top:0;}
.plate .tk::after{bottom:12px;right:12px;border-left:0;border-top:0;}

/* editorial */
.edit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.pullquote{font-family:var(--disp);font-weight:700;font-style:normal;letter-spacing:-0.02em;font-size:clamp(30px,3.9vw,52px);line-height:1.08;}
.pullquote .u{color:var(--cobalt);}

/* CTA */
.cta{position:relative;overflow:hidden;text-align:center;}
.cta h2{font-size:clamp(38px,6.4vw,92px);letter-spacing:-0.04em;max-width:20ch;margin:0 auto;position:relative;z-index:1;}
.cta .pill{margin-top:30px;position:relative;z-index:1;}
/* two-line CTA: the setup reads quieter, the demand lands big and in lime */
.cta h2.cta-stack{max-width:24ch;display:flex;flex-direction:column;gap:.1em;}
.cta .cta-l1{font-size:clamp(21px,2.6vw,38px);line-height:1.12;letter-spacing:-0.02em;color:rgba(255,255,255,.82);}
.cta .cta-l2{font-size:clamp(40px,6.6vw,96px);line-height:.96;letter-spacing:-0.04em;color:var(--lime);}
.cta-deco{position:absolute;pointer-events:none;opacity:.16;}
.cta-deco.l{left:-60px;top:-40px;} .cta-deco.r{right:-70px;bottom:-70px;}

/* back to top — appears once you are a screen down, sits clear of the report TOC */
.totop{position:fixed;right:clamp(16px,2.6vw,34px);bottom:clamp(16px,2.6vw,34px);z-index:70;
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--lime);color:var(--ink);border:1.5px solid var(--ink);cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(26,23,18,.5);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility .22s,box-shadow .18s;}
.totop.on{opacity:1;visibility:visible;transform:none;}
.totop:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(26,23,18,.55);}
.totop:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;}
@media(max-width:560px){ .totop{width:46px;height:46px;} }
@media(prefers-reduced-motion:reduce){ .totop,.totop:hover{transition:none;transform:none;} }

/* footer */
.foot{background:var(--ink);color:var(--paper);}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding:56px var(--gut) 32px;}
.foot .word{color:var(--paper);} .foot .word .ai{color:var(--lime);}
.foot .fcol h4{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,237,225,.6);margin-bottom:12px;}
.foot .fcol a{display:block;padding:5px 0;font-size:14.5px;color:rgba(243,237,225,.85);}
.foot .fcol a:hover{color:var(--lime);}
.foot-base{border-top:1px solid rgba(243,237,225,.16);}
.foot-base .wrap{display:flex;justify-content:space-between;gap:16px;padding:16px var(--gut);font-size:12.5px;color:rgba(243,237,225,.6);grid-template-columns:none;}

/* anchor targets clear the sticky nav */
section[id]{scroll-margin-top:88px;}

/* floating report table of contents (hugs the far left) */
.rtoc{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:10px;padding:18px 15px;
  background:color-mix(in srgb,var(--paper-2) 82%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:var(--hair);border-left:none;border-radius:0 16px 16px 0;box-shadow:0 14px 34px -16px rgba(26,23,18,.24);transition:box-shadow .3s;}
.rtoc:hover{box-shadow:0 20px 46px -16px rgba(26,23,18,.34);}
.rtoc-item{display:flex;align-items:center;height:16px;text-decoration:none;}
.rtoc-tick{flex:none;width:16px;height:2.5px;border-radius:2px;background:rgba(26,23,18,.32);transition:width .28s cubic-bezier(.2,.7,.2,1),background .28s;}
.rtoc-item:hover .rtoc-tick{background:var(--cobalt);width:24px;}
.rtoc-item.active .rtoc-tick{background:var(--cobalt);width:30px;}
.rtoc-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-left:0;
  font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);
  transition:max-width .32s cubic-bezier(.2,.7,.2,1),opacity .25s,margin-left .32s;}
.rtoc:hover .rtoc-label{max-width:240px;opacity:1;margin-left:13px;}
.rtoc-item.active .rtoc-label{color:var(--cobalt);}
@media(max-width:1100px){ .rtoc{display:none;} }
@media(prefers-reduced-motion:reduce){ .rtoc,.rtoc-tick,.rtoc-label{transition:none;} }

/* home "the shift" — animated Jevons matrix */
.shift-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;}
.hxmx-plot{position:relative;aspect-ratio:1.15;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:rgba(26,23,18,.14);border:var(--hair);border-radius:14px;overflow:hidden;}
.hxmx-q{position:relative;display:flex;padding:12px 14px;opacity:0;transform:scale(.94);transition:opacity .55s ease,transform .55s ease;}
.hxmx:not([data-phase=""]) .hxmx-q{opacity:1;transform:none;}
/* quadrant surfaces are the 8% tint step of the accent; labels are the ink tier */
.q-tl{--c:var(--acc-blue);--on:var(--on-blue);--t:var(--tint-blue);align-items:flex-start;justify-content:flex-start;transition-delay:0s;}
.q-tr{--c:var(--acc-lime);--on:var(--on-lime);--t:var(--tint-lime);align-items:flex-start;justify-content:flex-end;transition-delay:.16s;}
.q-bl{--c:var(--acc-red);--on:var(--on-red);--t:var(--tint-red);align-items:flex-end;justify-content:flex-start;transition-delay:.32s;}
.q-br{--c:var(--acc-orange);--on:var(--on-orange);--t:var(--tint-orange);align-items:flex-end;justify-content:flex-end;transition-delay:.48s;}
.hxmx-q{background:var(--t);}
.hxmx-name{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:800;font-size:clamp(10px,1.05vw,13px);letter-spacing:-0.01em;color:var(--ink);}
.hxmx-name::before{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--c);flex:none;}
.hxmx-dot{position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;left:var(--hx);top:var(--hy);border-radius:50%;background:var(--dc);border:1.4px solid rgba(26,23,18,.5);opacity:0;transform:scale(.3);z-index:2;
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),left 1s cubic-bezier(.5,0,.15,1),top 1s cubic-bezier(.5,0,.15,1),background .7s ease;}
.hxmx[data-phase="dots"] .hxmx-dot,.hxmx[data-phase="shift"] .hxmx-dot{opacity:1;transform:none;}
.hxmx[data-phase="shift"] .hxmx-dot[data-to]{left:var(--tx);top:var(--ty);background:var(--tc);}
.hxmx[data-phase="reset"] .hxmx-dot{opacity:0;transform:scale(.3);}
.hxmx-axis{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-soft);}
@media(max-width:900px){.shift-grid{grid-template-columns:1fr;gap:34px;}}
@media(prefers-reduced-motion:reduce){.hxmx-q,.hxmx-dot{transition:none;}}

/* services phase matrix visuals (identify / report / build / shift) */
.smx,.smxsys{background:var(--paper-2);border:var(--hair);border-radius:16px;padding:clamp(14px,2vw,22px);}
.smx svg,.smxsys svg{width:100%;height:auto;display:block;}
.smx-mk{fill:var(--c);stroke:rgba(26,23,18,.5);stroke-width:1.3;opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .45s ease var(--i,0s),transform .5s cubic-bezier(.2,.8,.2,1) var(--i,0s),fill .6s ease .9s;}
.smx.play .smx-mk{opacity:1;transform:scale(1);}
.smx-pos{transform:translate(var(--x),var(--y));transition:transform 1s cubic-bezier(.5,0,.15,1);}
.smx[data-mode="shift"].play .smx-pos{transform:translate(var(--tx),var(--ty));}
.smx[data-mode="shift"].play .smx-mk{fill:var(--tc);}
.smx-plan,.smx-ring{opacity:0;transition:opacity .55s ease;}
.smx.play .smx-plan{opacity:1;} .smx.play .smx-plan.faint{opacity:.4;}
.smx.play .smx-ring{opacity:.9;} .smx.play .smx-ring.faint{opacity:.5;}
/* home hero reuses the identical .smx dots (and the same graphic frame) */
.smx--snap .smx-pos,.smx--snap .smx-mk{transition:none;}
.sys-band,.sys-rail{opacity:0;transition:opacity .55s ease;}
.smxsys.play .sys-band{opacity:1;}
.smxsys.play .sys-rail{opacity:1;transition-delay:.55s;}
.sys-hitl,.sys-fb{opacity:0;transition:opacity .6s ease;}
.smxsys.play .sys-hitl{opacity:1;transition-delay:1.05s;}
.smxsys.play .sys-fb{opacity:.85;transition-delay:1.25s;}
.sys-edge{opacity:0;transition:opacity .5s ease;}
.smxsys.play .sys-edge{opacity:.5;}
.sys-node{opacity:0;transform:scale(.62);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
.smxsys.play .sys-node{opacity:1;transform:none;}
/* sample-report verdict: today lands, then goal climbs up / drift falls down */
.vmx svg{width:100%;height:auto;display:block;}
.vmx-today{opacity:0;transition:opacity .5s ease;}
.vmx.play .vmx-today{opacity:1;transition-delay:.2s;}
.vmx-climb{opacity:0;transform:translateY(74px);transition:opacity .6s ease,transform .85s cubic-bezier(.22,1,.36,1);}
.vmx.play .vmx-climb{opacity:1;transform:translateY(0);transition-delay:.9s;}
.vmx-drift{opacity:0;transform:translateY(-74px);transition:opacity .6s ease,transform .85s cubic-bezier(.22,1,.36,1);}
.vmx.play .vmx-drift{opacity:1;transform:translateY(0);transition-delay:1.7s;}
@media(prefers-reduced-motion:reduce){.smx-mk,.smx-pos,.smx-plan,.smx-ring,.sys-band,.sys-edge,.sys-node,.vmx-today,.vmx-climb,.vmx-drift{transition:none;transform:none;}}

/* ===== Professional identity awareness: benchmark survey charts ===== */
/* subgrid keeps title / sub / chart / note on the same baselines across both
   columns, so a longer caption can never shove one chart out of alignment */
.pia-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px;grid-template-rows:auto auto auto auto;}
.pia-panel{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0;align-content:start;}
.pia-h{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-0.02em;}
.pia-sub{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:4px 0 15px;}
.pia-chart{align-self:start;}
/* fixed label column: the bars must all start at the same x to be comparable */
.pia-row{display:grid;grid-template-columns:132px 1fr 46px;align-items:center;gap:12px;margin-bottom:9px;}
.pia-lab{font-family:var(--sans);font-size:13px;font-weight:600;}
.pia-track{display:block;height:20px;border-radius:5px;background:rgba(26,23,18,.07);overflow:hidden;}
.pia-fill{display:block;height:100%;border-radius:5px;background:var(--c,var(--cobalt));}
.pia-val{font-family:var(--disp);font-weight:800;font-size:14.5px;text-align:right;}
.pia-note{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-top:14px;align-self:start;}
.pia-note b{color:var(--ink);}
.pia-yoy{display:flex;align-items:flex-end;justify-content:center;gap:34px;height:150px;margin-top:6px;}
.pia-col{display:flex;flex-direction:column;align-items:center;gap:7px;width:82px;}
.pia-colbar{width:100%;border-radius:8px 8px 0 0;background:var(--c);}
.pia-colv{font-family:var(--disp);font-weight:800;font-size:17px;}
.pia-coll{font-family:var(--sans);font-size:12px;color:var(--ink-soft);}
@media(max-width:900px){.pia-grid{grid-template-columns:1fr;gap:30px;grid-template-rows:none;}.pia-panel{grid-row:auto;grid-template-rows:none;display:block;}}

/* ===== Industries explorer: pick a category off the grid, see its stack ===== */
/* Layout: grid pinned left, model beside it, the write-up full width below.
   Both graphics stay on screen together; the reading copy gets its own room. */
/* Rail min-width is load-bearing: the two quadrant columns are sized by their
   widest chip (min-content), so the card must be at least
   2*(widest chip + 20px box padding) + 8px gap + 44px card padding.
   Widest label today is 'Commercial construction' at ~167px, needing ~426px.
   450px leaves slack. Add a longer category label and re-check this. */
.indx{display:grid;grid-template-columns:minmax(450px,34%) 1fr;gap:26px;align-items:stretch;}
.indx > .gfx{display:flex;flex-direction:column;justify-content:center;}
.indx-rail{position:sticky;top:92px;align-self:start;}
.indx-side{display:block;margin-top:26px;}
.ixp{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:40px;align-items:start;
     border-top:var(--line);padding-top:26px;}
.ixp-head{display:flex;flex-direction:column;align-items:flex-start;gap:13px;}
/* stepper sits ABOVE the name with the quadrant tag beside it, so the controls
   never move as the paragraph length changes between categories */
.ixp-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ixp-nav .ix-step{margin:0;}
.ixp-head h3{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-0.03em;line-height:1.02;}
.ixp-body{display:flex;flex-direction:column;gap:18px;}
.ixp .ix-verdict{font-size:19px;}
.ixp .ix-note{font-size:16px;max-width:66ch;}
.ix-qchip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink);border:1.5px solid rgba(26,23,18,.24);}
.ix-qchip .ix-qd{width:9px;height:9px;border-radius:50%;background:var(--c,currentColor);}
.ix-verdict{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-0.01em;color:var(--ink);}
.ix-note{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
/* no rule, no box: a coloured lead-in label carries the emphasis instead */
.ix-risk{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:66ch;}
.ix-risk-l{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:4px;}
/* obligations read as a plain run, not a pill cloud */
.ixp-bind{font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--ink);border-top:var(--hair);padding-top:14px;}
.ixp-bind-l{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px;}
.ix-hint{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-top:16px;}
@media(max-width:1040px){
  .indx{grid-template-columns:1fr;}
  .indx-rail{position:static;}
  .ixp{grid-template-columns:1fr;gap:22px;}
}

/* The grid is a CONTROL, not a chart. Categories are real buttons: pill shaped,
   raised, with a filled selected state. Built in HTML rather than SVG so they
   get cursor, hover, focus rings and keyboard nav for free. */
.ixm{display:flex;flex-direction:column;gap:9px;}
.ixm-prompt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--cobalt);margin-bottom:4px;}
.ixm-prompt .ixm-count{flex:0 0 100%;padding-left:19px;font-weight:400;font-size:12px;color:var(--ink-soft);}
.ixm-top,.ixm-bot{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:-0.01em;padding-left:24px;}
/* quadrant names are INK with a filled swatch — the accent is never the type */
.ixm-qn{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);}
.ixm-qn::before{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--c);flex:none;}
.ixm-mid{display:flex;gap:7px;}
.ixm-yax{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:10px;color:var(--ink-soft);padding-block:6px;}
.ixm-plot{position:relative;flex:1;aspect-ratio:1.34;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:var(--hair);border-radius:12px;overflow:hidden;}
.ixm-q{border-right:1px dashed rgba(26,23,18,.2);border-bottom:1px dashed rgba(26,23,18,.2);}
.ixm-q:nth-child(2),.ixm-q:nth-child(4){border-right:none;}
.ixm-q:nth-child(3),.ixm-q:nth-child(4){border-bottom:none;}
.ixc{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;background:var(--paper-2);border:1.5px solid rgba(26,23,18,.22);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px -2px rgba(26,23,18,.28);transition:transform .16s ease,box-shadow .16s ease,background .16s,border-color .16s,color .16s;}
.ixc:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 7px 16px -5px rgba(26,23,18,.34);border-color:var(--c);z-index:3;}
.ixc .ixc-d{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;}
/* selected fills with the accent itself; the foreground comes from that
   accent's --on pairing, because white cannot hold on lime or orange. */
.ixc[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--on);z-index:4;box-shadow:0 9px 20px -6px color-mix(in srgb,var(--c) 70%,transparent);}
.ixc[aria-pressed="true"] .ixc-d{background:var(--on);opacity:.5;}
.ixc:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;}
.ixm-xax{text-align:center;font-family:var(--sans);font-size:10.5px;color:var(--ink-soft);padding-left:24px;}

/* stepper: browse without hunting, and the only sane control on a phone */
.ix-step{display:flex;align-items:center;gap:10px;}
.ix-step button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:var(--hair);background:var(--paper-2);cursor:pointer;font-size:15px;color:var(--ink);transition:background .15s,border-color .15s;}
.ix-step button:hover{background:var(--paper-3);border-color:var(--cobalt);color:var(--cobalt);}
.ix-step button:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
.ix-step .ix-of{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);min-width:74px;}
/* make the output visibly react, so cause and effect registers */
@keyframes ixpulse{0%{box-shadow:0 0 0 0 rgba(37,54,228,.30)}100%{box-shadow:0 0 0 16px rgba(37,54,228,0)}}
.ix-flash{animation:ixpulse .6s ease-out;}
@media(prefers-reduced-motion:reduce){.ix-flash{animation:none;} .ixc,.ixc:hover{transition:none;}}
/* FLOW MODE. A positioned scatter stops working once a pill is wider than a
   quadrant, so the same grid can render as four boxed, labelled quadrants with
   the chips flowing inside. Used on narrow screens and by layouts that need a
   short, wide grid. Toggled by JS (.ixm--flow), not by a media query, so page
   layouts can opt in at any width. */
.ixm--flow .ixm-top,.ixm--flow .ixm-bot,.ixm--flow .ixm-yax,.ixm--flow .ixm-xax{display:none;}
.ixm--flow .ixm-plot{display:grid;grid-template-columns:1fr 1fr;gap:8px;aspect-ratio:auto;border:none;border-radius:0;overflow:visible;}
.ixm--flow .ixm-q{border:var(--hair)!important;border-radius:12px;padding:9px 10px 11px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;}
.ixm--flow .ixm-q::before{content:attr(data-qn);flex:0 0 100%;font-family:var(--disp);font-weight:800;font-size:11px;color:var(--ink);
  border-left:5px solid var(--qc);border-radius:2px;padding-left:7px;line-height:1.25;margin-bottom:3px;}
.ixm--flow .ixc{position:static;transform:none;box-shadow:none;font-size:11.5px;padding:4px 10px 4px 8px;gap:6px;}
.ixm--flow .ixc .ixc-d{width:8px;height:8px;}
.ixm--flow .ixc:hover{transform:none;box-shadow:0 3px 9px -3px rgba(26,23,18,.3);}
.ixm--flow .ixc[aria-pressed="true"]{box-shadow:none;}
@media(max-width:560px){ .ixm--flow .ixm-plot{grid-template-columns:1fr;} }

/* sticky selector bar (variant C): keeps the choice on screen while the model
   is being read, with a mini map showing where you are on the grid */
.ix-sticky{position:sticky;top:69px;z-index:38;display:flex;align-items:center;gap:16px;padding:10px 0;background:var(--paper-2);border-bottom:var(--hair);}
.ixs-map{position:relative;width:52px;height:38px;flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:var(--hair);border-radius:5px;overflow:hidden;}
.ixs-dot{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid #FBF8F1;}
.ixs-q{font-family:var(--sans);font-size:12px;font-weight:700;}
.ixs-n{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-0.02em;}
.ix-sticky .ix-step{margin-left:auto;}

/* philosophy: the two moves — what actually happens to a reclaimed hour.
   Each bar is ONE person's hour on ONE task, before and after the shift. */
.moves{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.move{display:flex;flex-direction:column;gap:12px;}
.move h3{display:flex;align-items:center;gap:13px;font-size:20px;letter-spacing:-0.02em;}
/* the numeral reuses the report's badge shape (see .score--lg): squared, display
   800, knocked out on the accent. One numbering treatment across the whole site. */
.mv-n{width:38px;height:38px;border-radius:11px;font-size:19px;box-shadow:3px 3px 0 rgba(26,23,18,.18);}
.moves .move:first-child{--nb:var(--acc-red);--nb-on:var(--on-red);}
.moves .move:last-child{--nb:var(--acc-lime);--nb-on:var(--on-lime);}
.move .mv-note{font-size:14.5px;line-height:1.58;color:var(--ink-soft);}
.mv-lab{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.mvbar{display:flex;height:36px;border-radius:9px;overflow:hidden;border:var(--hair);}
.mvseg{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;padding-inline:6px;}
/* the two moves use the SITE palette, same red as Shift and same lime as Report */
.mv-toil{background:var(--red);color:#fff;}
.mv-auto{background:var(--cobalt);color:#fff;}
.mv-jud{background:var(--lime);color:var(--ink);}
.mv-arrow{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--cobalt);line-height:1;}
@media(max-width:760px){.moves{grid-template-columns:1fr;gap:30px;}}
/* the loop section's three takeaways — plain columns under the figure, no
   table and no boxes: the figure has already done the explaining */
.loop-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:38px;padding-top:26px;border-top:var(--hair);}
.loop-pts h4{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-0.02em;}
.loop-pts p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
@media(max-width:820px){.loop-pts{grid-template-columns:1fr;gap:22px;}}

/* report accordions: a section folds to a titled bar so the report can collapse
   into an in-page contents list */
/* CONTROL FIRST, THEN LABEL. The chevron is the leftmost thing in the row so
   the affordance is read before the title, not hunted for at the far edge.

   NOTHING MOVES ON OPEN. An accordion section contributes no padding of its
   own: the head owns a fixed band, the body owns the reading space. Opening
   a section therefore only reveals content BELOW the title — the title itself
   never shifts, so there is no jump and no pocket of dead space at the top. */
.section.acc{padding-block:0;}
/* Folded, the report is a CONTENTS LIST, so it has to look like one. The
   alternating section tones exist to give a long read some rhythm; on ten
   stacked title bars they just look arbitrary, so a closed section drops back
   to the common surface and takes its own tone again when it opens. */
.section.acc--closed{background:var(--paper-2);}
.acc-head{width:100%;display:flex;align-items:center;gap:15px;
  background:none;border:none;cursor:pointer;text-align:left;padding:23px 0;color:inherit;}
.acc-body{padding-bottom:clamp(48px,7vw,92px);}
.acc-head .acc-t{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-0.015em;color:var(--cobalt);transition:color .15s;}
.acc-head:hover .acc-t{color:var(--cobalt-deep);}
.acc-head .acc-i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:50%;border:var(--hair);color:var(--ink);transition:transform .22s ease,background .18s,border-color .18s;}
.acc-head:hover .acc-i{background:var(--paper-3);border-color:var(--cobalt);}
.acc-head[aria-expanded="false"] .acc-i{transform:rotate(-90deg);}
.acc-head:focus-visible{outline:2.5px solid var(--ink);outline-offset:-2px;border-radius:6px;}
.acc-all{background:var(--paper-2);border-top:var(--line);}
.acc-all .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px;}
.acc-all-n{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);}
.acc-all-b{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--cobalt-deep);background:none;
  border:var(--hair);border-radius:999px;padding:7px 16px;cursor:pointer;transition:background .15s;}
.acc-all-b:hover{background:var(--paper-3);}
@media(prefers-reduced-motion:reduce){ .acc-head .acc-i{transition:none;} }

/* ===== Engagement page ================================================= */
/* The matrix is drawn to a fixed viewBox and scales to its container, so at full
   page width its labels render two or three times their intended size. It gets a
   column, with the axis explainers reading alongside it. */
.eng-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3vw,40px);align-items:center;margin-top:30px;}
.eng-ax{display:flex;flex-direction:column;gap:16px;}
@media(max-width:900px){.eng-grid{grid-template-columns:1fr;}}

/* three plain columns of fact — what we need, how long, what lands. No boxes:
   these are answers, not features, and a card grid would sell them. */
.eng-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px;padding-top:24px;border-top:var(--hair);}
.eng-facts .ef h4{font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:-0.02em;}
.eng-facts .ef p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
@media(max-width:900px){.eng-facts{grid-template-columns:1fr;gap:22px;}}

/* the nine things inside a Report — numbered, because the order is the argument */
.eng-parts{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;margin-top:34px;}
.eng-parts .ep{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:20px 0;border-top:var(--hair);}
.eng-parts .ep-n{/* .numbox, supporting tier */}
.eng-parts .ep h4{font-family:var(--disp);font-weight:800;font-size:16.5px;letter-spacing:-0.02em;line-height:1.2;}
.eng-parts .ep p{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
@media(max-width:900px){.eng-parts{grid-template-columns:1fr;gap:0;}}

/* the isolation ladder. A ladder, not a comparison table: the point is that
   there are rungs between "all in" and "nothing", not that one wins. */
/* four options, not four steps — a 2x2 uses the card's width instead of leaving
   half of it empty behind a 74ch measure. The numbers carry the order. */
.iso{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;}
.iso-r{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px 0;border-top:var(--hair);}
.iso-r:nth-child(1),.iso-r:nth-child(2){border-top:none;padding-top:2px;}
@media(max-width:820px){.iso{grid-template-columns:1fr;} .iso-r:nth-child(2){border-top:var(--hair);padding-top:18px;}}
.iso-n{/* .numbox, supporting tier */}
.iso-r h4{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-0.02em;}
.iso-r p{margin-top:7px;font-size:14.5px;line-height:1.62;color:var(--ink-soft);}

/* questions. Plain hairline-separated blocks — no left rules, no boxes. */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;margin-top:26px;}
.qa .qa-i{padding:22px 0;border-top:var(--hair);}
.qa .qa-i:first-child{border-top:none;}
.qa h3{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-0.02em;line-height:1.2;}
.qa p{margin-top:9px;font-size:15px;line-height:1.65;color:var(--ink-soft);}
/* the lead question runs full width: it is the one everybody actually asks */
.qa:first-of-type{grid-template-columns:1fr;}
.qa:first-of-type p{max-width:78ch;font-size:16px;}
@media(max-width:900px){.qa{grid-template-columns:1fr;gap:0;}}

/* ===== Let's Get Started ================================================
   Heading left, form right, and NEITHER is sticky. An earlier version pinned a
   recap card beside the scrolling form, so the two halves of the page moved at
   different speeds and read as broken. The four-service recap now has its own
   full-width section underneath instead.                                      */
.gs-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(30px,4.4vw,68px);align-items:start;}
.gs-head{padding-top:4px;}
.gs-h1{font-size:clamp(34px,4vw,56px);letter-spacing:-0.035em;margin-top:16px;}
/* Same two-line construction as the pre-footer CTA: the setup reads quieter,
   the demand lands big. Cobalt rather than lime here because this one sits on
   paper, and lime is a fill colour, never type. */
.gs-stack{display:flex;flex-direction:column;gap:.08em;}
.gs-l1{font-size:clamp(19px,2vw,27px);line-height:1.14;letter-spacing:-0.02em;color:var(--ink-soft);}
.gs-l2{font-size:clamp(38px,4.4vw,62px);line-height:.98;letter-spacing:-0.04em;color:var(--cobalt);}
.gs-lede{margin-top:22px;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink);font-weight:500;max-width:34ch;}
.gs-lede2{margin-top:16px;font-size:16px;line-height:1.62;color:var(--ink-soft);max-width:44ch;}
.gs-form{display:flex;flex-direction:column;gap:20px;
  background:var(--paper-2);border:var(--hair);border-radius:16px;padding:clamp(22px,3vw,36px);}
.gsf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.gsf{display:flex;flex-direction:column;gap:7px;}
.gsf-l{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink);}
.gsf-o{font-weight:400;color:var(--ink-soft);}
.gsf input,.gsf textarea{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:#FFFDF8;border:1.5px solid rgba(26,23,18,.24);border-radius:11px;padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;}
.gsf textarea{resize:vertical;line-height:1.55;min-height:84px;}
.gsf input::placeholder,.gsf textarea::placeholder{color:#9a9285;}
.gsf input:focus,.gsf textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(37,54,228,.14);}
/* starting point: four choices beat a blank box, because most people cannot
   name their own pressure yet and will skip a field that asks them to */
.gsf-set{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.gsf-set legend{padding:0;}
.gsf-chips{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.gsf-chip{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;
  background:#FFFDF8;border:1.5px solid rgba(26,23,18,.24);border-radius:11px;padding:12px 14px;
  font-size:14.5px;line-height:1.35;transition:border-color .15s,background .15s;}
.gsf-chip:hover{border-color:var(--cobalt);}
.gsf-chip input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:17px;height:17px;
  border:1.5px solid rgba(26,23,18,.4);border-radius:50%;transition:border-color .15s,box-shadow .15s;}
.gsf-chip input:checked{border-color:var(--cobalt);border-width:5px;}
.gsf-chip:has(input:checked){border-color:var(--cobalt);background:color-mix(in srgb,var(--cobalt) 6%,#FFFDF8);}
.gsf-chip input:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
.gsf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.gsf-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:4px;}
.gsf-submit{border:none;font-size:15.5px;padding:14px 26px;flex:none;}
.gsf-submit:disabled{opacity:.6;cursor:default;transform:none;}
.gsf-note{font-size:13px;line-height:1.5;color:var(--ink-soft);max-width:42ch;}
.gsf-msg{font-size:14px;font-weight:600;}
.gsf-msg.err{color:var(--acc-red);}
.gsf-done h3{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-0.025em;}
.gsf-done p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--ink-soft);max-width:48ch;}
.gs-alt{margin-top:26px;padding-top:20px;border-top:var(--hair);font-size:14px;color:var(--ink-soft);max-width:44ch;}
@media(max-width:980px){ .gs-grid{grid-template-columns:1fr;gap:32px;} }
@media(max-width:640px){ .gsf-row,.gsf-chips{grid-template-columns:1fr;} }

/* reveal (gentle; no marquee) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);}
.reveal.in{opacity:1;transform:none;}

.stack{display:flex;flex-direction:column;}
.mt-s{margin-top:16px;} .mt-m{margin-top:26px;} .mt-l{margin-top:40px;}

@media(max-width:900px){
  .nav nav{display:none;} .nav-toggle{display:block;}
  .hero .wrap{grid-template-columns:1fr;} .hero-coil{margin-top:6px;} .hero-coil svg{width:min(58vw,300px);}
  .hero--solo .hero-coil{display:none;}
  .hero-fig{margin-top:10px;}
  .sticky-grid{grid-template-columns:1fr;gap:34px;} .sticky-head{position:static;}
  .blocks{grid-template-columns:1fr;} .block{border-right:none;border-bottom:var(--line);}
  .card-grid,.card-grid.three{grid-template-columns:1fr 1fr;}
  .edit-grid{grid-template-columns:1fr;gap:34px;}
  .foot .wrap{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:560px){ .card-grid,.card-grid.two,.card-grid.three{grid-template-columns:1fr;} }
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ===== Sample report — Jevons category & task map (GainSpring translation) =====
   Quadrant colors reuse the 1-4 score ramp so the map and the scorecard read as one system:
   gain=grow/growth-engine, cobalt=hold/do-better, caution=productize/DIY, loss=squeeze/automate. */
/* Each quadrant class carries its accent (--c, for fills) and the only
   foreground that survives on it (--on). Type never takes --c. */
.jv-gain{--c:var(--acc-lime);--on:var(--on-lime);--t:var(--tint-lime);}
.jv-cobalt{--c:var(--acc-blue);--on:var(--on-blue);--t:var(--tint-blue);}
.jv-caution{--c:var(--acc-orange);--on:var(--on-orange);--t:var(--tint-orange);}
.jv-loss{--c:var(--acc-red);--on:var(--on-red);--t:var(--tint-red);}

/* axis explainers */
.jv-ax-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.jv-ax{border:var(--hair);border-radius:12px;padding:16px 18px;background:var(--paper-2);font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.jv-ax b{color:var(--ink);font-weight:700;}

/* ===== Verdict hero ====================================================
   Even halves. The score used to sit alone in a narrow column with the body
   copy stacked full-width underneath, which left two large holes of dead
   space beside it. Everything the verdict says now lives in the left column
   and fills it, so the column runs to roughly the height of the matrix
   instead of the matrix towering over three lines of type. */
.verdict-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:stretch;}
/* the card takes the column's full height and centres the figure inside it,
   so the two halves square off instead of one running past the other */
.verdict-grid .jv-scatter{display:flex;flex-direction:column;justify-content:center;}
.vcol{display:flex;flex-direction:column;gap:16px;}
/* score and denominator share one baseline — as one figure, not two blocks */
.vscore{display:flex;align-items:baseline;gap:15px;margin-top:2px;}
.vs-n{font-family:var(--disp);font-weight:800;line-height:.78;letter-spacing:-0.04em;font-size:clamp(68px,8vw,120px);color:var(--lime);}
.vs-of{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.3vw,32px);letter-spacing:-0.02em;}
.vs-line{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,25px);line-height:1.24;letter-spacing:-0.02em;color:var(--paper);max-width:26ch;}
.verdict-grid .prose{max-width:none;}
@media(max-width:900px){.verdict-grid{grid-template-columns:1fr;gap:30px;}}

/* scorecard factor columns */
.gtable--score td.sc,.gtable--score th{text-align:center;}
.gtable--score td.sc{vertical-align:middle;}
.gtable--score td.term,.gtable--score th:first-child{text-align:left;}
/* Two kinds of number in this table, so they get two different SHAPES rather
   than two slightly different sizes (which just reads as inconsistent).
   The four factors are INPUTS: small, uniform circles.
   The overall score is the OUTPUT: a squared badge, ruled off from the inputs. */
.gtable--score .score{width:26px;height:26px;font-size:12.5px;border-radius:8px;}
.gtable--score .sc-total{border-left:1.5px solid rgba(26,23,18,.28);}
.gtable--score th.sc-total{white-space:nowrap;}
.gtable--score .score--lg{width:42px;height:42px;font-size:20px;border-radius:12px;box-shadow:3px 3px 0 rgba(26,23,18,.18);}

/* Eisenhower matrix — neutral quadrants (distinct from the value grid), Do First accented */
.jv-quad.ei .jv-cell{--c:var(--ink-soft);--on:#fff;background:var(--paper-2);}
.jv-quad.ei .jv-cell.do-first{--c:var(--acc-red);--on:var(--on-red);background:var(--tint-red);}
.jv-quad.ei .jv-qn{color:var(--ink);}
.jv-quad.ei .jv-cell.do-first .jv-qn{color:var(--ink);}
.jv-list.ei li{justify-content:space-between;align-items:center;}

/* scatter map (the plotted 2x2 plane that opens each section) */
.jv-scatter{border:var(--hair);border-radius:16px;background:var(--paper-2);padding:clamp(14px,2.2vw,28px);margin-top:24px;}
.jv-scatter svg{width:100%;height:auto;display:block;}

/* quadrant map */
.jv-caption{font-family:var(--sans);font-size:14.5px;color:var(--ink-soft);margin-top:14px;max-width:74ch;}
.jv-mapwrap{display:grid;grid-template-columns:24px 1fr;grid-template-rows:1fr 24px;gap:10px;margin-top:28px;}
.jv-yax{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.jv-quad{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.jv-xax{grid-column:2;grid-row:2;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.jv-cell{border:var(--hair);border-radius:14px;padding:16px 18px;background:var(--t,var(--paper-2));}
.jv-cell .jv-qn::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);border:1px solid rgba(26,23,18,.42);margin-right:8px;vertical-align:middle;}
.jv-qh{margin-bottom:10px;}
.jv-qn{display:block;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-0.01em;color:var(--ink);text-transform:capitalize;line-height:1;}
.jv-qd{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:5px;}
.jv-list{list-style:none;padding:0;margin:0;}
.jv-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;padding:6px 0;border-top:var(--hair);font-size:13.5px;line-height:1.35;}
.jv-list li:first-child{border-top:none;}
.jv-svc{flex:none;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper-3);border-radius:5px;padding:2px 7px;}
.jv-list li.jv-us{font-weight:700;color:var(--ink);}

/* sliding-scale scorecard */
.jv-scale{width:100%;border-collapse:separate;border-spacing:0;border:var(--line);table-layout:fixed;min-width:660px;}
.jv-scale col.c-nm{width:23%;} .jv-scale col.c-rail{width:20%;} .jv-scale col.c-word{width:10%;} .jv-scale col.c-net{width:17%;}
.jv-netcell .jv-chip{max-width:100%;}
.jv-scale th,.jv-scale td{text-align:left;vertical-align:middle;padding:10px 14px;}
.jv-scale thead th{position:sticky;top:70px;z-index:6;background:var(--paper-3);border-bottom:var(--line);vertical-align:bottom;padding-top:16px;padding-bottom:13px;box-shadow:0 9px 14px -10px rgba(26,23,18,.34);}
.jv-hlab{display:block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);}
.jv-sc{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;color:var(--ink-soft);}
.jv-sc--rail{width:66%;margin-top:8px;}
.jv-scale tbody tr:first-child td{padding-top:22px;}
.jv-scale tbody tr:nth-child(even){background:var(--paper-2);}
.jv-scale tr.jv-grp{background:var(--paper)!important;}
.jv-grp td{padding:18px 14px 6px;}
.jv-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--c);border:1px solid rgba(26,23,18,.42);vertical-align:middle;margin-right:9px;}
.jv-gn{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ink);text-transform:capitalize;}
.jv-gd{font-size:12.5px;color:var(--ink-soft);margin-left:8px;}
.jv-nm{font-size:13.5px;color:var(--ink);}
.jv-nm .jv-svc{margin-right:8px;}
.jv-nm .jv-rus{font-weight:700;}
.jv-bar{display:flex;align-items:center;gap:9px;}
.jv-track{position:relative;flex:1;min-width:64px;height:13px;background:var(--paper-3);border-radius:7px;}
.jv-word{flex:none;width:74px;font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}
.jv-chip{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:7px;white-space:nowrap;color:var(--on);background:var(--c);}

/* ===== INTENSITY SCALE (the sliding rows in the report) =================
   POSITION, NOT QUANTITY. These placements are informed judgement, not
   measured amounts, and the mark has to say so. A filled bar growing from
   the centre reads as an accumulating total — it promises precision the
   underlying call does not have. So: a quiet baseline with quarter ticks,
   a faint connector showing how far from neutral the call sits, and a dot
   at the value. Row to row, the eye tracks a line of dots against a fixed
   scale, which is exactly the comparison the table exists to support.

   Markup stays <span class="jv-rail"><span class="jv-tick"><span
   class="jv-fill" style="left/width"><span class="jv-thumb" style="left">
   so the ~160 rails in the report need no edits: .jv-fill is restyled from
   a filled bar into the connector.                                        */
.jv-scoresec{overflow:visible;}
.jv-railcell{vertical-align:middle;}
.jv-rail{position:relative;display:block;width:100%;height:16px;background:none;
  background-image:linear-gradient(rgba(26,23,18,.15),rgba(26,23,18,.15)),
                   linear-gradient(rgba(26,23,18,.15),rgba(26,23,18,.15)),
                   linear-gradient(rgba(26,23,18,.15),rgba(26,23,18,.15));
  background-size:100% 1.5px, 1.5px 6px, 1.5px 6px;
  background-position:0 50%, 25% 50%, 75% 50%;
  background-repeat:no-repeat;}
/* the neutral centre is the reference line, so it is the strongest tick */
.jv-tick{position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:rgba(26,23,18,.36);}
/* connector: distance from neutral, stated quietly */
.jv-fill{position:absolute;top:50%;height:2px;transform:translateY(-50%);border-radius:2px;background:var(--c);opacity:.6;}
/* the reading itself */
.jv-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:var(--c);border:1px solid rgba(26,23,18,.42);}
.jv-wordcell .jv-word{width:auto;display:inline;}

@media(max-width:820px){
  .jv-quad{grid-column:1;grid-template-columns:1fr;} .jv-yax{display:none;}
  .jv-mapwrap{grid-template-columns:1fr;} .jv-xax{grid-column:1;}
  .jv-ax-grid{grid-template-columns:1fr;}
  .jv-scoresec{overflow-x:auto;}
}