/* ============================================================
   OBJECTS — A Curated Home Living Experience
   Design tokens
   ============================================================ */
:root {
  /* Warm dark neutrals */
  --ink-900: #14100b;
  --ink-850: #181208;
  --ink-800: #1a150f;
  --ink-700: #221b13;
  --ink-600: #2c241a;
  --ink-500: #3a3024;

  /* Warm light / cream */
  --cream-100: #efe9dd;
  --cream-200: #e7e0d1;
  --cream-300: #ddd4c2;

  /* Warm sand — Journey section */
  --sand-100: #d7c6aa;
  --sand-300: #b6a695;

  /* Text */
  --text-bright: #f3eee4;
  --text-soft: #d8cfbf;
  --text-muted: #a99d89;
  --text-dim: #7d735f;
  --text-on-cream: #2a2018;
  --text-on-cream-muted: #6c6151;

  /* Accent — warm bronze/gold */
  --bronze: #b89a6a;
  --bronze-soft: #c9b189;

  /* Lines */
  --line-dark: rgba(240, 233, 220, 0.16);
  --line-light: rgba(40, 32, 24, 0.18);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1320px;
  --gutter: 40px;
}
:root { --ink-850: #181208; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ink-800);
  color: var(--text-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Utility text styles */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--bronze { color: var(--bronze); }

.serif-display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.02em;
}

/* ============================================================
   MOOD PHOTO PLACEHOLDER SYSTEM
   Warm, lamp-lit interior moods built from layered gradients
   + grain. Each variant evokes a different reference photo.
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background-color: #211a12;
  isolation: isolate;
}
.ph::after {
  /* film grain */
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
.ph__label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(243, 238, 228, 0.30);
  text-align: center;
  line-height: 1.9;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}
.ph__label::before {
  content: "";
  display: block;
  width: 26px; height: 26px;
  margin: 0 auto 14px;
  border: 1px solid rgba(243, 238, 228, 0.3);
  border-radius: 50%;
  background:
    linear-gradient(rgba(243,238,228,0.3), rgba(243,238,228,0.3)) center/9px 1px no-repeat,
    linear-gradient(rgba(243,238,228,0.3), rgba(243,238,228,0.3)) center/1px 9px no-repeat;
}

/* Mood variants ------------------------------------------------ */
.ph--livingroom {
  background: #1c1610 url("assets/hero-living-room.png") center/cover no-repeat;
}
.ph--room-dim {
  background: #1a140d url("assets/experience-gather.png") center 30%/cover no-repeat;
}
.ph--room-warm {
  background: #18120c url("assets/experience-curate.png") center 35%/cover no-repeat;
}
.ph--bedroom {
  background: #1d160f url("assets/experience-live.png") center/cover no-repeat;
}
.ph--plants {
  background: #181811 url("assets/experience-breathe.png") center 40%/cover no-repeat;
}
.ph--showroom {
  background: #8d8270 url("assets/exhibition-lobby.png") center/cover no-repeat;
}
.ph--showroom .ph__label { color: rgba(40,32,24,0.4); }
.ph--showroom .ph__label::before {
  border-color: rgba(40,32,24,0.4);
  background:
    linear-gradient(rgba(40,32,24,0.4), rgba(40,32,24,0.4)) center/9px 1px no-repeat,
    linear-gradient(rgba(40,32,24,0.4), rgba(40,32,24,0.4)) center/1px 9px no-repeat;
}
.ph--before {
  background: #9a9ea4 url("assets/before-after-room.png") center/cover no-repeat;
}
.ph--before .ph__label { color: rgba(40,40,44,0.45); }
.ph--before .ph__label::before {
  border-color: rgba(40,40,44,0.45);
  background:
    linear-gradient(rgba(40,40,44,0.45), rgba(40,40,44,0.45)) center/9px 1px no-repeat,
    linear-gradient(rgba(40,40,44,0.45), rgba(40,40,44,0.45)) center/1px 9px no-repeat;
}
.ph--after {
  background: #1f180f url("assets/before-after-room.png") center/cover no-repeat;
}
.ph--dusk {
  background: #2a2230 url("assets/venue-night.png") center/cover no-repeat;
}
.ph--stilllife {
  background: #14100b url("assets/experience-curate.png") center 30%/cover no-repeat;
}

/* Hide placeholder labels now that real imagery is in place */
.ph__label { display: none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(20, 16, 11, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.42em;
  color: var(--text-bright);
  display: flex;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
  /* Never let the flex row compress the wordmark — it must stay legible even
     when the menu is wide. */
  flex-shrink: 0;
}
.brand sup { font-size: 0.42em; letter-spacing: 0; margin-top: 0.1em; }
.brand__logo { height: 34px; width: auto; display: block; transition: height 0.4s ease; }
.site-header.scrolled .brand__logo { height: 30px; }

.main-nav {
  display: flex;
  align-items: center;
  /* Gap tightens as the viewport narrows so a longer menu (multi-word labels
     like "Find Your Perfect Match") still fits on one row before the mobile
     breakpoint takes over at 980px. */
  gap: clamp(14px, 1.7vw, 30px);
}
.main-nav a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.25s;
  /* Labels are phrases — never break them mid-item. */
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronze);
  transition: width 0.3s ease;
}
.main-nav a:hover { color: var(--text-bright); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 18px; }

