/* דף הבית: מסך טעינה, הירו עם הגדלת כותרת בגלילה, שירותים עם החלפת תמונה, למה אנחנו,
   שלושת השלבים, גלריה רציפה, המלצות ופריסה ארצית. נשען על הטוקנים של style.css. */

/* ===== Loader (first visit in a session) ===== */
.loader { display: none; }
html.show-loader .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(800px 400px at 50% 30%, rgba(31,99,214,.22), transparent 65%), var(--charcoal);
  color: #fff; transition: opacity .55s ease, transform .55s cubic-bezier(.6,0,.4,1);
  /* fail-safe: the page is never hidden for long, even if the script fails */
  animation: ldFailsafe .01s 4.5s forwards;
}
html.show-loader .loader.done { opacity: 0; transform: translateY(-3%); pointer-events: none; }
@keyframes ldFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.ld-inner { width: min(460px, calc(100vw - 48px)); display: grid; gap: 18px; justify-items: center; text-align: center; }
.ld-logo { height: 64px; width: auto; background: #fff; border-radius: 12px; padding: 6px 10px; }
.ld-msg { font: 800 clamp(24px, 4.6vw, 32px)/1.25 var(--font-display); }
.ld-msg span { display: block; color: #8fb6ff; font-weight: 700; font-size: .72em; margin-top: 4px; }
.ld-road {
  --lp: 0; position: relative; width: 100%; height: 34px; margin-top: 8px;
  border-bottom: 3px solid rgba(255,255,255,.18);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 14px, transparent 14px 26px) bottom 9px left 0 / 100% 2px no-repeat;
}
.ld-fill { position: absolute; right: 0; bottom: -3px; height: 3px; width: calc(var(--lp) * 100%); background: #8fb6ff; border-radius: 3px; }
.ld-van {
  position: absolute; bottom: 2px; right: calc(var(--lp) * (100% - 44px)); width: 44px; height: 32px; color: #fff;
  transform: scaleX(-1);
}
.ld-van svg { width: 44px; height: 32px; }
.ld-flag { position: absolute; left: -6px; bottom: 4px; width: 26px; height: 26px; color: var(--star); }
.ld-flag svg { width: 26px; height: 26px; }
.ld-pct { font: 800 18px var(--font-display); color: #c9d0d4; font-variant-numeric: tabular-nums; }
html.show-loader:not(.loaded) .hero-fade, html.show-loader:not(.loaded) .hero-title > * { animation-play-state: paused !important; }

/* ===== Hero ===== */
.hero-zone { position: relative; background: var(--charcoal); }
.hero2 {
  position: relative; overflow: hidden; color: #fff; background:
    radial-gradient(1000px 520px at 85% 15%, rgba(31,99,214,.24), transparent 60%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 24px 24px,
    var(--charcoal);
  display: grid; align-content: center;
  min-height: clamp(560px, calc(100svh - var(--head-h, 77px)), 900px);
  padding-block: 48px 96px;
}
.hero2-bg { position: absolute; inset: 0; pointer-events: none; }
.hero2-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero2-lines path { fill: none; stroke: rgba(143,182,255,.16); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; }
.hero2-grid { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero2-grid { grid-template-columns: 1.05fr .95fr; } }
.hero2-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.hero-title { display: inline-block; font-weight: 800; transform-origin: 50% 50%; will-change: transform; }
.hero-title .ht-main > span { display: block; }
.hero-title .ht-main { display: block; font-size: calc(clamp(42px, 6.4vw, 84px) * var(--fs, 1)); line-height: 1.02; letter-spacing: -.015em; }
.hero-title em { display: block; font-style: normal; color: #8fb6ff; font-weight: 700; font-size: calc(clamp(22px, 2.8vw, 36px) * var(--fs, 1)); margin-top: 10px; }
.hero2 .lead { font-size: calc(19px * var(--fs, 1)); color: #d6dde1; max-width: 32em; line-height: 1.7; }
.hero2 .cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero2-visual { position: relative; min-width: 0; padding: 18px 0 30px; }
.hv-frame {
  position: relative; border-radius: 28px 28px 28px 120px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px rgba(0,0,0,.45); max-width: 600px; margin-inline-start: auto;
}
.hv-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(20,24,27,.55)); }
.hv-photo { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; display: block; }
.hv-chip {
  position: absolute; background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 16px 34px rgba(0,0,0,.3);
  padding: 12px 16px; display: grid; gap: 2px;
}
.hv-rate { top: 0; left: 6%; justify-items: center; }
.hv-rate .stars { color: var(--star); letter-spacing: 2px; font-size: 14px; }
.hv-rate b { font: 800 30px/1 var(--font-display); }
.hv-rate small { color: var(--muted); font-weight: 700; font-size: 13px; }
.hv-route {
  bottom: 0; right: -4%; grid-template-columns: auto 120px auto; align-items: center; gap: 10px;
  font: 700 14px var(--font-display);
}
.hv-from { color: var(--ink); }
.hv-to { color: var(--accent); }
.hv-road { position: relative; height: 24px; border-bottom: 2px dashed var(--steel); }
.hv-van { position: absolute; bottom: 2px; right: 0; width: 30px; height: 22px; color: var(--accent); transform: scaleX(-1); }
.hv-van svg { width: 30px; height: 22px; }
@media (max-width: 979px) {
  .hv-frame { margin-inline: auto; border-radius: 22px 22px 22px 80px; }
  .hv-route { right: 2%; }
}

.hero2-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
}
.hero2-road .lane {
  --roll: 0px; position: absolute; left: 0; right: 0; bottom: 26px; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 34px, transparent 34px 70px);
  background-position: var(--roll) 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* fill-mode backwards: once the entrance ends, the scroll-linked inline styles take over */
  .hero-fade, .hero-title > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-title .ht-main { animation-delay: .08s; }
  .hero-title em { animation-delay: .16s; }
  .hero2-copy > .lead { animation-delay: .24s; }
  .hero2-copy > .cta { animation-delay: .32s; }
  .hero2-visual { animation: heroArt 1s .15s cubic-bezier(.2,.7,.2,1) backwards; }
  .hv-chip { animation: chipFloat 6s ease-in-out infinite; }
  .hv-route { animation-delay: -3s; }
  .hv-van { animation: vanDrive 5s cubic-bezier(.45,0,.55,1) infinite; }
  .hero2-lines path { animation: roadDash2 3s linear infinite; }
}
@keyframes heroArt { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes chipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes vanDrive { 0% { right: 0; } 70%, 100% { right: calc(100% - 30px); } }
@keyframes roadDash2 { to { stroke-dashoffset: -28; } }

/* scroll-linked headline zoom (desktop and phones; disabled when motion is reduced) */
.hero-zone.zoom { height: calc(var(--hero-h, 100svh) + var(--zoom-run, 70vh)); }
.hero-zone.zoom .hero2 { position: sticky; top: var(--head-h, 77px); height: var(--hero-h); min-height: 0; }
.hero-zone.zoom .hero-fade { will-change: opacity, transform; }

/* ===== Trust strip continues the dark hero ===== */
.trust { background: #171c1f; border-bottom: 0; color: #e8edf0; }
.trust .ico { background: rgba(255,255,255,.08); color: #8fb6ff; }
.trust li:hover .ico { background: var(--accent); color: #fff; }

/* ===== Services: photo cards with a roll-up door image swap ===== */
.svc-sec { background: var(--bg); }
.svc-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; grid-auto-flow: dense; }
@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 232px; }
  .svc-lg { grid-column: span 2; grid-row: span 2; }
  .svc-tall { grid-row: span 2; }
}
@media (min-width: 700px) and (max-width: 1023px) { .svc-lg { grid-column: span 2; } }
.svc2 {
  position: relative; border-radius: 22px; overflow: hidden; background: var(--charcoal); color: #fff;
  isolation: isolate; min-width: 0; cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
.svc2:hover { box-shadow: 0 22px 44px rgba(20,24,27,.22); }
.js .svc2.reveal.in:hover { transform: translateY(-4px); }
.svc-media { position: absolute; inset: 0; z-index: -1; }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.svc-media .m2 { clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.7,0,.3,1), transform 1.2s cubic-bezier(.2,.7,.2,1); }
.svc-door {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px; transform: translateY(100%);
  background: repeating-linear-gradient(to bottom, #e6ebee 0 3px, #b9c2c7 3px 5px);
  box-shadow: 0 -6px 14px rgba(0,0,0,.25); transition: bottom .7s cubic-bezier(.7,0,.3,1), transform .7s cubic-bezier(.7,0,.3,1);
}
.svc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,17,19,.9) 0%, rgba(14,17,19,.45) 45%, rgba(14,17,19,.05) 75%); }
.svc2:hover .m1, .svc2.flip .m1 { transform: scale(1.06); }
.svc2:hover .m2, .svc2.flip .m2 { clip-path: inset(0 0 0 0); transform: scale(1.04); }
.svc2:hover .svc-door, .svc2.flip .svc-door { bottom: 100%; transform: translateY(0); }
.svc-body { position: absolute; inset: auto 0 0 0; padding: 20px 22px 22px; display: grid; gap: 6px; }
.svc-body .svc-ico { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(4px); transition: background-color .3s ease, transform .3s ease; }
.svc2:hover .svc-ico, .svc2.flip .svc-ico { background: var(--accent); transform: translateY(-2px); }
.svc-body h3 { font-size: calc(21px * var(--fs, 1)); font-weight: 800; color: #fff; }
.svc-lg .svc-body h3 { font-size: calc(clamp(24px, 2.4vw, 32px) * var(--fs, 1)); }
.svc-body p { color: #d6dde1; font-size: calc(15.5px * var(--fs, 1)); line-height: 1.55; max-width: 34em; }
.svc-flip {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 0 14px 0 16px; min-height: 44px; background: rgba(255,255,255,.92); color: var(--ink);
  font: 700 13px var(--font-body); cursor: pointer; opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.svc-flip svg { width: 16px; height: 16px; transition: transform .3s ease; }
/* the button is for touch screens and keyboard users only; with a mouse, hover already swaps the photo */
.svc-flip:focus-visible { opacity: 1; transform: none; }
.svc-flip[aria-pressed="true"] svg { transform: rotate(180deg); }
.svc-flip:focus-visible { outline: 3px solid var(--star); outline-offset: 2px; }
/* touch screens: tapping the card swaps the photo, no visible button */
/* phones: a swipeable row of tall cards */
@media (max-width: 699px) {
  .svc-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; grid-auto-rows: 360px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-right, 0px))) calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 4px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    scroll-padding-inline: max(16px, env(safe-area-inset-right, 0px));
  }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc2 { scroll-snap-align: start; }
  .svc-sec .sec-head p::after { content: " החליקו לשירותים נוספים ←"; color: var(--accent); font-weight: 700; }
}

