/* Self-hosted fonts (latin and latin-ext subsets), see build_site.py */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* PPT Group design language: tokens, base, components.
   Mockup build 2026-10-20. Fonts come from Google Fonts here; the production
   site self-hosts the same two families (both OFL) and the PowerPoint template
   embeds them. */


:root{
  color-scheme: light;

  /* Colour: cool and inked. The mark's blue is the only loud thing on the page. */
  --paper:#FFFFFF; --paper-2:#F3F5FA; --paper-3:#E7EBF4;
  --ink:#000000; --ink-2:#2B2F3A; --ink-3:#5B6170; --ink-4:#8A90A0;
  --line:#D9DEE9; --line-soft:#E8EBF2;
  --blue:#3535DE; --blue-deep:#2424A8; --blue-soft:#E8E9FB; --blue-ink:#FFFFFF;
  --pine:#2E5F52; --pine-soft:#E3ECE8;
  --ok:#2E7D4F; --warn:#A87316; --bad:#B3423A;
  --focus:var(--blue);
  --blue-text:var(--blue); --header-bg:rgba(255,255,255,.88); --logo-filter:grayscale(1); --cta-bg:var(--blue); --on-ink:#FFFFFF;

  /* Type: one serif for display, one sans for everything else. */
  --font-display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body:"Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-13:13px; --t-15:15px; --t-17:17px; --t-21:21px; --t-28:28px;
  --t-40:clamp(32px, 3.4vw, 40px); --t-56:clamp(40px, 5vw, 56px); --t-80:clamp(48px, 7.2vw, 84px);
  --lh-body:1.55; --lh-tight:1.08;

  /* Layout and shape */
  --maxw:1200px; --gutter:clamp(16px, 4vw, 48px);
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:104px; --s-7:160px;
  --r-s:6px; --r-m:14px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Dark mode: the cool neutrals inverted, the blue kept for the mark and buttons, a lifted blue for
   text, the CTA band on Blue, deep. Follows the system unless data-theme on <html> says otherwise. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#0E1016; --paper-2:#161A24; --paper-3:#1D2230;
  --ink:#F2F3F8; --ink-2:#D5D9E4; --ink-3:#9AA0B2; --ink-4:#6B7284;
  --line:#262B38; --line-soft:#1E2330;
  --blue-soft:#1A1C4A; --pine-soft:#15302A;
  --blue-text:#9A9DFF; --header-bg:rgba(14,16,22,.88); --logo-filter:grayscale(1) invert(1); --cta-bg:var(--blue-deep); --on-ink:#0E1016; --focus:#9A9DFF;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E1016; --paper-2:#161A24; --paper-3:#1D2230;
  --ink:#F2F3F8; --ink-2:#D5D9E4; --ink-3:#9AA0B2; --ink-4:#6B7284;
  --line:#262B38; --line-soft:#1E2330;
  --blue-soft:#1A1C4A; --pine-soft:#15302A;
  --blue-text:#9A9DFF; --header-bg:rgba(14,16,22,.88); --logo-filter:grayscale(1) invert(1); --cta-bg:var(--blue-deep); --on-ink:#0E1016; --focus:#9A9DFF;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font:400 var(--t-17)/var(--lh-body) var(--font-body);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:var(--blue-text); text-decoration:none; text-underline-offset:.18em}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:400; letter-spacing:-.01em}
h1,h2,.display{font-family:var(--font-display); line-height:var(--lh-tight)}
h1{font-size:var(--t-80)}
h2{font-size:var(--t-56)}
h3{font-family:var(--font-display); font-size:var(--t-28); line-height:1.2}
h4{font-family:var(--font-body); font-size:var(--t-17); font-weight:600}
p{margin:0}
.lede{font-size:var(--t-21); line-height:1.45; color:var(--ink-2); max-width:34em}
.small{font-size:var(--t-15); color:var(--ink-3)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.measure{max-width:38em}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:20; background:var(--header-bg); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line-soft)}
.site-header .wrap{display:flex; align-items:center; gap:var(--s-4); height:72px}
.logo{display:flex; align-items:center; gap:14px; color:var(--ink); white-space:nowrap}
.logo:hover{text-decoration:none}
.logo svg{width:36px; height:36px; color:var(--blue); flex:none}
.logo .rule{width:1px; height:30px; background:var(--ink)}
.logo .word{font-family:var(--font-display); font-size:22px; line-height:1; letter-spacing:-.005em}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav a{color:var(--ink-2); font-size:var(--t-15); font-weight:500; padding:8px 12px; border-radius:var(--r-s)}
.nav a:hover{background:var(--paper-2); text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--blue); border-radius:0}
.nav .btn{margin-left:12px}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--r-s); padding:8px 12px; font:inherit; font-size:var(--t-15)}
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav{display:none; position:absolute; left:0; right:0; top:72px; background:var(--paper); border-bottom:1px solid var(--line); padding:12px var(--gutter) 20px; flex-direction:column; align-items:stretch}
  .nav.open{display:flex}
  .nav a{padding:12px 8px; font-size:var(--t-17)}
  .nav .btn{margin:12px 0 0}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:var(--r-s); font:500 var(--t-15)/1 var(--font-body); border:1px solid transparent; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue); color:var(--blue-ink)}