.btn-app {
  border: 1px solid var(--line-dark);
  background: rgba(243, 238, 228, 0.04);
  color: var(--text-bright);
  padding: 10px 18px;
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.btn-app .l1 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.btn-app .l2 { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.btn-app:hover { background: rgba(243, 238, 228, 0.1); border-color: var(--bronze); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text-bright);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(16, 12, 8, 0.97);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer a {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.mobile-drawer a:hover { color: var(--bronze); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 120px;
  padding-bottom: 0; /* the in-hero countdown carries the bottom rhythm */
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg::before {
  /* darkening for legibility, heavier left */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,11,7,0.92) 0%, rgba(15,11,7,0.62) 42%, rgba(15,11,7,0.30) 100%),
    linear-gradient(0deg, rgba(15,11,7,0.85) 0%, rgba(15,11,7,0) 40%);
  z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(54px, 8vw, 116px);
  line-height: 0.98;
  letter-spacing: 0.14em;
  color: var(--text-bright);
  display: flex;
  align-items: flex-start;
  margin-left: -0.04em;
}
.hero__title sup { font-size: 0.22em; letter-spacing: 0; margin-top: 0.5em; }
/* Cancels .hero__title's -0.04em optical correction, which is tuned for the
   serif wordmark's left side-bearing — an image has none, so without this the
   logo sits a few px left of the tagline below it. Same em basis (font-size
   is inherited), so the two net to zero. */
/* max-width is a percentage of the heading box (which already sits inside the
   wrap's gutters) rather than a vw figure — vw ignores the gutters, so a wide
   wordmark rendered past the content edge and got clipped by .hero's
   overflow:hidden on phones. Capped at 560px so it can't dominate on desktop. */
.hero__logo { display: block; width: auto; height: auto; margin-left: 0.04em; max-width: min(calc(100% - 0.04em), 560px); max-height: clamp(72px, 12vw, 150px); }
.hero__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--text-soft);
  margin-top: 10px;
  letter-spacing: 0.01em;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.meta-item svg { width: 15px; height: 15px; stroke: var(--bronze); fill: none; stroke-width: 1.3; }

.hero__stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
}
.stat {
  padding-right: 38px;
  margin-right: 38px;
  border-right: 1px solid var(--line-dark);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1;
}
.stat__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--cream-100);
  color: var(--text-on-cream);
  border: none;
  padding: 18px 26px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.btn-primary svg { width: 30px; height: 12px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.btn-primary:hover { background: #fff; transform: translateY(-2px); }
.btn-primary--wide { min-width: 0; }

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-cue .mouse {
  width: 16px; height: 24px;
  border: 1px solid var(--text-dim);
  border-radius: 9px;
  position: relative;
}
.scroll-cue .mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 5px;
  width: 2px; height: 5px;
  background: var(--bronze);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollWheel 1.6s ease-in-out infinite;
}
@keyframes scrollWheel { 0%,100% { opacity:1; transform: translate(-50%,0);} 50% { opacity:0.2; transform: translate(-50%,6px);} }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown {
  background: var(--ink-850);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 30px 0;
}
.countdown__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}
.cd-unit {
  text-align: center;
  padding: 0 44px;
  position: relative;
  min-width: 130px;
}
.cd-unit::after {
  content: "";
  position: absolute;
  right: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line-dark);
}
.cd-unit:last-child::after { display: none; }
.cd-unit__num {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-unit__label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Countdown nested at the bottom of the hero: pinned low with margin-top:auto.
   Keeps the original solid bar look (background + borders inherited from the
   base .countdown rule) — this modifier only handles the in-hero positioning. */
.countdown.countdown--hero {
  position: relative;
  width: 100%;
  margin-top: auto;
  z-index: 2; /* above .hero__bg::before (z-index 1) */
}
/* Keep the in-hero countdown as a single centered row WITH dividers through the
   tablet range. The standalone version collapsed to a wrapped, divider-less grid
   at <=980px; here we hold the original centered + divider look, shrinking the
   per-unit padding so the four units still fit on one line. */
@media (max-width: 980px) {
  .countdown.countdown--hero .countdown__inner { flex-wrap: nowrap; gap: 0; }
  .countdown.countdown--hero .cd-unit { min-width: 0; padding: 0 clamp(12px, 3.4vw, 44px); }
  .countdown.countdown--hero .cd-unit:not(:last-child)::after { display: block; }
}
/* Phones: four units + dividers no longer fit on one line, so fall back to the
   evenly-spread, divider-less grid. */
@media (max-width: 560px) {
  .countdown.countdown--hero .countdown__inner { flex-wrap: wrap; gap: 10px 0; }
  .countdown.countdown--hero .cd-unit { min-width: 25%; padding: 10px 0; }
  .countdown.countdown--hero .cd-unit:not(:last-child)::after { display: none; }
  /* The strip lands at the bottom of the hero, exactly where the fixed call /
     WhatsApp buttons rest — on a 375x812 screen the SECONDS unit sat entirely
     behind them on first paint. Keep the four units clear of that corner. */
  .countdown.countdown--hero .countdown__inner { padding-inline-end: 76px; }
}

/* ============================================================
   THE EXPERIENCE
   ============================================================ */
.experience { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.exp-eyebrow {
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
.exp-card {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 34px 30px;
  border-right: 1px solid rgba(243, 238, 228, 0.22);
  overflow: hidden;
}
.exp-card:first-child { border-left: 1px solid rgba(243, 238, 228, 0.22); }
.exp-card:last-child { border-right: 1px solid rgba(243, 238, 228, 0.22); }
.exp-card .ph { position: absolute; inset: 0; z-index: 0; }
.exp-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,13,8,0.55) 0%, rgba(18,13,8,0.35) 45%, rgba(18,13,8,0.7) 100%);
  z-index: 1;
}
.exp-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.exp-card__icon { width: 56px; height: 56px; margin-bottom: 28px; stroke: var(--text-bright); stroke-width: 1; fill: none; }
.exp-card__title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-bright);
  text-transform: uppercase;
}
.exp-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 10px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   CURATED BRANDS
   ============================================================ */
