/* ==========================================================================
   San Diego Soft Play — site styles
   Tokens mirror the booking app (honeybookable/src/app/globals.css) so the
   brochure site and the /book funnel read as one brand.

   Colour discipline: the page carries NO brand colour of its own. It is warm
   neutral throughout — cream paper, near-black ink — and the logo plus the
   photography are the only sources of colour. The --pink-* tokens below are
   kept because the booking funnel at riola.app/book uses them, but nothing on
   this site should reference them.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Soft-play pink — the customer-facing brand accent */
  --pink-50:  #fdf2f7;
  --pink-100: #fce7f0;
  --pink-200: #fbcfe1;
  --pink-300: #f9a8c9;
  --pink-400: #f472a8;
  --pink-500: #e0568c;
  --pink-600: #cc3a73;
  --pink-700: #a82a5c;
  --pink-800: #8b2450;
  --pink-900: #742147;

  --ink-50:  #f5f7f9;
  --ink-100: #eef1f4;
  --ink-200: #e3e7ec;
  --ink-300: #c9d0d8;
  --ink-400: #9aa3af;
  --ink-500: #6b7380;
  --ink-600: #4f5663;
  --ink-700: #383e48;
  --ink-800: #252a33;
  --ink-900: #12151a;

  /* Warm paper — pure white next to the accent reads cold */
  --cream-50:  #fffdfb;
  --cream-100: #fdf8f3;
  --cream-200: #f7efe6;
  --cream-300: #efe3d6;
  --cream-400: #e6d7c6;

  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 52px;

  --shadow-sm: 0 1px 2px rgba(18, 21, 26, .06), 0 4px 12px rgba(18, 21, 26, .05);
  --shadow-md: 0 8px 24px rgba(18, 21, 26, .08), 0 2px 6px rgba(18, 21, 26, .05);
  --shadow-lg: 0 30px 70px rgba(18, 21, 26, .16);

  --gutter: clamp(20px, 5vw, 60px);
  --section-y: clamp(72px, 10vw, 150px);
  --header-h: 94px;
  --welcome-band: clamp(190px, 52vw, 300px);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-700);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--cream-300); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* --- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1460px; }
.container--narrow { max-width: 760px; }

.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream-200); }
.section--paper { background: var(--cream-100); }
.section--white { background: #fff; }
.section--ink { background: var(--ink-900); color: rgba(253, 248, 243, .8); }
.section--pink { background: var(--cream-200); }

/* --- Type ---------------------------------------------------------------
   Fraunces with WONK/SOFT dialled to 0 and a large optical size gives the
   high-contrast editorial serif the design calls for. */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  text-wrap: balance;
}

