/* Home page (revamp): static hero with the enquiry form, trust strip, install tiles,
   rebate band, why row, process accordion and CTA band. Shared components from site.css. */

/* Hero ------------------------------------------------------------------- */
/* Every homepage section has equal top and bottom space. The hero sits under the fixed header, so its top padding is
   the header height (77px, or 114px for the compact header with its quote bar) plus the same 80px as the bottom. */
.page-home .hh-hero { position: relative; padding: calc(77px + 80px) var(--pad-x) 80px; background-color: #1b2238; background-size: cover; background-position: center 20%; color: #fff; }
/* Navy shading keeps the copy readable on the left and thins out towards the skyline on the right. */
.page-home .hh-hero::before { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(12,17,32,.86) 0%, rgba(12,17,32,.7) 38%, rgba(12,17,32,.38) 62%, rgba(12,17,32,.22) 100%),
    linear-gradient(180deg, rgba(12,17,32,.10) 0%, rgba(12,17,32,0) 35%, rgba(12,17,32,.35) 100%); }
/* Warm late-sun glow from the upper right. */
.page-home .hh-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background:
    radial-gradient(ellipse 55% 60% at 92% 0%, rgba(255,186,96,.55) 0%, rgba(255,160,64,.22) 38%, rgba(255,150,50,0) 70%),
    radial-gradient(ellipse 30% 30% at 98% 4%, rgba(255,226,170,.45) 0%, rgba(255,226,170,0) 70%); }
.hh-hero__grid { z-index: 1; }
/* Late-afternoon sun (decorative, CSS only): warm cast from the upper right, a flare in the corner and a glare
   streak down the panels in the gap between the copy and the form card. */
.hh-hero__sun, .hh-hero__sun span { position: absolute; inset: 0; pointer-events: none; }
.hh-sun__grade { mix-blend-mode: soft-light; background: radial-gradient(ellipse 85% 100% at 88% 0%, rgba(255,166,64,.95) 0%, rgba(255,150,50,.55) 42%, rgba(255,140,40,0) 80%); }
.hh-sun__flare { mix-blend-mode: screen; background:
    radial-gradient(circle at 84% 2%, rgba(255,248,228,.95) 0, rgba(255,228,165,.72) 2.5%, rgba(255,194,108,.38) 8%, rgba(255,170,80,0) 20%),
    radial-gradient(ellipse 45% 30% at 84% 2%, rgba(255,204,128,.38), rgba(255,204,128,0) 72%); }
