/* Canale Celesti — light, structure and a measured architectural signature. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--studio-blue:color-mix(in srgb,var(--brand) 68%,#07172a);--blue-line:color-mix(in srgb,var(--brand) 24%,transparent)}
.opening-screen{display:none;position:fixed;inset:0;z-index:210;color:#fff;pointer-events:none;overflow:hidden}
.cinema-boot .opening-screen{display:flex;align-items:center;justify-content:center}
.opening-panel{position:absolute;left:0;width:100%;height:50.1%;background:var(--studio-blue);will-change:transform}
.opening-panel-top{top:0;transform-origin:top}
.opening-panel-bottom{bottom:0;transform-origin:bottom}
.opening-signature{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(80%,640px)}
.opening-plan{width:100px;height:100px;margin-bottom:28px;color:#ccd3e9}
.opening-plan path{stroke-dasharray:720;stroke-dashoffset:720;animation:plan-draw 1.2s var(--ease-out) forwards}
.opening-name{font-size:clamp(35px,5.4vw,80px);font-weight:400;letter-spacing:-.06em;line-height:1.05}
.opening-caption{font-size:10px;letter-spacing:.23em;text-transform:uppercase;margin-top:18px;opacity:.75}
.opening-rule{width:90px;height:1px;background:currentColor;opacity:.6;margin-top:36px;transform:scaleX(0);animation:opening-rule 900ms var(--ease-out) forwards;transform-origin:left}
.opening-corner{position:absolute;bottom:40px;font:10px/1.5 monospace;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.opening-corner-left{left:40px}.opening-corner-right{right:40px}
.cinema-open .opening-panel-top{animation:shutter-top 1150ms var(--ease-in-out) both}
.cinema-open .opening-panel-bottom{animation:shutter-bottom 1150ms var(--ease-in-out) both}
.cinema-open .opening-signature{animation:signature-exit 450ms var(--ease-out) both}
.cinema-open .opening-corner{animation:signature-exit 300ms var(--ease-out) both}
.hero-image-stage{position:absolute;inset:0;z-index:-2;overflow:hidden;transform-origin:50% 52%}
.hero-image-stage .hero-photo{z-index:0}
.home-hero{min-height:100svh}
.home-hero .hero-content{min-height:calc(100svh - 20px);padding:142px var(--pad) 42px}
.home-hero:after{background:linear-gradient(90deg,rgba(4,14,30,.25),transparent 80%),linear-gradient(180deg,rgba(4,14,30,.12) 45%,rgba(4,14,30,.5))}
.hero-kicker{display:flex;gap:45px;align-items:center;width:100%;font:10px/1.5 monospace;letter-spacing:.13em;text-transform:uppercase;margin-bottom:30px}
.hero-kicker>span:first-child:before{content:'+';margin-right:14px;opacity:.7}
.home-hero .hero-wordmark{font-size:clamp(100px,12.2vw,200px);line-height:.82;letter-spacing:-.065em;margin:0 0 32px;white-space:normal;font-weight:400;opacity:1;transform:none;transition:none;max-width:100%}
.hero-title-mask{display:block;overflow:clip;padding-bottom:.13em;margin-bottom:-.1em}
.hero-title-line{display:block;transform-origin:left bottom}
.home-hero .hero-intro{font-size:clamp(16px,1.4vw,21px);line-height:1.35;max-width:390px;margin-top:4px}
.home-hero .hero-bottom{position:absolute;bottom:42px;left:var(--pad);width:calc(100% - var(--pad)*2);padding-top:0;gap:35px}
.hero-card{background:var(--studio-blue);color:#fff;display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:26px 30px;min-width:280px;max-width:340px;border-top:1px solid rgba(255,255,255,.45)}
.hero-partners{font-size:15px;line-height:1.4;letter-spacing:-.015em;display:flex;flex-direction:column}
.hero-card .text-link{justify-content:space-between;font-size:12px}
.hero-card .arrow-circle{width:32px;height:32px}
.hero-scroll{display:flex;align-items:center;gap:18px;font-size:11px;line-height:1.35;letter-spacing:.01em;min-height:48px}
.hero-scroll>span:last-child{margin-left:24px;font-size:24px;font-weight:400}
.hero-scroll-line{height:46px;width:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero-scroll-line:after{content:'';position:absolute;inset:0;background:#fff;transform:translateY(-100%);animation:scroll-line 2.4s var(--ease-in-out) 2.5s 2}
.hero-drafting{position:absolute;inset:122px 25px 25px;pointer-events:none;border:1px solid rgba(255,255,255,.17);z-index:0}
.hero-drafting:before,.hero-drafting:after{content:'+';position:absolute;font:16px monospace;color:rgba(255,255,255,.7);top:-11px;left:-5px}
.hero-drafting:after{top:auto;left:auto;bottom:-10px;right:-5px}
.hero-drafting>span:first-child{position:absolute;left:50%;top:-4px;height:8px;width:1px;background:rgba(255,255,255,.5)}
.hero-drafting>span:last-child{position:absolute;left:50%;bottom:-4px;height:8px;width:1px;background:rgba(255,255,255,.5)}
.inner-hero .hero-drafting{inset:122px 25px 25px}
.eyebrow{background:none;border-radius:0;padding:0;color:var(--brand);font:10px/1.5 monospace;letter-spacing:.1em;gap:14px}
.eyebrow:before{content:'+';width:auto;height:auto;background:none;border-radius:0;font-size:16px;font-weight:400;opacity:1}
.eyebrow:after{width:28px;height:1px;border-radius:0;background:currentColor;opacity:.45}
.studio-section{border-top:5px solid var(--studio-blue)}
.studio-aside{border-left:1px solid var(--blue-line);padding-left:20px}
.service-index,.process-number,.craft-number,.project-number{font-variant-numeric:tabular-nums}
.services-section{background:color-mix(in srgb,var(--paper) 96%,var(--brand))}
.craft-section{background:var(--studio-blue);color:#fff;--line:rgba(255,255,255,.2);--muted:#afb7d4}
.craft-section .eyebrow{color:#d3d9eb}
.craft-section .craft-number{font-weight:400;color:rgba(255,255,255,.4)}
.craft-section .lower-section-description,.craft-section .craft-item p{color:#d3d9eb}
.craft-section .craft-item:before{content:'+';position:absolute;left:-5px;top:-12px;font:18px monospace;color:rgba(255,255,255,.5)}
.project-card{border-top:3px solid var(--studio-blue)}
.project-number{font-family:monospace;color:var(--brand)}
.cta-section{position:relative}
.cta-section:after{content:'';position:absolute;left:50%;top:0;height:52px;width:1px;background:var(--blue-line)}
.site-footer{border-top:5px solid var(--studio-blue)}
.footer-large{color:var(--studio-blue);font-weight:400;letter-spacing:-.065em}
.brand-type small{letter-spacing:.16em}

/* The bootstrap adds these states before paint. Without JS everything is visible. */
.cinema-boot:not(.cinema-open) .hero-image-stage{transform:scale(1.14)}
.cinema-boot:not(.cinema-open) .hero-title-line,.cinema-page:not(.cinema-open) .hero-title-line{transform:translate3d(0,115%,0)}
.cinema-boot:not(.cinema-open) .hero-intro,.cinema-boot:not(.cinema-open) .hero-kicker,.cinema-boot:not(.cinema-open) .hero-bottom,.cinema-boot:not(.cinema-open) .site-header{opacity:0}
.cinema-open .hero-image-stage{animation:hero-lens 1900ms var(--ease-out) both}
.cinema-open .hero-title-line{animation:title-unveil 1200ms var(--ease-out) 200ms both}
.cinema-open .hero-title-mask:nth-child(2) .hero-title-line{animation-delay:280ms}
.cinema-open .hero-kicker{animation:detail-unveil 850ms var(--ease-out) 300ms both}
.cinema-open .hero-intro{animation:detail-unveil 1000ms var(--ease-out) 440ms both}
.cinema-open .hero-bottom{animation:detail-unveil 1000ms var(--ease-out) 560ms both}
.cinema-open .site-header{animation:detail-unveil 850ms var(--ease-out) 450ms both}
.cinema-page.cinema-open .hero-title-line{animation-duration:950ms;animation-delay:60ms}
.cinema-page.cinema-open .hero-image-stage{animation-duration:1200ms}
.cinema-page.cinema-open .hero-intro,.cinema-page.cinema-open .hero-bottom,.cinema-page.cinema-open .site-header{animation-delay:120ms;animation-duration:750ms}
.is-editing .hero-title-line,.osprey-editing .hero-title-line{transform:none!important;animation:none!important}
.is-editing .opening-screen,.osprey-editing .opening-screen{display:none!important}
.is-editing .hero-image-stage{transform:none!important;animation:none!important}
@keyframes plan-draw{to{stroke-dashoffset:0}}
@keyframes opening-rule{to{transform:scaleX(1)}}
@keyframes shutter-top{to{transform:translate3d(0,-101%,0)}}
@keyframes shutter-bottom{to{transform:translate3d(0,101%,0)}}
@keyframes signature-exit{to{opacity:0;transform:translate3d(0,-16px,0)}}
@keyframes hero-lens{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes title-unveil{from{transform:translate3d(0,115%,0)}to{transform:translate3d(0,0,0)}}
@keyframes detail-unveil{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes scroll-line{to{transform:translateY(100%)}}
@media(hover:hover) and (pointer:fine){.hero-card .text-link:hover .arrow-circle{background:white;color:var(--studio-blue)}.hero-scroll:hover .hero-scroll-line{background:#fff}}
@media(max-width:1000px){.home-hero .hero-content{padding-top:152px}.home-hero .hero-wordmark{font-size:16vw}.hero-kicker{gap:24px}.hero-card{min-width:260px}}
@media(max-width:700px){
 .home-hero .hero-content{padding:143px 30px 230px;min-height:calc(100svh - 20px)}
 .home-hero .hero-wordmark{font-size:clamp(88px,23vw,158px);line-height:.88;letter-spacing:-.065em;margin:0 0 30px}
 .hero-kicker{font-size:8px;gap:20px;justify-content:space-between;margin-bottom:37px;letter-spacing:.06em}
 .hero-kicker>span:first-child:before{display:none}
 .home-hero .hero-intro{font-size:15px;line-height:1.4;max-width:270px}
 .home-hero .hero-bottom{bottom:30px;left:30px;width:calc(100% - 60px);padding-top:0;flex-direction:row;align-items:flex-end;gap:20px}
 .hero-card{min-width:0;width:230px;max-width:75%;padding:20px;gap:23px;align-self:auto}
 .hero-partners{font-size:12px}.hero-card .text-link{font-size:11px;gap:12px}.hero-card .arrow-circle{width:28px;height:28px}
 .hero-scroll{font-size:0;gap:0;min-width:18px}.hero-scroll-line{height:46px}.hero-scroll>span:last-child{font-size:20px;margin-left:12px}
 .hero-drafting,.inner-hero .hero-drafting{inset:116px 18px 18px}
 .opening-plan{width:80px;height:80px}.opening-caption{font-size:8px;letter-spacing:.16em}
 .opening-corner{bottom:26px;font-size:8px}.opening-corner-left{left:26px}.opening-corner-right{right:26px}
 .studio-aside{padding-left:14px}.eyebrow{font-size:9px}
}
@media(max-width:359px){.home-hero .hero-content{padding-left:24px;padding-right:24px}.hero-kicker{font-size:7px;gap:12px}.home-hero .hero-wordmark{font-size:25vw}.hero-card{max-width:77%;padding:16px}.hero-card .text-link{font-size:10px}.hero-scroll>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){
 .opening-screen{display:none!important}.hero-title-line,.hero-image-stage,.hero-kicker,.hero-intro,.hero-bottom,.site-header{animation:none!important;transform:none!important;opacity:1!important}
 .hero-scroll-line:after{animation:none;transform:none}.hero-title-mask{overflow:visible}
}