*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --soil:#231209;--bark:#3d2010;--terra:#a0522d;--clay:#c17b3f;
  --ochre:#c8960c;--sand:#e8d5b0;--linen:#f0e8d8;--cream:#faf6ee;
  --warm:#fdfaf4;--ash:#8c7b6b;--mist:#d8c9b0;--gold:#b8960a;
  --nred:#cc2200;--nblue:#003366;--ngold:#c8960c;
  --fd:'Cormorant Garamond',Georgia,serif;--fb:'Jost',system-ui,sans-serif;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--fb);background:var(--warm);color:var(--soil);font-size:15px;line-height:1.75;font-weight:300;overflow-x:hidden}

/* ── VIDEO OVERLAY ── */
.v-overlay{position:fixed;inset:0;z-index:2000;background:var(--soil);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1.4s,visibility 1.4s}
.v-overlay.gone{opacity:0;visibility:hidden;pointer-events:none}
.v-geo{position:absolute;inset:0;opacity:.09;pointer-events:none}
.v-logo{position:relative;z-index:2;text-align:center;margin-bottom:44px;animation:fadeUp .9s ease .2s both}
.v-logo-name{font-family:var(--fd);font-size:clamp(44px,8vw,96px);font-weight:300;letter-spacing:.18em;color:var(--sand);text-transform:uppercase;line-height:1}
.v-logo-sub{font-family:var(--fb);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--clay);margin-top:10px}
.v-frame{position:relative;z-index:2;width:min(800px,88vw);animation:fadeUp .9s ease .55s both}
.v-border{border:1px solid rgba(200,150,12,.3);padding:3px}
.v-screen{background:#110804;aspect-ratio:16/9;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.v-screen-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.v-play{width:68px;height:68px;border:1.5px solid rgba(200,150,12,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;position:relative;z-index:2}
.v-play:hover{background:rgba(200,150,12,.15);border-color:var(--clay)}
.v-play::after{content:'';width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:19px solid var(--clay);margin-left:4px}
.v-caption{font-family:var(--fd);font-style:italic;font-size:15px;color:var(--mist);margin-top:22px;text-align:center;position:relative;z-index:2;letter-spacing:.04em}
.v-skip{position:absolute;bottom:36px;right:44px;font-family:var(--fb);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);cursor:pointer;z-index:3;border:none;background:transparent;transition:color .3s;animation:fadeUp .9s ease 1.6s both}
.v-skip:hover{color:var(--sand)}
.v-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--clay);animation:bar 8s linear .5s forwards}
@keyframes bar{from{width:0}to{width:100%}}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--warm);border-bottom:1px solid var(--mist);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;transition:background .4s,border-color .4s}
nav.dark{background:var(--soil);border-color:rgba(255,255,255,.07)}
.n-logo{font-family:var(--fd);font-size:21px;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:var(--soil);text-decoration:none;display:flex;align-items:center;gap:9px}
nav.dark .n-logo{color:var(--sand)}
.n-mark{width:26px;height:26px;flex-shrink:0}
.n-links{display:flex;gap:38px;list-style:none}
.n-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);text-decoration:none;transition:color .3s}
.n-links a:hover{color:var(--terra)}
nav.dark .n-links a{color:var(--mist)}
nav.dark .n-links a:hover{color:var(--clay)}
.n-right{display:flex;gap:24px;align-items:center}
.n-right a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);text-decoration:none;transition:color .3s}
nav.dark .n-right a{color:var(--mist)}

