/* ============================================================
   BTE AFTERSALES PAGE
   Full redesign to match new design screenshots:
   1. Full-bleed team photo hero with hex fade bottom
   2. Navy hex-bg text intro section
   3. Full-bleed photo with navy rounded card overlay (service)
   4. Full-bleed video poster section
   ============================================================ */

/* ============================================================
   1. HERO
   ============================================================ */

.bte-as-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    /* Was a solid navy fallback — changed to transparent so the
       site-wide fixed triangle-pattern background (.bte-fixed-bg in
       main.css, same navy family) shows through cleanly wherever the
       photo/overlay above it are masked/faded to transparent, rather
       than exposing a flat navy block underneath instead. */
    background-color: transparent;
    /* 2026-07-15 — rounded bottom-left/right corners on the hero
       photo, per request. overflow:hidden above clips the bg photo,
       overlay tint and fade mask to match — all three release
       together with the same rounded edge instead of the photo
       peeking out past a square overlay corner. Top corners left
       square since the hero sits flush under the header there.
       Bumped from --radius-xl (2rem) to 2.5rem — reported as still
       hard to see; matches the radius already used for large photo
       panels elsewhere (manufacturers.css .bte-mfr__video-poster). */
    border-radius: 0 0 2.5rem 2.5rem;
}

/* Photo itself now fades over its last ~20%, via a mask (same
   technique already proven on .bte-cat-hero__bg in main.css) — NOT
   just the overlay tint above it. Fading only the overlay (previous
   attempt) left the raw, un-faded photo exposed right at the hero's
   bottom edge, creating a hard-edged seam with a dark band (the
   overlay's peak) sitting directly above it. Masking the photo
   itself means both layers fade out together in sync, so the fixed
   background underneath is revealed smoothly with no seam.

   2026-07-15 fix (first pass) — the mask used to fade all the way to
   fully transparent at 100%, same as the overlay below. Reported
   live as "can't see any changes" after the rounded bottom corners
   were added: overflow:hidden + border-radius on .bte-as-hero (above)
   was genuinely clipping correctly, but with the photo and overlay
   both fully transparent by the time they reached that clipped edge,
   there was nothing left for the rounded corner to visibly cut into.
   Stopped the fade at 45% opacity instead of 0% to leave a dim
   silhouette for the corner to clip.

   2026-07-15 fix (second pass) — that got the corner visible, but
   reported back as "struggling to see" it and "quite an intense blue
   area instead of a gradual fade". Both come from the same cause:
   the fade was compressed into a narrow band (78%–100%) that also
   overlapped the overlay's own steepest darkening below, so the two
   layers stacked into one dense, abrupt-looking block rather than
   reading as a gradual transition, and a corner cut into a dense
   block is much harder to see than one cut into visibly graduated
   tones. Spread the fade out over a much longer stretch (starting at
   55% instead of 78%) and eased it in gradually across several
   stops, so by the time it reaches the rounded edge the photo is
   still clearly recognisable (65% opacity, not 45%) — more contrast
   against the fixed background outside the radius, and no sudden
   band anywhere along the way. */
.bte-as-hero__bg-img {
    /* 2026-07-15 — base/default sizing (parallax OFF — the Aftersales
       "Disable Parallax" checkbox ticked, or JS/GSAP unavailable).
       Non-oversized, but STILL carries the rounded-corner fade mask
       (55/75/90/100% stops) from the earlier "rounded corners aren't
       visible" fix — that fix is unrelated to parallax and needs to
       stay regardless of whether parallax is on. The oversized buffer
       + recalculated mask stops needed for the scroll shift live in
       the [data-edae-parallax] rule below and only apply when that
       attribute is present. */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
    display: block;
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 55%,
        rgba(0,0,0,0.9)  75%,
        rgba(0,0,0,0.75) 90%,
        rgba(0,0,0,0.65) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 55%,
        rgba(0,0,0,0.9)  75%,
        rgba(0,0,0,0.75) 90%,
        rgba(0,0,0,0.65) 100%
    );
}

.bte-as-hero__bg-img[data-edae-parallax] {
    /* Oversized 50% (25% top/bottom, same standard used site-wide) so
       the scroll shift has room to move without revealing a gap at
       top/bottom of the section — this parent (.bte-as-hero) has
       overflow:hidden. The mask-image stops below are recalculated
       (not just copy-pasted from the base rule above) so the fade
       still lands in the exact same physical spot it did before the
       box got 25% taller: new% = (old% + 0.25) / 1.5. */
    top: -25%;
    bottom: -25%;
    height: 150%;
    will-change: transform;
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 53.3%,
        rgba(0,0,0,0.9)  66.7%,
        rgba(0,0,0,0.75) 76.7%,
        rgba(0,0,0,0.65) 83.3%
    );
    mask-image: linear-gradient(
        to bottom,
        black 53.3%,
        rgba(0,0,0,0.9)  66.7%,
        rgba(0,0,0,0.75) 76.7%,
        rgba(0,0,0,0.65) 83.3%
    );
}

