/* =============================================================================
   Bow Tie Mobile Pet Grooming • Global Styles (Refined)
   - Single source of truth for tokens, layout, components & page scopes
   - Safe drop-in: preserves existing selectors used in HTML
   - Adds utilities, consistent spacing, responsive & a11y polish
============================================================================= */

/* ------ Design Tokens ------ */
:root{
  /* Brand */
  --brand:        #e97b40;
  --brand-600:    #e36e2d;
  --brand-700:    #d7601f;

  /* Base */
  --ink:          #1b1b1b;
  --muted:        #667085;
  --bg:           #fffdfb;
  --card:         #ffffff;

  /* Effects */
  --ring:         rgba(233,123,64,.35);
  --shadow:       0 10px 30px rgba(0,0,0,.08);

  /* Radii */
  --radius-sm:    10px;
  --radius:       14px;
  --radius-lg:    16px;

  /* Spacing scale (t-shirt sizing) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 860px;
  --bp-lg: 980px;
  --bp-xl: 1100px;
}

/* ------ Base & Resets (light-touch) ------ */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff,#fff7f1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand-700); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width:1100px; margin:0 auto; padding:0 20px }

/* Global focus ring for keyboard users */
:where(a, .btn, .brand, .review-badge, .footer a, .nav a):focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Accessibility helpers */
.sr-only,
.visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; white-space:nowrap;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ------ Navigation ------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #f2f2f2;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:12px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px }
.brand-icon{ width:36px; height:36px; border-radius:6px; cursor:pointer }

.nav-toggle{
  display:none; appearance:none; border:0; background:transparent; cursor:pointer; padding:6px; border-radius:10px;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; background:#212121; margin:5px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-menu{ display:flex; gap:14px; align-items:center }

/* Dropdown (Services) */
.has-submenu{ position:relative }
.sub-toggle{
  background:transparent; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.sub-toggle::after{ content:"▾"; font-size:.7rem; transform:translateY(1px) }
.submenu{
  position:absolute; top:100%; left:0; z-index:60; display:none; min-width:220px;
  background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.08);
  padding:12px 8px 8px;
}
/* Flip the caret when submenu is open */
.sub-toggle::after{
  content: "▾";
  font-size: .7rem;
  transform: translateY(1px);
  transition: transform .18s ease;
}

/* Mobile/tablet: JS toggles .open on the wrapper */
.has-submenu.open > .sub-toggle::after{
  transform: translateY(-1px) rotate(180deg);
}

@media (min-width: 1280px){
  .has-submenu:hover  > .sub-toggle::after,
  .has-submenu:focus-within > .sub-toggle::after{
    transform: translateY(-1px) rotate(180deg);
  }
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu{ display:block }
}


.submenu a{ display:block; padding:10px 12px; border-radius:8px; color: var(--brand-700); text-decoration:none }
.submenu a:hover,
.submenu a:focus-visible{ background:rgba(233,123,64,.08); outline:none }


/* Mobile nav */ 
@media (max-width: 767px){
  .nav-inner{ padding:10px 0 }
  .nav-toggle{ display:block }
  .nav-menu{
    position:absolute; left:0; right:0; top:56px; background:#fff; border-bottom:1px solid #eee;
    display:none; flex-direction:column; gap:0;
  }
  .nav-menu.open{ display:flex }
  .nav-menu a{ padding:12px 20px; border-top:1px solid #f6f6f6; width:100% }

  .has-submenu{ width:100% }
  .sub-toggle{
    width:100%; text-align:left; padding:12px 20px; border-top:1px solid #f6f6f6;
  }
  .sub-toggle::after{ margin-left:auto }
  .submenu{ position:static; display:none; border:0; box-shadow:none; padding:0 20px 10px }
  .has-submenu.open .submenu{ display:block }
  .submenu a{ padding:10px 0 }
}

/* ------ Hero ------ */
.hero{ position:relative; overflow:hidden }
.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-5); align-items:center;
  padding:40px 0;
}
.kicker{
  display:inline-block; font-weight:700; font-size:.9rem; color:var(--brand-700);
  background:rgba(233,123,64,.12); border:1px solid rgba(233,123,64,.25);
  padding:6px 10px; border-radius:999px; letter-spacing:.02em;
}
h1{ font-size:clamp(1.8rem,3.6vw + .4rem,3rem); line-height:1.1; margin:12px 0 }
.sub{ font-size:1.125rem; color:var(--muted); margin:10px 0 18px }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.btn{
  appearance:none; border:0; cursor:pointer; padding:13px 18px; border-radius:12px;
  font-weight:800; font-size:1rem; line-height:1;
  background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#fff;
  box-shadow:0 8px 20px rgba(233,123,64,.35); display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ box-shadow:0 10px 26px rgba(233,123,64,.45) }
.btn.outline{
  background:#fff; color:var(--brand-700); border:1px solid rgba(233,123,64,.4); box-shadow:none;
}
.hero-card{
  background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px; border:1px solid #f0f0f0;
}
.hero-card img{ width:100%; height:auto; border-radius:12px }

/* Sections */
.section{ padding:28px 0 }
.section h2{ font-size:clamp(1.4rem,2.4vw + .3rem,2rem); margin:0 0 8px }
.section .sub{ color:var(--muted); margin:0 0 18px }

/* ------ Reviews (shared) ------ */
.reviews{ background:#fff }
.reviews-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.review-card{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius);
  padding:16px; box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.stars{ color:#f5b400; font-size:1rem; letter-spacing:1px; margin-bottom:6px }
.review-meta{ display:flex; align-items:center; gap:10px; margin-top:12px; color:#666; font-size:.92rem }
.review-meta .dot{ width:8px; height:8px; border-radius:50%; background:#e0e0e0 }
.review-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e9eef6; padding:6px 10px; border-radius:999px;
  font-weight:600; color:#1a73e8;
}
.review-cta{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:center }

/* Lightweight review header (PetCHECK page) */
.reviews-light-header{
  display:flex; align-items:center; justify-content:center;
  padding-top:var(--space-2); margin-bottom:var(--space-2); /* tighter to the block below */
}
/* PetCHECK badge: align left but keep container padding */
@media (max-width: 1279px){
  .reviews-light-header{
    justify-content: flex-start;   /* stop centering */
  }
}

.reviews-light{ padding-top:var(--space-2) } /* reduce gap under badge */

/* ------ Bio blocks ------ */
.bio{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
}
.bio img{
  width:100%; height:auto; border-radius:var(--radius); box-shadow:0 10px 26px rgba(0,0,0,.06)
}
.bio h3{ margin:0 0 6px }
.bio .kicker{ margin-bottom:8px }
.bio .points{ margin:12px 0 0; padding-left:18px }
.bio .points li{ margin:6px 0 }

/* ------ Cards & Grids (services + shared components) ------ */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px }
.card{
  background:var(--card); border:1px solid #f1f1f1; border-radius:var(--radius);
  box-shadow:0 8px 18px rgba(0,0,0,.04); overflow:hidden; display:flex; flex-direction:column;
}
.card img{ width:100%; height:220px; object-fit:cover }
.card-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px }
.card h3{ margin:4px 0 0; font-size:1.15rem }
.card p{ margin:0; color:#555; min-height:72px }
.card .cta-row{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap }

/* House-call comfort blocks */
.comfort-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px }
.comfort{ background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); overflow: hidden; padding:16px; text-align:center }
.comfort img{ width:100%; height:220px; object-fit:cover; border-radius:10px; margin-bottom:10px }
.comfort h4{ margin:0 0 6px }
.comfort p{ margin:0; color:#555 }

/* Section CTA */
.section-cta{ text-align:center; margin-top:16px }
@media (max-width: 767px){
  .section-cta{ margin-top:24px }
  .cards{ grid-template-columns:1fr }
  .comfort-grid{ grid-template-columns:1fr }
}

/* ------ PetCHECK (shared patterns) ------ */
.petcheck-hero .hero-inner{ grid-template-columns:1.15fr .85fr }
@media (max-width: 1279px){ .petcheck-hero .hero-inner{ grid-template-columns:1fr } }

.petcheck-points{
  list-style:none; padding-left:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px;
}
.petcheck-points li{ position:relative; padding-left:28px; line-height:1.35 }
.petcheck-points li::before{
  content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:var(--brand-700);
}

.steps{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:12px;
}
.step{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); padding:14px; box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.step h3{ margin:6px 0 8px; font-size:1.05rem }
.step p{ margin:0; color:#555 }
@media (max-width: 1279px){ .steps{ grid-template-columns:1fr } }

.note-banner{
  background:#fff7ef; border:1px solid rgba(233,123,64,.25);
  border-radius:var(--radius); padding:12px 14px; color:#5b3d2c; font-size:.98rem;
}

/* Essentials page: slightly smaller card descriptions + chips */
#essentials .card p{ font-size:.98rem; line-height:1.45; min-height:68px }
#essentials .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  border:1px solid rgba(233,123,64,.28); background:rgba(233,123,64,.08);
  color:var(--brand-700); font-size:.85rem; font-weight:600;
}
#essentials .meta-row{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px }

/* ------ Rates & Packages ------ */
#rates-hero .hero-inner{ grid-template-columns:1.1fr .9fr }
@media (max-width: 1279px){ #rates-hero .hero-inner{ grid-template-columns:1fr } }

.rates-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start }
@media (max-width: 1279px){ .rates-grid{ grid-template-columns:1fr } }

.rate-card{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.rate-card h3{ margin-bottom:8px }
.rate-card .sub{ margin:0 0 12px }
.rate-lines{ display:grid; gap:8px }
.rate-line{ display:flex; align-items:baseline; gap:8px }
.rate-line .item{ font-weight:600; color:#222 }
.rate-line .desc{ color:#555 }
.rate-line .price{ margin-left:auto; font-weight:700; color:#222 }
.rate-note{ font-size:.92rem; color:#666; margin-top:8px }

.figure{ background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.04) }
.figure img{ display:block; width:100%; height:auto }
.figure figcaption{ padding:10px 12px; font-size:.93rem; color:#555 }

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(233,123,64,.28); background:rgba(233,123,64,.08); color:var(--brand-700); font-weight:600; font-size:.85rem;
}

/* ------ Service Area ------ */
#service-area-hero .hero-inner{ grid-template-columns:1.15fr .85fr }
@media (max-width: 1279px){ #service-area-hero .hero-inner{ grid-template-columns:1fr } }

.area-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start }
@media (max-width: 1279px){ .area-grid{ grid-template-columns:1fr } }

.area-card{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); padding:16px; box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.area-card h3{ margin:0 0 8px }
.area-card p{ margin:0 0 10px; color:#555 }

.map-figure{ background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.04) }
.map-figure img{ display:block; width:100%; height:auto }
.map-figure figcaption{ padding:10px 12px; font-size:.93rem; color:#555 }

/* ------ Policies & Procedures ------ */
#policies-hero .hero-inner{ grid-template-columns:1.1fr .9fr }
@media (max-width: 767px){ #policies-hero .hero-inner{ grid-template-columns:1fr } }

.policy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width: 1279px){ .policy-grid{ grid-template-columns:1fr } }

.policy-card{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); box-shadow:0 8px 18px rgba(0,0,0,.04); overflow:hidden;
}
.policy-card details{ padding:12px 14px }
.policy-card summary{
  cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; gap:10px;
}
.policy-card summary::-webkit-details-marker{ display:none }
.policy-card summary .chev{ margin-left:auto; transition:transform .2s ease }
.policy-card details[open] summary .chev{ transform:rotate(180deg) }
.policy-card .body{ color:#555; margin-top:8px }

/* ------ Get a Quote / Book (form) ------ */
#quote-hero .hero-inner{ grid-template-columns:1fr } /* single-column hero */
@media (max-width: 1279px){ #quote-hero .hero-inner{ grid-template-columns:1fr } }

.quote-wrap{ max-width:1279px; margin:6px auto 0; padding:0 20px }
.quote-card{
  background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); border:1px solid #eee; overflow:hidden;
}
.quote-head{
  padding:20px 22px; display:flex; align-items:center; gap:12px; justify-content:center; text-align:center;
  border-bottom:1px solid #f1f1f1; background:linear-gradient(180deg,#fff,#fff7f2);
}
.logo-dot{
  width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 6px rgba(233,123,64,.18); flex:0 0 auto;
}
.quote-head h2{ margin:0; font-size:1.05rem }

/* Form grid & fields */
#quote-form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:22px;
}
#quote-form .full{ grid-column:1 / -1 }
#quote-form label{ display:block; font-weight:600; font-size:.93rem; margin:0 0 6px }
#quote-form .hint{ font-weight:500; color:var(--muted); font-size:.85rem; margin-top:6px }

#quote-form input[type="text"],
#quote-form input[type="email"],
#quote-form input[type="tel"],
#quote-form input[type="date"],
#quote-form select,
#quote-form textarea{
  width:100%; border:1px solid #e6e6e6; background:#fff; border-radius:12px;
  padding:12px 14px; font-size:1rem; line-height:1.4;
  transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease; outline:none;
}
#quote-form textarea{ min-height:110px; resize:vertical }
#quote-form input:focus,
#quote-form select:focus,
#quote-form textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);
}

/* Placeholders */
#quote-form ::placeholder{ font-size:1rem; opacity:1; color:var(--muted) }

/* Checkbox block */
#quote-form .checkbox{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border:1px solid #eee; border-radius:12px; background:#fff;
}
#quote-form .checkbox input[type="checkbox"]{ width:20px; height:20px; transform:translateY(2px); cursor:pointer }
#quote-form .checkbox label{ font-size:1rem; line-height:1.4; cursor:pointer }

/* Divider with centered label */
#quote-form .divider{
  position:relative; text-align:center; grid-column:1 / -1; margin:16px 0;
}
#quote-form .divider::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#f1f1f1; transform:translateY(-50%);
}
#quote-form .divider > .badge{ position:relative; z-index:1; padding:0 10px; background:#fff; color:var(--muted); font-weight:600 }

/* Actions & toasts */
#quote-form .actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:0 22px 0 }
#quote-form .ghost{ background:transparent; color:var(--brand-700); border:1px solid rgba(233,123,64,.45); box-shadow:none }
#quote-form .toast{
  display:none; margin:16px 0 0; padding:12px 14px; border-radius:12px; border:1px solid #e7f6ef; background:#f3fbf7; color:#0f5132; font-weight:600;
}
#quote-form .toast.error{ border-color:#fde8ea; background:#fff5f6; color:#5d1d1f }
#quote-form button.btn{ display:inline-flex; align-items:center; line-height:1 }

