/* =====================================================================
   Scott Chiropractic — HAVEN design layer  (approved 2026-07-30)
   Port of design-variations/redesign-2026/designs/haven/index.html
   Loaded AFTER style.css.

   Two jobs:
   1. Re-map BOTH token systems to Haven values — the design-layer tokens
      (--accent/--ink/--base/--font-*) used by the homepage + chrome, AND
      style.css's --sc-* tokens, which re-skins every inner template for
      free (style.css is 237 token-uses vs 32 hardcoded colours).
   2. Provide the Haven components (announce bar, credential strip, hero,
      conditions band, offer card, reviews slider, footer offer, page hero).

   Palette rule (client-directed): orange is the ONLY colour. The original
   teal second hue was removed — do not reintroduce a green/teal.
   ===================================================================== */

:root {
    /* ---- Haven palette ---- */
    --cream: #FBF8F4;
    --cream-2: #F5EEE4;
    --peach: #FFF1E2;
    --peach-2: #FFE3C7;
    --peach-3: #FFD9B0;
    --orange: #FE8200;
    --orange-deep: #E06E00;
    --orange-soft: #FFB165;
    --orange-ink: #8F4300;      /* AA-safe orange for text on light warm bgs */
    --sand: #F1E8DC;
    --clay: #A8846A;
    --espresso: #6B5140;
    --ink: #33302B;
    --ink-soft: #6A645B;
    --line: rgba(51, 48, 43, 0.10);
    --white: #FFFFFF;

    --shadow-color: 51, 48, 43;
    --shadow-sm: 0 4px 18px rgba(51, 48, 43, 0.06);
    --shadow-md: 0 18px 48px rgba(51, 48, 43, 0.10);
    --shadow-lg: 0 34px 80px rgba(51, 48, 43, 0.16);
    --shadow-orange: 0 18px 44px rgba(254, 130, 0, 0.30);

    --r-sm: 16px;
    --r-md: 24px;
    --r-lg: 34px;
    --r-xl: 44px;
    --radius: 1.5rem;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* ---- Aliases the existing homepage/chrome markup already consumes ---- */
    --base: var(--cream);
    --soft-tint: var(--cream-2);
    --accent: var(--orange);
    --gold: var(--orange-soft);
    --font-sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;

    /* ---- Re-map style.css so every inner template inherits Haven ---- */
    --font-body: var(--font-sans);
    --font-heading: var(--font-serif);
    --sc-orange: var(--orange);
    --sc-orange-dark: var(--orange-deep);
    --sc-orange-light: var(--peach-2);
    --sc-ink: var(--ink);
    --sc-ink-dark: #211D18;
    --sc-ink-tint: var(--peach);
    --sc-paper: var(--cream);
    --sc-bone: var(--cream-2);
    --sc-stone: var(--sand);
    --sc-charcoal: var(--ink-soft);
    --sc-ash: var(--ink-soft);
    --sc-mist: var(--line);
    --sc-shadow-color: 51, 48, 43;
    --sc-gradient-warm: linear-gradient(135deg, var(--orange-soft), var(--orange) 70%);
    --sc-gradient-dark: linear-gradient(160deg, var(--ink) 0%, #211D18 100%);
}

/* ---- Base (homepage + chrome) ---- */
body {
    background-color: var(--base);
    color: var(--ink);
    font-family: var(--font-sans);
    overflow-x: hidden;
}
body::before {
    content: ''; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
    background:
        radial-gradient(ellipse 44% 52% at 18% 6%, rgba(254, 130, 0, 0.07), transparent),
        radial-gradient(ellipse 44% 52% at 82% 94%, rgba(254, 130, 0, 0.06), transparent);
    pointer-events: none;
}
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;           /* no orphaned words in headings, site-wide */
}
p, li { text-wrap: pretty; }
/* Keep serif headings on the normal rasterizer — never promote to a GPU layer (avoids wavy-scroll) */
h1, h2, h3, h4, .font-heading {
    transform: none !important; backface-visibility: visible;
    -webkit-font-smoothing: auto; text-rendering: optimizeLegibility;
}
/* Neutralize old style.css link underlines on chrome + homepage only */
#main-header a, .site-footer a, body.home a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---- Section backgrounds ---- */
.section-bg-white {
    background:
      radial-gradient(900px 520px at 100% -8%, rgba(254,130,0,0.055), transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #FBF6F0 100%);
}
.section-bg-cream { background-color: var(--base); }
.section-bg-tint {
    background:
      radial-gradient(900px 520px at 0% 112%, rgba(254,130,0,0.07), transparent 60%),
      linear-gradient(180deg, #FBF6EF 0%, #F5EDE3 100%);
}

/* ---- Parallax statement band ---- */
.parallax-band {
    position: relative;
    background-image:
        linear-gradient(rgba(21,17,13,0.7), rgba(21,17,13,0.74)),
        linear-gradient(135deg, rgba(176,86,0,0.35), transparent 70%),
        url('../images/parallax-band.webp');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
}
.parallax-band h2, .parallax-band p { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
@media (max-width: 768px) { .parallax-band { background-attachment: scroll; } }

/* ---- Cards ---- */
.content-card {
    background: var(--white);
    border: 1px solid rgba(var(--shadow-color), 0.07);
    border-radius: var(--radius);
    box-shadow: 0 8px 25px rgba(var(--shadow-color), 0.04);
}

/* Premium Service Cards */
.service-card {
    position: relative; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF6 100%);
    border: 1px solid rgba(var(--shadow-color), 0.07);
    border-radius: 1.5rem; padding: 0;
    box-shadow: 0 10px 30px rgba(var(--shadow-color), 0.05);
    overflow: hidden; text-decoration: none; color: var(--ink);
}
.service-card-image-wrapper { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.service-card-image { width: 100%; height: 100%; object-fit: cover; }
.service-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(320deg, var(--accent) -20%, transparent 50%);
    opacity: 0.25; mix-blend-mode: soft-light;
}
.service-card-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; position: relative; }
.service-icon {
    width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    border: 4px solid var(--white);
    box-shadow: 0 5px 15px rgba(var(--shadow-color), 0.1);
    color: var(--accent); position: absolute; top: -1.75rem; left: 2rem;
}
.service-icon svg { width: 1.75rem; height: 1.75rem; }
.service-link {
    margin-top: auto; padding-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--orange-ink); font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.service-link .arrow { width: 1rem; height: 1rem; }

/* Premium Condition Cards */
.condition-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    background: linear-gradient(165deg, #FFFFFF 0%, #FFF8EF 100%);
    border: 1px solid rgba(var(--shadow-color), 0.06);
    border-radius: 1.4rem; padding: 2.25rem 1.5rem 1.75rem; overflow: hidden;
    box-shadow: 0 10px 30px rgba(var(--shadow-color), 0.05);
    text-decoration: none; color: var(--ink); text-align: center;
}
.condition-icon {
    width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(254,130,0,0.16), rgba(254,130,0,0.06));
    color: var(--accent); margin-bottom: 0.25rem;
}
.condition-icon svg { width: 1.7rem; height: 1.7rem; }
.condition-link {
    margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--accent); font-weight: 600; font-size: 0.9rem; font-family: var(--font-sans); text-decoration: none;
}
.condition-link .arrow { width: 0.95rem; height: 0.95rem; }

/* ---- Buttons ---- */
.btn {
    display: inline-block; padding: 0.875rem 1.75rem; border-radius: 999px; font-weight: 600;
    text-align: center; border: 2px solid transparent; text-decoration: none; cursor: pointer;
    font-family: var(--font-sans); line-height: 1.2;
}
.btn-accent { background-color: var(--accent); color: var(--ink); box-shadow: 0 5px 20px rgba(254, 130, 0, 0.3); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---- Nav + dropdowns ---- */
.nav-link { position: relative; text-decoration: none; color: var(--ink); }
.nav-item { position: relative; }
.dropdown { position: absolute; top: 100%; left: -2rem; padding-top: 1.5rem; opacity: 0; visibility: hidden; z-index: 100; }
.dropdown-menu {
    position: relative; background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF8 100%);
    border-radius: 1.15rem; padding: 0.85rem 0.6rem 0.6rem; min-width: 272px;
    box-shadow: 0 28px 64px -16px rgba(var(--shadow-color), 0.28), 0 6px 16px rgba(var(--shadow-color), 0.07);
    border: 1px solid rgba(var(--shadow-color), 0.06); overflow: hidden;
    display: flex; flex-direction: column;
}
.dropdown-menu::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), #ffb15a);
}
.dropdown-item {
    position: relative; display: flex; align-items: center; padding: 0.7rem 1rem;
    border-radius: 0.8rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.dropdown-item::before { content: ''; width: 0; height: 1.15rem; border-radius: 999px; background: var(--accent); }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- Sticky header ---- */
header#main-header { position: sticky; top: 0; z-index: 50; }
header#main-header.scrolled {
    background-color: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 20px rgba(var(--shadow-color), 0.07);
}

/* ---- Image frames ---- */
.image-frame { border-radius: var(--radius); overflow: hidden; box-shadow: 0 15px 40px rgba(var(--shadow-color), 0.1); position: relative; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-image-frame { aspect-ratio: 4 / 3; max-height: 480px; }
.about-image-frame { aspect-ratio: 3 / 4; max-height: 480px; margin-left: auto; margin-right: auto; }
.cbp-image-frame { aspect-ratio: 4 / 3; max-height: 440px; width: 100%; }
.hero-image-frame::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(15deg, rgba(254, 130, 0, 0.15), transparent 60%); pointer-events: none;
}

/* ---- Reviews carousel ---- */
.gold-stars { color: var(--gold); }
.carousel-track { display: flex; }
@media (min-width: 768px) { .carousel-slide { flex: 0 0 50%; } }
@media (min-width: 1024px) { .carousel-slide { flex: 0 0 33.333%; } }
.review-card .gold-stars { line-height: 1; }

