/* ==========================================================================
   WJC Heating & Air — styles.css
   Brand: navy #14213D · cold blue #3FA9E5 · flame orange #F26522
   ========================================================================== */

:root {
  /* Brand */
  --navy: #14213d;
  --navy-700: #1b2b4a;
  --navy-600: #24365b;
  --blue: #3fa9e5;
  --blue-600: #2b8fca;
  --blue-050: #eaf6fd;
  --orange: #f26522;
  --orange-600: #d9520f;
  --orange-050: #fdece3;

  /* Neutrals */
  --ink: #14213d;
  --slate-900: #16233b;
  --slate-700: #3a465c;
  --slate-600: #5a6579;
  --slate-500: #78829a;
  --line: #e6e9f0;
  --line-soft: #eef1f6;
  --bg: #ffffff;
  --bg-tint: #f5f8fc;
  --white: #ffffff;

  /* Effects */
  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 8px rgba(20, 33, 61, .05);
  --shadow: 0 8px 24px rgba(20, 33, 61, .08), 0 2px 6px rgba(20, 33, 61, .05);
  --shadow-lg: 0 24px 60px rgba(20, 33, 61, .16);
  --grad-hot: linear-gradient(100deg, var(--orange), #ff8a4c);
  --grad-cold: linear-gradient(100deg, var(--blue), #7cc9f2);
  --grad-mix: linear-gradient(100deg, var(--blue) 0%, var(--orange) 100%);

  /* Type */
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1180px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The off-canvas mobile nav sits outside the viewport; clip it without
   creating a scroll container (which would break the sticky header). */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--slate-700);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Sections get focus programmatically when jumped to, so they should not
   draw a focus ring the way a real control would. */
[tabindex="-1"]:focus { outline: none; }

/* SVG icon defaults (outline, consistent stroke) */
.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--navy); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 12px 20px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Sheen sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); transition: left .55s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn--outline::before, .btn--ghost::before { background: linear-gradient(100deg, transparent, rgba(20,33,61,.07), transparent); }

.btn--primary { background: var(--orange); box-shadow: 0 8px 20px rgba(242, 101, 34, .28); }
.btn--primary:hover { background: var(--orange-600); box-shadow: 0 12px 26px rgba(242, 101, 34, .34); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); background: #fff; }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn--light { background: #fff; color: var(--navy); box-shadow: var(--shadow); }
.btn--light:hover { background: #fff; }

.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: #cdd6e6;
  font-size: 13.5px;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 16px; }
.topbar__left { display: flex; gap: 22px; align-items: center; min-width: 0; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item .ic { width: 15px; height: 15px; color: var(--blue); }
.topbar__right { display: flex; gap: 20px; align-items: center; }
.topbar__link { display: inline-flex; align-items: center; gap: 7px; color: #cdd6e6; transition: color .2s; }
.topbar__link .ic { width: 15px; height: 15px; }
.topbar__link:hover { color: #fff; }
.topbar__link--strong { color: #fff; font-weight: 600; }
.topbar__link--strong .ic { color: var(--orange); }
/* Wide screens: drop the two wrappers out of the layout so all four items
   space evenly across the bar, instead of clumping into a left and right
   pair with a wide gap stranded in the middle. */
@media (min-width: 861px) {
  .topbar__left, .topbar__right { display: contents; }
  .topbar__inner { justify-content: space-between; gap: 20px; }
}
@media (max-width: 860px) { .topbar__item--hide, .topbar__link:not(.topbar__link--strong) { display: none; } }
@media (max-width: 620px) {
  .topbar__inner { justify-content: center; gap: 14px; }
  .topbar__item, .topbar__link { white-space: nowrap; font-size: 12.5px; }
  .topbar__left { display: none; }
}
/* On phones the navy topbar, white header, and dark hero stacked into three
   competing bands. The sticky call bar already carries the phone number, so
   drop the topbar and let the header sit straight on the hero. */
@media (max-width: 700px) { .topbar { display: none; } }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.header.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.96); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 16px; }
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 52px; width: auto; transition: height .2s ease; }

/* The links sit in their own group so the row reads as three parts:
   logo left, words spread evenly through the middle, phone and CTA right. */
.nav__links { display: flex; align-items: center; }

@media (min-width: 901px) {
  .header__inner { min-height: 94px; }
  .brand__logo { height: 70px; }
  /* Nav takes the leftover width so the links can spread into it,
     instead of bunching against the right edge and stranding the logo. */
  .nav { flex: 1; justify-content: flex-end; gap: 0; margin-left: 28px; }
  .nav__links { flex: 1; justify-content: space-evenly; gap: 0; }
  .nav__link { font-size: 15.5px; padding: 10px 6px; }
  .nav__call { margin-left: 28px; }
  .nav__cta { margin-left: 10px; }
  .nav__call, .nav__cta { font-size: 15.5px; padding: 13px 22px; }
}
@media (max-width: 900px) {
  .nav__links { flex-direction: column; align-items: stretch; width: 100%; }
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav__link {
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--slate-700);
  padding: 9px 12px; border-radius: 8px; transition: color .2s, background-color .2s;
}
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--grad-mix); border-radius: 2px; transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__link:hover { color: var(--navy); background: var(--bg-tint); }
.nav__link.is-current { color: var(--navy); }
.nav__call { margin-left: 6px; }
.nav__cta { margin-left: 2px; }

