/* ==========================================================================
   4Real design system  (v2)
   --------------------------------------------------------------------------
   Loaded on every page from layouts/front.blade.php. Everything is namespaced
   under .v2 / .v2-nav, so a page only opts in by wrapping its content in
   <div class="v2">. Pages that have not been converted keep the Canvas theme
   styling untouched.
   ========================================================================== */


/* the panel, scrim and footer live outside .v2, so they need the tokens too */
.v2, .v2-nav, .v2-mobile-panel, .v2-nav-scrim, .v2-page-head, #footer {
    --ink:       #0e141c;   /* headings */
    --body:      #59636f;   /* body copy */
    --muted:     #8a939e;
    --line:      #e5e9ee;
    --bg:        #ffffff;
    --soft:      #f6f7f9;
    --red:       #c00000;
    --red-hi:    #ff3b30;
    --green:     #12a150;
    --radius:    18px;
    --nav-h:     78px;
}

.v2 *, .v2 *::before, .v2 *::after,
.v2-nav *, .v2-nav *::before, .v2-nav *::after { box-sizing: border-box; }

.v2 {
    background: var(--bg);
    color: var(--body);
    font-family: 'Roboto', sans-serif;
    overflow-x: clip;
}
.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -.022em;
    font-weight: 600;
}
.v2 p { margin: 0; }
.v2 a { text-decoration: none; }

.v2-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }

/* ==========================================================================
   NAV - transparent over the hero, solid after scroll
   ========================================================================== */

.v2-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 500;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    font-family: 'Rubik', sans-serif;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .35s ease, box-shadow .35s ease, height .35s ease, border-color .35s ease;
}
.v2-nav.is-solid {
    height: 68px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
    box-shadow: 0 8px 30px -18px rgba(14,20,28,.5);
}

/* pages without a dark hero: the nav never goes transparent, and this keeps
   their content clear of the fixed bar */
.v2-nav.is-static { height: 68px; }
.v2-nav-spacer { height: 68px; }

.v2-nav-inner {
    width: 100%; max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.v2-nav-logo { flex: none; display: block; }
.v2-nav-logo img {
    height: 46px;
    width: auto;
    display: block;
    transition: filter .35s ease, height .35s ease;
    /* only one (dark) logo exists in the repo - knock it out to white while
       the nav sits over the dark hero. A real light logo would be better. */
    filter: brightness(0) invert(1);
}
.v2-nav.is-solid .v2-nav-logo img { filter: none; height: 40px; }

.v2-nav-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 auto 0 12px;
    padding: 0;
    list-style: none;
}
.v2-nav-menu a {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .005em;
    color: rgba(255,255,255,.86);
    transition: color .25s;
    white-space: nowrap;
}
.v2-nav-menu a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    height: 2px; width: 0;
    background: var(--red-hi);
    transition: width .28s cubic-bezier(.2,.7,.3,1);
}
.v2-nav-menu a:hover { color: #fff; }
.v2-nav-menu a:hover::after,
.v2-nav-menu a.current::after { width: 100%; }
.v2-nav.is-solid .v2-nav-menu a { color: var(--body); }
.v2-nav.is-solid .v2-nav-menu a:hover,
.v2-nav.is-solid .v2-nav-menu a.current { color: var(--ink); }
.v2-nav.is-solid .v2-nav-menu a::after { background: var(--red); }

.v2-nav-right { display: flex; align-items: center; gap: 14px; flex: none; }
.v2-nav-tel {
    font-size: 14px;
    color: rgba(255,255,255,.86);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.v2-nav-tel:hover { color: #fff; }
.v2-nav.is-solid .v2-nav-tel { color: var(--body); }
.v2-nav.is-solid .v2-nav-tel:hover { color: var(--ink); }

.v2-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    padding: 11px 20px;
    border-radius: 100px;
    background: var(--red);
    color: #fff;
    transition: transform .25s, box-shadow .25s, background .25s;
    white-space: nowrap;
}
.v2-nav-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -10px rgba(192,0,0,.65);
}

/* --- burger: three bars that fold into an X --- */
.v2-burger {
    display: none;
    position: relative;
    flex: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background .25s, border-color .25s;
}
.v2-nav.is-solid .v2-burger { border-color: var(--line); background: var(--soft); }

.v2-burger span {
    position: absolute;
    left: 13px;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .32s cubic-bezier(.4,.1,.2,1), opacity .2s ease, background .25s;
}
.v2-nav.is-solid .v2-burger span { background: var(--ink); }
.v2-burger span:nth-child(1) { transform: translateY(-6px); }
.v2-burger span:nth-child(3) { transform: translateY(6px); }
.v2-burger.open span:nth-child(1) { transform: rotate(45deg); }
.v2-burger.open span:nth-child(2) { opacity: 0; }
.v2-burger.open span:nth-child(3) { transform: rotate(-45deg); }

/* --- scrim --- */
.v2-nav-scrim {
    position: fixed; inset: 0;
    z-index: 498;
    background: rgba(8,9,10,.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}
.v2-nav-scrim.open { opacity: 1; visibility: visible; }

/* --- panel: anchored to the solid nav height, since opening always solidifies it --- */
.v2-mobile-panel {
    position: fixed;
    top: 68px; left: 0; right: 0;
    z-index: 499;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 50px -24px rgba(14,20,28,.45);
    padding: 8px 18px 20px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform .32s cubic-bezier(.2,.7,.3,1), opacity .26s ease, visibility .32s;
}
.v2-mobile-panel.open { transform: none; opacity: 1; visibility: visible; }

.v2-mobile-panel .lnk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 2px;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color .2s, padding-left .2s;
}
.v2-mobile-panel .lnk i { color: var(--muted); font-size: 15px; }
.v2-mobile-panel .lnk:hover,
.v2-mobile-panel .lnk.current { color: var(--red); padding-left: 4px; }
.v2-mobile-panel .lnk.current i { color: var(--red); }

.v2-mobile-panel .v2-nav-cta {
    display: inline-flex;
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
    font-size: 15px;
}
.v2-panel-tel {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 14px;
    font-size: 14.5px;
    color: var(--body);
}
.v2-panel-tel:hover { color: var(--ink); }
.v2-panel-social {
    display: flex; justify-content: center; gap: 9px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
/* the base .v2-social is built for the dark hero; on the white panel it would
   be white-on-white */
.v2-panel-social .v2-social {
    color: var(--ink);
    background: #fff;
    border-color: var(--line);
}
.v2-panel-social .v2-social:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* ==========================================================================
   HERO - dark
   ========================================================================== */

.v2-hero {
    position: relative;
    isolation: isolate;
    /* One turn of the carousel. The tab progress bar, the Ken Burns zoom inside
       the front phone and the JS autoplay timer all read this, so they start
       and finish together instead of drifting apart on their own clocks. */
    --v2-slide: 6000ms;
    padding: calc(var(--nav-h) + clamp(40px, 5vw, 70px)) 0 clamp(140px, 13vw, 180px);
    color: #fff;
    background:
        radial-gradient(58% 52% at 76% 26%, rgba(192,0,0,.32) 0%, transparent 62%),
        radial-gradient(50% 50% at 6% 90%, rgba(192,0,0,.13) 0%, transparent 60%),
        linear-gradient(180deg, #0a0b0d 0%, #08090a 52%, #0b0c0e 100%);
}
.v2-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 62% at 50% 40%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 62% at 50% 40%, #000 0%, transparent 100%);
}
.v2-hero h1, .v2-hero h2, .v2-hero h3 { color: #fff; }

.v2-hero-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    column-gap: clamp(30px, 4vw, 60px);
    row-gap: 0;
    align-items: center;
}
/* tabs are a grid sibling (not nested in the copy) so mobile can slot the
   phone between the copy and its own selector */
.v2-hero-copy   { grid-column: 1; grid-row: 1; }
/* pan-y: vertical scrolling stays with the page, horizontal drags are ours */
.v2-hero-visual { grid-column: 2; grid-row: 1 / span 2; touch-action: pan-y; }
.v2-tabs        { grid-column: 1; grid-row: 2; }

/* ---------- rotating message block ---------- */

/* brand slogan - static above the rotating headlines */
.v2-slogan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(11px, 1vw, 12.5px);
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
}
.v2-slogan::after {
    content: '';
    height: 1px;
    flex: 1;
    max-width: 96px;
    background: linear-gradient(90deg, var(--red-hi), transparent);
}

/* All three messages occupy the same grid cell, so the block is always as tall
   as the tallest slide and nothing below it shifts when the slider advances. */
.v2-msgs { display: grid; }
.v2-msg {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.v2-msg.active { opacity: 1; transform: none; pointer-events: auto; }

/* Slide 1 carries the page's single <h1>; slides 2 and 3 are <h2>, because
   three <h1>s on one page leaves search engines with no primary heading.
   Both are styled identically here, so the demotion is invisible. */
.v2-msg h1,
.v2-msg h2 {
    font-size: clamp(2rem, 3.5vw, 2.95rem);
    letter-spacing: -.03em;
}
.v2-msg h1 .accent,
.v2-msg h2 .accent {
    color: #ff5a45;
    -webkit-text-fill-color: #ff5a45;
}
.v2-msg-sub {
    margin-top: 20px;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.68;
    max-width: 48ch;
    color: rgba(255,255,255,.66);
}
.v2-msg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 30px; }

/* social row - stands in for the CTA on the channel slide */
.v2-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.v2-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 17px;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
/* light-background variant, used in the channel section */
.v2-socials.on-light .v2-social {
    color: var(--ink);
    background: #fff;
    border-color: var(--line);
}
.v2-socials.on-light .v2-social:hover {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

.v2-follow { text-align: right; }
.v2-follow-lbl {
    display: block;
    margin-bottom: 11px;
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.v2-follow .v2-socials { margin-top: 0; }

.v2-social:hover {
    color: #fff;
    transform: translateY(-3px);
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 12px 26px -10px rgba(192,0,0,.7);
}

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    padding: 14px 26px;
    border-radius: 100px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.v2-btn-primary {
    background: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(224,6,0,.55);
}
.v2-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(224,6,0,.72); }

.v2-btn-ghost-dark {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.v2-btn-ghost-dark:hover { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.36); transform: translateY(-2px); }

.v2-btn-ghost {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}
.v2-btn-ghost:hover { color: var(--ink); border-color: #c3cad3; transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(14,20,28,.5); }

/* ---------- tabs ---------- */

.v2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.v2-tab {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 132px;
    text-align: left;
    padding: 13px 16px 15px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.6);
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s;
}
.v2-tab:hover { color: #fff; background: rgba(255,255,255,.075); }
.v2-tab.active { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); }
.v2-tab small {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 5px;
}
.v2-tab .bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 0;
    background: var(--red-hi);
}
.v2-tab.active .bar { animation: v2-progress var(--v2-slide) linear forwards; }
.v2-tabs.paused .v2-tab.active .bar { animation-play-state: paused; }
@keyframes v2-progress { from { width: 0 } to { width: 100% } }

/* ---------- phone carousel ---------- */

.v2-stage-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 540px;
    perspective: 1500px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
    /* --v2-drag follows the finger during a swipe and is released on lift */
    transform: translate3d(var(--v2-drag, 0px), 0, 0);
    transition: transform .45s cubic-bezier(.2,.7,.3,1);
    -webkit-user-select: none;
    user-select: none;
}
.v2-stage-wrap.dragging { transition: none; }
.v2-stage-wrap::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,0,0,.5) 0%, transparent 70%);
    filter: blur(64px);
}

