@font-face{font-family:'Open Sauce One';src:url('/assets/fonts/open-sauce-one-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sauce One';src:url('/assets/fonts/open-sauce-one-500.woff2') format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('/assets/fonts/open-sauce-sans-500.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('/assets/fonts/open-sauce-sans-600.woff2') format('woff2');font-weight:600 900;font-display:swap}
body{font-family:'Open Sauce One',Arial,sans-serif}
h1,h2,h3,h4,.about-poster .wrap>div,.case-art .editorial-word{font-family:'Open Sauce Sans',Arial,sans-serif;font-weight:500}
.hero-copy h1{font-weight:600;font-size:clamp(56px,7.1vw,100px);line-height:1.06;letter-spacing:-.06em}
.page-hero h1,.case-hero h1,.article-hero h1{font-weight:600}
.pill{isolation:isolate;position:relative;overflow:hidden;transition:background .25s,color .25s,transform .25s,box-shadow .25s;gap:24px}
.pill::before{content:'';position:absolute;z-index:-1;inset:0;background:#ffae88;transform:translateY(105%);border-radius:50% 50% 0 0;transition:transform .4s cubic-bezier(.22,1,.36,1),border-radius .4s}
.pill>svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pill:hover,.pill:focus-visible{color:#17100c;box-shadow:0 8px 24px #0003;transform:translateY(-2px)}
.pill:hover::before,.pill:focus-visible::before{transform:translateY(0);border-radius:0}
.pill:hover>svg,.pill:focus-visible>svg{transform:rotate(-35deg) translateX(2px)}
.pill:active{transform:translateY(0) scale(.98)}
a:focus-visible,button:focus-visible{outline:2px solid #ffae88;outline-offset:5px}
.text-link svg,.hero-secondary svg{transition:transform .25s}
.text-link:hover svg,.hero-secondary:hover svg{transform:translateX(5px)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .18s ease-in both}
::view-transition-new(root){animation:page-in .32s cubic-bezier(.22,1,.36,1) both}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero-light{background-image:url(/assets/brand/hero-copper-poster.jpg)}
.hero-light::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#09090966,transparent 70%);pointer-events:none}
.hero-light:has(.hero-video.is-ready){animation:none}
.hero-video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;filter:brightness(.75)}
.hero-video.is-ready{opacity:1}
.hero-video-control{position:absolute;bottom:24px;right:5.5%;z-index:3;border:1px solid #ffffff40;border-radius:30px;background:#09090988;color:#eee;padding:10px 14px;font-size:10px;backdrop-filter:blur(10px)}
.hero-video-control[hidden]{display:none}
.hero-video-control span{margin-left:10px}
@media(max-width:560px){.hero-copy h1{font-size:clamp(48px,13vw,68px)}.hero-video-control{bottom:10px;font-size:9px;padding:7px 10px}.hero-video{object-position:58% center}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.pill,.pill::before,.pill>svg,.text-link svg,.hero-secondary svg{transition:none}.pill:hover,.pill:focus-visible,.pill:active{transform:none}.hero-video{display:none}}