/* =========================================================
   YXE WEB STUDIOS | ABOUT
   Two scroll-driven sections, standalone stylesheet.
   ========================================================= */
:root{--navy:#030b13;--white:#f7fbff;--sky:#42bdff;--cyan:#a8e7ff;--ease:cubic-bezier(.19,1,.22,1);--header:76px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{margin:0;overflow-x:clip;background:var(--navy);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;display:block}::selection{background:var(--sky);color:var(--navy)}
.skip-link{position:fixed;top:-100px;left:15px;z-index:11000;background:#fff;color:#001625;padding:12px}.skip-link:focus{top:12px}

/* ONE YXE NAVIGATION DESIGN — keeps the site's established markup */
.site-header{position:fixed;inset:0 0 auto;z-index:9000;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,3.5vw,68px);background:rgba(3,11,19,.97);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff}
.site-header .brand{display:inline-flex;align-items:center;flex:0 0 auto}.site-header .brand img{width:190px;height:auto;max-height:56px;object-fit:contain}
.site-header nav{display:flex;align-items:center;gap:clamp(12px,1.65vw,30px);min-width:0}
.site-header nav>a:not(.header-cta),.site-header .nav-dropdown-toggle{font-family:inherit;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;white-space:nowrap;color:#e9f1f8;transition:color .2s}
.site-header nav>a:hover,.site-header .nav-dropdown-toggle:hover,.site-header [aria-current="page"]{color:var(--sky)!important}
.site-header .header-cta{display:inline-flex;align-items:center;gap:17px;border:1px solid rgba(255,255,255,.38);border-radius:50px;padding:13px 18px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
.site-header .header-cta:hover{background:#fff;color:var(--navy)}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:8px;padding:0;margin:0;border:0;background:none;appearance:none}
.dropdown-arrow{font-size:9px;letter-spacing:0;transition:transform .3s}
.nav-dropdown:hover .dropdown-arrow,.nav-dropdown.is-open .dropdown-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 19px);left:50%;width:250px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(5,12,20,.97);box-shadow:0 20px 55px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .3s,transform .3s,visibility .3s;z-index:100}
.nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-21px;height:21px}
.site-header .nav-dropdown-menu a{display:block;padding:12px 14px;color:#e9f1f8;font-size:12px;text-decoration:none;letter-spacing:0;text-transform:none;border-radius:7px;white-space:normal}
.site-header .nav-dropdown-menu a:hover,.site-header .nav-dropdown-menu a:focus-visible{background:rgba(0,166,251,.12);color:#00a6fb}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mobile-menu-toggle{display:none}

/* SECTION 01 — SCROLL-TIMED FIXED SCENE */
.about-origin{position:relative;height:330svh;min-height:1850px;background:#061523}
.origin-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:0;isolation:isolate;overflow:hidden}
.origin-photo,.origin-wash,.origin-grid{position:absolute;inset:0;pointer-events:none}
.origin-photo{z-index:-3;inset:-8%;background:url('/assets/images/hero-city.webp') center / cover no-repeat;transform:scale(var(--photo-scale,1.08)) translate3d(0,var(--photo-shift,0%),0);filter:saturate(.85)}
.origin-wash{z-index:-2;background:linear-gradient(90deg,rgba(2,10,20,.94),rgba(3,15,28,.67) 58%,rgba(1,8,20,.52)),linear-gradient(0deg,rgba(3,10,20,.8),transparent 45%)}
.origin-grid{z-index:-1;opacity:.24;background-image:linear-gradient(rgba(99,202,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(99,202,255,.13) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,transparent,black)}
.origin-topline{position:absolute;left:clamp(24px,6vw,105px);right:clamp(24px,6vw,105px);top:clamp(28px,4.5vh,60px);display:flex;justify-content:space-between;gap:20px;color:#c4d6e6;font-size:10px;font-weight:700;letter-spacing:.2em;z-index:2}
.origin-content{position:absolute;left:clamp(24px,9vw,170px);right:clamp(24px,8vw,140px);top:50%;transform:translateY(-47%);z-index:2}
.eyebrow{margin:0 0 24px;color:var(--sky);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.origin-content h1{margin:0;max-width:1400px;font-size:clamp(57px,7.7vw,145px);letter-spacing:-.083em;line-height:.96;font-weight:750}
.origin-content h1 em{font-style:normal;color:var(--sky)}
.origin-story{position:relative;margin-top:clamp(40px,6vh,90px);height:110px;max-width:950px}
.origin-line{position:absolute;inset:0;margin:0;font-size:clamp(20px,2.4vw,39px);font-weight:400;letter-spacing:-.04em;line-height:1.3;opacity:0;transform:translate3d(0,38px,0);transition:opacity .48s,transform .65s var(--ease);pointer-events:none}
.origin-line strong{font-weight:650;color:var(--cyan)}.origin-line.is-active{opacity:1;transform:translate3d(0,0,0)}
.origin-watermark{position:absolute;right:-.04em;bottom:-.22em;z-index:0;color:rgba(167,224,255,.07);font-size:clamp(250px,37vw,700px);font-weight:900;letter-spacing:-.14em;line-height:1;pointer-events:none;transform:translate3d(var(--mark-shift,0px),0,0)}
.origin-bottom{position:absolute;bottom:clamp(24px,4.5vh,52px);left:clamp(24px,6vw,105px);right:clamp(24px,6vw,105px);display:flex;align-items:center;gap:22px;color:#c0d2e2;font-size:10px;letter-spacing:.17em;font-weight:700}
.origin-progress{flex:1;height:2px;max-width:330px;background:rgba(199,231,249,.24)}.origin-progress span{display:block;width:0;height:100%;background:var(--sky)}

/* SECTION 02 — THE VALUES STORY MOVES THROUGH A STICKY VISUAL */
.about-values{background:#e9f3f8;color:#081c2b;min-height:100svh}
.values-heading{display:flex;justify-content:space-between;gap:20px;padding:38px clamp(24px,6vw,105px);border-bottom:1px solid #c4d8e6;font-size:10px;letter-spacing:.18em;color:#49697e;font-weight:700}
.values-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.83fr);gap:clamp(40px,7vw,135px);max-width:1700px;margin:auto;padding:0 clamp(24px,7vw,130px)}
.values-sticky{position:sticky;top:calc(var(--header) + 25px);height:calc(100svh - var(--header) - 50px);align-self:start;display:flex;flex-direction:column;justify-content:center;min-height:520px}
.values-orbit{position:absolute;right:0;top:14%;width:min(25vw,380px);aspect-ratio:1;opacity:.38;pointer-events:none;transform:rotate(var(--orbit-turn,0deg));transition:transform .15s linear}
.orbit-ring{position:absolute;inset:0;border:1px solid #2b9fd8;border-radius:50%}.orbit-two{inset:18%;border-style:dashed}.orbit-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(40px,5vw,80px);font-weight:800;letter-spacing:-.08em;color:#0b75b2}.orbit-center span{font-size:.45em;align-self:center;margin-left:8px}
.values-sticky>.eyebrow,.values-sticky h2,.values-caption,.values-meter{position:relative;z-index:1}
.values-sticky h2{margin:0;font-size:clamp(55px,6.4vw,115px);letter-spacing:-.085em;line-height:.93}.values-sticky h2 em{color:#087dbb;font-style:normal}
.values-caption{margin:35px 0 50px;font-size:17px;color:#526d7f;line-height:1.7}
.values-meter{display:flex;align-items:center;gap:22px;font-size:12px;color:#537384;letter-spacing:.18em}.values-meter>span:first-child{font-size:34px;font-weight:750;color:#087dbb}.values-meter-line{width:145px;height:2px;background:#b5cedf}.values-meter-line i{height:100%;width:33.333%;display:block;background:#087dbb;transition:width .3s}
.values-journey{min-width:0}.value-stop{min-height:75svh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #bbd1df;padding:100px 0 70px;opacity:.42;transform:translateX(28px);transition:opacity .55s,transform .65s var(--ease)}.value-stop.is-active{opacity:1;transform:none}
.value-index{font-size:11px;font-weight:750;color:#087dbb;letter-spacing:.23em}.value-stop h3{font-size:clamp(42px,4.3vw,75px);letter-spacing:-.072em;line-height:.99;margin:23px 0 32px}.value-stop h3 em{color:#087dbb;font-style:normal}.value-stop p{max-width:550px;font-size:clamp(16px,1.35vw,20px);line-height:1.8;color:#506a7a;margin:0}
.values-end{min-height:90svh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 65px}.values-end>span{font-size:10px;letter-spacing:.19em;color:#087dbb;font-weight:750}.values-end h3{margin:25px 0 45px;font-size:clamp(52px,5.6vw,105px);line-height:.98;letter-spacing:-.082em}.values-end h3 em{font-style:normal;color:#087dbb}
.values-actions{display:flex;flex-wrap:wrap;gap:12px}.values-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:190px;padding:17px 20px;border:1px solid #0b2a40;border-radius:30px;font-size:12px;font-weight:700;letter-spacing:.06em;transition:background .25s,color .25s}.values-actions a:first-child{background:#062238;color:#fff}.values-actions a:hover{background:#087dbb;color:#fff;border-color:#087dbb}
.values-email{align-self:start;margin-top:65px;padding-bottom:8px;border-bottom:1px solid #0b7cba;font-size:16px}.values-copyright{margin:65px 0 0;font-size:10px;letter-spacing:.12em;color:#617989}

@media(max-width:1150px){.site-header nav{gap:12px}.site-header nav>a:not(.header-cta),.site-header .nav-dropdown-toggle{font-size:9px;letter-spacing:.1em}.site-header .header-cta{gap:7px;padding:12px;font-size:9px}.site-header .brand img{width:155px}}
@media(max-width:850px){:root{--header:72px}.mobile-menu-toggle{display:flex;width:46px;height:42px;align-items:center;justify-content:center;gap:5px;flex-direction:column;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:5px;color:#fff}.mobile-menu-toggle span{display:block;width:21px;height:1.5px;background:currentColor}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - var(--header));overflow:auto;padding:15px 22px 26px;background:#05111e;border-bottom:1px solid rgba(255,255,255,.15)}.site-header nav.is-open{display:flex}.site-header nav>a:not(.header-cta),.site-header .nav-dropdown-toggle{display:flex;width:100%;font-size:12px;letter-spacing:.14em;padding:15px 0}.nav-dropdown{display:block;width:100%}.nav-dropdown-toggle{justify-content:space-between}.site-header .nav-dropdown-menu{position:static;width:100%;display:none;visibility:visible;opacity:1;transform:none;border:0;box-shadow:none;background:#102536;margin:0 0 10px;padding:7px}.nav-dropdown-menu::before{display:none}.site-header .nav-dropdown:not(.is-open) .nav-dropdown-menu{display:none}.site-header .nav-dropdown.is-open .nav-dropdown-menu{display:block;transform:none}.site-header .header-cta{justify-content:space-between;margin-top:10px}.origin-content h1{font-size:clamp(55px,9vw,90px)}.values-layout{grid-template-columns:1fr;gap:0}.values-sticky{height:auto;min-height:0;position:relative;top:auto;padding:95px 0 15px}.values-orbit{top:5%;width:240px}.value-stop{min-height:60svh;opacity:1;transform:none}.values-end{min-height:70svh}}
@media(max-width:550px){.origin-topline span:last-child,.values-heading span:last-child{display:none}.origin-content{top:49%;left:7vw;right:7vw}.origin-content h1{font-size:clamp(47px,12vw,73px)}.origin-story{height:140px;margin-top:45px}.origin-line{font-size:clamp(20px,5.9vw,30px)}.origin-watermark{font-size:74vw}.origin-bottom{gap:13px;font-size:8px;letter-spacing:.09em}.values-heading{padding:25px 7vw}.values-layout{padding:0 7vw}.values-sticky h2{font-size:clamp(52px,11vw,75px)}.value-stop{padding:75px 0;min-height:52svh}.value-stop h3{font-size:clamp(45px,11vw,65px)}.values-end h3{font-size:clamp(48px,12vw,75px)}.values-actions{flex-direction:column}.values-actions a{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.origin-photo,.origin-watermark,.values-orbit{transform:none!important}.origin-line,.value-stop,.values-meter-line i{transition:none!important}.value-stop{opacity:1;transform:none}}