/* =========================================================
   SMITH TRUCK & TRAILER REPAIR
   PRODUCTION STYLESHEET
   Homepage + Service Pages + Location Pages
   Consolidated October 2026
========================================================= */


/* =========================================================
   1. VARIABLES
========================================================= */

:root {

    --bg: #061118;
    --bg-deep: #030b10;
    --bg-soft: #0a1820;
    --panel: #0d1d25;
    --panel-light: #122630;

    --green: #a8e600;
    --green-bright: #baff00;
    --green-dark: #78a900;

    --blue: #0874b9;
    --blue-bright: #159ee8;

    --white: #f5f8f9;
    --text: #edf2f4;

    --muted: #899aa3;
    --muted-light: #bdc9ce;

    --line: rgba(255,255,255,.10);
    --line-bright: rgba(255,255,255,.18);

    --shadow:
        0 25px 70px rgba(0,0,0,.35);

    --container: 1200px;

    --header-height: 82px;

}


/* =========================================================
   2. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


body.menu-open {
    overflow: hidden;
}


img {

    display: block;

    max-width: 100%;

    height: auto;
}


a {

    color: inherit;

    text-decoration: none;
}


button,
input,
textarea,
select {

    font: inherit;
}


button {
    cursor: pointer;
}


h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}


h1,
h2,
h3,
h4 {

    line-height: .98;

    letter-spacing: -.035em;
}


h2 {

    margin-bottom: 25px;

    color: var(--white);

    font-size:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    font-weight: 950;

    text-transform: uppercase;
}


h2 span {
    color: var(--green);
}


::selection {

    background: var(--green);

    color: #071015;
}


/* =========================================================
   3. ACCESSIBILITY
========================================================= */

.skip-link {

    position: fixed;

    top: -100px;
    left: 20px;

    z-index: 99999;

    padding: 12px 18px;

    background: var(--green);

    color: #071015;

    font-weight: 900;
}


.skip-link:focus {
    top: 20px;
}


a:focus-visible,
button:focus-visible {

    outline:
        3px solid var(--green);

    outline-offset: 4px;
}


/* =========================================================
   4. GLOBAL LAYOUT
========================================================= */

.container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;
}


.inner {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;
}


.section {

    position: relative;

    padding:
        105px 0;
}


.eyebrow {

    margin-bottom: 16px;

    color: var(--green);

    font-size: .74rem;

    font-weight: 950;

    letter-spacing: .19em;

    line-height: 1.4;

    text-transform: uppercase;
}


.section-head {

    max-width: 780px;

    margin-bottom: 50px;
}


.section-head p {

    color: var(--muted-light);

    line-height: 1.75;
}


/* =========================================================
   5. BUTTONS
========================================================= */

.btn {

    display: inline-flex;

    min-height: 52px;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 25px;

    border:
        2px solid transparent;

    font-size: .78rem;

    font-weight: 950;

    letter-spacing: .08em;

    line-height: 1;

    text-align: center;

    text-transform: uppercase;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.btn:hover {

    transform:
        translateY(-2px);
}


.btn-primary {

    background: var(--green);

    color: #071015;

    box-shadow:
        0 12px 30px
        rgba(168,230,0,.16);
}


.btn-primary:hover {

    background: var(--green-bright);

    box-shadow:
        0 15px 35px
        rgba(168,230,0,.23);
}


.btn-outline {

    border-color:
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.025);

    color: white;
}


.btn-outline:hover {

    border-color: var(--green);

    color: var(--green);
}


/* =========================================================
   6. TOP STATUS BAR
========================================================= */

.topbar {

    position: relative;

    z-index: 1002;

    background: #02080c;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.topbar-inner {

    min-height: 36px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: .66rem;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.availability {

    display: flex;

    align-items: center;

    gap: 8px;

    color: white;
}


.status-dot {

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 0
        rgba(168,230,0,.5);

    animation:
        statusPulse
        2s infinite;
}


@keyframes statusPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(168,230,0,.45);
    }

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

    100% {
        box-shadow:
            0 0 0 0
            rgba(168,230,0,0);
    }

}


.topbar-detail {
    color: var(--muted);
}


.topbar-location {
    color: var(--muted);
}


.topbar-location span {

    margin:
        0 6px;

    color: var(--green);
}


/* =========================================================
   7. HEADER
========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(5,15,21,.94);

    border-bottom:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


.site-header.scrolled {

    background:
        rgba(3,10,14,.98);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.28);
}


.nav {

    min-height: var(--header-height);

    display: flex;

    align-items: center;

    gap: 28px;
}


.nav-brand {

    min-width: 235px;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-right: auto;
}


.nav-logo {

    width: 57px;

    max-height: 57px;

    object-fit: contain;
}


.nav-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.nav-brand-text strong {

    color: white;

    font-size: 1.25rem;

    font-weight: 950;

    letter-spacing: .04em;
}


.nav-brand-text span {

    margin-top: 4px;

    color: var(--green);

    font-size: .54rem;

    font-weight: 900;

    letter-spacing: .09em;
}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 23px;
}


.desktop-nav a {

    position: relative;

    padding:
        31px 0;

    color: #cbd5d9;

    font-size: .71rem;

    font-weight: 850;

    letter-spacing: .07em;

    text-transform: uppercase;

    transition:
        color .2s ease;
}


.desktop-nav a::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 20px;
    left: 0;

    height: 2px;

    background: var(--green);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .2s ease;
}


.desktop-nav a:hover {

    color: white;
}


.desktop-nav a:hover::after {

    transform:
        scaleX(1);
}


.header-phone {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 14px;

    border:
        1px solid rgba(168,230,0,.35);

    background:
        rgba(168,230,0,.05);
}


.header-phone-icon {

    color: var(--green);

    font-size: 1.2rem;
}


.header-phone span:last-child {

    display: flex;

    flex-direction: column;

    line-height: 1.05;
}


.header-phone small {

    margin-bottom: 4px;

    color: var(--muted);

    font-size: .48rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.header-phone strong {

    color: white;

    font-size: .88rem;

    letter-spacing: .02em;
}


.menu-toggle {

    width: 46px;
    height: 44px;

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    padding: 0;

    border:
        1px solid var(--line);

    background:
        rgba(255,255,255,.025);
}


.menu-toggle span {

    width: 20px;
    height: 2px;

    display: block;

    background: white;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.menu-toggle[aria-expanded="true"]
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-toggle[aria-expanded="true"]
span:nth-child(2) {

    opacity: 0;
}


.menu-toggle[aria-expanded="true"]
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


.mobile-menu {

    display: none;

    padding:
        12px 24px 22px;

    border-top:
        1px solid var(--line);

    background: #07141a;
}


.mobile-menu.open {

    display: block;
}


.mobile-menu a {

    display: block;

    padding:
        15px 5px;

    border-bottom:
        1px solid var(--line);

    color: white;

    font-size: .78rem;

    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================================
   14. FINAL CTA
========================================================= */

