/* ============================================================================
   brand.css - Autohaus component layer
   ----------------------------------------------------------------------------
   Implements docs/BRAND.md section 4 (Autohaus Brand Guidelines v1, 2026).
   Plain, dependency-free CSS: this file is NOT processed by Tailwind, it is a
   static stylesheet linked from Views/Shared/_Layout.cshtml. Tailwind utilities
   are injected after it at runtime, so a utility in the markup still wins.

   Rules of the system:
     - Square. Radius 0 everywhere. No shadows, no gradients, no glow.
     - Depth comes from 1px hairlines (--line on light, --navy-hairline on navy).
     - The 2px Signal Blue rule is the motif (.rule / .rule-full / .rule-inline).
     - Signal Blue on navy FAILS contrast: on navy use Sky (--sky) instead.
     - Fonts are loaded in _Layout.cshtml; nothing is @import-ed here.

   Colour tokens also exist as Tailwind classes (navy, signal, sky, bone, line,
   steel, mist, haze + primary-* / accent-* / surface-*) - see
   Views/Shared/_TailwindConfig.cshtml. Do not redefine tokens in a view.
   ========================================================================== */

:root {
    --navy: #101D36;          /* Haus Navy - wordmark, headings, body copy, dark panels */
    --navy-600: #0B1628;      /* Navy hover / pressed */
    --navy-hairline: #2A3A57; /* 1px hairlines ON navy */
    --signal: #1F5FFF;        /* Signal Blue - rules, CTAs, links, focus. Light backgrounds only */
    --signal-600: #1848CC;    /* Signal Blue hover */
    --sky: #4D85FF;           /* Accent on navy only */
    --bone: #EDEBE6;          /* Page / section background */
    --bone-50: #F7F6F3;       /* Softer section background */
    --line: #E6E3DC;          /* 1px hairline on light */
    --steel: #4A5468;         /* Secondary text, captions */
    --mist: #C9D6EA;          /* Body copy on navy */
    --haze: #8FA6CC;          /* Eyebrow / label text on navy */
    --white: #FFFFFF;

    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;

    /* Type scale - docs/BRAND.md section 2. Three sizes carry the whole site:
       title (every H1 and H2), subtitle (H3, card titles, lead lines, badge figures)
       and body (all running text, lists, nav, form labels and inputs). --fs-meta is
       the one quiet exception for dates, hints and the legal line. Labels (.eyebrow)
       and buttons (.btn) are a separate uppercase style, not a fourth size.
       Tailwind exposes the same values as text-title / text-subtitle / text-body /
       text-meta (Views/Shared/_TailwindConfig.cshtml reads these variables). */
    --fs-title: clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem);    /* 36px -> 52px */
    --fs-subtitle: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); /* 22px -> 26px */
    --fs-body: 1.125rem;                                     /* 18px */
    --fs-meta: 1rem;                                         /* 16px */
    --lh-title: 1.08;
    --lh-subtitle: 1.3;
    --lh-body: 1.65;
    --lh-meta: 1.5;
}

/* ---------------------------------------------------------------- type ---- */

/* Body copy is 18px site-wide. `html body` (0,0,2) outranks Tailwind preflight's
   `body { line-height: inherit }` (0,0,1), which the Play build injects after this file. */
html body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Static copies of the Tailwind size tokens, so the scale is right before the Play
   build has generated its utilities (no flash of 16px text on first paint). */
.text-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
}

.text-subtitle {
    font-size: var(--fs-subtitle);
    line-height: var(--lh-subtitle);
}

.text-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.text-meta {
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
}

