*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--butter:#FFFBE6;--black:#1A1A1A;--dark:#2D2D2D;--pink:#FF6B8A;--teal:#4ECDC4;--yellow:#FFD93D;--purple:#6C5CE7;--coral:#FF8A5C;--mint:#A8E6CF}
body{background:var(--black);font-family:'Nunito',sans-serif;font-size:15px;line-height:1.7;color:var(--dark);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sprinkle{position:fixed;width:4px;height:16px;border-radius:2px;pointer-events:none;z-index:10}
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;max-width:1100px;margin:6px auto;padding:0 6px}
.cell{border:3px solid var(--black);padding:32px;position:relative;overflow:visible}
.hero-cell{grid-column:span 8;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sidebar-cell{grid-column:span 4}
.sq-cell{grid-column:span 3}
.wide-cell{grid-column:span 9}
.dot-cell{grid-column:span 3;background-image:radial-gradient(circle,rgba(26,26,26,0.08) 3px,transparent 3px);background-size:20px 20px;background-color:var(--butter);min-height:120px}
.bg-butter{background:var(--butter)}
.bg-pink{background:var(--pink)}
.bg-teal{background:var(--teal)}
.bg-yellow{background:var(--yellow)}
.bg-purple{background:var(--purple)}
.bg-coral{background:var(--coral)}
.bg-mint{background:var(--mint)}
.hero-name{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:100px;color:var(--black);transform:rotate(-3deg);line-height:1}
.squiggly{width:300px;height:20px;margin-top:8px}
.hero-sub{font-family:'Archivo Black',sans-serif;font-size:44px;color:var(--purple);margin-top:4px}
.cell-label{font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;display:block;margin-bottom:8px}
.cell-label.light{color:var(--butter)}
.cell-label.dark{color:var(--black)}
h2{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:32px;color:var(--black);margin-bottom:12px}
h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:22px;color:var(--black);margin-bottom:8px}
.bg-purple h2,.bg-purple h3,.bg-purple p{color:var(--butter)}
.bg-pink p,.bg-pink h2,.bg-pink h3{color:var(--black)}
.project-list{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px}
.project-item{flex:1;min-width:200px}
.geo-overflow{position:absolute;pointer-events:none}
.geo-half-circle{top:-30px;right:40px;width:60px;height:30px}
.geo-triangle{bottom:-20px;right:-10px;width:40px;height:40px}
.geo-zigzag{bottom:-10px;left:20px;width:60px;height:20px}
.terrazzo{background-image:radial-gradient(circle 4px at 20% 30%,rgba(255,107,138,0.15) 100%,transparent 100%),radial-gradient(circle 3px at 60% 70%,rgba(108,92,231,0.15) 100%,transparent 100%),radial-gradient(circle 5px at 80% 20%,rgba(255,217,61,0.15) 100%,transparent 100%),radial-gradient(circle 3px at 40% 80%,rgba(78,205,196,0.15) 100%,transparent 100%);background-color:var(--mint)}
.card-reveal{opacity:0;transform:scale(0);transition:opacity 0.3s,transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.card-reveal.in-view{opacity:1;transform:scale(1)}
.cell:hover{filter:brightness(1.1);transition:filter 0.2s}
.footer{max-width:1100px;margin:6px auto;padding:16px 24px;display:flex;justify-content:space-between;color:var(--butter);font-size:13px}
@media(max-width:768px){.bento-grid{grid-template-columns:1fr}.hero-cell,.sidebar-cell,.sq-cell,.wide-cell,.dot-cell{grid-column:span 1}.hero-name{font-size:56px}h2{font-size:28px}}