.final-cta {

    position: relative;

    overflow: hidden;

    padding:
        120px 0;

    background:
        #030b10;

    text-align: center;
}


.final-cta-glow {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 800px;
    height: 500px;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(8,116,185,.16),
            transparent 65%
        );

    pointer-events: none;
}


.final-content {

    position: relative;

    z-index: 2;

    max-width: 900px;
}


.final-content h2 {

    font-size:
        clamp(
            3.2rem,
            7vw,
            6.5rem
        );
}


.final-content > p:not(.eyebrow) {

    max-width: 620px;

    margin:
        0 auto
        25px;

    color: var(--muted-light);

    line-height: 1.7;
}


.giant-phone {

    display: block;

    margin:
        25px 0;

    color: var(--green);

    font-size:
        clamp(
            2.1rem,
            6vw,
            5rem
        );

    font-weight: 950;

    letter-spacing: -.04em;

    line-height: 1;
}


.final-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


/* =========================================================
   15. FOOTER
========================================================= */

.site-footer {

    padding:
        70px 0
        100px;

    border-top:
        1px solid var(--line);

    background: #02080c;
}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1fr;

    gap: 45px;
}


.footer-brand img {

    width: 235px;

    margin-bottom: 20px;
}


.footer-brand p {

    max-width: 330px;

    color: var(--muted);

    font-size: .82rem;

    line-height: 1.7;
}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}


.footer-column h3 {

    margin-bottom: 8px;

    color: white;

    font-size: .72rem;

    font-weight: 950;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.footer-column a,
.footer-column span {

    color: var(--muted);

    font-size: .79rem;
}


.footer-column a:hover {

    color: var(--green);
}


.footer-open {

    margin-top: 5px;

    color: var(--green) !important;

    font-weight: 900;
}


.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 50px;

    padding-top: 22px;

    border-top:
        1px solid var(--line);

    color: #65757d;

    font-size: .68rem;

    letter-spacing: .04em;

    text-transform: uppercase;
}


/* =========================================================
   17. INTERIOR PAGE HERO
========================================================= */

.page-hero {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(8,116,185,.20),
            transparent 32%
        ),

        linear-gradient(
            90deg,
            rgba(3,10,14,.99) 0%,
            rgba(3,10,14,.92) 45%,
            rgba(3,10,14,.55) 100%
        ),

        url("/assets/images/services/repair-bg.jpg")
        center center / cover
        no-repeat;
}


.page-hero::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 5px;

    background: var(--green);
}


.page-hero::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 130px;

    background:
        linear-gradient(
            transparent,
            var(--bg)
        );

    pointer-events: none;
}


.page-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 920px;

    padding:
        90px 0
        130px;
}


.breadcrumbs {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-bottom: 34px;

    color: #8fa0a8;

    font-size: .67rem;

    font-weight: 850;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.breadcrumbs a {

    color: #bac5ca;
}


.breadcrumbs a:hover {

    color: var(--green);
}


.breadcrumbs span {

    color: #77878f;
}


.page-hero h1 {

    max-width: 900px;

    margin:
        0 0
        25px;

    color: white;

    font-size:
        clamp(
            4rem,
            8vw,
            7.5rem
        );

    font-weight: 950;

    letter-spacing: -.065em;

    line-height: .84;

    text-transform: uppercase;
}


.page-hero h1 span {

    display: block;

    color: var(--green);
}


.page-hero-description {

    max-width: 720px;

    margin-bottom: 0;

    color: #c9d3d7;

    font-size:
        clamp(
            .98rem,
            1.6vw,
            1.12rem
        );

    line-height: 1.75;
}


.page-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


/* =========================================================
   18. INTERIOR CONTENT
========================================================= */

.content-section {

    position: relative;

    padding:
        105px 0;

    background: var(--bg);
}


.content-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap:
        clamp(
            50px,
            7vw,
            95px
        );

    align-items: start;
}


.content-main {

    min-width: 0;
}


.content-main > .eyebrow {

    margin-bottom: 14px;
}


.content-main h2 {

    max-width: 760px;

    margin-bottom: 30px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );
}


.content-main h3 {

    margin:
        48px 0
        16px;

    color: var(--green);

    font-size:
        clamp(
            1.1rem,
            2vw,
            1.4rem
        );

    font-weight: 950;

    letter-spacing: -.015em;

    line-height: 1.15;

    text-transform: uppercase;
}


.content-main p {

    max-width: 780px;

    margin-bottom: 20px;

    color: #b7c4ca;

    font-size: 1rem;

    line-height: 1.82;
}


/* =========================================================
   19. SERVICE DETAIL CHECKLIST
========================================================= */

.service-detail-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin:
        28px 0
        48px;
}


.service-detail-item {

    position: relative;

    min-height: 58px;

    display: flex;

    align-items: center;

    padding:
        14px
        16px
        14px
        47px;

    overflow: hidden;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

    color: #e2e8ea;

    font-size: .85rem;

    font-weight: 800;

    line-height: 1.35;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.service-detail-item::before {

    content: "✓";

    position: absolute;

    left: 18px;

    color: var(--green);

    font-size: 1rem;

    font-weight: 950;
}


.service-detail-item:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(168,230,0,.28);

    background:
        rgba(168,230,0,.04);
}


/* =========================================================
   20. SERVICE SIDEBAR
========================================================= */

.service-sidebar {

    position: sticky;

    top: 110px;

    min-width: 0;
}


.sidebar-call {

    position: relative;

    overflow: hidden;

    padding:
        34px;

    border:
        1px solid rgba(168,230,0,.18);

    border-top:
        5px solid var(--green);

    background:
        linear-gradient(
            145deg,
            #10252f,
            #07151c
        );

    box-shadow: var(--shadow);
}


.sidebar-call::after {

    content: "";

    position: absolute;

    right: -100px;
    bottom: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,116,185,.17),
            transparent 65%
        );

    pointer-events: none;
}


.sidebar-call > * {

    position: relative;

    z-index: 2;
}


.sidebar-call h2 {

    margin-bottom: 15px;

    font-size:
        clamp(
            2rem,
            3vw,
            2.8rem
        );

    line-height: .9;
}


.sidebar-call p:not(.eyebrow) {

    margin-bottom: 23px;

    color: #adbbc1;

    font-size: .88rem;

    line-height: 1.65;
}


