/* ============================================================
   THINKWITHAI · GETPREFERRED - design system v5 "Answer Panel"

   The brief: enterprise-grade, professional, elegant. The product is whether
   an AI assistant names your institute, so the interface borrows from the
   thing being sold - a product surface, not an editorial page.

   Deliberately NOT: cream canvas, display serif, hairline broadsheet rules,
   zero-radius. That system read as a magazine and never showed the product.

   Type    : IBM Plex Sans (interface + display), IBM Plex Mono (data, labels,
             and the machine voice inside the answer panel). Self-hosted.
   Colour  : white and cool grey surfaces, navy ink, the official ThinkWithAi
             blue #015BD9 as the action colour and purple #6A0DAD reserved
             strictly for AI surfaces, so purple always means "a machine said
             this".
   Form    : 10px radius, 1px cool borders, restrained two-step elevation.
   Signature: .aip, the AI answer panel - the hero is a demonstration of the
             product, not a description of it.
   ============================================================ */
@import url("/assets/css/fonts.css");

:root{
  --ff:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --container:1440px;
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --space:8px;
}

[data-theme="light"]{
  /* Palette: restrained. Two brand colours and neutrals, nothing else.
     Blue is the ONLY strong colour and it means "act here".
     Violet is reserved for AI surfaces and section accents, used sparingly.
     Status is neutral by design: a green tick and a red cross on the same card
     made the page look like a dashboard warning, not a piece of evidence. */
  --bg:#FFFFFF; --bg-sub:#F2F6FC; --bg-deep:#0B2545; --surface:#FFFFFF;
  --surface-2:#F7F9FC;
  --ink:#0F1B2D; --ink-2:#39445A; --muted:#68738A; --faint:#98A2B5;
  --border:#E3E9F2; --border-strong:#CBD5E4;
  --blue:#0A46C0; --blue-hover:#08379A; --blue-wash:#EEF3FD; --blue-soft:#C6D8F7;
  --purple:#6A0DAD; --purple-wash:#F5EEFC; --purple-soft:#DCC4F0;
  --green:#39445A; --green-wash:#EEF1F6;
  --red:#0F1B2D; --red-wash:#F7F9FC;
  --amber:#8A6A17;
  --shadow-sm:0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.04);
  --shadow-md:0 2px 4px rgba(15,27,45,.04), 0 8px 20px rgba(15,27,45,.07);
  --shadow-lg:0 4px 8px rgba(15,27,45,.05), 0 20px 48px rgba(15,27,45,.12);
  --navy-1:#123A6B; --navy-2:#0B2545;
  --logo-l:block; --logo-d:none;
}
[data-theme="dark"]{
  --bg:#0B1220; --bg-sub:#0F1A2C; --bg-deep:#060E1B; --surface:#132038;
  --surface-2:#17243D;
  --ink:#F1F5FB; --ink-2:#C0CBDD; --muted:#8895AC; --faint:#69768E;
  --border:#22314B; --border-strong:#324562;
  --blue:#78A6FF; --blue-hover:#9CBFFF; --blue-wash:#13203A; --blue-soft:#2A4370;
  --purple:#C79BF0; --purple-wash:#1E1733; --purple-soft:#4A2E66;
  --green:#C0CBDD; --green-wash:#1A2740;
  --red:#F1F5FB; --red-wash:#1A2740;
  --amber:#E0B24C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 4px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.4);
  --shadow-lg:0 4px 8px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.5);
  --navy-1:#0E2A4C; --navy-2:#060E1B;
  --logo-l:none; --logo-d:block;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--ff);font-size:16.5px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.006em;
  /* `clip` contains the off-canvas drawer without making body a scroll
     container. `hidden` would do the same but silently kills the sticky
     header, which is the bug that cost an earlier round. */
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--blue);color:#fff}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:clamp(20px,3vw,40px)}
.wrap-narrow{max-width:768px}
section{padding-block:clamp(56px,7vw,104px);position:relative}
.sec-tight{padding-block:clamp(40px,4.5vw,64px)}

/* A legal notice is a DOCUMENT, not a landing page. On the site's normal scale its eight section
   headings render at the same weight as a page title, so privacy and terms read as eight
   billboards stacked in a column and the reader cannot see the shape of the thing. These pages get
   a document scale instead: headings sized to lead a paragraph, generous line height on the body,
   and a stated update date given room of its own. Scoped to .legal-doc so nothing else moves. */
