/*
  Ocean Depths design system for the Superb Beachfront promo site.

  Palette is the theme-factory "Ocean Depths" theme:
    Deep Navy #1a2332, Teal #2d8b8b, Seafoam #a8dadc, Cream #f1faee.
  The theme file's DejaVu Sans pairing is a slide deck artifact and is not
  used. Typography is a system font stack: zero web font requests, nothing to
  block first paint on a phone.

  Contrast, measured (WCAG 2.1 relative luminance):
    cream on navy            14.8:1   body text on dark surfaces
    seafoam on navy          10.3:1   subheads and accents on dark
    navy on cream            14.8:1   body text on light surfaces
    navy on seafoam          10.3:1   primary button label
    teal-ink on cream         6.5:1   links on light surfaces
    teal meter fill           3.4:1 light, 4.1:1 dark, against the rating track
  Teal is deliberately NOT used for body text: teal on navy is 3.9:1 and teal
  on cream is 3.8:1, both under the 4.5:1 AA threshold. Teal is for rules,
  borders, rating meter fills and large display accents only, which clears the
  3:1 AA threshold for non-text and for large text. Teal is also the only
  candidate that clears 3:1 against the rating track in BOTH colour schemes,
  which is why the meter fill is not teal-ink.

  Mobile first. Component classes:
    wrap, skip-link, site-header, site-nav, hero, stat-row, amenity-grid,
    gallery, faq, rating-bars, callout, deflist, cta, btn, btn-row,
    site-footer, gate
*/

/* --------------------------------------------------------------- tokens */

:root {
  /* palette */
  --navy: #1a2332;
  --teal: #2d8b8b;
  --seafoam: #a8dadc;
  --cream: #f1faee;

  /* derived ink, kept dark enough to clear AA on cream */
  --teal-ink: #1f6363;
  --teal-ink-dark: #175252;
  --navy-soft: #33415a;
  --cream-dim: #d9e4dc;

  /* semantic surface tokens, re-pointed by prefers-color-scheme: dark below */
  --bg: var(--cream);
  --bg-raised: #ffffff;
  --bg-sunken: #e4efe7;
  --fg: var(--navy);
  --fg-muted: #46566e;
  --rule: #b9cfc6;
  --accent: var(--teal-ink);
  --accent-strong: var(--navy);
  --on-dark-fg: var(--cream);
  --on-dark-fg-muted: var(--seafoam);
  --btn-bg: var(--navy);
  --btn-fg: var(--cream);
  --focus: #0f5c8c;

  /* type scale, 1.2 ratio off a 1.0625rem base, mobile first */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.25rem;
  --fs-display: 2.625rem;
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* spacing scale, 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius: 10px;
  --radius-lg: 16px;
  --wrap: 72rem;
  --wrap-narrow: 46rem;
  --shadow: 0 1px 2px rgba(26, 35, 50, 0.08), 0 8px 24px rgba(26, 35, 50, 0.06);
  --shadow-lg: 0 2px 6px rgba(26, 35, 50, 0.12), 0 18px 48px rgba(26, 35, 50, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--navy);
    --bg-raised: #222e40;
    --bg-sunken: #171f2c;
    --fg: var(--cream);
    --fg-muted: #b9c8d6;
    --rule: #33415a;
    --accent: var(--seafoam);
    --accent-strong: var(--seafoam);
    --btn-bg: var(--seafoam);
    --btn-fg: var(--navy);
    --focus: #ffd166;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.45);
  }
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--accent-strong); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -4rem;
  z-index: 60;
  padding: var(--sp-2) var(--sp-4);
  background: var(--seafoam);
  color: var(--navy);
  font-weight: 700;
  border-radius: var(--radius);
  transition: top 120ms ease;
}

.skip-link:focus { top: var(--sp-2); }

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--sunken { background: var(--bg-sunken); }

.section__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The answer-first lead: the first paragraph under any h2 carries the claim. */
.answer {
  font-size: var(--fs-md);
  font-weight: 600;
  max-width: 46ch;
}

.answer + .support { max-width: 62ch; color: var(--fg-muted); }

@media (min-width: 48rem) {
  h1 { font-size: var(--fs-2xl); }
  .section { padding-block: var(--sp-8); }
}

/* --------------------------------------------------------------- header */

.site-header {
  background: var(--navy);
  color: var(--cream);
  border-bottom: 3px solid var(--teal);
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
}

.site-header__brand {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

.site-header__brand a {
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-md);
}

