/* =====================================================================
   premium-sunnyaid-hero.css — owner: the SunnyAid HERO builder.
   Scope: `main > section.sa-hero` (the homepage's first section) and nothing else.
   Loaded after premium-sunnyaid.css, so every token and .sa-* component comes
   from there; no hex is written here that is not already a token value.

   The template's hero (assets/scss/components/_hero.scss + _funfact.scss, and
   shots/sunnyaid/home-01.png / ndis-01.png) is a split: a cream copy column with
   a white pill kicker, a Recoleta heading whose emphasis words carry the
   hand-drawn ring, a yellow pill primary next to a solid secondary, and a
   funfact row of `icon + figure + label`; the photograph sits in a rounded frame
   in the other column. That is what this file builds out of the shipped nodes.

   SPECIFICITY, measured against the four layers that fight for this section:
     premium.css            main > section:first-of-type ...        (0,1,2)
     premium-compact.css    main > section:first-of-type ... !imp   (0,1,2)
     premium-luxe.css       html.luxe body main > sec:first [data-elevate] !imp (0,3,4)
                            .luxe main [data-elevate="hero"] *      (0,2,1)
     premium-sunlit.css     html.luxe.sunlit main > section:first   (0,3,2)
     premium-sunnyaid.css   html.luxe.sunlit.sunnyaid main ...      (0,4,2)
   so the prefix used throughout is `html.luxe.sunlit.sunnyaid main > section.sa-hero`
   = (0,5,3), plus !important wherever the loser carries one.

   Measured text pairs in this band (sRGB, against the real composite):
     --sa-ink   #0f2e38 on cream #F7F5F2   11.4:1   h1
     --sa-ink            on white #FFFFFF  13.5:1   the three figures
     --sa-slate #5D6A83  on cream           5.0:1   lede, source line
     --sa-slate          on white           5.5:1   funfact labels
     --sa-teal  #0B3948  on white           12.0:1  kicker pill
     --sa-ink   on --sa-yellow #FFD470      10.1:1  primary CTA
     #fff       on --sa-teal                12.0:1  secondary CTA, smile caption, trust row
     --sa-yellow-soft #FFE3A8 on --sa-teal   9.6:1  the smile's CTA before it is pressed
   ===================================================================== */

/* ---------------------------------------------------------------------
   H1. The band. The footage no longer paints the section, so the section is
   a plain cream block on the template's rhythm. `display:block` and
   `min-height:0` undo the shipped `flex min-h-screen items-center`.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero {
  display: block !important;
  min-height: 0 !important;
  padding-top: clamp(6.25rem, 9.5vw, 9.5rem) !important;
  padding-bottom: clamp(2.5rem, 4.6vw, 4rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--sa-cream);
  /* the media frame is taken flush to the viewport's right edge below, out of the gutter that
     exists outside the 80rem container. That maths uses 100vw, which on a platform with a
     classic (space-taking) scrollbar is a few px wider than the section's own box, so the
     bleed is clipped here rather than allowed to become document overflow. Nothing in this
     band needs to escape horizontally; the accent dot escapes vertically, which clip leaves
     alone. */
  overflow-x: clip;
  overflow-y: visible;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;                      /* matches every band-inner below it */
}
@media (min-width: 768px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap { padding-inline: 2rem; }
}

/* the two columns. The shipped `lg:grid-cols-[1.15fr_0.85fr]` is (0,1,0), so this replaces it. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    --sa-hero-gap: clamp(2rem, 4.2vw, 4.5rem);   /* named: the smile plate's reach measures against it */
    gap: var(--sa-hero-gap);
    align-items: stretch;
  }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__copy { min-width: 0; }

