/* ============================================================
   Puppy Playground — site styles
   ============================================================ */

/* ---- Self-hosted Quicksand (fontsource) ---- */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/quicksand-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/quicksand-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/quicksand-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/quicksand-700.woff2') format('woff2');
}

/* ---- Design tokens ---- */
:root {
  --ppg-accent: #F49223;         /* Brand accent orange */
  --ppg-accent-dark: #C8781D;
  --ppg-mint: #92C340;
  --ppg-charcoal: #1F2025;
  --ppg-muted: #6D6C6C;
  --ppg-border: #EDEBE7;
  --ppg-bg: #FFFBF7;
  --ppg-surface: #FFFFFF;
  --ppg-paw: rgba(244, 146, 35, 0.08);

  --ppg-radius: 18px;
  --ppg-radius-pill: 999px;
  --ppg-shadow: 0 8px 24px rgba(31, 32, 37, 0.06);

  --gc-hamburger-color: var(--ppg-charcoal);
  --gc-hamburger-color-active: var(--ppg-accent);
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ppg-charcoal);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  line-height: 1.6;
}
h1, h2, h3, h4, h5 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ppg-charcoal);
}
a { color: var(--ppg-accent); text-decoration: none; }
a:hover { color: var(--ppg-accent-dark); }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   ANIMATION SYSTEM — entrance keyframes.
   Strategy: pure CSS autoplay. The keyframe's "from" state holds
   while animation-delay elapses, then animates to the "to" state
   and locks there via animation-fill-mode: both.
   No JS race condition.
   ============================================================ */

/* Optional: legacy class kept for markup parity */
.mae-invisible { /* no-op now; the animation handles initial state */ }

