/* ==========================================================================
   BOSTON'S GROOMER — WHITE-FIRST EDITORIAL SYSTEM
   Off-white canvas leads. Deep navy is rationed: finale, footer,
   estimator readout, inner headers. Orange is rationed: book buttons,
   prices, tiny markers. Everything else is ink on paper.
   Palette: #fffefc / #0b1b3f / #081426 / #c34b20 / #ff754a / #ff9a73
   ========================================================================== */

/* TYPE SCALE — sub-16px text uses exactly four steps, nothing in between.
   Anything that needs a fifth small size is a sign it should reuse one of
   these. Display sizes (>= 1rem) are a separate ladder set by the clamp() in
   each section. Changing a literal below 1rem means changing it here too.
     0.6875rem  11px  micro labels, uppercase meta
     0.8125rem  13px  small print, notes
     0.875rem   14px  UI: nav, buttons, captions
     0.9375rem  15px  body and list copy          */

/* 1. TOKENS */
:root {
  --paper: #fffefc;
  --paper-pure: #ffffff;
  --paper-dim: #f0ebe0;
  --abyss: #060f20;
  --navy-deep: #081426;
  --navy: #0b1b3f;
  --navy-ink-soft: #24304f;
  --ink-secondary: #43506b;
  --ink-muted: #7c86a0;
  --ink-line: rgba(8, 20, 38, 0.14);
  --ember-deep: #8f3515;
  --ember: #c34b20;
  --ember-bright: #ff754a;
  --peach: #ff9a73;
  --peach-mist: #ffc9b3;

  --brand-orange: #c34b20;
  --brand-orange-bright: #c34b20;
  --brand-amber: #c34b20;
  --brand-peach: #c34b20;
  --color-orange: var(--brand-orange-bright);
  --color-orange-dark: #8f3515;
  --color-peach: #c34b20;
  --accent-gradient: linear-gradient(135deg, #c34b20 0%, #8f3515 100%);

  /* Two typefaces, split by job rather than by section.
     DISPLAY - Swiss 721 Black Condensed BT carries h1 and h2, the hero
     wordmark, and the large prices and numerals. It ships with CorelDRAW /
     MS app bundles, so it renders for anyone who has it installed; everyone
     else gets Barlow Condensed, the closest free metric twin, from Google
     Fonts.
     TEXT - Inter carries everything read in sentences: body copy, taglines,
     h3 and down, labels, buttons, lists, tables and form fields. */
  --font-condensed: "Swiss 721 Black Condensed BT", "Swiss 721 Condensed BT", "Helvetica Condensed Black", "Helvetica Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-body);
  --font-display: var(--font-condensed);
  --font-serif-it: var(--font-condensed);
  --font-ui: var(--font-body);

  /* One weight for every heading and every accent word inside one, so no
     heading reads half-bold / half-medium. 600 is Semibold on Barlow
     Condensed (a medium bold), and it also makes Swiss 721's single Black
     face render identically everywhere instead of being synthetically
     emboldened on some headings and not others. */
  --heading-weight: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* Vertical rhythm. One value per role, so the gap between two bands is the
     same on every page: 112 + 112 = 224px between sections, 168px around the
     closing finale. Chapters used to sit at 150 and inner pages at 110, which
     is why the home page felt airier than the rest of the site. */
  --rhythm-section: clamp(72px, 8.5vw, 112px);
  --rhythm-major: clamp(96px, 12vw, 168px);
  --rhythm-lead: clamp(32px, 4vw, 56px);
  --rhythm-head: clamp(32px, 3.5vw, 48px);
  --rhythm-block: 32px;
  --rhythm-tight: 16px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 20px;
  --radius-btn: 9999px;
  --radius-full: 9999px;

  --max-width: 1200px;
  --header-height: 76px;
  --transition-ui: 220ms ease;
  --transition-bounce: 220ms ease;

  --shadow-sm: 0 1px 2px rgba(8, 20, 38, 0.07);
  --shadow-card: 0 20px 50px -24px rgba(8, 20, 38, 0.22);
  --shadow-hover: 0 28px 64px -24px rgba(8, 20, 38, 0.3);

  --color-instagram: #c34b20;
  --color-facebook: #c34b20;
  --color-whatsapp: #c34b20;
  --color-success: #3d8b4f;
  --color-danger: #c04536;

  --pricing-text: #081426;
  --pricing-muted: #43506b;
  --pricing-surface: #f7f5f0;
  --pricing-surface-soft: #e6e9f0;
  --pricing-border: rgba(8, 20, 38, 0.14);
  --pricing-header-bg: #081426;
  --pricing-header-text: #f8fafc;
  --pricing-header-border: rgba(248, 250, 252, 0.18);
  --inverse-text: #081426;
  --inverse-muted: #43506b;
}

/* 2. LIGHT THEME (DEFAULT — paper exhibition) */
:root,
.theme-light {
  --bg-primary: #fffefc;
  --bg-secondary: #f7f5f0;
  --bg-tertiary: #f0ebe0;
  --surface: #f7f5f0;
  --surface-hover: #f4efe4;
  --surface-solid: #f7f5f0;
  --card-bg: #f7f5f0;
  --panel-bg: #f0ebe0;
  --border: rgba(8, 20, 38, 0.14);
  --border-hover: #c34b20;
  --text-primary: #081426;
  --text-secondary: #43506b;
  --text-muted: #7c86a0;
  --heading-color: #081426;
  --header-bg: rgba(255, 254, 252, 0.86);
  --header-scrolled-bg: rgba(255, 254, 252, 0.96);
  --header-color: #081426;
  --link-color: #33405e;
  --link-hover: #081426;
  --hero-tagline-color: #d8dee8;
  --button-primary-bg: #c34b20;
  --button-primary-text: #faf9f6;
  --button-primary-hover-bg: #8f3515;
  --button-primary-hover-text: #ffffff;
  --focus-ring: rgba(195, 75, 32, 0.35);
  --pill-bg: rgba(8, 20, 38, 0.05);
  --pill-border: rgba(8, 20, 38, 0.14);
  --code-bg: rgba(8, 20, 38, 0.05);

  --bg: var(--bg-primary);
  --text: var(--text-primary);
  --color-border: var(--border);
  --color-text-muted: var(--text-secondary);
  --inverse-bg: #faf9f6;
  --inverse-surface: #ffffff;
}

/* 3. DARK THEME (night reading mode — navy, ember on top) */
.theme-dark {
  --bg-primary: #081426;
  --bg-secondary: #0b1b3f;
  --bg-tertiary: #10234a;
  --surface: #0b1b3f;
  --surface-hover: #10234a;
  --surface-solid: #0d1e42;
  --card-bg: transparent;
  --panel-bg: #0b1b3f;
  --border: rgba(248, 250, 252, 0.13);
  --border-hover: #ff754a;
  --text-primary: #f8fafc;
  --text-secondary: #b6c0ce;
  --text-muted: #7c8aa0;
  --heading-color: #faf9f6;
  --header-bg: rgba(8, 20, 38, 0.7);
  --header-scrolled-bg: rgba(8, 20, 38, 0.92);
  --header-color: #f8fafc;
  --link-color: #cdd6e2;
  --link-hover: #ffffff;
  --hero-tagline-color: #b6c0ce;
  --button-primary-bg: #ff754a;
  --button-primary-text: #081426;
  --button-primary-hover-bg: #ff9a73;
  --button-primary-hover-text: #081426;
  --focus-ring: rgba(255, 117, 74, 0.5);
  --pill-bg: rgba(248, 250, 252, 0.06);
  --pill-border: rgba(248, 250, 252, 0.13);
  --brand-orange-bright: #ff754a;
  --color-orange: #ff754a;
  --color-peach: #ff9a73;
  --pricing-text: #f8fafc;
  --pricing-muted: #b6c0ce;
  --pricing-surface: rgba(248, 250, 252, 0.03);
  --pricing-surface-soft: rgba(248, 250, 252, 0.075);
  --pricing-border: rgba(248, 250, 252, 0.13);
  --pricing-header-bg: #081426;
  --pricing-header-text: #f8fafc;
  --pricing-header-border: rgba(248, 250, 252, 0.2);
  --shadow-card: 0 24px 64px -24px rgba(3, 8, 20, 0.7);
  --shadow-hover: 0 32px 80px -24px rgba(3, 8, 20, 0.8);

  --bg: var(--bg-primary);
  --text: var(--text-primary);
  --color-border: var(--border);
  --color-text-muted: var(--text-secondary);
  --inverse-text: #f8fafc;
  --inverse-muted: #b6c0ce;
  --inverse-bg: #081426;
  --inverse-surface: #0b1b3f;
}

/* 4. BASE */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

body {
  /* 18px base, up from the 16px default: body copy reads easier without
     touching the heading scale or the 11-13px label tier. A condensed
     face needs a little air between letters to stay legible, so body
     copy carries 0.01em; headings (0.005em) and the label tier set
     their own. */
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
body.overflow-hidden { overflow: hidden; }

::selection { background: #c34b20; color: #faf9f6; }

img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--transition-ui); }
button { font-family: inherit; font-size: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid #c34b20; outline-offset: 3px; }
.theme-dark :focus-visible { outline-color: #ff754a; }
:focus:not(:focus-visible) { outline: none; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.skip-link {
  position: absolute; top: -100px; left: var(--space-4);
  background: #c34b20; color: #faf9f6;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  z-index: 9999; font-weight: 600; transition: top var(--transition-ui);
}
.skip-link:focus { top: var(--space-4); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--heading-color);
  font-weight: var(--heading-weight);
  letter-spacing: 0.005em;
  line-height: 0.96;
}
/* h1 and h2 are the display tier and keep the condensed face. h3 and down
   are text-tier headings and read as Inter with the rest of the copy. */
h1, h2 {
  font-family: var(--font-display);
}
/* Ember italics are rationed: one accent word per heading, in the same family */
h1 em, h2 em, h3 em,
.hero-title em, .chapter-title em, .finale-title em,
.footer-giant em, .page-header h1 em, .interlude-line em,
.booking-band h2 em {
  font-family: inherit;
  font-style: italic;
  font-weight: var(--heading-weight);
  text-transform: none;
  letter-spacing: 0;
  color: var(--heading-color);
}
.theme-dark h1 em, .theme-dark h2 em, .theme-dark h3 em,
.theme-dark .chapter-title em { color: var(--heading-color); }
.theme-dark .service-price { color: #ff9a73; }
/* Surfaces that are always dark keep off-white headings in both themes */
.hero-title em, .finale-title em, .footer-giant em,
.page-header h1 em, .interlude-line em { color: #faf9f6; }

/* Brief branded loading moment shared by every public page. */
#page-loader {
  position: fixed; inset: 0; z-index: 2000;
  background: #081426; color: #faf9f6;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
#page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader-brand {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1; letter-spacing: 0; color: #faf9f6;
}
.page-loader-paw {
  width: 44px; height: 44px; object-fit: contain;
  animation: loader-breathe 700ms ease-in-out infinite alternate;
}
@keyframes loader-breathe { from { opacity: 0.72; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Reveal on scroll (only when JS runs) */
html.js [data-reveal] { opacity: 0; transform: translateY(30px); }
html.js [data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chapters — paper throughout; contrast arrives only at the finale */
/* Anchor targets must clear the fixed header, or a cross-page jump to
   services.html#pricing-title lands the heading underneath it. */
:target,
#pricing-title,
.section-padding,
.chapter {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.chapter { padding-block: var(--rhythm-section); position: relative; background: var(--bg-primary); }
.chapter--ink { background: var(--bg-primary); }
.chapter--bone { background: var(--surface); }
.chapter--bone .chapter-title { color: var(--heading-color); }
.chapter--bone .chapter-lede { color: var(--text-secondary); }

.chapter-head { max-width: 900px; margin-bottom: var(--rhythm-head); }
.chapter-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 26px;
}
.chapter-eyebrow span {
  font-family: var(--font-display); font-style: italic; font-size: 1.125rem;
  color: var(--brand-orange-bright); letter-spacing: 0;
}
.chapter-eyebrow::after { content: ""; height: 1px; width: 72px; background: var(--border); }
.chapter-eyebrow--center { justify-content: center; }
.chapter-eyebrow--center::after { display: none; }
.chapter-title {
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.95; margin-bottom: 22px;
  text-wrap: balance;
}
/* A name is a single unit and must not break across lines */
.keep-together { white-space: nowrap; }
/* The split column tops out at 540px, and at the 6rem clamp max this name needs
   585px, so text-wrap: balance snapped it onto two lines on every desktop.
   Capping the clamp for this title keeps the name whole. 5rem leaves 52px of
   slack against the loaded webfont, and the vw term is untouched, so the ramp
   below 1143px is identical to every other chapter title. */
#about-title { font-size: clamp(2.8rem, 7vw, 5rem); }
.chapter-lede { font-size: clamp(1.125rem, 1.8vw, 1.25rem); color: var(--text-secondary); max-width: 56ch; line-height: 1.65; }

/* Inline cross-reference inside a page header lede */
.page-header-link {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--brand-orange-bright);
  padding-bottom: 1px;
  white-space: nowrap;
}
.page-header-link:hover, .page-header-link:focus-visible { color: var(--brand-orange-bright); }

/* Quiet cross-reference under a chapter heading. Sits outside the display
   heading so it never inherits the clamp() type size. */
.chapter-link-row { margin: 18px 0 0; }
.chapter-link {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--brand-orange-bright);
  padding-bottom: 2px;
}
.chapter-link:hover, .chapter-link:focus-visible { color: var(--brand-orange-bright); }

/* Legacy section scaffolding (legal pages + compat) */
.section-padding { padding-block: var(--rhythm-section); }
.section-header { max-width: 680px; margin-bottom: var(--rhythm-head); }
.section-subtitle {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--heading-color); margin-bottom: 18px;
}
.section-title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: var(--rhythm-tight); text-wrap: balance; }
.section-divider { display: none; }
.section-description { font-size: 1.125rem; color: var(--text-secondary); line-height: 1.65; max-width: 60ch; }

/* Buttons — ember is for booking, nowhere else */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: var(--radius-btn);
  font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em;
  min-height: 54px; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--transition-ui), color var(--transition-ui), border-color var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--button-primary-bg); color: var(--button-primary-text) !important;
}
.btn-primary:hover { background: var(--button-primary-hover-bg); color: var(--button-primary-hover-text) !important; }
.btn-outline {
  background: transparent; color: var(--text-primary) !important; border-color: var(--border);
}
.btn-outline:hover { border-color: var(--text-primary); }
.btn-ghost {
  background: transparent; color: var(--text-primary) !important; border-color: var(--text-primary);
}
.btn-ghost:hover { border-color: var(--text-primary); }
/* Ghost on photography / navy stays legible. The finale is a deep navy gradient in
   both themes, so --text-primary (navy) would vanish against it here. */
