@font-face{font-family:Instrument;src:url('./assets/instrument-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  color-scheme:dark;
  --coal:oklch(14.2% .005 230);--graphite:oklch(21% .01 235);
  --paper:oklch(95.6% .007 95);--silver:oklch(81% .018 235);
  --muted:oklch(76% .016 240);--mobile-ink:oklch(86% .011 240);--ice:oklch(90% .025 235);
  --line:oklch(85% .025 235 / .17);--glass:oklch(21% .012 235 / .74);
  --gutter:clamp(24px,5vw,96px);--scene-height:max(100svh,640px);
  --font-body:Instrument,Arial,sans-serif;--weight-accent:550;
  --space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:40px;--space-xl:64px;
  --duration-fast:160ms;--duration-enter:650ms;--ease-out:cubic-bezier(.16,1,.3,1);
  --radius-pill:999px;--pre-header-height:40px;--surface-silver:oklch(89% .012 235);--ink-silver:oklch(22% .01 235);--blur-glass:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--coal);color:var(--paper);font-family:var(--font-body);font-size:1rem;-webkit-font-smoothing:antialiased}
::selection{background:var(--silver);color:var(--coal)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid var(--ice);outline-offset:6px}
button:active,a:active{opacity:.72}
em{font-family:inherit;font-style:normal;font-weight:var(--weight-accent);color:var(--silver)}
h1,h2,p{margin:0}p{color:var(--muted);line-height:1.65}
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:24px;top:12px;max-width:calc(100% - 48px);padding:16px 24px;z-index:30;background:var(--paper);color:var(--coal);transform:translateY(-160%)}
.skip-link:focus{transform:none}

/* The mark is a single drawing, repeated without a badge or ornamental symbol. */
.brand svg,.intro svg,.large-wordmark svg{fill:none;stroke:currentColor;stroke-width:3.1;stroke-linejoin:round}
.header{position:absolute;top:calc(var(--pre-header-offset,var(--pre-header-height)) + 24px);inset-inline:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:10}
.brand{display:flex;align-items:center;min-height:48px}
.brand svg{width:100px;height:36px}
.header nav{display:flex;align-items:center;gap:32px;font-size:.83rem}
.nav-vision{display:flex;align-items:center;min-height:48px}
.nav-contact{display:flex;align-items:center;gap:30px;min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:var(--radius-pill);background:linear-gradient(145deg,oklch(98% .01 240 / .08),transparent),var(--glass);box-shadow:inset 0 1px 0 #ffffff0b;backdrop-filter:blur(var(--blur-glass));transition:background-color var(--duration-fast),border-color var(--duration-fast)}
.nav-contact span{font-size:1.2rem}

/* Native document flow, one sticky globe behind three short chapters. */
.journey{position:relative;isolation:isolate}
.scene-sticky{position:sticky;top:0;height:var(--scene-height);width:100%;overflow:hidden;pointer-events:none;z-index:-1}
.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 32%,#25303938,transparent 62%)}
.globe-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 350ms}
.scene-ready .globe-canvas{opacity:1}.scene-ready .globe-fallback{opacity:0}
.globe-fallback{position:absolute;height:auto;width:calc(min(114svh,84vw) / .94);left:calc(76.5% - min(57svh,42vw) / .94);top:calc(51% - min(57svh,42vw) / .94)}
.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,11,.95),rgba(8,10,11,.78) 34%,rgba(8,10,11,.64) 46%,transparent 66%),linear-gradient(0deg,var(--coal),transparent 12%)}
.hero,.vision,.horizon{position:relative;padding-inline:var(--gutter)}
.hero{margin-top:calc(-1 * var(--scene-height));min-height:var(--scene-height);display:flex;align-items:center;padding-top:160px;padding-bottom:150px}
.hero-copy{max-width:740px}
.eyebrow{font-size:.78rem;line-height:1.5;letter-spacing:0;color:var(--silver);font-weight:450}
.hero h1{font-size:clamp(3.8rem,7.4vw,8rem);font-weight:450;letter-spacing:-.062em;line-height:1.02}
.hero-description{max-width:420px;margin-top:32px;font-size:1rem}

.text-link{display:inline-flex;align-items:center;gap:26px;min-height:48px;font-size:.82rem}
.text-link span{font-size:1.2rem;transition:transform var(--duration-fast) var(--ease-out)}

