@charset "utf-8";
/* ==========================================================================
   MONTLIOR MEDIA — advertising & partnerships
   The commercial arm of Montlior Group. Editorial-luxury, not agency-neon:
   navy spine shared with Montlior News, champagne as a hairline signal only,
   oversized Fraunces statements, generous air, restrained motion.

   Layers:  reset → tokens → layout → components → utilities
   Fluid by construction: clamp() type + space, intrinsic grids, container
   queries. The ONLY viewport media query in this file is the nav collapse.
   (@media print, prefers-reduced-motion and forced-colors are not viewport
   queries and do not count against that budget.)
   ========================================================================== */

@layer reset, tokens, layout, components, utilities;


/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* header height + a breath, so in-page anchors never hide behind the bar */
    scroll-padding-top: calc(var(--header-h) + var(--space-l));
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, ol, ul, fieldset, legend {
    margin: 0;
  }

  fieldset { border: 0; padding: 0; min-inline-size: 0; }

  ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }

  body {
    min-height: 100svh;
    line-height: 1.65;
    /* the single most important guard against horizontal overflow */
    overflow-x: clip;
  }

  h1, h2, h3, h4 { line-height: 1.12; text-wrap: balance; }
  p, li, figcaption, dd { text-wrap: pretty; }

  /* Long unbreakable tokens — email addresses and file names in the specs
     tables in particular — are the last thing that can force a scrollbar
     at 280px. Break them. */
  :where(p, li, dd, dt, address, figcaption, blockquote, caption, td, th,
         h1, h2, h3, h4, a, summary, label) {
    overflow-wrap: break-word;
  }

  a { color: inherit; }
  a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

  img, picture, svg, video { max-width: 100%; height: auto; display: block; }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }

  table { border-collapse: collapse; width: 100%; }

  :target { scroll-margin-block-start: calc(var(--header-h) + var(--space-l)); }

  /* Motion is a luxury, not a requirement. Everything opt-out. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}


/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {

  :root {
    /* ---- brand -------------------------------------------------------- */
    --navy: #0F2A52;          /* the spine, shared with Montlior News */
    --navy-mid: #123156;
    --senior-blue: #5279A8;   /* distinct from board-level navy in charts */
    --deep: #081428;          /* deepest sections, footer */
    --accent: #1D6FE0;        /* interactive only — 4.77:1 on white */
    --accent-dark: #1559B8;   /* hover */
    --accent-on-dark: #8FBEF8;/* links on navy — 7.3:1 */

    /* Champagne is a DETAIL colour: hairlines, marks, numerals. Three tones,
       each chosen for the surface it has to survive on.
         --champagne       6.2:1 on navy, 8.1:1 on deep  → text on dark
         --champagne-light                               → text over photography
         --champagne-deep  3.4:1 on white                → LARGE text + rules only
         --champagne-text  5.8:1 on white, 5.5:1 on off  → small labels on light */
    --champagne: #C9A857;
    --champagne-light: #E8CE8A;
    --champagne-deep: #A8863C;
    --champagne-text: #7D6222;

    --paper: #FFFFFF;
    --offwhite: #F7F9FC;
    --ink: #111827;
    --ink-light: #F2F5FA;
    --meta: #6B7280;          /* AA on paper and offwhite */
    --meta-strong: #4B5563;   /* AA on filled panels */
    --meta-on-dark: #B9C4D4;  /* 7.4:1 on navy */

    --line: #E4E9F0;
    --line-strong: #CBD4E0;
    --rule-champagne: rgba(201, 168, 87, 0.42);
    --rule-champagne-dark: rgba(201, 168, 87, 0.30);
    --line-on-dark: rgba(233, 238, 246, 0.16);

    /* ---- fluid type: 320px → 1920px ----------------------------------- */
    --step--2: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
    --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
    --step-1:  clamp(1.1875rem, 1.14rem + 0.25vw, 1.375rem);
    --step-2:  clamp(1.4rem, 1.32rem + 0.42vw, 1.75rem);
    --step-3:  clamp(1.7rem, 1.53rem + 0.83vw, 2.375rem);
    --step-4:  clamp(2.1rem, 1.79rem + 1.53vw, 3.25rem);
    /* the oversized statement. 37.6px at 280px, 92px at 1920px. */
    --step-5:  clamp(2.35rem, 1.5rem + 4.2vw, 5.75rem);

    /* ---- fluid space --------------------------------------------------- */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.04vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.48rem + 0.09vw, 0.5625rem);
    --space-xs:  clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);
    --space-s:   clamp(1rem, 0.96rem + 0.17vw, 1.125rem);
    --space-m:   clamp(1.375rem, 1.32rem + 0.26vw, 1.5625rem);
    --space-l:   clamp(1.75rem, 1.64rem + 0.52vw, 2.125rem);
    --space-xl:  clamp(2.5rem, 2.24rem + 1.3vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 3rem + 2.5vw, 5.375rem);
    /* section rhythm — this is where the air comes from */
    --space-3xl: clamp(4.5rem, 3.5rem + 5vw, 8.25rem);

    /* ---- typography ---------------------------------------------------- */
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
                    Palatino, Georgia, "Times New Roman", serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Space Grotesk", "SF Mono", ui-monospace, "Segoe UI", sans-serif;

    /* ---- structure ------------------------------------------------------ */
    --wrap: 76rem;
    --wrap-wide: 92rem;
    --measure: 62ch;
    --header-h: clamp(4.5rem, 4.1rem + 1.8vw, 5.75rem);
    --radius: 2px;     /* institutions do not have rounded corners */

    --shadow-sm: 0 1px 2px rgba(15, 42, 82, 0.05);
    --shadow-md: 0 6px 24px rgba(15, 42, 82, 0.08), 0 1px 3px rgba(15, 42, 82, 0.05);
    --shadow-lg: 0 24px 60px rgba(8, 20, 40, 0.16);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--navy);
  }
  h5, h6 { font-family: var(--font-body); font-weight: 500; color: var(--navy); }

  /* Explicit base sizes reproducing the UA defaults exactly, so that any
     stylesheet loaded after this one cannot silently resize headings. */
  body h1 { font-size: 2em; }
  body h2 { font-size: 1.5em; }
  body h3 { font-size: 1.17em; }
  body h4 { font-size: 1em; }
  body h5 { font-size: 0.83em; }
  body h6 { font-size: 0.67em; }
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {

  .wrap {
    width: min(100% - (var(--space-m) * 2), var(--wrap));
    margin-inline: auto;
  }
  .wrap--wide   { width: min(100% - (var(--space-m) * 2), var(--wrap-wide)); }
  .wrap--narrow { width: min(100% - (var(--space-m) * 2), 54rem); }

  .section { padding-block: var(--space-3xl); }
  .section--tight { padding-block: var(--space-2xl); }
  .section--offwhite { background: var(--offwhite); }

  /* Dark surfaces re-point the whole muted/accent system at their own
     AA-safe tones, so every nested component inherits correct contrast
     without a single component-level override. */
  .section--navy,
  .section--deep {
    color: var(--ink-light);
    --meta: var(--meta-on-dark);
    --meta-strong: var(--meta-on-dark);
    --accent: var(--accent-on-dark);
    --accent-dark: #B9D5FB;
    --champagne-text: var(--champagne);
    --champagne-deep: var(--champagne);
    --line: var(--line-on-dark);
    --line-strong: rgba(233, 238, 246, 0.28);
    --ink: var(--ink-light);
  }
  .section--navy { background: var(--navy); }
  .section--deep { background: var(--deep); }
  .section--navy :is(h1, h2, h3, h4),
  .section--deep :is(h1, h2, h3, h4) { color: #fff; }

  /* the workhorse intrinsic grid */
  .grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
  .grid--sm   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .grid--lg   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .grid--tight { gap: var(--space-m); }

  .split {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
  }

  .flow > * + *            { margin-block-start: var(--space-s); }
  .flow > * + :is(h2, h3)  { margin-block-start: var(--space-xl); }
  .flow > :is(h2, h3) + *  { margin-block-start: var(--space-s); }
  .flow-l > * + *          { margin-block-start: var(--space-l); }

  .measure { max-width: var(--measure); }
}


/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---- skip link ------------------------------------------------------- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: var(--space-s);
    z-index: 300;
    padding: var(--space-2xs) var(--space-s);
    background: var(--navy);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-250%);
    transition: transform 0.2s var(--ease);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  /* ---- focus ----------------------------------------------------------- */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
  }
  .section--navy :focus-visible,
  .section--deep :focus-visible,
  .hero :focus-visible,
  .site-footer :focus-visible { outline-color: var(--champagne-light); }

  /* ---- small typographic marks ----------------------------------------- */
  /* Space Grotesk, tabular, wide-tracked. The single contemporary note. */
  .kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--champagne-text);
    font-feature-settings: "tnum" 1;
  }
  .kicker--rule::before {
    content: "";
    display: inline-block;
    inline-size: clamp(1.5rem, 3vw, 2.75rem);
    block-size: 1px;
    margin-inline-end: 0.85em;
    vertical-align: 0.28em;
    background: var(--champagne-deep);
  }
  .kicker--light { color: var(--champagne-light); }

  .lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--meta-strong);
    max-width: 54ch;
  }
  .section--navy .lede,
  .section--deep .lede,
  .hero .lede { color: var(--meta-on-dark); }

  .statement {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-4);
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }

  /* a hairline that carries the champagne signal without shouting */
  .rule {
    border: 0;
    block-size: 1px;
    background: var(--rule-champagne);
    margin-block: var(--space-l);
  }

  .section-head { max-width: 46rem; margin-block-end: var(--space-2xl); }
  .section-head > * + * { margin-block-start: var(--space-s); }
  .section-head h2 { font-size: var(--step-3); }

  /* ---- buttons --------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.85em 1.6em;
    /* A button whose label is an email address has no break opportunity, and
       a flex item will not shrink below its min-content width. `anywhere`
       (unlike `break-word`) reduces min-content too, so the label wraps
       inside the button instead of pushing the page sideways at 280px. */
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
                border-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .btn svg { inline-size: 0.9em; block-size: auto; flex: none; }
  .btn--primary {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
  }
  .btn--primary:hover { background: var(--deep); border-color: var(--deep); }
  .btn--outline {
    border-color: var(--line-strong);
    color: var(--navy);
  }
  .btn--outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
  /* on navy / over photography */
  .btn--light {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--navy);
  }
  .btn--light:hover { background: var(--champagne-light); border-color: var(--champagne-light); }
  .btn--champagne {
    border-color: var(--champagne);
    color: var(--champagne-light);
    background: transparent;
  }
  .btn--champagne:hover { background: var(--champagne); border-color: var(--champagne); color: var(--deep); }

  /* the quiet text link with a moving rule */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--navy);
    padding-block-end: 0.3em;
    background-image: linear-gradient(var(--champagne-deep), var(--champagne-deep));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: background-size 0.35s var(--ease), color 0.25s var(--ease);
  }
  .link-arrow svg { inline-size: 0.85em; transition: transform 0.35s var(--ease); }
  .link-arrow:hover { color: var(--accent-dark); }
  .link-arrow:hover svg { transform: translateX(0.3em); }
  .section--navy .link-arrow,
  .section--deep .link-arrow { color: #fff; background-image: linear-gradient(var(--champagne), var(--champagne)); }
  .section--navy .link-arrow:hover,
  .section--deep .link-arrow:hover { color: var(--champagne-light); }


  /* ======================================================================
     HEADER — an editorial media-kit cover, not a newspaper masthead
     ====================================================================== */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    border-block-end: 1px solid var(--line);
    transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  }

  /* The frosted plate lives on a pseudo-element, not on the header itself.
     An element with a backdrop-filter becomes the containing block for its
     position:fixed descendants — put the filter on .site-header and the
     collapsed navigation panel, which is fixed to the viewport, collapses to
     the height of the header instead of covering the screen. */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.92);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
  }
  @supports (backdrop-filter: blur(1px)) {
    .site-header::before { backdrop-filter: saturate(160%) blur(14px); }
  }
  .site-header.is-stuck {
    box-shadow: var(--shadow-sm);
    border-block-end-color: var(--rule-champagne);
  }

  .header-bar {
    block-size: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--space-m);
  }

  .brand-link {
    display: flex;
    align-items: center;
    flex: none;
    margin-inline-end: auto;
    line-height: 0;
  }
  /* The locked nameplate, scaled — never restyled. Sized by HEIGHT so that
     the monogram substitution below 26rem (made in HTML with <picture media>,
     costing no viewport media query and no extra bytes) drops in at the same
     optical weight. Everything else in the bar is pinned right by the auto
     margin above, so a change of brand width shifts nothing. */
  .brand-link img {
    block-size: clamp(2.25rem, 1.75rem + 1.65vw, 3rem);
    inline-size: auto;
    max-inline-size: 100%;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-m), 2.2vw, var(--space-xl));
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-list a {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.015em;
    text-decoration: none;
    color: var(--ink);
    padding-block: 0.4em;
    background-image: linear-gradient(var(--champagne-deep), var(--champagne-deep));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.35s var(--ease), color 0.25s var(--ease);
  }
  .nav-list a:hover { background-size: 100% 1px; color: var(--navy); }
  .nav-list a[aria-current="page"] {
    background-size: 100% 1px;
    color: var(--navy);
  }

  .header-cta { flex: none; }
  .header-cta .btn { padding: 0.7em 1.25em; }
  /* The panel carries its own copy of the call to action for the collapsed
     layout; at full width the one in the bar is the only one shown. */
  .site-nav > .header-cta { display: none; }

  .site-nav { display: flex; align-items: center; }

  /* nav toggle — only ever visible below the collapse point */
  .nav-toggle {
    display: none;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
  }
  .nav-toggle svg { inline-size: 1.15rem; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }


  /* ======================================================================
     HERO — cinematic, full-bleed
     ====================================================================== */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-block-size: min(88svh, 52rem);
    background: var(--deep);
    color: #fff;
    overflow: clip;
  }
  .hero--page { min-block-size: min(56svh, 30rem); }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .hero__media picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .hero__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* holds the dawn window at the left edge and the panelled wall behind
       the statement at every aspect ratio from 280px to ultrawide */
    object-position: 56% 50%;
    will-change: transform;
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg,
        rgba(8, 20, 40, 0.62) 0%,
        rgba(8, 20, 40, 0.28) 34%,
        rgba(8, 20, 40, 0.78) 78%,
        rgba(8, 20, 40, 0.90) 100%),
      linear-gradient(90deg,
        rgba(8, 20, 40, 0.58) 0%,
        rgba(8, 20, 40, 0.14) 62%,
        rgba(8, 20, 40, 0.34) 100%);
  }

  .hero__inner {
    padding-block: clamp(6rem, 5rem + 8vw, 9rem) var(--space-2xl);
    position: relative;
  }
  .hero__inner > * + * { margin-block-start: var(--space-m); }

  .hero__statement {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-5);
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: #fff;
    max-width: 17ch;
    text-wrap: balance;
    text-shadow: 0 2px 40px rgba(8, 20, 40, 0.45);
  }
  .hero--page .hero__statement { font-size: var(--step-4); max-width: 22ch; }

  .hero__sub {
    font-size: var(--step-1);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    max-width: 44ch;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
    margin-block-start: var(--space-l);
  }
  .hero__actions .link-arrow { color: #fff; background-image: linear-gradient(var(--champagne), var(--champagne)); }
  .hero__actions .link-arrow:hover { color: var(--champagne-light); }

  /* a slow, single, restrained arrival — never a loop */
  .hero__statement,
  .hero__sub,
  .hero__actions,
  .hero .kicker { animation: rise 1.1s var(--ease-out) both; }
  .hero__sub     { animation-delay: 0.12s; }
  .hero__actions { animation-delay: 0.2s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }

  .hero__breadcrumb { margin-block-end: var(--space-s); }
  .hero__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--step--2);
    font-family: var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }
  .hero__breadcrumb a { color: var(--champagne-light); text-decoration: none; }
  .hero__breadcrumb a:hover { text-decoration: underline; }


  /* ======================================================================
     AUDIENCE FIGURES BAND — large numerals, champagne hairlines, no marquee
     ====================================================================== */
  .figures {
    border-block: 1px solid var(--rule-champagne);
    padding-block: var(--space-xl);
  }
  .figures__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    /* clips the leading hairline of the first cell in every row, so the
       separators read as interior rules at any column count */
    overflow: clip;
  }
  .figure {
    padding-inline: clamp(var(--space-s), 2.5vw, var(--space-xl));
    padding-block: var(--space-s);
    box-shadow: -1px 0 0 var(--rule-champagne);
  }
  .figure__num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step-4);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
  }
  .figure__label {
    margin-block-start: var(--space-xs);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink);
  }
  .figure__note {
    margin-block-start: var(--space-3xs);
    font-size: var(--step--2);
    color: var(--meta);
  }
  .section--navy .figure__num,
  .section--deep .figure__num { color: var(--champagne); }
  .section--navy .figures,
  .section--deep .figures { border-block-color: var(--rule-champagne-dark); }
  .section--navy .figure,
  .section--deep .figure { box-shadow: -1px 0 0 var(--rule-champagne-dark); }


  /* ======================================================================
     ART-DIRECTED FEATURE — alternating image / text
     ====================================================================== */
  .feature { container-type: inline-size; }
  .feature + .feature { margin-block-start: var(--space-3xl); }

  .feature__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  .feature__media { position: relative; }
  .feature__media img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  /* The champagne hairline frame — a static, printerly detail.
     Stacked, it sits INSIDE the image, because a frame stepped outward from
     a full-width image has nowhere to go but off the edge of the page.
     Side by side (below), it steps out into the column gap, which is where
     the detail actually belongs. */
  .feature__media::after {
    content: "";
    position: absolute;
    inset: clamp(0.6rem, 1.8cqi, 1.1rem);
    border: 1px solid var(--rule-champagne);
    pointer-events: none;
  }
  .feature__body > * + * { margin-block-start: var(--space-s); }
  .feature__body > p + .feature__list { margin-block-start: var(--space-l); }
  .feature__index {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--1);
    letter-spacing: 0.18em;
    color: var(--champagne-text);
    font-variant-numeric: tabular-nums;
  }
  .feature__body h3 { font-size: var(--step-3); }
  .feature__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--step--1);
    color: var(--meta-strong);
  }
  .feature__list li {
    padding-inline-start: 1.4em;
    position: relative;
    padding-block: 0.42em;
  }
  .feature__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.05em;
    inline-size: 0.6em;
    block-size: 1px;
    background: var(--champagne-deep);
  }

  @container (min-width: 46rem) {
    .feature__inner {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: clamp(var(--space-xl), 6cqi, var(--space-3xl));
    }
    .feature--flip .feature__media { order: 2; }

    /* now that there is a gap beside the image, the frame steps out into it —
       towards the middle of the spread, never towards the page edge */
    .feature__media::after {
      --offset: clamp(0.75rem, 2cqi, 1.5rem);
      inset: var(--offset) auto auto var(--offset);
      inline-size: 100%;
      block-size: 100%;
      z-index: -1;
    }
    .feature--flip .feature__media::after {
      inset: var(--offset) var(--offset) auto auto;
    }
  }
  @container (min-width: 66rem) {
    .feature__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }


  /* ======================================================================
     CASE-STUDY GALLERY — scroll-snap, calm
     ====================================================================== */
  .gallery { container-type: inline-size; }

  .gallery__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-m);
    margin-block-end: var(--space-xl);
  }
  .gallery__nav { display: flex; gap: var(--space-2xs); }
  .gallery__btn {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--navy);
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
                color 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  .gallery__btn svg { inline-size: 1rem; }
  .gallery__btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
  .gallery__btn:disabled { opacity: 0.32; cursor: default; }

  .gallery__track {
    display: grid;
    grid-auto-flow: column;
    /* full-width cards in a narrow rail, capped at a comfortable reading
       width once there is room — never the shrunken minimum of a minmax() */
    grid-auto-columns: min(100%, 27rem);
    gap: var(--space-l);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    padding-block-end: var(--space-s);
    scrollbar-width: thin;
    scrollbar-color: var(--champagne-deep) var(--line);
  }
  .gallery__track > * { scroll-snap-align: start; }
  .gallery__track::-webkit-scrollbar { block-size: 3px; }
  .gallery__track::-webkit-scrollbar-track { background: var(--line); }
  .gallery__track::-webkit-scrollbar-thumb { background: var(--champagne-deep); }

  /* narrow containers: the rail becomes an honest vertical stack */
  @container (max-width: 40rem) {
    .gallery__track {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-block-end: 0;
    }
    .gallery__nav { display: none; }
  }

  /* ---- case card -------------------------------------------------------- */
  .case-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
  }
  .case-card__media {
    overflow: clip;
    background: var(--offwhite);
  }
  .case-card__media img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out);
  }
  .case-card:hover .case-card__media img { transform: scale(1.035); }
  .case-card__body { padding-block-start: var(--space-m); }
  .case-card__body > * + * { margin-block-start: var(--space-2xs); }
  .case-card__body .link-arrow {
    align-self: flex-start;
    margin-block-start: var(--space-m);
  }
  .case-card h3 {
    font-size: var(--step-2);
    transition: color 0.25s var(--ease);
  }
  .case-card:hover h3 { color: var(--accent-dark); }
  .case-card__result {
    font-size: var(--step--1);
    color: var(--meta);
  }
  .case-card__metric {
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--rule-champagne);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--1);
    letter-spacing: 0.04em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  .section--navy .case-card__metric,
  .section--deep .case-card__metric { color: var(--champagne); }

  /* two or three results, ruled off from the summary above */
  .metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-xl);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--rule-champagne);
  }
  .metrics dt { font-size: var(--step--2); color: var(--meta); }
  .metrics dd {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  .section--navy .metrics dd,
  .section--deep .metrics dd { color: var(--champagne); }


  /* ======================================================================
     TESTIMONIAL — champagne-ruled pull-quote
     ====================================================================== */
  .quote { container-type: inline-size; }
  .quote__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }
  .quote__portrait {
    inline-size: min(100%, 17rem);
    position: relative;
  }
  .quote__portrait img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .quote__portrait::after {
    content: "";
    position: absolute;
    inset: clamp(0.5rem, 1.6cqi, 0.9rem);
    border: 1px solid rgba(201, 168, 87, 0.55);
    pointer-events: none;
  }
  .quote blockquote {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-3);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
  }
  .quote__body > * + * { margin-block-start: var(--space-l); }
  .quote__body::before {
    content: "";
    display: block;
    inline-size: clamp(3rem, 8cqi, 5rem);
    block-size: 2px;
    background: var(--champagne);
    margin-block-end: var(--space-l);
  }
  .quote figcaption {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--2);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--champagne);
    line-height: 1.9;
  }
  .quote figcaption span { display: block; color: var(--meta-on-dark); letter-spacing: 0.1em; }

  @container (min-width: 44rem) {
    .quote__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); }
  }


  /* ======================================================================
     CTA BAND
     ====================================================================== */
  .cta-band { text-align: center; }
  .cta-band__inner > * + * { margin-block-start: var(--space-m); }
  .cta-band h2 {
    font-size: var(--step-4);
    color: #fff;
    max-width: 20ch;
    margin-inline: auto;
    line-height: 1.1;
  }
  .cta-band p { color: var(--meta-on-dark); max-width: 48ch; margin-inline: auto; }
  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    justify-content: center;
    margin-block-start: var(--space-xl);
  }
  .cta-band__contact {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--rule-champagne-dark);
    font-size: var(--step--1);
    color: var(--meta-on-dark);
  }
  .cta-band__contact a { color: var(--champagne-light); text-decoration: none; }
  .cta-band__contact a:hover { text-decoration: underline; }


  /* ======================================================================
     PANELS, CARDS, CALLOUTS
     ====================================================================== */
  .panel {
    padding: var(--space-l);
    background: var(--paper);
    border: 1px solid var(--line);
    border-block-start: 2px solid var(--champagne-deep);
  }
  .panel > * + * { margin-block-start: var(--space-s); }
  .panel h3 { font-size: var(--step-1); }
  .section--navy .panel,
  .section--deep .panel { background: rgba(255, 255, 255, 0.04); border-color: var(--line-on-dark); }

  .callout {
    padding: var(--space-l);
    background: var(--offwhite);
    border-inline-start: 2px solid var(--champagne-deep);
    --meta: var(--meta-strong);
  }
  .callout > * + * { margin-block-start: var(--space-s); }
  .callout h3 { font-size: var(--step-1); }

  /* numbered process steps */
  .steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
  .steps li {
    counter-increment: step;
    position: relative;
    padding-inline-start: 3.25rem;
    padding-block: var(--space-s);
    border-block-start: 1px solid var(--line);
  }
  .steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--space-s) + 0.15em);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    color: var(--champagne-text);
  }
  .steps li :is(h3, h4) { font-size: var(--step-1); margin-block-end: var(--space-3xs); }

  /* icon + text card */
  .icon-card > * + * { margin-block-start: var(--space-s); }
  .icon-card__icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--champagne-deep);
  }
  .icon-card__icon svg { inline-size: 100%; block-size: 100%; }
  .icon-card h3 { font-size: var(--step-1); }
  .icon-card p { font-size: var(--step--1); color: var(--meta); }


  /* ---- inline code, for file names and naming conventions ------------- */
  code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 0.15em 0.4em;
    background: var(--offwhite);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
  }

  /* ---- person -------------------------------------------------------- */
  .person-card img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
  }
  .person-card { overflow: clip; }
  .person-card__link { display: block; color: inherit; text-decoration: none; }
  .person-card__link picture { display: block; overflow: clip; }
  .person-card__link:hover img { transform: scale(1.025); }
  .person-card__link:hover h3 { color: var(--accent-dark); }
  .person-card__body { padding-block-start: var(--space-s); }
  .person-card__body > * + * { margin-block-start: var(--space-3xs); }
  .person-card h3 { font-size: var(--step-1); }
  .person-card .role {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--2);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--champagne-text);
  }
  .person-card .detail { font-size: var(--step--1); color: var(--meta); }


  /* ======================================================================
     IN-PAGE NAV (scroll-spy) — solutions.html, specifications.html
     ====================================================================== */
  /* A rail and a column of content that swap to a stack entirely on their
     own. Flex, not grid: two explicit grid tracks cannot wrap, and at 280px
     a 14rem rail beside a 30rem column is an overflow waiting to happen.
     The lopsided grow factors keep the rail at its basis and give every
     spare pixel to the content — until the two bases no longer fit side by
     side, at which point each takes a full row. No query involved. */
  .page-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    align-items: flex-start;
  }
  /* min-inline-size:0 on all three: a flex item's automatic minimum is its
     content's min-content width, and an unbreakable token — an email address
     in the contact rail — would otherwise hold the column open past the
     viewport at 280px. Zeroed, the item shrinks and overflow-wrap breaks the
     address instead. */
  .page-grid > .jump-nav { flex: 1 1 13rem; min-inline-size: 0; }
  .page-grid > .rail { flex: 1 1 16rem; min-inline-size: 0; }
  .page-grid > .page-body { flex: 999 1 min(100%, 32rem); min-inline-size: 0; }

  .jump-nav {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
    /* the rail must never trap its own scroll on short viewports */
    max-block-size: calc(100svh - var(--header-h) - var(--space-2xl));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .jump-nav h2 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--champagne-text);
    margin-block-end: var(--space-s);
  }
  .jump-nav ol { list-style: none; margin: 0; padding: 0; }
  .jump-nav li { border-block-start: 1px solid var(--line); }
  .jump-nav a {
    display: block;
    padding: 0.7em 0 0.7em 0.9em;
    margin-inline-start: -1px;
    border-inline-start: 1px solid transparent;
    font-size: var(--step--1);
    color: var(--meta-strong);
    text-decoration: none;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .jump-nav a:hover { color: var(--navy); }
  .jump-nav a.is-current {
    color: var(--navy);
    font-weight: 500;
    border-inline-start-color: var(--champagne-deep);
  }


  /* ======================================================================
     DATA VISUALISATION — CSS only, no chart library
     ====================================================================== */
  .stat-card {
    padding: var(--space-l);
    border: 1px solid var(--line);
    background: var(--paper);
  }
  .stat-card > * + * { margin-block-start: var(--space-2xs); }
  .stat-card__num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step-3);
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  .stat-card__label { font-weight: 500; font-size: var(--step--1); }
  .stat-card__note { font-size: var(--step--2); color: var(--meta); }

  /* horizontal bars */
  .bars { list-style: none; margin: 0; padding: 0; }
  .bars li { padding-block: var(--space-xs); border-block-start: 1px solid var(--line); }
  .bars li:first-child { border-block-start: 0; }
  .bar__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    font-size: var(--step--1);
    margin-block-end: var(--space-2xs);
  }
  .bar__value {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--champagne-text);
    font-variant-numeric: tabular-nums;
    flex: none;
  }
  .bar__track {
    block-size: 0.5rem;
    background: var(--line);
    overflow: clip;
  }
  .bar__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--pct, 0%);
    background: linear-gradient(90deg, var(--navy), var(--navy-mid));
    transform-origin: left center;
    transition: width 1.1s var(--ease-out);
  }
  .bars--champagne .bar__fill { background: linear-gradient(90deg, var(--champagne-deep), var(--champagne)); }

  /* donut — conic-gradient, one element, no library */
  .donut {
    inline-size: min(100%, 13rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
      var(--navy) 0 var(--a),
      var(--senior-blue) var(--a) var(--b),
      var(--champagne-deep) var(--b) var(--c),
      var(--line-strong) var(--c) 100%);
    -webkit-mask: radial-gradient(circle, transparent 56%, #000 56.5%);
    mask: radial-gradient(circle, transparent 56%, #000 56.5%);
    margin-inline: auto;
  }
  .legend { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
  .legend li {
    display: flex;
    align-items: baseline;
    gap: 0.65em;
    padding-block: 0.35em;
  }
  .legend .swatch {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    flex: none;
    translate: 0 0.1em;
  }
  .legend .val {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--meta-strong);
  }

  /* vertical column chart */
  .columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    gap: clamp(0.25rem, 1.4vw, 0.9rem);
    block-size: clamp(9rem, 22vw, 14rem);
    padding-block-end: var(--space-s);
    border-block-end: 1px solid var(--line-strong);
    list-style: none;
    margin: 0;
  }
  /* rows: a 1fr track that inherits a definite height from the fixed-height
     list, so the bar's percentage actually resolves, then an auto label row */
  .columns li {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-2xs);
    text-align: center;
    block-size: 100%;
  }
  .column__track { display: flex; align-items: flex-end; }
  .column__bar {
    inline-size: 100%;
    block-size: var(--pct, 0%);
    min-block-size: 2px;
    background: var(--navy);
    transition: block-size 1.1s var(--ease-out);
  }
  .columns li:nth-child(even) .column__bar { background: var(--navy-mid); }
  .columns li:last-child .column__bar { background: var(--champagne-deep); }
  .column__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--meta);
    font-variant-numeric: tabular-nums;
  }


  /* ======================================================================
     FILTER BAR — case studies
     ====================================================================== */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding-block-end: var(--space-l);
    border-block-end: 1px solid var(--line);
    margin-block-end: var(--space-xl);
  }
  .filter-bar__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--champagne-text);
    align-self: center;
    margin-inline-end: var(--space-s);
  }
  .filter-btn {
    padding: 0.5em 1.05em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: var(--step--1);
    color: var(--meta-strong);
    transition: all 0.25s var(--ease);
  }
  .filter-btn:hover { border-color: var(--navy); color: var(--navy); }
  .filter-btn[aria-pressed="true"] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
  }
  .case-grid {
    display: grid;
    gap: var(--space-xl) var(--space-l);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 44rem) {
    .case-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 70rem) {
    .case-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .case-card[hidden] {
    display: none !important;
  }
  [data-filter-empty] { display: none; }
  [data-filter-empty].is-shown { display: block; }


  /* ======================================================================
     PLANNING PATH — useful routes directly beneath the homepage hero
     ====================================================================== */
  .planning-path {
    background: var(--offwhite);
    border-block: 1px solid var(--line);
    padding-block: var(--space-xl);
  }
  .planning-path__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-s) var(--space-xl);
    margin-block-end: var(--space-l);
  }
  .planning-path__intro h2 { font-size: var(--step-2); max-width: 24ch; }
  .planning-path__intro p { max-width: 50ch; color: var(--meta-strong); font-size: var(--step--1); }
  .planning-path__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    border-block-start: 1px solid var(--rule-champagne);
  }
  .planning-card {
    display: flex;
    flex-direction: column;
    min-block-size: 10.5rem;
    padding: var(--space-l) clamp(var(--space-s), 2.25vw, var(--space-l));
    color: inherit;
    text-decoration: none;
    border-inline-start: 1px solid var(--line);
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
  }
  .planning-card:first-child { border-inline-start: 0; }
  .planning-card__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--champagne-text);
  }
  .planning-card h3 { margin-block-start: var(--space-s); font-size: var(--step-1); }
  .planning-card p { margin-block-start: var(--space-2xs); color: var(--meta); font-size: var(--step--1); }
  .planning-card .link-arrow { margin-block-start: auto; padding-block-start: var(--space-m); align-self: flex-start; }
  .planning-card:hover { background: var(--paper); }
  .planning-card:hover h3 { color: var(--accent-dark); }


  /* ======================================================================
     CASE-STUDY AND PERSON DETAIL PAGES
     ====================================================================== */
  .detail-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.7fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .detail-copy > * + * { margin-block-start: var(--space-m); }
  .detail-copy h2 { font-size: var(--step-3); max-width: 25ch; }
  .detail-facts {
    margin: 0;
    padding: var(--space-l);
    border-block-start: 2px solid var(--champagne-deep);
    background: var(--offwhite);
  }
  .detail-facts div + div {
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--line);
  }
  .detail-facts dt {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--champagne-text);
  }
  .detail-facts dd { margin: var(--space-3xs) 0 0; color: var(--navy); font-weight: 500; }
  .detail-figure { margin-block: var(--space-xl); }
  .detail-figure img { inline-size: 100%; max-block-size: 42rem; object-fit: cover; }
  .detail-figure figcaption { margin-block-start: var(--space-xs); font-size: var(--step--2); color: var(--meta); }
  .detail-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-xl);
  }
  .detail-panel {
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--rule-champagne);
  }
  .detail-panel > * + * { margin-block-start: var(--space-s); }
  .detail-panel h2 { font-size: var(--step-2); }
  .profile-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .profile-portrait img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .profile-copy > * + * { margin-block-start: var(--space-m); }
  .profile-copy h2 { font-size: var(--step-3); }
  .profile-copy .lede { max-width: 48ch; }
  .profile-specialisms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
    margin: var(--space-l) 0 0;
    padding: 0;
  }
  .profile-specialisms li {
    padding: 0.55em 0.8em;
    border: 1px solid var(--line-strong);
    color: var(--meta-strong);
    font-size: var(--step--1);
  }
  .profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }


  /* ======================================================================
     TABLES — specifications
     ========================================================================= */
  .table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--champagne-deep) var(--line);
  }
  .table-wrap table { min-inline-size: 34rem; }
  .spec-table caption {
    text-align: start;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--champagne-text);
    padding-block-end: var(--space-s);
  }
  .spec-table th,
  .spec-table td {
    text-align: start;
    padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
    border-block-end: 1px solid var(--line);
    vertical-align: top;
    font-size: var(--step--1);
  }
  .spec-table thead th {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--navy);
    border-block-end: 1px solid var(--champagne-deep);
    white-space: nowrap;
  }
  .spec-table tbody th { font-weight: 500; color: var(--navy); }
  .spec-table td { color: var(--meta-strong); }
  .spec-table tbody tr:last-child :is(th, td) { border-block-end: 0; }
  .spec-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }


  /* ======================================================================
     FORMS
     ====================================================================== */
  .form { max-width: 44rem; }
  .form__row { margin-block-end: var(--space-l); }
  .form__grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin-block-end: var(--space-l);
  }
  .form label,
  .form legend {
    display: block;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--navy);
    margin-block-end: var(--space-2xs);
  }
  .form .req { color: var(--champagne-text); font-weight: 400; }
  .form .hint {
    display: block;
    font-size: var(--step--2);
    font-weight: 400;
    color: var(--meta);
    margin-block-start: var(--space-3xs);
  }
  .form :is(input, select, textarea) {
    inline-size: 100%;
    padding: 0.75em 0.9em;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: var(--step-0);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .form select {
    /* chevron drawn inline so the control needs no image request */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230F2A52' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
    background-size: 0.7em;
    padding-inline-end: 2.4em;
  }
  .form :is(input, select, textarea):focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29, 111, 224, 0.14);
    outline: none;
  }
  .form textarea { min-block-size: 8rem; resize: vertical; }
  .form :is(input, select, textarea)[aria-invalid="true"] { border-color: #B42318; }
  .form .error {
    display: none;
    margin-block-start: var(--space-3xs);
    font-size: var(--step--2);
    color: #B42318;
    font-weight: 500;
  }
  .form .error.is-shown { display: block; }

  .checks { display: grid; gap: var(--space-2xs); }
  .checks label {
    display: flex;
    align-items: flex-start;
    gap: 0.65em;
    font-weight: 400;
    color: var(--ink);
    margin: 0;
    cursor: pointer;
  }
  .checks input {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: none;
    margin-block-start: 0.25em;
    accent-color: var(--navy);
  }

  .form__status {
    margin-block-start: var(--space-l);
    padding: var(--space-m);
    border-inline-start: 2px solid var(--champagne-deep);
    background: var(--offwhite);
    font-size: var(--step--1);
    color: var(--meta-strong);
  }
  .form__status:not(.is-shown) { display: none; }
  .form__status--error { border-inline-start-color: #B42318; }


  /* ======================================================================
     FAQ / DISCLOSURE
     ====================================================================== */
  .faq { border-block-start: 1px solid var(--line); }
  .faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-m);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--navy);
    cursor: pointer;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    margin-block-start: 0.4em;
    background: currentColor;
    color: var(--champagne-deep);
    /* a plus that becomes a minus — drawn, not imaged */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 0.3s var(--ease);
  }
  .faq[open] summary::after {
    rotate: 45deg;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  }
  .faq__body { padding-block-end: var(--space-l); max-width: var(--measure); }
  .faq__body > * + * { margin-block-start: var(--space-s); }
  .faq__body p { color: var(--meta-strong); }


  /* ======================================================================
     PROSE — legal & long-form
     ====================================================================== */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-block-start: var(--space-s); }
  .prose h2 {
    font-size: var(--step-2);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--rule-champagne);
  }
  .prose h3 { font-size: var(--step-1); margin-block-start: var(--space-xl); }
  .prose :is(ul, ol) { padding-inline-start: 1.35em; }
  .prose li + li { margin-block-start: var(--space-2xs); }
  .prose li::marker { color: var(--champagne-deep); }
  .prose dl > dt { font-weight: 500; color: var(--navy); margin-block-start: var(--space-m); }
  .prose a { color: var(--accent); }


  /* ======================================================================
     FOOTER
     ====================================================================== */
  .site-footer {
    background: var(--deep);
    color: var(--meta-on-dark);
    padding-block: var(--space-2xl) var(--space-xl);
    font-size: var(--step--1);
  }
  .site-footer h2 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--champagne);
    margin-block-end: var(--space-s);
  }
  .footer-top {
    display: grid;
    gap: var(--space-xl) clamp(var(--space-l), 3vw, var(--space-2xl));
    grid-template-columns: minmax(18rem, 1.45fr) repeat(3, minmax(9rem, 0.72fr)) minmax(14rem, 1fr);
    align-items: start;
    padding-block-end: var(--space-xl);
    border-block-end: 1px solid var(--rule-champagne-dark);
  }
  .footer-brand { padding-inline-end: var(--space-l); }
  .footer-brand img {
    /* the locked monogram, unaltered — its navy plate sits inside the
       footer's deeper navy as a quiet printed mark */
    inline-size: 3rem;
    margin-block-end: var(--space-m);
  }
  .footer-brand p { max-width: 34ch; line-height: 1.7; }
  .site-footer address { font-style: normal; }
  .site-footer ul { list-style: none; margin: 0; padding: 0; }
  .site-footer li + li { margin-block-start: var(--space-2xs); }
  .site-footer a { color: var(--meta-on-dark); text-decoration: none; }
  .site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    justify-content: space-between;
    align-items: baseline;
    padding-block-start: var(--space-l);
    font-size: var(--step--2);
    color: #9AA7B8;
  }
  .footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }
  .footer-legal li + li { margin-block-start: 0; }
  @media (max-width: 76rem) {
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; max-width: 38rem; }
    .detail-intro { grid-template-columns: 1fr; }
  }
  @media (max-width: 44rem) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; padding-inline-end: 0; }
    .planning-card { border-inline-start: 0; border-block-start: 1px solid var(--line); }
    .planning-card:first-child { border-block-start: 0; }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-portrait { max-inline-size: 23rem; }
  }


  /* ======================================================================
     REVEAL — the slow arrival used everywhere below the fold
     ====================================================================== */
  .js .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
    .hero__media img { transform: none !important; }
  }


  /* ======================================================================
     NAVIGATION COLLAPSE — the only viewport media query in this file
     ====================================================================== */
  @media (max-width: 62rem) {
    .nav-toggle { display: flex; }

    .site-nav {
      position: fixed;
      inset: var(--header-h) 0 0 0;
      display: block;
      background: var(--navy);
      padding: var(--space-xl) var(--space-m) var(--space-2xl);
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-0.75rem);
      transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
    }
    .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }

    .nav-list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    .nav-list li { border-block-start: 1px solid var(--rule-champagne-dark); }
    .nav-list li:last-child { border-block-end: 1px solid var(--rule-champagne-dark); }
    .nav-list a {
      padding-block: var(--space-m);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--step-2);
      color: #fff;
      background-image: none;
    }
    .nav-list a[aria-current="page"] { color: var(--champagne-light); }

    .site-nav > .header-cta {
      display: block;
      margin-block-start: var(--space-xl);
    }
    .header-cta .btn {
      inline-size: 100%;
      justify-content: center;
      padding: 1em 1.5em;
    }
    .site-nav .header-cta .btn { background: var(--champagne); border-color: var(--champagne); color: var(--deep); }

    /* the desktop CTA lives outside the panel and is not needed at all here */
    .header-bar > .header-cta { display: none; }

    body.nav-open { overflow: hidden; }
  }
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {

  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
  .muted { color: var(--meta); }
  .muted-strong { color: var(--meta-strong); }
  .small { font-size: var(--step--1); }
  .smaller { font-size: var(--step--2); }
  .tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .serif { font-family: var(--font-display); font-weight: 600; }

  .mt-xs { margin-block-start: var(--space-xs); }
  .mt-s  { margin-block-start: var(--space-s); }
  .mt-m  { margin-block-start: var(--space-m); }
  .mt-l  { margin-block-start: var(--space-l); }
  .mt-xl { margin-block-start: var(--space-xl); }
  .mt-2xl { margin-block-start: var(--space-2xl); }
  .mb-l  { margin-block-end: var(--space-l); }
  .mb-xl { margin-block-end: var(--space-xl); }

  .ar-16-9 { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
  .ar-3-4  { aspect-ratio: 3 / 4;  object-fit: cover; inline-size: 100%; }
  .ar-4-5  { aspect-ratio: 4 / 5;  object-fit: cover; inline-size: 100%; }

  /* Controls whose whole purpose is an enhancement are removed when the
     enhancement is not running. Written as a negative rule on .no-js so the
     element keeps its authored `display` when JS is present — `revert` would
     roll it back to the user-agent value and quietly break the layout. */
  .no-js .requires-js { display: none !important; }
  .js .no-js-only { display: none !important; }
}


/* ==========================================================================
   FORCED COLOURS — Windows high contrast
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .filter-btn, .nav-toggle, .gallery__btn { border: 1px solid ButtonText; }
  .hero__scrim { background: Canvas; opacity: 0.85; }
  .bar__fill, .column__bar { background: Highlight; forced-color-adjust: none; }
  .donut { forced-color-adjust: none; }
}


/* ==========================================================================
   PRINT — the specifications page is made to be printed and circulated
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  :root { --header-h: 0px; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }

  .site-header, .site-nav, .nav-toggle, .header-cta, .skip-link,
  .hero__media, .hero__scrim, .hero__actions, .cta-band, .gallery__nav,
  .filter-bar, .site-footer nav, .btn, .form, .jump-nav,
  .feature__media::after, .quote__portrait { display: none !important; }

  .hero, .hero--page {
    min-block-size: auto !important;
    background: none !important;
    color: #000 !important;
    padding-block: 0 0 8mm !important;
    border-block-end: 1pt solid #000;
  }
  .hero__inner { padding-block: 0 !important; }
  .hero__statement, .hero__sub, .hero .kicker,
  .hero__breadcrumb ol, .hero__breadcrumb a { color: #000 !important; text-shadow: none !important; }
  .hero__statement { font-size: 24pt !important; }

  .section, .section--tight { padding-block: 6mm !important; }
  .section--navy, .section--deep { background: #fff !important; color: #000 !important; }
  .section--navy :is(h1,h2,h3,h4), .section--deep :is(h1,h2,h3,h4) { color: #000 !important; }

  .page-grid { display: block !important; }
  .table-wrap { overflow: visible !important; }
  .table-wrap table { min-inline-size: 0 !important; }
  .spec-table { page-break-inside: auto; }
  .spec-table tr { page-break-inside: avoid; page-break-after: auto; }
  .spec-table thead { display: table-header-group; }
  .spec-table :is(th, td) { border-block-end: 0.5pt solid #999 !important; }

  h1, h2, h3, h4 { page-break-after: avoid; color: #000 !important; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .js .reveal { opacity: 1 !important; transform: none !important; }

  /* resolve links for a printed page that has to stand alone */
  .prose a[href^="http"]::after,
  .prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }

  details[open] .faq__body, details .faq__body { display: block !important; }
  .faq summary::after { display: none !important; }
}