.legal-doc h1{font-size:clamp(28px,4vw,38px);margin-bottom:6px}
.legal-doc .legal-stamp{margin:0 0 34px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.legal-doc h2{font-size:17px;line-height:1.35;margin:30px 0 8px;letter-spacing:-.01em}
.legal-doc h2:first-of-type{margin-top:0}
.legal-doc p{font-size:15px;line-height:1.7;max-width:68ch;color:var(--ink-2)}
.legal-doc .sec-head{display:block}
.bg-2{background:var(--bg-sub);border-block:1px solid var(--border)}
.bg-3{background:var(--surface-2);border-block:1px solid var(--border)}
.dark{background:var(--bg-deep);color:#B6C2D6;position:relative;isolation:isolate}
.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(55% 70% at 8% 0%,   rgba(10,70,192,.30) 0%, transparent 68%),
    radial-gradient(55% 75% at 95% 100%, rgba(106,13,173,.26) 0%, transparent 70%);
}
[data-theme="dark"] .dark::before{display:none}
.dark h1,.dark h2,.dark h3,.dark h4{color:#FFFFFF}
.dark p,.dark li{color:#AEBACE}
.dark a{color:#8FB6FF}
.dark strong{color:#fff}
.dark .eyebrow{color:#8FB6FF}
.dark .muted,.dark .small.muted{color:#8A97AC}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--ff);color:var(--ink);margin:0 0 .5em;letter-spacing:-.025em}
h1{font-size:clamp(2.2rem,1.45rem + 2.7vw,3.5rem);line-height:1.06;font-weight:600}
h2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.45rem);line-height:1.14;font-weight:600}
h3{font-size:clamp(1.12rem,1.04rem + .35vw,1.3rem);line-height:1.35;font-weight:600;letter-spacing:-.018em}
h4{font-size:1rem;line-height:1.4;font-weight:600;letter-spacing:-.012em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.02rem,.97rem + .38vw,1.19rem);line-height:1.62;color:var(--ink-2)}
.small{font-size:.875rem}
.muted{color:var(--muted)}
.balance{text-wrap:balance}
strong{font-weight:600;color:var(--ink)}
ul,ol{padding-left:1.15em;margin:0 0 1.1em}
li{margin-bottom:.45em}
.num,td{font-variant-numeric:tabular-nums}
code,kbd{font-family:var(--ff-mono);font-size:.9em;background:var(--bg-sub);
  border:1px solid var(--border);border-radius:var(--r-xs);padding:1px 5px}

/* the eyebrow is a mono system label, not a decorative rule */
.eyebrow{
  display:block;margin:0 0 14px;font-family:var(--ff-mono);font-size:11.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.stuck{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.hdr{display:flex;align-items:center;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:26px;width:auto}
.brand .logo-l{display:var(--logo-l)}
.brand .logo-d{display:var(--logo-d)}
.nav{display:none;margin-left:auto;gap:4px;align-items:center}
.nav a{
  font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 10px;
  border-radius:var(--r-sm);white-space:nowrap;transition:.15s var(--ease);
}
.nav a:hover{color:var(--ink);background:var(--bg-sub);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);background:var(--bg-sub);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr .btn-primary{display:none}
@media(min-width:1280px){
  .nav{display:flex}
  .hdr .btn-primary{display:inline-flex}
  .hamburger{display:none}
  /* Only once the nav is really on screen. `.nav` stays in the DOM at every width and merely
     becomes display:none, so this adjacent-sibling rule used to match on mobile too - and being
     more specific than `.nav-right`, its 16px beat the `margin-left:auto` that does the pushing.
     The logo, the theme toggle and the menu button therefore huddled together on the left with
     half the phone screen empty beside them. Scoping it to the width where the nav is visible is
     the fix; a plain override would have left the same trap for the next person. */
  .nav + .nav-right{margin-left:16px}
}
.toggle{
  width:36px;height:36px;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;flex:0 0 auto;position:relative;color:var(--ink-2);
  transition:.15s var(--ease);
}
.toggle:hover{border-color:var(--border-strong);color:var(--ink)}
.toggle::after{content:"\25D1";position:absolute;inset:0;display:grid;place-items:center;font-size:15px}
.toggle span{position:absolute;left:-9999px}
.hamburger{
  /* No box. The menu button sits beside the theme toggle, which is already borderless, and two
     controls in the corner drew two competing rectangles around themselves. The tap target stays
     38x36 - the border was removed, not the hit area. */
  display:grid;place-items:center;width:38px;height:36px;border:1px solid transparent;
  background:transparent;border-radius:var(--r-sm);color:var(--ink);cursor:pointer;flex:0 0 auto;
}
.hamburger:hover{background:var(--bg-sub)}
.hamburger svg{width:18px;height:18px}

.mm-overlay{position:fixed;inset:0;background:rgba(11,18,32,.42);z-index:69;opacity:0;
  backdrop-filter:blur(2px);pointer-events:none;transition:opacity .25s var(--ease)}
.mm-overlay.open{opacity:1;pointer-events:auto}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);background:var(--bg);
  z-index:70;transform:translateX(106%);transition:transform .3s var(--ease);
  padding:62px 20px 24px;display:flex;flex-direction:column;overflow-y:auto;
  border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
}
.mobile-menu.open{transform:translateX(0)}
.mm-close{position:absolute;top:14px;right:14px;width:38px;height:36px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r-sm);color:var(--ink);cursor:pointer}
.mobile-menu a{
  padding:13px 12px;font-size:1rem;font-weight:500;color:var(--ink);border-radius:var(--r-sm);
  display:block;
}
.mobile-menu a:hover{background:var(--bg-sub);text-decoration:none}
.mobile-menu .btn{margin-top:18px;width:100%}
.mobile-menu a.btn{
  color:#fff;background:var(--blue);padding:13px 20px;font-weight:600;
}
.mobile-menu a.btn:hover{background:var(--blue-hover);color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff);font-weight:600;font-size:14.5px;letter-spacing:-.008em;
  padding:11px 18px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  transition:.16s var(--ease);white-space:nowrap;text-align:center;line-height:1.3;
}
@media(max-width:620px){.btn{white-space:normal;max-width:100%}}
.btn:hover{text-decoration:none}
.btn-primary{
  background:linear-gradient(100deg,var(--blue) 0%,#3A2FB8 46%,var(--purple) 100%);
  background:linear-gradient(100deg in oklab,var(--blue) 0%,var(--purple) 100%);
  /* Size the gradient to the BORDER box, not the padding box.
     .btn carries a 1px border; with the default background-origin of
     padding-box the gradient is painted two pixels narrower than the area it is
     clipped to, and the remaining border pixels are filled by repeating it. The
     result is a one pixel strip of the gradient's END colour down the left edge
     and its START colour down the right: measured at (137,77,215) at x=0 while
     the fill there should be blue. That strip is the "weird line", and no amount
     of smoothing the gradient itself would ever have removed it. */
  background-origin:border-box;background-repeat:no-repeat;
  color:#fff;border-color:transparent;box-shadow:var(--shadow-sm);
  transition:filter .18s ease,box-shadow .18s ease,transform .18s ease}
.btn-primary:hover{filter:saturate(1.08) brightness(.93);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-md);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.btn-primary{transition:none}}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--bg-sub);border-color:var(--muted);color:var(--ink)}
.dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.dark .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff}
.btn-wa{background:#128C7E;border-color:#128C7E;color:#fff}
.btn-wa:hover{background:#0E7167;border-color:#0E7167;color:#fff}
.btn-lg{padding:14px 24px;font-size:15.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}

/* ---------- hero ----------
   Full-bleed photograph under a navy gradient. The dark band is what gives an
   enterprise page its gravitas: the subject fills the frame, the headline sits
   in white on top of it, and the white panel floating over it reads as proof.
   A light hero with a small floating image reads as a startup dashboard, which
   is what the previous version did wrong. */
.hero{
  padding-block:clamp(56px,6.5vw,96px);position:relative;overflow:hidden;
  background:var(--navy-2);color:#fff;isolation:isolate;
}
/* the photograph */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--hero-img,none);background-size:cover;
  background-position:center right;
}
/* the gradient that makes the type legible and carries the brand */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg, var(--navy-2) 0%, rgba(6,29,55,.94) 38%, rgba(6,29,55,.62) 66%, rgba(6,29,55,.42) 100%),
    radial-gradient(90% 80% at 4% 0%, rgba(1,91,217,.34) 0%, transparent 55%),
    radial-gradient(70% 70% at 96% 100%, rgba(106,13,173,.28) 0%, transparent 60%);
}
.hero h1{max-width:18ch;margin-bottom:.4em;color:#fff;font-weight:700;
  font-size:clamp(2.3rem,1.35rem + 3.2vw,3.7rem);letter-spacing:-.03em;line-height:1.04}
.hero .lead{max-width:52ch;color:rgba(255,255,255,.84)}
.hero .eyebrow{color:#7FB2FF}
.hero-grid{display:grid;gap:44px;align-items:center}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:1.04fr .96fr;gap:60px}
  /* a hero with no floating panel runs as one measured column, never a lone
     image marooned beside dead space */
  .hero-grid.solo{grid-template-columns:minmax(0,760px)}
}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.hero-media{
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);
}
.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-note{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);backdrop-filter:blur(6px);
  padding:5px 14px 5px 11px;font-size:.8rem;color:rgba(255,255,255,.9);margin-bottom:18px;
  font-weight:500;
}
.dot{width:6px;height:6px;border-radius:50%;background:#3BD98B;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(59,217,139,.22)}

/* ============================================================
   SIGNATURE - the AI answer panel.
   The whole product is whether a machine names you. So the hero is that
   machine's answer, with the reader's institute conspicuously absent.
   ============================================================ */
.aip{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;font-size:.94rem;
}
.aip-q{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--border);background:var(--surface-2);
}
.aip-q svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto}
.aip-q b{
  font-family:var(--ff-mono);font-size:.84rem;font-weight:400;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
}
/* the caret only exists while the query is typing itself in */
.aip-q b::after{
  content:"";display:inline-block;width:1.5px;height:1em;background:var(--blue);
  margin-left:2px;vertical-align:-.14em;animation:aip-caret 1s steps(2) infinite;
}
.aip.done .aip-q b::after{display:none}
@keyframes aip-caret{0%,50%{opacity:1}51%,100%{opacity:0}}

.aip-head{
  display:flex;align-items:center;gap:9px;padding:16px 18px 0;
}
.aip-head .mark{width:9px;height:9px;background:var(--purple);flex:0 0 auto;
  transform:rotate(45deg);border-radius:1px}
.aip-head span{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);
}
.aip-head em{
  margin-left:auto;font-style:normal;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
}
.aip-head em::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--green);
  animation:aip-pulse 2s var(--ease) infinite;
}
@keyframes aip-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--green-wash)}
  50%{opacity:.55;box-shadow:0 0 0 4px transparent}}

.aip-body{padding:12px 18px 8px;color:var(--ink-2);line-height:1.6}
.aip-body p{margin:0 0 12px}
.aip-list{list-style:none;padding:0;margin:0}
.aip-list li{
  display:flex;align-items:center;gap:11px;padding:10px 0;margin:0;
  border-top:1px solid var(--border);
}
.aip-list li:first-child{border-top:0}
.aip-rank{
  font-family:var(--ff-mono);font-size:.78rem;color:var(--faint);flex:0 0 auto;width:14px;
}
.aip-name{flex:1;color:var(--ink);font-weight:500}
/* competitors are redacted: naming real schools would be fabrication */
.aip-name .redact{
  display:inline-block;height:.72em;width:var(--w,92px);border-radius:3px;
  background:repeating-linear-gradient(-45deg,var(--border) 0 5px,var(--surface-2) 5px 10px);
  vertical-align:-.02em;margin-right:7px;
}
.aip-flag{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
}
.aip-flag.cited{color:var(--green);background:var(--green-wash)}
.aip-flag.absent{color:var(--red);background:var(--red-wash)}
.aip-list li.you{background:var(--red-wash);margin-inline:-18px;padding-inline:18px;
  border-top-color:transparent}