/* ── HERO ── */
.hero{margin-top:60px;display:grid;grid-template-columns:56% 44%;min-height:calc(100vh - 60px)}
.h-left{background:var(--soil);display:flex;flex-direction:column;justify-content:flex-end;padding:80px 68px;position:relative;overflow:hidden}
.h-ndebele-bg{position:absolute;inset:0;opacity:.07;pointer-events:none}
.h-eye{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);margin-bottom:26px;position:relative;z-index:1;display:flex;align-items:center;gap:13px;animation:fadeUp .9s ease .3s both}
.h-eye::before{content:'';width:26px;height:1px;background:var(--clay)}
.h-title{font-family:var(--fd);font-size:clamp(56px,7.2vw,100px);font-weight:300;line-height:.95;color:var(--sand);margin-bottom:34px;position:relative;z-index:1;animation:fadeUp .9s ease .5s both}
.h-title em{font-style:italic;color:var(--clay)}
.h-body{font-size:14px;color:var(--mist);line-height:1.9;max-width:400px;margin-bottom:52px;position:relative;z-index:1;animation:fadeUp .9s ease .7s both}
.h-btns{display:flex;gap:14px;position:relative;z-index:1;animation:fadeUp .9s ease .9s both}
.btn-p{display:inline-block;padding:14px 38px;background:var(--clay);color:var(--soil);font-family:var(--fb);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s;cursor:pointer;border:none}
.btn-p:hover{background:var(--ochre)}
.btn-ol{display:inline-block;padding:13px 38px;border:1px solid rgba(232,213,176,.35);color:var(--sand);font-family:var(--fb);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .3s;cursor:pointer;background:transparent}
.btn-ol:hover{background:rgba(232,213,176,.1);border-color:var(--sand)}
.btn-dk{display:inline-block;padding:13px 38px;border:1px solid var(--bark);color:var(--soil);font-family:var(--fb);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .3s;cursor:pointer;background:transparent}
.btn-dk:hover{background:var(--soil);color:var(--cream)}
.h-right{background:var(--linen);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.h-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;z-index:2;animation:fadeUp .9s ease 1.2s both}
.scroll-ln{width:1px;height:44px;background:var(--ash);position:relative;overflow:hidden}
.scroll-ln::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--clay);animation:scrollD 2.2s ease-in-out infinite}
@keyframes scrollD{0%{top:-100%}100%{top:100%}}
.scroll-tx{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);writing-mode:vertical-rl}

/* ── MARQUEE ── */
.mq{background:var(--nred);overflow:hidden;white-space:nowrap;height:42px;display:flex;align-items:center}
.mq-i{display:inline-flex;align-items:center;animation:mq 32s linear infinite}
.mq-i span{font-family:var(--fd);font-size:14px;font-style:italic;color:rgba(255,255,255,.88);letter-spacing:.06em;margin:0 28px}
.mq-i .dot{font-style:normal;color:rgba(255,255,255,.35);font-size:18px;margin:0 2px}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── NDEBELE DIVIDER ── */
.ndiv{height:8px;background:repeating-linear-gradient(90deg,var(--nred) 0,var(--nred) 38px,var(--soil) 38px,var(--soil) 46px,var(--ngold) 46px,var(--ngold) 84px,var(--soil) 84px,var(--soil) 92px,var(--nblue) 92px,var(--nblue) 130px,var(--soil) 130px,var(--soil) 138px,var(--warm) 138px,var(--warm) 176px,var(--soil) 176px,var(--soil) 184px)}

/* ── INTRO ── */
.s-intro{padding:110px 80px;background:var(--warm);display:grid;grid-template-columns:1fr 1.7fr;gap:90px;align-items:center}
.s-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);display:flex;align-items:center;gap:11px;margin-bottom:24px}
.s-label::before{content:'';width:20px;height:1px;background:var(--terra)}
.s-title{font-family:var(--fd);font-size:clamp(38px,4.2vw,58px);font-weight:300;line-height:1.05;color:var(--soil)}
.s-title em{font-style:italic;color:var(--terra)}
.ub-sym{width:76px;height:76px;margin-bottom:28px}
.s-body{font-size:14px;color:var(--bark);line-height:1.95;margin-bottom:18px}
.s-quote{font-family:var(--fd);font-size:21px;font-style:italic;color:var(--terra);border-left:2px solid var(--clay);padding-left:22px;margin:36px 0;line-height:1.5}

/* ── CATEGORIES ── */
.s-cats{background:var(--soil)}
.cats-hd{padding:76px 80px 56px;display:flex;align-items:flex-end;justify-content:space-between}
.s-title-lt{font-family:var(--fd);font-size:clamp(36px,3.8vw,52px);font-weight:300;color:var(--sand);line-height:1.1}
.s-title-lt em{color:var(--clay);font-style:italic}
.cats-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:2px;background:var(--bark)}
.cc{background:var(--soil);overflow:hidden;position:relative;cursor:pointer}
.cc:nth-child(1){grid-column:span 2}
.cc-vis{min-height:300px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cc:nth-child(1) .cc-vis{min-height:460px}
.cc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(35,18,9,.88) 0%,rgba(35,18,9,.1) 50%,transparent 100%);z-index:1;transition:background .5s}
.cc:hover .cc-ov{background:linear-gradient(to top,rgba(35,18,9,.96) 0%,rgba(35,18,9,.35) 60%,rgba(35,18,9,.06) 100%)}
.cc-svg{position:absolute;inset:0;width:100%;height:100%}
.cc-info{position:absolute;bottom:0;left:0;right:0;padding:32px;z-index:2;transform:translateY(0);transition:transform .4s}
.cc:hover .cc-info{transform:translateY(-6px)}
.cc-num{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:6px}
.cc-title{font-family:var(--fd);font-size:28px;font-weight:300;color:var(--sand);line-height:1.1;margin-bottom:8px}
.cc:nth-child(1) .cc-title{font-size:44px}
.cc-sub{font-size:12px;color:var(--mist);letter-spacing:.05em;opacity:0;transform:translateY(7px);transition:all .4s .04s}
.cc:hover .cc-sub{opacity:1;transform:translateY(0)}
.cc-arr{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);opacity:0;transition:opacity .4s}
.cc:hover .cc-arr{opacity:1}

