/* ============================================================
   Cement Creek Veterinary Hospital
   Design system + homepage styles  (v2 — material + editorial)
   ============================================================ */

/* -----------------------------------------------------------
   01 — Tokens
   ----------------------------------------------------------- */
:root {
  /* Palette migrated to the homepage-mockup.html blue system
     (2026-05-27). Token NAMES kept stable so every existing
     var() reference re-skins automatically; only the VALUES
     changed. Mockup mapping noted per line. */
  --paper: #F9F7F4;        /* mockup --bg — warm off-white page background */
  --paper-warm: #d8edf5;   /* mockup --cyan-light — pale powder-blue section bg / gradient top */
  --paper-deep: #c2def0;   /* slightly deeper powder blue — orbs, chips, soft fills */
  --ink: #0f4060;          /* mockup --bg-dark — dark sections, footer, headings, labels */
  --ink-deep: #071e30;     /* mockup footer gradient end — darkest blue */
  --creek: #6bbfdb;        /* mockup --cyan — powder-blue accents on dark surfaces */
  --creek-deep: #0d96d4;   /* mockup --vivid-mid — buttons, active states, wave marks, underlines */
  --stone: #4a4850;        /* mockup --text-mid — secondary text */
  --stone-light: #9a97a0;  /* lighter secondary text */
  --stone-warm: #4a4850;   /* secondary text (warm slot retired into --text-mid) */
  --charcoal: #1e1d1f;     /* mockup --text — body text */
  --white: #FFFFFF;        /* mockup --bg-card — cards, lifted surfaces */
  --border: #E8E4DF;       /* mockup --border — warm subtle hairline */

  /* Type — Montserrat throughout per the v2 design brief
     (weights 300, 400, 500, 600, 700, 800). No serif face used
     anywhere on the site. Italic 400/500 covers the editorial
     italic moments (hero/closer emphasis spans). */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale — peaks at brief's specified pixel sizes on
     wide desktop, scales down on narrow screens. Brief: H1 48/800,
     H2 38/700, H3 30/700, CTA 42/700, FAQ q 18/600, body 17/400. */
  --fs-display: clamp(2.5rem, 1.8rem + 2.4vw, 3rem);     /* 40-48px hero/page H1 */
  --fs-h1: clamp(2.5rem, 1.8rem + 2.4vw, 3rem);          /* 40-48px page H1 */
  --fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.375rem);    /* 30-38px section H2 */
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);        /* 24-30px tab H3 */
  --fs-h4: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);       /* 18-20px */
  --fs-cta: clamp(2rem, 1.5rem + 2vw, 2.625rem);         /* 32-42px CTA heading */
  --fs-body: 1.0625rem;                                  /* 17px body */
  --fs-body-lg: 1.1875rem;                               /* 19px lede */
  --fs-small: 0.8125rem;                                 /* 13px eyebrows/topbar/captions */

  /* Spacing (8px base) */
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
  --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem;

  /* Layout */
  --container: 1280px;
  --container-narrow: 980px;
  --container-wide: 1440px;
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-xl: 48px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows — soft, photographic */
  --shadow-sm: 0 1px 2px rgba(15, 64, 96, 0.04), 0 6px 16px rgba(15, 64, 96, 0.04);
  --shadow-md: 0 2px 6px rgba(15, 64, 96, 0.06), 0 18px 40px rgba(15, 64, 96, 0.08);
  --shadow-lg: 0 4px 12px rgba(15, 64, 96, 0.08), 0 30px 80px rgba(15, 64, 96, 0.12);
  --shadow-print: 0 1px 1px rgba(15, 64, 96, 0.10), 0 10px 22px rgba(15, 64, 96, 0.12), 0 30px 60px rgba(15, 64, 96, 0.08);
}

/* -----------------------------------------------------------
   02 — Reset / base / paper-grain texture
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchor-link scroll offset — the sticky header-stack (topbar +
   main header) is ~155px tall. Without this, in-page anchor jumps
   (e.g. "See how we built it" → #everything-intentional) land the
   section's top edge AT the viewport top, hidden behind the header.
   scroll-margin-top tells the browser to leave space when scrolling
   to any anchored section in <main>. */
main section[id] { scroll-margin-top: 180px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: clip (not hidden) — `hidden` creates a scroll
     container that breaks `position: sticky` on descendants
     (the topbar + header). `clip` hides horizontal overflow
     without creating a scroll context, so sticky still works. */
  overflow-x: clip;
  position: relative;
}

/* Paper grain — subtle fixed noise overlay across the whole site.
   The site no longer feels like flat color, it feels like printed paper. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.42;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* Push real content above the texture overlay */
header, main, footer { position: relative; z-index: 2; }

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;            /* Montserrat 700 per brief — H2/H3/H4/H5 default. H1 bumps to 800 (set per-element). */
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
}
h1 { font-weight: 800; }      /* Brief: H1 = 48px / 800 weight. */
/* Brief: headings are a SINGLE weight + color — no accent words.
   em inside any heading inherits the heading's weight/color and is
   never italic. (Was an editorial light-italic treatment in v1.) */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-weight: inherit;
  font-style: normal;
  color: inherit;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--ink); color: var(--paper); }

/* -----------------------------------------------------------
   03 — Layout primitives
   ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  font-family: var(--font-body);
  /* Brief: section eyebrow labels — 13px / 700 / 0.14em tracking. */
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  /* Stack the wave-mark pseudo ABOVE the text (vertical flex-column)
     instead of placing it as a horizontal dash to the left. Matches
     the homepage-mockup.html "wave-mark + section-label" pattern. */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.eyebrow::before {
  /* 3-hump wave mark from homepage-mockup.html, sitting above the
     eyebrow text. Stroke is vivid blue (--creek-deep #0d96d4) so
     the mark reads as the same accent blue used for CTAs + the
     "intentional" headline underline. Path: up-down-up sine,
     viewBox 0 0 44 12. */
  content: '';
  width: 44px; height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12' fill='none'><path d='M1 8C8 5.5 14 5.5 21 8C28 10.5 34 10.5 41 8' stroke='%230d96d4' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
}

/* -----------------------------------------------------------
   04 — Photo card treatment (rounded, no polaroid)
   Clean rounded photo with soft shadow. Photo fills the card
   edge-to-edge. Captions sit as an overlay band at the bottom
   with a soft scrim so they read against any image.
   ----------------------------------------------------------- */
.photo-print {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);   /* 32px — generous rounded corners */
  box-shadow: var(--shadow-md);
  background: var(--paper-warm);     /* fallback while image loads */
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  margin: 0;
}
.photo-print:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.photo-print img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.photo-print--square > img { aspect-ratio: 1 / 1; }
.photo-print--portrait > img { aspect-ratio: 4 / 5; }
.photo-print--landscape > img { aspect-ratio: 16 / 10; }
.photo-print--tall > img { aspect-ratio: 3 / 4; }

/* Caption — overlay band along the bottom of the photo card.
   Vertical gradient (transparent at top → solid ink at bottom) so
   the caption color dissolves into the photo above instead of
   cutting it with a hard horizontal line. The taller top padding
   gives the fade room to read as atmospheric. */
.photo-print__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem 1.25rem 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-align: left;
  background: linear-gradient(
    to bottom,
    rgba(15, 64, 96, 0) 0%,
    rgba(15, 64, 96, 0.35) 35%,
    rgba(15, 64, 96, 0.78) 80%,
    rgba(15, 64, 96, 0.88) 100%
  );
}

/* -----------------------------------------------------------
   05 — Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.95rem 1.6rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.005em;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  white-space: nowrap; text-decoration: none; line-height: 1;
}
/* Mockup primary CTA — vivid blue (#0d96d4), deepening to
   midnight blue on hover. */
.btn--primary { background: var(--creek-deep); color: var(--white); }
.btn--primary:hover { background: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
/* Vivid Mid outline pill (brief): used for "View all services" below
   the homepage services grid + similar low-prominence CTAs. Fills
   to Vivid Mid on hover. */
.btn--outline {
  background: transparent;
  color: var(--creek-deep);
  border: 1.5px solid var(--creek-deep);
}
.btn--outline:hover { background: var(--creek-deep); color: var(--white); transform: translateY(-2px); }

/* GOOGLE REVIEWS section (brief — "From the community"). Three
   white cards in a centered grid on flat warm off-white. Vivid
   Mid star row, italic body, source + name footer. Placeholder
   copy in the HTML (data-todo) until real reviews land. */
/* TESTIMONIALS — 3-up white notecards on the Midnight Cove band.
   Keeps the box format the client liked, set on the deep navy
   (--ink #0f4060) so it's cohesive with the intentional + closer
   sections. White cards pop on the navy; wave seams on both sides
   (see .services-strip::after + .reviews::after) nest the dark band
   between the light services / FAQ sections. */
.reviews {
  background: var(--ink);
  /* Tighter top so the wave-mark/eyebrow sit closer under the wavy
     seam; more bottom room so the cards clear the wavy edge below. */
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(5.5rem, 9vw, 8rem);
  position: relative;
}
.reviews__head {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Wide enough to contain the one-line (nowrap) title so
     text-align:center can truly center it. The old 720px cap was
     narrower than the rendered Montserrat title (~830px), so the
     nowrap line overflowed to the right and read as off-center. */
  max-width: 1100px;
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.reviews__wave-mark {
  display: block;
  margin: 0 auto 0.85rem;
  color: var(--creek);          /* powder blue on the dark band */
}
.reviews__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creek);
}
.reviews__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0.75rem auto 0;
  /* One line per Brees (was capped at 22ch which wrapped it). */
  max-width: none;
  white-space: nowrap;
  color: var(--white);          /* white on the dark band */
}
@media (max-width: 760px) {
  .reviews__title { white-space: normal; max-width: 22ch; }
}
.reviews__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  align-items: stretch;
}
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 20px;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  /* Deeper shadow so the white cards lift cleanly off the navy. */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 18px 50px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 26px 64px rgba(0, 0, 0, 0.28);
}
.review-card__stars {
  color: var(--creek-deep);
  font-size: 1.0625rem;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}
.review-card__quote {
  /* Editorial italic, echoing the hero/closer voice — reads as a
     quote, not a help-desk ticket. */
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--charcoal);
  margin: 0 0 1.5rem;
  /* push the attribution to the card bottom so a row of cards lines
     up regardless of quote length */
  flex: 1 1 auto;
}
.review-card__quote::before { content: '\201C'; }
.review-card__quote::after  { content: '\201D'; }
.review-card__by {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15, 64, 96, 0.10);
}
.review-card__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
}
.review-card__loc {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--stone-warm, var(--charcoal));
}

@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* Services → FAQ wave seam REMOVED (Feedbucket 2026-06-05, Brees):
   it was a dark navy (#0f4060) bank that rose into the testimonial
   band, but reviews are now hidden, leaving an orphaned dark wave.
   Services + FAQ now share one continuous paper-warm → paper wash
   (services carries the gradient; .faq continues at its end color). */
/* Wave seam — bottom of reviews, filled with the FAQ's top color
   (--paper-warm #d8edf5) so the dark band lifts back into the light
   FAQ section. Mirrors intentional::after. */
.reviews::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%23d8edf5'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.btn--text {
  background: transparent; color: var(--ink); padding: 0; border-radius: 0;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; font-weight: 600;
}
.btn--text:hover { color: var(--creek-deep); }
.btn--arrow::after { content: '→'; margin-left: 0.25rem; transition: transform 0.3s var(--ease-out); }
.btn--arrow:hover::after { transform: translateX(4px); }

/* -----------------------------------------------------------
   06 — Header / topbar / nav
   ----------------------------------------------------------- */
/* Sticky stack — topbar + site-header travel together as one
   block. Sticky must be applied to a direct child of <body>
   (otherwise its parent's height bounds the stick — and the
   partial's #global-header div is only as tall as the header
   itself, giving sticky nowhere to stick). So both the outer
   #global-header AND the inner .site-header-stack get sticky,
   ensuring the block pins to the viewport whether the page
   targets the placeholder OR the inner wrapper. */
#global-header,
.site-header-stack {
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar {
  background: var(--ink);
  color: var(--paper);
  /* Brief: top bar — 13px / 600 weight. */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 50;
  /* 2.5px Vivid Mid hairline per brief — the "bookend with the
     footer" detail that ties the dark top bar to the nav CTA + the
     dark footer base. Do not remove. */
  border-bottom: 2.5px solid var(--creek-deep);
}
.topbar__inner {
  /* Full-width to match the header: chips centered on the PAGE,
     social icons pushed to the true right edge. spacer + social are
     equal-width (1fr) so the chips stay page-centered. */
  max-width: none;
  padding: 0.55rem clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 0.85rem;
}
.topbar__spacer { /* empty — just a grid placeholder to balance social column */ }
.topbar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.85rem;
}
.topbar__chip { opacity: 0.92; }
.topbar__chip--accent { color: var(--creek); font-weight: 600; }
.topbar__sep { opacity: 0.4; }

/* Topbar social cluster — right edge, paper-colored icons with
   a creek-cyan hover. Smaller than the header social icons used
   to be so the topbar stays slim. */
