/* Comfort Point Heating & Air — intake form styles.
   Mobile-first, no framework, no external assets or fonts. */

:root {
  --navy: #0B2E45;
  --navy-soft: #14405E;
  --blue: #1273B8;
  --blue-dark: #0F5E97;
  --warm: #E2650A;
  --ink: #10212C;
  --muted: #5A7183;
  --line: #D9E2E9;
  --line-strong: #B9C8D4;
  --bg: #F4F7F9;
  --white: #fff;
  --danger: #B4231C;
  --danger-bg: #FDECEA;
  --ok: #1E874B;
  --radius: 12px;
  --shadow-card: 0 1px 2px rgba(11, 46, 69, .06), 0 12px 28px -12px rgba(11, 46, 69, .18);
  --focus: 0 0 0 3px rgba(18, 115, 184, .32);
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must beat any display rule below — .banner sets display: flex and would
   otherwise override the browser default, showing the error banner on a fresh page load. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, legend, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--blue-dark); }

/* Page-width container. Sized so the card's 800px measure leaves a margin that reads as a
   margin — at 1140 the leftover beside the left-aligned card was dead space. */
.wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.logo-mark { width: 38px; height: 38px; flex: none; }

.logo-text { display: flex; flex-direction: column; line-height: 1.12; }
.logo-text strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}
.logo-text span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
  font-weight: 600;
}

.call-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--navy);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 15px 8px 13px;
  transition: border-color .15s, background-color .15s;
}
.call-cta:hover { border-color: var(--blue); background: #F2F8FC; }
.call-cta:focus-visible { outline: none; box-shadow: var(--focus); }
.call-cta svg { width: 19px; height: 19px; color: var(--blue); flex: none; }

.call-cta-text { display: flex; flex-direction: column; line-height: 1.15; }
.call-cta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted);
  font-weight: 600;
}
.call-cta-number { font-weight: 700; font-size: 15px; white-space: nowrap; }

@media (max-width: 430px) {
  .call-cta-label { display: none; }
  .call-cta { padding: 9px 14px; }
  .call-cta-number { font-size: 14px; }
}

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(110% 130% at 78% -20%, rgba(30, 127, 194, .5) 0%, rgba(11, 46, 69, 0) 62%),
    linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 72%);
  color: #EAF2F8;
  padding: 40px 0 44px;
}

.hero-inner { display: grid; gap: 30px; }

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
    gap: 56px;
    align-items: center;
  }
}

.eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 700;
  color: #8EC5E8;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--white);
  font-weight: 700;
  /* Even out the two lines instead of leaving "away." alone on the second. */
  text-wrap: balance;
}

.hero-sub {
  margin-top: 12px;
  max-width: 52ch;
  color: #C6DAE8;
  font-size: 16px;
}

/* A checked list rather than pills: three pills do not fit the hero column at any width worth
   having, and wrapping them left one orphan on its own line. One item per line is the same
   layout mobile already used, so there is no breakpoint where it changes shape. */
.trust {
  display: grid;
  gap: 11px;
  margin-top: 24px;
}
.trust li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  font-weight: 500;
  color: #DCEAF4;
}
/* The circle. */
.trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(111, 211, 154, .16);
  border: 1px solid rgba(111, 211, 154, .45);
}
/* The tick inside it, drawn with borders so it needs no glyph. */
.trust li::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 6.5px;
  width: 4px;
  height: 8px;
  border: solid #6FD39A;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 620px) {
  .hero { padding: 56px 0 60px; }
  .hero h1 { font-size: 38px; }
}

@media (min-width: 900px) {
  .hero { padding: 64px 0 74px; }
  .hero h1 { font-size: 44px; }
  .hero-sub { font-size: 17px; }
}

/* Hero side panel */

.hero-panel {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 22px 22px 20px;
}

.hero-panel h2 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: #8EC5E8;
}

.steps {
  display: grid;
  gap: 15px;
  margin-top: 16px;
  counter-reset: none;
}

.steps li { display: flex; align-items: flex-start; gap: 12px; }

.step-n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-body { display: flex; flex-direction: column; }
.step-body strong { color: var(--white); font-size: 14.5px; font-weight: 600; }
.step-body span { color: #A9C6DA; font-size: 13.5px; }

.hero-panel-foot {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13.5px;
  color: #C6DAE8;
}
/* Keep the number on one line — it broke mid-digits at 390px. */
.hero-panel-foot a { color: #9FD0EE; font-weight: 600; white-space: nowrap; }

/* ---------- Card ---------- */

.main { padding: 0 20px; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 24px 20px 28px;
  /* Narrower than .wrap on purpose: a form reads badly at full page width. Left-aligned rather
     than centred so its edge sits on the same grid line as the header, hero and footer. */
  max-width: 800px;
  margin: -26px 0 44px;
  position: relative;
}

.card-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.card-head h2 {
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--navy);
}
.card-head p { margin-top: 6px; color: var(--muted); font-size: 14px; }

.req { color: var(--warm); font-weight: 700; }

@media (min-width: 620px) {
  .card { padding: 30px 32px 34px; }
}

/* ---------- Form ---------- */

fieldset {
  border: 0;
  padding: 0;
  margin: 26px 0 0;
}

form > fieldset > legend {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--blue-dark);
  padding-bottom: 14px;
}

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
/* Full width while the two-column rows are stacked; from the .grid-2 breakpoint up it takes
   exactly one of those columns, so it lines up with Property type above it. */
