/* FHA Teal Theme (V2) — exact values from "11 FHA-Home V2.pxd"
   Column gradient sampled from document composite (horizontal, % of column width).
   Element fills from layer style data:
   Fairchild #CBEAEA | HAIR ARTISTRY #022C44 | Our Mission #A2E7E8
   Mission text #C1D7D7 | CTA #022C44 / text #A1E7E8 | Contact #CBD8D8 */
@media (min-width: 992px) {
    .theme-teal .banner .banner-detail-container {
        background: linear-gradient(90deg,
            #045567 0%,
            #166878 20%,
            #247885 31%,
            #30828F 44%,
            #398C97 58%,
            #40959D 71%,
            #479CA4 85%,
            #4A9EA4 100%);
    }

    .theme-teal .banner .banner-detail-container .details .details-disc {
        color: #C1D7D7;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    .theme-teal .banner .banner-detail-container .action * {
        background-color: #022C44;
        color: #A1E7E8;
    }

    .theme-teal .banner .banner-detail-container .action *:hover {
        background-color: #aaf9f9;
        color: #022C44;
    }
}

/* ============================================================
   Teal theme - MOBILE (max-width: 991px)  [PREVIEW - pending approval]
   Brings the approved V2 teal palette to the mobile layout so the
   pale-teal scripts (Our Mission, watermark) read correctly.
   ============================================================ */
@media (max-width: 991px) {
    body.theme-teal {
        background: linear-gradient(180deg, #045567 0%, #166878 16%, #247885 30%, #30828F 44%, #398C97 58%, #40959D 72%, #479CA4 86%, #4A9EA4 100%);
    }

    .theme-teal .header {
        background: linear-gradient(180deg, #045567 0%, #10616F 100%);
        box-shadow: 0 1px 6px rgba(2, 44, 68, 0.35);
    }

    .theme-teal .header .header-container .brand-logo img:first-child {
        content: url("../images/logo-mark-teal.png");
    }

    .theme-teal .header .header-container .brand-logo img:last-child {
        content: url("../images/logo-script-teal.png"); /* r21: -m variant never existed (404) */
    }

    .theme-teal .navbar-toggler .hamburger span {
        background: linear-gradient(90deg, #E7F7F7 0%, #A1E7E8 100%);
        box-shadow: 1px 1px 0px 0px rgba(2, 44, 68, 0.55);
    }

    /* FHA watermark: anchor serif right-edges to the hero's left border,
       same mechanism as desktop (anchor column at x=282 of 2400px-wide art) */
    .theme-teal .banner .banner-image-container .banner-shapes {
        left: 0;
    }

    .theme-teal .banner .banner-image-container .banner-shapes img {
        transform: translateX(calc(-282 / 2400 * 100% + 3px));
        -webkit-transform: translateX(calc(-282 / 2400 * 100% + 3px));
    }

    /* Mission copy: same treatment as approved desktop teal */
    .theme-teal .banner .banner-detail-container .details-disc * {
        color: #C1D7D7;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    /* CTA: match approved desktop teal */
    .theme-teal .banner .banner-detail-container .action a,
    .theme-teal .banner .banner-detail-container .action button {
        background-color: #022C44;
        color: #A1E7E8;
    }

    /* Quick-contact bar icons: lift the mid-teal line art to pale
       so it reads on the teal background */
    .theme-teal .footer-details .let-connect .social-icon-mobile li a img,
    .theme-teal .footer-details .let-connect .social-icon-mobile li .kebab-menu img {
        filter: grayscale(1) brightness(2.05);
        -webkit-filter: grayscale(1) brightness(2.05);
    }
}


/* ============================================================
   2026-08-16 — Desktop refinements to match locked mobile template v13:
   metallic monogram + tilt/mouse sheen, glass menu, silver hamburger
   ============================================================ */
@media (min-width: 992px) {
    .theme-teal .banner .banner-detail-container .brand-logo .markWrap {
        position: relative;
        display: inline-block;
        width: max(9.43vw, 100px);
    }
    .theme-teal .banner .banner-detail-container .brand-logo .markWrap img {
        width: 100%;
        display: block;
    }
    .theme-teal .banner .banner-detail-container .brand-logo .markWrap .mark-sheen {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        pointer-events: none;
        background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 62%);
        background-size: 220% 220%;
        background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
        -webkit-mask: url("../images/mobile/logo-mark-metal.png") center/contain no-repeat;
        mask: url("../images/mobile/logo-mark-metal.png") center/contain no-repeat;
        mix-blend-mode: screen;
    }
    .theme-teal .banner .banner-image-container .banner-menu {
        background: rgba(235, 248, 249, 0.22);
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
        backdrop-filter: blur(16px) saturate(1.25);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 2px;
        box-shadow: 0 8px 28px rgba(2, 24, 38, 0.35);
    }
    .theme-teal .banner .banner-image-container .banner-menu .dd-title img,
    .theme-teal .banner-menu .menu-icon {
        filter: none;
    }
}


/* ============================================================
   2026-08-17 — SECTION 1 ROLLOUT (v3 file version)
   Teal theme + locked design language applied to pages
   12 Location / 13 About Us / 14 Policies (desktop).
   Rebuilt from the approved template docs after the v4–v6
   experimental block was retired ("wrong direction").
   Rules implemented (Steven's standing rules):
   - page titles #A2E7E8 (teal art variants) + few-px drop shadow
   - Fairchild script + all lighter text: drop shadow rgba(2,44,68,.45)
   - text sizes up sitewide incl. Page 11 mission text
   - paragraphs wider than template default (judged on render, not -8.6vh patches)
   - lockup -> page-title gap reduced moderately
   - CTA navy, hover #6CD9DB (updates Home too)
   - accordions: glass, squared 2px, HIS arrow placement kept,
     hover = icon + title #A2E7E8
   - menu: glass (existing), hover auto-reveals pages, page hover #6CD9DB
   ============================================================ */
@media (min-width: 992px) {

    /* --- CTA hover color update (sitewide incl. Home) --- */
    .theme-teal .banner .banner-detail-container .action *:hover {
        background-color: #6CD9DB;
        color: #022C44;
    }

    /* --- Beveled squared edges on CTA --- */
    .theme-teal .banner .banner-detail-container .action * {
        border-radius: 2px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                    0 2px 6px rgba(2, 24, 38, 0.30);
    }

    /* --- Text size increase (incl. Page 11) + wider paragraphs --- */
    .theme-teal .banner .banner-detail-container .details .details-disc {
        font-size: clamp(14px, 1.05vw, 20px);
        max-width: max(30.5vw, 300px);
    }

    /* --- Reduced gap: salon-name lockup -> page-title script --- */
    .theme-teal.tpl-guides .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(16px, 4.6dvh, 56px);
    }

    /* --- Script art + light elements: few-pixel drop shadow --- */
    .theme-teal .banner .banner-detail-container .brand-logo .logo-script,
    .theme-teal .banner .banner-detail-container .details .our-mission-img img,
    .theme-teal .banner .banner-detail-container .slogan img,
    .theme-teal .question .question-img img {
        filter: drop-shadow(0 2px 3px rgba(2, 44, 68, 0.45));
    }

    /* --- Section pages: pale content text (Home treatment) --- */
    .theme-teal .banner .banner-detail-container .details .details-disc,
    .theme-teal .banner .banner-detail-container .details .details-disc p {
        color: #C1D7D7;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    /* --- Accordions: glass cards, squared, his icon placement kept --- */
    .theme-teal .aaccordion .at-item {
        margin-bottom: max(0.6vh, 6px);
    }

    .theme-teal .aaccordion .at-title {
        background: rgba(235, 248, 249, 0.22) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
        backdrop-filter: blur(16px) saturate(1.25);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 2px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                    0 4px 14px rgba(2, 24, 38, 0.25);
        cursor: pointer;
    }

    .theme-teal .aaccordion .at-title span {
        color: #022C44;
        transition: color 0.18s ease;
    }

    .theme-teal .aaccordion .at-title:hover span,
    .theme-teal .aaccordion .at-title.active span {
        color: #A2E7E8;
    }

    .theme-teal .aaccordion .at-tab .tab-bdoy {
        background: rgba(235, 248, 249, 0.16) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        backdrop-filter: blur(14px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-top: none;
        border-radius: 0 0 2px 2px;
    }

    .theme-teal .aaccordion .at-tab .tab-bdoy p {
        color: #06333f;
    }

    /* --- Desktop menu: hover reveals a section's pages, triangle rotates --- */
    .theme-teal .banner .banner-image-container .banner-menu .main-dd:hover > ul {
        display: block;
    }

    .theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-menu:hover {
        color: #6CD9DB;
    }
}

/* --- Section 1 refinements after first render inspection (2026-08-17) --- */
@media (min-width: 992px) {
    /* slogan (location): clear the HAIR ARTISTRY baseline, aqua art */
    .theme-teal.location-page .banner .banner-detail-container .slogan {
        margin-top: 1.2vh;
    }

    /* accordions match the paragraph column width
       (style.css caps them at ~25vw via max-width — lift that) */
    .theme-teal .banner .banner-detail-container .aaccordion {
        width: max(30.5vw, 300px);
        max-width: max(30.5vw, 300px);
        margin-left: auto;
        margin-right: auto;
    }

    /* chrome-silver icons (art swap, position untouched) */
    .theme-teal .aaccordion .at-title .play-icon img {
        content: url("../images/thumb/play-icon-silver.png");
        filter: drop-shadow(0 1px 1px rgba(2, 44, 68, 0.4));
    }

    .theme-teal .aaccordion .at-title img[src*="bio.png"] {
        content: url("../images/thumb/bio-silver.png");
        filter: drop-shadow(0 1px 1px rgba(2, 44, 68, 0.4));
    }

    .theme-teal .aaccordion .at-title:hover .play-icon img,
    .theme-teal .aaccordion .at-title.active .play-icon img,
    .theme-teal .aaccordion .at-title:hover img[src*="bio.png"] {
        filter: sepia(0.5) hue-rotate(135deg) saturate(2)
                drop-shadow(0 1px 1px rgba(2, 44, 68, 0.4));
    }
}

/* --- Vertical-rhythm tightening for content-heavy Section 1 pages (2026-08-17) --- */
@media (min-width: 992px) {
    /* keep 13px floor so short viewports don't blow up line count */
    .theme-teal .banner .banner-detail-container .details .details-disc {
        font-size: clamp(13px, 1.05vw, 20px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(12px, 3.4dvh, 44px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .details-disc,
    .theme-teal.policies-page .banner .banner-detail-container .details .details-disc,
    .theme-teal.location-page .banner .banner-detail-container .details .details-disc {
        margin-top: clamp(8px, 1vw, 18px);
    }

    .theme-teal .aaccordion .at-item {
        margin-bottom: clamp(4px, 0.55vh, 8px);
    }

    .theme-teal .aaccordion .at-title {
        padding-top: clamp(4px, 0.55vh, 8px);
        padding-bottom: clamp(4px, 0.55vh, 8px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .question,
    .theme-teal.policies-page .banner .banner-detail-container .details .question,
    .theme-teal.location-page .banner .banner-detail-container .details .question {
        margin-top: clamp(10px, 2.4vh, 30px);
        margin-bottom: 1.2vh;
    }
}


/* ============================================================
   2026-08-17 — CONSISTENCY PASS (?v=4), per Steven's review:
   1. Page-title scripts sized by HEIGHT so all four pages render
      identical to Page 11's Our Mission (art aspect ratios differ —
      width-based sizing made Salon Policies 22% smaller).
   2. All body text = Page 11 mission text (color/size/weight/shadow),
      including accordion tab content and formerly-navy strongs
      (now bolder weight in the body color — no navy in header text).
   3. Header→CTA content lives in .content-scroll with a discreet
      slider on the LEFT; CTA + Questions? always fully visible.
   4. Page 12: slogan colored like mobile Page 11 slogan art,
      gap to Directions tightened.
   ============================================================ */
@media (min-width: 992px) {

    /* --- 1. uniform page-title size (Page 11 reference: 13.3vw x 182/712) --- */
    .theme-teal .banner .banner-detail-container .details .our-mission-img * {
        height: max(3.4vw, 38px);
        width: auto;
    }

    /* --- 2. one text standard: Page 11 mission text everywhere --- */
    .theme-teal .banner .banner-detail-container .details .details-disc,
    .theme-teal .banner .banner-detail-container .details .details-disc p {
        color: #C1D7D7;
        font-size: clamp(13px, 1.05vw, 20px);
        line-height: 1.3;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    .theme-teal .banner .banner-detail-container .details .details-disc strong,
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc strong,
    .theme-teal .banner .banner-detail-container .details .details-disc a,
    .theme-teal .banner .banner-detail-container .details .details-disc b {
        color: #C1D7D7;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    .theme-teal .aaccordion .at-tab .tab-bdoy p {
        color: #C1D7D7;
        font-size: clamp(13px, 1.05vw, 20px);
        line-height: 1.3;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    /* --- 3. header→CTA content container with discreet LEFT slider --- */
    .theme-teal.tpl-guides .banner .banner-detail-container .details .content-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;        /* native bar hidden — custom thumb on the LEFT */
    }

    .theme-teal .content-scroll::-webkit-scrollbar {
        display: none;
    }

    /* discreet slider on the LEFT, thumb styled like the CTA swipe thumb */
    .theme-teal.tpl-guides .banner .banner-detail-container .details {
        position: relative;
    }

    .theme-teal .cscroll-track {
        position: absolute;
        left: 0;
        width: 4px;
        border-radius: 2px;
        background: rgba(235, 248, 249, 0.14);
        pointer-events: none;
    }

    .theme-teal .cscroll-thumb {
        position: absolute;
        left: 0;
        width: 4px;
        border-radius: 2px;
        background: linear-gradient(180deg, #EDF6F7 0%, #A9BEC0 55%, #DDEBEC 100%);
        box-shadow: 0 1px 2px rgba(2, 44, 68, 0.45);
    }

    /* CTA + Questions? sit below the scroll area — never cut off */
    .theme-teal.tpl-guides .banner .banner-detail-container .details .action {
        margin-top: max(1vh, 9px);
    }

    .theme-teal.tpl-guides .banner .banner-detail-container .details .question {
        margin-top: clamp(8px, 1.4vh, 20px);
        margin-bottom: 1vh;
    }

    /* --- 4. Page 12: slogan tone from mobile Page 11; tighter gap to Directions --- */
    .theme-teal.location-page .banner .banner-detail-container .brand-logo {
        margin-bottom: 0.5vw;
    }

    .theme-teal.location-page .banner .banner-detail-container .slogan {
        margin-top: 0.5vh;
        margin-bottom: 0.4vw;
    }

    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(8px, 1.8dvh, 24px);
    }
}

/* --- Consistency pass, round 2: uniform title gap on ALL pages,
       reclaim dead space inside the scroll area, make the left
       slider legible, and hint at additional content --- */
@media (min-width: 992px) {
    .theme-teal.tpl-guides .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(10px, 2.6dvh, 32px);
    }

    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(8px, 1.8dvh, 24px);
    }

    .theme-teal .banner .banner-detail-container .aaccordion {
        margin-bottom: 0.3vw;
    }
}

/* --- Accordion tab content: NO navy anywhere — every element inside an
       opened tab uses the Page 11 mission text color; formerly-navy
       emphasis (spans, strongs, author scripts) keeps its size/family but
       goes bolder in the body color; links underline + #6CD9DB hover --- */
@media (min-width: 992px) {
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy * {
        color: #C1D7D7;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.5);
    }

    .theme-teal.about-us .at-item .at-tab .tab-bdoy span,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy strong {
        color: #C1D7D7;
        font-weight: 800;
    }

    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a {
        color: #C1D7D7;
        text-decoration: underline !important;
    }

    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a:hover {
        color: #6CD9DB;
    }
}

/* ============================================================
   2026-08-17 — ROUND 3 (?v=5), per Steven's mock crosscheck notes:
   1. Lockup on 12/13/14 shrunk to HIS mock proportions (monogram
      ~11.5% of viewport height, name ~17vw) so content moves UP.
   2. NO NAVY TEXT anywhere except HAIR ARTISTRY — accordion titles
      go to the pale standard.
   3. Accordion content text enlarged (ADA comfort).
   4. Two-line accordion titles supported (13).
   5. Menu arrows: silver art, point EAST closed, SOUTH on
      hover/open (old teal filter + 45° drift removed).
   6. Left slider more visible.
   ============================================================ */
@media (min-width: 992px) {

    /* --- 1. mock-proportion lockup on the three section pages --- */
    .theme-teal.location-page .banner .banner-detail-container .brand-logo .markWrap,
    .theme-teal.about-us .banner .banner-detail-container .brand-logo .markWrap,
    .theme-teal.policies-page .banner .banner-detail-container .brand-logo .markWrap {
        width: max(5.9vw, 64px);
    }

    .theme-teal.location-page .banner .banner-detail-container .brand-logo .logo-script,
    .theme-teal.about-us .banner .banner-detail-container .brand-logo .logo-script,
    .theme-teal.policies-page .banner .banner-detail-container .brand-logo .logo-script {
        width: max(17vw, 200px);
        margin-top: 1vh;
    }

    .theme-teal.location-page .banner .banner-detail-container .brand-logo,
    .theme-teal.about-us .banner .banner-detail-container .brand-logo,
    .theme-teal.policies-page .banner .banner-detail-container .brand-logo {
        margin-bottom: 0;
    }

    /* slogan (12): wider than the name per mock, tight under HAIR ARTISTRY */
    .theme-teal.location-page .banner .banner-detail-container .slogan {
        margin-top: 0.9vh;
        margin-bottom: 0;
    }

    .theme-teal.location-page .banner .banner-detail-container .slogan * {
        width: max(20.8vw, 240px);
    }

    /* page-title gap tuned to the mock rhythm */
    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(14px, 4vh, 44px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(14px, 3.6dvh, 42px);
    }

    /* --- roomier accordion rhythm (mock) + two-line titles --- */
    .theme-teal .aaccordion .at-item {
        margin-bottom: clamp(8px, 1.3vh, 15px);
    }

    .theme-teal .aaccordion .at-title {
        padding-top: clamp(5px, 0.8vh, 9px);
        padding-bottom: clamp(5px, 0.8vh, 9px);
    }

    .theme-teal .aaccordion .at-title span {
        line-height: 1.4;
    }

    /* --- 2. NO NAVY TEXT: accordion titles to the pale standard --- */
    .theme-teal .aaccordion .at-title span,
    .theme-teal .aaccordion .at-title span u,
    .theme-teal .aaccordion .at-title span strong,
    .theme-teal .aaccordion .at-title a {
        color: #E7F4F4;
        text-shadow: 0 1px 2px rgba(2, 44, 68, 0.45);
    }

    .theme-teal .aaccordion .at-title:hover span,
    .theme-teal .aaccordion .at-title:hover span u,
    .theme-teal .aaccordion .at-title:hover span strong,
    .theme-teal .aaccordion .at-title.active span,
    .theme-teal .aaccordion .at-title.active span u,
    .theme-teal .aaccordion .at-title.active span strong {
        color: #A2E7E8;
    }

    /* --- 3. accordion content text enlarged --- */
    .theme-teal .aaccordion .at-tab .tab-bdoy,
    .theme-teal .aaccordion .at-tab .tab-bdoy p,
    .theme-teal .aaccordion .at-tab .tab-bdoy * {
        font-size: clamp(14px, 1.15vw, 21px);
        line-height: 1.35;
    }

    .theme-teal .aaccordion .at-title span {
        font-size: clamp(13px, 0.9vw, 17px);
    }

    /* --- 5. menu arrows: silver, EAST closed -> SOUTH open/hover --- */
    .theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-title img {
        content: url("../images/thumb/play-icon-silver.png");
        width: max(0.72vw, 10px);
        filter: drop-shadow(0 1px 1px rgba(2, 44, 68, 0.45));
        -webkit-filter: drop-shadow(0 1px 1px rgba(2, 44, 68, 0.45));
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transition: transform 0.22s ease;
    }

    .theme-teal .banner .banner-image-container .banner-menu .main-dd:hover .dd-title img,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd.show .dd-title img,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd.active .dd-title img {
        filter: drop-shadow(0 1px 1px rgba(2, 44, 68, 0.45));
        -webkit-filter: drop-shadow(0 1px 1px rgba(2, 44, 68, 0.45));
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }

    /* --- 6. left slider: wider + brighter --- */
    .theme-teal .cscroll-track {
        width: 6px;
        background: rgba(235, 248, 249, 0.20);
    }

    .theme-teal .cscroll-thumb {
        width: 6px;
        background: linear-gradient(180deg, #F4FAFA 0%, #B9CDCF 55%, #E8F3F3 100%);
        box-shadow: 0 1px 3px rgba(2, 44, 68, 0.55);
    }
}

/* --- round-3 polish: mock's breathing room under HAIR ARTISTRY;
       bolded names in body copy keep mixed case per the mock --- */
@media (min-width: 992px) {
    .theme-teal.location-page .banner .banner-detail-container .slogan {
        margin-top: 1.8vh;
    }

    .theme-teal .banner .banner-detail-container .details .details-disc strong {
        text-transform: none;
    }
}

/* --- Steven's grouping pass: three visually distinct zones —
       A) section header (logo, name, slogan)
       B) page title + header content + accordions
       C) CTA + Questions?
       Plus: kill the old negative letter-spacing that made the
       About Us paragraph read denser than the other pages. --- */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc,
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc p,
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc strong {
        letter-spacing: normal;
    }

    /* A -> B: generous break under the header block */
    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(16px, 4.4vh, 48px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(16px, 4.2dvh, 46px);
    }

    /* B internal: paragraph -> first accordion, readable but cohesive */
    .theme-teal .banner .banner-detail-container .aaccordion {
        margin-top: clamp(10px, 1.8vh, 20px);
    }

    /* B -> C: clear break before the CTA zone */
    .theme-teal.tpl-guides .banner .banner-detail-container .details .action {
        margin-top: max(2.4vh, 20px);
    }
}

/* --- Round 3b: B-zone spacing identical on 12/13/14; no orphan
       last words in any paragraph (text-wrap:pretty + micro
       tightening within ADA-safe bounds) --- */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(16px, 4.4vh, 48px);
    }

    .theme-teal .banner .banner-detail-container .details .details-disc p,
    .theme-teal .aaccordion .at-tab .tab-bdoy p {
        text-wrap: pretty;
        letter-spacing: -0.1px;
        line-height: 1.28;
    }
}

/* --- About Us title uses Steven's new art with its own baked
       shadow — skip the CSS drop-shadow to avoid doubling --- */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img img {
        filter: none;
    }
}

/* his About Us art has tall flourishes + finer strokes — box sized
   up so its visual body matches the other titles */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        height: max(5vw, 56px);
        width: auto;
    }
}

/* ============================================================
   2026-08-17 — FOUR-PAGE ALIGNMENT GRID (Steven: "compare all
   four pages side by side — look at where things sit in relation
   to one another"). One grid, all pages:
   - Identical compact lockup on 11/12/13/14 (his updated 11 mock
     uses the compact lockup too — live Home was the outlier)
   - Page title starts at the SAME y on every page (12's slogan
     fills its slot; the others carry the equivalent air)
   - Paragraph starts at the SAME y on every page
   - CTA + Questions? already aligned (verified 731/805 everywhere)
   ============================================================ */
@media (min-width: 992px) {

    /* Home joins the compact lockup */
    .theme-teal.home .banner .banner-detail-container .brand-logo .markWrap {
        width: max(5.9vw, 64px);
    }

    .theme-teal.home .banner .banner-detail-container .brand-logo .logo-script {
        width: max(17vw, 200px);
        margin-top: 1vh;
    }

    .theme-teal.home .banner .banner-detail-container .brand-logo {
        margin-top: calc(3.03vh - 2.292vw);
        margin-bottom: 0;
    }

    /* unified title Y: name bottom + 8.44vh puts every title top at
       the same line as Page 12's (whose slogan+gaps add up to it) */
    .theme-teal.home .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(40px, 8.44vh, 96px);
    }

    /* About's art box is taller — compensate so its paragraph still
       starts on the shared line and the title stays centered on band */
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img {
        margin-top: calc(clamp(40px, 8.44vh, 96px) - 0.8vw);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        height: max(4.2vw, 48px);
    }

    /* uniform title -> paragraph gap on ALL FOUR pages */
    .theme-teal.tpl-guides .banner .banner-detail-container .details .details-disc {
        margin-top: clamp(10px, 1.55vh, 20px);
    }
}

/* ============================================================
   2026-08-17 — ROUND 4, per Steven's dictated review:
   1. HOME keeps its ORIGINAL large lockup (only the three content
      pages get the compact one) and its Our Mission block is
      CENTERED between the lockup and the CTA.
   2. About Us title returns to the family script (original art,
      recolored + reinforced), sized to match the others visually.
   3. Pages 13/14: logo->title gap tightened to the mock rhythm —
      the freed space goes to the accordions.
   4. Accordion density tuned so ALL rows + CTA + Questions? fit
      at a normal desktop size.
   ============================================================ */
@media (min-width: 992px) {

    /* --- 1. Home: original large lockup restored --- */
    .theme-teal.home .banner .banner-detail-container .brand-logo .markWrap {
        width: max(9.43vw, 100px);
    }

    .theme-teal.home .banner .banner-detail-container .brand-logo .logo-script {
        width: max(28.4vw, 300px);
        margin-top: 1.5vh;
    }

    /* Home: center Our Mission + mission text between lockup and CTA */
    .theme-teal.home .banner .banner-detail-container .details .content-scroll {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .theme-teal.home .banner .banner-detail-container .details .our-mission-img {
        margin-top: 0;
    }

    /* --- 2. About Us title: family art, visual size match --- */
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        height: max(4vw, 46px);
        width: auto;
    }

    /* --- 3. Tight logo->title gap on the accordion-heavy pages --- */
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(14px, 2.2vh, 24px);
    }

    /* --- 4. density: everything fits at 1440x900 --- */
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc,
    .theme-teal.policies-page .banner .banner-detail-container .details .details-disc {
        margin-top: clamp(8px, 1.2vh, 16px);
    }

    .theme-teal.about-us .banner .banner-detail-container .aaccordion,
    .theme-teal.policies-page .banner .banner-detail-container .aaccordion {
        margin-top: clamp(8px, 1.3vh, 16px);
    }

    .theme-teal.about-us .aaccordion .at-item,
    .theme-teal.policies-page .aaccordion .at-item {
        margin-bottom: clamp(5px, 0.9vh, 10px);
    }

    .theme-teal.about-us .aaccordion .at-title,
    .theme-teal.policies-page .aaccordion .at-title {
        padding-top: clamp(3px, 0.5vh, 6px);
        padding-bottom: clamp(3px, 0.5vh, 6px);
    }

    .theme-teal.about-us .aaccordion .at-title span {
        line-height: 1.3;
    }
}

/* --- About Us fit: widest paragraph (it carries the longest copy),
       hairline-tighter type, leaner rows — everything above the CTA --- */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc {
        max-width: max(33.4vw, 340px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .details-disc p {
        line-height: 1.26;
        letter-spacing: -0.15px;
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(10px, 1.6vh, 18px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        height: max(3.8vw, 44px);
    }

    .theme-teal.about-us .aaccordion .at-item {
        margin-bottom: clamp(4px, 0.7vh, 8px);
    }
}

/* five pixels short — final micro-tuck on About's accordion rhythm */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .aaccordion {
        margin-top: clamp(6px, 1vh, 12px);
    }

    .theme-teal.about-us .aaccordion .at-item {
        margin-bottom: clamp(4px, 0.65vh, 7px);
    }
}

/* last 26px: a touch more paragraph width on About */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc {
        max-width: max(34.4vw, 350px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .details-disc p {
        line-height: 1.25;
    }
}

/* About fit, final: paragraph wider still (drops a line), and the
   min-gap above the CTA relaxes -- CTA itself stays pinned at the
   shared line */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc {
        max-width: max(36vw, 380px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .action {
        margin-top: max(1.1vh, 10px);
    }
}

/* found it: .details-disc carries ~19px internal padding top+bottom
   on About — trim it and the whole stack clears the CTA */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* his final About Us art: a touch more presence to optically match */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        height: max(4.05vw, 47px);
    }
}

/* ============================================================
   2026-08-18 — THE ACTUAL About Us bug + Policies rhythm.
   style.css caps the About title art at max-width:8.385vw (120px)
   — a leftover for the old small art. Every replacement art
   rendered horizontally CRUSHED to half its aspect. Lift the cap.
   ============================================================ */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        max-width: none;
        width: auto;
        height: max(4.05vw, 47px);
    }

    /* Policies: distribute the dead 88px above the CTA through the stack */
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(24px, 3.9vh, 44px);
    }

    .theme-teal.policies-page .banner .banner-detail-container .details .details-disc {
        margin-top: clamp(14px, 2.4vh, 26px);
    }

    .theme-teal.policies-page .banner .banner-detail-container .aaccordion {
        margin-top: clamp(14px, 2.4vh, 26px);
    }

    .theme-teal.policies-page .aaccordion .at-item {
        margin-bottom: clamp(9px, 1.6vh, 17px);
    }

    /* when a row is expanded, neighbors compress to make room */
    .theme-teal.about-us .aaccordion:has(.at-title.active) .at-item,
    .theme-teal.policies-page .aaccordion:has(.at-title.active) .at-item {
        margin-bottom: 4px;
    }

    .theme-teal.policies-page .aaccordion:has(.at-title.active) {
        margin-top: clamp(8px, 1.2vh, 14px);
    }

    .theme-teal.policies-page .aaccordion:has(.at-title.active) ~ * ,
    .theme-teal.about-us .aaccordion:has(.at-title.active) ~ * {
        transition: margin 0.2s ease;
    }
}

