/* ===================================================================
   MISSION DRINKS SUPPLY — SHARED DESIGN SYSTEM
   Single source of truth consumed by every page.
   Author: design-system foundation agent.

   Brand law baked in:
     • WHITE background everywhere.
     • Mission Navy is a SURFACE only on .site-footer (the one navy band).
     • Headings are Ink; primary actions + the one CTA band are Diplomatic Blue.
     • Brass = thin rules / small seals / active-nav underline only — NEVER on buttons.
     • No gradients, glows, 3D or gloss. Soft matte shadows + soft corners only.
     • No custom cursor.

   Structure:
     1. @font-face (Grift x4)
     2. :root tokens (verbatim from tokens.css + derived focus tokens)
     3. Reset + base typography
     4. Layout primitives (.container / .section / bands / stack)
     5. Shared components (buttons, header, footer, cards, forms, ...)
     6. Motion base states (pairs with motion.js)
     7. prefers-reduced-motion
     8. Responsive
   =================================================================== */


/* ============================================================
   1. FONT FACE — Grift (self-hosted). Paths are CSS-relative.
   ============================================================ */
@font-face {
  font-family: "Grift";
  src: url("../fonts/grift-thin.woff2") format("woff2"),
       url("../fonts/grift-thin.woff")  format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/grift-light.woff2") format("woff2"),
       url("../fonts/grift-light.woff")  format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/grift-regular.woff2") format("woff2"),
       url("../fonts/grift-regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/grift-black.woff2") format("woff2"),
       url("../fonts/grift-black.woff")  format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2. :ROOT TOKENS
   Copied verbatim from brand/assets/tokens/tokens.css, plus a
   small set of DERIVED tokens the components genuinely need.
   ============================================================ */
:root {

  /* -- Raw palette (core hexes, from colour-system.md) ----------- */
  --mds-mission-navy:    #0E3B4C;  /* FOOTER ONLY as a surface (see rules) */
  --mds-diplomatic-blue: #155E7A;  /* primary: buttons, links, CTA bands */
  --mds-compass-blue:    #2E89AB;  /* interactive accent, icons */
  --mds-signal-blue:     #6CB3D6;  /* light accent */
  --mds-ink:             #1A1E21;  /* headings + body text */
  --mds-slate:           #5A6B72;  /* secondary text */
  --mds-mist:            #EAF2F6;  /* alternating section bands, tints */
  --mds-white:           #FFFFFF;  /* page background + surfaces */
  --mds-brass:           #B08D4C;  /* seal/rule accent ONLY — never buttons */

  /* -- Derived UI neutrals & states (not core palette) ---------- */
  --mds-border:          #E6ECF0;  /* soft modern hairline on white */
  --mds-border-strong:   #CDD8DF;
  --mds-blue-hover:      #114C63;
  --mds-navy-hover:      #0A2E3B;
  --mds-danger:          #A3241F;  /* restrained oxblood — form validation only */
  --mds-danger-bg:       #FBEDEC;  /* faint danger tint for the alert panel */

  /* -- Semantic / role tokens (USE THESE in components) --------- */
  --color-bg:              var(--mds-white);        /* WHITE background (not paper) */
  --color-surface:         var(--mds-white);
  --color-surface-alt:     var(--mds-mist);         /* alternating bands / tints */
  --color-footer:          var(--mds-mission-navy); /* navy is reserved for the footer */
  --color-heading:         var(--mds-ink);          /* headings are Ink, not navy */
  --color-eyebrow:         var(--mds-diplomatic-blue);
  --color-text:            var(--mds-ink);
  --color-text-secondary:  var(--mds-slate);
  --color-text-inverse:    var(--mds-white);
  --color-primary:         var(--mds-diplomatic-blue);
  --color-primary-hover:   var(--mds-blue-hover);
  --color-accent:          var(--mds-compass-blue);
  --color-accent-light:    var(--mds-signal-blue);
  --color-seal:            var(--mds-brass);         /* thin rules, small seals only */
  --color-border:          var(--mds-border);
  --color-link:            var(--mds-diplomatic-blue);
  --color-cta-band:        var(--mds-diplomatic-blue);/* CTA section bg (was navy) */
  --color-danger:          var(--mds-danger);          /* form validation errors */
  --color-danger-bg:       var(--mds-danger-bg);

  /* Buttons — NO BRASS ON BUTTONS.
     Primary = Diplomatic Blue on light. On dark bands = white fill / blue text. */
  --btn-primary-bg:        var(--mds-diplomatic-blue);
  --btn-primary-text:      var(--mds-white);
  --btn-primary-hover:     var(--mds-blue-hover);
  --btn-secondary-border:  var(--mds-diplomatic-blue);
  --btn-secondary-text:    var(--mds-diplomatic-blue);
  --btn-on-dark-bg:        var(--mds-white);
  --btn-on-dark-text:      var(--mds-diplomatic-blue);

  /* -- Typography (from typography.md) -------------------------- */
  --font-brand: "Grift", "Helvetica Neue", Arial, sans-serif;
  --fw-headline: 900;  /* Grift Black */
  --fw-body:     400;  /* Grift Regular */
  --fw-subhead:  300;  /* Grift Light */
  --fw-thin:     100;  /* Grift Thin */

  /* Fluid type scale (modern display typography) */
  --fs-display: clamp(2.4rem, 6.5vw, 6rem);   /* hero — Grift Black, 3–6 words/line */
  --fs-h1:      clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.8vw, 1.6rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:   0.875rem;
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --tracking-display: -0.02em;

  /* -- Modern spacing scale ------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --section-py:    clamp(56px, 6vw, 88px);    /* single between-section gap; de-doubled below */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 48px);
  --gap:           clamp(16px, 2vw, 32px);

  /* -- Modern corner radii -------------------------------------- */
  --radius-sm:   10px;   /* inputs, small controls */
  --radius-md:   16px;   /* cards, media */
  --radius-lg:   24px;   /* feature panels, large media */
  --radius-pill: 999px;  /* buttons, chips */

  /* -- Restrained elevation (soft, matte — NOT glossy) ---------- */
  --shadow-sm: 0 1px 2px rgba(14,59,76,.04), 0 2px 10px rgba(14,59,76,.05);
  --shadow-md: 0 6px 28px rgba(14,59,76,.07);

  /* -- Motion (one shared engine; reduced-motion safe) ---------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 200ms;
  --dur:      400ms;
  --dur-slow: 720ms;

  /* -- DERIVED tokens (added by the design system) -------------- */
  --dur-base:      var(--dur);                         /* alias for docs' --dur-base */
  --color-focus:   var(--mds-diplomatic-blue);         /* focus ring = Diplomatic Blue */
  --focus-offset:  2px;
  --shadow:        var(--shadow-sm);                   /* default soft elevation */
  --header-h:      68px;                               /* sticky header height reference */
  --stack-space:   var(--space-4);                     /* default .stack rhythm */
}


