/* Homepage hero: full-viewport cinematic image, editorial type, booking CTA */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  color: #f8f4ea;
  overflow: clip;
}
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(13 58 65 / 0.38), rgb(13 58 65 / 0.05) 40%, rgb(13 58 65 / 0.78) 88%),
    linear-gradient(75deg, rgb(13 58 65 / 0.45) 0%, transparent 55%);
}
.hero__content {
  /* The bottom padding clears the fixed booking bar (--book-bar-h). Without
     it the hero's own CTAs sat underneath the bar on a phone, which is where
     the first tap of a session would land. --book-bar-h is 0 from 56em, where
     the bar is hidden, so desktop is unaffected. */
  padding-block: 0 calc(var(--space-8) + var(--book-bar-h));
  display: grid;
  gap: var(--space-4);
  max-width: 46rem;
}
.hero__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e9c98f;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* The rule and the text sit in one flex row. On a narrow phone the text wraps
   to a second line, which the flex container then centres vertically against a
   1 px rule and left a visibly ragged two-line label. flex-wrap lets the text
   take the full width on its own line instead, and the rule shrinks rather
   than forcing the overflow. */
.hero__eyebrow { flex-wrap: wrap; row-gap: var(--space-1); }
.hero__eyebrow::before { content: ""; inline-size: 2.5rem; block-size: 1px; background: #e9c98f; flex: none; }
.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: #efdfbe; }
.hero__lede { font-size: var(--text-md); line-height: var(--leading-snug); color: #e3ebe9; max-width: 34rem; }
/* The hero CTAs wrap on a narrow phone. Two side-by-side buttons at 320–375 px
   each get too little width for their labels and the pair leaves a ragged gap,
   so below 40em they stack full-width instead of sharing a row. */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
@media (max-width: 40em) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { inline-size: 100%; min-block-size: 2.75rem; }
}
.hero__scroll {
  position: absolute;
  inset-inline-end: var(--gutter);
  inset-block-end: var(--space-7);
  font-size: var(--text-2xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #d7e2e1;
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.hero__scroll::after { content: ""; inline-size: 1px; block-size: 2.6rem; background: currentColor; animation: hero-line 2.4s var(--ease-inout) infinite; }
@keyframes hero-line {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (min-width: 48em) { .hero__scroll { display: inline-flex; } }

/* Intro editorial band on home */
.intro-band { display: grid; gap: var(--space-5); }
/* minmax(0, …) floors prevent content min-width from widening the tracks. */
@media (min-width: 56em) {
  .intro-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
  .intro-band > :first-child { padding-inline-end: var(--space-6); }
}

/* Reviews — editorial pull style, not card spam */
.reviews { display: grid; gap: var(--space-5); }
@media (min-width: 56em) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { border-block-start: 2px solid var(--color-accent); padding-block-start: var(--space-4); }
.review h3 { font-size: var(--text-md); margin-block-end: var(--space-2); }
.review p { font-size: var(--text-sm); color: var(--color-fg-muted); }