/* ATTIC BREEZE - HOMEOWNER VENTILATION CALCULATOR, HYBRID PAGE
 * /homeowners/ventilation-calculator/  (page 8863)              2026-08-25
 *
 * ONE stylesheet for the whole homeowner calculator experience: the Elementor
 * bands around the tool AND the sage repaint of the tool itself.
 *
 * WHY A NEW FILE RATHER THAN AN EDIT
 * abv-ui.css loads on 8863, 8864 AND 8897. Editing it to make the homeowner
 * calculator sage would repaint the professional calculator and ProFlow. This
 * file is enqueued ONLY on 8863 (see ab-hocalc-hybrid.php) and loads AFTER
 * abv-app.css and abv-ui.css, so ordering does the work a specificity war
 * would.
 *
 * THE SAGE REPAINT IS A TOKEN FLIP, NOT A HEX HUNT
 * Every orange that reaches a homeowner resolves through
 * var(--abv-orange) (abv-app.css) or var(--abvx-orange) (abv-ui.css). The 53
 * literal #5C9D5E declarations in abv-app.css are ALL inside
 * [data-abv-mode="professional"] selectors, which cannot match here. So part 7
 * redefines four custom properties and the calculator turns sage. The handful
 * of literal warm values that are NOT behind a token (three #FFFFFF plates and
 * the rgba(92,157,94,..) glows baked into box-shadows) are restated in 7b -
 * that list was produced by parsing the two stylesheets, not by eye.
 *
 * CASCADE RULE THIS SITE KEEPS RE-LEARNING
 * .elementor-kit-1333 button:hover,:focus { background:#051124; color:#fff }
 * is (0,2,1). Any rule that paints a button here must be >= that AND must
 * restate `color` on every state, or a focused button goes white-on-white.
 * Every button rule below states background, border-color AND color together.
 *
 * SAGE IS BACKGROUND-DEPENDENT - this is not interchangeable:
 *   #5C9D5E = sage on LIGHT (white on it = 5.05:1, passes AA)
 *   #5C9D5E = sage on NAVY  (5.79:1)   -- white on #5C9D5E is only 3.25:1
 * So fills and light-ground text use #5C9D5E; navy-ground text uses #5C9D5E.
 *
 * Kill switch: update_option('abv_hlook_enabled','0');
 */

/* ==================================================================== *
 * 1. TOKENS
 * ==================================================================== */
body.ab-hcx {
  --abhx-navy:      #051124;
  --abhx-navy-2:    #051124;
  --abhx-navy-lift: #051124;
  --abhx-ink:       #051124;
  --abhx-gray:      rgba(5,17,36,.72);
  --abhx-panel:     #FFFFFF;
  --abhx-line:      rgba(5,17,36,.14);
  --abhx-rule:      rgba(5,17,36,.14);
  --abhx-white:     #FFFFFF;

  --abhx-sage:      #5C9D5E;   /* accent + text on navy */
  --abhx-sage-text: #5C9D5E;   /* text + fills on light */
  --abhx-sage-lt:   #5C9D5E;   /* eyebrows on navy */
  --abhx-sage-tint: rgba(92,157,94,.08);
  --abhx-sage-deep: #051124;   /* hover on a sage fill */

  --abhx-font: 'Poppins', 'Poppins metric fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --abhx-ease: cubic-bezier(.2,.7,.3,1);
  --abhx-radius: 14px;
  --abhx-shadow: 0 12px 30px rgba(5,17,36,.11);
}

/* ==================================================================== *
 * 2. POPPINS, EVERYWHERE - no accidental system-font mixture
 *
 * The kit body font is already Poppins and the calculator's own --abv-font is
 * Poppins, but a handful of app elements inherit from a bare button or input,
 * which UA stylesheets set to the system font. These are the ones that drifted.
 * ==================================================================== */
body.ab-hcx .elementor-9063,
body.ab-hcx .elementor-9063 .elementor-widget-heading .elementor-heading-title,
body.ab-hcx .elementor-9063 .elementor-widget-text-editor,
body.ab-hcx .elementor-9063 .elementor-widget-button .elementor-button,
body.ab-hcx .elementor-9063 .e-n-accordion-item-title-text,
body.ab-hcx .abhx-card,
body.ab-hcx .abhx-card button,
body.ab-hcx .abv-root,
body.ab-hcx .abv-root button,
body.ab-hcx .abv-root input,
body.ab-hcx .abv-root select,
body.ab-hcx .abv-root textarea,
body.ab-hcx .abv-root legend,
body.ab-hcx .abv-root summary { font-family: var(--abhx-font); }
/* Engineering values stay monospace on purpose - do not sweep those. */
body.ab-hcx .abv-root code,
body.ab-hcx .abv-root kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ==================================================================== *
 * 3. SHARED PAGE TYPE
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-eyebrow .elementor-heading-title {
  color: var(--abhx-sage-text);
}
body.ab-hcx .elementor-9063 .abhx-navy .abhx-eyebrow .elementor-heading-title,
body.ab-hcx .elementor-9063 .ab-hc-hero .abhx-eyebrow .elementor-heading-title {
  color: var(--abhx-sage-lt);
}
body.ab-hcx .elementor-9063 .abhx-h2 .elementor-heading-title { text-wrap: balance; }

/* ==================================================================== *
 * 4. HERO
 *
 * The hero asset (Homeowner-Calculator-Hero-Image-Attic-Breeze.png, media
 * 8923) is ALREADY a composed split: flat navy across the left ~48% and the
 * aerial roof photograph on the right. So the scrim here is deliberately much
 * lighter than the shared .ab-hero-photo pattern - the copy is sitting on the
 * artwork's own navy, and double-darkening it only buries the photograph the
 * brief asked to let carry weight. Alpha is 0 by 58%, so the roof is untouched.
 * ==================================================================== */
/* 2026-09-01b  BACKGROUND SIZE AND POSITION ARE ELEMENTOR'S, NOT THIS FILE'S.
   They used to be declared here and they NEVER APPLIED. Elementor emits the
   container background at
     .elementor-9063 .elementor-element.elementor-element-hohero:not(.elementor-motion-effects-element-type-background)
   and the :not() argument counts, so that selector is (0,4,0) - while this
   file's (0,3,1) loses. Measured: `background-position` computed to `100% 50%`
   at 390, 767, 768, 1024, 1025, 1440 and 1905 alike, i.e. Elementor's own
   `center right`, while the two media-query values below said 76% / 78%. The
   scrims in the same blocks DID apply, which is what hid it.
   Removed rather than out-specified: the values now live on the element's own
   Background controls, per device, where the editor can reach them. */
