/* ============================================================
   Unidus Acoustics — production stylesheet
   Tokens from colors_and_type.css + component library.
   Never hardcode hex or px values in components — use tokens.
   ============================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root {
  /* Colour — base palette */
  --ink-900:        #161413;
  --ink-700:        #2A2725;
  --ink-500:        #6B655F;
  --ink-300:        #B9B1A6;
  --ink-100:        #E7DFD3;

  --paper:          #FAF7F2;
  --paper-deep:     #F2ECE2;
  --cream:          #F6F1EA;

  --peach-mist:     #F4DDCD;
  --peach-deep:     #E8C0A4;
  --terracotta:     #C75A3C;
  --terracotta-700: #A24326;
  --sand:           #E5D9C6;
  --clay:           #8C5A3D;
  --sage:           #4B5742;
  --slate-blue:     #2F4858;

  /* Colour — semantic */
  --fg-1:           var(--ink-900);
  --fg-2:           var(--ink-700);
  --fg-muted:       var(--ink-500);
  --fg-on-dark:     var(--paper);
  --bg-1:           var(--paper);
  --bg-2:           var(--paper-deep);
  --bg-3:           var(--cream);
  --bg-inverse:     var(--ink-900);
  --bg-accent-soft: var(--peach-mist);
  --bg-accent:      var(--terracotta);
  --border-soft:    var(--ink-100);
  --border-strong:  var(--ink-300);
  --link:           var(--ink-900);
  --link-hover:     var(--terracotta-700);
  --negative:       #A3361F;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:      'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid */
  --fs-display-1: clamp(3.25rem, 5.4vw + 0.5rem, 5.5rem);
  --fs-display-2: clamp(2.5rem, 3.6vw + 0.5rem, 4rem);
  --fs-h1:        clamp(2.25rem, 2.4vw + 1rem, 3.25rem);
  --fs-h2:        clamp(1.75rem, 1.4vw + 1rem, 2.5rem);
  --fs-h3:        clamp(1.375rem, 0.8vw + 1rem, 1.75rem);
  --fs-h4:        1.25rem;
  --fs-eyebrow:   0.8125rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-micro:     0.75rem;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  /* Letter spacing */
  --tracking-display: -0.015em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow:  0.14em;

  /* Spacing — 4pt grid */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Section rhythm */
  --section-y: clamp(4rem, 6vw, 7rem);

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-h:         64px;

  /* Radii */
  --radius-0:   0;
  --radius-2:   4px;
  --radius-3:   8px;
  --radius-pill: 999px;

  /* Shadows — warm-tinted, no blue */
  --shadow-1: 0 1px 2px rgba(22,20,19,0.04), 0 1px 1px rgba(22,20,19,0.03);
  --shadow-2: 0 4px 14px rgba(22,20,19,0.06), 0 1px 3px rgba(22,20,19,0.04);
  --shadow-3: 0 14px 32px rgba(22,20,19,0.10), 0 4px 10px rgba(22,20,19,0.05);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:   120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* Z-index */
  --z-base:   1;
  --z-sticky: 100;
  --z-nav:    200;
  --z-modal:  400;
  --z-float:  150;
}

/* ── 2. RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* Alpine: hide x-cloak elements until Alpine initialises */
[x-cloak] { display: none !important; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Suppress transitions on page load */
.no-transition, .no-transition * { transition: none !important; }

/* Ensure hidden attribute always wins over component display rules */
[hidden] { display: none !important; }

/* ── 3. BASE ─────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }

/* Italic accent inside display headlines — brand signature */
h1 em, h2 em, h3 em,
.u-display-1 em, .u-display-2 em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

p { max-width: 68ch; }
p.lede { font-size: var(--fs-body-lg); color: var(--fg-2); line-height: 1.6; }

a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease-out);
}
a:not([class]):hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* ── 4. LAYOUT UTILITIES ─────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: 920px; }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.section--cream       { background: var(--cream); }
.section--paper-deep  { background: var(--paper-deep); }
.section--peach       { background: var(--peach-mist); }
.section--dark        { background: var(--ink-900); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .u-eyebrow { color: rgba(250,247,242,0.65); }
.section--dark p { color: rgba(250,247,242,0.82); }

/* Two-column section header used across the page */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-12);
}
.section-lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  line-height: 1.55;
  margin-bottom: 0;
  max-width: 52ch;
}