.topbar__social {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.topbar__social-link {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.topbar__social-link:hover {
  color: var(--creek);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.topbar__social-link svg { display: block; }
/* a11y: expand the tap target to ~44px without resizing the visible icon.
   The transparent centered pseudo-element catches taps; clicks bubble to the
   link. No layout shift (absolutely positioned) and no visual change. */
.topbar__social-link { position: relative; }
.topbar__social-link::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

@media (max-width: 640px) {
  /* Collapse the 3-col grid to a single column on phones — chips
     wrap and the social cluster stacks below. */
  .topbar__inner { grid-template-columns: 1fr; }
  .topbar__spacer { display: none; }
  .topbar__social { justify-content: center; }
}

.site-header {
  /* Stickiness is handled by .site-header-stack now — this element
     just flows inside the wrapper. Solid paper bg always so the
     header tone stays the same whether the user has scrolled past
     a different-colored section or not. A hairline ink rule +
     soft shadow at the bottom gives the header a visible edge
     against the same-colored page below it. */
  position: relative; z-index: 40;
  background: #ebebeb;
  border-bottom: 1px solid rgba(22, 59, 108, 0.10);
  box-shadow: 0 4px 12px rgba(15, 64, 96, 0.05);
  transition: background 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              backdrop-filter 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
}
/* Frosted translucent powder-blue state once the page scrolls
   past the hero — mimics the homepage mockup's sticky nav:
   #d8edf5 @ 88% + a 14px backdrop blur + a faint vivid-blue
   bottom hairline (#0d96d4 @ 25%). The dark topbar above stays
   solid; only this main header band turns to frosted glass. */
.site-header.is-scrolled {
  background: rgba(216, 237, 245, 0.88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: rgba(13, 150, 212, 0.25);
  box-shadow: 0 6px 24px rgba(15, 64, 96, 0.10);
}
.site-header__inner {
  /* Full-width header: logo hard left, nav centered, actions (phone +
     Book) hard right. 3-column grid — outer columns size to content,
     the center column flexes and centers the nav within it. */
  max-width: none;
  padding: 1rem clamp(1.5rem, 3vw, 2.75rem);
  /* 1fr auto 1fr → nav sits at the TRUE page center regardless of the
     logo / actions widths; logo hard left, actions hard right. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.site-header__brand { justify-self: start; }
.site-header__brand { display: inline-flex; align-items: center; }
/* Logo scaled up ~30% from 58px → 76px so it carries more
   presence in the sticky header. */
.site-header__logo { width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; transition: transform 0.4s var(--ease-out); }
.site-header__brand:hover .site-header__logo { transform: rotate(-3deg) scale(1.04); }

/* Nav sits in the center column and is centered within it. */
.site-header__nav { display: flex; justify-content: center; justify-self: center; }
.site-header__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.site-header__menu > li {
  display: flex;
  align-items: center;
}
/* All nav links use inline-flex so the caret-bearing items
   (About / Pet Corner) line up with the plain text items
   (Home / Services / Contact) on the same vertical center,
   instead of one type baseline-aligning and the other not. */
.site-header__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem; font-weight: 500;
  color: var(--ink); position: relative; padding: 0.4rem 0;
  line-height: 1;
  transition: color 0.2s var(--ease-out);
}
.site-header__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.site-header__link:hover { color: var(--creek-deep); }
.site-header__link:hover::after,
.site-header__link[data-nav-current]::after { transform: scaleX(1); }

/* Open House — highlighted event link: all-caps vivid creek-blue so it
   stands out from the regular ink nav items while the event is upcoming. */
.site-header__link--openhouse {
  color: var(--creek-deep);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.82rem;
}
.site-header__link--openhouse:hover { color: var(--ink); }

/* Skip-to-content link (a11y). Off-screen until a keyboard user focuses it,
   then slides into the top-left. Invisible to mouse/touch visitors. */
.skip-link {
  position: fixed;
  top: -60px;
  left: 8px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s var(--ease-out);
}
.skip-link:focus { top: 0; outline: 2px solid var(--creek); outline-offset: 2px; }
main:focus { outline: none; }

/* ----------- Nav dropdowns (About, Pet Corner) ----------- */
.site-header__item--has-menu { position: relative; }

.site-header__link--has-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.site-header__caret {
  transition: transform 0.25s var(--ease-out);
}
.site-header__item--has-menu:hover .site-header__caret,
.site-header__item--has-menu:focus-within .site-header__caret {
  transform: rotate(180deg);
}

.site-header__submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.75rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid rgba(22, 59, 108, 0.10);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease-out),
              transform 0.22s var(--ease-out),
              visibility 0.22s var(--ease-out);
  z-index: 50;
}
.site-header__item--has-menu:hover .site-header__submenu,
.site-header__item--has-menu:focus-within .site-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-header__submenu a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.site-header__submenu a:hover {
  color: var(--creek-deep);
  background: rgba(22, 59, 108, 0.05);
}

/* Phone icon + Book button hug each other (0.6rem internal gap).
   margin-left:auto removed so they sit right after the nav rather
   than getting shoved to the far right edge of the header. */
.site-header__actions { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.site-header__icon-link {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); border: 1px solid rgba(22, 59, 108, 0.18);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.site-header__icon-link:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.site-header__cta { padding: 0.8rem 1.35rem; }

.site-header__menu-btn {
  display: none; width: 44px; height: 44px;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(22, 59, 108, 0.18);
}
.site-header__menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform 0.25s var(--ease-out); }

.mobile-menu {
  position: fixed; inset: 0;
  /* Site's signature light-section gradient (powder-blue → warm
     off-white) instead of a flat white panel. */
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  z-index: 60;
  display: flex;
  overflow-y: auto;          /* scroll if the list is taller than the screen */
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
/* Left-aligned: margin pins the nav to the left (and auto top/bottom keeps
   it vertically centered, collapsing under overflow so tall lists scroll). */
.mobile-menu > nav {
  margin: auto auto auto 0;
  width: 100%;
  max-width: 360px;
  padding: 4.75rem 1.75rem 2.5rem;
}
.mobile-menu__list {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: 0;
  text-align: left;
}
/* Real, tappable links (Home, Services, Contact, Open House). Each is a
   flex box with a 44px min-height so the touch target is comfortable. */
.mobile-menu__link {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0.2rem 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.mobile-menu__link:not(.mobile-menu__link--sub) { margin-top: 0.35rem; }
/* Non-clickable category headers (About, Pet Corner). Styled as muted
   uppercase labels so they read as section dividers, NOT tappable links —
   their children below are the actual destinations. */
.mobile-menu__group {
  display: block;
  margin: 1.1rem 0 0.1rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
/* Sub-items — indented, tappable links under a category header. */
.mobile-menu__link--sub {
  min-height: 40px;
  margin-top: 0;
  padding: 0.2rem 0 0.2rem 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.01em;
}
/* Open House — highlighted event link in the mobile menu (vivid blue,
   uppercase) to match the desktop treatment. */
.mobile-menu__link--openhouse {
  color: var(--creek-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  font-weight: 600;
}
.mobile-menu__cta { display: inline-flex; margin: 1.25rem 0 0; }
/* Close (X) button — top-right of the open menu, 46px tap target,
   mirrors the hamburger's circular outline so it reads as its pair.
   Soft shadow + filled paper bg so it clearly reads as a button. */
.mobile-menu__close {
  position: fixed; top: 1rem; right: 1rem; z-index: 2;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(22, 59, 108, 0.22);
  background: var(--paper); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.mobile-menu__close:hover,
.mobile-menu__close:focus-visible {
  background: var(--ink); color: var(--paper); transform: rotate(90deg);
}

@media (max-width: 880px) {
  /* Scoped under .site-header__actions so these beat the higher-specificity
     a[data-todo^="Book an appointment"] rule (0,1,1) that otherwise forces
     the header CTA back to display:inline-flex on mobile and crushes the
     logo's grid column. */
  .site-header__nav,
  .site-header__actions .site-header__icon-link,
  .site-header__actions .site-header__cta { display: none !important; }
  .site-header__menu-btn { display: inline-flex; }
  /* With the center nav hidden, drop to a 2-column header (logo | actions)
     so the hamburger auto-places into the RIGHT column instead of landing
     in the now-empty center column (which made it look centered). */
  .site-header__inner { grid-template-columns: 1fr auto; }
}

/* -----------------------------------------------------------
   06.5 — Page creek (REMOVED)
   The scroll-driven SVG watermark that wove through <main> has
   been retired. The .page-creek wrapper, its <svg>, the two
   stacked <path> elements, and all data-creek-* attributes on
   sections are gone from the HTML + JS too.
   ----------------------------------------------------------- */

/* Section content stays above the creek + mask inside main */
.founders > .container,
.intentional > .container,
.closer > .container,
.after-hours > .container,
.site-footer > .site-footer__inner,
.site-footer > .site-footer__service-area,
.site-footer > .site-footer__legal { position: relative; z-index: 3; }

/* -----------------------------------------------------------
   07 — Hero (full-width cinematic video banner)
   Full-bleed looping video behind a left-anchored dark overlay,
   copy column on the left. Replaces the previous creek-clipped
   split hero + hero-media-mask (2026-05-27, per Brees'
   homepage-mockup.html). Colors + type match the mockup exactly:
   #0f4060 left-anchored overlay, #6bbfdb cyan eyebrow,
   Montserrat headline, white + ghost pill CTAs.
   ----------------------------------------------------------- */
.hero-banner {
  position: relative;
  width: 100%;
  height: 696px;
  overflow: hidden;
}
/* Wavy bottom divider — same creek-bank seam the team/services
   page heroes have (.page-hero--banner::after). Fills with the
   founders section's top color (--paper-warm #d8edf5) so the hero
   flows into the founders section with a water-ripple edge instead
   of a hard straight cut. */
.hero-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%23d8edf5'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
.hero-banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Lightened per Shawna's feedback ("a titch lighter on the blue
     overlay") — was 0.88/0.12. Eased the dark anchor so the video
     reads brighter + sharper while the copy stays legible. */
  background: linear-gradient(to right, rgba(15, 64, 96, 0.72) 34%, rgba(15, 64, 96, 0.06) 100%);
  display: flex;
  align-items: center;
  padding: 0 80px;
}
.hero-text {
  color: #fff;
  max-width: 560px;
}
/* Signature wave-mark squiggle above the hero H1 — same 3-hump
   mark used above the intentional / reviews / closer headings.
   Powder cyan on the dark hero overlay, left-aligned with the copy. */
.hero-wave-mark {
  display: block;
  color: #6bbfdb;
  margin-bottom: 14px;
}
.hero-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6bbfdb;
  font-weight: 600;
  margin-bottom: 18px;
}
.hero-banner h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 22px;
  color: #fff;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-white {
  background: #fff;
  color: #0f4060;
  padding: 12px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  font-family: var(--font-display);
}
.btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  padding: 12px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  font-family: var(--font-display);
}

/* Founder signature — preserved from the prior hero, restyled to
   sit cleanly on the dark overlay (white text, cyan creek dash). */
.hero-signature {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero-signature strong {
  font-weight: 700;
  color: #fff;
}
.hero-signature-mark {
  display: inline-block;
  width: 24px; height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'><path d='M0 4 Q 4 0, 8 4 T 16 4 T 24 4 T 32 4' stroke='%236bbfdb' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  flex-shrink: 0;
}

/* Mobile: shorten the banner, tighten the padding, scale the
   headline, and deepen the overlay so the copy stays legible
   once the video's lighter right side creeps left. */
@media (max-width: 800px) {
  .hero-banner { height: 552px; }
  .hero-overlay {
    padding: 0 28px;
    /* Lightened to match desktop (was 0.92/0.5) while keeping enough
       contrast for the copy once the video's brighter side creeps in. */
    background: linear-gradient(to right, rgba(15, 64, 96, 0.82) 55%, rgba(15, 64, 96, 0.42) 100%);
  }
  .hero-banner h1 { font-size: 32px; }
}
@media (max-width: 600px) {
  .hero-signature {
    display: block;
  }
  .hero-signature-mark {
    vertical-align: middle;
    margin-right: 0.5rem;
    position: relative;
    top: -1px;
  }
}
/* -----------------------------------------------------------
   08 — Built with Purpose (founder intro)
   Primary photo (founders or building) + secondary print thumb.

   The hero-media-mask above bleeds ~25vh into the top of this
   section, so the photo column on the right is offset down via
   padding-top so it doesn't compete with the video bleed.
   The text column on the left flows from the top as normal.
   ----------------------------------------------------------- */
.founders {
  /* Per-section fixed-px gradient per brief. */
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  /* Tighter TOP padding so content sits close under the hero's wavy
     edge (was clamp(5rem,9vw,88px) top+bottom = a big empty band);
     bottom keeps room before the wave into the intentional band. */
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(4rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
/* Widen the founders section to match the mockup — drop the
   1280px container cap and use section-level horizontal padding
   (max 60px per side) so the image+copy grid breathes the full
   viewport width on big screens. */
.founders > .container {
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 60px);
}
/* Wavy section divider — sits at the bottom of founders, filled
   with the dark intentional bg (--ink #0f4060). The wavy top edge
   is where the founders' light bg meets the dark intentional band,
   so the dark section reads as rising into founders with an organic
   water-ripple silhouette instead of a hard horizontal line. */
.founders::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.founders__grid {
  display: grid;
  /* Equal columns per mockup so image + copy each get half the
     widened section. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 80px);
  align-items: center;
  /* The hero video no longer bleeds into founders (banner hero
     replaced the creek mask, 2026-05-27), so the offset that
     cleared the bleed is removed — the section's own symmetric
     padding-block now governs the top gap. */
  padding-top: 0;
}
.founders__copy {
  max-width: none;
  margin-left: 0;
}
.founders__title { font-size: var(--fs-h2); margin: 1.25rem 0 1.75rem; }
.founders__lede { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--charcoal); }
/* MISSION — designed statement, not a paragraph.
   Hairline rule + small "Our Mission" eyebrow above a large
   italic pledge sentence, with three pillars rendered as a
   separated trio underneath. The italic "better than we found it"
   echoes the editorial italic-em pattern from the hero + closer. */
.mission {
  margin: 2rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(22, 59, 108, 0.14);
}
.mission__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--creek-deep);
  margin-bottom: 0.85rem;
}
.mission__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 22ch;
}
.mission__quote em {
  /* Brief: mission statement is plain (white) text in the navy card
     — no editorial italic / light-weight / accent. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.mission__pillars {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
}
.mission__pillar {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-warm);
}
/* Soft creek-cyan dot separator between pillars (omitted after the last) */
.mission__pillar:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.7rem;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--creek-deep);
  transform: translateY(-50%);
  opacity: 0.55;
}

/* MISSION --navy — color-contrast callout variant (2026-05-28).
   Wraps the mission block in a deep navy panel so the pledge reads
   as the loudest moment in the Founders section. White italic
   pledge, powder-blue eyebrow + pillar dots, vivid-blue highlight
   under the italic phrase echoing the hero's "Gunnison Valley."
   underline language. Picked over the powder-blue variant by Brees
   so the section has real visual hierarchy on the new v12 palette. */
.mission--navy {
  background: var(--ink);
  border-radius: 12px;          /* Mockup: 12px (was 20px in v2) */
  /* Padding tightened to mockup spec (24px / 28px). Previous
     clamp peaked at 40px which left a tall empty zone below the
     pledge inside the now-wider founders section. */
  padding: 1.5rem 1.75rem;
  border-top: none; /* override default hairline rule on .mission */
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.08),
    0 14px 32px rgba(15, 64, 96, 0.14);
}
/* Pledge inside the navy card fills the card width — the global
   .mission__quote max-width: 22ch was forcing a narrow column
   inside the wider card, leaving an awkward dead zone to the
   right and below. Override here so the pledge breathes the full
   card width. */
.mission--navy .mission__quote {
  max-width: none;
  font-size: 1.125rem;          /* Mockup: 18px / 600 weight */
  font-weight: 600;
  line-height: 1.55;
}
.mission--navy .mission__eyebrow {
  color: var(--creek); /* powder-blue eyebrow reads on dark */
}
.mission--navy .mission__quote,
.mission--navy .mission__quote em {
  color: var(--paper); /* off-white pledge */
}
/* Brief: no accent underline on the mission statement — plain white
   text in the navy card. (Vivid-blue underline removed.) */
.mission--navy .mission__pillar {
  color: rgba(255, 255, 255, 0.78); /* warm off-white, slightly dimmed */
}
.mission--navy .mission__pillar:not(:last-child)::after {
  background: var(--creek-deep);
  opacity: 1;
}

/* v2 — VALUES — inline editorial list below the mission card (per
   Brees: no pills). The three values read as Midnight Cove text
   separated by a small Vivid Mid dot, matching the site's
   typographic voice rather than chip chrome. */
