/* OSSO scroll film, placed in the site as section#how. Scoped to .o3-sec / .o3 / .o3-*. */
section.o3-sec{padding:0;--o3-navh:56px}
.o3-sec > .o3{max-width:none}
.o3,.o3 *{box-sizing:border-box}
.o3 *{margin:0;padding:0}

/* ---------- section scope ---------- */
.o3{--o3-ink:#2a2f2e;--o3-ink2:#4a504f;--o3-mute:#5f6564;--o3-paper:#f6f7f7;--o3-bd:#ebe8e4;--o3-dark:#2a2f2e;
 --o3-am:#ff7548;--o3-pm:#ba9cd2;--o3-acc:var(--o3-am);--o3-acc-ink:#c4471b;
 --o3-head:"Archivo","Helvetica Neue",Arial,sans-serif;--o3-body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
 font-family:var(--o3-body);color:var(--o3-ink);background:var(--o3-paper);position:relative}
.o3[data-mode=pm]{--o3-acc:var(--o3-pm);--o3-acc-ink:#7a5a96}
.o3 h1,.o3 h2,.o3 h3{font-family:var(--o3-head);font-weight:300;letter-spacing:-.025em}

/* intro */
.o3-intro{min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding:72px 24px 12svh;max-width:1240px;margin:0 auto}
.o3-kicker{font:500 12px/1 var(--o3-head);letter-spacing:.22em;text-transform:uppercase;color:var(--o3-mute);margin-bottom:28px}
.o3-h1{font-size:clamp(46px,13vw,148px);line-height:.92;font-weight:300 !important;letter-spacing:-.045em !important}
.o3-acc{color:var(--o3-acc-ink);font-weight:300}
.o3-lede{margin-top:30px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--o3-ink2);max-width:28em}
.o3-cue{margin-top:56px;height:56px;width:1px;background:rgba(42,47,46,.15);position:relative;overflow:hidden}
.o3-cue span{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--o3-ink);animation:o3cue 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes o3cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* pinned film */
.o3-story{position:relative;height:1100svh}
.o3-pin{position:sticky;top:var(--o3-navh);height:calc(100svh - var(--o3-navh));overflow:hidden;background:var(--o3-bg,#ebe8e4);transition:background-color .2s linear}
.o3-stage{position:absolute;inset:0;overflow:hidden}
.o3-seq,.o3-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.o3-fx{opacity:0;pointer-events:none}
.o3-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(235,232,228,.9) 0%,rgba(235,232,228,.55) 22%,rgba(235,232,228,0) 42%);opacity:1}