/* Keep old .bte-as-hero__bg for fallback if used */
.bte-as-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Tint layer — handles legibility only now:
   - Transparent at top so photo is clearly visible
   - Deepens through the middle and peaks behind the
     heading/subtext (which sit near the bottom) for legibility
   - Fades back down to transparent over the same final stretch as
     .bte-as-hero__bg-img's mask (above), so the two layers release
     together in sync instead of the tint clearing early and exposing
     raw photo underneath it. */
.bte-as-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 2026-07-15 (second pass) — this used to jump from 0.0 at 40% to
       0.6 at 62% to 0.85 at 78%: a 0.6 increase packed into just 38%
       of the height, which reads as a hard, flat "band" of blue
       rather than a gradual fade — reported live as "quite an
       intense blue area instead of a gradual fade". Re-spread across
       more, closer-together stops covering the full height, so the
       darkening is gentle and even at every point rather than mostly
       flat with one steep jump. Peak eased down slightly too
       (0.85 → 0.7) and pulled in from 78% to 65%, then held roughly
       level (not fully released back to transparent) so it stays in
       sync with the photo mask above, which also no longer fades all
       the way out. */
    background: linear-gradient(
        to bottom,
        rgba(7, 9, 58, 0.0)  0%,
        rgba(7, 9, 58, 0.08) 20%,
        rgba(7, 9, 58, 0.22) 38%,
        rgba(7, 9, 58, 0.4)  50%,
        rgba(7, 9, 58, 0.58) 65%,
        rgba(7, 9, 58, 0.7)  80%,
        rgba(7, 9, 58, 0.62) 100%
    );
}

.bte-as-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    /* 2026-07-22 — body copy stacked UNDER the title (was a side-by-side row). */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
    padding-top: calc( var(--bte-header-h, 100px) + var(--space-8) );
}

.bte-as-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    flex: 1;
}

.bte-as-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--bte-white);
    margin: 0;
}

/* 2026-07-18 — no-CTA hero: reserve the space the "Get A Quote" button +
   its gap would have taken so the title sits where it would with a button. */
.bte-as-hero__content--no-cta {
    margin-bottom: 0; /* 2026-07-22 — stacked now; let the body sit under the title */
}

/* 2026-07-18 — hero title reddens on scroll. is-page-scrolled toggled on
   <body> by bte-core.js at the same 60px threshold as the header. */
.bte-as-hero__title {
    transition: color 0.6s var(--ease-out, ease);
}
.bte-page--aftersales.is-page-scrolled .bte-as-hero__title {
    color: var(--bte-red);
}

/* Right-side subtext with red left border — matching screenshot */
.bte-as-hero__subtext {
    max-width: 46rem; /* 2026-07-22 — stacked under the title now, so wider */
    flex-shrink: 0;
    border-left: 3px solid var(--bte-red);
    padding-left: var(--space-5);
    padding-bottom: var(--space-2);
}

.bte-as-hero__subtext p {
    font-size: var(--text-base);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

@media (max-width: 767px) {
    .bte-as-hero__inner {
        flex-direction: column;
        align-items: flex-start;
        /* Less top padding on smaller screens moves the heading/CTA
           block up, giving back room at the bottom so it isn't
           crowded against (or cropped by) the section's edge. */
        padding-top: calc( var(--bte-header-h, 100px) + var(--space-4) );
    }
    .bte-as-hero__subtext {
        max-width: 100%;
    }
    .bte-as-hero__title {
        /* Smaller than the desktop clamp so the heading takes up
           less of the limited vertical space on small screens. */
        font-size: clamp(2rem, 9vw, 3rem);
    }
}

/* Short-viewport screens (e.g. small laptops, landscape tablets) hit
   the same crowding problem even above the 767px width breakpoint,
   since min-height:85vh shrinks but the top padding above was mostly
   fixed rather than scaling down with it. */
@media (max-height: 700px) {
    .bte-as-hero__inner {
        padding-top: calc( var(--bte-header-h, 100px) + var(--space-4) );
    }
    .bte-as-hero__title {
        font-size: clamp(2rem, 5vw, 3.25rem);
    }
}

/* ============================================================
   2. OUR AFTERSALES SERVICES INTRO
   ============================================================ */

.bte-as-intro {
    position: relative;
    overflow: hidden;
    padding-top: clamp(80px, 10vw, 140px) !important;
    padding-bottom: clamp(150px, 20vh, 200px) !important; /* 2026-07-24 — lift copy clear of scroll cue */
    /* Transparent so the fixed background (main.css) shows through —
       previously opaque, which would have hidden the fixed layer
       entirely regardless of the hex-bg child being made transparent */
    background-color: transparent;
}

/* No longer renders its own independently-positioned copy of the
   background — the fixed layer (see .bte-fixed-bg in main.css) shows
   through instead, so this section joins seamlessly with any other
   hex section above or below it on the page. */
.bte-as-intro__hex-bg {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 0;
}

.bte-as-intro__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 820px;
    margin-inline: auto;
}

