@font-face{font-family:'Tobira Sans';src:url('../assets/fonts/TobiraSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aeonik;src:url('../assets/fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--nav-height:130px;--paper:#f0f0f8;--ink:#080809;--muted:#62636d;--blue:#2d43ff;--gutter:5vw;--curve:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Aeonik,'Helvetica Neue','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;cursor:pointer}h1,h2,h3,p{margin:0;font-weight:400}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:6px}.skip{position:fixed;left:20px;top:-100px;z-index:30;background:white;padding:15px}.skip:focus{top:20px}.site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;height:var(--nav-height);padding:0 var(--gutter);background:var(--paper);pointer-events:none}.site-header>*{pointer-events:auto}.logo{display:flex}.header-actions{display:flex;gap:14px}.pill{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:15px 24px;border-radius:40px;font-size:15px;line-height:1;background:#e5e5ef;transition:background .25s,color .25s}.pill:hover{background:#d6d6e4}.talk{background:#2b2d39;color:white}.talk:hover{background:var(--blue)}
.hero{padding:265px var(--gutter) 100px}.page-label,.section-label{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.page-label{padding-bottom:28px;border-bottom:1px solid #bdbdc9}.page-label h1{font-size:28px;line-height:1.5}.page-label>span{font-size:20px}.introduction{padding-top:85px}.introduction h2{font-size:48px;line-height:1.5;letter-spacing:-.035em}.intro-copy{max-width:880px;margin-top:65px;font-size:22px;line-height:2}.intro-copy p+p{margin-top:26px}.steps{padding:0 var(--gutter)}.section-label{margin-bottom:28px}.section-label h2{font-size:26px;line-height:1.5}.section-label>span{font-size:18px}.step{border-top:1px solid #bdbdc9;padding:26px 0 64px;scroll-margin-top:135px}.step-meta{display:flex;justify-content:space-between;font-size:18px;line-height:1.5}.step-meta>span:last-child{font-size:16px;color:#555661}.step-content{padding-top:42px;max-width:830px}.step h3{font-size:34px;line-height:1.6;letter-spacing:-.025em}.step-copy,.step-note{font-size:22px;line-height:2;max-width:820px}.step-copy{margin-top:26px}.step-note{margin-top:18px;color:#50515c;font-size:19px}.approach{margin:55px var(--gutter) 0;padding:65px 0 100px;border-top:1px solid #bdbdc9}.approach-intro>p:first-child{font-size:18px;margin-bottom:28px}.approach h2{font-size:38px;line-height:1.55;letter-spacing:-.035em}.approach-description{font-size:22px;line-height:2;max-width:820px;margin-top:32px}.principles{margin-top:55px;max-width:830px}.principles article{padding:32px 0;border-top:1px solid #c9c9d5}.principles h3{font-size:28px;line-height:1.6}.principles h3 br{display:none}.principles p{font-size:20px;line-height:2;margin-top:20px}
.contact{background:#292b38;color:var(--paper);padding:80px var(--gutter) 70px;border-radius:28px 28px 0 0}.contact>p{font-size:16px}.contact-link{display:flex;align-items:center;justify-content:space-between;margin-top:55px;font-size:clamp(70px,12vw,190px);letter-spacing:-.065em;line-height:.95}.contact-arrow{font-size:15vw;transition:transform .5s var(--curve)}.contact-link:hover .contact-arrow{transform:translate(10px,-10px)}.contact-button{margin-top:45px;background:#f0f0f8;color:#101018;padding:20px 26px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px var(--gutter);background:#292b38;color:#d0d0db;font-size:12px;border-top:1px solid #484a56}dialog{padding:0;border:0;margin:0 0 0 auto;background:#dedeea;border-radius:0 0 0 24px;width:min(640px,100vw);max-width:100vw;max-height:100dvh;color:var(--ink)}dialog::backdrop{background:#15152066;backdrop-filter:blur(10px)}.menu-inner{padding:50px 50px 35px}.menu-close{margin-left:auto;display:flex}.menu-inner nav{display:flex;flex-direction:column;margin:55px 0}.menu-inner nav a{display:flex;justify-content:space-between;gap:20px;font-size:28px;padding:22px 0;border-bottom:1px solid #bcbcc9}.menu-inner>p{font-size:13px}

.contact>p{font-size:20px}.contact-button{font-size:17px}footer{font-size:15px}.menu-inner>p{font-size:17px}
@media(max-width:900px){.hero{padding-top:210px}.intro-copy{font-size:21px}.desktop-break{display:none}.step-content{max-width:100%}.introduction h2{font-size:42px}}
@media(max-width:600px){:root{--gutter:6vw}html{scroll-padding-top:100px}.logo svg{width:112px;height:27px}.header-actions{gap:7px}.pill{font-size:12px;padding:13px 15px;gap:10px}.hero{padding-top:165px;padding-bottom:65px}.page-label{padding-bottom:20px}.page-label h1{font-size:23px}.page-label>span{font-size:15px}.introduction{padding-top:48px}.introduction h2{font-size:clamp(25px,7.4vw,32px);line-height:1.6;letter-spacing:-.035em}.intro-copy{font-size:18px;line-height:1.95;margin-top:36px}.intro-copy p+p{margin-top:22px}.section-label{align-items:flex-start;margin-bottom:20px;gap:14px}.section-label h2{font-size:20px}.section-label>span{font-size:13px;white-space:nowrap;padding-top:5px}.step{padding:20px 0 42px;scroll-margin-top:110px}.step-meta{font-size:16px}.step-meta>span:last-child{font-size:14px}.step-content{padding-top:27px}.step h3{font-size:25px;line-height:1.6;letter-spacing:-.025em}.step-copy{font-size:18px;line-height:1.95;margin-top:20px}.step-note{font-size:17px;line-height:1.95;margin-top:16px}.approach{margin-top:20px;padding:40px 0 60px}.approach-intro>p:first-child{font-size:16px;margin-bottom:22px}.approach h2{font-size:28px}.approach-description{font-size:18px;line-height:1.95;margin-top:25px}.principles{margin-top:35px}.principles article{padding:27px 0}.principles h3{font-size:23px}.principles p{font-size:18px;line-height:1.95;margin-top:17px}.contact{padding-top:42px;padding-bottom:40px;border-radius:20px 20px 0 0}.contact>p{font-size:17px;line-height:1.8}.contact-link{font-size:16vw;margin-top:35px}.contact-arrow{font-size:19vw}.contact-button{font-size:15px;padding:18px 20px;margin-top:32px}footer{font-size:12px;flex-wrap:wrap;padding-top:25px;padding-bottom:25px}footer>a:first-child{width:100%;font-size:18px}.menu-inner{padding:24px}.menu-inner nav a{font-size:22px}.menu-inner nav{margin-top:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Aspen reference: pinned light introduction / dark sequential panels. */
.process-layout{display:grid;grid-template-columns:1fr 1fr;align-items:start;background:#222;color:#eee;margin-top:var(--nav-height);border-radius:0 0 22px 22px}
.process-intro{position:sticky;top:var(--nav-height);height:calc(100svh - var(--nav-height));min-height:550px;background:#d8d8d8;color:#202020;display:flex;flex-direction:column;justify-content:space-between;padding:28px 24px 30px;border-radius:0 0 0 22px}
.intro-heading h1{font-family:Aeonik,'Helvetica Neue',sans-serif;font-size:9.6vw;line-height:.9;letter-spacing:-.07em}
.intro-heading h1 span{display:block}.intro-heading h1 span:first-child{text-align:right}.hero-subtitle{margin-top:32px;font-size:22px;letter-spacing:.03em}
.intro-bottom{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end}.intro-copy{font-size:17px;line-height:1.85;margin:0;max-width:none}
.steps{padding:0 24px;min-width:0}.step{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:26px;row-gap:35px;min-height:550px;padding:30px 0;border-top:1px solid #555;scroll-margin-top:130px}.step:first-child{border-top:0}.step-heading{display:flex;align-items:baseline;gap:14px}.step-number{font:12px/1.4 monospace;color:#a9a9a9;flex-shrink:0}.step h3{font-size:clamp(23px,2vw,36px);line-height:1.45;letter-spacing:-.04em;overflow-wrap:anywhere}.step-copy{margin:0;font-size:17px;line-height:1.85;max-width:none}.step-art{align-self:center;width:100%;max-width:340px;margin:0 auto}.diagram{display:block;width:100%;height:auto;overflow:visible;stroke:#c4c4c4;stroke-width:.75}.dotted{stroke-dasharray:1 4;stroke-linecap:round;stroke-width:1.5}.diagram-lines{transform-origin:180px 180px;transform:rotate(var(--diagram-turn,0deg));transition:transform .15s linear}.step-detail{align-self:end;padding-bottom:5px}.step-phase{display:flex;gap:9px;align-items:center;font:13px/1.5 monospace;color:#dedede}.step-phase::before{content:"";width:6px;height:6px;background:#a1f9c9;flex-shrink:0}.step-note{font-size:15px;line-height:1.85;color:#bbb;margin-top:20px}.approach{margin-top:0;padding-top:100px;border-top:0}
@media(min-width:1700px){.step{min-height:590px}.step-copy{font-size:19px}.step-note{font-size:17px}.intro-copy{font-size:20px}}
@media(max-width:1100px){.process-layout{grid-template-columns:42% 58%}.intro-heading h1{font-size:8.8vw}.process-intro{padding:25px 20px}.intro-bottom{grid-template-columns:1fr}.intro-copy{font-size:17px}.steps{padding:0 20px}.step{column-gap:18px;min-height:530px}.step h3{font-size:25px}.step-copy{font-size:16px}.step-note{font-size:14px}}
@media(max-width:760px){:root{--nav-height:100px}.process-layout{display:block;margin-top:var(--nav-height)}.process-intro{position:relative;height:auto;min-height:0;padding:35px 6vw 40px;border-radius:0}.intro-heading h1{font-size:22vw}.hero-subtitle{font-size:20px;margin-top:25px}.intro-bottom{margin-top:60px;grid-template-columns:1fr 2fr;gap:24px}.intro-copy{font-size:16px;line-height:1.9}.steps{padding:0 6vw}.step{min-height:0;padding:30px 0 40px;grid-template-columns:1fr;gap:22px}.step-heading{gap:18px}.step h3{font-size:27px}.step-copy{font-size:18px;line-height:1.9}.step-art{max-width:285px}.step-detail{padding-left:0}.step-note{font-size:16px}.step-phase{font-size:13px}.approach{padding-top:60px}.diagram-lines{transition:none}}

@media(max-width:760px){.process-intro{top:auto;min-height:0;height:auto}.step h3 br{display:none}}

/* Three beliefs: uninterrupted color fields, title above and explanation below. */
.approach{margin:0;padding:0}
.approach-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;min-height:clamp(480px,37vw,640px)}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:none;margin:0}
.principles article{display:flex;flex-direction:column;justify-content:space-between;gap:90px;min-width:0;min-height:clamp(500px,40vw,680px);padding:32px clamp(24px,2.4vw,42px);border:0;background:#fcfbf9;color:#222}
.principles article:nth-child(2){background:#b5462a;color:#fcfbf9}
.principles article:nth-child(3){background:#222;color:#fcfbf9}
.principles h3{font-size:clamp(28px,2.7vw,46px);line-height:1.4;letter-spacing:-.04em;text-wrap:balance}
.principles h3 br{display:initial}
.principles p{font-size:clamp(17px,1.25vw,21px);line-height:1.85;margin:0;max-width:38em}
.principles:focus-visible{outline:2px solid #b5462a;outline-offset:-2px}
@media(max-width:760px){.approach{padding:0}.approach-intro{padding:0}.principles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.principles article{flex:0 0 88%;min-height:510px;padding:28px 24px;scroll-snap-align:start}.principles h3{font-size:32px}.principles p{font-size:17px}.principles article:last-child{flex-basis:100%}}

/* The approach introduction reverses the Process section's light/dark split. */
.approach-copy{background:#222;color:#fcfbf9;padding:36px clamp(24px,2.4vw,42px);display:flex;flex-direction:column;justify-content:space-between;gap:70px}
.approach-copy h2{font-size:clamp(28px,2.7vw,46px);line-height:1.45}
.approach-copy .approach-description{font-size:clamp(18px,1.4vw,23px);line-height:1.85;max-width:32em;margin:0}
.approach-display{min-width:0;background:#d8d8d8;color:#202020;padding:28px 24px}
.approach-title{font-family:Aeonik,'Helvetica Neue',sans-serif;font-size:9.6vw;line-height:.9;letter-spacing:-.07em}
.approach-title span{display:block}.approach-title span:first-child{text-align:right}
@media(max-width:760px){.approach-intro{grid-template-columns:1fr;min-height:0}.approach-copy{min-height:350px;padding:30px 6vw;gap:55px}.approach-copy h2{font-size:28px}.approach-copy .approach-description{font-size:18px}.approach-display{padding:30px 6vw 40px}.approach-title{font-size:19vw}}

/* Lightweight, illustration-specific loops. Only visible illustrations run. */
.motion-part{animation-duration:5.6s;animation-iteration-count:infinite;animation-delay:var(--delay,0s);animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-play-state:paused;transform-box:fill-box;transform-origin:center}
.motion-active .motion-part{animation-play-state:running}
.motion-write{animation-name:diagram-write;transform-origin:left center}
.motion-build{animation-name:diagram-build;transform-origin:center bottom}
.motion-color{animation-name:diagram-color}
.motion-hand-left{animation-name:hand-meet;--arrival:-42px}
.motion-hand-right{animation-name:hand-meet;--arrival:42px}
.motion-detail{animation-name:hand-detail}
.motion-orbit{animation-name:diagram-orbit;animation-duration:28s;animation-timing-function:linear}
.motion-terminal{animation-name:terminal-write;animation-timing-function:steps(12,end)}
.motion-cursor{animation-name:terminal-cursor;animation-duration:1.2s;animation-timing-function:steps(1,end)}
.motion-longitude{animation-name:globe-turn;animation-duration:8s;animation-timing-function:ease-in-out}
.motion-flow{stroke-dasharray:1 5;animation-name:infinity-flow;animation-duration:5s;animation-timing-function:linear}
@keyframes diagram-write{0%,8%{clip-path:inset(-5px 100% -5px -5px)}32%,80%{clip-path:inset(-5px -5px -5px -5px);opacity:1}94%,100%{clip-path:inset(-5px -5px -5px -5px);opacity:0}}
@keyframes diagram-build{0%,12%{transform:scaleY(.05);opacity:0}42%,80%{transform:scaleY(1);opacity:1}95%,100%{transform:scaleY(1);opacity:0}}
@keyframes diagram-color{0%,15%{fill-opacity:0}45%,80%{fill-opacity:.32}100%{fill-opacity:0}}
@keyframes hand-meet{0%,6%{transform:translateX(var(--arrival));opacity:0}28%,40%{transform:translate(0,0);opacity:1}48%{transform:translateY(4px)}56%{transform:translateY(-2px)}64%,80%{transform:translate(0,0);opacity:1}100%{transform:translateX(var(--arrival));opacity:0}}
@keyframes hand-detail{0%,22%,100%{opacity:0}38%,80%{opacity:1}}
@keyframes diagram-orbit{to{transform:rotate(360deg)}}
@keyframes terminal-write{0%,10%{clip-path:inset(0 100% 0 0)}40%{clip-path:inset(0 0 65% 0)}60%,82%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes terminal-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes globe-turn{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
@keyframes infinity-flow{to{stroke-dashoffset:-60}}
@media(prefers-reduced-motion:reduce){.motion-part{animation:none!important}.motion-flow{stroke-dasharray:none}}

/* Footer typography: rolling letters and staggered hover strokes. */
.footer-motion-title{--roll-height:.9em}
.footer-motion-title > .title-line{position:relative;display:block;white-space:nowrap}
.footer-motion-title .title-word{position:relative;display:inline-block}
.footer-motion-title .title-letter{display:inline-block;position:relative;height:var(--roll-height);overflow:hidden;vertical-align:top}
.footer-motion-title .title-letter-track{display:block;position:relative;height:100%}
.footer-motion-title .title-letter-copy{display:block;height:100%;line-height:var(--roll-height)}
.footer-motion-title .title-letter-copy + .title-letter-copy{position:absolute;top:100%;left:0}
.footer-motion-title .title-stroke{position:absolute;display:block;height:.055em;background:currentColor;pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.footer-motion-title .title-line:first-child .title-stroke{left:0;right:0;bottom:.015em}
.footer-motion-title .title-line:last-child .title-stroke{left:0;width:23%;bottom:.015em;transition-delay:.15s}
.footer-motion-title .title-line:last-child .title-stroke:last-child{left:28%;width:72%;transition-delay:.35s}
@media(hover:hover) and (pointer:fine){.footer-motion-title:hover .title-stroke{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.footer-motion-title .title-stroke{transition:none}}
/* Keep negative tracking without clipping the right edge of each glyph. */
.footer-motion-title .title-word{padding-right:.07em}
.footer-motion-title .title-letter{padding-right:.07em;margin-right:-.07em}
@media(max-width:760px){.approach-title.footer-motion-title{font-size:18vw}}
@media(min-width:761px) and (max-width:1100px){.approach-title.footer-motion-title{font-size:9vw}}
@media(max-width:760px){.intro-heading h1.footer-motion-title{font-size:21vw}}
.footer-motion-title .title-stroke{display:none}
.footer-motion-title .title-word{will-change:auto}
.footer-motion-title.is-drifting .title-word{will-change:transform}
/* Aeonik's P has a small side bearing; align the subtitle to its visible edge. */
.hero-subtitle{padding-left:.65vw}
@media(max-width:1100px){.hero-subtitle{padding-left:.6vw}}
@media(max-width:760px){.hero-subtitle{padding-left:1.4vw}}
.approach-title.footer-motion-title > .title-line:first-child{text-align:left}
.approach-title.footer-motion-title > .title-line:last-child{text-align:right}

.principles p{text-wrap:pretty}

/* Keep a return route visible even after scrolling through the process. */
.back-to-cards{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:28px;margin-right:auto;font-size:15px;white-space:nowrap}
.back-to-cards:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.back-to-cards{position:absolute;left:var(--gutter);bottom:0;margin:0;min-height:36px;font-size:13px}}

@media(max-width:900px){.site-header{align-items:flex-start;padding-top:14px}.site-header .logo{margin-top:5px}}

/* Flat process surfaces: no tiles, depth, arrival or proximity effects. */
html,body{background:#fff}
.process-layout{border-radius:0}
.process-intro{border-radius:0}
.intro-bottom{display:block}
.intro-bottom .intro-copy{max-width:34em;margin-left:auto}
@media(min-width:1101px){.intro-bottom .intro-copy{width:calc(50% - 12px)}}
body header.tb-native-header{background:#fff}
.step-art{position:relative;aspect-ratio:1}
.step-art>canvas{display:none;width:100%;height:100%}
.step-art.illustration-ready>canvas{display:block}
.step-art.illustration-ready>svg{display:none}

/* Journal's white-led material is confined to these three light blocks. */
.process-intro,.approach-display,.principles article:first-child{isolation:isolate;background:radial-gradient(ellipse at 65% 75%,#e8b5a426,transparent 65%),#fff}
.approach-display,.principles article:first-child{position:relative}
.process-block-gradient{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s linear}
.process-block-gradient.is-ready{opacity:.55}
@media(prefers-reduced-motion:reduce){.process-block-gradient{transition:none}}