.h-xl { font-size: clamp(3.1rem, 7.6vw, 6.5rem); line-height: .95; }
.h-lg { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: .98; }
.h-md { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.h-sm { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -.012em; }

.section--ink .h-xl,
.section--ink .h-lg,
.section--ink .h-md,
.section--ink .h-sm,
.section--ink h2,
.section--ink h3 { color: var(--cream-50); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 26px;
}
.eyebrow--light { color: rgba(253, 248, 243, .58); }
.eyebrow--accent { color: var(--ink-700); }

.lede {
  font-size: clamp(1rem, 1.1vw, 1.09rem);
  line-height: 1.72;
  color: var(--ink-600);
  max-width: 58ch;
}
.section--ink .lede { color: rgba(253, 248, 243, .74); }

.muted { color: var(--ink-500); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  --btn-bd: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: var(--ink-300); }
.btn--outline:hover { --btn-bg: var(--ink-900); --btn-fg: #fff; --btn-bd: var(--ink-900); }
.btn--light  { --btn-bg: transparent; --btn-fg: var(--cream-100); --btn-bd: rgba(253,248,243,.45); }
.btn--light:hover { --btn-bg: var(--cream-100); --btn-fg: var(--ink-900); --btn-bd: var(--cream-100); }
.btn--solid-light { --btn-bg: var(--cream-100); --btn-fg: var(--ink-900); --btn-bd: var(--cream-100); }
.btn--sm { padding: 12px 24px; font-size: 9.5px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-size: 1.22rem;
  letter-spacing: -.01em;
  color: var(--ink-900);
  transition: gap .3s, color .3s;
}
.link-arrow::after {
  content: "›";
  font-size: 1.3em;
  color: var(--ink-400);
  transition: color .3s;
}
.link-arrow:hover { gap: 15px; }
.link-arrow:hover::after { color: var(--ink-900); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .35s, box-shadow .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.site-header.is-solid {
  background: rgba(253, 248, 243, .93);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--cream-300);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand--logo { gap: 0; position: relative; }
.brand__logo {
  width: auto;
  display: block;
  transition: opacity .35s;
}
.brand--header .brand__logo { height: clamp(44px, 4.8vw, 60px); }
.brand--footer .brand__logo { height: 76px; }

/* Two variants: the cream-tagline one over dark, full colour over cream.
   The second is stacked on top of the first so the lockup never reflows. */
.brand--logo .brand__logo--onlight {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}
.site-header.is-solid .brand__logo--onlight,
.site-header.on-light .brand__logo--onlight { opacity: 1; }
.site-header.is-solid .brand__logo--ondark,
.site-header.on-light .brand__logo--ondark { opacity: 0; }
.site-footer .brand__logo--onlight { display: none; }

.brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  font-size: 16px;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--cream-50);
  transition: color .35s;
}
.brand__name span {
  display: block;
  font-size: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .55;
  margin-top: 3px;
}
.site-header.is-solid .brand__name,
.site-header.on-light .brand__name { color: var(--ink-900); }

.nav { display: flex; align-items: center; gap: 32px; margin-right: auto; }
.nav a {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(253, 248, 243, .78);
  position: relative;
  padding-block: 6px;
  transition: color .3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header.is-solid .nav a,
.site-header.on-light .nav a { color: var(--ink-600); }
.nav a:hover { color: #fff; }
.site-header.is-solid .nav a:hover,
.site-header.on-light .nav a:hover { color: var(--ink-900); }

.header-cta { flex: none; }
.site-header:not(.is-solid):not(.on-light) .header-cta.btn {
  --btn-bg: var(--cream-100); --btn-fg: var(--ink-900); --btn-bd: var(--cream-100);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--cream-100);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.site-header.is-solid .nav-toggle,
.site-header.on-light .nav-toggle { color: var(--ink-900); }
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background-color .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink-900);
  color: var(--cream-100);
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .35s, transform .35s, visibility .35s;
  overflow-y: auto;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
body.nav-open { overflow: hidden; }
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 90, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  padding-block: 14px;
  border-bottom: 1px solid rgba(253, 248, 243, .1);
  color: var(--cream-50);
}
.mobile-nav .btn { margin-top: 30px; align-self: flex-start; }
.mobile-nav__meta {
  margin-top: auto;
  padding-top: 32px;
  font-size: 13px;
  color: rgba(253, 248, 243, .55);
}

/* --- Hero ---------------------------------------------------------------
   Full-viewport video background with the headline centred over it. The
   poster image carries the frame until the video loads (or if none is
   installed yet), so the hero always looks finished. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--ink-900);
  color: var(--cream-100);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scrim: dark enough at top and bottom for the nav and the copy to hold up
   over any footage, lighter through the middle so the video still reads. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 52%, rgba(18, 21, 26, .5) 0%, transparent 72%),
    linear-gradient(180deg, rgba(18, 21, 26, .68) 0%, rgba(18, 21, 26, .4) 30%,
                    rgba(18, 21, 26, .46) 62%, rgba(18, 21, 26, .78) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: var(--header-h);
  max-width: 900px;
}
.hero__inner .h-xl {
  color: var(--cream-50);
  text-shadow: 0 2px 40px rgba(18, 21, 26, .35);
}
.hero__sub {
  margin-top: 26px;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  color: rgba(253, 248, 243, .86);
}
.hero__actions { margin-top: 42px; justify-content: center; }
/* Availability bar now sits in its own band directly under the hero */
.booking-band {
  background: var(--cream-100);
  padding-block: clamp(32px, 4.5vw, 52px);
}

/* --- Availability bar --------------------------------------------------- */
.booking {
  position: relative;
  z-index: 5;
  max-width: 1020px;
  margin-inline: auto;
}
.booking__tabs { display: flex; gap: 2px; }
.booking__tab {
  border: 0;
  background: rgba(18, 21, 26, .06);
  color: var(--ink-500);
  padding: 13px 28px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.booking__tab[aria-selected="true"] { background: #fff; color: var(--ink-900); }

.booking__panel {
  background: #fff;
  border: 1px solid var(--cream-300);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid;
  grid-template-columns: .92fr .96fr .62fr 1.1fr auto;
  align-items: stretch;
}
.booking__panel[hidden] { display: none; }

.field {
  padding: 14px 20px;
  border-right: 1px solid var(--cream-300);
  min-width: 0;
}
.field:nth-of-type(4) { border-right: 0; }
.field label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 6px;
}
.field input,
.field select {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  color: var(--ink-900);
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3af' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}
.field input:focus, .field select:focus { outline: none; }
.field:focus-within label { color: var(--ink-900); }

/* Stepper, as on the reference's guest counter */
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper input {
  flex: 1;
  min-width: 0;
  cursor: default;
  text-align: left;
}
.stepper button {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: transparent;
  color: var(--ink-600);
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.stepper button:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

.booking__submit { align-self: center; margin-left: 14px; }
.booking__note {
  grid-column: 1 / -1;
  padding: 2px 22px 10px;
  font-size: 11.5px;
  color: var(--ink-400);
}

/* --- Welcome ------------------------------------------------------------
   Three things drive the spacing here:
   1. The white panel below rides up over this section, so the bottom padding
      has to clear that overlap or the buttons crowd the panel edge.
   2. The flanking photos are anchored to the bottom, so a tall top padding
      leaves an empty band across the full width. Top padding is tighter than
      the site default and the photos are taller, which closes that gap.
   3. The photos are masked at the top so they rise out of the cream instead
      of being cut off by a hard horizontal line. */
.welcome {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 8vw, 118px) clamp(150px, 15vw, 232px);
}
.welcome__deco {
  position: absolute;
  bottom: 0;
  width: clamp(200px, 24vw, 380px);
  height: clamp(300px, 40vw, 580px);
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
}
.welcome__deco--l { left: 0; }
.welcome__deco--r { right: 0; }
.welcome__inner { position: relative; z-index: 2; }

/* Even vertical rhythm down the centre column. Previously these gaps were
   inline styles on the elements, which made them impossible to tune here. */
.welcome__inner .eyebrow { margin-bottom: 30px; }
.welcome__inner .lede { margin-top: 26px; }
.welcome__inner .btn-row { margin-top: 38px; }

/* Panel that rides up over the section above it */
.panel-overlap {
  position: relative;
  z-index: 3;
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: clamp(-110px, -8vw, -64px);
}

/* --- Partner strip ------------------------------------------------------
   Monochrome so partner marks sit inside the site's palette rather than
   dragging their own brand colours across the page. */
.partners { padding-block: clamp(44px, 6vw, 76px); background: var(--cream-100); }
.partners .eyebrow { margin-bottom: clamp(28px, 3.5vw, 44px); }
.partners__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 7vw, 96px);
}
.partners__item { display: flex; align-items: center; }
.partners__list { --partner-h: clamp(26px, 3.2vw, 40px); }
.partners__logo {
  /* Per-mark multiplier: equal pixel heights do not read as equal weight.
     Petco's bold wordmark dominates, Tubby Todd's script needs lifting. */
  height: calc(var(--partner-h) * var(--k, 1));
  width: auto;
  filter: grayscale(1) brightness(0) opacity(.62);
  transition: filter .35s;
}
.partners__logo--petco { --k: .80; }
.partners__logo--tubby-todd { --k: 1.18; }
.partners__logo--just-enough { --k: 1.12; }
.partners__item:hover .partners__logo { filter: grayscale(1) brightness(0) opacity(1); }
/* Placeholder until real artwork is supplied */
.partners__wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  letter-spacing: -.02em;
  color: var(--ink-500);
  white-space: nowrap;
  transition: color .35s;
}
.partners__item:hover .partners__wordmark { color: var(--ink-900); }

