/* ===================================================================
   components.css — page & section styles, consolidated from the view
   <style> blocks (Iteration 4). Loaded AFTER design-system.css.
   Legal pages are body-scoped (.page-<slug>) to avoid shared
   legal-* class collisions between the three differing layouts.
   =================================================================== */


/* ==================== HOME ==================== */
/* ============================================================
       HOME — bespoke section layout only.
       Tokens, reset, components come from design-system.css.
       Every class is prefixed by its section.
       ============================================================ */

    /* ---- 1. HERO — full-bleed 3-slide carousel ----------------- */
    .hero-carousel { position: relative; }
    .hero-carousel__viewport {
      position: relative;
      /* min-height (not a fixed height): the hero grows to fit tall content
         at small breakpoints instead of clipping the eyebrow/headline/CTAs. */
      min-height: clamp(500px, 80svh, 760px);
      overflow: hidden;
      background: var(--mds-ink);            /* solid fallback behind the slides */
      display: flex;                         /* vertically centre the content stack */
      flex-direction: column;
      justify-content: center;
    }

    /* Stacked slides — only the background image cross-fades */
    .hero-carousel__track {
      position: absolute; inset: 0;
      list-style: none; margin: 0; padding: 0;
    }
    .hero-slide {
      position: absolute; inset: 0;
      opacity: 0; visibility: hidden;
      transition: opacity var(--dur-slow) var(--ease-out),
                  visibility 0s linear var(--dur-slow);
    }
    .hero-slide.is-active {
      opacity: 1; visibility: visible; z-index: 1;
      transition: opacity var(--dur-slow) var(--ease-out);
    }
    .hero-slide__img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      filter: saturate(.9) brightness(.98) contrast(1.03);  /* unify the grade */
    }
    /* image-load failure fallback (class added by motion.js, not inline) */
    .hero-slide--failed { background: var(--mds-ink); }
    .hero-slide--failed .hero-slide__img { display: none; }

    /* ONE consistent navy scrim across every slide: darker where the
       left-anchored text sits, lighter over the image. Legibility + unifier. */
    .hero-carousel__scrim {
      position: absolute; inset: 0; z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          rgba(14,59,76,.86) 0%, rgba(14,59,76,.60) 34%,
          rgba(14,59,76,.26) 66%, rgba(14,59,76,.14) 100%),
        linear-gradient(180deg,
          rgba(14,59,76,.28) 0%, rgba(14,59,76,.05) 42%, rgba(14,59,76,.30) 100%);
    }

    /* Overlay copy (fixed across slides). In normal flow (not absolute) so the
       content drives the hero height, with its OWN comfortable vertical padding
       — decoupled from the global section-spacing rules so they can't strip it.
       Extra bottom padding keeps the CTAs clear of the slide dots/controls. */
    .hero-carousel__overlay {
      position: relative; z-index: 3;
      width: 100%;
      padding-top:    clamp(var(--space-7), 7vh, var(--space-9));   /* 48 → 96px */
      padding-bottom: clamp(var(--space-8), 9vh, var(--space-10));  /* 64 → 128px, clears dots */
    }
    .hero-copy { max-width: 46ch; }
    .hero-carousel .hero-eyebrow {
      color: var(--mds-signal-blue);
      margin-bottom: var(--space-4);
    }
    .hero-carousel .hero-headline {
      color: var(--mds-white);
      font-size: clamp(2.2rem, 4.4vw, 4rem);   /* 3–6 words per line */
      margin-bottom: var(--space-5);
      text-shadow: 0 1px 20px rgba(10,30,40,.30);
    }
    .hero-carousel .hero-subline {
      color: rgba(255,255,255,.92);
      margin-bottom: var(--space-6);
      max-width: 54ch;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

    /* Primary keeps its brass hover; secondary becomes a white outline. */
    .hero-carousel .btn--primary.hero-cta:hover {
      background: var(--mds-brass);
      border-color: var(--mds-brass);
      color: var(--mds-ink);
    }
    .hero-cta--ghost {
      background: transparent;
      color: var(--mds-white);
      border-color: rgba(255,255,255,.7);
    }
    .hero-cta--ghost:hover {
      background: var(--mds-white);
      color: var(--color-primary);
      border-color: var(--mds-white);
      transform: translateY(-1px);
    }
    .hero-cta:focus-visible { outline-color: var(--mds-white); }

    /* Prev / next arrows */
    .hero-carousel__arrow {
      position: absolute; top: 50%; z-index: 4;
      transform: translateY(-50%);
      width: 44px; height: 44px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.55);
      color: var(--mds-white);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out),
                  border-color var(--dur-fast) var(--ease-out);
    }
    .hero-carousel__arrow:hover { background: rgba(255,255,255,.30); border-color: var(--mds-white); }
    .hero-carousel__arrow:focus-visible { outline: 2px solid var(--mds-white); outline-offset: 2px; }
    .hero-carousel__arrow svg { width: 20px; height: 20px; }
    .hero-carousel__arrow--prev { left: clamp(12px, 3vw, 28px); }
    .hero-carousel__arrow--next { right: clamp(12px, 3vw, 28px); }

    /* Slide-indicator dots */
    .hero-carousel__dots {
      position: absolute; z-index: 4;
      left: 0; right: 0; bottom: clamp(16px, 3vh, 28px);
      display: flex; justify-content: center; gap: var(--space-3);
    }
    .hero-carousel__dot {
      width: 10px; height: 10px; padding: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.4);
      border: 1px solid rgba(255,255,255,.7);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
    }
    .hero-carousel__dot.is-active { background: var(--mds-white); transform: scale(1.3); }
    .hero-carousel__dot:focus-visible { outline: 2px solid var(--mds-white); outline-offset: 2px; }

    @media (max-width: 640px) {
      .hero-carousel__arrow { display: none; }   /* dots + swipe suffice on touch */
      .hero-carousel__viewport { min-height: clamp(460px, 74svh, 620px); }
    }

    /* ---- 2. VALUE BAND — Key Selling Points -------------------- */
    .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: var(--gap);
    }
    .values-item {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      align-items: flex-start;
      padding: var(--space-6);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      transition: box-shadow var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
    }
    .values-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .values-icon {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 50%;                     /* soft Mist circle */
      background: var(--color-surface-alt);
      color: var(--color-primary);            /* Diplomatic Blue icon */
    }
    .values-icon svg { width: 25px; height: 25px; }
    .values-text { display: flex; flex-direction: column; gap: var(--space-2); }
    .values-label {
      font-weight: var(--fw-headline);
      font-size: 1.05rem;
      line-height: 1.25;
      color: var(--color-heading);
    }
    .values-line { font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.5; }

    /* Mobile: compact horizontal cards (icon left, text right) — intentional,
       not a plain list, under the hero's "Open an account" CTA. */
    @media (max-width: 560px) {
      .values-grid { grid-template-columns: 1fr; }   /* single column of wide horizontal cards */
      .values-item {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-5);
      }
      .values-icon { width: 46px; height: 46px; }
      .values-icon svg { width: 22px; height: 22px; }
    }

    /* ---- 3. AVAILABILITY SPOTLIGHT ----------------------------- */
    .avail-panel {
      background: var(--color-cta-band);      /* Diplomatic-Blue panel, NOT full-bleed */
      color: var(--color-text-inverse);
      border-radius: var(--radius-lg);
      padding: clamp(var(--space-6), 5vw, var(--space-8));
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
    }
    .avail-copy {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      max-width: 58ch;
    }
    .avail-title { color: var(--color-text-inverse); }
    .avail-body {
      color: rgba(255, 255, 255, .9);
      font-weight: var(--fw-subhead);
      font-size: clamp(1.05rem, 1.4vw, 1.25rem);
      line-height: 1.5;
    }
    .avail-action { flex: 0 0 auto; }

    /* ---- 4. BRANDS WE SUPPLY (flat dark Ink band; navy stays footer-only) ---- */
    .brands-band { background: var(--mds-ink); color: var(--color-text-inverse); }
    .brands-band .brands-head h2 { color: var(--color-text-inverse); }
    .brands-eyebrow { color: var(--color-accent-light); }        /* signal blue on dark */
    .brands-band .brands-line { color: rgba(255,255,255,.82); }
    .brands-head {
      text-align: center;
      max-width: 62ch;
      margin-inline: auto;
      margin-bottom: var(--space-7);
    }
    .brands-line { margin-inline: auto; }
    /* Logo wall — real SVGs of mixed aspect ratio, normalised by HEIGHT */
    .brands-wall {
      list-style: none;
      margin: var(--space-8) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      align-items: center;
      gap: clamp(28px, 4vw, 56px);
    }
    .brands-wall__item { display: flex; align-items: center; justify-content: center; }
    .brands-wall__logo {
      height: 38px;                 /* uniform optical size by height */
      width: auto;
      max-width: 100%;
      object-fit: contain;
      transition: transform var(--dur-fast) var(--ease-out);
    }
    .brands-wall__item:hover .brands-wall__logo { transform: translateY(-2px); }
    @media (max-width: 640px) {
      .brands-wall { gap: clamp(20px, 5vw, 32px); }
      .brands-wall__logo { height: 28px; }
    }

    /* ---- 5. PRODUCT CATEGORIES — THE SIGNATURE SCENE ----------- */
    .cats-head { max-width: 64ch; }
    .section.cats-lead { padding-bottom: clamp(24px, 3vw, 44px); }
    .section.cats-tail { padding-top: clamp(24px, 3vw, 44px); }

    .cats-scene { position: relative; }
    .cats-track { padding-inline: var(--container-pad); }   /* first panel off the edge */
    .cats-panel { width: min(78vw, 420px); }
    .cats-panel .category-card { height: 100%; }

    .cats-availability {
      font-style: italic;
      color: var(--color-text-secondary);
      max-width: 70ch;
    }
    .cats-availability a { font-style: normal; color: var(--color-primary); }

    /* ---- 6. WHY MDS TEASER ------------------------------------- */
    .why-inner {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(var(--space-6), 5vw, var(--space-8));
      align-items: start;
    }
    .why-intro { max-width: 42ch; }
    .why-checks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6) var(--gap);
    }
    .why-item { display: flex; gap: var(--space-3); align-items: flex-start; }
    .why-check {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      color: var(--color-seal);               /* brass check */
    }
    .why-check svg { width: 15px; height: 15px; }
    .why-item-title {
      font-weight: var(--fw-headline);
      font-size: 1rem;
      line-height: 1.3;
      color: var(--color-heading);
      margin-bottom: 2px;
    }
    .why-item-line { font-size: var(--fs-small); color: var(--color-text-secondary); }

    /* ---- 7. HOW IT WORKS --------------------------------------- */
    .how-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--gap);
    }
    .how-step {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      padding: var(--space-6);
    }
    .how-num {
      font-family: var(--font-brand);
      font-weight: var(--fw-headline);
      font-size: 2rem;
      line-height: 1;
      color: var(--color-seal);               /* brass step number */
    }
    .how-label { font-size: var(--fs-h3); color: var(--color-heading); }
    .how-line { font-size: var(--fs-small); color: var(--color-text-secondary); }

    /* Mobile: compact 2×2 grid so all four steps read within ~a screen
       (was four tall stacked cards taller than the viewport). Content intact. */
    @media (max-width: 560px) {
      .how-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
      }
      .how-step {
        gap: var(--space-2);
        padding: var(--space-4);
      }
      .how-num { font-size: 1.6rem; }
      .how-label { font-size: 1.05rem; }
    }

    /* ---- 8. TRUST CUE ------------------------------------------ */
    .trust-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--space-4);
    }
    .trust-stat-num {
      font-family: var(--font-brand);
      font-weight: var(--fw-headline);
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1;
      color: var(--color-heading);
    }
    .trust-stat-label { font-size: var(--fs-small); color: var(--color-text-secondary); }
    .trust-endorse { color: var(--color-text-secondary); max-width: 60ch; }
    .trust-pills {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      justify-content: center;
    }

    /* ---- Responsive -------------------------------------------- */
    @media (max-width: 860px) {
      .why-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .why-checks { grid-template-columns: 1fr; }
    }


