:root{--site-header-height:82px}
body:has(>header){padding-top:var(--site-header-height)}
body>header{position:fixed!important;inset:0 0 auto;width:100%;z-index:1000!important;background:#141019f2!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:16px 4%;border:0!important;outline:0;box-shadow:0 5px 20px #100b1920}
html{scroll-padding-top:calc(var(--site-header-height) + 16px)}
main [id],section[id]{scroll-margin-top:calc(var(--site-header-height) + 16px)}
body>header nav.open{max-height:calc(100dvh - var(--site-header-height));overflow-y:auto}
.cinematic-top{top:calc(var(--site-header-height) + 22px)}
.portal-topline{top:calc(var(--site-header-height) + 20px)}
.dashboard-stage{padding-top:calc(var(--site-header-height) + 18px)}
.article-index{top:calc(var(--site-header-height) + 24px)}
.skip:focus{position:fixed;z-index:1100}
.case-grid .teaser-case>div:last-child h2{font-size:clamp(27px,2.8vw,42px);line-height:1.2}
.crm-strip .crm-logo-row{background:none;border:0;border-bottom:1px solid #d7c8df;border-radius:0;padding:12px 0 24px;gap:28px}
.crm-strip .crm-logo-row>div,.crm-strip .crm-logo-row>div:last-child{background:none;border-radius:0;padding:0}
.crm-strip .crm-logo-row img{filter:brightness(0);opacity:.9;height:46px;max-width:180px}
.crm-strip .crm-choice{font-size:14px;color:#62516e;line-height:1.7}
@media(max-width:1000px){body>header{padding:12px 6%}body>header nav{top:100%}}
@media(max-width:760px){.case-grid .teaser-case>div:last-child h2{font-size:28px}.crm-strip .crm-logo-row{gap:18px}.crm-strip .crm-logo-row img{height:38px}.portal-topline{top:calc(var(--site-header-height) + 14px)}.cinematic-top{top:calc(var(--site-header-height) + 14px)}.dashboard-stage{padding-top:calc(var(--site-header-height) + 18px)}}

.crm-strip .crm-sperant-mark{position:relative}
.crm-strip .crm-logo-row .crm-symbol-detail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);clip-path:inset(0 74% 0 0);filter:grayscale(1) contrast(4);pointer-events:none}
/* Device silhouettes: phone portrait, tablet landscape. */
.showcase .show-image[data-device="unit"] .scene-device{width:224px;max-width:72%;aspect-ratio:9/19.5;padding:25px 7px 18px;border-radius:32px;overflow:hidden;box-shadow:0 22px 44px #21142e30,inset 0 0 0 2px #070609}
.showcase .show-image[data-device="unit"] .scene-device img{object-fit:cover;object-position:52% center;border-radius:19px;background:#17151c}
.showcase .show-image[data-device="unit"] .scene-device:before{width:58px;height:10px;left:calc(50% - 29px);top:9px;border-radius:12px;background:#050406;z-index:2}
.showcase .show-image[data-device="unit"] .scene-device:after{width:31%;height:3px;left:34.5%;right:auto;top:auto;bottom:7px;background:#bcb4c5}
.showcase .show-image[data-device="unit"]>span{margin-top:24px}
.logos img.buleje-logo,.ribbon-track img.buleje-logo{filter:brightness(0);opacity:1;object-fit:contain;max-width:180px}
.projects .project{position:relative;isolation:isolate;overflow:hidden;transition:box-shadow .45s ease}
.projects .project:after{content:'';position:absolute;inset:-40% -90%;z-index:2;pointer-events:none;background:linear-gradient(112deg,transparent 43%,#fff2 48%,#fff6 50%,#fff1 53%,transparent 58%);transform:translateX(-55%);opacity:0}
.projects .project>img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;transform-origin:50% 60%}
.projects .project>div{z-index:3}
.projects .project:focus-visible{outline:3px solid #b883dc;outline-offset:-3px}
@media(hover:hover){.projects .project:hover{box-shadow:0 16px 35px #39234c30}.projects .project:hover>img{transform:scale(1.055);filter:brightness(1.08)}.projects .project:hover:after{animation:project-light-pass .95s ease both}.projects .project:hover>div span{color:#f4deff}}
.projects .project:focus-visible:after{animation:project-light-pass .95s ease both}
@keyframes project-light-pass{0%{transform:translateX(-55%);opacity:0}20%{opacity:1}100%{transform:translateX(55%);opacity:0}}
.oceano-card-image{object-position:51% center!important}
@media(min-width:761px){.film-integrated .film-pin{top:var(--site-header-height);height:calc(100svh - var(--site-header-height));min-height:540px}}
@media(max-width:760px){.showcase .show-image[data-device="unit"] .scene-device{width:196px;max-width:72%}}
@media(prefers-reduced-motion:reduce){.projects .project,.projects .project>img{transition:none}.projects .project:after{display:none}.projects .project:hover>img{transform:none}}
.paused .projects .project:after{animation:none}
/* Keep the opening brand sequence clear, then introduce navigation softly. */
body>header{transition:opacity .45s ease,transform .45s ease,visibility .45s}
body:has(.brand-intro)>header,body.nav-intro-wait>header{opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none}
body:has(.brand-intro) .whatsapp-dock,body.nav-intro-wait .whatsapp-dock,body.footer-in-view .whatsapp-dock.sticky-contact{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media(prefers-reduced-motion:reduce){body>header{transition:none}body:has(.brand-intro)>header{opacity:1;visibility:visible;transform:none;pointer-events:auto}}
/* Clear home navigation and a more inviting booking action. */
body>header nav>a:not(.small-cta){transition:color .2s;text-underline-offset:7px}
body>header nav>a:not(.small-cta):hover,body>header nav>a[aria-current="page"]{color:#dcb5f2;text-decoration:underline;text-decoration-thickness:1px}
body>header .small-cta{background:#713c97;border-color:#a577c3;color:#fff;box-shadow:0 3px 14px #713c9726;transition:background .22s,color .22s,box-shadow .22s,transform .22s,border-color .22s;white-space:nowrap}
body>header .small-cta:hover,body>header .small-cta:focus-visible{background:#dfc3f0;border-color:#dfc3f0;color:#251332;box-shadow:0 6px 22px #b77fd640;transform:translateY(-2px)}
body>header .small-cta:active{transform:translateY(0);box-shadow:none}
/* The permanent readability shadow is independent of the animated light sweep. */
.projects .project:before,.portfolio-grid .project:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 30%,#100b182b 48%,#100b18c4 73%,#100b18f5 100%)}
.projects .project>div,.portfolio-grid .project>div{z-index:3;text-shadow:0 2px 12px #0009}
.case-grid .case>a{position:relative;isolation:isolate}
.case-grid .case>a:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 48%,#100b1833 65%,#100b18d9 100%)}
.case-grid .case-open{z-index:2}
@media(min-width:761px) and (max-width:1100px){body>header{gap:16px;padding-inline:3%}body>header nav{gap:16px;font-size:12px}body>header .brand img{width:155px}body>header .small-cta{padding:10px 13px}}
@media(prefers-reduced-motion:reduce){body>header .small-cta{transition:none}body>header .small-cta:hover,body>header .small-cta:focus-visible{transform:none}}
/* Terra's artwork has wider internal margins; match its visual weight to the ribbon. */
.logos img[src$="/terra.png"],.ribbon-track img[src$="/terra.png"]{transform:scale(1.65);transform-origin:center}
.projects .project:has(img[src*="-16x9"]){aspect-ratio:16/9}
.case:has(img[src*="-16x9"])>a{aspect-ratio:16/9}
/* Lighter lower shadow retains contrast without dimming the full render. */
.projects .project:before,.portfolio-grid .project:before{background:linear-gradient(180deg,transparent 42%,#100b1814 58%,#100b1873 82%,#100b18ad 100%)}
.logos img,.ribbon-track img{width:150px!important;height:68px!important;max-width:150px;object-fit:contain;flex:0 0 150px;align-self:center}
.logos img.titanes-logo,.ribbon-track img.titanes-logo{filter:brightness(0);transform:scale(1.14)}
.logos img.rocambola-logo,.ribbon-track img.rocambola-logo{filter:invert(1) grayscale(1);mix-blend-mode:multiply;transform:scale(1.15)}
.dashboard-controls [data-dash]{white-space:normal}
@media(max-width:760px){.logos img,.ribbon-track img{width:125px!important;height:60px!important;flex-basis:125px;max-width:125px}}
.logos img.rocambola-logo,.ribbon-track img.rocambola-logo{filter:none;mix-blend-mode:normal}
.supplied-vr .portal-destination>p:not(.eyebrow){display:block;font-size:14px;line-height:1.6;max-width:340px}

/* Match upcoming project covers to the supplied landscape photographs. */
.case-grid .case>.teaser-visual{aspect-ratio:16/9}