.values-tags {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.values-tags li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Vivid Mid dot separator between values (not after the last). */
.values-tags li:not(:last-child)::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--creek-deep);
}
/* Inside the navy mission card — the values echo the "Our Mission"
   eyebrow style (powder-blue, uppercase, tracked) so they read as a
   distinct labeled element framing the pledge, differentiated by
   treatment rather than a divider line. */
.mission--navy .values-tags {
  margin-top: 1.5rem;
  gap: 0.7rem;
}
.mission--navy .values-tags li {
  color: var(--creek);            /* powder blue, like "Our Mission" */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mission--navy .values-tags li:not(:last-child)::after {
  width: 4px;
  height: 4px;
  background: var(--creek);
}
/* Single image on the left (replaces the stacked polaroids).
   Rounded corners + soft shadow — no polaroid tilt or border. */
.founders__media {
  position: relative;
}
.founders__image {
  margin: 0;
  border-radius: 16px;          /* Brief mockup: 16px image radius */
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(15, 64, 96, 0.12);
  /* Brief mockup: 100% wide × fixed 500px tall (no aspect-ratio).
     Aspect-ratio dropped because the 3:4 source ratio combined
     with the widened section makes the image stretch comically
     tall on big screens. Fixed height + object-fit cover crops
     the COMING SOON banner image to the visible band. */
  height: clamp(360px, 42vw, 500px);
  background: var(--paper-warm);
}
.founders__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.founders__image:hover img { transform: scale(1.03); }

@media (max-width: 880px) {
  .founders__grid {
    grid-template-columns: 1fr;
    padding-top: clamp(2rem, 5vw, 4rem);
  }
  .founders__media { order: 2; }
  .founders__copy { order: 1; }
  .founders__image { height: clamp(280px, 60vw, 420px); }
}

/* -----------------------------------------------------------
   09 — EVERYTHING IS INTENTIONAL — 8-box mosaic (v3)
   White notecards on warm paper. One box (Modern Tools) has an
   image at the top, text stacked below — image and text never
   overlap. Asymmetric grid, Context anchors top-left, Modern
   Tools anchors bottom-left (with the photo).
   ----------------------------------------------------------- */
.intentional {
  /* Dark midnight-blue band (#0f4060) — matches the mockup's
     dark "how we practice" section. Inner type + tab elements
     are flipped to read on dark (see overrides below). */
  background: var(--ink);
  position: relative; overflow: hidden;
  /* Tighter top padding so the wave-mark/eyebrow sit closer under the
     wavy seam (was the base ~7rem top); bottom keeps clearance before
     the wave into the services section. */
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem);
}
.intentional::before {
  /* Soft vivid-blue "pool of light" on the right side, dropped
     fully inside the section. Low opacity so it adds gentle
     depth to the flat dark band without becoming a bright blob. */
  content: ''; position: absolute;
  top: 15%; left: 60%; width: 65%; aspect-ratio: 1;
  background: var(--creek-deep); border-radius: 50%;
  filter: blur(150px); opacity: 0.16; pointer-events: none; z-index: 0;
}
/* Wavy divider at the BOTTOM of intentional — fills with the
   services-strip's top color (--paper-warm) so the dark band
   lifts back into the light services section with a water-ripple
   edge, mirroring the founders→intentional seam above. */
.intentional::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%23d8edf5'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
/* Widen the intentional section like the founders section per
   Brees — drop the 1280px container cap and use section-level
   padding (max 60px gutters). */
.intentional > .container {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 60px);
}

.intentional__head {
  /* Single-column centered stack — wave + eyebrow + title + intro
     center horizontally on the widened section. Override of the
     stale 2-column grid; the second rule lower in the file does
     the actual centering (max-width + margin-inline: auto +
     text-align: center). */
  display: block;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.intentional__title {
  /* Brief: section H2 — 38px / 700. Same scale as other section
     headings (services-strip, founders, faq, reviews) so the
     intentional headline doesn't visually overpower the others. */
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 14ch;
}
.intentional__title em {
  /* Brief: headings are a single color + weight — no accent words.
     em inherits the title's color/weight, non-italic. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  white-space: nowrap;
}
/* Wave-mark + "How we practice" eyebrow above the section title
   (brief + mockup). Powder Blue on the dark Midnight Cove band. */
.intentional__wave-mark {
  display: block;
  /* margin-inline: auto centers the block-level SVG within the
     centered head (text-align doesn't apply to blocks). */
  margin: 0 auto 12px;
  color: var(--creek);   /* inherited by stroke="currentColor" */
}
.intentional__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creek);   /* Powder Blue eyebrow on dark per brief */
}
.intentional__intro {
  font-size: var(--fs-body-lg); color: var(--stone-warm);
  max-width: 52ch; margin-bottom: 0.5rem;
}

/* 12-column asymmetric mosaic */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Base box — white notecard, rounded, soft card-on-paper shadow */
.box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  box-shadow:
    0 1px 1px rgba(15, 64, 96, 0.04),
    0 14px 30px rgba(15, 64, 96, 0.08),
    0 30px 80px rgba(15, 64, 96, 0.06);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  overflow: hidden;
  position: relative;
}
.box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(15, 64, 96, 0.05),
    0 20px 45px rgba(15, 64, 96, 0.10),
    0 40px 100px rgba(15, 64, 96, 0.08);
}

.box__index {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--creek-deep);
  margin-bottom: 0.5rem;
}
.box__heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.625rem);
  letter-spacing: -0.012em; line-height: 1.1;
  color: var(--ink); margin: 0 0 0.75rem;
}
.box__body {
  font-size: 0.9375rem; line-height: 1.55;
  color: var(--stone-warm); margin: 0;
}
.box__cta {
  align-self: flex-start; margin-top: auto; padding-top: 1rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.875rem;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: color 0.2s var(--ease-out), gap 0.25s var(--ease-out);
}
.box__cta-line {
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.box__cta::after { content: '→'; transition: transform 0.3s var(--ease-out); display: inline-block; }
.box__cta:hover { color: var(--creek-deep); }
.box__cta:hover .box__cta-line { border-color: var(--creek-deep); }
.box__cta:hover::after { transform: translateX(4px); }

/* The "feature" box — larger, more content (Context) */
.box--feature .box__heading {
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  letter-spacing: -0.02em;
}
.box--feature .box__body { font-size: 1.0625rem; }

/* The "media" box — image at the top, text below. Image never has text on it. */
.box--media {
  padding: 0;
}
.box--media .box__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-warm);
}
.box--media .box__image-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease-out);
}
.box--media:hover .box__image-wrap img { transform: scale(1.04); }
.box--media .box__image-caption {
  padding: 0.65rem clamp(1.5rem, 2vw, 2.25rem) 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.85rem; color: var(--stone);
}
.box--media .box__inner {
  padding: clamp(1.25rem, 1.6vw, 1.75rem) clamp(1.5rem, 2vw, 2.25rem) clamp(1.5rem, 2vw, 2.25rem);
  display: flex; flex-direction: column; flex: 1;
}

/* Mosaic placement — desktop
   Row 1-2 left: Context (large feature, 7 col, 2 row)
   Row 1   right: Personalized (5 col)
   Row 2   right: Gentle (5 col)
   Row 3-4 left: Modern Tools (media box, 5 col, 2 row)
   Row 3   right: Cat (3 col) + Happy (4 col)
   Row 4   right: Culture (4 col) + Hard (3 col)
   HTML order: context, personalized, gentle, modern, cat, happy, culture, hard */
.box--context      { grid-column: span 7; grid-row: span 2; }
.box--personalized { grid-column: span 5; }
.box--gentle       { grid-column: span 5; }
.box--modern       { grid-column: span 5; grid-row: span 2; }
.box--cat          { grid-column: span 3; }
.box--happy        { grid-column: span 4; }
.box--culture      { grid-column: span 4; }
.box--hard         { grid-column: span 3; }

@media (max-width: 1100px) {
  .box--context, .box--modern { grid-column: span 12; grid-row: auto; }
  .box--personalized, .box--gentle, .box--happy, .box--culture { grid-column: span 6; }
  .box--cat, .box--hard { grid-column: span 6; }
}
@media (max-width: 640px) {
  .box, .box--context, .box--personalized, .box--gentle, .box--modern,
  .box--cat, .box--happy, .box--culture, .box--hard {
    grid-column: span 12;
  }
}

/* -----------------------------------------------------------
   09.5 — INTENTIONAL — tabbed pills + single focus panel
   Replaces the old mosaic. 8 pills across the top, one detail
   panel below. Click a pill to swap the visible panel. Keeps
   the section compact (~50-60vh) so the page reads short.
   The .intentional__head + .intentional__title rules above
   still apply; the rules here only style the new tab structure.
   ----------------------------------------------------------- */
.intentional__head {
  /* Full-section-width head per Brees — drop the 720px cap so the
     head breathes the full intentional band like the founders
     section. Inner elements (title with 14ch cap, intro with 56ch
     cap, tabs) still center via their own margin-inline: auto, so
     the centered layout is preserved; only the head container
     itself expands to fill the section. */
  display: block;
  text-align: center;
  max-width: none;
  margin-inline: 0;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.intentional__title {
  /* Keep the title on a single line per Brees (was capped at 14ch
     which forced "Everything is intentional." to wrap). nowrap holds
     it on one line; the mobile breakpoint below re-enables wrapping
     so it never overflows narrow phones. */
  max-width: none;
  white-space: nowrap;
  margin-inline: auto;   /* center within the centered head */
  /* Brief: section H2 — 38px / 700. The previous big clamp peak
     of 3.75rem was overriding the global --fs-h2 scale. */
  font-size: var(--fs-h2);
  /* White on the dark band. */
  color: var(--white);
  /* Breathe between the title and the intro paragraph below.
     Previously they sat almost touching. */
  margin-bottom: 1.25rem;
}
.intentional__intro {
  margin-inline: auto;
  margin-top: 0;
  /* Soft white on the dark band. */
  color: rgba(255, 255, 255, 0.66);
  max-width: 56ch;
}
/* Re-enable wrapping on narrow phones so the single-line title
   never overflows the viewport. */
@media (max-width: 600px) {
  .intentional__title { white-space: normal; }
}

.tab-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}
.tab {
  display: inline-flex;
  align-items: center;
  /* Text-only pill — image thumbnails removed. Even padding
     all around so the label centers cleanly inside the chip. */
  padding: 0.68rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  transform: translateY(-1px);
}
.tab[aria-selected="true"] {
  /* Powder-blue fill on the dark band (an --ink fill would
     disappear against the #0f4060 background). */
  background: var(--creek);
  color: var(--ink);
  border-color: var(--creek);
  box-shadow: 0 6px 16px rgba(7, 30, 48, 0.35);
}

.tab-panels {
  position: relative;
  min-height: 240px;
}
.tab-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.tab-panel.is-active {
  display: grid;
  /* Full-section-width img/text grid per Brees (matches the
     founders section layout). Was capped at 1080px which made
     the panel feel narrow on the wide intentional section. Now
     fills the container with 1fr 1fr columns and an 80px gap like
     founders. Inner content stays naturally centered because both
     columns expand evenly. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 80px);
  align-items: center;
  max-width: none;
  margin-inline: 0;
  opacity: 1;
}
.tab-panel--has-photo.is-active {
  /* photo variant uses the same 1fr 1fr as the default panel
     since the section is now full-width and the image / copy
     balance the row evenly. */
  grid-template-columns: 1fr 1fr;
}

/* Large rounded thumbnail on the left of each tab-panel.
   Replaces the previous decorative oversized italic number with
   an image that echoes the tab pill's thumbnail. Square aspect,
   matching corner radius to other rounded cards on the site. */
.tab-panel__display {
  /* Brief + Brees: img fills its full 50% column exactly like the
     founders (sec2) image — width 100%, fixed-height crop (no square
     aspect-ratio cap, no max-width, no left-align). Stretches edge to
     edge of its 1fr column so the panel reads as a true 50/50 split. */
  width: 100%;
  height: clamp(360px, 42vw, 500px);
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
  justify-self: stretch;
  box-shadow: var(--shadow-md);
}
.tab-panel__body { min-width: 0; }
.tab-panel__index {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  /* Powder-blue accent on the dark band. */
  color: var(--creek);
  margin-bottom: 0.65rem;
}
.tab-panel__heading {
  /* Brief: Tab section heading (H3) — 30px / 700. */
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.015em; line-height: 1.12;
  color: var(--white);
  margin: 0 0 0.85rem;
}
.tab-panel__copy {
  font-size: 1rem; line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 1.1rem;
}
.tab-panel__cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  color: var(--creek);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease-out), gap 0.25s var(--ease-out);
}
.tab-panel__cta:hover { color: var(--white); gap: 0.55rem; }

@media (max-width: 720px) {
  .tab-strip {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    /* hide scrollbar */
    scrollbar-width: none;
  }
  .tab-strip::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .tab-panel.is-active,
  .tab-panel--has-photo.is-active {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .tab-panel__display { font-size: 6rem; }
  .tab-panel__photo { justify-self: center; max-width: 380px; }
}

/* -----------------------------------------------------------
   09.75 — SERVICES STRIP — tall pill cards, horizontal scroll
   Cards are tall portrait pills (3:4 aspect), heavily rounded
   (32px radius), photo fills the card edge-to-edge, service
   name overlays the bottom on a solid ink scrim. The row scrolls
   horizontally — drag, swipe, or use the scrollbar to pan; no
   auto-motion. Sections breathes ~clamp(4-6rem) of padding.
   ----------------------------------------------------------- */
.services-strip {
  /* Per-section fixed-px gradient per brief. Padding tightened
     to 88px peak so the section is short-and-wide like the mockup
     (was 8rem of vertical padding for the tall pill rail). */
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  position: relative;
  /* Tight top so the "Services / Care we provide" head sits close
     under the intentional wave above (mirrors how Founders hugs the
     hero wave); deeper bottom kept for the rail + seam below. */
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(3rem, 8vw, 88px);
  display: flex;
  flex-direction: column;
}
/* Widen the services section to match the mockup so the 5-col
   grid breathes the full viewport width (capped at 60px gutters). */
.services-strip > * {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 60px);
}
/* 5-COLUMN photo card grid (brief). Replaces the previous tall
   horizontal-scroll pill rail. Two rows × 5 cards = all 10
   services visible at once on desktop. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.services-grid .service-card.photo-print {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  margin: 0;
  box-shadow: 0 2px 12px rgba(15, 64, 96, 0.08);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.services-grid .service-card.photo-print img {
  width: 100%;
  height: 200px;            /* brief: short cards, photo-led */
  aspect-ratio: auto;       /* override the 3:4 pill aspect */
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ease);
}
.services-grid .service-card.photo-print:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(15, 64, 96, 0.14);
}
.services-grid .service-card.photo-print:hover img { transform: scale(1.04); }
/* Caption — brief specifies gradient label overlay (already styled
   globally on .photo-print__caption). Compact padding inside the
   smaller 200px cards. */