.sidebar-phone {

    display: block;

    margin:
        0 0
        22px;

    color: var(--green);

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.1rem
        );

    font-weight: 950;

    letter-spacing: -.04em;

    line-height: 1;
}


.sidebar-call .btn {

    width: 100%;

    margin-top: 9px;
}


.sidebar-service-list {

    margin-top: 18px;

    padding: 25px;

    border:
        1px solid var(--line);

    background:
        rgba(255,255,255,.02);
}


.sidebar-service-list strong {

    display: block;

    margin-bottom: 13px;

    color: white;

    font-size: .68rem;

    font-weight: 950;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.sidebar-service-list a {

    position: relative;

    display: block;

    padding:
        12px 20px
        12px 0;

    border-bottom:
        1px solid var(--line);

    color: #aebcc2;

    font-size: .8rem;

    font-weight: 750;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.sidebar-service-list a::after {

    content: "›";

    position: absolute;

    top: 10px;
    right: 2px;

    color: var(--green);

    font-size: 1.2rem;
}


.sidebar-service-list a:last-child {

    border-bottom: 0;
}


.sidebar-service-list a:hover {

    padding-left: 5px;

    color: var(--green);
}


/* =========================================================
   21. LIGHT "WHY SMITH" SECTION
========================================================= */

.content-section-light {

    background:
        linear-gradient(
            180deg,
            #f3f5f5,
            #e8ecee
        );

    color: #172127;
}


.content-section-light .eyebrow {

    color: #6e9b00;
}


.content-section-light h2 {

    color: #132027;
}


.content-section-light h2 span {

    color: #78a900;
}


.content-section-light
.content-main p {

    color: #526168;
}


.content-section-light
.content-main h3 {

    color: #658f00;
}


.content-section-light
.service-detail-item {

    border-color: #d4dade;

    background: white;

    color: #26343a;
}


.why-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 48px;
}


.why-card {

    position: relative;

    min-height: 190px;

    padding:
        30px 27px;

    overflow: hidden;

    border:
        1px solid #d2d9dc;

    background: white;

    box-shadow:
        0 10px 35px
        rgba(17,31,38,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.why-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: var(--green);
}


.why-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 40px
        rgba(17,31,38,.09);
}


.why-card strong {

    display: block;

    margin-bottom: 13px;

    color: #142129;

    font-size: 1rem;

    font-weight: 950;

    line-height: 1.15;

    text-transform: uppercase;
}


.why-card p {

    margin: 0;

    color: #647278;

    font-size: .84rem;

    line-height: 1.65;
}


/* =========================================================
   22. FAQ SECTION
========================================================= */

.faq-section {

    position: relative;

    padding:
        110px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #07151c,
            #040d12
        );
}


.faq-section::before {

    content: "?";

    position: absolute;

    top: -90px;
    right: -10px;

    color:
        rgba(255,255,255,.018);

    font-size: 35rem;

    font-weight: 950;

    line-height: 1;

    pointer-events: none;
}


.faq-heading {

    position: relative;

    z-index: 2;

    max-width: 820px;

    margin-bottom: 50px;
}


.faq-heading h2 {

    margin-bottom: 0;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );
}


.faq-list {

    position: relative;

    z-index: 2;

    max-width: 950px;

    border-top:
        1px solid var(--line);
}


.faq-item {

    padding:
        27px 0;

    border-bottom:
        1px solid var(--line);
}


.faq-item h3 {

    margin:
        0 0
        9px;

    color: white;

    font-size:
        clamp(
            1rem,
            2vw,
            1.2rem
        );

    font-weight: 900;

    letter-spacing: -.015em;

    line-height: 1.3;
}


.faq-item p {

    max-width: 800px;

    margin: 0;

    color: #a9b8be;

    font-size: .92rem;

    line-height: 1.7;
}


/* =========================================================
   23. REVEAL ANIMATIONS
========================================================= */

.reveal {

    opacity: 1;

    transform: none;
}


/*
   main.js can add .reveal-ready to BODY.
   This prevents content disappearing if JS fails.
*/

body.reveal-ready .reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}


body.reveal-ready
.reveal.visible {

    opacity: 1;

    transform: none;
}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 1050px) {

    .desktop-nav {

        gap: 15px;
    }


    .desktop-nav a {

        font-size: .65rem;
    }


    .header-phone {

        display: none;
    }


    .service-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .content-grid {

        grid-template-columns:
            minmax(0, 1fr)
            310px;

        gap: 45px;
    }


    .why-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .footer-grid {

        grid-template-columns:
            1.4fr 1fr 1fr;
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }

}


/* =========================================================
   25. MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 820px) {

    :root {

        --header-height: 70px;
    }


    .container,
    .inner {

        width:
            min(
                calc(100% - 34px),
                var(--container)
            );
    }


    .topbar-detail,
    .topbar-location {

        display: none;
    }


    .topbar-inner {

        justify-content: center;
    }


    .desktop-nav {

        display: none;
    }


    .menu-toggle {

        display: flex;
    }


    .nav {

        gap: 15px;
    }


    .nav-brand {

        min-width: 0;
    }


    .nav-logo {

        width: 48px;

        max-height: 48px;
    }


    .nav-brand-text strong {

        font-size: 1rem;
    }


    .nav-brand-text span {

        font-size: .44rem;
    }


    .hero {

        min-height: 700px;

        align-items: flex-end;

        background:

            linear-gradient(
                180deg,
                rgba(3,10,14,.18),
                rgba(3,10,14,.96) 72%
            ),

            url("/assets/images/hero/hero-truck.jpg")
            62% center / cover
            no-repeat;
    }


    .hero-content {

        padding:
            100px 0
            100px;
    }


    .service-grid {

        grid-template-columns: 1fr;
    }


    .about-grid,
    .area-grid {

        grid-template-columns: 1fr;
    }


    .content-grid {

        grid-template-columns: 1fr;
    }


    .service-sidebar {

        position: static;

        margin-top: 15px;
    }


    .why-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .footer-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }


    /* mobile action bar is defined once in the final shared layout contract */


    .site-footer {

        padding-bottom: 105px;
    }

}


/* =========================================================
   26. PHONE
========================================================= */