/* ============================================================
   3. RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);          /* WHITE */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                    /* never allow horizontal overflow */
}

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

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Only reset lists that carry a class; prose lists keep their markers */
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

p { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--fw-headline);       /* Grift Black */
  line-height: var(--lh-heading);
  color: var(--color-heading);           /* Ink */
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.05rem; }

/* Display headline utility (hero) — Grift Black, fluid, tight */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-headline);
  color: var(--color-heading);
}

::selection { background: var(--mds-signal-blue); color: var(--mds-ink); }

/* Global keyboard focus ring (Diplomatic Blue) */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: .65rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-body);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 8px; text-decoration: none; }


/* ============================================================
   4. LAYOUT PRIMITIVES  (shared, sanctioned reusable names)
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Section: vertical rhythm. Top/bottom read overridable custom properties so
   the de-double rules below can zero ONE side without a specificity fight.
   Sections that set their own `padding-block` (contact, terms, cats-lead/tail)
   override these longhands directly and are therefore immune to de-doubling.
   Never forces min-height above the viewport. */
.section {
  padding-top:    var(--section-pt, var(--section-py));
  padding-bottom: var(--section-pb, var(--section-py));
  /* no min-height is set — a section can never be forced taller than its content */
}

/* ---- Between-section rhythm (de-doubling) ------------------------
   De-double ONLY the seam between two adjacent PLAIN (transparent) white
   sections: the second one drops its top padding so the gap resolves to a
   single comfortable --section-py (not doubled, not zero).

   Any section next to a COLOURED band — on either side — KEEPS its full
   padding, and every band keeps balanced internal top+bottom padding. So
   each band has breathing room and is clearly separated from its
   neighbours (a plain section sandwiched between bands, e.g. the trust
   strip, keeps padding on BOTH sides). Where two bands meet, each keeps
   its padding and the colour change is the divider. Bands here = Mist,
   CTA and the navy Brands band. */
