/* =============================================================
   Anchor Point Sitting Services
   Stylesheet v0.1 — Refined maritime traditional
   ============================================================= */

/* -- Reset & base ----------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* -- Brand tokens ----------------------------------------------- */

:root {
  /* ---------------------------------------------------------------------
     Anchor Point Sitting Services — Brand Design Sheet v1.0
     Light coastal boutique: blush pink + sage on cream. Navy is reserved
     (logo, headlines, nav, footer) and used sparingly. The key role colors
     are overridable per client via env (see the injected vars in base.html).
     Token NAMES are kept for compatibility with the existing stylesheet;
     their VALUES now carry the new palette (brass-* = the blush-pink accent).
     --------------------------------------------------------------------- */

  /* Brand dark — a deep berry "dark pink" (replaces navy). Token names kept so
     the stylesheet + env injection keep working; values now carry the plum. */
  --navy-900: #371A2B;
  --navy-800: #4A2339;
  --navy-700: #5E2A46;
  --navy-500: #8A5470;
  --navy-300: #BD96A9;

  /* Cream White — page + section backgrounds (never stark white) */
  --cream-50:  #FAF8F6;
  --cream-100: #F4EEEA;
  --cream-200: #EBE2DC;
  --cream-300: #DCD0C8;

  /* Blush Pink — primary accent: buttons, highlights, icons */
  --brass-300: #F2D2DA;
  --brass-500: #E8B8C2;
  --brass-600: #D98FA0;
  --brass-700: #C26A7E;

  /* Sage Green — accent blocks, testimonials, trust sections */
  --sage:      #AFC4B3;
  --sage-100:  #E7EEE8;
  --sage-600:  #6E8C77;

  /* Dusty Blue — used sparingly: links, hover, secondary buttons */
  --dusty-blue:     #AFCFE8;
  --dusty-blue-600: #5E92C0;

  --ink:       #20283A;
  --ink-soft:  #3C4658;
  --muted:     #6B7280;
  --rule:      #E8DED8;
  --rule-dark: #CFC2BA;
  --white:     #FFFFFF;

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-eyebrow: "Inter", sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Soft, light shadows — coastal boutique, never harsh */
  --shadow-sm: 0 4px 16px -10px rgba(24, 59, 107, 0.18);
  --shadow-md: 0 16px 40px -24px rgba(24, 59, 107, 0.22);
  --shadow-lg: 0 30px 70px -34px rgba(24, 59, 107, 0.28);

  /* Type scale — one consistent, responsive, mobile-first ramp (clamp). */
  --fs-h1:     clamp(2.25rem, 7vw, 4rem);
  --fs-h2:     clamp(1.75rem, 4.5vw, 2.625rem);
  --fs-h3:     clamp(1.25rem, 2.4vw, 1.5rem);
  --fs-h4:     clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-body:   clamp(1rem, 1.4vw, 1.0625rem);
  --fs-lead:   clamp(1.0625rem, 1.9vw, 1.25rem);
  --fs-eyebrow: 0.75rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* -- Document defaults ----------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--cream-50);
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}

h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; font-variation-settings: "opsz" 36; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; font-variation-settings: "opsz" 36; }

p { font-size: var(--fs-body); }
p.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); }

/* -- Utility ---------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }

.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-600);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass-500);
}

.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}
.rule-brass {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brass-500), transparent);
  margin: 0 auto;
  max-width: 200px;
}
.rule-thin-center {
  width: 80px;
  height: 1px;
  background: var(--brass-500);
  margin: 0 auto;
}

/* Sections */

section { padding: var(--s-24) 0; }
.section-cream { background: var(--cream-100); }
.section-white { background: var(--white); }
.section-navy { background: var(--navy-900); color: var(--cream-100); }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--cream-50); }

/* Section header pattern */
.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--s-16); }
.section-header .eyebrow { margin-bottom: var(--s-5); }
.section-header h2 { margin-bottom: var(--s-5); }
.section-header p { color: var(--muted); }

/* -- Header / Navigation ---------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 236, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-logo img { height: 56px; width: auto; }
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-logo-text .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy-900);
  letter-spacing: 0.01em;
  font-variation-settings: "opsz" 24;
}
.nav-logo-text .sub {
  font-family: var(--font-eyebrow);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-600);
  margin-top: 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.nav-links a {
  font-size: 0.9375rem;
  color: var(--navy-800);
  font-weight: 500;
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--brass-600); }
.nav-links a.active { color: var(--brass-700); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brass-500);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--navy-900);
  color: var(--cream-50);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-cta:hover { background: var(--brass-600); }

.nav-mobile-toggle { display: none; }

/* -- Buttons ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brass-500);
  color: var(--navy-900);
  box-shadow: 0 10px 24px -16px rgba(217, 143, 160, 0.55);
}
.btn-primary:hover {
  background: var(--brass-600);
  color: var(--navy-900);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -14px rgba(217, 143, 160, 0.6);
}
.btn-secondary {
  background: transparent;
  color: var(--navy-900);
  border: 1px solid var(--navy-700);
}
.btn-secondary:hover {
  background: var(--navy-900);
  color: var(--cream-50);
}
.btn-light {
  background: var(--cream-50);
  color: var(--navy-900);
  border: 1px solid var(--rule);
}
.btn-light:hover { background: var(--white); border-color: var(--brass-500); }

.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* -- Hero ------------------------------------------------------- */

.hero {
  position: relative;
  padding: var(--s-32) 0 var(--s-24);
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(176, 139, 79, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(27, 45, 92, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-16);
  align-items: center;
}

.hero-content { max-width: 560px; }
.hero-content .eyebrow { margin-bottom: var(--s-6); }
.hero-content h1 { margin-bottom: var(--s-6); }
.hero-content .lead { margin-bottom: var(--s-8); color: var(--ink-soft); max-width: 480px; }

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}

.hero-meta {
  display: flex;
  gap: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-meta-item .label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brass-600);
}
.hero-meta-item .value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy-900);
  font-variation-settings: "opsz" 36;
}

