/* Tri-State General Construction Inc. — one stylesheet for every page.
   White base (her fleet and logo are white with green), her logo green, condensed caps for headings. */
:root {
  --green: #006e20;
  --green-dark: #00531a;
  --green-tint: #e8f3eb;
  --accent: #57d27a;   /* bright Tri-State green: small labels on dark sections only (Emily 11/8) */
  --ink: #141b16;
  --text: #2b332d;
  --muted: #5d685f;
  --line: #e2e8e3;
  --soft: #f5f7f5;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(20, 27, 22, .10);
  --head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wrap: 1180px;
  --pad: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--text); font: 16px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3 { font-family: var(--head); color: var(--ink); line-height: 1.02; margin: 0 0 .4em; letter-spacing: .01em; }
h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; text-transform: uppercase; }
h3 { font-size: 24px; font-weight: 700; text-transform: uppercase; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow { display: inline-block; font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.lede { font-size: 18px; color: var(--muted); max-width: 46ch; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 10px; top: 10px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 8px; border: 2px solid transparent; font: 700 16px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--green-tint); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.call-line { font-weight: 600; color: inherit; }
.call-line a { color: inherit; font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(6px); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.brand img { height: 47px; width: auto; }
.nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
.nav > a, .nav .dd > button { white-space: nowrap; font: 700 15px/1 var(--body); color: var(--ink); text-decoration: none; padding: 12px 12px; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.nav > a:hover, .nav .dd > button:hover, .nav a[aria-current="page"] { color: var(--green); }
.dd { position: relative; }
.head-cta { display: none; align-items: center; gap: 14px; white-space: nowrap; }
.head-phone { font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; }
.head-phone:hover { color: var(--green); }
.menu-btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px var(--pad); color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--line); }
.mobile-nav .sub a { font-weight: 600; padding-left: calc(var(--pad) + 14px); color: var(--text); }
@media (min-width: 1180px) {
  .brand img { height: 60px; }
  .nav, .head-cta { display: flex; }
  .menu-btn { display: none; }
}

/* hero */
.hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,16,12,.86) 0%, rgba(10,16,12,.62) 55%, rgba(10,16,12,.25) 100%); }
.hero .wrap { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.hero h1 { color: #fff; max-width: 13ch; }
.hero .lede { color: rgba(255,255,255,.88); }
.hero .eyebrow { color: var(--accent); }
.hero .call-line { margin-top: 16px; color: rgba(255,255,255,.9); }
.hero-home .wrap { padding-top: 96px; padding-bottom: 104px; min-height: min(78vh, 720px); display: flex; flex-direction: column; justify-content: center; }
.hero-page .wrap { padding-top: 64px; padding-bottom: 64px; }
.hero-page h1 { font-size: clamp(38px, 6vw, 62px); max-width: 16ch; }

/* proof strip: a quiet off-white band, four equal columns with hairline dividers, each item centred in its column and level with
   the others, so the row fills the width evenly whether an item runs to one line or two (phone: two columns) */
.proof { border-bottom: 1px solid var(--line); background: var(--soft); }
.proof ul { list-style: none; margin: 0; padding: 26px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 0; }
.proof li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; padding: 0 12px 0 0; }
.proof li:nth-child(even) { border-left: 1px solid var(--line); padding: 0 0 0 14px; }
.proof svg { flex: none; width: 22px; height: 22px; color: var(--green); }
.proof .nb { white-space: nowrap; }
@media (min-width: 900px) {
  .proof ul { grid-template-columns: repeat(4, 1fr); padding: 32px 0; }
  .proof li, .proof li:nth-child(even) { justify-content: center; gap: 12px; font-size: 15.5px; padding: 0 22px; border-left: 1px solid var(--line); }
  .proof li:first-child { border-left: 0; }
  .proof svg { width: 24px; height: 24px; }
}

/* sections */
.section { padding: 72px 0; }
.section.soft { background: var(--soft); }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.why { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.why .ico { width: 46px; height: 46px; border-radius: 10px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; margin-bottom: 16px; }
.why .ico svg { width: 24px; height: 24px; }
.why h3 { font-size: 24px; }
.why p { color: var(--muted); margin: 0; }

/* why: numbered rows beside the heading, no icon squares */
.why-split { display: grid; gap: 28px; }
@media (min-width: 900px) { .why-split { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .why-split .section-head { margin-bottom: 0; } }
.why-list { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.why-list li { counter-increment: w; position: relative; padding: 22px 0 22px 56px; border-top: 1px solid var(--line); }
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-list li::before { content: counter(w); position: absolute; left: 0; top: 20px; font: 800 34px/1 var(--head); color: var(--green); }
.why-list strong { display: block; font: 800 24px/1.15 var(--head); color: var(--ink); margin-bottom: 6px; }
.why-list p { margin: 0; color: var(--muted); }

.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card .ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); margin: 0 0 14px; }
.card .more { margin-top: auto; font-weight: 800; color: var(--green); display: inline-flex; gap: 6px; align-items: center; }

/* work strip + gallery */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.strip figure { scroll-snap-align: start; }
@media (min-width: 700px) { .strip { grid-auto-columns: 40%; } }
@media (min-width: 1100px) { .strip { grid-auto-columns: 24%; } }
figure.shot { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--soft); position: relative; }
figure.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figure.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0 18px; min-height: 44px; display: inline-flex; align-items: center; font: 700 14px/1 var(--body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* audience / tags */
.tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tags li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-weight: 700; color: var(--ink); font-size: 15px; }

/* steps */
.steps { counter-reset: s; display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { position: relative; padding: 24px 24px 24px 74px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 22px; top: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; font: 800 18px/36px var(--head); text-align: center; }
.steps strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.steps span { color: var(--muted); }

/* split block */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1.05fr 1fr; gap: 56px; } }
.split .photo { border-radius: var(--radius); overflow: hidden; }
.split .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 32px; color: var(--text); }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.checks strong { color: var(--ink); }
@media (min-width: 760px) { .checks-2 { grid-template-columns: 1fr 1fr; gap: 16px 48px; } }

/* states */
.states { display: grid; gap: 24px; }
@media (min-width: 800px) { .states { grid-template-columns: repeat(3, 1fr); } }
.state { border-left: 3px solid var(--green); padding: 4px 0 4px 20px; }
.state h3 { font-size: 30px; margin-bottom: 6px; }
.state p { color: var(--muted); margin: 0; }

/* CTA band */
.cta-band { position: relative; color: #fff; overflow: hidden; background: var(--ink); }
.cta-band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(8, 40, 18, .82); }
.cta-band .wrap { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 50ch; margin: 0 auto 26px; }
.cta-band .btn-row { justify-content: center; }

/* contact page */
.contact-grid { display: grid; gap: 28px; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; }
.contact-card h3 { margin-bottom: 14px; }
.contact-card a.big { display: block; font: 800 28px/1.1 var(--head); color: var(--ink); text-decoration: none; margin-bottom: 4px; }
.contact-card a.big:hover { color: var(--green); }
.contact-card p { color: var(--muted); }

/* prose (legal) */
.prose { max-width: 760px; }
.prose h2 { font-size: 28px; margin-top: 36px; }
.prose p, .prose li { color: var(--text); }