/* --- Tiles -------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(44px, 5vw, 68px);
  text-align: left;
}
.tile { display: block; }
.tile__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-200);
}
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__label { margin-top: 18px; }

/* --- Carousel ----------------------------------------------------------- */
.carousel { margin-top: clamp(44px, 5vw, 64px); }
.carousel__track {
  --carousel-gap: clamp(18px, 2.2vw, 30px);
  --carousel-per-view: 3;
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 8px;
  text-align: left;
}
.carousel__track::-webkit-scrollbar { display: none; }
.feature-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
  min-width: 0;
}
.feature-card__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-200);
}
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-card h3 { margin: 22px 0 10px; font-size: 1.32rem; letter-spacing: -.015em; }
.feature-card p { color: var(--ink-600); font-size: 14.5px; line-height: 1.6; }
.feature-card .btn { margin-top: 22px; }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
}
.carousel__arrow {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: transparent;
  color: var(--ink-700);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background-color .25s, color .25s, border-color .25s;
}
.carousel__arrow:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.carousel__arrow[disabled] { opacity: .28; cursor: default; }
.carousel__arrow[disabled]:hover { background: transparent; color: var(--ink-700); border-color: var(--ink-200); }
.carousel__dots { display: flex; gap: 10px; }
.carousel__dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 1px solid var(--ink-300);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.carousel__dot[aria-current="true"] { background: var(--ink-900); border-color: var(--ink-900); }

