/* ==========================================================================
   THEME TOKENS (blue brand, from the Paw ascent logo; applied 2 October 2026)
   Every colour on the site is defined in this block. To re-theme, change the
   values here and nowhere else. Rules below must only use these tokens.
   Check contrast for every text and UI pair after changing any value.
   Buttons have their OWN tokens (--btn-*): never point them at --accent, so a
   button can never turn blue (CLAUDE.md: no blue button fills).
   ========================================================================== */
:root{
  /* light surfaces (paper and navy) */
  --bg:#F7F9FC;
  --ink:#0B1B33;
  --muted:#46536A;
  --muted-2:#55627A;
  --line:#D5DCE8;
  --field-border:#6B7A94;
  --field-bg:#FFFFFF;
  --header-bg:rgba(247,249,252,0.94);
  --backdrop:rgba(11,27,51,0.6);       /* dims the page behind the form pop-ups */

  /* brand blue: links, proof figures, highlights, focus rings, progress bar. Never a button fill. */
  --accent:#1D4ED8;
  --accent-ink:#FFFFFF;
  --accent-hover:#1E40AF;

  /* buttons on light surfaces: navy */
  --btn-bg:#0B1B33;
  --btn-ink:#FFFFFF;
  --btn-hover:#1E3358;

  /* dark surfaces (navy; used inside .chapter-dark) */
  --dark-bg:#0B1B33;
  --dark-ink:#F7F9FC;
  --dark-muted:#A9B8CF;
  --dark-muted-2:#8FA2C2;
  --dark-line:rgba(247,249,252,0.18);
  --dark-field-border:#7B8DB0;
  --dark-field-bg:rgba(247,249,252,0.06);
  --dark-accent:#7CB3FF;
  --dark-accent-ink:#0B1B33;
  --dark-accent-hover:#A6CBFF;
  /* buttons on dark surfaces: paper, so the main action never disappears into navy */
  --dark-btn-bg:#F7F9FC;
  --dark-btn-ink:#0B1B33;
  --dark-btn-hover:#DCE6F5;

  /* decorative background art: soft blue glows, never behind small text at low contrast */
  --art-dark-1:#16305A;
  --art-dark-2:#112748;
  --art-dark-3:#1B3866;
  --art-light-1:#E4ECF8;
  --art-light-2:#DCE6F5;
  --bg-tint:#E4ECF8; /* tinted light sections: ink 14.5:1, muted 6.5:1, muted-2 5.2:1, accent 5.6:1 */
  /* brand motif (upward chevron): faint, behind content; text contrast checked over it */
  --motif:rgba(29,78,216,0.07);
  --dark-motif:rgba(124,179,255,0.08);

  /* aliases used by the privacy, cookie, terms, sitemap and accessibility pages */
  --text-soft:var(--muted);

  /* Fonts: the operating system's own UI font, no network request, no external
     provider, no GDPR question to answer. See CLAUDE.md "Fonts" for the
     reasoning and how to upgrade to a self-hosted display face later if wanted. */
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:65px;}
@media (max-width:900px){html.has-page-nav{scroll-padding-top:109px;}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:-0.01em;line-height:1.2;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
.btn,.brand,.menu-links a{text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px);position:relative;z-index:1;}
.section{padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(32px,5vw,56px);}
.rule{border:0;border-top:2px solid var(--ink);margin:0;}
.rule-thin{border:0;border-top:1px solid var(--line);margin:0;}

/* ---------- Chapters: full-width bands with natural height. Scroll-snap removed 2 October 2026
   (chapters were taller than the screen, so snapping caused jank and hid the footer). Only the
   homepage hero fills the first screen. ---------- */