/* ==================== ABOUT ==================== */
/* ============================================================
       ABOUT — bespoke section layout only (tokens + shared classes)
       Every class is prefixed by its section. No token/reset/base
       component is redefined here.
       ============================================================ */

    /* 1. WHO WE ARE — text + composed media, no void beside copy */
    .about-who__grid {
      display: grid;
      gap: var(--space-7);
      align-items: center;
    }
    @media (min-width: 880px) {
      .about-who__grid { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-8); }
    }
    .about-who__copy > * + * { margin-block-start: var(--space-4); }
    .about-who__endorse {
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
      letter-spacing: .01em;
    }
    .about-who__media { min-width: 0; }
    .about-who__figure {
      aspect-ratio: 3 / 4;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .about-who__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* 2. PART OF THE GROUP — hierarchy chips with brass arrow links */
    .about-group__grid {
      display: grid;
      gap: var(--space-7);
      align-items: start;
    }
    @media (min-width: 900px) {
      .about-group__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    }
    .about-group__chain {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .about-group__link {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    .about-group__chip {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: var(--space-4) var(--space-5);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }
    .about-group__chip--lead { border-color: var(--mds-border-strong); }
    .about-group__role {
      font-size: var(--fs-small);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-text-secondary);
    }
    .about-group__name {
      font-weight: var(--fw-headline);
      color: var(--color-heading);
      font-size: 1.15rem;
      line-height: 1.2;
    }
    /* brass connector arrow between tiers (points down) */
    .about-group__arrow {
      display: flex;
      justify-content: center;
      color: var(--color-seal);
      padding-left: var(--space-2);
    }
    .about-group__arrow svg { width: 18px; height: 18px; }

    /* 3. EXPERIENCE & SUPPLY NETWORK — mist metric tiles */
    .about-exp__tiles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap);
      margin-top: var(--space-6);
    }
    @media (min-width: 860px) {
      .about-exp__tiles { grid-template-columns: repeat(4, 1fr); }
    }
    .about-exp__tile {
      background: var(--color-surface-alt);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-6) var(--space-5);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      align-items: center;
    }
    .about-exp__figure {
      font-weight: var(--fw-headline);
      color: var(--color-heading);
      font-size: clamp(1.9rem, 3.4vw, 2.7rem);
      line-height: 1;
      letter-spacing: var(--tracking-display);
    }
    .about-exp__seal {
      width: 40px;
      height: 2px;
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--color-seal);
      margin: 0;
    }
    .about-exp__label {
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
      line-height: 1.4;
    }
    .about-exp__note {
      margin-top: var(--space-6);
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
      max-width: 68ch;
    }

    /* 4. COVERAGE — map-pin motif beside statement (SVG, no photo) */
    .about-cov__grid {
      display: grid;
      gap: var(--space-7);
      align-items: center;
    }
    @media (min-width: 860px) {
      .about-cov__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    }
    .about-cov__motif {
      display: grid;
      place-items: center;
      padding: var(--space-5);
    }
    .about-cov__motif svg { width: 100%; max-width: 340px; height: auto; }
    /* token-driven colours (var() only resolves in CSS, not SVG attributes) */
    .about-cov__ring--3 { stroke: var(--mds-signal-blue); }
    .about-cov__ring--2 { stroke: var(--mds-compass-blue); }
    .about-cov__ring--1 { stroke: var(--mds-diplomatic-blue); }
    .about-cov__pin  { fill: var(--mds-diplomatic-blue); }
    .about-cov__seal { fill: var(--mds-brass); }
    .about-cov__base { fill: var(--mds-ink); }

    /* 5. OUR APPROACH — three principle cards */
    .about-approach__cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--gap);
      margin-top: var(--space-6);
    }
    .about-approach__card {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-6);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }
    .about-approach__name {
      font-size: var(--fs-h3);
      color: var(--color-heading);
    }
    .about-approach__seal {
      width: 44px;
      height: 3px;
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--color-seal);
      margin: 0;
    }
    .about-approach__text {
      color: var(--color-text-secondary);
      line-height: var(--lh-body);
    }

    /* 6. COMPLIANCE — centered pills */
    .about-comp__pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-3);
      margin-top: var(--space-5);
    }
    .about-comp__pills .pill { font-size: var(--fs-body); padding: .5rem 1.05rem; }