/* Extra breathing room */
#quote .quote-foot{ margin-top:8px; padding:8px 0 12px; text-align:center; color:var(--muted); font-size:.9rem }
#quote{ padding-bottom:10px }
@media (max-width: 767px){
  #quote{ padding-bottom:4px }
  #quote-form{ grid-template-columns:1fr }
  #quote-form .checkbox input[type="checkbox"]{ width:24px; height:24px }
}
/* Toasts: base (hidden) */
#quote-form .toast{
  /* you already have position, padding, colors, etc.; keep those */
  display: none;
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 1000; /* on top of form */
}

/* Toasts: shown state (revealed by JS) */
#quote-form .toast.show{
  display: block;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity .2s ease, transform .2s ease;
}

/* (Optional) Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  #quote-form .toast, #quote-form .toast.show { transition: none; }
}

/* ------ Skin & Coat Treatments ------ */
#skin-hero .hero-inner{ grid-template-columns:1.1fr .9fr }
@media (max-width: 1279px){ #skin-hero .hero-inner{ grid-template-columns:1fr } }

.treat-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px }
@media (max-width: 1279px){ .treat-grid{ grid-template-columns:1fr } }

.treat-card{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.04); overflow:hidden;
}
.treat-card h3{ margin:0 0 8px }
.treat-card .sub{ margin:0 0 10px; color:#555 }
.treat-card .meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0 }

/* Top media with edge-to-edge bleed */
.treat-media{ margin:-16px -16px 12px; aspect-ratio:16/9; background:#f6f6f6 }
.treat-media img{ width:100%; height:100%; object-fit:cover; object-position:center }

/* ------ FAQs (scoped) ------ */
#faqs-hero .hero-inner{ grid-template-columns:1.1fr .9fr }
@media (max-width: 767px){ #faqs-hero .hero-inner{ grid-template-columns:1fr } }

.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width: 1279px){ .faq-grid{ grid-template-columns:1fr } }

.faq-card{
  background:#fff; border:1px solid #f1f1f1; border-radius:var(--radius); box-shadow:0 8px 18px rgba(0,0,0,.04); padding:14px;
}

/* ------ Footer (compact v2) ------ */
footer{ background:#fff; border-top:1px solid #eee; color:#444 }
.footer{ padding:24px 0 }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px; align-items:start }
.footer .brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.footer .brand-icon{ width:36px; height:36px; border-radius:6px; cursor:default }
.footer h3{ margin:0 0 8px; font-size:1rem; color:#222 }
.footer p, .footer a, .footer li, .footer small{ font-size:.95rem; color:#444 }
.footer .lead{ margin:6px 0 12px; color:#667085 }
.footer .cta{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; font-weight:800;
  background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#fff; text-decoration:none;
  border-radius:12px; box-shadow:0 10px 22px rgba(233,123,64,.28);
}
.footer .cta:hover, .footer .cta:focus-visible{
  text-decoration:underline; text-underline-offset:3px;
}
.footer .meta{ display:grid; gap:6px }
.footer .meta a{ color:#5c6673 }
.footer .meta a:hover{ color:#2f3a46 }
.footer .meta b{ color:#2a2a2a }

.footer .quick-links a{ color:var(--brand-700); font-weight: 600; }
.footer .quick-links a:hover{
  color:var(--brand);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;
}
.footer .quick-links a:visited{ color:var(--brand-700) }

.social-icons{ margin-top:15px; display:flex; justify-content:center; gap:15px }
.social-icons img{ width:28px; height:28px; transition:transform .2s ease }
.social-icons img:hover{ transform:scale(1.2) }

.footer-bottom{
  border-top:1px solid #e9edf2; background:transparent; margin-top:18px; padding-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer-links{ display:flex; gap:14px; flex-wrap:wrap }
.footer-links a{ color:#626d7a; font-size:.93rem; text-decoration:none }
@media (min-width: 1280px){
  .footer-links a + a::before{ content:"·"; margin:0 10px; color:#c1c7d0 }
}
@media (max-width: 1279px){
  .reviews-grid{ grid-template-columns:1fr }
  .bio{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr; gap:18px }
}

/* ------ Small Utilities ------ */
.align-center{ text-align:center }
.mt-0{ margin-top:0 } .mt-1{ margin-top:var(--space-1) } .mt-2{ margin-top:var(--space-2) }
.mt-3{ margin-top:var(--space-3) } .mt-4{ margin-top:var(--space-4) } .mt-5{ margin-top:var(--space-5) }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:var(--space-1) } .mb-2{ margin-bottom:var(--space-2) }
.mb-3{ margin-bottom:var(--space-3) } .mb-4{ margin-bottom:var(--space-4) } .mb-5{ margin-bottom:var(--space-5) }

/* ------ Reviews header layout ------ */
.flex-split{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ------ Quote hero layout: two columns on desktop, stack on narrow screens ------ */
#quote-hero .hero-inner { grid-template-columns: 1.15fr .85fr; }

/* ===== Mobile polish (bolt-on, safe to append) ===== */

/* 1) Headings & hero tightening on small phones */
@media (max-width: 480px){
  .hero-inner{ padding:28px 0; }
  h1{
    /* slightly smaller top size + tighter line height */
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.12;
    margin: 10px 0 8px;
    text-wrap: balance; /* graceful on modern browsers */
  }
  .kicker{ font-size: .85rem; padding: 5px 9px; }
  .sub{ font-size: 1.02rem; margin: 8px 0 14px; }
  .hero-card{ padding: 12px; }
}

/* Full-width CTAs on phones + small tablets */
@media (max-width: 767px){
  .cta-row{ gap: 10px; flex-direction: column; }
  .cta-row .btn,
  .section-cta .btn{
    width: 100%;
    padding: 15px 16px;
    font-size: 1.02rem;
    justify-content: center; /* center CTA text */
    text-align: center;
  }
}

/* 3) Reorder bios for narrative-first reading:
      text before image on small screens, without touching HTML */
@media (max-width: 767px){
  .bio{ grid-template-columns: 1fr; }
  .bio > picture{ order: 2; } /* image after text */
  .bio > div{ order: 1; }     /* text first */
}

/* 4) Reviews: denser, more scannable cards on phones */
@media (max-width: 767px){
  .reviews-grid{ gap: 12px; }
  .review-card{ padding: 14px; }
  .review-cta{ gap: 10px }
  .review-cta .btn{ width: 100%; } /* primary action full width */
  .review-cta .btn.outline{ order: 2; }
}

/* 5) Footer: friendlier tap targets and spacing */
@media (max-width: 767px){
  .footer .cta{ width: 100%; justify-content: center; }
  .footer .meta a,
  .footer .quick-links a{ padding: 6px 0; display: inline-block; }
  .footer-links{ gap: 10px }
}

/* 6) Slightly larger body text on small phones (readability) */
@media (max-width: 420px){
  body{ font-size: 17px; } /* was browser default; gentle bump */
}

/* 7) Smooth in-page nav offset for sticky header */
:root{ scroll-padding-top: 72px; }

/* === Mobile-first hero: stack + center =================================== */
/* Default on phones: text first, media second (below the copy) */
@media (max-width: 767px){
  .hero .hero-inner{
    grid-template-columns: 1fr;      /* stack */
    padding: 26px 0;                  /* a bit tighter top/bottom */
  }

  /* Cushion the text and center it */
  .hero .container{ padding-inline: 24px; }   /* more side padding than the sitewide 20px */
  .hero .kicker,
  .hero h1,
  .hero .sub{ text-align: left; }
  .hero .sub{ margin-top: 8px; }

  /* Buttons: centered row, good thumb sizes */
  .hero .cta-row{ justify-content: center; gap: 12px; }
  .hero .cta-row .btn{
    min-width: 260px;                 /* keeps them substantial on 480–640px screens */
    padding: 15px 16px;
  }

  /* Media card below text and visually contained */
  .hero .hero-card{
    order: 2;                         /* text first, media second */
    max-width: 767px;
    margin: 10px auto 0;              /* center the card */
    padding: 12px;
  }
  .hero .hero-card img{ border-radius: 12px; }
}

/* === Toggle: If you want the media ABOVE the text on phones =============== */
/* Just add class="hero media-first" on the <header> if you prefer image first */
@media (max-width: 767px){
  .hero.media-first .hero-card{ order: -1; margin: 0 auto 14px; }
}

/* === (Optional) cap media size on larger phones/tablets too =============== */
@media (min-width: 768px) and (max-width: 1024px){
  .hero .hero-card{ max-width: 767px; justify-self: end; }
}
/* Center brand only on mobile */
@media (max-width: 767px) {
  .brand {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .nav-inner {
    justify-content: center;
  }
}

/* === Footer breathing room ============================= */
.footer {
  padding: 24px 20px; /* vertical + horizontal */
}

@media (max-width: 767px){
  .footer {
    padding: 28px 24px; /* slightly more cushion on small screens */
  }
}
/* === Tablet polish: carry mobile niceties up to ~11oo px =============== */
@media (min-width: 768px) and (max-width: 1279px){
  /* Give the hero the same side padding/cushion as phones */
  .hero .container{ padding-inline: 28px; }

  /* Headline stays left for readability, but we keep it compact */
  .hero h1{
    font-size: clamp(2rem, 3.2vw + .2rem, 2.6rem);
    line-height: 1.12;
    text-wrap: balance;
    margin: 12px 0 10px;
  }
  .hero .sub{ font-size: 1.08rem; margin: 8px 0 16px; }

  /* Kicker centered (to match the mobile vibe you liked)
  .hero .kicker{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }*/

  /* CTAs: centered row + generous targets */
  .hero .cta-row{ justify-content: center; gap: 12px; }
  .hero .cta-row .btn{
    min-width: 260px;
    padding: 15px 18px;
  }

  /* Media card: cap width so it doesn’t dominate, keep it right-aligned */
  .hero .hero-card{
    max-width: 767px;        /* was unconstrained; this balances the columns */
    justify-self: end;
    padding: 14px;
  }

  /* Optional: a touch more spacing above/below the hero */
  .hero .hero-inner{ padding: 32px 0; }
}

/* If you prefer the image ABOVE the text on tablets too, flip the order: */
@media (min-width: 768px) and (max-width: 1279px){
  .hero.media-first .hero-card{ order: -1; justify-self: center; margin-bottom: 12px; }
}
/* ===== Tablet fixes: brand centering + hero padding (641–1120px) ===== */
@media (min-width: 768px) and (max-width: 1279px){
  /* Center the brand while keeping the hamburger on the right */
  .nav-inner{
    position: relative;
    justify-content: center;   /* centers the .brand block */
  }
  .brand{
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .nav-toggle{
    position: absolute;
    right: 20px;               /* keep the menu button at the edge */
    top: 50%;
    transform: translateY(-50%);
  }

  /* Hero: add more side cushioning for the text column */
  .hero .container{ padding-inline: 32px; } /* was 28px */
  .hero h1{
    font-size: clamp(2rem, 3.2vw + .2rem, 2.6rem);
    line-height: 1.12;
    margin: 12px 0 10px;
    text-wrap: balance;
    text-align: left;          /* your preferred alignment */
  }
  .hero .sub{
    font-size: 1.08rem;
    margin: 8px 0 16px;
    text-align: left;
  }

  /* Keep CTAs centered and the media card tamed */
  .hero .cta-row{ justify-content: center; gap: 12px; }
  .hero .cta-row .btn{ min-width: 260px; padding: 15px 18px; }
  .hero .hero-card{ max-width: 767px; justify-self: end; padding: 14px; }
}
/* Extra space when a note-banner is directly followed by a section-cta */
.note-banner + .section-cta {
  margin-top: 24px; /* or var(--space-6) if you prefer using tokens */
}
/* When buttons stack vertically inside a section-cta */
.section-cta .btn + .btn{
  margin-top: 12px;
}
/* Service Area page: tighten gap */
.section + .section .section-cta {
  margin-top: 0;       /* remove extra top margin */
}
/* Rates page: tighten gap between breed figure and badge */
.figure + .meta-row {
  margin-top: 12px;   /* was larger, now consistent */
}
/* 1) Reduce the gap from the breed figure to the badge (only for the next CTA section) */
#breed-rates { padding-bottom: 16px; }                 /* was 28px globally */
#breed-rates + .section { padding-top: 12px; }         /* was 28px globally */
/* (Optional) nudge a bit more space on very small screens */
@media (max-width: 767px){
}
/* MOBILE: tighten gap under the breed figure */
#breed-rates .figure { margin: 0; }                 /* kill UA figure margins */
#breed-rates { padding-bottom: 8px; }               /* was 12px in mobile patch */
#breed-rates + .section { padding-top: 8px; }       /* was 10–12px */

/* keep a little space between the badge row and CTA buttons */
.meta-row + .section-cta { margin-top: 16px; }
/* Ensure space between PetCHECK badge and CTA on mobile/tablet */
.meta-row + .section-cta {
  margin-top: var(--space-5); /* 20px default */
}

@media (max-width: 767px) {
  .meta-row + .section-cta {
    margin-top: var(--space-6); /* 24px on tablet/mobile */
  }
}

@media (max-width: 767px) {
  .meta-row + .section-cta {
    margin-top: var(--space-7); /* 28px for tighter phone screens */
  }
}
/* Mobile-first: add padding between badge row and CTA */
@media (max-width: 767px) {
  .meta-row {
    margin-bottom: 1.5rem; /* pushes down CTAs on phones & small tablets */
  }
}
/* Policies page: tighten gap between note-banner and CTA */
#policies-hero ~ main .note-banner {
  margin-bottom: 12px; /* push the next section down a little */
}
#policies-hero ~ main .note-banner + section.section {
  padding-top: 0; /* remove the redundant top padding */
}
/* POLICIES: tighten the gap when a section ends with a note-banner */
.section:has(> .container > .note-banner:last-child){
  padding-bottom: 12px;            /* reduce the section's bottom padding */
}
.section:has(> .container > .note-banner:last-child) + .section{
  padding-top: 0;                   /* remove redundant top padding on the next section */
}

/* Optional: slightly more space on very small screens */
@media (max-width: 767px){
  .section:has(> .container > .note-banner:last-child){
    padding-bottom: 10px;
  }
}
/* PetCHECK page: add space between CTA button and badge */
.petcheck-hero ~ main .container > .btn {
  margin-bottom: 20px; /* adjust as needed */
}

.petcheck-hero ~ main .reviews-light-header {
  margin-top: 12px; /* prevents badge from sticking too close */
}
/* PetCHECK: make the post-banner CTA full-width on mobile/tablet */
@media (max-width: 767px){
  .petcheck-hero ~ main .container > .btn{
    width: 100%;
    display: flex;          /* keeps text centered */
    justify-content: center;
    text-align: center;
  }
}
/* Essential Services: make lone CTA full-width on small screens */
@media (max-width: 767px) {
  .container.align-center > .btn {
    width: 100%;
    display: flex;
    justify-content: center; /* keep text centered */
    text-align: center;
    margin-top: 16px; /* optional breathing room */
  }
}
/* Essential Services only: add breathing room after note-banner */
#essentials ~ section .note-banner + .section-cta {
  margin-top: 20px;         /* desktop baseline */
}

@media (max-width: 767px){
  #essentials ~ section .note-banner + .section-cta {
    margin-top: 24px;       /* extra tap-friendly space on phones */
  }
}
/* Rates page: ensure spacing after note-banner */
#rates-hero .note-banner,
#rates-hero + .note-banner,
#rates-packages .note-banner {
  margin-bottom: var(--space-5); /* 20px by default */
}

@media (max-width: 767px) {
  #rates-hero .note-banner,
  #rates-packages .note-banner {
    margin-bottom: var(--space-6); /* 24px on mobile/tablet for extra breathing room */
  }
}
/* Rates & Packages: add breathing room after the last note-banner in Packages */
#packages .note-banner {
  margin-bottom: var(--space-5); /* 20px baseline */
}

@media (max-width: 767px) {
  #packages .note-banner {
    margin-bottom: var(--space-6); /* 24px on phones/tablets */
  }
}
/* Our Efforts: ensure breathing room between note-banner and CTA */
#efforts-hero ~ main .note-banner + .section-cta {
  margin-top: 20px;   /* desktop/tablet baseline */
}

@media (max-width: 767px) {
  #efforts-hero ~ main .note-banner + .section-cta {
    margin-top: 24px; /* more cushion for touch targets on phones */
  }
}
/* SERVICES: extra breathing room under the House-call grid (desktop only) */
@media (min-width: 1280px){
  #house-call .section-cta{
    margin-top: 28px;   /* was 16px via the global rule */
  }
}
/* PetCHECK (desktop): left-align the compact review badge */
@media (min-width: 1280px) {
  .petcheck-hero ~ main .reviews-light-header {
    justify-content: flex-start;
  }
}
/* Override for desktop: left-align CTA buttons */
@media (min-width: 1280px) {
  .cta-row {
    justify-content: flex-start;
  }
}
/* Desktop: left-align CTAs on Essential Services */
@media (min-width: 1280px){
  /* hero buttons */
  .essential-services .hero .cta-row { justify-content: flex-start; }

  /* in-content CTAs (e.g., “Book Now and Save”, bottom CTA) */
  .essential-services .section-cta,
  .essential-services .align-center { text-align: left; }
}
/* Desktop: left-align section CTAs on Services page */
@media (min-width: 1280px){
  body.services .section-cta {
    text-align: left;
  }
}
/* Desktop only: left-align CTAs on Skin & Coat Treatments */
@media (min-width: 1280px){
  .skin-coat-treatments .section-cta { text-align: left; }
}
/* Desktop: left-align CTAs on Policies page */
@media (min-width: 1280px){
  body.policies .section-cta { text-align: left; }
  body.policies .container.align-center { text-align: left; }
}
/* Our Efforts: extra breathing room before CTAs on phones */
@media (max-width: 767px){
  #efforts-hero ~ main .section-cta {
    margin-top: 32px; /* was 24px globally */
  }
}
/* Our Efforts: left-align CTAs on desktop */
@media (min-width: 1280px){
  #efforts-hero ~ main .section-cta {
    text-align: left;
  }
}
/* Rates & Packages: tighten spacing above first section headings */
#a-la-carte .rate-card h3:first-of-type {
  margin-top: 0;        /* remove default top margin */
}

