/* ==================================================================
   Independent financial advice firm — shared stylesheet
   Plus Jakarta Sans, graphite ground, warm-grey tints, gold accent,
   heavy corner rounding, pill buttons.

   The dark ground was a deep green carried over from an earlier design
   reference. It moved to graphite once the site had real photography: the images are cool stone and warm brass, and green was
   the one hue actively fighting them — brass turned olive under it.
   Neutral gets out of the way, and the gold mark reads harder against
   it. The token NAMES are still --green-* so that nothing else in the
   sheet had to be touched; they are hue-agnostic slots, not a claim
   about the colour.
   ================================================================== */

/* ----------------------------- tokens ----------------------------- */
:root {
  /* Navy, as of the Sterling & Law identity. The ground follows the mark
     rather than the other way round: the logo is a single deep navy ink,
     and a graphite header under a navy mark reads as two brands sharing a
     page. The ramp is one hue at four depths so tints never go muddy. */
  --green-900: #16233f;
  --green-800: #1f2f4e;
  --green-700: #324367;
  --green-600: #4a5c80;
  --mint-100: #f5f6f9;
  --mint-200: #e6eaf1;
  /* --gold is used for small uppercase eyebrow text on white and on the
     light tint, so it has to clear 4.5:1 on BOTH. The old #927f3d only
     managed 4.0 and 3.7 — it read as decorative and failed AA for text
     that size. #806d2c clears it on both (5.07 / 4.68) and is close
     enough to the logo's gold that they still belong together.
     --gold-bright is the version for dark grounds, where the problem is
     reversed. */
  --gold: #806d2c;
  --gold-bright: #bda558;
  --sand: #e8b913;
  --ink: #141d2e;
  --ink-60: #4d586b;
  --line: #dde2ea;
  --white: #ffffff;
  --bone: #f3f4f7;

  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(20, 29, 46, .08);
  --shadow-md: 0 14px 40px rgba(20, 29, 46, .12);
  --shadow-lg: 0 30px 70px rgba(20, 29, 46, .18);

  --wrap: 1200px;
  --gutter: 24px;
  --header-h: 84px;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------- reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; letter-spacing: -.015em; line-height: 1.18; }
p { margin: 0 0 1.15em; }
ul { margin: 0; padding: 0; list-style: none; }

h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.section { padding: clamp(56px, 7vw, 108px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.section--mint { background: var(--mint-100); }
.section--plain { background: var(--white); }
.section--green { background: var(--green-900); color: var(--white); }
.section--green h2, .section--green h3 { color: var(--white); }

.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .9rem;
}
.section--green .eyebrow { color: var(--gold-bright); }
.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); color: var(--ink-60); }
.section--green .lead { color: rgba(255, 255, 255, .82); }
.muted { color: var(--ink-60); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }

.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 0; left: 0; width: auto; height: auto; margin: 0;
  padding: 12px 18px; clip: auto; clip-path: none; overflow: visible;
  background: var(--green-900); color: #fff; z-index: 999; border-radius: 0 0 var(--radius-xs) 0;
}
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------- buttons ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 30px; border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-size: .95rem; font-weight: 600; line-height: 1.25; text-align: center;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--green-900); color: var(--white); }
.btn--primary:hover { background: var(--green-700); }
.btn--gold { background: var(--gold); color: var(--white); }
.btn--gold:hover { background: var(--gold-bright); }
.btn--ghost { background: transparent; color: var(--green-900); border-color: var(--green-900); }
.btn--ghost:hover { background: var(--green-900); color: var(--white); }
.btn--light { background: var(--white); color: var(--green-900); }
.btn--light:hover { background: var(--mint-200); }
.btn--wide { width: 100%; }
.btn--square {
  border-radius: 2px; background: var(--ink); color: var(--white);
  padding: 19px 40px; font-size: .95rem; letter-spacing: .01em;
}
.btn--square:hover { background: var(--green-900); }

