/* ============================================================================
   GSC-TEMPC — FAQ / COMMON QUESTIONS (.gsctempc-faq)
   "HELP DESK LEDGER" REDESIGN
   ----------------------------------------------------------------------------
   Scope:   every selector starts with .gsctempc-faq. No other section, the
            header, sidebar, hero or footer is touched.
   Markup:  unchanged. No HTML, PHP or JS edits, no invented classes. Every
            hook below exists in the previous stylesheet: __inner, __intro,
            __watermark, __eyebrow, __title (span + em), __rule, __lede,
            __contact, __list, __item (.is-open), __question-wrap,
            __question, __question-text, __icon (two spans), __answer,
            __answer-inner, and the answer <p>.

   Concept
   -------
   A help desk with a printed ledger feel. On wide sections the introduction
   stays pinned on the left (sticky) while the questions scroll past on the
   right, so the "Ask us" link is always within reach. The questions sit in
   one white ledger sheet: a printed index number, the question, and a round
   control. The open row is lifted onto a pale-green field with a gold marker
   on its left edge. Answers are set at a comfortable reading size and line
   length instead of the old tiny, wide paragraphs.

   House style carried over from About Us / Services / News / Visit Us
   -------------------------------------------------------------------
   - White > pale green > white background that starts and ends in white, so
     the section joins its neighbours with no visible cut
   - Fraunces display type in forest green, Poppins (site default) for text
   - gold-to-leaf rules, pill button with a gold-rimmed arrow disc
   - the shared botanical corners
   - gold only for lines and rings, never for small text

   Layout
   ------
   The section is a size container (container-name: faq), so every tier
   follows the SECTION's width, not the screen's. The fixed "Explore
   GSC-TEMPC" panel takes about 320px on desktop.
       < 600   one column, phone
       600+    one column, roomier
       900+    two columns, sticky introduction
       1200+   wider ledger, larger type
   Browsers without container queries use the viewport fallback near the end.

   Palette (from About Us)
   -----------------------
     #30AA28 logo green (icons and decoration only)
     #B9DDB5 leaf    #E5F1E3 pale    #F3F8F2 sage
     #27883A action  #1B6A2E hover   #1F5A2D forest   #173E29 ink
     #D6B56D gold    #F6E3AE gold light
     #3E4C42 body    #53625A muted
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. SECTION TOKENS AND BASE
   ---------------------------------------------------------------------------- */

.gsctempc-faq {
    --gf-brand: #30AA28;
    --gf-leaf: #B9DDB5;
    --gf-pale: #E5F1E3;
    --gf-sage: #F3F8F2;
    --gf-action: #27883A;
    --gf-action-deep: #1B6A2E;
    --gf-forest: #1F5A2D;
    --gf-ink: #173E29;
    --gf-gold: #D6B56D;
    --gf-gold-light: #F6E3AE;
    --gf-white: #FFFFFF;
    --gf-text: #3E4C42;
    --gf-muted: #53625A;
    --gf-line: rgba(31, 90, 45, .16);
    --gf-line-strong: rgba(31, 90, 45, .32);
    --gf-ease: cubic-bezier(.22, 1, .36, 1);
    --gf-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);
    --gf-radius: 8px;

    /* Tier values (phone). Larger tiers override these. */
    --gf-gutter: 20px;
    --gf-pad-top: 72px;
    --gf-pad-bottom: 84px;
    --gf-gap: 48px;
    --gf-num-col: 34px;
    --gf-col-gap: 12px;
    --gf-row-pad-x: 16px;
    --gf-row-pad-y: 20px;
    --gf-row-min: 84px;
    --gf-icon: 38px;
    --gf-fs-title: 2.6rem;
    --gf-fs-lede: 1rem;
    --gf-fs-question: 1rem;
    --gf-fs-answer: 1rem;
    --gf-fs-number: .9rem;

    container: faq / inline-size;
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: var(--gf-pad-top) var(--gf-gutter) var(--gf-pad-bottom);
    overflow: hidden;
    /* clip (unlike hidden) does not turn the section into a scroll container,
       which would stop the sticky introduction from sticking */
    overflow: clip;
    scroll-margin-top: 80px;
    color: var(--gf-text);
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 20%, #E9F3E7 62%, #FFFFFF 100%);
}