#a-la-carte .rate-card h3 {
  margin-top: 12px;     /* keep some breathing room for subsequent groups */
  margin-bottom: 8px;   /* preserve the bottom gap */
}
/* Rates & Packages: more space below section headings */
#a-la-carte .rate-card h3 {
  margin-bottom: 12px;  /* was 8px */
}
/* ===== A la Carte – readability polish (no HTML changes) ===== */
#a-la-carte .rate-lines {
  display: grid;           /* already grid, we’ll keep it */
  gap: 10px;               /* a hair more breathing room */
}

/* Two-column grid for each row:
   item/price align on one line; desc drops to full width below */
#a-la-carte .rate-line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  padding: 6px 0;
  border-bottom: 0.5px solid #f2f2f2;   /* subtle row divider */
}
#a-la-carte .rate-line:last-child { border-bottom: 0; }

#a-la-carte .rate-line .item { grid-column: 1; font-weight: 700; }
#a-la-carte .rate-line .price{
  grid-column: 2;
  font-weight: 800;
  font-variant-numeric: tabular-nums;        /* aligned digits */
  font-feature-settings: "tnum" 1;
  text-align: right;
  min-width: 5.2ch;                          /* keeps the column tidy */
}

/* Description spans full width on the next line */
#a-la-carte .rate-line .desc {
  grid-column: 1 / -1;
  color: #555;
  line-height: 1.35;
}

/* Headings: a touch more space below for separation */
#a-la-carte .rate-card h3 { margin-bottom: 12px; }  /* was 8px */

/* Desktop hover/focus guide line */
@media (min-width: 1280px){
  #a-la-carte .rate-line:hover { background: #fffaf6; }
  #a-la-carte .rate-line:focus-within {
    outline: 3px solid rgba(233,123,64,.25);
    outline-offset: 2px;
    border-radius: 10px;
  }
}
/* Rates & Packages: left-align bottom CTA on desktop */
@media (min-width: 1280px){
  #rates-hero ~ main .container.align-center,
  #rates-hero ~ main .section-cta {
    text-align: left !important;
  }
}
/* Rates page: add space between kicker and H2 */
#breed-rates .kicker {
  margin-bottom: 12px;   /* adjust to 12–16px if you want more */
}

/* Get a Quote — hero layout (mobile first) */
#quote-hero .hero-inner { grid-template-columns: 1fr; }           /* phones default */

@media (min-width: 1280px){
  #quote-hero .hero-inner { grid-template-columns: 1.15fr .85fr; } /* desktop */
}

