/* ═══════════════════════════════════════════════════════════
   site.css — the shared system: reset, tokens, base type,
   buttons, header, breadcrumb, footer, motion.
   Extracted verbatim from the signed-off long-form mockup
   (mockups/longform/longform.css), which extends mockup4.
   Every design after long-form builds on this file.
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@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 — mockup4, unchanged ───────────────────────── */
:root{
  --ink:#0B1E2D;
  --ink-2:#12293B;
  --navy:#0E4A70;
  --brand-navy:#005B8D;
  --brand-gold:#FDC73A;
  --brass:#D9AB36;
  --brass-lo:#BC9124;
  --brass-glow:rgba(217,171,54,.22);
  --body:#1E3547;
  --slate:#566B7C;
  --paper:#EEF1F3;
  --line:#D6DEE3;
  --line-dk:rgba(255,255,255,.13);

  --sans:"Archivo",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1180px;
  --gut:clamp(20px,4vw,40px);
  --pad:clamp(56px,7vw,104px);
  --pad-sm:clamp(40px,5vw,68px);
}

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

h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(1.6rem,3vw,2.35rem)}
h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3}
.lede{font-size:clamp(1.03rem,1.4vw,1.1875rem);line-height:1.6;color:var(--slate);max-width:58ch}
.sect--dark .lede,.lf-hero .lede,.lst-head .lede{color:#A8BDCC}

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

/* Prose body */
.copy p+p{margin-top:16px}
/* A heading needs air before its copy. Layouts that set their own gap (.intro,
   .personnel, .place, .band) are more specific and keep theirs. */
h2+.copy{margin-top:20px}
.copy a{color:var(--navy);text-decoration-color:var(--brass);text-underline-offset:3px}
.copy a:hover{color:var(--brass-lo)}
.sect--dark .copy a{color:#D7E3EB}
.copy{max-width:62ch}

/* ─── Document spine ────────────────────────────────────────
   Every section opens on a hairline with its mono index — the
   page as a numbered operations document. Emitted by macros.html's
   sechead(), so it belongs to the system, not to one design. */
.sechead{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.sechead::after{content:"";flex:1;height:1px;background:var(--line)}
.sect--dark .sechead::after,.band .sechead::after{background:var(--line-dk)}
.sechead__n{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;color:var(--brass);
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  padding:14px 26px;border-radius:3px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn--primary{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn--primary:hover{background:var(--brass-lo);border-color:var(--brass-lo)}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line-dk)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass)}
.sect--white .btn--ghost,.sect:not(.sect--dark) .btn--ghost{color:var(--ink);border-color:var(--line)}
.sect--white .btn--ghost:hover{border-color:var(--brass-lo);color:var(--brass-lo)}
.btn--sm{padding:10px 18px;font-size:.875rem}
.acts{display:flex;flex-wrap:wrap;gap:12px}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:2px;
}
.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:3px;text-decoration:none;
}
.skip:focus{top:16px}

