/* ============================================================
   All Year Heating & Air — homepage styles
   Mobile-first, brand-aligned, SEO-optimized layout
   ============================================================ */

/* ============================================================
   Policy pages (Termageddon embeds)
   Privacy Policy, Terms of Service, Disclaimer, Cookie Policy
   ============================================================ */
.policy-page { padding: 3rem 0; }
.policy-page .policy-content { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.policy-embed-wrapper {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  overflow-x: auto;
}
.policy_embed_div {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 480px;
}
.policy_embed_div a { word-break: break-word; }
@media (max-width: 640px) {
  .policy-page { padding: 1.5rem 0; }
  .policy-embed-wrapper { padding: 1rem; }
}


:root {
  --blue: #0D70FF;
  --cyan: #2EC7F9;
  --orange: #FF6701;
  --yellow: #FFD701;
  --navy: #141819;
  --white: #FFFFFF;
  --gray: #D8D8D8;
  --gray-50: #F6F8FB;
  --gray-100: #EEF2F7;
  --gray-700: #4A5560;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 25, .06), 0 2px 6px rgba(20, 24, 25, .05);
  --shadow:    0 4px 14px rgba(20, 24, 25, .08), 0 8px 30px rgba(13, 112, 255, .06);
  --shadow-lg: 0 12px 40px rgba(20, 24, 25, .12);

  --font-head: "Barlow Condensed", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --max: 1200px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding: 0; margin: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-transform: none;
}
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.6rem); }
h2 { font-size: clamp(1.6rem, 2.6vw + 1rem, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.4vw + .8rem, 1.6rem); }
h4 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1em; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: .95rem;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.btn-lg { padding: 15px 26px; font-size: 1.05rem; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-call    { background: var(--orange); color: var(--white); }
.btn-call:hover { background: #e85a00; }
.btn-request { background: var(--blue); color: var(--white); }
.btn-request:hover { background: #0a5dd6; }
.btn-yellow  { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { background: #e8c500; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-white   { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--gray-100); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  backdrop-filter: saturate(180%) blur(8px);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
  margin-right: auto;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-head); }
.logo-text strong { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.logo-text em { font-style: normal; color: var(--orange); font-weight: 700; font-size: .85rem; }

.logo-img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.logo-img-footer {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 8px;
}

.primary-nav { display: none; }
.primary-nav .nav-list { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; align-items: center; flex-wrap: nowrap; }
.primary-nav .nav-item { position: relative; }
.primary-nav .nav-item > a,
.primary-nav .nav-toggle { color: var(--navy); font-weight: 500; font-size: .95rem; padding: 8px 0; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; white-space: nowrap; }
.primary-nav .nav-item > a:hover,
.primary-nav .nav-toggle:hover,
.primary-nav .nav-item > a:focus-visible,
.primary-nav .nav-toggle:focus-visible { color: var(--blue); text-decoration: none; outline: 2px solid transparent; outline-offset: 2px; }
.primary-nav .nav-item.is-active > a,
.primary-nav .nav-item.is-active > .nav-toggle { color: var(--blue); font-weight: 600; }
.primary-nav .caret { font-size: .75em; opacity: .7; transition: transform .15s ease; }
.primary-nav .nav-item.has-dropdown:hover .caret,
.primary-nav .nav-item.has-dropdown.is-open .caret { transform: rotate(180deg); }

/* Desktop dropdowns */
.primary-nav .dropdown-menu,
.primary-nav .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  padding: 14px 0;
  min-width: 250px;
  list-style: none;
  margin: 6px 0 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.primary-nav .has-dropdown:hover .dropdown-menu,
.primary-nav .has-dropdown:hover .mega-menu,
.primary-nav .has-dropdown:focus-within .dropdown-menu,
.primary-nav .has-dropdown:focus-within .mega-menu,
.primary-nav .has-dropdown.is-open .dropdown-menu,
.primary-nav .has-dropdown.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
.primary-nav .dropdown-menu li { list-style: none; }
.primary-nav .dropdown-menu a {
  display: block;
  padding: 8px 18px;
  color: var(--navy);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
}
.primary-nav .dropdown-menu a:hover,
.primary-nav .dropdown-menu a:focus-visible { background: var(--gray-50, #F4F7FB); color: var(--blue); }

/* Mega menu (Service Areas) */
.primary-nav .has-mega .mega-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 20px;
  padding: 18px 22px;
  min-width: 640px;
  left: auto;
  right: auto;
}
.primary-nav .has-mega .mega-menu.align-right { right: 0; left: auto; }
.primary-nav .mega-col h4 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-700, #5A6987);
  margin: 0 0 6px;
  font-weight: 700;
}
.primary-nav .mega-col ul { list-style: none; padding: 0; margin: 0; }
.primary-nav .mega-col a {
  display: block;
  padding: 5px 0;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 500;
}
.primary-nav .mega-col a:hover,
.primary-nav .mega-col a:focus-visible { color: var(--blue); }

/* Mobile accordion sections */
.mobile-menu .mobile-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100, #E5E7EB);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
}
.mobile-menu .mobile-section-toggle:hover { color: var(--blue); }
.mobile-menu .mobile-section-toggle .caret { font-size: .85em; transition: transform .15s ease; }
.mobile-menu .mobile-section-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mobile-menu .mobile-section { padding-left: 12px; border-left: 2px solid var(--gray-100, #E5E7EB); margin: 0 0 4px; }
.mobile-menu .mobile-section[hidden] { display: none; }
.mobile-menu .mobile-section a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px dashed var(--gray-100, #E5E7EB);
  font-weight: 500;
  font-size: .92rem;
}
.mobile-menu .mobile-section a:last-child { border-bottom: 0; }

.header-cta { display: none; gap: 10px; flex-shrink: 0; }
.header-cta .btn { flex-shrink: 0; }

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px; height: 24px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--gray-100);
  background: var(--white);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--navy); padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-weight: 500; }
.mobile-menu .btn { justify-content: center; margin-top: 6px; }

/* Header desktop/mobile split is owned by the defensive block at the end of this file (≥1536 px desktop). */

/* ---------- Eyebrow / section head ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .85rem;
  color: var(--gray-700);
  margin-bottom: 10px;
}
.eyebrow-blue   { color: var(--blue); }
.eyebrow-orange { color: var(--orange); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.section-head p { color: var(--gray-700); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #F4FAFF 0%, #FFFFFF 100%);
  overflow: hidden;
  padding: 56px 0 72px;
}
.hero-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-waves svg {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero h1 .accent { color: var(--blue); }
.lede { font-size: 1.1rem; color: var(--gray-700); max-width: 56ch; }
.trust-bullets { display: grid; gap: 8px; margin: 18px 0 26px; }
.trust-bullets li { display: flex; gap: 10px; align-items: flex-start; }
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.trust-badge:hover { box-shadow: 0 8px 24px rgba(20,24,25,.12); transform: translateY(-1px); }
.trust-badge .stars { color: var(--yellow); font-size: 1.2rem; letter-spacing: 2px; -webkit-text-stroke: 1px #d8a800; }
.trust-badge strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.trust-badge span { color: var(--gray-700); font-size: .85rem; }

.hero-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(13,112,255,.08), rgba(46,199,249,.18));
  border: 2px dashed rgba(13,112,255,.35);
  border-radius: var(--radius-lg);
  color: var(--blue);
  font-weight: 600;
  font-size: .95rem;
  padding: 24px;
  text-align: center;
}

.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(13, 24, 50, .18);
  display: block;
}

@media (min-width: 900px) {
  .hero { padding: 80px 0 96px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* ---------- Emergency strip ---------- */
.emergency {
  background: var(--navy);
  color: var(--white);
  padding: 28px 0;
  position: relative;
}
.emergency-inner {
  display: grid;
  gap: 18px;
  align-items: center;
}
.emergency h2 { color: var(--white); margin-bottom: 6px; font-size: clamp(1.3rem, 1.4vw + 1rem, 1.7rem); }
.emergency p  { color: #cdd2d6; margin: 0; }
@media (min-width: 800px) {
  .emergency-inner { grid-template-columns: 1fr auto; gap: 24px; }
}

/* ---------- Services ---------- */
.services { padding: 72px 0; }
.services-group-title {
  font-family: var(--font-head);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 36px 0 18px;
  color: var(--navy);
  position: relative;
  padding-left: 14px;
}
.services-group-title::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
}
.card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(13,112,255,.25);
}
.service-card h4 { margin-bottom: 6px; font-family: var(--font-head); font-size: 1.25rem; }
.service-card p  { color: var(--gray-700); font-size: .95rem; margin-bottom: 14px; }

.card-photo {
  display: block;
  width: calc(100% + 44px);
  margin: -22px -22px 16px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--gray-100);
}

