/* ============================================================
   WeDo Travels — Scroll-Stop Site
   Design system: dark bg, WeDo orange accent, professional/trustworthy
   ============================================================ */

:root {
  --bg: #08090b;
  --bg-elevated: #0f1114;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --accent: #eb510b;
  --accent-light: #ff8a4c;
  --accent-rgb: 235, 81, 11;
  --border: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.03);
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Archivo', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  min-height: 100vh;
}

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

a { color: inherit; }

::selection {
  background: var(--accent);
  color: #fff;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent), var(--accent-light));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  margin-bottom: 12px;
}

.section-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.section-sub {
  text-align: center;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

/* ============ Starscape ============ */
#starscape {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ============ Loader ============ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-content { text-align: center; }
.loader-logo {
  max-width: 100px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), 0.4));
}
.loader-text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.loader-bar-track {
  width: 200px;
  height: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width 0.3s ease;
}

/* ============ Scroll Progress ============ */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  z-index: 10000;
  transition: width 0.1s linear;
}

/* ============ Navbar ============ */
#navbar {
  position: fixed;
  top: 12px;
  left: 0; right: 0;
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The scroll-animation frames are white-background, so the fixed navbar needs its
   own backdrop at all times (not just the nav-scrolled pill) to stay legible when
   it's sitting over bright video content instead of the dark page background. */
#navbar::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  z-index: -1;
  pointer-events: none;
}
.nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
}
.nav-logo img { width: 34px; height: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.9rem;
}
.nav-links a { text-decoration: none; color: var(--text-secondary); transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); }
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 10px 20px;
  /* Transparent border so this matches .nav-cta-partner's box model exactly —
     without it the outlined button sits 2px taller than the solid one. */
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  /* Fixed line-height: the arrow glyph in the partner button otherwise makes
     its line box 1px taller than the plain-text quote button. */
  line-height: 1.2;
  transition: all 0.3s ease;
}
.nav-cta:hover { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5); transform: translateY(-1px); }

/* Two CTAs side by side: consumer quote (solid) and B2B partnership (outlined).
   Same size and shape so both read as real buttons, but only one is filled —
   two solid accent pills would compete and neither would win. */
.nav-cta-group { display: flex; align-items: center; gap: 10px; }
.nav-cta-partner {
  background: transparent;
  color: var(--accent) !important;
  padding: 10px 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  transition: all 0.3s ease;
}
.nav-cta-partner:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.nav-cta-partner.active { background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent); }

/* Wider than the original 860px: the second CTA button needs the room, and
   below this the links would start wrapping inside the pill. */
#navbar.nav-scrolled .nav-inner {
  max-width: 1040px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 100px;
  padding: 10px 12px 10px 22px;
}

@media (max-width: 1040px) {
  #navbar.nav-scrolled .nav-inner { max-width: calc(100% - 24px); }
}
/* Between the drawer breakpoint and ~950px the nav gets tight with two
   buttons — tighten the link gap rather than let anything wrap. */
@media (max-width: 950px) and (min-width: 769px) {
  .nav-links { gap: 18px; font-size: 0.85rem; }
  .nav-cta, .nav-cta-partner { padding: 9px 15px; font-size: 0.85rem; }
  .nav-cta-group { gap: 8px; }
}

/* ---- Mobile nav drawer ----
   Previously every link except the CTA was display:none under 768px with no
   replacement control, which left phone users unable to reach Services,
   Reviews or Contact from the nav at all. The toggle button is injected by
   js/common.js; the links themselves stay in each page's HTML. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
#navbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
#navbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-inner { padding: 12px 20px; }
  .nav-toggle { display: flex; }

  /* Drawer: panel floated under the bar. It's absolutely positioned, so it
     never affects layout flow and can animate on transform/opacity alone —
     no height or max-height guesswork. */
  .nav-inner { position: relative; }
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(12, 13, 16, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.3s;
  }
  #navbar.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
  }
  #navbar .nav-links a {
    padding: 15px 20px;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }
  #navbar .nav-links a:last-child { border-bottom: none; }

  /* Both CTAs stay real buttons in the drawer rather than collapsing into
     plain text rows — same treatment as desktop, stacked full-width. */
  .nav-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* Bottom padding must clear the panel's 18px corner radius, or the curve
       closes in on the outlined button's bottom corners and it reads as
       clipped. The original 16px left only 17px of clearance. */
    padding: 14px 16px 24px;
  }
  #navbar .nav-links .nav-cta,
  #navbar .nav-links .nav-cta-partner {
    padding: 14px 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: none;
    white-space: nowrap;
  }
  #navbar .nav-links .nav-cta {
    background: var(--accent);
    color: #fff !important;
  }
  #navbar .nav-links .nav-cta-partner {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    color: var(--accent) !important;
  }
  /* Tap feedback instead of a hover lift, which doesn't apply on touch. */
  #navbar .nav-links .nav-cta:active,
  #navbar .nav-links .nav-cta-partner:active { transform: scale(0.98); }
  #navbar .nav-links .nav-cta:hover { box-shadow: none; transform: none; }

  body.nav-locked { overflow: hidden; }

  /* The cookie banner is fixed to the bottom of the viewport and sits above
     the drawer. On a short screen (iPhone SE) the two overlap and the banner
     covers the Become a Partner button. Hide it while the menu is open; it
     comes straight back when the menu closes, so the choice is not skipped. */
  body.nav-locked #cookieBanner {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
}

