/* Calculator hero (.iqch).
   Palette: blue #0b6ef4 (button/active),
   icon blue #0b84f0, green #4ade80 (accents on dark) / #2fa14e (on white),
   H1 gradient #0b84fc→#32c583→#4fd05e, QA card #141d27, trust bar #111e3c.
   The right card restyles the shared iq-flow via the .iq-flow--hero chrome
   (icon step circles, stacked address form) without touching other contexts. */

.iqch { --iqch-blue: #0b6ef4; --iqch-blue-ic: #0b84f0; --iqch-green: #4ade80; }

/* ── hero band: photo + navy scrim ── */
.iqch-hero {
  position: relative; isolation: isolate; padding: 48px 0 58px;
  background-color: #0c1626;
}
.iqch-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--iqch-photo) center 38% / cover no-repeat;
}
.iqch-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 14, 26, .62) 0%, rgba(8, 14, 26, .5) 45%, rgba(8, 14, 26, .72) 100%);
}
.iqch-row { display: flex; align-items: flex-start; gap: 44px; }
.iqch-left { flex: 1 1 auto; min-width: 0; }
.iqch-card { flex: 0 0 580px; }

/* ── eyebrow / headline / subhead ── */
.iqch-eyebrow {
  font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--iqch-green); margin: 0 0 14px;
}
.iqch-h1 {
  font-family: Poppins, sans-serif; font-size: clamp(2.3rem, 3.9vw, 3.45rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff;
  white-space: nowrap;
  margin: 0 0 18px; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.iqch-h1-grad {
  display: inline-block;
  color: #0b8cff;
  background: linear-gradient(
    100deg,
    #0b6fff 0%,
    #0797ff 34%,
    #27d4ff 58%,
    #1298ff 78%,
    #075cff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 18px rgba(0, 140, 255, 0.22),
    0 2px 10px rgba(0, 20, 60, 0.35);
}
.iqch-sub {
  font-size: 1.12rem; line-height: 1.5; color: rgba(255, 255, 255, .93);
  max-width: 33rem; margin: 0 0 22px; text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  text-wrap: pretty;
}

/* ── benefit trio ── */
.iqch-benefits { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.iqch-benefit { display: flex; align-items: center; gap: 10px; }
.iqch-benefit-ic { width: 40px; height: 40px; flex: 0 0 auto; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.iqch-benefit-text { display: flex; flex-direction: column; line-height: 1.25; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); white-space: nowrap; }
.iqch-benefit-text span { font-size: .79rem; color: rgba(255, 255, 255, .75); }
.iqch-benefit-text strong { font-size: 1.04rem; font-weight: 800; color: #fff; }
.iqch-benefit-sep { width: 1px; height: 42px; background: rgba(255, 255, 255, .16); flex: 0 0 auto; }

/* ── Quick Answer card ── */
.iqch-qa {
  max-width: 41rem;
  background: rgba(14, 20, 29, .88); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px; padding: 20px 24px 18px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
}
.iqch-qa-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--iqch-green); margin: 0 0 12px;
}
.iqch-qa-label svg { width: 15px; height: 15px; flex: 0 0 auto; }
.iqch-qa-summary { font-size: .99rem; line-height: 1.55; color: rgba(255, 255, 255, .92); margin: 0 0 16px; }
.iqch-qa-summary strong { color: #fff; font-weight: 700; }
.iqch-qa-metrics {
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px; margin: 0 0 16px;
}
.iqch-qa-metric { flex: 1; text-align: center; padding: 14px 6px 11px; }
.iqch-qa-msep { width: 1px; background: rgba(255, 255, 255, .1); flex: 0 0 auto; }
.iqch-qa-val { display: block; font-size: 1.26rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.iqch-qa-key { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8b9cb2; margin-top: 5px; }
.iqch-qa-note { display: flex; align-items: flex-start; gap: 12px; font-size: .85rem; line-height: 1.5; color: #b7c2ce; margin: 0; }
.iqch-qa-note img { width: 34px; height: 34px; flex: 0 0 auto; margin-top: 2px; }

/* ── calculator card ── */
.iqch-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(6, 12, 26, .4);
}
.iqch-card-body { padding: 30px 34px 16px; }
/* Desktop: cap the card so tall steps (property check, the estimate result)
   scroll inside it instead of stretching the hero; title scrolls with the
   body, the trust footer stays pinned. Mobile keeps natural page flow. */
@media (min-width: 992px) {
  .iqch-card { display: flex; flex-direction: column; max-height: min(84vh, 800px); }
  .iqch-card-body {
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #c9d2de transparent;
  }
  .iqch-card-body::-webkit-scrollbar { width: 8px; }
  .iqch-card-body::-webkit-scrollbar-thumb { background: #c9d2de; border-radius: 4px; }
  .iqch-card-body::-webkit-scrollbar-track { background: transparent; }
  .iqch-card-foot { flex: 0 0 auto; }
}
.iqch-card-title {
  font-family: Poppins, sans-serif; font-size: 1.72rem; font-weight: 800;
  letter-spacing: -.02em; color: #101b30; margin: 0 0 22px;
}

/* card trust footer */
.iqch-card-foot {
  display: flex; align-items: stretch; gap: 0;
  background: #f5f6f8; border-top: 1px solid #e9edf2; padding: 16px 26px;
}
.iqch-foot-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 11px; }
.iqch-foot-ic { width: 28px; height: 28px; flex: 0 0 auto; }
/* FL outline (shared asset, white fill + thin blue stroke designed for dark
   surfaces) — on this light strip: size up + zero-blur shadows to thicken the
   hairline stroke so it holds its own beside the solid shield/star */
.iqch-foot-ic--fl {
  width: 34px; height: 30px; object-fit: contain;
  filter: drop-shadow(0 0 .5px #4d97ff) drop-shadow(0 0 .5px #4d97ff);
}
.iqch-foot-text { display: flex; flex-direction: column; line-height: 1.3; font-size: .84rem; }
.iqch-foot-text strong { color: #26303d; font-weight: 600; }
.iqch-foot-text { color: #77828f; }
.iqch-foot-sep { width: 1px; background: #e3e8ee; margin: 2px 14px; flex: 0 0 auto; }

/* ═══ iq-flow hero chrome ═══ */

/* step progress → icon circles with connector + track segments */
.iqch .iq-flow--hero .iq-progress {
  position: relative; display: flex; gap: 0; margin: 0 0 24px; padding: 0;
}
.iqch .iq-flow--hero .iq-progress::before { /* connector line at circle height */
  content: ""; position: absolute; left: 10%; right: 10%; top: 23px; height: 2px;
  background: #e4e8ef; z-index: 0;
}
.iqch .iq-flow--hero .iq-progress li {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; padding: 0 4px;
  border-bottom: 0; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #9aa3b1; cursor: default;
}
.iqch .iq-flow--hero .iq-progress li::before { /* the circle + icon */
  content: ""; width: 46px; height: 46px; border-radius: 50%;
  background-color: #fff; border: 1.5px solid #dfe4ec;
  background-image: var(--iqch-ic-g);
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  margin-bottom: 10px;
  transition: background-color .2s ease, border-color .2s ease;
}
.iqch .iq-flow--hero .iq-progress li::after { /* the track segment */
  content: ""; align-self: stretch; height: 5px; border-radius: 3px;
  background: #e7ebf2; margin-top: 12px;
  transition: background-color .2s ease;
}
.iqch .iq-flow--hero .iq-progress li.is-active { color: #0f1b2e; }
.iqch .iq-flow--hero .iq-progress li.is-active::before {
  background-color: var(--iqch-blue); border-color: var(--iqch-blue);
  background-image: var(--iqch-ic-w);
  box-shadow: 0 6px 16px rgba(11, 110, 244, .35);
}
.iqch .iq-flow--hero .iq-progress li.is-active::after { background: var(--iqch-blue); }
.iqch .iq-flow--hero .iq-progress li.is-done { color: #46536a; cursor: pointer; }
.iqch .iq-flow--hero .iq-progress li.is-done::before {
  border-color: var(--iqch-blue); background-image: var(--iqch-ic-b);
}
.iqch .iq-flow--hero .iq-progress li.is-done::after { background: #b9d4fb; }

/* per-step icons (gray / white / blue variants) */
.iqch .iq-flow--hero .iq-progress li[data-step="address"] {
  --iqch-ic-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6 10.5V19h12v-8.5'/%3E%3Cpath d='M10 19v-4.5h4V19'/%3E%3C/svg%3E");
  --iqch-ic-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6 10.5V19h12v-8.5'/%3E%3Cpath d='M10 19v-4.5h4V19'/%3E%3C/svg%3E");
  --iqch-ic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ef4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6 10.5V19h12v-8.5'/%3E%3Cpath d='M10 19v-4.5h4V19'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-progress li[data-step="property"] {
  --iqch-ic-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6 10.5V19h12v-8.5'/%3E%3C/svg%3E");
  --iqch-ic-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6 10.5V19h12v-8.5'/%3E%3C/svg%3E");
  --iqch-ic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ef4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5M6 10.5V19h12v-8.5'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-progress li[data-step="openings"] {
  --iqch-ic-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='1'/%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
  --iqch-ic-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='1'/%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
  --iqch-ic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ef4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='1'/%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-progress li[data-step="contact"] {
  --iqch-ic-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5.5 19.5c1.2-3.4 3.6-5 6.5-5s5.3 1.6 6.5 5'/%3E%3C/svg%3E");
  --iqch-ic-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5.5 19.5c1.2-3.4 3.6-5 6.5-5s5.3 1.6 6.5 5'/%3E%3C/svg%3E");
  --iqch-ic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ef4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5.5 19.5c1.2-3.4 3.6-5 6.5-5s5.3 1.6 6.5 5'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-progress li[data-step="estimate"] {
  --iqch-ic-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='M15.7 7.7c-.7-1-2-1.6-3.7-1.6-2.1 0-3.7 1.1-3.7 2.8 0 3.7 7.4 2 7.4 5.7 0 1.7-1.6 2.8-3.7 2.8-1.7 0-3-.6-3.7-1.6'/%3E%3C/svg%3E");
  --iqch-ic-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='M15.7 7.7c-.7-1-2-1.6-3.7-1.6-2.1 0-3.7 1.1-3.7 2.8 0 3.7 7.4 2 7.4 5.7 0 1.7-1.6 2.8-3.7 2.8-1.7 0-3-.6-3.7-1.6'/%3E%3C/svg%3E");
  --iqch-ic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ef4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='M15.7 7.7c-.7-1-2-1.6-3.7-1.6-2.1 0-3.7 1.1-3.7 2.8 0 3.7 7.4 2 7.4 5.7 0 1.7-1.6 2.8-3.7 2.8-1.7 0-3-.6-3.7-1.6'/%3E%3C/svg%3E");
}

/* step 1: label / helper / stacked address form */
.iqch .iq-flow--hero .iq-step { margin-top: 0; }
.iqch .iq-flow--hero .iq-label { font-size: 1.28rem; font-weight: 800; color: #101b30; letter-spacing: -.01em; margin-bottom: 4px; }
.iqch .iq-flow--hero .iq-helper { font-size: .93rem; color: #8d97a6; margin: 0 0 16px; }
.iqch .iq-flow--hero .iq-address-row { flex-direction: column; gap: 0; align-items: stretch; }
.iqch .iq-flow--hero .iq-address-box { margin-bottom: 13px; }
.iqch .iq-flow--hero #iq-step-address .iq-input {
  height: 58px; padding: 0 42px 0 46px; border: 1px solid #dfe5ee; border-radius: 10px;
  font-size: 1.04rem; color: #16202e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b3c2'%3E%3Cpath d='M12 2.5a7 7 0 0 1 7 7c0 5.2-7 12-7 12s-7-6.8-7-12a7 7 0 0 1 7-7zm0 4.6a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 15px center; background-size: 19px 19px;
}
.iqch .iq-flow--hero .iq-input:focus { outline: 2px solid var(--iqch-blue); border-color: var(--iqch-blue); }
/* later-step inputs (gate/manual) stay compact — and never inherit the pin */
.iqch .iq-flow--hero .iq-step:not(#iq-step-address) .iq-input {
  padding: .42rem .6rem; border-radius: 8px; font-size: .92rem;
}
.iqch .iq-flow--hero .iq-secure {
  display: flex; align-items: center; gap: 9px;
  font-size: .89rem; color: #6b7585; margin: 0 0 16px;
}
.iqch .iq-flow--hero .iq-secure svg { width: 17px; height: 17px; flex: 0 0 auto; }
.iqch .iq-flow--hero .iq-btn#iq-address-go {
  width: 100%; height: 58px; border-radius: 10px; border: 0;
  background: var(--iqch-blue); font-size: 1.14rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.iqch .iq-flow--hero .iq-btn#iq-address-go:hover { background: #0a5fd6; box-shadow: 0 8px 22px rgba(11, 110, 244, .35); }
.iqch .iq-flow--hero .iq-btn#iq-address-go:disabled { opacity: .8; }
/* the later-step primaries wear the same blue (not Porto's default teal) */
.iqch .iq-flow--hero .iq-btn.btn-primary {
  background-color: var(--iqch-blue); border-color: var(--iqch-blue); border-radius: 8px;
}
.iqch .iq-flow--hero .iq-btn.btn-primary:hover,
.iqch .iq-flow--hero .iq-btn.btn-primary:focus,
.iqch .iq-flow--hero .iq-btn.btn-primary:active {
  background-color: #0a5fd6; border-color: #0a5fd6;
}
.iqch .iq-flow--hero .iq-how { display: none; } /* the step circles tell this story here */

/* ── compact later steps ──
   Property / Openings / Contact must fit inside the capped card with their
   proceed buttons visible (no lead captured yet = no buried CTA); Estimate is
   allowed to scroll but tightens too. The Address step keeps its generous
   scale — it balances the hero. None of these classes exist on step 1. */
.iqch .iq-flow--hero .iq-step-heading { font-size: 1rem; margin-bottom: .45rem; }
.iqch .iq-flow--hero .iq-card { padding: .65rem .9rem; }
.iqch .iq-flow--hero .iq-hint { font-size: .8rem; margin-top: .45rem; margin-bottom: .45rem; }
.iqch .iq-flow--hero .iq-fineprint { font-size: .72rem; margin-top: .5rem; }

/* property check */
.iqch .iq-flow--hero .iq-map { margin: -.65rem -.9rem .6rem; }
.iqch .iq-flow--hero .iq-map img { height: 108px; }
.iqch .iq-flow--hero .iq-card-address { font-size: .92rem; margin-bottom: .35rem; }
.iqch .iq-flow--hero .iq-prop { padding: .32rem 0; font-size: .92rem; }
.iqch .iq-flow--hero .iq-windzone { margin-top: .5rem; padding-top: .45rem; font-size: .82rem; }
.iqch .iq-flow--hero .iq-condo-note { font-size: .8rem; margin-top: .4rem; }

/* openings */
.iqch .iq-flow--hero .iq-opening { padding: .38rem 0; gap: .55rem; }
.iqch .iq-flow--hero .iq-opening-icon { width: 30px; height: 30px; flex-basis: 30px; }
.iqch .iq-flow--hero .iq-opening-label { font-size: .88rem; flex-basis: 10rem; }
.iqch .iq-flow--hero .iq-stepper button { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
.iqch .iq-flow--hero .iq-count { min-width: 1.4rem; font-size: .9rem; }
.iqch .iq-flow--hero .iq-size { width: 1.65rem; height: 1.65rem; font-size: .72rem; }
.iqch .iq-flow--hero .iq-total { margin-top: .5rem; font-size: .9rem; }

/* contact gate — labels live inside the fields (placeholder + inset icon);
   the real <label> text stays for screen readers via .visually-hidden */
.iqch .iq-flow--hero .iq-step #iq-gate-form .iq-input {
  padding-left: 36px;
  background-repeat: no-repeat; background-position: 11px center; background-size: 16px 16px;
}
.iqch .iq-flow--hero .iq-step #iq-gate-form input[name="name"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b3c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c1.3-3.6 3.9-5.4 7-5.4s5.7 1.8 7 5.4'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-step #iq-gate-form input[name="phone"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b3c2'%3E%3Cpath d='M6.6 3.2c.5-.5 1.3-.5 1.8 0l2.4 2.4c.5.5.5 1.3 0 1.8l-1.3 1.3c-.2.2-.3.6-.1.9a12.5 12.5 0 0 0 5 5c.3.2.7.1.9-.1l1.3-1.3c.5-.5 1.3-.5 1.8 0l2.4 2.4c.5.5.5 1.3 0 1.8l-1.2 1.2c-.9.9-2.2 1.3-3.4.9-2.7-.8-5.3-2.4-7.6-4.7S4.9 9.7 4.1 7c-.4-1.2 0-2.5.9-3.4l1.6-.4z'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-step #iq-gate-form input[name="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b3c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}
.iqch .iq-flow--hero .iq-step #iq-gate-form .iq-input::placeholder { color: #8a94a6; }
.iqch .iq-flow--hero .iq-recap p { margin-bottom: .15rem; font-size: .87rem; }
.iqch .iq-flow--hero .iq-gate-ask { margin: .4rem 0 .3rem; font-size: .95rem; }
.iqch .iq-flow--hero .iq-grid-2 { gap: .4rem; }
.iqch .iq-flow--hero .iq-field { font-size: .8rem; margin-bottom: .25rem; }
.iqch .iq-flow--hero .iq-field .iq-input { margin-top: .15rem; }
.iqch .iq-flow--hero .iq-check { font-size: .82rem; margin: .2rem 0; }
.iqch .iq-flow--hero .iq-windows { margin-top: .35rem; }
.iqch .iq-flow--hero .iq-windows legend { font-size: .8rem; margin-bottom: .25rem; }
.iqch .iq-flow--hero .iq-chip { padding: .24rem .5rem; font-size: .76rem; }
.iqch .iq-flow--hero .iq-btn-wide { margin-top: .5rem; }
.iqch .iq-flow--hero #iq-step-contact .iq-fineprint { margin-top: .35rem; }
.iqch .iq-flow--hero #iq-step-contact .iq-step-heading { margin-bottom: .35rem; }

/* Safety net for short viewports (84vh caps the card well below the step
   heights on 768px-class laptops): the pre-lead proceed buttons stick to the
   bottom of the scrolling body, so content may scroll but the CTA never
   leaves view. The white halo keeps text legible sliding underneath. */
@media (min-width: 992px) {
  .iqch .iq-flow--hero #iq-property-ok,
  .iqch .iq-flow--hero #iq-openings-go,
  .iqch .iq-flow--hero #iq-gate-submit {
    position: sticky; bottom: 0; z-index: 2; width: 100%;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), 0 -14px 18px -6px rgba(255, 255, 255, .9);
  }
}

/* estimate (scroll permitted, still tightened) */
.iqch .iq-flow--hero .iq-result { padding: .9rem .9rem .7rem; }
.iqch .iq-flow--hero .iq-band { font-size: 1.45rem; }
.iqch .iq-flow--hero .iq-band-side { margin-bottom: .55rem; font-size: .9rem; }
.iqch .iq-flow--hero .iq-tier { padding: .34rem .2rem; font-size: .88rem; }
.iqch .iq-flow--hero .iq-permit { margin: .55rem 0 .1rem; font-size: .84rem; }
.iqch .iq-flow--hero .iq-payment { font-size: .95rem; }
.iqch .iq-flow--hero .iq-widen-note { font-size: .78rem; margin-top: .4rem; }
.iqch .iq-flow--hero .iq-disclaimer { font-size: .8rem; margin-top: .6rem; }
.iqch .iq-flow--hero .iq-next { margin-top: .6rem; }
.iqch .iq-flow--hero .iq-confirm-line { margin-bottom: .5rem; font-size: .92rem; }
.iqch .iq-flow--hero .iq-next-heading { margin: .55rem 0 .3rem; }
.iqch .iq-flow--hero .iq-next-steps li { font-size: .9rem; }
.iqch .iq-flow--hero .iq-breakdown { margin-top: .6rem; }
.iqch .iq-flow--hero .iq-item { font-size: .86rem; padding: .32rem 0; }
.iqch .iq-flow--hero .iq-explainer { font-size: .78rem; margin-top: .6rem; }

/* ── trust bar ── */
.iqch-trustbar { background: #111e3c; padding: 21px 0; border-bottom: 2px solid #2fbf7f; }
.iqch-trustbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.iqch-trust { display: flex; align-items: center; gap: 10px; }
.iqch-trust-label { font-size: .95rem; font-weight: 600; color: #fff; white-space: nowrap; }
.iqch-trust-stars { color: #ffc224; font-size: .85rem; letter-spacing: 2px; }
.iqch-trust-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.iqch-trust-ic--mdc {
  width: auto; height: 26px;   /* wide wordmark badge */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 2px rgba(255, 255, 255, 1.65)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}
.iqch-trust-ic--flag { width: 33px; height: 22px; object-fit: cover; border-radius: 2px; outline: 1px solid rgba(255, 255, 255, .25); }
.iqch-trust-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .18); flex: 0 0 auto; }

/* ── responsive ── */
/* large desktop: widen the container FOR THIS HERO ONLY — the theme's default
   cap crams the two columns at full-desktop widths */
@media (min-width: 1400px) {
  .iqch .container { max-width: 1325px; }
}
@media (max-width: 1399.98px) {
  .iqch-card { flex-basis: 560px; }
}
@media (max-width: 1199.98px) {
  .iqch-row { gap: 32px; }
  .iqch-card { flex-basis: 500px; }
}
@media (max-width: 991.98px) {
  .iqch-hero { padding: 44px 0 52px; }
  .iqch-h1 { white-space: normal; }
  .iqch-row { flex-direction: column; }
  .iqch-card { flex-basis: auto; width: 100%; max-width: 660px; margin: 0 auto; }
  .iqch-qa { max-width: none; }
  .iqch-trustbar-row { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .iqch-trust-sep:nth-of-type(2) { display: none; }
}
@media (max-width: 767.98px) {
  /* compress the left stack so the calculator card crests the fold on most
     phone heights — smaller type scale, one-row benefits, tighter QA card */
  .iqch-hero { padding: 24px 0 36px; }
  .iqch-row { gap: 22px; }
  .iqch-eyebrow { font-size: .7rem; margin-bottom: 8px; }
  .iqch-h1 { font-size: 1.88rem; margin-bottom: 11px; }
  .iqch-sub { font-size: .95rem; line-height: 1.45; margin-bottom: 14px; }

  .iqch-benefits { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin-bottom: 16px; }
  .iqch-benefit { gap: 7px; }
  .iqch-benefit-sep { display: none; }
  .iqch-benefit-ic { width: 26px; height: 26px; }
  .iqch-benefit-text span { font-size: .64rem; }
  .iqch-benefit-text strong { font-size: .82rem; }

  .iqch-qa { padding: 13px 14px 12px; border-radius: 10px; }
  .iqch-qa-label { font-size: .66rem; margin-bottom: 8px; }
  .iqch-qa-label svg { width: 13px; height: 13px; }
  .iqch-qa-summary { font-size: .88rem; line-height: 1.45; margin-bottom: 10px; }
  .iqch-qa-metrics { margin-bottom: 10px; border-radius: 8px; }
  .iqch-qa-metric { padding: 9px 3px 8px; }
  .iqch-qa-val { font-size: .92rem; letter-spacing: -.01em; }
  .iqch-qa-key { font-size: .56rem; letter-spacing: .06em; margin-top: 3px; }
  .iqch-qa-note { font-size: .76rem; line-height: 1.45; gap: 9px; }
  .iqch-qa-note img { width: 26px; height: 26px; margin-top: 1px; }

  .iqch-card-body { padding: 22px 20px 22px; }
  .iqch-card-foot { padding: 14px 14px; }
  .iqch-foot-sep { margin: 2px 8px; }
  .iqch-foot-text { font-size: .78rem; }
  .iqch .iq-flow--hero .iq-progress li { font-size: .6rem; letter-spacing: .04em; }
  .iqch .iq-flow--hero .iq-progress li::before { width: 38px; height: 38px; background-size: 18px 18px; }
  .iqch .iq-flow--hero .iq-progress::before { top: 19px; }
  .iqch-trustbar-row { flex-direction: column; gap: 10px; }
  .iqch-trust-sep { display: none; }
}

/* extra-small: keep every opening row on ONE line — the label is the flexible
   column (its text may wrap inside itself), the stepper + size controls never
   drop below. Sizes derived from the zoom:.8 preview, done for real. */
@media (max-width: 575.98px) {
  .iqch .iq-flow--hero .iq-opening { flex-wrap: nowrap; gap: .45rem; }
  .iqch .iq-flow--hero .iq-opening-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .iqch .iq-flow--hero .iq-opening-label { flex: 1 1 auto; min-width: 0; font-size: .82rem; line-height: 1.25; }
  .iqch .iq-flow--hero .iq-stepper { gap: .3rem; }
  .iqch .iq-flow--hero .iq-stepper button { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
  .iqch .iq-flow--hero .iq-count { min-width: 1.2rem; font-size: .88rem; }
  .iqch .iq-flow--hero .iq-sizes { gap: .2rem; }
  .iqch .iq-flow--hero .iq-size { width: 1.55rem; height: 1.55rem; font-size: .68rem; }
  .iqch .iq-flow--hero .iq-total { font-size: .84rem; }
}