/* Hero visual — the "plaque" treatment */
.hero-visual {
  position: relative;
  aspect-ratio: 5/6;
  background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(14, 26, 58, 0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(210, 176, 116, 0.25);
  border-radius: 6px;
  pointer-events: none;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(210, 176, 116, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  pointer-events: none;
}
.hero-visual-logo {
  position: relative;
  z-index: 2;
  width: 78%;
  filter: brightness(0) invert(1) opacity(0.92);
}
.hero-visual-stamp {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-300);
  z-index: 2;
  white-space: nowrap;
}

/* -- Services strip --------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.service-card {
  position: relative;
  padding: var(--s-10);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--brass-500);
  box-shadow: 0 24px 50px -28px rgba(14, 26, 58, 0.2);
}
.service-card .icon {
  width: 44px;
  height: 44px;
  color: var(--brass-600);
  margin-bottom: var(--s-6);
}
.service-card h3 { margin-bottom: var(--s-3); }
.service-card p { color: var(--muted); font-size: 0.975rem; margin-bottom: var(--s-6); }
.service-card .price {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--navy-900);
  font-weight: 500;
  margin-bottom: var(--s-5);
  display: block;
  font-variation-settings: "opsz" 36;
}
.service-card .price .from {
  font-family: var(--font-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-600);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.service-card .price .quote-only {
  font-family: var(--font-eyebrow);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 500;
}
.service-card .link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.service-card:hover .link { color: var(--brass-600); border-color: var(--brass-500); }

/* Booking step 1: highlight a card whose checkbox is selected (multi-select). */
.service-card:has(input:checked) {
  border-color: var(--brass-500);
  box-shadow: 0 0 0 2px var(--brass-500);
}
.service-card:has(input:checked) .link {
  color: var(--brass-600);
  border-color: var(--brass-500);
}
/* "Select" -> "Selected" (the arrow stays after the word). */
.service-card:has(input:checked) .link-text::after {
  content: "ed";
}

/* -- Why-us block ----------------------------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}
.value-item {
  text-align: left;
}
.value-item .num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--brass-500);
  font-variation-settings: "opsz" 144;
  display: block;
  margin-bottom: var(--s-3);
  line-height: 1;
}
.value-item h4 { margin-bottom: var(--s-2); color: var(--navy-900); }
.value-item p { color: var(--muted); font-size: 0.95rem; }

/* -- Service area band ------------------------------------------ */

.area-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
}
.area-band .content .eyebrow { margin-bottom: var(--s-5); }
.area-band .content h2 { margin-bottom: var(--s-5); }
.area-band .content p { margin-bottom: var(--s-6); color: var(--muted); }
.area-towns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.area-towns li {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--navy-800);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-variation-settings: "opsz" 36;
}
.area-towns li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--brass-500);
  border-radius: 50%;
  flex-shrink: 0;
}

.area-map {
  aspect-ratio: 4/3;
  background: var(--cream-100);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

/* -- Testimonial / Pull quote ----------------------------------- */

.testimonial {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cream-50);
  margin: 0 0 var(--s-8);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.005em;
}
.testimonial blockquote::before { content: "\201C"; color: var(--brass-300); margin-right: 0.1em; }
.testimonial blockquote::after { content: "\201D"; color: var(--brass-300); margin-left: 0.05em; }
.testimonial cite {
  font-style: normal;
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brass-300);
  font-weight: 600;
}

/* -- CTA band --------------------------------------------------- */

.cta-band {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--cream-50);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 0%, rgba(210, 176, 116, 0.10) 0%, transparent 50%);
  pointer-events: none;
}
.cta-band .content { position: relative; max-width: 600px; margin: 0 auto; }
.cta-band h2 { color: var(--cream-50); margin-bottom: var(--s-5); }
.cta-band p { color: var(--cream-200); margin-bottom: var(--s-8); }
.cta-band-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* -- Footer ----------------------------------------------------- */

.site-footer {
  /* Deep berry-plum: a rich "dark pink" that complements the blush brand and
     reads a touch purple. Cream text + blush accents still pop on it. */
  background: #5E2A46;
  color: var(--cream-200);
  padding: var(--s-20) 0 var(--s-8);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brass-500), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-10);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--s-8);
}
.footer-brand { max-width: 320px; }
.footer-brand .logo-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream-50);
  font-weight: 500;
  margin-bottom: var(--s-2);
  font-variation-settings: "opsz" 144;
}
.footer-brand .sub {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-300);
  margin-bottom: var(--s-5);
}
.footer-brand p { font-size: 0.9rem; color: var(--cream-300); line-height: 1.55; }

.footer-col h5 {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-300);
  margin-bottom: var(--s-5);
}
.footer-col ul li { margin-bottom: var(--s-3); }
.footer-col ul a {
  font-size: 0.9375rem;
  color: var(--cream-200);
  transition: color 0.2s var(--ease);
}
.footer-col ul a:hover { color: var(--brass-300); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--cream-300);
  flex-wrap: wrap;
  gap: var(--s-4);
}
.footer-bottom .legal-links {
  display: flex;
  gap: var(--s-6);
}
.footer-bottom .legal-links a:hover { color: var(--brass-300); }

/* -- Page header (inner pages) ---------------------------------- */

.page-header {
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  padding: var(--s-20) 0 var(--s-16);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.page-header .eyebrow { margin-bottom: var(--s-5); justify-content: center; }
.page-header .eyebrow::before { display: none; }
.page-header .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass-500);
}
.page-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.page-header .eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--brass-500);
}
.page-header h1 { margin-bottom: var(--s-5); }
.page-header p { max-width: 640px; margin: 0 auto; color: var(--muted); font-size: 1.15rem; }

/* -- Service detail ---------------------------------------------- */

.service-detail {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-16);
  align-items: start;
}
.service-detail h2 { margin-bottom: var(--s-5); }
.service-detail .lead { color: var(--ink-soft); margin-bottom: var(--s-8); }
.service-detail p { margin-bottom: var(--s-5); }
.service-detail h3 { margin-top: var(--s-10); margin-bottom: var(--s-4); }
.service-detail ul.checklist { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.service-detail ul.checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-left: 0;
  font-size: 1.0625rem;
}
.service-detail ul.checklist li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
  background: var(--brass-500);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-10);
  position: sticky;
  top: 110px;
}
.pricing-card .eyebrow { margin-bottom: var(--s-5); }
.pricing-card h3 { margin-bottom: var(--s-5); }
.pricing-card .tier {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.pricing-card .tier:last-of-type { border-bottom: 0; }
.pricing-card .tier .label { font-size: 0.95rem; color: var(--ink-soft); }
.pricing-card .tier .price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy-900);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
}
.pricing-card .note {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}
.pricing-card .btn { width: 100%; margin-top: var(--s-6); }

/* -- FAQ -------------------------------------------------------- */

.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-6) 0;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy-900);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--brass-500);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--brass-600); }
.faq-item .answer {
  padding-top: var(--s-5);
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.faq-item .answer p + p { margin-top: var(--s-4); }

/* -- Contact form ----------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-16);
  align-items: start;
}
.contact-info h3 { margin-bottom: var(--s-5); }
.contact-info > p { margin-bottom: var(--s-8); color: var(--muted); }
.contact-detail {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
}
.contact-detail:last-of-type { border-bottom: 1px solid var(--rule); }
.contact-detail .label {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-600);
  font-weight: 600;
  display: block;
  margin-bottom: var(--s-2);
}
.contact-detail .value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--navy-900);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-12);
}
.form-card h3 { margin-bottom: var(--s-6); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-5); }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 0;
  border-color: var(--brass-500);
  background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-card .btn { width: 100%; margin-top: var(--s-4); }

/* -- About page ------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
}
.about-image {
  aspect-ratio: 4/5;
  background: linear-gradient(155deg, var(--cream-200) 0%, var(--cream-300) 100%);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.about-image::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(176, 139, 79, 0.3);
  border-radius: 6px;
}

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
  max-width: 760px;
  margin: 0 auto;
}
.principle h4 { margin-bottom: var(--s-3); color: var(--navy-900); }
.principle p { color: var(--muted); font-size: 0.975rem; }
.principle .num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--brass-500);
  font-weight: 600;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: var(--s-3);
  font-variation-settings: "opsz" 36;
}

/* -- Animations ------------------------------------------------- */

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

.hero-content > * {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.18s; }
.hero-content > *:nth-child(3) { animation-delay: 0.30s; }
.hero-content > *:nth-child(4) { animation-delay: 0.42s; }
.hero-content > *:nth-child(5) { animation-delay: 0.54s; }

.hero-visual {
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.2s forwards;
}

/* -- Responsive ------------------------------------------------- */

@media (max-width: 960px) {
  section { padding: var(--s-16) 0; }
  .hero { padding: var(--s-16) 0; }
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-12); }
  .hero-visual { max-width: 360px; margin: 0 auto; aspect-ratio: 5/4; }
  .services-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .area-band { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-meta { flex-wrap: wrap; gap: var(--s-5); }
  .pricing-card { position: static; }
}