/* ---- CTA band ---- */
.premium-gradient-band { background: linear-gradient(45deg, #FF9B21, var(--accent)); position: relative; overflow: hidden; }

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.visible { opacity: 1; transform: none; }
html:not(.sc-js) .reveal { opacity: 1; transform: none; }

/* ---- Mobile menu ----
   Rebuilt: a real <button> + JS, replacing a checkbox whose `:checked ~` selector
   could never match its target. Panel is a full-width sheet under the header,
   scrollable so a long nav still works on a short phone in landscape. */
.hv-navtoggle { display: inline-flex; align-items: center; gap: 9px;
    background: var(--cream-2); border: 1px solid rgba(51,48,43,0.14);
    border-radius: 100px; padding: 9px 15px 9px 13px; cursor: pointer;
    color: var(--ink); font-family: inherit; font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0.02em; line-height: 1; flex: none;
    -webkit-tap-highlight-color: transparent; }
.hv-navtoggle:hover, .hv-navtoggle:focus-visible { background: var(--peach); border-color: var(--orange); }
.hv-navtoggle__bars { display: block; width: 18px; height: 13px; position: relative; }
.hv-navtoggle__bars span { position: absolute; left: 0; width: 100%; height: 2.2px;
    border-radius: 2px; background: var(--orange-deep);
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; }
.hv-navtoggle__bars span:nth-child(1) { top: 0; }
.hv-navtoggle__bars span:nth-child(2) { top: 5.4px; }
.hv-navtoggle__bars span:nth-child(3) { top: 10.8px; }
.hv-navtoggle.is-open .hv-navtoggle__bars span:nth-child(1) { top: 5.4px; transform: rotate(45deg); }
.hv-navtoggle.is-open .hv-navtoggle__bars span:nth-child(2) { opacity: 0; }
.hv-navtoggle.is-open .hv-navtoggle__bars span:nth-child(3) { top: 5.4px; transform: rotate(-45deg); }

.hv-mobilenav { max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.22s ease; }
.hv-mobilenav[hidden] { display: none; }
.hv-mobilenav.is-open { max-height: min(74vh, 640px); opacity: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
.hv-mobilenav nav { display: flex; flex-direction: column; gap: 2px;
    padding: 14px 0 4px; border-top: 1px solid rgba(51,48,43,0.10); margin-top: 12px; }
.hv-mobilenav .nav-link,
.hv-mobilenav .mobile-dropdown-toggle { font-size: 1.02rem; font-weight: 600;
    padding: 13px 4px; width: 100%; text-align: left; color: var(--ink);
    border-radius: 10px; }
.hv-mobilenav .nav-link:hover, .hv-mobilenav .nav-link:focus-visible { background: var(--cream-2); color: var(--orange-ink); }
.hv-mobilenav .hv-btn { margin-top: 6px; width: 100%; }
.hv-mobilenav .hv-btn--call { margin-top: 14px; }
.mobile-dropdown-toggle { display: flex; justify-content: space-between; align-items: center;
    width: 100%; background: none; border: 0; cursor: pointer; color: var(--ink);
    font-family: inherit; }
.mobile-dropdown-toggle .arrow { transition: transform 0.25s ease; flex: none; }
.mobile-dropdown-toggle.is-open .arrow { transform: rotate(180deg); }
.mobile-dropdown { max-height: 0; overflow: hidden; background-color: var(--cream-2);
    border-radius: 10px; margin: 2px 0 4px; transition: max-height 0.28s ease; }
.mobile-dropdown a { display: block; text-decoration: none; color: var(--ink);
    padding: 11px 16px; font-size: 0.95rem; }
.mobile-dropdown a:first-child { padding-top: 14px; }
.mobile-dropdown a:last-child { padding-bottom: 14px; }
.mobile-dropdown a:hover, .mobile-dropdown a:focus-visible { color: var(--orange-ink); }

/* ---- Footer ---- */
footer.site-footer { background-color: var(--ink) !important; color: var(--base) !important; }
footer.site-footer h4 { color: #fff; }
/* Footer column headings are h2 for a valid outline; keep the old h4 look. */
footer.site-footer .hv-foot-h { color: #fff; font-size: 21.28px; line-height: 1.15; letter-spacing: -0.01em; }
footer.site-footer a { color: rgba(255,255,255,0.6); }
footer.site-footer a:hover { color: var(--accent); }
/* Inherited markup (hours table, addresses) must stay legible on the dark footer */
footer.site-footer p, footer.site-footer li, footer.site-footer address,
footer.site-footer .sc-hours, footer.site-footer .sc-hours__day, footer.site-footer .sc-hours__time,
footer.site-footer time, footer.site-footer span { color: rgba(255,255,255,0.6); }
footer.site-footer .sc-hours { font-size: 0.875rem; }

/* ---- Motion & hovers ---- */
@media (prefers-reduced-motion: no-preference) {
    header#main-header, .dropdown, .mobile-dropdown-toggle .arrow, .mobile-dropdown { transition: all 0.4s ease; }
    .content-card { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .content-card:hover { transform: translateY(-8px); box-shadow: 0 16px 45px rgba(var(--shadow-color), 0.1); }

    .service-card { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, border-color 0.4s ease; }
    .service-card-image { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
    .service-card:hover { transform: translateY(-10px); box-shadow: 0 28px 60px -18px rgba(var(--shadow-color),0.22); border-color: rgba(254,130,0,0.35); }
    .service-card:hover .service-card-image { transform: scale(1.08); }
    .service-icon { transition: all 0.4s ease; }
    .service-card:hover .service-icon { background: linear-gradient(135deg, var(--accent), #ff9b2f); color:#fff; transform: rotate(-6deg) scale(1.06); }
    .service-link .arrow { transition: transform 0.3s ease; }
    .service-card:hover .service-link .arrow { transform: translateX(5px); }

    .condition-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.35s ease; }
    .condition-card::before {
        content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
        background: linear-gradient(90deg, var(--accent), #ffb15a);
        transform: scaleX(0); transform-origin:left; transition: transform 0.4s ease;
    }
    .condition-card:hover { transform: translateY(-7px); box-shadow: 0 22px 48px -16px rgba(var(--shadow-color),0.22); border-color: rgba(254,130,0,0.3); }
    .condition-card:hover::before { transform: scaleX(1); }
    .condition-icon { transition: all 0.35s ease; }
    .condition-card:hover .condition-icon { background: var(--accent); color:#fff; transform: scale(1.08) rotate(-4deg); }
    .condition-link .arrow { transition: transform 0.3s ease; }
    .condition-card:hover .condition-link .arrow { transform: translateX(5px); }

    .btn { transition: all 0.25s ease; }
    .btn:hover { transform: scale(1.05); filter: brightness(1.05); box-shadow: 0 10px 25px -5px rgba(var(--shadow-color), 0.2); }
    .btn-accent:hover { background-color: #FF9B21; }
    .btn-secondary:hover { background: var(--ink); color: var(--white); }

    .nav-link { transition: color 0.3s ease; }
    .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; transform: translateX(-50%); background-color: var(--accent); transition: width 0.3s ease; }
    .nav-link:hover, .nav-item:hover > .nav-link { color: var(--accent); }
    .nav-link:hover::after, .nav-item:hover > .nav-link::after { width: 100%; }
    .dropdown { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; transform: translateY(10px); }
    .dropdown-item { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
    .dropdown-item::before { transition: width 0.22s ease, margin-right 0.22s ease; }
    .dropdown-item:hover { background-color: rgba(254, 130, 0, 0.09); color: var(--accent); transform: translateX(3px); }
    .dropdown-item:hover::before { width: 3px; margin-right: 0.6rem; }

    .image-frame img { transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .image-frame:hover img { transform: scale(1.05); }

    .carousel-container:hover .carousel-track { animation-play-state: paused; }

    .premium-gradient-band::before {
        content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
        animation: rotate-glow 15s linear infinite;
    }
    @keyframes rotate-glow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    .reveal { transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); }

    .glowing-header { position: relative; z-index: 1; }
    .glowing-header::after {
        content: ''; position: absolute; left: 50%; top: 50%; width: 140%; height: 160%;
        transform: translate(-50%, -50%);
        background: radial-gradient(ellipse, rgba(254, 130, 0, 0.25) 0%, transparent 70%);
        filter: blur(50px); animation: pulse-glow 8s ease-in-out infinite; z-index: -1;
    }
    @keyframes pulse-glow {
        0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 1.0; transform: translate(-50%, -48%) scale(1.05); }
    }
}

/* =====================================================================
   Utility layer — bounded Tailwind subset used by the ported markup.
   Breakpoints: sm 640 · md 768 · lg 1024
   ===================================================================== */

/* Layout / container */
.container { width: 100%; max-width: 1280px; margin-inline: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.relative { position: relative; }
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-48 { width: 12rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-h-0 { max-height: 0; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.z-10 { z-index: 10; }
.cursor-pointer { cursor: pointer; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.not-italic { font-style: normal; }
.rounded-2xl { border-radius: var(--radius); }

/* Grid columns */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* Order */
.order-first { order: -9999; }
.order-last { order: 9999; }

/* Gap */
.gap-1 { gap: 0.25rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* Padding */
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.pt-8 { padding-top: 2rem; }
.pt-16 { padding-top: 4rem; }
.pb-8 { padding-bottom: 2rem; }

/* Margin */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mr-3 { margin-right: 0.75rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-12 { margin-bottom: 3rem; }

/* Space-between (stacked children) */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-8 > * + * { margin-left: 2rem; }

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-serif { font-family: var(--font-serif); }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight { line-height: 1.25; }
.leading-none { line-height: 1; }

/* Colors */
.text-accent { color: var(--orange-ink); }
.text-ink { color: var(--ink); }
.text-ink\/80 { color: rgba(21,17,13,0.8); }
.text-ink\/70 { color: rgba(21,17,13,0.7); }
.text-ink\/60 { color: rgba(21,17,13,0.6); }
.text-white { color: #fff; }
.text-white\/95 { color: rgba(255,255,255,0.95); }
.text-white\/90 { color: rgba(255,255,255,0.9); }
.text-white\/70 { color: rgba(255,255,255,0.7); }
.text-white\/60 { color: rgba(255,255,255,0.6); }
.text-white\/40 { color: rgba(255,255,255,0.4); }
.bg-white { background-color: #fff; }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }

/* Borders */
.border-r { border-right: 1px solid transparent; }
.border-t { border-top: 1px solid transparent; }
.border-ink\/10 { border-color: rgba(21,17,13,0.1); }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/50 { border-color: rgba(255,255,255,0.5); }

/* Transitions */
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-all { transition: all 0.4s ease; }
.duration-500 { transition-duration: 0.5s; }
.hover\:text-accent:hover { color: var(--accent); }
.hover\:\!bg-white:hover { background-color: #fff !important; }
.hover\:\!text-ink:hover { color: var(--ink) !important; }

/* Offer card gradient + shadow (folded from Tailwind gradient utils) */
.offer-card { background: linear-gradient(to bottom right, #F97316, #EA580C); box-shadow: 0 25px 50px -12px rgba(254,130,0,0.3); border-radius: var(--radius); overflow: hidden; }

/* Important spacing variants */
.\!text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.\!py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.\!px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* ---- Responsive: sm (≥640) ---- */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
}

/* ---- Responsive: sm (≥640) extra ---- */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---- Responsive: md (≥768) ---- */
@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:justify-start { justify-content: flex-start; }
    .md\:text-left { text-align: left; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1.1; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:order-first { order: -9999; }
    .md\:order-last { order: 9999; }
    .md\:mx-0 { margin-left: 0; margin-right: 0; }
    .md\:border-r { border-right: 1px solid transparent; }
    .md\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .md\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }
    .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .md\:p-12 { padding: 3rem; }
    .md\:gap-8 { gap: 2rem; }
    .md\:w-56 { width: 14rem; }
}

/* ---- Responsive: lg (≥1024) ---- */
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:inline-block { display: inline-block; }
    .lg\:inline-flex { display: inline-flex; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:text-5xl { font-size: 3rem; line-height: 1.1; }
    .lg\:text-6xl { font-size: 3.75rem; line-height: 1.05; }
}

/* =====================================================================
   INNER PAGES — V3 restyle of the sc- components used by page/single/
   archive templates. Scoped under .sc-main (content area) for specificity;
   the CTA banner + footer chrome are handled separately. Loads after
   style.css so these win the cascade.
   ===================================================================== */

h1, h2, h3 { text-wrap: balance; }

/* Section rhythm + backgrounds */
.sc-main .sc-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .sc-main .sc-section { padding-top: 5.5rem; padding-bottom: 5.5rem; } }
.sc-main .sc-section--bg-tint {
    background:
      radial-gradient(900px 520px at 0% 112%, rgba(254,130,0,0.07), transparent 60%),
      linear-gradient(180deg, #FBF6EF 0%, #F5EDE3 100%);
}
.sc-main .sc-section--bg-navy { background: var(--ink); }
.sc-main .sc-section--bg-navy, .sc-main .sc-section--bg-navy h2, .sc-main .sc-section--bg-navy p { color: #fff; }
/* Was 760px — that is what made the content edge jump 120px -> 340px between
   sections. Width is now constant; the reading measure is capped instead. */
.sc-main .sc-container--narrow { max-width: var(--max-content); }

/* Section header + eyebrow + lead */
.sc-main .sc-section-header { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.sc-main .sc-eyebrow { display: inline-block; color: var(--orange-ink); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 0.7rem; }
.sc-main .sc-section-header__lead, .sc-main .sc-text-lead { font-size: 1.2rem; line-height: 1.7; color: rgba(21,17,13,0.75); }

/* Page / single hero */
.sc-main .sc-hero { padding: 3.5rem 0; }
@media (min-width: 768px) { .sc-main .sc-hero { padding: 4.5rem 0; } }
.sc-main .sc-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .sc-main .sc-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.sc-main .sc-hero__eyebrow { display: inline-block; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 0.5rem; }
.sc-main .sc-hero__headline,
.sc-main .sc-hero__grid h1,
.sc-main .sc-section-header h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.12; margin: 0.15rem 0 1rem; }
.sc-main .sc-hero__subhead { font-size: 1.18rem; color: rgba(21,17,13,0.78); line-height: 1.7; }
.sc-main .sc-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.sc-main .sc-hero__image { display: block; }
.sc-main .sc-hero__image img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--radius); box-shadow: 0 15px 40px rgba(21,17,13,0.12);
    aspect-ratio: 4 / 3; max-height: 460px;
}
/* Frame hugs the portrait (405x540) so its shadow box has no empty band below the photo. */
.sc-main .sc-hero__image--portrait { max-width: 405px; margin-inline: auto; border-radius: var(--radius); }
.sc-main .sc-hero__image--portrait img { aspect-ratio: 3 / 4; max-height: none; }
@media (prefers-reduced-motion: no-preference) {
    .sc-main .sc-hero__image img { transition: transform 0.5s cubic-bezier(.25,.8,.25,1); }
    .sc-main .sc-hero__image:hover img { transform: scale(1.03); }
}

/* Buttons -> pill (matches .btn) */
.sc-main .sc-btn, .sc-cta-banner .sc-btn {
    display: inline-block; padding: 0.875rem 1.75rem; border-radius: 999px; font-weight: 600;
    border: 2px solid transparent; text-decoration: none; line-height: 1.2; cursor: pointer; transition: all 0.25s ease;
}
.sc-main .sc-btn--primary { background: var(--accent); color: var(--ink); box-shadow: 0 5px 20px rgba(254,130,0,0.3); }
.sc-main .sc-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.sc-main .sc-btn--large { padding: 1rem 2.1rem; }
@media (prefers-reduced-motion: no-preference) {
    .sc-main .sc-btn:hover { transform: scale(1.04); filter: brightness(1.04); }
    .sc-main .sc-btn--primary:hover { background: #FF9B21; }
    .sc-main .sc-btn--secondary:hover { background: var(--ink); color: #fff; }
}

/* Grids */
.sc-main .sc-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .sc-main .sc-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .sc-main .sc-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .sc-main .sc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .sc-main .sc-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .sc-main .sc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Generic content cards */
.sc-main .sc-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF6 100%);
    border: 1px solid rgba(21,17,13,0.07); border-radius: 1.25rem; padding: 2rem;
    box-shadow: 0 10px 30px rgba(21,17,13,0.05);
}
.sc-main .sc-card > h3:first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
    .sc-main .sc-card { transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
    .sc-main .sc-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -16px rgba(21,17,13,0.18); }
}

/* Content lists -> checklist */
.sc-main .sc-section ul:not(.sc-hours):not(.sc-footer__list):not(.sc-returning__list) { list-style: none; padding: 0; margin: 1.25rem 0; }
.sc-main .sc-section ul:not(.sc-hours):not(.sc-footer__list):not(.sc-returning__list) > li {
    position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem; line-height: 1.65;
}
.sc-main .sc-section ul:not(.sc-hours):not(.sc-footer__list):not(.sc-returning__list) > li::before {
    content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700;
}
.sc-main .sc-section p { line-height: 1.72; }

/* Even card text */
.sc-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Breadcrumbs polish */
.sc-breadcrumbs { padding: 1rem 0 0; font-size: 0.85rem; }
.sc-breadcrumbs a { color: rgba(21,17,13,0.6); text-decoration: none; }
.sc-breadcrumbs a:hover { color: var(--accent); }

/* CTA banner — animated gradient + glow (the "motion behind CTA") */
.sc-cta-banner {
    position: relative; overflow: hidden; text-align: center; padding: 4.5rem 1rem;
    /* Matches .hv-final-cta so the homepage and inner pages share one CTA look.
       Deep end first so white body copy keeps enough contrast. */
    background: linear-gradient(140deg, #B85700, var(--orange-deep) 48%, var(--orange) 125%);
}
.sc-cta-banner h2 { color: #fff; position: relative; z-index: 1; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 auto 0.75rem; max-width: 760px; }
.sc-cta-banner p { color: rgba(255,255,255,0.92); position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.sc-cta-banner .sc-cta-banner__ctas { position: relative; z-index: 1; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.sc-cta-banner .sc-btn--primary { background: #fff; color: var(--orange-ink); border-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
@media (prefers-reduced-motion: no-preference) {
    .sc-cta-banner::before {
        content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
        animation: rotate-glow 15s linear infinite;
    }
}

/* =====================================================================
   PPC landing pages (/go/) — minimal chrome, form-forward hero
   ===================================================================== */
.sc-landing-header { background: var(--white); border-bottom: 1px solid rgba(21,17,13,0.07); padding: 0.85rem 0; }
.sc-landing-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sc-landing-header__logo { display: block; width: 11rem; flex-shrink: 0; }
.sc-landing-header__cta { display: flex; align-items: center; gap: 1.25rem; }
.sc-landing-header__phone {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.sc-landing-header__phone svg { color: var(--accent); }
.sc-landing-header .sc-btn {
    display: inline-block; border-radius: 999px; padding: 0.7rem 1.5rem; font-weight: 600;
    text-decoration: none; background: var(--accent); color: var(--ink);
    box-shadow: 0 5px 20px rgba(254,130,0,0.3);
}
@media (max-width: 640px) { .sc-landing-header .sc-btn { display: none; } }

.sc-landing__hero { scroll-margin-top: 1rem; }
.sc-landing__form-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF6 100%);
    border: 1px solid rgba(21,17,13,0.07); border-radius: 1.5rem; padding: 2rem;
    box-shadow: 0 24px 60px -18px rgba(21,17,13,0.22);
    scroll-margin-top: 1.5rem;
}
.sc-landing__form-title { font-size: 1.45rem; margin: 0 0 0.4rem; }
.sc-landing__form-card .sc-meta { margin-bottom: 1.25rem; }
/* Form fieldsets/checkbox lists must not inherit the ✓-checklist look */
.sc-landing__form-card fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.sc-landing__alt-cta { margin-top: 0.9rem; font-size: 0.92rem; }
.sc-landing__alt-cta a { color: var(--orange-ink); font-weight: 600; text-decoration: none; }
.sc-landing__alt-cta a:hover { text-decoration: underline; }
.sc-landing__trust { margin-top: 1.25rem; max-width: 46ch; }
.sc-landing__fine-print { text-align: center; padding: 1.5rem 0 2.5rem; }

.sc-landing-footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 2rem 0; }
.sc-landing-footer__inner { text-align: center; font-size: 0.9rem; display: grid; gap: 0.5rem; }
.sc-landing-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.sc-landing-footer a:hover { color: var(--accent); }

/* =====================================================================
   Blog — listing cards + single post
   ===================================================================== */
.sc-main .sc-post-card {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ink);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF6 100%);
    border: 1px solid rgba(21,17,13,0.07); border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(21,17,13,0.05);
}
.sc-main .sc-post-card__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sc-main .sc-post-card__body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.sc-main .sc-post-card__title { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.sc-main .sc-post-card__body .sc-service-card__link { margin-top: auto; }
@media (prefers-reduced-motion: no-preference) {
    .sc-main .sc-post-card { transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
    .sc-main .sc-post-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -16px rgba(21,17,13,0.18); }
}

.sc-main .sc-post-header { margin-bottom: 2rem; }
.sc-main .sc-post-hero img { width: 100%; border-radius: 1.5rem; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 24px 60px -18px rgba(21,17,13,0.22); margin-bottom: 2.5rem; }
.sc-main .sc-post-content h2 { margin-top: 2.5rem; }
.sc-main .sc-post-content h3 { margin-top: 2rem; }

.sc-main .sc-pagination { margin-top: 3rem; text-align: center; }
.sc-main .sc-pagination .nav-links { display: inline-flex; gap: 0.5rem; align-items: center; }
.sc-main .sc-pagination .page-numbers {
    display: inline-block; min-width: 2.4rem; padding: 0.55rem 0.9rem; border-radius: 999px;
    text-decoration: none; color: var(--ink); background: var(--white);
    border: 1px solid rgba(21,17,13,0.1); font-weight: 600;
}
.sc-main .sc-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); }
.sc-main .sc-pagination .page-numbers:hover:not(.current) { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
    .sc-offer-bar { font-size: 0.82rem; }
    .sc-offer-bar__inner { gap: 0.5rem; padding: 0.45rem 0.75rem; }
    /* On small screens show the $XX tag + call chip; drop the long sentence */
    .sc-offer-bar__text { display: none; }
}

/* Sticky mobile conversion bar */
.sc-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: none; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: rgba(21,17,13,0.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 20px rgba(21,17,13,0.12);
}
.sc-sticky-cta__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0.55rem 0.15rem 0.6rem; background: #fff; color: var(--ink);
    text-decoration: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em;
    min-height: 56px;   /* four across still has to clear a 44px tap target */
}
.sc-sticky-cta__btn svg { width: 20px; height: 20px; }
.sc-sticky-cta__btn--call { background: var(--accent); color: var(--ink); }
.sc-sticky-cta__btn--book { color: var(--ink); }
.sc-sticky-cta__btn--text { color: var(--ink); }
.sc-sticky-cta__btn--directions { color: var(--ink); }
.sc-sticky-cta__btn:active { filter: brightness(0.95); }

/* Office closed: calling reaches nobody, so the accent moves to Book. Set by the
   inline head script in scott_hours_aware_cta(); if it never runs the attribute
   is absent and the phone-first default above stands. */
html[data-office="closed"] .sc-sticky-cta__btn--call { background: #fff; }
html[data-office="closed"] .sc-sticky-cta__btn--book { background: var(--accent); }

@media (max-width: 900px) {
    .sc-sticky-cta { display: grid; }
    body { padding-bottom: 62px; }
}
@media (max-width: 340px) {
    /* Four labels will not fit honestly at this width; drop the least urgent. */
    .sc-sticky-cta { grid-template-columns: repeat(3, 1fr); }
    .sc-sticky-cta__btn--text { display: none; }
}

/* =====================================================================
   QUICK ACTIONS — floating desktop help panel
   ===================================================================== */
.sc-qa {
    position: fixed; right: 20px; bottom: 20px; z-index: 65;
    display: none; flex-direction: column; align-items: flex-end; gap: 10px;
}
@media (min-width: 901px) { .sc-qa { display: flex; } }

.sc-qa__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--accent); color: var(--ink);
    font-family: inherit; font-size: 0.92rem; font-weight: 700;
    box-shadow: 0 8px 24px rgba(21,17,13,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sc-qa__toggle:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(21,17,13,0.22); }
.sc-qa__toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sc-qa__toggle-icon, .sc-qa__toggle-close { width: 20px; height: 20px; flex: none; }
.sc-qa__toggle-close { display: none; }
.sc-qa__toggle[aria-expanded="true"] .sc-qa__toggle-icon,
.sc-qa__toggle[aria-expanded="true"] .sc-qa__toggle-label { display: none; }
.sc-qa__toggle[aria-expanded="true"] .sc-qa__toggle-close { display: block; }
.sc-qa__toggle[aria-expanded="true"] { padding: 11px; }

.sc-qa__panel {
    width: 306px; padding: 14px; border-radius: 16px;
    background: #fff; border: 1px solid var(--sand);
    box-shadow: 0 18px 44px rgba(21,17,13,0.18);
}
.sc-qa__status {
    display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
    font-size: 0.78rem; font-weight: 700; color: var(--espresso);
}
.sc-qa__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex: none; }
.sc-qa__status-open, .sc-qa__status-closed { display: none; }
/* Until the head script resolves the state, claim nothing. */
html[data-office="open"]   .sc-qa__status-open   { display: inline; }
html[data-office="open"]   .sc-qa__dot           { background: #1f8a4c; }
html[data-office="closed"] .sc-qa__status-closed { display: inline; }

.sc-qa__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sc-qa__item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 11px;
    color: var(--ink); text-decoration: none;
    transition: background 0.18s ease;
}
.sc-qa__item:hover, .sc-qa__item:focus-visible { background: var(--peach); }
.sc-qa__icon { width: 21px; height: 21px; flex: none; color: var(--orange-deep); }
.sc-qa__item strong { display: block; font-size: 0.88rem; font-weight: 700; line-height: 1.3; }
.sc-qa__item em { display: block; font-style: normal; font-size: 0.76rem; color: var(--espresso); opacity: 0.85; }
/* Closed: the phone row stops looking like the answer. */
html[data-office="closed"] .sc-qa__item--call .sc-qa__icon { color: var(--clay); }
html[data-office="closed"] .sc-qa__item--book .sc-qa__icon { color: var(--orange-deep); }

@media (prefers-reduced-motion: reduce) {
    .sc-qa__toggle, .sc-qa__item { transition: none; }
    .sc-qa__toggle:hover { transform: none; }
}

/* =====================================================================
   HAVEN COMPONENTS  (prefix: hv-)
   Ported from designs/haven/index.html. Namespaced so nothing collides
   with the sc- templates or the utility subset above.
   ===================================================================== */

/* ---- Inline SVG icon system (Haven uses NO emoji anywhere) ---- */
.ic-svg { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; }

/* ---- Announce bar ---- */
.hv-announce { background: var(--peach-3); color: var(--ink);
    text-align: center; position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(51, 48, 43, 0.08); }
.hv-announce__inner { display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; padding: 9px 22px;
    font-size: 0.92rem; font-weight: 600; position: relative; z-index: 1; }
.hv-announce__inner .ic-svg { width: 16px; height: 16px; color: var(--orange-deep); }
/* ink on orange = 5.26:1. White on orange is only 2.5:1 — do not use it. */
.hv-announce__price { background: var(--orange); color: var(--ink); font-weight: 800;
    padding: 2px 12px; border-radius: 100px; font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(224, 110, 0, 0.28); }
.hv-announce__cta { color: var(--ink); font-weight: 800; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: var(--orange);
    text-decoration-thickness: 2px; }
.hv-announce__cta:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }
.hv-announce__addr { display: none; align-items: center; gap: 6px; color: var(--ink); font-weight: 600;
    padding-left: 14px; border-left: 1px solid rgba(51, 48, 43, 0.2); }
.hv-announce__addr:hover { color: var(--orange-ink); }
@media (min-width: 1100px) { .hv-announce__addr { display: inline-flex; } }
.hv-announce::after { content: ''; position: absolute; top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.85), transparent); }

/* ---- Buttons ---- */
.hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-sans); font-weight: 700; font-size: 1rem;
    padding: 15px 30px; border-radius: 100px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .3s var(--ease), color .3s var(--ease),
                transform .3s var(--ease), box-shadow .3s var(--ease); }
.hv-btn svg { width: 19px; height: 19px; flex: none; }
.hv-btn--lg { padding: 18px 34px; font-size: 1.06rem; }
.hv-btn--call { background: var(--orange); color: var(--ink); box-shadow: var(--shadow-orange); }
.hv-btn--call:hover { background: var(--orange-deep); transform: translateY(-3px);
    box-shadow: 0 24px 54px rgba(254, 130, 0, 0.42); }
.hv-btn--book { background: rgba(255,255,255,0.72); color: var(--ink);
    border-color: var(--line); box-shadow: var(--shadow-sm); }
.hv-btn--book:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hv-btn--ghost { background: var(--sand); color: var(--espresso);
    border-color: rgba(107, 81, 64, 0.22); box-shadow: var(--shadow-sm); }
.hv-btn--ghost:hover { background: #fff; border-color: var(--espresso);
    transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* A button sitting ON an orange band cannot use the orange->orange-deep hover:
   it hovers to the same colour as its own background and disappears. Any button
   on a brand-coloured surface gets this inverting treatment instead. */
.hv-on-brand .hv-btn--call { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 14px 34px rgba(0,0,0,0.18); }
.hv-on-brand .hv-btn--call:hover { background: #fff; color: var(--orange-ink);
    box-shadow: 0 0 0 2px #fff, 0 20px 44px rgba(0,0,0,0.26); transform: translateY(-3px); }
.hv-on-brand .hv-btn--call:hover svg { color: var(--orange-ink); }
.hv-on-brand .hv-btn--book { background: rgba(255,255,255,0.92); border-color: transparent; }
.hv-on-brand .hv-btn--book:hover { background: #fff; color: var(--ink); }

/* ---- Eyebrow ---- */
.hv-eyebrow { display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-ink);
    margin-bottom: 14px; }
.hv-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px;
    background: var(--orange); }

/* ---- Glass card (services / conditions / values) ---- */
.hv-card { background: rgba(255,255,255,0.72); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.hv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md);
    border-color: var(--peach-2); }

/* ---- Credential strip ---- */
.hv-cred-strip { padding: 22px 0 8px; }
.hv-cred-wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Label wrapped in ONE element: as separate flex children, the text after </b>
   became its own item and rendered the `gap` PLUS a literal space. */
.hv-cred-pill { display: flex; align-items: center; gap: 11px;
    background: rgba(255,255,255,0.6); border: 1px solid var(--line);
    border-radius: 100px; padding: 10px 20px; font-size: 0.92rem;
    box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.hv-cred-pill b { color: var(--ink); font-weight: 700; }
.hv-cred-pill .ic-svg { width: 19px; height: 19px; color: var(--orange-deep); }

/* ---- Page hero (inner pages): breadcrumb and eyebrow must STACK ---- */
.hv-page-hero { padding: 44px 0 20px; text-align: center; }
.hv-page-hero .hv-breadcrumb { display: flex; justify-content: center; gap: 8px;
    align-items: center; font-size: 0.85rem; color: var(--ink-soft);
    font-weight: 600; margin-bottom: 10px; }
.hv-page-hero .hv-breadcrumb a:hover { color: var(--orange-deep); }
.hv-page-hero .hv-breadcrumb .sep { opacity: 0.5; }
.hv-page-hero .hv-eyebrow { display: flex; justify-content: center; }
.hv-page-hero .hv-eyebrow::before { display: none; }
.hv-page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: 14px 0; }
.hv-page-hero h1 em { font-style: italic; color: var(--orange-deep); }
.hv-page-hero > p { color: var(--ink-soft); font-size: 1.14rem; max-width: 640px; margin: 0 auto; }

/* ---- Conditions band (LIGHT — never a dark block) ---- */
.hv-cond-band { background: linear-gradient(140deg, var(--cream-2), var(--peach) 70%, var(--peach-2));
    border: 1px solid var(--line); border-radius: var(--r-xl); padding: 52px 40px;
    color: var(--ink); position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.hv-cond-band h2 { color: var(--ink); font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 8px; }
.hv-cond-band .hv-sub { color: var(--ink-soft); margin-bottom: 30px; max-width: 560px; }
.hv-cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hv-cond-item { background: rgba(255,255,255,0.78); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 22px 20px; text-decoration: none; color: inherit;
    transition: background .3s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.hv-cond-item:hover { background: #fff; transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.hv-cond-item b { font-size: 1.1rem; font-family: var(--font-serif); font-weight: 600; display: block; }
.hv-cond-item span { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }
.hv-cond-item .ic-svg { width: 24px; height: 24px; color: var(--orange-deep); margin-bottom: 10px; }

/* ---- Reviews: badge + auto-advancing slider ---- */
.hv-rev-badge { display: flex; align-items: center; justify-content: center; gap: 16px;
    flex-wrap: wrap; background: rgba(255,255,255,0.72); border: 1px solid var(--line);
    border-radius: 100px; padding: 14px 26px; max-width: 620px; margin: 0 auto 26px;
    box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hv-rev-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hv-rev-badge .g { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.hv-rev-badge .gm { width: 26px; height: 26px; }
.hv-rev-badge .stars { color: var(--orange); font-size: 1.35rem; letter-spacing: 2px; }
.hv-rev-badge .num { font-weight: 700; color: var(--ink-soft); font-size: 0.96rem; }
.hv-rev-badge .go { font-weight: 700; color: var(--orange-ink); display: inline-flex; align-items: center; gap: 6px; }
.hv-rev-badge .go .arr { transition: transform .3s var(--ease); }
.hv-rev-badge:hover .go .arr { transform: translateX(4px); }

.hv-rev-slider { position: relative; margin-top: 26px; }
.hv-rev-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 6px 2px 12px;
    scrollbar-width: none; -ms-overflow-style: none; }
.hv-rev-track::-webkit-scrollbar { display: none; }
.hv-rev-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: var(--r-md); }
.hv-rev-card { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; min-width: 0;
    padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.hv-rev-card .stars { color: var(--orange); letter-spacing: 2px; font-size: 1.05rem; }
.hv-rev-card p { font-size: 1rem; color: var(--ink); flex: 1; font-style: italic; line-height: 1.6; }
.hv-rev-card .who { display: flex; align-items: center; gap: 12px; }
.hv-rev-card .av { width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 800; color: #fff;
    background: linear-gradient(140deg, var(--orange), var(--orange-soft)); }
.hv-rev-card .who b { font-size: 0.98rem; display: block; }
.hv-rev-card .who span { font-size: 0.82rem; color: var(--ink-soft); }
.hv-rev-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer;
    display: grid; place-items: center; transition: background .25s, color .25s; }
.hv-rev-nav svg { width: 20px; height: 20px; }
.hv-rev-nav:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.hv-rev-nav--prev { left: -20px; } .hv-rev-nav--next { right: -20px; }
/* Dots read as 9px but must be tappable: the visual dot is a ::before, the button
   itself is a 44px target. A 9px tap target on a phone is not usable. */
.hv-rev-dots { display: flex; justify-content: center; gap: 0; margin-top: 0; }
.hv-rev-dots button { width: 26px; height: 40px; border: 0; padding: 0; background: none;
    cursor: pointer; display: grid; place-items: center;
    -webkit-tap-highlight-color: transparent; }
.hv-rev-dots button::before { content: ''; display: block; width: 9px; height: 9px;
    border-radius: 50%; background: var(--line); transition: background .25s, width .25s; }
.hv-rev-dots button[aria-selected="true"]::before { background: var(--orange); width: 22px; border-radius: 999px; }

/* ---- Final CTA band ---- */
.hv-final-cta { position: relative; overflow: hidden; text-align: center; color: #fff;
    border-radius: var(--r-xl); padding: 64px 40px;
    background: linear-gradient(140deg, #B85700, var(--orange-deep) 48%, var(--orange) 125%); }
.hv-final-cta h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 14px; position: relative; }
.hv-final-cta p { color: rgba(255,255,255,0.92); font-size: 1.12rem; max-width: 560px;
    margin: 0 auto 30px; position: relative; }
.hv-final-cta .hv-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; }
.hv-final-cta .hv-phone-xl { display: block; font-family: var(--font-serif); font-size: 2rem;
    margin-top: 22px; position: relative; color: #fff; text-decoration: none; }
.hv-final-cta .hv-phone-xl:hover { color: var(--peach-2); }

/* ---- Footer offer strip (compact — must NOT stretch the footer) ---- */
.hv-foot-offer { display: flex; align-items: center; gap: 13px; margin-top: 18px;
    text-decoration: none; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-sm);
    padding: 12px 16px; max-width: 340px;
    transition: background .25s, border-color .25s, transform .25s var(--ease); }
.hv-foot-offer:hover { background: rgba(254,130,0,0.14); border-color: var(--orange); transform: translateY(-2px); }
.hv-foot-offer .price { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700;
    color: var(--orange-soft); line-height: 1; flex: none; }
.hv-foot-offer .txt b { display: block; color: #fff; font-size: 0.95rem; line-height: 1.25; }
.hv-foot-offer .txt span { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.62); line-height: 1.35; }
.site-footer .hv-addr span { display: block; white-space: nowrap; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .hv-cond-grid { grid-template-columns: repeat(2, 1fr); }
    .hv-rev-card { flex: 0 0 calc((100% - 22px) / 2); }
    .hv-rev-nav--prev { left: -8px; } .hv-rev-nav--next { right: -8px; }
    .hv-foot-offer { max-width: none; }
}
@media (max-width: 680px) {
    .hv-cond-grid { grid-template-columns: 1fr; }
    .hv-cond-band { padding: 38px 24px; }
    .hv-rev-card { flex: 0 0 100%; }
    .hv-rev-nav { display: none; }
    .hv-final-cta { padding: 48px 24px; }
    .site-footer .hv-addr span { white-space: normal; }
    /* Footer nav links were 17–26px tall — line-height only, no padding. On a phone
       that is a miss-tap waiting to happen; 44px is the comfortable minimum. */
    .site-footer nav a, .site-footer ul a { display: inline-block; padding: 9px 0; line-height: 1.35; }
    .site-footer li { margin-bottom: 0; }
}

/* ---- Motion (all gated) ---- */
@media (prefers-reduced-motion: no-preference) {
    .hv-announce::after { animation: hvShimmer 5.5s ease-in-out infinite; }
    @keyframes hvShimmer { 0% { left: -40%; } 55%, 100% { left: 120%; } }
}

/* Announce bar: the deal block is a link wrapping icon + chip + sentence */
.hv-announce__deal { display: inline-flex; align-items: center; gap: 10px;
    color: inherit; text-decoration: none; }
.hv-announce__deal:hover .hv-announce__text { text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: var(--orange); }
/* Mobile announce bar.
   Previously the sentence was hidden below 720px, which left "$45" next to a
   phone number and communicated no offer at all. The offer IS the reason paid
   traffic converts, so on mobile the bar stacks into two lines and keeps the
   words. The tag icon goes instead — it carried no information. */
@media (max-width: 720px) {
    .hv-announce__inner { padding: 7px 14px; font-size: 0.83rem; line-height: 1.4; }
    .hv-announce__inner .ic-svg { display: none; }
    /* Block, not flex: as a flex row the chip and the sentence are separate items,
       so the sentence claims the full width and pushes the chip onto its own line.
       Inline flow lets "$45" sit at the head of the sentence where it belongs. */
    .hv-announce__deal { display: block; }
    .hv-announce__price { display: inline; font-size: 0.85rem; padding: 1px 9px;
        margin-right: 6px; white-space: nowrap; }
    .hv-announce__text { display: inline; }
    /* The sticky bottom bar carries Call on every mobile screen — a second phone
       number here only costs vertical space above the fold. */
    .hv-announce__cta { display: none; }
}
@media (max-width: 400px) {
    .hv-announce__inner { font-size: 0.79rem; padding: 7px 11px; }
}

/* Header phone pill (primary CTA) sits tighter than a body button */
.hv-header-phone { padding: 12px 22px; font-size: 0.98rem; }
.hv-header-phone svg { width: 17px; height: 17px; }

/* ---- Hero: trust line + proof badges over the photo ---- */
.hv-hero-trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 22px; font-size: 0.92rem; color: var(--ink-soft); }
.hv-hero-trust .stars { color: var(--orange); letter-spacing: 1px; }
.hv-hero-trust strong { color: var(--ink); }
.hv-hero-media { position: relative; }
/* Badges are deliberately STATIC — the client found the drifting animation distracting. */
.hv-hero-float { position: absolute; background: rgba(255,255,255,0.82);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px 16px; box-shadow: var(--shadow-md); z-index: 2; }
.hv-hero-float b { font-size: 0.95rem; display: block; line-height: 1.2; }
.hv-hero-float span span { font-size: 0.78rem; color: var(--ink-soft); }
.hv-hero-float--a { bottom: 26px; left: -22px; display: flex; align-items: center; gap: 13px; }
.hv-hero-float--a .ring { width: 46px; height: 46px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--orange) 0turn 1turn); display: grid; place-items: center; }
.hv-hero-float--a .ring i { width: 34px; height: 34px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font-style: normal; font-weight: 800;
    font-size: 0.86rem; color: #8F4300; }
.hv-hero-float--b { bottom: 26px; right: -14px; display: flex; align-items: center; gap: 11px; }
/* Hero is Dr. Scott's portrait: square frame, both badges low so neither sits on his face. */
.hv-hero-media .hero-image-frame { aspect-ratio: 1 / 1; max-height: 560px; }
.hv-hero-media .hero-image-frame img { object-position: center top; }
.hv-hero-float--b b { font-family: var(--font-serif); font-size: 1.15rem; }
.hv-hero-float--b .em .ic-svg { width: 26px; height: 26px; color: var(--orange-deep); }
@media (max-width: 900px) {
    .hv-hero-float--a { left: 6px; bottom: 10px; }
    .hv-hero-float--b { right: 6px; bottom: 10px; }
}
@media (max-width: 560px) {
    .hv-hero-float { padding: 9px 12px; }
    .hv-hero-float b { font-size: 0.85rem; }
    .hv-hero-float span span { font-size: 0.7rem; }
    .hv-hero-float--a .ring { width: 38px; height: 38px; }
    .hv-hero-float--a .ring i { width: 28px; height: 28px; font-size: 0.75rem; }
}

/* ---- $45 offer card ---- */
.hv-offer { display: grid; grid-template-columns: 1.15fr 0.85fr; overflow: hidden;
    border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-md); }
.hv-offer__left { padding: 48px 44px; }
.hv-offer__left h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); margin-bottom: 16px; }
.hv-offer__mention { display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
    color: var(--espresso); background: var(--sand); border-radius: 100px;
    padding: 7px 15px; font-size: 0.88rem; margin-bottom: 22px; }
.hv-offer__mention .ic-svg { width: 17px; height: 17px; color: var(--orange-deep); }
.hv-offer__incl { list-style: none; display: grid; gap: 11px; margin: 0 0 26px; padding: 0; }
.hv-offer__incl li { display: flex; gap: 11px; align-items: center; font-weight: 600; }
.hv-offer__incl .ck { width: 24px; height: 24px; border-radius: 50%; flex: none;
    background: var(--peach-2); color: var(--orange-deep); display: grid; place-items: center;
    font-weight: 800; font-size: 0.85rem; }
.hv-offer__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.hv-offer__fine { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.hv-offer__right { background: linear-gradient(155deg, var(--orange), var(--orange-soft));
    position: relative; display: grid; place-items: center; padding: 48px 28px; color: #fff; }
.hv-offer__right::before { content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.22), transparent 60%); }
.hv-offer__seal { position: relative; text-align: center; }
.hv-offer__seal .big { font-family: var(--font-serif); font-size: 5.5rem; font-weight: 700; line-height: 0.9; }
.hv-offer__seal .big .cur { font-size: 2.6rem; vertical-align: top; }
.hv-offer__seal .lbl { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    font-size: 0.82rem; margin-top: 10px; }
.hv-offer__seal .ring { position: absolute; inset: -30px; border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 50%; }
@media (max-width: 860px) {
    .hv-offer { grid-template-columns: 1fr; }
    .hv-offer__left { padding: 34px 26px; }
    .hv-offer__seal .big { font-size: 4.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .hv-offer__seal .ring { animation: hvSpin 34s linear infinite; }
    @keyframes hvSpin { to { transform: rotate(360deg); } }
}

/* Review lengths vary a lot (Google reviews aren't written to a word count).
   Clamp the body so one long review can't force every card to its height. */
.hv-rev-card p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical;
    overflow: hidden; }

/* ---- Header fit ----------------------------------------------------
   Adding the phone pill pushed the header past the viewport: logo 224 +
   nav 657 + actions 399 + padding ≈ 1344px, so between the lg breakpoint
   (1024) and ~1344 the nav/CTA were being clipped by body{overflow-x:hidden}.
   Trim the logo, tighten nav spacing, and hold the phone pill back until
   there is genuinely room for it. */
@media (min-width: 1024px) {
    #main-header .container { gap: 18px; }
    #main-header a[aria-label*="Home"] { width: 168px; flex: none; }
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 18px; }
    #main-header nav[aria-label="Primary"] .nav-link { font-size: 0.93rem; }
    #main-header .hv-header-phone { display: none; }   /* re-shown at 1280 */
}
@media (min-width: 1280px) {
    #main-header a[aria-label*="Home"] { width: 200px; }
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 24px; }
    #main-header .hv-header-phone { display: inline-flex; }
}
@media (min-width: 1440px) {
    #main-header a[aria-label*="Home"] { width: 224px; }
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 30px; }
}

/* style.css sets `hyphens:auto` on mobile h1, which broke the hero headline as
   "chiroprac-tic". Haven headings are display type — never hyphenate them. */
h1, h2, h3, h4, .sc-hero__headline, .font-heading { hyphens: manual; -webkit-hyphens: manual; }

/* =====================================================================
   LAYOUT CONSISTENCY
   `.sc-container--narrow` used to shrink the container to 780px, so the
   content edge jumped 120px -> 340px -> 120px between sections and the page
   read as three different layouts stacked. The container width is now
   constant site-wide; the READING MEASURE is constrained instead, so every
   section starts on the same left edge while prose stays comfortable.
   ===================================================================== */
.sc-container--narrow, .sc-main .sc-container--narrow { max-width: var(--max-content, 1200px); }
/* (reading-measure cap removed — see LAYOUT WIDTH note below) */

/* Centred section headers stay centred within the wider container */
.sc-container--narrow.sc-text-center > *,
.sc-container--narrow > .sc-section-head { margin-left: auto; margin-right: auto; }

/* Post/CPT body content wrapper (see the_content() fix in the templates) */
.sc-entry { margin-top: 0; }

/* =====================================================================
   BUTTON HOVER COLOUR
   style.css has a global `a:hover{color:var(--sc-orange-dark)}`. Because the
   hv- buttons are anchors, hovering turned their label orange — the same
   colour as .hv-btn--call's hover background, so the text and icon vanished.
   Buttons must hold their own colour through every state.
   ===================================================================== */
.hv-btn--call, .hv-btn--call:hover, .hv-btn--call:focus, .hv-btn--call:active { color: var(--ink); }
.hv-btn--call svg, .hv-btn--call:hover svg { color: var(--ink); }
.hv-btn--book, .hv-btn--book:hover, .hv-btn--book:focus { color: var(--ink); }
.hv-btn--book svg, .hv-btn--book:hover svg { color: var(--orange-deep); }
.hv-btn--ghost, .hv-btn--ghost:hover, .hv-btn--ghost:focus { color: var(--espresso); }
/* On an orange band the call button inverts instead (higher specificity wins) */
.hv-on-brand .hv-btn--call:hover, .hv-on-brand .hv-btn--call:focus { color: var(--orange-ink); }
.hv-on-brand .hv-btn--call:hover svg { color: var(--orange-ink); }

/* Primary nav: never let an item wrap to two lines ("New Patients" was 49px tall) */
#main-header nav[aria-label="Primary"] .nav-link { white-space: nowrap; }
#main-header nav[aria-label="Primary"] > * { flex: none; }

/* =====================================================================
   ICON PANEL — used where no genuine photograph exists.
   Deliberate design instead of mismatched stock (the old map put a
   hot-stone massage on Activator Method and surgeons on Corrective Care).
   ===================================================================== */
.hv-iconpanel { display: grid; place-items: center;
    background:
        radial-gradient(120% 100% at 20% 0%, rgba(254,130,0,0.14), transparent 60%),
        linear-gradient(150deg, var(--peach) 0%, var(--cream-2) 60%, var(--sand) 100%);
    position: relative; overflow: hidden; }
.hv-iconpanel::after { content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(51,48,43,0.07) 1px, transparent 1px);
    background-size: 16px 16px; opacity: 0.55; }
.hv-iconpanel svg { width: 74px; height: 74px; color: var(--orange-deep);
    position: relative; z-index: 1; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .45s var(--ease); }
.service-card:hover .hv-iconpanel svg { transform: scale(1.08) rotate(-4deg); }

/* ---- Condition cards: give them presence (they were flat and plain) ---- */
.sc-condition-card { position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 30px 26px 26px; display: block; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.sc-condition-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--orange), var(--orange-soft));
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.sc-condition-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: var(--peach-2); }
.sc-condition-card:hover::before { transform: scaleX(1); }
.sc-condition-card__icon { display: grid; place-items: center; width: 58px; height: 58px;
    border-radius: 18px; margin-bottom: 18px;
    background: linear-gradient(150deg, var(--peach), var(--peach-2));
    color: var(--orange-deep); transition: transform .4s var(--ease); }
.sc-condition-card__icon svg { width: 28px; height: 28px; }
.sc-condition-card:hover .sc-condition-card__icon { transform: scale(1.07) rotate(-4deg); }
.sc-condition-card h3 { font-size: 1.3rem; margin: 0 0 8px; }
.sc-condition-card__sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 16px; }
.sc-condition-card__link { display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 0.9rem; color: var(--orange-ink); }
.sc-condition-card__link .sc-arrow { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.sc-condition-card:hover .sc-condition-card__link .sc-arrow { transform: translateX(4px); }

/* Breathing room under the credential strip (was butting into the next section) */
.hv-cred-strip { padding-bottom: 46px; }
@media (max-width: 680px) { .hv-cred-strip { padding-bottom: 30px; } }

/* ---- Booking: urgency note, online scheduler, embed ---- */
.sc-urgent-note { display: flex; gap: 16px; align-items: flex-start;
    background: var(--peach); border: 2px solid var(--orange);
    border-radius: var(--r-sm); padding: 22px 26px; margin: 24px 0 8px; max-width: 70ch; }
.sc-urgent-note .ic-svg { width: 30px; height: 30px; color: var(--orange-deep); flex: none; margin-top: 2px; }
.sc-urgent-note p { margin: 0; max-width: none; font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.sc-urgent-note strong { display: block; font-size: 1.4rem; margin-bottom: 4px; }
.sc-booking-online { margin-top: 2.6rem; }
.sc-rw-embed { margin-top: 1.1rem; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 18px; min-height: 320px; box-shadow: var(--shadow-sm); }
.sc-booking-lead-form { margin-top: 2.6rem; }

/* Review Wave ("Aloha") ships its own green (#168732) primary buttons, which read
   as a different company's widget dropped into the page. The scheduler renders in
   our DOM rather than an iframe, so it can be brought onto the brand. Scoped to the
   embed, and purely cosmetic — if Review Wave renames these classes the buttons
   simply revert to green, nothing breaks. */
.sc-rw-embed .rw-form-button[class*="submit"],
.sc-rw-embed button.rw-form-button:not([data-section]) {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: var(--ink) !important;
}
.sc-rw-embed .rw-form-button[class*="submit"]:hover,
.sc-rw-embed button.rw-form-button:not([data-section]):hover {
    background: var(--orange-deep) !important;
}
/* Their buttons carry a hard 4px dark-green drop shadow, which reads as green
   even once the face is orange. */
.sc-rw-embed .rw-form-button,
.sc-rw-embed .rw-privacy-button { box-shadow: 0 3px 0 0 var(--orange-ink) !important; }
/* Active step pill is a green gradient. */
.sc-rw-embed .rw-header-progress-active {
    background-image: linear-gradient(to right, var(--orange), var(--orange-deep)) !important;
}
/* Their JS pins the form to a fixed inline height (780px on step 1), leaving ~280px
   of blank white above the buttons on a phone. Letting it size to its content was
   verified through both steps — the patient-info form grows to ~790px on its own. */
.sc-rw-embed .rw-sched-form { height: auto !important; min-height: 0 !important; }

/* Returning patients — deliberately quiet. It is the only route to the
   returning-patient scheduler, and it must not compete with the new-patient CTAs. */
.sc-returning { margin-top: 2.8rem; padding: 22px 24px; background: var(--cream-2);
    border: 1px solid var(--line); border-radius: var(--r-md); }
.sc-returning h2 { font-size: 1.28rem; margin: 0 0 0.4rem; }
.sc-returning > p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.96rem; }
.sc-returning__list { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px; }
.sc-returning__list li { margin: 0; padding: 14px 16px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.95rem; }
.sc-returning__tel, .sc-returning__link { display: inline-flex; align-items: center;
    gap: 7px; margin-top: 8px; font-weight: 700; color: var(--orange-ink);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.sc-returning__tel { font-size: 1.06rem; }
.sc-returning__link .ic-svg { width: 15px; height: 15px; }

/* ---- Insurance carriers ---- */
.sc-insurance { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 32px 30px; box-shadow: var(--shadow-sm); }
.sc-insurance__heading { margin: 0 0 8px; font-size: 1.45rem; }
.sc-insurance__sub { color: var(--ink-soft); margin: 0 0 20px; max-width: 62ch; }
.sc-insurance__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; }
.sc-insurance__chip { background: var(--peach); border: 1px solid var(--peach-2);
    border-radius: 100px; padding: 9px 18px; font-weight: 600; font-size: 0.94rem; color: var(--ink); }
.sc-insurance__note { margin: 0; }

/* ---- Conditions hub hero: was pinched into the narrow column ---- */
.sc-conditions-hero { background:
    radial-gradient(900px 520px at 100% -10%, rgba(254,130,0,0.10), transparent 60%),
    linear-gradient(180deg, var(--peach) 0%, var(--cream) 100%); }
.sc-conditions-hero .sc-text-lead { max-width: 68ch; }
.sc-conditions-hero .sc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---- Reviews page: masonry so uneven review lengths stop leaving holes ---- */
.sc-review-masonry { columns: 3; column-gap: 26px; }
.sc-review-masonry > * { break-inside: avoid; margin-bottom: 26px; display: inline-block; width: 100%; }
@media (max-width: 1024px) { .sc-review-masonry { columns: 2; } }
@media (max-width: 680px)  { .sc-review-masonry { columns: 1; } }

/* ---- Blog byline ---- */
.sc-byline { font-weight: 600; color: var(--ink); }
.sc-byline strong { color: var(--orange-deep); }
.sc-byline__sep { margin: 0 8px; color: var(--ink-soft); }

/* ---- About: photo gallery + review strip ---- */
.sc-about-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.sc-about-gallery figure { margin: 0; border-radius: var(--r-sm); overflow: hidden;
    box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; }
.sc-about-gallery img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease); }
.sc-about-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .sc-about-gallery { grid-template-columns: repeat(2, 1fr); } }

