/* ============================================================
   Shine Shark Detailing LLC — styles.css
   Edit config.js for services, prices, hours, and contact info.
   ============================================================ */

/* Fonts loaded via <link> in HTML — no @import needed here */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --ink:         #060707;
  --ink-soft:    #1e2528;
  --reef:        #0578a6;
  --reef-bright: #38c9f2;
  --gold:        #c8922a;
  --foam:        #f2f3f0;
  --paper:       #ffffff;
  --steel:       #5d666b;
  --line:        #d7dde0;
  --shadow:      0 20px 56px rgba(6,7,7,0.11);
  --radius:      12px;
  --max:         1320px;
  --label:       'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --serif:       Georgia, "Times New Roman", Times, serif;
  --sans:        'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ── Dark cluster tonal system ─────────────────────────────
     Deep blue-graphite bases — reef-blue appears only as accent.
     Adjust --dark-bg to shift the entire dark cluster at once.  */
  --dark-bg:    #070a0e;           /* deep blue-black — rich "shadow" base */
  --dark-bg-alt: #0c1119;          /* navy-graphite lift — the "lit" surface */
  --dark-panel: rgba(255,255,255,0.055); /* card/panel fill within dark   */
  --dark-edge:  rgba(255,255,255,0.13);  /* neutral panel border          */
  --dark-seam:  rgba(255,255,255,0.075); /* hairline between sections     */
  --dark-light: rgba(5,120,166,0.13);    /* studio-light intensity        */
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* .button has display:inline-flex which beats the UA [hidden] rule — force it */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--foam);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
h2 { letter-spacing: -0.015em; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Accessibility ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; z-index: 1000; top: 12px; left: 12px;
  padding: 10px 16px; color: var(--paper); background: var(--ink);
  border-radius: 999px; transform: translateY(-160%);
  font-family: var(--sans); font-weight: 700; font-size: 0.88rem;
  transition: transform 200ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* ── Layout helper ──────────────────────────────────────────── */
.container {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

/* ── Announcement banner ─────────────────────────────────────── */
.announcement-banner {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  position: relative;
  z-index: 200;
}

/* ── Header / nav ───────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242,243,240,0.92);
  border-bottom: 1px solid rgba(5,120,166,0.13);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow 220ms ease;
}

.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--reef) 0%, var(--reef-bright) 60%, transparent 100%);
  opacity: 0.35;
  pointer-events: none;
}

.site-header.has-shadow { box-shadow: 0 8px 32px rgba(6,7,7,0.09); }

.nav-shell {
  width: min(var(--max), calc(100% - 48px));
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand img {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid rgba(5,120,166,0.16);
  box-shadow: 0 4px 16px rgba(5,120,166,0.10);
}

.brand span { display: grid; line-height: 1.08; }

.brand strong {
  font-size: 1.2rem;
  font-family: var(--label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.brand small {
  color: var(--reef);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--sans);
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.nav-links a:not(.nav-cta) {
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(6,7,7,0.66);
  font-family: var(--sans);
  font-size: 0.9rem;
  transition: color 200ms ease, background 200ms ease;
}

.nav-links a:not(.nav-cta):hover {
  color: var(--ink);
  background: rgba(5,120,166,0.07);
}

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-links a[aria-current="page"]:not(.nav-cta) {
  color: var(--reef);
  background: rgba(5,120,166,0.08);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 100%; height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.button, .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 240ms cubic-bezier(0.2,0,0,1), box-shadow 240ms ease, background 240ms ease, border-color 200ms ease;
}

.button:hover, .nav-cta:hover { transform: translateY(-2px); }
.button:active, .nav-cta:active { transform: translateY(0); transition-duration: 80ms; }
.button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }

.nav-cta,
.button.primary {
  color: var(--paper);
  background: var(--reef);
  border-color: var(--reef);
  box-shadow: 0 8px 24px rgba(5,120,166,0.30);
}

.nav-cta:hover,
.button.primary:hover {
  background: #045e87;
  box-shadow: 0 12px 32px rgba(5,120,166,0.40);
}

.button.muted {
  color: var(--ink);
  background: rgba(255,255,255,0.82);
  border-color: rgba(6,7,7,0.14);
  box-shadow: 0 2px 8px rgba(6,7,7,0.05);
}

.button.muted:hover {
  background: var(--paper);
  border-color: rgba(5,120,166,0.55);
  color: var(--reef);
  box-shadow: 0 6px 20px rgba(6,7,7,0.09);
}

/* ── Eyebrow label ──────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 10px;
  color: var(--reef);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--label);
}

/* ── Section wrapper ────────────────────────────────────────── */
.section {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
  padding-top:    clamp(52px, 6.5vw, 88px);
  padding-bottom: clamp(52px, 6.5vw, 88px);
}

.section h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.05;
  font-family: var(--serif);
}

.section-heading {
  display: grid;
  gap: 12px;
  max-width: 680px;
  margin-bottom: 44px;
}

.section-heading.compact { max-width: 580px; }

.section-heading p:not(.eyebrow) {
  color: var(--steel);
  font-size: 1rem;
  font-family: var(--sans);
  line-height: 1.65;
  max-width: 56ch;
}

/* ── Hero (home split layout) ───────────────────────────────── */
.hero-home {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding-top:    clamp(48px, 6vw, 80px);
  padding-bottom: clamp(60px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero-content { display: grid; }

.hero-content .eyebrow { margin-bottom: 14px; }

.hero-content h1 {
  max-width: 10ch;
  font-size: clamp(3.2rem, 7.2vw, 6.2rem);
  line-height: 0.96;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.hero-copy {
  max-width: 44ch;
  margin-top: 22px;
  color: #3e4244;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  font-family: var(--sans);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Hero showcase (image card) */
.hero-showcase {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(6,7,7,0.10);
  background: var(--ink);
  box-shadow: 0 40px 100px rgba(6,7,7,0.22);
  isolation: isolate;
  /* Container owns the size — image absolutely fills it, so layout is
     stable before the image loads and immune to src swaps or decoding.
     aspect-ratio alone controls proportions; no min/max-height here so
     the vw-based min never overrides the ratio and creates a square card. */
  aspect-ratio: 3/2;
}

.hero-showcase::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(0deg, rgba(6,7,7,0.68) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-showcase img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
}


/* ── Soft page hero (about / contact) ───────────────────────── */
.soft-page-hero {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding-top:    clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.soft-page-hero > div { padding: clamp(16px, 3vw, 32px) 0; }

.soft-page-hero h1 {
  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: 0.96;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.soft-page-hero p:not(.eyebrow) {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--steel);
  font-size: 1.05rem;
  font-family: var(--sans);
  line-height: 1.65;
}

/* Wrapper owns the aspect-ratio; img is absolutely placed so src swaps
   and decode delays cannot shift layout on any viewport.
   min-height ensures a minimum visual height even when the column is narrow;
   breakpoints reset it and cap with max-height for single-column layouts. */
.page-hero-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  min-height: 420px;
  border-radius: var(--radius);
  border: 1px solid rgba(6,7,7,0.08);
  box-shadow: 0 24px 64px rgba(6,7,7,0.12);
  background: var(--ink);
}

.page-hero-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* ── Hero image crop — CSS fallbacks ────────────────────────────────────────
   Hero images (image_hero, image_about_hero, image_contact_hero) are excluded
   from client-side JS swapping to prevent visible refresh jumps.

   Admin-saved image paths and crop positions are now injected server-side into
   the initial HTML before first paint (see serveHeroPage in server.js). Use the
   admin Images panel to change hero images and adjust their crop positions.

   The CSS values below are fallbacks only — applied when no admin crop has been
   saved in the database (e.g., on first run before admin touches the setting):
     .hero-showcase img   → homepage hero  (fallback: center 52%)
     .page-hero-wrap img  → about hero     (fallback: center 38%)
   ─────────────────────────────────────────────────────────────────────────── */
.page-hero-wrap img[data-site-image="image_contact_hero"] { object-position: center 40%; }

/* Hero containers and images — never animate or transition on any screen size.
   Any CSS motion after first paint causes a visible reframe on every refresh. */
.hero-showcase,
.page-hero-wrap,
.hero-showcase img,
.page-hero-wrap img,
.soft-page-hero img {
  animation: none;
  transition: none;
}

/* ── Booking page intro (text-only header) ──────────────────── */
.booking-page-intro {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding-top:    clamp(48px, 7vw, 88px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.booking-page-intro h1 {
  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: 0.96;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.booking-page-intro p:not(.eyebrow) {
  max-width: 50ch;
  margin-top: 18px;
  color: var(--steel);
  font-size: 1.05rem;
  font-family: var(--sans);
  line-height: 1.65;
}

.booking-intro-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.booking-intro-pills span {
  padding: 7px 13px;
  border: 1px solid rgba(6,7,7,0.10);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 3px 12px rgba(6,7,7,0.05);
  font-size: 0.84rem;
  font-weight: 800;
  font-family: var(--sans);
}

/* ── Services section ───────────────────────────────────────── */
.services-section {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100vw - var(--max)) / 2));
  padding-left:  max(24px, calc((100vw - var(--max)) / 2));
  padding-top:    clamp(44px, 6vw, 80px);
  padding-bottom: clamp(20px, 2.5vw, 36px);
  background:
    radial-gradient(ellipse 80% 45% at 8% 98%, var(--dark-light) 0%, transparent 100%),
    var(--dark-bg);
}

.services-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

.services-section .section-heading {
  position: sticky;
  top: 96px;
  align-self: start;
  margin-bottom: 0;
  max-width: none;
}

.services-section .section-heading .button { justify-self: start; }

.services-section .section-heading h2 {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.06;
  font-family: var(--serif);
  color: var(--paper);
}

.services-section .section-heading .eyebrow { color: var(--reef-bright); }
.services-section .section-heading p:not(.eyebrow) { color: rgba(244,244,241,0.84); font-family: var(--sans); }

.services-cta { margin-top: 28px; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 18px;
  padding: 36px;
  border-radius: 20px;
  background: var(--dark-panel);
  border: 1px solid var(--dark-edge);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.44),
    inset 0 1px 0 rgba(255,255,255,0.04);
  min-height: 380px;
}

/* Fewer-than-3 column adjustments — CSS classes so mobile media queries still apply */
@media (min-width: 641px) {
  .service-grid.grid-1 { grid-template-columns: minmax(0, 480px); }
  .service-grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Skeleton placeholder cards — replaced by JS, prevent grid height jump */
.svc-skeleton {
  pointer-events: none;
}
.svc-skeleton .service-image {
  background: rgba(255,255,255,0.05);
}
.svc-skeleton .service-card-body {
  min-height: 200px;
  background: rgba(255,255,255,0.03);
}

/* ── Premium service cards ──────────────────────────────────────── */
.premium-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background: linear-gradient(175deg, #1c1d20 0%, #131415 100%);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 300ms cubic-bezier(0.2,0,0,1), box-shadow 300ms ease, border-color 280ms ease;
}

.premium-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(5,120,166,0.30);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(5,120,166,0.14),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.premium-service-card.is-featured {
  border-top: 3px solid var(--gold);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.50),
    0 0 0 1px rgba(200,146,42,0.18),
    0 0 48px rgba(200,146,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.service-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
  flex-shrink: 0;
}

.service-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
  transition: transform 320ms cubic-bezier(0.2,0,0,1), opacity 300ms ease;
}

.premium-service-card:hover .service-image img {
  transform: scale(1.03);
  opacity: 1;
}

.service-badge {
  position: absolute;
  top: 10px; right: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  color: #0a0a0a;
  background: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--label);
}

.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.service-card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.service-card-category {
  font-size: 0.68rem;
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--reef-bright);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.premium-service-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  font-family: var(--sans);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.service-card-pricing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.service-price {
  font-size: 1.9rem;
  font-weight: 800;
  font-family: var(--label);
  color: var(--reef-bright);
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.service-price-label {
  font-size: 0.67rem;
  font-family: var(--sans);
  font-weight: 500;
  color: rgba(255,255,255,0.84);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.service-card-divider {
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin-bottom: 14px;
}

.service-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.88);
  font-size: 0.76rem;
  font-family: var(--sans);
  font-weight: 500;
}

.service-card-sep {
  color: rgba(255,255,255,0.45);
}

.premium-service-card .button {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}


.service-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.88);
  font-size: 0.71rem;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Trust section ──────────────────────────────────────────── */
.trust-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.trust-copy {
  max-width: 480px;
  display: grid;
  gap: 14px;
}

.trust-copy h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.04; }
.trust-copy p { color: var(--steel); font-size: 1rem; font-family: var(--sans); max-width: 50ch; line-height: 1.65; }
.trust-copy .button { margin-top: 8px; justify-self: start; }

.trust-grid { display: grid; gap: 12px; }

.trust-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  padding: 20px 22px;
  border: 1px solid rgba(6,7,7,0.08);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 4px 20px rgba(6,7,7,0.05);
  transition: transform 280ms cubic-bezier(0.2,0,0,1), box-shadow 280ms ease, border-color 280ms ease, padding-left 280ms ease;
}