/* Button group */
.btn-group { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

/* ── 5. SKIP LINK ────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%; left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--ink-900);
  color: var(--paper);
  border-radius: var(--radius-3);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  z-index: var(--z-modal);
}
.skip-link:focus { top: var(--space-2); }

/* ── 6. EDITORIAL MASTHEAD ───────────────────────────────── */
.masthead {
  background: var(--ink-900);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.masthead__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 6px;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.62);
}
.masthead__left { display: inline-flex; gap: 18px; }
.masthead__right { display: inline-flex; gap: 18px; }
.masthead__vol { color: var(--paper); }
.masthead__name { color: var(--peach-mist); }
.masthead__sep { opacity: 0.45; }

/* ── 7. NAVIGATION ───────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(250, 247, 242, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.site-nav.is-scrolled { box-shadow: var(--shadow-2); }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: var(--space-6);
}
.site-nav__logo img { height: 32px; width: auto; }
.site-nav__logo:focus-visible { outline-offset: 4px; }

.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-link {
  position: relative;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  padding: 6px 0;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--ink-900);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }

.nav-cta {
  flex-shrink: 0;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink-900);
}

/* ── 8. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  border-radius: var(--radius-2);
  padding: 11px 22px;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.btn--primary {
  background: var(--terracotta);
  color: var(--paper);
  border: none;
}
.btn--primary:hover { background: var(--terracotta-700); }
.btn--primary:active { transform: scale(0.98); }

.btn--ink {
  background: var(--ink-900);
  color: var(--paper);
  border: none;
}
.btn--ink:hover { background: var(--ink-700); }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}

.btn--peach {
  background: var(--peach-mist);
  color: var(--ink-900);
  border: none;
}
.btn--peach:hover { background: var(--peach-deep); }

.btn--sm { padding: 8px 16px; font-size: var(--fs-caption); min-height: 36px; }
.btn--lg { padding: 14px 28px; font-size: var(--fs-body); min-height: 52px; }

/* Arrow suffix */
.btn .arrow-icon { flex-shrink: 0; transition: transform var(--dur-quick) var(--ease-out); }
.btn:hover .arrow-icon { transform: translateX(2px); }

/* ── 9. EYEBROW ──────────────────────────────────────────── */
.u-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-2);
  max-width: none;
}

/* ── 10. HEX RULE ────────────────────────────────────────── */
.hex-rule {
  height: 1px;
  background: var(--border-soft);
  margin-block: var(--space-8);
}
.hex-rule::before, .hex-rule::after { display: none; }

/* ── 11. BREADCRUMB ──────────────────────────────────────── */
.breadcrumb { padding-block: var(--space-4); }
.breadcrumb__list {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb__list a { color: inherit; transition: color var(--dur-quick) var(--ease-out); }
.breadcrumb__list a:hover { color: var(--ink-900); }
.breadcrumb__list [aria-current="page"] { color: var(--ink-900); }
.breadcrumb__sep { width: 12px; height: 12px; flex-shrink: 0; }

/* ── 12. PHOTO PLACEHOLDER (no photo yet) ────────────────── */
.photo-slot {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(22,20,19,0.04) 0 1px, transparent 1px 14px),
    var(--paper-deep);
  display: flex;
  align-items: flex-end;
}
.photo-slot[data-tone="dark"]  { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px), var(--ink-700); color: var(--paper); }
.photo-slot[data-tone="peach"] { background: repeating-linear-gradient(135deg, rgba(22,20,19,0.05) 0 1px, transparent 1px 14px), var(--peach-mist); }
.photo-slot[data-tone="sand"]  { background: repeating-linear-gradient(135deg, rgba(22,20,19,0.05) 0 1px, transparent 1px 14px), var(--sand); }
.photo-slot[data-tone="sage"]  { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px), var(--sage); color: var(--paper); }
.photo-slot[data-tone="slate"] { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px), var(--slate-blue); color: var(--paper); }
.photo-slot[data-tone="terra"] { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px), var(--terracotta); color: var(--paper); }

.photo-slot__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  background: rgba(22,20,19,0.08);
  color: inherit;
  text-transform: uppercase;
  line-height: 1.4;
}
.photo-slot[data-tone="dark"] .photo-slot__label,
.photo-slot[data-tone="sage"] .photo-slot__label,
.photo-slot[data-tone="slate"] .photo-slot__label,
.photo-slot[data-tone="terra"] .photo-slot__label { background: rgba(255,255,255,0.12); }

