/* ==========================================================================
   800BATTERIES — Landing page theme
   Custom layer on top of Bootstrap 5.3. Bootstrap supplies the grid, the
   collapse component and a handful of spacing/display utilities; everything
   below is ours.

   All presentation lives in this file — the markup carries no inline styles.

   CONTENTS
     1.  Design tokens
     2.  Reset & base
     3.  Section & typography helpers
     4.  Icons
     5.  Buttons
     6.  Site header & navigation
     7.  Hero
     8.  Trust strip
     9.  How it works
     10. What's included
     11. Brands marquee
     12. FAQ accordion
     13. Testimonials
     14. Closing CTA
     15. Footer
     16. Mobile contact dock
     17. Reveal animation
     18. Responsive overrides
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth for colour, type, radius, shadow and motion.
   ========================================================================== */
:root {
    /* Brand */
    --red: #e31e24;
    --red-600: #c8171d;
    --red-700: #a51217;
    --red-tint: rgba(227, 30, 36, .08);
    --red-glow: rgba(227, 30, 36, .28);

    /* Neutrals */
    --ink: #0d0f11;
    --body: #4b5563;
    --muted: #8b94a0;
    --line: #e7e9ec;
    --line-dark: rgba(255, 255, 255, .09);
    --panel: #f6f7f9;
    --white: #fff;

    /* Channel colours */
    --wa: #25d366;
    --wa-600: #1eb857;
    --star: #ffb320;

    /* Type */
    --font-display: 'Oswald', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Radii */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;

    /* Elevation */
    --sh-sm: 0 2px 10px rgba(13, 15, 17, .06);
    --sh-md: 0 10px 34px rgba(13, 15, 17, .10);
    --sh-lg: 0 26px 70px rgba(13, 15, 17, .18);

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Layout */
    --nav-h: 74px;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--body);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Display headings share one family; sizing is set per component. */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--ink);
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--ease);
}

/* Lists are used structurally throughout, so bullets are off by default and
   re-enabled only where a marker is actually wanted (nowhere, currently). */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

dl,
dd,
figure,
blockquote,
address {
    margin: 0;
}

address {
    font-style: normal;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
}

hr {
    margin: 0;
    border: 0;
    opacity: 1;
}

::selection {
    background: var(--red);
    color: var(--white);
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Keyboard bypass link — off screen until focused. */
.skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 1100;
    padding: 11px 20px;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--sh-md);
    transform: translate(-50%, -160%);
    transition: transform .25s var(--ease);
}

.skip-link:focus-visible {
    transform: translate(-50%, 0);
    color: var(--white);
}


/* ==========================================================================
   3. SECTION & TYPOGRAPHY HELPERS
   Shared building blocks for every content section.
   ========================================================================== */
.section {
    padding: clamp(64px, 8vw, 112px) 0;
}

.section-dark {
    background: var(--ink);
    color: rgba(255, 255, 255, .62);
}

.section-panel {
    background: var(--panel);
}

/* Spacing below a section's heading block. */
.section-head {
    margin-bottom: clamp(36px, 4vw, 56px);
}

/* Small red kicker above a section title. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

.eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--red);
}

.section-title {
    font-size: clamp(29px, 4.2vw, 50px);
}

/* <em> inside a title is used for the red emphasis, not for italics. */
.section-title em {
    font-style: normal;
    color: var(--red);
}

.section-dark .section-title {
    color: var(--white);
}

.section-lead {
    max-width: 46ch;
    margin-top: 16px;
    font-size: 16px;
    color: var(--muted);
}

.section-dark .section-lead {
    color: rgba(255, 255, 255, .5);
}

/* Red highlight for a fragment of a larger figure, e.g. the "/7" in 24/7. */
.accent {
    color: var(--red);
}


/* ==========================================================================
   4. ICONS
   Every icon is a <use> reference into the sprite at the top of the body.
   Sizing is done with these classes so no width/height attributes are needed.
   ========================================================================== */

/* Sprite host: present in the DOM but takes no space and paints nothing. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 17px; height: 17px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 25px; height: 25px; }
.icon-xl { width: 42px; height: 42px; }


/* ==========================================================================
   5. BUTTONS
   One base class (.btn-x) plus colour variants. Named .btn-x rather than .btn
   to avoid colliding with Bootstrap's own button component.
   ========================================================================== */