@media (max-width: 600px) {

    body {

        font-size: 15px;
    }


    .container,
    .inner {

        width:
            calc(100% - 30px);
    }


    h2 {

        font-size:
            clamp(
                2.5rem,
                13vw,
                4.2rem
            );
    }


    .section,
    .services,
    .about,
    .service-area,
    .content-section,
    .faq-section {

        padding:
            78px 0;
    }


    .nav-brand-text {

        display: none;
    }


    .hero {

        min-height: 650px;
    }


    .hero-logo {

        width: 280px;
    }


    .hero h1 {

        font-size:
            clamp(
                3.6rem,
                18vw,
                5.5rem
            );
    }


    .hero-actions {

        flex-direction: column;
    }


    .hero-actions .btn {

        width: 100%;
    }


    .hero-trust {

        gap:
            12px 20px;
    }


    .emergency-inner {

        min-height: 105px;

        align-items: flex-start;

        justify-content: center;

        flex-direction: column;

        gap: 5px;

        padding:
            18px 0;
    }


    .emergency-phone {

        font-size: 1.65rem;
    }


    .service-card {

        min-height: 0;
    }


    .about-points {

        grid-template-columns: 1fr;
    }


    .about-quote {

        padding:
            45px 30px;
    }


    .area-visual {

        min-height: 340px;
    }


    .area-ring:nth-child(3) {

        width: 310px;
        height: 310px;
    }


    /* INTERIOR HERO */

    .page-hero {

        min-height: 620px;

        align-items: flex-end;

        background:

            linear-gradient(
                180deg,
                rgba(3,10,14,.20),
                rgba(3,10,14,.96) 68%
            ),

            url("/assets/images/services/repair-bg.jpg")
            58% center / cover
            no-repeat;
    }


    .page-hero-content {

        padding:
            80px 0
            95px;
    }


    .breadcrumbs {

        margin-bottom: 25px;

        font-size: .6rem;
    }


    .page-hero h1 {

        font-size:
            clamp(
                3.4rem,
                17vw,
                5rem
            );
    }


    .page-hero-description {

        font-size: .95rem;

        line-height: 1.65;
    }


    .page-hero-actions {

        flex-direction: column;
    }


    .page-hero-actions .btn {

        width: 100%;
    }


    /* INTERIOR CONTENT */

    .content-main h2 {

        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }


    .content-main h3 {

        margin-top: 38px;
    }


    .service-detail-list {

        grid-template-columns: 1fr;

        margin-bottom: 40px;
    }


    .service-detail-item {

        min-height: 54px;
    }


    .sidebar-call {

        padding: 28px 24px;
    }


    .sidebar-phone {

        font-size: 1.75rem;
    }


    .why-grid {

        grid-template-columns: 1fr;
    }


    .why-card {

        min-height: 0;
    }


    .faq-heading h2 {

        font-size:
            clamp(
                2.9rem,
                14vw,
                4.4rem
            );
    }


    .faq-section::before {

        font-size: 22rem;
    }


    .final-cta {

        padding:
            85px 0;
    }


    .final-content h2 {

        font-size:
            clamp(
                2.8rem,
                14vw,
                4.6rem
            );
    }


    .giant-phone {

        font-size:
            clamp(
                2rem,
                11vw,
                3rem
            );
    }


    .final-buttons {

        flex-direction: column;
    }


    .final-buttons .btn {

        width: 100%;
    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .footer-brand {

        grid-column: auto;
    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   27. VERY SMALL PHONES
========================================================= */

@media (max-width: 370px) {

    .page-hero h1,
    .hero h1 {

        font-size: 3.2rem;
    }


    .mobile-actions a {

        font-size: .7rem;
    }


    .giant-phone {

        font-size: 1.9rem;
    }

}


/* =========================================================
   28. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }


    body.reveal-ready .reveal {

        opacity: 1;

        transform: none;
    }

}



/* =========================================================
   29. HOMEPAGE CORE COMPONENTS
   Restored base rules used by the current homepage.
========================================================= */

/* --- Homepage hero shell --- */
.hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(3,10,14,.96), rgba(3,10,14,.48)),
        url("/assets/images/hero/hero-truck.jpg") center center / cover no-repeat;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

.hero-logo {
    width: min(390px, 100%);
    margin-bottom: 28px;
}

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

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

/* --- Emergency strip --- */
.emergency-inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* --- Homepage service cards --- */
.service-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    box-shadow: 0 14px 38px rgba(0,0,0,.12);
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--green);
    transition: width .22s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(168,230,0,.30);
    background:
        linear-gradient(145deg, rgba(168,230,0,.055), rgba(255,255,255,.018));
    box-shadow: 0 20px 48px rgba(0,0,0,.22);
}

.service-card:hover::before {
    width: 100%;
}

.service-card h3 {
    margin: 0 0 13px;
    color: var(--white);
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.service-card p {
    margin: 0;
    color: var(--muted-light);
    font-size: .86rem;
    line-height: 1.7;
}

/* =========================================================
   30. CURRENT HOMEPAGE — CANONICAL COMPATIBILITY LAYER
   Matches the live index.html structure.
   Interior/service/location page rules above remain intact.
========================================================= */

/* --- Homepage hero --- */
.hero-overlay,
.hero-grid,
.hero-bottom-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-overlay {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(3,10,14,.97) 0%, rgba(3,10,14,.83) 48%, rgba(3,10,14,.28) 100%);
}

.hero-grid {
    z-index: 1;
    opacity: .16;
    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: 72px 72px;
    mask-image: linear-gradient(to right, black, transparent 82%);
}

.hero-bottom-fade {
    z-index: 1;
    top: auto;
    height: 170px;
    background: linear-gradient(transparent, var(--bg));
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-copy-block {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 760px;
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--green);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-kicker > span {
    width: 34px;
    height: 2px;
    background: var(--green);
}

.hero-description {
    max-width: 650px;
    margin-bottom: 30px;
    color: #c6d0d4;
    font-size: 1.05rem;
    line-height: 1.75;
}

.hero-trust > div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #dce3e6;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hero-trust .check {
    color: var(--green);
}

.hero-trust > div::before,
.hero-trust > span::before {
    content: none;
}

.hero-service-badge {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    width: 190px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(3deg);
    border: 2px solid rgba(168,230,0,.75);
    background: rgba(3,11,16,.78);
    box-shadow: 0 25px 70px rgba(0,0,0,.35), inset 0 0 35px rgba(168,230,0,.05);
    color: white;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .16em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.hero-service-badge::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255,255,255,.12);
}

.hero-service-badge .badge-24 {
    display: block;
    margin-bottom: 8px;
    color: var(--green);
    font-size: 3.25rem;
    letter-spacing: -.06em;
    line-height: .85;
}

/* --- Current emergency bar --- */
.emergency-bar {
    position: relative;
    z-index: 5;
    background: var(--green);
    color: #061016;
}

.emergency-message,
.emergency-actions {
    display: flex;
    align-items: center;
}

.emergency-message {
    gap: 14px;
}

.emergency-icon {
    font-size: 1.65rem;
}

.emergency-message strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.emergency-message span:not(.emergency-icon) {
    font-size: .78rem;
    font-weight: 750;
}