/* Photo on a real <img> */
.photo-slot--hero { aspect-ratio: 16 / 7; width: 100%; }
.photo-slot--card { aspect-ratio: 4 / 3; width: 100%; }
.photo-slot--gallery-main { width: 100%; height: 100%; }
.photo-slot--square { aspect-ratio: 1 / 1; width: 100%; }

/* Card image zoom on hover */
.card-photo { overflow: hidden; }
.card-photo > .photo-slot,
.card-photo > img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card-photo > .photo-slot,
.card:hover .card-photo > img { transform: scale(1.04); }
.card:hover .card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── 13. SCROLL REVEAL ───────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* ── 14. HERO ENTRANCE ANIMATION (CSS — no GSAP dependency) ─ */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-range__content > * {
  animation: hero-fade-up 0.55s var(--ease-out) both;
}
.hero-range__content > :nth-child(1) { animation-delay: 0.05s; }
.hero-range__content > :nth-child(2) { animation-delay: 0.15s; }
.hero-range__content > :nth-child(3) { animation-delay: 0.25s; }
.hero-range__content > :nth-child(4) { animation-delay: 0.35s; }
.hero-range__content > :nth-child(5) { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .hero-range__content > * { animation: none; }
}

/* ── 15. HERO — RANGE PAGE ───────────────────────────────── */
.hero-range {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
}
.hero-range__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: unset;
}
.hero-range__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Dark protection gradient for text legibility */
.hero-range__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(22,20,19,0.25) 0%,
    rgba(22,20,19,0.72) 70%,
    rgba(22,20,19,0.88) 100%
  );
}
.hero-range__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  color: var(--paper);
}
.hero-range__content .u-eyebrow { color: var(--peach-mist); }
.hero-range__content h1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  color: var(--paper);
  letter-spacing: var(--tracking-display);
  max-width: 14ch;
}
.hero-range__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(250,247,242,0.85);
  line-height: 1.4;
  max-width: 48ch;
}

/* Stat strip */
.hero-range__stat-strip {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-item__value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--paper);
  letter-spacing: 0.02em;
}
.stat-item__label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(250,247,242,0.6);
}

/* CTA row */
.hero-range__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-range__ctas .btn--ghost {
  border-color: rgba(255,255,255,0.35);
  color: var(--paper);
}
.hero-range__ctas .btn--ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
}

/* ── 15. RANGE INTRO ─────────────────────────────────────── */
.range-intro-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
}
.range-intro-grid h2 { max-width: 20ch; margin-bottom: var(--space-4); }
.range-intro-grid p { margin-bottom: var(--space-4); }

.marginalia {
  padding-top: 2px;
}
.marginalia__item {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  line-height: 1.5;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  max-width: none;
}
.marginalia__item:last-child { border-bottom: none; }
.marginalia__ref {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--terracotta);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Range key stats under intro */
.range-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.range-stat { display: flex; flex-direction: column; gap: 4px; }
.range-stat__label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.range-stat__value {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-900);
}

/* ── 16. FILTER TABS ─────────────────────────────────────── */
.filter-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding-block: var(--space-4);
  margin-bottom: var(--space-8);
}
.filter-bar__group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.filter-bar__label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  max-width: none;
}
.filter-bar__sep {
  width: 1px;
  height: 20px;
  background: var(--border-soft);
  flex-shrink: 0;
}
.filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  max-width: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out);
}
.chip[aria-selected="true"],
.chip[data-active="true"] {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.chip:hover:not([aria-selected="true"]) { border-color: var(--ink-900); }
.chip__count { opacity: 0.55; }

/* ── 17. PANEL CARDS ─────────────────────────────────────── */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.panel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.panel-card:hover { border-color: var(--ink-300); }

.panel-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.panel-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.panel-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  line-height: var(--lh-heading);
}
.panel-card__sku {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--terracotta);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: var(--space-1);
}
.panel-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: none;
}
.panel-card__excerpt {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--fg-2);
  flex: 1;
}
.panel-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.panel-card__specs dt {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.panel-card__specs dd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-900);
}