.sc-review-strip { columns: 3; column-gap: 22px; margin-top: 8px; }
.sc-review-strip__item { break-inside: avoid; display: inline-block; width: 100%;
    margin: 0 0 22px; padding: 24px 22px; }
.sc-review-strip__item .stars { color: var(--orange); letter-spacing: 2px; display: block; margin-bottom: 10px; }
.sc-review-strip__item p { font-style: italic; color: var(--ink); margin: 0 0 12px; }
.sc-review-strip__item cite { font-style: normal; font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); }
.sc-review-strip__cta { margin-top: 6px; }
@media (max-width: 1024px) { .sc-review-strip { columns: 2; } }
@media (max-width: 680px)  { .sc-review-strip { columns: 1; } }
/* Three or fewer: one even row (CSS columns would stack two in the first column). */
.sc-review-strip--row { columns: auto; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.sc-review-strip--row .sc-review-strip__item { margin: 0; }

/* Condition grid: cards stretch to equal height, link pinned to the bottom */
.sc-grid--3 .sc-condition-card { display: flex; flex-direction: column; height: 100%; }
.sc-grid--3 .sc-condition-card .sc-condition-card__sub { flex: 1; }

/* =====================================================================
   LAYOUT WIDTH — final
   The earlier 72ch reading cap fixed the left-edge jump but created a worse
   artefact: an h2 spanning 1104px above a paragraph stopping at 694px, which
   reads as broken. And inside centred containers the capped block anchored
   left, so headings looked centred while body copy looked left-aligned
   (/new-patient-special/). Prose now simply fills its container.
   ===================================================================== */
.sc-container--narrow > p,
.sc-container--narrow > ul,
.sc-container--narrow > ol,
.sc-container--narrow > h2,
.sc-container--narrow > h3,
.sc-container--narrow > h4,
.sc-container--narrow > blockquote,
.sc-main .sc-container--narrow > p,
.sc-entry > p, .sc-entry > ul, .sc-entry > ol, .sc-entry > blockquote,
.sc-entry > h2, .sc-entry > h3, .sc-entry > h4 { max-width: none; }
/* Anything that still carries an intrinsic max-width centres itself rather
   than hugging the left edge of a centred section. */
.sc-text-center > *, [style*="text-align:center"] > p { margin-left: auto; margin-right: auto; }

/* ---- Insurance chips: kill the inherited ✓ checklist styling ---- */
.sc-insurance__list { list-style: none; padding-left: 0; }
.sc-insurance__list .sc-insurance__chip { padding-left: 18px; position: static; list-style: none; }
.sc-main .sc-insurance__list li::before,
.sc-insurance__list li::before { content: none !important; display: none !important; }

/* ---- Condition card title was cream (#FBF8F4) on white — ~1.04:1 ---- */
.sc-condition-card h3,
.sc-main .sc-condition-card h3 { color: var(--ink); }
.sc-condition-card__sub, .sc-main .sc-condition-card__sub { color: var(--ink-soft); }

/* ---- Button groups: stop buttons touching (some pairs sat 4px apart) ---- */
.sc-hero__ctas, .hv-cta-row, .sc-cta-banner__ctas, .sc-booking-module__ctas,
.hv-offer__cta, .sc-booking-cta, .sc-landing__ctas {
    display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.sc-text-center .sc-hero__ctas, .sc-cta-banner__ctas { justify-content: center; }
/* Legacy .sc-btn pairs that were only separated by whitespace */
.sc-btn + .sc-btn { margin-left: 0; }
.sc-btn { white-space: nowrap; }

/* ---- Header fit: smaller CTAs, real breathing room before the nav ---- */
@media (min-width: 1024px) {
    #main-header .container { gap: 26px; }
    #main-header .hv-header-phone { padding: 10px 17px; font-size: 0.92rem; }
    #main-header .hv-header-phone svg { width: 15px; height: 15px; }
    #main-header .hv-btn--book { padding: 10px 17px; font-size: 0.92rem; }
    #main-header .flex.items-center.space-x-4 > * + * { margin-left: 10px; }
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 15px; }
    #main-header nav[aria-label="Primary"] .nav-link { font-size: 0.9rem; padding: 8px 6px; }
}
@media (min-width: 1280px) {
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 20px; }
    #main-header nav[aria-label="Primary"] .nav-link { font-size: 0.93rem; padding: 8px 8px; }
    #main-header .hv-header-phone, #main-header .hv-btn--book { padding: 11px 19px; font-size: 0.95rem; }
}

