/* ==========================================================================
   Animal Health Center & Pet Resort — Sample 3  ·  BRIGHT & PLAYFUL PREMIUM
   Light, airy, warm. Cutouts are the stars. Soft shadows, rounded everything,
   teal (pet) + amber (ranch) accents on cream/white. Plain CSS (Tailwind CDN
   can't process @apply/@layer in a .css file).
   ========================================================================== */

:root {
  --cream:   #FBF6EC;   /* warm paper base */
  --cream-2: #F3EADB;
  --sand:    #EFE3CE;
  --white:   #FFFFFF;
  --ink:     #20180F;   /* warm near-black */
  --ink-soft:#6b5d4d;

  --teal:    #1B6B6B;   /* pet world */
  --teal-2:  #2c9494;
  --teal-ink:#0f3d3d;
  --amber:   #C17F24;   /* ranch / highlight */
  --amber-2: #E6A93F;
  --peach:   #F6D9A8;
  --forest:  #3E6B23;   /* small accent only */
  --rust:    #9c4a1a;

  --ring: 0 0 0 4px rgba(193,127,36,.30);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-sm: 0 4px 14px -6px rgba(60,40,16,.18);
  --shadow:    0 22px 50px -24px rgba(60,40,16,.32);
  --shadow-lg: 0 40px 80px -32px rgba(60,40,16,.40);
  --cut-shadow: drop-shadow(0 28px 26px rgba(60,40,16,.30));

  /* paw glyph used as a CSS mask (group headings, dividers) */
  --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 10.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM5 14.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm14 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm-7 .5c2.2 0 4 1.6 4 3.6 0 1.3-1 2.4-2.3 2.4-.7 0-1.1-.2-1.7-.4-.6-.2-1.3-.2-2 0-.6.2-1 .4-1.7.4C7.3 21 6.3 19.9 6.3 18.6 6.3 16.6 9.8 15 12 15Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,.font-heading {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
}
.display { font-weight: 900; line-height: .95; letter-spacing: -.04em; }

::selection { background: var(--amber-2); color: #2a1c08; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }

/* reveal safety net — JS forces these visible if GSAP is blocked/reduced */
[data-anim] { will-change: transform, opacity; }

/* anti-FOUC — Tailwind CDN compiles in-browser, so for a beat the `hidden` /
   `lg:hidden` utilities on the two nav menus aren't applied yet and both flash
   into normal flow over the hero. These attribute-keyed fallbacks (no Tailwind
   needed) keep the desktop nav and the closed mobile drawer hidden until the
   utilities take over. The mobile drawer's own opacity:0 rule lives below. */
[data-site-header] nav[aria-label="Primary"] { display: none; }
@media (min-width: 1024px) {
  [data-site-header] nav[aria-label="Primary"] { display: flex; }
}

/* ==========================================================================
   ORGANIC blob shapes & soft warm scenery (behind content)
   ========================================================================== */
.blob { position:absolute; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; pointer-events:none; z-index:0; }
.blob--peach { background: radial-gradient(circle at 35% 30%, var(--peach), #f2c987); opacity:.6; }
.blob--teal  { background: radial-gradient(circle at 35% 30%, #bfe6e6, #8fd0d0); opacity:.55; }
.blob--amber { background: radial-gradient(circle at 35% 30%, #f6dca6, #e8b864); opacity:.5; }
.soft-glow   { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; z-index:0; }

/* dotted texture accent */
.dotgrid {
  background-image: radial-gradient(rgba(60,40,16,.10) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

/* sunrise hero wash */
.sunrise {
  background:
    radial-gradient(120% 90% at 15% 0%, #FFFDF8 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 10%, #FCEFD3 0%, transparent 60%),
    linear-gradient(180deg, #FFFDF7 0%, var(--cream) 60%, var(--cream-2) 100%);
}

/* hero photo slideshow */
.hero-slideshow { min-height: 84vh; }
.hero-slideshow__slides { z-index:0; }
.hero-slideshow__slide {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2s ease-in-out;
}
.hero-slideshow__slide.is-active { opacity:1; }
.hero-slideshow__scrim {
  z-index:1;
  background: linear-gradient(180deg, rgba(20,15,8,.65) 0%, rgba(20,15,8,.55) 45%, rgba(20,15,8,.72) 100%);
}

/* ==========================================================================
   HOME HERO — full-bleed diagonal-sliced panorama.
   Four photos tile the whole hero edge to edge, separated only by angled
   seams, so they read as one continuous strip cut on the diagonal. Each slice
   is an absolutely-positioned parallelogram; neighbours overlap by the skew
   amount so there is never a gap. A scrim keeps the left-side copy readable.
   ========================================================================== */
.home-hero { min-height: 86vh; display: flex; flex-direction: column; justify-content: center;
  background: var(--ink); }

/* the panorama band fills the hero */
.home-hero__band { position: absolute; inset: 0; z-index: 0; }

/* --- SEAM GEOMETRY ---
   Vertical seams run at a slant. Each slice spans from just-before its start
   edge to just-after its end edge, then a clip-path parallelogram trims it to
   the slanted band. The top of each seam sits SKEW% to the right of the bottom,
   giving the forward-leaning diagonal. Boundaries (bottom x): 26% · 52% · 76%.
   --skew is how far the top edge shifts right of the bottom edge. */
.home-hero__slice {
  position: absolute; top: 0; bottom: 0; overflow: hidden;
  will-change: transform;
}
.home-hero__img {
  position: absolute; inset: -2% -2%;      /* slight bleed so parallax never shows an edge */
  background-size: cover; background-position: center; background-color: var(--ink);
}
/* rotating panel: crossfade store shots (uses shared rotate widget) */
.home-hero__slice[data-photo-rotate] .home-hero__img {
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.home-hero__slice[data-photo-rotate] .home-hero__img.is-active { opacity: 1; }

/* four slices, left→right. Each is clipped to a forward-leaning parallelogram.
   Widths overlap generously; the clip does the real edge work. The right cut of
   slices 1 to 3 is a diagonal from (right) at top to (right - 8vw) at bottom. */
.home-hero__slice--1 { left: 0;    width: 40%; z-index: 4;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8vw) 100%, 0 100%); }
.home-hero__slice--2 { left: 18%;  width: 44%; z-index: 3;
  clip-path: polygon(8vw 0, 100% 0, calc(100% - 8vw) 100%, 0 100%); }
.home-hero__slice--3 { left: 44%;  width: 42%; z-index: 2;
  clip-path: polygon(8vw 0, 100% 0, calc(100% - 8vw) 100%, 0 100%); }
.home-hero__slice--4 { left: 68%;  width: 40%; z-index: 1;
  clip-path: polygon(8vw 0, 100% 0, 100% 100%, 0 100%); }

/* Seam line drawn ON the slice's own right clip edge, so it can never drift out
   of register. The parent clip-path also clips its descendants, so we lay a
   skewed bar STRADDLING the diagonal cut: the parent trims off its outer half
   and the surviving inner half sits exactly on the cut. Because it shares the
   slice's own geometry and the same 8vw lean, it can never fall out of register.
   overflow:hidden clips a box-shadow, so the glow is baked into the gradient. */
.home-hero__slice::after {
  content: ""; position: absolute; top: -3%; bottom: -3%; z-index: 2;
  /* a wide skewed band whose LEFT edge follows the same diagonal as the cut;
     it starts 22px left of the cut and runs past it, so the parent clip leaves
     a clean hairline with a soft inner shadow for depth. */
  right: -20px; width: 44px; pointer-events: none;
  transform: skewX(-6.2deg);
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 34%,
    rgba(255,255,255,.92) 50%, rgba(255,255,255,.5) 56%,
    rgba(0,0,0,0) 100%);
}
/* the seam belongs to the cut, so hide it on the last slice (no right cut) */
.home-hero__slice--4::after { display: none; }

/* readability scrim over the photos: strong on the left, clearing to the right,
   plus a gentle bottom vignette so the marquee edge reads. */
.home-hero__scrim {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,11,6,.86) 0%, rgba(15,11,6,.72) 28%, rgba(15,11,6,.34) 52%, rgba(15,11,6,.06) 74%, rgba(15,11,6,0) 100%),
    linear-gradient(180deg, rgba(15,11,6,.35) 0%, rgba(15,11,6,0) 30%, rgba(15,11,6,0) 70%, rgba(15,11,6,.4) 100%);
}

/* mobile: a single diagonal cut looks cramped, so drop to one clean rotating
   photo band behind the copy, full-bleed, with a heavier scrim. */
@media (max-width: 640px) {
  .home-hero__slice--1, .home-hero__slice--3, .home-hero__slice--4,
  .home-hero__seam { display: none; }
  .home-hero__slice--2 { left: 0; width: 100%; z-index: 1; clip-path: none; }
  .home-hero__slice::after { display: none; }   /* no diagonal cut on mobile */
  .home-hero__scrim {
    background:
      linear-gradient(180deg, rgba(15,11,6,.55) 0%, rgba(15,11,6,.45) 45%, rgba(15,11,6,.72) 100%);
  }
}

/* ==========================================================================
   RESORT HERO — split editorial layout (warm panel + tilted photo cluster).
   Text and photos live side by side on desktop, stack cleanly on mobile so
   nothing is ever printed over a busy photo.
   ========================================================================== */
.resort-hero { min-height: 84vh; display: flex; align-items: center; }
.resort-hero__wash {
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(27,107,107,.14), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(193,127,36,.12), transparent 55%),
    linear-gradient(180deg, #FFFDF7 0%, var(--cream) 55%, var(--cream-2) 100%);
}

/* the tilted photo collage of happy guests.
   __slot = position + z-index (GSAP animates this: y/scale/opacity + parallax)
   __tilt = the fixed polaroid rotation (untouched by GSAP)
   __card = the visual frame (radius, shadow, white border) */
.resort-hero__gallery { position: relative; width: 100%; min-height: 32rem; }
.resort-hero__slot { position: absolute; will-change: transform; }
.resort-hero__card {
  position: relative; border-radius: 26px; overflow: hidden; background: var(--cream);
  box-shadow: 0 30px 60px -26px rgba(60,40,16,.5);
  outline: 6px solid #fff; outline-offset: -6px; /* white polaroid border */
  width: 100%; height: 100%;
}

/* sizes + positions — a balanced scrapbook scatter across the wide gallery box.
   The main card anchors the box height; the four accents each own a clear zone
   with only light, deliberate overlaps so every face reads.
   Zones (across the box): top-left, lower-left, CENTER (main), top-right,
   bottom-center-right. */
.resort-hero__slot--main {
  position: relative; width: 42%; margin-left: 29%; margin-right: auto;
  margin-top: 2rem; aspect-ratio: 4/5; z-index: 5;
}
.resort-hero__slot--top    { top: -1.5rem;    left: 0;      width: 30%; aspect-ratio: 3/4; z-index: 3; }
.resort-hero__slot--cat    { bottom: -0.5rem; left: 4%;     width: 27%; aspect-ratio: 3/4; z-index: 4; }
.resort-hero__slot--pup    { top: -1rem;      right: 0;     width: 28%; aspect-ratio: 3/4; z-index: 3; }
.resort-hero__slot--bottom { bottom: -2.5rem; right: 8%;    width: 28%; aspect-ratio: 3/4; z-index: 4; }

.resort-hero__tilt--main   { transform: rotate(2.5deg); }
.resort-hero__tilt--top    { transform: rotate(-6deg); }
.resort-hero__tilt--bottom { transform: rotate(5deg); }
.resort-hero__tilt--cat    { transform: rotate(-7deg); }
.resort-hero__tilt--pup    { transform: rotate(7deg); }

/* little hand-written-feel caption tag pinned to a card's lower edge */
.resort-hero__cap {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  background: #fff; color: var(--ink); white-space: nowrap;
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .72rem;
  padding: .3rem .7rem; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(60,40,16,.5);
}
.resort-hero__cap--teal { background: var(--teal); color: var(--cream); }

.resort-hero__badge {
  position: absolute; right: -1rem; bottom: 3.2rem; z-index: 6;
  background: #fff; border-radius: 20px; padding: .85rem 1.1rem; max-width: 12.5rem;
  box-shadow: 0 22px 44px -18px rgba(60,40,16,.45);
  transform: rotate(-3deg);
}

/* floating paw-heart accent, amber, top-right of the collage */
.resort-hero__pawheart {
  position: absolute; top: -1.5rem; right: 3.5rem; z-index: 6;
  width: 3.2rem; height: 3.2rem; color: var(--amber2);
  display: grid; place-items: center;
  background: #fff; border-radius: 50%; transform: rotate(10deg);
  box-shadow: 0 14px 30px -12px rgba(60,40,16,.45);
}
.resort-hero__pawheart svg { width: 62%; height: 62%; }

/* Tablet down: shrink the collage gracefully */
@media (max-width: 1023px) {
  .resort-hero__gallery { min-height: 26rem; max-width: 32rem; margin: 0 auto; }
}

/* Mobile: collapse the collage to ONE clean framed photo, no overlaps. */
@media (max-width: 640px) {
  .resort-hero { min-height: 0; }
  .resort-hero__gallery { min-height: 0; max-width: 100%; }
  .resort-hero__slot--main {
    width: 100%; margin: 0; aspect-ratio: 16/11; z-index: 3;
  }
  .resort-hero__tilt--main { transform: none; }
  .resort-hero__card {
    box-shadow: 0 24px 48px -22px rgba(60,40,16,.45); border-radius: 26px;
  }
  .resort-hero__slot--top,
  .resort-hero__slot--bottom,
  .resort-hero__slot--cat,
  .resort-hero__slot--pup,
  .resort-hero__pawheart,
  .resort-hero__cap { display: none; } /* badge carries the message on mobile */
  .resort-hero__badge {
    right: 1rem; bottom: 1rem; transform: none; padding: .7rem .9rem;
  }
}

/* ==========================================================================
   CUTOUTS — the stars. Clean-edge ones float anywhere; haloed ones live in frames.
   ========================================================================== */
.cutout { display:block; filter: var(--cut-shadow); user-select:none; -webkit-user-drag:none; position:relative; z-index:2; }
.cutout--abs { position:absolute; pointer-events:none; }

/* soft contact shadow ellipse under a grounded cutout */
.ground-shadow {
  position:absolute; left:50%; transform:translateX(-50%);
  width:66%; height:6%; bottom:1%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(60,40,16,.40), transparent 72%);
  filter: blur(7px); z-index:1; pointer-events:none;
}

/* haloed studio cutouts (dog-trot, cat, dog-groomed, terrier) carry a grey box.
   Frame them in a soft rounded card so the halo reads as a vignette, not a flaw. */
.in-frame {
  border-radius: 26px; overflow:hidden;
  background: radial-gradient(120% 120% at 50% 25%, #fff, var(--cream-2));
  box-shadow: var(--shadow); position:relative;
}
.in-frame img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }

/* dark variant — for photo cutouts that ship on a BLACK background (the
   grooming golden-retriever portraits). A light multiply frame would turn
   black; instead we sink them into a warm-dark frame so the edge disappears,
   and skip the blend. object-fit:cover fills the frame edge-to-edge. */
.in-frame--dark {
  background: radial-gradient(120% 120% at 50% 18%, #2a2018, #0e0a06);
  box-shadow: var(--shadow-lg);
}
.in-frame--dark img { object-fit:cover; mix-blend-mode:normal; }

/* ==========================================================================
   LIVE OPEN / CLOSED BADGE
   ========================================================================== */
.hours-badge { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.78rem;
  padding:.34rem .74rem; border-radius:999px; line-height:1; white-space:nowrap; }
.hours-badge::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; flex:none; }
.hours-badge.is-open { color:#1f8a4c; background:rgba(31,138,76,.14); }
.hours-badge.is-open::before { animation:badgePulse 2s var(--ease-out) infinite; }
.hours-badge.is-closed { color:#c25b3a; background:rgba(194,91,58,.14); }
@keyframes badgePulse { 0%{box-shadow:0 0 0 0 rgba(31,138,76,.5);} 70%{box-shadow:0 0 0 7px rgba(31,138,76,0);} 100%{box-shadow:0 0 0 0 rgba(31,138,76,0);} }

/* active nav */
[data-nav].is-active { color: var(--teal); }
[data-nav].is-active::after { content:""; display:block; height:3px; border-radius:3px; background:var(--amber-2); margin-top:4px; }

/* ==========================================================================
   BUTTONS — chunky, rounded, friendly-premium
   ========================================================================== */
.btn { display:inline-flex; align-items:center; gap:.55rem; font-family:"Nunito",sans-serif; font-weight:800;
  font-size:1rem; padding:.95rem 1.6rem; border-radius:16px; line-height:1;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s, color .3s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--amber { background:linear-gradient(180deg,var(--amber-2),var(--amber)); color:#2a1c08; box-shadow:0 14px 26px -10px rgba(193,127,36,.6); }
.btn--amber:hover { transform:translateY(-3px); box-shadow:0 22px 38px -12px rgba(193,127,36,.7); }
.btn--teal { background:var(--teal); color:var(--cream); box-shadow:0 14px 26px -12px rgba(27,107,107,.6); }
.btn--teal:hover { transform:translateY(-3px); box-shadow:0 22px 38px -12px rgba(27,107,107,.75); }
.btn--ink { background:var(--ink); color:var(--cream); }
.btn--ink:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.btn--ghost { background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px rgba(60,40,16,.14), var(--shadow-sm); }
.btn--ghost:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 2px rgba(60,40,16,.22), var(--shadow); }
.btn--ghost-light { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn--ghost-light:hover { transform:translateY(-3px); background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px #fff; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card { background:var(--white); border-radius:24px; box-shadow:var(--shadow-sm); }
.card-lift { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.card-lift:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

/* paw divider */
.paw-divider { display:flex; align-items:center; justify-content:center; gap:.9rem; padding:1rem 0; color:var(--amber); opacity:.55; }
.paw-divider::before,.paw-divider::after { content:""; height:2px; flex:1 1 auto; max-width:150px; background:linear-gradient(90deg,transparent,currentColor); border-radius:2px; }
.paw-divider::after { background:linear-gradient(90deg,currentColor,transparent); }
.paw-divider svg { width:24px; height:24px; flex:none; }

/* ==========================================================================
   PET PROFILE BUILDER tiles
   ========================================================================== */
.pet-tile { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.pet-tile:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow-lg); }
.pet-tile.is-active { box-shadow: 0 0 0 4px var(--amber-2), var(--shadow); transform: translateY(-3px); }

/* Full-bleed photo routing tiles ("Who are you caring for today?") */
.care-tile { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.care-tile:hover { transform: translateY(-6px); box-shadow: 0 28px 64px -28px rgba(60,40,16,.6); }
.care-tile__overlay {
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(26,18,8,0) 38%, rgba(26,18,8,.18) 58%, rgba(26,18,8,.78) 100%);
  transition: background .4s var(--ease-out);
}
.care-tile:hover .care-tile__overlay {
  background: linear-gradient(180deg, rgba(26,18,8,0) 30%, rgba(26,18,8,.24) 52%, rgba(26,18,8,.82) 100%);
}
.care-tile__label { position:absolute; left:0; right:0; bottom:0; padding:1.25rem 1.25rem 1.15rem; text-align:left; }
.care-tile__arrow {
  position:absolute; top:.9rem; right:.9rem; width:2.25rem; height:2.25rem;
  display:grid; place-items:center; border-radius:9999px;
  background: var(--amber-2); color:#2b1c08; font-weight:900; font-size:1.05rem; line-height:1;
  box-shadow: 0 8px 20px -8px rgba(60,40,16,.6);
  opacity:0; transform: translateY(-6px) scale(.85);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.care-tile:hover .care-tile__arrow,
.care-tile:focus-visible .care-tile__arrow { opacity:1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .care-tile, .care-tile:hover { transform:none; }
  .care-tile img { transition:none !important; }
  .care-tile:hover img { transform:none !important; }
  .care-tile__arrow { opacity:1; transform:none; }
}

/* ==========================================================================
   RANCH / COWBOY moment — warm, not dark. Sunset cream→amber with wood hint.
   ========================================================================== */
/* Photo-backed ranch section: the real cattle department behind the copy,
   parallaxed by GSAP (no background-attachment:fixed — that breaks on iOS). */
.ranch--photo { color:#fff; background:#241a10; }

/* parallax layer: taller than the section so it can drift without revealing edges */
.ranch-bg { position:absolute; left:0; right:0; top:-24%; height:148%; z-index:0;
  will-change: transform; pointer-events:none; }
.ranch-bg picture { display:block; width:100%; height:100%; }
.ranch-bg__img { width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }

/* readability overlay: dark enough to read, light enough the store stays recognizable */
.ranch-overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,13,6,.72) 0%, rgba(20,13,6,.52) 45%, rgba(20,13,6,.34) 100%),
    linear-gradient(180deg, rgba(20,13,6,.30) 0%, rgba(20,13,6,.10) 40%, rgba(20,13,6,.42) 100%);
}

.ranch h2,.ranch h3 { color:#fff; }
.lasso-rope { height:6px; border-radius:6px;
  background:repeating-linear-gradient(45deg,var(--amber-2) 0 9px,var(--rust) 9px 18px);
  box-shadow:0 2px 5px rgba(0,0,0,.35); }

/* category labels — light treatment so they read on the darkened photo */
.ranch-cats {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.65rem; font-family:"Nunito", system-ui, sans-serif; font-weight:800;
  font-size:1.0625rem; letter-spacing:.01em;
}
.ranch-cats--on-photo { color:#fff; text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.5); }
.ranch-cats--on-photo a { color:#fff; text-decoration:none; transition: color .2s var(--ease-out); }
.ranch-cats--on-photo a:hover { color: var(--amber-2); }
.ranch-cats--on-photo span { color: rgba(255,255,255,.5); }

/* ==========================================================================
   LOYALTY PUNCH CARD — premium membership card (teal, pops on cream)
   ========================================================================== */
.punch-card { position:relative; border-radius:24px; overflow:hidden; color:var(--cream);
  background: radial-gradient(140% 120% at 0% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, var(--teal-2) 0%, var(--teal) 50%, var(--teal-ink) 100%);
  box-shadow: var(--shadow-lg); }
.punch-card::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%); }
.punch-perf { height:0; border-top:2px dashed rgba(251,246,236,.4); margin:0 1.25rem; }
.stamp { position:relative; aspect-ratio:1/1; display:grid; place-items:center; border-radius:50%;
  border:2px dashed rgba(251,246,236,.5); color:rgba(251,246,236,.6); }
.stamp svg{ width:58%; height:58%; }
.stamp.is-stamped { border-style:solid; border-color:transparent; color:#2a1c08;
  background:radial-gradient(circle at 35% 30%,var(--amber-2),var(--amber)); box-shadow:0 6px 14px -6px rgba(0,0,0,.4); }
.stamp.is-reward { border-color:var(--cream); }
.stamp.is-reward.is-stamped { background:radial-gradient(circle at 35% 30%,#f6d98e,var(--amber-2)); }

/* before a lookup succeeds, cards show their empty state dimmed so it's
   clear the 0/5 and 0/10 shown isn't a real (zero-stamp) result yet */
.punch-card[data-active="false"] .punch-stamps,
.punch-card[data-active="false"] [data-reward] { opacity:.45; filter:grayscale(.3); }

/* lookup box above the card(s) */
.punch-lookup input[aria-invalid="true"] { border-color:#c25b3a; }
[data-punch-status] { font-weight:700; }
[data-punch-status].is-error { color:#c25b3a; }
[data-punch-status]:not(.is-error) { color: var(--teal-ink); }

/* checklist */
.ready-item input:checked ~ .ready-check { background:var(--teal); border-color:var(--teal); color:var(--cream); }
.ready-item input:checked ~ .ready-label { color:var(--teal-ink); }
.ready-check { transition: background .25s var(--ease-out), border-color .25s var(--ease-out); }

/* day in the life */
.dil-station.is-past .dil-dot { background:var(--amber-2); border-color:var(--amber-2); transform:scale(1.2); }
.dil-dot { transition: background .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out); }

/* marquee + reviews */
.edge-fade { -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
                     mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.reviews-track,.marquee-track { width:max-content; }

/* sticky book bar */
.booknow-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; transform:translateY(130%); transition:transform .5s var(--ease-out); }
.booknow-bar.is-visible { transform:translateY(0); }
@media (min-width:768px){ .booknow-bar{ left:50%; right:auto; bottom:1.5rem; transform:translate(-50%,180%);} .booknow-bar.is-visible{ transform:translate(-50%,0);} }

/* floating pill header */
[data-site-header] { transition: top .3s var(--ease-out); }
[data-site-header] > div { transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out); }
[data-site-header].is-stuck { top: 10px; }
/* once stuck, the pill can sit over any section (light or dark), not just the
   hero photo it starts on — needs a near-solid surface or the logo/nav wash
   out against whatever's behind it. */
[data-site-header].is-stuck > div { background: rgba(251,246,236,.92); box-shadow: 0 12px 36px -16px rgba(60,40,16,.45); }

/* active nav link inside the pill: teal background pill instead of the amber underline */
[data-site-header] [data-nav].is-active,
.nav-dropdown [data-nav].is-active {
  color: var(--teal);
  background: rgba(27,107,107,.08);
}
[data-site-header] [data-nav].is-active::after,
.nav-dropdown [data-nav].is-active::after {
  display: none;
}

/* mobile dropdown panel — position:absolute here too so it never reserves
   layout space (or flashes in flow) before Tailwind's `absolute` applies.
   The solid background is set here (not via `bg-cream/97`, which the CDN build
   leaves transparent) so the menu links stay readable over the hero photo. */
.nav-dropdown { position:absolute; background:rgba(251,246,236,.98); transition:transform .25s var(--ease-out), opacity .25s var(--ease-out); transform:translateY(-8px); opacity:0; pointer-events:none; }
.nav-dropdown.is-open { transform:translateY(0); opacity:1; pointer-events:auto; }
body.menu-open { overflow:hidden; }
/* the menu drawer is mobile-only; never let it show on desktop */
@media (min-width: 1024px) {
  [data-menu-drawer] { display: none !important; }
}

/* ==========================================================================
   INNER-PAGE HELPERS (services / shop / promotions / about)
   Added with the build-out of the rest of the site. Same token vocabulary.
   ========================================================================== */

/* hero quick-jump chips */
.chip-link { display:inline-flex; align-items:center; gap:.4rem; font-family:"Nunito",sans-serif; font-weight:800;
  font-size:.9rem; padding:.5rem .9rem; border-radius:999px; background:var(--white); color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), color .2s; }
.chip-link:hover { transform:translateY(-2px); color:var(--teal); box-shadow:var(--shadow); }
/* light variant for use over dark hero photos */
.chip-link--light { background:rgba(255,255,255,.12); color:var(--cream); box-shadow:none;
  border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); }
.chip-link--light:hover { background:rgba(255,255,255,.22); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow); }

/* numbered/labelled section kicker pill */
.service-kicker { display:inline-block; font-family:"Nunito",sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; }

/* ticked feature list item */
.feature-li { position:relative; padding-left:1.85rem; color:var(--ink-soft); font-weight:600; }
.feature-li::before { content:""; position:absolute; left:0; top:.1em; width:1.25rem; height:1.25rem;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--teal-2),var(--teal));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/68% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/68% no-repeat; }
/* fallback for browsers without mask support: just show the dot */
@supports not ((-webkit-mask:url("")) or (mask:url(""))) {
  .feature-li::before { content:"✓"; display:grid; place-items:center; color:#fff; font-size:.7rem; font-weight:900; }
}

/* daycare pricing plan toggle */
.plan-btn { font-family:"Nunito",sans-serif; font-weight:800; font-size:.9rem; padding:.55rem 1.1rem;
  border-radius:14px; color:var(--ink-soft); transition:color .2s, background .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.plan-btn.is-active { color:var(--teal-ink); background:var(--peach); box-shadow:var(--shadow-sm); }

/* shop "gallery wall" routing section — light warm plaster, NOT red.
   Two routing cards are the centerpiece, with the store's real sign/metal-art
   cutouts arranged around them. */
.gallery-wall {
  background:
    radial-gradient(90% 60% at 50% 0%, #FFFDF8 0%, transparent 55%),
    repeating-linear-gradient(92deg, rgba(60,40,16,.035) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}

/* wall-art cutouts — real store signs/metal art arranged around the routing cards */
.wall-art {
  height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  z-index: 0; filter: drop-shadow(0 16px 16px rgba(60,40,16,.30));
}

/* routing cards — clean white cards with a colored accent rail along the top edge */
.route-tag {
  position: relative; z-index: 1; display: block; padding: 2.25rem 2.25rem 2rem;
  border-radius: 22px; background: var(--white);
  box-shadow: 0 22px 50px -26px rgba(60,40,16,.4); border: 1px solid rgba(60,40,16,.06);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.route-tag::before {                       /* accent rail along the top edge */
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 4px;
  border-radius: 0 0 4px 4px;
}
.route-tag--teal::before { background: linear-gradient(90deg, var(--teal), var(--teal-2)); }
.route-tag--amber::before { background: linear-gradient(90deg, var(--amber), var(--amber-2)); }
.route-tag:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-lg); }

/* livestock product-category block — a labeled card listing real brand/product names.
   --solid variant has a white fill for use on tinted/ranch backgrounds. */
.prod-block { position:relative; padding:1.25rem 1.4rem; border-radius:18px;
  background:var(--white); border:1px solid rgba(60,40,16,.08); box-shadow:var(--shadow-sm);
  border-left:4px solid var(--amber-2); }
.prod-block--solid { box-shadow:var(--shadow); }
.prod-block__h { font-family:"Nunito",sans-serif; font-weight:900; color:var(--ink);
  font-size:1.05rem; letter-spacing:-.01em; }
.prod-block__p { margin-top:.35rem; color:var(--ink-soft); font-size:.95rem; line-height:1.55; }

/* compact variant for the dense, parts-list department grids */
.prod-block--compact { padding:.95rem 1.1rem; border-radius:14px; }
.prod-block--compact .prod-block__h { font-size:.98rem; }
.prod-block--compact .prod-block__p { margin-top:.25rem; font-size:.9rem; line-height:1.5; }

/* VFD callout — keep it visually distinct (legal component) in the dense grid */
.vfd-block { padding:.95rem 1.1rem; border-radius:14px;
  background:rgba(230,169,63,.12); border:1px solid rgba(193,127,36,.28); }

/* ==========================================================================
   LARGE ANIMAL VET — portrait card + trust chips (forest section)
   ========================================================================== */
/* small frosted credential chips beside the copy */
.vet-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:.8rem;
  color:var(--cream); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:.45rem .9rem; backdrop-filter:blur(4px);
}

/* the portrait card: photo on top, name plate below, amber accent + soft lift */
.vet-card {
  position:relative; max-width:24rem; margin:0 auto;
  background:var(--white); border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.4);
  transform:rotate(-1.2deg); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.vet-card::before {                          /* amber rail across the very top */
  content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:2;
  background:linear-gradient(90deg, var(--amber), var(--amber-2));
}
.vet-card:hover { transform:rotate(0deg) translateY(-6px); box-shadow:0 50px 90px -30px rgba(10,30,12,.6); }
.vet-card__photo { position:relative; aspect-ratio:1/1; overflow:hidden; background:#e9e2d4; }
.vet-card__photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.vet-card__since {
  position:absolute; top:1rem; right:1rem; z-index:2;
  font-family:"Nunito",sans-serif; font-weight:900; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  background:var(--amber-2); border-radius:999px; padding:.4rem .8rem;
  box-shadow:var(--shadow-sm);
}
.vet-card__body { padding:1.5rem 1.6rem 1.7rem; text-align:left; }
@media (max-width:480px){ .vet-card { transform:rotate(0deg); } }

/* ==========================================================================
   "PHOTO COMING SOON" PLACEHOLDER — about.html (people photos only).
   Solid, on-brand block sized like the real photo, so a real <img> can drop
   in later with no layout change. Soft warm gradient + a camera glyph + label.
   Each instance picks a tint via --soon-a / --soon-b custom props.
   ========================================================================== */
.photo-soon { position:relative; display:grid; place-items:center; gap:.6rem; overflow:hidden;
  color:var(--teal-ink); text-align:center; padding:1.5rem;
  background:linear-gradient(150deg, var(--soon-a, var(--peach)) 0%, var(--soon-b, var(--cream-2)) 100%); }
.photo-soon::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 14px, transparent 14px 28px); opacity:.5; }
.photo-soon__icon { position:relative; width:2.4rem; height:2.4rem; opacity:.55; }
.photo-soon__label { position:relative; font-family:"Nunito",sans-serif; font-weight:800;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.photo-soon--teal { --soon-a:#bfe6e6; --soon-b:#e7f4f4; }
.photo-soon--amber { --soon-a:var(--peach); --soon-b:#fbeccd; }
.photo-soon--forest { --soon-a:#cfe0bf; --soon-b:#e9f1e0; color:#2c4417; }
.photo-soon--sand { --soon-a:var(--sand); --soon-b:var(--cream); }

/* ==========================================================================
   TEAM — about.html "Meet the team".
   Portrait cards in an even grid. Real photos and "Photo coming soon"
   placeholders share one fixed 3:4 frame so rows never go gappy. Each pet in a
   photo gets a little collar name-tag that hangs onto the top of the portrait
   (a nod to the resort's hang-tag language) and swings on hover.
   ========================================================================== */

/* --- the card --- */
/* Neither the card nor the frame clips, so the collar tag can hang past the top
   edge. The photo/placeholder clips itself with its own top border-radius. */
.team-card { position:relative; background:var(--white); border-radius:22px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.team-card__frame { position:relative; border-radius:22px 22px 0 0; }
.team-card__photo { display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover;
  object-position:center top; background:var(--cream-2); border-radius:22px 22px 0 0; }
/* placeholder frame is byte-for-byte the same box as a real photo */
.team-card__photo.photo-soon { aspect-ratio:3 / 4; padding:1.25rem 1rem 1.4rem; }
.team-card__photo.photo-soon .photo-soon__label { line-height:1.55; }

/* soft ink scrim so the name reads over the bottom of any photo */
.team-card__frame::after { content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(to top, rgba(20,14,7,.62), rgba(20,14,7,.12) 55%, transparent);
  pointer-events:none; }
.team-card__frame--plain::after { display:none; } /* placeholders: no scrim */

/* name + role sitting on the photo */
.team-card__id { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.1rem; }
.team-card__name { font-family:"Nunito",sans-serif; font-weight:900; color:#fff;
  font-size:1.3rem; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.team-card__role { margin-top:.15rem; font-family:"Nunito",sans-serif; font-weight:800;
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:#ffe6bd;
  text-shadow:0 1px 6px rgba(0,0,0,.4); }

/* --- the hanging collar tag (pet caption) --- */
.pet-tag { position:absolute; top:0; left:50%; z-index:3; transform:translate(-50%,-42%);
  transform-origin:top center; display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .85rem .42rem .7rem; border-radius:999px;
  background:linear-gradient(150deg, var(--amber-2), var(--amber));
  color:#2a1c08; font-family:"Nunito",sans-serif; font-weight:800; font-size:.82rem;
  white-space:nowrap; box-shadow:0 8px 18px -8px rgba(60,40,16,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .5s var(--ease-out); }
/* the little "hole" + string so it reads as a tag on a collar */
.pet-tag::before { content:""; width:.42rem; height:.42rem; border-radius:50%;
  background:rgba(42,28,8,.45); box-shadow:inset 0 1px 1px rgba(0,0,0,.4); flex:none; }
.pet-tag__paw { width:1rem; height:1rem; flex:none; fill:#2a1c08; }
.team-card:hover .pet-tag { transform:translate(-50%,-42%) rotate(-6deg); }

/* --- bio footer --- */
.team-card__body { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.85rem; height:100%; }
.team-card__bio { color:var(--ink-soft); font-size:.86rem; line-height:1.58; }
.team-card__bio--soon { color:#9a8b78; font-style:italic; }

/* --- "Read more" expander: clamp long prose bios so cards stay even --- */
/* JS adds [data-readmore] handling; without JS the bio shows in full (progressive
   enhancement) because the clamp is only applied once JS marks it collapsed. */
.team-card__bio.is-clamped {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6;
  overflow:hidden; }
.team-more { align-self:flex-start; margin-top:-.35rem; padding:.1rem 0; background:none;
  border:0; cursor:pointer; font-family:"Nunito",sans-serif; font-weight:800; font-size:.78rem;
  color:var(--teal); display:inline-flex; align-items:center; gap:.3rem;
  transition:color .2s var(--ease-out); }
.team-more:hover { color:var(--teal-2); }
.team-more__chev { width:.85rem; height:.85rem; fill:currentColor; transition:transform .25s var(--ease-out); }
.team-more[aria-expanded="true"] .team-more__chev { transform:rotate(180deg); }
.team-more[hidden] { display:none; }

/* fun-fact chips ("Ask me about", "Rec") pinned to the bottom of the card */
.team-card__facts { margin-top:auto; display:flex; flex-direction:column; gap:.4rem;
  padding-top:.15rem; }
.team-fact { display:flex; align-items:center; gap:.5rem; font-size:.76rem; line-height:1.35;
  padding:.4rem .6rem; border-radius:12px; }
.team-fact__ic { width:1.05rem; height:1.05rem; flex:none; }
.team-fact b { font-family:"Nunito",sans-serif; font-weight:800; }
/* "ask me about" — teal tint */
.team-fact--ask { background:rgba(27,107,107,.09); color:var(--teal-ink); }
.team-fact--ask .team-fact__ic { fill:var(--teal); }
/* "rec" — amber tint */
.team-fact--rec { background:rgba(193,127,36,.11); color:#7a4e15; }
.team-fact--rec .team-fact__ic { fill:var(--amber); }

/* lift the whole card, tilt the tag a touch more */
.team-card.card-lift:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); }

/* role-group heading above each cluster of team cards */
.team-group-heading { font-family:"Nunito",sans-serif; font-weight:800; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--forest);
  display:flex; align-items:center; gap:1rem; }
.team-group-heading::before { content:""; width:1.4rem; height:1.4rem; flex:none;
  background:var(--forest); opacity:.85;
  -webkit-mask:var(--paw-mask) center/contain no-repeat; mask:var(--paw-mask) center/contain no-repeat; }
.team-group-heading::after { content:""; flex:1 1 auto; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(62,107,35,.35), transparent); }

/* ==========================================================================
   NOTEBOOK CARD — about.html Theresa story. Ruled paper + a hand-written
   font, sized down so it reads like a short personal note, not a banner.
   ========================================================================== */
.notebook { position:relative; padding:2rem 1.75rem 1.75rem 3.25rem; border-radius:1.25rem;
  background-color:#FFFDF6;
  background-image:
    linear-gradient(rgba(120,170,170,.35) 1px, transparent 1px);
  background-size: 100% 2.25rem;
  background-position: 0 .15rem;
  box-shadow: 0 18px 40px -16px rgba(60,40,16,.28); transform: rotate(-.4deg); }
.notebook::before { content:""; position:absolute; left:2.1rem; top:0; bottom:0; width:1px;
  background:rgba(193,90,90,.35); }
.notebook__text { font-family:"Patrick Hand","cursive"; color:#33312c; font-weight:400;
  font-size:1.35rem; line-height:2.25rem; letter-spacing:.01em; }
.notebook__text + .notebook__text { margin-top:0; }
.notebook__sign { font-family:"Caveat","cursive"; font-weight:700; color:var(--forest, #2c4417);
  font-size:2.4rem; line-height:1; }

/* ==========================================================================
   LIVESTOCK DEPARTMENT SWITCHER — tabs on desktop, accordion on mobile.
   One markup tree; CSS swaps which control set is shown at the lg breakpoint.
   JS (data-widget="dept-switcher") keeps tabs + panels + accordion in sync.
   ========================================================================== */
.dept-switcher { position:relative; }

/* --- desktop tab row --- */
.dept-tabs { display:flex; flex-wrap:wrap; gap:.5rem; }
.dept-tab {
  font-family:"Nunito",sans-serif; font-weight:800; font-size:.95rem; color:var(--ink-soft);
  padding:.7rem 1.25rem; border-radius:14px; background:var(--white);
  border:1px solid rgba(60,40,16,.08); box-shadow:var(--shadow-sm); cursor:pointer;
  transition:color .2s, background .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.dept-tab:hover { color:var(--ink); transform:translateY(-2px); }
.dept-tab.is-active { color:var(--white); background:linear-gradient(90deg,var(--forest),#4f8a2e);
  border-color:transparent; box-shadow:var(--shadow); transform:translateY(-1px); }

/* --- panels: only the active one is shown (desktop) --- */
.dept-panel { display:none; }
.dept-panel.is-active { display:block; }

/* per-department accordion header (mobile only by default) */
.dept-acc-head {
  display:none; width:100%; align-items:center; justify-content:space-between; gap:1rem;
  font-family:"Nunito",sans-serif; font-weight:900; font-size:1.15rem; color:var(--ink); text-align:left;
  padding:1rem 1.15rem; border-radius:16px; background:var(--white);
  border:1px solid rgba(60,40,16,.08); box-shadow:var(--shadow-sm); cursor:pointer;
}
.dept-acc-head .dept-acc-chev { flex:none; width:1.4rem; height:1.4rem; color:var(--amber);
  transition:transform .3s var(--ease-out); }
.dept-acc-head.is-open { color:var(--white); background:linear-gradient(90deg,var(--forest),#4f8a2e); border-color:transparent; }
.dept-acc-head.is-open .dept-acc-chev { transform:rotate(180deg); color:var(--white); }

/* mobile: hide tab row, show each panel as an accordion item (header + body) */
@media (max-width:1023px) {
  .dept-tabs { display:none; }
  .dept-panel { display:block; margin-top:.75rem; }      /* every panel becomes an accordion row */
  .dept-panel:first-of-type { margin-top:0; }
  .dept-acc-head { display:flex; }
  .dept-panel .dept-panel__body { display:none; padding-top:1.25rem; }
  .dept-panel.is-open .dept-panel__body { display:block; }
}

/* shop aisle band on top of a product card */
.aisle-band { font-family:"Nunito",sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.7rem 1.25rem; color:var(--cream); }
.aisle-band--teal  { background:linear-gradient(90deg,var(--teal),var(--teal-2)); }
.aisle-band--amber { background:linear-gradient(90deg,var(--amber),var(--amber-2)); color:#2a1c08; }

/* promotions: today highlight + flag */
.deal-card { transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.deal-card.is-today { box-shadow:0 0 0 4px var(--amber-2), var(--shadow-lg); transform:translateY(-4px) scale(1.01); }
.day-flag { position:absolute; top:1.1rem; right:1.1rem; font-family:"Nunito",sans-serif; font-weight:800;
  font-size:.72rem; padding:.3rem .7rem; border-radius:999px; }

/* promotions: how-it-works step number */
.step-num { display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:16px;
  font-family:"Nunito",sans-serif; font-weight:900; font-size:1.3rem; color:#2a1c08;
  background:radial-gradient(circle at 35% 30%,var(--amber-2),var(--amber)); box-shadow:var(--shadow-sm); }

/* reward earned state (punch card) */
[data-reward].is-earned { color:#fff; font-weight:800; }

/* contact form inputs */
.form-input { width:100%; border-radius:14px; padding:.8rem 1rem; background:var(--white); color:var(--ink);
  border:2px solid rgba(60,40,16,.12); outline:none; font-family:inherit; font-size:1rem;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.form-input::placeholder { color:rgba(60,40,16,.4); }
.form-input:focus { border-color:var(--teal-2); box-shadow:0 0 0 4px rgba(44,148,148,.18); }
.form-input[aria-invalid="true"] { border-color:#c25b3a; box-shadow:0 0 0 4px rgba(194,91,58,.16); }
.form-label { display:block; font-size:.875rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }

/* ==========================================================================
   GROOMING PAGE — photo-driven editorial hero + framed real photos.
   No animal cutouts: full contained photos in soft rounded frames.
   ========================================================================== */

/* hero band: warm cream wash so the photo and copy share one calm field */
.groom-hero {
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(246,217,168,.4), transparent 55%),
    linear-gradient(180deg, #FFFDF7 0%, var(--cream) 55%, var(--cream-2) 100%);
}

/* hero photo: contained, framed, gently tilted, with a floating tag */
.groom-hero__photo {
  position:relative; margin:0;
  border-radius:30px; overflow:hidden;
  border:7px solid #fff;
  box-shadow:0 40px 80px -30px rgba(60,40,16,.5);
  transform:rotate(1.4deg);
  aspect-ratio: 4 / 5;
}
.groom-hero__photo > img { width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
.groom-hero__tag {
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  display:grid; gap:.05rem;
  font-family:"Nunito",sans-serif; font-weight:800; color:var(--ink); font-size:.9rem;
  background:rgba(251,246,236,.94); backdrop-filter:blur(4px);
  padding:.65rem .95rem; border-radius:16px; box-shadow:0 12px 30px -12px rgba(60,40,16,.5);
}
.groom-hero__tag-k { color:var(--teal); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }

/* overlapping mini photo strip (real regulars) */
.groom-strip { display:flex; }
.groom-strip img {
  width:54px; height:54px; border-radius:50%; object-fit:cover;
  border:3px solid var(--cream); box-shadow:0 4px 12px -4px rgba(60,40,16,.4);
  margin-left:-14px;
}
.groom-strip img:first-child { margin-left:0; }

/* generic framed photo used across the page (what's-included + room peek) */
.groom-framed {
  position:relative; margin:0; overflow:hidden;
  border-radius:24px; border:6px solid #fff;
  box-shadow:0 24px 55px -28px rgba(60,40,16,.5);
  background:var(--cream-2);
}
.groom-framed > img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .8s var(--ease-out);
}
.groom-framed:hover > img { transform:scale(1.05); }

/* ---- the fresh-cut gallery wall (real grooms showcase) ---- */
.groom-gallery-sec { background:linear-gradient(180deg, var(--cream) 0%, #fff 100%); }

/* masonry via CSS columns, balanced and responsive */
.groom-wall {
  column-count: 4;
  column-gap: 1rem;
}
@media (max-width:1023px){ .groom-wall { column-count:3; } }
@media (max-width:767px){  .groom-wall { column-count:2; column-gap:.75rem; } }
@media (max-width:419px){  .groom-wall { column-count:1; } }

.gw {
  position:relative; margin:0 0 1rem; break-inside:avoid;
  border-radius:20px; overflow:hidden;
  border:5px solid #fff;
  box-shadow:0 18px 44px -26px rgba(60,40,16,.55);
  background:var(--cream-2);
  transform:rotate(var(--gw-tilt, 0deg));
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
/* a touch of hand-pinned tilt, alternating down the wall */
.gw:nth-child(3n+1){ --gw-tilt:-1.1deg; }
.gw:nth-child(3n+2){ --gw-tilt:0.9deg; }
.gw:nth-child(3n+3){ --gw-tilt:-0.4deg; }
.gw:hover {
  transform:rotate(0deg) translateY(-4px) scale(1.015);
  box-shadow:0 28px 60px -24px rgba(60,40,16,.6);
  z-index:2;
}
.gw > img { width:100%; height:auto; display:block; }

/* caption: gradient overlay, slides up on hover, readable on touch */
.gw figcaption {
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem .85rem .8rem;
  font-family:"Nunito",sans-serif; font-weight:700; font-size:.8rem; line-height:1.25;
  color:#fff;
  background:linear-gradient(180deg, transparent, rgba(20,12,6,.82) 62%);
  transform:translateY(28%); opacity:0;
  transition: transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.gw:hover figcaption, .gw:focus-within figcaption { transform:translateY(0); opacity:1; }
.gw__tag {
  display:inline-block; margin-bottom:.2rem;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--peach);
}
/* always show captions on touch devices (no hover) */
@media (hover:none) {
  .gw figcaption { transform:translateY(0); opacity:1; }
}

/* gift certificate callout */
.giftcert__mark {
  flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--amber-2), var(--amber)); color:#fff;
  box-shadow:0 12px 26px -12px rgba(193,127,36,.6);
}
.giftcert__mark svg { width:32px; height:auto; }

@media (max-width: 1023px) {
  .groom-hero__photo { transform:none; max-width:30rem; margin-inline:auto; }
}

/* ==========================================================================
   DAYCARE ROOM CARDS — resort.html. Two equal-height cards (Maci's Playroom
   teal, Nellis Playroom amber), each with a colored accent rail along the top
   edge, a tidy photo cluster, and a feature list pinned to the bottom so both
   cards line up regardless of content length.
   ========================================================================== */
.room-card {
  position: relative; padding: 1.75rem; border-radius: 24px;
  background: var(--white); box-shadow: var(--shadow);
  border: 1px solid rgba(60,40,16,.06); overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
@media (min-width: 640px) { .room-card { padding: 2rem; } }
.room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.room-card::before {                          /* accent rail along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
}
.room-card--teal::before  { background: linear-gradient(90deg, var(--teal), var(--teal-2)); }
.room-card--amber::before { background: linear-gradient(90deg, var(--amber), var(--amber-2)); }
.room-card ul { margin-top: auto; }           /* pin feature list to the bottom */

/* small caption chip on the empty-room photo */
.room-card__caption {
  position: absolute; left: .55rem; bottom: .55rem; z-index: 1;
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .7rem;
  letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(32,24,15,.62); color: #fff; backdrop-filter: blur(2px);
}

/* amber variant of the ticked feature item (Nellis Playroom) */
.feature-li--amber::before { background: radial-gradient(circle at 35% 30%, var(--amber-2), var(--amber)); }

/* ==========================================================================
   KITTY KORRAL — resort.html. Calm, spacious, magazine-style, deliberately
   quieter than the punchy dog sections. Soft warm wash, a faint walking-cat
   silhouette echoing the room's hand-painted sign, gentle captions, and an
   airy rates/vaccination panel. Generous white space is the whole point.
   ========================================================================== */
.kitty {
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, transparent 60%),
    linear-gradient(180deg, #FFFDFA 0%, var(--cream) 100%);
}

/* faint walking-cat silhouette, top-right, a quiet nod to the painted sign */
.kitty-cat-motif {
  position: absolute; top: 2.5rem; right: 3vw; width: clamp(6rem, 14vw, 11rem);
  height: auto; z-index: 0; pointer-events: none; opacity: .06;
  fill: none; stroke: var(--ink); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* the lead reassurance line, set apart and calm but prominent */
.kitty-reassure {
  font-family: "Nunito", sans-serif; font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); line-height: 1.5;
  color: var(--teal-ink); letter-spacing: -.01em;
}
.kitty-reassure__mark {
  display: inline-grid; place-items: center; vertical-align: -.18em;
  width: 1.6rem; height: 1.6rem; margin-right: .5rem;
  color: var(--amber);
}
.kitty-reassure__mark svg { width: 1.25rem; height: 1.25rem; }

/* soft caption on the photos, treated as quiet guest/detail notes */
.kitty-caption {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .82rem;
  letter-spacing: .01em; padding: .4rem .85rem; border-radius: 999px;
  background: rgba(251,246,236,.82); color: var(--ink); backdrop-filter: blur(3px);
  box-shadow: 0 8px 20px -10px rgba(60,40,16,.4);
}
.kitty-caption--soft { font-size: .76rem; font-weight: 700; padding: .3rem .7rem; }

/* airy info panel, soft and rounded, no hard card edges */
.kitty-panel {
  background: rgba(255,255,255,.6); border: 1px solid rgba(60,40,16,.07);
  border-radius: 28px; padding: 2rem; box-shadow: var(--shadow-sm);
  backdrop-filter: blur(2px);
}
@media (min-width: 768px) { .kitty-panel { padding: 2.5rem 3rem; } }

/* ==========================================================================
   BACKGROUND DECORATION — resort.html. Tiny, soft, on-brand paw-print accents
   tucked into empty section margins. Decorative only: behind content, very low
   opacity, non-interactive, and hidden on small screens so they never crowd
   text/photos or interfere on mobile. Sparse by design.
   ========================================================================== */
.paw-deco {
  position: absolute; z-index: 0; pointer-events: none; opacity: .07;
  width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain;
}
/* a soft two-paw cluster, tinted ink */
.paw-deco--1 {
  left: 2vw; bottom: 3rem; transform: rotate(-12deg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2320180F'%3E%3Ccircle cx='6' cy='10' r='2'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Ccircle cx='18' cy='10' r='2'/%3E%3Cpath d='M12 12c-3 0-5 2-5 4s2 3 5 3 5-1 5-3-2-4-5-4Z'/%3E%3C/svg%3E");
}
/* a single small paw, tinted teal, opposite corner */
.paw-deco--2 {
  right: 3vw; top: 4rem; width: 5.5rem; height: 5.5rem; transform: rotate(14deg); opacity: .06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B6B6B'%3E%3Ccircle cx='6' cy='10' r='2'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Ccircle cx='18' cy='10' r='2'/%3E%3Cpath d='M12 12c-3 0-5 2-5 4s2 3 5 3 5-1 5-3-2-4-5-4Z'/%3E%3C/svg%3E");
}
@media (max-width: 768px) { .paw-deco { display: none; } }

/* ---- marquee CSS keyframe fallback ----
   Layout lives here (not only in Tailwind utilities) so the strip renders
   correctly at first paint even before the Tailwind CDN script has run.
   The track holds six identical sets; -50% shifts three full sets, wider
   than any viewport, so the loop is seamless. Duration is scaled to keep
   the same px-per-second speed as the old two-set 32s version. */
.marquee-track { width:max-content; display:flex; align-items:center; white-space:nowrap; }
.marquee-set { display:flex; align-items:center; gap:2.25rem; padding-right:2.25rem; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-css { animation: marquee-scroll 96s linear infinite; }
.marquee-css:hover { animation-play-state: paused; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-anim]{ opacity:1!important; transform:none!important; }
  .cutout--abs{ position:static; }
}

/* ==========================================================================
   GALLERY PAGE — filterable masonry photo wall + lightbox (gallery.html)
   Mobile-first: 2 columns on phones, scaling up. Photos are real, so the
   wall uses CSS columns for true masonry without layout math.
   ========================================================================== */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* sticky filter bar sits just under the floating nav */
.gal-filterbar {
  position:sticky; top:64px; z-index:30;
  background:rgba(251,246,236,.82); backdrop-filter:blur(10px);
  border-top:1px solid rgba(60,40,16,.06); border-bottom:1px solid rgba(60,40,16,.06);
}
@media (min-width:640px){ .gal-filterbar { top:104px; } }

.gal-pill {
  flex:none; font-family:"Nunito",sans-serif; font-weight:800; font-size:.9rem;
  padding:.5rem 1.05rem; border-radius:999px; color:var(--ink-soft);
  background:var(--white); border:1px solid rgba(60,40,16,.1); cursor:pointer;
  transition:transform .25s var(--ease-out), background .25s, color .2s, box-shadow .25s;
  white-space:nowrap;
}
.gal-pill:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.gal-pill.is-active { background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* the masonry wall */
.gal-wall { column-count:2; column-gap:.7rem; }
@media (min-width:640px){ .gal-wall { column-count:3; column-gap:.9rem; } }
@media (min-width:1024px){ .gal-wall { column-count:4; column-gap:1rem; } }
@media (min-width:1440px){ .gal-wall { column-count:5; } }

.gal-item {
  position:relative; display:block; width:100%; margin:0 0 .7rem; break-inside:avoid;
  border-radius:16px; overflow:hidden; cursor:zoom-in; background:var(--sand);
  border:4px solid #fff; box-shadow:0 14px 34px -22px rgba(60,40,16,.5);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:640px){ .gal-item { margin-bottom:.9rem; } }
@media (min-width:1024px){ .gal-item { margin-bottom:1rem; } }
.gal-item img { width:100%; height:auto; display:block; transition:transform .5s var(--ease-out); }
.gal-item:hover { transform:translateY(-4px); box-shadow:0 22px 48px -20px rgba(60,40,16,.55); z-index:2; }
.gal-item:hover img { transform:scale(1.04); }

/* hover caption + small category tag */
.gal-item__cap {
  position:absolute; left:0; right:0; bottom:0; padding:1.5rem .7rem .6rem;
  font-family:"Nunito",sans-serif; font-weight:700; font-size:.78rem; line-height:1.25; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(20,12,6,.82) 70%);
  transform:translateY(20%); opacity:0;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.gal-item:hover .gal-item__cap, .gal-item:focus-within .gal-item__cap { transform:translateY(0); opacity:1; }
.gal-item__tag {
  position:absolute; top:.55rem; left:.55rem; z-index:2;
  font-size:.58rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,.92); border-radius:999px; padding:.22rem .55rem;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.3); opacity:0; transition:opacity .3s var(--ease-out);
}
.gal-item:hover .gal-item__tag { opacity:1; }
/* always show captions/tags on touch since there is no hover */
@media (hover:none){
  .gal-item__cap { transform:translateY(0); opacity:1; }
  .gal-item__tag { opacity:1; }
  .gal-item { cursor:pointer; }
}

/* entrance animation when items mount/refilter */
.gal-item.gal-in { animation:galPop .5s var(--ease-out) both; }
@keyframes galPop { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

/* ---- lightbox ---- */
.gal-lightbox {
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(16,10,4,.92); backdrop-filter:blur(6px); padding:1rem;
  opacity:0; transition:opacity .3s var(--ease-out);
}
.gal-lightbox.is-open { opacity:1; }
.gal-lb__stage { position:relative; max-width:min(92vw,1100px); max-height:88vh; display:flex; flex-direction:column; align-items:center; }
.gal-lb__stage img {
  max-width:100%; max-height:82vh; width:auto; height:auto; border-radius:14px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7); background:#000;
}
.gal-lb__cap {
  margin-top:.9rem; color:rgba(255,255,255,.85); font-family:"Nunito",sans-serif;
  font-weight:700; font-size:.95rem; text-align:center;
}
.gal-lb__close {
  position:absolute; top:.6rem; right:.8rem; z-index:2; width:46px; height:46px;
  display:grid; place-items:center; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.9rem; line-height:1;
  transition:background .2s;
}
.gal-lb__close:hover { background:rgba(255,255,255,.25); }
.gal-lb__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:54px; height:54px; display:grid; place-items:center; border-radius:999px; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:2rem; line-height:1; cursor:pointer;
  transition:background .2s, transform .2s;
}
.gal-lb__nav:hover { background:rgba(255,255,255,.28); }
.gal-lb__prev { left:.5rem; }
.gal-lb__next { right:.5rem; }
@media (min-width:768px){ .gal-lb__prev { left:1.5rem; } .gal-lb__next { right:1.5rem; } }
.gal-lb__count {
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.55); font-size:.8rem; font-family:"Nunito",sans-serif; font-weight:700;
}
@media (max-width:520px){
  .gal-lb__nav { width:44px; height:44px; font-size:1.6rem; }
  .gal-lb__cap { font-size:.85rem; }
}