.hero{height:100svh;min-height:740px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 66%,#232c2e88,transparent 65%),var(--bg);touch-action:pan-y}
.hero h1{position:absolute;z-index:1;top:13%;left:50%;transform:translateX(-50%);width:max-content;margin:0;white-space:nowrap;font-family:'DM Sans',Arial,sans-serif;font-size:clamp(110px,17.5vw,520px);font-weight:700;line-height:.9;letter-spacing:-.065em}.hero h1 span{color:var(--orange)}
.hero-orbit{left:50%;transform:translateX(-50%);top:16%;width:70vw;max-width:1350px}
.hero-character{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:25%;width:calc(83svh * 1.7777778);height:83svh;max-width:160vw;pointer-events:none}.hero-character canvas{width:100%;height:100%;object-fit:contain;display:block}.hero-character video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hero-copy{position:absolute;z-index:5;left:3.3vw;bottom:9%;width:26%}.hero-copy h2{font-size:clamp(23px,2vw,46px);letter-spacing:-1.5px;line-height:1.15;font-weight:500;margin:0}.hero-copy .eyebrow{font-size:10px;margin-bottom:22px}.look-control{position:absolute;z-index:5;right:3.3vw;bottom:9%;width:18%;min-width:220px;max-width:380px}.look-control label{display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;letter-spacing:1.4px}.look-control label>span:last-child{color:var(--orange)}.look-control input{appearance:none;display:block;width:100%;height:2px;background:#ffffff38;margin:28px 0 18px;cursor:ew-resize}.look-control input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:2px solid var(--orange);border-radius:50%;background:var(--bg);box-shadow:0 0 0 5px #ff702e12,0 0 16px #ff702e50}.look-control input::-moz-range-thumb{width:11px;height:11px;border:2px solid var(--orange);border-radius:50%;background:var(--bg)}.hero-next{position:absolute;z-index:5;left:3.3vw;bottom:25px;font:8px 'IBM Plex Mono',monospace;letter-spacing:1.5px;color:var(--muted);display:flex;gap:24px;align-items:center}.hero-next span{font-size:18px;color:var(--orange)}.principle-note{margin-top:28px!important;font:9px 'IBM Plex Mono',monospace!important;letter-spacing:1.5px;line-height:1.8!important;color:var(--orange)!important}.belt-colors{display:flex;gap:12px;margin-top:35px}.belt-colors i{display:block;background:var(--belt);height:8px;flex:1;max-width:38px;border-radius:1px}
@media(min-width:2000px){.hero-copy{bottom:11%}.look-control{bottom:11%;width:19%}.hero-character{top:24%;height:85svh;width:calc(85svh * 1.7777778)}.hero-copy .eyebrow{font-size:12px}.look-control label{font-size:12px}}
@media(max-width:1000px){.hero h1{top:18%;font-size:18vw}.hero-character{top:27%;height:66svh;width:calc(66svh * 1.7777778);max-width:170vw}.hero-copy{left:5%;bottom:8%;width:40%}.hero-copy h2{font-size:28px}.look-control{right:5%;width:28%;min-width:180px;bottom:8%}.hero-orbit{width:100vw;top:20%}}
@media(max-width:600px){.hero{min-height:850px;height:100svh}.hero h1{font-size:21vw;top:130px}.hero-character{top:195px;width:185vw;height:104vw;max-width:none}.hero-copy{left:7%;bottom:150px;width:86%}.hero-copy h2{font-size:28px;letter-spacing:-1px}.hero-copy .eyebrow{font-size:9px;margin-bottom:12px}.look-control{left:7%;right:auto;bottom:65px;width:86%;max-width:none}.look-control label{font-size:9px}.look-control input{margin:21px 0 14px}.hero-next{left:7%;bottom:19px}.hero-orbit{top:210px;width:140vw}.principle-note{font-size:8px!important}}
/* The country strip shares the title's responsive box and scrolls with the HERO. */
.hero-title-band{--chile-width:clamp(20px,3.1vw,60px);position:absolute;z-index:1;top:13%;left:0;width:100%;display:flex;justify-content:center;padding-inline:var(--chile-width)}
.hero-title-band h1{position:static;transform:none;flex-shrink:0}
.chile-badge{position:absolute;inset-block:0;right:0;width:var(--chile-width);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding-block:clamp(4px,.7vw,16px);background:#da1819;color:#fff;font-family:'DM Sans',Arial,sans-serif;font-size:clamp(8px,.9vw,22px);font-weight:400;line-height:1;box-shadow:0 3px 5px #0002}
.hero-copy h2{font-weight:700}
.hero-copy h2>span{white-space:nowrap}
@media(max-width:1000px){.hero-title-band{top:18%}}
@media(max-width:600px){.hero-title-band{top:130px}.hero-title-band h1{font-size:18.6vw}.chile-badge{padding-block:4px}}

@media(min-width:601px) and (max-width:1000px){.hero-copy h2{font-size:clamp(20px,3.2vw,28px)}}