body.ab-hcx .elementor-9063 .ab-hero-photo {
  position: relative; overflow: hidden; z-index: 0;
}
body.ab-hcx .elementor-9063 .ab-hero-photo > * { position: relative; z-index: 2; }
body.ab-hcx .elementor-9063 .ab-hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(5,17,36,.78) 0%, rgba(5,17,36,.55) 24%,
    rgba(5,17,36,.22) 42%, rgba(5,17,36,0) 58%);
}
/* The one sage detail in the hero: a hairline that hands off to the page. */
body.ab-hcx .elementor-9063 .ab-hero-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  z-index: 3; background: var(--abhx-sage);
}
/* The H1 accent word. The site-wide .ab-hero-promise rule paints em/strong
   orange; this is the homeowner channel, so it is sage on navy (5.79:1). */
body.ab-hcx .elementor-9063 .ab-hero-promise em,
body.ab-hcx .elementor-9063 .ab-hero-promise strong,
body.ab-hcx .elementor-9063 .abhx-hero__h1 em,
body.ab-hcx .elementor-9063 .abhx-hero__h1 strong {
  color: var(--abhx-sage); font-style: normal; font-weight: inherit;
}
body.ab-hcx .elementor-9063 .abhx-hero__h1 .elementor-heading-title { text-wrap: balance; }
body.ab-hcx .elementor-9063 .abhx-hero__deck,
body.ab-hcx .elementor-9063 .abhx-hero__deck p {
  text-shadow: 0 1px 12px rgba(5,17,36,.45);
}

/* Sage pill CTA. #5C9D5E fill so white type clears AA at 5.05:1. */
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button,
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button:visited {
  background-color: var(--abhx-sage-text);
  border: 2px solid var(--abhx-sage-text);
  color: var(--abhx-white);
  transition: background-color .18s var(--abhx-ease), border-color .18s var(--abhx-ease),
              color .18s var(--abhx-ease), transform .18s var(--abhx-ease);
}
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button:hover,
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button:focus,
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button:focus-visible,
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button:active {
  background-color: var(--abhx-sage-deep);
  border-color: var(--abhx-sage-deep);
  color: var(--abhx-white);
  transform: translateY(-1px);
}
body.ab-hcx .elementor-9063 .abhx-cta .elementor-button:focus-visible {
  outline: 3px solid var(--abhx-sage-lt); outline-offset: 3px;
}
/* Ghost pill on navy. */
body.ab-hcx .elementor-9063 .abhx-cta--ghost .elementor-button,
body.ab-hcx .elementor-9063 .abhx-cta--ghost .elementor-button:visited {
  background-color: transparent;
  border: 2px solid rgba(255,255,255,.42);
  color: var(--abhx-white);
}
body.ab-hcx .elementor-9063 .abhx-cta--ghost .elementor-button:hover,
body.ab-hcx .elementor-9063 .abhx-cta--ghost .elementor-button:focus,
body.ab-hcx .elementor-9063 .abhx-cta--ghost .elementor-button:focus-visible {
  background-color: var(--abhx-white);
  border-color: var(--abhx-white);
  color: var(--abhx-navy);
}

@media (max-width:1024px) {
  /* position/size: Elementor's, per device - see the note at the top of 4. */
  /* The wash is relaxed towards the bottom so the property reads instead of
     sitting under a flat veil. It stays >= .74 for the whole vertical band the
     centred copy occupies (measured 130-430 of a 560px hero at 768). */
  body.ab-hcx .elementor-9063 .ab-hero-photo::before {
    background: linear-gradient(180deg,
      rgba(5,17,36,.92) 0%, rgba(5,17,36,.86) 38%,
      rgba(5,17,36,.74) 62%, rgba(5,17,36,.46) 82%, rgba(5,17,36,.24) 100%);
  }
}
@media (max-width:767px) {
  /* NO SCRIM ON A PHONE. The navy-to-photograph transition is IN THE ARTWORK
     (media 9013, a 700x1100 portrait crop that is solid #051124 to y500 and
     dissolves into the aerial house over the next 130px) - the same
     construction 8770 and 4887 use. A .90 veil over it would be a second,
     wrongly-aimed wash and is what made the house unreadable here. The copy
     sits on the container's own #051124, which is the same navy the top of the
     file is, so there is no edge to hide. */
  body.ab-hcx .elementor-9063 .ab-hero-photo::before { background: none; }
  body.ab-hcx .elementor-9063 .abhx-cta .elementor-button { width: 100%; justify-content: center; }
}

/* ==================================================================== *
 * 5. REVEAL CARDS - shared by the symptom band and the appearance band
 *
 * Progressive enhancement, deliberately. Elementor owns the content (image,
 * heading, copy, link) so marketing can edit every word; abv-hlook.js upgrades
 * the card into a real disclosure. With JS off, or before the script runs,
 * EVERY card is fully expanded and completely readable - the reveal is an
 * enhancement over content that was always there, never a gate in front of it.
 *
 * A11y anatomy (built by the JS, see Cards.upgrade):
 *   .abhx-card                       the container Elementor wrote
 *     .abhx-card__act  <button aria-expanded aria-controls>   the only control
 *     .abhx-rev        the panel, id-matched to aria-controls
 * The whole card forwards clicks to that button, so mouse and touch get a big
 * target while keyboard and AT get one honest, labelled control.
 * ==================================================================== */
body.ab-hcx .abhx-card {
  position: relative;
  background: var(--abhx-white);
  border: 1px solid var(--abhx-line);
  border-radius: var(--abhx-radius);
  overflow: hidden;
  transition: transform .22s var(--abhx-ease), border-color .22s var(--abhx-ease),
              box-shadow .22s var(--abhx-ease);
}
body.ab-hcx .abhx-card.is-armed { cursor: pointer; }

/* One image system for the whole page: 4:3, cover, same radius treatment. */
body.ab-hcx .abhx-card .elementor-widget-image { margin-bottom: 0; }
body.ab-hcx .abhx-card .elementor-widget-image img {
  display: block; width: 100%; aspect-ratio: 4 / 3; height: auto;
  object-fit: cover;
  transition: transform .5s var(--abhx-ease);
}
body.ab-hcx .abhx-card .elementor-widget-image { overflow: hidden; }

@media (hover:hover) and (pointer:fine) {
  body.ab-hcx .abhx-card:hover {
    transform: translateY(-4px);
    border-color: var(--abhx-sage);
    box-shadow: var(--abhx-shadow);
  }
  body.ab-hcx .abhx-card:hover .elementor-widget-image img { transform: scale(1.03); }
}
body.ab-hcx .abhx-card:focus-within {
  border-color: var(--abhx-sage);
  box-shadow: var(--abhx-shadow);
}

