/* V12 — editorial pacing: enter, explore, respond. No continuous loops. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(var(--page-progress,0));transform-origin:left;opacity:.42;pointer-events:none}
.brand-hero{min-height:min(90svh,940px);padding-top:132px}
.brand-kicker{margin-bottom:46px}
.brand-message h1{font-size:clamp(84px,10.4vw,220px)}
.brand-message h1>.hero-line{overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
.hero-line>span{display:block;transform-origin:left bottom}
.brand-bottom{padding-top:48px}
.portfolio-heading{padding-top:78px}
.portfolio-stage{width:100%}
.hero-panel.reveal.motion-ready{transform:translateY(42px);transition:opacity .7s var(--motion-ease),transform 1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.hero-panel.reveal.shown{transform:none}
.reveal.motion-ready{transition-timing-function:var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.hero-preview img{transform-origin:50% 0;transition:transform 1.45s var(--motion-ease)}
.hero-panel-open{display:flex;justify-content:center;gap:0;width:auto;min-width:46px;padding:0 15px;z-index:1;transition:background .3s,color .3s,transform .35s var(--motion-ease)}
.hero-open-text{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:11px;line-height:1.5;transition:max-width .35s var(--motion-ease),opacity .25s,margin .35s}
.hero-panel-open>span:last-child{display:block;transition:transform .35s var(--motion-ease)}
.card-caption h3{transition:transform .4s var(--motion-ease)}
.card-open{opacity:1;transform:none;width:44px;height:44px;transition:background .3s,transform .4s var(--motion-ease)}
.card-open>span{transition:transform .4s var(--motion-ease)}
.service-row{position:relative;isolation:isolate}
.service-row::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;z-index:-1;transform:scaleY(.72);transition:opacity .3s,transform .5s var(--motion-ease)}
.service-row>span:last-child,.pill>span,.menu-toggle span,.menu-body nav>a>span:last-child{transition:transform .4s var(--motion-ease)}
.service-row::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .65s var(--motion-ease)}
.service-row.shown::after{transform:scaleX(1);opacity:.38}
.contact-big.reveal.motion-ready{transform:translateY(24px)}
.contact-big.reveal.shown{transform:none}
.menu-body nav>a{transition:color .25s}

@media(prefers-reduced-motion:no-preference){
 .hero-line>span{animation:type-enter .95s var(--motion-ease) backwards}
 .hero-line:nth-child(2)>span{animation-delay:110ms}
 .brand-statement{animation:quiet-enter .8s 180ms var(--motion-ease) backwards}
 .brand-description{animation:quiet-enter .8s 250ms var(--motion-ease) backwards}
 .brand-art{animation:mark-enter 1.05s 120ms var(--motion-ease) backwards}
 .brand-bottom{animation:quiet-enter .8s 320ms var(--motion-ease) backwards}
 .brand-art .real-brand-symbol{transform:translate3d(0,var(--mark-y,0px),0) rotate(var(--mark-turn,0deg));transition:transform .28s linear}
 .page-intro h1,.case-heading{animation:quiet-enter .75s var(--motion-ease) backwards}
 .page-intro>p{animation:quiet-enter .7s 100ms var(--motion-ease) backwards}
 .menu[open]{animation:menu-enter .38s var(--motion-ease) both}
 .menu[open] .menu-body nav>a{animation:quiet-enter .5s var(--motion-ease) backwards}
 .menu[open] .menu-body nav>a:nth-child(2){animation-delay:45ms}
 .menu[open] .menu-body nav>a:nth-child(3){animation-delay:90ms}
 .menu[open] .menu-body nav>a:nth-child(4){animation-delay:135ms}
 .image-viewer[open]{animation:quiet-enter .25s var(--motion-ease)}
}
@keyframes type-enter{from{transform:translateY(108%) rotate(2deg)}to{transform:translateY(0) rotate(0)}}
@keyframes quiet-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes mark-enter{from{opacity:0;transform:translateY(24px) rotate(-5deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes menu-enter{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

@media(hover:hover) and (pointer:fine){
 .hero-panel:hover .hero-preview img{transform:none}
 .hero-panel.is-peeking .hero-preview img{transform:translate3d(0,calc(-1 * var(--preview-pan,0px)),0)}
 .hero-panel:hover .hero-panel-open,.hero-panel:focus-visible .hero-panel-open{transform:none;background:var(--brown);color:var(--paper)}
 .hero-panel:is(:hover,:focus-visible) .hero-open-text{max-width:70px;margin-right:12px;opacity:1}
 .hero-panel:is(:hover,:focus-visible) .hero-panel-open>span:last-child{transform:rotate(45deg)}
 .work-card a:is(:hover,:focus-visible) .card-open{background:#211a14;color:#f7f6f2;transform:translateY(-3px)}
 .work-card a:is(:hover,:focus-visible) .card-open>span{transform:rotate(45deg)}
 .work-card a:is(:hover,:focus-visible) .card-caption h3{transform:translateX(4px)}
 .service-row:is(:hover,:focus-visible)::before{opacity:.045;transform:scaleY(1)}
 .service-row:is(:hover,:focus-visible)>span:last-child{transform:translate(4px,-4px)}
 .pill:is(:hover,:focus-visible)>span{transform:rotate(45deg)}
 .menu-toggle:hover span:first-child{transform:translateX(-5px)}
 .menu-toggle:hover span:last-child{transform:translateX(3px)}
 .menu-body nav>a:is(:hover,:focus-visible)>span:last-child{transform:translate(5px,-5px)}
 .brand-art:hover .real-brand-symbol{transform:translate3d(0,calc(var(--mark-y,0px) - 5px),0) rotate(-3deg);transition:transform .65s var(--motion-ease)}
}
@media(min-width:1600px){.brand-hero{padding-top:144px}.brand-hero-grid{max-width:1800px;width:100%;margin:auto;gap:7vw}.brand-bottom{padding-top:52px}.portfolio-heading{padding-top:88px}}
@media(max-width:1000px){.brand-hero{min-height:700px;padding-top:118px}.brand-message h1{font-size:10.1vw}.brand-bottom{padding-top:38px}}
@media(max-width:600px){
 .brand-hero{min-height:0;padding:104px 16px 24px}
 .brand-kicker{margin-bottom:28px}
 .brand-message h1{font-size:clamp(55px,15.7vw,94px)}
 .brand-hero-grid{gap:22px}
 .brand-bottom{padding-top:16px}
 .portfolio-heading{padding-top:48px}
 .hero-panel.reveal.motion-ready{opacity:1;transform:none;transition:none}
 .reveal.motion-ready{transition-delay:0ms;transition-duration:.5s}
 .hero-panel-open{min-width:40px;padding:0 13px}
 .hero-open-text{display:none}
 .card-open{width:40px;height:40px}
 .hero-line>span{animation-duration:.65s}
 .brand-art{animation:quiet-enter .6s 100ms var(--motion-ease) backwards}
 .brand-art .real-brand-symbol{transform:none!important}
 .brand-message h1>.hero-line{padding-bottom:.15em;margin-bottom:-.15em}
 .contact-big.reveal.motion-ready{transform:translateY(14px)}
 .contact-big.reveal.shown{transform:none}
 body.reading-down .quick-actions:not(:focus-within){opacity:0;pointer-events:none;visibility:hidden;transform:translateY(12px)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .reveal.motion-ready,.hero-panel.reveal.motion-ready,.contact-big.reveal.motion-ready{opacity:1;transform:none}
 .brand-art .real-brand-symbol,.brand-art:hover .real-brand-symbol,.hero-panel.is-peeking .hero-preview img{transform:none!important}
}