/* ── Palette / Typography / Spacing tokens — mirror of DESIGN.md ──
   Mirror DESIGN.md changes here. NEVER hardcode hex codes outside :root. */
:root {
  /* GATE 2 — palette. Meridian Global Hub: navy + black + champagne gold on warm cream. */
  --bg:        #F6F4EE;   /* warm cream paper — premium, NOT generic off-white */
  --surface:   #FFFFFF;   /* elevated card surface */
  --ink:       #0B0B0F;   /* near-black, never pure #000 — body text + dark bands */
  --ink-muted: #5A5A65;   /* secondary text */
  --accent:    #0A1F44;   /* deep navy — primary brand: headlines, CTAs, links */
  --accent-2:  #C9A24B;   /* champagne gold — signature hairline rules + eyebrows */
  --border:    rgba(11, 11, 15, 0.10);
  --border-strong: rgba(11, 11, 15, 0.18);
  --gold-soft: rgba(201, 162, 75, 0.18);

  /* GATE 3 — typography pair from DESIGN.md: editorial serif + crisp sans. */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* GATE 11 — spacing tokens on a 4/8px ladder. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii on a single scale. */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* GATE 12 — multi-layer shadow tokens. */
  --shadow-card:        0 4px 12px rgba(11, 11, 15, 0.06), 0 1px 3px rgba(11, 11, 15, 0.04);
  --shadow-card-hover:  0 18px 40px -10px rgba(11, 11, 15, 0.18), 0 4px 12px rgba(11, 11, 15, 0.08);
  --shadow-elevated:    0 30px 60px -20px rgba(11, 11, 15, 0.25), 0 6px 16px rgba(11, 11, 15, 0.08);

  /* Motion. GATE 13 — transitions live in the 200-300ms range. */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   180ms;
  --t-base:   240ms;

  --width:        1180px;
  --width-narrow: 720px;
}

/* ── Reset / base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: var(--bg); }

/* ── Display typography (Fraunces — editorial serif) ──────────── */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--accent);
}
h1.display, .hero h1 {
  /* GATE 4 — hero h1 IS massive. Fraunces at 144 opsz = display optical size. */
  font-size: clamp(2.75rem, 6.8vw, 5.5rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
h2, .display.h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--accent);
  margin-bottom: var(--space-6);
}
h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--accent);
  margin: var(--space-2) 0 var(--space-3);
}
h4 {
  color: var(--accent);
}
h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}
p { color: var(--ink-muted); margin-bottom: var(--space-4); max-width: 65ch; }

/* ── Layout primitives ────────────────────────────────────────── */
.container {
  max-width: var(--width);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container.narrow { max-width: var(--width-narrow); }

.section {
  /* GATE 11 — section padding scales fluidly, never a one-off 2rem. */
  padding-block: clamp(3rem, 8vw, 6rem);
}
.section-tight {
  /* Used for the stats strip directly under the hero — half the vertical
     padding so the strip reads as part of the hero zone, not a new chapter. */
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.section-soft {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.section-center {
  /* Centers narrow content sections (about / mission) so the eyebrow + h2
     don't float awkwardly on the left edge of a centered narrow container. */
  text-align: center;
}
.section-center .eyebrow,
.section-center .display {
  margin-inline: auto;
}
.section-center p {
  margin-inline: auto;
}
.section-lead {
  /* Subtitle paragraph between an h2 and a card grid. Slightly larger than
     body copy so it pairs with the display heading instead of fading away. */
  font-size: 1.0625rem;
  max-width: 56ch;
  margin-bottom: var(--space-8);
}

/* GATE 6 — every list of similar items goes in .grid + grid-N. */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── Eyebrow + signature gold hairline (GATE 10 — the signature move) ──
   Every eyebrow renders its label in Inter caps, navy, with a 32px
   champagne-gold rule directly underneath. This is the ONE ornament
   carried across the whole site (also reused on service-card hover and
   as section dividers on the dark booking section). */
.eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  color: var(--accent);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent-2);
  border-radius: 2px;
}
/* On centered sections, the bar centers under the label. */
.section-center .eyebrow { align-items: center; }

/* Cool variant — gold label + navy rule (used sparingly on dark sections
   via .eyebrow-on-dark instead). Kept for the cool-tinted CTAs. */
.eyebrow-cool {
  color: var(--accent-2);
}
.eyebrow-cool::after { background: var(--accent); }

/* On dark sections (booking band) the eyebrow inverts to gold-on-navy. */
.eyebrow-on-dark {
  color: var(--accent-2);
}
.eyebrow-on-dark::after {
  background: var(--accent-2);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  /* GATE 13 — every interactive element has hover + transition. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(10, 31, 68, 0.55), 0 1px 3px rgba(11,11,15,0.08);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent-2);
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(10, 31, 68, 0.65), 0 2px 6px rgba(11,11,15,0.10);
  color: #fff;
}
.btn-primary:hover::before { transform: scaleX(1); }

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-2px);
}

/* Ghost button — used on dark sections and as a tertiary action. */
.btn-ghost {
  background: transparent;
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 50%, transparent);
}
.btn-ghost:hover {
  background: var(--accent-2);
  color: var(--ink);
  border-color: var(--accent-2);
  transform: translateY(-2px);
}

/* Size variants. */
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: 1rem; letter-spacing: 0.01em; }