/* ===== Why: a route of commitments next to a real photo ===== */
.why2 { background: var(--charcoal); color: #fff; position: relative; overflow: clip; }
.why2::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 380px at 10% 90%, rgba(31,99,214,.22), transparent 60%);
}
.why2 .sec-head p { color: #c9d0d4; }
.why2-grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .why2-grid { grid-template-columns: 1.1fr .9fr; } }
.wy-route { --wp: 0; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; position: relative; }
.wy-line { position: absolute; top: 26px; bottom: 26px; right: 25px; width: 2px; background: rgba(255,255,255,.14); }
.wy-line span { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--wp) * 100%); background: linear-gradient(#8fb6ff, var(--accent)); }
.wy-stop { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; position: relative; }
.wy-dot {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #262d32;
  border: 1px solid rgba(255,255,255,.12); color: #8fb6ff; transition: background-color .4s ease, color .4s ease, transform .4s ease;
}
.wy-dot svg { width: 26px; height: 26px; }
.wy-stop.on .wy-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.wy-stop:hover .wy-dot { transform: translateX(-4px) rotate(-6deg); }
.wy-stop h3 { font-size: calc(20px * var(--fs, 1)); font-weight: 800; color: #fff; margin-bottom: 2px; }
.wy-stop p { color: #b9c2c7; font-size: calc(16px * var(--fs, 1)); }
.why2-visual { margin: 0; position: relative; border-radius: 28px 120px 28px 28px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; }
.why2-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.why2-visual:hover img { transform: scale(1.05); }
.why2-visual figcaption {
  position: absolute; inset: auto 0 0 0; padding: 80px 26px 24px; display: grid; gap: 6px;
  background: linear-gradient(to top, rgba(14,17,19,.92), transparent);
}
.wv-kicker { color: #8fb6ff; font: 700 14px var(--font-display); letter-spacing: .04em; }
.why2-visual strong { font: 800 calc(clamp(24px, 2.6vw, 34px) * var(--fs, 1))/1.2 var(--font-display); color: #fff; }
.wv-rate { justify-self: start; margin-top: 6px; background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 14px; text-decoration: none; }
.wv-rate span { color: var(--star); }
@media (max-width: 979px) { .why2-visual { aspect-ratio: 4 / 3.4; border-radius: 22px 80px 22px 22px; } }

/* ===== How to order: pinned, horizontal step changes on desktop ===== */
.how { position: relative; background: linear-gradient(180deg, #eef2f5, #e4eaee); overflow: clip; }
.how-pin { position: relative; padding-block: 72px; }
.how-bg { position: absolute; inset: 0; pointer-events: none; }
.how-bg svg { width: 100%; height: 100%; }
.how-bg path { fill: none; stroke: #cfd8de; stroke-width: 28; stroke-linecap: round; }
.how-bg path.dash { stroke: #fff; stroke-width: 3; stroke-dasharray: 26 22; }
@media (prefers-reduced-motion: no-preference) { .how-bg path.dash { animation: howLane 2.4s linear infinite; } }
@keyframes howLane { to { stroke-dashoffset: -48; } }
.how-head { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.how-head h2 { margin: 0; }
.how-dots { --hp: 0; list-style: none; margin: 0; padding: 0; display: flex; gap: 0; position: relative; font: 700 14px var(--font-display); color: var(--muted); }
.how-dots li { display: flex; align-items: center; gap: 8px; padding-inline-start: 26px; position: relative; z-index: 1; }
.how-dots li:first-child { padding-inline-start: 0; }
.how-dots li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #cfd8de; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.how-dots li.on { color: var(--ink); }
.how-dots li.on span { background: var(--accent); border-color: var(--accent); color: #fff; }
.how-dots .how-dots-fill { display: none; }
.how-viewport { position: relative; overflow: hidden; border-radius: 28px; }
.how-track { display: flex; flex-direction: column; gap: 18px; }
.how-step {
  position: relative; display: grid; gap: 28px; align-items: center; background: #fff; border-radius: 28px;
  padding: clamp(22px, 3.4vw, 48px); box-shadow: 0 24px 60px rgba(20,24,27,.10); min-width: 0;
}
@media (min-width: 900px) { .how-step { grid-template-columns: 1fr 1fr; } }
.hs-text { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.hs-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font: 700 15px var(--font-display); }
.hs-num { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }
.hs-text h3 { font-size: calc(clamp(28px, 3.6vw, 48px) * var(--fs, 1)); font-weight: 800; line-height: 1.1; }
.hs-text p { color: var(--muted); font-size: calc(19px * var(--fs, 1)); line-height: 1.7; max-width: 30em; }
.hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hs-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hs-tags li { background: var(--alt); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.hs-art { position: relative; border-radius: 22px; overflow: hidden; min-height: 260px; background: var(--charcoal); }
.hs-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-art-1 { display: grid; align-content: center; gap: 14px; padding: 28px; background:
  radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0 / 20px 20px, var(--charcoal); }
.hs-bubble {
  justify-self: start; display: flex; flex-wrap: wrap; gap: 8px; background: var(--wa); color: #fff; border-radius: 18px 18px 4px 18px;
  padding: 14px 18px; font: 700 18px var(--font-display); box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
.hs-bubble b { background: rgba(255,255,255,.16); border-radius: 999px; padding: 2px 12px; }
.hs-photos { justify-self: end; background: #fff; color: var(--ink); border-radius: 18px 18px 18px 4px; align-items: center; gap: 10px; }
.hs-photos svg { width: 24px; height: 24px; color: var(--accent); }
.hs-check { position: absolute; inset: auto 16px 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hs-check span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 700; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.hs-check svg { width: 16px; height: 16px; color: var(--wa); }
.hs-road { position: absolute; inset: auto 18px 18px 18px; height: 44px; border-bottom: 3px dashed rgba(255,255,255,.85); }
.hs-van { position: absolute; bottom: 4px; right: 0; width: 46px; height: 34px; color: #fff; transform: scaleX(-1); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.hs-van svg, .hs-flag svg { width: 100%; height: 100%; }
.hs-flag { position: absolute; left: 0; bottom: 4px; width: 32px; height: 32px; color: var(--star); }
.how-step.active .hs-van { animation: vanDrive2 2.6s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes vanDrive2 { from { right: 0; } to { right: calc(100% - 80px); } }
/* pinned mode (set by home.js on wide, tall screens) */
.how.pinned { height: var(--how-h, 260vh); }
.how.pinned .how-pin { position: sticky; top: var(--head-h, 77px); height: calc(100svh - var(--head-h, 77px)); display: grid; grid-template-rows: auto 1fr; align-content: center; padding-block: 28px; }
.how.pinned .how-track { flex-direction: row; gap: 0; align-items: center; will-change: transform; }
.how.pinned .how-step { flex: 0 0 100%; max-width: 100%; transition: opacity .4s ease, transform .4s ease; }
.how.pinned .how-step:not(.active) { opacity: .55; transform: scale(.94); }
.how.pinned .how-frame { display: grid; align-content: center; min-height: 0; }
.how.pinned .how-step { min-height: min(520px, calc(100svh - var(--head-h, 77px) - 170px)); }
.how.pinned .how-dots .how-dots-fill { display: block; position: absolute; top: 14px; right: 15px; height: 2px; background: var(--accent); width: calc(var(--hp) * (100% - 30px)); z-index: 0; padding: 0; }

/* ===== Gallery: two endless rows ===== */
.gal2 { background: var(--bg); overflow: clip; }
.marquee { display: grid; gap: 14px; }
.mq-row { direction: ltr; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; width: max-content; }
.mq-group { display: flex; gap: 14px; padding-inline-end: 14px; }
.mq-item { margin: 0; position: relative; flex: none; height: clamp(170px, 22vw, 280px); border-radius: 18px; overflow: hidden; background: var(--alt); }
.mq-item img { height: 100%; width: auto; display: block; object-fit: cover; transition: transform .6s ease; }
.mq-item .g-link { display: block; height: 100%; border-radius: 18px; }
.mq-item figcaption {
  position: absolute; inset: auto 10px 10px auto; background: rgba(20,24,27,.78); color: #fff; border-radius: 999px;
  padding: 4px 12px; font-weight: 700; font-size: 13px; direction: rtl; pointer-events: none;
}
.mq-item:hover img, .mq-item .g-link:focus-visible img { transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: mq 70s linear infinite; }
  .mq-rev .mq-track { animation-direction: reverse; animation-duration: 60s; }
  .mq-row:hover .mq-track, .mq-row:focus-within .mq-track { animation-play-state: paused; }
}
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-row { mask-image: none; overflow-x: auto; }
  .mq-group[aria-hidden="true"] { display: none; }
}
html.a11y-still .mq-track { animation: none !important; }
html.a11y-still .mq-row { overflow-x: auto; mask-image: none; }
html.a11y-still .mq-group[aria-hidden="true"] { display: none; }

/* ===== Reviews: one featured quote, the rest along a line ===== */
.rv2 { background: linear-gradient(180deg, #f7f9fb, #eef2f5); }
.rv2-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .rv2-grid { grid-template-columns: .95fr 1.05fr; gap: 64px; } }
.rv2-lead { display: grid; gap: 22px; }
.rv-feature { margin: 0; position: relative; background: #fff; border-radius: 26px; padding: 36px 32px 28px; box-shadow: 0 24px 50px rgba(20,24,27,.08); display: grid; gap: 14px; }
.rv-q { position: absolute; top: -28px; right: 26px; font: 800 120px/1 var(--font-display); color: var(--accent); }
.rv-feature blockquote { margin: 0; font: 700 calc(clamp(22px, 2.3vw, 28px) * var(--fs, 1))/1.45 var(--font-display); color: var(--ink); }
.rv-feature figcaption { display: flex; align-items: center; gap: 12px; }
.rv-feature figcaption > span:last-child { display: grid; }
.rv-feature figcaption span span { color: var(--muted); font-size: 14px; }
.rv2 .rv-stars { color: var(--star); letter-spacing: 3px; font-size: 20px; }
.rq-av {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--charcoal); color: #fff; font: 800 18px var(--font-display); position: relative; z-index: 1;
}
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.rv-list::before { content: ""; position: absolute; top: 22px; bottom: 22px; right: 21px; width: 2px; background: repeating-linear-gradient(to bottom, #c4cdd3 0 6px, transparent 6px 12px); }
.rq { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-block: 18px; border-bottom: 1px solid #dfe5e9; }
.rq:last-child { border-bottom: 0; }
.rq figure { margin: 0; display: grid; gap: 6px; }
.rq blockquote { margin: 0; font-size: calc(18px * var(--fs, 1)); line-height: 1.6; color: var(--ink); transition: color .3s ease; }
.rq figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--muted); font-size: 14px; }
.rq figcaption b { color: var(--ink); font-size: 15px; }
.rq:hover .rq-av { background: var(--accent); }
.rq .rq-av { transition: background-color .3s ease, transform .3s ease; }
.rq:hover .rq-av { transform: scale(1.08); }

/* ===== National coverage ===== */
.areas2 { background: var(--bg); }
.areas2-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) {
  .areas2-grid { grid-template-columns: 1.3fr 220px .9fr; gap: 40px; }
  .areas2-text { grid-row: span 2; }
}
.areas2-text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.areas2-text .sec-head { margin-bottom: 0; }
.areas2-text > p { color: var(--muted); font-size: calc(18px * var(--fs, 1)); line-height: 1.7; max-width: 36em; }
.na-big { font: 800 calc(clamp(28px, 3.3vw, 44px) * var(--fs, 1))/1.12 var(--font-display) !important; color: var(--ink) !important; }
.na-big span { display: block; color: var(--accent); }
.near h3 { font-size: calc(17px * var(--fs, 1)); color: var(--muted); }
.near .areas { margin-top: 10px; }
.mi-link { margin-top: 6px; white-space: normal; text-align: center; line-height: 1.3; }
.na-map { min-width: 0; }
.na-map svg { width: 100%; max-width: 220px; height: auto; display: block; margin-inline: auto; overflow: visible; direction: ltr; }
.na-axis { stroke: #dfe5e9; stroke-width: 6; stroke-linecap: round; }
.na-draw { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.na-pt circle { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.na-main circle { fill: var(--charcoal); stroke: var(--accent); stroke-width: 4; }
.na-pt text { font: 700 14px var(--font-display); fill: var(--ink); }
.na-main text { font-size: 16px; font-weight: 800; }
.na-dir { font: 700 12px var(--font-body); fill: var(--muted); letter-spacing: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .js .na-map .na-draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s; }
  .js .na-map.in .na-draw { stroke-dashoffset: 0; }
  .na-main circle { animation: naPulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes naPulse { 0%, 100% { stroke-width: 4; } 50% { stroke-width: 9; } }
.hours-card { align-self: start; }
@media (max-width: 979px) {
  .areas2-grid { grid-template-columns: 1fr; }
  .na-map svg { max-width: 200px; }
}
@media (min-width: 600px) and (max-width: 979px) {
  .areas2-grid { grid-template-columns: 1fr 200px; }
  .areas2-text { grid-column: 1; grid-row: span 2; }
  .hours-card { grid-column: 1 / -1; }
}

/* entrance clipping for wide offsets */
.svc-sec, .why2, .rv2, .areas2 { overflow-x: clip; }
html.a11y-contrast .hero2, html.a11y-contrast .why2, html.a11y-contrast .trust { background: #000; }
html.a11y-contrast .svc-media::after { background: rgba(0,0,0,.78); }

/* phones and portrait tablets: the photo moves behind the copy so the hero stays one screen tall */
@media (max-width: 979px) {
  .hero2 { min-height: 0; padding-block: 40px 84px; }
  .hero2-visual { display: none; }
  .hero2-bg::before {
    content: ""; position: absolute; inset: 0; background: url("img/fleet.webp") 30% 60% / cover no-repeat; opacity: .28;
  }
  .hero2-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(29,35,39,.55), var(--charcoal) 92%); }
  /* starts compact so the scroll zoom has room to grow to the screen width */
  .hero-title .ht-main { font-size: calc(clamp(32px, 8.6vw, 44px) * var(--fs, 1)); }
  .hero-title em { font-size: calc(clamp(19px, 5vw, 24px) * var(--fs, 1)); }
}

.svc2:focus-visible { outline: 3px solid var(--star); outline-offset: 3px; }