:root {
  --ink: #071116;
  --text: #172329;
  --muted: #5e6a70;
  --line: #dfe7ea;
  --paper: #f7fafb;
  --white: #ffffff;
  --cyan: #19bfd3;
  --blue: #156d91;
  --shadow: 0 24px 80px rgba(7, 17, 22, 0.16);
  --radius: 8px;
}

@keyframes softPulse {
  0%, 100% { box-shadow: 0 18px 42px rgba(25,191,211,.24); transform: translateY(0); }
  50% { box-shadow: 0 22px 58px rgba(25,191,211,.42); transform: translateY(-1px); }
}

@keyframes haloPulse {
  0%, 100% { opacity: .22; transform: scale(.98); }
  50% { opacity: .48; transform: scale(1.04); }
}

@keyframes handlePulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.24); transform: translate(-50%, -50%) scale(.98); }
  50% { box-shadow: 0 16px 36px rgba(25,191,211,.42); transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes sheen {
  0% { transform: translateX(-130%) skewX(-18deg); }
  42%, 100% { transform: translateX(160%) skewX(-18deg); }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(25,191,211,.18); }
  50% { border-color: rgba(25,191,211,.56); }
}

@keyframes lineScan {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: 16px; }
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.site-header {
  align-items: center;
  background: rgba(7, 17, 22, 0.45);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 16px clamp(18px, 4vw, 54px);
  position: fixed;
  right: 0;
  top: 0;
  transition: background 180ms ease, box-shadow 180ms ease;
  z-index: 20;
}
.site-header.is-scrolled, .site-header.is-solid {
  background: rgba(7, 17, 22, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}
.brand { align-items: center; display: inline-flex; gap: 12px; }
.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-radius: var(--radius);
  color: var(--ink);
  display: inline-flex;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  position: relative;
  width: 42px;
}
.brand-mark::after {
  animation: haloPulse 2600ms ease-in-out infinite;
  border: 1px solid rgba(25,191,211,.74);
  border-radius: inherit;
  content: "";
  inset: -6px;
  position: absolute;
}
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand small { color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.site-nav { align-items: center; display: flex; gap: 24px; font-size: 14px; font-weight: 700; }
.site-nav a { opacity: .82; transition: opacity 160ms ease, color 160ms ease; }
.site-nav a:hover { color: var(--cyan); opacity: 1; }
.nav-toggle { background: transparent; border: 0; display: none; height: 42px; padding: 8px; width: 42px; }
.nav-toggle span { background: var(--white); display: block; height: 2px; margin: 6px 0; }

.hero { color: var(--white); min-height: 94svh; overflow: hidden; position: relative; }
.hero picture, .hero picture img { height: 100%; inset: 0; position: absolute; width: 100%; }
.hero picture img { object-fit: cover; }
.hero-overlay { background: linear-gradient(90deg, rgba(7,17,22,.92), rgba(7,17,22,.58) 42%, rgba(7,17,22,.16)); inset: 0; position: absolute; }
.hero::after {
  animation: lineScan 5200ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(25,191,211,.18), transparent);
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 42%;
  z-index: 1;
}
.hero-content {
  max-width: 820px;
  padding: 170px clamp(20px, 7vw, 92px) 150px;
  position: relative;
  z-index: 2;
}
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .12em; margin: 0 0 14px; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.08; margin: 0; }
h1 { font-size: clamp(42px, 7vw, 86px); max-width: 820px; }
h2 { font-size: clamp(30px, 4.5vw, 54px); }
h3 { font-size: 21px; }
.hero-content p:not(.eyebrow) { color: rgba(255,255,255,.86); font-size: clamp(18px, 2vw, 23px); margin: 24px 0 0; max-width: 660px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button {
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 48px;
  padding: 13px 20px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--cyan); box-shadow: 0 18px 42px rgba(25,191,211,.28); color: var(--ink); }