.bte-as-intro__heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bte-red);
    line-height: 1.05;
    margin: 0 0 var(--space-10);
}

.bte-as-intro__body {
    font-size: var(--text-base);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 60ch;
    margin-inline: auto;
}

/* ============================================================
   3. SERVICES SLIDER — scroll-pinned diagonal wipe
   ============================================================ */

/* Reserves the section's height in normal document flow — without
   this, switching the section itself to position:fixed on pin removed
   it from flow entirely and the page's scrollable height collapsed by
   a full viewport instantly, causing the browser to snap/clamp the
   scroll position right as pinning engaged. The section sits absolutely
   filling this wrap when unpinned (visually identical to before), and
   switches to fixed only for the pinned state, while the wrap itself
   keeps reserving the space either way. */
.bte-as-services__pin-wrap {
    position: relative;
    height: 100vh;
}

.bte-as-services {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
    background-color: var(--bte-navy);
    /* When pinned by JS, body overflow is locked */
}

/* Pinned state marker class (added/removed by JS) */
.bte-as-services.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 40;
}

/* Stack all panels on top of each other */
.bte-as-services__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.bte-as-services__panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* Clip-path starts fully off-screen to the right (for panels 2+).
       Panel 0 starts fully visible. JS animates this on scroll. */
    clip-path: polygon(120% 0%, 120% 0%, 120% 100%, 120% 100%);
    will-change: clip-path;
}