/* The control. It carries the card's accessible name, so the visible title
   text lives INSIDE it and the decorative hint beside it is aria-hidden. */
body.ab-hcx .abhx-card__act {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  /* `font: inherit` does NOT carry text-transform or letter-spacing, and
     kit-1333 styles bare buttons as uppercase with 2.4px tracking. Without
     these two lines every card title rendered as "UPSTAIRS STAYS HOT" - a
     label, not a headline. Measured, not guessed: the h3 computed
     text-transform:none while the button inside it computed uppercase. */
  text-transform: inherit;
  letter-spacing: inherit;
  white-space: normal;              /* a bare button inherits nowrap here too */
  cursor: pointer;
}
body.ab-hcx .abhx-card__act:hover,
body.ab-hcx .abhx-card__act:focus,
body.ab-hcx .abhx-card__act:focus-visible,
body.ab-hcx .abhx-card__act:active {
  background: none; color: inherit;   /* kit-1333 button:hover is (0,2,1) */
}
body.ab-hcx .abhx-card__act:focus-visible { outline: none; }
/* Ring on the FACE, not the button - see the flip-card lesson. */
body.ab-hcx .abhx-card:has(.abhx-card__act:focus-visible) {
  outline: 3px solid var(--abhx-sage-text); outline-offset: 2px;
}
body.ab-hcx .abhx-card__hint {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--abhx-sage-tint);
  color: var(--abhx-sage-text);
  transition: background-color .2s var(--abhx-ease), transform .28s var(--abhx-ease);
}
body.ab-hcx .abhx-card__hint svg { width: 15px; height: 15px; display: block; }
body.ab-hcx .abhx-card[data-open="1"] .abhx-card__hint { transform: rotate(180deg); }
@media (hover:hover) and (pointer:fine) {
  body.ab-hcx .abhx-card:hover .abhx-card__hint {
    background: var(--abhx-sage-text); color: var(--abhx-white);
  }
}

/* THE PANEL. grid-template-rows 0fr -> 1fr needs no measured height, so a copy
   edit in Elementor can never desync a hardcoded max-height. */
body.ab-hcx .abhx-rev {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--abhx-ease);
}
body.ab-hcx .abhx-rev > .abhx-rev__in { overflow: hidden; min-height: 0; }
body.ab-hcx .abhx-card[data-open="1"] .abhx-rev { grid-template-rows: 1fr; }
body.ab-hcx .abhx-card:focus-within .abhx-rev { grid-template-rows: 1fr; }
@media (hover:hover) and (pointer:fine) {
  body.ab-hcx .abhx-card:hover .abhx-rev { grid-template-rows: 1fr; }
}
/* Not yet upgraded, or JS off: everything is open and static. */
body.ab-hcx .abhx-card:not(.is-armed) .abhx-rev { grid-template-rows: 1fr; }

@media (prefers-reduced-motion: reduce) {
  body.ab-hcx .abhx-card,
  body.ab-hcx .abhx-card .elementor-widget-image img,
  body.ab-hcx .abhx-rev,
  body.ab-hcx .abhx-card__hint { transition: none; }
  body.ab-hcx .abhx-card:hover { transform: none; }
  body.ab-hcx .abhx-card:hover .elementor-widget-image img { transform: none; }
}

/* ==================================================================== *
 * 6. SYMPTOM BAND - "Does this sound like your house?"
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-sym__body { padding: 26px 26px 4px; }
body.ab-hcx .elementor-9063 .abhx-sym__body .elementor-widget:last-child { margin-bottom: 0; }
body.ab-hcx .elementor-9063 .abhx-rev__label .elementor-heading-title {
  color: var(--abhx-sage-text);
}
/* The transition into the calculator: an editorial callout with a sage
   keyline, not a boxed text widget. */
body.ab-hcx .elementor-9063 .abhx-tie {
  border-left: 4px solid var(--abhx-sage);
  padding-left: 22px;
}
body.ab-hcx .elementor-9063 .abhx-tie .elementor-heading-title { text-wrap: balance; }
@media (max-width:767px) {
  body.ab-hcx .elementor-9063 .abhx-tie { padding-left: 16px; }
  body.ab-hcx .elementor-9063 .abhx-sym__body { padding: 20px 20px 4px; }
}

/* ==================================================================== *
 * 7. THE SAGE REPAINT OF THE CALCULATOR
 *
 * Four properties. The scope is the tool and the modal shell only - never a
 * body-level selector that could reach the site header or footer.
 * ==================================================================== */
body.ab-hcx .abv-root,
body.ab-hcx .abvm,
body.ab-hcx .abv-root .abv-plan,
body.ab-hcx .abv-root [data-abv-screen] {
  --abv-orange:     #5C9D5E;   /* abv-app.css accent, on light grounds */
  --abv-tint:       rgba(92,157,94,.08);
  --abvx-orange:    #5C9D5E;   /* abv-ui.css interaction accent */
  --abvx-orange-d:  #051124;   /* its hover/active partner */
}

/* 7b. The literal warm values that are NOT behind a token.
   Produced by parsing abv-app.css + abv-ui.css for #FFFFFF and
   rgba(92,157,94,..); each one is restated whole because it lives inside a
   box-shadow list. */
body.ab-hcx .abv-root .abv-wizq .abv-pick.is-on,
body.ab-hcx .abv-root .abv-picks .abv-pick.is-on,
body.ab-hcx .abv-root .abv-wizq .abv-pick[aria-pressed="true"],
body.ab-hcx .abv-root .abv-picks .abv-pick[aria-pressed="true"] {
  background: var(--abhx-sage-tint);
  color: var(--abhx-navy);
  border: 2px solid var(--abhx-sage-text);
  box-shadow: inset 4px 0 0 0 var(--abhx-sage-text), 0 0 0 3px rgba(92,157,94,.16);
}
body.ab-hcx .abv-root .abv-wizq .abv-pick.is-on:focus:not(:focus-visible),
body.ab-hcx .abv-root .abv-picks .abv-pick.is-on:focus:not(:focus-visible) {
  background: var(--abhx-sage-tint);
  color: var(--abhx-navy);
}
body.ab-hcx .abv-root .abv-wizq .abv-pick.is-on:hover,
body.ab-hcx .abv-root .abv-picks .abv-pick.is-on:hover {
  background: var(--abhx-sage-tint);
  color: var(--abhx-navy);
  border-color: var(--abhx-sage-text);
  box-shadow: inset 4px 0 0 0 var(--abhx-sage-text), 0 0 0 3px rgba(92,157,94,.24),
              0 6px 16px rgba(92,157,94,.20);
}
body.ab-hcx .abv-root .abv-matches .abv-bp.is-on {
  border-color: var(--abhx-sage-text);
  box-shadow: inset 0 0 0 2px var(--abhx-sage-text), 0 6px 18px rgba(92,157,94,.20);
}
/* The selection tick. WCAG 1.4.11 is satisfied by the MARK, so the mark has to
   clear 3:1 against its own disc: white on #5C9D5E is 5.05:1. */