/* ============ Buttons ============ */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-body);
}
.btn-primary:hover { box-shadow: 0 0 34px rgba(var(--accent-rgb), 0.55); transform: translateY(-2px); }
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  font-size: 1rem;
}
.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.04); }
.btn-large { font-size: 1.1rem; padding: 18px 48px; }

/* ============ Hero ============ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 32px 80px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.18; }
.orb-1 { width: 520px; height: 520px; background: var(--accent); top: -220px; right: -120px; }
.orb-2 { width: 420px; height: 420px; background: var(--accent); bottom: -160px; left: -120px; opacity: 0.12; }
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.hero-content { max-width: 760px; text-align: center; position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.hero-title .accent-text { color: var(--accent); }
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.scroll-arrow {
  width: 1px;
  height: 32px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}

/* ============ Scroll Animation ============ */
.scroll-animation { height: 350vh; position: relative; z-index: 1; }
.scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
#frameCanvas { position: absolute; top: 0; left: 0; }

.scroll-heading {
  position: absolute;
  top: 8vh;
  left: 0; right: 0;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  padding: 0 20px;
}
.scroll-heading span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  /* Explicit: .scroll-heading is an <h2> for document outline reasons, so the
     span would otherwise inherit the heading's bold weight. */
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

@media (max-width: 1024px) { .scroll-animation { height: 300vh; } }
/* Removed on mobile entirely (not just resized) — the scroll-driven van
   animation doesn't work well on small screens, so mobile skips straight
   from the hero to the specs section. */
@media (max-width: 768px)  { .scroll-animation { display: none; } }

/* ============ Annotation Cards ============ */
.annotation-card {
  position: absolute;
  bottom: 8vh;
  left: 5vw;
  max-width: 360px;
  /* Video frames are white-background throughout, so cards need an opaque dark
     scrim (not the light glass used elsewhere) to keep white text legible. */
  background: rgba(8, 9, 11, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
  padding: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 10;
}
.annotation-card.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.card-number { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); margin-bottom: 8px; }
.card-title { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 8px; }
.card-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.card-stat-number { font-size: 1.8rem; font-weight: 700; color: var(--accent); font-family: var(--font-head); }
.card-stat-label { font-size: 0.8rem; color: var(--text-secondary); display: block; }

/* No mobile styling needed for .annotation-card/.scroll-heading — their
   parent .scroll-animation is display:none on mobile (see above). */