.site-header__where {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--seafoam);
  letter-spacing: 0.03em;
}

.site-nav__list {
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav__list::-webkit-scrollbar { display: none; }

.site-nav__list li { margin: 0; }

.site-nav__list a {
  display: block;
  padding: var(--sp-1) 0;
  color: var(--seafoam);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover { color: var(--cream); border-bottom-color: var(--teal); }

.site-nav__list a[aria-current="page"] {
  color: var(--cream);
  border-bottom-color: var(--seafoam);
}

@media (min-width: 48rem) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-block: var(--sp-4);
  }
}

/* ----------------------------------------------------------------- hero */

/*
  Two columns from 48rem. The photos top out at 640px wide and are never
  upscaled, so the image lives in a column at its natural size rather than
  stretched across a full-bleed desktop banner.
*/
.hero {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--sp-6) var(--sp-7);
}

.hero__inner {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.hero h1 { color: var(--cream); }

/*
  The hero text column. Every page opens with one. Layout comes from
  .hero__inner's grid, so this carries only what a grid item cannot: min-width
  guards the track against a long unbroken string, and the trailing margin trim
  keeps the CTA row flush with the bottom of the column.
*/
.hero__copy { min-width: 0; }
.hero__copy > :last-child { margin-bottom: 0; }

.hero__kicker {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--seafoam);
}

.hero__lead {
  font-size: var(--fs-md);
  max-width: 52ch;
  color: var(--seafoam);
}

.hero__name { color: var(--cream); }

.hero__figure { margin: 0; }

.hero__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: #263449;
}

.hero__figure figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--seafoam);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--sp-7) var(--sp-8);
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-7);
  }
  .hero__figure {
    position: sticky;
    top: var(--sp-5);
  }
  .hero__figure img { max-width: 26rem; }
}

/* ------------------------------------------------------------- stat row */

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--bg-raised);
}

.stat__value {
  /* dt must precede dd inside a dl, so the visual order is set here instead. */
  order: 1;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
}

.stat__label {
  order: 2;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.stat__source {
  order: 3;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

@media (min-width: 34rem) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- amenity grid */

.amenity-grid {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}

.amenity {
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
}

.amenity__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-base);
  font-weight: 700;
}

.amenity__body {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

@media (min-width: 40rem) {
  .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .amenity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}

.gallery figure {
  margin: 0;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-sunken);
}

.gallery figcaption {
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/*
  Portrait frames. The default box is 4/3, which crops a portrait photo down to
  its middle band: on a 3:4 frame that keeps the middle 56 percent of the height,
  which is enough to cut a person's head off or drop the horizon out of a shot.
  A portrait photo opts out of the crop: put gallery--portrait on its <figure>,
  or on the whole <ul class="gallery"> when every frame in it is portrait, and
  the image renders at its own ratio. Landscape frames keep the 4/3 default.

  Which photos are portrait is not a matter of taste, it is in
  images-manifest.json as intrinsic.portrait, and scripts/check.mjs fails the
  build if a portrait photo lands in a 4/3 gallery frame. Renumbering a scene
  changes which file a slug names, so check the manifest rather than the
  filename when a photo is added or moved.
*/
.gallery--portrait img { aspect-ratio: auto; }

@media (min-width: 34rem) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------- rating bars */

.rating-bars {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  max-width: 34rem;
}

.rating-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}