.btn-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--ease),
                background .25s var(--ease),
                border-color .25s var(--ease),
                box-shadow .25s var(--ease),
                color .25s var(--ease);
}

.btn-x:hover {
    transform: translateY(-2px);
}

.btn-x:active {
    transform: translateY(0);
}

/* Variants */
.btn-wa {
    background: var(--wa);
    color: var(--white);
}

.btn-wa:hover {
    background: var(--wa-600);
    color: var(--white);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .32);
}

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

.btn-red:hover {
    background: var(--red-600);
    color: var(--white);
    box-shadow: 0 12px 28px var(--red-glow);
}

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

.btn-white:hover {
    background: var(--ink);
    color: var(--white);
    box-shadow: var(--sh-md);
}

.btn-ghost-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .26);
    color: var(--white);
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .55);
    color: var(--white);
}

/* Modifiers */
.btn-block {
    width: 100%;
}

.btn-compact {
    padding: 12px 22px;
}


/* ==========================================================================
   6. SITE HEADER & NAVIGATION
   ========================================================================== */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    height: var(--nav-h);
    background: rgba(13, 15, 17, .78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: background .3s var(--ease), border-color .3s var(--ease);
}

/* Added by main.js once the page has scrolled. */
.site-nav.is-stuck {
    background: rgba(13, 15, 17, .97);
    border-bottom-color: var(--line-dark);
}

.site-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Wordmark ------------------------------------------------------------ */
.brand {
    display: flex;
    flex-direction: column;
}

.brand-mark {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .005em;
    color: var(--white);
}

.brand-mark-num {
    color: var(--red);
}

.brand-tag {
    align-self: flex-start;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 2px solid var(--red);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .21em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* --- Links -------------------------------------------------------------- */
.nav-links a {
    position: relative;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

.nav-links a:hover {
    color: var(--white);
}

/* Horizontal set in the header bar, with an underline that wipes in. */
.nav-links-inline {
    display: none;
    align-items: center;
    gap: 4px;
}

.nav-links-inline a {
    padding: 8px 14px;
}

.nav-links-inline a::after {
    content: '';
    position: absolute;
    right: 14px;
    bottom: 2px;
    left: 14px;
    height: 1.5px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--ease);
}

.nav-links-inline a:hover::after {
    transform: scaleX(1);
}

/* Stacked set inside the mobile drawer. */
.nav-links-stacked {
    display: flex;
    flex-direction: column;
    padding: 10px 0 0;
}

.nav-links-stacked a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-dark);
    font-size: 14px;
}

/* --- Phone pill --------------------------------------------------------- */
.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 14px;
    border: 1px solid var(--line-dark);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

.nav-phone .icon {
    color: var(--red);
}

.nav-phone:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .3);
    color: var(--white);
}

/* --- Burger ------------------------------------------------------------- */
.nav-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    cursor: pointer;
}

.nav-burger-bar {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}

/* Bars fold into a cross while the drawer is open. */
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) {
    opacity: 0;
}

.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile drawer ------------------------------------------------------ */
.nav-drawer {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    left: 0;
    z-index: 1039;
    background: rgba(13, 15, 17, .98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-dark);
}

.nav-drawer-cta {
    margin: 18px 0 22px;
}


/* ==========================================================================
   7. HERO
   Three decorative layers sit behind the copy, all pushed to negative z-index
   inside the section's own stacking context:
     .hero-media   the photograph
     .hero::before red radial glow over a dark diagonal wash
     .hero-grid    fine grid, faded out with a radial mask
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    padding: calc(var(--nav-h) + 60px) 0 72px;
    background: var(--ink);
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../images/hero-van.jpg') center 42% / cover no-repeat;
    opacity: .3;
    transform: scale(1.04);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 82% 18%, rgba(227, 30, 36, .20), transparent 62%),
        linear-gradient(104deg,
            var(--ink) 6%,
            rgba(13, 15, 17, .93) 42%,
            rgba(13, 15, 17, .62) 78%,
            rgba(13, 15, 17, .5) 100%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .7;
    background-image:
        linear-gradient(var(--line-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(700px 420px at 20% 30%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(700px 420px at 20% 30%, #000, transparent 75%);
}

.hero-inner {
    position: relative;
    z-index: 1;
}

/* --- Availability badge ------------------------------------------------- */
.hero-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    padding: 7px 16px 7px 13px;
    border: 1px solid rgba(227, 30, 36, .32);
    border-radius: 100px;
    background: rgba(227, 30, 36, .13);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #ff7a7d;
}

