/* ==========================================================================
   Multi Services Éco Express — main.css  (v2 "moving-day" redesign)

   Design language: kraft paper, shipping labels, packing tape, stencil caps.
   Warm off-white ground, near-black ink, ONE loud colour (lime) — nothing in
   the Montréal mover market uses any of this. Hard offset shadows instead of
   soft blurs; 2px ink borders; tape-stripe dividers; an italic serif accent
   (Instrument Serif) cutting through the Anton caps.

   The palette is NOT sampled from the client logo (not yet received). Swap
   --ink / --eco / --lime below to re-skin the site. See README.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --ink:#0A0F0C; --ink-2:#101812; --ink-3:#182319;
  --forest:#0C3B27; --forest-2:#082C1D;
  --eco:#17A24B; --eco-600:#0F7D38; --eco-100:#DCF5E6;
  --lime:#C6F24E; --lime-600:#A9DB2B;

  /* Kraft-tinted paper */
  --paper:#F3EFE4; --paper-2:#EBE5D4; --paper-3:#DDD5BE; --kraft:#E4DCC6;

  --fg:#0A0F0C; --fg-muted:#4C5548; --fg-dim:#7D8574;
  --on-dark:#F7F5EC; --on-dark-muted:#B9C4AE; --on-dark-dim:#7E8A74;
  --rule:rgba(10,15,12,.16); --rule-dark:rgba(247,245,236,.16);
  --line:var(--ink);

  --font-display:"Anton","Archivo Narrow","Arial Narrow",system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shell:min(1320px,92vw);
  --pad-y:clamp(4.5rem,10vw,8.5rem);
  --r:4px; --r-sm:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:78px; --strip-h:38px;
  --hard:4px 4px 0 var(--ink);
  --hard-lg:8px 8px 0 var(--ink);
  /* packing-tape stripe, used by .tape and section dividers */
  --tape:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--lime) 14px 28px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--fg);
  font-family:var(--font-body);font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.03;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--eco);outline-offset:3px;border-radius:2px}

/* Film grain over everything — the analog texture that makes the flat
   colours feel printed rather than rendered. Pure decoration. */
body::after{
  content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--pad-y);position:relative}