.vision{min-height:128svh;display:flex;align-items:center;padding-block:130px}
.vision-copy{width:480px;max-width:100%}

.vision h2{font-size:clamp(3rem,4.6vw,5.5rem);line-height:1.03;letter-spacing:-.055em;font-weight:450;margin-bottom:32px}
.vision-copy>p:not(.section-intro){max-width:350px;margin-top:18px}
.horizon{min-height:110svh;display:flex;align-items:center;padding-block:120px}
.horizon-copy{width:560px;max-width:100%}
.horizon h2{font-size:clamp(3rem,4.9vw,5.7rem);line-height:1.05;letter-spacing:-.05em;font-weight:450}
.horizon-copy>p:not(.section-intro){max-width:350px;margin-top:32px}

.purpose{position:relative;padding:100px var(--gutter) 0;overflow:hidden;background:radial-gradient(ellipse at 85% 115%,#20282d 0,transparent 58%),var(--coal)}
.purpose h2{font-size:clamp(3rem,6.1vw,7rem);font-weight:450;line-height:1.07;letter-spacing:-.055em}
.purpose-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:48px;position:relative;z-index:1}
.purpose-bottom p{font-size:1rem;max-width:410px}
.contact-link{max-width:100%;min-height:90px;padding-block:8px;display:flex;flex-direction:column;gap:18px;font-size:.8rem;color:var(--muted)}
.contact-link>span{font-size:1.85rem;color:var(--paper);letter-spacing:-.025em;overflow-wrap:anywhere}
.contact-link>span>span{display:inline-block;margin-left:48px;transition:transform var(--duration-fast)}
.large-wordmark{margin-top:84px;width:94%;color:oklch(78% .016 240 / .23);mask-image:linear-gradient(#000,#0002);user-select:none}
.large-wordmark svg{width:100%;height:auto;display:block;stroke-width:.25}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--gutter);border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);background:var(--coal)}
footer a{min-height:48px;display:flex;align-items:center;gap:20px}

