/* =========================================================
   Microsite Blueprint — shared design system stylesheet (template)
   Plain CSS, no build step, no site-specific values. Copy this file
   unchanged to output/<slug>/site/assets/style.css for every new site.
   Design system documented in wiki/components/component-library.md.
   Paired with templates/site-builder.js (render functions) and
   templates/site-builder-main.js (mobile nav toggle).
   ========================================================= */

:root {
  /* Ductless Mini-Split Quincy — teal / granite-slate / clay palette, drawn
     from the real supplied logo (teal airflow + navy roof + gray wall unit)
     and from Quincy's own identity as the Granite City and a shipbuilding
     port. Deliberately distinct from BOTH sister sites in this Boston-metro
     cluster:
       Somerville  — navy header, blue/orange, condensed uppercase Trebuchet
                     H1s, 6px radius, sharp rectangular hero eyebrow.
       Framingham  — forest-green header, charcoal/amber, rounded Century
                     Gothic title-case H1s, 10px radius, pill hero eyebrow.
       Quincy (here) — TEAL header, granite slate + clay accent, SERIF
                     headings, tight 3px radius, and a rule-underlined hero
                     eyebrow with no badge box at all.
     Navy is kept only as deep body/footer ink so the header never reads as
     Somerville's. The accent is deliberately in the red/clay family rather
     than orange (Somerville) or amber (Framingham). */
  --brand:        #0F7A7A;
  --brand-dark:   #0A5C5C;
  --navy:         #16264F;
  --navy-dark:    #0D1832;
  --teal:         #4A5568;
  --teal-dark:    #363E4D;
  --gold:         #B14A3A;
  --gold-dark:    #8E3A2D;
  --urgent:       #B23A2C;
  --urgent-dark:  #8E2C21;
  --ink:          #1F2328;
  --ink-soft:     #5A6472;
  --line:         #dfe3e8;
  --bg:           #ffffff;
  --bg-alt:       #f2f5f6;
  --max:          1160px;
  --radius:       3px;
  --font-head: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
/* Serif headings run visually heavier than the sisters' sans stacks at 800,
   so this site steps weight down to 700 and adds a touch of tightening. */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
.btn--urgent { background: var(--urgent); color: #fff; }
.btn--urgent:hover { background: var(--urgent-dark); }

/* --- Quincy site-specific overrides -------------------------------------- */
/* The shared template pairs .btn--gold with dark navy text, which was fine
   against Framingham's light amber but fails WCAG AA against this site's
   clay accent (3.3:1). White on the darkened clay measures 5.3:1. Same class
   of bug already caught on the striping and sealcoating sites — fixed here
   before it shipped rather than after. */
.btn--gold  { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-dark); color: #fff; }

/* Top utility bar runs granite slate rather than the deep navy both sister
   sites use up there, so the header as a whole (slate bar over a teal nav)
   reads as its own thing. Navy stays as body/footer ink and in the logo.
   Needs the extra `.site-header` specificity: the shared template's own
   `.header-top { background: var(--navy) }` rule appears later in this file,
   so a bare `.header-top` override loses on source order. */
.site-header .header-top { background: var(--teal); }

/* Serif headings need a little more air than the sisters' sans stacks. */
.hero h1 { line-height: 1.15; }
.section h2 { line-height: 1.25; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* hero with a full-bleed photo behind the headline (optional homepage variant) */
.hero--photo { position: relative; overflow: hidden; background: var(--navy); }
.hero--photo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--photo__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(14,24,48,.68) 0%, rgba(14,24,48,.48) 45%, rgba(14,24,48,.22) 100%);
}
.hero--photo > .wrap { position: relative; z-index: 2; }
.hero--photo .hero__inner { padding: 72px 0; }
.hero--photo .hero__eyebrow { background: none; color: #fff; border-bottom-color: var(--gold); }
.hero--photo h1 { color: #fff; }
.hero--photo .hero__inner > p { color: rgba(255,255,255,.85); }
.hero--photo .hero__checklist li { color: #fff; }
.hero--photo .hero__checklist li::before { color: var(--gold); }
@media (max-width: 900px) { .hero--photo .hero__inner { padding: 48px 0; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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