/* Attic Crew (atticrewwa.com) — refreshed static site.
   Design language carried over from the live WordPress site: Josefin Sans,
   forest green #0A470A with bright green #00AB00 actions, near-black navy
   (#000422) photo heroes, the diagonal "roof" shapes from the logo symbol,
   and a charcoal footer. */

:root {
  --green-950: #052705;
  --green-900: #073807;
  --green-800: #0a470a;
  --green-700: #2e6a1f;
  --green-600: #3d7524;
  --green-500: #00ab00;
  --green-450: #009a00;
  --cta: #008a00;          /* white text 4.5:1 (WCAG AA); --green-500 fails at 3.1:1 */
  --cta-hover: #007a00;
  --green-100: #e7f4e3;
  --green-50: #f3f9f1;
  --ink: #000422;
  --ink-2: #141a2b;
  --text: #22262f;
  --muted: #555b66;
  --line: #e2e7df;
  --bg: #ffffff;
  --bg-soft: #f5f8f3;
  --charcoal: #232623;
  --star: #f5b400;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 4, 34, .06), 0 8px 24px rgba(0, 4, 34, .08);
  --shadow-lg: 0 2px 6px rgba(0, 4, 34, .08), 0 24px 60px rgba(0, 4, 34, .16);
  --head: "Josefin Sans", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--green-800); text-underline-offset: 3px; }
a:hover { color: var(--green-500); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h4 { font-size: 1.05rem; }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--green-500); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 820px; }
section { padding: clamp(44px, 5vw, 72px) 0; position: relative; }
section.soft { background: var(--bg-soft); }
section.tight { padding: clamp(32px, 3.5vw, 48px) 0; }

/* ---------- type helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 26px; height: 10px; background: url("../img/brand/mark.svg") no-repeat center / contain; flex: none; }
.on-dark .eyebrow, .hero .eyebrow { color: #7fe07f; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); }
.section-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.fine { font-size: .82rem; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { --bg: var(--cta); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 15px 26px 12px; border-radius: var(--radius-sm); border: 2px solid var(--bg); background: var(--bg); color: var(--fg); font-family: var(--head); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.btn svg { width: 19px; height: 19px; margin-top: -3px; flex: none; }
.btn:hover { --bg: var(--cta-hover); color: var(--fg); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 171, 0, .25); }
.btn-dark { --bg: var(--green-800); }
.btn-dark:hover { --bg: var(--green-900); box-shadow: 0 8px 20px rgba(10, 71, 10, .25); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; box-shadow: none; }
.btn-outline { background: transparent; color: var(--green-800); border-color: var(--green-800); }
.btn-outline:hover { background: var(--green-800); color: #fff; box-shadow: none; }
.btn-white { --bg: #fff; --fg: var(--green-800); }
.btn-white:hover { --bg: var(--green-50); --fg: var(--green-900); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 700; text-decoration: none; color: var(--green-800); }
.text-link svg { width: 16px; height: 16px; margin-top: -3px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- top bar + header ---------- */
.topbar { background: var(--green-900); color: #cfe9c9; font-size: .86rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #9bf09b; }
.topbar-items { display: flex; gap: 22px; align-items: center; }
.topbar-items span { display: inline-flex; gap: 7px; align-items: center; }
.topbar svg { width: 15px; height: 15px; color: #7fe07f; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(0, 4, 34, .96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.logo { flex: none; display: block; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav-item > button { font-family: var(--head); font-weight: 600; font-size: 1rem; color: #e9ecf3; text-decoration: none; padding: 12px 12px 9px; border-radius: 8px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav > a:hover, .nav-item > button:hover, .nav-item.open > button { color: #fff; background: rgba(255, 255, 255, .08); }
.nav a[aria-current="page"], .nav-item.current > button { color: #7fe07f; }
.nav-item { position: relative; }
.nav-item > button svg { width: 14px; height: 14px; margin-top: -3px; transition: transform .2s; }
.nav-item.open > button svg { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); min-width: 250px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .96rem; }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--green-50); color: var(--green-800); }
.dropdown a svg { width: 16px; height: 16px; flex: none; margin-top: -3px; }
.dropdown.mega { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 6px 10px; width: min(960px, 94vw); padding: 18px; }
.mega-group h4 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); margin: 4px 12px 6px; }
.mega-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.mega-foot a { color: var(--green-800); }
.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--head); font-weight: 700; line-height: 1.1; }
.header-phone .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green-500); }
.header-phone .ic svg { width: 19px; height: 19px; color: #fff; }
.header-phone small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9fb0c7; font-weight: 600; margin-bottom: 3px; }
.header-phone:hover { color: #9bf09b; }
.header-cta .btn { min-height: 46px; padding: 12px 20px 9px; font-size: .96rem; }
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; margin: auto; }
.menu-toggle .close-ic { display: none; }
.nav-open .menu-toggle .open-ic { display: none; }
.nav-open .menu-toggle .close-ic { display: block; }
.mobile-call { display: none; }

.lander-header .wrap { justify-content: space-between; }

