@charset "UTF-8";
/* ==========================================================================
   Lumara Tiles — www.lumaratiles.com
   Stylesheet implementing Lumara Corporation Brand & Design Guidelines v1.0
   (September 2026). BRANCH A: design system adopted as source of truth.

   Anything marked EXTENSION in a comment is NOT in Lumara DS v1.0 and needs sign-off.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — single :root block (Lumara DS v1.0)
   -------------------------------------------------------------------------- */
:root {
  /* ---- Colour: Navy (primary) ---- */
  --navy-900: #060E33;
  --navy-800: #0A1654;   /* brand */
  --navy-700: #141F66;
  --navy-600: #223078;
  --navy-500: #3B4A92;
  --navy-300: #8892C0;
  --navy-100: #E5E8F4;
  --navy-050: #F2F4FA;

  /* ---- Colour: Gold (accent only) ---- */
  --gold-100: #F5EBC9;
  --gold-200: #E8D49A;
  --gold-300: #DCC384;
  --gold-400: #C9A961;   /* brand */
  --gold-500: #B89547;
  --gold-600: #A8873F;
  --gold-700: #8A6A2A;   /* text on white — 4.5:1 */
  --gold-800: #7E5F1E;

  /* ---- Colour: Neutrals & sand ---- */
  --ink-900: #12141A;
  --ink-700: #3C4150;   /* body */
  /* CORRECTION — Lumara DS v1.0 publishes ink-500 as #6E7488. That value gives
     4.16:1 on sand-100 and 4.38:1 on ink-050, both below the WCAG 2.1 AA
     minimum of 4.5:1, on two grounds the design system itself prescribes.
     Darkened to #63697D: 5.46:1 on white, 5.14:1 on grey, 4.88:1 on sand.
     Visually near-identical. Flagged for sign-off — see the go-live checklist. */
  --ink-500: #63697D;   /* muted — was #6E7488 in DS v1.0 */
  --ink-300: #C6CAD6;
  --ink-200: #E2E5EE;   /* line */
  --ink-050: #F7F8FB;
  --sand-100: #F6F2E8;
  --sand-200: #EBE3D2;

  /* ---- Colour: Semantic (forms only) ---- */
  --success-600: #1F7A5C;
  --warning-600: #B07B12;
  --danger-600:  #B3261E;
  --info-600:    #223078;

  /* ---- Gradients (the gold ramp is the only brand gradient) ---- */
  --gradient-gold: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  --gradient-navy-depth: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  --gradient-image-scrim: linear-gradient(180deg, rgba(10,22,84,0) 0%, rgba(10,22,84,.72) 100%);

  /* ---- Typography: three families, strictly divided by job ---- */
  --font-display: "Jost", "Century Gothic", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --fs-hero: 4.25rem;   /* 68 */
  --fs-h1: 2.875rem;    /* 46 */
  --fs-h2: 2rem;        /* 32 */
  --fs-h3: 1.5rem;      /* 24 */
  --fs-h4: 1.125rem;    /* 18 */
  --fs-body: 1rem;      /* 16 */
  --fs-small: .875rem;  /* 14 */
  --fs-eyebrow: .75rem; /* 12 */
  --lh-prose: 1.6;
  --lh-tight: 1.12;
  --track-hero: -.02em;
  --track-head: -.01em;
  --track-eyebrow: .16em;

  /* ---- Spacing scale (4px based) ---- */
  --sp-2: 2px;  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;

  /* ---- Layout rhythm ---- */
  --section-y: 96px;
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --card-pad: 24px;
  --grid-gap: 24px;
  --header-h: 76px;

  /* ---- Corner radii (never mix radii within one component) ---- */
  --r-2: 2px; --r-4: 4px; --r-control: 6px; --r-8: 8px;
  --r-card: 12px; --r-panel: 16px; --r-pill: 999px;

  /* ---- Elevation — navy-tinted, low-spread. Paper, not glass. ---- */
  --shadow-1: 0 1px 2px rgba(10,22,84,.06), 0 1px 3px rgba(10,22,84,.05);
  --shadow-2: 0 1px 2px rgba(10,22,84,.08);
  --shadow-3: 0 6px 16px rgba(10,22,84,.10), 0 2px 4px rgba(10,22,84,.06);
  --shadow-4: 0 20px 48px rgba(10,22,84,.16);
  --shadow-focus: 0 0 0 3px rgba(201,169,97,.45);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --lift-card: -2px;
  --press-scale: .985;

  /* ---- Breakpoints (documented; media queries below use these values) ----
     sm 480px · md 768px · lg 1024px · xl 1200px  */
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1200px;
}

