/* ═══════════════════════════════════════════════════════════════════════════
   High Stone Wholistic Wellness — Layout: ribbon, boutique header, hero,
   CTA banner, big-type footer
   Anatomy is deliberately distinct from sibling projects: centered-logo
   two-deck header, centered cathedral hero, editorial sections, typographic
   footer. No dark utility topbar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ribbon (slim, light — replaces the classic dark topbar) ───────────── */

.ribbon {
    background: var(--color-paper-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-copper-text);
    padding-block: var(--space-2);
    position: relative;
    z-index: var(--z-content);
}

.ribbon .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    text-align: center;
}

.ribbon a { color: var(--color-copper-text); }
.ribbon a:hover { color: var(--color-primary-dark); }
.ribbon .open-chip { font-size: inherit; font-weight: inherit; color: var(--color-copper-text); }
.ribbon__dot { opacity: 0.5; }

/* ── Header — centered logo, nav deck below (boutique two-deck) ────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.scrolled {
    background: rgba(247, 243, 236, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-header__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
    height: 78px;
}

.site-header__top > .header-phone { justify-self: start; }
.site-header__top > .header-actions { justify-self: end; }

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    justify-self: center;
}

.logo:hover { color: var(--color-text); }
.logo__mark { height: 44px; width: auto; flex-shrink: 0; border-radius: 0; }

/* The wordmark is the client's own lettering, not type — the brush face in
   their logo has no web equivalent, and setting it in Fraunces read as a
   different brand next to the mark. */
.logo__wordmark {
    height: 38px;
    width: auto;
    flex-shrink: 0;
}

/* ── Nav deck (second row, centered) ───────────────────────────────────── */

.nav {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--color-border);
}

.site-header.scrolled .nav { border-top-color: transparent; }

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
}

.nav__item { position: relative; }

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    color: var(--color-text);
    border-radius: var(--radius-full);
}

.nav__link:hover { color: var(--color-primary-dark); background: var(--color-primary-soft); }

.nav__link[aria-current="page"],
.nav__link.active { color: var(--color-primary-dark); }

.nav__link svg { transition: transform var(--transition-fast); }

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 300px;
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast),
        visibility var(--transition-fast);
    z-index: var(--z-dropdown);
}

.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* A closed dropdown is visibility:hidden, which still occupies layout — so one
   centred under a right-hand nav item pushes the PAGE's scroll width past the
   viewport (a horizontal scrollbar on the whole site) between roughly 1025px,
   where the desktop nav appears, and 1200px. Anchor the last two items'
   dropdowns to their own right edge so they can never reach past the header. */
.nav__item:nth-last-child(-n+2) > .dropdown {
    left: auto;
    right: 0;
    transform: translate(0, 6px);
}
.nav__item:nth-last-child(-n+2):hover > .dropdown,
.nav__item:nth-last-child(-n+2):focus-within > .dropdown {
    transform: translate(0, 0);
}

.nav__item:hover > .nav__link svg,
.nav__item:focus-within > .nav__link svg { transform: rotate(180deg); }

.dropdown a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.dropdown a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.dropdown a span { font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; }

.dropdown__all {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.dropdown__all a { font-weight: var(--weight-semibold); color: var(--color-primary-dark); }

/* Pricing dropdown — the two exact menus first, then the money pages.
   Wider than a service list because each row carries a qualifier. */
.dropdown--pricing { min-width: 290px; }

/* Locations mega-dropdown — two mini location cards with photo thumbs */
.dropdown--locations {
    display: grid;
    grid-template-columns: repeat(2, 230px);
    gap: var(--space-3);
    padding: var(--space-4);
}

.dropdown--locations .loc-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    padding: 0 0 var(--space-3);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dropdown--locations .loc-item:hover {
    background: var(--color-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.loc-item__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--space-2);
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-paper-alt));
}

.loc-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.loc-item__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    padding-inline: var(--space-4);
}

.loc-item__meta {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    padding-inline: var(--space-4);
    line-height: 1.4;
}

.loc-item__status {
    font-size: var(--text-xs);
    padding-inline: var(--space-4);
    margin-top: var(--space-1);
}