.arrow-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--green-900); }
.arrow-link::after { content: "→"; transition: transform .2s ease; }
.arrow-link:hover::after { transform: translateX(4px); }
.section--green .arrow-link { color: var(--gold-bright); }

/* ----------------------------- header ----------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 14px; min-height: var(--header-h); flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 13px; line-height: 1.05; flex: 0 0 auto; }
.brand__icon { width: auto; height: 34px; }
.brand__text { display: flex; flex-direction: column; align-items: stretch; }
.brand__name { width: auto; height: 15px; align-self: flex-start; }
/* the hairline and strapline mirror the supplied lockup; set as live text so
   they stay crisp at header size instead of blurring as a 5px raster */
.brand__rule {
  display: block; height: 1px; margin: 6px 0 5px;
  background: linear-gradient(90deg, rgba(146,127,61,0) 0%, var(--gold) 22%, var(--gold) 78%, rgba(146,127,61,0) 100%);
}
.brand__mark {
  font-size: 1.3rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--green-900);
}
.brand__sub {
  font-size: .46rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); text-align: center; white-space: nowrap;
}
.brand--footer { margin-bottom: 1rem; }
.brand--footer .brand__icon { height: 46px; }
.brand--footer .brand__name { height: 19px; }
.brand--footer .brand__sub { font-size: .54rem; letter-spacing: .28em; color: var(--gold-bright); }
.brand--footer .brand__rule { margin: 8px 0 7px; }
.footer-brand .brand__sub { color: var(--gold-bright); }
.header-spacer { flex: 1 1 auto; }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pill {
  display: inline-flex; align-items: center; gap: .5em; padding: 9px 15px;
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--white);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pill:hover { border-color: var(--green-900); }
.pill--solid { background: var(--green-900); color: var(--white); border-color: var(--green-900); }
.pill--solid:hover { background: var(--green-700); border-color: var(--green-700); }

.lang { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.lang button {
  border: 0; background: transparent; padding: 8px 12px; font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; cursor: pointer; color: var(--ink-60);
}
.lang button[aria-pressed="true"] { background: var(--green-900); color: var(--white); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 46px; height: 46px; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  background: var(--white); cursor: pointer;
}
.nav-toggle span { position: relative; display: block; width: 18px; height: 1.6px; background: var(--green-900); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--green-900);
  transition: transform .22s ease, top .22s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* desktop nav */
.mainnav { display: none; }
.mainnav > ul { display: flex; align-items: center; gap: 0; }
.mainnav > ul > li { position: relative; }
.mainnav > ul > li > a {
  display: inline-flex; align-items: center; gap: .35em; padding: 9px 10px; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--green-900); border-radius: var(--radius-xs);
}
.mainnav > ul > li > a:hover, .mainnav li.is-current > a { color: var(--gold); }
.has-sub > a::after {
  content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.submenu {
  position: absolute; top: calc(100% + 12px); left: auto; right: 0; min-width: 300px; padding: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mainnav li:hover > .submenu, .mainnav li:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block; padding: 9px 12px; font-size: .88rem; border-radius: var(--radius-xs); color: var(--ink);
}
.submenu a:hover { background: var(--mint-100); color: var(--green-900); }

/* mobile drawer */
.drawer {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 55;
  /* dvh tracks the mobile browser's collapsing toolbar; vh is the fallback */
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 18px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
  transform: translateY(-8px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer > ul > li { border-bottom: 1px solid var(--line); }
.drawer > ul > li > a { display: block; padding: 15px 0; font-size: 1.05rem; font-weight: 600; color: var(--green-900); min-height: 44px; }
.drawer .submenu-m { padding: 0 0 10px 14px; }
.drawer .submenu-m a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: .95rem; color: var(--ink-60); }
.drawer .submenu-m a:hover { color: var(--green-900); }
body.nav-open { overflow: hidden; }

/* ------------------------------ hero ------------------------------ */
.hero { position: relative; background: var(--green-900); color: var(--white); overflow: hidden; }
/* The photograph used to sit at .3 under an almost opaque slab, which
   made every inner page a flat colour block with a ghost behind it.
   Now the image carries the band and the gradient only does what it has
   to: stay dense enough on the left for white text to pass contrast,
   then get out of the way across to the right. */
.hero__bg { position: absolute; inset: 0; opacity: .62; }
.hero__bg img, .hero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(22, 35, 63, .95) 10%, rgba(22, 35, 63, .78) 46%, rgba(22, 35, 63, .42) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 84px);
}
.hero h1 { max-width: 16ch; }
.hero__body { max-width: 62ch; font-size: clamp(1rem, .96rem + .3vw, 1.16rem); color: rgba(255, 255, 255, .86); }
.hero__grid { display: grid; gap: 40px; align-items: start; }
.hero--page .hero__inner { padding-top: clamp(48px, 5.5vw, 78px); padding-bottom: clamp(48px, 5.5vw, 78px); }
.hero--page h1 { max-width: 20ch; }

