:root{color-scheme: dark; --ink: #131313; --paper: #f2f0e7; --purple: #ad92ff; --ease: cubic-bezier(.22,1,.36,1);}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; scroll-padding-top: 25px;}
body{margin: 0px; background: var(--ink); color: var(--paper); font-family: "DM Sans", sans-serif;}
a{color: inherit; text-decoration: none;}
a:focus-visible, button:focus-visible{outline: rgb(183, 230, 109) solid 2px; outline-offset: 7px;}
button{font: inherit;}
::selection{background: var(--purple); color: var(--ink);}
.header{height: 100px; margin: 0px 3.5vw; border-bottom: 1px solid rgba(255, 255, 255, 0.145); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5;}
.header img{width: 190px; height: auto; display: block;}
.header nav{display: flex; gap: 32px; align-items: center; font-size: 12px;}
.header nav a span{margin-left: 10px;}
.motion{display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.19); border-radius: 30px; padding: 11px 14px; color: var(--paper); background: none; cursor: pointer;}
.motion span{width: 6px; height: 6px; border-radius: 50%; background: rgb(183, 230, 109);}
.motion b{font-size: 9px; letter-spacing: 0.08em; font-weight: 500;}
.motion[aria-pressed="false"] span{background: rgb(119, 119, 119);}
.journey{height: 190svh; position: relative;}
.hero{position: sticky; top: 0px; height: calc(0px + 100svh); max-height: 1100px; min-height: 650px; overflow: hidden; padding: 0px 3.5vw; background: var(--ink);}
.hero-grid{display: grid; grid-template-columns: 47% 53%; height: calc(100% - 90px); align-items: center; max-width: 1800px; margin: auto;}
.copy{position: relative; z-index: 2; padding: 20px 0px 45px; pointer-events: none;}
.copy a{pointer-events: auto;}
.eyebrow{font-size: 10px; letter-spacing: 0.19em; margin: 0px 0px 32px; display: flex; align-items: center; gap: 12px;}
.eyebrow::before{content: ""; width: 22px; height: 1px; background: currentcolor;}
h1{font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: clamp(82px, 8.1vw, 155px); line-height: 0.88; letter-spacing: -0.027em; margin: 0px;}
em{font-family: Georgia, serif; font-weight: 400; letter-spacing: -0.075em;}
h1 em{display: inline-block; font-size: 0.93em; color: var(--purple); line-height: 1.2; margin-left: -0.015em;}
.description{font-size: 14px; line-height: 1.7; color: rgb(164, 164, 159); margin: 28px 0px;}
.discover{display: inline-flex; align-items: center; gap: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.29); padding: 0px 0px 12px; font-size: 10px; letter-spacing: 0.065em;}
.discover span{font-size: 24px; transition: transform 0.3s;}
.discover:hover span{transform: translate(3px, 3px);}
.sculpture{position: relative; width: 112%; height: 100%; margin-left: -6%; min-height: 500px; touch-action: pan-y;}
.sculpture canvas{width: 100%; height: 100%; position: absolute; inset: 0px; display: block; opacity: 0; transition: opacity 0.4s;}
.sculpture.ready canvas{opacity: 1;}
.fallback{position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; object-fit: contain; opacity: 0.92; transition: opacity 0.3s;}
.ready .fallback{opacity: 0;}
.halo{position: absolute; inset: 12% -12%; background: radial-gradient(at 55% 40%, rgba(173, 146, 255, 0.06), transparent 62%); pointer-events: none;}
.orbit-caption{position: absolute; bottom: 50px; left: 27%; right: 23%; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 0.14em; color: rgb(113, 113, 110); pointer-events: none;}
.hero-bottom{display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.137); height: 75px; font-size: 8px; letter-spacing: 0.12em;}
.scroll-note{display: flex; align-items: center; gap: 20px; color: rgb(183, 183, 174);}
.scroll-note span{font-size: 20px; animation: 2s ease-in-out 0s infinite normal none running nudge;}
.color-track{display: flex; gap: 4px;}
.color-track i{height: 5px; width: 26px; background: rgb(255, 113, 61);}
.color-track i:nth-child(2){background: rgb(246, 92, 164);}
.color-track i:nth-child(3){background: rgb(183, 230, 109);}
.color-track i:nth-child(4){background: rgb(173, 146, 255);}
.progress{position: absolute; bottom: 0px; left: 3.5vw; right: 3.5vw; height: 2px; background: linear-gradient(90deg, rgb(255, 113, 61), rgb(246, 92, 164), rgb(183, 230, 109), rgb(173, 146, 255)); transform: scaleX(var(--progress,0)); transform-origin: left center;}
























