/* ==========================================================================
   ZORA GOLF TRAVEL — site stylesheet
   Single stylesheet, no build step. Loaded by every page as
   /assets/css/site.css?v=<hash>, where the hash is stamped by _tools/build.py
   so a deploy can never serve a stale stylesheet against fresh HTML.

   The layout follows the live WordPress site at zoragolftravel.com: a
   translucent indigo header laid over a full-bleed photo hero, Heebo headings
   on Roboto body copy, cool neutral surfaces and orchid buttons.

   The palette is derived from logo/Zora Golf Travel.png: #1F1155 (the indigo
   disc) and #A45DAF (the orchid brushstroke). Both appear verbatim below. The
   greys are the live theme's own (Kadence global palette 3-8).

   Every colour below is verified by _tools/contrast.py — including the worst
   case of text over the hero scrims. Run it after any palette or scrim change;
   it exits non-zero if a documented pairing drops below its WCAG threshold.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS
   Self-hosted, so the site makes zero third-party requests. The live site
   hotlinks the same two families from Google Fonts. Both are variable fonts,
   latin subset, one file each (70KB total).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/heebo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand indigo. Sampled from logo/Zora Golf Travel.png — #1F1155 is the
         disc and 54.8% of the mark, used verbatim. --- */
  --indigo-950: #150B3A;  /* footer, deepest */
  --indigo-900: #1F1155;  /* EXACT BRAND — header, dark bands */
  --indigo-800: #2A1870;  /* raised panel on dark */
  --indigo-700: #35208A;  /* hover */

  /* --- Paper. Cool and neutral, as on the live site: white canvas, the
         theme's #F2F3F5 for alternating bands. --- */
  --paper-000: #FFFFFF;
  --paper-100: #F2F3F5;   /* band */
  --paper-200: #E6E7EB;   /* decorative border */
  --paper-300: #D3D5DB;   /* decorative border, stronger */

  /* --- Type greys, taken from the live theme --- */
  --ink-900: #283236;     /* headings */
  --ink-700: #41474D;     /* body */
  --ink-500: #5F5F5F;     /* muted */
  --ink-300: #CBC4DE;     /* muted ON DARK only */

  /* --- Brand orchid. Sampled from the logo — #A45DAF is the brushstroke ring
         and the "Zora" wordmark, 42.5% of the mark, used verbatim.

         THREE variants, because the brand colour measures 4.41:1 on white and
         4.41:1 under white — it is below 4.5 in BOTH directions and therefore
         cannot carry small text on either. The live site's buttons put white
         16px labels on it anyway; here they sit on --orchid-ink instead.
           --orchid      FILLS, rules and display text 24px+/bold ONLY.
           --orchid-ink  small text on LIGHT surfaces, AND the fill for buttons
                         carrying white small text.
           --orchid-lit  small text on DARK indigo. --- */
  --orchid: #A45DAF;
  --orchid-ink: #8E4499;
  --orchid-lit: #C48FCC;
  --orchid-hover: #7A3484;
  --orchid-wash: #F6EDF8;

  --star: #F5A524;        /* review stars — decorative, the label carries it */
  --whatsapp: #128C4B;    /* darkened from the brand green so the white glyph clears 3:1 */

  /* --- Interactive boundary. NOT paper-300: a divider is decorative and
         exempt from WCAG 1.4.11, but an input outline IS the component and
         must clear 3:1. --- */
  --border-input: #7E8389;

  /* --- Focus ring. Deliberately blue, not orchid, so focus is never mistaken
         for a brand accent or a hover state. It does NOT clear 3:1 on an orchid
         fill — those switch to a white ring, see .btn--primary below. --- */
  --focus: #2B7FFF;

  /* --- Semantic assignments: components use these, never the raw palette --- */
  --bg-canvas: var(--paper-000);
  --bg-band: var(--paper-100);
  --bg-inverse: var(--indigo-900);
  --fg-strong: var(--ink-900);
  --fg-body: var(--ink-700);
  --fg-muted: var(--ink-500);
  --fg-on-dark: var(--paper-000);
  --fg-on-dark-muted: var(--ink-300);
  --border-subtle: var(--paper-200);
  --border-strong: var(--paper-300);
  --border-on-dark: rgb(255 255 255 / 0.35);

  /* --- Hero scrims. The opacities are what contrast.py checks against the
         worst-case photo pixel — change them there too. --- */
  --scrim-dark: rgb(21 11 58 / 0.68);     /* indigo-950 at 68% */
  --scrim-light: rgb(255 255 255 / 0.72); /* the live home hero's white wash */
  --header-bg: rgb(31 17 85 / 0.88);      /* indigo-900 at 88%, over the hero */

  /* --- Type --- */
  --font-display: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;

  --display-xs: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --display-sm: clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
  --display-md: clamp(1.75rem, 1.35rem + 1.9vw, 2.6rem);
  --display-lg: clamp(2.1rem, 1.5rem + 2.9vw, 3.5rem);

  --leading-display: 1.15;
  --leading-tight: 1.25;
  --leading-body: 1.7;
  --tracking-label: 0.12em;
  --measure: 68ch;

  /* --- Spacing: 4px base --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-y: clamp(3.25rem, 2rem + 5.5vw, 6rem);
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 84px;

  --radius-sm: 0.25rem;   /* buttons — square-shouldered, as on the live site */
  --radius-md: 0.5rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --shadow-md: 0 4px 10px rgb(16 24 40 / 0.08), 0 10px 24px rgb(16 24 40 / 0.10);
  --shadow-lg: 0 8px 18px rgb(16 24 40 / 0.10), 0 24px 48px rgb(16 24 40 / 0.16);

  --duration-fast: 150ms;
  --duration-base: 240ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 30;
  --z-drawer: 40;
  --z-bar: 45;
}
@media (min-width: 1080px) { :root { --header-h: 120px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-canvas); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-body);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3, h4 { font-weight: 600; letter-spacing: 0; }
h1 { font-size: var(--display-lg); line-height: var(--leading-display); }
h2 { font-size: var(--display-md); }
h3 { font-size: var(--display-sm); }
h4 { font-size: var(--display-xs); }