.trust-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(6,7,7,0.09);
  border-left: 3px solid var(--reef);
  padding-left: 19px;
}

.mini-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--reef);
  font-weight: 800;
  font-family: var(--label);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  grid-row: 1 / 3;
  flex-shrink: 0;
}

.trust-grid h3 {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: var(--sans);
  align-self: end;
  line-height: 1.3;
}

.trust-grid p {
  color: var(--steel);
  font-size: 0.9rem;
  font-family: var(--sans);
  line-height: 1.58;
}

/* ── Results section ────────────────────────────────────────── */
.results-section {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.results-media {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
  align-items: end;
}

.results-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  border: 1px solid rgba(6,7,7,0.08);
  box-shadow: 0 20px 56px rgba(6,7,7,0.11);
  background: #1a1a1a;
  display: block;
}

.results-media img:first-child {
  aspect-ratio: 3/2;
  object-position: center 35%;
}

.results-media img:last-child {
  aspect-ratio: 4/3;
}

.results-copy { display: grid; gap: 16px; }
.results-copy h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.04; }
.results-copy p { color: var(--steel); font-family: var(--sans); font-size: 1rem; max-width: 50ch; line-height: 1.65; }

/* ── Premium band (steps / values) ─────────────────────────── */
.premium-band {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
  border: 1px solid rgba(6,7,7,0.08);
  border-left: 3px solid rgba(5,120,166,0.32);
  border-radius: var(--radius);
  background: linear-gradient(155deg, #ffffff 0%, #f0f6fa 100%);
  box-shadow: 0 8px 36px rgba(6,7,7,0.07);
  padding: clamp(36px, 5.5vw, 64px) clamp(28px, 5vw, 56px);
}

.premium-band .section-heading.compact { margin-bottom: 32px; }

.premium-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.premium-steps article {
  padding: 26px;
  border: 1px solid rgba(6,7,7,0.07);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255,255,255,0.78);
  display: grid;
  align-content: start;
  gap: 14px;
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms cubic-bezier(0.2,0,0,1);
}

.premium-steps article:hover {
  border-color: rgba(5,120,166,0.24);
  box-shadow: 0 10px 32px rgba(6,7,7,0.08);
  transform: translateY(-2px);
}

.premium-steps article span {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--reef);
  font-weight: 800;
  font-family: var(--label);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}

.premium-steps h3 {
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.3;
}

.premium-steps p {
  color: var(--steel);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── Service area / map ─────────────────────────────────────── */
.service-area-section { display: grid; gap: 28px; }

.map-shell {
  overflow: hidden;
  border: 1px solid rgba(6,7,7,0.09);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 16px 52px rgba(6,7,7,0.09);
}

.map-shell iframe {
  display: block;
  width: 100%;
  height: min(58vh, 520px);
  min-height: 380px;
  border: 0;
}

/* ── Instagram section ──────────────────────────────────────── */
.instagram-section {
  text-align: center;
}

.instagram-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}

.instagram-section-head .eyebrow { margin: 0; }

.instagram-section-head h2 {
  margin: 0;
  max-width: 18ch;
}

.instagram-section-head p {
  color: var(--steel);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
}

.instagram-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--steel);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

.instagram-handle:hover { color: var(--reef); }

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 580px;
  margin: 0 auto 36px;
}

.instagram-post {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  display: block;
}

.instagram-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.instagram-post-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 7, 0.38);
  opacity: 0;
  transition: opacity 0.22s ease;
}

@media (hover: hover) {
  .instagram-post:hover img { transform: scale(1.07); }
  .instagram-post:hover .instagram-post-overlay { opacity: 1; }
}

.instagram-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Final CTA ──────────────────────────────────────────────── */
.final-cta-section {
  width: min(var(--max), calc(100% - 48px));
  margin: clamp(40px, 5vw, 64px) auto clamp(48px, 7vw, 84px);
  padding: clamp(36px, 5.5vw, 58px) clamp(28px, 5vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid var(--dark-edge);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 60% 50% at 8% 5%, var(--dark-light) 0%, transparent 100%),
    var(--dark-bg);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--paper);
}

.final-cta-section > div { min-width: 0; }

.final-cta-section h2 {
  max-width: 24ch;
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  line-height: 1.1;
  font-family: var(--serif);
  letter-spacing: -0.01em;
  color: var(--paper);
}

.final-cta-section p {
  max-width: 54ch;
  margin-top: 12px;
  color: rgba(244,244,241,0.74);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

.final-cta-section .button { flex: 0 0 auto; }

/* ── About: story section ───────────────────────────────────── */
.story-section {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 0;
  align-items: stretch;
  padding-block: clamp(40px, 4.5vw, 60px);
}

/* Left card — editorial text panel */
.story-copy {
  padding: clamp(30px, 3.5vw, 46px);
  border: 1px solid rgba(6,7,7,0.09);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: #fff;
  box-shadow: 0 4px 24px rgba(6,7,7,0.06);
  display: grid;
  gap: 14px;
  align-content: start;
}
.story-copy .button { justify-self: start; }
.story-copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1.05;
}
.story-copy p {
  color: var(--steel);
  font-family: var(--sans);
  font-size: 1rem;
  max-width: 50ch;
  line-height: 1.65;
}

/* Right card — subtle accent panel */
.story-sidecard {
  padding: clamp(30px, 3.5vw, 46px);
  border: 1px solid rgba(6,7,7,0.09);
  border-left: 3px solid rgba(5,120,166,0.28);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fafbfc;
  box-shadow: 0 4px 24px rgba(6,7,7,0.06);
  display: grid;
  align-content: center;
  gap: 20px;
}

.story-sidecard h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.25;
  font-family: var(--serif);
  color: var(--ink);
}

.story-points {
  display: grid;
  gap: 14px;
  margin: 0; padding: 0;
  list-style: none;
}

.story-points li {
  position: relative;
  padding-left: 18px;
  color: var(--steel);
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.65;
}

.story-points li::before {
  content: "";
  position: absolute;
  top: 0.62em; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--reef);
}

/* About: detail section */
.about-detail-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.about-detail-section img {
  width: 100%;
  aspect-ratio: 4/3;
  min-height: 400px;
  max-height: 540px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
  border: 1px solid rgba(6,7,7,0.08);
  box-shadow: 0 20px 60px rgba(6,7,7,0.11);
  background: var(--ink);
}

.about-detail-section > div {
  padding: clamp(28px, 4.5vw, 48px);
  border: 1px solid rgba(6,7,7,0.08);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.84);
  box-shadow: 0 8px 32px rgba(6,7,7,0.07);
  display: grid;
  gap: 16px;
}

.about-detail-section h2 { font-size: clamp(1.9rem, 3.4vw, 3.0rem); line-height: 1.06; }
.about-detail-section p {
  color: var(--steel);
  font-family: var(--sans);
  font-size: 1rem;
  max-width: 50ch;
  line-height: 1.65;
}
.about-detail-section .button { justify-self: start; }