.chapter{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(8px,2vw,24px) 0;}
.chapter-hero{min-height:calc(100vh - 65px);}
/* Brand motif: a large faint upward chevron, decorative, behind content (z-index 0; content is z-index 1) */
.motif{position:absolute;z-index:0;pointer-events:none;color:var(--motif);height:auto;}
.motif--hero{width:min(38vw,540px);right:1%;bottom:-4%;}
.motif--work{width:min(32vw,440px);right:1%;top:50%;transform:translateY(-50%);}
@media (max-width:760px){ .motif--hero{width:78vw;right:-22%;bottom:-2%;} .motif--work{display:none;} }
.chapter-art{position:absolute;inset:-15%;z-index:0;pointer-events:none;filter:blur(70px);will-change:transform;}
.chapter-light{background:var(--bg);color:var(--ink);}
.chapter-tint{background:var(--bg-tint);color:var(--ink);}
.chapter-dark{
  background:var(--dark-bg);
  --ink:var(--dark-ink); --muted:var(--dark-muted); --muted-2:var(--dark-muted-2); --line:var(--dark-line);
  --field-border:var(--dark-field-border); --field-bg:var(--dark-field-bg);
  --accent:var(--dark-accent); --accent-ink:var(--dark-accent-ink); --accent-hover:var(--dark-accent-hover);
  --btn-bg:var(--dark-btn-bg); --btn-ink:var(--dark-btn-ink); --btn-hover:var(--dark-btn-hover);
  --motif:var(--dark-motif);
  color:var(--ink);
}

.chapter-art--warm{
  background:
    radial-gradient(circle at 14% 18%, var(--art-dark-1) 0%, transparent 42%),
    radial-gradient(circle at 82% 12%, var(--art-dark-2) 0%, transparent 38%),
    radial-gradient(circle at 78% 78%, var(--art-dark-3) 0%, transparent 50%);
  animation:drift-1 34s ease-in-out infinite alternate;
}
.chapter-art--cool{
  background:
    radial-gradient(circle at 86% 20%, var(--art-dark-3) 0%, transparent 30%),
    radial-gradient(circle at 12% 30%, var(--art-dark-2) 0%, transparent 46%),
    radial-gradient(circle at 70% 85%, var(--art-dark-1) 0%, transparent 55%);
  animation:drift-2 38s ease-in-out infinite alternate;
}
.chapter-art--paper{
  background:
    radial-gradient(circle at 92% 8%, var(--art-light-1) 0%, transparent 34%),
    radial-gradient(circle at 96% 50%, var(--art-light-2) 0%, transparent 40%);
  opacity:0.9;
}

@keyframes drift-1{from{transform:translate(0,0) scale(1);}to{transform:translate(-2%,2%) scale(1.06);}}
@keyframes drift-2{from{transform:translate(0,0) scale(1.04);}to{transform:translate(2%,-2%) scale(1);}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}
html{scrollbar-gutter:stable;}
body.menu-open{overflow:hidden;}

/* ---------- Top bar ---------- */
header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.topwrap{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,56px);height:64px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:16px;}
.brand-logo{width:34px;height:34px;display:block;flex-shrink:0;}
.brand-mark{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.menu-toggle{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;line-height:1;}
.menu-toggle:hover{color:var(--accent);}

/* Narrow phones: keep logo, "Book a call" and the 44px menu button on one row */
@media (max-width:480px){
  .topwrap{padding-left:16px;padding-right:16px;}
  .topwrap > div{gap:8px !important;}
  header .btn,.menu-head .btn{padding:0 14px !important;min-height:44px;}
  .brand{gap:8px;}
  .brand-logo{width:30px;height:30px;}
  .has-page-nav .page-nav{margin:0 -16px !important;padding:0 40px 0 4px !important;width:calc(100% + 32px) !important;}
}
@media (max-width:374px){ .brand{font-size:14px;} }
/* Below 360px the full lockup stays; "Book a call" and the lockup shrink instead (Lewis, 1 October 2026) */
@media (max-width:359px){
  header .brand,.menu-head .brand{font-size:13px;gap:5px;}
  header .brand-logo,.menu-head .brand-logo{width:24px;height:24px;}
  header .btn,.menu-head .btn{font-size:12px;padding:0 8px !important;}
  .topwrap > div{gap:5px !important;}
}

/* ---------- Homepage section navigation (scrolls the page) ---------- */
.page-nav{display:flex;align-items:center;gap:2px;}
.page-nav a{font-size:14px;font-weight:500;padding:12px 12px;color:var(--muted);text-decoration:none;white-space:nowrap;}
.page-nav a:hover{color:var(--ink);}
.page-nav a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px;}
@media (max-width:900px){
  .has-page-nav .topwrap{height:auto;flex-wrap:wrap;}
  .has-page-nav .topwrap > .brand,.has-page-nav .topwrap > div{min-height:64px;}
  .has-page-nav .page-nav{order:3;width:calc(100% + 2 * clamp(20px,5vw,56px));height:44px;margin:0 calc(-1 * clamp(20px,5vw,56px));padding:0 40px 0 calc(clamp(20px,5vw,56px) - 12px);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
    /* soft fade on the right edge says the row scrolls; the 40px end padding lets the last item clear it */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);}
  .has-page-nav .page-nav::-webkit-scrollbar{display:none;}
}