.o3-copy{position:absolute;z-index:4;left:0;right:0;top:0;padding:30px 24px 0;pointer-events:none}
.o3-beat{position:absolute;left:24px;right:24px;opacity:0;will-change:opacity,transform}
.o3-n{display:block;font:500 11px/1 var(--o3-head);letter-spacing:.24em;color:var(--o3-mute);margin-bottom:14px}
.o3-beat h2{font-size:clamp(38px,10.4vw,96px);line-height:.96;letter-spacing:-.04em;color:var(--o3-ink)}
.o3-beat p{margin-top:14px;font-size:clamp(15px,4.1vw,20px);line-height:1.45;color:var(--o3-ink2);max-width:22em}
.o3-dark .o3-n{color:rgba(246,247,247,.62)}
.o3-dark h2{color:#f6f7f7}
.o3-dark p{color:rgba(246,247,247,.78)}

.o3-layers{position:absolute;inset:0;pointer-events:none}
.o3-layers span{position:absolute;right:20px;transform:translateY(-50%);font:400 12px/1 var(--o3-head);letter-spacing:.14em;text-transform:uppercase;color:rgba(246,247,247,.86);opacity:0;display:flex;align-items:center;gap:10px;white-space:nowrap}
.o3-layers span::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.o3-layers span{text-shadow:0 1px 10px rgba(42,47,46,.5)}

.o3-ings{position:absolute;inset:0;pointer-events:none}
.o3-ing{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;display:flex;align-items:center;gap:10px;white-space:nowrap}
.o3-ing i{width:30px;height:1px;background:rgba(255,255,255,.75);flex:none}
.o3-ing>span{display:block;padding:8px 12px 9px;border-radius:12px;background:rgba(42,47,46,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.o3-ing em{font:300 21px/1 var(--o3-head);font-style:normal;letter-spacing:-.005em;color:#fff;text-shadow:0 1px 3px rgba(42,47,46,.35),0 2px 18px rgba(42,47,46,.6)}
.o3-ing small{display:block;font:500 9.5px/1 var(--o3-head);letter-spacing:.22em;color:rgba(255,255,255,.75);margin-bottom:6px;text-shadow:0 1px 10px rgba(42,47,46,.5)}
.o3-ing.r{flex-direction:row-reverse;text-align:right}

.o3-dial{position:absolute;left:50%;top:56%;width:min(78%,54svh,440px);transform:translate(-50%,-50%);opacity:0;pointer-events:none;will-change:opacity,transform}
.o3-dial svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.o3-tk{stroke:#f6f7f7;stroke-opacity:.35;stroke-width:1.2}
.o3-tk.maj{stroke-opacity:.9;stroke-width:2.4}
.o3-num{font:300 25px/1 var(--o3-head);fill:#f6f7f7;fill-opacity:.88;text-anchor:middle;dominant-baseline:central;letter-spacing:-.02em}
.o3-unit{font:500 10px/1 var(--o3-head);letter-spacing:.32em;fill:#f6f7f7;fill-opacity:.5}
.o3-cap{margin-top:26px;text-align:center;font:300 clamp(18px,4.8vw,26px)/1.25 var(--o3-head);letter-spacing:-.01em;color:#f6f7f7}

.o3-toggle{position:absolute;right:16px;top:14px;z-index:5;display:flex;padding:3px;border-radius:99px;background:rgba(246,247,247,.14);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(246,247,247,.22);opacity:0;pointer-events:none;transition:opacity .5s ease}
.o3-toggle.on{opacity:1;pointer-events:auto}
.o3-toggle button{appearance:none;border:0;background:transparent;color:rgba(246,247,247,.8);font:600 11px/1 var(--o3-head);letter-spacing:.16em;padding:10px 15px;border-radius:99px;cursor:pointer;transition:background .35s ease,color .35s ease;min-width:52px}
.o3-toggle button[aria-pressed=true]{background:#f6f7f7;color:#2a2f2e}
.o3-toggle button:focus-visible{outline:2px solid var(--o3-acc);outline-offset:2px}
.o3-toggle.lt{background:rgba(42,47,46,.06);border-color:rgba(42,47,46,.12)}
.o3-toggle.lt button{color:#2a2f2e}
.o3-toggle.lt button[aria-pressed=true]{background:#2a2f2e;color:#f6f7f7}

/* outro */
.o3-outro{background:#f6f7f7;padding:56px 24px 64px;text-align:center;max-width:1240px;margin:0 auto}
.o3-tin{max-width:620px;margin:0 auto}
.o3-tin img{width:100%;height:auto;display:block;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 52%,#000 55%,transparent 100%)}
.o3-h2{margin-top:28px;font-size:clamp(40px,10vw,104px);line-height:.95;letter-spacing:-.045em !important}
.o3-ingl{display:flex;justify-content:center;gap:clamp(40px,8vw,120px);margin:52px auto 0;text-align:left}
.o3-ingl h3{font:600 11px/1 var(--o3-head);letter-spacing:.24em;color:var(--o3-mute);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.o3-ingl p{font:300 clamp(16px,4.2vw,20px)/1.5 var(--o3-head);color:var(--o3-ink)}
.o3-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.o3-dot.am{background:var(--o3-am)}.o3-dot.pm{background:var(--o3-pm)}
.o3-btn{display:inline-block;margin-top:56px;background:#2a2f2e;color:#f6f7f7;text-decoration:none;font:500 15px/1 var(--o3-head);letter-spacing:.02em;padding:20px 34px;border-radius:99px;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}
.o3-btn:hover{transform:translateY(-2px);background:#1f2423}
.o3-btn:focus-visible{outline:2px solid var(--o3-acc);outline-offset:4px}
.o3-fine{margin:0 auto;max-width:34em;font-size:12px;line-height:1.6;color:var(--o3-mute)}

.o3-static{display:none}

/* desktop: film card on the right, copy in a column on the left */
@media (min-width:900px){
 .o3-intro{padding-left:48px;padding-right:48px}
 .o3-stage{left:auto;right:max(48px,calc(50vw - 620px + 0px));top:50%;bottom:auto;transform:translateY(-50%);height:min(88svh,1000px);aspect-ratio:9/16;border-radius:28px;box-shadow:0 40px 120px -40px rgba(42,47,46,.28)}
 .o3-copy{position:absolute;right:auto;left:max(48px,calc(50vw - 620px));top:50%;width:min(40vw,540px);padding:0;height:0}
 .o3-beat{left:0;right:0;transform:translateY(-50%)}
 .o3-beat h2{font-size:clamp(56px,5.6vw,92px)}
 .o3-scrim{display:none}
 .o3-toggle{top:22px}
}

/* reduced motion: no pin, no scrub. A quiet sequence of stills. */
.o3.rm .o3-story{display:none}
.o3.rm .o3-static{display:block;padding:8svh 24px;max-width:1100px;margin:0 auto}
.o3-sfig{margin:0 auto 72px;max-width:520px}
.o3-sfig img,.o3-sfig canvas{width:100%;height:auto;display:block;border-radius:22px;background:#ebe8e4}
.o3-sfig .o3-n{margin-top:22px}
.o3-sfig h2{font-size:clamp(34px,9vw,64px);line-height:1;letter-spacing:-.04em}
.o3-sfig p{margin-top:10px;font-size:17px;line-height:1.5;color:var(--o3-ink2)}

@media (min-width:1024px){section.o3-sec{--o3-navh:64px}}