.hero-live-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

/* Expanding ring, suggesting a live signal. */
.hero-live-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--red);
    border-radius: 50%;
    animation: ping 1.9s var(--ease) infinite;
}

@keyframes ping {
    0%   { transform: scale(.55); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- Headline ----------------------------------------------------------- */
.hero-title {
    font-size: clamp(40px, 6.4vw, 78px);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--white);
}

.hero-title-accent {
    display: block;
    color: var(--red);
}

.hero-rule {
    width: 62px;
    height: 4px;
    margin: 24px 0 22px;
    border-radius: 3px;
    background: var(--red);
}

.hero-copy {
    max-width: 48ch;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .6);
}

/* --- Entry price -------------------------------------------------------- */
.hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 26px;
    color: var(--white);
}

.hero-price-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.hero-price-value {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.hero-price-currency {
    margin-right: 2px;
    font-size: 19px;
    vertical-align: super;
    color: var(--red);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

/* --- Stat rail ---------------------------------------------------------- */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 620px;
    margin-top: 46px;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .035);
    overflow: hidden;
}

/* DOM order is term then definition, which is the semantic order. The reverse
   direction puts the figure above its label visually. */
.hero-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 3px;
    padding: 18px 14px;
    border-right: 1px solid var(--line-dark);
    text-align: center;
}

.hero-stat:last-child {
    border-right: 0;
}

.hero-stat-value {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--white);
}

.hero-stat-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

/* --- Supporting photo --------------------------------------------------- */
.hero-visual {
    position: relative;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.hero-visual img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Gradient so the caption stays readable over the photo. */
.hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 15, 17, .78) 4%, transparent 52%);
}

.hero-chip {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.hero-chip-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--red);
    color: var(--white);
}

.hero-chip-title {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--ink);
}

.hero-chip-sub {
    font-size: 12px;
    color: var(--body);
}


/* ==========================================================================
   8. TRUST STRIP
   Four promises in a single divided row directly beneath the hero.
   ========================================================================== */
.trust {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 26px 22px;
    border-right: 1px solid var(--line);
    transition: background .25s var(--ease);
}

.trust-col:last-child .trust-item {
    border-right: 0;
}

.trust-item:hover {
    background: var(--panel);
}

.trust-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--red-tint);
    color: var(--red);
    transition: background .25s var(--ease), color .25s var(--ease);
}

.trust-item:hover .trust-icon {
    background: var(--red);
    color: var(--white);
}

.trust-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.trust-sub {
    font-size: 13px;
    color: var(--muted);
}


/* ==========================================================================
   9. HOW IT WORKS
   ========================================================================== */
.step {
    position: relative;
    height: 100%;
    padding: 34px 28px 30px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: transform .3s var(--ease),
                border-color .3s var(--ease),
                box-shadow .3s var(--ease);
}

.step:hover {
    transform: translateY(-6px);
    border-color: rgba(227, 30, 36, .4);
    box-shadow: 0 18px 44px rgba(227, 30, 36, .1);
}

.step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.step-no {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted);
}

.step-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ink);
    color: var(--white);
    transition: background .3s var(--ease);
}

.step:hover .step-icon {
    background: var(--red);
}

.step-title {
    margin-bottom: 9px;
    font-size: 20px;
}

.step-text {
    font-size: 14.5px;
    color: var(--muted);
}

/* Decorative arrow bridging the gap to the next card. Only makes sense once
   the three cards sit on one row, so it is revealed at xl in section 18. */
.step-arrow {
    position: absolute;
    top: 50%;
    right: -30px;
    z-index: 2;
    display: none;
    transform: translateY(-50%);
    color: var(--line);
}

/* --- Job photos --------------------------------------------------------- */
.shot-grid {
    margin-top: clamp(24px, 3vw, 48px);
}

.shot {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    overflow: hidden;
}

.shot img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.shot:hover img {
    transform: scale(1.05);
}

/* Fourth cell: a headline figure instead of a photo. */
.shot-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 190px;
    padding: 24px;
    border-radius: var(--r-md);
    background: linear-gradient(145deg, var(--red) 0%, var(--red-700) 100%);
    color: var(--white);
    text-align: center;
}

