/* ============================================================
   SELF-HOSTED FONTS (v22) — latin subsets, no third-party requests
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700-latin.woff2") format("woff2");
}

/* ==========================================================================
   King's Tree Security Consultancy
   Design system v3 — brand colours (navy / cream / gold), BAE-style corporate
   ========================================================================== */

:root {
  /* Brand palette — exact values from kingstreesecurityconsultancy.co.uk */
  --navy:        #141a26;   /* darkest — matches logo backdrop (header/footer) */
  --navy-700:    #161d28;   /* primary deep navy (hsl 217 29% 12%) */
  --navy-600:    #1d2636;
  --navy-500:    #2a3447;
  --cream:       #faf8f4;   /* page background (hsl 40 30% 97%) */
  --cream-2:     #efe9df;   /* secondary warm (hsl 42 20% 90%) */
  --cream-3:     #e6dfd1;
  --white:       #ffffff;

  --gold:        #c89d41;   /* accent (hsl 41 55% 52%) */
  --gold-light:  #d9bf8b;   /* (hsl 41 45% 70%) */
  --gold-deep:   #9a7621;
  --gold-ink:    #20180a;

  --text:        #1f262e;   /* foreground (hsl 210 20% 15%) */
  --text-soft:   #535d69;
  --muted:       #7c828c;
  --on-dark:     #cdd4de;
  --on-dark-soft:#949dab;

  --line:        #ddd6c6;   /* warm hairline */
  --line-2:      #e7e1d5;
  --line-dark:   rgba(255,255,255,.12);

  --maxw:        1240px;
  --maxw-read:   1140px;
  --read:        760px;

  --shadow:      0 24px 60px -24px rgba(20,26,38,.30);
  --shadow-sm:   0 2px 14px rgba(20,26,38,.08);

  --ff-display:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-head:     "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-body:     "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease:        cubic-bezier(.4, 0, .2, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-deep); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--gold); }

h1, h2, h3, h4 { font-family: var(--ff-head); color: var(--navy-700); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.15em; }

::selection { background: var(--gold); color: var(--gold-ink); }

/* Layout ------------------------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section--cream2 { background: var(--cream-2); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-body); text-transform: uppercase;
  letter-spacing: .22em; font-size: .72rem; font-weight: 700; color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--gold); }
.section--navy .eyebrow { color: var(--gold-light); }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-body); font-weight: 600; font-size: .95rem;
  padding: 14px 28px; border-radius: 2px; border: 2px solid transparent;
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap; letter-spacing: .01em;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--gold); color: var(--gold-ink); }
.btn--primary:hover { background: var(--gold-light); color: var(--gold-ink); }
.btn--dark { background: var(--navy-700); color: var(--white); }
.btn--dark:hover { background: var(--navy-600); color: var(--white); }
.btn--outline { border-color: var(--navy-700); color: var(--navy-700); }
.btn--outline:hover { background: var(--navy-700); color: var(--white); }
.btn--ghost { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.07); color: var(--white); }

/* Utility bar ------------------------------------------------------------- */
.topbar { background: #0f141d; color: var(--on-dark-soft); font-size: .8rem; border-bottom: 1px solid var(--line-dark); }
.topbar__row { display: flex; justify-content: flex-end; align-items: center; gap: 26px; height: 40px; }
.topbar a { color: var(--on-dark-soft); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--gold-light); }
.topbar svg { width: 14px; height: 14px; color: var(--gold); }

/* Header / nav ------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--navy); border-bottom: 1px solid var(--line-dark); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 86px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand:hover { color: inherit; }
.brand__crest { width: 46px; height: 48px; flex: 0 0 46px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--ff-display); font-weight: 700; font-size: 1.08rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.brand__sub { font-family: var(--ff-body); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); margin-top: 5px; max-width: 234px; line-height: 1.35; }

.nav__links { display: flex; align-items: center; gap: 21px; list-style: none; margin: 0; padding: 0; }
.nav__links > li > a {
  color: var(--on-dark); font-size: .79rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  position: relative; padding: 6px 0;
}
.nav__links > li > a:hover, .nav__links > li > a[aria-current="page"] { color: var(--white); }
.nav__links > li > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); }
.nav__cta a { padding: 11px 22px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--white); margin: 6px 0; transition: .25s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Page hero banner -------------------------------------------------------- */
.page-hero {
  position: relative; color: var(--white); overflow: hidden;
  background: var(--navy-700);
  border-bottom: 4px solid var(--gold);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20,26,38,.92) 0%, rgba(20,26,38,.72) 55%, rgba(20,26,38,.55) 100%);
}
.page-hero .container { position: relative; z-index: 2; padding-top: 84px; padding-bottom: 76px; }
.page-hero h1 { color: var(--white); font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.01em; max-width: 22ch; }
.page-hero p { color: var(--on-dark); max-width: 60ch; margin-bottom: 0; font-size: 1.1rem; }
.breadcrumb { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 22px; }
.breadcrumb a { color: var(--on-dark); }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb span { margin: 0 8px; color: var(--gold); }

/* Legal / article layout -------------------------------------------------- */
.doc { padding: 80px 0 100px; }
.doc__grid { display: grid; grid-template-columns: 250px 1fr; gap: 64px; align-items: start; }

.toc { position: sticky; top: 110px; }
.toc__title { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-bottom: 16px; font-weight: 700; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 9px 0 9px 16px; border-left: 2px solid var(--line);
  color: var(--text-soft); font-size: .88rem; line-height: 1.4; transition: all .15s var(--ease);
}
.toc a:hover { color: var(--navy-700); border-color: var(--gold-light); }
.toc a.active { color: var(--navy-700); border-color: var(--gold); font-weight: 600; }

