/* =============================================================================
   Insurance Broker — Design System
   Navy / white. Established, sophisticated, modern. Mobile-first.
   Sections:
     1. Tokens (colour, type, space, layout)
     2. Reset & base
     3. Typography
     4. Layout & utilities
     5. Buttons & CTAs
     6. Header & navigation
     7. Footer
     8. Blocks (hero, intro, services, sectors, reasons, stats, cta, faq…)
     9. Cards
    10. Forms
    11. Accessibility helpers & motion
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Brand — navy scale */
  --navy-900: #081627;   /* deepest — footer, overlays */
  --navy-800: #0c2038;
  --navy-700: #113050;   /* primary brand */
  --navy-600: #1a4066;
  --navy-500: #29557f;
  --navy-100: #e7edf4;   /* tint wash */

  /* Accent — restrained brass/gold for that heritage, "private-bank" note.
     Used sparingly: hairlines, eyebrows, small marks. Never large fills. */
  --gold-600: #9c7c3c;
  --gold-500: #b8975a;
  --gold-300: #d9c79b;

  /* Neutrals — deliberately warmed (editorial, not clinical) */
  --ink:     #10192a;   /* primary text */
  --slate:   #47566a;   /* secondary text */
  --muted:   #6e7a8a;   /* captions, meta */
  --line:    #e2e0da;   /* borders — warm */
  --line-2:  #edece7;   /* faint dividers */
  --mist:    #f4f2ed;   /* section wash — warm alabaster */
  --paper:   #faf9f6;   /* warm paper */
  --white:   #ffffff;

  /* Semantic aliases */
  --bg:            var(--white);
  --surface:       var(--white);
  --text:          var(--ink);
  --text-muted:    var(--slate);
  --brand:         var(--navy-700);
  --brand-strong:  var(--navy-800);
  --brand-ink:     var(--white);
  --accent:        var(--gold-500);
  --focus:         #2f7fd1;

  /* Typography */
  --font-head: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (~1.22 ratio, clamps for mobile→desktop).
     Deliberately restrained — the design reads "considered" when type sits
     smaller than feels natural and lets whitespace do the work. */
  --step--1: clamp(0.76rem, 0.735rem + 0.12vw, 0.81rem);
  --step-0:  clamp(0.92rem, 0.895rem + 0.16vw, 0.98rem);
  --step-1:  clamp(1.06rem, 1.0rem + 0.28vw, 1.2rem);
  --step-2:  clamp(1.24rem, 1.13rem + 0.55vw, 1.56rem);
  --step-3:  clamp(1.45rem, 1.27rem + 0.9vw, 1.95rem);
  --step-4:  clamp(1.7rem, 1.42rem + 1.4vw, 2.45rem);
  --step-5:  clamp(1.95rem, 1.58rem + 1.95vw, 3rem);
  --step-6:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);   /* hero display (~52px max) */

  --leading-tight: 1.1;
  --leading-snug:  1.28;
  --leading-body:  1.65;

  /* Spacing scale */
  --space-2xs: 0.35rem;
  --space-xs:  0.6rem;
  --space-sm:  0.9rem;
  --space-md:  1.35rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 2px;
  --radius-lg: 3px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(15, 27, 42, 0.06), 0 2px 6px rgba(15, 27, 42, 0.05);
  --shadow-md: 0 6px 24px rgba(15, 27, 42, 0.10);
  --shadow-lg: 0 20px 55px rgba(8, 22, 39, 0.16);
  --ring: 0 0 0 3px rgba(47, 127, 209, 0.45);

  --section-y: var(--space-2xl);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 900px) {
  :root { --section-y: var(--space-3xl); }
}

/* 2. RESET & BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Gold behind the page: body paints its own background, so this only shows in
   the overscroll rubber-band above the header and below the footer — a flash
   of brand rather than default white. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--gold-500); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-600); }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-xl) 0; }

/* 3. TYPOGRAPHY ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 560;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--brand-strong);
  margin: 0 0 var(--space-sm);
  font-optical-sizing: auto;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); }
p { margin: 0 0 var(--space-md); }
.lead { font-size: var(--step-1); line-height: var(--leading-snug); color: var(--text-muted); }

/* Eyebrow / kicker — small caps label, the "established" signature */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: var(--gold-500);
  flex: none;
}
.on-dark .eyebrow { color: var(--gold-300); }
.on-dark .eyebrow::before { background: var(--gold-300); }

.section-head { max-width: 640px; margin-bottom: var(--space-xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* Breadcrumb — a quiet inline trail with "/" separators. The markup is an
   ordered list (correct for assistive tech), so the list furniture is reset. */
.breadcrumb { margin-bottom: var(--space-lg); font-size: var(--step--1); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.breadcrumb li { display: flex; align-items: center; gap: 0.55rem; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--muted); opacity: 0.6; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-600); text-decoration: underline; text-underline-offset: 0.2em; }
.breadcrumb [aria-current="page"] { color: var(--brand-strong); font-weight: 500; }
.on-dark .breadcrumb li, .on-dark .breadcrumb a { color: rgba(255,255,255,0.7); }
.on-dark .breadcrumb [aria-current="page"] { color: #fff; }

/* 4. LAYOUT & UTILITIES ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section.tight { padding-block: var(--space-2xl); }

.bg-mist   { background: var(--mist); }
.bg-paper  { background: var(--paper); }
.bg-navy   { background: var(--navy-700); }
.bg-navy-deep { background: var(--navy-900); }

/* Dark section context */
.on-dark { color: rgba(255,255,255,0.86); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lead { color: rgba(255,255,255,0.78); }
.on-dark a { color: var(--gold-300); }

.grid { display: grid; gap: var(--space-lg); }
.grid.cols-2 { grid-template-columns: 1fr; }
.grid.cols-3 { grid-template-columns: 1fr; }
.grid.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); } }

