/*
 * Scruffies Pet Groomers - scruffies.co.uk
 * Clean static site - April 2026
 *
 * Fonts: Boogaloo (headings), Roboto (body), Bad Script (accents)
 * Colours: Teal primary, orange accents
 */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@300;400;700&family=Bad+Script&family=Dr+Sugiyama&display=swap');

/* Self-hosted so we can apply size-adjust — Boogaloo's x-height is lower
   than typical heading display faces, so the glyphs are scaled up to
   match the visual weight the layout was originally tuned for. */
@font-face {
  font-family: 'Boogaloo';
  src: url('/css/fonts/Boogaloo.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  size-adjust: 130%;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green: #165016;
  --green-dark: #0e380e;
  --green-light: #e9f2e9;
  --orange: #FF4E00;
  --orange-dark: #d94300;
  --dark: #363839;
  --grey: #747474;
  --light-grey: #f5f5f5;
  --white: #ffffff;
  --max-width: 1200px;
  --nav-height: 80px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--grey);
  line-height: 1.7;
  background: var(--white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--green);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

/* Animated orange underline on hover - matches nav style */
a:not(.site-logo):not(.main-nav a):not(.btn)::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease;
}

a:not(.site-logo):not(.main-nav a):not(.btn):hover::after {
  left: 0;
  right: 0;
}

h1, h2, h3, h4 {
  font-family: 'Boogaloo', cursive;
  color: var(--green);
  font-weight: normal;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.site-logo img {
  height: 50px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.main-nav a {
  font-family: 'Boogaloo', cursive;
  font-size: 1.3rem;
  color: var(--grey);
  padding: 0.5rem 1.2rem;
  position: relative;
  transition: color 0.3s ease;
  text-decoration: none;
}

/* Orange underline grows in on hover */
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  right: 50%;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  left: 20%;
  right: 20%;
}

.main-nav a:hover {
  color: var(--green);
  text-decoration: none;
}

.main-nav a.active {
  color: var(--green);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--dark);
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.3s;
}

/* ===== HERO BANNER ===== */
.hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero overlay removed on subpages - title floats over the image via
   a heavy text-shadow halo instead of a coloured wash. */

/* Homepage hero - cartoon dogs banner */
.hero-banner {
  background-color: #6d6e71;
  min-height: auto;
  padding: 0;
  overflow: hidden;
}

.hero-banner-img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  padding: 2rem;
}

.hero-content h1,
.hero-content h2 {
  color: var(--white);
  /* Layered black halo + drop shadow so white text reads over any photo */
  text-shadow:
    0 0 32px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(0, 0, 0, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.85),
    3px 3px 0 rgba(0, 0, 0, 0.6);
}

.hero-content h1 {
  font-size: 3.6rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.hero-page {
  position: relative;
}

.hero-page .hero-content {
  z-index: 2;
}

.hero-content p {
  font-size: 1.2rem;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
}

/* Page hero (smaller, for inner pages) — constrained-hero standard.
   Caps width at 1600px so source photos don't upscale on ultrawide monitors;
   caps height at 400px to keep cropping consistent. Bottom gradient gives
   the white title block better readability against busy photos. */
.hero-page {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  min-height: 280px;
  max-height: 400px;
  overflow: hidden;
}

.hero-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.32) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Legacy split hero (image-as-element + side-by-side layout). Retained in
   case any future page wants this variant; not currently used. */
.hero-split {
  background: var(--white);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  overflow: hidden;
  text-align: right;
}

.hero-split .hero-split-image {
  width: 45%;
  max-width: 460px;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  display: block;
}

.hero-split .hero-content {
  flex: 1;
  padding: 2rem 3rem;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-split .hero-content h1 {
  color: var(--green);
  text-shadow: none;
  margin: 0;
}

/* ===== SECTIONS ===== */
.section {
  padding: 4rem 0;
  background: var(--white);
}

.section-alt {
  /* Visual distinction removed — sections are uniform white bg.
     The chevron divider stripes mark section transitions where needed. */
}

/* Diagonal shape dividers between sections
   Matching original Elementor design: 200px tall shapes, #54595f grey.
   Top piece at bottom of intro, mirrored piece at top of services.
   Cards float over the divider with z-index, negative margin, green border and heavy shadow. */

/* Divider shapes use ::before for top, ::after for bottom.
   A section can have both classes to get dividers on both edges. */

.divider-top,
.divider-bottom {
  position: relative;
  z-index: 1;
}

.divider-top {
  padding-bottom: 220px;
}

/* Contact form section already has white-bordered cards as its content,
   so it doesn't need the full safety clearance above the divider band. */
.divider-top:has(.contact-grid) {
  padding-bottom: 140px;
}

/* When a divider-top section is directly followed by one with a floating
   bordered-card, match the natural section→section gap (sum of both sections'
   default 4rem padding = 128px) by setting padding-bottom = that gap + the
   floating lift (80px). Yields ~128px between the two cards — the same
   spacing as a non-stripe section transition. */
.divider-top:has(+ .divider-bottom .bordered-card.floating-feature) {
  padding-bottom: calc(8rem + 80px);
}

.divider-top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background: #54595f;
  z-index: 2;
  pointer-events: none;
  /* Thick on left, tapers to right */
  clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
}

.divider-bottom {
  padding-top: 220px;
}

.divider-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background: #54595f;
  z-index: 2;
  pointer-events: none;
  /* Mirrored: thick on right, tapers to left */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}

/* Floating cards - used in sections that sit over dividers */
.floating-cards {
  position: relative;
  z-index: 3;
}

.floating-cards .service-card {
  border: 5px solid var(--green);
  border-radius: 12px;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  background: var(--white);
}


.floating-cards .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 10px 14px 15px 0px rgba(0, 0, 0, 0.42);
}

/* Pull floating content up into the divider band.
   Offset matches .divider-bottom padding-top + 80px lift into the previous section. */
.divider-bottom .floating-cards,
.divider-bottom .floating-feature {
  margin-top: -300px;
}

/* Single floating element (e.g. carousel) needs its own stacking + positioning */
.floating-feature {
  position: relative;
  z-index: 3;
}