.prose { max-width: var(--read); }
.prose > section { scroll-margin-top: 110px; padding-bottom: 8px; }
.prose > section + section { margin-top: 52px; padding-top: 52px; border-top: 1px solid var(--line); }
.prose h2 {
  font-size: 1.45rem; color: var(--navy-700); margin-bottom: .7em; padding-bottom: 0;
  display: flex; align-items: baseline; gap: 14px;
}
.prose h2::before {
  content: ""; flex: 0 0 26px; height: 3px; background: var(--gold); transform: translateY(-5px);
}
.prose p { color: var(--text-soft); }
.prose ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: .5em; color: var(--text-soft); }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px;
  background: var(--gold); border-radius: 1px; transform: rotate(45deg);
}
.prose h3 {
  font-size: 1.05rem; color: var(--navy-700); margin: 2.1em 0 .6em;
  padding-bottom: .5em; border-bottom: 1px solid var(--line); letter-spacing: 0;
}
.prose h3:first-child { margin-top: .4em; }
.prose strong { color: var(--navy-700); font-weight: 650; }
.prose ol { padding-left: 0; margin: 0 0 1.2em; list-style: none; counter-reset: art; }
.prose ol li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--line); color: var(--text); counter-increment: art; }
.prose ol li::before { content: counter(art, decimal-leading-zero); position: absolute; left: 0; top: 14px; color: var(--gold-deep); font-weight: 700; font-size: .95rem; }
.prose-actions { margin-top: 32px; }
.prose .lead-note {
  background: var(--cream-2); border-left: 3px solid var(--gold);
  padding: 22px 26px; margin: 0 0 36px; color: var(--text); font-size: 1.02rem;
}
.prose .copyright { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

/* CTA band ---------------------------------------------------------------- */
.cta-band { background: var(--navy); color: var(--white); text-align: center; padding: 80px 0; border-top: 4px solid var(--gold); }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--on-dark); max-width: 56ch; margin: 0 auto 12px; }
.cta-band .btn { margin-top: 20px; }

/* ===== Home / marketing components ===== */
.page-hero--lg .container { padding-top: 128px; padding-bottom: 128px; }
.page-hero--lg h1 { font-size: clamp(2.6rem, 5.4vw, 4.25rem); line-height: 1.04; letter-spacing: -0.028em; max-width: 18ch; margin-bottom: .55em; }
.hero-lead { color: var(--on-dark); font-size: 1.22rem; line-height: 1.6; max-width: 58ch; margin: 0 0 36px; }

.section-head { max-width: 800px; margin: 0 auto 56px; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head p { color: var(--text-soft); margin-bottom: 0; font-size: 1.1rem; }
.section--navy .section-head p { color: var(--on-dark); }

.rich { max-width: 760px; margin: 0 auto; }
.rich p { color: var(--text-soft); }
.section--navy .rich p { color: var(--on-dark); }
.rich .em { color: var(--navy-700); font-weight: 600; }
.section--navy .rich .em { color: var(--white); }

/* Split with media */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.split h2 { margin-bottom: .6em; }
.split p { color: var(--text-soft); }
.split__media {
  min-height: 440px; border-radius: 2px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1d2636, #0f141d); border: 1px solid var(--line-dark);
  display: grid; place-items: center;
}
.split__media .ph-crest { width: 138px; opacity: .55; }
.split__media .ph-note { position: absolute; bottom: 14px; right: 16px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }

/* Service cards */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.svc-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 38px 34px; display: flex; flex-direction: column; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.svc-card::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(20,26,38,.32); border-color: #cbc1ad; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card--feature { grid-column: 1 / -1; background: var(--cream-2); border-top: 3px solid var(--gold); }
.svc-card__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gold-deep); font-weight: 700; margin-bottom: 12px; }
.svc-card h3 { font-size: 1.32rem; margin-bottom: .5em; }
.svc-card > p { color: var(--text-soft); }
.svc-tags { list-style: none; padding: 0; margin: 4px 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tags li { font-size: .8rem; color: var(--text-soft); background: var(--cream-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 2px; }
.svc-card--feature .svc-tags li { background: var(--white); }
.svc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .08em; }
.svc-link svg { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.svc-link:hover { color: var(--gold); }
.svc-link:hover svg { transform: translateX(3px); }

/* Value props */
.values { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--white); }
.value { padding: 32px 26px; border-right: 1px solid var(--line); }
.value:last-child { border-right: 0; }
.value h3 { font-size: 1.06rem; margin-bottom: .45em; color: var(--navy-700); }
.value h3::before { content: ""; display: block; width: 26px; height: 3px; background: var(--gold); margin-bottom: 16px; }
.value p { color: var(--text-soft); font-size: .92rem; margin: 0; line-height: 1.55; }

/* Who we work with */
.who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
.who-grid li { padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line); position: relative; color: var(--text); font-weight: 500; }
.who-grid li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 40px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 7px; color: var(--navy-700); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .98rem; color: var(--text);
  border: 1.5px solid var(--line); border-radius: 2px; background: var(--white);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,157,65,.18); }
.field textarea { min-height: 140px; resize: vertical; }
.contact-aside { background: var(--navy); color: var(--on-dark); border-radius: 2px; padding: 40px; }
.contact-aside h3 { color: var(--white); }
.contact-item { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 22px; }
.contact-item__icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 2px; display: grid; place-items: center; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-dark); }
.contact-item__icon svg { width: 19px; height: 19px; }
.contact-item strong { display: block; color: var(--white); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; }
.contact-item a, .contact-item span { color: var(--on-dark); }
.contact-item a:hover { color: var(--gold-light); }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } .form-card, .contact-aside { padding: 28px; } }

/* Footer statement */
.footer-statement { color: var(--on-dark-soft); font-size: .84rem; line-height: 1.6; border-top: 1px solid var(--line-dark); padding-top: 24px; margin: 0 0 24px; }

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split__media { min-height: 300px; }
  .svc-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .value { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .who-grid { grid-template-columns: 1fr; max-width: 480px; }
  .page-hero--lg .container { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 560px) {
  .values { grid-template-columns: 1fr; }
  .value { border-right: 0; }
}

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--navy); color: var(--on-dark); padding: 72px 0 32px; border-top: 1px solid var(--line-dark); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 52px; }
.footer-logo { width: 132px; margin-bottom: 20px; }
.site-footer h4 { color: var(--white); font-family: var(--ff-body); font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--gold-light); }
.footer-contact div { margin-bottom: 12px; color: var(--on-dark); }
.footer-contact strong { color: var(--white); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; font-weight: 600; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--on-dark-soft); }
.footer-bottom a { color: var(--on-dark-soft); }

