" label */
flex:1 1 220px;
}
.port-cd #portCdTime{
/* Reserve width so the empty initial render doesn't shrink to 0 and
visually collide with the next element. */
min-width:140px;
display:inline-flex;
align-items:center;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.port-cd #portCdTime b{margin-right:6px;}
.port-cd > a.btn-sm{
flex-shrink:0;
white-space:nowrap;
}
.port-cd > button:last-child{
background:rgba(255,255,255,.12) !important;
border:1px solid rgba(255,255,255,.25) !important;
color:#fff !important;
width:24px;height:24px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:14px;line-height:1;
flex-shrink:0;
}
.port-cd > button:last-child:hover{background:rgba(255,255,255,.22) !important;}
@media (max-width:680px){
.port-cd{justify-content:flex-start;}
.port-cd > span:first-of-type{flex-basis:100%;}
.port-cd #portCdTime{flex:1 1 auto;min-width:0;}
}
/* --- 3. INSTANT QUOTE (quote-glass) ----------------------------------- */
.quote-glass{
/* Was: max-width:380px; — too cramped on tablet widths. */
max-width:420px;
width:100%;
}
.quote-glass .qg-tabs{
flex-wrap:wrap; /* let tabs wrap on narrow widths */
}
.quote-glass .qg-tabs .qtab{
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding:7px 6px;
font-size:11.5px;
}
.quote-glass .qg-tabs .qtab i{margin-right:4px;}
/* Form fields: 16px on mobile prevents iOS auto-zoom. */
@media (max-width:760px){
.quote-glass .qg-field input,
.quote-glass .qg-field select,
.quote-glass .qg-field textarea{
font-size:16px; /* iOS zoom guard */
padding:9px 11px;
}
.quote-glass{
max-width:none;
margin:0 auto 14px;
}
}
/* Service tier grid — stack to 2 cols on narrow widths so each tier remains
readable rather than getting clipped. */
@media (max-width:760px){
#qTierGrid{grid-template-columns:repeat(2,1fr) !important;}
}
/* Result card — give it a visible separator from the form even when the page
is short. */
.qg-result{margin-top:14px;}
/* Photo upload area — keep buttons from blowing past the card edge. */
.q-upload{display:flex;flex-direction:column;gap:6px;}
.q-upload > div:first-child{flex-wrap:wrap;}
/* =========================================================================
2026-05-07 — Auth pages mobile fix (login.html + signup.html + forgot-password)
The .auth-wrap was a hard 2-column grid with 40-48px padding everywhere,
which on phones (<= 760px viewport) forced the form off-screen and made
the side image / 38px hero copy crowd the form. These rules collapse to
a single-column flow with phone-friendly padding and font-sizes.
========================================================================= */
@media (max-width:900px){
.auth-wrap{
grid-template-columns:1fr; /* stack instead of split */
min-height:auto; /* don't force 100vh — let content size naturally */
}
.auth-side{
padding:24px 22px 28px;
text-align:center;
}
.auth-side .brand-link img{height:46px;margin:0 auto;}
.auth-side h2{
font-size:24px;
margin-top:14px;
max-width:100%;
}
.auth-side p{margin-top:10px;font-size:13.5px;max-width:100%;}
.auth-bullets{
margin-top:18px;
gap:10px;
text-align:left;
max-width:420px;
margin-left:auto;
margin-right:auto;
}
.auth-bullets div{font-size:13.5px;}
.auth-bullets i{width:32px;height:32px;border-radius:8px;}
/* Drop the © footer on phone — it just adds clutter at the seam. */
.auth-side > div:last-child{display:none;}
.auth-form{
padding:26px 20px 36px;
max-width:none;
margin:0;
}
.auth-form h1{font-size:24px;}
.auth-form .sub{margin-bottom:18px;font-size:13.5px;}
/* Anti-zoom on iOS — inputs must be 16px to stop Safari auto-zooming. */
.auth-form input,
.auth-form select,
.auth-form textarea{
font-size:16px !important;
box-sizing:border-box;
width:100%;
max-width:100%;
}
/* Social-login 4-button grid — 2x2 at this size, but the icons + text were
overflowing because the buttons had no min-width:0. Force them to shrink. */
.auth-form .btn{min-width:0;width:100%;justify-content:center;}
.auth-form .btn-block{width:100%;}
/* Privacy notice block — give it a tighter footprint on phone. */
.auth-form .privacy-notice{
padding:12px 14px;
font-size:11.5px;
}
.auth-form .privacy-notice ul{margin-left:16px;}
}
@media (max-width:480px){
.auth-side{padding:18px 16px 22px;}
.auth-side h2{font-size:21px;}
.auth-form{padding:22px 16px 32px;}
.auth-form h1{font-size:21px;}
/* Social-login buttons: collapse vertical on very narrow screens to avoid
icon-only confusion. */
.auth-form form + div + div[style*="grid-template-columns"]{
grid-template-columns:1fr 1fr !important;
gap:6px !important;
}
}
/* Belt-and-braces: the auth pages don't have a viewport-overflow guard,
and a single oversized child (e.g. an inline-styled div with fixed width)
was pushing the document horizontal. Clamp on the body for these pages. */
body:has(> .auth-wrap){overflow-x:hidden;}
.auth-wrap, .auth-wrap *{max-width:100%;}
.auth-wrap input, .auth-wrap select, .auth-wrap textarea{max-width:100%;}
/* =========================================================================
2026-05-07 — "Book a Free Pickup" + "Track a Shipment" tile mobile fix
The two tiles in #pickup live in an inline 1fr 1fr grid with 26px padding
and a 60x60 icon plus an arrow chevron, all flexed horizontally. On phones
that overflows the viewport. Stack them, slim them down, and ensure the
internal flex row wraps cleanly.
Same treatment for the "How it works" four-column grid below it which
also has no mobile breakpoint and gets cramped.
========================================================================= */
@media (max-width:760px){
/* Override the inline grid-template-columns:1fr 1fr on #pickup section.
Stack each tile (Book Free Pickup / Track a Shipment) on its own row
and center it on the page. */
#pickup .container{
max-width:100% !important;
padding:0 16px !important;
}
#pickup .container > div{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
grid-template-columns:1fr !important;
gap:12px !important;
}
#pickup a.card{
padding:18px !important;
width:100% !important;
max-width:380px !important;
margin:0 auto !important;
box-sizing:border-box !important;
}
#pickup a.card > div{
gap:12px !important;
}
#pickup a.card > div > div:first-child{
/* The 60x60 icon block — shrink for phone */
width:48px !important;
height:48px !important;
border-radius:11px !important;
font-size:21px !important;
}
#pickup a.card h3{
font-size:16px !important;
margin-bottom:2px !important;
line-height:1.25;
}
#pickup a.card p{
font-size:12.5px !important;
line-height:1.4;
margin:0;
}
/* The trailing arrow chevron — keep it but reduce so the title line can
breathe on a 360px screen. */
#pickup a.card > div > i.fa-arrow-right{
font-size:16px !important;
flex-shrink:0;
margin-left:auto;
}
}
@media (max-width:420px){
/* On the smallest phones, drop the chevron entirely — the whole tile is
a clickable link, the arrow is decorative. */
#pickup a.card > div > i.fa-arrow-right{display:none !important;}
#pickup a.card{padding:14px !important;}
}
/* "How it works" four-column grid — also inline-styled and unresponsive. */
section h2.sect-title + * ~ div[style*="repeat(4,1fr)"],
section .sect-head + div[style*="repeat(4,1fr)"]{
/* Selector targets the inline-styled grid that contains the 4 step cards. */
}
@media (max-width:900px){
div[style*="grid-template-columns:repeat(4,1fr)"]{
grid-template-columns:repeat(2,1fr) !important;
}
}
@media (max-width:480px){
div[style*="grid-template-columns:repeat(4,1fr)"]{
grid-template-columns:1fr !important;
}
}
/* =========================================================================
2026-05-07 — Hero slider: single static image on mobile.
The 4-image hero-fade slideshow runs a 28s cross-fade at full viewport
on phones, which is heavy (4 background-image decodes + animation thread)
and causes the hero to flash / shift between slides on slow networks.
On mobile we hide all four overlays and just show
the single base image painted on .hero-bg itself.
========================================================================= */
@media (max-width:760px){
.hero-bg .slide{display:none !important;}
/* Same image the desktop hero opens on — backdrop.jpg is an old banner with
marketing text baked into the pixels, which read as ghost text under the
live headline. The shorthand also drops background-attachment:fixed,
which phones handle badly. */
.hero-bg{
background:url('../hero-ship.jpg') center/cover no-repeat;
}
/* Drop the floating decorative dots + the floating ship icon on mobile so
the hero feels calmer and isn't competing with the static image. */
.hero-deco{display:none !important;}
}
/* =========================================================================
Coverage section — 3 columns × 2 rows for cities + Kingston full-width.
Same arrangement on desktop AND mobile, just scaled padding/font on mobile.
========================================================================= */
@media (max-width:760px){
section#coverage{
padding:24px 0 !important;
text-align:center !important;
}
section#coverage > .container{
max-width:100% !important;
padding:0 12px !important;
margin:0 auto !important;
box-sizing:border-box !important;
}
section#coverage > .container > .coverage-grid,
section#coverage > .container > div[style*="grid-template-columns"]{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:6px !important;
max-width:100% !important;
width:100% !important;
margin:0 auto !important;
box-sizing:border-box !important;
}
section#coverage .card{
padding:10px 4px !important;
font-size:11px !important;
line-height:1.25 !important;
text-align:center !important;
box-sizing:border-box !important;
}
section#coverage .card i{ margin-right:3px; font-size:10px; }
/* Kingston tile spans the full row */
section#coverage .card[style*="grid-column:1 / -1"],
section#coverage .card[style*="span 4"]{
grid-column:1 / -1 !important;
font-size:12px !important;
padding:11px 8px !important;
text-align:center !important;
}
}
/* =========================================================================
2026-05-07 — Contact section ("Send us a message") mobile fit.
The #contact section is an inline `grid-template-columns:1fr 1fr` with
34px gap and no mobile breakpoint. On phones each column became ~150px
wide and the contact info cards (long email + warehouse address) plus
the form (24px card padding + 14px input padding) overflowed the viewport.
========================================================================= */
@media (max-width:760px){
/* Stack the two-column contact grid */
#contact > .container > div[style*="grid-template-columns:1fr 1fr"]{
grid-template-columns:1fr !important;
gap:18px !important;
}
/* Contact info cards — let long emails and addresses wrap */
#contact a[style*="background:rgba(255,255,255,.08)"],
#contact > .container > div > div > div[style*="background:rgba(255,255,255,.08)"]{
padding:14px !important;
gap:12px !important;
align-items:flex-start !important;
}
#contact a > div:last-child,
#contact > .container > div > div > div > div:last-child{
min-width:0; /* allow flex child to shrink */
flex:1 1 auto;
word-break:break-word;
overflow-wrap:anywhere;
}
#contact a > div:last-child > div:last-child,
#contact > .container > div > div > div > div > div:last-child{
font-size:13.5px !important;
line-height:1.35;
}
/* The 44x44 circular icon — keep it fixed-size but a touch smaller. */
#contact a > div:first-child,
#contact > .container > div > div > div > div:first-child{
width:40px !important;
height:40px !important;
flex-shrink:0;
font-size:16px !important;
}
/* The "Send us a message" form card */
#contact form.card{
padding:18px !important;
box-sizing:border-box;
width:100%;
max-width:100%;
}
#contact form.card h3{font-size:18px;margin-bottom:4px;}
#contact form.card p{font-size:12.5px;margin-bottom:12px;}
/* Inputs stay 16px to kill iOS auto-zoom */
#contact form.card .field input,
#contact form.card .field select,
#contact form.card .field textarea{
font-size:16px !important;
padding:11px 12px !important;
box-sizing:border-box;
width:100%;
max-width:100%;
}
/* Name + Phone two-column row inside the form — stack on phone so the
fields are wide enough to type into. */
#contact form.card .row2{
grid-template-columns:1fr !important;
gap:0 !important;
}
}
@media (max-width:420px){
#contact form.card{padding:14px !important;}
}
/* Belt-and-braces: stop any oversized inline element inside #contact from
forcing horizontal scroll on the whole page. */
#contact, #contact *{max-width:100%;}
/* =========================================================================
2026-05-07 — Hero grid mobile stack.
The hero is a `grid-template-columns:1.1fr 1fr` two-column with the headline
+ CTAs ("Book Free Pickup", "Get Instant Quote", "Sign Up") on the left
and the Instant Quote card on the right. On phones the two columns squashed
together and overflowed. Stack vertically: headline + CTAs ("book a shipment"
tile) on top, Instant Quote card below.
========================================================================= */
@media (max-width:900px){
.hero-grid{
grid-template-columns:1fr !important;
gap:24px !important;
align-items:start !important;
}
/* Force the headline/CTA column to render first and the quote card second.
order:1 / order:2 so even if the markup were reversed in another build
the visual stack stays text-then-form. */
.hero-grid > div:first-child{order:1;}
.hero-grid > .quote-glass{order:2;width:100%;max-width:none;margin:0;}
.hero{
min-height:auto !important; /* don't force 100vh on phones */
padding:24px 0 28px !important;
align-items:flex-start;
}
.hero h1{
font-size:clamp(28px,7vw,40px) !important;
margin-bottom:12px !important;
line-height:1.1 !important;
}
.hero .lead{font-size:14.5px !important;line-height:1.45;margin-bottom:18px !important;}
.hero-ctas{
gap:8px !important;
margin-bottom:18px !important;
}
.hero-ctas .btn{
flex:1 1 100%; /* full-width CTA buttons on phone */
justify-content:center;
padding:12px 14px;
font-size:14.5px;
}
/* Three trust labels (Licensed & Insured / Door-to-Door / 24/7 Support)
must fit on ONE horizontal line on mobile — no wrapping, no overflow.
Icons hidden so the three short text labels always squeeze onto one row. */
html body .trust-row,
html body .hero .trust-row{
display:flex !important;
flex-wrap:nowrap !important;
flex-direction:row !important;
gap:6px !important;
justify-content:space-between !important;
align-items:center !important;
width:100% !important;
max-width:100% !important;
margin:8px 0 !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
html body .trust-row .trust-item,
html body .hero .trust-row .trust-item{
flex:1 1 auto !important;
min-width:0 !important;
display:flex !important;
flex-direction:row !important;
gap:4px !important;
align-items:center !important;
justify-content:center !important;
font-size:10px !important;
line-height:1.2 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-shadow:0 1px 2px rgba(0,0,0,.6) !important;
}
/* Hide the badge icons on mobile so the text always fits. */
html body .trust-row .trust-item i,
html body .hero .trust-row .trust-item i{
display:none !important;
}
}
@media (max-width:480px){
html body .trust-row{ gap:3px !important; margin:6px 0 !important; }
html body .trust-row .trust-item{ font-size:9px !important; }
}
@media (max-width:360px){
html body .trust-row .trust-item{ font-size:8.5px !important; }
}
@media (max-width:480px){
.hero{padding:18px 0 22px !important;}
.hero h1{font-size:26px !important;}
.hero-ctas{gap:6px !important;}
}
/* =========================================================================
2026-05-07 — Toasts/notifications stack on mobile + harder contact fix.
========================================================================= */
/* --- TOAST / NOTIFICATION STACK --------------------------------------- */
/* Existing rule: .toast-host { position:fixed; top:20px; right:20px;
max-width:360px; } — on phones the right:20px + 360px cap could push the
toasts off the side, and individual toasts could exceed the host width.
On mobile, anchor the host to BOTH sides so it spans the screen, and
stack each toast below the previous one. */
@media (max-width:760px){
.toast-host{
top:12px !important;
right:12px !important;
left:12px !important;
max-width:none !important;
width:auto !important;
gap:8px !important;
align-items:stretch !important;
}
.toast-host .toast{
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
padding:12px 14px !important;
border-radius:12px !important;
animation:slidein-top .25s !important;
}
.toast-host .toast b{font-size:13.5px;}
.toast-host .toast span{font-size:12.5px;line-height:1.35;}
/* Bell notification panel — make it span ~the full viewport so it doesn't
hang off the right edge on phones. */
.notif-panel{
position:fixed !important;
top:60px !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
}
}
@keyframes slidein-top{from{transform:translateY(-12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
/* --- "SEND US A MESSAGE" CONTACT FORM — STRONGER MOBILE FIX ----------- */
/* The earlier contact rule depended on the inline-style attribute matching
exactly, which is fragile across browsers. Use direct descendant selectors
instead and force full overflow control on every nested element. */
@media (max-width:760px){
/* Force the contact section's container to never overflow. */
#contact{padding:32px 0 !important;}
#contact > .container{
padding-left:14px !important;
padding-right:14px !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* The two-column grid (info cards | form) — stack regardless of inline style. */
#contact > .container > div{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
max-width:100% !important;
}
/* The contact info card column AND the form */
#contact > .container > div > *{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
/* Each contact info card (phone / email / warehouse / hours). */
#contact > .container > div > div > a,
#contact > .container > div > div > div{
padding:13px !important;
box-sizing:border-box;
min-width:0 !important;
overflow:hidden;
}
#contact a > div:last-child > div:last-child,
#contact > .container > div > div > div > div:last-child > div:last-child{
word-break:break-word !important;
overflow-wrap:anywhere !important;
font-size:13px !important;
line-height:1.35 !important;
}
/* The form card itself */
#contact form.card,
#contact form{
padding:16px !important;
margin:0 !important;
box-sizing:border-box !important;
width:100% !important;
max-width:100% !important;
}
#contact form h3{font-size:17px !important;margin-bottom:4px !important;}
#contact form p{font-size:12.5px !important;margin-bottom:12px !important;}
#contact form .field{margin-bottom:10px !important;}
#contact form .field input,
#contact form .field select,
#contact form .field textarea{
width:100% !important;
max-width:100% !important;
font-size:16px !important; /* iOS zoom guard */
padding:11px 12px !important;
box-sizing:border-box !important;
border-radius:9px !important;
}
/* Stack the Name + Phone row */
#contact form .row2{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
}
#contact form .btn-block{width:100% !important;}
}
/* =========================================================================
2026-05-07 — Milestone steps ("How it works" 1-2-3-4) stack on mobile.
The earlier rule collapsed the inline `repeat(4,1fr)` grid to 2 columns at
<=900px and 1 column at <=480px. The user wants every milestone stacked
on top of each other on mobile, so collapse to 1 column at the standard
<=760px breakpoint and add an arrow / connector to suggest the flow.
========================================================================= */
@media (max-width:760px){
/* :has(> div > h4) confines this to the milestone grids (their cells carry
an h4 title). Other repeat(4,1fr) grids — the home stats strip — were
being caught too, and the 42px "circle" rule below crushed their numbers. */
div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div > h4){
grid-template-columns:1fr !important;
gap:12px !important;
max-width:520px !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Reshape each milestone tile into a horizontal row so the page doesn't
turn into one tall column of empty space — number on the left,
title + paragraph on the right. */
div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div > h4) > div{
display:flex !important;
align-items:center !important;
gap:14px !important;
text-align:left !important;
padding:14px 16px !important;
position:relative;
}
/* The numbered circle (the inner div with width:44px;height:44px) */
div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div > h4) > div > div:first-child{
margin:0 !important;
flex-shrink:0;
width:42px !important;
height:42px !important;
}
/* Title + body wrapper takes whatever space is left */
div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div > h4) > div > h4{
text-align:left !important;
margin:0 0 2px !important;
font-size:15px !important;
}
div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div > h4) > div > p{
text-align:left !important;
margin:0 !important;
font-size:12.5px !important;
line-height:1.4;
}
/* Connector line between consecutive milestones to suggest the sequence. */
div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div > h4) > div:not(:last-child)::after{
content:'';
position:absolute;
left:35px; /* aligns with the centre of the 42px circle */
bottom:-9px;
width:2px;
height:9px;
background:linear-gradient(180deg, rgba(11,79,148,.4), rgba(11,79,148,0));
pointer-events:none;
}
}
/* =========================================================================
2026-05-07 — Force stack: "Book a Free Pickup" + "Track a Shipment".
The earlier #pickup rule used `grid-template-columns:1fr !important` but
if anything else cascaded later, !important alone may not be enough.
Use display:flex flex-direction:column to remove any possibility of the
grid winning, plus higher specificity (#pickup section > .container > div).
========================================================================= */
/* =========================================================================
#pickup section — definitive mobile rule.
Two tiles (Book a Free Pickup / Track a Shipment) stack vertically,
one tile per row, each row centered horizontally on the page.
========================================================================= */
@media (max-width:760px){
html body section#pickup > .container,
html body #pickup > .container{
max-width:100% !important;
padding:0 16px !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* The grid containing the two tiles — vertical flex stack, centered. */
html body section#pickup > .container > div,
html body #pickup > .container > div{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
grid-template-columns:none !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
/* Each tile — capped width, centered. Two rows total: Book then Track. */
html body section#pickup > .container > div > a.card,
html body #pickup > .container > div > a.card{
display:block !important;
width:100% !important;
max-width:380px !important;
padding:16px !important;
box-sizing:border-box !important;
margin:0 auto !important;
}
html body section#pickup > .container > div > a.card > div,
html body #pickup > .container > div > a.card > div{
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:nowrap !important;
}
html body section#pickup a.card > div > div:nth-child(2){
flex:1 1 auto;
min-width:0;
}
html body section#pickup a.card h3{
font-size:16px !important;
margin-bottom:2px !important;
line-height:1.2 !important;
}
html body section#pickup a.card p{
font-size:12.5px !important;
line-height:1.35 !important;
margin:0 !important;
word-break:break-word;
}
html body section#pickup a.card > div > i.fa-arrow-right{
font-size:14px !important;
flex-shrink:0;
margin-left:auto;
}
}
@media (max-width:420px){
html body section#pickup a.card > div > i.fa-arrow-right{ display:none !important; }
html body section#pickup a.card{ padding:14px !important; }
}
/* Earlier rule that hid the "Book a Free Pickup" tile on mobile is now
removed per a later request — both tiles must show, each on its own row. */
/* =========================================================================
2026-05-08 — "What We Move" slider: hide the slider on mobile, leave a
single static photo in its place. The first card (Barrels) stays visible
and stretches to full width; all other cards, the prev/next buttons,
and the dots are hidden. The JS-driven translateX is neutralised so the
autoplay timer cannot move the visible photo.
========================================================================= */
@media (max-width:760px){
/* Hide the navigation buttons + dots */
.slider-wrap .slider-btn,
.slider-dots{display:none !important;}
/* Neutralise the slider mechanics */
.slider-wrap{padding:0 !important;}
.slider-track{
transform:none !important;
transition:none !important;
gap:0 !important;
display:block !important;
width:100% !important;
}
/* Hide every slide card except the first one */
.slider-track .slide-card{display:none !important;}
.slider-track .slide-card:first-child{
display:block !important;
flex:none !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
aspect-ratio:16 / 11;
border-radius:14px !important;
cursor:default;
}
.slider-track .slide-card:first-child img{
width:100% !important;
height:100% !important;
object-fit:cover;
transition:none !important;
transform:none !important;
}
/* Caption + tag a touch larger so they're readable at full width. */
.slider-track .slide-card:first-child .cap{
font-size:14px;
padding:12px 14px;
}
.slider-track .slide-card:first-child .tag{
font-size:11px;
padding:4px 10px;
}
}
/* =========================================================================
2026-05-07 — Mobile: hide the inline Instant Quote card from the hero,
show it as a slide-up modal only when the user taps "Get Instant Quote"
(the button has href="#quote", so #quote:target switches the card into
modal mode). The X in the top-right links to "#", which clears the
target and slides the modal back away. Pure CSS — no JS hook needed.
========================================================================= */
/* Close button — hidden on desktop, shown only inside the mobile modal. */
.qg-mclose{display:none;}
@media (max-width:900px){
/* Default state: the inline Instant Quote card is hidden on mobile. */
.quote-glass{
display:none !important;
}
/* When the URL hash matches (the user tapped "Get Instant Quote"), bring
the card up as a slide-from-bottom modal. */
.quote-glass:target{
display:block !important;
position:fixed !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
top:auto !important;
margin:0 !important;
width:100% !important;
max-width:100% !important;
max-height:90vh;
overflow-y:auto;
z-index:9999;
border-radius:18px 18px 0 0 !important;
box-shadow:0 -10px 40px rgba(2,23,46,.45) !important;
animation:qgSlideUp .25s cubic-bezier(.2,.8,.2,1);
padding:18px 18px 28px !important;
background:#fff !important;
}
/* Backdrop scrim behind the modal — also acts as a click-to-close target. */
.quote-glass:target::after{
content:'';
position:fixed;
inset:0;
background:rgba(2,23,46,.55);
z-index:-1;
animation:qgFade .25s;
}
/* Show the close button only inside the modal. */
.quote-glass:target .qg-mclose{
display:flex !important;
position:absolute;
top:10px;
right:12px;
width:34px;
height:34px;
border-radius:50%;
background:#f1f5f9;
color:#475569;
text-decoration:none;
font-size:14px;
align-items:center;
justify-content:center;
z-index:2;
border:1px solid var(--border);
}
.quote-glass:target .qg-mclose:hover{background:#e2e8f0;color:#1e293b;}
/* Lock body scroll behind the modal — best-effort, requires JS for full
iOS safety, but this prevents most accidental scroll-through. */
body:has(.quote-glass:target){overflow:hidden;}
}
@keyframes qgSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes qgFade{from{opacity:0;}to{opacity:1;}}
/* =========================================================================
2026-05-08 — Mobile: fully remove the Instant Quote — no inline card AND
no slide-up modal. The previous fix used #quote:target to open the same
card as a bottom-sheet; the user now wants no quote on mobile at all.
Hide the card in every state, suppress the modal scrim, unlock body
scroll, and hide the "Get Instant Quote" hero CTA so it can't trigger
an empty target.
========================================================================= */
@media (max-width:900px){
/* Cancel the :target promotion the earlier rule introduced */
.quote-glass,
.quote-glass:target{
display:none !important;
position:static !important;
animation:none !important;
box-shadow:none !important;
}
.quote-glass:target::after{
content:none !important;
display:none !important;
}
body:has(.quote-glass:target){overflow:auto !important;}
/* Mobile CTA hierarchy: Get Instant Quote is the primary action (full-width,
bright), Book Free Pickup is the secondary (full-width, ghost), Sign Up
is demoted to a centered text link with an arrow. Reordering uses CSS
order so we don't need to touch the markup. */
.hero-ctas{
flex-direction:column !important;
align-items:stretch !important;
}
.hero-ctas a[href="#quote"]{
order:1 !important;
display:flex !important;
background:linear-gradient(135deg, var(--gold), #ff7b00) !important;
color:#3a2400 !important;
border:0 !important;
font-size:16px !important;
font-weight:800 !important;
padding:14px !important;
box-shadow:0 6px 16px rgba(255, 123, 0, .35) !important;
}
.hero-ctas a[href="#pickup"]{ order:2 !important; }
.hero-ctas a[href="signup.html"]{
order:3 !important;
background:transparent !important;
border:0 !important;
color:#fff !important;
text-decoration:underline;
font-size:13px !important;
font-weight:600 !important;
padding:6px !important;
box-shadow:none !important;
align-self:center;
flex:0 0 auto !important;
width:auto !important;
}
.hero-ctas a[href="signup.html"] i{ font-size:11px; opacity:.7; }
}
/* ===========================================================================
* Hero overrides (mobile) — Quote + Pickup buttons share ONE horizontal row;
* hero lead text stretches full-width with wrap + justify.
* ========================================================================= */
@media (max-width:760px){
html body .hero .lead,
html body .hero p.lead{
max-width:100% !important;
width:100% !important;
text-align:justify !important;
text-justify:inter-word !important;
hyphens:auto !important;
word-break:normal !important;
overflow-wrap:break-word !important;
margin:0 0 16px !important;
padding:0 !important;
box-sizing:border-box !important;
}
/* CTA container: horizontal row, allow signup to wrap below. */
html body .hero-ctas{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:stretch !important;
justify-content:center !important;
gap:8px !important;
margin-bottom:18px !important;
width:100% !important;
}
/* Pickup + Quote share one row — each takes ~half. */
html body .hero-ctas a[href="#pickup"],
html body .hero-ctas a[href="#quote"]{
flex:1 1 0 !important;
min-width:0 !important;
width:auto !important;
max-width:none !important;
padding:11px 10px !important;
font-size:13px !important;
font-weight:700 !important;
white-space:nowrap !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
order:initial !important;
}
html body .hero-ctas a[href="#pickup"] i,
html body .hero-ctas a[href="#quote"] i{
font-size:12px !important;
}
/* Sign Up wraps to its own row below, stays a centered text link. */
html body .hero-ctas a[href="signup.html"]{
flex:1 1 100% !important;
width:100% !important;
order:3 !important;
text-align:center !important;
align-self:center !important;
}
}
/* ===== Sticky mobile quote bar =============================================
* Always-visible bottom bar on phones so the primary conversion (Get Quote)
* is one tap away as the user scrolls past the hero. Hidden on desktop and
* when a modal/target panel is open (so it doesn't sit on top of the quote
* card itself).
* =========================================================================*/
.sticky-mq{
display:none;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:80;
background:linear-gradient(180deg, rgba(4,44,84,0) 0%, rgba(4,44,84,.92) 30%, rgba(4,44,84,.96) 100%);
padding:10px 12px 14px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
pointer-events:none;
}
.sticky-mq .row{
display:flex;
gap:8px;
pointer-events:auto;
max-width:520px;
margin:0 auto;
}
.sticky-mq a{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:13px 14px;
border-radius:99px;
text-decoration:none;
font-weight:800;
font-size:14.5px;
letter-spacing:.3px;
box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.sticky-mq a.primary{
background:linear-gradient(135deg, var(--gold), #ff7b00);
color:#3a2400;
flex:1.4;
}
.sticky-mq a.secondary{
background:rgba(255,255,255,.96);
color:var(--blue-deep);
}
.sticky-mq a:active{ transform:translateY(1px); }
@media(max-width:760px){
.sticky-mq{ display:block; }
/* Add bottom padding to body so floating widgets don't get clipped */
body{ padding-bottom:64px; }
/* Hide the bar when the quote modal is open via #quote:target */
body:has(.quote-glass:target) .sticky-mq{ display:none; }
}
/* ===========================================================================
* Entity-page utility classes
* --------------------------------------------------------------------------
* Most internal pages repeat the same shell / header / KPI strip / toolbar
* blocks under different class prefixes (.vs-shell, .lm-shell, .bs-shell,
* .ad-shell, .ent-shell, etc.) — 25+ near-identical copies in the codebase.
* These canonical classes give new pages a single naming convention so the
* same layout doesn't get re-typed every time. Existing pages can adopt them
* by replacing their per-page prefix and removing the duplicated