/* Wordmark: Archivo wdth 125 / wght 700, tracking -.02em. Never letterspace it. */
.wordmark {
    font-family: var(--font-display);
    font-weight: 700; /* fallback when the variable font is unavailable */
    font-variation-settings: 'wdth' 125, 'wght' 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Headlines: Archivo wdth 105 / wght 700, tracking -.015em. */
.headline {
    font-family: var(--font-display);
    font-weight: 700; /* fallback when the variable font is unavailable */
    font-variation-settings: 'wdth' 105, 'wght' 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* The doubled selectors below are deliberate, not a typo.
   Every Tailwind text-* utility carries its own line-height (`text-lg` is
   18px/28px), it matches .headline / .wordmark at specificity (0,1,0), and the
   self-hosted Play build is appended to <head> AFTER this file - so a plain
   `class="headline text-4xl"` silently lost the brand leading and set display
   type at body leading. Repeating the class lifts these two declarations to
   (0,2,0), which beats any single utility class without reaching for
   !important (so a deliberate `leading-*` + `!` escape hatch still works).
   Size utilities are therefore safe to use bare: `class="headline text-lg"`.
   Nothing else in these two blocks is doubled - font-*, tracking and colour
   utilities are still meant to win. */
.headline.headline {
    line-height: 1.08;
}

.wordmark.wordmark {
    line-height: 0.86;
}

/* Labels / eyebrows: Space Grotesk 500, uppercase, .22em, 14px. */
.eyebrow {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--steel);
}

.eyebrow-on-navy {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--haze);
}

/* ---------------------------------------------------------------- a11y ---- */

/* Visually hidden, still announced. Tailwind ships this utility, but the Play
   build is injected asynchronously at runtime - without a static copy here every
   .sr-only string on the page (skip links, the logo's accessible name, the price
   labels in the promo) renders as visible body text until that build lands.
   Tailwind's own focus:not-sr-only compiles to .not-sr-only:focus (specificity
   0,2,0), so it still wins over this rule and the skip links keep working. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- rules ---- */
/* The 2px blue rule carried out of the logo: eyebrow rule, section divider,
   active nav underline, pull-quote edge. */

.rule,
.rule-full,
.rule-inline {
    display: block;
    height: 2px;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: var(--signal);
}

.rule {
    width: 48px;
    flex: 0 0 auto;
}

.rule-full {
    width: 100%;
}

/* Grows to fill the space beside a descriptor inside a flex row. */
.rule-inline {
    flex: 1 0 24px;
    width: auto;
    min-width: 24px;
}

/* On navy only. Declared last so it wins over the three above. */
.rule-sky {
    background-color: var(--sky);
}

/* 1px section separator. */
.section-line {
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------- logo lockup ---- */
/* Layout and sizing for the primary lockup drawn by Views/Shared/_Logo.cshtml
   (docs/BRAND.md section 5). The type treatment comes from .wordmark above and
   the 2px rules from .rule-inline / .rule-sky.

   These rules live here rather than in a <style> inside the partial on purpose:
   _Layout links this file from <head>, whereas a partial's <style> lands wherever
   the partial is rendered. Razor executes the view body before the layout, so the
   first _Logo call to run can be one buried deep in <main> (the promo inside
   #banner-modal on the home page) - the header lockup at the top of the document
   would then have no CSS above it and would flash unstyled. */

.ah-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    line-height: 1;
}

