/* ============================================================================
   FHA — HOME: "QUESTIONS? ANSWERED."  (the who, what, when, where & why)
   Round 24 · homepage only · loaded after theme-teal.css

   Steven's brief: read like the SERVICE MENU — one large button that drops
   down to a series of accordions, and the rows OPEN on the arrow instead of
   sliding the way the service rows do.

   So nothing here is new visual language. Every value is lifted from the
   component it imitates:
     · large button ............ section2.css  .s2artist / .abar / .nm / .rl
     · list reveal ............. section2.css  .s2group .s2list
     · question rows ........... section2.css  .s2slot.s2acc (.panel/.accHd/
                                .arw/.hdT/.dd/.ddIn) incl. the panel's internal
                                top shadow and 1px top light line
     · glass recipe ............ theme-teal.css .aaccordion .at-title
     · WHO/WHAT term pairing ... section4.css  .fav5w dt / dd  (tile backs)
     · silver -> aqua arrow .... images/thumb/play-icon-silver | -aqua
     · CTA ..................... style.css + theme-teal.css  .action *
   The additions are semantics the older markup never had: real <button>
   controls, aria-expanded / aria-controls, and a visible focus ring.
   ========================================================================= */

/* --------------------------------------------------------------- buttons -- */
.hqa button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: block;
    width: 100%;
}

.hqa button:focus-visible,
.hqa a:focus-visible {
    outline: 2px solid #A2E7E8;
    outline-offset: 2px;
}

/* the arrow: silver at rest, aqua on hover / open, east -> south */
.hqa .arw {
    flex-shrink: 0;
    order: -1;
    background: url(../images/thumb/play-icon-silver.png) center/contain no-repeat;
    filter: drop-shadow(0 1px 1px rgba(2, 44, 68, .45));
    transform: rotate(0deg);
    transition: transform .3s ease;
}

.hqa .hqa-master:hover .arw,
.hqa.open .hqa-master .arw,
.hqa .hqa-hd:hover .arw,
.hqa-item.open .arw {
    background-image: url(../images/thumb/play-icon-aqua.png);
}

.hqa.open .hqa-master .arw,
.hqa-item.open .arw {
    transform: rotate(90deg);
}

/* the two brand statements closing the WHY answer */
.hqa .stmt {
    display: block;
    font-weight: 800;
    letter-spacing: .04em;
    color: #E7F4F4;
}

.hqa .slog {
    display: block;
    font-family: 'Distant Stroke', 'Playfair Display', serif;
    font-weight: 500;
    color: #A2E7E8;
    line-height: 1.05;
}

@media (prefers-reduced-motion: reduce) {
    .hqa .arw,
    .hqa .hqa-list,
    .hqa .hqa-dd {
        transition: none !important;
    }
}