/* ── Nav (GATE 5) — semi-opaque cream + blur, gold accent active state ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 244, 238, 0.88);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.logo:hover { color: var(--ink); }
.logo-img {
  /* User-uploaded brand mark. The source image has generous whitespace
     above the wordmark so we visually crop it with object-fit + a tighter
     declared height — keeps the lockup aligned with the nav baseline. */
  height: 80px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  object-position: left center;
  display: block;
  /* Pull the visible mark up so the empty whitespace at the top of the
     source image doesn't push the nav row taller than other items, and
     keep the larger lockup from inflating header height. */
  margin-block: -18px;
}
.logo-img-dark {
  /* Footer sits on near-black ink. Logo renders transparently on the dark
     band — no chip, no padding — so it reads as the brand mark, not a tile. */
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-block: 0;
  height: 88px;
  max-width: 320px;
  /* Light the gold/navy artwork against the near-black footer with a faint
     drop-shadow so the wordmark separates from the background. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
@media (max-width: 768px) {
  .logo-img { height: 64px; max-width: 220px; margin-block: -12px; }
  .logo-img-dark { height: 72px; max-width: 260px; }
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  font-variation-settings: "opsz" 24;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-links a {
  position: relative;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.92rem;
  padding: var(--space-2) 0;
  letter-spacing: 0.005em;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--accent); }
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }
.nav-links a.btn { padding: var(--space-3) var(--space-5); }
.nav-links a.btn::after { display: none; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.4rem;
  cursor: pointer;
  padding: var(--space-2);
}

/* ── Hero — asymmetric layout, navy on cream, gold "EST." meta column ── */
.hero {
  position: relative;
  background:
    radial-gradient(45% 60% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%),
    radial-gradient(35% 50% at 100% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    var(--bg);
  text-align: left;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero::before {
  /* Subtle paper grain — premium feel without an image asset. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(10,31,68,0.04) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201,162,75,0.05) 0, transparent 50%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: var(--width);
  padding-block: clamp(3rem, 7vw, 6rem);
  padding-right: clamp(0px, 6vw, 80px);
}
.hero-inner::after {
  /* Asymmetric signature: vertical "EST. 2014 · LONDON" meta column on the
     right edge of the hero, gold hairline + Inter caps. Pure CSS, no markup
     pollution — keeps the .hero-meta list semantic for the stat triplet below. */
  content: "EST. 2014 · LONDON";
  position: absolute;
  top: 50%;
  right: clamp(0.5rem, 1.5vw, 1.5rem);
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--space-6) 0 var(--space-6) var(--space-4);
  border-left: 1px solid var(--accent-2);
  pointer-events: none;
}
@media (max-width: 880px) {
  .hero-inner { padding-right: 0; }
  .hero-inner::after { display: none; }
}
.hero-accent {
  /* Italic gold accent line nested inside the headline — picks up the
     signature champagne color and contrasts with the navy display weight. */
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-2);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.hero h1 {
  max-width: 16ch;
}
.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  color: var(--ink-muted);
  max-width: 56ch;
  margin-block: var(--space-5) var(--space-8);
  line-height: 1.6;
}
.cta-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Hero stat triplet — sits below the CTAs as a horizontal proof-point row.
   Gold hairline divider above, three stats in a flex row, navy numerals,
   ink-muted caption text. Collapses to a stacked column on mobile. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--accent-2);
  list-style: none;
  max-width: 640px;
}
.hero-meta li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}