/* ---------------------------------------------------------------------
   H1. The media frame: the template's rounded photo panel, with the shipped
   footage, its scrim and its pause control inside it.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
  box-shadow: 0 34px 70px -44px rgba(11, 57, 72, 0.55);
}
@media (min-width: 768px) and (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
    aspect-ratio: auto;
    min-height: 28rem;
  }
}
/* The template's hero image runs OFF the viewport's right edge (.hero-right_img
   { margin-right: -235px } in _hero.scss, and see home-01.png / ndis-01.png): that is what
   makes the cream/photo split read as a split rather than as a card with a forgotten margin.
   So at >=1024 the media takes the whole gutter to its right - the container's own padding
   plus whatever sits outside the 80rem box - and the frame's right-hand corners are squared
   off, because there is no longer a corner there. The section's overflow-x: clip absorbs the
   few px that 100vw over-reports where a scrollbar takes space, so the edge is exactly flush
   and never becomes document overflow. The first version of this stopped 68px short at 1440,
   which reads as a margin somebody forgot rather than as a deliberate split. */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media {
    margin-right: calc(-1 * (2rem + max(0px, (100vw - 80rem) / 2)));
  }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
    border-radius: var(--sa-radius-panel) 0 0 var(--sa-radius-panel);
  }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame > video {
  border-radius: inherit;
  filter: saturate(1.04) contrast(1.04) brightness(0.98);
}
/* the shipped scrim carried the whole headline over the footage; inside a frame it only has to
   keep the pause control legible, so it becomes a soft bottom wash (0,5,2 beats sunnyaid's 0,4,2) */
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-scrim {
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 43, 55, 0.28) 0%, rgba(8, 43, 55, 0) 34%, rgba(8, 43, 55, 0) 58%, rgba(8, 43, 55, 0.62) 100%) !important;
}
/* the template's two accent dots beside the hero image (.hero-right-dot in _hero.scss), flat fills */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px; height: 18px; top: -9px; right: 2.25rem;
  border-radius: 999px;
  background: var(--sa-yellow);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   H2. Kicker, heading, lede. The foundation already gives every hero kicker
   the translucent-on-dark pill (it used to sit over footage); on cream it
   goes back to the template's white pill with teal text.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .td-kicker.sa-hero__kicker {
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-pill);
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero h1.sa-hero__h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--sa-ink) !important;
  text-wrap: balance;
}
@media (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero h1.sa-hero__h1 { max-width: 20ch; }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero p.sa-hero__lede {
  margin: clamp(1.25rem, 1.8vw, 1.75rem) 0 0;
  max-width: 34rem;
  font-family: var(--sa-font-body);
  font-size: clamp(1rem, 1.3vw, 1.0625rem) !important;
  line-height: 1.75;
  color: var(--sa-slate) !important;
}

/* ---------------------------------------------------------------------
   H2. The CTA pair: the shipped .btn-primary-dark is already the yellow pill
   through the foundation's re-point, so it only gains the template's pill
   height and the masked arrow. The second button was an outline-on-dark
   ghost, which is invisible on cream: it becomes the solid secondary.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__cta > a.btn {
  min-height: 3.25rem;
  padding: 1rem 1.875rem;
  border-radius: var(--sa-radius-pill);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2 {
  border: 0 !important;
  background: var(--sa-teal) !important;
  color: #fff !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2:hover,
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2:focus-visible {
  background: var(--sa-teal-deep) !important;
  color: #fff !important;
}
/* the shipped decorative "↗" becomes the template's own arrow_rgiht.svg, masked so it takes the
   button's text colour. The glyph itself is kept in the DOM (it is the node's only child) and only
   collapsed, so the button's accessible name and its extracted copy are unchanged. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__cta .sa-hero__btn-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn1 .sa-hero__btn-ico { background: var(--sa-ink); }
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2 .sa-hero__btn-ico { background: #fff; }
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__cta .sa-hero__btn-ico { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__cta > a.btn:hover .sa-hero__btn-ico { transform: translate(3px, -3px); }

/* ---------------------------------------------------------------------
   H5. The smile mark. One instance, the shipped sunlit widget, promoted to a
   full-width teal feature plate under the CTA row - the way the template
   treats a feature card - with the dotted halftone on its own ::after so
   nothing about the widget's own box, semantics or labels changes.
   Its caption and its CTA are both readable before anything is tapped.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile {
  position: relative;
  z-index: 3;
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile {
  margin-top: 0;
  max-width: none;
  padding: clamp(1rem, 1.6vw, 1.5rem);
  gap: clamp(1rem, 1.8vw, 1.75rem);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
  border: 1px solid rgba(255, 212, 112, 0.45);
  box-shadow: 0 26px 60px -38px rgba(11, 57, 72, 0.75);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #000 100%);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile > * { position: relative; z-index: 1; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 7rem; height: 7rem; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__line {
  max-width: 26rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.4;
  color: #fff !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link {
  margin-top: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--sa-radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
}
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 6rem; height: 6rem; }
}
/* under 480 the disc and the text cannot both have room: the plate stacks, which also makes the
   mark bigger on a phone, and the caption and the CTA pill each get the full width of the plate. */
@media (max-width: 479px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 6.5rem; height: 6.5rem; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__line { max-width: none; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 8rem; height: 8rem; }
}
/* at >=1200 the plate reaches out of its column and across the gutter: the template's floating
   feature card. It used to reach ~18px FURTHER, across the frame's own left edge, which put it
   on top of the footage's bottom-left corner - and that corner is where the pause control now
   has to live, because the bottom-RIGHT one is the viewport corner the fixed chat launcher
   owns. The reach is now measured against the column gap itself, so the plate stops a fixed
   0.75rem short of the frame at EVERY width and can never sit over a control. Kept off
   narrower viewports, where there is no gutter to reach into. */
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile {
    margin-right: calc(-1 * max(0px, var(--sa-hero-gap, 0px) - 0.75rem));
  }
}