/* ===================================================== DESKTOP (>= 992px) = */
@media (min-width: 992px) {

    .theme-teal.home .details .hqa {
        width: max(30.5vw, 300px);
        max-width: max(30.5vw, 300px);
        margin: clamp(24px, 4.4vh, 50px) auto clamp(4px, .8vh, 10px);
        text-align: left;
    }

    /* ---- the one large button: the CONSULTATION card treatment --------
       (.s2slot.invert .panel — the one accent field on the s2 pages)
       little caps + big caps right, etched script bottom-left, meta under. */
    .theme-teal.home .details .hqa-h2 {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
    }

    .theme-teal.home .details .hqa-master {
        position: relative;
        border-radius: 2px;
        overflow: hidden;
        text-align: right;
        padding: clamp(12px, 1.7vh, 19px) 18px clamp(26px, 3.4vh, 38px) 46px;
        background: #056981;
        border: 1px solid rgba(161, 231, 232, .38);
        box-shadow: inset 0 1px 0 rgba(161, 231, 232, .20),
                    0 4px 14px rgba(2, 24, 38, .28);
    }

    /* the etched script, bottom-left, bleeding off the edge like consult-etch */
    .theme-teal.home .details .hqa-master .etch {
        position: absolute;
        left: 28px;
        bottom: max(-1.15vw, -19px);
        z-index: 1;
        pointer-events: none;
        white-space: nowrap;
        font-family: 'Distant Stroke', 'Coldiac Free', serif;
        font-weight: 400;
        font-size: clamp(54px, 5.55vw, 98px);
        line-height: 1;
        color: rgba(178, 200, 206, .55);
    }

    .theme-teal.home .details .hqa-master .caps {
        position: relative;
        z-index: 2;
        display: block;
    }

    .theme-teal.home .details .hqa-master .the {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        font-size: clamp(13px, 1.06vw, 19px);
        letter-spacing: .15em;
        color: #7CC9CF;
        margin-right: .34em;
    }

    .theme-teal.home .details .hqa-master .big {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: clamp(20px, 1.72vw, 32px);
        letter-spacing: .02em;
        line-height: 1.05;
        color: #7CC9CF;
        text-shadow: 0 1px 1px rgba(2, 30, 46, .45);
        transition: color .2s ease;
    }

    .theme-teal.home .details .hqa-master:hover .big,
    .theme-teal.home .details .hqa.open .hqa-master .big {
        color: #A2E7E8;
    }

    /* the who/what/when line lives UNDER the button, the way the service
       menu's artist groups carry a legend — it kept colliding with the
       ascenders of the etched script when it sat inside. */
    .theme-teal.home .details .hqa-legend {
        margin: clamp(4px, .6vh, 7px) 0 0;
        text-align: center;
        font-family: 'Raleway', sans-serif;
        font-weight: 700;
        font-size: clamp(11px, .88vw, 14px);
        letter-spacing: .13em;
        text-transform: uppercase;
        line-height: 1.3;
        color: #A9CFD2;
        text-shadow: 0 1px 1px rgba(2, 44, 68, .45);
    }

    .theme-teal.home .details .hqa-master .arw {
        position: absolute;
        left: 15px;
        top: clamp(20px, 2.9vh, 32px);
        z-index: 3;
        width: 14px;
        height: 16px;
    }

    /* ---- the drop-down list ------------------------------------------- */
    .theme-teal.home .details .hqa-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s cubic-bezier(.3, .8, .25, 1);
    }

    .theme-teal.home .details .hqa.open .hqa-list {
        max-height: 460vh;
    }

    .theme-teal.home .details .hqa-listIn {
        padding-top: clamp(13px, 2vh, 22px);
    }

    /* ---- a question row ------------------------------------------------ */
    .theme-teal.home .details .hqa-item {
        margin-bottom: clamp(4px, .7vh, 7px);
    }

    .theme-teal.home .details .hqa-h3 {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
    }

    /* ONE continuous panel: head + drop-down share a single glass field */
    .theme-teal.home .details .hqa-shell {
        position: relative;
        width: 100%;
        border-radius: 2px;
        overflow: hidden;
        background: rgba(235, 248, 249, .22);
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
        backdrop-filter: blur(16px) saturate(1.25);
        border: 1px solid rgba(255, 255, 255, .35);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
                    0 4px 14px rgba(2, 24, 38, .25);
    }

    .theme-teal.home .details .hqa-shell::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 24px;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(180deg, rgba(2, 24, 38, .30) 0%, rgba(2, 24, 38, .11) 48%, rgba(2, 24, 38, 0) 100%);
    }

    .theme-teal.home .details .hqa-shell::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        pointer-events: none;
        z-index: 6;
        background: rgba(255, 255, 255, .20);
    }

    .theme-teal.home .details .hqa-hd {
        position: relative;
        z-index: 7;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 11px;
        padding: clamp(7px, 1vh, 11px) 14px;
        text-align: left;
    }

    .theme-teal.home .details .hqa-hd .arw {
        width: 13px;
        height: 15px;
    }

    .theme-teal.home .details .hqa-hd .txt {
        flex: 1;
        min-width: 0;
    }

    /* the 5 W cue — the artist bar's ROLE line (.rl): tracked-out Raleway,
       parked in the row's upper-right corner (his call) */
    .theme-teal.home .details .hqa-hd .txt::after {
        content: '';
        display: block;
        clear: both;
    }

    .theme-teal.home .details .hqa-w {
        float: right;
        margin: 1px 0 0 14px;
        font-family: 'Raleway', sans-serif;
        font-weight: 700;
        font-size: clamp(9px, .69vw, 11px);
        letter-spacing: .24em;
        line-height: 1.1;
        color: #A9CFD2;
        transition: color .18s ease;
    }

    /* the question — the artist NAME face from the service menu (.nm) */
    .theme-teal.home .details .hqa-q {
        display: block;
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: clamp(12.5px, .97vw, 16px);
        letter-spacing: .06em;
        line-height: 1.22;
        color: #EAF7F7;
        text-shadow: 0 1px 1px rgba(2, 30, 46, .6);
        transition: color .18s ease;
    }

    .theme-teal.home .details .hqa-hd:hover .hqa-w,
    .theme-teal.home .details .hqa-item.open .hqa-w,
    .theme-teal.home .details .hqa-hd:hover .hqa-q,
    .theme-teal.home .details .hqa-item.open .hqa-q {
        color: #A2E7E8;
    }

    /* the drop-down — never a second fill */
    .theme-teal.home .details .hqa-dd {
        position: relative;
        max-height: 0;
        overflow: hidden;
        background: transparent;
        transition: max-height .42s cubic-bezier(.3, .8, .25, 1);
    }

    .theme-teal.home .details .hqa-item.open .hqa-dd {
        max-height: 150vh;
    }

    .theme-teal.home .details .hqa-ddin {
        padding: 2px 16px 13px;
    }

    .theme-teal.home .details .hqa-ddin p {
        color: #C1D7D7;
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        font-size: clamp(11.5px, .86vw, 14px);
        line-height: 1.4;
        margin: 0 0 .5em;
        text-shadow: 0 1px .5px rgba(2, 44, 68, .45);
    }

    .theme-teal.home .details .hqa-ddin p:last-child {
        margin-bottom: 0;
    }

    .theme-teal.home .details .hqa-ddin a {
        color: #C1D7D7;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    .theme-teal.home .details .hqa-ddin a:hover {
        color: #6CD9DB;
    }

    .theme-teal.home .details .hqa .stmt {
        display: block;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        letter-spacing: .04em;
        color: #E7F4F4;
        font-size: clamp(11.5px, .86vw, 14px);
        margin-top: .55em;
        text-shadow: 0 1px .5px rgba(2, 44, 68, .5);
    }

    .theme-teal.home .details .hqa .slog {
        display: block;
        font-family: 'Distant Stroke', 'Playfair Display', serif;
        font-weight: 500;
        color: #A2E7E8;
        font-size: clamp(26px, 2.1vw, 40px);
        line-height: 1.05;
        margin-top: .02em;
        text-shadow: 0 1px 2px rgba(2, 44, 68, .5);
    }

    /* the WHERE row's small CTA to the Location page */
    .theme-teal.home .details .hqa-jump {
        display: inline-block;
        margin-top: .6em;
        font-family: 'Raleway', sans-serif;
        font-weight: 700;
        font-size: clamp(10.5px, .76vw, 13px);
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #A2E7E8;
        text-decoration: none;
        border-bottom: 1px solid rgba(162, 231, 232, .5);
        padding-bottom: 1px;
        transition: color .18s ease, border-color .18s ease;
    }

    .theme-teal.home .details .hqa-jump:hover {
        color: #6CD9DB;
        border-bottom-color: #6CD9DB;
    }

    /* ---- quiet page links under the rows ------------------------------- */
    .theme-teal.home .details .hqa-more {
        margin-top: clamp(8px, 1.3vh, 14px);
        text-align: center;
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        font-size: clamp(10px, .74vw, 13px);
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #8FC3C6;
    }

    .theme-teal.home .details .hqa-more a {
        color: #C1D7D7;
        text-decoration: none;
        border-bottom: 1px solid rgba(193, 215, 215, .38);
        padding-bottom: 1px;
        transition: color .18s ease, border-color .18s ease;
    }

    .theme-teal.home .details .hqa-more a:hover {
        color: #A2E7E8;
        border-bottom-color: #A2E7E8;
    }

    .theme-teal.home .details .hqa-more .sep {
        padding: 0 .8em;
        opacity: .55;
    }

    /* ---- closing conversion block -------------------------------------- */
    .theme-teal.home .details .hqa-cta {
        margin-top: clamp(10px, 1.8vh, 20px);
        text-align: center;
    }

    .theme-teal.home .details .hqa-ask {
        font-family: 'Distant Stroke', 'Playfair Display', serif;
        font-weight: 500;
        font-size: clamp(24px, 1.95vw, 38px);
        line-height: 1.1;
        color: #C1D7D7;
        text-shadow: 0 1px 1px rgba(2, 44, 68, .5);
        margin: 0 0 clamp(6px, 1vh, 12px);
    }

    .theme-teal.home .details .hqa-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(5px, .8vh, 9px);
    }

    .theme-teal.home .details .hqa-buttons a {
        display: block;
        width: 100%;
        max-width: max(14.271vw, 210px);
        font-family: 'Coldiac Free', sans-serif;
        font-size: clamp(11px, .8vw, 15px);
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        padding: .58vw .885vw;
        border-radius: 2px;
        transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    }

    .theme-teal.home .details .hqa-buttons a.primary {
        color: #A1E7E8;
        background-color: #022C44;
        border: 1px solid #022C44;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
                    0 2px 6px rgba(2, 24, 38, .3);
    }

    .theme-teal.home .details .hqa-buttons a.primary:hover {
        background-color: #aaf9f9;
        color: #022C44;
        border-color: #aaf9f9;
    }

    .theme-teal.home .details .hqa-buttons a.ghost {
        color: #E7F4F4;
        background: rgba(235, 248, 249, .22);
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
        backdrop-filter: blur(16px) saturate(1.25);
        border: 1px solid rgba(255, 255, 255, .35);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
                    0 4px 14px rgba(2, 24, 38, .25);
    }

    .theme-teal.home .details .hqa-buttons a.ghost:hover {
        background-color: #aaf9f9;
        color: #022C44;
        border-color: #aaf9f9;
    }
}