.services-grid .photo-print__caption {
  padding: 1.75rem 0.875rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
/* "View all services" pill row below the grid (brief). */
.services-strip__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Responsive collapse for narrower screens. */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* Wave divider removed from services-strip — the FAQ section now
   sits between services and the closer, so the divider lives on
   .faq::after instead (see section 17). Both services-strip and
   FAQ share --paper-warm, so the seam between them is now a clean
   color-on-color flow. */
.services-strip > * { position: relative; z-index: 2; }

.services-strip__head {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.services-strip__title {
  font-family: var(--font-display);
  /* Brief: all section H2 headings — 38px / 700 weight via the
     shared --fs-h2 scale + the base h2 weight: 700 rule. */
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0.35rem 0 0;
  color: var(--ink);
}

/* Header right cluster — nav arrows + "See all" link, aligned end. */
.services-strip__actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.75vw, 1.75rem);
  flex-wrap: wrap;
}
.services-strip__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.services-strip__nav-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              transform 0.2s var(--ease-out),
              opacity 0.2s var(--ease-out);
  cursor: pointer;
}
.services-strip__nav-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}
.services-strip__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.services-strip__nav-btn svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-strip__cta {
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease-out), gap 0.25s var(--ease-out);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.services-strip__cta:hover { color: var(--creek-deep); gap: 0.55rem; }

/* Horizontal scroll rail — no auto-motion, scrollbar hidden.
   Pads the inline edges so the first/last card aligns with the
   section's natural margin. Pan via drag/swipe/wheel, or use
   the arrow controls in the header. */
.services-rail {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.75rem);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-block: 0.5rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar HIDDEN — navigation via arrows + drag/swipe */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.services-rail::-webkit-scrollbar { display: none; }

.service-card {
  flex: 0 0 auto;
  /* Sized so ~4 cards fit comfortably in the container at desktop,
     scaling down on narrower viewports. */
  width: clamp(260px, 23vw, 340px);
  scroll-snap-align: start;
  /* Re-uses .photo-print (now a clean rounded card) — caption
     overlays the photo bottom with a solid ink scrim. */
}
.service-card.photo-print img {
  /* Brief was 3/4 tall pill (~373px tall at 280px wide). Brees
     asked for ~25% shorter — 1/1 square brings ~280px tall, the
     exact 25% reduction while keeping the rail format. */
  aspect-ratio: 1 / 1;
}

/* Softer card shadow than the base --shadow-md so the row of
   cards doesn't pool a visible darker band into the cream bg
   directly below them. Tightened blur + reduced opacity. */
.service-card.photo-print {
  box-shadow:
    0 1px 4px rgba(15, 64, 96, 0.04),
    0 10px 28px rgba(15, 64, 96, 0.05);
}
.service-card.photo-print:hover {
  box-shadow:
    0 2px 6px rgba(15, 64, 96, 0.06),
    0 16px 36px rgba(15, 64, 96, 0.09);
}


/* -----------------------------------------------------------
   10 — Closer
   Tightened: smaller padding, headline scaled down, container
   constrained so the band reads as a polished closing statement
   rather than a full-width hero. The blurred creek "halo" is
   shrunk + softened to support the headline without dominating.
   ----------------------------------------------------------- */
.closer {
  /* Brief: full Midnight Cove section (flat ink, no photo, no
     scrim, no mask). The wavy top edge is now provided by a
     stamped SVG divider on the section above (`.faq::after`)
     rather than the closer itself. Same applies to .closer--services
     and .closer--team — overrides removed below so all 3 page
     closers read as one flat Midnight Cove band per brief. */
  background-color: var(--ink);
  color: var(--paper);
  position: relative;
  text-align: center;
  /* Tightened per Brees — was clamp(5rem, 9vw, 8rem) (80–128px),
     then 2.75–4.25rem; trimmed again for a more compact CTA band. */
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  isolation: isolate;
}
/* Variants neutralized — no photo, no scrim, flat ink for all
   three page closers per brief. Selectors kept (still apply to
   services and team markup) so we can re-introduce variant
   treatments later via the same hooks if needed. */
.closer--services,
.closer--team { background-image: none; background-position: initial; }
/* Wave-mark squiggle above the closer headline (brief + mockup).
   Powder Blue stroke on dark Midnight Cove, centered, sits ~18px
   above the H2 per mockup. */
.closer__wave-mark {
  display: block;
  margin: 0 auto 12px;
  color: var(--creek);  /* powder blue — inherited by stroke="currentColor" */
}
.closer__title {
  /* Brief: CTA heading 42px / 700 weight. Italic + light-weight
     em pattern dropped per brief (Montserrat throughout, no serif
     or editorial italic on v2). */
  font-size: var(--fs-cta);
  font-style: normal;
  font-weight: 700;
  color: var(--paper); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 auto 1.5rem;
  max-width: 22ch;
  position: relative;
}
.closer__title em { color: inherit; font-style: normal; font-weight: inherit; }

/* Service-area pills — small rounded chips listing where they serve.
   Outlined cream on the dark ink-deep band so the row feels light + airy.
   The "+ the rest of the Valley" pill uses a slightly different style
   (no border, italic, dimmer) so it reads as a tail / continuation. */
/* Closer "Proudly serving" label + town list — per brief, a small
   uppercase label above an inline dot-separated town list (no
   pills, no flexbox grid — just inline text with · separators). */
.closer__serving-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creek);
  margin: 0 0 0.625rem;
}
.closer__towns {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  /* One line per Brees (was capped at 60ch which wrapped after "and"). */
  max-width: none;
  white-space: nowrap;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 992px) {
  .closer__towns { white-space: normal; max-width: 60ch; }
}
/* (Legacy v1 town-pill styles kept below so they don't break v1.) */
.closer__areas {
  list-style: none; padding: 0;
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center;
  max-width: 720px;
  position: relative;
}
.closer__area-pill {
  font-family: var(--font-body);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.closer__area-pill--more {
  font-style: italic;
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  padding-inline: 0.5rem;
}

.closer__cta { font-size: 1rem; padding: 1.1rem 2rem; position: relative; }
/* Brief: primary CTA on the homepage closer is a WHITE pill button
   (white bg, Midnight Cove text) — high contrast on the flat dark
   ink section. Hover lifts to powder blue for warmth without
   breaking the white-on-dark hierarchy. */
.closer__cta.btn--primary { background: var(--white); color: var(--ink); }
.closer__cta.btn--primary:hover { background: var(--paper-warm); color: var(--ink); }

/* -----------------------------------------------------------
   11 — After-hours emergency callout
   ----------------------------------------------------------- */
.after-hours {
  /* Mockup section gradient — powder blue fading to off-white. */
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.after-hours__inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem); text-align: center; flex-wrap: wrap;
}
.after-hours__label {
  font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--stone-warm); font-weight: 600;
}
.after-hours__text {
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  color: var(--ink); margin: 0;
}
.after-hours__phone {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  color: var(--ink); letter-spacing: 0.01em;
  border-bottom: 2px solid var(--creek); padding-bottom: 2px;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.after-hours__phone:hover { color: var(--creek-deep); border-color: var(--ink); }

/* -----------------------------------------------------------
   12 — Footer
   ----------------------------------------------------------- */
.site-footer {
  /* Mockup footer gradient — midnight blue deepening to near-black. */
  background: linear-gradient(to bottom, var(--ink), var(--ink-deep));
  color: var(--paper);
  position: relative; padding-bottom: 1.25rem;
}
.site-footer__inner {
  max-width: var(--container-wide); margin-inline: auto;
  padding: clamp(4rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2.5rem) 3rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.site-footer__brand { max-width: 360px; }
.site-footer__logo { width: 96px; height: 96px; margin-bottom: 1.5rem; }
.site-footer__tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; line-height: 1.25;
  color: var(--paper); margin: 0 0 1.75rem;
}
.site-footer__heading {
  font-family: var(--font-body); font-weight: 700;
  /* Brief: footer column headings — 13px / 700 / uppercase / 0.14em. */
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--creek); margin: 0 0 1.25rem;
}
/* Brief: footer body / links — 16px / 400-500 weight. */
.site-footer__address { font-style: normal; font-size: 1rem; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, 0.85); margin-bottom: 0.75rem; }
.site-footer__address a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
.site-footer__address a:hover { color: var(--creek); }
.site-footer__hours { font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0 0 1.25rem; }
.site-footer__after-hours {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.site-footer__after-hours-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creek);
}
.site-footer__after-hours-link {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.2s var(--ease-out);
}
.site-footer__after-hours-link:hover { color: var(--creek); }
/* Tel link for the after-hours emergency number — quieter than
   the named link above so the hospital name reads first, with
   the dialable number as a secondary line. */
.site-footer__after-hours-phone {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s var(--ease-out);
}
.site-footer__after-hours-phone:hover { color: var(--creek); }
/* Social row in the brand column — small circular outlined
   icons matching the footer's dark-on-paper aesthetic. Hover
   fills with creek-cyan for a quiet brand-touch. */
.site-footer__social {
  list-style: none; padding: 0;
  margin: 1.25rem 0 0;
  display: flex; align-items: center; gap: 0.55rem;
}
.site-footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
}
.site-footer__social a:hover {
  background: var(--creek);
  color: var(--ink-deep);
  border-color: var(--creek);
  transform: translateY(-2px);
}
.site-footer__social svg { display: block; }
/* a11y: same invisible 44px tap-target expansion as the topbar icons. */
.site-footer__social a { position: relative; }
.site-footer__social a::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

.site-footer__contact,
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer__contact a,
.site-footer__links a { color: rgba(255, 255, 255, 0.85); transition: color 0.2s var(--ease-out); font-size: 1rem; }
.site-footer__contact a:hover,
.site-footer__links a:hover { color: var(--creek); }
.site-footer__small { color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; }

.site-footer__service-area {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem);
  text-align: center; font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: var(--container-wide); margin: 0 auto;
}
/* Bottom legal/credit block — kept tight so it reads as a
   compact signature, not a section. Everything stacks with
   minimal gap, the wave is small + inline-feeling, and the
   text scales down progressively (credit > copy). */