.brands { display: grid; grid-template-columns: 0.92fr 1.08fr; }
.brands__left {
  background: linear-gradient(to right, var(--sand-300) 0%, rgba(182, 166, 149, 0) 100%);
  color: var(--text-on-cream);
  /* darker ground — the same re-tune the Journey section applies over --sand-300.
     The cream-tuned muted colour is only 2.56:1 on this taupe (it was 4.61:1 on
     the old cream panel) and drives the 9px category labels, the most fragile
     type on the page; the cream-tuned border and bronze hover all but vanish on
     it too. These restore 4.62:1 (AA) and a visible outline. Headings already
     pass at 6.73:1 and are left alone. */
  --text-on-cream-muted: #453b30;
  --line-light: rgba(40, 32, 24, 0.28);
  --bronze: #6b4f22;
  padding: 50px var(--gutter) 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brands__left { padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.brands__num {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-on-cream);
}
.brands__title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  margin-top: 4px;
}
.brand-cats {
  display: flex;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.brand-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.brand-cat svg { width: 24px; height: 24px; stroke: var(--text-on-cream); stroke-width: 1.1; fill: none; display: block; }
.brand-cat span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-cream-muted); }
.brands__note { font-size: 13px; color: var(--text-on-cream-muted); margin-top: 26px; }
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  justify-content: space-between;
  background: var(--ink-800);
  color: var(--text-bright);
  border: none;
  padding: 15px 22px;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
  width: fit-content;
}
.btn-dark svg { width: 26px; height: 11px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.btn-dark:hover { background: #000; }
.brands__right { position: relative; min-height: 380px; }
.brands__right .ph { position: absolute; inset: 0; }
.brands__right-mark {
  position: absolute;
  z-index: 3;
  top: 50%; right: 9%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 0.4em;
  color: rgba(243,238,228,0.85);
  display: flex; align-items: flex-start;
}
.brands__right-mark sup { font-size: 0.4em; }

/* Full-bleed variant: the photo spans the whole section (both grid columns) and
   the taupe panel stops being a background of its own — the #b6a695 → transparent
   ramp becomes a scrim over the image, so it fades into the photo instead of into
   the page's dark ink. Text still occupies only column 1, so the layout, padding
   and reveal animation are untouched. Remove `brands--full-bleed` from the
   section in home.blade.php to fall back to the split panel/photo columns. */
.brands--full-bleed .brands__left {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 2;
  background: none;
}
/* z-index 1 makes this a stacking context, keeping the scrim below (::after, 2)
   and the wordmark above it (.brands__right-mark, 3) while the whole column
   still paints under the text, which precedes it in the DOM. */
.brands--full-bleed .brands__right { grid-area: 1 / 1 / 2 / -1; z-index: 1; }
/* Both stops are percentages of the full section width, since the scrim spans
   both columns. --brands-fade-start is how far the taupe holds FULLY opaque
   before it starts dropping out; --brands-fade-end is where it reaches zero.

   The old ramp began at 0%, which left the panel copy on bare photograph: the
   text block spans roughly 16-35% of the width, so it sat on 0.65 tint falling
   to 0.24. Compare .venue__scrim, which does the same job further down the page
   and is still at 0.67 where its text ends. Holding to 38% puts every bit of
   copy on solid colour instead.

   The end stop is measured against this photo's landmarks: the category row
   finishes at 34.7%, a standing figure spans 35.8-38.8%, an empty gap runs
   38.8-48%, and the wall's own OBJECTS signage occupies 42.9-59.8%. Clearing by
   42% therefore lands the whole ramp in that gap — the figure is absorbed into
   the panel rather than bisected, and the signage stays untinted. Re-measure if
   the image is ever swapped. */
.brands--full-bleed { --brands-fade-start: 38%; --brands-fade-end: 42%; }
.brands--full-bleed .brands__right::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, var(--sand-300) var(--brands-fade-start), rgba(182, 166, 149, 0) var(--brands-fade-end));
}
/* Pushes the ramp out to the 0.92fr/1.08fr column seam (0.92/2 = 46%), so the
   tint would end exactly where the cream panel used to. Off by default: 46% runs
   past the wall signage at 42.9% and veils its first two letters. Kept for a
   future image whose right half starts later. Must stay after the rule above to
   win on source order. */
