/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;padding-top:clamp(8rem,6rem + 8vw,12rem);padding-bottom:clamp(2.5rem,2rem + 3vw,4rem);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* The wash over the photograph.
   Dark enough for AA text contrast on the left, light enough that the kitchen still reads. Tinted
   rather than gray: a neutral scrim over a daylight photograph looks like haze, which is the
   opposite of the intent. The tint is --scrim, so a palette changes its wash by naming one color
   instead of rewriting four gradients — see 01-base.css. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(94deg,
      color-mix(in srgb,var(--scrim) 88%,transparent) 0 16%,
      color-mix(in srgb,var(--scrim) 52%,transparent) 38%,
      color-mix(in srgb,var(--scrim) 10%,transparent) 60%,
      color-mix(in srgb,var(--scrim) 20%,transparent) 100%),
    radial-gradient(70% 60% at 88% 18%,color-mix(in srgb,var(--scrim-glow) 16%,transparent),transparent 60%),
    linear-gradient(to bottom,color-mix(in srgb,var(--scrim) 50%,transparent) 0,transparent 24% 66%,var(--night) 100%);
}
/* A daylight exterior — a beach, a white tower, a subdivision from the air — is far brighter than
   the kitchen interiors the scrim above was tuned against, and the copy sits directly on it. Same
   colors, more of them, so the page still looks like one design rather than two. */
.hero-bright .hero-media::after{
  background:
    linear-gradient(94deg,
      color-mix(in srgb,var(--scrim) 94%,transparent) 0 22%,
      color-mix(in srgb,var(--scrim) 78%,transparent) 46%,
      color-mix(in srgb,var(--scrim) 42%,transparent) 70%,
      color-mix(in srgb,var(--scrim) 50%,transparent) 100%),
    radial-gradient(70% 60% at 88% 18%,color-mix(in srgb,var(--scrim-glow) 12%,transparent),transparent 60%),
    linear-gradient(to bottom,color-mix(in srgb,var(--scrim) 60%,transparent) 0,transparent 30% 60%,var(--night) 100%);
}

.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
/* With the booking card beside it, the copy starts at the top of the card rather than floating in
   the middle of it: two blocks of different heights centred against each other have no line in
   common, and the first screen reads as two unrelated things placed near one another. */
.hero-inner-form{align-items:start}
/* a grid item defaults to min-width:auto, so one unwrappable child (the kicker,
   with its wide letter-spacing) was pushing the whole column past the wrap */
.hero-inner > *{min-width:0}

.kicker{
  display:inline-flex;align-items:center;gap:.7rem;max-width:100%;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-70);
  margin-bottom:1.8rem;padding:.5rem 1rem;border:1px solid var(--line-2);
  border-radius:100px;background:var(--glass);backdrop-filter:blur(10px);
}
/* The dot read the palette and its halo did not, so on 24 of the 25 palettes the ring around it
   was a different color from the dot inside it. */
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--aqua);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--aqua) 70%,transparent);animation:pulse 2.6s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 12px color-mix(in srgb,var(--aqua) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--aqua) 0%,transparent)}
}

/* let the browser balance the lines: hard <br>s stranded "to" on its own row
   at intermediate widths */
.hero h1{
  margin-bottom:1.5rem;max-width:15ch;
  text-wrap:balance;hyphens:none;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.glow{color:var(--brass)}
.hero .lede{font-size:var(--step-1);color:var(--text-70);max-width:46ch;line-height:1.55;margin-bottom:2.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* the frosted booking card — the conversion element, kept in the first screen.
   Light glass over a daylight photograph: a dark card would sit on the image
   as a hole rather than a pane. */
.glass-form{
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.5vw,2.2rem);
  box-shadow:0 40px 90px -45px color-mix(in srgb,var(--scrim) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.4);
}
.glass-form h2{font-size:var(--step-2);margin-bottom:.4rem;color:var(--on-hero)}
.form-sub{font-size:var(--step--1);color:color-mix(in srgb,var(--on-hero) 74%,transparent);margin-bottom:1.2rem}
/* No .embed rule here on purpose. Its height, its color and its loading state all live in
   04-sections.css: this file once set background:#fff and painted an 840px white rectangle on a
   black page for as long as a third-party app took to boot, and a duplicate min-height here later
   outranked the rule that releases the reservation once the form has arrived. */
.form-foot{display:flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:var(--step--1);color:color-mix(in srgb,var(--on-hero) 72%,transparent)}
.form-foot svg{width:15px;height:15px;flex:none;color:var(--brass)}

/* stats ribbon on glass */
.glass-stats{
  position:relative;z-index:1;
  display:grid;
  /* 🔴 As many columns as there are figures, not always four. Three stats in a four-column grid
     left a quarter of the strip empty on the right, and the band read as unfinished — which is
     exactly what it was. The count comes from the template, so the strip fits whatever a page
     gives it. */
  grid-template-columns:repeat(var(--stats,4),1fr);
  margin-top:clamp(2rem,1.4rem + 2vw,3.4rem);
  background:var(--glass);backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.glass-stats li{padding:1.5rem 1.6rem;border-right:1px solid var(--line)}
.glass-stats li:last-child{border-right:0}
.glass-stats strong{display:block;font-family:var(--display);font-size:var(--step-2);font-weight:500;letter-spacing:-.03em;color:var(--brass)}
.glass-stats span{font-size:var(--step--1);color:var(--text-45)}


/* The stats strip, pulled up beside a hero that carries the booking form. It stays a full-width
   band under a hero without one — that is the homepage's own layout and it works there because the
   copy runs the height of the form. Where the copy is shorter, the strip moves into the copy
   column: two rows of two, ending roughly level with the form instead of leaving a hole. */
.glass-stats-pair{grid-template-columns:repeat(2,1fr);margin-top:clamp(1.8rem,1.2rem + 1.6vw,2.6rem)}
.glass-stats-pair li:nth-child(2n){border-right:0}
.glass-stats-pair li:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media (max-width:560px){
  .glass-stats-pair{grid-template-columns:1fr}
  .glass-stats-pair li{border-right:0;border-bottom:1px solid var(--line)}
  .glass-stats-pair li:last-child{border-bottom:0}
}