/* Phones: push the image below and add space */
@media (max-width: 767px){
  #quote-hero .hero-card{
    order: 2;                 /* image after the text */
    margin-top: 12px;         /* breathing room */
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ================= Tablet-first upgrades (768–1279px) ================= */
@media (min-width: 768px) and (max-width: 1279px){

  /* Layout container: a touch more side padding on tablet */
  .container { padding-left: 24px; padding-right: 24px; }

  /* ---------------- Hero ---------------- */
  /* Keep two columns, but slightly weight copy over media */
  .hero .hero-inner{
    grid-template-columns: 1.1fr .9fr;   /* balances text vs image on tablets */
    padding: 32px 0;                     /* a little breathing room */
    gap: 20px;
  }
  .hero h1{
    font-size: clamp(2rem, 3.2vw + .2rem, 2.6rem);
    line-height: 1.12;
    margin: 12px 0 10px;
    text-wrap: balance;
  }
  .hero .sub{ font-size: 1.08rem; margin: 8px 0 16px; }
  .hero .cta-row{ justify-content: center; gap: 12px; }
  .hero .cta-row .btn{ min-width: 240px; padding: 15px 18px; }
  .hero .hero-card{
    max-width: 767px;     /* prevents the image card from overpowering */
    justify-self: end;
    padding: 14px;
  }

  /* ---------------- Reviews ---------------- */
  /* Override earlier 1-column rule: use 2 columns on tablet for readability */
  .reviews-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .review-card{ padding: 16px; }

  /* ---------------- Bio sections ---------------- */
  /* Keep two columns on tablet (previously stacked at <=1024) */
  .bio{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 20px;
  }

  /* ---------------- Footer ---------------- */
  /* Use 2 columns (brand + one column) instead of collapsing to a single stack */
  .footer-grid{
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
  }

  /* ---------------- Buttons & touch comfort ---------------- */
  .btn{ padding: 13px 18px; }
}
/* ===== Tablet nav reflow (768–1279px) ===== */
@media (min-width: 768px) and (max-width: 1279px){
  /* Let the bar breathe and wrap to two neat rows */
  .nav-inner{
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 0;           /* keep the bar compact */
  }

  /* Brand on its own row, centered */
  .brand{
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    font-size: 1.02rem;        /* slightly smaller so it doesn’t crowd */
  }

  /* Menu: full row, centered, allows wrap if needed */
  .nav-menu{
    flex: 1 1 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;             /* tight vertical, comfy horizontal */
  }

  /* Links & dropdown toggle sizing for tablets */
  .nav-menu > a,
  .sub-toggle{
    padding: 8px 10px;         /* touch-friendly but not bulky */
    font-size: .98rem;
    line-height: 1.1;
  }

  /* Keep “Get a Quote” visually distinct but not oversized */
  .nav .btn.outline{
    padding: 10px 14px;
    font-size: .98rem;
    border-radius: 12px;
    order: 99;                 /* encourage it to sit at the end of the row */
  }

  /* Services submenu stays usable on touch */
  .submenu{
    min-width: 220px;
  }
}
/* === Tablet hero padding refinement (768–1279px) === */
@media (min-width: 768px) and (max-width: 1279px){
  /* Give the hero more left/right cushion */
  .hero .container{
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Optional: slightly more vertical room too */
  .hero .hero-inner{
    padding-top: 40px;    /* was 32px */
    padding-bottom: 40px;
  }

  /* Keep text aligned left but not pressed against edges */
  .hero h1, .hero .sub{
    text-align: left;
  }
}
/* === Tablet: left-align hero CTAs (768–1279px) === */
@media (min-width: 768px) and (max-width: 1279px){
  .hero .cta-row{
    justify-content: flex-start;  /* left align */
  }
}
/* === Tablet polish: House-call CTA spacing (768–1279px) === */
@media (min-width: 768px) and (max-width: 1279px){
  #house-call .section-cta{
    margin-top: 28px;   /* match desktop breathing room */
  }
}
/* === Tablet left-align CTAs on Essential Services (768–1279px) === */
@media (min-width: 768px) and (max-width: 1279px){
  /* For all section-cta blocks */
  .section-cta{
    text-align: left;
  }

  /* For containers with align-center (e.g. A la Carte section) */
  .container.align-center{
    text-align: left;
  }

  /* Ensure any nested CTA rows/buttons stay left-aligned */
  .section-cta .btn,
  .container.align-center .btn{
    margin-left: 0;
  }
}
/* ==== HERO SECTION IMAGES PATCHES FOR TABLET SIZES (768 - 1279)px */

/* Make Get a Quote behave like the other pages (two columns on tablet) to change hero image size */
@media (min-width:768px) and (max-width:1279px){
  #quote-hero .hero-inner { grid-template-columns: 1.1fr .9fr; } /* override single-column */
}
/* FAQs hero: keep two columns on tablets to match Our Efforts to change hero image size */
@media (min-width:768px) and (max-width:1279px){
  #faqs-hero .hero-inner { grid-template-columns: 1.1fr .9fr; }
  #faqs-hero .hero-card { max-width: 767px; justify-self: end; } /* same cap */

}
@media (min-width:768px) and (max-width:1279px){
  #rates-hero .hero-inner{ grid-template-columns: 1.1fr .9fr; }
  #rates-hero .hero-card{ max-width: 767px; justify-self: end; }
  #rates-hero .cta-row{ justify-content: flex-start; } /* keep CTAs left, like we did elsewhere */
}
/* FAQs — keep a 2-column hero on tablets */
@media (min-width: 768px) and (max-width: 1279px){
  #faqs-hero .hero-inner { grid-template-columns: 1.1fr .9fr; gap: 20px; }
  #faqs-hero .hero-card { max-width: 767px; justify-self: end; padding: 14px; }
  #faqs-hero .cta-row { justify-content: flex-start; } /* matches your left-aligned CTA preference */
}
/* Skin & Coat Treatments — keep 2 columns on tablets (768–1024px) */
@media (min-width: 768px) and (max-width: 1279px){
  #skin-hero .hero-inner{ grid-template-columns: 1.1fr .9fr; } /* undo the 1-col rule */
  #skin-hero .cta-row{ justify-content: flex-start; }          /* match your tablet CTA alignment */
}

/* Stack only on phones */
@media (max-width: 767px){
  #skin-hero .hero-inner{ grid-template-columns: 1fr; }
}
/* --- Cream background inside the white hero card, keeps your white frame --- */
.hero-card.cream-frame{
  /* your card already has rounded corners & shadow; this ensures the "frame" shows */
  background: #fff;                 /* the white frame */
  border-radius: 22px;
  overflow: hidden;                 /* keeps corners clean */
}

/* Inner panel that shows through your transparent PNG/WebP */
.hero-card.cream-frame .media-frame{
  /* Use your hero-cream if you have a var; fall back to a good match */
  background: var(--hero-cream, #fff7f1);
  border-radius: 18px;
  padding: 12px;                    /* creates the visible white border around */
}

/* Make sure the image fills nicely */
.hero-card.cream-frame .media-frame img{
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet comfort (768–1279px): a bit more breathing room */
@media (min-width: 768px) and (max-width: 1279px){
  .hero-card.cream-frame{ border-radius: 24px; }
  .hero-card.cream-frame .media-frame{
    border-radius: 20px;
    padding: 16px;
  }
}

/* Desktop: slightly larger padding for the panel */
@media (min-width: 1280px){
  .hero-card.cream-frame .media-frame{ padding: 20px; }
}
:root{
  --petcheck-green: #31b02f;
}

/* Default (headlines, body text) */
.petcheck-word{
  color: var(--petcheck-green);
  font-weight: 800;                 /* match your headline weight */
  -webkit-text-stroke: 1.5px #000;  /* Chrome/Safari */
  text-shadow:                       /* Firefox/Edge fallback */
    0 1px #000, 0 -1px #000, 1px 0 #000, -1px 0 #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
  letter-spacing: .01em;            /* tiny spacing helps with outlines */
  paint-order: stroke fill;         /* safe no-op fallback elsewhere */
}

/* Tighter outline inside buttons so it stays crisp */
.btn .petcheck-word{
  -webkit-text-stroke: 1px #000;
  text-shadow:
    0 1px #000, 0 -1px #000, 1px 0 #000, -1px 0 #000;
  font-weight: 700;
}
/* Desktop: show submenu on hover/focus (keeps keyboard support on desktop) */
@media (hover: hover) and (min-width: 1280px) {
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { display:block; }
}

/* Mobile & tablet: disable the global hover/focus opener; use .open class only */
@media (max-width: 1279px) {
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { display:none; } /* override desktop rule */
  .has-submenu.open .submenu { display:block; }
}
/* Tablet: click-to-toggle only (no hover/focus keep-open) */
@media (min-width: 768px) and (max-width: 1279px){
  .submenu{ display: none; }
  .has-submenu.open .submenu{ display: block; }
}

/* === NAV: final, conflict-proof rules === */
/* Desktop only (>=1280px): hover/focus opens; caret flips */
@media (min-width: 1280px){
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { display: block; }

  .has-submenu:hover  > .sub-toggle::after,
  .has-submenu:focus-within > .sub-toggle::after {
    transform: translateY(-1px) rotate(180deg);
  }
}
/* Phones & Tablets (<1280px): click-to-toggle only (no hover/focus opener) */
@media (max-width: 1279px){
  /* Neutralize any earlier global hover/focus openers */
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { display: none; }

  /* Default closed */
  .has-submenu .submenu { display: none; }

  /* Open when JS adds .open */
  .has-submenu.open .submenu { display: block; }
}

/* ==== STYLES.CSS VERSION 6.0 ==== */
/* ==== Add space below the social icons in footer ===== */

.social-icons {
  display: flex;
  justify-content: flex-start;   /* align icons to the left */
  gap: var(--space-4); /* keep icons spaced horizontally */
  margin-bottom: var(--space-4); /* adds vertical breathing room before the note */
}

/* Footer CTA breathing room */
.footer .cta {
  margin-top: var(--space-4);   /* space above CTA */
  margin-bottom: var(--space-4); /* space below CTA */
}

/* Navigation & Brand links: never underline */
.nav-menu a,
.sub-toggle,
.brand,
.brand:hover,
.brand:focus-visible {
  text-decoration: none !important;
  transition: color .2s ease;
}

/* Footer tagline: style for personality */
.footer .tagline {
  font-size: .95rem;        /* just a touch smaller than .lead */
  font-weight: 700;         /* give it punch */
  color: var(--brand-700);  /* hard orange for personality */
  margin: 4px 0 8px;        /* space above and below */
}

/* Footer brand: always left-aligned, even on mobile/tablet */
footer .brand {
  justify-content: flex-start !important;
  text-align: left !important;
  width: auto !important;
}
/* Add this fix to your styles.css to polish the nav on mobile/tablet 8.31.2025*/
/* Mobile & tablet: brand left, hamburger right, even layout */
@media (max-width: 1279px){
  .nav-inner{
    justify-content: space-between !important;  /* undo centering */
  }
  .brand{
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
  }
  .nav-toggle{
    position: static !important;        /* undo absolute right:20px on tablet */
    transform: none !important;
  }
  /* Optional: keep brand text on one line so the toggle doesn't jump */
  .brand span{ white-space: nowrap; }
}

/* NAV: keep side padding aligned with page content */
@media (max-width: 767px){
  .nav-inner{ padding: 10px 20px !important; }       /* matches .container { padding: 0 20px } */
}

@media (min-width: 768px) and (max-width: 1279px){
  .nav-inner{ padding: 12px 24px !important; }       /* matches your tablet .container padding */
}

/* Footer bottom: center copyright line with white background */
.footer-bottom {
  display: flex;
  justify-content: center;     /* center the <small> text */
  text-align: center;
  background: #fff;            /* match footer background */
  border-top: 1px solid #e9edf2;
  padding: 14px 0;
  margin-top: 0;               /* optional: remove extra gap above */
}
/* ===== Desktop nav polish (≥1280px) ===== */
@media (min-width: 1280px){
  .nav-inner{
    justify-content: space-between;      /* clean left/right layout */
    padding: 12px 24px;                  /* align with container gutters */
  }

  /* Brand cluster */
  .brand{
    display: inline-flex;
    align-items: center;
    gap: 10px;                           /* icon ↔ text spacing */
  }
  .brand-icon{ width: 32px; height: 32px; }  /* slightly smaller than mobile “hero” feel */

  /* Menu spacing */
  .nav-menu{ display:flex; gap: 24px; }  /* consistent, not too airy */
  .nav-menu a{ text-decoration: none; }

  /* Outline CTA sizing to match link row height */
  .nav .btn.outline{
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1;
  }
}
/* let the top nav breathe on desktop */
@media (min-width: 1280px){
  .nav .container{ max-width: 1440px; }   /* or 1320/1360px */
}
/* Keep brand flush with main content grid */
.nav .brand {
  margin-left: 20px;   /* match .container padding-inline */
}
/* To push brand further right if you use larger gutters 
@media (min-width:1280px) {
  .nav .brand {
    margin-left: 100px; 
  }
}
*/

/* House-call Comfort images: no stretch + rounded edges */
.comfort img {
  display: block;
  width: 100%;
  height: auto;                  /* don’t force a fixed height */
  aspect-ratio: 1 / 1;           /* square icons */
  object-fit: contain;           /* show full artwork, no crop */
  background: #fff;              /* background for rounded corners */
  border-radius: var(--radius);  /* match card radius */
  clip-path: inset(0 round var(--radius)); /* ensure visible curve */
  padding: 8px;                  /* keeps artwork off the rounded edge */
}

/* ================= Mobile & Tablet — Services dropdown redesign ============== */
/* Applies to phones and tablets only */
@media (max-width: 1279px){

  /* Menu panel */
  .nav-menu{
    background:#fff;
    border-bottom:1px solid #eee;
    padding-bottom: 14px; /* room for CTA */
  }

  /* Top-level links (“Home”, etc.) */
  .nav-menu > a{
    font-size: 1.15rem;
    font-weight: 700;
    color: #e36e2d;            /* brand-600 */
  }

  /* “Services” header row looks like a section label with a caret */
  .has-submenu{
    margin-top: 4px;
  }
  .sub-toggle{
    font-size: 1.02rem;
    font-weight: 700;
    color: #222;
    background: transparent;
    letter-spacing: .01em;
  }
  .sub-toggle::after{
    content: "▾";
    font-size: .8rem;
    margin-left: auto;
    transform: translateY(1px);
    transition: transform .18s ease;
  }
  .has-submenu.open > .sub-toggle::after{
    transform: translateY(-1px) rotate(180deg);
  }

  /* Submenu container: indented block beneath the label */
  .submenu{
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    padding: 6px 20px 2px;   /* left/right align with list */
    margin-top: -4px;
  }
  .has-submenu.open .submenu{ display: block; }

  /* Submenu links: large, brand-colored rows like in the mock */
  .submenu a{
    display: block;
    padding: 10px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-700);     /* #d7601f */
    border-radius: 10px;
  }
  .submenu a:hover,
  .submenu a:focus-visible{
    background: rgba(233,123,64,.08);
    text-decoration: none;
  }

  /* Full-width CTA at the bottom of the menu */
  .nav-menu .btn{
    width: calc(100% - 40px);  /* flush with 20px side padding */
    margin: 8px 20px 10px;
    padding: 16px 18px;
    font-size: 1.05rem;
    border-radius: 14px;
    justify-content: center;
  }

  /* Force the nav CTA to look primary even if it has .outline in HTML */
  .nav-menu .btn.outline{
    background: linear-gradient(180deg,var(--brand),var(--brand-600));
    color: #fff;
    border: none;
    box-shadow: 0 10px 22px rgba(233,123,64,.28);
  }
}

/* --- Submenu: circular toggle button (mobile + tablet + desktop) --- */

/* Hide the old caret added via ::after */
.sub-toggle::after { content: none !important; }

/* Make room for label + circular icon */
.sub-toggle.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 6px; /* slight breathing room before the circle */
  min-height: 44px;   /* thumb-friendly */
}

/* Round icon “pill” at the end of the button */
.sub-toggle .chev-icon{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--brand-700);  /* brand circle */
  color: #fff;                   /* icon (SVG) uses currentColor */
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
  flex: 0 0 36px;
}

/* Hover/focus feedback */
.has-submenu:hover .chev-icon,
.sub-toggle:focus-visible .chev-icon{
  background: var(--brand); /* a hair brighter on hover/focus */
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
}

/* Rotate the chevron when submenu is open */
.has-submenu.open .chev-icon{
  transform: rotate(180deg);
}

/* Keep label from shrinking on small screens */
.sub-toggle .label { flex: 1 1 auto; }

/* Mobile: ensure full-width tap target still looks good */
@media (max-width: 767px){
  .sub-toggle.pill{
    width: 100%;
    padding: 12px 20px;
  }
  .sub-toggle .chev-icon{ margin-left: auto; }
}

/* --- Services circular toggle: MOBILE/TABLET ONLY and only inside the dropdown --- */
@media (max-width: 1024px){
  /* Hide the tiny caret only for the pill version inside the submenu */
  .nav .has-submenu > .sub-toggle.pill::after { content: none !important; }

  .nav .has-submenu > .sub-toggle.pill{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px 20px;
    text-align: left;
    border-top: 1px solid #f6f6f6; /* matches your mobile row separators */
  }

  .nav .has-submenu > .sub-toggle.pill .label{ flex: 1 1 auto; }

  .nav .has-submenu > .sub-toggle.pill .chev-icon{
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--brand-700);
    color: #fff;                 /* SVG uses currentColor */
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
    transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
    margin-left: auto;
    flex: 0 0 36px;
  }

  .nav .has-submenu.open > .sub-toggle.pill .chev-icon{
    transform: rotate(180deg);
  }

  .nav .has-submenu > .sub-toggle.pill:focus-visible .chev-icon,
  .nav .has-submenu:hover > .sub-toggle.pill .chev-icon{
    background: var(--brand);
    box-shadow: 0 6px 14px rgba(0,0,0,.14);
  }
}
@media (max-width: 1440px){
  .nav .has-submenu > .sub-toggle.pill {
    font-size: 1.15rem;                 /* match your links */
    font-weight: 700;                /* same as links (strong) */
    color: var(--brand-600);             /* same orange as links */
  }
}
@media (min-width: 1280px) and (max-width: 1600px){
  .nav .has-submenu > .sub-toggle.pill {
    font-size: 1rem;                 /* match your links */
    font-weight: 500;                /* same as links */
    color: var(--brand-600);             /* same orange as links */
  }
}
/* Hamburger → X animation */
.nav-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
/* Packages note: span across the entire grid row */
.treat-grid .note-banner {
  grid-column: 1 / -1;
}
/* Utilities for adjusting image focus inside .treat-media */
.treat-media.nudge-up-sm img   { object-position: 50% 45%; } /* slight lift */
.treat-media.nudge-up-md img   { object-position: 50% 40%; } /* medium lift */
.treat-media.nudge-up-lg img   { object-position: 50% 25%; } /* strong lift */