p { max-width: var(--measure); }
p + p { margin-top: var(--space-4); }

a { color: var(--orchid-ink); text-underline-offset: 0.18em; }
a:hover { color: var(--orchid-hover); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--indigo-900);
  color: #fff;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--band { background: var(--bg-band); }
.section--dark {
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--orchid-lit); }

/* Dark surfaces, listed once. Anything that flips text to light reads this. */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--orchid-ink);
  margin-bottom: var(--space-3);
}
:is(.section--dark, .card--cta) .eyebrow { color: var(--orchid-lit); }
/* Not orchid-lit over a photo: against the worst-case scrim it falls to 2.5:1. */
.photohero .eyebrow { color: #fff; }
.eyebrow--center { text-align: center; }

.lede {
  font-size: var(--text-lg);
  color: var(--fg-muted);
  max-width: 60ch;
}
.section--dark .lede { color: var(--fg-on-dark-muted); }
.lede--center { margin-inline: auto; text-align: center; }

.accent { color: var(--orchid-ink); }
:is(.section--dark, .card--cta) .accent { color: var(--orchid-lit); }

.section__head { margin-bottom: var(--space-7); }
.section__head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section__head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Hub grid: one tall feature card beside a 2x2 of the rest. Used on the
   destination, course and package hubs, where there is a natural lead item.
   Falls back to a plain grid below 1000px. */
@media (min-width: 1000px) {
  .grid--feature { grid-template-columns: 1.3fr 1fr 1fr; }
  .grid--feature > :first-child { grid-row: span 2; }
  .grid--feature > :first-child .card__img { aspect-ratio: auto; flex: 1; min-height: 260px; }
  .grid--feature > :first-child h3 { font-size: var(--display-md); }
  /* The lead spans two rows and four cards fill the 2x2 beside it, which
     leaves a sixth card stranded in a half-empty row. All three hubs carry
     exactly six, so the tail runs full width as a horizontal card. */
  .grid--feature > :nth-child(6):last-child { grid-column: 1 / -1; flex-direction: row; }
  .grid--feature > :nth-child(6):last-child .card__img { width: 40%; aspect-ratio: auto; }
  .grid--feature > :nth-child(6):last-child .card__body { align-self: center; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .grid--feature { grid-template-columns: repeat(2, 1fr); }
}

/* Image beside text — the live site's about-page pattern. */
.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); } }
.split .lede { margin-top: var(--space-4); }
.split .btn-row { margin-top: var(--space-6); }

