/* ============================================================================
   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.

   THE DESCRIPTOR IS 12px AND NEVER LESS. It used to be 8.5px, 8px on phones -
   two thirds of the 12px floor the resolution standard sets (R8), and the reason
   QC failed it in 2026-09 (review R1): a line of type whose whole job is to tell
   a stranger what the business does, set too small to read. Everything else in
   this block follows from that one number.

     - .22em of tracking on a 12px label is 2.64px between letters and blows
       "COMPLETE COLLISION REPAIR" out to 227px. .14em - the tracking .btn
       already uses - gives 23px of that back and still leaves 1.68px of real
       tracking against the 1.87px the old 8.5px/.22em label had, so the line
       still reads as a tracked label and not as a word.
     - at 12px the full descriptor is wider than any wordmark this site sets:
       204px of type against the 202px of a 28px AUTOHAUS, 252px once the rules
       and gaps are on it against 231px for a 32px one. So wherever it appears it
       is the descriptor row, not the wordmark, that sets the lockup's width, and
       the ladder further down is cut around the descriptor.
     - the header wordmark comes down 28px -> 26px, for clear space rather than
       for width. The header row is 80px tall and the lockup grew 3px when the
       descriptor did; a 28px wordmark left 18.4px above and below it against a
       cap height (0.72em) of 20.2px, i.e. under the brand's minimum. At 26px the
       cap is 18.7px and the clear space 19.2px, so it clears for the first time. */

.ah-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    line-height: 1;
    /* Tracking is a variable because the tag has to claw its own trailing
       letter-space back off the right edge to stay optically centred between the
       two rules. Those two values must never drift apart. */
    --ah-tag-ls: .14em;
}

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

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

/* No .ah-logo--header rule: the header lockup IS the base size. */
.ah-logo__word {
    display: block;
    font-size: 26px;
    line-height: .86;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}

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

/* The flex-basis of the two rules is the SMALLEST they will ever be, not their
   size: the row is width:100% of the lockup, so whenever the wordmark is the
   wider of the two the rules grow out to meet its edges. 20px is what keeps the
   header lockup wordmark-driven (26px wordmark 187px, descriptor row 186px)
   instead of letting the descriptor stick out past the A and the S. */
.ah-logo__desc .rule-inline {
    flex-basis: 20px;
    min-width: 20px;
}

.ah-logo__tag {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 12px; /* the floor - see the note above. Never smaller, at any size or width. */
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--ah-tag-ls);
    margin-right: calc(var(--ah-tag-ls) * -1); /* claw back the trailing letter-space so the row stays optically centred */
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}

/* "COMPLETE" is off by default and switched on only for the one rung whose room
   the ladder below has actually measured. Defaulting to hidden means a new call
   site gets the descriptor that fits rather than one that overflows it. */
.ah-logo__long {
    display: none;
}

/* --- footer lockup ------------------------------------------------------- */
/* 28px here, 32px only in the >= 1280px rung below: under 1280 this lockup sits
   in a footer column that is as narrow as 216px. */
.ah-logo--footer {
    gap: 8px;
}

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

/* --- small lockup -------------------------------------------------------- */
/* 20px wordmark (144px) under a 126px descriptor, so this is the one lockup the
   descriptor always overhangs. Tighter gaps and shorter rules hold that overhang
   to ~11px a side and the whole lockup to 166px - within 5px of what it measured
   at 8px, so the admin header row it sits in is no tighter than it was. */
.ah-logo--sm {
    gap: 4px; /* 5px would put the lockup 0.1px over the clear space in the 64px admin row */
}

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

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

    .ah-logo--sm .ah-logo__desc .rule-inline {
        flex-basis: 12px;
        min-width: 12px;
    }

/* --- 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. Re-measured at the 12px
   descriptor (real webfonts, Space Grotesk 500 / Archivo wdth125 wght700), the
   three rungs the site can build come out as:

       AUTOHAUS + COMPLETE COLLISION REPAIR   252px  32px wordmark, 8px gaps, 16px rules
       AUTOHAUS + COLLISION REPAIR            187px  26px wordmark; the rules grow to its edges
       AUTOHAUS                               144px  20px wordmark

   which still lands each rung in the band BRAND.md gives it. What the three call
   sites can actually offer:

       site header at >= lg (1024px)   The row is lockup + 6-link nav + CTA inside
                                       a 1280px container. 228px at 1280 (where the
                                       gaps open to 24px and the phone number and
                                       the CTA icon come back) and 234px at 1024.
                                       This is the binding constraint on the whole
                                       lockup, and the old arithmetic missed it: it
                                       only did the sub-lg row below and let a 233px
                                       lockup into a 228px slot.
       site header below lg            The nav is a 48px menu button, so the room is
                                       viewport - 96px: 279px at 375, 224px at 320,
                                       160px at 256.
       footer column                   (container - padding - gaps) / 4 = 268px at
                                       >= 1280, 216px at 1024, 272px and up between
                                       640 and 1023, viewport - 32px below 640.
       promo sheet navy bar            Up to 800px. Never the constraint.

   So at 12px the full descriptor fits the footer at >= 1280px and nowhere else.
   The header cannot take it at any viewport - 252px of lockup against 228px of
   row - which is why .ah-logo__long is hidden by default and turned back on for
   that single case. The header keeps the short descriptor instead, and at 187px
   it leaves 41px of slack at 1280 where the old lockup was 5px over; a seventh
   nav link costs about 28px of that.

   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 one place with room for the whole descriptor: the footer column, once the
   container has maxed out at 1280px and the column is 268px wide. The wordmark
   goes to 32px with it so the lockup stays in proportion - the descriptor row is
   252px and would otherwise overhang a 28px wordmark by 25px a side. */
@media (min-width: 1280px) {
    .ah-logo--footer .ah-logo__long {
        display: inline;
    }

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

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

        .ah-logo--footer .ah-logo__desc .rule-inline {
            flex-basis: 16px;
            min-width: 16px;
        }
}

/* Under ~300px there is no longer room for a descriptor at 12px (the header row
   offers viewport - 96px, so 204px at 300 against a 187px lockup, and 184px at
   280), and 12px is the floor - the row drops rather than shrinks. The wordmark
   drops with it so it clears the menu button on a 256px viewport. */
@media (max-width: 299.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;
    }
}