@media (max-width: 640px) {
  .nav { height: 72px; }
  .nav-logo img { height: 44px; }
  .nav-logo-text .name { font-size: 0.95rem; }
  .nav-logo-text .sub { font-size: 0.6rem; }
  .nav-links { display: none; }
  .nav-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--navy-900);
  }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .area-towns { grid-template-columns: 1fr; }
  .form-card { padding: var(--s-8); }
}

/* =============================================================
   ADDITIONS v0.2
   Hero photo, gallery strip, mobile drawer, mobile refinements
   ============================================================= */

/* -- No-scroll body utility (drawer open) ----------------------- */
body.no-scroll { overflow: hidden; }

/* -- Hero photo (replaces visual plaque) ------------------------ */

.hero-photo {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(14, 26, 58, 0.4),
              0 0 0 1px rgba(14, 26, 58, 0.06) inset;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.2s forwards;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo-caption {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: 0.6rem 1rem;
  background: rgba(14, 26, 58, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  color: var(--cream-50);
  font-family: var(--font-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-photo-caption .caption-mark {
  color: var(--brass-300);
}

/* -- Gallery strip ---------------------------------------------- */

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.gallery-item {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--cream-200);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-label {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--cream-50);
  font-family: var(--font-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 26, 58, 0.6) 0%, transparent 50%);
  pointer-events: none;
}

/* -- Service hero image (on detail pages) ----------------------- */

.service-hero-image {
  margin-top: var(--s-12);
  aspect-ratio: 21/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(14, 26, 58, 0.35);
}
.service-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- About page real photo (replaces placeholder block) -------- */

.about-image {
  background: none;
  overflow: hidden;
  padding: 0;
}
.about-image::before { display: none; }
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

/* -- Mobile navigation drawer ----------------------------------- */

.nav-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 26, 58, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 85vw);
  background: var(--cream-50);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 60px -20px rgba(14, 26, 58, 0.3);
}
.nav-drawer.is-open {
  transform: translateX(0);
}
.nav-drawer.is-open ~ .nav-drawer-scrim,
.nav-drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.no-scroll .nav-drawer-scrim {
  opacity: 1;
  pointer-events: auto;
}
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.nav-drawer-header .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy-900);
  font-variation-settings: "opsz" 24;
}
.nav-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  border-radius: var(--radius-sm);
}
.nav-drawer-close:active { background: var(--cream-200); }
.nav-drawer-links {
  flex: 1;
  padding: var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-drawer-links a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy-900);
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s var(--ease);
}
.nav-drawer-links a:active { color: var(--brass-600); }
.nav-drawer-links a:last-child { border-bottom: 0; }
.nav-drawer-links a .chev {
  color: var(--brass-500);
  opacity: 0.6;
}
.nav-drawer-footer {
  padding: var(--s-6);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.nav-drawer-footer .btn { width: 100%; justify-content: center; }
.nav-drawer-footer .phone {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy-900);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  padding-top: var(--s-3);
}
.nav-drawer-footer .phone-label {
  font-family: var(--font-eyebrow);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-600);
  font-weight: 600;
  text-align: center;
  display: block;
  margin-bottom: 4px;
}

/* -- Mobile refinements ----------------------------------------- */

@media (max-width: 960px) {
  .hero-photo { max-width: 480px; margin: 0 auto; aspect-ratio: 4/3; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* Show hamburger from 720px down (more visible breakpoint) */
  .nav-links { display: none; }
  .nav-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--navy-900);
    border-radius: var(--radius-sm);
  }
  .nav-mobile-toggle:active { background: var(--cream-200); }
  .nav-cta { display: none; }

  /* Tighter section spacing on mobile */
  section { padding: var(--s-12) 0; }
  .hero { padding: var(--s-12) 0 var(--s-10); }

  /* Hero: stack with photo first for visual impact */
  .hero-inner { gap: var(--s-8); }
  .hero-content { order: 2; max-width: 100%; }
  .hero-photo { order: 1; max-width: 100%; aspect-ratio: 4/3; }

  /* Mobile typography rhythm */
  h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  h2 { font-size: clamp(1.625rem, 6vw, 2rem); }
  p.lead { font-size: 1.0625rem; }

  /* Value grid: 1 column on mobile (was 2) */
  .value-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .value-item .num { font-size: 1.75rem; margin-bottom: var(--s-2); }

  /* CTAs stack full width on mobile */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero-ctas .btn { width: 100%; }
  .cta-band-buttons { flex-direction: column; align-items: stretch; }
  .cta-band-buttons .btn { width: 100%; }

  /* Meta strip wraps cleanly */
  .hero-meta { flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); }
  .hero-meta-item { flex-direction: row; align-items: center; gap: 0.75rem; }
  .hero-meta-item .label { margin: 0; }

  /* Section header tighter */
  .section-header { margin-bottom: var(--s-10); }

  /* Service cards mobile */
  .service-card { padding: var(--s-6); }
  .service-card .icon { width: 36px; height: 36px; margin-bottom: var(--s-4); }

  /* Footer compact */
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); padding-bottom: var(--s-8); margin-bottom: var(--s-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer { padding: var(--s-12) 0 var(--s-6); }

  /* Page header tighter */
  .page-header { padding: var(--s-10) 0 var(--s-8); }
  .page-header p { font-size: 1rem; }

  /* Service detail mobile */
  .service-hero-image { aspect-ratio: 16/9; margin-top: var(--s-8); }

  /* Form tweaks */
  .form-card { padding: var(--s-6); }
  .form-card h3 { font-size: 1.25rem; }
  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 0.9rem 0.95rem;
  }

  /* Brand statement / testimonial */
  .testimonial blockquote { font-size: 1.375rem; }

  /* Gallery 1-column on small phones */
  .gallery-strip { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
}

@media (max-width: 420px) {
  .container { padding: 0 1.125rem; }
  .nav { height: 64px; }
  .nav-logo img { height: 38px; }
  .nav-logo-text .name { font-size: 0.9rem; }
  .nav-logo-text .sub { font-size: 0.55rem; letter-spacing: 0.18em; }
  h1 { font-size: 1.875rem; }
  .hero-meta-item .value { font-size: 0.95rem; }
}

/* -- Reduced motion preference --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   ADDITIONS v0.3
   Overflow audit, contact mobile fixes, defensive rules
   ============================================================= */

/* -- Global overflow safety net --------------------------------- */

/* `clip` prevents horizontal scroll without creating a new containing block
   (preserves position: sticky on the header). */
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Break any unbreakable word that would push the page wider */
* {
  overflow-wrap: break-word;
}