/* policies: 11px over — ease the distribution slightly */
@media (min-width: 992px) {
    .theme-teal.policies-page .aaccordion .at-item {
        margin-bottom: clamp(8px, 1.45vh, 15px);
    }

    .theme-teal.policies-page .banner .banner-detail-container .aaccordion {
        margin-top: clamp(12px, 2vh, 22px);
    }
}

/* ============================================================
   2026-08-18 — OPTICAL title equalization across all four pages.
   Boxes were equal (49px) but the art fills its box differently
   (measured ink-core fraction: mission .560, directions .530,
   about .621, policies .600). Size each box so the optical core
   of every title = Our Mission's 27.5px @1440.
   ============================================================ */
@media (min-width: 992px) {
    /* Our Mission (home + reference) stays 3.4vw / 38px */

    /* Directions: slightly small -> up to 3.60vw */
    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img * {
        height: max(3.60vw, 40px);
        width: auto;
    }

    /* About Us: optically ~31% large -> down to 3.08vw */
    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img * {
        max-width: none;
        width: auto;
        height: max(3.08vw, 35px);
    }

    /* Salon Policies: slightly large -> down to 2.97vw (render-verified) */
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img * {
        height: max(3.08vw, 35px);
        width: auto;
    }
}

/* ============================================================
   2026-08-18 — LIVE-SITE FIXES (Steven's screenshot review):
   1. NAVY TEXT was still in accordion tab bodies. style.css has
      !important navy+tiny rules that beat the earlier overrides:
        .at-item .at-tab .tab-bdoy p        {0.733vw; #011b42 !important}
        .location-page ... .at-tab p        {0.781vw; #022b67 !important}
        .about-us ... .at-tab p             {0.781vw; #011B42 !important}
      Only !important at >= specificity, loaded later, wins. All
      accordion content: NO navy, readable ADA floor, crisper shadow.
   2. Scrolled content crowded flush under HAIR ARTISTRY — move part
      of the title gap OUTSIDE .content-scroll (at-rest layout and
      1440x900 fit unchanged; totals preserved).
   3. Menu down-arrow (open/hover) back to AQUA like the original;
      closed east arrows stay silver.
   ============================================================ */