/* ── 18. COMPARISON TABLE ────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--ink-900);
  min-width: 560px;
}
.compare-table thead tr { border-bottom: 2px solid var(--border-strong); }
.compare-table thead th { padding: 16px 0; text-align: left; }
.compare-table thead th:first-child {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  width: 22%;
}
.compare-table thead th:not(:first-child) {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-display);
  padding-right: var(--space-6);
  padding-left: 16px;
}
.compare-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.compare-table tbody td { padding: 14px 24px 14px 16px; vertical-align: top; }
.compare-table tbody td:first-child {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  padding-left: 0;
}
.compare-table .mono { font-family: var(--font-mono); font-size: 12px; }

/* ── 19. SPEC TABLE ──────────────────────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-top: 1px solid var(--border-soft); }
.spec-table tr:last-child { border-bottom: 1px solid var(--border-soft); }
.spec-table th, .spec-table td { padding: 14px 0; text-align: left; vertical-align: top; }
.spec-table th {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  width: 32%;
  padding-right: var(--space-6);
}
.spec-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-900);
}

/* ── 20. COLOUR SWATCHES ─────────────────────────────────── */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.swatch__dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(22,20,19,0.08);
}
.swatch__name {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  line-height: 1.3;
}

/* ── 21. INSTALLATION GRID ───────────────────────────────── */
.install-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.install-item { display: flex; flex-direction: column; gap: var(--space-3); }
.install-item__icon {
  width: 40px; height: 40px;
  color: var(--ink-900);
  flex-shrink: 0;
}
.install-item__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  color: var(--ink-900);
}
.install-item__body {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--fg-2);
}

/* ── 22. GALLERY GRID (ASYMMETRIC) ───────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: 300px;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.gallery-grid__item {
  position: relative;
  overflow: hidden;
}
.gallery-grid__item:first-child { grid-row: span 2; }
.gallery-grid__photo {
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-end;
}
.gallery-grid__photo .photo-slot {
  width: 100%; height: 100%;
  aspect-ratio: unset;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-grid__item:hover .photo-slot { transform: scale(1.03); }
.gallery-grid__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, rgba(22,20,19,0.7));
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--paper);
  letter-spacing: 0.02em;
}

/* ── 23. SAMPLE CTA STRIPE ───────────────────────────────── */
.cta-stripe {
  padding-block: clamp(3.5rem, 5vw, 5rem);
}
.cta-stripe__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.cta-stripe__copy { max-width: 52ch; }
.cta-stripe__copy h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-4);
}
.cta-stripe__copy p {
  font-size: var(--fs-body-sm);
  color: var(--ink-700);
  line-height: 1.6;
}
.cta-stripe__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; flex-shrink: 0; }

/* ── 24. ACCORDION (FAQ) ─────────────────────────────────── */
.faq-list { margin-top: var(--space-10); }

details.faq-item {
  border-top: 1px solid var(--border-soft);
}
details.faq-item:last-child { border-bottom: 1px solid var(--border-soft); }

details.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  gap: var(--space-4);
  user-select: none;
}
details.faq-item > summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--fg-muted);
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
details.faq-item[open] > summary::after {
  content: "−";
  transform: none;
}

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
details.faq-item[open] .faq-body { grid-template-rows: 1fr; }
.faq-body__inner {
  overflow: hidden;
  padding-bottom: var(--space-6);
}
.faq-body__inner p {
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--fg-2);
}

/* ── 25. RELATED PRODUCTS ────────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.related-card__photo { margin-bottom: var(--space-4); }
.related-card__photo .photo-slot { aspect-ratio: 3 / 4; }
.related-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  margin-bottom: var(--space-1);
}
.related-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 26. FLOATING CTA ────────────────────────────────────── */
.floating-cta {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: var(--z-float);
}
/* The pill shape lives on the btn itself, not the wrapper */
.floating-cta .btn {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-quick) var(--ease-out),
              background var(--dur-quick) var(--ease-out);
}
.floating-cta .btn:hover { transform: translateY(-2px); }

/* ── 27. FOOTER ──────────────────────────────────────────── */
.site-footer {
  background: var(--ink-900);
  color: var(--paper);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(250,247,242,0.65);
  margin-top: var(--space-4);
  max-width: 28ch;
  line-height: 1.5;
}