/* Long emails and URLs break at sensible points */
a[href^="mailto:"],
a[href^="tel:"],
.contact-detail .value {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* All form selects respect iOS no-zoom font-size on mobile */
.form-field select { font-size: 16px; }

/* Inline-styled service card with internal grid (Commercial card)
   collapses gracefully on mobile. */
@media (max-width: 720px) {
  article.service-card[style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: 1fr !important;
    padding: 1.75rem 1.5rem !important;
    gap: 1.25rem !important;
    text-align: left;
  }
  article.service-card[style*="grid-template-columns: auto 1fr auto"] .btn {
    width: 100%;
    justify-content: center;
  }
  article.service-card[style*="grid-template-columns: auto 1fr auto"] svg.icon {
    margin-bottom: 0 !important;
  }

  /* Quote-section grid: was a 2-col override; collapse to single column. */
  .services-grid[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Contact info aside: tighter, value text smaller, allow email to wrap. */
  .contact-detail { padding: 1rem 0; }
  .contact-detail .label { font-size: 0.65rem; letter-spacing: 0.18em; }
  .contact-detail .value {
    font-size: 1rem;
    line-height: 1.35;
    display: inline-block;
    word-break: break-word;
  }

  /* Form card: smaller internal padding so inputs have more room. */
  .form-card { padding: var(--s-5); }
  .form-card h3 { font-size: 1.2rem; margin-bottom: var(--s-5); }
  .form-field label { font-size: 0.65rem; letter-spacing: 0.16em; }

  /* Response-time callout box doesn't crowd the page edges. */
  .contact-info > div[style*="background: var(--cream-100)"] {
    padding: 1rem !important;
    margin-top: 1.5rem !important;
  }
  .contact-info > div[style*="background: var(--cream-100)"] p {
    font-size: 0.9rem !important;
  }

  /* Hero photo caption: smaller, wraps if needed. */
  .hero-photo-caption {
    bottom: var(--s-3);
    left: var(--s-3);
    right: var(--s-3);
    padding: 0.5rem 0.75rem;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  /* Hero h1 manual <br> can be too aggressive on phones; let it flow. */
  .hero-content h1 br { display: none; }

  /* Section headers don't get cramped by side gutters. */
  .section-header { padding: 0 0.25rem; }

  /* Gallery item labels smaller so the city name fits. */
  .gallery-item-label {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    bottom: var(--s-2);
    left: var(--s-2);
    right: var(--s-2);
  }

  /* FAQ summaries don't get too big on mobile. */
  .faq-item summary { font-size: 1.0625rem; }
  .faq-item summary::after { font-size: 1.5rem; }

  /* Service detail hero image: tighter aspect ratio for portrait phones. */
  .service-hero-image { aspect-ratio: 4/3; }

  /* Pricing card tiers can crowd on narrow screens. */
  .pricing-card { padding: var(--s-6); }
  .pricing-card .tier .label { font-size: 0.875rem; }
  .pricing-card .tier .price { font-size: 1.0625rem; }

  /* CTA band content tight. */
  .cta-band .content { padding: 0 0.5rem; }

  /* Page header eyebrow letterspacing too loose for narrow screens. */
  .page-header .eyebrow,
  .eyebrow { letter-spacing: 0.18em; }
}

@media (max-width: 420px) {
  /* Form card very tight on small phones. */
  .form-card { padding: 1.125rem 1rem; }
  .form-card h3 { font-size: 1.125rem; }

  /* Contact-detail values smaller. */
  .contact-detail .value { font-size: 0.95rem; }

  /* Hero photo caption: hide secondary span at the smallest sizes. */
  .hero-photo-caption { font-size: 0.55rem; padding: 0.4rem 0.6rem; }
  .hero-photo-caption .caption-mark { display: none; }

  /* Hero meta values smaller. */
  .hero-meta-item .value { font-size: 0.9rem; }
  .hero-meta-item .label { font-size: 0.6rem; letter-spacing: 0.14em; }

  /* Gallery labels hidden at the smallest sizes (image still tells the story). */
  .gallery-item-label { display: none; }
}

/* -- Logo: no white background, no need for solid plate. -------- */
.nav-logo img {
  background: transparent;
}

/* -- Thank-you page section ------------------------------------- */
.thank-you-section {
  padding: var(--s-24) 0;
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  text-align: center;
}

/* -- Contact info response-time callout ------------------------- */
.info-callout {
  margin-top: var(--s-8);
  padding: 1.25rem 1.25rem;
  background: var(--cream-100);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brass-500);
}
.info-callout p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.info-callout strong {
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 36;
}

@media (max-width: 720px) {
  .thank-you-section { padding: var(--s-16) 0; }
  .info-callout { padding: 0.9rem 1rem; margin-top: var(--s-6); }
  .info-callout p { font-size: 0.875rem; }
}

/* =============================================================
   ADDITIONS v0.4
   Real service area map images replacing placeholder boxes
   ============================================================= */

.area-map {
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px -28px rgba(14, 26, 58, 0.18);
}
.area-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 960px) {
  .area-map { max-width: 520px; margin: 0 auto; }
}


/* ============================================================
   Portal styles (Phase 3b)
   ============================================================ */

.portal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-8);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-12) var(--s-6);
}

@media (max-width: 880px) {
  .portal-layout {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-8) var(--s-4);
  }
}

.portal-nav {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-6) 0;
  height: fit-content;
  position: sticky;
  top: calc(var(--s-6) + 80px);
}

.portal-nav-header {
  padding: 0 var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-3);
}

.portal-nav-header .eyebrow {
  margin-bottom: var(--s-2);
}

.portal-nav-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

.portal-nav-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  word-break: break-word;
}

.portal-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-nav li {
  margin: 0;
}

.portal-nav a {
  display: block;
  padding: var(--s-3) var(--s-5);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}

.portal-nav a:hover {
  background: var(--cream-50);
  color: var(--navy-600);
}

.portal-nav a.active {
  background: var(--cream-50);
  color: var(--navy-600);
  border-left-color: var(--brass-500);
  font-weight: 600;
}

.portal-nav a.logout {
  color: var(--muted);
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* Mobile portal nav: a full-width, non-sticky horizontal tab bar. Placed AFTER
   the base .portal-nav rules so it actually wins the cascade. */
@media (max-width: 880px) {
  .portal-nav {
    position: static;
    top: auto;
    padding: 0;
    overflow: hidden;
  }
  .portal-nav-header {
    display: none;
  }
  .portal-nav ul {
    display: flex;
    overflow-x: auto;
    gap: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portal-nav ul::-webkit-scrollbar {
    display: none;
  }
  .portal-nav li {
    flex: 0 0 auto;
  }
  .portal-nav a {
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: var(--s-3) var(--s-4);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .portal-nav a.active {
    border-left: none;
    border-bottom-color: var(--brass-500);
  }
  .portal-nav a.logout {
    margin-top: 0;
    border-top: none;
  }
}

.portal-content {
  min-width: 0;
}

.portal-content h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  margin: 0 0 var(--s-2);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.portal-content .page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-600);
  margin-bottom: var(--s-3);
}

.portal-content .page-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--brass-500);
}

.portal-content .page-sub {
  color: var(--muted);
  margin: 0 0 var(--s-8);
  font-size: 1rem;
}

/* Stat cards on dashboard */
.portal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.portal-stat {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.portal-stat .label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-2);
}

.portal-stat .value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--navy-600);
  font-weight: 500;
}

.portal-stat .sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: var(--s-1);
}

/* List sections on the dashboard */
.portal-section {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
}

.portal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.portal-section-header h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.portal-section-header a {
  font-size: 0.875rem;
  color: var(--brass-600);
  font-weight: 600;
  text-decoration: none;
}