/* =====================================================================
   THE ACTUAL CAUSE OF THE "TEXT WRAPS HALFWAY" PROBLEM
   style.css carries a GLOBAL `p { max-width: var(--max-text, 65ch) }`, so every
   paragraph on the site stopped at ~694px regardless of how wide its section
   was — an h2 at 1104px sitting above a paragraph at 694px. Paragraphs now fill
   their container; deliberate centred components keep their own caps below.
   ===================================================================== */
p { max-width: none; }
.sc-text-lead { max-width: none; }

/* Genuinely centred, deliberately measured components keep a cap (and centre) */
.sc-cta-banner p,
.hv-final-cta p,
.hv-page-hero > p,
.sc-parallax-band p,
.parallax-band p { max-width: 640px; margin-left: auto; margin-right: auto; }
.sc-conditions-hero .sc-text-lead { max-width: 68ch; }
.hv-cond-band .hv-sub { max-width: 60ch; }
.sc-urgent-note p { max-width: none; }
.sc-insurance__sub { max-width: 70ch; }

/* Section headers that are centred stay centred rather than hugging the left */
.sc-main .sc-section-head, .sc-section-head { margin-left: auto; margin-right: auto; }

/* Consistent CTA spacing everywhere (some groups were 12px, one pair sat 4px) */
.sc-main .sc-hero__ctas, .sc-hero__ctas,
.sc-main .sc-cta-banner__ctas, .sc-cta-banner__ctas,
.hv-cta-row, .hv-offer__cta, .sc-booking-module__ctas { gap: 18px !important; }
@media (max-width: 560px) {
    .sc-hero__ctas, .hv-cta-row, .sc-cta-banner__ctas,
    .hv-offer__cta, .sc-booking-module__ctas { gap: 12px !important; }
}

