:root {
  /* Ductless Mini-Split Brockton — burgundy / warm-gray / brass palette,
     matched to the real supplied logo (burgundy roofline, brass airflow
     curves, gray wall unit) and apt for a former shoe-manufacturing city.
     The FOURTH distinct visual system in this Boston-metro cluster:
       Somerville  — navy header, blue/orange, condensed uppercase Trebuchet,
                     6px radius, sharp rectangular hero eyebrow.
       Framingham  — forest-green header, charcoal/amber, rounded Century
                     Gothic title-case, 10px radius, pill eyebrow.
       Quincy      — teal header, granite slate + clay, Georgia serif,
                     3px radius, rule-underlined eyebrow.
       Brockton (here) — BURGUNDY header, warm gray + brass accent, a WIDE
                     HUMANIST GROTESQUE with positive letter-spacing,
                     0px radius (fully square), and a LEFT VERTICAL RULE
                     eyebrow.
     Every axis differs from all three siblings: no sister uses burgundy, a
     brass accent, Verdana/Tahoma, square corners, or a left-rule eyebrow. */
  --brand:        #7B1E2B;
  --brand-dark:   #5E141F;
  --navy:         #3A3330;
  --navy-dark:    #241F1D;
  --teal:         #6E6560;
  --teal-dark:    #524A46;
  --gold:         #9A7434;
  --gold-dark:    #7A5B27;
  --urgent:       #A3302A;
  --urgent-dark:  #802220;
  --ink:          #241F1D;
  --ink-soft:     #5F5852;
  --line:         #e3ded9;
  --bg:           #ffffff;
  --bg-alt:       #f6f3f0;
  --max:          1160px;
  --radius:       0px;
  --font-head: Verdana, Tahoma, 'DejaVu Sans', 'Segoe UI', Geneva, sans-serif;
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
/* Verdana runs wide and heavy. Step the weight down and open the tracking
   slightly rather than letting headings look cramped at 800. */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0.005em; }