@media (min-width: 992px) {
    /* --- 1a. base: every element in a tab body — pale, floor 15px --- */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy p,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy * {
        color: #C1D7D7 !important;
        font-size: clamp(15px, 1.1vw, 20px) !important;
        line-height: 1.32 !important;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.45) !important;
    }

    /* --- 1b. emphasis lines (strong / u / lead links) a step up --- */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy strong,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy u,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy p > a {
        color: #C1D7D7 !important;
        font-size: clamp(16px, 1.25vw, 22px) !important;
        font-weight: 800 !important;
    }

    /* --- 1c. About sub-headers (Consistency / Confidence / Compliments) --- */
    .theme-teal.about-us .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy span {
        color: #C1D7D7 !important;
        font-size: clamp(14px, 1.0vw, 18px) !important;
        font-weight: 800 !important;
    }

    /* --- 1d. About author script stays large Distant Stroke --- */
    .theme-teal.about-us .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy .author span {
        font-family: 'Distant Stroke', sans-serif !important;
        font-size: clamp(24px, 1.875vw, 32px) !important;
        font-weight: 500 !important;
    }

    /* --- 1e. links keep underline; aqua hover --- */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a {
        text-decoration: underline !important;
    }

    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a:hover {
        color: #6CD9DB !important;
    }

    /* --- 2. constant breathing room under the lockup when scrolled:
           container gets the gap, title gives it back (totals kept) --- */
    .theme-teal.location-page .banner .banner-detail-container .details .content-scroll {
        margin-top: 18px;
    }

    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: max(0px, calc(clamp(16px, 4.4vh, 48px) - 18px));
    }

    .theme-teal.about-us .banner .banner-detail-container .details .content-scroll {
        margin-top: 18px;
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img {
        margin-top: 0;
    }

    .theme-teal.policies-page .banner .banner-detail-container .details .content-scroll {
        margin-top: 18px;
    }

    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: max(0px, calc(clamp(24px, 3.9vh, 44px) - 18px));
    }

    /* --- 3. menu arrow: open/hover = AQUA pointing south --- */
    .theme-teal .banner .banner-image-container .banner-menu .main-dd:hover .dd-title img,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd.show .dd-title img,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd.active .dd-title img {
        content: url("../images/thumb/play-icon-aqua.png");
    }
}