.section--ink{background:var(--ink);color:var(--on-dark)}
.section--forest{background:var(--forest);color:var(--on-dark)}
.section--paper2{background:var(--paper-2)}
.section--ink .lede,.section--forest .lede{color:var(--on-dark-muted)}
.section--ink .eyebrow,.section--forest .eyebrow{color:var(--lime)}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--font-ui);font-size:.72rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.3rem;
  border:2px solid currentColor;padding:.34rem .8rem;border-radius:2px;
}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--eco);flex:none;border-radius:50%}
.section--ink .eyebrow::before,.section--forest .eyebrow::before{background:var(--lime)}
.h-xl{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.7rem,7vw,6.4rem);line-height:1.02;letter-spacing:.004em;text-wrap:balance}
.h-lg{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.8vw,4.1rem);line-height:1.04;text-wrap:balance}
.h-md{font-family:var(--font-ui);font-weight:800;font-size:clamp(1.3rem,2.1vw,1.85rem);letter-spacing:-.015em}
.h-sm{font-family:var(--font-ui);font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
/* The signature type move: italic serif, sentence case, lime — slicing
   through the stencil caps. */
.h-xl em,.h-lg em{font-family:var(--font-serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--eco-600);font-size:1.02em}
.section--ink .h-xl em,.section--forest .h-xl em,.hero .h-xl em,
.section--ink .h-lg em,.section--forest .h-lg em{color:var(--lime)}
.lede{font-size:clamp(1.05rem,1.4vw,1.24rem);color:var(--fg-muted);max-width:60ch;line-height:1.6}
.tint{color:var(--eco)}
.section--ink .tint,.section--forest .tint{color:var(--lime)}
.small{font-size:.86rem;color:var(--fg-dim);line-height:1.55}

/* ---------- Buttons (hard-shadow, tactile) ---------- */
.btn{
  --bg:var(--lime);--bfg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.8rem;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--bg);color:var(--bfg);
  font-family:var(--font-ui);font-weight:800;font-size:.95rem;letter-spacing:.02em;
  text-transform:uppercase;cursor:pointer;box-shadow:var(--hard);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s;
  text-align:center;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--lime-600)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--eco{--bg:var(--eco);--bfg:#fff}
.btn--eco:hover{background:var(--eco-600)}
.btn--ghost{--bg:transparent;--bfg:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.section--ink .btn,.section--forest .btn{border-color:var(--lime);box-shadow:4px 4px 0 rgba(198,242,78,.35)}
.section--ink .btn:hover,.section--forest .btn:hover{box-shadow:6px 6px 0 rgba(198,242,78,.35)}
.section--ink .btn--ghost,.section--forest .btn--ghost{--bfg:var(--on-dark)}
.section--ink .btn--ghost:hover,.section--forest .btn--ghost:hover{background:var(--lime);color:var(--ink)}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* ---------- Tape divider ---------- */
.tape{height:14px;background:var(--tape)}

/* ---------- Scroll progress truck (injected by main.js) ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:5px;z-index:80;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease)}
.scroll-progress.is-on{opacity:1}
.scroll-progress-bar{height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0);
  border-bottom:1px solid var(--ink)}
.scroll-progress-truck{position:absolute;top:0;left:0;width:26px;height:17px;color:var(--lime);
  filter:drop-shadow(1px 1px 0 rgba(10,15,12,.8))}

/* ---------- Utility strip ---------- */
.strip{
  background:var(--ink);color:var(--on-dark-muted);font-size:.8rem;
  height:var(--strip-h);display:flex;align-items:center;position:relative;z-index:60;
}
.strip .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.strip a{color:var(--on-dark);font-weight:600}
.strip-left{display:flex;align-items:center;gap:1.4rem;min-width:0}
.strip-badge{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.strip-badge svg{width:14px;height:14px;flex:none;color:var(--lime)}
.strip-hide{display:none}
.lang{display:inline-flex;gap:.15rem;align-items:center;font-weight:700;letter-spacing:.04em}
.lang a{opacity:.55;padding:.15rem .3rem}
.lang a[aria-current="true"]{opacity:1;color:var(--lime)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:var(--paper);border-bottom:2px solid var(--ink);
  transition:box-shadow .3s var(--ease);
}
.nav.is-stuck{box-shadow:0 6px 0 rgba(10,15,12,.08)}
.nav .shell{height:100%;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;min-width:0}
.brand img,.brand svg{height:42px;width:auto;flex:none}
.brand-name{font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;
  letter-spacing:.01em;line-height:1;white-space:nowrap}
.brand-sub{font-family:var(--font-ui);font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-dim);display:block;margin-top:.24rem;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a{font-family:var(--font-ui);font-weight:700;font-size:.92rem;position:relative;
  padding-block:.4rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;
  background:var(--eco);transition:right .25s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-cta{display:flex;align-items:center;gap:.9rem}
.nav-tel{font-family:var(--font-ui);font-weight:800;font-size:1rem;white-space:nowrap;display:flex;align-items:center;gap:.45rem}
.nav-tel svg{width:17px;height:17px;color:var(--eco)}
.nav .btn{padding:.72rem 1.3rem;font-size:.85rem;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
.burger{display:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:var(--r);
  background:transparent;align-items:center;justify-content:center;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem);border-bottom:2px solid var(--ink)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(.8)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--ink) 10%,rgba(10,15,12,.88) 44%,rgba(10,15,12,.5) 100%)}
.hero .shell{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.hero h1{color:var(--on-dark)}
.hero .lede{color:var(--on-dark-muted);margin-top:1.6rem}

/* trust pills → stickers. First pill is the review-strip slot. */
.pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.8rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:2px;
  background:transparent;border:1.5px solid var(--rule-dark);color:var(--on-dark-muted);
  font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.pill svg{width:14px;height:14px;color:var(--lime);flex:none}
.pill--solid{background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(198,242,78,.3);transform:rotate(-2deg)}
.pill--solid svg{color:var(--ink)}

/* stat row — inventory-manifest look */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.6rem;
  border:2px solid var(--lime)}
.stat{padding:1.15rem 1.25rem;position:relative}
.stat + .stat{border-left:2px solid var(--lime)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.7rem);
  line-height:1;color:var(--lime);font-weight:400}
.stat span{display:block;font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim);margin-top:.5rem}