/* Base animation runner */
.mae-anim {
  animation-duration: 0.9s;
  animation-fill-mode: both;          /* applies "from" pre-start, "to" post-end */
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Entrance animation keyframes */
@keyframes fadeInUpSmall    { from { opacity: 0; transform: translate3d(0, 50px, 0); }   to { opacity: 1; transform: none; } }
@keyframes fadeInDownSmall  { from { opacity: 0; transform: translate3d(0, -50px, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInLeftSmall  { from { opacity: 0; transform: translate3d(-50px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInRightSmall { from { opacity: 0; transform: translate3d(50px, 0, 0); }   to { opacity: 1; transform: none; } }
@keyframes zoomInSmall      { from { opacity: 0; transform: scale(0.8); }                to { opacity: 1; transform: none; } }
@keyframes slideInRight     { from { opacity: 0; transform: translate3d(100%, 0, 0); }   to { opacity: 1; transform: none; } }
@keyframes slideInLeft      { from { opacity: 0; transform: translate3d(-100%, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeIn           { from { opacity: 0; }                                       to { opacity: 1; } }

.mae-fadeInUpSmall    { animation-name: fadeInUpSmall; }
.mae-fadeInDownSmall  { animation-name: fadeInDownSmall; }
.mae-fadeInLeftSmall  { animation-name: fadeInLeftSmall; }
.mae-fadeInRightSmall { animation-name: fadeInRightSmall; }
.mae-zoomInSmall      { animation-name: zoomInSmall; }
.mae-slideInRight     { animation-name: slideInRight; }
.mae-slideInLeft      { animation-name: slideInLeft; }
.mae-fadeIn           { animation-name: fadeIn; }

/* Float decorations */
@keyframes floatX {
  0%   { transform: translateX(-30px); }
  50%  { transform: translateX(-10px); }
  100% { transform: translateX(-30px); }
}
@keyframes floatY {
  0%   { transform: translateY(-30px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(-30px); }
}
.floatX  { animation: floatX 5s infinite ease-in-out; }
.floatX1 { animation: floatX 4s infinite ease-in-out 0.3s; }
.floatY  { animation: floatY 5s infinite ease-in-out; }
.floatY1 { animation: floatY 4s infinite ease-in-out 0.3s; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mae-anim, .floatX, .floatY, .floatX1, .floatY1 {
    animation: none !important;
  }
  .mae-invisible { opacity: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ---- Top utility bar ---- */
.utility-bar {
  background: var(--ppg-charcoal);
  color: #fff;
  font-size: 0.85rem;
}
.utility-bar a { color: #fff; }
.utility-bar a:hover { color: var(--ppg-mint); }

/* ---- Site header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ppg-surface);
  border-bottom: 1px solid var(--ppg-border);
}
.site-header .nav-link {
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  color: var(--ppg-charcoal);
  position: relative;
}
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--ppg-accent); }
.site-header .nav-link.active::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -2px;
  height: 3px; background: var(--ppg-accent); border-radius: 2px;
}

/* Logo: stacked icon + wordmark, centered. Used in both
   header.html and header-float.html. Same layout at all viewport sizes.
   The Wanzor theme caps .master-logo at 84px wide — override that. */
.master-logo {
  max-width: none !important;
  /* The full wordmark renders ~216px but the header logo column is only
     ~11% (~130px), so the logo overflows ~100px to the right — under the
     nav's .wanzor-menu-wrap, which was intercepting clicks on the right
     half of the wordmark (its links are right-aligned, so that overlap
     region looks empty but still captured pointer events). Lift the logo
     above the nav so its full width is the click target; the overlap is
     empty nav space, so no visible nav link is covered. */
  position: relative;
  z-index: 5;
}
.master-logo a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
/* Both imgs need max-width:none — the base img rule has max-width:100%
   which lets the parent column squeeze the wordmark down on narrow viewports. */
.master-logo img {
  max-width: none;
}
.master-logo .logo-icon {
  height: 54px;
  width: auto;
}
.master-logo .logo-wordmark {
  height: 20px;
  width: auto;
  display: block;
}

/* Mobile/tablet only: the header height is set by the hamburger's 80px
   line-height, which only gives ~3px of room below our logo block. Add
   bottom padding to the wordmark so the divider isn't touching the text. */
@media (max-width: 1024px) {
  .master-logo .logo-wordmark {
    padding-bottom: 8px;
  }
}

/* Logo inside the hamburger slide-out panel is hidden — per request, the
   panel shows just the menu links (no icon + wordmark). Markup is left in
   place in the header partials; remove this rule to bring it back. */
.menu-logo {
  display: none;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--ppg-radius-pill);
  font-weight: 700; font-size: 1rem;
  transition: transform 120ms ease, background 120ms ease;
  min-height: 44px;
}
.btn-primary {
  background: var(--ppg-accent); color: #fff;
}
.btn-primary:hover { background: var(--ppg-accent-dark); color: #fff; transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: var(--ppg-charcoal);
  border: 2px solid var(--ppg-charcoal);
}
.btn-outline:hover { background: var(--ppg-charcoal); color: #fff; }
.btn-arrow::after {
  content: "→"; font-weight: 600; transition: transform 180ms ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   HERO — paw pattern bg + 100x100 morph + 4 photos
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 6rem;
  /* Paw-print pattern background */
  background-image: url('../media/bg-pattern.jpg');
  background-repeat: repeat;
  background-position: left top;
  background-size: 600px auto;  /* tiles ~3-4 times across viewport */
}

/* Right-column wrapper holds the morphing SVG and decorations */
.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* matches the 100x100 viewBox */
  max-width: 560px;
  margin-left: auto;
}

/* Morphing-blob SVG container */
.master-image-morphing { position: relative; display: block; }
.master-image-morphing image { width: 100%; }
.master-image-morphing clipPath:not(:first-child) { visibility: hidden; }
.master-image-morphing svg image { width: 100%; height: auto; }

/* Floating decorative blobs around the hero photo */
.hero-decor {
  position: absolute;
  pointer-events: none;
}
.hero-decor img { width: 100%; height: auto; }

.hero-decor--blob-teal   { width: 200px; top: -40px;    right: -10px;  z-index: 3; }
.hero-decor--blob-orange { width: 140px; top: 30%;      left: -60px;   z-index: 0; }
.hero-decor--blob-cream  { width: 320px; bottom: -100px; right: -100px; z-index: 0; }

/* ---- Sections ---- */
.section {
  padding: 5rem 0;
}
.section-eyebrow {
  display: inline-block;
  color: var(--ppg-accent);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.section h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
}
.section p.lead {
  color: var(--ppg-muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* ---- Service card ---- */
.service-card {
  background: var(--ppg-surface);
  border-radius: var(--ppg-radius);
  overflow: hidden;
  box-shadow: var(--ppg-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
  display: flex; flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(31,32,37,0.10);
}
.service-card__media {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
}
.service-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.service-card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.service-card__price {
  font-size: 0.9rem; font-weight: 700;
  color: var(--ppg-accent);
  margin-bottom: 0.75rem;
}
.service-card__desc { color: var(--ppg-muted); font-size: 0.95rem; flex: 1; margin-bottom: 1rem; }
.service-card__link {
  font-weight: 700; color: var(--ppg-charcoal);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.service-card__link::after { content: "→"; transition: transform 180ms ease; }
.service-card__link:hover::after { transform: translateX(3px); }

/* ---- Promise strip ---- */
.promise-strip {
  background: var(--ppg-charcoal);
  color: #fff;
  border-radius: var(--ppg-radius);
  padding: 2.5rem;
}
.promise-strip h2 { color: #fff; }
.promise-strip p { color: #D7D6D2; }

/* ---- Stat tile ---- */
.stat-tile { text-align: center; }
.stat-tile__value {
  font-size: 2.75rem; font-weight: 700;
  color: var(--ppg-accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.stat-tile__label { color: var(--ppg-muted); font-size: 0.95rem; }

/* ---- Pricing card ---- */
.pricing-card {
  background: var(--ppg-surface);
  border-radius: var(--ppg-radius);
  padding: 2rem;
  box-shadow: var(--ppg-shadow);
  position: relative;
  border: 2px solid transparent;
  transition: border-color 180ms ease;
}
.pricing-card--featured { border-color: var(--ppg-accent); }
.pricing-card--featured::before {
  content: "Most popular";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ppg-accent); color: #fff;
  padding: 0.3rem 1rem; border-radius: var(--ppg-radius-pill);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em;
}
.pricing-card__price {
  font-size: 2.5rem; font-weight: 700; color: var(--ppg-charcoal);
  line-height: 1;
}
.pricing-card__per { color: var(--ppg-muted); font-size: 1rem; }

/* ---- Area pills ---- */
.area-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--ppg-surface);
  border: 1px solid var(--ppg-border);
  border-radius: var(--ppg-radius-pill);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  color: var(--ppg-charcoal);
}
.area-pill::before { content: "📍"; font-size: 0.9rem; }
.area-pill:hover { border-color: var(--ppg-accent); color: var(--ppg-accent); }

/* ---- Footer ---- */
.site-footer {
  background: var(--ppg-charcoal);
  color: #D7D6D2;
  padding: 4rem 0 1.5rem;
  font-size: 0.95rem;
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { color: #D7D6D2; }
.site-footer a:hover { color: var(--ppg-mint); }
.site-footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 3rem; padding-top: 1.5rem;
  color: #8F8E8B; font-size: 0.85rem;
}

/* Page-load fade-in. CSS-only replacement for animsition's JS-driven page
   fade — same visual effect, no jQuery dependency. The whole #page wrapper
   fades in over 500ms on load (header, hero, content), and per-element
   Elementor animations run on top as their elements scroll into view.
   Duration matches Wanzor's main.js animsition init (inDuration: 500). */
#page.animsition {
  animation: pageFadeIn 0.5s ease-out 0.1s both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* If animsition.js ever does activate, suppress its loading overlay so we
   don't see a momentary spinner on top of our own fade-in. */
.animsition-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (prefers-reduced-motion: reduce) {
  #page.animsition {
    animation: none;
  }
}

/* Mobile hamburger menu — CSS-driven slide.
   Replaces Wanzor's jQuery $.animate on `right`. Same 300ms timing,
   matching easeInOutExpo curve via cubic-bezier, but runs on the GPU
   compositor instead of the JS main thread — feels much snappier and
   stays smooth even if other scripts are busy. The companion JS
   (in the inline <script> at end of body) toggles `.ppg-is-open`. */
.wanzor-menu-panel .menu-panel-wrap {
  transition: right 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
.wanzor-menu-panel .menu-panel-wrap.ppg-is-open {
  right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wanzor-menu-panel .menu-panel-wrap {
    transition: none;
  }
}

.elementor-165 .elementor-element.elementor-element-94c0000{--spacer-size:120px;}
.elementor-element.elementor-element-612a158 .elementor-repeater-item-b7ade87{font-size:110px;color:var( --e-global-color-wanzor_accent_2 );}
.elementor-element.elementor-element-612a158 > .elementor-widget-container:hover{--e-transform-translateY:-10px;}
.elementor-element.elementor-element-612a158 > .elementor-widget-container{background-image:url("/wp-content/uploads/2022/05/bg-price.jpg");background-position:top center;background-repeat:no-repeat;background-size:auto;}
.elementor-element.elementor-element-612a158 .master-price-box .heading-wrap{text-align:right;background-color:#FAF6F1;padding:135px 58px 0px 58px;}
.elementor-element.elementor-element-612a158 .master-price-box .content-wrap{text-align:left;padding:22px 58px 50px 58px;}
.elementor-element.elementor-element-612a158 .master-price-box{background-color:#FAF6F1;}
.elementor-element.elementor-element-612a158 .master-price-box .extra-text{color:var( --e-global-color-wanzor_accent_2 );font-size:14px;font-weight:400;line-height:14px;letter-spacing:3px;}
.elementor-element.elementor-element-612a158:hover .master-price-box .heading-wrap{background-color:#02010100;}
.elementor-element.elementor-element-612a158:hover .master-price-box{background-color:#02010100;}
.elementor-element.elementor-element-612a158:hover .master-price-box .master-button,
.elementor-element.elementor-element-5a62662:hover .master-price-box .master-button,
.elementor-165 .elementor-element.elementor-element-5cdb82e:hover .master-price-box .master-button{background-color:var( --e-global-color-wanzor_accent );}
.elementor-element.elementor-element-612a158 .master-price-box .master-button .bg-hover{background-color:var( --e-global-color-wanzor_primary );}
.elementor-element.elementor-element-612a158 .master-price-box .price{font-family:"Quicksand", Sans-serif;letter-spacing:-1px;}
.elementor-element.elementor-element-612a158 .master-price-box .plan{font-family:"DM Sans", Sans-serif;font-weight:400;letter-spacing:0px;}
.elementor-element.elementor-element-5a62662 .elementor-repeater-item-b7ade87{font-size:110px;color:var( --e-global-color-wanzor_accent_2 );}
.elementor-element.elementor-element-5a62662 > .elementor-widget-container:hover{--e-transform-translateY:-10px;}
.elementor-element.elementor-element-5a62662 > .elementor-widget-container{background-image:url("/wp-content/uploads/2022/05/bg-price.jpg");background-position:top center;background-repeat:no-repeat;background-size:auto;}
.elementor-element.elementor-element-5a62662 .master-price-box .heading-wrap{text-align:right;background-color:#FAF6F1;padding:135px 58px 0px 58px;}
.elementor-element.elementor-element-5a62662 .master-price-box .content-wrap{text-align:left;padding:22px 58px 50px 58px;}
.elementor-element.elementor-element-5a62662 .master-price-box{background-color:#FAF6F1;}
.elementor-element.elementor-element-5a62662 .master-price-box .extra-text{color:var( --e-global-color-wanzor_accent_2 );font-size:14px;font-weight:400;line-height:14px;letter-spacing:3px;}
.elementor-element.elementor-element-5a62662:hover .master-price-box .heading-wrap{background-color:#02010100;}
.elementor-element.elementor-element-5a62662:hover .master-price-box{background-color:#02010100;}
.elementor-element.elementor-element-5a62662 .master-price-box .price{font-family:"Quicksand", Sans-serif;letter-spacing:-1px;}
.elementor-element.elementor-element-5a62662 .master-price-box .plan{font-family:"DM Sans", Sans-serif;font-weight:400;letter-spacing:0px;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .elementor-repeater-item-b7ade87{font-size:110px;color:var( --e-global-color-wanzor_accent_2 );}
.elementor-165 .elementor-element.elementor-element-5cdb82e > .elementor-widget-container:hover{--e-transform-translateY:-10px;}
.elementor-165 .elementor-element.elementor-element-5cdb82e > .elementor-widget-container{background-image:url("/wp-content/uploads/2022/05/bg-price.jpg");background-position:top center;background-repeat:no-repeat;background-size:auto;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .master-price-box .heading-wrap{text-align:right;background-color:#FAF6F1;padding:135px 58px 0px 58px;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .master-price-box .content-wrap{text-align:left;padding:22px 58px 50px 58px;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .master-price-box{background-color:#FAF6F1;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .master-price-box .extra-text{color:var( --e-global-color-wanzor_accent_2 );font-size:14px;font-weight:400;line-height:14px;letter-spacing:3px;}
.elementor-165 .elementor-element.elementor-element-5cdb82e:hover .master-price-box .heading-wrap{background-color:#02010100;}
.elementor-165 .elementor-element.elementor-element-5cdb82e:hover .master-price-box{background-color:#02010100;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .master-price-box .price{font-family:"Quicksand", Sans-serif;letter-spacing:-1px;}
.elementor-165 .elementor-element.elementor-element-5cdb82e .master-price-box .plan{font-family:"DM Sans", Sans-serif;font-weight:400;letter-spacing:0px;}
.elementor-165 .elementor-element.elementor-element-945a0a6{--spacer-size:120px;}
.elementor-165 .elementor-element.elementor-element-ab931b2{width:100%;}
.elementor-165 .elementor-element.elementor-element-65c0423{width:100%;}
.elementor-165 .elementor-element.elementor-element-2a73efc{width:100%;}
.elementor-165 .elementor-element.elementor-element-94c0000{--spacer-size:100px;}
.elementor-165 .elementor-element.elementor-element-ab931b2 > .elementor-element-populated{margin:0px 0px 30px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}
.elementor-165 .elementor-element.elementor-element-65c0423 > .elementor-element-populated{margin:0px 0px 30px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}
.elementor-165 .elementor-element.elementor-element-945a0a6{--spacer-size:100px;}
.elementor-165 .elementor-element.elementor-element-94c0000{--spacer-size:80px;}
.elementor-165 .elementor-element.elementor-element-945a0a6{--spacer-size:80px;}


/* Pricing card decorative repeater positioning (lifted from Home-03 / post-2491.css globals) */
.elementor-repeater-item-b7ade87.master-decor{left:70px;top:63px;visibility:visible;z-index:1;text-align:left;}
.elementor-repeater-item-b41293f.master-decor{left:50px;top:50px;visibility:visible;z-index:1;text-align:left;}

/* Homepage pricing row — pin each remaining price box (Playcare, Staycare)
   to 35% width and center them in the row.
   The flex-basis/grow/shrink lock is defensive — without it, removing the
   3rd column lets flexbox stretch the remaining two to ~50% each (despite
   .elementor-col-33's width:33.333% default, because flex children can
   grow when explicit width is set without flex-basis). */
@media (min-width: 768px) {
  .elementor-165 #pricing .elementor-element-d7f4ed5 > .elementor-container {
    justify-content: center;
  }
  .elementor-165 #pricing .elementor-element-d7f4ed5 > .elementor-container > .elementor-column {
    flex: 0 0 35% !important;
    width: 35% !important;
    max-width: 35% !important;
  }
}

/* Pricing card icon — shrink so $125 doesn't collide with it (default 110px, revert price to 72px) */
.elementor-element-612a158 .elementor-repeater-item-b7ade87,
.elementor-element-5a62662 .elementor-repeater-item-b7ade87,
.elementor-165 .elementor-element-5cdb82e .elementor-repeater-item-b7ade87 { font-size: 90px !important; }

/* Team heading: restore H2→sub-heading spacing and lift hero's sub-heading typography */
.elementor-165 .elementor-element-6d0cf52 .master-heading .main-heading { margin-bottom: 24px !important; }
.elementor-165 .elementor-element-6d0cf52 .master-heading .sub-heading { font-size: 18px; line-height: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* Team "Read more" button — soft beige default, orange-on-hover (matches Home-04 carousel active state) */

/* Service card thumbs — force uniform circle size regardless of source aspect ratio.
   Applies to any page using the image-box-style-2 widget (currently homepage + /services/). */
.image-box-style-2 .master-image-box .thumb { height: 240px; }
.image-box-style-2 .master-image-box .thumb .inner { width: 100%; height: 100%; }
.image-box-style-2 .master-image-box .thumb .inner img { width: 100%; height: 100%; object-fit: cover; }

/* Services page row — same CSS-grid pattern as the homepage's services
   section: auto-fit + minmax so cards reflow smoothly across breakpoints,
   plus a width:100% override on the columns so they fill their grid track
   (otherwise .elementor-col-25's width:25% rule clamps each card). */
.elementor-3341 .ppg-services-row1 > .elementor-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.elementor-3341 .ppg-services-row1 > .elementor-container > .elementor-column {
  width: 100%;
  max-width: 100%;
}

/* Services page: top & bottom breathing room around the cards section,
   matching the Wanzor services page's spacer widgets
   (120/100 desktop → 100/80 tablet → 80/60 mobile). */
.elementor-3341 .ppg-services-section {
  padding-top: 120px;
  padding-bottom: 100px;
}
@media (max-width: 1024px) {
  .elementor-3341 .ppg-services-section {
    padding-top: 100px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .elementor-3341 .ppg-services-section {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}


/* ============================================================
   CONTACT INFO + MAP
   (post-1597.css), prefix swapped from .elementor-1597 → .elementor-165
   ============================================================ */
.elementor-165 .elementor-element.elementor-element-6493897{z-index:3;}
.elementor-165 .elementor-element.elementor-element-d7803b0{--spacer-size:100px;}
.elementor-165 .elementor-element.elementor-element-dd4b6e7{--divider-border-style:solid;--divider-color:#ECE7E2;--divider-border-width:1px;}
.elementor-165 .elementor-element.elementor-element-dd4b6e7 .elementor-divider-separator{width:100%;}
.elementor-165 .elementor-element.elementor-element-dd4b6e7 .elementor-divider{padding-block-start:0px;padding-block-end:0px;}
.elementor-165 .elementor-element.elementor-element-dd4b6e7 .elementor-divider__text{color:var( --e-global-color-wanzor_primary );font-family:"Quicksand", Sans-serif;font-size:20px;font-weight:700;line-height:34px;}
.elementor-165 .elementor-element.elementor-element-3e522c5{--spacer-size:85px;}
.elementor-165 .elementor-element.elementor-element-186257a{--spacer-size:100px;}
.elementor-165 .elementor-element.elementor-element-2c3199f{margin-top:0px;margin-bottom:-435px;z-index:1;}
.elementor-165 .elementor-element.elementor-element-cce94df{--spacer-size:100px;}
.elementor-165 .elementor-element.elementor-element-15c9e12:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-165 .elementor-element.elementor-element-15c9e12 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("/wp-content/uploads/2022/05/bg-form.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}
.elementor-165 .elementor-element.elementor-element-15c9e12 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#ECE7E2;box-shadow:0px 2px 38px 2px rgba(0, 0, 0, 0.06);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 15px 0px 0px;--e-column-margin-right:15px;--e-column-margin-left:0px;padding:76px 80px 80px 80px;}
.elementor-165 .elementor-element.elementor-element-15c9e12 > .elementor-element-populated, .elementor-165 .elementor-element.elementor-element-15c9e12 > .elementor-element-populated > .elementor-background-overlay, .elementor-165 .elementor-element.elementor-element-15c9e12 > .elementor-background-slideshow{border-radius:30px 30px 30px 30px;}
.elementor-165 .elementor-element.elementor-element-15c9e12 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}
.elementor-165 .elementor-element.elementor-element-63ee86a{right:15px;}
.elementor-165 .elementor-element.elementor-element-63ee86a{left:15px;}
.elementor-165 .elementor-element.elementor-element-63ee86a{bottom:0px;z-index:0;text-align:end;}
.elementor-165 .elementor-element.elementor-element-4707dd7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 27px) 0px;}
.elementor-165 .elementor-element.elementor-element-4707dd7 .elementor-heading-title{font-size:36px;}
.elementor-165 .elementor-element.elementor-element-e25bd3d > .elementor-widget-container{margin:0px 0px 18px 0px;}
.elementor-165 .elementor-element.elementor-element-e25bd3d .icon-wrap i{font-size:18px;width:18px;height:18px;line-height:18px;transform:translateY(-16px);}
.elementor-165 .elementor-element.elementor-element-e25bd3d .icon-wrap svg{width:18px;}
.elementor-165 .elementor-element.elementor-element-e25bd3d .icon-wrap{margin-right:18px;}
.elementor-165 .elementor-element.elementor-element-e25bd3d .master-icon-text .content-wrap{color:#727272;font-size:18px;font-weight:400;line-height:30px;}
.elementor-165 .elementor-element.elementor-element-5a1a4b6 > .elementor-widget-container{margin:0px 0px 18px 0px;}
.elementor-165 .elementor-element.elementor-element-5a1a4b6 .icon-wrap i{font-size:18px;width:18px;height:18px;line-height:18px;}
.elementor-165 .elementor-element.elementor-element-5a1a4b6 .icon-wrap svg{width:18px;}
.elementor-165 .elementor-element.elementor-element-5a1a4b6 .icon-wrap{margin-right:18px;}
.elementor-165 .elementor-element.elementor-element-5a1a4b6 .master-icon-text .content-wrap{color:#727272;font-size:18px;font-weight:400;line-height:30px;}
.elementor-165 .elementor-element.elementor-element-fb320f3 > .elementor-widget-container{margin:0px 0px 18px 0px;}
.elementor-165 .elementor-element.elementor-element-fb320f3 .icon-wrap i{font-size:18px;width:18px;height:18px;line-height:18px;}
.elementor-165 .elementor-element.elementor-element-fb320f3 .icon-wrap svg{width:18px;}
.elementor-165 .elementor-element.elementor-element-fb320f3 .icon-wrap{margin-right:18px;}
.elementor-165 .elementor-element.elementor-element-fb320f3 .master-icon-text .content-wrap{color:#727272;font-size:18px;font-weight:400;line-height:30px;}
.elementor-165 .elementor-element.elementor-element-d9b9935 > .elementor-widget-container{margin:0px 0px 32px 0px;}
.elementor-165 .elementor-element.elementor-element-d9b9935 .icon-wrap i{font-size:18px;width:18px;height:18px;line-height:18px;}
.elementor-165 .elementor-element.elementor-element-d9b9935 .icon-wrap svg{width:18px;}
.elementor-165 .elementor-element.elementor-element-d9b9935 .icon-wrap{margin-right:18px;}
.elementor-165 .elementor-element.elementor-element-d9b9935 .master-icon-text .content-wrap{color:#727272;font-size:18px;font-weight:400;line-height:30px;}
.elementor-165 .elementor-element.elementor-element-446391d a{font-size:14px;width:40px;height:40px;line-height:40px;border-radius:50%;margin-left:calc(10px / 2);margin-right:calc(10px / 2);color:var( --e-global-color-wanzor_primary );}
.elementor-165 .elementor-element.elementor-element-446391d a:hover{color:#FFFFFF;background-color:var( --e-global-color-wanzor_accent );}
.elementor-165 .elementor-element.elementor-element-880906d{z-index:2;}
.elementor-165 .elementor-element.elementor-element-aa7a168 iframe{height:584px;}
.elementor-165 .elementor-element.elementor-element-f7afbb5{width:60.83%;}
.elementor-165 .elementor-element.elementor-element-15c9e12{width:39.17%;}
.elementor-165 .elementor-element.elementor-element-186257a{--spacer-size:100px;}
.elementor-165 .elementor-element.elementor-element-d7803b0{--spacer-size:60px;}
.elementor-165 .elementor-element.elementor-element-3e522c5{--spacer-size:60px;}
.elementor-165 .elementor-element.elementor-element-186257a{--spacer-size:60px;}


/* Static-mode stretch for map section (the elementor-section-stretched
   normally relies on Elementor JS to apply inline styles; without that JS,
   stretch must be done via CSS) */
.elementor-165 .elementor-section.elementor-element-880906d {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
}
/* Kill #main-content bottom padding so map iframe sits flush against the footer (homepage only) */
.elementor-165 .elementor-element-880906d ~ * { display: revert; }
.elementor-page-165 #main-content { padding-bottom: 0 !important; }

/* pets-03 image: parent has text-align:end which only works on inline-level children.
   Override our base "img { display: block }" rule for this specific image. */
.elementor-165 .elementor-element-63ee86a img { display: inline-block; }

/* Map section: ensure no gap between bottom of map and the footer (homepage only) */
.elementor-165 .elementor-element-880906d { margin-bottom: 0 !important; }
.elementor-page-165 #main-content { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.elementor-page-165 .wanzor-container { padding-bottom: 0 !important; }

/* Contact card pets graphic — sized to fit, inset from card border */
.elementor-165 .elementor-element-63ee86a,
.elementor-3408 .elementor-element-0587418 {
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
}
.elementor-165 .elementor-element-63ee86a img,
.elementor-3408 .elementor-element-0587418 img {
  display: inline-block;
  max-width: 160px;
  width: auto;
  height: auto;
}

/* Contact card font family: DM Sans for body text, Quicksand for heading
   Our base body style forces Quicksand which overrides the kit; scope the kit values back here. */
.elementor-165 .elementor-element-15c9e12 .master-icon-text .content-wrap {
  font-family: "DM Sans", sans-serif;
}
.elementor-165 .elementor-element-4707dd7 .elementor-heading-title {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
}

/* Email row removed but keep card the same size as Home-02 (4-row version).
   Reserve ~62px of extra padding-bottom (= the email row's natural height: 30px line + 32px margin)
   so card stays Home-02 height and the lifted -435px overlap behaves the same. */
.elementor-165 .elementor-element-15c9e12 > .elementor-element-populated {
  padding-bottom: 142px !important;
}


/* Gallery carousel: force uniform thumb aspect ratio (370:470 declared
   img dimensions) so different source photo aspects don't make the strip ragged.
   object-fit:cover crops, which keeps each image filling the tile. */
.elementor-165 .master-gallery .thumb {
  aspect-ratio: 370 / 470;
}
.elementor-165 .master-gallery .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery: remove the orange hover overlay; keep a subtle zoom on hover.
   GLightbox handles the click-to-open behavior via the .glightbox anchor. */
.elementor-165 .master-gallery .thumb::before {
  display: none !important;
}
.elementor-165 .master-gallery .thumb img {
  transition: transform 0.5s ease;
  display: block;
}
.elementor-165 .master-gallery:hover .thumb img {
  transform: scale(1.05);
}
.elementor-165 .master-gallery .thumb a {
  display: block;
  cursor: zoom-in;
}

/* Flickity drives the gallery layout (data-config: 5/4/2 columns,
   30px gap, autoplay). Don't add flex/grid here — would conflict with
   Flickity's absolute positioning. Just make sure thumb anchors fill. */
.elementor-165 .master-galleries .master-gallery .thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Elementor entrance reveals: bind the bare class names Elementor's JS adds
   at runtime (.animated, .fadeInLeft, .fadeInUpSmall, etc.) to keyframes.
   mae-widgets.css has fadeInUpSmall/fadeInLeftSmall keyframes but
   doesn't define a base .animated rule with animation-duration, so nothing
   played. Add the missing pieces here. */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fadeIn           { animation-name: fadeIn; }
.fadeInUpSmall    { animation-name: fadeInUpSmall; }
.fadeInDownSmall  { animation-name: fadeInDownSmall; }
.fadeInLeftSmall  { animation-name: fadeInLeftSmall; }
.fadeInRightSmall { animation-name: fadeInRightSmall; }
.fadeInLeft       { animation-name: fadeInLeft; }
.fadeInRight      { animation-name: fadeInRight; }
.fadeInUp         { animation-name: fadeInUp; }
.fadeInDown       { animation-name: fadeInDown; }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0, 100%, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }

/* /dog-training/ service-class blocks (image + copy + "Learn more"): add a
   gap between consecutive blocks so the CTA button doesn't crowd the next
   block's heading. Adjacent-sibling so the first block keeps its spacing to
   the intro above, and any future duplicates inherit the gap automatically. */
.ppg-class-block + .ppg-class-block { margin-top: 4rem; }

/* Footer "Links" list: Elementor styles each link via a per-element id rule
   (.elementor-element-XXXX) that sets size/weight/line-height/color, so a
   hand-added link (e.g. Service Areas) inherits a mismatched font and no base
   color. Mirror all four properties so every footer link matches exactly. */
.elementor-2373 .elementor-widget-mae-link .master-link {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #999999;
}
.elementor-2373 .elementor-widget-mae-link .master-link:hover { color: #ffffff; }

/* Township hero: a real <img> (with alt) as the background layer instead of a
   CSS background-image, so the landmark photo is exposed to screen readers and
   search. Dark overlay + centered content match the original featured-title band. */
#featured-title.ppg-area-hero { position: relative; overflow: hidden; }
#featured-title.ppg-area-hero .ppg-area-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; }
/* display:block + explicit size override the theme's `.clearfix:after { display:table }`,
   which would otherwise collapse this absolutely-positioned, empty ::after to zero size. */
#featured-title.ppg-area-hero::after { content: ""; display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; pointer-events: none; }
/* Brighter landmark heroes (e.g. Justin's white water tower) need a heavier overlay for legible white text. */
#featured-title.ppg-hero-dark::after { background: rgba(0,0,0,0.65); }
#featured-title.ppg-area-hero > .wanzor-container { position: relative; z-index: 2; }

/* Smooth scroll on hash-anchor clicks; scroll-margin offsets the sticky
   header so the section's top edge isn't covered when jumping to it. */
html { scroll-behavior: smooth; }
#services, #about, #pricing, #contact, #team { scroll-margin-top: 100px; }


/* Logo: only show the full wordmark on full desktop (≥1280px). The base
   .elementor-hidden-tablet class only hides up to 1024px, which leaves the
   wordmark visible on iPad Pro and other 1100–1280px tablets where it's
   too large for the available space. */
@media (max-width: 1279px) {
  .wanzor-header img[src$="/logo-wordmark.png"] { display: none !important; }
  .wanzor-header img[src$="/logo.png"] { display: inline-block !important; }
}


/* Hero photo on tablet: only zero out the negative LEFT margin so the photo
   stops sliding into the text column. Keep the negative right margin so the
   image keeps its size and rightward bleed. */
@media (max-width: 1279px) {
  .elementor-165 .elementor-element-3d9f37f > .elementor-widget-container {
    margin-left: 0 !important;
  }
}

/* Services section: CSS grid auto-fit so 3 or 4 cards rebalance cleanly
   (Grooming can be hidden via the .ppg-grooming-col toggle below). */
.elementor-165 .elementor-element.elementor-element-3cff4b9 > .elementor-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.elementor-165 .elementor-element.elementor-element-3cff4b9 > .elementor-container > .elementor-column {
  width: 100%;
  max-width: 100%;
}

/* Hover/style parity for any service card without a post-165 data-id rule
   (matches the existing rules for .elementor-element-f3d7672 et al.) */
.ppg-service-card > .elementor-widget-container:hover { --e-transform-translateY: -10px; }
.ppg-service-card:hover .master-icon {
  color: #FFFFFF;
  background-color: var(--e-global-color-wanzor_accent);
}
.ppg-service-card .master-button { background-color: var(--e-global-color-wanzor_accent); }
.image-box-style-2 .master-image-box:after { background-color: var(--e-global-color-wanzor_accent); }

/* Price-card label (PLAYCARE / STAYCARE / etc.) — dark green on ALL price boxes,
   incl. template-scaffolded pages that have no per-element ID. */
.master-price-box .extra-text { color: var(--e-global-color-wanzor_accent_2); }
.ppg-service-card .master-image-box .master-button:hover .bg-hover {
  background-color: var(--e-global-color-wanzor_primary);
}

/* One-line groomer toggle: uncomment to hide the Grooming card.
   Or set the [hidden] attribute on the .ppg-grooming-col element directly. */
/* .ppg-grooming-col { display: none !important; } */

/* ---------------------------------------------------------------------------
   Contact form (Netlify Forms) — ~770px max-width, pill inputs,
   2-col rows that stack on mobile, centered submit, fine-print disclosure.
   --------------------------------------------------------------------------- */
.ppg-contact-form {
  max-width: 770px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 2-col row — stacks to single column under 768px */
.ppg-contact-form .ppg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;  /* horizontal gap between columns */
}
@media (max-width: 768px) {
  .ppg-contact-form .ppg-form-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Inputs + textarea — softly rounded (~10px,
   rounded but not full-pill) */
.ppg-contact-form input,
.ppg-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 17px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #faf6f1;
  font-family: inherit;
  font-size: 17px;
  line-height: 24px;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.ppg-contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.ppg-contact-form input::placeholder,
.ppg-contact-form textarea::placeholder {
  /* Body-text token (#787878) — neutral gray, matches the
     placeholder color used elsewhere on the theme. Sized to match the
     getting-started form (18px / weight 500). */
  color: var(--e-global-color-wanzor_text, #787878);
  opacity: 1;
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
}

/* `background-size: auto` so the pattern renders at its natural
   1920x669 dimensions anchored top-center. */
.elementor-165 .elementor-element.elementor-element-cc3296b,
.elementor-3408 .elementor-element.elementor-element-cc3296b {
  background-size: auto !important;
}

/* Contact-info card image (0587418 on contact-us, 63ee86a on homepage):
   Both have identical positioning rules in their respective post-XXX.css —
   bottom-right anchored. No override needed; dog2.png sits at the bottom
   matching the homepage treatment. */

/* Match the homepage's column right-margin (15px gutter from card edge to
   column wrapper). post-3408.css sets margin:0 — homepage uses 0 15px 0 0. */
.elementor-3408 .elementor-element.elementor-element-162b173 > .elementor-element-populated {
  margin: 0 15px 0 0 !important;
  min-height: 497px;  /* match homepage card height */
}

.ppg-contact-form input:focus,
.ppg-contact-form textarea:focus {
  outline: none;
  border-color: var(--e-global-color-wanzor_accent, #F49223);
  box-shadow: 0 0 0 3px rgba(244, 146, 35, 0.12);
}

/* Submit — uses the master-button btn-hover-2 (dark ripple from
   cursor on hover) to match the orange CTAs on the homepage. The
   master-button class handles the orange background, padding, radius,
   and color. We only add layout (centering) and reset native button
   chrome (border, font inheritance). The cursor-tracking JS lives in
   contact-us/index.html since the legacy init wiring only fires via the
   Elementor mae-button hook, which a plain <button> doesn't trigger. */
.ppg-contact-form button.ppg-form-submit.master-button {
  align-self: center;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
/* Defeat wanzor-style.css's global `button:hover` rule that flips bg to
   dark — that competes with the bg-hover ripple. Keep the base orange
   so the dark expanding circle is the only hover effect. */
.ppg-contact-form button.ppg-form-submit.master-button:hover,
.ppg-contact-form button.ppg-form-submit.master-button:focus {
  background-color: var(--e-global-color-wanzor_accent, #F49223);
  outline: 0;
}

/* Submitting / disabled state for the double-submit guard. Covers both the
   contact and application form submit buttons. */
.ppg-form-submit:disabled,
.ppg-form-submit.is-submitting {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

/* SMS-consent fine print below submit. Uses the body-text token.
   margin-top adds breathing room since the form's tight 6px gap feels
   too cramped between the small button and the dense disclosure text. */
.ppg-contact-form .ppg-form-disclosure {
  max-width: 600px;
  margin: 16px auto 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--e-global-color-wanzor_text, #787878);
  opacity: 0.85;
  text-align: center;
}
.ppg-contact-form .ppg-form-disclosure a {
  color: var(--e-global-color-wanzor_accent, #F49223);
  text-decoration: underline;
  opacity: 1;
}

/* Honeypot — hidden via attribute, defensive CSS in case the attribute
   gets stripped */
.ppg-contact-form .ppg-honeypot {
  display: none !important;
}

/* Email typo suggestion (Mailcheck) — the email input is wrapped in a
   .ppg-form-cell so the suggestion can stack below it without disturbing
   the 2-col grid layout. align-items: start keeps the phone input from
   stretching to match the email cell's taller height when a suggestion is
   visible. */
.ppg-contact-form .ppg-form-row { align-items: start; }
.ppg-contact-form .ppg-form-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ppg-contact-form .ppg-form-mailcheck {
  margin: 4px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--e-global-color-wanzor_text, #787878);
}
.ppg-contact-form .ppg-form-mailcheck:empty { margin: 0; }
.ppg-contact-form .ppg-form-mailcheck-fix {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--e-global-color-wanzor_accent, #F49223);
  text-decoration: underline;
  cursor: pointer;
}
.ppg-contact-form .ppg-form-mailcheck-fix:hover {
  color: var(--ppg-accent-dark, #C8781D);
}

/* Header layout is now handled by per-page partial choice in build-all.py:
   homepage → _partials/header-float.html (overlays hero)
   inner pages → _partials/header.html     (sits in flow above content) */

/* Dark overlay on the hero is baked into the inline background-image style
   in the HTML (set by build-ppg-contact.py) — no CSS rule needed. */

/* Service sidebar contact card: phone link inherits theme link color
   instead of the white set on .text3. Force white by default. Theme's
   `a:hover` has lower specificity than `.custom-banner .text3 a`, so we
   re-state the hover/focus orange ourselves. */
.custom-banner .text3 a {
  color: #fff;
}
.custom-banner .text3 a:hover,
.custom-banner .text3 a:focus {
  color: var(--e-global-color-wanzor_primary);
}

/* Daycare service page: the price-card lives in a `#sidebar .widget`
   wrapper that adds its own cream background, border-radius, and 31.6%
   width. Two fixes:
   1) Stretch the card's hover bg-image (`bg-price.jpg`, 370×602) to
      fill the card so the wrapper's cream doesn't peek through below
      the image when the card is taller than 602px.
   2) Drop the wrapper's solid background + radius so the card sits
      directly on the page and its hover shadow isn't visually capped. */
.elementor-page-5001 #sidebar .widget.widget_block:has(.elementor-element-612a158),
.elementor-page-5001 #sidebar .widget.widget_block:has(.elementor-element-5a62662) {
  background-color: transparent;
  border-radius: 0;
}
.elementor-page-5001 .elementor-element.elementor-element-612a158 > .elementor-widget-container,
.elementor-page-5001 .elementor-element.elementor-element-5a62662 > .elementor-widget-container {
  background-size: cover;
  background-position: center center;
}

/* Grooming pricing sheet (dog-grooming-decatur-tx). Appended as a full-width
   section below the article+sidebar flex layout, before the footer. */
.grooming-pricing-section {
  padding: 16px 0 80px;
}
/* On desktop the article column carries ~85px of trailing elementor space above
   this full-width section; pull it up so it sits close to the booking paragraph.
   Desktop-only — on mobile the sidebar stacks between, where the pull must not apply. */
@media (min-width: 992px) {
  .grooming-pricing-section { margin-top: -64px; }
}
.grooming-pricing {
  font-size: 16px;
  line-height: 1.6;
}
.grooming-pricing .lede {
  font-size: 18px;
  margin-bottom: 32px;
}
.grooming-pricing h2 {
  font-family: "Quicksand", sans-serif;
  margin: 48px 0 16px;
  font-size: 28px;
}
.grooming-pricing .service-menu {
  margin: 0 0 24px;
}
.grooming-pricing .service-menu dt {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  margin-top: 12px;
}
.grooming-pricing .service-menu dd {
  margin: 4px 0 0 0;
}
.grooming-pricing .invite {
  margin: 24px 0 0;
}
.grooming-pricing .table-note {
  font-style: italic;
  color: #666;
  margin: 0 0 12px;
}
.grooming-pricing .pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
.grooming-pricing .pricing-table th,
.grooming-pricing .pricing-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #ece7e2;
  text-align: left;
}
.grooming-pricing .pricing-table thead th {
  background: #FAF6F1;
  font-weight: 700;
}
.grooming-pricing .pricing-table tbody tr:hover {
  background: #FAF6F1;
}

/* Footer top spacer: halve the theme's 150px spacer to 75px. Scoped to the
   footer's spacer widget (elementor-2373 / element-43653b6) so no other
   spacer is affected. Our styles.css loads after post-2373.css, so this
   wins on equal specificity. */
.elementor-2373 .elementor-element.elementor-element-43653b6 {
  --spacer-size: 75px;
}

/* Get Started application form (getting-started). Reuses contact-form
   input styling; adds fieldset/legend sections, radio/checkbox groups,
   and two-column rows that stack on mobile. No JS. */
.ppg-application-form fieldset {
  border: 0;
  border-top: 1px solid #ece7e2;
  margin: 0 0 32px;
  padding: 28px 0 0;
}
.ppg-application-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.ppg-application-form legend {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 22px;
  padding: 0;
  margin-bottom: 16px;
}
.ppg-application-form .ppg-field-label {
  display: block;
  font-weight: 600;
  margin: 16px 0 6px;
}
.ppg-application-form input[type="text"],
.ppg-application-form input[type="email"],
.ppg-application-form input[type="tel"],
.ppg-application-form select,
.ppg-application-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 17px;
  background: #faf6f1;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.ppg-application-form textarea { resize: vertical; }
/* Same field highlight as the contact form: on focus (incl. the field the
   browser jumps to when native validation fails on submit), show the orange
   border + soft glow instead of the default outline. */
.ppg-application-form input:focus,
.ppg-application-form select:focus,
.ppg-application-form textarea:focus {
  outline: none;
  border-color: var(--e-global-color-wanzor_accent, #F49223);
  box-shadow: 0 0 0 3px rgba(244, 146, 35, 0.12);
}
.ppg-form-row {
  display: flex;
  gap: 12px;
}
.ppg-form-row > * { flex: 1; }
.ppg-check-group,
.ppg-radio-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 12px;
}
.ppg-radio-field { align-items: center; }
.ppg-radio-field .ppg-field-label { flex-basis: 100%; margin: 8px 0 2px; }
.ppg-check-group label,
.ppg-radio-field label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  min-height: 44px;
}
.ppg-application-form .ppg-form-disclosure {
  font-size: 13px;
  line-height: 1.5;
  color: #777;
  margin: 4px 0 8px;
}
@media (max-width: 640px) {
  .ppg-form-row { flex-direction: column; gap: 0; }
}


/* our-story (lifted About page): Elementor's JS section-stretch isn't firing
   on this page, so the footer's dark band sat at container width (~1140px)
   instead of full-bleed. Force the stretch via CSS. Scoped to the about
   page so working pages (where the JS stretch already applies) are untouched. */
.elementor-page-3268 .wanzor-footer .elementor-section-stretched {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Meg/Jonathan team cards ported to /our-story/ — the homepage styles these
   per-element rules in post-165.css (scoped to .elementor-165), which the
   about page doesn't load. Replicate them so the decorative blobs get their
   brand fill (the raw SVG defaults to black) and the avatar->name spacing
   (content-wrap padding) matches the homepage. Scoped to the about page. */
.elementor-page-3268 .elementor-element.elementor-element-a58fbb2 > .elementor-widget-container { margin: 46px 0 0 0; }
.elementor-page-3268 .elementor-element.elementor-element-a58fbb2 .svg-decor { fill: var(--e-global-color-wanzor_accent); }
.elementor-page-3268 .elementor-element.elementor-element-a58fbb2 .master-team .decor-wrap { width: 370px; height: 370px; }
.elementor-page-3268 .elementor-element.elementor-element-a58fbb2 .master-team .content-wrap { padding: 55px 0 0 0; }
.elementor-page-3268 .elementor-element.elementor-element-771e245 > .elementor-widget-container { margin: 46px 0 0 0; }
.elementor-page-3268 .elementor-element.elementor-element-771e245 .svg-decor { fill: var(--e-global-color-wanzor_accent_3); }
.elementor-page-3268 .elementor-element.elementor-element-771e245 .master-team .decor-wrap { width: 377px; }
.elementor-page-3268 .elementor-element.elementor-element-771e245 .master-team svg { margin-top: 4px; }
.elementor-page-3268 .elementor-element.elementor-element-771e245 .master-team .team-role { color: var(--e-global-color-wanzor_accent_3); }
.elementor-page-3268 .elementor-element.elementor-element-771e245 .master-team .content-wrap { padding: 55px 0 0 0; }

/* Our Managers had a 100px top spacer that used to separate it from the
   (now-removed) partner-logo section. Trim it so it sits closer to the story
   above. Scoped to the about page. */
.elementor-page-3268 .elementor-element.elementor-element-5a1a662 { --spacer-size: 50px; }

/* "How we started" paragraph spacing: theme gives the first paragraph
   (90d8660) a 35px bottom margin; the inserted middle paragraph uses an
   inline margin. Bring both to 30px so the gaps are even. About page only. */
.elementor-page-3268 .elementor-element.elementor-element-90d8660 { margin-bottom: 25px; }

/* Decorative dog (31db980) sat at top:550px, where the Meg/Jonathan photo
   (z-index 2-3) clipped its top-right corner. Nudge it down so it clears the
   photo's bottom edge and reads as peeking out below it. About page only. */
.elementor-page-3268 .elementor-element.elementor-element-31db980 { top: 670px; }