.location-banner {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

.team-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(13, 24, 50, .18);
  display: block;
  margin: 24px 0 8px;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.icon svg { width: 24px; height: 24px; }
.icon-blue   { background: rgba(13,112,255,.10); color: var(--blue); }
.icon-cyan   { background: rgba(46,199,249,.18); color: #0aa6d6; }
.icon-orange { background: rgba(255,103,1,.12); color: var(--orange); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--blue);
  font-size: .95rem;
}
.card-link:hover { color: #0a5dd6; text-decoration: none; }

/* ---------- Why ---------- */
.why {
  background: var(--gray-50);
  padding: 72px 0;
}
.why-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}
.why-card h4 { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 6px; }
.why-card p  { color: var(--gray-700); margin: 0; }

/* ---------- Areas ---------- */
.areas { padding: 72px 0; }
.city-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }
.city-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 14px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--gray-100);
  color: var(--navy);
  font-weight: 600;
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .02em;
  transition: all .15s ease;
}
.city-grid a:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  text-decoration: none;
  transform: translateY(-2px);
}

/* ---------- Process ---------- */
.process {
  background: linear-gradient(180deg, #fff 0%, #F4FAFF 100%);
  padding: 72px 0;
}
.steps {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  background: var(--white);
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.steps h4 { font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 6px; }
.steps p  { color: var(--gray-700); margin: 0; }

/* ---------- Reviews ---------- */
.reviews { padding: 72px 0; }
.review-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.review-card .stars { color: var(--yellow); letter-spacing: 2px; -webkit-text-stroke: 1px #d8a800; margin-bottom: 8px; }
.review-card p { color: var(--navy); font-style: italic; }
.review-card footer { display: flex; flex-direction: column; gap: 2px; color: var(--gray-700); font-size: .9rem; }
.review-card footer strong { color: var(--blue); font-style: normal; }

/* ---------- Maintenance ---------- */
.maintenance {
  background: var(--gray-50);
  padding: 72px 0;
}
.maintenance-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .maintenance-inner { grid-template-columns: 1.05fr .95fr; } }
.maintenance-image {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(255,103,1,.12), rgba(255,215,1,.22));
  border: 2px dashed rgba(255,103,1,.4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-weight: 600;
  text-align: center;
  padding: 24px;
}

.maintenance-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(13, 24, 50, .18);
  display: block;
}

/* ---------- FAQ ---------- */
.faq { padding: 72px 0; }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-list details {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 0 18px;
  transition: box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
.faq-list details[open] { box-shadow: var(--shadow); border-color: rgba(13,112,255,.25); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--blue);
  font-weight: 800;
  transition: transform .2s ease;
  line-height: 1;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { padding: 0 0 18px; color: var(--gray-700); margin: 0; }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  background: linear-gradient(135deg, var(--blue) 0%, #0a5dd6 60%, var(--navy) 100%);
  color: #fff;
  text-align: center;
  padding: 80px 0 88px;
  overflow: hidden;
}
.cta-waves { position: absolute; inset: 0; pointer-events: none; }
.cta-waves svg { position: absolute; inset: auto 0 0 0; width: 100%; height: auto; }
.final-cta-inner { position: relative; }
.final-cta h2 { color: #fff; }
.final-cta p { color: #d6e6ff; max-width: 60ch; margin: 0 auto 24px; }
.final-cta .hero-ctas { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #cdd2d6; padding: 56px 0 0; }
.footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer h5 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 14px;
}
.site-footer ul { display: grid; gap: 8px; }
.site-footer a { color: #cdd2d6; }
.site-footer a:hover { color: var(--cyan); text-decoration: none; }
.logo-footer .logo-text strong { color: #fff; }
.footer-phone { font-weight: 700; font-size: 1.1rem; color: var(--yellow) !important; }

.footer-bottom {
  margin-top: 36px;
  padding: 18px 0;
  border-top: 1px solid #2a2f31;
  font-size: .85rem;
  color: #8c969e;
}

/* ---------- Mobile sticky bottom bar ---------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  padding: 8px;
  z-index: 60;
  box-shadow: 0 -8px 24px rgba(20,24,25,.08);
}
.mobile-bar .btn {
  border-radius: 12px;
  padding: 14px 8px;
  justify-content: center;
  font-size: .95rem;
  margin: 0 4px;
}
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* Add bottom padding so mobile sticky bar doesn't cover footer content */
@media (max-width: 899px) {
  body { padding-bottom: 76px; }
}

/* ---------- Inner-page hero (services, areas, about, contact, city pages) ---------- */
.page-hero {
  position: relative;
  background: linear-gradient(180deg, #F4FAFF 0%, #FFFFFF 100%);
  padding: 56px 0 48px;
  text-align: center;
}
.page-hero h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.page-hero .lede { margin-left: auto; margin-right: auto; }
.page-hero .hero-ctas { justify-content: center; margin-top: 22px; }
@media (min-width: 900px) { .page-hero { padding: 80px 0 64px; } }

/* Active nav state — color + weight only; no pseudo-element that shifts layout. */
.primary-nav a[aria-current="page"] {
  color: var(--blue);
  font-weight: 700;
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 48px; }
}

.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.contact-form-wrap h2 { margin-bottom: 4px; }
.contact-form-wrap > p { color: var(--gray-700); margin-bottom: 22px; }

#service-request {
  display: grid;
  gap: 16px;
  position: relative;
}
.form-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }

#service-request label {
  display: grid;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
}
#service-request input,
#service-request select,
#service-request textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-100);
  background: var(--white);
  color: var(--navy);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  font-weight: 400;
}
#service-request input:focus,
#service-request select:focus,
#service-request textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13,112,255,.15);
}
#service-request textarea { resize: vertical; min-height: 110px; font-family: inherit; }
#service-request input:invalid:not(:placeholder-shown),
#service-request select:invalid:not([value=""]) { /* gentle invalid hint */ }
.req { color: var(--orange); }

#service-request button[type="submit"] {
  justify-self: start;
  margin-top: 6px;
  border: 0;
}

