/* ============================================================
   APEX AUTO DETAILING — Core Stylesheet
   All brand variables live in :root. Override here to rebrand.
   ============================================================ */

:root {
    /* Brand color palette */
    --apex-black: #0b0f14;
    --apex-ink: #151a21;
    --apex-surface: #1c2229;
    --apex-line: #2a313b;

    --apex-cyan: #00d4ff;
    --apex-cyan-2: #00a8cc;
    --apex-amber: #ffb000;
    --apex-amber-2: #ff8a00;
    --apex-red: #ff3b3b;
    --apex-green: #1fc16b;

    --apex-white: #ffffff;
    --apex-paper: #f6f7f9;
    --apex-mute: #e5e8ee;
    --apex-grey-100: #f0f2f5;
    --apex-grey-300: #c9d0d8;
    --apex-grey-500: #8a939f;
    --apex-grey-700: #4a5260;

    /* Type */
    --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

    /* Radii + shadows */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 18px;
    --r-xl: 15px;
    --r-pill: 999px;
    --shadow-card: 0 10px 30px -10px rgba(11, 15, 20, 0.18);
    --shadow-hover: 0 20px 50px -10px rgba(0, 212, 255, 0.25);
    --shadow-dark: 0 20px 60px -20px rgba(0, 0, 0, 0.55);

    /* Layout */
    --header-h: 78px;
}

/* ---------- Reset / base ---------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--apex-black);
    margin: 0 0 0.5em 0;
}

h1 {
    font-size: clamp(2.4rem, 5vw + 0.4rem, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(1.85rem, 2.6vw + 0.6rem, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

h3 {
    font-size: clamp(1.35rem, 1vw + 1rem, 1.85rem);
    line-height: 1.2;
}

h4 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1em 0;
}

a {
    color: var(--apex-black);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--apex-cyan-2);
}

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

.container-apex {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: clamp(4px, 1vw, 25px) 0;
}

.section-tight {
    /* Most pages wrap a self-padded "banner" card (.cta-banner) in this
       section -- the card's own padding (clamp(40px,6vw,72px), all
       sides) already provides breathing room, so this wrapper's old
       40-80px on top of that doubled the visual gap above/below the
       card to ~144px on desktop. */
    padding: clamp(24px, 3vw, 40px) 0;
}

/* Eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--apex-cyan-2);
    margin-bottom: 18px;
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--apex-cyan);
    border-radius: 2px;
}

.eyebrow.light {
    color: var(--apex-cyan);
}

.eyebrow.amber {
    color: var(--apex-amber-2);
}

.eyebrow.amber::before {
    background: var(--apex-amber);
}

/* Section header */
.section-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.section-head.left {
    text-align: left;
    margin-left: 0;
}

.section-head p {
    color: var(--apex-grey-700);
    font-size: 1.1rem;
    max-width: 64ch;
    margin-inline: auto;
}

.section-head.left p {
    margin-inline: 0;
}

.section-head h2 .accent,
.mem-private-content h2 .accent {
    color: var(--apex-cyan-2);
}

@media (max-width: 560px) {
    /* 56px was sized for desktop's wider, shorter-relative-to-viewport
       sections -- comfortably breathing room there, just extra dead
       space stacked above every section's content on phone. */
    .section-head {
        margin-bottom: 32px;
    }
}

/* ---------- Buttons ---------- */
.btn-apex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 50px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    border: none;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}

.btn-apex:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.3);
}

.btn-apex.lg {
    padding: 18px 32px;
    font-size: 1.05rem;
}

.btn-apex.sm {
    padding: 10px 18px;
    font-size: 1rem;
    letter-spacing: 0.05rem;
}

.btn-apex-primary {
    background: var(--apex-cyan);
    color: var(--apex-black);
}

.btn-apex-primary:hover {
    background: var(--apex-cyan-2);
    color: var(--apex-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -5px rgba(0, 212, 255, 0.45);
}

.btn-apex-amber {
    background: var(--apex-amber);
    color: var(--apex-black);
}

.btn-apex-amber:hover {
    background: var(--apex-amber-2);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -5px rgba(255, 176, 0, 0.45);
    color: var(--apex-black);
}

.btn-apex-dark {
    background: var(--apex-black);
    color: var(--apex-white);
}

.btn-apex-dark:hover {
    background: var(--apex-ink);
    color: var(--apex-cyan);
    transform: translateY(-2px);
}

.btn-apex-light {
    background: var(--apex-white);
    color: var(--apex-black);
}

.btn-apex-light:hover {
    background: var(--apex-paper);
    transform: translateY(-2px);
}

.btn-apex-outline {
    background: transparent;
    color: var(--apex-black);
    border: 1.5px solid var(--apex-line);
}

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

.btn-apex-ghost {
    background: transparent;
    color: var(--apex-white);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-apex-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--apex-cyan);
    border-color: var(--apex-cyan);
}

/* ---------- Top utility strip ---------- */
.top-strip {
    background: var(--apex-black);
    color: var(--apex-grey-300);
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--apex-line);
}

.top-strip a {
    color: var(--apex-grey-300);
}

.top-strip a:hover {
    color: var(--apex-cyan);
}

.top-strip .container-apex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.top-strip-left {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.top-strip-left span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.top-strip-right {
    display: flex;
    gap: 18px;
    align-items: center;
}

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    /* Above Bootstrap's .sticky-top utility (z-index: 1020, used by the
       booking summary sidebar on book-mobile/book-now) — otherwise once
       that sidebar becomes sticky it paints over the header's own
       dropdown menus (account menu, Book Now menu), since a descendant's
       z-index can never escape its ancestor's own stacking level. */
    z-index: 1030;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--apex-mute);
    height: var(--header-h);
    display: flex;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.28s ease;
}

/* Hidden on scroll-down, revealed on scroll-up — see the scroll listener
   in layout/main.blade.php. A transform (not display/visibility) keeps
   the header's sticky slot in the layout, so nothing beneath it jumps
   when it slides away. */
.site-header.site-header-hidden {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
}

/* Logo LEFT — everything else pushed to the RIGHT */
.nav-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--apex-black);
    flex-shrink: 0;
}

.nav-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--apex-black);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

/* Desktop was oddly the smallest of the three breakpoints -- phone
   (46px, below) and tablet (50px, further below) both already read
   bigger than this 40px, despite desktop having the most header
   width to spare.

   max-width is raised alongside height, not left behind, because for a
   WIDE logo it -- not height -- is what actually decides the rendered
   size. Anything wider than max-width/height (here 320/72 = 4.44:1)
   hits the width clamp first and comes out SHORTER than the height
   asks for, so bumping height alone would have done nothing at all for
   exactly the long, low wordmark-style logos that look smallest.
   .site-header is a fixed height (var(--header-h) -- 78px desktop,
   64px phone), so nothing in this rule can change the bar's own
   height; this only spends slack that was already there. 72px is
   essentially the ceiling, leaving 3px above and below. Going further
   means raising --header-h itself, which does change the bar. */
.nav-brand-logo {
    height: 72px;
    max-width: 320px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    /* Redefining the variable (not just .site-header's height) keeps
       calc(var(--header-h) + ...) scroll-margin-top offsets elsewhere
       (e.g. services.blade.php's anchor sections) correct on mobile too. */
    :root {
        --header-h: 64px;
    }

    .nav-brand-logo {
        height: 58px;
        max-width: 215px;
    }
}

/* Logo reads small on tablet -- it's stuck at the desktop 40px size
   outside the phone-only rule just above (which stops at 768px). Scoped
   to 769-991.98px (not 768, so it never overlaps the phone rule's
   boundary) -- the header itself stays 78px here, so this only needs to
   cover both the uploaded-logo <img> and the fallback icon+text mark,
   whichever the business has configured. */
@media (min-width: 769px) and (max-width: 991.98px) {
    .nav-brand-logo {
        height: 66px;
        max-width: 290px;
    }

    .nav-brand-mark {
        width: 46px;
        height: 46px;
    }

    .nav-brand {
        font-size: 1.35rem;
    }

    .nav-brand small {
        font-size: 11px;
    }
}

.nav-brand-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(0, 212, 255, .55), transparent 55%);
}

.nav-brand-mark svg {
    position: relative;
    z-index: 2;
}

.nav-brand small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--apex-grey-500);
    letter-spacing: 0.18em;
}

/* Nav menu + CTA together pushed to the right via margin-left: auto */
.nav-menu {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.nav-menu a,
.nav-menu .nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1rem;
    padding: 8px 14px;
    border-radius: var(--r-md);
    color: var(--apex-black);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.nav-menu a:hover,
.nav-menu .nav-link:hover {
    background: var(--apex-paper);
    color: var(--apex-black);
}

.nav-menu a.active {
    background: var(--apex-black);
    color: var(--apex-white);
}

.nav-cta-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--apex-black);
}

.nav-phone-num {
    font-size: 0.95rem;
}

/* "Services" nav link: outline pill matching .btn-apex-signin's
   treatment right below, so it reads as prominent as the Sign In /
   Book Now buttons instead of blending into the plain text nav links
   next to it. ".nav-menu a" above already sets padding/border-radius
   with one more type-selector (a) than a bare .nav-services-btn class
   would carry, which outranks it despite coming first in the file --
   qualify with ".nav-menu a" here too so this wins on specificity
   instead of needing !important. */
.nav-menu a.nav-services-btn {
    position: relative;
    /* Belt and braces for the jeep passing behind this pill: the drive
       layer already sits at z-index:-1 (see .nav-car-clip below), so
       this only has to stay on a positive layer to be safely in front
       of it. Also the stacking context the ::after sweep needs. */
    z-index: 2;
    overflow: hidden;
    border: 1.5px solid var(--apex-line);
    border-radius: var(--r-pill);
    padding: 8px 18px;
    transition: border-color .18s, background .18s, color .18s, transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

/* Light sweep across the pill, timed with the hover transition below
   rather than looping on its own -- a single pass, not a shimmer. */
.nav-menu a.nav-services-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .7s ease;
    pointer-events: none;
}

.nav-menu a.nav-services-btn:hover,
.nav-menu a.nav-services-btn:focus-visible {
    background: var(--apex-black);
    color: var(--apex-white);
    border-color: var(--apex-black);
    /* 1.5% -- within the "1-2%" ask, small enough to read as a
       response rather than a bounce. */
    transform: scale(1.015);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
}

.nav-menu a.nav-services-btn:hover::after,
.nav-menu a.nav-services-btn:focus-visible::after {
    transform: translateX(130%);
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu a.nav-services-btn {
        transition: border-color .18s, background .18s, color .18s;
    }

    .nav-menu a.nav-services-btn:hover,
    .nav-menu a.nav-services-btn:focus-visible {
        transform: none;
        box-shadow: none;
    }

    .nav-menu a.nav-services-btn::after {
        display: none;
    }
}

/* The jeep's drive loop (header.blade.php's .nav-car-runner). It runs
   the approach to the Services pill and fades out there -- it is
   deliberately NOT a full-header crossing. An earlier pass had it
   travelling the entire navbar and out the far side, which put it
   sweeping across Membership / Gallery / Locations / Sign in; scoped
   back to Services on request.

   The work is split across three nested elements because a single
   element has only ONE `transform`, and the drive and the suspension
   bounce need completely different durations and timing functions. Run
   both through one transform and the bounce's easing modulates the
   horizontal position too, which is what used to make the jeep look
   like it slowed to a stop. Separated, road speed is constant no
   matter what the body is doing.

   Runs independently of Services' hover state: hovering the pill never
   starts, stops, speeds up or resets it (see .nav-menu
   a.nav-services-btn above for the pill's own, separate response). */
.nav-car-runner {
    /* Zero-size anchor sitting in nav-menu's flex flow immediately
       before the Services pill -- this is what scopes the whole
       animation to that pill rather than to the header. Positioned so
       .nav-car-clip measures from here; left at z-index:auto on
       purpose, so it does NOT open a stacking context and the clip's
       negative z-index below still resolves against .site-header. */
    position: relative;
    width: 0;
    height: 0;
}

.nav-car-clip {
    position: absolute;
    top: 50%;
    left: -630px;
    width: 750px;
    height: 72px;
    transform: translateY(-50%);
    overflow: hidden;
    pointer-events: none;
    /* Behind every nav link, but still in front of the header's own
       background: a negative z-index paints after the ancestor's
       background/border and before its in-flow content, so the jeep
       passes behind the Services label without disappearing under the
       white bar. .site-header has both a transform and a backdrop-
       filter, so it is a guaranteed stacking context and this cannot
       leak out behind the page.

       Sized so NEITHER edge is reachable, which is the whole point:
       the jeep travels 160px -> 622px inside a 750px box and is 97px
       wide, so it clears the left edge by 160px and the right by 31px,
       and the dust by 21px / 63px. Appearing and disappearing is done
       entirely by opacity. A tighter box saves nothing and costs the
       illusion -- the jeep slides out from behind an invisible
       vertical wall on one side and gets its bumper sliced on the
       other. */
    z-index: -1;
}

/* HORIZONTAL TRAVEL ONLY -- nothing else may touch this transform. */
.nav-car-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 97px;
    height: 46px;
    margin-top: -23px;
    will-change: transform, opacity;
    /* Two animations, same duration so they stay locked together, but
       each owning ONE property with its own curve. The drive must be
       linear or the speed visibly varies; a linear opacity ramp,
       though, reads as a mechanical dimmer rather than something
       easing into view. Separate animations is the only way to give
       them different timing functions -- per-keyframe easing would
       apply to the transform too. */
    animation:
        navCarDrive 4.4s linear infinite,
        navCarFade 4.4s ease-in-out infinite;
}

/* Travel is 160px -> 622px in the clip's own coordinates: 462px in
   2.29s, a steady 202px/s. Every keyframe is placed exactly
   proportionally along that line (8.8846px per 1% of cycle in all
   three segments), so the speed never varies by a pixel.

   The run is anchored to the Services pill, and the start is set so
   the jeep reaches full opacity right at the logo's trailing edge:
   .container-apex caps at 1440px, so from 1440px up the logo and the
   pill move together and that landing point is a constant +2px past
   the logo. Below 1440px the gap closes (only 100px of it left at
   1201px) and the jeep simply finishes fading while still over the
   logo, which reads the same way.

   No opacity here -- see navCarFade below. 52% -> 100% holds off-cycle
   while invisible, which keeps the loop from reading as a conveyor
   belt of jeeps, and is where the position reset happens. */
@keyframes navCarDrive {
    0% {
        transform: translate3d(160px, 0, 0);
    }

    15% {
        transform: translate3d(293.3px, 0, 0);
    }

    37% {
        transform: translate3d(488.7px, 0, 0);
    }

    52% {
        transform: translate3d(622px, 0, 0);
    }

    100% {
        transform: translate3d(622px, 0, 0);
    }
}

/* The jeep does not enter or leave the frame -- it materialises out of
   the air near the logo, runs solid across the gap, and dissolves into
   the Services pill. Long ramps on purpose: ~0.66s in and out,
   eased at both ends. Anything shorter and you catch it switching on,
   which is what made the old entrance look fake. */
@keyframes navCarFade {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    37% {
        opacity: 1;
    }

    52% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* SUSPENSION ONLY -- bob and roll, no horizontal component. The two
   run on separate properties (`transform` vs the standalone `rotate`,
   which is applied before `transform` and so composes rather than
   overwrites) at deliberately mismatched periods, .42s against .63s.
   Equal periods would lock bob and roll into one repeating pose every
   cycle and read as a mechanical wobble; mismatched, the combination
   drifts in and out of phase and never quite repeats. */
.nav-car-motion {
    position: relative;
    display: block;
    width: 97px;
    height: 46px;
    animation:
        navCarBob .42s ease-in-out infinite alternate,
        navCarRoll .63s ease-in-out infinite alternate;
}

@keyframes navCarBob {
    from {
        transform: translate3d(0, -.9px, 0);
    }

    to {
        transform: translate3d(0, .9px, 0);
    }
}

@keyframes navCarRoll {
    from {
        rotate: -.55deg;
    }

    to {
        rotate: .7deg;
    }
}

/* The artwork itself: never scaled, never blurred, never recoloured. */
.nav-car-icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 97px;
    height: 46px;
}

/* Speed smear. A blurred copy of the same asset sitting a few px back
   along the direction of travel, under the sharp one -- so the motion
   blur trails the jeep without the jeep itself ever being blurred. */
.nav-car-ghost {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 97px;
    height: 46px;
    opacity: .2;
    filter: blur(5px);
    transform: translate3d(-9px, 0, 0) scaleX(1.06);
}

/* Dust thrown off the rear wheel. Anchored to the wheel (29px in from
   the sprite's left edge, 44px down to the tyre contact patch) and
   carried along by .nav-car-track, then animated BACKWARDS by exactly
   the distance the jeep covers in one puff lifetime: 203px/s * .65s =
   132px. The two cancel, so each puff hangs at the spot on the road
   where it was thrown while the jeep pulls away from it. Because the
   puffs live inside the track, the track's own opacity fade takes the
   dust with it -- otherwise the trail would outlive the jeep and hang
   in mid-air beside the pill after it had gone. */
.nav-car-trail {
    position: absolute;
    left: 29px;
    top: 44px;
    width: 0;
    height: 0;
}

.nav-car-trail span {
    --size: 22px;
    --rise: -14px;
    --tint: 52, 54, 60;
    /* How far back a puff drifts over its life = whatever the jeep
       covers in that time, so the two cancel and it hangs on the road.
       Per-instance, because the desktop and compact runs travel
       different distances (the compact one overrides it below).
       It MUST be declared here: navCarDust builds its whole transform
       out of var(--drift), and an undefined custom property makes the
       entire transform invalid -- not just that one axis. The puffs
       then have no transform at all, so every one of them sits on the
       rear wheel at once and the trail collapses into a single dark
       blob that never moves. */
    --drift: -132px;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size);
    height: var(--size);
    margin-top: calc(var(--size) / -2);
    margin-left: calc(var(--size) / -2);
    /* A radial fade, not a flat disc. Each puff triples in size over
       its life, and a solid circle doing that reads as a grey ball
       growing -- blur cannot fix it, because the fill/nothing boundary
       survives. A gradient that reaches zero alpha inside its own box
       has no silhouette to give away. */
    background: radial-gradient(circle at 50% 55%,
            rgba(var(--tint), .72) 0%,
            rgba(var(--tint), .36) 38%,
            rgba(var(--tint), .10) 62%,
            rgba(var(--tint), 0) 78%);
    filter: blur(1.4px);
    opacity: 0;
    will-change: transform, opacity;
    animation: navCarDust .65s linear infinite;
}

@keyframes navCarDust {
    0% {
        transform: translate3d(0, 0, 0) scale(.3);
        opacity: 0;
    }

    12% {
        transform: translate3d(calc(var(--drift) * .12), -2px, 0) scale(.95);
        opacity: .62;
    }

    100% {
        transform: translate3d(var(--drift), var(--rise), 0) scale(2.6);
        opacity: 0;
    }
}

/* Negative delays so every puff is already mid-flight on the first
   frame -- a positive stagger would fire them all at once on load and
   then settle, which is visible as a puff of smoke on page load. */
.nav-car-trail span:nth-child(1)  { --size: 18px; --rise: -12px; --tint: 94, 74, 60; animation-delay: 0s; }
.nav-car-trail span:nth-child(2)  { --size: 22px; --rise: -15px; animation-delay: -0.046s; }
.nav-car-trail span:nth-child(3)  { --size: 26px; --rise: -11px; --tint: 94, 74, 60; animation-delay: -0.093s; }
.nav-car-trail span:nth-child(4)  { --size: 20px; --rise: -16px; animation-delay: -0.139s; }
.nav-car-trail span:nth-child(5)  { --size: 24px; --rise: -13px; --tint: 94, 74, 60; animation-delay: -0.186s; }
.nav-car-trail span:nth-child(6)  { --size: 19px; --rise: -17px; animation-delay: -0.232s; }
.nav-car-trail span:nth-child(7)  { --size: 27px; --rise: -12px; --tint: 94, 74, 60; animation-delay: -0.279s; }
.nav-car-trail span:nth-child(8)  { --size: 21px; --rise: -15px; animation-delay: -0.325s; }
.nav-car-trail span:nth-child(9)  { --size: 25px; --rise: -13px; --tint: 94, 74, 60; animation-delay: -0.371s; }
.nav-car-trail span:nth-child(10) { --size: 18px; --rise: -18px; animation-delay: -0.418s; }
.nav-car-trail span:nth-child(11) { --size: 28px; --rise: -11px; --tint: 94, 74, 60; animation-delay: -0.464s; }
.nav-car-trail span:nth-child(12) { --size: 23px; --rise: -16px; animation-delay: -0.511s; }
.nav-car-trail span:nth-child(13) { --size: 26px; --rise: -14px; --tint: 94, 74, 60; animation-delay: -0.557s; }
.nav-car-trail span:nth-child(14) { --size: 20px; --rise: -17px; animation-delay: -0.604s; }

/* ---- Compact-header (tablet) run ------------------------------------
   Below 1200px .nav-menu collapses to the hamburger, which takes the
   desktop jeep with it (it lives inside .nav-menu) and removes the
   Services pill it was driving at. This twin covers that range instead.

   Only 992px and up, though. The clear space between the logo and the
   header buttons is what decides it, and that gap is 82px at 768px and
   158px at 834px -- a 97px jeep would be wedged between the two with
   nowhere to drive. By 992px it is ~340px, and 531px by 1180px. */
.nav-car-runner--compact {
    display: none;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .nav-car-runner--compact {
        /* Absolute, so it is not a flex item -- .nav-wrap has gap:24px
           and a zero-size child would still push the nav across by it. */
        display: block;
        position: absolute;
        inset: 0;
        /* The base rule pins this to 0x0 (it is only a measuring point
           for the desktop run). An explicit width/height beats `inset`
           on an absolutely positioned box, so without resetting both,
           this stays 0x0 and .nav-car-clip's overflow:hidden erases the
           whole animation. */
        width: auto;
        height: auto;
        pointer-events: none;
    }

    /* The base .nav-car-clip is a 750px box measured off the Services
       anchor; here there is no such anchor, so span the header instead
       and let the fade do the work at both ends. */
    .nav-car-runner--compact .nav-car-clip {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }

    /* Travel: 0 -> 100vw - 560px. The header buttons' left edge sits at
       a steady 100vw - 450px across this whole band, so the jeep's nose
       finishes 13px clear of them. Starting at 0 rather than off-screen
       is deliberate: there is no room to the left of the viewport edge
       here, so a negative start meant the jeep was still being sliced by
       that edge at 90% opacity. From 0 it is fully on screen the whole
       time and finishes fading in over the logo -- the same entrance the
       desktop run makes. Keyframes at 15/40/55% are placed at
       0.2727 / 0.7273 / 1 of that distance, matching their share of the
       0-55% drive, so the speed stays constant while the fade rides on
       top. ~230-300px/s depending on width. */
    .nav-car-runner--compact .nav-car-track {
        animation:
            navCarDriveCompact 5s linear infinite,
            navCarFadeCompact 5s ease-in-out infinite;
    }

    /* travel * (.65s / 2.75s) -- same cancellation as the desktop run,
       just against this run's own distance: travel * (.65s / 2.25s). */
    .nav-car-runner--compact .nav-car-trail span {
        --drift: calc(162px - 28.89vw);
    }
}

@keyframes navCarDriveCompact {
    0% {
        transform: translate3d(0, 0, 0);
    }

    12% {
        transform: translate3d(calc((100vw - 560px) * .2667), 0, 0);
    }

    33% {
        transform: translate3d(calc((100vw - 560px) * .7333), 0, 0);
    }

    45% {
        transform: translate3d(calc(100vw - 560px), 0, 0);
    }

    100% {
        transform: translate3d(calc(100vw - 560px), 0, 0);
    }
}

@keyframes navCarFadeCompact {
    0% {
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    45% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Purely decorative -- skip it outright rather than just freezing the
   final frame, same reasoning as everywhere else motion is opt-out in
   this codebase. */
@media (prefers-reduced-motion: reduce) {
    .nav-car-runner {
        display: none;
    }
}

@media (max-width: 991.98px) {
    /* Compact/mobile headers don't have the horizontal room this needs
       to read as "driving in" rather than just flickering next to the
       button. Below 1200px .nav-menu itself is already display:none
       (see the hamburger breakpoint), so this is a defensive second
       layer rather than the thing actually hiding it day-to-day. */
    .nav-car-runner {
        display: none;
    }
}

/* Sign In button */
.btn-apex-signin {
    background: transparent;
    color: var(--apex-black);
    border: 1.5px solid var(--apex-line);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 9px 20px;
    border-radius: var(--r-pill);
    transition: border-color .18s, background .18s, color .18s;
    white-space: nowrap;
}

.btn-apex-signin:hover {
    border-color: var(--apex-black);
    color: var(--apex-white);
    background: var(--apex-black);
}

/* Logged-in user avatar button */
.nav-user-wrap { position: relative; }
.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--apex-black);
    border: none;
    border-radius: var(--r-pill);
    padding: 5px 16px 5px 5px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    transition: background .18s, transform .15s, box-shadow .15s;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    line-height: 1;
}
.nav-user-btn:hover {
    background: #1a2030;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    color: #fff;
}
.nav-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00d4ff;
    flex-shrink: 0;
}
.nav-user-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1e2738;
    border: 2px solid #00d4ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 800;
    color: #00d4ff;
    flex-shrink: 0;
    letter-spacing: .04em;
}
.nav-user-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-menu a { color: var(--apex-black) !important; }
.nav-user-menu a:hover { color: var(--apex-cyan, #00d4ff) !important; }

/* Larger Book Now button */
.btn-apex-lg {
    padding: 11px 26px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Dropdowns */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 240px;
    background: var(--apex-white);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: 8px;
    border: 1px solid var(--apex-mute);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 0.92rem;
    color: var(--apex-black);
}

.nav-dropdown-menu a:hover {
    background: var(--apex-paper);
    color: var(--apex-cyan-2);
}

/* Mobile menu */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--apex-black);
}

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--apex-black);
    color: var(--apex-white);
    z-index: 2000;
    padding: 24px;
    overflow-y: auto;
}

.mobile-menu.open {
    display: block;
}

.mobile-menu a {
    color: var(--apex-white);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    margin: 0 -4px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    transition: background .15s;
}

.mobile-menu a:active {
    background: rgba(255, 255, 255, 0.06);
}

.mobile-menu a .mm-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.mobile-menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Stuck to the top of .mobile-menu's own scroll area (not the header
       bar) -- negative margin cancels the drawer's 24px padding so the
       sticky element sits flush against the true top of the scrollport,
       then re-adds it as its own padding so the logo/close button keep
       the same spacing they had before. */
    position: sticky;
    top: -24px;
    z-index: 10;
    margin: -24px -24px 24px;
    padding: 24px 24px 16px;
    background: var(--apex-black);
}

/* Bigger, more legible brand mark specifically in the mobile drawer --
   the desktop header's .nav-brand-logo is unaffected. Sized above the
   header bar's own mobile logo (58px, in the @media max-width:768px
   rule up near .nav-brand-logo's definition) so the drawer keeps
   reading as the bigger, showcase version instead of drifting below
   it the way this had been left at a stale 52px. */
.mobile-menu-head .nav-brand-logo {
    height: 64px;
    max-width: 240px;
}

.mobile-menu-section-title {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    margin-top: 24px;
    padding-bottom: 4px;
}

/* This was max-width:1024px, but the full nav-menu (5 links + More +
   Sign in + Book Now) doesn't actually fit the header until ~1200px --
   between 1025px and ~1180px it was clipping "Book Now" off the right
   edge of the viewport instead of collapsing to the hamburger. Widened
   to match where the content genuinely fits. */
@media (max-width: 1200px) {

    .nav-menu,
    .nav-phone {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* .nav-menu normally pushes .nav-cta-group to the right edge via its
       own margin-left:auto — once it's display:none above, that push
       mechanism disappears and Book Now + hamburger just sit next to the
       logo instead of at the right edge. Push them there directly instead. */
    .nav-wrap {
        justify-content: space-between;
    }

    /* Book Now reads a bit small next to the hamburger on phone/tablet —
       bump it up here only, header height (78px) has plenty of room. */
    .nav-cta-group .btn-apex-lg {
        padding: 14px 30px;
        font-size: 1.15rem;
        min-width: 230px;
    }

    /* The hamburger itself must never shrink or get squeezed out. */
    .nav-toggle {
        flex-shrink: 0;
    }

    /* The info strip (phone, address, rating, Careers/Gift Cards/Book Now
       links) has no room to breathe on phone/tablet and just wraps into a
       cramped second row above the hamburger. Everything in it is already
       reachable from the mobile drawer (Resources section) or the drawer's
       own Call button, so it's dropped here rather than left to wrap. */
    .top-strip {
        display: none;
    }
}

/* On phones (not tablets), the 1024px block's 230px min-width above
   leaves no room for the logo + Book Now + hamburger to fit in the same
   row — it was pushing the hamburger toggle off-screen entirely,
   invisible and unreachable, on every phone the reviews/homepage were
   actually tested on (360-430px wide). Shrinking the button's padding
   still isn't enough room on a 360px screen once the logo and hamburger
   are accounted for, and it's redundant here anyway — the drawer this
   hamburger opens has its own full-width Book Now CTA, and the sticky
   mobile-cta-bar at the bottom of every page already covers booking —
   so it's simplest and safest to just not show it below tablet width. */
@media (max-width: 640px) {
    .nav-cta-group .d-lg-none {
        display: none;
    }
}

/* Compact "Services" shortcut for phones — see the header.blade.php
   comment next to it for why it exists. Hidden by default/on
   tablet+desktop (Services is already reachable via the nav dropdown or
   the drawer there); shown only where Book Now just got hidden above. */
.nav-mobile-services-btn {
    display: none;
    position: relative;
    overflow: hidden;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--apex-cyan);
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.16), 0 2px 10px rgba(0, 212, 255, 0.4);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.nav-mobile-services-btn:hover,
.nav-mobile-services-btn:focus-visible {
    background: var(--apex-cyan-2);
    color: var(--apex-white);
    border-color: var(--apex-cyan-2);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.24), 0 2px 12px rgba(0, 212, 255, 0.55);
    transform: translateY(-1px);
}

/* Desktop draws the eye to Services with the jeep runner + a light
   sweep across .nav-services-btn on hover (see that rule further up).
   Touch devices get neither the runner (no room) nor a hover state, so
   the pill would otherwise just sit there -- this reuses the same
   sweep, looped on its own timer instead of hover-triggered, as the
   mobile equivalent of that attention cue. One pass every 1s so it
   reads as a lively, frequent glint. */
.nav-mobile-services-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
    transform: translateX(-130%);
    animation: nav-mobile-services-sweep 1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nav-mobile-services-sweep {
    0% { transform: translateX(-130%); }
    18% { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-mobile-services-btn::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav-mobile-services-btn {
        display: inline-flex;
    }
}

/* Compact further on narrow phones so the icon + "View Services" label
   always stay visible together instead of dropping to icon-only. */
@media (max-width: 400px) {
    .nav-mobile-services-btn {
        padding: 7px 11px;
        gap: 5px;
        font-size: 0.72rem;
    }
}

@media (max-width: 380px) {
    .nav-mobile-services-btn {
        padding: 6px 8px;
        gap: 3px;
        font-size: 0.6rem;
    }

    .nav-mobile-services-btn svg {
        width: 12px;
        height: 12px;
    }
}

/* Tablet: give the compact "All Services" shortcut its own home here
   too (previously phone-only, ≤640px, where it existed to cover the
   gap left when Book Now itself gets hidden below 640px -- tablet
   keeps Book Now visible, so this is purely an added shortcut, not a
   Book Now replacement). Ordered before Book Now via flex order (both
   live in .nav-cta-group, display:flex) so a tablet visitor sees
   Services, then Book Now, then the hamburger -- outlined instead of
   solid-filled at this size so it doesn't visually compete with Book
   Now's own solid cyan pill right next to it. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .nav-mobile-services-btn {
        display: inline-flex;
        order: -1;
        padding: 7px 18px;
        font-size: 1.05rem;
        gap: 7px;
        background: transparent;
        color: var(--apex-cyan);
        /* Matches Book Now's own explicit height right next to it
           (.nav-cta-group .btn-apex-lg in mobile-responsive.css) --
           without it the two buttons size off different mechanisms (one
           pins line-height, this one doesn't) and can drift apart
           depending on the display font's real metrics. */
        height: 44px;
    }

    .nav-mobile-services-btn:hover,
    .nav-mobile-services-btn:focus-visible {
        background: var(--apex-cyan);
        color: var(--apex-black);
        border-color: var(--apex-cyan);
    }

    .nav-mobile-services-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    background: var(--apex-black);
    color: var(--apex-white);
    overflow: hidden;
    padding: clamp(70px, 8vw, 50px) 0 clamp(60px, 8vw, 70px);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 80% 30%, rgba(0, 212, 255, 0.18), transparent 70%),
        radial-gradient(50% 60% at 10% 80%, rgba(255, 176, 0, 0.10), transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 35%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 70%);
    pointer-events: none;
}

.hero .container-apex {
    position: relative;
    z-index: 2;
}

/* When a custom background photo is uploaded, add shadow so the copy stays
   readable and prominent regardless of what's underneath in the image. */
.hero--has-bg .hero-eyebrow,
.hero--has-bg h1,
.hero--has-bg .hero-lead,
.hero--has-bg .hero-trust-item {
    text-shadow: 0 2px 16px rgba(0, 0, 0, .65);
}

.hero--has-bg h1 {
    text-shadow: 0 4px 24px rgba(0, 0, 0, .8);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

/* App page: the fixed 580px .phone-frame is taller than the copy column,
   so align-items:center split the height difference into equal blank
   space above and below the copy, reading as a huge empty gap before the
   breadcrumb. Top-align both columns instead -- the phone naturally runs
   a bit past the copy at the bottom, which is the expected app-showcase
   look. */
body[data-page="app"] .hero-grid {
    align-items: start;
}

@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.hero h1 {
    color: var(--apex-white);
}

.hero h1 .accent {
    background: linear-gradient(90deg, var(--apex-cyan), var(--apex-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    font-size: 1.2rem;
    color: var(--apex-grey-300);
    max-width: 56ch;
    margin-bottom: 32px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--apex-cyan);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hero-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--apex-cyan);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.hero-trust {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-trust-item {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--apex-grey-300);
    font-size: 0.9rem;
}

.hero-trust-item svg {
    color: var(--apex-cyan);
}

@media (max-width: 768px) {
    /* .hero's top padding was clamp(70px, 8vw, 50px) — min(70px) > max(50px),
       so the clamp always resolved to a constant 70px regardless of
       viewport, never actually shrinking on mobile. Combined with every
       stacked element below (eyebrow/lead/cta) keeping its desktop margin
       once the grid collapses to one column, this made the hero read as
       mostly empty space above the fold on a phone. */
    .hero {
        padding: 28px 0 36px;
    }

    .hero-eyebrow {
        margin-bottom: 14px;
    }

    .hero-lead {
        margin-bottom: 18px;
    }

    .hero-cta {
        margin-bottom: 20px;
    }

    .hero-grid {
        gap: 24px;
    }
}

@media (max-width: 480px) {
    /* Business-configured eyebrow text (e.g. "Booking same-day of
       appointments") can be too wide for narrow phones at the desktop
       font-size/letter-spacing, wrapping to 2 lines. Shrink it enough
       to keep it on one line instead. */
    .hero-eyebrow {
        gap: 6px;
        padding: 6px 10px;
        font-size: 10px;
        letter-spacing: 0.06em;
        white-space: nowrap;
        max-width: 100%;
    }

    .hero-eyebrow-dot {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
    }
}

/* Tablet-only: hero-grid has already collapsed to a single column (see
   980px breakpoint above) but the container is still much wider than the
   instant-quote card's 520px cap, so it sat flush left with empty space
   beside it. Centers it for the tablet width band only -- phones below
   this are narrow enough that width:100% already fills the container, and
   desktop/large-tablet-landscape above 980px keeps the two-column grid
   where the card naturally fills its own column. */
@media (min-width: 576px) and (max-width: 980px) {
    .iq-card {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Hero booking card */
.hero-card {
    background: rgba(28, 34, 41, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-dark);
    position: relative;
}

.hero-card h3 {
    color: var(--apex-white);
    margin-bottom: 6px;
}

.hero-card-sub {
    color: var(--apex-grey-300);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.hero-card label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--apex-grey-300);
    margin-bottom: 8px;
}

.hero-card .form-row {
    margin-bottom: 16px;
}

.hero-card select,
.hero-card input {
    width: 100%;
    background: rgba(11, 15, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md);
    padding: 14px 16px;
    color: var(--apex-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: all .2s ease;
}

.hero-card input::placeholder {
    color: var(--apex-grey-500);
}

.hero-card select:focus,
.hero-card input:focus {
    border-color: var(--apex-cyan);
    background: rgba(11, 15, 20, 0.7);
}

.hero-card select option {
    color: var(--apex-black);
}

.hero-card .form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Hero corner badge */
.hero-rating-badge {
    position: absolute;
    top: -16px;
    right: 24px;
    background: var(--apex-amber);
    color: var(--apex-black);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(255, 176, 0, 0.4);
}

/* ---------- Stats strip ---------- */
.stat-strip {
    background: var(--apex-paper);
    border-top: 1px solid var(--apex-mute);
    border-bottom: 1px solid var(--apex-mute);
    padding: 32px 0;
}

.stat-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.stat-item {
    text-align: center;
}

/* JS-appended duplicate of the item set (mobile marquee only) — hidden
   at every width by default; only .stat-strip-marquee reveals it. */
.stat-item-clone {
    display: none;
}

.stat-item .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--apex-black);
    letter-spacing: -0.025em;
    line-height: 1;
}

.stat-item .num .accent {
    color: var(--apex-cyan-2);
}

.stat-item .lbl {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--apex-grey-700);
    margin-top: 8px;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-weight: 500;
}

@media (max-width: 720px) {
    /* Reduced from the desktop 32px — the strip reads as a compact ticker
       on mobile, not a full section with its own breathing room. */
    .stat-strip {
        padding: 14px 0;
        overflow: hidden;
    }

    /* Native horizontal slider on mobile instead of a static 2x2 grid —
       swipeable, snaps one card at a time. Only a fallback for when JS is
       unavailable; see .stat-strip-marquee below for the auto-playing
       version main.js switches on for everyone else. */
    .stat-strip-inner {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding: 4px 4px 6px;
        margin: 0 -4px;
        scrollbar-width: none;
    }

    .stat-strip-inner::-webkit-scrollbar {
        display: none;
    }

    .stat-item {
        flex: 0 0 auto;
        width: 46%;
        min-width: 150px;
        scroll-snap-align: start;
    }

    /* Continuous auto-slide: main.js adds this class on every mobile
       width. The item set is duplicated once (see .stat-item-clone) so a
       straight -50% translate loops forever with no visible jump or
       restart.

       Spacing deliberately moves off the flex `gap` and onto each item's
       own margin here, and the container's horizontal padding/margin go
       to zero. With `gap`, N items carry only N-1 gaps, so the two
       halves of the duplicated set aren't equal widths and a -50%
       translate lands half a gap off — a small but real jump every time
       the loop wraps (measured at 2.5px before this change). Folding the
       spacing into the items makes each half exactly half the total, so
       the wrap is pixel-perfect. */
    .stat-strip-inner.stat-strip-marquee {
        overflow: hidden;
        scroll-snap-type: none;
        width: max-content;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        animation: statStripMarquee var(--stat-strip-marquee-duration, 16s) linear infinite;
    }

    .stat-strip-inner.stat-strip-marquee .stat-item {
        width: auto;
        scroll-snap-align: none;
        margin-right: 28px;
    }

    .stat-strip-inner.stat-strip-marquee .stat-item-clone {
        display: block;
    }

    @keyframes statStripMarquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
}

/* ══════════════════════════════════════════════════════════════
   EXPLORE GALLERY — image grid below stat strip
   ══════════════════════════════════════════════════════════════ */
.explore-gallery-section {
    padding: 24px 0 28px;
    background: var(--apex-white);
}

.explore-gallery-head {
    margin-bottom: 24px;
    text-align: center;
}

.explore-gallery-biz {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    color: var(--apex-black);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.explore-gallery-sub {
    font-size: 0.95rem;
    color: var(--apex-grey-500);
    margin: 0;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 260px 220px 240px;
    gap: 10px;
}

.exp-r1-left {
    grid-column: 1 / 3;
    grid-row: 1;
}

.exp-r1-right {
    grid-column: 3 / 7;
    grid-row: 1;
}

.exp-r2:nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 2;
}

.exp-r2:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2;
}

