/* Reference-informed motion, composed with SBC's own content and assets. */
@font-face{font-family:Questrial;src:url('./assets/fonts/questrial.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--ease-out:cubic-bezier(.165,.84,.44,1);--ease-menu:cubic-bezier(.19,1,.22,1);--header-height:96px}
body{font-family:Questrial,Arial,sans-serif}
button{font-family:inherit}
.site-header{position:fixed;inset:0 0 auto;height:var(--header-height);border:0;background:transparent;transition:background .45s,transform .55s var(--ease-out),box-shadow .45s;z-index:60}
body{padding-top:var(--header-height)}
body:has(.hero){padding-top:0}
.site-header.is-scrolled{background:#ffffffed;box-shadow:0 1px 0 #d6e2ec80;backdrop-filter:blur(16px)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header:focus-within,.menu-open .site-header{transform:none}
.desktop-nav>:is(a,.business-menu-toggle):not(.nav-contact){position:relative;overflow:hidden}
.desktop-nav>:is(a,.business-menu-toggle):not(.nav-contact):after{content:'';position:absolute;bottom:8px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.desktop-nav>:is(a,.business-menu-toggle):hover:after,.desktop-nav>:is(a,.business-menu-toggle):focus-visible:after{transform:scaleX(1);transform-origin:left}
.nav-contact{background:var(--brand);color:white;border:0;border-radius:4px;padding:14px 20px!important}
.menu-toggle{position:relative;background:none;border-radius:0;width:44px;height:44px;flex:none;gap:0}
.menu-toggle span{position:absolute;width:26px;left:9px;top:22px;transition:transform 1s var(--ease-menu);transform-origin:center}
.menu-toggle span:first-child{transform:translateY(-6px)}
.menu-toggle span:last-child{transform:translateY(6px)}
.menu-toggle span:nth-child(2){transition:transform .65s var(--ease-menu);transform-origin:left}
.menu-toggle[aria-expanded=true] span:first-child{transform:rotate(-40deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:rotate(40deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){transform:scaleX(0);transform-origin:right}
.menu-open{overflow:hidden}
.menu-open .logo img{filter:brightness(0) invert(1)}
.menu-open .site-header{background:var(--brand);color:white}
.menu-open .menu-toggle{color:white}
.menu-open .desktop-nav>:is(a,.business-menu-toggle){visibility:hidden}
.navigation{position:fixed;top:var(--header-height);bottom:0;overflow:auto;background:var(--brand);color:#fff;border:0;box-shadow:none;padding:clamp(50px,8vh,100px) var(--gutter) 80px;clip-path:inset(0 0 100%);transition:clip-path .75s var(--ease-menu);visibility:hidden;pointer-events:none;overscroll-behavior:contain}
.navigation.is-open{clip-path:inset(0);visibility:visible;pointer-events:auto}
.navigation.is-closing{clip-path:inset(0 0 100%);visibility:visible}
.navigation-inner{grid-template-columns:.7fr 2fr;gap:10%}
.navigation-label{font-size:20px;line-height:1.8;max-width:150px}
.business-nav{gap:0 70px}
.business-nav a{font-size:clamp(22px,2.4vw,35px);line-height:1.2;padding:24px 0;border-color:#ffffff40;opacity:0;transform:translateY(-12px);transition:opacity .6s,transform .6s var(--ease-out),color .3s}
.business-nav a:after{content:'↗';font-size:20px;padding-left:16px}
.navigation.is-open .business-nav a{opacity:1;transform:none;transition-delay:calc(.18s + var(--nav-index,0)*.04s)}
.business-nav a:hover{color:#a9d9fb}
.navigation-extra{margin-top:50px;font-size:18px;gap:35px;opacity:0;transition:opacity .6s .35s}
.navigation.is-open .navigation-extra{opacity:1}
.hero{min-height:850px;height:100svh;padding-block:160px 50px;background:linear-gradient(180deg,#e8f1f7,#fbfdff);overflow:hidden}
.hero>.wrap{position:relative;height:100%;z-index:2;pointer-events:none}
.hero a,.hero button{pointer-events:auto}
.hero h1{font-size:clamp(58px,6.2vw,100px);line-height:1.06;max-width:1050px;letter-spacing:-.045em;margin-bottom:0}
.hero .eyebrow{margin-bottom:26px}
.hero-ring{position:absolute;inset:80px 0 0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease-out);z-index:0}
.hero-ring canvas{width:100%;height:100%;display:block}
.ring-ready .hero-ring{opacity:1}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f0f6fba8,transparent 54%);z-index:1;pointer-events:none}
.hero .hero-visual{top:100px;right:-8%;width:67%;height:520px;z-index:-1;transition:opacity .8s;background:none}
.ring-ready .hero-visual picture,.ring-ready .hero-visual:after{opacity:0}
.ring-ready .hero-visual{overflow:visible;pointer-events:none}
.hero .hero-visual figcaption{position:fixed;display:none}
.hero-foot{position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);margin:0!important;gap:24px;flex-wrap:wrap;font-size:12px;pointer-events:auto}
.hero-foot:before{content:'Conceptual illustrations';position:absolute;right:0;bottom:46px;font-size:11px;color:var(--muted)}
.hero-buttons{margin-top:36px;gap:30px}
.hero .text-link{background:#f5f9fcd9}
.motion-toggle{border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;font-size:12px;letter-spacing:.03em;padding:6px 0;cursor:pointer;flex-shrink:0}
.motion-toggle[hidden]{display:none}
.motion-toggle:before{content:'Ⅱ';margin-right:8px}
.motion-toggle[aria-pressed=true]:before{content:'▷'}
.button,.text-link,.nav-contact{transition:color .4s,background .4s,border-color .4s;transform:none!important}
.button{border-radius:4px;font-size:16px;padding:18px 22px}
.button:not(.primary){border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);padding:12px 0;min-width:205px}
.button:not(.primary):hover{background:transparent;color:var(--brand)}
.arrow-slide{position:relative;display:inline-block!important;flex:none;width:36px;height:24px;overflow:hidden;border-radius:100px;background:var(--ink);color:#fff;font-size:18px;line-height:24px;text-align:center}
.arrow-slide:before,.arrow-slide:after{content:attr(data-arrow);position:absolute;inset:0;transition:transform .4s cubic-bezier(.215,.61,.355,1)}
.arrow-slide:after{transform:translateX(-105%)}
:is(a,button):hover .arrow-slide:before,:is(a,button):focus-visible .arrow-slide:before{transform:translateX(105%)}
:is(a,button):hover .arrow-slide:after,:is(a,button):focus-visible .arrow-slide:after{transform:translateX(0)}
:is(a,button):hover .arrow-slide{background:var(--blue)}
.primary .arrow-slide{background:#ffffff24;color:white}
.motion-enabled .hero .eyebrow,.motion-enabled .hero h1>span,.motion-enabled .hero-buttons{animation:hero-enter 1.2s var(--ease-out) both}
.motion-enabled .hero h1>span:nth-child(1){animation-delay:.08s}
.motion-enabled .hero h1>span:nth-child(2){animation-delay:.16s}
.motion-enabled .hero h1>span:nth-child(3){animation-delay:.24s}
.motion-enabled .hero-buttons{animation-delay:.32s}
@keyframes hero-enter{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
[data-reveal]{opacity:1;transform:none}
.motion-enabled [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out);transition-delay:var(--reveal-delay,0s)}
.motion-enabled [data-reveal].is-visible,.motion-enabled [data-reveal]:focus-within{opacity:1;transform:none}
.focus{background:white}
.focus-visual picture{border-radius:0;overflow:hidden}
.focus-visual img{transform:scale(var(--focus-scale,1));transition:transform .15s linear;will-change:transform}
.focus h2{letter-spacing:-.04em}
.business-section{position:relative;background:#edf4fa;padding-block:100px;overflow:clip;isolation:isolate}
.business-stage{display:none}
.business-heading{text-align:center;margin-bottom:70px}
.business-heading .eyebrow{justify-content:center}
.business-heading h2{font-size:clamp(46px,6.2vw,90px);letter-spacing:-.04em;margin-bottom:24px}
.business-list{display:grid;grid-template-columns:1fr 1fr;gap:40px;border:0}
.business-row{display:block;padding:0;border:0;min-width:0}
.business-card-inner{background:#fffffff0;border-radius:8px;backdrop-filter:blur(10px);padding:75px 30px;display:flex;flex-direction:column;align-items:center;gap:30px;box-shadow:0 1px 0 #ffffff70;transition:background .5s,box-shadow .5s}
.business-card-inner:hover{background:#fff;box-shadow:0 20px 80px #062a5212}
.business-row .number{align-self:auto;padding:0;font-size:14px;color:var(--muted)}
.business-row h3{font-size:36px;line-height:1.15;text-align:center;margin:0;letter-spacing:-.025em}
.business-row .business-meta{font-size:11px;margin:0;line-height:1.5;text-align:center}
.business-row .site-image{width:100%;max-width:245px;border-radius:0;margin:0;overflow:hidden}
.business-row .site-image img{width:100%;height:174px;object-fit:cover;transition:transform .85s var(--ease-out)}
.business-row:hover img{transform:scale(1.065)}
.business-row .button{width:245px;max-width:100%;margin:0}
.business-row .text-link{font-size:14px;gap:20px}
.motion-enabled .business-section{padding-top:80px;padding-bottom:0}
.motion-enabled .business-stage{position:sticky;top:0;display:block;height:100svh;overflow:hidden;z-index:0}
.motion-enabled .business-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--business-width,25vw);height:var(--business-height,25vw);overflow:hidden;will-change:width,height;background:var(--brand)}
.business-background{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s linear;pointer-events:none}
.business-background.is-active{opacity:1}
.business-background picture,.business-background img{width:100%;height:100%;object-fit:cover}
.business-background img{transform:scale(var(--business-zoom,1));will-change:transform}
.business-shade{position:absolute;inset:0;background:#052654;opacity:var(--business-shade,0);pointer-events:none}
.business-stage-caption{position:absolute;bottom:24px;right:var(--gutter);color:white;font-size:11px;opacity:var(--business-title-opacity,0)}
.motion-enabled .business-heading{position:sticky;top:50svh;margin-top:-50svh;margin-bottom:0;height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;color:white;pointer-events:none;opacity:var(--business-title-opacity,0)}
.motion-enabled .business-heading h2{font-size:clamp(48px,5.5vw,80px);max-width:570px;line-height:1.05;text-shadow:0 2px 25px #123b6b30}
.motion-enabled .business-heading .eyebrow,.motion-enabled .business-heading .section-number{color:white}
.motion-enabled .business-heading .eyebrow{font-size:12px}
.motion-enabled .business-content{position:relative;z-index:2;padding-top:250svh;padding-bottom:160px}
.motion-enabled .business-list{display:flex;flex-direction:column;gap:0;max-width:1280px;margin:auto}
.motion-enabled .business-row{width:384px;max-width:40%;margin-bottom:80px;position:relative}
.motion-enabled .business-row:nth-child(odd){margin-left:auto}
.motion-enabled .business-row:nth-child(even){margin-right:auto}
.motion-enabled .business-row:last-child{margin-bottom:0}
.about{background:#edf4fa}
.about-title .site-image{overflow:hidden;border-radius:0}
.about-title img{border-radius:0;transform:scale(var(--about-scale,1));will-change:transform}
.contact{padding-top:100px;overflow:hidden}
.contact-marquee{width:100%;overflow:visible;margin-bottom:72px}
.contact-marquee-track{display:flex;gap:80px;width:max-content;align-items:center}
.contact-marquee h2,.contact-marquee-track>span{font-size:clamp(80px,12vw,180px);font-weight:400;letter-spacing:-.05em;line-height:1.1;white-space:nowrap;margin:0;flex:none}
.contact-marquee-track>span{display:none}
.motion-enabled .contact-marquee-track>span{display:block}
.motion-enabled .contact-marquee-track{animation:contact-drift 28s linear infinite}
@keyframes contact-drift{to{transform:translateX(calc(-25% - 20px))}}
.motion-enabled .site-footer{animation:hero-enter .8s var(--ease-out)}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-paused [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
@media(max-width:1100px){.hero h1{font-size:7.4vw}.motion-enabled .business-row{max-width:43%}.business-card-inner{padding:60px 24px}.business-row h3{font-size:32px}.business-nav{gap:0 35px}}
@media(max-width:760px){
 :root{--header-height:86px}
 .site-header{padding-inline:24px}
 .logo{width:182px}
 .hero{padding-top:140px;padding-bottom:36px;height:960px;min-height:100svh;max-height:none}
 .hero>.wrap{height:100%}
 .hero h1{font-size:clamp(40px,11.8vw,72px);line-height:1.08;max-width:600px}
 .hero h1>span{display:inline}
 .hero-ring{inset:330px 0 120px}
 .hero:after{background:linear-gradient(#eef5fa00 30%,#eef5fa00)}
 .hero .hero-visual{position:absolute;top:270px;right:calc(-1 * var(--gutter));width:calc(100% + var(--gutter));height:310px;margin:0}
 .hero-buttons{position:absolute;left:var(--gutter);right:var(--gutter);bottom:92px;margin:0;gap:10px}
 .hero .button{font-size:14px;padding:18px 20px}
 .hero-foot{bottom:0;font-size:10px;gap:18px}
 .hero-foot>span{display:none}
 .hero-foot:before{bottom:47px;left:0;right:auto}
 .motion-toggle{font-size:11px}
 .navigation{padding-top:35px}
 .navigation-inner{display:block}
 .navigation-label{display:none}
 .business-nav{display:block}
 .business-nav a{font-size:24px;padding:19px 0}
 .navigation-extra{margin-top:32px;font-size:16px;gap:25px}
 .detail-hero h1{font-size:clamp(40px,11vw,52px);overflow-wrap:normal}
 .focus-visual picture{border-radius:0}
 .focus h2{font-size:clamp(38px,10.6vw,60px)}
 .business-section{padding-block:80px}
 .business-list{grid-template-columns:1fr;gap:32px}
 .business-heading h2{font-size:48px}
 .business-card-inner{padding:60px 28px;gap:26px}
 .business-row h3{font-size:34px}
 .business-row .site-image img{height:180px}
 .motion-enabled .business-window{width:var(--business-width,50vw);height:var(--business-height,50vw)}
 .motion-enabled .business-content{padding-top:190svh;padding-bottom:100px}
 .motion-enabled .business-row{width:384px;max-width:100%;margin-inline:auto!important;margin-bottom:70px}
 .motion-enabled .business-heading h2{font-size:48px;max-width:90%;margin-bottom:15px}
 .motion-enabled .business-heading .eyebrow{margin-bottom:14px}
 .business-stage-caption{bottom:18px;font-size:10px}
 .contact{padding-top:80px}
 .contact-marquee{margin-bottom:50px}
 .contact-marquee-track{gap:40px}
 .contact-marquee h2,.contact-marquee-track>span{font-size:86px}
 .motion-enabled .contact-marquee-track{animation-duration:20s}
 @keyframes contact-drift{to{transform:translateX(calc(-25% - 10px))}}
 .footer-bottom{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-ring{display:none}
 .hero .hero-visual picture{opacity:1!important}
 .contact-marquee-track{transform:none!important}
 .contact-marquee-track>span{display:none!important}
 [data-reveal]{opacity:1!important;transform:none!important}
 .hero .hero-visual{opacity:1!important}
}

.business-menu-toggle{border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding-inline:0}