.treat-media.nudge-down-sm img { object-position: 50% 55%; }
.treat-media.nudge-left-sm img { object-position: 45% 50%; }
.treat-media.nudge-right-sm img{ object-position: 55% 50%; }

/* Global chips (used on ALL pages) */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  line-height:1; white-space:nowrap;
  border:1px solid rgba(233,123,64,.28); background:rgba(233,123,64,.08);
  color:var(--brand-700); font-size:.85rem; font-weight:600;
}
.meta-row{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px }
.chip .icon{ display:inline-block; transform: translateY(1px); }
@media (max-width: 420px){
  .chip{ font-size:.85rem; padding:5px 9px; }
}
/* SERVICES: make the hero + core-services use the same “wide” container
   as our map section on the Service Area page. */
#services-hero > .container,
#house-call > .container,
#reviews > .container,
#my-footer > .container,
#core-services  > .container{
  max-width: 1280px;          /* consistent wide width */
  padding-inline: 20px;       /* same gutters as other sections */
}

/* Optional bump on very large displays, matching Service Area */
@media (min-width: 1440px){
  #services-hero > .container,
  #house-call > .container,
  #reviews > .container,
  #my-footer > .container,
  #core-services  > .container{
    max-width: 1440px;
  }
}
/* Services – lock card media ratio to prevent layout shift */
.services #core-services .card picture,
.services #core-services .card img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;   /* matches your gallery-like media */
  height:auto;
  object-fit: cover;
}
/* HOME: match Service Area/Services wide container and gutters */
#home-hero > .container,
#reviews > .container,
#helen > .container,
#richard > .container,
footer > .container {
  max-width: 1280px;      /* consistent wide width */
  padding-inline: 20px;   /* same gutters as your other aligned sections */
}

/* Optional bump on very large displays (keeps parity with Service Area/Services) */
@media (min-width: 1440px){
  #home-hero > .container,
  #reviews > .container,
  #helen > .container,
  #richard > .container,
  footer > .container {
    max-width: 1440px;
  }
}
/* HOME — lock media ratios to avoid layout shift */

/* 1) Hero media (landscape) — 16:9 works well for wide hero art */
#home-hero .hero-card picture,
#home-hero .hero-card img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;  /* swap to 16/9 if your hero art is wider */
  height:auto;
  object-fit: cover;
}
/* 2) Bio photos (Helen & Richard) */
#helen  .bio picture, #helen  .bio img,
#richard.bio picture, #richard.bio img,
#richard .bio picture, #richard .bio img{
  display:block;
  width:100%;
  aspect-ratio: 3 / 4;   /* swap to 4/3 if your images are landscape */
  height:auto;
  object-fit: cover;
}
/* PETCHECK: match the wide container & gutters used on Service Area/Services */
.petcheck .petcheck-hero > .container,
.petcheck main > .section > .container,  /* all standard sections on the page */
.petcheck main > .container,             /* loose .container blocks on the page */
.petcheck footer > .container {
  max-width: 1280px;
  padding-inline: 20px;   /* same side gutters */
}

/* Optional bump for very large displays (keeps parity with other pages) */
@media (min-width: 1440px){
  .petcheck .petcheck-hero > .container,
  .petcheck main > .section > .container,
  .petcheck main > .container,
  .petcheck footer > .container {
    max-width: 1440px;
  }
}
/* PETCHECK: keep hero image steady */
.petcheck .hero-card picture,
.petcheck .hero-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* ESSENTIALS: make hero + cards use the wide container */
#essentials-hero > .container,
#essentials > .container,
#essentials-included > .container,
#essentials-popular > .container,
#my-footer > .container{
  max-width: 1280px;     /* same width as Service Area/Services */
  padding-inline: 20px;  /* same gutters */
}

/* Optional bump on very large displays */
@media (min-width: 1440px){
  #essentials-hero > .container,
  #essentials > .container,
  #essentials-included > .container,
  #essentials-popular > .container,
  #my-footer > .container{
    max-width: 1440px;
  }
}

/* Keep card media stable even if intrinsic sizes vary */
.essential-services #essentials .card picture,
.essential-services #essentials .card img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;
  height:auto;
  object-fit: cover;
}
/* ESSENTIALS — stabilize hero + cards media (prevents layout shift) */
#essentials-hero .hero-card picture,
#essentials-hero .hero-card img,
.essential-services #essentials .card picture,
.essential-services #essentials .card img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3; /* use 16/9 for wide hero art if preferred */
  height:auto;
  object-fit: cover;   /* fill frame without distortion */
}
/* SKIN & COAT: match wide container + gutters with Services/Service Area */
.skin-coat-treatments #skin-hero > .container,
.skin-coat-treatments main > .section > .container,
.skin-coat-treatments footer > .container{
  max-width: 1280px;
  padding-inline: 20px;
}
@media (min-width: 1440px){
  .skin-coat-treatments #skin-hero > .container,
  .skin-coat-treatments main > .section > .container,
  .skin-coat-treatments footer > .container{
    max-width: 1440px;
  }
}
/* Keep hero media steady (no CLS). Skin hero art is ~3:2 (1280×853) */
#skin-hero .hero-card picture,
#skin-hero .hero-card img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;   /* matches your hero files */
  height:auto;
  object-fit: cover;
}
/* === Rates & Packages: match Service Area wide container & stable media === */

/* Wider container + consistent side gutters */
#rates-hero > .container,
#packages > .container,
#a-la-carte > .container,
#cta-section > .container,
#breed-rates > .container{
  max-width: 1280px;
  padding-inline: 20px;
}

@media (min-width: 1440px){
  #rates-hero > .container,
  #packages > .container,
  #a-la-carte > .container,
  #cta-section > .container,
  #breed-rates > .container{
    max-width: 1440px;
  }
}

/* Keep hero art stable even if source dimensions vary */
#rates-hero .hero-card picture,
#rates-hero .hero-card img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;   /* close to your 1280x993 → ~1.29; 4/3 (~1.33) works well */
  height: auto;
  object-fit: cover;
}

/* Lock package card media ratio to prevent layout shift */
#packages .treat-media picture,
#packages .treat-media img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}
/* RATES & PACKAGES (page-scoped): add space between badges and CTA */
#packages .treat-card .meta-row{
  margin-bottom: 12px;              /* give the badges row some bottom space */
}

#packages .treat-card .meta-row + .cta-row{
  margin-top: 12px;                 /* and/or push the CTA down a touch */
}

/* Optional: a hair more breathing room on phones */
@media (max-width: 767px){
  #packages .treat-card .meta-row{ margin-bottom: 16px; }
  #packages .treat-card .meta-row + .cta-row{ margin-top: 14px; }
}
/* Rates & Packages – make the card CTAs solid orange */
#packages .treat-card .cta-row .btn--primary{
  background: var(--brand, #e86a2b);
  color: #fff;
  border-color: var(--brand, #e86a2b);
}

#packages .treat-card .cta-row .btn--primary:hover{
  background: #d95f25;
  border-color: #d95f25;
}

#packages .treat-card .cta-row .btn--primary:focus-visible{
  outline: 3px solid #f7b691;
  outline-offset: 2px;
}
/* === POLICIES: match the “wide” container & gutters used elsewhere === */
.policies #policies-hero > .container,
.policies main > .section > .container,
.policies main > .container,       /* safety for any loose .container blocks */
.policies footer > .container{
  max-width: 1280px;
  padding-inline: 20px;            /* same side gutters as other pages */
}

@media (min-width: 1440px){
  .policies #policies-hero > .container,
  .policies main > .section > .container,
  .policies main > .container,
  .policies footer > .container{
    max-width: 1440px;
  }
}

/* Keep the Policies hero media steady  */
#policies-hero .hero-card picture,
#policies-hero .hero-card img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;   /* matches your gallery-like media */
  height: auto;
  object-fit: cover;
}
/* === FAQs — match wide container + gutters (like Services/Service Area) === */
#faqs-hero > .container,
#faqs > .container,
#faqs-logistics > .container,
#faqs-health > .container,
#faqs-coats > .container,
#faqs-pricing > .container,
#cta-bottom > .container,
#my-footer > .container{
  max-width: 1280px;   /* same wide width you use elsewhere */
  padding-inline: 20px;/* same gutters */
}

@media (min-width: 1440px){
  #faqs-hero > .container,
  #faqs > .container,
  #faqs-logistics > .container,
  #faqs-health > .container,
  #faqs-coats > .container,
  #faqs-pricing > .container,
  #cta-bottom > .container,
  #my-footer > .container{
    max-width: 1440px; /* optional bump for very large screens */
  }
}

/* Stabilize hero media even if source image sizes vary */
#faqs-hero .hero-card picture,
#faqs-hero .hero-card img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;
  height:auto;
  object-fit:cover;
}
/* Make details/summary clearly focusable via keyboard */
.faq-card summary{ cursor:pointer; outline:none; }
.faq-card summary:focus-visible{
  outline: 2px solid #e97b40;
  outline-offset: 2px;
}
/* FAQs – breathing room between stacked CTAs */
.faqs .section-cta .btn + .btn {
  margin-top: 12px;             /* space when buttons stack */
}

/* Optional: on wider screens, lay them out in a row with a gap */
@media (min-width: 740px){
  .faqs .section-cta{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;                   /* horizontal/vertical gap */
    align-items: center;
  }
  .faqs .section-cta .btn + .btn { margin-top: 0; }  /* gap now handled by flex */
}
/* OUR EFFORTS — match Service Area/Services wide layout */
#efforts-hero > .container,
#main > .section > .container,
#my-footer > .container {
  max-width: 1280px;    /* consistent wide width */
  padding-inline: 20px; /* same gutters */
}

/* Optional bump on very large displays (keeps parity with other pages) */
@media (min-width: 1440px){
  #efforts-hero > .container,
  #main > .section > .container,
  #my-footer > .container {
    max-width: 1440px;
  }
}

/* OUR EFFORTS — keep hero media stable even if source sizes vary */
#efforts-hero .hero-card picture,
#efforts-hero .hero-card img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;  /* use 16/9 if your hero art is wider */
  height: auto;
  object-fit: cover;    /* fills frame without distortion */
}
/* === GET A QUOTE — match “wide” pages (map/service-area width + gutters) === */
/* Desktop/tablet/phone: consistent container width with 20px side gutters. */
.get-quote #quote-hero > .container,
.get-quote #my-footer > .container{
  max-width: 1280px;
  padding-inline: 20px;
}

/* Optional: gentle bump on very large displays, same as other pages */
@media (min-width: 1440px){
  .get-quote #quote-hero > .container,
  .get-quote #my-footer > .container{
    max-width: 1440px;
  }
}

/* Keep hero media steady even if intrinsic sizes vary */
.get-quote #quote-hero .hero-card picture,
.get-quote #quote-hero .hero-card img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;     /* use 16/9 if your hero art is wider */
  height: auto;
  object-fit: cover;
}
#quote-form .toast .icon{ font-size: 1.1rem; }
#quote-form .toast .toast-close{
  margin-left: auto; background: none; border: 0; color: inherit;
  font-size: 1.2rem; cursor: pointer; line-height: 1;
}

/* Subtle “confirmation glow” on the card so the eye goes there */
.quote-card.glow{
  box-shadow: 0 0 0 4px rgba(16,185,129,.18), 0 8px 24px rgba(0,0,0,.12);
  transition: box-shadow .25s ease;
}
/* GET-A-QUOTE — toasts are fixed to the viewport bottom */
.get-quote .toast {
  position: fixed;
  left: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  bottom: 16px;
  z-index: 1000;
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.get-quote .toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Loading state for the submit button */
.get-quote #submitBtn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.get-quote #submitBtn.is-loading::after {
  content: "Sending…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
}
/* Base hidden state (already in your sheet – keep it) */
.toast{
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

/* Show state (already present – keep it) */
.toast.show{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Get-a-Quote: fixed confirmation toasts pinned to bottom center */
.get-a-quote .toast{
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  max-width: min(680px, 90vw);
  pointer-events: auto;
}
.get-a-quote .toast.show{
  transform: translateX(-50%) translateY(0);
}
/* Quote form: prominent loading state + subtle success glow */
.get-quote #submitBtn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .9; /* slight dim while sending */
}
.get-quote #submitBtn.is-loading::after{
  content: "Sending…";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 800;
  background: rgba(255,255,255,.08);
  border-radius: inherit;
}