.btn-primary:hover{background:var(--blue-deep)}
.btn-quiet{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-quiet:hover{border-color:var(--ink)}
.btn-lg{padding:16px 26px; font-size:var(--t-17)}
.on-blue .btn-primary{background:var(--paper); color:var(--blue)}
.on-blue .btn-primary:hover{background:var(--blue-soft)}
.on-blue .btn-quiet{color:#fff; border-color:rgba(255,255,255,.45)}
.on-blue .btn-quiet:hover{border-color:#fff}

/* ---------- Sections ---------- */
.section{padding:var(--s-6) 0}
.section.tight{padding:var(--s-5) 0}
.section.tinted{background:var(--paper-2)}
.section-head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-4); align-items:end; margin-bottom:var(--s-5)}
.section-head h2{font-size:var(--t-56)}
.section-head p{font-size:var(--t-21); line-height:1.45; max-width:30em}
@media (max-width:800px){.section-head{grid-template-columns:1fr; gap:var(--s-2)}}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:var(--s-5) 0 0}
.hero .eyebrow{font-size:var(--t-15); font-weight:500; color:var(--blue-text); letter-spacing:.02em; margin-bottom:var(--s-2)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s-4); align-items:center}
.hero h1{max-width:11em; font-size:clamp(40px, 4.6vw, 66px); text-wrap:balance}
.hero .lede{margin-top:var(--s-2)}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-3)}
.hero-mark{position:relative; justify-self:end; width:min(100%, 400px); aspect-ratio:1; color:var(--blue)}
.hero-mark svg{width:100%; height:100%; overflow:visible}
.hero-mark path{stroke-dasharray:1 1; stroke-dashoffset:1; animation:draw 1.1s var(--ease) forwards}
.hero-mark path:nth-child(2){animation-delay:.18s}
.hero-mark path:nth-child(3){animation-delay:.36s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.hero-mark path{animation:none; stroke-dashoffset:0}}
@media (max-width:900px){
  .hero{padding-top:var(--s-4)}
  .hero .wrap{grid-template-columns:1fr; gap:var(--s-3)}
  .hero-mark{display:none}
  .clients{margin-top:var(--s-3)}
  .clients .wrap{gap:var(--s-1) var(--s-3)}
  .clients span{font-size:var(--t-21)}
  .clients img{max-height:32px; max-width:96px}
}

/* Client row: names set in type until the logo files arrive. */
.clients{margin-top:var(--s-4); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:var(--s-3) 0}
.clients .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-3)}
.clients .label{font-size:var(--t-15); color:var(--ink-3); margin-right:var(--s-2)}
.clients span{font-family:var(--font-display); font-size:var(--t-28, 28px); color:var(--ink-2); letter-spacing:.005em}
.clients img{height:auto; width:auto; max-height:44px; max-width:140px; filter:var(--logo-filter); opacity:.78; align-self:center}

/* ---------- Services: a ruled list, not a card grid ---------- */
.services{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s-4); border-top:1px solid var(--line)}
.services > div{padding:var(--s-3) 0; border-bottom:1px solid var(--line)}
.services h3{font-size:var(--t-28); margin-bottom:8px}
.services h3 a{color:inherit}
.services p{color:var(--ink-3); font-size:var(--t-15); max-width:26em}
@media (max-width:900px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.services{grid-template-columns:1fr}}

/* ---------- Proof: three results, told as results ---------- */
.proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4)}
.proof article{display:flex; flex-direction:column; gap:12px; padding-top:var(--s-3); border-top:2px solid var(--ink)}
.proof .client{font-weight:600; font-size:var(--t-15); color:var(--ink)}
.proof .result{font-family:var(--font-display); font-size:var(--t-40); line-height:1.05; color:var(--ink)}
.proof p{color:var(--ink-3); font-size:var(--t-15)}
.proof a{margin-top:auto; font-size:var(--t-15); font-weight:500}
@media (max-width:800px){.proof{grid-template-columns:1fr}}