.still *{animation: auto ease 0s 1 normal none running none !important; scroll-behavior: auto !important;}
.still .journey{height: 100svh;}
.still .hero{position: relative;}

@keyframes nudge { 
  50% { transform: translateY(5px); }
}
@media (min-width: 1600px){.hero-grid{grid-template-columns: 48% 52%;}}
@media (max-width: 900px){.header nav{gap: 20px;}
.hero{min-height: 580px;}
.hero-grid{grid-template-columns: 48% 52%;}
h1{font-size: 10vw;}
.eyebrow{font-size: 8px;}
.description{font-size: 12px;}
.sculpture{width: 125%; margin-left: -12%;}



.orbit-caption{display: none;}}
@media (max-width: 600px){.header{height: 78px; margin: 0px 20px;}
.header img{width: 142px;}
.header nav{gap: 16px;}
.header nav > a:first-child{display: none;}
.contact{font-size: 10px;}
.motion{padding: 9px;}
.motion b{display: none;}
.journey{height: 160svh;}
.hero{height: calc(0px + 100svh); min-height: 690px; padding: 0px 20px;}
.hero-grid{display: flex; flex-direction: column; height: calc(100% - 60px); align-items: stretch;}
.copy{padding: 34px 0px 0px; flex-shrink: 0;}
.eyebrow{margin: 0px 0px 19px; font-size: 8px;}
h1{font-size: clamp(57px, 14.4vw, 82px); line-height: 0.85;}
h1 br:nth-of-type(2){display: none;}
h1 em{font-size: 0.87em; margin-left: 8px;}
.description{display: none;}
.discover{font-size: 8px; padding-bottom: 8px; gap: 20px; margin-top: 17px;}
.discover span{font-size: 19px;}
.sculpture{flex: 1 1 0%; width: 100%; height: auto; min-height: 280px; margin: 0px;}
.hero-bottom{height: 57px; font-size: 7px;}
.hero-bottom > span{max-width: 110px; line-height: 1.6;}
.color-track{display: none;}
.scroll-note{font-size: 7px; gap: 12px;}














}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
.journey{height: 100svh;}
.hero{position: relative;}
.scroll-note span{animation: auto ease 0s 1 normal none running none;}
}
.hero{height: calc(-100px + 100svh); min-height: 540px;}
.still .journey{height: auto;}
@media (max-width: 900px){.hero{min-height: 540px;}}
@media (max-width: 600px){.hero{height: calc(-78px + 100svh); min-height: 620px;}
.sculpture{min-height: 250px;}
.copy{padding-top: 27px;}}
@media (prefers-reduced-motion: reduce){.journey{height: auto;}}
.replay{position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); border: 0px; background: none; color: rgb(147, 147, 142); font: 9px "DM Sans", sans-serif; letter-spacing: 0.04em; padding: 10px; cursor: pointer; white-space: nowrap;}
.replay:hover{color: rgb(242, 240, 231);}
.still .replay{display: none;}
.ready .fallback{transition: none;}
.orbit-caption{bottom: 55px;}
@media (max-width: 600px){.replay{bottom: 4px; font-size: 8px;}}
.sculpture canvas{mask-image: linear-gradient(to right, transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent), linear-gradient(transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent); mask-composite: source-in;}
.journey{height: 150svh;}
.sound-toggle{position: absolute; right: 18px; bottom: 10px; font: 9px "DM Sans", sans-serif; color: rgb(147, 147, 142); border: 0px; background: none; padding: 10px; cursor: pointer;}
.sound-toggle[aria-pressed="true"]{color: rgb(183, 230, 109);}
.still .sound-toggle{display: none;}
.bass-trigger{position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); border: 0px; background: none; color: rgb(187, 191, 177); cursor: pointer; padding: 8px; font: 9px "DM Sans", sans-serif;}
.bass-trigger:hover{color: rgb(183, 230, 109);}
.still .bass-trigger{display: none;}
.sculpture canvas{cursor: default;}
@media (max-width: 600px){.journey{height: 135svh;}
.bass-trigger{left: 4px; bottom: 27px; transform: none; font-size: 8px;}
.sound-toggle{right: 0px; bottom: 26px; font-size: 8px; padding: 8px;}}
@media (prefers-reduced-motion: reduce){.journey{height: auto;}}
@media (min-width: 701px) and (max-height: 750px){h1{font-size: clamp(68px, 7.5vw, 100px);}
.copy{padding: 15px 0px;}
.eyebrow{margin-bottom: 22px;}
.description{margin: 18px 0px;}
.hero{height: calc(-100px + 100svh); min-height: 510px;}
.hero-grid{height: calc(100% - 70px);}
.hero-bottom{height: 65px;}
.sculpture{min-height: 0px;}
.orbit-caption{display: none;}}
.sculpture .fallback{opacity: 0; visibility: hidden; transition: none;}
.sculpture.failed .fallback{opacity: 0.92; visibility: visible;}
.sculpture.failed canvas{opacity: 0;}
.sculpture.ready canvas{cursor: grab; touch-action: pan-y;}
.sculpture.grabbing canvas{cursor: grabbing;}
.still .sculpture canvas{cursor: default;}
.logo-destinations{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; max-width: 370px; margin: 24px 0px 0px;}
.logo-destination{display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.145); padding: 13px 14px; font-size: 12px; transition: border-color 0.2s, background 0.2s; color: rgb(238, 238, 238);}
.logo-destination i{width: 6px; height: 6px; background: var(--accent); border-radius: 50%;}
.logo-destination span{margin-left: auto; color: var(--accent);}
.logo-destination:hover, .logo-destination:focus-visible, .logo-destination.is-selected{border-color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,transparent);}
.logo-destination:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
@media (max-width: 600px){.logo-destinations{grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 5px; margin-top: 17px; max-width: none;}
.logo-destination{padding: 10px 5px; font-size: 10px; gap: 5px;}
.logo-destination span{display: none;}
.copy .discover{display: none;}}
@media (min-width: 601px) and (max-height: 800px){.logo-destinations{margin-top: 16px;}
.logo-destination{padding: 9px 12px;}
.copy .discover{margin-top: 16px;}}
.grab-hint{position: absolute; left: 50%; bottom: 13%; transform: translate(-50%, 5px); opacity: 0; pointer-events: none; color: rgb(238, 238, 238); background: rgba(19, 19, 19, 0.86); border: 1px solid rgba(255, 255, 255, 0.145); border-radius: 30px; padding: 9px 14px; font: 11px "DM Sans", sans-serif; transition: opacity 0.25s, transform 0.25s;}
.grab-hint.shown{opacity: 1; transform: translate(-50%, 0px);}
@media (prefers-reduced-motion: reduce){.grab-hint{display: none;}}
.copy h1 em{color: var(--headline-color,#ad92ff); transition: color 1.35s cubic-bezier(0.4, 0, 0.2, 1);}
.copy .description{min-height: 3.2em;}
@media (prefers-reduced-motion: reduce){.copy h1 em{transition: none;}}
.header{position: sticky; top: 0px; z-index: 30; background: rgb(19, 19, 19);}
.journey{height: 240svh;}
.logo-dock-layer{position: fixed; inset: 0px; z-index: 31; pointer-events: none; overflow: hidden;}
.logo-dock-layer canvas{position: absolute; left: 0px; top: 0px; display: block; transform-origin: 0px 0px; cursor: grab; touch-action: pan-y; opacity: 0; mask-image: linear-gradient(to right, transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent), linear-gradient(transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent); mask-composite: intersect;}
.sculpture .orbit-caption, .sculpture .halo, .sculpture .grab-hint{opacity: var(--dock-fade,1);}
.sculpture .grab-hint:not(.shown){opacity: 0;}
html{scroll-padding-top: 110px;}
@media (max-width: 600px){.journey{height: 210svh;}
html{scroll-padding-top: 88px;}}
.still .journey{height: 190svh;}
.journey > .hero{background-color: rgb(19, 19, 19); background-image: linear-gradient(transparent 25%, rgb(19, 19, 19) 100%), radial-gradient(at 76% 18%, rgb(52, 53, 54) 0%, rgb(37, 38, 39) 34%, rgb(25, 26, 27) 62%, rgb(19, 19, 19) 90%); background-size: 100% 100%; background-position: 0px 0px; background-repeat: no-repeat; background-attachment: scroll;}

.brand-lockup{position: relative; display: block; flex-shrink: 0;}
.header .brand-symbol-layer{position: absolute; inset: 0px; clip-path: inset(0px 71% 0px 0px); pointer-events: none; will-change: opacity;}
.progress{display: none;}
.hero-bottom{border-top: 0px;}
.motion span{width: 9px; height: 10px; border-radius: 0px; background: linear-gradient(to right, currentcolor 0px, currentcolor 3px, transparent 3px, transparent 6px, currentcolor 6px); color: rgb(183, 230, 109);}
.motion[aria-pressed="false"] span{background: currentcolor; clip-path: polygon(0px 0px, 100% 50%, 0px 100%); color: rgb(183, 230, 109);}
@media (max-width: 600px){

.motion{min-width: 34px; min-height: 34px; justify-content: center;}}
#headline > span{text-transform: uppercase;}
@media (max-width: 600px){#headline > br{display: block;}
#headline em{margin-left: 0px;}
.copy .description{display: block; font-size: 12px; line-height: 1.6; margin: 15px 0px; min-height: 3.2em;}}
.copy .description{max-width: 440px; min-height: 0px; color: rgb(184, 184, 178);}
.hero-contact{margin: 20px 0px 0px;}
.inquiry-button{display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 18px; background: var(--paper); color: var(--ink); border: 1px solid var(--paper); border-radius: 4px; font-size: 13px; font-weight: 500; transition: background 0.25s, transform 0.25s;}
.inquiry-button:hover{background: rgb(255, 255, 255); transform: translateY(-2px);}
.inquiry-button span{font-size: 20px; line-height: 1;}
.hero-contact p{font-size: 11px; color: rgb(164, 164, 159); margin: 9px 0px 0px;}
.logo-destinations{margin-top: 20px;}
@media (min-width: 601px) and (max-height: 800px){#headline{font-size: clamp(64px, 6.2vw, 88px);}
.copy{padding: 8px 0px;}
.copy .description{margin: 14px 0px; line-height: 1.55;}
.eyebrow{margin-bottom: 18px;}
.hero-contact{margin-top: 14px;}
.logo-destinations{margin-top: 14px;}}
@media (max-width: 600px){.hero{min-height: 850px;}
.copy .description{font-size: 12px; line-height: 1.65; margin: 14px 0px;}
.hero-contact{margin-top: 14px;}
.inquiry-button{padding: 12px 16px; font-size: 12px;}
.hero-contact p{font-size: 10px;}
.logo-destinations{margin-top: 17px;}}
.copy .description{max-width: 440px; font-size: 14px; line-height: 1.8; margin: 24px 0px 0px; text-wrap: pretty;}
.description p{margin: 0px;}
.description .team-intro{color: var(--paper); margin-bottom: 10px;}
.description .logo-destination{display: inline; padding: 0px; border: 0px; border-radius: 0px; font: inherit; color: var(--accent); background: transparent; text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: color-mix(in srgb,var(--accent) 35%,transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.3s, color 0.3s;}
.description .logo-destination:hover, .description .logo-destination:focus-visible, .description .logo-destination.is-selected{background: transparent; text-decoration-color: var(--accent);}
.hero-contact{margin-top: 23px;}
.inquiry-button{display: inline-block; padding: 0px 0px 7px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(242, 240, 231, 0.5); border-image: none; border-radius: 0px; background: transparent; color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: 0px; transition: border-color 0.3s, color 0.3s;}
.inquiry-button:hover{background: transparent; transform: none; border-color: var(--paper); color: rgb(255, 255, 255);}
.hero-contact p{margin-top: 10px; color: rgb(150, 150, 144);}
.scroll-note{font-size: 9px; text-transform: none; letter-spacing: 0.04em;}
@media (min-width: 601px) and (max-height: 800px){.copy .description{font-size: 13px; line-height: 1.7; margin-top: 16px;}
.hero-contact{margin-top: 17px;}}
@media (max-width: 600px){.hero{min-height: 850px;}
.copy .description{font-size: 13px; line-height: 1.75; margin-top: 18px;}
.description .team-intro{margin-bottom: 8px;}
.hero-contact{margin-top: 18px;}
.inquiry-button{font-size: 13px;}
.hero-contact p{font-size: 10px;}}
.copy{padding: 15px 0px 25px;}
#headline{font-size: clamp(72px, 7.1vw, 130px);}
.hero-details{max-width: 440px; margin-top: 27px;}
.team-description{font-size: 14px; line-height: 1.65; color: rgb(184, 184, 178); margin: 0px 0px 20px; text-wrap: pretty;}
.service-list{display: flex; flex-direction: column; gap: 0px;}
.service-list .service-row{display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 16px; border: 0px; padding: 8px 0px; background: transparent; font-size: 13px; line-height: 1.4; text-decoration: none; transition: color 0.25s;}
.service-row strong{font-weight: 500; color: var(--accent);}
.service-list .service-row span{margin: 0px; color: rgb(184, 184, 178); font-size: 12px; transition: color 0.25s;}
.service-list .service-row:hover, .service-list .service-row:focus-visible, .service-list .service-row.is-selected{background: transparent;}
.service-list .service-row:hover span, .service-list .service-row:focus-visible span{color: var(--paper);}
.hero-contact{margin-top: 22px;}
.inquiry-button{padding: 11px 22px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 5px; background: rgba(255, 255, 255, 0.01); font-size: 13px; font-weight: 500; line-height: 1.4; transition: background 0.25s, border-color 0.25s;}
.inquiry-button:hover{background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.5); transform: none;}
@media (min-width: 601px) and (max-height: 800px){#headline{font-size: clamp(60px, 5.8vw, 82px);}
.hero-details{margin-top: 19px;}
.team-description{font-size: 13px; line-height: 1.55; margin-bottom: 12px;}
.service-list .service-row{padding: 6px 0px;}
.hero-contact{margin-top: 17px;}}
@media (max-width: 600px){.hero{height: auto; min-height: 0px; max-height: none; overflow: visible; padding-top: 30px;}
.hero-grid{display: grid; grid-template-columns: minmax(0px, 1fr); height: auto; gap: 0px;}
.copy{display: contents;}
#headline{grid-row: 1; font-size: clamp(52px, 14vw, 76px); line-height: 0.9;}
.sculpture{grid-row: 2; height: 350px; min-height: 0px; margin: 10px 0px 8px;}
.hero-details{grid-row: 3; margin: 0px 0px 30px; max-width: none;}
.team-description{font-size: 14px; line-height: 1.65; margin-bottom: 20px;}
.service-list .service-row{grid-template-columns: 86px 1fr; gap: 12px; padding: 9px 0px; font-size: 14px;}
.service-list .service-row span{display: block; font-size: 12px;}
.hero-contact{margin-top: 23px;}
.inquiry-button{padding: 12px 24px; font-size: 13px;}
.hero-bottom{height: 55px;}
.hero-details a{pointer-events: auto;}}
/* Content-sized intro: no empty scroll runway after the removed bottom strip. */
.journey,.still .journey{height:auto}
.hero{position:relative;top:auto;height:auto;min-height:0;max-height:none;padding-top:30px;padding-bottom:30px}
.hero-grid{height:auto;align-items:center}
.sculpture{height:clamp(380px,40vw,620px)}
@media(max-width:600px){.hero{padding-top:30px;padding-bottom:8px}.sculpture{height:350px}.hero-details{margin-bottom:16px}}

/* Native, reversible scroll sequence. Tall mobile heroes pin once fully visible. */
.journey > .hero{position:sticky;top:var(--hero-pin-top,0px)}
.journey .progress{display:block;bottom:0;left:0;right:0;height:3px;z-index:2;pointer-events:none}
.still .journey > .hero{position:relative;top:0}
.still .journey .progress{display:none}
@media(prefers-reduced-motion:reduce){.journey > .hero{position:relative;top:0}.journey .progress{display:none}}

/* On touch-sized screens the logo follows the initial natural scroll, without a pinned runway. */
@media(max-width:800px){
 .journey > .hero{position:relative;top:0}
 .journey .progress{display:none}
}