/* =====================================================================
   HEADER OVERLAP — final
   Seven top-level nav items (three with dropdown carets) plus two CTA buttons
   simply do not fit beside the logo. Measured overlap was ~21px at 1440 and
   ~22px at 1024: nav ran underneath the phone button.
   Resolution: the phone pill is the only header CTA (it is the primary action,
   and Book Appointment already appears in the mobile menu, the hero, every CTA
   band and the footer), and the desktop nav does not appear until 1200px —
   below that the hamburger takes over rather than cramming.
   ===================================================================== */
@media (min-width: 1024px) {
    #main-header .container { flex-wrap: nowrap; gap: 24px; }
    #main-header nav[aria-label="Primary"] { flex: 0 1 auto; min-width: 0; }
    #main-header .flex.items-center.space-x-4 { flex: none; }
    #main-header .hv-btn--book { display: none; }
}
/* Below 1200: hamburger, not a cramped nav.
   `.hidden` (line ~357) loses to `.hv-btn { display:inline-flex }` on ordering
   alone, so the two header pills rendered on phones, overflowed the container
   and pushed the menu button off-screen entirely — the nav was unreachable.
   These id-scoped rules settle it at every width instead of relying on order. */
@media (max-width: 1199px) {
    #main-header nav[aria-label="Primary"] { display: none !important; }
    #main-header .hv-navtoggle { display: inline-flex; }
}
@media (max-width: 1023px) {
    #main-header .hv-header-phone,
    #main-header .hv-header-book { display: none; }
    /* Logo at 192px ate half a 390px viewport. Calling is covered twice already
       (announce bar, sticky bar), so the header is logo + menu and nothing else. */
    #main-header { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    #main-header .container { gap: 12px; }
    #main-header a[aria-label] { width: 158px; }
}
@media (max-width: 359px) {
    #main-header a[aria-label] { width: 136px; }
    .hv-navtoggle__label { display: none; }
    .hv-navtoggle { padding: 10px 12px; }
}
@media (min-width: 1200px) {
    #main-header nav[aria-label="Primary"] { display: flex !important; }
    #main-header .hv-navtoggle { display: none; }
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 16px; }
    #main-header nav[aria-label="Primary"] .nav-link { font-size: 0.9rem; padding: 8px 6px; }
    #main-header .hv-header-phone { display: inline-flex; padding: 10px 18px; font-size: 0.93rem; }
}
@media (min-width: 1400px) {
    #main-header nav[aria-label="Primary"] > * + * { margin-left: 22px; }
    #main-header nav[aria-label="Primary"] .nav-link { font-size: 0.95rem; padding: 8px 9px; }
    #main-header .hv-header-phone { padding: 12px 22px; font-size: 0.97rem; }
}

