/* O3 identity: supplied artwork and guide palette. Previous V1 typography restored by explicit user direction. */
:root{--o3-electric:#38e1f3;--o3-violet:#8c15e9;--o3-blue:#2e73ea;--o3-nebula:linear-gradient(120deg,#38e1f3,#8c15e9 55%,#2e73ea);--color-red:#8c15e9;--o3-focus:#38e1f3}
::selection{background:#8c15e9;color:#fff}
/* Logo artwork replaces the old CSS circle, without editing the originals. */
.o3-brandmark{width:auto!important;height:auto!important;font-size:inherit!important;line-height:inherit!important;vertical-align:baseline!important;-webkit-text-fill-color:currentColor!important;font-family:inherit!important;letter-spacing:inherit!important;display:inline!important}
.o3-brandmark::before,.o3-brandmark::after,.o3-brandzero::before{content:none!important}
.o3-brandmark-split>.o3-brandzero,.o3-brandmark-split>.o3-brandthree{position:static!important;font:inherit!important;width:auto!important;height:auto!important;-webkit-text-fill-color:currentColor!important}
nav .o3-home-mark{display:block!important;width:116px!important;height:116px!important;min-width:116px!important;margin:-28px 0 -28px -24px;line-height:0}
nav .o3-home-mark>*:not(.o3-original-logo){display:none!important}
.o3-original-logo{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:none!important;background:none!important}
nav{mix-blend-mode:normal!important;background:linear-gradient(#000e,#000b 75%,transparent)!important;transition:background .2s}
nav.o3-on-light{background:linear-gradient(#f8f7f6f5,#f8f7f6db 75%,transparent)!important}
nav.o3-on-light .o3-original-logo{filter:brightness(0)!important}
nav.o3-on-light button[aria-label="Toggle Sound"]{color:#171717!important}
nav.o3-on-light button[aria-label="Toggle Menu"]{background:#171717!important;color:#fff!important}
.o3-header-light>div button[aria-label="Toggle Menu"]{color:#171717}
nav button[aria-label="Toggle Menu"]{min-width:104px!important;gap:12px!important}
nav button[aria-label="Toggle Menu"]>span{width:auto!important;min-width:38px}
nav button[aria-label="Toggle Menu"]>div{width:18px!important;height:13px!important}
.o3-enter-disc{background:var(--o3-nebula)!important}
.o3-statement-mark{color:#8c15e9!important}.o3-statement-mark path{fill:#8c15e9!important}
.v2-gallery-launch{background:#8c15e9;color:#fff}.v2-eyebrow{color:#38e1f3}
.v2-section :focus-visible,nav :focus-visible,#v2-gallery :focus-visible,.v2-particle-hero :focus-visible{outline-color:#38e1f3!important}
/* User-requested removals: hero controls, video overlay controls/title, horizontal carousel and white service seam. */
.v2-hero-links,.v2-hero-motion,.v2-media-controls,#showcase h1{display:none!important}
#showcase header{height:100svh!important;min-height:500px}
#showcase header>div:first-child,#showcase header>div:nth-child(3){display:none!important}
#showcase header>div:nth-child(2){height:100svh!important;min-height:500px;padding:0!important}
#showcase header>div:nth-child(2)>div:nth-child(2){display:none!important}
#services>section>div:first-child:has(svg[viewBox="0 0 1920 69"]){display:none!important}
#work,#services{background:#171717}
/* Full line boxes keep the source word/character reveals intact. */
.word-outer,.char-outer,.line-outer{overflow:clip!important;overflow-clip-margin:.18em!important}
#intro{background:#f8f7f6;color:#171717}
#intro>div{padding-top:clamp(50px,6vw,100px)!important;padding-bottom:clamp(50px,6vw,100px)!important}
#intro p{line-height:1.08!important}
#intro p:first-child{margin-bottom:.35em}
#intro p:last-child{width:42vw!important;margin-left:9vw!important}
#intro [data-appear-arrow]{overflow:visible!important}
.v2-approach section>div:first-child{padding-bottom:90px!important}
.v2-approach .o3-concept-title{overflow:visible!important}
.v2-approach .o3-concept-title h2{font-size:14vw!important;line-height:1.12!important;white-space:nowrap!important}
.v2-approach .o3-concept-title+div{inset:auto 0 0!important;height:80px!important}
.v2-contact h2{font-size:clamp(40px,4.6vw,80px)!important;line-height:1.08!important;overflow-wrap:normal!important}
.v2-contact h3{font-size:clamp(28px,3vw,48px)!important;line-height:1.12!important}
#contact form button{opacity:1!important}#contact form button:not([aria-pressed="true"]){color:#505050!important}
.v2-services .overflow-hidden:has(>.line-inner){overflow:clip!important;overflow-clip-margin:.2em}
.v2-services .line-inner{line-height:1.12!important}
/* Retain the original footer grid, image interaction and reveal wrappers. */
#footer{background:#f8f7f6;color:#171717}
#footer footer{padding-top:40px!important}
#footer footer>div:first-child,#footer footer>hr:first-of-type{display:none!important}
#footer .o3-footer-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,.65fr)!important;gap:24px 8vw!important;margin-top:0!important;align-items:center}
#footer .o3-footer-brand{grid-row:1 / 3!important;align-self:center;display:flex;justify-content:flex-start;align-items:center}
#footer h2{display:none!important}
.o3-footer-logo{width:clamp(260px,31vw,440px)!important;height:auto!important;display:block;margin:0!important;filter:brightness(0)!important;object-fit:contain}
#footer a[aria-label="Explore our work"]{width:100%!important;height:14vw!important;max-height:220px;min-height:140px;overflow:hidden;isolation:isolate;grid-column:2;grid-row:1}
#footer .o3-footer-main>div:last-child{margin-top:0!important}
#footer [aria-label="Get in touch"],#footer .o3-footer-main .flex:has(>a[hidden]){display:none!important}
#footer footer>div:last-child{margin-top:28px;padding-top:20px!important;padding-bottom:24px!important;border-top:1px solid #17171722}
#footer footer>div:last-child>div,#footer footer>div:last-child>p:has(a[hidden]){display:none!important}
#footer footer>hr:last-of-type{display:none!important}
#footer .font-secondary a{min-height:30px;display:inline-flex;align-items:center;font-size:14px!important}
@media(max-width:768px){
nav .o3-home-mark{width:100px!important;height:100px!important;min-width:100px!important;margin:-22px 0 -22px -22px}
#intro p{width:78vw!important;font-size:9vw!important;margin-left:0!important;line-height:1.12!important}
#intro p:last-child{width:80vw!important;margin-left:0!important;margin-top:25px!important}
.v2-hero-copy{bottom:100px}.v2-hero-copy h1{font-size:16vw;line-height:1.08;letter-spacing:-.035em}
.v2-approach .o3-concept-title h2{font-size:14vw!important}
.v2-approach section>div:first-child{padding-bottom:70px!important}.v2-approach .o3-concept-title+div{height:60px!important}
.v2-contact h2{font-size:12vw!important}.v2-contact h3{font-size:8vw!important}
#footer .o3-footer-main{grid-template-columns:1fr 1fr!important;gap:28px 20px!important;align-items:start}
#footer .o3-footer-brand{grid-row:1!important;grid-column:1!important}
.o3-footer-logo{width:100%!important;min-width:0!important}
#footer a[aria-label="Explore our work"]{height:36vw!important;min-height:0!important;align-self:center}
#footer .o3-footer-main>div:last-child{grid-column:1 / -1!important;grid-row:2!important}
#footer footer{padding-top:20px!important}
#footer .font-secondary a{min-height:40px}
}
@media(min-width:768px) and (max-width:1024px){#footer .o3-footer-main{grid-template-columns:1fr 1fr!important}.v2-contact h2{font-size:64px!important}.v2-contact h3{font-size:44px!important}}

.v2-hero-copy h1{font-weight:400;letter-spacing:-.015em;line-height:1.08}

@media(min-width:1025px){.v2-contact h2{font-size:4.3vw!important}}

/* Latest user instruction: transparent header, no gradient overlay. */
nav,nav.o3-on-light{background:none!important}

#contact form button[type='submit']{color:#fff!important;background:#8c15e9!important}

.v2-eyebrow,.v2-hero-caption,.v2-gallery-launch,.v2-dialog-head button,.v2-dialog-foot button,.v2-dialog-foot span{font-family:var(--font-work-sans),sans-serif!important}

button[aria-label='Toggle Sound']{display:none!important}
/* Bounded service columns: long supplied labels must wrap inside the viewport. */
#services .bg-linear-to-t{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-content:end!important;align-items:end!important;gap:24px 4vw!important;padding:clamp(24px,3vw,60px)!important}
#services .bg-linear-to-t>div:first-child{min-width:0;width:100%!important}
#services .bg-linear-to-t .uppercase{width:auto!important;min-width:0;flex:1;font-size:clamp(24px,2.4vw,46px)!important}
#services .bg-linear-to-t>p{width:auto!important;min-width:0;margin:0!important;font-size:clamp(15px,1.1vw,19px)!important;line-height:1.45!important}
#services .bg-linear-to-t>div:last-child{grid-column:1/-1;align-items:flex-start!important;justify-self:start;max-width:100%;min-width:0}
#services .bg-linear-to-t>div:last-child>div{max-width:100%!important;justify-content:flex-start!important;gap:8px!important}
#services .tag-item{white-space:normal;max-width:100%;font-size:clamp(12px,1vw,17px)!important;line-height:1.3;padding:8px 12px!important}
#services .what-included-header{font-size:11px!important;line-height:1.4}
@media(max-width:1024px){#services .bg-linear-to-t{grid-template-columns:minmax(0,1fr);gap:18px!important}#services .bg-linear-to-t .uppercase{max-width:none!important;font-size:clamp(24px,4vw,36px)!important}#services .bg-linear-to-t>p{font-size:15px!important}#services .main-num{font-size:clamp(64px,12vw,110px)!important}}
.v2-hero-copy{max-width:88%;inset-inline-start:5vw;transform:none!important}.v2-hero-copy h1{max-width:100%}
/* Keep the arrow inside the statement: Building Connections / → that Matter. */
#intro>div>div>div{width:100%}
#intro p:first-child{width:auto!important;margin:0 0 .55em!important;text-align:left}
#intro p:last-child{display:grid;grid-template-columns:max-content max-content max-content;justify-content:end;column-gap:.18em;row-gap:.08em;width:100%!important;margin:0!important;text-align:left}
#intro p:last-child>span,#intro p:last-child>span:nth-child(2)>span{display:contents!important}
#intro p:last-child .word-outer[aria-label='Building']{grid-column:1;grid-row:1}
#intro p:last-child .word-outer[aria-label='Connections']{grid-column:2/4;grid-row:1}
#intro p:last-child [data-appear-arrow]{grid-column:1;grid-row:2;justify-self:end;align-self:center;margin-right:.12em;width:1em!important}
#intro p:last-child .word-outer[aria-label='that']{grid-column:2;grid-row:2}
#intro p:last-child .word-outer[aria-label='Matter.']{grid-column:3;grid-row:2}
@media(max-width:767px){#intro p{font-size:8.2vw!important}#intro p:last-child{margin-top:25px!important;column-gap:.14em}}
#intro [data-appear-arrow],#intro [data-appear-arrow] *{font-family:Arial,sans-serif!important;font-weight:400}
/* Mobile audit: centered introduction, comfortable touch targets, solid approach outlines. */
#approach [style*="stroke-dasharray"]{background-image:none!important;border:1px solid #17171770}
@media(max-width:767px){
 #intro>div{padding:56px 24px!important}
 #intro p:first-child{text-align:center!important;margin-inline:0!important;width:100%!important}
 #intro p:last-child{justify-content:center!important;margin-left:0!important;text-align:center!important;font-size:clamp(25px,7.7vw,54px)!important}
 #intro p:first-child{font-size:clamp(26px,8vw,56px)!important}
 .v2-hero-copy{left:24px!important;right:24px!important;inset-inline-start:24px!important;max-width:none!important;width:auto!important;text-align:center}
 .v2-hero-copy h1{font-size:clamp(42px,13vw,96px)!important;line-height:1.12!important}
 .v2-eyebrow{font-size:11px!important;letter-spacing:.09em}
 .v2-hero-caption{left:24px;right:24px!important;text-align:center;font-size:11px!important}
 #studio a,#v2-gallery button{min-height:44px!important;min-width:44px}
 #services .bg-linear-to-t{padding:24px 20px max(28px,env(safe-area-inset-bottom))!important;gap:14px!important}
 #services .tag-item{font-size:12px!important}
 #v2-gallery{max-width:calc(100vw - 24px);width:calc(100vw - 24px)}
 .v2-dialog-head{gap:12px}.v2-dialog-head h2{font-size:24px;line-height:1.15;overflow-wrap:anywhere}
 .v2-dialog-foot{gap:8px;flex-wrap:wrap}
 #contact .cobalt-brand{justify-content:center}.cobalt-brand a{margin-inline:auto}
}
@media(max-width:767px){.v2-hero-caption{width:calc(100% - 48px)!important;max-width:none!important}}
/* Center the actual mobile text groups, not only their outer containers. */
@media(max-width:767px){
 .v2-hero-copy{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
 #intro p:last-child{display:flex!important;flex-wrap:wrap;justify-content:center!important;align-items:center;gap:.12em .18em!important}
 #intro p:last-child::before{content:"";order:2;flex-basis:100%;height:0}
 #intro p:last-child .word-outer{order:3}
 #intro p:last-child .word-outer[aria-label='Building'],#intro p:last-child .word-outer[aria-label='Connections']{order:1}
 #intro p:last-child [data-appear-arrow]{order:3;margin:0!important;align-self:center}
}
.o3-mobile-orb{display:none}
@media(max-width:767px){
 div:has(>.svg-wrapper){height:100dvh!important;bottom:auto!important}
 .svg-wrapper{display:none!important}
 .o3-mobile-orb{display:block;position:absolute;left:50%;top:50%;width:min(94vw,480px);height:min(94vw,480px);transform:translate(-50%,-50%);pointer-events:none}
 .svg-wrapper+div{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;translate:none!important}
}

@media(max-width:767px){
 .o3-mobile-menu .menu-link-item{font-family:var(--font-koulen),sans-serif!important;font-size:32px!important;line-height:1.2;letter-spacing:0;min-height:44px;padding:6px 0!important;border-radius:0;background:none!important;color:#fff}
 .o3-mobile-menu .menu-link-item.text-red{color:#b460ff!important}
 .o3-mobile-menu .relative.w-full>span.absolute,.o3-mobile-menu>button>svg{display:none!important}
 .o3-mobile-menu a[href="#contact"] button{font-family:var(--font-koulen),sans-serif!important;font-size:22px!important;letter-spacing:.02em;min-height:48px}
 .o3-mobile-menu>button{min-width:44px;min-height:44px}
}