.gsctempc-faq *,
.gsctempc-faq *::before,
.gsctempc-faq *::after {
    box-sizing: border-box;
}

/* Soft green light behind the content. The old ledger grid stays retired. */
.gsctempc-faq::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 8% 28%, rgba(185, 221, 181, .45), transparent 72%),
        radial-gradient(ellipse 44% 36% at 94% 76%, rgba(185, 221, 181, .35), transparent 70%);
}

/* Homepage scroll-reveal hook: the final state must never hide the section */
.gsctempc-faq.reveal.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}




/* ----------------------------------------------------------------------------
   3. LAYOUT SHELL
   Stacked by default; two columns from the 900px tier.
   ---------------------------------------------------------------------------- */

.gsctempc-faq__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gf-gap);
    align-items: start;
    width: min(1240px, 100%);
    margin: 0 auto;
}


/* ----------------------------------------------------------------------------
   4. INTRODUCTION
   ---------------------------------------------------------------------------- */

.gsctempc-faq__intro {
    position: relative;
    min-width: 0;
    padding-top: 2px;
}

/* Large pale question mark / lettering behind the title. Quiet by design. */
.gsctempc-faq__watermark {
    position: absolute;
    top: -64px;
    left: -14px;
    z-index: -1;
    color: var(--gf-forest);
    font-family: var(--gf-serif);
    font-size: clamp(7rem, 30cqi, 12rem);
    font-weight: 700;
    line-height: .75;
    opacity: .05;
    pointer-events: none;
    user-select: none;
}

/* Eyebrow: the same gold-to-leaf rule as the About eyebrow. The old pill
   outline and its icon are replaced by that rule. */
.gsctempc-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gf-action-deep);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
    line-height: 1;
    text-transform: uppercase;
}

.gsctempc-faq__eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--gf-gold) 0 60%, var(--gf-leaf) 60% 100%);
}

.gsctempc-faq__eyebrow i {
    display: none;
}

.gsctempc-faq__title {
    max-width: 11em;
    margin: 22px 0 0;
    color: var(--gf-forest);
    font-family: var(--gf-serif);
    font-size: var(--gf-fs-title);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.gsctempc-faq__title span,
.gsctempc-faq__title em {
    display: block;
}

/* The italic line was gold on white (about 1.9:1). It is action green now. */
.gsctempc-faq__title em {
    margin-top: 2px;
    color: var(--gf-action);
    font-style: italic;
    font-weight: 600;
}

/* Gold rule: left edge sits exactly on the text edge */
.gsctempc-faq__rule {
    display: block;
    width: 72px;
    height: 3px;
    margin: 26px 0 24px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gf-gold) 0 58%, var(--gf-leaf) 58% 100%);
}

.gsctempc-faq__lede {
    max-width: 34em;
    margin: 0;
    color: var(--gf-text);
    font-size: var(--gf-fs-lede);
    line-height: 1.75;
}

/* "Ask us" link becomes the same pill button used across the site */
.gsctempc-faq__contact {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 54px;
    margin-top: 28px;
    padding: 10px 12px 10px 24px;
    overflow: hidden;
    border: 1px solid rgba(214, 181, 109, .75);
    border-bottom: 1px solid rgba(214, 181, 109, .75);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gf-action) 0%, var(--gf-action-deep) 100%);
    color: #FFFFFF;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.1;
    text-decoration: none;
    text-transform: none;
    box-shadow: 0 14px 28px rgba(31, 90, 45, .26), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .4s var(--gf-ease), box-shadow .4s ease, background .3s ease;
}

.gsctempc-faq__contact i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gf-gold-light);
    color: var(--gf-ink);
    font-size: .78rem;
    transition: transform .4s var(--gf-ease);
}