.portal-section-header a:hover {
  text-decoration: underline;
}

/* List rows */
.portal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.portal-list-item:last-child {
  border-bottom: none;
}

.portal-list-item .row-primary {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.portal-list-item .row-secondary {
  font-size: 0.875rem;
  color: var(--muted);
}

.portal-list-item .row-right {
  text-align: right;
}

.portal-list-item .row-amount {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy-600);
  font-weight: 500;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}

.status-scheduled, .status-in_progress {
  background: #e0eaf8;
  color: #1B2D5C;
}
.status-accepted {
  background: #fbe7c0;
  color: #6d5414;
}
.status-pending_review {
  background: #fff4d6;
  color: #6d5414;
}
.status-approved, .status-paid, .status-accepted, .status-sent {
  background: #dff2e1;
  color: #2d5e34;
}
.status-invoiced, .status-issued {
  background: #ecdfff;
  color: #4a2a82;
}
.status-rework_requested, .status-overdue, .status-failed {
  background: #ffe1d8;
  color: #8b3a1f;
}
.status-canceled, .status-declined, .status-voided, .status-expired, .status-draft {
  background: #ececec;
  color: #5a5a5a;
}

/* Job detail / quote detail layout */
.portal-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-6);
}

@media (max-width: 880px) {
  .portal-detail-grid {
    grid-template-columns: 1fr;
  }
}

.portal-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.portal-photo {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-50);
  border: 1px solid var(--rule);
}

.portal-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.portal-photo-caption {
  padding: 0.6rem 0.85rem;
  font-size: 0.825rem;
  color: var(--muted);
}

.portal-empty {
  text-align: center;
  padding: var(--s-8) var(--s-6);
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

.portal-empty h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 var(--s-2);
  font-weight: 500;
}

/* Account form layout */
.portal-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

@media (max-width: 880px) {
  .portal-account-grid {
    grid-template-columns: 1fr;
  }
}

/* Filter pills for jobs list */
.portal-filters {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.portal-filter {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
}

.portal-filter.active {
  background: var(--navy-600);
  color: var(--cream-100);
  border-color: var(--navy-600);
}

/* Mobile: the row of filter pills becomes a single full-width dropdown. */
.portal-filter-select {
  display: none;
}

@media (max-width: 880px) {
  .portal-filters {
    display: none;
  }
  .portal-filter-select {
    display: block;
    width: 100%;
    margin-bottom: var(--s-5);
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
  }
}

/* =============================================================
   ADDITIONS v0.5
   Targeted mobile horizontal-overflow fixes. Desktop unaffected:
   min-width:0 only matters when a track is too narrow to hold its
   content, which on desktop it never is.
   ============================================================= */

/* Scoped to <=960px so desktop (>960px) is byte-for-byte unchanged;
   horizontal overflow only ever occurs once layouts start stacking. */
@media (max-width: 960px) {
  /* Grid/flex children default to min-width:auto, so wide intrinsic
     content (nowrap buttons, inputs) blows out the track and pushes the
     page wider than the viewport. Let these items shrink. */
  .services-grid > *,
  .contact-grid > *,
  .about-grid > *,
  .area-band > *,
  .service-detail > *,
  .form-row > *,
  .footer-grid > * {
    min-width: 0;
  }

  /* Form controls never exceed their column. */
  .form-field input,
  .form-field select,
  .form-field textarea {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  /* Commercial/HOA card uses an inline `1fr auto` grid + large padding;
     the earlier override only matched `auto 1fr auto`, so it stayed wide
     and overflowed. Collapse it to one column with a full-width button. */
  article.service-card[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    padding: 1.75rem 1.5rem !important;
    gap: 1.25rem !important;
    text-align: left;
  }
  article.service-card[style*="grid-template-columns: 1fr auto"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   Mobile polish (≤480px) — additive, desktop unaffected.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Two-up form rows stack. */
  .form-row { grid-template-columns: 1fr; }
  .form-row > * { min-width: 0; }

  /* Service / booking card grids collapse to one column. */
  .services-grid { grid-template-columns: 1fr !important; }
  .services-grid > * { min-width: 0; }

  /* Portal list rows: keep the amount + status badge from crowding. */
  .portal-list-item { gap: var(--s-3, 0.75rem); }
  .portal-list-item .row-right { white-space: nowrap; }
  .status-badge { padding: 0.3rem 0.7rem; font-size: 0.72rem; }

  /* Comfortable tap targets for primary actions. */
  .btn { min-height: 44px; }

  /* A sticky pricing sidebar shouldn't pin on a phone. */
  .pricing-card { position: static; }

  /* Tighter card padding so forms aren't cramped by big margins. */
  .form-card { padding: 1.1rem 1rem; }

  /* Prevent any wide grid from forcing horizontal scroll. */
  .contact-grid > *, .form-row > * { min-width: 0; }

  /* Gallery labels are illegibly small on phones — let the photo speak. */
  .gallery-item-label { display: none; }
}

/* Guard against accidental horizontal scroll on phones. `clip` (not `hidden`)
   so it never turns an ancestor into a scroll container and breaks sticky. */
html, body { overflow-x: clip; }

/* =============================================================
   ADDITIONS v0.6 — Marketing home, mobile-first refinement
   Light coastal boutique: leans blush pink + sage on cream.
   Base styles target a ~375px phone (single column, generous
   padding, >=44px tap targets); min-width breakpoints enhance
   to tablet (640px) and desktop (1024px). This block is last in
   the cascade so it cleanly governs the marketing components
   without removing the shared portal / booking rules above.
   ============================================================= */

/* -- Consistent vertical rhythm (mobile-first) ------------------ */
.hero,
.section-white,
.section-cream,
.testimonials-band,
.cta-band { padding: var(--s-16) 0; }

@media (min-width: 640px) {
  .hero,
  .section-white,
  .section-cream,
  .testimonials-band,
  .cta-band { padding: var(--s-20) 0; }
}
@media (min-width: 1024px) {
  .section-white,
  .section-cream,
  .testimonials-band,
  .cta-band { padding: var(--s-24) 0; }
}

/* -- Section header rhythm -------------------------------------- */
.section-header { margin: 0 auto var(--s-10); padding: 0; }
.section-header .eyebrow { justify-content: center; }
@media (min-width: 1024px) {
  .section-header { margin-bottom: var(--s-12); }
}

.section-footer-cta { text-align: center; margin-top: var(--s-10); }
@media (min-width: 1024px) {
  .section-footer-cta { margin-top: var(--s-12); }
}

/* -- Eyebrow uses the shared scale ------------------------------ */
.eyebrow { font-size: var(--fs-eyebrow); }

/* =============================================================
   Hero — stacked + centered on mobile, side-by-side on desktop
   ============================================================= */
.hero {
  padding-top: var(--s-12);
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
}
.hero-inner {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-10);
  align-items: center;
  text-align: center;
}
.hero-content { max-width: 560px; }
.hero-content .eyebrow { margin-bottom: var(--s-5); justify-content: center; }
.hero-content h1 { margin-bottom: var(--s-5); }
.hero-content h1 br { display: none; }
.hero-content .lead { margin-bottom: var(--s-8); margin-left: auto; margin-right: auto; }

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
.hero-ctas .btn { width: 100%; min-height: 48px; }

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
  text-align: left;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Hero logo card — soft, light, never harsh */
.hero-logo {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 38%, var(--white) 0%, var(--cream-50) 62%, var(--brass-300) 100%);
  border: 1px solid var(--cream-200);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
  overflow: hidden;
}
.hero-logo img {
  width: 84%;
  height: auto;
  position: relative;
  z-index: 1;
}
.hero-logo-caption {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-4);
  right: var(--s-4);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  padding: 0.55rem 0.9rem;
  background: rgba(250, 248, 246, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
  font-family: var(--font-eyebrow);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-700);
  text-align: center;
}
.hero-logo-caption .caption-mark { color: var(--brass-700); }

