/* pages.css, page-specific tweaks layered over components */

.section { position: relative; }

/* --------------------------------------------------------------------
   Promise, cream relief after hero. One soft gold glow, far corner.
   -------------------------------------------------------------------- */
.section--promise {
    background:
        radial-gradient(ellipse 55% 45% at 92% 8%, rgba(232, 184, 51, 0.07), transparent 65%),
        linear-gradient(180deg, var(--c-cream) 0%, #fff 100%);
}

/* --------------------------------------------------------------------
   Pillars, the second emotional anchor. Full-bleed navy with a gold
   accent rail top and bottom (matches the jingle treatment), warm
   gold/blue atmospherics drifting in from opposite corners, cards
   sit as light-on-dark glass.
   -------------------------------------------------------------------- */
.section--pillars {
    /* Navy field + integrated atmospherics in one paint layer. */
    background:
        radial-gradient(ellipse 55% 45% at 88% 12%, rgba(232, 184, 51, 0.22), transparent 62%),
        radial-gradient(ellipse 50% 40% at 8% 88%, rgba(232, 184, 51, 0.10), transparent 65%),
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 255, 255, 0.035), transparent 72%),
        linear-gradient(180deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-deep) 100%);
    color: #fff;
    overflow: hidden;
    /* Extra room at the bottom so the wave divider doesn't crowd the cards. */
    padding-bottom: clamp(var(--space-9), 11vw, var(--space-10));
}
/* Top gold rule, matches the jingle section's editorial accent. */
.section--pillars::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    /* 1.22.94: softened gold separator (was 0.55) so it reads as a quiet hairline. */
    background: linear-gradient(90deg, transparent, rgba(232, 184, 51, 0.30), transparent);
    z-index: 2;
}
/* Soft wave divider sealing the bottom into the next section. The SVG is
   inline so there is no extra HTTP request. Filled in cream so it blends
   into Why Parkway's near-white field. Used once on the page. */