.gsctempc-faq__contact:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, var(--gf-action-deep) 0%, var(--gf-ink) 100%);
    box-shadow: 0 18px 32px rgba(31, 90, 45, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.gsctempc-faq__contact:hover i {
    transform: translateX(3px);
}

.gsctempc-faq__contact:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(31, 90, 45, .26);
}

.gsctempc-faq__contact:focus-visible {
    outline: 3px solid var(--gf-forest);
    outline-offset: 4px;
}


/* ----------------------------------------------------------------------------
   5. THE LEDGER — one white sheet holding every question
   ---------------------------------------------------------------------------- */

.gsctempc-faq__list {
    min-width: 0;
    counter-reset: gf-q;
    overflow: hidden;
    overflow: clip;
    border: 1px solid var(--gf-line);
    border-radius: var(--gf-radius);
    background: var(--gf-white);
    box-shadow:
        0 28px 56px rgba(23, 62, 41, .13),
        0 5px 16px rgba(48, 170, 40, .08);
}

.gsctempc-faq__item {
    position: relative;
    margin: 0;
    counter-increment: gf-q;
    border-bottom: 1px solid var(--gf-line);
    transition: background-color .45s ease;
}

.gsctempc-faq__item:last-child {
    border-bottom: 0;
}

/* Gold marker along the left edge of the open row */
.gsctempc-faq__item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, var(--gf-gold) 16%, var(--gf-gold) 84%, transparent 100%);
    opacity: 0;
    transform: scaleY(.4);
    transform-origin: center;
    pointer-events: none;
    transition: opacity .4s ease, transform .5s var(--gf-ease);
}

.gsctempc-faq__item.is-open {
    background: linear-gradient(90deg, rgba(229, 241, 227, .75) 0%, rgba(243, 248, 242, .55) 55%, rgba(255, 255, 255, 0) 100%);
}

.gsctempc-faq__item.is-open::before {
    opacity: 1;
    transform: scaleY(1);
}

.gsctempc-faq__question-wrap {
    margin: 0;
}


/* ----------------------------------------------------------------------------
   6. QUESTION ROW
   The button is a three-cell grid: printed number | question | round control.
   The number is a CSS counter, so no markup is needed.
   ---------------------------------------------------------------------------- */

.gsctempc-faq__question {
    position: relative;
    display: grid;
    grid-template-columns: var(--gf-num-col) minmax(0, 1fr) var(--gf-icon);
    align-items: center;
    column-gap: var(--gf-col-gap);
    width: 100%;
    min-height: var(--gf-row-min);
    margin: 0;
    padding: var(--gf-row-pad-y) var(--gf-row-pad-x);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gf-forest);
    font: inherit;
    font-size: var(--gf-fs-question);
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease;
}

.gsctempc-faq__question::before {
    content: counter(gf-q, decimal-leading-zero);
    align-self: start;
    padding-top: .2em;
    color: var(--gf-action);
    font-family: var(--gf-serif);
    font-size: var(--gf-fs-number);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
    transition: color .3s ease;
}

.gsctempc-faq__question-text {
    min-width: 0;
    color: var(--gf-forest);
    letter-spacing: -.008em;
    text-wrap: pretty;
    overflow-wrap: break-word;
    transition: color .3s ease;
}

.gsctempc-faq__item.is-open .gsctempc-faq__question::before {
    color: var(--gf-action-deep);
}

.gsctempc-faq__item.is-open .gsctempc-faq__question-text {
    color: var(--gf-ink);
}

.gsctempc-faq__question:focus-visible {
    outline: 3px solid var(--gf-forest);
    outline-offset: -3px;
    border-radius: 6px;
}


/* ----------------------------------------------------------------------------
   7. ROUND CONTROL — plus when closed, minus when open
   The two spans keep their roles: the first is the horizontal bar, the second
   (rotated) is the vertical bar, which fades out when the row opens.
   ---------------------------------------------------------------------------- */