/* Inner-page follow-up call-to-action card (centered with action buttons) */
.follow-card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.follow-card .accent-line {
  margin-left: auto;
  margin-right: auto;
}

.follow-card-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-heading {
  text-align: center;
  margin-bottom: 2.5rem;
  /* Keep headings above the grey divider bands */
  position: relative;
  z-index: 3;
}

.section-heading h2 {
  font-size: 2.4rem;
  line-height: 1.1;
  position: relative;
  display: inline-block;
}

.section-heading h2::after {
  content: '';
  display: block;
  width: 50%;
  height: 4px;
  background: var(--orange);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}


/* ===== WELCOME SECTION ===== */
.welcome-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
  position: relative;
  z-index: 3;
}

/* Note card: image left, handwritten-style text right, all in one bordered card */
.welcome-note-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 5px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.38);
  background: #efefef;
}

.welcome-note-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  display: block;
}

.welcome-note-text {
  padding: 2rem 1.8rem;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: #3a3a3a;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.welcome-note-text p {
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

/* Right column: heading, credentials, signature */
.welcome-text {
  padding-top: 0;
}

.welcome-text h2 {
  font-size: 50px;
  letter-spacing: -2.2px;
  text-transform: capitalize;
  margin-bottom: 0;
}

/* Orange accent line under heading */
.accent-line {
  display: block;
  width: 50%;
  height: 4px;
  background: var(--orange);
  margin: 4px 0 20px 0;
  border-radius: 2px;
}

.welcome-text .subtitle {
  font-size: 18px;
  color: #3a3a3a;
  line-height: 1.6;
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
}

.credentials-list {
  list-style: none;
  margin-bottom: 0;
}

.credentials-list li {
  padding: 5px 0 5px 28px;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.3px;
  color: #3a3a3a;
}

.credentials-list li::before {
  content: "\f14a";
  font-family: 'FontAwesome', sans-serif;
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: 18px;
}

/* Fallback check mark if FontAwesome not loaded */
@supports not (font-family: 'FontAwesome') {
  .credentials-list li::before {
    content: "\2713";
    font-family: inherit;
    font-weight: bold;
  }
}

/* Signature - Dr Sugiyama handwriting font */
.signature {
  font-family: 'Dr Sugiyama', cursive;
  font-size: 60px;
  font-style: italic;
  color: var(--orange);
  text-align: right;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.2;
}

/* ===== SERVICE CARDS ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.service-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14);
}

.service-card-image {
  height: 200px;
  overflow: hidden;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card-image img {
  transform: scale(1.05);
}

.service-card-body {
  padding: 1.5rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card-body .price-badge {
  margin-top: auto;
}

.service-card-body h3 {
  font-family: 'Bad Script', cursive;
  font-size: 35px;
  font-weight: bold;
  letter-spacing: -0.3px;
  color: var(--orange);
}

.price-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  padding: 4px 18px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.75rem 0;
}

.btn {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  padding: 10px 28px;
  /* Transparent 2px border so the box geometry matches .btn-outline.
     Without this, when .btn and .btn-outline sit side-by-side (e.g. in
     a flex row), .btn's text appears 2px higher because .btn-outline's
     real border pushes its text 2px down inside the same stretched box. */
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.btn:hover {
  background: var(--green-dark);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
}

.btn-outline:hover {
  background: var(--green);
  color: var(--white);
}

/* ===== "WE LOVE DOGS" BANNER ===== */
.dogs-banner {
  position: relative;
  z-index: 3;
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}


.dogs-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.dogs-banner-content {
  position: relative;
  z-index: 1;
  padding: 2rem 4rem;
}

.dogs-headline {
  font-family: 'Boogaloo', cursive;
  font-size: 48px;
  font-weight: normal;
  color: var(--white);
  letter-spacing: -2px;
}

.rotating-word-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}

.rotating-word {
  font-family: 'Bad Script', cursive;
  font-style: italic;
  font-weight: bold;
  color: var(--orange);
  display: inline;
}

/* Legacy class kept for pages that add it explicitly; rotator is visible
   by default now. */
.rotating-word.active {
  display: inline;
}

/* Typing cursor */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: #000000;
  margin-left: 12px;
  transform: skewX(-12deg);
  vertical-align: baseline;
  animation: cursor-blink 0.7s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===== SALON SECTION ===== */

.salon-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2.5rem;
  align-items: stretch;
  position: relative;
  z-index: 3;
}

.salon-grid > * {
  min-width: 0;
}

.salon-map {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  min-width: 0;
  min-height: 420px;
}

.salon-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: brightness(80%) saturate(162%);
}

/* Opening hours card */
.hours-card {
  background: var(--white);
  border: 2px solid var(--green-light);
  border-radius: 12px;
  padding: 2rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
}

.hours-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}

.hours-card h3 {
  margin-bottom: 0;
}

