/* Kinetic Control — design system. Brand tokens in :root.
   Fonts self-hosted via fonts.css (Poppins 600/700 headings + Inter body) —
   no third-party font requests.

   CONTRAST: every text/background pairing below was computed with the WCAG
   relative-luminance formula (see LAYOUT.md), not eyeballed. The raw brand
   accents (--teal #0F9B97, --orange #E04A28) both FAIL 4.5:1 with white text
   (3.41:1 / 4.05:1) — a mid-tone accent with white text is exactly the trap
   LAYOUT.md warns about. Two darker "-ink" variants were computed to pass
   4.5:1 with white text (--teal-ink 5.17:1, --orange-ink 4.98:1) and are used
   anywhere white text sits on an accent background or an accent colour is
   used as body-sized text on a light surface. The raw accents stay usable as
   BACKGROUNDS behind --ink text (ink-on-teal = 4.93:1) or for large text/
   UI-only elements (>=3:1), never as small text or white-on-accent.
   A THIRD variant, --teal-light (lightened teal, >=5.5:1 against the dark
   hero gradient), is for small/normal-size teal text used ON that dark
   surface — raw --teal there only clears ~3.8:1 against the gradient's
   lighter stop, which fails 4.5:1 for anything below WCAG's large-text
   size/weight threshold. Caught by computing contrast against the RENDERED
   DOM's getComputedStyle, not the token sheet — a `background:
   linear-gradient(...)` band doesn't expose as `backgroundColor` either.
   Same rendered-DOM sweep also caught the "-ink" text colours running
   against their own "-soft" tint panels (route-card tags, the active nav
   pill): --orange-ink on the original --orange-soft only cleared 4.28:1.
   Both -soft tints were lightened (teal-ink/teal-soft now 4.88:1,
   orange-ink/orange-soft now 4.70:1) rather than darkening the ink colours,
   so the buttons that also use those inks keep their existing (larger)
   margins unaffected. */
:root{
  --ink:#11201D; --body:#35443F; --muted:#5B6C65;
  --teal:#0F9B97; --teal-ink:#0C7A76; --teal-light:#57B9B6; --teal-soft:#F2FAF9;
  --orange:#E04A28; --orange-ink:#C93F22; --orange-soft:#FEF7F5;
  --bg:#F6FAF9; --card:#FFFFFF; --line:#DCE8E6;
  --radius:14px; --shadow:0 10px 30px rgba(17,32,29,.10);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--body);background:var(--bg)}
img,svg{max-width:100%;display:block}
a{color:var(--teal-ink);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(min-width:1600px){.wrap{max-width:1400px}}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);line-height:1.15;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.1rem;font-weight:600}
p+p{margin-top:1em}
ul,ol{list-style:none}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);display:block;margin-bottom:.6rem}

/* ---------- a11y helpers ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-family:var(--font-display);font-weight:600}
.skip-link:focus{left:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- top bar + nav ---------- */
.topbar{background:var(--ink);color:#C8DAD5;font-size:.85rem;padding:.45rem 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.8rem;padding-bottom:.8rem;position:relative}
/* Logo = the official Set A mark on its own (it already carries the wordmark). */
.logo{display:flex;align-items:center;line-height:0}
/* 48px is the brand guide's minimum for a SQUARE logo (the wide horizontal
   lockups most brands use have a 120px floor; a square carries far less text,
   so it survives much smaller). Rendered checks confirm the two-line wordmark
   is still legible at 48. Don't drop below it — use the kit's appicon instead. */
.logo .logo-mark{width:58px;height:58px;border-radius:6px;flex:0 0 auto}
@media(max-width:520px){.logo .logo-mark{width:48px;height:48px}}
nav.main{display:flex;gap:.2rem;align-items:center}
nav.main a{font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;padding:.55rem .6rem;border-radius:8px;white-space:nowrap;color:var(--body)}
nav.main a:hover{background:var(--bg);color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--teal-ink);background:var(--teal-soft)}

/* mobile menu toggle (hidden on desktop) */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.55rem;border-radius:8px;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;margin:4.5px 0;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:920px){
  .nav-toggle{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(17,32,29,.14);flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 .6rem}
  nav.main.open{display:flex}
  nav.main a{font-size:.95rem;padding:.85rem 32px;border-radius:0;border-top:1px solid var(--bg);text-align:left}
  header.site .head-cta{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:.86rem;letter-spacing:.03em;text-transform:uppercase;padding:.8rem 1.5rem;border-radius:10px;border:1.5px solid transparent;cursor:pointer;text-align:center;background:transparent}
.btn:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.65;cursor:wait;transform:none}
/* ink text on the raw accents passes AA (teal 4.93:1) — orange raw only
   passes at large-text/UI level (4.15:1), so the orange button uses the
   darker -ink fill with white text instead (4.98:1). */