/* ── Contact layout ─────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(20px, 3.5vw, 40px);
  align-items: start;
}

.contact-card,
.contact-side {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(6,7,7,0.08);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.84);
  box-shadow: 0 8px 32px rgba(6,7,7,0.07);
}

.contact-card { display: grid; gap: 20px; }
.contact-card h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.04; }

.contact-form { display: grid; gap: 16px; }

.contact-side { display: grid; gap: 14px; }
.contact-side h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.1; }

.contact-side-intro,
.contact-details p {
  color: var(--steel);
  font-family: var(--sans);
  font-size: 0.97rem;
  line-height: 1.62;
}

.contact-details a:not(.button) {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(5,120,166,0.38);
}

.contact-fast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* ── Booking section (dark) ─────────────────────────────────── */
.booking-section {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100vw - var(--max)) / 2));
  padding-left:  max(24px, calc((100vw - var(--max)) / 2));
  padding-top:    clamp(44px, 6vw, 80px);
  padding-bottom: clamp(44px, 6vw, 80px);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(5,120,166,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(5,120,166,0.04) 0%, transparent 68%),
    #090c0d;
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.booking-copy {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(237,244,247,0.98));
  box-shadow: 0 24px 56px rgba(0,0,0,0.3);
  color: var(--ink);
}

.booking-copy h2 {
  margin-bottom: 12px;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.1;
}

.booking-copy p {
  color: var(--steel);
  font-family: var(--sans);
  font-size: 0.97rem;
  margin-top: 10px;
  line-height: 1.62;
  max-width: 38ch;
}

.booking-note {
  display: grid;
  gap: 5px;
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--reef);
  border-radius: 0 8px 8px 0;
  background: rgba(5,120,166,0.04);
}

.booking-note strong { font-family: var(--sans); font-size: 0.9rem; }
.booking-note span { color: var(--steel); font-family: var(--sans); font-size: 0.88rem; line-height: 1.5; }
.booking-note a { color: var(--reef); font-weight: 800; }

.booking-tool {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 28px 64px rgba(0,0,0,0.22);
  color: var(--ink);
}

/* Form structure */
.form-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(6,7,7,0.07);
}

.form-topline-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-topline-brand > div { min-width: 0; }
.form-topline-brand img {
  flex-shrink: 0;
  opacity: 0.88;
}

.form-topline .eyebrow { margin-bottom: 4px; }
.form-topline h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.3;
}

.step-count {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  padding: 7px 10px;
  color: var(--paper);
  background: var(--reef);
  border-radius: 999px;
  font-weight: 800;
  font-family: var(--label);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  margin-top: 2px;
}

.progress-track {
  height: 3px;
  margin: 14px 0;
  overflow: hidden;
  background: rgba(6,7,7,0.07);
  border-radius: 999px;
}

.progress-track span {
  display: block;
  width: 20%; height: 100%;
  background: linear-gradient(90deg, var(--reef), var(--reef-bright));
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.4,0,0.2,1);
}

.form-alert {
  margin-bottom: 16px;
  padding: 12px 16px;
  color: #6e1f13;
  background: #fff0ee;
  border: 1px solid rgba(220,80,60,0.20);
  border-left: 3px solid #d94b38;
  border-radius: var(--radius);
  font-weight: 700;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
}

.step-panel { display: none; padding: 0; margin: 0; border: 0; }
.step-panel.is-active {
  display: block;
  animation: stepIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.step-panel.is-leaving {
  display: block;
  animation: stepOut 160ms ease both;
  pointer-events: none;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes stepOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* Service / addon choices */
.choice-list, .addon-grid, .field-grid, .slot-wrap, .review-box { display: grid; gap: 8px; }

.choice-row, .terms-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 14px 16px;
  border: 1.5px solid rgba(6,7,7,0.09);
  border-radius: var(--radius);
  background: #fafafa;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}

.choice-row.is-recommended {
  border-color: rgba(5,120,166,0.22);
  background: rgba(5,120,166,0.025);
}

.choice-rec-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--gold);
  color: #fff;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--label);
  margin-left: 7px;
  vertical-align: middle;
}

/* Add-on cards: column layout so description sits below name */
.addon-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
  padding: 14px 14px;
  border: 1.5px solid rgba(6,7,7,0.09);
  border-radius: var(--radius);
  background: #fafafa;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.2,0,0,1);
  cursor: pointer;
  box-sizing: border-box;
}

.choice-row:hover:not(:has(input:checked)),
.addon-option:hover:not(:has(input:checked)) {
  border-color: rgba(5,120,166,0.32);
  background: #f3f8fb;
  box-shadow: 0 3px 14px rgba(5,120,166,0.07);
}

.addon-option:hover:not(:has(input:checked)) {
  transform: translateY(-1px);
}

.choice-row:has(input:checked),
.addon-option:has(input:checked) {
  border-color: var(--reef);
  background: #ebf6fb;
  box-shadow: 0 0 0 3px rgba(5,120,166,0.10), 0 4px 18px rgba(5,120,166,0.08);
}

.addon-option:has(input:checked) {
  transform: translateY(-1px);
}

.choice-row input, .addon-option input, .terms-line input {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  accent-color: var(--reef);
}

.choice-copy { display: grid; gap: 5px; flex: 1; min-width: 0; }

.choice-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--sans);
}

.choice-heading strong { font-weight: 800; font-size: 1rem; overflow-wrap: break-word; }
.choice-heading small {
  flex: 0 0 auto;
  font-weight: 800;
  white-space: nowrap;
  color: var(--reef);
  font-size: 0.9rem;
}

.choice-row em {
  color: var(--steel);
  font-size: 0.82rem;
  line-height: 1.45;
  font-style: normal;
  font-family: var(--sans);
  overflow-wrap: break-word;
}

/* Add-on card internals */
.addon-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.addon-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.addon-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.addon-name-row strong {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.addon-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--reef);
  background: rgba(5,120,166,0.08);
  border: 1px solid rgba(5,120,166,0.2);
  border-radius: 3px;
  padding: 2px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.addon-price {
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--reef);
  font-family: var(--sans);
}
.addon-option em {
  color: var(--steel);
  font-size: 0.79rem;
  line-height: 1.42;
  font-style: normal;
  font-family: var(--sans);
  overflow-wrap: break-word;
}

.addon-grid {
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.addon-grid.is-hidden { display: none; }

.addon-heading { display: grid; gap: 2px; margin-bottom: 6px; grid-column: 1 / -1; }
.addon-heading h4 {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.addon-heading p {
  color: var(--steel);
  font-size: 0.82rem;
  font-family: var(--sans);
  margin: 0;
}

.estimate {
  display: grid;
  margin-top: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(6,7,7,0.08);
  background: #f5f7f8;
  overflow: hidden;
}

.estimate-breakdown {
  padding: 14px 16px 0;
  display: grid;
}

.estimate-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 0.87rem;
  color: var(--steel);
  border-bottom: 1px solid rgba(6,7,7,0.06);
}

.estimate-line:last-child { border-bottom: none; }

.estimate-line.estimate-base {
  color: var(--ink);
  font-weight: 700;
}

.estimate-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(6,7,7,0.03);
  border-top: 1px solid rgba(6,7,7,0.07);
  gap: 12px;
}

.estimate-total > span {
  color: var(--steel);
  font-family: var(--label);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.estimate-price {
  font-family: var(--label);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.estimate-meta {
  padding: 0 16px 12px;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--steel);
  text-align: right;
}

@keyframes estimatePulse {
  0%   { color: var(--reef); }
  100% { color: var(--ink); }
}

.estimate-pulse { animation: estimatePulse 440ms ease both; }

/* Field grid (contact / vehicle steps) */
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-weight: 700;
  font-family: var(--sans);
  font-size: 0.87rem;
  letter-spacing: 0.01em;
}

label.wide { grid-column: 1 / -1; }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid rgba(6,7,7,0.13);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--reef);
  box-shadow: 0 0 0 3px rgba(5,120,166,0.14);
}

input::placeholder, textarea::placeholder {
  color: rgba(6,7,7,0.3);
}

button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(5,120,166,0.6);
  outline-offset: 3px;
}

/* Calendar */
.booking-calendar-shell { display: grid; gap: 12px; }

.calendar-guidance {
  margin: 0;
  padding: 11px 14px;
  color: #054565;
  background: #e5f5fb;
  border: 1px solid rgba(5,120,166,0.16);
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.5;
}
.calendar-guidance:empty { display: none; }

.booking-calendar {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8f9fa;
  border: 1.5px solid rgba(6,7,7,0.09);
  border-radius: var(--radius);
}

.calendar-topline { display: grid; grid-template-columns: 38px 1fr 38px; gap: 6px; align-items: center; }
.calendar-topline strong { text-align: center; font-family: var(--sans); font-size: 0.92rem; font-weight: 800; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.calendar-weekdays span {
  color: var(--steel);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--sans);
}

.calendar-nav {
  width: 38px; height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ink);
  transition: border-color 140ms ease, background 140ms ease;
}

.calendar-nav:hover:not(:disabled) {
  border-color: var(--reef);
  background: #eef8fc;
}

.calendar-nav:disabled { color: #b0babe; background: #f1f3f2; border-color: var(--line); cursor: not-allowed; }

.calendar-day, .calendar-empty { min-height: 42px; }

.calendar-day {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-family: var(--sans);
  font-size: 0.86rem;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.calendar-day.is-open:hover {
  border-color: rgba(5,120,166,0.38);
  background: #f0f7fb;
}

.calendar-day.is-selected {
  border-color: var(--reef);
  background: var(--reef);
  color: var(--paper);
  box-shadow: 0 3px 12px rgba(5,120,166,0.28);
}

.calendar-day.is-closed {
  color: #b0babe;
  background: #eef0f1;
  border-color: #e2e6e8;
  cursor: not-allowed;
  pointer-events: none;
}

/* Time slots */
.slot-wrap { margin-top: 20px; }

.slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.slot-header strong { font-family: var(--sans); font-size: 0.88rem; font-weight: 800; }
.slot-header span { color: var(--reef); font-weight: 800; font-family: var(--sans); font-size: 0.86rem; }

.waitlist-prompt { padding: 4px 0; }

.scarcity-msg {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: #b45309;
  margin: 0 0 8px;
  min-height: 1em;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 72px;
}

.slot-grid .muted-text {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--steel);
  font-family: var(--sans);
  font-size: 0.92rem;
}

.slot-button {
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 12px 10px;
  color: var(--ink);
  background: #f8f9fa;
  border: 1.5px solid rgba(6,7,7,0.09);
  border-radius: 8px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(0.2,0,0,1), box-shadow 220ms ease;
}

.slot-button:hover:not(.is-selected) {
  background: #eff3f5;
  border-color: rgba(5,120,166,0.32);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(5,120,166,0.08);
}

.slot-button span { font-weight: 800; font-family: var(--sans); font-size: 0.88rem; overflow-wrap: break-word; }
.slot-button small { color: var(--steel); font-family: var(--sans); font-size: 0.76rem; overflow-wrap: break-word; }

.slot-button.is-selected {
  border-color: var(--reef);
  background: #ebf7fc;
  box-shadow: inset 0 0 0 1px rgba(5,120,166,0.16);
}

.slot-button.is-selected span { color: var(--reef); font-weight: 900; }
.slot-button.is-selected small { color: rgba(4,94,135,0.72); }

/* Review */
.review-box { grid-template-columns: repeat(2, 1fr); }

.review-box div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: #f5f7f8;
  border: 1px solid rgba(6,7,7,0.06);
  border-radius: 8px;
}