.section:not(.section--mist):not(.section--cta):not(.brands-band)
  + .section:not(.section--mist):not(.section--cta):not(.brands-band) {
  --section-pt: 0px;
}

.section--mist { background: var(--color-surface-alt); }

/* The ONLY full-width blue band on the site */
.section--cta {
  background: var(--color-cta-band);
  color: var(--color-text-inverse);
}
.section--cta h1, .section--cta h2, .section--cta h3,
.section--cta .display { color: var(--color-text-inverse); }
.section--cta a:not(.btn) { color: var(--color-text-inverse); text-decoration: underline; }
.section--cta .eyebrow { color: rgba(255,255,255,.85); }
.section--cta .lede, .section--cta .section-intro { color: rgba(255,255,255,.9); }
/* The lede keeps its 62ch readability cap but must be centred as a BLOCK inside
   the centred CTA band (text-align alone leaves the 62ch box flush-left). */
.section--cta .lede, .section--cta .section-intro { margin-inline: auto; }

/* ---- Emblem watermark on coloured bands ---------------------------
   The circular MDS emblem as a LARGE, partially-visible seal bleeding off
   an edge of each coloured band. One unaltered emblem asset, recoloured per
   band via CSS mask + a token background-colour (white on the dark
   CTA/Brands bands, Mission Navy on the light Mist bands). Each band uses a
   DIFFERENT scale, anchor/edge and rotation so no two read as the same
   motif (see the per-band + Mist-bucket rules below). Decorative pseudo-
   element (not in the a11y tree), z-index below content, pointer-events:none,
   low-opacity so text contrast (WCAG AA) over the band is preserved. */
.section--cta,
.brands-band,
.section--mist {
  position: relative;
  overflow: hidden;          /* clip the off-edge bleed */
  isolation: isolate;        /* keep the -1 watermark above the band's own bg */
}
.section--cta::before,
.brands-band::before,
.section--mist::before {
  content: "";
  position: absolute;
  z-index: -1;               /* above the band background, below the content */
  aspect-ratio: 1 / 1;
  background-color: var(--mds-white);          /* light emblem on dark bands */
  -webkit-mask: url("../img/logo/emblem-navy.svg") no-repeat center / contain;
          mask: url("../img/logo/emblem-navy.svg") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}
/* Mission-Navy emblem on the light Mist bands */
.section--mist::before { background-color: var(--mds-mission-navy); opacity: .06; }

/* --- Per-band variations (scale · anchor/edge · rotation) --- */
/* Brands (dark): very large, bleeds off the RIGHT, slight CCW tilt */
.brands-band::before {
  width: clamp(460px, 60vw, 900px);
  top: 50%; right: -18%; left: auto; bottom: auto;
  transform: translateY(-50%) rotate(-10deg);
}
/* CTA (blue): largest, anchored LOWER-LEFT, CW tilt, softened opacity */
.section--cta::before {
  width: clamp(480px, 66vw, 1000px);
  left: -20%; bottom: -40%; right: auto; top: auto;
  transform: rotate(12deg);
  opacity: .06;
}
/* Mist bucket A (default / 3n): large, bleeds TOP-RIGHT */
.section--mist::before {
  width: clamp(420px, 52vw, 780px);
  right: -14%; top: -32%; left: auto; bottom: auto;
  transform: rotate(6deg);
}
/* Mist bucket B (3n+1): larger, LOWER-LEFT, CCW — 3-cycle so consecutive
   Mist bands (about, category subs) never share the same look */
.section--mist:nth-of-type(3n+1)::before {
  width: clamp(460px, 58vw, 860px);
  left: -18%; bottom: -34%; right: auto; top: auto;
  transform: rotate(-12deg);
}
/* Mist bucket C (3n+2): mid-scale, RIGHT-CENTRE, gentle CW */
.section--mist:nth-of-type(3n+2)::before {
  width: clamp(380px, 46vw, 680px);
  right: -16%; top: 42%; left: auto; bottom: auto;
  transform: translateY(-50%) rotate(4deg);
}

/* Small screens: shrink all variants + soften so it never crowds text */
@media (max-width: 640px) {
  .brands-band::before,
  .section--cta::before,
  .section--mist::before,
  .section--mist:nth-of-type(3n+1)::before,
  .section--mist:nth-of-type(3n+2)::before {
    width: min(82vw, 360px);
    opacity: .05;
  }
}