/* ============ How It Works (mobile-only) ============ */
/* Replaces the scroll-driven van section on mobile — same "pack, protect,
   deliver" story, but as a lightweight static list instead of 141 frames. */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: block; }
}
#how-it-works { position: relative; z-index: 1; padding: 60px 0 20px; }
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}
.step-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.step-body h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  margin-bottom: 6px;
}
.step-body p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============ Specs ============ */
#specs { position: relative; z-index: 1; padding: 40px 0 20px; }
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 32px;
  text-align: center;
}
.spec-number {
  font-family: var(--font-head);
  font-size: 3.2rem;
  font-weight: 700;
  display: block;
  transition: text-shadow 0.3s ease;
  overflow-wrap: break-word;
}
.spec-number.counting { text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.55); }
.spec-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 10px;
  display: block;
  letter-spacing: 0.3px;
}
@media (max-width: 768px) {
  .specs-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; padding: 70px 24px; }
  .spec-number { font-size: 2.3rem; }
}
@media (max-width: 480px) {
  .specs-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ Features ============ */
#features { position: relative; z-index: 1; padding: 40px 0 48px; }
/* Five services: auto-fit lays them out 5-across on desktop and reflows to
   3+2 then 2+2+1 rather than stranding a single orphan card on its own row,
   which is what a fixed repeat(4, 1fr) did. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.feature-card {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 32px 28px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.3s ease, border-color 0.3s ease;
  /* Column so "Learn more" can be pushed to the bottom — service names wrap to
     different line counts, which otherwise leaves the links at ragged heights. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.35); }
.feature-card .feature-link { margin-top: auto; padding-top: 4px; }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: var(--accent);
}
.feature-card h3 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 10px; }
.feature-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }
.feature-link { font-size: 0.82rem; color: var(--accent); font-weight: 600; }

@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* ============ Testimonials ============ */
#testimonials { position: relative; z-index: 1; padding: 40px 0 100px; }
.testimonials-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  margin-bottom: 32px;
}
/* A grid, not a drag-scroll carousel: horizontally scrolling reviews hide
   most of the social proof behind an interaction people do not realise is
   available. Three across, capped width so the cards stay readable rather
   than stretching across a wide monitor. */
.testimonials-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 32px 24px;
  align-items: start;
}
.testimonial-card {
  min-width: 0;
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.testimonial-stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 16px; font-size: 0.9rem; }
.testimonial-text { font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; color: var(--text-primary); }
.testimonial-author { display: flex; flex-direction: column; }
.author-name { font-weight: 600; font-size: 0.9rem; }

@media (max-width: 1080px) {
  .testimonials-track { grid-template-columns: repeat(2, 1fr); max-width: 780px; }
}
@media (max-width: 700px) {
  .testimonials-track { grid-template-columns: 1fr; max-width: 520px; padding: 8px 20px 24px; gap: 16px; }
  .testimonial-card { padding: 24px; }
}
.author-role { font-size: 0.8rem; color: var(--text-secondary); }

/* ============ CTA ============ */
#cta { position: relative; z-index: 1; text-align: center; padding: 130px 32px; overflow: hidden; }
.cta-content { position: relative; z-index: 1; }
#cta h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 16px; }
#cta p { color: var(--text-secondary); margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============ Footer ============ */
footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  padding: 64px 32px 40px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; margin-bottom: 14px; }
.footer-brand img { width: 30px; }
.footer-col h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-tertiary); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 10px; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; max-width: 280px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.footer-badge { font-family: var(--font-mono); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============ Inner page hero (service/booking/contact pages) ============ */
.page-hero {
  position: relative;
  padding: 170px 32px 90px;
  text-align: center;
  overflow: hidden;
}
.page-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 20px;
}
.page-hero p {
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 1.05rem;
}

.page-section { position: relative; z-index: 1; padding: 20px 32px 100px; max-width: 900px; margin: 0 auto; }

/* ============ Forms ============ */
.form-card {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 44px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.form-group textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }
.form-group select { cursor: pointer; }
/* Safari/iOS themes the native <select> popup automatically, but Chrome on
   Windows/Android renders it with OS-default light styling unless colors are
   set explicitly on the <option> elements — otherwise white text on white. */
.form-group select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.form-submit { width: 100%; margin-top: 8px; }
.form-note { text-align: center; font-size: 0.8rem; color: var(--text-tertiary); margin-top: 16px; font-family: var(--font-mono); }
.form-status { text-align: center; font-size: 0.9rem; margin-top: 16px; min-height: 1.2em; }
.form-status.success { color: #4ade80; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 28px 22px; }
}

/* ============ Quick contact strip ============ */
.quick-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 0 32px;
}
.quick-contact-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
}
.quick-contact-item:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-3px); }
.quick-contact-item .qc-icon { font-size: 1.6rem; margin-bottom: 12px; }
.quick-contact-item .qc-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); margin-bottom: 6px; }
.quick-contact-item .qc-value { font-weight: 600; font-family: var(--font-head); }

@media (max-width: 768px) { .quick-contact { grid-template-columns: 1fr; } }

