/* Breezeway: the hero cools down. Warm peach fades to ice blue as the thermostat drops from 81 to 72;
   Sora display, ice-white ground; the repair-or-replace meter is the signature tool. */
:root {
  --bg: #F4F9FB; --surface: #FFFFFF; --surface-2: #E6F1F6; --line: #D2E2EA;
  --ink: #14212B; --ink-soft: #485A68; --heading: #14212B;
  --primary: #1B5F8C; --primary-ink: #FFFFFF; --primary-hover: #154C70;
  --accent: #B53D0C; --accent-ink: #FFFFFF; --heat: #B53D0C;
  --dark: #14212B; --on-dark: #F4F9FB; --on-dark-soft: #BFD0DB;
  --kicker: #1B5F8C; --kicker-on-dark: #9FD3F0; --link: #1B5F8C; --field-border: #6E8696; --star: #B53D0C;
  --ph-a: #E3EEF4; --ph-b: #D7E6EE; --ph-edge: #6E8696;
  --display: "Sora", "Segoe UI", sans-serif; --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --display-weight: 600; --display-lh: 1.1; --display-track: -0.02em;
  --radius: 14px; --radius-lg: 22px; --btn-radius: 999px; --chip-radius: 999px; --field-radius: 12px;
  --brand-font: "Sora", sans-serif; --brand-weight: 600; --btn-font: "Sora", sans-serif; --btn-weight: 600;
}
.kicker { font-family: var(--display); font-weight: 600; }
.text-link { font-weight: 700; }