.btn-teal{background:var(--teal);color:var(--ink)}
.btn-teal:hover{background:var(--teal-ink);color:#fff}
.btn-orange{background:var(--orange-ink);color:#fff}
.btn-orange:hover{background:#AD3419}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-light:hover{background:rgba(255,255,255,.14)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#1E322D}
header.site .btn{padding:.6rem 1.05rem}

/* ---------- hero ----------
   Two columns: headline left, supporting content right, both vertically
   centred. Splitting the stack across two columns is what shortens the hero
   and lifts the pillar row up the page; padding trimmed for the same reason.
   Collapses to one column at 880px, where the natural DOM order (headline →
   lede → CTAs → stats) is already the correct reading order. */
.hero{background:linear-gradient(160deg,var(--ink) 0%,#1E362F 100%);color:#D3E3DE;padding:2.6rem 0 2.8rem}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:2.8rem;align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p.lede{font-size:1.08rem;margin:0 0 1.4rem;max-width:34rem}
.hero .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
/* Equal columns rather than wrapping flex — flex-wrap left an orphan on the
   second row (3 items wrapping 2+1), which read as broken. Grid keeps them
   parallel, then goes to a clean single column on narrow screens.
   NOTE: the figure uses raw --teal at 1.4rem/700 = large text, which clears
   3:1 against the hero gradient's lighter stop (3.79:1). It does NOT clear
   4.5:1, so don't drop this below 18.66px without switching to --teal-light. */
.trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.16)}
.trust-strip div strong{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--teal)}
.trust-strip div span{font-size:.82rem;color:#9DB6AE}
@media(max-width:880px){
  .hero{padding:2.2rem 0 2.4rem}
  .hero .wrap{grid-template-columns:1fr;gap:1.4rem}
  .hero p.lede{margin-bottom:1.2rem}
}
@media(max-width:620px){.trust-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
  .trust-strip div strong{font-size:1.2rem}
  .trust-strip div span{font-size:.74rem}}

/* ---------- sections ---------- */
section.band{padding:3.6rem 0}
section.band.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.8rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.8rem}
@media(max-width:1180px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:grid;grid-template-rows:auto 1fr}
.card h3{margin-bottom:.5rem}
.card p{color:var(--body)}
.card a.more{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--teal-ink)}

/* route cards (Modular / Intensive) */

/* FAQ */
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:.8rem;overflow:hidden}
details.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--ink);padding:1.05rem 1.3rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--teal-ink);font-size:1.3rem;line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq .a{padding:0 1.3rem 1.2rem;color:var(--body)}