.v2-phone {
    position: absolute;
    width: clamp(232px, 24vw, 292px);
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 42px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow:
        0 0 0 2px rgba(0,0,0,.85),
        0 45px 90px -25px rgba(0,0,0,.9),
        inset 0 1px 0 rgba(255,255,255,.15);
    transform-style: preserve-3d;
    /* slight overshoot on the tail end so the phones visibly settle
       into place rather than easing flatly to a stop */
    transition:
        transform  .95s cubic-bezier(.34,.86,.32,1.05),
        opacity    .7s  ease,
        filter     .7s  ease,
        box-shadow .7s  ease;
    cursor: pointer;
    will-change: transform;
}

/* front - lifted, square-on, glowing */
.v2-phone[data-pos="0"] {
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1);
    opacity: 1; z-index: 3;
    filter: none;
    transition-delay: 0ms;
    box-shadow:
        0 0 0 2px rgba(0,0,0,.85),
        0 45px 90px -25px rgba(0,0,0,.9),
        0 0 78px -16px rgba(192,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.15);
    cursor: default;
}
/* right rear - pushed back in Z, dropped, tilted and fanned */
.v2-phone[data-pos="1"] {
    transform: translate3d(56%, 26px, -210px) rotateY(-26deg) rotateZ(4deg) scale(.9);
    opacity: .5; z-index: 2;
    filter: saturate(.6) brightness(.72);
    transition-delay: 70ms;
}
/* left rear - mirrored, and a touch further back so the stack reads as depth */
.v2-phone[data-pos="2"] {
    transform: translate3d(-56%, 26px, -210px) rotateY(26deg) rotateZ(-4deg) scale(.9);
    opacity: .38; z-index: 1;
    filter: saturate(.6) brightness(.66);
    transition-delay: 130ms;
}
.v2-phone[data-pos="1"]:hover,
.v2-phone[data-pos="2"]:hover {
    opacity: .8;
    filter: saturate(.9) brightness(.95);
    transition-delay: 0ms;
}

.v2-phone-screen {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 35px;
    overflow: hidden;
    background: #111;
}
.v2-phone-screen::before {
    content: '';
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 34%; height: 19px;
    background: #000;
    border-radius: 100px;
    z-index: 6;
}

/* Crossfading stack inside each phone.
   (SWAP IN MP4: replace each <img class="v2-reel"> with
    <video class="v2-reel" muted loop playsinline preload="none" poster="…">)

   The reels used to run their own 15s loop, which had nothing to do with the
   6s carousel - so the zoom and the image swap landed at random points during
   a phone change. Now the script owns it: only the phone at the front zooms,
   the zoom lasts exactly one turn, and each phone swaps to its next image
   *after* it has dropped to the back, where the crossfade is out of the way. */
.v2-reel {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    -webkit-user-drag: none;
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.v2-reel.on { opacity: 1; }

/* Ken Burns, front phone only, one turn long. Dropping out of the front
   removes the animation and the transition above unwinds the scale, so the
   image settles back as the phone rotates away rather than snapping. */
.v2-phone[data-pos="0"] .v2-reel.on {
    animation: v2-reel-zoom var(--v2-slide) linear forwards;
}
.v2-stage-wrap.paused .v2-phone[data-pos="0"] .v2-reel.on { animation-play-state: paused; }
@keyframes v2-reel-zoom {
    from { transform: scale(1.00); }
    to   { transform: scale(1.08); }
}

.v2-screen-shade {
    position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 24%, transparent 50%, rgba(0,0,0,.84) 100%);
}
.v2-screen-meta { position: absolute; left: 15px; right: 15px; bottom: 17px; z-index: 4; }
.v2-screen-handle {
    font-family: 'Rubik', sans-serif;
    font-size: 13.5px; font-weight: 500; color: #fff;
    display: flex; align-items: center; gap: 6px;
}
.v2-screen-handle .tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: #3b9dff; color: #fff; font-size: 8px;
}
.v2-screen-cap { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.82); }


.v2-screen-rail {
    position: absolute; right: 11px; bottom: 84px; z-index: 4;
    display: flex; flex-direction: column; gap: 15px; align-items: center;
    color: #fff; font-size: 10px; text-align: center;
}
.v2-screen-rail i { display: block; font-size: 19px; margin-bottom: 3px; }