.hours-card .accent-line {
  width: 30%;
  margin: 6px auto 1.2rem;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.hours-table td {
  padding: 10px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--grey);
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.hours-table tr:last-child td {
  border-bottom: none;
}

.hours-table td:first-child {
  font-weight: 500;
  color: var(--green);
  text-align: left;
}

.hours-table td:last-child {
  text-align: right;
}

/* Contact details in hours card */
.hours-card-contact {
  border-top: 1px solid #eee;
  padding-top: 1.5rem;
}

.hours-card-contact p {
  font-size: 15px;
  color: var(--grey);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

/* Stripe only at bottom edge - no padding, content stays put */
.stripe-below {
  position: relative;
}

.stripe-below::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background: #54595f;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
}

/* Stripe only at top edge - mirror */
.stripe-above {
  position: relative;
  margin-top: 200px;
}

.stripe-above::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background: #54595f;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}

/* ===== SIGNOFF CARD ===== */
.signoff-card {
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 12px;
  padding: 2.5rem 3.5rem;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  text-align: center;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: #3a3a3a;
  line-height: 1.6;
  position: relative;
  z-index: 3;
  margin-top: -80px;
}

.signoff-card p {
  margin: 0;
}

.signoff-card a {
  font-weight: 500;
}

/* ===== REUSABLE BORDERED CARD =====
   Shared floating-card treatment used across inner pages to match
   the homepage: heavy offset shadow, thick green border, white fill. */
.bordered-card {
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 12px;
  padding: 2.5rem 3rem;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  position: relative;
  z-index: 3;
}

.bordered-card-tight {
  padding: 1.75rem 2rem;
}


.bordered-card > :first-child,
.bordered-card > :first-child > :first-child {
  margin-top: 0;
}

/* Intro copy block - centered, constrained width, relaxed reading.
   Raised above the grey divider band via z-index. */
.intro-copy {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  color: #3a3a3a;
  letter-spacing: -0.3px;
  line-height: 1.65;
  position: relative;
  z-index: 3;
}

.intro-copy p {
  margin-bottom: 1rem;
}

/* ===== SERVICES PAGE - SERVICE PANELS =====
   Photo-led panels that alternate left/right. Green border, heavy offset
   shadow and Bad Script orange titles — matches the homepage aesthetic
   and mirrors the layout of the original live site's service sections. */
.service-panels {
  display: grid;
  gap: 2.5rem;
  position: relative;
  z-index: 3;
}

.service-panel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.38);
  min-height: 340px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-panel:hover {
  transform: translateY(-4px);
  box-shadow: 10px 14px 15px 0 rgba(0, 0, 0, 0.42);
}

.service-panel.reverse .service-panel-image { order: 2; }
.service-panel.reverse .service-panel-body  { order: 1; }

.service-panel-image {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 260px;
}

.service-panel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.service-panel-price {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--orange);
  color: var(--white);
  font-family: 'Boogaloo', cursive;
  padding: 8px 22px 6px;
  border-radius: 999px;
  font-size: 1.35rem;
  letter-spacing: 0.6px;
  box-shadow: 4px 4px 0 var(--green);
  z-index: 2;
}

.service-panel.reverse .service-panel-price {
  left: auto;
  right: 1.25rem;
}

.service-panel-body {
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  background: #54595f;
  color: rgba(255, 255, 255, 0.92);
}

.service-panel-body .btn-outline {
  border-color: var(--white);
  color: var(--white);
}

.service-panel-body .btn-outline:hover {
  background: var(--white);
  color: var(--green);
}

.service-panel-body h3 {
  font-family: 'Bad Script', cursive;
  color: var(--orange);
  font-size: 36px;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.service-panel-body .accent-line {
  margin: 4px 0 1rem;
}

.service-panel-body p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.service-panel-body .btn {
  align-self: flex-start;
}

/* Pricing Cards - upgraded to match the homepage floating-card aesthetic */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 3;
}

.pricing-card {
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 12px;
  padding: 2.25rem 1.75rem;
  text-align: center;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 10px 14px 15px 0px rgba(0, 0, 0, 0.42);
}

.pricing-card h3 {
  font-family: 'Bad Script', cursive;
  font-size: 34px;
  color: var(--orange);
  margin: 0 0 0.5rem;
}

.pricing-card .price {
  font-family: 'Boogaloo', cursive;
  font-size: 2.6rem;
  color: var(--green);
  margin: 0.25rem 0 0.75rem;
  letter-spacing: 1px;
}

.pricing-card p {
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.5;
}

.pricing-card .btn {
  margin-top: 1rem;
}

/* ===== PAYMENT ACCEPT BANNER =====
   Mirrors the original live site: credit-card hero image with a dark
   overlay, animated headline "We Accept [X] ... Payments!" and a row
   of brand marks (Visa, Mastercard, Apple, Android) underneath. */
.accept-banner {
  position: relative;
  padding: 3.5rem 2rem;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green) center/cover no-repeat;
  color: var(--white);
  text-align: center;
  overflow: hidden;
}

.accept-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.accept-banner-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

/* Accept banner reuses .dogs-headline for the text so the rotating
   word behaves and reads exactly like the homepage "We love X dogs"
   banner - including the natural-flow shift as the word types/deletes. */
.accept-banner .dogs-headline {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.accept-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.75rem;
  flex-wrap: wrap;
  color: var(--white);
}

.accept-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.25s ease, transform 0.25s ease;
}

.accept-icon svg {
  height: 100%;
  width: auto;
  fill: currentColor;
  display: block;
}

.accept-icon:hover {
  color: var(--orange);
  transform: translateY(-2px);
}

/* ===== GALLERY ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.gallery-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ===== CONTACT PAGE ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  position: relative;
  z-index: 3;
}

.contact-grid h2 {
  font-size: 42px;
  letter-spacing: -1.5px;
  margin-bottom: 0;
}

.contact-grid .accent-line {
  margin: 6px 0 1.25rem;
}

.contact-form .form-group {
  margin-bottom: 1.2rem;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--dark);
  font-size: 15px;
  letter-spacing: 0.2px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  background: var(--white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 80, 22, 0.12);
}

.contact-form .btn {
  font-size: 1rem;
  padding: 12px 32px;
}

.contact-info-body {
  font-size: 17px;
  color: #3a3a3a;
  line-height: 1.6;
  letter-spacing: -0.2px;
}

.contact-info-body p {
  margin-bottom: 1rem;
}

.contact-details-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 3;
}

.contact-detail {
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-detail:hover {
  transform: translateY(-6px);
  box-shadow: 10px 14px 15px 0px rgba(0, 0, 0, 0.42);
}

.contact-detail h3 {
  font-family: 'Bad Script', cursive;
  font-size: 32px;
  color: var(--orange);
  margin-bottom: 0.25rem;
  padding-bottom: 0;
  border: none;
}

.contact-detail .accent-line {
  margin: 4px auto 1rem;
  width: 40%;
}

.contact-detail address,
.contact-detail p {
  font-style: normal;
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0.25rem;
}

.contact-detail .hours-table {
  margin: 0 auto;
}

/* Opening hours list - definition list laid out as a 2-col grid
   so day + hours align cleanly without a <table>. */
.hours-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0 auto;
  max-width: 240px;
  text-align: left;
}