.emergency-actions {
    gap: 12px;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .07em;
}

.emergency-actions a {
    border-bottom: 2px solid rgba(6,16,22,.35);
}

.emergency-actions a:hover {
    border-color: #061016;
}

/* --- Current services section --- */
.services-section {
    padding: 110px 0;
    background: linear-gradient(180deg, var(--bg), #08161d);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 55px;
    align-items: end;
    margin-bottom: 50px;
}

.section-heading h2,
.reviews-heading h2 {
    margin-bottom: 0;
}

.section-intro {
    max-width: 560px;
    margin: 0;
    color: var(--muted-light);
    line-height: 1.75;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.services-grid .service-card {
    display: flex;
    min-width: 0;
    min-height: 255px;
    flex-direction: column;
    padding: 30px;
}

.service-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border: 1px solid rgba(168,230,0,.24);
    background: rgba(168,230,0,.045);
    color: var(--green);
    font-size: 1.2rem;
}

.service-number {
    position: absolute;
    top: 28px;
    right: 28px;
    color: rgba(255,255,255,.28);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.service-link {
    display: block;
    margin-top: auto;
    padding-top: 18px;
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.services-callout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    margin-top: 18px;
    padding: 22px 26px;
    border: 1px solid var(--line);
    background: #07151c;
}

.services-callout strong {
    color: white;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.services-callout span {
    color: var(--muted-light);
    font-size: .86rem;
}

.services-callout a {
    color: var(--green);
    font-size: .85rem;
    font-weight: 950;
    white-space: nowrap;
}

/* --- Repair feature --- */
.repair-feature {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(3,10,14,.98), rgba(3,10,14,.70)),
        url("/assets/images/services/repair-bg.jpg") center center / cover no-repeat;
}

.repair-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 45%, rgba(8,116,185,.13), transparent 34%);
    pointer-events: none;
}

.repair-content {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 48px), 1200px);
    margin-left: auto;
    margin-right: auto;

    padding-top: 110px;
    padding-bottom: 110px;
}

.repair-content h2 {
    max-width: 820px;
    font-size: clamp(3.3rem, 7vw, 7rem);
}

.repair-content > p:not(.eyebrow) {
    max-width: 610px;
    color: var(--muted-light);
    line-height: 1.8;
}

.repair-feature-points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    color: white;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.repair-feature-points i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

/* --- Owner section --- */
.owner-section {
    background: #f1f3f3;
    color: #162128;
}

.owner-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(50px, 8vw, 110px);
    align-items: center;
}

.owner-visual {
    position: relative;
}

.owner-photo {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.owner-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(3,10,14,.45));
    pointer-events: none;
}

.owner-photo img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: 62% center;
}

.owner-tag {
    position: absolute;
    right: -20px;
    bottom: 34px;
    z-index: 2;
    min-width: 145px;
    padding: 18px 22px;
    background: var(--green);
    color: #061016;
    box-shadow: 0 15px 40px rgba(0,0,0,.2);
}

.owner-tag strong,
.owner-tag span {
    display: block;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.owner-tag strong {
    font-size: 1.35rem;
}

.owner-tag span {
    margin-top: 4px;
    font-size: .65rem;
    letter-spacing: .12em;
}

.owner-content h2 {
    color: #132027;
}

.owner-content p {
    color: #58666d;
    line-height: 1.8;
}

.owner-lead {
    color: #26383f !important;
    font-size: 1.08rem;
    font-weight: 700;
}

.owner-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 30px 0;
}

.owner-values > div {
    padding: 18px 12px;
    border: 1px solid #d5dcde;
    background: white;
}

.owner-values strong,
.owner-values span {
    display: block;
}

.owner-values strong {
    color: #132027;
    font-size: .9rem;
    font-weight: 950;
}

.owner-values span {
    margin-top: 4px;
    color: #6b787e;
    font-size: .68rem;
    text-transform: uppercase;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #132027;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.text-link span {
    color: var(--green-dark);
    font-size: 1.1rem;
}

/* --- Current service area --- */
.service-area-section {
    position: relative;
    overflow: hidden;
    background: #07151c;
}

.service-area-lines {
    position: absolute;
    inset: 0;
    opacity: .12;
    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: 70px 70px;
    pointer-events: none;
}

.area-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    gap: clamp(50px, 8vw, 110px);
    align-items: center;
}

.area-content p:not(.eyebrow) {
    max-width: 650px;
    color: var(--muted-light);
    line-height: 1.8;
}

.location-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 28px 0 30px;
}

.location-pills a,
.location-pills span {
    padding: 9px 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.025);
    color: #cbd5d9;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.location-pills a {
    border-color: rgba(168,230,0,.35);
    color: var(--green);
}

.area-graphic {
    position: relative;
    min-height: 470px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle, rgba(8,116,185,.19), transparent 58%),
        #08171e;
}

.radar-circle {
    position: absolute;
    border: 1px solid rgba(168,230,0,.18);
    border-radius: 50%;
}

.radar-one { width: 165px; height: 165px; }
.radar-two { width: 285px; height: 285px; }
.radar-three { width: 410px; height: 410px; }

.map-center {
    position: relative;
    z-index: 4;
    width: 135px;
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background: var(--green);
    color: #071015;
    box-shadow: 0 0 55px rgba(168,230,0,.22);
    text-align: center;
}

