/* Base Movement — compiled stylesheet. Source partials live in /src/assets/css/. Do not edit this file directly; edit the partials and run `npm run build`. */

/* ==========================================================================
   Base Movement — Design Tokens
   Luxury / minimal / architectural. Neutral palette, warm gold accent.
   ========================================================================== */

:root {
  /* Colour — primary (neutrals) */
  --c-white: #FFFFFF;
  --c-ivory: #F8F8F6;
  --c-sand: #F4F1EC;

  /* Colour — secondary (ink) */
  --c-charcoal: #2E2E2E;
  --c-ink: #111111;

  /* Colour — accent */
  --c-gold: #C9A96A;
  --c-gold-soft: #DCC79E;
  --c-gold-deep: #A9855099;
  /* #C9A96A only reaches ~2.2:1 on white/ivory — well under WCAG AA's
     4.5:1 for text. Keep --c-gold for backgrounds, borders, icons paired
     with a redundant text label, and decorative/dark-bg use; use this
     darker variant (5.2–5.6:1 on white/ivory) anywhere gold is the only
     way text conveys its content on a light background. */
  --c-gold-text: #836329;

  /* Semantic */
  --c-bg: var(--c-white);
  --c-bg-muted: var(--c-ivory);
  --c-bg-sand: var(--c-sand);
  --c-text: var(--c-ink);
  --c-text-soft: var(--c-charcoal);
  --c-text-muted: #7A756C;
  --c-border: #E5E1D8;
  --c-border-strong: #D3CDBF;
  --c-accent: var(--c-gold);
  --c-on-dark: var(--c-ivory);
  --c-bg-dark: var(--c-ink);
  --c-bg-dark-soft: var(--c-charcoal);

  /* Typography */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.75rem, 3.2rem + 3vw, 6rem);
  --fs-h1: clamp(2.25rem, 2rem + 2vw, 4rem);
  --fs-h2: clamp(1.85rem, 1.6rem + 1.4vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.85rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.3vw, 1.35rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  --ls-eyebrow: 0.18em;
  --ls-tight: -0.02em;
  --ls-wide: 0.04em;

  /* Spacing scale — spacious, editorial */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  --space-2xl: clamp(4rem, 3rem + 4vw, 7.5rem);
  --space-3xl: clamp(5rem, 3.5rem + 6vw, 10rem);

  /* Layout */
  --container-max: 1440px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 0.8rem + 2vw, 4rem);
  --header-h: 5.5rem;
  --header-h-scrolled: 4.5rem;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 8px 30px rgba(17, 17, 17, 0.06);
  --shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.1);
  --shadow-gold: 0 8px 24px rgba(201, 169, 106, 0.25);

  /* Motion — luxury easing */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 600ms;
  --dur-reveal: 900ms;

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-color-scheme: dark) {
  /* Base Movement is intentionally a single-mode luxury light palette —
     dark backgrounds are used only for specific sections (footer, CTA),
     applied explicitly via .theme-dark rather than the OS scheme. */
}

.theme-dark {
  --c-bg: var(--c-ink);
  --c-bg-muted: var(--c-charcoal);
  --c-text: var(--c-ivory);
  --c-text-soft: #D8D4CB;
  --c-text-muted: #A39D91;
  --c-border: #3A3A38;
  --c-border-strong: #4A4A47;
}


/* ==========================================================================
   Base Movement — Reset & Base Typography
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

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

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Focus visibility — always keep, never remove for aesthetics */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
a:focus-visible, button:focus-visible { outline-offset: 4px; }

::selection {
  background: var(--c-gold);
  color: var(--c-ink);
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-sm);
  z-index: var(--z-modal);
  background: var(--c-ink);
  color: var(--c-ivory);
  padding: 0.85em 1.5em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

/* ==========================================================================
   Typography scale
   ========================================================================== */

.text-hero {
  font-size: var(--fs-hero);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

.text-h1 { font-size: var(--fs-h1); }
.text-h2 { font-size: var(--fs-h2); }
.text-h3 { font-size: var(--fs-h3); }
.text-h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

.text-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text-soft);
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: currentColor;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

.text-muted { color: var(--c-text-muted); }
.text-soft { color: var(--c-text-soft); }
.text-on-dark { color: var(--c-on-dark); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section--tight { padding-block: var(--space-xl); }
.section--large { padding-block: var(--space-3xl); }
.section--muted { background: var(--c-bg-muted); }
.section--sand { background: var(--c-bg-sand); }
.section--dark { background: var(--c-bg-dark); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-on-dark); }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}
.section-head--center { margin-inline: auto; text-align: center; }

.section-head .eyebrow { margin-bottom: var(--space-sm); }
.section-head h2 { margin-top: var(--space-xs); }
.section-head p { margin-top: var(--space-sm); }

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

.hr-line {
  border: none;
  border-top: 1px solid var(--c-border);
  margin-block: var(--space-lg);
}


/* ==========================================================================
   Logo — "BASE" wordmark (hand-traced from the supplied logo image; see
   src/templates/logoMark.mjs) + "Pilates Supply" tagline. Rendered in
   currentColor so it inherits ivory/ink same as the rest of the header.
   ========================================================================== */

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}
.brand-logo__mark {
  display: block;
  flex-shrink: 0;
  width: 6rem;
  transition: width var(--dur-base) var(--ease-luxury);
}
.brand-logo__mark-svg { display: block; width: 100%; height: auto; color: inherit; }

.brand-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-logo__tagline {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  margin-top: 0.1rem;
}
.site-header.has-transparent:not(.is-scrolled) .brand-logo__tagline { color: var(--c-gold-text); }

.site-header.is-scrolled .brand-logo__mark { width: 5rem; }

