/* Mane Event - static rebuild of maneevent.co.nz
   Palette + type recovered from the live pawscare/Elementor site 2026-07-16.
   Text teal darkened (#00838B) and ink-on-orange used for WCAG AA contrast;
   decorative fills keep the original brand teal #00A4AD. */

:root {
  --teal: #00A4AD;        /* decorative fills, icons, chips with large text */
  --teal-ink: #00A4AD;    /* links, buttons, nav - matched to live theme #00A4AD (parity 2026-07-16) */
  --teal-deep: #00838B;   /* hover */
  --ink: #405B5B;         /* headings, dark sections */
  --ink-deep: #2C3E3E;    /* text on orange */
  --orange: #F69946;
  --orange-deep: #E8862F;
  --cream: #FCF9F5;
  --cream-2: #F8F1E7;
  --pale: #F4FCFC;
  --text: #616161;
  --muted: #8A8A8A;
  --danger: #C0392B;
  --peach: #FFCE9E;       /* footer hours on dark teal (4.9:1) */
  --white: #fff;
  --radius: 12px;
  --hairline: color-mix(in srgb, var(--ink) 12%, transparent);      /* card block separators on light */
  --hairline-dark: rgba(255, 255, 255, .25);                        /* card block separators on dark */
  --shadow: 0 10px 30px rgba(64, 91, 91, .10);
  --shadow-md: 0 10px 30px rgba(64, 91, 91, .10);    /* default card elevation - same value as --shadow; the name the pricing-update page uses */
  --shadow-card: 12px 9px 38px rgba(0, 0, 0, .10);   /* live theme: icon/info cards */
  --shadow-price: 0 4px 14px rgba(0, 0, 0, .14);     /* live theme: pricing + size grids */
  --font-display: 'Paytone One', 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --body-size: 1rem;
  --body-leading: 1.875;
  --page-gutter: clamp(24px, 3vw, 32px);
  --section-space: 90px;
  --section-space-compact: 64px;
  --layout-gap: clamp(40px, 5vw, 70px);
  --layout-gap-feature: 60px;
  --layout-gap-pricing: 56px;
  --layout-gap-stack: 50px;
  --component-gap: 40px;
  --component-gap-compact: 34px;
  --card-gap: 30px;
  --nav-gap: 30px;
  --action-gap: 16px;
  --footer-size: .95rem;
  --footer-leading: 1.6;
}