body.ab-hcx .abv-root .abv-pick.is-on .abv-pick__check,
body.ab-hcx .abv-root .abv-matches .abv-bp.is-on .abv-bp__check,
body.ab-hcx .abv-root .abv-payoff__tick {
  background: var(--abhx-sage-text);
  color: var(--abhx-white);
}
body.ab-hcx .abv-root .abv-payoff { color: var(--abhx-sage-text); }

/* Answer CARDS (the roof/pitch/placement tiles are .abv-card, not .abv-pick).
   abv-app.css paints their selected edge from var(--abv-orange), which part 7
   already flipped; these two rules only add the tint plate and restate colour
   so a focused card cannot be taken by the kit. */
body.ab-hcx .abv-root .abv-card.is-on,
body.ab-hcx .abv-root .abv-card:has(> input:checked) {
  background: var(--abhx-sage-tint);
  color: var(--abhx-navy);
}
body.ab-hcx .abv-root .abv-card:hover,
body.ab-hcx .abv-root .abv-card:focus-within { color: var(--abhx-navy); }

/* Primary/ghost buttons inside the tool. Restate colour on every state the
   kit targets - this is the white-on-white bug, defused. */
body.ab-hcx .abv-root .abv-btn,
body.ab-hcx .abv-root .abv-btn:visited {
  background: var(--abhx-sage-text);
  border-color: var(--abhx-sage-text);
  color: var(--abhx-white);
}
body.ab-hcx .abv-root .abv-btn:hover,
body.ab-hcx .abv-root .abv-btn:focus,
body.ab-hcx .abv-root .abv-btn:focus-visible,
body.ab-hcx .abv-root .abv-btn:active {
  background: var(--abhx-sage-deep);
  border-color: var(--abhx-sage-deep);
  color: var(--abhx-white);
}
body.ab-hcx .abv-root .abv-btn[disabled],
body.ab-hcx .abv-root .abv-btn[aria-disabled="true"] {
  background: #FFFFFF; border-color: rgba(5,17,36,.14); color: rgba(5,17,36,.40);
}
body.ab-hcx .abv-root .abv-btn--ghost,
body.ab-hcx .abv-root .abv-btn--ghost:visited {
  background: transparent;
  border-color: var(--abhx-sage-text);
  color: var(--abhx-sage-text);
}
body.ab-hcx .abv-root .abv-btn--ghost:hover,
body.ab-hcx .abv-root .abv-btn--ghost:focus,
body.ab-hcx .abv-root .abv-btn--ghost:focus-visible {
  background: var(--abhx-sage-text);
  border-color: var(--abhx-sage-text);
  color: var(--abhx-white);
}

/* Progress. abv-app.css paints .abv-steps__label from the token; the bar fill
   is the one piece that also needs the tint behind it stated. */
body.ab-hcx .abv-root .abv-stepbar__fill,
body.ab-hcx .abv-root .abv-prog__fill,
body.ab-hcx .abv-root [class*="stepbar"] [class*="fill"] {
  background: var(--abhx-sage-text);
}

/* Focus, one treatment across the tool. Sage at 3px reads as intent; the site
   default blue would look like a different product. */
body.ab-hcx .abv-root :focus-visible {
  outline: 3px solid var(--abhx-sage-text);
  outline-offset: 2px;
}

/* ==================================================================== *
 * 8. RESULT - polish, not restructure
 *
 * The engine result markup is abv-result.js's business. What follows only
 * strengthens the hierarchy the brief asked for: the QUANTITY is the loudest
 * thing on the screen, the system name second, engineering below that.
 * ==================================================================== */
body.ab-hcx .abv-root .abv-plan__head {
  background: var(--abhx-navy);
  color: var(--abhx-white);
  border-radius: var(--abhx-radius) var(--abhx-radius) 0 0;
}
body.ab-hcx .abv-root .abv-plan__head .abv-eyebrow { color: var(--abhx-sage-lt); }
body.ab-hcx .abv-root .abv-plan__head .abv-plan__title,
body.ab-hcx .abv-root .abv-plan__head .abv-plan__addr b { color: var(--abhx-white); }
body.ab-hcx .abv-root .abv-plan__head .abv-plan__addr span { color: rgba(255,255,255,.76); }
body.ab-hcx .abv-root .abv-plan__head .abv-payoff { color: var(--abhx-sage-lt); }
body.ab-hcx .abv-root .abv-plan__head .abv-payoff__tick {
  background: var(--abhx-sage); color: var(--abhx-navy);
}
body.ab-hcx .abv-root .abv-rec__qty {
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--abhx-navy);
}
body.ab-hcx .abv-root .abv-rec__qty b {
  display: inline-block;
  font-size: clamp(52px, 7vw, 76px);
  font-weight: 800;
  color: var(--abhx-sage-text);
}
body.ab-hcx .abv-root .abv-stats .abv-stat { border-top-color: var(--abhx-sage); }

/* The appearance callout under the result. Inserted by abv-hlook.js, styled
   here.

   2026-09-01: the "See how it looks" anchor was removed from the markup, so
   the .abhx-jump__go rules that used to live here went with it - a dead
   selector is how a removed control quietly comes back. The block is copy
   only now, which is why the bottom padding is shorter than the top: the last
   line is body text carrying its own half-leading, and 16px under it left a
   visible shelf where the link used to sit. */
body.ab-hcx .abv-root .abhx-jump {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 16px 18px 12px;
  background: var(--abhx-sage-tint);
  border-left: 4px solid var(--abhx-sage-text);
  border-radius: 0 8px 8px 0;
  font-size: 15.5px; line-height: 1.55; color: var(--abhx-navy);
}
body.ab-hcx .abv-root .abhx-jump b { font-weight: 700; }