.section--pillars::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: clamp(40px, 6vw, 72px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 80 V40 C240 70 480 80 720 78 S1200 50 1440 38 V80 Z' fill='%23ffffff'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}
.section--pillars > .container { position: relative; z-index: 1; }
.section--pillars .eyebrow { color: var(--c-accent); }
.section--pillars .section__title { color: #fff; }
.section--pillars .section__lede { color: rgba(255, 255, 255, 0.82); }
/* Light cards on the navy field, same warm cream blend but with a softer
   shadow and a hairline gold inside-border so they read as premium. */
.section--pillars .card--pillar {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF5 100%);
    box-shadow:
        0 22px 48px -28px rgba(0, 0, 0, 0.55),
        0 6px 18px -10px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(232, 184, 51, 0.14);
    border-color: transparent;
}
.section--pillars .card--pillar .card__title { color: var(--c-primary-deep); }
.section--pillars .card--pillar .card__cta { color: var(--c-primary); }
.section--pillars .card--pillar:hover {
    box-shadow:
        0 28px 60px -28px rgba(0, 0, 0, 0.6),
        0 10px 22px -10px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(232, 184, 51, 0.32);
}


/* --------------------------------------------------------------------
   Why Parkway, cream relief after the navy anchor. Pull the Why
   section up under the pillars wave so it absorbs the curve. The
   numbered cards are the only ornament; the background stays quiet.
   -------------------------------------------------------------------- */
.section--why {
    background:
        radial-gradient(ellipse 70% 55% at 16% 8%, rgba(232, 184, 51, 0.08), transparent 70%),
        radial-gradient(ellipse 60% 45% at 88% 96%, rgba(27, 78, 143, 0.05), transparent 72%),
        #fff;
    /* Pull up under the curve from the section above. */
    margin-top: -1px;
    padding-top: calc(var(--space-8) + 24px);
}
.section--why .card--why .card__num {
    font-size: var(--fs-30);
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------
   Insurance, quiet white, one navy whisper bottom-center.
   -------------------------------------------------------------------- */
.section--insurance {
    background:
        radial-gradient(ellipse 65% 45% at 50% 100%, rgba(27, 78, 143, 0.05), transparent 72%),
        #fff;
}

/* --------------------------------------------------------------------
   Services & Products, pair them by tone so the eye reads them as a
   diptych: services on warm white, products on cream with two soft
   accent washes from opposite corners.
   -------------------------------------------------------------------- */
.section--services {
    background:
        radial-gradient(ellipse 55% 40% at 92% 95%, rgba(27, 78, 143, 0.06), transparent 72%),
        linear-gradient(180deg, #fff, var(--c-cream));
}
/* --------------------------------------------------------------------
   Products, boutique pharmacy retail feel. Warm cream base, very faint
   diagonal weave (paper texture, not pattern), gold/navy wash anchored
   in opposite corners, and a subtle gold rail at the top to signal a
   shift in tone from the editorial sections above. Cards inside this
   section pick up a softer rounded display-shelf look.
   -------------------------------------------------------------------- */
.section--product-feature {
    background:
        radial-gradient(ellipse 55% 45% at 88% 10%, rgba(232, 184, 51, 0.10), transparent 65%),
        radial-gradient(ellipse 50% 40% at 8% 88%, rgba(27, 78, 143, 0.06), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--c-cream) 100%);
    position: relative;
    overflow: hidden;
}
.section--product-feature::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    /* 1.22.94: softened gold separator (was 0.55). */
    background: linear-gradient(90deg, transparent, rgba(232, 184, 51, 0.30), transparent);
}
.product-feature { max-width: 980px; margin: 0 auto; }
.product-feature__body {
    /* Float-aware container so the media-block can wrap text. */
    overflow: hidden;
    max-width: none;
}
.product-feature__body::after { content: ""; display: block; clear: both; }

.section--products {
    /* Faint diagonal weave at ~3% opacity = paper, not pattern. */
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(232, 184, 51, 0.025) 0 2px,
            transparent 2px 14px),
        radial-gradient(ellipse 48% 38% at 10% 18%, rgba(27, 78, 143, 0.06), transparent 72%),
        radial-gradient(ellipse 40% 30% at 92% 82%, rgba(232, 184, 51, 0.10), transparent 70%),
        linear-gradient(180deg, var(--c-cream) 0%, #FFFAF0 100%);
    border-top: 1px solid rgba(232, 184, 51, 0.18);
}
.section--products .card--product {
    /* Display-shelf card, rounder, warmer, with a hairline gold underline
       that reads like a price-rail without being literal. */
    background: linear-gradient(180deg, #fff 0%, #FFFCF5 100%);
    border: 1px solid rgba(232, 184, 51, 0.20);
    border-radius: 20px;
    box-shadow:
        0 18px 40px -28px rgba(15, 32, 43, 0.22),
        0 4px 10px -6px rgba(15, 32, 43, 0.12),
        inset 0 -2px 0 rgba(232, 184, 51, 0.18);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.section--products .card--product:hover {
    box-shadow:
        0 24px 50px -28px rgba(15, 32, 43, 0.30),
        0 8px 18px -10px rgba(15, 32, 43, 0.16),
        inset 0 -2px 0 var(--c-accent);
}
.section--products .card--product .card__title {
    font-family: var(--font-display);
    color: var(--c-primary-deep);
}

/* --------------------------------------------------------------------
   Locations, keep white, but add a subliminal warm wash so it doesn't
   read as a plain panel.
   -------------------------------------------------------------------- */
.section--locations {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232, 184, 51, 0.06), transparent 72%),
        #fff;
}

/* Cross-site note shown on a location-detail page when the location is
   actually hosted on the sister site. Quiet, editorial, not a banner. */
.sister-site-note {
    margin-top: var(--space-4);
    padding: 10px 16px;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(232, 184, 51, 0.10);
    border: 1px solid rgba(232, 184, 51, 0.35);
    border-radius: var(--radius-pill);
    color: var(--c-ink);
    font-size: var(--fs-14);
}
.sister-site-note a {
    color: var(--c-primary-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* 1.26.27: the jingle was a third dark-blue slab right under the hero and the
   blue trust strip, so the top of the page read as "too much blue." Re-skinned
   as a warm cream + gold panel: a soft gold radial glow top-right, a faint navy
   glow bottom-left for depth, a gold accent line at the top, a gold hairline at
   the bottom, and white floating player cards. Breaks up the blue and pops,
   using the core theme colors (cream, gold, navy). */
.section--jingle {
    /* Warm cream with a gold "stage glow" behind the player cards. The live
       equalizer (.jingle__wave) animates along the bottom (see below). */
    background:
        radial-gradient(ellipse 58% 62% at 80% 44%, rgba(232, 184, 51, 0.20), transparent 62%),
        radial-gradient(ellipse 55% 48% at 88% 4%, rgba(232, 184, 51, 0.30), transparent 60%),
        radial-gradient(ellipse 52% 46% at 4% 96%, rgba(27, 78, 143, 0.07), transparent 60%),
        linear-gradient(165deg, #FFFBF2 0%, #F7EEDB 52%, #F0E2C6 100%);
    color: var(--c-ink);
    position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(232, 184, 51, 0.40);
    /* room for the downward "flow" wedge + splash above the heading, and for the
       animated equalizer along the bottom (kept compact so the section is not tall) */
    padding-top: clamp(60px, 6vw, var(--space-8));
    padding-bottom: clamp(52px, 5vw, var(--space-7));
}
/* 1.26.32: a LIVE audio equalizer along the bottom so the section feels like
   the jingle is playing. Bars bounce with staggered timing, echoing the gold eq
   bars on the player cards. Decorative + aria-hidden in the markup; edges fade
   out with a mask; motion is dropped for prefers-reduced-motion. */
.jingle__wave {
    position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
    display: flex; align-items: flex-end; gap: 4px; padding-inline: 10px;
    pointer-events: none; z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.jingle__wave span {
    flex: 1 1 0; height: 100%;
    border-radius: 4px 4px 0 0;
    background: rgba(27, 78, 143, 0.16);
    transform: scaleY(0.3); transform-origin: bottom;
    animation: jingle-bar 1.8s var(--ease-in-out, ease-in-out) infinite;
}
.jingle__wave span:nth-child(4n)   { background: rgba(232, 184, 51, 0.55); }
.jingle__wave span:nth-child(7n)   { background: rgba(232, 184, 51, 0.35); }
.jingle__wave span:nth-child(2n)   { animation-duration: 2.4s; }
.jingle__wave span:nth-child(3n)   { animation-duration: 1.4s; }
.jingle__wave span:nth-child(3n+1) { animation-delay: -0.4s; }
.jingle__wave span:nth-child(4n+2) { animation-delay: -1.0s; }
.jingle__wave span:nth-child(5n)   { animation-delay: -0.7s; }
.jingle__wave span:nth-child(6n+3) { animation-delay: -1.5s; }
@keyframes jingle-bar {
    0%, 100% { transform: scaleY(0.26); }
    50%      { transform: scaleY(1); }
}
/* Note: matches the existing .jingle__player-eq bars, which animate regardless
   of prefers-reduced-motion, so the equalizer stays consistent with them. */
/* 1.26.28 "flow": the blue trust strip above drips DOWN into the cream as an
   upside-down pyramid (full-width at the top, narrowing to a center point),
   with a glowing gold splash + a couple of splatter dots at the tip, so the
   sections feel connected and modern instead of meeting at a hard line. */
.section--jingle::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 44px;
    background: linear-gradient(180deg, var(--c-primary-deep) 0%, var(--c-primary) 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 6px 10px rgba(19, 56, 112, 0.30));
    pointer-events: none;
}
.section--jingle::after {
    content: ""; position: absolute; top: 39px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow:
        0 0 0 5px rgba(232, 184, 51, 0.18),
        0 0 0 11px rgba(232, 184, 51, 0.07),
        0 0 14px rgba(232, 184, 51, 0.65),
        20px 9px 0 -4px rgba(232, 184, 51, 0.70),
        -18px 12px 0 -5px rgba(27, 78, 143, 0.55),
        12px 17px 0 -6px rgba(27, 78, 143, 0.45);
    pointer-events: none;
}
.section--jingle > .container { position: relative; z-index: 1; }
.section--jingle .eyebrow { color: var(--c-gold-deep); }
.section--jingle .section__title, .section--jingle h2 { color: var(--c-primary-deep); }
.section--jingle .section__lede { color: var(--c-ink-soft); }
.section--jingle .jingle__copy-block {
    color: var(--c-primary-deep); border-left-color: var(--c-accent);
    background: rgba(255, 255, 255, 0.55); border-radius: 0 12px 12px 0;
    /* tighter so the section isn't so tall */
    font-size: var(--fs-16); line-height: 1.45;
    padding-block: var(--space-2); margin-block: var(--space-3);
}
/* compact the player cards + gaps to bring the section height down */
.section--jingle .jingle__players { gap: var(--space-3); }
.section--jingle .jingle__player { padding: var(--space-4) var(--space-5); gap: var(--space-3); }
.section--jingle .section__lede { margin-bottom: var(--space-3); }
.section--jingle .glass {
    background: #fff; border: 1px solid var(--c-line);
    color: var(--c-primary-deep); box-shadow: var(--shadow-2);
}
.section--jingle .glass .jingle__player-empty { color: var(--c-ink-soft); }
.section--community { background: #fff; }
.section--faq { background: var(--c-cream); }
.section--cta { background: #fff; padding-bottom: clamp(20px, 3.5vw, 40px); }

/* ===== About page ===== */
.about-hero__lede { font-size: var(--fs-20); max-width: 72ch; }

.section--story {
    background: linear-gradient(180deg, #fff, var(--c-cream));
}
.section--story .prose p { font-size: var(--fs-18); line-height: 1.7; max-width: 72ch; margin: 0 auto var(--space-4); }

.section--timeline {
    background:
        radial-gradient(ellipse 50% 40% at 80% 0%, rgba(232, 184, 51, 0.10), transparent 60%),
        #fff;
}
.timeline { list-style: none; padding: 0; margin: 0; max-width: 880px; margin-inline: auto; position: relative; }
.timeline::before {
    content: ""; position: absolute; left: 120px; top: 12px; bottom: 12px;
    width: 2px; background: linear-gradient(180deg, var(--c-accent), rgba(232, 184, 51, 0.2));
}
.timeline__item {
    display: grid; grid-template-columns: 100px 1fr; gap: var(--space-5);
    align-items: start; margin-bottom: var(--space-5); position: relative;
}
.timeline__year {
    font-family: var(--font-display); font-size: var(--fs-30); font-weight: 600;
    color: var(--c-primary-deep); text-align: right; padding-top: 6px;
    letter-spacing: -0.01em;
}
.timeline__card {
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
    padding: var(--space-5); position: relative;
    box-shadow: var(--shadow-1);
    margin-left: 24px;
}
.timeline__card::before {
    content: ""; position: absolute; left: -36px; top: 18px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--c-accent); box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(232, 184, 51, 0.3);
}
.timeline__label { margin: 0 0 var(--space-2); font-size: var(--fs-20); color: var(--c-primary-deep); }
.timeline__body  { margin: 0; color: var(--c-ink-soft); }
@media (max-width: 700px) {
    .timeline::before { left: 24px; }
    .timeline__item { grid-template-columns: 60px 1fr; gap: var(--space-3); }
    .timeline__year { font-size: var(--fs-20); text-align: left; padding-left: 0; }
    .timeline__card { margin-left: 0; }
    .timeline__card::before { left: -40px; }
}

.section--values {
    background: linear-gradient(180deg, var(--c-cream), #fff);
}
.card--value { background: linear-gradient(180deg, #fff, #FBFAF5); }

.section--team {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(27, 78, 143, 0.05), transparent 70%),
        var(--c-cream);
}
.card--team { text-align: center; padding-block: var(--space-5); }
.card--team__photo {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto var(--space-3);
    object-fit: cover; object-position: top; display: block;
    box-shadow: var(--shadow-2);
}
.card--team__photo--placeholder {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-deep));
    color: var(--c-accent); display: grid; place-items: center;
    font-family: var(--font-display); font-size: 36px; font-weight: 700;
}
.card--team__role {
    color: var(--c-primary); font-weight: 600; font-size: var(--fs-14);
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-2);
}

/* ===== Our Team page (/our-team) ============================================ */
.section--team {
    background:
        radial-gradient(ellipse 55% 40% at 80% 8%, rgba(232, 184, 51, 0.08), transparent 70%),
        radial-gradient(ellipse 50% 40% at 12% 92%, rgba(27, 78, 143, 0.05), transparent 72%),
        #fff;
}
.team-grid { gap: var(--space-5); }
.card--team-profile {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #fff 0%, #FBFAF5 100%);
    border: 1px solid var(--c-line);
    border-radius: 18px;
    padding: 0; overflow: hidden;
    text-decoration: none;
    color: var(--c-ink);
    box-shadow: var(--shadow-1, 0 2px 6px rgba(15,32,43,0.06));
    transition: box-shadow .25s var(--ease-out), border-color .2s ease;
}
.card--team-profile.is-featured { border-color: rgba(232, 184, 51, 0.55); }
.card--team-profile:hover {
    border-color: var(--c-accent);
    box-shadow:
        0 22px 48px -28px rgba(15, 32, 43, 0.35),
        0 6px 14px -8px rgba(15, 32, 43, 0.18);
}
.team-card__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--c-primary-deep), var(--c-primary));
    overflow: hidden;
}
/* object-position: top anchors the crop to the TOP of the headshot so a
   portrait taller than the square frame loses height from the bottom, never
   from the head/face. (Default center crop was cutting off the tops of heads.) */
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.team-card__initial {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--c-accent);
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: clamp(64px, 12vw, 96px);
}
.team-card__badge {
    position: absolute; left: 12px; bottom: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-primary-deep);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,0.3);
}
.team-card__badge--lg { font-size: 12px; padding: 6px 14px; }
.team-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    display: flex; flex-direction: column; gap: 8px;
}
.team-card__name {
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: var(--fs-24, 1.4rem);
    color: var(--c-primary-deep);
    line-height: 1.15;
}
.team-card__role {
    margin: 0;
    color: var(--c-primary);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.team-card__head {
    margin: 0;
    color: var(--c-ink);
    line-height: 1.5;
}
.team-card__creds {
    list-style: none; padding: 0; margin: 4px 0 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.team-card__creds li {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(27, 78, 143, 0.07);
    color: var(--c-primary-deep);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em;
}
.team-card__cta {
    margin-top: 6px;
    color: var(--c-primary);
    font-weight: 600;
    font-size: 13px;
}

/* ===== Individual /our-team/<slug> profile page ============================ */
.team-detail-hero { background: linear-gradient(180deg, var(--c-cream) 0%, #fff 100%); }
.team-detail-hero__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-7);
    align-items: center;
}
@media (max-width: 720px) {
    .team-detail-hero__grid { grid-template-columns: 1fr; }
}
.team-detail-hero__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--c-primary-deep), var(--c-primary));
    border-radius: 20px; overflow: hidden;
    box-shadow:
        0 28px 60px -28px rgba(15, 32, 43, 0.45),
        inset 0 0 0 1px rgba(232, 184, 51, 0.25);
}
.team-detail-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.team-detail-hero__initial {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--c-accent);
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 96px;
}
.team-detail-hero__loc {
    color: var(--c-ink-soft);
    font-size: 14px;
    margin: -4px 0 var(--space-3);
}
.team-pill-list {
    list-style: none; padding: 0; margin: var(--space-3) 0 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.team-pill-list li {
    padding: 6px 14px;
    background: rgba(27, 78, 143, 0.08);
    color: var(--c-primary-deep);
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
}
.team-pill-list--accent li {
    background: rgba(232, 184, 51, 0.18);
    color: #8C6512;
}
.big-email { font-size: 1.05rem; font-weight: 600; color: var(--c-primary-deep); }

/* ===== Contact page location cards ============================================ */
.contact-loc-card {
    display: flex; flex-direction: column;
    padding: clamp(20px, 2.5vw, 28px);
    gap: var(--space-4);
}
.contact-loc-card__head { display: flex; flex-direction: column; gap: 2px; }
.contact-loc-card__head h2 {
    margin: 0;
    font-family: var(--font-display, serif);
    color: var(--c-primary-deep);
    font-size: var(--fs-24);
    line-height: 1.15;
}
.contact-loc-card__tag {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: 14px;
}
.contact-loc-card__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 540px) {
    .contact-loc-card__row { grid-template-columns: 1fr; }
}
.contact-loc-card__col { display: flex; flex-direction: column; gap: 4px; }
.contact-loc-card__label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--c-ink-soft);
}
.contact-loc-card__addr {
    font-style: normal;
    color: var(--c-ink);
    line-height: 1.45;
}
.contact-loc-card__fax {
    color: var(--c-ink-soft);
    font-size: 13px;
    margin: 2px 0 0;
}
.contact-loc-card__hours {
    padding-top: var(--space-3);
    border-top: 1px solid var(--c-line);
}
.contact-hours {
    width: 100%; border-collapse: collapse;
    margin: 4px 0 0;
    font-size: 14px;
}
.contact-hours th, .contact-hours td {
    text-align: left;
    padding: 4px 0;
    vertical-align: top;
}
.contact-hours th {
    color: var(--c-primary-deep);
    font-weight: 600;
    width: 110px;
    padding-right: var(--space-3);
}
.contact-hours td {
    color: var(--c-ink);
}
.contact-hours__note {
    margin: var(--space-2) 0 0;
    font-size: 13px;
    color: var(--c-ink-soft);
    line-height: 1.45;
}
.contact-hours__note--alt {
    background: rgba(232, 184, 51, 0.10);
    border-left: 2px solid var(--c-accent);
    padding: 6px 10px;
    border-radius: 4px;
}
.contact-loc-card__cta {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-3);
}