.hours-list dt {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: var(--green);
  font-size: 16px;
  white-space: nowrap;
  padding-top: 2px;
}

.hours-list dd {
  font-family: 'Roboto', sans-serif;
  color: #3a3a3a;
  font-size: 16px;
  margin: 0;
  text-align: right;
  padding-top: 2px;
}

/* Consolidated phone + email links inside Find Us card */
.contact-detail-links {
  margin-top: 1rem;
  line-height: 2;
}

.contact-detail-links a {
  font-weight: 500;
}

/* Big social icon links (Facebook / Instagram) inside Follow Us card */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin: 0.5rem 0 1rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 3rem;
  color: var(--green);
  background: var(--green-light);
  border-radius: 50%;
  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover,
.social-icons a:focus-visible {
  color: var(--white);
  background: var(--orange);
  transform: translateY(-4px);
  outline: none;
}

/* Neutralise the global animated underline on these icon links */
.social-icons a::after {
  display: none !important;
}

.social-handles {
  font-family: 'Bad Script', cursive;
  color: var(--orange);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.social-links a {
  font-weight: 500;
  padding: 6px 14px;
  background: var(--green-light);
  border-radius: 6px;
  font-size: 0.9rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
  background: var(--green);
  color: var(--white);
}

/* Neutralise the global animated underline inside social pills */
.social-links a::after {
  display: none !important;
}

.contact-map {
  margin-top: 0;
}

.contact-map iframe {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 12px;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.38);
  filter: brightness(85%) saturate(140%);
}

/* ===== PRIVACY POLICY ===== */
.policy-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16.5px;
  color: #3a3a3a;
  line-height: 1.75;
}

.policy-content > p:first-child {
  font-size: 17px;
  color: #2a2a2a;
}

.policy-content h2,
.policy-content h3 {
  font-family: 'Bad Script', cursive;
  color: var(--orange);
  font-size: 30px;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.3px;
}

.policy-content h2:first-of-type,
.policy-content h3:first-of-type {
  margin-top: 1.5rem;
}

.policy-content ul {
  margin: 0.75rem 0 1.25rem 1.5rem;
  color: #3a3a3a;
}

.policy-content li {
  margin-bottom: 0.4rem;
}

.policy-content em {
  color: var(--grey);
  font-size: 0.95rem;
}

blockquote {
  background: var(--green-light);
  border-left: 6px solid var(--orange);
  padding: 1.75rem 2rem;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #2a2a2a;
  font-size: 17px;
  line-height: 1.7;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-weight: 500;
  color: var(--orange);
  font-family: 'Bad Script', cursive;
  font-size: 19px;
}

/* ===== NEWS PAGE ===== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 820px;
  margin: 0 auto;
}

.news-article {
  padding: 2.25rem 2.75rem;
}

.news-article .news-date {
  font-family: 'Bad Script', cursive;
  color: var(--orange);
  font-size: 22px;
  letter-spacing: 0.3px;
  margin-bottom: 0.25rem;
}

.news-article h2 {
  font-size: 38px;
  letter-spacing: -1px;
  margin-bottom: 0;
  color: var(--green);
}

.news-article .accent-line {
  margin: 6px 0 1.25rem;
}

.news-article p {
  color: #3a3a3a;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.2px;
}

.news-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--grey);
}

/* ===== FOOTER ===== */
.site-footer {
  background: #54595f;
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-mascot img {
  width: 160px;
  height: auto;
  opacity: 0.95;
}

.site-footer h4 {
  color: var(--white);
  font-family: 'Bad Script', cursive;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 0px;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}

.site-footer h4::after {
  content: '';
  display: block;
  width: 50%;
  height: 2px;
  background: var(--orange);
  margin-top: 4px;
  border-radius: 2px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.8);
}

.site-footer a:hover {
  color: var(--white);
}

.footer-list {
  list-style: none;
}

.footer-list li {
  padding: 3px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.1px;
}

.footer-list-icons li,
.footer-list-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.footer-list-checks svg {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 1px;
}

.footer-list-icons svg {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  border: 2px solid var(--orange);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-socials a:hover {
  background: var(--orange);
  color: var(--white);
}

.footer-privacy-btn {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--orange);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: 'Roboto', sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-privacy-btn:hover {
  background: var(--orange);
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== GALLERY CAROUSEL =====
   Horizontal scroll with prev/next arrow buttons. Scroll-snap keeps items
   aligned; items are clickable and open in the lightbox. */
.carousel {
  position: relative;
  padding: 0 3.75rem;
  z-index: 3;
}

.carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 5px solid var(--green);
  background: var(--white);
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.38);
}

/* Soft white-to-transparent fades at the inner edges so partially-visible
   carousel items dissolve into the card frame instead of being hard-cut. */
.carousel-viewport::before,
.carousel-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  z-index: 2;
}

.carousel-viewport::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
}

.carousel-viewport::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 1rem 1.25rem 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) rgba(0, 0, 0, 0.08);
}

.carousel-track::-webkit-scrollbar {
  height: 8px;
}

.carousel-track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.carousel-track::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 4px;
}

.carousel-item {
  flex: 0 0 auto;
  width: 240px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  scroll-snap-align: start;
  background: var(--white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover,
.carousel-item:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
  outline: none;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: var(--green);
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 50%;
  font-family: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  z-index: 4;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  background: var(--green-dark);
  outline: none;
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.36);
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}

.carousel-arrow-prev { left: 0; }
.carousel-arrow-next { right: 0; }