/* ============================================================
   2026-08-18b — TAB CONTENT TYPOGRAPHY MATCHED TO THE PXD MOCKS
   Decoded from metadata.info text layers (13/14/12):
     paragraph 60-70pt Raleway Medium | tab content 50pt (details 45pt)
     hierarchy by WEIGHT + ITALIC at ONE size — never by size bumps:
       lead-ins  Raleway Medium ITALIC   -> em
       sub-heads Raleway Bold, underlined, centered -> .tab-bdoy > span
       body      Raleway Regular/Medium  -> p (base 500 for legibility)
       closing   Raleway Medium          -> plain p (strong unwrapped)
       author    Distant Stroke 120pt (2.4x body)
   Scaled up from the mock's literal 11px so it reads (his ADA note),
   keeping the mock's proportions between elements.
   ============================================================ */
@media (min-width: 992px) {
    /* base: one size, medium weight, crisp shadow */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy p,
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy * {
        color: #C1D7D7 !important;
        font-size: clamp(14px, 0.98vw, 18px) !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        letter-spacing: normal !important;
        text-shadow: 0 1px 1px rgba(2, 44, 68, 0.45) !important;
    }

    /* emphasis: SAME size, one step bolder (mock never bumps size) */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy strong {
        font-size: inherit !important;
        font-weight: 600 !important;
    }

    /* lead-ins: Raleway Medium Italic per mock */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy em {
        font-style: italic !important;
        font-size: inherit !important;
        font-weight: 500 !important;
    }

    /* sub-headers (Consistency | TOOLS...): bold + underlined, same size */
    .theme-teal.about-us .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy > span {
        font-size: inherit !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    /* author script: Distant Stroke at the mock's 2.4x body ratio */
    .theme-teal.about-us .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy .author span {
        font-family: 'Distant Stroke', sans-serif !important;
        font-size: clamp(28px, 2.35vw, 36px) !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    /* dead-anchor section labels (FEES): no underline, modest weight —
       mock renders these as plain lines, not links */
    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a[href="#"] {
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: inherit !important;
    }

    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a[href]:not([href="#"]) {
        text-decoration: underline !important;
        font-weight: 600 !important;
    }

    .theme-teal .banner .banner-detail-container .aaccordion .at-item .at-tab .tab-bdoy a:hover {
        color: #6CD9DB !important;
    }
}

/* ============================================================
   2026-08-18c — custom cursor EVERYWHERE on the page, not just
   links/menu/logo (style.css only applied it to interactive
   elements). Map keeps Google's own pan/grab cursors.
   ============================================================ */
.theme-teal,
.theme-teal * {
    cursor: url('../images/thumb/cursor-v2.png?v=2') 2 2, auto;
}

.theme-teal #map,
.theme-teal #map * {
    cursor: auto;
}

/* accordion title rows had cursor:pointer overriding the custom cursor */
.theme-teal .aaccordion .at-title,
.theme-teal .aaccordion .at-title * {
    cursor: url('../images/thumb/cursor-v2.png?v=2') 2 2, pointer;
}

/* ============================================================
   2026-08-18c — refinements round (his review of the mobile build):
   1. Menu hover/highlight = #A2E7E8 (matches arrows + highlighted text);
      replaces #6CD9DB hover and legacy #61c5c7 active. CTA hover stays #6CD9DB.
   2. Content scrollbar = #6EA0A4 (left-side watermark tone) — the silver
      read too bright white.
   ============================================================ */
@media (min-width: 992px) {
    .theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-menu:hover,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-menu.active,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd.active .dd-title,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd.show .dd-title,
    .theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-title:hover {
        color: #A2E7E8;
    }

    .theme-teal .cscroll-track {
        background: rgba(110, 160, 164, 0.28);
    }

    .theme-teal .cscroll-thumb {
        background: linear-gradient(180deg, #7CACB0 0%, #6EA0A4 55%, #78A8AC 100%);
    }
}

/* 2026-08-18d — shadow law: text shadows crisp (blur halved, offsets and
   opacity unchanged) per Steven's "less blurry" rule. All 0 1px 2px -> 0 1px 1px. */

/* ============================================================
   2026-08-18e — drop Questions? + CTA lower on 12/13/14 so the
   accordion content area gains ~30px in normal view (his call:
   the bottom slack was dead space). Home keeps its approved
   centered layout — untouched.
   ============================================================ */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container,
    .theme-teal.policies-page .banner .banner-detail-container,
    .theme-teal.location-page .banner .banner-detail-container {
        padding-bottom: 12px;
    }

    .theme-teal.about-us .banner .banner-detail-container .details .action *,
    .theme-teal.policies-page .banner .banner-detail-container .details .action *,
    .theme-teal.location-page .banner .banner-detail-container .details .action * {
        margin-bottom: 8px;
    }

    .theme-teal.about-us .banner .banner-detail-container .details .question,
    .theme-teal.policies-page .banner .banner-detail-container .details .question,
    .theme-teal.location-page .banner .banner-detail-container .details .question {
        margin-bottom: 4px;
    }
}

/* 2026-08-18f — one more nudge: last accordion was still clipped by a few px
   at his window height. Bottom rhythm tightened again; freed px go to content. */
@media (min-width: 992px) {
    .theme-teal.about-us .banner .banner-detail-container,
    .theme-teal.policies-page .banner .banner-detail-container,
    .theme-teal.location-page .banner .banner-detail-container {
        padding-bottom: 6px;
    }

    .theme-teal.about-us .banner .banner-detail-container .details .question,
    .theme-teal.policies-page .banner .banner-detail-container .details .question,
    .theme-teal.location-page .banner .banner-detail-container .details .question {
        margin-top: clamp(6px, 1.1vh, 12px);
        margin-bottom: 2px;
    }
}

/* 2026-08-18f-b — short-viewport compaction: real browser windows on a
   900px screen have ~820-860px of inner height (toolbars). Below 860px
   the content stack tightens so the LAST accordion is never clipped. */
@media (min-width: 992px) and (max-height: 860px) {
    .theme-teal.about-us .aaccordion .at-item,
    .theme-teal.policies-page .aaccordion .at-item,
    .theme-teal.location-page .aaccordion .at-item {
        margin-bottom: 5px;
    }

    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(10px, 2vh, 18px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .our-mission-img,
    .theme-teal.policies-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: clamp(8px, 1.4vh, 14px);
    }

    .theme-teal.about-us .banner .banner-detail-container .details .details-disc,
    .theme-teal.policies-page .banner .banner-detail-container .details .details-disc,
    .theme-teal.location-page .banner .banner-detail-container .details .details-disc {
        margin-top: clamp(6px, 1vh, 10px);
    }

    .theme-teal.about-us .banner .banner-detail-container .aaccordion,
    .theme-teal.policies-page .banner .banner-detail-container .aaccordion,
    .theme-teal.location-page .banner .banner-detail-container .aaccordion {
        margin-top: clamp(6px, 1vh, 10px);
    }

    .theme-teal.about-us .aaccordion .at-title,
    .theme-teal.policies-page .aaccordion .at-title,
    .theme-teal.location-page .aaccordion .at-title {
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

/* short viewports: About's long intro wraps into fewer lines when the
   paragraph runs wider; line spacing tightens a touch (ADA-safe) */
@media (min-width: 992px) and (max-height: 860px) {
    .theme-teal.about-us .banner .banner-detail-container .details .details-disc p {
        max-width: max(41vw, 430px);
        margin-left: auto;
        margin-right: auto;
        line-height: 1.18;
    }

    .theme-teal.about-us .banner .banner-detail-container .details .details-disc {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

/* 2026-08-18g — Page 12 only: one more small nudge (his call) */
@media (min-width: 992px) {
    .theme-teal.location-page .banner .banner-detail-container .details .our-mission-img {
        margin-top: max(0px, calc(clamp(16px, 4.4vh, 48px) - 24px));
    }

    .theme-teal.location-page .banner .banner-detail-container .details .details-disc {
        margin-top: clamp(8px, 1.4vh, 16px);
    }

    .theme-teal.location-page .aaccordion .at-item {
        margin-bottom: clamp(7px, 1.2vh, 12px);
    }
}

/* AUDIT r11: about-us column ran 16px over at 1920x1080 — tighten the intro
   and accordion gaps at wide 16:9 desktops. */
@media (min-width: 1780px) and (max-height: 1120px) {
  .theme-teal.about-us .banner .banner-detail-container .details .details-disc {
    margin-top: 4px; }
  .theme-teal.about-us .banner .banner-detail-container .details .aaccordion {
    margin-top: 3px; margin-bottom: 2px; }
}

/* r18 (his call): desktop menu — page items get the SECTION-TITLE shadow
   (the vw-scaled offset read as several px on large screens), and the menu
   text steps up slightly across the board */
.theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-title {
  font-size: 1.13vw; }
.theme-teal .banner .banner-image-container .banner-menu .main-dd .dd-menu {
  font-size: 0.92vw; line-height: 1.16vw;
  text-shadow: 0.5px 0.5px 0 #00001B; }

/* r18 (his call): ARTISTS menu reads as three tight couplets — minimal
   spacing inside each name pair, clear gaps between artists */
.theme-teal .banner .banner-image-container .banner-menu .main-dd.artists .dd-menu {
  line-height: 0.98vw; }
.theme-teal .banner .banner-image-container .banner-menu .main-dd.artists ul li {
  margin-bottom: 0.55vw; }
.theme-teal .banner .banner-image-container .banner-menu .main-dd.artists ul li:last-child {
  margin-bottom: 0; }