/* ---------- Buttons (fixed accent pairing so they read on every chapter) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;font-family:var(--font-body);font-size:14.5px;font-weight:600;border-radius:999px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;}
.btn:disabled{opacity:0.6;cursor:default;}
.btn-accent{background:var(--btn-bg);color:var(--btn-ink);}
.btn-accent:hover{background:var(--btn-hover);}
.btn-outline{border-color:currentColor;color:inherit;background:transparent;}
.btn-outline:hover{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink);}
.btn-full{width:100%;}
header .btn,.menu-head .btn{min-height:44px;}
/* "Book a free call" in the header; "free" drops below 410px wide, where it would wrap the header */
@media (max-width:409px){ .cta-free{display:none;} }

/* ---------- Full-screen menu overlay ---------- */
.menu-overlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;transform:translateY(-100%);transition:transform 260ms ease;}
.menu-overlay.is-open{transform:translateY(0);}
.menu-overlay[hidden]{display:none;}
.menu-head{border-bottom:1px solid var(--line);}
.menu-overlay .menu-toggle{font-size:30px;}
.menu-links{display:flex;flex-direction:column;width:100%;max-width:1040px;margin:clamp(24px,6vh,64px) auto 0;padding:0 clamp(20px,5vw,56px);}
.menu-links a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:8px;}
.menu-links a{font-family:var(--font-display);font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:700;padding:14px 0;border-bottom:1px solid var(--line);}
.menu-links a:hover{color:var(--accent);}
.menu-extra{width:100%;max-width:1040px;margin:auto auto 0;padding:24px clamp(20px,5vw,56px) 32px;display:flex;flex-wrap:wrap;gap:14px 22px;}
.menu-extra a{font-size:13px;color:var(--muted);}

/* ---------- Hero ---------- */
/* Two columns on desktop: who/what/action on the left, the proof figures on the right.
   The figures are deliberately larger than the H1 (CLAUDE.md: proof numbers and CTA dominate). */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 72px;align-items:center;}
.hero-byline{display:flex;align-items:center;gap:16px;font-size:14.5px;line-height:1.5;color:var(--muted);margin-bottom:22px;}
/* Lewis's portrait is always a circle, on every page and screen size (Lewis, 2 October 2026) */
.portrait-circle{display:block;aspect-ratio:1/1;border-radius:50%;object-fit:cover;object-position:50% 30%;}
.hero-portrait{width:80px;height:80px;}
@media (max-width:480px){ .hero-portrait{width:60px;height:60px;} .hero-byline{gap:12px;} }
.hero-name{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);}
.hero-h1{font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.06;max-width:16ch;}
.hero-h1 .accent{color:var(--accent);}
.hero-lede{margin-top:20px;max-width:52ch;font-size:clamp(16px,1.45vw,17.5px);line-height:1.6;color:var(--muted);}
.btn-lg{padding:16px 30px;font-size:16px;min-height:54px;}
.hero-cta{margin-top:30px;}
.hero-proof{font-size:15px;line-height:1.55;color:var(--ink);margin-top:18px;max-width:52ch;}
.proof-list{list-style:none;margin:0;padding:0;}
.proof-list li{padding:22px 0;border-top:1px solid var(--line);}
.proof-list li:first-child{border-top:none;padding-top:0;}
.proof-figure{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,4.8vw,3.75rem);line-height:1;letter-spacing:-0.02em;color:var(--accent);}
.proof-label{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--muted);max-width:30ch;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px;}
  .proof-list li{padding:18px 0;}
}

