:root{--bg:#f51b25;--fg:#100302;--font:Arial,Helvetica,sans-serif;--weight:700;--tracking:-.075em;--final-size:29vw;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:4px solid currentColor;outline-offset:8px}button.stage:focus:not(:focus-visible){outline:none}.experience{height:100svh;min-height:760px;position:relative;overflow:hidden}.stage{position:absolute;inset:0;width:100%;height:100%;background:none;display:flex;align-items:center;justify-content:center;transition:height 1.15s cubic-bezier(.22,1,.36,1),top 1.15s cubic-bezier(.22,1,.36,1);z-index:1}.wordmark{display:flex;align-items:center;font-family:var(--font);font-size:min(90svh,110vw);font-weight:var(--weight);letter-spacing:var(--tracking);line-height:.85;transform:translateX(-.025em);transition:font-size 1.2s cubic-bezier(.22,1,.36,1)}.counter{display:flex;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking)}.digit{width:.56em;height:.9em;overflow:hidden}.reel{display:block;will-change:transform}.reel>span{height:.9em;line-height:.9em;display:block;text-align:center}.tens{width:0;opacity:0;transition:width .35s,opacity .25s}.has-tens .tens{width:.56em;opacity:1}.kai{overflow:hidden;max-width:0;opacity:0;transform:translateX(-.2em);transition:max-width 1.25s cubic-bezier(.22,1,.36,1),opacity .6s .2s,transform 1.25s cubic-bezier(.22,1,.36,1)}[data-state='rolling'] .wordmark{font-size:min(82svh,76vw)}[data-state='logo'] .wordmark,[data-state='revealed'] .wordmark{font-size:var(--final-size)}[data-state='logo'] .kai,[data-state='revealed'] .kai{max-width:2em;opacity:1;transform:none}[data-state='revealed'] .stage{top:90px;height:49%;cursor:default}.content{position:absolute;inset:0;padding:36px 4%;visibility:hidden;opacity:0;transition:opacity .9s;pointer-events:none;display:flex;flex-direction:column}[data-state='revealed'] .content{visibility:visible;opacity:1}.content a,.content button{pointer-events:auto}header{display:flex;justify-content:space-between;align-items:start;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.04em}.jp{font-size:13px}.information{margin-top:auto;display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:6%;align-items:end;padding-bottom:55px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.08em;display:block;margin-bottom:16px}h1{font-size:clamp(28px,3.3vw,54px);font-weight:500;letter-spacing:-.065em;line-height:1; margin:0 0 18px}p{font-size:12px;line-height:1.6;margin:0}.amount{font-size:clamp(48px,6vw,92px);letter-spacing:-.075em;font-weight:500;line-height:1.05;margin-bottom:9px}.amount>span{font-size:.6em}.target{opacity:.65}.action p{margin-bottom:20px}.action button{display:flex;align-items:center;justify-content:space-between;background:var(--fg);color:var(--bg);padding:18px 22px;width:100%;font-size:12px;border-radius:0;gap:20px}.action button:hover{transform:translateY(-3px)}footer{display:flex;justify-content:space-between;align-items:center;font-size:10px}footer button{background:none;padding:8px 0;font-size:10px}dialog{border:0;background:var(--bg);color:var(--fg);padding:64px 40px 40px;width:min(600px,calc(100% - 32px))}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.close{position:absolute;right:24px;top:22px;background:none;font-size:12px}h2{font-size:64px;font-weight:500;letter-spacing:-.07em;line-height:1;margin:26px 0}dialog p{font-size:16px;margin:20px 0}dialog strong{display:block;font-size:10px;margin-top:32px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 02: condensed, nocturnal, and confrontational. */
:root[data-take='2']{--bg:#090909;--fg:#ff2633;--font:Impact,'Arial Narrow',Arial,sans-serif;--tracking:-.025em;--weight:900;--final-size:32vw}[data-take='2'] .wordmark{transform:scaleY(1.18);font-stretch:condensed}[data-take='2'] .digit{width:.53em}[data-take='2'] .tens{width:0}[data-take='2'] .has-tens .tens{width:.53em}[data-take='2'] .information{grid-template-columns:1.4fr .8fr .8fr}[data-take='2'] h1{text-transform:uppercase;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(30px,3.7vw,58px);letter-spacing:-.02em}[data-take='2'] .amount{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:900}[data-take='2'] .content{padding:34px 5%}[data-take='2'] header{letter-spacing:.1em}
/* 03: editorial warmth, set against an uncompromising red wordmark. */
:root[data-take='3']{--bg:#e9e5dc;--fg:#c71924;--font:Georgia,'Times New Roman',serif;--weight:700;--tracking:-.09em;--final-size:28vw}[data-take='3'] .wordmark{transform:translateX(-.03em)}[data-take='3'] .content{padding:36px 6%}[data-take='3'] h1{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.055em}[data-take='3'] .amount{font-family:Georgia,serif;font-weight:400}[data-take='3'] .information{grid-template-columns:1.4fr .9fr .8fr;gap:7%}[data-take='3'] .action button{border-radius:60px}[data-take='3'] header{font-weight:400;letter-spacing:.03em}
/* 04: a machine-like monospaced mark and asymmetric content. */
:root[data-take='4']{--bg:#bc0716;--fg:#160205;--font:'Courier New',monospace;--weight:700;--tracking:-.09em;--final-size:30vw}[data-take='4'] .wordmark{transform:scaleY(1.1)}[data-take='4'] .digit{width:.6em}[data-take='4'] .tens{width:0}[data-take='4'] .has-tens .tens{width:.6em}[data-take='4'] .content{font-family:'Courier New',monospace}[data-take='4'] header,[data-take='4'] .eyebrow{font-weight:700}[data-take='4'] .information{grid-template-columns:1.4fr 1fr .85fr;gap:5%}[data-take='4'] h1{font-family:'Courier New',monospace;font-weight:700;font-size:clamp(26px,3.1vw,48px);letter-spacing:-.07em}[data-take='4'] .amount{font-weight:700}[data-take='4'] .action button{text-transform:uppercase;font-weight:700}
@media(max-width:650px){.experience{min-height:780px}.content,[data-take='2'] .content,[data-take='3'] .content{padding:26px 24px}header{font-size:8px}.jp{display:none}[data-state='revealed'] .stage{top:80px;height:34%}.information,[data-take='2'] .information,[data-take='3'] .information,[data-take='4'] .information{grid-template-columns:1.1fr 1fr;gap:28px 20px;padding-bottom:34px}.action{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:20px}.action p{margin:0;font-size:10px}.action button{width:50%;padding:17px 14px;font-size:11px}h1{font-size:30px}.amount{font-size:50px}p{font-size:11px}.eyebrow{font-size:8px;line-height:1.5}.capital p .target{display:block}footer{font-size:9px}[data-take='2'] h1{font-size:31px}[data-take='4'] h1{font-size:26px}dialog{padding:60px 28px 28px}h2{font-size:50px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the adjacent reel glyphs fully inside their own cells. */
.reel>span{overflow:hidden}
[data-take='3'] .counter{font-family:'Times New Roman',serif;font-variant-numeric:lining-nums tabular-nums}
/* Signal's opening reel is cropped by the screen, not a smaller digit box. */
[data-take='1'] .experience:not([data-state='revealed']){min-height:0;height:100svh}
[data-take='1'] .experience:is([data-state='idle'],[data-state='rolling']) .wordmark{font-size:150svh}
[data-take='1'] .experience:is([data-state='idle'],[data-state='rolling']) .digit,
[data-take='1'] .experience:is([data-state='idle'],[data-state='rolling']) .reel>span{overflow:visible}
/* The landing resolves to one mark and one statement. */
.experience{min-height:0;height:100svh}
[data-state='revealed'] .stage{top:0;height:85%}
.content,[data-take='2'] .content,[data-take='3'] .content{padding:0;justify-content:flex-start;align-items:center}
.tagline,[data-take='2'] h1.tagline,[data-take='3'] h1.tagline,[data-take='4'] h1.tagline{position:absolute;top:calc(42.5% + 12vw);margin:0;padding:0 24px;width:100%;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:clamp(15px,1.65vw,30px);font-weight:400;font-style:normal;text-transform:none;letter-spacing:-.025em;line-height:1.4}
@media(max-width:650px){.tagline,[data-take='2'] h1.tagline,[data-take='3'] h1.tagline,[data-take='4'] h1.tagline{top:calc(42.5% + 16vw);font-size:16px;max-width:340px}}
/* Let the leading reel enter with the same momentum as the number drums. */
.tens{transition:width .9s cubic-bezier(.22,1,.36,1),opacity .7s ease}
.reel{backface-visibility:hidden}