/* ---------- Quote card = shipping label ---------- */
.quote-card{background:#FDFCF7;color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);
  padding:clamp(1.5rem,2.2vw,2rem);box-shadow:var(--hard-lg);position:relative}
.quote-card::before{ /* strip of packing tape across the top edge */
  content:"";position:absolute;top:-11px;left:50%;width:46%;height:22px;
  transform:translateX(-50%) rotate(-1.6deg);background:var(--tape);opacity:.9}
.label-tag{display:inline-block;font-family:var(--font-ui);font-weight:800;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:var(--ink);
  padding:.3rem .7rem;margin-bottom:.9rem}
.quote-card h2{font-family:var(--font-ui);font-weight:800;font-size:1.32rem;letter-spacing:-.015em}
.quote-card .small{margin-top:.35rem}
.barcode{height:30px;margin-top:1.1rem;opacity:.85;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,
    var(--ink) 5px 6px,transparent 6px 11px,var(--ink) 11px 14px,transparent 14px 18px)}
.qform{display:grid;gap:.75rem;margin-top:1.25rem}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label{font-family:var(--font-ui);font-size:.71rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-muted)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .9rem;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:#FDFCF7;font-size:.96rem;transition:box-shadow .15s,background .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;box-shadow:3px 3px 0 var(--lime);background:#fff}
.field textarea{resize:vertical;min-height:82px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-note{font-size:.76rem;color:var(--fg-dim);text-align:center;margin-top:.2rem;line-height:1.5}
.form-msg{display:none;padding:.85rem 1rem;border:2px solid currentColor;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600}
.form-msg.is-on{display:block}
.form-msg--ok{background:var(--eco-100);color:var(--eco-600)}
.form-msg--err{background:#FBEAE7;color:#A62B17}

/* ---------- Proof bar ---------- */
.proof{background:var(--ink);color:var(--lime);border-bottom:2px solid var(--ink)}
.proof .shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;padding-block:1.05rem}
.proof-item{display:flex;align-items:center;gap:.6rem;font-family:var(--font-ui);
  font-weight:800;font-size:.88rem;letter-spacing:.03em;text-transform:uppercase}
.proof-item svg{width:18px;height:18px;flex:none}

/* ---------- Marquee ---------- */
.marquee{background:var(--lime);border-block:2px solid var(--ink);overflow:hidden;padding-block:.9rem}
.marquee-track{display:flex;gap:3.5rem;width:max-content;animation:marq 26s linear infinite}
.marquee-item{display:flex;align-items:center;gap:3.5rem;font-family:var(--font-display);
  font-size:clamp(1.6rem,3.4vw,2.8rem);text-transform:uppercase;color:var(--ink);white-space:nowrap;line-height:1}
.marquee-item::after{content:"";width:12px;height:12px;background:var(--ink);border-radius:50%;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.card{background:#FDFCF7;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--hard);display:flex;flex-direction:column;position:relative;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.card-num{position:absolute;top:.9rem;left:.9rem;z-index:2;background:var(--lime);
  border:2px solid var(--ink);padding:.2rem .6rem;font-family:var(--font-display);
  font-size:1.2rem;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--ink)}
.card-media{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.55);
  transition:transform .6s var(--ease),filter .4s var(--ease)}