.exp-r2:nth-child(5) {
    grid-column: 5 / 7;
    grid-row: 2;
}

.exp-r3:nth-child(6) {
    grid-column: 1 / 4;
    grid-row: 3;
}

.exp-r3:nth-child(7) {
    grid-column: 4 / 7;
    grid-row: 3;
}

.explore-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
}

.explore-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
}

.explore-item:hover .explore-img {
    transform: scale(1.04);
}

.explore-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
    border-radius: 14px;
}

.explore-hover-overlay svg {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.explore-item:hover .explore-hover-overlay {
    background: rgba(0, 0, 0, 0.38);
}

.explore-item:hover .explore-hover-overlay svg {
    opacity: 1;
    transform: scale(1);
}

/* Lightbox */
.explore-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.explore-lightbox.active {
    display: flex;
}

.explore-lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 9001;
}

.explore-lb-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.explore-lb-inner {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.explore-lb-placeholder {
    width: 100%;
    height: 520px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explore-lb-caption {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .explore-gallery-section {
        padding: 32px 0 16px;
    }

    .explore-gallery-head {
        margin-bottom: 16px;
    }

    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }

    /* Middle 4 tiles (Paint Correction, Products, Ceramic Coating,
       Headlight Restoration) fall into a normal 2-column flow. */
    .exp-r1-right,
    .exp-r2:nth-child(3),
    .exp-r2:nth-child(4),
    .exp-r2:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
        height: 180px;
    }

    /* "Our Shop" (first tile) and "Interior Detail" (sixth) each break
       onto their own full-width row instead of pairing up with a
       neighbor. */
    .exp-r1-left,
    .exp-r3:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: auto;
        height: 220px;
    }

    /* "Mobile Detailing" (seventh, last) is dropped on mobile — with 7
       tiles total it always lands alone in a half-empty row otherwise. */
    .exp-r3:nth-child(7) {
        display: none;
    }
}

/* ============================================================
   BA MARQUEE SLIDER — horizontal auto-scroll before/after strip
   ============================================================ */
.ba-marquee-section {
    padding: 48px 0 40px;
    background: var(--apex-white);
    overflow: hidden;
}

.ba-marquee-head {
    text-align: center;
    margin-bottom: 48px;
}

.ba-marquee-head .eyebrow {
    justify-content: center;
}

.ba-marquee-head h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
    font-weight: 800;
    color: var(--apex-black);
    margin: 10px 0 12px;
    letter-spacing: -0.02em;
}

.ba-marquee-sub {
    font-size: 0.97rem;
    color: var(--apex-grey-700);
    max-width: 52ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* Outer clip */
.ba-marquee-outer {
    width: 100%;
    overflow: hidden;
}

/* Scrolling track */
@keyframes ba-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.ba-marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: ba-scroll 40s linear infinite;
    will-change: transform;
    padding: 8px 20px 16px;
}

.ba-marquee-track.ba-marquee-reverse {
    animation-direction: reverse;
}

/* Pause on mouse hover — both CSS and JS class */
.ba-marquee-track:hover,
.ba-marquee-track.is-paused {
    animation-play-state: paused;
}

/* Individual card sizing inside the marquee — 2:1 to exactly match
   MergeBeforeAfterPhoto's composited before/after panel (two square
   halves side by side). The old near-square 420x400 made `cover` crop
   roughly half the composite's width away to fill it; matching the
   composite's own aspect ratio means `cover` needs no horizontal crop
   at all, so the full before-and-after picture actually shows. */
.ba-marquee-card {
    width: 640px;
    height: 320px;
    aspect-ratio: unset;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    transition: box-shadow .25s ease, transform .25s ease;
    cursor: default;
    position: relative;
}

.ba-marquee-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

/* Ensure the slider fills the full fixed-height card */
.ba-marquee-card .ba-slider {
    position: absolute;
    inset: 0;
    height: 100%;
}

/* Background images fill every half — including the real cards' merged
   before/after composite. `contain` (tried briefly) let real-world source
   photos of wildly different aspect ratios show up letterboxed and
   inconsistent card to card; `cover` matches every other photo treatment
   on this site (clean, edge-to-edge, no gaps) and is what the AFTER badge
   below is designed around. */
.ba-marquee-card .ba-before,
.ba-marquee-card .ba-after {
    background-size: cover !important;
    background-position: center !important;
}

/* ── Fixed BEFORE / AFTER labels — always at card corners ── */
/* Hide the in-half labels that move with the clip */
.ba-marquee-card .ba-half-label {
    display: none;
}

/* Real cards' background-image is MergeBeforeAfterPhoto's composited
   panel, which carries its own baked-in AFTER sticker (always inside the
   visible cover-cropped region, given the composite and card are always
   the same fixed proportions) — the generic pinned tag below would just
   double up with it, so it's only for the static fallback cards, which
   have no badge of their own. */
.ba-marquee-card.ba-merged-photo::after {
    display: none;
}

/* AFTER label — pinned top-right on the card itself (each card now shows
   only its single result photo, so this is the only corner tag left). */
.ba-marquee-card::after {
    content: "AFTER";
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    pointer-events: none;
}

/* Short label swaps in below 767.98px — matches the breakpoint where
   mobile-responsive.css bumps every .btn-apex to 1.5rem, the point at
   which the full label stopped fitting on one line. Swapping the text
   keeps the button a clean single-line pill instead of wrapping to two
   lines inside its fully-rounded ends (which read as a stretched oval,
   not a real fix). */
.ba-cta-text-short {
    display: none;
}

@media (max-width: 767.98px) {
    .ba-cta-text-full {
        display: none;
    }

    .ba-cta-text-short {
        display: inline;
    }
}

/* 80px/64px top/bottom padding (unconditional at every width otherwise)
   reads as a big dead gap around "Real cars, real results" on tablet --
   the phone-only fix just below (max-width:600px) never reaches this
   range. */
@media (min-width: 601px) and (max-width: 991.98px) {
    .ba-marquee-section {
        padding-top: 44px;
        padding-bottom: 40px;
    }

    .ba-marquee-head {
        margin-bottom: 32px;
    }
}

@media (max-width: 600px) {
    /* 80px of top padding (unconditional at every width otherwise) reads
       as a big dead gap above "Real cars, real results" on phone. */
    .ba-marquee-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .ba-marquee-card {
        width: 320px;
        height: 160px;
    }

    .ba-marquee-head h2 {
        font-size: 1.5rem;
    }

    /* "See all 300+ photos" CTA — extracted-inline.css's unconditional
       36px margin-top plus the section's own (now-reduced) bottom
       padding still read as too much air above/below the button. */
    .ba-marquee-section .ist-7ccbb3a2 {
        margin-top: 18px !important;
        margin-bottom: 4px !important;
    }
}

/* ============================================================
   WHY WE TAKE BEFORE/AFTER PHOTOS
   ============================================================ */
.photo-proof-section {
    position: relative;
    overflow: hidden;
    padding: 0px 0 50px;
    background: var(--apex-white);
}

.photo-proof-section .container-apex {
    max-width: 1640px;
}

.photo-proof-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 50% at 88% 10%, rgba(0, 212, 255, 0.10), transparent 70%),
        radial-gradient(40% 45% at 6% 90%, rgba(255, 176, 0, 0.08), transparent 70%);
    pointer-events: none;
}

/* Flowing connector lines running behind the 4-stage track only —
   visualises the job moving from upload (left) to review (right) */
.proof-flow-lines {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 320px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: -1;
}

.proof-flow-path {
    fill: none;
    stroke: url(#proofFlowGrad);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 9 13;
    opacity: .6;
    filter: drop-shadow(0 1px 2px rgba(11, 15, 20, .12));
    animation: proofFlowDash 9s linear infinite;
}

.proof-flow-path-rev {
    animation-direction: reverse;
    animation-duration: 12s;
}

.proof-flow-dot {
    fill: var(--apex-cyan);
    opacity: .85;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 1px 2px rgba(11, 15, 20, .18));
    animation: proofFlowDotPulse 2.2s ease-in-out infinite;
}

.proof-flow-dot:nth-of-type(odd) {
    fill: var(--apex-amber);
    animation-delay: .6s;
}

@keyframes proofFlowDash {
    to {
        stroke-dashoffset: -220;
    }
}

@keyframes proofFlowDotPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.7);
    }
}

@media (max-width: 1024px) {
    .proof-flow-lines {
        display: none;
    }
}

.photo-proof-head {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.photo-proof-head .eyebrow {
    justify-content: center;
    font-size: 1rem;
}

.photo-proof-head h2 {
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    font-weight: 800;
    color: var(--apex-black);
    margin: 18px 0 18px;
    letter-spacing: -0.02em;
}

.photo-proof-head .ba-marquee-sub {
    font-size: 1.2rem;
    max-width: 640px;
    margin: 0 auto;
}

.proof-track {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
}

.proof-stage {
    flex: 1;
    min-width: 0;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    opacity: 0;
    transform: translateY(36px);
}

.proof-stage.proof-visible {
    animation: scFadeUp 0.6s ease forwards var(--sc-delay, 0s);
}

.proof-stage-wide {
    max-width: 520px;
}

/* ── Image / animation visual card (stages 1, 2 & 4) ── */
.proof-visual {
    position: relative;
    height: 300px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    transition: transform .25s ease, box-shadow .25s ease;
}

.proof-stage:hover .proof-visual {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
}

.proof-visual-photo {
    background-image: var(--proof-img), linear-gradient(135deg, #2b2f33, #14171a);
    background-size: cover, cover;
    background-position: center, center;
}

.proof-visual-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 55%);
    pointer-events: none;
}

/* Stage 1 — capture button + pulse ring, suggesting "tap to upload" */
.proof-capture-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--apex-white);
    color: var(--apex-black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    z-index: 1;
}

.proof-capture-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--apex-white);
    animation: proofCaptureRing 2.4s ease-out infinite;
}

@keyframes proofCaptureRing {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    70% {
        transform: scale(1.9);
        opacity: 0;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* Stage 2 — real photo + live status badge = "work in progress, right now" */
.proof-visual-working {
    overflow: hidden;
}

.proof-live-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 14px;
    border-radius: 999px;
    background: rgba(10, 12, 14, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--apex-white);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.proof-live-badge svg {
    flex: 0 0 auto;
    color: #36d676;
}

/* Standalone pulsing dot, top-right — signals live work happening on the job */
.proof-live-ping {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #36d676;
    box-shadow: 0 0 0 0 rgba(54, 214, 118, .6);
    animation: proofLiveDot 1.6s ease-out infinite;
}

@keyframes proofLiveDot {
    0% {
        box-shadow: 0 0 0 0 rgba(54, 214, 118, .6);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(54, 214, 118, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(54, 214, 118, 0);
    }
}

.proof-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-150%) skewX(-18deg);
    animation: scShine 3.4s ease-in-out infinite;
    pointer-events: none;
}

/* Floating mini-toast — overlaps the bottom edge of the visual card */
.proof-mini-toast {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    background: var(--apex-white);
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .25s ease;
}

.proof-stage:hover .proof-mini-toast {
    transform: translateY(-3px);
}

.proof-mini-toast .proof-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.proof-mini-toast .proof-toast-text strong {
    font-size: .98rem;
}

.proof-mini-toast .proof-toast-text span {
    font-size: .84rem;
}

.proof-mini-toast .proof-toast-dot {
    top: 6px;
    right: 6px;
}

.proof-mini-toast-star .proof-toast-dot {
    background: #ffb000;
    box-shadow: 0 0 0 0 rgba(255, 176, 0, .5);
}

/* Stage 1 — upload-requirement chips, overlaid directly on the photo */
.proof-visual-scrim-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, transparent 90%);
    pointer-events: none;
}

.proof-req-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 44px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.proof-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--apex-white);
    line-height: 1.3;
}

.proof-req-item svg {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 21px;
    height: 21px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(0, 212, 255, .9);
    color: var(--apex-black);
}

/* Stage 4 — cartoon happy-moment illustration with confetti */
.proof-happy {
    background:
        radial-gradient(60% 70% at 30% 20%, rgba(0, 212, 255, .14), transparent 70%),
        radial-gradient(55% 65% at 80% 85%, rgba(255, 176, 0, .14), transparent 70%),
        var(--apex-grey-50, #f6f8fa);
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-happy-face {
    animation: proofHappyBounce 2.6s ease-in-out infinite;
}

@keyframes proofHappyBounce {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-7px) rotate(3deg);
    }
}

.proof-happy-star {
    position: absolute;
    animation: proofStarTwinkle 1.8s ease-in-out infinite;
}

.proof-happy-star-1 {
    top: 18px;
    left: 22px;
    animation-delay: .2s;
}

.proof-happy-star-2 {
    top: 24px;
    right: 26px;
    animation-delay: .8s;
}

@keyframes proofStarTwinkle {

    0%,
    100% {
        opacity: .3;
        transform: scale(.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(15deg);
    }
}

.proof-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.proof-confetti i {
    position: absolute;
    top: -8px;
    width: 5px;
    height: 9px;
    border-radius: 1px;
    opacity: 0;
    animation: proofConfettiFall 3.4s ease-in infinite;
}

.proof-confetti i:nth-child(1) {
    left: 10%;
    background: #00d4ff;
    animation-delay: .1s;
}

.proof-confetti i:nth-child(2) {
    left: 22%;
    background: #ffb000;
    animation-delay: 1.1s;
}

.proof-confetti i:nth-child(3) {
    left: 36%;
    background: #2bd576;
    animation-delay: .5s;
}

.proof-confetti i:nth-child(4) {
    left: 50%;
    background: #00d4ff;
    animation-delay: 1.6s;
}

.proof-confetti i:nth-child(5) {
    left: 62%;
    background: #ffb000;
    animation-delay: .9s;
}

.proof-confetti i:nth-child(6) {
    left: 74%;
    background: #ff8d6b;
    animation-delay: 2s;
}

.proof-confetti i:nth-child(7) {
    left: 86%;
    background: #2bd576;
    animation-delay: 1.4s;
}

.proof-confetti i:nth-child(8) {
    left: 94%;
    background: #00d4ff;
    animation-delay: .3s;
}

@keyframes proofConfettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    100% {
        transform: translateY(150px) rotate(280deg);
        opacity: 0;
    }
}

.proof-toast-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--apex-cyan-dim, rgba(0, 212, 255, .12));
    color: var(--apex-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-toast-icon-star {
    background: rgba(255, 176, 0, .14);
    color: #ffb000;
}

.proof-toast-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.proof-toast-text strong {
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--apex-black);
    line-height: 1.25;
}

.proof-toast-text span {
    font-size: .9rem;
    color: var(--apex-grey-700);
    line-height: 1.35;
}

.proof-toast-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bd576;
    box-shadow: 0 0 0 0 rgba(43, 213, 118, .55);
    animation: proofPulse 2.2s ease-out infinite;
}

@keyframes proofPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(43, 213, 118, .55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(43, 213, 118, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(43, 213, 118, 0);
    }
}

/* ── Mini before/after comparison visual (auto-sliding demo) ── */
.proof-compare {
    position: relative;
    height: 300px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    transition: box-shadow .25s ease;
}

.proof-stage-wide:hover .proof-compare {
    box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
}

.proof-compare-after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.proof-compare-before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    clip-path: inset(0 36% 0 0);
    animation: proofSlide 5.5s ease-in-out infinite;
}

.proof-stage-wide:hover .proof-compare-before,
.proof-stage-wide:hover .proof-compare-handle {
    animation-play-state: paused;
}

@keyframes proofSlide {

    0%,
    8% {
        clip-path: inset(0 36% 0 0);
    }

    50% {
        clip-path: inset(0 68% 0 0);
    }

    92%,
    100% {
        clip-path: inset(0 36% 0 0);
    }
}

.proof-compare-before span,
.proof-compare-after span {
    position: absolute;
    bottom: 12px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apex-white);
    background: rgba(0, 0, 0, .5);
    padding: 4px 10px;
    border-radius: 7px;
    backdrop-filter: blur(3px);
    white-space: nowrap;
}

.proof-compare-before span {
    left: 12px;
}

.proof-compare-after span {
    right: 12px;
}

.proof-compare-handle {
    position: absolute;
    top: 50%;
    left: 64%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--apex-white);
    color: var(--apex-black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    z-index: 2;
    animation: proofHandleSlide 5.5s ease-in-out infinite;
}

@keyframes proofHandleSlide {

    0%,
    8% {
        left: 64%;
    }

    50% {
        left: 32%;
    }

    92%,
    100% {
        left: 64%;
    }
}

.proof-compare-handle::before {
    content: "";
    position: absolute;
    top: -65px;
    bottom: -65px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(255, 255, 255, .85);
    z-index: -1;
}

/* ── Stage label tag ── */
.proof-stage-tag {
    text-align: center;
    font-size: 1.15rem;
    color: var(--apex-grey-700);
    font-weight: 600;
}

.proof-stage-tag b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--apex-black);
    color: var(--apex-white);
    font-size: .94rem;
    font-weight: 800;
    margin-right: 9px;
    transition: background .25s ease, transform .25s ease;
}

.proof-stage:hover .proof-stage-tag b {
    background: var(--apex-cyan);
    transform: scale(1.12);
}

/* ── Connector arrows ── */
.proof-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 150px;
    color: var(--apex-grey-300, #d8dde2);
    margin-top: 0;
    opacity: 0;
}

.proof-link.proof-visible {
    animation: scFadeUp 0.5s ease forwards var(--sc-delay, 0s);
}

.proof-link svg polyline {
    animation: proofArrowNudge 1.8s ease-in-out infinite;
}

@keyframes proofArrowNudge {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}

@media (max-width: 1024px) {
    .photo-proof-section {
        /* Was 88px/110px — considerably MORE than the desktop base
           (0px/50px), the opposite of what a mobile override should do. */
        padding: 48px 0 56px;
    }

    .proof-track {
        flex-wrap: wrap;
        justify-content: center;
        gap: 36px 24px;
    }

    .proof-stage,
    .proof-stage-wide {
        flex: 1 1 calc(50% - 24px);
        max-width: 360px;
    }

    .proof-link {
        display: none;
    }
}

@media (max-width: 600px) {
    .photo-proof-section {
        /* Was 64px/80px, same issue as the 1024px breakpoint above. */
        padding: 32px 0 40px;
    }

    .proof-track {
        gap: 28px;
    }

    .proof-stage,
    .proof-stage-wide {
        flex: 1 1 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .proof-visual,
    .proof-compare {
        height: 260px;
    }
}

/* ============================================================
   GOOGLE REVIEWS SLIDER
   ============================================================ */
.gr-section {
    padding: 48px 0;
    background: var(--apex-ink);
    border-top: none;
}

.gr-inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: center;
}

/* ── Left: rating summary ── */
.gr-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.gr-avatar-wrap {
    margin-bottom: 6px;
}

.gr-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--apex-line);
}

.gr-biz-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--apex-white);
    line-height: 1.2;
}

.gr-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.gr-score {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1;
}

.gr-stars {
    display: flex;
    gap: 2px;
}

.gr-count {
    font-size: .85rem;
    color: var(--apex-grey-300);
    margin: 0;
}

.gr-powered {
    font-size: .82rem;
    color: var(--apex-grey-500);
    margin: 0;
}

.gr-google-text {
    font-weight: 700;
    letter-spacing: -.02em;
}

.gr-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background .2s, transform .2s;
    white-space: nowrap;
}

.gr-review-btn:hover {
    background: var(--apex-cyan-2);
    transform: translateY(-2px);
    color: var(--apex-white);
}

/* ── Right: Swiper carousel ── */
.gr-carousel-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.gr-slider-container {
    position: relative;
    padding: 0 48px;
}

.grSwiper {
    overflow: hidden;
}

.grSwiper .swiper-slide {
    height: auto;
}

/* Card */
.gr-card {
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    border-radius: 16px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    height: 100%;
    min-height: 215px;
    transition: transform .3s, box-shadow .3s;
}

.gr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.gr-card-stars {
    display: flex;
    gap: 2px;
}

.gr-card-text {
    font-size: .93rem;
    color: var(--apex-grey-300);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.gr-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--apex-line);
}

.gr-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.gr-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    color: var(--apex-white);
}

.gr-card-sub {
    font-size: .78rem;
    color: var(--apex-grey-500);
}

/* Nav arrows */
.gr-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    color: var(--apex-white);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    transition: background .2s, border-color .2s, transform .2s;
}

.gr-nav:hover {
    background: var(--apex-cyan);
    border-color: var(--apex-cyan);
    color: var(--apex-black);
    transform: translateY(calc(-50% - 2px));
}

.gr-prev {
    left: 0;
}

.gr-next {
    right: 0;
}

/* Swiper pagination dots */
.gr-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
}

.gr-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--apex-line);
    opacity: 1;
    border-radius: 50%;
    transition: background .2s, transform .2s;
}

.gr-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--apex-cyan);
    transform: scale(1.3);
}

/* Responsive */
@media (max-width: 900px) {
    .gr-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gr-summary {
        align-items: center;
        text-align: center;
    }

    /* 80px of top+bottom padding (unconditional at every width otherwise)
       is sized for the two-column desktop layout — once it stacks to a
       single column here, that much air above/below reads as a big dead
       gap on phone. */
    .gr-section {
        padding: 40px 0;
    }
}

@media (max-width: 576px) {
    /* The rating summary already spans the full container width once
       .gr-inner stacks to one column above, but centered short lines of
       text inside that wide band still look sparse — bumping these up a
       little makes the block feel like it's actually using the width
       rather than floating in the middle of it. */
    .gr-avatar {
        width: 84px;
        height: 84px;
    }

    .gr-biz-name {
        font-size: 1.2rem;
    }

    .gr-score {
        font-size: 1.7rem;
    }

    .gr-stars svg {
        width: 22px;
        height: 22px;
    }

    /* .gr-nav's 40px prev/next circles are absolutely positioned at the
       very left/right edge of this padding, but a 40px-tall circle
       centered in a ~400px-tall card leaves nearly all of that side
       column looking like unused dark space for the rest of the card's
       height. Touch swipe + the pagination dots already navigate this
       slider without them, so they're dropped on phone instead, and the
       card gets to use that width back. */
    .gr-slider-container {
        padding: 0;
    }

    .gr-nav {
        display: none;
    }
}

/* ============================================================
   SAME-DAY / EMERGENCY BOOKING SECTION
   ============================================================ */
.sd-section {
    padding: 56px 0;
    background: var(--apex-ink);
    border-top: 1px solid var(--apex-line);
    border-bottom: 1px solid var(--apex-line);
}

.sd-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.sd-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--apex-amber);
    box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.55);
    animation: sdPulse 1.6s ease-out infinite;
}

@keyframes sdPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.55);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 176, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 176, 0, 0);
    }
}

.sd-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.18;
    color: var(--apex-white);
    margin-bottom: 18px;
}

.sd-heading .accent-amber {
    color: var(--apex-amber);
}

.sd-sub {
    font-size: 16px;
    line-height: 1.65;
    color: var(--apex-grey-300);
    max-width: 520px;
    margin-bottom: 28px;
}

.sd-points {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-points li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sd-point-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sd-point-icon--green {
    background: rgba(31, 193, 107, 0.12);
    color: var(--apex-green);
}

.sd-point-icon--amber {
    background: rgba(255, 176, 0, 0.12);
    color: var(--apex-amber);
}

.sd-points strong {
    display: block;
    font-size: 15px;
    color: var(--apex-white);
    font-weight: 600;
}

.sd-points span {
    display: block;
    font-size: 13.5px;
    color: var(--apex-grey-500);
    margin-top: 2px;
    text-align: center;
}

.sd-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ── Right: live "today" card ── */
.sd-visual {
    position: relative;
}

.sd-today-card {
    background: var(--apex-surface);
    border: 1px solid var(--apex-line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.sd-today-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.sd-today-clock {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.1);
    color: var(--apex-cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sd-today-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--apex-white);
}

.sd-today-date {
    font-size: 12.5px;
    color: var(--apex-grey-500);
}

.sd-today-badge {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--apex-green);
    background: rgba(31, 193, 107, 0.12);
    border: 1px solid rgba(31, 193, 107, 0.3);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.sd-today-badge--off {
    color: var(--apex-grey-500);
    background: rgba(138, 147, 159, 0.12);
    border-color: rgba(138, 147, 159, 0.3);
}

.sd-slots-bar-wrap {
    margin-bottom: 20px;
}

.sd-slots-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--apex-grey-300);
    margin-bottom: 8px;
}

.sd-slots-bar-pct {
    color: var(--apex-grey-500);
}

.sd-slots-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.sd-slots-bar-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--apex-amber-2), var(--apex-amber));
    transition: width 0.6s ease;
    overflow: hidden;
}

.sd-slots-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 70%);
    background-size: 60px 100%;
    animation: sdBarShimmer 1.8s linear infinite;
}

@keyframes sdBarShimmer {
    0% {
        background-position: -80px 0;
    }

    100% {
        background-position: 160px 0;
    }
}

.sd-slots-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.sd-chip {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--apex-grey-300);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--apex-line);
    border-radius: 999px;
    padding: 6px 13px;
}

.sd-chip--first {
    color: var(--apex-black);
    background: var(--apex-cyan);
    border-color: var(--apex-cyan);
}

.sd-chip--muted {
    color: var(--apex-grey-500);
}

.sd-today-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--apex-cyan);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: var(--r-md);
    padding: 12px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.sd-today-cta:hover {
    background: rgba(0, 212, 255, 0.08);
}

.sd-float-badge {
    position: absolute;
    top: -16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--apex-amber);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 999px;
    padding: 8px 14px;
    animation: sdBadgeBlink 1.8s ease-in-out infinite;
}

.sd-float-badge svg {
    animation: sdBoltBlink 1.8s ease-in-out infinite;
}

@keyframes sdBadgeBlink {

    0%,
    100% {
        box-shadow: 0 10px 24px -8px rgba(255, 176, 0, 0.5);
        opacity: 1;
    }

    50% {
        box-shadow: 0 10px 30px -4px rgba(255, 176, 0, 0.9);
        opacity: 0.82;
    }
}

@keyframes sdBoltBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (max-width: 991px) {
    .sd-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sd-float-badge {
        top: -14px;
        right: 12px;
    }
}

/* Tablet: 88px section padding plus every internal margin (heading,
   sub, points list, today-card padding) still at desktop size read as
   a lot of dead air, on top of the 991px block above already
   collapsing .sd-grid to one column. Tightened independently of the
   phone block below (576-991px, matching its 575px upper bound with no
   gap/overlap) since phone also hides .sd-cta-row entirely, which
   tablet keeps. (Cut a second time after the first pass -- 44px/28px
   still read as too much on a real device.) */
@media (min-width: 576px) and (max-width: 991px) {
    .sd-section {
        padding: 28px 0;
    }

    .sd-grid {
        gap: 20px;
    }

    .sd-heading {
        margin-bottom: 8px;
    }

    .sd-sub {
        margin-bottom: 14px;
    }

    .sd-points {
        margin-bottom: 14px;
        gap: 10px;
    }

    .sd-today-card {
        padding: 16px;
    }

    .sd-today-head {
        margin-bottom: 12px;
    }

    /* The copy column's own "Book a Same-Day Slot" button (.sd-cta-row,
       kept visible on tablet) already covers booking from this section --
       this card's "Grab the next slot" is a redundant second CTA here.
       When both booking modes are enabled, book-btn.blade.php renders
       this as a <button> inside a .bbd-wrap dropdown container instead
       of a plain link -- hiding just the button left .bbd-wrap itself
       (inline-flex, sitting in .sd-today-card's normal block flow) as
       an empty inline-level box that still reserved a full line-height
       of phantom space, so both need hiding. */
    .sd-today-cta,
    .sd-today-card .bbd-wrap {
        display: none;
    }

    /* .sd-slots-chips' 22px margin-bottom exists to space the time
       chips from .sd-today-cta above -- with that button hidden, the
       chips are the card's last visible element and that margin just
       reads as excess air before the card's own bottom padding. */
    .sd-slots-chips {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .sd-section {
        padding: 32px 0 16px;
    }

    .sd-today-card {
        padding: 22px;
    }

    /* The mobile sticky CTA bar (includes/mobile-cta.blade.php) already
       covers booking on every page, making this section's own "Book a
       Same-Day Slot" button a second full-width CTA stacked directly
       above the same-day availability card on phone. */
    .sd-cta-row {
        display: none;
    }

    /* .sd-points' 32px margin-bottom exists to space it from .sd-cta-row,
       which is hidden above -- otherwise it just stacks with .sd-grid's
       own 40px row gap before the "today" card. */
    .sd-points {
        margin-bottom: 0;
    }
}

/* ============================================================
   GIFT CARD PROMO SECTION
   ============================================================ */
.gc-promo-section {
    padding: 56px 0;
    background: var(--apex-black);
    overflow: hidden;
}

.gc-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* ── Left: copy ── */
.gc-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 12px 0 18px;
}

.gc-sub {
    font-size: 1rem;
    color: var(--apex-grey-300);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 480px;
}

.gc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gc-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.gc-feat-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 212, 255, .1);
    border: 1px solid rgba(0, 212, 255, .25);
    color: var(--apex-cyan);
    display: grid;
    place-items: center;
    margin-top: 2px;
}

.gc-features li strong {
    display: block;
    color: var(--apex-white);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.gc-features li span {
    font-size: .85rem;
    color: var(--apex-grey-500);
    line-height: 1.5;
}

.gc-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Right: card visual ── */
.gc-promo-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

/* Floating animation for the entire stack */
@keyframes gc-stack-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Shine sweep animation */
@keyframes gc-shine-sweep {
    0% {
        transform: translateX(-120%) skewX(-15deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(220%) skewX(-15deg);
        opacity: 0;
    }
}

/* Badge gentle pulse */
@keyframes gc-badge-pulse {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    }

    50% {
        box-shadow: 0 8px 28px rgba(0, 212, 255, .22), 0 0 0 1px rgba(0, 212, 255, .18);
    }
}

/* Card size lives in custom properties on the stack -- everything else
   (stack footprint, card faces, chip position) derives from these via
   calc(), so bumping --gc-card-w/--gc-card-h at any breakpoint (or here)
   auto-adjusts the whole stack instead of needing hand-tuned numbers
   re-balanced at every size. */
.gc-card-stack {
    --gc-card-w: 430px;
    --gc-card-h: 270px;
    --gc-card-pad-y: 32px;
    --gc-card-pad-x: 34px;
    --gc-front-top: 68px;
    --gc-back-top: 44px;
    --gc-back-left: 38px;
    --gc-back-offset-y: 10px;
    --gc-bottom-buffer: 34px;

    position: relative;
    width: calc(var(--gc-card-w) + var(--gc-back-left) + 12px);
    height: calc(var(--gc-front-top) + var(--gc-card-h) + var(--gc-bottom-buffer));
    overflow: visible;
    animation: gc-stack-float 5s ease-in-out infinite;
}

/* Mock gift card base */
.gc-mock-card {
    position: absolute;
    width: var(--gc-card-w);
    height: var(--gc-card-h);
    border-radius: 22px;
    padding: var(--gc-card-pad-y) var(--gc-card-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.gc-mock-card--back {
    background: linear-gradient(135deg, #1c2a38 0%, #0f1a24 100%);
    border: 1.5px solid var(--apex-line);
    top: var(--gc-back-top);
    left: var(--gc-back-left);
    transform: rotate(-6deg) translateY(var(--gc-back-offset-y));
    z-index: 1;
    opacity: .8;
}

.gc-mock-card--front {
    background: linear-gradient(135deg, #0b1e2e 0%, #051118 60%, #091a24 100%);
    border: 1.5px solid rgba(0, 212, 255, .35);
    top: var(--gc-front-top);
    left: 0;
    z-index: 2;
    box-shadow: 0 28px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 212, 255, .12);
}

/* Holographic shine sweep */
.gc-mock-card-shine {
    position: absolute;
    inset: 0;
    width: 60%;
    background: linear-gradient(125deg,
            transparent 20%,
            rgba(0, 212, 255, .22) 50%,
            transparent 80%);
    pointer-events: none;
    animation: gc-shine-sweep 6s ease-in-out infinite 1s;
}

.gc-mock-card-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apex-white);
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.gc-mock-card-brand small {
    font-size: .62rem;
    letter-spacing: .2em;
    color: var(--apex-grey-500);
    font-weight: 500;
}

.gc-mock-card-chip {
    align-self: flex-end;
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    padding: 4px 14px;
    border-radius: 5px;
    position: absolute;
    top: var(--gc-card-pad-y);
    right: var(--gc-card-pad-x);
}

.gc-mock-card-amount {
    font-family: var(--font-display);
    font-weight: 800;
    /* Scales directly off the card's own width so a bigger --gc-card-w
       (set per breakpoint on .gc-card-stack) grows the number with it
       instead of needing a separately-tuned font-size at each size. */
    font-size: calc(var(--gc-card-w) * 0.1414);
    letter-spacing: -.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--apex-cyan), var(--apex-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gc-mock-card-label {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apex-grey-500);
    margin-top: -4px;
}

.gc-mock-card-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .8rem;
    color: var(--apex-grey-500);
    letter-spacing: .04em;
}

/* Floating badges */
.gc-floating-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    border-radius: 40px;
    padding: 10px 20px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--apex-white);
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.gc-floating-badge svg {
    color: var(--apex-cyan);
    flex-shrink: 0;
}

.gc-badge-tl {
    top: -40px;
    right: -100px;
    z-index: 10;
    animation: gc-badge-pulse 4s ease-in-out infinite;
}

.gc-badge-br {
    bottom: -40px;
    left: -85px;
    z-index: 10;
    animation: gc-badge-pulse 4s ease-in-out infinite 2s;
}

/* Responsive
   Each breakpoint only sets the --gc-card-* custom properties -- stack
   footprint, card padding, chip position and the amount's font-size all
   derive from these (see .gc-card-stack/.gc-mock-card/.gc-mock-card-amount
   above), so the card and its container always match up exactly instead
   of drifting out of sync the way separately hand-tuned width/height
   pairs previously did (that mismatch was the leftover empty space around
   the card on mobile). */
@media (max-width: 900px) {
    .gc-promo-grid {
        grid-template-columns: 1fr;
        /* 0, not 40px: once .gc-promo-copy is flattened below, this gap
           would land between every one of its children (eyebrow, heading,
           description, features, CTA) instead of just where a block-level
           gap belongs, stacking on top of each element's own margin and
           bloating every bit of spacing in the section. Each junction's
           spacing comes entirely from the elements' own margins instead. */
        gap: 0;
    }

    /* Stacked, .gc-promo-copy and .gc-promo-visual are two whole blocks
       in DOM order, so the card visual lands after the entire copy
       block (heading, description, features, CTA) instead of right
       after the description. Drop .gc-promo-copy as a box so its own
       children become direct grid items alongside the visual, then
       order them so the card sits right after the description. */
    .gc-promo-copy {
        display: contents;
    }

    .gc-promo-copy>.eyebrow {
        order: 1;
    }

    .gc-heading {
        order: 2;
    }

    .gc-sub {
        order: 3;
        margin-bottom: 20px;
    }

    .gc-promo-visual {
        order: 4;
        margin-bottom: 20px;
    }

    .gc-features {
        order: 5;
    }

    .gc-cta-row {
        order: 6;
    }

    .gc-card-stack {
        --gc-card-w: clamp(260px, 78vw, 400px);
        --gc-card-h: calc(var(--gc-card-w) * 0.628);
        --gc-card-pad-y: clamp(16px, 4%, 26px);
        --gc-card-pad-x: clamp(18px, 4.5%, 28px);
        --gc-front-top: 44px;
        --gc-back-top: 28px;
        --gc-back-left: 26px;
        --gc-back-offset-y: 7px;
        --gc-bottom-buffer: 22px;
    }
}

/* 96px of top/bottom padding (unconditional at every width otherwise)
   reads as a lot of dead air around the gift card promo on tablet --
   the phone-only fix just below (max-width:540px) never reaches this
   range. */
@media (min-width: 541px) and (max-width: 991.98px) {
    .gc-promo-section {
        padding: 44px 0;
    }
}

@media (max-width: 540px) {
    .gc-promo-section {
        padding: 32px 0;
    }

    .gc-promo-visual {
        padding: 16px 0;
    }

    .gc-card-stack {
        --gc-card-w: clamp(220px, 82vw, 300px);
        --gc-card-pad-y: clamp(14px, 4%, 20px);
        --gc-card-pad-x: clamp(16px, 4.5%, 22px);
        --gc-front-top: 34px;
        --gc-back-top: 20px;
        --gc-back-left: 20px;
        --gc-back-offset-y: 5px;
        --gc-bottom-buffer: 16px;
    }

    .gc-badge-tl,
    .gc-badge-br {
        display: none;
    }
}

/* mobile-responsive.css forces every .btn-apex to width:100% + 1.5rem font
   below 767.98px, including .gc-cta-row's two buttons -- deliberate there
   for CTAs whose labels are uneven lengths (a real full-width stack reads
   cleaner than organic wrap), but "Buy a gift card" / "Amount Check" are
   close enough in length that forcing both to 100% just produces two
   oversized, oval-shaped buttons. Size to content instead, still stacked
   (352px isn't wide enough at 1.5rem for them side by side without
   wrapping mid-word). Font size is untouched -- only width/padding change. */
@media (max-width: 767.98px) {
    .gc-cta-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .gc-cta-row .btn-apex {
        width: auto;
        padding: 13px 26px;
    }
}

/* ---------- Services section bg ---------- */
.svc-section {
    background: linear-gradient(160deg, #eef2f8 0%, #f3f6fb 50%, #f7f9fc 100%);
    position: relative;
}

.svc-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* ---------- Service stats grid ---------- */
.sc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 36px 0 52px;
    position: relative;
    z-index: 1;
}

.sc-stat-card {
    background: var(--apex-black);
    border-radius: 20px;
    padding: 28px 18px 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform 0.3s cubic-bezier(.22, .68, 0, 1.2), box-shadow 0.3s, border-color 0.3s;
}

/* top accent line */
.sc-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: var(--sc-accent, var(--apex-cyan));
    border-radius: 0 0 6px 6px;
    opacity: 0.9;
    transition: left 0.3s, right 0.3s, opacity 0.3s;
}