/* ===== LIGHTBOX =====
   Full-screen overlay for viewing carousel images. Keyboard-driven
   (Esc, Arrow keys) with prev/next buttons. */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox[aria-hidden="false"] {
  display: flex;
  animation: lightbox-fade-in 0.25s ease;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-stage {
  position: relative;
  max-width: min(1080px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
  border: 5px solid var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  display: block;
  background: var(--white);
}

.lightbox-caption {
  color: var(--white);
  font-family: 'Bad Script', cursive;
  font-size: 20px;
  margin-top: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.lightbox-btn {
  position: absolute;
  background: rgba(22, 80, 22, 0.9);
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  font-size: 26px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  background: var(--orange);
  outline: none;
}

.lightbox-close {
  top: 2rem;
  right: 2rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
}

.lightbox-prev { left: 2rem; }
.lightbox-next { right: 2rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
  transform: translateY(-50%) scale(1.08);
}

.lightbox-counter {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 14px;
  border-radius: 999px;
}

body.lightbox-open {
  overflow: hidden;
}

/* ===== COOKIE CONSENT BANNER =====
   Fixed-bottom dark grey bar shown on first visit (until acknowledged).
   Persists acknowledgement in localStorage so it doesn't reappear. */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #54595f;
  color: rgba(255, 255, 255, 0.92);
  padding: 1rem 1.5rem;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.28);
  font-size: 0.95rem;
}

.cookie-banner.is-hidden {
  display: none;
}

.cookie-banner p {
  margin: 0;
  text-align: center;
  flex: 1;
  min-width: 260px;
}

.cookie-banner a.cookie-readmore {
  color: var(--orange);
  font-weight: 500;
  text-decoration: underline;
  margin-left: 0.5rem;
}

.cookie-banner a.cookie-readmore:hover {
  color: var(--white);
}

.cookie-banner .btn {
  flex-shrink: 0;
}

/* ===== "WORRIED? DON'T BE!" MODAL =====
   Centered overlay summarising the privacy reassurance with a CTA to the
   full policy page. Triggered from the cookie banner's Read More link
   and from the privacy page's footer. */
.worried-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.worried-modal[aria-hidden="false"] {
  display: flex;
}

.worried-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.worried-modal-content {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 700px;
  max-height: calc(100vh - 2rem);
  background: #fcb92c;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.worried-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #B57420;
  z-index: 2;
  font-weight: 700;
}

.worried-modal-close:hover {
  background: var(--white);
}

.worried-modal-image {
  width: 45%;
  flex-shrink: 0;
  background: #f5f5f5;
  overflow: hidden;
}

.worried-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.worried-modal-body {
  padding: 2.5rem 2.5rem 2rem;
  color: #1a1a1a;
  text-align: center;
  flex: 1;
  overflow-y: auto;
}

.worried-modal-body h2 {
  font-family: 'Boogaloo', cursive;
  color: var(--white);
  font-size: 2.4rem;
  margin: 0 0 1rem;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.worried-modal-body p {
  color: #1a1a1a;
  margin: 0 0 0.85rem;
  font-size: 1rem;
  line-height: 1.55;
}

.worried-modal-body .btn {
  background: var(--green);
  margin-top: 1rem;
}

.worried-modal-body .btn:hover {
  background: var(--green-dark);
}

body.modal-open {
  overflow: hidden;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  /* Disable the desktop "float into the divider band" lift on smaller screens —
     the chevron divider geometry is less prominent on mobile, so the negative
     margin would push content awkwardly into the previous section. */
  .divider-bottom .floating-cards,
  .divider-bottom .floating-feature {
    margin-top: 0;
  }

  .welcome-grid {
    grid-template-columns: 1fr;
  }

  .welcome-note-card {
    grid-template-columns: 1fr;
  }

  .welcome-note-image img {
    height: 300px;
  }

  .welcome-text {
    padding-top: 0;
    text-align: center;
  }

  .welcome-text h2 {
    font-size: 40px;
  }

  .accent-line {
    margin: 4px auto 12px;
  }

  .signature {
    text-align: center;
    font-size: 50px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-details-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-grid h2 {
    font-size: 34px;
  }

  .bordered-card {
    padding: 2rem 1.75rem;
  }

  .service-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .service-panel.reverse .service-panel-image { order: 1; }
  .service-panel.reverse .service-panel-body  { order: 2; }

  .service-panel-image {
    min-height: 220px;
  }

  .service-panel-body {
    padding: 1.75rem 1.75rem 2rem;
  }

  .service-panel-body h3 {
    font-size: 34px;
  }

  .accept-banner .dogs-headline {
    font-size: 38px;
  }

  .accept-icons {
    gap: 2rem;
  }

  .accept-icon {
    height: 36px;
  }

  .carousel {
    padding: 0 3rem;
  }

  .carousel-item {
    width: 200px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-mascot {
    display: none;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  /* Worried modal: stack image above content on tablet+ */
  .worried-modal-content {
    flex-direction: column;
    max-height: 90vh;
  }

  .worried-modal-image {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
  }

  .worried-modal-body {
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .worried-modal-body h2 {
    font-size: 2rem;
  }

  /* Privacy split hero stacks on smaller screens */
  .hero-split {
    flex-direction: column;
    text-align: center;
  }

  .hero-split .hero-split-image {
    width: 100%;
    max-width: none;
    height: 200px;
    min-height: auto;
  }

  .hero-split .hero-content {
    padding: 1.5rem 1.5rem 2rem;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 600px) {
  :root {
    --nav-height: 65px;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: center;
  }

  .salon-grid {
    grid-template-columns: 1fr;
  }

  .signoff-card {
    padding: 2rem;
    margin-top: -40px;
  }

  .services-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .bordered-card {
    padding: 1.75rem 1.25rem;
  }

  .news-article {
    padding: 1.75rem 1.5rem;
  }

  .news-article h2 {
    font-size: 30px;
  }

  .contact-grid h2 {
    font-size: 28px;
  }

  .policy-content h2,
  .policy-content h3 {
    font-size: 26px;
  }

  .pricing-card h3 {
    font-size: 28px;
  }

  .service-panel-body h3 {
    font-size: 28px;
  }

  .service-panel-body {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .service-panel-price {
    font-size: 1.1rem;
    padding: 5px 16px;
  }

  .accept-banner {
    padding: 2.5rem 1rem;
  }

  .accept-banner .dogs-headline {
    margin-bottom: 1.25rem;
  }

  .accept-icons {
    gap: 1.5rem;
  }

  .accept-icon {
    height: 32px;
  }

  .carousel {
    padding: 0 2.25rem;
  }

  .carousel-item {
    width: 170px;
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  }

  .lightbox-btn {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .lightbox-close { top: 1rem; right: 1rem; }
  .lightbox-counter { top: 1rem; left: 1rem; font-size: 12px; padding: 4px 10px; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .welcome-text h2 {
    font-size: 35px;
    line-height: 30px;
  }

  .signature {
    font-size: 40px;
  }

  .hero {
    min-height: 300px;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-page {
    min-height: 180px;
  }

  .section {
    padding: 2.5rem 0;
  }

  .container {
    padding: 0 1.25rem;
  }

  .dogs-banner {
    min-height: 200px;
  }

  .dogs-banner-content {
    padding: 1.5rem;
  }

  .dogs-headline {
    font-size: 30px;
    letter-spacing: 0;
  }

  .hours-block h3 {
    font-size: 35px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================================
   BLOG / NEWS — post hero, article prose, sign-off, posts index
   ---------------------------------------------------------------------
   Layered on top of the existing .hero-page / .bordered-card system.
   New post pages share .post-hero (image OR graphic fallback), then a
   constrained reading column with magazine-style typography (drop cap,
   pull quote, paw divider, callout, figure-with-caption) and a
   handwritten sign-off. Index page uses .posts-grid of .post-cards.
   ===================================================================== */

/* ----- Post hero (extends .hero-page) ----- */
.post-hero {
  /* Sits inside .hero.hero-page. We override the .hero-page max-height (400px)
     so the hero adopts the cover image's natural shape. Tuned to 2:1 to match
     Stencil's "Blog post feature" template (1200×600), which is what John
     exports from. Min/max heights keep the hero sane on phones and ultrawide. */
  text-align: left;
  aspect-ratio: 2 / 1;
  min-height: 340px;
  max-height: 600px;
}

.post-hero::before {
  /* Subtle top-and-bottom darkening — kept gentle so the image shows through.
     The kicker badge has its own white background; the title relies on text-shadow. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 65%,
    rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

.post-hero .hero-content {
  text-align: left;
  width: 100%;
  max-width: var(--max-width);
  padding: 2.5rem 2rem;
  margin: 0 auto;
  align-self: flex-end;
}

.post-hero .post-kicker {
  display: inline-block;
  font-family: 'Bad Script', cursive;
  font-size: 1.4rem;
  color: var(--white);
  background: var(--orange);
  padding: 0.15rem 1.1rem;
  border-radius: 999px;
  letter-spacing: 0.3px;
  margin-bottom: 0.85rem;
  text-shadow: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
  transform: rotate(-1.2deg);
}

.post-hero h1 {
  font-size: 4rem;
  letter-spacing: -0.5px;
  line-height: 1.05;
  max-width: 18ch;
  margin: 0;
}

/* When the hero uses a real cover image (i.e. NOT .post-hero-graphic), the
   title is already baked into the image at design time in Stencil. Keep the
   h1 in the DOM for screen readers, search engines and link previews, but
   hide it visually so it doesn't double up over the artwork. The graphic
   fallback variant keeps a visible h1 because it has no embedded title. */
.post-hero:not(.post-hero-graphic) h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.post-hero .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin-top: 1.1rem;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.post-hero .post-meta span + span::before {
  content: '·';
  margin-right: 1.2rem;
  opacity: 0.6;
}

/* No-image fallback variant — solid bottle-green panel with paw-print
   speckle pattern. Used when a post hasn't been given a hero photo yet,
   or when the topic is abstract (e.g. an email-migration post). */
.post-hero-graphic {
  background: var(--green);
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255, 78, 0, 0.18) 0, rgba(255, 78, 0, 0) 14%),
    radial-gradient(circle at 88% 78%, rgba(255, 78, 0, 0.16) 0, rgba(255, 78, 0, 0) 18%),
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 12%),
    radial-gradient(circle at 22% 82%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0) 12%);
  position: relative;
}

.post-hero-graphic::after {
  /* subtle decorative diagonal stripes — adds texture without screaming */
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -38deg,
    transparent 0,
    transparent 38px,
    rgba(255, 255, 255, 0.025) 38px,
    rgba(255, 255, 255, 0.025) 76px
  );
  pointer-events: none;
}

/* Both .post-hero variants now share the orange-on-white kicker styling
   defined in .post-hero .post-kicker above — kept as a single brand badge
   across photo and graphic heroes for consistency. */

/* ----- Article body ----- */
.article {
  max-width: 760px;
  margin: 0 auto;
}

.article-prose {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #3a3a3a;
  letter-spacing: -0.2px;
}

.article-prose > p,
.article-prose > ul,
.article-prose > ol,
.article-prose > blockquote,
.article-prose > figure,
.article-prose > .callout,
.article-prose > hr {
  margin-bottom: 1.4rem;
}

.article-prose h2 {
  font-size: 2rem;
  margin: 2.6rem 0 0.6rem;
  letter-spacing: -1px;
}

.article-prose h2 + .accent-line {
  margin-bottom: 1.4rem;
}

.article-prose h3 {
  font-size: 1.45rem;
  margin: 2rem 0 0.4rem;
  color: var(--green);
}

.article-prose ul,
.article-prose ol {
  padding-left: 1.4rem;
}

.article-prose li {
  margin-bottom: 0.4rem;
}

.article-prose strong {
  color: var(--dark);
  font-weight: 700;
}

.article-prose a {
  color: var(--green);
  font-weight: 500;
}

/* Drop cap on the article's lede paragraph (opt-in via .has-dropcap on
   the wrapping article-prose, so reposting copy doesn't accidentally get
   one mid-stream). Set in the green display face — large, slightly raised. */
.article-prose.has-dropcap > p:first-of-type::first-letter {
  font-family: 'Boogaloo', cursive;
  font-size: 5rem;
  line-height: 0.85;
  color: var(--green);
  float: left;
  padding: 0.45rem 0.7rem 0 0;
  margin: 0.1rem 0 0;
}

/* Pull-quote — handwritten orange Bad Script (the brand's "voice" font),
   centered and bracketed by oversized dark-green quotation marks. Overrides
   the generic site-wide `blockquote` rule (pale-green box used on /privacy/)
   so blog pull-quotes have no fill, no border, and no left bar. Kept
   visually distinct from .callout so the reading roles never blur:
   .callout = "here's what that jargon means", blockquote = "my thought". */
.article-prose blockquote {
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  padding: 0.6rem 3.2rem;
  margin: 2.8rem auto 3rem;
  max-width: 88%;
  text-align: center;
  font-family: 'Bad Script', cursive;
  font-style: normal;
  font-weight: normal;
  font-size: 1.7rem;
  line-height: 1.5;
  color: var(--orange);
  letter-spacing: 0.2px;
}

/* Oversized dark-green quotation marks anchored at the top-left and
   bottom-right corners so they appear to "hold" the orange script
   text between them, rather than stack above and below it. */
.article-prose blockquote::before,
.article-prose blockquote::after {
  position: absolute;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
  color: var(--green);
}

.article-prose blockquote::before {
  content: '\201C';
  top: -1.4rem;
  left: 0;
}

.article-prose blockquote::after {
  content: '\201D';
  bottom: -2.6rem;
  right: 0;
}

.article-prose blockquote p { margin-bottom: 0; }

.article-prose blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  font-style: normal;
  color: var(--grey);
  letter-spacing: 0.2px;
}

/* Paw-print divider — three orange dots between sections of a post. */
.article-prose hr.paw-divider {
  border: 0;
  height: auto;
  text-align: center;
  margin: 2.6rem 0;
  overflow: visible;
}

.article-prose hr.paw-divider::before {
  content: '\2022\00a0\00a0\2022\00a0\00a0\2022';
  color: var(--orange);
  font-size: 1.4rem;
  letter-spacing: 0.4em;
}

/* Figure with caption — bordered photo card matching the green-bordered
   floating treatment used on home/services pages. */
.article-prose figure {
  margin: 2rem 0;
  border: 5px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.32);
  background: var(--white);
}

.article-prose figure img {
  width: 100%;
  height: auto;
  display: block;
}

.article-prose figure figcaption {
  padding: 0.85rem 1.1rem 1rem;
  font-family: 'Bad Script', cursive;
  font-size: 1.2rem;
  color: var(--orange);
  text-align: center;
  background: var(--white);
  letter-spacing: 0.2px;
  line-height: 1.3;
}

/* Callout — for "what this means" / "in plain English" boxes. Light green
   wash, thinner border, no shadow so it's clearly secondary to figures. */
.article-prose .callout {
  background: var(--green-light);
  border-left: 4px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.4rem;
  margin: 1.8rem 0;
  font-size: 16.5px;
  line-height: 1.65;
}

.article-prose .callout strong:first-child {
  display: block;
  font-family: 'Boogaloo', cursive;
  color: var(--green);
  font-weight: normal;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  margin-bottom: 0.3rem;
}

.article-prose .callout p:last-child { margin-bottom: 0; }

/* ----- Post sign-off (handwritten signature, optional mascot peek) ----- */
.post-signoff {
  max-width: 760px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px dashed rgba(22, 80, 22, 0.3);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.post-signoff-text {
  flex: 1;
  font-size: 16.5px;
  color: var(--grey);
  line-height: 1.6;
}

.post-signoff-text .signature {
  display: block;
  font-family: 'Dr Sugiyama', cursive;
  font-size: 2.4rem;
  color: var(--orange);
  margin-top: 0.3rem;
  line-height: 1;
}

.post-signoff-mascot img {
  width: 90px;
  height: auto;
  opacity: 0.85;
}

/* ----- Next-and-previous post nav ----- */
.post-nav {
  max-width: 820px;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.post-nav a {
  display: block;
  padding: 1rem 1.25rem;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: var(--white);
  color: var(--grey);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.post-nav a::after { display: none; }

.post-nav a:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}

.post-nav a:hover .post-nav-direction { color: rgba(255, 255, 255, 0.85); }
.post-nav a:hover .post-nav-title { color: var(--white); }

.post-nav .post-nav-direction {
  display: block;
  font-family: 'Bad Script', cursive;
  color: var(--orange);
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
  transition: color 0.25s ease;
}

.post-nav .post-nav-title {
  font-family: 'Boogaloo', cursive;
  color: var(--green);
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  transition: color 0.25s ease;
}

.post-nav .post-nav-prev { text-align: left; }
.post-nav .post-nav-next { text-align: right; }
.post-nav a:only-child { grid-column: 1 / -1; }

/* ----- Posts index — card grid ----- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 3;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.32);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover,
.post-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 8px 14px 14px 0 rgba(0, 0, 0, 0.38);
}

/* Visible focus indicator for keyboard users tabbing through the index. */
.post-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.post-card-media {
  /* Aspect ratio matches Stencil's 1200×600 "Blog post feature" template
     (the same source image used for the post hero and the OG card). At
     2:1, object-fit: cover does no cropping on a correctly-sized image,
     so designs that go close to the edges (titles, watermarks) survive
     intact. */
  position: relative;
  aspect-ratio: 2 / 1;
  background: var(--green);
  overflow: hidden;
}

.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-media.is-graphic {
  /* mirror of post-hero-graphic for thumbnails on graphic posts */
  background: var(--green);
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255, 78, 0, 0.22) 0, rgba(255, 78, 0, 0) 18%),
    radial-gradient(circle at 84% 78%, rgba(255, 78, 0, 0.20) 0, rgba(255, 78, 0, 0) 22%);
}

.post-card-media.is-graphic::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -38deg,
    transparent 0,
    transparent 22px,
    rgba(255, 255, 255, 0.05) 22px,
    rgba(255, 255, 255, 0.05) 44px
  );
}

.post-card-media-label {
  /* Used inside is-graphic to display the post-kicker on the graphic */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Boogaloo', cursive;
  color: var(--white);
  font-size: 2.2rem;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 1rem;
  z-index: 1;
}

.post-card-body {
  padding: 1.4rem 1.6rem 1.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card-kicker {
  /* Baloo 2 — rounded friendly sans, more legible than the chunky display
     font at small sizes. Bottle green + short orange .accent-line below
     keeps the brand "heading" treatment intact now that the h2 is hidden. */
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--green);
  font-size: 1.15rem;
  letter-spacing: 0.3px;
  margin-bottom: 0.1rem;
}

/* Index card h2 holds the post title for SEO, screen readers and the link's
   accessible name (via aria-labelledby on the wrapping <a>). It's visually
   hidden because the cover image (Stencil) carries the title visually — same
   treatment as the post-hero h1, for consistency. */
.post-card h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.post-card .accent-line {
  margin: 0.4rem 0 0.85rem;
  width: 30%;
}

.post-card-lede {
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 1.1rem;
  flex: 1;
}

.post-card-readmore {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green);
  align-self: flex-start;
  position: relative;
  display: inline-block;
}

/* Animated orange underline mirroring the global body-link / nav pattern.
   Triggered by hovering or focusing anywhere on the parent .post-card. */
.post-card-readmore::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease;
}

.post-card:hover .post-card-readmore::after,
.post-card:focus-visible .post-card-readmore::after {
  left: 0;
  right: 0;
}

.post-card-readmore .arrow {
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.25s ease;
}

.post-card:hover .post-card-readmore .arrow,
.post-card:focus-visible .post-card-readmore .arrow {
  transform: translateX(4px);
}

/* The post-card itself is a link wrapping the whole card */
a.post-card { color: inherit; }
a.post-card::after { display: none; }

/* ====================================================================
   BEFORE / AFTER COMPARE SLIDER  (used in Groomer's Diary posts)
   Sits inside .article-prose, mimicking the green-bordered figure
   treatment so it reads as part of the post. The green frame is drawn
   on a ::after pseudo-element rather than a real border to avoid the
   sub-pixel sliver that appears when an animated mask sits inside a
   parent with `border` + `border-radius` + `overflow:hidden`.

   Per-post tuning — set as inline-style CSS vars on .compare-slider:
     --ratio       slider aspect ratio (default 4/3)
     --before-pos  object-position for the BEFORE image (default 50% 50%)
     --after-pos   object-position for the AFTER  image (default 50% 50%)
   JS that wires up drag/keyboard/auto-sweep lives in main.js.
   ==================================================================== */
.compare-slider {
  position: relative;
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.32);
  background: var(--white);
}

.compare-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 7px solid var(--green);
  border-radius: 12px;
  pointer-events: none;
  z-index: 5;
}

.compare-slider-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  user-select: none;
  background: var(--green-dark);
  --pos: 50%;
  cursor: ew-resize;
  touch-action: none;
}