@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; justify-content: center; }
  .hero-ctas .btn { width: auto; }
  .hero-meta { flex-direction: row; gap: var(--s-8); justify-content: center; }
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--s-24); padding-bottom: var(--s-24); }
  .hero-inner {
    flex-direction: row;
    text-align: left;
    gap: var(--s-16);
    align-items: center;
    justify-content: space-between;
  }
  .hero-content { flex: 1 1 0; max-width: 560px; }
  .hero-content .eyebrow,
  .hero-ctas,
  .hero-meta { justify-content: flex-start; }
  .hero-content .lead { margin-left: 0; margin-right: 0; }
  .hero-logo { flex: 0 0 auto; max-width: 440px; }
}

/* =============================================================
   Services — clean equal 3-up cards (1 col mobile, 3 desktop)
   ============================================================= */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-8);
  background: var(--white);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--brass-500);
  box-shadow: var(--shadow-md);
}
.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  background: var(--brass-300);
  font-size: 1.6rem;
  line-height: 1;
}
.service-card h3 { margin-bottom: var(--s-3); color: var(--navy-700); }
.service-card p { color: var(--muted); margin-bottom: var(--s-6); flex: 1 1 auto; }
.service-card .link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy-700);
  letter-spacing: 0.02em;
  transition: color 0.2s var(--ease);
}
.service-card .link svg { transition: transform 0.2s var(--ease); }
.service-card:hover .link { color: var(--brass-700); }
.service-card:hover .link svg { transform: translateX(3px); }

/* =============================================================
   "Why Families Choose Us" gallery — 2-up mobile, 4-up desktop
   ============================================================= */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 1024px) {
  .gallery-strip { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--shadow-sm);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 59, 107, 0.62) 0%, transparent 55%);
  pointer-events: none;
}
.gallery-item-label {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.5rem;
  color: var(--cream-50);
  font-family: var(--font-eyebrow);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 360px) {
  .gallery-item-label span + span { display: none; }
}

/* =============================================================
   Values grid — 1 col mobile, 3 desktop
   ============================================================= */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 640px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}
.value-item .num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--brass-600);
  display: block;
  margin-bottom: var(--s-3);
  line-height: 1;
}
.value-item h4 { margin-bottom: var(--s-2); color: var(--navy-700); }
.value-item p { color: var(--muted); }

/* =============================================================
   Testimonials — soft blush-pink band, white cards, lots of air
   ============================================================= */
.testimonials-band {
  background:
    linear-gradient(180deg, var(--brass-300) 0%, #F8E2E7 100%);
}
.testimonials-band .section-header p { color: var(--ink-soft); }
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 1024px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}
.testimonial-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy-800);
  font-variation-settings: "opsz" 36;
}
.testimonial-card blockquote::before { content: "\201C"; color: var(--brass-600); }
.testimonial-card blockquote::after { content: "\201D"; color: var(--brass-600); }
.testimonial-card figcaption {
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-700);
  margin-top: auto;
}

/* =============================================================
   Service area — Lansdowne only, framed map
   ============================================================= */
.area-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .area-band { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}
.area-band .content .eyebrow { margin-bottom: var(--s-5); justify-content: flex-start; }
.area-band .content h2 { margin-bottom: var(--s-5); }
.area-band .content p { margin-bottom: var(--s-6); color: var(--muted); }
.area-points {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.area-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--navy-800);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
}
.area-points li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--sage-600);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-size: contain; mask-repeat: no-repeat;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
}
.area-map {
  aspect-ratio: 1 / 1;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-lg);
  background: var(--cream-100);
}
.area-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================
   CTA / "Let's talk" band — soft sage green
   ============================================================= */
.cta-band {
  background: linear-gradient(165deg, var(--sage-100) 0%, var(--sage) 100%);
  color: var(--navy-800);
  text-align: center;
}
.cta-band::before { display: none; }
.cta-band .content { position: relative; max-width: 620px; margin: 0 auto; padding: 0; }
.cta-band .eyebrow {
  justify-content: center;
  color: var(--sage-600);
  margin-bottom: var(--s-5);
}
.cta-band .eyebrow::before { background: var(--sage-600); }
.cta-band h2 { color: var(--navy-700); margin-bottom: var(--s-4); }
.cta-band p { color: var(--ink-soft); margin-bottom: var(--s-8); }
.cta-band-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  justify-content: center;
}
.cta-band-buttons .btn { width: 100%; min-height: 48px; }
.cta-band-contact { margin-top: var(--s-6); color: var(--ink-soft); }
.cta-band-contact a { color: var(--dusty-blue-600); font-weight: 600; }
.cta-band-contact a:hover { color: var(--navy-700); }
@media (min-width: 640px) {
  .cta-band-buttons { flex-direction: row; }
  .cta-band-buttons .btn { width: auto; }
}

/* =============================================================
   ADDITIONS v0.7 — circular header logo, decluttered responsive
   nav, full-bleed photorealistic hero. Last in cascade: governs.
   ============================================================= */

html { scroll-behavior: smooth; }

/* -- Header: circular logo, tighter, hamburger up to 1024px ----- */
.nav { height: 76px; gap: var(--s-6); }
.nav-logo { gap: 0.6rem; min-width: 0; flex: 0 1 auto; }
.nav-logo img {
  height: 46px; width: 46px; border-radius: 10px;
  box-shadow: 0 1px 5px rgba(18, 43, 79, 0.18);
  flex: 0 0 auto;
}
.nav-logo-text { display: none; }              /* logo-only until there is room */
.nav-logo-text .name { font-size: 1.05rem; line-height: 1.05; white-space: nowrap; }

/* Mobile-first: nav links + cta hidden, hamburger shown */
.nav-links, .nav-cta { display: none; }
.nav-mobile-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--navy-900);
  background: none; border: 0; cursor: pointer;
}

@media (min-width: 1024px) {
  .nav { height: 80px; }
  .nav-links { display: flex; gap: var(--s-6); }
  .nav-links a { font-size: 0.9rem; white-space: nowrap; }
  .nav-cta { display: inline-flex; }
  .nav-mobile-toggle { display: none; }
}
@media (min-width: 1180px) {
  .nav-logo-text { display: flex; }
  .nav-links { gap: 1.75rem; }
}