/* ==================== CONTACT ==================== */
/* =======================================================
       CONTACT / OPEN AN ACCOUNT — bespoke section layout
       Composed on shared tokens + components. No token,
       reset or shared component is redefined here.
       ======================================================= */

    /* --- INTRO ------------------------------------------- */
    .contact-intro { padding-block: var(--section-py) var(--space-6); }
    .contact-intro-copy { max-width: 58ch; }

    /* --- TWO-COLUMN LAYOUT (prefix contact-) ------------- */
    .contact-layout { padding-block: var(--space-6) var(--section-py); }
    .contact-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr;      /* ~62% form · ~38% rail */
      gap: clamp(var(--space-5), 4vw, var(--space-8));
      align-items: start;
    }
    .contact-rail {
      display: flex;
      flex-direction: column;
      gap: var(--gap);
    }

    /* --- FORM CARD (prefix contact-form-) ---------------- */
    .contact-form-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      padding: clamp(var(--space-5), 4vw, var(--space-7));
    }
    .contact-form-head { margin-bottom: var(--space-6); }
    .contact-form-head h2 { margin: 0; }
    .contact-form-intro {
      margin-top: var(--space-3);
      color: var(--color-text-secondary);
      max-width: 52ch;
    }
    .contact-form {
      display: grid;
      gap: var(--space-5);
    }
    .contact-form[hidden] { display: none; }   /* guard: grid must not override [hidden] */

    /* General submit error (CSRF / spam / rate limit / n8n failure). */
    .contact-form-alert {
      border: 1px solid var(--color-danger);
      border-left-width: 3px;
      background: var(--color-danger-bg);
      border-radius: var(--radius-sm);
      padding: var(--space-3) var(--space-4);
    }
    .contact-form-alert[hidden] { display: none; }
    .contact-form-alert__text { margin: 0; color: var(--color-danger); }

    .contact-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    /* Confirmation (revealed by the inline handler) */
    .contact-form-confirm {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
      padding-block: var(--space-4);
      max-width: 48ch;
    }
    .contact-form-confirm[hidden] { display: none; }  /* guard */
    .contact-form-confirm-seal {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--color-seal);   /* brass seal */
      color: var(--color-seal);
    }
    .contact-form-confirm-seal svg { width: 24px; height: 24px; display: block; }
    .contact-form-confirm-title {
      font-family: var(--font-brand);
      font-weight: var(--fw-headline);
      font-size: var(--fs-h3);
      line-height: var(--lh-heading);
      color: var(--color-heading);
    }
    .contact-form-confirm-text { color: var(--color-text-secondary); }

    /* --- RAIL CARDS -------------------------------------- */
    .contact-elig-card,
    .contact-details-card,
    .contact-how-card {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      padding: var(--space-6);
    }
    .contact-elig-card { background: var(--color-surface-alt); border-color: transparent; }  /* Mist */
    .contact-details-card,
    .contact-how-card { background: var(--color-surface); }

    .contact-rail-title {
      font-size: var(--fs-h3);
      margin: 0 0 var(--space-4);
    }

    /* Eligibility */
    .contact-elig-points {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .contact-elig-point-label {
      display: block;
      font-size: var(--fs-small);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-eyebrow);
      margin-bottom: var(--space-1);
    }
    .contact-elig-point-text { color: var(--color-text-secondary); }
    .contact-elig-note {
      margin-top: var(--space-5);
      padding-top: var(--space-4);
      border-top: 1px solid var(--mds-border-strong);
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
    }

    /* Contact & office details */
    .contact-details-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .contact-details-item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-4);
      align-items: start;
    }
    .contact-details-icon {
      flex: 0 0 auto;
      margin-top: 2px;
      color: var(--color-seal);              /* small brass icons */
    }
    .contact-details-icon svg { width: 20px; height: 20px; display: block; }
    .contact-details-label {
      display: block;
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
      margin-bottom: 1px;
    }
    .contact-details-value { color: var(--color-heading); }
    .contact-details-value a { color: var(--color-primary); }

    /* How it works */
    .contact-how-steps {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }
    .contact-how-step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-4);
      align-items: start;
    }
    .contact-how-num {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--color-seal); /* brass number ring */
      color: var(--color-seal);
      font-weight: var(--fw-headline);
      font-size: .95rem;
      flex: 0 0 auto;
    }
    .contact-how-title { font-size: 1.05rem; margin: 0 0 var(--space-1); }
    .contact-how-text { font-size: var(--fs-small); color: var(--color-text-secondary); }

    /* --- RESPONSIVE -------------------------------------- */
    @media (max-width: 860px) {
      .contact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .contact-form-row { grid-template-columns: 1fr; }
    }