.bte-as-services__panel.is-active {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* First panel always fully visible to start */
.bte-as-services__panel[data-index="0"] {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bte-as-services__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.bte-as-services__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(7, 9, 58, 0.30);
}

.bte-as-services__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.bte-as-services__card {
    background-color: rgba(7, 9, 58, 0.92);
    border-radius: 1.5rem;
    padding: clamp(var(--space-8), 4vw, var(--space-12));
    max-width: 680px;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (max-width: 1023px) {
    .bte-as-services__card {
        width: 75%;
        max-width: 100%;
    }
}

.bte-as-services__eyebrow {
    color: var(--bte-red);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.bte-as-services__body {
    font-size: var(--text-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

/* ---- Segmented progress bar — acts as nav ---- */
.bte-as-services__progress {
    display: flex;
    gap: 6px;
    width: 100%;
}

.bte-as-services__seg {
    flex: 1;
    height: 3px;
    border: none;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background 0.3s;
    /* Expand click target without changing visual size */
}

.bte-as-services__seg::before {
    content: '';
    position: absolute;
    inset: -8px 0;
}

.bte-as-services__seg.is-active,
.bte-as-services__seg.is-done {
    background: var(--bte-red);
}

/* ---- Button — match depot address style:
   parallelogram skewX(30deg), outline-teal, no fill ---- */
.bte-as-services__card .bte-btn {
    align-self: flex-start;
    transform: skewX(30deg) !important;
    padding: 13px 24px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    border-width: 1.5px !important;
}

.bte-as-services__card .bte-btn .bte-btn__inner {
    transform: skewX(-30deg) !important;
    display: inline-flex;
    align-items: center;
}

.bte-as-services__card .bte-btn::before {
    transform: skewX(-30deg) !important;
}

.bte-as-services__card .bte-btn--outline-teal {
    border-color: #00cfff !important;
    color: var(--bte-white) !important;
    background: transparent !important;
}

.bte-as-services__card .bte-btn--outline-teal:hover {
    background: #00cfff !important;
    color: #07093a !important;
}

/* Force skew on the high-specificity outline-teal selector from plugin */
.bte-as-services .bte-as-services__card .bte-btn.bte-btn--outline-teal {
    transform: skewX(30deg) !important;
}

.bte-as-services .bte-as-services__card .bte-btn.bte-btn--outline-teal .bte-btn__inner {
    transform: skewX(-30deg) !important;
}

@media (max-width: 639px) {
    .bte-as-services__card { width: 100%; max-width: 100%; }
}

/* ============================================================
   4. VIDEO SECTION
   ============================================================ */

.bte-as-video {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

.bte-as-video__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.bte-as-video__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(7, 9, 58, 0.25);
}

.bte-as-video__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-block: var(--space-20);
}

/* Watch Full Video button — pill-shaped glass/teal style matching screenshot */
.bte-as-video__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(7, 9, 58, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bte-white);
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, border-color 0.2s;
}

.bte-as-video__btn:hover {
    background: rgba(7, 9, 58, 0.8);
    border-color: var(--bte-teal);
    color: var(--bte-white);
}

/* ---- Service card button — smaller/tighter than default ---- */
.bte-as-service__card .bte-btn {
    --btn-pad-v: 9px;
    --btn-pad-h: 22px;
    --btn-radius: 6px;
}

.bte-as-service__card .bte-btn--outline-teal {
    border-width: 1px;
}

/* Fix button width — prevent it stretching full card width */
.bte-as-service__card .bte-btn {
    align-self: flex-start;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

.bte-as-faq {
    position: relative;
    overflow: hidden;
    /* Transparent so the fixed background (main.css) shows through */
    background-color: transparent;
    padding: clamp(60px, 8vw, 120px) 0;
}

/* Hex triangle background */
/* Same fixed-background approach as .bte-as-intro__hex-bg above */
.bte-as-faq__hex-bg {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 0;
}

/* Wider inner — matches full content width */
.bte-as-faq__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---- Header ---- */
.bte-as-faq__header {
    margin-bottom: clamp(32px, 4vw, 48px);
}

.bte-as-faq__heading {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--bte-white);
    margin: 0 0 var(--space-4);
}

.bte-as-faq__heading span { color: var(--bte-red); }

.bte-as-faq__subtext {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.7);
    margin: 0 0 var(--space-8);
}

/* ---- Animated dashed search pill ---- */
.bte-as-faq__search {
    display: flex;
    justify-content: flex-start; /* 2026-07-24 — left-align per client */
    margin-bottom: clamp(24px, 3vw, 40px);
}

/* SVG border trick for animated dashes on a pill */
.bte-as-faq__search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Fixed height so the SVG border stays a straight-sided rectangle
       with rounded ends, not a stretched oval */
    height: 48px;
    min-width: 300px;
    border-radius: 999px;
    /* 2026-07-20 — pale frosted-glass fill removed per client request:
       the box is now just the marching-dashes outline over the section
       background, nothing filling the middle. (Was the 2026-07-16 "liquid
       glass" panel.) */
    background: transparent;
}

/* Animated dashed border via SVG outline */
.bte-as-faq__search-border {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 999px;
    overflow: visible;
}

.bte-as-faq__search-border rect {
    fill: none;
    /* 2026-07-16 — bumped from 50% to fully solid white per client
       feedback (matches the same white-marching-ants change made to
       the product category search box in product.css). */
    stroke: var(--bte-white);
    /* 2026-07-20 — matched exactly to the New Plant category search box
       (.bte-cat-search__border rect, product.css): thicker stroke and the
       same dash rhythm/speed, so every marching-dashes search box on the
       site is identical. */
    stroke-width: 2;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
    animation: faq-dash-march 1.1s linear infinite;
}

@keyframes faq-dash-march {
    to { stroke-dashoffset: -30; }
}

.bte-as-faq__search-input {
    background: transparent;
    border: none;
    outline: none;
    padding: 0 48px 0 24px;
    color: var(--bte-white);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
}

.bte-as-faq__search-input::placeholder { color: rgba(255,255,255,0.5); }

.bte-as-faq__search-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65);
    padding: 4px;
    transition: color 0.2s;
}

.bte-as-faq__search-btn:hover { color: var(--bte-white); }

/* ---- Accordion — red keyline border wrapping all questions,
   no background fill, horizontal lines between items ---- */
.bte-as-faq__list {
    list-style: none;
    margin: 0;
    /* Padding inside the red box — space between border and questions */
    padding: 8px 16px;
    border: 1.5px solid var(--bte-red);
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

.bte-as-faq__item {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.bte-as-faq__item:last-child { border-bottom: none; }

/* Question row */
.bte-as-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) var(--space-5);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.bte-as-faq__question:hover {
    background: rgba(255,255,255,0.03);
}

.bte-as-faq__item.is-open .bte-as-faq__question {
    background: rgba(255,255,255,0.03);
}

.bte-as-faq__question-text {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    transition: color 0.2s;
}

.bte-as-faq__item.is-open .bte-as-faq__question-text {
    color: var(--bte-teal);
}

/* Toggle — down chevron SVG, rotates to × when open */
.bte-as-faq__toggle {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.4);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
    transition: border-color 0.25s, color 0.25s;
    position: relative;
}

