/* ═══════════════════════════════════════════════════════════
   site.css — the shared system: reset, tokens, base type,
   buttons, header, breadcrumb, footer, panels, motion.

   The "modern" skin (Oct 2026, mockups/home-alts/modern.html):
   one family set large and tight, pill controls, a frosted
   full-width ink bar, light heroes, and dark/brass/navy grounds
   set as rounded panels inset from the viewport edge. Palette
   unchanged from mockup4 — ink, navy, brass — and the logo's
   own navy and gold are never altered.
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--stick)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ─── Tokens ────────────────────────────────────────────── */
:root{
  --ink:#0B1E2D;
  --ink-2:#12293B;
  --navy:#0E4A70;
  --brand-navy:#005B8D;
  --brand-gold:#FDC73A;
  --brass:#D9AB36;
  --brass-lo:#BC9124;
  --body:#1E3547;
  --slate:#566B7C;
  --paper:#EEF2F5;
  --line:#D6DEE3;
  --line-dk:rgba(255,255,255,.13);
  /* Text on ink. #A8BDCC is 8.74:1 there; the lighter one is for headings' neighbours. */
  --on-ink:#A8BDCC;
  --on-ink-hi:#D7E3EB;

  /* Lede colour, re-pointed by any ink ground — see the note by .lede. */
  --lede:var(--slate);

  /* One family. The mono face is still self-hosted (fonts.css) but nothing in this
     skin reaches for it: small labels are set in the text face, in sentence case. */
  --sans:"Archivo",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:var(--sans);

  --wrap:1240px;
  --gut:clamp(16px,4vw,44px);
  --pad:clamp(64px,8vw,128px);
  --pad-sm:clamp(44px,5.5vw,76px);

  /* Shape. Radius encodes scale: panels are the largest, controls are pills. */
  --r-xl:clamp(24px,2.8vw,40px);
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --pill:999px;
  /* How far a rounded panel sits in from the viewport edge, and from its neighbour. */
  --inset:clamp(8px,1vw,14px);
  --ease:cubic-bezier(.2,.7,.1,1);

  /* ⚠ The header is sticky, so its height is not only the header's business:
     scroll-padding and every sticky rail have to clear it. Change --hdr-h and the
     whole system follows. */
  --hdr-h:76px;
  --hdr-logo:58px;   /* 9px clear of the bar's top and bottom */
  --stick:calc(var(--hdr-h) + 24px);
}
@media (max-width:1000px){
  :root{--hdr-h:64px;--hdr-logo:48px}   /* 8px clear of the bar's top and bottom */
}

