/* ATTIC BREEZE - HOMEOWNER VENTILATION CALCULATOR, UX ROUND
 * /homeowners/ventilation-calculator/  (page 8863)              2026-08-26
 *
 * Owns four components and nothing else:
 *   1. the hero after its microcopy line was removed
 *   2. .abhc-flip     the three scenario cards, as flip cards + a swipe rail
 *   3. .abhc-aha      the green "the question is how much" callout
 *   4. .abhc-journey  How It Works as one connected three-step journey
 *
 * SCOPE. Every selector names `body.ab-hcx` AND either `.elementor-9063` or one
 * of this round's own `abhc-*` classes. A body class is an ancestor of the whole
 * document; used alone as a scope it is what put arrows on the site navigation
 * on 2026-08-24. Nothing here may reach the shared header, the mega menu, the
 * footer, another page, or the calculator's own `.abv-root`.
 *
 * PALETTE. Homeowner side: Attic Navy #051124, Breeze Home Green #5C9D5E,
 * White, Sky #3993D5. No orange, no grey, nothing else.
 *
 * LOAD ORDER. Printed after abv-hlook.css (99) and abv-hcalc.css (100), so it
 * overrides both by source order rather than by a specificity war.
 * ==========================================================================  *
 * PAGE:    /homeowners/ventilation-calculator/  (WordPress page 8863)
 * NEEDS:   loaded by novamira-sandbox/ab-hoc-ux.php (priority 101); pairs with abv-hux.js
 * FLAG:    update_option('abv_hux_enabled','0') switches this layer off.
 * DOCS:    wp-content/plugins/attic-breeze-ventilation/docs/homeowner-calculator-page.md
*/

body.ab-hcx .elementor-9063 {
  --abhu-green:  #5C9D5E;
  --abhu-navy:   #051124;
  --abhu-white:  #FFFFFF;
  --abhu-sky:    #3993D5;
  --abhu-ease:   cubic-bezier(.2, .7, .3, 1);
  --abhu-flip:   380ms;   /* a card turning over, not an object spinning */
  --abhu-mark:   50px;   /* journey marker diameter */
}

/* ==========================================================================
   1. HERO - EDIT 1, the microcopy line is gone
   ==========================================================================
   The removed widget was the last VISIBLE child of the hero copy column, but
   the column still ends with `.ab-hc-toolbar` (display:none in overview mode).
   So the CTA row is not `:last-child`, and Elementor's inter-widget margin was
   left hanging under the buttons as dead space. Flex `gap` collapses around
   display:none items; a bottom margin does not.
   ========================================================================== */
body.ab-hcx.abv-hc-overview .elementor-9063 .abhx-hero .abhc-ctarow,
body.ab-hcx.abv-hc-overview .elementor-9063 .abhx-hero .abhc-ctarow.e-con {
  margin-block-end: 0;
}

/* The hero is one line shorter now. Anything that was pinning its height to
   the taller composition would show as a gap under the buttons instead. */
body.ab-hcx.abv-hc-overview .elementor-9063 .abhx-hero > .e-con-inner,
body.ab-hcx.abv-hc-overview .elementor-9063 .abhx-hero .abhc-ctarow > .elementor-widget:last-child {
  margin-block-end: 0;
}

/* EDIT 2 - the "Sound familiar?" eyebrow is gone, so the H2 is now the first
   thing in the section head. Keep the head's optical top edge where the other
   bands put theirs instead of letting the H2 ride up by the eyebrow's height. */
body.ab-hcx .elementor-9063 .abhx-symband .abhx-h2 .elementor-heading-title,
body.ab-hcx .elementor-9063 .abhx-symband > .e-con-inner > .e-con:first-child .abhx-h2 {
  margin-block-start: 0;
}

/* ==========================================================================
   2. SCENARIO FLIP CARDS - EDIT 3
   ==========================================================================
   Runtime structure, built by abv-hux.js inside the Elementor container:

     .abhc-flip                     the card Elementor wrote (perspective host)
       .abhc-fx                     rotates; transform-style: preserve-3d
         .abhc-fx__f                front: the image widget + the title
         .abhc-fx__b                back:  title echo + label + the paragraph
       button.abhc-fx__btn          the ONLY control, overlaying the whole card

   WHY BOTH FACES SHARE ONE GRID CELL. `display:grid` with both faces at
   `grid-area:1/1` makes the row exactly as tall as the TALLER face, so a flip
   physically cannot resize the card and cannot shift the page. No JS measures
   anything, so it stays correct through a resize, a font swap and a late image.

   WHY THE BUTTON IS A SIBLING OF THE FACES AND NOT INSIDE ONE. A control on
   the front face is `backface-visibility:hidden` once the card is flipped -
   literally unclickable, so a tapped card could never be turned back.

   ACCESSIBILITY. The paragraph is never removed from the accessibility tree or
   from the DOM, so the flip is decoration over readable content and no
   information is hover-only. The card title stays a real `<h3>` in the document
   outline; the button borrows it as its accessible name via aria-labelledby,
   and the back face's visual title echo is aria-hidden so nothing is announced
   twice.
   ========================================================================== */

body.ab-hcx .elementor-9063 .abhc-flip {
  position: relative;
  perspective: 1500px;
  /* .abhx-card already sets overflow:hidden, which keeps the rounded corners
     during the rotation and stops the faces contributing any page overflow.
     It flattens only ITS OWN transform-style, never a descendant's. */
}

body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  /* The card's height is decided HERE, not by a photograph. The front face has
     no intrinsic height beyond its title band, so this is what gives the image
     its presence and what makes all three crops identical. */
  min-height: 400px;
  transform-style: preserve-3d;
  transition: transform var(--abhu-flip) var(--abhu-ease);
  transition-delay: 60ms;         /* hover intent: no twitch on a pass-through */
}

body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Every pointer event belongs to the overlay button. This is also what makes
     swipe-versus-tap reliable on the mobile rail: there is exactly one target. */
  pointer-events: none;
}

/* ---- front ---------------------------------------------------------------- */

/* IMAGE then TITLE, with the image taking every pixel the title does not.

   THE IMAGE MUST CONTRIBUTE NO INTRINSIC HEIGHT. Measured before this fix: the
   three lifestyle photographs have three different aspect ratios, so `height:
   100%` resolved against an indefinite height, fell back to each image's own
   intrinsic height, and produced fronts of 442 / 380 / 517px. The grid then
   stretched every card to the tallest - 647px - and the three crops did not
   match, which is exactly what the brief asks not to happen.

   Taking the picture out of flow with position:absolute means the front's
   intrinsic height is the title band and nothing else. The card height is then
   decided by `min-height` and the back face, the image fills whatever is left,
   and all three crops are identical at every width. `.abhx-card`'s shared 4/3
   ratio is overridden for the same reason: inside a card of decided height a
   fixed ratio can only letterbox or overflow. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f > .elementor-widget-image {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  margin-block-end: 0;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f > .elementor-widget-image > .elementor-widget-container,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f > .elementor-widget-image figure,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f > .elementor-widget-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f > .elementor-widget-image img {
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  transform: none;                /* no zoom-on-hover; the flip is the motion */
}