.footer-brand .brand-logo__mark { width: 8rem; }
.footer-brand .brand-logo__tagline { color: var(--c-gold); }


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.9em 2em;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-luxury),
              color var(--dur-base) var(--ease-luxury),
              border-color var(--dur-base) var(--ease-luxury),
              transform var(--dur-base) var(--ease-luxury),
              box-shadow var(--dur-base) var(--ease-luxury);
}
.btn svg { width: 1em; height: 1em; flex-shrink: 0; }

.btn--primary {
  background: var(--c-ink);
  color: var(--c-ivory);
  border-color: var(--c-ink);
}
.btn--primary:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn--secondary {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--secondary:hover {
  background: var(--c-ink);
  color: var(--c-ivory);
  transform: translateY(-2px);
}

.btn--on-dark {
  background: transparent;
  color: var(--c-ivory);
  border-color: rgba(248, 248, 246, 0.5);
}
.btn--on-dark:hover {
  background: var(--c-ivory);
  color: var(--c-ink);
  border-color: var(--c-ivory);
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--c-gold);
  color: var(--c-ink);
  border-color: var(--c-gold);
}
.btn--gold:hover {
  background: var(--c-ink);
  color: var(--c-ivory);
  border-color: var(--c-ink);
  transform: translateY(-2px);
}

.btn--text {
  min-height: auto;
  padding: 0.2em 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: var(--fs-body);
  border-bottom: 1px solid currentColor;
}
.btn--text:hover { color: var(--c-gold); }

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

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
}
.icon-link svg {
  width: 1.1em; height: 1.1em;
  transition: transform var(--dur-base) var(--ease-luxury);
}
.icon-link:hover svg { transform: translateX(4px); }


/* ==========================================================================
   Header / Navigation
   ========================================================================== */

body { padding-top: 0; }
body.has-transparent-header { padding-top: 0; }
body:not(.has-transparent-header) { padding-top: var(--header-h); }

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-luxury),
              border-color var(--dur-base) var(--ease-luxury),
              height var(--dur-base) var(--ease-luxury),
              box-shadow var(--dur-base) var(--ease-luxury);
}

.site-header:not(.has-transparent) {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--c-border);
}

.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* The home hero is a light photograph, so the transparent header reads in
   ink; it gains the solid white treatment on scroll as before. */
.site-header.has-transparent:not(.is-scrolled) { color: var(--c-ink); }
.site-header:not(.has-transparent), .site-header.is-scrolled { color: var(--c-ink); }

.site-nav {
  display: none;
}
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 1rem + 1vw, 2.5rem);
  }
}

.site-nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  padding-block: 0.4em;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-base) var(--ease-luxury);
}
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { right: 0; }

.site-nav__item { position: relative; }
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  margin-top: var(--space-sm);
  min-width: 15rem;
  padding: var(--space-sm);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--c-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-luxury), transform var(--dur-base) var(--ease-luxury), visibility var(--dur-base);
  display: grid;
  gap: 0.15rem;
}
.site-nav__dropdown--mega {
  min-width: 27rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.75rem;
}
.site-nav__dropdown a {
  display: block;
  padding: 0.6em 0.75em;
  font-size: var(--fs-small);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.site-nav__dropdown a:hover { background: var(--c-bg-muted); padding-left: 1em; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

/* The header quote CTA only has room once the full nav also appears;
   below that it stays available (more prominently) in the mobile menu. */
.site-header__cta { display: none; }
@media (min-width: 1024px) { .site-header__cta { display: inline-flex; } }

/* Language switcher */
.lang-switch {
  position: relative;
}
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  padding: 0.4em 0.2em;
}
.lang-switch__toggle svg { width: 0.7em; height: 0.7em; transition: transform var(--dur-fast) var(--ease-out); }
.lang-switch.is-open .lang-switch__toggle svg { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: var(--space-xs);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 8rem;
  padding: 0.4rem;
  color: var(--c-ink);
  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);
}
.lang-switch.is-open .lang-switch__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-switch__option {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  padding: 0.55em 0.75em;
  font-size: var(--fs-small);
  border-radius: var(--radius-sm);
  text-align: left;
}
.lang-switch__option:hover { background: var(--c-bg-muted); }
.lang-switch__option[aria-current="true"] { color: var(--c-gold-text); font-weight: 600; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle__bars { position: relative; width: 1.4rem; height: 0.9rem; }
.menu-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-luxury), opacity var(--dur-base) var(--ease-luxury), top var(--dur-base) var(--ease-luxury);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 50%; margin-top: -0.5px; }
.menu-toggle__bars span:nth-child(3) { top: 100%; margin-top: -1px; }
.mobile-menu.is-open ~ .site-header .menu-toggle__bars span:nth-child(1),
body.menu-open .menu-toggle__bars span:nth-child(1) { top: 50%; transform: rotate(45deg); }
body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle__bars span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--c-ivory);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--space-lg)) var(--container-pad) var(--space-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-luxury), transform var(--dur-base) var(--ease-luxury), visibility var(--dur-base);
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.mobile-menu__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
  font-weight: 500;
  padding-block: 0.35em;
  border-bottom: 1px solid var(--c-border);
}
.mobile-menu__sub { padding-left: 1.25rem; display: flex; flex-direction: column; }
.mobile-menu__sub a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding-block: 0.6em;
  color: var(--c-text-soft);
}
.mobile-menu__footer {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.mobile-menu__langs { display: flex; gap: var(--space-sm); }
.mobile-menu__langs a {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  padding: 0.4em 0.9em;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
}
.mobile-menu__langs a[aria-current="true"] { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); }


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-ink);
  color: var(--c-ivory);
  padding-block: var(--space-2xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(248, 248, 246, 0.12);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; }
}

.footer-brand p {
  margin-top: var(--space-sm);
  max-width: 26rem;
  color: rgba(248, 248, 246, 0.65);
  font-size: var(--fs-small);
}
.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(248, 248, 246, 0.2);
  border-radius: 50%;
  transition: border-color var(--dur-base) var(--ease-luxury), background var(--dur-base) var(--ease-luxury), color var(--dur-base) var(--ease-luxury);
}
.footer-social a svg { width: 1rem; height: 1rem; }
.footer-social a:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }

.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(248, 248, 246, 0.5);
  margin-bottom: var(--space-md);
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a, .footer-col address { font-size: var(--fs-small); color: rgba(248, 248, 246, 0.85); font-style: normal; }
.footer-col a { transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--c-gold); }
.footer-col address { line-height: 1.6; }

.footer-newsletter form {
  display: flex;
  border-bottom: 1px solid rgba(248, 248, 246, 0.3);
  padding-bottom: 0.5rem;
  margin-top: var(--space-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}
.footer-newsletter form:focus-within { border-color: var(--c-gold); }
.footer-newsletter input {
  flex: 1;
  color: var(--c-ivory);
  font-size: var(--fs-small);
  padding: 0.5em 0;
}
.footer-newsletter input::placeholder { color: rgba(248, 248, 246, 0.45); }
.footer-newsletter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  color: var(--c-ivory);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-newsletter button:hover { color: var(--c-gold); transform: translateX(3px); }
.footer-newsletter button svg { width: 1.15rem; height: 1.15rem; }
.footer-newsletter p.disclaimer {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: rgba(248, 248, 246, 0.4);
}
.footer-newsletter .form-success {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--c-gold);
  display: none;
}
.footer-newsletter.is-success form { display: none; }
.footer-newsletter.is-success .form-success { display: block; }

.footer-bottom {
  padding-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(248, 248, 246, 0.45);
}
.footer-bottom-links { display: flex; gap: var(--space-md); }
.footer-bottom-links a:hover { color: var(--c-gold); }

.footer-lang-inline { display: flex; gap: 0.5rem; }
.footer-lang-inline a {
  padding: 0.2em 0.6em;
  border: 1px solid rgba(248, 248, 246, 0.2);
  border-radius: var(--radius-pill);
}
.footer-lang-inline a[aria-current="true"] { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }


/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-ivory);
}

.hero__media {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: 0;
}
.hero__media .art-placeholder { width: 100%; height: 100%; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.15) 0%, rgba(17,17,17,0.05) 35%, rgba(17,17,17,0.75) 100%);
}

/* Light hero — full-bleed brand photography, ink text, pointer parallax */
.hero--light {
  background: var(--c-sand);
  color: var(--c-ink);
}
.hero--light .hero__media::after {
  background: linear-gradient(180deg, rgba(244,241,236,0.32) 0%, rgba(244,241,236,0) 30%, rgba(244,241,236,0.55) 88%, rgba(244,241,236,0.85) 100%);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* pointer parallax shifts up to ±1.2%, so render slightly oversized */
  transform: scale(1.05) translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transition: transform 900ms var(--ease-luxury);
  animation: heroSettle 1600ms var(--ease-luxury);
}
.js .hero__photo.is-tracking { transition: transform 200ms linear; }
@keyframes heroSettle {
  from { transform: scale(1.12); opacity: 0.6; }
  to { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo { animation: none; transform: scale(1.02); transition: none; }
}

.hero--light .hero__sub { color: var(--c-charcoal); }
.hero--light .eyebrow { color: var(--c-gold-text); }
.hero--light .hero__scroll { color: var(--c-charcoal); }
.hero--light .hero__scroll-line { background: rgba(17,17,17,0.25); }
.hero--light .hero__content {
  text-shadow: 0 1px 24px rgba(248,248,246,0.6);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-2xl);
}

.hero .eyebrow { color: var(--c-gold); margin-bottom: var(--space-md); }

.hero__headline { display: block; }
.hero__headline .line {
  display: block;
  font-size: var(--fs-hero);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

.hero__sub {
  margin-top: var(--space-md);
  max-width: 34rem;
  font-size: var(--fs-lead);
  color: rgba(248, 248, 246, 0.82);
  font-weight: 300;
}

.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--container-pad);
  z-index: 1;
  display: none;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(248, 248, 246, 0.7);
}
@media (min-width: 768px) { .hero__scroll { display: inline-flex; } }
.hero__scroll-line {
  width: 1px; height: 2.5rem;
  background: rgba(248, 248, 246, 0.35);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%; left: 0; right: 0;
  height: 100%;
  background: var(--c-gold);
  animation: scrollLine 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; top: 0; }
}

/* Page (non-hero) headers — About / Contact / Catalogue / Product */
.page-header {
  position: relative;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-xl);
  background: var(--c-bg-muted);
  overflow: hidden;
}
.page-header--slim { padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-md); }
.page-header--slim .page-header__breadcrumb { margin-bottom: 0; }

.page-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--space-md);
}
.page-header__breadcrumb a:hover { color: var(--c-gold); }
.page-header h1 { max-width: 44rem; }
.page-header p.text-lead { max-width: 38rem; margin-top: var(--space-md); }


/* ==========================================================================
   Art Placeholder
   Editorial stand-in imagery until real studio photography is supplied.
   Tonal gradients + fine line-art + grain, in-palette, never generic grey boxes.
   ========================================================================== */

.art-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  color: var(--c-ink);
}

.art-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.art-placeholder__glyph {
  position: relative;
  width: 42%;
  max-width: 15rem;
  opacity: 0.9;
  color: currentColor;
}
.art-placeholder__glyph svg { width: 100%; height: 100%; }

.art-placeholder__caption {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.85em;
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-charcoal);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.art-placeholder__caption::before {
  content: "";
  width: 0.4em; height: 0.4em;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
}