/* ── Trusted-by logo strip — subtle muted band under the hero ── */
.logo-strip {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--space-8);
}
.strip-label,
.logo-strip-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: var(--space-5);
}
.strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink-muted));
  opacity: 0.75;
  transition: opacity var(--t-base) var(--ease);
}
.strip-row:hover { opacity: 1; }
.strip-row span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.strip-row span::before {
  content: "◆";
  color: var(--accent-2);
  font-size: 0.6em;
  margin-right: var(--space-1);
}

/* ── Section heading helper (eyebrow + h2 + lead bundle) ──────── */
.section-head { max-width: 60ch; margin-bottom: var(--space-10); }
.section-head .section-lead { margin-bottom: 0; }
.section-head-light h2,
.section-head-light .display { color: #fff; }
.section-head-light .section-lead { color: color-mix(in srgb, #fff 70%, transparent); }
.section-head-light .eyebrow { color: var(--accent-2); }
.section-head-light .eyebrow::after { background: var(--accent-2); }

/* ── Cards (GATES 6 + 12) ─────────────────────────────────────── */
.card {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}
.feature .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.feature p { margin-bottom: var(--space-5); }

/* ── Service cards — the meat of the consultancy site ─────────────────────
   Each card has a navy icon medallion, a Fraunces title, body copy, and a
   "Book this →" CTA. Hover lifts the card AND draws a 32px gold rule under
   the title — the signature underline reused as a hover signal. */
.service {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-8) var(--space-7);
  cursor: pointer;
  isolation: isolate;
}
.service::before {
  /* Top-edge navy bar that grows on hover — adds an active feel. */
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.service:hover::before { transform: scaleX(1); }
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-2);
  font-size: 1.5rem;
  margin-bottom: var(--space-5);
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.service:hover .service-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--ink);
}
.service h3 {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
}
.service h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--accent-2);
  transition: width var(--t-base) var(--ease);
}
.service:hover h3::after { width: 64px; }
.service p { flex: 1; margin-bottom: var(--space-5); }
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  align-self: flex-start;
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.service-cta::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.service:hover .service-cta { color: var(--ink); gap: var(--space-3); }
.service:hover .service-cta::after { transform: translateX(4px); }

/* ── Process cards — numbered 01 / 02 / 03 / 04 step strip ────────────── */
.process-card {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-7);
  text-align: left;
}
.process-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--accent-2);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}
.process-card h3 { margin-bottom: var(--space-2); }
.process-card p { margin-bottom: 0; }

/* ── About / why-us split ─────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.about-card {
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(160deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--accent-2) 5%, var(--surface)) 100%);
  border-left: 3px solid var(--accent-2);
}
.about-card h3 { margin-top: 0; }

/* Check-list — tick + label pairs used in the why-us column. The HTML
   wraps the tick in an inline <span class="check">✓</span> already, so we
   style THAT span as the navy/gold medallion and leave the list item itself
   as a flex row. No competing pseudo-elements. */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 0;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.5;
}
.check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2)));
  color: var(--accent-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Subtle in-card link — every feature card ends with one to give cards a
   clear "next action", which keeps them from feeling like dead read-only
   blocks. The arrow nudges right on hover (GATE 13). */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.card-link::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.card-link:hover { color: var(--ink); }
.card-link:hover::after { transform: translateX(3px); }

/* ── Stat cards (proof-point strip under the hero) ───────────────────────
   Smaller padding than feature cards, big display-font number, all-caps
   label underneath. The 4-column auto-fit grid collapses gracefully:
   4 → 2 → 1 columns as the viewport narrows. */
.stat-grid { gap: var(--space-4); }
.stat-card {
  padding: var(--space-6) var(--space-5);
  text-align: left;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.stat-num .stat-unit {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.1em;
  vertical-align: 0.15em;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Testimonial card variant — for marketing-style social proof. */
.testimonial {
  position: relative;
  padding: var(--space-10) var(--space-8);
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: var(--space-3);
  left: var(--space-6);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent-2) 60%, transparent);
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
  /* Indent the quote text past the giant ::before glyph so the first line
     never crowds the curl, even on the narrowest mobile viewports. */
  padding-left: var(--space-6);
}
@media (max-width: 480px) {
  .testimonial::before { font-size: 3.5rem; top: var(--space-2); left: var(--space-4); }
  .testimonial blockquote { padding-left: var(--space-4); font-size: 1.125rem; }
}
.testimonial cite {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* ── Two-column split + book-grid (form + info sidebar) ──────────────── */
.contact-head,
.section-head { margin-bottom: var(--space-10); max-width: 60ch; }
.contact-head p,
.section-head p { font-size: 1.0625rem; margin-bottom: 0; }
.split,
.book-grid { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 880px) {
  .split,
  .book-grid { grid-template-columns: 1fr; }
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-2) 6%, var(--surface)) 0%,
    var(--surface) 100%);
}
.info-card h3 { margin-top: 0; }
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.info-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.info-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.info-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-bottom: 0;
}

