/* ============================================================
   K9 Clip N Clean Mobile Dog Grooming - V1-faithful stylesheet
   Rebuilt 2026-09-09 to match the live GHL V1 site pixel for pixel.
   Caveat (headings) + Lato (body) + Roboto (eyebrows) + Poppins (FAQ).
   Tokens measured from k9clipnclean.com computed styles.
   ============================================================ */
:root {
  --header-h: 110px;
  --mauve: #8e6f93;
  --mauve-dark: #7a5d7f;
  --mauve-soft: #d6bcfa;
  --tint: #e4d6e8;        /* baby purple, tints only, never a button */
  --tint-deep: #d3bfd9;
  --hero-bg: #020710;
  --header-bg: #0d0d0d;
  --page: #f1ecf2;
  --panel: #faf7fb;
  --white: #ffffff;
  --ink: #3b2f42;
  --muted: #607179;
  --line: #e2e2e2;
  --radius-btn: 999px;
  --radius-card: 20px;
  --radius-panel: 25px;
  --container: 1170px;
  --shadow-card: 0 2px 10px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Shadows Into Light', 'Lato', cursive;
  font-size: 20px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Londrina Solid', cursive;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.24;
  font-weight: 400;
}
h1 { font-size: 50px; font-weight: 400; }
h2 { font-size: 32px; font-weight: 400; }
h3 { font-size: 30px; font-weight: 400; }
h4 { font-size: 22px; font-weight: 400; }
p { margin: 0 0 16px; line-height: 1.85; }
a { color: var(--mauve); text-decoration: none; }
/* height:auto is REQUIRED. Every <img> ships intrinsic width/height attributes,
   so any rule that sets only width leaves the raw height attribute in force and
   the image renders at its full pixel height. */
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
ul { padding: 0; margin: 0; }
li { list-style: none; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 20px; width: 100%; }
.center { text-align: center; }
.center-text { max-width: 760px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--mauve); color: #fff; padding: 10px 16px; border-radius: var(--radius-btn); z-index: 500; transition: top .2s ease; }
.skip-link:focus { top: 12px; }

/* ---------- eyebrow: Roboto uppercase mauve (V1) ---------- */
.eyebrow {
  font-family: 'Londrina Solid', cursive;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mauve);
  margin: 0 0 6px;
}
.eyebrow.center { text-align: left; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lato', Arial, sans-serif; font-size: 16px; font-weight: 400;
  line-height: 1.3; padding: 10px 20px; border-radius: var(--radius-btn);
  border: 2px solid transparent; cursor: pointer; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--mauve); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--mauve-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--mauve); border-color: var(--mauve); }