/* Down chevron — shown when closed */
.bte-as-faq__toggle .icon-chevron,
.bte-as-faq__toggle .icon-close {
    position: absolute;
    transition: opacity 0.2s, transform 0.25s;
}

.bte-as-faq__toggle .icon-chevron { opacity: 1; transform: rotate(0deg); }
.bte-as-faq__toggle .icon-close   { opacity: 0; transform: rotate(-45deg); }

.bte-as-faq__item.is-open .bte-as-faq__toggle {
    border-color: var(--bte-red);
    color: var(--bte-white);
}

.bte-as-faq__item.is-open .bte-as-faq__toggle .icon-chevron { opacity: 0; transform: rotate(45deg); }
.bte-as-faq__item.is-open .bte-as-faq__toggle .icon-close   { opacity: 1; transform: rotate(0deg); color: var(--bte-red); }

/* Answer panel */
.bte-as-faq__answer {
    display: none;
    padding: 0 var(--space-7) var(--space-6) var(--space-7);
}

.bte-as-faq__item.is-open .bte-as-faq__answer { display: block; }

.bte-as-faq__answer p {
    font-size: var(--text-sm);
    line-height: 1.75;
    color: rgba(255,255,255,0.72);
    margin: 0;
}

/* ---- Sticky FAQ tab ---- */
.bte-as-faq__sticky-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg) translateX(50%);
    transform-origin: right center;
    background: var(--bte-red);
    color: var(--bte-white);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 4px 4px 0 0;
    z-index: 50;
    text-decoration: none;
    display: none;
}

/* ---- Search filter ---- */
.bte-as-faq__item.is-hidden { display: none; }


/* ============================================================
   HOMEPAGE AFTERSALES TEASER  (#bte-aftersales / .bte-as__*)
   ------------------------------------------------------------
   The compact "at a glance" banner shown on the homepage —
   separate from the full Aftersales page sections above
   (.bte-as-hero / .bte-as-intro / .bte-as-services).
   Restored 2026-07-02: these rules were missing after the
   full Aftersales page redesign overwrote this file, which
   left the homepage teaser completely unstyled.
   ============================================================ */

#bte-aftersales.bte-as {
  background-color: var(--bte-red);
  background-image:
    linear-gradient(rgba(255, 11, 53, 0.88), rgba(255, 11, 53, 0.88)),
    url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* Explicit z-index needed for while this section is pinned
     (position:fixed via GSAP) — without one, it defaults to auto,
     which loses to any other element on the page with an explicit
     z-index regardless of DOM order or fixed-vs-normal-flow
     positioning. Confirmed live: the footer was visibly scrolling up
     in front of this section while pinned. Higher than the values
     already established for About (50) and Why Choose Us (60). */
  position: relative;
  z-index: 70;
  /* Explicit 100vh + flex distribution — matching the same pattern
     used by the site's other pinned sections (e.g. Why Choose Us).
     This section is going to be pinned once transitions are added,
     so it needs to reliably occupy exactly one viewport height
     rather than however tall its content happens to add up to.
     justify-content:space-between pushes .bte-as__inner to the top
     (right after the header-clearance padding) and .bte-as__scroll
     to the bottom, with whatever space remains between them —
     .bte-as__side-tab is position:absolute so it's unaffected,
     staying out of this flex flow entirely. */
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Top clearance comfortably clears the ~140-150px sticky header —
     same clearance value established elsewhere on this site (About
     section, contact form, depots). Small bottom padding is just
     breathing room below the scroll indicator, not a spacing
     mechanism — that's handled by the flex distribution above. */
  /* 2026-07-18 — reduced top padding so the whole block sits higher and
     added bottom breathing room so the scroll-to-continue cue clears the
     viewport edge (was 190px 0 12px). */
  padding: 150px 0 28px;
}

#bte-aftersales .bte-as__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  /* Grows to fill all available vertical space in the section (the
     space between the top padding and wherever .bte-as__scroll sits)
     so that .bte-as__main-row below can be centred within it via
     margin auto, rather than sitting directly under .bte-as__top. */
  display: flex;
  flex-direction: column;
  flex: 1;
}

#bte-aftersales .bte-as__top {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-3);
}

/* 2026-07-22 — the desktop grow/shrink scales JUST this group (eyebrow +
   heading), not the whole top block (which includes the wide body). fit-
   content so its width tracks the heading and it has room to scale up. */