/* ==================================================================== *
 * 9. APPEARANCE BAND - "You still get a say in how it looks"
 *
 * Cards are Elementor content (part 5 gives them the reveal). Everything here
 * is the result-reactive layer: a status chip, a fan count, and an apply
 * control, all written by abv-hlook.js from engine numbers.
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-look__body { padding: 24px 26px 6px; }
body.ab-hcx .elementor-9063 .abhx-look__body .elementor-widget:last-child { margin-bottom: 0; }
body.ab-hcx .elementor-9063 .abhx-look__tag .elementor-heading-title {
  color: var(--abhx-sage-text);
}
body.ab-hcx .elementor-9063 .abhx-look__fit p {
  border-top: 1px solid var(--abhx-line);
  padding-top: 14px; margin: 0;
  font-size: 15px; color: var(--abhx-gray);
}
body.ab-hcx .elementor-9063 .abhx-look__fit strong { color: var(--abhx-navy); font-weight: 700; }
body.ab-hcx .elementor-9063 .abhx-look__link .elementor-button,
body.ab-hcx .elementor-9063 .abhx-look__link .elementor-button:visited {
  background: transparent; border: 0; padding: 0;
  color: var(--abhx-sage-text); font-weight: 700; font-size: 15px;
  border-bottom: 2px solid var(--abhx-sage-lt); border-radius: 0;
}
body.ab-hcx .elementor-9063 .abhx-look__link .elementor-button:hover,
body.ab-hcx .elementor-9063 .abhx-look__link .elementor-button:focus,
body.ab-hcx .elementor-9063 .abhx-look__link .elementor-button:focus-visible {
  background: transparent; color: var(--abhx-sage-deep);
  border-bottom-color: var(--abhx-sage-deep);
}

/* --- the result-reactive chip ---------------------------------------- */
body.ab-hcx .abhx-look__state {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 26px 16px;
}
body.ab-hcx .abhx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
body.ab-hcx .abhx-chip svg { width: 13px; height: 13px; display: block; }
body.ab-hcx .abhx-chip--best  { background: var(--abhx-sage-text); color: var(--abhx-white); }
/* MEASURED: #5C9D5E on the sage tint is 4.34:1 - just under the 4.5:1 this
   11.5px/700 label needs. The deep sage is 5.85:1 on the same plate. Sage on
   sage is the one pairing where the light-ground hex is not dark enough. */
body.ab-hcx .abhx-chip--works { background: var(--abhx-sage-tint); color: var(--abhx-sage-deep);
                                box-shadow: inset 0 0 0 1px var(--abhx-sage-lt); }
body.ab-hcx .abhx-chip--alt   { background: var(--abhx-panel); color: var(--abhx-navy-2);
                                box-shadow: inset 0 0 0 1px var(--abhx-rule); }
body.ab-hcx .abhx-chip--na    { background: transparent; color: var(--abhx-gray);
                                box-shadow: inset 0 0 0 1px var(--abhx-rule); }
body.ab-hcx .abhx-look__qty {
  font-size: 14.5px; font-weight: 700; color: var(--abhx-navy);
}
body.ab-hcx .abhx-look__qty span { font-weight: 400; color: var(--abhx-gray); }

/* Compatible options float ahead of incompatible ones. `order` only - the DOM
   is never reshuffled, so Elementor keeps owning the content. */
body.ab-hcx .abhx-look { order: 2; }
body.ab-hcx .abhx-look.is-current { order: 0; }
body.ab-hcx .abhx-look.is-works   { order: 1; }
body.ab-hcx .abhx-look.is-na      { order: 3; }
body.ab-hcx .abhx-look.is-na .elementor-widget-image img { filter: saturate(.55); opacity: .82; }
body.ab-hcx .abhx-look.is-current { border-color: var(--abhx-sage-text); }
body.ab-hcx .abhx-look.is-current::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--abhx-sage-text); z-index: 3;
}

/* The apply control. Sage fill, white type, colour restated on every state. */
body.ab-hcx .abhx-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; margin: 0 26px 22px; padding: 12px 20px;
  border: 2px solid var(--abhx-sage-text); border-radius: 999px;
  background: var(--abhx-sage-text); color: var(--abhx-white);
  font-family: var(--abhx-font); font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; white-space: normal;
  cursor: pointer;
  transition: background-color .18s var(--abhx-ease), border-color .18s var(--abhx-ease),
              color .18s var(--abhx-ease);
}
body.ab-hcx .abhx-apply:hover,
body.ab-hcx .abhx-apply:focus,
body.ab-hcx .abhx-apply:focus-visible,
body.ab-hcx .abhx-apply:active {
  background: var(--abhx-sage-deep); border-color: var(--abhx-sage-deep);
  color: var(--abhx-white);
}
body.ab-hcx .abhx-apply:focus-visible { outline: 3px solid var(--abhx-sage-lt); outline-offset: 2px; }
body.ab-hcx .abhx-apply--on,
body.ab-hcx .abhx-apply--on:hover,
body.ab-hcx .abhx-apply--on:focus {
  background: transparent; border-color: var(--abhx-sage-text);
  color: var(--abhx-sage-text); cursor: default;
}

/* ==================================================================== *
 * 10. PRE-FOOTER - "Rather have someone look at it?"
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-help { position: relative; overflow: hidden; }

/* THE SCRIM.
   The copy column is 50% of a 1240 boxed inner, so its right edge lands on
   exactly 50% of the viewport at every width >= 1240 - which is what lets these
   stops be chosen rather than guessed. Held at .70 through the text, then
   dropped hard so the installer on the right is under almost nothing.
   Measured against the two grounds the text actually crosses: the light hallway
   wall (232,229,224) composites to 8.2:1 at .70, and the bright door frame at
   the 50% mark to 6.2:1 at .64. Both clear AA for body copy.
   Do NOT take the left stops back up towards opaque - the homeowner stands at
   19-43% of this file and burying him is the whole thing this replaced. */
body.ab-hcx .elementor-9063 .abhx-help::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(5,17,36,.90) 0%,  rgba(5,17,36,.84) 28%,
    rgba(5,17,36,.70) 46%, rgba(5,17,36,.38) 62%,
    rgba(5,17,36,.12) 78%, rgba(5,17,36,0)   90%);
}
body.ab-hcx .elementor-9063 .abhx-help > .e-con-inner,
body.ab-hcx .elementor-9063 .abhx-help > * { position: relative; z-index: 2; }
body.ab-hcx .elementor-9063 .abhx-help .abhx-h2 .elementor-heading-title { color: var(--abhx-white); }

/* Above 1024 the stacked image is not in play. Elementor's own
   .elementor-hidden-desktop covers this; the belt is here so the rule survives
   a change to the kit's breakpoint set. */
body.ab-hcx .elementor-9063 .abhc-help__img { display: none; }