/* --- Packages ----------------------------------------------------------- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(44px, 5vw, 68px);
}
.pkg {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pkg__media { aspect-ratio: 5 / 3; background: var(--cream-200); position: relative; }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; }
.pkg__flag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--ink-900);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.pkg__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.pkg__name { font-size: 1.6rem; }
.pkg__tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 10px;
}
.pkg__desc { font-size: 14.5px; line-height: 1.62; color: var(--ink-600); margin-top: 16px; }
.pkg__specs {
  list-style: none;
  padding: 20px 0 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--cream-300);
  font-size: 13.5px;
  color: var(--ink-600);
  display: grid;
  gap: 9px;
}
.pkg__specs li { display: flex; gap: 11px; align-items: flex-start; }
.pkg__specs li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--ink-300);
}
.pkg__foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.pkg__price {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  font-size: 2rem;
  color: var(--ink-900);
  line-height: 1;
}
.pkg__from {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 9px;
}
.pkg__price small {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: block;
  margin-top: 8px;
}

/* --- Add-on list -------------------------------------------------------- */
.addons { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.addons li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: baseline;
}
.addon__name { font-weight: 600; color: var(--ink-800); font-size: 15px; }
.addon__price {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 15px;
  white-space: nowrap;
  text-align: right;
}
.addon__desc {
  grid-column: 1 / -1;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 3px;
}

/* --- Offer (split, dark) ------------------------------------------------ */
.offer__grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: stretch;
  gap: clamp(32px, 5vw, 80px);
}
.offer__media { display: grid; gap: 12px; align-content: start; }
.offer__media img { width: 100%; border-radius: var(--r-md); object-fit: cover; }
.offer__media img:first-child { aspect-ratio: 4 / 3.9; }
.offer__media img:last-child { aspect-ratio: 16 / 6.5; }
.offer__copy { align-self: center; max-width: 42ch; }
.offer__copy .btn-row { margin-top: 40px; }