.stack > * + * { margin-top: var(--space-md); }
.measure { max-width: 62ch; }
.center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Rich text (WYSIWYG / post content) */
.prose { color: var(--text-muted); }
.prose > * { max-width: 68ch; }
.prose h2, .prose h3 { color: var(--brand-strong); margin-top: var(--space-xl); }
.prose ul, .prose ol { margin: 0 0 var(--space-md) 1.2em; }
.prose li { margin-bottom: var(--space-2xs); }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--brand); }

/* 5. BUTTONS & CTAs -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 42px;
  padding: 0.7em 1.4em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }

/* Gold is reserved for the claims route, site-wide (client request: the "Make a
   Claim" button must be unmissable). If gold shows up on ordinary CTAs it stops
   signalling anything — dark sections use .btn--light for their primary action
   instead. */
.btn--gold { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); }

/* Solid primary for dark sections, where navy-on-navy has no contrast. */
.btn--light { background: var(--white); color: var(--navy-800); border-color: var(--white); }
.btn--light:hover { background: var(--navy-100); border-color: var(--navy-100); color: var(--navy-900); }
.on-dark a.btn--light { color: var(--navy-800); }
.on-dark a.btn--light:hover { color: var(--navy-900); }

.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy-700); color: var(--navy-800); }

.on-dark .btn--ghost,
.site-header .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.35); }
.on-dark .btn--ghost:hover,
.site-header .btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.06); color: var(--white); }

.btn--lg { min-height: 48px; padding: 0.85em 1.75em; font-size: var(--step-0); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* text link with arrow */
.arrow-link { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; text-decoration: none; color: var(--navy-700); }
.arrow-link .a { transition: transform .2s var(--ease); }
.arrow-link:hover .a { transform: translateX(3px); }

/* 6. HEADER & NAV ---------------------------------------------------------- */
/* The header has three states, and the logo is a single white SVG inlined with
   `fill: currentColor` that simply inherits whichever one is active:
     1. solid    — navy bar in normal flow (pages with no hero behind it)
     2. overlay  — transparent over the hero artwork, gradient scrim only
     3. scrolled — solid navy again, utility bar collapsed
   Navy rather than white in the solid states is deliberate: it keeps one logo
   asset working everywhere, and avoids the mark reading as pasted onto a white
   banner. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy-800);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 58px; }
.site-brand { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-head); font-weight: 600; font-size: var(--step-0); color: var(--white); text-decoration: none; letter-spacing: 0.01em; }
/* The logo SVG fills with currentColor, so without this the global a:hover
   navy would tint the mark into the navy bar. The brand does not change
   colour on hover; the cursor is signal enough. */
.site-brand:hover { color: var(--white); }
.site-brand img { max-height: 40px; width: auto; }
/* Sized off the wordmark's 4.37:1 lockup — height is the control, width follows.
   Enlarged at the client's request. The small-screen step was the weak point
   (28px put the wordmark under 7px of cap height); it is capped by width rather
   than height there, so the lockup can grow without crowding the burger. */
.site-logo { height: 64px; width: auto; display: block; transition: height .3s var(--ease); }
@media (max-width: 619px) { .site-logo { height: 40px; max-width: 62vw; } }

/* Overlay — header sits *over* the hero so the artwork runs to the top of the
   viewport. Fixed, not sticky, so it takes no layout space. */
.has-overlay-header .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
}
/* The scrim. Enough tone to hold white type over a bright photo without
   reading as a bar in its own right. Sits behind the header's own content. */
.has-overlay-header .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8,22,39,0.78) 0%,
    rgba(8,22,39,0.42) 55%,
    rgba(8,22,39,0) 100%);
  transition: opacity .3s var(--ease);
}
/* Once the bar goes solid the scrim is redundant — fade it out rather than
   stacking two darks. */
.has-overlay-header .site-header.is-scrolled::before,
.has-overlay-header .site-header.has-mega-open::before { opacity: 0; }
.has-overlay-header .site-header.is-scrolled,
.has-overlay-header .site-header.has-mega-open { background: var(--navy-900); }

/* Hero reclaims the header's height in overlay mode, and its content clears
   the bar. Without this the headline sits under the nav. */
.has-overlay-header .hero { min-height: 100vh; min-height: min(100svh, 894px); }
.has-overlay-header .hero__inner { padding-block: clamp(7rem, 13vw, 10rem) clamp(4.5rem, 9vw, 7.5rem); }

/* Utility bar — a hairline of gold above the main nav. Contact routes and
   socials live here so the primary menu stays purely navigational. */