/* short-viewport tier — his laptop runs ~830px of inner height */
@media (min-width: 992px) and (max-height: 870px) {
    .theme-teal.home .details .hqa-master .abar { padding: 6px 16px; }
    .theme-teal.home .details .hqa-hd { padding: 6px 13px; }
    .theme-teal.home .details .hqa-item { margin-bottom: 4px; }
    .theme-teal.home .details .hqa-ddin { padding: 2px 13px 10px; }
}

/* ====================================================== MOBILE (<= 991px) = */
@media (max-width: 991px) {

    #fhaMobile .hqa {
        margin-top: 36px;
        text-align: left;
    }

    #fhaMobile .hqa-h2 {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
    }

    #fhaMobile .hqa-master {
        position: relative;
        border-radius: 2px;
        overflow: hidden;
        text-align: right;
        padding: 14px 14px 34px 38px;
        min-height: 92px;
        background: #056981;
        border: 1px solid rgba(161, 231, 232, .38);
        box-shadow: inset 0 1px 0 rgba(161, 231, 232, .20),
                    0 4px 14px rgba(2, 24, 38, .28);
    }

    #fhaMobile .hqa-master .etch {
        position: absolute;
        left: 24px;
        bottom: -13px;
        z-index: 1;
        pointer-events: none;
        white-space: nowrap;
        font-family: 'Distant Stroke', 'Coldiac Free', serif;
        font-weight: 400;
        font-size: 55px;
        line-height: 1;
        color: rgba(178, 200, 206, .55);
    }

    #fhaMobile .hqa-master .caps {
        position: relative;
        z-index: 2;
        display: block;
    }

    #fhaMobile .hqa-master .the {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: .15em;
        color: #7CC9CF;
        margin-right: .34em;
    }

    #fhaMobile .hqa-master .big {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 25px;
        letter-spacing: .02em;
        line-height: 1.05;
        color: #7CC9CF;
        text-shadow: 0 1px 1px rgba(2, 30, 46, .45);
    }

    #fhaMobile .hqa.open .hqa-master .big {
        color: #A2E7E8;
    }

    #fhaMobile .hqa-legend {
        margin-top: 7px;
        text-align: center;
        font-family: 'Raleway', system-ui, sans-serif;
        font-weight: 700;
        font-size: 10px;
        letter-spacing: .1em;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 1.3;
        color: #A9CFD2;
        text-shadow: 0 1px 1px rgba(2, 44, 68, .45);
    }

    #fhaMobile .hqa-master .arw {
        position: absolute;
        left: 13px;
        top: 28px;
        z-index: 3;
        width: 14px;
        height: 16px;
    }

    #fhaMobile .hqa-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s cubic-bezier(.3, .8, .25, 1);
    }

    #fhaMobile .hqa.open .hqa-list {
        max-height: 5200px;
    }

    #fhaMobile .hqa-listIn {
        padding-top: 16px;
    }

    #fhaMobile .hqa-item {
        margin-bottom: 7px;
    }

    #fhaMobile .hqa-h3 {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
    }

    #fhaMobile .hqa-shell {
        position: relative;
        width: 100%;
        border-radius: 2px;
        overflow: hidden;
        background: linear-gradient(92deg, rgba(235, 248, 249, .16), rgba(190, 230, 230, .24));
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
        backdrop-filter: blur(12px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, .28);
        box-shadow: 0 2px 8px rgba(2, 24, 38, .18),
                    inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    #fhaMobile .hqa-shell::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 20px;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(180deg, rgba(2, 24, 38, .26) 0%, rgba(2, 24, 38, .10) 48%, rgba(2, 24, 38, 0) 100%);
    }

    #fhaMobile .hqa-hd {
        position: relative;
        z-index: 7;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 15px;
        min-height: 52px;
        text-align: left;
    }

    #fhaMobile .hqa-hd .arw {
        width: 13px;
        height: 15px;
    }

    #fhaMobile .hqa-hd .txt {
        flex: 1;
        min-width: 0;
    }

    #fhaMobile .hqa-hd .txt::after {
        content: '';
        display: block;
        clear: both;
    }

    #fhaMobile .hqa-w {
        float: right;
        margin: 1px 0 0 12px;
        font-family: 'Raleway', system-ui, sans-serif;
        font-weight: 700;
        font-size: 10px;
        letter-spacing: .24em;
        line-height: 1.1;
        color: #A9CFD2;
    }

    #fhaMobile .hqa-q {
        display: block;
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 14.5px;
        letter-spacing: .06em;
        line-height: 1.25;
        color: #EAF7F7;
        text-shadow: 0 1px 1px rgba(2, 30, 46, .6);
    }

    #fhaMobile .hqa-item.open .hqa-w,
    #fhaMobile .hqa-item.open .hqa-q {
        color: #A2E7E8;
    }

    #fhaMobile .hqa-dd {
        max-height: 0;
        overflow: hidden;
        transition: max-height .42s cubic-bezier(.3, .8, .25, 1);
    }

    #fhaMobile .hqa-item.open .hqa-dd {
        max-height: 1600px;
    }

    #fhaMobile .hqa-ddin {
        padding: 2px 16px 14px;
    }

    #fhaMobile .hqa-ddin p {
        color: #C1D7D7;
        text-shadow: 0 1px .5px rgba(2, 44, 68, .45);
        font-family: 'Raleway', system-ui, sans-serif;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;
        margin-bottom: 7px;
    }

    #fhaMobile .hqa-ddin p:last-child {
        margin-bottom: 0;
    }

    #fhaMobile .hqa-ddin a {
        color: #C1D7D7;
    }

    #fhaMobile .hqa .stmt {
        font-size: 14px;
        margin-top: 8px;
        text-shadow: 0 1px .5px rgba(2, 44, 68, .5);
    }

    #fhaMobile .hqa .slog {
        font-size: 33px;
        margin-top: 2px;
        text-shadow: 0 1px 2px rgba(2, 44, 68, .5);
    }

    #fhaMobile .hqa-jump {
        display: inline-block;
        margin-top: 10px;
        padding: 7px 2px;
        font-family: 'Raleway', system-ui, sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #A2E7E8;
        text-decoration: none;
        border-bottom: 1px solid rgba(162, 231, 232, .5);
    }

    #fhaMobile .hqa-more {
        margin-top: 14px;
        text-align: center;
        font-family: 'Raleway', system-ui, sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #8FC3C6;
    }

    #fhaMobile .hqa-more a {
        display: inline-block;
        padding: 7px 2px;
        color: #C1D7D7;
        text-decoration: none;
        border-bottom: 1px solid rgba(193, 215, 215, .38);
    }

    #fhaMobile .hqa-more .sep {
        padding: 0 .8em;
        opacity: .55;
    }

    #fhaMobile .hqa-cta {
        margin-top: 18px;
        text-align: center;
    }

    #fhaMobile .hqa-ask {
        font-family: 'Distant Stroke', 'Playfair Display', serif;
        font-weight: 500;
        font-size: 30px;
        line-height: 1.1;
        color: #C1D7D7;
        text-shadow: 0 1px 1px rgba(2, 44, 68, .5);
        margin-bottom: 11px;
    }

    #fhaMobile .hqa-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    #fhaMobile .hqa-buttons a {
        display: block;
        width: 100%;
        max-width: 300px;
        min-height: 48px;
        padding: 14px;
        border-radius: 2px;
        font-family: 'Coldiac Free', 'Playfair Display', serif;
        font-size: 14px;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
    }

    #fhaMobile .hqa-buttons a.primary {
        background: #022C44;
        color: #A1E7E8;
        box-shadow: 0 3px 12px rgba(2, 20, 34, .5),
                    inset 0 1px 0 rgba(161, 231, 232, .22);
    }

    #fhaMobile .hqa-buttons a.ghost {
        color: #E7F4F4;
        background: rgba(235, 248, 249, .20);
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
        backdrop-filter: blur(12px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, .32);
        box-shadow: 0 4px 18px rgba(2, 24, 38, .20);
    }

    /* the mission column now carries content — give it room under the CTA */
    #fhaMobile .colInner:has(.hqa) { padding-bottom: 20px; }
    #fhaMobile .colInner:has(.hqa) .cc { margin: 0 auto; padding-top: 4px; }
}

/* --------------------------------------------------- high-contrast mode --- */
html.hc .theme-teal.home .details .hqa-master,
html.hc .theme-teal.home .details .hqa-shell,
html.hc #fhaMobile .hqa-master,
html.hc #fhaMobile .hqa-shell {
    background: rgba(3, 40, 56, .58);
    border-color: rgba(162, 231, 232, .34);
}

html.hc .details .hqa .big,
html.hc .hqa .big,
html.hc .hqa .hqa-w,
html.hc .hqa .hqa-q {
    color: #F6FCFC;
}

html.hc .hqa .rl,
html.hc .hqa-ddin p,
html.hc .hqa-ddin a,
html.hc .hqa-more,
html.hc .hqa-more a,
html.hc .hqa-ask {
    color: #F2FBFB;
}

html.hc .hqa .stmt {
    color: #FFFFFF;
}