:root { --ink:#27251f; --paper:#f2eee5; --sand:#d8cbb7; --clay:#a9583e; --line:rgba(39,37,31,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
.grain { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.09; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.nav { position:absolute; z-index:10; top:0; left:0; width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:12px 42px; color:#f8f4eb; border-bottom:1px solid rgba(255,255,255,.26); }
.brand { font-size:20px; letter-spacing:.2em; font-weight:500; display:flex; align-items:center; gap:14px; }
.brand img { width:96px; height:96px; object-fit:contain; }
.brand span { font-size:8px; vertical-align:top; margin-left:2px; }
.nav nav { display:flex; gap:32px; font-size:13px; }
.nav nav a { opacity:.8; transition:opacity .2s; }.nav nav a:hover{opacity:1}
.nav-cta { justify-self:end; font-size:13px; }.nav-cta span{margin-left:10px}.menu{display:none}
.hero { height:100svh; min-height:720px; position:relative; color:#fff; overflow:hidden; }
.hero-image { position:absolute; inset:0; background:url("assets/sanni-hero.webp") center/cover no-repeat; transform:scale(1.01); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(18,17,14,.6) 0%,transparent 38%); }
.hero-copy { position:absolute; left:6vw; right:6vw; bottom:7vh; max-width:1200px; }
.hero-entry{position:absolute;z-index:3;left:6vw;bottom:7vh;display:flex;align-items:center;gap:24px;text-transform:uppercase;letter-spacing:.17em;font-size:11px}.hero-entry b{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.58);border-radius:50%;font-size:17px;transition:.3s}.hero-entry:hover b{background:#fff;color:var(--ink);transform:translateY(5px)}
.eyebrow,.section-index { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600; }
.hero h1,.manifesto h2,.section-heading h2,.visit h2 { font-family:"DM Sans",sans-serif; font-weight:300; letter-spacing:-.055em; line-height:.96; margin:28px 0; }
.hero h1 { max-width:1050px; font-size:clamp(52px,6vw,92px); }.hero h1 em,.manifesto em,.section-heading em,.visit em{font-weight:300;font-style:normal;color:#dfbfa8}
.intro { max-width:420px; line-height:1.65; font-size:16px; opacity:.88; }
.circle-link { margin-top:38px; width:130px; height:130px; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:15px; font-size:12px; transition:.3s; }.circle-link:hover{background:#fff;color:var(--ink);transform:rotate(-6deg)}
.hero-note { position:absolute; right:42px; bottom:32px; text-align:right; text-transform:uppercase; letter-spacing:.13em; line-height:1.7; font-size:10px; }
.opening{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 7vw;background:#181815;color:#f2eee5}.opening img{position:absolute;width:min(78vw,980px);height:min(78vw,980px);object-fit:contain;opacity:.32;animation:slow-turn 70s linear infinite}.opening>*:not(img){position:relative;z-index:1}.opening .eyebrow{color:#d59a4a}.opening h1{max-width:1100px;margin:34px auto 26px;font-size:clamp(58px,9vw,142px);font-weight:300;letter-spacing:-.065em;line-height:.9}.opening>p:not(.eyebrow){max-width:580px;font-size:16px;line-height:1.8;color:#c9c2b7}.opening>span{margin-top:48px;text-transform:uppercase;letter-spacing:.2em;font-size:10px}@keyframes slow-turn{to{transform:rotate(360deg)}}
.manifesto { display:grid; grid-template-columns:1fr 2fr 1.15fr; gap:50px; padding:150px 6vw 125px; align-items:start; }
.section-index { color:#706a5f; margin:10px 0; }.kicker{font-size:14px;margin:8px 0 34px}.manifesto h2,.section-heading h2{font-size:clamp(64px,8vw,126px);}.manifesto h2{margin:0}.manifesto-copy{align-self:end;line-height:1.8;font-size:15px;max-width:390px;margin-bottom:10px}
.pillars{display:block;margin:0;background:#ddd2c2}.pillars article{min-height:100svh;display:grid;grid-template-columns:58% 42%;position:relative;overflow:hidden;background:#d9cbb8}.pillars article::after{content:"";position:absolute;z-index:0;right:-12vw;top:50%;transform:translateY(-50%);width:48vw;height:48vw;background:url("assets/sanni-swirl-bold.png") center/contain no-repeat;opacity:.09;pointer-events:none}.pillars article:nth-child(even){grid-template-columns:42% 58%;background:#26352d;color:#f1ece2}.pillars article:nth-child(even)::after{right:auto;left:-12vw;opacity:.07}.pillars article img{position:relative;z-index:1;width:100%;height:100svh;display:block;object-fit:cover;filter:saturate(.88)}.pillars article:nth-child(even) img{grid-column:2;grid-row:1}.pillars article:nth-child(1) img{object-position:50% 35%}.pillars article:nth-child(2) img{object-position:center}.pillars article:nth-child(3) img{object-position:center}.pillars article:nth-child(4) img{object-position:55% center}.chapter-copy{position:relative;z-index:1;align-self:center;padding:10vw 7vw}.pillars article:nth-child(even) .chapter-copy{grid-column:1;grid-row:1}.chapter-copy span{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#877968}.pillars article:nth-child(even) .chapter-copy span{color:#c9bb9f}.chapter-copy h3{font-family:"DM Sans",sans-serif;font-size:clamp(70px,8vw,128px);font-weight:300;letter-spacing:-.065em;line-height:.9;margin:28px 0}.chapter-copy p{font-size:16px;line-height:1.8;max-width:390px}.chapter-copy>a{display:block;margin-top:48px;padding-top:18px;border-top:1px solid currentColor;text-transform:uppercase;letter-spacing:.13em;font-size:9px;max-width:390px}.chapter-copy>a:hover{color:#d58c40}.motion-ready .chapter-copy{opacity:0;transform:translateY(45px);transition:opacity .9s ease,transform .9s ease}.motion-ready .is-visible .chapter-copy{opacity:1;transform:none}
.bin-buddies{min-height:100svh;display:grid;grid-template-columns:55% 45%;background:#f05a28;color:#211e19;overflow:hidden}.bin-visual{position:relative;display:grid;place-items:center;padding:7vw;background:#f3dfcd}.bin-visual>img:first-child{position:relative;z-index:2;width:min(100%,700px);height:auto;box-shadow:0 30px 80px rgba(75,37,15,.18);transform:rotate(-2deg)}.bin-swirl{position:absolute;z-index:1;width:80%;height:80%;object-fit:contain;opacity:.18;animation:slow-turn 70s linear infinite}.bin-copy{align-self:center;padding:9vw 7vw}.bin-copy .section-index{color:#5b2b1c}.bin-copy h2{font-size:clamp(64px,8vw,126px);font-weight:300;letter-spacing:-.065em;line-height:.88;margin:35px 0}.bin-copy h2 em{font-style:normal;color:#fff0dc}.bin-copy>p:not(.section-index){max-width:440px;font-size:15px;line-height:1.85}.bin-copy>a{display:inline-block;margin-top:38px;padding-bottom:10px;border-bottom:1px solid currentColor;text-transform:uppercase;letter-spacing:.15em;font-size:10px}.bin-copy>a:hover{color:#fff0dc}
.experiences { background:var(--ink); color:#eee9df; padding:125px 6vw 150px; }.experiences .section-index{color:#aaa296}.section-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:70px}.section-heading h2{margin:0}.experience{display:grid;grid-template-columns:1.1fr 1fr auto;align-items:end;gap:50px;padding:42px 0;border-top:1px solid rgba(255,255,255,.18);transition:.3s}.experience:last-child{border-bottom:1px solid rgba(255,255,255,.18)}.experience:hover{padding-left:20px;color:#e5bda5}.experience h3{font-family:"DM Sans",sans-serif;font-weight:300;letter-spacing:-.04em;font-size:42px;margin:8px 0 0}.experience p{font-size:13px;line-height:1.7;max-width:420px;margin:0}.experience div p{text-transform:uppercase;letter-spacing:.13em;font-size:9px;color:#aaa296}.experience span{font-size:13px}
.story { min-height:760px; display:grid; grid-template-columns:1fr 1fr; }.story-image{background:url("assets/sanni-story.webp") center 32%/cover no-repeat;filter:saturate(.82)}.story-copy{padding:10vw 8vw;display:flex;flex-direction:column;justify-content:center}.story blockquote{font-family:"DM Sans",sans-serif;font-weight:300;letter-spacing:-.045em;font-size:clamp(38px,4vw,64px);line-height:1.08;margin:60px 0 40px}.story-copy>p:not(.section-index){font-size:14px;line-height:1.8;max-width:480px}.story-copy>a{margin-top:38px;border-bottom:1px solid var(--ink);padding-bottom:10px;width:max-content;font-size:13px}.story-copy>a span{margin-left:25px}
.visit{text-align:center;padding:150px 20px;background:#c5a184;color:#302a24}.visit h2{font-size:clamp(65px,9vw,130px);margin:45px 0}.visit h2 em{color:#f4ece0}.visit>a{display:inline-flex;align-items:center;justify-content:center;width:155px;height:155px;border:1px solid #493f35;border-radius:50%;font-size:13px;transition:.3s}.visit>a:hover{background:var(--ink);color:#fff;transform:rotate(5deg)}.visit>a span{margin-left:8px}
footer{padding:85px 6vw 30px;background:#171714;color:#ddd6ca;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:start}footer .brand img{width:150px;height:150px}footer p{font-family:"DM Sans",sans-serif;font-weight:300;font-size:20px;line-height:1.45;margin:0}footer>div{display:flex;justify-content:flex-end;gap:25px;font-size:12px}footer small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:25px;margin-top:55px;font-size:10px;color:#77746e}
@media(max-width:800px){.nav{padding:8px 20px;grid-template-columns:1fr auto}.nav nav,.nav-cta{display:none}.menu{display:block;background:none;border:0;color:#fff;font:inherit}.brand img{width:82px;height:82px}.hero-image{background-position:center}.hero-entry{left:20px;bottom:32px}.opening{padding:100px 20px}.opening img{width:125vw;height:125vw;opacity:.28}.opening h1{font-size:clamp(54px,14vw,92px)}.manifesto{grid-template-columns:1fr;padding:100px 20px;gap:25px}.manifesto h2,.section-heading h2{font-size:58px}.manifesto-copy{margin-top:15px}.pillars{margin:0}.pillars article,.pillars article:nth-child(even){min-height:auto;display:flex;flex-direction:column;grid-template-columns:none}.pillars article img,.pillars article:nth-child(even) img{width:100%;height:70svh;grid-column:auto;grid-row:auto}.chapter-copy,.pillars article:nth-child(even) .chapter-copy{grid-column:auto;grid-row:auto;padding:80px 24px 95px}.chapter-copy h3{font-size:80px}.bin-buddies{grid-template-columns:1fr}.bin-visual{min-height:70svh;padding:13vw 8vw}.bin-copy{padding:90px 24px 110px}.bin-copy h2{font-size:72px}.experiences{padding:90px 20px}.section-heading{display:block}.section-heading h2{margin-top:35px}.experience{grid-template-columns:1fr;gap:18px;align-items:start}.experience h3{font-size:34px}.story{grid-template-columns:1fr}.story-image{min-height:650px;background-position:center 25%}.story-copy{padding:90px 20px}.visit{padding:100px 20px}.visit h2{font-size:56px}footer{grid-template-columns:1fr;padding:70px 20px 30px}footer .brand img{width:120px;height:120px}footer>div{justify-content:flex-start}footer small{margin-top:20px}}
@media(max-width:520px){.brand{font-size:17px}.hero-entry span{max-width:180px;line-height:1.5}.opening h1{font-size:52px}.chapter-copy h3{font-size:70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.opening img{animation:none}}