/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOT TUB MOVERS — UNIQUE SPA-MOVER BRAND + LAYOUT POLISH
   Warm outdoor spa lifestyle: dusk indigo + pool aqua + copper soak
   NOT Syracuse mold skin — unique spacing, rhythm, warmth beyond tokens
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;700&display=swap");

:root {
  /* Unique spa-mover palette: dusk evening + pool water + copper glow */
  --htm-ink: #0b1c2c;
  --htm-dusk: #14324a;
  --htm-pool: #1aa6b8;
  --htm-pool-deep: #0e7c8a;
  --htm-copper: #d4893a;
  --htm-copper-hot: #e8a04a;
  --htm-sand: #f4efe6;
  --htm-sand-2: #e7dfd2;
  --htm-foam: #f7fbfc;
  --htm-line: #c9d5de;
  --htm-muted: #5b6b78;
  --htm-radius: 18px;
  --htm-shadow: 0 14px 40px rgba(11, 28, 44, 0.16);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE: Warm sand background, NOT clinical white
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body {
  background: var(--htm-sand) !important;
  color: var(--htm-ink) !important;
}

h1, h2, .display, .hero-copy h1 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  text-transform: none !important; /* No all-caps: warmer editorial voice */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION SPACING: More generous breathing room than Syracuse
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sec { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.sec-sm { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.sec-lg { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; }

@media (max-width: 768px) {
  .sec { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .sec-sm { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .sec-lg { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OFFER BAR: Warm gradient + generous padding
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.offerbar {
  background: linear-gradient(100deg, var(--htm-pool-deep) 0%, var(--htm-dusk) 55%, #0b1c2c 100%) !important;
  letter-spacing: 0.01em;
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
}

.offerbar strong {
  color: var(--htm-copper-hot) !important; /* Warm copper accent */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS: Pill shapes with warm hover
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn-quote, .btn.btn-quote, a.btn-quote {
  background: var(--htm-copper) !important;
  border-color: var(--htm-copper) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(212, 137, 58, 0.35);
  transition: all 0.25s ease !important;
}

.btn-quote:hover, .btn.btn-quote:hover {
  box-shadow: 0 12px 28px rgba(212, 137, 58, 0.42) !important;
  transform: translateY(-2px) !important;
}

.btn-call, a.btn-call, a.btn.ghost.btn-call {
  border-radius: 999px !important;
  border-color: var(--htm-pool) !important;
  color: var(--htm-pool-deep) !important;
  transition: all 0.25s ease !important;
}

.btn, a.btn {
  border-radius: 12px !important; /* Softer than Syracuse's sharp corners */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO: Evening spa gradient, NOT basement emergency
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hero[data-band="dark"], .sec-dark, section.sec-dark {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(26,166,184,.28), transparent 55%),
    linear-gradient(155deg, #10263a 0%, var(--htm-ink) 48%, #071621 100%) !important;
}

.hero { min-height: 540px !important; } /* More generous than Syracuse's 500px */

@media (max-width: 768px) {
  .hero { min-height: 480px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PILLS: Full rounded organic shapes
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pill, .tag, .badge {
  background: rgba(26,166,184,.14) !important;
  color: var(--htm-pool-deep) !important;
  border: 1px solid rgba(26,166,184,.26) !important;
  border-radius: 999px !important;
  padding: 0.625rem 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS: Warm white bg + generous padding + soft hover
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.card, .fact, .panel {
  border-radius: var(--htm-radius) !important;
  box-shadow: var(--htm-shadow) !important;
  border-color: var(--htm-line) !important;
  background: #fffefb !important;
  padding: 2.25rem !important; /* More spacious than Syracuse */
  transition: all 0.25s ease !important;
}

.card:hover, .fact:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 50px rgba(11, 28, 44, 0.20) !important;
}

.card::before { background: var(--htm-copper) !important; }

@media (max-width: 768px) {
  .card, .fact, .coupon, .panel {
    padding: 1.75rem !important;
  }
}

/* Card grids: more breathing room */
.cards, .grid-3, .grid-2 {
  gap: 2.5rem !important; /* Syracuse uses 1.5-2rem */
}

@media (max-width: 768px) {
  .cards, .grid-3, .grid-2 {
    gap: 1.75rem !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ: Softer disclosure with generous padding
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.faq-item, .disclosure {
  border-radius: 16px !important; /* Softer than Syracuse's 10px */
  margin-bottom: 1.5rem !important;
  transition: all 0.25s ease !important;
}

.faq-item:hover {
  box-shadow: 0 6px 20px rgba(11, 28, 44, 0.10) !important;
}

.faq-q, .disclosure-q {
  padding: 1.75rem 2.25rem !important; /* More generous */
}

.faq-a, .disclosure-a {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
  padding-bottom: 1.75rem !important;
  line-height: 1.7 !important; /* More relaxed reading */
}

@media (max-width: 768px) {
  .faq-q, .disclosure-q {
    padding: 1.5rem 1.75rem !important;
  }
  .faq-a, .disclosure-a {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS: Warm welcoming inputs
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.input, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select {
  border-radius: 12px !important; /* Softer than Syracuse's 8px */
}

.form-panel, .quiz-panel {
  border-radius: 20px !important;
  padding: 2.5rem !important;
}

@media (max-width: 768px) {
  .form-panel, .quiz-panel {
    padding: 2rem 1.75rem !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CALLBAR: Warm sand backdrop
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.callbar {
  backdrop-filter: blur(10px);
  background: rgba(244, 239, 230, 0.92) !important;
  border-top: 1px solid var(--htm-line) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UTILBAR & FOOTER: Deep indigo with pool accents
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.utilbar {
  background: var(--htm-dusk) !important;
  color: #e8f7f9 !important;
}

footer.site {
  background: var(--htm-ink) !important;
  padding-top: 4rem !important; /* More generous than Syracuse */
  padding-bottom: 2.5rem !important;
}

.f-col { margin-bottom: 2.5rem !important; }

.f-links a {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  transition: all 0.2s ease !important;
}

.f-links a:hover {
  color: var(--htm-pool) !important;
  padding-left: 0.5rem !important; /* Warm interactive shift */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MEDIA FRAMES: Softer lifestyle imagery
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.fact img, .fact-img, .media-frame img {
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(11, 28, 44, 0.12) !important;
}

.media-frame {
  border-radius: 20px !important;
  overflow: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AREA/CITY NAVIGATION: Warm inviting cards
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.city-grid, .service-grid, .area-grid {
  gap: 2rem !important; /* More breathing room */
}

.city-card, .service-card, .area-card {
  border-radius: 18px !important;
  padding: 2rem !important;
  transition: all 0.25s ease !important;
  background: #fffefb !important;
  border: 1px solid var(--htm-line) !important;
}

.city-card:hover, .service-card:hover, .area-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(11, 28, 44, 0.16) !important;
  border-color: var(--htm-pool) !important;
}

@media (max-width: 768px) {
  .city-grid, .service-grid, .area-grid {
    gap: 1.5rem !important;
  }
  .city-card, .service-card, .area-card {
    padding: 1.75rem !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDUCED MOTION RESPECT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
  .card:hover, .city-card:hover, .service-card:hover, .area-card:hover,
  .btn-quote:hover, .btn.btn-quote:hover {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  a.btn-call, .btn-call { font-size: 14px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .callbar .btn-call { max-width: 46%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
  .callbar .btn-quote { max-width: 50%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NESTED PAGE POLISH — Unique spa-mover layout hierarchy
   City hubs, nested pages, local factors, navigation — distinctive rhythm
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ CITY HUB SERVICE CARDS: Elevated spa lifestyle presentation ━━━ */

/* Service cards on city hub pages: larger icons, generous spacing, clear hierarchy */
.grid .card .ico {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26,166,184,.08) 0%, rgba(26,166,184,.02) 100%);
  border-radius: 14px;
  padding: 12px;
  transition: all 0.3s ease !important;
}

.grid .card:hover .ico {
  background: linear-gradient(135deg, rgba(26,166,184,.16) 0%, rgba(26,166,184,.06) 100%);
  transform: scale(1.08);
}

.grid .card .ico svg {
  width: 34px !important;
  height: 34px !important;
  color: var(--htm-pool) !important;
}

/* Service card headings: unique spa-mover rhythm */
.grid .card h3 {
  font-size: 1.375rem !important; /* 22px - larger than standard */
  line-height: 1.32 !important;
  margin-bottom: 1rem !important;
  font-weight: 700 !important;
  color: var(--htm-ink) !important;
}

.grid .card p {
  font-size: 16px !important; /* Slightly larger body for readability */
  line-height: 1.68 !important;
  color: var(--htm-muted) !important;
  margin-bottom: 1.25rem !important;
}

/* "More" links with pool accent and arrow */
.grid .card .more,
.grid .card a.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700 !important;
  color: var(--htm-pool-deep) !important;
  text-decoration: none;
  font-size: 15px !important;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(201,213,222,0.4);
  transition: all 0.25s ease !important;
}

.grid .card .more:hover,
.grid .card a.more:hover {
  color: var(--htm-pool) !important;
  gap: 0.75rem;
  padding-left: 0.25rem;
}

.grid .card .more::after {
  content: "→";
  font-size: 18px;
  transition: transform 0.25s ease;
}

.grid .card .more:hover::after {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .grid .card .ico {
    width: 48px !important;
    height: 48px !important;
    padding: 10px;
  }
  .grid .card .ico svg {
    width: 30px !important;
    height: 30px !important;
  }
  .grid .card h3 {
    font-size: 1.25rem !important;
  }
}

/* ━━━ NESTED PAGE INTRO: Generous breathing room + local imagery ━━━ */

/* Nested pages get extra vertical space in hero for localization */
[data-geo="phoenix-wave"] .hero-grid.hero-single,
[data-geo="scottsdale-wave"] .hero-grid.hero-single,
[data-geo="mesa-wave"] .hero-grid.hero-single {
  min-height: 420px !important; /* Taller than standard single-column */
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

/* Eyebrow (city name) on nested pages: distinctive spa accent */
[data-geo] .hero .eyebrow {
  color: var(--htm-copper-hot) !important; /* Warm copper vs standard pool */
  font-size: 13.5px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 1rem !important;
  font-weight: 700 !important;
}

/* Lead paragraphs on nested pages: more relaxed measure */
.hero-grid.hero-single .lead {
  max-width: 62ch !important; /* More generous than standard 58ch */
  font-size: 19.5px !important;
  line-height: 1.64 !important;
}

@media (max-width: 768px) {
  [data-geo="phoenix-wave"] .hero-grid.hero-single,
  [data-geo="scottsdale-wave"] .hero-grid.hero-single,
  [data-geo="mesa-wave"] .hero-grid.hero-single {
    min-height: 380px !important;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .hero-grid.hero-single .lead {
    font-size: 18px !important;
  }
}

/* ━━━ LOCAL FACTORS SECTION: Distinctive spa-lifestyle frames ━━━ */

/* Fact layout gets spa-mover warmth: softer shadows, generous padding */
.fact-layout {
  gap: 3rem !important; /* More breathing room than standard 24px */
  margin-top: 2rem !important;
}

.fact-media .photo-frame {
  position: relative;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(11, 28, 44, 0.14) !important;
  transition: all 0.35s ease !important;
}

.fact-media .photo-frame:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 50px rgba(11, 28, 44, 0.18) !important;
}

.fact-media .photo-frame picture,
.fact-media .photo-frame img {
  display: block;
  width: 100%;
  border-radius: 0 !important; /* Override: radius is on frame, not image */
}

/* Fact boxes: warm card style with generous padding */
.facts-grid {
  display: grid;
  gap: 2rem !important;
}

.factbox {
  background: #fffefb !important;
  border: 1px solid rgba(201,213,222,0.5) !important;
  border-left: 4px solid var(--htm-pool) !important;
  border-radius: 14px !important;
  padding: 1.875rem 2rem !important;
  line-height: 1.7 !important;
  transition: all 0.25s ease !important;
}

.factbox:hover {
  border-left-color: var(--htm-copper) !important;
  box-shadow: 0 6px 20px rgba(11, 28, 44, 0.08) !important;
  transform: translateX(2px);
}

.factbox p {
  margin-bottom: 1.125rem !important;
  font-size: 16px !important;
  color: var(--htm-ink) !important;
}

.factbox .src {
  font-size: 13.5px !important;
  color: var(--htm-muted) !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(201,213,222,0.35);
  line-height: 1.5 !important;
}

.factbox .src a {
  color: var(--htm-pool-deep) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(14,124,138,0.3);
  transition: all 0.2s ease;
}

.factbox .src a:hover {
  color: var(--htm-pool) !important;
  border-bottom-color: var(--htm-pool);
}

@media (max-width: 900px) {
  .fact-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .facts-grid {
    gap: 1.5rem !important;
  }
  .factbox {
    padding: 1.5rem 1.75rem !important;
  }
}

/* ━━━ SPLIT LAYOUT: City context sections with image pairs ━━━ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 3.5rem !important;
  align-items: center;
  margin-top: 2rem !important;
}

.split-copy {
  line-height: 1.72 !important;
}

.split-copy p {
  font-size: 17px !important;
  margin-bottom: 1.5rem !important;
}

.split-media .photo-frame {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(11, 28, 44, 0.12) !important;
  transition: all 0.3s ease !important;
}

.split-media .photo-frame:hover {
  transform: scale(1.02);
  box-shadow: 0 14px 44px rgba(11, 28, 44, 0.16) !important;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ━━━ STEP LISTS: Ordered local guidance with spa polish ━━━ */

ol.steps {
  margin-top: 2rem !important;
  gap: 1.75rem !important;
}

ol.steps li {
  background: #fffefb !important;
  border: 1px solid rgba(201,213,222,0.4) !important;
  border-radius: 16px !important;
  padding: 1.875rem 2rem !important;
  transition: all 0.25s ease !important;
}

ol.steps li:hover {
  border-color: var(--htm-pool) !important;
  box-shadow: 0 8px 24px rgba(11, 28, 44, 0.08) !important;
  transform: translateX(3px);
}

ol.steps li h3 {
  font-size: 1.25rem !important;
  margin-bottom: 0.875rem !important;
  color: var(--htm-ink) !important;
}

ol.steps li p {
  font-size: 16px !important;
  line-height: 1.68 !important;
  color: var(--htm-muted) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  ol.steps {
    gap: 1.25rem !important;
  }
  ol.steps li {
    padding: 1.5rem 1.75rem !important;
  }
}

/* ━━━ READMORE SIDEBAR: Related guides with spa accent ━━━ */

aside.readmore {
  background: rgba(26,166,184,.06) !important;
  border: 1px solid rgba(26,166,184,.18) !important;
  border-left: 4px solid var(--htm-pool) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin-top: 2.5rem !important;
}

aside.readmore .rg-intro {
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: var(--htm-pool-deep) !important;
  margin-bottom: 1.125rem !important;
}

aside.readmore ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

aside.readmore ul li {
  margin-bottom: 0.875rem !important;
}

aside.readmore ul li:last-child {
  margin-bottom: 0;
}

aside.readmore a {
  color: var(--htm-ink) !important;
  text-decoration: none;
  font-weight: 600 !important;
  font-size: 15.5px !important;
  line-height: 1.48 !important;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

aside.readmore a:hover {
  color: var(--htm-pool-deep) !important;
  border-bottom-color: var(--htm-pool-deep);
  padding-left: 0.375rem;
}

@media (max-width: 768px) {
  aside.readmore {
    padding: 1.75rem !important;
  }
}

/* ━━━ GALLERY: Multiple contextual images in grid ━━━ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem !important;
  margin-top: 2rem !important;
}

.gallery .photo-frame {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(11, 28, 44, 0.12) !important;
  transition: all 0.3s ease !important;
}

.gallery .photo-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 42px rgba(11, 28, 44, 0.16) !important;
}

@media (max-width: 640px) {
  .gallery {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ━━━ BREADCRUMB NAVIGATION: Spa-lifestyle trail ━━━ */

.crumbs {
  background: rgba(244,239,230,0.5) !important;
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(201,213,222,0.6) !important;
}

.crumbs a {
  color: var(--htm-muted) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.crumbs a:hover {
  color: var(--htm-pool-deep) !important;
}

.crumbs [aria-current] {
  color: var(--htm-ink) !important;
  font-weight: 700 !important;
}

/* ━━━ SECTION HEAD: Pills + headlines + leads on nested pages ━━━ */

.head {
  max-width: 840px; /* Slightly wider measure for nested page context */
  margin-bottom: 2.5rem !important;
}

.head .pill {
  margin-bottom: 1.125rem !important;
}

.head h2 {
  margin-bottom: 1rem !important;
  line-height: 1.08 !important;
}

.head .lead {
  font-size: 19px !important;
  line-height: 1.66 !important;
  color: var(--htm-muted) !important;
  max-width: 66ch;
  margin-top: 0.875rem !important;
}

@media (max-width: 768px) {
  .head {
    margin-bottom: 2rem !important;
  }
  .head .lead {
    font-size: 17.5px !important;
  }
}

/* ━━━ STATS BAR: Contextual numbers with spa warmth ━━━ */

.stats {
  background: rgba(244,239,230,0.75) !important;
  border-bottom-color: rgba(201,213,222,0.5) !important;
}

.stat b {
  color: var(--htm-pool-deep) !important; /* Pool accent vs generic */
}

/* ━━━ FAQ ON NESTED PAGES: Dark band with generous disclosure ━━━ */

.faq details {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  transition: all 0.25s ease !important;
}

.faq details:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(94,215,224,0.3) !important;
}

.faq details summary {
  padding: 1.75rem 2.25rem !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.faq details[open] summary {
  color: var(--htm-copper-hot) !important;
}

.faq details p {
  padding: 0 2.25rem 1.75rem 2.25rem !important;
  font-size: 16.5px !important;
  line-height: 1.72 !important;
  color: #C9D3DF !important;
}

@media (max-width: 768px) {
  .faq details summary {
    padding: 1.5rem 1.75rem !important;
    font-size: 17px !important;
  }
  .faq details p {
    padding: 0 1.75rem 1.5rem 1.75rem !important;
    font-size: 16px !important;
  }
}

/* ━━━ FOOTER METRO TAG: Context on nested pages ━━━ */

.lk-s {
  color: var(--htm-pool) !important; /* Pool accent for metro tagline */
}

/* ━━━ MOBILE REFINEMENTS ━━━ */

@media (max-width: 640px) {
  .fact-layout {
    gap: 2rem !important;
  }
  .factbox {
    padding: 1.5rem !important;
  }
  .split {
    gap: 1.75rem !important;
  }
  ol.steps li {
    padding: 1.375rem 1.5rem !important;
  }
  .gallery {
    gap: 1.25rem !important;
  }
}

/* ━━━ PRINT STYLES: Clean local SEO content ━━━ */

@media print {
  .fact-layout, .split, .factbox, .photo-frame {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  .grid .card, ol.steps li {
    page-break-inside: avoid;
  }
}