.v2-dots { display: flex; gap: 7px; justify-content: center; margin-top: 26px; position: relative; z-index: 4; }
.v2-dot {
    width: 7px; height: 7px; border-radius: 50%; padding: 0;
    border: none; background: rgba(255,255,255,.24); cursor: pointer;
    transition: background .3s, width .3s;
}
.v2-dot.active { background: var(--red-hi); width: 22px; border-radius: 100px; }

/* ==========================================================================
   SEARCH - light card overlapping the hero
   ========================================================================== */

.v2-search-wrap { position: relative; z-index: 6; margin-top: clamp(-120px, -10vw, -92px); }
.v2-search {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 32px);
    box-shadow: 0 40px 80px -34px rgba(14,20,28,.45);
}
.v2-search-title {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.v2-search-title h3 { font-size: 1.14rem; font-weight: 500; }
.v2-search-title a { font-size: 13px; color: var(--muted); }
.v2-search-title a:hover { color: var(--red); }

.v2-field-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.v2-f-3 { grid-column: span 3; }
.v2-f-6 { grid-column: span 6; }
.v2-f-12 { grid-column: span 12; }

.v2 label.v2-lbl {
    display: block; font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 7px; font-weight: 500;
}
.v2 .v2-input {
    width: 100%; height: 50px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    font-size: 15px; padding: 0 15px;
    font-family: 'Roboto', sans-serif;
    appearance: none; -webkit-appearance: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.v2 .v2-input::placeholder { color: #b3bac2; }
.v2 .v2-input:focus {
    outline: none; background: #fff;
    border-color: rgba(192,0,0,.55);
    box-shadow: 0 0 0 4px rgba(192,0,0,.1);
}
.v2 select.v2-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2359636f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center;
    padding-right: 40px; cursor: pointer;
}
/* --- bootstrap-select, restyled to match the other fields in the card --- */
.v2 .bootstrap-select { width: 100% !important; }
.v2 .bootstrap-select > .dropdown-toggle {
    height: 50px;
    display: flex;
    align-items: center;
    background: var(--soft) !important;
    border: 1px solid var(--line) !important;
    border-radius: 11px !important;
    color: var(--ink) !important;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 0 40px 0 15px;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.v2 .bootstrap-select > .dropdown-toggle:hover { background: var(--soft) !important; }
.v2 .bootstrap-select.show > .dropdown-toggle,
.v2 .bootstrap-select > .dropdown-toggle:focus {
    background: #fff !important;
    border-color: rgba(192,0,0,.55) !important;
    box-shadow: 0 0 0 4px rgba(192,0,0,.1) !important;
}
/* Bootstrap's .btn sets its own font-size/line-height on the inner spans, so
   the label has to be pinned to match the other inputs exactly. */
.v2 .bootstrap-select > .dropdown-toggle .filter-option,
.v2 .bootstrap-select > .dropdown-toggle .filter-option-inner,
.v2 .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    align-items: center;
}
.v2 .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: var(--ink); }
.v2 .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner { color: #b3bac2; }

/* swap Bootstrap's solid triangle for the same chevron the other selects use */
.v2 .bootstrap-select > .dropdown-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 14px; height: 14px;
    margin: 0;
    transform: translateY(-50%);
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2359636f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.v2 .bootstrap-select .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 22px 46px -22px rgba(14,20,28,.45);
    overflow: hidden;
}
.v2 .bootstrap-select .dropdown-menu li a { border-radius: 8px; font-size: 14.5px; padding: 9px 12px; }
.v2 .bootstrap-select .dropdown-menu li a:hover { background: var(--soft); }
.v2 .bootstrap-select .dropdown-menu li a.selected,
.v2 .bootstrap-select .dropdown-menu li a.active {
    background: rgba(192,0,0,.08);
    color: var(--red);
}
.v2 .bootstrap-select .bs-searchbox { padding: 4px 4px 8px; }
.v2 .bootstrap-select .bs-searchbox input {
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 14.5px;
    padding: 0 12px;
    box-shadow: none;
}
.v2 .bootstrap-select .bs-searchbox input:focus {
    border-color: rgba(192,0,0,.5);
    box-shadow: 0 0 0 3px rgba(192,0,0,.1);
}
.v2 .bootstrap-select .no-results { font-size: 13px; color: var(--muted); padding: 10px 12px; }

.v2-search-btn {
    height: 50px; width: 100%; border: none; border-radius: 11px;
    background: linear-gradient(135deg,#e10600,var(--red));
    color: #fff; font-family: 'Rubik', sans-serif;
    font-size: 14.5px; font-weight: 500; cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(224,6,0,.5);
    transition: transform .2s, box-shadow .2s;
}
.v2-search-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(224,6,0,.65); }

/* ==========================================================================
   Shared light-section furniture
   ========================================================================== */

.v2-sec { padding: clamp(72px, 9vw, 108px) 0; }
.v2-sec-soft { background: var(--soft); }

/* Section label. Deliberately not a rounded tinted pill - a short red rule
   and plain letterspaced caps, matching the .v2-slogan device in the hero so
   the page reads as one system rather than a stack of template components. */
.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: 'Rubik', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
}
.v2-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    flex: none;
    background: var(--red);
}
.v2-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 42px; }
.v2-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); margin-top: 15px; }
.v2-head p { margin-top: 14px; max-width: 54ch; font-size: 1rem; line-height: 1.65; }

/* ==========================================================================
   REPORT SHOWCASE
   ========================================================================== */

.v2-report-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.v2-cat-list { display: grid; gap: 9px; margin-top: 28px; }
/* Reads like a contents page: system on the left, its count on the right,
   and a total row so the numbers explain themselves. */
.v2-cat {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .25s, transform .25s;
}
.v2-cat:hover { border-color: #c9d0d8; transform: translateX(3px); }
.v2-cat-t { font-size: 15px; color: var(--ink); font-weight: 500; }
.v2-cat-n {
    flex: none;
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    color: var(--muted);
}
.v2-cat-n b { color: var(--red); font-weight: 600; font-size: 15px; margin-right: 3px; }

.v2-cat-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    margin-top: 5px;
    padding: 16px 16px 0;
    border-top: 1px solid var(--line);
    font-family: 'Rubik', sans-serif;
}
.v2-cat-total .lbl {
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
}
.v2-cat-total .val { font-size: 15px; font-weight: 500; color: var(--ink); }
.v2-cat-total .val b { color: var(--red); font-weight: 600; font-size: 17px; margin-right: 3px; }

.v2-extras { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.v2-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 100px;
    background: #fff; border: 1px solid var(--line);
    font-size: 12.5px; color: var(--body);
}
.v2-chip i { color: var(--green); font-size: 14px; }

/* --- the recreated report document --- */

.v2-doc-stage { position: relative; }
.v2-doc-stage::before {
    content: '';
    position: absolute; inset: 8% -4% -6% -4%;
    background: radial-gradient(60% 50% at 50% 50%, rgba(14,20,28,.13), transparent 72%);
    filter: blur(28px);
}
.v2-doc {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 80px -34px rgba(14,20,28,.42);
    transform: rotate(0deg);
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.v2-doc:hover { transform: rotate(-1.2deg) translateY(-5px); }

.v2-doc-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: #4a4f57;
}
.v2-doc-bar .lbl { font-size: 10.5px; color: rgba(255,255,255,.75); }
.v2-doc-bar .btns { margin-left: auto; display: flex; gap: 6px; }
.v2-doc-bar .btns span {
    font-size: 9.5px; color: #2b3038; background: #fff;
    padding: 3px 8px; border-radius: 4px; font-weight: 500;
}