/* -- Full-bleed photorealistic hero ---------------------------- */
.hero-full { padding: 0; }                      /* reset older .hero padding */
.hero-full::before { content: none; display: none; }   /* kill old decorative ::before */
.hero-full {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 16vh, 10rem) 0 clamp(3.5rem, 12vh, 7rem);
  overflow: hidden;
  background: var(--navy-900);
}
.hero-full .hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
  z-index: 0;
}
.hero-full .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(16,40,76,0.42) 0%, rgba(16,40,76,0.08) 34%, rgba(16,40,76,0.58) 100%),
    linear-gradient(90deg, rgba(16,40,76,0.80) 0%, rgba(16,40,76,0.45) 46%, rgba(16,40,76,0.06) 100%);
}
.hero-full .container { position: relative; z-index: 2; }
.hero-full .hero-content { max-width: 640px; color: #fff; }
.hero-full .hero-content .eyebrow { color: var(--brass-300); }
.hero-full .hero-content h1 {
  color: #fff; margin-bottom: var(--s-5);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.30);
}
.hero-full .hero-content .lead {
  color: rgba(255, 255, 255, 0.93); max-width: 520px;
  margin-bottom: var(--s-8);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}
.hero-full .hero-ctas { margin-bottom: var(--s-10); flex-wrap: wrap; }
.hero-full .hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hero-full .hero-meta-item .label { color: rgba(255, 255, 255, 0.72); }
.hero-full .hero-meta-item .value { color: #fff; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 3; color: rgba(255, 255, 255, 0.9);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.12);
  animation: heroBob 2.4s ease-in-out infinite;
}
@keyframes heroBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }
#what-we-do { scroll-margin-top: 88px; }

@media (max-width: 640px) {
  .hero-full { min-height: 90svh; padding-top: 5.5rem; }
  .hero-full .hero-bg-img { object-position: 65% center; }
  .hero-full .hero-scrim {
    background: linear-gradient(180deg, rgba(16,40,76,0.52) 0%, rgba(16,40,76,0.34) 42%, rgba(16,40,76,0.74) 100%);
  }
  .hero-full .hero-meta { gap: var(--s-4); }
  .hero-scroll { display: none; }
}

/* =============================================================
   ADDITIONS v0.8 — hero parallax hints + service bubble band
   ============================================================= */
.hero-full .hero-bg-img { will-change: transform; }
.hero-full .hero-content { will-change: transform, opacity; }

/* Full-bleed image band with three floating service bubbles */
.bubble-band {
  position: relative; overflow: hidden;
  min-height: 56vh; display: flex; align-items: center;
  padding: clamp(4rem, 12vh, 7rem) 0;
}
.bubble-band-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.bubble-band-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,40,76,0.50) 0%, rgba(16,40,76,0.32) 50%, rgba(16,40,76,0.52) 100%);
}
.bubble-band .container { position: relative; z-index: 2; }
.bubble-row {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(1.25rem, 5vw, 4rem); flex-wrap: wrap;
}
.bubble {
  width: clamp(150px, 24vw, 210px); height: clamp(150px, 24vw, 210px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 5px solid rgba(232, 184, 194, 0.72);
  box-shadow: 0 22px 48px -20px rgba(16, 40, 76, 0.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  text-align: center; color: var(--navy-900);
  animation: bubbleFloat 5.5s ease-in-out infinite;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bubble:nth-child(2) { animation-delay: -1.8s; border-color: rgba(175, 196, 179, 0.8); }
.bubble:nth-child(3) { animation-delay: -3.6s; border-color: rgba(175, 207, 232, 0.82); }
.bubble:hover { box-shadow: 0 28px 58px -18px rgba(16, 40, 76, 0.62); border-color: var(--brass-500); }
.bubble-icon { font-size: clamp(2.1rem, 5.5vw, 3rem); line-height: 1; }
.bubble-label { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.08; }
@keyframes bubbleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
@media (max-width: 560px) {
  .bubble-band { min-height: 0; padding: 3.25rem 0; }
  .bubble-row { gap: 0.85rem; }
  .bubble { width: 29vw; height: 29vw; min-width: 98px; min-height: 98px; border-width: 4px; gap: 0.3rem; }
  .bubble-icon { font-size: 1.7rem; }
  .bubble-label { font-size: 0.72rem; }
}

/* =============================================================
   ADDITIONS v0.9 — header bar refresh, 3-up non-clickable gallery,
   bubble CTA, tighten the header-only services section
   ============================================================= */

/* Header bar: translucent warm-white with blur, soft shadow, and a
   delicate blush -> sage -> dusty-blue gradient accent line. */
.site-header {
  background: linear-gradient(180deg, rgba(250, 248, 246, 0.94), rgba(250, 248, 246, 0.82));
  backdrop-filter: saturate(165%) blur(16px);
  -webkit-backdrop-filter: saturate(165%) blur(16px);
  border-bottom: 0;
  box-shadow: 0 8px 30px -22px rgba(24, 59, 107, 0.40);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass-500) 0%, var(--sage) 52%, var(--dusty-blue) 100%);
}

/* Services section is now just a lead-in header; pull the image band closer. */
#what-we-do { padding-bottom: clamp(1.75rem, 4vh, 2.75rem); }

/* Bubble band: View All button under the bubbles */
.bubble-cta { margin-top: clamp(2rem, 5vh, 3rem); text-align: center; }

/* Gallery: three items, and NOT clickable (no hover zoom, default cursor) */
.gallery-strip { grid-template-columns: 1fr; }
@media (min-width: 768px) { .gallery-strip { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { cursor: default; }
.gallery-item:hover img { transform: none; }

/* =============================================================
   ADDITIONS v1.0 — CTA-band eyebrow contrast + legal page prose
   ============================================================= */

/* The CTA band is now a light sage; its eyebrow was a pale blush set inline
   (unreadable). Force a readable navy (overrides the inline color). */
.cta-band .eyebrow { color: var(--navy-700) !important; }
.cta-band .eyebrow::before,
.cta-band .eyebrow::after { background: var(--navy-700) !important; }

/* Privacy / Terms / Accessibility prose */
.legal-prose { padding-top: 0.5rem; }
.legal-prose > p:first-of-type { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 1.75rem; }
.legal-prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem; margin-bottom: 0.6rem;
}
.legal-prose p { margin-bottom: 1.1rem; color: var(--ink-soft); line-height: 1.75; }
.legal-prose a { color: var(--dusty-blue-600); text-decoration: underline; }
.legal-prose a:hover { color: var(--navy-700); }

/* =============================================================
   ADDITIONS v1.1 — nav drawer must fit the viewport and scroll
   ============================================================= */
.nav-drawer {
  height: 100dvh;            /* dynamic viewport height (mobile toolbars) */
  max-height: 100dvh;
  overflow: hidden;          /* header + footer pinned; links scroll inside */
}
.nav-drawer-links {
  min-height: 0;             /* allow the flex child to shrink so it can scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Short viewports (landscape phones, short desktop windows): tighten so the
   whole menu, including the footer CTA, stays reachable. */
@media (max-height: 720px) {
  .nav-drawer-links a { font-size: 1.2rem; padding: 0.5rem 0; }
  .nav-drawer-header { padding: 0.85rem 1.5rem; }
  .nav-drawer-footer { padding: var(--s-4) var(--s-6); gap: var(--s-2); }
}

/* =============================================================
   ADDITIONS v1.2 — compact nav drawer (fits without scrolling)
   ============================================================= */
.nav-drawer-header { padding: 0.9rem 1.5rem; }
.nav-drawer-header .name { font-size: 1rem; }
.nav-drawer-links { padding: 0.5rem 1.5rem; gap: 0; }
.nav-drawer-links a {
  font-size: 1.1rem;
  padding: 0.62rem 0;
  font-variation-settings: "opsz" 24;
}
.nav-drawer-footer { padding: 1rem 1.5rem 1.25rem; gap: 0.5rem; }
.nav-drawer-footer .phone-label { font-size: 0.72rem; }
/* Extra squeeze only on genuinely short screens, just in case. */
@media (max-height: 600px) {
  .nav-drawer-links a { font-size: 1rem; padding: 0.45rem 0; }
}

/* =============================================================
   ADDITIONS v1.3 — drawer: narrower + smaller, tidy footer contact
   ============================================================= */
.nav-drawer { width: min(300px, 80vw); }
.nav-drawer-header { padding: 0.8rem 1.25rem; }
.nav-drawer-header .name { font-size: 0.95rem; }
.nav-drawer-links { padding: 0.35rem 1.25rem; gap: 0; }
.nav-drawer-links a { font-size: 1rem; padding: 0.5rem 0; }
.nav-drawer-links a .chev { width: 16px; height: 16px; }
.nav-drawer-footer { padding: 0.85rem 1.25rem 1rem; gap: 0.4rem; }
.nav-drawer-footer .btn { font-size: 0.9rem; padding: 0.7rem 1rem; }
.nav-drawer-footer .phone,
.nav-drawer-footer .phone-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: normal;
  word-break: break-word;
  color: var(--muted);
}

/* =============================================================
   ADDITIONS v1.4 — footer polish on the deep berry-plum
   ============================================================= */
.footer-grid {
  grid-template-columns: 1fr;                 /* mobile: stacked */
  gap: var(--s-10) var(--s-12);
  align-items: start;
  padding-bottom: var(--s-10);
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }      /* brand spans the top */
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; }
  .footer-brand { grid-column: auto; }        /* brand back to first column */
}