/* ambient glow blob behind icon */
.sc-stat-card::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 90px;
    background: radial-gradient(ellipse at 50% 0%, var(--sc-accent, var(--apex-cyan)), transparent 72%);
    opacity: 0.1;
    pointer-events: none;
    transition: opacity 0.3s;
}

.sc-stat-card:hover {
    transform: translateY(-7px) scale(1.02);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 0 1.5px var(--sc-accent, var(--apex-cyan));
    border-color: var(--sc-accent, var(--apex-cyan));
}

.sc-stat-card:hover::before {
    left: 8%;
    right: 8%;
    opacity: 1;
}

.sc-stat-card:hover::after {
    opacity: 0.18;
}

.sc-stat-card-icon {
    margin-bottom: 4px;
    opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
}

.sc-stat-card:hover .sc-stat-card-icon {
    opacity: 1;
    transform: scale(1.1);
}

.sc-stat-card-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--sc-accent, var(--apex-cyan));
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 0 28px var(--sc-accent, var(--apex-cyan));
}

.sc-stat-card-lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---------- Bento Service Grid ---------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

/* Default card: span 4 (3-across) */
.service-card {
    grid-column: span 4;
}

/* Bento spanning rules */
.service-card:nth-child(1) {
    grid-column: span 7;
}

/* hero — big left */
.service-card:nth-child(2) {
    grid-column: span 5;
}

/* tall companion */
.service-card:nth-child(3) {
    grid-column: span 4;
}

/* row 2 */
.service-card:nth-child(4) {
    grid-column: span 4;
}

.service-card:nth-child(5) {
    grid-column: span 4;
}

.service-card:nth-child(6) {
    grid-column: span 12;
}

/* elite — full width */

/* ── Keyframes ──────────────────────────────────── */
@keyframes scFadeUp {
    from {
        opacity: 0;
        transform: translateY(36px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scShine {
    0% {
        transform: translateX(-120%) skewX(-18deg);
    }

    100% {
        transform: translateX(320%) skewX(-18deg);
    }
}

@keyframes scBackIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ctaPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.45);
    }

    60% {
        box-shadow: 0 0 0 10px rgba(0, 212, 255, 0);
    }
}

/* ── Service Cards — Base ───────────────────────────── */
.service-card {
    border-radius: 20px;
    overflow: visible;
    position: relative;
    min-height: 340px;
    opacity: 0;
    transform: translateY(36px);
}

.service-card.sc-visible {
    animation: scFadeUp 0.6s ease forwards var(--sc-delay, 0s);
}

/* ── Flip Cards (standard cards 2-5, not hero/elite) ───── */
.service-card:not(.sc-hero):not(.sc-elite) {
    perspective: 1200px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.sc-card-inner {
    position: relative;
    width: 100%;
    min-height: 340px;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-card-inner,
.service-card:not(.sc-hero):not(.sc-elite).sc-flipped .sc-card-inner {
    transform: rotateY(180deg);
}

/* ── Card Front ── */
.sc-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.06);
}

.sc-front-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.55s ease;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-front-img {
    transform: scale(1.06);
}

.sc-front-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(5, 8, 14, 0.94) 0%,
            rgba(5, 8, 14, 0.25) 55%,
            rgba(5, 8, 14, 0.05) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 18px 20px;
}

.sc-front-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sc-front-bottom {
    margin-top: auto;
}

.sc-front-bottom h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 7px;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.sc-from-price {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--apex-cyan);
}

/* Card number (top-right ghost text) */
.sc-card-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
    letter-spacing: -0.04em;
    user-select: none;
    transition: color 0.3s;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-card-num {
    color: rgba(255, 255, 255, 0.18);
}

/* Price row on front */
.sc-front-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.sc-flip-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s, transform 0.3s;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-flip-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Shine sweep on card front */
.sc-front::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
    transform: translateX(-120%) skewX(-18deg);
    animation: scShine 4s ease-in-out infinite;
    pointer-events: none;
}

.service-card:nth-child(2) .sc-front::after {
    animation-delay: 0s;
}

.service-card:nth-child(3) .sc-front::after {
    animation-delay: 1s;
}

.service-card:nth-child(4) .sc-front::after {
    animation-delay: 2s;
}

.service-card:nth-child(5) .sc-front::after {
    animation-delay: 3s;
}

/* ── Card Back ── */
.sc-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    transform: rotateY(180deg);
    background: linear-gradient(148deg, #0b1016 0%, #0f1820 55%, #0b1016 100%);
    border: 1.5px solid rgba(0, 212, 255, 0.18);
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.08);
}

/* Top accent line */
.sc-back::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--apex-cyan) 0%, #60a5fa 70%, transparent 100%);
    z-index: 2;
}

.service-card:nth-child(3) .sc-back {
    border-color: rgba(16, 185, 129, 0.2);
    box-shadow: inset 0 1px 0 rgba(16, 185, 129, 0.08);
}

.service-card:nth-child(3) .sc-back::before {
    background: linear-gradient(90deg, #10b981 0%, #34d399 70%, transparent 100%);
}

.service-card:nth-child(4) .sc-back {
    border-color: rgba(245, 158, 11, 0.2);
    box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.08);
}

.service-card:nth-child(4) .sc-back::before {
    background: linear-gradient(90deg, #f59e0b 0%, #fcd34d 70%, transparent 100%);
}

.service-card:nth-child(5) .sc-back {
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.08);
}

.service-card:nth-child(5) .sc-back::before {
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 70%, transparent 100%);
}

.sc-back-body {
    padding: 22px 24px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Accent glow top-right corner */
.sc-back-body::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.09) 0%, transparent 65%);
    pointer-events: none;
}

.service-card:nth-child(3) .sc-back-body::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, transparent 65%);
}

.service-card:nth-child(4) .sc-back-body::before {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.09) 0%, transparent 65%);
}

.service-card:nth-child(5) .sc-back-body::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.09) 0%, transparent 65%);
}

/* ── Back top: badge + title + desc ── */
.sc-back-head {
    display: flex;
    flex-direction: column;
}

.sc-back-chip {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 99px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--apex-cyan);
    border: 1px solid rgba(0, 212, 255, 0.28);
    margin-bottom: 12px;
}

.service-card:nth-child(3) .sc-back-chip {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.28);
}

.service-card:nth-child(4) .sc-back-chip {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.28);
}

.service-card:nth-child(5) .sc-back-chip {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.28);
}

.sc-back-head h3 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.15;
    background: linear-gradient(130deg, #ffffff 50%, rgba(0, 212, 255, 0.65) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card:nth-child(3) .sc-back-head h3 {
    background: linear-gradient(130deg, #fff 50%, rgba(52, 211, 153, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.service-card:nth-child(4) .sc-back-head h3 {
    background: linear-gradient(130deg, #fff 50%, rgba(252, 211, 77, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.service-card:nth-child(5) .sc-back-head h3 {
    background: linear-gradient(130deg, #fff 50%, rgba(167, 139, 250, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.sc-back-desc {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.55;
    margin: 0;
}

/* ── Includes ── */
.sc-back-includes {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sc-back-includes-lbl {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.22);
}

.sc-back-includes-lbl::before,
.sc-back-includes-lbl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.sc-back-feats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sc-back-feats li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    opacity: 0;
}

.sc-back-feats li::before {
    content: '✓';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--apex-cyan);
    font-size: 0.65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.18);
}

.service-card:nth-child(3) .sc-back-feats li::before {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.18);
}

.service-card:nth-child(4) .sc-back-feats li::before {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.18);
}

.service-card:nth-child(5) .sc-back-feats li::before {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.18);
}

/* Stagger in on flip */
.service-card:not(.sc-hero):not(.sc-elite):hover .sc-back-feats li,
.service-card.sc-flipped .sc-back-feats li {
    animation: scBackIn 0.28s ease forwards;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-back-feats li:nth-child(1),
.service-card.sc-flipped .sc-back-feats li:nth-child(1) {
    animation-delay: 0.35s;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-back-feats li:nth-child(2),
.service-card.sc-flipped .sc-back-feats li:nth-child(2) {
    animation-delay: 0.46s;
}

.service-card:not(.sc-hero):not(.sc-elite):hover .sc-back-feats li:nth-child(3),
.service-card.sc-flipped .sc-back-feats li:nth-child(3) {
    animation-delay: 0.57s;
}

/* ── Footer ── */
.sc-back-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    flex-shrink: 0;
    background: rgba(0, 212, 255, 0.06);
    border-top: 1px solid rgba(0, 212, 255, 0.12);
    position: relative;
    z-index: 1;
}

.service-card:nth-child(3) .sc-back-footer {
    background: rgba(16, 185, 129, 0.06);
    border-top-color: rgba(16, 185, 129, 0.14);
}

.service-card:nth-child(4) .sc-back-footer {
    background: rgba(245, 158, 11, 0.06);
    border-top-color: rgba(245, 158, 11, 0.14);
}

.service-card:nth-child(5) .sc-back-footer {
    background: rgba(139, 92, 246, 0.06);
    border-top-color: rgba(139, 92, 246, 0.14);
}

.sc-back-price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-back-price-lbl {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sc-back-price-val {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--apex-cyan);
    line-height: 1;
    text-shadow: 0 0 24px rgba(0, 212, 255, 0.4);
}

.service-card:nth-child(3) .sc-back-price-val {
    color: #34d399;
    text-shadow: 0 0 24px rgba(52, 211, 153, 0.4);
}

.service-card:nth-child(4) .sc-back-price-val {
    color: #f59e0b;
    text-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
}

.service-card:nth-child(5) .sc-back-price-val {
    color: #a78bfa;
    text-shadow: 0 0 24px rgba(167, 139, 250, 0.4);
}

.sc-back-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 99px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    transition: gap 0.22s, box-shadow 0.22s, background 0.22s, transform 0.22s;
    white-space: nowrap;
}

.sc-back-cta:hover {
    gap: 10px;
    transform: scale(1.04);
    box-shadow: 0 6px 24px rgba(0, 212, 255, 0.45);
    background: #33deff;
    color: var(--apex-black);
}

.service-card:nth-child(3) .sc-back-cta {
    background: #10b981;
    color: #fff;
}

.service-card:nth-child(3) .sc-back-cta:hover {
    background: #34d399;
    box-shadow: 0 6px 24px rgba(52, 211, 153, 0.45);
}

.service-card:nth-child(4) .sc-back-cta {
    background: #f59e0b;
    color: #000;
}

.service-card:nth-child(4) .sc-back-cta:hover {
    background: #fcd34d;
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45);
}

.service-card:nth-child(5) .sc-back-cta {
    background: #8b5cf6;
    color: #fff;
}

.service-card:nth-child(5) .sc-back-cta:hover {
    background: #a78bfa;
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45);
}

/* ── Shared badge (used by hero/elite) ── */
.sc-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(11, 15, 20, 0.72);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.63rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 99px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

/* ── Shared hero/elite price+CTA (reused by those cards) ── */
.sc-body {
    padding: 22px 24px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sc-body h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--apex-black);
    margin-bottom: 6px;
    line-height: 1.2;
}

.sc-desc {
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0;
}

.sc-img-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
}

.sc-img-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .55s ease;
}

.sc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f0f0f0;
    padding: 14px 24px;
    margin-top: 16px;
}

.sc-price-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 2px;
}

.sc-price-value {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--apex-black);
    line-height: 1;
}

.sc-learn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 99px;
    background: var(--apex-black);
    transition: background .2s, gap .2s;
    white-space: nowrap;
}

.sc-learn:hover,
.service-card:hover .sc-learn {
    background: var(--apex-cyan);
    color: var(--apex-black);
    gap: 8px;
}

/* ── Hero Card (1st) ───────────────────────────── */
.service-card.sc-hero {
    flex-direction: row;
    min-height: 400px;
    background: var(--apex-black);
    border-color: rgba(255, 255, 255, 0.08);
}

.service-card.sc-hero:hover {
    border-color: var(--apex-cyan);
    transform: translateY(-4px);
    box-shadow: 0 28px 64px rgba(0, 212, 255, 0.18);
}

.service-card.sc-hero .sc-img-wrap {
    width: 46%;
    height: auto;
    flex-shrink: 0;
}

.service-card.sc-hero .sc-img-inner {
    background-size: cover;
    background-position: center;
}

.service-card.sc-hero .sc-img-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, var(--apex-black));
}

.service-card.sc-hero .sc-body {
    padding: 36px 32px 0;
    justify-content: center;
}

.service-card.sc-hero .sc-badge {
    top: 18px;
    left: 18px;
    background: var(--apex-cyan);
    color: var(--apex-black);
}

.service-card.sc-hero .sc-body h3 {
    font-size: 1.85rem;
    color: #fff;
    margin-bottom: 10px;
}

.service-card.sc-hero .sc-desc {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.88rem;
}

.sc-feat-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-feat-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.sc-feat-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--apex-cyan);
    flex-shrink: 0;
}

.service-card.sc-hero .sc-price-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 32px;
    margin-top: 24px;
}

.service-card.sc-hero .sc-price-label {
    color: rgba(255, 255, 255, 0.4);
}

.service-card.sc-hero .sc-price-value {
    font-size: 2.2rem;
    color: #fff;
}

.service-card.sc-hero .sc-learn {
    background: var(--apex-cyan);
    color: var(--apex-black);
    padding: 12px 24px;
    font-size: 15px;
    animation: ctaPulse 2.6s ease-in-out infinite;
}

.service-card.sc-hero .sc-learn:hover {
    background: #fff;
    animation: none;
    box-shadow: 0 0 0 0 transparent;
}

/* ── Elite Card (6th / last) ─────────────────── */
.service-card.sc-elite {
    flex-direction: row;
    min-height: 280px;
    background: #0d0d12;
    border-color: rgba(245, 158, 11, 0.25);
}

.service-card.sc-elite:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.55);
}

.service-card.sc-elite .sc-img-wrap {
    width: 38%;
    height: auto;
    flex-shrink: 0;
}

.service-card.sc-elite .sc-img-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 50%, #0d0d12 100%);
}

.service-card.sc-elite .sc-badge {
    background: rgba(245, 158, 11, 0.9);
    color: #000;
    top: 18px;
    left: 18px;
}

.service-card.sc-elite .sc-body {
    padding: 32px 36px 0;
    justify-content: center;
}

.service-card.sc-elite .sc-body h3 {
    font-size: 1.7rem;
    color: #fff;
    margin-bottom: 8px;
}

.service-card.sc-elite .sc-desc {
    color: rgba(255, 255, 255, 0.55);
}

.sc-elite-perks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.sc-elite-perk {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 5px 12px;
    border-radius: 99px;
}

.service-card.sc-elite .sc-price-row {
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    padding: 20px 36px;
    margin-top: 24px;
}

.service-card.sc-elite .sc-price-label {
    color: rgba(255, 255, 255, 0.35);
}

.service-card.sc-elite .sc-price-value {
    font-size: 2rem;
    color: #f59e0b;
}

.service-card.sc-elite .sc-learn {
    background: #f59e0b;
    color: #000;
    font-weight: 800;
    padding: 12px 24px;
    font-size: 15px;
}

.service-card.sc-elite .sc-learn:hover {
    background: #fbbf24;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 1100px) {

    .service-card:nth-child(1),
    .service-card:nth-child(2) {
        grid-column: span 6;
    }

    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(5) {
        grid-column: span 4;
    }

    .service-card.sc-hero {
        min-height: 360px;
    }

    .sc-card-inner {
        min-height: 360px;
    }
}

@media (max-width: 860px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .service-card:nth-child(6) {
        grid-column: span 1;
    }

    /* Shorten the mobile scroll: keep the hero (1st), the first two flip
       cards (2nd/3rd), and the elite/last card (6th); hide the middle
       two flip cards (4th/5th). Desktop/tablet above 860px still shows
       all six. */
    .service-grid .service-card:nth-child(4),
    .service-grid .service-card:nth-child(5) {
        display: none;
    }

    /* Flip cards: disable CSS hover flip on touch, use JS .sc-flipped instead */
    .service-card:not(.sc-hero):not(.sc-elite):hover .sc-card-inner {
        transform: none;
    }

    .service-card:not(.sc-hero):not(.sc-elite).sc-flipped .sc-card-inner {
        transform: rotateY(180deg);
    }

    /* Hero / Elite: stack vertically */
    .service-card.sc-hero,
    .service-card.sc-elite {
        flex-direction: column;
        min-height: 0;
    }

    .service-card.sc-hero .sc-img-wrap,
    .service-card.sc-elite .sc-img-wrap {
        width: 100%;
        height: 200px;
    }

    .service-card.sc-hero .sc-img-inner::after,
    .service-card.sc-elite .sc-img-inner::after {
        background: linear-gradient(to bottom, transparent 40%, var(--apex-black) 100%);
    }

    .service-card.sc-hero .sc-body,
    .service-card.sc-elite .sc-body {
        padding: 20px 20px 0;
    }

    .service-card.sc-hero .sc-body h3 {
        font-size: 1.35rem;
    }

    .service-card.sc-hero .sc-price-row,
    .service-card.sc-elite .sc-price-row {
        padding: 14px 20px;
    }

    .service-card.sc-hero .sc-price-value {
        font-size: 1.7rem;
    }

    .service-card.sc-elite .sc-price-value {
        font-size: 1.7rem;
    }

    .service-card.sc-elite .sc-body {
        padding: 20px 20px 0;
    }

    .service-card.sc-elite .sc-body h3 {
        font-size: 1.35rem;
    }

    .sc-card-inner {
        min-height: 300px;
    }

    .sc-flip-hint {
        display: none;
    }
}

@media (max-width: 580px) {
    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .service-card:nth-child(6) {
        grid-column: span 1;
    }

    /* The visible gap above these cards is mostly .section-head's own
       56px margin-bottom (shared by every section site-wide), not
       .sc-stats-grid's own margin — trimmed here, scoped to this
       section only, rather than touching the shared class everywhere. */
    .svc-section .section-head {
        margin-bottom: 28px;
    }

    .sc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 12px 0 18px;
    }

    .sc-stat-card {
        padding: 22px 14px 18px;
        border-radius: 16px;
    }

    .sc-stat-card-num {
        font-size: 1.55rem;
    }

    .sc-front::after {
        display: none;
    }

    /* "See all services" wrapper reuses a shared extracted-inline.css
       class (.ist-af4e4ddd, margin-top: 48px !important) that
       blogs.blade.php also reuses for its own "Load more articles"
       button — scoped to .svc-section specifically so that page is
       unaffected. .svc-section itself only has ~4px of its own bottom
       padding (.section's padding is a near-zero clamp() at mobile
       widths), so without an explicit margin-bottom here the button sat
       right against the section's edge — 20px above it, 4px below —
       instead of looking centered in the dark strip. Matching the 20px
       top margin here balances it. */
    .svc-section .ist-af4e4ddd {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}

/* Same 48px-top/near-0px-bottom asymmetry as the phone fix just above --
   the phone-only media query (max-width:580px) never reaches tablet
   widths, so "See all services" stayed hard against the dark strip's
   bottom edge with a big gap above it there. Scoped separately (rather
   than widening that block) since its other rules -- 1-column grid,
   etc. -- are phone-specific and shouldn't touch tablet's 2-column
   layout (see the 860px block above). */
@media (min-width: 581px) and (max-width: 991.98px) {
    .svc-section .ist-af4e4ddd {
        margin-top: 32px !important;
        /* A few px less than margin-top -- .section's own bottom padding
           (clamp(4px, 1vw, 25px), unlike the top side where section-head/
           stats-grid/service-grid already consume it before the button)
           stacks after this margin, so an equal value here would visibly
           end up larger than the top gap. */
        margin-bottom: 24px !important;
    }
}

/* ── Two Ways Section ───────────────────────────── */
.tww-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

@media (max-width: 780px) {
    .tww-grid {
        grid-template-columns: 1fr;
    }

    /* "Not sure which is right for you? Check our FAQ" — each card
       above already ends in its own Book Now CTA once stacked here, so
       this trailing line just adds a redundant 28px-margin-top gap (plus
       the browser's own default paragraph margin below it) before the
       section ends. Hidden entirely rather than just re-spaced. */
    .ist-4b87e859 {
        display: none;
    }

    /* .section's own bottom padding is a near-4px clamp() at mobile
       widths — fine when the FAQ line above filled the gap on its own,
       but with that line now hidden the last card's rounded bottom edge
       sits almost flush against the next section. .tww-outer-section
       (added in the blade template solely to scope this — .section
       .bg-paper is reused on 20+ other pages) gets a bit of its own
       breathing room back. */
    .tww-outer-section {
        padding-bottom: 32px;
    }
}

/* ── Card shell ── */
.tww-card {
    background: #0b1118;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.22, .68, 0, 1.15);
}

.tww-card:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.12);
    transform: translateY(-8px);
}

.tww-card-featured {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* ── Image header ── */
.tww-card-img {
    height: 230px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.tww-card-img-bg {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    transition: transform .65s cubic-bezier(.22, .68, 0, 1.1);
}

.tww-card:hover .tww-card-img-bg {
    transform: scale(1.08);
}

.tww-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(11, 17, 24, 0.55) 60%,
            rgba(11, 17, 24, 1) 100%);
}

/* Card number pill */
.tww-card-num {
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 2;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 11px;
    border-radius: 99px;
    backdrop-filter: blur(8px);
}

/* Popular badge */
.tww-popular-badge {
    position: absolute;
    top: 0;
    right: 24px;
    z-index: 2;
    background: linear-gradient(135deg, var(--apex-cyan), #38bdf8);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: 0 0 14px 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

/* ── Card body ── */
.tww-card-body {
    position: relative;
    padding: 20px 32px 32px;
    padding-top: 48px;
    /* space for overlapping icon */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Icon — overlaps image/body boundary */
.tww-icon-wrap {
    position: absolute;
    top: -28px;
    left: 30px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #0b1118;
    border: 2px solid rgba(0, 212, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.18);
    transition: border-color .3s, box-shadow .3s, transform .3s;
    z-index: 3;
}

.tww-card:hover .tww-icon-wrap {
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: 0 6px 28px rgba(0, 212, 255, 0.32);
    transform: scale(1.07);
}

/* Title */
.tww-title {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.1;
}

/* Sub */
.tww-sub {
    font-size: 0.97rem;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.6;
    margin: 0 0 18px;
}

/* Accent divider */
.tww-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.55), rgba(0, 212, 255, 0.1), transparent);
    margin-bottom: 18px;
}

/* Feature list */
.tww-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.tww-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.tww-list svg {
    flex-shrink: 0;
}

/* Stats row */
.tww-stats {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.28);
}

.tww-stat {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    transition: background .25s;
}

.tww-stat:last-child {
    border-right: none;
}

.tww-stat:hover {
    background: rgba(0, 212, 255, 0.06);
}

.tww-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--apex-cyan);
    line-height: 1;
    margin-bottom: 5px;
    text-shadow: 0 0 18px rgba(0, 212, 255, 0.35);
}

.tww-stat span {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Booking flow */
.tww-flow {
    margin-bottom: 24px;
}

.tww-flow-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
}

.tww-flow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.tww-flow-steps span {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.tww-flow-steps .sep {
    color: var(--apex-cyan);
    opacity: 0.5;
    margin: 0 2px;
}

/* CTA buttons */
.tww-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    margin-top: auto;
    letter-spacing: 0.01em;
    transition: gap .22s, box-shadow .22s, transform .22s, background .22s;
}

.tww-btn:hover {
    gap: 13px;
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.45);
    background: #33deff;
    color: var(--apex-black);
}

.tww-btn-outline {
    background: transparent;
    border: 2px solid rgba(0, 212, 255, 0.5);
    color: var(--apex-cyan);
}

.tww-btn-outline:hover {
    background: var(--apex-cyan);
    color: var(--apex-black);
    border-color: var(--apex-cyan);
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.45);
}

/* ── How It Works Section ───────────────────────── */
.hiw-section {
    background: var(--apex-black);
    padding: 96px 0;
}

.hiw-wrap {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: start;
}

@media (max-width: 960px) {
    .hiw-wrap {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* Pitch side */
.hiw-h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    margin: 12px 0 16px;
    letter-spacing: -0.02em;
}

.hiw-12 {
    display: inline-block;
    background: var(--apex-cyan);
    color: var(--apex-black);
    border-radius: 10px;
    padding: 2px 14px 4px;
    font-size: 1em;
    font-weight: 900;
    line-height: 1.2;
    animation: hiw12Pulse 2.5s ease-in-out infinite;
}

.hiw-12 sub {
    font-size: 0.38em;
    vertical-align: baseline;
    margin-left: 3px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@keyframes hiw12Pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(0, 212, 255, 0);
    }
}

.hiw-tagline {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 32px;
}

/* Toggle */
.hiw-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hiw-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
    white-space: nowrap;
}

.hiw-toggle-btn.active {
    background: var(--apex-cyan);
    color: var(--apex-black);
}

/* CTA button */
.hiw-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 20px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    border-radius: 14px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 20px;
    transition: opacity .2s, transform .15s;
    letter-spacing: 0.01em;
}

.hiw-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: var(--apex-black);
}

/* Trust chips */
.hiw-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hiw-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.32);
}

/* Steps timeline */
.hiw-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hiw-step {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 32px;
}

.hiw-step-last {
    padding-bottom: 0;
}

/* Vertical connecting line */
.hiw-step:not(.hiw-step-last) .hiw-dot::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 42px;
    height: calc(100% - 10px);
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 212, 255, 0.35), rgba(0, 212, 255, 0.04));
}

.hiw-dot {
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

.hiw-dot span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.35);
    background: rgba(0, 212, 255, 0.07);
    color: var(--apex-cyan);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .3s, background .3s;
}

.hiw-dot-done {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--apex-cyan);
    color: var(--apex-black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.12);
}

.hiw-step-body {
    padding-top: 8px;
    flex: 1;
    min-width: 0;
}

.hiw-step-body h4 {
    font-family: var(--font-display);
    font-size: 0.97rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.hiw-step-body p {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.6;
    margin: 0;
}

/* Hover: step highlights */
.hiw-step:hover .hiw-dot span {
    border-color: var(--apex-cyan);
    background: rgba(0, 212, 255, 0.15);
}

.hiw-step:hover .hiw-step-body h4 {
    color: var(--apex-cyan);
}

/* ---------- Pain-point band ---------- */
.pain-band {
    background: var(--apex-black);
    color: var(--apex-white);
    position: relative;
    overflow: hidden;
}

.pain-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 100% 0%, rgba(0, 212, 255, 0.12), transparent 60%);
}

.pain-band .container-apex {
    position: relative;
    z-index: 2;
}

.pain-band h2 {
    color: var(--apex-white);
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 820px) {
    .pain-grid {
        grid-template-columns: 1fr;
    }
}

.pain-card {
    background: var(--apex-ink);
    border: 1px solid var(--apex-line);
    border-radius: var(--r-lg);
    padding: 28px;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: start;
}

.pain-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    display: grid;
    place-items: center;
    color: var(--apex-cyan);
}

.pain-card h4 {
    color: var(--apex-white);
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.pain-card .pain-was {
    color: var(--apex-grey-500);
    font-size: 0.9rem;
    text-decoration: line-through;
    margin-bottom: 4px;
}

.pain-card .pain-now {
    color: var(--apex-grey-300);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Packages comparison ---------- */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1080px) {
    .pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pkg-grid {
        grid-template-columns: 1fr;
    }
}

.pkg-card {
    background: var(--apex-white);
    border: 1.5px solid var(--apex-mute);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .3s ease;
}

.pkg-card:hover {
    transform: translateY(-4px);
    border-color: var(--apex-grey-300);
    box-shadow: var(--shadow-card);
}

.pkg-card.featured {
    border-color: var(--apex-cyan);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.08);
}

.pkg-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--r-pill);
}

.pkg-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--apex-grey-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.pkg-tagline {
    color: var(--apex-grey-700);
    font-size: 0.92rem;
    margin-bottom: 20px;
    min-height: 2.6em;
}

.pkg-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--apex-black);
    line-height: 1;
    letter-spacing: -0.03em;
}

.pkg-price small {
    font-size: 0.9rem;
    color: var(--apex-grey-500);
    font-weight: 400;
    letter-spacing: 0;
}

.pkg-time {
    font-size: 0.85rem;
    color: var(--apex-grey-500);
    margin-top: 4px;
    margin-bottom: 24px;
}

.pkg-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex: 1;
}

.pkg-features li {
    padding: 8px 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.93rem;
    color: var(--apex-grey-700);
    border-bottom: 1px solid var(--apex-mute);
}

.pkg-features li:last-child {
    border-bottom: none;
}

.pkg-features li.no {
    color: var(--apex-grey-300);
    text-decoration: line-through;
}

.pkg-features svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--apex-cyan-2);
}

.pkg-features li.no svg {
    color: var(--apex-grey-300);
}

.pkg-card .btn-apex {
    width: 100%;
}

/* ---------- Gallery filter ---------- */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.gallery-filter button {
    background: var(--apex-white);
    border: 1.5px solid var(--apex-mute);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--apex-grey-700);
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
}

.gallery-filter button:hover {
    border-color: var(--apex-grey-300);
    color: var(--apex-black);
}

.gallery-filter button.active {
    background: var(--apex-black);
    color: var(--apex-cyan);
    border-color: var(--apex-black);
}

/* ---------- Before/After ---------- */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 980px) {
    .ba-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ba-grid {
        grid-template-columns: 1fr;
    }
}

.ba-card.is-hidden {
    display: none;
}

.ba-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    background: var(--apex-ink);
    user-select: none;
}

.ba-slider {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ba-half {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--apex-white);
    font-family: var(--font-display);
    font-weight: 700;
}

.ba-before {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)),
        repeating-linear-gradient(45deg, #3a4350 0, #3a4350 8px, #262d36 8px, #262d36 16px);
}

.ba-after {
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 212, 255, 0.4), transparent 60%),
        linear-gradient(180deg, #2a3b4c, #0b0f14);
}

.ba-half-label {
    position: absolute;
    top: 16px;
    padding: 4px 12px;
    border-radius: var(--r-sm);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ba-before .ba-half-label {
    left: 16px;
    background: rgba(255, 255, 255, 0.15);
}

.ba-after .ba-half-label {
    right: 16px;
    background: var(--apex-cyan);
    color: var(--apex-black);
}

.ba-divider {
    display: none;
}

.ba-divider-handle {
    display: none;
}

/* Before/after split removed — each card now shows only its "after"
   (result) photo at full size. */
.ba-before {
    display: none;
}

.ba-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: rgba(11, 15, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 14px;
    border-radius: var(--r-md);
    color: var(--apex-white);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}

.ba-caption strong {
    font-family: var(--font-display);
    font-weight: 700;
}

.ba-caption-svc {
    color: var(--apex-cyan);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Single-photo card: the "after" half fills the whole card, unclipped —
   no more drag-to-reveal (the divider/handle/before-half are all hidden
   above, and smart.js's/main.js's drag handlers no longer target any
   live element). */
.ba-card.interactive .ba-after {
    clip-path: none;
}

.ba-card.interactive .ba-slider {
    grid-template-columns: 1fr;
}

.ba-card.interactive .ba-half {
    position: absolute;
    inset: 0;
}

/* ---------- Reviews ---------- */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 980px) {
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

.review-card {
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.review-stars {
    color: var(--apex-amber);
    letter-spacing: 2px;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.review-text {
    color: var(--apex-grey-700);
    flex: 1;
    font-size: 0.97rem;
    margin-bottom: 20px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--apex-mute);
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--apex-cyan-2), var(--apex-amber-2));
    display: grid;
    place-items: center;
    color: var(--apex-white);
    font-family: var(--font-display);
    font-weight: 700;
}

.review-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--apex-black);
}

.review-meta {
    font-size: 0.8rem;
    color: var(--apex-grey-500);
}

.review-source {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--apex-grey-500);
}

/* ============================================================
   Reviews page v2 — quick nav, source sections, photo proof
   Scoped to .reviews-page so the shared .review-card/.reviews-grid
   classes used on other pages (los-angeles, app-page, gift-cards)
   are untouched.
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--d, 0s);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Tighter than the shared .section-tight default (40-80px) -- this
   section is just the rating-breakdown box between the quicknav and the
   Google/Website split-stat line, it doesn't need as much air. */
#rating-summary {
    padding: clamp(16px, 2.5vw, 32px) 0;
}

/* With #rated-elsewhere commented out, this CTA banner now sits right
   after the Website Reviews section -- its share of .section-tight's
   40-80px top padding plus that section's own bottom padding read as an
   oversized gap with nothing in between, so trim just the top here. */
#reviews-cta-banner {
    padding-top: clamp(16px, 2.5vw, 32px);
}

.reviews-page .reviews-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 8px 0 0;
    position: sticky;
    top: 12px;
    z-index: 20;
}

.reviews-page .reviews-quicknav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    color: var(--apex-grey-700);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(11, 15, 20, 0.06);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.reviews-page .reviews-quicknav a i {
    color: var(--apex-cyan-2);
    transition: color .25s ease;
}

.reviews-page .reviews-quicknav a:hover,
.reviews-page .reviews-quicknav a.is-active {
    background: var(--apex-black);
    border-color: var(--apex-black);
    color: var(--apex-white);
    transform: translateY(-2px);
}

.reviews-page .reviews-quicknav a:hover i,
.reviews-page .reviews-quicknav a.is-active i {
    color: var(--apex-cyan);
}

.reviews-page .reviews-split-stat {
    text-align: center;
    font-size: 0.88rem;
    color: var(--apex-grey-500);
    margin-top: 14px;
}

.reviews-page .reviews-split-stat strong {
    font-family: var(--font-display);
    color: var(--apex-black);
}

.reviews-page .reviews-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.reviews-page .reviews-source-badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Real logo needs a light ground to read correctly (Google's own mark is
   flat colors with no built-in contrast backing), so this badge is white
   rather than the dark tile every other badge on the page uses. */
.reviews-page .reviews-source-badge.google {
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    box-shadow: 0 4px 14px rgba(11, 15, 20, .08);
}

.reviews-page .reviews-source-badge-icon {
    display: inline-flex;
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.reviews-page .reviews-source-badge.website {
    background: linear-gradient(135deg, var(--apex-cyan-2), var(--apex-amber-2));
    color: var(--apex-white);
    perspective: 240px;
}

/* A flat rotate() just spins the glyph in place like a wheel — a real
   globe turns on its vertical axis, so its face appears to slide from
   one side to the other while narrowing at the edges. rotateY gives that
   same illusion instead of a flat pinwheel spin. */
.reviews-page .reviews-source-badge.website i {
    display: inline-block;
    animation: badgeSpinGlobe 3.5s linear infinite;
}

@keyframes badgeSpinGlobe {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.reviews-page .reviews-source-stat {
    font-size: 0.85rem;
    color: var(--apex-grey-500);
}

/* "Website Reviews"/"Google Reviews" heading: the shared global h2 rule
   clamps down to 1.85rem (~30px) at its smallest, still too wide to sit
   next to the 54px badge icon in the ~200px this row has left on a
   narrow phone -- "Website Reviews" (the longer of the two) wrapped to
   two lines. Sized down specifically here rather than touching h2
   itself, which is used site-wide. Also a little breathing room above
   #google-reviews (right after the dense stats block) and both above
   and below #website-reviews (its own bg-paper tint reads flush/
   cramped against the sections on either side at .section's own
   near-zero clamp(4px,1vw,25px) mobile padding) -- this page only. */
@media (max-width: 699.98px) {
    .reviews-page .reviews-section-head h2 {
        font-size: 1.5rem;
    }

    #google-reviews {
        padding-top: 40px;
    }

    #website-reviews {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .reviews-page .reviews-section-head h2 {
        font-size: 1.3rem;
    }
}

.reviews-page .reviews-source-stat strong {
    color: var(--apex-black);
    font-family: var(--font-display);
}

.reviews-page .reviews-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 28px;
}

.reviews-page .reviews-filterbar button {
    border: 1px solid var(--apex-mute);
    background: var(--apex-white);
    color: var(--apex-grey-700);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all .2s ease;
}

.reviews-page .reviews-filterbar button:hover {
    border-color: var(--apex-cyan-2);
    color: var(--apex-cyan-2);
}

.reviews-page .reviews-filterbar button.is-active {
    background: var(--apex-cyan-2);
    border-color: var(--apex-cyan-2);
    color: var(--apex-white);
}

/* Google/Website Reviews carousels — same Swiper setup, light-theme nav
   circles and pagination dots to match this page (the homepage's own
   .gr-nav/.gr-swiper-pagination are styled for its dark section, so
   these are separate rather than shared). */
.reviews-page .reviews-slider-wrap {
    position: relative;
    padding: 0 52px;
}

.reviews-page .reviews-swiper {
    overflow: hidden;
}

.reviews-page .reviews-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.reviews-page .reviews-swiper .swiper-slide > .review-card {
    width: 100%;
}

.reviews-page .reviews-swiper .swiper-slide.is-filtered-out {
    display: none;
}

.reviews-page .reviews-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--apex-white);
    border: 1.5px solid var(--apex-mute);
    color: var(--apex-grey-700);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(11, 15, 20, 0.08);
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.reviews-page .reviews-slider-nav:hover {
    background: var(--apex-cyan-2);
    border-color: var(--apex-cyan-2);
    color: var(--apex-white);
    transform: translateY(calc(-50% - 2px));
}

.reviews-page .reviews-slider-nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.reviews-page .reviews-slider-prev {
    left: 0;
}

.reviews-page .reviews-slider-next {
    right: 0;
}