@font-face {
  font-family: 'Flaticon';
  src: url('../fonts/Flaticon.woff2') format('woff2'),
       url('../fonts/Flaticon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="fi-"]::before, [class*=" fi-"]::before {
  font-family: 'Flaticon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
}
.fi-checked::before  { content: "\f106"; }
.fi-call::before     { content: "\f10f"; }
.fi-check::before    { content: "\f118"; }
.fi-paw::before      { content: "\f13c"; }
.fi-dog::before      { content: "\f13d"; }
.fi-house::before    { content: "\f140"; }
.fi-grooming::before { content: "\f141"; }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);   /* live theme body: 30px on 16px (parity 2026-07-16) */
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); }
/* live theme section headlines are 36px (measured). Was maxing at 44px. */
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--teal-ink); }
a:hover { color: var(--teal-deep); }
ul { padding: 0; margin: 0; list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--page-gutter); }
/* keep running text inside a readable measure when columns stack */
.split p, .acc-panel p, .prose p { max-width: 68ch; }
/* grid/flex children may shrink below min-content - prevents 320px blowout */
.pricing-grid > *, .price-card > *, .split > *, .contact-grid > *, .cards-3 > *, .info-row > * { min-width: 0; }
.section { padding: var(--section-space) 0; }
.section-cream { background: var(--cream); }
.center { text-align: center; }
.intro { max-width: 640px; margin: 0 auto 1.5em; }
.page-intro { max-width: 900px; margin: 0 auto; text-align: center; }
.page-intro-copy { max-width: 700px; margin: 0 auto; }
.page-intro-copy p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 18px; z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- buttons + chips ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: 14px 30px;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(44, 62, 62, .16); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn-teal { background: var(--teal-ink); color: #fff; }
.btn-teal:hover { background: var(--teal-deep); color: #fff; }
/* Live parity 2026-07-16: matched to the theme's exact hero CTA #F69946
   (white text ~2.3:1). This reverts the earlier #DD7014 AA-large deepening
   in favour of exact-colour parity per Owner direction; a11y regression
   flagged for the design-critic pass. */
.btn-orange { background: var(--orange); color: #fff; font-size: 1.25rem; }
.btn-orange:hover { background: var(--orange-deep); color: #fff; }
.btn .fi-paw::before { font-size: 1.1em; }

/* Kicker - the house section tag (identity v1.1, Owner 2026-07-17). Replaces the
   old boxed .chip pills: an orange dash + uppercase display-face label, UNBOXED.
   Ink text on light grounds; .kicker-light (white) on photo/dark grounds. Sits
   above every main section heading - left in left blocks, centered inside .center
   (inline-flex, so text-align centers it as a unit). */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.kicker::before {
  content: "";
  width: 28px; height: 3px; border-radius: 999px;
  background: var(--orange);
  flex: none;
}
.kicker-light { color: #fff; text-shadow: 0 2px 18px rgba(20, 40, 42, .45); }

/* ---------- preloader ---------- */
/* Origin pawscare theme preloader (mechanics from the archived
   pluggable_preloader.min.css): staggered paw-print fade, 2750ms loop, container
   rotated -30deg on near-white. Paws are the origin's teal #63aeb1. Fades out and
   is removed on window load (see main.js). PENDING OWNER CONFIRM on the preview. */
#preloader-wrapper {
  position: fixed; inset: 0; width: 100%; height: 100%;
  background-color: #fefefe; z-index: 10000;
  opacity: 1; transition: opacity .4s ease;
}
#preloader-wrapper.is-done { opacity: 0; pointer-events: none; }
.preloader-container {
  position: relative; width: fit-content;
  left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg);
}
.preloader-container > div {
  position: relative; display: inline-block;
  color: #63aeb1; opacity: 0;
  animation: preloader-paw 2750ms ease-in-out infinite;
}
.preloader-container > div > svg { transform: rotate(105deg); display: block; width: 50px; height: 50px; fill: currentColor; }
.preloader-container > div:nth-child(odd) > svg { transform: rotate(90deg) translateX(-150%) rotate(-15deg); }
.preloader-container > div:nth-child(1) { animation-delay: 0s; }
.preloader-container > div:nth-child(2) { animation-delay: .25s; }
.preloader-container > div:nth-child(3) { animation-delay: .5s; }
.preloader-container > div:nth-child(4) { animation-delay: .75s; }
.preloader-container > div:nth-child(5) { animation-delay: 1s; }
@keyframes preloader-paw { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- top bar + header ---------- */

/* Live theme (measured on origin 2026-07-16): the utility strip and the nav are
   both cream #FCF9F5, but the strip is set apart by (a) a 1px divider line
   #DFDCD9 at its base and (b) a soft downward box-shadow that bleeds ~38px into
   the nav (nav top reads ~#F4F1ED fading to full cream). Round-1 unified the two
   bands to flat cream and dropped both cues, which is why the strip lost its
   separation. The orange top border is 5px on both (measured identical); the
   perceived "thicker" border is this restored separation, not a wider border.
   Strip height on the origin is 37px (5px border + 32px cream). */
.topbar {
  background: var(--white);   /* white strip, Owner 2026-07-17 (deviation from live-parity cream) */
  border-top: 3px solid #E99D57;  /* 5px->3px Owner 2026-07-17 (deliberate deviation from live parity; moves with the card rules) */
  border-bottom: 1px solid #DFDCD9;
  /* box-shadow removed, Owner 2026-07-17: the soft downward bleed read as a
     gradient on the nav band. The 1px divider + the white-to-cream step now
     carry the separation on their own. */
  position: relative; z-index: 101;
  font-size: .875rem;
}
.topbar .container {
  display: flex; justify-content: flex-end; align-items: center; gap: 28px;
  padding-top: 1px; padding-bottom: 1px;
}
.topbar span[class^="fi-"] { color: var(--teal-ink); margin-right: 7px; font-size: .9em; }
.topbar .topbar-ico { color: var(--teal-ink); margin-right: 7px; flex: none; }
.topbar span { display: inline-flex; align-items: center; }
.topbar a { color: var(--text); text-decoration: none; display: inline-block; padding: 1px 0; }
.topbar a:hover { color: var(--teal-ink); }

/* Sticky, shrinking nav (Owner 2026-07-17): the topbar (address/phone) is NOT
   sticky - it scrolls away above the nav; the nav then sticks to the top and
   shrinks ~20% (logo 90->72, padding 16->13; total ~122->98). The menu font is
   UNCHANGED. A micro transition animates the size change. */
.site-header {
  background: var(--cream);   /* live theme: utility bar + nav are one cream band, not white (parity 2026-07-16) */
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow .22s ease;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
  transition: padding-top .22s ease, padding-bottom .22s ease;
}
.logo img { height: 90px; width: auto; display: block; transition: height .22s ease; }
.site-header.nav-shrink { box-shadow: 0 4px 16px rgba(64, 91, 91, .10); }
.site-header.nav-shrink .container { padding-top: 13px; padding-bottom: 13px; }
.site-header.nav-shrink .logo img { height: 72px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .container, .logo img { transition: none; }
}

.main-nav ul { display: flex; gap: var(--nav-gap); }
.main-nav a {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
}
.main-nav a:hover { color: var(--teal-deep); }
.main-nav a.active { color: var(--teal); }   /* live theme: active nav is bright teal #00A4AD */

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero carousel (home) ---------- */

/* Multi-slide hero. Dependency-free cross-fade slider matching the original's
   Slider Revolution hero (single content slide + orange prev/next arrow chrome
   on the live origin; built multi-slide so slides are CMS-editable at /admin).
   Autoplay cadence + fade transition are hardcoded design decisions (see main.js). */
.hero-carousel {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  background: var(--ink);
}
.hero-track { position: relative; min-height: 700px; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background-size: cover; background-repeat: no-repeat; background-position: center right;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease;
  z-index: 1;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
/* Before JS initialises (and for no-JS), show the first slide so the hero is never blank. */
html:not(.js) .hero-slide:first-child,
.hero-carousel:not(.is-ready) .hero-slide:first-child { opacity: 1; visibility: visible; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(34, 58, 61, .62) 0%, rgba(34, 58, 61, .25) 45%, rgba(34, 58, 61, 0) 70%);
}
.hero-slide .container { position: relative; z-index: 2; width: 100%; }
.hero-inner { max-width: 640px; padding: 90px 0 150px; }
.hero-slide h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5.9vw, 4.5rem);   /* live theme hero: 72px (measured); was 65.6px */
  line-height: 1.12;
  margin: 0 0 32px;
  text-shadow: 0 2px 28px rgba(20, 40, 42, .45);
}
.hero-slide .btn { font-size: 1.25rem; padding: 16px 32px; }

/* prev/next arrows - orange rounded squares flush to the edges (matches original) */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff;
  border: none; border-radius: 0;
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: background .2s ease;
}
.hero-prev { left: 0; border-radius: 0 6px 6px 0; }
.hero-next { right: 0; border-radius: 6px 0 0 6px; }
.hero-arrow:hover { background: var(--orange-deep); }
.hero-arrow:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.hero-arrow[hidden] { display: none; }

/* Five floating doodle layers matching the origin's Slider Revolution hero
   (measured layer positions 2026-07-16): a yarn/spiral top-centre, the streak
   "swoosh" top-right, a bone on the left edge, a bone bottom-centre, and a paw
   bottom-right. The swoosh is the origin's one looping layer; all five drift
   gently here (see the float animation below). */
.hero-carousel .doodle { position: absolute; opacity: .9; pointer-events: none; z-index: 3; }
.doodle-swoosh { top: 7%; right: 8%; width: 96px; }
.doodle-yarn   { top: 10%; left: 47%; width: 46px; }
.doodle-bone-l { top: 38%; left: 1%; width: 50px; }
.doodle-bone-c { bottom: 16%; left: 36%; width: 58px; }
.doodle-paw    { bottom: 20%; right: 9%; width: 50px; }

/* ---------- feature cards ---------- */

/* Live theme (measured 2026-07-16): the 3 service cards are pulled UP over the
   hero by margin-top:-50px so their top ~third overlaps the hero photo, and the
   hero shows THROUGH the gaps between the card tops. Below that overlap the page
   is cream, flowing continuously into the about section. Round-1 filled the whole
   band with flat cream, which painted over the hero in the overlap zone (cards
   sat entirely on cream, no hero visible between them). The fix: a vertical
   background that is transparent for the top 50px (the overlap strip - hero shows
   through) and cream from 50px down (no white/cream bar below). */
.feature-cards {
  margin-top: -50px;
  position: relative; z-index: 3;
  padding-bottom: 90px;
  background: linear-gradient(to bottom, transparent 0, transparent 50px, var(--cream) 50px);
}
.cards-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap);
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--orange);   /* house card convention (identity v1.2, 3px) */
  padding: 30px 28px;
}
.icon-card { display: flex; gap: 20px; align-items: flex-start; }
.icon-card .icon { font-size: 46px; color: var(--teal); line-height: 1; }
.icon-card h3 { margin-bottom: .35em; line-height: 1.5; }  /* live theme card title lh 30px on 20px */
.icon-card p { margin: 0; font-size: 1rem; line-height: 1.875; }  /* live theme card body: 16px / 30px */

