/* UX119: six distinct brand attitudes, with controlled energy. */
body.color{--bg:#101112!important;--fg:#f4f0e8!important;background:var(--bg)!important;color:var(--fg)!important}
.color header{padding:20px 5vw;border-bottom:1px solid #ffffff26}.color .wordmark{font-size:16px;letter-spacing:-.025em;font-weight:900}.color .hero{min-height:780px;padding:35px 5vw 60px;gap:1vw;grid-template-columns:55% 45%;overflow:hidden}
.color .hero-copy{padding:3vw 0;gap:28px;z-index:3}.color .hero h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(72px,8.3vw,132px);line-height:.9;letter-spacing:-.035em;max-width:11ch;text-transform:uppercase}.color .hero .intro{font-size:17px;line-height:1.7;max-width:42ch;color:#d5d0ca}.color .hero .eyebrow{color:var(--accent);letter-spacing:.16em}.color .hero .cta{border-radius:3px;background:var(--accent);color:#101112;border-color:var(--accent);font-size:11px;letter-spacing:.08em;font-weight:900}
.color .hero .stage{height:610px;position:relative;inset:auto;border:0;border-radius:0;transform:none!important;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 67%);overflow:visible}
.color .stage-photo{inset:6% -12%;opacity:.25;filter:grayscale(1) contrast(1.15);mix-blend-mode:luminosity;clip-path:polygon(15% 0,100% 0,84% 100%,0 100%)}
.color .stage-art{z-index:2;filter:none!important;perspective:1100px}.color .stage-meta{bottom:0;font-size:10px;letter-spacing:.09em}.color .pause{top:0;right:0;background:#171719;color:#ddd;border-color:#ffffff40}.color .instrument{background:#18191b;border-color:#ffffff25;padding:60px 5vw}.color .instrument h2{font-family:Impact,sans-serif;text-transform:uppercase;letter-spacing:0;font-size:clamp(34px,4vw,60px)}.color .mode{border:1px solid #ffffff40;border-radius:3px;color:#e5dfd9;font:700 11px/1.5 Arial,sans-serif;letter-spacing:.045em;padding:14px 17px}.color .mode[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#101112}.color .selection h3{font:800 22px/1.3 Arial,sans-serif}.color .selection p{font-size:15px;line-height:1.8;color:#d0cbc6}.color .selection .index{font-family:Impact,sans-serif}.color .character-ticker{padding:13px 0;background:var(--accent);color:#101112;border:0;font-family:Impact,sans-serif;font-size:24px;letter-spacing:.035em;transform:rotate(-1.5deg);position:relative;z-index:3}.color .character-ticker div{animation-duration:16s}.color .character-ticker span{padding-right:35px}.color .editorial{gap:8vw;padding:100px 7vw}.color .editorial .image{height:470px;clip-path:polygon(0 0,100% 7%,93% 100%,0 94%)}.color .editorial h2{font-family:Impact,sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:500}.color .closing{background:var(--accent);color:#101112}.color .closing h2{font-family:Impact,sans-serif;letter-spacing:0;font-weight:500}.color .cta{border-radius:3px}.color footer{color:#bbb5b0;border-color:#ffffff25}.brand-feature{position:relative;display:grid;place-items:center;filter:drop-shadow(0 24px 24px #0007);transition:color .5s,background .5s}
@keyframes productHover{50%{transform:translateY(-18px) rotate(7deg)}}@keyframes typePunch{0%,70%,100%{transform:rotate(-6deg) translateX(0)}76%{transform:rotate(-6deg) translateX(10px)}}@keyframes laneRush{to{transform:translateX(-160px)}}@keyframes softOrbit{to{transform:rotate(360deg)}}
.soda-can{width:220px;height:390px;background:linear-gradient(90deg,#9b9836,var(--accent) 20%,var(--accent) 65%,#5c7133);border-radius:36px 36px 45px 45px;transform:rotate(7deg);animation:productHover 5s ease-in-out infinite;color:#172417;border-block:12px solid #d1d0be;box-shadow:inset -12px 0 20px #0003,0 0 80px color-mix(in srgb,var(--accent) 15%,transparent)}.soda-can strong{font:54px/.83 Impact,sans-serif;text-align:center;letter-spacing:-.03em}.soda-can small{position:absolute;bottom:42px;font:800 11px monospace;letter-spacing:.12em}.citrus-ring{position:absolute;width:420px;height:420px;border:2px dashed var(--accent);border-radius:50%;animation:softOrbit 55s linear infinite;opacity:.6}.kind-soda .hero h1{color:var(--accent)}
.type-block{font:clamp(120px,17vw,260px)/.72 Impact,sans-serif;letter-spacing:-.07em;color:var(--accent);transform:rotate(-6deg);animation:typePunch 6s ease-in-out infinite;text-shadow:10px 10px 0 #5414bc}.type-block:after{content:'MAKE SOME NOISE';position:absolute;right:-10%;bottom:-55px;font:700 12px/1 monospace;letter-spacing:.15em;color:#f5e9ff;background:#5425ce;padding:12px 16px;transform:rotate(13deg)}.kind-studio .stage-photo{opacity:.12}.kind-studio .hero h1{font-family:Arial,sans-serif;font-weight:950;letter-spacing:-.075em;font-size:clamp(70px,7.9vw,120px)}
.coffee-bag{width:280px;height:380px;border-radius:14px 12px 35px 20px;background:linear-gradient(100deg,#7c2a14,var(--accent) 35%,#a8411f);transform:rotate(-8deg);color:#21130e;border-top:25px solid #3a241a;box-shadow:inset -15px 0 24px #0004;animation:productHover 7s ease-in-out infinite}.coffee-bag strong{font:64px/.86 Impact,sans-serif;letter-spacing:-.03em}.coffee-bag small{position:absolute;bottom:35px;font:700 12px monospace;letter-spacing:.09em}.kind-coffee .hero h1{font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(60px,6.5vw,100px);line-height:.98;letter-spacing:-.065em;color:#f1d8b8}.kind-coffee .stage-photo{opacity:.25;filter:sepia(.7)}
.velocity-emblem{font:italic 290px/.8 Impact,sans-serif;color:var(--accent);transform:skewY(-9deg);letter-spacing:-.13em;animation:productHover 4s ease-in-out infinite}.race-track{position:absolute;left:-20%;right:-20%;top:40%;height:180px;transform:rotate(-15deg);overflow:hidden;border-block:1px solid #ffffff20}.race-track:after{content:'';position:absolute;inset:0 -180px;background:repeating-linear-gradient(90deg,transparent 0 120px,var(--accent) 120px 160px);height:3px;top:50%;animation:laneRush 1.2s linear infinite}.kind-motor .hero h1{font-style:italic}.kind-motor .hero .stage{clip-path:none}.kind-motor .hero{grid-template-columns:55% 45%}.kind-motor .hero .hero-copy{max-width:100%}.kind-motor[data-state='2'] .race-track:after{animation-duration:.55s}
.capital-mark{width:290px;height:350px;position:relative;transform:skewY(-12deg);color:var(--accent);border-left:60px solid currentColor;border-right:60px solid currentColor}.capital-mark:after{content:'';position:absolute;inset:0 40px;background:currentColor;transform:skewX(25deg)}.capital-mark:before{content:'';position:absolute;left:-110px;right:-110px;top:70%;height:1px;background:var(--accent);opacity:.3}.kind-capital .hero h1{font-family:Arial,sans-serif;font-weight:800;font-size:clamp(60px,6.4vw,100px);line-height:1;letter-spacing:-.075em}.kind-capital .hero .stage{border-radius:0}.kind-capital .character-ticker div{animation-duration:34s}.kind-capital .stage-photo{opacity:.18}.kind-capital .editorial h2{font-family:Arial,sans-serif;font-weight:700}
.smile-form{width:350px;height:350px;border-radius:50%;background:var(--accent);transform:rotate(-12deg);position:relative;animation:productHover 7s ease-in-out infinite;box-shadow:inset -18px -18px 35px #0002}.smile-form:after{content:'';position:absolute;left:20%;right:20%;top:36%;height:28%;border-bottom:18px solid #152427;border-radius:0 0 50% 50%}.smile-form:before{content:'✦';position:absolute;right:-18%;top:-10%;font-size:110px;color:#f4eddb}.kind-dental .hero h1{font-family:Arial,sans-serif;font-weight:800;font-size:clamp(58px,6.3vw,98px);letter-spacing:-.075em;line-height:1.02}.kind-dental .stage-photo{opacity:.14}.kind-dental .hero .stage{border-radius:0}.kind-dental .character-ticker div{animation-duration:25s}
@media(max-width:900px){.color .hero .hero-copy{padding:55px 6vw!important}.color .hero .stage{height:480px!important;width:88%!important;margin:10px 6vw 30px!important;border:0!important;clip-path:none!important;border-radius:0!important;overflow:hidden}.color .hero h1{font-size:clamp(62px,12vw,100px)!important;line-height:.95!important}.color .hero .intro{font-size:16px}.brand-feature{scale:.9}.citrus-ring{width:360px;height:360px}.color .stage-meta{bottom:15px}.color .character-ticker{font-size:20px}.color .editorial .image{height:390px}}
@media(max-width:480px){.color .hero .stage{height:400px!important}.brand-feature{scale:.78}.velocity-emblem{font-size:240px}.type-block{font-size:170px}.color .hero h1{font-size:clamp(52px,12vw,72px)!important}.color .instrument h2{font-size:35px}.color .mode{font-size:10px;padding:12px}.color .editorial{padding:60px 6vw}.color .editorial .image{height:330px}}
@media(prefers-reduced-motion:reduce){.color *,.color *:before,.color *:after{animation:none!important;transition:none!important}.color .pause{display:none}}