/* Vertical stack rhythm */
.stack > * + * { margin-block-start: var(--stack-space); }
.stack--sm { --stack-space: var(--space-2); }
.stack--md { --stack-space: var(--space-4); }
.stack--lg { --stack-space: var(--space-6); }
.stack--xl { --stack-space: var(--space-8); }

/* Gap utilities for flex/grid children set on a bespoke container */
.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--gap); }
.gap-lg { gap: var(--space-7); }

/* Small shared utilities */
.text-center { text-align: center; }
.u-mi-auto { margin-inline: auto; }
.u-mb-lg { margin-bottom: var(--space-7); }
.text-secondary { color: var(--color-text-secondary); }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   5. SHARED COMPONENTS
   ============================================================ */

/* ---- 5.1 Type accents ------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-eyebrow);          /* Diplomatic Blue */
  margin: 0;
}

/* Short thin brass rule accent */
.brass-rule {
  width: 56px;
  height: 3px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-seal);         /* Brass */
  margin: var(--space-4) 0;
}
.brass-rule--center { margin-inline: auto; }

/* Light-weight subhead / standfirst */
.lede, .section-intro {
  font-weight: var(--fw-subhead);        /* Grift Light */
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 62ch;
}


/* ---- 5.2 Buttons  (NO BRASS ON BUTTONS) ------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .8em 1.5em;
  border-radius: var(--radius-pill);     /* pill */
  font-family: var(--font-brand);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* Header "Open an account" CTA — brass hover. White-on-brass fails AA, so the
   label switches to Ink (#1A1E21 on #B08D4C ≈ 4.9:1, passes AA). Smooth via the
   .btn transition tokens. Scoped to the header CTA only (other primary buttons
   keep the Diplomatic-Blue hover). */
.btn--primary.site-header__cta:hover {
  background: var(--mds-brass);
  border-color: var(--mds-brass);
  color: var(--mds-ink);
}

.btn--secondary {
  background: transparent;
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover {
  background: var(--btn-secondary-border);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

/* For CTA & footer (dark) bands: white fill / Diplomatic-Blue text */
.btn--on-dark {
  background: var(--btn-on-dark-bg);
  color: var(--btn-on-dark-text);
  border-color: var(--btn-on-dark-bg);
}
.btn--on-dark:hover {
  background: rgba(255,255,255,.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn--on-dark:focus-visible { outline-color: var(--mds-white); }

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


/* ---- 5.3 Header ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);      /* white, no shadow */
  border-bottom: 1px solid var(--color-border);   /* hairline */
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}
.site-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-header__logo img { height: 36px; width: auto; }

/* Mobile toggle (hamburger) — hidden on desktop */
.site-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.site-header__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header CTA */
.site-header__cta { display: none; flex: 0 0 auto; }

/* Nav — mobile-first: hidden dropdown panel, revealed by .is-open */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--container-pad) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
}
.site-nav.is-open { display: flex; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__item { position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .55rem .2rem;
  font-size: 1.05rem;
  font-weight: var(--fw-body);
  color: var(--color-heading);
  text-decoration: none;
  background: none;
  position: relative;
}
.site-nav__link:hover { color: var(--color-primary); text-decoration: none; }

/* Active item — BRASS underline */
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] { color: var(--color-heading); }
.site-nav__link.is-active::after,
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .2rem;
  right: .2rem;
  bottom: .25rem;
  height: 2px;
  background: var(--color-seal);         /* Brass */
  border-radius: 2px;
}

/* Dropdown caret */
.site-nav__caret {
  width: .6em;
  height: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
  flex: 0 0 auto;
  margin-top: -.15em;
}
.site-nav__item--has-menu.is-open > .site-nav__link .site-nav__caret { transform: rotate(-135deg); margin-top: .15em; }

/* Products mega-menu — mobile: inline panel, hidden until parent .is-open */
.site-nav__menu {
  display: none;
  margin: var(--space-1) 0 var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
}
.site-nav__item--has-menu.is-open > .site-nav__menu { display: block; }

.site-nav__mega-list { list-style: none; margin: 0; padding: 0; }
.site-nav__mega-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.site-nav__mega-item:hover { background: var(--color-surface-alt); text-decoration: none; }
.site-nav__mega-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--color-primary);              /* Diplomatic-Blue line icon */
}
.site-nav__mega-icon svg { width: 24px; height: 24px; display: block; }
.site-nav__mega-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-nav__mega-title {
  font-family: var(--font-brand);
  font-weight: var(--fw-headline);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-heading);
}
.site-nav__mega-desc { font-size: var(--fs-small); line-height: 1.3; color: var(--color-text-secondary); }
.site-nav__mega-all {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-brand);
  font-weight: var(--fw-headline);
  font-size: var(--fs-small);
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
}
.site-nav__mega-all:hover { background: var(--color-surface-alt); text-decoration: none; }


