/* CriaHub's cyan-to-royal-blue spectrum, on the established dark surfaces. */
:root{--q-brand-gradient:linear-gradient(135deg,#01a4ff 0%,#1d4ed8 52%,#2563eb 100%);--q-atmosphere:radial-gradient(ellipse at 100% 0%,#01a4ff20,transparent 52%),radial-gradient(ellipse at 0% 100%,#1d4ed823,transparent 58%),linear-gradient(145deg,#020204,#061327 65%,#020204)}
.q-hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--q-photo-position-x,55%) 50%;filter:blur(12px);scale:1.035}
.q-hero{--q-photo-position-x:55%;background:var(--q-atmosphere)}
.q-photo-fallback{object-position:var(--q-photo-position-x) 50%}
.q-hero-shade{background:linear-gradient(90deg,#001e3bd9 0%,#00305cc9 28%,#021a2c99 58%,#02091366 85%),linear-gradient(0deg,#020814d9,transparent 68%)}
.q-hero-dim{background:linear-gradient(120deg,#02020444,#0074b430,#1d4ed840)}
.q-benefit-intro{position:relative;z-index:2;min-height:100svh;display:grid;place-items:center;padding:120px var(--q-gutter);text-align:center;scroll-margin-top:0}
.q-benefit-intro .q-benefits-heading{width:100%;max-width:1160px}
.q-benefit-intro .q-benefits-heading h2{font-size:clamp(48px,7vw,104px);line-height:1.02}
.q-benefit-intro-copy{margin:35px auto 0;font:400 18px/1.65 var(--q-body);color:#d8e8f9}
.q-benefits{padding-top:20px}
.q-benefit-stack{margin-top:0}
.q-programme{background:var(--q-atmosphere);border-top:1px solid #01a4ff2b}
.q-participate{background:radial-gradient(ellipse at 5% 25%,#0074b42e,transparent 58%),linear-gradient(130deg,#020204,#061126 60%,#020204)}
.q-process{background:radial-gradient(ellipse at 100% 0%,#01a4ff13,transparent 45%),linear-gradient(150deg,#fff 35%,#f0f7ff)}
.q-credit-example{background:linear-gradient(125deg,#e8f7ff,#eaf0ff)}
.q-main-cta,.q-form-submit{background:linear-gradient(135deg,#0074b4 0%,#1d4ed8 58%,#2563eb 100%)}
.q-footer{background:radial-gradient(ellipse at 70% 100%,#1d4ed82a,transparent 65%),#020204}

@media(max-width:700px){.q-hero{--q-photo-position-x:82%}.q-hero-shade{background:linear-gradient(90deg,#002c55b3,#02152333 88%),linear-gradient(180deg,#020c1873,#020c1833 32%,#020c18cc 74%,#020c18f2)}.q-benefit-intro{padding:100px 24px;min-height:92svh}.q-benefit-intro .q-benefits-heading h2{font-size:clamp(35px,10.5vw,52px)}.q-benefit-intro-copy{font-size:15px;margin-top:26px}.q-benefits{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.q-hero-background{display:none}.q-benefit-intro{min-height:0;padding-block:90px}}

/* Campaign copy remains readable with the complete benefits in the hero. */
.q-title-keep{display:inline-block;white-space:nowrap}
.q-hero h1{font-size:clamp(56px,5.3vw,92px);translate:none;line-height:1.06;margin:24px 0}
.q-hero-bottom{max-width:640px}
.q-hero-bottom .q-hero-advantages{max-width:58ch;font-size:16px;line-height:1.65}
.q-hero-advantages strong{font-size:inherit;font-weight:700}
.q-hero-bottom .q-hero-eligibility{max-width:58ch;margin-top:14px;font-size:11px;line-height:1.6;color:#c1cbd9}
.q-main-cta{margin-top:20px}
@media(min-width:1600px){.q-hero h1{font-size:clamp(92px,5.3vw,118px)}}
@media(max-height:820px) and (min-width:801px){.q-hero h1{font-size:clamp(52px,5.1vw,78px)}.q-hero-bottom .q-hero-advantages{font-size:14px}.q-hero-bottom .q-hero-eligibility{font-size:10px;margin-top:12px}.q-main-cta{margin-top:16px}}
@media(max-width:1000px){.q-hero h1{font-size:5.6vw}.q-hero-bottom{max-width:540px}}
@media(max-width:700px){.q-prelude{font-size:23px;line-height:1.25;max-width:100%}.q-hero h1{font-size:clamp(26px,7.7vw,44px);line-height:1.12;letter-spacing:-.055em;margin:24px 0}.q-hero-bottom .q-hero-advantages{font-size:13px;line-height:1.65;max-width:42ch}.q-hero-bottom .q-hero-eligibility{font-size:10px;line-height:1.6;margin-top:12px}.q-main-cta{margin-top:17px}}
@media(max-width:359px){.q-prelude{font-size:20px}.q-hero h1{font-size:26px;margin:20px 0}.q-hero-bottom .q-hero-advantages{font-size:12px}.q-hero-bottom .q-hero-eligibility{font-size:9px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.q-prelude-highlight{--q-mark-scale:1!important}}

/* Keep the overhead handshake above the mobile headline and offers. */
@media(max-width:700px){.q-photo,.q-hero-background{height:60%;mask-image:linear-gradient(#000 80%,transparent 100%)}}

@media(max-width:359px){.q-photo,.q-hero-background{height:50%}}

/* The story pins before the photo fades and releases after the final card. */
.q-benefits{padding-top:0}
.q-benefit-scene{position:relative;isolation:isolate;margin-inline:calc(-1 * var(--q-benefit-gutter))}
.q-benefit-intro{z-index:1;height:100svh;min-height:0}
.q-benefit-intro .q-benefits-note{position:absolute;bottom:clamp(24px,5svh,48px);left:var(--q-gutter);right:var(--q-gutter);margin:0 auto;text-align:center}
.q-benefit-cards{position:relative;z-index:2;padding-inline:var(--q-benefit-gutter)}
.q-benefit-stack{margin-top:0}
.q-benefits>.q-programme{margin-top:0}
.q-benefit-scene.is-story-animated::after{content:"";display:block;height:100svh}
.is-story-animated .q-benefit-intro{position:sticky;top:0}
.is-story-animated .q-benefit-cards{padding-top:35svh}
@media(prefers-reduced-motion:reduce){.q-benefit-intro{height:auto;min-height:0}.q-benefit-intro .q-benefits-note{position:static;margin:32px auto 0}.q-benefit-cards{padding-top:35px}}

/* Larger single-line prelude and the campaign's green reward accent. */
.q-prelude{font-size:clamp(26px,3vw,44px);white-space:nowrap;max-width:none}
.q-hero-reward{color:#4ade80}
.q-hero-bottom .q-hero-eligibility{max-width:none}
@media(max-height:820px) and (min-width:801px){.q-prelude{font-size:clamp(26px,2.8vw,36px)}}
@media(max-width:700px){.q-prelude{font-size:clamp(23px,6vw,30px)}.q-hero h1{font-size:clamp(35px,10vw,58px)}}
@media(max-width:359px){.q-prelude{font-size:23px}.q-hero h1{font-size:34px}}

/* Larger hero typography while preserving the single-line prelude. */
.q-prelude-highlight::before{background:#0074b4}
.q-prelude-highlight-ink{color:#fff}
.q-prelude{font-size:clamp(30px,3.6vw,54px)}
.q-hero h1{font-size:clamp(68px,6.7vw,116px)}
@media(max-height:820px) and (min-width:801px){.q-prelude{font-size:clamp(30px,3.4vw,44px)}.q-hero h1{font-size:clamp(62px,6.5vw,104px)}}
@media(max-width:1000px){.q-hero h1{font-size:clamp(60px,7.3vw,80px)}}
@media(max-width:700px){.q-prelude{font-size:clamp(24px,6.5vw,34px)}.q-hero h1{font-size:clamp(39px,11.2vw,64px)}}
@media(max-width:359px){.q-prelude{font-size:24px}.q-hero h1{font-size:38px}}