@media (max-width:1024px) {
  /* Below the desktop breakpoint `cover` stops being a crop and starts being an
     arbitrary slice, so the photograph stops being a background and becomes a
     real image stacked above the copy - at its own 16:9, no crop in either
     axis, both people present. The container's navy then reads as the content
     block underneath it.
     Three classes are named on the element deliberately: Elementor's own
     container background rule is (0,4,0) and a (0,3,1) selector loses to it. */
  body.ab-hcx .elementor-9063 .abhx-help.abhx-navy.e-no-lazyload { background-image: none; }
  body.ab-hcx .elementor-9063 .abhx-help::before { display: none; }

  body.ab-hcx .elementor-9063 .abhc-help__img { display: block; position: relative; width: 100%; }
  body.ab-hcx .elementor-9063 .abhc-help__img .elementor-widget-container { line-height: 0; }
  body.ab-hcx .elementor-9063 .abhc-help__img img {
    display: block; width: 100%; height: auto; max-width: none;
  }
  /* The seam. Without this the photograph ends on a hard horizontal line and
     the section reads as two unrelated blocks; a band of the section's own navy
     pulled up over the base of the image makes it one object.
     56px, not more: at 390 the image is only 211px tall, so 76px was covering a
     third of it - including both men from the waist down. */
  body.ab-hcx .elementor-9063 .abhc-help__img::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px;
    background: linear-gradient(180deg,
      rgba(5,17,36,0) 0%, rgba(5,17,36,.55) 58%, var(--abhx-navy) 100%);
    pointer-events: none;
  }
}

/* ==================================================================== *
 * 11. FAQ band
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
body.ab-hcx .elementor-9063 .abhx-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text {
  color: var(--abhx-sage-text);
}

/* ==================================================================== *
 * 12. MOBILE - the appearance band as a scroll-snap set
 *
 * Three cards stacked vertically at 390 is 2,400px of scrolling before the
 * installer CTA. A snap carousel that shows 86% of the current card leaves the
 * next one visibly peeking, which is what communicates "there are more".
 * ==================================================================== */
@media (max-width:767px) {
  body.ab-hcx .elementor-9063 .abhx-looks__grid.e-con-boxed > .e-con-inner,
  body.ab-hcx .elementor-9063 .abhx-looks__grid.e-con-full {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  body.ab-hcx .elementor-9063 .abhx-looks__grid .abhx-look {
    flex: 0 0 86%; min-width: 0; scroll-snap-align: start;
  }
  body.ab-hcx .elementor-9063 .abhx-sym__grid .abhx-card { min-width: 0; }
  body.ab-hcx .abhx-look__state { margin: 0 20px 14px; }
  body.ab-hcx .abhx-apply { margin: 0 20px 18px; width: calc(100% - 40px); }
  body.ab-hcx .elementor-9063 .abhx-look__body { padding: 20px 20px 6px; }
}

/* Nothing on this page may scroll the document sideways. */
body.ab-hcx .elementor-9063 { overflow-x: clip; }

/* ==================================================================== *
 * 13. THE TWO CARD GRIDS
 *
 * The grid containers are content_width:full INSIDE their boxed band, so the
 * cards are direct children and this can be one plain grid. A boxed container
 * would have wrapped them in .e-con-inner, where display:grid on the outer does
 * nothing because it has exactly one child.
 *
 * minmax(0,1fr) rather than 1fr: a bare 1fr resolves its auto minimum to
 * min-content, and a card built on a button inherits white-space:nowrap from
 * the theme, which makes min-content the WHOLE sentence. That combination is
 * what blows a track wider than its container.
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-sym__grid,
body.ab-hcx .elementor-9063 .abhx-looks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
body.ab-hcx .elementor-9063 .abhx-card { min-width: 0; }
/* margin-top:auto on the state row is what makes a row of cards read as a set:
   every chip and every apply button lands on its card's bottom edge no matter
   how the title above it wrapped. */
body.ab-hcx .abhx-look__state { margin-top: auto; }
body.ab-hcx .elementor-9063 .abhx-look__body,
body.ab-hcx .elementor-9063 .abhx-sym__body { flex: 0 1 auto; }

@media (max-width:1024px) {
  body.ab-hcx .elementor-9063 .abhx-sym__grid,
  body.ab-hcx .elementor-9063 .abhx-looks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}
@media (max-width:767px) {
  body.ab-hcx .elementor-9063 .abhx-sym__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  /* The appearance band becomes a snap carousel here - see part 12, which
     replaces the grid entirely at this width. */
  body.ab-hcx .elementor-9063 .abhx-looks__grid { display: flex; }
}

/* ==================================================================== *
 * 14. CALCULATOR INTRO
 *
 * Boxed to 1160 to match the calculator's own --abv-max, so the H2 above the
 * tool and the first question inside it share one left edge. Verified by
 * measurement, not assumed.
 * ==================================================================== */
body.ab-hcx .elementor-9063 .abhx-quiet p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--abhx-gray);
}
body.ab-hcx .elementor-9063 .abhx-quiet p::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; margin-right: 9px;
  border-radius: 50%;
  background: var(--abhx-sage);
  vertical-align: middle;
}

/* ==================================================================== *
 * 15. PER-IMAGE CROP
 *
 * One aspect ratio for every card on the page (4:3) means each photograph gets
 * cropped differently, so the focal point is set per image rather than left on
 * `center`. Chosen by looking at the actual files, not guessed from filenames.
 *
 * WARNING - THESE RULES DO NOT WIN ANY MORE. abv-hux.css part 8.2 restates all
 * six of them at (0,4,1) against this file's (0,4,0) - it adds `.elementor-9063`
 * - and it is enqueued after this one. abv-hux.css is the file to edit; these
 * are kept only so the two do not disagree if the later sheet is ever dropped.
 * Verified 2026-08-27 by computed style: editing this file alone changed nothing
 * on the page.
 * ==================================================================== */
/* Bedroom cutaway: the glowing attic is the whole point, and it is at the top. */
body.ab-hcx .abhx-sym--hot .elementor-widget-image img   { object-position: 50% 22%; }
/* AC condenser: the source file carries an Attic Breeze fan-blade watermark in
   its top-left corner, which has no business on a card describing a PROBLEM.
   A 4:3 crop of a square source discards 25% of the height, so aligning to the
   bottom (100%) removes the whole top band and the badge with it - verified by
   screenshot, because 62% left a visible sliver of it. */
body.ab-hcx .abhx-sym--ac .elementor-widget-image img    { object-position: 55% 100%; }
/* Bills at the kitchen table, attachment 8973 (a SQUARE source). Kept in step
   with abv-hux.css - see the WARNING at the head of this part. */
body.ab-hcx .abhx-sym--bills .elementor-widget-image img { object-position: 50% 25%; }
/* Gable vents sit high in the wall on a very wide source crop. */
body.ab-hcx .abhx-look--gable .elementor-widget-image img { object-position: 50% 42%; }
/* The low-profile fan sits just below the ridge, upper-middle of the frame. */
body.ab-hcx .abhx-look--aero .elementor-widget-image img  { object-position: 52% 38%; }
/* Tile roof with the fans across it; the roof plane is the upper half. */
body.ab-hcx .abhx-look--ultra .elementor-widget-image img { object-position: 50% 40%; }