.hero .btn-ghost, .finale .btn-ghost { color: #f8fafc !important; border-color: rgba(248, 250, 252, 0.4); }
.hero .btn-ghost:hover, .finale .btn-ghost:hover { border-color: #f8fafc; }
.btn-large { padding: 19px 44px; font-size: 1rem; min-height: 62px; }
.btn-compact { padding: 11px 22px; font-size: 0.875rem; min-height: 46px; }
.cta-stack { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-stack--center { justify-content: center; }
@media (max-width: 520px) { .cta-stack .btn { flex: 1 1 100%; } }

/* 5. HEADER — paper, quiet; one ember button */
#announcement-banner { display: none; }
#announcement-banner.hidden { display: none; }

#main-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-height); z-index: 1000;
  background: transparent;
  /* The wrapper spans the full top strip; only the pill itself is clickable. */
  pointer-events: none;
}
.header-container {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  pointer-events: auto;
  transition: background-color var(--transition-ui), border-color var(--transition-ui);
}
/* On scroll the bar gains a paper background and a hairline bottom rule. It
   stays a full-bleed bar: no detaching, no rounding, no floating capsule.
   The chrome sits on the fixed wrapper (inset: 0, full viewport width) rather
   than on .header-container, which is also .container and so is capped at the
   1200px grid — otherwise the bar would stop short of both screen edges. */
#main-header.scrolled {
  background-color: var(--header-scrolled-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* Transparent over the light photo hero: ink text until scrolled (Coutumes nav) */
.theme-light #main-header:not(.scrolled) {
  --header-color: #0b1b3f;
  --link-color: #33405e;
  --link-hover: #081426;
  --text-muted: #5a6a8c;
  --border: rgba(8, 20, 38, 0.18);
  /* Soft paper fade so nav reads on any photo region */
  background: linear-gradient(180deg, rgba(255, 254, 252, 0.88) 0%, rgba(255, 254, 252, 0.45) 55%, transparent 100%);
}
.theme-dark #main-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(6, 15, 32, 0.82) 0%, rgba(6, 15, 32, 0.4) 55%, transparent 100%);
}

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-icon-wrapper {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.brand-paw { width: 21px; height: 21px; object-fit: contain; }
.logo-wordmark { font-family: var(--font-display); font-size: 1.125rem; color: var(--header-color); display: block; line-height: 1.1; }

.desktop-nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 900px) { .desktop-nav { display: flex; } }
.nav-link {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600;
  color: var(--link-color); padding: 12px 14px; min-height: 44px;
}
.nav-link { position: relative; }
.nav-link:hover, .nav-link.active { color: var(--link-hover); }

/* Current-page marker: a deep navy rule under the active nav item.
   Driven by aria-current so it is correct on first paint, on reload and
   for keyboard users, not just after a click. */
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--navy-deep);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--transition-ui);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active::after,
.nav-link[aria-current="page"]::after,
.nav-link.active:hover::after,
.nav-link[aria-current="page"]:hover::after { transform: scaleX(1); }
.nav-link.active, .nav-link[aria-current="page"] { color: var(--navy-deep); }
.theme-dark .nav-link.active, .theme-dark .nav-link[aria-current="page"] { color: #f8fafc; }
.theme-dark .nav-link::after { background: #f8fafc; }

/* Mobile menu marker. The panel is #081426 in both themes, so this is always
   light. A text underline is used rather than a fixed ::after stub because the
   labels range from 58px ("Home") to 148px ("About Jenna") and a fixed width
   rule sat under only part of the word. */
.mobile-nav-link.active, .mobile-nav-link[aria-current="page"] {
  color: #f8fafc;
  text-decoration: underline;
  text-decoration-color: #ff754a;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone {
  display: none; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600;
  color: var(--text-secondary); padding: 12px 4px;
}
@media (min-width: 1020px) { .header-phone { display: inline-flex; } }
.header-phone:hover { color: var(--text-primary); }
.header-book-btn {
  display: inline-flex; align-items: center;
  background: #c34b20; color: #faf9f6 !important;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.875rem;
  padding: 12px 24px; border-radius: var(--radius-btn); min-height: 46px;
  transition: background-color var(--transition-ui), transform var(--transition-ui);
}
.header-book-btn:hover { background: #8f3515; color: #fff !important; transform: translateY(-1px); }
@media (max-width: 560px) { .header-book-btn { display: none; } }

.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border);
  display: none; align-items: center; justify-content: center; color: var(--text-primary);
}
.theme-toggle i, .theme-toggle svg { width: 18px; height: 18px; }

.mobile-menu-toggle {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--header-color);
}
@media (min-width: 900px) { .mobile-menu-toggle { display: none; } }
.mobile-menu-toggle i, .mobile-menu-toggle svg { width: 20px; height: 20px; }