.reviews-page .reviews-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 18px;
}

.reviews-page .reviews-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--apex-mute);
    opacity: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.reviews-page .reviews-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--apex-cyan-2);
    transform: scale(1.3);
}

/* 699.98px, not 640px -- the JS Swiper init (reviews-front.blade.php)
   only goes to slidesPerView:2 at >=700px, so a card is still shown
   full-width, one at a time, all the way up to 699px. The old 640px
   cutoff here left a 641-699px dead zone showing a single card with
   none of this tightened spacing. */
@media (max-width: 699.98px) {
    /* 52px (this page's own desktop default, sized for a 40px nav
       button) stacked with .review-card's own unconditional 28px
       padding ate ~80px per side off an already-narrow phone screen --
       ~160px of gone to padding alone on a 375px viewport before any
       actual card content, which is also why the photo inside read as
       small: it fills whatever width is left over. Tightened both. */
    .reviews-page .reviews-slider-wrap {
        padding: 0 30px;
    }

    .reviews-page .reviews-slider-nav {
        width: 34px;
        height: 34px;
    }

    .reviews-page .review-card {
        padding: 20px;
    }
}

/* Below 480px there's no comfortable way to fit prev/next arrow
   buttons AND a reasonably-sized card in the same row -- swipe (touch)
   and the pagination dots underneath already cover navigation here, so
   drop the arrows and give the card the width they were reserving. */
@media (max-width: 480px) {
    .reviews-page .reviews-slider-wrap {
        padding: 0;
    }

    .reviews-page .reviews-slider-nav {
        display: none;
    }

    .reviews-page .review-card {
        padding: 16px;
    }
}

.reviews-page .review-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 15, 20, .05), 0 16px 32px -24px rgba(11, 15, 20, .22);
    transition: transform .35s ease, box-shadow .35s ease, opacity .3s ease, border-color .35s ease;
}

.reviews-page .review-card.is-filtered-out {
    display: none;
}

.reviews-page .review-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 168, 204, .35);
    box-shadow: 0 24px 48px -14px rgba(0, 168, 204, 0.22), 0 10px 22px rgba(11, 15, 20, 0.08);
}

/* Decorative quote mark, dialled back now that the header row (source
   chip + stars) carries most of the card's visual weight up top. */
.reviews-page .review-card::after {
    content: "\201C";
    position: absolute;
    top: -6px;
    right: 20px;
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--apex-mute);
    z-index: 0;
    pointer-events: none;
}

.reviews-page .review-card > * {
    position: relative;
    z-index: 1;
}

/* ── Header row: source chip (left) + star rating (right) — sits above
   the photo on every card shape, so the trust signals read immediately
   without waiting for a hover state. ── */
/* flex-wrap:wrap is the safety net, not the normal case -- the source
   chip (~97px) plus 5 stars + rating number (~163px, both flex-shrink:0)
   need ~270px to sit on one row, more than a narrow phone card has to
   give even after the padding trimmed below. Without wrap, neither
   child can shrink, so the row simply overflowed past the card's own
   edge and got clipped by its overflow:hidden -- the stars visibly
   cut off partway through. */
.reviews-page .review-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.reviews-page .review-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.reviews-page .review-source-chip.src-google {
    background: var(--apex-black);
    color: var(--apex-cyan);
}

.reviews-page .review-source-chip.src-website {
    background: linear-gradient(135deg, var(--apex-cyan-2), var(--apex-amber-2));
    color: var(--apex-white);
}

.reviews-page .review-card:hover .review-stars i {
    animation: reviewStarPop .5s ease;
}

.reviews-page .review-stars i:nth-child(2) { animation-delay: .05s !important; }
.reviews-page .review-stars i:nth-child(3) { animation-delay: .1s !important; }
.reviews-page .review-stars i:nth-child(4) { animation-delay: .15s !important; }
.reviews-page .review-stars i:nth-child(5) { animation-delay: .2s !important; }

@keyframes reviewStarPop {
    30% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.reviews-page .review-stars {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.reviews-page .review-rating-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0;
    color: var(--apex-grey-500);
}

/* Source chip + stars fit on one row at this width in theory, but the
   display font's real rendered width (webfont load timing, per-device
   metrics) leaves little margin -- shrinking the stars here trades a
   bit of visual weight for a reliably one-line header instead of an
   occasional wrap into a second row. */
@media (max-width: 480px) {
    .reviews-page .review-stars {
        gap: 4px;
        font-size: 13px;
        letter-spacing: 0;
    }

    .reviews-page .review-rating-num {
        font-size: 11px;
    }

    .reviews-page .review-source-chip {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Clamped to 4 lines regardless of the underlying review's actual
   length -- Swiper stretches every slide in the row to match its
   tallest, so one unusually long review used to make every card in
   the set (short reviews included) balloon to match it. A review long
   enough to actually get cut off here also gets a "See more" trigger
   (review-card.blade.php, judged by character count) that opens the
   full text in .review-text-modal below. */
.reviews-page .review-text {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.review-see-more {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: -12px 0 20px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--apex-cyan-2);
    cursor: pointer;
}

.review-see-more:hover {
    text-decoration: underline;
}

/* Full-text popup -- same fixed-overlay/centered-panel pattern as
   .review-lightbox above, a white text panel instead of an image. */
.review-text-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6, 8, 11, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}

.review-text-modal.open {
    display: flex;
}

.review-text-modal-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--apex-white);
    border-radius: var(--r-lg);
    padding: 32px;
    cursor: default;
}

.review-text-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--apex-grey-100);
    color: var(--apex-grey-700);
    width: 34px;
    height: 34px;
}

.review-text-modal-close:hover {
    background: var(--apex-mute);
}

.review-text-modal-stars {
    color: var(--apex-amber);
    letter-spacing: 2px;
    font-size: 1rem;
    margin-bottom: 14px;
}

.review-text-modal-body {
    color: var(--apex-grey-700);
    line-height: 1.7;
    margin-bottom: 18px;
}

.review-text-modal-name {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--apex-black);
}

/* ── Photo frame: the hero (ba-card slider or single photo) sits inset
   within the card's own padding — no more edge-to-edge bleed — and the
   reviewer's avatar floats half-on/half-off its bottom-left corner,
   the card's signature "layered" moment. ── */
/* .review-photo-hero (the only child) already carries its own
   margin-bottom sized for the floating avatar's overhang -- giving the
   frame its own margin-bottom too just stacked a second, redundant gap
   on top of it (46px total instead of the 26px actually needed) between
   the photo and the quote text below. */
.reviews-page .review-photo-frame {
    margin-bottom: 0;
}

.reviews-page .review-photo-hero {
    position: relative;
    margin-bottom: 16px;
}

.reviews-page .review-photo {
    aspect-ratio: 16 / 10;
    margin: 0;
}

/* Taller frame on mobile -- 16:10 was tuned for the 3-across desktop
   grid, where a flatter photo keeps rows compact; single-column mobile
   has the width to spare and the photo read small/cramped at that ratio. */
@media (max-width: 699.98px) {
    .reviews-page .review-photo {
        aspect-ratio: 4 / 3;
    }

    /* The merged before/after panel is a wide composite shown with
       background-size:contain (see .review-slide-merged below) so its
       BEFORE/AFTER labels never get cropped off -- inside the taller 4:3
       frame above, that letterboxes it down to a small strip with a lot
       of dead space top and bottom. MergeBeforeAfterPhoto::compositeAndSave()
       always canvases at PANEL_WIDTH*2 x PANEL_HEIGHT (app/Jobs/MergeBeforeAfterPhoto.php)
       -- exactly 2:1, not just usually -- so matching the frame to that
       exact ratio fills it completely with zero letterbox instead of
       just shrinking the gap. */
    .reviews-page .review-photo:has(.review-slide-merged) {
        aspect-ratio: 2 / 1;
    }
}

/* ── Photo slideshow — every photo on the review (before/after shots,
   extra photographed areas, the customer's own upload) auto-advances
   through the same frame instead of a static compare-slider. ── */
.reviews-page .review-slideshow {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--apex-grey-100);
}

.reviews-page .review-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

.reviews-page .review-slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
    cursor: zoom-in;
}

/* The merged before/after panel (see MergeBeforeAfterPhoto) is a wide
   2:1 composite -- .review-photo's 16:10 frame with background-size:cover
   would crop into both halves (and can crop a BEFORE/AFTER label clean
   off), so show it uncropped instead. contain leaves a sliver of
   letterbox top/bottom since 2:1 is a bit wider than 16:10; the frame's
   own background fills that in rather than showing empty white. */
.reviews-page .review-slide-merged {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--apex-grey-100);
}

.reviews-page .review-slide-dots {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.reviews-page .review-slide-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 1px 4px rgba(11, 15, 20, .35);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.reviews-page .review-slide-dot.active {
    background: var(--apex-cyan);
    transform: scale(1.35);
}

.reviews-page .review-avatar {
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

.reviews-page .review-card:hover .review-avatar {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.32);
}

/* Reviewer initials sit as a small in-flow "DP" next to the source badge
   in the footer now, not floating half-on/half-off the photo -- that
   float used to force 26px of otherwise-unneeded clearance under the
   photo just so the overhanging circle wouldn't collide with the quote
   text above it. */
.reviews-page .review-avatar-inline {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.reviews-page .review-author-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.reviews-page .rating-bar-fill {
    height: 100%;
    background: var(--apex-amber);
    border-radius: 99px;
    width: var(--pct, 0%);
    transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
}

.reviews-page .reviews-empty {
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--apex-mute);
    border-radius: var(--r-lg);
    color: var(--apex-grey-500);
}

.reviews-page .reviews-empty i {
    font-size: 2rem;
    color: var(--apex-grey-300);
    margin-bottom: 10px;
    display: block;
}

/* ── No-photo placeholder — every card now gets a hero-shaped frame,
   photo or not, so a review with no image sits at the same height as its
   photo-having neighbors instead of stretching into a dead gap. A
   photo-less Google card centers a large Google mark + "Reviewed on
   Google" label as its focal content (real, non-fabricated info — every
   Google-sourced review was, by definition, posted on Google); any other
   photo-less card falls back to a plain decorative quote glyph. ── */
.reviews-page .review-photo-placeholder {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 140% at 12% 15%, rgba(0, 212, 255, .32), transparent 55%),
        radial-gradient(120% 140% at 88% 85%, rgba(255, 176, 0, .26), transparent 55%),
        linear-gradient(135deg, var(--apex-grey-100), var(--apex-white));
}

.reviews-page .review-placeholder-quote {
    font-family: Georgia, serif;
    font-size: 5.5rem;
    line-height: 1;
    color: rgba(11, 15, 20, .16);
}

.reviews-page .review-placeholder-google {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.reviews-page .review-placeholder-google span {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apex-grey-500);
}

/* ── Source footer badge — Google's logo, the business's own logo, or a
   fallback icon, shown in every card's footer (photo or not) rather than
   on top of the image. ── */
.reviews-page .review-footer-chip {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(11, 15, 20, .1);
    font-size: 14px;
    color: var(--apex-grey-500);
}

/* A business logo is rarely square (usually a wordmark or an icon+text
   lockup), so its chip relaxes into a pill instead of forcing it into
   the same 30px circle the Google mark and fallback icon use. */
.reviews-page .review-site-chip {
    width: auto;
    height: 32px;
    max-width: 56px;
    padding: 4px 8px;
    border-radius: var(--r-pill);
}

.reviews-page .review-site-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── Lightbox — plain CSS + vanilla JS (see reviews-front.blade.php's
   scripts section), same pattern as the staff-portal photo lightbox. ── */
.review-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6, 8, 11, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}

.review-lightbox.open {
    display: flex;
}

.review-lightbox figure {
    margin: 0;
    max-width: min(90vw, 900px);
    max-height: 85vh;
    cursor: default;
}

.review-lightbox img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.review-lightbox figcaption {
    margin-top: 12px;
    text-align: center;
    color: var(--apex-white);
    font-size: 0.85rem;
    opacity: .8;
}

.review-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--apex-white);
    cursor: pointer;
    transition: background .2s ease;
}

.review-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .reviews-page .review-slide,
    .reviews-page .review-slide-dot,
    .reviews-page .review-card,
    .reviews-page .reviews-source-badge-icon,
    .reviews-page .reviews-source-badge.website i {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- FAQ ---------- */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--apex-mute);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--apex-black);
}

.faq-question:hover {
    color: var(--apex-cyan-2);
}

.faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--apex-paper);
    display: grid;
    place-items: center;
    transition: all .25s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-icon {
    background: var(--apex-cyan);
    color: var(--apex-black);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

.faq-answer-inner {
    padding: 0 0 22px 0;
    color: var(--apex-grey-700);
}

.faq-answer-inner a {
    color: var(--apex-cyan-2);
    text-decoration: underline;
}

/* ---------- Locations ---------- */
.loc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 820px) {
    .loc-grid {
        grid-template-columns: 1fr;
    }
}

.loc-card {
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all .25s ease;
}

.loc-card:hover {
    border-color: var(--apex-cyan);
    box-shadow: var(--shadow-card);
}

.loc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.loc-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
}

.loc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--r-pill);
}

.loc-status.open {
    background: rgba(31, 193, 107, 0.12);
    color: var(--apex-green);
}

.loc-status.closed {
    background: rgba(255, 59, 59, 0.12);
    color: var(--apex-red);
}

.loc-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.loc-rows {
    display: grid;
    gap: 12px;
}

.loc-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    font-size: 0.93rem;
    color: var(--apex-grey-700);
}

.loc-row svg {
    color: var(--apex-cyan-2);
    margin-top: 2px;
}

.loc-row a {
    color: var(--apex-grey-700);
}

.loc-row a:hover {
    color: var(--apex-cyan-2);
}

.loc-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.loc-services .chip {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--apex-paper);
    font-size: 12px;
    color: var(--apex-grey-700);
}

.loc-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.loc-actions .btn-apex {
    flex: 1;
}

/* ---------- CTA Banner ---------- */
.cta-banner {
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.18) 0%, transparent 50%, rgba(255, 176, 0, 0.12) 100%),
        var(--apex-black);
    color: var(--apex-white);
    border-radius: var(--r-xl);
    padding: clamp(40px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 820px) {
    .cta-banner {
        grid-template-columns: 1fr;
        /* Desktop's clamp(40px,6vw,72px) padding and 40px row gap (between
           the text block and .cta-banner-actions, now that they're
           stacked as two grid rows instead of side-by-side columns) were
           both sized for a wide card and read as excessive dead space
           once this collapses to a single narrow column on phone. */
        padding: 28px 24px;
        gap: 20px;
    }

    /* .cta-banner-actions has no mobile-specific layout at all, so on a
       narrow phone the buttons just flex-wrap with whatever width their
       own padding gives them — every button reads as equally important
       and the wrapping looks arbitrary. Stack them cleanly instead, and
       let .cta-secondary-link (opt-in per page — see story.blade.php)
       demote a same-styled "extra" link like "See our work" down to a
       plain text link, so it doesn't compete with the real booking
       buttons for attention. */
    .cta-banner-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* .btn-apex.lg's own padding (18px 32px) plus its 1.05rem font-size
       make each stacked, full-width button ~64px tall -- comfortably
       more than the 44px touch-target minimum this site otherwise
       targets everywhere else. Sized down to match the treatment
       .mem-card .btn-apex already gets on the membership page for the
       same reason (full-width buttons in a narrow phone column). */
    .cta-banner-actions .btn-apex {
        width: 100%;
        text-align: center;
        padding: 13px 20px;
        font-size: 0.95rem;
    }

    .cta-banner-actions .cta-secondary-link {
        background: none;
        border: none;
        padding: 4px;
        color: var(--apex-grey-300);
        text-decoration: underline;
        font-weight: 500;
    }
}

.cta-banner h2 {
    color: var(--apex-white);
    margin-bottom: 12px;
}

.cta-banner p {
    color: var(--apex-grey-300);
    margin-bottom: 0;
}

.cta-banner-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--apex-black);
    color: var(--apex-grey-300);
    padding: 80px 0 30px;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--apex-cyan), transparent);
}

.site-footer a {
    color: var(--apex-grey-300);
    font-size: 0.92rem;
}

.site-footer a:hover {
    color: var(--apex-cyan);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 56px;
}

@media (max-width: 980px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.footer-brand .nav-brand {
    color: var(--apex-white);
    margin-bottom: 18px;
}

.footer-brand .nav-brand small {
    color: var(--apex-grey-500);
}

.footer-tagline {
    font-size: 0.95rem;
    color: var(--apex-grey-500);
    max-width: 32ch;
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--apex-grey-300);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all .2s ease;
}

.footer-social a:hover {
    background: var(--apex-cyan);
    color: var(--apex-black);
    border-color: var(--apex-cyan);
}

.footer-col h5 {
    color: var(--apex-white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    padding: 5px 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--apex-grey-500);
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.powered-by {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    font-size: 12px;
}

.powered-by-mark {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--apex-cyan);
}

/* ---------- Sticky bottom CTA (mobile) ---------- */
.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--apex-black);
    border-top: 1px solid var(--apex-line);
    padding: 12px 16px;
    gap: 10px;
}

.mobile-cta-bar .btn-apex {
    flex: 1;
    /* Flex items default to min-width:auto, which refuses to shrink below
       the content's own natural size (here, "Book Mobile" + icon with
       white-space:nowrap). On narrow phones (~344-375px) two such buttons
       side by side need more width than the viewport has, so the row
       overflowed and the second button got pushed/clipped past the edge. */
    min-width: 0;
}

.mobile-cta-bar .btn-apex svg {
    flex-shrink: 0;
}

/* Sonar-style ring pulse -- a soft ripple that expands out from each
   button's edge and fades, rather than a shimmer or shake. Chosen because
   this bar sits on screen through every scroll on a phone, not just a
   header pill you glance past -- anything faster or more animated (a
   sweeping shine on a loop, a bounce, a color flash) would wear out its
   welcome fast and read as a cheap ad rather than a real business's
   booking button. A slow, quiet ring is the same cue phone UIs already
   use for "this is tappable" (a call button's pulse, a live-location
   dot), so it reads as intentional restraint instead of decoration.
   Book at Shop and Book Mobile are offset by half a cycle (0.8s) rather
   than pulsing together, both so the two rings never expand toward each
   other across the 10px gap between the buttons, and so the bar reads as
   one left-right rhythm instead of a single double-flash. The ring
   itself spends 45% of each cycle actually expanding/visible (not a
   quick 25% flash) so it's there long enough to catch on a glance. */
.mobile-cta-bar .btn-apex-primary {
    animation: mcb-pulse-primary 1.6s ease-in-out infinite;
}

.mobile-cta-bar .btn-apex-ghost {
    animation: mcb-pulse-ghost 1.6s ease-in-out infinite;
    animation-delay: 0.8s;
}

@keyframes mcb-pulse-primary {
    0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.65); }
    45% { box-shadow: 0 0 0 11px rgba(0, 212, 255, 0); }
    100% { box-shadow: 0 0 0 11px rgba(0, 212, 255, 0); }
}

@keyframes mcb-pulse-ghost {
    0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55); }
    45% { box-shadow: 0 0 0 11px rgba(0, 212, 255, 0); }
    100% { box-shadow: 0 0 0 11px rgba(0, 212, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-cta-bar .btn-apex-primary,
    .mobile-cta-bar .btn-apex-ghost {
        animation: none;
    }
}

@media (max-width: 720px) {
    .mobile-cta-bar {
        display: flex;
    }

    body {
        padding-bottom: 76px;
    }
}

/* ---------- Generic page header ---------- */
.page-header {
    background:
        radial-gradient(60% 60% at 80% 20%, rgba(0, 212, 255, 0.16), transparent 60%),
        var(--apex-black);
    color: var(--apex-white);
    padding: clamp(100px, 12vw, 160px) 0 clamp(50px, 6vw, 90px);
    position: relative;
    overflow: hidden;
}

/* Book at Shop (book-now.blade.php): compact white breadcrumb bar shown
   only on mobile in place of the full dark hero (see mobile-responsive.css,
   which hides .page-header on this page at the same breakpoint). */
.book-mobile-breadcrumb {
    display: none;
    background: var(--apex-white);
    padding: 14px 0;
}

.book-mobile-breadcrumb .breadcrumbs {
    margin-bottom: 0;
    color: var(--apex-grey-500);
}

.book-mobile-breadcrumb .breadcrumbs a {
    color: #2a323c;
}

.book-mobile-breadcrumb .breadcrumbs a:hover {
    color: var(--apex-cyan-2);
}

/* Widened from 768px to 991.98px so tablet also gets the compact
   breadcrumb bar in place of the full dark hero (see the matching
   .page-header hide rule scoped to tablet in mobile-responsive.css) --
   previously the boundary mismatch (this rule at max-width:768px vs
   the phone-only hero-hide rule at max-width:767.98px) meant exactly
   768px showed BOTH the breadcrumb bar and the hero's own breadcrumb
   at once. */
@media (max-width: 991.98px) {
    .book-mobile-breadcrumb {
        display: block;
    }
}

.page-header h1 {
    color: var(--apex-white);
    max-width: 22ch;
    overflow-wrap: break-word;
    font-size: clamp(2rem, 4vw + 0.4rem, 3.6rem);
}

.page-header p {
    color: var(--apex-grey-300);
    max-width: 56ch;
    font-size: 1.1rem;
}

/* ---------- Booking hero: 3D check-in/dispatch ticket --------------------
   Shared by book-now.blade.php (check-in ticket) and book-mobile.blade.php
   (dispatch ticket) -- same .bkh-grid/.bkh-visual/.bkh-ticket markup and
   CSS on both, only the content inside the ticket differs per page. The
   whole section is already display:none below 992px on both pages (see
   the book/book-mobile rules in mobile-responsive.css), so nothing here
   needs its own phone/tablet handling -- it is hidden or shown as a unit
   with the rest of the hero.

   Technique is deliberately the same one already proven on this site
   rather than a new pattern: perspective+rotate tilt and a floating
   translate loop (.phone-showcase/.phone-frame, smart.css), a mouse-
   tracked --tilt-x/--tilt-y pair updated from JS with a resting fallback
   (.gift-preview-card, style.css ~8908), and a shine sweep (.gift-tile-
   chip-shine). Reusing them means this inherits behavior already tested
   under prefers-reduced-motion and pointer:coarse, rather than needing
   its own from-scratch audit for a "less important" component. */
/* Not a grid any more -- .bkh-visual is absolutely positioned straight
   against .page-header (see below), not against this element, so it
   can center on the FULL section rather than on .bkh-left's own box.
   Kept as a plain wrapper (rather than removing it and re-flattening
   the markup) so the <=1150px stacking query below only has to touch
   two property values instead of restructuring the DOM. */
.bkh-grid {
    position: static;
}

/* Room reserved on the right for the ticket. 420px = its 380px width
   plus the 40px gap the old grid used -- kept numerically identical so
   the text wraps exactly where it did before this became absolute
   positioning instead of a grid column. */
.bkh-left {
    min-width: 0;
    max-width: calc(100% - 420px);
}

/* Deliberately NOT a grid item's box any more. Centering the ticket
   against .bkh-left's own row (previously via height:0/min-height:100%
   on this element) matched the row's height to .bkh-left correctly,
   but that row starts well below the section's own top edge -- after
   the breadcrumb AND .page-header's padding-top -- while only
   padding-bottom (roughly half as much) separates the row's bottom
   from the section's. Centering the ticket in a box positioned that
   far down put ~4x more empty space above it than below, which read as
   "the card is too low" even though nothing was actually wrong with
   its own size.

   position:absolute here skips .bkh-grid and .container-apex entirely
   (neither sets `position`, so the containing-block search continues
   up the tree) and lands on .page-header, the nearest ancestor that
   actually has position:relative -- the one box whose height genuinely
   represents "the whole section," independent of where the breadcrumb
   happens to sit. top:50%/translateY(-50%) then centers on THAT.

   The `right` value reproduces where .container-apex's own content
   edge sits, in .page-header's coordinate space (which spans the full
   viewport width, not the container's max-width:1440): max(24px, ...)
   is exactly 24px (the container's own side padding) below 1440px
   viewport width, where margin:auto on the container does nothing, and
   (100vw - 1440px)/2 + 24px above it, where that's the container's own
   centering margin plus its padding. */
.bkh-visual {
    position: absolute;
    top: 50%;
    right: max(24px, calc((100vw - 1440px) / 2 + 24px));
    width: 380px;
    transform: translateY(-50%);
    perspective: 1400px;
}

/* Ambient glow behind the card -- same purpose as .phone-showcase::before:
   sells "floating in space" without a background image. */
.bkh-visual::before {
    content: "";
    position: absolute;
    inset: -50px -40px;
    background:
        radial-gradient(closest-side, rgba(0, 212, 255, .22), transparent 70%),
        radial-gradient(closest-side at 75% 80%, rgba(255, 176, 0, .14), transparent 70%);
    filter: blur(46px);
    z-index: 0;
    pointer-events: none;
}

.bkh-ticket {
    --tilt-x: 6deg;
    --tilt-y: -10deg;
    position: relative;
    z-index: 1;
    max-width: 340px;
    margin: 0 auto;
    transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    animation: bkhFloat 6s ease-in-out infinite;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.bkh-ticket.is-tilting {
    transition: transform .08s linear;
    animation-play-state: paused;
}

@keyframes bkhFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -14px;
    }
}

/* Decorative second ticket peeking out behind the front one -- same
   card-stack depth cue as .gc-mock-card--back on the homepage, just a
   flat tint here since this card has no back-of-card content to show
   through. */
.bkh-ticket-back {
    position: absolute;
    inset: 10px -10px -14px 14px;
    background: linear-gradient(135deg, #17222c 0%, #0c1319 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-xl);
    transform: translateZ(-40px) rotate(-3deg);
    z-index: 0;
}

.bkh-ticket-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, #101a22 0%, #0a1117 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 212, 255, .06) inset;
    padding: 20px 20px 18px;
}

/* Diagonal light sweep, looping slowly -- same idea as .phone-screen::after
   but animated instead of a static sheen, since this card has no screen
   content of its own competing for attention. */
.bkh-ticket-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .09) 48%, transparent 66%);
    background-size: 240% 240%;
    background-position: 120% 0;
    animation: bkhShineSweep 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bkhShineSweep {

    0%,
    35% {
        background-position: 120% 0;
    }

    65%,
    100% {
        background-position: -20% 0;
    }
}

.bkh-ticket-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bkh-ticket-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--apex-cyan) 0%, #00a8cc 100%);
    box-shadow: 0 6px 16px -4px rgba(0, 212, 255, .5);
}

.bkh-ticket-brand {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bkh-ticket-brand strong {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bkh-ticket-brand span {
    font-size: .72rem;
    color: var(--apex-grey-500);
}

.bkh-live {
    margin-left: auto;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(148, 163, 184, .12);
}

.bkh-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--apex-grey-500);
}

.bkh-live.is-open .bkh-live-dot {
    background: #22c55e;
    animation: bkhPulseDot 1.6s ease-in-out infinite;
}

@keyframes bkhPulseDot {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.bkh-ticket-divider {
    margin: 18px 0 16px;
    border-top: 1px dashed rgba(255, 255, 255, .14);
    position: relative;
}

/* Ticket-stub notches on the divider -- the one purely decorative detail
   that sells "ticket" over "generic card". */
.bkh-ticket-divider::before,
.bkh-ticket-divider::after {
    content: "";
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #06090c;
}

.bkh-ticket-divider::before {
    left: -24px;
}

.bkh-ticket-divider::after {
    right: -24px;
}

.bkh-ticket-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.bkh-ticket-row svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.bkh-ticket-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bkh-row-label {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--apex-grey-500);
}

.bkh-ticket-row strong {
    font-family: var(--font-display);
    font-size: .95rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bkh-row-sub {
    font-size: .78rem;
    color: var(--apex-grey-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bkh-ticket-footer {
    margin-top: 4px;
}

.bkh-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .25);
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 0;
}

.bkh-ticket-badge svg {
    flex-shrink: 0;
}

/* Headline stat callout ("11 seconds") -- a highlighted panel rather
   than a plain .bkh-ticket-row like Drop-off/Before-after, since this
   is the page's actual pitch and needs to outweigh them, not match them. */
.bkh-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, .16), rgba(255, 176, 0, .08));
    border: 1px solid rgba(0, 212, 255, .3);
    border-radius: 14px;
    padding: 9px 14px;
    margin-bottom: 12px;
}

.bkh-stat-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--apex-cyan) 0%, var(--apex-amber) 100%);
    animation: bkhBoltPulse 1.8s ease-in-out infinite;
}

@keyframes bkhBoltPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, .45);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(0, 212, 255, 0);
    }
}

.bkh-stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -.02em;
    /* Same shimmering gradient-text treatment as .gift-preview-amount
       (reuses its giftAmountShimmer keyframe -- one animation, two
       components, rather than a near-duplicate defined twice). */
    background: linear-gradient(135deg, var(--apex-cyan), var(--apex-amber), var(--apex-cyan));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: giftAmountShimmer 4s linear infinite;
}

.bkh-stat-unit {
    font-size: .85rem;
    font-weight: 700;
    color: var(--apex-grey-300);
    margin-left: 3px;
}

.bkh-stat .bkh-row-label {
    display: block;
    margin-top: 1px;
}

/* Before/after photos -- same "highlighted panel" weight as .bkh-stat
   (a real feature the customer should notice, not a footnote), kept in
   the amber half of the brand palette so the two panels read as
   distinct features rather than one repeated twice. */
.bkh-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 176, 0, .16), rgba(255, 176, 0, .05));
    border: 1px solid rgba(255, 176, 0, .3);
    border-radius: 14px;
    padding: 9px 14px;
    margin-bottom: 0;
}

.bkh-feature-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--apex-amber) 0%, #ff8a3d 100%);
}

.bkh-feature strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff;
}

.bkh-feature .bkh-row-label {
    display: block;
    margin-bottom: 2px;
}

/* Mobile dispatch ticket's third panel (book-mobile.blade.php only --
   book-now's ticket has no equivalent). Same "highlighted panel" weight
   as .bkh-stat/.bkh-feature, but solid cyan rather than either of their
   gradients so all three read as distinct at a glance instead of two
   panels sharing a treatment. */
.bkh-app {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, .18), rgba(0, 212, 255, .05));
    border: 1px solid rgba(0, 212, 255, .35);
    border-radius: 14px;
    padding: 9px 14px;
    margin-bottom: 0;
}

.bkh-app-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--apex-cyan) 0%, #00a8cc 100%);
}

.bkh-app strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff;
}

.bkh-app .bkh-row-label {
    display: block;
    margin-bottom: 2px;
}

/* Below 1150px the left column's copy (h1 max-width:22ch, p max-width:56ch)
   and a >=260px-wide ticket start competing for the same room this
   section's own container gets narrower toward. Stack instead of
   squeezing both -- the ticket keeps its 3D/motion treatment, just
   centered under the copy rather than beside it. Never reached on
   phone/tablet since the whole section is already hidden there. */
@media (max-width: 1150px) {
    .bkh-left {
        max-width: none;
    }

    /* Back to a normal block in the document flow, below the copy,
       rather than absolutely positioned over it. transform:none is not
       optional here: unlike top/right, `transform` still applies to a
       position:static element, so the base rule's translateY(-50%) --
       meant to center within .page-header -- went right on shifting
       this box upward by half its own height, overlapping the copy
       above it instead of sitting below it. */
    .bkh-visual {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        margin-top: 32px;
        max-width: 340px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bkh-ticket,
    .bkh-ticket-shine,
    .bkh-live.is-open .bkh-live-dot,
    .bkh-stat-icon,
    .bkh-stat-num {
        animation: none;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: clamp(90px, 20vw, 130px) 0 clamp(40px, 5vw, 60px);
    }

    .page-header h1 {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
    }
}

/* ---------- Rewards hero: radial points ring ----------------------------
   rewards.blade.php only. Deliberately NOT a third copy of the booking
   pages' rectangular "ticket" card (.bkh-*) -- a circular progress gauge
   fits what this page is actually about (a points balance closing in on
   a reward) and reads as its own thing at a glance rather than the same
   component reused again. Same positioning technique as .bkh-visual
   (absolute against .page-header, which already has position:relative)
   since that's a layout mechanism, not a visual identity, and it's
   already proven not to regrow the section or miscenter. */
.rwh-grid {
    position: static;
}

.rwh-left {
    min-width: 0;
    max-width: calc(100% - 380px);
}

.rwh-visual {
    position: absolute;
    top: 50%;
    right: max(24px, calc((100vw - 1440px) / 2 + 24px));
    width: 340px;
    transform: translateY(-50%);
    perspective: 1400px;
}

.rwh-visual::before {
    content: "";
    position: absolute;
    inset: -50px -40px;
    background:
        radial-gradient(closest-side, rgba(255, 176, 0, .2), transparent 70%),
        radial-gradient(closest-side at 25% 80%, rgba(0, 212, 255, .16), transparent 70%);
    filter: blur(46px);
    z-index: 0;
    pointer-events: none;
}

.rwh-card {
    --tilt-x: 5deg;
    --tilt-y: -8deg;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 24px 24px;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, #101a22 0%, #0a1117 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 176, 0, .06) inset;
    overflow: hidden;
    /* Real 3D, same technique as .bkh-ticket/.gift-preview-card: a resting
       perspective tilt that a fine pointer can then drag around live (see
       #rwhCard's own tilt IIFE in rewards.blade.php's scripts section),
       composed with a separate `translate`-only float loop below so the
       two motions never fight over `transform`. */
    transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    animation: rwhFloat 6.5s ease-in-out infinite;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.rwh-card.is-tilting {
    transition: transform .08s linear;
    animation-play-state: paused;
}

.rwh-card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 176, 0, .1), transparent 70%);
    pointer-events: none;
}

/* Diagonal light sweep, same idea as .bkh-ticket-shine. */
.rwh-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .08) 48%, transparent 66%);
    background-size: 240% 240%;
    background-position: 120% 0;
    animation: bkhShineSweep 5.5s ease-in-out infinite;
    pointer-events: none;
}

/* Small twinkling accents around the card -- a "reward" flourish the
   ticket cards don't have, distinct from their dust/smoke or shine-only
   treatment. */
.rwh-spark {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    animation: rwhTwinkle 3.2s ease-in-out infinite;
}

.rwh-spark-1 {
    top: 18px;
    right: 22px;
    animation-delay: .2s;
}

.rwh-spark-2 {
    bottom: 64px;
    left: 14px;
    animation-delay: 1.4s;
}

.rwh-spark-3 {
    top: 96px;
    right: 8px;
    animation-delay: 2.3s;
}

@keyframes rwhTwinkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(.5) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(20deg);
    }
}

@keyframes rwhFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

.rwh-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    display: grid;
    place-items: center;
}

.rwh-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.rwh-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, .08);
    stroke-width: 10;
}

.rwh-ring-progress {
    fill: none;
    stroke: url(#rwhRingGradient);
    stroke-width: 10;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(255, 176, 0, .5));
    /* Fills in from empty on load rather than appearing pre-drawn --
       --rwh-circumference/--rwh-final-offset are set inline per-circle
       (see rewards.blade.php) from the real $rwhPct this ring represents. */
    stroke-dashoffset: var(--rwh-circumference);
    animation: rwhRingFill 1.3s cubic-bezier(.22, .61, .36, 1) .35s forwards;
}

@keyframes rwhRingFill {
    from {
        stroke-dashoffset: var(--rwh-circumference);
    }

    to {
        stroke-dashoffset: var(--rwh-final-offset);
    }
}

.rwh-ring-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.rwh-ring-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.4rem;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--apex-amber), var(--apex-cyan), var(--apex-amber));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: giftAmountShimmer 4s linear infinite;
}

.rwh-ring-of {
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--apex-grey-500);
}

.rwh-ring-badge {
    position: absolute;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #04141a;
    background: linear-gradient(135deg, var(--apex-cyan) 0%, #00a8cc 100%);
    padding: 4px 11px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(0, 212, 255, .5);
    animation: rwhBadgePulse 2.4s ease-in-out infinite;
}

@keyframes rwhBadgePulse {

    0%,
    100% {
        box-shadow: 0 6px 16px -4px rgba(0, 212, 255, .5);
    }

    50% {
        box-shadow: 0 6px 20px -2px rgba(0, 212, 255, .8);
    }
}

.rwh-next {
    text-align: center;
}

.rwh-next-label {
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--apex-grey-500);
    margin-bottom: 2px;
}

.rwh-next strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff;
}

.rwh-next-value {
    font-size: .8rem;
    font-weight: 600;
    color: var(--apex-amber);
}

.rwh-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.rwh-chip {
    font-size: .72rem;
    font-weight: 600;
    color: var(--apex-grey-300);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 5px 10px;
    border-radius: 999px;
}

@media (max-width: 1150px) {
    .rwh-left {
        max-width: none;
    }

    .rwh-visual {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        margin-top: 32px;
        max-width: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rwh-card,
    .rwh-ring-num,
    .rwh-card-shine,
    .rwh-spark,
    .rwh-ring-badge {
        animation: none;
    }

    .rwh-ring-progress {
        animation: none;
        stroke-dashoffset: var(--rwh-final-offset);
    }
}

/* Reviews page hero — a 3D fanned stack of "review us on Google" badge
   cards (dummy sample content, see reviews-front.blade.php) fills the
   empty right side of the shared .page-header banner. Scoped to
   .reviews-page so the other ~10 pages sharing .page-header are
   untouched. Cards are all anchored to the same point in
   .reviews-hero-stack and pushed back/up/left per depth via CSS
   variables, fanning out like a hand of cards standing on a counter. */
.reviews-hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.reviews-hero-stack {
    position: absolute;
    top: 60%;
    right: 4%;
    width: 270px;
    height: 380px;
    transform: translateY(-50%);
    animation: reviewsStackDrift 6s ease-in-out infinite;
}

.reviews-hero-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 26px 22px;
    border-radius: var(--r-lg, 16px);
    background: var(--apex-white);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
    text-align: center;
    opacity: 0;
    transform: translate(var(--stack-x), calc(var(--stack-y) + 24px)) rotate(var(--stack-rot)) scale(calc(var(--stack-scale) - 0.08));
    animation: reviewsStackIn 0.6s ease forwards;
    animation-delay: var(--stack-delay, 0s);
}

.reviews-hero-card-tap {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--apex-grey-50, #f1f4f7);
    color: #3a4350;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.reviews-hero-card-g {
    display: flex;
}

.reviews-hero-card-label {
    color: #000;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.reviews-hero-card-stars {
    color: #fbbc05;
    font-size: 18px;
    letter-spacing: 1px;
}

.reviews-hero-card-quote {
    margin: 2px 0 0;
    color: #000;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.35;
}

.reviews-hero-card-name {
    color: #3a4350;
    font-size: 0.96rem;
    font-weight: 700;
}