.compare-slider-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.compare-slider-stage .before-img {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 var(--pos), transparent var(--pos), transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 var(--pos), transparent var(--pos), transparent 100%);
  z-index: 2;
  object-position: var(--before-pos, center center);
}

.compare-slider-stage .after-img {
  z-index: 1;
  object-position: var(--after-pos, center center);
}

.compare-slider-stage .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background: var(--white);
  z-index: 3;
  transform: translateX(-1.5px);
  box-shadow: 0 0 0 1px rgba(22, 80, 22, 0.2),
              0 8px 24px rgba(22, 80, 22, 0.35);
}

.compare-slider-stage .handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--white);
  z-index: 4;
  cursor: ew-resize;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 8px 22px rgba(214, 67, 0, 0.45),
              0 0 0 4px rgba(255, 78, 0, 0.18);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.18s;
}

.compare-slider-stage .handle::after { display: none; }

.compare-slider-stage .handle:hover,
.compare-slider-stage .handle:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 30px rgba(214, 67, 0, 0.55),
              0 0 0 6px rgba(255, 78, 0, 0.22);
}

.compare-slider-stage .handle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 6px;
}

.compare-slider-stage .handle svg {
  width: 28px;
  height: 28px;
  color: var(--white);
}

.compare-slider-stage .tag {
  position: absolute;
  top: 1.1rem;
  z-index: 5;
  display: inline-block;
  font-family: 'Bad Script', cursive;
  font-size: 1.3rem;
  color: var(--white);
  background: var(--orange);
  padding: 0.15rem 1rem 0.25rem;
  border-radius: 999px;
  letter-spacing: 0.3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  pointer-events: none;
  line-height: 1.2;
}
.compare-slider-stage .tag.before { left: 1.1rem; transform: rotate(-2deg); }
.compare-slider-stage .tag.after  { right: 1.1rem; transform: rotate(2deg); }