.gsctempc-faq__icon {
    position: relative;
    display: block;
    flex: 0 0 var(--gf-icon);
    width: var(--gf-icon);
    height: var(--gf-icon);
    border: 1px solid var(--gf-line-strong);
    border-radius: 50%;
    background: var(--gf-white);
    color: var(--gf-forest);
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

/* Fine gold ring that appears on hover and while open */
.gsctempc-faq__icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(214, 181, 109, .6);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.88);
    pointer-events: none;
    transition: opacity .35s ease, transform .45s var(--gf-ease);
}

.gsctempc-faq__icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .42s var(--gf-ease), opacity .42s var(--gf-ease), background-color .3s ease;
}

.gsctempc-faq__icon span + span {
    transform: translate(-50%, -50%) rotate(90deg);
}

.gsctempc-faq__item.is-open .gsctempc-faq__icon {
    border-color: var(--gf-action);
    background: var(--gf-action);
    color: #FFFFFF;
}

.gsctempc-faq__item.is-open .gsctempc-faq__icon::before {
    opacity: 1;
    transform: scale(1);
}

.gsctempc-faq__item.is-open .gsctempc-faq__icon span + span {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}


/* ----------------------------------------------------------------------------
   8. ANSWER
   Height animates through grid rows (0fr to 1fr), so no script is needed to
   measure it. The text starts on the same edge as the question above it.
   ---------------------------------------------------------------------------- */

.gsctempc-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s var(--gf-ease), opacity .3s ease;
}

.gsctempc-faq__item.is-open .gsctempc-faq__answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.gsctempc-faq__answer-inner {
    min-height: 0;
    overflow: hidden;
}

.gsctempc-faq__answer p {
    max-width: 62ch;
    margin: 0;
    padding: 0 var(--gf-row-pad-x) 30px calc(var(--gf-row-pad-x) + var(--gf-num-col) + var(--gf-col-gap));
    color: var(--gf-text);
    font-size: var(--gf-fs-answer);
    font-weight: 400;
    line-height: 1.8;
}

/* Short gold-to-leaf rule that opens each answer */
.gsctempc-faq__answer p::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 0 0 16px;
    background: linear-gradient(90deg, var(--gf-gold) 0 60%, var(--gf-leaf) 60% 100%);
}

.gsctempc-faq__answer p + p {
    padding-top: 0;
}

.gsctempc-faq__answer p + p::before {
    display: none;
}