.form-status {
  font-size: .95rem;
  padding: 10px 0;
  min-height: 1.4em;
}
.form-status.success { color: #0a8a3a; font-weight: 600; }
.form-status.error   { color: #c62828; font-weight: 600; }
.form-status.sending { color: var(--gray-700); }

/* Form: fieldset + radio group + help text (used on contact.html for preferred contact method etc.) */
#service-request fieldset.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: block;
}
#service-request fieldset.form-fieldset legend {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  padding: 0;
}
#service-request .form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
#service-request .form-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: .95rem;
  color: var(--gray-700);
  cursor: pointer;
}
#service-request .form-radio input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  accent-color: var(--blue);
}
#service-request .form-radio input[type="radio"]:focus {
  box-shadow: none;
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
#service-request .form-help {
  font-size: .85rem;
  color: var(--gray-700);
  font-weight: 400;
  display: block;
  margin-top: 4px;
}
#service-request input[type="file"] {
  font-weight: 400;
  background: var(--gray-50);
  cursor: pointer;
}
.info-help {
  font-size: .88rem;
  color: var(--gray-700);
  margin-top: 4px;
}

.contact-info h3 { font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 8px; }
.contact-info > p { color: var(--gray-700); }
.info-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-100); }
.info-block h4 { font-family: var(--font-head); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--blue); }
.info-block p { margin: 0 0 .4em; color: var(--gray-700); }
.info-block a { color: var(--blue); }