.review-box span {
  color: var(--steel);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--label);
}

.review-box strong {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.review-box .wide { grid-column: 1 / -1; }

.review-total-row {
  grid-column: 1 / -1;
  background: #f5f7f8 !important;
  border-color: rgba(6,7,7,0.08) !important;
  border-radius: var(--radius);
  padding: 16px 18px !important;
  margin-top: 4px;
}

.review-total-row span {
  color: var(--steel) !important;
  font-family: var(--label) !important;
  letter-spacing: 0.14em !important;
}

.review-total-row strong {
  font-family: var(--label) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0.02em !important;
}

.terms-line {
  align-items: flex-start;
  min-height: auto;
  padding: 14px 16px;
  margin-top: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  cursor: pointer;
  overflow-wrap: break-word;
}

.booking-policy {
  padding: 16px 18px;
  border: 1px solid rgba(6,7,7,0.09);
  border-radius: var(--radius);
  background: rgba(6,7,7,0.025);
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.booking-policy p {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
}
.booking-policy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.booking-policy li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.booking-policy li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--reef);
  font-weight: 900;
  font-size: 0.95em;
}
.booking-policy a,
.terms-line a {
  color: var(--reef);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* ── Tip step ──────────────────────────────────────────────── */
.tip-step { display: grid; gap: 20px; }

.tip-intro h4 {
  font-family: var(--label);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ink);
}
.tip-intro p {
  font-size: 0.84rem;
  color: var(--steel);
  margin: 0;
}

.tip-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.tip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--paper);
  border: 1.5px solid rgba(6,7,7,0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
  font-family: var(--sans);
  text-align: center;
  min-height: 60px;
}
.tip-btn:hover:not(.is-selected) {
  border-color: rgba(6,7,7,0.25);
  background: var(--surface);
}
.tip-btn.is-selected {
  border-color: var(--reef);
  background: rgba(4,94,135,0.06);
  box-shadow: 0 0 0 3px rgba(4,94,135,0.12);
}
.tip-btn-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.tip-btn.is-selected .tip-btn-label { color: var(--reef); }
.tip-btn-amount {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--steel);
  line-height: 1;
  min-height: 1em;
}
.tip-btn.is-selected .tip-btn-amount { color: rgba(4,94,135,0.7); }

.tip-custom-wrap { display: grid; gap: 6px; }
.tip-custom-label { display: grid; gap: 5px; }
.tip-custom-label > span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--steel);
}
.tip-custom-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(6,7,7,0.15);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--paper);
  transition: border-color 0.14s;
}
.tip-custom-input-wrap:focus-within { border-color: var(--reef); }
.tip-currency {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--steel);
  flex-shrink: 0;
}
.tip-custom-input-wrap input {
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  width: 100%;
  font-family: var(--sans);
}
.tip-custom-input-wrap input::-webkit-inner-spin-button,
.tip-custom-input-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tip-custom-input-wrap input[type="number"] { -moz-appearance: textfield; }

/* Order summary */
.order-summary {
  background: var(--surface);
  border: 1px solid rgba(6,7,7,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.order-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  font-size: 0.85rem;
  color: var(--steel);
  border-bottom: 1px solid rgba(6,7,7,0.06);
}
.order-line:last-child { border-bottom: none; }
.order-line-tip { color: var(--ink); }
.order-line-total {
  padding: 12px 14px;
  background: var(--paper);
  border-top: 1px solid rgba(6,7,7,0.1) !important;
}
.order-line-total span {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}
.order-line-total strong {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  font-family: var(--label);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(6,7,7,0.07);
}

/* Success state */
.success-state {
  display: grid;
  gap: 16px;
  min-height: 400px;
  align-content: center;
  text-align: center;
  padding: 24px 8px;
}

.success-state > span {
  justify-self: center;
  padding: 7px 14px;
  color: var(--paper);
  background: var(--gold);
  border-radius: 4px;
  font-weight: 800;
  font-family: var(--label);
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.success-state h3 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; }

.success-state p {
  max-width: 50ch;
  margin: 0 auto;
  color: var(--steel);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}

.success-state dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 0;
}

.success-state dl div {
  padding: 12px;
  background: #f5f7f8;
  border: 1px solid rgba(6,7,7,0.06);
  border-radius: 8px;
}

.success-state dt {
  color: var(--steel);
  font-size: 0.73rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--sans);
}