/* ---------- Approach: three steps, which is a sequence, so they are numbered ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4)}
.steps li{list-style:none; counter-increment:step; padding-top:var(--s-3); border-top:1px solid var(--line)}
.steps li::before{content:counter(step); display:block; font-family:var(--font-display); font-size:var(--t-56); line-height:1; color:var(--blue-text); margin-bottom:var(--s-2)}
.steps h3{font-size:var(--t-28); margin-bottom:10px}
.steps p{color:var(--ink-3); font-size:var(--t-15)}
.steps{margin:0; padding:0}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* ---------- The journey band: blue, bending to green ---------- */
.journey-band{background:linear-gradient(100deg, var(--blue-deep) 0%, var(--blue) 42%, var(--pine) 100%); color:#fff; padding:var(--s-6) 0}
.journey-band .wrap{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--s-5); align-items:center}
.journey-band h2{color:#fff}
.journey-band p{color:rgba(255,255,255,.82); font-size:var(--t-21); line-height:1.45; max-width:30em; margin-top:var(--s-3)}
.journey-band .actions{margin-top:var(--s-4)}
.journey-band figure{margin:0; border-radius:var(--r-m); overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.28)}
.journey-band figure img{width:100%; aspect-ratio:3/2; object-fit:cover}
@media (max-width:900px){.journey-band .wrap{grid-template-columns:1fr}}

/* ---------- Timeline (journey page) ---------- */
.timeline{position:relative; margin:0; padding:0; list-style:none; border-left:2px solid var(--line)}
.timeline li{position:relative; padding:0 0 var(--s-5) var(--s-5)}
.timeline li::before{content:""; position:absolute; left:-9px; top:10px; width:16px; height:16px; border-radius:50%; background:var(--paper); border:3px solid var(--blue)}
.timeline li.now::before{border-color:var(--pine); background:var(--pine)}
.timeline .year{font-family:var(--font-display); font-size:var(--t-28); color:var(--blue-text); line-height:1; margin-bottom:10px}
.timeline li.now .year{color:var(--pine)}
.timeline h3{font-size:var(--t-40); margin-bottom:12px; max-width:16em}
.timeline p{max-width:38em}
.timeline p + p{margin-top:12px}

/* ---------- Press ---------- */
.press{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.press li{display:grid; grid-template-columns:120px minmax(0,1fr) 180px; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); align-items:baseline}
.press time{font-size:var(--t-15); color:var(--ink-3)}
.press .title{font-family:var(--font-display); font-size:var(--t-28); line-height:1.15; color:var(--ink)}
.press .pub{font-size:var(--t-15); color:var(--ink-3); text-align:right}
@media (max-width:700px){.press li{grid-template-columns:1fr; gap:6px}.press .pub{text-align:left}}

/* ---------- People ---------- */
.people{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4)}
.people figure{margin:0}
.people img.portrait{object-fit:cover; object-position:50% 25%; width:100%; height:auto; filter:grayscale(1)}
.people .portrait{aspect-ratio:1; background:var(--paper-3); border-radius:var(--r-m); display:grid; place-items:center; font-family:var(--font-display); font-size:var(--t-56); color:var(--ink-4); position:relative; overflow:hidden}
.people div.portrait::after{content:"Photo to come"; position:absolute; bottom:12px; left:14px; font:400 var(--t-13)/1 var(--font-body); color:var(--ink-4)}
.people figcaption{margin-top:var(--s-2)}
.people .name{font-size:var(--t-21); color:var(--ink); font-weight:500}
.people .role{color:var(--ink-3); font-size:var(--t-15)}
.people .bio{margin-top:10px; font-size:var(--t-15); color:var(--ink-3)}
@media (max-width:800px){.people{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.people{grid-template-columns:1fr}}

/* ---------- Values ---------- */
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4) var(--s-4); margin:0; padding:0; list-style:none}
.values li{padding-top:var(--s-2); border-top:1px solid var(--line)}
.values h4{margin-bottom:6px}
.values p{color:var(--ink-3); font-size:var(--t-15)}
@media (max-width:800px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* ---------- Case list ---------- */
.cases{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.cases li{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr); gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line)}
.cases .who h3{font-size:var(--t-28)}
.cases .who p{color:var(--ink-3); font-size:var(--t-15); margin-top:4px}
.cases .what{font-size:var(--t-15); color:var(--ink-2)}
.cases .what p + p{margin-top:8px}
.cases .outcome{font-family:var(--font-display); font-size:var(--t-28); line-height:1.15; color:var(--ink)}
@media (max-width:800px){.cases li{grid-template-columns:1fr; gap:var(--s-2)}}