.site-footer__legal {
  text-align: center;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__wave {
  width: 36px; height: 6px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.1rem;
}
.site-footer__credit {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer__credit-link {
  /* Inherits the "Designed by" color (white at parent opacity)
     and just bolds slightly for the link. No underline — Brees
     wanted the link to read as part of the credit line, not as
     a styled link. Creek-cyan hover preserved for affordance. */
  color: inherit;
  font-weight: 600;
  border-bottom: none;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.site-footer__credit-link:hover {
  color: var(--creek);
  border-color: var(--creek);
}
.site-footer__copy {
  margin: 0;
  /* Sized down + dimmed further so the copyright reads as
     tertiary text rather than competing with the "Designed by"
     line above it. */
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
}

/* Button override inside the footer — the dark ink footer background
   matches `.btn--primary`'s ink fill, making the button blend in.
   Invert it: cream fill, ink text, so it reads clearly as a button
   on the dark band. */
.site-footer .btn--primary {
  background: var(--paper);
  color: var(--ink);
}
.site-footer .btn--primary:hover {
  background: var(--creek);
  color: var(--ink-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: span 2; }
}
@media (max-width: 560px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: span 1; }
}

/* -----------------------------------------------------------
   13 — Reveal animations
   ----------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal-stagger] > * { transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__media video, .hero__media img { animation: none; }
}

/* -----------------------------------------------------------
   14 — Internal page hero (Team, etc.)
   Smaller than the homepage hero — a chapter opener, not a
   feature. Centered editorial intro on cream paper.
   ----------------------------------------------------------- */
.page-hero {
  background: var(--paper);
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero__inner {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.page-hero__title {
  /* Brief: page H1 48px / 800, Montserrat, no editorial italic.
     em accents are recolored (not italicized) — matches the
     homepage closer/intentional title treatment. */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.page-hero__title em {
  /* Brief: single-color headings — em inherits title color/weight. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.page-hero__lede {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 56ch;
  margin: 0;
}

/* ---- Wavy-bottom banner variant ----
   Full-width photo background with a dark scrim, text overlaid
   in cream. Bottom edge is a wavy creek-bank silhouette
   (paper-warm fill) flowing into the team section below. */
.page-hero--banner {
  /* Brief: page banner = solid Midnight Cove background with the
     photo at ~15% opacity / luminosity blend (a faint tonal texture,
     not a full visible photo). The image lives on ::before below. */
  background-color: var(--ink);
  position: relative;
  /* ~55vh tall (enlarged ~10% from the prior 50vh per Brees so the
     inside-page heroes feel a bit more substantial). Homepage uses a
     separate .hero-banner and is unaffected. */
  min-height: clamp(396px, 55vh, 572px);
  /* Match the homepage hero's text positioning: vertically centered,
     left inset 80px (was top-pinned via padding-block inside a
     centered container). */
  display: flex;
  align-items: center;
  padding: 0 80px;
  text-align: left;
  isolation: isolate;
  color: var(--paper);
}
/* Brief: banner photo at ~15% opacity, luminosity blend over the
   Midnight Cove background — faint texture behind the headline. */
.page-hero--banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/images/team-page-hero.jpg');
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  opacity: 0.15;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}
/* Wavy bottom edge — paper-warm fill (matches the team-section
   below) so the banner flows into the next section with the
   creek-bank silhouette as the seam. */
.page-hero--banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%23d8edf5'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* Banner variant overrides — left-align text, push above scrim,
   recolor for dark bg. */
.page-hero--banner .page-hero__inner {
  position: relative;
  z-index: 2;
  align-items: flex-start;
  text-align: left;
  /* Match homepage .hero-text: 560px block, left-aligned (no centered
     container) — the 80px inset comes from the section padding above. */
  max-width: 560px;
  margin-inline: 0;
  padding-inline: 0;
}
/* Match the homepage hero's mobile inset. */
@media (max-width: 800px) {
  .page-hero--banner { padding: 0 28px; }
}
.page-hero--banner .page-hero__title {
  color: var(--paper);
}
.page-hero--banner .page-hero__title em {
  color: inherit;   /* single-color heading per brief */
}
.page-hero--banner .page-hero__lede {
  color: rgba(255, 255, 255, 0.90);
}

/* Tighten the eyebrow cluster on the Open House hero — the 1.25rem
   inner gap + the wave-mark's own bottom margin left too much air
   around the small eyebrow. Pull it snug to the wave-mark + title. */
.page-hero--openhouse .page-hero__wave-mark { margin-bottom: 0; }
.page-hero--openhouse .eyebrow--on-dark { margin-block: -0.55rem; }

/* Services-page banner — white Samoyed (the dog from the old CTA
   section, per Brees), set as the faint ::before texture per brief. */
.page-hero--services::before {
  background-image: url('../assets/images/team-closer-bg.jpg');
  background-position: center 40%;
}

/* Signature wave-mark squiggle above the page-hero H1 (services) —
   same 3-hump mark + powder cyan as the homepage hero + section
   headings, left-aligned with the banner copy. */
.page-hero__wave-mark {
  display: block;
  color: var(--creek);
  margin-bottom: 0.6rem;
}
/* When the standalone wave-mark is present, suppress the eyebrow's
   own inline dash so the hero shows a single (prominent) wave, not
   two stacked ones — matches the reviews/intentional stacking. */
.page-hero__wave-mark + .eyebrow--on-dark::before { display: none; }

/* Eyebrow on dark — paper-colored text + creek-cyan wave so it
   still reads against the dark scrim. */
.eyebrow--on-dark {
  color: var(--paper);
}
.eyebrow--on-dark::before {
  /* Same 3-hump wave-mark, recolored to powder cyan (--creek
     #6bbfdb) so it reads as a soft accent on dark sections
     (page-hero banners, dark Intentional band) where vivid blue
     would compete with the darker bg. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12' fill='none'><path d='M1 8C8 5.5 14 5.5 21 8C28 10.5 34 10.5 41 8' stroke='%236bbfdb' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>");
}

/* -----------------------------------------------------------
   15 — Team section + founder cards
   ----------------------------------------------------------- */
.team-section {
  background: var(--paper-warm);
  /* Tighter top so content sits closer under the hero wave (was
     clamp(4rem,8vw,7rem)); bottom keeps room before the wave to the closer. */
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(5rem, 9vw, 7rem);
  position: relative;
  overflow: hidden;
}
/* Wavy divider into the closer below — same pattern + SVG as
   the homepage services-strip → closer divider. Filled with
   ink-deep so the wavy top edge becomes the seam between the
   warm-paper team section and the dark CTA band below. */
.team-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.team-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
/* Center the eyebrow's wave-mark above its text (the eyebrow defaults
   to left-aligning its stacked squiggle) so it sits centered over
   "Co-Founders" in this centered head. */
.team-section__head .eyebrow { align-items: center; }
.team-section__title {
  /* Brief: section H2 38px / 700, Montserrat, no editorial italic. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.team-section__title em {
  /* Brief: single-color headings — em inherits title color/weight. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.team-section__intro {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 58ch;
  margin: 0;
}

/* Founders grid — 2 cards side by side on desktop, stacked on
   mobile. `align-items: start` keeps each card the size of its
   own content so opening one bio doesn't drag the other one
   taller. Equal closed-state height is enforced via JS (sets
   min-height on each card to match the tallest one on load) —
   the open card grows past that, the closed one stays put. */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 880px) {
  .founders-grid { grid-template-columns: 1fr; }
}

.founder-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(15, 64, 96, 0.04),
    0 14px 30px rgba(15, 64, 96, 0.08),
    0 30px 80px rgba(15, 64, 96, 0.06);
  display: flex;
  flex-direction: column;
}
.founder-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-warm);
}
.founder-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.founder-card:hover .founder-card__media img {
  transform: scale(1.025);
}
.founder-card__body {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* Fill the remaining card height so the bio toggle (with its
     margin-top:auto) can anchor to the bottom — regardless of
     how long the intro paragraph above it runs. */
  flex: 1;
}
.founder-card__name {
  /* Brief: Bio name 34px / 400 weight, Montserrat. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;        /* 34px */
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.founder-card__title {
  /* Brief: Bio role 16px / 500 weight, Mid Gray (#4a4850).
     Not uppercase, not the vivid-blue eyebrow treatment. */
  font-family: var(--font-body);
  font-size: 1rem;            /* 16px */
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stone);        /* Mid Gray */
  margin: 0 0 0.5rem;
}
.founder-card__intro {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
}

/* Bio toggle — native <details> styled to feel like an
   intentional, soft expand button. Caret rotates 180° when
   open. The whole card sits comfortably whether collapsed
   or expanded; the bio body just slides in below. */
.founder-card__bio {
  border-top: 1px solid rgba(22, 59, 108, 0.10);
  padding-top: 1rem;
  /* Push the hairline rule + Read full bio button to the bottom
     of the card body so both cards' toggles line up no matter
     how long each intro paragraph is. */
  margin-top: auto;
}
.founder-card__bio summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;        /* Brief: bio summary 15px / 600 */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 59, 108, 0.20);
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}
.founder-card__bio summary::-webkit-details-marker { display: none; }
.founder-card__bio summary::marker { content: ''; }
.founder-card__bio summary:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.founder-card__bio-caret {
  transition: transform 0.3s var(--ease-out);
  flex-shrink: 0;
}
.founder-card__bio[open] summary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.founder-card__bio[open] .founder-card__bio-caret {
  transform: rotate(180deg);
}
/* Swap "Read full bio" → "Hide bio" when the details is open.
   The label text is hidden visually via font-size:0 and the open
   state inserts the new text via a pseudo-element. */
.founder-card__bio[open] summary .founder-card__bio-label {
  font-size: 0;
  letter-spacing: 0;
}
.founder-card__bio[open] summary .founder-card__bio-label::before {
  content: 'Hide bio';
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.founder-card__bio-body {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: bioFadeIn 0.4s var(--ease-out) both;
}
.founder-card__bio-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--charcoal);
}
@keyframes bioFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dog-breed Q&A — the recurring "If you were a dog breed…"
   moment. Bubble removed; now reads as a native typographic
   footer for the bio: hairline rule above + wavy creek-mark
   dash (matching the eyebrow pattern) leads into an italic
   question, then a bold breed answer. Feels like part of the
   site's existing language instead of a separate UI widget. */
.founder-card__breed {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(22, 59, 108, 0.12);
}
.founder-card__breed-q {
  /* Brief: Fun Q&A question label — 12px uppercase, Midnight Cove.
     Reads as a label (not an italic editorial line). */
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.75rem;          /* 12px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);           /* Midnight Cove */
  margin: 0 0 0.5rem;
}
.founder-card__breed-a {
  /* Brief: Fun Q&A answer — 16px. */
  font-size: 1rem;             /* 16px */
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
}
.founder-card__breed-a strong {
  color: var(--ink);
  font-weight: 700;
}

/* -----------------------------------------------------------
   Nav-disabled — visually de-emphasizes nav links to pages that
   haven't been built yet (Gallery, Pet Corner sub-pages, Contact,
   etc.). Coming-soon look without breaking the layout.

   `pointer-events: none` blocks clicks AND lets mouse events pass
   through to the parent <li>, so dropdown parents like About /
   Pet Corner still expand on hover even though their own link
   is greyed out.
   ----------------------------------------------------------- */
.site-header__link.nav-disabled,
.site-header__submenu a.nav-disabled,
.mobile-menu__link.nav-disabled,
.site-footer__links a.nav-disabled {
  color: var(--stone-warm) !important;
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Footer Site column inherits paper-on-ink coloring — use a
   muted paper tone instead of stone so the disabled link still
   reads as a footer item, just dimmed. */
.site-footer__links a.nav-disabled {
  color: rgba(255, 255, 255, 0.40) !important;
  opacity: 1;
}
/* Disabled link inside a dropdown parent — keep the caret visible
   so the dropdown affordance still reads. */
.site-header__link--has-menu.nav-disabled .site-header__caret {
  opacity: 0.65;
}

/* -----------------------------------------------------------
   16 — Services page (services.html)
   Sticky menu (left) + swappable focus pane (right).
   Page is intentionally short — the menu pins on desktop so
   all 10 services are one click away without endless scroll.
   ----------------------------------------------------------- */

/* Accessibility helper for screen-reader-only headings */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.services-page {
  background: var(--paper-warm);
  /* Less top padding so content sits closer under the hero wave and
     balances the (deeper) bottom space before the wave to the closer. */
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
/* Wavy divider into the closer below — same SVG + ink-deep fill
   as the team-section divider, so the seam between the warm-paper
   services band and the dark CTA reads as a single creek-bank line. */
.services-page::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Open the services section to full width (per Brees — client
   dislikes the capped site-width look). Drops the 1280px container
   cap, matching the homepage founders section. */
.services-page > .container {
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 60px);
}

/* Three-column rhythm at full width: menu 20% | image 40% | text 40%.
   Built as a nested grid — layout = menu(20%) + focus(80%); each
   panel inside = image(50%) + copy(50%) = 40% of the total each. */
.services-page__layout {
  display: grid;
  grid-template-columns: minmax(200px, 20%) 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  /* Center the menu against the image/focus pane so their vertical
     centers align (per Brees) rather than the menu top-pinning and
     hanging below the shorter image. */
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Sticky menu ---- */
.services-menu {
  position: sticky;
  top: 140px; /* clears the sticky header stack (topbar + main header) */
  /* Centered against the focus/image per Brees (was top-pinned).
     The section barely scrolls, so the centered rest position is
     what reads; sticky still catches any small scroll. */
  align-self: center;
  height: fit-content;
}
.services-menu__label {
  display: inline-flex;
  margin-bottom: 1.25rem;
  color: var(--stone-warm);
}
.services-menu__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 1px solid rgba(15, 64, 96, 0.10);
  padding-left: 0.5rem;
}
.services-menu__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  /* Left padding sized so the wavy mark (left: 0.5rem + 16px wide
     = ends at ~24px) sits in its own gutter, well clear of the
     number column which now starts at 2.75rem = 44px → 20px gap. */
  padding: 0.65rem 0.85rem 0.65rem 2.75rem;
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  position: relative;
  color: var(--stone-warm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.services-menu__item:hover {
  color: var(--ink);
  background: rgba(157, 215, 229, 0.16);
}
.services-menu__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.services-menu__item.is-active {
  color: var(--ink);
  font-weight: 600;
  background: rgba(157, 215, 229, 0.20);
}
/* Active-item wave mark removed per Brees — the active background
   + bolder text already carries enough emphasis without the wave
   competing. Rule kept as `display: none` (instead of deleted) so
   reactivating it is a one-line toggle. */
.services-menu__item::before { display: none; }
.services-menu__item.is-active::before { display: none; }

/* Panel eyebrow wave-mark suppressed inside services panels —
   the "CARE WE PROVIDE" label sits in an already-busy stack
   (image + headline + body + CTA) and the wave added noise
   rather than character. The "BROWSE SERVICES" wave above the
   menu is kept (anchors the left rail nicely), and the global
   `.eyebrow::before` wave still applies everywhere else. */
.services-panel .eyebrow::before { display: none; }
.services-menu__num {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--stone);
  opacity: 0.7;
  letter-spacing: 0.02em;
}
.services-menu__item.is-active .services-menu__num {
  color: var(--creek-deep);
  opacity: 1;
}
.services-menu__name {
  font-size: 1.02rem;
}

/* ---- Focus pane ---- */
.services-focus {
  position: relative;
  min-height: 440px; /* steadies layout while panels swap (matches image height) */
}
.services-panel {
  display: none;
  /* 50/50 within the 80% focus pane = ~40% image / ~40% text of the
     full-width section (the menu takes the other 20%). */
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  animation: services-fade 0.45s var(--ease-out) both;
}
.services-panel.is-active { display: grid; }
.services-panel[hidden] { display: none; }

@keyframes services-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.services-panel__media {
  margin: 0;
  /* Fixed-height crop — kept short so the image roughly matches the
     height of the menu column beside it (per Brees), rather than
     overflowing above + below it. */
  height: clamp(340px, 26vw, 440px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--paper-deep);
}
.services-panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.services-panel__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}
.services-panel__title {
  /* Brief: service detail heading (H3) — 30px / 700. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.services-panel__copy {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--charcoal);
  margin: 0;
  max-width: 56ch;
}

/* Inline note (e.g., "Before & after photos coming soon" on
   Dentistry). Quiet, italic, small. Sits between copy + CTA. */
.services-panel__note {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--stone-warm);
  margin: 0;
  padding: 0.55rem 0.85rem;
  background: rgba(157, 215, 229, 0.18);
  border-radius: 8px;
}

.services-panel__cta {
  /* Per-panel "Book an appointment" CTA (Vivid Mid pill per brief).
     Sits below the copy, left-aligned with the body content. */
  margin-top: 0.75rem;
  align-self: flex-start;
}

/* Services menu rail arrows (injected by initServicesMenuRail) — sit
   above the scrollable pill rail on mobile and scroll it; hidden on
   desktop where the menu is a full vertical list. */
.services-menu__nav { display: none; }

/* ---- Mobile: stack the layout, convert menu to a horizontal
       pill rail at the top. Sticky behavior dropped on mobile to
       keep the experience uncluttered on small screens. ---- */
