/* Living Signal: a real-time sculpture, within OXO's existing visual system. */
#journey{position:relative;height:520svh;min-height:2600px;--progress:0;--night:0;--pointer-x:50%;--pointer-y:50%;margin:0;padding:0;background:#edf3f8}
#journey .signal-stage{position:sticky;top:0;height:100svh;min-height:680px;width:100%;overflow:hidden;isolation:isolate;background:#edf3f8;color:#203346}
.signal-atmosphere,.signal-vignette,.signal-wordmark,#signal-canvas,.signal-fallback{position:absolute;pointer-events:none}
.signal-atmosphere{inset:0;background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#fff 0%,#f8fbfd 23%,#e5eff6 70%,#cfdfeb 100%)}
.signal-atmosphere::after{content:"";position:absolute;inset:0;opacity:var(--night);background:radial-gradient(ellipse at 52% 45%,#f4f9ff 0%,#ddeefc 38%,#c5def3 100%)}
#signal-canvas{inset:0;width:100%;height:100%;display:block;z-index:2;opacity:0;transition:opacity 1.1s ease}
.signal-stage[data-state="ready"] #signal-canvas{opacity:1}
.signal-wordmark{left:42%;top:47%;font-size:clamp(220px,32vw,580px);font-weight:500;line-height:.75;letter-spacing:-.08em;transform:translate(-10%,-50%);color:transparent;-webkit-text-stroke:1px #7b9ebc20;opacity:calc(.5 - var(--night)*.5);z-index:1;user-select:none}
.signal-vignette{inset:0;z-index:3;background:radial-gradient(ellipse at 57% 44%,transparent 47%,#4d749207 100%);box-shadow:inset 0 -70px 70px -60px #d7e5ed40}
.signal-story{position:absolute;z-index:4;left:6%;top:48%;transform:translate3d(0,-50%,0);width:45%;max-width:740px;opacity:0;visibility:hidden;will-change:opacity,transform;pointer-events:none}
.signal-story a{pointer-events:auto}
.signal-intro{opacity:1;visibility:visible;max-width:600px}
.signal-eyebrow{display:block;font-size:10px;font-weight:550;line-height:1.5;letter-spacing:.17em;margin:0 0 28px;color:inherit}
#journey .signal-story h1,#journey .signal-story h2{font-family:inherit;font-weight:550;letter-spacing:-.062em;line-height:1.02;font-size:clamp(52px,6.35vw,102px);margin:0;color:inherit;text-wrap:balance}
#journey .signal-story h1 span,#journey .signal-story h2 span{color:#0875c9}
.signal-story p{max-width:400px;font-size:15px;line-height:1.9;color:#536779;margin:28px 0 28px}
.signal-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.signal-actions .button,.signal-finale .button{display:inline-flex;gap:26px;align-items:center;font-size:13px;padding:17px 21px;border-radius:17px;text-decoration:none}
.signal-actions .button>span,.signal-finale .button>span{font-size:22px;font-weight:400;line-height:.7}
.signal-work-link{display:inline-flex;gap:18px;align-items:center;font-size:13px;color:#254761;text-decoration:none;padding:16px 0}
.signal-perspective{top:auto;bottom:18%;transform:none;width:80%;max-width:none}
#journey .signal-perspective h2{font-size:clamp(66px,8.5vw,145px);line-height:.96;letter-spacing:-.06em}
.signal-perspective h2 span{color:inherit!important}
.signal-beyond{top:auto;bottom:18%;width:90%;max-width:none;text-align:center;color:#243d53;left:5%;transform:none}
#journey .signal-beyond h2{font-size:clamp(70px,8vw,128px);font-weight:500;letter-spacing:-.065em}
.signal-beyond h2 em{font-weight:450;font-style:normal;color:#277daa}
.signal-beyond .signal-eyebrow{margin-bottom:20px;color:#536e85}
.signal-finale{width:54%;max-width:800px}
#journey .signal-finale h2{font-size:clamp(46px,5.8vw,94px)}
.signal-finale .button{margin-top:36px}
.signal-mobile-break{display:none}
.signal-caption{position:absolute;left:6%;bottom:128px;display:flex;align-items:center;gap:9px;z-index:5;font-size:10px;letter-spacing:.025em;color:#6d869b;pointer-events:none;transition:color .3s}
.signal-dot{display:block;width:5px;height:5px;border-radius:50%;background:#2784bb;box-shadow:0 0 0 4px #2283be0c}
.signal-bottom{position:absolute;bottom:37px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;z-index:5;color:#536e85;font-size:10px;letter-spacing:.025em}
.signal-scroll{display:flex;align-items:center;gap:14px;min-height:44px;color:inherit;text-decoration:none}
.signal-scroll>span:last-child{font-size:17px;margin-left:7px}
.signal-scroll-line{display:block;width:1px;height:33px;background:linear-gradient(transparent,#3879a3)}
.signal-chapters{display:flex;align-items:center;gap:15px;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.signal-track{display:block;width:105px;height:1px;background:#648ca82e;overflow:hidden}
.signal-track i{display:block;width:100%;height:100%;background:#3080b6;transform:scaleX(var(--progress));transform-origin:left}
#signal-pause{position:absolute;right:0;bottom:76px;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:12px 0 12px 24px;min-height:44px;min-width:100px;text-align:right}
.signal-chapters{position:absolute;left:50%;transform:translateX(-50%);margin:0}
#signal-pause:focus-visible,.signal-scroll:focus-visible{outline:2px solid #1688d1;outline-offset:5px;border-radius:3px}
.signal-stage[data-dark="true"] .signal-bottom,.signal-stage[data-dark="true"] .signal-caption{color:#c1dcec}
.signal-stage[data-dark="true"] .signal-perspective{color:#e3f1fc}
.signal-fallback{z-index:1;width:min(41vw,600px);aspect-ratio:1;left:56%;top:50%;transform:translate(-10%,-50%) rotate(-24deg);opacity:.65;transition:opacity 1s}
.signal-fallback i{position:absolute;inset:0;border:clamp(12px,2vw,30px) solid #b4d3e7;border-radius:50%;box-shadow:inset 8px 8px 20px #fff,5px 10px 20px #729bb52b;transform:rotateY(50deg) rotateX(22deg)}
.signal-fallback i:nth-child(2){transform:rotateY(70deg) rotateX(-30deg);border-color:#438db8}
.signal-fallback i:nth-child(3){transform:rotateY(-50deg) rotateX(-20deg);border-color:#e2edf4}
.signal-fallback i:nth-child(4){transform:rotateY(20deg) rotateX(65deg);border-color:#528fab}
.signal-fallback i:nth-child(5){transform:rotateY(-30deg) rotateX(-65deg);border-color:#e2edf4}
.signal-fallback i:nth-child(6){inset:13%;transform:rotateY(-40deg) rotateX(40deg);border-color:#7eb3d5}
.signal-stage[data-state="ready"] .signal-fallback{opacity:0}
#journey.signal-static{height:100svh;min-height:680px}
.signal-static .signal-chapters{display:none}
.signal-static #signal-pause{opacity:.6;cursor:default}
@media(min-width:1700px){.signal-story{left:8%}.signal-caption{left:8%}.signal-bottom{left:8%;right:8%}}
@media(max-width:900px) and (min-width:761px){.signal-story{left:5%;width:50%}#journey .signal-story h1{font-size:clamp(48px,6.3vw,65px)}.signal-story p{max-width:310px}.signal-actions{gap:12px}.signal-caption{bottom:108px}}
@media(max-width:760px){
 #journey{height:470svh;min-height:2700px}
 #journey .signal-stage{min-height:740px}
 .signal-story{left:8%;top:137px;width:84%;max-width:none;transform:none}
 .signal-eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:20px}
 #journey .signal-story h1{font-size:clamp(43px,11.6vw,68px);line-height:1.02}
 .signal-story p{font-size:12px;line-height:1.8;margin:20px 0 18px;max-width:350px}
 .signal-actions{gap:19px;flex-wrap:nowrap}
 .signal-actions .button,.signal-finale .button{font-size:11px;padding:14px 15px;gap:17px;border-radius:15px;white-space:nowrap}
 .signal-actions .button>span,.signal-finale .button>span{font-size:19px}
 .signal-work-link{font-size:11px;gap:10px;white-space:nowrap}
 .signal-wordmark{font-size:65vw;left:20%;top:68%;transform:translate(0,-50%)}
 .signal-caption{left:8%;bottom:99px;font-size:9px}
 .signal-caption .signal-dot{width:4px;height:4px}
 .signal-bottom{left:8%;right:8%;bottom:26px;font-size:9px}
 .signal-scroll{gap:10px}.signal-scroll-line{height:24px}.signal-scroll>span:last-child{margin:0}
 .signal-chapters{gap:8px}.signal-track{width:36px}
 #signal-pause{min-width:70px;padding-left:12px;font-size:9px;bottom:58px}
 .signal-perspective{top:auto;bottom:20%;left:8%}
 #journey .signal-perspective h2{font-size:15vw}
 .signal-beyond{top:auto;bottom:24%;left:5%;width:90%}
 #journey .signal-beyond h2{font-size:17.5vw}
 .signal-beyond .signal-eyebrow{font-size:7px;letter-spacing:.1em}
 .signal-finale{top:146px;left:8%;width:90%}
 #journey .signal-finale h2{font-size:11.3vw;line-height:1.04}
 .signal-finale .button{margin-top:24px}
 .signal-mobile-break{display:block}
 .signal-fallback{width:75vw;left:50%;top:66%;transform:translate(-50%,-50%) rotate(-24deg)}
 #journey.signal-static{height:100svh;min-height:740px}
}
@media(prefers-reduced-motion:reduce){#signal-canvas,.signal-fallback{transition:none}#journey{height:100svh;min-height:740px}.signal-chapters{display:none}}

/* These scoped rules intentionally override the site's global heading paint.
   Its embossed first-line treatment would obscure the glass passage copy. */
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-story :is(h1,h2),
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-story :is(h1,h2)::first-line{color:inherit!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important;filter:none!important;line-height:1.02!important;text-transform:none!important;font-weight:550!important;letter-spacing:-.06em!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-story :is(h1,h2)>span,
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-story :is(h1,h2)>span::first-line{color:#0875c9!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important;text-transform:none!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-beyond h2 em{color:#277daa!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important;text-transform:none!important}
.signal-perspective::before,.signal-beyond::before{content:"";position:absolute;inset:-25% -5%;background:radial-gradient(ellipse at 35% 60%,#edf6fc75,transparent 67%);z-index:-1;pointer-events:none;filter:blur(20px)}
.signal-beyond::before{background:radial-gradient(ellipse,#edf6fc9c,transparent 63%)}
html[data-oxo-theme="pearl"] body[data-oxo-visual] #journey .signal-story .button{font-size:13px!important;font-weight:500!important;padding:16px 21px!important;white-space:nowrap!important;gap:23px!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] #journey .signal-story .button>span{font-size:19px!important}
@media(max-width:760px){
 html[data-oxo-theme="pearl"] body[data-oxo-visual] #journey .signal-story .button{font-size:11px!important;padding:14px 15px!important;gap:17px!important;min-height:46px!important;flex:0 0 auto}
 .signal-actions{gap:18px}
 .signal-beyond{bottom:22%}
 #journey .signal-beyond h2{font-size:16vw}
 .signal-caption{font-size:8px;max-width:calc(100% - 155px);line-height:1.5;bottom:101px}
 .signal-chapters{left:67%;margin:0}
 .signal-scroll{font-size:8px;gap:8px}
}

/* Liquid Morph: composition changes direction as the fluid changes shape. */
#journey{height:540svh;min-height:3100px;background:#eaf0f6}
#journey .signal-stage{background:radial-gradient(ellipse at 65% 38%,#fff,#eaf1f7 65%,#dde8f2);min-height:680px}
#signal-canvas{z-index:1;transition:opacity .65s}
#journey .signal-story{z-index:4;top:48%;bottom:auto;transform:translate3d(0,-50%,0)}
#journey .signal-intro{left:6%;width:44%;max-width:650px}
#journey .signal-intro h1{font-size:clamp(38px,5.25vw,90px)}
#journey .signal-perspective{left:55%;width:40%;max-width:640px;top:48%;bottom:auto}
#journey .signal-perspective h2{font-size:clamp(50px,5.6vw,90px)}
#journey .signal-beyond{left:6%;top:50%;width:64%;text-align:left;color:#293f52}
#journey .signal-beyond h2{font-size:clamp(60px,7.1vw,115px);line-height:1.02}
#journey .signal-finale{left:6%;width:56%;max-width:850px}
#journey .signal-finale h2{font-size:clamp(46px,5.7vw,92px)}
.signal-perspective::before,.signal-beyond::before{display:none}
#journey .signal-story p{font-size:15px;max-width:390px;line-height:1.85}
#journey .signal-finale p{margin-bottom:0}
#journey .signal-finale p+.button{margin-top:24px}
#journey .signal-story :is(h1,h2){color:#293f52!important}
#journey .signal-story :is(h1,h2)>span{color:#0875c9!important}
.signal-bottom{z-index:5}
#signal-pause{bottom:75px}
.morph-poster{position:absolute;inset:0;z-index:0;background:url('opening.932e14998612.webp') center/cover no-repeat;opacity:0;pointer-events:none}
.signal-stage[data-state="fallback"] .morph-poster{opacity:1}
#journey.signal-static{height:100svh;min-height:680px}
@media(max-width:760px){
 #journey{height:490svh;min-height:2800px}
 #journey .signal-stage{min-height:760px}
 #journey .signal-story{left:7%;top:135px;width:86%;max-width:none;transform:none}
 #journey .signal-intro{top:135px}
 #journey .signal-intro h1{font-size:clamp(34px,10.5vw,62px)}
 #journey .signal-story p{font-size:12px;line-height:1.8;max-width:350px;margin-top:18px;margin-bottom:18px}
 #journey .signal-perspective{top:145px}
 #journey .signal-perspective h2{font-size:11.5vw}
 #journey .signal-beyond{top:155px;width:86%}
 #journey .signal-beyond h2{font-size:14vw}
 #journey .signal-finale{top:145px;width:89%}
 #journey .signal-finale h2{font-size:10.4vw}
 #journey .signal-finale .button{margin-top:25px}
 #journey.signal-static{min-height:760px}
 .signal-bottom{left:7%;right:7%;bottom:28px}
 .signal-chapters{left:64%}
 #signal-pause{bottom:69px}
 .morph-poster{background-image:url('opening-mobile.f5f02c558487.webp')}
}
@media(prefers-reduced-motion:reduce){#journey{height:100svh;min-height:760px}.signal-stage #signal-canvas{transition:none}}

#journey .signal-stage>#signal-pause{z-index:6;right:6%;bottom:112px;color:#536e85;font:10px Arial,sans-serif;letter-spacing:.025em}
@media(max-width:760px){#journey .signal-stage>#signal-pause{right:7%;top:101px;bottom:auto;min-height:32px;padding:8px 0;font-size:9px}}

/* Atom to Cosmos — OXO's pearl entrance opens into an optical deep field. */
#journey{--finale-hold:clamp(360px,65svh,720px);height:calc(570svh + var(--finale-hold));min-height:calc(3400px + var(--finale-hold))}
#journey .signal-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--night);background:linear-gradient(90deg,rgba(2,5,12,.22),transparent 52%)}
#journey .signal-stage[data-dark="true"] .signal-story{color:#edf3fa}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-stage[data-dark="true"] .signal-story :is(h1,h2){color:#edf3fa!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-stage[data-dark="true"] .signal-story :is(h1,h2)>span{color:#72baf1!important}
#journey .signal-stage[data-dark="true"] .signal-story p{color:#b2bdce!important}
#journey .signal-stage[data-dark="true"] .signal-story .signal-eyebrow{color:#8fa4bb!important}
#journey .signal-stage[data-dark="true"]>#signal-pause,#journey .signal-stage[data-dark="true"] .signal-bottom{color:#96a8bd}
#journey .signal-stage[data-dark="true"] .signal-track{background:#6f91b838}
#journey .signal-stage[data-dark="true"] .signal-track i{background:#8ac7f1}
#cosmic-scale{position:absolute;bottom:126px;left:6%;z-index:5;pointer-events:none;font:9px Arial,sans-serif;letter-spacing:.18em;color:#6b849b;opacity:.75}
#journey .signal-stage[data-dark="true"] #cosmic-scale{color:#8fa5bf}
#journey .signal-beyond{width:58%}
#journey .signal-beyond h2{font-size:clamp(49px,5.6vw,90px)}
#journey .signal-finale h2{font-size:clamp(46px,5.6vw,90px)}
@media(max-width:760px){#journey{height:calc(530svh + var(--finale-hold));min-height:calc(3100px + var(--finale-hold))}#cosmic-scale{left:7%;bottom:96px;font-size:8px}#journey .signal-beyond{width:88%}#journey .signal-beyond h2{font-size:11.7vw}#journey .signal-finale h2{font-size:11.4vw}#journey .signal-stage::after{background:linear-gradient(#02050c28,transparent 55%)}#journey.signal-static{height:100svh;min-height:760px}}
#journey.signal-static{height:100svh;min-height:680px}
@media(prefers-reduced-motion:reduce){#journey{height:100svh;min-height:760px}}


.signal-stage[data-state="loading"] .morph-poster{opacity:1}

/* The matching native-resolution still hands over on the first complete frame. */
#journey #signal-canvas{transition:none!important}
#journey .morph-poster{transition:none;image-rendering:auto}

/* Native-density opening frames: no oversized low-resolution placeholder. */
#journey .morph-poster{background-image:image-set(url('opening.932e14998612.webp') 1x,url('opening@2x.4749d9f9da33.webp') 2x)}
@media(max-width:760px){#journey .morph-poster{background-image:image-set(url('opening-mobile.f5f02c558487.webp') 1x,url('opening-mobile@2x.83a07f4ef78b.webp') 2x)}}


/* All story colours follow the same completed frame as the scene. */
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-stage .signal-story :is(h1,h2){color:var(--story-ink,#293f52)!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-stage .signal-story :is(h1,h2)>span{color:var(--story-accent,#0875c9)!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-stage .signal-story p{color:var(--story-muted,#53687e)!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] main#main #journey .signal-stage .signal-eyebrow{color:var(--story-eyebrow,#425970)!important}

/* The still uses the camera's vertical framing, rather than viewport cover-cropping. */
#journey .morph-poster{background-size:auto calc(100% * var(--opening-compact,1));background-position:center;mask-image:linear-gradient(90deg,transparent var(--opening-inset,0px),#000 calc(var(--opening-inset,0px) + 24px),#000 calc(100% - var(--opening-inset,0px) - 24px),transparent calc(100% - var(--opening-inset,0px)));-webkit-mask-image:linear-gradient(90deg,transparent var(--opening-inset,0px),#000 calc(var(--opening-inset,0px) + 24px),#000 calc(100% - var(--opening-inset,0px) - 24px),transparent calc(100% - var(--opening-inset,0px)))}
/* Only the floating header follows the scene; popup menus retain their light palette. */
html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-oxo-glass][data-cosmos-navigation]{background:linear-gradient(120deg,var(--cosmos-nav-glass-a,#ffffffa6),var(--cosmos-nav-glass-b,#ffffff50) 48%,var(--cosmos-nav-glass-c,#e4edfa57))!important;border-color:var(--cosmos-nav-line,#ffffffe6)!important;box-shadow:0 8px 30px #304c7212,0 1px 2px #253d6510,inset 0 1px 0 var(--cosmos-nav-line,#fff),inset 0 -1px 0 var(--cosmos-nav-line,#ffffff9c)!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] nav>a:not(.nav-contact),html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] .nav-group>summary{color:var(--cosmos-nav-ink,#34475d)!important;transition:background .2s!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] :is(nav>a:not(.nav-contact),.nav-group>summary):is(:hover,:focus-visible),html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] .nav-group[open]>summary{color:var(--cosmos-nav-hover,#225c91)!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] .mobile-menu span{background:var(--cosmos-nav-ink,#34475d)!important}

#journey .signal-stage{background:radial-gradient(ellipse calc(var(--opening-height,100svh) * 1.428571) var(--opening-height,100svh) at 66% 43%,rgb(252 253 255) 0%,rgb(251 253 255) 10%,rgb(249 251 254) 20%,rgb(245 249 252) 30%,rgb(241 246 250) 40%,rgb(237 243 248) 50%,rgb(233 240 246) 60%,rgb(229 237 245) 70%,rgb(227 235 244) 80%,rgb(224 234 243) 90%,rgb(223 233 242) 100%,rgb(222 232 242) 110%,rgb(221 232 241) 120%,rgb(221 231 241) 130%,rgb(221 231 241) 140%,rgb(221 231 241) 150%)}

html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] .mobile-menu{background:var(--cosmos-nav-glass-b,#ffffff50)!important;border-color:var(--cosmos-nav-line,#fff9)!important;box-shadow:inset 0 1px var(--cosmos-nav-line,#fff)!important}
html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation]>.brand img{filter:grayscale(var(--cosmos-nav-night,0)) brightness(calc(1 + var(--cosmos-nav-night,0) * 6))!important}
@media(prefers-reduced-transparency:reduce){html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-oxo-glass][data-cosmos-navigation]{background:var(--cosmos-nav-solid,#f5f8fc)!important}}
@media(forced-colors:active){html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-oxo-glass][data-cosmos-navigation]{background:Canvas!important;border-color:CanvasText!important}html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation] :is(nav>a:not(.nav-contact),.nav-group>summary){color:CanvasText!important}html[data-oxo-theme="pearl"] body[data-oxo-visual] header.header[data-cosmos-navigation]>.brand img{filter:none!important}}