.header-utility {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(217,199,155,0.20);
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  overflow: hidden;
  max-height: 44px;
  transition: max-height .3s var(--ease), opacity .25s var(--ease);
}
/* Over the hero the bar is part of the scrim, not a surface of its own. */
.has-overlay-header .header-utility { background: transparent; }
.header-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 32px; }
.header-utility__contact { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.header-utility a, .header-utility span > span { color: rgba(255,255,255,0.86); text-decoration: none; }
.header-utility__contact > a, .header-utility__contact > span { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; }
.header-utility__contact a:hover { color: var(--gold-300); }
.header-utility svg { width: 13px; height: 13px; color: var(--gold-300); flex: none; }
/* The emergency route. Gold-keyed so it separates from the switchboard number
   sitting next to it without needing a heavier treatment at 0.72rem. */
.header-utility__claims { display: inline-flex; align-items: center; gap: 0.45em; }
.header-utility__claims span { color: var(--gold-300); font-weight: 600; }
.header-utility__claims strong { color: var(--white); font-weight: 700; letter-spacing: 0.02em; }
.header-utility__claims:hover strong { color: var(--gold-300); }
/* The label stays at every width: since the client dropped "24hr", "Claims" is
   the only thing telling this number apart from the switchboard beside it. */

.header-utility__social { display: flex; align-items: center; gap: 0.85rem; }
.header-utility__social a { display: inline-flex; color: var(--white); opacity: 0.7; transition: opacity .2s var(--ease), color .2s var(--ease); }
.header-utility__social a:hover { opacity: 1; color: var(--gold-300); }
.header-utility__social svg { width: 14px; height: 14px; color: currentColor; }

/* Collapse the utility bar once scrolling starts — the nav tightens to a
   single slim line and the page gets its full height back. */
.site-header.is-scrolled .header-utility { max-height: 0; opacity: 0; border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) { .header-utility { transition: none; } }

@media (max-width: 619px) { .header-utility .u-hide-sm { display: none !important; } }
@media (max-width: 899px) { .header-utility .u-hide-md { display: none !important; } }

.primary-nav { display: none; }
@media (min-width: 900px) {
  .primary-nav { display: block; }
  /* Scoped to the top level with `>` so these never leak into the mega panel's
     own <ul>/<a> markup (which needs its own grid + type treatment). */
  .primary-nav > ul { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
  .primary-nav > ul > li > a { font-size: var(--step--1); font-weight: 550; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.82); text-decoration: none; padding: 0.4em 0; position: relative; transition: color .2s var(--ease); }
  .primary-nav > ul > li > a:hover,
  .primary-nav > ul > li.current-menu-item > a,
  .primary-nav > ul > li.current-menu-ancestor > a { color: var(--white); }
  .primary-nav > ul > li.current-menu-item > a::after,
  .primary-nav > ul > li.current-menu-ancestor > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold-500); }
}
/* Mega menu ---------------------------------------------------------------- */
/* A top-level item with children opens a full-width panel of icon tiles.
   The panel is absolutely positioned against .site-header (which is sticky,
   and therefore the containing block) so it spans the full viewport width. */
.mega { display: none; }
.mega-toggle { display: none; }

@media (min-width: 900px) {
  .primary-nav .has-mega { display: flex; align-items: center; gap: 0.3rem; }

  .mega-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,0.7);
  }
  .mega-toggle svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .has-mega:hover .mega-toggle, .mega-toggle:hover { color: var(--white); }
  .has-mega.is-open .mega-toggle svg { transform: rotate(180deg); }
  .has-mega.is-open > a { color: var(--white); }

  .mega {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 18px 40px rgba(15,27,42,0.10);
    padding-block: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

  /* Full-bleed: the tiles span the viewport, edge to edge, with a hairline gap.
     grid-auto-flow keeps them one equal row whatever the child count. */
  .mega__inner { padding-inline: 6px; }
  .mega__grid {
    display: grid; gap: 6px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    list-style: none; margin: 0; padding: 0;
  }

  .mega__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-xs); text-align: center;
    min-height: 132px; padding: var(--space-md) var(--space-sm);
    background: var(--mist);
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
  }
  .mega__tile:hover, .mega__tile:focus-visible {
    background: var(--paper);
    border-color: var(--gold-500);
  }
  .mega__icon { display: inline-flex; color: var(--navy-800); }
  .mega__icon svg { width: 30px; height: 30px; stroke-width: 1.3; }
  .mega__tile:hover .mega__icon { color: var(--gold-600); }
  .mega__label { font-family: var(--font-head); font-size: var(--step-0); font-weight: 500; color: var(--brand-strong); line-height: 1.2; letter-spacing: 0.01em; }
  .mega__blurb { font-size: var(--step--1); color: var(--text-muted); max-width: 30ch; line-height: 1.45; }

  @media (prefers-reduced-motion: reduce) {
    .mega { transition: none; }
    .mega__tile:hover, .mega__tile:focus-visible { transform: none; }
    .mega-toggle svg { transition: none; }
  }
}