.success-state dd {
  margin: 4px 0 0;
  font-weight: 800;
  font-family: var(--sans);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

/* ── Policy pages ───────────────────────────────────────────── */
.policy-prose {
  max-width: 680px;
  font-family: var(--sans);
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}
.policy-prose h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 2.2rem 0 0.6rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(6,7,7,0.08);
  letter-spacing: 0.01em;
}
.policy-prose h2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.policy-prose p { margin: 0 0 1rem; }
.policy-prose ul {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.policy-prose li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.policy-prose li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0.07em;
  color: var(--reef);
  font-weight: 900;
  font-size: 0.9em;
}
.policy-prose a {
  color: var(--reef);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.policy-prose strong { color: var(--ink); font-weight: 700; }

.policy-nav {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(6,7,7,0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--steel);
}
.policy-nav strong {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 2px;
}
.policy-nav a {
  color: var(--reef);
  text-decoration: none;
  font-weight: 600;
}
.policy-nav a:hover { text-decoration: underline; }
.policy-nav a[aria-current] {
  color: var(--steel);
  pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  width: min(var(--max), calc(100% - 48px));
  margin: clamp(20px, 3vw, 36px) auto clamp(24px, 3vw, 36px);
  padding: 28px clamp(24px, 4.5vw, 44px) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: 2px solid rgba(5,120,166,0.30);
  border-radius: var(--radius);
  color: rgba(244,244,241,0.80);
  background: var(--ink);
  box-shadow: 0 24px 64px rgba(6,7,7,0.14);
}

.site-footer > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-weight: 800;
  font-family: var(--sans);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.site-footer img { border-radius: 50%; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  font-family: var(--sans);
  font-size: 0.88rem;
}

.site-footer a, .site-footer span { color: rgba(244,244,241,0.76); }
.site-footer a { transition: color 130ms ease; }
.site-footer a:hover { color: var(--paper); }

/* ── Responsive: 1040px ─────────────────────────────────────── */
@media (max-width: 1040px) {
  .section,
  .hero-home,
  .soft-page-hero,
  .booking-page-intro,
  .premium-band,
  .final-cta-section,
  .site-footer {
    width: min(var(--max), calc(100% - 40px));
  }

  .hero-home { grid-template-columns: 1fr; gap: 28px; }
  .soft-page-hero { grid-template-columns: 1fr; gap: 28px; }
  .soft-page-hero > div { padding: 0; }
  /* hero-showcase goes full-width in single-column; cap so it doesn't fill the screen */
  .hero-showcase { max-height: 500px; }
  .page-hero-wrap { min-height: 0; max-height: 440px; }

  .services-layout { grid-template-columns: 1fr; gap: 32px; }
  .services-section .section-heading { position: static; max-width: 600px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }

  .trust-section { grid-template-columns: 1fr; gap: 28px; }
  .trust-copy { max-width: 600px; }

  .results-section { grid-template-columns: 1fr; gap: 28px; }
  .results-media { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .results-media img:first-child,
  .results-media img:last-child { aspect-ratio: 4/3; height: auto; }

  .premium-steps { grid-template-columns: repeat(3, 1fr); }

  .story-section { grid-template-columns: 1fr; }
  .story-copy {
    border-right: 1px solid rgba(6,7,7,0.09);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .story-sidecard {
    border-left: 1px solid rgba(6,7,7,0.09);
    border-top: 3px solid rgba(5,120,166,0.28);
    border-radius: 0 0 var(--radius) var(--radius);
    align-content: start;
  }
  .about-detail-section { grid-template-columns: 1fr; }
  .about-detail-section img { min-height: 300px; max-height: 380px; }

  .contact-layout { grid-template-columns: 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
}

/* ── Responsive: 760px ──────────────────────────────────────── */
@media (max-width: 760px) {
  .section,
  .hero-home,
  .soft-page-hero,
  .booking-page-intro,
  .premium-band,
  .final-cta-section,
  .site-footer {
    width: min(100% - 28px, var(--max));
  }

  /* ── Narrower section vertical padding on mobile ── */
  .section { padding-top: clamp(32px, 5vw, 52px); padding-bottom: clamp(32px, 5vw, 52px); }
  .services-section { padding-left: 16px; padding-right: 16px; padding-top: 32px; padding-bottom: 24px; }
  .booking-section  { padding-left: 16px; padding-right: 16px; padding-top: 28px; padding-bottom: 36px; }

  /* ── Mobile nav ── */
  .menu-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 72px; right: 12px; left: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 20px 52px rgba(6,7,7,0.14);
    z-index: 99;
  }

  .nav-links.is-open { display: flex; }
  .nav-links a:not(.nav-cta) { padding: 12px 14px; border-radius: 8px; font-size: 0.92rem; }
  .nav-links .nav-cta { margin-top: 4px; display: flex; justify-content: center; text-align: center; min-height: 46px; }

  /* ── Typography ── */
  .hero-home h1 { font-size: clamp(3rem, 16vw, 4.8rem); max-width: 10ch; }
  .soft-page-hero h1,
  .booking-page-intro h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .page-hero-wrap { min-height: 0; max-height: none; }
  .results-copy h2 { font-size: clamp(1.9rem, 8vw, 2.8rem); }

  /* ── Section headings ── */
  .section-heading { margin-bottom: 20px; gap: 8px; }
  .section-heading.compact { margin-bottom: 16px; }

  /* ── Hero ── */
  .hero-home { padding-top: 24px; padding-bottom: 28px; gap: 16px; }
  .hero-copy { margin-top: 12px; }
  .hero-actions { margin-top: 16px; gap: 8px; }
  /* Reset desktop min/max-height constraints on mobile.
     aspect-ratio: 3/2 (set globally on container) still controls height. */
  .hero-showcase { min-height: 0; max-height: none; }

  /* ── Page intros ── */
  .booking-page-intro { padding-top: 28px; padding-bottom: 16px; }
  .soft-page-hero { padding-top: 28px; padding-bottom: 24px; gap: 20px; }
  .page-hero-wrap { max-height: 340px; aspect-ratio: 16/9; min-height: 0; }

  /* ── Grids ── */
  .service-grid { grid-template-columns: 1fr; padding: 20px; gap: 14px; }
  .addon-grid { grid-template-columns: 1fr; }
  .premium-steps { grid-template-columns: 1fr; gap: 10px; }
  .results-media { grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: start; }
  .results-media img,
  .results-media img:first-child,
  .results-media img:last-child { height: auto; aspect-ratio: 1/1; object-position: center 40%; }

  /* ── Service cards ── */
  .service-card-body { padding: 14px 16px; }
  .service-card-top { margin-bottom: 8px; }
  .service-card-pricing { margin-bottom: 10px; }
  .service-price { font-size: 1.6rem; }

  /* ── Trust ── */
  .trust-copy { max-width: 100%; }
  .trust-grid article { padding: 14px 16px; }

  /* ── Premium band ── */
  .premium-band { padding: 24px 18px; }
  .premium-band .section-heading.compact { margin-bottom: 14px; }
  .premium-steps { gap: 8px; }

  /* ── Cards ── */
  .story-section { padding-block: clamp(28px, 4vw, 44px); }
  .story-copy, .story-sidecard { padding: 20px; gap: 12px; }
  .about-detail-section > div { padding: 20px; gap: 14px; border-radius: 0 0 var(--radius) var(--radius); }
  .about-detail-section img { aspect-ratio: 4/3; min-height: unset; max-height: none; border-radius: var(--radius) var(--radius) 0 0; }
  .contact-card { padding: 18px; gap: 16px; }
  .contact-side { padding: 18px; gap: 12px; }
  .contact-form { gap: 12px; }

  /* ── Final CTA ── */
  .final-cta-section { display: grid; gap: 16px; padding: 22px 20px; }
  .final-cta-section h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); max-width: none; }

  /* ── Form: fields, choices, slots ── */
  .field-grid { grid-template-columns: 1fr; gap: 12px; }
  .choice-row { min-height: 54px; padding: 12px 14px; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .slot-button { min-height: 58px; }
  .review-box { grid-template-columns: 1fr; }
  .success-state dl { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; gap: 8px; }
  .form-actions .button { width: 100%; min-height: 48px; }

  /* ── Booking cards ── */
  .booking-copy { padding: 18px; }
  .booking-note { margin-top: 12px; padding: 11px 13px; }
  .booking-tool { padding: 18px; }
  .form-topline { padding-bottom: 12px; }
  .form-topline h3 { font-size: 0.95rem; }
  .progress-track { margin: 10px 0; }
  .slot-wrap { margin-top: 12px; }

  /* ── Estimate box: tighter on mobile ── */
  .estimate { margin-top: 12px; }
  .estimate-breakdown { padding: 12px 14px 0; }
  .estimate-line { padding: 6px 0; font-size: 0.84rem; }
  .estimate-total { padding: 11px 14px; }
  .estimate-price { font-size: 1.3rem; }
  .estimate-meta { padding: 0 14px 10px; font-size: 0.71rem; }

  /* ── Tip step: stack buttons 2-up on tablet ── */
  .tip-buttons { grid-template-columns: repeat(3, 1fr); }

  /* ── Account page ── */
  .account-page { padding: 24px 14px 52px; }
  .auth-body { padding: 20px 18px 18px; }
  .account-card { padding: 16px 18px; }
  .profile-cards-grid { grid-template-columns: 1fr; gap: 14px; }
  .account-page-header { margin-bottom: 18px; }
  .account-page-header h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  /* ── Footer ── */
  .site-footer { display: grid; gap: 16px; padding: 20px 18px; }
  .site-footer nav { gap: 8px 14px; font-size: 0.83rem; }

  /* ── Map ── */
  .map-shell iframe { height: 420px; min-height: 420px; max-height: 420px; }
}

/* ── Responsive: 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* ── Choices & slots ── */
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .slot-button { min-height: 54px; padding: 10px 8px; }
  .choice-row { min-height: 50px; padding: 10px 12px; }
  .choice-heading { flex-wrap: wrap; }
  .choice-heading small { flex: 0 0 100%; font-size: 0.83rem; margin-top: 1px; }
  .addon-option { padding: 11px 12px; }

  /* ── Service cards ── */
  .premium-steps article { padding: 16px; }
  .service-card-body { padding: 12px 14px; }
  .service-price { font-size: 1.55rem; }
  .service-card-top { margin-bottom: 6px; }
  .service-card-pricing { margin-bottom: 8px; }
  .results-media img, .results-media img:first-child, .results-media img:last-child { height: auto; aspect-ratio: 1/1; object-position: center 40%; }

  /* ── Estimate price: smallest phones ── */
  .estimate-price { font-size: 1.2rem; }
  .estimate-total { padding: 10px 12px; }
  .estimate-breakdown { padding: 10px 12px 0; }
  .estimate-meta { padding: 0 12px 9px; }

  /* ── Tip step: 3 buttons on small phones ── */
  .tip-buttons { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tip-btn { padding: 10px 4px; min-height: 54px; }
  .tip-btn-label { font-size: 0.82rem; }
  .tip-btn-amount { font-size: 0.68rem; }

  /* ── Cards & panels ── */
  .section-heading { margin-bottom: 18px; }
  .hero-showcase img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; }
  .booking-copy { padding: 14px; }
  .booking-tool { padding: 14px; }
  .booking-note { padding: 10px 12px; }
  .story-copy, .story-sidecard { padding: 16px; }
  .about-detail-section > div { padding: 16px; }
  .about-detail-section img { aspect-ratio: 4/3; min-height: unset; max-height: none; }
  .map-shell iframe { height: 380px; min-height: 380px; max-height: 380px; }
  .contact-card, .contact-side { padding: 14px; }
  .premium-band { padding: 20px 14px; }
  .trust-grid article { padding: 12px 13px; }
  .account-card { padding: 14px 14px; }
  .auth-body { padding: 16px 14px 16px; }

  /* ── Review total ── */
  .review-total-row { padding: 12px 14px !important; }
  .review-total-row strong { font-size: 1.2rem !important; }
}

/* ── Slot: taken / unavailable ──────────────────────────────── */
.slot-button.is-taken {
  color: #b0babe;
  background: #eef0f1;
  border-color: #e2e6e8;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

/* ── Scroll reveal (prefers-reduced-motion safe) ────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Individual reveal */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity  600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered group reveal */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity  600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay:   0ms; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay:  70ms; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
  .reveal-stagger.is-visible > *:nth-child(n+5) { transition-delay: 280ms; }

  /* Card hover lift (enhancement only — base styles unchanged) */
  .premium-service-card,
  .trust-grid article,
  .premium-steps article,
  .story-copy,
  .story-sidecard,
  .about-detail-section > div,
  .contact-card,
  .contact-side {
    transition:
      transform 300ms cubic-bezier(0.2,0,0,1),
      box-shadow 300ms ease,
      border-color 280ms ease;
  }
}

/* ── Account / Auth page ────────────────────────────────────── */
.account-page {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 80px;
}

/* Auth (login/signup) card */
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border-radius: var(--radius);
  border-top: 3px solid var(--reef);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.auth-tab {
  padding: 14px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--steel);
  text-align: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 130ms ease, border-color 130ms ease;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  margin-bottom: -1px;
}

.auth-tab.active {
  color: var(--reef);
  border-bottom-color: var(--reef);
}

.auth-body { padding: 28px 28px 24px; }

.auth-body .field-grid { margin-bottom: 20px; }

.auth-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 8px;
  color: #991b1b;
  font-family: var(--sans);
  font-size: 0.85rem;
  display: none;
}

.auth-success {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #ecfdf5;
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: 8px;
  color: #065f46;
  font-family: var(--sans);
  font-size: 0.85rem;
  display: none;
}

/* Profile page layout */
.account-wrap {
  width: 100%;
  max-width: 900px;
}

.profile-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.account-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.account-page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.account-page-header p {
  font-family: var(--sans);
  color: var(--steel);
  font-size: 0.9rem;
  margin-top: 4px;
}

.account-section-title {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
  margin-bottom: 12px;
}

.account-card {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-top: 2px solid rgba(5,120,166,0.28);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(6,7,7,0.06);
}

.account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.account-card-header h2 {
  font-size: 1.1rem;
  font-family: var(--label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Booking history table */
.account-booking-row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.88rem;
}

.account-booking-row:last-child { border-bottom: none; }

.acb-date { font-weight: 700; }
.acb-date small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--steel); }
.acb-total { font-weight: 700; white-space: nowrap; }