.reviews-hero-card-depth-1 {
    --stack-x: 0px;
    --stack-y: 0px;
    --stack-rot: 0deg;
    --stack-scale: 1;
    --stack-delay: 0.5s;
    z-index: 3;
}

.reviews-hero-card-depth-2 {
    --stack-x: -100px;
    --stack-y: -26px;
    --stack-rot: -9deg;
    --stack-scale: 0.95;
    --stack-delay: 0.25s;
    z-index: 2;
    filter: brightness(0.97);
}

.reviews-hero-card-depth-3 {
    --stack-x: -190px;
    --stack-y: -48px;
    --stack-rot: -17deg;
    --stack-scale: 0.9;
    --stack-delay: 0s;
    z-index: 1;
    filter: brightness(0.92);
}

@keyframes reviewsStackIn {
    from {
        opacity: 0;
        transform: translate(var(--stack-x), calc(var(--stack-y) + 24px)) rotate(var(--stack-rot)) scale(calc(var(--stack-scale) - 0.08));
    }

    to {
        opacity: 1;
        transform: translate(var(--stack-x), var(--stack-y)) rotate(var(--stack-rot)) scale(var(--stack-scale));
    }
}

@keyframes reviewsStackDrift {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 8px));
    }
}

/* Between the "hidden" breakpoint and ~1500px, the h1 can wrap wide
   enough at 22ch that the full-size fanned-back cards would otherwise
   clip into its text -- shrink and tuck the stack in closer to the
   edge here (verified clear across 1280-1500px in this range). */
@media (max-width: 1500px) {
    .reviews-hero-stack {
        right: 3%;
        width: 215px;
        height: 310px;
    }

    .reviews-hero-card {
        width: 215px;
    }

    .reviews-hero-card-depth-2 {
        --stack-x: -62px;
        --stack-y: -16px;
    }

    .reviews-hero-card-depth-3 {
        --stack-x: -118px;
        --stack-y: -29px;
    }
}

/* Below this, even the small tier's fan reaches into the h1 text (h1 can
   wrap to a width where verified overlap starts around 1300px) -- hide
   the decoration entirely rather than shrinking the cards further, since
   there's no room left to keep the stack readable. */
@media (max-width: 1340px) {
    .reviews-hero-decor {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-hero-card {
        animation: reviewsStackIn 0.01s forwards;
    }

    .reviews-hero-stack {
        animation: none;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: clamp(80px, 22vw, 120px) 0 clamp(36px, 5vw, 50px);
    }

    .page-header h1 {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
    }

    .page-header p {
        font-size: 0.95rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }
}

.breadcrumbs {
    display: flex;
    gap: 8px;
    color: var(--apex-grey-500);
    font-size: 13px;
    margin-bottom: 18px;
}

.breadcrumbs a {
    color: var(--apex-grey-300);
}

.breadcrumbs a:hover {
    color: var(--apex-cyan);
}

/* ---------- Forms ---------- */
.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--apex-grey-700);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--apex-white);
    color: var(--apex-black);
    border: 1.5px solid var(--apex-mute);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: all .2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--apex-cyan);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Each .form-field's desktop sizing (20px margin, 8px label gap,
       14px input padding) is comfortable when fields sit two to a row,
       but a form like the gift-card checkout (8 stacked fields once
       .form-row-2 above drops to one column) turns that same per-field
       cost into a very long scroll on phone. Tightened without
       shrinking the tap target below the 44px touch-friendly minimum. */
    .form-field {
        margin-bottom: 14px;
    }

    .form-field label {
        margin-bottom: 5px;
        font-size: 12px;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        padding: 11px 14px;
    }
}

/* ---------- Utility ---------- */
.text-center {
    text-align: center;
}

.text-cyan {
    color: var(--apex-cyan-2);
}

.text-amber {
    color: var(--apex-amber-2);
}

.bg-paper {
    background: var(--apex-paper);
}

.bg-black {
    background: var(--apex-black);
    color: var(--apex-white);
}

.muted {
    color: var(--apex-grey-700);
}

.divider {
    height: 1px;
    background: var(--apex-mute);
    margin: 24px 0;
    border: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--apex-paper);
    color: var(--apex-grey-700);
    font-size: 12px;
    letter-spacing: 0.05em;
    font-family: var(--font-display);
    font-weight: 500;
    /* A pill/badge should never break its own text across two lines --
       without this, a chip squeezed by a flex sibling (e.g. the hero
       card's name/rating block competing for space on phone) wraps mid
       phrase ("Available" / "tomorrow"), which looks broken rather than
       like a compact tag. */
    white-space: nowrap;
}

.chip.cyan {
    background: rgba(0, 212, 255, 0.1);
    color: var(--apex-cyan-2);
}

.chip.amber {
    background: rgba(255, 176, 0, 0.12);
    color: var(--apex-amber-2);
}

/* ---------- Pricing matrix ---------- */
.matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--apex-white);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--apex-mute);
    font-size: 0.94rem;
}

.matrix th,
.matrix td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--apex-mute);
}

.matrix th {
    background: var(--apex-paper);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--apex-grey-700);
}

.matrix tr:last-child td {
    border-bottom: 0;
}

.matrix td.center,
.matrix th.center {
    text-align: center;
}

.matrix tbody tr:hover {
    background: var(--apex-paper);
}

.matrix .checkmark {
    color: var(--apex-cyan-2);
}

.matrix .x {
    color: var(--apex-grey-300);
}

.matrix .pkg-col {
    font-weight: 700;
    color: var(--apex-black);
    font-family: var(--font-display);
    /* .matrix-wrap already scrolls horizontally when the table doesn't
       fit, so there's no need for this column to also wrap its own
       text -- without this, a name like "Mobile Mini-Ceramic (6mo)"
       broke across 4 lines in its own narrow column on phone, making
       every row's height chase whichever service name was longest. */
    white-space: nowrap;
}

.matrix-wrap {
    overflow-x: auto;
}

/* ---------- Process steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: step;
}

@media (max-width: 980px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.step {
    position: relative;
    padding-top: 16px;
}

.step-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--apex-cyan), var(--apex-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
}

.step h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

@media (max-width: 560px) {
    /* Stacked-and-centered (number above heading above paragraph, each
       with its own margin) repeated 4x is what made this section run
       so long on phone -- a 48px gradient number alone before any copy
       even starts. Laid out as a compact number-badge + copy row
       instead, closer to how a "how it works" list usually reads on
       mobile. */
    /* Grid, not flex -- .step's three direct children (the badge, the
       h4, and the p) would otherwise each become their own flex column
       side by side, squeezing the heading into a narrow sliver next to
       the badge with the paragraph off in a third column of its own.
       Grid lets the badge span both text rows in column 1 while the
       heading and paragraph stack normally in column 2. */
    .step {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 2px;
        padding-top: 0;
    }

    .step-num {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.05rem;
        margin-bottom: 0;
        /* The gradient-text-clip trick (background-clip:text + a
           transparent fill) only reads as a number on a plain
           background -- badged in a circle, the same gradient works
           better as the circle's own fill with a solid number on top. */
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: var(--apex-black);
    }

    .step h4 {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 2px;
    }

    .step p {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 0;
    }
}

.step p {
    color: var(--apex-grey-700);
    font-size: 0.94rem;
}

/* ---------- Feature grid (icons + text) ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 820px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

.feature {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: rgba(0, 212, 255, 0.1);
    color: var(--apex-cyan-2);
    display: grid;
    place-items: center;
}

.feature h4 {
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.feature p {
    color: var(--apex-grey-700);
    font-size: 0.93rem;
    margin: 0;
}

/* ---------- Multi-step booking ---------- */
.book-stepper {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.book-step {
    flex: 1;
    /* Flex items default to min-width:auto, which refuses to shrink below
       the label's own natural width ("Confirm" + circle badge, nowrap) --
       with 3 equal flex:1 items that overflowed the row on narrow phones,
       pushing the 3rd step ("Confirm") off the right edge. */
    min-width: 0;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--apex-paper);
    color: var(--apex-grey-500);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all .25s ease;
}

.book-step.active {
    background: var(--apex-black);
    color: var(--apex-cyan);
}

.book-step.done {
    background: rgba(0, 212, 255, 0.12);
    color: var(--apex-cyan-2);
}

.book-step .n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: grid;
    place-items: center;
    font-size: 11px;
    flex-shrink: 0;
}

.book-step.active .n,
.book-step.done .n {
    background: var(--apex-cyan);
    color: var(--apex-black);
}

.book-panel {
    display: none;
}

.book-panel.active {
    display: block;
    animation: fadeUp .3s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.book-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 720px) {
    .book-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.book-tile {
    background: var(--apex-white);
    border: 1.5px solid var(--apex-mute);
    border-radius: var(--r-md);
    padding: 18px;
    cursor: pointer;
    text-align: center;
    transition: all .2s ease;
}

.book-tile:hover {
    border-color: var(--apex-grey-300);
}

.book-tile.selected {
    border-color: var(--apex-cyan);
    background: rgba(0, 212, 255, 0.04);
}

.book-tile .title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.book-tile .ex {
    font-size: 12px;
    color: var(--apex-grey-500);
}

.book-tile.svc {
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: center;
}

.book-tile.svc .ic {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: var(--apex-paper);
    display: grid;
    place-items: center;
    color: var(--apex-cyan-2);
}

.book-tile.svc .price {
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--apex-black);
}

.book-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
}

.book-summary {
    background: var(--apex-paper);
    border-radius: var(--r-lg);
    padding: 24px;
    position: sticky;
    top: 100px;
}

.book-summary h4 {
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--apex-grey-700);
    margin-bottom: 16px;
    font-weight: 600;
}

.book-summary .sum-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--apex-mute);
    font-size: 0.93rem;
}

.book-summary .sum-row:last-of-type {
    border-bottom: 0;
}

.book-summary .sum-row strong {
    font-family: var(--font-display);
}

.book-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1.5px solid var(--apex-black);
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
}

/* ---------- Service area checker ---------- */
.zip-check {
    background: var(--apex-white);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    max-width: 480px;
}

@media (max-width: 480px) {
    .zip-check {
        grid-template-columns: 1fr;
    }
}

.zip-check input {
    border: 0;
    padding: 14px 18px;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.zip-check .btn-apex {
    padding: 12px 22px;
}

.zip-result {
    margin-top: 14px;
    font-size: 0.92rem;
    padding: 12px 16px;
    border-radius: var(--r-md);
    display: none;
}

.zip-result.ok {
    display: block;
    background: rgba(31, 193, 107, 0.12);
    color: #117a45;
    border: 1px solid rgba(31, 193, 107, 0.25);
}

.zip-result.no {
    display: block;
    background: rgba(255, 59, 59, 0.1);
    color: #b32626;
    border: 1px solid rgba(255, 59, 59, 0.2);
}

/* ---------- Toast ---------- */
.toast-host {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--apex-black);
    color: var(--apex-white);
    padding: 14px 20px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid var(--apex-cyan);
    min-width: 280px;
    max-width: 380px;
    animation: toastIn .3s ease both;
}

.toast.ok {
    border-left-color: var(--apex-green);
}

.toast.err {
    border-left-color: var(--apex-red);
}

@keyframes toastIn {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---------- Article / Blog ---------- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 980px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

.featured-thumb {
    aspect-ratio: 1.4/1;
    border-radius: 0;
}

.featured-content {
    padding: 32px;
}

.featured-title {
    font-size: 2rem;
    margin-bottom: 14px;
}

/* Below 992px the featured row already stacks (col-lg-6/col-lg-6), but the
   decorative image thumb — just a gradient box with a text label, no real
   photo — was landing above the headline/description, pushing the actual
   content further down the screen and making the page feel empty on a
   phone. Reorder so the text reads first, and shrink the thumbs from tall
   blocks to short strips so real content (titles, descriptions) dominates
   the screen instead of blank gradient space. */
@media (max-width: 991.98px) {
    .featured-media {
        order: 2;
    }

    .featured-content {
        order: 1;
        padding: 22px 20px;
    }

    .featured-thumb {
        aspect-ratio: 21/9;
    }

    .featured-title {
        font-size: clamp(1.4rem, 5vw, 1.85rem);
    }

    .article-thumb {
        aspect-ratio: 21/9;
    }

    .article-body {
        padding: 18px 20px;
    }
}

.article-card {
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all .25s ease;
    position: relative;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: var(--apex-cyan);
}

.article-thumb {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--apex-ink), var(--apex-black));
    position: relative;
    display: grid;
    place-items: center;
    color: var(--apex-white);
}

.article-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.25), transparent 60%);
}

.article-thumb-label {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--apex-cyan);
}

.article-body {
    padding: 22px 24px;
}

.article-meta {
    font-size: 12px;
    color: var(--apex-grey-500);
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-weight: 500;
}

.article-card h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 10px;
}

.article-card p {
    color: var(--apex-grey-700);
    font-size: 0.93rem;
}

/* The 6 grid cards had no link/CTA at all — .stretched-link makes the
   whole card clickable (needs .article-card's position:relative above),
   and this label is the visible cue that tells the user it's tappable. */
.article-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--apex-cyan-2);
    text-decoration: none;
}

.article-card:hover .article-read-more {
    color: var(--apex-cyan);
}

/* ---------- Gift card page hero + tabs ---------- */
.gc-hero {
    /* This padding used to match .page-header's clamp(100px,12vw,160px) --
       but that value is sized for a dark, full-bleed banner section where
       the extra height reads as a designed panel. This hero is plain
       white, blending straight into the page background, so the same
       height just reads as a big empty gap above the breadcrumb. */
    background: #ffffff;
    padding: clamp(32px, 5vw, 56px) 0 0;
    border-bottom: 1px solid #e5e7eb;
}

.gc-breadcrumbs {
    margin-bottom: 20px;
}

.gc-breadcrumbs a,
.gc-breadcrumbs span {
    color: #6b7280;
    font-size: .85rem;
    text-decoration: none;
}

.gc-breadcrumbs a:hover {
    color: var(--apex-black);
}

.gc-hero-heading {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--apex-black);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 36px;
}

/* Tabs */
.gc-tabs {
    display: flex;
    gap: 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
}

.gc-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

.gc-tab svg {
    opacity: .5;
    transition: opacity .2s, color .2s;
}

.gc-tab:hover {
    color: var(--apex-black);
}

.gc-tab.active {
    color: var(--apex-black);
    border-bottom-color: var(--apex-cyan);
}

.gc-tab.active svg {
    opacity: 1;
    color: var(--apex-cyan);
}

/* Balance form */
.gc-balance-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #d0d5dd;
    border-radius: var(--r-md);
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--apex-black);
    background: var(--apex-white);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    letter-spacing: .06em;
}

.gc-balance-input:focus {
    border-color: var(--apex-cyan);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, .12);
}

.gc-balance-result {
    margin-top: 16px;
}

.gc-balance-found {
    padding: 16px 20px;
    background: rgba(0, 212, 255, .08);
    border: 1px solid rgba(0, 212, 255, .3);
    border-radius: var(--r-md);
    font-size: .93rem;
    color: var(--apex-black);
}

.gc-balance-found strong {
    font-size: 1.2rem;
    color: var(--apex-black);
}

.gc-balance-found p {
    font-size: .8rem;
    color: var(--apex-grey-500);
    margin: 4px 0 0;
}

/* ---------- Gift card ---------- */

/* $250 Popular badge — CSS-only, no text wrapping in tile */
.gift-tile.selected::before {
    content: "POPULAR";
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 3;
}

.gift-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 820px) {
    .gift-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Once .col-lg-* stacks, each column becomes the FULL container width,
   and everything inside was sized off that with no ceiling -- so the
   amount tiles grew with the viewport instead of settling: 350x219 at
   768px, 462x288 by 991px, i.e. two rows of tiles eating ~580px of
   height just to pick a number. Capping the stacked column is the fix
   at the source; it holds the tiles at a steady ~310x182 across the
   whole tablet range and stops the preview card sprawling edge to edge
   at the same time. */
@media (max-width: 991.98px) {
    #panel-buy .row > [class*="col-lg-"] {
        max-width: 640px;
        margin-inline: auto;
    }

    /* The preview is the thing being configured. Below a long From/To
       form it sat off the bottom of the page, so you scrolled past
       everything to see what you were buying. Bootstrap rows are flex,
       so ordering it first needs no markup change and unwinds itself
       at lg. */
    #panel-buy .row > .col-lg-5 {
        order: -1;
    }
}

.gift-tile {
    aspect-ratio: 1.6 / 1;
    border-radius: var(--r-lg);
    background:
        linear-gradient(135deg, var(--apex-black) 0%, var(--apex-ink) 100%);
    position: relative;
    overflow: hidden;
    padding: 24px;
    color: var(--apex-white);
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .25s ease;
}

.gift-tile::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.4), transparent);
    transform: rotate(20deg);
}

.gift-tile.selected {
    border-color: var(--apex-cyan);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
}

.gift-tile-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 2;
}

.gift-tile-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--apex-grey-300);
    position: relative;
    z-index: 2;
}

/* Dummy chip/number/expiry -- only shown on tablet (see
   mobile-responsive.css); hidden here so desktop/phone render exactly
   as before. .gift-tile-footer wraps .gift-tile-amount +
   .gift-tile-expiry but stays display:contents outside tablet so the
   amount keeps acting as a direct flex child of .gift-tile, same as
   when it had no wrapper. */
.gift-tile-chip,
.gift-tile-number,
.gift-tile-expiry {
    display: none;
}

.gift-tile-footer {
    display: contents;
}

@media (max-width: 820px) {
    .gift-tile {
        padding: 18px;
    }

    .gift-tile-amount {
        font-size: clamp(1.6rem, 8vw, 2.4rem);
    }

    .gift-tile-label {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .gift-grid {
        gap: 12px;
    }

    .gift-tile {
        padding: 14px;
        aspect-ratio: 1.5 / 1;
    }
}

/* height:100% matters here, not just position:relative. Without an
   explicit height, .gift-preview-stack only auto-sizes to the card's
   own height, leaving the sticky .gift-preview-card zero room to
   travel as the page scrolls past it -- it looked frozen in place
   instead of scrolling along before it sticks. Stretching this wrapper
   to match the (much taller) form column next to it restores that
   travel range. */
.gift-preview-stack {
    position: relative;
    height: 100%;
}

.gift-preview-card {
    /* No 3D perspective/rotateX/rotateY tilt here (tried twice --
       removed for good this time). A perspective transform on a
       position:sticky element with a stacking-context child inside
       (.gift-preview-card-inner has its own z-index) let the card's
       border/background and its text content composite off from each
       other in some browsers, so the box looked tilted while its
       content stayed flat/misaligned, with one side of the card
       reading visibly bigger than the other from the perspective
       distortion. The homepage's own reference card
       (.gc-mock-card--front) has no tilt either -- the "3D" look comes
       entirely from .gift-preview-card-back's flat rotate() peeking
       out behind it (see below), which is what's kept here too. */
    background: linear-gradient(135deg, #0b1e2e 0%, #051118 60%, #091a24 100%);
    color: #fff;
    border-radius: var(--r-xl);
    border: 1.5px solid rgba(0, 212, 255, .35);
    box-shadow:
        14px 22px 36px -18px rgba(0, 0, 0, .55),
        0 28px 64px rgba(0, 0, 0, .6),
        0 0 40px -10px rgba(0, 212, 255, .25),
        0 0 0 1px rgba(0, 212, 255, .12);
    position: sticky;
    top: 120px;
    z-index: 2;
    /* visible, not hidden -- .gift-preview-card-back is a child sized/
       offset to peek out past this card's own edges. Clipping still
       happens, just one level down on .gift-preview-card-inner, so it
       only clips the card's own content and never the back card
       peeking out from behind it. */
    overflow: visible;
    translate: 0 0;
    animation: giftPreviewFloat 5s ease-in-out infinite;
}

@keyframes giftPreviewFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -14px;
    }
}

.gift-preview-card-inner {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    padding: 28px;
}

/* Decorative second card peeking out behind the real preview, matching
   the homepage promo section's card-stack look (.gc-card-stack /
   .gc-mock-card--back). Nested inside .gift-preview-card (not a
   sibling of .gift-preview-stack) and positioned relative to it, so it
   tracks the real card as one unit at every scroll position instead of
   drifting away once the real card sticks and the wrapper keeps
   scrolling underneath it. The parent has no transform of its own
   (see above), so this card's own rotate() below renders as a plain,
   ordinary 2D transform -- no perspective/3D context involved. No text
   of its own: it's a background shape. Kept off below tablet width so
   its slight negative offset (right: -10px) can't push a horizontal
   scrollbar on narrow phones. */
.gift-preview-card-back {
    display: none;
}

@media (min-width: 768px) {
    .gift-preview-card-back {
        display: block;
        position: absolute;
        /* Taller than the front card on BOTH ends (top:-24px plus
           bottom:-24px via the height below), not just offset upward --
           a previous version was 4px SHORTER than the front card
           (height:calc(100% - 4px) with only a top offset), ending ~20px
           above the front card's own bottom edge. That 20px shortfall
           was invisible on the original, much taller version of this
           card (645px), but this card is now only ~250-330px tall, so
           the same fixed-pixel gap is proportionally much bigger.

           Only the TOP-LEFT/BOTTOM-LEFT corners actually need this
           card to reach past the front card -- the right side is
           always fully covered by the front card's own opaque body
           regardless of what this card does back there, since the
           front card (z-index:2) paints over it either way. Checked
           with a corner-in-rotated-quad calculation (rotate this box
           -4deg, confirm the front card's left-side corners land
           inside it) across a realistic range of card widths
           (380-900px): a 24px margin holds up to ~700px wide, which
           comfortably covers a col-lg-5 column at any real viewport
           this site targets. */
        top: -24px;
        height: calc(100% + 48px);
        /* Peek to the LEFT only. right:10px stays a positive inset (the
           card, at >=1440px where the column's right edge is the
           container's, would otherwise push a horizontal scrollbar). */
        left: -24px;
        right: 10px;
        background: linear-gradient(135deg, #0b1e2e 0%, #051118 60%, #091a24 100%);
        border: 1.5px solid var(--apex-line);
        border-radius: var(--r-xl);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
        opacity: .8;
        transform: rotate(-4deg);
        z-index: 1;
    }
}

.gift-preview-card .chip.cyan {
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-weight: 800;
    letter-spacing: .14em;
    border-radius: 5px;
}

/* EMV chip -- reuses the gift-tile-chip partial/markup at full size,
   with its own metallic shine sweep, offset from the card's own sweep
   so the two don't visibly line up and read as one flat animation. */
.gift-preview-chip {
    display: block;
    margin-bottom: 12px;
    width: fit-content;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.gift-preview-chip svg {
    width: 46px;
    height: 31px;
    display: block;
}

.gift-tile-chip {
    position: relative;
    overflow: hidden;
}

.gift-tile-chip-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: giftChipShine 3.5s ease-in-out infinite 1.8s;
}

@keyframes giftChipShine {

    0%,
    25% {
        transform: translateX(-120%);
    }

    65%,
    100% {
        transform: translateX(120%);
    }
}

/* Masked card number -- monospace so the dot groups line up like a real
   card, sits between the amount and the code/expiry footer. */
.gift-preview-number {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1.05rem;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .5);
    margin: 8px 0 4px;
}

@keyframes giftAmountShimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gift-preview-card,
    .gift-preview-amount,
    .gift-tile-chip-shine {
        animation: none;
    }
}

.gift-preview-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--apex-cyan), var(--apex-amber), var(--apex-cyan));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    animation: giftAmountShimmer 4s linear infinite;
}

@media (max-width: 991px) {
    .gift-preview-card {
        position: static;
    }

    /* .gift-preview-card-inner (not .gift-preview-card) is the box that
       actually pads the card's content -- it carries its own unconditional
       40px padding at every width (see its rule above). This block used to
       ALSO put padding:28px directly on the outer .gift-preview-card,
       stacking 28px+40px = 68px of padding on each side below 991px and
       ballooning the card's height, especially on phones where the
       narrowed content column then wrapped every line further. One
       padding source, sized down for the smaller card. */
    .gift-preview-card-inner {
        padding: 18px;
    }

    .gift-preview-amount {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .gift-preview-chip {
        margin-bottom: 8px;
    }

    .gift-preview-number {
        margin: 8px 0 4px;
    }
}

@media (max-width: 480px) {
    .gift-preview-card-inner {
        padding: 16px;
    }
}

/* ---------- Career card ---------- */
.job-card {
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    transition: all .2s ease;
}

.job-card:hover {
    border-color: var(--apex-cyan);
}

.job-card h4 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.job-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .job-card {
        /* Grid item of the plain single-column wrapper in careers.blade.php --
           its automatic minimum width otherwise defaults to its content's
           min-content size (the Apply button's nowrap text), forcing this
           whole row wider than the phone viewport. */
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .job-card > a.btn-apex {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        white-space: normal;
    }
}

/* ---------- Hide BS-Bootstrap dropdown caret ugly ---------- */
.no-caret::after {
    display: none;
}

/* ---------- Print ---------- */
@media print {

    .site-header,
    .site-footer,
    .mobile-cta-bar,
    .top-strip {
        display: none;
    }
}

/* ============================================================
   WHY CHOOSE US — IMAGE SPLIT SECTION
   ============================================================ */
.wcu-section {
    padding: 56px 0;
    background: var(--apex-ink, #0f1923);
}

.wcu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

/* ---------- Collage ---------- */
.wcu-collage {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    gap: 18px;
}

.wcu-img-main {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .13);
}

.wcu-img-main img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.wcu-img-secondary {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
}

.wcu-img-secondary img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Floating rating badge on main image */
.wcu-review-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, .96);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    font-size: .85rem;
    font-weight: 600;
}

.wcu-review-stars {
    display: flex;
    gap: 2px;
}

.wcu-review-score {
    color: #0a0c0f;
    font-size: 1rem;
    font-weight: 700;
}

.wcu-review-count {
    color: #555;
    font-size: .82rem;
    font-weight: 500;
}

/* Floating cars-detailed badge on secondary image */
.wcu-cars-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--apex-cyan, #00d4ff);
    color: var(--apex-black, #0a0c0f);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.wcu-cars-badge strong {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.5px;
}

.wcu-cars-badge span {
    font-size: .75rem;
    font-weight: 600;
    opacity: .85;
}

/* ---------- Content ---------- */
.wcu-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wcu-content h2 {
    font-size: clamp(1.7rem, 2.2vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 8px 0 16px;
    color: var(--apex-white, #ffffff);
}

.wcu-lead {
    font-size: 1.05rem;
    color: var(--apex-grey-300, #c4cdd8);
    line-height: 1.65;
    margin-bottom: 36px;
}

/* Benefits list */
.wcu-benefits {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.wcu-benefits li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.wcu-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: var(--apex-cyan-dim, rgba(0, 212, 255, .1));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-cyan, #00d4ff);
    margin-top: 1px;
}

.wcu-benefits li div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wcu-benefits li strong {
    font-size: .97rem;
    font-weight: 700;
    color: var(--apex-white, #ffffff);
    line-height: 1.3;
}

.wcu-benefits li span {
    font-size: .88rem;
    color: var(--apex-grey-500, #8a939f);
    line-height: 1.5;
}

/* CTA row */
.wcu-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .wcu-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .wcu-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .wcu-img-main {
        grid-column: 1 / -1;
    }

    .wcu-img-main img {
        height: 300px;
    }

    .wcu-img-secondary img {
        height: 180px;
    }
}

/* 96px of padding top and bottom (unconditional at every width
   otherwise) reads as a lot of dead space around "Why Apex" on tablet --
   the phone-only fix just below (max-width:600px) never reaches this
   range. Same range also drops the top "mechanic" photo (wcu-img-main)
   entirely, same idea as the phone-only rule further down -- two
   stacked photos read as a lot of scroll length on tablet before
   reaching the actual copy, and the "18,000+ cars detailed" photo
   (wcu-img-secondary) carries the section fine alone, sized up to
   the space the two of them used to share. Placed after the 960px
   collage-layout block above so it wins in their overlapping range
   (768-960px). */
@media (min-width: 601px) and (max-width: 991.98px) {
    .wcu-section {
        padding: 48px 0 40px;
    }

    /* .wcu-inner's own base rule is a 2-column grid (image | copy) that
       only collapses to 1 column via the 960px block above -- without
       repeating that here too, 961-991.98px would fall back to the
       2-column desktop layout and squeeze the now-lone photo into half
       the container width instead of matching it full-width like the
       960px-and-under range just below. */
    .wcu-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .wcu-collage {
        grid-template-columns: 1fr;
    }

    .wcu-img-main {
        display: none;
    }

    .wcu-img-secondary img {
        height: 420px;
    }

    /* Buttons read left-aligned/off-center on tablet now that .wcu-inner
       is forced single-column above -- the copy block (and everything
       in it) stretches to the full container width, so .wcu-cta's own
       flex-start default left them hugging the edge under the now-
       centered-width photo instead of lining up with it. */
    .wcu-cta {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .wcu-section {
        padding: 32px 0 24px;
    }

    /* This section's own "Book at Shop / Book Mobile" pair sits right
       above the "Two ways to get detailed" section, which has its own
       per-card Book at Shop/Book Mobile CTAs immediately below it —
       redundant on phone where everything stacks and the duplication
       reads much more obviously than side-by-side on desktop. */
    .wcu-cta {
        display: none;
    }

    .wcu-collage {
        grid-template-columns: 1fr;
    }

    /* Purely decorative on phone — a large photo before the "Why choose
       us" copy just adds scroll length without adding information the
       benefits list below doesn't already cover. .wcu-img-secondary
       (the "18,000+ cars detailed" stat photo) stays. Since the grid
       item is display:none rather than resized, it's dropped from
       .wcu-collage's layout entirely — no reserved empty space left
       behind, and .wcu-img-secondary becomes the section's only image. */
    .wcu-img-main {
        display: none;
    }

    .wcu-img-secondary img {
        height: 200px;
    }

    .wcu-content h2 {
        font-size: 1.6rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   APX FAQ — 2-column redesign
   ══════════════════════════════════════════════════════════════ */
.apx-faq-section {
    background: var(--apex-paper);
}

.apx-faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    margin-bottom: 16px;
}

.apx-faq-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--apex-white);
    margin-bottom: 18px;
}

.apx-faq-accent {
    color: var(--apex-cyan);
}

.apx-faq-desc {
    font-size: 15px;
    color: var(--apex-grey-300);
    line-height: 1.72;
    margin-bottom: 28px;
}

.apx-faq-see-all {
    font-size: 14px;
    color: var(--apex-grey-500);
    text-decoration: none;
    transition: color .2s;
}

.apx-faq-see-all:hover {
    color: var(--apex-cyan);
}

/* Accordion */
.apx-faq-item {
    background: var(--apex-surface);
    border-radius: var(--r-lg);
    border: 1.5px solid var(--apex-line);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .2s;
}

.apx-faq-item.open {
    border-color: var(--apex-cyan);
}

.apx-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    cursor: pointer;
    gap: 16px;
    user-select: none;
}

.apx-faq-q-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--apex-white);
    line-height: 1.3;
}

.apx-faq-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--apex-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, transform .25s;
    color: var(--apex-white);
}

.apx-faq-item.open .apx-faq-icon {
    background: var(--apex-cyan);
    color: var(--apex-black);
    transform: rotate(45deg);
}

.apx-faq-a {
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
}

.apx-faq-item.open .apx-faq-a {
    max-height: 300px;
    padding: 0 22px 20px;
}

.apx-faq-a-text {
    font-size: 14px;
    color: var(--apex-grey-300);
    line-height: 1.72;
    border-top: 1px solid var(--apex-line);
    padding-top: 14px;
    margin: 0;
}

.apx-faq-a-text strong {
    color: var(--apex-white);
}

/* ══════════════════════════════════════════════════════════════
   LOCATIONS — interactive section
   ══════════════════════════════════════════════════════════════ */
.aloc-section {
    background: var(--apex-black);
}

.aloc-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.aloc-title-row h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--apex-white);
    letter-spacing: -.03em;
    margin: 0;
}

.aloc-arrows {
    display: flex;
    gap: 8px;
}

.aloc-arrow-btn {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--apex-line);
    border-radius: 50%;
    background: var(--apex-surface);
    color: var(--apex-grey-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.aloc-arrow-btn:hover {
    background: var(--apex-cyan);
    border-color: var(--apex-cyan);
    color: var(--apex-black);
}

/* Pills */
.aloc-pills-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px;
}

.aloc-pills-wrap::-webkit-scrollbar {
    display: none;
}

.aloc-pills-inner {
    display: flex;
    gap: 10px;
    width: max-content;
}

.aloc-pill {
    background: transparent;
    border: 1.5px solid var(--apex-line);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--apex-grey-300);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    font-family: var(--font-body);
}

.aloc-pill:hover {
    border-color: var(--apex-grey-500);
    color: var(--apex-white);
}

.aloc-pill.active {
    border-color: var(--apex-white);
    color: var(--apex-white);
    font-weight: 600;
}

/* Card */
.aloc-card {
    background: var(--apex-surface);
    border-radius: var(--r-xl);
    border: 1.5px solid var(--apex-line);
    overflow: hidden;
    display: flex;
    min-height: 380px;
}

.aloc-map-col {
    flex: 0 0 380px;
    position: relative;
    overflow: hidden;
}

.aloc-map-col iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    display: block;
    filter: grayscale(20%) brightness(0.85);
}

.aloc-info-col {
    flex: 1;
    padding: 36px 44px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.aloc-directions-btn {
    position: absolute;
    top: 36px;
    right: 44px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    border: none;
    border-radius: var(--r-md);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s;
    white-space: nowrap;
    font-family: var(--font-display);
}

.aloc-directions-btn:hover {
    opacity: .85;
    color: var(--apex-black);
}

.aloc-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--apex-white);
    margin: 0 0 4px;
}

.aloc-country {
    font-size: 13px;
    color: var(--apex-grey-500);
    margin: 0 0 20px;
}

.aloc-details-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0 24px;
    margin-bottom: 12px;
}

.aloc-detail-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--apex-grey-500);
    margin: 0 0 6px;
}

.aloc-detail-value {
    font-size: 14px;
    color: var(--apex-grey-300);
    margin: 0;
    line-height: 1.65;
}

/* Toggle panels */
.aloc-panel {
    display: none;
}

.aloc-panel.active {
    display: block;
}

/* Hours table */
.aloc-hours-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 12px;
}

.aloc-hours-table td {
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--apex-grey-300);
    vertical-align: top;
}

.aloc-hours-table td:first-child {
    font-weight: 600;
    color: var(--apex-white);
    width: 130px;
    padding-right: 16px;
}

.aloc-hours-table td strong {
    color: var(--apex-grey-500);
    font-weight: 400;
}

/* Footer row */
.aloc-divider {
    border: none;
    border-top: 1px solid var(--apex-line);
    margin: auto 0 0;
}

.aloc-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.aloc-open-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--apex-white);
    margin: 0;
}

.aloc-footer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aloc-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--apex-grey-500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    transition: color .2s;
}

.aloc-toggle-btn:hover {
    color: var(--apex-cyan);
}

@media (max-width: 991px) {
    .aloc-card {
        flex-direction: column;
    }

    .aloc-map-col {
        flex: 0 0 220px;
    }

    .aloc-map-col iframe {
        min-height: 220px;
    }

    .aloc-info-col {
        padding: 24px 24px 28px;
    }

    .aloc-directions-btn {
        position: static;
        margin-bottom: 16px;
        align-self: flex-start;
    }

    .aloc-details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — redesigned
   ══════════════════════════════════════════════════════════════ */
.sfc-footer {
    padding: 48px 0 0;
    background: var(--apex-black);
}

.sfc-top {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 40px;
}

/* Brand */
.sfc-logo-col {
    flex: 0 0 220px;
}

.sfc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.sfc-brand-mark {
    width: 40px;
    height: 40px;
    background: var(--apex-black);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sfc-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sfc-brand-text span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--apex-black);
}

.sfc-brand-text small {
    font-size: 8px;
    letter-spacing: .2em;
    color: #5a6472;
    font-weight: 500;
}

/* Nav */
.sfc-nav {
    display: flex;
    gap: 52px;
    flex: 1;
}

.sfc-nav-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sfc-head {
    font-size: 14px;
    font-weight: 700;
    color: var(--apex-black);
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
}

.sfc-head:hover {
    color: var(--apex-cyan);
}

.sfc-sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--apex-grey-500);
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
    transition: color .2s;
}

.sfc-sub:hover {
    color: var(--apex-grey-300);
}

.sfc-book-btn {
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* Bottom row */
.sfc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0 36px;
    flex-wrap: wrap;
}

.sfc-newsletter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--apex-grey-300);
    margin: 0 0 10px;
    letter-spacing: .02em;
}

.sfc-newsletter-form {
    display: flex;
    gap: 8px;
}

.sfc-newsletter-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--apex-line);
    background: var(--apex-black);
    color: var(--apex-white);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    min-width: 200px;
    transition: border-color .2s;
}

.sfc-newsletter-input:focus {
    border-color: var(--apex-cyan);
}

.sfc-newsletter-input::placeholder {
    color: var(--apex-grey-700);
}

.sfc-policy {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.sfc-policy a {
    font-size: 13px;
    font-weight: 500;
    color: var(--apex-grey-500);
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
}

.sfc-policy a:hover {
    color: var(--apex-grey-300);
}

/* Below card */
.sfc-below {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 28px;
    flex-wrap: wrap;
}

.sfc-socials {
    display: flex;
    gap: 8px;
}

.sfc-soc-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-grey-300);
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}

.sfc-soc-btn:hover {
    background: var(--apex-cyan);
    border-color: var(--apex-cyan);
    color: var(--apex-black);
}

.sfc-copy {
    font-size: 13px;
    color: var(--apex-grey-500);
    margin: 0;
    text-align: center;
}

.sfc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--apex-line);
    border-radius: 999px;
    padding: 5px 14px 5px 6px;
    background: var(--apex-surface);
    text-decoration: none;
    transition: border-color .2s;
}

.sfc-badge:hover {
    border-color: var(--apex-cyan);
}

