/* Heelside site — shared layout styles (composes with DS tokens) */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); }
#root { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.hs-container { max-width: var(--container-lg); margin: 0 auto; padding: 0 32px; }
.hs-container--xl { max-width: var(--container-xl); }

.hs-section { padding: 72px 0; }
.hs-section--tight { padding: 56px 0; }

.hs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.hs-prose p { font-size: 16.5px; line-height: var(--leading-relaxed, 1.65); color: var(--text-body, var(--navy-800)); margin: 0 0 16px; }
.hs-prose p:last-child { margin-bottom: 0; }

/* Page hero band (inner pages) */
.hs-pagehero { background: var(--gradient-navy); color: var(--white); padding: 56px 0 64px; }
.hs-pagehero-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.hs-pagehero-text { flex: 1; min-width: 0; }
.hs-pagehero-crest { flex: none; height: 168px; width: auto; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.35)); }
.hs-pagehero h1 { color: var(--white); font-size: var(--text-4xl); letter-spacing: -0.02em; line-height: 1.02; margin: 16px 0 0; }
.hs-pagehero .hs-tagline { color: var(--orange-400); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 14px 0 0; }
.hs-pagehero p.hs-intro { color: var(--navy-200); font-size: var(--text-md); line-height: 1.6; max-width: 60ch; margin: 18px 0 0; }

/* FAQ accordion */
.hs-faq { display: flex; flex-direction: column; gap: 12px; }
.hs-faq details { background: var(--white); border: 2px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.hs-faq details[open] { border-color: var(--orange-300); box-shadow: var(--shadow-sm); }
.hs-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy-800); }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-100); color: var(--orange-600); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.hs-faq details[open] summary::after { content: '–'; }
.hs-faq .hs-faq-body { padding: 0 22px 20px; }
.hs-faq .hs-faq-body p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-muted, var(--neutral-600)); }

/* Paw bullet list */
.hs-pawlist { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hs-pawlist li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--navy-800); line-height: 1.5; }
.hs-pawlist li i, .hs-pawlist li svg { width: 20px; height: 20px; color: var(--orange-500); flex: none; margin-top: 2px; }

image-slot { display: block; }

/* Heelside paw motif — tilt the 4-toe paw slightly right, echoing the brand mark */
svg.lucide-paw-print { transform: rotate(20deg); }

/* Tier crest (bronze/silver/gold) in the pricing-card corner */
.hs-tier-logo { position: absolute; top: 15px; right: 15px; width: 60px; height: auto; z-index: 3; pointer-events: none; }
.hs-tier-logo.hs-tier-bronze { filter: sepia(1) saturate(2) hue-rotate(-18deg) brightness(0.92) contrast(1.05); }
.hs-tier-logo.hs-tier-silver { filter: grayscale(1) brightness(1.08) contrast(0.95); }
.hs-tier-logo.hs-tier-gold { filter: sepia(1) saturate(2.4) hue-rotate(4deg) brightness(1.04); }

/* Service-area: desktop tabs */
.hs-area-tabs { margin-top: 22px; }
.hs-area-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hs-area-tab {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--navy-700); background: transparent;
  border: 2px solid var(--border-subtle); border-radius: var(--radius-pill);
  padding: 8px 16px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
}
.hs-area-tab:hover { border-color: var(--orange-300); color: var(--navy-900); }
.hs-area-tab.active { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }
.hs-area-panel { display: none; flex-wrap: wrap; gap: 10px; }
.hs-area-panel.active { display: flex; animation: hsFadeIn 0.25s ease; }

/* Service-area: mobile accordion */
.hs-area-accordion { display: none; margin-top: 22px; flex-direction: column; gap: 10px; }
.hs-acc-item { border: 2px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.hs-acc-item.active { border-color: var(--orange-300); }
.hs-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-800);
  background: transparent; border: 0; padding: 15px 18px; cursor: pointer; text-align: left;
}
.hs-acc-chevron { width: 20px; height: 20px; color: var(--orange-500); transition: transform 0.2s ease; flex: none; }
.hs-acc-item.active .hs-acc-chevron { transform: rotate(180deg); }
.hs-acc-panel { display: none; flex-wrap: wrap; gap: 9px; padding: 0 18px 18px; }
.hs-acc-item.active .hs-acc-panel { display: flex; }

@keyframes hsFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hs-nav-toggle { display: none; }
.hs-nav-mobile { display: none; }

@media (max-width: 980px) {
  .hs-nav-desktop { display: none !important; }
  .hs-nav-toggle { display: flex !important; }
  /* The panel is only in the DOM when the menu is open, so showing it here is safe */
  .hs-nav-mobile { display: block; }
}

@media (max-width: 900px) {
  .hs-grid-2, .hs-grid-3 { grid-template-columns: 1fr; }
  .hs-container { padding: 0 20px; }
  .hs-pricing-grid { grid-template-columns: 1fr !important; }
  .hs-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hs-hero-grid img { max-width: 240px !important; margin: 0 auto; }
  .hs-hero-title { font-size: 48px !important; }
  .hs-2col { grid-template-columns: 1fr !important; }
  .hs-enquiry-grid { grid-template-columns: 1fr !important; }
  .hs-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 26px 32px !important; }
  .hs-footer-brand { grid-column: 1 / -1; }
  .hs-section { padding: 48px 0; }
  .hs-pagehero { padding: 40px 0 48px; }
}

@media (max-width: 760px) {
  .hs-pagehero-crest { display: none; }
  /* service area: swap tabs for accordion */
  .hs-area-tabs { display: none; }
  .hs-area-accordion { display: flex; }
  /* header: smaller logo, tighter bar, compact menu text */
  .hs-header-bar { padding: 8px 18px !important; }
  .hs-header-logo { height: 38px !important; }
  .hs-nav-toggle { width: 42px !important; height: 42px !important; }
  .hs-nav-mobile { padding: 6px 18px 16px !important; }
  .hs-nav-mobile a { font-size: 15.5px !important; padding: 11px 6px !important; }
  /* footer: compact, less stretched */
  .hs-footer { padding: 40px 22px 22px !important; }
  .hs-footer-brand img { height: 72px !important; margin-bottom: 12px !important; }
  .hs-footer-brand p { font-size: 14px !important; max-width: 38ch !important; }
  .hs-footer-bottom { margin-top: 28px !important; justify-content: center !important; text-align: center; gap: 10px 18px !important; }
}

@media (max-width: 360px) {
  .hs-footer-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
}