/* ---------------------------------------------------------------------
   H3. The funfact row. The three cited NDIA figures, moved out of the dark
   stat card into the template's `icon + figure + label` row of white cards,
   directly above the source line that qualifies them. Nothing counts: the
   .rd-mask plates from rich-hero are carried over untouched and still rise
   as whole objects once premium.js stamps .pm-in on the section.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts {
  margin-top: clamp(2.5rem, 4.4vw, 4.25rem);
  margin-bottom: 0 !important;
}
/* undo premium-luxe's frosted stat card, which carries !important at (0,3,4) */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-in {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* ...and its blanket `* { color:#fff }` at (0,2,1) */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-in * { color: inherit; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
@media (min-width: 700px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
  }
}
@media (min-width: 700px) and (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.3vw, 1.25rem);
  padding: clamp(1.125rem, 1.7vw, 1.625rem) clamp(1.125rem, 1.8vw, 1.75rem);
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-radius-card);
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-card);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.3vw, 52px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--sa-yellow);
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact-ico::before {
  content: "";
  width: 54%;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--sa-ico) center / contain no-repeat;
  mask: var(--sa-ico) center / contain no-repeat;
}
/* three decorative glyphs, authored here as masks: no new file, no new alt text.
   1 a group of people (active providers) · 2 a shield struck through (unregistered) ·
   3 a rising line (the 6% -> 90% target) */