/* ==================== SERVICES ==================== */
/* ============================================================
       SERVICES PAGE — bespoke section layout only.
       Tokens, reset, components come from design-system.css.
       ============================================================ */

    /* ---- 1. INTRO (svc-intro-) — editorial two-part lead-in ---- */
    .svc-intro__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6) var(--space-8);
      align-items: start;
    }
    .svc-intro__lead {
      font-weight: var(--fw-subhead);
      font-size: clamp(1.05rem, 1.4vw, 1.3rem);
      line-height: 1.6;
      color: var(--color-text-secondary);
      max-width: 60ch;
    }
    @media (min-width: 880px) {
      .svc-intro__grid { grid-template-columns: 1.15fr 1fr; }
    }

    /* ---- 2. OUR SERVICES (svc-what-) — the WHAT: card grid ----- */
    .svc-what__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
      gap: var(--gap);
      margin-top: var(--space-7);
    }
    .svc-what__card {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      padding: var(--space-6);
      transition: box-shadow var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
    }
    .svc-what__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .svc-what__icon {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: var(--radius-md);
      background: var(--color-surface-alt);   /* Mist tile */
      color: var(--color-accent);             /* Compass Blue icon */
    }
    .svc-what__icon svg { width: 26px; height: 26px; }
    .svc-what__title {
      font-size: var(--fs-h3);
      color: var(--color-heading);
      margin: 0;
    }
    .svc-what__line {
      color: var(--color-text-secondary);
      line-height: 1.55;
      margin: 0;
    }

    /* ---- 3. WHY CHOOSE MDS (svc-why-) — the EDGE: check list --- */
    .svc-why__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6) var(--space-8);
      margin-top: var(--space-7);
    }
    @media (min-width: 760px) {
      .svc-why__grid { grid-template-columns: repeat(2, 1fr); }
    }
    .svc-why__item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-border);
    }
    .svc-why__check {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      color: var(--color-seal);               /* Brass check */
    }
    .svc-why__check svg { width: 18px; height: 18px; }
    .svc-why__text { display: flex; flex-direction: column; gap: var(--space-2); }
    .svc-why__title { font-size: var(--fs-h3); color: var(--color-heading); margin: 0; }
    .svc-why__line { color: var(--color-text-secondary); line-height: 1.55; margin: 0; }

    /* ---- 4. FAQ (svc-faq-) — sticky intro + accordion panel ---- */
    .svc-faq__layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7) var(--space-8);
      align-items: start;
    }
    .svc-faq__contact { display: inline-block; margin-top: var(--space-4); font-weight: var(--fw-body); }
    @media (min-width: 900px) {
      .svc-faq__layout { grid-template-columns: 0.82fr 1.18fr; }
      .svc-faq__intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
    }

    /* ---- 5. CLOSING CTA (svc-cta-) ----------------------------- */
    .svc-cta__actions { justify-content: center; }