/* --- Quote -------------------------------------------------------------- */
.quote { text-align: center; }
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink-900);
  text-wrap: balance;
}
.stars {
  display: inline-flex;
  gap: 7px;
  margin: 30px 0 24px;
  color: var(--ink-900);
  font-size: 14px;
}
.quote__body { color: var(--ink-600); max-width: 58ch; margin-inline: auto; }
.quote__cite {
  margin-top: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-style: normal;
}
.quote__slide[hidden] { display: none; }

/* --- Steps -------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  margin-top: clamp(44px, 5vw, 64px);
  counter-reset: step;
  text-align: left;
}
.step { counter-increment: step; }
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 90, "SOFT" 0, "WONK" 0;
  font-size: 2.6rem;
  color: var(--ink-300);
  line-height: 1;
  margin-bottom: 20px;
}
.step h3 { font-size: 1.22rem; margin-bottom: 10px; }
.step p { font-size: 14.5px; line-height: 1.62; color: var(--ink-600); }
.section--ink .step p { color: rgba(253, 248, 243, .68); }
.section--ink .step::before { color: rgba(253, 248, 243, .3); }

/* --- Stats -------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--cream-50);
}
.stat__label {
  margin-top: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(253, 248, 243, .5);
}

/* --- Gallery ------------------------------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: clamp(44px, 5vw, 64px);
}
.gallery figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-300);
  aspect-ratio: 4 / 3.4;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.gallery figure:hover img { transform: scale(1.04); }

/* --- Accordion / FAQ ---------------------------------------------------- */
.faq { max-width: 840px; margin-inline: auto; margin-top: clamp(36px, 4vw, 52px); text-align: left; }
.faq details { border-top: 1px solid var(--cream-300); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--cream-300); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  letter-spacing: -.015em;
  color: var(--ink-900);
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-500); }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-400);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), color .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--ink-900); }
.faq details p { padding-bottom: 26px; color: var(--ink-600); max-width: 70ch; font-size: 15px; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  background: var(--ink-900);
  color: rgba(253, 248, 243, .75);
  border-radius: var(--r-lg);
  padding: clamp(44px, 6vw, 84px) clamp(28px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--cream-50); }