.sfc-badge-mark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--apex-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sfc-badge span:last-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--apex-grey-300);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sfc-card {
        padding: 36px 32px 0;
    }

    .sfc-top {
        flex-wrap: wrap;
        gap: 28px;
    }

    .sfc-logo-col {
        flex: 0 0 auto;
    }

    .sfc-nav {
        gap: 32px;
        order: 3;
        width: 100%;
    }

    .sfc-book-btn {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .sfc-card {
        padding: 28px 20px 0;
    }

    .sfc-nav {
        gap: 20px;
        flex-wrap: wrap;
    }

    .sfc-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .sfc-newsletter-form {
        flex-direction: column;
    }

    .sfc-newsletter-input {
        min-width: unset;
        width: 100%;
    }

    .sfc-below {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .sfc-copy {
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════
   FAQ — reference structure, dark theme
   ══════════════════════════════════════════════════════════════ */
.faq-section {
    padding: 60px 0;
    background: var(--apex-paper);
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    margin-bottom: 16px;
}

.faq-title {
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--apex-white);
    margin-bottom: 20px;
}

.faq-title span {
    color: var(--apex-cyan);
}

.faq-desc-txt {
    font-size: 15px;
    color: var(--apex-grey-300);
    line-height: 1.72;
    margin-bottom: 28px;
}

.faq-book-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    letter-spacing: 0.01em;
}

/* Accordion (ref class names) */
.faq-list-ref {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item-ref {
    background: var(--apex-surface);
    border-radius: var(--r-lg);
    border: 1.5px solid var(--apex-line);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s;
}

.faq-item-ref.open {
    border-color: var(--apex-cyan);
}

.faq-q-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    gap: 16px;
    user-select: none;
}

.faq-q-text-ref {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--apex-white);
    line-height: 1.3;
}

.faq-icon-ref {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--apex-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, transform .25s;
    color: var(--apex-white);
    font-size: 16px;
}

.faq-item-ref.open .faq-icon-ref {
    background: var(--apex-cyan);
    color: var(--apex-black);
    transform: rotate(45deg);
}

.faq-a-ref {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
}

.faq-item-ref.open .faq-a-ref {
    max-height: 300px;
    padding: 0 24px 20px;
}

.faq-a-text-ref {
    font-size: 14px;
    color: var(--apex-grey-300);
    line-height: 1.72;
    border-top: 1px solid var(--apex-line);
    padding-top: 16px;
    margin: 0;
}

.faq-a-text-ref strong {
    color: var(--apex-white);
}

/* ══════════════════════════════════════════════════════════════
   LOCATIONS (desktop) — reference structure, dark theme
   ══════════════════════════════════════════════════════════════ */
.locations-section {
    padding: 60px 0;
    background: var(--apex-black);
}

.locations-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.locations-title-row h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--apex-white);
    letter-spacing: -.03em;
    margin: 0;
}

.locations-nav-arrows {
    display: flex;
    gap: 8px;
}

.loc-arrow-btn {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--apex-line);
    border-radius: 50%;
    background: var(--apex-surface);
    color: var(--apex-grey-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    font-size: 16px;
}

.loc-arrow-btn:hover {
    background: var(--apex-cyan);
    border-color: var(--apex-cyan);
    color: var(--apex-black);
}

.location-filters-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px;
}

.location-filters-wrap::-webkit-scrollbar {
    display: none;
}

.location-filters-inner {
    display: flex;
    gap: 10px;
    width: max-content;
    padding-bottom: 4px;
}

.loc-pill {
    background: transparent;
    border: 1.5px solid var(--apex-line);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--apex-grey-300);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    font-family: var(--font-body);
}

.loc-pill:hover {
    border-color: var(--apex-grey-500);
    color: var(--apex-white);
}

.loc-pill.active {
    border-color: var(--apex-white);
    color: var(--apex-white);
    font-weight: 600;
}

.location-card-wrap {
    background: var(--apex-surface);
    border-radius: var(--r-xl);
    border: 1.5px solid var(--apex-line);
    overflow: hidden;
    display: flex;
    min-height: 380px;
}

.location-map-col {
    flex: 0 0 380px;
    position: relative;
    overflow: hidden;
}

.location-map-col iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    display: block;
}

.location-info-col {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    background: var(--apex-surface);
    position: relative;
}

.loc-get-directions {
    position: absolute;
    top: 40px;
    right: 50px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    border: none;
    border-radius: var(--r-md);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: var(--font-display);
    transition: opacity .2s;
    white-space: nowrap;
}

.loc-get-directions:hover {
    opacity: .85;
}

.locations-section .loc-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--apex-white);
    margin: 0 0 4px;
}

.loc-country {
    font-size: 13px;
    color: var(--apex-grey-500);
    margin: 0 0 20px;
    font-weight: 500;
}

.loc-details-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0 24px;
    margin-bottom: 20px;
}

.loc-detail-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--apex-grey-500);
    margin: 0 0 4px;
}

.loc-detail-value {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--apex-grey-300);
    margin: 0;
    line-height: 1.6;
}

.loc-panel {
    display: none;
}

.loc-panel.active {
    display: block;
}

.loc-hours-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 16px;
}

.loc-hours-table td {
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--apex-grey-300);
    vertical-align: top;
}

.loc-hours-table td:first-child {
    font-weight: 600;
    color: var(--apex-white);
    width: 140px;
    padding-right: 16px;
    letter-spacing: .04em;
}

.loc-hours-table td strong {
    color: var(--apex-grey-500);
    font-weight: 400;
}

.loc-hours-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--apex-white);
}

.loc-see-hours {
    font-size: 15px;
    font-weight: 500;
    color: var(--apex-grey-500);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: color .2s;
}

.loc-see-hours:hover {
    color: var(--apex-cyan);
}

.loc-btn {
    background: var(--apex-cyan);
    color: var(--apex-black);
    border: none;
    border-radius: var(--r-pill);
    padding: 11px 26px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-display);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}

.loc-btn:hover {
    opacity: .85;
    color: var(--apex-black);
}

/* ══════════════════════════════════════════════════════════════
   LOCATIONS (mobile — klm) — reference structure, dark theme
   ══════════════════════════════════════════════════════════════ */
.klm-section {
    padding: 40px 0 20px;
    background: var(--apex-black);
}

.klm-wrap {
    padding: 0 16px;
}

.klm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.klm-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--apex-white);
    margin: 0;
    letter-spacing: -.03em;
}

.klm-arrows {
    display: flex;
    gap: 8px;
}

.klm-arrow {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--apex-line);
    border-radius: 50%;
    background: var(--apex-surface);
    color: var(--apex-grey-300);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
}

.klm-pills-outer {
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 16px;
}

.klm-pills-outer::-webkit-scrollbar {
    display: none;
}

.klm-pills {
    display: flex;
    gap: 8px;
    width: max-content;
}

.klm-pill {
    background: transparent;
    border: 1.5px solid var(--apex-line);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--apex-grey-300);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body);
}

.klm-pill.active {
    border-color: var(--apex-white);
    color: var(--apex-white);
    font-weight: 600;
}

.klm-card {
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    border-radius: var(--r-xl);
    padding: 22px 20px 18px;
}

.klm-panel {
    display: block;
}

.klm-hidden {
    display: none;
}

.klm-city {
    font-size: 18px;
    font-weight: 700;
    color: var(--apex-white);
    margin: 0 0 16px;
}

.klm-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--apex-grey-500);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.klm-address,
.klm-contact {
    font-size: 14px;
    color: var(--apex-grey-300);
    margin: 0 0 10px;
    line-height: 1.5;
}

.klm-hours-tbl {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
}

.klm-hours-tbl td {
    padding: 4px 0;
    font-size: 13px;
    color: var(--apex-grey-300);
}

.klm-hours-tbl td:first-child {
    font-weight: 600;
    color: var(--apex-white);
    width: 110px;
}

.klm-divider {
    border: none;
    border-top: 1px solid var(--apex-line);
    margin: 14px 0 10px;
}

.klm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.klm-today-txt {
    font-size: 14px;
    font-weight: 600;
    color: var(--apex-white);
}

.klm-toggle-hrs {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--apex-grey-500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
}

.klm-book-btn {
    display: block;
    background: var(--apex-cyan);
    color: var(--apex-black);
    border-radius: var(--r-md);
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    font-family: var(--font-display);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — reference structure (sfc-*), dark theme
   ══════════════════════════════════════════════════════════════ */
.sfc-wrap {
    padding-top: 48px;
}

.sfc-card {
    background: #bff4fe;
    border-radius: var(--r-xl) var(--r-xl);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-bottom: none;
    padding: 0 56px;
    max-width: 1440px;
    margin: 0 auto;
    -webkit-border-radius: var(--r-xl) var(--r-xl);
    -moz-border-radius: var(--r-xl) var(--r-xl);
    -ms-border-radius: var(--r-xl) var(--r-xl);
    -o-border-radius: var(--r-xl) var(--r-xl);
}

.sfc-top {
    display: flex;
    align-items: flex-start;
    min-height: 160px;
    padding: 36px 0 28px;
    gap: 0;
}

.sfc-logo-col {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sfc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.sfc-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--apex-black);
    border: 1px solid var(--apex-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sfc-brand-logo {
    height: 60px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}

.sfc-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sfc-brand-text span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--apex-black);
}

.sfc-brand-text small {
    font-size: 8px;
    letter-spacing: .2em;
    color: #5a6472;
    font-weight: 500;
}

.sfc-nav {
    display: flex;
    gap: 52px;
    flex: 1;
    align-items: flex-start;
}

.sfc-nav-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sfc-head {
    font-size: 15px;
    font-weight: 600;
    color: var(--apex-black);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.sfc-head:hover {
    color: var(--apex-cyan);
}

.sfc-sub {
    font-size: 15px;
    font-weight: 400;
    color: #5a6472;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: color .2s;
}

.sfc-sub:hover {
    color: var(--apex-black);
}

.sfc-book-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--apex-cyan);
    color: var(--apex-black) !important;
    border: none;
    border-radius: var(--r-lg);
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-family: var(--font-display);
    text-decoration: none;
    transition: opacity .2s;
    position: relative;
    align-self: center;
}

.sfc-book-btn:hover {
    opacity: .85;
}

.sfc-btn-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.sfc-btn-icon i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 14px;
    transition: opacity .25s, transform .25s;
}

.sfc-chevron-icon {
    opacity: 1;
    transform: translateX(0);
}

.sfc-arrow-icon {
    opacity: 0;
    transform: translateX(-6px);
}

.sfc-book-btn:hover .sfc-chevron-icon {
    opacity: 0;
    transform: translateX(6px);
}

.sfc-book-btn:hover .sfc-arrow-icon {
    opacity: 1;
    transform: translateX(0);
}

.sfc-divider {
    border: none;
    border-top: 1px solid rgb(11 10 10);
    margin: 0 0 0 220px;
}

.sfc-bottom {
    display: flex;
    align-items: center;
    min-height: 100px;
    padding: 24px 0 28px;
    gap: 0;
}

.sfc-logo-spacer {
    width: 220px;
    flex-shrink: 0;
}

.sfc-app-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.sfc-qr {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--apex-black);
    padding: 4px;
    flex-shrink: 0;
    border: 1px solid var(--apex-line);
}

.sfc-app-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sfc-app-label {
    font-size: 13px;
    color: #5a6472;
    font-weight: 400;
}

.sfc-app-desc {
    font-size: 15px;
    font-weight: 700;
    color: var(--apex-black);
}

.sfc-policy {
    display: flex;
    gap: 24px;
    align-items: center;
}

.sfc-policy a {
    font-size: 14px;
    font-weight: 500;
    color: var(--apex-black);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.sfc-policy a:hover {
    color: var(--apex-cyan);
}

/* below card */
.sfc-below {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.sfc-socials {
    display: flex;
    gap: 8px;
}

.sfc-soc-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-grey-300);
    text-decoration: none;
    font-size: 14px;
    transition: background .2s, border-color .2s, color .2s;
}

.sfc-soc-btn:hover {
    background: var(--apex-cyan);
    border-color: var(--apex-cyan);
    color: var(--apex-black);
}

.sfc-copy {
    font-size: 14px;
    color: var(--apex-grey-500);
    margin: 0;
    text-align: center;
}

.sfc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--apex-line);
    border-radius: 999px;
    padding: 5px 14px 5px 5px;
    background: var(--apex-surface);
    text-decoration: none;
    transition: border-color .2s;
}

.sfc-badge:hover {
    border-color: var(--apex-cyan);
}

.sfc-badge-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--apex-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sfc-badge span {
    font-size: 13px;
    font-weight: 600;
    color: var(--apex-grey-300);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sfc-card {
        padding: 0 32px;
    }

    .sfc-top {
        flex-wrap: wrap;
        min-height: auto;
        padding: 28px 0 20px;
        gap: 20px;
    }

    .sfc-logo-col {
        width: auto;
    }

    .sfc-nav {
        gap: 28px;
        order: 3;
        width: 100%;
    }

    .sfc-book-btn {
        margin-left: 0;
    }

    .sfc-logo-spacer {
        display: none;
    }

    .sfc-bottom {
        flex-wrap: wrap;
        min-height: auto;
        padding: 20px 0 24px;
        gap: 16px;
    }

    .sfc-policy {
        flex-wrap: wrap;
        gap: 14px;
    }

    .sfc-divider {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .sfc-card {
        padding: 0 20px;
    }

    .sfc-nav {
        gap: 20px;
        flex-wrap: wrap;
    }

    .sfc-below {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .sfc-copy {
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* The 3 nav columns (Services/Booking/Company) need ~332px across
       to sit on one line but only have ~300px on a narrow phone, so
       flex-wrap dropped the 3rd column ("Company") alone onto its own
       row -- leaving it lopsided, with empty space to its right where
       a 2nd/3rd column would otherwise be. Wider phones (e.g. iPhone
       14 Pro Max at 430px) have enough room to keep all 3 in one row
       without any of this, and that's the layout to match here too --
       so instead of reflowing to a stack, shrink the gap and type size
       just enough that all 3 still fit on one line at 344px as well. */
    .sfc-nav {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .sfc-head {
        font-size: 13px;
    }

    .sfc-sub {
        font-size: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL FAQ SECTION — gfaq-* (included on every page)
   ══════════════════════════════════════════════════════════════ */
.gfaq-section {
    padding: clamp(48px, 7vw, 72px) 0;
    background: var(--apex-black);
}

.gfaq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    margin-bottom: 18px;
}

.gfaq-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1.15;
    margin-bottom: 20px;
}

.gfaq-title span {
    color: var(--apex-cyan);
}

.gfaq-desc {
    font-size: 15px;
    color: var(--apex-grey-500);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 380px;
}

.gfaq-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--apex-cyan);
    color: var(--apex-black) !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 11px 26px;
    border-radius: var(--r-pill);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: opacity .2s;
    white-space: nowrap;
}

.gfaq-book-btn:hover {
    opacity: .85;
}

/* ── Accordion list ── */
.gfaq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gfaq-item {
    background: var(--apex-surface);
    border: 1.5px solid var(--apex-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .2s;
}

.gfaq-item.open {
    border-color: var(--apex-cyan);
}

.gfaq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px;
    cursor: pointer;
    user-select: none;
}

.gfaq-q-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--apex-white);
    line-height: 1.4;
}

/* ── Icon button ── */
.gfaq-icon-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--apex-line);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    position: relative;
    color: var(--apex-grey-300);
    font-size: 18px;
    padding: 0;
}

.gfaq-item.open .gfaq-icon-btn {
    background: var(--apex-cyan);
    color: var(--apex-black);
}

/* show/hide icons */
.gfaq-ico-close {
    display: none;
}

.gfaq-ico-plus {
    display: block;
}

.gfaq-item.open .gfaq-ico-close {
    display: block;
}

.gfaq-item.open .gfaq-ico-plus {
    display: none;
}

/* ── Answer panel ── */
.gfaq-a {
    display: none;
    padding: 0 20px 20px;
}

.gfaq-item.open .gfaq-a {
    display: block;
}


.gfaq-divider {
    border: none;
    border-top: 1px solid #ffffff;
    /* margin: auto; */
    margin: 0 -20px 16px 0;
    width: 93%;
}

.gfaq-a p {
    font-size: 14px;
    color: var(--apex-grey-300);
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    /* Bootstrap's own .g-5 utility already applies a 48px gutter via
       --bs-gutter-y margins on each column -- this flex `gap` doesn't
       replace that, it stacks on top of it (40+48=88px between the
       "Book Now" button and the FAQ list once stacked on mobile).
       Override the gutter variable instead of adding a second, redundant
       spacing mechanism. */
    .gfaq-section .row {
        gap: 0;
        --bs-gutter-y: 1rem;
    }
}

/* Tablet: hidden per request -- the header's own Book Now (and every
   other section's) already covers booking, so this one reads as
   redundant here even though the sticky mobile CTA bar reasoning below
   (phone-only, up to 767.98px) doesn't technically apply at this width. */
@media (min-width: 601px) and (max-width: 991.98px) {
    .gfaq-book-btn {
        display: none;
    }
}

@media (max-width: 600px) {
    .gfaq-section {
        padding: 32px 0;
    }

    /* The sticky mobile CTA bar already covers booking. */
    .gfaq-book-btn {
        display: none;
    }
}

/* book-btn.blade.php renders a dropdown (.bbd-wrap wrapping the actual
   .gfaq-book-btn button) instead of a plain link whenever both shop
   and mobile booking are enabled -- the rules above only ever hid the
   inner button, so .bbd-wrap itself stayed a real, visible flex item
   sitting in the gap after it, adding ~50-70px of unexplained space
   between the description text and the first FAQ card on tablet/phone. */
@media (max-width: 991.98px) {
    .gfaq-section .bbd-wrap {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL LOCATIONS SECTION — gloc-* (included on every page)
   ══════════════════════════════════════════════════════════════ */
.gloc-section {
    padding: clamp(50px, 8vw, 50px) 0 0;
    background: #ffffff;
}

/* 50px of top padding (unconditional at every width otherwise) reads
   as excess space above "Our Locations" on tablet -- the phone-only
   fix just below (max-width:600px) never reaches this range. Cut a
   second time (24px -> 12px) after the first pass -- combined with the
   preceding page's own trailing padding/margins, 24px still read as
   excessive. */
@media (min-width: 601px) and (max-width: 991.98px) {
    .gloc-section {
        padding-top: 12px;
    }
}

@media (max-width: 600px) {
    .gloc-section {
        padding-top: 8px;
    }
}

/* ── Title row ── */
.gloc-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.gloc-heading {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--apex-black);
    margin: 0;
}

.gloc-nav-arrows {
    display: flex;
    gap: 10px;
}

.gloc-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    background: #e2ecf1;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

.gloc-arrow:hover {
    border-color: var(--apex-cyan);
    color: #fff;
    background: var(--apex-cyan);
}

/* ── Pills ── */
.gloc-pills-wrap {
    overflow: hidden;
    margin-bottom: 20px;
}

.gloc-pills-inner {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.gloc-pills-inner::-webkit-scrollbar {
    display: none;
}

.gloc-pill {
    flex-shrink: 0;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    background: #e2ecf1;
    letter-spacing: 0.02rem;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-display);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
}

.gloc-pill:hover {
    border-color: #374151;
    background: #e2ecf1;
    color: var(--apex-black);
}

.gloc-pill.active {
    border-color: var(--apex-black);
    color: var(--apex-black);
    font-weight: 700;
    background: #e2ecf1;
}

/* ── Card ── */
.gloc-card {
    display: flex;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: #e2ecf1;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    min-height: 390px;
}

/* ── Map col ── */
.gloc-map-col {
    flex: 0 0 30%;
    position: relative;
}

.gloc-map-iframe {
    width: 100%;
    height: 100%;
    min-height: 390px;
    border: none;
    display: block;
}

/* ── Info col ── */
.gloc-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 32px;
}

.gloc-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.gloc-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--apex-black);
    margin: 0;
}

.gloc-directions-btn {
    flex-shrink: 0;
    background: var(--apex-cyan);
    color: var(--apex-black) !important;
    border: none;
    border-radius: var(--r-pill);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-display);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: opacity .2s;
}

.gloc-directions-btn:hover {
    opacity: .85;
}

/* ── Panels ── */
.gloc-panel {
    flex: 1;
}

.gloc-panel-hidden {
    display: none;
}

.gloc-country {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

.gloc-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.gloc-detail-label {
    font-size: 30px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
}

.gloc-detail-val {
    font-size: 14px;
    color: #374151;
    margin-bottom: 4px;
    line-height: 1.5;
}

/* Hours table */
.gloc-hours-table {
    width: 100%;
    border-collapse: collapse;
}

.gloc-hours-table tr+tr td {
    padding-top: 6px;
}

.gloc-day {
    font-size: 15px;
    font-weight: 700;
    color: var(--apex-black);
    width: 195px;
    padding-right: 16px;
    letter-spacing: 0.05rem;
}

.gloc-time {
    font-size: 14px;
    color: #374151;
    letter-spacing: 0.05rem;
}

.gloc-to {
    color: #000;
    font-weight: 800;
}

/* ── Bottom row ── */
.gloc-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 16px 0;
}

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

.gloc-open-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--apex-black);
    margin: 0;
}

.gloc-bottom-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gloc-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: color .2s;
    font-family: inherit;
}

.gloc-toggle-btn:hover {
    color: var(--apex-black);
}

.gloc-book-btn {
    background: var(--apex-cyan);
    color: var(--apex-black) !important;
    border: none;
    border-radius: var(--r-pill);
    padding: 11px 26px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-display);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: opacity .2s;
}

.gloc-book-btn:hover {
    opacity: .85;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .gloc-card {
        flex-direction: column;
    }

    .gloc-map-col {
        flex: none;
    }

    .gloc-map-iframe {
        min-height: 260px;
    }

    .gloc-info-col {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .gloc-info-top {
        flex-direction: column;
    }

    .gloc-details-grid {
        grid-template-columns: 1fr;
        gap: 12px 0;
    }

    .gloc-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* .gloc-day's fixed 195px (sized for the wider desktop card) left
       only ~59px for .gloc-time in this card's ~254px-wide table on
       phone -- "8:00 AM to 6:00 PM" wrapped across 3 lines and every
       row ballooned to ~92px tall. 100px is enough for "Wednesday",
       the longest day name, and leaves the time column comfortable
       room to stay on one line. */
    .gloc-day {
        width: 100px;
        padding-right: 8px;
    }
}

/* ══════════════════════════════════════════════════════════════
   MEMBERSHIP / REWARDS / APP — mrs-*
   ══════════════════════════════════════════════════════════════ */
.mrs-section {
    padding: clamp(50px, 8vw, 50px) 0;
    background: #ffffff;
}

.mrs-head {
    text-align: center;
    margin-bottom: 48px;
}

.mrs-head .eyebrow {
    color: var(--apex-cyan);
}

.mrs-head h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--apex-black);
    line-height: 1.2;
    margin: 12px 0;
}

.mrs-head p {
    font-size: 16px;
    color: #6b7280;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Grid ── */
.mrs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ── Card base ── */
.mrs-card {
    border-radius: var(--r-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Dark card (Membership) */
.mrs-card-membership {
    background: #151a21;
    border: 1.5px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.07);
}

/* Cyan glow blob */
.mrs-card-glow {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

/* White card (Rewards) */
.mrs-card-rewards {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Gray card (App) */
.mrs-card-app {
    background: #f4f6f8;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* ── Top row: icon + tag ── */
.mrs-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* ── Icon circle ── */
.mrs-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.15);
    border: 1.5px solid rgba(0, 212, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--apex-cyan);
    flex-shrink: 0;
}

.mrs-icon-light {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.2);
    color: #0ea5c9;
}

/* ── Tag pill ── */
.mrs-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--apex-cyan);
    color: #0b0f14;
}

.mrs-tag-light {
    background: #e0f7ff;
    color: #0369a1;
}

/* ── Title ── */
.mrs-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 18px;
}

.mrs-title-dark {
    color: var(--apex-black);
}

/* ── Perk list ── */
.mrs-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.mrs-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #c9d0d8;
    font-weight: 500;
}

.mrs-perks li i {
    font-size: 16px;
    color: var(--apex-cyan);
    flex-shrink: 0;
}

.mrs-perks-dark li {
    color: #374151;
}

.mrs-perks-dark li i {
    color: #0ea5c9;
}

/* ── Price row ── */
.mrs-price-row {
    margin-bottom: 20px;
}

.mrs-price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mrs-price-amt {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--apex-cyan);
    line-height: 1;
}

.mrs-price-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mrs-price-unit {
    font-size: 14px;
    color: #8a939f;
    font-weight: 500;
}

.mrs-save-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(0, 212, 255, 0.15);
    color: var(--apex-cyan);
    border-radius: 99px;
    padding: 2px 8px;
    display: inline-block;
}

/* ── CTA buttons ── */
.mrs-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--r-pill);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
    text-decoration: none;
    transition: opacity .2s, transform .15s;
    background: var(--apex-cyan);
    color: #0b0f14 !important;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.mrs-cta-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.mrs-cta-outline {
    background: transparent;
    color: var(--apex-black) !important;
    border: 1.5px solid var(--apex-black);
}

.mrs-cta-outline:hover {
    background: var(--apex-black);
    color: #ffffff !important;
}

/* ── Points progress box ── */
.mrs-pts-box {
    background: #f0fafe;
    border: 1px solid #bae6fd;
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.mrs-pts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mrs-pts-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.mrs-pts-count {
    font-size: 13px;
    font-weight: 700;
    color: #0369a1;
}

.mrs-bar-track {
    height: 7px;
    background: #d1eaf7;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}

.mrs-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #0ea5c9);
    border-radius: 99px;
}

.mrs-pts-hint {
    font-size: 12px;
    color: #6b7280;
}

/* ── QR codes ── */
.mrs-qr-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.mrs-qr-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r-md);
    padding: 12px 8px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.mrs-qr-card:hover {
    border-color: #0ea5c9;
    box-shadow: 0 0 0 3px rgba(14, 165, 201, 0.12);
}

.mrs-qr-img {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    display: block;
}

.mrs-qr-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.mrs-qr-label i {
    font-size: 14px;
    color: #374151;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .mrs-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* Tablet: the 2-column CSS grid below assumes exactly 3 cards, which
   with an even 2-column split always orphans the 3rd into its own row,
   flush left with empty space beside it (visible today with the fixed
   Membership/Rewards/App trio, and this section is slated to become
   backend-conditional later -- sometimes 1 card, sometimes 2, sometimes
   3). Switched to a wrapping flex row instead: each card gets a
   comfortable fixed-ish width and wraps to a new line once it doesn't
   fit, and justify-content:center re-centers whatever's left on that
   line -- 1 card centers alone, 2 sit side by side, 3 give a centered
   pair-then-single instead of an orphan, all without hardcoding a
   column count that only works for one specific card count. */
@media (min-width: 576px) and (max-width: 991px) {
    .mrs-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        max-width: 100%;
    }

    .mrs-card {
        flex: 1 1 320px;
        max-width: 380px;
    }
}

@media (max-width: 768px) {
    .mrs-section {
        padding: 32px 0;
    }

    .mrs-head {
        margin-bottom: 28px;
    }

    /* .mrs-qr-row's 20px margin-bottom exists to space it from a CTA
       button below — the App card is the only one that ends on the QR
       row with no button after it, so that margin is just dead space
       stacked on top of the card's own bottom padding. */
    .mrs-qr-row {
        margin-bottom: 0;
    }
}

/* ============================================================
   MEMBERSHIP PAGE — HERO + ABOVE-REVIEWS SECTIONS
   ============================================================ */
.mem-hero {
    padding: 64px 0 0;
    background: linear-gradient(120deg, rgba(11, 15, 20, .92), rgba(11, 15, 20, .75)),
        url('https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?w=1600&q=80') center/cover no-repeat;
    overflow: hidden;
}

.mem-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    padding-bottom: 56px;
}

.mem-hero-content h1 {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.12;
    color: var(--apex-white);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.mem-hero-content h1 .accent {
    background: linear-gradient(90deg, var(--apex-cyan), var(--apex-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mem-hero-content>p {
    font-size: 1.05rem;
    color: var(--apex-grey-300);
    max-width: 50ch;
    line-height: 1.65;
    margin-bottom: 28px;
}

.mem-hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.mem-hero-stat .num {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1;
}

.mem-hero-stat .num .accent {
    color: var(--apex-cyan);
}

.mem-hero-stat .lbl {
    font-size: .8rem;
    color: var(--apex-grey-500);
    margin-top: 4px;
}

.mem-hero-badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    align-items: flex-start;
}

.mem-hero-badge {
    display: inline-flex;
    width: auto;
    max-width: 290px;
    align-items: center;
    gap: 14px;
    background: rgba(15, 19, 25, .72);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 14px 18px;
    color: var(--apex-white);
}

.mem-hero-badge-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 212, 255, .14);
    color: var(--apex-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.mem-hero-badge strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
}

.mem-hero-badge span {
    display: block;
    font-size: .78rem;
    color: var(--apex-grey-500);
}

/* Sits below .mem-hero-badges now (see membership.blade.php), making it
   a 3rd item in .mem-hero-inner's 2-column grid -- span both columns so
   it centers under the full row instead of collapsing into just the
   first column's width. */
.mem-hero-cta {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .mem-hero-inner {
        grid-template-columns: 1fr;
    }

    .mem-hero-badges {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mem-hero-badge {
        flex: 1 1 220px;
    }

    .mem-hero-cta {
        justify-content: flex-start;
    }
}

/* Private events / pop-up detailing */
.mem-private-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.mem-private-img {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .13);
}

.mem-private-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.mem-private-badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: rgba(255, 255, 255, .96);
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.mem-private-badge strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--apex-black);
}

.mem-private-badge span {
    display: block;
    font-size: .76rem;
    color: var(--apex-grey-700);
}

.mem-private-content h2 {
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 800;
    margin: 10px 0 14px;
    letter-spacing: -0.02em;
}

.mem-private-content>p {
    color: var(--apex-grey-700);
    font-size: .98rem;
    line-height: 1.65;
    margin-bottom: 22px;
}

.mem-private-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mem-private-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .94rem;
    color: var(--apex-grey-700);
}

.mem-private-list svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--apex-cyan-2, #00b8d9);
}

@media (max-width: 900px) {
    .mem-private-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .mem-private-img img {
        height: 280px;
    }
}

/* A new approach to car care */
.mem-approach-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.mem-approach-list {
    margin: 22px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mem-approach-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mem-approach-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 212, 255, .1);
    color: var(--apex-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mem-approach-item strong {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    color: var(--apex-white);
    margin-bottom: 4px;
}

.mem-approach-item p {
    font-size: .9rem;
    color: var(--apex-grey-300);
    line-height: 1.6;
    margin: 0;
}

.mem-approach-img img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .13);
    display: block;
}

@media (max-width: 900px) {
    .mem-approach-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Savings comparison cards — redesigned dark theme */
.mem-savings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mem-savings-card {
    background: var(--apex-surface);
    border: 1px solid var(--apex-line);
    border-radius: 18px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color .22s;
}

.mem-savings-card:hover {
    border-color: rgba(0, 212, 255, .3);
}

.mem-savings-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--apex-cyan), var(--apex-cyan-2));
}

.mem-sv-plan-chip {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(0, 212, 255, .12);
    color: var(--apex-cyan);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 99px;
    margin-bottom: 10px;
}

.mem-sv-scenario {
    font-size: .9rem;
    color: var(--apex-grey-300);
    margin: 0 0 16px;
    line-height: 1.4;
}

.mem-sv-hero {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 18px;
}

.mem-sv-big {
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--apex-cyan);
    letter-spacing: -0.03em;
    line-height: 1;
}

.mem-sv-big.mem-sv-big-incl {
    font-size: 2.3rem;
    color: var(--apex-green);
}

.mem-sv-big-unit {
    font-size: .85rem;
    color: var(--apex-grey-500);
    font-weight: 500;
}

.mem-sv-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(11, 15, 20, .45);
    border: 1px solid var(--apex-line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.mem-sv-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mem-sv-side-lbl {
    font-size: .68rem;
    color: var(--apex-grey-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.mem-sv-side-price {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.mem-sv-old {
    color: var(--apex-grey-700);
    text-decoration: line-through;
    text-decoration-color: rgba(74, 82, 96, .7);
}

.mem-sv-old small {
    font-size: .72rem;
    font-weight: 400;
}

.mem-sv-new {
    color: var(--apex-white);
}

.mem-sv-new small {
    font-size: .72rem;
    color: var(--apex-grey-300);
    font-weight: 400;
}

.mem-sv-arrow {
    flex-shrink: 0;
    color: var(--apex-cyan);
    opacity: .6;
}

.mem-sv-pct {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    background: rgba(31, 193, 107, .1);
    color: var(--apex-green);
    font-size: .78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid rgba(31, 193, 107, .2);
}

@media (max-width: 760px) {
    .mem-savings-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ WHY WE CAPTURE PHOTOS */
.wcp-section {
    background: #0b0f14;
    padding: 100px 0 80px;
}

.wcp-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}

.wcp-h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1.2;
    margin: 14px 0 16px;
}

.wcp-amp {
    color: var(--apex-cyan);
}

.wcp-sub {
    font-size: 1.05rem;
    color: var(--apex-grey-500);
    line-height: 1.7;
}

/* 4-card grid */
.wcp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 56px;
}

.wcp-card {
    background: #131820;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 32px 28px 28px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: hidden;
}

.wcp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    transition: opacity .3s;
}

.wcp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .4);
}

.wcp-card:hover::before {
    opacity: 1;
}

/* Card number watermark */
.wcp-card-num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, .04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Icon wrapper */
.wcp-card-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.wcp-icon-cyan {
    background: rgba(0, 212, 255, .12);
    color: var(--apex-cyan);
}

.wcp-icon-amber {
    background: rgba(251, 191, 36, .12);
    color: #fbbf24;
}

.wcp-icon-purple {
    background: rgba(167, 139, 250, .12);
    color: #a78bfa;
}

.wcp-icon-green {
    background: rgba(52, 211, 153, .12);
    color: #34d399;
}

.wcp-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--apex-white);
    margin-bottom: 12px;
    line-height: 1.35;
}

.wcp-card p {
    font-size: .9rem;
    color: var(--apex-grey-500);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Bottom tag */
.wcp-card-tag {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--apex-grey-500);
}

/* Top accent line per card color */
.wcp-grid .wcp-card:nth-child(1) {
    border-top: 2px solid var(--apex-cyan);
}

.wcp-grid .wcp-card:nth-child(2) {
    border-top: 2px solid #fbbf24;
}

.wcp-grid .wcp-card:nth-child(3) {
    border-top: 2px solid #a78bfa;
}

.wcp-grid .wcp-card:nth-child(4) {
    border-top: 2px solid #34d399;
}

/* Flow timeline */
.wcp-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 16px;
}

.wcp-flow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--apex-grey-500);
    white-space: nowrap;
}

.wcp-flow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wcp-dot-cyan {
    background: var(--apex-cyan);
    box-shadow: 0 0 8px rgba(0, 212, 255, .5);
}

.wcp-dot-amber {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, .5);
}

.wcp-dot-purple {
    background: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, .5);
}

.wcp-dot-green {
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, .5);
}

.wcp-flow-line {
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .wcp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wcp-grid {
        grid-template-columns: 1fr;
    }

    .wcp-flow-line {
        width: 24px;
    }
}

/* ═══════════════ Gallery — Category Sliders ═══════════════ */

.gallery-cat-section {
    padding: 30px 0 40px;
    overflow: hidden;
}

.gallery-cat-head {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-cat-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--apex-black);
    background: var(--apex-paper);
    border: 1.5px solid var(--apex-cyan);
    padding: 8px 20px;
    border-radius: var(--r-pill);
    margin-bottom: 18px;
}

.gallery-cat-head .eyebrow::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--apex-cyan);
}

.gallery-cat-section[style*="apex-paper"] .gallery-cat-head .eyebrow {
    background: var(--apex-white);
}

.gallery-cat-head h2 {
    font-family: var(--ff-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--apex-black);
    letter-spacing: -0.02em;
    margin: 8px 0 12px;
}

.gallery-cat-head h2 .accent {
    color: var(--apex-cyan-2);
}

.gallery-cat-sub {
    max-width: 560px;
    margin: 0 auto;
    color: var(--apex-grey-500);
    line-height: 1.6;
    font-size: 1.1rem;
}

.gallery-cat-section .ba-marquee-outer {
    width: 100%;
    overflow: hidden;
}

@media (max-width: 760px) {
    /* Was 48px top / 40px bottom -- with no margin between adjacent
       .gallery-cat-section elements, that stacked into an 88px dead
       gap between one category's marquee and the next category's
       heading on every section boundary on the page. */
    .gallery-cat-section {
        padding: 24px 0;
    }

    .gallery-cat-head {
        margin-bottom: 20px;
    }
}



/* ── HIW: Photo Documentation merged step ── */
.hiw-dot-cam {
    background: var(--apex-surface);
    border: 2px solid rgba(0, 212, 255, .4);
    color: var(--apex-cyan);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hiw-step-photo>.hiw-step-body>h4 {
    color: var(--apex-white);
}

.hiw-photo-merge {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    align-items: stretch;
}

.hiw-pm-card {
    flex: 1;
    display: flex;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid;
    transition: transform .2s;
}

.hiw-pm-card:hover {
    transform: translateY(-2px);
}

.hiw-pm-cyan {
    background: rgba(0, 212, 255, .07);
    border-color: rgba(0, 212, 255, .2);
}

.hiw-pm-amber {
    background: rgba(255, 176, 0, .07);
    border-color: rgba(255, 176, 0, .2);
}

.hiw-pm-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hiw-pm-cyan .hiw-pm-icon {
    background: rgba(0, 212, 255, .15);
    color: var(--apex-cyan);
}

.hiw-pm-amber .hiw-pm-icon {
    background: rgba(255, 176, 0, .15);
    color: var(--apex-amber);
}

.hiw-pm-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hiw-pm-body strong {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
}

.hiw-pm-cyan .hiw-pm-body strong {
    color: var(--apex-cyan);
}

.hiw-pm-amber .hiw-pm-body strong {
    color: var(--apex-amber);
}

.hiw-pm-body span {
    font-size: .76rem;
    color: var(--apex-grey-500);
    line-height: 1.5;
}

.hiw-pm-or {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--apex-grey-700);
    letter-spacing: .08em;
    flex-shrink: 0;
    padding: 0 2px;
}

@media (max-width: 540px) {
    .hiw-photo-merge {
        flex-direction: column;
    }

    .hiw-pm-or {
        justify-content: center;
    }
}

/* ============================================================
   PHOTO UPLOAD STEPS — pus-section
   ============================================================ */
.pus-section {
    background: var(--apex-paper);
    padding: 88px 0 72px;
    overflow: hidden;
}

.pus-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 56px;
}

.pus-head h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: var(--apex-black);
    margin: 10px 0 12px;
    line-height: 1.2;
}

.pus-sub {
    color: var(--apex-grey-700);
    font-size: .95rem;
    line-height: 1.65;
}

/* Flow: steps + arrow */
.pus-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

/* Step wrapper */
.pus-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Card */
.pus-card {
    width: 300px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    background: #fff;
    border: 1.5px solid rgba(0, 212, 255, .18);
    transition: transform .3s, box-shadow .3s;
}

.pus-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 56px rgba(0, 212, 255, .15);
}

.pus-card-amber {
    border-color: rgba(255, 176, 0, .2);
}