.rating-row__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.rating-row__track {
  height: 0.625rem;
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.rating-row__fill {
  display: block;
  height: 100%;
  background: var(--teal);
}

.rating-row__value {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

/* ------------------------------------------------------------- callout */

.callout {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
}

.callout--flag {
  background: var(--bg-sunken);
  border-top-color: var(--navy);
}

.callout__answer {
  font-size: var(--fs-md);
  font-weight: 600;
  max-width: 54ch;
}

.callout__answer + p { max-width: 62ch; }

.callout__meta {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ faq */

.faq { display: grid; gap: var(--sp-4); }

.faq__item {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.faq__q {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
}

/*
  Native disclosure, no JavaScript. The accordion is <details> plus <summary>,
  so it opens with the markup alone and the answer text is in the served HTML
  either way. AGENTS.md "GEO and SEO rules" rule 2.

  .faq__q is shared: the FAQ page puts it on a <summary>, where it is a
  control, and other pages put it on a plain <h3> with no widget. The
  affordances hang off summary.faq__q so the heading variant never gets a
  pointer cursor on something that cannot be clicked.

  The marker is drawn here rather than taken from the platform, because the
  native triangle is small, sits high, and reads as decoration instead of a
  control. It rotates with the open state and the rotation is covered by the
  prefers-reduced-motion block at the foot of this file.
*/
summary.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}

summary.faq__q::-webkit-details-marker { display: none; }

summary.faq__q::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

details[open] > summary.faq__q::before { transform: rotate(45deg); }

summary.faq__q:hover::before { border-color: var(--navy); }

.faq__a { margin: 0; color: var(--fg-muted); }
.faq__a strong { color: var(--fg); }

/* The summary gave up its own bottom margin, so the answer needs the gap. */
summary.faq__q + .faq__a { margin-top: var(--sp-3); }

/* ------------------------------------------------------------ booking */

.booking {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.booking__list {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.booking__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 40%) 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
}

.booking__row dt { margin: 0; font-weight: 700; }
.booking__row dd { margin: 0; color: var(--fg-muted); }

@media (min-width: 48rem) {
  .booking__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-1);
  }
}

/* ------------------------------------------------------ definition list */

/*
  A plain two column <dl>, for a page that needs a table of facts without
  inventing a class for it. dt before dd inside a dl, so the visual order is
  the source order. Stacked below 40rem; the hairline between a dt and its own
  dd reads as a row separator there, which is the intent.
*/
.deflist {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.deflist dt,
.deflist dd {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
}

.deflist dt { font-weight: 700; }
.deflist dd { color: var(--fg-muted); }

@media (min-width: 40rem) {
  .deflist { grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr); }
}

/* ----------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* 48px minimum touch target: the booking happens on a phone, on a beach. */
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.btn--lg { min-height: 3.5rem; font-size: var(--fs-md); }

/*
  A wrapping row of buttons. .hero__actions is the hero instance; this is the
  same shape for a section, so a page does not need a new class per section.
*/
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  background: var(--seafoam);
  color: var(--navy);
  border-color: var(--seafoam);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--seafoam);
}

.btn--ghost:hover {
  background: rgba(168, 218, 220, 0.12);
  color: var(--cream);
}

.btn--ghost-light {
  background: transparent;
  color: var(--navy);
  border-color: var(--teal);
}

.btn--ghost-light:hover {
  background: rgba(45, 139, 139, 0.1);
  color: var(--navy);
}

/* ------------------------------------------------------------------ cta */

.cta {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--sp-7);
  border-top: 3px solid var(--teal);
}

.cta__inner { max-width: var(--wrap-narrow); }

.cta__heading {
  font-size: var(--fs-xl);
  color: var(--cream);
}

.cta__note {
  font-size: var(--fs-md);
  color: var(--seafoam);
  max-width: 52ch;
}

.cta .btn--primary {
  background: var(--seafoam);
  color: var(--navy);
  border-color: var(--seafoam);
}

.cta .btn--primary:hover {
  background: var(--cream);
  border-color: var(--cream);
}

.cta__fine {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--seafoam);
}

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--navy);
  color: var(--cream);
  border-top: 1px solid #33415a;
  padding-block: var(--sp-6);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-4);
}

.site-footer p { margin: 0; }

.site-footer__entity {
  font-size: var(--fs-md);
  line-height: 1.35;
}

.site-footer__facts,
.site-footer__small,
.site-footer__links {
  color: var(--seafoam);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--seafoam); }

.site-footer__small { font-size: var(--fs-xs); }

@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__small { grid-column: 1 / -1; }
}

/* --------------------------------------------------- staging gate (js) */

/*
  The gate overlay is built by site/assets/js/gate.js and injected into the
  DOM, so this markup never reaches a crawler and never appears when JS is
  off. The page content itself is never hidden: with JS off the site is
  complete and readable. noindex is the real protection while staged.
*/
.gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(26, 35, 50, 0.72);
  backdrop-filter: blur(3px);
}

.gate {
  width: 100%;
  max-width: 30rem;
  padding: var(--sp-6) var(--sp-5);
  background: var(--cream);
  color: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.gate__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

.gate__title {
  font-size: var(--fs-lg);
  color: var(--navy);
}

.gate__body { font-size: var(--fs-sm); }

.gate__actions {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
}

.gate__fine {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: #46566e;
}

body.gate-open { overflow: hidden; }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skip-link { transition: none; }
  .btn:hover { transform: none; }
}

/* ----------------------------------------------------------------- print */

@media print {
  .site-header,
  .site-nav,
  .cta,
  .site-footer,
  .gate-backdrop { display: none; }
  body { background: #fff; color: #000; }
}