.brands--fade-hard { --brands-fade-end: 46%; }

/* ============================================================
   AI INTERIOR MATCH
   ============================================================ */
.ai-match {
  background: var(--ink-850);
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: stretch;
}
.ai-match__text {
  padding: 70px var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ai-match__title {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.08;
  color: var(--text-bright);
  margin-top: 14px;
}
.ai-match__title em { font-style: italic; }
.ai-match__desc { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-top: 18px; max-width: 260px; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-bright);
  padding: 14px 20px;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  width: fit-content;
  transition: background 0.25s, border-color 0.25s;
}
.btn-outline svg { width: 26px; height: 11px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.btn-outline:hover { background: rgba(243,238,228,0.06); border-color: var(--bronze); }
/* Same outline treatment on a light surface (the Curated Brands cream panel).
   The base rule's near-white text and light border are invisible there, so this
   swaps in the ink-on-cream pair the design tokens already provide. */
.btn-outline--on-cream { border-color: var(--line-light); color: var(--text-on-cream); }
.btn-outline--on-cream:hover { background: rgba(40,32,24,0.06); border-color: var(--bronze); }
/* The hero CTA uses this same outline treatment as the Event Map's "Open in
   App" button, but keeps the hero's own vertical rhythm (the solid button it
   replaced sat 40px below the stats, not 28px). */
.hero .btn-outline { margin-top: 40px; }

/* Before/After slider */
.ba {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
}
.ba__layer { position: absolute; inset: 0; }
.ba__after { z-index: 1; }
.ba__before { z-index: 2; clip-path: inset(0 50% 0 0); }
.ba__tag {
  position: absolute;
  top: 20px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-bright);
  z-index: 4;
  background: rgba(0,0,0,0.4);
  padding: 5px 12px;
  backdrop-filter: blur(4px);
}
.ba__tag--before { left: 20px; }
.ba__tag--after { right: 20px; }
.ba__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(243,238,228,0.9);
  z-index: 5;
  transform: translateX(-50%);
}
.ba__handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(20,16,11,0.7);
  border: 1px solid rgba(243,238,228,0.8);
  backdrop-filter: blur(4px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-bright);
}
.ba__handle svg { width: 18px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ============================================================
   THE VENUE
   ============================================================ */
.venue { position: relative; min-height: 340px; display: flex; align-items: flex-start; overflow: hidden; }
.venue .ph { position: absolute; inset: 0; z-index: 0; }
.venue__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(18,14,16,0.96) 0%, rgba(18,14,16,0.9) 22%, rgba(18,14,16,0.55) 42%, rgba(18,14,16,0.12) 62%, rgba(18,14,16,0) 80%);
}
.venue .wrap {
  position: relative; z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 44px var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.venue__title {
  font-family: var(--serif);
  font-size: 58px;
  font-weight: 500;
  color: var(--text-bright);
  margin-top: 14px;
  line-height: 1;
}
.venue__sub { font-family: var(--serif); font-size: 24px; color: var(--text-soft); margin-top: 4px; }
.venue__desc { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-top: 18px; max-width: 230px; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners {
  background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-300) 100%);
  padding: 30px 0; position: relative;
  /* darker ground — same scoped re-tune as .journey */
  --text-on-cream-muted: #453b30;
  --line-light: rgba(40, 32, 24, 0.28);
}
.partners__eyebrow { text-align: center; color: var(--text-on-cream-muted); margin-bottom: 22px; }
.partners__track-wrap { position: relative; overflow: hidden; margin: 0 60px; }
/* Default: logos fit on one line — center them, no marquee, no edge fade. */
.partners__track { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 64px; width: 100%; }
/* Overflowing: JS clones the set + adds .is-overflowing → scroll. */
.partners.is-overflowing .partners__track-wrap { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners.is-overflowing .partners__track { justify-content: flex-start; width: max-content; animation: marquee 38s linear infinite; }
.partners.is-overflowing.paused .partners__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2a2018;
  /* 0.72 on the sand ground preserves the understated look 0.62 gave on cream */
  opacity: 0.72;
  white-space: nowrap;
  transition: opacity 0.25s;
  cursor: pointer;
  flex-shrink: 0;
}
.partner-logo:hover { opacity: 1; }
.partner-logo.boxed { border: 1.5px solid #2a2018; padding: 5px 12px; font-size: 16px; letter-spacing: 0.1em; font-family: var(--sans); font-weight: 700; }
.partners__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  /* an interactive control, so unlike .rail__node it should read as a raised
     chip against the gradient rather than blend into it */
  background: var(--cream-100);
  box-shadow: 0 3px 10px rgba(40,32,24,0.18);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  color: #2a2018;
}
/* Arrows only make sense while the marquee is scrolling. */
.partners.is-overflowing .partners__arrow { display: flex; }
.partners__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.partners__arrow--left { left: 14px; }
.partners__arrow--right { right: 14px; }