/* ==================================================================== *
 * 16. THE CALCULATOR ON THE PAGE GRID
 *
 * MEASURED, not assumed: at a 1897px content width abv-app.css gives
 * .abv-shell max-width 860px with margin-left 190.5px and margin-right
 * 846.5px. That asymmetry put the tool 190px inside the page's own grid line
 * with 846px of void to its right, which is exactly what made the calculator
 * read as a separate application dropped into the middle of the website.
 *
 * The band is now boxed 1600 with the page's 32/24/20 gutters (Elementor
 * data, so it stays editable), and these two rules drop the shell's inherited
 * margins so it starts on that gutter. Result: the intro H2, the first
 * question and every section heading on the page share ONE left edge.
 *
 * The app's own 860px reading measure is deliberately left alone - one
 * question at a time does not want a 1536px line length.
 * ==================================================================== */
body.ab-hcx .abhx-calc .abv-root .abv-shell {
  margin-left: 0;
  margin-right: auto;
}
/* The intro sits directly over the tool, capped to the same measure.
   --abhx-toolw is published by abv-hlook.js from the shell's live width, so a
   future change to the app's own max-width cannot desync this; 860px is the
   fallback, which is the value the app ships today. */
body.ab-hcx .elementor-9063 .abhx-calchead {
  max-width: var(--abhx-toolw, 860px);
  margin-right: auto;
}

/* ==================================================================== *
 * 17. SAGE ON THE RESULT'S NAVY GROUNDS
 *
 * Part 7 flips --abv-orange to #5C9D5E, which is the correct sage for a LIGHT
 * ground. Two panels inside the result are navy (#051124) - .abv-plan__head and
 * .abv-rec - and on navy #5C9D5E is only 3.74:1, so the 12px "The attic fan you
 * need" eyebrow was a live AA failure. Measured, not assumed.
 *
 * Rather than chase each element, the token is REDECLARED on the navy grounds:
 * anything inside them that resolves sage through a variable now gets the
 * on-navy value (#5C9D5E, 5.79:1) automatically, and any future element does
 * too. This is the whole reason sage has two hexes.
 * ==================================================================== */
body.ab-hcx .abv-root .abv-plan__head,
body.ab-hcx .abv-root .abv-rec {
  --abv-orange:    #5C9D5E;
  --abv-tint: rgba(255,255,255,.10);
  --abvx-orange:   #5C9D5E;
  --abvx-orange-d: #5C9D5E;
}
/* The quantity is NOT variable-driven, so it has to be stated. Part 8 set it to
   navy, which on this navy card made the unit word ("fan" / "fans") invisible
   at 1:1 - the number was readable and the word beside it was not. */
body.ab-hcx .abv-root .abv-rec .abv-rec__qty { color: var(--abhx-white); }
body.ab-hcx .abv-root .abv-rec .abv-rec__qty b { color: var(--abhx-sage); }
body.ab-hcx .abv-root .abv-rec .abv-eyebrow { color: var(--abhx-sage); }

/* ==================================================================== *
 * 18. THREE FIXES FOUND BY MEASURING, NOT BY LOOKING
 * ==================================================================== */

/* 18a. THE MOBILE CAROUSEL WAS A COLUMN.
   Elementor sets flex-direction:column on every .e-con, so declaring
   display:flex in part 12 produced a vertical stack of three full-width cards:
   `flex: 0 0 86%` was constraining their HEIGHT basis, and the measured
   scrollWidth (327) equalled clientWidth (327) instead of the ~981 three 86%
   cards should produce. A flex carousel has to state its direction. */
@media (max-width:767px) {
  body.ab-hcx .elementor-9063 .abhx-looks__grid {
    flex-direction: row;
    align-items: stretch;
  }
}

/* 18b. THE PRE-FOOTER PHOTO WOULD NOT DROP ON MOBILE.
   Elementor's own container background rule is
   `.elementor-9063 .elementor-element.elementor-element-hohelp:not(.elementor-motion-effects-element-type-background)`
   = (0,4,0). The part 10 rule was (0,3,1) and lost, so a cover crop of a
   contractor on a roof was still being served at 320px, which is the arbitrary
   slice of nothing that Contractor Programs drops for exactly this reason.
   Naming three real classes on the element takes this to (0,5,1). */
/* SUPERSEDED. Part 10 now drops the pre-footer background at <=1024 (not 767)
   and replaces it with a stacked image widget, using this same three-class
   selector for the same specificity reason. Nothing is needed here. */

/* 18c. TAP TARGETS.
   The disclosure control measured 30px tall (its widest part is the 30px hint
   circle). The whole card forwards clicks, so the effective target was always
   the card - but the control itself should still be comfortable, and the
   product link inside a revealed panel measured 22px. */
body.ab-hcx .abhx-card__act { min-height: 44px; }
body.ab-hcx .elementor-9063 .abhx-look__link .elementor-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ==================================================================== *
 * 19. THE DESKTOP REVEAL MUST NOT REFLOW THE PAGE
 *
 * MEASURED PROBLEM: with the panel in flow, opening one appearance card took it
 * from 566px to 825px. Because the grid stretches a row to its tallest item,
 * that pushed the FAQ and the installer CTA down 259px - and on a pointer
 * device it happened every time the mouse crossed a card. A reveal that moves
 * the rest of the page is not a reveal, it is a jolt.
 *
 * On a pointer device the panel therefore comes OUT OF FLOW and slides up
 * inside the card, over the photograph. The card is a fixed object; nothing
 * below it can move. Cards also stay uniform, because an out-of-flow panel
 * contributes nothing to the height the grid equalises.
 *
 * Touch keeps the in-flow accordion from part 5: a stacked card or a snap
 * carousel has nothing below it to disturb, and push-down is the interaction
 * people expect from a tap.
 * ==================================================================== */