/* big CTA band */
.cta-band{background:linear-gradient(150deg,var(--ink),#1E362F);border-radius:18px;color:#D3E3DE;padding:2.6rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin:3.4rem auto}
.cta-band h2{color:#fff;margin-bottom:.4rem}
.cta-band .btns{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- team cards + detail ---------- */
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-align:center}
/* Fixed small size (not full-card-width) — several source photos are low-res;
   scaling this far down makes compression/resolution artifacts read as
   normal thumbnail softness instead of visible pixelation. */
.person-photo{width:112px;height:112px;aspect-ratio:1/1;position:relative;overflow:hidden;border-radius:50%;margin:1.6rem auto 0;box-shadow:var(--shadow)}
.person-avatar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:#fff}
.person-avatar.c0{background:linear-gradient(150deg,var(--teal),#0A5B58)}
.person-avatar.c1{background:linear-gradient(150deg,var(--orange),#9C331C)}
.person-avatar.c2{background:linear-gradient(150deg,#3C4744,#141F1C)}
.person .body{padding:1rem 1.2rem 1.3rem}
.person h3{font-size:1.02rem}
.person .role{display:block;color:var(--teal-ink);font-family:var(--font-display);font-weight:600;font-size:.82rem;margin-top:.25rem}
.person .loc{display:block;color:var(--muted);font-size:.8rem;margin-top:.35rem}
.person-detail-photo{width:160px;max-width:160px;margin:0 auto 1.6rem}
.person-detail-photo .person-avatar{border-radius:50%;font-size:2.6rem}
.person-detail-photo img{border-radius:50%}
/* real photos only — not the gradient avatar fallback, which needs its color */
.person-photo img,.person-detail-photo img{filter:grayscale(100%)}

/* ---------- KCMT course matrix (rebuilt from the client's own diagrams) ----------
   Grouped header rows spanning module columns, exactly like the source charts,
   but as real HTML: sharp at any zoom, indexable, reflows on mobile.
   NOTE ON COLOUR: the source charts put white text on bright teal/orange, which
   fails AA (3.41:1 / 4.05:1). Tiles therefore use the darker -ink variants,
   which carry the same brand read and pass (5.17:1 / 4.98:1). */
/* NOTE: no overflow:hidden here — it clipped the detail popovers against the
   figure's own border (only visible on the intensive chart, which has no side
   panel to pad its height). The caption bar clips itself instead, so its
   corners still follow the container radius. */
.kcmap{margin-top:1.8rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.kcmap+.kcmap{margin-top:1.6rem}
.kcmap-cap{display:flex;align-items:stretch;gap:0;color:#fff;overflow:hidden;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
.kcmap--teal .kcmap-cap{background:var(--teal-ink)}
.kcmap--orange .kcmap-cap{background:var(--orange-ink)}
.kcmap-rail{display:flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;padding:1rem 1.2rem;background:rgba(0,0,0,.16);flex:0 0 auto}
.kcmap-capnote{padding:1rem 1.2rem;font-size:.9rem;line-height:1.5;align-self:center}
.kcmap-body{padding:1.1rem;display:grid;grid-template-columns:1fr 300px;gap:1.1rem;align-items:start}
.kcmap-body--single{grid-template-columns:1fr}
.kcmap-matrix{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:.5rem}
.kcmap-h,.kcmap-s{grid-column:span var(--span);border-radius:8px;padding:.6rem .75rem;font-family:var(--font-display);font-weight:600;text-align:center;line-height:1.25;display:flex;align-items:center;justify-content:center}
.kcmap-h{background:var(--body);color:#fff;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}
.kcmap-s{background:var(--muted);color:#fff;font-size:.74rem}
.kcmap-cell{grid-column:span var(--span);position:relative}
.kcmap-tile{width:100%;height:100%;min-height:104px;border:0;border-radius:8px;cursor:pointer;padding:.85rem .7rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:#fff;font-family:var(--font-display)}
.kcmap--teal .kcmap-tile{background:var(--teal-ink)}
.kcmap--orange .kcmap-tile{background:var(--orange-ink)}
.kcmap-tile:hover{filter:brightness(1.08)}
.kcmap-tile strong{font-size:.9rem;font-weight:600;line-height:1.25}
.kcmap-dur{font-size:.75rem;opacity:.9;font-weight:400}
.kcmap-tile::after{content:"+";position:absolute;top:.4rem;right:.55rem;font-size:.9rem;line-height:1;opacity:.7}
.kcmap-cell.is-open .kcmap-tile::after{content:"–"}
/* detail: in the DOM always (indexable, works with JS off), revealed on
   hover / keyboard focus / tap */
/* Anchored to the cell's leading edge (centring overflowed the container on
   the first column); the last tile flips to trailing so it can't spill right.
   No opacity transition — the reveal must be reliable, not animated. */
.kcmap-pop{position:absolute;z-index:20;left:0;top:calc(100% + .4rem);width:min(280px,78vw);background:var(--ink);color:#E4EFEC;border-radius:10px;padding:.85rem .95rem;font-size:.84rem;line-height:1.5;box-shadow:0 14px 34px rgba(17,32,29,.28);visibility:hidden}
.kcmap-cell:nth-last-child(1) .kcmap-pop,.kcmap-cell:nth-last-child(2) .kcmap-pop{left:auto;right:0}
.kcmap-cell:hover .kcmap-pop,.kcmap-cell:focus-within .kcmap-pop,.kcmap-cell.is-open .kcmap-pop{visibility:visible}
.kcmap-cell.is-open{z-index:30}
@media(hover:none){.kcmap-cell:hover .kcmap-pop{visibility:hidden}
  .kcmap-cell.is-open .kcmap-pop{visibility:visible}}
.kcmap-master{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem}
.kcmap-master h3{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-ink)}
.kcmap-master p{font-size:.85rem;margin-top:.5rem}
.kcmap-master ul{list-style:none;margin-top:.6rem;display:flex;flex-direction:column;gap:.34rem}
.kcmap-master li{font-size:.82rem;line-height:1.4;padding-left:.85rem;position:relative}
.kcmap-master li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:var(--teal-ink)}
.kcmap-master li span{color:var(--muted)}
.kcmap-hint{font-size:.88rem;color:var(--muted)}
.kcmap-foot{margin-top:1.2rem;font-size:.9rem;color:var(--muted);max-width:52rem}
@media(max-width:1080px){
  .kcmap-body{grid-template-columns:1fr}
}
@media(max-width:760px){
  .kcmap-cap{flex-direction:column}
  .kcmap-rail{justify-content:flex-start}
  /* stack the matrix: headers become full-width group labels, tiles full-width,
     and detail sits inline rather than as a floating popover */
  .kcmap-matrix{grid-template-columns:1fr}
  .kcmap-h,.kcmap-s,.kcmap-cell{grid-column:1/-1}
  .kcmap-s{justify-content:flex-start;text-align:left}
  .kcmap-h{justify-content:flex-start;text-align:left}
  .kcmap-tile{min-height:0;flex-direction:row;justify-content:space-between;text-align:left}
  .kcmap-pop{position:static;transform:none;width:auto;visibility:visible;display:none;margin-top:.4rem}
  .kcmap-cell.is-open .kcmap-pop{display:block}
}

/* ---------- three pillars (homepage signpost row) ----------
   Media panels are decorative framing for content stated in the body text, so
   their images carry empty alt and aren't announced twice. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.9rem}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.pillar-media{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:1.1rem}
.pillar-media--dark{background:linear-gradient(150deg,#22322D,#141F1C)}
.pillar-media--teal{background:var(--teal-ink)}
.pillar-media--tint{background:var(--teal-soft)}
.pillar-book{width:auto;height:100%;max-height:150px;border-radius:4px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.pillar-mark{width:88px;height:88px;border-radius:8px}
/* Tutor face marquee. The track holds two identical copies of the team and
   slides exactly -50%, so the seam never shows. Duration scales with roster
   size in the template's inline --n so adding tutors doesn't speed it up.
   Paused on hover/focus-within so a visitor can actually look at a face; the
   sitewide prefers-reduced-motion rule stops it entirely. */
.pillar-media--faces{padding:0;overflow:hidden;position:relative}
.face-marquee{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* Spacing is a trailing margin, NOT flex gap. With `gap`, a duplicated track's
   width is 66w + 65g, so translating -50% lands half a gap short of the loop
   point and the seam visibly jumps (measured: 5.59px every cycle). A trailing
   margin gives every item an identical stride, making -50% exactly one full
   set. */
.face-track{display:flex;width:max-content;animation:face-scroll 60s linear infinite}
.face-track img{width:66px;height:66px;margin-right:.7rem;border-radius:50%;object-fit:cover;border:3px solid #fff;filter:grayscale(100%);flex:0 0 auto}
.pillar-media--faces:hover .face-track,.pillar-media--faces:focus-within .face-track{animation-play-state:paused}
@keyframes face-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pillar-body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.pillar-body h3{font-size:1.02rem;line-height:1.3;margin-top:.1rem}
.pillar-body p{font-size:.92rem;margin-top:.55rem;color:var(--body)}
.pillar-cta{margin-top:auto;padding-top:.9rem}
@media(max-width:1000px){.pillars{grid-template-columns:1fr;gap:1rem}
  .pillar{flex-direction:row}
  .pillar-media{aspect-ratio:auto;flex:0 0 34%;min-height:150px}
  .pillar-book{max-height:120px}}
@media(max-width:560px){.pillar{flex-direction:column}
  .pillar-media{flex:none;aspect-ratio:16/9;min-height:0}}

/* ---------- feature tick list ---------- */
.tick-list{list-style:none;margin-top:.9rem;display:flex;flex-direction:column;gap:.45rem}
.tick-list li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.5}
.tick-list li::before{content:"";position:absolute;left:.1rem;top:.42em;width:.5rem;height:.28rem;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}

/* ---------- audience chips ---------- */
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.chip-list li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.05rem;font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--ink)}

/* ---------- philosophy creed line ---------- */
.creed{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--ink);letter-spacing:-.01em;line-height:1.2;margin-bottom:1.1rem}
.creed span+span{color:var(--teal-ink)}
.creed span+span+span{color:var(--orange-ink)}

/* ---------- book cross-sell band ---------- */
.cta-band--book{align-items:center}
.cta-band--book .book-cover{width:112px;height:auto;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.35);flex:0 0 auto}
@media(max-width:720px){.cta-band--book .book-cover{width:88px}}

/* homepage book feature — cover sits on the tinted band, not a dark panel */
.book-figure{display:flex;justify-content:center}
.book-figure .book-cover-lg{width:100%;max-width:290px;height:auto;border-radius:8px;box-shadow:0 18px 44px rgba(17,32,29,.22)}
@media(max-width:920px){.book-figure .book-cover-lg{max-width:220px}}

/* ---------- third-party map embeds (/map) ----------
   Click-to-load: the .map-consent placeholder is replaced by the iframe only
   when the visitor asks for it, so Zoho sets nothing on page load. */
.map-embed{margin-top:1.6rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;min-height:520px;display:flex}
.map-embed iframe{width:100%;height:620px;border:0;display:block}
.map-consent{margin:auto;text-align:center;padding:2.4rem 1.6rem;max-width:34rem}
.map-consent h3{font-size:1.15rem}
.map-consent p{color:var(--muted);font-size:.92rem;margin:.7rem 0 1.3rem}
@media(max-width:720px){.map-embed{min-height:440px}.map-embed iframe{height:520px}}

/* ---------- research list ---------- */
.research-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1.6rem}
.research-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:10px;padding:1.1rem 1.3rem}
.research-item .ry{font-family:var(--font-display);font-weight:700;color:var(--teal-ink);font-size:.85rem}
.research-item h3{font-size:1rem;margin-top:.25rem;font-weight:600}
.research-item .rs{color:var(--muted);font-size:.88rem;margin-top:.3rem;font-style:italic}
.research-item .ra{color:var(--body);font-size:.9rem;margin-top:.3rem}

/* ---------- contact form ---------- */
form.enquiry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.8rem}
form.enquiry label{display:block;font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink);margin:0 0 .3rem}
form.enquiry input,form.enquiry select,form.enquiry textarea{width:100%;padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:9px;font:inherit;margin-bottom:1rem;background:#fff;color:var(--body)}
form.enquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){form.enquiry .row{grid-template-columns:1fr}}
.form-status{font-size:.9rem;margin-top:.4rem}
.form-status.error{color:var(--orange-ink);font-weight:600}
.form-status.ok{color:var(--teal-ink);font-weight:600}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#A9C0B9;margin-top:0;padding:3rem 0 5.5rem;font-size:.92rem}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:1180px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.site .cols{grid-template-columns:1fr}}
footer.site h3{font-family:var(--font-display);color:#fff;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem}
footer.site a{color:#DCEAE5}
footer.site a:hover{color:var(--teal)}
footer.site li{margin:.35rem 0}
footer.site .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.2rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:#83A198}
.socials{display:flex;gap:.7rem;margin-top:.9rem}
.socials a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center}
.socials a:hover{background:var(--teal);color:var(--ink)}
.socials svg{width:17px;height:17px;fill:currentColor}

/* sticky mobile CTA */
.mobile-cta{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.mobile-cta a{padding:.95rem;text-align:center;font-family:var(--font-display);font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.03em}
.mobile-cta .call{background:var(--ink);color:#fff}
.mobile-cta .enquire{background:var(--teal);color:var(--ink)}
@media(max-width:760px){.mobile-cta{display:grid}body{padding-bottom:0}}

/* page hero (inner pages) */
.page-hero{background:linear-gradient(160deg,var(--ink),#1E362F);color:#C8DAD5;padding:2.8rem 0 2.6rem}
.page-hero h1{color:#fff;max-width:44rem}
.page-hero p{max-width:40rem;margin-top:.8rem;font-size:1.05rem}
.breadcrumb{font-size:.8rem;margin-bottom:1rem;color:#89A69D}
.breadcrumb a{color:#C8DAD5}

.prose h2{margin-top:2rem;font-size:1.3rem}
.prose p{margin-top:.9rem}
.prose ul,.prose ol{list-style:disc;margin:.9rem 0 .9rem 1.4rem}
.prose ol{list-style:decimal}
.prose li{margin:.3rem 0}
.doc-tablewrap{overflow-x:auto;margin-top:1rem}
table.doc-table{width:100%;border-collapse:collapse;min-width:480px}
table.doc-table th,table.doc-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
table.doc-table th{font-family:var(--font-display);background:var(--bg)}
.note{background:var(--teal-soft);border:1.5px solid #BCE3E0;border-radius:10px;padding:1rem 1.2rem;font-size:.92rem;margin-top:1.4rem}

/* cookie consent banner (analytics dormant until a GA4 ID is set) */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--ink);color:#E4F0EC;box-shadow:0 -6px 24px rgba(17,32,29,.25)}
.cookie-banner .wrap{display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem}
.cookie-banner p{font-size:.9rem;margin:0;max-width:62ch}
.cookie-banner .btns{display:flex;gap:.6rem;flex-shrink:0}
.cookie-banner .btn{padding:.5rem 1.1rem;font-size:.82rem}
.cookie-banner .btn-ghost{border:2px solid rgba(255,255,255,.5);color:#fff;background:transparent}
@media(max-width:640px){.cookie-banner .wrap{padding-bottom:4.6rem}}