@charset "UTF-8";
/* ==========================================================================
   ROYAL SOURCE TRADE - FZCO
   Design system  |  assets/css/style.css
   --------------------------------------------------------------------------
   Structure (cascade layers, in priority order):
     tokens      design decisions expressed as custom properties
     reset       normalisation
     base        element-level defaults and typography
     layout      containers, sections, grid primitives
     components  discrete UI pieces
     utilities   single-purpose overrides (highest priority)

   Conventions
     - Layout uses logical properties (inline/block) so the sheet is
       direction-agnostic; relevant for a UAE business that may add Arabic.
     - Type and section rhythm are fluid via clamp(); there are no font-size
       jumps at breakpoints.
     - Depth is expressed with hairline borders and restrained shadows rather
       than heavy drop shadows.
     - Every interactive element has a visible :focus-visible ring.
     - All motion is wrapped by prefers-reduced-motion.

   A note on the token scales: the colour ramps, spacing steps, radii and
   elevation levels are kept complete even where a step is not currently
   consumed. They are a palette, and a scale with holes in it is harder to use
   correctly than a full one. One-off values with no consumer are removed.
   ========================================================================== */

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

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Typeface ------------------------------------------------------ */
    --font-display: "Sora", "Segoe UI", Roboto, system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* ---- Ink (navy surfaces) ------------------------------------------ */
    --ink-950: #05090f;
    --ink-900: #070e1c;
    --ink-850: #0a1628; /* primary dark surface */
    --ink-800: #0d1b31;
    --ink-750: #0f1f38;
    --ink-700: #142642;
    --ink-600: #1b2f52;
    --ink-500: #24365c; /* hairlines on dark */

    /* ---- Brass (brand accent) ----------------------------------------- */
    --brass-200: #f6e7b0;
    --brass-300: #e7cc7f; /* accent text on dark  - 11.9:1 on --ink-850 */
    --brass-400: #d9bb55;
    --brass-500: #d4af37; /* core brand gold */
    --brass-600: #a8811f;
    --brass-700: #8a6a14; /* accent text on light -  5.1:1 on white */

    /* ---- Paper (light surfaces) --------------------------------------- */
    --paper: #ffffff;
    --paper-50: #fafbfc;
    --paper-100: #f4f6f9;
    --paper-200: #eceff4;

    /* ---- Lines --------------------------------------------------------- */
    --line: #e3e7ee;
    --line-strong: #cfd6e1;
    --line-dark: color-mix(in srgb, var(--brass-500) 22%, transparent);

    /* ---- Text ---------------------------------------------------------- */
    --text: #0a1628;
    --text-muted: #55627a; /* 6.2:1 on white */
    --text-soft: #7a8699;
    --text-on-dark: #e8ecf3;
    --text-on-dark-muted: #a3afc2; /* 8.2:1 on --ink-850 */

    /* ---- Feedback ------------------------------------------------------ */
    --ok-bg: #ecfdf5;
    --ok-line: #a7f3d0;
    --ok-text: #065f46;
    --err-bg: #fef2f2;
    --err-line: #fecaca;
    --err-text: #991b1b;

    /* ---- Spacing (8pt base) -------------------------------------------- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;
    --s-24: 6rem;

    /* ---- Fluid type scale ---------------------------------------------- */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --fs-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
    --fs-2xl: clamp(1.375rem, 1.22rem + 0.8vw, 1.875rem);
    --fs-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.625rem);
    --fs-4xl: clamp(2rem, 1.55rem + 2.6vw, 3.5rem);
    /* The lower bound is deliberately modest. At 320px a 40px headline ran to
       five lines and pushed the hero's primary action below the fold; 34px
       keeps it commanding without costing the call to action. */
    --fs-5xl: clamp(2.125rem, 1.5rem + 3.9vw, 4.375rem);

    /* ---- Structure ----------------------------------------------------- */
    --container: 75rem;      /* 1200px */
    --container-text: 46rem; /* comfortable measure for prose */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4rem, 7.5vw, 7.5rem);
    --header-h: 4.75rem;

    /* ---- Radii --------------------------------------------------------- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* ---- Elevation ----------------------------------------------------- */
    --sh-xs: 0 1px 2px rgb(10 22 40 / 0.05);
    --sh-sm: 0 2px 8px -2px rgb(10 22 40 / 0.08);
    --sh-md: 0 12px 28px -12px rgb(10 22 40 / 0.16);
    --sh-lg: 0 28px 56px -24px rgb(10 22 40 / 0.26);
    --sh-dark: 0 32px 64px -28px rgb(0 0 0 / 0.6);

    /* ---- Motion -------------------------------------------------------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur: 260ms;
    --dur-slow: 620ms;

    /* Order matters here, and the reason is subtle. The off-canvas panel lives
       inside .site-header, so its z-index is resolved inside the header's
       stacking context rather than against the root. The scrim is a sibling of
       the header, so the two are only ever compared via --z-scrim against
       --z-header. The scrim must therefore sit BELOW the header: with it above,
       it painted over the panel and swallowed every tap, leaving the mobile menu
       impossible to use. */
    --z-scrim: 90;
    --z-header: 100;
    --z-nav: 110;
    --z-modal: 300;
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored sections must clear the sticky header. */
    scroll-padding-block-start: calc(var(--header-h) + var(--s-6));
  }

  /* The off-canvas nav panel is parked at translateX(100%), which inflates the
     document's scroll width and gave every page a horizontal scrollbar below
     1024px.
     `clip` rather than `hidden`, and on html rather than body, both matter:
     - hidden turns the element into a scroll container; clip does not.
     - overflow-x on BODY forces its computed overflow-y to auto, which makes
       body the scroll container. That silently broke position: sticky on the
       header and made scroll-padding-block-start ineffective, so in-page anchors
       landed under the header. Keeping the clip on html leaves the document as
       the scroll container and both work.
     Safari has supported overflow: clip since 16. */
  html {
    overflow-x: clip;
  }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  img {
    height: auto;
  }

  /* A tinted placeholder is applied only to the photographic images, which are
     opaque anyway. It used to sit on the `img` selector itself, which painted a
     light panel behind every transparent PNG and SVG - most visibly as a white
     box around the logo in the dark header. */
  .framed img,
  .media-card__figure img {
    background-color: var(--paper-200);
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

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

  @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;
    }
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--text);
    background-color: var(--paper);
    font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--text);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-4xl);
  }
  h2 {
    font-size: var(--fs-3xl);
  }
  h3 {
    font-size: var(--fs-2xl);
  }
  h4 {
    font-size: var(--fs-xl);
    letter-spacing: -0.015em;
  }
  h5,
  h6 {
    font-size: var(--fs-md);
    letter-spacing: 0;
  }

  p {
    text-wrap: pretty;
  }

  strong,
  b {
    font-weight: 600;
  }

  /* Numerals line up in address and time blocks. */
  address,
  time {
    font-variant-numeric: tabular-nums;
    font-style: normal;
  }

  ::selection {
    background-color: var(--brass-500);
    color: var(--ink-850);
  }

  :focus-visible {
    outline: 2px solid var(--brass-600);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  /* Reversed focus ring for dark surfaces */
  .on-dark :focus-visible,
  .site-header :focus-visible,
  .site-footer :focus-visible {
    outline-color: var(--brass-300);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--line);
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    width: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--text {
    max-inline-size: var(--container-text);
  }

  .section {
    padding-block: var(--section-y);
  }

  .section--flush-top {
    padding-block-start: 0;
  }

  /* Dark surface. `.on-dark` retargets descendant colour tokens so nested
     components need no dark-specific variants of their own. */
  .on-dark {
    --text: var(--text-on-dark);
    --text-muted: var(--text-on-dark-muted);
    --line: var(--ink-500);
    --line-strong: var(--ink-600);
    --paper: var(--ink-800);
    --paper-50: var(--ink-800);
    --paper-100: var(--ink-750);
    --paper-200: var(--ink-700);
    --brass-700: var(--brass-300);
    --brass-600: var(--brass-300);
    background-color: var(--ink-850);
    color: var(--text-on-dark);
  }

  .on-dark :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-on-dark);
  }

  .surface-alt {
    background-color: var(--paper-50);
  }

  /* --- Split: content beside media, alternating ------------------------ */
  .split {
    display: grid;
    gap: clamp(var(--s-8), 5vw, var(--s-16));
    align-items: center;
  }

  @media (min-width: 62rem) {
    .split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .split--content-wide {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }

    .split--media-wide {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    /* Places the media first visually while keeping content first in the DOM,
       so reading order stays logical for assistive tech. */
    .split--reverse > :first-child {
      order: 2;
    }
  }

  /* --- Auto-fitting card grid ------------------------------------------ */
  .grid {
    display: grid;
    gap: var(--s-6);
  }

  .grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* ------------------------------------------------------------------ *
   * Skip link
   * ------------------------------------------------------------------ */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--s-4);
    inset-block-start: var(--s-4);
    z-index: calc(var(--z-modal) + 10);
    padding: var(--s-3) var(--s-5);
    background-color: var(--brass-500);
    color: var(--ink-850);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--r-sm);
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ------------------------------------------------------------------ *
   * Icons
   * ------------------------------------------------------------------ */
  .sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--sm {
    width: 1em;
    height: 1em;
  }

  .icon--lg {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* ------------------------------------------------------------------ *
   * Utility bar
   * ------------------------------------------------------------------ */
  .utility-bar {
    background-color: var(--ink-900);
    color: var(--text-on-dark-muted);
    font-size: var(--fs-sm);
    border-block-end: 1px solid var(--ink-700);
  }

  .utility-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-6);
    min-height: 2.75rem;
    padding-block: var(--s-2);
  }

  .utility-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-6);
  }

  .utility-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: color var(--dur-fast) var(--ease);
  }

  .utility-bar__item .icon {
    color: var(--brass-400);
    transition: color var(--dur-fast) var(--ease);
  }

  a.utility-bar__item:hover {
    color: #fff;
  }

  a.utility-bar__item:hover .icon {
    color: var(--brass-300);
  }

  .utility-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--brass-300);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  /* On a phone this bar wraps to three or four lines and pushes the hero
     headline and its primary action below the fold. The address and both
     mailboxes remain in the footer, and the phone number is a button in the
     hero itself, so nothing here is the only route to that information. */
  @media (max-width: 47.99rem) {
    .utility-bar {
      display: none;
    }
  }

  /* ------------------------------------------------------------------ *
   * Header + navigation
   * ------------------------------------------------------------------ */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    border-block-end: 1px solid var(--ink-700);
    transition: border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  /* The translucent fill and its blur sit on a pseudo-element, NOT on
     .site-header itself.
     A backdrop-filter makes an element the containing block for every
     position: fixed descendant. With the filter on the header, the off-canvas
     nav panel resolved its inset against the 77px-tall header instead of the
     viewport: it collapsed to 64px, its links overflowed into the panel's own
     overflow:auto and were clipped, and the scrim showed through where they
     should have been. The mobile menu opened but no link could be tapped.
     Keeping the filter off the header restores the viewport as the panel's
     containing block. */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--ink-850) 88%, transparent);
    transition: background-color var(--dur) var(--ease);
    pointer-events: none;
  }

  @supports (backdrop-filter: blur(1px)) {
    .site-header::before {
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
  }

  .site-header[data-scrolled="true"]::before {
    background-color: color-mix(in srgb, var(--ink-950) 94%, transparent);
  }

  .site-header[data-scrolled="true"] {
    border-block-end-color: var(--line-dark);
    box-shadow: 0 16px 40px -24px rgb(0 0 0 / 0.7);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    min-height: var(--header-h);
  }

  /* --- Brand logo ------------------------------------------------------ *
   * The logo is inline SVG rather than <img src="logo.svg"> for two reasons:
   * an SVG in <img> cannot inherit page colour, and inlining avoids a second
   * request for artwork that appears on every page.
   *
   * Two forms are present in the markup and swapped by width. The header is
   * 76px tall and at 320px leaves roughly 210px for the logo once the menu
   * button is accounted for; the full three-tier lockup scaled into that space
   * puts "TRADING" under 6px, so narrow viewports get the monogram alone.
   * ------------------------------------------------------------------ */
  .brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    transition: transform var(--dur) var(--ease);
  }

  .brand:hover {
    transform: translateY(-1px);
  }

  /* Sized by height so it always fits the header band, with width following
     from the 5.39:1 aspect of the artwork. The lower bound is set so the lockup
     plus the menu button still clear a 320px viewport: 38px tall gives a 205px
     lockup, which with the 24px gap and the 44px button comes to 273px inside
     the 280px content box.

     Capped below --header-h so the logo never drives the header taller than
     that token claims. The off-canvas nav panel and scroll-padding are both
     positioned from --header-h, so a logo that outgrew it would push the panel
     out of alignment and let anchored headings sit under the header. */
  .brand__logo {
    height: clamp(2.375rem, 6vw, 3rem);
    width: auto;
    flex: none;
  }

  .site-footer .brand__logo {
    height: clamp(2.75rem, 7vw, 3.5rem);
  }


  /* --- Primary nav ----------------------------------------------------- */
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--s-4), 2.2vw, var(--s-8));
  }

  .nav__link {
    position: relative;
    display: inline-block;
    /* 0.625rem rather than --s-2 so the hit area clears 44px: the 15px label at
       line-height 1.65 gives ~25px, and 8px padding left it at 41px. */
    padding-block: 0.625rem;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-on-dark);
    transition: color var(--dur-fast) var(--ease);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--brass-400);
    border-radius: var(--r-pill);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur) var(--ease);
  }

  .nav__link:hover {
    color: #fff;
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .nav__link[aria-current="page"] {
    color: var(--brass-300);
  }

  /* The primary CTA is a single element that lives inside .nav: at desktop it
     sits at the end of the nav row, and below 62rem it becomes the full-width
     action at the bottom of the off-canvas panel. Rendering it twice and
     toggling visibility would duplicate the link in the accessibility tree. */
  .nav__cta {
    flex: none;
  }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    border: 1px solid var(--ink-600);
    border-radius: var(--r-sm);
    transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }

  .nav-toggle:hover {
    background-color: var(--ink-700);
    border-color: var(--line-dark);
  }

  .nav-toggle__close {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
  }

  /* Mobile nav panel */
  @media (max-width: 61.99rem) {
    .nav-toggle {
      display: inline-flex;
    }

    .nav {
      position: fixed;
      inset: var(--header-h) 0 0 auto;
      z-index: var(--z-nav);
      inline-size: min(22rem, 86vw);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--s-6) var(--s-6) var(--s-10);
      background-color: var(--ink-900);
      border-inline-start: 1px solid var(--ink-700);
      box-shadow: var(--sh-dark);
      overflow-y: auto;
      overscroll-behavior: contain;
      transform: translateX(100%);
      visibility: hidden;
      /* visibility flips instantly on open and is delayed by the full duration
         on close. Transitioning it over the duration left it computed as hidden
         for the opening frames, so focusing the first link was unreliable -
         sometimes it landed, sometimes focus stayed on the toggle. This way the
         panel is focusable the instant it opens and still slides out of sight
         before being hidden. */
      transition: transform var(--dur) var(--ease),
        visibility 0s linear var(--dur);
    }

    .nav[data-open="true"] {
      transform: translateX(0);
      visibility: visible;
      transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
    }

    .nav__link {
      padding-block: var(--s-4);
      font-size: var(--fs-lg);
      border-block-end: 1px solid var(--ink-700);
    }

    .nav__link::after {
      display: none;
    }

    .nav__link[aria-current="page"] {
      color: var(--brass-300);
    }

    .nav__cta {
      margin-block-start: var(--s-6);
      width: 100%;
    }
  }

  @media (min-width: 62rem) {
    /* Slightly more air between the last nav link and the button. */
    .nav__cta {
      margin-inline-start: var(--s-3);
    }
  }

  /* Dims the page behind the open panel. Deliberately below the header so the
     panel, its links and the close button all stay interactive. */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background-color: rgb(5 9 15 / 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  .nav-scrim[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
  }

  /* ------------------------------------------------------------------ *
   * Buttons
   * ------------------------------------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.8125rem 1.375rem;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
  }

  .btn .icon {
    width: 1.125em;
    height: 1.125em;
    transition: transform var(--dur) var(--ease);
  }

  .btn:hover .icon--shift {
    transform: translateX(3px);
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn[disabled],
  .btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  /* Brass - primary action */
  .btn--primary {
    background-color: var(--brass-500);
    border-color: var(--brass-500);
    color: var(--ink-850);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset;
  }

  .btn--primary:hover {
    background-color: var(--brass-400);
    border-color: var(--brass-400);
  }

  /* Outline - adapts to the surface it sits on */
  .btn--outline {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--text);
  }

  .btn--outline:hover {
    border-color: var(--brass-600);
    color: var(--brass-700);
    background-color: color-mix(in srgb, var(--brass-500) 8%, transparent);
  }

  /* Dark-surface variant. .hero and .page-hero are listed explicitly because
     they set their own dark background rather than carrying the .on-dark class,
     so without them .btn--outline fell back to color: var(--text) and rendered
     dark navy on dark navy - effectively invisible. */
  .on-dark .btn--outline,
  .site-header .btn--outline,
  .hero .btn--outline,
  .page-hero .btn--outline {
    border-color: var(--ink-500);
    color: #fff;
  }

  .on-dark .btn--outline:hover,
  .site-header .btn--outline:hover,
  .hero .btn--outline:hover,
  .page-hero .btn--outline:hover {
    border-color: var(--brass-400);
    color: var(--brass-300);
    background-color: rgb(255 255 255 / 0.05);
  }

  .btn--block {
    width: 100%;
  }

  .btn--lg {
    padding: 0.9375rem 1.75rem;
    font-size: var(--fs-md);
  }

  /* Inline arrow link */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--brass-700);
    transition: gap var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  }

  .link-arrow:hover {
    gap: var(--s-3);
    color: var(--text);
  }

  /* ------------------------------------------------------------------ *
   * Section headers + editorial furniture
   * ------------------------------------------------------------------ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-block-end: clamp(var(--s-2), 1.5vw, var(--s-4));
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-700);
  }

  /* Leading hairline gives the label an editorial anchor. */
  .eyebrow::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background-color: currentColor;
    opacity: 0.55;
  }

  .section-head {
    max-inline-size: 44rem;
    margin-block-end: clamp(var(--s-8), 4vw, var(--s-12));
  }

  .section-head__lead {
    margin-block-start: var(--s-4);
    font-size: var(--fs-lg);
    color: var(--text-muted);
  }

  .lead {
    font-size: var(--fs-lg);
    color: var(--text-muted);
  }

  /* ------------------------------------------------------------------ *
   * Hero
   * ------------------------------------------------------------------ */
  .hero {
    position: relative;
    isolation: isolate;
    /* Distance from the container's content edge out to the viewport edge.
       Used to bleed the media panel off the right side. 100vw includes the
       scrollbar, so this can overshoot by a few pixels; overflow: hidden
       below absorbs it. */
    --hero-bleed: calc(
      (100vw - min(100vw, var(--container))) / 2 + var(--gutter)
    );
    background-color: var(--ink-850);
    /* Warmth in the top corner, behind the headline. Replaces the previous
       full-bleed photograph, which has moved into its own panel. */
    background-image: radial-gradient(
      68% 88% at 6% -12%,
      color-mix(in srgb, var(--brass-500) 14%, transparent) 0%,
      transparent 60%
    );
    color: var(--text-on-dark);
    overflow: hidden;
  }

  /* Two-part scrim: a directional wash for text contrast plus a vignette that
     pulls focus toward the headline. Used by the interior .page-hero banners,
     which have no photograph of their own. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
        100deg,
        var(--ink-850) 8%,
        color-mix(in srgb, var(--ink-850) 82%, transparent) 46%,
        color-mix(in srgb, var(--ink-900) 62%, transparent) 100%
      ),
      radial-gradient(
        120% 90% at 78% 22%,
        transparent 0%,
        color-mix(in srgb, var(--ink-950) 78%, transparent) 100%
      );
  }

  /* Fine hairline grid: a subtle nod to shipping manifests / measurement. */
  .hero__grid-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(
        to right,
        rgb(255 255 255 / 0.028) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgb(255 255 255 / 0.028) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  }

  /* Named areas rather than source order, so the small-screen sequence is
     headline -> action -> image -> trust row. The previous layout stacked the
     whole text column above the panel, which pushed the primary action about a
     screen down on a phone. DOM order still matches visual order, so focus
     order needs no correction. */
  .hero__inner {
    display: grid;
    gap: clamp(var(--s-8), 4.5vw, var(--s-12));
    /* Tighter at the small end so the primary action stays above the fold on a
       568px-tall phone. */
    padding-block: clamp(1.75rem, 5.6vw, 5rem);
    grid-template-areas:
      "lede"
      "panel"
      "trust";
  }

  .hero__lede {
    grid-area: lede;
  }

  .hero__panel {
    grid-area: panel;
  }

  .hero__trust {
    grid-area: trust;
  }

  @media (min-width: 64rem) {
    .hero__inner {
      /* Narrower media column through the tablet-landscape band. At 1024px an
         0.82fr panel left the headline a ~519px measure, which ran it to five
         lines and pushed the primary action below a 768px-tall fold. */
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
      grid-template-rows: auto 1fr;
      column-gap: clamp(var(--s-8), 4vw, var(--s-16));
      align-items: start;
      grid-template-areas:
        "lede  panel"
        "trust panel";
    }
  }

  @media (min-width: 82rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    }
  }

  .hero__title {
    font-size: var(--fs-5xl);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
    color: #fff;
  }

  .hero__title em {
    font-style: normal;
    color: var(--brass-300);
  }

  /* Vertical rhythm inside the hero scales with the viewport for the same
     above-the-fold reason as the padding above. */
  .hero__lead {
    max-inline-size: 34rem;
    margin-block-start: clamp(var(--s-4), 2vw, var(--s-6));
    font-size: var(--fs-lg);
    color: var(--text-on-dark-muted);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-start: clamp(var(--s-5), 3vw, var(--s-8));
  }

  .hero .eyebrow {
    color: var(--brass-300);
  }

  /* --- Media panel ---------------------------------------------------- */
  .hero__panel {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-dark);
  }

  .hero__panel img {
    width: 100%;
    height: 100%;
    /* A restrained band on small screens; a full-height portrait crop on
       desktop, which suits the square source better than a wide banner. */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: none;
  }

  .hero__panel-caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-8) var(--s-5) var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to top, rgb(5 9 15 / 0.85), transparent);
  }

  .hero__panel-caption .icon {
    color: var(--brass-300);
  }

  @media (min-width: 64rem) {
    .hero__panel {
      align-self: stretch;
      min-block-size: 27rem;
      /* Break the container and run to the viewport edge. This asymmetry is
         the main structural difference from the old symmetric arrangement. */
      margin-inline-end: calc(-1 * var(--hero-bleed));
      border-inline-end: 0;
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    .hero__panel img {
      aspect-ratio: auto;
      min-block-size: 27rem;
    }
  }

  /* Trust row: its own grid area, so spacing comes from the grid gap. */
  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-content: end;
    gap: var(--s-4) var(--s-8);
    padding-block-start: var(--s-6);
    border-block-start: 1px solid var(--ink-600);
  }

  .hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-on-dark-muted);
  }

  .hero__trust-item .icon {
    color: var(--brass-400);
  }

  /* Compact page banner for interior pages */
  .page-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--ink-850);
    color: var(--text-on-dark);
    overflow: hidden;
  }

  .page-hero__inner {
    padding-block: clamp(3rem, 6.5vw, 5rem);
  }

  .page-hero__title {
    max-inline-size: 40rem;
    font-size: var(--fs-4xl);
    color: #fff;
  }

  .page-hero__lead {
    max-inline-size: 38rem;
    margin-block-start: var(--s-5);
    font-size: var(--fs-lg);
    color: var(--text-on-dark-muted);
  }

  .page-hero .eyebrow {
    color: var(--brass-300);
  }

  /* Breadcrumb */
  .breadcrumb {
    margin-block-end: var(--s-6);
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
  }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
  }

  .breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }

  .breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--ink-500);
  }

  .breadcrumb a:hover {
    color: var(--brass-300);
  }

  .breadcrumb [aria-current="page"] {
    color: var(--brass-300);
  }

  /* ------------------------------------------------------------------ *
   * Stat strip
   * ------------------------------------------------------------------ */
  .stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1px;
    background-color: var(--ink-600);
    border-block: 1px solid var(--ink-600);
  }

  .stat {
    padding: clamp(var(--s-5), 3vw, var(--s-8)) clamp(var(--s-4), 3vw, var(--s-6));
    background-color: var(--ink-850);
  }

  .stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brass-300);
  }

  .stat__label {
    display: block;
    margin-block-start: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
  }

  /* ------------------------------------------------------------------ *
   * Cards
   * ------------------------------------------------------------------ */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(var(--s-6), 3vw, var(--s-8));
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  /* Hover reveals a brass hairline along the top edge rather than a shadow
     bloom; keeps the surface calm. */
  .card::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: -1px;
    block-size: 2px;
    background-color: var(--brass-500);
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur) var(--ease);
  }

  .card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--sh-md);
  }

  .card:hover::before {
    transform: scaleX(1);
  }

  .on-dark .card {
    background-color: color-mix(in srgb, #fff 4%, transparent);
    border-color: var(--ink-600);
  }

  .on-dark .card:hover {
    background-color: color-mix(in srgb, #fff 7%, transparent);
    border-color: var(--ink-500);
    box-shadow: none;
  }

  .card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-block-end: var(--s-5);
    color: var(--brass-700);
    background-color: color-mix(in srgb, var(--brass-500) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brass-500) 24%, transparent);
    border-radius: var(--r-sm);
  }

  .on-dark .card__icon {
    color: var(--brass-300);
    background-color: rgb(255 255 255 / 0.05);
  }

  .card__title {
    font-size: var(--fs-xl);
  }

  .card__text {
    margin-block-start: var(--s-3);
    font-size: var(--fs-base);
    color: var(--text-muted);
  }

  .card__footer {
    margin-block-start: auto;
    padding-block-start: var(--s-6);
  }

  /* --- Media card (trading verticals) --------------------------------- */
  .media-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .media-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--sh-md);
  }

  .media-card__figure {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background-color: var(--ink-800);
  }

  .media-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
  }

  .media-card:hover .media-card__figure img {
    transform: scale(1.04);
  }

  .media-card__index {
    position: absolute;
    inset-block-start: var(--s-4);
    inset-inline-start: var(--s-4);
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--brass-300);
    background-color: color-mix(in srgb, var(--ink-950) 78%, transparent);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-xs);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .media-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(var(--s-5), 2.5vw, var(--s-6));
  }

  .media-card__title {
    font-size: var(--fs-xl);
  }

  .media-card__text {
    margin-block-start: var(--s-3);
    font-size: var(--fs-base);
    color: var(--text-muted);
  }

  .media-card__footer {
    margin-block-start: auto;
    padding-block-start: var(--s-5);
  }

  /* ------------------------------------------------------------------ *
   * Framed media
   * ------------------------------------------------------------------ */
  .framed {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--sh-lg);
  }

  .on-dark .framed {
    border-color: var(--line-dark);
  }

  .framed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
  }

  .framed--tall img {
    aspect-ratio: 3 / 4;
  }

  .framed--wide img {
    aspect-ratio: 3 / 2;
  }

  .framed__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--s-8) var(--s-6) var(--s-5);
    font-size: var(--fs-sm);
    color: #fff;
    background: linear-gradient(to top, rgb(5 9 15 / 0.88), transparent);
  }

  /* ------------------------------------------------------------------ *
   * Feature list (checkmarks)
   * ------------------------------------------------------------------ */
  .checklist {
    display: grid;
    gap: var(--s-4);
    list-style: none;
    padding: 0;
  }

  .checklist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-3);
    align-items: start;
    font-size: var(--fs-base);
  }

  .checklist .icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-block-start: 0.3rem;
    color: var(--brass-700);
    stroke-width: 2.25;
  }

  .on-dark .checklist .icon {
    color: var(--brass-300);
  }

  /* ------------------------------------------------------------------ *
   * Process steps
   * ------------------------------------------------------------------ */
  .steps {
    display: grid;
    gap: 1px;
    list-style: none;
    padding: 0;
    background-color: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  @media (min-width: 48rem) {
    .steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 68rem) {
    .steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .step {
    position: relative;
    padding: clamp(var(--s-6), 3vw, var(--s-8));
    background-color: var(--paper);
    transition: background-color var(--dur) var(--ease);
  }

  .step:hover {
    background-color: var(--paper-50);
  }

  .step__num {
    display: block;
    margin-block-end: var(--s-5);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
    color: var(--brass-700);
  }

  .step__title {
    font-size: var(--fs-lg);
  }

  .step__text {
    margin-block-start: var(--s-3);
    font-size: var(--fs-base);
    color: var(--text-muted);
  }

  /* ------------------------------------------------------------------ *
   * Vertical detail rows (activities page)
   * ------------------------------------------------------------------ */
  .vertical {
    padding-block: var(--section-y);
    border-block-start: 1px solid var(--line);
  }

  .vertical:first-of-type {
    border-block-start: 0;
  }

  .on-dark.vertical {
    border-block-start-color: var(--ink-700);
  }

  .vertical__label {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-block-end: var(--s-5);
  }

  .vertical__num {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px var(--brass-600);
  }

  .on-dark .vertical__num {
    -webkit-text-stroke-color: var(--brass-400);
  }

  .vertical__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-700);
  }

  /* ------------------------------------------------------------------ *
   * Coverage list
   * ------------------------------------------------------------------ */
  .coverage {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    border-block-start: 1px solid var(--line);
  }

  .coverage li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    align-items: baseline;
    padding-block: var(--s-5);
    border-block-end: 1px solid var(--line);
    transition: padding-inline-start var(--dur) var(--ease);
  }

  .coverage li:hover {
    padding-inline-start: var(--s-3);
  }

  .coverage__code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--brass-700);
  }

  .coverage__name {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .coverage__detail {
    grid-column: 2;
    margin-block-start: var(--s-1);
    font-size: var(--fs-base);
    color: var(--text-muted);
  }

  /* ------------------------------------------------------------------ *
   * Call-to-action band
   * ------------------------------------------------------------------ */
  .cta-band {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 6vw, 5rem);
    background-color: var(--ink-850);
    color: var(--text-on-dark);
    overflow: hidden;
  }

  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
      75% 130% at 12% 0%,
      color-mix(in srgb, var(--brass-500) 15%, transparent) 0%,
      transparent 68%
    );
  }

  .cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-8);
  }

  .cta-band__title {
    max-inline-size: 34rem;
    font-size: var(--fs-3xl);
    color: #fff;
  }

  .cta-band__text {
    max-inline-size: 34rem;
    margin-block-start: var(--s-4);
    color: var(--text-on-dark-muted);
  }

  /* ------------------------------------------------------------------ *
   * Forms
   * ------------------------------------------------------------------ */
  .form-grid {
    display: grid;
    gap: var(--s-5);
  }

  @media (min-width: 34rem) {
    .form-grid--2 {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .form-grid__full {
      grid-column: 1 / -1;
    }
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .field__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
  }

  .field__req {
    color: var(--brass-700);
  }

  .field__hint {
    font-size: var(--fs-xs);
    color: var(--text-soft);
  }

  .control {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background-color: var(--paper-50);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast) var(--ease),
      background-color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
    appearance: none;
  }

  .control::placeholder {
    color: var(--text-soft);
  }

  .control:hover {
    border-color: var(--text-soft);
  }

  .control:focus {
    outline: 0;
    background-color: var(--paper);
    border-color: var(--brass-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass-500) 24%, transparent);
  }

  .control:user-invalid {
    border-color: var(--err-text);
  }

  textarea.control {
    min-height: 8.5rem;
    resize: vertical;
  }

  /* Native select needs an explicit chevron once appearance is reset. */
  select.control {
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355627a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem;
  }

  /* Honeypot: removed from the accessibility tree and off-canvas rather than
     display:none, which some bots detect. */
  .decoy {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Form status message */
  .form-status {
    display: none;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4);
    margin-block-end: var(--s-5);
    font-size: var(--fs-base);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
  }

  .form-status[data-state="success"],
  .form-status[data-state="error"] {
    display: flex;
  }

  .form-status[data-state="success"] {
    color: var(--ok-text);
    background-color: var(--ok-bg);
    border-color: var(--ok-line);
  }

  .form-status[data-state="error"] {
    color: var(--err-text);
    background-color: var(--err-bg);
    border-color: var(--err-line);
  }

  .form-status .icon {
    margin-block-start: 0.15rem;
  }

  .form-footnote {
    margin-block-start: var(--s-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  /* Busy state spinner on submit buttons */
  .btn[data-busy="true"] {
    pointer-events: none;
    opacity: 0.75;
  }

  .spinner {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: spin 640ms linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ------------------------------------------------------------------ *
   * Contact layout
   * ------------------------------------------------------------------ */
  /* minmax(0, ...) rather than a bare fr. A grid item defaults to
     min-width: auto, so the column floors at the item's min-content width. The
     unbreakable email addresses in the panel pushed that to 303px inside a 280px
     container at 320px wide, overflowing the page. */
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--s-8), 4vw, var(--s-12));
    align-items: start;
  }

  @media (min-width: 62rem) {
    .contact-layout {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
  }

  .contact-panel {
    padding: clamp(var(--s-6), 3vw, var(--s-10));
    background-color: var(--ink-850);
    color: var(--text-on-dark);
    border: 1px solid var(--ink-600);
    border-radius: var(--r-lg);
  }

  .contact-panel__title {
    font-size: var(--fs-2xl);
    color: #fff;
  }

  .contact-panel__lead {
    margin-block-start: var(--s-3);
    color: var(--text-on-dark-muted);
  }

  .contact-list {
    display: grid;
    gap: 0;
    margin-block-start: var(--s-8);
    list-style: none;
    padding: 0;
  }

  .contact-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    padding-block: var(--s-5);
    border-block-start: 1px solid var(--ink-600);
  }

  .contact-list li:last-child {
    border-block-end: 1px solid var(--ink-600);
  }

  .contact-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    color: var(--brass-300);
    background-color: rgb(255 255 255 / 0.05);
    border: 1px solid var(--ink-500);
    border-radius: var(--r-sm);
  }

  .contact-list__term {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
  }

  /* Email addresses have no natural break opportunity, so let them wrap rather
     than dictate the panel's width. */
  .contact-list__value {
    margin-block-start: var(--s-2);
    font-size: var(--fs-base);
    color: #fff;
    overflow-wrap: break-word;
  }

  .contact-list__value a:hover {
    color: var(--brass-300);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .contact-list__note {
    margin-block-start: var(--s-1);
    font-size: var(--fs-xs);
    color: var(--brass-300);
  }

  .form-panel {
    padding: clamp(var(--s-6), 3vw, var(--s-10));
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
  }

  /* ------------------------------------------------------------------ *
   * Map
   * ------------------------------------------------------------------ */
  /* Carries .on-dark in the markup rather than setting its own dark colours.
     Without it, descendants fell back to the light-surface tokens: the "Open in
     Google Maps" button rendered dark navy on dark navy and was invisible, and
     the eyebrow used the dark-gold --brass-700 intended for white backgrounds. */
  .map-panel {
    padding: clamp(var(--s-6), 3vw, var(--s-8));
    border: 1px solid var(--ink-600);
    border-radius: var(--r-lg);
  }

  .map-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    margin-block-end: var(--s-6);
  }

  /* An explicit height rather than aspect-ratio + min-height. With those two
     together, once min-height clamped the height the browser derived the WIDTH
     back from the ratio: 288px x 21/9 = 672px, which overflowed every viewport
     narrower than about 700px and put a horizontal scrollbar on /contact. */
  .map-frame {
    width: 100%;
    height: clamp(18rem, 44vw, 26rem);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--ink-600);
    /* Slight desaturation keeps the embed from fighting the brand palette. */
    filter: saturate(0.85) contrast(1.02);
  }

  .map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ------------------------------------------------------------------ *
   * Modal
   * ------------------------------------------------------------------ */
  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background-color: rgb(5 9 15 / 0.72);
    opacity: 0;
    visibility: hidden;
    /* Same instant-open, delayed-close treatment as the nav panel, so the
       dialog is focusable as soon as it is opened. */
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  .modal[data-open="true"] {
    transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
  }

  @supports (backdrop-filter: blur(1px)) {
    .modal {
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
  }

  .modal[data-open="true"] {
    opacity: 1;
    visibility: visible;
  }

  .modal__dialog {
    width: 100%;
    max-inline-size: 38rem;
    max-block-size: calc(100svh - 2 * var(--gutter));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    transform: translateY(12px) scale(0.985);
    transition: transform var(--dur) var(--ease);
  }

  .modal[data-open="true"] .modal__dialog {
    transform: translateY(0) scale(1);
  }

  .modal__head {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) clamp(var(--s-5), 3vw, var(--s-8));
    background-color: var(--ink-850);
    border-block-end: 2px solid var(--brass-500);
  }

  .modal__title {
    font-size: var(--fs-xl);
    color: #fff;
  }

  .modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text-on-dark-muted);
    border: 1px solid var(--ink-600);
    border-radius: var(--r-sm);
    transition: color var(--dur-fast) var(--ease),
      background-color var(--dur-fast) var(--ease);
  }

  .modal__close:hover {
    color: #fff;
    background-color: var(--ink-700);
  }

  .modal__body {
    padding: clamp(var(--s-5), 3vw, var(--s-8));
  }

  /* ------------------------------------------------------------------ *
   * Footer
   * ------------------------------------------------------------------ */
  .site-footer {
    background-color: var(--ink-900);
    color: var(--text-on-dark-muted);
    font-size: var(--fs-base);
  }

  .site-footer__top {
    display: grid;
    gap: clamp(var(--s-8), 4vw, var(--s-10));
    padding-block: clamp(3rem, 6vw, 4.5rem);
  }

  @media (min-width: 48rem) {
    .site-footer__top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 68rem) {
    .site-footer__top {
      grid-template-columns:
        minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    }
  }

  .site-footer__blurb {
    max-inline-size: 26rem;
    margin-block-start: var(--s-5);
  }

  .footer-heading {
    margin-block-end: var(--s-5);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
  }

  .footer-links {
    display: grid;
    gap: var(--s-3);
    list-style: none;
    padding: 0;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: color var(--dur-fast) var(--ease), gap var(--dur) var(--ease);
  }

  .footer-links a .icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--brass-500);
  }

  .footer-links a:hover {
    gap: var(--s-3);
    color: #fff;
  }

  .footer-contact {
    display: grid;
    gap: var(--s-4);
    list-style: none;
    padding: 0;
  }

  .footer-contact li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-3);
    align-items: start;
  }

  .footer-contact .icon {
    margin-block-start: 0.2rem;
    color: var(--brass-500);
  }

  .footer-contact a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .site-footer__bottom {
    background-color: var(--ink-950);
    border-block-start: 1px solid var(--ink-700);
    font-size: var(--fs-sm);
  }

  .site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
    padding-block: var(--s-5);
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    list-style: none;
    padding: 0;
  }

  .site-footer__legal a:hover {
    color: var(--brass-300);
  }

  /* ------------------------------------------------------------------ *
   * Touch target sizing
   * ------------------------------------------------------------------ *
   * Secondary link lists sit at 19-25px tall, which is comfortable with a
   * mouse but below the 44px touch guideline. Rather than pad them everywhere
   * and loosen the desktop layout, the extra hit area is applied only where the
   * primary pointer is coarse. The list gap is removed at the same time so the
   * padding absorbs it and the visual rhythm stays close to the desktop one.
   *
   * Buttons and form controls are not listed here: those already exceed 44px at
   * every breakpoint and are conversion-critical, so they are sized generously
   * for mouse users too.
   * ------------------------------------------------------------------ */
  @media (pointer: coarse) {
    .footer-links {
      gap: 0;
    }

    .footer-links a {
      padding-block: 0.625rem;
    }

    .footer-contact a {
      display: inline-block;
      padding-block: 0.625rem;
    }

    .utility-bar__item {
      padding-block: 0.75rem;
    }

    .site-footer__legal a {
      display: inline-block;
      padding-block: 0.75rem;
    }

    /* Breadcrumb links reach 44px tall but stay narrower than 44px for short
       words such as "Home". Padding them out horizontally would visibly break
       the crumb rhythm, and at 36x44 they already clear the 24x24 minimum in
       WCAG 2.5.8; the 44px figure is the AAA target. */
    .breadcrumb a {
      display: inline-block;
      padding-block: 0.625rem;
    }

    /* The logo image is 38px tall at small sizes, so the home link needs a
       little padding to reach a 44px hit area. Applied to the link rather than
       the image so the artwork itself is not scaled up. */
    .brand {
      padding-block: 0.25rem;
    }
  }

  /* ------------------------------------------------------------------ *
   * Prose (legal / long-form copy)
   * ------------------------------------------------------------------ */
  .prose {
    max-inline-size: var(--container-text);
  }

  .prose > * + * {
    margin-block-start: var(--s-5);
  }

  .prose h2 {
    margin-block-start: var(--s-12);
    padding-block-start: var(--s-6);
    font-size: var(--fs-2xl);
    border-block-start: 1px solid var(--line);
  }

  .prose h3 {
    margin-block-start: var(--s-8);
    font-size: var(--fs-lg);
  }

  .prose p,
  .prose li {
    color: var(--text-muted);
  }

  .prose ul,
  .prose ol {
    padding-inline-start: var(--s-5);
    display: grid;
    gap: var(--s-2);
  }

  .prose a {
    color: var(--brass-700);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .prose a:hover {
    color: var(--text);
  }

  .prose__updated {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  /* ------------------------------------------------------------------ *
   * Scroll reveal
   * ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease);
      transition-delay: var(--reveal-delay, 0ms);
    }

    [data-reveal][data-revealed="true"] {
      opacity: 1;
      transform: none;
    }
  }

  /* No-JS safeguard: never leave content hidden if the script fails. */
  .no-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .mt-4 {
    margin-block-start: var(--s-4);
  }
  .mt-6 {
    margin-block-start: var(--s-6);
  }
  .mt-8 {
    margin-block-start: var(--s-8);
  }
  .mt-10 {
    margin-block-start: var(--s-10);
  }

  .no-scroll {
    overflow: hidden;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .utility-bar,
  .site-header,
  .nav-scrim,
  .modal,
  .hero__panel,
  .hero__scrim,
  .hero__grid-overlay,
  .map-panel,
  .cta-band,
  .skip-link,
  .form-panel {
    display: none !important;
  }

  :root {
    --section-y: 1.5rem;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hero,
  .page-hero,
  .on-dark,
  .contact-panel {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }

  .hero :is(h1, h2, h3, p),
  .page-hero :is(h1, h2, h3, p),
  .on-dark :is(h1, h2, h3, p),
  .contact-panel :is(h1, h2, h3, p, span, a) {
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}