.v2-doc-body { padding: 26px clamp(18px, 3vw, 30px) 28px; }
.v2-doc-logo { display: block; height: 46px; margin: 0 auto 12px; }
.v2-doc h3 {
    text-align: center;
    font-size: clamp(1.2rem, 2.1vw, 1.62rem);
    color: #1b2735;
    letter-spacing: -.02em;
}
.v2-doc-veh { text-align: center; font-size: 1rem; color: #46505c; margin-top: 5px; }
.v2-doc-date { text-align: center; font-size: 12px; color: var(--muted); margin-top: 3px; }

.v2-doc-h {
    font-family: 'Rubik', sans-serif;
    font-size: 13px; font-weight: 600; color: #1b2735;
    padding-bottom: 7px; margin: 22px 0 12px;
    border-bottom: 1px solid var(--line);
}
.v2-doc-ov {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 7px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
}
.v2-doc-ov div { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.v2-doc-ov dt { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
.v2-doc-ov dd { margin: 0; color: #1b2735; font-weight: 500; text-align: right; }

/* annotated vehicle images + finding notes */
.v2-doc-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v2-doc-shot {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.v2-doc-shot-img { position: relative; aspect-ratio: 4 / 3; background: var(--soft); }
.v2-doc-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-doc-shot-body { padding: 9px 11px 11px; }
.v2-doc-shot-label {
    font-family: 'Rubik', sans-serif;
    font-size: 11.5px; font-weight: 600; color: #1b2735;
}
.v2-doc-shot-note {
    margin-top: 4px;
    font-size: 10.5px; line-height: 1.5; color: #626d7a;
}

.v2-doc-check { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.v2-doc-check-h {
    background: var(--soft);
    padding: 8px 14px;
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
}
.v2-doc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 14px;
    border-top: 1px solid var(--line);
    font-size: 12.5px; color: #33404e;
}
.v2-doc-row .yes { color: var(--green); font-weight: 700; }
.v2-doc-row .no  { color: var(--red);   font-weight: 700; }
.v2-doc-more { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); text-align: center; }

.v2-doc-badge {
    position: absolute;
    right: -14px; top: 74px;
    z-index: 4;
    background: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    color: #fff;
    border-radius: 13px;
    padding: 13px 17px;
    box-shadow: 0 22px 44px -18px rgba(192,0,0,.75);
    text-align: center;
}
.v2-doc-badge .n {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem; font-weight: 600; line-height: 1;
}
.v2-doc-badge .t {
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.78); margin-top: 5px;
}

/* ==========================================================================
   FEED WALL - light
   ========================================================================== */

.v2-feed { padding: clamp(72px, 9vw, 108px) 0; background: var(--soft); overflow: hidden; }
.v2-marquee { position: relative; }
.v2-marquee::before, .v2-marquee::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: clamp(40px, 10vw, 150px); z-index: 3; pointer-events: none;
}
.v2-marquee::before { left: 0;  background: linear-gradient(90deg,  var(--soft) 0%, rgba(246,247,249,.9) 34%, transparent 100%); }
.v2-marquee::after  { right: 0; background: linear-gradient(270deg, var(--soft) 0%, rgba(246,247,249,.9) 34%, transparent 100%); }

.v2-track { display: flex; gap: 15px; width: max-content; will-change: transform; }
.v2-track-a { animation: v2-scroll-l 64s linear infinite; }
.v2-marquee:hover .v2-track { animation-play-state: paused; }
@keyframes v2-scroll-l { from { transform: translateX(0) }      to { transform: translateX(-50%) } }

.v2-tile {
    position: relative; flex: none; display: block;
    width: clamp(128px, 12.5vw, 178px);
    aspect-ratio: 9 / 16;
    border-radius: 15px; overflow: hidden;
    border: 1px solid var(--line);
    background: #e9ecf0;
    box-shadow: 0 14px 30px -20px rgba(14,20,28,.5);
    transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.v2-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.v2-tile:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 26px 46px -22px rgba(14,20,28,.6); }
.v2-tile:hover img { transform: scale(1.07); }
.v2-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, transparent 42%, rgba(0,0,0,.62) 72%, rgba(0,0,0,.92) 100%); }
.v2-tile-play {
    position: absolute; top: 10px; left: 10px;
    width: 25px; height: 25px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(0,0,0,.48);
    backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.24);
    color: #fff; font-size: 10px;
}
.v2-tile-body {
    position: absolute; left: 11px; right: 11px; bottom: 11px;
    display: flex; flex-direction: column; gap: 5px;
}
.v2-tile-title {
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.32;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2-tile-meta {
    font-size: 10.5px;
    color: rgba(255,255,255,.72);
    display: flex; align-items: center; gap: 5px;
}

/* ==========================================================================
   VEHICLES - light
   ========================================================================== */

.v2-car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

.v2-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .38s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .38s;
}
.v2-card:hover { transform: translateY(-6px); border-color: #d3dae1; box-shadow: 0 30px 56px -30px rgba(14,20,28,.45); }

.v2-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.v2-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.v2-card:hover .v2-card-media img { transform: scale(1.06); }

.v2-price {
    position: absolute; bottom: 12px; left: 12px;
    padding: 9px 16px; border-radius: 10px;
    background: rgba(14,20,28,.88);
    backdrop-filter: blur(8px);
    font-family: 'Rubik', sans-serif;
    font-size: 1.12rem; font-weight: 600; color: #fff;
}
.v2-price span { font-size: 11.5px; color: rgba(255,255,255,.6); font-weight: 400; margin-right: 3px; }

.v2-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.v2-card-body h3 { font-size: 1.22rem; font-weight: 500; line-height: 1.35; }
.v2-card-body h3 a { color: var(--ink); }
.v2-card-body h3 a:hover { color: var(--red); }
.v2-card-yard { margin-top: 8px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.v2-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 1px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.v2-spec-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v2-spec-v { margin-top: 5px; font-size: 15px; font-weight: 500; color: var(--ink); }

.v2-card-foot { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.v2-card-foot .link { font-family: 'Rubik', sans-serif; font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; transition: gap .25s, color .25s; }
.v2-card-foot .link:hover { gap: 12px; color: var(--red); }
.v2-card-foot .rep { font-size: 13px; color: var(--red); font-weight: 500; }

.v2-empty { grid-column: 1 / -1; padding: 56px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

/* ==========================================================================
   WHY - light
   ========================================================================== */


/* About head: heading left, body copy right, so the band is not half empty.
   Cards then run full width underneath, which is what buys them a big image. */
.v2-about-head {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    margin-bottom: 44px;
}
.v2-about-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); margin-top: 15px; }
.v2-about-text p { font-size: 1rem; line-height: 1.68; }
.v2-about-text p + p { margin-top: 16px; }

.v2-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.v2-why-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.v2-why-item:hover { border-color: #d3dae1; transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(14,20,28,.4); }
.v2-why-body { padding: 20px 22px 24px; }
.v2-why-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    cursor: zoom-in;
}
.v2-why-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 32%; display: block;
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.v2-why-thumb:hover img { transform: scale(1.08); }

/* click-to-expand affordance */
.v2-why-zoom {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(14,20,28,.42);
    color: #fff; font-size: 26px;
    opacity: 0;
    transition: opacity .25s ease;
}
.v2-why-thumb:hover .v2-why-zoom,
.v2-why-thumb:focus-visible .v2-why-zoom { opacity: 1; }
.v2-why-item h3 { font-size: 1.08rem; font-weight: 500; }
.v2-why-item p { margin-top: 8px; font-size: .92rem; line-height: 1.62; }

/* ==========================================================================
   CTA
   ========================================================================== */

/* Sits directly under the about section and shares its soft background, so the
   red card reads as part of that block rather than floating on a white strip. */
.v2-cta { padding: 0 0 clamp(72px, 9vw, 108px); background: var(--soft); }
.v2-cta-inner {
    position: relative; overflow: hidden;
    border-radius: 24px; padding: clamp(42px, 5.5vw, 72px);
    background: linear-gradient(120deg, #8c0000 0%, var(--red) 44%, #4a0000 100%);
    text-align: center;
}
.v2-cta-inner::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
}
.v2-cta-inner > * { position: relative; }
.v2-cta-inner h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.85rem); }
.v2-cta-inner p { color: rgba(255,255,255,.86); margin: 16px auto 0; max-width: 52ch; line-height: 1.65; }
.v2-cta-btns { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 32px; }
.v2-cta .v2-btn-primary { background: #fff; color: var(--red); box-shadow: 0 14px 32px -12px rgba(0,0,0,.5); }
.v2-cta .v2-btn-primary:hover { color: var(--red); background: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .v2-nav-menu { gap: 18px; }
    .v2-nav-tel { display: none; }
}

@media (max-width: 991.98px) {
    .v2-nav-menu { display: none; }
    .v2-burger { display: inline-flex; }
    .v2-nav-inner { gap: 14px; }
    .v2-nav-right { margin-left: auto; }

    /* Order on mobile: copy, then the phone, then the selector directly under
       it - tapping a tab now changes something you can actually see. */
    .v2-hero-grid { grid-template-columns: 1fr; }
    .v2-hero-copy   { grid-column: 1; grid-row: 1; }
    .v2-hero-visual { grid-column: 1; grid-row: 2; }
    .v2-tabs        { grid-column: 1; grid-row: 3; margin-top: 30px; padding-top: 26px; }
    .v2-dots { display: none; }           /* redundant once the tabs sit below */
    .v2-hero-copy { text-align: center; }
    .v2-msg-sub { margin-inline: auto; }
    .v2-slogan { justify-content: center; }
    .v2-slogan::after { display: none; }
    .v2-msg-cta { justify-content: center; }
    .v2-hero .v2-socials { justify-content: center; }   /* slide 2 icons only; the channel row stays left */
    .v2-stage-wrap { min-height: 470px; }
    .v2-report-grid { grid-template-columns: 1fr; }
    .v2-doc-badge { right: 8px; top: 8px; }
    .v2-f-3 { grid-column: span 6; }

    .v2-about-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }

    /* the channel head stacks, so the follow block leads left like everything else */
    .v2-follow { text-align: left; }
    .v2-head { align-items: flex-start; }
}