.map-pin {
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.map-center strong {
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
}

.map-center span {
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.map-road {
    position: absolute;
    z-index: 2;
    width: 140%;
    height: 1px;
    background: rgba(255,255,255,.10);
}

.road-one { transform: rotate(18deg); }
.road-two { transform: rotate(-28deg); }
.road-three { transform: rotate(68deg); }

.map-label {
    position: absolute;
    z-index: 3;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(3,11,16,.8);
    color: var(--muted-light);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.label-one { top: 18%; left: 8%; }
.label-two { top: 13%; right: 11%; color: var(--green); }
.label-three { right: 7%; bottom: 16%; }

/* --- Reviews --- */
.reviews-section {
    background: #050f15;
}

.reviews-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 55px;
    align-items: end;
    margin-bottom: 48px;
}

.reviews-heading > p {
    max-width: 520px;
    margin: 0;
    color: var(--muted-light);
    line-height: 1.75;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.review-card {
    min-height: 270px;
    padding: 30px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}

.review-source {
    margin-bottom: 20px;
    color: var(--green);
    font-size: .65rem;
    font-weight: 950;
    letter-spacing: .15em;
}

.review-source.facebook {
    color: var(--blue-bright);
}

.review-stars {
    margin-bottom: 18px;
    color: var(--green);
    letter-spacing: .12em;
}

.review-card p {
    color: var(--muted-light);
    line-height: 1.7;
}

.review-placeholder {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.review-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(145deg, rgba(168,230,0,.08), rgba(8,116,185,.04));
}

.review-cta-card > span {
    color: var(--green);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .13em;
}

.review-cta-card h3 {
    margin: 12px 0 18px;
    color: white;
    font-size: 1.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

/* --- Footer/mobile action compatibility --- */
.footer-open {
    color: var(--green) !important;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.mobile-actions {
    display: none;
}

/* --- Reveal behavior: safe even if JS fails --- */
.reveal {
    opacity: 1;
    transform: none;
}

body.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

body.reveal-ready .reveal.visible {
    opacity: 1;
    transform: none;
}

/* --- Current homepage responsive --- */
@media (max-width: 1050px) {
    .desktop-nav {
        gap: 15px;
    }

    .desktop-nav a {
        font-size: .65rem;
    }

    .hero-service-badge {
        width: 160px;
        min-height: 160px;
    }

    .services-grid,
    .review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .desktop-nav,
    .header-phone {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-brand {
        min-width: 0;
    }

    .hero {
        min-height: auto;
    }

    .hero-content {
        display: block;
        padding-top: 80px;
        padding-bottom: 110px;
    }

    .hero-service-badge {
        display: none;
    }

    .section-heading,
    .reviews-heading,
    .owner-grid,
    .area-layout {
        grid-template-columns: 1fr;
    }

    .section-heading,
    .reviews-heading {
        gap: 22px;
    }

    .owner-grid,
    .area-layout {
        gap: 45px;
    }

    .owner-photo,
    .owner-photo img {
        min-height: 460px;
    }

    .owner-tag {
        right: 20px;
    }

    .area-graphic {
        min-height: 420px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .container,
    .inner {
        width: min(calc(100% - 34px), var(--container));
    }

    .section {
        padding: 78px 0;
    }

    .topbar-location,
    .topbar-detail {
        display: none;
    }

    .topbar-inner {
        justify-content: center;
    }

    .nav {
        min-height: 70px;
    }

    .nav-logo {
        width: 48px;
        max-height: 48px;
    }

    .nav-brand-text strong {
        font-size: 1.05rem;
    }

    .nav-brand-text span {
        font-size: .47rem;
    }

    .hero-content {
        padding-top: 62px;
        padding-bottom: 90px;
    }

    .hero-logo {
        width: min(340px, 82vw);
        margin-bottom: 28px;
    }

    .hero h1 {
        font-size: clamp(3.3rem, 17vw, 5.7rem);
    }

    .hero-description {
        font-size: .95rem;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 28px;
    }

    .emergency-inner {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .emergency-actions {
        justify-content: space-between;
        padding-top: 13px;
        border-top: 1px solid rgba(6,16,22,.22);
    }

    .services-section {
        padding: 78px 0;
    }

    .services-grid,
    .review-grid {
        grid-template-columns: 1fr;
    }

    .services-grid .service-card {
        min-height: 225px;
    }

    .services-callout {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .repair-feature {
        min-height: 520px;
    }

.repair-content {
    width: calc(100% - 34px);
    padding-top: 85px;
    padding-bottom: 85px;
}

    .owner-photo,
    .owner-photo img {
        min-height: 400px;
    }

    .owner-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .area-graphic {
        min-height: 360px;
    }

    .radar-three {
        width: 330px;
        height: 330px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .site-footer {
        padding-bottom: 110px;
    }

    /* mobile action bar is defined in the final shared layout contract */
}

@media (max-width: 420px) {
    .nav-brand-text {
        display: none;
    }

    .hero-trust {
        grid-template-columns: 1fr;
    }

    .owner-values {
        grid-template-columns: 1fr 1fr;
    }

    .map-center {
        width: 115px;
        height: 115px;
    }

    .radar-two {
        width: 245px;
        height: 245px;
    }

    .radar-three {
        width: 315px;
        height: 315px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot {
        animation: none;
    }

    body.reveal-ready .reveal,
    body.reveal-ready .reveal.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   SERVICE AREA — LIVE MAP
========================================================= */

.area-map-wrap {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.10);
    background: #061118;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(168, 230, 0, 0.025);
}


/* Actual Leaflet map */

#service-area-map {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: #061118;

    z-index: 1;
}


/* Darken the basemap slightly so Smith green dominates */

#service-area-map .leaflet-tile-pane {
    filter:
        brightness(0.72)
        contrast(1.12)
        saturate(0.65);
}


/* Remove default Leaflet focus ugliness */

#service-area-map:focus {
    outline: none;
}


/* ---------------------------------------------------------
   CLARKSVILLE MARKER
--------------------------------------------------------- */

.smith-map-marker {
    background: transparent;
    border: 0;
}

.smith-map-star {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #baff00;

    font-size: 34px;
    line-height: 1;

    text-shadow:
        0 0 8px rgba(186, 255, 0, 0.9),
        0 0 22px rgba(168, 230, 0, 0.55);
}


/* pulse behind Clarksville */

.smith-map-star::before {
    content: "";

    position: absolute;
    inset: 4px;

    border: 1px solid rgba(186, 255, 0, 0.55);
    border-radius: 50%;

    animation: smith-map-pulse 2.8s ease-out infinite;
}


@keyframes smith-map-pulse {

    0% {
        transform: scale(0.5);
        opacity: 0.85;
    }

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }

}


/* ---------------------------------------------------------
   CUSTOM LABEL
--------------------------------------------------------- */

.smith-map-label {
    background: rgba(3, 11, 16, 0.88);

    border: 1px solid rgba(186, 255, 0, 0.42);

    color: #f5f8f9;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.11em;

    padding: 7px 10px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);

    white-space: nowrap;
}

.smith-map-label::before {
    display: none;
}


/* ---------------------------------------------------------
   MAP OVERLAY
--------------------------------------------------------- */

.service-map-overlay {
    position: absolute;

    top: 22px;
    left: 22px;

    z-index: 500;

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 12px 15px;

    background: rgba(3, 11, 16, 0.82);

    border-left: 3px solid #a8e600;

    backdrop-filter: blur(7px);

    pointer-events: none;
}


.service-map-status {
    color: #a8e600;

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.18em;
}


.service-map-overlay strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   MAP KEY
--------------------------------------------------------- */

.service-map-key {
    position: absolute;

    left: 22px;
    bottom: 22px;

    z-index: 500;

    display: flex;
    flex-direction: column;
    gap: 9px;

    padding: 12px 15px;

    background: rgba(3, 11, 16, 0.84);

    border: 1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(7px);

    pointer-events: none;
}


.service-map-key > div {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(245, 248, 249, 0.75);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.map-key-primary {
    width: 24px;
    height: 9px;

    background: rgba(168, 230, 0, 0.28);

    border: 1px solid #a8e600;
}


.map-key-extended {
    width: 24px;
    height: 0;

    border-top: 2px dashed #a8e600;
}


/* ---------------------------------------------------------
   LEAFLET CONTROLS
--------------------------------------------------------- */

#service-area-map .leaflet-control-zoom {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;

    box-shadow: none;
}


#service-area-map .leaflet-control-zoom a {
    background: rgba(3, 11, 16, 0.90);

    color: #a8e600;

    border-bottom-color: rgba(255, 255, 255, 0.08);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


#service-area-map .leaflet-control-zoom a:hover {
    background: #a8e600;
    color: #061118;
}


#service-area-map .leaflet-control-attribution {
    background: rgba(3, 11, 16, 0.70);

    color: rgba(255, 255, 255, 0.55);

    font-size: 8px;
}


#service-area-map .leaflet-control-attribution a {
    color: rgba(186, 255, 0, 0.75);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .area-map-wrap {
        height: 480px;
        margin-top: 40px;
    }

}


@media (max-width: 600px) {

    .area-map-wrap {
        height: 420px;
    }

    .service-map-overlay {
        top: 14px;
        left: 14px;
    }

    .service-map-key {
        left: 14px;
        bottom: 28px;
    }

}

/* =========================================================
   HERO — TIGHTER DESKTOP SPACING
========================================================= */

@media (min-width: 901px) {

    .hero {
        min-height: 760px;
    }

    .hero-content {
        padding-top: 70px;
        padding-bottom: 70px;
    }

}

/* =========================================================
   HOMEPAGE HERO — PERFORMANCE TITLE
========================================================= */

.hero-title {
    position: relative;

    display: flex;
    flex-direction: column;

    width: max-content;
    max-width: 100%;

    margin: 20px 0 20px;

    font-family: inherit;
    font-weight: 950;

    line-height: .76;
    letter-spacing: -0.065em;

    text-transform: uppercase;

    transform: skewX(-3deg);
}


/* KEEP */

.hero-title-keep {
    position: relative;
    z-index: 2;

    display: block;

    color: #f5f8f9;

    font-size: clamp(4.8rem, 7vw, 7.4rem);

    text-shadow:
        4px 4px 0 rgba(8, 116, 185, .20),
        9px 9px 22px rgba(0, 0, 0, .38);
}


/* ROLLING */

.hero-title-rolling {
    position: relative;
    z-index: 1;

    display: block;

    color: #a8e600;

    font-size: clamp(4.8rem, 7vw, 7.4rem);

    text-shadow:
        4px 4px 0 rgba(3, 11, 16, .85),
        8px 8px 0 rgba(8, 116, 185, .15),
        12px 14px 30px rgba(0, 0, 0, .42);
}


/* Little speed accent */

.hero-title-rolling::after {
    content: "";

    position: absolute;

    left: 5px;
    bottom: -18px;

    width: 42%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #a8e600 0%,
            #a8e600 72%,
            transparent 72%
        );

    box-shadow:
        14px 0 0 rgba(168, 230, 0, .50),
        29px 0 0 rgba(168, 230, 0, .20);

    transform: skewX(-28deg);
}

/* =========================================================
   HERO SERVICES
========================================================= */

.hero-services {
    display: flex;
    flex-wrap: wrap;

    gap: 9px 18px;

    max-width: 760px;

    margin-top: 30px;
    padding-top: 18px;

    border-top: 1px solid rgba(255,255,255,.11);
}


.hero-services a,
.hero-services span {
    position: relative;

    color: rgba(245,248,249,.86);

    font-size: .72rem;
    font-weight: 900;

    letter-spacing: .075em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.hero-services a::before,
.hero-services span::before {
    content: "•";

    margin-right: 7px;

    color: #a8e600;
}


.hero-services a:hover {
    color: #a8e600;
    transform: translateY(-1px);
}


.hero-trust-secondary {
    margin-top: 15px;
}


.hero-trust-secondary span {
    color: rgba(245,248,249,.56);
}


.hero-trust-secondary i {
    color: #a8e600;
    font-style: normal;
    margin-right: 5px;
}

/* =========================================================
   HERO SERVICE AREA MAP
========================================================= */

.hero-map-panel {
    position: relative;

    width: 340px;
    height: 420px;

    overflow: hidden;

    background: rgba(3, 11, 16, .88);

    border: 1px solid rgba(168, 230, 0, .48);

    box-shadow:
        0 25px 70px rgba(0,0,0,.40),
        0 0 35px rgba(168,230,0,.035);
}


.hero-map-panel::before {
    content: "";

    position: absolute;
    inset: 8px;

    z-index: 450;

    border: 1px solid rgba(255,255,255,.08);

    pointer-events: none;
}


.hero-map-heading {
    position: absolute;

    top: 22px;
    left: 22px;

    z-index: 500;

    display: flex;
    flex-direction: column;

    padding: 10px 12px;

    background: rgba(3,11,16,.84);

    border-left: 3px solid #a8e600;

    pointer-events: none;
}


.hero-map-heading span {
    color: #a8e600;

    font-size: .55rem;
    font-weight: 950;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.hero-map-heading strong {
    margin-top: 3px;

    color: #fff;

    font-size: .7rem;
    font-weight: 950;

    letter-spacing: .07em;
}


#hero-service-map {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: #061118;
}


#hero-service-map .leaflet-tile-pane {
    filter:
        brightness(.62)
        contrast(1.15)
        saturate(.60);
}


/* We don't need controls in the hero */

#hero-service-map .leaflet-control-zoom {
    display: none;
}


#hero-service-map .leaflet-control-attribution {
    background: rgba(3,11,16,.70);

    color: rgba(255,255,255,.38);

    font-size: 6px;
}