/* ─── Base ──────────────────────────────────────────────── */
body{
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--pad)}
.sect--white{background:#fff}
.sect--tight{padding-block:var(--pad-sm)}

h1,h2,h3{color:var(--ink);font-weight:750;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.048em;line-height:.98}
h2{font-size:clamp(1.85rem,3.7vw,3.1rem)}
h3{font-size:1.125rem;font-weight:650;letter-spacing:-.015em;line-height:1.28}
.lede{font-size:clamp(1.06rem,1.4vw,1.25rem);line-height:1.55;color:var(--lede);max-width:56ch}
/* ⚠ A lede takes its colour from its GROUND, and --slate is the light-ground value.
   On ink it measures 3.06:1 — under AA. A token, so it inherits: a lede nested
   anywhere inside a dark panel picks up the ink value. Heroes are light in this
   skin, so only the dark panels re-point it. */
.sect--dark,.vfeat{--lede:var(--on-ink)}

/* Heading accent — the live accent span, recoloured to the system. */
.accent{color:var(--navy)}
.sect--dark .accent,.vfeat .accent{color:var(--brass)}

/* Prose body */
.copy p+p{margin-top:16px}
h2+.copy{margin-top:22px}
.copy a{color:var(--navy);text-decoration-color:var(--brass);text-underline-offset:3px}
.copy a:hover{color:var(--brass-lo)}
.copy{max-width:62ch}

/* Two light sections in a row share one gap rather than stacking their padding. */
/* Panels (.sect--dark, .sect--panel) keep their own padding on both sides. */
.sect:not(.sect--dark):not(.sect--panel)+.sect:not(.sect--dark):not(.sect--panel){padding-top:0}

/* ─── Panels ────────────────────────────────────────────────
   Every non-white ground is a rounded panel inset from the viewport: ink for the
   dark sections, navy for the video feature, brass for the quote band. Vertical
   margins collapse between siblings, so two panels in a row sit one inset apart. */
.sect--dark,.band,.vfeat,.photoband{
  margin:var(--inset);border-radius:var(--r-xl);overflow:hidden;
}
.sect--dark{background:var(--ink);color:#fff}
.sect--dark h2,.sect--dark h3{color:#fff}
.sect--dark .copy{color:var(--on-ink)}
.sect--dark .copy a{color:var(--on-ink-hi)}

/* ─── Section index ─────────────────────────────────────────
   The old skin's mono "document spine" number. The macro now emits nothing; the
   rule stays so a stale build is harmless. */
.sechead{display:none}

/* ─── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--pill);border:0;
  font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn--primary{background:var(--brass);color:var(--ink)}
.btn--primary:hover{background:var(--brass-lo)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--navy)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.sect--dark .btn--ghost,.vfeat .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.sect--dark .btn--ghost:hover,.vfeat .btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.9375rem}
.acts{display:flex;flex-wrap:wrap;gap:12px}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--brass);outline-offset:3px;border-radius:8px;
}
.btn:focus-visible{border-radius:var(--pill)}
.skip{
  position:fixed;left:16px;top:-64px;z-index:100;
  background:var(--brass);color:var(--ink);font-weight:600;font-size:.9375rem;
  padding:10px 18px;border-radius:var(--pill);text-decoration:none;
}
.skip:focus{top:16px}

/* ─── Header — a frosted full-width ink bar ─────────────────
   The live header is white with the two-tone lockup; this one is ink, so it takes
   the all-white lockup (footer-logo-1.webp). */
.hdr{
  position:sticky;top:0;z-index:50;color:#fff;
  background:rgba(11,30,45,.9);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.hdr__in{display:flex;align-items:center;gap:20px;height:var(--hdr-h)}
.hdr__logo{display:block;flex:none}
.hdr__logo img{height:var(--hdr-logo);width:auto}
.hdr__menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav{display:flex;gap:2px}
.nav a{
  display:block;padding:10px 14px;border-radius:8px;
  font-size:.9375rem;font-weight:500;text-decoration:none;color:rgba(255,255,255,.86);
  transition:background-color .16s,color .16s;
}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.hdr__tel{
  margin-left:14px;padding:6px 4px 6px 22px;border-left:1px solid rgba(255,255,255,.18);
  font-size:1.0625rem;font-weight:650;letter-spacing:-.01em;
  text-decoration:none;color:#fff;white-space:nowrap;transition:color .16s;
}
.hdr__tel:hover{color:var(--brass)}
.hdr__cta{margin-left:10px}
.hdr__burger{
  display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:var(--pill);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;place-items:center;
}
.ic-close{display:none}
.hdr.open .ic-burger{display:none}
.hdr.open .ic-close{display:block}

/* ─── Light heroes ──────────────────────────────────────────
   Every page opens on paper under the ink bar, closed by rounded corners: the
   document header here, and the photo heroes in their own sheets. */
.dochead,.lf-hero,.cs-hero,.hm-hero{
  background:var(--paper);color:var(--ink);
  border-radius:0 0 var(--r-xl) var(--r-xl);
}

/* ─── Breadcrumb ────────────────────────────────────────── */
.crumb{font-size:.875rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:4px 10px}
.crumb a{text-decoration:none;color:var(--slate);transition:color .16s}
.crumb a:hover{color:var(--navy)}
.crumb li:not(:last-child)::after{content:"/";margin-left:10px;color:#9BAAB6}
.crumb [aria-current]{color:var(--ink);font-weight:600}

/* ─── Document header ───────────────────────────────────────
   The paper banner under the site header: trail, h1, optional lede and CTA.
   Worn by the listing, article, index, hub and form designs. The component owns
   the RHYTHM; each design still owns its own MEASURE. Heroes that carry
   photography — .lf-hero, .cs-hero, .hm-hero — are a different object. */
.dochead{padding-block:clamp(30px,4vw,48px) clamp(48px,6vw,84px)}
.dochead h1{margin-top:clamp(22px,3vw,34px)}
.dochead .lede{margin-top:22px;max-width:60ch}
.dochead .acts{margin-top:30px}

/* ─── Footer ────────────────────────────────────────────── */
.ftr{background:var(--ink);color:var(--on-ink-hi);padding-block:clamp(56px,7vw,96px) 0;margin-top:var(--inset)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,48px)}
.ftr__logo{height:68px;width:auto;margin-bottom:28px}
.ftr h4{font-size:.9375rem;font-weight:650;letter-spacing:-.01em;color:#fff;margin-bottom:16px}
.ftr li{margin-bottom:10px;font-size:.9375rem}
.ftr a{text-decoration:none;transition:color .16s}
.ftr a:hover{color:var(--brass)}
.ftr address{font-style:normal;font-size:.9375rem;line-height:1.65;color:var(--on-ink);margin-bottom:20px}
.ftr address b{display:block;color:#fff;font-weight:600;margin-bottom:3px}
/* Contact details and the social link sit above the addresses, as they do live */
.ftr__contact{margin-bottom:16px}
.ftr__contact li{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:700;letter-spacing:-.025em;color:#fff;margin-bottom:6px}
.ftr__social{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:26px;border-radius:var(--pill);
  background:rgba(255,255,255,.08);color:var(--on-ink-hi);
  transition:color .16s,background-color .16s;
}
.ftr__social:hover{color:var(--ink);background:var(--brass)}
.ftr__bot{
  margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line-dk);
  padding-block:24px 30px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;
  font-size:.8125rem;color:#6E8798;line-height:1.7;
}
.ftr__credit a{text-decoration:underline;text-decoration-color:var(--line-dk);text-underline-offset:3px}
/* The official British Assessment Bureau marks, unaltered — a certification mark is
   not ours to restyle. White badge boxes read cleanly on the ink ground. */
.ftr__iso{height:46px;width:auto;margin-left:auto}

/* ─── Approach ledger ───────────────────────────────────────
   Icon boxes that carry body copy, set as numbered rows on ink. Shared: the case
   studies use it for Our Approach, long-form for its process and reasons-to-choose. */
.approach__lead{max-width:62ch}
.approach__lead .copy{color:var(--on-ink)}
.approach-steps{margin-top:clamp(34px,4.5vw,54px);border-top:1px solid var(--line-dk)}
.approach-steps--lead{margin-top:0}
.approach__lead--after{margin-top:clamp(34px,4.5vw,54px)}
.approach__lead--after+.acts{margin-top:28px}
.approach-step{
  display:grid;grid-template-columns:72px minmax(0,1fr);
  gap:clamp(16px,3vw,32px);align-items:start;
  padding-block:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--line-dk);
}
.approach-step__n{
  font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--brass);
}
.approach-step h3{color:#fff;font-size:1.25rem;letter-spacing:-.02em}
.approach-step p{margin-top:10px;color:var(--on-ink);max-width:70ch}
/* Reasons, not steps: unnumbered, two up, each opened by a short brass rule. */
.approach-steps--grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(24px,3vw,44px);
  border-top:0;
}
.approach-steps--grid .approach-step{display:block;padding:22px 0 0;border-bottom:0;border-top:2px solid var(--brass)}
@media (max-width:760px){.approach-steps--grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .approach-step{grid-template-columns:1fr;gap:8px}
  .approach-step__n{font-size:2rem}
}

/* ─── Client logo band ──────────────────────────────────── */
.logos-band{background:#fff}
/* A grid, not a flex row: seven logos wrapping "space-between" strands the last
   one alone on its own line. */
.logos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  align-items:center;gap:clamp(20px,3vw,48px);
}
.logos li{display:flex;align-items:center;justify-content:center}
.logos img{max-height:44px;width:auto;opacity:.6;
  filter:grayscale(1);transition:opacity .18s ease,filter .18s ease}
.logos li:hover img{opacity:1;filter:none}

/* The marquee site.js builds from that row: two copies side by side, sliding one
   copy's width, faded out at both edges. Pauses under the pointer. */
.logos-band.is-marquee{overflow:hidden}
.is-marquee .wrap{max-width:none;padding-inline:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos-track{display:flex;width:max-content;animation:logos-marquee 40s linear infinite}
.is-marquee:hover .logos-track{animation-play-state:paused}
.is-marquee .logos{display:flex;flex:none;gap:clamp(48px,6vw,96px);padding-right:clamp(48px,6vw,96px)}
.is-marquee .logos img{max-width:150px}
@keyframes logos-marquee{to{transform:translateX(-50%)}}

/* ─── Quote CTA band ────────────────────────────────────── */
/* The brass panel that closes a long-form page, and that every blog post carries as
   template chrome. Long-form's numbered-steps variant stays in longform.css. */
.band{background:var(--brass);color:var(--ink);padding-block:clamp(48px,6vw,88px)}
.band h2{max-width:22ch;color:var(--ink)}
.band .copy{margin-top:18px;color:var(--ink);max-width:56ch;font-size:1.0625rem}
.band .copy a{color:var(--ink);text-decoration-color:var(--ink)}
.band .acts{margin-top:30px}
.band .btn--primary{background:var(--ink);color:#fff}
.band .btn--primary:hover{background:var(--navy)}
.band .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.band a:focus-visible,.band button:focus-visible{outline-color:var(--ink)}

/* ─── Motion ────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
.lf-hero .rise,.art-head .rise,.lst-head .rise{transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}


/* ─── Responsive ────────────────────────────────────────── */
@media (max-width:1100px){
  .hdr__menu{display:none}
  .hdr__burger{display:grid}
  .hdr__cta{margin-left:auto}
  .hdr__cta+.hdr__burger{margin-left:0}
  .hdr.open .hdr__menu{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--ink);border-radius:0 0 var(--r-lg) var(--r-lg);
    padding:8px var(--gut) 24px;box-shadow:0 24px 40px -16px rgba(11,30,45,.5);
  }
  .hdr.open .nav{flex-direction:column;gap:0}
  .hdr.open .nav a{padding:14px 0;border-radius:0;border-bottom:1px solid var(--line-dk);font-size:1.0625rem;background:none}
  .hdr.open .hdr__tel{margin-left:0;padding:18px 0 0;border-left:0}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .ftr__top{grid-template-columns:1fr}
  .ftr__logo{height:56px}
  .ftr__iso{margin-left:0}
}