.ah-logo--default {
    color: var(--navy, #101D36);
}

.ah-logo--reverse {
    color: #FFFFFF;
}

.ah-logo__word {
    display: block;
    font-size: 28px;
    line-height: .86;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}

.ah-logo__desc {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ah-logo__tag {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .22em;
    margin-right: -.22em; /* claw back the trailing letter-space so the row stays optically centred */
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}

/* --- footer lockup ------------------------------------------------------- */
.ah-logo--footer {
    gap: 8px;
}

    .ah-logo--footer .ah-logo__word {
        font-size: 32px;
    }

    .ah-logo--footer .ah-logo__desc {
        gap: 12px;
    }

    .ah-logo--footer .ah-logo__tag {
        font-size: 8.5px;
    }

/* --- small lockup -------------------------------------------------------- */
.ah-logo--sm {
    gap: 5px;
}

    .ah-logo--sm .ah-logo__word {
        font-size: 20px;
    }

    .ah-logo--sm .ah-logo__desc {
        gap: 10px;
    }

    .ah-logo--sm .ah-logo__tag {
        font-size: 8px;
    }

/* --- responsive ladder --------------------------------------------------- */
/* BRAND.md section 5 keys the ladder to the width the LOCKUP itself gets, not to
   the viewport: >= 240px shows COMPLETE COLLISION REPAIR, 160-240px shows
   COLLISION REPAIR, < 160px is the wordmark alone.

   Translated to the header row (max-w-7xl, px-4, gap-4, a 48px menu button, and
   the "Contact Us Now" CTA hidden below sm) the lockup's room is viewport - 96px:
       viewport 256px -> 160px of room   descriptor drops entirely
       viewport 320px -> 224px of room   COLLISION REPAIR          (lockup ~157px)
       viewport 375px -> 279px of room   COMPLETE COLLISION REPAIR (lockup ~247px)
       viewport 420px -> 324px of room   COMPLETE COLLISION REPAIR, room to spare
   So "Complete" is dropped below 420px - comfortably under the ~343px where the
   full lockup would actually stop fitting - and the descriptor row itself is not
   dropped until 256px. Both steps keep the tag at or above the 8px floor.

   Container queries are deliberately NOT used here: container-type: inline-size
   applies inline-size containment, and .ah-logo is an intrinsically sized
   inline-flex box inside a flex-shrink-0 anchor, so its width would be computed
   as if it had no contents and the lockup would collapse to zero. Keying the
   ladder to the lockup's own width needs a parent with a definite width first. */

/* The footer takes the short descriptor early: its column in the four-up footer
   grid is only ~216px wide until the container maxes out at 1280px. */
@media (max-width: 1279.98px) {
    .ah-logo--footer .ah-logo__long {
        display: none;
    }

    .ah-logo--footer .ah-logo__word {
        font-size: 28px;
    }
}

@media (max-width: 419.98px) {
    .ah-logo__long {
        display: none; /* COMPLETE COLLISION REPAIR -> COLLISION REPAIR */
    }

    .ah-logo--header .ah-logo__word {
        font-size: 24px;
    }

    .ah-logo--footer .ah-logo__word {
        font-size: 26px;
    }

    .ah-logo--sm .ah-logo__word {
        font-size: 18px;
    }

    /* 8px is the floor - BRAND.md says drop the descriptor, never shrink past it. */
    .ah-logo__tag,
    .ah-logo--footer .ah-logo__tag {
        font-size: 8px;
    }

    .ah-logo__desc,
    .ah-logo--footer .ah-logo__desc {
        gap: 10px;
    }

        /* keeps the lockup inside a 320px viewport next to the menu button */
        .ah-logo__desc .rule-inline {
            flex-basis: 16px;
            min-width: 16px;
        }
}

/* < 160px of room in the header: wordmark only. */
@media (max-width: 255.98px) {
    .ah-logo__desc {
        display: none;
    }

    .ah-logo--header .ah-logo__word {
        font-size: 20px;
    }

    .ah-logo--footer .ah-logo__word {
        font-size: 22px;
    }

    .ah-logo--sm .ah-logo__word {
        font-size: 17px;
    }
}

/* ------------------------------------------------------------- buttons ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 44px;                 /* touch target */
    padding: 14px 24px;
    border: 1px solid transparent;    /* square, no radius */
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-lg {
    min-height: 56px;
    padding: 18px 32px;
    font-size: 16px;
}

.btn-signal {
    background-color: var(--signal);
    border-color: var(--signal);
    color: var(--white);
}

.btn-signal:hover {
    background-color: var(--signal-600);
    border-color: var(--signal-600);
    color: var(--white);
}

.btn-navy {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn-navy:hover {
    background-color: var(--signal);
    border-color: var(--signal);
    color: var(--white);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--navy);
    color: var(--navy);
}

.btn-outline:hover {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

/* For navy panels - the solid (primary) pair. */
.btn-on-navy {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--navy);
}

.btn-on-navy:hover {
    background-color: var(--bone);
    border-color: var(--bone);
    color: var(--navy);
}

/* For navy panels - the ghost (secondary) partner to .btn-on-navy. Declared
   after .btn-outline so the two classes together still resolve to this one.
   Use it instead of hand-rolling `btn-outline border-white text-white
   hover:bg-white hover:text-navy`: those hover utilities only beat
   .btn-outline:hover because the Play build is injected after this file. */
.btn-outline-on-navy {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}

.btn-outline-on-navy:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--navy);
}