/* ============================================================
   EVENT MAP
   ============================================================ */
.event-map { background: var(--ink-800); padding: 70px 0; }
.event-map__inner { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; align-items: center; }
.event-map__title { font-family: var(--serif); font-size: 42px; font-weight: 500; color: var(--text-bright); margin-top: 14px; }
.event-map__desc { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-top: 16px; max-width: 240px; }
.map-stage {
  position: relative;
  aspect-ratio: 16 / 8.5;
  perspective: 1400px;
}
.map-plane {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55));
}
.map-pin {
  position: absolute;
  z-index: 5;
  width: 30px; height: 38px;
  transform: translate(-50%, -100%);
  animation: pinFloat 3s ease-in-out infinite;
}
.map-pin svg { width: 100%; height: 100%; }
@keyframes pinFloat { 0%,100% { transform: translate(-50%, -100%);} 50% { transform: translate(-50%, -108%);} }

/* ============================================================
   JOURNEY
   ============================================================ */
.journey {
  background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-300) 100%);
  color: var(--text-on-cream); padding: 52px 0 54px; overflow: hidden;
  /* darker ground — re-tune the cream-tuned tokens for this section only */
  --text-on-cream-muted: #453b30;
  --bronze: #6b4f22;
  --bronze-soft: #8a6a33;
  --line-light: rgba(40, 32, 24, 0.28);
}
.journey__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; }
.journey__eyebrow { color: var(--text-on-cream-muted); }
.journey__title { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: 0.01em; color: var(--text-on-cream); margin-top: 12px; }
.journey__title em { font-style: italic; color: var(--bronze); }
.journey__lede { font-size: 13px; line-height: 1.6; color: var(--text-on-cream-muted); max-width: 300px; }

/* refined icon defaults */
.ic { stroke: var(--text-on-cream); stroke-width: 1.15; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Guided rail */
.rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; }
.rail__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
/* connector drawn per step, stopping short of each node — lets the node stay
   transparent so the section gradient shows through it at any viewport height */
.rail__step::after {
  content: ""; position: absolute; top: 26px; height: 1px;
  left: calc(50% + 34px); right: calc(-50% + 34px);
  background: linear-gradient(90deg, var(--bronze-soft), var(--line-light), var(--bronze-soft));
}
.rail__step:last-child::after { display: none; }
.rail__node {
  position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
  background: transparent; border: 1px solid var(--bronze);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.rail__node .ic { width: 27px; height: 27px; display: block; }
.rail__step:hover .rail__node { transform: translateY(-3px); border-color: var(--text-on-cream); }
.rail__badge {
  position: absolute; top: -4px; right: calc(50% - 36px); z-index: 3;
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink-900); color: var(--cream-100);
  font-family: var(--serif); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.rail__ttl { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-top: 18px; color: var(--text-on-cream); }
.rail__desc { font-size: 12px; line-height: 1.5; color: var(--text-on-cream-muted); margin-top: 8px; max-width: 158px; }

/* Download strip */
.journey-dl { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line-light); }
.journey-dl__left { display: flex; align-items: center; gap: 18px; }
/* warm cream rather than pure white — reads as a card on the sand gradient
   instead of a cut-out, and still ~16:1 against the #14100b modules */
.journey-dl__qr {
  width: 70px; height: 70px; background: var(--cream-100); border-radius: 10px; padding: 8px;
  box-shadow: 0 8px 20px rgba(40,32,24,0.22), 0 0 0 1px rgba(40,32,24,0.07);
  flex-shrink: 0;
}
.journey-dl__qr svg { width: 100%; height: 100%; display: block; }
.journey-dl__qr .qr-bg { fill: var(--cream-100); }
.journey-dl__kicker { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: #4d3a1a; font-weight: 500; }
.journey-dl__title { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--text-on-cream); margin-top: 6px; line-height: 1.15; }