.footer-col__title {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(250,247,242,0.5);
  margin-bottom: var(--space-5);
}
.footer-col__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__links a {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: rgba(250,247,242,0.75);
  transition: color var(--dur-quick) var(--ease-out);
}
.footer-col__links a:hover { color: var(--paper); }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-contact__item {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: rgba(250,247,242,0.75);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.footer-contact__item svg { flex-shrink: 0; margin-top: 2px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: rgba(250,247,242,0.45);
}
.footer-bottom a { color: inherit; transition: color var(--dur-quick) var(--ease-out); }
.footer-bottom a:hover { color: rgba(250,247,242,0.75); }

/* ── 28. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; gap: var(--space-4); }
  .range-intro-grid { grid-template-columns: 1fr; }
  .marginalia { display: none; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  .gallery-grid__item:first-child { grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .swatch-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 768px) {
  .panel-grid { grid-template-columns: repeat(2, 1fr); }
  .install-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .related-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .cta-stripe__inner { flex-direction: column; align-items: flex-start; }
  .site-nav__links { display: none; }
  .site-nav__cta   { display: none; }
  .swatch-grid { grid-template-columns: repeat(4, 1fr); }
  .range-stats { grid-template-columns: repeat(2, 1fr); }
  .filter-bar__sep { display: none; }
}

@media (max-width: 600px) {
  .panel-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .hero-range__stat-strip { gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 29. SUPPLEMENTARY COMPONENTS ───────────────────────── */

/* Eyebrow alias — PHP uses .eyebrow, base CSS uses .u-eyebrow */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-2);
  max-width: none;
}

/* Masthead bar — direct flex layout (no inner wrapper needed) */
.masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-block: 7px;
  padding-inline: var(--container-pad);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.55);
}
.masthead__vol   { color: var(--paper); }
.masthead__tagline { }
.masthead__divider {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,0.22);
}
.masthead__contact { white-space: nowrap; }
.masthead__contact a { color: var(--peach-mist); }

/* Nav alias classes and mobile panel */
.site-nav__links  { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__cta    { flex-shrink: 0; }
.site-nav--scrolled { box-shadow: var(--shadow-2); }

.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink-900);
  background: none;
  border: none;
  cursor: pointer;
}

.site-nav__panel {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-6) var(--container-pad);
  box-shadow: var(--shadow-2);
  z-index: var(--z-nav);
}
.site-nav__panel[aria-hidden="false"] { display: block; }
.site-nav__panel ul  { display: flex; flex-direction: column; gap: var(--space-4); }
.site-nav__panel a   { font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink-900); }

/* Active nav link */
.nav-link--active::after { width: 100%; }

/* Hero gradient overlay via pseudo-element */
.hero-range::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,20,19,0.25) 0%, rgba(22,20,19,0.72) 70%, rgba(22,20,19,0.88) 100%);
  pointer-events: none;
}
.hero-range__content { z-index: 2; }

/* Hero eyebrow on dark bg */
.hero-range__content .eyebrow { color: var(--peach-mist); }

/* Btn-group has a global margin-top; cancel it inside the hero flex container to avoid double-spacing */
.hero-range__content .btn-group { margin-top: 0; }

/* Ghost and outline buttons inside the dark hero must read white */
.hero-range .btn--ghost {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-range .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--paper);
}

/* Hero sub-headline */
.hero-range__sub {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(250,247,242,0.85);
  line-height: 1.45;
  max-width: 48ch;
}

/* Hero stat strip */
.hero-range__stats {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.hero-range__stat         { display: flex; flex-direction: column; gap: 4px; }
.hero-range__stat-val     { font-family: var(--font-mono); font-size: 1.25rem; color: var(--paper); letter-spacing: 0.02em; }
.hero-range__stat-label   { font-family: var(--font-ui); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(250,247,242,0.6); }

/* Section head children */
.section-head__left  { }
.section-head__right { }
.section-head__right > :first-child { margin-top: 0; }

/* Overview stat grid */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-soft);
}
.overview-stat        { display: flex; flex-direction: column; gap: var(--space-2); }
.overview-stat__val   { font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, 1vw + 0.7rem, 1.375rem); color: var(--ink-900); letter-spacing: var(--tracking-display); }
.overview-stat__label { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-muted); line-height: 1.4; }

/* Compare table wrap + code badge */
.compare-wrap          { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table__code   { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--terracotta); text-transform: uppercase; font-weight: 400; margin-top: 4px; }

/* Highlight U-TONE column (2nd column) */
.compare-table--highlight thead th:nth-child(2) {
  background: var(--paper);
  border-top: 2px solid var(--terracotta);
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding-left: 16px;
}
.compare-table--highlight tbody td:nth-child(2) {
  background: var(--paper);
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding-left: 16px;
}
.compare-table--highlight tbody tr:last-child td:nth-child(2) {
  border-bottom: 1px solid var(--border-soft);
}

.compare-table th[scope="row"] {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  padding: 14px 24px 14px 0;
  width: 22%;
  vertical-align: top;
}
.compare-table td { padding: 14px 24px 14px 16px; vertical-align: top; }