.get-quote .quote-card.glow{
  box-shadow: 0 10px 30px rgba(233,123,64,.20), 0 0 0 4px var(--ring);
  transition: box-shadow .2s ease;
}
/* Hide original button label while the ::after "Sending…" is shown */
.get-quote #submitBtn.is-loading { color: transparent; }

/* BRAND TOASTS — Bow Tie look & feel (works with your existing .show logic) */

.get-quote .toast{
  /* layout */
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  border-radius:16px;

  /* brand-y card */
  border:1px solid rgba(233,123,64,.28);                    /* brand orange outline */
  background:#fff7f0;                                       /* soft brand-ivory base */
  box-shadow: 0 10px 28px rgba(233,123,64,.14), 0 1px 0 #fff;
  color:#7a3413;                                            /* warm readable brown/orange */
  font-weight:600;
}

.get-quote .toast .icon{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background: rgba(233,123,64,.10);                         /* faint brand tint behind icon */
  font-size:18px; line-height:1;
}

.get-quote .toast .text{ flex:1; line-height:1.35; }

.get-quote .toast .toast-close{
  appearance:none; border:0; background:transparent;
  font-size:22px; line-height:1; margin-left:8px;
  color: var(--brand-700, #c65d2a);
  padding:2px 6px; border-radius:10px;
}
.get-quote .toast .toast-close:hover{ background: rgba(233,123,64,.08); }

/* Error variant keeps semantics but still fits the system */
.get-quote .toast.error{
  background:#fff5f6;                                      /* soft red-rose */
  border-color:#f9c5cc;
  color:#5d1d1f;
}
.get-quote .toast.error .icon{ background:rgba(220,38,38,.08); }

/* Small screens: slightly tighter paddings/radius */
@media (max-width:480px){
  .get-quote .toast{ padding:12px 14px; border-radius:14px; }
}

/* === Header: fixed + active link highlight ============================== */
/* Keep header always available */
.nav{
  position: fixed;            /* override previous sticky */
  top: 0; left: 0; right: 0;
  z-index: 1000;              /* above page content */
  width: 100%;
  /* optional: a subtle shadow to separate content as you scroll */
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* Offset page content once JS measures header height */
body.has-fixed-header{
  padding-top: var(--header-h, 64px); /* fallback = ~64px */
}

/* Active link styles (keep underline/color only) */
.nav a[aria-current="page"],
.nav a.active,
.submenu a[aria-current="page"],
.sub-toggle[aria-current="page"]{
  font-weight: 800;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Kill the chip outline on the Services toggle */
.sub-toggle[aria-current="page"]{
  outline: none;         /* remove the rounded outline */
  border-radius: 0;      /* (optional) reset any rounding here */
}

/* Scale Helen/Richard portraits only on tablet and up for tighter vertical rhythm*/
@media (min-width: 768px){
  .bio img{
    max-width: 80%;        /* adjust to taste, e.g. 80% or 70% */
    margin-inline: auto;   /* center within the grid cell */
  }
}

/* Services chevron — smaller, lighter circle (no “buttony” corners) for reduced prominence*/
.sub-toggle .chev-icon{
  width: 30px;     /* down from 36px */
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;              /* stays a circle */
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
}

/* Slightly smaller on phones */
@media (max-width: 767px){
  .sub-toggle .chev-icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
}

/* Ensure strong contrast for CTA inside the mobile menu */
.nav-menu .btn{
  color: #fff !important;               /* pin white text */
  text-shadow: 0 1px 0 rgba(0,0,0,.12); /* tiny lift on bright orange */
  opacity: 1 !important;                /* never dimmed in menu */
}

/* If the menu ever adds a global opacity, protect children */
.nav-menu{ isolation: isolate; }

/* === Smart header: phones + tablets (≤1279px) === */
@media (max-width: 1279px){
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: transform .3s ease;
  }
  .nav.is-hidden{ transform: translateY(-100%); }

  /* Reserve space so content doesn't jump under fixed header */
  body.has-smart-header{ padding-top: var(--header-h, 64px); }
}
/* ===========================================================
   Mobile + Tablet header: pin hamburger & show X on open
   =========================================================== */
@media (max-width: 1279px){
  /* Ensure header is a fixed bar with a known height */
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: transform .3s ease;
  }
  .nav-inner{
    position: relative;
    height: 56px;                 /* keep the bar a fixed height */
    padding: 8px 16px;
    align-items: center;
  }

  /* Brand centered; toggle pinned to top-right of the bar */
  .brand{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .nav-toggle{
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;                /* above the slide-down menu */
  }

  /* Slide-down panel sits BELOW the fixed header */
  .nav-menu{
    position: fixed;
    left: 0; right: 0;
    top: var(--header-h, 56px);
    background: #fff;
    border-bottom: 1px solid #eee;
    display: none;
    flex-direction: column; gap: 0;
    z-index: 1050;                /* under the toggle */
  }
  .nav-menu.open{ display: flex; }
  .nav-menu > a{ padding: 12px 20px; border-top: 1px solid #f6f6f6; width: 100%; }

  /* Submenu behaves like an accordion */
  .has-submenu{ width: 100%; }
  .sub-toggle{
    width: 100%; text-align: left; padding: 12px 20px; border-top: 1px solid #f6f6f6;
  }
  .submenu{ position: static; display: none; border: 0; box-shadow: none; padding: 0 20px 10px; }
  .has-submenu.open .submenu{ display: block; }

  /* Morph the hamburger to an X when aria-expanded="true" */
  .nav-toggle .bar{                    /* your three lines */
    display: block; width: 22px; height: 2px; margin: 4px 0;
    background: currentColor; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}
/* === Pin hamburger to top-right on mobile & tablet (≤1279px) === */
@media (max-width: 1279px){
  .nav{ position: fixed; top:0; left:0; right:0; z-index:1000; }
  .nav-inner{ position: relative; height:56px; padding:8px 16px; align-items:center; }

  /* The important part: lock the toggle to the bar’s top-right */
  .nav .nav-toggle{
    display:block !important;
    position:absolute !important;
    right:16px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
    z-index:1100 !important; /* above the drop panel */
  }

  /* Drop panel sits UNDER the fixed header and never affects the toggle */
  .nav-menu{
    position:fixed !important;
    left:0; right:0;
    top:var(--header-h,56px);
    z-index:1050;
  }
}
/* Desktop (≥1280px): header behaves like sticky and no reserved padding */
@media (min-width:1280px){
  .nav{ position: sticky; top: 0; }
  body.has-smart-header,
  body.has-fixed-header{ padding-top: 0; } /* be forgiving of either class name */
}

/* Phones + Tablets (≤1279px): fixed header with reserved space */
@media (max-width:1279px){
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: transform .3s ease;
  }
  .nav.is-hidden{ transform: translateY(-100%); }
  body.has-smart-header,
  body.has-fixed-header{ padding-top: var(--header-h, 64px); }
}
/* === Smart header on DESKTOP (≥1280px) ====================== */
@media (min-width: 1280px){
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: transform .3s ease; /* needed for slide-away */
  }
  /* same slide-up class we already use on mobile/tablet */
  .nav.is-hidden{ transform: translateY(-100%); }

  /* reserve space so content never sits under the fixed bar */
  body.has-smart-header{ padding-top: var(--header-h, 72px); }
}
/* Hamburger stays keyboard-visible */
.nav-toggle:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:10px;
}

/* Services toggle: ultra-minimal focus (no “chip”) */
.sub-toggle:focus-visible{
  outline: none;                    /* kill the big rounded ring */
}
.sub-toggle:focus-visible .label{
  text-decoration: underline;       /* keyboard hint without a box */
  text-underline-offset: 3px;
}

/* ===========================================================
   Normalize chevron + hamburger/X alignment
   =========================================================== */
/* ---------------- Mobile & Tablet header/nav polish ---------------- */
@media (max-width: 1279px){

  /* Keep the header fixed and clean (no extra hairline) */
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    border-bottom: 0;                /* kill header bottom line */
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
  }
  .nav-inner{ height:56px; padding:8px 16px; }

  /* Slide-down panel sits directly under header with no extra line */
  .nav-menu{
    position: fixed;
    top: var(--header-h, 56px);
    left: 0; right: 0;
    border-top: 0;                   /* remove top hairline to avoid double-line */
  }

  /* Hamburger/X pinned and centered in the bar */
  .nav-toggle{
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Services row becomes a positioning context for its chevron */
  .has-submenu > .sub-toggle{
    position: relative;
    padding-right: 56px;             /* room for 28–32px chevron + breathing space */
  }

  /* Chevron pinned to the same right/top as the X for perfect alignment */
  .has-submenu > .sub-toggle .chev-icon{
    position: absolute;
    right: 16px;                     /* match .nav-toggle right value */
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;       /* keep your smaller circle */
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;
  }
}

/* Use only the inline chevron; remove any legacy pseudo-caret */
.sub-toggle::after{ content:none !important; }

/* Make the Services toggle look like a link (button element) */
.nav .sub-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  color:var(--brand-700, #c85a2b); /* match your link color */
  cursor:pointer;
}
.sub-toggle .label{ color:inherit; }

/* Chevron capsule */
.sub-toggle .chev-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px; flex:0 0 30px;
  border-radius:999px;
  box-shadow:0 3px 8px rgba(0,0,0,.10);
}

/* Slightly smaller on phones */
@media (max-width:767px){
  .sub-toggle .chev-icon{ width:28px; height:28px; flex-basis:28px; }
}

/* Chevron: smooth rotate */
.sub-toggle .chev-svg{
  transition:transform .18s ease;
  transform-origin:50% 50%;
}

/* Mobile/Tablet (≤1279px): flip when wrapper gets .open via JS */
.has-submenu.open .sub-toggle .chev-svg{ transform:rotate(180deg); }

/* Desktop (≥1280px): flip on hover/focus-within */
@media (min-width:1280px){
  .has-submenu:hover .sub-toggle .chev-svg,
  .has-submenu:focus-within .sub-toggle .chev-svg{
    transform:rotate(180deg);
  }
}

/* Desktop: hamburger stays hidden */
.nav-toggle{ display:none; }

/* ================================
   Footer quick links — current page
   ================================ */
.footer .quick-links a[aria-current="page"],
.footer .quick-links a.active{
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  font-weight:700;
}

/* ================================
   Rates grid — robust alignment
   ================================ */
.rate-line{
  display:flex;
  align-items:center;            /* center keeps price aligned */
  justify-content:space-between; /* pushes price to the right edge */
  gap:16px;
}
.rate-line .text{
  flex:1 1 auto;                 /* left column grows/wraps */
  min-width:0;                   /* prevents overflow when long */
  display:flex;
  flex-direction:column;         /* item above desc */
}
.rate-line .item{
  font-weight:700;
  line-height:1.25;
}
.rate-line .desc{
  margin-top:2px;
  color:var(--muted-700, #5b6770);
}
.rate-line .price{
  flex:0 0 auto;                 /* fixed to the right */
  white-space:nowrap;            /* avoids breaking e.g., $19.95–$39.95 */
  font-weight:800;
  margin-left:16px;
  text-align:right;
}
.footer-bottom {
  text-align: center;
  padding: 0.75em 0;
  background-color: #fafafa; /* subtle backdrop */
}

.footer-bottom small {
  font-size: 0.8rem;         /* scaled down, similar to .sub (≈65%) */
  color: #666;               /* medium gray */
  font-weight: 400;
  display: block;
  letter-spacing: 0.05em;    /* matches .sub’s polish */
  text-transform: none; /* optional: ties into heading subtext */
  margin-top: 0.25em;
}

.footer-bottom #year {
  font-weight: 400;          /* normal weight */
  color: #666;              /* medium gray */
}
/* NAV: Hamburger color + iOS tap highlight fix */
.nav-toggle {
  color: var(--ink);                 /* pins bar color (bars use currentColor) */
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* removes blue flash on tap */
}

.nav-toggle .bar {
  background-color: currentColor;    /* ensure bars follow .nav-toggle color */
}

.nav-toggle.open {
  color: var(--brand-700);           /* optional: brand color when open (X) */
}

/* Ensure Services toggle aligns with other nav items on mobile/tablet */
@media (max-width: 1024px) {
  .nav .has-submenu > .sub-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px 20px;   /* same left/right padding as nav links */
    font-size: 1rem;      /* match link text size */
    font-weight: 600;     /* slight emphasis */
    text-align: left;
    border-top: 1px solid #f6f6f6;
  }

  .nav .has-submenu > .sub-toggle .label {
    flex: 1 1 auto;
  }
}
/* put near your nav styles */
:root { --nav-item-size: 1.125rem; }  /* match your link size */

@media (max-width: 1024px){
  /* make links and the Services toggle share the same size */
  .nav .menu > li > a,
  .nav .has-submenu > .sub-toggle {
    font-size: 1.125rem;   /* already set for size match */
    font-weight: 700;      /* match link boldness */
    line-height: 1.2;
  }

  /* ensure the text span inside the button doesn’t override it */
  .nav .has-submenu > .sub-toggle .label {
    font: inherit;
  }
}
/* Mobile/tablet submenu alignment */
@media (max-width: 1024px) {
  .nav .submenu a {
    font-size: 0.95rem;     /* slightly smaller than top-level links */
    font-weight: 500;       /* lighter than parent for hierarchy */
    padding: 10px 32px;     /* extra left indent for visual nesting */
    line-height: 1.4;
    display: block;
  }
}
/* Current-page highlight (works for top-level + submenu links) */
.nav a[aria-current="page"] {
  font-weight: 700;               /* bold like your main items */
  color: var(--brand-700);        /* brand orange */
}