/* ==================== PRODUCTS ==================== */
/* ===== Products hub — bespoke section layout (prefixed) ===== */

    /* 1. Intro / range framing header */
    .hub-intro__header { max-width: 64rem; }

    /* 2. Category cards block */
    .hub-cats { margin-top: var(--space-8); }
    .hub-cats__head { max-width: 60rem; margin-bottom: var(--space-6); }
    .hub-cats__grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--gap);
    }
    /* Layout placement only for the shared component within this grid.
       Yields a composed 3 + 2 (centred) arrangement at desktop widths. */
    .hub-cats__grid > .category-card {
      flex: 1 1 300px;
      max-width: 380px;
    }


/* ==================== 404 / 500 (error pages) ==================== */
.nf-section { text-align: center; }
    .nf-actions {
      display: flex;
      gap: var(--space-4);
      justify-content: center;
      flex-wrap: wrap;
      margin-top: var(--space-6);
    }
    /* Direct-contact line on the 500 page — muted, secondary to the buttons. */
    .nf-contact {
      margin-top: var(--space-4);
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
    }


/* ==================== PRIVACY ==================== */
.page-privacy .legal-doc {
      max-width: 70ch;
      margin-inline: auto;
     }
.page-privacy .legal-head {
      margin-bottom: var(--space-8);
     }