/* Spec note */
.spec-note { margin-top: var(--space-4); font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--fg-muted); font-style: italic; }

/* Mono utility */
.mono { font-family: var(--font-mono); }

/* Install cards */
.install-card        { display: flex; flex-direction: column; gap: var(--space-4); }
.install-card__icon  { width: 40px; height: 40px; color: var(--terracotta); flex-shrink: 0; }
.install-card h3     { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--ink-900); }
.install-card p      { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-2); max-width: 42ch; }

/* Gallery caption child elements */
.gallery-grid__client   { display: block; font-weight: 600; font-size: var(--fs-body-sm); }
.gallery-grid__location { display: block; font-size: var(--fs-caption); opacity: 0.75; margin-top: 2px; }

/* Gallery tall item */
.gallery-grid__item--tall { }

/* Client logo grid */
.client-logos {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-soft);
}
.client-logos__label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-6);
  max-width: none;
}
.client-logos__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-10);
}
.client-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.client-logo-box img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--dur-quick) var(--ease-out), filter var(--dur-quick) var(--ease-out);
}
.client-logo-box:hover img {
  opacity: 0.75;
  filter: grayscale(0.6);
}

/* FAQ body inner div (grid-template-rows accordion pattern) */
.faq-body > div            { overflow: hidden; }
.faq-body > div > p        { font-size: var(--fs-body-sm); line-height: 1.65; color: var(--fg-2); padding-bottom: var(--space-6); }

/* Panel card CTA button */
.panel-card__cta {
  margin-top: var(--space-4);
  align-self: flex-start;
}

/* Panel grid footer link */
.panel-grid__foot {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-soft);
}

/* Specifier testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--border-soft);
  background: var(--paper);
}
.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-700);
  flex: 1;
  max-width: none;
}
.testimonial-card__attr {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}
.testimonial-card__role {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  max-width: none;
}

/* Panel card image and hover */
.panel-card__img-wrap { display: block; overflow: hidden; }
.panel-card__photo    { aspect-ratio: 4 / 3; overflow: hidden; }
img.panel-card__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.panel-card__type     { margin-bottom: var(--space-1); }
.panel-card__name a   { color: inherit; text-decoration: none; }
.panel-card:hover .panel-card__name a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Zoom image on card hover — no translateY lift */
.panel-card .panel-card__photo {
  transition: transform var(--dur-slow) var(--ease-out);
}
.panel-card:hover .panel-card__photo { transform: scale(1.04); }

/* Gallery real images */
.gallery-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-grid__item:hover img { transform: scale(1.03); }

/* Footer component aliases */
.footer__heading {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(250,247,242,0.5);
  margin-bottom: var(--space-5);
}
.footer__logo img   { height: 28px; width: auto; filter: brightness(0) invert(1); }
.footer__tagline    { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: rgba(250,247,242,0.65); margin-top: var(--space-4); max-width: 28ch; line-height: 1.5; }
.footer__cert       { font-family: var(--font-ui); font-size: var(--fs-micro); letter-spacing: 0.04em; color: rgba(250,247,242,0.4); margin-top: var(--space-3); text-transform: uppercase; }
.footer__address    { font-style: normal; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: rgba(250,247,242,0.75); line-height: 1.7; }
.footer__address a  { color: rgba(250,247,242,0.85); transition: color var(--dur-quick) var(--ease-out); }
.footer__address a:hover { color: var(--paper); }
.footer-col--nav ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col--nav a  { font-family: var(--font-ui); font-size: var(--fs-body-sm); color: rgba(250,247,242,0.75); transition: color var(--dur-quick) var(--ease-out); }
.footer-col--nav a:hover { color: var(--paper); }
.footer-bottom__copy  { }
.footer-bottom__links { display: flex; gap: var(--space-4); }
.footer-bottom__links a { color: inherit; transition: color var(--dur-quick) var(--ease-out); }
.footer-bottom__links a:hover { color: rgba(250,247,242,0.75); }