.compare-slider-caption {
  padding: 0.85rem 1.1rem 1rem;
  font-family: 'Bad Script', cursive;
  font-size: 1.2rem;
  color: var(--orange);
  text-align: center;
  background: var(--white);
  letter-spacing: 0.2px;
  line-height: 1.3;
}

/* ----- Blog responsive ----- */
@media (max-width: 900px) {
  .post-hero h1 { font-size: 2.8rem; }
  .post-hero .hero-content { padding: 2rem 1.5rem; }
  .posts-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .post-nav-next { text-align: left; }
  .article-prose blockquote { font-size: 1.35rem; margin-left: 0; }
  .article-prose.has-dropcap > p:first-of-type::first-letter { font-size: 4rem; }
}

@media (max-width: 600px) {
  .post-hero { min-height: 240px; }
  .post-hero h1 { font-size: 2.2rem; }
  .post-hero .post-kicker { font-size: 1.2rem; }
  .post-hero .post-meta { font-size: 0.85rem; gap: 0.4rem 0.9rem; }
  .post-hero .post-meta span + span::before { margin-right: 0.9rem; }
  .post-signoff { flex-direction: column; text-align: center; }
  .post-signoff-mascot img { width: 70px; }
  .article-prose { font-size: 17px; }
  .article-prose h2 { font-size: 1.65rem; }
  .post-card-media-label { font-size: 1.6rem; }
  .compare-slider::after { border-width: 5px; }
  .compare-slider-stage .handle { width: 52px; height: 52px; }
  .compare-slider-stage .handle svg { width: 22px; height: 22px; }
  .compare-slider-stage .tag { font-size: 1.05rem; padding: 0.1rem 0.8rem 0.2rem; }
  .compare-slider-caption { font-size: 1.05rem; }
}