/* Tonal variants */
.art-placeholder--ivory { background: linear-gradient(155deg, #FDFDFC 0%, #F4F1EC 55%, #E9E3D6 100%); }
.art-placeholder--sand { background: linear-gradient(155deg, #F4F1EC 0%, #E9E1CF 55%, #D8CBAE 100%); }
.art-placeholder--charcoal { background: linear-gradient(155deg, #3A3A38 0%, #2E2E2E 55%, #1B1B1A 100%); color: var(--c-ivory); }
.art-placeholder--ink { background: linear-gradient(160deg, #262624 0%, #111111 60%, #000000 100%); color: var(--c-ivory); }
.art-placeholder--gold-wash { background: linear-gradient(150deg, #F4F1EC 0%, #E7D3AE 60%, #C9A96A 130%); }

.art-placeholder--ink .art-placeholder__caption,
.art-placeholder--charcoal .art-placeholder__caption {
  background: rgba(17, 17, 17, 0.55);
  color: var(--c-ivory);
}

/* Aspect ratios */
.art-placeholder--square { aspect-ratio: 1 / 1; }
.art-placeholder--portrait { aspect-ratio: 3 / 4; }
.art-placeholder--wide { aspect-ratio: 16 / 10; }
.art-placeholder--ultra { aspect-ratio: 21 / 9; }
.art-placeholder--tall { aspect-ratio: 2 / 3; }
.art-placeholder--fill { position: absolute; inset: 0; aspect-ratio: auto; }

/* Reveal-friendly image frame used across cards */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.media-frame .art-placeholder { width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-luxury); }
.media-frame:hover .art-placeholder { transform: scale(1.045); }

/* Real product photography. Catalog shots come on white, so frames with a
   fixed aspect ratio letterbox them (object-fit: contain) over a warm
   neutral field instead of crop-zooming long equipment out of frame. */
.media-frame .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FBFAF8;
  padding: 6%;
  transition: transform var(--dur-slow) var(--ease-luxury);
}
.media-frame:hover .photo { transform: scale(1.045); }
.media-frame--cover .photo { object-fit: cover; padding: 0; }

/* Masonry tiles keep each photo's natural ratio */
.masonry .media-frame .photo {
  position: static;
  height: auto;
  padding: 0;
  background: #FBFAF8;
}


/* ==========================================================================
   Home sections
   ========================================================================== */

/* ---- Why cards ---- */
.why-grid {
  display: grid;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

.why-card {
  background: var(--c-bg);
  padding: var(--space-lg) var(--space-md);
  transition: background var(--dur-base) var(--ease-luxury);
}
.why-card:hover { background: var(--c-bg-muted); }
.why-card__icon {
  width: 2.75rem; height: 2.75rem;
  color: var(--c-gold);
  margin-bottom: var(--space-md);
}
.why-card__icon svg { width: 100%; height: 100%; stroke-width: 1.1; }
.why-card h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; margin-bottom: 0.6rem; }
.why-card p { font-size: var(--fs-small); color: var(--c-text-muted); }

/* ---- Category cards ---- */
.category-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }

.category-card { display: block; group: card; }
.category-card .media-frame { aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); }
.category-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.category-card__title h3 { font-size: var(--fs-h3); }
.category-card__title svg {
  width: 1.5rem; height: 1.5rem;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-luxury);
}
.category-card:hover .category-card__title svg { transform: translate(4px, -4px); }
.category-card p { margin-top: 0.35rem; color: var(--c-text-muted); font-size: var(--fs-small); }

.categories-footer {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

/* ---- Customisation ---- */
.customisation-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) { .customisation-layout { grid-template-columns: 1fr 1fr; } }
.customisation-layout .media-frame { aspect-ratio: 4/5; }
.customisation-copy p { margin-top: var(--space-sm); color: var(--c-text-soft); }
.customisation-options {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.customisation-option h4 {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-gold-text);
  margin-bottom: 0.4rem;
}
.customisation-option p { font-size: var(--fs-small); color: var(--c-text-muted); }
.customisation-copy .btn { margin-top: var(--space-lg); }

.customisation-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-sm);
}
.customisation-gallery .media-frame:first-child { grid-row: span 2; aspect-ratio: 3/4; }
.customisation-gallery .media-frame:nth-child(2) { aspect-ratio: 1/1; }
.customisation-gallery .media-frame:nth-child(3) { aspect-ratio: 1/1; }

/* ---- Designed for ---- */
.designed-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .designed-grid { grid-template-columns: repeat(3, 1fr); } }
.designed-card {
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-luxury), transform var(--dur-base) var(--ease-luxury), box-shadow var(--dur-base) var(--ease-luxury);
}
.designed-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.designed-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--c-gold-text);
  margin-bottom: var(--space-sm);
}
.designed-card h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; margin-bottom: 0.5rem; }
.designed-card p { font-size: var(--fs-small); color: var(--c-text-muted); }

/* ---- Why choose / timeline ---- */
.timeline { position: relative; margin-top: var(--space-xl); }
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0.5rem;
  width: 1px;
  background: var(--c-border-strong);
}
@media (min-width: 768px) { .timeline::before { left: 50%; margin-left: -0.5px; } }

.timeline-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: var(--space-xl);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0.15rem; top: 0.35rem;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 5px var(--c-bg);
}
.timeline-item h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; margin-bottom: 0.5rem; }
.timeline-item p { color: var(--c-text-muted); max-width: 34rem; }

@media (min-width: 768px) {
  .timeline-item { width: calc(50% - 2.5rem); padding-left: 2.5rem; padding-bottom: var(--space-xl); }
  .timeline-item::before { left: -2.85rem; }
  .timeline-item:nth-child(odd) { margin-left: 0; text-align: left; }
  .timeline-item:nth-child(even) { margin-left: calc(50% + 2.5rem); }
  .timeline-item:nth-child(even)::before { left: -2.85rem; }
}