/* ---------- Section label (matches the page-nav label) and heading ---------- */
.section-label{font-size:13.5px;font-weight:600;color:var(--accent);letter-spacing:0.02em;margin-bottom:8px;}
.section-h2{font-size:clamp(1.4rem,2.4vw,1.9rem);max-width:30ch;margin-bottom:22px;}
.text-link{display:inline-block;padding:10px 0;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Condensed grids: services / approach / engagement ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.nrow{display:flex;align-items:baseline;gap:16px;padding:16px 20px 16px 0;border-top:1px solid var(--line);}
.eng-services{gap:32px;margin:22px 0 8px;}
.grid-2 .nrow:nth-child(-n+2),.grid-3 .nrow:nth-child(-n+3){border-top:1px solid var(--line);}
.nrow-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.6vw,1.2rem);}
.nrow p{font-size:15px;color:var(--muted);line-height:1.6;margin-top:6px;max-width:62ch;}

/* ---------- Case studies: one lead result, a feature beside a stack of two, then a compact list.
   Deliberately not a uniform grid: no two neighbouring blocks share a shape. ---------- */
.case-figure{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.1;}
.case-figure .accent{color:var(--accent);}
.case p{font-size:15px;line-height:1.6;color:var(--ink);max-width:60ch;}
/* Case studies: full text on desktop, a shorter approved version on phones (only one is ever shown) */
.case-short{display:none;}
@media (max-width:760px){ .case-long{display:none;} .case-short{display:inline;} }
.case .case-client{font-size:12.5px;color:var(--muted);margin-top:6px;margin-bottom:10px;}

.case-lead{display:grid;grid-template-columns:5fr 7fr;gap:12px 48px;align-items:start;padding:32px 0;border-top:2px solid var(--ink);}
.case-lead .case-figure{font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.02;}
.case-lead .case-figure .accent{white-space:nowrap;}
.case-lead > p{font-size:15px;}

.case-pair{display:grid;grid-template-columns:7fr 5fr;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.case-feature{padding:28px 32px 28px 0;border-right:2px solid var(--ink);}
.case-feature .case-figure{font-size:clamp(2rem,4.2vw,3rem);line-height:1.05;}
.case-stack{padding-left:28px;}
.case-stack .case{padding:24px 0;}
.case-stack .case + .case{border-top:1px solid var(--line);}

.case-also{margin-top:28px;}
.case-also-title{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0.03em;margin-bottom:8px;}
.case-also ul{list-style:none;margin:0;padding:0;}
.case-also li{font-size:15px;line-height:1.6;color:var(--muted);padding:10px 0;border-top:1px solid var(--line);max-width:66ch;}
.case-also strong{color:var(--ink);}
.case-also .accent{color:var(--accent);}

/* ---------- Service groups (vendor side / group side) ---------- */
.svc-group-title{font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:12px;}
.svc-list{list-style:none;margin:0;padding:0;}
.svc-list li{position:relative;padding:9px 0 9px 28px;font-size:14.5px;line-height:1.55;border-top:1px solid var(--line);}
/* Bullets are the logo mark at its 16px minimum: bullet-light.svg (navy and blue) on light sections,
   bullet-dark.svg (paper and light blue) on navy ones. Exact copies of the logo shapes, not recoloured. */
.svc-list li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;background:url(assets/bullet-light.svg) center/contain no-repeat;}
.chapter-dark .svc-list li::before{background-image:url(assets/bullet-dark.svg);}
.svc-note{font-size:15px;color:var(--muted);margin-top:22px;max-width:62ch;line-height:1.6;}