/* Mobile drawer: children render as an indented sub-list. */
.mobile-nav .sub-menu { margin: 0 0 var(--space-sm) var(--space-md); }
.mobile-nav .sub-menu a { font-family: var(--font-body); font-size: var(--step-0); color: rgba(255,255,255,0.78); }
.mobile-nav .sub-menu a:hover { color: #fff; }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.header-actions .btn { display: none; }
@media (min-width: 900px) { .header-actions .btn { display: inline-flex; } }
/* (The header phone now lives in the utility bar above the main nav.) */

/* Mobile menu toggle */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius); background: rgba(255,255,255,0.06); color: var(--white); cursor: pointer; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.mobile-nav { position: fixed; inset: 0; z-index: 70; background: var(--navy-900); color: #fff; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; padding: var(--space-xl) var(--gutter); }
.mobile-nav[data-open="true"] { transform: translateX(0); }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }
.mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.mobile-nav a { color: #fff; text-decoration: none; font-family: var(--font-head); font-size: var(--step-2); padding: 0.5em 0; display: block; border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Buttons in the panel are <a>s, so `.mobile-nav a` (higher specificity than
   .btn) bleeds its nav-link type and divider into them. Reset what matters and
   stack the pair full-width. */
.mobile-nav .btn {
  display: flex; justify-content: center;
  margin-top: var(--space-lg);
  font-family: var(--font-body); font-size: var(--step-0);
  border-bottom-style: solid; border-bottom-width: 1px;
}
.mobile-nav .btn + .btn { margin-top: var(--space-xs); }
.mobile-nav .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.35); }
.mobile-nav .btn--gold { color: var(--navy-900); border-color: var(--gold-500); }
.nav-close { background: none; border: 0; color: #fff; cursor: pointer; width: 46px; height: 46px; }

/* 7. FOOTER ---------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: var(--navy-900); color: rgba(255,255,255,0.72); padding-block: var(--space-2xl) var(--space-lg); font-size: var(--step--1); }
.site-footer .container { position: relative; z-index: 1; }

/* Decorative London skyline silhouette — full-bleed line-art along the base.
   Static (no self-draw), a subtle gold watermark that never fights the text. */
.footer-skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; line-height: 0; pointer-events: none; opacity: 0.16; }
.footer-skyline svg { width: 100%; height: auto; display: block; }
.footer-skyline path, .footer-skyline line { stroke: var(--gold-300); stroke-opacity: 0.7; }
@media (min-width: 1100px) { .footer-skyline { opacity: 0.2; } }
.site-footer a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: var(--step--1); font-weight: 650; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-md); }
.footer-col ul { list-style: none; display: grid; gap: var(--space-2xs); }
.footer-brand { font-family: var(--font-head); font-size: var(--step-2); color: #fff; margin-bottom: var(--space-sm); }
/* A labelled contact route in the footer list (currently claims). The label is
   what stops a second phone number and a second address reading as duplicates
   of the general ones above them. */
.footer-route { margin-top: var(--space-2xs); }
.footer-route > span {
  display: block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-300);
}
.footer-route > a { display: block; }
/* Logo lockup in the footer: smaller than the header's, since here it labels a
   column rather than anchoring the bar. Overrides the .site-logo header height. */
.footer-brand--logo { margin-bottom: var(--space-md); }
.footer-brand--logo .site-logo { height: 48px; max-width: 100%; }
.footer-disclosure { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); justify-content: space-between; margin-top: var(--space-lg); }
.legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.social-row { display: flex; gap: var(--space-sm); }
.social-row a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; }
.social-row a:hover { border-color: var(--gold-500); }

/* 8. BLOCKS ---------------------------------------------------------------- */
/* Hero */
.hero { position: relative; background: var(--navy-800); color: #fff; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,22,39,0.94) 0%, rgba(8,22,39,0.75) 45%, rgba(17,48,80,0.45) 100%); z-index: 1; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--video, .hero__video { width: 100%; height: 100%; }
.hero__video { object-fit: cover; display: block; }

/* Video hero: a stronger scrim beneath the text — a bottom-anchored dark
   gradient (keeps the headline/CTAs legible over bright, moving footage)
   layered over the same left-to-right navy tint the photo hero uses. */
.hero--video::after {
	background:
		linear-gradient(to top, rgba(8,22,39,0.94) 0%, rgba(8,22,39,0.62) 42%, rgba(8,22,39,0.32) 100%),
		linear-gradient(105deg, rgba(8,22,39,0.86) 0%, rgba(8,22,39,0.55) 50%, rgba(17,48,80,0.28) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 7rem); max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: var(--space-md); }
.hero .lead { color: rgba(255,255,255,0.82); margin-bottom: var(--space-lg); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.14); }
.hero__trust-item { display: flex; align-items: center; gap: 0.5em; font-size: var(--step--1); color: rgba(255,255,255,0.82); }
.hero__trust-item svg { color: var(--gold-300); flex: none; }

/* Intro / statement */
.statement .statement__text { font-family: var(--font-head); font-size: var(--step-3); line-height: var(--leading-snug); color: var(--brand-strong); font-weight: 420; }

/* Feature list (reasons / why us) */
.feature { display: flex; gap: var(--space-md); }
.feature__icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-100); color: var(--navy-700); }
.on-dark .feature__icon { background: rgba(255,255,255,0.08); color: var(--gold-300); }
.feature h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.feature p { font-size: var(--step-0); color: var(--text-muted); margin: 0; }
.on-dark .feature p { color: rgba(255,255,255,0.72); }

/* Stats band */
.stats { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-head); font-size: var(--step-4); color: #fff; line-height: 1; margin-bottom: var(--space-2xs); }
.stat__num .accent { color: var(--gold-300); }
.stat__label { font-size: var(--step--1); letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }

/* CTA band */
.cta-band { text-align: center; }
.cta-band__inner { max-width: 680px; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band .lead { margin-bottom: var(--space-lg); }

/* FAQ */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-md) 0; font-family: var(--font-head); font-size: var(--step-1); color: var(--brand-strong); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); color: var(--accent); font-size: 1.5em; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { padding-bottom: var(--space-xs); }
.faq__body { padding-bottom: var(--space-md); color: var(--text-muted); }

/* Logos / trust strip */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xl); opacity: 0.75; }
.logos img { max-height: 44px; width: auto; filter: grayscale(1); }

/* 9. CARDS ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--navy-100); }
.card__icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--navy-100); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.card h3 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.card p { color: var(--text-muted); font-size: var(--step-0); margin-bottom: var(--space-md); }
.card__foot { margin-top: auto; }

/* Sector card with topline accent */
.sector-card { position: relative; overflow: hidden; }
.sector-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sector-card:hover::before { transform: scaleX(1); }

/* 10. FORMS ---------------------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: var(--space-md); }
.field label { display: block; font-size: var(--step--1); font-weight: 600; color: var(--brand-strong); margin-bottom: var(--space-2xs); }
.field .req { color: #b0402f; }
.field .hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: inherit; font-size: var(--step-0); color: var(--ink);
  padding: 0.8em 0.9em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-500); background: #fff; box-shadow: var(--ring); }
.field-row { display: grid; gap: var(--space-md); }
@media (min-width: 620px) { .field-row.two { grid-template-columns: 1fr 1fr; } }
.form-consent { display: flex; gap: 0.6em; align-items: flex-start; font-size: var(--step--1); color: var(--text-muted); }
.form-consent input { width: auto; margin-top: 0.2em; }
.form-note { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-sm); }
.form-message { padding: var(--space-md); border-radius: var(--radius); margin-bottom: var(--space-md); font-size: var(--step-0); }
.form-message.is-success { background: #eaf5ee; border: 1px solid #b7dcc4; color: #1c623a; }
.form-message.is-error { background: #fbecea; border: 1px solid #eec4bd; color: #8a2f22; }
/* Honeypot — visually and AT-hidden */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Contact meta block */
.contact-meta { display: grid; gap: var(--space-lg); }
.contact-item { display: flex; gap: var(--space-md); align-items: flex-start; }
.contact-item__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; }
.contact-item__label { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.contact-item a, .contact-item strong { font-size: var(--step-1); color: var(--brand-strong); text-decoration: none; font-weight: 600; }

/* 11. ACCESSIBILITY & MOTION ---------------------------------------------- */
.skip-link { position: absolute; left: var(--gutter); top: -60px; z-index: 200; background: var(--navy-800); color: #fff; padding: 0.7em 1.1em; border-radius: var(--radius); transition: top .2s var(--ease); text-decoration: none; }
.skip-link:focus { top: var(--space-sm); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; }
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .card--link:hover { transform: none; }
}

/* Reveal-on-scroll (progressive, safe without JS) */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in, .no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Print */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}

/* =============================================================================
   12. EDITORIAL LAYER — LimeIQ-inspired refinements
   Numbered cards, hairlines, journey timeline, hero display type, skyline art.
   ========================================================================== */

/* Hero — display scale + slow zoom on media */
.hero h1 { font-size: var(--step-6); font-weight: 500; letter-spacing: -0.02em; max-width: 14ch; }
.hero__inner { padding-block: clamp(4.5rem, 11vw, 9.5rem); max-width: 820px; }
.hero__media img { animation: ib-hero-zoom 18s var(--ease) forwards; transform-origin: center 30%; }
@keyframes ib-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }

/* Hairline utilities */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.on-dark .rule { border-color: rgba(255,255,255,0.14); }

/* Numbered cards — editorial index numbers (01, 02 …) */
.grid--numbered { counter-reset: ib-card; }
.grid--numbered .card { counter-increment: ib-card; position: relative; }
.grid--numbered .card::after {
  content: counter(ib-card, decimal-leading-zero);
  position: absolute; top: var(--space-lg); right: var(--space-lg);
  font-family: var(--font-head);
  font-size: var(--step-1);
  color: var(--line);
  line-height: 1;
  transition: color .3s var(--ease);
}
.grid--numbered .card:hover::after { color: var(--gold-500); }