.acb-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.acb-badge.pending   { background: #fffbeb; color: #b45309; }
.acb-badge.confirmed { background: #e8f5fb; color: #0578a6; }
.acb-badge.completed { background: #ecfdf5; color: #059669; }
.acb-badge.cancelled { background: #fef2f2; color: #dc2626; }

@media (max-width: 640px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-booking-row { grid-template-columns: 90px 1fr; }
  .account-booking-row .acb-total { display: none; }
}

/* ── Mobile polish: booking page ───────────────────────────── */
/* On mobile the booking-copy sidebar (intro text, service area, questions box)
   stacks above the form and adds clutter. Hide it so the form is the focus. */
@media (max-width: 760px) {
  .booking-copy { display: none; }
  /* Without the left column, the form gets the full container width */
  .booking-tool { width: 100%; max-width: 640px; margin: 0 auto; }

  /* Page intro: tighter and less wordy on mobile */
  .booking-page-intro {
    padding-top: 20px;
    padding-bottom: 12px;
  }
  .booking-page-intro h1 { font-size: clamp(2.4rem, 12vw, 3.8rem); }
  .booking-page-intro p:not(.eyebrow) {
    font-size: 0.92rem;
    margin-top: 10px;
  }

  /* Service cards: shorter image, tighter layout */
  .service-image { aspect-ratio: 16 / 9; }
  .service-card-badges { margin-bottom: 10px; }
  /* Hide the "See All Services" scroll-to-anchor — cards are immediately below on mobile */
  .services-cta { display: none; }
}

/* ── Mobile polish: homepage service section ────────────────── */
@media (max-width: 480px) {
  .service-image { aspect-ratio: 16 / 9; }
  .svc-badge { font-size: 0.69rem; padding: 2px 9px; }
  .service-grid { padding: 14px; gap: 12px; }
}

/* ── Mobile animation polish ────────────────────────────────────
   On mobile, the translateY in reveal animations feels jumpy.
   Replace with fade-only transitions. Keyframe overrides inside
   @media are applied after the global definitions above.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  /* Reveal: instant on mobile.
     IntersectionObserver fires while the user is scrolling — running
     opacity+transform transitions at that moment competes with the scroll
     thread and causes jank. Show elements immediately instead. */
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal.is-visible,
  .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .reveal-stagger.is-visible > *:nth-child(1),
  .reveal-stagger.is-visible > *:nth-child(2),
  .reveal-stagger.is-visible > *:nth-child(3),
  .reveal-stagger.is-visible > *:nth-child(4),
  .reveal-stagger.is-visible > *:nth-child(n+5) { transition-delay: 0ms; }

  /* Step panel transitions: fade only on mobile */
  @keyframes stepIn  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes stepOut { from { opacity: 1; } to { opacity: 0; } }

  /* Nav dropdown: quick fade instead of abrupt display switch */
  .nav-links.is-open { animation: mobileNavIn 130ms ease both; }
  @keyframes mobileNavIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Tap feedback: buttons and interactive cards compress slightly on press */
  .button:active,
  .nav-cta:active,
  .slot-button:not(.is-taken):active {
    transform: scale(0.96);
    transition: transform 80ms ease;
  }

  /* Service and add-on cards: tactile press on mobile */
  .premium-service-card:active,
  .addon-card:active {
    transform: scale(0.98);
    transition: transform 100ms ease;
  }

  /* Remove desktop hover lifts on mobile (touch doesn't hover) */
  .premium-service-card,
  .trust-grid article,
  .premium-steps article,
  .story-copy,
  .story-sidecard,
  .about-detail-section > div,
  .contact-card,
  .contact-side {
    transition:
      transform 100ms ease,
      box-shadow 100ms ease,
      border-color 100ms ease;
  }

  /* Hero containers are exempt from every motion rule on mobile */
  .hero-showcase,
  .page-hero-wrap,
  .soft-page-hero,
  .hero-showcase img,
  .page-hero-wrap img,
  .soft-page-hero img {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* Reduced-motion: keep all animated elements visible and static */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .step-panel.is-active, .step-panel.is-leaving {
    animation: none;
  }
}

/* ── Mobile account page polish ─────────────────────────────── */
@media (max-width: 640px) {
  /* Auth card: full width on narrow phones */
  .auth-card { max-width: 100%; }
  /* Account page: less top padding on small phones */
  .account-page { padding-top: 20px; }
  /* Booking row: slightly tighter gap */
  .account-booking-row { gap: 8px; }
}

@media (max-width: 480px) {
  /* Auth body: comfortable padding on small phones */
  .auth-body { padding: 18px 16px; }
}

/* ── Mobile trust + results section ─────────────────────────── */
@media (max-width: 760px) {
  /* Trust articles: tighter but not cramped */
  .trust-grid { gap: 10px; }
  .trust-grid article {
    padding: 14px 16px;
    gap: 4px 14px;
  }
  .mini-icon { width: 36px; height: 36px; font-size: 0.78rem; }

  /* Results copy: full width on mobile */
  .results-copy p { max-width: 100%; }

  /* CTA section: ensure button is full width on very small screens */
  .final-cta-section .button { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  /* Trust grid: tighter on small phones */
  .trust-grid article { padding: 12px 14px; }
  .trust-grid h3 { font-size: 0.9rem; }
  .trust-grid p { font-size: 0.85rem; }
}

/* ── FAQ section ─────────────────────────────────────────────── */
.faq-section {
  background:
    radial-gradient(ellipse 80% 45% at 92% 98%, var(--dark-light) 0%, transparent 100%),
    var(--dark-bg);
  padding: clamp(56px, 5.5vw, 76px) 0;
}
.faq-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.faq-heading {
  position: sticky;
  top: 100px;
}
.faq-heading .eyebrow { color: var(--reef-bright); }
.faq-heading h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  margin: 8px 0 14px;
}
.faq-heading p {
  color: rgba(255,255,255,0.88);
  font-size: 0.97rem;
  line-height: 1.65;
}

/* Accordion list — subtle card container */
.faq-list {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  overflow: hidden;
}

/* Individual accordion items */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.11);
  transition: background 0.22s ease;
}
.faq-item:last-child { border-bottom: none; }

/* Active/expanded item — elevated with reef tint */
.faq-item:has(.faq-trigger[aria-expanded="true"]) {
  background: rgba(5,120,166,0.10);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,0.94);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.4;
  transition: color 0.22s ease, background 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.faq-trigger:hover {
  color: #fff;
  background: rgba(255,255,255,0.03);
}
.faq-trigger[aria-expanded="true"] {
  color: #fff;
  padding-bottom: 16px;
}

/* Chevron — circle container for refined, intentional icon */
.faq-chevron {
  flex-shrink: 0;
  width: 20px; height: 20px;
  padding: 4px;
  box-sizing: content-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  color: rgba(255,255,255,0.50);
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.22s ease,
              background 0.22s ease,
              border-color 0.22s ease;
}
.faq-trigger[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  background: rgba(5,120,166,0.20);
  border-color: rgba(5,120,166,0.40);
  color: var(--reef-bright);
}

.faq-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  /* prevent max-height reflow from leaking outside the section on Safari */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.faq-body p {
  padding: 8px 24px 28px;
  color: rgba(255,255,255,0.92);
  font-size: 0.97rem;
  line-height: 1.76;
  margin: 0;
}
.faq-body p + p { padding-top: 0; padding-bottom: 28px; }
.faq-body a {
  color: var(--reef-bright);
  font-weight: 700;
}

@media (max-width: 1040px) {
  .faq-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 32px;
  }
  .faq-heading { position: static; }
  .faq-section { padding: 52px 0; }
}
@media (max-width: 760px) {
  .faq-section { padding: 40px 0; }
  .faq-inner { padding: 0 20px; gap: 20px; }
  .faq-heading h2 { font-size: 1.45rem; }
  .faq-trigger { font-size: 0.94rem; padding: 18px 20px; }
  .faq-body p { font-size: 0.91rem; padding: 6px 20px 22px; }
}

/* ── Reduced motion: disable FAQ + education accordion transitions ── */
@media (prefers-reduced-motion: reduce) {
  .faq-body      { transition: none; }
  .faq-chevron   { transition: none; }
  .faq-item      { transition: none; }
  .faq-trigger   { transition: none; }
  .edu-svc-body  { transition: none; }
  .edu-chevron   { transition: none; }
  .edu-why-card  { transition: none; }
}


/* ── Launch Offer Modal ───────────────────────────────────────── */
.offer-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6,7,7,0.82);
  animation: offerFadeIn 0.3s ease both;
}
.offer-overlay[hidden] { display: none !important; }
@keyframes offerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.offer-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--dark-bg-alt);
  border: 1px solid var(--dark-edge);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  padding: 36px 32px 28px;
  animation: offerSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  color: #fff;
}
@keyframes offerSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .offer-overlay { animation: none; }
  .offer-panel   { animation: none; }
}
.offer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  transition: background 0.2s, color 0.2s;
}
.offer-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.offer-modal-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--reef-bright);
  margin-bottom: 10px;
}
.offer-modal-headline {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  padding-right: 28px;
}
.offer-modal-body {
  color: rgba(255,255,255,0.6);
  font-size: 0.93rem;
  line-height: 1.65;
  margin-bottom: 22px;
}
.offer-modal-actions {
  display: flex;
  gap: 10px;
}
.offer-modal-actions .button { flex: 1; justify-content: center; }
@media (max-width: 480px) {
  .offer-panel { padding: 28px 20px 24px; border-radius: 14px; }
  .offer-modal-actions { flex-direction: column; }
  .offer-modal-actions .button { flex: none; width: 100%; }
}

/* ── Service Education sections ─────────────────────────────────────────────
   These are full-viewport-width dark sections. They do NOT use the .section
   class on the outer element (which would cap width to --max). Instead each
   section uses .edu-section-inner for the content constraint, matching the
   pattern used by .services-section and .faq-section.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Shared: inner content wrapper ──────────────────────────── */