.btn--urgent { background: var(--urgent); color: #fff; }
.btn--urgent:hover { background: var(--urgent-dark); }

/* --- Brockton site-specific overrides ------------------------------------ */
/* Brass accent against white measures ~4.6:1, which passes AA for normal text
   but leaves little margin, so .btn--gold takes white on the darker brass. */
.btn--gold  { background: var(--gold-dark); color: #fff; }
.btn--gold:hover { background: #63491F; color: #fff; }

/* Top utility bar runs warm gray over the burgundy nav, so the header reads
   as its own thing rather than a recolored sibling. Extra `.site-header`
   specificity is required: the shared template's own `.header-top` rule
   appears later in this file and would otherwise win on source order. */
.site-header .header-top { background: var(--teal); }

/* Wide grotesque headings need slightly tighter leading than a serif. */
.hero h1 { line-height: 1.18; }
.section h2 { line-height: 1.28; }


/* --- Form-in-hero variant (Contact page) --------------------------------- */
/* The operator asked that the Contact form be fully visible on load. A normal
   photo hero pushes a 5-field form well below the fold, so on this page the
   form card sits INSIDE the hero, beside the heading, and the hero's vertical
   padding is tightened. Net effect at 1280x800: the whole form, including the
   submit button, lands above the fold. */
/* Spacing here is tuned so the entire form, submit button included, clears a
   1280x720 viewport — the shorter common laptop height, not just 1280x800. */
.hero--form .hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px; align-items: start; padding: 12px 0 30px;
}
.hero--form .hero__inner > .hero__copy > p { color: rgba(255,255,255,.9); font-size: 1.02rem; max-width: 46ch; }
.hero--form h1 { margin-bottom: 10px; font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.hero--form .hero__eyebrow { margin-bottom: 12px; }
.hero--form .hero__contactlines { margin-top: 14px; }
.hero--form .hero__contactlines p { color: #fff; margin-bottom: 6px; font-weight: 600; }
.hero--form .hero__contactlines a { color: #fff; text-decoration: underline; }
/* The form card needs a solid surface so it stays readable over the photo. */
/* NOTE: this colour was hardcoded to Quincy's navy in the inherited stylesheet
   and had to be re-pointed at Brockton's own dark ink. Worth remembering that
   forking a sister site's CSS carries literal colour values, not just tokens. */
.hero--form .form-card--teal {
  background: rgba(36, 31, 29, .94); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.18); padding: 16px 20px 16px;
  border-radius: var(--radius);
}
.hero--form .form-card--teal h3 { color: #fff; margin-bottom: 10px; font-size: 1.1rem; }
.hero--form .field { margin-bottom: 7px; }
/* Two short fields share a row, so the whole form clears a 720px-tall
   viewport with real margin rather than by a pixel. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .field-pair { grid-template-columns: 1fr; gap: 0; } }
.hero--form .field label { font-size: .8rem; margin-bottom: 2px; }
.hero--form .field input, .hero--form .field textarea { padding: 7px 10px; font-size: .92rem; }
.hero--form .btn--lg { padding: 11px 22px; }
@media (max-width: 900px) {
  .hero--form .hero__inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 36px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: .6em; }
h3 { font-size: 1.2rem; margin-bottom: .35em; }
p  { margin-bottom: 1rem; color: var(--ink-soft); }
a  { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { color: var(--ink-soft); padding-left: 1.2rem; margin-bottom: 1rem; }
li { margin-bottom: .4rem; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: var(--radius);
  font-weight: 700; font-family: var(--font-body); border: none; cursor: pointer;
  transition: background .15s ease, color .15s ease; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--red   { background: var(--brand); color: #fff; }
.btn--red:hover { background: var(--brand-dark); }
.btn--navy  { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-dark); }
.btn--gold  { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-dark); color: #fff; }
.btn--teal  { background: var(--teal); color: #fff; }
.btn--teal:hover { background: var(--teal-dark); }
.btn--ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.15); }
.btn--outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }

.muted { color: var(--ink-soft); font-size: .9rem; }

/* ---------- header / nav (two-row) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; }
.header-top { background: var(--navy); color: #fff; padding: 8px 0; font-size: .88rem; }
.header-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nav__logo { color: #fff; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; display: inline-flex; align-items: center; }
.nav__logo:hover { text-decoration: none; }
.header-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.header-contact__item { color: rgba(255,255,255,.88); font-size: .86rem; }
.header-contact__item a { color: #fff; font-weight: 600; }

.site-nav { background: var(--brand); }
.nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 20px; max-width: var(--max); margin: 0 auto; }
.nav__links { display: flex; align-items: stretch; gap: 2px; list-style: none; }
.nav__links > li { display: flex; align-items: center; }
.nav__links a { color: #fff; font-weight: 600; font-size: .93rem; padding: 14px 14px; display: block; }
.nav__links > li > a:hover { background: rgba(0,0,0,.12); text-decoration: none; }

.has-dropdown { position: relative; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 260px; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,.15); z-index: 60;
}
.has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; display: none; }
.has-dropdown:hover::after { display: block; }
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { list-style: none; }
.dropdown a { display: block; padding: 10px 18px; font-size: .9rem; color: var(--ink); font-weight: 500; }
.dropdown a:hover { background: var(--bg-alt); text-decoration: none; }

.nav__call { background: var(--gold); color: var(--navy) !important; font-weight: 700; margin-left: 8px; border-radius: var(--radius); }
.nav__call:hover { background: var(--gold-dark); color: #fff !important; }

.nav__toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: #fff; padding: 10px 14px; }
@media (max-width: 900px) {
  .nav { justify-content: space-between; padding: 6px 20px; }
  .nav__brand-mobile { display: block; color: #fff; font-weight: 700; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--brand); border-top: 1px solid rgba(255,255,255,.2); }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a { padding: 12px 20px; }
  .dropdown { position: static; display: block; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 14px; min-width: 0; background: var(--brand-dark); }
  .dropdown a { color: #fff; }
  .nav__toggle { display: block; }
  .nav__call { margin: 8px 20px; text-align: center; }
  .header-top__inner { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- hero ---------- */
.hero { background: linear-gradient(135deg, #dbe9f7 0%, #eef4fb 100%); }
.hero__split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 56px 0; }
.hero__inner { padding: 56px 0; }
/* Brockton's hero eyebrow: a LEFT VERTICAL RULE beside the label, no box and
   no underline. Fourth distinct treatment in the cluster — Somerville uses a
   sharp rectangular badge, Framingham a pill, Quincy a bottom rule. */
.hero .hero__eyebrow {
  display: inline-block; background: none; color: var(--brand); text-transform: uppercase;
  letter-spacing: .14em; font-size: .74rem; font-weight: 700;
  padding: 2px 0 2px 14px; border-radius: 0;
  border-left: 3px solid var(--gold); border-bottom: none;
  margin-bottom: 18px; font-family: var(--font-body);
}
.hero h1 { color: var(--navy); margin: 0 0 16px; max-width: 22ch; }
.hero__inner > p { color: var(--ink-soft); font-size: 1.1rem; max-width: 48ch; }
.hero__checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.hero__checklist li { color: var(--ink); font-weight: 600; padding-left: 26px; position: relative; margin-bottom: 8px; }
.hero__checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 800; }
.hero__cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__photo { border-radius: var(--radius); overflow: hidden; }
@media (max-width: 900px) { .hero__split { grid-template-columns: 1fr; padding: 36px 0; } .hero__inner { padding: 36px 0; } }

/* hero with a full-bleed photo behind the headline (optional homepage variant) */
.hero--photo { position: relative; overflow: hidden; background: var(--navy); }
.hero--photo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--photo__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Warm burgundy-black tint. The inherited value was a navy tint carried over
     from the sister sites, which fought this site's palette. */
  background: linear-gradient(120deg, rgba(40,20,24,.70) 0%, rgba(40,20,24,.50) 45%, rgba(40,20,24,.24) 100%);
}
.hero--photo > .wrap { position: relative; z-index: 2; }
.hero--photo .hero__inner { padding: 72px 0; }
.hero--photo .hero__eyebrow { background: none; color: #fff; border-left-color: var(--gold); }
.hero--photo h1 { color: #fff; }
.hero--photo .hero__inner > p { color: rgba(255,255,255,.85); }
.hero--photo .hero__checklist li { color: #fff; }
.hero--photo .hero__checklist li::before { color: var(--gold); }
@media (max-width: 900px) { .hero--photo .hero__inner { padding: 48px 0; } }

/* ---------- sections ---------- */
.section { padding: 60px 0; }
.section--alt { background: var(--bg-alt); }
.section__lead { max-width: 65ch; }
.center { text-align: center; }
.center .section__lead { margin: 0 auto; }

.split { display: grid; grid-template-columns: 60fr 40fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 24px; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

.linklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; padding: 0; }
@media (max-width: 800px) { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .linklist { grid-template-columns: 1fr; } }
.linklist a {
  display: block; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 600;
}
.linklist a:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }

.area-link { display: flex; flex-direction: column; }
.area-link__name { font-weight: 700; }
.area-link__city { font-size: .82rem; color: var(--ink-soft); font-weight: 500; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); }
th { background: var(--navy); font-family: var(--font-body); font-weight: 700; color: #fff; }
tr:last-child td { border-bottom: 0; }

.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-head); font-size: 1.05rem; padding: 16px 0; list-style: none; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--brand); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 16px; margin-bottom: 0; }

/* phone strip — preferred bottom-of-page CTA */
.phone-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; text-align: center; }
.phone-strip h2 { margin-bottom: .3em; }
.phone-strip .sub { max-width: 60ch; margin: 0 auto 22px; }
.phone-strip .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* image band (placeholder — swap for real photography before launch) */
.image-band { padding: 18px 0; }
.image-band__placeholder {
  width: 100%; max-height: 320px; min-height: 220px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85);
  font-family: var(--font-body); font-size: .85rem; text-align: center; padding: 20px; letter-spacing: .02em;
}

/* photo gallery / portfolio grid — for visual-work-driven sites (photography,
   design, etc.) where a service business's image-band pattern isn't enough.
   Use galleryGrid() from site-builder.js. If images aren't genuine completed
   work for the business behind the site, pair with .gallery-disclaimer. */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid__item { border-radius: var(--radius); overflow: hidden; }
.gallery-grid__item img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery-grid__item:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid__item img { height: 280px; } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-grid__item img { height: 320px; } }
.gallery-disclaimer { text-align: center; font-size: .82rem; font-style: italic; color: var(--ink-soft); margin-top: 20px; }

/* forms — MUST be wrapped in .form-card--teal. .field's label/input colors
   assume a teal background; placed on a plain section they render invisible
   (white-on-white). There is currently no light-background variant. */
.form-card--teal { background: var(--teal); color: #fff; border-radius: var(--radius); padding: 30px; }
.form-card--teal h3 { color: #fff; }
.form-card--teal p.italic { font-style: italic; color: rgba(255,255,255,.9); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: #fff; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  font-family: var(--font-body); font-size: 1rem; background: rgba(255,255,255,.95); color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,.8); padding: 52px 0 26px; }
.site-footer h4 { color: #fff; margin-bottom: 14px; font-family: var(--font-body); font-size: 1rem; letter-spacing: .02em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.8); font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 38px; padding-top: 18px; font-size: .85rem; color: rgba(255,255,255,.55); }
.footer-disclaimer { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 10px; line-height: 1.5; }

/* phone link — stable hook for WhatConverts dynamic number insertion */
.wc-phone { font-weight: 700; }