/* Journey / timeline — the narrative block */
.journey { position: relative; }
.journey__items { display: grid; gap: var(--space-xl); position: relative; }
@media (min-width: 900px) {
  .journey__items { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
  /* Connecting hairline: drawn per item, from the edge of this marker to the
     edge of the next. Anchoring it to the markers (rather than a single bar
     across the grid) stops it overshooting past the final step. */
  .journey__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 27px; /* marker centre: 54px / 2 */
    left: calc(54px + var(--space-xs));
    width: calc(100% + var(--space-lg) - 54px - var(--space-xs) * 2);
    height: 1px;
    background: var(--line);
  }
}
.journey__item { position: relative; }
.journey__marker {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: var(--step-1); color: var(--gold-600);
  margin-bottom: var(--space-md);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.journey__item:hover .journey__marker { border-color: var(--gold-500); box-shadow: var(--shadow-sm); }
.journey__phase { display: block; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: var(--space-2xs); }
.journey__item h3 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.journey__item p { color: var(--text-muted); margin: 0; }

/* Claims page ------------------------------------------------------------- */
/* Urgent-claim phone route: sits above the form so anyone mid-incident can
   skip straight to a person. */
.claims-urgent {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
}
.claims-urgent__icon { display: inline-flex; color: var(--gold-600); flex: none; }
.claims-urgent__body { flex: 1 1 20rem; }
.claims-urgent__body strong { display: block; color: var(--brand-strong); font-size: var(--step-0); margin-bottom: 0.25rem; }
.claims-urgent__body p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.claims-urgent .btn { flex: none; white-space: nowrap; }
/* The non-urgent route, set below the urgent one so the ordering matches the
   decision the reader is making: call if it is serious, otherwise email. */
.claims-urgent__body .claims-urgent__alt { margin-top: 0.55rem; font-size: var(--step--1); }
.claims-urgent__alt a { color: var(--brand-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.claims-urgent__alt a:hover { color: var(--gold-600); }

/* Offline route: same anatomy as the urgent panel, but sits *after* the form and
   is keyed to the neutral line rather than gold. Gold is the claims route itself;
   a download is the quieter alternative, so it should not compete with it. */
.claims-download {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.claims-download__icon { display: inline-flex; color: var(--brand-strong); flex: none; }
.claims-download__body { flex: 1 1 20rem; }
.claims-download__body strong { display: block; color: var(--brand-strong); font-size: var(--step-0); margin-bottom: 0.25rem; }
.claims-download__body p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.claims-download .btn { flex: none; }
/* File type and weight, so a download on mobile data is never a surprise. */
.claims-download__meta { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-top: 0.15rem; }

.claims-journey { margin-bottom: var(--space-2xl); }
/* Keep the form at a comfortable reading measure inside the full-width grid. */
.claims-form { max-width: var(--container-narrow); margin-inline: auto; }

/* Statement — slightly grander, with an optional flourish rule */
.statement .statement__text { font-size: var(--step-3); max-width: 24ch; }
/* (removed duplicate flourish — the eyebrow already carries the gold dash) */

/* Sticky header scrolled state */
.site-header { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.site-header.is-scrolled { background: var(--navy-900); box-shadow: 0 8px 28px rgba(8,22,39,0.28); }
/* Tighten the lockup slightly once the utility bar has collapsed away. */
.site-header.is-scrolled .site-logo { height: 44px; }
@media (max-width: 619px) { .site-header.is-scrolled .site-logo { height: 34px; } }

/* FAQ on white */
.faq details { border-color: var(--line); }

/* =============================================================================
   13. MOTION VOCABULARY
   Headline line-mask reveals, staggered groups, icon line-draw, count-ups.
   All gated on .js and prefers-reduced-motion; content is never hidden without JS.
   ========================================================================== */

/* Split headline reveal — JS wraps lines in .sl > .sl__in */
/* The mask window is padded out past the line box (and pulled back with equal
   negative margins, so layout is unchanged) — otherwise overflow:hidden shears
   serif descenders and punctuation overshoot off every line. The hidden state
   is 140%, not 110%, so text cannot peek through the enlarged window. */
.js [data-split] .sl { display: block; overflow: hidden; padding: 0.12em 0.1em 0.22em; margin: -0.12em -0.1em -0.22em; }
.js [data-split] .sl__in { display: block; transform: translateY(140%); transition: transform .9s var(--ease); }
.js [data-split].is-in .sl__in { transform: translateY(0); }
.js [data-split] .sl:nth-child(2) .sl__in { transition-delay: .08s; }
.js [data-split] .sl:nth-child(3) .sl__in { transition-delay: .16s; }
.js [data-split] .sl:nth-child(4) .sl__in { transition-delay: .24s; }

/* Staggered reveal groups — children cascade in */
.js [data-reveal-group] > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0s; }
.js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: .09s; }
.js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: .18s; }
.js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: .27s; }
.js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: .36s; }
.js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: .45s; }
.js [data-reveal-group].is-in > *:nth-child(7) { transition-delay: .54s; }
.js [data-reveal-group].is-in > *:nth-child(8) { transition-delay: .63s; }

/* Icon line-draw — JS measures path lengths and sets --len */
.js .draw path, .js .draw line, .js .draw circle, .js .draw rect, .js .draw polyline {
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  transition: stroke-dashoffset 1.1s var(--ease) .15s;
}
.js .draw.is-in path, .js .draw.is-in line, .js .draw.is-in circle, .js .draw.is-in rect, .js .draw.is-in polyline {
  stroke-dashoffset: 0;
}

/* Count-up figures keep layout stable */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js [data-split] .sl__in,
  .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .draw path, .js .draw line, .js .draw circle, .js .draw rect, .js .draw polyline { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* Stagger delay utilities (used by the hero load-in) */
.js [data-reveal].d-1 { transition-delay: .15s; }
.js [data-reveal].d-2 { transition-delay: .3s; }
.js [data-reveal].d-3 { transition-delay: .45s; }
.js [data-reveal].d-4 { transition-delay: .6s; }

/* Hero without a photo or video — flat navy with a soft vignette */
.hero--plain { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%); }
.hero--plain::after { background: radial-gradient(120% 90% at 20% 10%, rgba(41,85,127,0.35) 0%, rgba(8,22,39,0) 55%); }
.hero--plain .container { position: relative; z-index: 3; }

