/* ==========================================================================
   ESSARDAS GROUP — LUXURY WORLD (/luxury)
   Dark, gold, cinematic. Pinned horizontal maison scroller (§9.2).
   ========================================================================== */

.lux-hero {
  position: relative;
  min-height: clamp(60vh, 78vh, 860px);
  display: flex; align-items: flex-end;
  background: var(--obsidian);
  color: var(--chalk);
  overflow: hidden; isolation: isolate;
  padding-bottom: var(--section-pad);
}
.lux-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 80% at 80% 0%, color-mix(in srgb, var(--champagne) 18%, transparent), transparent 55%),
    linear-gradient(180deg, #0A1524, var(--midnight));
}
.lux-hero .container { padding-top: var(--header-h); }
.lux-hero .eyebrow { color: var(--champagne); }
.lux-hero h1 { font-size: var(--fs-display); line-height: 0.98; margin-top: var(--space-3); max-width: 18ch; }

/* heritage micro-line */
.lux-microline { background: var(--obsidian); color: var(--chalk-soft); text-align: center; border-top: 1px solid color-mix(in srgb, var(--champagne) 16%, transparent); }
.lux-microline p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); max-width: 40ch; margin-inline: auto; }

/* ---- pinned horizontal maison scroller -------------------------------- */
.maison-scroller { background: var(--obsidian); color: var(--chalk); overflow: hidden; }
.maison-scroller .section-head { padding-inline: var(--gutter); max-width: var(--maxw); margin-inline: auto; text-align: center; }
.maison-scroller .eyebrow { color: var(--champagne); }
.scroller-viewport { position: relative; margin-top: var(--space-6); }
.scroller-track {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--gutter);
  /* native fallback: horizontal scroll */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroller-track::-webkit-scrollbar { display: none; }
.maison-tile {
  position: relative;
  flex: 0 0 clamp(240px, 32vw, 360px);
  aspect-ratio: 3/4;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--champagne) 18%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--champagne) 8%, transparent), transparent 60%),
    linear-gradient(180deg, #101E33, #0A1424);
  color: var(--chalk);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-luxe), transform var(--dur-base) var(--ease-luxe);
}
.maison-tile__logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem) 1rem 0;
  min-height: 42%;
}
.maison-tile__logo {
  max-width: 72%;
  max-height: clamp(48px, 8vw, 72px);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity var(--dur-base) var(--ease-luxe), transform var(--dur-base) var(--ease-luxe);
}
.maison-tile:hover .maison-tile__logo { opacity: 1; transform: scale(1.04); }
.maison-tile__logo--missing {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--chalk-soft);
  text-align: center;
  line-height: 1;
}
.maison-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--champagne); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.maison-tile:hover { border-color: var(--champagne); transform: translateY(-4px); }
.maison-tile:hover::after { transform: scaleX(1); }
.maison-tile__name { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.maison-tile__cat { font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne); margin-top: 0.6rem; }
.maison-tile__more { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-soft); margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 0.5rem; }
.maison-tile__more::after { content: "↗"; color: var(--champagne); }
.scroller-hint { padding-inline: var(--gutter); margin-top: var(--space-4); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }
.maison-scroller.is-pinned .scroller-hint { display: none; }

/* When GSAP pin is active, the track is driven by transform (JS sets width) */
.maison-scroller.is-pinned .scroller-track { overflow: visible; }

/* ---- bespoke band ----------------------------------------------------- */
.bespoke-band { background: var(--bone); color: var(--ink); text-align: center; }
.bespoke-band__quote { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.28; font-weight: 400; max-width: 36ch; margin-inline: auto; }
.bespoke-band__quote::before { content: "“"; color: var(--champagne); }
.bespoke-band__quote::after { content: "”"; color: var(--champagne); }
.bespoke-band .btn { margin-top: var(--space-7); }

/* ---- in-stock + appointment ------------------------------------------- */
.lux-instock { background: var(--bone); color: var(--ink); }
.lux-appointment { background: var(--obsidian); color: var(--chalk); text-align: center; }
.lux-appointment h2 { font-size: var(--fs-h1); }
.lux-appointment p { color: var(--chalk-soft); max-width: 40ch; margin: var(--space-4) auto 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); }
.lux-appointment .btn { margin-top: var(--space-6); }

@media (max-width: 520px) {
  .maison-tile { flex-basis: 74vw; }
}