.hamburger {
  display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.hamburger span { width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .2s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav__call { display: none; }
}
@media (max-width: 900px) {
  .hamburger { display: flex; }
  /* backdrop-filter would make .header a containing block and clip the fixed nav panel */
  .header, .header.is-scrolled { backdrop-filter: none; background: #fff; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; padding: 90px 20px 28px; box-shadow: var(--shadow-lg);
    transform: translateX(105%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__link { padding: 13px 14px; font-size: 17px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav__call { display: inline-flex; margin: 10px 0 0; }
  .nav__cta { margin-top: 8px; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(20,33,61,.5); z-index: 99;
    opacity: 0; visibility: hidden; transition: opacity .3s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Shared section ---------- */
.section { padding: 92px 0; }
.section--tint { background: var(--bg-tint); }
.section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.kicker {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600);
  background: var(--blue-050); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.kicker--onDark { color: #cfe6f6; background: rgba(63,169,229,.16); }
.section__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.section__title--onDark { color: #fff; }
.section__lead { margin-top: 16px; font-size: 18px; color: var(--slate-600); }
.section__lead--onDark { color: #b7c2d6; }
.grad-hot {
  background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Hero (full-bleed photo behind everything) ---------- */
.hero { position: relative; overflow: hidden; padding: 108px 0 116px; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
/* Light wash: near-solid on the left so navy copy reads, clearing to the right
   so the equipment in the photo stays visible. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 55% at 90% 10%, rgba(242,101,34,.12), transparent 62%),
    radial-gradient(55% 62% at 4% 22%, rgba(63,169,229,.24), transparent 64%),
    linear-gradient(96deg, rgba(255,255,255,.97) 0%, rgba(247,251,255,.94) 33%,
                            rgba(238,247,255,.76) 56%, rgba(228,242,255,.42) 100%);
}
.hero__inner { display: block; }
.hero__copy { max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700;
  font-size: 14px; color: var(--navy); background: #fff; border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-mix); }
.hero__title { font-size: clamp(38px, 5.4vw, 62px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.hero__sub { margin-top: 22px; font-size: 19px; color: var(--slate-600); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; }
.hero__chips li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--slate-700); font-size: 15px; }
.hero__chips .ic { width: 18px; height: 18px; color: var(--orange); stroke-width: 2.4; }

@media (max-width: 900px) {
  .hero { padding: 76px 0 84px; }
  .hero__sub { max-width: 52ch; }
  .hero__media img { object-position: 62% 50%; }
  /* Copy spans the full width on phones, so wash the whole frame evenly */
  .hero__scrim {
    background:
      radial-gradient(70% 40% at 85% 4%, rgba(242,101,34,.10), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(246,251,255,.87) 58%, rgba(238,247,255,.8) 100%);
  }
}
@media (max-width: 560px) {
  .hero { padding: 60px 0 68px; }
  .hero__actions .btn { flex: 1 1 auto; }
  /* Copy runs edge to edge here, so wash a little harder for contrast */
  .hero__scrim {
    background:
      radial-gradient(70% 40% at 85% 4%, rgba(242,101,34,.09), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,251,255,.92) 58%, rgba(238,247,255,.87) 100%);
  }
}

/* ---------- Live weather strip ---------- */
.wx {
  background: linear-gradient(180deg, #101c33 0%, var(--navy) 100%);
  padding: 34px 0 38px; color: #fff;
}
.wx[hidden] { display: none; }
.wx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.wx__title { font-size: 21px; font-weight: 800; color: #fff; }
.wx__sub { font-size: 14.5px; color: #9fb0c9; margin-top: 4px; }
.wx__live {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head);
  font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25);
  padding: 6px 12px; border-radius: 999px;
}
.wx__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: wxPulse 2.2s infinite; }
@keyframes wxPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.wx__updated { color: #9fb0c9; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* City chips */
.wx__locs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.wx__locs::-webkit-scrollbar { height: 5px; }
.wx__locs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.wxloc {
  flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; color: #dbe4f2;
  font-family: var(--font-head); font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.wxloc:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.wxloc:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wxloc[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #06243a; }
.wxloc__t { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Panel */
.wx__panel {
  display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: stretch;
}
.wx__now {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: center;
}
.wxnow__city { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #9fb0c9; }
.wxnow__row { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.wxnow__temp {
  font-family: var(--font-head); font-weight: 800; font-size: 46px; line-height: 1;
  letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.wxnow__ic { width: 42px; height: 42px; flex: none; }
.wxnow__desc { font-size: 14.5px; color: #cbd6e8; }
.wxnow__hl { font-size: 13.5px; color: #9fb0c9; margin-top: 8px; font-variant-numeric: tabular-nums; }
.wxnow__hl b { color: #fff; font-weight: 700; }

/* Week */
.wx__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.wxday {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px 8px; text-align: center;
  transition: background-color .2s, transform .18s;
}
.wxday:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.wxday--today { background: rgba(63,169,229,.16); border-color: rgba(63,169,229,.4); }
.wxday__name { font-family: var(--font-head); font-weight: 700; font-size: 12px; color: #9fb0c9; text-transform: uppercase; letter-spacing: .05em; }
.wxday--today .wxday__name { color: var(--blue); }
.wxday__ic { width: 30px; height: 30px; margin: 9px auto; display: block; }
.wxday__hi { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.wxday__lo { font-size: 12.5px; color: #8fa1bb; font-variant-numeric: tabular-nums; }

/* Loading skeleton + error */
.wx__skel { background: rgba(255,255,255,.08); border-radius: 8px; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.wx__error { text-align: center; padding: 18px; color: #cbd6e8; font-size: 15px; }
.wx__error button {
  margin-left: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 999px; padding: 7px 15px; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px; min-height: 40px;
}
.wx__error button:hover { background: rgba(255,255,255,.22); }
.wx__credit { margin-top: 14px; font-size: 12px; color: #7b8ba6; }

@media (max-width: 900px) {
  .wx__panel { grid-template-columns: 1fr; }
  .wx__week { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .wx { padding: 26px 0 30px; }
  .wx__week { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .wxnow__temp { font-size: 40px; }
  .wx__title { font-size: 19px; }
}
@media (max-width: 330px) { .wx__week { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .wx__dot, .wx__skel { animation: none; } }

/* ---------- Trust bar ---------- */
.trustbar { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #fff; }
.trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 24px; }
.trust { display: flex; align-items: center; gap: 14px; }
.trust .ic { width: 30px; height: 30px; color: var(--blue); stroke-width: 1.7; flex: none; }
.trust:nth-child(2) .ic { color: var(--orange); }
.trust:nth-child(4) .ic { color: var(--orange); }
.trust .ic { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.trust:hover .ic { transform: translateY(-3px) scale(1.12); }
.trust strong { display: block; font-family: var(--font-head); font-size: 16px; color: var(--navy); }
.trust span { font-size: 13.5px; color: var(--slate-500); }
@media (max-width: 780px) { .trustbar__grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; } }
@media (max-width: 420px) { .trustbar__grid { grid-template-columns: 1fr; } }

/* ---------- Services cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card__tag {
  align-self: flex-start; font-family: var(--font-head); font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 11px;
}
.card__tag--blue { background: var(--blue-050); color: var(--blue-600); }
.card__tag--orange { background: var(--orange-050); color: var(--orange-600); }
.card__tag--mix { background: #eef0f7; color: var(--navy); }
.card__title { font-size: 18.5px; font-weight: 700; margin-bottom: 8px; }
.card__text { font-size: 15px; color: var(--slate-600); line-height: 1.6; }
.card__link {
  margin-top: auto; padding-top: 14px; font-family: var(--font-head); font-weight: 700;
  font-size: 14.5px; color: var(--orange-600); display: inline-flex; align-items: center; gap: 6px;
}
.card__link span { transition: transform .2s ease; }
.card__link:hover span { transform: translateX(4px); }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Image placeholders (swap in your own photos) ---------- */
.ph {
  width: 100%; height: 100%; min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px;
  background:
    repeating-linear-gradient(45deg, #f2f6fb 0 10px, #eaf1f9 10px 20px);
  border: 2px dashed #b9cde0; border-radius: inherit; color: var(--slate-600);
}
.ph__ic { width: 34px; height: 34px; fill: none; stroke: var(--blue-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ph__title { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); }
.ph__hint { font-size: 12px; color: var(--slate-500); max-width: 100%; }
/* The filename is one long unbreakable token — let it wrap so it can't
   widen its grid track on narrow screens. */
.ph__hint code {
  background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
  font-size: 11.5px; overflow-wrap: anywhere; word-break: break-word;
}
.ph--tall { aspect-ratio: 4 / 3; min-height: 220px; border-radius: var(--radius-lg); margin-bottom: 20px; }

/* Real job photo in the About column */
.about__photo {
  margin: 0 0 20px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Section CTA row ---------- */
.section__cta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 44px; flex-wrap: wrap;
}
.section__cta p { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 17px; }
.section__cta--left { justify-content: flex-start; margin-top: 28px; }
.section__cta--onDark p { color: #fff; }
.feature__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--blue-600);
}
.feature__link span { transition: transform .2s ease; }
.feature__link:hover span { transform: translateX(4px); }

/* ---------- Why ---------- */
.why__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.why__intro { position: sticky; top: 100px; }
.why__intro .kicker { }
.why__intro .btn { margin-top: 8px; }
.why__list { display: grid; gap: 14px; }
.feature {
  display: flex; gap: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; transition: box-shadow .25s, transform .2s;
}
.feature:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feature__num {
  font-family: var(--font-head); font-weight: 800; font-size: 22px; color: transparent;
  background: var(--grad-mix); -webkit-background-clip: text; background-clip: text; flex: none;
  width: 40px;
}
.feature h3 { font-size: 19px; margin-bottom: 6px; }
.feature p { font-size: 15.5px; color: var(--slate-600); }
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr; gap: 36px; } .why__intro { position: static; } }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
/* Grid items default to min-width:auto, which lets wide content push the track
   past the container. Reset it on every grid child. */
.about__grid > *, .why__grid > *, .contact__grid > *, .faq__grid > *, .cards > *, .connect__grid > * { min-width: 0; }
.about__panel {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-600) 100%);
  border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.about__panel::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,169,229,.35), transparent 65%); top: -120px; right: -100px;
}
.about__panel::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,101,34,.3), transparent 65%); bottom: -120px; left: -90px;
}
.about__emblem { width: 120px; margin: 0 auto 28px; position: relative; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
.stat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; text-align: center; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 24px; color: #fff; }
.stat span { font-size: 13px; color: #aebbd0; }
.about__copy .kicker { margin-top: 0; }
.about__copy p { margin-top: 16px; font-size: 17px; color: var(--slate-600); }
.about__copy .section__title { margin-bottom: 4px; }
.checklist { margin-top: 22px; display: grid; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--slate-700); }
.checklist .ic { width: 22px; height: 22px; color: #17a25c; stroke-width: 2.4; flex: none; margin-top: 1px; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } }
/* Phone: the panel's 40px padding squeezed the stat tiles until "LA County"
   and "satisfaction focus" clipped. Tighten padding and scale the type down. */
@media (max-width: 560px) {
  .about__panel { padding: 26px 18px; }
  .about__emblem { width: 96px; margin-bottom: 22px; }
  .about__stats { gap: 12px; }
  .stat { padding: 16px 8px; }
  .stat strong { font-size: 20px; line-height: 1.2; hyphens: none; }
  .stat span { font-size: 12px; line-height: 1.35; display: block; }
}
@media (max-width: 360px) {
  .about__stats { grid-template-columns: 1fr; }
}

/* ---------- Process (dark) ---------- */
.section--dark { background: linear-gradient(180deg, var(--navy) 0%, #0f1930 100%); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.step {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 28px 24px; position: relative;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 12px; background: var(--grad-mix); color: #fff; font-family: var(--font-head);
  font-weight: 800; font-size: 20px; margin-bottom: 18px;
}
.step h3 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.step p { color: #b7c2d6; font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.review__stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review__stars .ic { width: 20px; height: 20px; color: #f5a623; fill: #f5a623; stroke: none; }
.review blockquote { margin: 0; font-size: 16.5px; color: var(--slate-700); line-height: 1.6; }
.review figcaption { margin-top: 16px; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 14.5px; }
.reviews__note { margin-top: 22px; text-align: center; font-size: 13px; color: var(--slate-500); font-style: italic; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(100deg, var(--orange) 0%, #ff7e3d 100%); }
.cta-banner__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 46px 24px; flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; }
.cta-banner p { color: rgba(255,255,255,.92); margin-top: 8px; max-width: 60ch; }

/* ---------- Hero quick pills ---------- */
.hero__quick { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero__quick-label {
  display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-500); font-weight: 700; margin-bottom: 11px;
}
.hero__quick-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font-family: var(--font-head); font-weight: 600;
  font-size: 14px; color: var(--slate-700);
  transition: border-color .2s, color .2s, transform .18s, background-color .2s, box-shadow .2s;
}
.pill:hover { border-color: var(--blue); color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pill--accent { border-color: var(--orange); background: var(--orange); color: #fff; }
.pill--accent::after { content: "\2192"; transition: transform .2s ease; }
.pill--accent:hover { border-color: var(--orange-600); background: var(--orange-600); }
.pill--accent:hover::after { transform: translateX(3px); }

/* ---------- Scroll progress bar ---------- */
.progressbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%;
  transform: scaleX(0); background: var(--grad-mix); z-index: 200; pointer-events: none;
}

/* ---------- Back to top ---------- */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s, background-color .2s, color .2s;
}
.totop.is-vis { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--navy); color: #fff; }
.totop .ic { width: 20px; height: 20px; }
@media (max-width: 640px) { .totop { bottom: 72px; right: 16px; width: 42px; height: 42px; } }

/* ---------- Connect (Facebook / Google) ---------- */
.connect__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 940px; margin: 0 auto; }
.connect {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center;
  justify-content: center; /* keeps the shorter card from looking empty beside the FB feed */
  transition: transform .2s ease, box-shadow .25s ease;
}
.connect:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.connect__badge {
  width: 60px; height: 60px; border-radius: 18px; display: inline-flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
}
.connect__badge svg { width: 34px; height: 34px; }
.connect__badge--fb { background: #1877F2; }
.connect__badge--fb svg { fill: #fff; }
.connect__badge--g { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.connect__title { font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.connect__text { font-size: 15.5px; color: var(--slate-600); margin-bottom: 20px; max-width: 34ch; }
.connect__stars { display: flex; gap: 4px; margin-bottom: 18px; }
.connect__stars svg { width: 24px; height: 24px; fill: #f5a623; }
.connect__stars svg { animation: starPop .5s ease both; }
.connect__stars svg:nth-child(2) { animation-delay: .07s; }
.connect__stars svg:nth-child(3) { animation-delay: .14s; }
.connect__stars svg:nth-child(4) { animation-delay: .21s; }
.connect__stars svg:nth-child(5) { animation-delay: .28s; }
@keyframes starPop { from { transform: scale(.4) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.btn--fb { background: #1877F2; color: #fff; box-shadow: 0 8px 20px rgba(24,119,242,.26); }
.btn--fb:hover { background: #1465d8; }
.btn--fb .ic--solid { fill: currentColor; stroke: none; }
.btn--google { background: var(--navy); color: #fff; }
.btn--google:hover { background: var(--navy-600); }
.fb-embed { margin-top: 22px; width: 100%; display: flex; justify-content: center; }
.fb-embed iframe { border: none; overflow: hidden; max-width: 100%; border-radius: 12px; }
@media (max-width: 780px) { .connect__grid { grid-template-columns: 1fr; } }

/* ---------- Footer social ---------- */
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.soc {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  transition: background-color .2s, transform .18s, border-color .2s;
}
.soc svg { width: 19px; height: 19px; fill: #cdd6e6; transition: fill .2s; }
.soc:hover { transform: translateY(-3px); }
.soc--fb:hover { background: #1877F2; border-color: #1877F2; }
.soc--g:hover { background: #f5a623; border-color: #f5a623; }
.soc:hover svg { fill: #fff; }

/* ---------- Service needed (radio cards) ---------- */
.field--set { border: none; padding: 0; margin: 0 0 18px; min-width: 0; }
.field--set legend {
  font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--navy);
  margin-bottom: 9px; padding: 0;
}
.field__opt { color: var(--slate-500); font-weight: 500; }
.svcopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svcopt { display: block; cursor: pointer; }
/* Higher specificity than the generic `.field input { width:100% }` below,
   which would otherwise stretch these hidden radios across the page. */
.svcopts .svcopt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; pointer-events: none;
}
.svcopt__box {
  position: relative; display: flex; align-items: center; gap: 11px; height: 100%;
  border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 14px; background: #fff;
  transition: border-color .2s, box-shadow .2s, background-color .2s, transform .15s;
}
.svcopt:hover .svcopt__box { border-color: var(--blue); transform: translateY(-2px); }
.svcopt__ic {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg-tint); flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s;
}
.svcopt__ic .ic { width: 20px; height: 20px; color: var(--blue-600); transition: color .2s; }
.svcopt__txt strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--navy); }
.svcopt__txt span { font-size: 12.5px; color: var(--slate-500); line-height: 1.35; display: block; }
.svcopt__tick {
  position: absolute; top: 9px; right: 9px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--orange); display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s;
}
.svcopt__tick svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.svcopt input:checked + .svcopt__box {
  border-color: var(--orange); background: var(--orange-050);
  box-shadow: 0 0 0 3px rgba(242,101,34,.13);
}
.svcopt input:checked + .svcopt__box .svcopt__ic { background: #fff; }
.svcopt input:checked + .svcopt__box .svcopt__ic .ic { color: var(--orange-600); }
.svcopt input:checked + .svcopt__box .svcopt__tick { opacity: 1; transform: scale(1); }
.svcopt input:focus-visible + .svcopt__box { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 520px) { .svcopts { grid-template-columns: 1fr; } }

/* ---------- Symptom analyzer ---------- */
.analyzer {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 30px; max-width: 900px; margin: 0 auto;
}
.analyzer__steps { display: flex; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0 0 22px; border-bottom: 1px solid var(--line-soft); }
.astep {
  display: flex; align-items: center; gap: 9px; flex: 1; font-family: var(--font-head);
  font-weight: 700; font-size: 14px; color: var(--slate-500);
}
.astep span {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tint); color: var(--slate-500);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; flex: none;
  border: 1.5px solid var(--line); transition: background-color .25s, color .25s, border-color .25s;
}
.astep.is-active { color: var(--navy); }
.astep.is-active span { background: var(--grad-mix); color: #fff; border-color: transparent; }
.astep.is-done span { background: #17a25c; color: #fff; border-color: transparent; }

.analyzer__panel { display: none; }
.analyzer__panel.is-active { display: block; animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .analyzer__panel.is-active { animation: none; } }

.analyzer__q { font-size: 21px; font-weight: 700; margin-bottom: 18px; }
.analyzer__ctx { color: var(--blue-600); font-weight: 700; }
.analyzer__back {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--slate-600);
  padding: 4px 0; margin-bottom: 14px;
}
.analyzer__back:hover { color: var(--navy); }
.analyzer__back .ic { width: 17px; height: 17px; }

.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.opts--list { grid-template-columns: 1fr 1fr; }
.opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px;
  cursor: pointer; font-family: var(--font-body); font-size: 15.5px; color: var(--slate-700);
  transition: border-color .2s, box-shadow .2s, transform .15s, background-color .2s;
  min-height: 56px;
}
.opt:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.opt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.opt__ic {
  width: 42px; height: 42px; border-radius: 11px; background: var(--bg-tint); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.opt__ic .ic { width: 22px; height: 22px; color: var(--blue-600); }
.opt strong { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 15.5px; }
.opts--grid-center .opt { flex-direction: column; text-align: center; }
@media (max-width: 820px) { .opts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .opts, .opts--list { grid-template-columns: 1fr; } }

/* Result */
.result__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.result__title { font-size: 22px; font-weight: 800; }
.result__sub { color: var(--slate-600); font-size: 15.5px; margin-top: 4px; }
.urgency {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
}
.urgency--routine { background: #e7f7ee; color: #14824a; }
.urgency--soon { background: var(--orange-050); color: var(--orange-600); }
.urgency--urgent { background: #fde8e6; color: #c02b1d; }
.rblock { margin-bottom: 20px; }
.rblock h4 {
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-500);
  margin-bottom: 10px;
}
.rlist { display: grid; gap: 9px; }
.rlist li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--slate-700); }
.rlist .ic { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--blue-600); stroke-width: 2.2; }
.rlist--check .ic { color: #17a25c; }
.result__safety {
  background: #fdeceb; border: 1px solid #f6c9c4; border-left: 4px solid #c02b1d;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 20px;
}
.result__safety strong { color: #c02b1d; font-family: var(--font-head); display: block; margin-bottom: 4px; }
.result__safety p { font-size: 15px; color: #7d2a22; }
.result__note {
  background: var(--bg-tint); border-left: 3px solid var(--blue); border-radius: 10px;
  padding: 14px 16px; font-size: 15px; color: var(--slate-600); margin-bottom: 20px;
}
.result__actions { display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 20px; }
.analyzer__disclaimer { max-width: 900px; margin: 16px auto 0; text-align: center; font-size: 13px; color: var(--slate-500); }
@media (max-width: 560px) { .analyzer { padding: 22px 18px; } .astep { font-size: 0; gap: 0; } .astep span { font-size: 13.5px; } }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq__intro { position: sticky; top: 100px; }
.faq__intro .btn { margin-top: 8px; }
.faq__list { display: grid; gap: 12px; }
.faq { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.faq[open] { box-shadow: var(--shadow-sm); border-color: var(--blue); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 22px; font-family: var(--font-head);
  font-weight: 700; color: var(--navy); font-size: 17px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--blue-600); border-radius: 2px; transition: transform .25s ease, opacity .2s; }
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2.4px; }
.faq__icon::after { left: 8px; top: 0; width: 2.4px; height: 18px; }
.faq[open] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__body { padding: 0 22px 22px; }
.faq__body p { color: var(--slate-600); font-size: 15.5px; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; gap: 32px; } .faq__intro { position: static; } }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contact__info .kicker { margin-top: 0; }
.contact__list { margin-top: 30px; display: grid; gap: 20px; }
.contact__list li { display: flex; align-items: center; gap: 16px; }
.contact__ic {
  width: 48px; height: 48px; border-radius: 12px; background: var(--blue-050);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.contact__ic .ic { width: 22px; height: 22px; color: var(--blue-600); }
.contact__list li:nth-child(2) .contact__ic { background: var(--orange-050); }
.contact__list li:nth-child(2) .contact__ic .ic { color: var(--orange-600); }
.contact__label { display: block; font-size: 13px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.contact__value { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 18px; }
.contact__sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: 14.5px; color: var(--slate-600); }
a.contact__value:hover { color: var(--orange-600); }

.contact__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(63,169,229,.16); }
.field.is-invalid input, .field.is-invalid select { border-color: #e0483a; box-shadow: 0 0 0 4px rgba(224,72,58,.12); }
.field__error { display: block; color: #d63b2d; font-size: 13px; margin-top: 6px; min-height: 0; }
/* Honeypot: off-screen rather than display:none, which some bots detect */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin-top: 14px; font-size: 15px; font-weight: 600; }
.contact__form button[type="submit"][disabled] { opacity: .6; cursor: progress; transform: none; }
.form__note.is-ok { color: #14824a; }
.form__note.is-err { color: #d63b2d; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 460px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #aebbd0; padding-top: 64px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
/* Emblem plus live text, sized for the footer rather than copied from the
   header. The emblem carries the block and clearly outweighs the words. */
.footer__lockup { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer__emblem { height: 78px; width: auto; }
/* "WJC" sits centred over "Heating & Air", the way the real logo is drawn */
.footer__wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.footer__wjc { font-family: var(--font-head); font-weight: 800; font-size: 27px; letter-spacing: .02em; color: #fff; }
.footer__ha { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; margin-top: 5px; }
.footer__ha .c-blue { color: var(--blue); }
.footer__ha .c-orange { color: var(--orange); }
@media (max-width: 560px) {
  .footer__emblem { height: 66px; }
  .footer__wjc { font-size: 24px; }
  .footer__ha { font-size: 12.5px; }
}
.footer__tag { font-size: 15px; color: #9fabc2; max-width: 34ch; margin-bottom: 18px; }
.footer__phone { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: #fff; }
.footer__phone .ic { color: var(--orange); }
.footer__phone:hover { color: var(--blue); }
.footer__email { display: block; margin-top: 8px; color: #9fabc2; }
.footer__email:hover { color: #fff; }
.footer__col h3 { color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.footer__col ul { display: grid; gap: 11px; }
.footer__col a { color: #9fabc2; font-size: 15px; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__small { font-size: 14px; color: #9fabc2; margin-bottom: 16px; }
.footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; flex-wrap: wrap; }
.footer__bar p { font-size: 13.5px; color: #8592ab; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Mobile call bar ---------- */
.callbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  align-items: center; justify-content: center; gap: 10px;
  background: var(--orange); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 16.5px;
  padding: 15px 12px; box-shadow: 0 -6px 20px rgba(20,33,61,.18); white-space: nowrap;
}
.callbar .ic { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .callbar { display: flex; }
  body { padding-bottom: 58px; }
  .section { padding: 64px 0; }
  .hero { padding: 40px 0 60px; }
}

/* ---------- Touch targets ----------
   Inline text links sit below the 44px comfortable-tap height on phones.
   Pad them vertically without changing how they read. */
@media (max-width: 700px) {
  .card__link, .feature__link {
    min-height: 44px; align-items: center;
  }
  .footer__col a, .footer__email {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .footer__col ul { gap: 2px; }
}

/* ---------- Motion preferences ----------
   Keep everything readable and functional with animation switched off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover::before { left: -120%; }
  .connect__stars svg { animation: none; opacity: 1; transform: none; }
}