/* --------------------------------------------------------------------------
   2. WEBFONTS
   Jost, Manrope and IBM Plex Mono are loaded from Google Fonts by a single
   preconnect + stylesheet <link> in each page's <head>. That is the only
   external request the site makes. Every stack falls back to a system face,
   so the site renders correctly if the request fails or is blocked.
   -------------------------------------------------------------------------- */
/* Self-hosting alternative — see the go-live checklist.
   Drop the five .woff2 files into /assets/fonts/, delete the Google Fonts
   <link> from every page's <head>, and uncomment this block.

@font-face { font-family:"Jost"; src:url("../fonts/jost-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../fonts/manrope-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../fonts/manrope-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../fonts/manrope-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibmplexmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
*/

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  margin: 0 0 var(--sp-16);
  max-width: 22ch;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0 0 var(--sp-16); max-width: 62ch; }

a { color: var(--navy-800); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--gold-700); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-16); padding-left: 1.25em; }
li { margin-bottom: var(--sp-4); }
hr { border: 0; border-top: 1px solid var(--ink-200); margin: var(--sp-32) 0; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

.mono, .spec-table td.value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-16); top: -100px; z-index: 200;
  background: var(--navy-800); color: #fff; padding: var(--sp-12) var(--sp-20);
  border-radius: var(--r-control); font-weight: 600; text-decoration: none;
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--sp-16); color: #fff; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--sp-64); }
.section--grey { background: var(--ink-050); }
.section--sand { background: var(--sand-100); }
.section--navy { background: var(--navy-800); color: var(--navy-100); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy a { color: var(--gold-200); }
.section--navy a:hover { color: var(--gold-100); }

.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; }

.stack > * + * { margin-top: var(--sp-16); }
.lede { font-size: 1.125rem; color: var(--ink-700); max-width: 62ch; }

/* --------------------------------------------------------------------------
   5. CORE COMPONENTS
   -------------------------------------------------------------------------- */