/* ---- 5.4 Breadcrumb --------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding-block: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb__link { color: var(--color-text-secondary); }
.breadcrumb__link:hover { color: var(--color-primary); }
.breadcrumb__item[aria-current="page"] { color: var(--color-heading); }
/* chevron separator (muted slate) */
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: .5em;
  height: .5em;
  border-right: 1.5px solid var(--mds-border-strong);
  border-top: 1.5px solid var(--mds-border-strong);
  transform: rotate(45deg);
  display: inline-block;
}


/* ---- 5.5 Product card (terminal — no buy/link/basket) ----- */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.product-card__media {
  aspect-ratio: 1 / 1;                    /* match the 1:1 source product photos */
  background: var(--color-surface);       /* white — contain letterboxing blends into the photo bg */
  padding: var(--space-4);                /* bottles never touch the card edges */
  position: relative;
  overflow: hidden;
}
/* Show the WHOLE bottle — never crop (contain, centred, never stretched). The
   1:1 white-bg product photos letterbox invisibly; a stray non-square image
   still shows in full without distortion. */
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Placeholder/JS-fallback state (.media-ph on the same slot) shares the square
   box; drop the generic 220px floor so it stays 1:1 and aligns in the grid. */
.product-card__media.media-ph { min-height: 0; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  flex: 1 1 auto;
}
.product-card__name {
  font-family: var(--font-brand);
  font-weight: var(--fw-body);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-heading);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;                 /* up to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
}
.product-card__price {
  font-weight: var(--fw-headline);       /* bold */
  font-size: 1.1rem;
  color: var(--color-heading);           /* Ink (per colour-system: prices are Ink) */
}
.product-card__unit {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);    /* muted right */
}


/* ---- 5.6 Category card (whole card clickable) ------------- */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.category-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-card__media {
  aspect-ratio: 16 / 9;                   /* ONE ratio everywhere (Home + /products) */
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
}
.category-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Natural colour — no grade filter and no colour overlay (iteration 12);
     the category photos display in their true colour on Home and /products. */
}
.category-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1 1 auto;
}
.category-card__name {
  font-size: var(--fs-h3);
  color: var(--color-heading);
  margin: 0;
}
.category-card__subs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}
.category-card__subs li { position: relative; padding-left: var(--space-3); }
.category-card__subs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-seal);         /* small brass tick dot */
}
.category-card__link {
  margin-top: auto;
  font-weight: var(--fw-body);
  color: var(--color-primary);
}
/* stretched link makes the whole card clickable */
.category-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.category-card__link:hover { text-decoration: none; }


/* ---- 5.7 Form fields -------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  color: var(--color-heading);
}
.field__label .field__req { color: var(--color-primary); }
.field__control {
  width: 100%;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--mds-border-strong);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field__control::placeholder { color: var(--color-text-secondary); opacity: .8; }
.field__control:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(21,94,122,.18);
}
textarea.field__control { min-height: 140px; resize: vertical; }
select.field__control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6B72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}
.field__note { font-size: var(--fs-small); color: var(--color-text-secondary); }

/* Validation — colour is paired with text + aria-invalid, never colour alone. */
.field__error {
  font-size: var(--fs-small);
  color: var(--color-danger);
}
.field__control[aria-invalid="true"] {
  border-color: var(--color-danger);
}
.field__control[aria-invalid="true"]:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(163,36,31,.16);
}

/* Honeypot — visually and audibly hidden, but present in the DOM for bots.
   Not display:none (some bots skip those); kept off-screen and non-focusable. */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Busy/disabled submit — prevents double submission during a fetch. */
.btn[disabled], .btn[aria-busy="true"] {
  opacity: .65;
  cursor: progress;
  pointer-events: none;
}

.form-actions--center { justify-content: center; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}