@media (max-width: 767.98px) {
    .v2-container, .v2-nav-inner { padding-inline: 18px; }
    .v2-f-3, .v2-f-6 { grid-column: span 12; }
    .v2-search-wrap { margin-top: -74px; }
    .v2-car-grid { grid-template-columns: 1fr; }
    .v2-tabs { flex-direction: column; }
    /* flex-basis 0 collapses the tabs once the axis is vertical */
    .v2-tab { flex: 0 0 auto; min-width: 0; }
    .v2-nav .v2-nav-cta { display: none; }   /* bar only - the panel keeps its CTA */
    .v2-doc-ov { grid-template-columns: 1fr; }
    .v2-doc-shots { grid-template-columns: 1fr; }

    .v2-why-grid { grid-template-columns: 1fr; }
    .v2-cat-total { flex-direction: column; align-items: flex-start; gap: 6px; }
    .v2-social { width: 46px; height: 46px; font-size: 16px; }
    .v2-socials { gap: 8px; }
    .v2-doc-badge { right: 6px; top: 6px; padding: 10px 13px; }
    .v2-doc-badge .n { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------
   Reduced-motion means "don't make me seasick", not "show me nothing". A
   blanket kill here made the hero carousel invisible - it snapped between
   states with no travel at all.

   So the split is by *kind* of motion:
     · ambient, infinite, unprompted loops  → off  (marquee, Ken Burns reels)
     · the hero carousel                    → still moves, but damped:
         no 3D rotation, no Z travel, no spring overshoot, shorter distance,
         and a single flat ease. Enough to read as movement, none of the
         vestibular triggers.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    /* --- ambient loops: off --- */
    .v2-track,
    .v2-track-a,
    .v2-track-a { animation: none !important; transform: none !important; }

    /* the reels still change with the slide - it is the Ken Burns zoom that goes */
    .v2-reel { animation: none !important; transform: none !important; }

    /* --- hero carousel: damped, but visibly moving ---
       The swipe follow stays: it tracks the finger, so it is direct
       manipulation like scrolling, not unprompted motion. Only the
       spring on release is flattened. */
    .v2-stage-wrap { transition: transform .3s ease; }
    .v2-phone {
        transition: transform .65s ease, opacity .5s ease, filter .5s ease !important;
        transition-delay: 0ms !important;
    }
    .v2-phone[data-pos="0"] { transform: translate3d(0, 0, 0) scale(1) !important; }
    .v2-phone[data-pos="1"] { transform: translate3d(52%, 12px, 0) scale(.88) !important; }
    .v2-phone[data-pos="2"] { transform: translate3d(-52%, 12px, 0) scale(.88) !important; }

    /* headline swap becomes a straight crossfade - no slide */
    .v2-msg { transform: none !important; transition: opacity .4s ease !important; }

    /* hover flourishes that lift or rotate things: off */
    .v2-doc:hover,
    .v2-tile:hover,
    .v2-card:hover,
    .v2-why-item:hover,
    .v2-btn:hover,
    .v2-nav-cta:hover,
    .v2-search-btn:hover { transform: none !important; }
}

/* ==========================================================================
   Inner-page header
   Light by design: a black band directly under a white nav reads heavy and
   competes with the homepage hero. This is a page title, not a hero.
   ========================================================================== */

.v2-page-head {
    position: relative;
    padding: clamp(40px, 5vw, 64px) 0 clamp(36px, 4.5vw, 56px);
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    color: var(--body);
}
.v2-page-head::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, #8c0000 0%, var(--red) 26%, #ff5a45 52%, var(--red) 76%, #8c0000 100%);
}

.v2-page-head h1 {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.12;
    letter-spacing: -.03em;
    font-size: clamp(1.75rem, 3.6vw, 2.7rem);
}
.v2-page-head p {
    margin: 13px 0 0;
    max-width: 62ch;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(.96rem, 1.15vw, 1.05rem);
    line-height: 1.65;
    color: var(--body);
}

/* second intro paragraph - sits under the sub line, slightly quieter */
.v2-page-head p.v2-page-lead {
    margin-top: 10px;
    max-width: 68ch;
    color: var(--muted);
}

.v2-page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s, gap .2s;
}
.v2-page-back:hover { color: var(--red); gap: 12px; }

/* the partial renders outside .v2, so it carries its own container */
.v2-page-head .v2-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
}
@media (max-width: 767.98px) {
    .v2-page-head .v2-container { padding-inline: 18px; }
}

/* a page header immediately followed by body content does not need the extra
   top padding the body would otherwise add */
.v2-page-head + .v2-page { padding-top: clamp(38px, 5vw, 62px); }

/* ==========================================================================
   THEME BRIDGE
   --------------------------------------------------------------------------
   Pages that still use the Canvas theme markup opt in by wrapping their
   content in <div class="v2 v2-page">. These rules map the components those
   pages already use onto the v2 look, so their Blade markup does not have to
   be rewritten. Converting a page is therefore one wrapper, not a rebuild.
   ========================================================================== */

.v2-page {
    padding: clamp(52px, 6.5vw, 84px) 0;
    background: var(--bg);
    color: var(--body);
    font-family: 'Roboto', sans-serif;
}