.cta-band p { margin-top: 16px; max-width: 44ch; }

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero {
  background: var(--ink-900);
  color: var(--cream-100);
  padding-top: calc(var(--header-h) + clamp(64px, 10vw, 128px));
  padding-bottom: clamp(64px, 10vw, 128px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: -40% 15% auto 15%;
  height: 90%;
  background: radial-gradient(circle at 50% 50%, rgba(253, 248, 243, .09), transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .h-lg { color: var(--cream-50); }
.page-hero .lede { color: rgba(253, 248, 243, .74); margin-inline: auto; }

/* --- Contact form ------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.form-field { display: flex; flex-direction: column; gap: 9px; }
.form-field--full { grid-column: 1 / -1; }
.form-field--full > .btn { align-self: flex-start; }
.form-field label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--cream-300);
  border-radius: var(--r-sm);
  background: #fff;
  padding: 15px 17px;
  font-size: 15px;
  transition: border-color .25s, box-shadow .25s;
}
.form-field textarea { resize: vertical; min-height: 150px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink-400);
  box-shadow: 0 0 0 4px var(--cream-200);
}
.form-status {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--ink-700);
  background: var(--cream-200);
  border-radius: var(--r-sm);
  padding: 15px 17px;
}
.form-status[hidden] { display: none; }

.info-card {
  background: var(--cream-200);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 46px);
}
.info-card dl { display: grid; gap: 24px; margin-top: 28px; }
.info-card dt {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 6px;
}
.info-card dd { margin: 0; font-size: 15.5px; color: var(--ink-800); }
.info-card a:hover { color: var(--ink-900); }

.split {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

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

.newsletter {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(44px, 5vw, 64px);
  margin-bottom: clamp(44px, 5vw, 64px);
  border-bottom: 1px solid rgba(253, 248, 243, .12);
}
.newsletter__copy .eyebrow { margin-bottom: 14px; }
.newsletter__copy h2 { color: var(--cream-50); max-width: 22ch; }
.newsletter__note {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(253, 248, 243, .5);
}
.newsletter__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsletter__form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 15px 20px;
  border-radius: 999px;
  border: 1px solid rgba(253, 248, 243, .28);
  background: rgba(253, 248, 243, .06);
  color: var(--cream-50);
  font-size: 15px;
  transition: border-color .25s, background-color .25s;
}
.newsletter__form input::placeholder { color: rgba(253, 248, 243, .42); }
.newsletter__form input:focus {
  outline: none;
  border-color: var(--cream-100);
  background: rgba(253, 248, 243, .1);
}
.newsletter__form input[aria-invalid="true"] { border-color: var(--pink-300); }
.newsletter__form .btn { flex: 0 0 auto; }
.newsletter__status {
  flex: 1 0 100%;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(253, 248, 243, .72);
}
.newsletter__status[hidden] { display: none; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(253, 248, 243, .66);
  padding-block: clamp(64px, 8vw, 96px) 32px;
  font-size: 14px;
}
.site-footer .brand__name { color: var(--cream-50); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.footer__grid h4 {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(253, 248, 243, .4);
  margin-bottom: 18px;
}
.footer__links { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer__links a { transition: color .25s; }
.footer__links a:hover { color: var(--cream-50); }
.footer__blurb { max-width: 32ch; margin-top: 20px; color: rgba(253, 248, 243, .55); }
.footer__bottom {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 26px;
  border-top: 1px solid rgba(253, 248, 243, .1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(253, 248, 243, .4);
}

/* --- Scroll reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .booking { max-width: none; }
  .booking__panel { grid-template-columns: repeat(2, 1fr); }
  .field { border-right: 0; border-bottom: 1px solid var(--cream-300); }
  .field:nth-of-type(odd) { border-right: 1px solid var(--cream-300); }
  .booking__submit { grid-column: 1 / -1; margin: 14px 12px 6px; }
  .carousel__track { --carousel-per-view: 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Touch targets: everything tappable gets to ~44px without changing how
     it looks, using negative margins where the layout must stay put. */
  .btn--sm { padding: 15px 26px; }
  .carousel__arrow { width: 44px; height: 44px; }
  .carousel__dot { position: relative; }
  .carousel__dot::after { content: ""; position: absolute; inset: -17px; }
  .carousel__dots { gap: 16px; }
  .newsletter { grid-template-columns: 1fr; }
  .footer__links { gap: 26px; }
  .footer__links a { display: block; padding-block: 13px; margin-block: -13px; }
  .info-card dd a { display: inline-block; padding-block: 12px; margin-block: -12px; }

  .nav, .header-cta { display: none; }
  /* With the nav hidden its margin-right:auto goes with it, so the brand has
     to push the toggle to the far edge instead. */
  .brand { margin-right: auto; }
  .nav-toggle { display: grid; }
  .hero { min-height: 92svh; }
  .offer__grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  /* Welcome: photos become a band beneath the copy rather than sitting
     behind it, so the buttons never overlap them and more image shows. */
  .welcome { padding-bottom: calc(var(--welcome-band) + clamp(28px, 7vw, 48px)); }
  .welcome__deco {
    width: 50%;
    height: var(--welcome-band);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .welcome__deco--l { left: 0; }
  .welcome__deco--r { right: 0; }
  .welcome .btn-row { gap: 12px; }
  .welcome .btn-row .btn { flex: 1 1 0; min-width: 0; max-width: 210px; }

  .tiles { gap: 32px; }
  .tile { display: block; }
  .tile__media { aspect-ratio: 3 / 2; }
  .tile__label { margin-top: 14px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --header-h: 78px; }
  .booking__tabs { gap: 3px; }
  .booking__tab { flex: 1; padding: 12px 8px; font-size: 9px; letter-spacing: .1em; white-space: nowrap; }
  .booking__panel { grid-template-columns: 1fr; }
  .field, .field:nth-of-type(odd) { border-right: 0; }
  .field input, .field select { font-size: 1.25rem; }
  .carousel__track { --carousel-per-view: 1.12; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__form input { flex: 1 1 auto; padding-block: 16px; text-align: center; }
  .newsletter__form .btn { width: 100%; padding-block: 17px; }
}

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 26px;
}
.crumbs a { color: var(--ink-500); transition: color .3s; }
.crumbs a:hover { color: var(--ink-900); }
.crumbs span[aria-hidden] { color: var(--ink-300); }
.crumbs [aria-current] { color: var(--ink-900); }

/* --- Service-area pages --------------------------------------------------- */
.area-hero .lede { margin-top: 24px; }
.area-hero .btn-row { margin-top: 34px; }

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 3.4vw, 54px);
  align-items: start;
}
.area-col h2 { margin-bottom: 14px; }
.area-col p { font-size: 14.5px; line-height: 1.7; color: var(--ink-600); }

.area-list, .area-nearby {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-600);
}
.area-list li { display: flex; gap: 11px; align-items: flex-start; }
.area-list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--ink-300);
}
.area-nearby {
  justify-content: center;
  justify-items: center;
  margin-top: clamp(28px, 3vw, 40px);
  gap: 18px;
}