/* ---- Gallery masonry ---- */
.masonry {
  columns: 1;
  column-gap: var(--space-sm);
}
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry .media-frame {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  cursor: pointer;
}

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  padding: var(--space-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.testimonial-card__quote-mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--c-gold);
  margin-bottom: var(--space-sm);
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
  flex: 1;
}
.testimonial-card footer { margin-top: var(--space-md); }
.testimonial-card cite { font-style: normal; font-weight: 600; display: block; font-size: var(--fs-small); }
.testimonial-card .role { font-size: 0.8rem; color: var(--c-text-muted); }

/* ---- FAQ accordion ---- */
.faq-list { max-width: var(--container-narrow); margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
}
.faq-item__icon {
  position: relative;
  width: 1.1rem; height: 1.1rem;
  flex-shrink: 0;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--c-ink);
  transition: transform var(--dur-base) var(--ease-luxury), opacity var(--dur-base) var(--ease-luxury);
}
.faq-item__icon::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.faq-item__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.faq-item[data-open="true"] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }

.faq-item__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-base) var(--ease-luxury);
}
.faq-item__panel-inner { padding-bottom: var(--space-md); max-width: 42rem; color: var(--c-text-muted); }

/* ---- Final CTA ---- */
.final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.final-cta__inner { position: relative; z-index: 1; max-width: 40rem; margin-inline: auto; }
.final-cta h2 { margin-bottom: var(--space-sm); }
.final-cta p { color: rgba(248, 248, 246, 0.75); margin-bottom: var(--space-lg); }


/* ==========================================================================
   Forms
   ========================================================================== */

.form-field { margin-bottom: var(--space-md); }
.form-row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.form-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 0.6rem;
}
.form-field label .req { color: var(--c-gold-text); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85em 0;
  border-bottom: 1px solid var(--c-border-strong);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-out);
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A756C' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 1.1em; padding-right: 1.5em; }
.form-field textarea { resize: vertical; min-height: 8rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--c-gold);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--c-text-muted); opacity: 0.7; }

.form-note { font-size: 0.75rem; color: var(--c-text-muted); margin-top: var(--space-xs); }

.form-success {
  display: none;
  padding: var(--space-lg);
  background: var(--c-bg-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.form-success h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; margin-bottom: 0.5rem; }
.form-success p { color: var(--c-text-muted); }
.form-success svg { width: 2.5rem; height: 2.5rem; color: var(--c-gold); margin: 0 auto var(--space-sm); }

form.is-success .form-fields { display: none; }
form.is-success .form-success { display: block; }

.contact-form-error {
  display: none;
  font-size: 0.8rem;
  color: #B23A2E;
  margin-top: 0.4rem;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #B23A2E; }
.form-field.has-error .contact-form-error { display: block; }


/* ==========================================================================
   Product / Category detail page
   ========================================================================== */

.product-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .product-layout { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.product-gallery__main {
  aspect-ratio: 4/3.2;
  margin-bottom: var(--space-sm);
  cursor: zoom-in;
}
.product-gallery__main .art-placeholder { transition: transform var(--dur-slow) var(--ease-out); }
.product-gallery__main:hover .art-placeholder { transform: scale(1.12); }

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}
.product-gallery__thumbs button {
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.product-gallery__thumbs button[aria-current="true"] { border-color: var(--c-gold); }
.product-gallery__thumbs .art-placeholder { width: 100%; height: 100%; }

.product-info__cat { margin-bottom: var(--space-sm); }
.product-info h1 { margin-bottom: var(--space-xs); }
.product-info .tagline { font-size: var(--fs-lead); color: var(--c-text-soft); margin-bottom: var(--space-md); }
.product-info .price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-lg);
}
.product-info .price small { font-family: var(--font-body); font-size: var(--fs-small); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); display: block; margin-bottom: 0.25rem; }
.product-info .overview { color: var(--c-text-soft); margin-bottom: var(--space-lg); }

.product-info__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }

.swatch-group { margin-bottom: var(--space-lg); }
.swatch-group h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-text-muted); margin-bottom: 0.75rem; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.35rem 0.35rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  cursor: default;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.swatch:hover { border-color: var(--c-border-strong); }
.swatch__dot { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
.spec-table tr { border-bottom: 1px solid var(--c-border); }
.spec-table th, .spec-table td { text-align: left; padding: 0.85rem 0; vertical-align: top; }
.spec-table th { width: 40%; font-weight: 500; color: var(--c-text-muted); font-size: var(--fs-small); }
.spec-table td { font-size: var(--fs-small); font-weight: 500; }

.product-downloads { display: flex; flex-direction: column; gap: 0.75rem; margin-top: var(--space-sm); }
.product-download {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.product-download:hover { border-color: var(--c-gold); background: var(--c-bg-muted); }
.product-download svg { width: 1.25rem; height: 1.25rem; color: var(--c-gold); flex-shrink: 0; }

.product-tabs { margin-top: var(--space-2xl); }
.product-tabs__nav { display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--c-border); margin-bottom: var(--space-lg); overflow-x: auto; }
.product-tabs__btn {
  padding-bottom: 0.9rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.product-tabs__btn[aria-selected="true"] { color: var(--c-ink); border-color: var(--c-gold); }
.product-tabs__panel { display: none; }
.product-tabs__panel[data-active="true"] { display: block; }

.related-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* Accessories collection grid */
.accessory-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .accessory-grid { grid-template-columns: repeat(3, 1fr); } }
.accessory-card .media-frame { aspect-ratio: 1/1; margin-bottom: var(--space-sm); }
.accessory-card h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; }
.accessory-card p { font-size: var(--fs-small); color: var(--c-text-muted); margin-top: 0.3rem; }
.accessory-card .price { margin-top: 0.5rem; font-weight: 600; color: var(--c-gold-text); font-size: var(--fs-small); }

.quote-note {
  align-self: center;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Complete range grid */
.series-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .series-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .series-grid { grid-template-columns: repeat(4, 1fr); } }