.field-narrow { max-width: 100%; }

label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

.hint {
  font-size: 13px;
  color: var(--muted);
  margin: -2px 0 6px;
}

/* Hint placed after the input, below the error slot. */
.hint-after { margin: 5px 0 0; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 11px 12px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}

textarea { resize: vertical; min-height: 104px; line-height: 1.5; }

.input-short { max-width: 100%; }

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: #FFFBFB;
}

.error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-top: 5px;
}

.grid-2, .grid-3 { display: grid; gap: 0 16px; }

/* Mobile: City on its own full-width row, then State and ZIP side by side at their content
   width. The trailing 1fr column absorbs the leftover space, so spanning City across all three
   still gives it the full container width. */
.grid-3 { grid-template-columns: 5.5em 8em minmax(0, 1fr); }
.grid-3 > :first-child { grid-column: 1 / -1; }

@media (min-width: 560px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 96px 132px; }
  .grid-3 > :first-child { grid-column: auto; }
  /* One .grid-2 column: (100% - 16px gap) / 2. */
  .field-narrow { max-width: calc(50% - 8px); }
}

/* Conditional textarea */

.field-conditional {
  border-left: 3px solid var(--blue);
  background: #F6FAFD;
  border-radius: 0 10px 10px 0;
  padding: 14px 14px 15px;
  margin-bottom: 18px;
  animation: reveal .18s ease-out;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .field-conditional { animation: none; }
}

/* Urgency radios */

.radio-set { margin: 0; }
.radio-set > legend {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 8px;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
}

.radio-cards { display: grid; gap: 8px; }

.radio-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.radio-card:hover { border-color: var(--blue); background: #F7FBFD; }

.radio-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.radio-dot {
  flex: none;
  width: 19px;
  height: 19px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  transition: border-color .15s;
}
.radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .15s;
}

.radio-card input:checked ~ .radio-dot { border-color: var(--blue); }
.radio-card input:checked ~ .radio-dot::after { transform: scale(1); }
.radio-card:has(input:checked) {
  border-color: var(--blue);
  background: #EFF7FC;
  box-shadow: inset 0 0 0 1px var(--blue);
}
.radio-card input:focus-visible ~ .radio-dot { box-shadow: var(--focus); }

.radio-card-urgent .radio-label { font-weight: 600; }
.radio-card-urgent .radio-dot::after { background: var(--warm); }
.radio-card-urgent input:checked ~ .radio-dot { border-color: var(--warm); }
.radio-card-urgent:has(input:checked) {
  border-color: var(--warm);
  background: #FFF6EE;
  box-shadow: inset 0 0 0 1px var(--warm);
}

.radio-set[aria-invalid="true"] .radio-card { border-color: var(--danger); }

/* Consent checkbox */

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 0;
  font-weight: 400;
  cursor: pointer;
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}

.consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.consent-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--line-strong);
  border-radius: 5px;
  background: var(--white);
  position: relative;
  transition: border-color .15s, background-color .15s;
}
.consent-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s;
}
.consent input:checked ~ .consent-box {
  background: var(--blue);
  border-color: var(--blue);
}
.consent input:checked ~ .consent-box::after { transform: rotate(45deg) scale(1); }
.consent input:focus-visible ~ .consent-box { box-shadow: var(--focus); }

.consent-text { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* Actions */

.actions {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  border: 0;
  border-radius: 10px;
  padding: 14px 26px;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
  box-shadow: 0 8px 18px -8px rgba(15, 94, 151, .7);
}
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:focus-visible { outline: none; box-shadow: var(--focus), 0 8px 18px -8px rgba(15, 94, 151, .7); }
.btn:disabled { cursor: progress; filter: saturate(.55) brightness(1.04); box-shadow: none; }

@media (min-width: 560px) {
  .btn { width: auto; min-width: 232px; }
}

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-sending .spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

.actions-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Banner */

.banner {
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 20px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.banner-error {
  background: var(--danger-bg);
  border: 1px solid #F0BDB8;
  color: #7E1912;
}
.banner-error strong { font-size: 14.5px; }
.banner-error a { color: #7E1912; }
.banner-fallback { color: #96322A; }

/* Success */

.success { text-align: center; padding: 14px 0 6px; }
.success:focus { outline: none; }
.success-icon { width: 60px; height: 60px; }
.success h2 {
  margin-top: 14px;
  font-size: 23px;
  color: var(--navy);
  letter-spacing: -.015em;
}
.success-lead { margin-top: 8px; color: var(--muted); }

.next-steps {
  text-align: left;
  max-width: 460px;
  margin: 22px auto 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 10px;
}
.next-steps li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--ink);
}
.next-steps li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: #B9CFDE;
  padding: 30px 0 24px;
  font-size: 14px;
}

.footer-inner { display: grid; gap: 16px; }

@media (min-width: 560px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer-inner > div:last-child { text-align: right; }
}

.footer-name { color: var(--white); font-weight: 700; font-size: 15.5px; }
.footer-line { margin-top: 4px; }
.site-footer a { color: #9FD0EE; }

.footer-note {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.footer-note p { font-size: 12.5px; color: #8AA6B9; max-width: 62ch; }