*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1A1A;color:#3D3D3D;font-family:'Fira Sans',sans-serif;font-weight:400;overflow-x:hidden}
.header{padding:24px 5vw}.footer{padding:24px 5vw;text-align:center;background:#2D6A4F;color:#F4F1EC}
.label{font-family:'Fira Sans',sans-serif;font-weight:700;font-size:clamp(0.7rem,1.2vw,0.8rem);letter-spacing:0.15em;text-transform:uppercase;color:#3D3D3D}
.display-title{font-family:'Fira Sans',sans-serif;font-weight:300;font-size:clamp(2.4rem,5vw,4.8rem);letter-spacing:0.08em;text-transform:uppercase;color:#1A1A1A;position:relative;z-index:2;text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.pull-quote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1.6rem,3.5vw,2.8rem);color:#3D3D3D;line-height:1.4}
p{font-size:clamp(0.95rem,1.8vw,1.15rem);line-height:1.65;letter-spacing:0.01em}

/* BENTO GRID */
.bento{max-width:1400px;margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding-bottom:40px}
.cell{overflow:hidden;position:relative;opacity:0;transform:scale(0.85) translateY(20px)}
.cell.visible{opacity:1;transform:scale(1) translateY(0);transition:opacity 0.5s ease-out,transform 0.5s cubic-bezier(0.34,1.56,0.64,1)}

/* Cell types */
.aquarium{background:#0077B6;min-height:280px;display:flex;align-items:center;justify-content:center}
.text-cell{background:#B8B4AD;padding:32px;display:flex;flex-direction:column;gap:12px;background-image:repeating-conic-gradient(rgba(0,0,0,0.02) 0% 25%,transparent 0% 50%);background-size:4px 4px}
.accent-cell{min-height:120px}
.accent-cerulean{background:#0077B6}
.accent-coral{background:#E76F51}
.accent-jade{background:#2D6A4F}

/* Cell placement */
.c-hero{grid-column:1/8;grid-row:span 2}
.c-about{grid-column:8/11}
.accent-cell:nth-child(3){grid-column:11/13}
.c-tank-1{grid-column:1/5;grid-row:span 2}
.c-philosophy{grid-column:5/9}
.accent-cell:nth-child(6){grid-column:9/10}
.c-quote{grid-column:5/10}
.c-tank-2{grid-column:10/13;grid-row:span 2}
.accent-cell:nth-child(9){grid-column:1/3}
.c-explore{grid-column:3/7}
.c-tank-3{grid-column:7/10}
.c-contact{grid-column:10/13}
.accent-cell:nth-child(13){grid-column:1/3}

/* Water backgrounds */
.water-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,119,182,0.3) 0%,rgba(0,119,182,0.7) 100%);z-index:0}
.water-deep{background:linear-gradient(180deg,rgba(0,60,100,0.5) 0%,rgba(0,40,70,0.8) 100%)}
.water-jade{background:linear-gradient(180deg,rgba(45,106,79,0.3) 0%,rgba(45,106,79,0.7) 100%)}

/* Fish animations */
.fish{position:absolute;z-index:1}
.fish-1{width:60px;top:20%;left:10%;animation:fishDrift 8s ease-in-out infinite}
.fish-2{width:50px;top:50%;left:60%;animation:fishDrift 10s ease-in-out infinite reverse}
.fish-3{width:40px;top:70%;left:35%;animation:fishDrift 12s ease-in-out infinite}
.fish-drift{width:70px;top:30%;left:15%;animation:fishDrift 9s ease-in-out infinite}
.fish-drift-2{width:45px;top:60%;left:55%;animation:fishDrift 11s ease-in-out infinite reverse}
.fish-slow{width:55px;top:40%;left:25%;animation:fishDrift 14s ease-in-out infinite}
@keyframes fishDrift{0%,100%{transform:translateX(0) translateY(0)}25%{transform:translateX(30px) translateY(-8px)}50%{transform:translateX(60px) translateY(5px)}75%{transform:translateX(25px) translateY(-3px)}}

.footer .label{color:#F4F1EC}

/* Palette reference */
.ref-concrete-dark{color:#3D3D3D}
.ref-aggregate{color:#1A1A1A}
.ref-shuttered{color:#B8B4AD}
.ref-paper{color:#F4F1EC}

@media(max-width:768px){
.bento{grid-template-columns:1fr}
.c-hero,.c-about,.c-tank-1,.c-philosophy,.c-quote,.c-tank-2,.c-explore,.c-tank-3,.c-contact,.accent-cell{grid-column:1/-1;grid-row:auto}
.aquarium{min-height:200px}
}