.edu-section-inner {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

/* ── Shared: heading colors for dark edu backgrounds ─────────── */
.edu-included-section .section-heading,
.edu-comparison-section .section-heading,
.edu-why-section .section-heading {
  margin-inline: auto; /* center within the inner wrapper */
}
.edu-included-section h2,
.edu-comparison-section h2,
.edu-why-section h2 {
  color: #fff;
  font-family: var(--serif);
}
.edu-included-section .eyebrow,
.edu-comparison-section .eyebrow,
.edu-why-section .eyebrow {
  color: var(--reef-bright);
}
.edu-included-section .section-heading p:not(.eyebrow),
.edu-comparison-section .section-heading p:not(.eyebrow),
.edu-why-section .section-heading p:not(.eyebrow) {
  color: rgba(255,255,255,0.88);
  font-family: var(--sans);
  font-size: 1.02rem;
}

/* ── What's Included ─────────────────────────────────────── */
.edu-included-section {
  background:
    radial-gradient(ellipse 75% 40% at 92% 2%, var(--dark-light) 0%, transparent 100%),
    var(--dark-bg-alt);
  border-top: 1px solid var(--dark-seam);
  padding: clamp(48px, 5vw, 68px) 0;
}
.edu-included-section .section-heading { margin-bottom: 32px; }

.edu-svc-accordion {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.edu-svc-item {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.edu-svc-item:last-child { border-bottom: none; }

.edu-svc-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,0.94);
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, background 0.2s ease;
}
.edu-svc-trigger:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.edu-svc-trigger[aria-expanded="true"] {
  color: #fff;
  padding-bottom: 14px;
}

.edu-svc-name { flex: 1; }

.edu-svc-time {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--reef-bright);
  white-space: nowrap;
  flex-shrink: 0;
}

.edu-chevron {
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
  color: rgba(255,255,255,0.55);
}
.edu-svc-trigger[aria-expanded="true"] .edu-chevron {
  transform: rotate(180deg);
  color: var(--reef-bright);
}

.edu-svc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(0.4,0,0.2,1);
}

.edu-svc-body-inner {
  padding: 6px 24px 30px;
}

.edu-svc-best-for {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.90);
  margin: 6px 0 22px;
  font-family: var(--sans);
  line-height: 1.65;
}
.edu-svc-best-for strong {
  color: #fff;
  font-weight: 600;
}

.edu-svc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 520px) {
  .edu-svc-cols { grid-template-columns: 1fr; gap: 14px; }
}

.edu-col-label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--reef-bright);
  margin: 0 0 12px;
}

.edu-svc-cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.edu-svc-cols li {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.93);
  padding-left: 14px;
  position: relative;
  line-height: 1.58;
}
.edu-svc-cols li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--reef-bright);
  opacity: 0.90;
}

/* ── Service Comparison ──────────────────────────────────────── */
.edu-comparison-section {
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, var(--dark-light) 0%, transparent 100%),
    var(--dark-bg);
  border-top: 1px solid var(--dark-seam);
  border-bottom: 1px solid var(--dark-seam);
  padding: clamp(40px, 4vw, 54px) 0;
}
.edu-comparison-section .section-heading { margin-bottom: 28px; }

.edu-cmp-wrap {
  max-width: none;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.edu-cmp-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9rem;
  white-space: nowrap;
}

.edu-cmp-table thead tr {
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.edu-cmp-table thead th {
  padding: 14px 18px;
  text-align: center;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: #fff;
}
.edu-cmp-table thead th.edu-cmp-corner {
  text-align: left;
  width: 40%;
  white-space: normal;
}

/* Recommended column — last package heading */
.edu-cmp-table thead th.edu-cmp-th--recommended {
  color: var(--reef-bright);
  background: rgba(5,120,166,0.12);
  border-left: 1px solid rgba(5,120,166,0.24);
  position: relative;
}
.edu-cmp-table thead th.edu-cmp-th--recommended::before {
  content: '★  Best Value';
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--label);
  font-weight: 800;
  color: var(--reef-bright);
  opacity: 0.80;
  margin-bottom: 5px;
}

.edu-cmp-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.edu-cmp-table tbody tr:last-child { border-bottom: none; }
.edu-cmp-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.025);
}

.edu-cmp-table td,
.edu-cmp-table th[scope="row"] {
  padding: 12px 18px;
  text-align: center;
  vertical-align: middle;
}
.edu-cmp-label {
  text-align: left !important;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  font-size: 0.87rem;
  white-space: normal;
  padding-right: 24px;
}

/* Recommended column — data cells */
.edu-cmp-table td.edu-td--recommended {
  background: rgba(5,120,166,0.09);
  border-left: 1px solid rgba(5,120,166,0.20);
}

.edu-check { color: var(--reef-bright); }
.edu-dash  { color: rgba(255,255,255,0.35); font-size: 1.1rem; }

/* ── Comparison: mobile stacked cards (hidden on desktop, shown on small screens) */
.edu-cmp-cards {
  display: none;
}

.edu-cmp-card {
  background: rgba(255,255,255,0.052);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.edu-cmp-card--recommended {
  border-color: rgba(5,120,166,0.40);
  border-top: 2px solid rgba(5,120,166,0.65);
  background: rgba(5,120,166,0.10);
}

/* Card head: eyebrow + title, separated from list by a ruled line */
.edu-cmp-card-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.13);
}

.edu-cmp-card-eyebrow {
  display: block;
  font-family: var(--label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reef-bright);
  margin-bottom: 6px;
  opacity: 0.90;
}

.edu-cmp-card-title {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* "What's included" sub-label above the feature list */
.edu-cmp-card-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  margin: 0 0 12px;
}

.edu-cmp-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.edu-cmp-card-list li {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.92);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}

.edu-cmp-card-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--reef-bright);
  font-size: 0.8rem;
  font-weight: 700;
  top: 0.08em;
}

.edu-cmp-card-empty {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.48);
  margin: 0;
}

@media (max-width: 640px) {
  .edu-cmp-wrap  { display: none; }
  .edu-cmp-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    max-width: min(var(--max), calc(100% - 28px));
    margin: 0 auto;
  }

  /* Compact card redesign for 2-column mobile layout */
  .edu-cmp-card {
    padding: 11px 11px 13px;
    border-radius: 10px;
    gap: 0;
  }
  .edu-cmp-card-head {
    margin-bottom: 9px;
    padding-bottom: 8px;
  }
  .edu-cmp-card-eyebrow {
    font-size: 0.61rem;
    letter-spacing: 0.12em;
    margin-bottom: 3px;
  }
  .edu-cmp-card-title { font-size: 0.9rem; }
  .edu-cmp-card-sub   { font-size: 0.64rem; margin-bottom: 8px; }
  .edu-cmp-card-list  { gap: 6px; }
  .edu-cmp-card-list li {
    font-size: 0.8rem;
    padding-left: 15px;
    line-height: 1.4;
  }
  .edu-cmp-card-list li::before { font-size: 0.7rem; }
}

@media (max-width: 440px) {
  .edu-cmp-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Single column — restore a bit more breathing room */
  .edu-cmp-card      { padding: 14px 14px 16px; }
  .edu-cmp-card-title { font-size: 0.96rem; }
  .edu-cmp-card-list li { font-size: 0.85rem; line-height: 1.46; }
}

/* ── Why Shine Shark ─────────────────────────────────────────── */
.edu-why-section {
  background:
    radial-gradient(ellipse 65% 55% at 10% 15%, var(--dark-light) 0%, transparent 100%),
    var(--dark-bg-alt);
  border-top: 1px solid var(--dark-seam);
  padding: clamp(48px, 5vw, 68px) 0;
}
.edu-why-section .section-heading { margin-bottom: 36px; }

.edu-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .edu-why-grid { grid-template-columns: 1fr; gap: 10px; }
}

.edu-why-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 28px 24px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.edu-why-card:hover {
  border-color: rgba(5,120,166,0.30);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(5,120,166,0.12);
}

.edu-why-card h3 {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 0.005em;
}
.edu-why-card p {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.90);
  line-height: 1.70;
  margin: 0;
}