.page-privacy .legal-head h1 {
      font-size: var(--fs-h1);
     }
.page-privacy .legal-updated {
      margin-top: var(--space-4);
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
     }
.page-privacy .legal-updated strong {
      color: var(--color-text);
      font-weight: 600;
     }
.page-privacy .legal-intro {
      margin-top: var(--space-5);
      max-width: 65ch;
     }
.page-privacy .legal-toc {
      margin-bottom: var(--space-8);
      padding: var(--space-6);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface);
     }
.page-privacy .legal-toc__title {
      font-size: var(--fs-small);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-eyebrow);
      margin-bottom: var(--space-4);
     }
.page-privacy .legal-toc__list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2) var(--space-6);
     }
.page-privacy .legal-toc__link {
      display: inline-block;
      padding-block: 2px;
      color: var(--color-text);
      border-bottom: 1px solid transparent;
     }
.page-privacy .legal-toc__link:hover,
.page-privacy .legal-toc__link:focus-visible {
      color: var(--color-link);
      border-bottom-color: var(--color-seal); 
     }
.page-privacy .legal-section {
      max-width: 65ch;
      padding-top: var(--space-7);
      margin-top: var(--space-7);
      border-top: 1px solid var(--color-border);
     }
.page-privacy .legal-section:first-of-type {
      border-top: 0;
      padding-top: 0;
      margin-top: 0;
     }