/* A brief opening shutter, independent of hydration or WebGL availability. */
.intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--coal);pointer-events:none;animation:intro-out 260ms var(--ease-out) 420ms forwards}
.intro svg{width:112px;height:40px;color:var(--silver)}
.loaded .intro{display:none}
@keyframes intro-out{to{opacity:0;visibility:hidden}}
@media(hover:hover){
  .nav-contact:hover{background-color:var(--graphite);border-color:var(--silver)}
  .text-link:hover span{transform:translateY(3px)}
  .contact-link:hover>span>span{transform:translate(4px,-4px)}
  .nav-vision:hover,footer a:hover{color:var(--paper)}
  
}
@media(max-height:760px) and (min-width:950px){.hero{padding-top:150px;padding-bottom:128px}.hero h1{font-size:6.5vw}.hero-description{margin-top:24px}.discover{margin-top:12px}}
@media(min-width:601px) and (max-width:949px){
  .hero h1{font-size:max(3.6rem,8.3vw)}.hero-copy{max-width:540px}.hero-description{max-width:340px}
  .globe-fallback{left:calc(79% - min(57svh,42vw) / .94)}
  .vision h2{font-size:max(3rem,6.5vw)}.horizon h2{font-size:max(3rem,6.3vw)}
  .purpose h2{font-size:max(3rem,7.1vw)}
}
@media(max-width:600px){
  :root{--gutter:24px;--scene-height:max(100svh,840px)}
  html{scroll-padding-top:72px}
  .header{top:calc(var(--pre-header-offset,var(--pre-header-height)) + 16px);gap:14px}.brand svg{width:80px;height:30px}.header nav{min-width:0;gap:0}
  .nav-vision{display:none}.nav-contact{font-size:.75rem;padding:0 14px;gap:18px;flex-wrap:wrap;justify-content:center;max-width:100%}
  .hero{align-items:flex-start;padding-top:156px;padding-bottom:330px}.hero-copy{max-width:100%;width:100%}
  .eyebrow{max-width:270px;font-size:.72rem;letter-spacing:0;line-height:1.7}
  .hero h1{font-size:max(2.7rem,14.1vw);line-height:1.06;overflow-wrap:anywhere}
  .hero-description{margin-top:22px;max-width:340px;color:var(--mobile-ink);font-size:1rem;line-height:1.6}
  
  .globe-fallback{width:calc(134vw / .94);left:calc(56% - 67vw / .94);top:calc(81% - 67vw / .94)}
  .scene-shade{background:linear-gradient(180deg,rgba(8,10,11,.97),rgba(8,10,11,.88) 39%,rgba(8,10,11,.3) 62%,transparent 78%),linear-gradient(90deg,rgba(8,10,11,.18),transparent 65%),linear-gradient(0deg,var(--coal),transparent 12%)}
  .vision,.horizon{align-items:flex-start;min-height:120svh;padding-top:115px;padding-bottom:130px}
  .vision-copy{max-width:290px}.vision h2{font-size:max(2.55rem,10.5vw);margin-bottom:24px;overflow-wrap:anywhere}
  .vision p{color:var(--mobile-ink);font-size:1rem;line-height:1.6}
  .horizon-copy{max-width:100%}.horizon h2{font-size:max(2.4rem,10.7vw);overflow-wrap:anywhere}.horizon p{max-width:290px;margin-top:25px;color:var(--mobile-ink)}
  .purpose{padding-top:58px}.purpose h2{font-size:max(2.35rem,10.2vw);line-height:1.1;overflow-wrap:anywhere}
  .purpose-bottom{display:block;margin-top:32px}.purpose-bottom p{color:var(--mobile-ink)}
  .contact-link{margin-top:36px;width:fit-content;gap:12px}.contact-link>span{font-size:1.8rem}.contact-link>span>span{margin-left:24px}
  .large-wordmark{margin-top:60px;width:100%}
  footer{flex-wrap:wrap;gap:0 14px;padding-block:20px;font-size:.7rem}footer a{gap:12px}
}
@media(max-width:360px){:root{--gutter:20px}.hero h1{font-size:max(2.3rem,13.5vw)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.intro{display:none}}
@media(prefers-reduced-transparency:reduce){.nav-contact{background:var(--graphite);backdrop-filter:none}}
@media(prefers-contrast:more){p,.eyebrow{color:var(--paper)}.scene-shade{background:linear-gradient(90deg,var(--coal),rgba(8,10,11,.86) 60%,rgba(8,10,11,.4))}}
@media(forced-colors:active){.scene-sticky,.large-wordmark,.intro{display:none!important}.hero{margin-top:0}.hero,.vision,.horizon{min-height:auto;padding-block:120px}.brand svg{stroke:CanvasText}em,p{color:CanvasText!important}.nav-contact{border:1px solid ButtonText}}

/* Revision 4: one icon language, a useful pre-header and a brighter closing page. */
.icon{width:24px;height:24px;display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.pre-header{position:absolute;inset:0 0 auto;z-index:11;min-height:var(--pre-header-height);padding:4px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);background:oklch(19% .009 235 / .88);color:var(--silver);font-size:.7rem;line-height:1.5}
.pre-header>span,.pre-header>a{display:flex;align-items:center;gap:12px}
.pre-header .icon{width:15px;height:15px}.pre-header>a{min-height:32px}
.nav-contact .icon{width:17px;height:17px}
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow-line{width:24px;height:1px;background:var(--silver);flex-shrink:0}
.discover{margin-top:28px;display:inline-flex;align-items:center;gap:28px;min-height:54px;padding:6px 7px 6px 22px;border:1px solid var(--silver);border-radius:var(--radius-pill);background:var(--surface-silver);color:var(--ink-silver);font-size:.82rem;font-weight:550;box-shadow:inset 0 1px 0 #fff8;transition:background-color var(--duration-fast)}
.button-icon{width:38px;height:38px;border:1px solid oklch(22% .01 235 / .24);border-radius:50%;display:grid;place-items:center;overflow:hidden}
.button-icon .icon{width:19px;height:19px;transition:transform var(--duration-fast) var(--ease-out)}
.hero-foot{position:absolute;inset-inline:var(--gutter);bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:22px;color:var(--silver)}
.disciplines{display:flex;gap:36px;align-items:center}.disciplines>span{display:flex;gap:12px;align-items:center;font-size:.75rem}.disciplines .icon{color:var(--silver);width:22px;height:22px}
.scroll-note{display:flex;align-items:center;gap:18px;font-size:.72rem}.scroll-note .icon{width:18px;height:18px}
.section-intro{display:flex;align-items:center;gap:16px;margin:0 0 28px!important;color:var(--silver);font-size:.75rem!important;line-height:1.5!important}.section-intro .icon{width:28px;height:28px}
.purpose{--paper:var(--ink-silver);--ice:var(--ink-silver);--silver:oklch(40% .016 235);--muted:oklch(36% .012 235);--mobile-ink:oklch(36% .012 235);background:var(--surface-silver);color:var(--ink-silver);padding-top:72px;border-radius:28px 28px 0 0}
.purpose-intro{display:flex;align-items:center;gap:16px;margin-bottom:44px;font-size:.78rem;color:var(--ink-silver)}
.purpose h2{font-size:clamp(3rem,6.6vw,7.6rem)}
.purpose-bottom{padding-top:32px;border-top:1px solid oklch(22% .01 235 / .2);margin-top:56px}
.contact-link>span{display:flex;align-items:center;justify-content:space-between;gap:48px;min-height:54px;padding:10px 20px;border-radius:var(--radius-pill);color:var(--surface-silver);background:var(--ink-silver);font-size:1rem;letter-spacing:0}
.contact-link>span .icon{width:20px;height:20px;transition:transform var(--duration-fast)}
.large-wordmark{color:oklch(35% .016 235 / .46);margin-top:64px}
@media(hover:hover){.discover:hover{background:var(--paper)}.discover:hover .icon{transform:translateY(3px)}.pre-header a:hover{color:var(--paper)}.contact-link:hover .icon{transform:translate(3px,-3px)}}
@media(min-width:601px) and (max-width:949px){.hero-foot{gap:16px}.scroll-note{display:none}.pre-header>a{display:none}}
@media(max-width:600px){
  :root{--pre-header-height:34px}
  .pre-header{padding-block:7px;font-size:.625rem;justify-content:center}.pre-header>a{display:none}.pre-header>span{gap:8px}.pre-header .icon{width:14px;height:14px}
  .hero .eyebrow{font-size:.69rem;max-width:100%;gap:10px}.eyebrow-line{width:18px}
  .discover{margin-top:22px;font-size:.78rem;gap:24px;min-height:50px;padding-left:18px}.button-icon{width:34px;height:34px}
  .hero-foot{bottom:22px;padding-top:18px;gap:0}.disciplines{justify-content:space-between;width:100%;gap:12px}.disciplines>span{font-size:.65rem;gap:8px}.disciplines .icon{width:20px;height:20px}.scroll-note{display:none}
  .section-intro{margin-bottom:24px!important;font-size:.72rem!important;gap:12px}
  .purpose{padding-top:40px;border-radius:24px 24px 0 0}.purpose-intro{margin-bottom:32px;font-size:.72rem}.purpose-intro .icon{width:22px;height:22px}
  .purpose h2{font-size:max(2.35rem,10.2vw)}.purpose-bottom{margin-top:32px;padding-top:24px}
  .contact-link{margin-top:28px}.contact-link>span{font-size:1rem;gap:40px;min-height:52px}.large-wordmark{margin-top:44px}
}
@media(prefers-contrast:more){.pre-header{background:var(--coal);color:var(--paper)}.purpose p,.purpose em{color:var(--ink-silver)}}
@media(forced-colors:active){.pre-header{position:relative}.header{position:relative;top:auto;inset-inline:auto;margin-inline:var(--gutter)}.hero-foot{position:static;flex-wrap:wrap}.hero{display:block}.purpose,.discover,.contact-link>span{background:Canvas;color:CanvasText;border:1px solid CanvasText}.icon{stroke:CanvasText}.purpose p,.purpose em{color:CanvasText!important}}
/* The chrome grows with text; its measured edge reserves the hero's clearance. */
.hero{padding-top:max(160px,var(--hero-top,160px))}
@media(max-width:600px){
  .hero{padding-top:max(156px,var(--hero-top,156px))}
  .hero-copy{position:relative;isolation:isolate}
  .hero-copy::before{content:"";position:absolute;inset:-20px calc(-1 * var(--gutter)) -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--coal) 12%,var(--coal) calc(100% - 78px),transparent)}
}
@media(forced-colors:active){
  body,body *{color:CanvasText!important}
  body a{color:LinkText!important}
  .hero-copy::before{display:none}
  .hero{padding-top:64px}
}
/* Keep complete words in the closing title at 320px with enlarged text. */
@media(max-width:360px){.purpose h2{font-size:max(2rem,10.2vw)}}