/* The sticky mobile call bar stops at 900px and the desktop nav starts at 1200,
   which left 901–1199 with no visible phone CTA. Keep the pill through that band. */
@media (min-width: 901px) and (max-width: 1199px) {
    #main-header .hv-header-phone { display: inline-flex; padding: 10px 16px; font-size: 0.9rem; }
}

/* Condition cards left-align to match the service cards */
.sc-condition-card, .sc-main .sc-condition-card { text-align: left; }
.sc-condition-card__icon { margin-left: 0; }

/* Book Now returns beside the phone pill. Room was made by moving Blog into the
   New Patients dropdown; it is a low-intent destination and was costing a slot
   that a conversion CTA should own. */
@media (min-width: 1024px) { #main-header .hv-header-book { display: none; } }
@media (min-width: 1200px) {
    #main-header .hv-header-book { display: inline-flex; padding: 10px 16px; font-size: 0.9rem; }
}
@media (min-width: 1400px) {
    #main-header .hv-header-book { padding: 11px 19px; font-size: 0.93rem; }
}

/* =====================================================================
   PPC LANDING PAGES
   ===================================================================== */
.sc-landing-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-top: 14px; padding-bottom: 14px; }  /* not `padding: 14px 0` — that would
    reset .sc-container's horizontal padding and clip the logo at the viewport edge */