.area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.area-card {
  display: block;
  background: #fff;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  padding: 30px 30px 32px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.area-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.area-card__region {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 12px;
}
.area-card__blurb {
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-600);
  margin-top: 16px;
}
.note-line {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 14px;
  color: var(--ink-500);
  text-align: center;
}
.note-line a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Blog ---------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--cream-200); overflow: hidden; }
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 14px;
}
.post-card__desc {
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-600);
  margin-top: 14px;
}
.post-card time {
  margin-top: auto;
  padding-top: 20px;
  font-size: 12px;
  color: var(--ink-400);
}

/* Article body — the one place on the site with long-form running text. */
.post__date { font-size: 13px; color: var(--ink-500); margin-top: 20px; }
.post__media {
  margin-top: clamp(34px, 4vw, 52px);
  margin-bottom: clamp(34px, 4vw, 52px);
}
.post__media img {
  width: 100%;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post__body { font-size: 16.5px; line-height: 1.78; color: var(--ink-700); }
.post__body > * + * { margin-top: 22px; }
.post__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.1;
  margin-top: clamp(38px, 4vw, 54px);
}
.post__body h2 + p { margin-top: 16px; }
.post__body .lede { font-size: 1.12rem; line-height: 1.7; color: var(--ink-600); max-width: none; }
.post__body strong { color: var(--ink-900); font-weight: 600; }

/* --- Nav breathing room at six items -------------------------------------- */
@media (max-width: 1180px) {
  .nav { gap: 22px; }
}

/* --- Safety certification ------------------------------------------------
   The SIOTO mark is a third-party trademark and must appear in its own
   colours, unaltered — so unlike the partner logos it is not desaturated.
   Instead it sits on a white ground with generous space around it, which
   keeps its orange and gold from competing with the cream page. */
.cert__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 88px);
}
.cert__badge {
  display: flex;
  justify-content: center;
}
.cert__badge img {
  width: 100%;
  max-width: 380px;
  height: auto;
  /* Lock the ratio as well as the intrinsic width/height attributes. A
     certification mark must never render stretched — same discipline as the
     logo lockup. */
  aspect-ratio: 800 / 313;
  object-fit: contain;
}
.cert__copy .lede { margin-top: 22px; }

.cert__points {
  list-style: none;
  padding: 26px 0 0;
  margin: 26px 0 0;
  border-top: 1px solid var(--cream-300);
  display: grid;
  gap: 11px;
  font-size: 14.5px;
  color: var(--ink-600);
}
.cert__points li { display: flex; gap: 11px; align-items: flex-start; }
.cert__points li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--ink-300);
}
.cert__verify { margin-top: 28px; }

@media (max-width: 900px) {
  .cert__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .cert__badge img { max-width: 300px; }
}