.store-badges { display: flex; flex-direction: column; gap: 12px; align-self: center; }
.store-badges--row { flex-direction: row; }
.store-badge {
  display: flex; align-items: center; gap: 12px;
  background: #14100b; color: #fff;
  padding: 11px 18px; border-radius: 10px;
  cursor: pointer; transition: background 0.25s, transform 0.25s;
}
.store-badge:hover { background: #000; transform: translateY(-2px); }
.store-badge svg { width: 24px; height: 24px; flex-shrink: 0; }
.store-badge .sb-small { font-size: 8px; letter-spacing: 0.04em; opacity: 0.8; white-space: nowrap; }
.store-badge .sb-big { font-size: 15px; font-weight: 600; font-family: var(--sans); letter-spacing: 0.01em; line-height: 1.15; white-space: nowrap; }

@media (max-width: 860px) {
  .journey__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .journey__lede { max-width: none; }
}
@media (max-width: 620px) {
  .rail { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .rail__step::after { display: none; }
  .journey-dl { flex-direction: column; align-items: flex-start; gap: 22px; }
  .store-badges--row { width: 100%; }
}

/* ============================================================
   NARRATIVE / CTA
   ============================================================ */
.narrative {
  position: relative;
  padding: 90px 0;
  text-align: center;
  overflow: hidden;
}
.narrative .ph { position: absolute; inset: 0; z-index: 0; }
.narrative__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 90% at 50% 50%, rgba(18,13,8,0.6), rgba(18,13,8,0.92));
}
.narrative .wrap { position: relative; z-index: 2; }
.narrative__title {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.narrative__sub { font-family: var(--serif); font-size: 22px; color: var(--text-soft); margin-top: 16px; line-height: 1.5; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink-900); border-top: 1px solid var(--line-dark); padding: 30px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { font-family: var(--serif); font-size: 20px; letter-spacing: 0.4em; color: var(--text-bright); display: flex; align-items: flex-start; }
.footer-brand sup { font-size: 0.4em; }
.footer-brand__logo { height: 30px; width: auto; display: block; }
/* Two stacked rows: venue/dates above, contact links below. The 34px gap lives
   on the rows, not the column, so the vertical rhythm stays tight. */
.footer-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.footer-meta__row { display: flex; gap: 34px; flex-wrap: wrap; }
.footer-meta a { display: inline-flex; align-items: center; gap: 8px; transition: color 0.25s; }
.footer-meta a:hover { color: var(--bronze-soft); }
/* Contact icons sit slightly dimmer than their label, then warm up together on
   hover — keeps the row reading as text with a mark, not as a button strip. */
.footer-meta a svg { width: 13px; height: 13px; flex-shrink: 0; fill: currentColor; opacity: 0.7; transition: opacity 0.25s; }
.footer-meta a:hover svg { opacity: 1; }
/* The fixed floating Call/WhatsApp buttons (right: 24px, 54px wide → they reach
   ~78px in from the viewport edge) hover over the footer's bottom-right corner,
   right where the social icons land. Reserve just enough space on the right so the
   icons clear them. On wide screens the centered wrap already sits past the buttons,
   so the reserve collapses to 0 and the icons stay flush to the content edge. */
.footer-social { display: flex; gap: 12px; padding-right: max(0px, calc(90px - max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)))); }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color 0.25s, border-color 0.25s;
}
.footer-social a:hover { color: var(--text-bright); border-color: var(--bronze); }
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }
.footer-copy { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 20px; text-align: left; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* The header collapses to the drawer earlier than the page grids below: a
   seven-item menu with multi-word labels ("Find Your Perfect Match") needs more
   room than the 980px breakpoint allows, and squeezing it there crushed the
   wordmark. Below this width the hamburger carries the full menu instead. */
@media (max-width: 1240px) {
  .main-nav, .header-actions .btn-app { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 980px) {
  .main-nav, .header-actions .btn-app { display: none; }
  .hamburger { display: flex; }
  .experience { grid-template-columns: repeat(2, 1fr); }
  .exp-card { border-bottom: 1px solid rgba(0,0,0,0.35); }
  .brands, .ai-match, .event-map__inner, .journey__inner { grid-template-columns: 1fr; }
  .brands__right { min-height: 300px; }
  .ai-match__text, .brands__left { padding-left: var(--gutter); }
  /* Stacked layout: a horizontal fade would run the panel's dark text onto the
     page's dark background (and onto nothing at all in the full-bleed variant,
     whose overlap is undone here), so the taupe stays solid below this width. */
  .brands__left,
  .brands--full-bleed .brands__left { background: var(--sand-300); }
  .brands--full-bleed .brands__left,
  .brands--full-bleed .brands__right { grid-area: auto; }
  .brands--full-bleed .brands__right::after { content: none; }
  .ba { min-height: 320px; }
  .journey__right { justify-content: flex-start; margin-top: 30px; }
  .countdown__inner { flex-wrap: wrap; gap: 10px 0; }
  .cd-unit { min-width: 25%; padding: 10px 0; }
  .cd-unit::after { display: none; }
}
@media (max-width: 620px) {
  :root { --gutter: 22px; }

  /* --- Mobile hero: fit the entire section + countdown into one screen ---
     100vh on phones overshoots the visible viewport (browser chrome), pushing
     the bottom-pinned countdown below the fold. Use svh and reclaim vertical
     space — smaller top padding, tighter gaps, single-row stats, no scroll cue
     — so the content and the counter both sit on-screen on any phone. */
  .hero { min-height: 100svh; padding-top: 88px; }
  .hero__subtitle { margin-top: 8px; }
  .hero__meta { margin-top: 18px; gap: 10px 22px; }
  .hero__stats { flex-wrap: nowrap; gap: 0; margin-top: 20px; }
  .stat { padding-right: 14px; margin-right: 14px; }
  .stat__num { font-size: 30px; }
  .stat__label { letter-spacing: 0.14em; white-space: nowrap; }
  .hero .btn-outline { margin-top: 24px; }
  .scroll-cue { display: none; }
  .countdown.countdown--hero { padding: 14px 0; }

  /* Compact CTA on mobile: hug the content (no full-width stretch), keep it
     on one line by trimming the type footprint a touch. */
  .btn-primary { font-size: 11px; letter-spacing: 0.07em; padding: 15px 20px; gap: 12px; white-space: nowrap; }
  .btn-primary svg { width: 24px; }
  .btn-primary--wide { min-width: 0; width: auto; }
  /* Same treatment for the hero's outline CTA — its label is long, so keep it
     on one line rather than letting it wrap inside the border. */
  .hero .btn-outline { letter-spacing: 0.07em; padding: 13px 18px; gap: 12px; white-space: nowrap; }
  .hero .btn-outline svg { width: 24px; }
  .experience { grid-template-columns: 1fr; }
  .journey-steps { flex-wrap: wrap; gap: 26px 14px; }
  .j-step { flex: 1 1 40%; }
  .j-arrow { display: none; }
  .brand-cats { gap: 18px; }
  .footer-meta__row { gap: 14px; }
  .cd-unit__num { font-size: 34px; }
}

/* Phones: distribute the two content groups (brand + date/stats/CTA) with even,
   balanced spacing. Using flex space-evenly — NOT a min-height media query —
   means the gaps scale automatically with whatever vertical room is available:
   large on tall phones (iPhone 15/16/17, S25 Ultra), small on short ones. So the
   hero never reads as top-packed-with-a-hollow-middle nor stretched edge-to-edge,
   on any device — and it doesn't depend on the viewport height, which shifts as
   the mobile browser's address bar shows/hides. */
@media (max-width: 620px) {
  .hero .wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .hero__lead, .hero__body { width: 100%; }
}

/* ============================================================
   SUBTLE ENHANCEMENTS (v2) — micro-interactions only,
   no layout or color-system changes
   ============================================================ */
/* Experience cards: gentle image breathe + icon lift on hover */
.exp-card .ph { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.exp-card:hover .ph { transform: scale(1.045); }
.exp-card__icon { transition: stroke 0.35s ease, transform 0.35s ease; }
.exp-card:hover .exp-card__icon { stroke: var(--bronze-soft); transform: translateY(-4px); }
.exp-card__scrim { transition: background 0.4s ease; }
.exp-card:hover .exp-card__scrim { background: linear-gradient(180deg, rgba(18,13,8,0.45) 0%, rgba(18,13,8,0.28) 45%, rgba(18,13,8,0.66) 100%); }

/* Brand category icons: come alive on hover */
.brand-cat svg { transition: stroke 0.25s ease, transform 0.25s ease; }
.brand-cat:hover svg { stroke: var(--bronze); transform: translateY(-3px); }
.brand-cat span { transition: color 0.25s ease; }
.brand-cat:hover span { color: var(--text-on-cream); }

/* Hero meta icons + stat numbers: soft focus polish */
.meta-item svg { transition: stroke 0.25s ease, transform 0.25s ease; }
.meta-item:hover svg { transform: translateY(-1px) scale(1.06); }

/* Map pins gain a soft drop shadow for depth */
.map-pin svg { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }

/* Footer social: subtle fill on hover */
.footer-social a:hover { background: rgba(184,154,106,0.10); }

/* ============================================================
   FLOATING CONTACT — Call + WhatsApp
   ============================================================ */
.floating-contact {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 10px 26px rgba(10, 7, 4, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.fab:hover, .fab:focus-visible { background: var(--bronze-soft); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 7, 4, 0.55); }
.fab__icon { width: 22px; height: 22px; fill: var(--text-bright); }
.fab__tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap;
  background: var(--ink-900);
  color: var(--text-bright);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fab:hover .fab__tip, .fab:focus-visible .fab__tip { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 620px) {
  .floating-contact { right: 16px; bottom: 16px; gap: 12px; }
  .fab { width: 48px; height: 48px; }
  .fab__icon { width: 20px; height: 20px; }
  .fab__tip { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Visitor registration — hero CTA pair + modal
   Rendered only when Site settings → Visitor registration is switched on.

   Styled in the page's own language rather than a generic dialog: ink ground,
   cream type, bronze accent, Cormorant display, hairline rules and square
   corners — the same vocabulary as the hero and the Venue section.
   ═══════════════════════════════════════════════════════════════════════ */

/* The hero carries two CTAs side by side; they wrap rather than shrink below
   a tappable size. */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
.hero__actions .btn-outline { margin-top: 0; }

/* Solid counterpart to .btn-outline — the primary action of the pair. */
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bronze);
  background: var(--bronze);
  color: var(--ink-900);
  padding: 14px 26px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  width: fit-content;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}
.btn-solid:hover { background: var(--bronze-soft); border-color: var(--bronze-soft); }
.btn-solid[disabled] { opacity: 0.5; cursor: progress; }

/* ── Shell ──────────────────────────────────────────────────────────── */
.reg { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.reg[hidden] { display: none; }
.reg__scrim { position: absolute; inset: 0; background: rgba(8, 6, 4, 0.82); backdrop-filter: blur(4px); }

.reg__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* Short viewports (landscape phones) scroll inside the panel rather than
     clipping the submit button. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ink-850);
  border: 1px solid var(--line-dark);
  color: var(--text-bright);
  padding: 44px 36px 36px;
  /* A hairline of bronze along the top edge — the same signature the framed
     sections on the page use. */
  box-shadow: inset 0 2px 0 0 var(--bronze);
}

.reg__close {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
}
.reg__close:hover { color: var(--text-bright); border-color: var(--line-dark); }

.reg__eyebrow {
  margin: 0 0 14px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze);
}
.reg__title {
  margin: 0 0 12px;
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-bright);
}
.reg__intro { margin: 0 0 30px; font-size: 14px; line-height: 1.65; color: var(--text-soft); }

.reg__step[hidden] { display: none; }

/* ── Fields ─────────────────────────────────────────────────────────── */
.reg__field { display: block; margin-bottom: 20px; }
.reg__label {
  display: block; margin-bottom: 8px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.reg__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0;
  font-family: inherit;
  /* 16px minimum: iOS Safari zooms the page on focus for anything smaller. */
  font-size: 16px;
  color: var(--text-bright);
  background: transparent;
  /* Underline, not a box — matches the editorial rules used across the page. */
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  transition: border-color 0.2s;
}
.reg__field input::placeholder { color: var(--text-dim); }
.reg__field input:focus { outline: none; border-bottom-color: var(--bronze); }
.reg__field input[aria-invalid="true"] { border-bottom-color: #c2604a; }
.reg__error { display: none; margin-top: 8px; font-size: 12px; color: #c2604a; }
.reg__error:not(:empty) { display: block; }

.reg__submit {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
  margin-top: 30px;
  padding: 15px 22px;
  font-family: inherit; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-900); background: var(--bronze);
  border: 1px solid var(--bronze); cursor: pointer;
  transition: background 0.25s, opacity 0.25s;
}
.reg__submit svg { width: 26px; height: 11px; stroke: currentColor; stroke-width: 1.4; fill: none; flex: none; }
.reg__submit:hover { background: var(--bronze-soft); }
.reg__submit[disabled] { opacity: 0.5; cursor: progress; }

.reg__editLink {
  display: block; margin: 16px auto 0; padding: 4px; background: none; border: 0;
  font: inherit; font-size: 13px; color: var(--text-soft); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.reg__editLink:hover { color: var(--text-bright); }

/* Same inline text-button treatment as .reg__editLink — without this the
   browser default chrome (grey plate, outset border, Arial) lands in the
   middle of the dark panel. */
.reg__resend {
  padding: 4px; background: none; border: 0;
  font: inherit; font-size: inherit; color: var(--text-bright);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.reg__resend:hover { color: var(--bronze); }
.reg__resend[disabled] { opacity: 0.5; cursor: default; text-decoration: none; }

.reg__formError { margin: 16px 0 0; font-size: 13px; color: #c2604a; }
.reg__formError[hidden] { display: none; }

/* ── Issued pass ────────────────────────────────────────────────────── */
.reg__pass { text-align: center; }
.reg__pass .reg__eyebrow,
.reg__pass .reg__title { text-align: center; }

.reg__qr {
  display: inline-block;
  margin: 26px 0 22px;
  padding: 14px;
  /* White plate: scanners cope badly with tinted backgrounds, and this QR has
     to read off a phone screen at the gate. */
  background: #fff;
}
.reg__qr img { display: block; width: 200px; height: 200px; }

.reg__code {
  margin: 0;
  font-size: 22px; letter-spacing: 0.16em;
  color: var(--text-bright);
  /* Latin token — keep it LTR even if the page is ever mirrored. */
  direction: ltr; unicode-bidi: isolate;
}
.reg__codeLabel {
  margin: 8px 0 0;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim);
}
.reg__note {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px; line-height: 1.65; color: var(--text-soft);
}
.reg__note strong { color: var(--text-bright); font-weight: 400; }

@media (max-width: 520px) {
  .reg { padding: 12px; }
  .reg__panel { padding: 38px 24px 28px; }
  .reg__title { font-size: 28px; }
  .reg__qr img { width: 170px; height: 170px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn-outline,
  .hero__actions .btn-solid { width: 100%; }
}