/* =============================================================================
   14. AUDIT REFINEMENTS
   ========================================================================== */

/* Trade list — names only, in columns. Read by scanning for your own trade,
   so the job is density and a clean left edge, not decoration. Columns rather
   than a single long list keeps eight names inside one screen. */
.trade-list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: var(--space-xl);
  max-width: 60rem;
}
@media (min-width: 900px) { .trade-list { columns: 3; } }
.trade-list__item {
  break-inside: avoid;
  position: relative;
  padding: 0.7em 0 0.7em 1.6em;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink);
}
/* Gold tick — the only ornament, and it earns its place by reading as
   "covered" rather than as a bullet. */
.trade-list__item::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 0.62em; height: 0.34em;
  border-left: 2px solid var(--gold-500);
  border-bottom: 2px solid var(--gold-500);
  transform: rotate(-45deg);
}
.trade-list__item a { color: inherit; text-decoration: none; }
.trade-list__item a:hover { color: var(--gold-600); }
.on-dark .trade-list__item { color: var(--white); border-bottom-color: rgba(255,255,255,0.12); }
.on-dark .trade-list__item::before { border-color: var(--gold-300); }

/* Sector tabs — a full-bleed dark showcase. The bar spans the viewport, each
   tab an equal share; the active one earns the gold underline (gold = the live
   thing, same grammar as the cards' hover). Each panel is the sector's own
   hero artwork under a left-heavy scrim (the hero's gradient, steepened) with
   the copy on the left. Panels all render for no-JS users (stacked); app.js
   collapses them to the active one. */
.section--sector-tabs { padding-block-end: 0; }
.section--sector-tabs .section-head { max-width: 640px; }

/* The top hairline runs the full viewport width (it lives on the full-bleed
   wrapper); the buttons and their bottom rule stay inside the container. */
.sector-tabs { border-top: 1px solid rgba(255,255,255,0.12); }
.sector-tabs__bar {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sector-tabs__bar::-webkit-scrollbar { display: none; }
.sector-tabs__tab {
  position: relative; flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: 1.25em 1em; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.sector-tabs__tab + .sector-tabs__tab { border-left: 1px solid rgba(255,255,255,0.08); }
.sector-tabs__tab-num { font-size: 0.85em; color: var(--gold-300); opacity: 0.55; transition: opacity .2s var(--ease); }
.sector-tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gold-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.sector-tabs__tab:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.sector-tabs__tab.is-active { color: var(--white); }
.sector-tabs__tab.is-active .sector-tabs__tab-num { opacity: 1; }
.sector-tabs__tab.is-active::after { transform: scaleX(1); }
.sector-tabs__tab:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }

.sector-tabs__panel {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(400px, 46vw, 560px);
}
.sector-tabs__panel[hidden] { display: none; }
.sector-tabs__media { position: absolute; inset: 0; }
.sector-tabs__media img { width: 100%; height: 100%; object-fit: cover; }
/* The hero scrim's angle, steepened: near-solid navy on the left so the copy
   reads like print, opening to the artwork on the right. */
.sector-tabs__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(8,22,39,0.96) 0%,
    rgba(8,22,39,0.86) 36%,
    rgba(8,22,39,0.38) 68%,
    rgba(8,22,39,0.10) 100%);
}
.sector-tabs__panel--plain { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%); }
.sector-tabs__panel .container { position: relative; z-index: 2; }
.sector-tabs__body { max-width: 34rem; padding-block: var(--space-2xl); }
.sector-tabs__kicker { display: flex; align-items: center; gap: 0.7em; margin-bottom: var(--space-md); }
.sector-tabs__kicker-icon { display: inline-flex; color: var(--gold-300); }
.sector-tabs__kicker-num {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; color: var(--gold-300);
}
.sector-tabs__kicker-rule { width: 44px; height: 1px; background: var(--gold-500); opacity: 0.7; }
.sector-tabs__body h3 { font-size: var(--step-3); color: var(--white); margin-bottom: var(--space-sm); }
.sector-tabs__blurb { font-size: var(--step-0); color: rgba(255,255,255,0.82); max-width: 46ch; margin-bottom: var(--space-lg); }
.sector-tabs .arrow-link { color: var(--gold-300); }
.sector-tabs .arrow-link:hover { color: var(--white); }

/* Switching: copy rises in, artwork settles from a slight zoom (the hero's
   settle-zoom, shortened). Keyed off .is-active so it replays per switch. */
@keyframes ib-tab-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ib-tab-zoom { from { transform: scale(1.05); } to { transform: none; } }
.js .sector-tabs__panel.is-active .sector-tabs__body { animation: ib-tab-in .45s var(--ease) both; }
.js .sector-tabs__panel.is-active .sector-tabs__media img { animation: ib-tab-zoom 7s var(--ease) both; }

@media (max-width: 899px) {
  .sector-tabs__tab { flex: none; padding-inline: 1.4em; }
  .sector-tabs__panel::before {
    background: linear-gradient(180deg, rgba(8,22,39,0.88) 0%, rgba(8,22,39,0.72) 100%);
  }
  .sector-tabs__panel { min-height: 0; }
  .sector-tabs__body { padding-block: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .js .sector-tabs__panel.is-active .sector-tabs__body,
  .js .sector-tabs__panel.is-active .sector-tabs__media img { animation: none; }
  .sector-tabs__tab::after { transition: none; }
}

/* Footnote under a card grid — keeps a finite list of trades/sectors from
   reading as the limit of what we'll write. */
.grid-footnote {
  margin-top: var(--space-lg);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--gold-500);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 62ch;
}
.on-dark .grid-footnote { color: rgba(255,255,255,0.72); }