/* Breadcrumb direct ol layout */
.breadcrumb ol {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.breadcrumb ol li          { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb ol a           { color: inherit; transition: color var(--dur-quick) var(--ease-out); }
.breadcrumb ol a:hover     { color: var(--ink-900); }
.breadcrumb [aria-current="page"] { color: var(--ink-900); }

/* Floating CTA as link */
.floating-cta a { color: var(--paper); }

/* ── 30. RESPONSIVE — SUPPLEMENTARY ─────────────────────── */
@media (max-width: 1024px) {
  .overview-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero-range__stats   { gap: var(--space-6); }
  .site-nav__links     { display: none; }
  .site-nav__cta       { display: none; }
  .site-nav__toggle    { display: flex; }
  .compare-table       { font-size: var(--fs-caption); }
  .testimonials-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .overview-stats        { grid-template-columns: 1fr 1fr; }
  .hero-range__stats     { gap: var(--space-4); flex-wrap: wrap; }
  .client-logos__grid    { gap: var(--space-5) var(--space-6); }
  .client-logo-box img   { height: 24px; }
  .masthead__tagline,
  .masthead__divider     { display: none; }
}

/* Hero photo-slot placeholder — fills absolute container */
.hero-range__photo .photo-slot { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: unset; }

/* ── 31. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── 32. CONTACT PAGE ────────────────────────────────────── */

/* Hero — editorial split */
.contact-hero {
  padding-top: clamp(2rem, 3vw, 3.5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.contact-hero__intro h1 { margin-top: var(--space-3); }
.contact-hero__intro .lede { margin-top: var(--space-5); max-width: 38ch; }

/* Quick-contact card */
.quick-card {
  background: var(--ink-900);
  color: var(--paper);
  border-radius: var(--radius-3);
  padding: var(--space-8);
  box-shadow: var(--shadow-3);
}
.quick-card__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--peach-mist);
  margin-bottom: var(--space-5);
}
.quick-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  transition: opacity var(--dur-quick) var(--ease-out);
}
.quick-card__row:hover { opacity: 0.78; }
.quick-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2);
  background: rgba(250, 247, 242, 0.08);
  color: var(--peach-mist);
}
.quick-card__body { display: flex; flex-direction: column; gap: 2px; }
.quick-card__label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.quick-card__value { font-size: var(--fs-body-lg); font-weight: 500; }
.quick-card__hours {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  font-size: var(--fs-caption);
  color: var(--ink-300);
}
.quick-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5FA86A;
  box-shadow: 0 0 0 3px rgba(95, 168, 106, 0.25);
}

/* Form shell + tabs */
.form-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--space-12);
}
.form-tabs { display: flex; flex-direction: column; gap: var(--space-3); }
.form-tab {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-3);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num title" "num desc";
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.form-tab:hover { border-color: var(--border-strong); }
.form-tab__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ink-300);
  align-self: start;
  padding-top: 2px;
}
.form-tab__title {
  grid-area: title;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--fg-1);
}
.form-tab__desc {
  grid-area: desc;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: 1.45;
}
.form-tab[aria-selected="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.form-tab[aria-selected="true"] .form-tab__num   { color: var(--peach-mist); }
.form-tab[aria-selected="true"] .form-tab__title { color: var(--paper); }
.form-tab[aria-selected="true"] .form-tab__desc  { color: rgba(250, 247, 242, 0.7); }

/* Form panel + fields */
.form-panel {
  display: none;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-3);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form-panel.is-active { display: block; }
.lead-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field--full { grid-column: 1 / -1; }
.form-label {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0.01em;
}
.form-req { color: var(--terracotta); }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out);
}
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B655F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(199, 90, 60, 0.14);
}
.form-input::placeholder { color: var(--ink-300); }

.form-field--error .form-input,
.form-field--error .form-select,
.form-field--error .form-textarea { border-color: var(--negative); }
.form-field--error .form-input:focus,
.form-field--error .form-textarea:focus { box-shadow: 0 0 0 3px rgba(163, 54, 31, 0.14); }
.form-err {
  font-size: var(--fs-caption);
  color: var(--negative);
}

/* Checkbox group */
.form-checks { border: 0; padding: 0; }
.form-checks .form-label { margin-bottom: var(--space-3); display: block; }
.form-checks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  cursor: pointer;
}
.form-check input {
  width: 16px; height: 16px;
  accent-color: var(--terracotta);
  flex-shrink: 0;
}

/* Honeypot — visually hidden but reachable to bots */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Success state */
.form-success {
  margin-top: var(--space-12);
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-3);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  max-width: 640px;
}
.form-success__mark {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--sage);
  color: var(--paper);
}
.form-success h3 { margin-bottom: var(--space-3); }
.form-success p { color: var(--fg-2); max-width: 48ch; margin: 0 auto var(--space-8); }
.form-success a { color: var(--link-hover); }
.form-success .btn a,
.form-success a.btn { color: var(--paper); }