#hero-service-map .leaflet-control-attribution a {
    color: rgba(168,230,0,.60);
}


.hero-map-footer {
    position: absolute;

    z-index: 500;

    left: 22px;
    right: 22px;
    bottom: 22px;

    display: flex;
    justify-content: space-between;
    gap: 10px;

    padding: 9px 10px;

    background: rgba(3,11,16,.84);

    border: 1px solid rgba(255,255,255,.08);

    pointer-events: none;
}


.hero-map-footer span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: rgba(245,248,249,.65);

    font-size: .48rem;
    font-weight: 900;

    letter-spacing: .06em;
    text-transform: uppercase;
}


.hero-map-primary {
    display: block;

    width: 17px;
    height: 7px;

    background: rgba(168,230,0,.25);

    border: 1px solid #a8e600;
}


.hero-map-extended {
    display: block;

    width: 17px;

    border-top: 1px dashed #a8e600;
}

@media (max-width: 900px) {

    .hero-title {
        width: 100%;
    }


    .hero-title-keep,
    .hero-title-rolling {
        font-size: clamp(4rem, 16vw, 6.2rem);
    }


    .hero-services {
        gap: 10px 15px;
    }


    .hero-map-panel {
        width: 100%;
        max-width: 520px;

        height: 390px;

        margin-top: 45px;
    }

}