.pus-card-amber:hover {
    box-shadow: 0 18px 56px rgba(255, 176, 0, .15);
}

/* Card image */
.pus-card-img {
    position: relative;
    height: 210px;
    background-size: cover;
    background-position: center;
}

.pus-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .6) 100%);
}

.pus-overlay-amber {
    background: linear-gradient(180deg, rgba(20, 10, 0, .28) 0%, rgba(30, 15, 0, .65) 100%);
}

/* Checklist overlay */
.pus-checklist {
    position: absolute;
    bottom: 14px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pus-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.pus-check-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--apex-cyan);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pus-check-dot::after {
    content: '';
    width: 6px;
    height: 4px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg) translate(1px, -1px);
    position: absolute;
}

/* Camera button */
.pus-cam-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-black);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: transform .2s;
}

.pus-cam-btn:hover {
    transform: scale(1.08);
}

.pus-cam-amber {
    background: rgba(255, 176, 0, .15);
    color: var(--apex-amber);
    border: 1.5px solid rgba(255, 176, 0, .3);
}

/* Pin markers */
.pus-pins {
    position: absolute;
    inset: 0;
}

.pus-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.pus-pin-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--apex-amber);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(255, 176, 0, .3);
    animation: pus-pulse 2s infinite;
}

@keyframes pus-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.75);
        opacity: .6;
    }
}

.pus-pin-tip {
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Card footer */
.pus-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-top: 1px solid #eef0f3;
}

.pus-footer-amber {
    background: #fffdf5;
    border-top-color: rgba(255, 176, 0, .12);
}

.pus-footer-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 212, 255, .09);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pus-footer-amber .pus-footer-icon {
    background: rgba(255, 176, 0, .1);
}

.pus-footer-text {
    flex: 1;
}

.pus-footer-text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--apex-black);
}

.pus-footer-text span {
    font-size: 11.5px;
    color: var(--apex-grey-500);
}

.pus-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--apex-green);
    flex-shrink: 0;
    animation: pus-pulse 2s infinite;
}

.pus-dot-amber {
    background: var(--apex-amber) !important;
}

/* Dashed deco circles */
.pus-deco {
    position: absolute;
    top: 50%;
    right: -52px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

.pus-deco-right {
    right: auto;
    left: -52px;
}

/* Arrow + OR connector */
.pus-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pus-arrow span {
    font-size: 11px;
    font-weight: 800;
    color: var(--apex-grey-700);
    letter-spacing: .1em;
}

/* Step label */
.pus-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--apex-black);
}

.pus-label-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--apex-black);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pus-num-amber {
    background: var(--apex-amber);
    color: var(--apex-black);
}

/* Bottom note */
.pus-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 40px;
    font-size: 13px;
    color: var(--apex-grey-700);
}

/* Responsive */
@media (max-width: 860px) {
    .pus-flow {
        flex-direction: column;
    }

    .pus-arrow {
        flex-direction: row;
        gap: 10px;
    }

    .pus-arrow svg {
        transform: rotate(90deg);
    }

    .pus-deco {
        display: none;
    }

    .pus-card {
        width: 280px;
    }
}

/* ============================================================
   PD2 SPLIT-SCREEN SECTION (from main — CSS was missing)
   ============================================================ */
.pd2-section {
    background: var(--apex-black);
    overflow: hidden;
}

.pd2-wrap {
    display: flex;
    min-height: 600px;
    position: relative;
}

.pd2-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 56px 48px;
    overflow: hidden;
    transition: flex .5s cubic-bezier(.4, 0, .2, 1);
}

.pd2-panel:hover {
    flex: 1.08;
}

.pd2-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform .6s ease;
}

.pd2-panel:hover .pd2-panel-bg {
    transform: scale(1);
}

.pd2-panel-overlay {
    position: absolute;
    inset: 0;
}

.pd2-overlay-cyan {
    background: linear-gradient(160deg, rgba(0, 40, 55, .85) 0%, rgba(0, 15, 22, .94) 100%);
}

.pd2-overlay-amber {
    background: linear-gradient(160deg, rgba(40, 25, 0, .85) 0%, rgba(20, 10, 0, .94) 100%);
}

.pd2-panel-content {
    position: relative;
    z-index: 2;
    max-width: 460px;
}

.pd2-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.pd2-label-cyan {
    background: rgba(0, 212, 255, .15);
    color: var(--apex-cyan);
    border: 1px solid rgba(0, 212, 255, .3);
}

.pd2-label-amber {
    background: rgba(255, 176, 0, .15);
    color: var(--apex-amber);
    border: 1px solid rgba(255, 176, 0, .3);
}

.pd2-heading {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--apex-white);
    line-height: 1.15;
    margin-bottom: 12px;
}

.pd2-desc {
    font-size: .88rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.7;
    margin-bottom: 24px;
}

.pd2-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.pd2-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pd2-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.pd2-circle-cyan {
    border-color: var(--apex-cyan);
    color: var(--apex-cyan);
    background: rgba(0, 212, 255, .1);
}

.pd2-circle-amber {
    border-color: var(--apex-amber);
    color: var(--apex-amber);
    background: rgba(255, 176, 0, .1);
}

.pd2-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd2-step-body strong {
    font-size: .83rem;
    font-weight: 700;
    color: var(--apex-white);
}

.pd2-step-body span {
    font-size: .76rem;
    color: rgba(255, 255, 255, .48);
    line-height: 1.5;
}

.pd2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pd2-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
}

.pd2-chip-cyan {
    background: rgba(0, 212, 255, .1);
    color: var(--apex-cyan);
    border: 1px solid rgba(0, 212, 255, .18);
}

.pd2-chip-amber {
    background: rgba(255, 176, 0, .1);
    color: var(--apex-amber);
    border: 1px solid rgba(255, 176, 0, .18);
}

.pd2-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    z-index: 10;
}

.pd2-divider-line {
    flex: 1;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .1), transparent);
}

.pd2-divider-or {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--apex-black);
    border: 1.5px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 255, 255, .35);
    flex-shrink: 0;
    margin: 6px 0;
}

.pd2-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 212, 255, .06);
    border-top: 1px solid rgba(0, 212, 255, .14);
    padding: 14px 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 860px) {
    .pd2-wrap {
        flex-direction: column;
        min-height: auto;
    }

    .pd2-panel {
        padding: 44px 24px;
        flex: 1 !important;
    }

    .pd2-divider {
        flex-direction: row;
        width: 100%;
        height: 44px;
        padding: 0 24px;
    }

    .pd2-divider-line {
        flex: 1;
        height: 1px;
        width: auto;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, .1), transparent);
    }
}

/* ============================================================
   PROOF BENTO — 1 big hero card + 3 small cards
   ============================================================ */

.proof-bento {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 14px;
    align-items: stretch;
}

/* ── Hero card ── */
.proof-hero-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 600px;
    background: var(--apex-ink);
}

.proof-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .7s ease;
}

.proof-hero-card:hover .proof-hero-img {
    transform: scale(1.04);
}

/* ── Two 50/50 panels covering the full card ── */
.proof-hero-panels {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    z-index: 2;
}

.proof-hsp {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: flex .45s cubic-bezier(.4, 0, .2, 1);
}

.proof-hsp:hover {
    flex: 1.06;
}

/* full-height content column: centered vertically */
.proof-hsp-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 34px;
    gap: 22px;
}

/* top row: checklist + camera OR deco */
.proof-hsp-toprow {
    position: absolute;
    top: 24px;
    left: 34px;
    right: 34px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* middle: label + steps + chips */
.proof-hsp-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* bottom */
.proof-hsp-bottom {
    position: absolute;
    bottom: 26px;
    left: 34px;
    right: 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* checklist — inline in toprow */
.proof-hero-checklist {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.proof-hero-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 15px 8px 11px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    line-height: 1;
    width: fit-content;
}

.proof-hero-check svg {
    color: var(--apex-cyan);
    flex-shrink: 0;
}

/* camera button — inline in toprow (right side) */
.proof-hero-cam {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 212, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(0, 212, 255, .42);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-cyan);
    flex-shrink: 0;
    position: relative;
}

.proof-hero-cam-ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 212, 255, .28);
    animation: camRingSpin 10s linear infinite;
    pointer-events: none;
}

@keyframes camRingSpin {
    to {
        transform: rotate(360deg);
    }
}

/* deco circles inside right panel */
.proof-hero-deco {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, .07);
    pointer-events: none;
    z-index: 1;
}

.proof-hero-deco-1 {
    width: 200px;
    height: 200px;
    bottom: 80px;
    right: -60px;
}

.proof-hero-deco-2 {
    width: 320px;
    height: 320px;
    bottom: -100px;
    right: -100px;
}

/* bottom area inside left panel */
.proof-hsp-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* white toast card */
.proof-hero-toast {
    display: flex;
    align-items: center;
    gap: 13px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 14px 17px;
    color: var(--apex-black);
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.proof-hero-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--apex-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-black);
    flex-shrink: 0;
}

.proof-hero-toast-icon svg {
    width: 21px;
    height: 21px;
}

.proof-hero-toast>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.proof-hero-toast strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--apex-black);
}

.proof-hero-toast span {
    font-size: 12.5px;
    color: #666;
}

.proof-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2bd576;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(43, 213, 118, .7);
    animation: bentoDotPulse 2.2s ease-in-out infinite;
}

@keyframes bentoDotPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.8);
    }
}

/* "1 You upload" tag */
.proof-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(0, 212, 255, .13);
    border: 1px solid rgba(0, 212, 255, .32);
    color: var(--apex-cyan);
    font-size: 13.5px;
    font-weight: 700;
    padding: 7px 16px 7px 7px;
    border-radius: 24px;
    width: fit-content;
}

.proof-hero-tag b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--apex-cyan);
    color: var(--apex-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
}

/* vertical divider between the two side-by-side panels */
/* .proof-hsp-amber {
    border-left: 1px solid rgba(255, 255, 255, .08);
} */

/* colour overlays on the main hero bg image */
.proof-hsp-overlay {
    position: absolute;
    inset: 0;
}

.proof-hsp-ov-cyan {
    background: linear-gradient(170deg, rgba(0, 50, 70, .82) 0%, rgba(0, 18, 28, .92) 100%);
}

.proof-hsp-ov-amber {
    background: linear-gradient(170deg, rgba(50, 28, 0, .82) 0%, rgba(20, 10, 0, .92) 100%);
}

/* right-aligned variant (amber panel) */
/* .proof-hsp-right .proof-hsp-content {
    text-align: right;
} */

/* .proof-hsp-right .proof-hero-steps-hd {
    margin-left: auto;
}

.proof-hsp-right .proof-hero-step {
    flex-direction: row-reverse;
}

.proof-hsp-right .proof-hero-step>div {
    text-align: right;
} */

/* .proof-hsp-right .proof-hero-step>div strong,
.proof-hsp-right .proof-hero-step>div span {
    display: block;
    text-align: right;
} */

/* .proof-hsp-right .proof-hero-chips {
    justify-content: flex-end;
} */

/* group header label */
.proof-hero-steps-hd {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: 22px;
    margin-bottom: 6px;
    width: fit-content;
}

.proof-hero-steps-hd svg {
    width: 15px;
    height: 15px;
}

.proof-steps-hd-cyan {
    background: rgba(0, 212, 255, .15);
    border: 1px solid rgba(0, 212, 255, .32);
    color: var(--apex-cyan);
}

.proof-steps-hd-amber {
    background: rgba(255, 176, 0, .15);
    border: 1px solid rgba(255, 176, 0, .32);
    color: var(--apex-amber);
}

/* individual step row */
.proof-hero-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.proof-hero-step-n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid;
}

.phsn-cyan {
    border-color: rgba(0, 212, 255, .5);
    background: rgba(0, 212, 255, .14);
    color: var(--apex-cyan);
}

.phsn-amber {
    border-color: rgba(255, 176, 0, .5);
    background: rgba(255, 176, 0, .14);
    color: var(--apex-amber);
}

.proof-hero-step>div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.proof-hero-step>div strong {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.proof-hero-step>div span {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.45;
}

/* chips */
.proof-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 6px;
}

.proof-hero-chips span {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

.proof-chips-cyan span {
    background: rgba(0, 212, 255, .1);
    border: 1px solid rgba(0, 212, 255, .22);
    color: rgba(0, 212, 255, .85);
}

.proof-chips-amber span {
    background: rgba(255, 176, 0, .1);
    border: 1px solid rgba(255, 176, 0, .22);
    color: rgba(255, 176, 0, .85);
}

/* ── 3 small cards column ── */
.proof-smalls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* card = transparent wrapper — image + tag, no body text */
.proof-small-card {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    transition: transform .3s ease;
}

.proof-small-card:hover {
    transform: translateY(-4px);
}

/* full-bleed image visual — matches old proof-visual style */
.proof-small-img {
    height: 170px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}

.proof-small-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 55%);
}

/* tag below card — matches old proof-stage-tag style */
.proof-small-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--apex-grey-700, #4a5568);
    text-align: center;
}

.proof-small-tag b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--apex-black);
    color: var(--apex-white);
    font-size: .85rem;
    font-weight: 800;
    margin-right: 9px;
    flex-shrink: 0;
    transition: background .25s ease, transform .25s ease;
}

.proof-small-card:hover .proof-small-tag b {
    background: var(--apex-cyan);
    transform: scale(1.12);
}

/* review card visual area — light bg with confetti + happy face */
.proof-review-visual {
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .10);
}

.proof-review-visual .proof-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.proof-review-visual .proof-mini-toast {
    font-size: 11px;
    padding: 9px 11px;
    border-radius: 11px;
}

.proof-review-visual .proof-mini-toast .proof-toast-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.proof-review-visual .proof-mini-toast .proof-toast-text strong {
    font-size: 11.5px;
}

.proof-review-visual .proof-mini-toast .proof-toast-text span {
    font-size: 10px;
}

/* live ping/badge inside small card images */
.proof-small-img .proof-live-ping {
    position: absolute;
    top: 10px;
    right: 10px;
}

.proof-small-img .proof-live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

/* before/after compare inside small card */
.proof-small-card .proof-compare {
    height: 170px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .proof-bento {
        grid-template-columns: 1fr 310px;
    }

    .proof-hsp-content {
        padding: 18px;
    }
}

@media (max-width: 860px) {
    .proof-bento {
        grid-template-columns: 1fr;
    }

    /* Below this width the two panels stack instead of sitting side by
       side, but they were still laid out as absolute overlays over a
       fixed-height card (built for two full-height 600px columns) --
       each stacked panel only got half that height, nowhere near enough
       room for its checklist/camera row + 3 steps + toast, so the
       absolutely-positioned toast at the bottom of the cyan panel
       visually overlapped the step list above it. Switch every panel
       to a normal, height:auto flow instead: the card's height (and
       its full-bleed background image, which covers it via inset:0)
       now simply grows to fit whatever content each stacked panel
       actually needs. */
    .proof-hero-card {
        min-height: unset;
    }

    .proof-hero-panels {
        position: static;
        flex-direction: column;
    }

    .proof-hsp {
        position: relative;
    }

    .proof-hsp-content {
        position: static;
        height: auto;
        padding: 22px 20px;
    }

    .proof-hsp-toprow {
        position: static;
        margin-bottom: 4px;
    }

    .proof-hsp-bottom {
        position: static;
        margin-top: 4px;
    }

    .proof-hsp-amber {
        border-left: none;
    }

    .proof-hsp-right .proof-hsp-toprow {
        display: none;
    }

    /* Stacked, the cyan "You document it" half and amber "We document it"
       half read as two unrelated cards rather than one story. Drop the
       divider and give both halves the same neutral wash so the seam
       disappears, then continue the step numbering 1-6 straight through
       instead of restarting at 1, so it reads as a single 6-step flow. */
    .proof-hsp-ov-cyan,
    .proof-hsp-ov-amber {
        background: linear-gradient(180deg, rgba(8, 12, 18, .86) 0%, rgba(6, 8, 12, .94) 100%);
    }

    .proof-hero-panels {
        counter-reset: proofStep;
    }

    /* Condense to a small, single-color list of the major points only --
       once the two halves already read as one flow, the checklist row,
       camera button, chip rows, subtext under each step, and the white
       "before photo" toast card are all filler on a phone screen. Keep
       just the two phase labels and the 6 step titles. */
    .proof-hsp-toprow,
    .proof-hero-chips,
    .proof-hsp-bottom {
        display: none;
    }

    .proof-hero-step>div span {
        display: none;
    }

    .proof-hsp-content {
        padding: 16px 18px;
        gap: 12px;
    }

    .proof-hsp-steps {
        gap: 10px;
    }

    .proof-hero-step {
        gap: 10px;
    }

    /* Each step becomes its own small tinted card with a glowing filled
       badge instead of a bare row -- reads as a proper checklist rather
       than a plain list of lines. */
    .proof-hero-step {
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 9px 12px;
        align-items: center;
    }

    .proof-hero-step-n {
        width: 26px;
        height: 26px;
        font-size: 0;
        border: none;
        background: linear-gradient(135deg, var(--apex-cyan) 0%, #0090b5 100%);
        color: #04141c;
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.35);
    }

    .proof-hero-step-n::before {
        counter-increment: proofStep;
        content: counter(proofStep);
        font-size: 12.5px;
        font-weight: 800;
    }

    .proof-hero-step>div strong {
        font-size: 14.5px;
    }

    /* One color throughout instead of cyan (You document it) vs amber
       (We document it). */
    .proof-steps-hd-amber {
        background: rgba(0, 212, 255, 0.15);
        border-color: rgba(0, 212, 255, 0.32);
        color: var(--apex-cyan);
    }

    /* Soft glow behind the whole card for depth instead of a flat wash,
       plus a subtle divider between the two step groups now that the
       chip rows/toast between them are gone. */
    .proof-hsp-ov-cyan,
    .proof-hsp-ov-amber {
        background:
            radial-gradient(120% 55% at 50% 0%, rgba(0, 212, 255, 0.10), transparent 60%),
            linear-gradient(180deg, rgba(8, 12, 18, .92) 0%, rgba(6, 8, 12, .96) 100%);
    }

    .proof-hsp-amber {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .proof-hero-card {
        border: 1px solid rgba(0, 212, 255, 0.18);
    }

    .proof-smalls {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .proof-small-card {
        flex: 1 1 calc(50% - 7px);
        min-width: 200px;
    }
}

/* Tablet: the 860px block above stacks "You document it" / "We document
   it" into one column and, since they read as a single continuous flow
   once stacked, recolors the amber panel to the same cyan as the other
   one -- both the "WE DOCUMENT IT" pill and its step-number badges end
   up cyan instead of amber. Tablet has the width for the two condensed
   columns to sit side by side instead, so put them back into a row and
   restore the amber panel's own color here. Placed after the 860px
   block so it wins in their 768-860px overlap. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .proof-hero-panels {
        flex-direction: row;
    }

    .proof-steps-hd-amber {
        background: rgba(255, 176, 0, .15);
        border-color: rgba(255, 176, 0, .32);
        color: var(--apex-amber);
    }

    .proof-hsp-right .proof-hero-step-n {
        background: rgba(255, 176, 0, .14);
        border-color: rgba(255, 176, 0, .5);
        color: var(--apex-amber);
    }

    .proof-hsp-amber {
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* The three small "We finish / You compare / You review" cards'
       image/compare/review-visual areas are a fixed 170px tall at every
       width -- fine for the ~350-360px-wide desktop sidebar card they
       were sized for, but on tablet .proof-smalls ends up rendering
       these much wider (either full-width, in the 860px block's 2-per-
       row wrap, or as the ~310-620px narrow sidebar column at 861-
       991.98px), so 170px reads as short and flat. Sized up for the
       tablet band specifically. */
    .proof-small-img,
    .proof-review-visual,
    .proof-small-card .proof-compare {
        height: 240px;
    }
}

@media (max-width: 560px) {
    .proof-hsp-content {
        padding: 18px 16px;
    }

    .proof-smalls {
        flex-direction: column;
    }

    .proof-small-card {
        flex: unset;
    }
}

/* ============================================================
   BOOK IN 11 SECONDS — Clock + Sides Layout
   ============================================================ */
.bk11-section {
    background: var(--apex-black);
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
}

.bk11-section::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.07) 0%, transparent 65%);
    pointer-events: none;
}

/* Head */
.bk11-head {
    text-align: center;
    margin-bottom: 40px;
}

.bk11-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1.18;
    margin: 12px 0 16px;
    letter-spacing: -0.02em;
}

.bk11-accent {
    color: var(--apex-cyan);
}

.bk11-accent-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.bk11-sub {
    color: var(--apex-grey-300);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto 24px;
}

/* Google badge */
.bk11-google-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-pill);
    padding: 7px 18px;
    font-size: 13px;
    color: var(--apex-grey-300);
}

/* ── Arena ── */
.bk11-arena {
    display: grid;
    grid-template-columns: 1fr 260px 1fr;
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Columns ── */
.bk11-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Step card ── */
.bk11-sc {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--apex-line);
    background: var(--apex-surface);
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: default;
}

.bk11-sc-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 18px;
    position: relative;
    z-index: 1;
}

.bk11-sc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--apex-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-grey-500);
    flex-shrink: 0;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.bk11-sc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bk11-sc-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--apex-grey-700);
    letter-spacing: 0.08em;
    line-height: 1;
}

.bk11-sc-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--apex-grey-300);
    transition: color 0.3s;
    line-height: 1.3;
}

.bk11-sc-sub {
    font-size: 11px;
    color: var(--apex-grey-700);
    line-height: 1.4;
}

.bk11-sc-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(31, 193, 107, 0.12);
    border: 1px solid rgba(31, 193, 107, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1fc16b;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s, transform 0.3s;
}

/* Glow sweep bg */
.bk11-sc-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 212, 255, 0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
}

/* ── ACTIVE state ── */
.bk11-sc.bk-active {
    border-color: rgba(0, 212, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15), 0 8px 32px -8px rgba(0, 212, 255, 0.3);
}

.bk11-sc.bk-active .bk11-sc-glow {
    opacity: 1;
}

.bk11-sc.bk-active .bk11-sc-icon {
    color: var(--apex-cyan);
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.1);
}

.bk11-sc.bk-active .bk11-sc-num {
    color: var(--apex-cyan);
}

.bk11-sc.bk-active .bk11-sc-title {
    color: var(--apex-white);
}

/* ── DONE state ── */
.bk11-sc.bk-done {
    border-color: rgba(31, 193, 107, 0.3);
    opacity: 0.75;
}

.bk11-sc.bk-done .bk11-sc-icon {
    color: #1fc16b;
    border-color: rgba(31, 193, 107, 0.35);
    background: rgba(31, 193, 107, 0.08);
}

.bk11-sc.bk-done .bk11-sc-check {
    opacity: 1;
    transform: scale(1);
}

.bk11-sc.bk-done .bk11-sc-num {
    color: #1fc16b;
}

.bk11-sc.bk-done .bk11-sc-title {
    color: var(--apex-grey-300);
}

/* Pay card */
.bk11-sc-pay {
    width: 100%;
}

.bk11-sc-pay.bk-active {
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.25), 0 0 40px 0 rgba(0, 212, 255, 0.25);
}

/* ── Clock ── */
.bk11-clock-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bk11-clock {
    position: relative;
    width: 240px;
    height: 240px;
    flex-shrink: 0;
}

.bk11-clock-svg {
    width: 100%;
    height: 100%;
}

.bk11-clock-svg #bk11Arc,
.bk11-clock-svg #bk11ArcGlow {
    transition: stroke-dashoffset 0.12s linear;
}

.bk11-clock-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bk11-clock-num {
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.bk11-clock-unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--apex-grey-500);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Moving dot on arc tip */
.bk11-clock-svg #bk11Dot {
    filter: drop-shadow(0 0 4px #00d4ff);
}

/* Booked overlay */
.bk11-booked {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(11, 15, 20, 0.88);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s, transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

.bk11-booked span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: #1fc16b;
    letter-spacing: -0.02em;
}

.bk11-booked-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ── CTA ── */
.bk11-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 56px;
}

/* ── Responsive ── */
@media (max-width: 960px) {

    /* Desktop splits the 6 steps into two DOM containers -- odd steps
       (1,3,5) in .bk11-col-left, even steps (2,4,6) in .bk11-col-right --
       flanking the clock in the middle, which only makes visual sense
       side by side. Stacked into one mobile column, that DOM order
       rendered as 1,3,5,2,4,6: steps read out of sequence, which is
       exactly the "random" ordering this fixes. display:contents drops
       each wrapper as a box (its cards become direct items of the
       .bk11-arena grid below) without touching the DOM the step-animator
       script reads data-bk-step from, and an explicit order per step
       puts them back in true 1-6 sequence regardless of which wrapper
       they came from. */
    .bk11-arena {
        grid-template-columns: 1fr;
        justify-items: stretch;
        gap: 14px;
    }

    .bk11-col-left,
    .bk11-col-right {
        display: contents;
    }

    .bk11-clock-col {
        order: -1;
        margin: 0 auto 10px;
    }

    .bk11-sc[data-bk-step="1"] {
        order: 1;
    }

    .bk11-sc[data-bk-step="2"] {
        order: 2;
    }

    .bk11-sc[data-bk-step="3"] {
        order: 3;
    }

    .bk11-sc[data-bk-step="4"] {
        order: 4;
    }

    .bk11-sc[data-bk-step="5"] {
        order: 5;
    }

    .bk11-sc[data-bk-step="6"] {
        order: 6;
    }

    /* The "Start Booking" button was the row's only remaining child
       once the trust pills were removed, and it's redundant here
       anyway (mobile already has the sticky CTA bar) -- hide the whole
       row rather than leaving its margin-top as dead blank space above
       the next section. */
    .bk11-cta-row {
        display: none;
    }
}

/* Tablet: the 960px block above puts every step into a single stacked
   column -- fine for phone, but tablet has the width to show 2 per
   row. Extended past 960px to 991.98px too, so the narrow 3-column
   desktop grid (each column ~260-310px at that width) doesn't reappear
   for the top end of the tablet band -- everything here duplicates the
   960px block's display:contents/order setup for the 961-991.98px
   sliver it doesn't reach (deliberately NOT widening that block itself
   -- its .bk11-cta-row rules assume the sticky mobile-cta-bar is
   covering booking, which only shows up to 767.98px, so hiding "Start
   Booking" up to 991.98px would leave tablet with no way to book from
   this section at all). Placed after the 960px block so it wins in
   their 576-960px overlap. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .bk11-arena {
        grid-template-columns: repeat(2, 1fr);
        justify-items: stretch;
        align-items: stretch;
        gap: 14px;
    }

    .bk11-col-left,
    .bk11-col-right {
        display: contents;
    }

    .bk11-clock-col {
        grid-column: 1 / -1;
        order: -1;
        margin: 0 auto 10px;
    }

    .bk11-sc[data-bk-step="1"] {
        order: 1;
    }

    .bk11-sc[data-bk-step="2"] {
        order: 2;
    }

    .bk11-sc[data-bk-step="3"] {
        order: 3;
    }

    .bk11-sc[data-bk-step="4"] {
        order: 4;
    }

    .bk11-sc[data-bk-step="5"] {
        order: 5;
    }

    .bk11-sc[data-bk-step="6"] {
        order: 6;
    }
}

/* 100px/88px of section padding plus .bk11-head's own 64px margin
   (unconditional at every width otherwise) read as a lot of dead air
   around "Booked in 11 seconds" on tablet -- the phone-only fix just
   below (max-width:520px) never reaches this range. */
@media (min-width: 521px) and (max-width: 991.98px) {
    .bk11-section {
        padding: 44px 0 40px;
    }

    .bk11-head {
        margin-bottom: 32px;
    }
}

@media (max-width: 520px) {
    .bk11-section {
        padding: 40px 0 36px;
    }

    .bk11-head {
        margin-bottom: 32px;
    }

    .bk11-clock {
        width: 200px;
        height: 200px;
    }

    .bk11-clock-num {
        font-size: 3rem;
    }
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.btt-btn {
    position: fixed;
    bottom: 28px;
    right: 22px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--apex-surface);
    color: var(--apex-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.34, 1.56, .64, 1), background 0.2s, box-shadow 0.2s;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.btt-btn.btt-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Hidden for as long as the instant-quote card's price/book row is on
   screen — see the IntersectionObserver in layout/main.blade.php — so
   this fixed button never sits on top of that row's own CTA. */
.btt-btn.btt-suppressed {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) scale(0.85) !important;
}

.btt-btn:hover {
    background: var(--apex-ink);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 8px 28px rgba(0, 212, 255, 0.2);
}

.btt-btn:active {
    transform: scale(0.94);
}

/* SVG ring sits on top of button, absolutely positioned */
.btt-ring {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    pointer-events: none;
}

.btt-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.btt-btn:hover .btt-icon {
    transform: translateY(-1px);
}

.btt-progress {
    transition: stroke-dashoffset 0.15s linear;
}

/* Mobile: sit above mobile CTA bar + chat widget */
@media (max-width: 768px) {
    .btt-btn {
        bottom: 156px;
        right: 14px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   ABOUT US SECTION (homepage) — bento image layout
   ============================================================ */
.abt-section {
    background: var(--apex-black);
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}

.abt-section::before {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.05) 0%, transparent 65%);
    pointer-events: none;
}

/* Grid */
.abt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

/* ── Images side ── */
.abt-images {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Main large image */
.abt-img-main {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-dark);
}

.abt-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.abt-img-main:hover img {
    transform: scale(1.03);
}

/* Dark gradient overlay on main image */
.abt-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 15, 20, 0.82) 0%, rgba(11, 15, 20, 0.1) 50%, transparent 100%);
    pointer-events: none;
}

/* Floating stat card at bottom of main image */
.abt-stat-card {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(11, 15, 20, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md);
    padding: 14px 18px;
}

.abt-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
}

.abt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.abt-stat-num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--apex-cyan);
    line-height: 1;
    letter-spacing: -0.02em;
}

.abt-stat-lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--apex-grey-500);
    white-space: nowrap;
}

.abt-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--apex-line);
    flex-shrink: 0;
}

/* Row of two smaller images */
.abt-img-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.abt-img-sm {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-card);
    transition: transform 0.4s ease;
}

.abt-img-sm:hover {
    transform: translateY(-3px);
}

.abt-img-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.abt-img-sm:hover img {
    transform: scale(1.05);
}

.abt-img-sm-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(11, 15, 20, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--apex-line);
    border-radius: var(--r-pill);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--apex-cyan);
}

/* IDA Certified badge */
.abt-ida-badge {
    position: absolute;
    top: -14px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--apex-surface);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--r-pill);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--apex-cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
    white-space: nowrap;
    z-index: 2;
}

.abt-ida-badge::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(0, 212, 255, 0.15);
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
}

/* ── Copy side ── */
.abt-copy {
    padding-bottom: 36px;
}

.abt-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 14px 0 22px;
}

.abt-heading-accent {
    color: var(--apex-cyan);
}

.abt-lead {
    font-size: 1.05rem;
    color: var(--apex-grey-300);
    line-height: 1.75;
    margin-bottom: 16px;
}

.abt-body {
    font-size: 0.95rem;
    color: var(--apex-grey-500);
    line-height: 1.75;
    margin-bottom: 28px;
}

/* Quote */
.abt-quote {
    position: relative;
    background: var(--apex-surface);
    border: 1px solid var(--apex-line);
    border-left: 3px solid var(--apex-cyan);
    border-radius: var(--r-md);
    padding: 20px 22px 18px 28px;
    margin: 0 0 28px;
}

.abt-quote-mark {
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--apex-cyan);
    opacity: 0.25;
    position: absolute;
    top: 8px;
    left: 14px;
    pointer-events: none;
}

.abt-quote p {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--apex-grey-300);
    line-height: 1.7;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
}

.abt-quote footer {
    font-size: 12px;
    font-weight: 700;
    color: var(--apex-cyan);
    letter-spacing: 0.04em;
}

/* Credential pills */
.abt-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.abt-cred {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--apex-line);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--apex-grey-300);
}

.abt-cred svg {
    color: var(--apex-cyan);
    flex-shrink: 0;
}

/* CTA row */
.abt-cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.abt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--apex-cyan);
    text-decoration: none;
    transition: gap 0.2s;
}

.abt-link:hover {
    gap: 10px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .abt-grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .abt-images {
        max-width: 560px;
        margin: 0 auto;
    }

    .abt-ida-badge {
        right: 12px;
        top: -12px;
    }
}

/* 96px of section padding plus .abt-grid's own 64px gap (both
   unconditional down to 960px) read as a lot of dead air on tablet,
   on top of the 960px block above already collapsing the grid to one
   column. The phone-only fix just below (max-width:560px) never
   reaches this range. */
@media (min-width: 561px) and (max-width: 991.98px) {
    .abt-section {
        padding: 44px 0;
    }

    .abt-grid {
        gap: 36px;
    }
}

@media (max-width: 560px) {
    .abt-section {
        padding: 32px 0 16px;
    }

    /* .abt-grid's own 64px gap (used at every width down to 960px)
       separates the image collage from the "Who we are" copy — much
       more than needed once they're stacked in a single column. */
    .abt-grid {
        gap: 32px;
    }

    /* Decorative background quote mark — fixed at 64px/top:8px/left:14px
       at every width, so on this section's narrower mobile card its
       bounding box genuinely overlaps the paragraph's first line (the
       italic quote text) rather than sitting cleanly behind it. Purely
       decorative (pointer-events: none, no text of its own), so it's
       just dropped here instead of hand-tuning its position for every
       possible card width. */
    .abt-quote-mark {
        display: none;
    }

    .abt-heading {
        font-size: 1.8rem;
    }

    .abt-stat-num {
        font-size: 1.05rem;
    }

    /* The "Every technician on our team is IDA-certified..." paragraph
       is redundant with the credential pills right below it on mobile,
       where every extra line of copy adds to scroll length. */
    .abt-body {
        display: none;
    }

    .abt-creds {
        gap: 8px;
        margin-bottom: 0;
    }

    .abt-cred {
        font-size: 11px;
        padding: 5px 11px;
    }

    .abt-img-sm-label {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* This section's own "Book Now" duplicates the mobile sticky CTA bar
       already present on every page. */
    .abt-cta-row {
        display: none;
    }

    /* .abt-copy's 36px bottom padding exists to give the CTA row above
       breathing room — with that row hidden here, it's just dead space
       after the credential pills. */
    .abt-copy {
        padding-bottom: 0;
    }
}

/* ============================================================
   NEWSLETTER + APP DOWNLOAD (merged section, white bg)
   ============================================================ */
.nl-section {
    padding: 56px 0;
    background: var(--apex-white);
}

.nl-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
}

/* ── Shared column styles ── */
.nl-left,
.nl-right {
    padding: 0 40px;
}

.nl-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.nl-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 176, 0, 0.1);
    color: var(--apex-amber-2);
    flex-shrink: 0;
}

.nl-icon--cyan {
    background: rgba(0, 212, 255, 0.1);
    color: var(--apex-cyan-2);
}

.nl-badge {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--apex-amber-2);
    background: rgba(255, 176, 0, 0.08);
    border: 1px solid rgba(255, 176, 0, 0.25);
    border-radius: 999px;
    padding: 5px 12px;
}

.nl-badge--cyan {
    color: var(--apex-cyan-2);
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.25);
}

/* ── Divider ── */
.nl-divider {
    width: 1px;
    align-self: stretch;
    background: var(--apex-mute);
}

/* ── Left: newsletter ── */
.nl-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.28;
    color: var(--apex-ink);
    margin-bottom: 14px;
}

.nl-accent {
    color: var(--apex-amber-2);
}

.nl-accent-cyan {
    color: var(--apex-cyan-2);
}

.nl-sub {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--apex-grey-700);
    margin-bottom: 24px;
}

.nl-form {
    display: flex;
    gap: 10px;
}

.nl-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.nl-input-wrap svg {
    position: absolute;
    left: 14px;
    color: var(--apex-grey-500);
    pointer-events: none;
}

.nl-input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--apex-grey-300);
    border-radius: var(--r-md);
    background: var(--apex-paper);
    padding: 0 14px 0 42px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--apex-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nl-input:focus {
    outline: none;
    border-color: var(--apex-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
    background: var(--apex-white);
}

.nl-submit {
    flex-shrink: 0;
    white-space: nowrap;
}

.nl-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.nl-msg {
    min-height: 20px;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.nl-msg--ok {
    color: var(--apex-green);
}

.nl-msg--err {
    color: var(--apex-red);
}

.nl-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.nl-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--apex-grey-500);
}

.nl-trust-row svg {
    color: var(--apex-green);
    flex-shrink: 0;
}

/* ── Right: app download ── */
.nl-app-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.3;
    color: var(--apex-ink);
    margin-bottom: 16px;
}

.nl-app-perks {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nl-app-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--apex-grey-700);
}

.nl-qr-row {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.nl-qr-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--apex-paper);
    border: 1px solid var(--apex-grey-300);
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(11, 15, 20, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nl-qr-card:hover {
    background: var(--apex-white);
    border-color: var(--apex-cyan);
    box-shadow: 0 8px 20px -6px rgba(0, 212, 255, 0.28);
    transform: translateY(-2px);
}

.nl-qr-card:active {
    transform: translateY(0);
}

.nl-qr-img {
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    border: 1px solid var(--apex-mute);
    background: var(--apex-white);
    object-fit: contain;
    flex-shrink: 0;
}

.nl-qr-text {
    flex: 1;
    min-width: 0;
}

.nl-qr-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--apex-ink);
}

.nl-qr-label svg {
    flex-shrink: 0;
}

.nl-qr-cap {
    display: block;
    font-size: 11px;
    color: var(--apex-grey-500);
    margin-top: 2px;
}

.nl-qr-chevron {
    flex-shrink: 0;
    color: var(--apex-cyan-2);
    transition: transform 0.2s ease;
}

.nl-qr-card:hover .nl-qr-chevron {
    transform: translateX(3px);
}

.nl-app-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--apex-cyan-2);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nl-app-link:hover {
    color: var(--apex-cyan);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .nl-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nl-left,
    .nl-right {
        padding: 0;
    }

    .nl-divider {
        width: 100%;
        height: 1px;
        margin: 40px 0;
    }
}

/* Tablet: 96px of section padding (unconditional at every width
   otherwise) plus the 40px-margin divider above and the form-to-trust-
   row gap (.nl-msg's reserved-but-empty height + its own margin, plus
   .nl-trust-row's margin-top) all read as a lot of extra air. Also
   drops the app-download half here -- same reasoning as the phone-only
   rule just below (the app is already promoted in the Membership/
   Rewards/App section, and this section's own newsletter form is worth
   keeping on its own uncluttered). */
@media (min-width: 576px) and (max-width: 991.98px) {
    .nl-section {
        padding: 44px 0;
    }

    .nl-right,
    .nl-divider {
        display: none;
    }

    .nl-msg {
        margin-top: 8px;
    }

    .nl-trust-row {
        margin-top: 12px;
    }
}