.hero { position: relative; overflow: hidden; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
.half { padding-block: clamp(48px, 7vw, 96px); display: flex; align-items: center; }
.half-inner { display: grid; gap: 20px; align-content: start; width: 100%; }
.half--hot { background: linear-gradient(160deg, #EEF6FB 0%, #E2F0F8 100%); padding-inline: max(var(--gutter, 24px), calc((100vw - 1180px) / 2 + 40px)) clamp(24px, 4vw, 64px); position: relative; }
.half--hot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #FCEDE6 0%, #F9DCCD 100%); opacity: 0; transition: opacity 2.6s ease; pointer-events: none; }
.hero.is-hot .half--hot::before { opacity: 1; transition: none; }
.half--hot > .half-inner { position: relative; z-index: 1; }
.half-tag { display: inline-flex; gap: 8px; align-items: center; font-family: var(--display); font-weight: 600; color: var(--heat); }
.half-tag svg { width: 22px; height: 22px; }
.half h1 { font-size: clamp(2.6rem, 1.5rem + 4vw, 4.6rem); max-width: 12ch; }
.half-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.half-list li { background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.92rem; transition: border-color 2.6s ease; }
.hero.is-hot .half-list li { border-color: #F1CDBD; transition: none; }

.half--hot .half-inner { position: relative; }
@media (max-width: 1100px) { .tstat { position: relative; justify-self: start; } }
.tstat { position: absolute; top: 0; right: 0; width: 168px; padding: 14px 16px 12px; border-radius: 22px;
  background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(20, 33, 43, .35); display: grid; gap: 2px; color: var(--ink); }
.ts-top { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.ts-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FA4E7; box-shadow: 0 0 0 4px rgba(47, 164, 231, .18); }
.ts-temp { font-family: var(--display); font-weight: 600; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; color: var(--primary); font-variant-numeric: tabular-nums; transition: color .6s ease; }
.ts-temp span { font-size: 0.5em; vertical-align: top; position: relative; top: .2em; }
.ts-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-soft); }
.hero.is-hot .ts-temp, .hero.is-hot .ts-top { color: var(--heat); }
.hero.is-hot .ts-dot { background: var(--heat); box-shadow: 0 0 0 4px rgba(181, 61, 12, .18); }

.half--cool { background: var(--primary); color: #FFFFFF; padding-inline: clamp(24px, 4vw, 56px) max(var(--gutter, 24px), calc((100vw - 1180px) / 2 + 40px)); position: relative; }
.half--cool .hero-photo { margin-top: 8px; border-radius: 14px; border: 0; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6); }
.half--cool > .half-inner { position: relative; z-index: 1; }
.half--cool h2 { color: #FFFFFF; font-size: 1.8rem; }
.half--cool p { color: #DCEBF4; }
.half--cool .half-tag { color: #9FD3F0; }
.half--cool .text-link { color: #FFFFFF; }

.badges-row { background: var(--surface); border-bottom: 1px solid var(--line); }
.badges-row ul { list-style: none; padding: 20px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.badges-row li { display: grid; }
.badges-row strong { font-family: var(--display); font-size: 1.3rem; color: var(--primary); }
.badges-row span { color: var(--ink-soft); font-size: 0.9rem; }

.rr { align-items: center; }
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: grid; gap: 22px; box-shadow: 0 24px 50px -34px rgba(20,33,43,.5); min-width: 0; }
.calc--big { grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(24px, 4vw, 40px); }
.calc-in { display: grid; gap: 18px; }
.calc input[type=range] { width: 100%; accent-color: var(--primary); height: 32px; }
.calc output { font-family: var(--display); font-weight: 700; color: var(--primary); }
.calc-out { background: var(--surface-2); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; }
.co-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.co-score { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.co-meter { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #CDE7D3 0 50%, #F6D3C4 50% 100%); overflow: visible; }
.co-meter span { display: block; height: 100%; border-radius: 6px; background: var(--ink); max-width: 100%; transition: width .2s ease; }
.co-meter i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.co-verdict { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.co-verdict.is-repair { color: #1E6B39; } .co-verdict.is-replace { color: var(--heat); }
.co-why { color: var(--ink-soft); font-size: 0.95rem; }

.svc .card > .photo { --ar: 10 / 7 !important; }
.svc .card a { font-weight: 700; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 12px; align-content: start; position: relative; }
.plan--pop { border: 2px solid var(--primary); box-shadow: 0 24px 50px -34px rgba(27,95,140,.6); }
.plan-pop { position: absolute; top: -13px; left: 24px; background: var(--primary); color: #FFFFFF; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.plan h2, .plan h3 { font-size: 1.4rem; }
.plan-price { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; }
.plan-price span { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
.plan ul { padding-left: 18px; display: grid; gap: 6px; color: var(--ink-soft); }
.plan .btn { justify-self: start; margin-top: 6px; }

.area-box { background: var(--surface-2); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 16px; }
.area-cols { columns: 2; padding-left: 18px; }
.area-box .btn { justify-self: start; }
.svc-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 100px; }
.price-tag { font-family: var(--display); font-weight: 700; color: var(--primary); }
.fin { background: var(--primary); color: #FFFFFF; border-radius: var(--radius-lg); padding: 30px; display: grid; gap: 10px; }
.fin-big { font-family: var(--display); font-size: 4rem; font-weight: 700; line-height: 1; }
.fin .muted { color: #DCEBF4; }
.fin .btn { justify-self: start; background: #FFFFFF; color: var(--primary); border-color: #FFFFFF; }
.cert-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cert { border: 1.5px dashed var(--field-border); border-radius: var(--radius); padding: 18px; display: grid; gap: 4px; text-align: center; }
.cert strong { font-family: var(--display); }
.cert span { font-size: 0.85rem; color: var(--ink-soft); }
.em-box { background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 10px; }
.em-box h3 { color: var(--on-dark); }
.em-box p { color: var(--on-dark-soft); }
.em-box .btn { justify-self: start; }

@media (max-width: 1020px) { .badges-row ul, .cert-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .hero-split, .calc--big, .svc-row, .plans { grid-template-columns: 1fr; }
  .half--hot, .half--cool { padding-inline: var(--gutter, 16px); }
  .tstat { position: relative; justify-self: start; width: 150px; }
  .ts-temp { font-size: 2.8rem; }
}
@media (max-width: 560px) { .badges-row ul, .cert-row { grid-template-columns: repeat(2, 1fr); } }

/* ---- Motion: the hero cools down (Breezeway Comfort Co.) ---- */
@keyframes bz-rise { 0% { opacity: 0; transform: translateY(0) scaleX(1); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70vh) scaleX(1.6); } }
@keyframes bz-blow { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 15% { opacity: var(--a); } 50% { transform: translate3d(70vw, calc(var(--dy) * -1), 0); } 82% { opacity: var(--a); } 100% { opacity: 0; transform: translate3d(140vw, var(--dy), 0); } }
@keyframes bz-spin { to { transform: rotate(360deg); } }
@keyframes bz-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes bz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bz-breathe { 0%, 100% { box-shadow: 0 0 0 4px rgba(47, 164, 231, .18); } 50% { box-shadow: 0 0 0 8px rgba(47, 164, 231, .08); } }
@keyframes bz-zoom { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
.half--hot > .mo-fx { z-index: 0; }
.bz-heat span { bottom: -40px; left: var(--x); width: var(--w); height: 90px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(181, 61, 12, .16), rgba(181, 61, 12, 0) 70%); filter: blur(6px); opacity: 0; }
.bz-heat { opacity: 0; transition: opacity 2s ease; }
.hero.is-hot .bz-heat { opacity: 1; transition: none; }
html.mo .bz-heat span { animation: bz-rise var(--t) ease-in var(--bd) infinite; }
.hero > .bz-air { z-index: 2; opacity: 0; transition: opacity 1.6s ease .2s; }
.hero.cooled > .bz-air { opacity: 1; }
.bz-air span { left: calc(-1 * var(--w)); top: var(--y); width: var(--w); height: var(--h); opacity: 0; border-radius: 999px; }
.bz-line { background: linear-gradient(90deg, rgba(150, 210, 245, 0), rgba(120, 196, 240, .8) 40%, rgba(255, 255, 255, .95) 70%, rgba(255, 255, 255, 0)); box-shadow: 0 0 6px rgba(140, 205, 245, .45); }
.bz-wisp { background: linear-gradient(90deg, rgba(170, 220, 248, 0), rgba(170, 220, 248, .55), rgba(255, 255, 255, .5), rgba(170, 220, 248, 0)); filter: blur(3px); }
html.mo .bz-air span { animation: bz-blow var(--t) linear var(--bd) infinite; will-change: transform, opacity; }
html.mo .hero.is-hot .half--hot .half-tag svg { animation: bz-pulse 1.2s ease-in-out infinite; }
html.mo .half--cool .half-tag svg { animation: bz-spin 12s linear infinite; }
html.mo .hero.cooled .ts-dot { animation: bz-breathe 2.4s ease-in-out 3s infinite; }
html.mo .half--hot .half-inner > *, html.mo .half--cool .half-inner > * { animation: bf-rise .85s cubic-bezier(.2, .7, .2, 1) both; }
html.mo .half-inner > :nth-child(2) { animation-delay: .1s; } html.mo .half-inner > :nth-child(3) { animation-delay: .2s; }
html.mo .half-inner > :nth-child(4) { animation-delay: .3s; } html.mo .half-inner > :nth-child(n+5) { animation-delay: .4s; }
html.mo .half--cool .half-inner > * { animation-delay: .45s; }
html.mo .plan--pop { animation: bz-float 5s ease-in-out infinite; }