.breadcrumb { font-size: .82rem; color: rgba(255, 255, 255, .7); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--gold-bright); }

/* --------------------- split hero (home page) --------------------- */
.hero-split {
  position: relative; overflow: hidden; background: var(--bone);
  display: flex; align-items: center;
  min-height: clamp(520px, 78vh, 760px);
}
.hero-split__media { position: absolute; inset: 0; z-index: 1; }
.hero-split__media, .hero-split__media picture { display: block; }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero-split__wedge { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-split__inner { position: relative; z-index: 3; width: 100%; }
.hero-split__content { max-width: min(34rem, 40vw); }
.hero-split__content h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.1vw, 3.55rem);
  line-height: 1.06; letter-spacing: -.025em; font-weight: 700;
  color: var(--ink); max-width: 20ch; text-wrap: balance; margin-bottom: 1.6rem;
}
/* Darker than the site's usual body grey, on purpose. This paragraph is the
   only body copy that sits on a translucent sheet with moving footage behind
   it, so its background is not a fixed colour. At --ink-60 it measured 4.37:1
   against the glass — under AA, and it would dip further whenever a darker
   part of the loop passes behind. #303a4b measures against the navy-tinted glass below. */
.hero-split__content p {
  font-size: 1rem; line-height: 1.75; color: #303a4b; max-width: 46ch; margin-bottom: 2rem;
}

/* The diagonal, take two. The footage now runs edge to edge behind the whole
   hero and the LEFT panel is what gets clipped — a frosted sheet over the
   video rather than an opaque block beside it. Same diagonal, same text
   position; the difference is that the motion carries across the full width
   and shows through behind the words.

   The polygon is the exact inverse of the one the media used to carry
   (46% 0, 100% 0, 100% 100%, 74% 100%), so the edge lands where it always
   did and the measured text clearance still holds. */