.shot-count-value {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.shot-count-label {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}


/* ==========================================================================
   10. WHAT'S INCLUDED
   Five inclusion cards plus an inverted price panel sharing one grid.
   ========================================================================== */
.section-head-action {
    margin-top: 24px;
}

.incl {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: transform .3s var(--ease),
                border-color .3s var(--ease),
                box-shadow .3s var(--ease);
}

.incl:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 30, 36, .4);
    box-shadow: var(--sh-md);
}

.incl-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--red-tint);
    color: var(--red);
    transition: background .25s var(--ease), color .25s var(--ease);
}

.incl:hover .incl-icon {
    background: var(--red);
    color: var(--white);
}

.incl-title {
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.incl-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* --- Price panel -------------------------------------------------------- */
.price {
    position: relative;
    isolation: isolate;
    height: 100%;
    padding: 36px 32px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    overflow: hidden;
}

.price::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -70px;
    z-index: -1;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 30, 36, .5), transparent 68%);
}

/* Heading element, but styled as a small caption above the figure. */
.price-label {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .45);
}

.price-fig {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}

.price-currency {
    margin-right: 4px;
    font-size: 24px;
    vertical-align: super;
    color: var(--red);
}

.price-note {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}

.price-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 26px 0 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line-dark);
}

.price-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}

.price-list .icon {
    color: var(--red);
}


/* ==========================================================================
   11. BRANDS MARQUEE
   main.js clones each .marquee-track and marks the copy aria-hidden. With two
   identical tracks side by side, translating the pair by -100% and looping
   reads as one continuous belt.
   ========================================================================== */
.brands {
    overflow: hidden;
}

.marquee {
    display: flex;
    /* Vertical padding is load-bearing: overflow clips at the padding box, so
       without it the hover lift and its shadow are sliced off top and bottom. */
    padding: 12px 0;
    overflow: hidden;
    user-select: none;
    /* Fade both edges so cards enter and leave softly. */
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Rows sit directly against each other; the padding above supplies the gap. */
.marquee + .marquee {
    margin-top: 0;
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    min-width: 100%;
    padding-right: 16px;
    animation: marquee-left 34s linear infinite;
}

/* Second row travels the other way, slightly slower. */
.marquee-reverse .marquee-track {
    animation-name: marquee-right;
    animation-duration: 40s;
}

/* Pause on hover so the names can be read. */
.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@keyframes marquee-right {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.brand-card {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 100px;
    white-space: nowrap;
    transition: transform .25s var(--ease),
                background .25s var(--ease),
                border-color .25s var(--ease),
                box-shadow .25s var(--ease);
}

.brand-card:hover {
    transform: translateY(-3px);
    background: var(--red-tint);
    border-color: rgba(227, 30, 36, .45);
    box-shadow: var(--sh-sm);
}

/* Logo slot. Holds the brand image, with the monogram underneath it as the
   fallback for a missing or broken file. */
.brand-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 30px;
}

/* Height is fixed and width follows the artwork, so a wide real logo and the
   square placeholder both sit correctly in the pill. */
.brand-logo {
    width: auto;
    max-width: 92px;
    height: 30px;
    object-fit: contain;
}

/* Two-letter monogram. Hidden while a logo is available; main.js reveals it by
   putting .has-no-logo on the card if the image fails to load. */
.brand-badge {
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ink);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    transition: background .25s var(--ease);
}

.brand-card.has-no-logo .brand-logo {
    display: none;
}

.brand-card.has-no-logo .brand-badge {
    display: grid;
}

.brand-card:hover .brand-badge {
    background: var(--red);
}

.brand-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink);
}

.brands-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    padding: 12px 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13.5px;
    color: var(--body);
}

.brands-note .icon {
    color: var(--red);
}


/* ==========================================================================
   12. FAQ ACCORDION
   Panels animate from grid-template-rows 0fr to 1fr, which transitions cleanly
   without needing a measured pixel height. Visibility is toggled alongside it
   so collapsed answers leave the accessibility tree and cannot be focused.
   ========================================================================== */
.faq {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.faq + .faq {
    margin-top: 10px;
}

.faq.is-open {
    border-color: rgba(227, 30, 36, .45);
    box-shadow: 0 8px 26px rgba(227, 30, 36, .09);
}

/* Heading only exists to give the button document outline; it adds no styling. */
.faq-heading {
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 20px 22px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease);
}

.faq-q:hover {
    background: var(--panel);
}

.faq.is-open .faq-q {
    background: var(--panel);
    color: var(--red);
}