@media (hover: hover) and (pointer: fine) {
  body.ab-hcx .abhx-card { overflow: hidden; }

  body.ab-hcx .abhx-card.is-armed .abhx-rev {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    display: block;                 /* the 0fr/1fr grid trick is not used here */
    grid-template-rows: none;
    max-height: 100%;
    overflow-y: auto;
    background: var(--abhx-white);
    box-shadow: 0 -12px 28px rgba(5,17,36,.16);
    border-top: 2px solid var(--abhx-sage);
    transform: translateY(101%);    /* 101% hides the border-top too */
    transition: transform .34s var(--abhx-ease);
  }
  body.ab-hcx .abhx-card.is-armed .abhx-rev > .abhx-rev__in {
    overflow: visible;
    padding: 20px 26px 24px;
  }
  body.ab-hcx .abhx-card.is-armed:hover .abhx-rev,
  body.ab-hcx .abhx-card.is-armed:focus-within .abhx-rev,
  body.ab-hcx .abhx-card.is-armed[data-open="1"] .abhx-rev {
    transform: translateY(0);
  }
  /* The panel is out of flow, so the body no longer reserves room for it and
     the card would otherwise close up tight under the title. */
  body.ab-hcx .elementor-9063 .abhx-sym__body { padding-bottom: 22px; }
  body.ab-hcx .elementor-9063 .abhx-look__body { padding-bottom: 22px; }

  @media (prefers-reduced-motion: reduce) {
    body.ab-hcx .abhx-card.is-armed .abhx-rev {
      transition: none;
      /* No slide: appear in place instead of animating a transform. */
      transform: translateY(101%);
    }
    body.ab-hcx .abhx-card.is-armed:hover .abhx-rev,
    body.ab-hcx .abhx-card.is-armed:focus-within .abhx-rev,
    body.ab-hcx .abhx-card.is-armed[data-open="1"] .abhx-rev { transform: translateY(0); }
  }
}


/* ==================================================================== *
 * 19. THE FOUR-COLOUR PASS  (2026-08-25, Vincent)
 *
 * abv-ui.css is shared by 8863, 8864 and 8897, so its own values stay as they
 * are and the homeowner corrections live here - the sheet only page 8863
 * loads, and the last one printed.
 *
 * HOMEOWNER UI IS navy #051124, green #5C9D5E, white #FFFFFF, sky #3993D5.
 * Nothing else, with one stated exception: validation red.
 * ==================================================================== */
body.ab-hcx .abv-root,
body.ab-hcx .abvm,
body.ab-hcx .abv-gate {
  --abvx-navy-2: #051124;
  --abvx-ink:    #051124;
  --abvx-blue:   #3993D5;
  --abv-accent:  #5C9D5E;
}

/* 19a. NO GREY TYPE. abv-ui.css sets #6f7680 on six helper rules and #4a5262
   on one. Navy at 72% is the same hierarchy without the grey. */
body.ab-hcx .abvm__fine,
body.ab-hcx .abvm__hsnote,
body.ab-hcx .abvm__hsloading,
body.ab-hcx .abvx-tier__s,
body.ab-hcx .abvx-tier__pay small,
body.ab-hcx .abv-root .abv-help,
body.ab-hcx .abv-root .abv-fine { color: rgba(5,17,36,.72); }

/* 19b. NO WARM PLATES. Every #fef4ef / #fdece4 / #fdeee6 / #fffaf7 surface in
   the shared modal system is an orange tint. Here a plate is white and the
   separation is a navy hairline; a message plate takes the green wash so it
   still reads as its own band. */
body.ab-hcx .abvm__msg,
body.ab-hcx .abvx-tier--3 {
  background: rgba(92,157,94,.08);
  border-color: rgba(92,157,94,.42);
}
body.ab-hcx .abvm__msg--err { background: #fdecec; border-left-color: #c62828; }

/* 19c. Validation red, restated once. Flagged in the report as the one
   deliberate departure from the four colours. */
body.ab-hcx .abvm__err,
body.ab-hcx .abv-root .abv-err { color: #c62828; }

/* 19d. FOCUS is Sky everywhere in the tool - distinct from the green hover
   gesture, and 3.36:1 clears the 3:1 non-text floor. */
body.ab-hcx .abv-root :focus-visible,
body.ab-hcx .abvm :focus-visible {
  outline: 3px solid #3993D5;
  outline-offset: 2px;
}

/* 19e. THE SEGMENTED CONTROL - the answer control itself.
   abv-app.css paints `.abv-root .abv-seg > label > span` with a #DDE2E8 grey
   edge. That rule is UNSCOPED, so it is also the professional calculator's
   control, and the brief says not to redesign the professional side. The grey
   is therefore replaced HERE, for the homeowner tool only. The same grey is
   still live on /professionals/ventilation-calculator/ and is listed as a
   follow-up rather than changed unilaterally. */
body.ab-hcx .abv-root .abv-seg > label > span,
body.ab-hcx .abv-root .abv-seg .abv-seg__opt > span {
  border-color: rgba(5,17,36,.14);
}
body.ab-hcx .abv-root .abv-seg > label > input:checked + span,
body.ab-hcx .abv-root .abv-seg .abv-seg__opt > input:checked + span {
  border-color: #5C9D5E;
  background: rgba(92,157,94,.08);
  color: #051124;
}

/* 19f. FORM FIELDS.
   The attic floor-area input had NO styled border at all, so it fell back to
   the browser default #666 - a grey, and the only one left in the tool.
   White field, navy text, navy hairline, GREEN focus, per the brief. */
body.ab-hcx .abv-root input[type="text"],
body.ab-hcx .abv-root input[type="number"],
body.ab-hcx .abv-root input[type="tel"],
body.ab-hcx .abv-root input[type="email"],
body.ab-hcx .abv-root select,
body.ab-hcx .abv-root textarea,
body.ab-hcx .abvm input[type="text"],
body.ab-hcx .abvm input[type="email"],
body.ab-hcx .abvm select {
  background: #FFFFFF;
  color: #051124;
  border: 1.5px solid rgba(5,17,36,.28);
  border-radius: 10px;
  min-height: 48px;
}
body.ab-hcx .abv-root input[type="text"]:focus,
body.ab-hcx .abv-root input[type="number"]:focus,
body.ab-hcx .abv-root select:focus,
body.ab-hcx .abv-root textarea:focus,
body.ab-hcx .abvm input:focus,
body.ab-hcx .abvm select:focus {
  border-color: #5C9D5E;
  box-shadow: 0 0 0 3px rgba(92,157,94,.22);
  outline: none;
}
/* Placeholder copy stays readable without becoming grey helper text. */
body.ab-hcx .abv-root ::placeholder,
body.ab-hcx .abvm ::placeholder { color: rgba(5,17,36,.55); opacity: 1; }

/* 19g. THE SELECTION TICK GLOW.
   abv-ui.css drops rgba(239,125,72,.45) under the tick on a selected answer.
   It is an rgba literal, so no token flip could reach it, and the rule is
   unscoped - shared with the professional tool, which keeps its orange. */
body.ab-hcx .abv-root .abv-wizq .abv-pick.is-on .abv-pick__check,
body.ab-hcx .abv-root .abv-picks .abv-pick.is-on .abv-pick__check,
body.ab-hcx .abv-root .abv-pick.is-on .abv-pick__check {
  box-shadow: 0 1px 4px rgba(92,157,94,.45);
}