/* ============ Info list (hours, coverage) ============ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.info-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
}
.info-card h2 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 10px; color: var(--accent); }
.info-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } }

/* ============ Service page extras ============ */
.service-body { padding: 0 32px 100px; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.service-list { list-style: none; margin: 32px 0; display: flex; flex-direction: column; gap: 14px; }
.service-list li {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.service-list li::before { content: '\2192'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.service-cta { text-align: center; margin-top: 48px; }

/* ============================================================
   ── Components added for the 2026 build ──
   Partner marquee · coverage map · FAQ · partners
   WhatsApp FAB · cookie banner · form extensions · legal pages
   ============================================================ */

/* ============ Floating WhatsApp button (mobile only) ============ */
/* Desktop already has the nav CTA and footer contact block, so the
   bubble would just crowd the layout. Injected by js/common.js. */
.whatsapp-fab { display: none; }

@media (max-width: 768px) {
  .whatsapp-fab {
    position: fixed;
    right: 16px;
    /* Clears iOS Safari's bottom browser chrome. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px 13px 15px;
    border-radius: 100px;
    background: #25d366;
    color: #06240f;
    text-decoration: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4);
    animation: fabIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
  }
  .whatsapp-fab svg { width: 21px; height: 21px; fill: currentColor; flex-shrink: 0; }
  .whatsapp-fab:active { transform: scale(0.96); }
  /* Banner sits above the bubble while it's on screen. */
  body:has(#cookieBanner.visible) .whatsapp-fab { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes fabIn {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ Cookie banner ============ */
#cookieBanner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9500;
  background: rgba(14, 16, 20, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  padding: 20px 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#cookieBanner.visible { opacity: 1; transform: translateY(0); }
.cookie-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 640px;
}
.cookie-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.cookie-decline {
  background: transparent;
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.16);
}
.cookie-decline:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.4); }
.cookie-accept { background: var(--accent); color: #fff; }
.cookie-accept:hover { box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.5); }

@media (max-width: 640px) {
  .cookie-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  /* Same order as desktop (Decline, Accept) and equal weight, so the choice
     reads the same way at every size. */
  .cookie-btn { flex: 1; }
}

/* ============ Partner logo marquee ============ */
/* Two identical tracks scrolling as one continuous belt: the animation
   moves exactly one track width, so the loop point is seamless. */
#partners-strip { position: relative; z-index: 1; padding: 56px 0 40px; }
.marquee-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 28px;
}
.marquee {
  position: relative;
  overflow: hidden;
}
/* Edge fade done with gradient overlays rather than -webkit-mask-image.
   Masking puts the element on a compositing path where iOS Safari commonly
   drops the child's animation entirely — the belt rendered but sat still on
   phones while working on desktop. Overlays are visually identical here
   because the page background is a flat colour. */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  /* Movement is driven by requestAnimationFrame in js/partner-marquee.js,
     not a CSS animation. A CSS animation here was silently pausable by three
     separate iOS behaviours - :hover sticking after a touch, Low Power Mode,
     and Reduce Motion - which is why the belt sat still on phones while
     running fine on desktop. rAF is subject to none of them. */
  will-change: transform;
  backface-visibility: hidden;
}
/* Pause-on-hover only where a real pointer exists. On iOS :hover latches
   after a touch and would never clear. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  flex-shrink: 0;
}
.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  flex-shrink: 0;
  /* Logos arrive in clashing brand colours; desaturating them keeps the belt
     quiet and lets the orange accent stay the only colour on screen. No
     brightness boost — the processed logos are already light artwork, and
     lifting them further clips the finer detail to a flat white blob. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.marquee-item:hover { filter: grayscale(0); opacity: 1; }
/* Both axes capped, same optical-balance reasoning as .partner-card-logo. */
.marquee-item img { max-height: 46px; max-width: 150px; width: auto; object-fit: contain; }
/* Fallback when a partner has no logo file yet. */
.marquee-item-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .marquee-group { gap: 40px; padding-right: 40px; }
  .marquee-item { height: 34px; }
  .marquee-item img { max-height: 34px; }
  .marquee-item-text { font-size: 0.92rem; }
}