#bte-aftersales .bte-as__title-group {
  display: inline-block;   /* shrink to the heading width so it can scale up */
  align-self: flex-start;  /* in case an ancestor flex would stretch it */
  max-width: 100%;
}

/* 2026-07-22 — desktop RESTING (in-place) heading size reduced so the
   scroll-in grow has room to scale up from it (at the old 7rem the word was
   already ~full screen width — nothing to grow into, so it read as no grow).
   The JS scales it up big on entry, then reduces to THIS size. Desktop only;
   mobile keeps its own size. */
@media (min-width: 1024px) {
  #bte-aftersales .bte-as__heading {
    font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  }
}

#bte-aftersales .bte-as__eyebrow {
  color: var(--bte-white);
}

#bte-aftersales .bte-as__heading {
  font-family: var(--font-display);
  /* Increased significantly per request ("much larger") — was
     clamp(2.2rem, 5vw, 3.6rem), reduced earlier to help fit the
     bigger image within 100vh. Rebalanced spacing elsewhere (image
     size, row centring) to accommodate this increase instead. */
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.95;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bte-white);
  margin: 0 0 var(--space-3);
}

/* Pre-scroll armed state (see bte-aftersales-teaser.js) — opacity
   only, not a transform, since GSAP's own xPercent/scale would layer
   additively on top of a CSS transform already present on the same
   element rather than replacing it (the exact bug already found and
   fixed on the About section's blue panel — see that section's own
   CSS for the full explanation). The top block (eyebrow/heading/
   body-1) is deliberately NOT hidden here — it's meant to be visible
   immediately (just large and centred, via a JS-computed transform),
   not faded in. Only the stage-2 elements (links/photo/side) start
   hidden. */
@media (min-width: 1024px) {
    .bte-as--pin-armed .bte-as__links,
    .bte-as--pin-armed .bte-as__photo-wrap,
    .bte-as--pin-armed .bte-as__side {
        opacity: 0;
    }
}

#bte-aftersales .bte-as__body {
  /* Reduced from --text-lg with a tighter line-height, same reason as
     the heading above — freeing vertical room for a bigger image. */
  font-size: var(--text-base);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
}

#bte-aftersales .bte-as__main-row {
  display: grid;
  /* Links column sized to its own actual content (max-content) rather
     than a fixed pixel cap — confirmed via screenshot that "SERVICE"
     and "OFFERS" at this list's 48px bold font-size are wider than
     the 160-200px previously allocated, causing the text itself to
     visually overflow past its own column onto the image, even
     though the grid columns themselves never overlapped. Sizing to
     content removes any risk of this regardless of exact rendered
     text width.

     Image column reduced slightly (was 540-660px) to make room for
     the heading's significant size increase above — confirmed live
     that keeping the image at 660px left only ~5px of buffer once
     the heading grew, too tight to be safe. 580px restores a
     comfortable ~12px margin. */
  grid-template-columns: max-content minmax(460px, 580px) minmax(220px, 1fr);
  gap: var(--space-10);
  align-items: center;
  /* Centres this row within .bte-as__inner's available vertical space
     (below .bte-as__top, above the end of .bte-as__inner) rather than
     it sitting directly under the heading with a large empty gap
     below before the scroll indicator. */
  /* 2026-07-18 — bias upward (was margin-top:auto both sides). Keeping the
     row just below the heading and letting all remaining space fall to the
     bottom raises the content and guarantees the scroll cue stays in view. */
  margin-top: var(--space-8);
  margin-bottom: auto;
}

#bte-aftersales .bte-as__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#bte-aftersales .bte-as__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bte-navy);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

#bte-aftersales .bte-as__link:hover,
#bte-aftersales .bte-as__link:focus-visible,
#bte-aftersales .bte-as__link.is-active {
  color: var(--bte-white);
  gap: var(--space-4);
}

#bte-aftersales .bte-as__link:hover .bte-as__link-tri,
#bte-aftersales .bte-as__link:focus-visible .bte-as__link-tri,
#bte-aftersales .bte-as__link.is-active .bte-as__link-tri {
  border-left-color: var(--bte-white);
}

#bte-aftersales .bte-as__link-tri {
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 11px solid var(--bte-navy);
  transition: border-left-color var(--dur-fast) var(--ease-out);
}

#bte-aftersales .bte-as__photo-wrap {
  position: relative;
  /* width (not just max-width) is needed here — margin-inline:auto
     requires a definite width to center against, otherwise the
     element shrinks to fit its content (the image's default tiny
     size before it's loaded) rather than stretching to fill its
     grid cell. Confirmed live: without this, the wrapper collapsed
     to ~28px regardless of how wide its grid column actually was. */
  width: 100%;
  margin-inline: auto;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