.aip-list li.you .aip-name{color:var(--red);font-weight:600}
.aip-foot{
  padding:13px 18px;border-top:1px solid var(--border);background:var(--surface-2);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
/* rows arrive one at a time so the absence lands last */
.aip-list li{opacity:0;transform:translateY(4px)}
.aip.done .aip-list li{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.aip.done .aip-list li:nth-child(1){transition-delay:.05s}
.aip.done .aip-list li:nth-child(2){transition-delay:.25s}
.aip.done .aip-list li:nth-child(3){transition-delay:.5s}

/* ---------- trust row ---------- */
.trustbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--border);
}
.trustbar span{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;
}
/* a bordered square here read as an empty tickbox, which implied "not done".
   A small solid rule is a mark, not a control. */
.trustbar span::before{
  content:"";width:10px;height:2px;flex:0 0 auto;border-radius:1px;background:var(--blue);
}
.dark .trustbar{border-color:rgba(255,255,255,.14)}
.dark .trustbar span{color:#93A0B5}
/* on the navy hero the trust strip is the credential band under the fold line */
.hero .trustbar{border-top-color:rgba(255,255,255,.18);margin-top:34px;padding-top:24px}
.hero .trustbar span{color:rgba(255,255,255,.72)}
.hero .trustbar span::before{background:#7FB2FF}

/* ---------- section headers ---------- */
.sec-head{margin-bottom:40px;max-width:64ch}
.sec-head h2,.sec-head h1{margin-bottom:.35em}
.sec-head .lead{margin-bottom:0}
.sec-head-center{margin-inline:auto;text-align:center;max-width:60ch}
.sec-head-split{display:grid;gap:18px;max-width:none}
@media(min-width:960px){
  .sec-head-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:end}
  .sec-head-split > div:first-child{max-width:32ch}
  .sec-head-split h2{margin-bottom:0}
}
/* nested inside a grid column the split header must collapse, or the body text
   is crushed into a ribbon (defect found in the v4 section audit) */
.grid .sec-head-split{grid-template-columns:1fr;gap:16px}
.grid .sec-head-split > div:first-child{max-width:none}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2,.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:730px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:990px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;transition:.18s var(--ease);
}
.card h3{margin-bottom:.5em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card p,.card li{font-size:.94rem}
.card-num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  font-family:var(--ff-mono);font-size:.78rem;font-weight:500;color:var(--blue);
  background:var(--blue-wash);border:1px solid var(--blue-soft);border-radius:var(--r-sm);
  margin-bottom:14px;
}
.card-link{display:block;color:inherit}
.card-link:hover{text-decoration:none;border-color:var(--border-strong);
  box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-link:hover h3{color:var(--blue)}
.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}

/* ---------- pillars ---------- */
.pillars{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{
  padding:22px;display:block;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);transition:.18s var(--ease);
}
.pillar:hover{text-decoration:none;border-color:var(--blue-soft);box-shadow:var(--shadow-md);
  transform:translateY(-2px)}
.pillar .tag{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  color:var(--blue);text-transform:uppercase;background:var(--blue-wash);
  border:1px solid var(--blue-soft);border-radius:var(--r-xs);padding:3px 7px;
  display:inline-block;margin-bottom:14px;
}
.pillar h3{font-size:1.06rem;margin:0 0 8px}
.pillar p{font-size:.89rem;margin:0;color:var(--muted)}
.pillar[aria-current="page"]{border-color:var(--blue);background:var(--blue-wash)}

/* ---------- stats ---------- */
.stats{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:920px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{
  padding:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);
}
.stat b{
  display:block;font-size:clamp(2rem,1.5rem + 1.6vw,2.7rem);line-height:1.05;
  color:var(--ink);font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.stat span{font-size:.86rem;color:var(--muted);display:block;margin-top:10px;line-height:1.5}
.dark .stat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.dark .stat b{color:#fff}
.dark .stat span{color:#93A0B5}

/* ---------- answer block (AEO) ---------- */
.answer{
  border:1px solid var(--purple-soft);border-left:3px solid var(--purple);
  border-radius:var(--r);background:var(--purple-wash);
  padding:20px 22px;margin:0 0 30px;
}
.answer p{margin:0;font-size:1.06rem;line-height:1.6;color:var(--ink)}
.answer .answer-label{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);display:block;margin-bottom:10px;
}
.answer-pair{display:grid;gap:26px;align-items:start}
@media(min-width:900px){.answer-pair{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:44px}}
.answer-pair .answer{margin-bottom:0}
.sidepanel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.sidepanel h4{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500}
.sidepanel ul{list-style:none;padding:0;margin:0}
.sidepanel li{font-size:.9rem;padding:0 0 10px 20px;position:relative;color:var(--ink-2)}
.sidepanel li:last-child{padding-bottom:0}
.sidepanel li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:2px;background:var(--blue-wash);border:1px solid var(--blue-soft)}

/* ---------- tables: enterprise data, not a newspaper grid ---------- */
.table-scroll{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:26px;background:var(--surface);
}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
caption{caption-side:bottom;padding:12px 18px;text-align:left;color:var(--muted);
  font-size:.82rem;border-top:1px solid var(--border)}
th,td{padding:13px 18px;text-align:left;vertical-align:top}
thead th{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{border-top:1px solid var(--border);color:var(--ink-2)}
tbody tr:hover{background:var(--surface-2)}
tbody td:first-child{color:var(--ink);font-weight:500}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.faq details{border-top:1px solid var(--border)}
.faq details:first-child{border-top:0}
.faq summary{
  cursor:pointer;padding:18px 20px;list-style:none;display:flex;justify-content:space-between;
  gap:20px;align-items:center;color:var(--ink);font-size:1rem;font-weight:500;line-height:1.45;
  transition:.15s var(--ease);
}
.faq summary:hover{background:var(--surface-2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.faq details[open] summary{background:var(--surface-2)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq .faq-body{padding:2px 20px 20px;max-width:74ch;color:var(--ink-2)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- steps: a real sequence, so numbering carries meaning ---------- */
.steps{counter-reset:s;display:grid;gap:16px}
@media(min-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{
  position:relative;padding:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);
}
.dark .step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 8px;
  font-family:var(--ff-mono);font-size:.74rem;font-weight:500;color:var(--blue);
  background:var(--blue-wash);border:1px solid var(--blue-soft);border-radius:var(--r-xs);
  margin-bottom:14px;
}
.dark .step::before{background:rgba(111,165,255,.12);border-color:rgba(111,165,255,.3)}
.step h3{margin-bottom:.45em;font-size:1.08rem}
.step p{margin:0;font-size:.93rem}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--bg-deep);color:#fff;padding:clamp(40px,5vw,68px) clamp(24px,4vw,56px);
  text-align:center;border-radius:var(--r-lg);position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 12% 0%,  rgba(10,70,192,.42) 0%, transparent 70%),
    radial-gradient(60% 85% at 92% 108%, rgba(106,13,173,.40) 0%, transparent 72%);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-band p{color:#AEBACE;max-width:56ch;margin-inline:auto}
.cta-band .btn-row{justify-content:center}
.cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn-ghost:first-child{background:#fff;color:var(--bg-deep);border-color:#fff}
.cta-band .btn-ghost:first-child:hover{background:linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);border-color:transparent;color:#fff}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:var(--muted);padding-top:18px;display:flex;flex-wrap:wrap;
  align-items:center;gap:2px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{margin-inline:8px;opacity:.5}
/* The updated date sits beside the trail, not inside it. It is a separate fact
   about the page, so it gets its own line on narrow screens rather than
   wrapping into the crumbs and reading as a stray extra step. */
.crumb-date{display:block;font-size:.78rem;color:var(--muted);opacity:.75;
  padding-top:6px;letter-spacing:.01em}
@media(min-width:700px){
  /* inline-flex so the trail no longer claims the full row and the date can sit
     beside it, separated by a rule rather than by a slash that implied hierarchy */
  .crumbs{display:inline-flex}
  .crumb-date{display:inline-block;padding-top:18px;margin-left:12px;
    padding-left:12px;border-left:1px solid var(--line)}
}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
label{display:block;font-weight:500;font-size:.86rem;margin-bottom:6px;color:var(--ink)}
input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font:400 .97rem var(--ff);color:var(--ink);background:var(--surface);transition:.15s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-wash)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--muted)}
.checkline input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--blue)}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-md)}
.hero-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--shadow-lg)}
.hero-form h2{font-size:1.4rem;margin-bottom:.3em}
.hero-form .field{margin-bottom:13px}
.hero-form .btn{width:100%;margin-top:6px}