/* THE TITLE BAND.

   `--flex-direction`, not `flex-direction`: this is an Elementor container, and
   Elementor sets `flex-direction: var(--flex-direction)` with a column default.
   A plain `flex-direction:row` here is overridden by the variable and does
   nothing - measured, the hint chip was stacking UNDER the title and making the
   band 128px instead of 75px.

   THE FIXED HEIGHT IS WHAT KEEPS THE THREE CROPS IDENTICAL. All three cards are
   the same height, so the image box can only match if the band matches, and the
   band cannot match while it is sized by how many lines a title happens to
   wrap to. Measured at 390px: "Upstairs stays hot" took one line and "The AC
   never cycles off" took two, which rendered images of 232px and 205px and two
   visibly different crops. 96px comfortably holds two lines at every
   breakpoint; a title long enough to need three would grow this one card's band
   and shrink its picture, which is the right way round to be wrong. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f .abhx-sym__body {
  flex: 0 0 auto;
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  --align-items: center;
  align-items: center;
  --gap: 14px;
  gap: 14px;
  /* NOWRAP, and the title must be allowed to shrink. Elementor containers wrap
     by default: measured, "The AC never cycles off" was 221px wide beside a
     34px chip in 241px of room, so the chip wrapped to its own line, pushed the
     band to 117px and left the hint sitting on the LEFT under the title. The
     title shrinking and taking two lines is the correct trade - it still fits
     inside the 96px band. */
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
  min-height: 96px;
  box-sizing: border-box;
  padding: 18px 22px;
  background: var(--abhu-white);
  border-top: 1px solid rgba(5, 17, 36, .1);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f .abhx-sym__body > .elementor-widget {
  margin-block-end: 0;
  flex: 1 1 auto;
  min-width: 0;      /* or the flex item refuses to shrink below its content */
  width: auto;       /* voids Elementor's own --width on the widget */
}
body.ab-hcx .elementor-9063 .abhc-flip .abhx-card__title .elementor-heading-title {
  font-size: 21px;
  line-height: 1.26;
  font-weight: 700;
  color: var(--abhu-navy);
  text-wrap: balance;
}

/* The affordance. Decorative: the button already says what it does. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(92, 157, 94, .1);
  color: var(--abhu-green);
  transition: background-color .24s var(--abhu-ease), color .24s var(--abhu-ease);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__hint svg { width: 15px; height: 15px; display: block; }

/* ---- back ---------------------------------------------------------------- */

body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b {
  transform: rotateY(180deg);
  background: var(--abhu-white);
  justify-content: center;
  gap: 12px;
  padding: 30px 28px;
  border-top: 3px solid var(--abhu-green);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b > .elementor-widget { margin-block-end: 0; }

body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__echo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--abhu-navy);
  opacity: .5;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-sym__label .elementor-heading-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--abhu-navy);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-sym__copy,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-sym__copy p {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(5, 17, 36, .78);
  margin: 0;
}

/* "Tap again to go back" without adding a second control. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__close {
  margin-block-start: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--abhu-green);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__close svg { width: 13px; height: 13px; }

/* ---- the control -------------------------------------------------------- */

body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  /* kit-1333 styles a bare <button> uppercase, nowrap, with tracking and its
     own padding. This button has no visible label, but those declarations still
     give it an intrinsic min-width that would blow the card out on a phone -
     the same bug that pushed a warranty card to 557px inside a 375px viewport. */
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  min-width: 0;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn:hover,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn:focus,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn:focus-visible,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn:active {
  background: none;               /* kit-1333 button:hover is (0,2,1) */
  color: inherit;
  box-shadow: none;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn:focus-visible { outline: none; }

/* ---- states ------------------------------------------------------------- */

body.ab-hcx .elementor-9063 .abhc-flip[data-flip="1"] .abhc-fx {
  transform: rotateY(180deg);
  transition-delay: 0ms;          /* a tap is deliberate; do not delay it */
}

/* FOCUS NO LONGER FLIPS THE CARD, and that is a deliberate reversal.
   Focus used to open a card so that what had focus was what could be seen -
   but tabbing along a row then opened and closed each card in turn, and once a
   click LOCKS a card open, a focus that also flips means the state depends on
   two things at once. Enter and Space fire a click on the same button, so the
   keyboard has the same single, sticky control the mouse has. The ring stays. */
body.ab-hcx .elementor-9063 .abhc-flip:has(.abhc-fx__btn:focus-visible) {
  outline: 3px solid var(--abhu-sky);
  outline-offset: -3px;           /* inset: never clipped by the mobile rail */
  border-color: var(--abhu-green);
}

/* Wider cards want a taller picture or the crop reads as a letterbox strip. */
@media (min-width: 1440px) {
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 440px; }
}

@media (hover: hover) and (pointer: fine) {
  /* HOVER NO LONGER FLIPS THE CARD. A hover-driven flip means the card is open
     only while the pointer is on it, so a reader cannot look away from it, read
     down the page and come back - and it made "click to open" and "hover to
     open" two competing stories about the same control. Hover now only says
     "this is interactive": the chip fills, the edge goes green. The flip is a
     click, and it LOCKS. (The close affordance is no longer hidden here either
     - a card that stays open has to say how to close it on every device.) */
  body.ab-hcx .elementor-9063 .abhc-flip:hover .abhc-fx__hint {
    background: var(--abhu-green);
    color: var(--abhu-white);
  }
  /* .abhx-card's shared 4px lift and 1.03 image zoom are cancelled here: a
     card that rises and zooms WHILE it rotates is the "excessive movement"
     this component is meant to avoid. Border and shadow still respond. */
  body.ab-hcx .elementor-9063 .abhc-flip:hover {
    transform: none;
    border-color: var(--abhu-green);
  }
  body.ab-hcx .elementor-9063 .abhc-flip:hover .elementor-widget-image img { transform: none; }
}

/* ---- the touch rail ----------------------------------------------------- */
/* One card at a time, the next one peeking, swipe to move. CSS scroll-snap -
   no carousel library, no autoplay, and it degrades to a plain scroller if
   scroll-snap is unsupported. Card 82% + 4% gap: card two is visible from 86%
   of the width, so ~14% of it peeks (about 55px on a 390px phone).

   IT RUNS TO 1024, NOT 767 - a deliberate call, and a change to what tablets
   used to get. The inherited grid stepped 3 -> 2 -> 1 columns, so at 768px it
   drew two cards and ORPHANED THE THIRD on its own row at half width (measured:
   cards at x24/x388 on one row, the third alone at x24 below). A tablet is also
   a touch device, so the swipe rail is the more honest interaction there than a
   hover grid, and it keeps one mental model from 320px to 1024px. Above 1024
   the three-up grid with the hover flip is unchanged. */
@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhx-sym__grid,
  body.ab-hcx .elementor-9063 .abhx-sym__grid.e-con {
    display: flex;
    --flex-direction: row;          /* Elementor drives direction via the var */
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; /* no browser back-swipe hijack */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 4px 10px;        /* room for the card shadow */
  }
  body.ab-hcx .elementor-9063 .abhx-sym__grid::-webkit-scrollbar { display: none; }

  body.ab-hcx .elementor-9063 .abhx-sym__grid > .abhc-flip {
    flex: 0 0 82%;
    width: 82%;                     /* voids Elementor's own --width */
    margin-inline-end: 4%;
    scroll-snap-align: center;
  }
  body.ab-hcx .elementor-9063 .abhx-sym__grid > .abhc-flip:last-child { margin-inline-end: 0; }

  /* An 82% card is ~578px on a tablet, so the picture needs the extra height
     or the crop reads as a letterbox strip rather than a photograph. */
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 480px; }
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b { padding: 28px 26px; }
}

/* Phones: the same rail, tighter. This block must stay AFTER the 1024 one. */
@media (max-width: 767px) {
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 360px; }
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b { padding: 26px 22px; }
  /* A narrower card leaves the title ~198px beside the hint chip. 19px keeps
     two lines inside the 96px band instead of pushing to a third. */
  body.ab-hcx .elementor-9063 .abhc-flip .abhx-card__title .elementor-heading-title { font-size: 19px; }
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f .abhx-sym__body { padding: 16px 18px; }
}

/* Pagination dots. Injected by abv-hux.js, hidden above the rail's breakpoint
   so a desktop grid never shows carousel chrome. */