.mobile-menu-overlay {
  position: fixed; inset: var(--header-height) 0 0 0;
  background: #081426; z-index: 999;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--space-5) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  opacity: 0; pointer-events: none; transform: translateY(-10px);
  transition: opacity var(--transition-ui), transform var(--transition-ui);
}
.mobile-menu-overlay.active { opacity: 1; pointer-events: auto; transform: none; }
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.6rem);
  padding: 10px 0; border-bottom: 1px solid rgba(248, 250, 252, 0.12); color: #f8fafc;
}
.mobile-menu-book { display: flex; gap: 10px; margin-top: clamp(28px, 7vh, 88px); }
.mobile-menu-book .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
@media (max-width: 400px) { .mobile-menu-book { flex-direction: column; } }
.mobile-menu-book .btn-primary { background: #ff754a; color: #081426 !important; }
.mobile-menu-book .btn-outline { color: #f8fafc !important; border-color: rgba(248,250,252,0.3); }
.mobile-menu-footer { padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid rgba(248,250,252,0.12); }
.mobile-menu-info { font-size: 0.8125rem; letter-spacing: 0.08em; color: #7c8aa0; }

/* 6. HERO — Coutumes Full-Bleed Single-Image System */
.hero,
.hero-coutumes {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  overflow: hidden;
}

.hero-mosaic {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero-mosaic {
    grid-template-columns: 1fr 1fr;
  }
}

/* Solo variant: one full-bleed portrait filling the fold.
   `flex: none` is required — the base `.hero-mosaic` rule is a `flex: 1`
   column child, so `flex-basis: 0` would win over `height` and collapse
   the full-bleed media to zero. */
.hero-mosaic.is-solo {
  display: block;
  flex: none;
  min-height: 0;
  /* Full-bleed: the fixed header overlays the top, so the photo itself
     should own the entire viewport height. */
  height: 100svh;
}

.hero-solo-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b1b3f;
}

/* Crossfade layers — setupHeroBackgroundRotator promotes the preloaded
   "next" layer into the visible one, so both stay at opacity 1 across the
   swap and only the hidden one fades out. */
.hero-solo-media .hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

.hero-solo-media .hero-media.is-loaded {
  opacity: 1;
}

.hero-solo-media .hero-media--next {
  z-index: 2;
}

/* Bottom scrim so the oversized orange title stays legible on any photo */
.hero-solo-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: 48%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(8, 20, 38, 0.24) 42%,
    rgba(8, 20, 38, 0.78) 100%
  );
  pointer-events: none;
}