@media (max-width: 900px) {
  .services-page__layout {
    /* minmax(0,1fr), NOT 1fr — otherwise the column's auto floor grows to
       fit all 10 non-shrinking pills (~2000px), the rail stops being a
       scroll container (nothing to swipe), and body{overflow-x:clip}
       slices everything off at the viewport edge. minmax(0,…) lets the
       column shrink to the screen so the rail scrolls and copy wraps. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  /* Arrows sit ABOVE the rail (right-aligned), like the homepage
     "Care we provide" strip. The rail below scrolls + drags + swipes. */
  .services-menu__nav {
    display: flex;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
  }
  .services-arrow {
    display: inline-flex;
    flex: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(15, 64, 96, 0.18);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
  }
  .services-arrow:hover:not(:disabled),
  .services-arrow:focus-visible { background: var(--ink); color: var(--paper); }
  .services-arrow:disabled { opacity: 0.3; pointer-events: none; }
  .services-menu {
    position: static;
    margin-bottom: 0.5rem;
  }
  .services-menu__label {
    margin-bottom: 0.75rem;
  }
  .services-menu__list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-left: 0;
    padding-left: 0;
    gap: 0.4rem;
    /* Match the homepage "How we practice" strip: hidden scrollbar +
       free, smooth horizontal scroll (no snap jank). The edge-fade
       below is the swipe affordance instead of a visible scrollbar. */
    scrollbar-width: none;
    scroll-behavior: smooth;
    /* let the rail bleed slightly past the container so users
       feel it's scrollable */
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    padding-block: 0.25rem 0.75rem;
  }
  .services-menu__list::-webkit-scrollbar { display: none; }
  /* Swipe affordance — a soft edge fade signals "there's more to
     swipe." JS (initServicesMenuFade) toggles has-fade-left/right
     based on scroll position, so the cue clears at each end and the
     last pill fades out instead of hard-slicing at the screen edge. */
  .services-menu__list { --fade: 32px; }
  .services-menu__list.has-fade-right:not(.has-fade-left) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
  }
  .services-menu__list.has-fade-left.has-fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  }
  .services-menu__list.has-fade-left:not(.has-fade-right) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
            mask-image: linear-gradient(to right, transparent, #000 var(--fade));
  }
  .services-menu__item {
    flex-shrink: 0;
    /* Match the desktop gutter so the wavy mark doesn't crowd the
       number on mobile pills either. */
    padding: 0.55rem 1rem 0.55rem 2.25rem;
    border: 1px solid rgba(15, 64, 96, 0.12);
    border-radius: 999px;
    background: var(--paper);
    /* Pills stay single-line — text wrapping was making pills
       chunky (3+ lines tall on long names like "Wellness &
       Preventive Care"). Horizontal scroll handles overflow. */
    grid-template-columns: 1.5rem auto;
    gap: 0.4rem;
    align-items: center;
  }
  .services-menu__item .services-menu__name {
    white-space: nowrap;
    font-size: 0.95rem;
  }
  .services-menu__item::before {
    left: 0.7rem;
  }
  .services-menu__item.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .services-menu__item.is-active .services-menu__num {
    color: var(--creek);
  }
  .services-menu__item.is-active::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'><path d='M0 4 Q 4 0, 8 4 T 16 4 T 24 4 T 32 4' stroke='%236bbfdb' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  }

  .services-panel.is-active {
    /* minmax(0, 1fr) — NOT plain 1fr. Plain 1fr resolves to
       minmax(auto, 1fr), whose auto floor refuses to shrink below the
       content's intrinsic width, pushing the copy wider than the phone.
       body{overflow-x:clip} then slices the overflow off the right.
       minmax(0,…) lets the column shrink to the viewport so text wraps. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  /* Everything in the panel left-aligned on mobile (per Brees). */
  .services-panel__body {
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  .services-panel__copy { max-width: 100%; }
  .services-panel__cta { align-self: flex-start; }
  .services-panel__media {
    /* Shorter crop on mobile so the heading + copy sit higher and need
       less scrolling to reach (was a full 4:3 block). */
    height: clamp(180px, 46vw, 230px);
    aspect-ratio: auto;
    max-width: 100%;
  }
}

/* -----------------------------------------------------------
   17 — FAQ (homepage section, between Services and Closer)
   Editorial side-by-side. Sticky title block LEFT, native
   <details>/<summary> accordion RIGHT. Page barely grows
   when answers expand because only the right column changes
   height.
   ----------------------------------------------------------- */
.faq {
  /* Shares the services-strip wash (Feedbucket 2026-06-05, Brees):
     services fades paper-warm → paper, and the FAQ continues at that
     end color (solid --paper) so the two sections read as one
     continuous background with no seam/divider between them. */
  background: var(--paper);
  /* Asymmetric block padding so the wavy bottom divider has
     clearance below the accordion before the wave starts. Top
     tightened so the first toggle's top rule sits close under the
     reviews wave above (mirrors Founders hugging the hero wave). */
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(5.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
/* FAQ pricing callout — styled to match the sec2 `.mission--navy`
   card: navy fill (--ink), rounded corners, white body, powder-
   blue eyebrow label. Sits inside an open .faq__item for fees or
   quick-reference asides. Reusable anywhere a navy callout makes
   sense (services panels, team participation, etc.). */
.faq__callout {
  margin: 1.5rem 0 0.5rem;
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.25vw, 2rem);
  background: var(--ink);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.10),
    0 22px 48px rgba(15, 64, 96, 0.18);
}
.faq__callout-label {
  margin: 0 0 0.625rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--creek);
}
.faq__callout-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper);
}

/* WAVE divider — FAQ → CTA per brief. Fills with Midnight Cove
   (--ink) so the dark CTA section reads as rising up through the
   warm-paper FAQ via a creek-bank silhouette. Negative bottom
   inset bites into the closer below by 2px to prevent any visible
   sub-pixel hairline at the seam. */
.faq::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.faq > .container {
  position: relative;
  z-index: 1; /* above page-creek SVG */
}

/* Wave divider REMOVED from .faq — the closer now owns its own
   wavy top edge via mask-image (see .closer rule in section 10).
   FAQ's bottom padding is intentionally generous so the closer's
   negative margin-top (which overlaps FAQ by --wave-h) doesn't
   crash into the accordion or the sticky title block. */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* Sticky title block on the left */
.faq__intro {
  position: sticky;
  top: 140px; /* clears sticky header stack */
  align-self: start;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.faq__title {
  font-family: var(--font-display);
  /* Brief: section H2 — 38px / 700. */
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.25rem 0 0;
}
.faq__title em {
  /* Brief: single-color headings — em inherits title color/weight. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.faq__closing {
  font-size: 1.0625rem;
  color: var(--charcoal);
  line-height: 1.6;
  margin: 0;
  max-width: 32ch;
}
.faq__intro .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Accordion list (right column) */
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(15, 64, 96, 0.14);
}
.faq__item {
  border-bottom: 1px solid rgba(15, 64, 96, 0.14);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  /* Brief: FAQ questions — 18px / 600 weight. */
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.2s var(--ease);
  user-select: none;
}
/* Remove default disclosure marker (cross-browser) */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q > span { flex: 1 1 auto; }
.faq__q:hover { color: var(--creek-deep); }
.faq__q:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq__icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  color: var(--ink);
  transition: transform 0.35s var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); /* + → x */ }
.faq__item[open] .faq__q { color: var(--creek-deep); }

/* Answer body */
.faq__a {
  padding: 0 0.25rem 1.5rem;
  color: var(--charcoal);
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: 64ch;
}
.faq__a p { margin: 0 0 1rem; }
.faq__a p:last-child { margin: 0; }
.faq__inline-link {
  color: var(--creek-deep);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.faq__inline-link:hover { color: var(--ink); }

/* Soft fade when an answer opens */
.faq__item[open] .faq__a {
  animation: faq-fade 0.4s var(--ease-out) both;
}
@keyframes faq-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: stack columns, drop sticky behavior */
@media (max-width: 900px) {
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .faq__intro {
    position: static;
  }
  .faq__closing { max-width: none; }
}

/* -----------------------------------------------------------
   19 — Ways to Pay page
   Centered prose on the warm paper gradient, a "We accept"
   methods card, and the Heart Dog & Cat Fund highlighted as a
   navy card. Wavy bottom divider flows into the dark closer.
   ----------------------------------------------------------- */
.page-hero--pay::before {
  /* Pet-owner lifestyle photo behind the Midnight Cove band. Matches the
     services hero's faint tonal gradient (base 0.15 opacity + luminosity
     blend) per Brees — was a heavier 0.55. Keeps the dog-framed crop. */
  background-image: url('../assets/images/pay-hero-bg.jpg');
  background-position: center 88%;
}

.pay-section {
  /* Per-section fixed-px gradient per brief (powder -> off-white). */
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  /* Tight top so content hugs the hero wave; deep bottom for the
     wave into the closer. */
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(5.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.pay-section > .container {
  position: relative;
  z-index: 1; /* above page-creek SVG */
  /* Full-width like the rest of the site — drop the 1280 container
     cap, use section-level clamp gutters (max 60px per side) so the
     content fills the viewport instead of floating in a centered
     column. Matches founders / intentional / services. */
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 60px);
}
.pay-wrap {
  /* Span the full padded width (gutters come from the container). */
  max-width: none;
  margin-inline: 0;
}
.pay-heading {
  font-family: var(--font-display);
  font-weight: 700;
  /* Match the Heart Fund card's title size so the two column heads
     read as a cohesive pair. */
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;   /* spacing handled by the column gap below */
}
.pay-heading em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;   /* single-color heading per brief */
}

/* Two columns: left = intro prose + "We accept" card stacked; right =
   the Heart Fund navy card. Equal widths so the two sides read as a
   balanced pair. */
.pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  /* stretch so both columns share the row height; the "We accept"
     callout is pinned to the bottom of the left column so the two
     columns end even with each other. */
  align-items: stretch;
}
/* Left column: head (wave + eyebrow + title), prose, then "We accept"
   card, stacked. Top padding matches the Heart Fund card's padding so
   both column heads line up at the same vertical position. */
.pay-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 3rem);
}
/* Tight wave/eyebrow -> title spacing inside the head. */
.pay-col__head .eyebrow { margin-bottom: 0.6rem; }
.pay-prose p {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--charcoal);
  margin: 0 0 1.25rem;
}

/* "We accept" card — white notecard on the warm paper, creek-cyan
   check marks. */
/* No box — the "We accept" group reads like the sec2 (founders)
   mission callout: a hairline rule, a vivid-blue label, and an
   inline dot-separated list. Pinned to the bottom of the left column
   so it lines up with the foot of the Heart Fund card. */
.pay-methods {
  margin-top: auto;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid rgba(15, 64, 96, 0.14);
}
.pay-methods__label {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--creek-deep);   /* vivid blue, matching the sec2 "Our Mission" eyebrow */
}
/* Inline dot-separated list (matches .values-tags on sec2). */
.pay-methods__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.pay-methods__list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* Vivid Mid dot separator between methods (not after the last). */
.pay-methods__list li:not(:last-child)::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--creek-deep);
}

/* Heart Dog & Cat Fund — navy highlight card (matches the homepage
   mission/FAQ navy callouts). */
.heart-fund {
  scroll-margin-top: 180px; /* clears the sticky header on anchor jump */
  /* Third column in the pay-grid row — no top margin needed. */
  margin-top: 0;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 3rem);
  background: var(--ink);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.10),
    0 26px 56px rgba(15, 64, 96, 0.22);
}
.heart-fund__wave-mark {
  display: block;
  color: var(--creek);
  margin-bottom: 0.6rem;
}
.heart-fund__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  /* Match the "Billing & financing" eyebrow exactly so the two column
     labels read at the same size. */
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creek);
}
.heart-fund__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 1.25rem;
}
.heart-fund p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.1rem;
}
.heart-fund p:last-child { margin-bottom: 0; }

/* Wavy bottom divider — pay-section -> dark closer (fills --ink). */
.pay-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Stack the two columns on tablet/mobile. */
@media (max-width: 768px) {
  .pay-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   20 — Careers / Join the Team page
   ----------------------------------------------------------- */
.page-hero--careers::before {
  /* Faint photo texture behind the Midnight Cove band. The two cats sit
     in the left-center of the frame, so bias the crop there to keep both
     of their faces in view (per Brees). */
  background-image: url('../assets/images/careers-hero-bg.jpg');
  background-position: 38% 28%;
}

/* Team hero: the founders-under-the-tent photo. Matches the services
   hero's faint tonal gradient (base 0.15 opacity + luminosity blend) per
   Brees — was a heavier 0.42. Keeps the founders-aimed framing. */
.page-hero--team::before {
  background-position: center 60%;
}

/* ---- Who we are (light) ---- */
.careers-intro {
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(5.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.careers-intro > .container {
  position: relative;
  z-index: 1;
  /* Full-width like the homepage intentional section so the tab
     panel reads as a true 50/50 image + text split. */
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 60px);
}
.careers-intro__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 3.5vw, 2.75rem);
}
.careers-intro__head .eyebrow { align-items: center; }
.careers-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.6rem 0 0.75rem;
}
.careers-heading em { font-style: normal; font-weight: inherit; color: inherit; }
.careers-intro__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--stone);
}

/* Light-background overrides for the shared tab pattern (the base
   .tab styles are tuned for the dark intentional band). */
.careers-intro .tab {
  border-color: var(--border);
  background: var(--white);
  color: var(--ink);
}
.careers-intro .tab:hover {
  background: var(--paper-warm);
  color: var(--ink);
}
.careers-intro .tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: 0 6px 16px rgba(15, 64, 96, 0.20);
}
.careers-intro .tab-panel__index { color: var(--creek-deep); }
.careers-intro .tab-panel__heading { color: var(--ink); }
.careers-intro .tab-panel__copy { color: var(--charcoal); }
/* Wave -> dark values band. */
.careers-intro::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ---- Our values (dark band) ---- */
.careers-values {
  background: var(--ink);
  /* Tighter top so the wave-mark eyebrow sits closer under the wave
     seam above. */
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(5.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.careers-values > .container { position: relative; z-index: 1; max-width: none; padding-inline: clamp(1.5rem, 4vw, 60px); }

/* Two columns: values on the left, a warm photo on the right (50/50
   like the "Who we are" panel so the image runs as wide as possible). */
.careers-values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  /* Full width — span the whole section edge-to-edge (not the 1280
     site container). */
  max-width: none;
  margin: 0;
}
.careers-values__media {
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
  box-shadow: 0 26px 56px rgba(7, 30, 48, 0.32);
}
.careers-values__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 70% center;   /* keep the dog in frame on the cover-crop */
}
.careers-values__content { align-self: center; }
.careers-values__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin: 0.65rem 0 1rem;
}
.careers-values__lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}
/* Editorial values list (replaces the boxes) — value name in powder
   blue over a soft white description, separated by hairline rules. */
/* 2x2 grid of the four values — hairline rule above each cell keeps
   the editorial ledger feel (NOT boxes/cards, per the client). */
.value-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  row-gap: clamp(1.1rem, 2vw, 1.6rem);
}
.value-row {
  padding: clamp(0.85rem, 1.6vw, 1.15rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 600px) {
  .value-list { grid-template-columns: 1fr; }
}
.value-row__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--creek);
  margin: 0 0 0.25rem;
}
.value-row__body {
  font-family: var(--font-body);
  font-size: 0.975rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
/* Wave -> light jobs section. */
.careers-values::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%23d8edf5'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ---- Job openings (light) ---- */
.jobs {
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(5.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.jobs > .container { position: relative; z-index: 1; max-width: 1440px; padding-inline: clamp(1.5rem, 4vw, 60px); }
.jobs__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 3.5vw, 2.75rem);
}
.jobs__head .eyebrow { align-items: center; }
.jobs__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ink);
  margin: 0.6rem 0 0.75rem;
}
.jobs__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  color: var(--charcoal);
  margin: 0;
}
.jobs__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Tight two-column: positions LEFT, application form RIGHT (sticky).
   Keeps the form right next to the openings with no dead space. */
/* Openings as full-width accordion rows; the apply card sits centered
   directly beneath them. (Full-width rows keep the job titles on one
   line — no two-line wrapping.) */
.jobs__layout { max-width: none; margin: 0; }
.jobs__layout .jobs__list {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.jobs__layout .apply-form {
  max-width: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.75rem, 2.4vw, 2.4rem);
  border-radius: 22px;
}
.jobs__layout .apply-form__head { max-width: none; margin-bottom: 1.2rem; }
.jobs__layout .apply-form__grid { grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 1.5vw, 1.25rem); }

/* Collapsed state: the card shows only the "Apply now" trigger; the
   fields stay hidden until clicked so the page stays short. */
.apply-form__open { width: auto; margin-top: 0.5rem; }
.apply-form__fields { animation: applyReveal 0.3s var(--ease-out); }
.apply-form__fields[hidden] { display: none; }
@keyframes applyReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .jobs__layout .jobs__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .jobs__layout .apply-form__grid { grid-template-columns: 1fr; }
}
/* Accordion card */
.job {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.05),
    0 14px 34px rgba(15, 64, 96, 0.07);
  overflow: hidden;
}
.job__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
}
.job__summary::-webkit-details-marker { display: none; }
.job__titlewrap { display: flex; flex-direction: column; gap: 0.3rem; }
.job__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
}
.job__pay {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--creek-deep);
}
.job__icon {
  flex-shrink: 0;
  color: var(--creek-deep);
  transition: transform 0.25s var(--ease-out);
}
.job[open] .job__icon { transform: rotate(45deg); }
.job__body {
  padding: 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border);
  animation: faq-fade 0.4s var(--ease-out) both;
}
.job__block { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.job__block-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creek-deep);
  margin: 0 0 0.75rem;
}
.job__block p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--charcoal);
  margin: 0 0 0.85rem;
}
.job__group {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1rem 0 0.5rem;
}
.job__list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.job__list li {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}
.job__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--creek-deep);
}