.card:hover .card-media img{transform:scale(1.05);filter:saturate(1)}
.card-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card-body h3{font-family:var(--font-ui);font-weight:800;font-size:1.22rem;letter-spacing:-.015em}
.card-body p{color:var(--fg-muted);font-size:.96rem}
.card-list{display:grid;gap:.4rem;margin-top:.2rem}
.card-list li{display:flex;gap:.55rem;font-size:.9rem;color:var(--fg-muted)}
.card-list li::before{content:"";width:7px;height:7px;background:var(--eco);flex:none;margin-top:.5rem}
.card-link{margin-top:auto;padding-top:1rem;font-family:var(--font-ui);font-weight:800;
  font-size:.88rem;text-transform:uppercase;letter-spacing:.04em;color:var(--eco-600);
  display:inline-flex;align-items:center;gap:.4rem}
.card-link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.card:hover .card-link svg{transform:translateX(5px)}

/* ---------- Steps (interior pages) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:3rem;counter-reset:s}
.step{position:relative;padding-top:2.6rem;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--lime)}
.step h3{font-family:var(--font-ui);font-weight:800;font-size:1.08rem;margin-bottom:.5rem}
.step p{font-size:.93rem;color:var(--on-dark-muted)}
.step::after{content:"";position:absolute;top:1.1rem;left:3.4rem;right:-.75rem;height:0;
  border-top:2px dashed var(--rule-dark)}
.step:last-child::after{display:none}

/* ---------- Route (homepage process: truck drives the dashed road) ---------- */
.route{margin-top:3.5rem;position:relative}
.route-road{position:relative;height:0;border-top:3px dashed rgba(198,242,78,.5);margin-bottom:2.6rem}
.route-truck{position:absolute;top:-15px;left:0;width:44px;height:28px;color:var(--lime);
  will-change:transform}
.route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem}
.route-stop{position:relative}
.route-stop::before{content:"";position:absolute;top:calc(-2.6rem - 8px);left:2px;width:12px;height:12px;
  background:var(--lime);border:2px solid var(--ink);border-radius:50%}
.route-num{font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--lime);
  display:block;margin-bottom:.7rem}
.route-stop h3{font-family:var(--font-ui);font-weight:800;font-size:1.08rem;margin-bottom:.5rem}
.route-stop p{font-size:.93rem;color:var(--on-dark-muted)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
.split-media{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--hard-lg);position:relative}
.section--ink .split-media,.section--forest .split-media{border-color:var(--lime);
  box-shadow:8px 8px 0 rgba(198,242,78,.28)}
.split-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split-media::after{ /* taped corner */
  content:"";position:absolute;top:-8px;right:14%;width:96px;height:20px;
  transform:rotate(3deg);background:var(--tape);opacity:.85}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.2rem}
.metric b{display:block;font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--lime);font-weight:400}
.metric span{display:block;font-size:.88rem;color:var(--on-dark-muted);margin-top:.4rem}

/* ---------- Zones = luggage tags ---------- */
.zones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.zone{position:relative;padding:.6rem 1.1rem .6rem 1.9rem;background:#FDFCF7;
  border:2px solid var(--ink);border-radius:2px;box-shadow:3px 3px 0 var(--ink);
  font-family:var(--font-ui);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.03em}
