@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{--forest:#123524;--forest-deep:#09271a;--forest-mid:#1d4b35;--forest-soft:#2f6248;--sage:#b8c9b6;--cream:#f2f0e7;--white:#fbfcf8;--line:rgba(236,243,235,.22);--muted:#c4d1c7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--forest);color:var(--white);font-family:Inter,Arial,sans-serif}nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(9,39,26,.94);backdrop-filter:blur(10px);z-index:5}.brand{font:500 20px DM Mono;text-decoration:none;color:var(--white);border:1px solid var(--sage);padding:8px}.links{display:flex;gap:28px}.links a,.textlink,footer a{color:var(--white);text-decoration:none;font:12px DM Mono;letter-spacing:.03em}.hero{min-height:calc(100vh - 78px);padding:9vh 8vw 5vh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,var(--forest-deep),var(--forest) 58%,var(--forest-mid))}.eyebrow,.kicker,.section-head span,.meta,.statement>span{font:11px DM Mono;letter-spacing:.12em}.hero h1{font:clamp(78px,13vw,180px)/.72 Instrument Serif;margin:32px 0 45px;letter-spacing:-.045em;font-weight:400}.hero h1 em{color:var(--sage)}.lede{font-size:clamp(19px,2vw,28px);line-height:1.45;max-width:820px;margin-left:25vw;color:#edf3ed}.actions{margin:35px 0 60px 25vw;display:flex;gap:30px;align-items:center}.button{background:var(--cream);color:var(--forest-deep);padding:16px 20px;text-decoration:none;font:12px DM Mono}.stats{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto}.stats div{padding:22px 0}.stats b{font:36px Instrument Serif;display:block}.stats span{font:11px DM Mono;color:var(--muted)}.statement{background:var(--cream);color:var(--forest-deep);padding:100px 8vw;display:grid;grid-template-columns:1fr 3fr;gap:30px}.statement p{font:clamp(34px,5vw,70px)/1.05 Instrument Serif;margin:0;max-width:1100px}.statement strong{color:var(--forest-mid);font-weight:400}section:not(.hero,.statement){padding:110px 8vw}.section-head{display:grid;grid-template-columns:80px 1fr;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:50px}.section-head h2{font:56px Instrument Serif;margin:0}.section-intro{max-width:850px;font:clamp(23px,3vw,38px)/1.3 Instrument Serif;color:#e6eee7;margin:-15px 0 55px}.feature{padding:10px 0 70px}.meta{display:flex;justify-content:space-between;color:var(--sage)}.feature h3,.card h3{font:clamp(35px,5vw,70px)/1.05 Instrument Serif;font-weight:400;max-width:950px;margin:35px 0 25px}.feature>p{font-size:19px;line-height:1.6;max-width:760px;color:#e4ece5}.feature ul{max-width:850px;line-height:1.7;margin:35px 0 0;padding-left:18px;color:#e4ece5}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.tags span,.methods span{border:1px solid var(--line);padding:9px 12px;font:11px DM Mono;background:rgba(255,255,255,.035)}.grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.experience-grid{grid-template-columns:repeat(2,1fr)}.card{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:350px;background:rgba(255,255,255,.025)}.card h3{font-size:38px}.card p{line-height:1.7;color:#d8e2da}.timeline>div{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line);padding:30px 0}.timeline time{font:13px DM Mono;color:var(--sage)}.timeline p{margin:0;max-width:900px;line-height:1.6;color:#e4ece5}.methods-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-bottom:36px}.method-card{padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}.method-card h3{font:31px/1.1 Instrument Serif;font-weight:400;margin:0 0 18px;color:var(--sage)}.method-card p{margin:0;line-height:1.7;color:#d8e2da}.methods{display:flex;flex-wrap:wrap;gap:12px}.methods span{font-size:13px;padding:14px 17px}.about{background:var(--forest-deep)!important;border-top:1px solid var(--line)}.about h2{font:clamp(55px,8vw,105px)/.95 Instrument Serif;font-weight:400;margin:35px 0}.about h2 em{color:var(--sage)}.about p:last-child{font-size:18px;color:#d8e2da}footer{padding:55px 8vw;background:#061b12;color:white;display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:end;border-top:1px solid var(--line)}footer div{display:flex;flex-direction:column;gap:8px}footer a{color:white}footer small,footer span{color:#aebfb2;font:11px DM Mono}@media(max-width:800px){.links a:not(:last-child){display:none}.hero{padding:8vh 6vw}.hero h1{font-size:23vw}.lede,.actions{margin-left:0}.statement{grid-template-columns:1fr}.grid,.experience-grid,.methods-grid{grid-template-columns:1fr}.section-head{grid-template-columns:45px 1fr}section:not(.hero,.statement){padding:80px 6vw}.stats b{font-size:27px}.timeline>div{grid-template-columns:75px 1fr}footer{grid-template-columns:1fr}.card{min-height:0}}

/* Motion direction: living cells, soft light, and editorial entrances. */
:root{--ease-out: cubic-bezier(.16,1,.3,1)}
section[id],main[id]{scroll-margin-top:100px}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:20;background:linear-gradient(90deg,#b8c9b6,#d6f99c);transform:scaleX(0);transform-origin:left;pointer-events:none;box-shadow:0 0 14px #c7ed9c80}
nav{transition:background .4s,box-shadow .4s}
nav.is-scrolled{background:rgba(6,27,18,.97);box-shadow:0 12px 35px #0002}
.links a,.textlink,footer a{position:relative;width:fit-content}
.links a::after,.textlink::after,footer a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.links a:hover::after,.links a[aria-current]::after,.textlink:hover::after,footer a:hover::after{transform:scaleX(1)}
a:focus-visible{outline:2px solid #d6f99c;outline-offset:7px}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero>*:not(.cell-field){position:relative;z-index:1}
.cell-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero::before{content:'';position:absolute;width:65vw;height:65vw;right:-20vw;top:-15vw;background:radial-gradient(ellipse,#b4d58a1c,transparent 65%);border-radius:50%;pointer-events:none;animation:aurora-drift 16s ease-in-out infinite alternate;z-index:-1}
.hero::after{content:'';position:absolute;width:48vw;height:48vw;right:-7vw;top:9%;border:1px solid #cde5ab18;border-radius:50%;box-shadow:0 0 0 55px #cde5ab06,0 0 0 110px #cde5ab04;pointer-events:none;animation:orbit-breathe 10s ease-in-out infinite;z-index:-1}
.hero-letter{display:inline-block}
.motion-ready .hero-letter{animation:letter-enter 1.3s var(--ease-out) both;animation-delay:calc(100ms + var(--letter) * 55ms)}
.motion-ready .eyebrow{animation:fade-rise 1s var(--ease-out) both}
.motion-ready .lede{animation:fade-rise 1.2s .45s var(--ease-out) both}
.motion-ready .actions{animation:fade-rise 1.2s .65s var(--ease-out) both}
.motion-ready .stats{animation:fade-rise 1.2s .85s var(--ease-out) both}
.eyebrow::before{content:'';display:inline-block;width:6px;height:6px;margin:0 10px 1px 0;border-radius:50%;background:#cfeca7;box-shadow:0 0 0 5px #cfeca710;animation:signal 3s ease-in-out infinite}
.button,.brand{transition:translate .35s var(--ease-out),box-shadow .35s,background .35s;position:relative}
.button{overflow:hidden}
.button::after{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 40%,#fff9 50%,transparent 60%);transform:translateX(-100%);transition:transform .7s}
.button:hover::after{transform:translateX(100%)}
.button:hover{background:#d7e6c0;box-shadow:0 8px 35px #c7ed9c20}
.motion-ready .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
.section-head{position:relative;border-bottom-color:transparent}
.section-head::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.4s .2s var(--ease-out)}
.section-head.is-visible::after{transform:scaleX(1)}
.card,.method-card{position:relative;isolation:isolate;transition:transform .5s var(--ease-out),background .5s,box-shadow .5s}
.card::before,.method-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(450px circle at var(--glow-x,50%) var(--glow-y,50%),#c7ed9c18,transparent 70%);opacity:0;transition:opacity .4s}
@media(hover:hover) and (pointer:fine){
 .motion-ready .card.is-visible:hover,.motion-ready .method-card.is-visible:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);transition-delay:0ms;z-index:2;box-shadow:0 18px 45px #0002;background:#1a422f}
 .card:hover::before,.method-card:hover::before{opacity:1}
 .tags span,.methods span{transition:background .3s,transform .3s,border-color .3s}
 .tags span:hover,.methods span:hover{background:#c7ed9c15;border-color:var(--sage);transform:translateY(-3px)}
}
.about{position:relative;overflow:hidden;isolation:isolate}
.about::after{content:'';position:absolute;z-index:-1;width:500px;height:500px;right:-150px;top:0;background:radial-gradient(circle,#92bb6b16,transparent 70%);animation:aurora-drift 12s ease-in-out infinite alternate}
@keyframes letter-enter{from{opacity:0;transform:translateY(75px) rotate(8deg);filter:blur(12px)}to{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}
@keyframes fade-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes aurora-drift{to{transform:translate(-8%,18%) scale(1.2)}}
@keyframes orbit-breathe{50%{transform:scale(1.08) translateY(15px);opacity:.45}}
@keyframes signal{50%{box-shadow:0 0 0 8px #cfeca700}}
@media(max-width:800px){.hero::after{width:80vw;height:80vw;right:-35vw;top:15%}.actions{flex-wrap:wrap;gap:24px}.cell-field{opacity:.65}.eyebrow{line-height:1.7}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .motion-ready .reveal,.motion-ready .hero-letter{opacity:1;transform:none;filter:none}
 .section-head::after{transform:scaleX(1)}
 .button,.brand{translate:none!important}
 .motion-ready .card.is-visible:hover,.motion-ready .method-card.is-visible:hover{transform:none}
}