/* ---- How to apply (navy card) ---- */
.apply {
  max-width: 900px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  scroll-margin-top: 180px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--ink);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.10),
    0 26px 56px rgba(15, 64, 96, 0.22);
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.apply__wave-mark, .apply__head .heart-fund__wave-mark { display: block; color: var(--creek); margin-bottom: 0.6rem; }
.apply__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creek);
}
.apply__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}
.apply__lead {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1rem;
}
.apply__lead a {
  color: var(--creek);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.apply__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.apply__list li {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.7rem;
}
.apply__list li:last-child { margin-bottom: 0; }
.apply__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--creek);
}
/* Wave -> dark closer. */
.jobs::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 860px) {
  .careers-values__grid { grid-template-columns: 1fr; }
  .careers-values__media { min-height: 280px; }
  .careers-values__media img { min-height: 280px; }
}
@media (max-width: 768px) {
  .apply { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   21 — Contact page
   ----------------------------------------------------------- */
.page-hero--contact::before {
  background-image: url('../assets/images/building-exterior.jpg');
  background-position: center 50%;
}

.contact-section {
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(4rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.contact-section > .container { position: relative; z-index: 1; max-width: 1440px; padding-inline: clamp(1.5rem, 4vw, 60px); }

/* Section header above the columns. */
.contact-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 720px; }
.contact-head .contact-heading { margin-bottom: 0; }

/* Three columns: details · map · after-hours emergency. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;   /* the three columns line up top and bottom */
}
.contact-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.6rem 0 clamp(1.5rem, 2.5vw, 2rem);
}
.contact-heading em { font-style: normal; font-weight: inherit; color: inherit; }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-item__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--paper-warm);
  color: var(--creek-deep);
}
.contact-item__text { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-item__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creek-deep);
}
.contact-item__value {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}
a.contact-item__value:hover { color: var(--creek-deep); text-decoration: underline; text-underline-offset: 3px; }
.contact-item__value--muted { color: var(--stone); font-style: italic; font-weight: 500; }

.contact-social {
  margin-top: clamp(0.6rem, 1.2vw, 0.9rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact-social__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.contact-social__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; }
.contact-social__list a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--white);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.contact-social__list a:hover { background: var(--creek-deep); color: var(--white); border-color: var(--creek-deep); }

/* Map */
.contact-map {
  border-radius: 20px;
  overflow: hidden;
  /* No forced min-height on desktop so the column matches the details
     column (it stretches to that height); the map crops to fit. */
  min-height: 0;
  height: 100%;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.06),
    0 18px 40px rgba(15, 64, 96, 0.08);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

/* After-hours emergency - navy callout (third column, stacked) */
.contact-emergency {
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--ink);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.10),
    0 26px 56px rgba(15, 64, 96, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* center content so the stretched card isn't bottom-empty */
  gap: clamp(1.1rem, 2vw, 1.5rem);
}
.contact-emergency__head .heart-fund__wave-mark { display: block; color: var(--creek); margin-bottom: 0.6rem; }
.contact-emergency__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--creek);
}
.contact-emergency__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 700; line-height: 1.15;
  color: var(--white);
  margin: 0;
}
.contact-emergency__body p {
  font-family: var(--font-body);
  font-size: 1.0625rem; line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.9rem;
}
.contact-emergency__body a { color: var(--creek); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact-emergency__phone {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white) !important;
  text-decoration: none !important;
}
.contact-emergency__phone:hover { color: var(--creek) !important; }

/* Wave -> dark closer. */
.contact-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 320px; }
}

/* -----------------------------------------------------------
   22 — Careers application form (navy card, white fields)
   ----------------------------------------------------------- */
.apply-form {
  max-width: 900px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  scroll-margin-top: 180px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  /* Soft navy gradient + a powder-cyan glow so the card reads richer
     than a flat block. */
  background:
    radial-gradient(125% 90% at 85% -10%, rgba(107, 191, 219, 0.22), transparent 55%),
    linear-gradient(165deg, #13496b 0%, var(--ink) 55%, var(--ink-deep) 100%);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(15, 64, 96, 0.10),
    0 26px 56px rgba(15, 64, 96, 0.22);
}
.apply-form__head { margin: 0 auto clamp(1.5rem, 3vw, 2rem); max-width: 640px; text-align: center; }
.apply-form__head .heart-fund__wave-mark { display: block; color: var(--creek); margin: 0 auto 0.6rem; }
.apply-form__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--creek);
}
.apply-form__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.125rem);
  font-weight: 700; line-height: 1.15;
  color: var(--white);
  margin: 0 0 0.75rem;
}
.apply-form__intro {
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.apply-form__intro a { color: var(--creek); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.apply-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}
.field__req { color: var(--creek); }
.field__hint { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--creek);
  box-shadow: 0 0 0 3px rgba(107, 191, 219, 0.35);
}
.field input[type="file"] {
  padding: 0.55rem 0.6rem;
  font-size: 0.9rem;
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled { opacity: 0.6; }
.apply-form__submit { margin-top: clamp(1.5rem, 3vw, 2rem); }
.apply-form__success {
  margin: 1rem 0 0;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600;
  color: var(--creek);
}
@media (max-width: 640px) {
  .apply-form__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   23. SERVICE PAGES (SEO pattern: one indexable page per
   service + sticky sibling pill nav). Used by /services/<slug>/
   and the services.html hub grid.
   ============================================================ */

/* Breadcrumb */
.svc-breadcrumb {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.svc-breadcrumb .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding-block: 0.85rem;
  font-family: var(--font-body); font-size: 0.85rem;
}
.svc-breadcrumb a { color: var(--creek-deep); text-decoration: none; font-weight: 600; }
.svc-breadcrumb a:hover { text-decoration: underline; }
.svc-breadcrumb [aria-current="page"] { color: var(--stone); }
.svc-breadcrumb__sep { color: var(--stone); opacity: 0.55; }

/* Sticky sibling pill nav — looks like tabs, behaves like real links.
   Docks right under the sticky header stack via --stack-h. */
.svc-pillnav {
  position: sticky;
  top: var(--stack-h, 96px);
  z-index: 20;
  background: rgba(249, 247, 244, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.svc-pillnav__scroll {
  display: flex; gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--container-wide);
  margin: 0 auto;
}
.svc-pillnav__scroll::-webkit-scrollbar { display: none; }
.svc-pill {
  flex: 0 0 auto;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--white); white-space: nowrap;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.svc-pill:hover { border-color: var(--creek-deep); color: var(--creek-deep); }
.svc-pill.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Service hero/content */
.svc-page {
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 520px);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}
.svc-page__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.svc-page__media {
  margin: 0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 56px rgba(15, 64, 96, 0.16);
}
.svc-page__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-page__title {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800;
  color: var(--ink); line-height: 1.1; margin: 0.5rem 0 1.25rem;
}
.svc-page__copy {
  font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: 1.7;
  color: var(--charcoal); margin: 0 0 1.25rem;
}
.svc-page__note {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--stone);
  background: var(--paper-warm); border-radius: 12px;
  padding: 0.75rem 1rem; margin: 0 0 1.25rem;
}
.svc-page__cta { margin-top: 0.5rem; }
@media (max-width: 860px) {
  .svc-page__grid { grid-template-columns: 1fr; }
  .svc-page__media { order: -1; max-height: 360px; }
}

/* Related services */
.svc-related {
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.svc-related__title {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700;
  color: var(--ink); margin: 0.4rem 0 1.25rem;
}
.svc-related__links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.svc-related__link {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  color: var(--ink); text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--white);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.svc-related__link:hover { border-color: var(--creek-deep); color: var(--creek-deep); }

/* Services hub grid (services.html) — cards that link out to each
   service page. Replaces the old JS tab menu + focus pane. */
.svc-hub__intro { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.svc-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.svc-hub__card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 64, 96, 0.05), 0 14px 34px rgba(15, 64, 96, 0.06);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.svc-hub__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15, 64, 96, 0.12); }
.svc-hub__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.svc-hub__num {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  color: var(--white); background: rgba(15, 64, 96, 0.62);
  border-radius: 999px; padding: 2px 9px;
}
.svc-hub__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); padding: 1rem 1.1rem 0.3rem;
}
.svc-hub__more {
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  color: var(--creek-deep); padding: 0 1.1rem 1.1rem; margin-top: auto;
}


/* ============================================================
   24. GALLERY PAGE — masonry grid + lightbox
   ============================================================ */
.page-hero--gallery::before {
  background-image: url('../assets/images/gallery/gallery-30.jpg');
  background-position: center 62%;
}
/* Contact hero — the pit bull at the CCV "coming soon" site (the exact
   photo Brees provided). */
.page-hero--contact::before {
  background-image: url('../assets/images/contact-hero-bg.jpg');
  background-position: center 64%;
  opacity: 0.55;
}
.gallery {
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 600px);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
}
/* Uniform grid that flows LEFT-TO-RIGHT so photos read in order
   (the old CSS-columns masonry flowed top-to-bottom per column).
   Tiles are a fixed 4:3 with object-fit cover; the lightbox shows
   each photo uncropped on click. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
}
.gallery__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 2px rgba(15, 64, 96, 0.06), 0 14px 30px rgba(15, 64, 96, 0.08);
  transition: box-shadow 0.25s var(--ease-out);
}
.gallery__item:hover { box-shadow: 0 18px 44px rgba(15, 64, 96, 0.18); }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;   /* keep faces/tops in frame on the 4:3 crop */
  display: block;
  transition: transform 0.45s var(--ease-out);
}
/* Interior shots whose subject sits low — center the crop so the room
   reads instead of a blank ceiling/wall (Brees circled these). */
.gallery__item img[src*="gallery-01.jpg"],
.gallery__item img[src*="gallery-04.jpg"] {
  object-position: center;
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item:focus-visible { outline: 3px solid var(--creek-deep); outline-offset: 2px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(7, 30, 48, 0.93);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 90vw; max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background 0.2s var(--ease-out);
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__close { top: 20px; right: 20px; width: 46px; height: 46px; font-size: 1.8rem; line-height: 1; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; line-height: 1; }
.lightbox__prev { left: clamp(0.75rem, 3vw, 2rem); }
.lightbox__next { right: clamp(0.75rem, 3vw, 2rem); }
@media (max-width: 640px) {
  .lightbox__prev, .lightbox__next { width: 44px; height: 44px; font-size: 1.6rem; }
}



/* ============================================================
   25. "Coming soon" CTA state (Feedbucket 2026-06-05)
   Booking isn't live yet, so every "Book an appointment" CTA was
   relabeled "Coming soon" and is disabled here via its data-todo
   hook (no per-element class needed). Click is also guarded in JS.
   ============================================================ */
a[data-todo^="Book an appointment"] {
  /* Booking isn't live yet: keep the real "Book an appointment" label
     and stack a small "Coming soon" under it. Button stays styled
     normally but is non-interactive until scheduling goes live. */
  pointer-events: none;
  cursor: default;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.1;
}
.btn-soon {
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   Service-card click target (Feedbucket 2026-06-05: cards now
   link to their service pages — clients expected them clickable).
   A transparent overlay anchor stretches the whole card so the
   image + caption are one tap target, without restructuring the
   card or disturbing the caption styling. Pointer cursor + a
   subtle lift signal interactivity.
   ------------------------------------------------------------ */
.service-card { position: relative; }
.service-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}
.service-card.photo-print:hover { transform: translateY(-3px); transition: transform 0.25s ease, box-shadow 0.25s ease; }

/* ------------------------------------------------------------
   Service-panel photo reframes (Feedbucket 2026-06-05, Shawna).
   These selectors only bite on each service's OWN page, because
   the panel is only `.is-active` there (it's hidden on others).
   ------------------------------------------------------------ */
/* Urgent Care: "minimize to show a bit more of both the face and
   catheter." The photo is portrait, so a taller box lets the cover-
   crop reveal more of the face (top) + catheter (bottom) while
   staying full-bleed + consistent with the other panels (no bars). */
/* Urgent Care now uses a LANDSCAPE photo (1600x1067, Brees-supplied)
   that frames the cat's face, both ears, and the catheter/bandage in
   one shot — so it uses the standard full-bleed cover like every other
   panel, no special box/contain needed. */
/* Wellness: the cat's head/face (profile) sits high in the frame and
   the stethoscope dominates the bottom. Crop high to put the cat's
   face in view and drop the stethoscope. */
.services-panel.is-active[data-svc-panel="wellness"] .services-panel__media img {
  /* Top center crop (per Brees) so the cat's head reads. */
  object-position: top center;
}
/* Homepage Wellness card uses the same photo — top center there too. */
.service-card:has(.service-card__link[href="services.html#wellness"]) img {
  object-position: top center;
}
/* Happy Visits: the dog's eyes were cropped out (only the muzzle
   showed). Pull the crop up so the full face reads. */
.services-panel.is-active[data-svc-panel="happy-visits"] .services-panel__media img {
  object-position: center 24%;
}

/* Careers "Our Clients" photo: the two clients' faces sit at the top
   of a tall portrait shot, so the default center-crop showed only
   torsos. Anchor to the top so the faces are in frame. */
#cp-clients .tab-panel__display {
  object-position: center 6%;
}

/* ------------------------------------------------------------
   Mobile hero framing (Feedbucket 2026-06-05, Shawna: heroes
   "look completely different on mobile"). The banner photos are
   positioned for desktop's wide crop; on a tall phone viewport
   the cover-crop loses the subject. Re-aim the prominent ones so
   the subject stays in frame on mobile.
   ------------------------------------------------------------ */
@media (max-width: 800px) {
  /* Shorter, more landscape hero on phones so the cover-crop reads as
     a focused band (like desktop) instead of revealing the whole
     top-to-bottom composition. */
  .page-hero--banner {
    min-height: clamp(320px, 44vh, 420px);
    /* Reserve space for the wavy bottom seam so the vertically-centered
       copy never drifts down into / overlaps the wave on tall phone
       viewports (Brees 2026-06-08: lede last line was kissing the seam
       on team/join-the-team/ways-to-pay/services). */
    padding-bottom: clamp(56px, 8vw, 72px);
  }
  /* Zoom past cover so there's room to frame the dog (he sits small +
     low-right in a wide environmental shot), then aim at him. */
  .page-hero--contact::before { background-size: auto 175%; background-position: 56% 64%; }
}

/* ------------------------------------------------------------
   Persistent "Coming soon — July 2026" corner badge (all pages).
   Fixed bottom-right, informational only (pointer-events:none so it
   never intercepts clicks). Injected via the footer partial.
   ------------------------------------------------------------ */
.coming-soon-badge {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0.6rem 1.1rem;
  /* Bright creek blue so it stands out on every section (the navy
     version blended into the dark bands). */
  background: var(--creek-deep);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(13, 150, 212, 0.4);
  font-family: var(--font-display);
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.coming-soon-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 64, 96, 0.34);
}
/* Gentle "ping" pulse so the badge catches the eye on every section. */
@keyframes coming-soon-ping {
  0%   { box-shadow: 0 10px 28px rgba(15, 64, 96, 0.28), 0 0 0 0 rgba(13, 150, 212, 0.55); }
  70%  { box-shadow: 0 10px 28px rgba(15, 64, 96, 0.28), 0 0 0 14px rgba(13, 150, 212, 0); }
  100% { box-shadow: 0 10px 28px rgba(15, 64, 96, 0.28), 0 0 0 0 rgba(13, 150, 212, 0); }
}
.coming-soon-badge { animation: coming-soon-ping 2.4s ease-out infinite; }
.coming-soon-badge:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .coming-soon-badge { animation: none; }
}
.coming-soon-badge__small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.coming-soon-badge__big {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .coming-soon-badge { padding: 0.5rem 0.85rem; }
  .coming-soon-badge__big { font-size: 0.92rem; }
}