.zone::before{ /* the punched hole of the tag */
  content:"";position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.zone:nth-child(odd){transform:rotate(-1.2deg)}
.zone:nth-child(even){transform:rotate(1deg)}

/* ---------- Reviews slot (future) ---------- */
.reviews-slot{border:2px dashed var(--ink);border-radius:var(--r);padding:clamp(2rem,4vw,3rem);
  text-align:center;background:#FDFCF7}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;margin-top:2.5rem}
.review{background:#FDFCF7;border:2px solid var(--ink);border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--hard);display:flex;flex-direction:column;gap:.9rem}
.review-stars{display:flex;gap:.15rem;color:#E8A413}
.review-stars svg{width:17px;height:17px}
.review p{font-size:.97rem;color:var(--fg-muted);flex:1}
.review footer{font-family:var(--font-ui);font-weight:800;font-size:.88rem}
.review footer span{display:block;font-weight:500;font-size:.8rem;color:var(--fg-dim);margin-top:.15rem}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;margin-top:2.5rem;display:grid;gap:.9rem}
.faq details{background:#FDFCF7;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--hard);overflow:hidden;transition:box-shadow .2s var(--ease)}
.faq details[open]{box-shadow:6px 6px 0 var(--eco)}
.faq summary{padding:1.15rem 3rem 1.15rem 1.35rem;cursor:pointer;position:relative;
  font-family:var(--font-ui);font-weight:800;font-size:1.02rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.25rem;top:50%;transform:translateY(-54%);
  font-family:var(--font-display);font-size:1.5rem;color:var(--eco);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-54%) rotate(45deg)}
.faq details p{padding:0 1.35rem 1.35rem;color:var(--fg-muted);font-size:.96rem}

/* ---------- CTA band ---------- */
.cta-band{background:var(--lime);color:var(--ink);text-align:center;
  border-block:2px solid var(--ink)}
.cta-band .h-lg{color:var(--ink)}
.cta-band .lede{color:rgba(10,15,12,.75);margin-inline:auto}
.cta-band .btn{--bg:var(--ink);--bfg:var(--lime)}
.cta-band .btn:hover{background:#000}
.cta-band .btn--ghost{--bg:transparent;--bfg:var(--ink)}
.cta-band .btn--ghost:hover{background:var(--ink);color:var(--lime)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--on-dark-muted);
  padding-block:clamp(3rem,6vw,4.5rem) 0;font-size:.92rem;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.footer h4{font-family:var(--font-ui);font-weight:800;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);margin-bottom:1.1rem}
.footer li+li{margin-top:.55rem}
.footer a:hover{color:var(--lime)}
.footer .brand-name{color:var(--on-dark)}
.footer-bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.84rem;
  color:var(--on-dark-dim);padding-bottom:4.5rem}
/* Giant clipped wordmark — the site signs itself on the way out. */
.footer-giant{font-family:var(--font-display);text-transform:uppercase;text-align:center;
  font-size:clamp(4rem,15.5vw,15rem);line-height:.78;letter-spacing:.01em;
  color:rgba(198,242,78,.09);user-select:none;pointer-events:none;
  margin-bottom:calc(clamp(4rem,15.5vw,15rem) * -.16);white-space:nowrap}

/* ---------- Scroll animation base state ---------- */
/* Initial state in CSS + JS reveal — content must never depend on JS to exist. */
.anim{opacity:0;transform:translateY(24px)}
.no-js .anim,.reduced .anim{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:2.8rem}
  .quote-card{max-width:560px}
  .grid-3,.review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.route-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .step::after{display:none}
  .route-road{display:none}
  .route-stop::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);
    padding:.5rem 4% 1.25rem;box-shadow:0 12px 0 rgba(10,15,12,.08);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s var(--ease);
  }
  .nav-links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.95rem .25rem;border-bottom:1px solid var(--rule);font-size:1.02rem}
  .nav-links a::after{display:none}
  .burger{display:flex}
}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav .btn{display:none}
  .nav .shell{gap:1rem}
  .nav-tel{border:2px solid var(--ink);border-radius:var(--r);padding:.55rem .7rem;
    box-shadow:3px 3px 0 var(--ink);background:var(--lime)}
  .nav-tel svg{color:var(--ink)}
}
@media (max-width:640px){
  .nav-tel span{display:none}
  .grid-3,.review-grid,.steps,.route-grid{grid-template-columns:1fr}
  .route-stop{padding-left:1.2rem;border-left:3px dashed rgba(198,242,78,.4)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{padding:.85rem .6rem}
  .stat b{font-size:1.55rem}
  .stat span{font-size:.56rem;letter-spacing:.08em}
  .pills{gap:.5rem}
  .pill{font-size:.68rem;padding:.34rem .6rem}
  .qrow{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .strip-left .strip-badge:nth-child(n+2){display:none}
  .metrics{grid-template-columns:1fr}
}
@media (min-width:641px){ .strip-hide{display:inline-flex} }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .anim{opacity:1;transform:none}
  .marquee-track{animation:none}
  .scroll-progress-truck{display:none}
  .route-truck{display:none}
}


/* ---------- ADV+MVMT widget launchers, restyled to the house buttons ----------
   The widgets inject their own <style> into this page after ours, with the
   accent colour as background and hardcoded WHITE text — so lime cannot be
   passed as data-accent (white on lime is unreadable inside the modals).
   Instead the modals keep the dark eco accent via data-accent, and the two
   floating LAUNCHERS are overridden here to match the site's lime hard-shadow
   buttons. !important is required to outrank the injected styles. */
.mvbk-btn{
  background:var(--lime)!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;border-radius:var(--r)!important;
  box-shadow:4px 4px 0 var(--ink)!important;
  font-family:var(--font-ui)!important;font-weight:800!important;
  text-transform:uppercase;letter-spacing:.02em;
}
.mvbk-btn:hover{
  background:var(--lime-600)!important;
  transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--ink)!important;
}
.advw-fab{
  background:var(--lime)!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;
  box-shadow:4px 4px 0 var(--ink)!important;
}
.advw-fab:hover{background:var(--lime-600)!important;transform:scale(1.05)!important}