@media (max-width: 1140px) {
  .header-phone small { display: none; }
  .nav > a, .nav-item > button { padding: 12px 9px 9px; font-size: .95rem; }
  .site-header .wrap { gap: 18px; }
}
@media (max-width: 1020px) {
  :root { --header-h: 68px; }
  .topbar { display: none; }
  .logo img { height: 40px; }
  .menu-toggle { display: grid; place-items: center; margin-left: 0; }
  .mobile-call { display: grid; place-items: center; margin-left: auto; width: 46px; height: 46px; border-radius: 10px; background: var(--green-500); color: #fff; }
  .mobile-call svg { width: 21px; height: 21px; }
  .header-cta { display: none; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }
  .nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--ink); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 120px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; margin: 0; }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open { overflow: hidden; }
  .nav > a, .nav-item > button { width: 100%; justify-content: space-between; font-size: 1.12rem; padding: 16px 6px 13px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .dropdown, .dropdown.mega { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; background: transparent; width: auto; min-width: 0; padding: 0 0 10px 8px; display: none; grid-template-columns: 1fr; }
  .nav-item.open .dropdown { display: block; transform: none; }
  .dropdown a { color: #d7dce6; padding: 11px 10px; }
  .dropdown a:hover, .dropdown a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: #fff; }
  .mega-group h4 { color: #7fe07f; margin: 12px 10px 4px; }
  .mega-foot { border-color: rgba(255, 255, 255, .1); }
  .mega-foot a { color: #7fe07f; }
  .nav .nav-mobile-cta { display: grid; gap: 10px; margin-top: 22px; }
  .lander-header .header-cta { display: flex; }
  .lander-header .header-cta .btn { display: none; }
  .lander-header .mobile-call { display: none; }
  .lander-header .header-phone .ic { width: 36px; height: 36px; }
}
.nav-mobile-cta { display: none; }
@media (min-width: 1021px) { .nav .nav-mobile-cta { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-video-toggle { position: absolute; z-index: 3; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 4, 34, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: rgba(0, 4, 34, .8); }
.hero-video-toggle svg { width: 16px; height: 16px; }
.hero-video-toggle .ic-play, .hero-video-toggle.paused .ic-pause { display: none; }
.hero-video-toggle.paused .ic-play { display: block; margin-left: 2px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 4, 34, .9) 0%, rgba(0, 4, 34, .74) 36%, rgba(0, 4, 34, .3) 62%, rgba(0, 4, 34, .12) 100%), linear-gradient(0deg, rgba(0, 4, 34, .35) 0%, transparent 30%); }
.hero::after { content: ""; position: absolute; z-index: 1; right: -6%; bottom: -1px; width: 46%; height: 26%; background: linear-gradient(135deg, transparent 49.6%, rgba(0, 171, 0, .22) 50%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.hero:not(.no-form) .hero-copy { padding-top: clamp(8px, 2vw, 28px); }
.hero.no-form .wrap { align-items: center; }
.hero.no-form .wrap { grid-template-columns: minmax(0, 820px); }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .accent { color: #7fe07f; }
.hero .kicker { font-family: var(--head); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); color: #fff; margin: 0 0 8px; }
.hero .lead { color: #d6dbe6; max-width: 620px; margin-bottom: 22px; }
.hero-points { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; color: #eef1f6; font-weight: 600; }
.hero-points svg { flex: none; width: 22px; height: 22px; color: #00d100; margin-top: 2px; }
.hero .btn-row { margin-bottom: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hero-trust .ht { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #c5ccda; line-height: 1.25; text-decoration: none; }
.hero-trust .ht b { display: block; color: #fff; font-family: var(--head); font-size: 1rem; }
.hero-trust .stars { color: var(--star); letter-spacing: 1px; font-size: .95rem; }
.hero-trust svg { width: 30px; height: 30px; flex: none; }
.breadcrumb { font-size: .86rem; color: #aab4c6; margin-bottom: 18px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #6d7890; }
.breadcrumb a { color: #d6dbe6; text-decoration: none; }
.breadcrumb a:hover { color: #7fe07f; }
.image-note { position: absolute; z-index: 3; right: 14px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: rgba(255, 255, 255, .62); cursor: help; }
.image-note svg { width: 13px; height: 13px; }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero::before { background: linear-gradient(180deg, rgba(0, 4, 34, .68) 0%, rgba(0, 4, 34, .82) 55%, rgba(0, 4, 34, .94) 100%); }
}

/* ---------- estimate card (Leads inline form + fallback) ---------- */
.estimate-card { background: #fff; color: var(--text); border-radius: 18px; box-shadow: var(--shadow-lg); border-top: 6px solid var(--green-500); padding: clamp(22px, 2.6vw, 30px); position: relative; }
.estimate-card > header { margin-bottom: 14px; }
.estimate-card h2, .estimate-card .card-title { font-size: clamp(1.35rem, 2vw, 1.6rem); margin: 0 0 6px; color: var(--ink); }
.estimate-card > header p { margin: 0; color: var(--muted); font-size: .95rem; }
.offer-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--green-100); color: var(--green-800); font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px 4px; margin-bottom: 12px; }
.offer-pill svg { width: 14px; height: 14px; margin-top: -2px; }
.lead-embed { min-height: 200px; }
.js .lead-embed:not(.is-live):not(.is-fallback) > * { visibility: hidden; }
.js .lead-embed:not(.is-live):not(.is-fallback) { background: linear-gradient(90deg, var(--bg-soft) 25%, #edf2ea 50%, var(--bg-soft) 75%) 0 0 / 200% 100%; border-radius: 12px; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form .full { grid-column: 1 / -1; }
.lead-form label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email], .lead-form select, .lead-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 13px; border: 1px solid #cfd6cc; border-radius: 8px; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.lead-form textarea { min-height: 84px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(0, 171, 0, .18); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips legend { font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 8px 13px 6px; border: 1px solid #dcdfe3; background: #f6f7f6; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .15s; }
.chip input:checked + span { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--green-500); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; line-height: 1.45; color: var(--muted); background: var(--bg-soft); border-radius: 8px; padding: 10px 12px; }
.consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--green-500); }
.hp-field { position: absolute !important; left: -9999px; }
.form-status { grid-column: 1 / -1; font-size: .92rem; font-weight: 600; margin: 0; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--green-800); background: var(--green-100); padding: 12px 14px; border-radius: 8px; }
.form-status.err { color: #8a1c1c; background: #fdecec; padding: 12px 14px; border-radius: 8px; }
.form-assure { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .82rem; color: var(--muted); }
.form-assure span { display: inline-flex; gap: 6px; align-items: center; }
.form-assure svg { width: 15px; height: 15px; color: var(--green-500); margin-top: -2px; }
.preview-note { display: none; }
.is-preview .preview-note { display: block; grid-column: 1 / -1; font-size: .78rem; color: #6b5a00; background: #fff8d6; border: 1px dashed #e5c94f; border-radius: 8px; padding: 8px 10px; margin: 0; }
@media (max-width: 480px) { .lead-form { grid-template-columns: 1fr; } }

/* ---------- trust strip ---------- */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); padding: 22px 0; }
.trust-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.trust-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-size: .88rem; line-height: 1.3; }
.trust-item b { display: block; font-family: var(--head); font-size: 1.02rem; color: var(--ink); }
.trust-item .stars { color: var(--star); font-size: .9rem; letter-spacing: 1px; }
.trust-item img { height: 58px; width: auto; }
.trust-item .ti-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; flex: none; }
.trust-item .ti-ic svg { width: 22px; height: 22px; }
.trust-item svg.brand-ic { width: 34px; height: 34px; flex: none; }
@media (max-width: 760px) { .trust-strip .wrap { justify-content: center; } .trust-item { flex: 1 1 42%; } }

/* ---------- green band (carried over from the live home page) ---------- */
.green-band { position: relative; background: var(--green-800); color: #fff; padding: 34px 0; overflow: hidden; }
.green-band::after { content: ""; position: absolute; right: -4%; top: 0; bottom: 0; width: 34%; background: linear-gradient(120deg, transparent 50%, var(--green-600) 50.2%); opacity: .55; }
.green-band .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.green-band p { font-family: var(--head); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.3; margin: 0; max-width: 780px; }

/* ---------- layout blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.split .media img, .figure img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.figure { margin: 0; }
.figure figcaption, .media figcaption { font-size: .86rem; color: var(--muted); margin-top: 10px; }
.media { position: relative; margin: 0; }
.media .badge-float { position: absolute; left: -18px; bottom: 24px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 14px 18px; display: flex; align-items: center; gap: 12px; max-width: 280px; }
.badge-float b { font-family: var(--head); font-size: 1.5rem; color: var(--green-800); display: block; line-height: 1; white-space: nowrap; padding-top: 4px; }
.badge-float span { font-size: .84rem; color: var(--muted); line-height: 1.3; }
.prose p { color: #3b404a; }
.prose p.big { font-size: 1.12rem; color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  /* In the flow on phones, overlapping the photo's bottom edge, so it never covers the caption. */
  .media .badge-float { position: relative; left: auto; bottom: auto; width: fit-content; margin: -32px 12px 0; }
}

.check-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { width: 22px; height: 22px; flex: none; color: #fff; background: var(--green-500); border-radius: 50%; padding: 4px; margin-top: 2px; }
.check-list.two { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
@media (max-width: 640px) { .check-list.two { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cfe3c8; }
.card .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; margin-bottom: 16px; }
.card .ic svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .97rem; margin: 0; }
.soft .card { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 4, 34, .05); }
@media (max-width: 1000px) { .cards, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards, .cards.four, .cards.two { grid-template-columns: 1fr; } }

/* service tiles (image cards like the live home page) */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--ink); }
.service-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.service-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 4, 34, .15) 0%, rgba(0, 4, 34, .55) 45%, rgba(0, 20, 0, .92) 100%); transition: background .3s; }
.service-tile:hover img { transform: scale(1.05); }
.service-tile:hover::before { background: linear-gradient(180deg, rgba(10, 71, 10, .3) 0%, rgba(10, 71, 10, .72) 45%, rgba(5, 39, 5, .96) 100%); }
.service-tile .tile-body { padding: 24px; }
.service-tile .tile-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--green-500); display: grid; place-items: center; margin-bottom: 14px; }
.service-tile .tile-ic svg { width: 24px; height: 24px; color: #fff; }
.service-tile h3 { color: #fff; font-size: 1.4rem; margin-bottom: 8px; }
.service-tile p { color: #dfe5ec; font-size: .95rem; margin: 0 0 14px; }
.service-tile .more { font-family: var(--head); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; color: #8ff08f; }
.service-tile .more svg { width: 16px; height: 16px; margin-top: -3px; transition: transform .2s; }
.service-tile:hover .more svg { transform: translateX(4px); }
.service-tile:hover { color: #fff; }
@media (max-width: 1000px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } .service-tile { min-height: 290px; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat b { display: block; font-family: var(--head); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--green-800); line-height: 1; margin-bottom: 8px; }
.stat span { color: var(--muted); font-weight: 600; font-size: .95rem; }
.on-dark .stat b { color: #fff; }
.on-dark .stat span { color: #c4d9c0; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } }

/* why-us section with diagonal shapes */
.why { overflow: hidden; }
.why::before { content: ""; position: absolute; left: -8%; bottom: 0; width: 40%; height: 60%; background: linear-gradient(45deg, var(--green-800) 0 50%, transparent 50.2%); opacity: .07; }
.why::after { content: ""; position: absolute; right: -6%; top: 0; width: 32%; height: 55%; background: linear-gradient(225deg, var(--green-600) 0 50%, transparent 50.2%); opacity: .08; }
.why .wrap { position: relative; z-index: 1; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(0, 4, 34, .06); }
.feature .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; flex: none; }
.feature .ic svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.05rem; margin: 4px 0 4px; }
.feature p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* video (click-to-load YouTube) */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video button { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(0deg, rgba(0, 4, 34, .5), transparent 50%); cursor: pointer; display: grid; place-items: center; }
.video .play { width: 84px; height: 84px; border-radius: 50%; background: var(--green-500); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(0, 171, 0, .25); transition: transform .2s; }
.video button:hover .play { transform: scale(1.06); }
.video .play svg { width: 32px; height: 32px; color: #fff; margin-left: 5px; }
.video .vid-cap { position: absolute; left: 18px; bottom: 14px; color: #fff; font-family: var(--head); font-weight: 700; text-align: left; line-height: 1.2; }
.video .vid-cap small { display: block; font-family: var(--body); font-weight: 600; color: #cfd6e2; font-size: .82rem; }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; background: #fff; border-radius: var(--radius); padding: 28px 22px 24px; border: 1px solid var(--line); }
.step .num { width: 46px; height: 46px; border-radius: 50%; background: var(--green-800); color: #fff; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.2rem; padding-top: 4px; margin-bottom: 16px; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -14px; width: 8px; height: 8px; border-top: 2px solid var(--green-500); border-right: 2px solid var(--green-500); transform: rotate(45deg); }
.step h3 { font-size: 1.12rem; margin-bottom: 6px; }
.step p { font-size: .94rem; color: var(--muted); margin: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } .step::after { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* before & after */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ba-grid.two { grid-template-columns: repeat(2, 1fr); }
.ba-item { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 4, 34, .08); cursor: zoom-in; }
.ba-item img { width: 100%; aspect-ratio: 800 / 387; object-fit: cover; transition: transform .4s; }
.ba-item.square img { aspect-ratio: 1; }
.ba-item:hover img { transform: scale(1.03); }
.ba-item figcaption { padding: 10px 14px 12px; font-size: .88rem; color: var(--muted); }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ba-grid, .ba-grid.two { grid-template-columns: 1fr; } }

/* season cards (insulation) */
.season { border-radius: var(--radius); padding: 28px; color: #fff; position: relative; overflow: hidden; }
.season.summer { background: linear-gradient(135deg, #b4520f, #e08a1e); }
.season.winter { background: linear-gradient(135deg, #133a6b, #2f6fb3); }
.season h3 { color: #fff; display: flex; gap: 10px; align-items: center; }
.season h3 svg { width: 28px; height: 28px; }
.season p { margin: 0; color: rgba(255, 255, 255, .92); }

/* infographic placeholders (swap in a designed image; see data/image_placeholders.json) */
.info-ph { margin: 0; border-radius: var(--radius); background: linear-gradient(135deg, var(--green-50), #fff); border: 1px solid #d4e6cd; padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; }
.info-ph::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; background: url("../img/brand/mark.svg") no-repeat center / contain; opacity: .08; transform: rotate(-8deg); }
.info-ph h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 18px; max-width: 720px; }
.info-ph ol { list-style: none; counter-reset: ip; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; position: relative; z-index: 1; }
.info-ph li { counter-increment: ip; background: #fff; border-radius: 12px; padding: 16px 16px 14px 58px; position: relative; box-shadow: 0 1px 2px rgba(0, 4, 34, .06); font-size: .95rem; line-height: 1.45; }
.info-ph li::before { content: counter(ip); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--green-500); color: #fff; font-family: var(--head); font-weight: 700; display: grid; place-items: center; padding-top: 3px; }
.info-ph li b { display: block; font-family: var(--head); color: var(--ink); margin-bottom: 2px; }
.info-ph figcaption { margin-top: 16px; font-size: .84rem; color: var(--muted); position: relative; z-index: 1; }
.ph-tag { display: none; }
.is-preview .ph-tag { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 2; background: #fff8d6; color: #6b5a00; border: 1px dashed #e5c94f; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 4px 10px; letter-spacing: .02em; }
.photo-ph { margin: 0; border-radius: var(--radius); aspect-ratio: var(--ar, 4 / 3); background: repeating-linear-gradient(135deg, #eef4ec 0 14px, #f6f9f5 14px 28px); border: 2px dashed #bcd7b3; display: grid; place-items: center; text-align: center; padding: 24px; position: relative; color: var(--green-800); }
.photo-ph svg { width: 40px; height: 40px; margin: 0 auto 10px; opacity: .7; }
.photo-ph b { font-family: var(--head); display: block; font-size: 1.05rem; }
.photo-ph span { font-size: .86rem; color: var(--muted); display: block; max-width: 380px; }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { margin: 0; background: #fff; border-radius: var(--radius); padding: 26px 24px 22px; box-shadow: 0 1px 2px rgba(0, 4, 34, .06); display: flex; flex-direction: column; border: 1px solid var(--line); }
.review .stars { color: var(--star); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 12px; }
.review blockquote { margin: 0 0 18px; color: #333944; font-size: .98rem; flex: 1; }
.review footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.review .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-800); color: #fff; display: grid; place-items: center; font-family: var(--head); font-weight: 700; padding-top: 3px; flex: none; }
.review footer b { display: block; font-family: var(--head); color: var(--ink); line-height: 1.2; }
.review footer span { font-size: .82rem; color: var(--muted); }
.review footer svg { width: 22px; height: 22px; margin-left: auto; flex: none; }
.review-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@media (max-width: 1000px) {
  .reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 12px; margin: 0 -24px; padding-left: 24px; padding-right: 24px; scrollbar-width: thin; }
  .review { flex: 0 0 min(86%, 380px); scroll-snap-align: start; }
}

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 17px 22px; font-family: var(--head); font-weight: 700; font-size: 1.08rem; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--green-500); border-bottom: 2.5px solid var(--green-500); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details[open] summary { color: var(--green-800); }
.faq .answer { padding: 0 22px 20px; color: #3b404a; }
.faq .answer p:last-child { margin: 0; }

/* related services */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: #fff; transition: all .2s; }
.related a:hover { border-color: var(--green-500); box-shadow: var(--shadow); color: var(--green-800); }
.related .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; flex: none; }
.related .ic svg { width: 22px; height: 22px; }
.related b { font-family: var(--head); display: block; line-height: 1.2; font-size: 1.08rem; margin-bottom: 4px; }
.related span span { display: block; font-size: .86rem; color: var(--muted); }
@media (max-width: 900px) { .related { grid-template-columns: 1fr; } }

/* CTA band (diagonal greens, as on the live site) */
.cta-band { background: var(--green-900); color: #fff; overflow: hidden; padding: clamp(48px, 6vw, 76px) 0; }
.cta-band::before { content: ""; position: absolute; inset: 0 0 0 34%; background: linear-gradient(115deg, transparent 0 30%, var(--green-600) 30.2% 62%, var(--green-800) 62.2%); opacity: .9; }
.cta-band::after { content: ""; position: absolute; right: 0; bottom: 0; width: 30%; height: 70%; background: linear-gradient(135deg, transparent 50%, var(--green-950) 50.2%); opacity: .7; }
.cta-band .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: #d5e8cf; font-size: 1.12rem; margin: 0; max-width: 620px; }
.cta-band .cta-phone { display: block; font-family: var(--head); font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; margin-top: 14px; text-align: center; }
.cta-band .cta-phone:hover { color: #9bf09b; }
.cta-band .btn-row { flex-direction: column; align-items: stretch; }
@media (max-width: 800px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band::before { inset: 40% 0 0 0; } }

/* offer coupon */
.coupon { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: #fff; border: 3px dashed var(--green-500); border-radius: 20px; padding: clamp(24px, 3vw, 36px); position: relative; }
.coupon .seal { width: 140px; height: 140px; border-radius: 50%; background: var(--green-800); color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; font-family: var(--head); font-weight: 700; line-height: 1.05; box-shadow: 0 0 0 6px var(--green-100); padding-top: 6px; }
.coupon .seal b { display: block; font-size: 2rem; color: #7fe07f; }
.coupon .seal span { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.coupon h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 10px; }
.coupon .check-list { margin: 0; }
.coupon .coupon-cta { display: grid; gap: 10px; justify-items: center; }
.coupon .coupon-cta a.phone { font-family: var(--head); font-weight: 700; color: var(--green-800); text-decoration: none; font-size: 1.15rem; }
@media (max-width: 900px) { .coupon { grid-template-columns: 1fr; text-align: left; } .coupon .seal { width: 104px; height: 104px; } .coupon .coupon-cta { justify-items: stretch; } }

/* offices */
.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.office { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.office svg { width: 22px; height: 22px; color: var(--green-500); flex: none; margin-top: 2px; }
.office b { font-family: var(--head); display: block; color: var(--ink); font-size: 1.05rem; }
.office span { font-size: .92rem; color: var(--muted); }
.office a { font-size: .86rem; font-weight: 700; text-decoration: none; }
.area-list { columns: 3 180px; column-gap: 24px; list-style: none; padding: 0; margin: 0; }
.area-list li { padding: 6px 0 4px; border-bottom: 1px dashed var(--line); break-inside: avoid; font-weight: 600; color: #3b404a; display: flex; gap: 8px; align-items: center; }
.area-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); flex: none; margin-top: -3px; }
@media (max-width: 900px) { .offices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .offices { grid-template-columns: 1fr; } }

/* badges */
.badges { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.badges img { height: 64px; width: auto; }
.partner-logos { display: flex; flex-wrap: wrap; gap: 20px 34px; align-items: center; margin: 18px 0 8px; }
.partner-logos img { height: 40px; width: auto; }

/* callout */
.callout { display: flex; gap: 16px; align-items: flex-start; background: var(--green-800); color: #fff; border-radius: var(--radius); padding: 22px 24px; }
.callout svg { width: 30px; height: 30px; flex: none; color: #7fe07f; }
.callout b { font-family: var(--head); display: block; font-size: 1.1rem; margin-bottom: 2px; }
.callout p { margin: 0; color: #d5e8cf; }
.callout.warn { background: #fff7e6; color: #5c3d00; border: 1px solid #f3d38a; }
.callout.warn svg { color: #c27c00; }
.callout.warn p { color: #6b4a07; }

/* hours table */
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-weight: 700; color: var(--ink); }

/* contact layout */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 32px; align-items: start; }
.contact-aside { display: grid; gap: 18px; }
.aside-photo { margin: 0; }
.aside-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.aside-photo .disclosure { margin-top: 8px; }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.aside-card h3 { font-size: 1.15rem; display: flex; gap: 10px; align-items: center; }
.aside-card h3 svg { width: 22px; height: 22px; color: var(--green-500); }
.aside-card .big-phone { font-family: var(--head); font-weight: 700; font-size: 1.7rem; color: var(--green-800); text-decoration: none; display: block; margin: 4px 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* gallery */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.gallery-filters button { font-family: var(--head); font-weight: 700; font-size: .95rem; padding: 11px 18px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: all .15s; }
.gallery-filters button:hover { border-color: var(--green-500); color: var(--green-800); }
.gallery-filters button[aria-pressed="true"] { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-flow: row dense; }
.gallery-grid figure { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 4, 34, .08); cursor: zoom-in; display: flex; flex-direction: column; }
.gallery-grid figure[hidden] { display: none; }
.gallery-grid .pc-media { position: relative; overflow: hidden; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s; }
.gallery-grid .g-project { grid-column: span 2; }
.gallery-grid .g-project img { aspect-ratio: 2 / 1; }
.gallery-grid figure:hover img { transform: scale(1.03); }
.gallery-grid figcaption { padding: 10px 12px 11px; font-size: .84rem; color: var(--muted); line-height: 1.4; }
.gallery-grid figcaption b { display: block; color: var(--green-800); font-family: var(--head); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.gallery-grid .pc-title { display: block; color: #3b404a; }
.gallery-grid .loc { margin-top: 4px; }
.gallery-grid figure:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
@media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery-grid figcaption { font-size: .78rem; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0, 4, 20, .92); display: none; align-items: center; justify-content: center; padding: 60px 70px; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 1200px; width: 100%; text-align: center; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 8px; }
.lightbox figcaption { color: #dde3ec; margin-top: 14px; font-size: .95rem; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .1); border: 0; color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255, 255, 255, .2); }
.lightbox button svg { width: 24px; height: 24px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lightbox { padding: 60px 10px; } .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; } }

/* legal / prose pages */
.legal h2 { font-size: 1.5rem; margin-top: 1.8em; }
.legal ul { color: #3b404a; }

/* footer */
.site-footer { background: var(--charcoal); color: #b9bfb8; font-size: .95rem; padding: 64px 0 0; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--green-800), var(--green-500)); }
.foot-grid { display: grid; grid-template-columns: 1.25fr 1.2fr .9fr .9fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 1.08rem; margin-bottom: 16px; }
.site-footer a { color: #d9ded7; text-decoration: none; }
.site-footer a:hover { color: #8ff08f; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-brand img { height: 46px; width: auto; margin-bottom: 16px; }
.foot-brand p { max-width: 320px; }
.foot-phone { display: inline-flex; gap: 10px; align-items: center; font-family: var(--head); font-weight: 700; font-size: 1.35rem; color: #fff !important; margin: 4px 0 10px; }
.foot-phone svg { width: 22px; height: 22px; color: var(--green-500); }
.foot-offices li { line-height: 1.4; }
.foot-offices b { color: #fff; font-weight: 700; display: block; }
.foot-badges { display: flex; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.foot-badges img { height: 54px; width: auto; background: #fff; border-radius: 8px; padding: 4px 6px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.social a:hover { background: var(--green-500); }
.social svg { width: 20px; height: 20px; color: #fff; }
.foot-bottom { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .86rem; color: #8e958c; }
.foot-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-bottom a { color: #b9bfb8; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } .site-footer { padding-bottom: 72px; } }

/* sticky mobile action bar */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 20px rgba(0, 4, 34, .12); }
  .mobile-bar .btn { min-height: 50px; padding: 13px 10px 10px; font-size: .98rem; }
  body { padding-bottom: 72px; }
}

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- generated-image components ---------- */
.loc { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--green-700); }
.loc svg { width: 14px; height: 14px; flex: none; margin-top: -2px; }
.disclosure { display: flex; align-items: flex-start; gap: 7px; margin: 18px 0 0; max-width: 760px; }
.disclosure.center { margin-left: auto; margin-right: auto; justify-content: center; text-align: center; }
.disclosure svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--green-600); }
.section-head p svg { width: 16px; height: 16px; display: inline; vertical-align: -2px; color: var(--green-600); }

/* infographic band: one graphic, centered, in its own section */
.infographic-band { padding: clamp(48px, 6vw, 80px) 0; }
.infographic-band .info-title { text-align: center; font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 20px; }
.infographic { margin: 0 auto; max-width: 1100px; }
.info-zoom { display: block; width: 100%; padding: 0; border: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: zoom-in; }
.info-zoom img { width: 100%; }
.infographic figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: .88rem; color: var(--muted); }
.info-hint { display: inline-flex; gap: 6px; align-items: center; color: var(--green-700); font-weight: 600; }
.info-hint svg { width: 14px; height: 14px; }
.info-text { max-width: 1100px; margin: 14px auto 0; font-size: .92rem; }
.info-text summary { cursor: pointer; color: var(--green-800); font-weight: 700; font-family: var(--head); padding: 4px 0; }
.info-text ol { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 6px; color: #3b404a; }
.info-text li b { color: var(--ink); margin-right: 6px; }
.info-text li b::after { content: ":"; }

/* project walkthrough: compare slider + stages */
.wt-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.compare { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; background: #111; user-select: none; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--green-500); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.compare-handle svg { width: 16px; height: 16px; }
.cmp-label { position: absolute; top: 14px; padding: 6px 12px 4px; border-radius: 999px; font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0, 4, 34, .72); pointer-events: none; }
.cmp-label.l { left: 14px; }
.cmp-label.r { right: 14px; background: var(--green-800); }
.compare { cursor: ew-resize; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.compare input[type=range]:focus-visible ~ .compare-handle span, .compare:focus-within .compare-handle span { outline: 3px solid #fff; outline-offset: 2px; }
.wt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: wt; }
.wt-steps li { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.wt-thumb { display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 3 / 2; background: #eee; }
.wt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.wt-thumb:hover img { transform: scale(1.05); }
.wt-steps b { font-family: var(--head); color: var(--green-800); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.wt-steps p { margin: 2px 0 0; font-size: .92rem; line-height: 1.45; color: #3b404a; }
@media (max-width: 900px) { .wt-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .wt-steps li { grid-template-columns: 96px 1fr; } }

/* project / photo cards */
.project-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.project-grid > * { flex: 0 1 calc((100% - 36px) / 3); }
.project-card { margin: 0; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; transition: transform .2s, box-shadow .2s; }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.project-card:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.pc-media { position: relative; overflow: hidden; }
.project-card .pc-media img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.pc-count { position: absolute; left: 10px; top: 10px; display: inline-flex; gap: 6px; align-items: center; background: rgba(0, 4, 34, .78); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 10px 4px; border-radius: 999px; }
.pc-count svg { width: 14px; height: 14px; }
.project-card figcaption { padding: 14px 16px 16px; display: grid; gap: 4px; }
.project-card figcaption b { font-family: var(--head); color: var(--green-800); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.pc-title { font-family: var(--head); font-weight: 700; color: var(--ink); line-height: 1.3; }
@media (max-width: 900px) { .project-grid > * { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .project-grid > * { flex-basis: 100%; } }

/* about: credentials card (no team photo) */
.cred-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 36px); display: grid; gap: 22px; }
.cred-license { display: flex; gap: 14px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cred-license svg { width: 44px; height: 44px; color: var(--green-500); flex: none; }
.cred-license small { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cred-license b { font-family: var(--head); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--green-800); line-height: 1.1; }
.cred-card .badges img { height: 72px; }
.cred-card .partner-logos { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }

/* hero estimate card: collapsed to a button on phones until opened */
.card-open { display: none; }
@media (max-width: 960px) {
  .estimate-card.collapsible:not(.open) .lead-embed, .estimate-card.collapsible:not(.open) .form-assure { display: none; }
  .estimate-card.collapsible:not(.open) .card-open { display: flex; }
  .estimate-card.collapsible:not(.open) > header { margin-bottom: 16px; }
}
/* service page "Our work": sub-headings between the two grids */
.work-sub { font-size: 1.15rem; margin: 6px 0 16px; }
.work-sub ~ .work-sub { margin-top: 40px; }

/* ---- audit fixes (2026-10-08) ---- */
/* Phones: 16px gutters and a slimmer card so the Leads form (its Turnstile check needs
   300px) fits inside the card down to 360px screens. */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .reviews { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .estimate-card { padding: 20px 12px 18px; border-radius: 14px; }
  .estimate-card > header { padding: 0 4px; }
  .form-assure { padding: 0 4px; }
}
/* Phones: the sticky Call / Inspection bar already carries both hero actions. */
/* "Our work": phones show the first few items; the button reveals the rest. */
.more-wrap { display: none; text-align: center; margin: 22px 0 0; }
@media (max-width: 760px) {
  .js [data-more]:not(.expanded) .more-item { display: none; }
  .js [data-more]:not(.expanded) .more-wrap { display: block; }
}
/* "Signs" cards: compact two columns on phones instead of one tall stack. */
@media (max-width: 600px) {
  .cards.signs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cards.signs .card { padding: 16px 14px; }
  .cards.signs .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cards.signs .card .ic { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 10px; }
  .cards.signs .card .ic svg { width: 20px; height: 20px; }
  .cards.signs .card h3 { font-size: 1rem; margin-bottom: 6px; }
  .cards.signs .card p { font-size: .86rem; line-height: 1.45; }
}
@media (max-width: 760px) {
  .hero .hero-copy > .btn-row { display: none; }
  /* Shorter phone hero so the estimate card starts on the first screen. */
  .hero .hero-points, .hero .lead-more { display: none; }
  .hero .image-note { bottom: auto; top: 10px; }
}
/* Short desktop viewports (laptop browsers are ~650-900px tall): less hero
   padding and no card intro line, and below 720px no offer pill either (the
   form's "Firm, written quote" line still shows), so the form's submit button
   sits above the fold. The form's own spacing tightens too (site.js EMBED_CSS). */
@media (min-width: 961px) and (max-height: 920px) {
  .hero { padding-top: 32px; }
  .hero .estimate-card > header p { display: none; }
}
@media (min-width: 961px) and (max-height: 720px) {
  .hero .estimate-card .offer-pill { display: none; }
}
/* 320px phones: the lander header shows the phone icon without the number
   (the sticky bar's Call Now carries it), so the header fits. */
@media (max-width: 359px) {
  .lander-header .header-phone > span:last-child { display: none; }
}
/* Desktop hero card: tighter header so more of the form sits above the fold. */
@media (min-width: 961px) {
  .hero .estimate-card { padding: 22px 26px 20px; }
  .hero .estimate-card > header { margin-bottom: 8px; }
  .hero .estimate-card .offer-pill { margin-bottom: 8px; }
  .hero .estimate-card > header p { font-size: .9rem; }
}
/* Very short desktop viewports (Windows laptops with a 768px screen, ~650px of
   browser): a little more off the hero and card so the submit button still
   makes the fold. Comes after the desktop card rule above so it wins. */
@media (min-width: 961px) and (max-height: 700px) {
  .hero { padding-top: 16px; }
  .hero .estimate-card { padding-top: 16px; }
  .hero .estimate-card > header { margin-bottom: 4px; }
  .hero .estimate-card .card-title { font-size: 1.25rem; }
}
.header-phone .ic, .mobile-call { background: var(--cta); }

/* BBB / HomeAdvisor text badges (footer, About credentials card) */
.cred-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 9px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .82rem; line-height: 1.25; }
.cred-badge svg { width: 26px; height: 26px; flex: none; color: var(--green-800); }
.cred-badge b { display: block; font-family: var(--head); font-size: 1rem; color: var(--ink); }
.site-footer .cred-badge { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #b9bfb8; }
.site-footer .cred-badge b { color: #fff; }
.site-footer .cred-badge svg { color: #7fe07f; }
.foot-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cred-card .badges { gap: 12px; }

/* trust strip: six items on one row at desktop widths */
@media (min-width: 1100px) {
  .trust-strip .wrap { flex-wrap: nowrap; gap: 14px 22px; }
  .trust-item { font-size: .84rem; gap: 10px; }
  .trust-item b { font-size: .98rem; }
  .trust-item .ti-ic { width: 40px; height: 40px; }
}

/* gallery: load more + filter counts */
.gallery-grid > figure.is-more { display: none; }
.gallery-more { text-align: center; margin-top: 28px; }
.gallery-more[hidden] { display: none; }
.gallery-more .fine { margin: 10px 0 0; }
.gallery-filters .count { display: inline-block; margin-left: 7px; padding: 1px 7px 0; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .78rem; }
.gallery-filters button[aria-pressed="true"] .count { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------------------------------------------------------------- atticrewwa.com additions */
/* service area cards (home) */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.area-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.soft .area-card { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 4, 34, .05); }
.area-card h3 { font-size: 1.12rem; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.area-card h3 svg { width: 20px; height: 20px; color: var(--green-500); flex: none; }
.area-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.area-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.area-links a { font-family: var(--head); font-weight: 700; font-size: .92rem; text-decoration: none; }

/* city chips (service pages, city pages) */
.city-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.city-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--head); font-weight: 700; font-size: .95rem; color: var(--green-800); text-decoration: none; transition: border-color .15s, background .15s; }
.city-chip svg { width: 17px; height: 17px; color: var(--green-500); flex: none; }
.city-chip:hover { border-color: var(--green-500); background: var(--green-50); }

/* "your local crew" card on city pages */
.local-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); border-left: 6px solid var(--green-500); }
.local-card h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 8px; }
.local-card p { margin: 0 0 6px; }
.local-cta { display: grid; gap: 10px; justify-items: center; }
.local-cta .phone { display: inline-flex; gap: 8px; align-items: center; font-family: var(--head); font-weight: 700; text-decoration: none; }
.local-cta .phone svg { width: 18px; height: 18px; }

/* service areas page */
.region + .region { margin-top: clamp(40px, 5vw, 60px); }
.region > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 4px; }
.region > p { margin: 0 0 18px; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.city-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; scroll-margin-top: calc(var(--header-h) + 20px); }
.city-card h3 { display: flex; gap: 8px; align-items: center; font-size: 1.2rem; margin-bottom: 4px; }
.city-card h3 svg { width: 20px; height: 20px; color: var(--green-500); }
.city-card ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.city-card li a { font-family: var(--head); font-weight: 700; text-decoration: none; }
.city-card li a::after { content: " \2192"; }

/* CNGC rebates */
.rebate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.rebate { background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 20px 18px; text-align: center; }
.rebate b { display: block; font-family: var(--head); font-size: 2rem; color: var(--green-800); line-height: 1.1; }
.rebate small { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 6px; }
.rebate span { font-weight: 700; color: var(--ink); font-size: .95rem; }
.cngc-logo { width: 225px; height: auto; margin-bottom: 18px; }
.rebate-band { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--green-800); color: #fff; border-radius: var(--radius); padding: 22px 26px; text-decoration: none; transition: background .2s; }
.rebate-band:hover { background: var(--green-900); color: #fff; }
.rebate-band .ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.rebate-band .ic svg { width: 26px; height: 26px; color: #7fe07f; }
.rebate-band b { display: block; font-family: var(--head); font-size: 1.15rem; margin-bottom: 2px; }
.rebate-band span { color: #d5e8cf; }
.rebate-band .more { display: inline-flex; gap: 6px; align-items: center; font-family: var(--head); font-weight: 700; color: #fff; white-space: nowrap; }
.rebate-band .more svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .rebate-band { grid-template-columns: 1fr; } .rebate-band .ic { display: none; } }

/* quote (moisture barriers) */
.quote { margin: 0 0 18px; padding: 16px 20px; border-left: 4px solid var(--green-500); background: var(--green-50); border-radius: 0 10px 10px 0; font-size: 1.06rem; color: #2d333d; }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: .88rem; color: var(--green-800); }

/* blog cards */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.post-card[hidden] { display: none; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.post-card .pc-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-50); }
.post-card .pc-media img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.post-topic { font-family: var(--head); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); margin-bottom: 6px; }
.post-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.post-body p { color: var(--muted); font-size: .93rem; margin: 0 0 14px; flex: 1; }
.post-body .more { display: inline-flex; gap: 6px; align-items: center; font-family: var(--head); font-weight: 700; color: var(--green-800); }
.post-body .more svg { width: 16px; height: 16px; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* blog post */
.post-head { background: var(--ink); color: #fff; padding: clamp(36px, 5vw, 64px) 0 clamp(30px, 4vw, 48px); }
.post-head h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 12px; }
.post-head .eyebrow { color: #7fe07f; }
.post-meta { color: #aab4c6; margin: 0; font-size: .95rem; }
.post-wrap { padding-top: clamp(32px, 4vw, 52px); }
.post-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 320px); gap: clamp(28px, 4vw, 56px); justify-content: center; align-items: start; }
.post-content { font-size: 1.06rem; color: #2d333d; }
.post-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 1.7em; }
.post-content h3 { font-size: 1.25rem; margin-top: 1.5em; }
.post-content h4 { font-size: 1.08rem; margin-top: 1.3em; }
.post-content figure { margin: 26px 0; }
.post-content figure img { width: 100%; height: auto; border-radius: 12px; }
.post-content figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.post-content .post-hero { margin-top: 0; }
.post-content li { margin-bottom: 6px; }
.post-content blockquote { margin: 22px 0; padding: 14px 20px; border-left: 4px solid var(--green-500); background: var(--green-50); border-radius: 0 10px 10px 0; }
.post-content a { font-weight: 600; }
.post-aside .sticky { position: sticky; top: calc(var(--header-h) + 20px); }
.post-aside h3 { font-size: 1.3rem; }
.post-aside .btn + .btn { margin-top: 10px; }
.btn-ghost-dark { background: transparent; color: var(--green-800); border-color: var(--green-800); }
.btn-ghost-dark:hover { background: var(--green-800); color: #fff; box-shadow: none; }
@media (max-width: 960px) { .post-layout { grid-template-columns: minmax(0, 1fr); } .post-aside .sticky { position: static; } }

/* Six top-level links on atticrewwa.com (Service Areas and Blog added). The header gets a wider
   wrap than the page so the phone number always shows on desktop: below 1440px the "Call now"
   label goes and the button reads "Free Inspection"; below 1280px the button goes (the phone
   number stays, and every page has its own inspection buttons). */
.nav > a, .nav-item > button { white-space: nowrap; }
.site-header .wrap { max-width: 1400px; }
.header-phone { white-space: nowrap; }
@media (min-width: 1021px) and (max-width: 1599px) {
  .nav { gap: 0; }
  .nav > a, .nav-item > button { padding: 12px 10px 9px; }
  .site-header .wrap { gap: 20px; }
}
@media (min-width: 1021px) and (max-width: 1439px) {
  .header-phone small { display: none; }
  .header-phone .ic { width: 36px; height: 36px; }
  .header-cta .btn .cta-long { display: none; }
  .header-cta .btn { padding: 12px 16px 9px; }
  .logo img { height: 40px; }
}
@media (min-width: 1021px) and (max-width: 1279px) {
  .header-cta .btn { display: none; }
  .nav > a, .nav-item > button { padding: 12px 8px 9px; font-size: .93rem; }
  .site-header .wrap { gap: 14px; }
}

/* Service area map (service areas page) and photos on the duct cleaning steps */
.area-map { margin: 0 auto; max-width: 1100px; }
.area-map img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.area-map figcaption { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 10px; }
.step-ph { margin: -6px -6px 16px; border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: 3 / 2; }
.step-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.step-ph:hover img { transform: scale(1.03); }
/* Long photo captions on cards: three lines, full text in the lightbox */
.project-card .pc-title, .gallery-grid .pc-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Two white sections in a row: one gap between them, not two. */
section:not(.soft):not(.cta-band):not(.hero):not(.post-head) + section:not(.soft):not(.cta-band):not(.hero):not(.on-dark) { padding-top: 0; }