/* The arch: a photo with a fully rounded top, as on the live about page. */
.arch {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.ticks { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.ticks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--orchid-ink); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }

/* Fill is --orchid-ink, NOT the exact brand --orchid: a 16px label needs 4.5:1,
   and on the brand mid-tone white fails in both directions. */
.btn--primary, .btn--accent { background: var(--orchid-ink); color: #fff; }
.btn--primary:hover, .btn--accent:hover {
  background: var(--orchid-hover);
  color: #fff;
  box-shadow: 0 12px 24px -8px rgb(122 52 132 / 0.45);
}
/* On an orchid fill the blue focus ring is effectively invisible. */
.btn--primary:focus-visible, .btn--accent:focus-visible { outline-color: #fff; outline-offset: -5px; }

.btn--ghost {
  background: transparent;
  color: var(--fg-strong);
  border-color: var(--ink-900);
}
.btn--ghost:hover { border-color: var(--orchid-ink); color: var(--orchid-ink); }
/* Every dark surface must be listed here, or a ghost button renders a dark
   label on a dark background. The home hero is light, so it is excluded. */
:is(.section--dark, .card--cta, .photohero:not(.photohero--home)) .btn--ghost {
  color: #fff;
  border-color: var(--border-on-dark);
}
:is(.section--dark, .card--cta, .photohero:not(.photohero--home)) .btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. HEADER + NAV
   A translucent indigo bar that sits OVER the hero photo, as on the live
   site. It is sticky, and each hero pulls itself up underneath it with a
   negative margin — see .photohero.
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}

/* The logo is a circular badge with the wordmark inside it, used on its own.
   It runs large, as on the live site, so the inner "Zora" still reads. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img { width: 68px; height: auto; }
@media (min-width: 1080px) { .header .brand img { width: 104px; } }

/* The logo disc is #1F1155 and the footer is #150B3A — near-identical, so the
   mark would sink into the background. The chip puts it back on white. */
.brand--chip {
  background: var(--paper-000);
  border-radius: var(--radius-pill);
  padding: var(--space-2);
}
.brand--chip img { width: 72px; }

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-2);
}
.nav__group { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--orchid-lit); }
/* Current page: orchid with an underline, as on the live site. */
.nav__link[aria-current="page"] {
  color: var(--orchid-lit);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav__caret { width: 11px; height: 8px; transition: transform var(--duration-fast) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  padding: var(--space-5);
  background: var(--paper-000);
  border-top: 3px solid var(--orchid);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              visibility var(--duration-fast);
}
.panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.panel--wide { min-width: 560px; }
.panel--right { left: auto; right: 0; }
.panel__grid { display: grid; gap: var(--space-5); grid-auto-flow: column; }
.panel__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-2);
}
.panel__list { display: flex; flex-direction: column; }
.panel__item {
  display: block;
  padding: var(--space-2) 0;
  color: var(--fg-body);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}
.panel__item:hover, .panel__item[aria-current="page"] { color: var(--orchid-ink); }

.header__cta { display: none; align-items: center; gap: var(--space-4); flex: none; }
.header__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-on-dark);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.header__tel svg { width: 15px; height: 15px; color: var(--orchid-lit); }
.header__tel:hover { color: var(--orchid-lit); }
/* Seven menu items, the Instagram and phone links and the CTA don't fit
   between 1080px and 1500px, so the phone shows as an icon there (the full
   number is in the footer and the mobile call bar) and the links tighten. */
@media (max-width: 1499px) {
  .header__tel-num { display: none; }
  .header__tel svg { width: 20px; height: 20px; }
  .header__tel { min-width: 44px; min-height: 44px; justify-content: center; }
  .header__cta { gap: var(--space-3); }
  .nav { gap: 0; }
  .nav__link { padding-inline: var(--space-2); }
}

