/* ============================================================
   Junkaroos — junk removal, Burlington MA
   Design language: industrial signage. Anton display faces with a
   consistent -3.2deg lean, hazard-stripe rules, hard drop shadows,
   one green (--roo) doing all the emphasis work.
   ============================================================ */

:root{
  --roo:#6FCB3C;
  --flare:#86E752;
  --ember:#4E9528;
  --deep:#39781D;
  --bitumen:#0B0B0C;
  --steel:#16181B;
  --paper:#EFEFEA;
  --dust:#DBDCD5;
  --concrete:#66695F;

  --disp:'Anton',Impact,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --util:'Barlow Condensed','Barlow',sans-serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --lean:-3.2deg;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--bitumen);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--roo);color:var(--bitumen)}
:focus-visible{outline:3px solid var(--roo);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* paper grain on the light sections */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url(../img/grain.png);background-size:120px 120px;
  opacity:.05;mix-blend-mode:multiply;
}
.grain > *{position:relative;z-index:1}

.eyebrow{font-family:var(--util);text-transform:uppercase;font-weight:700;letter-spacing:.18em;font-size:14px;display:flex;align-items:center;gap:12px;color:var(--roo)}
.sec:not(.sec-dark) .eyebrow{color:var(--deep)}
.eyebrow i{display:block;width:32px;height:3px;background:currentColor;flex:none;transform-origin:left}