/* Accessibility ----------------------------------------------------------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 940px) {
  .doc__grid { grid-template-columns: 1fr; gap: 36px; }
  .toc { position: static; border: 1px solid var(--line); padding: 22px; background: var(--white); border-radius: 2px; }
  .toc__title { margin-bottom: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 1080px) {
  .topbar { display: none; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: 86px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); border-bottom: 1px solid var(--line-dark); padding: 8px 0; display: none;
    max-height: calc(100vh - 86px); overflow-y: auto;
  }
  .nav__links.open { display: flex; }
  .nav__links li { padding: 0 32px; }
  .nav__links > li > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .nav__links > li > a[aria-current="page"]::after { display: none; }
  .nav__cta { margin: 12px 32px; }
  .nav__cta a { justify-content: center; }
  .section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* ===== Premium polish v4 ===== */
/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Hero actions + credentials */
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-cred { display: inline-flex; align-items: center; gap: 9px; color: var(--on-dark-soft); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.hero-cred svg { width: 14px; height: 14px; color: var(--gold); flex: 0 0 14px; }

/* Trust strip */

/* Stats / metrics band */
.stats-band { background: var(--navy); color: #fff; padding: 60px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric { padding: 12px 26px; border-left: 1px solid var(--line-dark); }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric__num { font-family: var(--ff-head); font-weight: 800; font-size: clamp(2.3rem, 4vw, 3.1rem); line-height: 1; color: #fff; letter-spacing: -0.02em; }
.metric__num .u { color: var(--gold); }
.metric__label { margin-top: 12px; color: var(--on-dark-soft); font-size: .88rem; line-height: 1.45; max-width: 26ch; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; } .metric:nth-child(3) { border-left: 0; padding-left: 0; } .metric { padding-left: 26px; } .metric:first-child, .metric:nth-child(3) { padding-left: 0; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: 26px 0; } .metric { border-left: 0; padding-left: 0; } }

/* Value cards subtle hover */
.value { transition: background .2s var(--ease); }
.value:hover { background: #fbfaf7; }

/* Eyebrow index */
.eyebrow .idx { color: var(--gold-deep); margin-right: 2px; }

/* Brand crest watermark in hero */
@media (max-width: 760px) {  }

/* Editorial service index (replaces templated card grid) */
.section-head--left { text-align: left; max-width: none; margin: 0 0 48px; }
.svc-index { border-top: 1px solid var(--line); }
/* .svc-row layout + styling defined once in the v20 block below */

/* Small-screen comfort */
@media (max-width: 560px) { .container { padding: 0 20px; } .page-hero .container { padding-top: 64px; padding-bottom: 64px; } }

/* ===== Nav refinement: no-wrap + Services dropdown ===== */
.nav__links > li > a { white-space: nowrap; }
.brand__sub { max-width: none; white-space: nowrap; letter-spacing: .26em; font-size: .58rem; }

.has-dropdown { position: relative; }
.nav__drop-toggle {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--on-dark); font-size: .79rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  padding: 6px 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.nav__drop-toggle:hover, .has-dropdown:hover .nav__drop-toggle, .has-dropdown.is-current .nav__drop-toggle { color: var(--white); }
.nav__drop-toggle .caret { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.has-dropdown:hover .nav__drop-toggle .caret { transform: rotate(180deg); }
.has-dropdown.is-current .nav__drop-toggle { position: relative; }
.has-dropdown.is-current .nav__drop-toggle::after { content: ""; position: absolute; left: 0; right: 18px; bottom: -2px; height: 2px; background: var(--gold); }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 300px; background: var(--navy-700); border: 1px solid var(--line-dark);
  list-style: none; margin: 0; padding: 8px; border-radius: 4px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 70;
}
.dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }
.dropdown li { margin: 0; }
.dropdown a {
  display: block; padding: 12px 16px; color: var(--on-dark); font-size: .85rem; font-weight: 500;
  text-transform: none; letter-spacing: 0; border-radius: 3px; white-space: nowrap;
}
.dropdown a:hover { background: rgba(255,255,255,.06); color: var(--white); }
.dropdown a[aria-current="page"] { color: var(--gold-light); }

@media (max-width: 1080px) {
  .nav__drop-toggle { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 0 16px;
  }
  .dropdown::before { display: none; }
  .dropdown a { padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
  .has-dropdown.is-current .nav__drop-toggle::after { display: none; }
}

/* Photo treatment for split media */

/* =====================================================================
   PREMIUM REFINEMENT v5  — design-audit synthesis (visual only, copy unchanged)
   Layered overrides; later cascade wins. Inter-only honoured.
   ===================================================================== */
:root {
  /* spacing scale (8px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;
  /* radius + elevation */
  --radius:4px; --radius-lg:4px; --accent-bar:2px;
  --shadow-rest:0 1px 2px rgba(16,21,31,.06), 0 6px 18px -12px rgba(16,21,31,.14);
  --shadow-hover:0 16px 40px -20px rgba(16,21,31,.28);
  --shadow:0 16px 40px -20px rgba(16,21,31,.28);
  /* motion */
  --dur-1:160ms; --dur-2:240ms; --dur-3:320ms; --dur-reveal:500ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,.84,.44,1);
  /* type scale (1.25 / 16px base) */
  --fs-caption:.8125rem; --fs-body:1.0625rem; --fs-h3:1.375rem; --fs-h2:1.875rem; --fs-h1:2.5rem; --fs-display:clamp(2.75rem,5.4vw,4rem);
  --track-caps:.16em; --read:65ch;
  /* colour — navy ramp roles + AA-clean gold text */
  --navy:#10151f; --navy-700:#18202e; --navy-600:#232d40; --navy-500:#2a3447;
  --gold-text:#6f5310;
  --on-dark-soft:#aab2bf;
  --line-dark:rgba(255,255,255,.16);
}

/* --- Inter de-SaaS --- */
body { font-size:var(--fs-body); line-height:1.6; font-optical-sizing:auto; font-feature-settings:'ss01','cv05','cv11'; }
h1,h2,h3,h4 { font-weight:600; }
h1 { font-size:var(--fs-h1); letter-spacing:-.025em; line-height:1.1; }
h2 { font-size:var(--fs-h2); letter-spacing:-.02em; line-height:1.2; }
h3, .prose h3, .value h3, .svc-card h3 { font-size:var(--fs-h3); letter-spacing:-.01em; line-height:1.25; font-weight:600; }
.page-hero--lg h1 { font-size:var(--fs-display); letter-spacing:-.03em; line-height:1.04; }
.metric__num { font-variant-numeric:tabular-nums; font-weight:600; }
.prose ol { font-variant-numeric:tabular-nums; }

/* --- labels / eyebrow tracking --- */
.eyebrow { letter-spacing:var(--track-caps); }
.toc__title, .site-footer h4 { letter-spacing:var(--track-caps); }

/* --- colour repoints (on light) --- */
a { color:var(--gold-text); }
a:hover { color:var(--gold); }
.eyebrow, .svc-card__tag, .svc-link { color:var(--gold-text); }
.section--navy .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow, .stats-band .eyebrow { color:var(--gold-light); }
.toc__title, .prose .copyright { color:var(--text-soft); }

/* --- navy roles: chrome vs content vs raised --- */
.site-header, .topbar, .site-footer { background:var(--navy); }
.section--navy, .stats-band, .cta-band { background:var(--navy-700); }
.page-hero { background:var(--navy-700); }
.contact-aside { background:var(--navy-600); }

/* --- buttons: navy primary on light, white primary on dark, gold header CTA --- */
.btn { border-radius:var(--radius); font-weight:600;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.btn--primary { background:var(--navy-700); color:#fff; border:1px solid var(--navy-700); box-shadow:0 1px 2px rgba(16,21,31,.10); }
.btn--primary:hover { background:var(--navy); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.btn--primary svg { transition:transform var(--dur-2) var(--ease); }
.btn--primary:hover svg { transform:translateX(3px); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.btn--ghost { border-color:rgba(255,255,255,.65); }
.btn--lg { padding:17px 36px; font-size:1.02rem; }
/* primary on dark backgrounds -> crisp white button */
.page-hero .btn--primary, .cta-band .btn--primary, .section--navy .btn--primary { background:#fff; color:var(--navy); border-color:#fff; box-shadow:0 1px 2px rgba(16,21,31,.18); }
.page-hero .btn--primary:hover, .cta-band .btn--primary:hover, .section--navy .btn--primary:hover { background:#ece8df; color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-hover); }
/* the single header accent CTA -> gold */
.nav__cta a { background:var(--gold); color:var(--navy); border-color:var(--gold); box-shadow:none; padding:13px 26px; font-size:.8rem; letter-spacing:var(--track-caps); }
.nav__cta a:hover { background:var(--gold-light); color:var(--navy); transform:translateY(-1px); }

/* --- cards: resting elevation + unified radius + restrained hover --- */
.svc-card, .form-card, .values { border-radius:var(--radius); box-shadow:var(--shadow-rest); border:1px solid #e4dccd; }
.svc-card { transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.svc-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:#d9cdb4; }
.svc-card::after { height:var(--accent-bar); }
.contact-aside { border-radius:var(--radius); }
.value:hover { background:var(--cream); }
.value, .who-grid li { border-color:rgba(16,21,31,.12); }

/* --- missing component rules (were applied with no CSS) --- */
.callout { background:var(--cream-2); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; padding:24px 32px; margin:32px 0 0; }
.callout p:last-child { margin-bottom:0; }
.section--navy .callout { background:rgba(255,255,255,.045); }
.section--tight { padding-block:80px; }

/* --- prose readability + even rhythm + dot bullets --- */
.prose { max-width:var(--read); }
.prose p { color:#3b4450; line-height:1.65; }
.prose strong { font-weight:600; }
.prose > section { padding-bottom:0; scroll-margin-top:100px; }
.prose > section + section { margin-top:48px; padding-top:48px; border-top:1px solid rgba(16,21,31,.12); }
.prose h3 { margin:32px 0 8px; padding-bottom:8px; border-bottom:1px solid rgba(16,21,31,.12); }
.prose ul li::before, .who-grid li::before { width:6px; height:6px; border-radius:50%; background:var(--gold-text); transform:none; top:.62em; left:2px; }

/* --- thin the gold ornament --- */
.prose h2::before, .value h3::before { height:var(--accent-bar); width:24px; }
.page-hero { border-bottom:1px solid var(--gold); }
.cta-band { border-top:1px solid var(--gold); }
.stats-band { border-top:var(--accent-bar) solid var(--gold); }

/* --- layout: deliberate rhythm, symmetric hero, two gutters, fluid container --- */
.section { padding:120px 0; }
.section--lead { padding:160px 0; }
.cta-band, .doc { padding:120px 0; }
.stats-band { padding:80px 0; }
.page-hero .container { padding-top:96px; padding-bottom:96px; }
.page-hero--lg .container { padding-top:128px; padding-bottom:128px; }
.container { padding-left:clamp(24px,5vw,48px); padding-right:clamp(24px,5vw,48px); }
.svc-grid, .contact-grid { gap:32px; }
.split, .doc__grid { gap:64px; }
.metric { padding:8px 32px; }

/* --- imagery: ONE branded treatment + controlled vertical scrim --- */
.page-hero__bg img { opacity:1; filter:grayscale(.55) contrast(1.05) brightness(.92); object-position:50% 30%; }
.page-hero::after { background:linear-gradient(180deg, rgba(16,21,31,.80) 0%, rgba(16,21,31,.62) 100%); }

/* --- desktop sticky TOC -> light card --- */
@media (min-width:941px){ .toc { padding:24px; background:#fff; border:1px solid #e4dccd; border-radius:var(--radius); box-shadow:var(--shadow-rest); } }
.toc a { transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }

/* --- motion language --- */
html { scroll-padding-top:100px; }
.reveal { transform:translateY(16px); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.dropdown { transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { transform:translateX(-50%) translateY(2px); }

/* --- mobile --- */
body.nav-open { overflow:hidden; }
.nav__toggle { padding:10px; min-width:44px; min-height:44px; margin-right:-10px; }
@media (max-width:1080px){ .section { padding:64px 0; } .nav { height:68px; } .nav__links { top:68px; max-height:calc(100vh - 68px); } }
@media (max-width:560px){ .section { padding:48px 0; } .page-hero--lg .container { padding-top:72px; padding-bottom:72px; } .hero-actions { flex-direction:column; align-items:stretch; gap:12px; } .hero-actions .btn { width:100%; justify-content:center; } }

/* --- broaden reduced-motion guard --- */
@media (prefers-reduced-motion: reduce){ *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } .reveal { opacity:1 !important; transform:none !important; } }

/* =====================================================================
   LIGHT THEME v6 — type-led, airy. Navy/gold as ACCENTS, not slabs.
   Dark retained only for footer + CTA band (anchors) + dropdown panel.
   ===================================================================== */
body { background:#fbfaf7; color:var(--text); }

/* Topbar -> light */
.topbar { background:#f1ede4; border-bottom:1px solid var(--line); color:var(--text-soft); }
.topbar a { color:var(--text-soft); }
.topbar a:hover { color:var(--gold-text); }
.topbar svg { color:var(--gold-text); }

/* Header -> light glass */
.site-header { background:rgba(251,250,247,.9); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line); }
.brand__name { color:var(--navy); }
.brand__sub { color:var(--text-soft); }
.nav__links > li > a { color:var(--text); }
.nav__links > li > a:hover, .nav__links > li > a[aria-current="page"] { color:var(--navy); }
.nav__drop-toggle { color:var(--text); }
.nav__drop-toggle:hover, .has-dropdown:hover .nav__drop-toggle, .has-dropdown.is-current .nav__drop-toggle { color:var(--navy); }
.nav__toggle span { background:var(--navy); }

/* Page hero -> light & type-led; drop photo + scrim */
.page-hero { background:#fbfaf7; color:var(--navy); border-bottom:1px solid var(--line); }
.page-hero__bg { display:none; }
.page-hero::after { display:none; }
.page-hero h1 { color:var(--navy); }
.page-hero p, .hero-lead { color:var(--text-soft); }
.page-hero .eyebrow { color:var(--gold-text); }
.breadcrumb { color:var(--text-soft); }
.breadcrumb a { color:var(--navy); }
.breadcrumb span { color:var(--gold); }
/* faint brand crest watermark — interest without stock */
.page-hero--lg::before { content:""; position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:clamp(280px,34vw,460px); height:clamp(280px,34vw,460px); background:url("../img/crest.png") center/contain no-repeat; opacity:.05; pointer-events:none; z-index:0; }
.page-hero .container { position:relative; z-index:2; }

/* hero buttons in LIGHT context */
.page-hero .btn--primary { background:var(--navy-700); color:#fff; border-color:var(--navy-700); box-shadow:0 1px 2px rgba(16,21,31,.12); }
.page-hero .btn--primary:hover { background:var(--navy); color:#fff; }
.page-hero .btn--ghost { border-color:var(--navy-700); color:var(--navy-700); background:transparent; }
.page-hero .btn--ghost:hover { background:var(--navy-700); color:#fff; }

/* airy section tints */
.section--cream2 { background:#f4f0e8; }

/* Stats band -> light (airy, navy tabular numerals, single gold hairline) */
.stats-band { background:transparent; border-top:2px solid var(--gold); border-bottom:1px solid var(--line); }
.stats-band .metric__num { color:var(--navy); }
.stats-band .metric__num .u { color:var(--gold-text); }
.stats-band .metric__label { color:var(--text-soft); }
.stats-band .metric { border-left:1px solid var(--line); }
.stats-band .metric:first-child { border-left:0; }
@media (max-width:860px){ .stats-band .metric:nth-child(3){ border-left:0; } }

/* cta-band + footer stay dark (anchors) — unchanged */

/* =====================================================================
   IMAGES IN THE LIGHT THEME v7 — framed, lightly treated, side-by-side
   ===================================================================== */
.page-hero--lg::before { display:none; }              /* watermark replaced by real hero image */
.hero-split { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hero-copy { max-width:34rem; }

.media-frame { position:relative; margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-rest); background:var(--navy-700); }
.media-frame img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:grayscale(.4) contrast(1.06); }
.media-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(16,21,31,.04), rgba(16,21,31,.30)); }
.media-frame::before { content:""; position:absolute; left:0; top:0; width:100%; height:var(--accent-bar); background:var(--gold); z-index:2; }

@media (max-width:880px){
  .hero-split { grid-template-columns:1fr; gap:36px; }
  .hero-copy { max-width:none; }
  .media-frame img { aspect-ratio:16/10; }
}

/* =====================================================================
   BAE-STYLE PHOTOGRAPHIC LAYER v8 — full-bleed photo heroes + image bands
   (overrides the v6 light heroes; keeps light content sections)
   ===================================================================== */
/* Re-darken page heroes + show the photo, BAE-style full-bleed */
.page-hero { color:#fff; background:var(--navy-700); border-bottom:1px solid var(--gold); }
.page-hero__bg { display:block; }
.page-hero__bg img { display:block; opacity:1; filter:grayscale(.5) contrast(1.06) brightness(.82); object-position:50% 32%; }
.page-hero::after { display:block; background:linear-gradient(90deg, rgba(11,14,20,.88) 0%, rgba(11,14,20,.66) 52%, rgba(11,14,20,.5) 100%); }
.page-hero h1 { color:#fff; }
.page-hero p, .page-hero .hero-lead { color:var(--on-dark); }
.page-hero .eyebrow { color:var(--gold-light); }
.breadcrumb { color:var(--on-dark-soft); }
.breadcrumb a { color:var(--on-dark); }
.breadcrumb a:hover { color:var(--gold-light); }
.page-hero--lg::before { display:none; }
/* hero buttons: crisp white primary + outlined-white ghost on the photo */
.page-hero .btn--primary { background:#fff; color:var(--navy); border-color:#fff; box-shadow:0 1px 2px rgba(16,21,31,.2); }
.page-hero .btn--primary:hover { background:#ece8df; color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.page-hero .btn--ghost { border-color:rgba(255,255,255,.7); color:#fff; background:transparent; }
.page-hero .btn--ghost:hover { background:rgba(255,255,255,.1); color:#fff; }

/* CTA band as a full-bleed photographic band */
.cta-band { position:relative; overflow:hidden; background:var(--navy-700); }
.cta-band__bg { position:absolute; inset:0; z-index:0; }
.cta-band__bg img { width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.05) brightness(.62); }
.cta-band::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,14,20,.74) 0%, rgba(11,14,20,.84) 100%); }
.cta-band .container { position:relative; z-index:2; }

/* =====================================================================
   HEADER POLISH v9 — navy CTA, tighter lockup, refined bar
   ===================================================================== */
.nav { height:80px; }
.site-header { border-bottom:1px solid var(--line); }
.brand__crest { width:42px; height:46px; }
.brand__name { letter-spacing:.16em; font-size:1.05rem; }
.brand__sub { letter-spacing:.2em; font-size:.56rem; color:var(--text-soft); }
/* navy CTA reads crisper than flat gold on the light bar */
.nav__cta a { background:var(--navy-700); color:#fff; border:1px solid var(--navy-700); box-shadow:0 1px 2px rgba(16,21,31,.14); padding:12px 24px; letter-spacing:var(--track-caps); }
.nav__cta a:hover { background:var(--navy); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-hover); }
@media (max-width:1080px){ .nav { height:68px; } }

/* fix: nav CTA white text was overridden by .nav__links>li>a (higher specificity) */
.nav__cta a.btn--primary { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.nav__cta a.btn--primary:hover { background:var(--navy); color:#fff; }

/* shrink nav CTA wording to sit neatly in the box */
.nav__cta a.btn--primary { font-size:.7rem; letter-spacing:.06em; padding:11px 18px; }

/* =====================================================================
   MARKETING PAGE TEMPLATE v10 — replaces the doc/TOC/prose layout
   ===================================================================== */
.section__body { max-width: 880px; }
.section--lead .section__body { max-width: 920px; }
.lede { font-size: clamp(1.2rem, 2.1vw, 1.45rem); line-height: 1.5; letter-spacing: -.01em; color: var(--navy-700); font-weight: 400; margin: 0 0 1.3rem; }
.section__body > p { color: var(--text-soft); }
.section__body .ticks { margin-top: 1.3rem; }
.section--navy .section__body > p, .panel--navy .section__body > p { color: var(--on-dark); }

/* list-heavy sections -> feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-rest); padding: 30px 28px; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #d9cdb4; }
.feature h3 { margin: 0 0 .55em; }
.feature p { color: var(--text-soft); margin: 0 0 .9em; }
.feature .ticks { margin: 0; }
.feature .ticks li { margin-bottom: .4em; font-size: .96rem; }
@media (max-width: 760px){ .feature-grid { grid-template-columns: 1fr; } }

/* navy "why" panel */
.panel { border-radius: var(--radius); padding: clamp(32px,5vw,56px); }
.panel--navy { background: var(--navy-700); color: var(--on-dark); }
.panel--navy h2, .panel--navy h3 { color: #fff; }
.panel--navy p { color: var(--on-dark); }
.panel--navy .ticks li::before { border-color: var(--gold); }

/* resource / blog cards */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.res-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-rest); padding: 30px 28px; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #d9cdb4; }
.res-card h3 { margin: 0 0 .5em; font-size: 1.18rem; }
.res-card p { color: var(--text-soft); margin: 0 0 16px; }
.res-card .res-link { margin-top: auto; color: var(--gold-text); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; }
.res-card .res-link svg { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease); }
.res-card:hover .res-link svg { transform: translateX(3px); }
@media (max-width: 900px){ .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .res-grid { grid-template-columns: 1fr; } }

/* lead intro as text+image split (service pages) */
.section--lead .container.split { align-items:center; }
.section--lead .container.split .section__body { max-width:none; }
.section--lead .container.split .media-frame { order:2; }
.section--lead .container.split .media-frame img { aspect-ratio:5/4; }
@media (max-width:880px){ .section--lead .container.split .media-frame { order:0; } }

/* =====================================================================
   RICHNESS / DETAIL v11 — editorial detailing (no clutter)
   ===================================================================== */
/* numbered feature cards */
.feature-grid { counter-reset: feat; }
.feature { counter-increment: feat; }
.feature::before { content: counter(feat, decimal-leading-zero); display: block; font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--gold); letter-spacing: -.02em; margin-bottom: 16px; }

/* value props: line icons instead of the repeated gold bar */
.value { text-align: left; }
.value h3::before { display: none; }
.value__icon { display: block; width: 30px; height: 30px; color: var(--gold-text); margin-bottom: 16px; }
.value__icon svg { width: 100%; height: 100%; }

/* faint brand crest watermark for depth in dark panels */
.panel--navy { position: relative; overflow: hidden; }
.panel--navy::after { content: ""; position: absolute; right: -36px; bottom: -48px; width: 300px; height: 300px; background: url("../img/crest.png") center/contain no-repeat; opacity: .05; pointer-events: none; z-index: 0; }
.panel--navy > * { position: relative; z-index: 1; }

/* a touch more presence on section intros */
.section--lead .lede { font-weight: 500; }

/* =====================================================================
   MOBILE NAV CONTRAST FIX v12 — dark dropdown menu needs light items
   ===================================================================== */
@media (max-width: 1080px) {
  .nav__links { background: var(--navy); }
  .nav__links > li > a,
  .nav__drop-toggle { color: var(--on-dark); }
  .nav__links > li > a:hover,
  .nav__links > li > a[aria-current="page"],
  .nav__drop-toggle:hover,
  .has-dropdown.is-current .nav__drop-toggle { color: #fff; }
  .nav__links > li > a[aria-current="page"]::after { display: none; }
  .dropdown a { color: var(--on-dark); }
  .dropdown a:hover,
  .dropdown a[aria-current="page"] { color: var(--gold-light); }
  /* CTA must stand out on the dark menu — gold, not navy-on-navy */
  .nav__cta a.btn--primary { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: none; }
  .nav__cta a.btn--primary:hover { background: var(--gold-light); color: var(--navy); }
}

/* About: pull-quote panel */
.quote-panel { text-align: center; }
.quote-panel::before { content: ""; display: block; width: 48px; height: 3px; background: var(--gold); margin: 0 auto 26px; }
.quote-panel h2 { margin-bottom: .8rem; }
.quote-panel p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.quote-panel p strong { display: block; font-size: clamp(1.5rem, 3vw, 2.15rem); color: #fff; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; margin: .35em auto; max-width: 26ch; }

/* =====================================================================
   QA FIXES v13 — from full quality audit
   ===================================================================== */
/* darken muted token so helper/copyright text passes AA */
:root { --muted: #6a7078; }

/* MISSING base component: .ticks (used 63x, was unstyled default bullets) */
.ticks { list-style: none; margin: 0 0 1.2em; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: .55em; color: var(--text-soft); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--gold-text); border-bottom: 2px solid var(--gold-text); transform: rotate(-45deg); }
.section--navy .ticks li, .panel--navy .ticks li { color: var(--on-dark); }
.section--navy .ticks li::before, .panel--navy .ticks li::before { border-color: var(--gold); }

/* standfirst <strong> sentences (About / Martyn's) — match the pull-out treatment */
.section__body > p > strong:only-child { color: var(--navy-700); font-weight: 600; }

/* focus visibility (was gold — failed 3:1 on light) */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.section--navy :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .panel--navy :focus-visible { outline-color: var(--gold-light); }
.page-hero .btn:focus-visible, .cta-band .btn:focus-visible { outline-color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); box-shadow: none; }

/* keyboard/JS dropdown open state (paired with main.js handler) */
.has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }

/* responsive: reset lead-image order in the SAME query the split collapses */
@media (max-width: 940px) { .section--lead .container.split .media-frame { order: 0; } }

/* honour tighter mobile gutters (was overridden by the unconditional clamp) */
@media (max-width: 560px) { .container { padding-left: 20px; padding-right: 20px; } }

/* ============================================================
   ABOUT — EDITORIAL "DOSSIER" NARRATIVE  (v14)
   Numbered chapters · sticky heading rail · measured prose ·
   navy contrast band · gold statement blocks · 2-col ticks.
   Structure & styling only — no copy changes.
   ============================================================ */

.bio { padding: clamp(64px, 8.5vw, 116px) 0; border-top: 1px solid var(--line); }
.bio + .bio { border-top: 1px solid var(--line); }

.bio__grid {
  display: grid;
  grid-template-columns: minmax(0, 312px) minmax(0, 648px);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

/* left rail — sticky chapter heading */
.bio__aside { position: sticky; top: 116px; }
.bio__index {
  display: flex; align-items: center; gap: 16px;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 1.15rem;
}
.bio__index::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.bio__aside h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.14; letter-spacing: -.02em; color: var(--navy-700);
}

/* prose column — held to a readable measure */
.bio__body { max-width: 65ch; }
.bio__body > p { color: var(--text-soft); margin: 0 0 1.15em; }
.bio__body > p:last-child { margin-bottom: 0; }
.bio__body .ticks { margin-top: 1.4rem; }

/* gold-ruled statement stack (replaces orphan bold one-liners) */
.statements { margin: 1.7em 0; padding: .15em 0 .15em 22px; border-left: 2px solid var(--gold); display: grid; gap: .55em; }
.statements p { margin: 0; }
.statements p strong { color: var(--navy-700); font-weight: 600; font-size: 1.07rem; letter-spacing: -.005em; }

/* navy contrast chapter */
.bio--navy { background: var(--navy); color: var(--on-dark); border-top: 0 !important; position: relative; overflow: hidden; }
.bio--navy + .bio { border-top: 0; }
.bio--navy::after { content: ""; position: absolute; right: -64px; bottom: -88px; width: 360px; height: 360px; background: url("../img/crest.png") center/contain no-repeat; opacity: .05; pointer-events: none; }
.bio--navy .container { position: relative; z-index: 1; }
.bio--navy .bio__index { color: var(--gold-light); }
.bio--navy .bio__index::after { background: rgba(255,255,255,.16); }
.bio--navy .bio__aside h2 { color: #fff; }
.bio--navy .bio__body > p { color: var(--on-dark); }
.bio--navy .statements p strong { color: #fff; }

/* two-column tick lists for long sets */
.ticks--cols { columns: 2; column-gap: 48px; }
.ticks--cols li { break-inside: avoid; }

@media (max-width: 880px) {
  .bio__grid { grid-template-columns: 1fr; gap: 26px; }
  .bio__aside { position: static; }
  .bio__body { max-width: none; }
}
@media (max-width: 620px) {
  .ticks--cols { columns: 1; }
}

/* ============================================================
   UX REVIEW FIXES (v15)
   Contact navy-section contrast, current-page nav CTA,
   statement styling without <strong>, print/reveal safety.
   ============================================================ */

/* nav CTA on its own page: aria-current rule was painting it navy-on-navy */
.nav__links > li.nav__cta > a[aria-current="page"] { color: #fff; }
@media (max-width: 1080px) {
  .nav__links > li.nav__cta > a[aria-current="page"] { color: var(--navy); } /* mobile CTA is gold */
}

/* any plain text inside a navy section defaults to light */
.section--navy p, .section--navy li { color: var(--on-dark); }
.section--navy .who-grid li { color: var(--on-dark); border-bottom-color: rgba(255,255,255,.14); }
.section--navy .who-grid li::before { background: var(--gold); }
.section--navy .statements p, .section--navy .statements p strong { color: #fff; }
.section--navy .ticks li::before { border-color: var(--gold); }

/* statements: style plain p the same as strong so no re-bolding is needed */
.statements p { color: var(--navy-700); font-weight: 600; font-size: 1.07rem; letter-spacing: -.005em; }

/* centered narrative measure under centered section heads */
.section__body--center { margin-inline: auto; }

/* feature cards may carry h2 (blog topics) — style like the h3 variant */
.feature > h2 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; color: var(--navy-700); margin: 0 0 .55em; }

/* reveal must never hide content in print */
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* v15.1 — navy dossier chapters: list items must be light too */
.bio--navy .bio__body li { color: var(--on-dark); }
.bio--navy .ticks li::before { border-color: var(--gold); }

/* ============================================================
   v16 — unify the utility bar into the header
   Kills the mismatched warm-cream strip + its seam so the
   phone/email row reads as one clean header block.
   ============================================================ */
.topbar { background: #fbfaf7; border-bottom: 0; }
.topbar a { color: var(--text-soft); }
.topbar a:hover { color: var(--gold-text); }
.topbar svg { color: var(--gold-text); }
.site-header { background: #fbfaf7; }

/* ============================================================
   v17 — logo lockup keeps its ORIGINAL Inter. Never restyle
   the brand text with the site display font.
   ============================================================ */
.brand__name,
.brand__sub { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; }

/* ============================================================
   v18 — footer logo down-size + de-lopside dossier chapters
   ============================================================ */
.footer-logo { width: 92px; height: auto; margin-bottom: 20px; }

/* stack the chapter heading ABOVE the body at a normal reading width,
   killing the empty side column and the squeezed-right paragraphs */
.bio__grid { display: block; max-width: 820px; margin: 0 auto; }
.bio__aside { position: static; margin-bottom: 1.6rem; }
.bio__body { max-width: none; }
.bio__body > p { margin: 0 0 1.05em; }

/* ============================================================
   v19 — DE-TEMPLATING PASS
   Numbers opt-in, icon row -> ruled editorial list, hero +
   section rhythm variants. Copy untouched.
   ============================================================ */

/* 1. card counters are now OPT-IN (.feature-grid--numbered).
      Topic/category grids lose their arbitrary 01-08 numbering. */
.feature::before { display: none; }
.feature-grid--numbered .feature::before { display: block; }

/* 2. "Why Clients Choose" icon cards -> quiet ruled editorial columns */
.value { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--navy-700); text-align: left; }
.value:hover { transform: none; box-shadow: none; }
.value__icon { display: none; }
.value h3 { margin: 0 0 .45em; font-size: 1.02rem; }
.value p { color: var(--text-soft); }

/* 3. hero + section rhythm variants */
.page-hero--compact { min-height: 0; padding: 84px 0 64px; }
.page-hero--compact h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section--compact { padding: 72px 0; }

/* stats: understated, believable */
.stats-band .metric__label { letter-spacing: 0; }

/* v19.1 — narrative body aligns with its left-set heading */
.section-head--left + .rich { margin-left: 0; }

/* v19.2 — values container loses its card chrome too; breathing room between rows */
.values { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; gap: 30px; }
.value { border-right: 0; border-bottom: 0; }
.value:hover { background: none; }
@media (max-width: 940px) { .values { gap: 26px; } }

/* ============================================================
   v20 — services "index": editorial title | description directory.
   No step numbers, no filler arrows; whole row is the link.
   ============================================================ */
.svc-index { border-top: 1px solid var(--navy-700); }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: 40px;
  align-items: start; padding: 32px 0 34px; border-bottom: 1px solid var(--line);
  color: var(--text); background: none; transition: none;
}
.svc-row:hover { background: none; padding-left: 0; text-decoration: none; }
.svc-row__title {
  margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.22;
  letter-spacing: -.01em; color: var(--navy-700); transition: color .2s var(--ease);
}
.svc-row__title::after {
  content: "\2192"; margin-left: .45em; color: var(--gold-text);
  opacity: 0; transform: translateX(-5px); display: inline-block;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.svc-row:hover .svc-row__title,
.svc-row:focus-visible .svc-row__title { color: var(--gold-deep); }
.svc-row:hover .svc-row__title::after,
.svc-row:focus-visible .svc-row__title::after { opacity: 1; transform: translateX(0); }
.svc-row__desc { margin: 0; color: var(--text-soft); max-width: 62ch; }
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 8px; padding: 26px 0 28px; }
}

/* ============================================================
   v21 — DE-CARD PASS: strip boxed-card chrome site-wide.
   Feature / service / resource cards become clean editorial
   blocks marked by a single top rule, no box, no hover lift.
   ============================================================ */

/* feature grids — service pages + blog */
.feature-grid { gap: 0 clamp(40px, 5vw, 72px); }
.feature {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line); padding: 30px 0 36px; transition: none;
}
.feature:hover { transform: none; box-shadow: none; border-color: var(--line); }
.feature h3, .feature > h2 { color: var(--navy-700); }

/* contact service + consultation-process cards */
.svc-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line); padding: 28px 0 32px; transition: none;
}
.svc-card::after { display: none; }
.svc-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.svc-card--feature { background: none; border-top: 2px solid var(--navy-700); }

/* resources cards */
.res-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line); padding: 28px 0 32px; transition: none;
}
.res-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.res-grid { gap: 0 clamp(36px, 4vw, 56px); }

/* ============================================================
   v22 — audit fixes
   ============================================================ */
/* contact page 320px reflow: let grid columns and the select shrink */
.contact-grid > * { min-width: 0; }
.field select { min-width: 0; }

/* nav landmark wrapper participates in header flex as if absent */
.primary-nav { display: contents; }

/* form status + validation states */
.form-status { margin-top: 14px; font-size: .95rem; color: var(--navy-700); }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #8a2323; font-weight: 600; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #8a2323; }

/* footer column headings are h2 now (semantics); keep the h4 look */
.site-footer h2 { color: var(--white); font-family: var(--ff-body); font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 18px; font-weight: 700; }

/* v22.1 — long unbreakable strings (URLs, emails) must wrap on small screens */
.contact-grid { overflow-wrap: anywhere; }

/* ─── Accreditation badges ───────────────────────────────────────────────
   Awarding bodies supply these in fixed colours, so each sits on its own
   light panel rather than being recoloured to match the site. */
.accreditations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding-top: 26px;
  margin-bottom: 26px;
  border-top: 1px solid var(--line-dark);
}
.accreditations__title {
  width: 100%;
  margin: 0;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.accreditation {
  margin: 0;
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 0;
}
.accreditation img {
  display: block;
  width: 150px;
  height: auto;
  border-radius: 4px;
}
.accreditation figcaption {
  margin-top: 8px;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--navy);
  max-width: 150px;
}
.accreditations__note {
  margin: 0;
  font-size: .84rem;
  color: var(--on-dark-soft);
  max-width: 46ch;
}

/* On a light section the panel is unnecessary, but the badge still needs
   breathing room from the surrounding text. */
.section .accreditations {
  border-top: 0;
  padding-top: 0;
  gap: 26px;
}
.section .accreditations__title { color: var(--text-soft); }
.section .accreditation {
  background: transparent;
  padding: 0;
  border: 0;
}
.section .accreditation img { width: 190px; }
.section .accreditation figcaption { color: var(--text-soft); max-width: 190px; }
.section .accreditations__note { color: var(--text-soft); }

@media (max-width: 560px) {
  .accreditation img { width: 130px; }
  .section .accreditation img { width: 160px; }
}

/* A self-verifying certificate is the issuer's own widget rather than an
   image. It keeps the same white panel and the same height as the other
   badges, so the row reads as one set and the captions line up. */
.accreditation--live iframe {
  display: block;
  width: 150px;
  height: 150px;
  border: 0;
  color-scheme: light;
}
/* Letterboxing the logos into the same height band as the widget is what
   keeps every caption on the same line. */
.accreditation img {
  height: 150px;
  object-fit: contain;
}
.accreditations { align-items: flex-start; }
.section .accreditation img { width: 190px; height: 150px; }
.section .accreditation--live iframe { width: 190px; }

@media (max-width: 560px) {
  .accreditation img,
  .accreditation--live iframe { height: 120px; }
  .section .accreditation img,
  .section .accreditation--live iframe { width: 150px; height: 120px; }
}