/* SHRA brand identity and motion layer. */
:root{--bg:#161616;--white:#f3efe7;--paper:#f3efe7;--ink:#161616;--red:#aa9164;--soft:#b9aea0;--muted:#696259}
::selection{background:#aa9164;color:#fff}.wordmark,.header .wordmark{display:block;font-size:0;letter-spacing:0;line-height:1;flex-shrink:0}.wordmark img{width:155px;height:auto;max-width:none}.header{height:112px}.header.scrolled{height:90px;background:#161616f2}.footer .wordmark img{width:185px}.menu-top .wordmark img{width:170px}.nav-reel{margin-left:-95px}.hero h1{font-size:clamp(115px,12vw,210px);max-width:85%}.hero-kicker{color:#f3efe7}.hero h1 em{color:#e4d5b9}.hero-side{bottom:205px}.hero-side p{color:#e5ddd0}.hero-photo{background:#161616}.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;will-change:opacity}.hero-slide.is-active{opacity:1}.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.03)}.hero-slide.is-active img{animation:hero-drift 9.6s linear both;animation-play-state:paused}.hero.hero-playing .hero-slide.is-active img{animation-play-state:running}.hero-scene-control{position:absolute;right:var(--gutter);bottom:124px;width:128px}.hero-scene-control button{display:flex;gap:11px;align-items:center;width:100%;font:400 11px/1 var(--sans);letter-spacing:.8px;padding:13px 0}.scene-number{color:#f3efe7}.scene-total{color:#c7bdaa}.hero-scene-control b{font-size:19px;font-weight:400;color:#e4d5b9;margin-left:auto;transition:translate .25s}.hero-scene-control button:hover b{translate:3px -3px}.hero-scene-progress{display:block;height:1px;background:#f3efe750;overflow:hidden}.hero-scene-progress i{display:block;background:#e4d5b9;height:1px;width:100%;transform:scaleX(0);transform-origin:left}.hero-edition{color:#b9aea0}.hero-edition b{color:#ded2ba}.hero-shade{background:linear-gradient(180deg,#16161688 0%,#16161605 25%,#16161600 39%,#16161666 58%,#161616f2 100%),linear-gradient(90deg,#16161630,transparent 65%)}
.craft-ribbon{padding:0;display:block;overflow:hidden;background:#e6ded1;border-bottom:1px solid #aa91643b;color:#28241d}.ribbon-track{display:flex;width:max-content;animation:ribbon-flow 32s linear infinite;will-change:transform}.ribbon-group{display:flex;align-items:center;flex-shrink:0;gap:clamp(35px,5vw,90px);padding:23px clamp(35px,5vw,90px) 23px 0}.ribbon-group span{font:italic 34px/1 var(--serif);white-space:nowrap}.ribbon-group img{width:43px;height:43px;animation:rotate 45s linear infinite;opacity:.9}.craft-ribbon:hover .ribbon-track{animation-play-state:paused}.ribbon-group:nth-child(2){display:flex}
.motion-line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}.motion-line>span{display:inline-block;max-width:100%;vertical-align:top}.js-motion.enhanced-motion h2.reveal .motion-line>span,.js-motion.enhanced-motion .reveal h2 .motion-line>span{transform:translateY(115%) rotate(2deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--line-delay,0ms);transform-origin:0 0}.js-motion.enhanced-motion h2.reveal.visible .motion-line>span,.js-motion.enhanced-motion .reveal.visible h2 .motion-line>span{transform:translateY(0) rotate(0)}
.js-motion .intro-art.reveal{clip-path:inset(14% 0 14% 0);transition:clip-path 1.35s cubic-bezier(.2,.7,.2,1),opacity 1s,transform 1s}.js-motion .intro-art.reveal.visible{clip-path:inset(0)}.arch-frame img{transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}.js-motion .intro-art:not(.visible) img{transform:scale(1.15)}.studio-image-window{overflow:hidden;border-radius:2px 2px 35% 2px;background:#d0c3ae}.studio-image-window img{border-radius:0;transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter 1.5s}.js-motion .studio-art:not(.visible) img{transform:scale(1.12);filter:brightness(.8)}.studio-art.visible img{transform:scale(1);filter:brightness(1)}.studio-image-window:hover img{transform:scale(1.035)}.enhanced-motion .culture-window>img{transform:translate3d(0,var(--scene-y,0px),0) scale(1.12);will-change:transform}.culture-window{background:#161616}.culture-caption h2{color:#f3efe7}.contact-circle{background:#161616;border-color:#161616}.contact-circle:hover{background:#7f6c49;color:#f3efe7}.contact h2 em{color:#8a7148}.contact-orbit{opacity:.14}.founder{background:#191919}.founder-monogram{color:#c9b28b;border-color:#aa916466}.founder-signature .eyebrow{color:#c9bba7}.founder-story>p{color:#b9aea0}.founder-profiles b,.line-link b{color:#aa9164}.footer{background:#161616}.menu-dialog{background:#161616}.menu-dialog:before{background:radial-gradient(ellipse at 80% 40%,#aa91641a,transparent 60%)}
.work-cursor{position:absolute;left:0;top:0;width:74px;height:74px;border-radius:50%;display:grid;align-content:center;text-align:center;background:#e4d5b9;color:#28241d;font:500 8px/1.5 var(--sans);letter-spacing:.4px;z-index:8;pointer-events:none;opacity:0;transition:opacity .2s,transform .18s ease-out;will-change:transform}.work-cursor b{font-size:21px;font-weight:400}.work-cursor.is-visible{opacity:1}.project-row .project-name{transition:translate .5s cubic-bezier(.2,.7,.2,1),color .3s}.project-row.active .project-name{translate:22px 0}.project-row>b{transition:opacity .3s,translate .4s,rotate .4s}.project-row:hover>b{rotate:8deg}.project-row:focus-visible{outline-offset:-4px}.service[open] .service-content{animation:service-open .5s cubic-bezier(.2,.7,.2,1) both}.menu-dialog[open]{animation:menu-reveal .6s cubic-bezier(.2,.7,.2,1) both}.menu-dialog[open] .menu-body nav>*{animation:menu-item .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:.1s}.menu-dialog[open] .menu-body nav>*:nth-child(2){animation-delay:.16s}.menu-dialog[open] .menu-body nav>*:nth-child(3){animation-delay:.22s}.menu-dialog[open] .menu-body nav>*:nth-child(4){animation-delay:.28s}.project-dialog[open],.brief-dialog[open],.credits-dialog[open]{animation:dialog-enter .35s cubic-bezier(.2,.7,.2,1) both}.reel-slide{animation:reel-enter .65s ease both}.reel-copy{animation:reel-copy-in .85s cubic-bezier(.2,.7,.2,1) both}.reel-copy .eyebrow{color:#e4d5b9}.reel-copy p{color:#e4d5b9}.menu-bottom,.footer-bottom{color:#b9aea0}
@media(hover:hover) and (pointer:fine){[data-magnetic]{transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}.contact-circle:hover{transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0) rotate(-8deg)}.work-preview{transform:perspective(1100px) translate3d(var(--preview-x,0px),var(--preview-y,0px),0) rotate(var(--preview-angle,-5deg));transition:transform .8s cubic-bezier(.2,.7,.2,1)}}
body:has(dialog[open]) .work-cursor{opacity:0}
@keyframes hero-drift{from{transform:scale(1.025) translate3d(-.3%,0,0)}to{transform:scale(1.1) translate3d(.5%,-.4%,0)}}
@keyframes ribbon-flow{to{transform:translateX(-50%)}}
@keyframes service-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes menu-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes menu-item{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes reel-enter{from{opacity:.1;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes reel-copy-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.hero h1{font-size:12.8vw;max-width:83%}.hero-side{bottom:205px}.hero-scene-control{width:100px;bottom:125px}.hero-side p{font-size:9px}.wordmark img{width:145px}.nav-reel{margin-left:-75px}}
@media(max-width:700px){.header{height:85px}.header.scrolled{height:73px}.wordmark img,.header .wordmark img{width:117px}.footer .wordmark img{width:145px}.menu-top .wordmark img{width:132px}.nav-reel{margin-left:0;font-size:8px;gap:8px}.header .tiny-arrow{font-size:16px}.hero h1{font-size:18.3vw;left:var(--gutter);right:var(--gutter);max-width:none;bottom:155px;line-height:.9}.hero h1>span{white-space:nowrap}.hero-side{display:none}.hero-scene-control{left:var(--gutter);right:auto;bottom:106px;width:90px}.hero-scene-control button{font-size:8px;padding:7px 0;gap:8px}.hero-scene-control b{font-size:14px}.hero-bottom{bottom:64px}.hero-edition{max-width:125px}.hero-slide img{object-position:53% 42%}.hero-kicker{font-size:5.8px;letter-spacing:1.3px}.ribbon-group{gap:32px;padding:17px 32px 17px 0}.ribbon-group span{font-size:27px}.ribbon-group img{width:30px;height:30px}.ribbon-track{animation-duration:25s}.studio-image-window{border-radius:2px 2px 30% 2px}.work-cursor{display:none}.project-row.active .project-name{translate:5px 0}.reel-copy h3{font-size:52px}.intro h2{font-size:15.3vw}.footer-top{align-items:center}}
@media(max-width:360px){.header .wordmark img{width:104px}.nav-reel{font-size:7px;gap:6px}.hero h1{font-size:18vw;bottom:150px}.hero-kicker{font-size:5px;letter-spacing:1px}.hero-scene-control{bottom:103px}.hero-edition{display:none}.reel-copy h3{font-size:45px}}
.motion-off .hero-slide img,.motion-off .motion-line>span,.motion-off .intro-art,.motion-off .studio-art img{transform:none!important;clip-path:none!important;filter:none!important}.motion-off .hero-slide{will-change:auto}.motion-off .work-cursor{display:none}.motion-off [data-magnetic]{transform:none!important}.motion-off .culture-window>img{transform:none;will-change:auto}.motion-off .ribbon-track{width:100%;transform:none;will-change:auto}.motion-off .ribbon-group{width:100%;justify-content:space-evenly;flex-wrap:wrap;gap:15px;padding:20px var(--gutter)}.motion-off .ribbon-group:nth-child(2){display:none}.motion-off .ribbon-group img:last-child{display:none}.motion-off .ribbon-group span{font-size:clamp(22px,2.5vw,34px)}
@media(prefers-reduced-motion:reduce){.hero-slide img,.motion-line>span,.intro-art,.studio-art img{transform:none!important;clip-path:none!important;filter:none!important}.work-cursor{display:none}.culture-window>img{transform:none!important}.ribbon-track{width:100%;transform:none;will-change:auto}.ribbon-group{width:100%;justify-content:space-evenly;flex-wrap:wrap;gap:15px;padding:20px var(--gutter)}.ribbon-group:nth-child(2),.ribbon-group img:last-child{display:none}.ribbon-group span{font-size:clamp(22px,2.5vw,34px)}}