/* ---- 5.8 Filter pills + trust pills ----------------------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--mds-border-strong);
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.filter-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Active — small navy-fill control (sanctioned: a small control, NOT a surface band) */
.filter-pill.is-active,
.filter-pill[aria-pressed="true"] {
  background: var(--mds-mission-navy);
  border-color: var(--mds-mission-navy);
  color: var(--color-text-inverse);
}

/* Trust chip (ISO / AWRS etc.) — subtle outline */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .35rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  line-height: 1;
}


/* ---- 5.9 FAQ accordion ------------------------------------ */
.faq { display: flex; flex-direction: column; }
.faq__group {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-eyebrow);
  margin: var(--space-6) 0 var(--space-2);
}
.faq__group:first-child { margin-top: 0; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-4) 0;
  font-size: 1.05rem;
  font-weight: var(--fw-body);
  color: var(--color-heading);
}
.faq__q-icon {
  flex: 0 0 auto;
  width: .6em;
  height: .6em;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__q[aria-expanded="true"] .faq__q-icon { transform: rotate(-135deg); }
.faq__a {
  padding: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  max-width: 70ch;
}
.faq__a[hidden] { display: none; }


/* ---- 5.10 Logo wall (sanctioned greyscale wordmark wall) --- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6) var(--space-7);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: var(--fw-body);
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);    /* uniform Slate greyscale */
  transition: color var(--dur-fast) var(--ease-out);
  min-height: 40px;
}
.logo-wall__item:hover { color: var(--color-heading); }   /* subtle colour-on-hover */


/* ---- 5.11 Availability note (inside a Mist band) ---------- */
.availability-note {
  text-align: center;
  font-style: italic;
  color: var(--color-text-secondary);
  max-width: 68ch;
  margin-inline: auto;
}
.availability-note a { font-style: normal; color: var(--color-primary); }


/* ---- 5.12 Media: placeholder + real image ----------------- */
/* Placeholder — Mist panel with a faint centred emblem watermark.
   Used for MOST image slots (the site is type-led, not imagery-dense). */
.media-ph {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-text-secondary);
}
.media-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/logo/emblem-navy.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(38%, 150px);
  opacity: .06;                          /* faint watermark */
  pointer-events: none;
}
.media-ph__caption {
  position: relative;
  z-index: 1;
  font-size: var(--fs-small);
  padding: var(--space-4);
  text-align: center;
}
.media-ph--tall { aspect-ratio: 3 / 4; min-height: 320px; }
.media-ph--wide { aspect-ratio: 16 / 9; }

/* Real image pattern — any <img> should carry an onerror that swaps in a .media-ph */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.media__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }


/* ---- 5.13 Cookie banner ----------------------------------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 150;
  width: min(720px, calc(100% - 32px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5);
}
.cookie-banner.is-hidden { display: none; }
.cookie-banner__text { flex: 1 1 260px; font-size: var(--fs-small); color: var(--color-text-secondary); margin: 0; }
.cookie-banner__text a { color: var(--color-primary); }
.cookie-banner__actions { display: flex; gap: var(--space-3); align-items: center; }


/* ---- 5.14 Footer  (THE ONLY navy surface) ----------------- */
.site-footer {
  position: relative;
  background: var(--color-footer);        /* Mission Navy */
  color: var(--color-text-inverse);
  overflow: hidden;
}
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--color-text-inverse); text-decoration: none; }

.site-footer__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--section-py);
}
.site-footer__columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-7) var(--gap);
}
.site-footer__brand { max-width: 34ch; }
.site-footer__logo img { height: 34px; width: auto; margin-bottom: var(--space-4); }
.site-footer__blurb { color: rgba(255,255,255,.72); font-size: var(--fs-small); line-height: 1.6; }
.site-footer__endorse { color: rgba(255,255,255,.72); font-size: var(--fs-small); margin-top: var(--space-4); }

.site-footer__heading {
  font-family: var(--font-brand);
  font-weight: var(--fw-body);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
  margin: 0 0 var(--space-4);
}
.site-footer__nav { }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__link { font-size: var(--fs-small); }
.site-footer__contact { font-size: var(--fs-small); color: rgba(255,255,255,.82); font-style: normal; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__contact a { color: rgba(255,255,255,.82); }
/* LinkedIn (or other social) link — icon + label, inherits footer link colour. */
.site-footer__social { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; margin-top: var(--space-2); }
.site-footer__social-icon { flex: none; }

/* Brass hairline divider */
.site-footer__rule {
  height: 1px;
  border: 0;
  background: var(--color-seal);          /* Brass */
  opacity: .55;
  margin-block: var(--space-6);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.7);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-footer__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* trust pills reversed for the navy footer */
.site-footer .pill {
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.82);
}