.hero-actions .button-primary { animation: softPulse 2600ms ease-in-out infinite; }
.button-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: var(--white); }
.hero-strip {
  backdrop-filter: blur(16px);
  background: rgba(7,17,22,.72);
  border-top: 1px solid rgba(255,255,255,.12);
  bottom: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  left: 0;
  position: absolute;
  right: 0;
  z-index: 2;
}
.hero-strip span {
  border-right: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  overflow: hidden;
  padding: 22px clamp(16px, 4vw, 54px);
  position: relative;
}
.hero-strip span::after {
  animation: sheen 6800ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  content: "";
  inset: 0;
  position: absolute;
  width: 55%;
}
.hero-strip span:nth-child(2)::after { animation-delay: 900ms; }
.hero-strip span:nth-child(3)::after { animation-delay: 1800ms; }

.section { padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 72px); }
.section-muted { background: var(--paper); }
.section-dark {
  background:
    radial-gradient(circle at 20% 20%, rgba(25,191,211,.16), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(21,109,145,.2), transparent 34%),
    var(--ink);
  color: var(--white);
  overflow: hidden;
  position: relative;
}
.section-heading { max-width: 860px; margin-bottom: 38px; }
.section-copy { max-width: 720px; }
.section-copy p:not(.eyebrow), .section-heading + p { color: var(--muted); font-size: 18px; }
.section-dark .section-copy p, .section-dark .section-heading p:not(.eyebrow) { color: rgba(255,255,255,.74); }
.intro { align-items: end; display: grid; gap: 34px; grid-template-columns: 1.1fr .9fr; }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.stat-card, .service-card, .reason-list div, .booking-form, .calendar-booking, .map-placeholder {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(7,17,22,.06);
}
.stat-card { animation: floatCard 5200ms ease-in-out infinite; padding: 22px; position: relative; }
.stat-card:nth-child(2) { animation-delay: 700ms; }
.stat-card:nth-child(3) { animation-delay: 1400ms; }
.stat-card strong { color: var(--ink); display: block; font-size: clamp(24px, 3vw, 38px); line-height: 1; }
.stat-card span { color: var(--muted); font-weight: 800; }
.service-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-card {
  animation: borderGlow 6200ms ease-in-out infinite;
  min-height: 248px;
  overflow: hidden;
  padding: 26px;
  position: relative;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.service-card::after {
  animation: sheen 7800ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(25,191,211,.18), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 45%;
}
.service-card:nth-child(2n)::after { animation-delay: 1100ms; }
.service-card:nth-child(3n)::after { animation-delay: 1900ms; }
.service-card:hover { border-color: rgba(25,191,211,.72); box-shadow: var(--shadow); transform: translateY(-5px); }
.icon {
  align-items: center;
  background: #e8fbfd;
  border-radius: var(--radius);
  color: var(--blue);
  display: inline-flex;
  font-size: 24px;
  height: 46px;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  width: 46px;
}
.icon::after {
  animation: haloPulse 2400ms ease-in-out infinite;
  border: 1px solid rgba(25,191,211,.45);
  border-radius: inherit;
  content: "";
  inset: -5px;
  position: absolute;
}
.service-card p { color: var(--muted); margin: 14px 0 20px; }
.service-card small { color: var(--blue); font-weight: 900; }
.split { align-items: center; display: grid; gap: 42px; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.reason-list { display: grid; gap: 14px; }
.reason-list div {
  overflow: hidden;
  padding: 22px;
  position: relative;
  transition: transform 180ms ease, border-color 180ms ease;
}
.reason-list div:hover { border-color: rgba(25,191,211,.58); transform: translateX(5px); }
.reason-list div::before {
  background: var(--cyan);
  bottom: 18px;
  content: "";
  left: 0;
  position: absolute;
  top: 18px;
  transform: scaleY(.35);
  transform-origin: center;
  transition: transform 180ms ease;
  width: 3px;
}
.reason-list div:hover::before { transform: scaleY(1); }
.reason-list strong, .reason-list span { display: block; }
.reason-list span { color: var(--muted); margin-top: 7px; }

.gallery { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.compare-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}
.compare-card:hover { background: rgba(255,255,255,.09); border-color: rgba(25,191,211,.62); transform: translateY(-4px); }
.compare-frame {
  --position: 50%;
  aspect-ratio: 4 / 3;
  background: #10181d;
  overflow: hidden;
  position: relative;
}
.compare-frame.is-auto-sliding .compare-after,
.compare-frame.is-auto-sliding .compare-handle {
  transition: clip-path 1500ms cubic-bezier(.22, 1, .36, 1), left 1500ms cubic-bezier(.22, 1, .36, 1);
}
.compare-image {
  filter: saturate(.92) contrast(.98);
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.compare-after {
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
  inset: 0;
  position: absolute;
}
.compare-after .compare-image { filter: saturate(1.1) contrast(1.04); }
.compare-handle {
  background: var(--white);
  bottom: 0;
  box-shadow: 0 0 0 1px rgba(7,17,22,.16), 0 0 28px rgba(25,191,211,.38);
  left: var(--position);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 3px;
  z-index: 3;
}
.compare-handle::after {
  align-items: center;
  background: var(--cyan);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  color: var(--ink);
  content: "↔";
  display: flex;
  font-size: 16px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  animation: handlePulse 1800ms ease-in-out infinite;
}
.compare-label {
  background: rgba(7,17,22,.72);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 7px 9px;
  position: absolute;
  text-transform: uppercase;
  top: 14px;
  z-index: 4;
}
.compare-label-before { left: 14px; }
.compare-label-after { right: 14px; }
.compare-range {
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 5;
}
.compare-range::-webkit-slider-thumb { appearance: none; height: 44px; width: 44px; }
.compare-range::-moz-range-thumb { background: transparent; border: 0; height: 44px; width: 44px; }
.compare-card h3 { color: var(--white); padding: 22px 22px 0; }
.compare-card p { color: rgba(255,255,255,.72); margin: 10px 0 0; padding: 0 22px 24px; }
.booking { display: grid; gap: 28px; grid-template-columns: 1fr; }
.booking-heading { margin-bottom: 4px; max-width: 980px; }
.calendar-booking {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  overflow: hidden;
  padding: 22px;
  position: relative;
}
.calendar-booking::before {
  animation: sheen 6400ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(25,191,211,.16), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 44%;
}
.calendar-booking strong,
.calendar-booking span,
.calendar-booking small,
.calendar-booking a {
  position: relative;
  z-index: 1;
}
.calendar-booking strong { color: var(--ink); display: block; font-size: 20px; line-height: 1.2; }
.calendar-booking span { color: var(--muted); display: block; margin-top: 6px; }
.calendar-booking small { color: var(--muted); }
.calendar-booking .button[aria-disabled="true"] {
  background: #d7e2e6;
  box-shadow: none;
  color: #607078;
  cursor: not-allowed;
  pointer-events: none;
}
.slot-picker,
.day-picker {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(7,17,22,.08);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  padding: 18px;
}
.slot-picker-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.slot-picker-head strong { color: var(--ink); font-size: 20px; }
.slot-picker-head span { color: var(--muted); font-size: 13px; font-weight: 800; text-align: right; }
.slot-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.day-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}
.day-button {
  appearance: none;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(241,249,251,.97));
  border: 1px solid rgba(7,17,22,.1);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 16px;
  position: relative;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.day-button::before {
  background: var(--cyan);
  border-radius: 999px;
  content: "";
  height: 6px;
  left: 16px;
  position: absolute;
  right: 16px;
  top: 12px;
  transform: scaleX(.32);
  transform-origin: left;
  transition: transform 160ms ease;
}
.day-button strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-top: 14px;
}
.day-button span {
  color: var(--blue);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.day-button small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}
.day-button:hover,
.day-button.is-selected {
  background: linear-gradient(135deg, var(--cyan), #59dce8);
  border-color: var(--cyan);
  box-shadow: 0 18px 44px rgba(25,191,211,.28);
  transform: translateY(-3px);
}
.day-button:hover::before,
.day-button.is-selected::before { background: var(--ink); transform: scaleX(1); }
.day-button.is-selected span,
.day-button.is-selected small { color: rgba(7,17,22,.78); }
.load-more-days {
  appearance: none;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
  margin-top: 12px;
  min-height: 48px;
  padding: 12px 16px;
  width: 100%;
}
.load-more-days:hover { background: #102028; }
.slot-button {
  appearance: none;
  background: var(--white);
  border: 1px solid rgba(7,17,22,.1);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  min-height: 52px;
  padding: 12px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.slot-button:hover,
.slot-button.is-selected {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 12px 30px rgba(25,191,211,.24);
  transform: translateY(-1px);
}
.honeypot {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.booking-form {
  background:
    radial-gradient(circle at 100% 0%, rgba(25,191,211,.18), transparent 28%),
    linear-gradient(180deg, #ffffff, #f7fbfc);
  border-color: rgba(7,17,22,.08);
  box-shadow: 0 30px 90px rgba(7,17,22,.12);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  padding: 24px;
  position: relative;
}
.booking-form::before {
  animation: sheen 7200ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(25,191,211,.16), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 42%;
}
.booking-wizard { grid-template-columns: 1fr; }
.wizard-progress {
  background: rgba(7,17,22,.06);
  border-radius: var(--radius);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px;
  position: relative;
  z-index: 1;
}
.wizard-progress span {
  border-radius: calc(var(--radius) - 2px);
  color: #64737a;
  font-size: 12px;
  font-weight: 900;
  min-height: 48px;
  padding: 14px 8px;
  text-align: center;
}
.wizard-progress span.is-active {
  background: var(--ink);
  box-shadow: 0 12px 28px rgba(7,17,22,.16);
  color: var(--white);
}
.wizard-step { display: none; gap: 18px; position: relative; z-index: 1; }
.wizard-step.is-active { display: grid; }
.wizard-step h3 { color: var(--ink); font-size: clamp(24px, 3vw, 34px); }
.wizard-kicker {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  margin: 0;
  text-transform: uppercase;
}
.choice-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.choice-section {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(7,17,22,.08);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  padding: 16px;
}
.choice-section > div:first-child strong {
  color: var(--ink);
  display: block;
  font-size: 18px;
}
.choice-section > div:first-child p {
  color: var(--muted);
  margin: 5px 0 0;
}
.choice-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card {
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  gap: 7px;
  min-height: 128px;
  padding: 18px;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.choice-card input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.choice-card span { color: var(--ink); font-size: 20px; font-weight: 900; line-height: 1.1; }
.choice-card small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.choice-card:has(input:checked) {
  background: #e8fbfd;
  border-color: var(--cyan);
  box-shadow: 0 18px 42px rgba(25,191,211,.18);
  transform: translateY(-2px);
}
.addon-panel {
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.addon-panel summary { color: var(--ink); cursor: pointer; font-weight: 900; }
.addon-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); padding-top: 14px; }
.addon-grid label {
  align-items: center;
  color: var(--text);
  display: flex;
  flex-direction: row;
  font-weight: 800;
  gap: 9px;
}
.addon-grid input { min-height: auto; width: auto; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.wizard-summary {
  background: var(--ink);
  border-radius: var(--radius);
  color: var(--white);
  display: grid;
  gap: 6px;
  padding: 18px;
  position: relative;
  z-index: 1;
}
.wizard-summary strong { color: var(--cyan); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.wizard-summary span { color: rgba(255,255,255,.84); }
.booking-success {
  background: linear-gradient(135deg, #071116, #0d252d);
  border-radius: var(--radius);
  color: var(--white);
  display: grid;
  gap: 12px;
  padding: clamp(24px, 4vw, 38px);
  position: relative;
  z-index: 2;
}
.booking-success[hidden] { display: none; }
.booking-success span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.booking-success h3 { color: var(--white); font-size: clamp(26px, 4vw, 42px); }
.booking-success p { color: rgba(255,255,255,.78); margin: 0; }
.booking-wizard.is-complete > :not(.booking-success) { display: none; }
.wizard-actions { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; position: relative; z-index: 1; }
.wizard-actions [hidden] { display: none; }
.wizard-actions .button-ghost { border-color: var(--line); color: var(--ink); }
.wizard-actions .button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
label { color: var(--ink); display: grid; font-size: 13px; font-weight: 900; gap: 7px; }
input, select, textarea {
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 46px;
  padding: 11px 12px;
  width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input:focus, select:focus, textarea:focus {
  background: var(--white);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(25,191,211,.14);
  outline: none;
}
textarea { resize: vertical; }
.full { grid-column: 1 / -1; }
.form-note { color: var(--blue); font-weight: 800; margin: 0; }
.form-note.is-error { color: #b42318; }
.map-placeholder {
  align-content: center;
  animation: borderGlow 5200ms ease-in-out infinite;
  background: linear-gradient(135deg, #dff8fb, #f8fbfc);
  min-height: 340px;
  overflow: hidden;
  padding: 32px;
  position: relative;
}
.map-placeholder::after {
  animation: haloPulse 3600ms ease-in-out infinite;
  background: radial-gradient(circle, rgba(25,191,211,.28), transparent 64%);
  content: "";
  height: 180px;
  position: absolute;
  right: -45px;
  top: -45px;
  width: 180px;
}
.map-placeholder span { color: var(--ink); display: block; font-size: 28px; font-weight: 900; }
.map-placeholder p { color: var(--muted); max-width: 420px; }

.site-footer { background: #050b0f; color: var(--white); display: grid; gap: 28px; grid-template-columns: 1.3fr repeat(3, 1fr); padding: 54px clamp(20px, 5vw, 72px); }
.site-footer h2, .site-footer h3 { font-size: 18px; margin-bottom: 12px; }
.site-footer p, .site-footer a, .site-footer button { color: rgba(255,255,255,.72); }
.site-footer a, .site-footer button { background: none; border: 0; cursor: pointer; display: block; padding: 3px 0; text-align: left; }
.cookie-banner {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  bottom: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  left: 18px;
  padding: 20px;
  position: fixed;
  right: 18px;
  z-index: 50;
}
.cookie-banner[hidden], .lightbox[hidden] { display: none; }
.cookie-banner h2 { font-size: 20px; }
.cookie-banner p { color: var(--muted); margin: 6px 0 0; }
.cookie-banner a { color: var(--blue); font-weight: 900; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .button-ghost { border-color: var(--line); color: var(--ink); }
.lightbox { align-items: center; background: rgba(0,0,0,.88); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 60; }
.lightbox img { border-radius: var(--radius); max-height: 86vh; object-fit: contain; }
.lightbox button { background: var(--white); border: 0; border-radius: 50%; cursor: pointer; font-size: 32px; height: 48px; position: absolute; right: 20px; top: 20px; width: 48px; }
.legal-page { background: var(--paper); min-height: 100vh; padding: 120px 20px 80px; }
.legal-content { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 auto; max-width: 920px; padding: clamp(28px, 5vw, 62px); }
.legal-content h1 { color: var(--ink); font-size: clamp(36px, 6vw, 64px); }
.legal-content h2 { font-size: 24px; margin-top: 34px; }
.legal-content p { color: var(--muted); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .intro, .split, .booking, .site-footer { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .site-header {
    background: rgba(7,17,22,.92);
    padding: 12px 16px;
  }
  .brand { gap: 10px; min-width: 0; }
  .brand-mark { height: 38px; width: 38px; }
  .brand strong { font-size: 15px; }
  .brand small { font-size: 10px; letter-spacing: .06em; }
  .nav-toggle { display: block; }
  .site-nav {
    background: rgba(7,17,22,.98);
    border-top: 1px solid rgba(255,255,255,.12);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 14px 18px 20px;
    position: absolute;
    right: 0;
    top: 62px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 44px; padding: 12px 0; width: 100%; }
  .hero { min-height: 100svh; }
  .hero picture img { object-position: 62% center; }
  .hero::after { opacity: .45; width: 64%; }
  .hero-content { padding: 112px 20px 190px; }
  .hero-overlay { background: linear-gradient(180deg, rgba(7,17,22,.84), rgba(7,17,22,.72)); }
  h1 { font-size: clamp(36px, 11vw, 48px); }
  h2 { font-size: clamp(28px, 9vw, 38px); }
  h3 { font-size: 20px; }
  .eyebrow { font-size: 11px; letter-spacing: .09em; }
  .hero-content p:not(.eyebrow) { font-size: 17px; line-height: 1.5; margin-top: 18px; }
  .hero-actions { display: grid; gap: 10px; margin-top: 26px; }
  .hero-actions .button { width: 100%; }
  .hero-strip { grid-template-columns: 1fr; }
  .hero-strip span { font-size: 13px; line-height: 1.25; min-height: 38px; padding: 10px 20px; }
  .section { padding: 62px 18px; }
  .section-heading { margin-bottom: 28px; }
  .section-copy p:not(.eyebrow), .section-heading + p { font-size: 16px; }
  .stats, .service-grid, .gallery, .booking-form, .choice-grid, .choice-grid.compact, .form-grid { grid-template-columns: 1fr; }
  .stats { gap: 12px; }
  .stat-card { padding: 18px; }
  .service-card { min-height: auto; padding: 22px; }
  .icon { height: 42px; margin-bottom: 18px; width: 42px; }
  .compare-frame { aspect-ratio: 16 / 11; }
  .compare-card h3 { padding: 18px 18px 0; }
  .compare-card p { padding: 0 18px 20px; }
  .booking { gap: 28px; }
  .calendar-booking { padding: 18px; }
  .booking-form { padding: 18px; }
  .wizard-progress { grid-template-columns: repeat(2, 1fr); }
  .choice-card { min-height: auto; padding: 16px; }
  .addon-grid { grid-template-columns: 1fr; }
  .day-grid { grid-template-columns: repeat(2, 1fr); }
  .day-button.is-extra-day:not(.is-visible) { display: none; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .button { min-height: 50px; width: 100%; }
  input, select, textarea { min-height: 50px; }
  .map-placeholder { min-height: 260px; padding: 24px; }
  .map-placeholder span { font-size: 24px; }
  .site-footer { gap: 22px; padding: 42px 20px; }
  .cookie-banner { grid-template-columns: 1fr; }
  .cookie-actions { display: grid; grid-template-columns: 1fr; }
  .cookie-actions .button { flex: 1 1 auto; }
}

@media (max-width: 430px) {
  body { line-height: 1.55; }
  .site-header { padding: 10px 14px; }
  .brand-mark { height: 34px; width: 34px; }
  .brand strong { font-size: 14px; }
  .nav-toggle { height: 40px; width: 40px; }
  .site-nav { top: 56px; }
  .hero { min-height: 100svh; }
  .hero picture img { object-position: 66% center; }
  .hero-content { padding: 96px 16px 178px; }
  h1 { font-size: clamp(32px, 10.5vw, 40px); line-height: 1.03; }
  h2 { font-size: clamp(26px, 8.4vw, 34px); line-height: 1.12; }
  .hero-content p:not(.eyebrow) { font-size: 16px; }
  .hero-strip span {
    font-size: 12px;
    min-height: 34px;
    padding: 8px 16px;
  }
  .section { padding: 54px 16px; }
  .intro, .split, .booking { gap: 26px; }
  .stats { grid-template-columns: 1fr; }
  .stat-card {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  .stat-card strong { font-size: 28px; }
  .service-grid { gap: 14px; }
  .service-card { padding: 20px; }
  .service-card p { margin-bottom: 14px; }
  .reason-list div { padding: 18px; }
  .gallery { gap: 16px; }
  .compare-frame { aspect-ratio: 1 / .86; }
  .compare-label {
    font-size: 10px;
    padding: 6px 7px;
    top: 10px;
  }
  .compare-label-before { left: 10px; }
  .compare-label-after { right: 10px; }
  .compare-handle::after {
    font-size: 14px;
    height: 38px;
    width: 38px;
  }
  .booking-form { gap: 13px; padding: 16px; }
  .wizard-progress span { font-size: 11px; padding: 8px 6px; }
  .wizard-step h3 { font-size: 24px; }
  .choice-card span { font-size: 18px; }
  .wizard-actions { grid-template-columns: 1fr; }
  .slot-picker, .day-picker { padding: 14px; }
  .slot-picker-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .slot-picker-head span { text-align: left; }
  .day-grid { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: 1fr; }
  .calendar-booking { margin-top: 22px; padding: 16px; }
  .calendar-booking strong { font-size: 18px; }
  label { font-size: 12px; }
  .full { grid-column: auto; }
  .map-placeholder { min-height: 230px; }
  .site-footer { padding: 38px 16px; }
  .cookie-banner {
    border-radius: 0;
    bottom: 0;
    left: 0;
    max-height: 82svh;
    overflow: auto;
    padding: 16px;
    right: 0;
  }
  .cookie-banner h2 { font-size: 18px; }
  .cookie-banner p { font-size: 14px; }
  .service-card::after,
  .hero-strip span::after,
  .booking-form::before,
  .calendar-booking::before,
  .hero::after {
    animation-duration: 11000ms;
  }
}

@media (max-width: 360px) {
  .brand small { display: none; }
  h1 { font-size: 30px; }
  h2 { font-size: 25px; }
  .hero-content { padding-top: 90px; }
  .button { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}