/* ---- Eyebrow: 12/700/.16em uppercase gold, preceded by a 28px hairline ---- */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-12);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 var(--sp-16);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.section--navy .eyebrow { color: var(--gold-300); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  padding: var(--sp-12) var(--sp-24); min-height: 48px;
  border: 1px solid transparent; border-radius: var(--r-control);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--primary { background: var(--navy-800); color: #fff; }
.btn--primary:hover { background: var(--navy-700); color: #fff; }
.btn--gold { background: var(--gold-400); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-500); color: var(--navy-900); }
.btn--secondary { background: #fff; color: var(--navy-800); border-color: var(--ink-200); }
.btn--secondary:hover { border-color: var(--gold-400); color: var(--gold-700); }
.btn--ghost { background: transparent; color: var(--navy-800); padding-inline: 0; }
.btn--ghost:hover { color: var(--gold-700); }
.btn[disabled] { background: var(--navy-300); color: #fff; cursor: not-allowed; }
.section--navy .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.section--navy .btn--secondary:hover { border-color: var(--gold-400); color: var(--gold-200); }

/* ---- Header (one of exactly two places transparency is used) ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-200);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }

/* Logo — the supplied Lumara Tiles lockup, extracted at 1359x360 from the
   company presentation. Not redrawn: the brand guidelines forbid rebuilding
   the mark, so this is the artwork itself. Displayed at 150px wide, which is
   a 9x pixel density — safe on any screen.
   Clear space is half the mark's height, applied as padding on the anchor. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img {
  width: 150px; height: auto; display: block;
  padding-block: calc(150px * (360 / 1359) / 2);
}
.logo--footer img { width: 160px; }

@media (max-width: 480px) { .logo img { width: 124px; } }

.nav { display: flex; align-items: center; gap: var(--sp-24); }
.nav a { font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--navy-800); white-space: nowrap; }
.nav a:hover { color: var(--gold-700); }
.nav a[aria-current="page"] { color: var(--gold-700); }
/* .nav a (0,1,1) out-specifies .btn--primary (0,1,0), which would render the
   header CTA navy-on-navy. Restate the button colours at matching specificity. */
.nav a.btn--primary { color: #fff; }
.nav a.btn--primary:hover { color: #fff; }
.nav a.btn--gold, .nav a.btn--gold:hover { color: var(--navy-900); }
.nav a.btn--secondary { color: var(--navy-800); }
.nav a.btn--secondary:hover { color: var(--gold-700); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid var(--ink-200);
  border-radius: var(--r-control); cursor: pointer; color: var(--navy-800);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---- Footer ---- */
.site-footer { background: var(--gradient-navy-depth); color: var(--navy-100); padding-block: var(--sp-64) var(--sp-32); }
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: var(--navy-100); text-decoration: none; }
.site-footer a:hover { color: var(--gold-300); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-48); }
.footer-grid h3 { font-size: var(--fs-small); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--gold-300); font-family: var(--font-body); font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--sp-8); font-size: var(--fs-small); }
.footer-bottom {
  margin-top: var(--sp-48); padding-top: var(--sp-24);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--navy-300);
}

/* ---- Card ---- */
.card {
  position: relative; background: #fff;
  border: 1px solid var(--ink-200); border-radius: var(--r-card);
  padding: var(--card-pad); box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.card--gold-rule::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradient-gold);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
a.card, .card--link { display: block; text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { transform: translateY(var(--lift-card)); box-shadow: var(--shadow-3); border-color: var(--gold-400); }
a.card:hover .card__media img, .card--link:hover .card__media img { transform: scale(1.03); }
.card h3 { margin-bottom: var(--sp-8); }
.card p { font-size: var(--fs-small); color: var(--ink-500); margin-bottom: 0; }

.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__body { padding: var(--card-pad); }

/* ---- Card media + scrim + gold eyebrow burned into the lower-left ---- */
.card__media { position: relative; overflow: hidden; background: var(--sand-100); aspect-ratio: 16 / 9; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.card__media::after { content: ""; position: absolute; inset: 0; background: var(--gradient-image-scrim); pointer-events: none; }
.card__media-label {
  position: absolute; left: var(--sp-16); bottom: var(--sp-12); z-index: 1;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--gold-300);
}
.card__media--tall { aspect-ratio: 3 / 4; }

/* ---- Real catalogue imagery ----
   These classes are the image counterpart of the .ph placeholder blocks: same
   box, same aspect ratio, so a page looks identical in structure whether the
   binary exists yet or not. -------------------------------------------------- */
.card__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9;
             transition: transform var(--dur-slow) var(--ease-standard); }
.split__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
              border-radius: var(--r-card); }
.hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
img.shade__face { width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover;
                  display: block; background: var(--sand-100); }
img.ph--1x2 { width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover;
              display: block; border-radius: var(--r-8); background: var(--sand-100); }

/* ---- CSS image placeholder (used where no binary could be extracted) ---- */
.ph {
  position: relative; background: var(--sand-100);
  background-image:
    linear-gradient(135deg, rgba(10,22,84,.05) 25%, transparent 25%, transparent 50%, rgba(10,22,84,.05) 50%, rgba(10,22,84,.05) 75%, transparent 75%);
  background-size: 28px 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-200);
}
.ph::after {
  content: attr(data-label);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
  text-align: center; padding: var(--sp-16); max-width: 90%;
}
/* A design that the catalogue lists but never pictures on a page of its own.
   The cell keeps the tile's proportion and the design name sits beneath it in
   the grid, so a quiet swatch reads as part of the range rather than as a
   missing asset. No label is printed inside it. */
.ph--quiet { border-color: var(--ink-200); }
.ph--quiet::after { content: ""; padding: 0; }

.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--3x4  { aspect-ratio: 3 / 4; }
.ph--1x2  { aspect-ratio: 1 / 2; }   /* 600x1200 tile face */
.ph--hero { aspect-ratio: 16 / 9; min-height: 340px; }
.hero__bg .ph { height: 100%; opacity: .22; border: 0; }

/* ---- Stat ---- */
.stat__value { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--navy-800); line-height: 1; }
.stat__value sup { color: var(--gold-600); font-size: .5em; }
.stat__label { font-size: var(--fs-small); color: var(--ink-500); margin-top: var(--sp-8); }
.section--navy .stat__value { color: #fff; }
.section--navy .stat__label { color: var(--navy-300); }

/* ---- Tag ---- */
.tag {
  display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: var(--sp-4) var(--sp-12); border: 1px solid var(--ink-200);
  border-radius: var(--r-pill); color: var(--ink-500); background: #fff;
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* ---- SpecTable ---- */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.spec-table th, .spec-table td { text-align: left; padding: var(--sp-12) 0; border-bottom: 1px solid var(--ink-200); vertical-align: top; }
.spec-table th { font-weight: 600; color: var(--navy-800); width: 42%; }
.spec-table td { color: var(--ink-700); }
.spec-table .unspecified { color: var(--ink-500); font-style: italic; font-family: var(--font-body); }

/* ---- Hero ---- */
.hero { position: relative; background: var(--navy-800); color: #fff; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; padding-block: 120px; max-width: 720px; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-800) 20%, rgba(10,22,84,.55) 100%); }
.hero h1 { color: #fff; font-size: var(--fs-hero); letter-spacing: var(--track-hero); max-width: 16ch; }
.hero p { color: var(--navy-100); font-size: 1.125rem; }
.hero__actions { display: flex; gap: var(--sp-16); flex-wrap: wrap; margin-top: var(--sp-32); }

.page-head { background: var(--ink-050); border-bottom: 1px solid var(--ink-200); padding-block: var(--sp-64); }
.page-head h1 { margin-bottom: var(--sp-16); }

/* ---- Credibility strip ---- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-32); }

/* --------------------------------------------------------------------------
   6. EXTENSIONS — not in Lumara DS v1.0. Flagged for sign-off.
   -------------------------------------------------------------------------- */

/* EXTENSION — Breadcrumb. DS lists Breadcrumb under "deliberately not built",
   but a 3-level product hierarchy is unusable without one. */
.breadcrumb { font-size: var(--fs-small); color: var(--ink-500); margin-bottom: var(--sp-24); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-8); padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-8); color: var(--ink-300); }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-700); }
.breadcrumb [aria-current="page"] { color: var(--navy-800); font-weight: 600; }