/* ─── Header — compact variant of mockup4's chrome ──────── */
.hdr{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line-dk)}
.hdr__in{display:flex;align-items:center;gap:30px;height:72px}
.hdr__logo{display:block;flex:none}
.hdr__logo img{height:40px;width:auto}
.hdr__menu{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav{display:flex;gap:24px}
.nav a{
  font-size:.9375rem;font-weight:500;text-decoration:none;color:#D7E3EB;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .16s,border-color .16s;
}
.nav a:hover{color:#fff;border-bottom-color:var(--brass)}
.hdr__tel{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:-.01em;
  text-decoration:none;color:#fff;white-space:nowrap;
}
.hdr__tel:hover{color:var(--brass)}
.hdr__cta{margin-left:2px}
.hdr__burger{display:none;margin-left:auto;background:none;border:0;padding:8px;color:#fff;cursor:pointer}
.ic-close{display:none}
.hdr.open .ic-burger{display:none}
.hdr.open .ic-close{display:block}

/* ─── Breadcrumb — mono trail at the top of the hero ────── */
.crumb{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:#6E8798;
  display:flex;flex-wrap:wrap;gap:4px 10px;text-transform:uppercase}
.crumb a{text-decoration:none;color:#A8BDCC}
.crumb a:hover{color:var(--brass)}
.crumb li:not(:last-child)::after{content:"/";margin-left:10px;color:#3C566B}
.crumb [aria-current]{color:#fff}

/* ─── Footer — mockup4, unchanged ───────────────────────── */
.ftr{background:var(--ink);color:#D7E3EB;padding-block:clamp(56px,6vw,80px) 0}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,48px)}
.ftr__logo{height:76px;width:auto;margin-bottom:26px}
.ftr h4{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:#6E8798;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:#A8BDCC;margin-bottom:20px}
.ftr address b{display:block;color:#fff;font-weight:500;margin-bottom:3px}
/* Contact details and the social link sit above the addresses, as they do live */
.ftr__contact{margin-bottom:14px}
.ftr__contact li{font-size:1rem;font-weight:500;color:#fff}
.ftr__social{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-bottom:24px;
  border:1px solid var(--line-dk);border-radius:3px;color:#A8BDCC;
  transition:color .16s,border-color .16s;
}
.ftr__social:hover{color:var(--brass);border-color: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-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:#6E8798;line-height:1.7;
}
.ftr__credit a{text-decoration-color:var(--line-dk);text-underline-offset:3px}
/* The official British Assessment Bureau marks, unaltered — the mockup used a
   recoloured copy from the design pool, and a certification mark is not ours to
   restyle. White badge boxes read cleanly on the ink ground without a filter. */
.ftr__iso{height:46px;width:auto;margin-left:auto}

/* ─── Approach ledger ───────────────────────────────────────
   Icon boxes that carry body copy, set as numbered hairline rows
   on ink. Shared: the case studies use it for Our Approach, the
   homepage for its process and its reasons-to-choose. */
.approach__lead{max-width:62ch}
.approach__lead .copy{color:#A8BDCC}
.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:64px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding-block:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--line-dk);
}
.approach-step__n{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;
  color:var(--brass);padding-top:2px;
}
.approach-step h3{color:#fff;font-size:1.1875rem;letter-spacing:-.02em}
.approach-step p{margin-top:10px;color:#A8BDCC;max-width:70ch}
@media (max-width:560px){
  .approach-step{grid-template-columns:1fr;gap:8px}
  .approach-step__n{padding-top:0}
}

/* ─── Client logo band ──────────────────────────────────── */
.logos-band{background:#fff;border-block:1px solid var(--line)}
/* 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,44px);
}
.logos li{display:flex;align-items:center;justify-content:center}
.logos img{max-height:40px;width:auto;opacity:.62;
  filter:grayscale(1);transition:opacity .18s ease,filter .18s ease}
.logos li:hover img{opacity:1;filter:none}

/* ─── Quote CTA band ────────────────────────────────────── */
/* The navy band 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(--navy);color:#fff;padding-block:clamp(52px,6.5vw,88px)}
.band h2{max-width:24ch}
.band .copy{margin-top:16px;color:#B7CEDD;max-width:56ch;font-size:1rem}
.band .copy a{color:#fff;text-decoration-color:var(--brass)}
.band .acts{margin-top:30px}

/* ─── Motion ────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(18px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.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:1000px){
  .hdr__menu{display:none}
  .hdr__burger{display:block}
  .hdr__cta{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-bottom:1px solid var(--line-dk);
    padding:6px var(--gut) 24px;
  }
  .hdr.open .nav{flex-direction:column;gap:0}
  .hdr.open .nav a{padding:14px 0;border-bottom:1px solid var(--line-dk);font-size:1.0625rem}
  .hdr.open .nav a:hover{border-bottom-color:var(--line-dk)}
  .hdr.open .hdr__tel{padding-top:18px}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .ftr__top{grid-template-columns:1fr}
  .ftr__logo{height:60px}
  .ftr__iso{margin-left:0}
}