/* ============================================================
   26. OPEN HOUSE PAGE (open-house.html)
   Cement Creek styling for the event invite + RSVP form.
   ============================================================ */

/* Hero photo a touch more present than the faint banner texture so
   the invite reads celebratory (still navy + wavy-bottom banner). */
/* Taller hero + vertical padding so the copy sits lower/centered
   instead of jammed against the top edge (Brees: bring text down). */
.page-hero--openhouse {
  min-height: clamp(500px, 66vh, 680px);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(4rem, 7vw, 6rem);
}
.page-hero--openhouse::before {
  background-image: url('../assets/images/open-house-hero-3.jpg');
  background-position: center;
  opacity: 0.30;
}

/* Ghost button recolored for the dark hero. */
.btn--ghost-on-dark {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  background: transparent;
}
.btn--ghost-on-dark:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

/* Hero date line — inline, de-boxed (Brees): a short creek-cyan
   rule, then the date + town with a creek-dot separator. Full
   Date/Time/Where live in the Plan-your-visit section. */
/* Hero action cluster — date line + CTAs + raffle note grouped with
   tight, even spacing so the lower hero reads as one block, not three
   scattered pieces. */
.oh-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 6px;
}
.oh-hero__dateline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}
.oh-hero__dateline::before {
  content: '';
  width: 30px; height: 2px;
  background: var(--creek);
  flex-shrink: 0;
}
.oh-hero__dateline-dot { color: var(--creek); font-weight: 700; }

.oh-hero__ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0;
}
.oh-hero__raffle {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}
.oh-hero__raffle strong { color: var(--white); }

/* Shared section head */
.oh-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
/* Eyebrow is a column flex (wave-mark stacked above the text), so
   centering it horizontally needs align-items, not justify-content.
   This centers the squiggle above the eyebrow word. */
.oh-section-head .eyebrow { align-items: center; }
.oh-section-head__sub { color: var(--charcoal); margin: 0.75rem auto 0; max-width: 56ch; }
.oh-section-head--on-dark .oh-section-head__sub--on-dark { color: rgba(255, 255, 255, 0.84); }

/* Sections 2 + 3 share ONE continuous gradient via this wrapper, so
   the paper-warm→paper fade spans both instead of restarting at each
   section boundary. */
.oh-intro-wash {
  background: linear-gradient(to bottom, var(--paper-warm) 0px, var(--paper) 760px);
}

/* Section 2 - intro strip (split: image + text, mirrors homepage sec2) */
.oh-strip { background: transparent; }
.oh-strip__note { margin-top: 1rem; font-size: 0.9rem; color: var(--stone, #8a8275); }

/* Section 3 - highlights grid (white notecards). Background is the
   shared .oh-intro-wash gradient above; section itself is transparent. */
.oh-highlights {
  background: transparent;
  /* Tighter top so the eyebrow sits closer to the section start. */
  padding-top: clamp(2rem, 4vw, 3.25rem);
}
.oh-highlights__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink); margin: 0; }
.oh-grid {
  display: grid;
  /* 6 tracks so 3 cards (span 2 each) read identically to a 3-col grid,
     but the trailing 2-card row can be centered by offsetting it one
     track on each side. */
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.oh-card { grid-column: span 2; }
/* Last row has 2 cards (Tour the space + Games, raffles & prizes) —
   shift them inward one track so the pair sits centered in the row. */
.oh-card:nth-child(4) { grid-column: 2 / span 2; }
.oh-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 880px) {
  .oh-grid { grid-template-columns: repeat(2, 1fr); }
  .oh-card,
  .oh-card:nth-child(4),
  .oh-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px) { .oh-grid { grid-template-columns: 1fr; } }
.oh-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 20px);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  box-shadow: 0 1px 4px rgba(15, 64, 96, 0.04), 0 14px 32px rgba(15, 64, 96, 0.06);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.oh-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(15, 64, 96, 0.08), 0 24px 48px rgba(15, 64, 96, 0.12); }
.oh-card__mark {
  display: block; width: 38px; height: 10px; margin-bottom: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12' fill='none'><path d='M1 8C8 5.5 14 5.5 21 8C28 10.5 34 10.5 41 8' stroke='%230d96d4' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%;
}
.oh-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--ink); margin: 0 0 0.5rem; }
.oh-card p { color: var(--charcoal); font-size: 0.97rem; line-height: 1.6; margin: 0; }

/* Section - Plan your visit (map + navy details card, split) */
.oh-plan { background: var(--paper); padding-top: clamp(2rem, 4vw, 3.25rem); }
.oh-plan__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink); margin: 0; }
.oh-plan__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
@media (max-width: 820px) { .oh-plan__grid { grid-template-columns: 1fr; } }
.oh-plan__map {
  border-radius: 24px;
  overflow: hidden;
  min-height: 380px;
  box-shadow: var(--shadow-md, 0 18px 40px rgba(15, 64, 96, 0.18));
}
.oh-plan__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.oh-plan__card {
  background: var(--ink);
  color: var(--white);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--shadow-md, 0 18px 40px rgba(15, 64, 96, 0.18));
}
.oh-plan__item { display: flex; flex-direction: column; gap: 6px; }
.oh-plan__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--creek); }
.oh-plan__value { font-size: 1.08rem; font-weight: 600; line-height: 1.4; color: var(--white); }
.oh-plan__sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.oh-plan__cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 820px) { .oh-plan__cta { align-self: stretch; text-align: center; } }

/* Section 6 - RSVP form (navy band + white form card) */
.oh-rsvp {
  background: var(--ink);
  color: var(--white);
  /* Tighter top (eyebrow closer to the wave seam) + extra bottom
     room so the wave seam clears the form card. */
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.oh-rsvp .container { position: relative; z-index: 1; }

/* Wave seam at the BOTTOM of the navy form section — fills with the
   light Plan-your-visit bg (--paper) so the form lifts back into the
   light section with a water-ripple edge. */
.oh-rsvp::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%23F9F7F4'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Wave seam at the BOTTOM of Event Highlights — fills with the navy
   form bg (--ink) so the form rises into the light highlights above
   it. This forms the TOP seam of the form section. */
.oh-highlights { position: relative; }
.oh-highlights::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Wave seam at the BOTTOM of Plan-your-visit — fills with the navy
   footer bg (--ink) so the footer rises into the light section. */
.oh-plan { position: relative; }
.oh-plan::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 7vw, 88px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,28 C240,65 480,5 720,35 C960,65 1200,10 1440,38 L1440,70 L0,70 Z' fill='%230f4060'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.oh-rsvp__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--white); margin: 0; }
.oh-rsvp__title em { font-style: normal; color: var(--creek); }
/* Keep the RSVP headline on a single line on desktop (the 640px
   section-head cap was forcing a wrap); re-wrap on narrow screens. */
.oh-rsvp .oh-section-head { max-width: 900px; }
.oh-rsvp__title { white-space: nowrap; }
@media (max-width: 980px) {
  .oh-rsvp .oh-section-head { max-width: 640px; }
  .oh-rsvp__title { white-space: normal; }
}

.oh-form {
  background: var(--white);
  color: var(--charcoal);
  border-radius: 24px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.oh-form__ticket {
  background: rgba(13, 150, 212, 0.08);
  border: 1.5px solid rgba(13, 150, 212, 0.3);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.oh-form__ticket strong { display: block; color: var(--ink); margin-bottom: 4px; }
.oh-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px) { .oh-form__row { grid-template-columns: 1fr; } }
.oh-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.oh-field--full { grid-column: 1 / -1; }
.oh-field label { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.oh-req { color: var(--creek-deep); }
.oh-field input, .oh-field textarea {
  font-family: inherit; font-size: 0.95rem;
  padding: 12px 15px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--white); color: var(--charcoal);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.oh-field input:focus, .oh-field textarea:focus {
  outline: none; border-color: var(--creek-deep);
  box-shadow: 0 0 0 3px rgba(13, 150, 212, 0.12);
}
.oh-field textarea { resize: vertical; min-height: 84px; }
.oh-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 480px) { .oh-radio-group { grid-template-columns: 1fr; } }
.oh-radio {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 18px;
  border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; font-weight: 500; color: var(--charcoal);
  margin: 0; transition: border-color 0.2s, background 0.2s;
}
.oh-radio:hover { border-color: var(--creek-deep); background: rgba(13, 150, 212, 0.03); }
.oh-radio:has(input:checked) { border-color: var(--creek-deep); background: rgba(13, 150, 212, 0.07); }
.oh-radio input { accent-color: var(--creek-deep); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.oh-pet-block {
  border: 1.5px dashed rgba(13, 150, 212, 0.28);
  border-radius: 16px;
  padding: 20px;
  margin: 6px 0 16px;
  background: rgba(13, 150, 212, 0.03);
}
.oh-pet-block__note { font-size: 0.88rem; color: var(--charcoal); font-style: italic; margin: 0 0 14px; line-height: 1.5; }
.oh-form__submit { text-align: center; margin-top: 12px; }
.oh-form__submit .btn { padding: 0.95rem 2.6rem; }
.oh-form__foot { text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; margin: 20px auto 0; max-width: 52ch; }
.oh-form__thanks {
  background: var(--white);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.oh-form__thanks strong { display: block; color: var(--creek-deep); margin-bottom: 6px; font-size: 1.15rem; }

/* ============================================================
   27. OPEN HOUSE POPUP (homepage only)
   ============================================================ */
.oh-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(7, 30, 48, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.oh-popup-overlay.open { opacity: 1; visibility: visible; }

.oh-popup {
  background: var(--white);
  border-radius: 24px;
  width: 100%; max-width: 880px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
  display: grid; grid-template-columns: 1.05fr 1fr;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.oh-popup-overlay.open .oh-popup { transform: translateY(0) scale(1); }

.oh-popup__visual {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: 44px 38px;
  /* Cluster the pill + heading + sub at the top (sub moves up); the
     date card is pinned to the bottom via margin-top:auto below. */
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 460px;
  isolation: isolate;
}
.oh-popup__visual::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Same image as the Open House Section 2 split. */
  background-image: url('../assets/images/gallery/gallery-17.jpg');
  background-size: cover; background-position: center;
  opacity: 0.22; mix-blend-mode: luminosity;
}
.oh-popup__pill {
  display: inline-flex; align-self: flex-start; align-items: center;
  background: var(--creek-deep); color: var(--white);
  padding: 7px 15px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.oh-popup__h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.05;
  color: var(--white); margin: 22px 0 8px;
}
.oh-popup__sub { font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0; }
.oh-popup__date {
  display: inline-flex; align-items: center; gap: 13px;
  background: var(--white); color: var(--ink);
  padding: 12px 18px; border-radius: 13px; align-self: flex-start;
  margin-top: auto;   /* pin to the bottom of the visual panel */
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.45);
}
.oh-popup__date-chip {
  background: var(--creek-deep); color: var(--white);
  width: 50px; height: 50px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.oh-popup__date-m { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2px; }
.oh-popup__date-d { font-size: 22px; font-weight: 800; }
.oh-popup__date-meta strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.oh-popup__date-meta span { display: block; font-size: 12px; color: var(--charcoal); line-height: 1.35; }

.oh-popup__body {
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--white);
}
.oh-popup__wave-mark { display: block; margin-bottom: 10px; }
.oh-popup__kicker { display: block; color: var(--creek-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.oh-popup__h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.2; color: var(--ink); margin: 0 0 12px; }
.oh-popup__p { color: var(--charcoal); font-size: 0.95rem; line-height: 1.6; margin: 0 0 22px; }
.oh-popup__list {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.oh-popup__list li {
  font-size: 0.9rem; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.oh-popup__list li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--creek-deep); flex-shrink: 0;
}
.oh-popup__ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oh-popup__rsvp { flex: 1; min-width: 180px; justify-content: center; }
.oh-popup__later {
  background: transparent; border: 0; cursor: pointer;
  color: var(--charcoal); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  padding: 12px 14px;
}
.oh-popup__later:hover { color: var(--ink); }

.oh-popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95); color: var(--ink);
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, background 0.2s; z-index: 5;
}
.oh-popup__close:hover { transform: rotate(90deg); background: var(--white); }

@media (max-width: 760px) {
  .oh-popup { grid-template-columns: 1fr; max-height: calc(100vh - 30px); overflow-y: auto; }
  .oh-popup__visual { min-height: auto; padding: 34px 28px; }
  .oh-popup__h2 { font-size: 1.7rem; }
  .oh-popup__body { padding: 30px 28px; }
  .oh-popup__h3 { font-size: 1.3rem; }
  .oh-popup__list { grid-template-columns: 1fr; }
  .oh-popup__ctas { flex-direction: column; }
  .oh-popup__rsvp { width: 100%; }
  .oh-popup__later { width: 100%; }
}

/* Visits tab (homepage intentional): show the dog's full head, not a tight face-crop. */
#p-visits .tab-panel__display { object-position: center 22%; }

/* Header phone icon: "Coming soon" tooltip on hover/focus (the number
   is not live yet). Kept as a tooltip so it does not collide with the
   Book button which already shows "Coming soon". */
.site-header__icon-link[data-soon] { position: relative; }
.site-header__icon-link[data-soon]::after {
  content: attr(data-soon);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-family: var(--font-body); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 10px; border-radius: 8px;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease;
  box-shadow: 0 8px 20px rgba(15,64,96,0.25); pointer-events: none; z-index: 60;
}
.site-header__icon-link[data-soon]:hover::after,
.site-header__icon-link[data-soon]:focus-visible::after { opacity: 1; visibility: visible; }