.page-privacy .legal-section h2 {
      font-size: var(--fs-h3);
      scroll-margin-top: var(--space-8);
     }
.page-privacy .legal-section > * + * {
      margin-top: var(--space-4);
     }
.page-privacy .legal-list {
      list-style: disc;
      padding-left: 1.3em;
     }
.page-privacy .legal-list li + li {
      margin-top: var(--space-2);
     }
.page-privacy .legal-list li {
      padding-left: var(--space-2);
     }
.page-privacy .legal-contact {
      font-style: normal;
      padding: var(--space-5) var(--space-6);
      border-left: 3px solid var(--color-seal); 
      background: var(--color-surface-alt);
      border-radius: var(--radius-sm);
     }
.page-privacy .legal-contact a {
      font-weight: 600;
     }
.page-privacy .legal-contact span {
      display: block;
     }
@media (max-width: 640px) {
.page-privacy .legal-toc__list {
        grid-template-columns: 1fr;
       }
    
}


/* ==================== COOKIE ==================== */
.page-cookie .legal-shell { max-width: 74ch; margin-inline: auto;  }
.page-cookie .legal-head {  }
.page-cookie .legal-head .brass-rule { margin-block: var(--space-4);  }
.page-cookie .legal-updated {
      font-size: var(--fs-small);
      color: var(--color-text-secondary);
      margin: 0;
     }
.page-cookie .legal-head .lede { margin-top: var(--space-5);  }
.page-cookie .legal-toc {
      margin-top: var(--space-7);
      padding: var(--space-5) var(--space-6);
      background: var(--color-surface-alt);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
     }
.page-cookie .legal-toc__title {
      font-size: var(--fs-small);
      font-weight: var(--fw-body);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--color-eyebrow);
      margin: 0 0 var(--space-3);
     }
.page-cookie .legal-toc__list {
      display: grid;
      gap: var(--space-2);
      margin: 0;
      padding: 0;
      list-style: none;
     }
.page-cookie .legal-toc__link { color: var(--color-primary);  }
.page-cookie .legal-body { margin-top: var(--space-8);  }
.page-cookie .legal-section { scroll-margin-top: calc(var(--header-h) + var(--space-5));  }
.page-cookie .legal-section + .legal-section {
      margin-top: var(--space-8);
      padding-top: var(--space-8);
      border-top: 1px solid var(--color-border);
     }