.footer-brand .logo-mark { font-size: 1.55rem; letter-spacing: -0.01em; color: #fff; }
.footer-brand .sub { color: var(--brass-300); letter-spacing: 0.24em; margin-bottom: var(--s-4); }
.footer-brand p { color: rgba(255,255,255,0.66); max-width: 340px; line-height: 1.6; }

.footer-col h5 {
  color: var(--brass-300);
  letter-spacing: 0.2em;
  margin-bottom: var(--s-5);
  opacity: 0.95;
}
.footer-col ul li { margin-bottom: 0.62rem; }
.footer-col ul a {
  color: rgba(255,255,255,0.80);
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}
.footer-col ul a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--s-6);
  color: rgba(255,255,255,0.55);
}
.footer-bottom .legal-links a { color: rgba(255,255,255,0.55); }
.footer-bottom .legal-links a:hover { color: var(--brass-300); }

/* =============================================================
   ADDITIONS v1.5 — portal dashboard stat cards spacing fix
   ============================================================= */
.portal-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 600px) { .portal-stats { grid-template-columns: 1fr; } }
.portal-stat {
  border-radius: var(--radius-md);   /* was var(--radius): undefined -> square */
  padding: var(--s-6);
}
.portal-stat .value {
  display: block;
  margin-top: var(--s-2);
  color: var(--navy-700);            /* was var(--navy-600): undefined */
  font-size: 2rem;
  line-height: 1.1;
}

/* ===========================================================
   Our Sitters — public profile cards (no photos; teen privacy)
   =========================================================== */
.sitter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-6, 1.5rem);
}
.sitter-card {
  background: var(--white);
  border: 1px solid var(--rule, #EBE2DC);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 12px 30px -24px rgba(24, 59, 107, 0.4);
  display: flex;
  flex-direction: column;
}
.sitter-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sitter-monogram {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--brass-300, #F2D2DA), var(--brass-500, #E8B8C2));
  color: var(--navy-900, #122B4F);
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em;
}
.sitter-id h2 { font-size: 1.3rem; margin: 0; color: var(--navy-700, #5E2A46); }
.sitter-headline { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--muted, #6B7280); }
.sitter-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.sitter-badge-check { background: var(--sage-100, #E7EEE8); color: var(--sage-600, #6E8C77); }
.sitter-badge-check svg { stroke: var(--sage-600, #6E8C77); }
.sitter-bio { color: var(--ink-soft, #3C4658); font-size: 0.95rem; margin: 0 0 1.15rem; }
.sitter-section { border-top: 1px solid var(--rule, #EBE2DC); padding-top: 1rem; margin-top: auto; }
.sitter-section + .sitter-section { margin-top: 1rem; }
.sitter-section-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted, #6B7280); font-weight: 700; margin: 0 0 0.6rem;
}
.sitter-creds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sitter-creds li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft, #3C4658); }
.sitter-creds .cred-tick { flex: 0 0 auto; margin-top: 0.15rem; stroke: var(--sage-600, #6E8C77); }
.cred-issuer { color: var(--muted, #6B7280); }
.cred-meta { display: block; font-size: 0.78rem; color: var(--muted, #6B7280); margin-top: 0.1rem; }
.sitter-ref { margin: 0 0 0.85rem; padding: 0; border: 0; }
.sitter-ref:last-child { margin-bottom: 0; }
.sitter-ref p { font-size: 0.92rem; color: var(--ink-soft, #3C4658); font-style: italic; margin: 0 0 0.3rem; }
.sitter-ref cite { font-style: normal; font-size: 0.82rem; font-weight: 600; color: var(--navy-700, #5E2A46); }
.sitter-ref cite span { font-weight: 400; color: var(--muted, #6B7280); }
.sitter-empty { text-align: center; padding: 2rem 1rem; color: var(--ink-soft, #3C4658); }

/* ----- Booking: request a sitter (step 3) ----- */
.sitter-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sitter-pick { display: block; cursor: pointer; position: relative; }
.sitter-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sitter-pick-card {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--white);
  border: 2px solid var(--rule, #EBE2DC);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sitter-pick:hover .sitter-pick-card { border-color: var(--brass-500, #E8B8C2); }
.sitter-pick.is-selected .sitter-pick-card,
.sitter-pick input:checked + .sitter-pick-card {
  border-color: var(--brass-600, #D98FA0);
  box-shadow: 0 0 0 3px rgba(217, 143, 160, 0.22);
}
.sitter-pick-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sitter-pick-body strong { color: var(--navy-700, #5E2A46); font-size: 1.05rem; }
.sitter-pick-sub { font-size: 0.85rem; color: var(--muted, #6B7280); }
.sitter-pick-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.sitter-pick-tag {
  font-size: 0.7rem; font-weight: 600;
  background: var(--sage-100, #E7EEE8); color: var(--sage-600, #6E8C77);
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.sitter-pick-any .sitter-monogram {
  background: var(--cream-200, #EBE2DC); color: var(--navy-700, #5E2A46);
}
.sitter-pick-note { font-size: 0.9rem; color: var(--muted, #6B7280); margin-bottom: 1.5rem; }
.booking-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.booking-actions .btn { flex: 1; justify-content: center; min-width: 140px; }

/* Sitter card: school/age subline + fun facts */
.sitter-meta { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--sage-600, #6E8C77); font-weight: 600; }
.sitter-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sitter-facts li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft, #3C4658); }
.sitter-facts .fact-emoji { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.3; }

/* Drawer footer email is longer than a phone number — one size down so it
   stays on a single line. Element+class beats the .phone media-query rule. */
.nav-drawer-footer a.phone-email { font-size: 0.7rem; }