:root { --night:#0b1518; --ink:#eef4ed; --muted:#a8bbb6; --line:#294247; --mint:#a8e2c8; --clay:#d89068; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--ink); font:16px/1.6 system-ui,-apple-system,sans-serif; }
.nav { width:min(1160px,calc(100% - 64px)); margin:auto; padding:28px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.nav a { color:var(--muted); text-decoration:none; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }.nav .brand { color:var(--ink); font-weight:750; letter-spacing:.22em; }
main { width:min(1160px,calc(100% - 64px)); margin:auto; }.hero { position:relative; min-height:680px; padding:16vh 0 12vh; overflow:hidden; background:radial-gradient(ellipse at 80% 35%,#1e4340 0,#0b1518 55%); }
.kicker { color:var(--mint); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; }.hero h1 { position:relative; z-index:1; max-width:850px; margin:24px 0; font:500 clamp(3.3rem,8vw,7.6rem)/.94 Georgia,serif; letter-spacing:-.055em; }.hero h1 em { color:var(--mint); font-style:normal; }.lede { position:relative; z-index:1; max-width:500px; color:var(--muted); font-size:1.15rem; }.button { position:relative; z-index:1; display:inline-flex; gap:32px; margin-top:38px; padding:13px 18px; border:1px solid var(--mint); color:var(--mint); text-decoration:none; font-size:.8rem; text-transform:uppercase; letter-spacing:.13em; }.button span { font-size:1.1rem; line-height:.8; }
.fracture { position:absolute; inset:0 0 0 42%; pointer-events:none; opacity:.92; }.fracture:before { content:""; position:absolute; width:28vw; height:28vw; right:4%; top:12%; border-radius:50%; background:radial-gradient(circle,#b8f2d3 0 2%,#62b89b 4%,#244e4a 18%,transparent 63%); box-shadow:0 0 90px #62b89b66; animation:pulse 6s ease-in-out infinite; }.fracture:after { content:""; position:absolute; width:72%; height:2px; top:49%; left:4%; background:linear-gradient(90deg,transparent,#a8e2c8,#d89068,transparent); transform:rotate(-17deg); box-shadow:0 0 22px #a8e2c8; }.crack { position:absolute; height:1px; background:#a8e2c8aa; transform-origin:left center; box-shadow:0 0 8px #a8e2c866; }.crack-a { width:55%; top:49%; left:18%; transform:rotate(17deg); }.crack-b { width:42%; top:51%; left:23%; transform:rotate(-43deg); }
.boon { position:absolute; display:block; width:30px; height:72px; border-radius:50% 50% 45% 45%; background:linear-gradient(180deg,#e1ffe9,#6fc9a7 60%,#2d6b60); box-shadow:0 0 22px #a8e2c8cc; animation:rise 7s ease-in-out infinite; }.boon:before,.boon:after { content:""; position:absolute; top:25px; width:10px; height:26px; border-radius:100%; background:#b7f2d3; }.boon:before { left:-13px; transform:rotate(35deg); }.boon:after { right:-13px; transform:rotate(-35deg); }.boon-a { right:34%; top:27%; transform:scale(1.1); }.boon-b { right:20%; top:43%; transform:scale(.7); animation-delay:1.4s; }.boon-c { right:46%; top:50%; transform:scale(.5); animation-delay:2.8s; }
.signal { display:grid; grid-template-columns:90px 1fr; gap:20px; padding:62px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.signal span,.principle-grid span { color:var(--clay); font-size:.8rem; letter-spacing:.1em; }.signal p { max-width:700px; margin:0; font:clamp(1.5rem,3vw,2.3rem)/1.2 Georgia,serif; }
.project { display:grid; grid-template-columns:1fr 1fr; min-height:580px; align-items:center; gap:10%; padding:110px 0; }.project-mark { min-height:330px; display:grid; place-items:center; border:1px solid #3f5a55; background:radial-gradient(circle,#254842 0,#122627 52%,#0b1518 75%); color:var(--mint); font:700 clamp(4rem,12vw,10rem)/1 Georgia,serif; letter-spacing:-.08em; }.project-copy h2,.contact h2 { margin:12px 0 22px; font:500 clamp(2.3rem,5vw,4.5rem)/1 Georgia,serif; letter-spacing:-.04em; }.project-copy p:not(.kicker) { max-width:520px; color:var(--muted); }.status { display:inline-block; margin-top:18px; padding:7px 10px; background:#172b2c; color:var(--mint); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.principles { padding:90px 0; border-top:1px solid var(--line); }.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:45px; }.principle-grid article { min-height:235px; padding:24px; border:1px solid var(--line); transition:transform .35s,background .35s,border-color .35s; outline:none; }.principle-grid article:hover,.principle-grid article:focus { transform:translateY(-8px); background:#142b2c; border-color:var(--mint); }.principle-grid h3 { margin:20px 0 10px; font:500 1.75rem/1.1 Georgia,serif; }.principle-grid p { color:var(--muted); max-width:270px; }.principle-grid b { display:block; margin-top:20px; color:var(--mint); font-size:.72rem; font-weight:500; letter-spacing:.04em; }
.contact { padding:100px 0 150px; }.email { color:var(--mint); font-size:1.1rem; }.contact h2 { color:var(--mint); } footer { width:min(1160px,calc(100% - 64px)); margin:auto; padding:30px 0 42px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:32px; color:var(--muted); font-size:.75rem; } footer p { margin:5px 0; } footer strong { color:var(--ink); letter-spacing:.16em; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease,transform .8s ease; }.reveal.visible { opacity:1; transform:none; } @keyframes rise { 0%,100% { margin-top:12px; } 50% { margin-top:-18px; } } @keyframes pulse { 0%,100% { transform:scale(.96); opacity:.72; } 50% { transform:scale(1.05); opacity:1; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.boon,.fracture:before,.reveal { animation:none; transition:none; }.reveal { opacity:1; transform:none; } }
@media (max-width:700px) { .nav,main,footer { width:calc(100% - 40px); }.hero { min-height:570px; }.fracture { left:20%; opacity:.65; }.signal,.project { display:block; }.signal p { margin-top:20px; }.project { padding:80px 0; }.project-mark { min-height:230px; margin-bottom:60px; }.principle-grid { grid-template-columns:1fr; gap:20px; }.contact { padding-bottom:100px; } footer { display:block; } footer div+div { margin-top:25px; } }