/* ---------- about / split ---------- */

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gap); align-items: center;
}
.split-start { align-items: start; }
/* About: give the pug column ~600px on desktop so the image renders at the
   origin's measured size (~600 wide); guarded by min-width so the text column
   is never squeezed. Below this it uses the even 1fr/1fr split, then stacks. */
/* The pug PNG has ~100px of transparent space on its left (the solid dog sits
   16.7% in) - so at the 600px figure column, shift the figure left by that
   100px to flush the VISIBLE dog to the column's left edge (Owner 2026-07-17).
   overflow-x:clip on the section stops the paw watermark (now bleeding further
   left) from ever adding a horizontal scrollbar. */
#about { overflow-x: clip; }
@media (min-width: 1100px) {
  #about .split { grid-template-columns: 600px 1fr; gap: var(--layout-gap-feature); }
  .about-figure { margin-left: -100px; }
}
.about-figure { text-align: left; }
/* The sticker PNGs are full-canvas overlay layers (670x606) from the original
   theme, painted for that theme's dog crop. This pug is a different aspect
   (600x691, portrait), so overlaying the canvases inset:0/width:100% lands the
   glyphs off the dog. Each glyph is nudged onto THIS pug with the CSS
   `translate` property (percentages relative to the sticker box, so placement
   scales with the image at every width) to match the LIVE theme: the crown
   floats just above the top of the head (slightly right of centre) and the bone
   floats mid-left, outside the pug.
   Pug SIZE: the origin renders the about image at ~600px wide on desktop
   (measured); max-width:460 rendered it too small ("dog still smaller"). Bumped
   to 600 (constrained by the column at narrow widths, so mobile is unaffected).
   MOTION (corrected 2026-07-16): the crown and bone stickers DO animate on the
   origin - a gentle continuous float. Proven by frame-diffing the live about
   section (only the crown + bone regions change frame-to-frame; the pug and the
   background ellipses are static). The round-2 "stickers are static" verdict came
   from computed-CSS probing, which cannot see JS/SR-driven inline-transform
   animation and was wrong. `transform` is animated here; `translate` (used for
   placement) is a separate property, so the float composes over the placement. */
.figure-stack {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
}
.figure-stack .main-img { position: relative; z-index: 1; width: 100%; }
.figure-stack .sticker { position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; }
.sticker-paw { z-index: 0; transform: translate(-14%, -6%) scale(1.15); }
.sticker-crown { z-index: 2; translate: -9% -12%; animation: sticker-float 3.6s ease-in-out infinite; }
.sticker-bone { z-index: 2; translate: -8% 26%; animation: sticker-float 4.4s ease-in-out infinite .7s; }