/* ---------- CTA band ---------- */
.cta{background:var(--cta-bg); color:#fff; padding:var(--s-6) 0}
.cta .wrap{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s-4); align-items:center}
.cta h2{color:#fff; max-width:11em}
.cta p{color:rgba(255,255,255,.82); font-size:var(--t-21); margin-top:var(--s-2); max-width:28em}
.cta .actions{display:flex; flex-wrap:wrap; gap:12px; justify-self:end}
@media (max-width:800px){.cta .wrap{grid-template-columns:1fr}.cta .actions{justify-self:start}}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-5)}
.contact-ways{display:grid; gap:var(--s-3)}
.contact-ways a.way{display:block; padding:var(--s-3) 0; border-top:1px solid var(--line); color:inherit}
.contact-ways a.way:hover{text-decoration:none}
.contact-ways a.way:hover .big{color:var(--blue)}
.contact-ways .big{font-family:var(--font-display); font-size:var(--t-28); color:var(--ink); transition:color .18s}
.contact-ways .small{display:block; margin-top:4px}
form.enquiry{display:grid; gap:var(--s-3)}
form.enquiry label{display:grid; gap:8px; font-size:var(--t-15); font-weight:500; color:var(--ink)}
form.enquiry input, form.enquiry textarea, form.enquiry select{font:400 var(--t-17)/1.4 var(--font-body); padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--paper); color:var(--ink)}
form.enquiry input:focus, form.enquiry textarea:focus{outline:2px solid var(--blue); outline-offset:0; border-color:var(--blue)}
form.enquiry .row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
form.enquiry .consent{display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--ink-3)}
form.enquiry .consent input{margin-top:4px}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}form.enquiry .row{grid-template-columns:1fr}}

/* ---------- Page intro (inner pages) ---------- */
.page-intro{padding:var(--s-6) 0 var(--s-5)}
.page-intro h1{font-size:var(--t-80); max-width:10em; text-wrap:balance}
.page-intro .lede{margin-top:var(--s-3)}

/* ---------- Prose ---------- */
.prose{max-width:38em}
.prose p + p{margin-top:var(--s-2)}
.prose h3{margin-top:var(--s-4); margin-bottom:var(--s-2)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:var(--s-5) 0 var(--s-4); color:var(--ink-3); font-size:var(--t-15)}
.site-footer .wrap{display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)); gap:var(--s-4)}
.site-footer h4{color:var(--ink); margin-bottom:10px; font-size:var(--t-15)}
.site-footer ul{margin:0; padding:0; list-style:none; display:grid; gap:6px}
.site-footer a{color:var(--ink-3)}
.site-footer a:hover{color:var(--ink)}
.site-footer .legal{grid-column:1/-1; margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); font-size:var(--t-13)}
@media (max-width:800px){.site-footer .wrap{grid-template-columns:1fr 1fr}}

/* ---------- Floating WhatsApp ---------- */
.wa{position:fixed; right:20px; bottom:20px; z-index:30; display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--on-ink); padding:12px 16px; border-radius:var(--r-pill); font-size:var(--t-15); font-weight:500; box-shadow:0 10px 24px rgba(0,0,0,.18)}
.wa:hover{text-decoration:none; background:var(--blue)}
.wa svg{width:18px; height:18px}
@media (max-width:600px){.wa span{display:none}.wa{padding:14px}}

/* ---------- Mockup notice ---------- */
.mock-note{background:var(--ink); color:var(--on-ink); font-size:var(--t-13); padding:8px 0}
.mock-note .wrap{display:flex; flex-wrap:wrap; gap:6px 24px}
.mock-note a{color:var(--on-ink); text-decoration:underline}
.mock-note .theme{margin-left:auto; display:inline-flex; gap:4px; align-items:center}
.mock-note .theme button{font:inherit; color:var(--on-ink); background:transparent; border:1px solid rgba(128,128,128,.5); border-radius:var(--r-s); padding:2px 8px; cursor:pointer}
.mock-note .theme button[aria-pressed="true"]{background:var(--on-ink); color:var(--ink)}

/* Long-form pages (privacy notice) */
.prose h2{font-size:var(--t-28); margin:var(--s-4) 0 var(--s-1)}
.prose h2:first-child{margin-top:0}