:root{
--blue:#087dea;
--navy:#071b31;
--ink:#102238;
--muted:#627083;
--soft:#f4f7fa;
--line:#dce5ed;
--shadow:0 20px 55px rgba(3,21,39,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--ink);
background:#fff;
}

.navbar{
height:82px;
padding:0 5vw;
display:flex;
align-items:center;
justify-content:space-between;
background:rgba(255,255,255,.94);
border-bottom:1px solid rgba(10,40,70,.08);
position:sticky;
top:0;
z-index:50;
backdrop-filter:blur(15px);
}

.brand{
display:flex;
align-items:center;
text-decoration:none;
}

.brand img{
width:230px;
max-height:62px;
object-fit:contain;
}

.text-logo{
display:none;
font-size:30px;
font-weight:900;
font-style:italic;
}

.navbar nav{
display:flex;
gap:28px;
}

.navbar nav a{
text-decoration:none;
font-weight:750;
}

.hero{
min-height:690px;
background:
linear-gradient(90deg,rgba(3,18,34,.90),rgba(3,18,34,.66) 42%,rgba(3,18,34,.05) 72%),
url("/static/img/zmoverswp.png"),
linear-gradient(125deg,#10283f,#378bd1 68%,#ffd177);
background-size:cover;
background-position:center;
display:flex;
align-items:center;
}

.hero-content{
color:#fff;
max-width:750px;
margin-left:7vw;
padding:70px 0;
}

.eyebrow{
font-size:13px;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
}

.eyebrow.blue{color:var(--blue)}

.hero h1{
font-size:clamp(48px,6vw,82px);
line-height:.98;
margin:22px 0;
letter-spacing:-.045em;
}

.hero h1 span{color:#82caff}

.hero-copy{
font-size:21px;
line-height:1.6;
color:rgba(255,255,255,.92);
}

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

.button{
display:inline-flex;
justify-content:center;
align-items:center;
min-height:52px;
padding:0 25px;
border:0;
border-radius:10px;
text-decoration:none;
font-weight:850;
cursor:pointer;
font-size:15px;
}

.button.primary{
background:linear-gradient(135deg,#087dea,#1d98ff);
color:#fff;
}

.button.secondary{
background:rgba(255,255,255,.13);
color:#fff;
border:1px solid rgba(255,255,255,.45);
}

.button.light{
background:#fff;
color:var(--navy);
}

.button.big{
min-height:60px;
font-size:17px;
margin-top:20px;
}

.size-strip{
display:grid;
grid-template-columns:repeat(6,1fr);
background:#071b31;
color:white;
text-align:center;
font-weight:800;
}

.size-strip div{
padding:20px 12px;
border-right:1px solid rgba(255,255,255,.12);
}

.section{
padding:100px 7vw;
}

.section-heading{
max-width:820px;
margin-bottom:50px;
}

.section h2,
.quote-section h2,
.mover-callout h2,
.page-hero h1{
font-size:clamp(36px,4vw,56px);
line-height:1.08;
letter-spacing:-.035em;
margin:14px 0;
}

.section-copy{
font-size:19px;
line-height:1.7;
color:var(--muted);
}

.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

.steps article,
.company-details article{
border:1px solid var(--line);
border-radius:18px;
padding:34px;
}

.steps p,
.company-details p{
color:var(--muted);
line-height:1.65;
}

.number{
width:46px;
height:46px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--blue);
color:#fff;
font-weight:900;
}

.quote-section{
padding:100px 7vw;
background:var(--soft);
display:grid;
grid-template-columns:minmax(250px,.8fr) minmax(500px,1.4fr);
gap:65px;
align-items:start;
}

.quote-intro{
position:sticky;
top:120px;
}

.quote-intro p,
.page-hero p{
color:var(--muted);
font-size:18px;
line-height:1.7;
}

.quote-form{
background:#fff;
border-radius:22px;
padding:38px;
box-shadow:var(--shadow);
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

label{
display:flex;
flex-direction:column;
gap:8px;
font-size:13px;
font-weight:800;
color:#34485e;
}

input,
select,
textarea{
width:100%;
border:1px solid #cbd7e2;
background:#fff;
border-radius:9px;
padding:14px;
font:inherit;
font-size:15px;
}

.full{margin-top:20px}

.subdomain-field{
display:flex;
align-items:center;
border:1px solid #cbd7e2;
border-radius:9px;
overflow:hidden;
}

.subdomain-field input{
border:0;
}

.subdomain-field span{
white-space:nowrap;
padding-right:14px;
font-weight:700;
color:#50647b;
}

.services-box{
margin-top:24px;
border:1px solid #ccd9e4;
border-radius:14px;
padding:22px;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.services-box legend{
font-weight:900;
padding:0 8px;
}

.services-box label{
display:flex;
flex-direction:row;
align-items:center;
font-weight:700;
}

.services-box input{
width:auto;
}

.mover-callout{
padding:105px 7vw;
background:linear-gradient(135deg,#06182a,#092d50);
color:#fff;
}

.mover-callout > div{
max-width:820px;
}

.mover-callout p{
color:#c9d8e6;
font-size:19px;
line-height:1.65;
}

.domain-example{
display:inline-block;
padding:15px 19px;
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.08);
border-radius:10px;
font-family:monospace;
}

.mover-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}

.mover-card{
border:1px solid var(--line);
padding:28px;
border-radius:17px;
text-decoration:none;
}

.mover-card p{color:var(--muted)}
.mover-card span{color:var(--blue);font-weight:800}

.page-hero{
padding:100px 7vw 70px;
max-width:1050px;
}

.success-page{
min-height:65vh;
padding:110px 7vw;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.success-icon{
width:70px;
height:70px;
border-radius:50%;
background:#19a765;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
font-weight:900;
}

.success-domain{
margin:16px;
padding:16px 24px;
border-radius:10px;
background:#e8f3ff;
color:#0569c8;
font-weight:900;
font-size:22px;
}

.company-hero{
min-height:520px;
background:
linear-gradient(90deg,rgba(4,22,40,.94),rgba(4,22,40,.67)),
url("/static/img/zmoverswp.png"),
#08243d;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
color:white;
}

.company-inner{
width:min(900px,86vw);
margin:auto;
}

.company-inner h1{
font-size:clamp(45px,6vw,74px);
margin:18px 0;
}

.company-location{
font-size:22px;
color:#8fceff;
}

.company-description{
font-size:19px;
max-width:720px;
line-height:1.7;
}

.company-actions{
display:flex;
gap:12px;
margin-top:30px;
}

.company-details{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.flash-wrap{
position:fixed;
z-index:100;
top:95px;
left:50%;
transform:translateX(-50%);
}

.flash{
background:#992c2c;
color:white;
padding:13px 20px;
border-radius:9px;
}

footer{
background:#041421;
color:#aabccc;
padding:45px 7vw;
display:flex;
justify-content:space-between;
line-height:1.7;
}

footer strong{color:#fff}

@media(max-width:900px){

.navbar nav{display:none}

.brand img{width:185px}

.hero{
min-height:650px;
background-position:65% center;
}

.hero-content{
margin:0;
padding:70px 7vw;
}

.size-strip{
grid-template-columns:repeat(2,1fr);
}

.steps,
.mover-grid,
.company-details{
grid-template-columns:1fr;
}

.quote-section{
grid-template-columns:1fr;
padding:75px 5vw;
gap:30px;
}

.quote-intro{
position:static;
}

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

.quote-form{
padding:25px;
}

footer{
flex-direction:column;
gap:20px;
}

}


/* ==================================================================
   ZMOVERS_MOVING_TRUCK_CSS_V1
   Small animated ZMovers truck.
   Existing hero wallpaper remains untouched.
   ================================================================== */

.hero {
    position: relative;
    overflow: hidden;
}


/*
   Keep normal hero wording in front of the moving truck.
*/

.hero .hero-content {
    position: relative;
    z-index: 5;
}


/*
   Invisible driving lane at bottom of hero.
*/

.zmovers-drive-lane {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 18px;

    height: 105px;

    overflow: hidden;

    pointer-events: none;

    z-index: 3;
}


/*
   Entire vehicle travels right -> left.
*/

.zmovers-drive-truck {
    position: absolute;

    left: 0;
    bottom: 8px;

    width: 225px;
    height: 88px;

    transform: translateX(calc(100vw + 260px));

    animation:
        zmovers-drive-across
        17s
        linear
        2s
        infinite;
}


/*
   Very small suspension bounce while driving.
*/

.zmovers-truck-bounce {
    position: relative;

    width: 225px;
    height: 88px;

    animation:
        zmovers-truck-bounce
        .42s
        ease-in-out
        infinite alternate;
}


/*
   White cargo box.
*/

.zmovers-truck-box {
    position: absolute;

    left: 0;
    bottom: 23px;

    width: 155px;
    height: 61px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e9edf0 100%
        );

    border:
        2px solid #617181;

    border-radius:
        4px 3px 2px 3px;

    box-shadow:
        0 5px 8px rgba(0,0,0,.27);

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

    overflow: hidden;
}


.zmovers-truck-box img {
    display: block;

    width: 125px;
    height: auto;

    object-fit: contain;
}


/*
   Cab.
*/

.zmovers-truck-cab {
    position: absolute;

    left: 151px;
    bottom: 23px;

    width: 66px;
    height: 48px;

    background:
        linear-gradient(
            135deg,
            #f5f7f8 0%,
            #d5dce1 100%
        );

    border:
        2px solid #617181;

    border-radius:
        7px 16px 4px 3px;

    box-shadow:
        3px 5px 8px rgba(0,0,0,.25);
}


/*
   Windshield.
*/

.zmovers-truck-window {
    position: absolute;

    right: 8px;
    top: 7px;

    width: 27px;
    height: 18px;

    background:
        linear-gradient(
            135deg,
            #6da5c7,
            #17384c
        );

    border:
        1px solid #314956;

    border-radius:
        3px 8px 2px 2px;
}


/*
   Headlight.
*/

.zmovers-truck-headlight {
    position: absolute;

    right: -3px;
    bottom: 8px;

    width: 7px;
    height: 7px;

    background: #fff3a7;

    border-radius: 50%;

    box-shadow:
        0 0 7px rgba(255,238,130,.9);
}


/*
   Wheels.
*/

.zmovers-wheel {
    position: absolute;

    bottom: 12px;

    width: 27px;
    height: 27px;

    box-sizing: border-box;

    background: #13181c;

    border:
        5px solid #20282e;

    border-radius: 50%;

    box-shadow:
        inset 0 0 0 4px #8f9ba3,
        0 2px 4px rgba(0,0,0,.4);

    animation:
        zmovers-wheel-spin
        .48s
        linear
        infinite;
}


.zmovers-wheel::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 5px;

    background: #35434c;

    border-radius: 50%;

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


.zmovers-wheel-one {
    left: 25px;
}


.zmovers-wheel-two {
    left: 166px;
}


/*
   Truck crosses screen and then waits briefly
   before coming around again.
*/

@keyframes zmovers-drive-across {

    0% {
        transform:
            translateX(-270px);
    }

    82% {
        transform:
            translateX(calc(100vw + 260px));
    }

    100% {
        transform:
            translateX(calc(100vw + 260px));
    }
}


@keyframes zmovers-wheel-spin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes zmovers-truck-bounce {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(-2px);
    }
}


/*
   Smaller truck on phones.
*/

@media (max-width: 700px) {

    .zmovers-drive-lane {
        height: 80px;
        bottom: 8px;
    }

    .zmovers-drive-truck {
        transform-origin:
            left bottom;

        scale: .70;

        animation-duration:
            13s;
    }
}


/*
   Accessibility:
   if someone has animations disabled,
   park the truck instead of moving it.
*/

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

    .zmovers-drive-truck {
        animation: none;

        left: auto;
        right: 20px;

        transform: none;
    }

    .zmovers-wheel,
    .zmovers-truck-bounce {
        animation: none;
    }
}







/* ZMOVERS HEADER LOGO FIX V8 START */

body > header,
body > .navbar,
body > .site-header {
    min-height: 220px !important;
    height: 220px !important;
    overflow: visible !important;
}

body > header img,
body > .navbar img,
body > .site-header img {
    width: 840px !important;
    height: auto !important;

    max-width: 840px !important;
    max-height: 210px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;

    transform: none !important;

    display: block !important;
}

body > header nav,
body > .navbar nav,
body > .site-header nav {
    margin-left: auto !important;
}

/* ZMOVERS HEADER LOGO FIX V8 END */