.hh-sun__streak { mix-blend-mode: screen; background: linear-gradient(68deg, rgba(255,196,120,0) 54.4%, rgba(255,196,120,.2) 55.2%, rgba(255,236,190,.62) 55.8%, rgba(255,196,120,.2) 56.4%, rgba(255,196,120,0) 57.2%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 34%, rgba(0,0,0,.55) 60%, transparent 86%); mask-image: linear-gradient(to bottom, transparent 26%, #000 34%, rgba(0,0,0,.55) 60%, transparent 86%); }
.hh-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 60px; align-items: start; max-width: var(--container); margin: 0 auto; }
.hh-hero__copy { padding-top: 24px; }
.hh-hero__eyebrow { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.page-home .hh-hero h1 { margin: 0 0 20px; font-size: 52px; line-height: 1.1; color: #fff; }
.hh-hero__sub { max-width: none; margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: #fff; }
.hh-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 32px; }
.hh-hero__ctas .btn { min-height: 54px; padding: 0 28px; font-size: 17px; }
.page-home .hh-hero .btn--outline { color: #fff; border-color: #fff; }
.page-home .hh-hero .btn--outline:hover { background: #fff; color: var(--navy); }
.hh-hero__proof { display: grid; gap: 10px; margin: 0; }
.hh-hero__proof li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: #fff; }
.hh-hero__proof li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); }
.hh-hero__proof li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.hh-hero__form { scroll-margin-top: 20px; }
/* Translucent navy form card. The form inside is the shared PipeReply embed; it switches itself to white labels and
   a transparent background at the heights set below (see _src/pipereply-form-custom.css). */
.hh-card { background: rgba(24,34,60,.66); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 24px 24px 8px; box-shadow: 0 24px 60px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hh-card { background: rgba(24,34,60,.92); } }
.page-home .hh-card p.hh-card__eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.page-home .hh-card h2.hh-card__title { margin: 0 0 16px; font-family: var(--font-head); font-weight: 900; font-size: 32px; line-height: 1.15; color: #fff; }
.hh-card__form iframe { display: block; width: 100%; height: 446px; border: 0; background: transparent; }
#quote-bottom { scroll-margin-top: 20px; }

/* Partner marquee ------------------------------------------------------ */
.hh-trust { padding: 24px 0; background: #fff; border-bottom: 1px solid var(--border); overflow: hidden; }
.hh-trust__head { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 var(--pad-x); margin-bottom: 14px; }
.page-home .hh-trust p.hh-trust__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #13243a; text-align: center; }
.hh-marquee__toggle { position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cfd4dc; background: #fff; color: #13243a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 150ms, color 150ms; }
.hh-marquee__toggle:hover { border-color: #13243a; }
.hh-marquee__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.hh-marquee__icon { display: block; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hh-marquee__toggle.is-paused .hh-marquee__icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.hh-marquee__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.hh-marquee__track { display: flex; width: max-content; animation: hh-marquee var(--marquee-duration, 36s) linear infinite; will-change: transform; }
.hh-marquee__group { flex: 0 0 auto; min-width: 100vw; display: flex; align-items: center; justify-content: space-around; gap: 64px; margin: 0; padding: 4px 32px; list-style: none; }
.hh-marquee__group li { flex: 0 0 auto; }
.hh-marquee__logo { display: flex; align-items: center; justify-content: center; height: 88px; border-radius: 6px; }
.hh-marquee__logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.hh-marquee__logo img { width: auto; height: 100%; object-fit: contain; }
.hh-marquee__logo--cec { height: 78px; } .hh-marquee__logo--cec img { max-width: 224px; }
.hh-marquee__logo--sec { height: 80px; } .hh-marquee__logo--sec img { max-width: 136px; }
.hh-marquee__logo--sig { height: 60px; } .hh-marquee__logo--sig img { max-width: 230px; }
.hh-marquee__logo--ist { height: 88px; } .hh-marquee__logo--ist img { max-width: 96px; }
.hh-marquee__logo--award { height: 78px; } .hh-marquee__logo--award img { max-width: 120px; }
.hh-marquee__logo--hua { height: 86px; } .hh-marquee__logo--hua img { max-width: 106px; }
.hh-marquee:hover .hh-marquee__track, .hh-marquee:focus-within .hh-marquee__track, .hh-marquee.is-paused .hh-marquee__track { animation-play-state: paused; }
@keyframes hh-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .hh-marquee__track { animation: none; width: auto; justify-content: center; }
  .hh-marquee__group[aria-hidden="true"], .hh-marquee__toggle { display: none; }
  .hh-marquee__group { min-width: 0; flex-wrap: wrap; justify-content: center; gap: 20px 48px; }
  .hh-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* Built around your home: four cards ---------------------------------------- */
.hh-tiles { position: relative; overflow: hidden; padding: 64px var(--pad-x); background:
    radial-gradient(ellipse 38% 55% at 96% 0%, rgba(255,184,92,.35) 0%, rgba(255,184,92,.12) 40%, rgba(255,184,92,0) 72%),
    #faf6f0; }
.hh-tiles__curves { position: absolute; top: 0; left: 0; width: 100%; height: 260px; color: rgba(246,155,35,.45); pointer-events: none; }
.hh-tiles__inner { position: relative; max-width: var(--container); margin: 0 auto; }
.hh-tiles__head { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; margin: 0 0 36px; }
.page-home .hh-tiles p.hh-tiles__eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-tiles h2 { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(34px, 3.9vw, 58px); line-height: 1.08; letter-spacing: -.01em; color: #13243a; }
.page-home .hh-tiles p.hh-tiles__lead { flex: 0 1 380px; margin: 0; padding-left: 32px; border-left: 1px solid rgba(19,36,58,.25); font-size: 19px; line-height: 1.5; color: #13243a; }
.hh-tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hh-card4 { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; padding: 20px 20px 22px; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; background: #13243a; box-shadow: 0 10px 28px rgba(19,36,58,.18); border: 1px solid rgba(19,36,58,.08); transition: box-shadow 200ms, border-color 200ms; }
.hh-card4__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.hh-card4::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(19,36,58,.98) 0%, rgba(19,36,58,.92) 30%, rgba(19,36,58,.55) 50%, rgba(19,36,58,.08) 72%, rgba(19,36,58,.2) 100%); }
.hh-card4__tag { position: absolute; top: 20px; left: 20px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.85); background: rgba(19,36,58,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.hh-card4__body { display: flex; flex-direction: column; }
.page-home .hh-card4 h3 { margin: 0 0 10px; font-family: var(--font-head); font-weight: 900; font-size: 29px; line-height: 1.12; color: #fff; }
.hh-card4__text { display: block; min-height: 3em; margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.92); }
.hh-card4__cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 6px 7px 6px 18px; white-space: nowrap; border: 1.5px solid rgba(255,255,255,.85); border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; transition: border-color 200ms, background-color 200ms; }
.hh-card4__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #f69b23; color: #13243a; transition: transform 200ms; }
.hh-card4__arrow svg { width: 20px; height: 20px; }
.hh-card4:hover .hh-card4__img, .hh-card4:focus-visible .hh-card4__img { transform: scale(1.04); }
.hh-card4:hover .hh-card4__cta, .hh-card4:focus-visible .hh-card4__cta { border-color: #f69b23; background: rgba(246,155,35,.12); }
.hh-card4:hover .hh-card4__arrow, .hh-card4:focus-visible .hh-card4__arrow { transform: translateX(2px); }
.hh-card4:focus-visible { outline: 3px solid #f69b23; outline-offset: 3px; }
.hh-card4:hover { box-shadow: 0 16px 36px rgba(19,36,58,.26); }
/* Four columns only where the longest button label (Explore residential solar) fits on one line. */
/* Card-specific image treatment (original photos; crop and tone only) */
.hh-card4--rebate .hh-card4__img { object-position: 50% 42%; }
.hh-card4--rebate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(165deg, #a3abb8 0%, #7d8697 45%, #465066 100%); mix-blend-mode: multiply; pointer-events: none; }
.hh-card4--battery .hh-card4__img { object-position: 58% 50%; }
.hh-card4--sig .hh-card4__img { object-position: 88% 55%; }
.hh-card4--sig { border: 1.5px solid #f69b23; box-shadow: 0 10px 28px rgba(19,36,58,.18), 0 0 0 4px rgba(246,155,35,.12), 0 0 36px rgba(246,155,35,.28); }
.hh-card4--solar .hh-card4__img { object-position: 60% 50%; }
@media (prefers-reduced-motion: reduce) {
  .hh-card4, .hh-card4__img, .hh-card4__cta, .hh-card4__arrow { transition: none; }
  .hh-card4:hover .hh-card4__img, .hh-card4:focus-visible .hh-card4__img, .hh-card4:hover .hh-card4__arrow, .hh-card4:focus-visible .hh-card4__arrow { transform: none; }
}
@media (max-width: 1399px) {
  .hh-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hh-card4 { min-height: 480px; }
}
@media (max-width: 1024px) {
  .hh-tiles { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .hh-trust__head { padding: 0 16px; }
  .hh-marquee__toggle { right: 16px; }
}
@media (max-width: 900px) {
  .hh-tiles__head { flex-direction: column; align-items: flex-start; }
  .page-home .hh-tiles p.hh-tiles__lead { flex: none; padding-left: 16px; font-size: 17px; }
}
@media (max-width: 639px) {
  .hh-tiles { padding: 44px var(--pad-x); }
  .hh-tiles__grid { grid-template-columns: 1fr; gap: 16px; }
  .hh-card4 { min-height: 440px; padding: 18px 18px 20px; }
  .page-home .hh-card4 h3 { font-size: 26px; }
  .hh-card4__text { min-height: 0; font-size: 16px; margin-bottom: 16px; }
  .hh-marquee__group { gap: 40px; }
  .hh-trust__head { padding: 0 56px; }
  .page-home .hh-trust p.hh-trust__label { font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
  .hh-marquee__logo--cec { height: 58px; } .hh-marquee__logo--sec { height: 60px; } .hh-marquee__logo--sig { height: 44px; } .hh-marquee__logo--ist { height: 64px; } .hh-marquee__logo--award { height: 56px; } .hh-marquee__logo--hua { height: 64px; }
}

/* Battery rebates, explained ------------------------------------------------ */
.hh-rb { position: relative; overflow: hidden; isolation: isolate; padding: 56px var(--pad-x); color: #fff; background:
    radial-gradient(ellipse 34% 42% at 100% 0%, rgba(255,178,84,.38) 0%, rgba(255,160,64,.15) 45%, rgba(255,150,50,0) 75%),
    linear-gradient(160deg, #172b45 0%, #13243a 45%, #0f1e33 100%); }
.hh-rb__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(255,214,160,.13); stroke-width: 1; }
.hh-rb__inner { max-width: var(--container); margin: 0 auto; }
.hh-rb__grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 40fr); gap: 0 1.7%; align-items: stretch; }
.hh-rb__main { display: flex; flex-direction: column; padding-top: 12px; }
.page-home .hh-rb p.hh-rb__eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-rb h2 { margin: 0 0 22px; font-family: var(--font-head); font-weight: 900; font-size: clamp(32px, 3.45vw, 64px); line-height: 1.06; letter-spacing: -.012em; color: #fff; }
.page-home .hh-rb p.hh-rb__lead { max-width: 700px; margin: 0 0 32px; font-size: 21px; line-height: 1.38; color: #c6cfdc; }
.hh-rb__cards { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hh-rb__card { display: flex; flex-direction: column; padding: 22px 30px 32px; border: 1px solid rgba(160,176,204,.28); border-radius: 12px; background: rgba(28,46,74,.45); }
.hh-rb__map { display: block; flex: 0 0 auto; align-self: flex-start; height: 68px; width: 48px; margin: 0 0 18px; color: #f69b23; }
.hh-rb__map--au { width: 75px; }
.page-home .hh-rb p.hh-rb__kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-rb__card h3 { margin: 0 0 14px; font-family: var(--font-head); font-weight: 900; font-size: clamp(22px, 1.85vw, 30px); line-height: 1.15; color: #fff; }
.page-home .hh-rb p.hh-rb__desc { min-height: 4.2em; margin: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(160,176,204,.28); font-size: 16.5px; line-height: 1.4; color: #c6cfdc; }
.hh-rb__list { margin: 10px 0 24px; padding: 0; list-style: none; }
.hh-rb__list li { display: flex; align-items: center; gap: 16px; min-height: 39px; font-size: 16px; color: #fff; }
.hh-rb__check { flex: 0 0 24px; width: 24px; height: 24px; color: #f69b23; }
.hh-rb__link { margin-top: auto; align-self: flex-start; font-size: 18px; font-weight: 700; color: #f69b23; text-decoration: none; }
.hh-rb__link span { display: inline-block; margin-left: 6px; transition: transform 150ms; }
.hh-rb__link:hover span { transform: translateX(3px); }
.hh-rb__link:hover { color: #ffb14f; }
.hh-rb a:focus-visible { outline: 2px solid #f69b23; outline-offset: 3px; border-radius: 3px; }
.hh-rb__media { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; padding: 10px 7px 7px; border: 1.5px solid #f69b23; border-radius: 16px; overflow: hidden; background: #d9d4cb; }
.hh-rb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; }
.page-home .hh-rb p.hh-rb__caption { position: relative; align-self: flex-end; margin: 0 12px 14px 0; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hh-rb__panel { position: relative; padding: 30px 36px 32px; border-radius: 14px; background: #f8f3ea; color: #13243a; }
.page-home .hh-rb__panel h3 { margin: 0 0 6px; font-family: var(--font-head); font-weight: 900; font-size: 28px; line-height: 1.15; color: #13243a; }
.page-home .hh-rb p.hh-rb__panel-sub { margin: 0 0 18px; font-size: 18px; color: #3d4a60; }
.hh-rb__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.hh-rb__opt { position: relative; display: block; cursor: pointer; }
.hh-rb__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hh-rb__opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border: 1px solid #c9c4ba; border-radius: 999px; background: #fdfbf7; font-size: 15px; font-weight: 700; color: #13243a; text-align: center; transition: background-color 150ms, border-color 150ms, color 150ms; }
.hh-rb__opt:hover span { border-color: #13243a; }
.hh-rb__opt input:checked + span { background: #13243a; border-color: #13243a; color: #fff; }
.hh-rb__opt input:focus-visible + span { outline: 2px solid #f69b23; outline-offset: 2px; }
.hh-rb__btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 6px; background: #f69b23; font-size: 17px; font-weight: 700; color: #13243a; text-decoration: none; transition: background-color 150ms; }
.hh-rb__btn:hover { background: #ffab3d; color: #13243a; }
.hh-rb .hh-rb__btn:focus-visible { outline: 2px solid #13243a; outline-offset: 2px; }
.hh-rb__foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(160,176,204,.28); text-align: center; }
.page-home .hh-rb p.hh-rb__note { margin: 0 0 14px; font-size: 13px; color: #b9c3d2; }
.hh-rb__quote { display: inline-block; padding-bottom: 5px; border-bottom: 2px solid #f69b23; font-size: 15px; font-weight: 700; color: #f69b23; text-decoration: none; }
.hh-rb__quote:hover { color: #ffb14f; border-color: #ffb14f; }
@media (prefers-reduced-motion: reduce) { .hh-rb__link span, .hh-rb__opt span, .hh-rb__btn { transition: none; } .hh-rb__link:hover span { transform: none; } }
/* Columns stack once the photo column is too narrow for the three retailer options in a row. */
@media (max-width: 1319px) {
  .hh-rb__card { padding-left: 24px; padding-right: 24px; }
  .page-home .hh-rb p.hh-rb__desc { min-height: 5.6em; }
}
@media (max-width: 1179px) {
  .hh-rb__grid { grid-template-columns: 1fr; gap: 28px; }
  .page-home .hh-rb p.hh-rb__desc { min-height: 4.2em; }
  .hh-rb__media { min-height: 0; }
  .hh-rb__media::before { content: ""; display: block; height: 300px; }
  .hh-rb__img { object-position: 100% 40%; }
}
@media (max-width: 1024px) {
  .hh-rb { padding: 44px var(--pad-x); }
}
@media (max-width: 767px) {
  .hh-rb__cards { grid-template-columns: 1fr; }
  .page-home .hh-rb p.hh-rb__lead { font-size: 18px; }
  .hh-rb h2 br { display: none; }
  .page-home .hh-rb p.hh-rb__desc { min-height: 0; }
  .hh-rb__card { padding: 20px 20px 24px; }
  .page-home .hh-rb__card h3 { font-size: 25px; }
  .hh-rb__map { height: 56px; width: 40px; margin-bottom: 16px; }
  .hh-rb__map--au { width: 62px; }
  .hh-rb__media::before { height: 250px; }
  .hh-rb__img { height: 72%; object-position: 100% 62%; }
  .hh-rb__panel { padding: 22px 18px 20px; }
  .page-home .hh-rb__panel h3 { font-size: 23px; }
  .page-home .hh-rb p.hh-rb__panel-sub { font-size: 16px; }
}
@media (max-width: 419px) {
  .hh-rb__options { grid-template-columns: 1fr 1fr; }
  .hh-rb__opt:last-child { grid-column: 1 / -1; }
}

/* Solar & battery questions (homepage FAQ) ------------------------------------ */
.hh-fq { position: relative; overflow: hidden; isolation: isolate; padding: 76px var(--pad-x); color: #fff; background:
    radial-gradient(ellipse 22% 30% at 100% 0%, rgba(255,190,100,.55) 0%, rgba(255,160,60,.22) 40%, rgba(255,150,50,0) 72%),
    linear-gradient(165deg, #172b45 0%, #13243a 50%, #0f1e33 100%); }
.hh-fq__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(160,180,210,.14); stroke-width: 1; }
.hh-fq__inner { max-width: var(--container); margin: 0 auto; }
/* Text keeps its reading width; the photo takes the rest of the row at a fixed height, so there is no empty gap. */
.hh-fq__top { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 24px 48px; align-items: center; margin: 0 0 36px; }
.page-home .hh-fq p.hh-fq__eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-fq h2 { margin: 0 0 18px; font-family: var(--font-head); font-weight: 900; font-size: clamp(34px, 3.95vw, 64px); line-height: 1.06; letter-spacing: -.015em; color: #fff; }
.page-home .hh-fq p.hh-fq__intro { max-width: 620px; margin: 0; font-size: 20px; line-height: 1.45; color: #c6cfdc; }
.hh-fq__photo { overflow: hidden; height: 280px; border: 1.5px solid #f69b23; border-radius: 12px; background: #1d2c40; }
.hh-fq__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Two independent question columns; one answer open at a time across both (script: [data-faq]). */
.hh-fq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; }
.hh-fq__list { display: flex; flex-direction: column; gap: 12px; }
.hh-fq__item { border: 1px solid rgba(160,176,204,.3); border-radius: 14px; background: rgba(28,46,74,.45); transition: background-color 150ms, border-color 150ms; }
.hh-fq__item.is-open { border-color: #f8f3ea; background: #f8f3ea; }
.page-home .hh-fq h3.hh-fq__q { margin: 0; font: inherit; }
.hh-fq__btn { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 76px; margin: 0; padding: 18px 26px 18px 28px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.3; color: #fff; }
.hh-fq__item.is-open .hh-fq__btn { color: #13243a; padding-top: 24px; padding-bottom: 10px; min-height: 0; }
.hh-fq__btn:focus-visible { outline: 2px solid #f69b23; outline-offset: 3px; }
.hh-fq__icon { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border: 2px solid #f69b23; border-radius: 50%; }
.hh-fq__icon::before, .hh-fq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; margin: -1.2px 0 0 -7px; border-radius: 1px; background: #f69b23; }
.hh-fq__icon::after { transform: rotate(90deg); }
.hh-fq__item.is-open .hh-fq__icon { background: #f69b23; }
.hh-fq__item.is-open .hh-fq__icon::before { background: #fff; }
.hh-fq__item.is-open .hh-fq__icon::after { display: none; }
.hh-fq__btn:hover .hh-fq__icon { background: rgba(246,155,35,.15); }
.hh-fq__item.is-open .hh-fq__btn:hover .hh-fq__icon { background: #e88b12; }
.hh-fq__a { padding: 0 40px 26px 28px; color: #3f4b60; }
.page-home .hh-fq__a p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #3f4b60; }
.page-home .hh-fq__a p:last-child { margin-bottom: 0; }
.page-home .hh-fq__a p.hh-fq__more { margin-top: 18px; }
.hh-fq__more a { font-size: 17px; font-weight: 700; color: #13243a; text-decoration: underline; text-underline-offset: 4px; }
.hh-fq__more a:hover { color: #0b1626; text-decoration-color: #f69b23; }
.page-home .hh-fq__a p.hh-fq__src { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e3dccf; font-size: 13.5px; color: #5b6576; }
.hh-fq__src a { font-size: 13.5px; }
.hh-fq__call { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 24px; padding: 18px 24px; border: 1px solid rgba(160,176,204,.3); border-radius: 12px; background: rgba(28,46,74,.45); }
.hh-fq__call-icon { flex: 0 0 56px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1.5px solid #f69b23; border-radius: 50%; color: #f69b23; }
.hh-fq__call-icon svg { width: 28px; height: 28px; }
.hh-fq__call-body { flex: 1 1 280px; }
.page-home .hh-fq p.hh-fq__call-title { margin: 0 0 2px; font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.3; color: #fff; }
.page-home .hh-fq p.hh-fq__call-text { margin: 0; font-size: 15px; line-height: 1.4; color: #c6cfdc; }
.hh-fq__call-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hh-fq__call-or { color: #8f9bb0; font-size: 15px; margin: 0 6px 0 10px; }
.hh-fq__call-link { font-size: 17px; font-weight: 700; color: #f69b23; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.hh-fq__call-link:hover { color: #ffb14f; }
.hh-fq__arrow { display: inline-block; margin-left: 0; color: #f69b23; font-weight: 700; }
.hh-fq a:focus-visible { outline: 2px solid #f69b23; outline-offset: 3px; border-radius: 3px; }
.hh-fq__item.is-open a:focus-visible { outline-color: #13243a; }
@media (prefers-reduced-motion: reduce) { .hh-fq__item { transition: none; } }
@media (max-width: 1100px) {
  .hh-fq__top { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .hh-fq__btn { font-size: 18px; min-height: 68px; padding: 16px 18px 16px 20px; }
  .hh-fq__a { padding: 0 24px 22px 20px; }
}
@media (max-width: 1024px) {
  .hh-fq { padding: 56px var(--pad-x) 56px; }
}
@media (max-width: 860px) {
  .hh-fq__top { grid-template-columns: 1fr; }
  .hh-fq__photo { height: auto; aspect-ratio: 16 / 8; }
  .hh-fq__cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .page-home .hh-fq p.hh-fq__intro { font-size: 17px; }
  .hh-fq__btn { min-height: 64px; padding: 16px 16px 16px 18px; gap: 14px; }
  .hh-fq__item.is-open .hh-fq__btn { padding-top: 18px; }
  .hh-fq__icon { flex-basis: 32px; width: 32px; height: 32px; }
  .hh-fq__a { padding: 0 18px 20px; }
  .page-home .hh-fq__a p, .hh-fq__more a { font-size: 16px; }
  .hh-fq__call { padding: 18px; gap: 14px; }
  .hh-fq__call-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .hh-fq__call-icon svg { width: 24px; height: 24px; }
  .hh-fq__call-or { margin: 0 4px; }
  .hh-fq h2 br { display: none; }
}

/* How the process works ------------------------------------------------------- */
.hh-pr { position: relative; overflow: hidden; isolation: isolate; padding: 48px var(--pad-x); color: #13243a; background:
    radial-gradient(ellipse 26% 42% at 100% 0%, rgba(255,196,110,.55) 0%, rgba(255,205,130,.2) 45%, rgba(255,210,140,0) 75%),
    #fbf6ee; }
.hh-pr__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(222,170,110,.28); stroke-width: 1; }
.hh-pr__inner { max-width: var(--container); margin: 0 auto; }
.hh-pr__head { display: flex; align-items: center; gap: 32px; margin: 0 0 12px 12px; }
.page-home .hh-pr p.hh-pr__eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f07b1e; }
.page-home .hh-pr h2 { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(34px, 4.35vw, 70px); line-height: 1.02; letter-spacing: -.025em; color: #13243a; }
.page-home .hh-pr p.hh-pr__intro { flex: 0 1 372px; align-self: stretch; display: flex; align-items: center; margin: 20px 0 0; padding-left: 32px; border-left: 2px solid #f07b1e; font-size: 23px; line-height: 1.3; color: #13243a; }
.hh-pr__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; margin: 0; padding: 36px 0 0; list-style: none; }
.hh-pr__steps::before { content: ""; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 2px; background: #f07b1e; }
.hh-pr__step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 38px 20px 14px; border: 1px solid #ece4d8; border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(19,36,58,.05); text-align: center; }
.hh-pr__num { position: absolute; top: -33px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-left: -32px; border: 3px solid #f07b1e; border-radius: 50%; background: #13243a; font-family: var(--font-head); font-weight: 900; font-size: 24px; color: #fff; }
.hh-pr__icon { width: 80px; height: 80px; margin: 0 0 10px; }
.page-home .hh-pr__step h3 { margin: 0 0 10px; max-width: 250px; text-wrap: balance; font-family: var(--font-head); font-weight: 900; font-size: 29px; line-height: 1.12; letter-spacing: -.01em; color: #13243a; }
.page-home .hh-pr p.hh-pr__desc { flex: 1; max-width: 262px; margin: 0 0 14px; font-size: 17.5px; line-height: 1.4; color: #4a5568; text-align: left; }
.page-home .hh-pr p.hh-pr__label { align-self: stretch; margin: 0; padding-top: 12px; border-top: 1px solid rgba(240,123,30,.35); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #f07b1e; }
.hh-pr__more { margin-top: 16px; border: 1px solid #d9d2c6; border-radius: 10px; background: #fff; }
.hh-pr__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 55px; padding: 8px 24px 8px 28px; list-style: none; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #13243a; }
.hh-pr__summary::-webkit-details-marker { display: none; }
.hh-pr__summary::marker { content: ""; }
.hh-pr__summary:focus-visible { outline: 2px solid #f07b1e; outline-offset: 3px; border-radius: 10px; }
.hh-pr__plus { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #f07b1e; }
.hh-pr__plus::before, .hh-pr__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; margin: -1.2px 0 0 -7px; border-radius: 1px; background: #fff; }
.hh-pr__plus::after { transform: rotate(90deg); }
.hh-pr__more[open] .hh-pr__plus::after { display: none; }
.hh-pr__more-body { padding: 4px 28px 26px; border-top: 1px solid #ece4d8; }
.page-home .hh-pr__more-body h3 { margin: 22px 0 8px; font-family: var(--font-head); font-weight: 900; font-size: 24px; color: #13243a; }
.page-home .hh-pr__more-body h4 { margin: 18px 0 6px; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #13243a; }
.page-home .hh-pr__more-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: #3f4b60; }
.hh-pr__banner { position: relative; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); min-height: 212px; margin: 15px -24px 0; border-radius: 20px; overflow: hidden; background: #13243a; color: #fff; }
.hh-pr__banner-text { position: relative; z-index: 1; padding: 30px 20px 22px 38px; }
.page-home .hh-pr p.hh-pr__banner-eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-pr p.hh-pr__banner-title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 900; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.page-home .hh-pr p.hh-pr__banner-sub { margin: 0 0 16px; font-size: 19px; line-height: 1.4; color: rgba(255,255,255,.9); }
.hh-pr__banner-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hh-pr__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 6px; background: #f69b23; font-size: 18px; font-weight: 700; color: #13243a; text-decoration: none; transition: background-color 150ms; }
.hh-pr__btn:hover { background: #ffab3d; color: #13243a; }
.hh-pr__tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; }
.hh-pr__tel svg { width: 22px; height: 22px; color: #fff; }
.hh-pr__tel span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.hh-pr__tel:hover { color: #ffd9a3; }
.hh-pr a:focus-visible { outline: 2px solid #f69b23; outline-offset: 3px; border-radius: 4px; }
.hh-pr__banner-img { position: relative; margin-left: -60px; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.hh-pr__banner-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hh-pr__banner-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255,190,100,.35), rgba(255,190,100,0) 70%); mix-blend-mode: soft-light; }
@media (prefers-reduced-motion: reduce) { .hh-pr__btn { transition: none; } }
@media (max-width: 1279px) {
  .page-home .hh-pr__step h3 { font-size: 24px; }
  .page-home .hh-pr p.hh-pr__desc { font-size: 16px; }
  .hh-pr__banner { margin-left: 0; margin-right: 0; }
}
@media (max-width: 1100px) {
  .hh-pr__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 52px; }
  .hh-pr__steps::before { display: none; }
}
@media (max-width: 1024px) {
  .hh-pr { padding: 40px var(--pad-x); }
  .hh-pr__head { margin-left: 0; }
}
@media (max-width: 767px) {
  .hh-pr__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-home .hh-pr p.hh-pr__intro { flex: none; margin: 0; padding-left: 18px; font-size: 19px; }
  .hh-pr h2 br { display: none; }
  .hh-pr__banner { grid-template-columns: 1fr; }
  .hh-pr__banner-text { padding: 26px 20px 22px; }
  .hh-pr__banner-img { order: 2; height: 200px; margin-left: 0; clip-path: none; }
  .page-home .hh-pr p.hh-pr__banner-sub { font-size: 17px; }
  .hh-pr__summary { padding: 8px 16px 8px 18px; font-size: 17px; }
  .hh-pr__more-body { padding: 4px 18px 20px; }
}
@media (max-width: 639px) {
  .hh-pr__steps { grid-template-columns: 1fr; }
  .page-home .hh-pr p.hh-pr__desc { max-width: none; }
}

/* Customer reviews ------------------------------------------------------------ */
.hh-rv { position: relative; overflow: hidden; isolation: isolate; padding: 56px var(--pad-x); color: #fff; background:
    radial-gradient(ellipse 22% 32% at 100% 0%, rgba(255,190,100,.5) 0%, rgba(255,160,60,.18) 42%, rgba(255,150,50,0) 72%),
    linear-gradient(165deg, #172b45 0%, #13243a 50%, #0f1e33 100%); }
.hh-rv__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(160,180,210,.12); stroke-width: 1; }
.hh-rv__inner { max-width: var(--container); margin: 0 auto; }
.hh-rv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 32px; margin: 0 0 28px; }
.page-home .hh-rv p.hh-rv__eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-rv h2 { margin: 0 0 8px; font-family: var(--font-head); font-weight: 900; font-size: clamp(32px, 4vw, 64px); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.page-home .hh-rv p.hh-rv__sub { margin: 0; font-size: 24px; line-height: 1.35; color: #c6cfdc; }
.hh-rv__top-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 44px; padding: 0 26px; border: 1.5px solid #f69b23; border-radius: 999px; font-size: 17px; font-weight: 700; color: #f69b23; text-decoration: none; white-space: nowrap; transition: background-color 150ms; }
.hh-rv__top-link:hover { background: rgba(246,155,35,.12); color: #ffb14f; }
.hh-rv__ext { width: 14px; height: 14px; }
.hh-rv__widget { min-height: 80px; margin: 0 0 20px; }
.hh-rv__banner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; padding: 18px 20px 18px 28px; border: 0; border-radius: 14px; background: linear-gradient(100deg, #f69b23 0%, #f8a93e 55%, #ffc063 100%); box-shadow: 0 14px 34px rgba(246,155,35,.28); }
.page-home .hh-rv p.hh-rv__banner-title { margin: 0; padding-left: 22px; border-left: 3px solid #13243a; font-family: var(--font-head); font-weight: 900; font-size: 31px; line-height: 1.2; letter-spacing: -.01em; color: #13243a; }
.hh-rv__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 30px; border-radius: 999px; background: #13243a; font-size: 17px; font-weight: 700; color: #fff; text-decoration: none; transition: background-color 150ms; }
.hh-rv__btn:hover { background: #0b1626; color: #fff; }
.hh-rv .hh-rv__banner a:focus-visible { outline-color: #13243a; }
.hh-rv a:focus-visible, .hh-rv button:focus-visible { outline: 2px solid #f69b23; outline-offset: 3px; border-radius: 4px; }
.hh-rv .hh-rv__top-link:focus-visible, .hh-rv .hh-rv__btn:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .hh-rv__top-link, .hh-rv__btn { transition: none; } }
@media (max-width: 1024px) {
  .hh-rv { padding: 48px var(--pad-x); }
  .hh-rv__head { flex-direction: column; }
  .hh-rv__top-link { margin-top: 0; }
}
@media (max-width: 767px) {
  .page-home .hh-rv p.hh-rv__sub { font-size: 18px; }
  .hh-rv__banner { flex-direction: column; align-items: stretch; padding: 20px 18px; }
  .page-home .hh-rv p.hh-rv__banner-title { font-size: 24px; padding-left: 16px; }
  .hh-rv__btn { justify-content: center; }
}

/* Lower form + SigenStor video ------------------------------------------------ */
.hh-cv { position: relative; isolation: isolate; overflow: hidden; padding: 110px var(--pad-x); color: #fff; background: #1b2238 url('/assets/img/photo-from-cole-2-1920w.jpg') center 18% / cover no-repeat; }
.hh-cv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
    linear-gradient(180deg, rgba(12,17,32,0) 0%, rgba(12,17,32,.32) 28%, rgba(12,17,32,.72) 60%, rgba(12,17,32,.82) 100%),
    linear-gradient(90deg, rgba(12,17,32,.35) 0%, rgba(12,17,32,.1) 50%, rgba(12,17,32,.35) 100%); }
.hh-cv::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; background:
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(255,190,100,.55) 0%, rgba(255,160,64,.2) 40%, rgba(255,150,50,0) 72%); }
.hh-cv__inner { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 49fr); column-gap: 3%; align-items: stretch; max-width: var(--container); margin: 0 auto; }
/* Both columns share the row height: the form card stretches (its content centred) and the phone strip sits at the
   bottom of the right column, so the card and the strip start and end level. */
.hh-cv__form { display: flex; }
.hh-cv__form > .hh-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.hh-cv__side { display: flex; flex-direction: column; }
.hh-card--lower { padding: 30px 28px 12px; border-bottom: 3px solid #f69b23; }
.page-home .hh-card--lower p.hh-card__eyebrow { margin-bottom: 8px; font-size: 20px; letter-spacing: .04em; }
.page-home .hh-card--lower h2.hh-card__title { margin-bottom: 20px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.05; }
.page-home .hh-cv p.hh-cv__eyebrow { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #f69b23; }
.page-home .hh-cv h2.hh-cv__title { margin: 0 0 10px; font-family: var(--font-head); font-weight: 900; font-size: clamp(32px, 3.9vw, 58px); line-height: 1.05; letter-spacing: -.015em; color: #fff; }
.page-home .hh-cv p.hh-cv__sub { margin: 0 0 22px; font-size: 21px; line-height: 1.4; color: rgba(255,255,255,.92); }
.hh-cv__side > p, .hh-cv__side > h2 { text-shadow: 0 2px 14px rgba(8,14,28,.75), 0 1px 3px rgba(8,14,28,.6); }
.hh-cv__player { flex: 0 0 auto; margin-bottom: 18px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.4); border-radius: 16px; background: #0b1220; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.hh-cv__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.hh-cv__call { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding: 14px 24px 14px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(24,34,60,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hh-cv__call { background: rgba(24,34,60,.92); } }
.hh-cv__call-icon { flex: 0 0 56px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-right: 4px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.hh-cv__call-icon svg { width: 26px; height: 26px; }
.page-home .hh-cv p.hh-cv__call-text { flex: 1 1 auto; margin: 0; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.25); font-size: 20px; font-weight: 700; color: #fff; }
.hh-cv__call-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 26px; font-weight: 800; color: #f69b23; text-decoration: none; white-space: nowrap; }
.hh-cv__call-link:hover { color: #ffb14f; }
.hh-cv a:focus-visible { outline: 2px solid #f69b23; outline-offset: 3px; border-radius: 4px; }
/* Stack before the form column drops under 400px wide (the form would switch to one column inside a 446px frame). */
@media (max-width: 1100px) {
  .hh-cv__inner { grid-template-columns: 1fr; row-gap: 40px; max-width: 680px; }
}
@media (max-width: 1024px) {
  .hh-cv { padding: 64px var(--pad-x); }
}
@media (max-width: 767px) {
  .hh-card--lower { padding: 22px 16px 6px; }
  .page-home .hh-card--lower p.hh-card__eyebrow, .page-home .hh-cv p.hh-cv__eyebrow { font-size: 16px; }
  .page-home .hh-cv p.hh-cv__sub { font-size: 18px; }
  .hh-cv__call { padding: 14px 16px; gap: 10px 14px; }
  .hh-cv__call-icon { flex-basis: 44px; width: 44px; height: 44px; margin-right: 0; }
  .page-home .hh-cv p.hh-cv__call-text { padding-left: 0; border-left: 0; font-size: 17px; }
  .hh-cv__call-link { flex: 1 1 100%; font-size: 22px; }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .page-home .hh-hero { padding-top: calc(114px + 80px); }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hh-hero__grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; }
  .page-home .hh-hero h1 { font-size: 44px; }
}
@media (max-width: 1024px) {
  /* Header is a white bar here, so the hero starts under it */
  .hh-sun__streak { display: none; }
  .hh-sun__grade { opacity: .7; }
  .page-home .hh-hero { padding: 36px var(--pad-x); }
  .page-home .hh-hero::before { background: rgba(12,17,32,.8); }
  .hh-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .hh-hero__copy { padding-top: 0; }
  .hh-hero__eyebrow { font-size: 13px; margin-bottom: 10px; }
  .page-home .hh-hero h1 { font-size: 32px; margin-bottom: 14px; }
  .hh-hero__sub { font-size: 16px; margin-bottom: 18px; }
  .hh-hero__ctas { gap: 10px; margin-bottom: 18px; }
  .hh-hero__ctas .btn { flex: 1 1 100%; }
  .hh-hero__proof { gap: 6px; }
  .hh-hero__proof li { font-size: 14px; }
}
@media (max-width: 767px) {
  .hh-card { padding: 20px 16px 4px; border-radius: 12px; }
  .page-home .hh-card h2.hh-card__title { font-size: 26px; }
}
/* At 465px and below the embed (viewport minus 2x16px gutters, 2x16px card padding, 2x1px border) is under 400px wide, so the
   form runs in one column; 750px sits in its navy height band. Applies to the hero and lower cards. */
@media (max-width: 465px) {
  .hh-card__form iframe { height: 750px; }
}