@media (min-width: 900px) {
  .hero-split__wedge {
    clip-path: polygon(0 0, 46% 0, 74% 100%, 0 100%);
    background: rgba(246, 246, 244, .82);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    backdrop-filter: blur(22px) saturate(125%);
    border-right: 1px solid rgba(255, 255, 255, .5);
  }
  /* Where the browser cannot blur, translucency alone would leave the text
     sitting on unblurred detail. Go nearly opaque instead — it loses the
     effect but never the legibility. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-split__wedge { background: rgba(246, 246, 244, .94); }
  }
}
/* Below the breakpoint the diagonal reads as noise, so the phone gets the
   same IDEA rather than the same shape: footage full-bleed behind everything,
   text on a frosted card sitting at the bottom of it. The old treatment was a
   170-300px photo strip with the words underneath, which gave the footage
   nowhere to live and wasted the top of the screen. */
@media (max-width: 899px) {
  .hero-split {
    display: flex; align-items: flex-end;
    min-height: min(68vh, 620px);
  }
  .hero-split__media { position: absolute; inset: 0; height: 100%; }
  .hero-split__media img { object-position: 50% 42%; }
  .hero-split__wedge { display: none; }
  .hero-split__inner { padding-top: 0; padding-bottom: clamp(18px, 4vw, 30px); }
  .hero-split__content {
    max-width: none;
    padding: clamp(20px, 5vw, 28px) clamp(18px, 4.5vw, 26px) clamp(22px, 5vw, 30px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(246, 246, 244, .91);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-split__content { background: rgba(246, 246, 244, .96); }
  }
  .hero-split__content h1 { max-width: 16ch; margin-bottom: 1.1rem; }
  .hero-split__content p { margin-bottom: 1.5rem; }
}

/* Very short screens — a landscape phone, or a small window. 68vh of hero
   would leave nothing else visible, so shrink it and let the card breathe. */
@media (max-width: 899px) and (max-height: 520px) {
  .hero-split { min-height: 420px; }
  .hero-split__content { padding: 16px 18px 18px; }
}

/* --------------------------- callback card ------------------------ */
.card-form {
  background: var(--white); color: var(--ink); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-lg);
}
.card-form h3 { font-size: 1.28rem; margin-bottom: 1.1rem; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-60); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); font-size: .95rem; transition: border-color .2s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green-700); outline: none; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--ink-60); margin: 14px 0 18px; }
.consent input { margin-top: 4px; width: 16px; height: 16px; flex: 0 0 auto; }
.form-note { font-size: .78rem; color: var(--ink-60); margin-top: 12px; }
.form-success {
  display: none; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--mint-100); color: var(--green-900); font-size: .9rem; font-weight: 600;
}
.form-success.is-visible { display: block; }

/* ------------------------------ stats ----------------------------- */
.stats { display: grid; gap: 28px; text-align: center; }
.stat__fig {
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); font-weight: 700; line-height: 1;
  color: var(--gold-bright); letter-spacing: -.02em;
}
.stat__label { margin: .6rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .8); }

/* ------------------------------ cards ----------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.card {
  display: flex; flex-direction: column; gap: .5rem; padding: 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .25rem; }
.card p { color: var(--ink-60); font-size: .95rem; margin-bottom: .6rem; }
.card .arrow-link { margin-top: auto; font-size: .9rem; }
.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: .6rem;
  border-radius: var(--radius-sm); background: var(--mint-100); color: var(--green-900);
}
.card__icon svg { width: 22px; height: 22px; }

.card--num .num {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--gold); margin-bottom: .5rem;
}

/* split feature */
.split { display: grid; gap: 32px; align-items: center; }
.split__media { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.split__media img, .split__media svg { width: 100%; height: 100%; object-fit: cover; }
.split--rev .split__media { order: -1; }

/* checklist */
.checklist li {
  position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--ink-60);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--mint-200);
}
.checklist li::after {
  content: ""; position: absolute; left: 6px; top: 13px; width: 6px; height: 3px;
  border-left: 1.8px solid var(--green-900); border-bottom: 1.8px solid var(--green-900);
  transform: rotate(-45deg);
}

/* adviser cards */
.adviser {
  display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px;
  background: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.adviser img { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.adviser__name { font-weight: 600; font-size: .98rem; color: var(--ink); }
.adviser__meta { font-size: .82rem; color: var(--ink-60); }

.person { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.person img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--mint-100); }
.person__body { padding: 20px 22px 24px; }
.person__body h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.person__role { font-size: .88rem; color: var(--gold); font-weight: 600; }
.person__focus { font-size: .88rem; color: var(--ink-60); margin: .4rem 0 0; }

/* insight cards */
.post { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post__meta { font-size: .76rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.post__body h3 { font-size: 1.12rem; }
.post__body p { font-size: .92rem; color: var(--ink-60); }

/* quotes */
.quote {
  background: var(--white); border-radius: var(--radius-md); padding: 30px 32px; box-shadow: var(--shadow-sm);
}
.quote p { font-size: 1.05rem; font-style: italic; color: var(--ink); }
.quote cite { font-style: normal; font-weight: 600; font-size: .88rem; color: var(--gold); }

/* filter bar */
.filterbar { display: grid; gap: 14px; max-width: 620px; margin: 0 auto; }
.filterbar select {
  width: 100%; padding: 15px 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--line);
  background: var(--white); font-size: .95rem;
}

/* prose blocks */
.prose h2 { margin-top: 2.2rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-60); }

/* long-form article */
.article p { font-size: 1.04rem; line-height: 1.85; }
.article h2 { margin-top: 2.6rem; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); }
.article .lead { font-size: 1.18rem; line-height: 1.7; color: var(--ink); margin-bottom: 2rem; }
.article-meta { font-size: .84rem; color: rgba(255, 255, 255, .72); margin: .6rem 0 0; }
.hero--article h1 { max-width: 24ch; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }

.post__img { display: block; overflow: hidden; }
.post__img img { transition: transform .35s ease; }
.post:hover .post__img img { transform: scale(1.04); }
.post__body h3 a:hover { color: var(--gold); }

/* honeypot — off-screen for people, present for bots */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; }
/* the children need a zero footprint too, or they extend past the clipped parent */
.hp label, .hp input { display: block; width: 1px; height: 1px; padding: 0; border: 0; font-size: 1px; }

.field__hint { display: block; font-size: .8rem; color: var(--ink-60); margin-top: 6px; line-height: 1.5; }
.field input[type="file"] {
  padding: 12px 14px; font-size: .9rem; background: var(--mint-100); cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border: 0; border-radius: var(--radius-pill);
  background: var(--green-900); color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.field input[readonly] { background: var(--mint-100); color: var(--green-900); font-weight: 600; }

.form-error {
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: #fbeeea; border-left: 3px solid #9a6a55; color: #6f4636;
  font-size: .9rem; font-weight: 600;
}

/* copyable address row */
.mailrow {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 18px 22px; margin: 1.4rem 0 .6rem;
  background: var(--mint-100); border-radius: var(--radius-md);
}
.mailrow__address { font-size: 1.05rem; font-weight: 600; color: var(--green-900); word-break: break-all; }
.mailrow__copy { padding: 11px 20px; font-size: .85rem; white-space: nowrap; }
.mailrow__alt { font-size: .9rem; margin-top: 0; }
.apply-role { font-size: .95rem; color: var(--ink-60); }
.apply-role strong { color: var(--green-900); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* founder card */
.founder {
  display: flex; flex-direction: column; padding: 30px 32px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border-left: 3px solid var(--gold);
}
.founder__name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; color: var(--green-900); }
.founder__role { font-size: .92rem; font-weight: 600; color: var(--gold); margin-top: .3rem; }
.founder__meta { font-size: .84rem; color: var(--ink-60); margin-top: .6rem; }
.founder__areas li { font-size: .92rem; color: var(--ink-60); padding: 7px 0; border-bottom: 1px solid var(--line); }
.founder__areas li:last-child { border-bottom: 0; }
.founder__areas strong { color: var(--green-900); display: block; font-size: .88rem; }
.founder__career li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.founder__career li:last-child { border-bottom: 0; }
.founder__career strong { display: block; font-size: .9rem; color: var(--green-900); }
.founder__when { display: block; font-size: .78rem; color: var(--gold); font-weight: 600; margin: .2rem 0 .4rem; }
.founder__career span:last-child { display: block; font-size: .9rem; color: var(--ink-60); line-height: 1.65; }
.founder__note { font-size: .82rem; color: var(--ink-60); margin: 1rem 0 0; font-style: italic; }

/* problem-led routes into the practice areas */
.routes { display: grid; gap: 10px; }
.routes a {
  display: grid; gap: 6px; padding: 20px 56px 20px 24px; position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.routes a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.routes a::after {
  content: "→"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.1rem; transition: transform .2s ease;
}
.routes a:hover::after { transform: translateY(-50%) translateX(4px); }
.routes__q { font-size: 1.02rem; font-weight: 600; color: var(--green-900); line-height: 1.4; }
.routes__tag { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--gold); }

/* deadline cards */
.clock {
  display: flex; flex-direction: column; padding: 26px 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border-top: 3px solid var(--gold);
}
.clock__period {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--green-900);
  line-height: 1; margin-bottom: .7rem;
}
.clock h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.clock p { font-size: .93rem; color: var(--ink-60); margin: 0; }