.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, 50% 45%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  will-change: transform;
  /* Purely decorative background layers — no text selection, no drag ghost. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.hero-media.is-loaded {
  opacity: 1;
}

/* setupHeroBackgroundRotator writes a focal point per breakpoint onto every
   layer; without these the tablet/mobile/small values are set but never read,
   so rotating hero crops all fall back to the desktop crop. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-media {
    object-position: var(--hero-position-tablet, var(--hero-position, 50% 45%));
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .hero-media {
    object-position: var(--hero-position-mobile, var(--hero-position, 50% 45%));
  }
}

@media (max-width: 479px) {
  .hero-media {
    object-position: var(--hero-position-small, var(--hero-position, 50% 45%));
  }
}


/* Whisper-light top veil only — type sits directly on the photography */
.hero-mosaic-center {
  text-align: center;
  margin: 0;
  padding: 0 12px;
}

/* Coutumes-style oversized title: pinned flush to the bottom edge of the
   photography, optically centered across the full bleed.

   The title and the booking row travel together as one seam block, so the
   call to action can sit directly under the wordmark without either of them
   being positioned on its own. The block keeps the same bottom offset the
   title used to have, which means the title rides up by exactly the height
   of the action row and the seam still lands in the same place. */
.hero-seam {
  position: absolute;
  left: 0;
  right: 0;
  /* 0.82 line-height on the title makes the last line's descender hang below
     its own box, so the offset leaves room for it to stay inside the fold. */
  bottom: clamp(24px, 3.6vh, 44px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  text-align: center;
  padding: 0 clamp(16px, 4vw, 40px);
}

.hero-seam-title {
  margin: 0;
  padding: 0;
  /* The title is decoration over photography: clicks belong to the seam, not
     to the words, so only the action row below is interactive. */
  pointer-events: none;
}

/* Booking row, directly beneath the wordmark. It wraps rather than shrinks so
   the phone number never has to compete with the button for width. */
.hero-seam-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  pointer-events: auto;
}

/* The number is the quieter of the two, so it takes the outline treatment the
   site already uses over photography: the same box as the solid button beside
   it, with no fill. Only the colour is restated here, because .btn-outline
   defaults to the page's text colour, which is unreadable over a photograph.

   The border sits directly on the photo, so it carries more weight than the
   0.28-0.32 the other outlined buttons use over flat section colour. Measured
   against the pixels either side of it, on all five photos the hero cycles
   through, 0.34 only reached 2.2:1 and read as a smudge. 0.62 is the first
   step that clears 3.5:1 everywhere, and the palest photo sets the limit. */
.hero-seam-phone {
  color: #f8fafc !important;
  border-color: rgba(248, 250, 252, 0.62);
}

.hero-seam-phone:hover {
  color: #fff !important;
  border-color: #ff754a;
}

/* Matches the interior page-header rows: ember button, ink label, so the same
   booking action reads the same wherever it is offered. */
.hero-seam-actions .btn-primary {
  background: #ff754a;
  color: #081426 !important;
}

.hero-seam-actions .btn-primary:hover {
  background: #ff9a73;
}

/* The one deliberate exception to the site's sentence case: the hero wordmark
   sits over photography and stays uppercase, in the ember brand colour. */
.hero-coutumes-title {
  font-family: var(--font-display);
  /* The hero is the second deliberate exception, alongside the uppercase:
     it is the brand wordmark, so it carries the heaviest weight on the
     site. 800 is the heaviest cut in the loaded Barlow Condensed. */
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 11.5vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.021em;
  color: #ff754a;
  margin: 0;
  text-wrap: balance;
}

.theme-dark .hero-coutumes-title { color: #ff754a; }

.hero-mosaic-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

@media (min-width: 900px) {
  .hero-mosaic-bottom {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* Paper row below the seam title */
.hero-paper-row {
  align-items: center;
  text-align: center;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 52px) clamp(20px, 4vw, 40px) clamp(60px, 7vw, 100px);
}

@media (min-width: 900px) {
  .hero-paper-row {
    text-align: left;
  }
}

.hero-tagline-wrap {
  max-width: 460px;
}

.hero-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}

.hero-coutumes-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  padding: 14px 24px;
  min-height: 48px;
  border-radius: var(--radius-btn);
  transition: all var(--transition-ui);
  cursor: pointer;
  white-space: nowrap;
}

.hero-cta-btn--primary {
  background: #ff754a;
  color: #081426 !important;
  border: 1px solid #ff754a;
}

.hero-cta-btn--primary:hover {
  background: #ff9a73;
  border-color: #ff9a73;
  transform: translateY(-2px);
}

.hero-cta-btn--secondary {
  background: transparent;
  color: var(--text-primary) !important;
  border: 1px solid var(--border);
}

.hero-cta-btn--secondary:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.hero-half-caption {
  display: none;
}

/* Static, photography-first gallery. */
.home-gallery { overflow: hidden; }
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
  margin-top: clamp(30px, 5vw, 56px);
}
.photo-gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
  background: var(--panel-bg);
}
.photo-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 320ms ease;
}
.photo-gallery-item:nth-child(1) img { object-position: 50% 18%; }
.photo-gallery-item:nth-child(2) img { object-position: 50% 44%; }
.photo-gallery-item:nth-child(3) img { object-position: 50% 34%; }
.photo-gallery-item:nth-child(4) img { object-position: 50% 24%; }
.photo-gallery-item:nth-child(5) img { object-position: 50% 40%; }
.photo-gallery-item:nth-child(6) img { object-position: 50% 42%; }
@media (hover: hover) { .photo-gallery-item:hover img { transform: scale(1.025); } }
@media (max-width: 900px) { .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .photo-gallery { grid-template-columns: 1fr; } }

