/* =====================================================================
   EXO PACKERS AND MOVERS: stylesheet
   Brand colors from the logo: teal, black, white.
   ===================================================================== */
:root {
  --teal: #1a999f;
  --teal-bright: #2ec4cb;
  --teal-deep: #0e6b70;
  --teal-soft: #d9eeef;
  --ink: #060606;
  --ink-2: #0b1415;
  --mist: #eef6f6;
  --text: #1c2526;
  --muted: #5a6a6c;
  --line: #d6e3e4;

  --font-head: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --wrap: 1200px;
  --pad: clamp(18px, 4vw, 40px);
  --space: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; padding: 10px 16px; background: var(--ink); color: #fff; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; opacity: 0; width: 0; height: 0; }
.ico {  color:white ;width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--lg { width: 28px; height: 28px; }

/* ---------- Type ---------- */
.h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.14; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.section { padding-block: var(--space); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #c4d3d4; }
.section--ink .h2, .section--ink h3 { color: #fff; }

.head { margin-bottom: clamp(32px, 5vw, 56px); }
.head p { margin-top: 12px; color: var(--muted); max-width: 52ch; }
.section--ink .head p { color: #9db1b2; }
.head--center { text-align: center; }
.head--center .h2, .head--center p { margin-inline: auto; }
.head--center .h2 { max-width: 20ch; }
.head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
/* brand slash above section headings */
.head::before { content: ''; display: block; width: 34px; height: 18px; margin-bottom: 16px; background: linear-gradient(90deg, transparent 0 0), linear-gradient(var(--teal), var(--teal)) 0 0 / 14px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 20px 0 / 5px 100% no-repeat; transform: skewX(-24deg); }
.section--ink .head::before { background: linear-gradient(var(--teal), var(--teal)) 0 0 / 14px 100% no-repeat, linear-gradient(#fff, #fff) 20px 0 / 5px 100% no-repeat; }
.head--center::before { margin-inline: auto; }
.head--row::before { display: none; }
.head--row > div::before { content: ''; display: block; width: 34px; height: 18px; margin-bottom: 16px; background: linear-gradient(var(--teal), var(--teal)) 0 0 / 14px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 20px 0 / 5px 100% no-repeat; transform: skewX(-24deg); }
.section--ink .head--row > div::before { background: linear-gradient(var(--teal), var(--teal)) 0 0 / 14px 100% no-repeat, linear-gradient(#fff, #fff) 20px 0 / 5px 100% no-repeat; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--teal); color:white; font-weight: 800; font-size: .93rem; line-height: 1; white-space: nowrap; transition: background .3s var(--ease), box-shadow .3s var(--ease), color .3s; }
.btn__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--teal-bright); transition: transform .35s var(--ease); }
.btn__arrow .ico { width: 16px; height: 16px; }
.btn:hover { background: var(--teal-bright); box-shadow: 0 10px 26px rgba(46, 196, 203, .32); }
.btn:hover .btn__arrow { transform: rotate(-45deg); }
.btn--sm { padding: 5px 5px 5px 18px; font-size: .88rem; }
.btn--sm .btn__arrow { width: 30px; height: 30px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn--ghost { padding: 13px 22px; gap: 9px; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #fff; }
.btn:has(> .ico:first-child) { padding: 13px 22px; }   /* icon-first buttons (phone) */

.arrows { display: flex; gap: 8px; }
.arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); color: #fff; transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--ease); }
.arrow--prev .ico { transform: rotate(180deg); }
.arrow:hover { background: var(--teal); color: var(--ink); box-shadow: none; transform: scale(1.06); }
.arrow--light { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }

/* ============================================================
   TOP INFO BAR
   ============================================================ */
.topbar { position: relative; z-index: 210; background: var(--ink); color: #d4e2e3; font-size: .84rem; animation: tb-in .7s var(--ease) both; }
@keyframes tb-in { from { transform: translateY(-100%); } to { transform: none; } }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100% - 2 * var(--pad), 1480px); margin-inline: auto; min-height: 44px; }
.topbar__info { display: flex; align-items: center; flex-wrap: wrap; }
.topbar__info li { display: flex; align-items: center; gap: 9px; padding-block: 10px; }
.topbar__info li + li { margin-left: 22px; padding-left: 22px; box-shadow: -1px 0 0 rgba(255, 255, 255, .18); }
.topbar .ico { width: 17px; height: 17px; color: var(--teal-bright); }
.topbar a { transition: color .25s; }
.topbar__info a:hover { color: var(--teal-bright); }
.topbar__info a[href^="tel"] { color: #fff; font-weight: 700; }
.topbar__alt { font-style: normal; color: #fff; font-weight: 700; }
.topbar__social { display: flex; align-items: center; gap: 4px; }
.topbar__social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; transition: background .3s, color .3s, transform .35s var(--ease); }
.topbar__social a .ico { color: inherit; width: 16px; height: 16px; }
.topbar__social a:hover { background: var(--teal); color: var(--ink); transform: translateY(-2px); }

/* ============================================================
   NAVIGATION (fixed bar that sits on the white hero frame)
   ============================================================ */
/* no transform here: a transformed parent would trap the fixed mobile menu inside the bar */
.site-nav { position: fixed; top: 24px; margin-top: var(--tbv, 0px); left: 0; right: 0; margin-inline: auto; z-index: 200; width: min(100% - 52px, 1452px); transition: top .5s var(--ease); }
.site-nav.is-hidden { top: -160px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 20px 6px 14px; border-radius: 999px; transition: background .35s, box-shadow .35s, backdrop-filter .35s; }
.site-nav.is-solid .bar { background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(6, 40, 44, .16); }
.bar__logo img { height: 50px; width: auto; margin-left: 10px; }
.nav { display: flex; align-items: center; margin-inline: auto; }
.nav__links { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: #edf2f2; }
.nav__link { padding: 9px 19px; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #4a5c5e; transition: background .3s, color .3s, box-shadow .3s; }
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(6, 40, 44, .12); }
.nav__phone { display: none; }
.bar__cta { padding: 6px 6px 6px 22px; }
.bar__cta .btn__arrow { width: 36px; height: 36px; }
.burger { display: none; position: relative; z-index: 260; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); }
.burger span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 25px; }
.burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ============================================================
   HERO: framed card with an animated truck scene
   ============================================================ */
.top { max-width: 1520px; margin-inline: auto; padding: 12px 12px 0; }
.top__card { padding: 90px 14px 14px; border-radius: 32px 32px 0 0; background: #fff; box-shadow: 0 0 0 1px #dfe9e9; }
.stage { --road: 124px; position: relative; isolation: isolate; height: clamp(560px, 80svh, 720px); border-radius: 26px; overflow: hidden; color: #fff; background: #0a2a30; }

/* skies cross-fade per slide */
.sky { position: absolute; inset: 0; z-index: -9; opacity: 0; transition: opacity 1.3s var(--ease); }
.sky--1 { background: linear-gradient(180deg, #0f3e47 0%, #2a8a90 46%, #f7c283 100%); }
.sky--2 { background: linear-gradient(180deg, #3f9fd6 0%, #9fdcea 55%, #eefafb 100%); }
.sky--3 { background: linear-gradient(180deg, #030a15 0%, #0a2230 55%, #13454c 100%); }
.stage[data-s="1"] .sky--1, .stage[data-s="2"] .sky--2, .stage[data-s="3"] .sky--3 { opacity: 1; }
.stars { position: absolute; inset: 0 0 38% 0; opacity: .9; background-image: radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 17% 42%, #fff, transparent), radial-gradient(1.6px 1.6px at 26% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 33%, #fff, transparent), radial-gradient(1.6px 1.6px at 43% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 52% 8%, #fff, transparent), radial-gradient(1.6px 1.6px at 61% 38%, #fff, transparent), radial-gradient(1.2px 1.2px at 70% 22%, #fff, transparent), radial-gradient(1.6px 1.6px at 78% 10%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 34%, #fff, transparent), radial-gradient(1.6px 1.6px at 93% 16%, #fff, transparent), radial-gradient(1.2px 1.2px at 14% 28%, #fff, transparent); animation: twinkle 3.4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

.orb { --ox: 60%; --oy: 15%; --oc: #ffe3ab; --og: rgba(255, 190, 100, .5); position: absolute; z-index: -8; left: var(--ox); top: var(--oy); width: clamp(60px, 7vw, 100px); aspect-ratio: 1; border-radius: 50%; background: var(--oc); box-shadow: 0 0 90px 46px var(--og); transition: left 1.4s var(--ease), top 1.4s var(--ease), background .9s, box-shadow .9s; }
.stage[data-s="2"] .orb { --ox: 68%; --oy: 9%; --oc: #fff; --og: rgba(255, 255, 255, .55); }
.stage[data-s="3"] .orb { --ox: 76%; --oy: 12%; --oc: #e6f2f4; --og: rgba(170, 215, 232, .35); }

/* parallax layers: two copies side by side, slide left forever */
.layer { position: absolute; left: 0; display: flex; width: max(200%, 2000px); will-change: transform; animation: drift var(--t, 60s) linear infinite; }
.layer img { width: 50%; height: auto; flex: none; }
@keyframes drift { to { transform: translateX(-50%); } }
.layer--clouds { z-index: -7; top: 4%; --t: 140s; opacity: .7; }
.stage[data-s="3"] .layer--clouds { opacity: .12; transition: opacity 1.3s; }
.land { position: absolute; z-index: -6; inset: 0; overflow: hidden; }
.land .layer { transition: filter 1.3s; }
.stage[data-s="2"] .land .layer { filter: brightness(1.35) saturate(1.15); }
.layer--mountains { --t: 160s; bottom: calc(var(--road) - 4px); }
.layer--hills { --t: 80s; bottom: calc(var(--road) - 10px); }
.layer--near { --t: 26s; bottom: calc(var(--road) - 4px); }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: var(--road); background: linear-gradient(180deg, #14201f, #090f10); box-shadow: 0 -2px 0 #26393b; }
.road i { position: absolute; left: 0; right: 0; top: 56%; height: 6px; opacity: .75; background: repeating-linear-gradient(90deg, #f2f2e8 0 70px, transparent 70px 160px); animation: dash .55s linear infinite; }
@keyframes dash { to { background-position-x: -160px; } }
.tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(255, 150, 60, .18), transparent 60%); }
.stage[data-s="2"] .tint { background: linear-gradient(0deg, rgba(255, 255, 255, .0), transparent); }
.stage[data-s="3"] .tint { background: linear-gradient(0deg, rgba(3, 12, 28, .64) 0%, rgba(3, 12, 28, .56) 52%, transparent 80%); }

/* trucks */
.rigs { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.rig { position: absolute; right: clamp(24px, 6%, 110px); bottom: calc(var(--road) * .5); width: min(52%, 610px); opacity: 0; transform: translateX(-130vw); transition: filter 1.2s; }
.rig--3 { width: min(66%, 790px); }
.rig.is-in { opacity: 1; animation: rig-in 1.7s var(--ease) forwards; }
.rig.is-out { opacity: 1; animation: rig-out 1.1s cubic-bezier(.55, 0, 1, .6) forwards; }
@keyframes rig-in { from { transform: translateX(-130vw); } to { transform: none; } }
@keyframes rig-out { from { transform: none; } to { transform: translateX(130vw); } }
.truck__svg { display: block; width: 100%; height: auto; overflow: visible; animation: bump .42s ease-in-out infinite alternate; }
@keyframes bump { to { transform: translateY(-2.2px); } }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin .55s linear infinite; }
.rig.is-out .wheel { animation-duration: .16s; }
@keyframes spin { to { transform: rotate(360deg); } }
.truck__svg .beam { opacity: 0; transition: opacity 1s; }
.stage[data-s="3"] .rig--3 .beam { opacity: 1; }
.stage[data-s="3"] .rig { filter: brightness(.82) saturate(.95); }
.dust { position: absolute; left: 4%; bottom: 3%; width: 0; height: 0; }
.dust i { position: absolute; left: 0; bottom: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(240, 232, 214, .55); filter: blur(5px); opacity: 0; animation: puff 1.3s ease-out infinite; }
.dust i:nth-child(2) { animation-delay: .43s; } .dust i:nth-child(3) { animation-delay: .86s; }
@keyframes puff { 0% { opacity: .7; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(-90px, -26px) scale(1.9); } }
.stage__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3, 16, 20, .72) 0%, rgba(3, 16, 20, .38) 40%, transparent 66%), linear-gradient(0deg, rgba(3, 16, 20, .45), transparent 36%); }

/* text block */
.stage__content { position: absolute; z-index: 5; left: clamp(22px, 4vw, 56px); bottom: calc(var(--road) + clamp(22px, 3vw, 40px)); max-width: min(560px, 54%); }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .8rem; font-weight: 700; margin-bottom: 18px; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(46, 196, 203, .3); animation: blink 1.8s infinite; }
@keyframes blink { 50% { box-shadow: 0 0 0 8px rgba(46, 196, 203, 0); } }
.hslides { display: grid; }
.hslide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.hslide.is-active { opacity: 1; visibility: visible; }
.hslide__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 3.05rem); line-height: 1.08; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.js [data-words]:not(.is-split) { opacity: 0; }
.no-anim [data-words] { opacity: 1 !important; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; }
.hslide.is-active .w > span { animation: word 1s var(--ease) both; animation-delay: calc(var(--i) * 75ms + .2s); }
@keyframes word { from { transform: translateY(112%); } to { transform: none; } }
.hslide__lead { max-width: 42ch; margin-top: 16px; color: #d6e6e7; }
.hslide__actions { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.hslide.is-active .hslide__lead { animation: rise .9s .55s var(--ease) both; }
.hslide.is-active .hslide__actions { animation: rise .9s .7s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hslide__actions .btn { padding: 16px 26px; }
.btn-circle { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: var(--ink); transition: background .3s, transform .4s var(--ease); }
.btn-circle:hover { background: var(--teal-bright); transform: rotate(45deg); }
.dots { display: none; gap: 8px; margin-top: 22px; }
.dots button { width: 9px; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, .4); transition: width .4s var(--ease), background .3s; }
.dots button.is-active { width: 28px; background: var(--teal-bright); }

/* next-slide card (bottom-right, like the reference) */
.next { position: absolute; z-index: 6; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 12px; width: 340px; padding: 9px 16px 9px 9px; border-radius: 18px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.next:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, .38); }
.next__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #e3eded; }
.next__bar i { display: block; height: 100%; background: var(--teal); transform-origin: left; transform: scaleX(0); animation: fill 7s linear forwards; }
.stage.is-paused .next__bar i { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.next__thumb { position: relative; flex: none; width: 76px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--teal-soft); }
.next__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.next__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 6, 6, .25); }
.next__play .ico { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .35s var(--ease); }
.next:hover .next__play .ico { transform: scale(1.15); }
.next__text { flex: 1; min-width: 0; line-height: 1.25; }
.next__text small { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
.next__text strong { display: block; font-size: .92rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next__count { font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.next__count b { font-size: 1rem; color: var(--ink); }

/* quick quote bar */
.quick { padding-top: 36px; }
.quickbar { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; align-items: center; gap: 4px; padding: 10px 10px 10px 12px; background: #fff; border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 18px 46px rgba(6, 40, 44, .1); }
.qf { display: block; padding: 6px 16px; border-radius: 14px; cursor: text; transition: background .25s; }
.qf:hover, .qf:focus-within { background: var(--mist); }
.qf + .qf { box-shadow: -1px 0 0 var(--line); }
.qf span { display: block; font-size: .72rem; font-weight: 800; color: var(--teal-deep); }
.qf input, .qf select { width: 100%; padding: 2px 0 0; font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink); background: transparent; border: 0; outline: 0; appearance: none; -webkit-appearance: none; }
.qf input::placeholder { color: #8da0a2; font-weight: 500; }

/* ============================================================
   INNER PAGES
   ============================================================ */
.stage--page { --road: 92px; height: clamp(330px, 46svh, 420px); }
.stage--page .rig { width: min(40%, 470px); bottom: calc(var(--road) * .5); }
.stage--page .rig--3 { width: min(54%, 640px); }
.stage--page .stage__content { bottom: calc(var(--road) + 22px); max-width: min(620px, 58%); }
.crumbs { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .8rem; font-weight: 700; }
.crumbs a { transition: color .25s; }
.crumbs a:hover { color: var(--teal-bright); }
.crumbs span:nth-child(2) { opacity: .55; }
.page-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.035em; color: #fff; text-wrap: balance; margin-top: 30px; }
.page-title .w > span { animation: word 1s var(--ease) both; animation-delay: calc(var(--i) * 75ms + .2s); }
.page-lead { max-width: 44ch; margin-top: 12px; color: #d6e6e7; animation: rise .9s .5s var(--ease) both; }

.h2--sm { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.more { margin-top: 40px; text-align: center; }
.btnrow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.textlink { font-weight: 800; color: var(--teal-deep); border-bottom: 2px solid var(--teal); padding-bottom: 2px; transition: color .25s; }
.textlink:hover { color: var(--ink); }
.note { margin-top: 40px; text-align: center; color: var(--muted); }

/* services page rows */
.srows { display: grid; gap: clamp(48px, 7vw, 96px); }
.srow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.srow--rev .srow__img { order: 2; }
.srow__img { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 4 / 3; background: var(--teal-soft); box-shadow: 0 20px 50px rgba(6, 40, 44, .14); }
.srow__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.srow:hover .srow__img img { transform: scale(1.05); }
.srow__img .svc__ico { left: 22px; bottom: 20px; width: 52px; height: 52px;; }
.srow__text > p { margin: 12px 0 18px; color: var(--muted); max-width: 50ch; }
.srow__text .ticks { margin-bottom: 26px; }

/* vehicles page grid */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.vitem { overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(6, 40, 44, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.vitem:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(6, 40, 44, .16); }
.vitem__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--teal-soft); }
.vitem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.vitem:hover .vitem__img img { transform: scale(1.07); }
.vitem__body { padding: 20px 22px 24px; }
.vitem__body p { margin-top: 6px; font-size: .94rem; color: var(--muted); }
.vitem__body .vitem__best { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; color: var(--ink); }
.vitem__best .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--teal); color: var(--ink); stroke-width: 3; }

/* about page values */
.vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
.val { padding: 28px 24px; background: #fff; border-radius: 22px; box-shadow: 0 1px 0 var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.val:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(6, 40, 44, .13); }
.val .ico { width: 50px; height: 50px; padding: 12px; margin-bottom: 18px; border-radius: 16px; background: var(--teal-soft); color: var(--teal-deep); transition: background .35s, color .35s, transform .5s var(--ease); }
.val:hover .ico { background: var(--teal); color: var(--ink); transform: rotate(-8deg); }
.val p { margin-top: 8px; font-size: .94rem; color: var(--muted); }

/* contact page */
.cpage { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.cinfo > p { margin: 12px 0 28px; color: var(--muted); max-width: 40ch; }
.clist { display: grid; gap: 12px; }
.clist li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: #fff; border-radius: 18px; box-shadow: 0 1px 0 var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.clist li:hover { transform: translateX(6px); box-shadow: 0 14px 34px rgba(6, 40, 44, .1); }
.clist__ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--teal); color: var(--ink); }
.clist small { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); }
.clist a, .clist span:not(.clist__ico) { font-weight: 800; color: var(--ink); }
.clist a:hover { color: var(--teal-deep); }
.qform__title { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; color: #fff; }
.f textarea { width: 100%; padding: 12px 15px; font: inherit; font-size: .95rem; color: #fff; background: rgba(255, 255, 255, .07); border: 1.5px solid transparent; border-radius: 14px; resize: vertical; min-height: 96px; transition: border-color .25s, background .25s, box-shadow .25s; }
.f textarea:focus { outline: 0; background: rgba(255, 255, 255, .12); border-color: var(--teal-bright); box-shadow: 0 0 0 4px rgba(46, 196, 203, .18); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* closing call-to-action band */
.ctaband { position: relative; overflow: clip; padding-block: clamp(48px, 6vw, 76px); background: var(--ink); color: #c4d3d4; }
.ctaband__slashes { position: absolute; inset: 0; pointer-events: none; }
.ctaband__slashes i { position: absolute; top: -20%; height: 150%; transform: skewX(-24deg); }
.ctaband__slashes i:nth-child(1) { right: 22%; width: 90px; background: rgba(26, 153, 159, .22); }
.ctaband__slashes i:nth-child(2) { right: 18.6%; width: 9px; background: rgba(255, 255, 255, .5); }
.ctaband__slashes i:nth-child(3) { right: 16.6%; width: 26px; background: var(--teal); }
.ctaband__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ctaband .h2 { color: #fff; max-width: 20ch; }
.ctaband p { margin-top: 10px; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { padding: 44px 0 0; }
.trust__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust li { display: flex; align-items: center; gap: 14px; }
.trust .ico { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-deep); transition: background .3s, color .3s, transform .4s var(--ease); }
.trust li:hover .ico { background: var(--teal); color: var(--ink); transform: rotate(-8deg) scale(1.06); }
.trust strong { display: block; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.trust span { display: block; font-size: .85rem; color: var(--muted); line-height: 1.3; }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 96px); align-items: center; }
.about__media { position: relative; padding-bottom: 64px; }
.about__img { overflow: hidden; border-radius: 26px; background: var(--teal-soft); }
.about__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.about__img--a { width: 86%; margin-left: auto; aspect-ratio: 5 / 4.2; }
.about__img--a img { object-position: 82% center; }
.about__img--b { position: absolute; left: 0; bottom: 0; width: 48%; aspect-ratio: 1; border: 8px solid #fff; border-radius: 24px; box-shadow: 0 24px 50px rgba(6, 6, 6, .22); }
.about__years { position: absolute; right: -14px; top: 34px; z-index: 2; padding: 16px 20px; max-width: 150px; border-radius: 18px; background: var(--teal); color: white; box-shadow: 0 16px 36px rgba(26, 153, 159, .4); animation: float 5s ease-in-out infinite; }
.about__years strong { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1; letter-spacing: -.05em; }
.about__years span { display: block; margin-top: 6px; font-size: .8rem; font-weight: 700; line-height: 1.3; }
@keyframes float { 50% { transform: translateY(-8px); } }
.about__text > p { margin: 16px 0 22px; color: var(--muted); max-width: 52ch; }
.ticks { display: grid; gap: 10px; margin-bottom: 28px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: .95rem; }
.ticks .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--teal); color: var(--ink); stroke-width: 3; }

/* ============================================================
   SERVICES
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.svc { position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(6, 40, 44, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.svc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.svc:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(6, 40, 44, .16); }
.svc:hover::after { transform: scaleX(1); }
.svc__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--teal-soft); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc:hover .svc__img img { transform: scale(1.08); }
.svc__ico { position: absolute; left: 20px; bottom: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--teal); color:white; box-shadow: 0 10px 22px rgba(0, 0, 0, .3); transition: background .35s, color .35s, transform .5s var(--ease); }
.svc:hover .svc__ico { background: var(--ink); color: white; transform: rotate(-10deg) scale(1.08); }
.svc__body { padding: 20px 22px 24px; }
.svc__body p { margin-top: 6px; font-size: .94rem; color: var(--muted); }
.svc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 800; font-size: .88rem; color: var(--teal-deep); }
.svc__link .ico { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.svc__link:hover .ico { transform: translateX(5px); }

/* ============================================================
   PARALLAX (why us + counters)
   ============================================================ */
.px { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space); color: #fff; background: var(--ink); }
.px__bg { position: absolute; inset: -18% 0; z-index: -2; background-size: cover; background-position: 85% 60%; will-change: transform; }
.px::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 6, 6, .9) 0%, rgba(6, 6, 6, .6) 55%, rgba(6, 6, 6, .25) 100%); }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.why .h2 { color: #fff; }
.why__text > p { margin: 14px 0 26px; max-width: 40ch; color: #b8c9ca; }
.counters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.counters > div { padding: 24px 22px; border-radius: 20px; background: rgba(6, 12, 13, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .35s, transform .5s var(--ease); }
.counters > div:hover { background: rgba(26, 153, 159, .3); transform: translateY(-5px); }
.counters dt { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -.05em; color: #fff; white-space: nowrap; }
.counters dt em { font-style: normal; color: var(--teal-bright); }
.counters dd { margin-top: 10px; font-size: .9rem; color: #b8c9ca; line-height: 1.35; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.steps::before { content: ''; position: absolute; top: 31px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, var(--teal) 0 10px, transparent 10px 18px); transform: scaleX(0); transform-origin: left; transition: transform 1.6s .2s var(--ease); }
.steps.drawn::before { transform: scaleX(1); }
.step { position: relative; }
.step__no { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--ink); color: var(--teal-bright); font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; box-shadow: 0 0 0 7px #fff, 0 0 0 9px var(--teal-soft); transition: background .35s, color .35s, transform .5s var(--ease); }
.step:hover .step__no { background: var(--teal); color: var(--ink); transform: scale(1.1) rotate(-6deg); }
.step p { margin: 6px auto 0; font-size: .94rem; color: var(--muted); max-width: 24ch; }

/* ============================================================
   FLEET SLIDER
   ============================================================ */
.slider { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.slider::-webkit-scrollbar { display: none; }
.vcard { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
.vcard__img { position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 14px; }
.vcard__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.vcard:hover .vcard__img img { transform: scale(1.08); }
.vcard__cap { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; background: var(--teal); color: var(--ink); font-size: .75rem; font-weight: 800; }
.vcard p { margin-top: 2px; font-size: .9rem; color: #9db1b2; }
.vcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; font-weight: 800; color: var(--teal-bright); }
.vcard__link .ico { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.vcard__link:hover .ico { transform: translateX(5px); }
.slider__bar { height: 3px; margin-top: 26px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.slider__bar i { display: block; height: 100%; width: 30%; border-radius: 2px; background: var(--teal-bright); transition: transform .15s linear; }

/* ============================================================
   AREAS
   ============================================================ */
.areas__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.areas__text > p { margin: 14px 0 26px; max-width: 42ch; color: var(--muted); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; font-size: .88rem; line-height: 1.3; transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--ease); }
.chips .ico { width: 20px; height: 20px; color: var(--teal); transition: color .3s; }
.chips strong { display: block; font-size: .95rem; line-height: 1.2; color: var(--ink); }
.chips small { display: block; font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--muted); transition: color .3s; }
.chips li:hover small { color: var(--ink); }
.chips li:hover { background: var(--teal); color: var(--ink); box-shadow: none; transform: translateX(6px); }
.chips li:hover .ico { color: var(--ink); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.rv { display: grid; max-width: 820px; margin-inline: auto; text-align: center; }
.rv__slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s; color: var(--muted); }
.rv__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.stars { display: flex; gap: 4px; color: var(--teal); }
.stars .ico { width: 24px; height: 24px; }
.rv blockquote { position: relative; margin-top: 20px; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.5; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rv figcaption { display: flex; align-items: center; gap: 14px; margin-top: 26px; text-align: left; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.rv figcaption strong { color: var(--ink); }
.avatar { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: var(--teal-bright); font-family: var(--font-head); font-weight: 700; }
.rv__ctrl { grid-area: 2 / 1; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.rv__dots { display: flex; gap: 8px; }
.rv__dots button { width: 10px; height: 10px; border-radius: 6px; background: rgba(6, 6, 6, .2); transition: width .4s var(--ease), background .3s; }
.rv__dots button.is-active { width: 30px; background: var(--teal); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.faq__intro { position: sticky; top: 120px; }
.faq__intro p { margin: 14px 0 24px; color: var(--muted); }
.acc__item { border-bottom: 1.5px solid var(--line); }
.acc__item:first-child { border-top: 1.5px solid var(--line); }
.acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; text-align: left; font-weight: 800; font-size: 1rem; color: var(--ink); transition: color .25s; }
.acc__btn:hover { color: var(--teal-deep); }
.acc__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius : 50%; background: var(--mist); transition: transform .4s var(--ease), background .3s; color
: var(--teal-deep)!important; }
.acc__item.is-open .acc__ico { transform: rotate(135deg); background: var(--teal); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 22px; max-width: 60ch; color: var(--muted); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { position: relative; overflow: clip; padding-block: var(--space); background: var(--teal); color: var(--ink); }
.contact__slashes { position: absolute; inset: 0; pointer-events: none; }
.contact__slashes i { position: absolute; top: -20%; height: 150%; transform: skewX(-24deg); }
.contact__slashes i:nth-child(1) { left: 44%; width: 100px; background: rgba(6, 6, 6, .08); }
.contact__slashes i:nth-child(2) { left: 48.5%; width: 12px; background: rgba(255, 255, 255, .6); }
.contact__slashes i:nth-child(3) { left: 51%; width: 36px; background: rgba(6, 6, 6, .85); }
.contact__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.contact .h2 {  color: white !important }
.contact__text > p { margin-top: 12px; max-width: 38ch; font-weight: 500; color: white !important; }
.contact__phone { display: inline-block; margin-top: 22px; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: -.04em; line-height: 1;  color: white !important; transition: letter-spacing .4s var(--ease); }
.contact__phone:hover { letter-spacing: -.01em; }
.contact__list { margin-top: 24px; display: grid; gap: 10px; font-weight: 700; font-size: .95rem ; color: white !important; }
.contact__list li { display: flex; gap: 12px; align-items: flex-start; }
.contact__list .ico { margin-top: 2px; width: 18px; height: 18px; }
.contact__list a { border-bottom: 2px solid rgba(6, 6, 6, .35); transition: border-color .25s; }
.contact__list a:hover { border-color: var(--ink); }
.qform { display: grid; gap: 12px; padding: clamp(20px, 3vw, 34px); background: var(--ink); color: #c4d3d4; border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); }
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f { display: block; }
.f span { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 700; color: #fff; }
.f input, .f select { width: 100%; min-height: 48px; padding: 12px 15px; font: inherit; font-size: .95rem; color: #fff; background: rgba(255, 255, 255, .07); border: 1.5px solid transparent; border-radius: 14px; transition: border-color .25s, background .25s, box-shadow .25s; color-scheme: dark; }
.f select option { color: #000; }
.f input::placeholder { color: #7f9496; }
.f input:focus, .f select:focus { outline: 0; background: rgba(255, 255, 255, .12); border-color: var(--teal-bright); box-shadow: 0 0 0 4px rgba(46, 196, 203, .18); }
.qform .btn { margin-top: 4px; padding-block: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: #9db1b2; padding-top: clamp(48px, 6vw, 80px); font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.footer__brand img { height: 64px; width: auto; margin-bottom: 12px; }
.footer__brand p { max-width: 32ch; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); color: #fff; transition: background .3s, color .3s, transform .35s var(--ease); }
.social a:hover { background: var(--teal); color: var(--ink); transform: translateY(-3px); }
.footer h2 { margin-bottom: 14px; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: #fff; }
.footer li { margin-bottom: 8px; }
.footer a { transition: color .25s; }
.footer a:hover { color: var(--teal-bright); }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact .ico { width: 17px; height: 17px; margin-top: 4px; color: var(--teal); }
.footer__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--teal); color: var(--ink); box-shadow: 0 10px 26px rgba(6, 6, 6, .4); transition: transform .35s var(--ease), background .3s; }
.wa::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal); animation: ring 2.8s infinite; }
.wa:hover { transform: scale(1.1); background: var(--teal-bright); }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ============================================================
   SCROLL REVEAL (JS adds .in)
   ============================================================ */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="left"]  { transform: translate3d(-44px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(44px, 0, 0); }
.js [data-reveal="zoom"]  { transform: scale(.9); }
.js [data-reveal].in, .no-anim [data-reveal] { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) { .topbar__info .topbar__hours { display: none; } }
@media (max-width: 1100px) {
  .vgrid { grid-template-columns: 1fr 1fr; }
  .vals { grid-template-columns: 1fr 1fr; }
  .quickbar { grid-template-columns: 1fr 1fr; padding: 12px; }
  .qf + .qf { box-shadow: none; }
  .qf { background: var(--mist); }
  .quickbar .btn { grid-column: 1 / -1; justify-content: space-between; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stage__content { max-width: min(520px, 56%); }
}
@media (max-width: 980px) {
  .burger { display: block; }
  .bar__cta { margin-left: auto; padding: 5px 5px 5px 16px; font-size: .84rem; }
  .bar__cta .btn__arrow { width: 30px; height: 30px; }
  .nav { position: fixed; inset: 0; z-index: 250; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; margin: 0; padding: 90px var(--pad) 40px; background: var(--ink); opacity: 0; visibility: hidden; clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .7s var(--ease), opacity .4s, visibility .7s; }
  .nav.is-open { opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 40px) 40px); }
  .nav__links { flex-direction: column; gap: 2px; padding: 0; background: none; }
  .nav__link { padding: 6px 0; border-radius: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; letter-spacing: -.03em; color: #fff; background: none !important; box-shadow: none !important; }
  .nav__link.is-active { color: var(--teal-bright); }
  .nav__phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: #fff; }
  .nav__phone .ico { color: var(--teal-bright); }
  .grid { grid-template-columns: 1fr 1fr; }
  .about__grid, .why__grid, .areas__grid, .faq, .contact__grid, .cpage, .srow { grid-template-columns: 1fr; }
  .srow--rev .srow__img { order: 0; }
  .stage--page .stage__content { max-width: min(560px, 62%); }
  .about__media { max-width: 560px; }
  .faq__intro { position: static; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .steps::before { display: none; }
  .trust__list { grid-template-columns: 1fr 1fr; }
  .contact__slashes i:nth-child(1) { left: 72%; } .contact__slashes i:nth-child(2) { left: 77%; } .contact__slashes i:nth-child(3) { left: 79.5%; }
}
@media (max-width: 760px) {
  .topbar { font-size: .8rem; }
  .topbar__in { min-height: 40px; }
  .topbar__info li:first-child, .topbar__info .topbar__alt { display: none; }
  .topbar__info li + li { margin-left: 0; padding-left: 0; box-shadow: none; }
  .topbar__mail { display: none !important; }
  .top { padding: 8px 8px 0; }
  .top__card { padding: 82px 8px 8px; border-radius: 24px 24px 0 0; }
  .site-nav { top: 16px; width: min(100% - 32px, 1456px); }
  .stage { --road: 96px; height: auto; min-height: 660px; border-radius: 20px; }
  .stage__content { left: 20px; right: 20px; top: 26px; bottom: auto; max-width: none; }
  .stage__shade { background: linear-gradient(180deg, rgba(3, 16, 20, .82) 0%, rgba(3, 16, 20, .55) 42%, transparent 70%); }
  .hslide__title { font-size: clamp(1.5rem, 7.4vw, 2rem); }
  .hslide__lead { font-size: .95rem; }
  .dots { display: flex; }
  .rig { width: min(94%, 520px); right: 3%; bottom: calc(var(--road) * .52); }
  .rig--3 { width: min(118%, 640px); right: 0; }
  .next { display: none; }
  .orb { --oy: 38%; }
  .stage[data-s="2"] .orb { --oy: 36%; } .stage[data-s="3"] .orb { --oy: 38%; }
  .layer--clouds { top: 36%; }
  .quickbar, .trust__list, .grid, .steps, .chips, .qform__row, .footer__grid, .vgrid, .vals { grid-template-columns: 1fr; }
  .stage--page { height: auto; min-height: 400px; }
  .stage--page .stage__content { max-width: none; }
  .stage--page .rig, .stage--page .rig--3 { width: min(92%, 440px); right: 3%; }
  .stage--page .rig--3 { width: min(116%, 560px); right: 0; }
  .counters { grid-template-columns: 1fr 1fr; }
  .head--row { align-items: center; }
  .head--row .arrows { display: none; }
  .about__years { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .rig.is-in { transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .next__bar i { animation: none; transform: scaleX(1); }
}
/* white text on these two buttons */
.bar__cta { color: #fff; }
.hslide__actions .btn[href="services.php"] { color: #fff; }




/* real truck: sit on the road like the illustrated truck */
.rig--real, .rig--real.rig--3 { width: min(52%, 640px); bottom: calc(var(--road) * .5 + 26px); }
.stage--page .rig--real, .stage--page .rig--real.rig--3 { width: min(44%, 540px); bottom: calc(var(--road) * .5 + 22px); }
@media (max-width: 760px) {
  .rig--real, .rig--real.rig--3 { width: min(92%, 500px); right: 4%; bottom: calc(var(--road) * .52 + 18px); }
  .stage--page .rig--real, .stage--page .rig--real.rig--3 { width: min(92%, 440px); right: 3%; bottom: calc(var(--road) * .5 + 14px); }
}


/* ---- Back to top button ---- */
.totop { position: fixed; right: 20px; bottom: 84px; z-index: 149; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--teal-bright); box-shadow: 0 10px 26px rgba(6, 6, 6, .35); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.7); transition: opacity .35s var(--ease), transform .55s cubic-bezier(.34, 1.56, .64, 1), visibility .35s, background .3s, color .3s; }
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--teal); color: var(--ink); transform: translateY(-4px) scale(1.06); }
.totop:active { transform: scale(.94); }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.totop__ring circle { fill: none; stroke-width: 2.5; }
.totop__track { stroke: rgba(255, 255, 255, .18); }
.totop__bar { stroke: var(--teal-bright); stroke-linecap: round; transition: stroke-dashoffset .12s linear, stroke .3s; }
.totop:hover .totop__bar { stroke: var(--ink); }
.totop:hover .totop__track { stroke: rgba(6, 6, 6, .25); }
.totop__arrow { width: 22px; height: 22px; stroke-width: 2.4; transform: rotate(-90deg); animation: totop-nudge 1.8s ease-in-out infinite; }
.totop:hover .totop__arrow { animation-duration: .7s; }
@keyframes totop-nudge { 0%, 100% { transform: rotate(-90deg) translateX(0); } 50% { transform: rotate(-90deg) translateX(-3px); } }
.totop.is-going .totop__arrow { animation: totop-launch .7s cubic-bezier(.5, 0, .3, 1); }
@keyframes totop-launch {
  0%   { transform: rotate(-90deg) translateX(0); opacity: 1; }
  45%  { transform: rotate(-90deg) translateX(34px); opacity: 0; }
  46%  { transform: rotate(-90deg) translateX(-34px); opacity: 0; }
  100% { transform: rotate(-90deg) translateX(0); opacity: 1; }
}
@media (max-width: 760px) { .totop { right: 17px; bottom: 78px; width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .totop, .totop__arrow { animation: none !important; transition-duration: .01ms !important; } }



/* more breathing room inside the navbar (logo and button no longer touch the edges) */
.bar { padding: 9px 14px 9px 28px; }
.bar__logo img { height: 46px; }
@media (max-width: 980px) {
  .bar { padding: 8px 10px 8px 20px; gap: 10px; }
  .bar__logo img { height: 42px; }
  .burger, .bar__logo { flex: none; }
}
@media (max-width: 380px) {
  .bar__cta { padding-left: 12px; font-size: .8rem; gap: 8px; }
  .bar__cta .btn__arrow { width: 28px; height: 28px; }
}
@media (max-width: 340px) {
  .bar__cta .btn__arrow { display: none; }
  .bar__cta { padding: 12px 14px; }
}


/* ============================================================
   SERVICES WE OFFER (colour band)
   ============================================================ */
.svcband { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space); background: var(--teal-deep); color: #fff; }
.svcband__slashes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.svcband__slashes i { position: absolute; top: -20%; height: 150%; transform: skewX(-24deg); }
.svcband__slashes i:nth-child(1) { left: 36%; width: 130px; background: rgba(255, 255, 255, .05); }
.svcband__slashes i:nth-child(2) { left: 41.5%; width: 10px; background: rgba(46, 196, 203, .55); }
.svcband__slashes i:nth-child(3) { left: 43.6%; width: 32px; background: rgba(6, 6, 6, .3); }
.svcband__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.svcband__label { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 16px; font-weight: 800; font-size: .95rem; color: var(--teal-bright); }
.svcband__label::before { content: ''; width: 34px; height: 3px; background: var(--teal-bright); transform: skewX(-24deg); }
.svcband .h2 { color: #fff; max-width: 16em; }
.svcband__text { margin-bottom: 26px; max-width: 62ch; font-size: 1.06rem; line-height: 1.85; color: #e3f3f4; }
.textlink--light { color: #fff; border-bottom-color: var(--teal-bright); }
.textlink--light:hover { color: var(--teal-bright); }

/* ============================================================
   ARTICLES
   ============================================================ */
.arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.arts--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.art { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(6, 40, 44, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.art:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(6, 40, 44, .16); }
.art__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--teal-soft); }
.art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.art:hover .art__img img { transform: scale(1.07); }
.art__tag { position: absolute; left: 14px; top: 14px; padding: 6px 13px; border-radius: 999px; color:white; background: var(--teal); font-size: .75rem; font-weight: 800; }
.art__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.art__meta { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--muted); }
.art__meta .ico { width: 17px; height: 17px; color: var(--teal-deep); }
.art h3 { margin-top: 10px; font-size: 1.05rem; line-height: 1.38; }
.art h3 a { transition: color .25s; }
.art h3 a:hover { color: var(--teal-deep); }
.art__excerpt { margin-top: 8px; font-size: .94rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art .svc__link { margin-top: auto; padding-top: 16px; }

/* article page */
.apage { max-width: 800px; margin-inline: auto; }
.apage__cover { overflow: hidden; border-radius: 26px; aspect-ratio: 16 / 9; margin-bottom: clamp(28px, 4vw, 44px); box-shadow: 0 20px 50px rgba(6, 40, 44, .14); }
.apage__cover img { width: 100%; height: 100%; object-fit: cover; }
.prose p { margin-bottom: 18px; font-size: 1.05rem; line-height: 1.85; color: #33454a; }
.prose h2 { margin: 36px 0 14px; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.025em; line-height: 1.25; color: var(--ink); }
.prose ul { display: grid; gap: 12px; margin: 0 0 22px; }
.prose li { position: relative; padding-left: 32px; line-height: 1.7; color: #33454a; }
.prose li::before { content: ''; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060606' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.apage__cta { margin-top: 36px; padding-top: 28px; border-top: 2px solid var(--line); }

@media (max-width: 980px) {
  .svcband__grid { grid-template-columns: 1fr; }
  .arts { grid-template-columns: 1fr 1fr; }
  .svcband__slashes i:nth-child(1) { left: 66%; } .svcband__slashes i:nth-child(2) { left: 72%; } .svcband__slashes i:nth-child(3) { left: 74.4%; }
}
@media (max-width: 640px) { .arts, .arts--two { grid-template-columns: 1fr; } }
.head--row > .textlink { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 0; border-bottom: 0; }
.head--row > .textlink .btn__arrow { background: var(--teal); color: var(--ink); }


/* ---- inner-page banner: text stays inside the card with space from the top ---- */
.stage--page .stage__content { top: 34px; bottom: calc(var(--road) + 22px); display: flex; flex-direction: column; justify-content: flex-end; max-width: min(640px, 56%); }
.stage--page .crumbs { align-self: flex-start; }
.page-title--long { font-size: clamp(1.2rem, 2.2vw, 1.85rem); }
@media (max-width: 1100px) { .stage--page .stage__content { max-width: 48%; } .page-title { font-size: clamp(1.25rem, 3vw, 1.9rem); } .page-title--long { font-size: clamp(1.1rem, 2.5vw, 1.5rem); } }
@media (max-width: 760px) {
  .stage--page { min-height: 440px; }
  .stage--page .stage__content { top: 26px; bottom: auto; max-width: none; display: block; }
}

/* ---- inner-page banner: one clean rule set. Grows with long titles and always keeps space at the top ---- */
.stage--page { height: auto; min-height: clamp(330px, 46svh, 420px); display: flex; align-items: flex-end; }
.stage--page .stage__content { position: relative; left: auto; top: auto; bottom: auto; display: block; margin: 0 0 calc(var(--road) + 22px) clamp(22px, 4vw, 56px); padding-top: 52px; max-width: min(620px, 56%); }
.stage--page .crumbs { align-self: flex-start; }
.page-title { font-size: clamp(1.45rem, 2.8vw, 2.3rem); }
.page-title--long { font-size: clamp(1.2rem, 2.3vw, 1.9rem); line-height: 1.14; }
@media (max-width: 1100px) { .stage--page .stage__content { max-width: 50%; } .page-title { font-size: clamp(1.25rem, 3vw, 1.9rem); } .page-title--long { font-size: clamp(1.1rem, 2.5vw, 1.5rem); } }
@media (max-width: 760px) {
  .stage--page { align-items: flex-start; padding-bottom: 215px; min-height: 0; }
  .stage--page .stage__content { margin: 0 20px; padding-top: 30px; max-width: none; }
}

/* ============================================================
   SERVICES MEGA MENU (hover on desktop, accordion on phones)
   ============================================================ */
.nav__drop { position: relative; display: flex; align-items: center; }
.nav__drop > .nav__link { display: inline-flex; align-items: center; gap: 6px; }
.nav__chev { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .3s var(--ease); }
.nav__drop:hover .nav__chev { transform: rotate(-90deg); }
.nav__tg, .mega__tg { display: none; }
.nav__drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
.mega { position: absolute; z-index: 20; top: calc(100% + 16px); left: -26px; width: 300px; background: #fff; border-radius: 18px; border-top: 3px solid var(--teal); box-shadow: 0 26px 64px rgba(6, 40, 44, .2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.nav__drop:hover .mega, .nav__drop:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__l { padding: 6px 0; }
.mega__item > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px; font-weight: 700; font-size: .95rem; color: var(--ink); border-bottom: 1px solid var(--line); transition: background .25s, color .25s, padding .3s var(--ease); }
.mega__item:last-child > a { border-bottom: 0; }
.mega__item > a .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.mega__item.is-active > a { background: var(--teal); color: #fff; padding-left: 26px; }
.mega__item.is-active > a .ico { transform: translateX(3px); }
.mega__r { position: absolute; left: 100%; top: -3px; width: 340px; min-height: calc(100% + 3px); padding: 6px 0; background: #fff; border-radius: 0 18px 18px 0; border-top: 3px solid var(--teal); box-shadow: 0 26px 64px rgba(6, 40, 44, .2); opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s; }
.mega__item.is-active > .mega__r { opacity: 1; visibility: visible; transform: none; }
.mega__r a { display: block; padding: 14px 24px; font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--ink); border-bottom: 1px solid var(--line); transition: color .25s, padding .3s var(--ease), background .25s; }
.mega__r a:hover { color: var(--teal-deep); background: var(--mist); padding-left: 30px; }
.mega__r .mega__all a { border-bottom: 0; font-weight: 800; color: var(--teal-deep); }

/* ============================================================
   CITY SERVICE PAGE (sidebar + content)
   ============================================================ */
.spage { display: grid; grid-template-columns: 330px 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.spage__cover { overflow: hidden; border-radius: 26px; aspect-ratio: 16 / 9; margin-bottom: clamp(24px, 3vw, 40px); box-shadow: 0 20px 50px rgba(6, 40, 44, .14); }
.spage__cover img { width: 100%; height: 100%; object-fit: cover; }
.spage__img2 { overflow: hidden; border-radius: 20px; max-width: 520px; aspect-ratio: 16 / 10; margin: 8px 0 26px; box-shadow: 0 16px 40px rgba(6, 40, 44, .12); }
.spage__img2 img { width: 100%; height: 100%; object-fit: cover; }
.spage__main .acc { margin-bottom: 8px; }
.prose a.textlink { font-weight: 700; }
.sbar { position: sticky; top: 110px; order: -1; display: grid; gap: 20px; }
.sbox { padding: 18px 10px 12px; background: var(--mist); border-radius: 22px; }
.sbox h2 { padding: 0 14px 8px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; letter-spacing: -.02em; color: var(--ink); }
.sbox:not(.sbox--cta) li a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-weight: 700; font-size: .9rem; line-height: 1.35; color: var(--ink); transition: background .25s, color .25s, padding .3s var(--ease); }
.sbox:not(.sbox--cta) li a::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2.5px solid var(--teal); border-top: 2.5px solid var(--teal); transform: rotate(45deg); }
.sbox:not(.sbox--cta) li a:hover { background: #fff; color: var(--teal-deep); padding-left: 20px; }
.sbox--cta { padding: 26px 24px 26px; background: var(--teal-deep); color: #e3f3f4; }
.sbox--cta h2 { padding: 0; margin-bottom: 8px; font-size: 1.15rem; color: #fff; }
.sbox--cta p { font-size: .94rem; }
.sbox__list { display: grid; gap: 12px; margin: 18px 0 22px; font-weight: 600; font-size: .93rem; }
.sbox__list li { display: flex; gap: 12px; align-items: flex-start; }
.sbox__list .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--teal-bright); }
.sbox__list a:hover { color: var(--teal-bright); }
.sbox--cta .btn--white { background: #fff; color: var(--teal-deep); padding: 14px 24px; gap: 10px; }
.sbox--cta .btn--white:hover { background: var(--mist); }
.sbox__quote { display: inline-block; margin-top: 16px; font-weight: 800; font-size: .9rem; border-bottom: 2px solid var(--teal-bright); color: #fff; }

@media (max-width: 980px) {
  .spage { grid-template-columns: 1fr; }
  .sbar { position: static; order: 0; }

  /* mobile menu: services become an accordion */
  .nav { justify-content: flex-start; overflow-y: auto; padding-top: 96px; }
  .nav__links { width: 100%; }
  .nav__drop { flex-wrap: wrap; width: 100%; }
  .nav__drop > .nav__link { flex: 1; }
  .nav__chev { display: none; }
  .nav__tg, .mega__tg { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: transform .35s var(--ease), background .3s; }
  .nav__tg[aria-expanded="true"], .mega__tg[aria-expanded="true"] { transform: rotate(45deg); background: var(--teal); color: var(--ink); }
  .nav__drop::after { display: none; }
  .mega, .mega__r { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; border-radius: 0; padding: 0; min-height: 0; display: none; }
  .nav__drop.is-open > .mega { display: block; }
  .mega__l { padding: 0 0 8px 6px; }
  .mega__item { display: flex; flex-wrap: wrap; align-items: center; }
  .mega__item > a { flex: 1; padding: 11px 6px; border: 0; color: #cfe0e1; font-size: 1.05rem; background: none !important; }
  .mega__item > a .ico { display: none; }
  .mega__item.is-active > a { background: none; color: #fff; padding-left: 6px; }
  .mega__item.is-open > .mega__r { display: block; width: 100%; padding: 0 0 8px 10px; }
  .mega__r a { padding: 9px 4px; border: 0; color: #8fb0b2; font-size: .95rem; }
  .mega__r a:hover { background: none; color: var(--teal-bright); padding-left: 4px; }
  .mega__r .mega__all a { color: var(--teal-bright); }
}
.chips li > a { display: flex; align-items: center; gap: 12px; width: 100%; }
.chips li:has(> a) { padding: 0; }
.chips li > a { padding: 12px 16px; }


/* small dropdown arrow next to Services */
.nav__chev { width: 12px; height: 12px; margin-left: 1px; stroke-width: 2.8; transform: none; color:black; transition: transform .3s var(--ease); }
.nav__drop:hover .nav__chev, .nav__drop:focus-within .nav__chev { color:black; transform: rotate(180deg); }

@media (min-width: 761px) {
  #stage:has(.rig--real) { --road: 205px; height: clamp(610px, 86svh, 780px); }
  #stage .rig--real, #stage .rig--real.rig--3 { bottom: 108px; }
}
@media (max-width: 760px) {
  #stage:has(.rig--real) { --road: 150px; }
  #stage .rig--real, #stage .rig--real.rig--3 { bottom: 66px; }
}
/* contact shadows under every tyre (positions follow the wheels in the photo) */
.rig--real::after { inset: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: 0; filter: blur(3px);
  background:
    radial-gradient(ellipse 7% 2.4% at 6.3% 76.5%, rgba(0,0,0,.62), transparent 70%),
    radial-gradient(ellipse 7% 2.4% at 13.2% 78.2%, rgba(0,0,0,.62), transparent 70%),
    radial-gradient(ellipse 8% 2.6% at 36.5% 89%, rgba(0,0,0,.6), transparent 70%),
    radial-gradient(ellipse 8% 2.6% at 44.5% 92.6%, rgba(0,0,0,.6), transparent 70%),
    radial-gradient(ellipse 9% 3% at 63.8% 96.6%, rgba(0,0,0,.65), transparent 70%); }

    /* =====================================================================
   REALISTIC HERO SCENE: sky, sun with glow and rays, haze, textured road
   ===================================================================== */
/* richer skies */
.sky--1 { background: radial-gradient(120% 70% at 62% 62%, rgba(255, 196, 120, .55), transparent 60%), linear-gradient(180deg, #0c2a44 0%, #1d5f7c 34%, #5b9fa8 58%, #f0b684 82%, #ffd9a0 100%); }
.sky--2 { background: radial-gradient(90% 60% at 70% 8%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(180deg, #1f78c4 0%, #52a6e0 38%, #a9d7f2 68%, #e9f7fd 100%); }
.sky--3 { background: radial-gradient(70% 50% at 78% 14%, rgba(150, 200, 225, .22), transparent 62%), linear-gradient(180deg, #020611 0%, #08192d 42%, #0f3446 74%, #1f5c68 100%); }

/* the sun: bright core, soft bloom, slow light rays */
.orb { --ox: 58%; --oy: 36%; width: clamp(62px, 5.6vw, 88px); background: radial-gradient(circle, #fffef7 0 52%, #ffecb0 76%, rgba(255, 214, 128, 0) 100%); box-shadow: 0 0 40px 18px rgba(255, 235, 170, .55); }
.orb::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1100%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; opacity: .75; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 244, 205, .22) 0 4deg, rgba(255, 244, 205, 0) 4deg 15deg, rgba(255, 244, 205, .13) 15deg 17deg, rgba(255, 244, 205, 0) 17deg 29deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 60%); mask: radial-gradient(circle, #000 4%, transparent 60%); animation: rays 140s linear infinite; }
.orb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 760%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 228, 160, .62) 0%, rgba(255, 190, 110, .26) 26%, rgba(255, 170, 90, .1) 46%, rgba(255, 170, 90, 0) 66%); }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.stage[data-s="1"] .orb { --ox: 56%; --oy: 38%; }
.stage[data-s="2"] .orb { --ox: 70%; --oy: 10%; background: radial-gradient(circle, #fff 0 56%, #fffbe8 80%, rgba(255, 255, 255, 0) 100%); box-shadow: 0 0 50px 22px rgba(255, 255, 255, .7); }
.stage[data-s="2"] .orb::after { background: radial-gradient(circle, rgba(255, 255, 255, .6) 0%, rgba(210, 235, 255, .3) 28%, rgba(210, 235, 255, 0) 64%); }
.stage[data-s="3"] .orb { --ox: 78%; --oy: 12%; background: radial-gradient(circle at 36% 34%, #ffffff 0, #e9f1f5 52%, #b3c7d3 100%); box-shadow: 0 0 34px 10px rgba(170, 210, 230, .35), inset -9px -7px 14px rgba(120, 150, 170, .35); }
.stage[data-s="3"] .orb::before { opacity: 0; }
.stage[data-s="3"] .orb::after { background: radial-gradient(circle, rgba(170, 210, 235, .34) 0%, rgba(170, 210, 235, .12) 32%, rgba(170, 210, 235, 0) 62%); }



/* soft vignette that keeps the text readable */
.stage__shade { background: linear-gradient(90deg, rgba(3, 14, 20, .66) 0%, rgba(3, 14, 20, .3) 40%, transparent 66%), radial-gradient(120% 110% at 62% 42%, transparent 52%, rgba(2, 8, 14, .38) 100%), linear-gradient(0deg, rgba(3, 14, 20, .4), transparent 36%); }
@media (prefers-reduced-motion: reduce) { .orb::before { animation: none; } }
/* phones: keep the sun clear of the text and button */
@media (max-width: 760px) {
  .stage[data-s="1"] .orb { --ox: 70%; --oy: 5%; }
  .stage[data-s="2"] .orb { --ox: 72%; --oy: 5%; }
  .stage[data-s="3"] .orb { --ox: 74%; --oy: 6%; }
  .orb::before { opacity: .3; }
}


/* ---- mega menu: the city list opens only for the service you hover (nothing is pre-opened) ---- */
@media (min-width: 981px) {
  .mega__item > a { background: none; color: var(--ink); padding-left: 22px; }
  .mega__item > .mega__r { opacity: 0; visibility: hidden; transform: translateX(-8px); }
  .mega__item:hover > a, .mega__item:focus-within > a { background: var(--teal); color: #fff; padding-left: 26px; }
  .mega__item:hover > a .ico, .mega__item:focus-within > a .ico { transform: translateX(3px); }
  .mega__item:hover > .mega__r, .mega__item:focus-within > .mega__r { opacity: 1; visibility: visible; transform: none; }
}

/* ---- phones: the full-screen menu must not be trapped inside the navbar, and the navbar stays visible ---- */
@media (max-width: 980px) {
  .site-nav.is-solid .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }   /* blur would shrink the fixed menu to the size of the bar */
  .site-nav.is-hidden { top: 24px; }                                                                    /* never slide the navbar away on phones */
}
@media (max-width: 760px) { .site-nav.is-hidden { top: 16px; } }


/* ---- inner-page banners with the real truck: deeper road, wheels on the road, nothing cut off ---- */
.stage--page:has(.rig--real) { --road: 170px; min-height: clamp(410px, 52svh, 470px); }
.stage--page .rig--real, .stage--page .rig--real.rig--3 { width: min(42%, 500px); bottom: 88px; }
@media (max-width: 1100px) { .stage--page .rig--real, .stage--page .rig--real.rig--3 { width: min(46%, 430px); } }
@media (max-width: 760px) {
  .stage--page:has(.rig--real) { --road: 150px; padding-bottom: 305px; min-height: 0; }
  .stage--page .rig--real, .stage--page .rig--real.rig--3 { width: min(86%, 420px); right: 5%; bottom: 62px; }
}

/* =====================================================================
   PHONE MENU: logo + square toggle in the bar, dark dropdown panel under it
   (replaces the full-screen overlay on screens up to 980 px)
   ===================================================================== */
@media (max-width: 980px) {
  .bar { position: relative; }

  /* square toggle: outlined, turns solid teal when the menu is open */
  .burger { width: 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px var(--teal); transition: background .3s, box-shadow .3s; }
  .burger span { background: var(--teal-deep); left: 12px; right: 12px; }
  .burger.is-open { background: var(--teal); box-shadow: none; }
  .burger.is-open span { background: var(--ink); }

  /* the panel */
  .nav { position: absolute; inset: auto; top: calc(100% + 10px); left: 0; right: 0; z-index: 30; width: auto; height: auto; max-height: calc(100svh - 130px); overflow-y: auto; margin: 0; padding: 0; gap: 0; flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: #0b1415; border-radius: 18px; box-shadow: 0 24px 60px rgba(6, 40, 44, .35); clip-path: none; opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s; }
  .nav.is-open { clip-path: none; opacity: 1; visibility: visible; transform: none; }
  .nav__links { width: 100%; padding: 0; gap: 0; background: none; border-radius: 0; flex-direction: column; }

  /* rows: small uppercase text with thin dividers */
  .nav__link { display: block; width: 100%; padding: 17px 20px; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: none !important; box-shadow: none !important; }
  .nav__links > .nav__link:first-child { border-top: 0; }
  .nav__link.is-active { color: var(--teal-bright); }
  .nav__link:hover { color: var(--teal-bright); }

  /* Services row with a square "+" box on the right */
  .nav__drop { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; border-top: 1px solid rgba(255, 255, 255, .1); }
  .nav__drop > .nav__link { flex: 1; width: auto; border-top: 0; }
  .nav__tg, .mega__tg { display: grid; place-items: center; flex: none; width: 58px; border-radius: 0; background: rgba(255, 255, 255, .06); border-left: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background .3s, color .3s; }
  .nav__tg .ico, .mega__tg .ico { width: 18px; height: 18px; stroke-width: 2.6; transition: transform .35s var(--ease); }
  .nav__tg[aria-expanded="true"], .mega__tg[aria-expanded="true"] { transform: none; background: var(--teal); color: var(--ink); }
  .nav__tg[aria-expanded="true"] .ico, .mega__tg[aria-expanded="true"] .ico { transform: rotate(45deg); }

  /* services and cities inside the panel */
  .mega { background: #0f1c1e; }
  .mega__l { padding: 0; }
  .mega__item { display: flex; flex-wrap: wrap; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, .07); }
  .mega__item > a { flex: 1; padding: 15px 20px 15px 32px; border: 0; font-weight: 600; font-size: .9rem; letter-spacing: 0; text-transform: none; color: #d6e6e7; background: none !important; }
  .mega__item.is-open > .mega__r { background: #0a1517; padding: 4px 0; }
  .mega__r a { padding: 12px 20px 12px 46px; font-size: .86rem; font-weight: 600; color: #93b2b4; border: 0; }
  .mega__r a:hover { color: var(--teal-bright); background: none; padding-left: 46px; }
  .mega__r .mega__all a { color: var(--teal-bright); font-weight: 800; }
  .mega__tg { width: 52px; }

  /* phone number as the last row */
  .nav__phone { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-weight: 800; font-size: .95rem; color: #fff; }
  .nav__phone .ico { color: var(--teal-bright); }
}

/* FAQ "+" buttons: solid dark circle with a white plus (change var(--ink) to var(--teal) for a teal one) */
.acc__ico { background: var(--ink); color: #fff; }
.acc__ico .ico { color: #fff; stroke: #fff; }
.acc__btn:hover .acc__ico { background: var(--teal); }
.acc__item.is-open .acc__ico { background: var(--teal); }