@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Lora:wght@400;700&family=Oswald:wght@400&display=swap');
/* Editor preset 099: Cormorant Garamond Label, retaining hero display size. */
.hero-h .hero-blur-line{flex-wrap:nowrap!important;white-space:nowrap}
html body .hero-h,html body .hero-h *{font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:600!important;font-style:normal!important;letter-spacing:.04em!important;text-transform:uppercase!important;line-height:1.3!important}
/* Custom typography is confined to the opening statement.
   All other text uses the site's original Onest/Oswald component styles. */
.project-library .library-copy h1{font-size:clamp(40px,4.8vw,84px);line-height:1.1;text-wrap:balance}
.project-library .library-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.project-library .library-copy h1{font-size:clamp(26px,6vw,40px)}}
html body #faq-title,html body .why > .wrap > h2{font-family:Georgia,'Times New Roman',serif!important;font-style:italic!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.02em}
html body :is(h1,h2,h3,h4,h5,h6),
html body :is(h1,h2,h3,h4,h5,h6) :is(span,em,strong,b),
html body :is(.vid__name,.reel__id b,.contact-card .card-label){color:#fff!important}
html body :is(.typo__p,.contact-intro,.services__hint,.service-card p,.why-grid p,.form-note,.card-action,.project-card-copy small,.project-card-copy p){color:#a1a1a1}
html body #js-typo,html body #js-typo *{font-family:"Cormorant Garamond",sans-serif!important;font-weight:400!important;font-style:italic!important;line-height:.8!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--fg)}
html body #js-typo{font-size:clamp(60px,11.5625vw,185px)!important;translate:none;margin:0;gap:0;text-transform:none}
html body #js-typo *{font-size:inherit!important}
html body #js-typo-p,html body #js-typo-p *{font-family:'Cormorant Garamond',Georgia,serif!important;font-style:normal!important;font-weight:300!important;letter-spacing:-.04em!important;text-transform:none}
html body #js-typo-p{font-size:clamp(24px,2.5vw,40px);width:100%;max-width:19.8em;line-height:1.05!important;color:#a1a1a1;translate:none;margin:clamp(40px,5.5vh,66px) auto 0}
html body.no-body-text-fx #typo{min-height:100svh;box-sizing:border-box;padding:clamp(100px,16svh,180px) 0 clamp(64px,10svh,110px)}
html body #typo .typo__inner{height:auto;padding:0 clamp(20px,4vw,64px);position:relative;top:auto}
@media(max-width:700px){html body #js-typo{font-size:clamp(50px,11.25vw,80px)!important}html body.no-body-text-fx #typo{padding:110px 0 80px}}
/* Keep the studio wordmark and SVG icons as brand assets. */
html body :is(.mark,.mark span,.contact-nav>a,.contact-nav>a span,.ptr-logo text,.ptr-logo tspan){
  font-family:Oswald,sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:.02em!important;
}
html body :is(.mirror-controls button,.video-stream-player>button){font-style:normal!important}
.contact-link-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:62px;padding:0 26px;border:1px solid var(--fg);border-radius:22px;background:transparent;color:var(--fg);font-size:18px;text-decoration:none;box-shadow:none;transition:background .35s,color .35s,transform .35s}
.contact-link-button:hover,.contact-link-button:focus-visible{background:#fff;color:#081a3b;transform:translateY(-2px)}
.contact-link-button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.contact-link-button{transition:none}}
/* Contact-style flip, with the existing liquid-glass-react surface behind it. */
.contact-link-button{position:relative;isolation:isolate;overflow:hidden;transform-style:preserve-3d;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3);transition:transform .5s cubic-bezier(.2,.75,.2,1),background .35s,color .35s}
.contact-link-button>span:not(.liquid-surface),.contact-link-button>svg{transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.contact-link-button:hover,.contact-link-button:focus-visible{transform:perspective(500px) rotateY(180deg);background:#fff;color:#101010}
.contact-link-button:hover>span:not(.liquid-surface),.contact-link-button:hover>svg,.contact-link-button:focus-visible>span:not(.liquid-surface),.contact-link-button:focus-visible>svg{transform:rotateY(180deg)}
.brand-logo{display:inline-block;width:5em;height:2.17em;max-width:100%;vertical-align:middle;overflow:visible}
/* Fit each original render, not a painted 16:9 letterbox. */
.reel .slide{display:grid;place-items:center;background:transparent;box-shadow:none;overflow:visible}
.reel .slide img{display:block;width:auto;height:auto;max-width:100%;max-height:min(64dvh,720px);object-fit:contain;border-radius:18px;box-shadow:0 24px 70px -24px #0008}
@media(max-width:900px){.reel .slide img{max-height:60dvh;border-radius:14px}}
/* Drift Wall: the entire hovered image lights up, not a cursor-facing slice. */
#wall-plane .tile::before,#wall-plane .tile > .edge{-webkit-mask-image:none;mask-image:none}
#wall-plane .tile.hot::before,#wall-plane .tile.hot > .edge,
#wall-plane .tile:focus-visible::before,#wall-plane .tile:focus-visible > .edge{opacity:.55}
@media(prefers-reduced-motion:reduce){#wall-plane .tile{translate:none!important;rotate:none!important}}
.brand-logo path{fill:currentColor;stroke:none}
.library-mark .brand-logo,.mark .brand-logo,.contact-nav .brand-logo{width:96px;height:42px}
@media(prefers-reduced-motion:reduce){.contact-link-button,.contact-link-button>span,.contact-link-button>svg{transition:none!important}}
/* Original squishy hover choreography on glass; no click flight or compression. */
.cta.cta--glass{--white:var(--fg);--w:220px;--h:68px;border:1px solid rgba(234,241,255,.35);border-radius:20px;background:rgba(255,255,255,.05);isolation:isolate}
.cta.cta--glass .cta__bg,.cta.cta--glass .cta__splash,.cta.cta--glass .cta__path,.cta.cta--glass .cta__outline,.cta.cta--glass .state-2{display:none!important}
.cta.cta--glass .cta__wrap,.cta.cta--glass .cta__content{background:transparent!important;box-shadow:none!important;transform:none!important}
.cta.cta--glass .cta__content::before{display:none}
.cta.cta--glass .cta__char{filter:none!important;text-shadow:none!important}
.cta.cta--glass .cta__char.state-1 span{animation:none!important}
.cta.cta--glass .cta__char.state-1 span::before{display:block}
.cta.cta--glass:hover .cta__char.state-1 span::before{animation:charAppear .7s ease calc(var(--i) * .03s)}
.cta.cta--glass:hover .cta__char.state-1 span::after{animation:charDisappear .7s ease calc(var(--i) * .03s)}
.cta.cta--glass .cta__icon i,.cta.cta--glass .cta__icon i::before,.cta.cta--glass .cta__icon i::after{background:currentColor;box-shadow:none;color:var(--fg)}
.cta.cta--glass .cta__icon{animation:none!important;transform:none!important;flex:0 0 24px;width:24px}
.cta.cta--glass .cta__char.state-1{flex-shrink:0}
/* These are the source button's hover keyframes, not its focus/click flight. */
.cta.cta--glass .cta__icon i{animation:swingArrow 1s ease-in-out infinite paused}
.cta.cta--glass .cta__icon i::before{animation:rotateArrowLine 1s linear infinite paused}
.cta.cta--glass .cta__icon i::after{animation:rotateArrowLine2 1s linear infinite paused}
.cta.cta--glass:is(:hover,:focus-visible) .cta__icon i,
.cta.cta--glass:is(:hover,:focus-visible) .cta__icon i::before,
.cta.cta--glass:is(:hover,:focus-visible) .cta__icon i::after{animation-play-state:running}
.cta.cta--glass:focus-visible .cta__char.state-1 span::before{animation:charAppear .7s ease calc(var(--i) * .03s)}
.cta.cta--glass:focus-visible .cta__char.state-1 span::after{animation:charDisappear .7s ease calc(var(--i) * .03s)}
.cta.cta--glass:focus-visible{outline:2px solid var(--fg);outline-offset:5px}
@media(prefers-reduced-motion:reduce){.cta.cta--glass .cta__icon{animation:none!important}}