.sc-landing-header__logo img { height: 44px; width: auto; display: block; }
.sc-landing-header__nav { display: flex; gap: 22px; }
.sc-landing-header__nav a { font-weight: 600; font-size: 0.93rem; color: var(--ink-soft); text-decoration: none; }
.sc-landing-header__nav a:hover { color: var(--orange-deep); }
@media (max-width: 860px) { .sc-landing-header__nav { display: none; } }
/* Lander header on a phone: logo + full phone number is ~400px of content in a
   390px viewport, so the pill ran off the right edge. Shrink both, and on the
   narrowest screens drop to an icon-only call button rather than clipping it. */
@media (max-width: 520px) {
    .sc-landing-header__inner { gap: 10px; padding-top: 11px; padding-bottom: 11px; }
    .sc-landing-header__logo img { height: 34px; }
    .sc-landing-header .hv-btn--call { padding: 10px 14px; font-size: 0.88rem; gap: 7px; }
    .sc-landing-header .hv-btn--call svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
    .sc-landing-header__logo img { height: 30px; }
    .sc-landing-header .hv-btn--call { padding: 10px 13px; font-size: 0.82rem; }
}

/* Offer badge — was a small pill, now unmissable */
.sc-lp-offer { display: inline-flex; align-items: center; gap: 14px; background: var(--peach);
    border: 1px solid var(--peach-2); border-radius: 100px; padding: 8px 20px 8px 10px; margin-bottom: 18px; }