/* ---------- Property Managers / Landlords (teaser) ---------- */
.pm-service {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FB 100%);
  padding: 72px 0;
}
.pm-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .pm-inner { grid-template-columns: 1.05fr .95fr; } }
.pm-copy p { color: var(--gray-700); }
.pm-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.pm-cta .btn-white { border-color: var(--gray-100); }
.pm-closing {
  margin: 18px 0 0;
  font-size: .95rem;
  color: var(--gray-700);
}
.pm-visual {
  display: grid;
  gap: 14px;
  background: var(--white);
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow);
}
.pm-mini {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
.pm-mini .icon { margin-bottom: 0; }
.pm-mini h4 { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 4px; }
.pm-mini p  { color: var(--gray-700); margin: 0; font-size: .95rem; }

/* ---------- HVAC hub page ---------- */
.hub-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4FAFF 100%);
  padding: 56px 0 64px;
}
.hub-hero-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hub-hero-inner { grid-template-columns: 1.05fr .95fr; } .hub-hero { padding: 80px 0 88px; } }
.hub-hero h1 { margin-top: 8px; }
.hub-hero .lede { font-size: 1.1rem; color: var(--gray-700); }
.hub-hero-meta { color: var(--gray-700); font-size: .92rem; margin-top: 14px; }
.hub-hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(13, 24, 50, .18);
  display: block;
}