/* ---------- Testimonial cards ---------- */
.testi{padding:20px 0;border-top:1px solid var(--line);}
.testi:last-child{border-bottom:1px solid var(--line);}
.testi-quote{font-size:15px;line-height:1.6;color:var(--muted-2);font-style:italic;}
.testi-attrib{font-weight:600;font-size:13.5px;margin-top:10px;}
.testi-label{display:inline-block;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}

/* ---------- About-page prose ---------- */
.prose p{font-size:15.5px;line-height:1.75;color:var(--muted);max-width:64ch;margin-bottom:18px;}
.prose p:last-child{margin-bottom:0;}
.sub-h2{font-size:clamp(1.2rem,1.9vw,1.45rem);margin:44px 0 12px;}
/* About: one grid. Phones stack in DOM order (portrait, intro, work, proof, rest);
   desktop puts the portrait and the proof block in a right-hand column. */
.about-grid{display:grid;gap:24px;align-items:start;grid-template-areas:"portrait" "intro" "work" "proof";}
.about-portrait{grid-area:portrait;margin:0;max-width:112px;}
.about-portrait img{width:100%;height:auto;}
.about-intro{grid-area:intro;}
.about-intro .page-h1{max-width:22ch;}
.about-work{grid-area:work;}
.about-proof{grid-area:proof;}
.about-rest{grid-area:rest;}
.about-work .sub-h2,.about-rest .sub-h2:first-child{margin-top:16px;}
.career{margin:0 0 18px;padding:0;max-width:64ch;}
.career div{padding:12px 0;border-top:1px solid var(--line);}
.career div:last-child{border-bottom:1px solid var(--line);}
.career dt{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);}
.career dd{margin:4px 0 0;font-size:15px;color:var(--muted);line-height:1.5;}
.about-proof p{margin:0;padding:18px 0;border-top:1px solid var(--line);}
.about-proof p:first-child{border-top:none;padding-top:0;}
.about-proof .proof-label{font-size:14.5px;}
/* Tablet and up: the four figures form a 2 by 2 block */
@media (min-width:600px){
  .about-proof{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start;}
  .about-proof p{padding:16px 0;}
  .about-proof p:nth-child(-n+2){border-top:none;padding-top:0;}
  .about-proof .text-link{grid-column:1 / -1;}
  .about-portrait{max-width:160px;}
}
/* Laptop and up: the figures sit beside the career list, so both columns end at about the same height */
@media (min-width:1000px){
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(300px,420px);column-gap:56px;grid-template-areas:"intro portrait" "work proof";}
  .about-portrait{max-width:260px;}
  .about-work .sub-h2{margin-top:0;}
  .about-proof .proof-figure{font-size:clamp(1.7rem,2.6vw,2.4rem);}
  .about-proof .proof-label{font-size:14px;}
}
}

/* ---------- Engagement ---------- */
.page-h1{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;max-width:24ch;margin-bottom:22px;}
/* The rate is the page's headline figure: kept larger than the H1 on purpose */
.rate-num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.8rem,7vw,4.4rem);line-height:1;}
.rate-unit{font-size:0.4em;color:var(--muted);}
.rate-sub{margin-top:14px;max-width:58ch;font-size:15px;color:var(--muted);line-height:1.65;}
.eng-h2{font-size:clamp(1.2rem,1.9vw,1.45rem);margin-top:56px;margin-bottom:10px;}
.eng-h2--first{margin-top:8px;}
.eng-body{max-width:62ch;font-size:15px;color:var(--muted);line-height:1.65;}
.plan-name{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.3;margin-bottom:6px;}
/* Engagement: price on the left, the free first step and booking button beside it */
.eng-hero{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);}
.eng-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 72px;align-items:start;}
.eng-rate .rate-num{font-size:clamp(2.8rem,5vw,4rem);}
.rate-unit{white-space:nowrap;}
@media (max-width:900px){ .eng-top{grid-template-columns:1fr;} }
/* Engagement process: a numbered sequence. Markers use the button colours (navy on light,
   paper on navy); a thin line joins the steps; step 3 is a choice of two, side by side. */