/* footer */
.site-footer { background: var(--soft); border-top: 1px solid var(--line); padding: 56px 0 110px; font-size: 15px; }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 1180px) { .site-footer { padding-bottom: 40px; } }
.site-footer img.logo { height: 58px; width: auto; margin-bottom: 14px; }
.site-footer h4 { font: 800 16px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.site-footer a.btn-primary { color: #fff; }
.legal { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14px; }
.legal a { color: var(--muted); }
/* Edin 11/10: the credit sits on its own line at the very bottom, in green, apart from the legal links. */
.site-footer .credit { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.site-footer .credit a { color: var(--accent, #57D27A); font-weight: 700; text-decoration: none; }
.site-footer .credit a:hover { text-decoration: underline; }

/* mobile sticky action bar */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.action-bar .btn { min-height: 48px; padding: 0 12px; }
/* Edin 11/10: no sticky Call / Request a Proposal bar. Trusted By carries a Commercial and a Residential button instead. */
.action-bar { display: none !important; }
.tb-cta { margin-top: 32px; justify-content: center; }
.tb-tags { justify-content: center; }
@media (max-width: 700px) { .tb-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tb-cta .btn { padding-left: 8px; padding-right: 8px; text-align: center; } }
@media (min-width: 1180px) { .action-bar { display: none; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(5,8,6,.92); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 84vh; width: auto; border-radius: 8px; }
.lightbox p { color: #fff; text-align: center; margin-top: 12px; font-weight: 700; }
.lightbox button { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; font-size: 26px; cursor: pointer; }

/* ---------- multi-step proposal form (popup + inline on /contact) ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; }
.modal.open { display: block; }
.modal-scrim { position: absolute; inset: 0; background: rgba(10,16,12,.6); }
.modal-panel { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 720px) { .modal-panel { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; max-height: 92vh; border-radius: 14px; box-shadow: var(--shadow); } }
.modal-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none; }
.modal-top strong { font: 800 22px/1 var(--head); text-transform: uppercase; color: var(--ink); }
.modal-close { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.pform { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pform-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; padding: 22px 20px; }
.pform.inline { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.pform.inline .pform-body { overflow: visible; }
.progress { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
.progress span { display: block; height: 100%; width: 20%; background: var(--green); transition: width .25s; }
.step-count { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 18px; }
.step { display: none; }
.step.on { display: block; }
.step h3 { font-size: 28px; margin-bottom: 4px; }
.step .hint { color: var(--muted); margin-bottom: 16px; }
.opts { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 8px; }
@media (min-width: 520px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: flex; align-items: center; min-height: 54px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; color: var(--ink); cursor: pointer; background: #fff; }
.opt input:checked + span { border-color: var(--green); background: var(--green-tint); }
.opt input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.q-label { display: block; font-weight: 800; color: var(--ink); margin: 18px 0 8px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
.field label small { color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; font: 16px/1.4 var(--body); color: var(--ink); background: #fff; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.two { display: grid; gap: 0 12px; }
@media (min-width: 520px) { .two { grid-template-columns: 1fr 1fr; } }
.err { display: none; color: #b42318; font-weight: 700; font-size: 14px; margin: 6px 0 0; }
.err.show { display: block; }
.pform-foot { display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; flex: none; }
.pform-foot .btn { flex: 1; }
.pform-foot .back { flex: 0 0 auto; }
.fine { font-size: 13px; color: var(--muted); margin-top: 10px; }
.done { text-align: center; padding: 20px 4px; }
.done .ico { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; }
.done .ico svg { width: 32px; height: 32px; }
.preview-note { background: #fff7e0; border: 1px solid #f0d58a; color: #6b5300; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-top: 14px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
body.modal-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* services marquee: duplicated track slides left on a loop, pauses on hover or focus */
.marquee { overflow: hidden; padding: 6px 0 10px; }
.m-track { display: flex; gap: 20px; width: max-content; padding-left: 20px; animation: mq var(--mq-dur, 60s) linear infinite; }
.marquee:hover .m-track, .marquee:focus-within .m-track { animation-play-state: paused; }
.m-track .card { flex: 0 0 300px; width: 300px; }
@keyframes mq { to { transform: translateX(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .m-track { animation: none; }
  .m-track .card[aria-hidden="true"] { display: none; }
}

/* ---- round two, pass 2 ---- */
/* nav: phone icon, Services menu attached to the bar */
.nav { align-self: stretch; align-items: stretch; }
.nav > a { display: flex; align-items: center; border-radius: 0; }
.nav .dd { display: flex; }
.nav .dd > button { display: inline-flex; align-items: center; gap: 7px; border-radius: 0; }
.chev { transition: transform .18s; }
.dd.open .chev, .dd:hover .chev { transform: rotate(180deg); }
.nav > a[aria-current="page"], .nav > a:hover, .dd.open > button, .dd:hover > button { box-shadow: inset 0 -3px 0 var(--green); }
/* services menu: compact, text only, fades in under the link */
.dd-menu { position: absolute; top: 100%; left: 50%; min-width: 290px; margin-top: 8px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 36px rgba(20, 27, 22, .14);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) { .dd:hover .dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } }
.dd-menu a { display: block; min-height: 44px; padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 700 15.5px/1.25 var(--body); white-space: nowrap; }
.dd-menu a + a { margin-top: 2px; }
/* General Construction sits apart from the roofing services: grey, under a thin rule (Edin 11/10). */
/* (General Construction was grey under a rule here from Edin's morning review; he took that back the same night.) */
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--soft); color: var(--green); }
@media (prefers-reduced-motion: reduce) { .dd-menu { transition: none; } }
.head-cta { gap: 12px; }
.head-phone { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--line); border-radius: 50%; color: var(--green); }
.head-phone svg { width: 20px; height: 20px; }
.head-phone:hover { border-color: var(--green); background: var(--green-tint); }
/* The number pops up under the call icon on hover or keyboard focus, in the site's own style instead of the browser's grey
   tooltip (Edin 11/10: a PC cannot dial, so the visitor needs to read the number). Mouse devices only; phones just dial. */
.head-phone { position: relative; }
@media (hover: hover) and (min-width: 900px) {
  .head-phone::after, .head-phone::before { position: absolute; left: 50%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; }
  .head-phone::after { content: "Call " attr(data-tip); top: calc(100% + 12px); transform: translate(-50%, -4px); background: var(--ink); color: #fff; font: 800 19px/1 var(--head); letter-spacing: .03em; padding: 12px 16px; border-radius: 10px; white-space: nowrap; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
  .head-phone::before { content: ""; top: calc(100% + 6px); width: 12px; height: 12px; background: var(--ink); transform: translate(-50%, -4px) rotate(45deg); border-radius: 2px; }
  .head-phone:hover::after, .head-phone:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .head-phone:hover::before, .head-phone:focus-visible::before { opacity: 1; visibility: visible; transform: translate(-50%, 0) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .head-phone::after, .head-phone::before { transition: none; } }

/* who we work for: building-type photo tiles */
.aud-head { display: grid; gap: 16px; }
.aud-head h2 { margin: 0; max-width: 22ch; }
.aud-head h2 span { display: block; }
.aud-head p { margin: 0; color: var(--muted); max-width: 56ch; }
.aud-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
@media (min-width: 900px) { .aud-grid { grid-template-columns: repeat(4, 1fr); } }
.aud { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); text-decoration: none; }
.aud img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.aud:hover img { transform: scale(1.04); }
.aud span { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 16px; color: #fff; font: 800 24px/1.05 var(--head); letter-spacing: .01em; background: linear-gradient(transparent, rgba(0,0,0,.78)); }

/* recent work: one big photo and four smaller */
.mosaic { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.mosaic figure:first-child { grid-column: 1 / -1; }
.mosaic figure:first-child img { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 240px; }
  .mosaic figure:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .mosaic figure img, .mosaic figure:first-child img { aspect-ratio: auto; height: 100%; }
}

/* service area: exact places */
.places { max-width: 860px; }
.places details { border-top: 1px solid var(--line); }
.places details:last-child { border-bottom: 1px solid var(--line); }
.places summary { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 64px; padding: 16px 40px 16px 0; cursor: pointer; list-style: none; position: relative; }
.places summary::-webkit-details-marker { display: none; }
.places summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 700 28px/1 var(--body); color: var(--green); }
.places details[open] summary::after { content: "\2212"; }
.places summary strong { font: 800 30px/1 var(--head); color: var(--ink); }
.places summary span { color: var(--muted); font-weight: 600; }
.places p { margin: 0 0 20px; max-width: 70ch; }

/* our work: categories, first six, then the rest on request */
.chips { flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 73px; z-index: 30; background: #fff; padding: 12px 0; margin: 0 0 24px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; }
.g-sec { margin-bottom: 52px; scroll-margin-top: 150px; }
.g-sec[hidden] { display: none; }
.g-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.g-head h2 { margin: 0; font-size: clamp(30px, 4vw, 40px); }
.g-head span { color: var(--muted); font-weight: 600; font-size: 14px; }
.gallery { gap: 10px; }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.js .g-sec:not(.open) [data-extra] { display: none; }
.g-more { margin-top: 18px; min-height: 48px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; }
.g-more:hover { background: var(--ink); color: #fff; }
.g-sec.solo .g-more { display: none; }
.lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; line-height: 1; padding-bottom: 4px; }
.lightbox .lb-prev { left: 14px; right: auto; }
.lightbox .lb-next { right: 14px; }
@media (max-width: 640px) { .lightbox .lb-nav { top: auto; bottom: 18px; transform: none; } }

/* credentials board: a dark band, so it does not look like the sections around it */
.cred { background: var(--green-dark); color: #fff; padding: 76px 0; }
.cred .eyebrow { color: var(--accent); }
.cred h2 { color: #fff; font-size: clamp(36px, 5vw, 56px); max-width: 16ch; }
.cred-head p { color: rgba(255,255,255,.82); max-width: 46ch; margin: 0; }
.cred-grid { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .cred-grid { grid-template-columns: repeat(4, 1fr); } }
.cred-grid li { border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cred-grid small { font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cred-grid strong { font: 800 clamp(24px, 3.2vw, 34px)/1.05 var(--head); letter-spacing: .01em; overflow-wrap: anywhere; }
.cred-grid span { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.4; }
/* Julie's manufacturer list (11/10): one line across the bottom of the credentials band, home page. */
.cred-mfr { grid-column: 1 / -1; margin: 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22); text-align: center; }
.cred-mfr .eyebrow { display: block; margin-bottom: 16px; }
.cred-mfr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cred-mfr li { border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius); padding: 12px 18px; font: 800 clamp(17px, 1.6vw, 21px)/1.1 var(--head); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.cred-mfr p { margin: 16px 0 0; color: rgba(255,255,255,.78); font-size: 15px; }
@media (max-width: 700px) { .cred-mfr li { padding: 10px 12px; font-size: 16px; } }
.cred .btn-row { margin-top: 32px; }

/* customer words: open pull quotes, no card boxes */
.quotes { display: grid; gap: 34px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.quotes figure { margin: 0; }
.quotes blockquote { margin: 0 0 14px; font: 800 clamp(26px, 2.6vw, 32px)/1.12 var(--head); color: var(--ink); letter-spacing: .005em; }
.quotes blockquote::before { content: "\201C"; display: block; font: 800 64px/.7 var(--head); color: var(--green); margin-bottom: 8px; }
.quotes figcaption { color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.quotes figcaption span { color: var(--muted); font-weight: 600; margin-left: 6px; }
.quotes .stars { display: block; color: #f5a623; font-size: 20px; letter-spacing: 3px; margin-bottom: 12px; }
.quotes .stars + blockquote::before { display: none; }
.rev-cta { margin-top: 36px; justify-content: center; }

/* home service area: real place names */
.area-cols { display: grid; gap: 28px; }
@media (min-width: 800px) { .area-cols { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.area-cols h3 { font-size: 32px; margin-bottom: 8px; }
.area-cols p { margin: 0; color: var(--muted); max-width: 38ch; }

/* faq */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 64px; padding: 18px 44px 18px 0; cursor: pointer; list-style: none; position: relative; font: 800 24px/1.15 var(--head); color: var(--ink); display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 700 28px/1 var(--body); color: var(--green); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 20px; max-width: 66ch; }

h2 { text-wrap: balance; }


/* credentials: photo underneath, heading left, white license plates right */
.cred { position: relative; overflow: hidden; background: var(--green-dark); }
.cred img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cred::after { content: ""; position: absolute; inset: 0; background: rgba(0, 48, 18, .88); }
.cred .cred-in { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .cred .cred-in { grid-template-columns: 1fr 1.15fr; gap: 64px; } }
.cred-head .btn-row { margin-top: 28px; }
.cred .cred-grid { margin: 0; }
@media (min-width: 900px) { .cred .cred-grid { grid-template-columns: repeat(2, 1fr); } }
.cred-grid li { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.28); padding: 22px 20px; }
.cred-grid small { color: var(--green); }
.cred-grid strong { color: var(--ink); }
.cred-grid span { color: var(--muted); }
/* four plates in pairs (the full-width manufacturer plate came out 11/10) */
/* clients: eight logos on a loop, each in an equal 210 px slot. Two copies of the row slide together: the grey one, and on top
   of it a coloured one (.col-layer) that is only visible through a window, the sweet spot, centred under the section title
   (site.js sets --spot to the title's centre and --core to half the title's width, so the whole title is covered; never under
   110 px, so the widest 210 px logo fits. With no script it stays in the middle of the row, 150 px either side): fully
   coloured across --core either side of --spot and fading out over --soft more (60 px), so a logo that is leaving keeps some colour. So a logo
   is covered with its own colours as it slides in, is fully coloured inside, and the colour goes off through the side as it
   leaves. Both rows run the same animation, so they always line up.
   The coloured layer sits where the row's content does (6 px above, 10 px below: the .marquee padding). */
.clients { position: relative; }
.clients .m-track { gap: 0; align-items: center; padding-left: 0; animation-name: mq-clients; }
.client { flex: none; width: 210px; display: flex; align-items: center; justify-content: center; height: 72px; }
.client img { display: block; filter: grayscale(1); opacity: .72; }
.col-layer { --core: clamp(110px, 20%, 150px); --soft: 60px; --lin: 24px; --lsoft: 40px; position: absolute; top: 6px; bottom: 10px; left: 0; right: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--spot, 50%) - var(--core) + var(--lin) - var(--lsoft)), #000 calc(var(--spot, 50%) - var(--core) + var(--lin)), #000 calc(var(--spot, 50%) + var(--core)), transparent calc(var(--spot, 50%) + var(--core) + var(--soft)));
  mask-image: linear-gradient(90deg, transparent calc(var(--spot, 50%) - var(--core) + var(--lin) - var(--lsoft)), #000 calc(var(--spot, 50%) - var(--core) + var(--lin)), #000 calc(var(--spot, 50%) + var(--core)), transparent calc(var(--spot, 50%) + var(--core) + var(--soft))); }
@media (max-width: 600px) { .col-layer { --soft: 50px; --lin: 20px; --lsoft: 36px; } }
/* the left edge is tighter than the right: the colour is full from --lin inside the start of the window and gone --lsoft before that,
   so a logo leaving to the left loses its colour sooner than a logo arriving from the right gains it */
.col-layer .client img { filter: none; opacity: 1; }
@keyframes mq-clients { to { transform: translateX(-50%); } } /* two whole sets of slots, so the loop restarts with no jump */
@media (prefers-reduced-motion: reduce) { .clients .m-track { flex-wrap: wrap; width: auto; justify-content: center; } .clients .client { width: auto; margin: 0 28px 20px; } .clients .client[aria-hidden="true"] { display: none; } .col-layer { display: none; } }
.pa-line { margin: 18px 0 0; color: var(--muted); }

@media (min-width: 800px) { .area-cols { grid-template-columns: repeat(4, 1fr); gap: 36px; } }

/* round two, pass 3 (Emily 11/8): dark band for "Who we work for", compact logo band right under the proof strip */
.section.dark { background: var(--ink); color: #fff; }
.section.dark h2 { color: #fff; }
.section.dark .eyebrow { color: var(--accent); }
.section.dark .aud-head p { color: rgba(255,255,255,.82); }
#clients { padding: 44px 0 52px; }
#clients .section-head { margin-bottom: 20px; }

/* Our Work, round two pass 3 (Emily 11/8): best photos first, every row the same size and always full.
   First view: the 3 strongest photos of each category. "See All" opens that category: rows fill evenly (a short last row stretches). */
.gallery { display: flex; flex-wrap: wrap; gap: 10px; --cols: 2; }
@media (min-width: 700px) { .gallery { --cols: 3; } .g-sec.solo .gallery { --cols: var(--solo-cols, 3); } }
.gallery > div { flex: 1 1 calc((100% - (var(--cols) - 1) * 10px) / var(--cols)); min-width: 0; height: clamp(150px, 21vw, 270px); }
.gallery button, .gallery figure.shot { height: 100%; margin: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-sec { margin-bottom: 44px; }

/* photos: a soft tint where a photo is still arriving, so the page never shows a hole */
.ph img, .mosaic img, .gallery img, .aud img, .strip img, .photo img, .shot img { background: #e4eae5; }

/* category buttons: all of them visible at once (they wrap), nothing to scroll sideways, not sticky */
.chips { flex-wrap: wrap; overflow: visible; position: static; padding: 0; margin: 0 0 28px; }

/* home hero: dark only behind the text on the left, so the white roof reads white (Emily 11/8, option 2) */
.hero-home::after { background: linear-gradient(90deg, rgba(10,16,12,.82) 0%, rgba(10,16,12,.55) 38%, rgba(10,16,12,.08) 72%, rgba(10,16,12,0) 100%); }

/* desktop: use the whole screen (Emily 11/8: "everything is squished in the center").
   Header runs edge to edge (logo far left, button far right); content gets a wider column. */
@media (min-width: 1100px) {
  :root { --wrap: 1360px; --pad: 40px; }
  .site-header .wrap { max-width: none; padding: 0 clamp(32px, 3.5vw, 64px); }
}
@media (min-width: 1700px) { :root { --wrap: 1520px; } }

/* proof strip on desktop: same edge-to-edge width as the header, bigger type, so the four badges fill the row (Emily 11/8) */
@media (min-width: 1100px) {
  .proof .wrap { max-width: none; padding: 0 clamp(32px, 3.5vw, 64px); }
  .proof ul { padding: 34px 0; }
  .proof li, .proof li:nth-child(even) { font-size: 17.5px; gap: 14px; padding: 0 28px; }
  .proof svg { width: 30px; height: 30px; }
}
@media (min-width: 1100px) {
  .proof ul { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
  .proof li, .proof li:nth-child(even) { flex: none; justify-content: flex-start; padding: 0; border-left: 0; }
}
@media (min-width: 1100px) { .proof li, .proof li:nth-child(even) { flex: 0 1 auto; min-width: 0; } }

/* header: nav tabs centred between the logo (far left) and the button (far right) */
@media (min-width: 1180px) {
  .site-header .wrap { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .site-header .brand { justify-self: start; }
  .site-header .nav { margin: 0; justify-self: center; }
  .site-header .head-cta { justify-self: end; }
}

/* contact page: one tight email card */
.contact-card { padding: 22px 24px; align-self: start; }
.contact-card .cc-label { margin: 0 0 6px; font: 800 20px/1.15 var(--head); color: var(--ink); text-transform: uppercase; letter-spacing: .01em; }
.contact-card a.big { font-size: 24px; overflow-wrap: anywhere; }
.contact-card p { margin: 6px 0 0; }

/* proof strip: the phone ticker copy only shows on phones */
.proof .dup { display: none; }

/* phones: centred heads, hero label on two clean lines, proof strip as a slow ticker (Emily 11/8) */
@media (max-width: 700px) {
  .hero .wrap { text-align: center; }
  .hero h1, .hero .lede { margin-left: auto; margin-right: auto; }
  .hero .lede { font-size: 17px; }
  .hero .eyebrow { font-size: 11.5px; letter-spacing: .12em; line-height: 1.6; }
  .hero .eyebrow .eb-part { display: block; }
  .hero .eyebrow .sep { display: none; }
  .hero .btn-row { justify-content: center; }
  .hero .btn-row .btn { flex: 1 1 100%; max-width: 360px; }
  .section-head, .aud-head, .cred-head, .g-head { text-align: center; margin-left: auto; margin-right: auto; }
  .section-head .lede, .aud-head p, .cred-head p { margin-left: auto; margin-right: auto; }
  .aud-head h2 { margin-left: auto; margin-right: auto; }
  .g-head { justify-content: center; }
  .section .btn-row, .cred-head .btn-row { justify-content: center; }
  .proof .wrap { padding: 0; overflow: hidden; }
  .proof ul { display: flex; width: max-content; gap: 0; padding: 16px 0; animation: proof-mq 26s linear infinite; }
  .proof li, .proof li:nth-child(even) { flex: none; white-space: nowrap; border-left: 0; padding: 0 22px; font-size: 14.5px; }
  .proof .dup { display: flex; }
  .proof br { display: none; }
  .proof svg { width: 20px; height: 20px; }
}
@keyframes proof-mq { to { transform: translateX(-50%); } }
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .proof ul { animation: none; } .proof .wrap { overflow-x: auto; } }
@media (min-width: 1180px) and (max-width: 1279px) { .nav > a, .nav .dd > button { padding-left: 8px; padding-right: 8px; } .site-header .wrap { gap: 12px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Our Work opens on the photos: a little room under the header */
#gallery { padding-top: 40px; }
/* category pills turn green on hover */
@media (hover: hover) { .chip:hover { background: var(--green); border-color: var(--green); color: #fff; } }
/* proof strip dividers: own cells, so each line sits midway between two badges */
.proof .sep { display: none; }
@media (min-width: 1100px) {
  .proof ul { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; gap: 0; justify-content: stretch; }
  .proof .sep { display: block; align-self: stretch; min-width: 40px; background: linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat; }
  .proof li:not(.sep) { padding: 0; }
}
/* the divider cells shifted the child numbers: second-column badges on mid widths are children 3 and 7 */
@media (min-width: 701px) and (max-width: 899px) {
  .proof li:nth-child(even) { border-left: 0; padding: 0 12px 0 0; }
  .proof li:nth-child(4n+3) { border-left: 1px solid var(--line); padding: 0 0 0 14px; }
}
@media (min-width: 1100px) { .proof ul { grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto; } }

/* footer: social icons instead of names */
.site-footer .social { display: flex; gap: 10px; margin-top: 6px; }
.site-footer .social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); background: #fff; }
.site-footer .social a:hover { background: var(--green); border-color: var(--green); color: #fff; }
.site-footer .social svg { width: 20px; height: 20px; }

/* footer: logo, line and button centred in their column (Emily 11/8) */
.foot-grid > div:first-child { text-align: center; }
.foot-grid > div:first-child .logo { margin-left: auto; margin-right: auto; display: block; }
.foot-grid > div:first-child .btn-row { justify-content: center; }

/* Trusted By: one card per kind of client (Emily 11/8) */
.tb-h { color: #fff; font-size: clamp(40px, 5vw, 64px); margin: 0 0 32px; }
.tb-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tb-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.tb-card { border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 28px 26px; background: rgba(255,255,255,.03); }
.tb-ic { display: block; width: 60px; height: 60px; color: var(--accent); margin-bottom: 18px; }
.tb-card h3 { color: #fff; font-size: 28px; margin: 0 0 8px; }
.tb-card p { color: rgba(255,255,255,.78); margin: 0; max-width: 34ch; }
.tb-note { color: rgba(255,255,255,.62); margin: 24px 0 0; font-size: 15px; }
@media (max-width: 700px) { .tb-h, .tb-note { text-align: center; } .tb-card { text-align: center; } .tb-ic { margin-left: auto; margin-right: auto; } .tb-card p { margin-left: auto; margin-right: auto; } }

/* category pills on hover: green outline and green text on a pale green, so it reads differently from the selected pill */
@media (hover: hover) { .chip:hover { background: var(--green-tint); border-color: var(--green); color: var(--green); }
  .chip[aria-pressed="true"]:hover { background: var(--green); color: #fff; } }
@media (max-width: 639px) { .tb-card { padding: 20px 18px; } .tb-ic { width: 44px; height: 44px; margin-bottom: 10px; } .tb-card h3 { font-size: 23px; margin-bottom: 4px; } .tb-card p { font-size: 15px; } .tb-h { margin-bottom: 22px; } .tb-grid { gap: 12px; } }

/* client logos: bigger, more room under the title (Emily 11/8) */
.client { width: 250px; height: 96px; }
#clients { padding: 64px 0 72px; }
#clients .section-head { margin-bottom: 36px; }

/* Trusted By cards are links: they lift and turn green on hover */
a.tb-card { display: block; text-decoration: none; color: inherit; transition: border-color .2s, background-color .2s, transform .2s; }
a.tb-card:hover, a.tb-card:focus-visible { border-color: var(--accent); background: rgba(87,210,122,.08); transform: translateY(-3px); }
.tb-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--accent); font-weight: 700; font-size: 15px; }
.tb-go svg { width: 16px; height: 16px; }
.tb-h { margin-top: 0; }
#who .eyebrow { display: block; margin-bottom: 10px; }
@media (max-width: 700px) { #who .eyebrow { text-align: center; } .tb-go { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { a.tb-card { transition: none; } a.tb-card:hover { transform: none; } }
/* Trusted By heading: same size as the other section headings (Emily 11/8) */
#who .tb-h { font-size: clamp(32px, 4.6vw, 48px); margin-bottom: 36px; }

/* ===================== round three (Edin + Emily 11/9 call) ===================== */
/* home hero: text centred and capped so it holds on a 1680 monitor; the proof strip sits inside the bottom of the photo */
.hero-home .wrap { text-align: center; align-items: center; padding-top: 88px; padding-bottom: 96px; min-height: min(74vh, 680px); }
.hero-home h1 { max-width: 14ch; margin-left: auto; margin-right: auto; }
.hero-home .lede { margin-left: auto; margin-right: auto; max-width: 52ch; font-size: 19px; }
.hero-home .btn-row { justify-content: center; }
.hero-home::after { background: linear-gradient(180deg, rgba(10,16,12,.38) 0%, rgba(10,16,12,.52) 45%, rgba(10,16,12,.78) 100%); }
.hero-home .proof { position: relative; z-index: 1; background: none; border: 0; }
/* Emily 11/9 pm: no black band. The photo itself fades darker toward its bottom edge (no visible edge), and the words carry a soft shadow. */
.hero-home .proof::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -150px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8,14,10,0) 0%, rgba(8,14,10,.34) 55%, rgba(8,14,10,.6) 100%); }
.hero-home .proof li { text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 16px rgba(0,0,0,.4); }
.hero-home .proof svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.hero-home .proof li { color: #fff; }
.hero-home .proof svg { color: var(--accent); }
.hero-home .proof .sep { background-image: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)); }
.hero-home .proof li:nth-child(even) { border-left-color: rgba(255,255,255,.18); }
@media (min-width: 701px) and (max-width: 899px) { .hero-home .proof li:nth-child(4n+3) { border-left-color: rgba(255,255,255,.18); } }
@media (min-width: 1100px) { .hero-home .proof ul { padding: 24px 0; } }
.hero-home .proof .wrap { text-align: left; min-height: 0; padding-top: 0; padding-bottom: 0; display: block; }
@media (max-width: 700px) { .hero-home .wrap { padding-top: 64px; padding-bottom: 56px; min-height: 0; } .hero-home .proof .wrap { padding: 0; } }

/* inner pages: centred hero too (Emily 11/9: left-leaning looked odd) */
.hero-page .wrap { text-align: center; }
.hero-page h1 { margin-left: auto; margin-right: auto; max-width: 18ch; }
.hero-page .lede { margin-left: auto; margin-right: auto; max-width: 56ch; }
.hero-page .btn-row { justify-content: center; }
.hero-page::after { background: linear-gradient(180deg, rgba(10,16,12,.55) 0%, rgba(10,16,12,.7) 100%); }

/* nav: the two menus mark the current section */
.dd.cur > button { box-shadow: inset 0 -3px 0 var(--green); color: var(--green); }

/* Trusted by: building types as tags (Edin 11/9: the grey line was "terrible wording", make it pop) */
.tb-tags { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tb-tags li { border: 1px solid rgba(87,210,122,.45); color: var(--accent); border-radius: 999px; padding: 9px 16px; font: 700 13.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
/* Phones (Edin 11/10): the tags were a ragged cloud of rows with 1, 1, 2 and 2 pills. Two even columns instead. */
@media (max-width: 700px) {
  .tb-tags { display: grid; grid-template-columns: 1fr 1fr; }
  .tb-tags li { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; border-radius: 12px; min-height: 44px; }
}
a.tb-card:hover, a.tb-card:focus-visible { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-4px); }

/* client logos: one heading, more room, bigger marks, the colour window on the middle two quarters (set in site.js) */
#clients { padding: 80px 0 88px; }
#clients .section-head { margin-bottom: 44px; }
.client { width: 280px; height: 110px; }
@media (max-width: 700px) { .client { width: 230px; height: 90px; } }

/* service pages: benefits (numbered, no checkmarks), scope list, one credentials line, sibling cards */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: none; }
@media (min-width: 900px) { .benefits { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.benefits li { border-top: 3px solid var(--green); padding-top: 20px; }
.benefits .n { display: block; font: 800 15px/1 var(--body); letter-spacing: .12em; color: var(--green); margin-bottom: 12px; }
.benefits h3 { font-size: 28px; margin-bottom: 8px; }
.benefits p { margin: 0; color: var(--muted); }
.scope { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 0; }
.scope li { padding: 14px 0 14px 22px; border-top: 1px solid var(--line); position: relative; font-weight: 600; color: var(--ink); }
.scope li:last-child { border-bottom: 1px solid var(--line); }
.scope li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--green); }
.cred-line { margin: 28px 0 0; padding: 16px 20px; border-left: 3px solid var(--green); background: var(--soft); color: var(--text); font-weight: 600; max-width: 70ch; }
.sib .card .ph { aspect-ratio: 16 / 9; }

/* residential: three cards with anchors the menu points at */
.res-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .res-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.res-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; scroll-margin-top: 90px; }
.res-card .ph { aspect-ratio: 16 / 10; overflow: hidden; }
.res-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.res-card h3 { margin: 20px 22px 6px; }
.res-card p { margin: 0 22px 18px; color: var(--muted); }
.res-card .btn, .res-card .more { margin: auto 22px 22px; align-self: flex-start; }
.res-card .more { font-weight: 800; color: var(--green); display: inline-flex; gap: 6px; align-items: center; }
a.res-card:hover { box-shadow: var(--shadow); }

/* service area: the green map */
.map-sec { padding-bottom: 32px; }
.state-map { display: block; width: min(100%, 780px); margin: 8px auto 0; height: auto; }
.state-map path { fill: #0d6b2a; stroke: #57d27a; stroke-width: .8; stroke-linejoin: round; transition: fill .18s; }
.state-map a:hover path, .state-map a:focus path { fill: #1b8d3c; }
.state-map a:focus-visible path { stroke: #fff; stroke-width: 2; }
.state-map text { font: 800 8px/1 var(--head); fill: #fff; text-anchor: middle; pointer-events: none; letter-spacing: .04em; }
.st-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .st-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.st { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 28px; scroll-margin-top: 90px; }
.st h2 { font-size: clamp(30px, 3.6vw, 40px); margin-bottom: 2px; }
.st-sub { color: var(--green); font-weight: 800; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.st p { color: var(--text); max-width: 60ch; }
.st .btn { margin-top: 6px; }

/* contact: two doors, then the form for that door */
.doors { display: flex; gap: 10px; justify-content: center; margin: -8px 0 28px; }
.door { min-height: 52px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 700 16px/1 var(--body); cursor: pointer; }
.door[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.door:hover:not([aria-selected="true"]) { border-color: var(--green); color: var(--green); }
@media (max-width: 520px) { .doors { flex-direction: column; } .door { width: 100%; } }
#contact .section-head.center { margin-bottom: 28px; }

/* forms: fields that belong to one path only */
form[data-kind="residential"] [data-only="commercial"], form[data-kind="commercial"] [data-only="residential"] { display: none; }

/* Our Work: back to the top after a long category opens */
.to-top { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 65; display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; box-shadow: var(--shadow); cursor: pointer; font-size: 22px; line-height: 1; }
.to-top.show { display: grid; place-items: center; }
@media (min-width: 1180px) { .to-top { bottom: 24px; } }

/* ---- round three, pass 2 (Edin 11/9 late) ---- */
/* home hero: text on the LEFT (Edin: "I would rather have that left on the left"), but the block is capped and padded so it
   does not hug the far left on a 1680 monitor; the proof strip stays inside the photo */
.hero-home .wrap { text-align: left; align-items: flex-start; }
.hero-home h1 { margin-left: 0; margin-right: 0; max-width: 13ch; }
.hero-home .lede { margin-left: 0; margin-right: 0; max-width: 46ch; }
.hero-home .btn-row { justify-content: flex-start; }
.hero-home::after { background: linear-gradient(90deg, rgba(10,16,12,.84) 0%, rgba(10,16,12,.58) 40%, rgba(10,16,12,.18) 75%, rgba(10,16,12,.06) 100%), linear-gradient(180deg, rgba(10,16,12,0) 60%, rgba(10,16,12,.55) 100%); }
@media (min-width: 1100px) { .hero-home .wrap { padding-left: clamp(40px, 6vw, 120px); } }
.hero-page .wrap { text-align: left; }
.hero-page h1, .hero-page .lede { margin-left: 0; margin-right: 0; }
.hero-page .btn-row { justify-content: flex-start; }
@media (max-width: 700px) { .hero-home .wrap, .hero-page .wrap { text-align: center; align-items: center; } .hero-home h1, .hero-home .lede, .hero-page h1, .hero-page .lede { margin-left: auto; margin-right: auto; } .hero-home .btn-row, .hero-page .btn-row { justify-content: center; } }

/* service area hub: state cards are links */
a.st { display: block; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
a.st:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
a.st .more, .cty .more { font-weight: 800; color: var(--green); display: inline-flex; gap: 6px; align-items: center; }
/* state page: heading beside the map, this state lit */
.map-split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .map-split { grid-template-columns: 1fr 1fr; gap: 56px; } .map-split .state-map { margin: 0; width: 100%; } }
.state-map.has-on a:not(.on) path { fill: #c9dccf; stroke: #fff; }
.state-map.has-on a:not(.on) text { fill: #5d685f; }
.state-map.has-on a.on path { fill: #0d6b2a; }
.cty-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .cty-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cty-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.cty { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 18px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s, border-color .2s; }
.cty:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--green); }
.cty h3 { font-size: 24px; margin-bottom: 6px; }
.cty p { color: var(--muted); margin: 0 0 12px; font-size: 15px; }
.cty .more { margin-top: auto; font-size: 14px; }
/* county page: the towns */
.towns { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; }
@media (min-width: 520px) { .towns { grid-template-columns: repeat(3, 1fr); } }
.towns li { position: relative; padding-left: 16px; font-weight: 600; color: var(--ink); }
.towns li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--green); }
.near { display: flex; flex-wrap: wrap; gap: 10px; }
.near a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.near a:hover { border-color: var(--green); color: var(--green); }
.area-cols a { text-decoration: none; color: inherit; display: block; border-radius: var(--radius); }
.area-cols a:hover h3 { color: var(--green); }

/* ---- round three, pass 3 (Edin 11/9 morning, from his phone): left hero on phones, one rhythm for every section, compact logos ---- */
@media (max-width: 700px) {
  /* the hero stays LEFT on phones too (Edin: "I still want this to be left aligned") */
  .hero .wrap, .hero-home .wrap, .hero-page .wrap { text-align: left; align-items: flex-start; }
  .hero h1, .hero .lede, .hero-home h1, .hero-home .lede, .hero-page h1, .hero-page .lede { margin-left: 0; margin-right: 0; }
  .hero .btn-row, .hero-home .btn-row, .hero-page .btn-row { justify-content: flex-start; }
  .hero .btn-row .btn { flex: 1 1 100%; max-width: none; }
  .hero h1 { font-size: 40px; max-width: 12ch; }
  .hero-page h1 { font-size: 36px; }
  .hero-home .wrap { padding-top: 56px; padding-bottom: 48px; }
  .hero-page .wrap { padding-top: 48px; padding-bottom: 44px; }
  .hero-home::after { background: linear-gradient(180deg, rgba(10,16,12,.58) 0%, rgba(10,16,12,.66) 60%, rgba(10,16,12,.8) 100%); }
  .hero-home .proof { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 14, 10, .8); }

  /* one rhythm: every band 48 px top and bottom, every heading the same size, the same room under each heading */
  .section, .cred, #clients, .map-sec, .cta-band .wrap, #gallery { padding-top: 48px; padding-bottom: 48px; }
  .section-head, .aud-head, .cred-head, .g-head, #clients .section-head, #who .tb-h, .tb-h { margin-bottom: 22px; }
  h2, .cred h2, .tb-h, #who .tb-h, .g-head h2, .st h2 { font-size: 30px; }
  .section-head .lede, .aud-head p, .cred-head p, .cta-band p { font-size: 16px; }
  .eyebrow { margin-bottom: 10px; }
  .btn-row { gap: 10px; }
  .section .btn-row { margin-top: 20px; }
  .cred .btn-row, .cred-head .btn-row { margin-top: 20px; }
  .cred .cred-in { gap: 24px; }
  .cred-grid li { padding: 18px 16px; }
  .aud-grid { margin-top: 20px; gap: 10px; }
  .aud span { font-size: 21px; padding: 36px 12px 12px; }
  .tb-card { padding: 18px 16px; }
  .tb-grid { gap: 10px; }
  .tb-tags { margin-top: 18px; gap: 8px; }
  .tb-tags li { padding: 7px 12px; font-size: 12px; }
  .quotes { gap: 26px; }
  .quotes blockquote { font-size: 23px; }
  .quotes blockquote::before { font-size: 48px; margin-bottom: 4px; }
  .steps { gap: 12px; }
  .steps li { padding: 18px 18px 18px 62px; }
  .faq summary { font-size: 20px; min-height: 56px; padding: 14px 40px 14px 0; }
  .why-list li { padding: 16px 0 16px 48px; }
  .g-sec { margin-bottom: 36px; }
  .cty-grid { gap: 10px; }
  .cty { padding: 16px 16px 14px; }
  .cty h3 { font-size: 21px; }
  .st { padding: 20px 20px 22px; }

  /* client logos: a compact band, smaller marks that all read at the same weight */
  .client { width: 150px; height: 56px; }
  .client img { max-height: 40px; max-width: 124px; width: auto; height: auto; }
  .clients .m-track { animation-duration: 36s; }
  .col-layer { --soft: 40px; --lin: 16px; --lsoft: 28px; }

  /* Our Work: the sticky category row keeps vertical swipes vertical */
  .chips { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
}
@media (min-width: 360px) and (max-width: 700px) {
  /* Trusted by: two cards across on phones, so the band is one screen, not two */
  .tb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tb-card { padding: 16px 14px; text-align: left; }
  .tb-ic { width: 34px; height: 34px; margin: 0 0 10px; }
  .tb-card h3 { font-size: 20px; margin-bottom: 4px; }
  .tb-card p { font-size: 13.5px; line-height: 1.45; margin: 0; }
  .tb-go { margin-top: 10px; font-size: 13.5px; justify-content: flex-start; }
}

/* services: a static grid, three across (two rows of six) on desktop, two across on phones (Edin 11/9: "static, not moving, maybe 2 lines") */
/* Home page (Edin 11/10): What We Do is split into Commercial and Residential, each with its own label. */
.svc-group { font: 800 15px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--green); margin: 0 0 20px; display: flex; align-items: center; gap: 16px; }
.svc-group::before, .svc-group::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.14); }
.svc-group a { color: inherit; text-decoration: none; }
.svc-grid + .svc-group { margin-top: 52px; }
/* An odd last card (three Residential cards in two columns on phones) spans the row so it does not sit alone. */
@media (max-width: 899px) { .svc-grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; } .svc-grid .card:last-child:nth-child(odd) .ph { aspect-ratio: 16 / 9; } }
.svc-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
/* The home Residential group has four cards: one row of four on desktop, two by two on phones (Edin 11/10). */
@media (min-width: 900px) { .svc-grid.four { grid-template-columns: repeat(4, 1fr); } }
/* The Free Roof Estimate card's button is longer than "Learn More": keep it on one line in a half-width phone card. */
@media (max-width: 899px) { .svc-grid .card.card-cta .more { white-space: nowrap; font-size: 12px; gap: 4px; } }
.svc-grid .card .ph { aspect-ratio: 4 / 3; }
@media (max-width: 700px) {
  .svc-grid { gap: 10px; }
  .svc-grid .card .body { padding: 12px 12px 14px; }
  .svc-grid .card h3 { font-size: 18px; line-height: 1.05; margin-bottom: 4px; }
  .svc-grid .card p { font-size: 13px; line-height: 1.4; margin-bottom: 10px; }
  .svc-grid .card .more { font-size: 13px; }
}

/* sticky Call / Proposal bar: off while the hero (which has the same buttons) is on screen, slides up once you scroll past it,
   and steps away again at the closing CTA band and footer (Edin 11/9: "not sure I like that sticky button") */
.action-bar { transform: translateY(110%); transition: transform .25s ease; }
.action-bar.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .action-bar { transition: none; } }

/* mobile menu: a fixed panel under the header that scrolls on its own; the page behind it stays put (Edin 11/9: "stuck on the nav bar") */
.mobile-nav.open { position: fixed; top: var(--hh, 73px); left: 0; right: 0; bottom: 0; z-index: 55; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.mobile-nav > a { font: 800 20px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; padding: 16px var(--pad) 10px; border-bottom: 0; color: var(--green); }
.mobile-nav .sub { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.mobile-nav .sub a { border-bottom: 0; padding: 11px var(--pad) 11px calc(var(--pad) + 14px); font-weight: 700; font-size: 16px; color: var(--ink); }
.mobile-nav > a[href="/our-work/"], .mobile-nav > a[href="/service-area/"], .mobile-nav > a[href="/contact/"] { font: 700 17px/1.2 var(--body); text-transform: none; letter-spacing: 0; color: var(--ink); padding: 15px var(--pad); border-bottom: 1px solid var(--line); }
.mn-cta { display: grid; gap: 10px; padding: 18px var(--pad) 8px; }
.mn-cta .btn { width: 100%; }
body.menu-open { overflow: hidden; }
body.menu-open .action-bar { transform: translateY(110%); }
.menu-btn[aria-expanded="true"] svg { display: none; }
.menu-btn[aria-expanded="true"]::before { content: "\2715"; font: 700 20px/1 var(--body); color: var(--ink); }
/* phones: a solid header (iOS repaints a blurred sticky header as a blank band while scrolling), and the credentials heading centred like its text */
@media (max-width: 1179px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } }
@media (max-width: 700px) { .cred h2 { margin-left: auto; margin-right: auto; } .cred .cred-head { text-align: center; } }

/* audit 11/9: wider headline on inner heroes (Service Area wrapped to five lines at 1440), shorter service cards, footer links as real tap targets, 12 px eyebrow on phones */
@media (min-width: 900px) { .hero-page h1 { max-width: 24ch; } }
.svc-grid .card .ph { aspect-ratio: 16 / 10; }
.site-footer ul a { display: inline-block; padding: 7px 0; }
.site-footer ul { gap: 2px; }
@media (max-width: 700px) { .hero .eyebrow { font-size: 12px; } .contact-card a.big { display: inline-block; padding: 8px 0; } }

/* ---- all-screens pass (11/9 night): iPad portrait + landscape, laptop, tap targets everywhere ---- */
/* tap targets at every width: footer legal line, inline contact links, the "see residential roofing" link */
.legal { gap: 0 22px; align-items: center; }
.legal a, .legal span { display: inline-block; padding: 8px 0; }
.legal span:has(a) { padding: 0; } .legal span a { display: inline-block; padding: 8px 0; }
.contact-card a.big { display: inline-block; padding: 8px 0; }
.aud-head p a, .section-head .lede a { display: inline-block; padding: 6px 0; }
.prose a { display: inline-block; padding: 6px 0; }
/* iPad portrait (701 to 899): the phone grids stay at two columns, but use the room */
@media (min-width: 701px) and (max-width: 899px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .svc-grid .card .ph { aspect-ratio: 16 / 9; }
  .quotes { grid-template-columns: repeat(2, 1fr); gap: 40px 36px; }
  .quotes figure:last-child { grid-column: 1 / -1; max-width: 60ch; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cred .cred-in { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .cred .cred-grid { grid-template-columns: 1fr; }
  .hero-home .wrap { padding-top: 96px; padding-bottom: 72px; }
}
/* iPad landscape and small laptops (900 to 1179): hamburger nav, so keep the solid header */
@media (min-width: 900px) and (max-width: 1179px) {
  .hero-home .wrap { padding-top: 88px; padding-bottom: 72px; }
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}
/* the logo band fades at both edges on every width so a cut-off mark never reads as a bug */
.marquee.clients { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }


/* ===== Emily 11/9 pm ===== */
/* footer: everything centred, phone back in the Contact column */
.foot-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; } }
.site-footer .foot-grid > div { text-align: center; }
.site-footer .foot-grid > div:first-child p { max-width: 34ch; margin-left: auto; margin-right: auto; }
.site-footer ul { justify-items: center; }
.site-footer .social { justify-content: center; }
.site-footer .legal { justify-content: center; text-align: center; }
@media (min-width: 900px) and (max-width: 1179px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 701px) and (max-width: 899px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Our Work: a slow row of photos, each named for its service */
.work-sec { padding-bottom: 56px; }
.work-row { padding: 6px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.work-row .m-track { gap: 16px; padding-left: 0; animation-name: mq-work; }
@keyframes mq-work { to { transform: translateX(calc(-50% - 8px)); } }
.wk { position: relative; flex: 0 0 min(340px, 72vw); border-radius: var(--radius); overflow: hidden; background: var(--soft); display: block; text-decoration: none; box-shadow: 0 4px 14px rgba(20,27,22,.10); }
.wk img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform .5s ease; }
.wk:hover img, .wk:focus-visible img { transform: scale(1.04); }
.wk-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: #fff; font: 800 22px/1 var(--head); letter-spacing: .03em; text-transform: uppercase; background: linear-gradient(transparent, rgba(8,14,10,.82)); }
@media (prefers-reduced-motion: reduce) { .work-row .m-track { animation: none; } .work-row .wk[aria-hidden="true"] { display: none; } .work-row { overflow-x: auto; } }
@media (max-width: 600px) { .wk-cap { font-size: 19px; padding: 32px 14px 12px; } }

/* service area: the map on a dark band, sized to the screen so all four states show without scrolling */
.hub-map { padding-top: 56px; padding-bottom: 56px; }
.hub-map .section-head { margin-bottom: 8px; }
#map.hub-map .state-map { width: min(100%, 780px, calc((100svh - 300px) * 160 / 164)); min-width: min(100%, 320px); height: auto; margin: 4px auto 0; filter: drop-shadow(0 18px 36px rgba(0,0,0,.45)); }
#map.hub-map .state-map a path { fill: #0e7a2f; stroke: var(--accent); stroke-width: 1px; }
#map.hub-map .state-map a:hover path, #map.hub-map .state-map a:focus path { fill: #14993b; }
#map.hub-map .state-map text { font-size: 8.5px; }

/* ===== Emily 11/9 pm 3: blueprint grid behind the dark bands, with short green tracers that run along it and turn at the squares (site.js draws them) ===== */
.blueprint { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(87,210,122,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(87,210,122,.17) 1px, transparent 1px),
                    linear-gradient(rgba(87,210,122,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(87,210,122,.07) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.blueprint svg { position: absolute; left: 0; top: 0; overflow: hidden; }
.bp { fill: none; stroke: var(--accent); stroke-linejoin: miter; stroke-linecap: butt; }
.bp-tail { stroke-width: 1.4; opacity: .3; }
.bp-head { stroke-width: 2; opacity: .8; }
.bp-run { animation: bp-run var(--dur) linear var(--delay) infinite; }
@keyframes bp-run { 0% { stroke-dashoffset: var(--s); } 90%, 100% { stroke-dashoffset: var(--e); } }
.bp-loop { stroke-width: 1.8; opacity: .8; animation: bp-loop var(--dur) linear var(--delay) infinite; }
@keyframes bp-loop { to { stroke-dashoffset: calc(var(--p) * -1); } }
.blueprint.off svg * { animation-play-state: paused; }
.bp-band { position: relative; overflow: hidden; }
.bp-band > .wrap { position: relative; z-index: 1; }

/* contact: one dark band. The form is the focus: wide, white and lifted. Heading and the email line sit quietly to its left. */
.contact-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 72px 0 88px; }
.contact-band > .wrap { position: relative; z-index: 1; }
.contact-band .blueprint { opacity: .7; }
.cb-grid { display: grid; gap: 28px; align-items: start; }
.cb-head .eyebrow { color: var(--accent); }
.cb-head h1 { color: #fff; font-size: clamp(38px, 4.4vw, 54px); margin-bottom: 12px; }
.cb-head .lede { color: rgba(255,255,255,.78); margin: 0; max-width: 30ch; font-size: 17px; }
.cb-side { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); max-width: 360px; }
.contact-band .contact-card { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
.contact-band .contact-card .cc-label { color: rgba(255,255,255,.62); font: 700 13px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 4px; }
.contact-band .contact-card a.big { color: #fff; font-size: 22px; padding: 6px 0; }
.contact-band .contact-card a.big:hover { color: var(--accent); }
.contact-band .contact-card p:not(.cc-label) { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.5; margin: 2px 0 0; }
.contact-band .pform.inline { color: var(--text); border: 0; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.contact-band .pform.inline .pform-body { padding: 28px 28px; }
@media (min-width: 980px) { .cb-grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); column-gap: 72px; } }
@media (max-width: 979px) {
  .cb-left { display: contents; }
  .cb-head { order: 1; } .cb-grid > .pform { order: 2; } .cb-side { order: 3; margin-top: 4px; }
  .contact-band { padding: 44px 0 56px; }
  .contact-band .pform.inline .pform-body { padding: 22px 20px; }
}

/* Emily 11/9 pm: the hero subtext keeps its size (so the headline stays first); it is pure white with a soft shadow so it holds on the white roof. */
.hero-home .lede { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.4); }

/* contact polish (Emily 11/9 pm): the form card is rounded all the way round (the footer used to poke out square), the left side is centred,
   and the line between the intro and the email is easy to see */
.contact-band .pform.inline { overflow: hidden; }
.cb-left { text-align: center; }
.cb-head .lede { margin-left: auto; margin-right: auto; }
.cb-side { max-width: none; margin-top: 36px; padding-top: 34px; border-top: 2px solid rgba(87,210,122,.55); }
.contact-band .contact-card .cc-label { color: rgba(255,255,255,.78); }
.contact-band .contact-card a.big { display: inline-block; }
.contact-band .contact-card p:not(.cc-label) { max-width: 34ch; margin-left: auto; margin-right: auto; color: rgba(255,255,255,.72); }
@media (max-width: 979px) { .cb-head, .cb-side { text-align: center; } .cb-side { margin-top: 8px; padding-top: 28px; } }
/* ---- home service area + NJ regions (Edin 11/9 night): the four-state map on Home, counts beside it, North/Central/South Jersey pages ---- */
.area-home .map-split { align-items: center; }
.area-home .lede { margin-bottom: 22px; }
.area-counts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.area-counts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.area-counts li > a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; text-decoration: none; color: inherit; padding: 2px 0; min-height: 36px; }
.area-counts strong { font: 800 22px/1.1 var(--head); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.area-counts li > a span { color: var(--muted); font-size: 15px; }
.area-counts li > a:hover strong { color: var(--green); }
.area-counts .regs { display: inline-flex; gap: 6px; }
.area-counts .regs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; color: var(--green); text-decoration: none; }
.area-counts .regs a:hover { border-color: var(--green); }
.area-home .state-map { width: min(100%, 520px); }
@media (min-width: 960px) { .area-home .map-split { grid-template-columns: 1.05fr 1fr; } .area-home .state-map { width: 100%; max-width: 560px; justify-self: end; } }
.regions { margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.regions .eyebrow { margin: 0; }
.regions .near a.on { border-color: var(--green); background: var(--green); color: #fff; }
@media (max-width: 700px) {
  .area-counts strong { font-size: 20px; }
  .area-counts li > a span { font-size: 14px; flex-basis: 100%; }
  .area-home .state-map { margin: 0 auto; width: min(100%, 360px); }
}
.hub-regions { justify-content: center; margin-top: 22px; }


/* ===== Emily 11/9 pm (Streamlabs list) ===== */
/* 1 + 2: Our Work scrolls the other way from the logo band; the logo band never pauses on hover */
.work-row .m-track { animation-direction: reverse; }
.marquee.clients:hover .m-track, .marquee.clients:focus-within .m-track { animation-play-state: running; }

/* 7: the popup form is rounded all the way round */
.modal-panel { overflow: hidden; }

/* 8: the Service Area photo fades into the dark band under it */
.hero-fade::after { background: linear-gradient(0deg, var(--ink) 0, rgba(20,27,22,0) 200px), linear-gradient(90deg, rgba(10,16,12,.86) 0%, rgba(10,16,12,.62) 55%, rgba(10,16,12,.25) 100%); }

/* 6: map lines. One colour. A thick line round the OUTSIDE of the four states, thin lines for the borders between them. */
.state-map { shape-rendering: geometricPrecision; }
.state-map .outline path { fill: var(--accent); stroke: var(--accent); stroke-width: 5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.state-map a path { stroke: var(--accent); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.state-map text { font-size: 8.5px; }
.state-map a[href$="new-jersey/"] text { font-size: 7.4px; }

/* the dimmed states on a state page sit well on the dark grid band */
.bp-band .state-map.has-on a:not(.on) path { fill: #1d2a21; stroke: rgba(87,210,122,.45); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.bp-band .state-map.has-on a:not(.on) text { fill: rgba(255,255,255,.55); }
.bp-band .state-map.has-on a.on path { fill: #0e7a2f; stroke: var(--accent); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }

/* 3 + 4: Service Area. The four states sit in boxes beside the map, each joined to its state by a thin line. */
.callouts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.callouts .state-map { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
.callout { display: block; padding: 16px 18px 15px; border: 1px solid rgba(87,210,122,.5); border-radius: 10px; background: rgba(20,27,22,.94); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.callout h3 { color: #fff; font: 800 24px/1 var(--head); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; }
.callout p { margin: 0 0 10px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.4; }
.callout .more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 800; font-size: 14px; min-height: 28px; }
.callout:hover, .callout:focus-visible { border-color: var(--accent); background: #0f1712; }
.co-lines { display: none; }
@media (min-width: 1180px) {
  .callouts { grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "ny map ct" "pa map nj"; column-gap: 44px; row-gap: 0; align-items: stretch; }
  .callouts .state-map { grid-area: map; grid-column: auto; order: 0; margin: 4px auto 0; }
  .co-ny { grid-area: ny; align-self: start; justify-self: end; }
  .co-pa { grid-area: pa; align-self: end; justify-self: end; }
  .co-ct { grid-area: ct; align-self: start; justify-self: start; }
  .co-nj { grid-area: nj; align-self: end; justify-self: start; }
  .callout { width: 100%; max-width: 290px; }
  .co-lines { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .co-lines path { fill: none; stroke: var(--accent); stroke-width: 1.5px; stroke-linejoin: miter; }
  .co-lines rect { fill: var(--accent); }
}

#map.hub-map .state-map .outline path { fill: var(--accent); stroke: var(--accent); stroke-width: 5px; }


/* state pages: the lede sits on the dark band, so it needs to be light */
.bp-band .lede { color: rgba(255,255,255,.82); }


/* ===== Three steps to a proposal: blueprint band (Emily 11/9 night, option A) ===== */
.steps-bp .st-row { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 34px; position: relative; }
.steps-bp .st-row li { position: relative; }
.steps-bp .node { width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); border: 2px solid var(--accent); color: var(--accent); font: 800 26px/1 var(--head); position: relative; z-index: 1; }
.steps-bp strong { display: block; color: #fff; font: 800 28px/1.05 var(--head); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.steps-bp .st-row span.t { color: rgba(255,255,255,.8); display: block; }
.steps-bp .btn-row { justify-content: center; }
/* phone and tablet: the steps stack, nodes on the left, a line down through them */
@media (max-width: 899px) {
  .steps-bp .st-row li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; text-align: left; }
  .steps-bp .node { grid-row: 1 / span 2; }
  .steps-bp strong { margin: 0 0 4px; font-size: 24px; }
  .steps-bp .st-row li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 52px; bottom: -34px; border-left: 2px solid rgba(87,210,122,.6); }
  .steps-bp .btn-row { justify-content: flex-start; }
}
/* desktop: three across, centred, joined by a line through the nodes */
@media (min-width: 900px) {
  .steps-bp .st-row { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .steps-bp .st-row::before { content: ""; position: absolute; top: 25px; left: 16.6%; right: 16.6%; border-top: 2px solid rgba(87,210,122,.6); }
  .steps-bp .st-row li { text-align: center; padding: 0 10px; }
  .steps-bp .node { margin: 0 auto 18px; }
  .steps-bp .st-row span.t { max-width: 30ch; margin: 0 auto; }
}

/* callout boxes carry the full description again (Emily 11/9 night): state, short line, the counties by name */
.callout .co-sub { margin: 0 0 8px; color: var(--accent); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; }
.callout .co-list { margin: 0 0 10px; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.45; }
@media (min-width: 1180px) { .callout { max-width: 310px; } }
/* the NJ label is small so it sits inside the narrow state, clear of the border */
#map.hub-map .state-map a[href$="new-jersey/"] text { font-size: 7.2px; }

/* phones: one box per row so the long description has room */
@media (max-width: 699px) { .callouts { grid-template-columns: 1fr; } }

/* contact: the form is back to its natural height, step by step (Emily 11/9 night). Left column starts on the same line as the card. */
.cb-grid { align-items: start; }


/* ===== blended edges (Emily 11/9 night) ===== */
/* Service Area hub: the dark map band fades into the photo band under it */
.map-sec.dark + .cta-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--ink) 0%, rgba(20,27,22,.55) 45%, rgba(20,27,22,0) 100%); }

/* location pills match the Our Work filter pills (Emily 11/9 night): same size, same hover (soft green fill), same selected look */
.near a, .area-counts .regs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 14px/1 var(--body); text-decoration: none; }
@media (hover: hover) { .near a:hover, .area-counts .regs a:hover { background: var(--green-tint); border-color: var(--green); color: var(--green); } }
.near a.on, .regions .near a.on { background: var(--green); border-color: var(--green); color: #fff; }
@media (hover: hover) { .regions .near a.on:hover { background: var(--green); border-color: var(--green); color: #fff; } }


/* Residential: the three homeowner lines sit under the services heading, one row on desktop (Emily 11/9 night: five sections, same order as Commercial) */
.res-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.res-points li { position: relative; padding-left: 32px; color: var(--text); }
.res-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.res-points strong { color: var(--ink); }
@media (min-width: 900px) { .res-points { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 36px; } }


/* ===== button hover: Swap (Emily 11/9 night, option C). Colours trade places with a quick fade; nothing moves. ===== */
.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary { border-color: var(--green); }
.btn-primary:hover, .btn-primary:focus-visible { background: #fff; color: var(--green); border-color: var(--green); }
.site-footer a.btn-primary:hover, .site-footer a.btn-primary:focus-visible { color: var(--green); }
/* white buttons sit on the green and dark bands: they turn clear with a white outline instead of green, so they never blend into a green band */
.btn-light { border-color: #fff; }
.btn-light:hover, .btn-light:focus-visible { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
/* dark outline buttons fill green, not black */
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--green); color: #fff; border-color: var(--green); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* "See All Our Work" (the Our Work rows) keeps its original hover, filling dark (Emily 11/9 night: green looked like a second Request a Proposal) */
.work-sec .btn-ghost:hover, .work-sec .btn-ghost:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Desktop strip: each item sits in the middle of its own cell between the dividers (Edin 11/10 night: the first and last
   hugged the page edges while the middle two floated). Cells grow by the same amount around their words. */
@media (min-width: 1100px) {
  .proof ul { display: flex; align-items: center; justify-content: stretch; gap: 0; }
  .proof li:not(.sep), .proof li:not(.sep):nth-child(even) { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 18px; border-left: 0; }
  .proof .sep { display: block; flex: none; align-self: stretch; width: 1px; min-width: 1px; background: var(--line); }
  .hero-home .proof .sep { background: rgba(255,255,255,.22); }
}

/* ===== Emily 11/10 evening (PR 27), ported onto the live build ===== */
/* ===== Emily 11/10 evening, from her phone: clear strip, brand menu button, neater menu ===== */
@media (max-width: 700px) {
  /* hero stays LEFT on phones (Emily 11/10 later: "uncenter"; matches Edin's 11/9 left hero) */
  /* credentials strip sits clear over the photo like desktop, no black bar (Emily 11/10) */
  .hero-home .proof { background: none; }
}
/* menu button in brand green, not the iOS default blue */
.menu-btn { color: var(--green); }
.menu-btn[aria-expanded="true"]::before { color: var(--green); }
/* phone menu: every top-level link the same green heading with one divider line above it; sub-links line up under
   their heading instead of stepping in; the two buttons at the bottom are real buttons again (the general menu-link
   rule was giving them dark text, left-aligned words and a grey bottom line). [href] beats the old per-page selectors,
   which never matched on the preview because its links start with /tristate-gc-site/. */
.mobile-nav > a, .mobile-nav > a[href] { font: 800 19px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; color: var(--green); padding: 18px var(--pad) 8px; border-bottom: 0; border-top: 1px solid var(--line); }
.mobile-nav > a:first-child { border-top: 0; }
.mobile-nav > a[href*="our-work"], .mobile-nav > a[href*="service-area"], .mobile-nav > a[href*="contact"] { padding-bottom: 18px; }
.mobile-nav .sub { border-bottom: 0; padding-bottom: 10px; }
.mobile-nav .sub a { padding: 9px var(--pad); font: 600 16px/1.3 var(--body); color: var(--ink); }
.mobile-nav .mn-cta { padding: 20px var(--pad) 8px; border-top: 1px solid var(--line); }
.mobile-nav .mn-cta .btn { display: flex; justify-content: center; align-items: center; padding: 0 24px; border: 2px solid; font: 700 16px/1 var(--body); }
.mobile-nav .mn-cta .btn-primary { color: #fff; background: var(--green); border-color: var(--green); }
.mobile-nav .mn-cta .btn-ghost { color: var(--ink); background: #fff; border-color: var(--ink); }
/* Home Service Area on phones (Emily 11/10, approved from the mock): map first, the four states as 2x2 tap cards.
   Text, cards and button LEFT-aligned (Emily 11/10 later: "uncenter"). Desktop unchanged. */
@media (max-width: 700px) {
  .area-home .map-split { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .area-home .map-split > div { display: contents; }
  .area-home .eyebrow { order: 1; }
  .area-home h2 { order: 2; }
  .area-home .lede { order: 3; }
  .area-home .map-split > svg { order: 4; width: 100%; max-width: 330px; height: auto; margin: 4px auto 20px; }
  .area-home .area-counts { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; border: 0; }
  .area-home .area-counts li { display: block; padding: 0; border: 0; }
  .area-home .area-counts li > a { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; text-align: left; gap: 4px; height: 100%; box-sizing: border-box; min-height: 92px; padding: 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
  .area-home .area-counts li > a span { flex-basis: auto; font-size: 13.5px; line-height: 1.3; }
  .area-home .area-counts strong { font-size: 19px; }
  .area-home .btn-row { order: 6; justify-content: flex-start; margin-top: 22px; }
}
/* Home hero hierarchy on phones (Emily 11/10: "the hierarchy between the header versus the subtext needs to be way
   better"): the headline gets bigger and wider, the subtext smaller and softer, so the slogan clearly leads. The
   extra dark fade behind the strip is dropped on phones (the photo's own fade already darkens the bottom), so the
   strip no longer sits in a darker band. "See Our Work" gets a light dark fill so its words read on the white roof. */
@media (max-width: 700px) {
  .hero-home h1 { font-size: 52px; line-height: .95; max-width: 11ch; letter-spacing: .005em; }
  .hero-home .lede { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.8); max-width: 30ch; margin-top: 16px; }
  .hero-home .eyebrow { margin-bottom: 14px; }
  .hero-home .proof::before { display: none; }
  .hero .btn-outline-light { background: rgba(10,16,12,.35); }
}
/* Home hero on phones: the photo fades smoothly to dark from just under the buttons, so the roof edge in the photo
   behind the strip blends away instead of showing as a line (Emily 11/10) */
@media (max-width: 700px) {
  .hero-home::after { background: linear-gradient(180deg, rgba(10,16,12,.58) 0%, rgba(10,16,12,.64) 56%, rgba(10,16,12,.96) 79%, rgba(10,16,12,.98) 100%); }
}

/* ===== Emily 11/10 (PR 26): See All N Photos hover ===== */
/* "See All N Photos" (the Our Work page category buttons) keeps its black fill on hover, matching "See All Our Work" (Emily 11/10: no preference, black kept so the two See All buttons match); same quick fade as every other button */
.g-more { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.g-more:hover, .g-more:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .g-more { transition: none; } }