.series-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-luxury), box-shadow var(--dur-base) var(--ease-luxury), transform var(--dur-base) var(--ease-luxury);
}
.series-card:hover {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.series-card .media-frame {
  aspect-ratio: 4/3;
  border-radius: 0;
}
.series-card__body {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.series-card__ref {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.series-card__body h3,
.series-card__body h4 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
}
.accessory-card h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; }
.series-card__dims {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  flex: 1;
}
.series-card__body .icon-link { font-size: 0.6875rem; margin-top: 0.5rem; }

.accessory-card__cta { font-size: 0.6875rem; margin-top: 0.6rem; display: inline-flex; }
.accessory-card .series-card__ref { margin-top: 0.1rem; }

/* ==========================================================================
   Collection grid — the full catalogue page (all categories, no h-scroll)
   ========================================================================== */
.collection-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .collection-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .collection-grid { grid-template-columns: repeat(4, 1fr); } }

.collection-card { display: flex; flex-direction: column; }
.collection-card .media-frame {
  aspect-ratio: 4/5;
  margin-bottom: var(--space-sm);
}
.collection-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.collection-card__title h3 { font-size: var(--fs-h4); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.collection-card__title svg {
  width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--c-text-muted);
  transition: transform var(--dur-base) var(--ease-luxury), color var(--dur-base) var(--ease-luxury);
}
.collection-card:hover .collection-card__title svg { transform: translate(3px, -3px); color: var(--c-gold-text); }
.collection-card p { margin-top: 0.3rem; color: var(--c-text-muted); font-size: var(--fs-small); }
.collection-card__meta {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-text);
}

/* Grid section rhythm on the catalogue + category pages */
.grid-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--space-sm);
}
.grid-hint__sep { color: var(--c-gold-text); font-weight: 400; }
.grid-hint::after { content: ""; width: 3rem; height: 1px; background: var(--c-border-strong); }

/* Accessory category page grid: card with contain-fit product photo */
.item-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .item-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .item-grid { grid-template-columns: repeat(4, 1fr); } }

/* Accessory group anchor nav (page header) */
.group-nav {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.group-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.45em 1.1em;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.group-nav a:hover { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); }

/* Breadcrumb-adjacent quote banner */
.quote-banner {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--c-bg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
}
.quote-banner p { max-width: 30rem; }


/* ==========================================================================
   About / Contact / Lightbox / 404 / Map
   ========================================================================== */

.about-lead {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.about-lead p { margin-top: var(--space-md); color: var(--c-text-soft); }
.about-lead p + p { margin-top: var(--space-sm); }

.pillar-list { margin-top: var(--space-2xl); display: flex; flex-direction: column; }
.pillar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--c-border);
}
.pillar:last-child { border-bottom: 1px solid var(--c-border); }
@media (min-width: 768px) { .pillar { grid-template-columns: 12rem 1fr; align-items: baseline; gap: var(--space-lg); } }
.pillar__num { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--c-gold-text); }
.pillar h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.pillar p { color: var(--c-text-muted); max-width: 38rem; }

.about-closing { text-align: center; max-width: var(--container-narrow); margin-inline: auto; }
.about-closing p { margin-top: var(--space-md); color: rgba(248,248,246,0.75); }

/* Contact */
.contact-layout {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .contact-layout { grid-template-columns: 1fr 1fr; } }

.contact-info-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); }
.contact-info-item h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-text-muted); margin-bottom: 0.4rem; }
.contact-info-item p, .contact-info-item a { font-size: var(--fs-body); }
.contact-info-item a:hover { color: var(--c-gold); }

.map-frame {
  margin-top: var(--space-lg);
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.map-frame__pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  width: 2.5rem; height: 2.5rem;
  color: var(--c-gold);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}

/* Lightbox (gallery) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(17, 17, 17, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-luxury), visibility var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__frame { width: min(70rem, 100%); aspect-ratio: 16/10; }
.lightbox__close {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ivory);
  border: 1px solid rgba(248,248,246,0.25);
  border-radius: 50%;
}
.lightbox__close svg { width: 1.1rem; height: 1.1rem; }
.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ivory);
  border: 1px solid rgba(248,248,246,0.25);
  border-radius: 50%;
}
.lightbox__nav svg { width: 1.1rem; height: 1.1rem; }
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }

/* 404 */
.not-found {
  min-height: 70svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-3xl);
}
.not-found .digits {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 6vw, 9rem);
  color: var(--c-border-strong);
  line-height: 1;
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   Animations — luxury easing, scroll reveal, parallax, preloader
   ========================================================================== */

/* Reveal-on-scroll is a progressive enhancement: content is fully visible
   by default so it never depends on JavaScript running. Only once the
   early head script confirms JS is active (.js on <html>) do elements
   start in a hidden state for the IntersectionObserver in main.js to
   reveal — see the anti-pattern this avoids: invisible-by-default
   below-the-fold content for no-JS users / crawlers. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-luxury), transform var(--dur-reveal) var(--ease-luxury);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal="scale"].is-visible { transform: scale(1); }

.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-luxury), transform var(--dur-slow) var(--ease-luxury);
}
.js [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
.js [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; }
.js [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; }
.js [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; }
.js [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 360ms; }
.js [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

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

/* Hero headline line reveal */
.hero__headline .line {
  overflow: hidden;
}
.hero__headline .line span {
  display: inline-block;
  transform: translateY(110%);
  animation: lineUp 1s var(--ease-luxury) forwards;
  animation-delay: var(--line-delay, 0ms);
}
@keyframes lineUp {
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__headline .line span { animation: none; transform: none; }
}

/* Preloader — only shown once .js confirms JS is active, so a no-JS
   visitor never gets stuck behind an overlay that nothing will dismiss. */
