/* =========================================================
   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 Somerville — navy/blue/orange palette, forked from the shared template, matched to the real supplied logo. */
  --brand:        #2B6CB8;
  --brand-dark:   #1F4E8C;
  --navy:         #14274E;
  --navy-dark:    #0B1730;
  --teal:         #3FA9C9;
  --teal-dark:    #2E8CAA;
  --gold:         #E8973D;
  --gold-dark:    #C97A28;
  --urgent:       #D9622B;
  --urgent-dark:  #B54F20;
  --ink:          #1a1a2e;
  --ink-soft:     #4a5a6a;
  --line:         #e3e8ee;
  --bg:           #ffffff;
  --bg-alt:       #f5f7fa;
  --max:          1160px;
  --radius:       6px;
  --font-head: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4 { font-weight: 800; }
.btn--urgent { background: var(--urgent); color: #fff; }
.btn--urgent:hover { background: var(--urgent-dark); }

* { 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; }
.hero .hero__eyebrow {
  display: inline-block; background: var(--navy); color: #fff; text-transform: uppercase;
  letter-spacing: .06em; font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: var(--radius);
  margin-bottom: 14px;
}
.hero h1 { color: var(--navy); text-transform: uppercase; margin: 0 0 16px; max-width: 20ch; }
.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: rgba(255,255,255,.16); backdrop-filter: blur(2px); }
.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; }


/* --- Form-in-hero variant (Contact page), added 2026-08-20 ----------------- */
/* A normal photo hero pushes the contact form below the fold, burying the
   primary conversion element. Here the form card sits INSIDE the hero beside
   the heading. Spacing is tuned to clear a 1280x720 viewport, not just 800. */
.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__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; }
.hero--form .form-card--teal {
  background: rgba(27, 58, 107, .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; }
.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 .field textarea { min-height: 58px; }
.hero--form .btn { padding: 11px 22px; }
@media (max-width: 900px) {
  .hero--form .hero__inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 36px; }
}