#bte-aftersales .bte-as__photo {
  display: block;
  width: 100%;
  /* Changed from 3/4 (portrait) to landscape, matching the request
     for a wider, shorter image. */
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

#bte-aftersales .bte-as__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

#bte-aftersales .bte-as__side .bte-as__body {
  font-size: var(--text-lg);
  max-width: 36ch;
}

#bte-aftersales .bte-as__side-tab {
  position: absolute;
  top: var(--space-20);
  right: 0;
  z-index: 2;
  background: var(--bte-navy);
  color: var(--bte-white);
  padding: var(--space-4) var(--space-2);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
}

#bte-aftersales .bte-as__side-tab span {
  transform: rotate(180deg);
}

#bte-aftersales .bte-as__scroll {
  display: flex;
  justify-content: center;
  /* No margin needed — the parent's justify-content:space-between
     handles the spacing above this automatically now. */
}

/* 2026-07-14 fix — short-viewport cropping. This section is pinned to
   a hard height:100vh with overflow:hidden (needed so it occupies
   exactly one viewport height while pinned), but its content — a
   fixed 190px top padding, a heading up to 7rem tall, body copy, and
   a centred image/links row — was sized assuming 900px+ of viewport
   height. On a shorter laptop screen (same desktop width breakpoint,
   far less vertical room), that content genuinely doesn't fit inside
   100vh and the bottom of it (the image, side content, or scroll
   indicator depending on exact height) gets clipped by the section's
   own overflow:hidden for the whole time it's pinned. Confirmed via
   screenshot. Only applies at desktop widths — this section's
   single-column mobile/tablet layout (below) already uses
   height:auto and isn't pinned in the first place. */
@media (max-height: 900px) and (min-width: 1025px) {
  #bte-aftersales.bte-as {
    padding: 120px 0 24px;
  }

  #bte-aftersales .bte-as__heading {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
  }

  #bte-aftersales .bte-as__top {
    margin-bottom: var(--space-2);
  }

  #bte-aftersales .bte-as__body {
    /* Clamped to 2 lines — on a short viewport this is the easiest
       thing to trim without losing anything structurally important
       (the full text is still available on the dedicated Aftersales
       page this teaser links to). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #bte-aftersales .bte-as__photo-wrap {
    max-width: 420px;
  }

  #bte-aftersales .bte-as__main-row {
    gap: var(--space-6);
  }

  #bte-aftersales .bte-as__side .bte-as__body {
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 1024px) {
  #bte-aftersales.bte-as {
    /* height:100vh (desktop) is specifically to prepare this section
       for pinning, which — matching every other pinned section on
       this site — is a desktop-only effect. The stacked single-column
       layout below needs more vertical room than one viewport to
       avoid overflowing/clipping its own content. */
    height: auto;
    min-height: 100vh;
  }

  #bte-aftersales .bte-as__main-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  #bte-aftersales .bte-as__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  #bte-aftersales .bte-as__side-tab {
    display: none;
  }
}

@media (max-width: 640px) {
  #bte-aftersales.bte-as {
    padding: var(--space-16) 0 var(--space-12);
  }

  #bte-aftersales .bte-as__heading {
    font-size: 3rem;
  }

  #bte-aftersales .bte-as__link {
    font-size: var(--text-xl);
  }
}


/* Inline aftersales video (2026-07-19) — full-bleed autoplay MP4 with a
   click-to-toggle sound button, replacing the old play-button link. */
.bte-as-video--inline { position: relative; overflow: visible; }
/* Sticky stage = the pinned viewport. On desktop the section itself is a
   tall scroll track (below); this stage sticks to the top and holds the
   video full-screen while the track scrolls past, so you dwell on the
   video instead of shooting past it to the footer. */