/* Offices */
.office-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.office-card {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.office-card--lead {
  grid-row: span 1;
  background: var(--peach-mist);
  border-color: var(--peach-deep);
}
.office-card__tag {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-2);
}
.office-card--lead .office-card__tag { color: var(--terracotta-700); }
.office-card__city {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}
.office-card__addr {
  font-style: normal;
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: 1.6;
}
.office-card__links {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--peach-deep);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-body-sm);
}
.office-card__links a { color: var(--ink-900); transition: color var(--dur-quick) var(--ease-out); }
.office-card__links a:hover { color: var(--terracotta-700); }

/* City presence */
.city-list {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4) var(--space-6);
}
.city-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-body-lg);
  color: var(--fg-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.city-list__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* Contact page — responsive */
@media (max-width: 900px) {
  .contact-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .form-shell         { grid-template-columns: 1fr; }
  .form-tabs          { flex-direction: column; }
  .office-grid        { grid-template-columns: repeat(2, 1fr); }
  .city-list          { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .form-row    { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .city-list   { grid-template-columns: repeat(2, 1fr); }
  .quick-card  { padding: var(--space-6); }
}

/* ── 33. HOMEPAGE ────────────────────────────────────────── */

/* Hero — editorial split on paper */
.home-hero {
  padding-top: clamp(2.5rem, 4vw, 4.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}
.home-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.home-hero__intro h1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-4);
}
.home-hero__intro .lede { margin-top: var(--space-5); max-width: 46ch; }
.home-hero__intro .btn-group { margin-top: var(--space-8); }
.home-hero__media {
  position: relative;
  min-height: 440px;
  border-radius: var(--radius-3);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Credentials band: stats sit tight above the client logos, one rule only */
.cred-band__stats { margin-top: 0; margin-bottom: var(--space-10); }
.cred-band .client-logos { margin-top: 0; padding-top: 0; border-top: 0; }

/* Brand promise statement */
.statement { text-align: center; }
.statement .eyebrow { display: block; margin-bottom: var(--space-5); }
.statement__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.375rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin-inline: auto;
  max-width: 30ch;
}

/* Product universe mosaic */
.universe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 18vw, 240px);
  gap: var(--space-3);
  margin-top: var(--space-10);
}
.universe-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3);
  background: var(--ink-900);
  color: var(--paper);
  display: block;
}
.universe-tile--feature { grid-column: span 2; grid-row: span 2; }
.universe-tile--wide    { grid-column: span 2; }
.universe-tile__media { position: absolute; inset: 0; }
.universe-tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.universe-tile:hover .universe-tile__media img { transform: scale(1.04); }
.universe-tile__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,20,19,0) 35%, rgba(22,20,19,0.78) 100%);
}
.universe-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.universe-tile__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--peach-mist);
}
.universe-tile__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: var(--lh-heading);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.universe-tile__name svg {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.universe-tile:hover .universe-tile__name svg { opacity: 1; transform: none; }
.universe-tile--feature .universe-tile__name { font-size: 1.75rem; }

/* Media split (featured project, material story) */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.media-split--reverse .media-split__media { order: 2; }
.media-split__media {
  position: relative;
  border-radius: var(--radius-3);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.media-split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.media-split__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(transparent, rgba(22,20,19,0.72));
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--paper);
}
.media-split__body h2 { margin-bottom: var(--space-4); }
.media-split__body .lede { margin-bottom: var(--space-4); }
.media-split__body .range-stats { margin-top: var(--space-8); }
.media-split__body .btn-group { margin-top: var(--space-8); }

/* Services — numbered editorial grid */
.services-grid { grid-template-columns: repeat(3, 1fr); }
.services-grid .install-item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}
.services-grid .install-item__icon {
  width: auto; height: auto;
  margin-bottom: var(--space-2);
}
.services-grid__num {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}

/* Homepage — responsive */
@media (max-width: 980px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__media { order: -1; min-height: 0; }
  .home-hero__media img { height: auto; aspect-ratio: 16 / 10; }
  .media-split { grid-template-columns: 1fr; }
  .media-split--reverse .media-split__media { order: 0; }
  .media-split__media img { aspect-ratio: 16 / 10; }
  .universe { grid-template-columns: repeat(2, 1fr); }
  .universe-tile--feature { grid-column: span 2; grid-row: span 1; }
  .universe-tile--wide    { grid-column: span 2; }
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .universe { grid-template-columns: 1fr; }
  .universe-tile--feature,
  .universe-tile--wide { grid-column: span 1; }
  .services-grid { grid-template-columns: 1fr; }
}