.burger {
  margin-left: auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
}
.burger span, .burger span::before, .burger span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1080px) {
  .nav { display: flex; }
  .header__cta { display: flex; }
  .burger { display: none; }
}
/* Seven nav items, a phone number and a button do not fit beside a 104px
   badge until the viewport is wide; the number drops first. */
@media (min-width: 1080px) and (max-width: 1279px) { .header__tel { display: none; } }

/* --- Mobile drawer --- */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 auto;
  z-index: var(--z-drawer);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--paper-000);
  border-bottom: 3px solid var(--orchid);
  box-shadow: var(--shadow-lg);
  display: none;
  padding-block: var(--space-3) var(--space-6);
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 1080px) { .drawer { display: none !important; } }

.drawer__acc { border-bottom: 1px solid var(--border-subtle); }
.drawer__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.drawer__panel { display: none; padding-bottom: var(--space-3); }
.drawer__panel[data-open="true"] { display: block; }
.drawer__link {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  color: var(--fg-body);
  font-size: var(--text-sm);
  text-decoration: none;
}
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--orchid-ink); }

/* --- Sticky mobile action bar --- */
.actionbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-bar);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--paper-000);
  border-top: 1px solid var(--border-subtle);
}
.actionbar .btn { flex: 1; min-height: 46px; padding-inline: var(--space-3); }
@media (min-width: 1080px) { .actionbar { display: none; } }
@media (max-width: 1079px) { body { padding-bottom: 84px; } }

/* --- Floating WhatsApp button, as on the live site. Sits above the mobile
       action bar rather than on top of it. --- */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease);
}
.whatsapp svg { width: 30px; height: 30px; }
.whatsapp:hover { color: #fff; transform: scale(1.06); }
@media (min-width: 1080px) { .whatsapp { right: 28px; bottom: 28px; width: 60px; height: 60px; } }

/* --- Back-to-top arrow, stacked above the WhatsApp button. Hidden until the
       visitor has scrolled (site.js adds .is-shown). --- */
.totop {
  position: fixed;
  right: 24px;
  bottom: calc(96px + 56px + 14px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orchid-ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease),
              visibility 0s linear var(--duration-fast);
}
.totop.is-shown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.totop svg { width: 22px; height: 22px; }
.totop:hover { color: #fff; transform: translateY(-2px); }
.totop:focus-visible { outline: 3px solid var(--orchid-lit); outline-offset: 3px; }
@media (min-width: 1080px) { .totop { right: 34px; bottom: calc(28px + 60px + 14px); } }

/* --------------------------------------------------------------------------
   6. PHOTO HERO
   Full-bleed photograph behind the page title, on every page. The header is
   sticky and translucent, so the hero is pulled up underneath it by its own
   height and pads its content back down.

   Two scrims:
     default        indigo, white text — the live packages-page hero
     --home         white wash, dark text — the live homepage hero
   The photo is an <img>, not a CSS background, so it can carry alt text,
   srcset and fetchpriority (it is the LCP element on every page).
   -------------------------------------------------------------------------- */
.photohero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8);
  min-height: clamp(420px, 62vh, 620px);
  background: var(--indigo-900);
  color: var(--fg-on-dark);
  text-align: center;
  overflow: hidden;
}
.photohero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photohero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-dark);
}
.photohero__inner { display: flex; flex-direction: column; align-items: center; }
.photohero h1 { color: #fff; max-width: 22ch; }
.photohero .lede { color: var(--fg-on-dark); margin-top: var(--space-4); }
.photohero .btn-row { margin-top: var(--space-6); }

.photohero--home {
  min-height: min(100svh, 940px);
  background: var(--paper-100);
  color: var(--fg-body);
  padding-bottom: var(--space-7);
}
.photohero--home::before { background: var(--scrim-light); }
.photohero--home h1 { color: var(--fg-strong); max-width: 24ch; }
.photohero--home .lede { color: var(--fg-body); }

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg-strong);
  max-width: none;
}
.rating__stars { display: inline-flex; gap: 3px; color: var(--star); }
.rating__stars svg { width: 22px; height: 22px; }