/* Plus sign rotates 135° into a cross when the panel opens. */
.faq-sign {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--red-tint);
    color: var(--red);
    transition: background .28s var(--ease),
                color .28s var(--ease),
                transform .28s var(--ease);
}

.faq.is-open .faq-sign {
    background: var(--red);
    color: var(--white);
    transform: rotate(135deg);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
}

.faq.is-open .faq-a {
    grid-template-rows: 1fr;
}

.faq-a-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility .3s var(--ease);
}

.faq.is-open .faq-a-inner {
    visibility: visible;
}

.faq-a-inner p {
    padding: 18px 22px 22px;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--body);
}

/* --- Helper card beside the list ---------------------------------------- */
.faq-aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    isolation: isolate;
    margin-top: 28px;
    padding: 32px 28px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: rgba(255, 255, 255, .66);
    overflow: hidden;
}

.faq-aside::before {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    z-index: -1;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 30, 36, .42), transparent 68%);
}

.faq-aside-title {
    margin-bottom: 10px;
    font-size: 22px;
    color: var(--white);
}

.faq-aside-text {
    margin-bottom: 22px;
    font-size: 14px;
    color: rgba(255, 255, 255, .55);
}


/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    z-index: -1;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 30, 36, .22), transparent 66%);
}

.review {
    position: relative;
    height: 100%;
    padding: 30px 28px;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    transition: transform .3s var(--ease),
                background .3s var(--ease),
                border-color .3s var(--ease);
}

.review:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(227, 30, 36, .34);
}

/* Watermark quote glyph in the top corner. */
.review-quote {
    position: absolute;
    top: 22px;
    right: 24px;
    color: var(--white);
    opacity: .07;
}

.stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
    color: var(--star);
}

.review-quote-text p {
    font-size: 15px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .8);
}

.review-by {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line-dark);
}

.review-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--white);
}

.review-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
}

.review-place {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .42);
}

/* --- Aggregate rating tile ---------------------------------------------- */
.rating-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 34px 26px;
    border: 1px solid rgba(227, 30, 36, .26);
    border-radius: var(--r-md);
    background: rgba(227, 30, 36, .1);
    text-align: center;
}

.rating-value {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}

.rating-label {
    margin: 9px 0 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.rating-note {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}


/* ==========================================================================
   14. CLOSING CTA
   ========================================================================== */
.cta-band {
    position: relative;
    isolation: isolate;
    padding: clamp(48px, 6vw, 76px) clamp(24px, 5vw, 68px);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--red) 0%, var(--red-700) 100%);
    color: rgba(255, 255, 255, .85);
    text-align: center;
    overflow: hidden;
}

/* Two soft light blooms, top-right and bottom-left. */
.cta-band::before,
.cta-band::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.cta-band::before {
    top: -90px;
    right: -80px;
    width: 280px;
    height: 280px;
}

.cta-band::after {
    bottom: -70px;
    left: -60px;
    width: 200px;
    height: 200px;
}

.cta-title {
    font-size: clamp(28px, 4.4vw, 48px);
    color: var(--white);
}

.cta-text {
    max-width: 52ch;
    margin: 14px auto 0;
    font-size: 16.5px;
    color: rgba(255, 255, 255, .82);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.cta-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .68);
}

/* Dot separators between list items rather than in the markup. */
.cta-meta li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cta-meta li + li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .4;
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.footer {
    padding: clamp(52px, 6vw, 80px) 0 28px;
    background: #07090a;
    color: rgba(255, 255, 255, .55);
}

.footer .brand-mark {
    font-size: 27px;
}

.footer-about {
    max-width: 34ch;
    margin: 18px 0 24px;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .42);
}

.footer-heading {
    margin-bottom: 18px;
    font-size: 12.5px;
    letter-spacing: .16em;
    color: var(--white);
}

.footer-links li + li {
    margin-top: 11px;
}

.footer-links a {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .48);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .48);
}

.footer-contact p + p {
    margin-top: 13px;
}

.footer-contact .icon {
    margin-top: 3px;
    color: var(--red);
}

.footer-contact a:hover {
    color: var(--white);
}

/* --- Social row --------------------------------------------------------- */
.socials {
    display: flex;
    gap: 9px;
}

.socials a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .7);
    transition: background .25s var(--ease),
                color .25s var(--ease),
                transform .25s var(--ease);
}