/* ---------- the score tool ---------- */
.score-ring{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.score-num{font-size:3.6rem;line-height:1;color:var(--ink);font-weight:600;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--bg-sub);border:1px solid var(--border);border-radius:var(--r-pill);
  overflow:hidden;margin:6px 0 14px}
.bar i{display:block;height:100%;background:var(--blue);border-radius:var(--r-pill);
  transition:width .5s var(--ease)}
.hidden{display:none}

/* ---------- pricing ---------- */
.plan{display:flex;flex-direction:column;height:100%}
.plan .price{font-size:2.2rem;line-height:1.1;color:var(--ink);font-weight:600;
  margin:10px 0 4px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.plan .price small{font-size:.82rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:18px 0}
.plan li{padding-left:24px;position:relative;font-size:.91rem;margin-bottom:.6em}
.plan li::before{
  content:"";position:absolute;left:0;top:.42em;width:14px;height:8px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.plan .btn{margin-top:auto;width:100%}
.featured{background:var(--bg-deep);border-color:var(--bg-deep);color:#AEBACE;position:relative}
.featured h3,.featured .price{color:#fff}
.featured .price small,.featured .small,.featured .muted{color:#93A0B5}
.featured li{color:#C2CBDA}
.featured li::before{border-color:#6FA5FF}
.featured .btn-primary{background:#fff;color:var(--bg-deep);border-color:#fff}
.featured .btn-primary:hover{background:linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);border-color:transparent;color:#fff}
.badge{
  display:inline-block;margin-bottom:10px;background:var(--blue);color:#fff;
  font-family:var(--ff-mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-xs);
}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-sub);color:var(--muted);padding:56px 0 26px;font-size:.9rem;
  border-top:1px solid var(--border)}
.site-footer h4{color:var(--ink);font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px;font-weight:500}
.site-footer a{color:var(--ink-2);display:block;padding:5px 0}
.site-footer a:hover{color:var(--blue)}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr 1fr}
@media(min-width:920px){.foot-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:28px}}
@media(min-width:920px) and (max-width:1180px){.foot-grid{grid-template-columns:1.4fr repeat(2,1fr)}}
.foot-logo{height:26px;width:auto;margin-bottom:14px}
.foot-logo.logo-l{display:var(--logo-l)}
.foot-logo.logo-d{display:var(--logo-d)}
.foot-tm{font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot-bottom{border-top:1px solid var(--border);margin-top:42px;padding-top:20px;
  font-size:.8rem;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* ---------- team ---------- */
.team{display:grid;gap:20px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:720px){.team{grid-template-columns:repeat(3,1fr)}}
.member{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.member img{width:72px;height:72px;object-fit:cover;margin-bottom:16px;border-radius:var(--r-pill);
  border:1px solid var(--border)}
.member h3{margin-bottom:.1em;font-size:1.12rem}
.member .role{font-family:var(--ff-mono);color:var(--blue);font-weight:500;font-size:.72rem;
  margin-bottom:1em;letter-spacing:.11em;text-transform:uppercase}
.member p{font-size:.9rem;color:var(--ink-2);margin-bottom:0}

/* ---------- location / vertical / comparison furniture ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.chip{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-pill);padding:6px 12px;color:var(--ink-2);white-space:nowrap;
}
a.chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-wash);
  text-decoration:none}
.dir{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.dir{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dir{grid-template-columns:repeat(3,1fr)}}
.dir a{
  display:block;padding:16px 18px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);transition:.16s var(--ease);
}
.dir a:hover{border-color:var(--blue-soft);box-shadow:var(--shadow-md);
  transform:translateY(-2px);text-decoration:none}
.dir b{display:block;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:3px;
  letter-spacing:-.018em}
.dir a:hover b{color:var(--blue)}
.dir small{color:var(--muted);font-size:.82rem}
.concession{
  border:1px solid var(--amber);background:var(--surface);border-left:3px solid var(--amber);
  border-radius:var(--r);padding:22px 24px;margin:30px 0;
}
.concession h3{margin-bottom:.4em}
.concession p:last-child{margin-bottom:0}

/* ---------- misc ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tag-row span{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
  border-radius:var(--r-xs);padding:4px 8px}
.note{border:1px solid var(--border);border-left:3px solid var(--blue);background:var(--surface);
  border-radius:var(--r);padding:16px 18px;font-size:.93rem;color:var(--ink-2)}
.note p:last-child{margin-bottom:0}
.figure{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-md)}
.figure img{width:100%;object-fit:cover}
.figcaption{font-size:.82rem;color:var(--muted);padding:13px 18px;
  border-top:1px solid var(--border);line-height:1.5;background:var(--surface-2)}
/* Skip to content. Off screen until focused, then the first thing a keyboard
   user lands on. This rule existed before the markup did, so nothing ever
   rendered it and the missing colour went unnoticed: on a white panel the text
   inherited white and the link focused invisibly. */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:14px;top:14px;z-index:400;padding:11px 18px;
  background:var(--blue);color:#fff;font-weight:600;text-decoration:none;
  border-radius:var(--r-sm);box-shadow:var(--shadow-md)}

/* ---------- persistent action bar (small screens only) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:10px;padding:10px 14px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  transform:translateY(102%);transition:transform .28s var(--ease);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta a{
  flex:1;padding:12px 10px;text-align:center;font-size:14px;font-weight:600;
  color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);
}
.sticky-cta a:last-child{background:var(--blue);color:#fff;border-color:var(--blue)}
.sticky-cta a:hover{text-decoration:none}
@media(min-width:1280px){.sticky-cta{display:none}}

/* Must stay last. `.hamburger` sets `display:grid` after the header media
   query, so the desktop hide loses on source order and the button reappears at
   1440px. This is the same defect the v4 system had; restating it here is the
   fix, and moving this block breaks it again. */
@media(min-width:1280px){.hamburger{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
  .aip-list li{opacity:1 !important;transform:none !important}
  .aip-q b::after{display:none}
  .btn-primary:hover,.card-link:hover,.pillar:hover,.dir a:hover{transform:none}
}

/* ============================================================
   v6 - section system.
   The reference bar was a clean enterprise consulting site. What actually
   creates that read is not colour, it is RHYTHM: every section opens the same
   way (mono eyebrow, heading, a short accent rule), bands alternate white and
   a faint blue tint, and the page is bookended by dark blocks. Below is that
   rhythm, built once so no page can drift from it.
   ============================================================ */

/* the accent rule under a section heading - the signature of the section system */
.sec-head h2::after,
.sec-head h1::after{
  /* Both brand colours, left to right. It was a flat purple bar and the only
     place the two-colour identity from the wordmark never appeared. Wider and
     thicker so it reads as a deliberate mark rather than a stray underline. */
  content:"";display:block;width:72px;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--blue) 0%,#3A2FB8 46%,var(--purple) 100%);
  background:linear-gradient(90deg in oklab,var(--blue) 0%,var(--purple) 100%);
  margin-top:18px;
}
.sec-head-center h2::after,.sec-head-center h1::after{margin-inline:auto}
.sec-head-split h2::after{margin-top:16px}
.dark .sec-head h2::after,.hero h1::after{background:linear-gradient(90deg,#5490F2 0%,#B98BE8 100%)}
.hero h1::after{display:none}

/* a centred opener, used where a section introduces a whole area of the site */
.intro{max-width:640px;margin-inline:auto;text-align:center}
.intro .btn-row{justify-content:center}

/* cards that lead with a visual, the way an enterprise product grid does */
.card-visual{
  display:block;aspect-ratio:16/9;object-fit:cover;width:100%;
  border-radius:var(--r-sm);margin-bottom:18px;border:1px solid var(--border);
}
.card-chip{
  position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);
  font-family:var(--ff-mono);font-size:10px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding:4px 9px;border-radius:var(--r-xs);
}
.card{position:relative}

/* checklist: outcomes, never a sequence */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media(min-width:820px){.checklist{grid-template-columns:repeat(2,1fr);gap:16px 40px}}
.checklist li{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:.97rem;
  color:var(--ink-2)}
.checklist svg{
  width:20px;height:20px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--blue);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  background:var(--blue-wash);border-radius:50%;padding:2px;
}
.dark .checklist li{color:#C0CBDD}
.dark .checklist svg{stroke:#78A6FF;background:rgba(120,166,255,.12)}

/* the AI panel status chips are neutral: a green tick beside a red cross made
   the hero read as an error state rather than as evidence */
.aip-flag.cited{color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.aip-flag.absent{color:var(--ink);background:transparent;border:1px dashed var(--border-strong)}
.aip-list li.you{background:var(--surface-2)}
.aip-list li.you .aip-name{color:var(--ink);font-weight:600}

/* dark footer, so the page is bookended by the same dark block as the hero */
.site-footer{background:var(--bg-deep);color:rgba(255,255,255,.66);border-top:0}
.site-footer h4{color:#fff}
.site-footer a{color:rgba(255,255,255,.82)}
.site-footer a:hover{color:#fff}
.site-footer p{color:rgba(255,255,255,.66)}
.foot-tm{color:rgba(255,255,255,.5)}
.foot-bottom{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.site-footer .foot-logo.logo-l{display:none}
.site-footer .foot-logo.logo-d{display:block}

/* the closing band sits directly above the dark footer, so it must not be a
   second dark slab: it becomes a light section holding a dark card */
.sec-tight:has(.cta-band){background:var(--bg-sub)}

/* ============================================================
   v7 - flatten the callouts, full-width header, sun/moon toggle,
   and fix every blue-on-blue token that went invisible on dark bands.
   ============================================================ */

/* ---- 1. NO TINTED ROUNDED CALLOUT CARDS, anywhere.
   The lavender "direct answer" panel read as a decorative box rather than as
   the page's most important sentence. These are now typographic: a rule, a
   label, and the words. No fill, no radius, no card. ---- */
/* The answer block had a full-width 2px black rule across the top. Sitting
   just under the section's own short accent rule it read as a stray line
   through the page. The label and the larger type are enough to mark it. */
.answer{
  background:transparent;border:0;border-radius:0;
  padding:0;margin:0 0 30px;
}
.answer p{font-size:1.18rem;line-height:1.55;color:var(--ink)}
.answer .answer-label{color:var(--muted)}

.dark .answer p{color:#fff}

.note{
  background:transparent;border:0;border-left:2px solid var(--border-strong);
  border-radius:0;padding:2px 0 2px 18px;
}
.dark .note{border-left-color:rgba(255,255,255,.28)}

/* The heavy black top rule did not belong to this system: everywhere else a
   boundary is a 1px cool border or a short accent bar. The concession keeps a
   left accent instead, in the amber it already used, so it still reads as a
   deliberate aside rather than body copy. */
.concession{
  background:transparent;border:0;border-left:3px solid var(--amber);
  border-radius:0;padding:2px 0 2px 20px;margin:30px 0;
}

.sidepanel{
  background:transparent;border:0;border-top:1px solid var(--border);
  border-radius:0;padding:18px 0 0;
}

/* ---- 2. the header runs the full width of the viewport ---- */
.site-header .wrap{max-width:none;padding-inline:clamp(20px,3vw,40px)}

/* ---- 3. sun and moon, swapped by theme ---- */
.toggle{display:grid;place-items:center;border-color:transparent;background:transparent}
.toggle:hover{background:var(--bg-sub);border-color:var(--border)}
.toggle::after{content:none}
.toggle svg{width:18px;height:18px}
.toggle .ico-moon{display:none}
[data-theme="dark"] .toggle .ico-sun{display:none}
[data-theme="dark"] .toggle .ico-moon{display:block}

/* ---- 4. the hero carries no photograph. It sat behind the type and read as
   noise. The dark band plus the answer panel is the whole composition. ---- */
.hero::before{content:none}
.hero::after{
  background:
    linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 62%),
    radial-gradient(70% 60% at 88% 6%, rgba(10,70,192,.42) 0%, transparent 62%);
}

/* ---- 5. DARK-BAND CONTRAST.
   Every one of these used `color:var(--blue)` over `var(--blue-wash)`. On a
   light section that is fine; inside `.dark` the wash was overridden to a
   translucent dark and the text colour was not, so the numerals vanished.
   Fixing the whole class here rather than the one card it was spotted on. ---- */
.dark .step::before,
.dark .card-num,
.dark .pillar .tag{
  color:#A9C8FF;background:rgba(169,200,255,.14);border-color:rgba(169,200,255,.32);
}
.dark .sidepanel li::before,
.dark .trustbar span::before{background:#A9C8FF;border-color:#A9C8FF}

/* the action colour is tuned for white. On navy it read as faded, so the dark
   bands get a brighter step of the same blue. */
.dark .btn-primary,
[data-theme="dark"] .btn-primary{
  background:linear-gradient(100deg,#2F6FE4 0%,#5E5BDE 46%,#8B4BD6 100%);
  background:linear-gradient(100deg in oklab,#2F6FE4 0%,#8B4BD6 100%);
  background-origin:border-box;background-repeat:no-repeat;
  border-color:transparent;color:#fff}
.dark .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover{filter:saturate(1.1) brightness(1.12);
  border-color:transparent;color:#fff}
.dark .checklist svg{stroke:#A9C8FF;background:rgba(169,200,255,.14)}
.dark .sec-head h2::after{background:linear-gradient(90deg,#7FB0E6 0%,#C6A0EE 100%)}

/* the breadcrumb rides inside the hero, so it needs the dark treatment and a
   little air beneath it before the eyebrow */
.hero .crumbs{padding-top:0;margin-bottom:26px;color:rgba(255,255,255,.6)}
.hero .crumbs a{color:rgba(255,255,255,.6)}
.hero .crumbs a:hover{color:#fff}
.hero .crumbs span{color:rgba(255,255,255,.35)}

/* ---- the split section header was a structural blunder ----
   `max-width:32ch` on the heading column forced short headings to wrap into a
   narrow stack while a wide empty gap sat beside them. The heading now fills
   its own column and the two columns are balanced. */
@media(min-width:960px){
  .sec-head-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}
  .sec-head-split > div:first-child{max-width:none}
}

/* ---- the score tool ----
   Was a flat list of fifteen tick boxes with the result hidden until submit.
   Now: grouped questions on the left, a score that moves as you tick on the
   right, so the tool explains itself while it is being used. */
.tool-grid{display:grid;gap:32px;align-items:start}
@media(min-width:1000px){.tool-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:56px}}
.qgroup{border:0;padding:0;margin:0 0 28px}
.qgroup legend{
  padding:0;font-size:1.12rem;font-weight:600;color:var(--ink);letter-spacing:-.018em;
  margin-bottom:4px;
}
.qgroup > .small{margin-bottom:14px}
.q{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--border)}
.q input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--blue)}
.q label{margin:0;font-weight:400;font-size:.95rem;color:var(--ink-2);cursor:pointer;line-height:1.5}
.q:hover label{color:var(--ink)}
.tool-score{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-md);
}
@media(min-width:1000px){.tool-score{position:sticky;top:96px}}
.tool-score .score-ring{margin-bottom:12px}
.tool-verdict{font-weight:500;color:var(--ink);margin-top:14px;font-size:.96rem}
.tool-score .btn-row{margin-top:18px}
.tool-score .btn{width:100%}

/* the query was clipped mid-word when it ran past the box. It wraps now, and
   the builder also falls back to a shorter phrasing past a sensible length. */
.aip-q{align-items:flex-start}
.aip-q svg{margin-top:3px}
.aip-q b{white-space:normal;overflow:visible;line-height:1.45;display:block}

/* ---- the hero is light again, and the photograph is the subject ----
   It was briefly a dark band with the photo behind the type, which read as
   noise. The image now sits in the frame at full strength, and on the home
   page the AI answer panel floats over its lower edge. */
.hero{background:var(--bg-sub);color:var(--ink-2)}
.hero::after{
  background:radial-gradient(60% 55% at 92% 8%, rgba(10,70,192,.10) 0%, transparent 62%);
}
.hero h1{color:var(--ink)}
.hero .lead{color:var(--ink-2)}
.hero .eyebrow{color:var(--blue)}
.hero .crumbs,.hero .crumbs a{color:var(--muted)}
.hero .crumbs a:hover{color:var(--blue)}
.hero .crumbs span{color:var(--faint)}
.hero .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.hero .btn-ghost:hover{background:var(--bg);border-color:var(--muted);color:var(--ink)}
.hero-note{background:var(--surface);border-color:var(--border);color:var(--ink-2);
  box-shadow:var(--shadow-sm)}
.hero .trustbar{border-top-color:var(--border)}
.hero .trustbar span{color:var(--muted)}
.hero .trustbar span::before{background:var(--blue)}

.hero-media{position:relative;border:0;background:transparent;box-shadow:none;
  display:flex;flex-direction:column;align-items:stretch}
.hero-media > img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:0 6px 18px rgba(15,27,45,.08);border:1px solid var(--border)}
/* The panel used to overlap the photograph by nearly its whole height, which
   hid the image and left a stepped shape that read as a broken layout. It now
   sits under the image with a small deliberate overlap on the left edge. */
.hero-media .aip{position:relative;z-index:2;width:100%;margin:-40px 0 0;
  box-shadow:0 -1px 0 var(--border), 0 18px 40px rgba(15,27,45,.10)}
@media(max-width:999px){.hero-media .aip{margin:-28px 0 0}}

/* ---- "how do I check this?" hint on each score question ----
   Owners cannot honestly answer "does your site open quickly" without being
   told how to test it. Native details/summary so it works on a phone without
   a hover state and without JavaScript. */
.qtip{flex:0 0 auto;margin-left:auto;position:relative}
.qtip summary{
  list-style:none;cursor:pointer;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:600;
  color:var(--muted);background:var(--bg-sub);border:1px solid var(--border);
}
.qtip summary::-webkit-details-marker{display:none}
.qtip summary:hover{color:var(--blue);border-color:var(--blue-soft);background:var(--blue-wash)}
.qtip[open] summary{color:#fff;background:var(--blue);border-color:var(--blue)}
.qtip p{
  position:absolute;right:0;top:26px;z-index:5;width:min(300px,70vw);margin:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;font-size:.86rem;line-height:1.5;color:var(--ink-2);
  box-shadow:var(--shadow-md);
}
@media(max-width:560px){.qtip p{width:min(260px,78vw)}}

/* ============================================================
   MOBILE SCALE
   The layout stacked correctly but nothing shrank: a 37px headline, an 17px
   lead and a full-size answer panel made the hero 1300px tall on a 360px
   phone, so the page felt zoomed in rather than responsive. Everything below
   is about fitting a screen, not about rearranging it.
   ============================================================ */
@media(max-width:900px){
  body{font-size:15.5px}
  .hero{padding-block:26px 34px}
  .hero h1{font-size:clamp(1.85rem,1.35rem + 2.4vw,2.2rem);line-height:1.12;max-width:none}
  .hero .lead{font-size:1rem;line-height:1.55}
  .hero .btn-row{margin-top:20px;gap:10px}
  .hero .btn-lg{padding:12px 18px;font-size:14.5px;flex:1 1 auto}
  .hero-note{font-size:.75rem;padding:4px 11px 4px 9px;margin-bottom:14px}
  .hero .eyebrow{font-size:10.5px;margin-bottom:10px}

  section{padding-block:40px}
  .sec-tight{padding-block:30px}
  h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,1.85rem)}
  h3{font-size:1.05rem}
  .sec-head{margin-bottom:26px}
  .lead{font-size:1rem}

  /* the answer panel is the tallest thing on the page; make it compact */
  .hero-media > img{aspect-ratio:3/2}
  .aip{font-size:.88rem}
  .aip-q{padding:11px 14px}
  .aip-q b{font-size:.78rem}
  .aip-head{padding:12px 14px 0}
  .aip-body{padding:10px 14px 4px}
  .aip-body p{margin-bottom:8px}
  .aip-list li{padding:8px 0;gap:8px}
  .aip-list li.you{margin-inline:-14px;padding-inline:14px}
  .aip-flag{font-size:9.5px;padding:3px 7px}
  .aip-foot{padding:10px 14px;font-size:9.5px}

  .card,.stat,.pillar,.step,.member,.qgroup{padding:18px}
  .grid{gap:14px}
  .stats{gap:12px}
  .stat b{font-size:2rem}
  .cta-band{padding:32px 20px}
  .answer p{font-size:1.02rem}
  .foot-grid{gap:24px}
  .btn-row .btn{flex:1 1 auto}
}
@media(max-width:400px){
  .hero h1{font-size:1.72rem}
  .wrap{padding-inline:16px}
}

/* ---- a section that pairs content with a photograph ----
   Only the hero carried an image, so everything below the fold read as a wall
   of prose. */
.split-media{display:grid;gap:28px;align-items:center}
/* a wide table inside a grid column forces the column wide unless the
   child is allowed to shrink below its content */
.split-media > *{min-width:0}
@media(min-width:960px){
  .split-media{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px}
}
.split-media .figure{border-radius:var(--r-lg);overflow:hidden}
.split-media .figure img{aspect-ratio:4/3}
.sm-media{min-width:0}

/* the parent brand mark on the case study */
.brandmark{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.brandmark img{height:56px;width:auto;transition:.16s var(--ease)}
.brandmark a:hover img{opacity:.82}
.brandmark span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* a single card should not stretch the full width of the page */
.g1{grid-template-columns:1fr}
@media(min-width:730px){.g1{grid-template-columns:minmax(0,680px)}}

/* the real dashboard screenshots on the case study */
.proof-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:820px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
.proof-shot{margin:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-sm)}
.proof-shot img{width:100%;display:block}
.proof-shot .figcaption{border-top:1px solid var(--border)}


/* the tablet band: single column, but the type and media still need to come
   down a step or the page reads as a desktop layout squeezed narrow */
@media(min-width:641px) and (max-width:999px){
  .hero h1{font-size:clamp(2rem,1.4rem + 2.4vw,2.6rem)}
  .hero-media > img{aspect-ratio:16/9}
  .hero .btn-lg{flex:0 1 auto}
  .split-media{gap:24px}
  .tool-grid{gap:26px}
  .qlist{padding-left:38px}
}
@media(max-width:999px){
  .hero-grid{gap:28px}
  .aip{font-size:.9rem}
}

/* ---- the score tool as tabs ----
   Fifteen questions in one column made the page very long and made the tool
   feel like homework. One area at a time, with progress visible on each tab. */
.qtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.qtab{
  display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--ff);font-size:.9rem;color:var(--ink-2);transition:.15s var(--ease);
  text-align:left;
}
.qtab:hover{border-color:var(--border-strong);color:var(--ink)}
.qtab[aria-selected="true"]{border-color:var(--blue);background:var(--blue-wash);color:var(--ink)}
.qtab-n{font-family:var(--ff-mono);font-size:.72rem;color:var(--muted)}
.qtab[aria-selected="true"] .qtab-n{color:var(--blue)}
.qtab-t{font-weight:500}
.qtab-c{
  font-family:var(--ff-mono);font-size:.7rem;color:var(--muted);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 7px;
}
.qtab.complete .qtab-c{color:var(--blue);border-color:var(--blue-soft);background:var(--blue-wash)}
@media(max-width:700px){
  .qtabs{gap:6px}
  .qtab{flex:1 1 auto;padding:9px 10px;font-size:.82rem;gap:7px}
  .qtab-t{display:none}
  .qtab-n{font-size:.78rem}
}
.qpanel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;
}
.qpanel[hidden]{display:none}
.qpanel h3{margin-bottom:.25em}
.qpanel > .small{margin-bottom:16px}
.qnav{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.qnav .btn{flex:0 1 auto}

/* the owned profiles, in the footer */
.foot-social{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.foot-social a{display:inline-block;padding:0;font-weight:500}

/* region headings on the locations index */
.region-h{
  display:flex;align-items:baseline;gap:12px;font-size:1.05rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--muted);
  margin:44px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.region-h:first-child{margin-top:0}
.region-h span{font-family:var(--ff-mono);font-size:.78rem;color:var(--faint);font-weight:500}

/* the visible "updated" date in the breadcrumb strip, matching the schema */
.crumbs time{color:var(--muted);font-variant-numeric:tabular-nums}
.hero .crumbs time{color:rgba(255,255,255,.6)}

/* the single aspiration line on the home page */
.aspiration{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border);
  font-size:clamp(1.05rem,.98rem + .45vw,1.25rem);line-height:1.5;
  color:var(--ink);font-weight:500;max-width:56ch;
}

/* the priority card at the top of the What we fix hub */
/* .lead-card removed: it was a one-off card style used on a single page. */


/* ---------- enquiry chooser and modal form ---------- */
/* The overlay centres the panel with flexbox. An earlier version pinned the
   panel at left/top 50% and pulled it back with a translate, which only lands
   centred while the box stays exactly the width the stylesheet asked for. Raise
   the browser's minimum font size, or zoom the page, and the content forces the
   box wider, the translate is still computed from the old half-width, and the
   panel slides off centre with its labels clipped. Flex centring has nothing to
   offset, so it cannot drift. min-width:0 on the children stops a long word
   widening the panel instead of wrapping. */
body.gp-lock{overflow:hidden}
/* The cookie card is z-index 300 and its veil 299, so an enquiry modal at 200
   opened UNDERNEATH them. Someone who had not yet answered the cookie question
   clicked Contact, got a form they could see but could not touch -- the Send
   button sat below the cookie panel and every click landed on that instead.
   Verified in a browser: elementFromPoint over #gpSend returned the cookie
   dialog's paragraph. Someone asking to contact the business must be able to,
   so the enquiry modal now sits above the consent card. */
.gp-ov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;
  justify-content:center;padding:16px;overflow-y:auto;
  background:rgba(11,20,38,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.gp-ov.open{opacity:1;pointer-events:auto}
.gp-modal{position:relative;width:100%;max-width:560px;margin:auto;min-width:0;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 30px 80px rgba(11,20,38,.28);padding:30px 30px 26px;
  transform:translateY(10px);transition:transform .2s ease}
.gp-ov.open .gp-modal{transform:none}
.gp-modal *{min-width:0}
@media(max-width:560px){
  .gp-ov{padding:0;align-items:flex-end}
  .gp-modal{border-radius:16px 16px 0 0;padding:26px 20px 22px;max-width:none}
}
.gp-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;
  font-size:.95rem;line-height:1;display:grid;place-items:center;flex:none}
.gp-x:hover{color:var(--ink);border-color:var(--muted)}
.gp-head{text-align:center;margin-bottom:20px;padding-right:34px;padding-left:34px}
.gp-head h3{margin:6px 0 8px;font-size:1.32rem;text-wrap:balance}
.gp-sub{margin:0;color:var(--muted);font-size:.92rem}
.gp-list{display:flex;flex-direction:column;gap:10px}
.gp-card{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:15px 16px;border:1px solid var(--border);border-radius:12px;background:transparent;
  color:inherit;font:inherit;
  transition:border-color .15s ease,background .15s ease,transform .1s ease}
.gp-card:hover{border-color:var(--blue);background:var(--bg-sub)}
.gp-card:active{transform:translateY(1px)}
.gp-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gp-feat{border-color:var(--blue);background:var(--bg-sub)}
.gp-ic{flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--bg-sub);border:1px solid var(--border);color:var(--muted)}
.gp-ic svg{width:20px;height:20px}
.gp-ic.wa{background:#25D366;border-color:#25D366;color:#fff}
.gp-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.gp-tx b{font-size:.98rem}
.gp-tx span{font-size:.86rem;color:var(--muted);line-height:1.45}
.gp-badge{align-self:flex-start;margin-top:2px;flex:none;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:99px;
  background:linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);
  color:#fff;white-space:nowrap}
.gp-badge-2{background:transparent;color:var(--blue);border:1px solid var(--blue-soft)}
.gp-foot{margin:16px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}

/* The form panel is wider than the chooser, because it holds paired fields
   rather than a stack of single choices. */
.gp-modal.gp-form{max-width:720px}
.gp-back{position:absolute;left:16px;top:16px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font:inherit;font-size:.82rem;
  padding:6px 12px;border-radius:99px;cursor:pointer;line-height:1}
.gp-back:hover{color:var(--ink);border-color:var(--muted)}
.gp-back:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gp-form .gp-head{padding-left:96px;padding-right:56px}
@media(max-width:560px){.gp-form .gp-head{padding-left:0;padding-right:0;margin-top:34px}}

/* form */
/* Two columns, because a single stacked column made the panel taller than the
   screen and turned a six field form into a scroll. The long textarea, the
   consent line, the button and the note span both columns; everything else
   pairs up. One column again below 620px, where side by side fields would be
   too narrow to type into. */
#gpEnq{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px;align-items:start}
#gpEnq .gp-wide{grid-column:1 / -1}
@media(max-width:620px){#gpEnq{grid-template-columns:1fr}}
#gpEnq label{display:flex;flex-direction:column;gap:5px;font-size:.86rem;font-weight:600;min-width:0}
#gpEnq input,#gpEnq select,#gpEnq textarea{font:inherit;font-weight:400;padding:11px 13px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);
  width:100%;max-width:100%;box-sizing:border-box}
#gpEnq textarea{resize:vertical;min-height:74px}
#gpEnq input:focus,#gpEnq select:focus,#gpEnq textarea:focus{outline:2px solid var(--blue);
  outline-offset:1px;border-color:var(--blue)}
#gpEnq label.invalid input,#gpEnq label.invalid textarea,#gpEnq label.invalid select{border-color:#c0392b}
/* "optional" is the least important word on the form, so it should not be the
   most decorated. A pill with a border, a fill and uppercase letter-spacing was
   louder than the field label it was qualifying. Plain, faint, lowercase, with a
   middot to separate it from the label. */
.gp-opt{font-weight:400;color:var(--faint);font-size:.78rem;letter-spacing:0;
  text-transform:none;background:none;border:0;padding:0;border-radius:0;margin-left:0}
.gp-opt::before{content:"\00b7";margin:0 5px;color:var(--faint)}
/* One flex item, so the label and its badge share a line */
.gp-lbl{display:flex;align-items:center;gap:0;flex-wrap:wrap}

/* Custom select. A native dropdown draws its own arrow, its own font and its own
   height in every browser, so the one control we did not style was the one that
   made the panel look unfinished. appearance:none removes all of it; the arrow
   below is ours and looks identical everywhere. */
.gp-sel{position:relative;display:block;width:100%}
.gp-sel select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:40px;cursor:pointer}
.gp-sel::after{content:"";position:absolute;right:15px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);pointer-events:none}
.gp-sel select::-ms-expand{display:none}

/* The consent tick box was removed: sending the message is the consent, and a
   line under the button says so. This is the note that replaced it. */
.gp-legal{margin:2px 0 0;font-size:.78rem;color:var(--muted);text-align:center;line-height:1.5}

#gpSend{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:4px;width:100%}
#gpSend svg{width:19px;height:19px;flex:none}
.gp-note{margin:0;font-size:.8rem;color:var(--muted);text-align:center}
#gpDone{text-align:center}
#gpDone h3{margin:0 0 8px}

/* ---------- section-level call to action ---------- */
/* A slim line, not another banner. It appears at the end of every content
   section, so the wording rotates and the styling stays quiet: eleven identical
   loud bands on one page reads as desperation and trains the eye to skip them. */
.sec-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--border)}
.sec-cta p{margin:0;color:var(--muted);font-size:.94rem}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:var(--r-sm)}
@media(max-width:560px){
  .sec-cta{gap:12px}
  .sec-cta .btn-sm{width:100%;text-align:center}
}

/* ---------- cookie notice ---------- */
/* A bar, not a full-screen wall. Allow is the primary action and is clearly the
   bigger target; Decline is quieter but stays a real, readable, same-sized-text
   button, because a decline you have to hunt for is the pattern regulators
   actually fine people for. */
/* The consent question, centred.
   It began as a bottom bar, which was polite and therefore ignored: people
   scrolled past a question they never registered, so almost nobody answered and
   the analytics stayed dark. This stops and asks.
   It is deliberately NOT a cookie wall. The page behind stays readable, both
   answers are one click, both are the same size text, and either one dismisses
   it permanently. What changed is visibility, not the cost of saying no. */
/* The consent card and the sticky CTA bar are both anchored to the bottom of the
   screen. On a phone they stack on top of each other and on top of the page's own
   buttons, so a visitor who has not yet answered the cookie question cannot press
   any CTA -- proven in a browser: the click was intercepted by .cc-panel, then by
   .sticky-cta, then by the stuck header. The consent question comes first; the
   sticky bar waits until it has been answered. */
body:has(.cc-modal.show) .sticky-cta{display:none!important}
.cc-modal{z-index:300}

.cc-veil{position:fixed;inset:0;z-index:299;background:rgba(11,20,38,.55);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.cc-veil.show{opacity:1}
.cc-modal{position:fixed;z-index:300;left:50%;bottom:24px;width:min(560px,calc(100vw - 32px));
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.cc-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.cc-panel{background:var(--bg-deep);color:#E6ECF6;border-radius:var(--r-lg);
  padding:32px 34px 26px;box-shadow:0 30px 90px rgba(11,20,38,.5);position:relative;overflow:hidden}
.cc-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 6% 0%, rgba(10,70,192,.5) 0%, transparent 68%),
             radial-gradient(70% 120% at 96% 100%, rgba(106,13,173,.42) 0%, transparent 70%)}
.cc-panel > *{position:relative}
.cc-tx{margin:0 0 22px;font-size:.92rem;color:#B9C6DA;line-height:1.6}
.cc-tx a{color:#9FC0FF;text-decoration:underline}
/* the global `strong` rule sets a dark ink colour, which on a navy panel made
   the headline and the three denials invisible. These win it back. */
.cc-panel .cc-lead,.cc-panel .cc-lead strong{color:#fff}
.cc-panel .cc-hi{color:#fff}
.cc-panel .cc-btns{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.cc-yes{font:inherit;font-weight:600;font-size:1.08rem;padding:16px 36px;border:0;width:100%;
  border-radius:var(--r);color:#fff;cursor:pointer;white-space:nowrap;
  background:linear-gradient(100deg,#2F6FE4 0%,#5E5BDE 46%,#8B4BD6 100%);
  background:linear-gradient(100deg in oklab,#2F6FE4 0%,#8B4BD6 100%);
  background-origin:border-box;background-repeat:no-repeat}
.cc-yes:hover{filter:saturate(1.1) brightness(1.1)}
.cc-no{font:inherit;font-size:.78rem;padding:4px 2px;border:0;border-radius:2px;
  background:transparent;color:#8E9CB5;cursor:pointer;white-space:nowrap;
  text-decoration:underline;text-underline-offset:2px;align-self:center;width:auto}
.cc-no:hover{color:#C3CFE2}
.cc-yes:focus-visible,.cc-no:focus-visible{outline:2px solid #9FC0FF;outline-offset:2px}
@media(max-width:560px){
  .cc-panel{padding:26px 22px 22px}
}

/* the switch on the privacy page */
.cc-pref{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  padding:18px 20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-sub)}
.cc-switch{position:relative;width:52px;height:30px;flex:none;border-radius:99px;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);transition:background .18s ease,border-color .18s ease}
.cc-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--muted);transition:transform .18s ease,background .18s ease}
.cc-switch[aria-checked="true"]{background:var(--blue);border-color:var(--blue)}
.cc-switch[aria-checked="true"]::after{transform:translateX(22px);background:#fff}
.cc-switch:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cc-pref p{margin:0;font-size:.9rem;color:var(--ink-2)}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:20px;bottom:20px;z-index:150;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);
  box-shadow:var(--shadow-md);cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),color .15s ease,border-color .15s ease}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{color:var(--blue);border-color:var(--blue)}
.to-top:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.to-top svg{width:20px;height:20px}
/* lifted clear of the cookie notice while it is on screen */
/* clear of the sticky mobile CTA rather than sitting on top of it */
@media(max-width:820px){
  .to-top{bottom:86px;right:14px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .01s}}

/* ---------- print ----------
   Legal pages, the case study and answer pages do get printed and passed around
   a trustee meeting. Without this they print the nav, the cookie bar and the
   floating button, and waste ink on dark section backgrounds. */
@media print{
  header,footer,.sticky-cta,.to-top,.cc-bar,.gp-ov,.gp-modal,.sec-cta,.cta-band{display:none!important}
  *{background:#fff!important;color:#000!important;box-shadow:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .wrap{max-width:none;padding:0}
  h1,h2,h3{page-break-after:avoid}
  img,table,figure{page-break-inside:avoid;max-width:100%}
}

/* ---------- readable sitemap ---------- */
.sitemap-list{list-style:none;padding:0;margin:10px 0 26px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 22px}
.sitemap-list a{display:block;padding:5px 0;font-size:.94rem}

/* ---------- hover: the brand gradient, not a flat blue ----------
   A border cannot take a gradient directly and keep its radius, so the surface
   is painted twice: the card colour clipped to the padding box, and the
   gradient clipped to the border box. What shows through the one pixel gap is
   the gradient, and the corner radius survives.
   Applied only where a whole tile lights up. Text links keep a solid colour on
   hover: gradient text is harder to read at body size, and the point of a link
   hover is legibility, not decoration. */
.card-link:hover,
.pillar:hover,
.dir a:hover,
.gp-card:hover,
a.chip:hover{
  border-color:transparent;
  background-image:
    linear-gradient(var(--surface),var(--surface)),
    linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.gp-card:hover{
  background-image:
    linear-gradient(var(--bg-sub),var(--bg-sub)),
    linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);
}
a.chip:hover{
  background-image:
    linear-gradient(var(--blue-wash),var(--blue-wash)),
    linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);
}
/* the navy bands paint their own surface, so the inner fill must match it */
.dark .card-link:hover,.dark .pillar:hover,.dark .dir a:hover{
  background-image:
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)),
    linear-gradient(100deg,#78A6FF 0%,#C79BF0 100%);
}
/* the heading inside a hovered card, and the back-to-top button, pick up the
   violet end so the accent is not blue-only anywhere */
.card-link:hover h3,.dir a:hover b{
  background:linear-gradient(100deg,var(--blue) 0%,var(--purple) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.to-top:hover{color:var(--purple);border-color:var(--purple-soft)}

/* The registered entity, on every page. A company that asks institutes to trust
   it with their admissions data should be identifiable on any page a reader
   lands on, not only in markup a person cannot see. */
.footer-entity{display:inline-block;margin-top:6px;font-size:.78rem;color:var(--faint);line-height:1.6}

/* The consent notice reads as a question from a person, not a legal wall. */

.cc-lead{margin:0 0 8px;font-size:1.12rem;line-height:1.35}