/* The white strip of three perks across the bottom of the home hero. */
.perks {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 1100px;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--paper-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.perks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-strong);
}
.perks__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orchid-wash);
  color: var(--orchid-ink);
}
.perks__icon svg { width: 24px; height: 24px; }
@media (min-width: 800px) {
  .perks { grid-template-columns: repeat(3, 1fr); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3); }
}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-000);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.card__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.card h3 { margin-bottom: var(--space-2); font-size: var(--display-xs); }
.card p { font-size: var(--text-sm); }

/* Explicit colour, not inherit: a white card inside .section--dark would
   otherwise inherit white copy. */
a.card { text-decoration: none; color: var(--fg-body); transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); color: var(--fg-body); }
a.card:hover .card__img { transform: scale(1.04); }
a.card h3 { color: var(--fg-strong); }
a.card:hover h3 { color: var(--orchid-ink); }

.card--cta {
  background: var(--indigo-900);
  border-color: var(--indigo-900);
  color: var(--fg-on-dark);
  text-align: center;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-6);
}
.card--cta h2 { color: #fff; }
.card--cta .lede { color: var(--fg-on-dark-muted); margin: var(--space-5) auto var(--space-6); }

.card__meta {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--orchid-ink);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   8. BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--orchid-ink); text-decoration: underline; }
.crumbs svg { width: 12px; height: 12px; opacity: 0.6; }
.crumbs span { color: var(--fg-strong); font-weight: 600; }

/* Breadcrumbs live inside the dark photo hero on every interior page, so the
   light-surface colours above would put ink-900 on indigo. */
:is(.photohero, .section--dark) .crumbs { justify-content: center; color: var(--fg-on-dark); }
:is(.photohero, .section--dark) .crumbs a { color: var(--fg-on-dark); }
:is(.photohero, .section--dark) .crumbs a:hover { color: #fff; }
:is(.photohero, .section--dark) .crumbs span { color: #fff; }

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border-subtle); }
.faq__item h3 { font-size: inherit; margin: 0; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--display-xs);
  font-weight: 600;
  color: var(--fg-strong);
}
.faq__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--orchid-ink);
  transition: transform var(--duration-fast) var(--ease);
}
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease); }
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; }
.faq__inner > div { padding-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   10. PROSE (article body)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); font-size: var(--text-md); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-7); }
.prose ul, .prose ol { padding-left: 1.35em; display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--orchid-ink); }

/* --------------------------------------------------------------------------
   11. STUB NOTICE — staging only
   Every page carries this until its real content is written. It is the visible
   counterpart to the noindex tag; both disappear together.
   -------------------------------------------------------------------------- */
.stub {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--orchid-wash);
  border-left: 4px solid var(--orchid);
  border-radius: var(--radius-sm);
}
.stub p { font-size: var(--text-sm); margin: 0; }
.stub strong { color: var(--fg-strong); }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--indigo-950);
  color: var(--fg-on-dark-muted);
  padding-block: var(--space-9) var(--space-6);
}
.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr repeat(5, 1fr); } }

