/* Stylesheet for junkremovalbrevard.com. Colors and the font come from the :root block each page
   inlines from brand.config.mjs THEME (grape + basketball orange on court cream; Bricolage
   Grotesque variable: heavy, slightly narrow display, normal width for reading).
   The base below is the forked Hively chassis (header, menus, cards, forms, wizard, footer).
   The "Junk Dunk identity" layer at the end gives it its own look: sticker cards (thick grape
   outline + hard offset shadow), pill buttons, the dotted ball-arc rule under headings, a
   cream hero with a tilted photo and a ball that drops in.
   Motion (all off under prefers-reduced-motion; intro animations fill "backwards", so with
   animation:none the end state IS the normal style).
   Buttons: grape text on orange (7.0:1), never white on orange. Orange is never text on light. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
/* load-bearing: <img> carries width/height attrs; without height:auto they render squashed */
img,video,svg{max-width:100%;height:auto;display:block}
/* load-bearing: [hidden] must beat any later display rule */
[hidden]{display:none!important}
a{color:var(--accent-text);text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.phero :focus-visible,.dark :focus-visible,.where :focus-visible,.take-no :focus-visible,.quote :focus-visible,.ftr :focus-visible,.callbar :focus-visible,.cta-band :focus-visible,.callbox :focus-visible,.mnav :focus-visible,.mega-cta :focus-visible{outline-color:var(--accent)}
.btn-accent:focus-visible{outline-color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-stretch:70%;line-height:1.04;margin:0 0 .5em;color:var(--ink);font-weight:800;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(34px,4.2vw,52px);text-transform:uppercase}
h2{font-size:clamp(30px,3.2vw,42px);font-weight:750}
h3{font-size:24px;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1232px;margin:0 auto;padding:0 16px}
.narrow>*{max-width:820px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:root{--r:6px;--sh-card:0 0 15px rgba(0,0,0,.05);--sh-hover:0 10px 26px -8px rgba(0,0,0,.22);--sh2:0 18px 40px -18px rgba(0,0,0,.5);--ease:cubic-bezier(.645,.045,.355,1);--hdr:84px;
  --bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23ff7a1a'/%3E%3Cpath d='M3 12h18M12 3v18M6 6c3.3 3.3 3.3 8.7 0 12M18 6c-3.3 3.3-3.3 8.7 0 12' fill='none' stroke='%2322123f' stroke-width='1.4'/%3E%3C/svg%3E")}

/* eyebrows: spaced caps (the reference has no tracking; ours does) */
.eyebrow{font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0 0 12px}
.eyebrow.light{color:var(--accent)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55}
/* section head: eyebrow, H2, the 36x4 rule, a bold line, a paragraph */
.hd{margin-bottom:28px}
.hd h2{max-width:26ch;margin-bottom:0}
.hd h2::after{content:"";display:block;width:36px;height:4px;background:var(--accent);margin:18px 0 0}
.hd-c{text-align:center}.hd-c h2{margin-inline:auto}.hd-c h2::after{margin-inline:auto}
.hd-strong{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14.5px;margin:18px 0 0}
.hd-sub{max-width:46em;color:var(--muted);font-size:18px;margin:16px 0 0}
.dark .hd h2{color:#fff}.dark .hd-sub{color:var(--steel)}

/* ── buttons: uppercase, dark ink on yellow; hover lifts 1px ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 22px;border-radius:4px;border:2px solid transparent;font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;line-height:1;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.btn svg,.callbar svg,.ftr-facts svg,.call-big svg,.hdr-phone svg,.mega-phone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn .arr{width:18px;height:18px}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line-light{border-color:rgba(255,255,255,.8);color:#fff;background:rgba(0,0,0,.2)}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn-accent:hover{background:var(--accent-hover);color:var(--accent-ink)}
  .btn-dark:hover{background:#000;color:var(--accent)}
  .btn-line:hover{background:var(--ink);color:#fff}
  .btn-line-light:hover{background:#fff;color:var(--deep)}
}
.btn-lg{min-height:56px;font-size:16px;padding:14px 26px}
.btn-sm{min-height:40px;font-size:13px;padding:9px 16px}
.btn-block{display:flex;width:100%}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:26px}
a[href^="tel:"],a[href^="sms:"]{white-space:nowrap}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic .fill,svg .fill{fill:currentColor;stroke:none}
/* "Illustration" tag on every image */
.cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
:is(.card-img,.post-img,.quote-bg,.callbox-bg,.cta-bg) .cap{position:absolute;z-index:2;left:8px;bottom:8px;margin:0;padding:3px 7px;border-radius:3px;background:rgba(34,18,63,.72);color:#fff;line-height:1.3}

/* ── header: white, 3px yellow rule on top, 84px; past it, a compact 64px bar slides down ── */
.hdr-ph{height:var(--hdr)}
.hdr{position:relative;z-index:60;height:var(--hdr);background:#fff;border-top:3px solid var(--accent);box-shadow:0 1px 0 var(--line)}
.hdr.stuck{position:fixed;top:0;left:0;right:0;height:64px;box-shadow:0 0 15px 1px rgba(0,0,0,.09);animation:hdr-in .52s ease backwards}
@keyframes hdr-in{0%{transform:translateY(-100%);opacity:0}10%{opacity:1;transform:translateY(-100%)}to{transform:none}}
.bar{display:flex;align-items:center;gap:18px;height:100%}
.brand{display:flex;align-items:center;flex:none;min-height:44px}
.brand svg{height:36px;width:auto}
.hdr.stuck .brand svg{height:30px}
.nav{margin-left:auto;height:100%}
.nav-l{list-style:none;margin:0;padding:0;display:flex;height:100%}
.nav-l>li{display:flex;align-items:center}
.nav-l>li>a{display:flex;align-items:center;gap:4px;height:100%;padding:0 12px;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:72%;font-weight:600;font-size:18px;letter-spacing:0;white-space:nowrap}
.nav-l>li>a[aria-current]{box-shadow:inset 0 -3px 0 var(--accent)}
.nav-l>li:hover>a,.nav-l>li:focus-within>a{color:var(--accent-text)}
.caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.nav-l>li:hover .caret{transform:rotate(180deg)}
/* dropdowns + mega: fade 200ms; the 150ms delay on the hidden state keeps diagonal mouse paths from dropping them */
.has-menu{position:relative}
.drop,.mega{position:absolute;top:100%;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .35s;transition-delay:.15s,.35s}
.has-menu:hover>.drop,.has-menu:focus-within>.drop,.has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transition-delay:0s}
.nav-l>li[data-closed]>.drop,.nav-l>li[data-closed]>.mega{opacity:0;visibility:hidden}
.drop{left:0;width:240px;list-style:none;margin:0;padding:10px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.2);border-top:3px solid var(--accent)}
.drop a{display:block;padding:9px 12px;border-radius:3px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.drop a:hover{background:var(--paper);color:var(--accent-text)}
.mega{left:0;right:0;background:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.28);border-top:1px solid var(--line)}
.mega-in{display:grid;grid-template-columns:1fr 1fr 340px;gap:36px;padding-top:30px;padding-bottom:34px}
.mega-h{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0 0 12px}
.mega-links,.bolts{list-style:none;margin:0;padding:0}
.mega-links li,.bolts li{position:relative;padding-left:26px}
.mega-links li::before,.bolts li::before,.bul li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;background:var(--bolt) no-repeat center/contain}
.mega-links a{display:block;padding:7px 0;color:var(--ink);text-decoration:none;font-weight:600}
.mega-links a:hover{color:var(--accent-text);text-decoration:underline}
.mega-cta{background:var(--deep);color:var(--steel);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start}
.mega-cta p{margin:0}
.mega-t{font-family:var(--display);font-stretch:70%;font-weight:800;font-size:28px;line-height:1.05;color:#fff}
.mega-phone{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--display);font-stretch:72%;font-weight:800;font-size:28px}
.mega-phone svg{stroke:var(--accent)}
.hdr-phone{display:flex;align-items:center;gap:10px;flex:none;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:72%;font-weight:800;font-size:25px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.hdr-phone svg{width:34px;height:34px;padding:8px;border-radius:50%;background:var(--accent);stroke:var(--ink)}
.hdr-phone:hover span{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.hdr-cta{flex:none;min-height:46px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;min-width:44px;min-height:44px;cursor:pointer}
.burger span{display:block;width:26px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px}
/* phone menu: right off-canvas, 300px, slides in .5s (transform), scrim fades; + rotates to x */
.mnav{position:fixed;inset:0;z-index:95}
.mnav-scrim{position:absolute;inset:0;background:rgba(34,18,63,.55);opacity:0;transition:opacity .5s}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,88vw);background:var(--deep);color:#fff;padding:64px 22px calc(24px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;gap:12px}
.mnav.open .mnav-scrim{opacity:1}
.mnav.open .mnav-panel{transform:none}
.mnav-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.mnav-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.mnav-l{list-style:none;margin:0 0 10px;padding:0}
.mnav-l>li{border-bottom:1px solid rgba(255,255,255,.12)}
.mnav-l a,.mnav-l summary{display:flex;align-items:center;justify-content:space-between;min-height:50px;color:#fff;text-decoration:none;font-family:var(--body);font-weight:400;font-size:18px;cursor:pointer;list-style:none}
.mnav-l summary::-webkit-details-marker{display:none}
.mnav-l details ul{list-style:none;margin:0 0 10px;padding:0 0 0 12px}
.mnav-l details a{min-height:44px;font-family:var(--body);font-stretch:100%;font-size:16px;font-weight:500;text-transform:none;letter-spacing:0;color:#ece6f6}
.plus{position:relative;width:16px;height:16px;transition:transform .3s}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--accent)}
.plus::after{transform:rotate(90deg)}
details[open] .plus{transform:rotate(45deg)}
.mnav-lic{font-size:13px;color:var(--steel);margin:6px 0 0}
html.menu-open{overflow:hidden}

/* ══════════ home bands ══════════ */
.blk{padding:80px 0 60px}
.blk.dark{background:var(--deep);color:#fff;padding:60px 0}
.intro{background:var(--paper)}
.intro-p{max-width:60em;font-size:17.5px}
/* services: text + tall photo, then the 4x2 image-card grid */
.svc{background:var(--paper)}
.svc-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:48px}
.svc-top.no-img{grid-template-columns:1fr}
.svc-top p{color:var(--muted)}
.svc-fig{margin:0;position:relative}
.svc-fig img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.svc-fig figcaption{position:absolute;left:10px;bottom:10px;margin:0;padding:3px 7px;border-radius:3px;background:rgba(34,18,63,.72);color:#fff}
/* reviews: one at a time in a translucent box */
.revs-band .car-revs{max-width:920px;margin:0 auto}
.revs{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.rev{margin:0;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r);padding:20px 22px 16px}
.rev-t{white-space:pre-line;margin:0 0 12px;font-size:17px;line-height:1.55}
.rev-t::before{content:"\201C"}
.rev-t::after{content:"\201D"}
.rev-by{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.rev-by b{font-family:var(--display);font-stretch:72%;font-size:20px;font-weight:800}
.rev-src{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.rev-five{display:inline-flex;margin-left:4px}.rev-five svg{width:66px;height:13px}.rev-five .s{fill:#FBBC05}
.g-mark{width:15px;height:15px;flex:none}
.revs-band .rev{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;text-align:center;padding:40px clamp(20px,6vw,72px) 34px}
.revs-band .rev-t{font-size:clamp(18px,2vw,22px);line-height:1.5}
.revs-band .rev-by{justify-content:center}
.revs-band .rev-src{color:var(--accent)}
.revs-more{margin:18px 0 0}
.revs-band .revs-more{text-align:center}
.revs-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--accent-text)}
.revs-band .revs-more a{color:#fff;border:2px solid #fff;border-radius:4px;padding:0 18px;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.revs-band .revs-more a:hover{background:#fff;color:var(--deep)}
.revs-more .arr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.revs-sec .revs{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
/* carousels: a native scroll-snap row; site.js shows the arrows */
.car{position:relative;--per:1;--gap:30px}
.car-view{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}
.car-view::-webkit-scrollbar{display:none}
.car-view:focus-visible{outline-offset:4px}
.car-track{display:flex;gap:var(--gap);margin:0;padding:4px 0 14px;list-style:none}
.car-track>li{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start;min-width:0}
.car-nav{display:flex;justify-content:center;gap:10px;margin-top:16px}
.car-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background-color .15s,opacity .2s}
.car-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.car-btn:disabled{opacity:.35;cursor:default}
.car-pause{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.car-posts{--per:3}
/* guides: arrows sit outside the 1200px row once there is room for them (below it before that) */
@media (min-width:1340px){.car-posts .car-nav{position:absolute;inset:38% -66px auto -66px;z-index:2;justify-content:space-between;margin:0;pointer-events:none}.car-posts .car-btn{pointer-events:auto}}
/* reviews: prev/next inside the box at its edges, the pause button under it */
@media (min-width:761px){.car-revs .car-prev,.car-revs .car-next{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:2}.car-revs .car-prev{left:12px}.car-revs .car-next{right:12px}.revs-band .rev{padding-inline:72px}}
/* guide cards */
.guides-band{background:#fff}
.posts{list-style:none;margin:0;padding:0}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}
.post{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-card);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .3s ease-out,box-shadow .3s ease-out}
.post-img{position:relative;display:block;overflow:hidden;background:var(--deep)}
.post-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.post-blank{display:grid;place-items:center;aspect-ratio:16/10;color:var(--accent)}
.post-blank .ic{width:56px;height:56px}
.post-date{position:absolute;top:12px;right:12px;z-index:2;padding:5px 10px;border-radius:100px;background:var(--accent);color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.post-t{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;gap:8px}
.post-t b{font-family:var(--display);font-stretch:72%;font-size:24px;line-height:1.1}
.post-t>span{color:var(--muted);font-size:15.5px;line-height:1.5}
@media (hover:hover){.post:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);color:var(--ink)}.post:hover .post-img img{transform:scale(1.04)}}
.card-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.card-more .arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4}
.areas{background:var(--paper)}
.home-faq{padding-top:56px;padding-bottom:20px}

/* image cards (services grid, hubs): photo on top, white caption box, condensed title */
.cards{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.card{display:flex;flex-direction:column;height:100%;background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh-card);border:1px solid var(--line);transition:transform .3s ease-out,box-shadow .3s ease-out}
.card-img{position:relative;display:block;overflow:hidden}
.card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.card-t{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.card-t b{display:block;font-family:var(--display);font-stretch:72%;font-size:23px;line-height:1.1;margin-bottom:6px}
.card-t>span{display:block;color:var(--muted);font-size:15.5px;line-height:1.5;margin-bottom:12px}
@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);color:var(--ink)}.card:hover .card-img img{transform:scale(1.04)}}
.home-svc{grid-template-columns:repeat(4,1fr);margin-top:0}
.home-svc .card-t{align-items:center;justify-content:center;text-align:center;padding:18px 14px 20px}
.home-svc .card-t b{font-size:21px;margin:0}
.home-svc .card-t>span,.home-svc .card-more{display:none}
.card-call{background:var(--deep);color:#fff;justify-content:center}
.card-call:hover{color:#fff}
.card-call-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 18px}
.card-call svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-call b{font-family:var(--display);font-stretch:72%;font-size:23px;line-height:1.1;text-transform:uppercase;white-space:normal}
.card-call em{font-style:normal;font-family:var(--display);font-stretch:72%;font-weight:800;font-size:21px;color:var(--accent);white-space:nowrap}
.cards.compact .card{border-top:4px solid var(--accent)}

/* service-area map: Leaflet + OpenStreetMap tiles, city links under it */
.amap{margin-top:8px}
.amap-map{height:460px;isolation:isolate;border-radius:var(--r);overflow:hidden;background:#efe6d6;border:1px solid var(--line)}
.amap .leaflet-container{font-family:var(--body)}
.amap .leaflet-tile-pane{filter:saturate(.25) contrast(.9) brightness(1.04);opacity:.6}
.amap-pin{border-radius:50%;background:var(--accent);border:2px solid var(--ink)}
.amap .leaflet-tooltip.amap-tip{padding:1px 6px;border:1px solid rgba(34,18,63,.3);border-radius:3px;background:#fff;color:var(--ink);font:700 13px/1.35 var(--body);box-shadow:none}
.amap .leaflet-tooltip.amap-tip::before{display:none}
.amap .leaflet-popup-content{margin:10px 14px;font:15px/1.4 var(--body)}
.amap .leaflet-popup-content a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent-text)}
.amap .leaflet-container a.leaflet-popup-close-button{width:44px;height:44px;font:24px/44px var(--body)}
.amap-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.amap-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:var(--display);font-stretch:75%;font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.amap-chips a:hover{background:var(--ink);color:#fff}

/* how-it-works: round numbered steps */
.steps{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.steps li{counter-increment:s;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-stretch:70%;font-weight:800;font-size:28px;line-height:1;margin-bottom:14px}
.steps h3{font-size:22px}
.steps p{color:var(--muted);font-size:16px}

/* ══════════ inner pages ══════════ */
/* title band: photo under a charcoal gradient, H1 in a dark box with an 8px yellow bar and the
   breadcrumbs, nothing else (about 300px desktop, 250px phone); fades in */
.phero{position:relative;overflow:hidden;background:var(--deep);color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:300px}
.phero.slim{min-height:0}
.phero-media{position:absolute;inset:0;margin:0}
.phero-media img{width:100%;height:100%;object-fit:cover}
.phero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,18,63,.88),rgba(34,18,63,.62) 60%,rgba(34,18,63,.45))}
.phero-media figcaption{position:absolute;right:12px;bottom:10px;z-index:2;color:rgba(255,255,255,.75)}
.phero-in{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:56px;animation:fade .7s cubic-bezier(.445,.05,.55,.95) backwards}
@keyframes fade{from{opacity:0}}
.phero.slim .phero-in{padding-top:56px;padding-bottom:44px}
.ttl{display:inline-block;max-width:100%;margin:0 0 14px;padding:10px 24px 12px;background:rgba(0,0,0,.32);border-left:8px solid var(--accent)}
.ttl h1{color:#fff;margin:0;max-width:24ch}
.phero .lead{max-width:36em;color:#ece6f6;margin:14px 0 0}
.phero .lead a{color:#fff;text-decoration-color:var(--accent);text-underline-offset:3px}
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14.5px;color:#e3dcf0}
.bc li:not(:last-child)::after{content:"/";margin-left:6px;opacity:.6}
.bc a{color:#fff;display:inline-block;padding:11px 4px;margin:-11px -4px}
.bc li[aria-current]{opacity:.85}

/* article layout: one full-width stack of white cards on paper (no sidebar); the quote page
   centres a 760px column */
.art{padding-top:48px;padding-bottom:56px}
.art-end{padding-top:56px}
.est .art{max-width:792px}
.est .art-end{padding-top:0}
.art-main{min-width:0}
.art-main>:last-child{margin-bottom:0}
.sec{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-card);border:1px solid var(--line);padding:38px 44px 30px;margin-bottom:30px}
.sec h2{font-size:clamp(28px,2.8vw,38px)}
.sec h2::after{content:"";display:block;width:36px;height:4px;background:var(--accent);margin-top:16px}
.sec>p,.sec>.bul,.sec-copy>p{max-width:80ch}
.sec .lead{color:var(--ink)}
.sec .cta-row{margin:22px 0 8px}
/* card with a photo: copy left (centred), the photo fills the card's height right */
@media (min-width:1101px){
  .sec.has-fig{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,40%);column-gap:44px;align-items:stretch}
  .sec.has-fig>.sec-copy{align-self:center}
  .sec.has-fig>.fig{position:relative;margin:0}
  .sec.has-fig>.fig img{height:100%;min-height:460px;max-height:none;object-fit:cover}
  .sec.has-fig>.fig figcaption,.grp-fig figcaption{position:absolute;left:10px;bottom:10px;margin:0;padding:3px 7px;border-radius:3px;background:rgba(34,18,63,.72);color:#fff}
}
.bul{margin:0 0 1em;padding:0;list-style:none}
.bul li{position:relative;padding-left:28px;margin-bottom:8px}
.bul a,.sources a{padding:4px 0}
/* touch: link-only lists and sources get 44px rows */
@media (pointer:coarse){
  .bul.links a,.sources a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .bul.links li::before{top:14px}
}
.fig{margin:24px 0}
.fig img{width:100%;max-height:min(620px,78vh);object-fit:cover;border-radius:var(--r)}
figcaption{color:var(--muted);margin-top:6px}
.tbl-wrap{overflow-x:auto;margin:18px 0}
.tbl{border-collapse:collapse;width:100%;font-size:16px;background:var(--card)}
.tbl th,.tbl td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.tbl th{font-family:var(--display);font-stretch:75%;background:var(--paper)}
.updated{font-size:15px;color:var(--muted);border-left:4px solid var(--accent);padding-left:12px}
.facts ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.facts li{background:var(--paper);border-radius:var(--r);padding:16px 18px}
.facts li p{margin:0}
.facts .src{font-size:14.5px;color:var(--muted);margin-top:8px}
.sources ol{padding-left:22px;font-size:15.5px}
.sources li{margin-bottom:6px;word-break:break-word}
.rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rel a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:var(--paper);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600}
.rel a:hover{background:var(--ink);color:#fff}
.rel .arr{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;flex:none}
/* FAQ: live search + light grey question bars with a + that turns to x */
.faq-find{margin:0 0 22px}
.faq-find label{display:block;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.faq-find input{font:inherit;font-size:16px;width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(30,18,53,.25);border-radius:4px;background:#fffdf9}
.faq-find input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent)}
.faq-none{margin:12px 0 0;color:var(--muted)}
.faq-page>.faq-find{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-card);border:1px solid var(--line);padding:22px 24px}
.faq-item{background:#f6ecdd;border-radius:4px;margin-bottom:8px}
.faq-item summary{cursor:pointer;list-style:none;padding:15px 54px 15px 18px;min-height:44px;position:relative;font-weight:600;font-size:18px;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before,.faq-item summary::after{content:"";position:absolute;right:20px;top:50%;width:16px;height:2.5px;margin-top:-1px;background:var(--ink);transition:transform .3s}
.faq-item summary::after{transform:rotate(90deg)}
.faq-item[open] summary::before{transform:rotate(45deg)}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-item[open]{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.faq-a{padding:0 18px 6px}
.hub-intro{padding:64px 0 0}
.hub-intro .hd{margin-bottom:0}
.hub{padding-top:44px;padding-bottom:56px}
.hub .sec{margin-top:30px}
.legal{padding-top:44px;padding-bottom:56px}
/* services hub: one white card per group, bolt list left (centred), a tall photo right */
.grp{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:stretch}
.grp-copy{align-self:center}
.grp .bolts li{margin-bottom:14px}
.bolts a{font-family:var(--display);font-stretch:75%;font-weight:700;font-size:21px;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.bolts a:hover{color:var(--accent-text);text-decoration:underline}
.bolts li>span{display:block;color:var(--muted);font-size:15.5px;line-height:1.5}
.grp-fig{position:relative;margin:0}
.grp-fig img{aspect-ratio:4/3}
@media (min-width:1101px){.grp-fig img{aspect-ratio:auto;height:100%;min-height:340px;max-height:none;object-fit:cover}}

/* in-body call box as a CTA band: photo under a charcoal tint */
.callbox{position:relative;overflow:hidden;margin:0 0 30px;padding:40px 44px 34px;border-radius:var(--r);background:var(--deep);color:#ece6f6;box-shadow:var(--sh2)}
.callbox-bg{position:absolute;inset:0}
.callbox-bg img{width:100%;height:100%;object-fit:cover}
.callbox-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,18,63,.92),rgba(34,18,63,.72))}
.callbox-bg .cap{left:auto;right:8px}
.callbox>p,.callbox>div{position:relative;z-index:1}
.callbox p{margin:0 0 16px;max-width:40em}
.callbox .callbox-h{font-family:var(--display);font-stretch:70%;font-size:clamp(28px,3vw,36px);font-weight:800;line-height:1.05;color:#fff;margin-bottom:10px}
.callbox .callbox-h::after{content:"";display:block;width:36px;height:4px;background:var(--accent);margin-top:14px}
.callbox strong{color:#fff}
.callbox-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
/* full-bleed CTA band between the cards and the FAQ: photo under a tint, H2 left, one line, one button */
.cta-band{position:relative;overflow:hidden;padding:60px 0;color:#ece6f6;background:var(--deep)}
.cta-bg{position:absolute;inset:0}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,18,63,.92) 30%,rgba(34,18,63,.6))}
.cta-bg .cap{left:auto;right:8px}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:#fff}
.cta-band h2::after{content:"";display:block;width:36px;height:4px;background:var(--accent);margin-top:16px}
.cta-band p{max-width:40em;margin:0 0 20px}
.cta-band strong{color:#fff}
.hours{margin:0;font-size:15px;color:var(--muted)}
.hours.light{color:#e3dcf0}

/* ── lead form ── */
.lf{background:#fff;color:var(--ink);border-radius:var(--r);padding:26px 26px 20px;box-shadow:0 30px 60px -28px rgba(0,0,0,.65);border-top:5px solid var(--accent)}
.lf .lf-title{font-family:var(--display);font-stretch:70%;font-size:30px;font-weight:800;line-height:1.05;margin:0 0 6px;color:var(--ink)}
.lf-sub{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 16px}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.lf input::placeholder,.lf textarea::placeholder{color:#6b6080}
.lf-f{display:grid;gap:4px;min-width:0}
.lf-wide{grid-column:1/-1}
.lf-f label{font-size:12px;font-weight:700;letter-spacing:.07em;white-space:nowrap;text-transform:uppercase;color:var(--ink)}
.lf-f .opt{font-size:12px;letter-spacing:0;text-transform:none}
.lf input,.lf select,.lf textarea{font:inherit;font-size:16px;width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(30,18,53,.3);border-radius:4px;background:#fffdf9;color:var(--ink)}
.lf textarea{resize:vertical}
.lf input:focus,.lf select:focus,.lf textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent);background:#fff}
.lf-consent{font-size:13px;line-height:1.45;color:var(--muted);margin:14px 0 12px}
.lf-consent a{color:var(--accent-text);font-weight:600}
.lf-err,.lf-ferr,.wiz-err{color:#a1260d;font-weight:700}
.lf-err{margin:10px 0 0;font-size:15px}
.lf-ferr{font-size:14px;line-height:1.35}
.lf [aria-invalid=true]{border-color:#a1260d}
.lf-done{padding:8px 0}
.lf-done:focus{outline:none}
.lf:has(.lf-done:not([hidden])){display:flex;flex-direction:column;justify-content:center}

/* ── #quote: the CTA band at the foot of every page: photo under a tint, pitch left, form right ── */
.quote{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding:80px 0}
.quote-bg{position:absolute;inset:0}
.quote-bg img{width:100%;height:100%;object-fit:cover}
.quote-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,18,63,.94) 30%,rgba(34,18,63,.7))}
.quote-bg .cap{left:auto;right:8px}
.quote-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:56px;align-items:center}
.quote-in.no-form{grid-template-columns:1fr}
.quote h2{color:#fff}
.quote h2::after{content:"";display:block;width:36px;height:4px;background:var(--accent);margin-top:18px}
.quote .lead{color:#e3dcf0}
.quote-copy{display:grid;justify-items:start;gap:6px}
.call-big{display:flex;align-items:center;gap:12px;margin-top:8px;color:#fff;text-decoration:none;font-family:var(--display);font-stretch:70%;font-weight:800;font-size:clamp(38px,4.4vw,56px);line-height:1;min-height:48px}
.call-big svg{width:32px;height:32px;stroke:var(--accent)}
.call-big:hover{color:var(--accent)}

/* ── footer: 4 columns, a legal row, a darker bottom bar ── */
.ftr{background:var(--deep);color:var(--steel);padding:64px 0 0;font-size:15.5px}
.ftr a{color:#fff}
.ftr-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.ftr-brand .brand svg{height:32px}
.ftr-brand p{margin:16px 0}
.ftr-facts{font-style:normal;display:grid;gap:4px;margin:16px 0}
.ftr-facts .ftr-name{font-weight:700;color:#fff}
.ftr-facts a{display:flex;align-items:center;min-height:44px;gap:8px;font-weight:700;text-decoration:none;font-size:17px}
.ftr-facts svg{stroke:var(--accent)}
.ftr-col h2{font-family:var(--body);font-stretch:100%;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ftr-col ul{list-style:none;margin:0;padding:0}
.ftr-col li{margin-bottom:6px}
.ftr-col a{text-decoration:none;color:#e3dcf0}
.ftr-col a:hover{color:#fff;text-decoration:underline}
.ftr-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;padding-bottom:18px;text-align:center}
.ftr-legal p{margin:0 0 10px}
.ftr-links{display:flex;justify-content:center;flex-wrap:wrap}
.ftr-links a{padding:11px 14px;text-decoration:none}
.ftr-links a+a{border-left:1px solid rgba(255,255,255,.25)}
.ftr-links a:hover{text-decoration:underline}
.ftr-bot{background:#160a2a;padding:14px 0}
.ftr-bot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;font-size:14px}
.ftr-bot p{margin:0}
.credit a{color:#e3dcf0}
@media (pointer:coarse){.ftr-col li{margin:0}.ftr-col a{display:flex;align-items:center;min-height:44px}}
.callbar{display:none}

/* ── quote wizard ── */
html.wiz-open{overflow:hidden}
.wiz{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.wiz-backdrop{position:absolute;inset:0;background:rgba(22,10,42,.72)}
.wiz-card{position:relative;width:min(560px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--paper);border-radius:var(--r);border-top:6px solid var(--accent);box-shadow:var(--sh2);padding:20px 22px 18px}
.wiz.inline{position:static;display:block;padding:0;margin:0 0 30px}
.wiz.inline .wiz-card{width:100%;max-height:none;background:#fff;box-shadow:var(--sh-card);border:1px solid var(--line);border-top:6px solid var(--accent);padding:26px 30px 22px}
.wiz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.wiz-dots{display:flex;gap:6px}
.wiz-dots i{width:34px;height:5px;background:var(--line)}
.wiz-dots i.on{background:var(--accent)}
.wiz-x{background:none;border:0;cursor:pointer;padding:6px;min-width:44px;min-height:44px;display:grid;place-items:center;margin:-8px -10px -8px 0}
.wiz-x svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2}
.wiz-q{font-size:32px}
.wiz-q:focus{outline:none}
.wiz-chips{display:grid;gap:8px;margin:14px 0}
.wiz-chip{text-align:left;font:inherit;font-weight:600;font-size:17px;padding:13px 16px;border:2px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);cursor:pointer}
.wiz-chip:hover{border-color:var(--ink)}
.wiz-chip.on{border-color:var(--ink);background:var(--accent);color:var(--accent-ink)}
.wiz-field{display:grid;gap:6px;margin:12px 0}
.wiz-field label{font-weight:700}
.wiz-field input,.wiz-field textarea{font:inherit;font-size:16px;padding:12px;border:2px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
.wiz-field input:focus,.wiz-field textarea:focus{border-color:var(--ink);outline:none}
.opt,.wiz-hint{font-weight:400;color:var(--muted);font-size:14.5px}
.wiz-next{width:100%;margin-top:8px}
.wiz:not(.inline) .wiz-card{scroll-padding-bottom:72px}
.wiz:not(.inline) .wiz-next:not([data-wiz-submit]){position:sticky;bottom:0;box-shadow:0 -10px 0 var(--paper),0 18px 0 var(--paper)}
.wiz-photo-add{display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px dashed var(--line);border-radius:var(--r);cursor:pointer;font-weight:600;margin:8px 0}
.wiz-photo-add svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.wiz-photo-add:focus-within{outline:3px solid var(--accent-text)}
.wiz-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.wiz-thumb{position:relative}
.wiz-thumb img{width:72px;height:72px;object-fit:cover;border-radius:var(--r)}
.wiz-thumb button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer}
.wiz-num{margin:14px 0 0;font-size:15.5px}
.wiz-chg{background:none;border:0;padding:0 6px;min-height:44px;font:inherit;font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wiz-consent{font-size:13px;line-height:1.45;color:var(--muted);margin:14px 0 6px}
.wiz-err{margin:10px 0 0}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:15px}
.wiz-back{background:none;border:0;font:inherit;font-weight:600;cursor:pointer;color:var(--ink);min-height:44px;padding:0 8px 0 0}
.wiz-call{margin-left:auto;display:inline-flex;align-items:center;min-height:44px}

@view-transition{navigation:auto}
@media print{.callbar,.hdr-ph,.mnav{display:none}}

/* ── responsive ── */
@media (max-width:1240px){
  .nav-l>li>a{padding:0 9px;font-size:17px}
  .hdr-phone{font-size:22px}
  .hdr-phone svg{display:none}
}
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:block;margin-left:0}
  .hdr-phone{margin-left:auto}
  .ftr-cols{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1/-1}
  .home-svc{grid-template-columns:repeat(3,1fr)}
  .car-posts{--per:2}
  .grp{grid-template-columns:1fr}
  .grp-fig{max-width:560px}
  .mega{display:none}
}
@media (max-width:900px){
  :root{--hdr:64px}
  .hdr-ph{display:contents}
  .hdr,.hdr.stuck{position:sticky;top:0;height:64px;animation:none}
  .brand svg,.hdr.stuck .brand svg{height:30px}
  .quote-in,.svc-top{grid-template-columns:minmax(0,1fr)}
  .home-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hdr-cta,.hdr-phone{display:none}
  .burger{margin-left:auto}
  html{scroll-padding-top:72px;scroll-padding-bottom:84px}
  body{font-size:16.5px}
  .blk{padding:60px 0 48px}
  .blk.dark{padding:48px 0}
  .home-svc{gap:12px}
  .home-svc .card-t{padding:12px 10px 14px}
  .home-svc .card-t b{font-size:18px}
  .car{--gap:16px}
  .car-posts{--per:1}
  .car-posts .car-track>li{flex-basis:86%}
  .revs-band .rev{padding:28px 18px 24px}
  .phero{min-height:250px}
  .phero-in{padding:48px 16px 36px}
  .ttl{padding:8px 16px 10px;border-left-width:6px}
  .ttl h1{font-size:clamp(30px,8.6vw,40px)}
  .cta-row .btn{width:100%}
  .sec{padding:28px 20px 20px;margin-bottom:20px}
  .callbox{padding:28px 20px 24px;margin-bottom:20px}
  .cta-band{padding:48px 0}
  .cta-band .btn{width:100%}
  .callbox-act .btn{flex:1 1 100%}
  .lf{padding:20px 16px 16px}
  .lf-grid{grid-template-columns:1fr}
  .lf .lf-title{font-size:26px}
  .lf-f label,.lf-f .opt{font-size:13px}
  .rel{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:18px}
  .steps li{display:grid;grid-template-columns:52px 1fr;column-gap:16px}
  .steps li::before{width:52px;height:52px;font-size:24px;margin:0;grid-row:span 2}
  .art{padding-top:28px;padding-bottom:36px}
  .quote{padding:56px 0}
  .quote-in{gap:28px}
  .ftr{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .ftr-cols{grid-template-columns:1fr}
  .ftr-col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .ftr-col li{margin:0}
  .ftr-col a{display:flex;align-items:center;min-height:44px}
  .ftr-bot-in{justify-content:center;text-align:center}
  .est .art{padding-top:28px}
  .wiz.inline .wiz-card{padding:20px 16px 16px}
  .callbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--deep);border-top:1px solid rgba(255,255,255,.14)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;padding:0 8px;border-radius:4px;font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
  .callbar .cb-quote{background:var(--accent);color:var(--accent-ink)}
  .callbar .cb-call{color:#fff;border:2px solid rgba(255,255,255,.7)}
  .wiz{padding:0;place-items:end stretch}
  .wiz-card{width:100%;max-height:92svh;border-radius:0}
}
@media (max-width:400px){
  .callbar a{font-size:13.5px;letter-spacing:.02em;gap:5px}
  .callbar svg{width:15px;height:15px}
}
@media (max-width:350px){.bar{gap:10px}.callbar a{font-size:12.5px;letter-spacing:0;padding:0 4px;min-width:0}.callbar svg{display:none}}
/* phones held sideways: the header scrolls away and the call bar slims, so the fixed chrome is ~52px */
@media (max-width:900px) and (max-height:500px){
  .hdr,.hdr.stuck{position:relative}
  .callbar{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .callbar a{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .car-view{scroll-behavior:auto}
  @view-transition{navigation:none}
}

/* ══════════ Junk Dunk identity ══════════
   Overrides the chassis above. Sticker cards, pill buttons, the dotted ball-arc rule. */
:root{--r:14px;--hard:5px 5px 0 var(--ink);--hard-sm:3px 3px 0 var(--ink);--sh-card:var(--hard);--sh-hover:8px 8px 0 var(--ink);--edge:2.5px solid var(--ink);
  --arc:radial-gradient(circle,var(--accent) 3px,transparent 3.5px) 0 50%/13px 10px repeat-x}
body{font-size:17.5px}
h1,h2,h3{font-stretch:85%;letter-spacing:-.01em;text-transform:none}
h1{font-size:clamp(36px,4.6vw,58px)}
h2{font-size:clamp(30px,3.4vw,44px);font-weight:800}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.12em;padding:5px 11px 4px;border-radius:999px;background:var(--ink);color:#fff}
.eyebrow.light{background:var(--accent);color:var(--accent-ink)}
.hd h2::after,.sec h2::after,.quote h2::after,.cta-band h2::after,.callbox .callbox-h::after{width:72px;height:10px;background:var(--arc)}
/* buttons: fat pills with a hard shadow; press = the shadow closes */
.btn{border-radius:999px;border:var(--edge);letter-spacing:.04em;box-shadow:var(--hard-sm);transition:transform .12s,box-shadow .12s,background-color .15s,color .15s}
.btn-accent{border-color:var(--ink)}
.btn-dark{border-color:var(--ink)}
.btn-line-light{border-color:#fff;box-shadow:3px 3px 0 var(--accent)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
@media (hover:hover){.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.btn-line-light:hover{box-shadow:4px 4px 0 var(--accent)}}
/* sticker surfaces */
.sec,.card,.post,.lf,.wiz.inline .wiz-card,.faq-page>.faq-find,.stepc>li,.take-col{border:var(--edge);box-shadow:var(--hard)}
.callbox,.cta-band .btn{box-shadow:var(--hard)}
.callbox{border:var(--edge)}
.lf{border-top:var(--edge)}
.wiz-card{border-top:6px solid var(--accent)}
.card-img,.post-img{border-bottom:var(--edge)}
.cards.compact .card{border-top:var(--edge)}
/* header: cream, a grape rule under it; the wordmark is HTML text in the display face */
.hdr{background:var(--paper);border-top:0;box-shadow:0 2.5px 0 var(--ink)}
.hdr.stuck{box-shadow:0 2.5px 0 var(--ink),0 10px 20px -12px rgba(34,18,63,.4)}
.brand{gap:8px;text-decoration:none;color:var(--ink)}
.brand .logo-m{width:44px;height:44px;flex:none;transition:transform .3s}
.hdr.stuck .brand .logo-m{width:38px;height:38px}
.brand-t{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:29px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.brand-t b{color:var(--accent-text);font-weight:800}
.brand-d,.brand-d .brand-t{color:#fff}
.brand-d .brand-t b{color:var(--accent)}
@media (hover:hover){.brand:hover .logo-m{transform:rotate(-8deg)}}
.nav-l>li>a{font-stretch:85%;font-weight:700;font-size:17px}
.nav-l>li>a[aria-current]{box-shadow:inset 0 -4px 0 var(--accent)}
.drop{border:var(--edge);border-radius:var(--r);box-shadow:var(--hard)}
.mega{border-bottom:var(--edge)}
.hdr-phone{font-stretch:85%;font-size:22px}
.hdr-phone svg{border:2px solid var(--ink)}
.ftr-brand .brand .logo-m{width:48px;height:48px}

/* home hero: cream court with a big center-circle arc, giant two-line headline, the photo in a
   tilted sticker frame, the ball drops onto its corner */
.jh{position:relative;overflow:hidden;background:var(--paper);border-bottom:var(--edge)}
.jh::before{content:"";position:absolute;width:880px;height:880px;right:-260px;top:-300px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 0 0 110px color-mix(in srgb,var(--accent) 7%,transparent)}
.jh-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:64px;padding-bottom:76px}
.jh-h1{margin:0;font-size:inherit;text-transform:none;letter-spacing:normal;max-width:none}
.jh-h1 .eyebrow{line-height:1.3;font-stretch:100%}
.jh-h1 .jh-title{display:block}
.jh-title{font-size:clamp(56px,8.4vw,118px);line-height:.9;letter-spacing:-.035em;font-stretch:78%;margin:18px 0 22px}
.jh-title .sh-line{display:block}
.jh-title .sh-line+.sh-line{color:var(--accent-text)}
.jh-title .w{display:inline-block;overflow:hidden;padding-bottom:.06em;vertical-align:top}
.jh-title .w>span{display:inline-block;animation:rise .9s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(200ms + var(--i) * 32ms)}
@keyframes rise{from{transform:translateY(105%)}}
.jh-sub{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:31em;color:var(--muted);margin:0}
.jh-copy .cta-row{margin-top:28px}
.jh-chips{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700;font-size:15.5px}
.jh-chips li{display:flex;align-items:center;gap:7px}
.jh-chips .ic{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent);stroke:var(--ink);stroke-width:3}
.jh-fig{position:relative;margin:0;transform:rotate(2deg);animation:tilt .8s .15s cubic-bezier(.2,.75,.25,1) backwards}
@keyframes tilt{from{transform:rotate(-3deg) translateY(30px);opacity:0}}
.jh-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.jh-fig figcaption{position:absolute;left:14px;bottom:14px;margin:0;padding:3px 8px;border-radius:999px;background:rgba(34,18,63,.78);color:#fff}
.jh-ball{position:absolute;right:-22px;top:-30px;width:86px;height:86px;fill:var(--accent);stroke:var(--ink);stroke-width:1.1;animation:drop 1.1s .7s cubic-bezier(.3,0,.5,1) backwards}
@keyframes drop{0%{transform:translate(-160px,-240px) rotate(-200deg);opacity:0}15%{opacity:1}70%{transform:translate(0,0) rotate(0)}82%{transform:translate(0,-18px)}to{transform:none}}

/* how it works: three sticker cards, a big orange number */
.steps-blk{background:#fff;border-bottom:var(--edge)}
.stepc{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.stepc>li{position:relative;background:var(--paper);border-radius:var(--r);padding:30px 26px 24px}
.stepc-n{position:absolute;top:-20px;right:18px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent);border:var(--edge);font-family:var(--display);font-stretch:80%;font-weight:800;font-size:26px;line-height:1}
.stepc-ic{width:40px;height:40px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.stepc h3{font-size:26px;margin-bottom:8px}
.stepc p{margin:0;color:var(--muted)}

/* services band */
.svc{background:var(--paper)}
.svc-fig img{border:var(--edge);box-shadow:var(--hard)}
.home-svc .card-t b{font-stretch:85%}
.card-call{background:var(--ink)}
.card-call b,.card-call em{font-stretch:85%;text-transform:none}

/* what we take / can't take */
.take-blk{background:#fff;border-top:var(--edge);border-bottom:var(--edge)}
.take{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.take-col{border-radius:var(--r);padding:28px 28px 22px;background:var(--paper)}
.take-col h3{font-size:26px}
.take-no{background:var(--deep);color:var(--steel)}
.take-no h3{color:#fff}
.take-no a{color:var(--accent)}
.take-more{margin:14px 0 0;font-size:15.5px}
.icl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.icl li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;font-weight:600}
.icl .ic{width:40px;height:40px;padding:8px;border-radius:50%;background:#fff;border:2px solid var(--ink);color:var(--ink)}
.icl-no li{font-weight:500;color:#fff}
.icl-no .ic{background:transparent;border-color:var(--accent);color:var(--accent)}

/* where it goes: a grape band, copy left, photo right */
.where{background:var(--deep);color:var(--steel)}
.where-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.where h2{color:#fff}
.where a:not(.btn){color:var(--accent)}
.where-fig{position:relative;margin:0;transform:rotate(-1.5deg)}
.where-fig img{border-radius:var(--r);border:3px solid #fff;box-shadow:8px 8px 0 var(--accent)}
.where-fig figcaption{position:absolute;left:12px;bottom:12px;margin:0;padding:3px 8px;border-radius:999px;background:rgba(34,18,63,.78);color:#fff}

/* area map chips, guides, faq */
.amap-map{border:var(--edge);box-shadow:var(--hard)}
.amap-chips a{border:2px solid var(--ink);border-radius:999px;font-stretch:85%;text-transform:none;font-size:16.5px}
.amap-pin{background:var(--accent);border:2.5px solid var(--ink)}
.post-date{border:2px solid var(--ink)}
.faq-item{border-radius:10px}
.faq-item[open]{box-shadow:inset 0 0 0 2px var(--ink)}

/* inner title band: photo under a grape gradient, the H1 on its own, the arc under it */
.phero-media::after{background:linear-gradient(90deg,rgba(34,18,63,.94),rgba(34,18,63,.7) 60%,rgba(34,18,63,.5))}
.phero{border-bottom:var(--edge)}
.ttl{padding:0;background:none;border-left:0}
.ttl h1{text-transform:none;max-width:22ch}
.ttl h1::after{content:"";display:block;width:96px;height:12px;margin-top:16px;background:var(--arc)}
.updated{border-left-color:var(--accent)}
.facts li{border:2px solid var(--ink)}
.rel a{border:2px solid var(--ink);border-radius:999px;padding:12px 18px}
.steps li::before{border:var(--edge)}

/* quote band + footer */
.quote{border-top:var(--edge)}
.quote-bg::after{background:linear-gradient(90deg,rgba(34,18,63,.95) 30%,rgba(34,18,63,.75))}
.call-big{font-stretch:80%}
.ftr-col h2{color:var(--accent)}
.wiz-chip{border-radius:999px;border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.wiz-chip.on{border-color:var(--ink);box-shadow:var(--hard-sm)}
.wiz-dots i{border-radius:3px}
.callbar .cb-quote{border:2px solid var(--ink)}

@media (max-width:1100px){
  .brand-t{font-size:25px}
}
@media (max-width:900px){
  .jh-in{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:56px}
  .jh-fig{max-width:560px}
  .jh-ball{width:64px;height:64px;right:-8px;top:-24px}
  .stepc{grid-template-columns:minmax(0,1fr);gap:30px}
  .take,.where-in{grid-template-columns:minmax(0,1fr)}
  .where-fig{max-width:520px}
}
@media (max-width:760px){
  .brand .logo-m{width:38px;height:38px}
  .brand-t{font-size:24px}
  .jh-title{font-size:clamp(54px,17vw,86px)}
  .jh-fig img{box-shadow:6px 6px 0 var(--ink)}
  .take-col{padding:22px 18px 18px}
  .sec,.card,.post,.lf,.stepc>li,.take-col,.callbox{box-shadow:4px 4px 0 var(--ink)}
}
/* sms-first CTAs: the big number in the quote band is the text link; "rather call" sits under it */
.quote-alt{margin:4px 0 0;font-size:15px}.quote-alt a{color:#fff;text-decoration-color:var(--accent)}
.call-big svg,.cta-row .btn svg,.callbox-act .btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.callbar .cb-quote svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;flex:none}