/* ---------- Hero load choreography ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -10% 0)}}
.hero .pills{animation:rise .7s var(--ease) both}
.hero h1{animation:wipe .9s .15s var(--ease) both}
.hero .lede{animation:rise .7s .45s var(--ease) both}
.hero .hero-ctas{animation:rise .7s .6s var(--ease) both}
.hero .stats{animation:rise .7s .75s var(--ease) both}
.hero .quote-card{animation:rise .8s .35s var(--ease) both}
.hero-ctas{margin-top:1.8rem}
.pill--count{border-color:var(--lime);color:var(--lime)}
.pill--count svg{color:var(--lime)}

/* ---------- Estimator ---------- */
.est-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.est-card{background:#FDFCF7;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--hard-lg);padding:clamp(1.3rem,2.2vw,2rem);position:relative}
.est-card::before{content:"";position:absolute;top:-10px;right:8%;width:110px;height:20px;
  transform:rotate(2deg);background:var(--tape);opacity:.9}
.est-q{border:0;padding:0;margin:0 0 1.35rem}
.est-q legend{font-family:var(--font-ui);font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:.6rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-ui);font-weight:700;font-size:.86rem;padding:.55rem .9rem;
  border:2px solid var(--ink);border-radius:var(--r);background:transparent;cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);transition:transform .12s var(--ease),background .12s,box-shadow .12s}