/* For Signal Blue panels: white plate, Signal Blue text, hover inverts to navy.
   (.btn-on-navy's Bone hover would read as a dirty white on Signal Blue.) */
.btn-on-signal {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--signal);
}

.btn-on-signal:hover {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    box-shadow: none;
}

/* Signal Blue fails contrast on navy - the focus ring switches to Sky. */
.btn-on-navy:focus-visible,
.btn-outline-on-navy:focus-visible {
    outline-color: var(--sky);
}

/* ...and on a Signal Blue panel neither Signal Blue nor Sky separates from the
   field, so the ring is white. */
.btn-on-signal:focus-visible {
    outline-color: var(--white);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------- cards ---- */

.card {
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

.card-navy {
    background-color: var(--navy);
    border: 1px solid var(--navy-hairline);
    border-radius: 0;
    box-shadow: none;
    color: var(--white);
}

/* --------------------------------------------------------------- forms ---- */

.field {
    display: block;
    width: 100%;
    min-height: 44px;                 /* touch target */
    padding: 12px 14px;
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--fs-body);        /* 18px body size; anything >= 16px stops iOS zoom-on-focus */
    font-weight: 400;
    line-height: 1.4;
    color: var(--navy);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.field::placeholder {
    color: var(--steel);
    opacity: 1;
}

/* appearance:none removes the native select arrow - put a square chevron back. */
select.field {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23101D36' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
}

/* Focus = a 2px Signal Blue edge, no glow ring, no radius. The inset outline
   draws that second pixel over the hairline so nothing shifts by 1px. */
.field:focus,
.field:focus-visible {
    border-color: var(--signal);
    outline: 2px solid var(--signal);
    outline-offset: -2px;
    box-shadow: none;
}

.field:disabled,
.field[readonly] {
    background-color: var(--bone-50);
    color: var(--steel);
    cursor: not-allowed;
}

/* --------------------------------------------------------------- links ---- */

.link-signal {
    color: var(--signal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.link-signal:hover {
    color: var(--navy);
}

/* --------------------------------------------------------------- focus ---- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* Anything sitting on a navy surface takes the Sky ring instead. */
.on-navy :focus-visible,
.card-navy :focus-visible {
    outline-color: var(--sky);
}

/* --------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .field,
    .link-signal {
        transition: none;
    }
}

/* ============================================================================
   HOME PAGE COMPONENTS - added 2026-09 with the "Update 2" home page rebuild
   ----------------------------------------------------------------------------
   Everything ABOVE this header is the shared brand system (tokens, type scale,
   buttons, cards, fields, links). These four components are used by
   Views/Home/Index.cshtml; keep them in this appended block rather than folding
   them into the sections above.

   Still the same system: radius 0, no shadow, no gradient, depth from hairlines,
   hover is a colour change (never a lift). Sizes are never set here - the type
   scale (.text-title / .text-subtitle / body / .text-meta) is applied in the
   markup, so a component can be re-typed without touching this file.

     .trust-badge      The four hero rating / accreditation tiles. A full-height
                       column, so a two-line caption and a one-line caption still
                       produce tiles of identical height. The linked variant
                       (Google, Yelp) takes a Signal Blue border on hover.
     .rating-stars     A proportional five-star row: a hairline-coloured base with
                       an amber copy clipped to the --fill percentage the markup
                       sets, so 4.2 out of 5 draws 4.2 stars and not five.
     .cert-tile        A certification figure on the navy band: a fixed-height
                       logo frame over a caption plate with a 2px Signal Blue top
                       rule. Four logos of very different aspect ratios then read
                       as one row of equal tiles.
     .faq-item         A <details>/<summary> accordion row. Hides the native
                       disclosure marker on every engine (Blink/WebKit's
                       ::-webkit-details-marker, Gecko's ::marker and list-style)
                       and puts the 2px Signal Blue rule on the open row's left
                       edge. The plus/minus is drawn in the markup - the open
                       state just fades the vertical bar out.
     .review-carousel  The Yelp review carousel (Update 2 spec section 5). Every
                       slide sits in the SAME grid cell, so the viewport is as
                       tall as the tallest slide and the script only has to set a
                       --offset custom property per slide (..., -1, 0, +1, ...).
                       Progressive enhancement: until the script adds .is-ready
                       the slides are a plain stacked list and the controls are
                       hidden, so the reviews are fully readable without JS.
   ========================================================================== */

/* -------------------------------------------------- hero trust badges ----- */

/* The <li> around this is a flex item (class="flex"), which stretches the tile
   to the row height; height:100% then makes the tile's own column fill it. */
.trust-badge {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease;
}

/* The 2px rule is a flex item here - pin it so it can never be squashed. */
.trust-badge > .rule-full {
    flex: 0 0 auto;
}

.trust-badge__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Linked tiles (Google, Yelp): hover is the border going Signal Blue. No lift,
   no shadow. The element selector keeps this above the Tailwind utilities that
   the Play build injects after this file. */
a.trust-badge:hover,
a.trust-badge:focus-visible {
    border-color: var(--signal);
}

/* --------------------------------------------------------- rating stars --- */

/* Proportional five-star display. __base draws five stars in the hairline colour
   and __fill lays an amber copy over it, clipped to the --fill percentage the
   markup sets (rating / 5 * 100). Five solid stars printed beside "4.2" is the
   page claiming something the listing does not say, so the fill is derived from
   the number instead of being drawn by hand.
   The wrapper carries role="img" and the aria-label ("4.2 out of 5 stars");
   both layers are aria-hidden. --fill defaults to 0% so a missing value shows an
   empty row rather than a silently perfect one. */
.rating-stars {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
}

.rating-stars__base,
.rating-stars__fill {
    display: flex;
    align-items: center;
}

.rating-stars__base {
    color: var(--line);
}

.rating-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fill, 0%);
    overflow: hidden;
    color: #F59E0B; /* the amber the review stars have always used - BRAND.md s.1 keeps it */
}

/* The overlay's box is narrower than its contents by design - the stars inside it
   must keep their own width and be clipped, never squashed to fit. */
.rating-stars__base > svg,
.rating-stars__fill > svg {
    flex: 0 0 auto;
}

/* ---------------------------------------------------- certification tiles - */

.cert-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0; /* <figure> default */
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

/* Height comes from the markup (h-32 sm:h-40) so the row can be re-sized without
   touching CSS; this only centres the logo inside that frame. */
.cert-tile__logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* <picture> is an inline wrapper with no box of its own worth keeping: taking it
   out of the box tree makes the <img> a direct flex child, so max-height:100%
   resolves against the frame instead of against the picture's shrink-wrapped
   line box. */
.cert-tile__logo picture {
    display: contents;
}

.cert-tile__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.cert-tile__caption {
    margin-top: auto;
    border-top: 2px solid var(--signal);
}

/* ------------------------------------------------------------ FAQ items --- */

.faq-item {
    background-color: var(--white);
    border: 1px solid var(--line);
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

/* Open row takes the 2px Signal Blue rule on its leading edge - the same motif
   as .rule, .rule-full and the pull-quote edge. */
.faq-item[open] {
    border-left-color: var(--signal);
}

.faq-item > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px; /* touch target */
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    list-style: none; /* Gecko */
}

/* Blink / WebKit draw their own triangle; display:flex above already removes it
   in current Safari, this covers the older builds. */
.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item > summary::marker {
    content: "";
}

.faq-item > summary:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
}

.faq-item__q {
    transition: color 0.2s ease;
}

.faq-item > summary:hover .faq-item__q {
    color: var(--signal);
}

.faq-item__icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.2em;
    color: var(--signal);
}