/* One action under a grid or list, centred with the section head above it. */
.grid-cta { margin-top: var(--space-xl); display: flex; justify-content: center; }

/* Statement — wider measure (24ch was too ragged), italic gold emphasis */
.statement .statement__text { max-width: 30ch; }
.statement .statement__text em { font-style: italic; color: var(--gold-600); }

/* Supporting prose under the statement. Deliberately a long way down in scale
   from .statement__text: the statement is the claim, this is the explanation,
   and the gap between them is what keeps the statement doing any work. */
.statement__body {
  margin-top: var(--space-lg);
  max-width: 60ch;
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
.statement__body p + p { margin-top: var(--space-md); }

/* Statement with a side image — copy left, artwork right. Must sit after the
   30ch rule above: that measure is what leaves the right half empty in the
   single-column form, and it is the column itself that sets the width here. */
.statement--split .statement__layout { display: grid; gap: var(--space-xl); align-items: center; }
.statement--split .statement__text { max-width: none; }
/* fit-content so the gold twin (::before) hugs the image box, not the column;
   isolation keeps its negative z-index inside this box rather than dropping it
   behind the section background. */
.statement__media { margin: 0 auto; position: relative; width: fit-content; isolation: isolate; }
/* Capped at the file's native 453px — the artwork is a pre-cut PNG and scaling
   it past 1:1 only softens it. Centred so the column keeps its balance.
   Hover parallax: app.js feeds pointer position in as custom properties; the
   photo tilts toward the cursor while the gold twin counter-drifts (see
   ::before), and the rate difference is what sells the two layers as depth.
   The hover offsets live on the `translate`/`rotate` properties so they
   compose with, rather than fight, the reveal's `transform`. */
.statement__media img {
  display: block; width: 100%; max-width: 453px; height: auto;
  translate: var(--tilt-ix, 0px) var(--tilt-iy, 0px);
  transform: perspective(650px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transition: translate .3s var(--ease), transform .3s var(--ease);
}
/* The gold twin: same parallelogram the PNG is cut to (measured off its alpha:
   top edge 36.9→100%, bottom 0→63.1%). It hides exactly behind the image and
   slides out to a drop-shadow offset once the block's own reveal has landed,
   so the shape reads as a second layer arriving, not a static border. */
.statement__media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-600) 100%);
  clip-path: polygon(36.9% 0%, 100% 0%, 63.1% 100%, 0% 100%);
  transform: translate(0, 0); opacity: 0;
  translate: var(--tilt-gx, 0px) var(--tilt-gy, 0px);
  transition: transform .7s var(--ease) .5s, opacity .45s var(--ease) .5s, translate .3s var(--ease);
}
[data-reveal].is-in .statement__media::before { transform: translate(24px, 24px); opacity: 1; }
/* Reveal never fires for reduced-motion or no-JS visitors — give them the
   finished composition statically. */
.no-js .statement__media::before { transform: translate(24px, 24px); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .statement__media::before { transform: translate(24px, 24px); opacity: 1; transition: none; }
}
@media (max-width: 619px) { [data-reveal].is-in .statement__media::before,
  .no-js .statement__media::before { transform: translate(14px, 14px); } }
@media (min-width: 900px) {
  .statement--split .statement__layout { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); }
}

/* Stat figures never wrap ("£1m–£250m" was breaking mid-range) */
.stat__num { white-space: nowrap; }

/* Anchor targets clear the sticky header when jumped to (#sectors, #form) */
[id] { scroll-margin-top: 96px; }

/* =============================================================================
   15. HERO REFIT — viewport-fit, tighter type, typed gold signature
   ========================================================================== */

/* Hero fills the first screen neatly instead of cutting mid-content */
.hero { display: flex; flex-direction: column; justify-content: center; }
.hero { min-height: calc(100vh - 74px); }
.hero { min-height: min(calc(100svh - 74px), 820px); }
.hero__inner { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4.5rem, 9vw, 7.5rem); }

/* Thinner headline column; calmer subhead */
.hero h1 { max-width: 16ch; }
.hero .lead { font-size: var(--step-0); line-height: var(--leading-body); max-width: 52ch; }

/* Typed line — the gold signature. Own line, serif, blinking caret. */
.hero__typed-line { display: block; color: var(--gold-300); white-space: nowrap; }
.hero__typed-line .caret {
  display: inline-block;
  width: 0.05em; height: 0.88em;
  margin-left: 0.06em;
  background: var(--gold-300);
  vertical-align: baseline;
  transform: translateY(0.1em);
  animation: ib-caret 1.1s steps(1) infinite;
}
@keyframes ib-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__typed-line .caret { animation: none; opacity: 0; }
}

/* Buttons on dark sections — variant colour must beat the `.on-dark a` tint
   (gold button text was rendering gold-on-gold). */
.on-dark a.btn--gold, a.btn--gold { color: var(--navy-900); }
.on-dark a.btn--gold:hover, a.btn--gold:hover { color: var(--white); }
.on-dark a.btn--primary { color: var(--white); }