/**
 * Hero — three coexisting modes:
 *
 *   .hero               →  legacy light hero (side-by-side card stack).
 *                          Still rendered if components/hero.html ever
 *                          rolls back to the old markup.
 *   .hero--luxe         →  dark hero with side-by-side card stack on
 *                          a deep-ink background. Kept for back-compat.
 *   .hero--fullbleed    →  premium full-bleed video hero (Seeking-style
 *                          landing). Centered single-column content over
 *                          autoplay video + dark gradient overlay. This
 *                          is what components/hero.html currently uses.
 */

.hero {
  padding-block: var(--space-16) var(--space-12);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  width: min(100% - var(--space-6), var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  gap: var(--space-10);
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-12);
  }
}

/* ───────────────────────────────────────────────────────────────
   Fullbleed video hero (Seeking-style landing)
   ─────────────────────────────────────────────────────────────── */

.hero--fullbleed {
  /* Tall, cinematic. Header sits inside this section visually thanks
     to the sticky transparent .site-header above — we offset our own
     top padding with a negative pull so the video starts UNDER the
     header from the very first pixel. */
  margin-top: calc(var(--header-h) * -1 - 8px);
  padding: 0;
  /* Compensate the negative margin-top so the section fully reaches the
     bottom of the viewport — no strip below the video on 16:9 screens. */
  min-height: calc(100vh + var(--header-h) + 8px);             /* Safari fallback first */
  min-height: calc(100svh + var(--header-h) + 8px);            /* Modern browsers override */
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--color-luxe-cream);
  background: var(--color-luxe-ink);
  isolation: isolate;
}

.hero--fullbleed .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-luxe-ink);
}

.hero--fullbleed .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Slight desaturation + warmth so the video reads as premium-editorial
     rather than stock. Brightness is dropped so the gold overlay glow
     reads on top. */
  filter: saturate(0.9) brightness(0.78) contrast(1.05);
}

.hero--fullbleed .hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      80% 65% at 50% 40%,
      rgba(13, 17, 23, 0) 0%,
      rgba(13, 17, 23, 0.1) 30%,
      rgba(13, 17, 23, 0.55) 75%,
      rgba(13, 17, 23, 0.85) 100%
    ),
    linear-gradient(
      180deg,
      rgba(13, 17, 23, 0.35) 0%,
      rgba(13, 17, 23, 0.02) 40%,
      rgba(13, 17, 23, 0.7) 100%
    );
}

.hero--fullbleed .hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding-block: var(--space-20) var(--space-16);
}

.hero--fullbleed .hero__inner--center {
  /* Same as above — explicit class for clarity in markup. */
}

.hero--fullbleed .hero__content {
  width: min(100%, 780px);
  margin-inline: auto;
}

.hero--fullbleed .hero__eyebrow {
  margin: 0 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-luxe-gold);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero--fullbleed .hero__title {
  margin: 0 auto var(--space-4);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--color-luxe-cream);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
  /* Single line on desktop, gentle wrap on narrow screens. */
  max-width: 22ch;
}

/* Smaller, lifted ™ mark next to the headline — Seeking-style. */
.hero--fullbleed .hero__title-tm {
  display: inline-block;
  margin-left: 0.08em;
  font-size: 0.28em;
  vertical-align: 0.95em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-luxe-gold);
  opacity: 0.85;
}

.hero--fullbleed .hero__tagline {
  margin: 0 auto var(--space-10);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.4;
  color: var(--color-luxe-cream-soft);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
  max-width: 42ch;
}

.hero--fullbleed .hero__actions {
  display: flex;
  justify-content: center;
}

.hero--fullbleed .hero__compliance {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: var(--space-5) var(--space-4) var(--space-6);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-luxe-cream-mute);
  text-align: center;
  text-transform: uppercase;
}

.hero--fullbleed .hero__compliance a {
  color: var(--color-luxe-cream-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}

.hero--fullbleed .hero__compliance a:hover {
  color: var(--color-luxe-cream);
}

/* Soft scroll-indicator at the very bottom of the hero — gentle hint
   that there's more below the fold. Hidden on short viewports / mobile
   landscape where vertical room is tight. */
.hero--fullbleed .hero__scroll {
  position: absolute;
  bottom: calc(var(--space-12) + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 32px;
  height: 50px;
  border: 1px solid rgba(245, 235, 213, 0.32);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
  text-decoration: none;
}

.hero--fullbleed .hero__scroll-line {
  display: block;
  width: 2px;
  height: 10px;
  background: var(--color-luxe-cream);
  border-radius: 2px;
  animation: hero-scroll-bob 1.8s var(--ease-out) infinite;
}

@keyframes hero-scroll-bob {
  0%   { transform: translateY(0);   opacity: 1; }
  60%  { transform: translateY(14px); opacity: 0.1; }
  100% { transform: translateY(0);   opacity: 1; }
}

@media (max-height: 620px) {
  .hero--fullbleed .hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--fullbleed .hero__scroll-line { animation: none; }
  .hero--fullbleed .hero__video {
    /* If the user has reduced-motion on, freeze the video on its poster.
       Safari/Firefox honor `autoplay` only if `muted`, so removing
       autoplay attribute via JS is overkill — just hide the playback. */
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────
   Legacy: dark hero with side-by-side card stack (.hero--luxe)
   Kept for back-compat — if components/hero.html reverts, the old
   visual still renders correctly.
   ─────────────────────────────────────────────────────────────── */

.hero--luxe {
  padding-block: clamp(var(--space-16), 12vw, calc(var(--space-20) * 1.4))
                 var(--space-16);
  color: var(--color-luxe-cream);
  background: var(--color-luxe-ink);
  isolation: isolate;
}

.hero--luxe .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero--luxe .hero__bg-grad {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, #1a2030 0%, var(--color-luxe-ink) 55%);
}

.hero--luxe .hero__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.55;
}

.hero--luxe .hero__bg-glow--gold {
  width: 60vw; height: 60vw; top: -20vw; right: -10vw;
  background: radial-gradient(circle, rgba(200, 164, 92, 0.45) 0%, transparent 70%);
}

.hero--luxe .hero__bg-glow--rose {
  width: 50vw; height: 50vw; bottom: -15vw; left: -10vw;
  background: radial-gradient(circle, rgba(196, 90, 110, 0.32) 0%, transparent 72%);
  opacity: 0.4;
}

.hero--luxe .hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3); border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-luxe-gold); background: var(--color-luxe-gold-soft);
  border: 1px solid var(--color-luxe-line);
}