/* neutralise the theme's own section chrome */
.v2-page #content,
.v2-page .content-wrap,
.v2-page .section {
    padding: 0;
    margin: 0;
    background: transparent;
}
.v2-page .container,
.v2-page .auto-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---------- typography ---------- */
.v2-page h1, .v2-page h2, .v2-page h3,
.v2-page h4, .v2-page h5, .v2-page h6,
.v2-page .sec-title_heading {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.022em;
    line-height: 1.2;
    text-transform: none;
}
.v2-page h2, .v2-page .sec-title_heading { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.v2-page h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.v2-page h4 { font-size: 1.15rem; }
.v2-page h5 { font-size: 1.02rem; font-weight: 500; }
.v2-page p,
.v2-page li { color: var(--body); line-height: 1.7; }
.v2-page a { color: var(--red); }
.v2-page a:hover { color: #8c0000; }
.v2-page .heading-block { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.v2-page .heading-block::after { display: none; }
.v2-page .text-success { color: var(--ink) !important; }

/* ---------- buttons ---------- */
.v2-page .button,
.v2-page button[type="submit"]:not(.v2-search-btn),
.v2-page .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: auto;
    margin: 0;
    padding: 15px 28px;
    border: 0;
    border-radius: 100px;
    background: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    background-image: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    box-shadow: 0 10px 28px -8px rgba(224,6,0,.5);
    transition: transform .25s, box-shadow .25s;
}
.v2-page .button:hover,
.v2-page button[type="submit"]:not(.v2-search-btn):hover,
.v2-page .btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -10px rgba(224,6,0,.68);
}
.v2-page .button::before,
.v2-page .button::after { display: none; }
.v2-page .button-border {
    background: #fff;
    background-image: none;
    border: 1px solid var(--line);
    color: var(--ink);
    box-shadow: none;
}
.v2-page .button-border:hover {
    background: #fff;
    color: var(--ink);
    border-color: #c3cad3;
    box-shadow: 0 14px 30px -16px rgba(14,20,28,.45);
}

/* ---------- form fields ---------- */
.v2-page .form-control,
.v2-page input[type="text"],
.v2-page input[type="email"],
.v2-page input[type="tel"],
.v2-page input[type="number"],
.v2-page input[type="date"],
.v2-page select,
.v2-page textarea {
    height: 50px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 0 15px;
    box-shadow: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.v2-page textarea,
.v2-page textarea.form-control {
    height: auto;
    min-height: 140px;
    padding: 14px 15px;
    line-height: 1.6;
}
.v2-page .form-control::placeholder,
.v2-page input::placeholder,
.v2-page textarea::placeholder { color: #b3bac2; }
.v2-page .form-control:focus,
.v2-page input:focus,
.v2-page select:focus,
.v2-page textarea:focus {
    outline: none;
    background: #fff;
    border-color: rgba(192,0,0,.55);
    box-shadow: 0 0 0 4px rgba(192,0,0,.1);
}
.v2-page label {
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--body);
    margin-bottom: 7px;
}

/* ---------- cards / panels ---------- */
.v2-page .card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    background: #fff;
}
.v2-page .card-header { background: var(--soft); border-bottom: 1px solid var(--line); }

/* ---------- vehicle cards (.real-estate-item) ----------
   The theme markup is a Bootstrap column holding an image block and a desc
   block as separate boxes, so the two are stitched into one framed card here:
   border on top/sides for the image, sides/bottom for the desc, no seam.
   Images are user-uploaded at wildly different sizes, so the frame is pinned
   to 4:3 and the photo is cropped to cover it - otherwise card heights and
   the text baselines below them never line up. */
.v2-page .real-estate-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
}
.v2-page .real-estate-item-image {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: var(--soft);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.v2-page .real-estate-item-image > a { display: block; width: 100%; height: 100%; }
.v2-page .real-estate-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.v2-page .real-estate-item:hover .real-estate-item-image img { transform: scale(1.05); }

.v2-page .real-estate-item-image .label,
.v2-page .real-estate-item-image .badge {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--red) !important;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.v2-page .real-estate-item-price {
    position: absolute;
    left: 12px; right: auto; bottom: 12px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(14,20,28,.88);
    backdrop-filter: blur(8px);
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.v2-page .real-estate-item-price span {
    color: rgba(255,255,255,.6);
    font-weight: 400;
    font-size: 10.5px;
    margin-right: 3px;
}

.v2-page .real-estate-item-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background: #fff;
    padding: 20px !important;     /* markup carries .p-0 */
    transition: border-color .3s;
}
.v2-page .real-estate-item:hover .real-estate-item-image,
.v2-page .real-estate-item:hover .real-estate-item-desc { border-color: #d3dae1; }

.v2-page .real-estate-item-desc h3 {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.32;
    margin: 0;
}
.v2-page .real-estate-item-desc h3 a { color: var(--ink); text-decoration: none; }
.v2-page .real-estate-item-desc h3 a:hover { color: var(--red); }
.v2-page .real-estate-item-desc > p {
    margin: 7px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}
.v2-page .real-estate-item-desc .line {
    margin: 16px 0 !important;
    border-top: 1px solid var(--line);
}

.v2-page .real-estate-item-features {
    margin: 0;
    padding-inline: 0 !important;   /* markup carries .px-3 */
    row-gap: 14px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.v2-page .real-estate-item-features span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink) !important;
}

/* ---------- pagination ---------- */
.v2-page .pagination .page-link {
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
}
.v2-page .pagination .active .page-link,
.v2-page .pagination .page-item.active .page-link {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ---------- misc theme bits ---------- */
.v2-page .line, .v2-page .divider { border-color: var(--line); }
.v2-page .bg-color, .v2-page .bg-color2 { background-color: var(--red) !important; }
.v2-page .promo { border-radius: var(--radius); border: 1px solid var(--line); }

/* ---------- vehicle-list search panel ---------- */
/* the Canvas tab strip reads as a leftover next to the v2 card style, so it is
   folded into a single panel matching the homepage search card */
.v2-page .canvas-tabs.nav-tabs { display: none; }
.v2-page .tab-container.bg-contrast-200 {
    background: transparent !important;
    padding: 0;
}
.v2-page .tab-container .container { padding-inline: 0; }
.v2-page .tab-content {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 32px);
    box-shadow: 0 30px 70px -40px rgba(14,20,28,.4);
}
.v2-page .tabs { margin-bottom: 0; }

/* vehicle card price chip: match the homepage (bottom-left, tighter) */
.v2-page .real-estate-item-price {
    left: 12px;
    right: auto;
    bottom: 12px;
    padding: 8px 14px;
    font-size: 1rem;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* the map + form panel. Was an inline `box-shadow: 0 0 40px rgba(0,0,0,.2)`
   on a bare .row - square corners and a heavy all-round shadow that read as
   clipped against the page edge. Proper card instead. */
.v2-page .v2-contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px !important;
    box-shadow: 0 34px 74px -46px rgba(14,20,28,.45);
    overflow: hidden;
}
.v2-page .v2-contact-card iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px;
    margin: 0 !important;
    border-radius: calc(var(--radius) - 5px);
    display: block;
}
.v2-page .v2-contact-card .col-padding { padding: 8px 6px 8px 26px; }
.v2-page .v2-contact-card h3 { margin-bottom: 18px; }

/* the reCAPTCHA widget renders at a fixed 304px. Between the card padding and
   the column gutters there is less than that to give on a narrow phone, and the
   card clips overflow - so scale the widget down and reserve the height it ends
   up occupying, otherwise the submit button rides up underneath it. */
.v2-page .recaptcha-wrap { margin: 4px 0 22px; }
.v2-page .recaptcha-wrap .g-recaptcha { transform-origin: 0 0; }

@media (max-width: 767.98px) {
    /* stacked columns - the gutter buys nothing here and the 24px it costs is
       the difference between the widget fitting and being cut off */
    .v2-page .v2-contact-card > .col-md-6 { padding-left: 0; padding-right: 0; }
    .v2-page .v2-contact-card .col-padding { padding: 30px 2px 4px; }
    .v2-page .v2-contact-card h3 { margin-bottom: 16px; }
    .v2-page .v2-contact-card iframe { min-height: 260px; }
}
/* the container is padded 24px a side and the card another 14, so a 390px phone
   has 310px to give the 304px widget - close enough to the edge to be worth
   stepping down from. Each tier keeps the widget clear of the card border. */
@media (max-width: 419.98px) {
    .v2-page .recaptcha-wrap { height: 72px; }
    .v2-page .recaptcha-wrap .g-recaptcha { transform: scale(.92); }
}
@media (max-width: 369.98px) {
    .v2-page .recaptcha-wrap { height: 67px; }
    .v2-page .recaptcha-wrap .g-recaptcha { transform: scale(.85); }
}
@media (max-width: 339.98px) {
    .v2-page .recaptcha-wrap { height: 59px; }
    .v2-page .recaptcha-wrap .g-recaptcha { transform: scale(.75); }
}