@keyframes sticker-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(2.5deg); }
}

.checklist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 28px;
}
.checklist li { display: flex; align-items: flex-start; gap: 12px; }
.checklist .fi-check::before {
  font-size: .8rem; color: #fff;
  background: var(--teal);
  width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.checklist span.label {
  min-width: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.checklist .fi-check { flex: none; margin-top: 1px; }
.checklist-1col { grid-template-columns: 1fr; margin-top: 0; }

/* ---------- pricing ---------- */

#pricing {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23F5EDE0'%3E%3Cellipse cx='58' cy='56' rx='21' ry='30' transform='rotate(-18 58 56)'/%3E%3Cellipse cx='100' cy='42' rx='21' ry='30'/%3E%3Cellipse cx='142' cy='56' rx='21' ry='30' transform='rotate(18 142 56)'/%3E%3Cpath d='M100 88c-36 0-58 27-58 58 0 26 26 42 58 42s58-16 58-42c0-31-22-58-58-58z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -60px top 320px;
  background-size: 520px;
}
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap);
  margin-top: 50px;
  /* cards stretch to equal height; each card pins its size block to the bottom
     (flex column + margin-top:auto below), so the tier grids align across the
     row the way the old subgrid kept the separate size boxes aligned */
}
/* Merged pricing card (identity v1.1, Owner 2026-07-17): ONE card per package -
   head (price chip + title), body (desc + features), size tiers - three blocks
   separated by FULL-WIDTH hairlines. The card carries no horizontal padding;
   each block pads itself, so block borders span edge to edge (the grooming-menu
   convention from the services round). Orange top rule = house card mark. */
.price-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-price);
  border-top: 3px solid var(--orange);
  position: relative;
  display: flex; flex-direction: column;
}
.price-card .size-grid { margin-top: auto; }
/* At 3-column widths the cards share ROW LINES via subgrid (identity v1.4,
   Owner 2026-07-17): head / desc / features / size tiers each occupy one shared
   row, so the feature bullets start level and the separator above the dog tiers
   sits at the same height on all three cards. row-gap:0 overrides the inherited
   30px grid gap inside the card (blocks space themselves with padding). */
@media (min-width: 1025px) {
  .price-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
  .price-card .size-grid { margin-top: 0; }
}
.price-card .head {
  display: flex; align-items: center; gap: 18px;
  padding: 30px 30px 20px;
  border-bottom: 1px solid var(--hairline);
}
.price-card .head h3 { min-width: 0; }
.price-card .features { padding: 6px 30px 24px; border-bottom: 1px solid var(--hairline); }
@media (max-width: 600px) {
  .price-card .head { flex-wrap: wrap; }
}
@media (min-width: 1280px) {
  /* signature theme detail: price chip hangs off the card's left edge.
     Engages only when real margin exists outside the container, so the
     first chip never parks against the viewport edge. The pull now lives on
     the chip itself so the head's full-width border stays inside the card. */
  .price-card .price-chip { margin-left: -54px; }
}
.price-chip {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  border-radius: 8px;
  padding: 14px 20px 10px;
  text-align: left;
  line-height: 1.1;
  min-width: 116px;
  flex: none;
}
.price-chip .amount { font-size: 2rem; display: block; }
/* Owner-directed 2026-07-16: "from" moved ABOVE the number (was below).
   Deliberate deviation from the original layout - see parity round-3 register. */