.preloader { display: none; }
.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 700ms var(--ease-luxury), visibility 700ms;
}
.preloader svg { width: 8rem; height: auto; color: var(--c-ink); opacity: 0; animation: preloaderFade 900ms var(--ease-out) 150ms forwards; }
.preloader__bar { position: absolute; bottom: 38%; left: 50%; transform: translateX(-50%); width: 8rem; height: 1px; background: var(--c-border-strong); overflow: hidden; }
.preloader__bar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  animation: preloaderBar 1100ms var(--ease-luxury) 150ms forwards;
}
@keyframes preloaderFade { to { opacity: 1; } }
@keyframes preloaderBar { to { transform: scaleX(1); } }

body.is-loaded .preloader { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .js .preloader { display: none; }
}

/* Cursor affordance for anything interactive inside custom components */
.category-card, .accessory-card, .masonry .media-frame, [data-lightbox] { cursor: pointer; }


/* ==========================================================================
   "O MOVIMENTO" — cinematic experience layer
   Scroll-storytelling homepage, living gradients, chapter system.
   ========================================================================== */

/* ---- Living gradient backdrop ---- */
.living {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.living::before, .living::after {
  content: "";
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.living::before {
  background: radial-gradient(circle, #EFD9C0 0%, transparent 65%);
  top: -20vmax; left: -12vmax;
  animation: drift1 26s ease-in-out infinite alternate;
}
.living::after {
  background: radial-gradient(circle, #E9CFC7 0%, transparent 65%);
  bottom: -24vmax; right: -14vmax;
  animation: drift2 32s ease-in-out infinite alternate;
}
.living--dark::before { background: radial-gradient(circle, rgba(201,169,106,0.28) 0%, transparent 65%); }
.living--dark::after { background: radial-gradient(circle, rgba(233,207,199,0.14) 0%, transparent 65%); }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vmax, 7vmax) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-8vmax, -6vmax) scale(0.95); } }
@media (prefers-reduced-motion: reduce) {
  .living::before, .living::after { animation: none; }
}

/* ---- Chapter rail (fixed narrative index, desktop) ---- */
.chapter-rail {
  position: fixed;
  right: clamp(1rem, 2vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--z-header) - 2);
  display: none;
  flex-direction: column;
  gap: 1.05rem;
  align-items: flex-end;
}
@media (min-width: 1100px) { .js .chapter-rail { display: flex; } }
.chapter-rail a {
  display: block;
  position: relative;
  padding: 0.2rem;
  line-height: 0;
}
.chapter-rail__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-border-strong);
  transition: transform var(--dur-base) var(--ease-luxury), background-color var(--dur-base) var(--ease-luxury);
}
.chapter-rail a:hover .chapter-rail__dot { background: var(--c-charcoal); }
.chapter-rail a.is-active .chapter-rail__dot {
  background: var(--c-ink);
  transform: scale(1.7);
}
.chapter-rail__name {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-luxury), transform var(--dur-base) var(--ease-luxury);
}
.chapter-rail a:hover .chapter-rail__name {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---- Prologue ---- */
.prologue {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-sand);
  color: var(--c-ink);
}
.prologue__media { position: absolute; inset: 0; }
.prologue__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,241,236,0.25) 0%, rgba(244,241,236,0) 30%, rgba(244,241,236,0.66) 90%);
}
.prologue__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: calc(var(--header-h) + var(--space-md)) var(--space-xl);
}
.prologue__eyebrow {
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-gold-text);
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.prologue__eyebrow::after {
  content: "";
  width: 3rem; height: 1px;
  background: currentColor;
  animation: breatheLine 4s var(--ease-in-out) infinite;
  transform-origin: left;
}
@keyframes breatheLine { 0%,100% { transform: scaleX(0.4); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } }
.prologue__headline .line {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.85rem, 1.7rem + 6.9vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.prologue__headline .line em {
  font-style: italic;
  color: var(--c-gold-text);
}
.prologue__headline .line > span { display: inline-block; }
.prologue__sub {
  margin-top: var(--space-md);
  max-width: 32rem;
  font-size: var(--fs-lead);
  color: var(--c-charcoal);
}
.prologue__benefits {
  list-style: none;
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  letter-spacing: 0.04em;
  color: var(--c-charcoal);
}
.prologue__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.prologue__benefits li::before {
  content: "\2713";
  color: var(--c-gold-text);
  font-size: 0.9em;
}
.prologue__actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.prologue__proof {
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
}
.prologue__stars {
  color: var(--c-gold);
  font-size: 0.82em;
  letter-spacing: 0.1em;
}
.prologue__rating { color: var(--c-charcoal); font-weight: 500; }
.prologue__proof-sep { opacity: 0.45; }
@media (max-width: 560px) {
  .prologue__benefits { margin-top: var(--space-sm); gap: 0.4rem 1.25rem; }
  .prologue__actions { margin-top: var(--space-md); }
  .prologue__proof { margin-top: var(--space-sm); }
}

/* ---- Manifesto ---- */
.manifesto {
  position: relative;
  padding-block: var(--space-3xl);
  overflow: hidden;
}
.manifesto__words {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.4rem, 2rem + 9vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.manifesto__words .word {
  display: block;
  overflow: hidden;
}
.manifesto__words .word:nth-child(2) { margin-left: clamp(2rem, 12vw, 14rem); font-style: italic; color: var(--c-gold-text); }
.manifesto__words .word:nth-child(3) { margin-left: clamp(1rem, 5vw, 6rem); -webkit-text-stroke: 1.5px var(--c-ink); color: transparent; }
.manifesto__lead {
  margin-top: var(--space-xl);
  max-width: 34rem;
  margin-left: auto;
  font-size: var(--fs-lead);
  color: var(--c-text-soft);
}
.manifesto__index {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--c-border);
}
.manifesto__row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--c-border);
  align-items: baseline;
  transition: padding-left var(--dur-base) var(--ease-luxury), background var(--dur-base) var(--ease-luxury);
}
@media (min-width: 768px) { .manifesto__row { grid-template-columns: 6rem 18rem 1fr; } }
.manifesto__row:hover { padding-left: var(--space-sm); background: var(--c-bg-muted); }
.manifesto__row .num { font-family: var(--font-display); color: var(--c-gold-text); font-size: var(--fs-h3); }
.manifesto__row h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); }
.manifesto__row p { color: var(--c-text-muted); font-size: var(--fs-small); }