.page-cookie .legal-section h2 { font-size: var(--fs-h2); margin-bottom: var(--space-4);  }
.page-cookie .legal-section h3 {
      font-size: var(--fs-h3);
      margin: var(--space-6) 0 var(--space-2);
     }
.page-cookie .legal-section p,
.page-cookie .legal-section li { color: var(--color-text-secondary); max-width: 70ch;  }
.page-cookie .legal-section p + p { margin-top: var(--space-4);  }
.page-cookie .legal-section ul { margin: var(--space-4) 0 0; padding-left: 1.4em;  }
.page-cookie .legal-section li + li { margin-top: var(--space-2);  }
.page-cookie .legal-section a { color: var(--color-primary);  }
.page-cookie .legal-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .9em;
      background: var(--color-surface-alt);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: .08em .4em;
      color: var(--color-heading);
     }
.page-cookie .legal-store {
      margin: var(--space-6) 0 0;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
     }
.page-cookie .legal-store__row {
      display: grid;
      grid-template-columns: 210px 1fr;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-5);
     }
.page-cookie .legal-store__row + .legal-store__row { border-top: 1px solid var(--color-border);  }
.page-cookie .legal-store__key {
      font-size: var(--fs-small);
      font-weight: var(--fw-body);
      color: var(--color-heading);
      margin: 0;
     }
.page-cookie .legal-store__val { color: var(--color-text-secondary); margin: 0; max-width: none;  }
@media (max-width: 560px) {
.page-cookie .legal-store__row { grid-template-columns: 1fr; gap: var(--space-1);  }
    
}


/* ==================== TERMS ==================== */
.page-terms .legal-head { padding-block: var(--section-py) var(--space-6);  }
.page-terms .legal-head-inner { max-width: 60ch;  }
.page-terms .legal-updated {
      margin-top: var(--space-4);
      font-size: var(--fs-small);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-text-secondary);
     }
.page-terms .legal-main { padding-block: var(--space-6) var(--section-py);  }
.page-terms .legal-grid {
      display: grid;
      grid-template-columns: 14rem minmax(0, 68ch);
      gap: clamp(var(--space-7), 6vw, var(--space-9));
      justify-content: center;
      align-items: start;
     }
.page-terms .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-5));  }
.page-terms .legal-toc-title {
      font-size: var(--fs-small);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: var(--fw-body);
      color: var(--color-text-secondary);
      margin: 0 0 var(--space-3);
     }
.page-terms .legal-toc-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      border-left: 2px solid var(--color-border);
      padding-left: var(--space-4);
     }
.page-terms .legal-toc-link {
      display: block;
      font-size: var(--fs-small);
      line-height: 1.35;
      color: var(--color-text-secondary);
     }
.page-terms .legal-toc-link:hover { color: var(--color-primary); text-decoration: none;  }
.page-terms .legal-article { max-width: 68ch;  }
.page-terms .legal-section { scroll-margin-top: calc(var(--header-h) + var(--space-5));  }
.page-terms .legal-section + .legal-section {
      margin-top: var(--space-8);
      padding-top: var(--space-8);
      border-top: 1px solid var(--color-border);
     }
.page-terms .legal-section h2 {
      font-size: clamp(1.3rem, 2vw, 1.75rem);
      margin-bottom: var(--space-4);
     }
.page-terms .legal-section p { color: var(--color-text);  }
.page-terms .legal-section p + p { margin-top: var(--space-4);  }
.page-terms .legal-section ul { margin: var(--space-4) 0; padding-left: 1.4em;  }
.page-terms .legal-section li { margin-top: var(--space-2); color: var(--color-text);  }
.page-terms .legal-section a {
      color: var(--color-primary);
      text-decoration: underline;
      text-underline-offset: 2px;
     }
.page-terms .legal-contact-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin-top: var(--space-4);
     }
.page-terms .legal-contact-list span { color: var(--color-text-secondary);  }
@media (max-width: 900px) {
.page-terms .legal-grid { grid-template-columns: 1fr; gap: var(--space-6);  }
.page-terms .legal-toc { position: static;  }
.page-terms .legal-article { max-width: 68ch; margin-inline: auto;  }
    
}