/* The opening panel owns a full viewport; the later Figma canvas keeps its scale. */
.viewport-hero{position:absolute;left:14515px;top:0;width:var(--hero-width,1571px);height:904px;overflow:hidden;isolation:isolate;container-type:size;background:#000;color:#eeecdd}
.hero-picture,.hero-tint{position:absolute;inset:0;z-index:-2}
.hero-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
.hero-tint{z-index:-1;background:rgba(47,63,64,.85)}
.hero-header{position:absolute;inset:3cqh auto auto 3.4cqw;display:flex;direction:ltr;align-items:center;gap:1cqw}
.hero-logo{width:9cqw;height:12cqh;object-fit:contain}
.hero-header-pill{display:block;padding:9px 21px 12px;border-radius:50px;font-size:clamp(18px,1.8cqw,28px);line-height:1;color:#001d17;text-decoration:none;white-space:nowrap;direction:rtl}
.hero-donate{background:#d1a941}.hero-parent{background:#c6e7e3}
.hero-composition{position:absolute;inset:24% 11% 13% 8%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6cqw;direction:rtl}
.hero-brand{min-width:0;width:min(100%,540px);justify-self:start;margin:0;position:relative;font-weight:400;color:#d1a941;text-align:right;font-size:min(10cqw,16cqh);line-height:1.02;letter-spacing:-.025em}
.hero-title-mask{display:block;overflow:hidden;padding-block:.22em;margin-block:-.22em}
.hero-title-rise{display:block;transform:translateY(125%);opacity:0}
.hero-young{margin-top:-.06em;position:relative;z-index:1;padding-bottom:.15em}
.hero-young img{display:block;width:100%;height:auto;max-width:100%}
.hero-copy{min-width:0;width:100%;font-size:min(2.6cqw,4.1cqh);line-height:1.17;text-align:right;align-self:center;white-space:normal}
.hero-copy-line{display:block;overflow:hidden;padding-block:.22em;margin-block:-.22em;white-space:nowrap}
.hero-copy-line>span{display:block;transform:translateY(115%);opacity:1;will-change:transform}
.hero-scroll-cue{position:absolute;bottom:8cqh;left:0;display:flex;flex-direction:row;align-items:center;gap:15px;background:none;border:0;color:#e2d7c3;font-size:17px;padding:10px 0;opacity:0}
.hero-scroll-track{display:block;position:relative;width:138px;height:2px;overflow:hidden;background:#d1a94125}
.hero-scroll-track:after{content:'';position:absolute;inset:0;background:#d1a941;transform:translateX(110%)}
.hero-playing .hero-title-rise{animation:hero-rise 1.05s cubic-bezier(.16,1,.3,1) var(--delay) both}
.hero-playing .hero-copy-line>span{animation:hero-paragraph-rise 1.15s cubic-bezier(.22,1,.36,1) calc(850ms + var(--line)*18ms) both}
.hero-playing .hero-picture,.hero-playing .hero-tint{animation:hero-background 1.3s cubic-bezier(.76,0,.24,1) 1.5s both}
.hero-playing .hero-scroll-cue{animation:hero-cue-in .7s ease 1.6s both}
.hero-playing .hero-scroll-track:after{animation:hero-scroll-line 2.4s cubic-bezier(.65,0,.35,1) 1.8s infinite}
@keyframes hero-rise{from{transform:translateY(125%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes hero-background{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes hero-cue-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes hero-scroll-line{0%{transform:translateX(110%)}38%,55%{transform:translateX(0)}90%,100%{transform:translateX(-110%)}}
@media(min-aspect-ratio:2/1) and (min-width:701px){.hero-composition{inset:21% 14% 12%;gap:9cqw}.hero-brand{font-size:16cqh}.hero-copy{font-size:4.1cqh}}
@media(max-width:700px){.mobile-layout>.viewport-hero{position:relative;left:auto;top:auto;width:100%;height:100svh;min-height:600px;padding:0;container-type:size}.hero-header{left:5cqw;top:2cqh;gap:2cqw}.hero-logo{width:17cqw;height:10cqh}.hero-header-pill{font-size:clamp(12px,3.1cqw,18px);padding:8px 12px}.hero-composition{inset:17% 8% 13%;display:flex;flex-direction:column;gap:4cqh;align-items:stretch}.hero-brand{font-size:min(20cqw,12cqh);width:75%;align-self:flex-start}.hero-copy{font-size:min(4.6cqw,2.8cqh);line-height:1.15;align-self:stretch}.hero-scroll-cue{bottom:3cqh;font-size:14px}.hero-scroll-track{width:21cqw}.hero-young img{margin:0;border-radius:0}.mobile-layout .hero-logo{margin:0}.mobile-layout .hero-picture img{margin:0;border-radius:0;max-height:none}.mobile-layout .hero-brand{line-height:1.02;margin:0}.mobile-layout .hero-copy-line{margin-block:-.22em}}
@media(prefers-reduced-motion:reduce){.viewport-hero *,.viewport-hero *:after{animation:none!important}.hero-title-rise,.hero-copy-line>span,.hero-scroll-cue{opacity:1;transform:none}.hero-scroll-track:after{transform:none}}
.hero-accent{position:absolute;right:-6%;top:-16%;width:40%;aspect-ratio:278.04/244.761;pointer-events:none}
.hero-accent-rotate{position:absolute;width:58.35%;height:94.42%;left:20.82%;top:2.79%;transform:rotate(64.98deg)}
.hero-accent-crop{position:absolute;inset:0;overflow:hidden}
.hero-accent-crop img{position:absolute!important;width:743.01%!important;height:782.4%!important;max-width:none!important;left:-627.27%;top:-300.08%;margin:0!important}
@media(max-width:700px){.mobile-layout .hero-brand{font-size:min(20cqw,12cqh)}.mobile-layout .hero-header .hero-logo{height:10cqh;width:17cqw;object-fit:contain}.mobile-layout .hero-picture img{height:100%;width:100%;object-fit:cover}.mobile-layout .hero-young img{width:100%;max-width:100%}}
.hero-picture,.hero-tint{clip-path:inset(100% 0 0)}
.hero-copy{visibility:hidden}.hero-playing .hero-copy{visibility:visible}
@media(max-width:700px){.mobile-layout>.viewport-hero{min-height:0}}
@media(prefers-reduced-motion:reduce){.hero-picture,.hero-tint{clip-path:none}.hero-copy{visibility:visible}}

@keyframes hero-paragraph-rise{from{transform:translateY(115%)}to{transform:translateY(0)}}
/* Restore the compact typography of the supplied design after line splitting. */
.hero-composition{inset:32% 11% 14% 8%;align-items:start}
.hero-brand{display:flex;flex-direction:column;width:min(100%,623px);font-size:min(12.4cqw,21.5cqh);line-height:.66;letter-spacing:0}
.hero-title-mask{flex-shrink:0;white-space:nowrap;padding-block:.34em;margin-block:-.34em}
.hero-young{margin-top:-.7em;padding-bottom:.2em}
.hero-copy{font-size:min(2.55cqw,4.42cqh);max-width:553px;justify-self:end;align-self:start;line-height:1.02}
.hero-copy-line{line-height:inherit;padding-block:.22em;margin-block:-.22em}
.hero-scroll-cue{font-size:34px;gap:30px;padding:20px 0}
.hero-scroll-track{width:276px;height:4px}
@media(min-aspect-ratio:2/1) and (min-width:701px){.hero-composition{inset:29% 14% 12%;gap:9cqw}.hero-brand{font-size:21.5cqh}.hero-copy{font-size:4.1cqh}}
@media(max-width:700px){.hero-composition{inset:18% 8% 12%;gap:4cqh}.mobile-layout .hero-brand{font-size:min(20cqw,12cqh);line-height:.66;width:75%}.hero-copy{font-size:min(4.6cqw,2.8cqh);max-width:none;align-self:stretch;line-height:1.08}.hero-scroll-cue{font-size:28px;gap:30px;padding:20px 0}.hero-scroll-track{width:42cqw;height:4px}.hero-young{margin-top:-.6em}}

/* Flex rows prevent sibling negative margins from collapsing and adding gaps. */
.hero-copy{display:flex;flex-direction:column;line-height:1.02}
.hero-copy-line{flex-shrink:0}
.hero-accent{top:-30%}
.hero-scroll-cue{left:28px;font-size:24px;gap:16px;padding:10px 0;line-height:1}
.hero-scroll-track{width:204px;height:2px}
@media(max-width:700px){.hero-copy{line-height:1.06}.hero-scroll-cue{left:18px;font-size:18px;gap:12px}.hero-scroll-track{width:30cqw;height:2px}}

/* Reference hover: a curved fill rises from the bottom of each pill. */
.hero-header .hero-logo{width:11.7cqw;height:15.6cqh;filter:brightness(0) invert(1);flex-shrink:0}
.hero-header-pill{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;transition:color .35s ease}
.hero-header-pill>span{position:relative;z-index:1}
.hero-header-pill::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--pill-hover);transform:translateY(105%);transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:0}
.hero-donate{--pill-hover:#080908}
.hero-parent{background:#aa906b;--pill-hover:#b1842b;color:#211b12}
.hero-header-pill:is(:hover,:focus-visible)::before{transform:translateY(0)}
.hero-donate:is(:hover,:focus-visible){color:#fff}
.hero-header-pill:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:700px){.mobile-layout .hero-header .hero-logo{width:20cqw;height:13cqh}.hero-header{gap:2cqw}.hero-header-pill{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.hero-header-pill,.hero-header-pill::before{transition:none}}

/* Larger white mark, nearer the left edge of the viewport. */
.hero-header{left:1.3cqw}
.hero-header .hero-logo{width:14cqw;height:18.7cqh}
@media(max-width:700px){.hero-header{left:2cqw}.mobile-layout .hero-header .hero-logo{width:23cqw;height:15cqh}.hero-header-pill{font-size:clamp(11px,2.9cqw,18px)}}