/* Service-card icon variant — used when no honest photo exists for a service */
.card-photo-icon {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(13,112,255,.10), rgba(46,199,249,.18));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.card-photo-icon svg { width: 56px; height: 56px; }

/* Problems grid (2-col on desktop) */
.problems-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 0;
}
@media (min-width: 700px) { .problems-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.problems-grid li { display: flex; gap: 10px; align-items: flex-start; }

/* Mini service blocks (2x2 on desktop) */
.mini-services {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .mini-services { grid-template-columns: 1fr 1fr; } }
.mini-service {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.mini-service h3 { font-family: var(--font-head); font-size: 1.4rem; margin: 0 0 8px; }
.mini-service p  { color: var(--gray-700); margin: 0 0 10px; }
.mini-service p:last-child { margin-bottom: 0; }

/* Additional services strip (text links under main card grid) */
.add-services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  margin-top: 22px;
  font-size: .98rem;
  color: var(--gray-700);
}
.add-services a { font-weight: 600; }

/* Cross-link banner (property manager teaser, appliance cross-link) */
.cross-banner {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .cross-banner { grid-template-columns: 1fr auto; } }
.cross-banner h3 { font-family: var(--font-head); font-size: 1.5rem; margin: 6px 0 6px; }
.cross-banner p  { color: var(--gray-700); margin: 0; }

/* Section spacing/background utilities used on the hub */
.section-pad     { padding: 64px 0; }
.section-pad-sm  { padding: 40px 0; }
.section-bg-soft { background: var(--gray-50); }

/* Breadcrumbs */
.breadcrumbs { padding: 14px 0 0; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 8px; color: var(--gray-700); }
.breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--gray); }
.breadcrumbs a { color: var(--gray-700); }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* 4-step process variant (used on /property-management-hvac-appliance-services/) */
.steps.steps-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .steps.steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps.steps-4 { grid-template-columns: repeat(4, 1fr); } }

/* Scenario cards (used on /property-management-hvac-appliance-services/) */
.scenarios-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .scenarios-grid { grid-template-columns: 1fr 1fr; } }
.scenario-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  box-shadow: var(--shadow-sm);
}
.scenario-card .check { margin-top: 2px; }
.scenario-card h4 { font-family: var(--font-head); font-size: 1.08rem; margin: 0 0 4px; }
.scenario-card p  { color: var(--gray-700); margin: 0; font-size: .95rem; }

/* Property manager / vendor inquiry form (used on /property-management-hvac-appliance-services/) */
/* ---------- B2B property-management form (.pm-form) ----------
   Two-column outer grid on desktop, single column on mobile.
   Each .form-field is one grid cell containing its own label + control,
   so label/control pairs never separate and small inputs never inherit
   the height of a sibling textarea.
*/
.pm-form {
  display: grid;
  gap: 18px 24px;
  grid-template-columns: 1fr;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  max-width: 920px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 768px) {
  .pm-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 32px;
  }
}

/* Each field: stacked label + control, label-above-input. */
.pm-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.pm-form .form-field-full { grid-column: 1 / -1; }

.pm-form label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
  line-height: 1.35;
  margin: 0;
}
.pm-form .req { color: var(--orange); margin-left: 2px; }

.pm-form input[type="text"],
.pm-form input[type="tel"],
.pm-form input[type="email"],
.pm-form select {
  width: 100%;
  min-height: 52px;
  height: auto;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.pm-form textarea {
  width: 100%;
  min-height: 140px;
  height: auto;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  resize: vertical;
  box-sizing: border-box;
}
.pm-form input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  box-sizing: border-box;
}
.pm-form input:focus,
.pm-form select:focus,
.pm-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13,112,255,.15);
}

.pm-form .form-help {
  font-size: .88rem;
  color: var(--gray-700);
  margin: 0;
  line-height: 1.4;
}

.pm-form .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  line-height: 1.4;
}
.pm-form .form-checkbox input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--blue);
  flex-shrink: 0;
}