/* ==========================================================================
   Request-vehicle-inspection page
   Structure and rhythm only - no copy is touched.
   ========================================================================== */

.v2-page .inspection-container-one,
.v2-page .inspection-deliverables,
.v2-page .inspection-container-last { padding-block: clamp(26px, 3.5vw, 46px); }

/* the wrapper already pads below the page header - the first section must not
   add a second helping of it */
.v2-page .inspection-container-one:first-child,
.v2-page .inspection-deliverables:first-child { padding-top: 0; }
.v2-page .auto-container { padding-inline: 0; }
.v2-page .sec-title { margin-bottom: 0; }
.v2-page .sec-title_heading { margin-bottom: 10px; }

/* lead paragraph reads as a standfirst */
.v2-page .inspection-container-one .sec-title > p {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: 1.72;
    max-width: 70ch;
}

/* video block: copy on the left, player on the right, same two-column rhythm
   as the rest of the page. The player is a facade - a thumbnail button until
   it is clicked, at which point the script swaps in the real iframe. */
.v2-page .inspection-video {
    display: flex;
    align-items: center;
    gap: clamp(26px, 4vw, 54px);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(20px, 3vw, 34px);
}
.v2-page .inspection-video-copy { flex: 1 1 40%; }
.v2-page .inspection-video-copy p {
    margin: 0;
    max-width: 42ch;
}
.v2-page .inspection-video-link {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    color: var(--red);
    border-bottom: 1px solid rgba(192,0,0,.28);
}
.v2-page .inspection-video-link:hover { border-bottom-color: var(--red); }

.v2-page .inspection-video-frame {
    flex: 1 1 60%;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
    background: #0e141c;
    box-shadow: 0 30px 70px -44px rgba(14,20,28,.55);
}
.v2-page .inspection-video-frame iframe,
.v2-page .inspection-video-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    display: block;
}
.v2-page .inspection-video-play {
    background: none;
    cursor: pointer;
}
.v2-page .inspection-video-play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v2-page .inspection-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--red);
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(14,20,28,.7);
    transition: background .2s ease;
}
.v2-page .inspection-video-play:hover .inspection-video-icon,
.v2-page .inspection-video-play:focus-visible .inspection-video-icon {
    background: var(--red-hi);
}
@media (max-width: 767.98px) {
    .v2-page .inspection-video { flex-direction: column; align-items: stretch; }
    .v2-page .inspection-video-icon { width: 54px; height: 54px; }
}

/* two-column blocks: centre the pairing and frame the image */
.v2-page .inspection-deliverables .inspection-content {
    align-items: center;
    gap: clamp(26px, 4vw, 54px);
}
/* Portrait images (the sample report especially) run much taller than the text
   beside them. Centring a short paragraph against a tall image is what leaves a
   void above and below it, so cap the height and let the column shrink to fit. */
.v2-page .inspection-image img {
    width: auto;
    max-width: 100%;
    max-height: 420px;
    margin-left: auto;
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 26px 60px -40px rgba(14,20,28,.45);
}
@media (max-width: 767.98px) {
    .v2-page .inspection-image img { width: 100%; max-height: 320px; object-fit: cover; }
}

/* bullet lists become checked feature lists */
/* the page's own stylesheet sets `list-style: disc` on both ul and li and a
   50px indent, so both have to be reset explicitly or the disc sits next to
   the check mark */
.v2-page .inspection-text ul,
.v2-page .inspection-text ul li {
    list-style: none !important;
}
.v2-page .inspection-text ul {
    margin: 16px 0 0;
    padding-left: 0 !important;
    display: grid;
    gap: 13px;
}
.v2-page .inspection-text ul li {
    position: relative;
    padding-left: 32px;
    font-size: .97rem;
    line-height: 1.62;
    color: var(--body);
}
.v2-page .inspection-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .18em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(192,0,0,.09)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c00000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
}
.v2-page .inspection-text ul li strong { color: var(--ink); font-weight: 600; }

/* "Who benefits most" - real cards with a consistent crop */
.v2-page .card.h-100.border-0 {
    background: #fff;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    overflow: hidden;
    text-align: left;
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.v2-page .card.h-100.border-0:hover {
    border-color: #d3dae1 !important;
    transform: translateY(-4px);
    box-shadow: 0 26px 54px -34px rgba(14,20,28,.42);
}
.v2-page .equal-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.v2-page .card.h-100.border-0 p {
    margin: 0;
    padding: 18px 20px 22px;
    font-size: .95rem;
    line-height: 1.6;
}

/* closing note sits in a panel so the page ends deliberately */
.v2-page .inspection-container-last .sec-title {
    background: var(--soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: var(--radius);
    padding: clamp(24px, 3vw, 34px);
}
.v2-page .inspection-container-last p { margin: 0; max-width: 74ch; }

/* checklist breakdown shared by the homepage and the inspection page */
.v2-breakdown-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.v2-breakdown-grid > div:first-child p { margin-top: 12px; max-width: 46ch; }
.v2-breakdown .v2-cat-list { margin-top: 0; }
.v2-breakdown .v2-extras { margin-top: 22px; }
@media (max-width: 991.98px) {
    .v2-breakdown-grid { grid-template-columns: 1fr; }
    .v2-breakdown-grid > div:first-child p { max-width: 60ch; }
}

/* ==========================================================================
   Vehicle detail - Bootstrap .btn variants
   The markup uses .btn-outline-primary (Bootstrap blue) and .btn-outline-danger,
   neither of which belongs on this site. Mapped to the brand instead: the
   inspection report is the primary action, contact is secondary.
   ========================================================================== */
.v2-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* these sit in a narrow sidebar column, so the label has to stay on one
       line - a wrapped pill reads as a lozenge */
    padding: 13px 18px;
    border-radius: 100px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.v2-page .btn i { font-size: 14px; line-height: 1; }
.v2-page .btn span { line-height: 1.2; }
.v2-page .btn:focus,
.v2-page .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(192,0,0,.16);
}

.v2-page .btn-outline-primary,
.v2-page .btn-outline-primary:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    border: 0;
    color: #fff;
    box-shadow: 0 10px 26px -8px rgba(224,6,0,.5);
}
.v2-page .btn-outline-primary:hover,
.v2-page .btn-outline-primary:active {
    background: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -10px rgba(224,6,0,.68);
}

.v2-page .btn-outline-danger,
.v2-page .btn-outline-danger:not(:disabled):not(.disabled) {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}
.v2-page .btn-outline-danger:hover,
.v2-page .btn-outline-danger:active {
    background: #fff;
    color: var(--ink);
    border-color: #c3cad3;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(14,20,28,.45);
}