body.ab-hcx .elementor-9063 .abhc-dots { display: none; }
@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-block-start: 4px;
  }
  body.ab-hcx .elementor-9063 .abhc-dot {
    appearance: none;
    width: 44px;                    /* 44px tap target around an 8px dot */
    height: 44px;
    min-height: 44px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.ab-hcx .elementor-9063 .abhc-dot:hover,
  body.ab-hcx .elementor-9063 .abhc-dot:focus,
  body.ab-hcx .elementor-9063 .abhc-dot:active { background: none; box-shadow: none; }
  body.ab-hcx .elementor-9063 .abhc-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(5, 17, 36, .22);
    transition: background-color .24s var(--abhu-ease), width .24s var(--abhu-ease);
  }
  body.ab-hcx .elementor-9063 .abhc-dot[aria-current="true"]::before {
    background: var(--abhu-green);
    width: 22px;
    border-radius: 999px;
  }
  body.ab-hcx .elementor-9063 .abhc-dot:focus-visible {
    outline: 3px solid var(--abhu-sky);
    outline-offset: -6px;
    border-radius: 50%;
  }
}

/* ==========================================================================
   3. THE GREEN CALLOUT - EDIT 5
   ==========================================================================
   CONTRAST, stated because it is a judgement and not an oversight. White on
   Breeze Home Green measures 3.25:1. That clears WCAG AA for LARGE text (3:1)
   and does not clear it for body text (4.5:1), so this copy is locked to 700
   weight at 20px and above at every breakpoint, which is what makes it large
   text. The alternative - darkening the green - is explicitly rejected on this
   site: pick the right colour for the component, do not bend a brand value.
   ========================================================================== */
body.ab-hcx .elementor-9063 .abhc-aha { text-align: center; }

body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
  display: block;
  box-sizing: border-box;
  max-width: 720px;
  margin-inline: auto;
  margin-block-start: 12px;
  padding: 40px 46px;
  background: var(--abhu-green);
  color: var(--abhu-white);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(5, 17, 36, .14);
  font-size: 27px;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -.2px;
  text-wrap: balance;
}