/* plus -> minus: the vertical bar of the plus fades out when the row opens. */
.faq-item__icon-v {
    transition: opacity 0.2s ease;
}

.faq-item[open] .faq-item__icon-v {
    opacity: 0;
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
}

/* ------------------------------------------------------- review carousel -- */

.review-carousel {
    position: relative;
}

/* pan-y lets the page keep scrolling vertically while horizontal drags are ours. */
.review-carousel__viewport {
    overflow: hidden;
    touch-action: pan-y;
}

/* No-JS / pre-JS state: an ordinary stacked list of cards. */
.review-carousel__track {
    display: grid;
    gap: 1.5rem;
}

.review-carousel__controls {
    display: none;
}

/* --- enhanced state (script has added .is-ready) -------------------------- */

.review-carousel.is-ready .review-carousel__track {
    gap: 0;
    align-items: stretch;
}

/* Every slide in the one grid cell: the viewport is then exactly as tall as the
   tallest review and nothing is absolutely positioned. --offset is set per slide
   by the script and wraps, so there is always a previous and a next slide. */
.review-carousel.is-ready .review-carousel__slide {
    grid-area: 1 / 1;
    width: min(100%, 36rem);
    justify-self: center;
    --offset: 0;
    transform: translateX(calc(var(--offset) * 88%)) scale(1);
    transform-origin: center;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* The neighbours. BRAND.md section 3 sanctions this reduced scale/opacity as
   carousel STATE - it is still flat: no shadow, no radius, no translate on hover. */
.review-carousel.is-ready .review-carousel__slide[data-pos="side"] {
    transform: translateX(calc(var(--offset) * 88%)) scale(0.86);
    opacity: 0.45;
    z-index: 1;
    cursor: pointer;
}

.review-carousel.is-ready .review-carousel__slide[data-pos="far"] {
    transform: translateX(calc(var(--offset) * 88%)) scale(0.86);
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}

@media (max-width: 639.98px) {
    .review-carousel.is-ready .review-carousel__slide {
        width: 86%;
    }
}

.review-carousel.is-ready .review-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.review-carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: var(--white);
    /* Navy, not --line: a hairline-bordered arrow button on white is 1.28:1 and
       effectively invisible. Same edge as .btn-outline. */
    border: 1px solid var(--navy);
    border-radius: 0;
    box-shadow: none;
    color: var(--navy);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.review-carousel__btn:hover {
    border-color: var(--signal);
    color: var(--signal);
}

.review-carousel__dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* 44x44 hit area around a 10px square marker - square, like everything else. The
   marker is drawn by ::before, so widening the button to the full 44px touch
   target changes nothing visually. */
.review-carousel__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Steel, not --line: the inactive markers are a control, and --line on white is
   1.28:1 - a non-text contrast failure and invisible on a bright screen. */
.review-carousel__dot::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--steel);
    transition: background-color 0.2s ease, width 0.2s ease;
}

.review-carousel__dot:hover::before {
    background-color: var(--navy);
}

/* Declared last so the active dot wins over :hover. */
.review-carousel__dot[aria-current="true"]::before {
    width: 24px;
    background-color: var(--signal);
}

/* ------------------------------------------------------ reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .trust-badge,
    .faq-item__q,
    .faq-item__icon-v,
    .review-carousel.is-ready .review-carousel__slide,
    .review-carousel__btn,
    .review-carousel__dot::before {
        transition: none;
    }
}