.chip:hover{background:var(--paper-2)}
.chip.is-on{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}
.chip:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.est-result{margin-top:.4rem;padding-top:1.35rem;border-top:2px dashed var(--ink);display:grid;gap:.45rem}
.est-label{font-family:var(--font-ui);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.est-num{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1;color:var(--ink);
  font-weight:400;transition:opacity .2s}
.est-num.is-busy{opacity:.35}
.est-meta{font-size:.95rem;color:var(--fg-muted)}
.est-meta b{color:var(--ink)}
.est-result .btn{margin-top:.8rem}

/* ---------- Quote success ---------- */
.form-done{display:grid;gap:1rem;padding-top:.4rem}
.done-steps{counter-reset:d;display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.done-steps li{counter-increment:d;position:relative;padding-left:2.4rem;color:var(--fg-muted);font-size:.96rem}
.done-steps li::before{content:counter(d);position:absolute;left:0;top:-.05rem;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;background:var(--lime);border:2px solid var(--ink);
  font-family:var(--font-display);font-size:1rem;border-radius:2px}
.quote-card.is-done form{display:none}

/* ---------- Map poster ---------- */
.split-media--map{background:var(--ink);border-color:var(--ink)}
.split-media--map img{aspect-ratio:16/9;object-fit:cover}

/* ---------- Language toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);
  z-index:90;background:var(--ink);color:var(--on-dark);border:2px solid var(--lime);
  padding:.7rem .9rem .7rem 1.1rem;border-radius:var(--r);box-shadow:4px 4px 0 var(--lime);
  display:flex;align-items:center;gap:.9rem;font-family:var(--font-ui);font-size:.9rem;font-weight:600;
  opacity:0;transition:.35s var(--ease);max-width:min(92vw,520px)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast a{color:var(--lime);font-weight:800;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.toast button{background:transparent;border:0;color:var(--on-dark-dim);font-size:1.3rem;line-height:1;cursor:pointer;padding:.2rem}

/* ---------- Checklist page ---------- */
.ck-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:2.5rem}
.ck-progress{flex:1;min-width:220px;display:grid;gap:.45rem}
.ck-bar{height:14px;border:2px solid var(--ink);background:#FDFCF7;overflow:hidden}
.ck-bar b{display:block;height:100%;background:var(--lime);width:0;transition:width .35s var(--ease)}
.ck-count{font-family:var(--font-ui);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}
.ck-actions{display:flex;gap:.6rem}
.ck-actions .btn{padding:.7rem 1.1rem;font-size:.82rem}
.ck-groups{display:grid;gap:1.75rem;margin-top:2.5rem}
.ck-group{background:#FDFCF7;border:2px solid var(--ink);box-shadow:var(--hard);border-radius:var(--r);overflow:hidden}
.ck-group h3{font-family:var(--font-display);font-size:1.6rem;text-transform:uppercase;padding:.9rem 1.25rem;
  background:var(--ink);color:var(--lime);display:flex;align-items:baseline;gap:.8rem}
.ck-group h3 small{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.14em;color:var(--on-dark-dim)}
.ck-item{display:flex;align-items:flex-start;gap:.9rem;padding:.95rem 1.25rem;border-top:1px solid var(--rule);cursor:pointer}
.ck-item:first-of-type{border-top:0}
.ck-item input{appearance:none;width:24px;height:24px;flex:none;margin-top:.1rem;border:2px solid var(--ink);
  border-radius:3px;background:#fff;cursor:pointer;display:grid;place-items:center}
.ck-item input:checked{background:var(--lime)}
.ck-item input:checked::after{content:"";width:12px;height:7px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-2px) rotate(-45deg)}
.ck-item span{font-size:.98rem;transition:color .2s}
.ck-item input:checked + span{color:var(--fg-dim);text-decoration:line-through}

/* ---------- Prose page (privacy) ---------- */
.prose{max-width:72ch}
.prose h2{font-family:var(--font-ui);font-weight:800;font-size:1.25rem;margin:2.2rem 0 .7rem}
.prose p,.prose li{color:var(--fg-muted);line-height:1.7}
.prose ul{padding-left:1.2rem;list-style:disc;display:grid;gap:.4rem}

@media (max-width:1080px){ .est-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .toast{flex-direction:column;align-items:flex-start;gap:.35rem;padding-right:2.4rem;width:min(92vw,420px)}
  .toast a{white-space:normal}
  .toast button{position:absolute;top:.35rem;right:.45rem}
  .hero-ctas .btn{width:100%}
  .chip{font-size:.8rem;padding:.5rem .7rem}
  .ck-group h3{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .hero .pills,.hero h1,.hero .lede,.hero .hero-ctas,.hero .stats,.hero .quote-card{animation:none}
}
@media print{
  .ck-actions,.toast,.strip,.nav,.footer,.hero-media,.cta-band{display:none!important}
  .ck-group{box-shadow:none;break-inside:avoid}
  .ck-item input{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Print ---------- */
@media print{
  .nav,.strip,.hero-media,.btn,.faq summary::after,.marquee,.scroll-progress,
  .footer-giant,body::after{display:none!important}
  body{background:#fff;color:#000}
}