@media (max-width: 575px) {
    .nl-section {
        padding: 32px 0;
    }

    /* App-download half is dropped on phone -- the app is already
       promoted elsewhere on the page (membership/rewards/app section),
       and the sticky mobile CTA bar covers booking. */
    .nl-right,
    .nl-divider {
        display: none;
    }

    /* Text was floor-clamped to its smallest size on mobile and never
       scaled back up, so the whole section read as an afterthought next
       to the bigger type used elsewhere on the page -- bump the key
       pieces (heading, badges, icons, perks) so it reads with real
       weight on a phone screen. */
    .nl-icon {
        width: 48px;
        height: 48px;
    }

    .nl-icon svg {
        width: 24px;
        height: 24px;
    }

    .nl-badge {
        font-size: 12px;
        padding: 6px 14px;
    }

    .nl-heading {
        font-size: 26px;
        line-height: 1.25;
    }

    .nl-sub {
        font-size: 15.5px;
    }

    .nl-input {
        height: 52px;
        font-size: 15.5px;
    }

    .nl-submit {
        width: 100%;
        justify-content: center;
    }

    .nl-trust-row span {
        font-size: 12.5px;
    }

    .nl-app-heading {
        font-size: 23px;
    }

    .nl-app-perks li {
        font-size: 14.5px;
    }

    .nl-qr-row {
        flex-direction: column;
    }

    .nl-qr-img {
        width: 60px;
        height: 60px;
    }

    .nl-qr-label {
        font-size: 14.5px;
    }

    .nl-qr-cap {
        font-size: 11.5px;
    }

    .nl-form {
        flex-direction: column;
    }
}

/* ============================================================
   ALTERNATING DARK / LIGHT — Section Theme Overrides
   Pattern: Hero(dark) → Stat(light) → Services(dark) → BA(light)
   → Reviews(dark) → WCU(light) → TwoWays(dark) → SameDay(light)
   → About(dark) → PhotoProof(light) → Membership(dark) →
   Bk11(light) → GiftCards(dark) → Newsletter(light) → Gallery(dark)
   ============================================================ */

/* ─── #3 Services Grid: LIGHT → DARK ─── */
.svc-section {
    background: var(--apex-ink);
}

.svc-section::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

.svc-section .section-head h2 {
    color: var(--apex-white);
}

.svc-section .section-head h2 .accent {
    color: var(--apex-cyan);
}

.svc-section .section-head p {
    color: var(--apex-grey-300);
}

.svc-section .eyebrow {
    color: var(--apex-cyan);
}

/* ─── #6 Why Choose Us: DARK → LIGHT ─── */
.wcu-section {
    background: var(--apex-white);
}

.wcu-content .eyebrow {
    color: var(--apex-cyan-2);
}

.wcu-content h2 {
    color: var(--apex-black);
}

.wcu-content h2 span[style*="cyan"] {
    color: var(--apex-cyan-2) !important;
}

.wcu-lead {
    color: var(--apex-grey-700);
}

.wcu-benefits li strong {
    color: var(--apex-black);
}

.wcu-benefits li span {
    color: var(--apex-grey-700);
}

.wcu-icon {
    background: rgba(0, 168, 204, 0.08);
    color: var(--apex-cyan-2);
}

/* ─── #7 Two Ways (Shop vs Mobile): LIGHT → DARK ─── */
.section.bg-paper {
    background: var(--apex-ink);
}

.section.bg-paper .section-head h2 {
    color: var(--apex-white);
}

.section.bg-paper .section-head h2 span[style] {
    color: var(--apex-cyan) !important;
}

.section.bg-paper .section-head p {
    color: var(--apex-grey-300);
}

.section.bg-paper .eyebrow {
    color: var(--apex-cyan);
}

/* Text/icon colors below default to dark-on-light (h1-h6 are
   var(--apex-black) globally, .muted/.feature p are --apex-grey-700 —
   a dark slate meant for the light --apex-paper background), so
   anything not already covered by the .section-head-scoped rules
   above (headings/paragraphs outside .section-head, e.g. the Service
   Zone block on mobile-detailing, and the "What's on the van" feature
   list) renders as unreadable dark-on-dark. */
.section.bg-paper h2,
.section.bg-paper h3,
.section.bg-paper h4 {
    color: var(--apex-white);
}

.section.bg-paper .muted,
.section.bg-paper .feature p {
    color: var(--apex-grey-300);
}

.section.bg-paper .feature-icon {
    background: rgba(0, 212, 255, 0.15);
    color: var(--apex-cyan);
}

/* .job-card (careers.blade.php) keeps its own white background even
   inside a .bg-paper section, so it must not inherit the light-on-dark
   text colors above — restore dark text specifically for it. */
.section.bg-paper .job-card h4 {
    color: var(--apex-black);
}

.section.bg-paper .job-card p.muted {
    color: var(--apex-grey-700);
}

/* .account-card (rewards.blade.php's "Join Apex Rewards" form) is the
   same situation as .job-card above -- its own white background
   inside a .bg-paper section, so it must not inherit the light-on-
   dark text colors either. Left unfixed, "Join Apex Rewards" (h3)
   rendered white-on-white and "500 bonus points · free forever"
   (.muted) rendered light-grey-on-white, both effectively invisible. */
.section.bg-paper .account-card h3 {
    color: var(--apex-black);
}

.section.bg-paper .account-card .muted {
    color: var(--apex-grey-700);
}

/* ─── #8 Same-Day Booking: DARK → LIGHT ─── */
.sd-section {
    background: var(--apex-white);
    border-top-color: var(--apex-mute);
    border-bottom-color: var(--apex-mute);
}

.sd-heading {
    color: var(--apex-black);
}

.sd-sub {
    color: var(--apex-grey-700);
}

.sd-points strong {
    color: var(--apex-black);
}

.sd-points span {
    color: var(--apex-grey-700);
}

.sd-today-card {
    background: var(--apex-paper);
    border-color: var(--apex-mute);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.1);
}

.sd-today-label {
    color: var(--apex-black);
}

.sd-today-clock {
    background: rgba(0, 168, 204, 0.1);
    color: var(--apex-cyan-2);
}

.sd-slots-bar {
    background: rgba(0, 0, 0, 0.06);
}

.sd-slots-bar-label {
    color: var(--apex-grey-700);
}

.sd-slots-bar-pct {
    color: var(--apex-grey-500);
}

.sd-chip {
    color: var(--apex-grey-700);
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--apex-mute);
}

.sd-chip--muted {
    color: var(--apex-grey-500);
}

.sd-today-cta {
    color: var(--apex-cyan-2);
    border-color: rgba(0, 168, 204, 0.35);
}

.sd-today-cta:hover {
    background: rgba(0, 168, 204, 0.06);
}

/* When both booking modes are enabled, book-btn renders this as a
   <button> carrying the shared .ist-ebe9baf9 utility class, which
   forces border:none !important -- silently dropping the border this
   button declares above. Override scoped to this button only (higher
   specificity, still !important) so other book-btn dropdowns sitewide
   are untouched. */
.sd-today-cta.ist-ebe9baf9 {
    border: 1px solid rgba(0, 168, 204, 0.35) !important;
}

.sd-section .btn-apex-ghost {
    color: var(--apex-black);
    border-color: var(--apex-line);
}

.sd-section .btn-apex-ghost:hover {
    background: var(--apex-black);
    color: var(--apex-white);
    border-color: var(--apex-black);
}

/* ─── #11 Membership / Rewards / App: LIGHT → DARK ─── */
.mrs-section {
    background: var(--apex-ink);
}

.mrs-head h2 {
    color: var(--apex-white);
}

.mrs-head p {
    color: var(--apex-grey-300);
}

.mrs-card-rewards {
    background: var(--apex-surface);
    border-color: var(--apex-line);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.mrs-card-app {
    background: var(--apex-surface);
    border-color: var(--apex-line);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

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

.mrs-perks-dark li {
    color: var(--apex-grey-300);
}

.mrs-perks-dark li i {
    color: var(--apex-cyan);
}

.mrs-icon-light {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.25);
    color: var(--apex-cyan);
}

.mrs-tag-light {
    background: rgba(0, 212, 255, 0.15);
    color: var(--apex-cyan);
}

.mrs-pts-box {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
}

.mrs-pts-label {
    color: var(--apex-grey-500);
}

.mrs-pts-count {
    color: var(--apex-cyan);
}

.mrs-bar-track {
    background: rgba(255, 255, 255, 0.08);
}

.mrs-pts-hint {
    color: var(--apex-grey-500);
}

.mrs-qr-card {
    background: var(--apex-surface);
    border-color: var(--apex-line);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.mrs-qr-card:hover {
    border-color: var(--apex-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.mrs-qr-label {
    color: var(--apex-grey-300);
}

.mrs-qr-label i {
    color: var(--apex-grey-300);
}

.mrs-cta-outline {
    color: var(--apex-white) !important;
    border-color: rgba(255, 255, 255, 0.35);
}

.mrs-cta-outline:hover {
    background: var(--apex-white);
    color: var(--apex-black) !important;
    border-color: var(--apex-white);
}

/* ─── #12 Book in 11 Seconds: DARK → LIGHT ─── */
.bk11-section {
    background: var(--apex-white);
}

.bk11-section::before {
    background: radial-gradient(ellipse at center, rgba(0, 168, 204, 0.05) 0%, transparent 65%);
}

.bk11-headline {
    color: var(--apex-black);
}

.bk11-sub {
    color: var(--apex-grey-700);
}

.bk11-google-badge {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--apex-mute);
    color: var(--apex-grey-700);
}

.bk11-sc {
    background: var(--apex-paper);
    border-color: var(--apex-mute);
}

.bk11-sc-icon {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--apex-mute);
}

.bk11-sc-title {
    color: var(--apex-grey-700);
}

.bk11-sc-sub {
    color: var(--apex-grey-500);
}

.bk11-sc.bk-active {
    background: var(--apex-white);
}

.bk11-sc.bk-active .bk11-sc-title {
    color: var(--apex-black);
}

.bk11-sc.bk-done .bk11-sc-title {
    color: var(--apex-grey-500);
}

.bk11-clock-num {
    color: var(--apex-black);
}

.bk11-booked {
    background: rgba(255, 255, 255, 0.92);
}

/* ─── #15 Explore Gallery: LIGHT → DARK ─── */
.explore-gallery-section {
    background: var(--apex-ink);
}

.explore-gallery-biz {
    color: var(--apex-white);
}

.explore-gallery-sub {
    color: var(--apex-grey-300);
}

/* ============================================================ LOCATIONS PAGE (locx) */
.locx-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--apex-black);
}

.locx-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
}

.locx-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(11, 15, 20, .94) 0%, rgba(11, 15, 20, .82) 42%, rgba(11, 15, 20, .55) 100%);
}

.locx-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 72px 24px;
}

.locx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--apex-cyan);
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid rgba(0, 212, 255, .3);
    border-radius: 999px;
    background: rgba(0, 212, 255, .07);
    margin-bottom: 20px;
}

.locx-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--apex-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .2);
}

.locx-eyebrow-dark {
    color: var(--apex-cyan-2);
    border-color: rgba(0, 168, 204, .25);
    background: rgba(0, 168, 204, .07);
}

.locx-hero-title {
    color: #fff;
    font-size: 52px;
    line-height: 1.06;
    font-weight: 800;
    margin: 0 0 18px;
    letter-spacing: -.02em;
}

.locx-hero-title .accent {
    color: var(--apex-cyan);
}

.locx-hero-lead {
    color: var(--apex-grey-300);
    font-size: 16px;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 0 34px;
}

.locx-hero-stats {
    display: flex;
    gap: 44px;
    flex-wrap: wrap;
}

.locx-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.locx-stat-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--apex-cyan);
    line-height: 1;
}

.locx-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apex-grey-500);
}

/* ── Search + filter bar ── */
#locxStickyGuard {
    height: 0;
}

.locx-searchbar {
    /* Sticks below the site header once scrolled to it, same pattern as
       .glr-filter-bar on the gallery page -- top:0 put this at the exact
       same viewport position as the header's own position:sticky;top:0,
       and the header's much higher z-index then painted over this bar
       instead of it docking visibly underneath. top is nudged between
       this and 0 by JS (location.blade.php) in sync with the header's
       own auto-hide-on-scroll transform, so no gap opens up where the
       header used to be. */
    position: sticky;
    top: var(--header-h);
    z-index: 1020;
    transition: top 0.28s ease;
    background: #fff;
    border-bottom: 1px solid var(--apex-grey-100);
    box-shadow: 0 4px 24px rgba(11, 15, 20, .04);
}

.locx-searchbar-inner {
    /* padding: 16px 0 (shorthand) was wiping out .container-apex's own
       24px side padding on this same element, pinning the search input
       flush against the viewport edge. Only add vertical padding here. */
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
}

.locx-search {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 240px;
    max-width: 340px;
    padding: 11px 16px;
    border: 1px solid var(--apex-grey-100);
    border-radius: 999px;
    background: var(--apex-paper);
    color: var(--apex-grey-500);
    transition: border-color .2s, background .2s;
}

.locx-search:focus-within {
    border-color: var(--apex-cyan);
    background: #fff;
}

.locx-search input {
    border: 0;
    background: transparent;
    outline: 0;
    font-size: 14px;
    color: var(--apex-black);
    width: 100%;
}

.locx-pills {
    display: flex;
    gap: 8px;
    /* flex-wrap:wrap meant a third pill (once a business has more than
       one city) never got the chance to overflow into the already-set-up
       horizontal scroller below -- it just wrapped onto its own second
       row instead, on phone widths too narrow to fit every city pill on
       one line. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.locx-pills::-webkit-scrollbar {
    display: none;
}

.locx-pill {
    border: 1px solid var(--apex-grey-100);
    background: #fff;
    color: var(--apex-grey-700);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .2s;
}

.locx-pill:hover {
    border-color: var(--apex-cyan);
    color: var(--apex-cyan-2);
}

.locx-pill.is-active {
    background: var(--apex-black);
    color: #fff;
    border-color: var(--apex-black);
}

/* ── Explore: list + map ── */
.locx-explore {
    /* 60px bottom padding + the globally-included "Our Locations" section
       right after it (.gloc-section) has its own 50px top padding --
       stacked, that's 110px of dead space between the last location card
       and the next section's heading, on a page whose whole point is
       showing locations back-to-back. */
    padding: 40px 0 24px;
}

.locx-explore-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: stretch;
}

.locx-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 6px;
}

.locx-list::-webkit-scrollbar {
    width: 6px;
}

.locx-list::-webkit-scrollbar-thumb {
    background: var(--apex-grey-300);
    border-radius: 999px;
}

.locx-loc-card {
    border: 1px solid var(--apex-grey-100);
    border-radius: 16px;
    padding: 18px 20px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.locx-loc-card:hover {
    border-color: var(--apex-cyan);
    box-shadow: 0 10px 30px rgba(0, 212, 255, .1);
    transform: translateY(-2px);
}

.locx-loc-card-dark {
    background: var(--apex-black);
    border-color: var(--apex-line);
}

.locx-loc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.locx-loc-name {
    font-size: 18.5px;
    font-weight: 700;
    color: var(--apex-black);
    margin: 0;
}

.locx-loc-card-dark .locx-loc-name {
    color: #fff;
}

.locx-loc-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--apex-grey-500);
    white-space: nowrap;
}

.locx-loc-status.is-open {
    color: #16a34a;
}

.locx-loc-status {
    font-size: 13.5px;
}

.locx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}

.is-open .locx-dot {
    background: #22c55e;
    animation: pulseDot 1.4s ease-in-out infinite;
}

.locx-loc-addr {
    font-size: 15px;
    color: var(--apex-grey-500);
    margin: 0 0 14px;
    line-height: 1.55;
}

.locx-loc-card-dark .locx-loc-addr {
    color: var(--apex-grey-300);
}

.locx-loc-meta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}

.locx-loc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--apex-grey-700);
}

.locx-loc-meta-item svg {
    color: var(--apex-cyan);
    flex-shrink: 0;
}

.locx-loc-card-dark .locx-loc-meta-item {
    color: var(--apex-grey-300);
}

.locx-loc-meta-item a {
    color: inherit;
}

/* Grid (not flex) so both columns get a true equal 1fr share --
   with flex, the dropdown's <div class="bbd-wrap"> wrapper (rendered
   by book-btn.blade.php when both booking modes are enabled) doesn't
   carry .btn-apex itself, so flex:1 never reached it and its nested
   min-content sizing still won it a narrower share than the plain
   Directions link, which grabbed the rest of the row. */
.locx-loc-actions {
    display: grid;
    /* minmax(0, 1fr), not bare 1fr -- a bare 1fr track still has an
       automatic (content-based) minimum, so at narrow widths the
       "Directions" track (slightly wider min-content than "Book") won a
       few extra px over the other column instead of splitting evenly. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.locx-loc-actions .btn-apex,
.locx-loc-actions .bbd-wrap {
    width: 100%;
}

.locx-loc-actions .btn-apex {
    justify-content: center;
}

/* ── Map ── */
.locx-map {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--apex-grey-100);
    min-height: 560px;
}

.locx-map iframe {
    display: block;
    height: 100%;
    filter: grayscale(.1);
}

.locx-map-pop {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 250px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 16px 44px rgba(11, 15, 20, .18);
}

.locx-map-pop-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--apex-black);
    margin-bottom: 4px;
}

.locx-map-pop-addr {
    font-size: 12.5px;
    color: var(--apex-grey-500);
    line-height: 1.5;
    margin-bottom: 10px;
}

.locx-map-pop-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--apex-grey-500);
    margin-bottom: 14px;
}

.locx-map-pop-status.is-open {
    color: #16a34a;
}

.locx-map-pop .btn-apex {
    width: 100%;
    justify-content: center;
}

/* ── Fleet / events ── */
.locx-events {
    padding: 80px 0;
    background: #fff;
}

.locx-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.locx-events-title {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: var(--apex-black);
}

.locx-events-title .accent {
    color: var(--apex-cyan);
}

.locx-events-lead {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--apex-grey-700);
    margin: 0 0 26px;
}

.locx-feature-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.locx-feature-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--apex-black);
}

.locx-feature-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(0, 212, 255, .1);
    color: var(--apex-cyan-2);
    flex-shrink: 0;
}

.locx-events-media {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 9/10;
    box-shadow: 0 30px 70px rgba(11, 15, 20, .18);
}

.locx-events-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Responsive ── */
@media (max-width: 980px) {
    .locx-hero-title {
        font-size: 40px;
    }

    .locx-explore-grid {
        grid-template-columns: 1fr;
    }

    /* Dropped on mobile/tablet at user's request -- each location card
       already links out to Google Maps via its own "Directions" button,
       and an embedded interactive map here just eats a lot of vertical
       space scrolling through the list on a phone. */
    .locx-map {
        display: none;
    }

    .locx-list {
        max-height: none;
    }

    .locx-events-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .locx-events-media {
        order: -1;
        aspect-ratio: 16/11;
    }
}

@media (max-width: 560px) {
    /* min-height:460px (desktop) plus 72px top/bottom padding was
       forcing ~600px of hero on a phone whose whole viewport is often
       under 900px -- most of that was just dead space around the
       already-short copy block, not anything the min-height was
       actually protecting. */
    .locx-hero {
        min-height: auto;
    }

    .locx-hero-inner {
        padding: 40px 20px;
    }

    .locx-hero-lead {
        margin-bottom: 20px;
    }

    .locx-hero-title {
        font-size: 32px;
    }

    .locx-hero-stats {
        gap: 26px;
    }

    .locx-stat-num {
        font-size: 26px;
    }

    .locx-events-title {
        font-size: 30px;
    }

    .locx-map-pop {
        left: 16px;
        right: 16px;
        width: auto;
    }

    /* Once the sticky bar is actually stuck (JS toggles this via an
       IntersectionObserver on #locxStickyGuard), drop the search input
       and keep only the filter pills docked on screen -- the search box
       plus a full pill row permanently pinned under the header ate a lot
       of a phone's limited vertical space while browsing the list. */
    .locx-searchbar-stuck .locx-search {
        display: none;
    }

    .locx-searchbar-inner {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Location cards were sized for a 380px desktop sidebar column --
       reasonable padding/type there reads as slightly heavy in a ~290px
       phone column, and a long name ("Beverly Hills Detail Bar") wrapped
       to two lines against the status badge more readily at the larger
       size. */
    .locx-loc-card {
        padding: 16px;
    }

    .locx-loc-name {
        font-size: 16.5px;
    }

    .locx-loc-addr {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .locx-loc-meta {
        gap: 7px;
        margin-bottom: 14px;
    }

    .locx-loc-meta-item {
        font-size: 13.5px;
    }

    .locx-list {
        gap: 12px;
    }
}

/* ============================================================
   GALLERY HERO — full split layout
   ============================================================ */
.glr-hero {
    background: var(--apex-black);
    position: relative;
    overflow: hidden;
    padding-top: clamp(72px, 10vw, 96px);
    padding-bottom: 0;
}

/* Glow orbs */
.glr-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.glr-hero-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 70%);
    top: -100px;
    right: -100px;
}

.glr-hero-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 100, 180, 0.1) 0%, transparent 70%);
    bottom: 60px;
    left: -80px;
}

/* Inner split grid */
.glr-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding-bottom: 32px;
}

/* ── COPY side ── */
.glr-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.glr-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.22);
    border-radius: var(--r-pill);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    margin-bottom: 22px;
    width: fit-content;
}

.glr-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--apex-cyan);
    box-shadow: 0 0 8px var(--apex-cyan);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}

.glr-hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}

.glr-hero-accent {
    color: var(--apex-cyan);
    display: block;
}

.glr-hero-sub {
    font-size: 1.05rem;
    /* --apex-grey-400 is never defined anywhere (only 100/300/500/700
       exist) -- with no fallback, that made this an invalid var(),
       which for an inherited property like color falls back silently
       to whatever's inherited (this hero is on a black background, so
       it inherited near-black and the paragraph was invisible, not
       just dim). Fallback sits between the 300 and 500 steps. */
    color: var(--apex-grey-400, #a8b0ba);
    line-height: 1.75;
    max-width: 52ch;
    margin: 0 0 32px;
}

/* Stats row */
.glr-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--apex-line);
    border-radius: var(--r-lg);
    padding: 18px 24px;
    margin-bottom: 32px;
    width: fit-content;
}

.glr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
}

.glr-stat:first-child {
    padding-left: 0;
}

.glr-stat:last-child {
    padding-right: 0;
}

.glr-stat-sep {
    width: 1px;
    height: 36px;
    background: var(--apex-line);
    flex-shrink: 0;
}

.glr-stat-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--apex-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

.glr-stat-plus {
    font-size: 1rem;
    color: var(--apex-cyan);
    font-weight: 700;
}

.glr-stat-lbl {
    font-size: 11px;
    color: var(--apex-grey-500);
    font-weight: 500;
    margin-top: 4px;
    white-space: nowrap;
}

.glr-hero-cta {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── PREVIEW side ── */
.glr-hero-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Before/after preview card */
.glr-prev-card {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.glr-prev-main {
    aspect-ratio: 16 / 10;
    width: 100%;
}

.glr-prev-mini {
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 48%;
    aspect-ratio: 3 / 2;
    border: 3px solid var(--apex-black);
    border-radius: var(--r-lg);
    z-index: 2;
}

/* Split before/after inside preview card */
.glr-prev-img {
    position: absolute;
    inset: 0;
}

.glr-prev-before {
    width: 50%;
    left: 0;
    right: auto;
}

.glr-prev-after {
    width: 50%;
    left: 50%;
    right: 0;
}

/* Divider handle */
.glr-prev-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    z-index: 3;
    pointer-events: none;
}

.glr-prev-line {
    flex: 1;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
}

.glr-prev-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-black);
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Before / After labels */
.glr-prev-labels {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 4;
    pointer-events: none;
}

.glr-prev-label {
    background: rgba(11, 15, 20, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--r-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.glr-lbl-before {
    color: #ff7070;
    border: 1px solid rgba(255, 112, 112, 0.3);
}

.glr-lbl-after {
    color: var(--apex-cyan);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Caption */
.glr-prev-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(11, 15, 20, 0.95) 0%, transparent 100%);
    padding: 32px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 4;
    pointer-events: none;
}

.glr-prev-caption strong {
    font-size: 0.9rem;
    color: var(--apex-white);
    font-weight: 700;
}

.glr-prev-caption span {
    font-size: 11px;
    color: var(--apex-cyan);
    font-weight: 500;
}

/* Drag hint chip */
.glr-drag-hint {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(11, 15, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--apex-line);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--apex-grey-300);
    z-index: 10;
    pointer-events: none;
    animation: float-chip 3s ease-in-out infinite;
}

@keyframes float-chip {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ── Filter bar ── */
.glr-filter-bar {
    background: var(--apex-black);
    border-top: 1px solid var(--apex-line);
    /* Sticks below the site header once scrolled to it, and stays
       opaque (rather than the original faint-tint-over-hero look)
       since it now floats over whatever section is scrolled beneath it.
       `top` is nudged between this and 0 by JS in sync with the site
       header's own auto-hide-on-scroll transform, so no gap opens up
       where the header used to be — transition matches the header's
       own 0.28s so both move in step. */
    position: sticky;
    top: var(--header-h);
    z-index: 1020;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: top 0.28s ease;
}

.glr-filter-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.glr-filter-inner::-webkit-scrollbar {
    display: none;
}

.glr-filter-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--apex-grey-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.glr-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.glr-tab {
    display: inline-block;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--apex-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.glr-tab:hover {
    color: var(--apex-cyan);
    border-color: rgba(0, 212, 255, 0.5);
    background: rgba(0, 212, 255, 0.06);
}

.glr-tab-active {
    color: var(--apex-cyan) !important;
    border-color: rgba(0, 212, 255, 0.5) !important;
    background: rgba(0, 212, 255, 0.08) !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .glr-hero-inner {
        grid-template-columns: 1fr;
        /* .glr-hero-copy unwraps via display:contents below so its own
           children (breadcrumbs/badge/h1/sub/stats/cta) become direct
           items of this grid alongside .glr-hero-preview -- a row-gap
           here would land between every one of those instead of just
           once between the two original halves, so spacing is handled
           by each item's own order + margin below instead. */
        gap: 0;
        padding-bottom: 32px;
    }

    /* Unwraps .glr-hero-copy so its children can be interleaved with
       .glr-hero-preview via order below -- the before/after image now
       sits between the intro copy and the stats row instead of always
       trailing after the CTA button, and each item keeps its own
       min-content sizing instead of inheriting the wrapper's. */
    .glr-hero-copy {
        display: contents;
    }

    .glr-hero-copy .breadcrumbs {
        order: 1;
    }

    .glr-badge {
        order: 2;
    }

    .glr-hero-h1 {
        order: 3;
        font-size: clamp(2rem, 6vw, 3rem);
        margin-bottom: 14px;
    }

    .glr-hero-sub {
        order: 4;
        margin-bottom: 20px;
    }

    .glr-hero-preview {
        order: 5;
        /* .glr-hero-preview's own min-width:0 still applies (a grid
           item's automatic minimum width defaults to its content's
           min-content size, which .glr-hero-cta's "Book Your Detail"
           button -- nowrap text + 50px side padding, plus the site-wide
           mobile font-size bump -- exceeds, otherwise forcing the whole
           column past the edge of the screen).
           Without an explicit width, "margin:0 auto" makes a grid item
           shrink to fit-content instead of stretching to the column --
           but every image here is a background on an absolutely-positioned
           div (no intrinsic size of its own) inside .glr-prev-main's
           width:100%/aspect-ratio box, so "fit-content" had nothing to
           measure and the whole preview collapsed to 0x0 on phone/tablet.
           width:100% makes it stretch (letting aspect-ratio resolve
           normally); max-width still caps it on wider phones/tablets. */
        min-width: 0;
        width: 100%;
        max-width: 560px;
        margin: 0 auto 24px;
    }

    .glr-prev-mini {
        right: -12px;
        bottom: -16px;
    }

    /* Same width:fit-content-doesn't-clamp issue as the badge/CTA above --
       the 3-stat row (each with nowrap labels) was wider than the column
       and overflowing past the viewport edge. */
    .glr-stats {
        order: 6;
        width: 100%;
        margin-bottom: 20px;
    }

    /* .glr-hero-cta is applied directly on the "Book Your Detail" link
       when only one booking mode is enabled -- that link is itself the
       direct grid item once .glr-hero-copy unwraps above, so order and
       width belong on this same class, not a ".glr-hero-cta .btn-apex"
       descendant that doesn't exist. But when both shop and mobile
       booking are enabled, book-btn renders a dropdown instead: a
       .bbd-wrap wrapping the actual .glr-hero-cta button, so .bbd-wrap
       -- not .glr-hero-cta -- is the real grid item in that case, and
       needs its own order (it otherwise defaults to order 0 and jumps
       to the front) and width. */
    .glr-hero-copy > .bbd-wrap {
        order: 7;
        width: 100%;
    }

    .glr-hero-cta {
        order: 7;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .glr-hero {
        padding-top: clamp(56px, 14vw, 80px);
    }

    /* width:fit-content doesn't reliably clamp to the available column
       width on the narrowest phones -- this badge's text ("300+ Real
       Cars · Zero Stock Photos") was overflowing past the edge of the
       screen, silently clipped by body's overflow-x rule. Cap it and
       let the text wrap instead. */
    .glr-badge {
        max-width: calc(100vw - 48px);
        white-space: normal;
        text-align: center;
    }

    .glr-stats {
        padding: 14px 16px;
    }

    .glr-stat {
        padding: 0 14px;
    }

    .glr-stat-num {
        font-size: 1.3rem;
    }

    .glr-prev-mini {
        display: none;
    }

    .glr-filter-lbl {
        display: none;
    }

    .glr-hero-h1 {
        font-size: clamp(1.9rem, 7vw, 2.6rem);
    }
}


/* ============================================================
   CONTACT US PAGE — light theme
   ============================================================ */

.ct-section {
    background: var(--apex-paper);
    padding: clamp(40px, 5vw, 50px) 0 50px;
}

/* Section heading block — lives inside left col */
.ct-section-head {
    text-align: left;
    max-width: 100%;
    margin: 0 0 36px;
}

.ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    margin-bottom: 14px;
}

.ct-eyebrow-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--apex-cyan);
    border-radius: 2px;
}

.ct-section-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
    max-width: 18ch;
}

.ct-h1-accent {
    color: var(--apex-cyan);
}

.ct-section-sub {
    font-size: 1.05rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
    max-width: 48ch;
}

/* Two-col grid */
.ct-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    align-items: start;
}

/* ── Info cards column ── */
.ct-info-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}

.ct-card:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.ct-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-cyan);
    flex-shrink: 0;
}

.ct-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ct-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}

.ct-card-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-card-note {
    font-size: 12px;
    color: #6b7280;
}

.ct-card-arrow {
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.2s;
}

.ct-card:hover .ct-card-arrow {
    color: var(--apex-cyan);
}

.ct-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--r-pill);
    padding: 4px 10px;
    flex-shrink: 0;
}

.ct-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Form card ── */
.ct-form-card {
    background: var(--apex-white);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-xl);
    padding: 36px 40px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.ct-form-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
}

.ct-form-title-em {
    font-style: italic;
    color: var(--apex-cyan);
}

.ct-form-subtitle {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.6;
}

/* Tabs */
.ct-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--apex-mute);
}

.ct-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7280;
    border: 1px solid var(--apex-mute);
    background: transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    letter-spacing: 0.05rem;
}

.ct-tab:hover {
    color: #111827;
    border-color: #d1d5db;
    background: var(--apex-paper);
}

.ct-tab-active {
    color: var(--apex-cyan) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    background: rgba(0, 212, 255, 0.06) !important;
}

/* Form layout */
.ct-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.ct-input {
    background: var(--apex-paper);
    border: 1px solid var(--apex-mute);
    border-radius: var(--r-md);
    padding: 11px 14px;
    font-size: 0.9rem;
    color: #111827;
    font-family: var(--font-body);
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.ct-input::placeholder {
    color: #9ca3af;
}

.ct-input:focus {
    outline: none;
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
    background: var(--apex-white);
}

.ct-textarea {
    resize: vertical;
    min-height: 110px;
}

.ct-select-wrap {
    position: relative;
}

.ct-select-wrap .ct-input {
    padding-right: 36px;
    cursor: pointer;
}

.ct-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* Time buttons */
.ct-time-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ct-time-btn {
    padding: 10px 8px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    border: 1px solid var(--apex-mute);
    background: var(--apex-paper);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    text-align: center;
}

.ct-time-btn:hover {
    color: #111827;
    border-color: #d1d5db;
    background: var(--apex-white);
}

.ct-time-active {
    color: var(--apex-cyan) !important;
    border-color: rgba(0, 212, 255, 0.45) !important;
    background: rgba(0, 212, 255, 0.06) !important;
}

/* Submit button */
.ct-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: var(--apex-cyan);
    color: var(--apex-black);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.ct-submit-btn:hover {
    background: #00b8d9;
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(0, 212, 255, 0.25);
}

.ct-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

/* ── Business Hours ── */
.ct-hours-section {
    background: var(--apex-paper);
    /* 96px here stacked with the globally-included "Our Locations"
       section right after it (.gloc-section, style.css ~11421) having
       its own 50px top padding -- 146px of dead space between the dark
       hours card and the next heading, same class of bug as
       .locx-explore's 60px->24px fix above. Cut to 32px, this section's
       own contribution reduced to roughly what .gloc-section's is. */
    padding: 0 0 32px;
}

.ct-hours-card {
    background: #111827;
    border-radius: var(--r-xl);
    padding: 40px 44px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.ct-hours-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ct-hours-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.ct-open-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--r-pill);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
}

.ct-is-open {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.ct-is-closed {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.ct-open-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ct-is-open .ct-open-dot {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: pulse-dot 2s ease-in-out infinite;
}

.ct-is-closed .ct-open-dot {
    background: #f87171;
}

.ct-hours-list {
    display: flex;
    flex-direction: column;
}

.ct-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ct-hours-row:last-child {
    border-bottom: none;
}

.ct-hours-day {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.ct-hours-time {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.ct-today-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--apex-cyan);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--r-pill);
    padding: 2px 8px;
}

.ct-hours-today .ct-hours-day {
    color: #fff;
    font-weight: 700;
}

.ct-hours-today .ct-hours-time {
    color: var(--apex-cyan);
    font-weight: 700;
}

.ct-time-closed {
    color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ct-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ct-info-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ct-section-head {
        margin-bottom: 28px;
    }

    /* Both are grid items of .ct-grid (now a single column) -- neither had
       min-width:0, so their content's min-content (the "Book Appointment"
       tab and the time-of-day buttons, both nowrap) was forcing the whole
       card wider than the phone viewport, silently clipped by body's
       overflow-x rule. */
    .ct-form-col,
    .ct-info-col {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .ct-info-col {
        grid-template-columns: 1fr;
    }

    /* Contact info is the whole point of this page -- never hide part of a
       phone/email/address behind an ellipsis just because the card got
       narrower. Let it wrap to a second line instead. */
    .ct-card-value {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .ct-form-card {
        padding: 28px 24px;
    }

    .ct-hours-card {
        padding: 28px 24px;
    }

    /* 5 pill tabs at their desktop size wrapped into 3 uneven rows on phone,
       each only 27px tall -- well under a usable tap target. Make it a
       single swipeable row instead (the same horizontal-scroll pattern
       already used for the gallery/services filter pills on this site)
       with a real touch-friendly height. */
    .ct-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -4px 24px;
        padding: 0 4px 20px;
    }

    .ct-tabs::-webkit-scrollbar {
        display: none;
    }

    .ct-tab {
        flex-shrink: 0;
        min-height: 44px;
        font-size: 13px;
        padding: 11px 16px;
    }

    .ct-time-btn {
        min-height: 44px;
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .ct-form-row {
        grid-template-columns: 1fr;
    }

    .ct-time-btns {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Book-btn dropdown (bbd-wrap) ───────────────────────────────────── */
.bbd-wrap {
    position: relative;
    display: inline-flex;
}

/* Dropdown panel — polished card style */
.bbd-menu {
    position: absolute;
    top: calc(100% + 0px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 230px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.08);
    padding: 6px;
    z-index: 99999;
    display: none;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}

.bbd-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--apex-black, #0b0f14);
    text-decoration: none;
    transition: background .15s;
}

.bbd-menu a:hover {
    background: var(--apex-paper, #f5f7fa);
    color: var(--apex-cyan-2, #00b8d9);
}

.bbd-menu a svg {
    flex-shrink: 0;
    opacity: .7;
}

/* Fix overflow:hidden parents clipping the dropdown */
.gloc-card,
.sfc-top,
.gloc-info-col {
    overflow: visible !important;
}

/* ── Quote Calculator ─────────────────────────────────────── */
/* (styles inlined in partials/quote-calc.blade.php) */

/* ── Service hero card: text-only variant ─────────────────── */
.service-card.sc-hero.sc-hero-text {
    flex-direction: column;
    min-height: 380px;
}
.service-card.sc-hero.sc-hero-text .sc-img-wrap {
    display: none;
}
.service-card.sc-hero.sc-hero-text .sc-body {
    flex: 1;
    padding: 32px 32px 0;
    justify-content: flex-start;
}

/* The 380px min-height above exists to roughly balance this card against
   its side-by-side bento neighbor on desktop — it has three classes, so
   it silently overrode the "min-height: 0" already set for .sc-hero on
   tablet/mobile (`.service-card.sc-hero { min-height: 0 }` further up,
   at max-width: 860px, only has two classes and loses on specificity
   regardless of source order). Below 860px the card stacks full-width
   with no neighbor to match, so the fixed 380px just forced blank space
   between the bullet list and the price row on any content shorter than
   that. Content should size the card there instead.
*/
@media (max-width: 860px) {
    .service-card.sc-hero.sc-hero-text {
        min-height: 0;
    }
}

/* Pill-style "Book now" button (cyan oval) */
.sc-learn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--apex-cyan, #00d4ff);
    color: var(--apex-black, #0b0f14) !important;
    font-weight: 800;
    font-size: .9rem;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 16px rgba(0,212,255,.3);
    white-space: nowrap;
}
.sc-learn-pill:hover {
    background: #00bfea;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,212,255,.4);
}

/* ── Service card bbd-wrap: ensure overflow visible ────────── */
.service-card, .sc-card-inner, .sc-hero, .sc-elite,
.sc-price-row, .sc-back-footer {
    overflow: visible !important;
}
/* sc-back-cta bbd-wrap: open upward */
.sc-back-footer .bbd-wrap .bbd-menu,
.sc-price-row .bbd-wrap .bbd-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
}