/* EXTENSION — Filter chips. Required by the 19-item catalogue filter.
   Built on the DS Tag component; gold is used as selection state, which the DS
   permits only for accent — confirm this reading before launch. */
.filter { border-block: 1px solid var(--ink-200); padding-block: var(--sp-24); margin-bottom: var(--sp-48); }
.filter fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-16); }
.filter legend {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ink-500); padding: 0; margin-bottom: var(--sp-12);
}
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; font-size: var(--fs-small); font-weight: 600;
  padding: var(--sp-8) var(--sp-16); border: 1px solid var(--ink-200);
  border-radius: var(--r-pill); color: var(--ink-700); background: #fff;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}
.chip input:hover + span { border-color: var(--gold-400); color: var(--gold-700); }
.chip input:checked + span { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.filter__status { font-size: var(--fs-small); color: var(--ink-500); }

/* EXTENSION — Product gallery. DS has no gallery component; the catalogue needs
   a shade grid on every product page. Uses DS card tokens only. */
.shade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-16); }
.shade {
  border: 1px solid var(--ink-200); border-radius: var(--r-8); overflow: hidden; background: #fff;
}
.shade__face { aspect-ratio: 1 / 2; }
.shade__name {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-800); padding: var(--sp-12); text-align: center;
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.field { display: flex; flex-direction: column; gap: var(--sp-8); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--navy-800); }
.field .hint { font-size: var(--fs-eyebrow); color: var(--ink-500); }
.field .req { color: var(--danger-600); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink-900);
  padding: var(--sp-12) var(--sp-16); min-height: 48px;
  border: 1px solid var(--ink-300); border-radius: var(--r-control);
  background: #fff; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-500); box-shadow: var(--shadow-focus);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger-600); }
.error-msg { font-size: var(--fs-small); color: var(--danger-600); min-height: 1px; }
.form-note { font-size: var(--fs-small); color: var(--ink-500); }

.form-status {
  padding: var(--sp-16); border-radius: var(--r-8); font-size: var(--fs-small);
  border: 1px solid var(--ink-200); background: var(--ink-050);
}
.form-status[data-state="success"] { border-color: var(--success-600); color: var(--success-600); background: #fff; }
.form-status[data-state="error"] { border-color: var(--danger-600); color: var(--danger-600); background: #fff; }

/* --------------------------------------------------------------------------
   8. RESPONSIVE — mobile-first overrides, verified at 375 / 768 / 1440
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --fs-hero: 3rem; --fs-h1: 2.25rem; --fs-h2: 1.75rem; --section-y: 72px; }
  .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--sp-32); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32); }
}

@media (max-width: 768px) {
  :root { --fs-hero: 2.5rem; --fs-h1: 2rem; --fs-h2: 1.5rem; --section-y: 56px; --gutter: 20px; --card-pad: 20px; --grid-gap: 16px; }

  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--ink-200);
    padding: var(--sp-8) var(--gutter) var(--sp-24);
    box-shadow: var(--shadow-3);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: var(--sp-16) 0; border-bottom: 1px solid var(--ink-200); font-size: var(--fs-body); }
  .nav .btn { margin-top: var(--sp-16); }

  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero__inner { padding-block: 72px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 480px) {
  .strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .shade-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   9. MOTION PREFERENCES & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .filter, .hero__bg, .nav-toggle { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* No-JS fallback: all catalogue items are visible by default and the filter is
   hidden, so the page is fully usable without JavaScript. */
.no-js .filter { display: none; }