.price-chip .from { display: block; font-size: .75rem; text-transform: lowercase; letter-spacing: .04em; }
.price-card h3 { font-size: 1.75rem; margin: 0; }   /* live theme pricing title: 28px (measured); was 23.2px */
.price-card .desc { font-size: .95rem; padding: 20px 30px 0; margin: 0; }
.features li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--ink);
  padding: 8px 0;
}
.features .tick::before {
  font-family: 'Flaticon'; content: "\f118";
  font-size: .78rem; color: #fff;
  background: var(--teal);
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.features li.off { color: #757575; }
.features li.off .tick::before { background: #C9C9C9; }

.price-card.featured { background: var(--ink); }
.price-card.featured .price-chip { background: var(--teal); }
.price-card.featured h3, .price-card.featured .features li { color: #fff; }
.price-card.featured .desc { color: rgba(255, 255, 255, .85); }
.price-card.featured .head, .price-card.featured .features { border-color: var(--hairline-dark); }
.price-card.featured .features li.off { color: rgba(255, 255, 255, .72); }
.price-card.featured .features li.off .tick::before { background: rgba(255, 255, 255, .25); }

/* Size tiers live INSIDE the package card (identity v1.1) - a plain final block,
   no box of its own. The .featured colour rules follow the parent card. */
.size-grid {
  padding: 24px 18px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px;
  text-align: center;
}
.size-grid .cell svg { width: 66px; height: 54px; color: var(--teal); fill: currentColor; }
.size-grid .cell .name { font-family: var(--font-display); font-size: .9rem; color: var(--ink); display: block; margin-top: 4px; }
.size-grid .cell .from { font-size: .82rem; color: #757575; }
.price-card.featured .size-grid .cell svg { color: var(--pale); }
.price-card.featured .size-grid .cell .name { color: #fff; }
.price-card.featured .size-grid .cell .from { color: rgba(255, 255, 255, .82); }

/* ---------- extras ---------- */

/* Corgi bottom-aligned with the extras card (Owner 2026-07-17): the section's
   split stretches, the text column flexes, and the figure drops to the bottom
   so the pup's underside sits level with the card's bottom edge. */
#extras .split { align-items: stretch; }
#extras .split > div:first-child { display: flex; flex-direction: column; }
.extras-figure { margin-top: auto; position: relative; }
/* Sleeping Z Z Z above the pup's head - same sticker style and float motion as
   the hero bone doodle (Owner mockup 2026-07-17): orange fill, dark outline,
   white halo, gentle doodle-float. Sizes rise away from the head. */
.zzz {
  position: absolute;
  left: 68%;
  bottom: 63%;
  z-index: 2;
  pointer-events: none;
  animation: doodle-float 6s ease-in-out infinite;
  overflow: visible;
}
/* stroked hand-drawn Z's, sticker layering: white halo / dark #5C4D48 (sampled
   from the crown+bone sticker PNGs) / orange core */
.zzz-w { stroke: #fff; stroke-width: 15; }
.zzz-d { stroke: #5C4D48; stroke-width: 10.5; }
.zzz-o { stroke: var(--orange); stroke-width: 6.5; }

/* ============================================================================
   HIDDEN DECORATIONS (Owner 2026-07-17: hide, may restore later).
   The markup and SVG assets are untouched - to bring any group back, delete
   its line below (or this whole block to restore all of them).
   ============================================================================ */
.hero-carousel .doodle { display: none; }   /* white-outline hero doodles: swoosh, ball, paw, 2 bones */
.sticker-crown, .sticker-bone { display: none; }   /* orange floating stickers on the about pug */
.zzz { display: none; }                     /* sleeping Z Z Z on the extras corgi */
.extras-figure img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: bottom; }
/* Owner-directed 2026-07-16: render the corgi ~1.15x bigger. On the 2-col layout
   there is whitespace to the right of the cutout and a wide gap before the price
   list, so it grows up-and-out from its bottom without colliding or exposing crop
   edges (transform, not layout size, so it never reflows the price column). Below
   1024px the section stacks and the figure is already full-width, so the scale is
   dropped there to avoid horizontal overflow. */
@media (min-width: 1025px) {
  .extras-figure { overflow: visible; }
  .extras-figure img { transform: scale(1.15); transform-origin: bottom center; }
}
.extras-list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--orange);   /* house card convention (identity v1.2, 3px) */
  padding: 18px 34px;
}
.extra-row {
  display: flex; align-items: center; gap: 22px;
  padding: 11px 0;
}
.extra-row + .extra-row { border-top: 1px solid var(--hairline); }
.price-tag {
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  border-radius: 6px;
  padding: 10px 0;
  width: 86px; text-align: center;
  flex: none;
}
.extra-row .name { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }  /* live theme extras: 24px (measured); was 19.2px */

/* ---------- Instagram drift band ---------- */

/* Natural-colour CMS photos are duplicated once and translated by half the
   track width for a seamless loop. The gallery is presentational; the only
   Instagram destination is the explicit CTA above it. */
.ig-strip { position: relative; overflow: hidden; background: var(--white); }
.ig-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: ig-drift 72s linear infinite;
}
.ig-track img {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  flex: none;
}
@keyframes ig-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ig-band { background: var(--white); text-align: center; }
.ig-head { padding: var(--section-space) var(--page-gutter) var(--card-gap); }
.ig-head h2 { margin: 0; }
.ig-head .intro { margin: 10px auto 0; }
.ig-cta { margin-top: 18px; }
.ig-band .ig-strip { height: 260px; }

/* ---------- inner page basics ---------- */

.prose h2 { font-size: 1.35rem; margin-top: 2em; }
.prose { max-width: 700px; }
.prose .lead { font-size: 1.05rem; }
.error-page-title { max-width: 16ch; }
.error-page-copy { max-width: 640px; }
.page-intro .error-page-title,
.page-intro .error-page-copy { margin-left: auto; margin-right: auto; }
.error-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--action-gap);
  justify-content: center;
  margin: 0;
}

/* ---------- accordion ---------- */

.accordion { display: grid; gap: 14px; }
.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--component-gap);
  align-items: start;
}
.acc-item { background: var(--cream-2); border-radius: var(--radius); overflow: hidden; }
.section-cream .acc-item { background: #F3EADC; }
.acc-head {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-body); font-weight: 700; font-size: var(--body-size); line-height: 1.5; color: var(--ink);
  padding: 18px 22px;
  transition: background-color .18s ease;
}
.acc-head:hover { background: color-mix(in srgb, var(--teal) 7%, transparent); }
.acc-head:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.acc-head .acc-icon {
  flex: none;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--white);
  color: var(--teal-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1;
  transition: transform .2s ease;
}
.acc-item[data-open] .acc-icon { transform: rotate(45deg); }
.acc-panel { font-size: .95rem; padding: 0 22px 20px 64px; }
.acc-panel ul { list-style: disc; padding-left: 20px; margin: 0 0 1em; }
.acc-panel li { margin-bottom: 6px; }

/* ---------- booking page ---------- */

.badges { display: flex; gap: 16px; margin-top: 18px; }
.badges img { height: 48px; width: auto; }

/* Booking content follows the shared inner-page pattern: the opening message
   lives above, while the dog image and booking checklist form the next 1:1 band. */