.gsctempc-faq__answer a {
    color: var(--gf-action-deep);
    text-decoration: underline;
    text-decoration-color: var(--gf-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.gsctempc-faq__answer a:hover {
    color: var(--gf-ink);
}

.gsctempc-faq__answer a:focus-visible {
    outline: 3px solid var(--gf-forest);
    outline-offset: 3px;
    border-radius: 2px;
}


/* ----------------------------------------------------------------------------
   9. HOVER — only where a real pointer exists
   ---------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .gsctempc-faq__question:hover {
        background: rgba(229, 241, 227, .45);
    }

    .gsctempc-faq__item.is-open .gsctempc-faq__question:hover {
        background: transparent;
    }

    .gsctempc-faq__question:hover .gsctempc-faq__question-text {
        color: var(--gf-ink);
    }

    .gsctempc-faq__question:hover .gsctempc-faq__icon {
        border-color: var(--gf-action);
        background: var(--gf-pale);
    }

    .gsctempc-faq__item.is-open .gsctempc-faq__question:hover .gsctempc-faq__icon {
        background: var(--gf-action-deep);
        border-color: var(--gf-action-deep);
    }

    .gsctempc-faq__question:hover .gsctempc-faq__icon::before {
        opacity: 1;
        transform: scale(1);
    }
}


/* ----------------------------------------------------------------------------
   10. REVEAL — one entrance moment, as before
   The intro and the ledger fade up when the section becomes active.
   ---------------------------------------------------------------------------- */

.gsctempc-faq__intro,
.gsctempc-faq__list {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s var(--gf-ease), transform .75s var(--gf-ease);
}

.gsctempc-faq.is-active .gsctempc-faq__intro,
.gsctempc-faq.is-active .gsctempc-faq__list,
.gsctempc-faq.reveal.is-active .gsctempc-faq__intro,
.gsctempc-faq.reveal.is-active .gsctempc-faq__list {
    opacity: 1;
    transform: translateY(0);
}

.gsctempc-faq.is-active .gsctempc-faq__list,
.gsctempc-faq.reveal.is-active .gsctempc-faq__list {
    transition-delay: .08s;
}


/* ----------------------------------------------------------------------------
   11. RESPONSIVE TIERS — driven by the section's own width
   Each tier is written once as a container query, then repeated in the
   fallback block (section 12) for browsers without container queries.
   ---------------------------------------------------------------------------- */

/* Very narrow sections (small phones) */
@container faq (max-width: 360px) {
    .gsctempc-faq {
        --gf-gutter: 16px;
        --gf-num-col: 28px;
        --gf-col-gap: 10px;
        --gf-row-pad-x: 12px;
        --gf-icon: 34px;
        --gf-fs-title: 2.25rem;
        --gf-fs-question: .96rem;
        --gf-fs-answer: .98rem;
        --gf-fs-number: .82rem;
    }

    .gsctempc-faq__botanical {
        display: none;
    }

    .gsctempc-faq__eyebrow {
        gap: 10px;
        font-size: .72rem;
        letter-spacing: .16em;
    }

    .gsctempc-faq__eyebrow::before {
        width: 32px;
    }

    .gsctempc-faq__rule {
        width: 56px;
    }

    .gsctempc-faq__contact {
        width: 100%;
        min-height: 52px;
        padding-left: 20px;
        font-size: .9rem;
    }
}

/* Tablet-width section: still one column, roomier */
@container faq (min-width: 600px) {
    .gsctempc-faq {
        --gf-gap: 56px;
        --gf-num-col: 44px;
        --gf-col-gap: 16px;
        --gf-row-pad-x: 26px;
        --gf-row-pad-y: 24px;
        --gf-row-min: 92px;
        --gf-icon: 42px;
        --gf-fs-title: 3.3rem;
        --gf-fs-lede: 1.05rem;
        --gf-fs-question: 1.08rem;
        --gf-fs-answer: 1.02rem;
        --gf-fs-number: 1rem;
    }

    .gsctempc-faq__watermark {
        top: -56px;
        left: -8px;
    }

    .gsctempc-faq__eyebrow::before {
        width: 52px;
    }

    .gsctempc-faq__rule {
        margin: 28px 0 26px;
    }

    .gsctempc-faq__answer p {
        padding-bottom: 34px;
    }
}

/* Desktop-width section: two columns, introduction stays pinned */
@container faq (min-width: 900px) {
    .gsctempc-faq {
        --gf-gap: clamp(48px, 6cqi, 88px);
        --gf-fs-title: 3.5rem;
        --gf-fs-lede: 1.04rem;
        --gf-fs-question: 1.12rem;
    }

    .gsctempc-faq__inner {
        grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    }

    .gsctempc-faq__intro {
        position: sticky;
        top: 104px;
        align-self: start;
    }

    .gsctempc-faq__watermark {
        top: -70px;
        left: -16px;
        font-size: clamp(9rem, 16cqi, 13rem);
    }

    .gsctempc-faq__title {
        font-size: clamp(2.8rem, 4.4cqi, 3.9rem);
    }
}

/* Wide section: a wider ledger and larger type */
@container faq (min-width: 1200px) {
    .gsctempc-faq {
        --gf-row-pad-x: 32px;
        --gf-row-pad-y: 26px;
        --gf-row-min: 98px;
        --gf-num-col: 50px;
        --gf-col-gap: 20px;
        --gf-icon: 44px;
        --gf-fs-question: 1.18rem;
        --gf-fs-answer: 1.05rem;
        --gf-fs-number: 1.08rem;
    }

    .gsctempc-faq__inner {
        grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
    }

    .gsctempc-faq__title {
        font-size: clamp(3.4rem, 4.2cqi, 4.3rem);
    }

    .gsctempc-faq__lede {
        font-size: 1.1rem;
    }
}

/* Short landscape screens: tighten the vertical rhythm, release the pin */
@media (orientation: landscape) and (max-height: 520px) {
    .gsctempc-faq {
        --gf-pad-top: 56px;
        --gf-pad-bottom: 64px;
    }

    .gsctempc-faq__intro {
        position: relative;
        top: auto;
    }
}

/* Section padding must use media queries: a container cannot query itself */
@media (min-width: 600px) {
    .gsctempc-faq {
        --gf-gutter: 28px;
        --gf-pad-top: 96px;
        --gf-pad-bottom: 104px;
    }
}

@media (min-width: 1000px) {
    .gsctempc-faq {
        --gf-gutter: 32px;
        --gf-pad-top: 112px;
        --gf-pad-bottom: 120px;
    }
}


/* ----------------------------------------------------------------------------
   12. FALLBACK — browsers without container-query support
   The same tiers keyed to the viewport. Thresholds are higher on purpose:
   with the fixed sidebar on desktop the section is always narrower than the
   viewport.
   ---------------------------------------------------------------------------- */

@supports not (container-type: inline-size) {

    @media (max-width: 400px) {
        .gsctempc-faq {
            --gf-gutter: 16px;
            --gf-num-col: 28px;
            --gf-col-gap: 10px;
            --gf-row-pad-x: 12px;
            --gf-icon: 34px;
            --gf-fs-title: 2.25rem;
            --gf-fs-question: .96rem;
            --gf-fs-answer: .98rem;
            --gf-fs-number: .82rem;
        }

        .gsctempc-faq__botanical {
            display: none;
        }

        .gsctempc-faq__eyebrow {
            gap: 10px;
            font-size: .72rem;
            letter-spacing: .16em;
        }

        .gsctempc-faq__eyebrow::before {
            width: 32px;
        }

        .gsctempc-faq__rule {
            width: 56px;
        }

        .gsctempc-faq__contact {
            width: 100%;
            min-height: 52px;
            padding-left: 20px;
            font-size: .9rem;
        }
    }

    @media (min-width: 640px) {
        .gsctempc-faq {
            --gf-gap: 56px;
            --gf-num-col: 44px;
            --gf-col-gap: 16px;
            --gf-row-pad-x: 26px;
            --gf-row-pad-y: 24px;
            --gf-row-min: 92px;
            --gf-icon: 42px;
            --gf-fs-title: 3.3rem;
            --gf-fs-lede: 1.05rem;
            --gf-fs-question: 1.08rem;
            --gf-fs-answer: 1.02rem;
            --gf-fs-number: 1rem;
        }

        .gsctempc-faq__watermark {
            top: -56px;
            left: -8px;
        }

        .gsctempc-faq__eyebrow::before {
            width: 52px;
        }

        .gsctempc-faq__rule {
            margin: 28px 0 26px;
        }

        .gsctempc-faq__answer p {
            padding-bottom: 34px;
        }
    }

    @media (min-width: 1200px) {
        .gsctempc-faq {
            --gf-gap: 72px;
            --gf-fs-title: 3.5rem;
            --gf-fs-lede: 1.04rem;
            --gf-fs-question: 1.12rem;
        }

        .gsctempc-faq__inner {
            grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
        }

        .gsctempc-faq__intro {
            position: sticky;
            top: 104px;
            align-self: start;
        }

        .gsctempc-faq__watermark {
            top: -70px;
            left: -16px;
            font-size: 12rem;
        }
    }

    @media (min-width: 1500px) {
        .gsctempc-faq {
            --gf-row-pad-x: 32px;
            --gf-row-pad-y: 26px;
            --gf-row-min: 98px;
            --gf-num-col: 50px;
            --gf-col-gap: 20px;
            --gf-icon: 44px;
            --gf-fs-title: 4rem;
            --gf-fs-question: 1.18rem;
            --gf-fs-answer: 1.05rem;
            --gf-fs-number: 1.08rem;
        }

        .gsctempc-faq__inner {
            grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
        }

        .gsctempc-faq__lede {
            font-size: 1.1rem;
        }
    }
}


/* ----------------------------------------------------------------------------
   13. TOUCH DEVICES — nothing may depend on hover
   ---------------------------------------------------------------------------- */

@media (hover: none) {
    .gsctempc-faq__question {
        min-height: max(var(--gf-row-min), 56px);
    }

    .gsctempc-faq__question:active {
        background: rgba(229, 241, 227, .6);
    }

    .gsctempc-faq__contact:hover {
        transform: none;
    }
}


/* ----------------------------------------------------------------------------
   14. HIGHER CONTRAST PREFERENCE
   ---------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
    .gsctempc-faq {
        --gf-text: #1F2A22;
        --gf-muted: #2F3D34;
        --gf-line: rgba(23, 62, 41, .5);
        --gf-line-strong: rgba(23, 62, 41, .8);
    }

    .gsctempc-faq__botanical,
    .gsctempc-faq__watermark {
        display: none;
    }

    .gsctempc-faq__list {
        border-color: var(--gf-forest);
    }

    .gsctempc-faq__question::before {
        color: var(--gf-ink);
    }
}


/* ----------------------------------------------------------------------------
   15. REDUCED MOTION
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gsctempc-faq__intro,
    .gsctempc-faq__list {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .gsctempc-faq__answer,
    .gsctempc-faq__icon,
    .gsctempc-faq__icon::before,
    .gsctempc-faq__icon span,
    .gsctempc-faq__item,
    .gsctempc-faq__item::before,
    .gsctempc-faq__question,
    .gsctempc-faq__question::before,
    .gsctempc-faq__question-text,
    .gsctempc-faq__contact,
    .gsctempc-faq__contact i {
        transition: none;
    }

    .gsctempc-faq__contact:hover,
    .gsctempc-faq__contact:hover i {
        transform: none;
    }
}


/* ----------------------------------------------------------------------------
   16. FORCED COLORS (Windows High Contrast and similar)
   Gradients and shadows are dropped, so shapes need real borders.
   ---------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .gsctempc-faq {
        background: Canvas;
    }

    .gsctempc-faq::before,
    .gsctempc-faq__botanical,
    .gsctempc-faq__watermark {
        display: none;
    }

    .gsctempc-faq__list {
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    .gsctempc-faq__item {
        border-bottom: 1px solid CanvasText;
    }

    .gsctempc-faq__item.is-open::before {
        background: Highlight;
    }

    .gsctempc-faq__icon {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .gsctempc-faq__item.is-open .gsctempc-faq__icon {
        background: Highlight;
        border-color: Highlight;
        color: HighlightText;
    }

    .gsctempc-faq__icon span {
        background: currentColor;
        forced-color-adjust: none;
    }

    .gsctempc-faq__contact {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        box-shadow: none;
        forced-color-adjust: none;
    }

    .gsctempc-faq__contact i {
        border: 1px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .gsctempc-faq__rule,
    .gsctempc-faq__eyebrow::before,
    .gsctempc-faq__answer p::before {
        background: CanvasText;
    }

    .gsctempc-faq__question:focus-visible,
    .gsctempc-faq__contact:focus-visible {
        outline: 3px solid Highlight;
    }
}


/* ----------------------------------------------------------------------------
   17. PRINT — every answer visible, plain ink-friendly ledger
   ---------------------------------------------------------------------------- */

@media print {
    .gsctempc-faq {
        padding: 24px 0;
        overflow: visible;
        background: #FFFFFF;
    }

    .gsctempc-faq::before,
    .gsctempc-faq__botanical,
    .gsctempc-faq__watermark,
    .gsctempc-faq__contact,
    .gsctempc-faq__icon {
        display: none;
    }

    .gsctempc-faq__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .gsctempc-faq__intro,
    .gsctempc-faq__list {
        position: static;
        opacity: 1;
        transform: none;
    }

    .gsctempc-faq__list {
        box-shadow: none;
    }

    .gsctempc-faq__item {
        break-inside: avoid;
    }

    .gsctempc-faq__answer {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}