.faq {
    background-color: #f1eae1;
}

.faq__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-5), 6vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    grid-template-areas:
        "intro list"
        "cards list";
    align-content: start;
    row-gap: clamp(var(--space-5), 6vw, 3.5rem);
    column-gap: clamp(var(--space-5), 6vw, 4rem);
}

.faq__intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.faq__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.faq__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.faq__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.faq__heading {
    margin: 0;
    color: var(--color-grey-1);
    font-size: 64px;
}

.faq__description {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 1.6;
}

.faq__description p {
    margin: 0;
}

.faq__cards {
    grid-area: cards;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq__card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    padding: clamp(var(--space-4), 3vw, 1.75rem);
    border-radius: 0.75rem;
    background-color: var(--color-cream);
    border: 1px solid #fae0c0;
    box-shadow: 0px 3px 10px 0px #464a3a3d;
}

.faq__card-icon-col {
    flex-shrink: 0;
}

.faq__card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.faq__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.faq__card-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.faq__card-icon svg path {
    stroke: var(--color-orange-dark);
}

.faq__card-heading {
    margin: 0;
    color: var(--color-grey-1);
    font-size: 40px;
    line-height: 44px;
}

.faq__card-text {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.6;
}

.faq__card-text p {
    margin: 0;
}

.faq__contact-button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-inline: var(--space-4);
    border-radius: var(--radius);
    background-color: var(--color-orange-dark);
    color: var(--color-cream);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.faq__contact-button:hover,
.faq__contact-button:focus-visible {
    opacity: 0.85;
}

.faq__list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq__item {
    border-radius: 0.75rem;
    background-color: var(--color-cream);
    padding-inline: clamp(var(--space-4), 3vw, 1.75rem);
    border: 1px solid #fae0c0;
    box-shadow: 0px 3px 10px 0px #464a3a3d;
}

.faq__question {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
    cursor: pointer;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question-number {
    /* Three earlier attempts (inline-flex + align-items:center with a tuned
       line-height; position:absolute + transform:translate(-50%,-50%) on an
       inner span; plain line-height + text-align with the circle moved to
       ::before) all still showed the digit pushed toward the top of the
       circle on a real Mac, confirmed each time via an actual Mac
       screenshot. Since three mechanically different centering techniques
       all failed identically, the cause isn't *how* we center the box — the
       custom @font-face itself likely carries an inflated descent metric
       that macOS's Core Text rasterizer honors literally (reserving real
       space below the baseline the glyph never uses), which would misplace
       the glyph the same way regardless of the centering method. Confirmed
       this is an OS thing, not a Safari/WebKit thing — it reproduces in
       Chrome on macOS too. No CSS-only fix can correct a font-metrics
       mismatch, so this nudges the glyph down with a small transform —
       calibrated by pixel-measuring an actual Mac screenshot (found the
       circle's and the digit's vertical center by color-thresholding the
       image directly, not by guessing): the digit sat ~2.75px above true
       center in a 24px circle (the mobile size shown in that screenshot) —
       see the max-width: 699px override below for the mobile value; this is
       the proportional 32px-circle equivalent (2.75 × 32/24 ≈ 3.7, rounded
       to 4px). */
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: var(--color-orange-dark);
    font-family: var(--font-family-heading);
    font-size: 22px;
    font-weight: 400;
}

/* `@supports (-webkit-touch-callout: none)` was tried here first as a
   CSS-only way to scope this to Safari — turned out to only match iOS
   Safari, not desktop macOS Safari (confirmed via an actual Mac's console:
   CSS.supports returned false there), and was the wrong scope anyway since
   the bug isn't Safari-specific — it also happens in Chrome on macOS. Using
   an `.is-mac` class on <html> instead, added by a UA-sniff in global.js —
   needed because this nudge would miscenter the digit on Windows/other OSes,
   where this bug doesn't exist.
   4px (extrapolated from a mobile-size measurement) still left the digit
   ~3px high per a real Mac screenshot at this desktop 32px circle size —
   pixel-measured directly at this size this time: true offset is 7px. */

html.is-mac .faq__question-number::before {
    top: -2.5px;
    height: 32px;
    width: 32px;
}

.faq__question-number::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
    pointer-events: none;
}

.faq__question-text {
    flex: 1;
    color: var(--color-grey-1);
    font-family: var(--font-family-heading);
    font-size: 30px;
}

.faq__question-icon {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.faq__question-icon::before,
.faq__question-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-orange-dark);
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.faq__question-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__question-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
    max-width: 42rem;
    padding-bottom: var(--space-4);
    padding-inline-start: calc(24px + var(--space-3));
    color: var(--color-grey-2);
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq__answer p {
    margin: 0;
}

@media (max-width: 899px) {
    .faq__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "list"
            "cards";
    }

    .faq__intro {
    }

    .faq__ornament {
    }

    .faq__ornament-line {
    }

    .faq__ornament-icon {
        width: 32px;
        height: 32px;
    }

    .faq__heading {
        font-weight: 400;
        font-size: 40px;
        line-height: 36px;
        letter-spacing: -2%;
    }

    .faq__description {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    .faq__cards {
        flex-direction: column-reverse;
    }

    .faq__card {
        flex-direction: column;
    }

    .faq__card-icon-col {
    }

    .faq__card-content {
    }

    .faq__card-icon {
    }

    .faq__card-heading {
        font-size: 28px;
        line-height: 26px;
        letter-spacing: -2%;
    }

    .faq__card-text {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    .faq__contact-button {
        width: 100%;
    }

    .faq__list {
        var(--space-1);
    }

    .faq__item {
        padding-inline: 16px;
    }

    .faq__question {
    }

    .faq__question-number {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: -2%;
    }

    .faq__question-text {
        font-size: 22px;
        line-height: 20px;
        letter-spacing: -2%;
    }

    .faq__question-icon {
    }

    .faq__answer {
        padding-inline-start:0px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0%;
        color:var(--color-grey-3);
    }
}

@media (max-width: 699px) {
    /* macOS-only nudge, not Safari-only (see the desktop rule's comment above
       re: .is-mac vs @supports — this reproduces in Chrome on macOS too).
       Original measurement at this mobile size (2.75px) was proportionally
       scaled down from — not directly re-measured at this size, unlike the
       desktop value, which turned out to need 1.75× more than its own
       extrapolated estimate. Applying the same 1.75× here (2.75 × 1.75 ≈
       4.8px) as a best guess — this one hasn't been confirmed against an
       actual mobile-size Mac screenshot yet. */
    html.is-mac .faq__question-number {
        transform: translateY(4.8px);
    }
}

/* Smooth open/close.
   The answer lives in the ::details-content pseudo-element, which can only be
   animated from 0 to auto once interpolate-size opts in to keyword sizing.
   Browsers without either feature ignore all of this and keep the instant
   open they had before, so nothing regresses. */
@supports (interpolate-size: allow-keywords) {
    .faq__list {
        interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
            block-size 0.28s ease,
            content-visibility 0.28s allow-discrete;
    }

    .faq__item[open]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq__item::details-content {
        transition: none;
    }
}