/* ── OBJECTS ── */
.s-obj{padding:110px 80px;background:var(--linen)}
.obj-hd{display:grid;grid-template-columns:1fr 2fr;gap:80px;margin-bottom:72px;align-items:end}
.obj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mist)}
.oc{background:var(--warm);overflow:hidden;cursor:pointer;transition:transform .4s}
.oc:hover{transform:translateY(-5px)}
.oc-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ob1{background:#e8d5b0}.ob2{background:#ddd0be}.ob3{background:#e0d8cc}.ob4{background:#d8cfc4}
.oc-info{padding:22px 22px 30px;border-top:1px solid var(--mist)}
.oc-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin-bottom:7px}
.oc-name{font-family:var(--fd);font-size:21px;font-weight:300;color:var(--soil);margin-bottom:7px;line-height:1.2}
.oc-orig{font-size:12px;color:var(--ash);line-height:1.7}

/* ── UBUNTU ── */
.s-ubuntu{display:grid;grid-template-columns:1fr 1fr;min-height:88vh}
.ub-vis{background:var(--terra);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:80px}
.ub-geo{position:absolute;inset:0;opacity:.08}
.ub-txt{background:var(--cream);padding:96px 76px;display:flex;flex-direction:column;justify-content:center}
.ub-big{font-family:var(--fd);font-size:110px;font-weight:300;color:var(--linen);line-height:1;margin-bottom:-16px}
.ub-head{font-family:var(--fd);font-size:clamp(40px,4.8vw,62px);font-weight:300;color:var(--soil);line-height:1.1;margin-bottom:30px}
.ub-head em{font-style:italic;color:var(--terra)}
.ub-body{font-size:14px;color:var(--bark);line-height:1.95;margin-bottom:18px;max-width:480px}
.ub-pillars{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.ub-p{padding:22px;border:1px solid var(--mist);border-left:3px solid var(--clay)}
.ub-p-ln{width:26px;height:1px;background:var(--clay);margin-bottom:10px}
.ub-p-t{font-family:var(--fd);font-size:17px;font-weight:300;color:var(--soil);margin-bottom:7px}
.ub-p-b{font-size:12px;color:var(--ash);line-height:1.8}

/* ── DISCIPLINES SCROLL ── */
.s-disc{padding:0;background:var(--warm)}
.disc-hd{padding:96px 80px 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.disc-scroll{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 80px 96px}
.disc-scroll::-webkit-scrollbar{display:none}
.dc{flex:0 0 310px;background:var(--linen);border:1px solid var(--mist);overflow:hidden;cursor:pointer;transition:transform .4s}
.dc:hover{transform:translateY(-7px)}
.dc-vis{height:250px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.dc-info{padding:26px 26px 34px;border-top:1px solid var(--mist)}
.dc-tag{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin-bottom:9px}
.dc-title{font-family:var(--fd);font-size:25px;font-weight:300;color:var(--soil);margin-bottom:9px;line-height:1.2}
.dc-desc{font-size:13px;color:var(--ash);line-height:1.85}

/* ── ORIGINS ── */
.s-orig{background:var(--soil);padding:110px 80px;display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.orig-list{display:flex;flex-direction:column;gap:0;margin-top:44px}
.orig-it{display:grid;grid-template-columns:1fr auto;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;transition:padding .3s}
.orig-it:hover{padding-left:10px}
.orig-nm{font-family:var(--fd);font-size:21px;font-weight:300;color:var(--sand)}
.orig-rg{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--clay);margin-top:3px}
.orig-ar{color:var(--clay);font-size:17px;opacity:0;transition:opacity .3s}
.orig-it:hover .orig-ar{opacity:1}

/* ── EDITORIAL ── */
.s-ed{background:var(--warm);padding:0}
.ed-hd{padding:96px 80px 0;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:60px}
.ed-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2px;background:var(--mist)}
.edc{background:var(--warm);overflow:hidden;cursor:pointer}
.edc-vis{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ed1{background:var(--linen)}.ed2{background:#e0d5c4}.ed3{background:#d8cdb8}
.edc-info{padding:26px 26px 38px}
.edc-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin-bottom:11px}
.edc-title{font-family:var(--fd);font-size:23px;font-weight:300;color:var(--soil);line-height:1.25;margin-bottom:11px}
.edc:first-child .edc-title{font-size:30px}
.edc-ex{font-size:13px;color:var(--ash);line-height:1.85}
.ed-link{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--terra);text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:2px;transition:color .3s}
.ed-link:hover{color:var(--bark)}

/* ── NEWSLETTER ── */
.s-nl{background:var(--bark);padding:96px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;overflow:hidden}
.nl-eye{font-size:10px;letter-spacing:.2em;color:#F2882F;text-transform:uppercase;margin-bottom:9px}
.nl-bg{position:absolute;inset:0;opacity:.05;pointer-events:none}
.nl-title{font-family:var(--fd);font-size:clamp(34px,3.8vw,50px);font-weight:300;color:var(--sand);line-height:1.1;position:relative;z-index:1}
.nl-title em{color:var(--clay);font-style:italic}
.nl-body{font-size:14px;color:var(--mist);line-height:1.9;margin-top:18px;position:relative;z-index:1}
.nl-form{display:flex;flex-direction:column;position:relative;z-index:1}
.nl-in{background:transparent;border:none;border-bottom:1px solid rgba(232,213,176,.3);padding:15px 0;font-family:var(--fb);font-size:14px;font-weight:300;color:var(--sand);outline:none;transition:border-color .3s;margin-bottom:4px}
.nl-in::placeholder{color:rgba(200,185,165,.45)}
.nl-in:focus{border-color:var(--clay)}
.nl-btn{margin-top:26px;padding:15px 42px;background:var(--clay);color:var(--soil);font-family:var(--fb);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;border:none;cursor:pointer;transition:background .3s;align-self:flex-start}
.nl-btn:hover{background:var(--ochre)}
.nl-legal{font-size:11px;color:rgba(200,185,165,.45);margin-top:14px;line-height:1.7}

/* ── FOOTER ── */
footer{background:var(--soil);padding:76px 80px 0;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:44px;border-top:1px solid rgba(255,255,255,.05)}
.f-brand{font-family:var(--fd);font-size:30px;font-weight:300;letter-spacing:.12em;color:var(--sand);text-transform:uppercase;margin-bottom:14px}
.f-brand span{color:var(--clay)}
.f-tag{font-size:13px;color:var(--ash);line-height:1.85;max-width:270px;margin-bottom:28px}
.f-soc{display:flex;gap:18px}
.f-sl{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s;font-size:11px;color:var(--ash);text-decoration:none}
.f-sl:hover{border-color:var(--clay);color:var(--clay)}
.f-ct{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-bottom:18px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.f-col ul li a{font-size:13px;color:var(--ash);text-decoration:none;transition:color .3s}
.f-col ul li a:hover{color:var(--sand)}
.f-bot{margin-top:56px;border-top:1px solid rgba(255,255,255,.06);padding:22px 0;display:flex;justify-content:space-between;align-items:center;grid-column:1/-1}
.f-bot p{font-size:11px;color:var(--ash);letter-spacing:.05em}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s ease}
.reveal.vis{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 0 24px; }
  .n-links { display: none; }
  .hero { grid-template-columns: 1fr; }
  .h-right { display: none; }
  .s-intro, .s-ubuntu, .s-orig, .s-nl { grid-template-columns: 1fr; }
  .ed-grid, .obj-grid { grid-template-columns: 1fr; }
  .cats-grid { grid-template-columns: 1fr; }
  .cc:nth-child(1) { grid-column: span 1; }
  footer { grid-template-columns: 1fr 1fr; }
  .s-intro, .s-obj, .s-ubuntu, .s-disc, .s-orig, .s-ed, .s-nl, .cats-hd, .obj-hd, .disc-hd, .ed-hd { padding-left: 24px !important; padding-right: 24px !important; }
}