.sc-lp-offer__price { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; line-height: 1;
    color: #fff; background: var(--orange); border-radius: 100px; padding: 8px 16px; }
.sc-lp-offer__txt b { display: block; font-size: 0.98rem; line-height: 1.2; color: var(--ink); }
.sc-lp-offer__txt span { display: block; font-size: 0.82rem; color: var(--ink-soft); }

.sc-lp-urgent { background: var(--sand); border-radius: var(--r-sm); padding: 12px 16px;
    font-size: 0.92rem; margin: 16px 0 10px; max-width: 56ch; }

/* Credibility card (replaces the form above the fold) */
.sc-lp-cred { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 26px; box-shadow: var(--shadow-md); }
.sc-lp-cred__doc { display: flex; align-items: center; gap: 14px; padding-bottom: 16px;
    border-bottom: 1px solid var(--line); }
.sc-lp-cred__doc img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.sc-lp-cred__doc b { display: block; font-size: 1.05rem; }
.sc-lp-cred__doc span { font-size: 0.85rem; color: var(--ink-soft); }
.sc-lp-cred__list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 9px; }
.sc-lp-cred__list li { position: relative; padding-left: 24px; font-size: 0.93rem; color: var(--ink-soft); }
.sc-lp-cred__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
    border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.sc-lp-cred__rating { display: flex; align-items: center; gap: 10px; padding: 12px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.sc-lp-cred__rating .stars { color: var(--orange); letter-spacing: 1px; }
.sc-lp-cred__quote { margin: 14px 0 0; font-size: 0.9rem; font-style: italic; color: var(--ink); }
.sc-lp-cred__quote cite { display: block; font-style: normal; font-weight: 700; font-size: 0.8rem;
    color: var(--ink-soft); margin-top: 5px; }
.sc-lp-cred__ins { margin: 16px 0 0; font-size: 0.82rem; color: var(--ink-soft); }

.sc-lp-book .sc-rw-embed { max-width: 820px; }
/* =====================================================================
   CONVERSION PROMPT — exit-intent (desktop) / slide-in (mobile)
   Never fires on load, so it is not an intrusive interstitial.
   ===================================================================== */
.sc-prompt[hidden] { display: none; }
.sc-prompt { position: fixed; z-index: 200; }
.sc-prompt__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 30px 30px 26px; position: relative; }
.sc-prompt__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer;
    display: grid; place-items: center; color: var(--ink-soft); }
.sc-prompt__close:hover { background: var(--peach); color: var(--ink); }
.sc-prompt__close svg { width: 17px; height: 17px; }
.sc-prompt__price { display: inline-block; font-family: var(--font-serif); font-size: 1.7rem;
    font-weight: 700; line-height: 1; color: #fff; background: var(--orange);
    border-radius: 100px; padding: 7px 16px; margin-bottom: 14px; }
.sc-prompt__title { font-size: 1.5rem; margin: 0 0 10px; }
.sc-prompt__body { color: var(--ink-soft); margin: 0 0 18px; font-size: 0.96rem; }
.sc-prompt__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-prompt__fine { font-size: 0.78rem; color: var(--ink-soft); margin: 14px 0 0; }

/* Desktop: centred modal with a scrim */
@media (min-width: 861px) {
    .sc-prompt { inset: 0; display: grid; place-items: center; background: rgba(35,32,28,.45);
        backdrop-filter: blur(3px); padding: 24px; }
    .sc-prompt__panel { max-width: 470px; }
    .sc-prompt[hidden] { display: none; }
}
/* Mobile: slide-in above the sticky call bar — never covers the content */
@media (max-width: 860px) {
    .sc-prompt { left: 10px; right: 10px; bottom: 72px; background: none; }
    .sc-prompt__panel { padding: 20px 20px 18px; }
    .sc-prompt__title { font-size: 1.15rem; }
    .sc-prompt__body { font-size: 0.88rem; margin-bottom: 14px; }
    .sc-prompt__ctas .hv-btn { flex: 1 1 auto; justify-content: center; }
    .sc-prompt__fine { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .sc-prompt__panel { animation: scPromptIn .34s var(--ease) both; }
    @keyframes scPromptIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* =====================================================================
   LAYOUT STABILITY
   Images arrive from three sources (theme assets, ACF hero fields, media
   library uploads), so per-image width/height attributes cannot cover them
   all. Reserving space on the CONTAINER does, whatever the source.
   ===================================================================== */
.service-card-image-wrapper { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-hero__image, .hero-image-frame, .about-image-frame, .cbp-image-frame { aspect-ratio: 4 / 3; overflow: hidden; }
.sc-hero__image img, .hero-image-frame img, .about-image-frame img, .cbp-image-frame img {
    width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-about-gallery figure { aspect-ratio: 4 / 3; }
.sd-media { aspect-ratio: 4 / 3; overflow: hidden; }
.sd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-hero-media .hero-image-frame { aspect-ratio: 1 / 1; }
@media (max-width: 767px) { .hv-hero-media .hero-image-frame { aspect-ratio: 5 / 4; } } /* keeps the H1 above the fold */
.sc-lp-cred__doc img { aspect-ratio: 1 / 1; }
/* Portrait sources should not be cropped square in the About hero */
.sc-hero__image--portrait { aspect-ratio: 3 / 4; }

/* ---- Contrast (Lighthouse/axe, 2026-10) ----
   Brand orange #FE8200 is 2.4:1 on cream — fine for fills, not for text.
   Text links on light backgrounds use the AA-safe deep orange (6.8:1). */
.sc-reviewer a { color: #8F4300; text-decoration: underline; text-underline-offset: 2px; }
.sc-landing-footer p a { text-decoration: underline; text-underline-offset: 2px; }
/* Bare URLs in migrated blog posts must wrap on phones */
.sc-post-content a { overflow-wrap: anywhere; }
.sc-landing-footer strong { color: #fff; }

/* /conditions/ on phones: 15 full cards stacked to ~10,600px. Collapse each to a
   compact tappable row (icon | title + two-line summary) — the whole card is the
   link, so the "Learn more" label is redundant here. */
@media (max-width: 640px) {
    .post-type-archive-condition .sc-grid--3 { gap: 10px; }
    .post-type-archive-condition .sc-condition-card {
        display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
        padding: 14px 16px; height: auto; }
    .post-type-archive-condition .sc-condition-card__icon {
        grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; margin: 0; }
    .post-type-archive-condition .sc-condition-card__icon svg { width: 22px; height: 22px; }
    .post-type-archive-condition .sc-condition-card h3 { font-size: 1.08rem; margin: 0; }
    .post-type-archive-condition .sc-condition-card__sub {
        font-size: 0.88rem; margin: 2px 0 0; line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .post-type-archive-condition .sc-condition-card__link { display: none; }
}

/* Google preferred-source button (footer brand column) */
/* Google renders nothing until the live domain is eligible, so collapse it until then. */
.hv-foot-pref { margin-top: 1.25rem; }
.hv-foot-pref:empty { display: none; }