.hazard{height:15px;background:repeating-linear-gradient(-60deg,var(--roo) 0 22px,var(--bitumen) 22px 44px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--util);text-transform:uppercase;font-weight:700;letter-spacing:.06em;
  font-size:19px;padding:16px 30px;border:0;border-radius:2px;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .14s cubic-bezier(.34,1.4,.64,1),box-shadow .14s,background .14s,color .14s;
}
.btn-primary{background:var(--roo);color:var(--bitumen);box-shadow:0 5px 0 var(--ember)}
.btn-primary:hover{background:var(--flare);transform:translateY(-2px);box-shadow:0 7px 0 var(--ember)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ember)}
.btn-ghost{background:transparent;color:var(--bitumen);box-shadow:inset 0 0 0 2.5px var(--bitumen)}
.btn-ghost:hover{background:var(--bitumen);color:#fff}
.hero .btn-ghost,.sec-dark .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.42)}
.hero .btn-ghost:hover,.sec-dark .btn-ghost:hover{background:#fff;color:var(--bitumen)}
.btn .arw{font-size:15px;transition:transform .18s}
.btn:hover .arw{transform:translateX(5px)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .5s ease}
.btn:hover::after{left:120%}

/* ============================ NAV */
.nav{position:sticky;top:0;z-index:60;background:var(--bitumen);border-bottom:2px solid rgba(255,255,255,.08);transition:box-shadow .25s}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45)}
.nav-in{display:flex;align-items:center;gap:20px;height:82px;transition:height .25s}
.nav.scrolled .nav-in{height:66px}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.nav-logo img{height:56px;width:auto;transition:height .25s;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.nav.scrolled .nav-logo img{height:46px}
.nav-word{font-family:var(--disp);text-transform:uppercase;color:#fff;font-size:30px;line-height:1;transform:skewX(var(--lean));transition:font-size .25s}
.nav.scrolled .nav-word{font-size:26px}
.nav-word b{color:var(--roo);font-weight:inherit}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--util);text-transform:uppercase;font-weight:600;letter-spacing:.08em;font-size:15.5px;color:#CFCBC4;text-decoration:none;padding:6px 0;position:relative;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--roo);transition:right .22s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;gap:12px;align-items:center;flex:none}
.nav-phone{font-family:var(--util);font-size:20px;font-weight:700;letter-spacing:.04em;color:#fff;text-decoration:none;white-space:nowrap;transition:color .15s}
.nav-phone b{color:var(--roo);font-weight:inherit}
.nav-phone:hover{color:var(--roo)}
.nav .btn{padding:12px 22px;font-size:16px}

/* ============================ HERO */
.hero{position:relative;background:var(--bitumen);color:#fff;overflow:hidden;padding:clamp(38px,5.5vw,66px) 0 clamp(32px,4.5vw,56px)}
.hero-rays{
  position:absolute;top:-12%;right:-6%;width:min(900px,88vw);aspect-ratio:1;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(111,203,60,.28) 0deg 1.4deg,transparent 1.4deg 6deg);
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 33%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%,#000 33%,transparent 70%);
  pointer-events:none;will-change:transform;
  animation:raysIn 1.3s .05s both cubic-bezier(.2,.8,.3,1), spin 150s 1.4s linear infinite;
}
.hero-glow{position:absolute;top:-16%;right:1%;width:min(640px,72vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(111,203,60,.32),transparent 62%);pointer-events:none;animation:glowIn 1.4s .2s both ease-out}
@keyframes raysIn{from{opacity:0;transform:scale(.7) rotate(-16deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes glowIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:30px;align-items:center}
.hero .eyebrow{animation:slideIn .7s .28s both cubic-bezier(.2,.9,.3,1)}
.hero .eyebrow i{animation:ruleGrow .6s .3s both cubic-bezier(.2,.9,.3,1)}
@keyframes slideIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes ruleGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero h1{
  font-family:var(--disp);text-transform:uppercase;font-weight:400;
  font-size:clamp(50px,7.9vw,112px);line-height:.98;letter-spacing:-.012em;
  transform:skewX(var(--lean));transform-origin:left bottom;margin:16px 0 0;
}
.hero h1 .line{display:block;overflow:hidden;padding:.02em 0 .1em;margin-bottom:-.09em}
.hero h1 .line span{display:block;animation:slam .78s both cubic-bezier(.16,1,.3,1)}
.hero h1 .line:nth-child(1) span{animation-delay:.4s}
.hero h1 .line:nth-child(2) span{animation-delay:.55s;color:var(--roo)}
@keyframes slam{0%{opacity:0;transform:translateY(105%)}70%{opacity:1;transform:translateY(-6%)}100%{opacity:1;transform:translateY(0)}}

/* guarantee stamp, the loudest promise on the page */
.stamp{
  display:inline-block;margin-top:26px;background:var(--roo);color:var(--bitumen);
  padding:14px 26px 16px;transform:skewX(var(--lean)) rotate(-1.1deg);
  box-shadow:9px 9px 0 rgba(0,0,0,.45);
  animation:pop .6s .92s both cubic-bezier(.34,1.5,.64,1);
}
.stamp-lead{font-family:var(--disp);text-transform:uppercase;font-size:clamp(21px,3.1vw,40px);line-height:1;display:flex;align-items:center;gap:12px}
.stamp-lead svg{width:.82em;height:.82em;flex:none;stroke:var(--bitumen);fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.stamp-rule{height:2px;background:rgba(0,0,0,.45);margin:9px 0 8px}
.stamp-sub{font-family:var(--util);text-transform:uppercase;letter-spacing:.11em;font-weight:700;font-size:clamp(12.5px,1.5vw,16px);color:rgba(0,0,0,.72)}
@keyframes pop{from{opacity:0;transform:skewX(var(--lean)) rotate(-1.1deg) scale(.82)}to{opacity:1;transform:skewX(var(--lean)) rotate(-1.1deg) scale(1)}}

.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.hero-actions .btn{animation:fadeUp .6s both cubic-bezier(.2,.9,.3,1)}
.hero-actions .btn:nth-child(1){animation-delay:1.15s}
.hero-actions .btn:nth-child(2){animation-delay:1.27s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- mascot ---- */
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 26px 40px rgba(0,0,0,.62));animation:land 1.25s .5s both cubic-bezier(.22,.9,.3,1), float 6.5s 1.9s ease-in-out infinite}
@keyframes land{
  0%{opacity:0;transform:translate3d(-90px,-190px,0) rotate(-15deg) scale(.86)}
  50%{opacity:1}
  68%{transform:translate3d(0,12px,0) rotate(1.6deg) scale(1.04,.94)}
  84%{transform:translate3d(0,-8px,0) rotate(-.6deg) scale(.985,1.025)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(-.8deg)}}

.trust{position:relative;z-index:2;margin-top:clamp(24px,3.6vw,40px);border-top:1px solid rgba(255,255,255,.13);padding-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust div{font-family:var(--util);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:16px;color:#CFCBC4;padding-left:15px;border-left:3px solid var(--roo);animation:fadeUp .6s both ease-out}
.trust div:nth-child(1){animation-delay:1.4s}
.trust div:nth-child(2){animation-delay:1.5s}
.trust div:nth-child(3){animation-delay:1.6s}
.trust div:nth-child(4){animation-delay:1.7s}

/* ============================ MARQUEE */
.marquee{background:var(--bitumen);overflow:hidden;padding:14px 0;border-top:3px solid var(--roo);border-bottom:3px solid var(--roo)}
.marquee-track{display:flex;width:max-content;animation:march 36s linear infinite}
.marquee-track span{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2.4vw,28px);color:#fff;padding:0 18px;white-space:nowrap;line-height:1.1}
.marquee-track span b{color:var(--roo);font-weight:inherit;padding:0 14px}
@keyframes march{to{transform:translateX(-50%)}}

/* ============================ SECTIONS */
.sec{padding:clamp(58px,7vw,96px) 0}
.sec-dark{background:var(--steel);color:#fff}
.sec-head{max-width:720px;margin-bottom:clamp(30px,4vw,46px)}
.sec-head h2{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(34px,4.9vw,58px);line-height:1.02;margin-top:14px}
.sec-head h2 em{font-style:normal;color:var(--roo)}
.sec:not(.sec-dark) .sec-head h2 em{color:var(--deep)}
.scribble{display:block;width:min(280px,52%);height:16px;margin-top:4px;stroke:var(--roo);fill:none;stroke-width:5;stroke-linecap:round}

/* ============================ QUOTE */
.quote-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,56px);align-items:start}
.quote-copy h2{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(36px,4.9vw,56px);line-height:1.02;margin:14px 0 20px}
.quote-copy h2 em{font-style:normal;color:var(--deep)}
.qpoints{list-style:none;display:grid;gap:0}
.qpoints li{padding:14px 0 14px 34px;position:relative;border-top:1px solid var(--dust);font-family:var(--util);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:17px}
.qpoints li:last-child{border-bottom:1px solid var(--dust)}
.qpoints li::before{content:"";position:absolute;left:4px;top:17px;width:15px;height:15px;background:var(--deep);clip-path:polygon(14% 44%,0 58%,42% 100%,100% 18%,86% 4%,42% 72%)}
.qphone{display:inline-flex;flex-direction:column;margin-top:26px;text-decoration:none}
.qphone small{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:13.5px;font-weight:700;color:var(--concrete)}
.qphone strong{font-family:var(--disp);font-weight:400;font-size:clamp(32px,4.2vw,46px);line-height:1.05;transition:color .15s}
.qphone:hover strong{color:var(--deep)}

.formcard{background:var(--bitumen);color:#fff;border-radius:3px;padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.16)}
.formcard::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(-60deg,var(--roo) 0 16px,var(--bitumen) 16px 32px)}
.formcard h3{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(27px,3.1vw,36px);line-height:1.06;margin-top:8px}
.formsub{font-size:15.5px;color:#8B8781;margin:8px 0 22px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.fields label{display:flex;flex-direction:column;gap:7px;font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;font-weight:700;color:#8B8781}
.fields label.full{grid-column:1/-1}
.fields input[type=text],.fields input[type=tel],.fields select,.fields textarea{
  font-family:var(--body);font-size:16.5px;color:#fff;border:1.5px solid rgba(255,255,255,.18);
  border-radius:2px;background:rgba(255,255,255,.05);padding:12px 13px;width:100%;resize:vertical;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.fields select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8B8781 50%),linear-gradient(135deg,#8B8781 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat}
.fields select option{background:var(--bitumen);color:#fff}
.fields ::placeholder{color:#6A6862}
.fields input:focus,.fields select:focus,.fields textarea:focus{border-color:var(--roo);outline:none;background:rgba(111,203,60,.1);box-shadow:0 0 0 3px rgba(111,203,60,.2)}
.fields .bad{border-color:#E5544A;background:rgba(229,84,74,.1)}
.fields .flash{animation:flash 1.1s ease-out}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(111,203,60,0)}25%{box-shadow:0 0 0 5px rgba(111,203,60,.45);border-color:var(--roo)}}

/* photo drop zone */
.drop{
  border:1.5px dashed rgba(255,255,255,.28);border-radius:3px;background:rgba(255,255,255,.03);
  padding:18px 16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.drop:hover,.drop.over{border-color:var(--roo);background:rgba(111,203,60,.1)}
.drop svg{width:26px;height:26px;stroke:var(--roo);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 8px}
.drop-cta{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:16px;color:#fff}
.drop-hint{display:block;font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;font-size:14px;color:#8B8781;margin-top:4px;line-height:1.4}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb{position:relative;width:64px;height:64px;border-radius:2px;overflow:hidden;border:1.5px solid rgba(255,255,255,.2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:2px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.thumb button:hover{background:#E5544A}
.formcard form{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formcard .btn{width:100%}
.formnote{font-size:14.5px;color:#8B8781;margin-top:15px;line-height:1.5}
.formnote.done{color:var(--roo);font-weight:600}

/* ============================ ROAD */
.road{position:relative;height:clamp(145px,17vw,192px);background:#1C2025;overflow:hidden;border-top:3px solid var(--roo);border-bottom:3px solid var(--roo)}
.road-truck{position:absolute;left:-460px;bottom:2%;height:94%;width:auto;z-index:2;animation:drive 15s linear infinite}
@keyframes drive{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 480px))}}
.road-dash{position:absolute;left:0;right:0;bottom:9%;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 40px,transparent 40px 80px)}
.road::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(111,203,60,.14),transparent 62%);pointer-events:none}
.road-truck .wheel{transform-box:fill-box;transform-origin:center;animation:roll 1.3s linear infinite}
@keyframes roll{to{transform:rotate(-360deg)}}

/* ============================ STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px)}
.step{padding-top:24px;border-top:4px solid var(--roo);transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.step:hover{transform:translateY(-6px)}
.step .n{font-family:var(--disp);font-size:clamp(52px,6.4vw,82px);line-height:.8;color:var(--roo);opacity:.3;display:block;margin-bottom:8px;transition:opacity .25s}
.step:hover .n{opacity:.65}
.step h3{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(22px,2.5vw,29px);line-height:1.06;margin-bottom:9px}
.step p{color:#A9A69F;font-size:16.5px}

/* ============================ PROMISE */
.promise{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,32px)}
.pcard{background:var(--bitumen);color:#fff;border-radius:3px;padding:clamp(24px,3vw,32px) clamp(24px,3vw,32px) clamp(30px,3.4vw,38px);position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.2)}
.pcard::before{content:"";position:absolute;inset:auto auto 0 0;height:6px;width:100%;background:repeating-linear-gradient(-60deg,var(--roo) 0 14px,var(--bitumen) 14px 28px)}
.pcard.hero-card{grid-column:1/-1;background:var(--roo);color:var(--bitumen)}
.pcard.hero-card::before{background:repeating-linear-gradient(-60deg,rgba(0,0,0,.8) 0 14px,transparent 14px 28px)}
.pcard.hero-card h3{color:var(--bitumen);font-size:clamp(26px,3.6vw,44px)}
.pcard.hero-card p{color:rgba(0,0,0,.72);font-size:17.5px;max-width:52ch}
.pcard h3{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(21px,2.4vw,27px);line-height:1.08;margin-bottom:10px;color:var(--roo)}
.pcard p{color:#A9A69F;font-size:16.5px}

/* ============================ AREA / MAP */
.area-grid{display:grid;gap:clamp(22px,3vw,32px)}
.mapwrap{position:relative;max-width:980px;width:100%;margin:0 auto;background:#fff;border:1.5px solid var(--dust);border-radius:3px;padding:clamp(12px,1.6vw,20px);transform:rotate(-.4deg);box-shadow:0 16px 34px rgba(0,0,0,.07)}
.mapstage{position:relative;overflow:hidden;border-radius:2px;background:#FBFBF8;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.mapstage.dragging{cursor:grabbing}
#maSvg{display:block;width:100%;height:auto}
.tw{stroke:#9B9E97;stroke-width:.8;vector-effect:non-scaling-stroke;transition:fill .14s}
.tw.off{fill:#FCFCFA}
.tw.core{fill:#6FCB3C;stroke:#3F7C22;cursor:pointer}
.tw.core:hover,.tw.core.hot{fill:var(--deep)}
#maLabels{font-family:var(--util);font-weight:700;text-anchor:middle;pointer-events:none}
.lb{fill:#11220A;paint-order:stroke;stroke:rgba(255,255,255,.82);stroke-width:2.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .18s}
.lb.show{opacity:1}
.mapctl{position:absolute;right:10px;top:10px;display:grid;gap:6px;z-index:2}
.mapctl button{
  width:38px;height:38px;border:1.5px solid var(--dust);background:#fff;color:var(--bitumen);
  font-family:var(--disp);font-size:19px;line-height:1;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;
}
.mapctl button:hover{background:var(--bitumen);border-color:var(--bitumen);color:#fff}
.mapread{
  margin-top:12px;font-family:var(--util);text-transform:uppercase;letter-spacing:.08em;
  font-size:14.5px;font-weight:600;color:var(--concrete);min-height:1.4em;
}
.mapread b{color:var(--bitumen);font-weight:700}
.mapread .yes{color:var(--deep);font-weight:700}
.map-key{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dust);font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:13.5px;font-weight:600;color:var(--concrete)}
.map-key span{display:flex;align-items:center;gap:7px}
.map-key i{width:13px;height:13px;border-radius:2px;display:block;flex:none;border:1px solid #C4C6BF}
.k-core{background:var(--roo)}
.k-off{background:#FAFAF7}
.towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.town{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:15.5px;
  padding:9px 15px;border:1.5px solid var(--dust);border-radius:2px;background:#fff;color:var(--bitumen);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.town:hover,.town:focus-visible{background:var(--roo);border-color:var(--roo);transform:translateY(-2px)}
.town.home{background:var(--bitumen);border-color:var(--bitumen);color:#fff}
.town.home:hover{background:var(--roo);border-color:var(--roo);color:var(--bitumen)}
.town-hint{font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:13.5px;font-weight:700;color:var(--concrete);margin-top:16px}

/* ============================ FINALE */
.finale{background:var(--roo);color:var(--bitumen);padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden}
.finale::before,.finale::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-60deg,rgba(0,0,0,.8) 0 20px,transparent 20px 40px)}
.finale::before{top:0}
.finale::after{bottom:0}
.finale-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,52px);align-items:center}
.finale h2{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(40px,6.4vw,92px);line-height:1;transform:skewX(var(--lean));text-shadow:0 6px 0 rgba(0,0,0,.16)}
.finale .btn-ghost{margin-top:26px;color:var(--bitumen);box-shadow:inset 0 0 0 2.5px var(--bitumen)}
.finale .btn-ghost:hover{background:var(--bitumen);color:var(--roo)}
.finale-right{text-align:right}
.big-phone{font-family:var(--disp);font-size:clamp(34px,5vw,60px);text-decoration:none;line-height:1;display:inline-block;border-bottom:6px solid rgba(0,0,0,.3);padding-bottom:5px;transition:border-color .18s,transform .18s}
.big-phone:hover{border-bottom-color:var(--bitumen);transform:translateY(-3px)}
.finale-place{font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:15px;font-weight:600;margin-top:14px}

/* ============================ FOOTER */
.foot{background:var(--bitumen);color:#8B8781;padding:clamp(40px,5vw,58px) 0 26px}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;align-items:start}
.foot img{width:180px}
.foot h4{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:#fff;margin-bottom:13px;font-weight:700}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{text-decoration:none;font-size:16px;transition:color .15s}
.foot a:hover{color:var(--roo)}
.foot-phone{font-family:var(--disp);font-size:27px;color:#fff!important;line-height:1.1}
.foot-phone:hover{color:var(--roo)!important}
.foot-bar{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--util);text-transform:uppercase;letter-spacing:.08em;font-size:13.5px}

.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-columns:1fr 1fr;border-top:3px solid var(--roo)}
.callbar a,.callbar button{font-family:var(--util);text-transform:uppercase;font-weight:700;letter-spacing:.07em;font-size:17px;text-decoration:none;padding:18px 8px;text-align:center;background:var(--bitumen);color:#fff;border:0;cursor:pointer}
.callbar .cb-alt{background:var(--roo);color:var(--bitumen)}

.rise{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.3,1)}
.rise.in{opacity:1;transform:none}

/* ============================ RESPONSIVE */
@media (max-width:1360px){ .nav-word{display:none} }
@media (max-width:1150px){ .nav-links{gap:16px} .nav-links a{font-size:14.5px} }
@media (max-width:1040px){
  .nav-links{display:none}
  .hero-in{grid-template-columns:1fr;gap:4px}
  .hero-art{max-width:380px;margin:0 auto;order:-1}
  .hero h1{font-size:clamp(46px,10.5vw,82px)}
  .quote-grid,.finale-in{grid-template-columns:1fr}
  .finale-right{text-align:left}
  .steps,.promise{grid-template-columns:1fr}
  .pcard.hero-card{grid-column:auto}
  .trust{grid-template-columns:1fr 1fr;gap:14px}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16.5px;padding-bottom:72px}
  .nav-in{height:66px;gap:12px}
  .nav.scrolled .nav-in{height:60px}
  .nav-logo img{height:46px}
  .nav-word{display:block;font-size:24px}
  .nav-phone,.nav .btn{display:none}
  .hero-art{max-width:260px}
  .callbar{display:grid}
  .fields{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .foot-in{grid-template-columns:1fr}
  .stamp{box-shadow:6px 6px 0 rgba(0,0,0,.45)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
}

/* ============================ ADDITIONS FOR THE SPLIT BUILD
   The single-file prototype held the map inline and posted one multi-file
   input. Both changed, so these are the styles that go with that. */

/* three real file inputs, one per Netlify Forms field, kept out of sight */
.hp-file{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* a photo still being re-encoded reads as not-quite-ready */
.thumb.busy img{opacity:.45;filter:saturate(.4)}
.thumb.busy::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(111,203,60,.45) 50%,transparent 80%);
  background-size:220% 100%;animation:thumbWait 1.1s linear infinite;
}
@keyframes thumbWait{from{background-position:120% 0}to{background-position:-120% 0}}

/* placeholder holding the map's exact box so nothing shifts when it lands */
.mapskel{
  aspect-ratio:1225.8/760;background:#FBFBF8;
  background-image:radial-gradient(circle at 62% 30%,rgba(111,203,60,.16),transparent 46%);
  animation:mapWait 2.2s ease-in-out infinite;
}
@keyframes mapWait{0%,100%{opacity:.75}50%{opacity:1}}
.mapstage.failed{padding:26px 0}