/* Optional: a subtle background for the active submenu item */
@media (max-width: 1024px){
  .nav .submenu a[aria-current="page"] {
    background: rgba(255, 122, 0, 0.06);  /* very light brand tint */
    border-radius: 10px;
  }
}

/* ===== GET STARTED PAGE STYLES ===== */

/* ===== PROMO BANNER ===== */
.promo-banner {
  background: linear-gradient(135deg, #fff7ef 0%, #ffe8d6 100%);
  border-bottom: 1px solid rgba(233,123,64,.25);
  padding: 12px 0;
  text-align: center;
}

.promo-banner .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo-text {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}

.promo-text strong {
  color: var(--brand-700);
  font-weight: 800;
}

@media (max-width: 767px) {
  .promo-banner {
    padding: 10px 0;
  }
  .promo-text {
    font-size: .9rem;
  }
}

/* Match home page hero spacing */
#get-started-hero {
  padding: 40px 0; /* Match index.html hero padding */
}

#get-started-hero .container {
  max-width: 1280px;
  padding-inline: 20px;
}

@media (min-width: 1440px) {
  #get-started-hero .container {
    max-width: 1440px;
  }
}

/* Hero content & aside layout */
.hero-content { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
}
.hero-aside { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
}

/* Quick book card */
.quick-book-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

/* Service area tag */
.service-area-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(233,123,64,.08);
  border: 1px solid rgba(233,123,64,.25);
  border-radius: 10px;
  font-size: .95rem;
  margin-bottom: 14px;
}
.service-area-tag .locations {
  color: var(--muted);
  font-weight: 600;
}

/* Benefit list */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.benefit-list li {
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
  color: var(--muted);
}
.benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-700);
  font-weight: 900;
}

/* Trust row */
.trust-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 18px; /* Add bottom margin to match spacing before CTAs */
}

/* Badge pill */
.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e9eef6;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--muted);
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.feature-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.feature-card h3 {
  margin: 8px 0;
  font-size: 1.1rem;
}
.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* Steps grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.step-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
  margin-bottom: 10px;
}
.step-card h3 {
  margin: 8px 0;
  font-size: 1.1rem;
}
.step-card p {
  margin: 0;
  color: var(--muted);
}

/* Reviews grid - match home page */
.get-started .reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px; /* Match spacing from home */
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.team-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.team-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.team-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}
.team-card li {
  margin: 6px 0;
}

/* Contact row */
.contact-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  justify-content: center;
}
.contact-link {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: none;
}
.contact-link:hover {
  text-decoration: underline;
}

/* FAQ items */
.faq-item {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-body {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.5;
}

/* Alt section background */
.section.alt {
  background: #fff7f1;
}

/* Get Started page: match home page section spacing exactly */
.get-started .section {
  padding: 28px 0; /* Match default .section padding from home */
}

/* Responsive adjustments */
@media (max-width: 1279px) {
  #get-started-hero .hero-inner {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .get-started .reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .features-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .trust-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px; /* Less on mobile */
  }
  .contact-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* === GET STARTED: Promo banner above fixed nav === */
.get-started .promo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* above the nav */
  margin: 0;
}

/* Adjust nav to sit below promo banner */
.get-started .nav {
  top: 44px; /* height of promo banner */
}

/* Adjust body padding to account for both promo + nav */
.get-started.has-smart-header,
.get-started.has-fixed-header {
  padding-top: calc(var(--header-h, 64px) + 44px); /* nav height + promo height */
}

/* Tighten hero top padding since we have the promo banner */
.get-started #get-started-hero {
  padding-top: 20px; /* reduced from 40px */
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .get-started .promo-banner {
    top: 0;
  }
  .get-started .nav {
    top: 40px; /* slightly shorter promo on mobile */
  }
  .get-started.has-smart-header,
  .get-started.has-fixed-header {
    padding-top: calc(var(--header-h, 56px) + 40px);
  }
  .get-started #get-started-hero {
    padding-top: 16px;
  }
}
/* === GET STARTED: Kicker auto-width (not full-width) === */
.get-started .kicker {
  display: inline-block;
  width: auto;
  max-width: fit-content; /* only as wide as the text needs */
}

/* === GET STARTED: Push hero image down to show white border === */
.get-started .hero-aside {
  margin-top: 20px; /* creates space above the image card */
}

/* Alternative: add padding to top of hero-card itself */
.get-started .hero-card {
  margin-top: 12px; /* additional breathing room */
}

/* Mobile: adjust spacing */
@media (max-width: 767px) {
  .get-started .hero-aside {
    margin-top: 16px;
  }
  .get-started .hero-card {
    margin-top: 8px;
  }
}
/* === GET STARTED: Minimal conversion-focused nav === */
.get-started .nav-toggle,
.get-started .nav-menu > a:not(.btn),
.get-started .has-submenu {
  display: none !important; /* hide hamburger, links, and Services dropdown */
}

/* Desktop: logo left, phone + CTA right */
@media (min-width: 768px) {
  .get-started .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
  }
  
  .get-started .brand {
    width: auto;
    text-align: left;
    justify-content: flex-start;
  }
  
  .get-started .nav-menu {
    display: flex !important; /* override the hidden state */
    position: static;
    background: transparent;
    border: 0;
    flex-direction: row;
    gap: 16px;
    align-items: center;
  }
  
  /* Phone number styled like a link */
  .get-started .nav-menu::before {
    content: "📞 (469) 636-5549";
    font-weight: 600;
    color: var(--brand-700);
    font-size: .95rem;
    white-space: nowrap;
  }
}

/* Mobile: stack logo, then phone + CTA in a row */
@media (max-width: 767px) {
  .get-started .nav-inner {
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px;
  }
  
  .get-started .brand {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  
  .get-started .nav-menu {
    display: flex !important;
    position: static;
    background: transparent;
    border: 0;
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
  
  /* Phone number before CTA */
  .get-started .nav-menu::before {
    content: "📞";
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(233,123,64,.4);
    border-radius: 12px;
    color: var(--brand-700);
  }
  
  .get-started .nav-menu .btn {
    width: auto;
    margin: 0;
    padding: 10px 16px;
    font-size: .95rem;
  }
}
/* === GET STARTED: Remove redundant CTAs === */

/* Remove CTA from "How It Works" section (too early in journey) */
#how-it-works .section-cta {
  display: none;
}

/* Remove CTA from Service Area band (already has contact info right below) */
#neighborhood .section-cta {
  display: none;
}

/* Keep CTAs after Packages (in cards), Testimonials, and FAQ if present */
/* No changes needed - these remain visible */

/* === GET STARTED: Bottom-fixed mobile CTA (replaces top nav CTA on mobile) === */

/* Mobile only: hide the nav CTA and phone pseudo-element */
@media (max-width: 767px) {
  .get-started .nav-menu {
    display: none !important; /* hide the phone icon + CTA from nav */
  }
  
  /* Create fixed bottom CTA bar */
  .get-started #get-started-hero .quick-book-card .cta-row {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border-top: 1px solid #e9eef6;
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
    padding: 12px 20px;
    margin: 0;
    display: flex;
    flex-direction: row; /* side by side */
    gap: 10px;
    align-items: center;
  }
  
  /* Make buttons equally sized and compact */
  .get-started #get-started-hero .quick-book-card .cta-row .btn {
    flex: 1 1 50%;
    padding: 14px 12px;
    font-size: .95rem;
    margin: 0;
    white-space: nowrap;
    justify-content: center;
  }
  
  /* Add bottom padding to page content so CTA doesn't cover it */
  .get-started main {
    padding-bottom: 80px; /* space for fixed CTA bar */
  }
}

/* Tablet: show nav CTA normally, no bottom bar */
@media (min-width: 768px) and (max-width: 1279px) {
  .get-started #get-started-hero .quick-book-card .cta-row {
    position: static; /* normal flow */
  }
}
/* === GET STARTED: Remove redundant CTAs === */
#how-it-works .section-cta,
#neighborhood .section-cta {
  display: none;
}

/* === GET STARTED: Bottom bar with phone + CTA (mobile only) === */
.mobile-cta-fixed,
.mobile-phone-fixed {
  display: none; /* hidden by default */
}

@media (max-width: 767px) {
  /* Container for both buttons */
  .get-started body::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: #fff;
    border-top: 1px solid #e9eef6;
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
    z-index: 998;
  }
  
  /* Phone button (left side) */
  .get-started .mobile-phone-fixed {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 16px;
    left: 20px;
    z-index: 999;
    width: 56px;
    height: 56px;
    padding: 0;
    background: #fff;
    color: var(--brand-700);
    border: 1px solid rgba(233,123,64,.4);
    border-radius: 12px;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  
  /* CTA button (right side) */
  .get-started .mobile-cta-fixed {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 16px;
    left: 88px; /* phone width + gap */
    right: 20px;
    z-index: 999;
    padding: 16px;
    background: linear-gradient(180deg, var(--brand), var(--brand-600));
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(233,123,64,.35);
  }
  
  .get-started .mobile-cta-fixed:hover {
    box-shadow: 0 6px 20px rgba(233,123,64,.45);
  }
  
  /* Hide nav on mobile */
  .get-started .nav-menu {
    display: none !important;
  }
  
  /* Hide hero CTAs */
  .get-started #get-started-hero .quick-book-card .cta-row {
    display: none;
  }
  
  /* Add bottom padding for content */
  .get-started main {
    padding-bottom: 96px;
  }
}
@media (max-width: 767px) {
  /* Hide the first CTA in hero, keep "How It Works" */
  .get-started .hero-content .cta-row .btn:first-child {
    display: none;
  }
}
/* === GET STARTED: Mobile layout - text, van image, service card === */
@media (max-width: 767px) {
  .get-started .hero-inner {
    display: flex;
    flex-direction: column;
  }
  
  /* Hero text content first */
  .get-started .hero-content {
    order: 1;
    margin-bottom: 20px;
  }
  
  /* Van image second */
  .get-started .hero-card {
    order: 2;
    margin: 0 auto 20px;
    max-width: 767px;
  }
  
  /* Service area card third */
  .get-started .quick-book-card {
    order: 3;
  }
  
  /* Override hero-aside since we're ordering its children individually */
  .get-started .hero-aside {
    display: contents; /* allows children to participate in parent flex layout */
  }
}
/* === GET STARTED: Mobile - add more top padding to clear fixed headers === */
@media (max-width: 767px) {
  .get-started #get-started-hero {
    padding-top: 80px; /* was 16px - add more space to clear promo + nav */
  }
  /* Alternative: add top margin to hero content itself */
  .get-started .hero-content {
    margin-top: 10px; /* extra breathing room from top */
  }  
}
/* === GET STARTED: Desktop - push hero image down to show white border === */
@media (min-width: 768px) {
  .get-started .hero-card {
    margin-top: 40px; /* creates breathing room and shows the white border */
  }
}

/* Optional: even more space on very large screens */
@media (min-width: 1280px) {
  .get-started .hero-card {
    margin-top: 60px; /* extra space on desktop */
  }
}
/* GET STARTED: Pull hero text closer to nav (desktop only) */
@media (min-width: 1280px){
  .get-started .hero-content {
    align-self: start;
    margin-top: 80px;
  }
  .get-started .hero-aside {
    align-self: center;
  }
}
/* Refine feature icons for custom badge artwork */
.feature-icon {
  margin-bottom: 10px; /* tighter than current 12px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-icon img {
  width: 64px;   /* down from 80px */
  height: 64px;
  display: block;
}

/* Tighten card headline */
.feature-card h3 {
  margin: 6px 0;  /* reduce top margin */
  font-size: 1.05rem; /* slightly smaller */
  line-height: 1.25;
}

/* Give description a bit more breathing room */
.feature-card p {
  line-height: 1.45; /* was likely 1.5, slightly tighter */
}
/* Van badge in quick-book card */
.van-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.van-badge img {
  width: 120px;
  height: 120px;
  display: block;
}

/* Step cards: number + headline inline */
.step-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: .9rem;
  flex: 0 0 32px;
  margin: 0;
}

.step-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 calc(100% - 44px);  /* takes remaining space on same row */
  align-self: center;  /* vertically centers with the number */
}

.step-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  flex: 1 1 100%;  /* forces paragraph to new row, full width */
  margin-top: -4px;  /* pulls it up slightly closer to headline */
}
/* Exit Intent Popup */
.exit-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.exit-popup.show {
  display: block;
  opacity: 1;
}

.exit-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}

.exit-popup-content {
  position: relative;
  max-width: 480px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: slideDown .3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.exit-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 32px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .2s;
}

.exit-popup-close:hover {
  background: rgba(0,0,0,.05);
  color: #666;
}

.exit-popup-body {
  padding: 48px 32px 32px;
  text-align: center;
}

.exit-popup-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.exit-popup-body h2 {
  margin: 0 0 12px;
  font-size: 1.75rem;
  color: var(--ink);
}

.exit-popup-body p {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--ink);
}

.exit-popup-sub {
  font-size: .95rem !important;
  color: var(--muted) !important;
  margin-bottom: 24px !important;
}