.footer__about { font-size: var(--text-sm); margin-top: var(--space-4); max-width: 40ch; }
.footer__h {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--orchid-lit);
  margin-bottom: var(--space-3);
}
.footer__list { display: flex; flex-direction: column; }
.footer__list a {
  padding-block: 5px;
  color: var(--fg-on-dark-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.footer__list a:hover { color: #fff; text-decoration: underline; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--text-xs);
}
.footer__bar p { max-width: none; }
.footer__bar a { color: var(--orchid-lit); text-decoration: none; }
.footer__bar a:hover { text-decoration: underline; }
.footer__bar { align-items: baseline; }
.footer__bar p { margin: 0; }
.footer__credit { flex-basis: 100%; color: var(--fg-on-dark-muted); }
@media (min-width: 720px) { .footer__credit { text-align: center; } }

/* --------------------------------------------------------------------------
   13. REVEAL ON SCROLL
   Progressive enhancement. site.js adds .js-reveal to <html> before first
   paint; without JS every element stays visible, which is the point.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   14. ARTICLE — the AIO house format
   Page copy in _tools/content/ follows _docs/content-workflow.md: an
   .introduction, 4–8 .content-section blocks, .paa-inline-section Q&As, a
   .faq-section and a closing .conclusion. The H1 is lifted into the photo
   hero, so the article starts at the introduction.
   -------------------------------------------------------------------------- */
.container--article { max-width: 860px; }
.prose-aio { font-size: var(--text-md); }
.prose-aio > * + * { margin-top: var(--space-8); }
.prose-aio h2 { font-size: var(--display-md); margin-bottom: var(--space-4); }
.prose-aio h3 { font-size: var(--display-xs); margin: var(--space-6) 0 var(--space-3); }
.prose-aio p + p { margin-top: var(--space-4); }
.prose-aio ul, .prose-aio ol { padding-left: 1.3em; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.prose-aio li::marker { color: var(--orchid-ink); }
.prose-aio .introduction p:first-child { font-size: var(--text-lg); color: var(--fg-strong); }

.snippet-answer {
  padding: var(--space-4) var(--space-5);
  background: var(--orchid-wash);
  border-left: 4px solid var(--orchid);
  border-radius: var(--radius-sm);
  color: var(--fg-strong);
  margin-bottom: var(--space-4);
}
.faq-section .paa-inline-section + .paa-inline-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.faq-section .paa-inline-section h2 { font-size: var(--display-sm); }
.faq-heading { text-align: center; }

.table-scroll { overflow-x: auto; margin-top: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-scroll th, .table-scroll td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.table-scroll th { background: var(--indigo-900); color: #fff; font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.table-scroll tbody tr:nth-child(even) { background: var(--paper-100); }
.table-scroll td:first-child { font-weight: 600; color: var(--fg-strong); }

.conclusion {
  padding: var(--space-7) var(--space-6);
  background: var(--paper-100);
  border-radius: var(--radius-lg);
}
.eeat-conclusion-trust {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}
.sources { font-size: var(--text-sm); color: var(--fg-muted); }
.sources ol { margin-top: var(--space-3); }
.sources a { word-break: break-word; }
.sources li { scroll-margin-top: calc(var(--header-h) + var(--space-5)); border-radius: 4px; }
.sources li:target { background: rgba(164, 93, 175, .14); outline: 4px solid rgba(164, 93, 175, .14); }
.cite { font-size: .72em; line-height: 0; }
.cite a { font-weight: 600; text-decoration: none; padding-inline: 1px; }
.cite a:hover, .cite a:focus-visible { text-decoration: underline; }

.article-figure { margin-block: var(--space-7); }
.article-figure__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); }
.article-figure figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--fg-muted); }
.article-figure figcaption a { color: var(--fg-muted); }

/* --- Article broken up with photos (see pages._layout) --------------------
   An article is a run of .section--article chunks separated by full-width
   .backdrop bands. Chunks keep the article's own rhythm, so only the band
   breaks it. */
.section--article { padding-block: var(--space-8); }
.section--article + .section--article { padding-top: 0; }
.prose-aio > .article-figure:first-child { margin-top: 0; }

.backdrop {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 52vh, 520px);
  padding-block: var(--space-8);
  background: var(--indigo-900);
  color: var(--fg-on-dark);
  text-align: center;
  overflow: hidden;
}
.backdrop__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.backdrop::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim-dark); }
.backdrop__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.backdrop__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #fff;
}
.backdrop__line {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: var(--display-md);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: #fff;
  text-wrap: balance;
}