/* the counterpart to .checklist, for things we are saying no to */
.crosslist li { position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--ink-60); font-size: .95rem; }
.crosslist li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px;
  border-radius: 50%; background: #efe6e2;
}
.crosslist li::after {
  content: ""; position: absolute; left: 5.5px; top: 12px; width: 7px; height: 7px;
  background:
    linear-gradient(45deg, transparent 43%, #9a6a55 43%, #9a6a55 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #9a6a55 43%, #9a6a55 57%, transparent 57%);
}

/* vacancy listings */
.vacancies { display: grid; gap: 16px; }
.vacancy {
  display: grid; gap: 18px; padding: 26px 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.vacancy:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.vacancy h3 { margin-bottom: .35rem; }
.vacancy p { color: var(--ink-60); font-size: .95rem; margin-bottom: .9rem; }
.vacancy__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.vacancy__meta li {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--green-900);
  background: var(--mint-100); border-radius: var(--radius-pill); padding: 6px 14px;
}
.vacancy__side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.vacancy__posted { font-size: .78rem; color: var(--ink-60); }

/* FAQ disclosure */
.faq__item {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq__item summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-weight: 600; font-size: 1.02rem; color: var(--green-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__item p { color: var(--ink-60); padding: 0 34px 18px 0; margin: 0; }

/* CTA band */
.cta-band { background: var(--green-900); color: var(--white); border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 64px); text-align: center; }
.cta-band .lead { color: rgba(255, 255, 255, .82); margin-left: auto; margin-right: auto; max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.4rem; }

/* placeholder notice */
.notice {
  border-left: 3px solid var(--gold); background: var(--mint-100); padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .88rem; color: var(--ink-60);
}

/* ----------------------------- footer ----------------------------- */
.site-footer { background: var(--green-900); color: rgba(255, 255, 255, .78); padding: clamp(48px, 6vw, 84px) 0 32px; font-size: .92rem; }
.site-footer a:hover { color: var(--gold-bright); }
.footer-grid { display: grid; gap: 34px; }
.footer-col h4 { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 1rem; }
.footer-col li { margin-bottom: .55rem; }
.footer-brand .brand__mark { color: var(--white); }
.footer-brand p { max-width: 34ch; margin-top: 1rem; }
.newsletter { display: flex; gap: 8px; margin-top: 1rem; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 180px; padding: 13px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--white);
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .5); }
.footer-legal {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .78rem; line-height: 1.7; color: rgba(255, 255, 255, .6);
}
.footer-legal p { margin-bottom: .8rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 20px; }