/* ---- Chapters ---- */
.chapter {
  position: relative;
  padding-block: var(--space-3xl);
  overflow: clip;
}
.chapter--muted { background: var(--c-bg-muted); }
.chapter__num {
  position: absolute;
  top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 30rem);
  line-height: 0.8;
  -webkit-text-stroke: 1.5px var(--c-border-strong);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.chapter--even .chapter__num { right: -0.05em; }
.chapter--odd .chapter__num { left: -0.05em; }
.chapter__head {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: var(--space-xl);
}
@media (min-width: 960px) {
  .chapter__head { grid-template-columns: 7fr 5fr; }
  .chapter--odd .chapter__head { grid-template-columns: 5fr 7fr; }
  .chapter--odd .chapter__head > .chapter__media { order: 2; }
}
.chapter__kicker {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: var(--space-sm);
}
.chapter__kicker .roman {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--c-gold-text);
}
.chapter__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.chapter__tagline {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--c-gold-text);
}
.chapter__desc { margin-top: var(--space-sm); max-width: 30rem; color: var(--c-text-soft); }
.chapter__cta { margin-top: var(--space-md); }
.chapter__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3.4;
}
.chapter__media .photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #FBFAF8;
  padding: 5%;
}
/* blueprint-style dimension annotation over the photo */
.chapter__dim {
  position: absolute;
  left: 1.1rem; bottom: 1rem;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
}
.chapter__dim::before { content: ""; width: 2rem; height: 1px; background: var(--c-gold); }

/* Product ranges are shown as full grids (series-grid / item-grid /
   collection-grid in product.css) — no horizontal scrolling anywhere. */

/* ---- Matter (material bands) ---- */
.matter { padding-block: var(--space-3xl); background: var(--c-ink); color: var(--c-ivory); position: relative; overflow: hidden; }
.matter .section-head h2 { color: var(--c-ivory); }
.matter .section-head p { color: rgba(248,248,246,0.7); }
.matter__bands { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-xl); }
.matter__band {
  position: relative;
  display: block;
  height: clamp(7rem, 16vh, 10rem);
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: height 650ms var(--ease-luxury);
}
.matter__band:hover, .matter__band:focus-visible { height: clamp(14rem, 38vh, 22rem); }
.matter__band .photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-luxury);
}
.matter__band:hover .photo { transform: scale(1.06); }
.matter__band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.1) 60%);
}
.matter__band-label {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: 1.2rem;
  z-index: 2;
  color: var(--c-ivory);
}
.matter__band-label .big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 4rem);
  line-height: 1;
  display: block;
}
.matter__band-label .sub {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  color: rgba(248,248,246,0.75);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-luxury) 120ms, transform 500ms var(--ease-luxury) 120ms;
}
.matter__band:hover .matter__band-label .sub { opacity: 1; transform: translateY(0); }

/* ---- Contexts ticker ---- */
.ticker {
  padding-block: var(--space-xl);
  overflow: hidden;
  border-block: 1px solid var(--c-border);
  background: var(--c-bg);
}
.ticker__inner {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: tickerMove 46s linear infinite;
}
.ticker:hover .ticker__inner { animation-play-state: paused; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__inner { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
.ticker__item {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 3.4vw, 4.6rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
}
.ticker__item::after { content: "·"; color: var(--c-gold); }

/* ---- Giant quotes ---- */
.quotes { padding-block: var(--space-3xl); background: var(--c-bg-muted); overflow: hidden; }
.quotes__strip {
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--container-pad);
  margin-inline: calc(-1 * var(--container-pad));
}
.quotes__strip::-webkit-scrollbar { display: none; }
.quote-slide {
  flex: 0 0 min(52rem, 88vw);
  scroll-snap-align: center;
}
.quote-slide blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.quote-slide blockquote::before { content: "“"; color: var(--c-gold); }
.quote-slide blockquote::after { content: "”"; color: var(--c-gold); }
.quote-slide footer { margin-top: var(--space-md); }
.quote-slide cite { font-style: normal; font-weight: 600; font-size: var(--fs-small); display: block; }
.quote-slide .role { font-size: 0.8rem; color: var(--c-text-muted); }

/* ---- Epilogue ---- */
.epilogue {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  background: var(--c-ink);
  color: var(--c-ivory);
  overflow: hidden;
  text-align: center;
}
.epilogue__content { position: relative; z-index: 1; width: 100%; }
.epilogue h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-ivory);
  font-size: clamp(2.8rem, 1.8rem + 6vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
}
.epilogue h2 em { font-style: italic; color: var(--c-gold); }
.epilogue p { margin-top: var(--space-md); color: rgba(248,248,246,0.72); max-width: 34rem; margin-inline: auto; }
.epilogue .btn { margin-top: var(--space-xl); }

/* ---- Scroll-scrub primitives ---- */
.js [data-speed] { will-change: transform; }
.js [data-zoom] .photo, .js [data-zoom] img { will-change: transform; }

/* Magnetic buttons */
.btn--magnetic { transition: transform 300ms var(--ease-luxury), background-color var(--dur-base) var(--ease-luxury), color var(--dur-base) var(--ease-luxury), border-color var(--dur-base) var(--ease-luxury), box-shadow var(--dur-base) var(--ease-luxury); }

@media (prefers-reduced-motion: reduce) {
  .matter__band { transition: none; }
  .chapter-rail__dot, .chapter-rail__name { transition: none; }
}