.hero--luxe .hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-luxe-gold); box-shadow: 0 0 0 4px var(--color-luxe-gold-soft);
}

.hero--luxe .hero__title {
  margin: var(--space-6) 0 var(--space-5);
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.02; letter-spacing: -0.018em;
  color: var(--color-luxe-cream); text-wrap: balance;
}

.hero--luxe .hero__title em { font-style: italic; color: var(--color-luxe-gold); }

.hero--luxe .hero__lede {
  margin: 0 0 var(--space-8); max-width: 52ch;
  font-size: 1.0625rem; line-height: 1.6; color: var(--color-luxe-cream-soft);
}

.hero--luxe .hero__meta {
  margin-top: var(--space-10); padding-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  border-top: 1px solid var(--color-luxe-line);
}

.hero--luxe .hero__stat-value {
  font-family: var(--font-serif); font-size: 1.875rem; font-weight: 500;
  letter-spacing: -0.02em; color: var(--color-luxe-cream);
}

.hero--luxe .hero__stat-label {
  margin-top: 2px; font-size: 0.8125rem;
  color: var(--color-luxe-cream-mute); line-height: 1.4;
}

/* ───────────────────────────────────────────────────────────────
   Hero visual deck (used by the legacy .hero--luxe variant only —
   .hero--fullbleed has no card stack)
   ─────────────────────────────────────────────────────────────── */

.hero-visual { position: relative; min-height: 460px; }

.hero-visual__ring {
  position: absolute; inset: 8% 6%; border-radius: var(--radius-xl);
  border: 1px dashed color-mix(in srgb, var(--color-luxe-cream) 18%, transparent);
  animation: ring-breathe 8s var(--ease-out) infinite alternate;
}

.hero-visual__stack {
  position: relative; width: min(100%, 440px); margin-inline: auto;
  aspect-ratio: 4/5; z-index: 2;
}

.hero-card {
  position: absolute; width: 72%; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-luxe-ink-soft);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(245, 235, 213, 0.08);
  transition: top 0.6s var(--ease-out), left 0.6s var(--ease-out);
}

.hero-card--1 { left: 0;   top: 6%;    z-index: 3; transform: rotate(-6deg); }
.hero-card--2 { right: 0;  top: 18%;   z-index: 2; transform: rotate(5deg); }
.hero-card--3 { left: 14%; bottom: 4%; z-index: 1; width: 68%; transform: rotate(-2deg); }

.hero-card__img { aspect-ratio: 3/4; object-fit: cover; object-position: center 20%; width: 100%; }

.hero-card__cap {
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-luxe-ink) 70%, transparent);
  backdrop-filter: blur(14px); border: 1px solid rgba(245, 235, 213, 0.1);
  color: var(--color-luxe-cream);
}

.hero-card__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.0625rem; }
.hero-card__tag  { font-size: 0.78125rem; color: var(--color-luxe-cream-soft); }

@media (prefers-reduced-motion: reduce) {
  .hero-visual__ring { animation: none; }
}

@keyframes ring-breathe {
  from { transform: scale(1);    opacity: 0.45; }
  to   { transform: scale(1.02); opacity: 0.75; }
}

/* ───────────────────────────────────────────────────────────────
   Dark-surface button variants (landing hero / CTA). Gold: header.css.
   ─────────────────────────────────────────────────────────────── */

.btn.btn--ghost-on-dark {
  background: transparent;
  color: var(--color-luxe-cream);
  border: 1px solid rgba(245, 235, 213, 0.35);
}

.btn.btn--ghost-on-dark:hover {
  background: color-mix(in srgb, var(--color-luxe-cream) 8%, transparent);
  border-color: rgba(245, 235, 213, 0.6);
}

.btn.btn--lg {
  min-height: 52px;
  padding: 0 var(--space-7, 1.75rem);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}