.booking-figure {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.booking-figure img { display: block; border-radius: 0; width: 100%; max-width: 560px; }
.booking-app-copy { margin-top: 28px; }

/* ---------- contact page ---------- */

.contact-grid {
  display: grid; grid-template-columns: 380px 1fr; gap: var(--component-gap);
  align-items: stretch;   /* info card matches the map height (Owner 2026-07-17) */
}
/* ONE info card, not three (identity v1.2, Owner 2026-07-17): address / email /
   phone are rows inside a single card, separated by INSET hairlines - the card
   carries the horizontal padding so row borders sit inside the card edges,
   matching the extras list and the original grooming-menu reference (row lines
   inset; only TITLE separators run full-width). */
.info-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--orange);   /* house card convention (identity v1.2, 3px) */
  padding: 0 24px;
  /* stretches to the map's height; auto margins on the rows share the extra
     space out evenly so the three rows stay balanced at any height */
  display: flex; flex-direction: column;
}
/* Rows grow from their NATURAL content height and share the card's spare space
   equally (flex-basis auto, Owner 2026-07-17) - so the 3-line address row gets
   a taller band than the 1-line email/phone rows and every row ends up with the
   SAME breathing room above and below its content. Grid centers the content in
   the band (align-content) while keeping the icon level with the row title
   (align-items:start, the earlier Owner rule). Card height is set by the map. */
.info-row {
  flex: 1 1 auto;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px;
  align-content: center; align-items: start;
  padding: 14px 0;
}
.info-row + .info-row { border-top: 1px solid var(--hairline); }
/* Icons are FILLED teal silhouettes, no circle chip (Owner 2026-07-17), sized
   and nudged so each sits level with its row title. fi-call stays the font
   glyph; the doghouse + envelope are inline SVGs on currentColor. */
.info-row .icon {
  flex: none;
  width: 24px; height: 24px;
  color: var(--teal-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-top: 1px;
}
.info-row .icon svg { width: 100%; height: 100%; fill: currentColor; }
.info-row h3 { font-size: 1.05rem; margin-bottom: 2px; }
.info-row p { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.info-row a,
.info-row a:hover { color: inherit; }
.info-row a { text-underline-offset: 2px; }
.info-row a:hover { text-decoration-thickness: 2px; }
.info-row a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.info-row > div { min-width: 0; }
.map-embed {
  width: 100%; height: 100%; min-height: 420px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--cream-2);
}
/* Apply the approved wash to the tiles only. Controls, attribution and the
   branded location marker retain their intended colours and contrast. */
.map-embed .leaflet-tile-pane {
  filter: grayscale(.72) sepia(.16) hue-rotate(128deg) saturate(.88) contrast(.96);
}
.map-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  text-align: center;
  font-weight: 700;
  background: var(--cream-2);
}
.map-embed.map-ready .map-fallback { display: none; }
.brand-map-marker {
  width: 42px !important;
  height: 50px !important;
  border: 0;
  background: transparent;
}
.brand-map-marker::before {
  content: '';
  position: absolute;
  left: 6px; top: 3px;
  width: 30px; height: 30px;
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  background: var(--orange);
  box-shadow: 0 5px 14px rgba(44, 62, 62, .28);
  transform: rotate(-45deg);
}
.brand-map-marker::after {
  content: '';
  position: absolute;
  left: 16px; top: 13px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--white);
}
.map-embed .leaflet-control-attribution {
  margin: 0 7px 7px 0;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font: 600 10px/1.35 var(--font-body);
}
.map-embed .leaflet-control-attribution a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-embed .leaflet-control-zoom a {
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
}
.map-embed .leaflet-control-zoom a:hover,
.map-embed .leaflet-control-zoom a:focus-visible {
  color: var(--ink-deep);
  background: var(--cream);
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--orange);   /* house card convention (identity v1.2, 3px) */
  padding: 40px;
  max-width: 980px;
  margin: 40px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.contact-form > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .95rem; color: var(--ink); }
.field label .req { color: var(--danger); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  border: 1px solid #DDD; border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--teal-ink); outline-offset: 1px; border-color: var(--teal-ink);
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 14%, transparent);
}
.field input:user-invalid:focus, .field textarea:user-invalid:focus {
  outline-color: var(--danger);
}
.form-actions { grid-column: 1 / -1; text-align: center; }
.form-status { grid-column: 1 / -1; margin: 0; font-weight: 700; text-align: center; }
.form-status.ok { color: var(--teal-deep); }
.form-status.err { color: var(--danger); }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }
/* Turnstile's normal widget is fixed at 300x65. Keep its readable horizontal
   format but reduce the visual footprint inside the shared enquiry form. */
.turnstile-field {
  width: 240px;
  height: 52px;
  overflow: hidden;
}
.turnstile-field .cf-turnstile {
  width: 300px;
  min-height: 65px;
  transform: scale(.8);
  transform-origin: 0 0;
}
@media (max-width: 379px) {
  .turnstile-field { width: 225px; height: 49px; }
  .turnstile-field .cf-turnstile { transform: scale(.75); }
}

/* ---------- footer ---------- */

/* Footer watermark (Owner 2026-07-17): the little orange paw PNG is replaced by
   the SAME big paw shape the pricing section uses, refilled slightly darker than
   the footer ink so it reads as a quiet watermark. Two paws: one anchored LEFT
   and cropped by the footer edge (the "bleeding out" read), one smaller top-right,
   rotated, also cropped. Subtle by design - keep the fill within a few percent
   of --ink (#3D5757 on #405B5B - ~5% darker than the ground; 10% read too dark, Owner 2026-07-17). */