/* ── Dark sections — booking band, etc. ──────────────────────────────── */
.section-dark {
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--accent) 100%);
  color: color-mix(in srgb, #fff 80%, transparent);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(201,162,75,0.04) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(201,162,75,0.04) 40px);
  pointer-events: none;
  opacity: 0.6;
}
.section-dark > .container { position: relative; z-index: 1; }
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark .display { color: #fff; }
.section-dark p { color: color-mix(in srgb, #fff 75%, transparent); }
.section-dark a:not(.btn) { color: var(--accent-2); }
.section-dark a:not(.btn):hover { color: #fff; }
.section-lead-light { color: color-mix(in srgb, #fff 75%, transparent); }

/* Cards on dark sections — translucent with a gold left rule. */
.card-on-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.card-on-dark:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 162, 75, 0.35);
}
.info-card-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid var(--accent-2);
  color: #fff;
}
.info-card-dark .info-label { color: var(--accent-2); }
.info-card-dark .info-list li { border-bottom-color: rgba(255,255,255,0.08); }
.info-card-dark .info-foot {
  color: color-mix(in srgb, #fff 60%, transparent);
  border-top-color: rgba(255,255,255,0.10);
}
.info-card-dark a { color: #fff; }
.info-card-dark a:hover { color: var(--accent-2); }

/* ── Forms (GATE 7) ───────────────────────────────────────────── */
.form-card {
  display: grid;
  gap: var(--space-5);
  margin-top: 0;
}
.field {
  display: grid;
  gap: var(--space-2);
}
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
/* On dark sections (booking band), labels invert to white so they read
   against the navy gradient. Scoped so future light-background forms
   keep the default ink color. */
.section-dark .field label,
.card-on-dark .field label {
  color: #fff;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--ink-muted) 70%, transparent); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field input.has-error,
.field textarea.has-error,
.field select.has-error {
  border-color: #c0392b;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.15);
}
.field-error {
  display: block;
  min-height: 1.1em;
  font-size: 0.8125rem;
  color: #e57373;
  margin-top: 2px;
}
.req { color: var(--accent-2); margin-left: 2px; }

/* Form rows — two fields side by side, collapsing to single column on mobile. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.form-note {
  font-size: 0.8125rem;
  color: color-mix(in srgb, currentColor 70%, transparent);
  margin: 0;
  max-width: 60ch;
}
.form-success {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.95rem;
}
.form-success a { color: var(--accent-2); text-decoration: underline; }

/* Subtle flash to draw the eye when a service card pre-fills the select. */
@keyframes selectFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 80%, transparent); }
  60%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-2) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.field select.flash {
  animation: selectFlash 900ms var(--ease);
  border-color: var(--accent-2);
}

/* ── Footer (GATE 8) ──────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: color-mix(in srgb, #fff 70%, transparent);
  padding-block: clamp(3rem, 6vw, 5rem) var(--space-8);
  margin-top: var(--space-24);
}
.footer-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 2fr repeat(2, 1fr);
}
.footer-brand p {
  color: color-mix(in srgb, #fff 60%, transparent);
  margin-top: var(--space-3);
  max-width: 36ch;
}
.logo-on-dark { color: #fff; }
.logo-on-dark:hover { color: var(--accent); }
.site-footer h4 { color: #fff; margin-bottom: var(--space-4); }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a {
  color: color-mix(in srgb, #fff 70%, transparent);
  font-size: 0.95rem;
}
.footer-links a:hover { color: var(--accent); }
.footer-meta {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
  font-size: 0.8125rem;
  color: color-mix(in srgb, #fff 50%, transparent);
}
.footer-meta p { margin: 0; color: inherit; max-width: none; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    padding: var(--space-4) var(--space-6);
    gap: var(--space-3);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Reveal-on-scroll — script.js adds .reveal then .is-visible as elements
   intersect the viewport. Keep the motion subtle (no parallax, no rotate). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Active nav link — set by the IntersectionObserver scroll-spy in script.js.
   The CTA button is excluded in JS, so this only affects plain text links. */
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { transform: scaleX(1) !important; }

/* Reduced motion — respect user preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}