.socials a:hover {
    transform: translateY(-2px);
    background: var(--red);
    color: var(--white);
}

/* --- Bottom bar --------------------------------------------------------- */
.footer-rule {
    height: 1px;
    margin: 40px 0 22px;
    background: rgba(255, 255, 255, .07);
}

.footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.footer-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
}

.footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-tags li {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .42);
}


/* ==========================================================================
   16. MOBILE CONTACT DOCK
   Hidden by default; revealed below the md breakpoint in section 18.
   ========================================================================== */
.dock {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: none;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}

.dock a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--white);
}

.dock-wa {
    background: var(--wa);
}

.dock-call {
    background: var(--ink);
}


/* ==========================================================================
   17. REVEAL ANIMATION
   main.js adds .in as elements enter the viewport. data-delay staggers members
   of the same group.
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }

/* Respect a reduced-motion preference: no reveal, no marquee, no hover lift. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .marquee-track,
    .hero-live-dot::after {
        animation: none;
    }

    .btn-x:hover,
    .step:hover,
    .incl:hover,
    .review:hover,
    .brand-card:hover,
    .socials a:hover {
        transform: none;
    }

    .shot:hover img {
        transform: none;
    }
}


/* ==========================================================================
   18. RESPONSIVE OVERRIDES
   Breakpoints follow Bootstrap's: sm 576, md 768, lg 992, xl 1200.
   ========================================================================== */

/* --- Below lg: mobile navigation ---------------------------------------- */
@media (max-width: 991.98px) {
    /* Header shows only the wordmark and the burger. */
    .site-nav-actions {
        display: none;
    }

    .hero {
        padding-top: calc(var(--nav-h) + 44px);
        padding-bottom: 56px;
    }

    /* Photo is dimmer and the wash goes vertical, since the copy is now
       centred over the whole width rather than sitting in the left column. */
    .hero-media {
        opacity: .22;
    }

    .hero::before {
        background:
            radial-gradient(700px 460px at 78% 12%, rgba(227, 30, 36, .2), transparent 62%),
            linear-gradient(180deg, rgba(13, 15, 17, .94), rgba(13, 15, 17, .88));
    }

    /* Two-up trust grid: vertical rule between pairs, horizontal between rows. */
    .trust-col {
        border-bottom: 1px solid var(--line);
    }

    .trust-item,
    .trust-col:last-child .trust-item {
        border-right: 0;
    }

    .trust-col:nth-child(odd) .trust-item {
        border-right: 1px solid var(--line);
    }

    /* Helper card stops following the list and sits above it. */
    .faq-aside {
        position: static;
    }
}

/* --- lg and up: desktop navigation -------------------------------------- */
@media (min-width: 992px) {
    .nav-links-inline {
        display: flex;
    }

    .nav-burger {
        display: none;
    }

    /* Belt and braces: the drawer can never appear on desktop, even if the
       viewport is resized while it happens to be open. */
    .nav-drawer {
        display: none !important;
    }
}

/* --- Below md: dock, stacked buttons, tighter figures -------------------- */
@media (max-width: 767.98px) {
    /* Room for the fixed dock so it never covers footer content. */
    body {
        padding-bottom: 58px;
    }

    .dock {
        display: flex;
    }

    .hero-title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .hero-copy {
        font-size: 15.5px;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 34px;
    }

    .hero-stat:nth-child(2) {
        border-right: 0;
    }

    .hero-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--line-dark);
    }

    /* Full-width CTAs are easier to hit on a phone. */
    .hero-actions .btn-x,
    .cta-actions .btn-x {
        flex: 1 1 100%;
    }

    .price {
        padding: 30px 24px;
    }

    .price-fig {
        font-size: 48px;
    }
}

/* --- Below sm: single-column trust strip -------------------------------- */
@media (max-width: 575.98px) {
    .trust-col:nth-child(odd) .trust-item {
        border-right: 0;
    }

    .trust-item {
        padding: 20px 4px;
    }

    .brand-card {
        padding: 13px 20px;
    }

    .brand-name {
        font-size: 15px;
    }

    .footer-base {
        justify-content: center;
        text-align: center;
    }
}

/* --- xl and up: connect the process steps ------------------------------- */
@media (min-width: 1200px) {
    .step-arrow {
        display: block;
    }

    /* No arrow trailing off the last card in the row. */
    .steps li:last-child .step-arrow {
        display: none;
    }
}