@media (max-width: 600px) {

    .hero-title-keep,
    .hero-title-rolling {
        font-size: clamp(3.4rem, 17vw, 5rem);
    }


    .hero-map-panel {
        height: 340px;
    }


    .hero-map-footer {
        left: 14px;
        right: 14px;
        bottom: 18px;
    }

}

/* =========================================================
   HOMEPAGE HERO — FINAL DESKTOP GRID
   Keep this at the END of main.css
========================================================= */

@media (min-width: 901px) {

    .hero .hero-content {
        display: grid;

        grid-template-columns:
            minmax(0, 760px)
            380px;

        align-items: center;

        justify-content: start;

        gap: clamp(55px, 7vw, 105px);
    }

    .hero .hero-copy-block {
        width: 100%;
        max-width: 760px;
    }

    .hero .hero-map-panel {
        width: 380px;
        height: 400px;

        justify-self: start;
    }

}

@media (max-width: 900px) {

    .hero .hero-content {
        display: block;
    }

    .hero .hero-copy-block {
        width: 100%;
        max-width: 760px;
    }

    .hero .hero-map-panel {
        width: 100%;
        max-width: 520px;
        margin-top: 45px;
    }

}

/* HERO MAP — COMPACT LABEL */

#hero-service-map .smith-map-label {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    padding: 4px 6px;
}

#hero-service-map .smith-map-star {
    transform: scale(.82);
}

/* =========================================================
   HOMEPAGE HERO — FINAL REAL-MOBILE OVERRIDE
   KEEP AT ABSOLUTE END OF MAIN.CSS
========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------
       HERO LAYOUT
    ----------------------------------------- */

    .hero .hero-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: calc(100% - 34px);
        max-width: none;

        margin-left: auto;
        margin-right: auto;

        gap: 0;
    }


    .hero .hero-copy-block {
        width: 100%;
        max-width: none;
    }


    /* -----------------------------------------
       BUTTONS
    ----------------------------------------- */

    .hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        gap: 12px;
    }


    .hero .hero-actions .btn {
        width: 100%;
        min-height: 62px;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* -----------------------------------------
       SERVICES
    ----------------------------------------- */

    .hero .hero-services {
        display: flex;
        flex-wrap: wrap;

        width: 100%;
        max-width: none;

        gap: 8px 10px;

        margin-top: 18px;
        padding-top: 18px;

        border-top: 1px solid rgba(255,255,255,.12);
    }


    .hero .hero-services a,
    .hero .hero-services span {
        display: inline-flex;
        align-items: center;

        width: auto;

        color: rgba(245,248,249,.88);

        font-size: .68rem;
        font-weight: 900;
        line-height: 1.3;

        letter-spacing: .045em;
        text-transform: uppercase;

        text-decoration: none;
    }


    .hero .hero-services a::before,
    .hero .hero-services span::before {
        content: "•";

        display: inline-block;

        margin-right: 5px;

        color: #a8e600;
    }


    /* -----------------------------------------
       TRUST ITEMS
    ----------------------------------------- */

    .hero .hero-trust-secondary {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        width: 100%;

        gap: 10px 22px;

        margin-top: 18px;
    }


    .hero .hero-trust-secondary span {
        display: inline-flex;
        align-items: center;

        width: auto;

        color: rgba(245,248,249,.65);

        font-size: .65rem;
        font-weight: 900;

        letter-spacing: .05em;
        text-transform: uppercase;
    }


    /* -----------------------------------------
       HERO MAP
    ----------------------------------------- */

    .hero .hero-map-panel {
        position: relative;

        display: block;

        width: 100%;
        max-width: none;

        height: 350px;
        min-height: 350px;

        margin: 32px 0 0;

        flex: 0 0 350px;

        overflow: hidden;
    }


    .hero #hero-service-map {
        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100% !important;

        min-height: 350px;
    }


    .hero .hero-map-heading {
        top: 18px;
        left: 18px;
    }


    .hero .hero-map-footer {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

}

/* =========================================================
   FINAL SHARED LAYOUT CONTRACT
   Homepage + Interior Pages
========================================================= */

.container,
.inner {
    width: min(calc(100% - 48px), var(--container));
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   INTERIOR / SERVICE PAGE HERO ALIGNMENT
--------------------------------------------------------- */

.page-hero-content {
    width: min(calc(100% - 48px), var(--container));
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
}

.page-hero-description {
    width: 100%;
    max-width: 700px;
}


/* ---------------------------------------------------------
   MOBILE ACTION BAR
   One authoritative definition for the entire site.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   TABLET / MOBILE
--------------------------------------------------------- */

@media (max-width: 820px) {

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .container,
    .inner,
    .page-hero-content {
        width: min(calc(100% - 34px), var(--container));
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-actions {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        z-index: 9999;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

        width: 100%;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        margin: 0;

        transform: none !important;

        border-top: 1px solid rgba(255,255,255,.12);
        background: #07151c;

        box-shadow:
            0 -10px 30px rgba(0,0,0,.35);
    }

    .mobile-actions > a {
        min-width: 0;
        min-height: 64px;
        height: 64px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 9px;
        padding: 8px 12px;

        font-size: .76rem;
        font-weight: 950;
        line-height: 1.05;
        letter-spacing: .05em;

        text-align: center;
        text-transform: uppercase;
    }

    .mobile-actions small {
        display: block;
        margin-bottom: 2px;
        font-size: .48rem;
        line-height: 1;
        letter-spacing: .11em;
    }

    .mobile-call {
        background: var(--green);
        color: #061016;
    }

    .mobile-text {
        background: var(--blue);
        color: #fff;
    }

    .site-footer {
        padding-bottom: 70px;
    }
}


/* ---------------------------------------------------------
   PHONE
--------------------------------------------------------- */

@media (max-width: 600px) {

    .container,
    .inner,
    .page-hero-content {
        width: calc(100% - 30px);
    }

    .page-hero-content {
        padding-top: 80px;
        padding-bottom: 95px;
    }
}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 821px) {

    body {
        padding-bottom: 0;
    }

    .mobile-actions {
        display: none !important;
    }
}