.steps{list-style:none;margin:32px 0 0;padding:0;counter-reset:step;}
.step{position:relative;counter-increment:step;padding:0 0 40px 64px;}
.step::before{content:counter(step);position:absolute;left:0;top:-6px;width:40px;height:40px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font-display);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;}
.step::after{content:"";position:absolute;left:19px;top:42px;bottom:6px;width:2px;background:var(--line);}
.step:last-child{padding-bottom:0;}
.step:last-child::after{display:none;}
.step p{font-size:15px;color:var(--muted);line-height:1.6;max-width:62ch;margin:0;}
.step .btn{margin-top:18px;}
.step--choice{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px 28px;align-items:start;}
.step .step-or{align-self:center;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);}
@media (max-width:760px){ .step--choice{grid-template-columns:1fr;} .step .step-or{align-self:start;} .step{padding-left:56px;} }
.eng-close{margin-top:48px;font-size:15px;}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px;}

/* ---------- Enquiry form ---------- */
.enquiry{max-width:560px;margin:36px 0 0;padding-top:20px;border-top:1px solid var(--line);}
/* The disclosure looks like a plain underlined link with a small chevron (CSS, not a glyph) */
.enquiry-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:4px;}
.enquiry-toggle::-webkit-details-marker{display:none;}
.enquiry-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform 160ms ease;}
.enquiry[open] .enquiry-toggle::after{transform:translateY(2px) rotate(-135deg);}
.enquiry-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.enquiry-sub{color:var(--muted);font-size:14.5px;margin:10px 0 18px;}
.field-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field-group label{font-size:14px;font-weight:600;}
.field-group input,.field-group textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--field-bg);border:1px solid var(--field-border);border-radius:2px;padding:12px 14px;width:100%;}
.field-group textarea{min-height:120px;resize:vertical;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.contact-h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:26ch;}
.contact-lede{margin-top:14px;max-width:58ch;font-size:16px;line-height:1.6;color:var(--muted);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.field-check{display:flex;align-items:center;gap:12px;min-height:44px;margin:2px 0 16px;}
.field-check input{width:24px;height:24px;flex-shrink:0;margin:0;accent-color:var(--ink);cursor:pointer;}
.field-check label{font-size:14.5px;padding:10px 0;cursor:pointer;}
.field-check a{text-decoration:underline;}
.form-status{font-size:14.5px;margin-top:12px;min-height:1.4em;}
.form-status:focus{outline:none;}
.form-note{font-size:12.5px;color:var(--muted);margin-top:10px;}

/* "Enquiry sent" pop-up (native <dialog>, opened by script.js on a successful send) */
.sent-dialog{padding:0;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);width:min(440px, calc(100vw - 32px));max-width:none;}
.sent-dialog::backdrop{background:var(--backdrop);}
.sent-dialog-inner{padding:32px 28px 28px;}
.sent-title{font-size:1.4rem;line-height:1.25;margin-bottom:10px;}
.sent-dialog p{font-size:15.5px;color:var(--muted);line-height:1.6;margin-bottom:24px;}
.sent-dialog .btn{min-height:44px;width:100%;}
.sent-dialog .dialog-alt{display:block;text-align:center;margin-top:10px;padding:12px 0;}
@media (forced-colors: active){ .sent-dialog{border:2px solid CanvasText;} }
.form-note a{text-decoration:underline;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:28px 0 40px;}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center;}
.footer-left{display:flex;flex-direction:column;gap:10px;}
.footer-line{font-size:13px;color:var(--muted);}
.footer-contact{font-style:normal;font-size:13px;line-height:1.7;color:var(--muted);}
.footer-contact a{color:var(--muted);text-decoration:underline;display:inline-block;padding:4px 0;}
.footer-contact a:hover{color:var(--ink);}
/* LinkedIn icon: inline SVG (no request to LinkedIn), footer text colour, 44px tap area */
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:4px 0 0 -10px;color:var(--muted);}
.footer-social:hover{color:var(--ink);}
.footer-social svg{width:24px;height:24px;display:block;}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 22px;}
.footer-links a{font-size:13px;color:var(--muted);text-decoration:underline;padding:8px 0;display:inline-block;}
.footer-links a:hover{color:var(--ink);}