/* Optional full-bleed faint wordmark behind the footer */
.site-footer__wordmark {
  position: absolute;
  left: 50%;
  bottom: -.22em;
  transform: translateX(-50%);
  margin: 0;
  font-weight: var(--fw-headline);
  font-size: clamp(4rem, 22vw, 18rem);
  line-height: .8;
  letter-spacing: var(--tracking-display);
  color: rgba(255,255,255,.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}


/* ============================================================
   6. MOTION BASE STATES  (paired with motion.js)
   ============================================================ */

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

/* Split-text — words flow INLINE, never one-per-line, staggered */
.split-line { display: block; }
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  will-change: opacity, transform;
}
[data-split].is-revealed .split-word { opacity: 1; transform: none; }

/* Parallax */
[data-parallax] { will-change: transform; }

/* Signature scene — pinned horizontal track.
   BASE (no JS / fallback) = ordinary horizontal scroll. */
[data-scene="pinned-x"] { position: relative; }
.scene-sticky { position: relative; }
.scene-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;          /* native swipe fallback snaps cleanly */
  scroll-padding-inline: var(--container-pad);
  padding-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;      /* momentum on iOS */
  scrollbar-width: none;                  /* hide scrollbar (Firefox) */
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.scene-track::-webkit-scrollbar { display: none; }   /* hide scrollbar (WebKit) */
.scene-panel { flex: 0 0 auto; scroll-snap-align: start; }

/* JS-enhanced pinned mode (added by motion.js when supported & motion allowed) */
[data-scene="pinned-x"].is-scene-active .scene-sticky {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}
[data-scene="pinned-x"].is-scene-active .scene-track {
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  will-change: transform;
}

/* Count-up target holds its rendered value */
[data-count] { font-variant-numeric: tabular-nums; }


/* ============================================================
   7. REDUCED MOTION — content fully visible, no animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal].is-revealed,
  .split-word,
  [data-split].is-revealed .split-word {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-parallax] { transform: none !important; }

  /* Pinned scene degrades to normal horizontal scroll */
  [data-scene="pinned-x"].is-scene-active .scene-sticky {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
  }
  [data-scene="pinned-x"].is-scene-active .scene-track {
    overflow-x: auto;
    transform: none !important;
  }
}


/* ============================================================
   8. RESPONSIVE  (mobile-first; header collapses < 900px)
   ============================================================ */

/* >= 560px : show header CTA alongside logo/toggle */
@media (min-width: 560px) {
  .site-header__cta { display: inline-flex; }
}

/* >= 768px : footer relaxes to 2 columns of pairs already handled below */
@media (max-width: 767.98px) {
  .site-footer__columns { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer__columns { grid-template-columns: 1fr; }
  .site-footer__base { flex-direction: column; align-items: flex-start; }
}

/* >= 900px : full desktop header, inline nav + dropdown */
@media (min-width: 900px) {
  .site-header__toggle { display: none; }
  .site-header__cta { display: inline-flex; }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--space-5); }

  /* Desktop mega-menu: roomy absolute panel, revealed on hover / focus-within / .is-open */
  .site-nav__item--has-menu { position: relative; }
  .site-nav__menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 340px;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast) var(--ease-out);
    z-index: 60;
  }
  .site-nav__item--has-menu:hover > .site-nav__menu,
  .site-nav__item--has-menu:focus-within > .site-nav__menu,
  .site-nav__item--has-menu.is-open > .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Comfortable large-screen container already capped at --container-max */

/* ===================================================================
   Category page (shared template)
   Consumed by view/partials/category-page.php for ALL five category
   pages, so their structure/classes cannot drift. Content-only per page.
   =================================================================== */
.cat-intro__head { max-width: 62ch; }
.cat-intro__title { margin: 0; }              /* size comes from .display */

.cat-filter { margin-top: var(--space-6); }
.cat-filter__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.cat-sub__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.cat-sub__icon {
  flex: 0 0 auto;
  color: var(--color-seal);                   /* brass — sanctioned small seal accent */
  width: 22px;
  height: auto;
}
.cat-sub__title { margin: 0; scroll-margin-top: 96px; }
.cat-sub__note {
  max-width: 64ch;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.cat-sub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
@media (max-width: 560px) {
  .cat-sub__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}