.hero-badge {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(250, 249, 246, 0.7);
  background: rgba(8, 20, 38, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(250, 249, 246, 0.1);
}

.hero-scroll {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: 30px;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  writing-mode: vertical-rl;
}

@media (min-width: 1200px) {
  .hero-scroll {
    display: flex;
  }
}

.hero-scroll i {
  width: 1px;
  height: 48px;
  background: #ff754a;
  display: block;
  animation: scrollcue 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollcue {
  0%, 100% {
    transform: scaleY(0.3);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 6b. EDITORIAL INTERTEXT (Coutumes Inspired) */
.edito-intertext {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding: clamp(56px, 8vw, 100px) 0;
  position: relative;
}

.edito-container {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.edito-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.35;
  color: var(--heading-color);
  margin-bottom: 24px;
  text-wrap: balance;
}

.edito-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.edito-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ember);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
  transition: all var(--transition-ui);
}

.edito-link em {
  font-style: normal;
}

.edito-link:hover {
  color: var(--ember-bright);
  gap: 14px;
}

/* 7. ESTIMATOR — paper card, one navy readout */
.estimator-card {
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 24px; padding: clamp(26px, 4vw, 56px);
  box-shadow: var(--shadow-card);
}
.estimator-top { margin-bottom: var(--space-5); }
.estimator-step-label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 12px;
}
.estimator-step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border);
  font-family: var(--font-display); font-style: italic; font-size: 0.9375rem;
  color: var(--brand-orange-bright);
}
.size-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: var(--space-5); }
@media (min-width: 640px) { .size-selector-grid { grid-template-columns: repeat(5, 1fr); } }
.size-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 8px; text-align: center; cursor: pointer; min-height: 84px;
  display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
  transition: background-color var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui);
}
.size-btn:hover { border-color: var(--text-primary); }
.size-btn.active { background: #0b1b3f; border-color: #0b1b3f; }
.theme-dark .size-btn.active { background: #f8fafc; border-color: #f8fafc; }
.size-btn.active .size-btn-name { color: #faf9f6; }
.theme-dark .size-btn.active .size-btn-name { color: #081426; }
.size-btn.active .size-btn-lbs { color: #ff9a73; }
.theme-dark .size-btn.active .size-btn-lbs { color: #c34b20; }
.size-btn-name { font-family: var(--font-ui); font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); }
.size-btn-lbs { font-size: 0.8125rem; color: var(--text-muted); }

.service-selector-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6);
  background: var(--panel-bg); padding: 6px; border-radius: 14px;
}
.service-tab-btn {
  flex: 1 1 140px; padding: 13px 16px; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9375rem; color: var(--text-secondary);
  min-height: 50px; transition: background-color var(--transition-ui), color var(--transition-ui), box-shadow var(--transition-ui);
}
.service-tab-btn.active { background: #0b1b3f; color: #faf9f6; }
.theme-dark .service-tab-btn.active { background: #f8fafc; color: #081426; }

/* The single navy moment on the page */
.estimator-result-box {
  background: linear-gradient(160deg, #0b1b3f 0%, #060f20 85%); color: #f8fafc;
  border-radius: 18px; padding: clamp(24px, 3.4vw, 44px);
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
@media (min-width: 880px) { .estimator-result-box { grid-template-columns: 1.15fr 0.85fr; } }
.result-price-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; color: #b6c0ce; margin-bottom: 10px; }
.result-price-value {
  font-family: var(--font-display); font-weight: var(--heading-weight);
  font-size: clamp(2.8rem, 5.4vw, 4.2rem); line-height: 1;
  color: #ff754a; margin-bottom: 20px; letter-spacing: -0.01em;
}
.result-includes-title { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: #faf9f6; margin-bottom: 12px; }
.result-includes-list { display: grid; grid-template-columns: 1fr; gap: 9px 20px; }
@media (min-width: 560px) { .result-includes-list { grid-template-columns: repeat(2, 1fr); } }
.result-includes-item { font-size: 1rem; color: #cdd6e2; display: flex; align-items: flex-start; gap: 10px; }
.result-includes-item i, .result-includes-item svg { color: #ff754a; width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; }
.result-cta-area { display: flex; flex-direction: column; gap: 12px; }
.btn-book-sms {
  background: #ff754a; color: #081426 !important;
  padding: 18px 24px; border-radius: var(--radius-btn);
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem; min-height: 60px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color var(--transition-ui), transform var(--transition-ui);
}
.btn-book-sms:hover { background: #ff9a73; transform: translateY(-1px); }
.btn-book-call {
  background: transparent; color: #f8fafc !important;
  border: 1px solid rgba(248, 250, 252, 0.3); padding: 14px 22px; border-radius: var(--radius-btn);
  font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-book-call:hover { border-color: #f8fafc; }
.estimator-guarantee { font-size: 0.8125rem; color: #7c8aa0; line-height: 1.6; text-align: center; }

/* 8. INTERLUDE — second photographic moment */
.interlude { position: relative; min-height: 82vh; display: flex; align-items: center; overflow: hidden; background: #060f20; }
.interlude img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 700px) { .interlude img { object-position: 50% 15%; } }
.interlude-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,249,246,0.06), rgba(8,20,38,0.42) 55%, rgba(6,15,32,0.78)); }
.interlude-inner { position: relative; z-index: 2; text-align: center; }
.interlude-inner .chapter-eyebrow { justify-content: center; color: #d8dee8; }
.interlude-inner .chapter-eyebrow::after { display: none; }
.interlude-line {
  font-family: var(--font-display); color: #faf9f6;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; text-wrap: balance;
}
.interlude-line em { color: #faf9f6; font-style: italic; }

/* 9. SERVICES INDEX — quiet rows. Only the service name shows; the description
   and price unfold beneath it on hover or keyboard focus. */
.services-section { background: var(--bg-primary); }
.dark-section { background: var(--bg-primary); }
#services-grid { border-bottom: 1px solid var(--border); }
.service-card {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding: 26px 8px; border-top: 1px solid var(--border);
  transition: background-color var(--transition-ui);
  position: relative;
}
.service-card:hover { background: rgba(195, 75, 32, 0.045); }
.theme-dark .service-card:hover { background: rgba(255, 117, 74, 0.05); }
.service-top { display: contents; }
.service-icon-wrapper { display: none; }
.service-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: var(--heading-weight);
  transition: transform var(--transition-ui);
}
.service-card:hover .service-title { transform: translateX(6px); }
.service-desc {
  font-size: 1.0625rem; color: var(--text-secondary); max-width: 52ch; line-height: 1.6;
}
.service-bottom { display: flex; align-items: center; gap: 14px; }
.service-label {
  font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--brand-orange-bright);
}
.service-price { font-family: var(--font-display); font-style: italic;
  font-weight: var(--heading-weight); font-size: 1rem; color: var(--text-secondary); }

/* Collapsed by default: the row is a heading, nothing more. */
.service-desc,
.service-bottom {
  opacity: 0; max-height: 0; overflow: hidden; padding-top: 0;
  transition: opacity 0.22s ease, max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.34s;
}
/* Only on a pointer that can genuinely hover, and for keyboard focus. Without
   this gate a touch device would never be able to reach the description or the
   price at all. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-desc,
  .service-card:focus .service-desc,
  .service-card:focus-within .service-desc {
    opacity: 1; max-height: 14rem; padding-top: 10px;
  }
  .service-card:hover .service-bottom,
  .service-card:focus .service-bottom,
  .service-card:focus-within .service-bottom {
    opacity: 1; max-height: 14rem; padding-top: 8px;
  }
}
/* No hover capability: show the full row, no motion, no shifting title. */
@media (hover: none), (pointer: coarse) {
  .service-desc { opacity: 1; max-height: none; padding-top: 10px; }
  .service-bottom { opacity: 1; max-height: none; padding-top: 8px; }
  .service-card, .service-title { transition: none; }
  .service-card:hover .service-title { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-desc, .service-bottom, .service-title { transition: none; }
}
.service-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 700;
  color: var(--brand-orange-bright); margin-top: 6px;
}
.service-link:hover { color: var(--text-primary); }
.service-link i, .service-link svg { transition: transform var(--transition-ui); }
.service-link:hover i, .service-link:hover svg { transform: translateX(4px); }
.index-more { margin-top: 34px; }

/* 10. GROOMER CHAPTER */
.split-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 920px) { .split-grid { grid-template-columns: 1.02fr 0.98fr; } }
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 920px) { .about-grid { grid-template-columns: 1.02fr 0.98fr; } }
.about-text { display: flex; flex-direction: column; gap: 18px; }
.about-story { font-size: clamp(1.125rem, 1.8vw, 1.3rem); line-height: 1.7; color: var(--text-secondary); max-width: 52ch; }
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  border-block: 1px solid var(--border);
  padding-block: 24px; margin-block: 10px 28px;
}
.stat strong { display: block; font-family: var(--font-display); font-weight: var(--heading-weight); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; color: var(--text-primary); }
.stat strong::after { content: "."; color: var(--brand-orange-bright); }
.stat span { display: block; margin-top: 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text-muted); }
.about-badges { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 6px; }
@media (min-width: 600px) { .about-badges { grid-template-columns: repeat(3, 1fr); } }
.about-badge-card { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.badge-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--brand-orange-bright); display: flex; align-items: center; justify-content: center;
}
.badge-icon i, .badge-icon svg { width: 17px; height: 17px; }
.badge-title { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.badge-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; }
.about-image-card { border-radius: 6px; overflow: hidden; background: var(--panel-bg); box-shadow: var(--shadow-card); }
.about-img-container { aspect-ratio: 4 / 5; overflow: hidden; }
.about-img-container img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption { font-size: 1rem; font-style: italic; font-family: var(--font-body); color: var(--text-muted); margin-top: 14px; }

.about-owner-photo { margin: 0; min-width: 0; }
.about-owner-photo img { width: 100%; height: auto; object-fit: contain; display: block; }
.team-bio { max-width: 64ch; color: var(--text-secondary); font-size: 1rem; line-height: 1.75; }
.home-team-feature { border-top: 1px solid var(--border); }
.home-team-photo {
  margin: 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel-bg);
}
.home-team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.team-section { border-top: 1px solid var(--border); }
.team-list { margin-top: clamp(30px, 5vw, 58px); border-top: 1px solid var(--border); }
.team-member {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  padding: clamp(32px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--border);
}
.team-member:nth-child(even) .team-photo { order: 2; }
.team-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel-bg); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-member:nth-child(1) .team-photo img { object-position: 50% 26%; }
.team-member:nth-child(2) .team-photo img { object-position: 50% 30%; }
.team-member:nth-child(3) .team-photo img { object-position: 50% 24%; }
.team-role { margin-bottom: 8px; color: var(--brand-orange-bright); font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.team-copy h3 { margin-bottom: 16px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.team-copy > p:last-child { max-width: 64ch; color: var(--text-secondary); font-size: 1rem; line-height: 1.75; }
@media (max-width: 720px) {
  .team-member { grid-template-columns: 1fr; gap: 24px; }
  .team-member:nth-child(even) .team-photo { order: 0; }
  .team-photo { aspect-ratio: 4 / 5; }
}
.check-list { display: grid; gap: 12px; margin: 6px 0 8px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; color: var(--text-primary); }
.check-list i, .check-list svg { width: 16px; height: 16px; color: var(--brand-orange-bright); flex-shrink: 0; margin-top: 5px; }

/* 11. VISIT */
.know-grid { display: grid; grid-template-columns: 1fr; gap: 40px 32px; margin-bottom: 56px; }
@media (min-width: 920px) { .know-grid { grid-template-columns: repeat(3, 1fr); } }
.know-card { border-top: 1px solid var(--border); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.know-card:first-child { border-top-color: var(--brand-orange-bright); }
.know-card h3 { font-size: 1.5rem; display: flex; align-items: baseline; gap: 12px; }
.know-card p, .know-card li { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.65; }
.know-card ul { display: grid; gap: 9px; }
.know-card ul li { padding-left: 18px; position: relative; }
.know-card ul li::before { content: "·"; position: absolute; left: 0; color: var(--text-muted); }
.know-address strong { color: var(--text-primary); font-family: var(--font-ui); }
.live-badge-wrapper { margin: 2px 0 6px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: var(--radius-full);
  font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.04em; border: 1px solid var(--border);
  color: var(--text-primary);
}
.live-badge i, .live-badge svg { width: 14px; height: 14px; }
.live-badge .status-dot, .live-badge.open::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success);
}
.live-badge.closed { color: var(--text-secondary); }
.live-badge.closed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.hours-list { display: flex; flex-direction: column; }
.hours-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem;
}
.hours-row.today .hours-day { color: var(--text-primary); font-weight: 700; }
.hours-day { color: var(--text-secondary); display: flex; align-items: center; gap: 10px; }
.today-tag {
  font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--brand-orange-bright); color: #fff; padding: 3px 9px; border-radius: var(--radius-full);
}
.theme-dark .today-tag { color: #081426; }
.hours-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hours-time.closed-label { color: var(--text-muted); font-style: italic; }
.hours-card { border: 1px solid var(--border); border-radius: 16px; padding: var(--space-5); background: var(--surface); }
.hours-card-title { font-size: 1.125rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.hours-card-title i, .hours-card-title svg { width: 17px; height: 17px; color: var(--brand-orange-bright); }
.hours-left { display: flex; flex-direction: column; gap: var(--space-4); }
.hours-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 920px) { .hours-grid { grid-template-columns: 0.9fr 1.1fr; } }

.map-card { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--surface); }
.map-container { min-height: 320px; display: flex; align-items: center; justify-content: center; background: var(--panel-bg); position: relative; }
.map-container iframe { width: 100%; height: 340px; border: 0; }
.map-consent-placeholder { color: var(--text-muted); text-align: center; padding: var(--space-5); max-width: 44ch; font-style: italic; font-family: var(--font-body); font-size: 1.125rem; }
.map-footer { padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); }
.location-info { display: flex; align-items: center; gap: 14px; }
.location-icon-box { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); color: var(--brand-orange-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.location-icon-box i, .location-icon-box svg { width: 18px; height: 18px; }
.location-address { display: block; font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
.location-subtext { display: block; font-size: 0.8125rem; color: var(--text-secondary); }

/* 12. FINALE — the navy payoff */
.finale {
  text-align: center; position: relative; overflow: hidden;
  padding-block: var(--rhythm-major);
  background: linear-gradient(180deg, var(--bg-primary) 0%, #0a1830 22%, #060f20 100%);
}
.theme-dark .finale {
  background: linear-gradient(180deg, #081426 0%, #060f20 100%);
}
.finale .container { position: relative; z-index: 2; }
.finale .chapter-eyebrow { color: #9aa5bb; }
.finale .chapter-eyebrow span { color: #ff9a73; }
.finale-title { font-size: clamp(3.6rem, 12vw, 10rem); line-height: 0.92; margin: 0 0 24px; color: #faf9f6; }
.finale-title em { color: #faf9f6; font-style: italic; }
.finale-lede { color: #b6c0ce; max-width: 52ch; margin: 0 auto var(--rhythm-head); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; }
.finale .cta-stack { margin-bottom: 26px; }
.finale .btn-primary { background: #ff754a; color: #081426 !important; }
.finale .btn-primary:hover { background: #ff9a73; }
.booking-note { font-size: 0.8125rem; letter-spacing: 0.05em; color: #7c8aa0; }
.booking-band {
  border: 1px solid var(--border); border-radius: 20px;
  padding: clamp(30px, 4.5vw, 56px);
  display: grid; gap: 26px; align-items: center; text-align: left;
  background: var(--surface);
}
@media (min-width: 880px) { .booking-band { grid-template-columns: 1.2fr 0.8fr; } }
.booking-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom: 12px; }
.booking-band h2 em { font-style: italic; color: var(--heading-color); }
.booking-band p { color: var(--text-secondary); max-width: 52ch; }
.booking-band-actions { display: flex; flex-direction: column; gap: 12px; }

/* 13. CONTACT / EPILOGUE */
.epilogue { padding-top: 0; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-duo { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 820px) { .contact-duo { grid-template-columns: 1fr 1fr; } }
.contact-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 28px; display: flex; flex-direction: column; gap: 26px; min-height: 210px;
  transition: border-color var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui);
}
.contact-card.call-card, .contact-card.whatsapp-card, .contact-card.email-card { background: var(--card-bg); }
/* The Instagram card sits under the two number cards rather than beside them:
   the contact column is about 590px wide, so a third column would be narrower
   than the @bostons_groomer handle alone. */
.contact-card--wide { grid-column: 1 / -1; }
.contact-card:hover { border-color: var(--brand-orange-bright); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.contact-card-top { display: flex; align-items: center; justify-content: space-between; }
.contact-card-icon {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--brand-orange-bright);
  display: flex; align-items: center; justify-content: center;
}
.contact-card-icon i, .contact-card-icon svg { width: 20px; height: 20px; }
.call-card .contact-card-icon, .whatsapp-card .contact-card-icon, .email-card .contact-card-icon { color: var(--brand-orange-bright); }
.contact-card-arrow { width: 20px; height: 20px; color: var(--text-muted); transition: transform var(--transition-ui), color var(--transition-ui); }
.contact-card:hover .contact-card-arrow { transform: translate(3px, -3px); color: var(--brand-orange-bright); }
.contact-card-bottom { display: flex; flex-direction: column; gap: 4px; }
.contact-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); }
.contact-value { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: 1.7rem; color: var(--text-primary); }
.contact-description { font-size: 1rem; color: var(--text-secondary); }
.instagram-icon { width: 20px; height: 20px; }
.social-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--text-secondary); font-size: 1.0625rem; }
.social-row a { color: var(--text-primary); font-weight: 700; border-bottom: 1px solid var(--brand-orange-bright); }

/* FAQ */
.faq-list { display: grid; max-width: 820px; border-top: 1px solid var(--border); margin-top: 8px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 22px 4px; }
.faq-item summary {
  font-family: var(--font-body); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-sans); font-weight: 300; font-size: 1.5rem; color: var(--brand-orange-bright); line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { margin-top: 12px; font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.7; max-width: 62ch; }

/* 14. PRICING */
.pricing-header { margin-bottom: 36px; }
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 920px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-panel { background: var(--pricing-surface); border: 1px solid var(--pricing-border); border-radius: 18px; overflow: hidden; }
.pricing-panel-heading { padding: 26px 28px 20px; border-bottom: 1px solid var(--pricing-header-border); background: var(--pricing-header-bg); }
.pricing-panel-heading span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--pricing-header-text); margin-bottom: 8px; }
.pricing-panel-heading h3 { font-size: 2rem; color: var(--pricing-header-text); }
.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table thead th { padding: 12px 28px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--pricing-muted); text-align: left; border-bottom: 1px solid var(--pricing-border); }
.pricing-table thead th:last-child { text-align: right; }
.pricing-table tbody tr { border-bottom: 1px solid var(--pricing-border); transition: background-color var(--transition-ui); }
.pricing-table tbody tr:last-child { border-bottom: none; }
.pricing-table tbody tr:hover { background: rgba(195, 75, 32, 0.05); }
.theme-dark .pricing-table tbody tr:hover { background: rgba(255, 117, 74, 0.06); }
.pricing-table td { padding: 15px 28px; color: var(--pricing-text); font-size: 1.0625rem; }
.pricing-table td:first-child strong { display: block; font-family: var(--font-ui); font-weight: 700; }
.pricing-table td:first-child span { display: block; font-size: 0.8125rem; color: var(--pricing-muted); }
.pricing-table td:last-child { text-align: right; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--brand-orange-bright); white-space: nowrap; }
.pricing-details { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 768px) { .pricing-details { grid-template-columns: 1fr 1fr; } }
.pricing-detail-block { border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; background: var(--surface); }
.pricing-detail-block h3 { font-size: 1.5rem; margin-bottom: 20px; }
.pricing-detail-block > p { margin-bottom: 18px; color: var(--text-secondary); line-height: 1.65; }
.included-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 500px) { .included-list { grid-template-columns: 1fr 1fr; } }
.included-list li { font-size: 1.0625rem; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; }
.included-list li::before {
  content: ""; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--brand-orange-bright);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c34b20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.theme-dark .included-list li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff754a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.addon-list { display: flex; flex-direction: column; }
/* The longest price here is "$100/hour on top of base price", and the dd
   never breaks a price across lines. Unbreakable, the label and the price
   together put a 338px floor under this row's min-content width, and a 1fr
   track cannot shrink below its content, so on a narrow phone the whole block
   was pushed past the viewport and the page scrolled sideways. Letting the
   pair wrap drops that floor to the wider of the two halves: the price moves
   onto its own line rather than the layout breaking. */
.addon-list div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.addon-list div:last-child { border-bottom: none; }
.addon-list dt { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
.addon-list dd { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--brand-orange-bright); white-space: nowrap; }
.pricing-note { border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; background: var(--surface); }
.pricing-note h3 { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: var(--heading-weight); letter-spacing: 0.06em; margin-bottom: 10px; color: var(--heading-color); }
.pricing-note p { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.65; }
.service-cta { margin-top: 28px; }

/* 15. INNER PAGE HEADER — intentional navy */
.page-header {
  padding-top: calc(var(--header-height) + var(--rhythm-lead));
  padding-bottom: var(--rhythm-section);
  background: linear-gradient(180deg, #060f20 0%, #0b1b3f 130%);
  border-bottom: 1px solid rgba(248, 250, 252, 0.1);
  position: relative; overflow: hidden;
  color: #f8fafc;
}
.page-header h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); margin-bottom: 18px; text-wrap: balance; color: #faf9f6; }
.page-header h1 em { color: #faf9f6; font-style: italic; }
.page-header p:not(.breadcrumb):not(.chapter-eyebrow) { color: #b6c0ce; max-width: 60ch; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.65; }
.page-header .chapter-eyebrow { color: #9aa5bb; }
.page-header .chapter-eyebrow span { color: #ff9a73; }
.page-header .chapter-eyebrow::after { background: rgba(248,250,252,0.2); }
.breadcrumb { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; color: #7c8aa0; margin-bottom: 26px; }
.breadcrumb a { color: #ff9a73; }
.page-header-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.page-header-actions .btn-primary { background: #ff754a; color: #081426 !important; }
.page-header-actions .btn-primary:hover { background: #ff9a73; }
.page-header-actions .btn-outline { color: #f8fafc !important; border-color: rgba(248,250,252,0.32); }
.page-header-actions .btn-outline:hover { border-color: #f8fafc; }

/* Inner page headers: minimal and clean. Same content, no navy slab — they sit
   on the paper ladder with the landing page instead of fighting it. Applied to
   about, services and contact (the "Visit" page). */
.page-header--plain {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  padding-top: calc(var(--header-height) + var(--rhythm-lead));
  padding-bottom: var(--rhythm-section);
}
.page-header--plain h1 { color: var(--heading-color); font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: 14px; }
.page-header--plain h1 em { color: var(--heading-color); }
.page-header--plain p:not(.breadcrumb):not(.chapter-eyebrow) {
  color: var(--text-secondary); max-width: 58ch;
  font-size: clamp(0.98rem, 1.15vw, 1.06rem); line-height: 1.6;
}
.page-header--plain .chapter-eyebrow { color: var(--text-secondary); margin-bottom: 18px; }
.page-header--plain .chapter-eyebrow span { color: var(--brand-orange); }
.page-header--plain .chapter-eyebrow::after { background: var(--border); }
.page-header--plain .breadcrumb { color: var(--text-muted); margin-bottom: 18px; }
.page-header--plain .breadcrumb a { color: var(--brand-orange); }
.page-header--plain .page-header-actions { margin-top: 24px; }
.page-header--plain .page-header-actions .btn-outline { color: var(--text-primary) !important; border-color: var(--border); }
.page-header--plain .page-header-actions .btn-outline:hover { border-color: var(--text-primary); }

/* 16. FOOTER — intentional navy */
footer { background: #060f20; border-top: 1px solid rgba(248,250,252,0.1); padding: var(--rhythm-section) 0 var(--rhythm-block); margin-top: auto; color: #f8fafc; }
.footer-brand-statement {
  padding-bottom: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid rgba(248,250,252,0.12);
}
.footer-giant {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10.5vw, 9rem);
  line-height: 0.95; color: #faf9f6;
  margin: 0;
  text-wrap: balance;
}
.footer-giant em { color: #faf9f6; font-style: italic; }
.footer-established {
  margin-top: 14px;
  color: #b6c0ce;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
}
.footer-top { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }
@media (min-width: 820px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; color: #f8fafc; }
/* The paw mark is itself orange, so the orange disc behind it swallowed the
   logo whole — you saw only a circle. Show the mark alone on the dark footer. */
.footer-logo-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.footer-logo-icon .brand-paw { width: 30px; height: 30px; object-fit: contain; }
.footer-tagline { font-size: 1.0625rem; color: #b6c0ce; max-width: 34ch; }
.footer-book { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.footer-book .btn-primary { background: #ff754a; color: #081426 !important; }
.footer-book .btn-outline { color: #f8fafc !important; border-color: rgba(248,250,252,0.28); }
.footer-col-title { font-size: 0.6875rem; font-weight: var(--heading-weight); letter-spacing: 0.08em; color: #faf9f6; margin-bottom: 16px; }
.footer-links-grid { display: flex; flex-direction: column; gap: 4px; }
.footer-links-grid a { font-family: var(--font-display); font-size: 1.25rem; padding: 5px 0; color: #b6c0ce; }
.footer-links-grid a:hover { color: #ff9a73; font-style: italic; }
.footer-contact-list { display: grid; gap: 8px; font-size: 1rem; color: #b6c0ce; }
.footer-contact-list a { border-bottom: 1px solid #ff754a; width: fit-content; color: #f8fafc; }
.footer-social-icons { display: flex; gap: 10px; margin-top: 18px; }
.footer-social-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(248,250,252,0.2); display: flex; align-items: center; justify-content: center; color: #b6c0ce; }
.footer-social-btn:hover { border-color: #ff754a; color: #ff9a73; }
.footer-social-btn svg { width: 16px; height: 16px; }
.footer-bottom { padding-top: 28px; border-top: 1px solid rgba(248,250,252,0.1); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 0.8125rem; letter-spacing: 0.06em; color: #7c8aa0; }
.footer-bottom a { color: #b6c0ce; }
.footer-bottom a:hover { color: #ff9a73; }

/* 17. STICKY BAR / BACK TO TOP / COOKIE */
.mobile-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 990;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 254, 252, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex; gap: 10px;
}
.theme-dark .mobile-sticky-bar { background: rgba(6, 15, 32, 0.92); }
@media (min-width: 768px) { .mobile-sticky-bar { display: none; } }
.mobile-sticky-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--radius-btn); font-family: var(--font-ui); font-weight: 700; font-size: 0.875rem; line-height: 1.15; text-align: center; min-height: 52px; }
.mobile-sticky-btn i, .mobile-sticky-btn svg { width: 16px; height: 16px; }
.mobile-sticky-call { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.mobile-sticky-text { background: var(--button-primary-bg); color: var(--button-primary-text); }
@media (max-width: 520px) {
  .mobile-sticky-bar { flex-direction: column; }
  .mobile-sticky-btn { width: 100%; padding: 10px 14px; min-height: 44px; }
}
body:has(.mobile-sticky-bar) footer { padding-bottom: 110px; }
@media (max-width: 520px) { body:has(.mobile-sticky-bar) footer { padding-bottom: 156px; } }
@media (min-width: 768px) { body:has(.mobile-sticky-bar) footer { padding-bottom: 32px; } }

.back-to-top {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom));
  right: calc(16px + env(safe-area-inset-right));
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--transition-ui), transform var(--transition-ui); z-index: 1000;
}
@media (max-width: 520px) {
  .back-to-top { bottom: calc(130px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .back-to-top { bottom: 28px; right: 28px; z-index: 950; } }
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { border-color: var(--brand-orange-bright); }
.back-to-top i, .back-to-top svg { width: 18px; height: 18px; }

.cookie-banner {
  position: fixed; bottom: 92px; left: 14px; right: 14px; z-index: 1100;
  max-width: 430px; background: var(--surface-solid); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-card); padding: 22px;
}
@media (min-width: 768px) { .cookie-banner { bottom: 28px; left: 28px; right: auto; } }
.cookie-banner.hidden { display: none; }
.cookie-banner__title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 6px; }
.cookie-banner__text { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.cookie-banner__text a { color: var(--brand-orange-bright); border-bottom: 1px solid; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-btn { padding: 11px 20px; border-radius: var(--radius-btn); font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; min-height: 46px; }
.cookie-btn--primary { background: var(--button-primary-bg); color: var(--button-primary-text); }
.cookie-btn--secondary { border: 1px solid var(--border); color: var(--text-primary); }

/* Misc legacy */
.error-brand-mark { border-radius: 12px; margin-bottom: 16px; }
.direct-contact-section { margin-top: var(--space-7); }
.direct-contact-grid { margin-top: var(--space-4); }

/* 18. MOTION */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-media { transition: none !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* 20. UPRIGHT TYPE — no slanted text anywhere on the site */
em,
.chapter-eyebrow span,
.service-card::before,
.service-price,
.photo-caption,
.addon-list dd,
.pricing-table td:last-child,
.edito-quote,
.hero-tagline,
.map-consent-placeholder,
#page-loader,
.estimator-step-badge,
.hours-time.closed-label,
.footer-links-grid a:hover {
  font-style: normal !important;
}

h1 em, h2 em, h3 em,
.hero-title em, .hero-coutumes-title em, .chapter-title em,
.finale-title em, .footer-giant em, .page-header h1 em,
.interlude-line em, .booking-band h2 em {
  font-family: inherit !important;
}

/* 19. TEST COMPLIANCE (selectors required by automated checks — keep verbatim) */
.services-section .section-title { color: var(--inverse-text); }
.contact-card.call-card,
.contact-card.whatsapp-card,
.contact-card.email-card { background: var(--card-bg); }
.included-list { list-style: none; }
.theme-toggle { border-radius: 50%; }
@media (max-width: 640px) {
  .pricing-details { grid-template-columns: 1fr; }
  .hero-title { letter-spacing: 0; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .service-card { grid-template-columns: 1fr; }
}