.bte-as-video__stage {
    position: relative;
    width: 100%;
    min-height: 65vh;
    overflow: hidden;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* Tall track (desktop, motion-OK) gives the sticky stage room to pin. */
    .bte-as-video--inline {
        display: block;
        height: 240vh;
        min-height: 0;
    }
    /* JS-driven fixed pin (bte-aftersales.js). CSS position:sticky can't
       be used here: [data-barba="wrapper"] carries overflow:hidden (to
       stop horizontal scroll during page transitions), and a clipping
       ancestor disables sticky. position:fixed is NOT disabled by an
       overflow:hidden ancestor (only by a transformed one — cleared in
       the engine's afterEnter hook), so the JS toggles these classes:
         default        = absolute at the top of the track (pre-pin)
         .is-pin-fixed  = fixed, locked to the viewport (pinned)
         .is-pin-after  = absolute at the bottom of the track (post-pin)
       Boundaries line up 1:1, so the swaps are visually seamless. */
    .bte-as-video--inline .bte-as-video__stage {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        min-height: 0;
    }
    .bte-as-video--inline .bte-as-video__stage.is-pin-fixed {
        position: fixed;
    }
    .bte-as-video--inline .bte-as-video__stage.is-pin-after {
        position: absolute;
        top: auto;
        bottom: 0;
    }
}
.bte-as-video__window {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: 0;                 /* full-bleed by default; the grow (JS) starts it small + rounded */
    transform-origin: center center;
    will-change: transform;
}
.bte-as-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.bte-as-video--inline .bte-as-video__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bte-as-video__sound {
    position: absolute;
    right: clamp(var(--space-4), 3vw, var(--space-10));
    bottom: clamp(var(--space-4), 3vw, var(--space-10));
    z-index: 3;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(7, 9, 58, 0.45);
    color: var(--bte-white);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
}
.bte-as-video__sound:hover { background: var(--bte-red); border-color: var(--bte-red); transform: scale(1.06); }
.bte-as-video__sound-icon { display: none; }
.bte-as-video__sound-icon--off { display: block; }
.is-sound-on .bte-as-video__sound-icon--off { display: none; }
.is-sound-on .bte-as-video__sound-icon--on { display: block; }


/* Triangle/hex overlay on the aftersales hero photo (2026-07-19, opt-in
   via the Aftersales Page 'Triangle Pattern Overlay' toggle). */
.bte-as-hero__triangles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    mix-blend-mode: overlay;
}

/* ============================================================
   HOMEPAGE AFTERSALES (#bte-aftersales) MOBILE — 2026-07-21
   Match the visual: eyebrow, heading, body, then the dashed-bordered
   image card, then the Service/Parts/Offers links, scroll cue. The
   pinned grow/cycle is desktop-only, so on phones lay it out as a
   simple stack.
   ============================================================ */
@media (max-width: 767px) {
    #bte-aftersales {
        /* Pinned on phones now (bte-aftersales-teaser.js) — hold exactly
           one screen so the whole thing is visible while the links cycle. */
        height: 100svh !important;
        min-height: 100svh !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        padding-top: calc( var(--bte-header-h, 84px) + var(--space-2) ) !important;
        /* Clear the floating Search/Call/Email pill so OFFERS isn't hidden. */
        padding-bottom: calc( env(safe-area-inset-bottom, 0px) + 88px ) !important;
    }
    /* Tighten everything so it fits one screen. */
    #bte-aftersales .bte-as__heading { font-size: clamp(1.9rem, 9.5vw, 2.8rem) !important; }
    #bte-aftersales .bte-as__top .bte-as__body { font-size: var(--text-sm) !important; line-height: 1.45 !important; }
    #bte-aftersales .bte-as__photo {
        aspect-ratio: auto !important;
        /* 2026-07-24 — was 24vh. The section is locked to 100svh with the
           links stacked at the bottom, so a tall photo pushed the 3rd link
           (OFFERS) below the clip. Shorter photo lets all three show. */
        height: 17vh !important;
        max-height: 17vh !important;
    }
    #bte-aftersales .bte-as__photo-wrap { padding: var(--space-2) !important; }
    /* Hide the side column (duplicate body + "Find Out More" CTA) and the
       vertical side tab — the visual has neither. */
    #bte-aftersales .bte-as__side,
    #bte-aftersales .bte-as__side-tab { display: none !important; }

    /* Stack: image card first, then the links. */
    #bte-aftersales .bte-as__main-row {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: var(--space-4) !important;
        margin: var(--space-4) 0 0 !important;
        align-items: stretch !important;
    }
    #bte-aftersales .bte-as__photo-wrap {
        order: 0;
        width: 100% !important;
        margin: 0 !important;
    }
    #bte-aftersales .bte-as__photo { aspect-ratio: 4 / 3; }
    #bte-aftersales .bte-as__links {
        order: 1;
        flex-direction: column !important;   /* Service / Parts / Offers each on their own line */
        gap: var(--space-2) !important;
    }
    /* Active link = navy (blue), the others white — so you can see which
       one you're on as you tap through. (Desktop default is the reverse.) */
    #bte-aftersales .bte-as__link {
        font-size: clamp(1.3rem, 6.5vw, 1.8rem);
        color: var(--bte-white) !important;
    }
    #bte-aftersales .bte-as__link.is-active { color: var(--bte-navy) !important; }
    #bte-aftersales .bte-as__link-tri { border-left-color: var(--bte-white) !important; }
    #bte-aftersales .bte-as__link.is-active .bte-as__link-tri { border-left-color: var(--bte-navy) !important; }
}