/* --------------------------- breakpoints -------------------------- */
@media (min-width: 460px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .vacancy { grid-template-columns: 1fr auto; align-items: center; }
  .vacancy__side { align-items: flex-end; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .filterbar { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1040px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .mainnav { display: block; }
  .nav-toggle { display: none; }
  .header-actions { display: none; }
  .drawer { display: none; }
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (max-width: 1359px) {
  .header-actions .pill--phone { display: none; }
}
@media (max-width: 1039px) {
  .header-actions .pill--login { display: none; }
}
@media (max-width: 780px) {
  .header-actions .pill--phone { display: none; }
  .adviser { border-radius: var(--radius-md); }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; --header-h: 74px; }
  .site-header__inner { gap: 10px; }
  .brand { gap: 8px; }
  .brand__icon { height: 30px; }
  .brand__name { height: 13px; }
  .brand__sub { font-size: .42rem; letter-spacing: .24em; }
  .brand__rule { margin: 5px 0 4px; }
  .brand__sub { font-size: .44rem; letter-spacing: .1em; margin-top: 5px; }
  .lang button { padding: 11px 13px; font-size: .74rem; }
  .nav-toggle { width: 42px; height: 42px; }
}

/* nothing may push the page sideways */
html, body { overflow-x: hidden; }

@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .brand__icon { height: 27px; }
  .brand__name { height: 12px; }
  .brand__sub { font-size: .4rem; letter-spacing: .18em; }
  .btn { padding: 14px 22px; font-size: .9rem; }
}

/* the language pair only stops fitting beside the wordmark below ~360px;
   the drawer carries a language link there, so it is not lost */
@media (max-width: 359px) {
  .lang { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero-split { min-height: 0; }
  .hero-split__inner { padding-top: 32px; padding-bottom: 36px; }
  .section { padding: 44px 0; }
  .drawer { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Glossary (practice-area pages) ---------------------------------- */
.glossary { margin: 2rem 0 0; }
.glossary__row { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem;
  padding: 1.05rem 0; border-top: 1px solid var(--line); }
.glossary__row:last-child { border-bottom: 1px solid var(--line); }
.glossary dt { font-weight: 700; font-size: 1.02rem; color: var(--green-900);
  line-height: 1.4; letter-spacing: -.01em; }
.glossary dd { margin: 0; color: var(--ink-60); font-size: .96rem; line-height: 1.65; }

@media (max-width: 760px) {
  .glossary__row { grid-template-columns: 1fr; gap: .4rem; padding: .95rem 0; }
}

/* ---- Glossary (practice-area pages) ---------------------------------- */
.glossary { margin: 2rem 0 0; }
.glossary__row { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem;
  padding: 1.05rem 0; border-top: 1px solid var(--line); }
.glossary__row:last-child { border-bottom: 1px solid var(--line); }
.glossary dt { font-weight: 700; font-size: 1.02rem; color: var(--green-900);
  line-height: 1.4; letter-spacing: -.01em; }
.glossary dd { margin: 0; color: var(--ink-60); font-size: .96rem; line-height: 1.65; }

@media (max-width: 760px) {
  .glossary__row { grid-template-columns: 1fr; gap: .4rem; padding: .95rem 0; }
}


/* ---- Hero video ------------------------------------------------------
   Sits over the still inside .hero-split__media, full-bleed like it, so
   the frosted wedge crops both identically. Revealed only once main.js
   confirms frames are running (.is-playing) — otherwise the still, which
   is a frame of this same clip, simply stays. Below 900px the portrait
   cut is used and the video never loads at all under reduced motion.  */
.hero-split__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.hero-split__video.is-playing { opacity: 1; }

@media (max-width: 899px) {
  .hero-split__video { object-position: 50% 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-split__video { display: none; }
}

/* ---- Compliance blocks ----------------------------------------------
   Risk statements and the regulatory line. Styled to be read rather than
   skimmed past: an FCA firm's site is a financial promotion, and a risk
   warning set in 10px grey is a warning nobody receives.              */
.riskbox {
  margin: 2.4rem 0 0; padding: 18px 22px;
  background: var(--mint-100); border-left: 3px solid var(--gold);
  border-radius: var(--radius-xs);
}
.riskbox__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem;
}
.riskbox p { font-size: .92rem; line-height: 1.65; color: var(--ink-60); margin: 0 0 .7rem; }
.riskbox p:last-child { margin-bottom: 0; }

.regline {
  font-size: .86rem; line-height: 1.7; color: rgba(255, 255, 255, .78);
  margin: 0 0 .9rem; max-width: 92ch;
}
.regline a { text-decoration: underline; text-underline-offset: 2px; }
.regline--muted { color: rgba(255, 255, 255, .62); font-size: .82rem; }
/* Unmissable while the FRN is still a placeholder — this must not ship
   quietly. */
.regline--pending {
  color: #ffd9cc; background: rgba(180, 71, 44, .28);
  border-left: 3px solid #d08a72; padding: 12px 16px; border-radius: var(--radius-xs);
}