.pm-form .pm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Responsive map embed (used on contact.html, /service-areas/, and city pages for lazy-loaded Google Maps area iframes) */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--gray-50);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-caption {
  font-size: .9rem;
  color: var(--gray-700);
  margin-top: 10px;
  text-align: center;
}

/* Real-team image gallery (used on about.html for the "Real team, real service" section) */
.real-team-gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .real-team-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .real-team-gallery { grid-template-columns: repeat(3, 1fr); } }
.real-team-gallery figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.real-team-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: block;
}
.real-team-gallery figcaption {
  font-size: .9rem;
  color: var(--gray-700);
  font-style: italic;
}

/* Sub-headings inside the service-area finder (used on /service-areas/ between SCV and SFV grids) */
.finder-subhead {
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin: 32px 0 14px;
  color: var(--navy);
}
.finder-subhead:first-of-type { margin-top: 8px; }

/* Priority feature section (used on /appliance-repair/ for refrigerator · washer · dryer) */
.priority-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .priority-grid { grid-template-columns: repeat(3, 1fr); } }
.priority-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.priority-icon {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(13,112,255,.10), rgba(46,199,249,.18));
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.priority-icon svg { width: 64px; height: 64px; }
.priority-card h3 { font-family: var(--font-head); font-size: 1.5rem; margin: 0 0 10px; }
.priority-card p  { color: var(--gray-700); margin: 0 0 18px; flex-grow: 1; }
.priority-card .btn { align-self: center; }

/* Review placeholder block — clearly marked, never publish as-is */
.review-placeholder {
  border: 2px dashed var(--gray-100);
  background: rgba(13,112,255,.04);
  padding: 18px 20px;
  border-radius: var(--radius);
  color: var(--gray-700);
  font-style: italic;
  line-height: 1.5;
}
.review-placeholder strong { color: var(--blue); font-style: normal; letter-spacing: .04em; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   DEFENSIVE HEADER LAYOUT — final word on desktop/mobile header split.
   Desktop nav (Home, HVAC Services, Appliance Repair, Service Areas,
   Property & Insurance, Reviews, About, Contact) + 2 CTAs only renders
   at innerWidth ≥1500 px. (A 1536-pixel monitor in Chrome reports
   innerWidth ≈1520 once chrome/scrollbar is subtracted, so the
   threshold is set to 1500 to ensure 1536-class screens activate
   desktop nav. Below 1500 the hamburger replaces the full nav so the
   nav text can never collide with the orange Call Now CTA.)
   This block is placed last so it overrides any earlier rule.
   ===================================================================== */
@media (max-width: 1499.98px) {
  .primary-nav,
  .header-cta {
    display: none !important;
  }
  .hamburger {
    display: inline-flex !important;
  }
}

@media (min-width: 1500px) {
  /* Header-inner widens past the site .container max-width so the 8-item nav
     plus 2 CTAs fit without the nav-list overflowing into the orange CTA. */
  .site-header .container.header-inner {
    max-width: 1480px;
  }
  .header-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(12px, 1vw, 20px);
    min-width: 0;
  }

  .header-inner .logo,
  .logo {
    flex: 0 0 auto;
  }

  .primary-nav {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .primary-nav .nav-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(10px, 0.8vw, 16px);
    min-width: 0;
  }

  .primary-nav .nav-item > a,
  .primary-nav .nav-toggle {
    white-space: nowrap;
    font-size: clamp(13px, 0.9vw, 16px);
  }

  .header-cta {
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
  }

  .header-cta .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: clamp(16px, 1.1vw, 24px);
    padding-right: clamp(16px, 1.1vw, 24px);
  }

  .hamburger,
  .mobile-menu {
    display: none !important;
  }
}

/* =====================================================================
   Insurance Agency Repair Partner page — scoped helpers.
   These only support /insurance-agency-hvac-appliance-repair/ and reuse
   the existing design system (.process, .why, .areas, .faq, .final-cta,
   .service-card, .city-grid, .faq-list). Nothing else is touched.
   ===================================================================== */