.exit-popup-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.exit-popup-actions .btn {
  min-width: 160px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .exit-popup-content {
    margin: 20px;
    max-width: calc(100% - 40px);
  }
  .exit-popup-body {
    padding: 40px 24px 24px;
  }
  .exit-popup-actions {
    flex-direction: column;
  }
  .exit-popup-actions .btn {
    width: 100%;
  }
}
/* Team photos */
.team-photo {
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.team-photo picture,
.team-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;  /* square photos */
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Optional: circular photos instead of square */
.team-photo.circle {
  border-radius: 50%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.team-photo {
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border: 1px solid #f1f1f1;
}
/* ===== PETCHECK PAGE FIXES ===== */

/* Fix kicker visibility and spacing */
.petcheck .kicker {
  margin-top: 12px;           /* push away from header */
  margin-bottom: 14px;        /* more breathing room below */
  background: rgba(233,123,64,.12); /* slightly more visible */
  border: 1px solid rgba(233,123,64,.25); /* stronger border */
  font-weight: 700;           /* bolder text */
  color: var(--brand-700);    /* darker orange for contrast */
}

/* Fix cream-frame to show white border at top */
.petcheck .hero-card.cream-frame {
  padding: 20px;              /* increase padding to show more white */
  background: #fff;           /* ensure white background */
}

.petcheck .hero-card.cream-frame .media-frame {
  background: var(--hero-cream, #fff7f1);
  border-radius: 16px;
  padding: 16px;              /* consistent padding inside */
  border: 1px solid rgba(0,0,0,.03); /* subtle inner edge */
}

/* Ensure image doesn't overflow and shows full frame */
.petcheck .hero-card.cream-frame .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Add more top padding to hero on PetCheck to clear fixed header */
.petcheck .petcheck-hero {
  padding-top: 60px;          /* more space at top */
}

/* Mobile: extra clearance */
@media (max-width: 767px) {
  .petcheck .petcheck-hero {
    padding-top: 24px;
  }
  
  .petcheck .kicker {
    margin-top: 8px;
  }
}
/* ===== PETCHECK: Match get-started step styling ===== */

/* Update steps container to match get-started grid */
.petcheck .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* Style step cards with flex layout for number + heading inline */
.petcheck .step {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* Add circular orange number badge */
.petcheck .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: .9rem;
  flex: 0 0 32px;
  margin: 0;
}

/* Headline sits next to number on same row */
.petcheck .step h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 calc(100% - 44px);
  align-self: center;
}

/* Description on its own row below */
.petcheck .step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  flex: 1 1 100%;
  margin-top: -4px;
}

/* Tablet: 2 columns */
@media (max-width: 1279px) {
  .petcheck .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: single column */
@media (max-width: 767px) {
  .petcheck .steps {
    grid-template-columns: 1fr;
  }
}
#a-la-carte .rate-card h3 {
  color: var(--brand-700);           /* brand orange */
  font-weight: 800;                  /* strong but not shouting */
  font-size: 1.15rem;                /* slightly larger */
  margin-top: 20px;                  /* breathing room */
  margin-bottom: 12px;
  letter-spacing: .02em;             /* subtle polish */
  text-transform: uppercase;         /* optional: matches brochure */
  font-size: 1rem;                   /* if using uppercase, go smaller */
}

/* First heading in each column: no top margin */
#a-la-carte .rate-card h3:first-of-type {
  margin-top: 0;
}

/* Get Started: Step cards with inline number + heading */
.get-started .step-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.get-started .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: .9rem;
  flex: 0 0 32px;
  margin: 0;
}

.get-started .step-card h3 {
  margin: 0 !important;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 calc(100% - 44px);  /* take remaining space after number + gap */
  align-self: flex-start;        /* align to top for multi-line headings */
  /* removed white-space: nowrap to allow natural wrapping */
}

.get-started .step-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  flex: 1 1 100%;
  margin-top: -4px;
}
/* ===== SKIN & COAT TREATMENTS: Match get-started/petcheck step styling ===== */

/* Style step cards with flex layout for number + heading inline */
.skin-coat-treatments .step {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* Circular orange number badge */
.skin-coat-treatments .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: .9rem;
  flex: 0 0 32px;
  margin: 0;
}

/* Headline sits next to number on same row */
.skin-coat-treatments .step h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 calc(100% - 44px);
  align-self: center;
}

/* Description on its own row below */
.skin-coat-treatments .step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  flex: 1 1 100%;
  margin-top: -4px;
}
.neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.neighborhood-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.neighborhood-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.neighborhood-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--brand-700);
}

.neighborhood-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
/* Remove the old two-column area-grid */
.area-grid { 
  display: block; /* override the grid */
}

/* Service info bar: horizontal layout on desktop */
.service-info-bar {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto; /* cities | zips (wider) | CTA */
  gap: 32px;
  align-items: start;
  margin-top: 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.service-info-bar h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: var(--brand-700);
}

.service-info-bar .petcheck-points {
  gap: 8px;
  font-size: 1rem;  
}

.cta-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-column .btn {
  white-space: nowrap;
  padding: 14px 24px;
}

/* Tablet: stack in 2 columns, CTA full width below */
@media (max-width: 1279px) {
  .service-info-bar {
    grid-template-columns: 1fr 1fr;
  }
  
  .cta-column {
    grid-column: 1 / -1;
    margin-top: 12px;
  }
  
  .cta-column .btn {
    width: 100%;
  }
}

/* Mobile: single column */
@media (max-width: 767px) {
  .service-info-bar {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
}
.map-figure { 
  margin-bottom: 16px; /* was probably 24px or more */
}

.note-banner { 
  margin-top: 0; 
}

/* Neighborhoods: override the global section + section rule */
.section .neighborhood-grid + .section-cta {
  margin-top: 10px !important;  /* match global rule specificity + !important to guarantee win */
}

/* Extra space on mobile */
@media (max-width: 767px) {
  .section .neighborhood-grid + .section-cta {
    margin-top: 20px !important;
  }
}

/* ===== HEALTH-FIRST (Our Efforts): Match get-started/petcheck step styling ===== */

/* Update steps container */
.health-first .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* Style step cards with flex layout for number + heading inline */
.health-first .step {
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.04) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* Circular orange number badge */
.health-first .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: .9rem;
  flex: 0 0 32px;
  margin: 0;
}

/* Headline sits next to number on same row */
.health-first .step h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  flex: 1 1 calc(100% - 44px) !important;
  align-self: center !important;
}

/* Description on its own row below */
.health-first .step p {
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
  flex: 1 1 100% !important;
  margin-top: -4px !important;
}

/* Tablet: 2 columns */
@media (max-width: 1279px) {
  .health-first .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: single column */
@media (max-width: 767px) {
  .health-first .steps {
    grid-template-columns: 1fr;
  }
}

/* Policy category headers (span both columns) */
.policy-category {
  grid-column: 1 / -1;  /* spans both columns */
  margin-top: 32px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(233,123,64,.15);
}

.policy-category:first-child {
  margin-top: 0;  /* no extra space above first category */
}

.policy-category h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-700);
  letter-spacing: .02em;
}

/* Mobile: single column, category headers still full-width */
@media (max-width: 1279px) {
  .policy-category h3 {
    font-size: 1.1rem;
  }
}
/* Policies page: white background for the policy grid section */
#policies-grid-section {
  background: #fff;
  padding: 40px 0;  /* adjust padding as needed */
}

/* Optional: add subtle top border or shadow for separation */
#policies-grid-section {
  background: #fff;
  padding: 40px 0;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 -2px 8px rgba(0,0,0,.02);
}

.policies .section h2 {
  margin-bottom: 30px;  /* custom spacing for Policies page */
}
/* FAQs: brand orange section headings */
.faqs .section h2 {
  color: var(--brand-700);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 20px;  /* bit more breathing room */
}

/* HOME: tighten gap between "Meet Your Groomers" header and Helen bio */
#helen {
  padding-top: 0px;  /* was 28px via .section default */
}

/* PETCHECK: Update the PetCheck kicker spacing to match Services page */
.petcheck .kicker {
  margin-top: 0;              /* remove the 12px that's crowding it */
  margin-bottom: 0px;
  background: rgba(233,123,64,.12);
  border: 1px solid rgba(233,123,64,.25);
  font-weight: 700;
  color: var(--brand-700);
}

/* Reduce hero top padding since we removed kicker margin */
.petcheck .petcheck-hero {
  padding-top: 0px;          /* match Services page 40px padding */
}

/* Mobile: match Services mobile spacing */
@media (max-width: 767px) {
  .petcheck .petcheck-hero {
    padding-top: 4px;        /* match Services mobile padding */
  }
  
  .petcheck .kicker {
    margin-top: 0;            /* keep it at 0 on mobile too */
  }
}

/* GET-STARTED: Mobile adjustments */
@media (max-width: 767px) {
  .get-started .promo-banner {
    top: 0;
    padding: 8px 12px; /* Add horizontal padding for better wrapping */
  }
  
  .get-started .nav {
    top: 52px; /* Increase from 40px to account for wrapped text */
  }
  
  .get-started.has-smart-header,
  .get-started.has-fixed-header {
    padding-top: calc(var(--header-h, 56px) + 52px); /* Update to match */
  }
  
  .get-started #get-started-hero {
    padding-top: 16px;
  }
  
  /* Make promo text even smaller on very small screens */
  .promo-text {
    font-size: .85rem; /* Down from .9rem */
    line-height: 1.3;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .get-started .nav {
    top: 60px; /* Even more space for very small screens where text wraps more */
  }
  
  .get-started.has-smart-header,
  .get-started.has-fixed-header {
    padding-top: calc(var(--header-h, 56px) + 60px);
  }
}

/* HOME: RICHARD Mentor Banner */
.mentor-banner {
  margin-top: 24px;
  padding: 16px 20px;
  background: #fffaf5; /* soft cream */
  border: 1px solid rgba(233,123,64,.15);
  border-radius: 12px;
}

.mentor-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .95rem;
}

.mentor-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.mentor-text {
  flex: 1;
  color: var(--muted);
}

.mentor-text strong {
  color: var(--brand-700);
  font-weight: 700;
}

.mentor-link {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mentor-link:hover {
  text-decoration: underline;
}
/* Policies: brand orange category headers for organization */
.policy-category h3 {
  color: var(--brand-700);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Slightly smaller on mobile */
@media (max-width: 1279px) {
  .policy-category h3{
    font-size: 0.95rem;
  }
}

.faqs .section h2 {
  color: var(--brand-700);
  font-weight: 800;
  font-size: 1rem;              /* matches à la carte */
  letter-spacing: .02em;
  text-transform: uppercase;     /* add this */
  margin-bottom: 20px;
}

/* Slightly smaller on mobile */
@media (max-width: 1279px) {
  .faqs .section h2 {
    font-size: 0.95rem;
  }
}

/* ===== SUCCESS TOAST: Brand-aligned confirmation ===== */

/* Base: hidden until .show is added by JS */
#quote-form .toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;
  transform: translateX(-50%) translateY(20px);
  max-width: min(600px, calc(100vw - 40px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  
  /* Brand toast styling */
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: #fff7f0;
  border: 1px solid rgba(233,123,64,.28);
  border-radius: 16px;
  box-shadow: 
    0 12px 32px rgba(233,123,64,.18),
    0 2px 8px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.8) inset;
  color: #7a3413;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

/* Show state: slide up and fade in */
#quote-form .toast.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}

/* Success icon styling */
#quote-form .toast .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(233,123,64,.12);
  font-size: 20px;
  line-height: 1;
}

/* Message text */
#quote-form .toast .text {
  flex: 1;
  padding-top: 2px;
}

/* Close button */
#quote-form .toast .toast-close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin: -2px -4px 0 8px;
  font-size: 24px;
  line-height: 1;
  color: var(--brand-700);
  cursor: pointer;
  border-radius: 8px;
  transition: background .2s ease;
}
#quote-form .toast .toast-close:hover {
  background: rgba(233,123,64,.10);
}

/* Error variant */
#quote-form .toast.error {
  background: #fff5f6;
  border-color: #f9c5cc;
  color: #5d1d1f;
}
#quote-form .toast.error .icon {
  background: rgba(220,38,38,.10);
}

/* Mobile: slightly smaller and tighter padding */
@media (max-width: 480px) {
  #quote-form .toast {
    padding: 14px 16px;
    font-size: .95rem;
    bottom: 16px;
    max-width: calc(100vw - 32px);
  }
  #quote-form .toast .icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}

/* ===== SUBMIT BUTTON: Loading state with spinner ===== */

/* Override the old rule that hides text - we want it visible now! */
#quote-form #submitBtn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .95;
  padding-right: 50px; /* make room for spinner */
  color: inherit !important; /* Override color: transparent from old styles */
}

/* Remove the old "Sending..." pseudo-element that's covering the button */
#quote-form #submitBtn.is-loading::after {
  content: "" !important; /* Clear old "Sending..." text */
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  background: transparent;
  display: block;
  inset: auto; /* Override old inset: 0 rule */
  animation: button-spin .6s linear infinite;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* Reduce motion: use fade pulse instead of spin */
@media (prefers-reduced-motion: reduce) {
  #quote-form #submitBtn.is-loading::after {
    animation: button-pulse 1.5s ease-in-out infinite;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 50%;
  }
  @keyframes button-pulse {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
  }
}

/* HOME: Mobile: show picture first, then text + CTAs */
@media (max-width: 767px){
  .bio{ grid-template-columns: 1fr; }
  .bio > picture{ order: 1; } /* image first on mobile */
  .bio > div{ order: 2; }     /* text + CTAs after */
}