/* ── Mobile: education sections ──────────────────────────────── */
@media (max-width: 760px) {
  /* Section gutter */
  .edu-section-inner { width: min(var(--max), calc(100% - 28px)); }

  /* Tighter section vertical padding on small screens */
  .edu-included-section,
  .edu-why-section      { padding: 34px 0; }
  .edu-comparison-section { padding: 28px 0; }

  /* Section heading margins */
  .edu-included-section .section-heading  { margin-bottom: 18px; }
  .edu-comparison-section .section-heading { margin-bottom: 14px; }
  .edu-why-section .section-heading       { margin-bottom: 18px; }

  /* Accordion — tighter trigger and body */
  .edu-svc-accordion { border-radius: 12px; }
  .edu-svc-trigger {
    font-size: 0.89rem;
    padding: 13px 15px;
    gap: 10px;
  }
  .edu-svc-trigger[aria-expanded="true"] { padding-bottom: 9px; }
  .edu-svc-body-inner { padding: 2px 15px 18px; }
  .edu-svc-time { font-size: 0.76rem; }
  .edu-svc-best-for { font-size: 0.86rem; margin: 4px 0 14px; }
  .edu-svc-cols { gap: 16px; }

  /* Comparison table wrapper */
  .edu-cmp-wrap { border-radius: 10px; }

  /* Why cards — compact with left reef accent */
  .edu-why-card {
    padding: 15px 15px 17px;
    gap: 0;
    border-left: 3px solid rgba(5,120,166,0.45);
    border-radius: 0 10px 10px 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .edu-why-card h3 { font-size: 0.94rem; margin-bottom: 7px; }
  .edu-why-card p  { font-size: 0.85rem; line-height: 1.62; }
}

/* ── Mobile performance: strip expensive paint / composite ops ──────────────
   Scoped entirely to max-width:760px. Zero desktop changes.
   These rules come last so they win the cascade unconditionally.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* Sticky header blur repaints on every scroll frame in iOS Safari.
     Replace with a high-opacity solid background — visually equivalent. */
  .site-header {
    background: rgba(242,243,240,0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }

  /* Service cards: 3 stacked box-shadows create large paint areas on mobile.
     Single shadow keeps the premium look at a fraction of the composite cost. */
  .premium-service-card,
  .premium-service-card.is-featured {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transition: none;
  }

  /* Service images: opacity < 1 forces a compositing layer per card.
     Set to full opacity — frees those layers. Transition unused without hover. */
  .service-image img {
    opacity: 1;
    transition: none;
  }

  /* FAQ: max-height animation is tap-triggered (not scroll), so keep it —
     but shorten it so it feels instant without a visible reflow delay.
     Strip the chevron background/border transitions (not needed for touch). */
  .faq-body    { transition: max-height 0.18s ease; }
  .faq-chevron { transition: transform 0.18s ease, color 0.12s ease; }
  .faq-item    { transition: none; }

  /* Education accordions: same treatment as FAQ on mobile */
  .edu-svc-body  { transition: max-height 0.18s ease; }
  .edu-chevron   { transition: transform 0.18s ease, color 0.12s ease; }
  .edu-why-card  { transition: none; }

  /* Offer modal panel: slide+scale animation on a fixed overlay is
     expensive on mobile. Fade in instead. */
  .offer-panel { animation: offerFadeIn 0.22s ease both; }
}

/* ─── Desktop: cinematic / automotive enhancements ──────────────── */
@media (min-width: 1041px) {

  /* ── Section vertical breathing room ────────────────────────── */
  .section {
    padding-top:    clamp(60px, 6.5vw, 92px);
    padding-bottom: clamp(60px, 6.5vw, 92px);
  }
  .faq-section {
    padding: clamp(64px, 6vw, 88px) 0;
  }
  .edu-included-section,
  .edu-why-section {
    padding: clamp(56px, 5vw, 76px) 0;
  }
  .edu-comparison-section {
    padding: clamp(44px, 4vw, 60px) 0;
  }

  /* ── Hero — full-bleed with inset padding ────────────────────── */
  .hero-home {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: max(32px, calc((100vw - var(--max)) / 2));
    padding-left:  max(32px, calc((100vw - var(--max)) / 2));
    padding-top:    clamp(72px, 7.5vw, 104px);
    padding-bottom: clamp(88px, 9vw, 128px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(44px, 5vw, 72px);
  }

  /* Hero image — taller for automotive drama */
  .hero-showcase { aspect-ratio: 4/3; }

  /* Hero headline */
  .hero-content h1 { font-size: clamp(3.4rem, 5.2vw, 5.6rem); }

  /* Hero copy */
  .hero-copy { max-width: 48ch; font-size: clamp(1.05rem, 1.4vw, 1.16rem); }

  /* Services layout — wider sticky sidebar */
  .services-layout { grid-template-columns: 300px minmax(0, 1fr); }

  /* Results — balanced headline, not overpowering */
  .results-copy h2 { font-size: clamp(2.0rem, 3.2vw, 3.0rem); }

  /* Service area heading — slightly prominent as a local statement */
  .service-area-section h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }

  /* Instagram grid */
  .instagram-grid { max-width: 760px; gap: 14px; }

  /* Final CTA headline */
  .final-cta-section h2 { font-size: clamp(2.0rem, 3.6vw, 3.4rem); }

  /* ── FAQ: wider sidebar column, larger type ──────────────────── */
  .faq-inner {
    grid-template-columns: 360px 1fr;
    gap: 72px;
  }
  .faq-heading h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
  .faq-heading p  { font-size: 1.04rem; }
  .faq-trigger    { font-size: 1.06rem; padding: 24px 26px; }
  .faq-trigger[aria-expanded="true"] { padding-bottom: 18px; }
  .faq-body p     { font-size: 1.02rem; padding: 10px 26px 30px; }

  /* ── What's Included: heading left / accordion right ────────── */
  .edu-included-section .edu-section-inner {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }
  .edu-included-section .section-heading {
    position: sticky;
    top: 96px;
    align-self: start;
    margin-bottom: 0;
    margin-inline: 0;
    max-width: none;
  }
  .edu-included-section .edu-svc-accordion {
    max-width: none;
    margin: 0;
  }

  /* ── How Services Compare: heading left / table right ─────── */
  .edu-comparison-section .edu-section-inner {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }
  .edu-comparison-section .section-heading {
    margin-bottom: 0;
    margin-inline: 0;
    max-width: none;
  }
  .edu-comparison-section .edu-cmp-wrap {
    margin: 0;
  }

  /* ── Edu sections: widen containers (right-column content) ── */
  .edu-svc-accordion { max-width: 1000px; }
  .edu-cmp-wrap      { max-width: none; }

  /* ── What's Included: larger, more readable text ─────────────── */
  .edu-svc-trigger {
    font-size: 1.08rem;
    padding: 22px 28px;
    color: #fff;
  }
  .edu-svc-trigger[aria-expanded="true"] { padding-bottom: 16px; }
  .edu-svc-body-inner { padding: 8px 28px 36px; }
  .edu-svc-best-for { font-size: 1.02rem; }
  .edu-svc-cols li  { font-size: 0.98rem; }
  .edu-col-label    { font-size: 0.78rem; }

  /* ── Comparison table: bigger cells, more breathing room ─────── */
  .edu-cmp-table                     { font-size: 0.98rem; }
  .edu-cmp-table thead th            { font-size: 0.94rem; padding: 18px 26px; }
  .edu-cmp-table td,
  .edu-cmp-table th[scope="row"]     { padding: 15px 26px; }
  .edu-cmp-label                     { font-size: 0.98rem; font-weight: 600; }

  /* ── Why Shine Shark cards: larger, more impactful ───────────── */
  .edu-why-grid  { gap: 24px; }
  .edu-why-card  { padding: 34px 28px; }
  .edu-why-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: #fff; }
  .edu-why-card p  { font-size: 1.0rem; color: rgba(255,255,255,0.90); }
}

/* ============================================================
   Service section + accordion: visual stitching
   Uses adjacent sibling selector so the edu-included-section
   flows continuously from the services-section in index.html.
   No HTML changes needed — purely CSS context rules.
   ============================================================ */

/* ── Base: remove seam, tighten top, match background ─────────── */
.services-section + #edu-service-info .edu-included-section {
  background: var(--dark-bg);
  border-top: none;
  padding-top: clamp(20px, 2.5vw, 36px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* ── Desktop: hide redundant heading, accordion goes full-width ── */
@media (min-width: 1041px) {
  .services-section + #edu-service-info .edu-included-section {
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(48px, 5.5vw, 72px);
  }
  .services-section + #edu-service-info .edu-included-section .section-heading {
    display: none;
  }
  .services-section + #edu-service-info .edu-included-section .edu-section-inner {
    grid-template-columns: 1fr;
  }
  .services-section + #edu-service-info .edu-included-section .edu-svc-accordion {
    max-width: none;
    margin: 0;
  }
}

/* ── Mobile: compact heading label, tight top connector ──────────  */
@media (max-width: 760px) {
  .services-section + #edu-service-info .edu-included-section {
    padding-top: 12px;
    padding-bottom: 32px;
  }
  .services-section + #edu-service-info .edu-included-section .section-heading {
    margin-bottom: 12px;
  }
  .services-section + #edu-service-info .edu-included-section .section-heading h2 {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--label);
    font-weight: 700;
    color: rgba(255,255,255,0.42);
    line-height: 1.2;
  }
  .services-section + #edu-service-info .edu-included-section .section-heading .eyebrow {
    display: none;
  }
}

/* ============================================================
   Service card: What's Included inline detail panels
   ============================================================ */

.service-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.svc-details-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  color: rgba(255,255,255,0.62);
  font-size: 0.70rem;
  font-family: var(--label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.svc-details-trigger:hover {
  color: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.05);
}

.svc-details-trigger[aria-expanded="true"] {
  color: var(--reef-bright);
  border-color: rgba(5,120,166,0.42);
  background: rgba(5,120,166,0.09);
}

.svc-details-chevron {
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-details-trigger[aria-expanded="true"] .svc-details-chevron {
  transform: rotate(180deg);
}

/* ── Full-width detail panel ──────────────────────────────────── */

.svc-detail-panel {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 440ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 320ms ease;
}

.svc-detail-inner {
  padding: 28px 32px 32px;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 2px solid rgba(5,120,166,0.52);
  border-radius: 12px;
}

.svc-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.svc-detail-name {
  font-size: 0.71rem;
  font-family: var(--label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--reef-bright);
}

.svc-detail-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

.svc-detail-close:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
}

.svc-detail-best-for {
  font-size: 0.84rem;
  font-family: var(--sans);
  color: rgba(255,255,255,0.74);
  margin-bottom: 22px;
  line-height: 1.55;
}

.svc-detail-best-for strong {
  color: rgba(255,255,255,0.94);
  font-weight: 700;
}

.svc-detail-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 36px;
}

.svc-detail-col-label {
  font-size: 0.66rem;
  font-family: var(--label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.40);
  margin-bottom: 10px;
}

.svc-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.svc-detail-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.83rem;
  font-family: var(--sans);
  color: rgba(255,255,255,0.80);
  line-height: 1.45;
}

.svc-detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--reef);
  opacity: 0.80;
}

.svc-detail-col--time { align-content: start; }

.svc-detail-time {
  font-size: 1.15rem;
  font-family: var(--label);
  font-weight: 800;
  color: rgba(255,255,255,0.90);
  letter-spacing: -0.01em;
  line-height: 1;
}

.premium-service-card.is-detail-active {
  border-color: rgba(5,120,166,0.38);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.52),
    0 0 0 1px rgba(5,120,166,0.18),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

@media (max-width: 640px) {
  .svc-detail-inner {
    padding: 20px 18px 22px;
  }
  .svc-detail-cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Gallery carousel ──────────────────────────────────────── */
.gallery-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.gallery-section .section-head {
  text-align: center;
  margin-bottom: 40px;
}

.gallery-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
}

.gallery-track-wrap {
  flex: 1;
  overflow: hidden;
  border-radius: 14px;
}

.gallery-track {
  display: flex;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 19, 33, 0.70);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  transition: background 160ms ease, opacity 160ms ease;
  cursor: pointer;
}

.gallery-btn:hover { background: rgba(5, 120, 166, 0.85); }
.gallery-btn:disabled { opacity: 0.28; pointer-events: none; }

.gallery-btn--prev { left: -22px; }
.gallery-btn--next { right: -22px; }

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease;
}

.gallery-dot.is-active {
  background: var(--reef);
  transform: scale(1.25);
}

@media (max-width: 768px) {
  .gallery-btn--prev { left: -14px; }
  .gallery-btn--next { right: -14px; }
  .gallery-btn { width: 38px; height: 38px; }
}

@media (max-width: 640px) {
  .gallery-section { padding-top: 56px; padding-bottom: 56px; }
  .gallery-section .section-head { margin-bottom: 24px; }
  .gallery-btn--prev { left: -8px; }
  .gallery-btn--next { right: -8px; }
  .gallery-btn { width: 34px; height: 34px; }
}

/* Gallery admin styles are in admin/admin.css, not here. */