.services-section { padding: 72px 0; }
.agency-services-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .agency-services-grid { grid-template-columns: repeat(2, 1fr); }
}
.agency-services-grid .service-card { display: flex; flex-direction: column; }
.agency-services-grid .service-card h4 { font-size: 1.3rem; margin-bottom: 12px; }
.service-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 8px;
}
.service-card-list li { padding-left: 0; }
.service-card-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 500;
  font-size: .98rem;
}
.service-card-list a::before {
  content: "→";
  color: var(--blue);
  font-weight: 700;
}
.service-card-list a:hover { color: var(--blue); text-decoration: none; }
.agency-services-grid .service-card .card-link { margin-top: auto; }

/* =====================================================================
   Microwave installation page helpers
   (/appliance-repair/microwave-installation/)
   - .image-placeholder: visible labeled box for not-yet-shot photo slots
   - .content-card:      neutral white card behind checklists
   - .scope-note:        soft attention block for installation scope caveats
   These are general-purpose but only used by this page today.
   ===================================================================== */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: linear-gradient(135deg, #F4F7FB 0%, #ffffff 100%);
  border: 1px solid var(--gray-100, #E5E7EB);
  border-radius: var(--radius-lg);
  color: #5A6987;
  font-weight: 600;
  padding: 24px;
  min-height: 280px;
  line-height: 1.45;
}
.image-placeholder-wide {
  aspect-ratio: 16 / 7;
  min-height: 0;
  max-width: 100%;
}
.hub-hero-photo.image-placeholder {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

/* =====================================================================
   Polished "asset coming soon" placeholder cards.
   These replace the raw [PLACEHOLDER IMAGE: ...] visible-text boxes
   that previously shipped on city pages while the owner gathers real
   photos. Owner instructions stay in nearby HTML comments + the
   data-image-needed / data-suggested-alt / data-suggested-filename
   attributes on each card.
   ===================================================================== */
.asset-placeholder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 280px;
  padding: 32px 24px;
  background: linear-gradient(135deg, var(--gray-50, #F4F7FB) 0%, #ffffff 100%);
  border: 1px solid var(--gray-100, #E5E7EB);
  border-radius: var(--radius);
  color: var(--gray-700, #5A6987);
  position: relative;
  overflow: hidden;
}
.asset-placeholder-card .asset-placeholder-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  color: var(--blue, #0D70FF);
  opacity: .55;
}
.asset-placeholder-card .asset-placeholder-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.asset-placeholder-card .asset-placeholder-kicker {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--blue, #0D70FF);
  margin-bottom: 4px;
}
.asset-placeholder-card .asset-placeholder-headline {
  font-family: var(--font-head, inherit);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy, #0E1F3D);
  line-height: 1.35;
}
.asset-placeholder-card-sm {
  min-height: 160px;
  padding: 20px 16px;
}
.asset-placeholder-card-sm .asset-placeholder-icon {
  width: 32px; height: 32px; margin-bottom: 8px;
}
.asset-placeholder-card-sm .asset-placeholder-headline { font-size: .92rem; }
.asset-placeholder-card-wide {
  min-height: 220px;
  aspect-ratio: 16 / 7;
}
/* On-dark variant for placeholders that sit inside dark CTA bands. */
.asset-placeholder-card.on-dark {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.92);
}
.asset-placeholder-card.on-dark .asset-placeholder-icon { color: #fff; opacity: .7; }
.asset-placeholder-card.on-dark .asset-placeholder-kicker { color: #fff; opacity: .8; }

/* =====================================================================
   Shared figure / image-with-caption pattern for service-specific photos
   (service-area graphic, water heater repair, freezer repair, microwave
   installation). Keeps captions tied to the image and matches the
   site's existing card aesthetic.
   ===================================================================== */
.service-area-figure,
.service-photo-figure {
  margin: 0;
  padding: 0;
}
.service-area-figure img,
.service-photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 32px rgba(13, 24, 50, 0.14);
  border: 1px solid var(--gray-100, #E5E7EB);
}
.service-area-figure figcaption,
.service-photo-figure figcaption {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--gray-700, #5A6987);
  line-height: 1.45;
  text-align: center;
}
.service-photo-figure.service-photo-figure-hero img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  min-height: 0;
}
.asset-placeholder-card.on-dark .asset-placeholder-headline { color: #fff; }

.content-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  margin-top: 8px;
}
.content-card h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  margin: 0 0 12px;
  color: var(--navy);
}
.content-card .problems-grid { margin-top: 4px; }

.scope-note {
  background: #FFF5E6;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 18px;
  color: var(--navy);
}
.scope-note p { margin: 0; }