.site-footer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%233D5757'%3E%3Cellipse cx='58' cy='56' rx='21' ry='30' transform='rotate(-18 58 56)'/%3E%3Cellipse cx='100' cy='42' rx='21' ry='30'/%3E%3Cellipse cx='142' cy='56' rx='21' ry='30' transform='rotate(18 142 56)'/%3E%3Cpath d='M100 88c-36 0-58 27-58 58 0 26 26 42 58 42s58-16 58-42c0-31-22-58-58-58z'/%3E%3C/g%3E%3C/svg%3E") left -270px bottom -250px / 830px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%233D5757' transform='rotate(24 100 100)'%3E%3Cellipse cx='58' cy='56' rx='21' ry='30' transform='rotate(-18 58 56)'/%3E%3Cellipse cx='100' cy='42' rx='21' ry='30'/%3E%3Cellipse cx='142' cy='56' rx='21' ry='30' transform='rotate(18 142 56)'/%3E%3Cpath d='M100 88c-36 0-58 27-58 58 0 26 26 42 58 42s58-16 58-42c0-31-22-58-58-58z'/%3E%3C/g%3E%3C/svg%3E") right -150px top -110px / 540px auto no-repeat,
    var(--ink);
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-body);
  font-size: var(--footer-size);
  line-height: var(--footer-leading);
}
.footer-grid {
  display: grid;
  /* brand column slimmed (logo + social only, Owner 2026-07-17); the contact
     rows column gets the room so the email never wraps mid-address. */
  grid-template-columns: 1.1fr 1fr 0.9fr;   /* 3 columns: brand+contact | reviews | hours (Owner 2026-07-17) */
  gap: var(--component-gap);
  padding: 70px 0 50px;
}
.site-footer h4 { color: #fff; font-size: 1.1rem; margin-bottom: 1em; }
.footer-brand img { height: 84px; width: auto; max-width: none; margin-bottom: 18px; }  /* max-width:none so the base img max-width:100% cannot squash the aspect ratio (Owner 2026-07-17) */
/* Phone under the logo, above the social icons (Owner 2026-07-17): teal icon + number */
.footer-phone { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.footer-phone .icon { flex: none; color: var(--teal); font-size: 1.5rem; line-height: 1; }
.footer-phone a { font-weight: 700; color: #fff; text-decoration: none; }
.footer-phone a:hover { color: var(--peach); }
/* Footer contact rows (Owner 2026-07-17): same icon + title + value pattern as
   the contact page's info card, but text WHITE on the dark footer - icons stay
   the same teal. Replaces the old Help links column. */
.f-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}
.f-row .icon {
  width: 22px; height: 22px;
  color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-top: 2px;
}
.f-row .icon svg { width: 100%; height: 100%; fill: currentColor; }
.f-row p { margin: 0; color: #fff; overflow-wrap: anywhere; }
.f-row a { color: #fff; text-decoration: none; }
.f-row a:hover { text-decoration: underline; }
/* Footer contact block: phone / address / email spaced EQUALLY by one grid gap
   (Owner 2026-07-17) - the three gaps are identical, not per-row margins. */
.footer-brand .f-contact { display: grid; row-gap: 18px; margin: 4px 0 8px; }
.footer-brand .f-row { margin: 0; }
.f-address { text-decoration: none; color: inherit; }
.f-address:hover p { text-decoration: underline; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
/* Every footer text element inherits the single size and leading from
   .site-footer. Only the section headings override that inherited type role. */
.hours li { display: flex; justify-content: space-between; margin-bottom: 8px; }
.hours .time { color: #fff; font-weight: 800; }   /* white, not orange (Owner 2026-07-17) */
.hours .closed { color: #fff; font-weight: 800; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 22px 0;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255, 255, 255, .85); text-decoration: none; display: inline-block; padding: 3px 0; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

/* footer reviews column (Owner-picked variant B). Data is CMS-tokenised from
   content/reviews.json - manual until the dynamic Google feed is wired, at which
   point only the data source changes, not this markup/CSS. Stars are site orange
   on the dark teal footer; quote accent bars are brand teal. */
.gr-badge { max-width: 13em; }   /* about the width of the "What our clients say" heading (Owner 2026-07-17) */
.gr-line { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.gr-stars { display: inline-flex; gap: 3px; }
.gr-rating { margin: 0 0 2px; }
.gr-rating strong { font-family: var(--font-body); font-weight: 800; }
.gr-star { fill: var(--orange); }
.gr-count { opacity: .82; margin: 2px 0 12px; }   /* size from the footer-wide p rule */
/* One review at a time, chosen at random and crossfaded by main.js (Owner
   2026-07-17). The rotator is a FIXED-height stage (with JS) so a longer or
   shorter review never moves the footer; the excerpt is capped at 3 lines by
   line-clamp so a long Google review cannot break the column. Without JS the
   quotes simply stack, visible and static. */
.gr-quote {
  opacity: .9; margin: 0 0 12px;
  border-left: 2px solid var(--teal); padding-left: 12px;
}
.gr-qtext {
  display: -webkit-box;
  font-style: italic;
  font-weight: 600;
  -webkit-line-clamp: 5;   /* excerpt cap 5 lines (Owner 2026-07-17) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gr-quote cite { display: block; font-style: normal; opacity: .7; margin-top: 3px; }
/* fixed stage; JS sizes it to the tallest actual review so it never jumps on
   rotate and wastes no space (falls back to this min-height before JS runs) */
html.js .gr-rotator { position: relative; min-height: 90px; }
html.js .gr-quote {
  position: absolute; inset: 0 0 auto 0; margin: 0;
  opacity: 0; transition: opacity .6s ease;
  pointer-events: none;
}
html.js .gr-quote.is-on { opacity: .9; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  html.js .gr-quote { transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .cards-3, .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .pricing-grid { gap: var(--component-gap); }
  .split { grid-template-columns: 1fr; gap: var(--layout-gap-stack); }
  .faq-columns { grid-template-columns: 1fr; gap: 14px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablet footer composition (BLAT5T5). At two columns the three semantic groups
   would leave Working Hours alone in a half-empty second row. Hours is the
   shortest, widest-tolerant group, so it becomes an intentional full-width band
   under the two tall columns, its four days laid out across rather than stacked.
   Scoped to the exact range where the footer is two columns (601-1024px);
   below 601px the whole footer is a single column and the days stack again.
   Two-up rather than four-across so the longest label, "Tuesday to Friday
   9am - 6pm", never wraps at the narrow end of the range. */
@media (min-width: 601px) and (max-width: 1024px) {
  .footer-hours { grid-column: 1 / -1; }
  .footer-hours .hours {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Same token as the parent .footer-grid gap, not a matching literal: the
       point of the band is that its two day columns track the two columns
       above it, so the alignment must survive a change to --component-gap. */
    column-gap: var(--component-gap);
    row-gap: 8px;
  }
  .footer-hours .hours li { margin-bottom: 0; }
  /* Insurance, dormant at the current four lines: if the identity's four-line
     hours rule is ever revised to an odd count, the last row spans both tracks
     instead of leaving the half-empty cell this whole band exists to remove. */
  .footer-hours .hours li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    box-shadow: 0 14px 24px rgba(64, 91, 91, .15);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-open .main-nav {
    opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; transition-delay: 0s;
  }
  .main-nav ul { flex-direction: column; gap: 0; padding: 10px var(--page-gutter) 20px; }
  .main-nav a { display: block; padding: 12px 0; font-size: 1rem; }
  .section { padding: var(--section-space-compact) 0; }
  .hero-carousel, .hero-track { min-height: 540px; }
  .hero-slide { background-position: 72% center; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(34, 58, 61, .58) 0%, rgba(34, 58, 61, .38) 55%, rgba(34, 58, 61, .15) 100%);
  }
  .hero-inner { padding: 70px 0 110px; }
  .doodle-yarn, .doodle-bone-c { display: none; }
  .ig-head { padding: var(--section-space-compact) 20px 24px; }
  .ig-band .ig-strip { height: 200px; }
}

@media (max-width: 390px) {
  .ig-band .ig-strip { height: 170px; }
}

@media (max-width: 600px) {
  .topbar .container { justify-content: center; gap: 16px; flex-wrap: wrap; }
  .logo img { height: 62px; }
  /* shrink from the mobile base (62px), not the desktop 72px override - else the
     "shrunk" nav would grow on phones (62 -> 72). ~20% smaller here too. */
  .site-header.nav-shrink .logo img { height: 50px; }
  .checklist { grid-template-columns: 1fr; }
  .contact-form { padding: 26px 20px; grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--component-gap-compact); }
  .footer-bottom { justify-content: center; text-align: center; }
  .size-grid { grid-template-columns: 1fr 1fr; }
  .extras-list { padding: 12px 20px; }
  .badges img { height: 42px; }
  /* Keep the shared centred page-opening hierarchy, but return long mobile
     paragraphs to the readable running-copy axis. Short intros remain centred. */
  .page-intro-long, .page-intro-copy { text-align: left; }
  /* Continuously moving content has no reliable pause affordance on touch. */
  .ig-track { animation: none; transform: none; will-change: auto; }
}

/* ---------- motion ---------- */

/* scroll reveals - hidden only when JS is running (html.js) */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal].btn.reveal-done {
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  transition-delay: 0s;
}
html.js [data-reveal].btn.reveal-done:hover { transform: translateY(-2px); }
html.js [data-reveal].btn.reveal-done:active { transform: translateY(0) scale(.98); }

/* hero doodles: gentle float */
@keyframes doodle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
.hero-carousel .doodle { animation: doodle-float 6s ease-in-out infinite; }
.doodle-bone-c, .doodle-paw { animation-duration: 7.5s; animation-delay: 1.2s; }
.doodle-yarn { animation-duration: 8s; animation-delay: .5s; }

/* accordion open/close */
html.js .acc-panel {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px 0 64px;
  transition: max-height .35s ease, padding-bottom .35s ease;
}
html.js .acc-panel[hidden] { display: none; }
html.js .acc-item[data-open] .acc-panel { padding-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .acc-head, .main-nav, .nav-toggle span, .field input, .field textarea { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js [data-reveal].btn.reveal-done { transition: none; }
  html.js [data-reveal].btn.reveal-done:hover,
  html.js [data-reveal].btn.reveal-done:active { transform: none; }
  .hero-carousel .doodle { animation: none; }
  .zzz { animation: none; }
  .figure-stack .sticker { animation: none; }
  .hero-slide { transition: none; }
  #preloader-wrapper { display: none !important; }
  html.js .acc-panel { transition: none; }
  .acc-head .acc-icon { transition: none; }
  .ig-track { animation: none; transform: none; will-change: auto; }
}