.progress{position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; background: transparent; pointer-events: none;}
.progress i{display: block; height: 100%; width: 100%; background: var(--terracotta); transform-origin: 0 50%; transform: scaleX(var(--scroll, 0));}
.js .reveal{opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s);}
.js .reveal.in{opacity: 1; transform: none;}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity: 1; transform: none; transition: none;}}
@keyframes rise { to { transform: none; } }
.btn.on-dark{background: #F4F1E9; color: #192C29; border-color: #F4F1E9;}
.nums{display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 8px;}
@media (max-width: 700px){.nums{grid-template-columns: 1fr;}}
.principles{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vw, 72px);}
.principles > div{padding: 26px 26px 6px 0;}
.principles > div + div{padding-left: 26px; border-left: 1px solid var(--rule);}
.principles p{color: var(--muted); margin-top: 8px;}
@media (max-width: 800px){.principles{grid-template-columns: 1fr;}.principles > div + div{padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 20px;}}
.fcard{display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 30px; padding: clamp(18px, 3vw, 30px);}
.fcard img{width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; display: block;}
.fcard h3{font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);}
.fcard .role{color: var(--terracotta); font-weight: 600; margin-top: 4px;}
.fcard p{color: var(--muted); margin-top: 12px; max-width: 38em;}
.fcard .links{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;}
@media (max-width: 640px){.fcard{grid-template-columns: 1fr;}.fcard img{max-width: 220px;}}
.arrow::after{content: " \2192";}
.phead{padding: clamp(48px, 8vw, 110px) 0 clamp(28px, 4vw, 48px);}
.phead h1{font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); line-height: .98; max-width: 14ch;}
.phead .sub{margin-top: 22px; max-width: 36em; color: var(--muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);}
.prose{max-width: 40em;}
.prose p + p{margin-top: 1em;}
.prose p{color: var(--muted);}
.prose p b{color: var(--ink); font-weight: 600;}
.ali-hero .wrap{display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 80px); align-items: center;}
.ali-hero img{width: 100%; max-width: 460px; justify-self: end; aspect-ratio: 4/5; object-fit: cover; border-radius: 36px; box-shadow: 0 40px 70px -35px color-mix(in srgb, var(--ink) 55%, transparent); transform: rotate(1.5deg);}
@media (max-width: 860px){.ali-hero .wrap{grid-template-columns: minmax(0, 1fr);}.ali-hero img{justify-self: start; max-width: 320px; order: -1; transform: none;}}
.tl{border-left: 2px solid var(--rule); margin: 0; padding: 0 0 0 28px; list-style: none; display: grid; gap: 34px;}
.tl li{position: relative;}
.tl li::before{content: ""; position: absolute; left: -36px; top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--ivory); border: 3px solid var(--terracotta);}
.tl .when{font: 600 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);}
.tl h3{margin: 8px 0 6px;}
.tl p,.tl ul{color: var(--muted);}
.tl ul{margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 6px;}
.cols{display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
@media (max-width: 760px){.cols{grid-template-columns: 1fr;}}
.tile{border: 1px solid var(--rule); background: var(--paper); border-radius: 22px; padding: 24px 26px;}
.tile h3{margin-bottom: 10px;}
.tile p,.tile li{color: var(--muted);}
.tile ul{margin: 0; padding-left: 1.1em; display: grid; gap: 6px;}
.pills{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;}
.pill{border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; font-size: .9rem; background: var(--paper);}
body{overflow-x: clip;}
.skip{position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--ivory); padding: 10px 14px; border-radius: 8px; z-index: 60;}
.skip:focus{left: 8px;}
.nav .wrap{gap: 22px;}
.nav ul{margin: 0 auto; gap: 22px; font-size: .92rem;}
.nav ul a{white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;}
.nav ul a.on,.nav ul a[aria-current="page"]{color: var(--ink); border-color: var(--terracotta);}
.nav .m-only{display: none;}
.nav-toggle{display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 12px; background: transparent; cursor: pointer; position: relative;}
.nav-toggle i{position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, top .25s;}
.nav-toggle i:nth-child(1){top: 16px;}
.nav-toggle i:nth-child(2){top: 25px;}
.nav.open .nav-toggle i:nth-child(1){top: 20px; transform: rotate(45deg);}
.nav.open .nav-toggle i:nth-child(2){top: 20px; transform: rotate(-45deg);}
@media (max-width: 1000px){.nav-toggle{display: block;}.nav .btn.contact{display: none;}.nav:has(.nav-toggle) ul{display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; margin: 0; padding: 8px 20px 20px; background: var(--ivory); border-bottom: 1px solid var(--rule); font-size: 1.05rem;}.nav.open ul{display: flex;}.nav ul li a{display: block; padding: 14px 0; border-bottom: 1px solid var(--rule);}.nav .m-only{display: block;}}
.btn.on-dark{background: #F4F1E9; color: #0C1816; border-color: #F4F1E9;}
.btn.ghost-dark{background: transparent; color: #F4F1E9; border-color: #F4F1E9;}
.btn.ghost-dark:hover,.btn.on-dark:hover{box-shadow: 0 8px 0 -4px rgba(244, 241, 233, .3);}
.hero2{--night: #0C1816; position: relative; min-height: calc(100svh - 64px); display: grid; align-items: end; padding: clamp(64px, 10vw, 140px) 0 clamp(72px, 9vw, 120px); background: var(--night); color: #F4F1E9; overflow: clip; isolation: isolate;}
.hero2 .kicker{color: #8FA39C;}
.hero2 h1{margin-top: 22px; font-size: clamp(3.4rem, 1rem + 11vw, 11.5rem); line-height: .9; letter-spacing: -.04em; max-width: 9ch;}
.hero2 h1 .ln{display: block; overflow: hidden; padding-bottom: .06em;}
.hero2 h1 .ln > span{display: block; transform: translateY(108%); animation: rise 1.1s cubic-bezier(.2,.8,.2,1) forwards;}
.hero2 h1 .ln:nth-child(2) > span{animation-delay: .14s; color: var(--lamp);}
.rot{position: relative; height: 1.6em; margin-top: 26px; font: 600 clamp(1.05rem, .9rem + .9vw, 1.5rem)/1.6 var(--display); letter-spacing: -.01em; color: #F4F1E9;}
.rot span{position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; animation: rot 16s infinite;}
.rot span:nth-child(1){animation-delay: 0s;}
.rot span:nth-child(2){animation-delay: 4s;}
.rot span:nth-child(3){animation-delay: 8s;}
.rot span:nth-child(4){animation-delay: 12s;}
@keyframes rot { 0% { opacity: 0; transform: translateY(70%); } 4% { opacity: 1; transform: none; } 22% { opacity: 1; transform: none; } 26% { opacity: 0; transform: translateY(-70%); } 100% { opacity: 0; } }
.hero2 .cta-row{margin-top: 34px;}
.hero-city{position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;}
.hero-city line{stroke: #2A4540; stroke-width: 4; stroke-linecap: round;}
.hero-city .road{stroke: #1D3430; stroke-width: 3; fill: none;}
.hero-city .trace{stroke: var(--safe); stroke-width: 3.5; stroke-linecap: round; fill: none; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: draw 4s .8s cubic-bezier(.5,0,.2,1) forwards;}
@keyframes breathe { 50% { opacity: .2; } }
.cue{position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 600 .7rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #8FA39C; text-decoration: none;}
.cue span{width: 1px; height: 38px; background: linear-gradient(#8FA39C, transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top;}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce){.hero2 h1 .ln > span{transform: none; animation: none;}.rot span{animation: none; opacity: 0;}.rot span:first-child{opacity: 1;}.hero-city .trace{animation: none; stroke-dashoffset: 0;}.cue span{animation: none;}}
@media (max-width: 700px){.hero2 h1{font-size: clamp(3.2rem, 17vw, 6rem);}.rot span{white-space: normal;}.rot{height: 3.2em;}}
.mission{--w: 0; --p: 0; height: 300svh; position: relative; background: #0C1816;}
.mstage{position: sticky; top: 64px; height: calc(100svh - 64px); overflow: clip;}
.mcontent{position: absolute; inset: 0; display: grid; align-content: center;}
.mcontent .kicker{color: inherit; opacity: .78;}
.mtext{margin-top: 20px; font: 600 clamp(2rem, 1rem + 4.6vw, 5rem)/1.04 var(--display); letter-spacing: -.03em; max-width: 19ch; text-wrap: balance;}
.mtext .w{opacity: .55; transition: opacity .35s ease;}
.mtext .w.on{opacity: 1;}
.mnote{margin-top: clamp(18px, 3vh, 34px); max-width: 34em; font-size: clamp(1.02rem, .95rem + .4vw, 1.3rem); opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease;}
.mission.note .mnote{opacity: .92; transform: none;}
.mscene{position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 36svh; pointer-events: none;}
.mscene line{stroke: currentColor; stroke-width: 3; opacity: .4; stroke-linecap: round;}
.mscene .house path{stroke: currentColor; stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; opacity: .75;}
.mscene .win,.mscene .door{fill: var(--lamp); opacity: calc(.14 + var(--w) * .86);}
.mscene .mpath{stroke: var(--safe); stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 961; stroke-dashoffset: calc(961 - 961 * var(--p));}
.mscene .mwalker{fill: currentColor; stroke: var(--safe); stroke-width: 3;}
@media (max-width: 700px){.mscene{max-height: 26svh;}.mtext{font-size: clamp(1.9rem, 9vw, 3rem);}}
@media (prefers-reduced-motion: reduce){.mission{height: auto;}.mstage{position: static; height: auto;}.mission{--w: 1;}.mtext .w{opacity: 1;}.mnote{opacity: .92; transform: none;}.mscene .mpath{stroke-dashoffset: 0;}}
.navintro{padding-bottom: 0;}
.get h2{max-width: 16ch;}
.get p{margin-top: 16px; max-width: 34em; color: var(--muted);}
.duo{display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.act{display: flex; flex-direction: column; gap: 12px; text-decoration: none; padding: clamp(24px, 3vw, 36px); border-radius: 28px; border: 1px solid var(--rule); background: var(--paper); transition: transform .25s, border-color .25s; min-height: 260px;}
.act:hover{transform: translateY(-4px); border-color: var(--ink);}
.act h3{font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);}
.act p{color: var(--muted); max-width: 28em; flex: 1;}
.act .go{font-weight: 600;}
.act .go::after{content: " \2192";}
@media (max-width: 760px){.duo{grid-template-columns: 1fr;}}
.back{text-decoration: none; font: 600 .9rem/1 var(--body); padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); white-space: nowrap;}
.back:hover{color: var(--ink); border-color: var(--ink);}
@media (max-width: 760px){.nav .back{padding: 8px 10px; font-size: .8rem;}.nav .brand{font-size: 1.1rem;}}
.brand{gap: 12px;}
.brand .lbs{font: 600 .68rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding-top: 3px;}
@media (max-width: 420px){.brand .lbs{display: none;}}
.splash{position: relative; min-height: calc(100svh - 64px); display: grid; place-items: center; background: #0C1816; color: #F4F1E9; overflow: clip;}
.lockup{display: grid; justify-items: center; gap: clamp(20px, 3.4vw, 36px); padding: 0 24px;}
.sp-labs{font: 600 clamp(.8rem, .7rem + .5vw, 1.05rem)/1 var(--body); letter-spacing: .6em; text-transform: uppercase; color: #8FA39C; margin-right: -.6em; opacity: 0; animation: spIn 1s 1.6s ease forwards;}
@keyframes spIn { to { opacity: 1; transform: none; } }
@keyframes wmDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){.sp-labs{opacity: 1; transform: none; animation: none;}}
.fsec{display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center;}
.portrait{position: relative; display: block; width: clamp(220px, 28vw, 340px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 55%, transparent); isolation: isolate;}
.portrait img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1);}
.portrait .ov{position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, #192C29 80%, transparent); color: #F4F1E9; opacity: 0; transition: opacity .35s ease;}
.portrait .ov b{font: 600 clamp(1.2rem, 1rem + .8vw, 1.7rem)/1 var(--display); letter-spacing: -.01em; transform: translateY(8px); transition: transform .45s cubic-bezier(.2,.7,.2,1);}
.portrait .ov b::after{content: " \2192";}
.portrait:hover .ov,.portrait:focus-visible .ov{opacity: 1;}
.portrait:hover .ov b,.portrait:focus-visible .ov b{transform: none;}
.portrait:hover img{transform: scale(1.06);}
@media (hover: none){.portrait::after{content: "\2192"; position: absolute; right: 8%; bottom: 8%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #192C29; color: #F4F1E9; font-size: 1.2rem;}}
.fsec h2{font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.2rem);}
.fsec .role{margin-top: 8px; color: var(--terracotta); font-weight: 600;}
.fsec .bio{margin-top: 16px; max-width: 32em; color: var(--muted); font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);}
@media (max-width: 700px){.fsec{grid-template-columns: 1fr; justify-items: start;}}
:root{--map-block: #DFE5D2; --map-park: #C9DCB4; --map-label: #7C8A80;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--map-block: #213A35; --map-park: #24473A; --map-label: #6F8C84;}}
h1,h2,h3{font-weight: 500; letter-spacing: -.025em;}
.head{margin-inline: auto; text-align: center;}
.head p{margin-inline: auto;}
.nav .wrap{display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;}
.nav .brand{justify-self: start; gap: 12px;}
.nav ul{justify-self: center; margin: 0; gap: clamp(16px, 2vw, 30px);}
.nav .btn.contact{justify-self: end;}
.hd-lock{height: 17px; width: auto; color: var(--ink); display: block; overflow: visible;}
.brand .lbs{padding-top: 5px;}
@media (max-width: 1000px){.nav .wrap{display: flex;}.nav .btn.contact{display: none;}}
@media (max-width: 420px){.hd-lock{height: 15px;}}
.splash .lockup{display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.6vw, 22px); flex-wrap: nowrap;}
.sp-lock{width: min(680px, 76vw); height: auto; color: #F4F1E9; overflow: visible;}
.sp-lock path{stroke-dasharray: 1; stroke-dashoffset: 1; animation: wmDraw 1.5s .4s cubic-bezier(.5,0,.2,1) forwards;}
.sp-lock g > g:nth-of-type(2) path{animation-delay: .5s;}
.sp-lock g > g:nth-of-type(3) path{animation-delay: .6s;}
.sp-lock g > g:nth-of-type(4) path{animation-delay: .7s;}
.sp-lock g > g:nth-of-type(5) path{animation-delay: .8s;}
.sp-lock g > g:nth-of-type(6) path{animation-delay: .9s;}
.sp-lock g > g:nth-of-type(7) path{animation-delay: 1s;}
.sp-lock circle{opacity: 0; animation: spIn .8s 1.3s ease forwards;}
.sp-labs{margin: 0 0 clamp(6px, 1.1vw, 16px); letter-spacing: .5em; font-size: clamp(.62rem, .5rem + .55vw, 1rem); white-space: nowrap;}
@media (max-width: 700px){.sp-lock{width: 66vw;}.sp-labs{letter-spacing: .3em;}}
@media (prefers-reduced-motion: reduce){.sp-lock circle{opacity: 1; animation: none;}}
.hero2{align-items: center; padding: clamp(56px, 8vw, 120px) 0;}
.hero2 .wrap{text-align: center;}
.hero2 h1{margin-inline: auto; max-width: none; font-size: clamp(3.4rem, 1rem + 10.5vw, 10.5rem); font-weight: 500; line-height: .92;}
.hero2 h1 .ln{overflow: hidden;}
.rot{height: 1.7em; margin-top: 22px;}
.rot span{left: 0; right: 0; text-align: center;}
.hero2 .cta-row{justify-content: center;}
.mission .wrap{text-align: center;}
.mtext{margin-inline: auto; max-width: 20ch; font-weight: 500;}
.mnote{margin-inline: auto;}
.mscene{max-height: 40svh;}
.mscene .tree path,.mscene .tree circle{stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; opacity: .4;}
.mscene .house .thin{stroke-width: 2; opacity: .45;}
.mscene .house .shrub{opacity: .45;}
.mscene .house .door,.mscene .house .win{fill: var(--lamp); stroke: none; opacity: calc(.12 + var(--w) * .88);}
.mscene .hglow{opacity: var(--w);}
.mscene .mpath{stroke: var(--safe); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p));}
.mscene .mwalker{fill: currentColor; stroke: var(--safe); stroke-width: 3;}
@media (prefers-reduced-motion: reduce){.mscene .mpath{stroke-dashoffset: 0;}.mscene .hglow{opacity: 1;}}
.stat{height: 260svh; position: relative; background: #0C1816; color: #F4F1E9; padding: 0;}
.sstage{position: sticky; top: 64px; height: calc(100svh - 64px); display: grid; place-items: center; text-align: center;}
.sstage .kicker{color: #8FA39C;}
.snum{font: 300 clamp(5.2rem, 2rem + 17vw, 15rem)/.9 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;}
.ssrc{margin-top: 12px; font-size: .84rem; color: #8FA39C;}
.ssrc a{color: #B7C4BF;}
@media (prefers-reduced-motion: reduce){.stat{height: auto; padding: 96px 0;}.sstage{position: static; height: auto;}}
.about .head,.navintro .head{margin-bottom: clamp(28px, 4vw, 48px);}
.prose-c{max-width: 38em; margin: 0 auto; text-align: center; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--muted);}
.prose-c p + p{margin-top: 1.1em;}
.principles{text-align: center;}
.fineprint{max-width: 40em; margin: 36px auto 0; text-align: center; color: var(--muted);}
.origin{max-width: 42em; margin: clamp(56px, 8vw, 110px) auto 0; text-align: center;}
.origin blockquote{margin: 22px 0 0; display: grid; gap: 1.1em;}
.origin blockquote p{font: 400 clamp(1.25rem, 1.05rem + 1vw, 1.9rem)/1.42 var(--display); letter-spacing: -.01em; color: var(--ink);}
.origin blockquote p:first-child{font-weight: 500;}
.origin figcaption{margin-top: 26px; color: var(--terracotta); font-weight: 600;}
.story{height: 400svh; position: relative;}
.nstage{position: sticky; top: 64px; height: calc(100svh - 64px); width: min(1100px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 8vw, 120px); align-items: center; justify-items: center;}
.srail{--prog: 0; list-style: none; margin: 0; padding: 0; position: relative; max-width: 30em; justify-self: end;}
.srail::before,.srail::after{content: ""; position: absolute; left: 17px; top: 30px; bottom: 30px; width: 2px; background: var(--rule); border-radius: 2px;}
.srail::after{background: var(--terracotta); transform-origin: 0 0; transform: scaleY(var(--prog));}
.rstep{position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 20px; padding: 16px 0; opacity: .72; transition: opacity .4s;}
.rstep.on{opacity: 1;}
.rn{width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--rule); background: var(--ivory); display: grid; place-items: center; font: 600 .95rem/1 var(--display); position: relative; z-index: 1; transition: background .3s, color .3s, border-color .3s;}
.rstep.on .rn,.rstep.done .rn{background: var(--ink); color: var(--ivory); border-color: var(--ink);}
.rstep h3{font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); padding-top: 4px;}
.rstep p{max-height: 0; overflow: hidden; opacity: 0; color: var(--muted); transition: max-height .5s ease, opacity .4s ease, margin .4s;}
.rstep.on p{max-height: 9em; opacity: 1; margin-top: 8px;}
.phone-wrap{display: grid; justify-items: center; gap: 12px;}
.phone{position: relative; width: clamp(236px, 27vw, 300px); aspect-ratio: 9 / 18.4; border-radius: 46px; padding: 10px; background: #0A1413; box-shadow: 0 50px 80px -40px rgba(0,0,0,.6), inset 0 0 0 1.5px #2B3F3A;}
.phone::before{content: ""; position: absolute; z-index: 3; top: 18px; left: 50%; width: 74px; height: 20px; border-radius: 12px; background: #0A1413; transform: translateX(-50%);}
.screen{position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--map-ground);}
.pmap{position: absolute; inset: 0; width: 100%; height: 100%;}
.pg{fill: var(--map-ground);}
.pblock{fill: var(--map-block);}
.ppark{fill: var(--map-park);}
.pcampus{fill: var(--map-campus);}
.pst-edge path{stroke: var(--map-street-edge); stroke-width: 12; stroke-linecap: round; fill: none;}
.pst path{stroke: var(--map-street); stroke-width: 9; stroke-linecap: round; fill: none;}
.plabels text{font: 600 6.4px var(--body); letter-spacing: .1em; fill: var(--map-label);}
.pfast{stroke: #7B8A85; stroke-width: 4; stroke-dasharray: 1 8; stroke-linecap: round; fill: none; transition: opacity .5s;}
.psafer{stroke: var(--safe); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none;}
.psafer.glow{stroke-width: 14; opacity: .22;}
.incs{opacity: 0; transition: opacity .7s;}
.plamps .lamp{opacity: 0; transition: opacity .4s;}
.plamps .lamp circle:last-child{fill: var(--lamp);}
.pstart{fill: #192C29; stroke: #fff; stroke-width: 3;}
.pend{fill: var(--bronze);}
.pendd{fill: #fff;}
.pmap .ring{fill: none; stroke: var(--safe); stroke-width: 2.5; opacity: 0;}
.pmap .walker{fill: #fff; stroke: var(--safe); stroke-width: 4; opacity: 0;}
.ptop{position: absolute; z-index: 2; top: 40px; left: 14px; right: 14px; height: 40px; border-radius: 14px; background: var(--paper); box-shadow: 0 10px 22px -12px rgba(0,0,0,.4); display: flex; align-items: center; gap: 9px; padding: 0 14px; font: 500 .78rem/1 var(--body); color: var(--ink);}
.pdot{width: 8px; height: 8px; border-radius: 50%; background: var(--safe);}
.sheet{position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: grid; border-radius: 24px; background: var(--paper); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); padding: 16px 18px 18px; min-height: 112px;}
.sp{grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; position: relative;}
.sp.on{opacity: 1; transform: none;}
.sp small{font: 600 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);}
.sp b{display: block; margin-top: 7px; font: 600 1.45rem/1.12 var(--display); letter-spacing: -.02em; color: var(--ink);}
.sp p{margin-top: 5px; font-size: .78rem; line-height: 1.4; color: var(--muted); max-width: 17em;}
.esc{position: absolute; right: 0; bottom: 0; background: #192C29; color: #F4F1E9; border-radius: 999px; font: 600 .72rem/1 var(--body); padding: 9px 13px;}
.phone-wrap .fine{text-align: center;}
@media (max-width: 860px){.nstage{grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 16px; align-content: center;}.phone-wrap{order: -1;}.phone{width: clamp(190px, 46vw, 230px);}.srail{justify-self: center; max-width: 24em;}.rstep{padding: 8px 0;}.rstep h3{font-size: 1.1rem;}.rstep p{font-size: .92rem;}.rstep.on p{max-height: 7em;}.srail::before,.srail::after{top: 24px; bottom: 24px;}}
@media (prefers-reduced-motion: reduce){.story{height: auto;}.nstage{position: static; height: auto; padding: 56px 0;}.rstep{opacity: 1;}.rstep p{max-height: none; opacity: 1; margin-top: 8px;}.sp:first-child{opacity: 1; transform: none;}.incs,.plamps .lamp{opacity: 1;}.pmap .walker{opacity: 1;}}
.principles{text-align: center;}
.get .wrap{text-align: center;}
.get h2,.get p{margin-inline: auto;}
.get .cta-row{justify-content: center;}
.duo .act{text-align: center; align-items: center;}
.fsec{grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px;}
.fsec .bio{margin-inline: auto;}
.founder{padding-top: 0;}
html.lenis,html.lenis body{height: auto;}
.lenis.lenis-smooth{scroll-behavior: auto !important;}
.lenis.lenis-stopped{overflow: hidden;}
:root{--ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1);}
.btn{transition: transform .16s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s; will-change: transform;}
.btn:active{transform: scale(.97);}
.mag{will-change: transform;}
a,button{-webkit-tap-highlight-color: transparent;}
:focus-visible{outline: 3px solid var(--focus); outline-offset: 3px;}
.band :focus-visible,.hero2 :focus-visible,.splash :focus-visible,.stat :focus-visible,.close :focus-visible,.get :focus-visible,.mission :focus-visible{outline-color: var(--lamp);}
.splash::after,.hero2::after,.stat::after,.close::after,.get::after{content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.get{position: relative; overflow: clip;}
@keyframes drift1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-9vw, 8vh, 0) scale(1.18); } }
.bento{display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; text-align: left;}
.bt{position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-height: 196px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--rule); border-radius: 26px; background: var(--paper); transition: transform .35s var(--ease-out), border-color .3s;}
.b1{grid-column: span 4;}
.b2,.b3,.b5,.b6,.b7{grid-column: span 2;}
.b4{grid-column: span 2; grid-row: span 2; background: var(--evergreen); color: #F4F1E9; border-color: transparent; justify-content: flex-end;}
.bt h3{font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); margin-top: auto;}
.b1 h3,.b4 h3{font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);}
.bt p{color: var(--muted); max-width: 26em;}
.b4 p{color: #C5D2CC;}
.bi{width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sage); color: var(--ink);}
.b4 .bi{background: rgba(244,241,233,.12); color: #F4F1E9;}
.bi svg{width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
.spot::before,.act::before{content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--terracotta) 17%, transparent), transparent 62%);}
.act{position: relative; overflow: hidden; isolation: isolate;}
@media (hover: hover) and (pointer: fine){.spot:hover::before,.act:hover::before{opacity: 1;}.bt:hover{transform: translateY(-3px); border-color: color-mix(in srgb, var(--ink) 30%, var(--rule));}}
@media (max-width: 900px){.bento{grid-template-columns: repeat(2, 1fr);}.b1{grid-column: span 2;}.b2,.b3,.b5,.b6,.b7{grid-column: span 1;}.b4{grid-column: span 2; grid-row: auto; min-height: 220px;}}
@media (max-width: 560px){.bento{grid-template-columns: 1fr;}.b1,.b2,.b3,.b4,.b5,.b6,.b7{grid-column: auto;}}
.close{position: relative; background: #0C1816; color: #F4F1E9; overflow: clip; padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 10vw, 140px);}
.marquee{overflow: clip; margin-bottom: clamp(48px, 7vw, 96px); border-block: 1px solid #1E3430; padding: clamp(14px, 2vw, 26px) 0;}
.mq-track{display: flex; width: max-content; will-change: transform;}
.mq-track span{margin-right: clamp(40px, 6vw, 96px);}
.mq-track span{font: 300 clamp(2.6rem, 1.2rem + 6vw, 7rem)/1 var(--display); letter-spacing: -.035em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(244,241,233,.5);}
.mq-track span:nth-child(even){color: #F4F1E9; -webkit-text-stroke: 0;}
.c-cta{text-align: center; position: relative; z-index: 1;}
.c-cta h2{max-width: 15ch; margin: 0 auto; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.2rem); font-weight: 400; line-height: 1;}
.c-cta p{margin: 20px auto 0; color: #B7C4BF; max-width: 28em;}
.c-cta .cta-row{justify-content: center;}
.foot{padding: clamp(48px, 6vw, 88px) 0 32px; color: var(--muted); font-size: .95rem;}
.foot .fcols{display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 32px;}
.foot .fbrand .ft-lock{height: 21px; width: auto; color: var(--ink); margin-bottom: 16px; display: block; overflow: visible;}
.foot .fbrand p{max-width: 22em;}
.foot .fsmall{margin-top: 10px; font-size: .85rem;}
.foot nav{display: grid; gap: 10px; align-content: start;}
.foot h3{margin: 0 0 6px; font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);}
.foot nav a{color: var(--ink); opacity: .86; text-decoration: none;}
.foot nav a:hover{opacity: 1; text-decoration: underline; text-underline-offset: 3px;}
.foot .fbase{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: .85rem;}
@media (max-width: 900px){.foot .fcols{grid-template-columns: 1fr 1fr;}.foot .fbrand{grid-column: 1 / -1;}}
.gsap-on .hero2 h1 .ln > span{animation: none; transform: none;}
.gsap-on .reveal{transition: none;}
.gsap-on .mtext .w{transition: none;}
.gsap-on .mnote{transition: none;}
.nav.scrolled{box-shadow: 0 10px 30px -22px rgba(0,0,0,.5);}
:root{--accent-text: #8A4524;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent-text: var(--terracotta);}}
:root[data-theme="dark"]{--accent-text: var(--terracotta);}
.fcard .role,.fsec .role,.origin figcaption{color: var(--accent-text);}
html{scroll-padding-top: 80px;}
.sr-only{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.gsap-on .incs,.gsap-on .pfast,.gsap-on .plamps .lamp{transition: none;}
.pnav{justify-self: center;}
@media (max-width: 1000px){.pnav{margin-left: auto;}}
.nav:not(:has(.nav-toggle)) .wrap{display: flex;}
.nav:not(:has(.nav-toggle)) ul{margin-left: auto;}
.pause{font: 600 .82rem/1 var(--body); color: var(--muted); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 14px; cursor: pointer;}
.pause:hover{color: var(--ink); border-color: var(--ink);}
.pause[aria-pressed="true"]{background: var(--ink); color: var(--ivory); border-color: var(--ink);}
.paused .rot span,.paused .cue span{animation-play-state: paused;}
@media (prefers-reduced-motion: reduce){.sp-lock path{animation: none; stroke-dashoffset: 0;}.pause{display: none;}}
html.no-gsap .mission{height: auto;}
html.no-gsap .mstage{position: static; height: auto;}
html.no-gsap .mission{--w: 1;}
html.no-gsap .mtext .w{opacity: 1;}
html.no-gsap .mnote{opacity: .92; transform: none;}
html.no-gsap .mscene .mpath{stroke-dashoffset: 0;}
html.no-gsap .sp-labs{opacity: 1; transform: none; animation: none;}
html.no-gsap .sp-lock circle{opacity: 1; animation: none;}
html.no-gsap .mscene .mpath{stroke-dashoffset: 0;}
html.no-gsap .mscene .hglow{opacity: 1;}
html.no-gsap .stat{height: auto; padding: 96px 0;}
html.no-gsap .sstage{position: static; height: auto;}
html.no-gsap .story{height: auto;}
html.no-gsap .nstage{position: static; height: auto; padding: 56px 0;}
html.no-gsap .rstep{opacity: 1;}
html.no-gsap .rstep p{max-height: none; opacity: 1; margin-top: 8px;}
html.no-gsap .sp:first-child{opacity: 1; transform: none;}
html.no-gsap .incs,html.no-gsap .plamps .lamp{opacity: 1;}
html.no-gsap .pmap .walker{opacity: 1;}
html.no-gsap .sp-lock path{animation: none; stroke-dashoffset: 0;}
html.no-gsap .pause{display: none;}
:root{--display-b: 'Bricolage Grotesque', 'Avenir Next', sans-serif;}
.splash::after,.hero2::after,.stat::after,.close::after,.get::after{content: none;}
.nav{background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; height: 64px; pointer-events: none; box-shadow: none !important;}
.nav .wrap{pointer-events: auto; width: min(1140px, 100% - 24px); height: 48px; margin: 8px auto 0; padding: 0 6px 0 20px; border-radius: 999px; background: color-mix(in srgb, var(--ivory) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: 0 14px 34px -20px rgba(0,0,0,.55);}
.nav ul{font-size: .9rem;}
.nav .btn.contact{min-height: 36px; padding: 0 18px; font-size: .88rem;}
.brand{gap: 10px;}
.hd-lock{height: 19px;}
.brand .lbs{font: 600 .66rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 5px 8px 4px 9px; border: 1px solid var(--rule); border-radius: 999px;}
@media (max-width: 1000px){.nav ul{top: 64px; left: 12px; right: 12px; border: 1px solid var(--rule); border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); background: var(--paper);}.nav .wrap{padding-right: 6px;}}
.sp-labs{font-size: clamp(.78rem, .5rem + 1.05vw, 1.55rem); letter-spacing: .42em; margin-bottom: clamp(8px, 1.4vw, 20px);}
.hero2{background: radial-gradient(70% 60% at 50% 36%, #173831 0, #0C1816 72%);}
.hero2 h1{font-family: var(--display-b); font-weight: 700; letter-spacing: -.045em; line-height: .94;}
.hero-city{position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; z-index: -1;}
.hero-city .trace,.hero-city .trace-glow{fill: none; stroke: var(--safe); stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: draw 4s .8s cubic-bezier(.5,0,.2,1) forwards;}
.hero-city .trace{stroke-width: 3;}
.hero-city .trace-glow{stroke-width: 12; opacity: .16;}
@media (prefers-reduced-motion: reduce){.hero-city .trace,.hero-city .trace-glow{animation: none; stroke-dashoffset: 0;}}
.mission{background: #0C1816; color: #F4F1E9;}
.mtext{font-family: var(--display-b); font-weight: 600; letter-spacing: -.04em; line-height: 1.02;}
.mscene{max-height: 54svh;}
.mscene .gnd{fill: #162B27;}
.mscene .gnd2{fill: #12241F;}
.mscene .tree path,.mscene .tree circle{stroke: none;}
.mscene .tree path{stroke: #0F221D; stroke-width: 5; stroke-linecap: round; fill: none;}
.mscene .tree circle{fill: #0F221D; opacity: 1;}
.mscene .lpole{stroke: #3F5D56; stroke-width: 4; stroke-linecap: round; fill: none; opacity: 1;}
.mscene .lhead{fill: #3F5D56;}
.mscene .lampg{opacity: 1;}
.mscene .beam{fill: url(#beamGrad);}
.mscene .hbody{fill: #1B332D;}
.mscene .hroof{fill: #25413B;}
.mscene .mull{stroke: #1B332D; stroke-width: 3; fill: none;}
.mscene .porch{fill: var(--lamp); opacity: calc(.25 + var(--w) * .75);}
.mscene .shrub{fill: #1F4136;}
.mscene .spill{fill: url(#beamGrad); opacity: var(--w);}
.mscene .mglow{stroke: var(--safe); stroke-width: 12; fill: none; stroke-linecap: round; opacity: .16; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p));}
.mscene .mwalker{fill: #F4F1E9; stroke: none;}
.mscene .win,.mscene .door{fill: var(--lamp); opacity: calc(.1 + var(--w) * .9);}
.mscene .hglow{opacity: calc(var(--w) * .95);}
@media (prefers-reduced-motion: reduce){.mscene .lampg{opacity: 1;}.mission{--w: 1;}}
.stat{height: 170svh;}
.s3{display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(24px, 5vh, 60px); align-items: start; text-align: center;}
.s .snum{display: block; font: 500 clamp(3.4rem, 1rem + 8.2vw, 9.4rem)/.95 var(--display-b); letter-spacing: -.05em; font-variant-numeric: tabular-nums;}
.s p{margin: 16px auto 0; color: #B7C4BF; font-size: clamp(1rem, .95rem + .45vw, 1.35rem); line-height: 1.4; max-width: 14em;}
.stat .ssrc{margin: clamp(28px, 6vh, 64px) auto 0; max-width: 46em; text-align: center;}
@media (max-width: 640px){.s3{grid-template-columns: 1fr; gap: 26px;}.s .snum{font-size: clamp(3rem, 15vw, 4.8rem);}.s p{max-width: 17em; font-size: 1rem;}}
.navintro{padding-bottom: clamp(24px, 4vw, 48px);}
.navintro .head{margin-bottom: 28px;}
.ncta{justify-content: center; margin-top: 0;}
.srail{isolation: isolate;}
.srail::before,.srail::after{z-index: -1;}
.rstep{opacity: 1;}
.rstep:not(.on) h3{opacity: .6;}
.rn{background: var(--ivory);}
.close{padding-top: clamp(40px, 6vw, 80px);}
.nav{position: fixed; top: 0; left: 0; right: 0;}
body:not(.home){padding-top: 64px;}
.splash{min-height: 100svh;}
.nav .wrap{background: color-mix(in srgb, var(--ivory) 90%, transparent);}
.hd-lock{height: 24px;}
.brand{gap: 12px;}
.mcontent{align-content: start; padding-top: clamp(20px, 6svh, 72px);}
.mcontent .wrap{position: relative; z-index: 2;}
.mscene{max-height: 40svh; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);}
@media (max-width: 700px){.mscene{max-height: 30svh;}.mcontent{padding-top: 16px;}.mtext{font-size: clamp(1.7rem, 8vw, 2.6rem);}}
.mscene .house .hbody{fill: #1B332D; stroke: none;}
.mscene .house .hroof{fill: #25413B; stroke: none;}
.mscene .house .mull{fill: none; stroke: #1B332D; stroke-width: 3; opacity: 1;}
.mscene .house .win,.mscene .house .door{fill: var(--lamp); stroke: none; opacity: calc(.1 + var(--w) * .9);}
.mscene .house .spill{fill: url(#beamGrad); stroke: none; opacity: var(--w);}
.mq-track span{color: rgba(244,241,233,.22); -webkit-text-stroke: 0;}
.mq-track span:nth-child(even){color: #F4F1E9;}
@media (max-width: 900px){.mscene{--sw: 190vw; width: var(--sw); max-width: none; max-height: none; left: 0; right: auto; -webkit-mask-image: none; mask-image: none; will-change: transform;}}
@media (max-width: 560px){.mscene{--sw: 250vw;}}

/* Static mode (no GSAP, reduced motion, or a very short window): the street fits the screen and shows its finished state */
html.no-gsap .mscene{width:100%;max-width:100%;max-height:none;left:0;right:0;transform:none!important;position:relative;-webkit-mask-image:none;mask-image:none}
html.no-gsap .mission{--p:1;--w:1}
html.no-gsap .mcontent{position:relative;padding-top:clamp(24px,6vh,64px)}
html.no-gsap .mstage{overflow:hidden}
html.no-gsap .mwalker{display:none}
@media (max-height: 520px) { .hero2 h1 { font-size: clamp(2.6rem, 17svh, 4.6rem); } .hero2 { padding: 88px 0 56px; min-height: auto; } .splash { min-height: 100svh; } }

/* =====================================================================
   v7. Night palette, floating header that waits for the intro, a city
   that lights up as you scroll, and the rebuilt lower half.
   ===================================================================== */
:root{--lamp2:#F2B866; --display:var(--display-b); --serif:'Fraunces', Georgia, 'Times New Roman', serif;}
body.home,body.dark{
  --ivory:#0C1816; --paper:#142623; --ink:#F4F1E9; --muted:#AEBFB9; --sage:#1F3732; --rule:#25413B;
  --focus:#F6D98B; --accent-text:#F2B866; --terracotta:#F2B866;
  --map-ground:#1B2F2B; --map-street:#2C4640; --map-street-edge:#355650; --map-campus:#284A3F; --map-block:#213A35; --map-park:#24473A; --map-label:#6F8C84;
  background:var(--ivory); color:var(--ink);
}
html:has(body.home),html:has(body.dark){background:#0C1816;}
.home .btn,.dark .btn,.home .btn.on-dark,.dark .btn.on-dark{background:var(--lamp); color:#18261F; border-color:var(--lamp);}
.home .btn.ghost,.dark .btn.ghost,.home .btn.ghost-dark,.dark .btn.ghost-dark{background:transparent; color:var(--ink); border-color:color-mix(in srgb,var(--ink) 42%,transparent);}
.home .btn:hover,.dark .btn:hover{box-shadow:0 10px 30px -10px rgba(246,217,139,.55);}
.home .btn.ghost:hover,.dark .btn.ghost:hover,.home .btn.ghost-dark:hover,.dark .btn.ghost-dark:hover{border-color:var(--lamp); box-shadow:none;}
.home .nav .wrap,.dark .nav .wrap{background:rgba(13,26,24,.74); border-color:rgba(244,241,233,.14);}
.nav ul a.on,.nav ul a[aria-current="page"]{border-color:var(--lamp);}
.progress i{background:var(--lamp);}
em{font-style:normal;}
h2 em,.c-cta h2 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.015em; color:var(--lamp);}
.tlink{color:var(--lamp); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; padding:10px 4px;}
.tlink:hover{color:#fff;}

/* The header waits until the opening scene is behind you (home only). No script, no wait. */
.js body.home .nav .wrap{transform:translateY(-150%); opacity:0; visibility:hidden; transition:transform .7s var(--ease-out), opacity .5s, visibility 0s .7s;}
.js body.home .nav.show .wrap{transform:none; opacity:1; visibility:visible; transition-delay:0s;}

/* Floating download hook */
.getfab{position:fixed; right:16px; bottom:16px; z-index:30; display:inline-flex; align-items:center; min-height:46px; padding:0 20px; border-radius:999px; background:var(--lamp); color:#18261F; font:600 .95rem/1 var(--body); text-decoration:none; box-shadow:0 16px 36px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.15); opacity:0; visibility:hidden; transform:translateY(18px); transition:opacity .4s, transform .5s var(--ease-out), visibility 0s .5s;}
.getfab.show{opacity:1; visibility:visible; transform:none; transition-delay:0s;}
.getfab:hover{background:#fff;}
@media (max-width:560px){.getfab{right:12px; bottom:12px; min-height:42px; padding:0 16px; font-size:.9rem;}}

/* ---- Screen one: the name draws one letter at a time, then LABS rises in.
   SEQUENTIAL DRAW. To go back to the overlapping draw and the plain LABS fade, delete from here to the END SEQUENTIAL marker. ---- */
.sp-labs{font-size:clamp(1.05rem, .6rem + 1.55vw, 2.2rem); letter-spacing:.42em; opacity:1; animation:none;}
.sp-labs > span[aria-hidden]{display:inline-flex;}
.sp-labs i{font-style:normal; display:inline-block; opacity:0; transform:translateY(.7em); filter:blur(6px); animation:labsIn .6s cubic-bezier(.2,.8,.2,1) forwards;}
.sp-labs i:nth-child(1){animation-delay:1.45s;}
.sp-labs i:nth-child(2){animation-delay:1.53s;}
.sp-labs i:nth-child(3){animation-delay:1.61s;}
.sp-labs i:nth-child(4){animation-delay:1.69s;}
@keyframes labsIn{to{opacity:1; transform:none; filter:none;}}
.sp-lock path{animation-duration:.5s;}
.sp-lock g > g:nth-of-type(1) path{animation-delay:.1s;}
.sp-lock g > g:nth-of-type(2) path{animation-delay:.3s;}
.sp-lock g > g:nth-of-type(3) path{animation-delay:.5s;}
.sp-lock g > g:nth-of-type(4) path{animation-delay:.7s;}
.sp-lock g > g:nth-of-type(5) path{animation-delay:.9s;}
.sp-lock g > g:nth-of-type(6) path{animation-delay:1.1s;}
.sp-lock g > g:nth-of-type(7) path{animation-delay:1.3s;}
.sp-lock circle{animation-delay:.45s; animation-duration:.5s;}
@media (prefers-reduced-motion: reduce){.sp-labs i{opacity:1; transform:none; filter:none; animation:none;}}
html.no-gsap .sp-labs i{opacity:1; transform:none; filter:none; animation:none;}
/* END SEQUENTIAL */

/* ---- Screen two: taglines ---- */
.rot{word-spacing:.1em; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.35rem, 1rem + 1.7vw, 2.4rem); letter-spacing:-.012em; line-height:1.25; height:1.5em; margin-top:26px; color:#F4F1E9;}
.rot span{animation-name:rot2;}
@keyframes rot2{0%{opacity:0; transform:translateY(55%); filter:blur(6px);} 4%{opacity:1; transform:none; filter:none;} 22%{opacity:1; transform:none; filter:none;} 26%{opacity:0; transform:translateY(-55%); filter:blur(6px);} 100%{opacity:0;}}
.rot-bar{display:flex; justify-content:center; gap:8px; margin-top:18px;}
.rot-bar i{position:relative; width:34px; height:3px; border-radius:3px; background:rgba(244,241,233,.16); overflow:hidden;}
.rot-bar i::after{content:""; position:absolute; inset:0; background:var(--lamp); transform:scaleX(0); transform-origin:0 50%; animation:tick 16s linear infinite;}
.rot-bar i:nth-child(2)::after{animation-delay:4s;}
.rot-bar i:nth-child(3)::after{animation-delay:8s;}
.rot-bar i:nth-child(4)::after{animation-delay:12s;}
@keyframes tick{0%{transform:scaleX(0);} 24%{transform:scaleX(1);} 26%,100%{transform:scaleX(0);}}
.paused .rot-bar i::after{animation-play-state:paused;}
@media (max-width:700px){.rot{height:2.7em;}}
@media (prefers-reduced-motion: reduce){.rot span{animation:none; filter:none;}.rot-bar i::after{animation:none;}.rot-bar i:first-child::after{transform:none;}}
.hero2 .cta-row{margin-top:30px;}

/* ---- Screen three: the whole city comes on with the scroll ---- */
.mission{height:340svh;}
.mscene .cglow{opacity:calc(var(--w) * .9);}
.mscene .wins rect{transition:none;}
html.no-gsap .mscene .cglow{opacity:.9;}
@media (prefers-reduced-motion: reduce){.mscene .cglow{opacity:.9;}}

/* ---- Screen four: three numbers ---- */
.stat{height:190svh; background:radial-gradient(70% 60% at 50% 40%, rgba(242,184,102,.07), transparent 70%), #0C1816;}
.stag{display:block; margin-bottom:16px; font:600 .72rem/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--lamp);}
.s .snum{background:linear-gradient(180deg,#F4F1E9 38%,#F2B866 120%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding-bottom:.06em;}
.s p{max-width:16em; font-size:clamp(.98rem,.92rem + .4vw,1.2rem);}
@media (min-width:641px){.s + .s{border-left:1px solid rgba(244,241,233,.1); padding-left:clamp(16px,3vw,48px);}}
.ssrc{line-height:1.6;}
html.no-gsap .stat{height:auto;}

/* ---- Nuvella Navigation ---- */
.navintro{padding-top:clamp(88px,12vw,170px); padding-bottom:clamp(8px,2vw,24px); background:radial-gradient(60% 70% at 50% 0%, rgba(242,184,102,.1), transparent 70%);}
.navintro .head{max-width:50rem;}
.navintro h2{font-size:clamp(2.8rem, 1.2rem + 7vw, 7rem); font-weight:700; letter-spacing:-.045em; line-height:.95;}
.navintro .head p{max-width:30em; margin:24px auto 0; font-size:clamp(1.1rem,1rem + .5vw,1.4rem); line-height:1.5; text-wrap:balance; color:var(--muted);}
.ncta{align-items:center; gap:10px 18px;}
.story{background:linear-gradient(180deg, transparent, rgba(31,55,50,.4) 25%, rgba(31,55,50,.4) 75%, transparent);}
.phone-wrap{position:relative; isolation:isolate;}
.phone-wrap::before{content:""; position:absolute; inset:-14% -34%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgba(242,184,102,.2), transparent);}
.srail::after{background:var(--lamp);}
.rstep.on .rn,.rstep.done .rn{background:var(--lamp); color:#18261F; border-color:var(--lamp);}
.rn{background:var(--ivory);}
.esc{background:var(--lamp); color:#18261F;}
.pstart{fill:#F4F1E9; stroke:#0C1816;}
@media (min-width:861px){.rstep p{max-height:none; opacity:.42; margin-top:8px; transition:opacity .5s;}.rstep.on p{opacity:1;}}
.bi{color:var(--lamp);}
.b4{background:linear-gradient(160deg,#1E4A40,#0F2A25);}
.b4 .bi{background:rgba(244,241,233,.12);}

/* ---- Closing band ---- */
.close{background:radial-gradient(70% 60% at 50% 100%, rgba(242,184,102,.16), transparent 70%), #0C1816;}
.c-cta h2{font-weight:600;}

/* ---- About ---- */
.about{background:#10211E;}
.abgrid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,96px); align-items:start;}
.abhead h2{margin-top:18px; font-size:clamp(2.4rem, 1.2rem + 4.6vw, 5.2rem); font-weight:700; letter-spacing:-.045em; line-height:.98;}
.about .prose-c{text-align:left; margin:0; max-width:none; font-size:clamp(1.05rem,1rem + .3vw,1.2rem);}
.about .prose-c p:first-child{color:var(--ink); font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem); line-height:1.45;}
.about .principles{border-top:0; gap:14px; margin-top:clamp(40px,6vw,72px); text-align:left;}
.about .principles > div,.about .principles > div + div{padding:28px; border:1px solid var(--rule); border-radius:24px; background:var(--paper); margin:0;}
.about .principles h3::before{content:""; display:block; width:30px; height:3px; border-radius:3px; background:var(--lamp); margin-bottom:16px;}
.about .fineprint{text-align:left; max-width:44em; margin:28px 0 0; font-size:.9rem;}
@media (min-width:801px){.about .principles{grid-template-columns:repeat(3,1fr);}}
@media (max-width:800px){.abgrid{grid-template-columns:1fr;}.about .principles{grid-template-columns:1fr;}}

/* ---- Get involved ---- */
.involved{background:#0C1816;}
.involved .duo{gap:14px;}
.duo .act{text-align:left; align-items:flex-start; background:var(--paper); min-height:240px;}
.act:hover{border-color:var(--lamp);}
.act .kicker{color:var(--lamp);}
.act .go{color:var(--lamp);}
.biz{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; margin-top:14px; padding:22px 28px; border:1px solid var(--rule); border-radius:28px;}
.biz b{display:block; font:600 1.15rem/1.2 var(--display);}
.biz span{display:block; margin-top:4px; color:var(--muted); font-size:.95rem;}

/* ---- Our team ---- */
.team{background:#10211E;}
.team .head{margin-bottom:clamp(28px,4vw,48px);}
.team h2{font-size:clamp(2.6rem, 1.2rem + 5vw, 5.6rem); font-weight:700; letter-spacing:-.045em;}
.tgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 340px)); justify-content:center; gap:16px;}
.member{display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; padding:34px 28px 28px; border:1px solid var(--rule); border-radius:30px; background:var(--paper); transition:transform .35s var(--ease-out), border-color .3s;}
.member:hover{transform:translateY(-4px); border-color:var(--lamp);}
.member .portrait{width:132px; box-shadow:0 0 0 4px var(--paper), 0 0 0 5.5px rgba(246,217,139,.7);}
.member:hover .ov,.member:focus-visible .ov{opacity:1;}
.member:hover .ov b,.member:focus-visible .ov b{transform:none;}
.member:hover .portrait img{transform:scale(1.06);}
.member .portrait::after{display:none;}
.member h3{margin-top:24px; font-size:1.8rem;}
.member .role{margin-top:4px; color:var(--lamp); font-weight:600;}
.member .bio{margin-top:14px; max-width:26em; color:var(--muted); font-size:1rem;}
.member .go{margin-top:auto; padding-top:22px; color:var(--lamp); font-weight:600;}
.member .go::after{content:" \2192";}
.member.join{background:transparent; border-style:dashed; justify-content:center;}
.plus{display:grid; place-items:center; width:132px; height:132px; border-radius:50%; border:1.5px dashed var(--rule); color:var(--lamp); font:300 3.4rem/1 var(--display);}

/* ---- Download band and footer ---- */
.get.band{background:radial-gradient(90% 140% at 50% 130%, rgba(242,184,102,.3), transparent 62%), #12302B; padding:clamp(88px,12vw,170px) 0;}
.get h2{font-size:clamp(2.6rem, 1.2rem + 5.6vw, 6rem); font-weight:700; letter-spacing:-.045em; max-width:12em;}
.get p{color:#C9D6D1;}
.foot{background:#0A1513;}

/* ---- Personal site ---- */
.dark .ali-hero .wrap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:start;}
.ali-hero img.ali-pic{--pic:clamp(96px,13vw,148px); width:var(--pic); height:var(--pic); max-width:none; align-self:start; justify-self:auto; object-fit:cover; object-position:50% 22%; border-radius:50%; transform:none; box-shadow:0 0 0 3px var(--ivory), 0 0 0 5px rgba(246,217,139,.6);}
@media (max-width:860px){.dark .ali-hero .wrap{grid-template-columns:auto minmax(0,1fr);}.ali-hero img.ali-pic{order:0; max-width:none;}}
@media (max-width:640px){.dark .ali-hero .wrap{grid-template-columns:1fr;}.ali-hero img.ali-pic{--pic:104px;}}
.c-cta h2{max-width:18ch;}
.c-cta p,.get p,.about .prose-c p{text-wrap:pretty;}
.c-cta p{text-wrap:balance;}
.get p,.member .bio{text-wrap:balance;}
.story{overflow-x:clip;}
@media (max-width:860px){.phone-wrap::before{inset:-8% -12%;}}
@media (max-width:860px){.sheet{min-height:92px; padding:12px 14px 14px;}.sp b{font-size:1.2rem;}.sp p{font-size:.72rem;}}

/* =====================================================================
   v8. Header without the bubble, a skyline that fills the screen, a
   calmer palette with no hard seams, plainer lists instead of cards.
   ===================================================================== */
.brand .lbs{border:0; border-radius:0; padding:5px 0 0; letter-spacing:.26em; color:var(--muted);}
.slm{padding-bottom:.14em; margin-bottom:-.14em;}

/* Goal screen */
.mcontent .kicker{color:var(--lamp); opacity:1;}
.mtext .w.hl{color:var(--lamp);}
@media (min-width:901px){.mission .mscene{left:0; right:0; width:100%; height:68svh; max-height:none; -webkit-mask-image:none; mask-image:none;}}
@media (max-width:900px){.mscene{--sw:max(190vw, 155svh);}}
@media (max-width:560px){.mscene{--sw:max(250vw, 155svh);}}
html.no-gsap .mscene{height:auto;}

/* Statistics */
.s .snum{background:none; -webkit-text-fill-color:currentColor; color:var(--lamp); padding-bottom:0;}
.stag{color:var(--muted);}

/* No hard seams between sections: one ground, soft light in the middle of a band */
.hero2{background:radial-gradient(70% 60% at 50% 36%, #173831 0, #0C1816 72%);}
.splash,.mission{background:#0C1816;}
.stat{background:radial-gradient(60% 55% at 50% 45%, rgba(242,184,102,.05), transparent 70%);}
.close{background:radial-gradient(60% 60% at 50% 62%, rgba(242,184,102,.09), transparent 70%);}
.navintro{background:none;}
.about,.involved,.team,.proof{background:transparent;}
.get.band{background:radial-gradient(70% 80% at 50% 72%, rgba(242,184,102,.15), transparent 70%);}
.foot{background:transparent; border-top:1px solid var(--rule);}
.phone-wrap::before{display:none;}

/* Plain lists in place of boxed cards */
.about .principles{display:grid; gap:0; margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--rule); text-align:left;}
.about .principles > div,.about .principles > div + div{padding:26px 28px 6px 0; border:0; border-radius:0; background:none; margin:0;}
.about .principles > div + div{padding-left:28px; border-left:1px solid var(--rule);}
.about .principles h3::before{content:none;}
@media (max-width:800px){.about .principles > div + div{padding-left:0; border-left:0; border-top:1px solid var(--rule); margin-top:20px; padding-top:20px;}}
.proof{padding-top:clamp(24px,4vw,56px);}
.proof .head{max-width:46rem;}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule);}
.proof-grid > div{padding:26px 24px 8px 0;}
.proof-grid > div + div{padding-left:24px; border-left:1px solid var(--rule);}
.proof-grid p{margin-top:10px; color:var(--muted); font-size:.98rem;}
.proof-grid a{color:var(--lamp);}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr 1fr;}.proof-grid > div,.proof-grid > div + div{padding:22px 16px 8px 0; border-left:0; border-top:1px solid var(--rule);}.proof-grid{border-top:0;}}
@media (max-width:560px){.proof-grid{grid-template-columns:1fr;}}

/* Personal site */
.tl li::before{content:none;}
.tl > li::before{content:""; position:absolute; left:-36px; top:.55em; width:14px; height:14px; border-radius:50%; background:var(--ivory); border:3px solid var(--lamp);}
.tl ul li{position:static;}
@media (min-width:900px){
  .ali main > section:not(.ali-hero):not(.get) > .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px,5vw,80px); align-items:start;}
  .ali main > section:not(.ali-hero):not(.get) > .wrap > .head{grid-column:1; grid-row:1 / span 6; position:sticky; top:96px; text-align:left; margin:0;}
  .ali main > section:not(.ali-hero):not(.get) > .wrap > :not(.head){grid-column:2;}
}
.ali .head{text-align:left; margin-inline:0;}
.ali .head h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);}
.ali .prose{max-width:none;}
h2 > div[aria-hidden="true"][style*="overflow"]{padding-bottom:.18em; margin-bottom:-.18em;}

/* =====================================================================
   v9. Intro owned by GSAP (CSS draw kept as the no-script fallback),
   slower scenes, one flat ground, fewer decorative tells.
   ===================================================================== */
/* No-script / fallback draw: hold each stroke invisible until its turn, so the round cap never flashes at the path start */
@keyframes wmDraw2{0%{stroke-dashoffset:1; opacity:0;} 1%{opacity:1;} 100%{stroke-dashoffset:0; opacity:1;}}
.sp-lock path{animation-name:wmDraw2; animation-fill-mode:both;}
.sp-lock circle{animation-fill-mode:both;}
/* With script, GSAP runs the intro and these start hidden */
.js .sp-lock path,.js .sp-lock circle{animation:none; opacity:0;}
.js .sp-labs i{animation:none; opacity:0;}
.js .cue{opacity:0;}
html.no-gsap .sp-lock path,html.no-gsap .sp-lock circle{opacity:1; stroke-dashoffset:0; animation:none;}
html.no-gsap .sp-labs i,html.no-gsap .cue{opacity:1;}

/* Scenes breathe: longer pins so nothing rushes past */
.mission{height:420svh;}
.stat{height:270svh;}
.story{height:470svh;}
html.no-gsap .mission,html.no-gsap .stat,html.no-gsap .story{height:auto;}
.mstage::after{content:""; position:absolute; left:0; right:0; bottom:0; height:9%; background:linear-gradient(transparent,#0C1816); pointer-events:none;}

/* One flat ground, no glow blobs, no hairline borders between bands */
.stat,.close,.get.band,.navintro,.hero2{background-image:none;}
.hero2{background:radial-gradient(70% 55% at 50% 38%, #163630 0, #0C1816 70%);}
.stat,.close,.get.band{background:none;}
.marquee{border-block:0;}
.foot{border-top:0;}
.mscene .gnd{fill:#13271F;}
.mscene .gnd2{fill:#0F1F1A;}

/* Fewer tells: accent words stay in the same typeface, bento loses its icon tiles */
h2 em,.c-cta h2 em{font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; color:var(--lamp);}
.bi{display:none;}
.bt{background:transparent; border-color:var(--rule);}
.b4{background:#12302A; border-color:transparent;}
.member.join{background:transparent;}
.mtext .w.hl{color:var(--lamp);}
.rot-bar{display:none;}

/* v9 fixes: keep the N's arrow cut-out (mask shapes must stay opaque), and centre the three statistics */
.js .sp-lock mask path,.js .sp-lock mask rect{opacity:1; animation:none;}
.s3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;}
.s{padding-inline:clamp(14px,2.4vw,40px);}
@media (min-width:641px){.s + .s{padding-left:clamp(14px,2.4vw,40px); border-left:1px solid rgba(244,241,233,.1);}}
@media (max-width:640px){.s3{grid-template-columns:1fr; gap:26px;}.s{padding-inline:0;}}

/* Story: rail and phone sit as one centred pair */
@media (min-width:861px){
  .nstage{grid-template-columns:minmax(0,30em) auto; justify-content:center; gap:clamp(48px,8vw,128px); width:min(1160px,100% - 40px);}
  .srail{justify-self:end; max-width:none; width:100%;}
}

/* =====================================================================
   v10. Product page in the same editorial grid, squarer controls,
   dusk behind the city, page-to-page transitions.
   ===================================================================== */
body.home,body.dark{--ivory:#0C1816; --paper:#112220; --ink:#F3EFE6; --muted:#A9BBB5; --rule:#233B36;}
html:has(body.home),html:has(body.dark){background:#0C1816;}
.hero2{background:radial-gradient(72% 56% at 50% 38%, #12373A 0, #0C1816 70%);}
.mstage{background:radial-gradient(110% 56% at 50% 64%, rgba(16,56,66,.55), transparent 74%);}

/* Squarer controls, less pill */
.btn,.getfab{border-radius:12px;}
.nav .wrap{border-radius:18px;}
.nav .btn.contact{border-radius:10px;}
.act,.member,.biz,.member.join{border-radius:16px;}

/* Feature strip on the home page */
.strip{padding:clamp(24px,4vw,56px) 0 clamp(48px,7vw,96px);}
.strip-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--rule);}
.strip-grid > div{padding:26px 24px 8px 0;}
.strip-grid > div + div{padding-left:24px; border-left:1px solid var(--rule);}
.strip-grid p{margin-top:10px; color:var(--muted); font-size:.98rem;}
.strip-more{margin-top:28px; text-align:center;}
@media (max-width:900px){.strip-grid{grid-template-columns:1fr 1fr; border-top:0;}.strip-grid > div,.strip-grid > div + div{padding:22px 16px 8px 0; border-left:0; border-top:1px solid var(--rule);}}
@media (max-width:560px){.strip-grid{grid-template-columns:1fr;}}

/* Product page: two-column editorial sections, hairline rows */
.split-s{padding:clamp(48px,7vw,104px) 0;}
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start;}
.split .head{margin:0; text-align:left; max-width:none; position:sticky; top:96px;}
.split .head h2{font-size:clamp(2rem,1.2rem + 3.4vw,4rem); font-weight:700; letter-spacing:-.04em; line-height:1;}
.split .head .area{margin-top:18px; color:var(--muted); max-width:24em;}
.rows > div{padding:24px 0; border-top:1px solid var(--rule);}
.rows > div:last-child{border-bottom:1px solid var(--rule);}
.rows h3{font-size:1.3rem;}
.rows p{margin-top:8px; max-width:38em; color:var(--muted);}
.rows a{color:var(--lamp);}
@media (max-width:860px){.split{grid-template-columns:1fr;}.split .head{position:static;}}
.origin-s{padding:clamp(40px,6vw,88px) 0;}
.dark .hero{padding-top:clamp(32px,5vw,72px);}

/* Page to page: the browser cross-fades documents, the header stays put */
@view-transition{navigation:auto;}
.nav{view-transition-name:nav;}
::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:vtIn .6s cubic-bezier(.16,1,.3,1) both;}
@keyframes vtOut{to{opacity:0; transform:translateY(-10px);}}
@keyframes vtIn{from{opacity:0; transform:translateY(18px);}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none;}}
.home .nav .wrap,.dark .nav .wrap{background:rgba(12,24,22,.9);}

/* v11. Footer reads as its own plate; magnetic buttons never fight CSS transitions or hover transforms */
.foot{background:#0F201D; border-top:1px solid #1D332E;}
.mag{transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);}
.mag:hover,.mag:active{transform:none;}
.btn.mag span[aria-hidden]{margin-left:10px; display:inline-block; transition:transform .3s var(--ease-out);}
.btn.mag:hover span[aria-hidden]{transform:translateX(4px);}
.strip-more{margin-top:34px; display:flex; justify-content:center;}

/* v12. Chosen opening: a light bar crosses the whole screen and uncovers the name behind it. */
.splash .sweep{position:absolute; top:0; bottom:0; left:0; width:2px; background:linear-gradient(180deg,transparent,#F6D98B 18%,#F6D98B 82%,transparent); opacity:0; visibility:hidden; z-index:3; pointer-events:none;}
.splash .sweep::before{content:""; position:absolute; top:0; bottom:0; right:2px; width:min(22vw,260px); background:linear-gradient(90deg,transparent,rgba(246,217,139,.16)); }
.js .sp-lock path,.js .sp-lock circle{animation:none; opacity:1;}
.js .sp-lock mask path,.js .sp-lock mask rect{opacity:1;}
.js .sp-labs i{animation:none; opacity:1; transform:none; filter:none;}
.js .splash .lockup{clip-path:inset(-12% 100% -12% -4%);}
html.no-gsap .splash .lockup{clip-path:none;}
html.no-gsap .splash .sweep{display:none;}
html.no-gsap .cue{opacity:1;}
.js .sp-lock path{stroke-dashoffset:0;}

/* v13. Route card toggle readable on the night palette */
.dark .seg{background:#1B3430;}
.dark .seg button{color:var(--ink);}
.dark .seg button[aria-pressed="true"]{background:var(--lamp); color:#17261F;}

/* v14. Company philosophy */
.philo{padding:clamp(40px,6vw,80px) 0 clamp(8px,2vw,24px); border-top:1px solid var(--rule);}
.philo .kicker{color:var(--lamp);}
.philo p{margin-top:20px; max-width:16em; font:700 clamp(2.4rem,1.2rem + 5vw,5.6rem)/.98 var(--display); letter-spacing:-.045em; text-wrap:balance;}
.philo p em{font-style:normal; color:var(--lamp);}
.philo-note{display:block; margin-top:22px; max-width:34em; color:var(--muted); font-size:1.1rem;}
.philo-s{padding:clamp(24px,4vw,56px) 0;}
.about .philo{margin-top:clamp(40px,6vw,72px);}
.about .principles{margin-top:clamp(28px,4vw,48px);}

/* v15. The belief gets its own screen between the hero and the goal */
.philos{position:relative; height:300svh;}
.pstage{position:sticky; top:64px; height:calc(100svh - 64px); display:grid; align-content:center;}
.philos .kicker{color:var(--lamp); opacity:1;}
.philos h2{margin-top:22px; max-width:13em; font:700 clamp(2.6rem,1rem + 6.4vw,7.4rem)/.96 var(--display); letter-spacing:-.045em; text-wrap:balance;}
.philos h2 .w{opacity:.2;}
.philos h2 .w.hl{color:var(--lamp);}
.plines{margin-top:clamp(24px,5vh,56px); display:grid; gap:6px; max-width:34em;}
.pl{font:500 clamp(1.15rem,.95rem + .9vw,1.7rem)/1.35 var(--body); color:var(--muted);}
.pl-last{color:var(--ink); margin-top:10px;}
html.no-gsap .philos{height:auto; padding:clamp(72px,10vw,140px) 0;}
html.no-gsap .pstage{position:static; height:auto;}
html.no-gsap .philos h2 .w{opacity:1;}
@media (prefers-reduced-motion:reduce){.philos{height:auto; padding:96px 0;}.pstage{position:static; height:auto;}.philos h2 .w{opacity:1;}}