.btn-outline:hover { background: var(--mauve); color: #fff; }
.btn-sm { padding: 10px; font-size: 16px; }
.link-cta { font-family: 'Lato', Arial, sans-serif; font-size: 16px; color: var(--mauve); }
.link-cta:hover { text-decoration: underline; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: transparent;
  transition: background-color .35s ease, backdrop-filter .35s ease,
              transform .4s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
/* once past the hero fold it picks up a blurred dark ground */
.site-header.scrolled {
  background: rgba(13, 13, 13, .78);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .22);
}
/* and gets out of the way when reading downward */
.site-header.nav-hidden { transform: translateY(-100%); }
.site-header.scrolled .header-inner { min-height: 78px; }
.site-header.scrolled .logo img { height: 62px; }
.header-inner, .logo img { transition: min-height .35s ease, height .35s ease; }
.header-inner { display: flex; align-items: center; gap: 22px; min-height: 110px; }
.logo { flex: none; display: block; }
.logo img { height: 92px; width: auto; }
.desktop-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.desktop-nav > a, .dropdown > button {
  font-family: 'Lato', Arial, sans-serif; font-size: 16px; font-weight: 500;
  color: #fff; background: none; border: 0; padding: 5px 9px; cursor: pointer;
  line-height: 1.3;
}
.desktop-nav > a, .dropdown > button { position: relative; transition: color .2s ease; }
.desktop-nav > a::after, .dropdown > button::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px;
  background: var(--mauve-soft); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.desktop-nav > a:hover::after, .dropdown > button:hover::after { transform: scaleX(1); }
.desktop-nav > a:hover, .dropdown > button:hover { color: var(--mauve-soft); }
.dropdown { position: relative; }
.dropdown > ul {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 8px 0; display: none; z-index: 320;
}
.dropdown.open > ul { display: block; }
.dropdown > ul a {
  display: block; padding: 8px 16px; color: #000;
  font-family: 'Lato', Arial, sans-serif; font-size: 14px; font-weight: 500;
}
.dropdown > ul a:hover { background: var(--panel); color: var(--mauve); }
.desktop-nav .tel {
  font-family: 'Lato', Arial, sans-serif; font-size: 16px; font-weight: 400;
  color: #fff; background: transparent; border: 2px solid var(--mauve-soft);
  border-radius: var(--radius-btn); padding: 10px; line-height: 1.3;
}
.desktop-nav .tel:hover { background: var(--mauve-soft); color: var(--header-bg); }
.hamburger { display: none; }
.hamburger span { transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative; background: var(--hero-bg);
  background-size: cover; background-position: center;
  padding: calc(60px + var(--header-h)) 0 140px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,7,16,.82) 0%, rgba(2,7,16,.45) 45%, rgba(2,7,16,.12) 100%);
}
.hero-inner { position: relative; z-index: 2; }
.hero .eyebrow { font-family: 'Londrina Solid', cursive; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tint); margin: 0 0 10px; }
.hero h1 { color: #fff; font-size: 50px; font-weight: 400; line-height: 1.24; margin: 0 0 40px; }
.hero-sub { color: #fff; font-size: 17px; max-width: 520px; margin: 0 0 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-small { padding: calc(56px + var(--header-h)) 0 90px; }
.hero-small h1 { font-size: 38px; margin-bottom: 20px; }
.hero-home { padding: 0; }
.hero-home-grid { position: relative; min-height: 640px; display: block; }
.hero-home-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-home-media picture { display: block; width: 100%; height: 100%; }
.hero-home-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-home-copy { position: relative; z-index: 2; }
.hero-home-copy .wrap-inner {
  max-width: var(--container); margin: 0 auto; padding: 165px 20px 275px; width: 100%;
}

/* ---------- sections ---------- */
.section { padding: 53px 0; background: var(--white); }
.section.alt { background: var(--page); padding: 50px 0 30px; }

/* services: light panel, rounded, inset from the page edges (V1) */
.services-grid {
  background: var(--panel); border-radius: var(--radius-panel);
  margin: 0 20px; padding: 30px 0 60px;
}
.services-grid .wrap { max-width: var(--container); }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 22px; }
.card-grid .card:nth-child(n+3) { grid-column: span 1; }
@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(6, 1fr); }
  .card-grid .card:nth-child(1), .card-grid .card:nth-child(2) { grid-column: span 3; }
  .card-grid .card:nth-child(3), .card-grid .card:nth-child(4), .card-grid .card:nth-child(5) { grid-column: span 2; }
}
.card { background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.card-media { position: relative; }
/* V1 renders service card photos at their natural aspect, uncropped, so card
   heights are deliberately uneven. Do not force an aspect-ratio here. */
.card-media img { width: 100%; height: auto; display: block; }
.card-label {
  position: absolute; left: 22px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  background: #000; color: #fff; font-family: 'Lato', Arial, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  padding: 12px 16px; border-radius: var(--radius-btn);
}
.arrow-circle { width: 17px; height: 17px; flex: none; color: #fff; }
.card { color: var(--ink); text-decoration: none; }
.card:hover .card-label { background: var(--mauve); }
.card-body { padding: 16px 14px 22px; }
.card-body h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.card-body p { margin: 0 0 10px; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.about-media img { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; border-radius: 4px; display: block; }
.about-supporting { display: none; }
/* the one outlined heading, mirroring Fresh's 'Hi! I'm Sarah...' treatment. Outline is
   far too faint below ~30px or reversed on a photo, so it is used here only. */
.about h2 { font-family: 'Londrina Outline', cursive; font-size: 46px; font-weight: 400; line-height: 1.2; }
.about .btn { margin-top: 12px; }

/* ---------- 3 step process ---------- */
.how-it-works { background: var(--page); padding: 50px 0 60px; }
.process-head {
  background: var(--panel); border-radius: var(--radius-card);
  padding: 26px 30px 22px; margin-bottom: 0;
}
.process-head .eyebrow, .process-head h3 { margin-bottom: 0; }
.process-head .eyebrow { margin-bottom: 4px; }
.how-it-works h3 { font-size: 30px; font-weight: 400; }
.how-it-works .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 68px; }
.step { position: relative; background: var(--white); border-radius: var(--radius-card); padding: 76px 26px 30px; box-shadow: var(--shadow-card); }
/* V1 sizes these at 120x120, left-aligned near the card edge, overlapping the card top. */
.step-icon { position: absolute; top: -60px; left: 11px; width: 120px; height: 120px; }
.step-icon svg, .step-icon img { width: 100%; height: 100%; }
.step h4 { font-size: 22px; font-weight: 400; margin: 0 0 8px; }
.step p { margin: 0 0 18px; }

/* ---------- gallery ---------- */
.gallery-teaser { background: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; align-items: start; }
.g-item { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; overflow: hidden; display: block; }
.g-item img { width: 100%; height: auto; display: block; }
.g-item:nth-child(4n+1) img, .g-item:nth-child(4n+2) img { aspect-ratio: 4/5; object-fit: cover; }
.g-item:nth-child(4n+3) img, .g-item:nth-child(4n) img { aspect-ratio: 1/1; object-fit: cover; }

/* ---------- testimonials ---------- */
.testimonials { background: var(--page); }
.testimonials h3 { font-size: 30px; font-weight: 400; }
.review-embed-wrap { margin-top: 18px; min-height: 220px; }

/* ---------- FAQ ---------- */
.faq { background: var(--white); }
.faq h2 { font-size: 28px; font-weight: 400; text-transform: none; }
.faq-list { max-width: 620px; margin-top: 18px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: 'Poppins', Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.5; color: #111827;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid #111827; border-bottom: 2px solid #111827; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { margin: 12px 0 4px; }

/* ---------- contact / form ---------- */
.contact-section { background: var(--page); padding: 50px 0 60px; }
.contact-section .wrap { max-width: 1140px; }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px;
  background: var(--white); border-radius: var(--radius-card); padding: 48px 46px 54px;
}
.contact-grid h3 { font-size: 26px; font-weight: 400; margin-bottom: 16px; }
.contact-map .detail-item svg { width: 19px; height: 19px; flex: none; color: var(--ink); }
.contact-map .contact-details { margin: 0 0 22px; }
.contact-details { margin-top: 18px; }
.detail-item { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 8px; }
.detail-item a { color: var(--ink); }
.detail-item a:hover { color: var(--mauve); }
.contact-map iframe { width: 100%; border: 0; border-radius: 4px; }
.form-card { min-height: 520px; }
.form-card iframe { width: 100%; border: 0; }

/* ---------- area CTA / quote / three-part ---------- */
.area-cta, .quote-cta { background: var(--page); padding: 50px 0 60px; }
.quote-cta h2, .area-cta h2 { font-size: 30px; font-weight: 400; }
.three-part { background: var(--white); }
.big-dog-note, .notice-box, .pricing-callout {
  background: var(--panel); border-left: 4px solid var(--mauve);
  border-radius: 8px; padding: 18px 22px; margin: 22px 0;
}

/* ---------- pricing ---------- */
.pricing-section { background: var(--white); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.pricing-card { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px 26px 32px; }
.pricing-card h3 { font-size: 26px; font-weight: 400; margin-bottom: 6px; }
.tier-range { font-family: 'Lato', Arial, sans-serif; font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.price-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dotted var(--line); }
.p-name { flex: 0 1 auto; min-width: 0; }
/* a text amount ("By photo") is far wider than "$140"; let it shrink and drop the
   leader dots rather than push the row past the card edge */
.price-row { flex-wrap: wrap; }
.p-dots { flex: 1 1 auto; border-bottom: 1px dotted #c9c9c9; transform: translateY(-4px); }
.p-amount { flex: 0 0 auto; font-weight: 700; white-space: nowrap; margin-left: auto; }
.p-dots { min-width: 12px; }
.pricing-note { font-size: 15px; color: var(--muted); margin-top: 16px; }

/* ---------- pricing menu (restaurant-menu layout, matching the reference site
   Megan liked: name, dotted leader, price on one line, description beneath) ---------- */
.price-intro { max-width: 820px; margin: 0 auto 42px; text-align: center; }
.price-intro p { margin-bottom: 12px; }
.price-intro p:last-child { margin-bottom: 0; }
.price-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 46px 60px; }
.menu-group-title {
  font-size: 30px; font-weight: 400; margin: 0 0 6px;
  padding-bottom: 12px; border-bottom: 2px solid var(--mauve-soft);
}
.menu-list { margin: 0; }
.menu-item { list-style: none; margin: 22px 0 0; }
.menu-line { display: flex; align-items: baseline; gap: 10px; }
.menu-name, .menu-price {
  font-family: 'Londrina Solid', cursive; font-weight: 400;
  font-size: 25px; line-height: 1.2; color: var(--mauve); flex: 0 1 auto; min-width: 0;
}
.menu-price { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.menu-dots { flex: 1 1 auto; min-width: 14px; border-bottom: 2px dotted var(--mauve-soft); transform: translateY(-6px); }
.menu-desc { display: block; margin-top: 5px; max-width: 46ch; font-size: 15px; line-height: 1.7; color: var(--muted); }
@media (max-width: 560px) {
  .menu-name, .menu-price { font-size: 22px; }
  .price-menu { gap: 36px; }
}

/* callout + notice interiors (pricing "Good To Know", contact small-business note) */
.notice-box, .pricing-callout, .big-dog-note { padding: 24px 26px 26px; }
.notice-box h3, .pricing-callout h3, .big-dog-note h3 { font-size: 25px; font-weight: 400; margin: 4px 0 12px; }
.notice-box p, .pricing-callout p, .big-dog-note p { margin-bottom: 12px; }
.notice-box p:last-child, .pricing-callout p:last-child, .big-dog-note p:last-child { margin-bottom: 0; }
.price-notes { margin: 0; }
.price-notes li { list-style: disc; margin: 0 0 10px 20px; line-height: 1.75; }
.price-notes li:last-child { margin-bottom: 0; }
.small-biz-note .notice-box { max-width: 860px; margin-inline: auto; }

/* ---------- prose / legal ---------- */
.legal, .prose { background: var(--white); }
.prose { max-width: 820px; }
.prose h2 { font-size: 28px; margin-top: 30px; }
.prose h3 { font-size: 24px; margin-top: 24px; }
.prose ul { margin: 0 0 16px 20px; }
.prose li { list-style: disc; margin-bottom: 7px; }

/* ---------- footer ---------- */
.site-footer { background: var(--header-bg); color: #fff; padding: 54px 0 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--mauve-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-logo { width: 210px; margin-bottom: 14px; }
.site-footer p, .site-footer li { font-size: 15px; line-height: 1.9; }
.site-footer h4 { font-family: 'Londrina Solid', cursive; font-size: 21px; font-weight: 400; color: #fff; margin: 0 0 8px; }
.hours-ftr li { display: flex; justify-content: space-between; gap: 14px; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); }
.social-icon:hover { background: var(--mauve); }
.social-icon svg { width: 18px; height: 18px; fill: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding: 18px 0 22px; font-size: 14px; }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 900;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
  visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; overflow-y: auto;
}
.modal-overlay.open { visibility: visible; opacity: 1; }
.modal-overlay:not(.open) { pointer-events: none; }
.modal-overlay:not(.open) iframe { pointer-events: none !important; }
.modal-box { background: #fff; border-radius: var(--radius-card); max-width: 640px; width: 100%; padding: 26px; position: relative; }
.modal-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: #555; }

/* ---------- mobile nav ----------
   Pass 12 (2026-09-11): the open menu is a normal IN-FLOW page, not an overlay.
   While body.nav-open is set, main + footer are display:none and .mobile-nav is an
   ordinary block after the header, so the DOCUMENT scrolls it natively. No fixed
   panel, no inner scroll container, no overscroll-behavior, no body pinning, no
   overflow:hidden. The previous fixed/100dvh/overflow-y overlay plus a JS body lock
   would not scroll on a real iPhone even though every emulator passed. */
.mobile-nav {
  display: none;
  background: var(--header-bg);
  min-height: 100vh;
  padding: calc(var(--header-h-mobile, 84px) + 8px) 22px 120px;
}
body.nav-open .mobile-nav { display: block; }
body.nav-open > main,
body.nav-open > .site-footer,
body.nav-open > .skip-link { display: none !important; }
body.nav-open { background: var(--header-bg); }
.mobile-nav a, .mobile-heading { color: #fff; }
.mobile-heading {
  font-family: 'Londrina Solid', cursive; text-transform: uppercase;
  font-size: 15px; font-weight: 400; letter-spacing: .14em;
  color: var(--mauve-soft); margin: 26px 0 6px;
}
.mobile-nav ul { border-top: 1px solid rgba(255,255,255,.09); }
.mobile-nav ul a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; font-size: 22px; line-height: 1.25;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.mobile-nav ul a::after { content: "\203A"; color: var(--mauve-soft); font-size: 24px; opacity: .7; }
.mobile-nav ul a:active { background: rgba(255,255,255,.05); }
.mobile-nav .tel {
  display: block; text-align: center; margin: 26px 0 12px;
  border: 2px solid var(--mauve-soft); border-radius: var(--radius-btn);
  padding: 15px 16px; font-size: 19px;
}
.mobile-nav .btn { display: flex; width: 100%; padding: 16px; font-size: 18px; }
/* items fan in once the menu opens */
body.nav-open .mobile-nav-inner > * {
  animation: navIn .45s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * .045s + .05s);
}
@keyframes navIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* while the menu is open the bar is solid and stays put (never hides, no blur) */
body.nav-open .site-header {
  background: var(--header-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
  transform: none;
}
/* the menu can never be showing on desktop, even if the window is widened while open */
@media (min-width: 861px) {
  .mobile-nav, body.nav-open .mobile-nav { display: none; }
  body.nav-open > main, body.nav-open > .site-footer { display: block !important; }
  body.nav-open { background: var(--page); }
}

/* ---------- split text + photo sections (service + area pages, V1 layout) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split-img-left .split-media { order: -1; }
.split-img-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.split-copy > p:last-of-type { margin-bottom: 22px; }
.split-media img {
  width: 100%; height: auto; max-height: 640px; object-fit: cover;
  border-radius: 16px; box-shadow: var(--shadow-card);
}
@media (max-width: 860px) {
  .split, .split-img-left { grid-template-columns: 1fr; gap: 0; }
  .split-copy { display: contents; }
  .split { display: flex; flex-direction: column; align-items: stretch; }
  .split > *, .split-copy > * { order: 1; }
  .split .split-media { order: 2; margin: 4px 0 22px; }
  .split .split-cta { order: 3; align-self: flex-start; }
  .split.split-m-top .split-media { order: 0; margin: 0 0 24px; }
  .split-media img { max-height: 520px; }
}

/* ---------- hidden pages ---------- */
.hidden-page-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 60px 20px; background: var(--page); }
.hidden-card { background: #fff; border-radius: var(--radius-card); padding: 40px 36px; max-width: 620px; width: 100%; box-shadow: var(--shadow-card); }
.hidden-card-wide { max-width: 760px; }
.survey-embed-wrap { margin-top: 10px; }
.survey-embed-wrap iframe { width: 100%; border: 0; display: block; min-height: 520px; }
.hidden-logo { width: 200px; margin: 0 auto 22px; }
.star-picker { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
.star-option { background: none; border: 0; font-size: 34px; cursor: pointer; color: #d8d8d8; }
.star-option:hover, .star-option.on { color: #f5b301; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 54px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .card-grid .card { grid-column: auto !important; }
}
@media (max-width: 860px) {
  .desktop-nav { display: none; }
  .hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 40px; background: none; border: 0; cursor: pointer;
  }
  .hamburger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .header-inner { min-height: 84px; }
  .logo img { height: 68px; }
  .hero h1 { font-size: 42px; }
  .hero .eyebrow { font-size: 20px; }
  .hero-home-copy .wrap-inner { padding: 90px 20px 100px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-grid { padding: 30px 22px 36px; }
  .how-it-works .steps { grid-template-columns: 1fr; gap: 62px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { margin: 0 12px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 34px; }
  .section { padding: 40px 0; }
  .card-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* ---------- Why Mobile Grooming (added 2026-09-09, Megan's request) ---------- */
.why-mobile { background: var(--white); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; margin-top: 26px; }
.why-item { display: flex; align-items: flex-start; gap: 20px; }
.why-badge {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  background: var(--tint); color: var(--mauve);
  display: inline-flex; align-items: center; justify-content: center;
}
.why-badge svg { width: 38px; height: 38px; }
.why-item h3 { font-size: 23px; font-weight: 400; margin: 4px 0 4px; }
.why-item p { margin: 0; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 26px; } }

/* softer, lighter surfaces to match the reference site */
.section.alt, .testimonials, .how-it-works, .contact-section, .area-cta, .quote-cta { background: var(--page); }
.card, .step, .pricing-card { box-shadow: 0 6px 22px rgba(78, 56, 86, .07); }
.btn { font-weight: 600; padding: 12px 26px; }
.card-label { border-radius: 999px; padding: 11px 18px; }
.process-head { background: var(--tint); }


/* ---------- Londrina + Shadows Into Light, 2026-09-09 ----------
   Handwriting is fine for marketing prose but not for anything anyone has to read
   carefully, so legal pages, form labels, prices and UI chrome stay on Lato. */
.prose, .prose p, .legal, .legal p, .price-row, .tier-range, .pricing-note,
.detail-item, .footer-bottom, .site-footer p, .site-footer li,
.faq summary, .card-label, .btn, .desktop-nav, .mobile-nav, .dropdown > ul a {
  font-family: 'Lato', Arial, sans-serif;
}
.prose p, .legal p { font-size: 17px; line-height: 1.7; }
.faq summary { font-size: 18px; font-weight: 700; }
.site-footer p, .site-footer li { font-size: 15px; line-height: 1.9; }
/* handwriting sits small, so give the reading column a little more air */
.about p, .why-item p, .card-body p, .step p { font-size: 20px; line-height: 1.85; }


/* ============================================================
   Motion, 2026-09-10. main.js has always added .reveal/.in and built a
   .lightbox, but the V1-faithful stylesheet rewrite dropped both rule sets,
   so scroll reveals did nothing and the gallery lightbox opened unstyled.
   ============================================================ */

/* scroll reveal. Only JS ever adds .reveal, so with JS off everything stays visible. */
/* Guarded: a browser that cannot do the transform never gets the hidden state, so
   content can never be stranded at opacity 0. JS is the other half of that safety,
   it only adds .reveal when IntersectionObserver exists. */
@supports (transform: translateY(18px)) {
  .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .75s cubic-bezier(.16,1,.3,1) var(--d, 0s),
                transform .75s cubic-bezier(.16,1,.3,1) var(--d, 0s);
    will-change: opacity, transform;
  }
  .reveal.in { opacity: 1; transform: none; }
}

/* micro-interactions: small, consistent, never showy */
.card, .step, .pricing-card, .why-badge, .g-item img, .about-media img, .btn, .social-icon {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
.card-media, .g-item, .about-media { overflow: hidden; border-radius: inherit; }
.card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(78,56,86,.15); }
.card:hover .card-media img { transform: scale(1.045); }
.card-media img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.step:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(78,56,86,.13); }
.g-item { cursor: zoom-in; }
.g-item img { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.g-item:hover img { transform: scale(1.06); }
.why-item:hover .why-badge { transform: translateY(-3px) scale(1.05); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.social-icon:hover { transform: translateY(-2px); }
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--mauve); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--mauve-soft); outline-offset: 3px; border-radius: 4px; }

/* gallery lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 40px 20px;
  background: rgba(20, 14, 22, .92);
  opacity: 0; transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.open { opacity: 1; }
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 86vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.97); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.lightbox.open img { transform: scale(1); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff;
  cursor: pointer; border-radius: 50%; width: 48px; height: 48px;
  font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, transform .2s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.25); transform: scale(1.06); }
.lb-close { top: 20px; right: 20px; font-size: 30px; }
.lb-prev { left: 20px; top: 50%; margin-top: -24px; }
.lb-next { right: 20px; top: 50%; margin-top: -24px; }
@media (max-width: 560px) {
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-close { top: 12px; right: 12px; }
}

@media (max-width: 860px) { :root { --header-h: 84px; } }

/* one switch turns all of it off */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  body.nav-open .mobile-nav-inner > * { animation: none !important; }
  .card:hover, .step:hover, .btn:hover, .social-icon:hover { transform: none !important; }
  .card:hover .card-media img, .g-item:hover img { transform: none !important; }
}