.dropdown--locations .dropdown__all { grid-column: 1 / -1; }

/* Generic dropdown spans are nowrap (price tags) — location text must wrap */
.dropdown--locations .loc-item span { white-space: normal; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: var(--space-4); }

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

.header-phone svg { color: var(--color-copper-text); }

/* Mobile toggles */
.nav-toggle { display: none; padding: var(--space-2); color: var(--color-text); }
.nav-toggle svg { display: block; }

/* Mobile nav panel */
.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: var(--z-overlay);
    background: var(--color-paper);
    padding: var(--space-6);
    overflow-y: auto;
}

body.nav-open .mobile-nav { display: block; }
body.nav-open { overflow: hidden; }

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}

.mobile-nav__list { display: grid; gap: var(--space-1); }

.mobile-nav__list > li > a,
.mobile-nav__list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    list-style: none;
}

.mobile-nav__list summary::-webkit-details-marker { display: none; }

.mobile-nav__sub { padding: var(--space-2) var(--space-4); display: grid; gap: var(--space-1); }

.mobile-nav__sub a {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    color: var(--color-text-secondary);
}

.mobile-nav__cta {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* ── Hero — centered "cathedral" composition ───────────────────────────── */

.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 560px 380px at 0% 100%, rgba(110, 130, 115, 0.10), transparent 65%);
}

.hero > .container { position: relative; z-index: var(--z-content); }

/* Immersive full-bleed hero: the photo is the room, a forest scrim carries
   ivory type. No "content + image panel" split — you're already inside. */
.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88vh, 780px);
    padding-block: var(--space-24) var(--space-20);
    background: var(--color-primary-dark);
}

.home-hero__bg {
    position: absolute;
    inset: 0;
}

.home-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
    border-radius: 0;
}

.home-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(78deg, rgba(24, 36, 30, 0.93) 0%, rgba(24, 36, 30, 0.78) 38%, rgba(24, 36, 30, 0.42) 68%, rgba(24, 36, 30, 0.24) 100%),
        linear-gradient(to top, rgba(24, 36, 30, 0.62), transparent 40%);
}

.home-hero__content {
    position: relative;
    z-index: var(--z-content);
    max-width: 44rem;
}

.home-hero h1 {
    font-size: clamp(var(--text-5xl), 6.5vw, 4.75rem);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-6);
}

.home-hero h1 em {
    font-style: italic;
    color: var(--color-accent-soft);
}

/* Rendered as an <h2> for the keyword signal, styled as body prose */
.home-hero__sub {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: rgba(248, 245, 238, 0.86);
    max-width: 38rem;
    margin-bottom: var(--space-8);
}

.home-hero__trust {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: rgba(248, 245, 238, 0.78);
}

.home-hero__trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.home-hero__trust svg { color: var(--color-accent-soft); }

/* Motif recolors for the dark hero */
.home-hero .hero-motif__ring { border-color: rgba(248, 245, 238, 0.18); }
.home-hero .hero-motif__cairn { color: rgba(248, 245, 238, 0.3); opacity: 0.5; }
.home-hero .hero-motif__branch { color: var(--color-accent-soft); opacity: 0.24; }

.hero-float {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-10);
    z-index: var(--z-content);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xl);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-align: left;
}

.hero-float__score {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.hero-float:hover { color: var(--color-text); }

/* Inner-page hero */
.page-hero {
    padding-block: var(--space-16) var(--space-12);
    border-bottom: 1px solid var(--color-border);
}

.page-hero .breadcrumbs { margin-bottom: var(--space-6); }
.page-hero h1 { max-width: 52rem; margin-bottom: var(--space-4); }
.page-hero__sub { font-size: var(--text-lg); max-width: 46rem; }
.page-hero .btn-row { margin-top: var(--space-8); }
.page-hero .location-chips { margin-top: var(--space-5); }

/* ── Two-column content blocks ─────────────────────────────────────────── */

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    align-items: center;
}

.split--reverse > .split__media { order: 2; }

