*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F0EDE4;color:#061E26;font-family:'Nunito Sans',sans-serif;font-weight:400;font-size:17px;line-height:1.72;overflow-x:hidden}

/* Grain overlay */
.grain-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");opacity:0.08;mix-blend-mode:multiply}

/* Hex nav */
.hex-nav{position:fixed;top:20px;left:20px;z-index:100;display:flex;flex-direction:column;gap:8px}
.nav-hex{display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:transform 0.3s ease}
.nav-hex:hover{transform:rotate(30deg)}
.nav-hex:hover svg{transform:rotate(-30deg)}

/* Scenes */
.scene{min-height:100vh;position:relative;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Section titles */
.section-title{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:0.08em;text-transform:uppercase;color:#0B3D4A;text-align:center;margin-bottom:clamp(24px,4vw,48px)}

/* Opening scene */
.scene-opening{background:linear-gradient(180deg,#061E26,#0B3D4A);min-height:100vh}
.center-hex{position:relative;width:clamp(240px,50vw,400px);height:clamp(270px,56vw,460px);display:flex;align-items:center;justify-content:center}
.hex-outline{position:absolute;inset:0;width:100%;height:100%}
.draw-hex{stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 2s ease-out}
.draw-visible .draw-hex{stroke-dashoffset:0}

.site-title{font-family:'Belleza',serif;font-size:clamp(2rem,5vw,4rem);color:#F0EDE4;letter-spacing:0.04em;text-align:center;opacity:0;transition:opacity 1s ease 0.5s}
.center-hex.visible .site-title{opacity:1}

/* Satellite hexes */
.satellite-hexes{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,2vw,16px);margin-top:clamp(16px,3vw,32px);max-width:600px}
.sat-hex{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#0B3D4A;width:clamp(80px,14vw,120px);height:clamp(90px,16vw,138px);display:flex;align-items:center;justify-content:center;transition:background 0.3s ease}
.sat-hex:hover{background:#1A6B5A}
.sat-hex span{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(0.7rem,1.2vw,0.9rem);letter-spacing:0.08em;text-transform:uppercase;color:#F0EDE4}

/* Scroll indicator */
.scroll-indicator{position:absolute;bottom:clamp(24px,4vw,48px);animation:pulseHex 2s ease-in-out infinite}
@keyframes pulseHex{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:0.6}}

/* Knowledge Hive */
.scene-hive{background:#F0EDE4}
.hex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px;max-width:1100px;width:100%}
.hex-grid > .hex-cell:nth-child(even){margin-top:-20px}

.hex-cell{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#0B3D4A;padding:clamp(28px,4vw,44px) clamp(20px,3vw,32px);text-align:center;min-height:clamp(200px,30vw,280px);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:background 0.3s ease,transform 0.3s ease}
.hex-cell::before{content:'';position:absolute;inset:8px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);border:0.5px solid rgba(126,200,184,0.2);pointer-events:none}
.hex-cell:hover{background:#1A6B5A;transform:scale(1.03)}
.hex-cell h3{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:clamp(1rem,1.8vw,1.3rem);letter-spacing:0.06em;text-transform:uppercase;color:#F0EDE4;margin-bottom:6px}
.hex-cell p{font-family:'Nunito Sans',sans-serif;font-size:clamp(0.8rem,1.2vw,0.9rem);color:#C8D6D2;line-height:1.5;max-width:22ch}
.hex-data{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:#D4A762;letter-spacing:0.08em;margin-top:8px;display:block}

/* Material Flow River */
.scene-river{background:#061E26;padding-top:clamp(60px,8vw,100px);padding-bottom:clamp(60px,8vw,100px)}
.scene-river .section-title{color:#F0EDE4}
.river-band{width:100%;max-width:1000px;overflow:hidden}
.river-svg{display:block}
.river-path{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.5s ease-out}
.river-visible .rp1{stroke-dashoffset:0;transition-delay:0s}
.river-visible .rp2{stroke-dashoffset:0;transition-delay:0.3s}
.river-visible .rp3{stroke-dashoffset:0;transition-delay:0.6s}
.river-visible .rp4{stroke-dashoffset:0;transition-delay:0.9s}
.river-label{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:#7EC8B8;letter-spacing:0.1em}

/* Deep well */
.scene-deep{background:#F0EDE4}
.reading-well{max-width:680px;width:100%}
.reading-content p{margin-bottom:1.2rem;color:#061E26}
.drop-cap{font-family:'Belleza',serif;font-size:3.2rem;float:left;margin-right:8px;line-height:0.8;color:#0B3D4A}

/* Hex pullquote */
.hex-pullquote{margin:clamp(24px,4vw,48px) auto;text-align:center;position:relative;padding:clamp(20px,3vw,32px)}
.pullquote-mark{font-family:'Belleza',serif;font-size:4rem;color:#D4A762;line-height:1;display:block}
.hex-pullquote p{font-family:'Belleza',serif;font-size:clamp(1.2rem,2.5vw,1.8rem);color:#0B3D4A;letter-spacing:0.02em;font-style:italic}

/* Coastal decorations */
.coastal-deco{position:fixed;pointer-events:none;z-index:3;opacity:0.4;animation:coastalBob 20s ease-in-out infinite}
.d1{right:3vw;top:30vh}
.d2{left:5vw;bottom:20vh;animation-delay:-10s}
@keyframes coastalBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Reveal animations */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s cubic-bezier(0.23,1,0.32,1),transform 0.6s cubic-bezier(0.23,1,0.32,1);transition-delay:var(--delay,0s)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Hex cell reveal stagger */
.hex-cell{opacity:0;transform:translateY(20px) scale(0.95);transition:opacity 0.5s cubic-bezier(0.23,1,0.32,1),transform 0.5s cubic-bezier(0.23,1,0.32,1),background 0.3s ease}
.hex-cell.visible{opacity:1;transform:translateY(0) scale(1)}

/* Responsive */
@media(max-width:768px){
.hex-grid{grid-template-columns:repeat(2,1fr)}
.hex-grid > .hex-cell:nth-child(even){margin-top:0}
.hex-nav{top:12px;left:12px;flex-direction:row}
}
@media(max-width:480px){
.hex-grid{grid-template-columns:1fr}
.sat-hex{width:80px;height:92px}
}