/* THE REVEAL.
   The hidden start state is gated on `html.abhu-js`, which abv-hux.php prints
   in <head> BEFORE first paint. Without JavaScript the class never arrives, the
   callout is simply visible, and a scripting failure can never leave this
   sentence invisible at opacity 0. */
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
  opacity: 0;
  transform: translateY(18px) scale(.984);
  transition: opacity .62s var(--abhu-ease), transform .62s var(--abhu-ease);
  will-change: opacity, transform;
}
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha.is-in .elementor-heading-title {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
    max-width: 620px;
    padding: 34px 36px;
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
    padding: 26px 22px;
    border-radius: 18px;
    font-size: 20px;            /* the AA-large floor: 20px at 700 */
    line-height: 1.42;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   4. HOW IT WORKS, AS ONE JOURNEY - EDIT 6
   ==========================================================================
   The interaction language is borrowed from the Warranty page's "Need warranty
   help?" claim steps - numbered markers that become ticks, a connector that
   travels rather than switching colour, one timed pass on desktop and a
   scroll-driven pass on narrow screens - and re-drawn in Breeze Home Green on
   navy. It is not that component's markup.

   WHAT NEVER MOVES: the step numbers, titles and paragraphs are fully readable
   at rest, at every width, with JavaScript off and with reduced motion on. Only
   the MARKER and the RAIL animate. Nobody has to click or wait to read a step.
   ========================================================================== */

body.ab-hcx .elementor-9063 .abhc-journey .abhc-step {
  position: relative;
  border-top: 0;                    /* the rail replaces the old top rule */
  padding: 0;
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step > .elementor-widget { margin-block-end: 0; }

/* ---- the marker --------------------------------------------------------- */
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__n .elementor-heading-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--abhu-mark);
  height: var(--abhu-mark);
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .34);
  color: var(--abhu-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  /* A 6px ring in the band's own navy, so the rail appears to pass BEHIND the
     marker instead of touching its border. */
  box-shadow: 0 0 0 6px var(--abhu-navy);
  transition: background-color .32s var(--abhu-ease), border-color .32s var(--abhu-ease),
              color .32s var(--abhu-ease);
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__num { transition: opacity .24s var(--abhu-ease); }
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__tick {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .24s var(--abhu-ease);
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__tick svg {
  width: 20px; height: 20px; display: block;
}

body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-active .abhc-step__n .elementor-heading-title {
  border-color: var(--abhu-green);
  color: var(--abhu-green);
}
/* White tick on Breeze Home Green: 3.25:1, and a graphic needs 3:1. */
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-done .abhc-step__n .elementor-heading-title {
  background: var(--abhu-green);
  border-color: var(--abhu-green);
  color: var(--abhu-white);
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-done .abhc-step__num { opacity: 0; }
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-done .abhc-step__tick { opacity: 1; }

/* ---- copy --------------------------------------------------------------- */
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__t .elementor-heading-title {
  color: var(--abhu-white);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-wrap: balance;
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__b,
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__b p {
  /* NO COLOUR HERE ANY MORE (2026-08-29). This declared
     `rgba(255,255,255,.74)` on the widget AND on the paragraph inside it, and
     because a direct declaration on a child beats a colour the widget only
     passes down by inheritance, each widget's own Elementor Text Colour
     control could never take effect - setting it in the editor did nothing at
     all. Vincent asked for this copy to be white; the honest fix is to stop
     declaring the colour here rather than to out-specify it from a later
     sheet, which would have left the editor control just as dead. The colour
     now comes from the widget's Elementor setting (currently #FFFFFF on all
     three steps) and the paragraph inherits it. The selector is
     `.elementor-9063`-scoped, so no other page can be affected. */
  font-size: 15.5px;
  line-height: 1.66;
  margin: 0;
}

/* ---- the rail ----------------------------------------------------------- */
/* Two bars: a neutral track and a green fill that scales from 0. The line
   TRAVELS instead of switching colour, which is what reads as progress.
   Injected per step (never on the last), absolutely positioned so it is not a
   grid item and cannot take a cell in the mobile two-column step. */
body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail {
  position: absolute;
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
  pointer-events: none;
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__fill {
  position: absolute;
  inset: 0;
  background: var(--abhu-green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .58s var(--abhu-ease);
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-done .abhc-rail__fill { transform: scaleX(1); }

body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__tip {
  position: absolute;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255, 255, 255, .18);
  border-top: 2px solid rgba(255, 255, 255, .18);
  transition: border-color .3s var(--abhu-ease);
}
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-done .abhc-rail__tip {
  border-right-color: var(--abhu-green);
  border-top-color: var(--abhu-green);
}

/* ---- desktop: three across, horizontal rail ----------------------------- */
@media (min-width: 1025px) {
  body.ab-hcx .elementor-9063 .abhc-journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  /* Runs from the marker's right edge to 18px short of the NEXT marker, so it
     crosses the 40px gap: right:-22px = 40px gap minus 18px of clearance.
     Re-derive this if the gap or the marker size changes. */
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail {
    top: calc(var(--abhu-mark) / 2 - 1px);
    left: calc(var(--abhu-mark) + 16px);
    right: -22px;
    height: 2px;
    width: auto;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__tip {
    right: -1px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ---- tablet and phone: a true vertical timeline ------------------------- */
/* Switching at 1024 and not 767, for the reason the warranty page switched
   there: three columns at 768px are ~225px each, and three bordered blocks
   read as a list rather than as a sequence. */
@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhc-journey {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step {
    display: grid;
    grid-template-columns: var(--abhu-mark) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
    padding-block-end: 34px;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step:last-child { padding-block-end: 0; }

  /* THE TRAP, paid for once on warranty 4004: a step has THREE children, so
     without pinning them the paragraph auto-places into the 50px marker
     column and renders one word per line. */
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__n { grid-column: 1; grid-row: 1; }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__t {
    grid-column: 2; grid-row: 1;
    align-self: center;
    min-width: 0;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__b {
    grid-column: 2; grid-row: 2;
    min-width: 0;
  }

  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail {
    top: calc(var(--abhu-mark) + 6px);
    bottom: 4px;
    left: calc(var(--abhu-mark) / 2 - 1px);
    width: 2px;
    height: auto;
    right: auto;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__fill {
    transform: scaleY(0);
    transform-origin: center top;
  }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step.is-done .abhc-rail__fill { transform: scaleY(1); }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__tip {
    left: 50%;
    bottom: -1px;
    right: auto;
    top: auto;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 767px) {
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__t .elementor-heading-title { font-size: 18px; }
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__b,
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__b p { font-size: 15px; }
  body.ab-hcx .elementor-9063 .abhc-journey { --abhu-mark: 44px; }
}

/* ==========================================================================
   5. (REMOVED 2026-08-26 - the mid-page CTA rows)
   ==========================================================================
   This section styled `.abhc-ctamid`, the three repeated "Find My Fan Size"
   rows that round 1 deleted from the page. Verified dead before removal:
   0 references in abv-hux.js, 0 in page 8863's _elementor_data, and no other
   stylesheet in the plugin names the class. Nothing on the page changed when
   it went.
   ========================================================================== */

/* ==========================================================================
   6. REDUCED MOTION
   ==========================================================================
   Not "no animation": the same information, arrived at without movement.
   - flip cards cross-fade instead of rotating
   - the callout appears with no transform
   - the journey shows its rails already drawn and keeps NUMBERS, because a
     page full of ticks on arrival claims the reader has done something
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx {
    transition: none;
    transform: none !important;
  }
  /* Neither face is rotated here, so both face the viewer and
     backface-visibility decides nothing - OPACITY is what shows one and hides
     the other. Stating it as `visible` and then repeating the -webkit- alias
     (which is the same property, and won) only made the intent unreadable. */
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f,
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b {
    backface-visibility: visible;
    transition: opacity .18s linear;
  }
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f { z-index: 1; opacity: 1; }
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b {
    transform: none;
    z-index: 2;
    opacity: 0;
  }
  /* ONE state selector, matching the one thing that now opens a card. The
     :hover and :focus-visible variants are gone from here for the same reason
     they are gone from the flip itself. */
  body.ab-hcx .elementor-9063 .abhc-flip[data-flip="1"] .abhc-fx__b { opacity: 1; }
  body.ab-hcx .elementor-9063 .abhc-flip[data-flip="1"] .abhc-fx__f { opacity: 0; }

  html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
    transition: opacity .001s linear;
    transform: none;
  }

  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__fill,
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__n .elementor-heading-title,
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__num,
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-step__tick,
  body.ab-hcx .elementor-9063 .abhc-journey .abhc-rail__tip { transition: none; }

  body.ab-hcx .elementor-9063 .abhc-journey.is-static .abhc-rail__fill { transform: none; }
  body.ab-hcx .elementor-9063 .abhc-journey.is-static .abhc-rail__tip {
    border-right-color: var(--abhu-green);
    border-top-color: var(--abhu-green);
  }
  body.ab-hcx .elementor-9063 .abhc-journey.is-static .abhc-step__tick { opacity: 0; }
  body.ab-hcx .elementor-9063 .abhc-journey.is-static .abhc-step__num { opacity: 1; }

  body.ab-hcx .elementor-9063 .abhc-flip,
  body.ab-hcx .elementor-9063 .abhc-flip .elementor-widget-image img { transition: none; }
  body.ab-hcx .elementor-9063 .abhc-flip:hover { transform: none; }
}

/* ==========================================================================
   7. NO HORIZONTAL OVERFLOW, EVER
   ==========================================================================
   The mobile rail is the one thing on this page that scrolls sideways ON
   PURPOSE, and it must stay the only one. These are belts, not braces: the
   grid children are already min-width:0 above. */
body.ab-hcx .elementor-9063 .abhc-flip,
body.ab-hcx .elementor-9063 .abhc-journey,
body.ab-hcx .elementor-9063 .abhc-journey .abhc-step,
body.ab-hcx .elementor-9063 .abhc-aha { min-width: 0; max-width: 100%; }

body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f { overflow-wrap: break-word; }


/* ==========================================================================
   8. UX ROUND 2 - ONE CARD SYSTEM, ONE CTA, THREE RAILS        2026-08-26
   ==========================================================================
   Everything below is ADDITIVE. Nothing above was edited, and every rule here
   wins by SOURCE ORDER against an equal-specificity rule earlier in this file
   or in abv-hlook.css / abv-hcalc.css. Deleting this whole section returns the
   page to the 2026-08-26 morning round exactly.

   WHAT THIS ROUND ESTABLISHES

   SYSTEM A - one content card. Section 9 finished the job: BOTH card sections
   are now the same flip card built by the same code.
     Does this sound like your house?  .abhc-flip
     How it looks                      .abhx-look.abhc-flip
   ("What you'll get" and its `.abhc-getcard` variant were removed from the
   page in round 3 - see section 9.)
   They share: a 14px radius, ONE 4/3 image window with per-photo art
   direction, a 3px Breeze Home Green rule between picture and text, one title
   type tier, one restrained hover (green edge + depth, no lift, no zoom), and
   ONE touch rail below 1025px.

   SUPERSEDED BY SECTION 9. This section originally argued the appearance
   cards should NOT flip, because their revealed side carries a real link and
   because abv-hlook.js injects a plan chip and an Apply button into the same
   container - and a flip face is `pointer-events:none` under a full-card
   button. Both problems are now solved rather than avoided: the link gets
   pointer events back only while the card is open, and `.abhx-look__body`
   stays a direct child of the card as the injection anchor. Read 9.2 before
   touching either.

   SYSTEM B - one conversion CTA. The hero keeps the only in-page primary
   button; the three repeated rows are gone from the page (Elementor), and past
   the hero `.abhu-fab` takes over. It is not a second calculator: abv-hux.js
   forwards its click to the hero's own start link, so the page's existing
   delegated handler in abv-hcalc.js runs unchanged.

   SYSTEM C - supporting callout. `.abhc-aha` centres under the whole card
   group. It tucked UP into it here; section 9 moved it DOWN and clear, and
   made it appear only once the reader has explored the three cards.

   PALETTE unchanged: Attic Navy #051124, Breeze Home Green #5C9D5E, White,
   Sky #3993D5. No orange, no grey, no new colours. (The AC photograph's own
   orange fan-blade watermark is gone too - that image is now a cleaned crop,
   attachment 8946.)

   NOTE: section 5's `.abhc-ctamid` rules were removed on 2026-08-26 after the
   three rows they styled were deleted from the page. See section 5's stub.
   ========================================================================== */

body.ab-hcx .elementor-9063 {
  --abhu-cardr:  14px;
  --abhu-ratio:  4 / 3;
  /* Section 9 replaces both of these. --abhu-lift is dead (the callout no
     longer overlaps anything) and --abhu-ahagap changed meaning: it is now the
     TARGET distance below the cards, not the measured air above the box. */
  --abhu-ahagap: 56px;
}


/* ---- 8.1 ONE IMAGE WINDOW ------------------------------------------------
   4/3 everywhere, `cover` everywhere, and the height is never taken from the
   photograph's own proportions.

   TWO MECHANISMS, because the two card types are built differently:

   a) `.abhx-look` - the picture is IN FLOW, so the ratio goes on the <img>.
      (Section 9 turns these into flip cards too, and the (b) mechanism below
      takes over for them; this rule stays as the pre-script state.)

   b) `.abhc-flip` - the picture is `position:absolute` and fills whatever the
      card is (that is what stops three different aspect ratios from producing
      three different card heights, see section 2). So the ratio goes on the
      WRAPPER, which is a flex item: `aspect-ratio` gives it a definite base
      height of 0.75 x its width, and `flex-grow:1` still lets it take up any
      extra height the back face needs on a narrow card. The result is an
      exact 4/3 window wherever the front face is the taller one, and a
      slightly taller window - never a shorter one - where the copy needs it.
      The old `min-height` floors are released because that ratio now decides. */
body.ab-hcx .elementor-9063 .abhx-look .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--abhu-ratio);
  object-fit: cover;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f > .elementor-widget-image {
  aspect-ratio: var(--abhu-ratio);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 0; }
@media (min-width: 1440px) {
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 0; }
}

/* ---- 8.2 ART DIRECTION, one photograph at a time ------------------------
   `object-position` is set from where the SUBJECT is in each source file, not
   from a house style. Every value below was read off the actual image.

   Upstairs stays hot   8982, 2560x2560. RE-READ 2026-08-28. The value here
                        was `50% 0%`, calibrated for 8920 - a cut-away diagram
                        whose subject was its top 215px. That file was replaced
                        by a photograph of two homeowners and the crop was
                        never re-taken, so the card was top-aligned on a shot
                        that has nothing at the top: 18% of ceiling, then the
                        pair, then a third of a card of legs and floor.

                        A SQUARE source in a 1.11:1 slot only ever loses 9.6%
                        of its height, so no `object-position` can frame this
                        - there is nothing to slide. It needs a punch-in, and
                        that is what the scale below is. Read off the file:
                        attic hatch 0-18%, heads 25%, faces 28-40%, shoulders
                        43%, torsos to 78%, shorts to 88%. The crop that comes
                        out is source y 11.5-82% and x 11-89% - the raised hand
                        and the open hatch stay in, the empty foreground goes,
                        and the two of them carry the frame. Aspect is
                        untouched (one uniform scale), so nothing distorts.
   The AC never cycles  8946, 623x507. A cleaned crop of 7767, which carried an
                        orange fan-blade watermark top-left and a transparent
                        letterbox band top and bottom - that transparent band
                        is what made this card look mis-cropped next to its
                        neighbours, because it rendered as white above the
                        title. The new file is all photograph, so centre is
                        correct and stays correct at any ratio.
   Summer bills jump    8973, 2880x2880 - replaced 8917, the swing set, on
                        2026-08-27. A SQUARE source, so this slot only takes
                        about 9% of its height and almost nothing has to go.
                        Read off the file: hair starts at 11%, chin at 43%, the
                        spread of paperwork ends at 86%, and the last 12% is
                        empty table front. 25% trims a sliver of ceiling and a
                        sliver of that empty table and keeps the head and every
                        bill in frame. The old 100% belonged to the swing set,
                        whose subject WAS the bottom of the file; on this one it
                        shaves the top of his head.
   Gable                7355, 2560x903. Far wider than 4/3, so only the
                        HORIZONTAL position does anything. 48% keeps the left
                        gable vent - the thing the card is about - 85px inside
                        the frame instead of 58px.
   Aero                 8768, 2560x1479. Also wider than 4/3; the fan sits at
                        51% of the width, so centre frames it.
   Ultra                8571, 1448x1086 - exactly 4/3. Nothing is cropped. */
/* THE PUNCH-IN. Six classes, not four: section 8.1 above sets `transform:
   none` on `.abhc-flip .abhc-fx__f > .elementor-widget-image img` to kill
   zoom-on-hover, and that selector is (0,5,2). A four-class rule here loses
   silently - `transform-origin` applies, `transform` does not, and the card
   looks untouched. `.abhc-flip` and `.abhx-sym--hot` are the SAME element, so
   compounding them costs no markup. That hover rule is not weakened: it still
   wins on every other card, and this one now has no hover transform either -
   one static crop, applied once.

   The two values do different jobs. `object-position: 50% 40%` slides the 4/3
   window down off the ceiling - the slot is 4/3 and the source is square, so
   cover discards 25% of the height, and at the old `0%` every pixel of that
   came off the FLOOR and none off the hatch, which is why the card was a
   photograph of a ceiling with two small people under it. The 1.15 scale then
   closes the remaining distance.

   Final frame: source y 14-80%, x 6.5-93.5%. The pair fill it chest-up, both
   faces land at 28-40% of the card, the man's raised hand stays inside the top
   edge, and the lower edge cuts at the waist instead of the floor. A sliver of
   the open hatch is still there, top left, which is the whole point of the
   picture. One uniform scale, so nothing is stretched.

   CHOSEN BY RENDERING, NOT BY ARITHMETIC. Four candidates were rendered at
   card size against the untouched original; the numbers below are the one
   that won. If the photograph is ever replaced, re-run that comparison -
   these values describe THIS file and nothing else. */
body.ab-hcx .elementor-9063 .abhc-flip.abhx-sym--hot .abhc-fx__f > .elementor-widget-image img {
  object-position: 50% 40%;
  transform: scale(1.15);
  transform-origin: 50% 45%;
}
/* AC / THERMOSTAT  -  2026-09-01. The slot is 313x361 (portrait) and the
   source is 800x533, so cover discards 42.2% of the WIDTH and only the
   horizontal position does anything. The thermostat spans source x 15.4-36.8%;
   at the old centre the visible window started at x 21.1% and cut the left
   third of the dial off against the frame edge. 20% starts the window at 8.4%,
   which puts the whole dial in frame with a 7%-of-source margin outside it and
   leaves the living room, the window and the couch filling the right half. The
   vertical stays centred - the source is wider than the slot, so nothing is
   lost off the top or bottom. Chosen by rendering four candidates (50/30/20/12)
   at the real 313x361 slot, not by arithmetic. */
body.ab-hcx .elementor-9063 .abhx-sym--ac    .elementor-widget-image img { object-position: 20% 50%; }
body.ab-hcx .elementor-9063 .abhx-sym--bills .elementor-widget-image img { object-position: 50% 25%; }
body.ab-hcx .elementor-9063 .abhx-look--gable .elementor-widget-image img { object-position: 48% 50%; }
body.ab-hcx .elementor-9063 .abhx-look--aero  .elementor-widget-image img { object-position: 50% 50%; }
body.ab-hcx .elementor-9063 .abhx-look--ultra .elementor-widget-image img { object-position: 50% 50%; }


/* ---- 8.3 ONE SEPARATION DEVICE -----------------------------------------
   A 3px Breeze Home Green rule between the picture and the text on every card
   in the system. It does three jobs at once - the clean image/text separation
   the brief asks for, the green accent, and the family resemblance - which is
   why there is one device here and not three. The flip card's back face has
   used exactly this rule since the morning round; the front now matches it. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__f .abhx-sym__body {
  border-top: 3px solid var(--abhu-green);
}

/* One title tier for every card on the page. Elementor sets these per widget
   at (0,3,0); this is (0,4,0), so one declaration keeps all nine honest. */
body.ab-hcx .elementor-9063 .abhx-card .abhx-card__title .elementor-heading-title {
  font-size: 21px;
  line-height: 1.26;
  font-weight: 700;
  color: var(--abhu-navy);
  text-wrap: balance;
}
body.ab-hcx .elementor-9063 .abhx-card { border-radius: var(--abhu-cardr); }

/* ---- 8.4 ONE HOVER ------------------------------------------------------
   Green edge plus depth. No lift and no image zoom anywhere, because the flip
   cards deliberately do not lift while they rotate and a page where two of
   three card families rise and the third does not is the "every section gets
   its own trick" this round exists to remove. The reveal is the motion. */
@media (hover: hover) and (pointer: fine) {
  body.ab-hcx .elementor-9063 .abhx-card:hover {
    transform: none;
    border-color: var(--abhu-green);
  }
  body.ab-hcx .elementor-9063 .abhx-card:hover .elementor-widget-image img { transform: none; }
  body.ab-hcx .elementor-9063 .abhx-band .abhx-card:hover {
    box-shadow: 0 16px 38px rgba(5, 17, 36, .16);
  }
}


/* ==========================================================================
   8.5 THE THREE RAILS
   ==========================================================================
   ONE block for all three grids, reached by the `abhc-rail` class the
   Elementor patch added to each. Native CSS scroll-snap: no carousel library,
   no autoplay, no per-breakpoint initialisation, and it degrades to an
   ordinary horizontal scroller if scroll-snap is unsupported. A card is 82%
   wide with a 4% gap, so the next card is visible from 86% of the rail - about
   14% of it peeking, ~55px on a 390px phone - which is what tells a thumb
   there is more to the right.

   IT RUNS TO 1024, NOT 767. All three grids stepped 3 -> 2 -> 1 columns, so at
   768px each one drew two cards and ORPHANED THE THIRD on its own row at half
   width. Measured before this change: the What-you'll-get cards at x24/x388
   with the third alone below, and the How-it-looks third card 27px SHORTER
   than its siblings because it was alone in its row. A tablet is a touch
   device, so the rail is the more honest interaction there, and it keeps one
   mental model from 320px to 1024px.

   `> .abhx-card` and not `> *`: every card in all three grids carries that
   class, and naming it takes the selector to (0,5,0) so it beats
   abv-hlook.css's own 86%/snap-start rule for the appearance rail rather than
   relying on source order alone. */
@media (max-width: 1024px) {

  body.ab-hcx .elementor-9063 .abhc-rail,
  body.ab-hcx .elementor-9063 .abhc-rail.e-con {
    display: flex;
    --flex-direction: row;          /* Elementor drives direction via the var */
    flex-direction: row;
    --flex-wrap: nowrap;
    flex-wrap: nowrap;
    --gap: 0px;
    gap: 0;
    grid-template-columns: none;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; /* or the swipe hijacks browser Back */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 4px 12px;        /* room for the card shadow */
  }
  body.ab-hcx .elementor-9063 .abhc-rail::-webkit-scrollbar { display: none; }

  /* 82% OF THE RAIL, CAPPED AT 560px - and the cap is the important half.
     82% is what produces the peek on a phone, but at the top of this range it
     produces a card 788px WIDE, and a 4/3 window plus a 96px title band makes
     that card 688px TALL. Measured on a 1024x768 tablet in landscape: one card
     filling the entire viewport with the section heading pushed off the top.
     The cap holds the card to 560/516px there, which still reads as one
     primary card with the next one clearly peeking. Below ~683px viewport
     width the 82% governs again and the phone behaviour is unchanged. */
  body.ab-hcx .elementor-9063 .abhc-rail.e-con > .abhx-card {
    flex: 0 0 min(82%, 560px);
    width: min(82%, 560px);         /* voids Elementor's own --width */
    max-width: none;
    min-width: 0;
    margin-inline-end: 4%;
    scroll-snap-align: center;
  }
  body.ab-hcx .elementor-9063 .abhc-rail.e-con > .abhx-card:last-child {
    margin-inline-end: 0;
  }

  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 0; }

  /* THE DOTS ROW EARNS ITS PADDING HERE.
     On the rail the callout's previous sibling is the dots, not the cards, and
     a callout tucking up 18px would otherwise eat 18px off the bottom of every
     48px dot target. This padding is what the callout overlaps instead, so the
     tap targets stay whole. */
  body.ab-hcx .elementor-9063 .abhx-symband .abhc-dots { padding-block-end: 22px; }

  body.ab-hcx .elementor-9063 { --abhu-lift: 22px; --abhu-ahagap: 138px; }
}

/* Phones. Must stay AFTER the 1024 block. */
@media (max-width: 767px) {
  body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx { min-height: 0; }
  body.ab-hcx .elementor-9063 .abhx-card .abhx-card__title .elementor-heading-title {
    font-size: 19px;
  }
  body.ab-hcx .elementor-9063 { --abhu-lift: 18px; }
}


/* ==========================================================================
   8.6 THE GREEN CALLOUT, CENTRED AND TUCKED IN
   ==========================================================================
   It was left-aligned under the first card and 76px clear of the grid, which
   read as a separate statement that happened to follow. Centring it under the
   whole group and lifting it INTO the block is what makes it the cards'
   conclusion.

   THE NUMBER IS MEASURED, NOT GUESSED. `--abhu-ahagap` is the air that sits
   above the green box at rest (44px band gap + 20px widget gap + its own 12px
   margin, less that margin = 64px at desktop, more once the dots row appears).
   abv-hux.js re-measures it per breakpoint and publishes `--abhu-ahatuck`, so
   the overlap is exact even if the band's gap is ever edited in Elementor; the
   calc() here is the JavaScript-off fallback, never the primary path.

   Motion is unchanged from the morning round and stays restrained: opacity
   0->1 with an 18px rise over 620ms, once, then it is stationary for good. It
   does not follow the scroll and it does not bounce, spin or zoom. */
body.ab-hcx .elementor-9063 .abhc-aha {
  position: relative;
  z-index: 3;                       /* the box and its shadow sit over the cards */
  /* THE WIDGET CARRIES `elementor-widget__width-initial`, i.e. a custom width
     set in Elementor, which resolves to `width: var(--width)` - and the band's
     inner is a flex COLUMN, so a narrow item sits hard LEFT. Measured before
     this: the green box ran 38 -> 746 inside a card group running 32 -> 1393,
     641px off centre, which is exactly the "too far to the left" in the brief.
     Giving the wrapper the full measure and letting the box centre itself
     inside it (margin-inline:auto, section 3) is what centres it under the
     whole group at every width. */
  width: 100%;
  max-width: 100%;
  --container-widget-width: 100%;
  align-self: stretch;
}
body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
  margin-block-start: var(--abhu-ahatuck, calc(-1 * (var(--abhu-ahagap) + var(--abhu-lift))));
  max-width: 760px;
  box-shadow: 0 22px 48px rgba(5, 17, 36, .22);
}
@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title { max-width: 620px; }
}


/* ==========================================================================
   8.7 SPACING REPAIR AFTER THE TWO REMOVALS
   ==========================================================================
   Removing "What we'll ask" left the two NAVY bands adjacent, and removing
   "Built to make this easy" left the two WHITE ones adjacent. Both seams get
   an intentional edge and a trimmed pair of paddings so the join reads as a
   chapter break rather than a doubled gap. Desktop only: Elementor's own
   tablet and mobile paddings sit in earlier media queries and are already
   tighter, and a rule outside a media query here would override them.

   The hairlines are navy-on-white and white-on-navy at low alpha - the two
   colours already in play. There is no grey on this page and this round does
   not introduce any.

   THE PADDING LIVES ON `> .e-con-inner`, NOT ON THE BAND. Elementor splits a
   BOXED container's padding: the horizontal half lands on the outer `.e-con`
   (which is why the bands read 0px 32px) and the vertical half lands on the
   inner wrapper. Measured the wrong way round first, and setting it on the
   band ADDED to the existing value instead of replacing it - 80+64 under How
   It Works and 88+72 over What You'll Get, i.e. 304px of unbroken navy where
   the seam was supposed to get tighter. The hairline does belong on the band,
   so it spans the full width and not just the boxed measure. */
   ROUND 3 UPDATE: the navy/navy seam this block was written for is gone with
   the What You'll Get band, and How It Works (navy) now meets How It Looks
   (white) - a colour change is its own boundary and needs no hairline. Only
   the white/white join at How It Looks -> FAQ still gets one. */
@media (min-width: 1025px) {
  body.ab-hcx .elementor-9063 .abhx-looks > .e-con-inner { padding-block-end: 64px; }
  body.ab-hcx .elementor-9063 .abhx-faq > .e-con-inner   { padding-block-start: 64px; }
  body.ab-hcx .elementor-9063 .abhx-faq {
    border-top: 1px solid rgba(5, 17, 36, .10);
  }
}


/* ==========================================================================
   8.8 THE FLOATING FIND MY FAN SIZE
   ==========================================================================
   Styled as the page's own primary CTA and not as a new component: 999px pill,
   2px border, Breeze Home Green fill, white 13.5px/700 uppercase Poppins with
   1.1px tracking - read off `.abhx-hero .abhx-cta` so the two are recognisably
   the same button in two places. That white-on-green is 3.26:1, which clears
   AA for large text and not for body text; it is the page's established CTA
   treatment on every green button already, so it is kept rather than
   re-decided here for one button.

   IT IS NOT INSIDE `.elementor-9063`. It is a direct child of <body>, because
   the page wrapper takes `overflow-x: clip` for the duration of the mode
   transition and a fixed child of a clipped ancestor is one browser-behaviour
   argument away from disappearing for 600ms. The trade is that abv-hcalc.js's
   delegated handler cannot see it, which is why the click is FORWARDED to the
   hero's own start link rather than re-implemented - see abv-hux.js.

   `env()` on both axes: on a phone in landscape the right inset is what keeps
   it clear of the notch, and the bottom inset clears the home indicator. */
body.ab-hcx .abhu-fab {
  position: fixed;
  z-index: 9990;                    /* under HubSpot's 9999 anchor, over the page */
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 28px;
  border: 2px solid #5C9D5E;
  border-radius: 999px;
  background: #5C9D5E;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  /* reset.css underlines every <a> and every :visited with it. */
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(5, 17, 36, .30);
  /* The resting state. `pointer-events:none` matters: a 0-opacity pill still
     swallows taps in the corner of the hero otherwise. */
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .34s var(--abhu-ease), transform .34s var(--abhu-ease),
              box-shadow .24s var(--abhu-ease);
  --abhu-ease: cubic-bezier(.2, .7, .3, 1);
}
body.ab-hcx .abhu-fab:visited { color: #FFFFFF; text-decoration: none; }
body.ab-hcx .abhu-fab.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Tool mode: the calculator is on screen, so a button that opens it is noise -
   and it must never sit over the calculator's own controls. */
body.ab-hcx.abv-hc-tool .abhu-fab,
body.ab-hcx.abv-hc-done .abhu-fab { display: none; }

@media (hover: hover) and (pointer: fine) {
  body.ab-hcx .abhu-fab:hover {
    transform: translateY(-1px);
    background: #487A49;            /* the page's darker green; white on it is 5.05:1 */
    border-color: #487A49;
    box-shadow: 0 18px 40px rgba(5, 17, 36, .34), 0 0 16px rgba(92, 157, 94, .34);
  }
  body.ab-hcx .abhu-fab:active { transform: translateY(0); }
}
body.ab-hcx .abhu-fab:focus-visible {
  outline: 3px solid #3993D5;
  outline-offset: 3px;
  border-radius: 999px;             /* or a page-wide focus rule squares the ends */
}

@media (max-width: 767px) {
  body.ab-hcx .abhu-fab {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
    padding: 13px 22px;
    font-size: 12.5px;
    letter-spacing: 1px;
  }
}


/* ==========================================================================
   8.9 REDUCED MOTION, for what this round added
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.ab-hcx .abhu-fab {
    transform: none;
    transition: opacity .18s linear;
  }
  body.ab-hcx .abhu-fab.is-in { transform: none; }
  body.ab-hcx .abhu-fab:hover,
  body.ab-hcx .abhu-fab:active { transform: none; }
}


/* ==========================================================================
   8.10 STILL NO HORIZONTAL OVERFLOW
   ==========================================================================
   Three rails now scroll sideways on purpose, and they must stay the only
   things that do. Each rail is a flex row of min-width:0 children inside a
   band that is already `overflow: hidden` (abv-hcalc.css section 8) or under
   `.elementor-9063 { overflow-x: clip }` (abv-hlook.css), so nothing here can
   reach the document. Belts, not braces. */
body.ab-hcx .elementor-9063 .abhc-rail { max-width: 100%; }
body.ab-hcx .elementor-9063 .abhx-look { min-width: 0; max-width: 100%; }

/* ---- 8.11 the dots, now that a rail can sit on navy ---------------------
   The inactive dot was navy at 22% alpha, which is invisible against the What
   You'll Get band. On navy it becomes white at low alpha - the same idea, the
   other way up - and the active dot stays Breeze Home Green in both places, so
   "where am I" reads identically on either ground. */
@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhx-navy .abhc-dot::before {
    background: rgba(255, 255, 255, .32);
  }
  body.ab-hcx .elementor-9063 .abhx-navy .abhc-dot[aria-current="true"]::before {
    background: var(--abhu-green);
  }
}


/* ==========================================================================
   9. ROUND 3 - THE CONCLUSION IS EARNED, AND BOTH CARD SETS ARE ONE CARD
   ==========================================================================
   Additive again. Nothing in sections 1-8 was rewritten except four small
   surgical edits, each carrying its own note in place:
     - the hover flip and the focus flip were REMOVED, not overridden
     - the reduced-motion hover/focus variants went with them
     - `--abhu-flip` 520ms -> 380ms
     - the dead `.abhc-getcard` / `.abhc-getband` selectors were deleted with
       the band they styled

   WHAT CHANGED, AND WHY

   1. A CLICK LOCKS A CARD OPEN. Hover no longer flips, mouseleave no longer
      closes, focus no longer flips. One control, one gesture, one sticky
      state, on every device. Hover keeps only an affordance: the chip fills
      and the edge goes green.

   2. THE GREEN CALLOUT IS EARNED. It starts collapsed and appears once the
      reader has explored the three scenario cards - all three opened on a
      desktop grid, or the last card reached on a touch rail. Then it stays.
      It also sits BELOW the card block with real air (56px desktop / 32px on a
      rail) instead of tucking up into it, because a conclusion is a separate
      statement and not a label attached to the cards.

   3. HOW IT LOOKS IS THE SAME CARD AS DOES THIS SOUND LIKE YOUR HOUSE.
      Same shell, same 4/3 window, same 96px title band, same `+`, same flip,
      same rail, same dots, built by the same code from a second content map.
      Front: photograph + one short line + `+`. Back: the product name, one
      short paragraph, and the series link.

   4. WHAT YOU'LL GET IS GONE from the page (Elementor, not CSS).

   PALETTE unchanged: Attic Navy #051124, Breeze Home Green #5C9D5E, White,
   Sky #3993D5. No orange, no grey, no new colours.
   ========================================================================== */

body.ab-hcx .elementor-9063 {
  --abhu-ahagap: 56px;      /* desktop: air between the card row and the box */
  --abhu-ahamax: 320px;     /* the reveal's height clamp; see 9.1 */
}


/* ==========================================================================
   9.1 THE CALLOUT: COLLAPSED, THEN EARNED
   ==========================================================================
   THE HIDDEN STATE IS GATED ON `html.abhu-js`, which ab-hoc-ux.php prints in
   <head> before first paint. The callout is now behind an interaction, so a
   scripting failure would otherwise hide the page's single most important
   sentence for good. Without the class it is simply visible, at its natural
   spacing, and nothing is lost.

   WHY `max-height` AND NOT A HEIGHT ANIMATION FROM display:none. A collapsed
   element cannot transition out of `display:none`, and the usual fix is a
   double requestAnimationFrame - which is starved wherever this page is not
   producing frames, a failure already measured on this project. `max-height`
   transitions from a real 0, with no frame scheduling of any kind. The clamp
   overshoots the content on purpose: growth simply finishes early, which is
   invisible, whereas a clamp that is too small would crop the sentence.

   TWO MARGINS, ONE PER STATE - and the hidden one is not cosmetic. A 0-height
   wrapper is still a flex ITEM, so the band's 44px row gap is applied above it
   and reads as dead space under the cards. `--abhu-ahagap-hidden` cancels
   exactly that. Both numbers are measured and published by abv-hux.js (Gap);
   the 0px fallbacks here are what a scripting failure gets, and they are safe
   in both directions.
   ========================================================================== */
/* THE MARGIN TRANSITION IS DECLARED ON `.is-in`, NOT ON THE RESTING STATE, and
   that is not a style choice. abv-hux.js measures and publishes the hidden
   margin a moment after first paint; if the resting rule could transition it,
   the page would open by quietly sliding the (invisible) callout wrapper 44px
   upward and the dead gap under the cards would take half a second to close.
   Declaring it here means the resting value snaps and only the reveal animates -
   a transition is read from the AFTER-change style, so adding the property and
   the new value together still animates. */
body.ab-hcx .elementor-9063 .abhc-aha {
  margin-block-start: 0;
  transition: max-height .52s var(--abhu-ease);
}
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha {
  max-height: 0;
  overflow: hidden;
  margin-block-start: var(--abhu-ahagap-hidden, 0px);
}
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha.is-in {
  max-height: var(--abhu-ahamax);
  margin-block-start: var(--abhu-ahagap-actual, 0px);
  transition: max-height .52s var(--abhu-ease), margin-block-start .52s var(--abhu-ease);
}
/* Added ~640ms after `.is-in`, once growth is over. Without it the clamp and
   the clip stay on for good, and the box keeps a hard edge and loses the
   shadow that makes it sit above the page. */
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha.is-open {
  max-height: none;
  overflow: visible;
}

/* The box itself. Its own top margin is zero now - the WRAPPER carries the
   spacing, because the wrapper's margin is outside the clip and the box's is
   inside it. */
body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
  margin-block-start: 0;
}
/* opacity 0 -> 1 with a 16px rise, 520ms, ease-out. It rises once and is then
   stationary for good: no scroll coupling, no bounce, no rotation, no zoom.
   The `scale(.984)` that used to be here is gone - it was imperceptible and it
   was still a zoom. */
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .52s var(--abhu-ease), transform .52s var(--abhu-ease);
}
html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha.is-in .elementor-heading-title {
  opacity: 1;
  transform: none;
}

/* THE DOTS ROW GIVES BACK ITS PADDING. It existed only so the callout could
   overlap something harmless; the callout no longer overlaps anything. */
@media (max-width: 1024px) {
  body.ab-hcx .elementor-9063 .abhx-symband .abhc-dots { padding-block-end: 0; }
  body.ab-hcx .elementor-9063 {
    --abhu-ahagap: 32px;    /* measured from the dots, which are the rail's own chrome */
    --abhu-ahamax: 360px;
  }
}
@media (max-width: 767px) {
  body.ab-hcx .elementor-9063 { --abhu-ahamax: 420px; }
}


/* ==========================================================================
   9.2 HOW IT LOOKS, REBUILT AS THE SAME FLIP CARD
   ==========================================================================
   Runtime structure, built by abv-hux.js from the second content map:

     .abhx-look.abhx-card.abhc-flip
       .abhc-fx
         .abhc-fx__f      the photograph + .abhx-sym__body (the shared band)
         .abhc-fx__b      echo + .abhc-look__name + .abhc-look__copy + link
       .abhx-look__body   EMPTIED, hidden, parked last  <- see below
       button.abhc-fx__btn

   `.abhx-look__body` IS LOAD-BEARING EVEN THOUGH IT IS EMPTY. abv-hlook.js's
   Look.paint() writes the plan chip and the Apply button with
   `body.parentNode.insertBefore(state, body.nextSibling)`. Keeping that
   container a DIRECT CHILD of the card - emptied, hidden, and moved to be the
   last flow child - is what keeps those two controls in front of the reader
   instead of behind a card back once a recommendation exists. Do not delete
   it, do not move it into a face.

   THE STACKING ORDER IS INVERTED FROM SECTION 2, and this is the part to
   understand before editing. The overlay button used to sit ABOVE the faces at
   z-index 4. That works while nothing on a face is interactive - but the
   revealed side now carries a real link, and a link under a full-card button
   is unreachable no matter what z-index it is given, because `.abhc-fx` is its
   own stacking context and the button is above the whole of it.

   So the button goes BELOW (`z-index: 0`) and `.abhc-fx` above it
   (`z-index: 1`). Nothing else changes, because both faces are already
   `pointer-events: none`: a click on the photograph, the title or the
   paragraph is not hit-tested by the face at all and lands on the button
   underneath, exactly as before. The link opts back in with
   `pointer-events: auto`, and only while the card is open.
   ========================================================================== */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx {
  position: relative;
  z-index: 1;
  /* THE CONTAINER NEEDS THIS TOO, not just the two faces - measured the hard
     way. Section 2 gives `.abhc-fx__f` and `.abhc-fx__b` pointer-events:none,
     which was enough while the button sat ABOVE them. Now that the button is
     underneath, `.abhc-fx` itself is the topmost hit-testable box over the
     whole card, and it swallowed every click: hover still worked, the flip
     never fired. `pointer-events` is inherited, so one declaration here covers
     the faces and everything in them, and the link opts back in below. */
  pointer-events: none;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn { z-index: 0; pointer-events: auto; }

/* The plan chip and the Apply button are card children below the flip, so they
   need to clear the button too. */
body.ab-hcx .elementor-9063 .abhx-look .abhx-look__state,
body.ab-hcx .elementor-9063 .abhx-look .abhx-apply { position: relative; z-index: 2; }

body.ab-hcx .elementor-9063 .abhx-look .abhc-look__anchor { display: none; }

/* ---- the revealed side ---------------------------------------------------- */

/* The product name takes the label tier the scenario cards use for "Why it
   happens", so the two backs have one hierarchy: small echo, bold line, copy. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__name .elementor-heading-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--abhu-navy);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__copy,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__copy p {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(5, 17, 36, .78);
  margin: 0;
}

/* The series link. Quiet, because the card's job is the picture and the name -
   but a real link, and the only interactive thing on either face. */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link { margin-block-end: 0; }
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--abhu-green);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:hover,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:focus,
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:focus-visible {
  background: none;
  color: #3A6440;                 /* the darker green; 5.98:1 on white */
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:focus-visible {
  outline: 3px solid var(--abhu-sky);
  outline-offset: 2px;
}
/* Clickable only while the card is open. The back face is rotated away and
   `backface-visibility: hidden` the rest of the time, so it is not hit-tested
   then either - this is the belt to that brace, and it is what makes the
   behaviour true by rule rather than by browser behaviour. */
body.ab-hcx .elementor-9063 .abhc-flip[data-flip="1"] .abhc-fx__b .abhc-look__link {
  pointer-events: auto;
}

/* The appearance band's own leftovers, now that the reveal panel is gone:
   the tag's old 12px uppercase treatment and the fit line's styling have no
   elements left to reach, and `.abhx-look__body` is hidden. Its `padding` and
   `flex` rules in abv-hlook.css are therefore inert - left alone rather than
   edited, because that file is shared with the appearance band's result mode. */


/* ==========================================================================
   9.3 THE `+` BECOMES AN `x`
   ==========================================================================
   Front face: a green `+` chip. Back face: the same chip with an `x`, in the
   same size, beside the word Close. It is decorative on both faces - the
   overlay button is the control - but it is the whole of the open/close story
   for a reader, so it is shown on EVERY device now. It used to be hidden on a
   fine pointer because the card closed itself when the mouse left.
   ========================================================================== */
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--abhu-green);
}
body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__close svg {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(92, 157, 94, .12);
}

/* An open card reads as active: the same green edge hover gives, kept while it
   is open so a row of cards shows at a glance which ones have been read. */
body.ab-hcx .elementor-9063 .abhc-flip[data-flip="1"] {
  border-color: var(--abhu-green);
}
body.ab-hcx .elementor-9063 .abhc-flip[data-flip="1"] .abhc-fx__hint {
  background: var(--abhu-green);
  color: var(--abhu-white);
}


/* ==========================================================================
   9.4 REDUCED MOTION, for what round 3 added
   ==========================================================================
   Same information, arrived at without movement: the callout appears with no
   rise and effectively no clamp animation, and the cards still cross-fade
   (section 6). Nothing here is a shortcut past the interaction - a reader with
   reduced motion still earns the conclusion the same way.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.ab-hcx .elementor-9063 .abhc-aha {
    transition: max-height .001s linear, margin-block-start .001s linear;
  }
  html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha .elementor-heading-title {
    transform: none;
    transition: opacity .18s linear;
  }
  html.abhu-js body.ab-hcx .elementor-9063 .abhc-aha.is-in .elementor-heading-title {
    transform: none;
  }
}


/* ==========================================================================
   9.5 STILL NO HORIZONTAL OVERFLOW
   ==========================================================================
   Two rails now instead of three, both flex rows of min-width:0 children
   inside bands that are already clipped. The only new out-of-flow thing round
   3 adds is nothing at all - the callout's clamp is vertical. */
body.ab-hcx .elementor-9063 .abhc-aha { max-width: 100%; }