/* ---------- Progress bar ---------- */
#progress-bar{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);z-index:70;transform:scaleX(0);transform-origin:left center;transition:transform 80ms linear;}

@media (max-width:760px){
  .grid-2,.grid-3,.case-lead,.case-pair{grid-template-columns:1fr;}
  .case-feature{border-right:none;padding-right:0;}
  .case-stack{padding-left:0;}
  .case-stack .case{border-top:1px solid var(--line);}
  .chapter{min-height:auto;padding:12px 0;}
}

/* ---------- Cookie consent banner (dormant: only rendered by script.js when a feature
   registered with LKConsent.require() needs consent; none does today) ---------- */
.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:65;max-width:640px;margin:0 auto;padding:18px 20px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 24px var(--backdrop);}
.consent-text{font-size:15px;line-height:1.55;color:var(--ink);}
.consent-text a{text-decoration:underline;}
.consent-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
.consent-actions .btn{min-height:44px;}
@media (forced-colors: active){ .consent-banner{border:2px solid CanvasText;} }

/* Standalone links meet the 24px minimum target size (WCAG 2.2 2.5.8); links inside sentences are exempt */
.legal-address a,.sitemap-list a{display:inline-block;padding:3px 0;}
.legal-list{margin:10px 0 0;padding-left:22px;}
.legal-list li{margin-top:6px;}

/* ---------- Former inline styles (moved here 2 October 2026 so the CSP can drop
   'unsafe-inline' from style-src). Kept last in the file so they win ties, as inline styles did.
   Never add style="..." to a page again: add a class here instead. ---------- */
.legal-h2{font-size:19px;margin-bottom:10px;}
.u-underline{text-decoration:underline;}
.mt-12{margin-top:12px;}
.btn-back{padding:10px 20px;font-size:14px;}
.btn-header{padding:10px 18px;font-size:13.5px;}
.legal-footer-inner{padding-top:24px;padding-bottom:24px;font-size:13px;color:var(--text-soft);}
.legal-address{font-style:normal;margin-top:8px;line-height:1.6;}
.legal-header-inner{display:flex;align-items:center;justify-content:space-between;height:74px;}
.legal-footer{border-top:1px solid var(--line);}
.legal-header{border-bottom:1px solid var(--line);}
.w-full{width:100%;}
.legal-main{max-width:760px;}
.sitemap-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:17px;}
.legal-h1{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:8px;}
.sitemap-group-label{font-size:16px;color:var(--text-soft);margin-bottom:12px;}
.legal-body{display:flex;flex-direction:column;gap:32px;font-size:16px;line-height:1.7;}
.header-actions{display:flex;align-items:center;gap:12px;}
.legal-updated{color:var(--text-soft);font-size:14px;margin-bottom:40px;}
.text-muted-2{color:var(--muted-2);}
.chapter-full{min-height:100vh;}
.chapter-70{min-height:70vh;}
.narrow-640{max-width:640px;}
.testi-intro{max-width:60ch;font-size:14.5px;color:var(--muted);margin-bottom:32px;}
.notfound-lede{margin-top:16px;max-width:52ch;font-size:16px;line-height:1.65;color:var(--muted);}
.gap-32{gap:32px;}
.notfound-h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;max-width:16ch;}
.sitemap-h1{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:32px;}
.testi-h1{font-size:clamp(1.6rem,2.8vw,2.1rem);max-width:22ch;margin-bottom:10px;}
.label-small{font-size:12.5px;color:var(--muted);letter-spacing:0.03em;margin-bottom:6px;}
.label-small-10{font-size:12.5px;color:var(--muted);letter-spacing:0.03em;margin-bottom:10px;}
.cta-row-center{display:flex;justify-content:center;margin-top:36px;}
.notfound-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.stack-32{display:flex;flex-direction:column;gap:32px;}