.v2-page .card.bg-light { background: #fff !important; }
.v2-page .card-header {
    font-family: 'Rubik', sans-serif;
    font-size: 13.5px;
    color: var(--body);
    border-radius: var(--radius) var(--radius) 0 0;
}

/* ==========================================================================
   TECHNICIAN PROFILE  (/tech/{slug})
   --------------------------------------------------------------------------
   Reached by scanning the QR code on a technician's name tag, so it is read
   standing on a forecourt with a car and a seller waiting: one screen, one
   dark panel, no scrolling required to answer "who is this and are they
   qualified". Everything lives in the panel - portrait, name, accreditation
   and certifications - and the page hands straight over to the footer.

   Narrower than the 1240px .v2-container the rest of the site uses: this is
   a credential, not a landing page.
   ========================================================================== */

.v2-tech-shell {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 22px;
}

.v2-tech-panel {
    position: relative;
    isolation: isolate;
    padding: calc(var(--nav-h) + clamp(26px, 4.5vw, 48px)) 0 clamp(48px, 7vw, 76px);
    color: #fff;
    background:
        radial-gradient(64% 44% at 76% 8%, rgba(192,0,0,.30) 0%, transparent 64%),
        radial-gradient(54% 44% at 2% 92%, rgba(192,0,0,.13) 0%, transparent 62%),
        linear-gradient(180deg, #0a0b0d 0%, #08090a 58%, #0c0d0f 100%);
}
.v2-tech-panel::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(78% 62% at 50% 30%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(78% 62% at 50% 30%, #000 0%, transparent 100%);
}
.v2-tech-panel h1, .v2-tech-panel h2 { color: #fff; }

.v2-tech-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: clamp(20px, 3.5vw, 28px);
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.v2-tech-eyebrow::before {
    content: '';
    width: 26px; height: 2px; flex: none;
    background: var(--red);
}

.v2-tech-card { display: grid; gap: clamp(22px, 3.5vw, 30px); }
.v2-tech-main { min-width: 0; }

/* On a phone the portrait runs to both screen edges with no frame and is
   masked away at the bottom, so it dissolves into the panel instead of
   sitting in a box. Masking to transparency rather than fading to a colour
   means it works over the panel's red glow without banding. The framed,
   mounted-photograph treatment comes back on desktop further down. */
.v2-tech-portrait {
    position: relative;
    margin: 0 -22px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #0b0c0e;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}
.v2-tech-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- identity ---------- */

/* Verified seal. Sized in em so it tracks the name rather than needing a value
   per breakpoint. The blue is set on the SVG itself, not via currentColor -
   the theme's cascade reaches the path and turns an inherited colour black. */
.v2-tech-tick {
    display: inline-block;
    width: .66em; height: .66em;
    margin-left: .16em;
    vertical-align: .01em;
}
.v2-tech-tick svg { display: block; width: 100%; height: 100%; overflow: visible; }

.v2-tech-identity h1 {
    font-size: clamp(2.05rem, 5.8vw, 2.85rem);
    letter-spacing: -.035em;
    line-height: 1.06;
}
.v2-tech-role {
    margin-top: 8px;
    font-size: clamp(1.1rem, 2.4vw, 1.2rem);
    color: rgba(255,255,255,.8);
}
/* the badge number, sized to be checkable against the tag without competing
   with the name */
.v2-tech-ref {
    margin-top: 8px;
    font-family: 'Rubik', sans-serif;
    font-size: 13.5px;
    letter-spacing: .01em;
    color: rgba(255,255,255,.52);
}

/* ---------- sections inside the panel ---------- */

.v2-tech-block { margin-top: clamp(28px, 4vw, 36px); }
.v2-tech-main > .v2-tech-block:first-child { margin-top: 0; }

.v2-tech-block > h2 {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
    margin-bottom: 15px;
}
.v2-tech-block > h2::before {
    content: '';
    width: 22px; height: 2px; flex: none;
    background: var(--red);
}

/* ---------- badges ---------- */

/* Flex rather than grid so the last row's cards grow to fill it. A grid leaves
   an orphan sitting half-width with a hole beside it at any width where the
   badge count and the column count disagree. */
.v2-tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.v2-tech-badge {
    flex: 1 1 calc(50% - 5px);      /* exactly two per row on a phone */
    padding: 16px 15px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.022) 100%);
    transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s;
}
.v2-tech-badge:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 100%);
}
.v2-tech-badge-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e10600 0%, var(--red) 100%);
    color: #fff;
    font-size: 17px;
    margin-bottom: 11px;
    box-shadow: 0 8px 20px -10px rgba(224,6,0,.75);
}
.v2-tech-badge-t {
    display: block;
    font-family: 'Rubik', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    color: #fff;
}
.v2-tech-badge-s {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,.66);
}

/* ---------- certifications ---------- */

.v2-tech-certs {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.028);
}
.v2-tech-cert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}
.v2-tech-cert + .v2-tech-cert { border-top: 1px solid rgba(255,255,255,.08); }
.v2-tech-cert > div { flex: 1 1 auto; min-width: 0; }
.v2-tech-cert-t {
    font-family: 'Rubik', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    color: #fff;
    line-height: 1.35;
}
.v2-tech-cert-s { margin-top: 4px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.66); }
.v2-tech-cert-y {
    flex: none;
    font-size: 13px;
    color: rgba(255,255,255,.58);
    padding-top: 2px;
}

/* ---------- two columns once there is room ---------- */

@media (min-width: 760px) {
    /* Two columns: photograph left across both rows, name above the record on
       the right. The portrait stretches to whatever height the record needs,
       which is what keeps the panel from running long. */
    .v2-tech-card {
        grid-template-columns: minmax(230px, 290px) 1fr;
        grid-template-rows: auto 1fr;
        column-gap: clamp(26px, 3.5vw, 38px);
        row-gap: clamp(24px, 3vw, 30px);
        align-items: stretch;
    }
    /* cards size to their content and fill the row, so none is the odd one out */
    .v2-tech-badge { flex: 1 1 152px; }

    /* framed and mounted once it is beside the record rather than under it */
    .v2-tech-portrait {
        grid-column: 1; grid-row: 1 / span 2;
        margin: 0;
        aspect-ratio: auto;
        height: 100%;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.13);
        box-shadow:
            0 30px 70px -34px rgba(0,0,0,.9),
            inset 0 1px 0 rgba(255,255,255,.09);
        -webkit-mask-image: none;
                mask-image: none;
    }
    .v2-tech-portrait::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 26%, transparent 64%, rgba(0,0,0,.40) 100%);
        pointer-events: none;
    }
    .v2-tech-identity { grid-column: 2; grid-row: 1; }
    .v2-tech-main     { grid-column: 2; grid-row: 2; }
}

/* Between a phone and the two-column layout the 4:5 portrait gets tall enough
   to push everything else off the screen, so it crops square instead. */
@media (min-width: 560px) and (max-width: 759.98px) {
    .v2-tech-portrait { aspect-ratio: 1 / 1; }
}

/* Centred on a phone, where the identity block sits alone above a full-bleed
   photograph and reads as a profile. Left-aligned from 760px up, where it
   shares a row with the picture and centring would float it in the column. */
@media (max-width: 759.98px) {
    .v2-tech-eyebrow  { justify-content: center; }
    .v2-tech-identity { text-align: center; }
}

/* Two per row below 760px means an odd count always leaves one alone on the
   last row. It grows to fill the width by itself, and turns on its side so the
   space it gained carries the text rather than sitting empty. Scoped to the
   one-column layout: above it the cards share a row and none is the odd one. */
@media (max-width: 759.98px) {
    .v2-tech-badges > :last-child:nth-child(odd) {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 13px;
    }
    .v2-tech-badges > :last-child:nth-child(odd) .v2-tech-badge-ico {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
}

/* Damped, not removed: the hover lift is how a card confirms it is tappable,
   so it stays - it just travels less and settles faster. */
@media (prefers-reduced-motion: reduce) {
    .v2-tech-badge { transition-duration: .12s; }
    .v2-tech-badge:hover { transform: translateY(-1px) !important; }
}

/* --------------------------------------------------------------------------
   FOOTER LINKS

   The Canvas footer paints every anchor plain black with no underline, so the
   terms link read as body copy rather than as something clickable.

   The terms link carries the brand red at rest, which is what marks it out as
   clickable in a paragraph of prose; the underline is held back for hover and
   keyboard focus. The Explore list behaves the same way, so both halves of the
   footer respond identically.

   The !important is unavoidable rather than careless: style.css sets
   `a:not(.btn-link):not(.text-decoration-underline):not(.more-link) {
   text-decoration: none !important }`, and because that is the shorthand it
   makes every text-decoration longhand important too. Scoping ours to #footer
   and to :hover / :focus-visible keeps it from leaking anywhere else.
   -------------------------------------------------------------------------- */
#footer .v2-footer-link {
    color: var(--red);
    text-underline-offset: 3px;
    transition: color .18s ease;
}
#footer .v2-footer-link:hover,
#footer .v2-footer-link:focus-visible {
    color: var(--red-hi);
    text-decoration: underline !important;
}

#footer .v2-footer-nav a {
    text-underline-offset: 3px;
    transition: color .18s ease;
}
#footer .v2-footer-nav a:hover,
#footer .v2-footer-nav a:focus-visible {
    color: var(--red);
    text-decoration: underline !important;
}