html.sunnyaid .sa-hero__fact-ico--providers {
  --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-1.6A4.4 4.4 0 0 0 11.6 15H6.4A4.4 4.4 0 0 0 2 19.4V21'/%3E%3Ccircle cx='9' cy='7.5' r='3.9'/%3E%3Cpath d='M22 21v-1.6a4.4 4.4 0 0 0-3.2-4.23'/%3E%3Cpath d='M15.6 3.85a3.9 3.9 0 0 1 0 7.3'/%3E%3C/svg%3E");
}
html.sunnyaid .sa-hero__fact-ico--unregistered {
  --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.5-3.7 7.5-9.4V5.2L12 2.5 4.5 5.2v6.9c0 5.7 7.5 9.4 7.5 9.4Z'/%3E%3Cpath d='M9.6 9.6l4.8 4.8'/%3E%3Cpath d='M14.4 9.6l-4.8 4.8'/%3E%3C/svg%3E");
}
html.sunnyaid .sa-hero__fact-ico--target {
  --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5l5.5-5.5 3.5 3.5L21 6.5'/%3E%3Cpath d='M15 6.5h6v6'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact-body { min-width: 0; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig {
  display: block;
  font-family: var(--sa-font-heading) !important;
  font-size: clamp(1.5rem, 2.7vw, 2.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
  font-variant-numeric: normal;
}
/* premium-sunlit.css line 75 paints every masked hero figure --sun with !important at (0,4,2):
   on white that is 1.4:1, so it has to lose here. (0,7,3) + !important. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig * { color: inherit !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fact-label {
  display: block;
  margin-top: 5px;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(0.875rem, 1vw, 1rem) !important;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--sa-slate) !important;
}
/* the old card's vertical rule has no counterpart in a funfact row (kept in the DOM, no copy) */
html.sunnyaid .sa-hero__sep { display: none !important; }

html.luxe.sunlit.sunnyaid main > section.sa-hero p.sa-hero__source {
  margin: clamp(1rem, 1.6vw, 1.375rem) 0 0;
  max-width: 62rem;
  font-family: var(--sa-font-body);
  font-size: 0.8125rem !important;
  line-height: 1.6;
  color: var(--sa-slate) !important;
}

/* ---------------------------------------------------------------------
   H4. The credential bar. It carries a white wordmark, so it keeps a dark
   ground: the template's teal panel with the dotted halftone. Everything
   premium.css already says about .hero-trust (white 85% caps, the badge
   circles, the ABN link) is correct on teal and is left alone; only the
   border and the drawn hairline are re-pointed, and the hairline is lifted
   out onto the cream above the panel where it reads as a divider.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__trustbar {
  --sa-hero-barpad: clamp(1.25rem, 2.2vw, 2.25rem);
  margin-top: clamp(2.75rem, 4vw, 3.75rem);
  padding: clamp(1.125rem, 1.7vw, 1.5rem) var(--sa-hero-barpad);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
}
/* THE PANEL MUST NOT ARRIVE BEFORE ITS CONTENTS. rich-hero reveals the four credentials on a
   ladder held back by --rd-t0 (1.6s while the row is in view at load, then +.15s and +90ms per
   child): tuned for a 1px hairline sitting just under the fold, but this is now a solid 89px
   teal panel a thousand pixels down the page, so the hold read as a rendering fault - measured,
   all four children at opacity 0 for the first ~800ms and only settled at ~2.5s.
   Two changes, both scoped to this instance:
     1. the panel's own ground is withheld until rich-hero.js stamps .rd-in, then fades in with
        the children. `:not(:has())` is the fail-safe direction: where :has is unsupported the
        selector is invalid, the rule drops, and the solid ground above still paints.
     2. --rd-t0 is compressed to .3s. It is an inline style on the row (rich-hero.js line 15),
        so this needs !important. It is the one number of another builder's that I have moved,
        and only for this section's copy of the row.
   Both are html.pm-gated, so reduced motion and no-JS keep the solid panel from the start. */
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar {
  /* one number drives both halves, so the ground can never run ahead of the credentials again:
     the panel starts fading at --sa-hero-bar-t0 and the first credential .15s after it (that
     .15s is rich-hero's own offset), so they overlap for most of their travel. */
  --sa-hero-bar-t0: 0.3s;
  /* +0.15s is rich-hero's own offset between --rd-t0 and its first child, so the ground and
     the first credential begin on the same frame rather than the ground leading. Measured:
     ground 0.45s -> 0.95s, credentials 0.45s -> 1.17s. */
  transition: background-color 0.5s ease calc(var(--sa-hero-bar-t0) + 0.15s);
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar .rd-hero-trust {
  --rd-t0: var(--sa-hero-bar-t0) !important;
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar::before {
  transition: opacity 0.5s ease calc(var(--sa-hero-bar-t0) + 0.15s);
}
/* `transition: none` on the withheld state matters: a transition is chosen from the
   AFTER-change style, so with none here the ground drops out instantly the moment html.pm
   lands (which is before first paint), and only the arrival - the has-.rd-in state above -
   is animated. With the delayed transition left on both sides the 0.3s delay held the ground
   painted while the credentials were still at zero, i.e. it did not fix anything. Measured. */
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar:not(:has(.rd-in)) {
  background-color: transparent;
  transition: none;
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar:not(:has(.rd-in))::before {
  opacity: 0;
  transition: none;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-trust {
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent !important;
  gap: 1rem 1.75rem;
}
/* four credentials across a full-width bar: spread them, as the template spreads its own
   credential strips, rather than leaving half the panel empty */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-trust { justify-content: space-between; }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .rd-hero-trust::before {
  content: "";
  position: absolute;
  height: 1px;
  top: -3.25rem;
  left: calc(-1 * var(--sa-hero-barpad));
  right: calc(-1 * var(--sa-hero-barpad));
  background: rgba(11, 57, 72, 0.16);
}
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .rd-hero-trust::before { top: -2.25rem; }
}
/* THE PAUSE CONTROL. It lives inside the frame now, so its shipped offsets (zz-uxpro.css via
   premium-pages.css: left 1.25rem / bottom 1.25rem, plus a viewport-derived clamp at >=1024)
   are re-pointed to the FRAME's corner. It must be the BOTTOM-LEFT corner:
     - bottom-right is the viewport corner the fixed GHL chat launcher reserves. Measured, the
       first version of this file parked it there and document.elementFromPoint at the button's
       centre returned CHAT-WIDGET at 1280x800 and 1440x900, so a real pointer click never
       reached it and a 5s+ autoplaying video could not be stopped by mouse or touch at the two
       commonest desktop sizes. Keyboard still worked and uxpro reported hasPauseBtn=true,
       which is exactly why a harness pass missed it. WCAG 2.2.2 needs the pointer route the
       control exists to provide.
     - and it must be the TOP-left, not the bottom-left. The frame is tall, so between 414 and
       1023 the footage is already playing on screen at load while the frame's BOTTOM is not
       (measured at 768x1024: footage from y=656, a bottom-pinned control at y=988..1032, i.e.
       8px past the fold), which would leave a playing video with no visible way to stop it
       until you scroll. Pinned to the frame's top-left it is on screen whenever any of the
       footage is, at every width, and it is the same corner at every width rather than moving.
       Below 414 the frame's top is itself under the fold, so control and footage arrive
       together.
   The scrim's 0.28 top wash plus the disc's own fill carry its contrast there; sampled from
   real composited pixels below. The smile plate is capped above so it stops short of the
   frame and can never cover this either. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-video-toggle {
  left: 1.25rem !important;
  right: auto !important;
  top: 1.25rem !important;
  bottom: auto !important;
  z-index: 5;
  /* the disc is its own ground, so the glyph never depends on which frame of footage is behind
     it: teal-deep at .72 over anything keeps white above 7:1. */
  background: rgba(8, 43, 55, 0.72);
  border-color: rgba(255, 255, 255, 0.34);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-video-toggle:hover {
  background: rgba(8, 43, 55, 0.88);
}

/* ---------------------------------------------------------------------
   THE BUNDLE'S HERO PARALLAX, re-pointed. The compiled Astro bundle
   (_astro/V2Layout.astro_...js) drives two scroll-linked effects written for a
   hero that was exactly one viewport of footage:
     [data-hero-inner]                 -> translate3d(0,-190px) scale(.88),
                                          opacity 1 -> 0 by 0.71vh, blur 0 -> 7px
     main > section:first-of-type video -> scale(1.28), blur 0 -> 4px
   Both are set as inline styles, so only !important can reach them. The first is
   now actively wrong: this band is 1.35 viewports tall, so the funfact row, the
   NDIA source line and the credential bar all sat inside the element being faded
   to zero and could never be read (measured: opacity 0 at scrollY 662 with the
   trust bar at y=243, i.e. in the middle of the screen). The second was a
   background zoom; inside a 24px frame it reads as the footage swelling out of
   its own edges. So both are stopped, and REPLACED, in kind, by:
     .sa-hero__frame  a fadeInUp entrance (the template's own wow.js device, and
                      a like-for-like stand-in for premium-motion's pm-video-in,
                      which the !important below also stops)
     the footage       a slow drift inside the frame, driven by --sa-hero-vy from
                      sunnyaid-hero.js, which is the template's parallax rather
                      than a full-page zoom. Both are .pm-gated, so reduced
                      motion gets neither and loses nothing.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
/* the bundle also hangs its pointer parallax on [data-hero-stat] (data-cursor="0.9"):
   a floating stat card could drift with the cursor, a row of cited figures should not. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts { transform: none !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame > video {
  transform: translate3d(0, var(--sa-hero-vy, 0px), 0) scale(1.08) !important;
  filter: saturate(1.04) contrast(1.04) brightness(0.98) !important;
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__frame {
  animation: sa-hero-frame-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@keyframes sa-hero-frame-in {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   FOCUS RINGS, re-measured. premium-sunnyaid.css section 14 gives every
   control in `main > section:first-of-type` a YELLOW ring at (0,6,3),
   because this band used to be footage. It is cream now, and #FFD470 on
   #F7F5F2 is 1.4:1 - nowhere near the 3:1 a focus indicator needs. So the
   band's default goes back to the teal ring (#0B3948 on cream is 11.4:1),
   and only the three dark surfaces inside it - the smile plate, the
   credential bar and the footage frame - keep the yellow one (yellow on
   #0B3948 is 8.9:1, and on the footage it is the only thing that reads).
   Both rules carry .sa-hero__wrap so the dark exception, at (0,7,4), is
   strictly more specific than the band default at (0,7,3).
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap :is(a, button, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap :is(.sun-smile, .sa-hero__trustbar, .sa-hero__frame) :is(a, button, summary):focus-visible {
  outline: 2px solid var(--sa-yellow) !important;
  outline-offset: 3px;
}
/* The ONE rule in this file that reaches outside the band, and it is a consequence of the band:
   sunnyaid-hero.js takes `body.hero-dark` off (the header must not render white-on-transparent
   over a cream hero), which retires premium-sunnyaid.css's `body.hero-dark header:not(.pm-scrolled)`
   yellow ring. The header's own links and its language toggle have no author focus colour of their
   own - the foundation builder recorded that as a pre-existing gap - so without this they fall back
   to the UA default over a near-white bar. Gated on html.sa-hero-light, which only sunnyaid-hero.js
   sets, and only on the homepage. (0,6,3). */
html.luxe.sunlit.sunnyaid.sa-hero-light header:not(.pm-scrolled) :is(a, button):focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
  /* AND the ring has to be teal on the FIRST frame. This rule does win - re-measured, the
     computed outline-color settles at rgb(11,57,72) - but the nav links and the language
     toggle carry Tailwind's `transition-colors`, whose property list includes outline-color at
     .15s, so the ring was fading in FROM Tailwind's own --ring grey, oklab(.708 0 0 / .5),
     about 1.5:1 on the near-white bar. Sampled at t=0 / 60 / 150ms it ran grey -> mid -> teal,
     which is how a verifier reading the computed style on the focus frame saw grey and read
     the rule as dead. A ring that starts below 3:1 is not a ring, so outline-color comes off
     the transition list here; the hover colour fade the class was added for is kept. */
  transition-property: color, background-color, border-color !important;
}

/* ---------------------------------------------------------------------
   Reduced motion / no JS. Everything above is static; the only motion this
   file introduces is the arrow nudge and it is already .pm-gated. The
   static design is complete: the ring is fully drawn, the figures sit in
   place, the hairline is at full width.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid main > section.sa-hero .rd-hero-trust::before { transform: none !important; transition: none !important; }
  html.sunnyaid main > section.sa-hero :is(.sa-hero__btn-ico, .sun-smile, .sun-smile *) { transition: none !important; animation: none !important; }
  html.sunnyaid main > section.sa-hero .sa-hero__facts-in { animation: none !important; }
  html.sunnyaid main > section.sa-hero .sa-hero__frame { animation: none !important; }
  html.sunnyaid main > section.sa-hero .sa-hero__frame > video { transform: scale(1.08) !important; transition: none !important; }
}