/* ============ Coverage ============ */
#coverage { position: relative; z-index: 1; padding: 48px 0 100px; }
.coverage-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.coverage-tier {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.coverage-tier.is-gda { border-color: rgba(var(--accent-rgb), 0.3); }
.tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tier-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.coverage-tier.is-gda .tier-dot { background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8); }
.coverage-tier.is-nationwide .tier-dot { background: rgba(255, 255, 255, 0.35); }
.tier-head h3 { font-family: var(--font-head); font-size: 1.15rem; }
.tier-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.tier-counties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.county-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  color: var(--accent-light);
}
.tier-services { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-service {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

@media (max-width: 760px) {
  .coverage-layout { grid-template-columns: 1fr; gap: 16px; }
}

/* ============ FAQ ============ */
/* Built on native <details>/<summary>: keyboard accessible and fully
   functional with JS disabled, which matters for a page Google crawls. */
#faq { position: relative; z-index: 1; padding: 40px 0 100px; }
.faq-list { max-width: 780px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-item[open] { border-color: rgba(var(--accent-rgb), 0.32); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-light); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-chevron {
  flex-shrink: 0;
  width: 13px; height: 13px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item[open] .faq-chevron { transform: rotate(225deg) translateY(-3px); }
.faq-answer {
  padding: 0 26px 24px;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.7;
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .faq-list { padding: 0 20px; }
  .faq-item summary { padding: 18px 20px; font-size: 0.95rem; }
  .faq-answer { padding: 0 20px 20px; }
}

/* ============ Gallery ============ */

/* ============ Partners / become a partner ============ */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 40px 0;
  /* Real testimonials vary a lot in length (one line to three paragraphs) —
     default grid stretch would force every card to the tallest in its row,
     leaving short quotes floating in a lot of empty space. */
  align-items: start;
}
.partner-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Full colour here, unlike the marquee: these cards are endorsements, and the
   brand needs to be recognisable. The logos are pre-processed to light artwork
   on transparency, so no filter is needed to make them sit on the dark card. */
.partner-card-logo {
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
/* Constrained on BOTH axes for optical balance. Height alone isn't enough:
   these wordmarks range from 1.8:1 (Off Beat) to 3.9:1 (Fallon & Byrne), so
   at a shared height the wide ones render twice the area and visually shout.
   Capping width too lets the wide marks sit shorter and the compact ones
   taller, which reads as evenly weighted. */
.partner-card-logo img {
  max-height: 50px;
  max-width: 155px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.partner-card-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.partner-card-quote { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; }
.partner-card-quote p + p { margin-top: 12px; }
.partner-card-author { font-size: 0.82rem; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: auto; }

@media (max-width: 1080px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .partner-grid { grid-template-columns: 1fr; } }

/* ---------- Read more clamp (reviews + partner testimonials) ----------
   max-height in em rather than -webkit-line-clamp: the partner quotes are
   several <p> children and line-clamp is unreliable across block children.
   --clamp-lh must track the element's own line-height or the cut lands
   mid-line. */
[data-clamp] {
  position: relative;
  overflow: hidden;
  max-height: calc(var(--clamp-lh, 1.6em) * var(--clamp-lines, 5));
}
[data-clamp].is-open,
[data-clamp].is-short { max-height: none; overflow: visible; }
/* Fades the cut line so it reads as "there is more" rather than a crop bug.
   Suppressed once open, and for text that never overflowed. */
[data-clamp]:not(.is-open):not(.is-short)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.2em;
  background: linear-gradient(to bottom, rgba(15, 17, 20, 0), var(--bg-elevated));
  pointer-events: none;
}
.read-more-btn {
  display: inline-block;
  /* Both cards are flex columns, so this would stretch to full width and the
     UA's default centred button text would sit it in the middle of the card,
     out of line with the review above it. */
  align-self: flex-start;
  text-align: left;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.read-more-btn:hover { color: var(--accent); }
.read-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* .testimonial-text already carries 20px below it, so the button only needs
   space added underneath - otherwise it sits flush against the reviewer name. */
.testimonial-card .read-more-btn { margin-top: 0; margin-bottom: 16px; }
.testimonial-text[data-clamp] { --clamp-lh: 1.6em; }
.partner-card-quote[data-clamp] { --clamp-lh: 1.65em; }

/* Numbered because becoming a partner genuinely is a sequence. */
.steps-numbered { display: grid; gap: 18px; margin: 40px 0; counter-reset: step; }
.numbered-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 26px;
}
.numbered-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}
.numbered-step h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 6px; }
.numbered-step p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

/* ============ "From €" price badge ============ */
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 5px 12px;
  border-radius: 100px;
}
.price-badge strong { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
.feature-card .price-badge { margin-bottom: 14px; }

/* ============ Form extensions ============ */
/* Conditional blocks: revealed by js/forms.js when the chosen service
   needs them. Kept out of the tab order and validation while hidden. */
.form-conditional { display: none; }
.form-conditional.is-visible {
  display: block;
  animation: revealField 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes revealField {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-fieldset {
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.form-fieldset legend {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 8px;
}
/* Direct child only. Unscoped, this also matched the .form-group nested
   inside a .form-conditional — which is always the last child of its own
   wrapper — collapsing the gap between a revealed answer and the next
   question. */
.form-fieldset > .form-group:last-child,
.form-fieldset > .form-conditional:last-child .form-group { margin-bottom: 0; }

/* Radio / checkbox pills */
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  user-select: none;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-mark {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
}
.choice input[type="checkbox"] ~ .choice-mark { border-radius: 5px; }
.choice:hover { border-color: rgba(255, 255, 255, 0.24); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.choice:has(input:checked) .choice-mark { border-color: var(--accent); background: var(--accent); }
.choice:has(input:checked) .choice-mark::after {
  content: '';
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.field-hint { font-size: 0.78rem; color: var(--text-tertiary); line-height: 1.5; }
.field-error { font-size: 0.8rem; color: #f87171; min-height: 0; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: rgba(248, 113, 113, 0.6); }

/* Photo upload */
.dropzone {
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.02);
}
.dropzone:hover, .dropzone.is-dragover {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.06);
}
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone input[type="file"] { display: none; }
.dropzone-icon { font-size: 1.6rem; margin-bottom: 10px; opacity: 0.7; }
.dropzone-text { font-size: 0.92rem; font-weight: 500; margin-bottom: 5px; }
.dropzone-hint { font-size: 0.78rem; color: var(--text-tertiary); }
.dropzone-text .accent-text { color: var(--accent); }

.upload-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 16px; }
.upload-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.upload-remove:hover { background: #ef4444; }
.upload-thumb.is-uploading::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.upload-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  width: 0%;
  transition: width 0.2s ease;
  z-index: 1;
}

.form-status.error { color: #f87171; }
.form-status.pending { color: var(--text-secondary); }
.form-submit[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Success panel replacing the form after submit */
.form-success {
  text-align: center;
  padding: 20px 10px;
}
.form-success .success-icon {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
}
.form-success h2 { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 12px; }
.form-success p { color: var(--text-secondary); line-height: 1.65; max-width: 440px; margin: 0 auto 10px; }
.form-success .success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ============ Legal / prose pages ============ */
.prose { max-width: 780px; margin: 0 auto; padding: 0 32px 100px; position: relative; z-index: 1; }
.prose h2 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  margin: 44px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.prose h3 { font-family: var(--font-head); font-size: 1.02rem; margin: 26px 0 10px; color: var(--accent-light); }
.prose p, .prose li { color: var(--text-secondary); line-height: 1.75; font-size: 0.94rem; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* The service-page CTA sits inside .prose, where the rule above would otherwise
   repaint it accent-on-accent (invisible) and underline it. */
.prose .btn-primary { color: #fff; text-decoration: none; }
.prose .btn-secondary { text-decoration: none; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose-meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-tertiary);
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.prose-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.88rem; }
.prose-table th, .prose-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}
.prose-table th { color: var(--text-primary); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.prose-table-wrap { overflow-x: auto; }

@media (max-width: 560px) { .prose { padding: 0 20px 80px; } }

/* Footer legal row */
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.footer-legal a, .footer-legal button {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color 0.2s ease;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--accent); }

/* ============ Accessibility baseline ============ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  background: var(--accent);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .map-pin-halo { animation: none; opacity: 0.2; }
}

/* ============ Address autocomplete dropdown ============ */
/* Suggestions are fetched from /api/places, so this is our own markup —
   no Google-styled widget to override. */
.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 50;
  margin-top: 6px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  max-height: 264px;
  overflow-y: auto;
  display: none;
}
.address-suggestions.open { display: block; }
.address-suggestions li {
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease, color 0.15s ease;
}
.address-suggestions li:last-child { border-bottom: none; }
.address-suggestions li:hover,
.address-suggestions li.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-primary);
}


/* ============ Standalone section headings (contact, booking) ============ */
.section-heading {
  font-family: var(--font-head);
  font-size: 1.35rem;
  max-width: 800px;
  margin: 8px auto 12px;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.section-lede {
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: 0.94rem;
  max-width: 800px;
  margin: 0 auto 26px;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.section-lede a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .section-heading, .section-lede { padding: 0 20px; }
}


/* ============ Footer social links ============ */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; display: block; }

/* Compact variant for the short footer (booking, terms, privacy, 404), where the
   icons sit inline in the 0.8rem copyright row rather than under the brand blurb. */
.footer-social-sm { margin-top: 0; gap: 8px; }
.footer-social-sm a { width: 30px; height: 30px; border-radius: 8px; }
.footer-social-sm svg { width: 15px; height: 15px; }