.split__media {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.split__content > p + p { margin-top: var(--space-4); }
.split__content .btn-row { margin-top: var(--space-8); }
.split__content .checklist { margin-top: var(--space-6); }

/* ── CTA banner — asymmetric: copy left, arch image right ──────────────── */

.cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-dark);
    color: var(--color-text-inverse);
    padding-block: var(--space-20);
}

.cta-banner__grid {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-16);
    align-items: center;
}

.cta-banner h2 { color: var(--color-text-inverse); margin-bottom: var(--space-4); }

.cta-banner p {
    color: rgba(248, 245, 238, 0.78);
    max-width: 38rem;
    margin-bottom: var(--space-8);
}

/* Portrait proportions so the full arch is earned, not squashed */
.cta-banner__media {
    position: relative;
    border-radius: 300px 300px var(--radius-xl) var(--radius-xl);
    aspect-ratio: 4 / 5;
    max-width: 320px;
    width: 100%;
    justify-self: center;
}

.cta-banner__media::before {
    content: '';
    position: absolute;
    inset: -12px;
    border: 1px solid var(--color-copper);
    opacity: 0.5;
    border-radius: 312px 312px calc(var(--radius-xl) + 12px) calc(var(--radius-xl) + 12px);
}

.cta-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.cta-banner__ripple {
    position: absolute;
    left: -180px;
    top: 50%;
    width: 480px;
    height: 480px;
    margin-top: -240px;
    border: 1px solid rgba(248, 245, 238, 0.14);
    border-radius: var(--radius-full);
    pointer-events: none;
}

.cta-banner__ripple::before,
.cta-banner__ripple::after {
    content: '';
    position: absolute;
    inset: 60px;
    border: 1px solid rgba(248, 245, 238, 0.10);
    border-radius: var(--radius-full);
}

.cta-banner__ripple::after { inset: 130px; border-color: rgba(248, 245, 238, 0.07); }

/* ── Footer — typographic, centered, big-type (not a link-grid) ────────── */

.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-dark);
    color: rgba(248, 245, 238, 0.75);
    padding-top: var(--space-20);
    font-size: var(--text-sm);
    text-align: center;
}

.footer-motif {
    display: flex;
    justify-content: center;
    color: var(--color-accent-soft);
    opacity: 0.5;
    margin-bottom: var(--space-5);
}

.footer-slogan {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    max-width: 24ch;
    margin-inline: auto;
}

.footer-slogan em { font-style: italic; color: var(--color-accent-soft); }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-8);
    margin-top: var(--space-10);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-nav a { color: rgba(248, 245, 238, 0.8); }
.footer-nav a:hover { color: var(--color-white); }

.footer-naps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6) var(--space-16);
    margin-top: var(--space-12);
}

.footer-nap { max-width: 20rem; }

.footer-nap__city {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-nap__city svg { color: var(--color-accent-soft); }
.footer-nap a { color: rgba(248, 245, 238, 0.75); }
.footer-nap a:hover { color: var(--color-white); }
.footer-nap p { color: rgba(248, 245, 238, 0.75); margin-inline: auto; margin-top: var(--space-2); }

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-10);
}

.footer-meta .rating-badge {
    background: rgba(248, 245, 238, 0.06);
    border-color: rgba(248, 245, 238, 0.15);
    color: rgba(248, 245, 238, 0.85);
}

.footer-meta a { color: rgba(248, 245, 238, 0.75); }
.footer-meta a:hover { color: var(--color-white); }

.footer-disclaimer {
    margin-top: var(--space-12);
    padding-bottom: var(--space-6);
    font-size: var(--text-xs);
    color: rgba(248, 245, 238, 0.62);
    max-width: 60rem;
    margin-inline: auto;
}

.footer-bottom {
    border-top: 1px solid rgba(248, 245, 238, 0.12);
    padding-block: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-xs);
    color: rgba(248, 245, 238, 0.65);
}

.footer-bottom a { color: rgba(248, 245, 238, 0.72); }
.footer-bottom a:hover { color: var(--color-white); }

/* ── Mobile CTA bar ────────────────────────────────────────────────────── */

.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-ctabar);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(38, 41, 43, 0.08);
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.mobile-cta-bar .btn { min-height: 48px; }

body.nav-open .mobile-cta-bar { display: none; }