/* Brockton Garage Door (S03) - harbor slate + cranberry */
:root{
  --ink:#17222B; --slate:#2E4453; --muted:#4A5966; --fog:#EEF2F4; --mist:#DCE4E9;
  --line:#CBD5DB; --line2:#E1E7EB; --white:#FFFFFF; --deep:#0F171D;
  --cran:#9E1F36; --cran-dk:#6E1426; --cran-lt:#F6D9DE; --pink:#FFB8C4; --green:#1F5A3F;
  --display:'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--cran)}a:hover{color:var(--cran-dk)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--display);font-stretch:76%;font-weight:800;line-height:1.05;margin:0}
h1{font-stretch:72%;font-weight:850;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,42px);margin:0 0 14px}
h3{font-size:clamp(21px,2.4vw,24px);font-stretch:82%;margin:0 0 8px}
p{margin:0 0 16px}

/* header */
header.site{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
header.site .bar{display:flex;align-items:center;gap:16px 28px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;margin-right:auto;min-width:0}
.logo svg{flex-shrink:0}
.logo span{display:flex;flex-direction:column;line-height:1.1;font-family:var(--display);font-stretch:80%;font-weight:800;font-size:22px}
.logo small{font-family:var(--body);font-weight:400;font-size:13px;color:#B9C6CF;margin-top:2px}
.logo:hover{color:#fff}
nav.main{display:flex;gap:4px 20px;font-weight:600;font-size:16px}
nav.main a{color:#DCE4E9;text-decoration:none;padding:10px 0;white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:5px}
.hdr-call{display:inline-flex;align-items:center;gap:8px;background:var(--cran);color:#fff;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:6px;min-height:46px;white-space:nowrap}
.hdr-call:hover{background:var(--cran-dk);color:#fff}
.burger{display:none;background:transparent;color:#fff;border:1px solid #4A5966;border-radius:6px;min-width:46px;height:46px;font:600 15px var(--body);padding:0 12px;cursor:pointer}
.callbar{display:none}
@media (max-width:1340px){
  .burger{display:inline-block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);flex-direction:column;padding:8px 24px 18px;border-top:1px solid #2A3944}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;font-size:18px}
}
@media (max-width:760px){
  .hdr-call{display:none}
  .logo span{font-size:19px}
  .logo small{display:none}
  header.site .bar{padding-bottom:8px}
  .callbar{display:block;padding:0 16px 12px}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--cran);color:#fff;text-decoration:none;font-weight:800;font-size:19px;height:52px;border-radius:8px}
  .callbar a:hover{color:#fff;background:var(--cran-dk)}
  .wrap{padding:0 16px}
}

/* hero */
.hero{padding:52px 0 0}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:end}
.kicker{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(44px,6.2vw,76px);line-height:.96;margin-bottom:18px}
.lead{font-size:clamp(18px,1.8vw,21px);color:var(--slate);max-width:36ch;margin:0}
.hero figure{margin:0}
.hero figure img{border-radius:var(--r);width:100%;aspect-ratio:16/9;object-fit:cover}
.ticket{margin-top:32px;background:var(--cran);color:#fff;border-radius:var(--r);padding:22px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px}
.ticket .t-num{display:flex;flex-direction:column;margin-right:auto}
.ticket .label{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cran-lt)}
.ticket .num{color:#fff;text-decoration:none;font-family:var(--display);font-stretch:85%;font-weight:850;font-size:clamp(34px,4vw,46px);line-height:1.05}
.ticket ul{margin:0;padding:0;list-style:none;font-size:16px;color:#FBEAED;display:flex;flex-direction:column;gap:4px}
.ticket ul li::before{content:"";display:inline-block;width:6px;height:6px;background:#FBEAED;border-radius:50%;margin:0 10px 2px 0}
.btn-white{background:#fff;color:var(--cran);text-decoration:none;font-weight:800;font-size:18px;padding:13px 24px;border-radius:6px;min-height:48px;display:inline-flex;align-items:center}
.btn-white:hover{background:var(--cran-lt);color:var(--cran-dk)}
@media (max-width:900px){
  .hero{padding-top:28px}
  .hero .grid{grid-template-columns:1fr;gap:20px}
  .hero.home figure{order:2}
}

/* sections */
section.block{padding:72px 0 0}
.head-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:22px}
.head-row h2{margin:0}
.head-row p{margin:0;color:var(--muted);font-size:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.tile .n{font-family:var(--display);font-weight:800;font-size:14px;color:var(--cran);letter-spacing:.08em}
.tile h3{font-size:25px;margin:0}
.tile p{margin:0;font-size:16px;color:var(--slate);flex-grow:1}
.tile .acts{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:8px;border-top:1px solid var(--line2);font-weight:700;font-size:16px}
.tile .acts a{min-height:44px;display:inline-flex;align-items:center}
.tile .acts a[href^="tel:"]{color:var(--ink)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.split > div{padding:28px}
.split .ok{background:#fff}
.split .no{background:var(--ink);color:#E3EAEE}
.split h3{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:12px}
.split .ok h3{color:var(--green)}
.split .no h3{color:var(--pink)}
.split ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:17px}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px}
.trio figure{margin:0 0 14px}
.trio img{border-radius:8px;aspect-ratio:16/9;object-fit:cover;width:100%}
.trio p{font-size:17px;color:var(--slate)}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:32px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.card.mist{background:var(--mist);border-color:var(--mist)}
.card h2{font-size:clamp(28px,3vw,34px)}
.card ul,.card ol{padding-left:22px;font-size:17px;margin:0 0 14px}
.card li{margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.chips a:hover{border-color:var(--cran);color:var(--cran)}
.steps{background:var(--ink);color:#fff;border-radius:var(--r);padding:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:28px}
.steps h2{font-size:clamp(28px,3vw,34px)}
.steps p{margin:0;font-size:17px}
.steps .muted{color:#C4D0D8;font-size:16px}
.steps .big{font-family:var(--display);font-weight:850;font-size:36px;color:var(--pink);line-height:1}
.steps a{color:#fff}
details.qa{border-bottom:1px solid var(--line);padding:16px 0}
details.qa summary{cursor:pointer;font-weight:700;font-size:19px;min-height:44px;display:flex;align-items:center}
details.qa p{margin:10px 0 0;color:var(--slate);max-width:72ch}
.qa-list{border-top:1px solid var(--line)}
.cta-band{margin-top:72px;background:var(--cran);color:#fff}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-top:36px;padding-bottom:36px}
.cta-band p{margin:0 auto 0 0;font-family:var(--display);font-stretch:80%;font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.1;max-width:30ch}
.cta-band .num{color:#fff;font-family:var(--display);font-stretch:85%;font-weight:850;font-size:clamp(30px,3.6vw,40px);text-decoration:none}

/* inner pages */
.crumbs{font-size:15px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.hero.inner h1{font-size:clamp(40px,5.4vw,64px)}
.layout{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-top:44px}
.prose{flex:999 1 560px;min-width:0;max-width:780px}
.prose h2{margin-top:40px}
.prose h3{margin-top:26px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose figure{margin:28px 0}
.prose figure img{border-radius:var(--r)}
.prose figcaption{font-size:15px;color:var(--muted);margin-top:8px}
.stop{background:var(--ink);color:#E3EAEE;border-radius:var(--r);padding:22px 26px;margin:0 0 28px;display:flex;gap:16px;align-items:flex-start}
.stop svg{flex-shrink:0;margin-top:4px}
.stop b{color:var(--pink)}
.stop p{margin:0}
.note{background:var(--mist);border-radius:var(--r);padding:22px 26px;margin:28px 0}
.note h3{margin-top:0}
.note ol,.note ul{margin-bottom:0}
.signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:0 0 20px;padding:0;list-style:none}
.signs li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0;font-size:16px;color:var(--slate)}
.signs li b{display:block;font-family:var(--display);font-stretch:85%;font-size:19px;color:var(--ink);margin-bottom:4px;line-height:1.15}
table.t{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 20px;background:#fff}
table.t th,table.t td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
table.t th{background:var(--mist)}
.tbox{overflow-x:auto;margin:0 0 20px}
.tbox table.t{margin:0;min-width:520px}
aside.side{flex:1 1 280px;display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.callcard{background:var(--cran);color:#fff;border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.callcard .label{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cran-lt)}
.callcard .num{color:#fff;text-decoration:none;font-family:var(--display);font-stretch:85%;font-weight:850;font-size:34px;line-height:1.05}
.callcard p{margin:0;font-size:15px;color:#FBEAED}
.callcard .btn-white{justify-content:center}
.related{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.related h2{font-size:22px;margin-bottom:10px}
.related ul{list-style:none;margin:0;padding:0}
.related li{border-top:1px solid var(--line2)}
.related a{display:block;padding:10px 0;font-weight:600;font-size:16px;min-height:44px}
@media (max-width:1000px){aside.side{position:static}}
.town{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:0 0 16px}
.town h3{margin-top:0}
.town .zip{font-size:15px;color:var(--muted);margin:-2px 0 8px}
.town p{margin:0;font-size:17px}

/* footer */
footer.site{background:var(--deep);color:#C4D0D8;font-size:15px;margin-top:72px}
.cta-band + footer.site{margin-top:0}
footer.site .wrap{padding-top:44px;padding-bottom:44px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px}
footer.site h2{font-family:var(--body);font-size:16px;font-weight:700;color:#fff;margin:0 0 8px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li a{color:#C4D0D8;display:inline-block;padding:6px 0;min-height:36px}
footer.site li a:hover{color:#fff}
footer.site .fnum{color:#fff;font-weight:700;font-size:18px}
.disclaimer{margin:28px 0 0;padding-top:20px;border-top:1px solid #2A3944;font-size:14px;line-height:1.6;color:#AEBBC4}
.fine{font-size:14px;color:#8C9CA7;margin:12px 0 0}

/* town map (service areas) */
.mapfig{margin:8px 0 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.townmap{display:block;width:100%;height:auto;max-width:620px;margin:0 auto}
.townmap .area{fill:var(--cran-lt);fill-opacity:.55;stroke:var(--cran);stroke-width:1.5;stroke-dasharray:6 5;stroke-linejoin:round}
.townmap .tm-town circle{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.townmap .tm-hub circle{fill:var(--cran);stroke:#fff;stroke-width:3}
.townmap .tm-outer circle{fill:#fff;stroke:#7A8B97;stroke-width:2}
.townmap .lbl{font:600 17px var(--body);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.townmap .lbl.hub{font:800 21px var(--display);font-stretch:85%;fill:var(--cran)}
.townmap .lbl.o{font-weight:400;fill:#5A6B77}
.townmap a:hover .lbl,.townmap a:focus .lbl{fill:var(--cran);text-decoration:underline}
.townmap a:focus{outline:none}.townmap a:focus circle{stroke:var(--cran)}
.townmap .compass path{fill:var(--slate)}.townmap .compass text{font:700 14px var(--body);fill:var(--slate)}
.mapfig figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.maplegend{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--ink)}
.maplegend .k{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.maplegend .k-hub{background:var(--cran)}.maplegend .k-town{background:var(--ink)}.maplegend .k-outer{background:#fff;border:2px solid #7A8B97}
@media (max-width:600px){
  .mapfig{padding:8px 4px 12px}
  .mapfig figcaption{padding:0 8px}
  .townmap .lbl{font-size:22px;stroke-width:5px}
  .townmap .lbl.hub{font-size:26px}
}

/* OpenStreetMap town map */
.osmfig{margin:8px 0 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.osm{position:relative;overflow:hidden;border-radius:8px;background:#E8ECEE;max-width:560px;margin:0 auto}
.osm img{position:absolute;max-width:none;height:auto;filter:grayscale(1) contrast(.95) brightness(1.04);opacity:.9}
.osm svg{position:absolute;inset:0;width:100%;height:100%}
.osm .area{fill:#9E1F36;fill-opacity:.16;stroke:#9E1F36;stroke-width:2.5;stroke-dasharray:7 5;stroke-linejoin:round}
.osm .t{fill:#17222B;stroke:#fff;stroke-width:2.5}
.osm .h{fill:#9E1F36;stroke:#fff;stroke-width:3}
.osm .o{fill:#fff;stroke:#4A5966;stroke-width:2}
.osm a:hover circle,.osm a:focus circle{fill:#9E1F36}
.osm-credit{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.85);font-size:12px;padding:2px 6px;color:#2E4453}
.osm-credit a{color:#2E4453}
.mapnote{margin:4px 0 10px;font-size:15px;color:var(--muted)}
.maplegend .k-area{background:rgba(158,31,54,.18);border:2px dashed #9E1F36;border-radius:3px}