/* ===== Service-detail + Location-detail page-hero with optional photo ====== */
.service-hero--has-image .service-hero__grid,
.location-hero--has-photo .location-hero__grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-7);
    align-items: center;
}
@media (max-width: 880px) {
    .service-hero--has-image .service-hero__grid,
    .location-hero--has-photo .location-hero__grid {
        grid-template-columns: 1fr;
    }
}
.service-hero__photo,
.location-hero__photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 26px 50px -28px rgba(15, 32, 43, 0.40),
        0 6px 14px -8px rgba(15, 32, 43, 0.18);
}
.service-hero__photo img,
.location-hero__photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Phase 3 Slice 12, cross-store callout block on the homepage.
 * Used to point sister-store traffic at a service this location doesn't
 * offer (e.g., South → East for compounding). Render is gated by the
 * cross_store_callout block in homepage.json; CSS scopes only when the
 * .cross-store wrapper is present, so other layouts are untouched.
 */
.section--cross-store { padding: clamp(20px, 3.5vw, 28px) 0 12px; }
.cross-store {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 36px 28px;
    border-radius: 18px;
}
.cross-store__eyebrow {
    color: var(--c-gold-deep, #B98A1F);
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
}
.cross-store__headline {
    margin: 0 0 12px;
    font: 700 24px/1.25 inherit;
    color: var(--c-ink, #15202B);
}
.cross-store__body {
    margin: 0 auto 22px;
    max-width: 560px;
    font: 400 16px/1.55 inherit;
    color: var(--c-ink-soft, #4A5867);
}
.cross-store__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 640px) {
    .section--cross-store { padding: 36px 0 4px; }
    .cross-store { padding: 28px 20px; }
    .cross-store__headline { font-size: 20px; }
    .cross-store__body { font-size: 15px; }
}

/* School Spirit panel readability, 1.22.93. The home page School Spirit panel
   can carry a background photo behind its copy; the dark text used to fight the
   image. When a photo is set (.has-panel-bg), lay a soft brand-tinted scrim over
   the photo (above the image, below the text) and switch the copy to white so it
   reads cleanly while the photo stays visible. Scoped to .section--school-spirit
   so the sister .cross-store callout (which has no photo) is untouched. The scrim
   uses ::after so it paints above the panel-bg layer but below the text. */
.section--school-spirit .glass.has-panel-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(150deg, rgba(15, 32, 43, 0.66) 0%, rgba(27, 78, 143, 0.50) 100%);
}
.section--school-spirit .glass.has-panel-bg .cross-store__eyebrow {
    color: var(--c-accent, #E8B833);
}
.section--school-spirit .glass.has-panel-bg .cross-store__headline {
    color: #fff;
    text-shadow: 0 1px 18px rgba(15, 32, 43, 0.40);
}
.section--school-spirit .glass.has-panel-bg .cross-store__body {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(15, 32, 43, 0.45);
}

/* Phase 3 Slice 13, homepage sister-site prompt.
 * Small glass chip positioned top-right of the hero on desktop; stacks above
 * the hero content on narrow viewports. Subtle on the cinematic hero scene
 * so it doesn't pull focus from the headline. Tap target ≥44px on mobile.
 */
.hero { position: relative; } /* anchor for the absolutely-positioned chip */
.hero__sister-prompt {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px 9px 16px;
    border-radius: 999px;
    background: rgba(20, 43, 72, 0.55);
    border: 1px solid rgba(244, 234, 210, 0.22);
    color: rgba(244, 234, 210, 0.92);
    text-decoration: none;
    font: 500 13px/1.25 system-ui, sans-serif;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero__sister-prompt:hover,
.hero__sister-prompt:focus-visible {
    background: rgba(20, 43, 72, 0.72);
    border-color: var(--c-accent, #E8B833);
    color: #fff;
    transform: translateY(-1px);
}
.hero__sister-prompt:focus-visible {
    outline: 2px solid var(--c-accent, #E8B833);
    outline-offset: 2px;
}
.hero__sister-prompt__lead { opacity: 0.92; }
.hero__sister-prompt__lead strong { font-weight: 700; color: #fff; }
.hero__sister-prompt__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(232, 184, 51, 0.18);
    color: var(--c-accent, #E8B833);
    font-weight: 600;
    white-space: nowrap;
}
.hero__sister-prompt__arrow { font-size: 12px; line-height: 1; }

/* Reduced-motion floor intentionally removed by owner decision (full motion
   for all visitors, parity with chadsanders.com). */

/* Mobile, drop the long lead text, keep the CTA pill front and center.
 * Sits at the top edge with comfortable tap target. */
@media (max-width: 720px) {
    .hero__sister-prompt {
        top: 12px;
        right: 12px;
        gap: 0;
        padding: 8px 12px;
        font-size: 12px;
    }
    .hero__sister-prompt__lead { display: none; }
    .hero__sister-prompt__cta {
        background: transparent;
        padding: 4px 0;
        color: #fff;
    }
}

/* 1.23.29 Mobile polish: tighter School Spirit / Brindlee Mountain card on
   phone. Stacks on top of the existing 640px breakpoint so 561-640 keeps
   the previous step-down and 0-560 tightens further. Desktop unchanged. */
@media (max-width: 560px) {
    .cross-store { padding: 24px 16px; text-align: left; }
    .cross-store__eyebrow { text-align: left; }
    .cross-store__headline { font-size: 18px; line-height: 1.3; margin-bottom: 10px; text-align: left; }
    .cross-store__body { font-size: 14px; line-height: 1.5; text-align: left; max-width: none; }
    .cross-store__cta { width: 100%; }
}

/* 1.23.31 pilot + 1.23.32 fanout + 1.23.36 bug fix: position context so
   panel-bg.php (which uses position absolute inset 0 and z-index -1)
   anchors correctly. Hero already has its own positioning via .page-hero.
   Every other detail section shares a base .svc-detail-section with a BEM
   modifier per section so future per-section tweaks can target one without
   bleeding into the others. Padding, radius, and top margin only kick in
   when section--has-bg is on so a service without a background renders
   identical to before.

   1.23.36 removed the earlier > * { position relative z-index 1 } rule and
   the matching > .panel-bg z-index override. Those clobbered panel-bg.php's
   own native CSS (position absolute inset 0 z-index -1 in components.css)
   and clobbered .panel-bg-ve's own native CSS (position absolute top 10
   right 56 z-index 40 in visual-editor.css). Symptom on the service-detail
   sections: the cream-striped panel-bg--placeholder rendered as a small
   inline block above the section's text pushing the heading + body down,
   and the dark "Background" pill control was clipped by the section's
   overflow hidden so only "ground" showed. The panel-bg's own z-index -1
   already sits behind in-flow content, so no extra z-index help is needed.
   overflow hidden is also dropped because the absolute panel-bg + radius
   no longer needs it to keep the image inside the rounded corners (the
   panel-bg.php component already inherits border-radius). */
.svc-detail-helpful,
.svc-detail-section { position: relative; }
.svc-detail-helpful.section--has-bg,
.svc-detail-section.section--has-bg {
    padding: 18px 20px;
    border-radius: 14px;
    margin-top: 12px;
}

/* ===== Compounding detail: break the copy-paste monotony (2026-06-22) =======
   The Compounding page stacks several near-identical text panels, which read as
   copy-paste. To give it a classier, editorial rhythm, EVERY OTHER panel (Who
   this helps / What we routinely compound / Areas served) becomes a soft tinted
   card carrying a subtle brand texture, while the in-between panels (How it
   works / Fine print) stay clean but sit at staggered widths and alternating
   alignment going down the page. Desktop only (>=901px, above the point where
   .detail-grid collapses to a single column); tablet/phone keep the simple
   full-width stack for readability. Stable by design: the variation is keyed to
   each panel's existing BEM modifier, NOT randomized per load, so the layout is
   consistent on every visit (good for SEO + no content shift). Scoped to
   .svc-detail--compounding so no other service page is affected. */
@media (min-width: 901px) {
  /* Decorated cards — every other panel */
  .svc-detail--compounding .svc-detail-section--who,
  .svc-detail--compounding .svc-detail-section--list,
  .svc-detail--compounding .svc-detail-section--areas {
    margin-block: 26px;
    padding: 28px 32px;
    border-radius: 18px;
    border: 1px solid rgba(27, 78, 143, 0.08);
    box-shadow: 0 16px 40px -30px rgba(15, 32, 43, 0.30);
    background-repeat: repeat;
    background-position: top left;
  }
  .svc-detail--compounding .svc-detail-section--who {
    width: 100%;
    background-color: #FCF8EE;
    background-image: url(/public/img/panels/pat-dots.svg);
    background-size: 26px 26px;
  }
  .svc-detail--compounding .svc-detail-section--list {
    width: 95%;
    margin-left: 0;
    background-color: #F4F8FC;
    background-image: url(/public/img/panels/pat-waves.svg);
    background-size: 80px 40px;
  }
  .svc-detail--compounding .svc-detail-section--areas {
    width: 100%;
    background-color: #FAF7F0;
    background-image: url(/public/img/panels/pat-hex.svg);
    background-size: 56px 48px;
  }
  /* Clean in-between panels — narrower, staggered, alternating side */
  .svc-detail--compounding .svc-detail-section--how {
    max-width: 86%;
    margin-right: auto;            /* pulls left */
    padding-left: 22px;
    border-left: 3px solid rgba(232, 184, 51, 0.55);
  }
  .svc-detail--compounding .svc-detail-section--fine {
    max-width: 82%;
    margin-left: auto;             /* pushes right */
  }
}

/* ===== Alternating tints to break the copy-paste look (2026-06-24) =========
   Krell-approved cosmetic slice. CSS-only; reuses the existing
   /public/img/panels/ textures. Every OTHER block on the policy pages and on
   the Compounding custom panels becomes a soft tinted card so the stack of
   centered, identical-looking panels no longer reads as copy-paste. Kept
   deliberately subtle (pharmacy-safe, not loud); two gentle variants alternate
   among the tinted blocks for rhythm without turning the page into a carnival.
   No content, structure, data, schema, routing, form, analytics, or JS change. */

/* Policy pages (Privacy / Terms / Accessibility / HIPAA / Disclaimer / Cookies):
   each section renders as an <article> inside .legal-sections .prose. */
.legal-sections .prose article { border-radius: 16px; }
.legal-sections .prose article:nth-of-type(even) {
    padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 32px);
    border: 1px solid rgba(27, 78, 143, 0.07);
    box-shadow: 0 14px 36px -30px rgba(15, 32, 43, 0.22);
    background-repeat: repeat;
    background-position: top left;
}
.legal-sections .prose article:nth-of-type(4n+2) {
    background-color: #FCF8EE;
    background-image: url(/public/img/panels/pat-dots.svg);
    background-size: 26px 26px;
}
.legal-sections .prose article:nth-of-type(4n) {
    background-color: #F4F8FC;
    background-image: url(/public/img/panels/pat-waves.svg);
    background-size: 80px 40px;
}

/* Compounding custom panels (the Add-Panel blocks that the earlier pass missed).
   Tint the inner container so each reads as a contained card, not a full-width
   colored band. */
.svc-custom-panels--compounding .custom-panel:nth-of-type(even) .custom-panel__inner {
    padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px);
    border-radius: 18px;
    border: 1px solid rgba(27, 78, 143, 0.08);
    box-shadow: 0 16px 40px -30px rgba(15, 32, 43, 0.28);
    background-repeat: repeat;
    background-position: top left;
}
.svc-custom-panels--compounding .custom-panel:nth-of-type(4n+2) .custom-panel__inner {
    background-color: #FCF8EE;
    background-image: url(/public/img/panels/pat-dots.svg);
    background-size: 26px 26px;
}
.svc-custom-panels--compounding .custom-panel:nth-of-type(4n) .custom-panel__inner {
    background-color: #FAF7F0;
    background-image: url(/public/img/panels/pat-hex.svg);
    background-size: 56px 48px;
}

/* ===== Contact hero tighten (2026-05-30) =================================
   The Contact hero ("Talk to a real person") only holds an eyebrow, headline,
   and one short lede, so the default tall hero padding left a big blank band
   on the right/below before the location cards. Trim the hero's vertical
   rhythm and pull the first content section up so the page reads tight and
   intentional. Text stays left-aligned in its natural column; no new content
   (store hours already live in the location cards below). */
.page-hero--contact { padding-block: clamp(var(--space-5), 5vw, var(--space-7)) clamp(var(--space-3), 3vw, var(--space-4)); }
.page-hero--contact .page-hero__lede { max-width: 60ch; margin-bottom: 0; }
/* The location cards section follows immediately; lift it closer to the hero. */
.page-hero--contact + .section { padding-top: clamp(var(--space-3), 3vw, var(--space-5)); }