/* --- Google reviews ---------------------------------------------------------- */
.reviews { columns: 1; column-gap: var(--space-5); }
@media (min-width: 760px) { .reviews { columns: 2; } }
@media (min-width: 1100px) { .reviews { columns: 3; } }
.reviews--three { columns: auto; display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .reviews--three { grid-template-columns: repeat(3, 1fr); } }
.review {
  break-inside: avoid;
  margin: 0 0 var(--space-5);
  padding: var(--space-6);
  background: var(--paper-000);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.reviews--three .review { margin: 0; }
.review__stars { display: flex; gap: 3px; color: var(--star); margin-bottom: var(--space-4); }
.review__stars svg { width: 18px; height: 18px; }
.review__text p { font-size: var(--text-sm); color: var(--fg-body); }
.review__text p + p { margin-top: var(--space-3); }
.review__by { margin-top: var(--space-4); font-size: var(--text-xs); font-weight: 600; color: var(--fg-muted); }
.reviews__more { margin-top: var(--space-6); text-align: center; max-width: none; }

.header__ig { display: inline-flex; color: var(--fg-on-dark); }
.header__ig svg { width: 22px; height: 22px; }
.header__ig:hover { color: var(--orchid-lit); }

/* Official club website strip, after a course article */
.club-site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-strong); border-radius: 8px;
}
.club-site p { margin: 0; max-width: 46ch; }
.club-site .eyebrow { display: block; margin-bottom: var(--space-1); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Gallery: portrait cover frames from Zora's Instagram reels */
.gallery {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery__tile {
  position: relative; display: block; overflow: hidden; border-radius: 8px;
  aspect-ratio: 4 / 5; background: var(--plum-900, #1F1155); color: #fff;
}
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery__tile:hover img, .gallery__tile:focus-visible img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .gallery__tile img { transition: none; } }
.gallery__cap {
  position: absolute; inset: auto 0 0; padding: var(--space-6) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(15, 8, 40, .88), rgba(15, 8, 40, 0));
  font-size: var(--text-sm); line-height: 1.35;
}
.gallery__cap strong { display: block; font-size: var(--text-base); }

.gallery-group--next { margin-top: var(--space-9, 4.5rem); }

/* Play badge on gallery tiles that have a reel */
.gallery__play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(15, 8, 40, .62); color: #fff; pointer-events: none;
  transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.gallery__play svg { width: 26px; height: 26px; margin-left: 3px; }
.gallery__tile:hover .gallery__play, .gallery__tile:focus-visible .gallery__play {
  background: var(--orchid-ink); transform: scale(1.08);
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* Reel block: a portrait clip beside its text (course pages, homepage) */
.reel {
  display: grid; gap: var(--space-6); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .reel { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: var(--space-8); } }
.reel__media { max-width: 260px; width: 100%; margin-inline: auto; }
@media (min-width: 720px) { .reel__media { max-width: 340px; } }
.reel__video {
  display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover;
  border-radius: 12px; background: #150B3A; box-shadow: var(--shadow-lg);
}
.reel__text h2 { margin-top: var(--space-2); }
.reel__text .btn-row { margin-top: var(--space-5); }

/* Reel dialog on the gallery page */
.reel-dialog {
  position: fixed; inset: 0; margin: auto; height: fit-content; overflow: visible;
  padding: 0; border: 0; background: transparent; max-width: min(420px, 88vw); width: 100%;
}
.reel-dialog::backdrop { background: rgba(10, 5, 30, .82); }
.reel-dialog__box { position: relative; }
.reel-dialog__video {
  display: block; width: 100%; max-height: 78vh; border-radius: 12px; background: #000;
}
.reel-dialog__cap { margin: var(--space-3) 0 0; color: #fff; font-size: var(--text-sm); text-align: center; }
.reel-dialog__cap a { color: var(--orchid-lit); }
.reel-dialog__close {
  position: absolute; top: -14px; right: -14px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #fff; color: #150B3A; font-size: 28px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.reel-dialog__close:focus-visible { outline: 3px solid var(--orchid-lit); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Trip enquiry form (contact, package and course pages)
   -------------------------------------------------------------------------- */
.enquiry {
  padding: var(--space-6); border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--bg-canvas);
}
@media (min-width: 720px) { .enquiry { padding: var(--space-7); } }
.enquiry__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .enquiry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--fg-body); }
.field em { font-style: normal; font-weight: 400; color: var(--fg-muted); }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: 8px; background: #fff;
  font: inherit; font-weight: 400; font-size: 16px; color: var(--fg-body);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--orchid-ink); outline-offset: 1px; border-color: var(--orchid-ink);
}
.field input[aria-invalid="true"] { border-color: #B42318; }
.enquiry__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.enquiry__send { background: #0E7A40; }   /* darker than --whatsapp so white text clears 4.5:1 */
.enquiry__send:hover { background: #0B6534; }
.enquiry__send svg { width: 20px; height: 20px; }
.enquiry__note { margin: 0; max-width: 42ch; font-size: var(--text-sm); color: var(--fg-muted); }