:root{
  --teal:#1d5e66;--teal-2:#2a7f89;--teal-ink:#123d42;
  --plum:#6a3c61;--plum-2:#8b5480;--plum-ink:#45263f;
  --ink:#141618;--body:#393d3e;--muted:#5b5f60;
  --paper:#eef0ee;--paper-2:#e4e7e4;--card:#f7f8f6;--rule:#cfd4d1;
  --on-dark:#f3f4f2;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.5}
::selection{background:var(--teal);color:var(--on-dark)}
p{margin:0}
h1,h2,h3,h4{margin:0;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--teal-2);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 44px}
.narrow>*{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--ease),background .25s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-dark{background:var(--ink);color:var(--on-dark);box-shadow:0 10px 30px -12px rgba(20,22,24,.6)}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-light{background:var(--on-dark);color:var(--ink)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.link{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}


.fin .logo{height:26px;width:auto;vertical-align:middle;margin-right:10px}

section{position:relative}
.sec{padding:120px 0}
.sec.tight{padding:88px 0}
.kicker{font-size:15px;font-weight:700;color:var(--muted)}
.h2{font-size:clamp(34px,4.6vw,62px);font-weight:900;letter-spacing:-.04em}
.lead{font-size:clamp(19px,1.7vw,22px);color:var(--body);line-height:1.5;max-width:58ch}
.sec.dark{background:var(--ink);color:var(--on-dark)}
.sec.dark .lead{color:rgba(243,244,242,.78)}
.sec.alt{background:var(--paper-2)}
.sec.tealdark{background:var(--teal-ink);color:var(--on-dark)}
.sec.tealdark .lead{color:rgba(243,244,242,.78)}

.hero{min-height:84svh;display:flex;flex-direction:column;justify-content:center;padding-top:56px;padding-bottom:64px}
.hero h1{font-size:clamp(44px,6.2vw,92px);font-weight:900;letter-spacing:-.045em;line-height:.97;max-width:17ch}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--teal),var(--plum));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin-top:26px;font-size:clamp(18px,1.6vw,21px);color:var(--body);max-width:52ch}
.hero .cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.hero.split h1{font-size:clamp(40px,4.8vw,72px)}
.hero.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}

.duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;height:min(62vh,580px)}
.duo figure{margin:0;border-radius:28px;overflow:hidden;position:relative}
.duo figure:nth-child(2){transform:translateY(44px)}
.duo img{width:100%;height:100%;object-fit:cover;display:block}
.duo .scrim{position:absolute;inset:0}
.duo .scrim.t{background:linear-gradient(0deg,rgba(18,61,66,.85),rgba(18,61,66,0) 55%)}
.duo .scrim.p{background:linear-gradient(0deg,rgba(69,38,63,.85),rgba(69,38,63,0) 55%)}
.duo figcaption{position:absolute;left:18px;bottom:16px;color:#fff;font-weight:800;font-size:22px;letter-spacing:-.02em;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.loopmark{position:absolute;left:50%;top:50%;width:132px;height:132px;transform:translate(-50%,-26%);filter:drop-shadow(0 10px 26px rgba(0,0,0,.4));z-index:2}
.loopmark .spin{transform-origin:100px 100px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loopmark .spin{animation:none}}

.onephoto{border-radius:28px;overflow:hidden;position:relative;aspect-ratio:4/5}
.onephoto img{width:100%;height:100%;object-fit:cover;display:block}
.onephoto .tag{position:absolute;left:18px;top:18px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:800;color:#fff}
.tag.t{background:var(--teal)}.tag.p{background:var(--plum)}

.stats{margin-top:64px;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.stat{grid-column:span 4;background:rgba(243,244,242,.05);border:1px solid rgba(243,244,242,.1);border-radius:24px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px;min-height:270px}
.stat.wide{grid-column:span 6}
.stat .n{font-size:clamp(50px,5.6vw,80px);font-weight:900;letter-spacing:-.05em;line-height:.9}
.stat .n.t{color:#8fd0d6}.stat .n.p{color:#e0a9d4}
.stat p{font-size:17px;color:rgba(243,244,242,.9);line-height:1.45}
.stat cite{margin-top:auto;font-style:normal;font-size:13px;color:rgba(243,244,242,.55);line-height:1.4}

.pull{margin-top:80px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;max-width:980px}
.pull .mark{width:56px;height:4px;margin-top:22px;background:linear-gradient(90deg,var(--teal-2) 50%,var(--plum-2) 50%)}
.pull .q{font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pull .by{margin-top:14px;font-size:15px;color:rgba(243,244,242,.6)}

.layers{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.layer{border-radius:24px;padding:32px 28px;display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--rule)}
.layer .n{font-size:14px;font-weight:800;color:var(--muted)}
.layer h3{font-size:30px;letter-spacing:-.03em}
.layer p{color:var(--body);font-size:17px;line-height:1.55}
.layer.one h3{color:var(--teal)}.layer.two h3{color:var(--plum)}.layer.three h3{color:var(--ink)}

.ladder{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.rung{border-radius:20px;padding:26px 24px;background:var(--card);border:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;position:relative}
.rung q{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.02em;quotes:"\201C" "\201D";line-height:1.2}
.rung span{font-size:15px;font-weight:700;color:var(--muted)}
.rung:nth-child(2){background:#eaf1f1}
.rung:nth-child(3){background:var(--teal);border-color:var(--teal);color:var(--on-dark)}
.rung:nth-child(3) span{color:rgba(243,244,242,.75)}
.ladder-note{margin-top:22px;font-size:18px;font-weight:600;max-width:60ch}

.progs{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pcard{border-radius:28px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--on-dark);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,22,24,.5)}
.pcard img{width:100%;height:230px;object-fit:cover;object-position:center 36%;display:block}
.pcard .b{padding:30px 30px 34px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard.d .b{background:var(--teal)}
.pcard.l .b{background:var(--plum)}
.pcard .cap{font-size:15px;font-weight:700;opacity:.85}
.pcard h3{font-size:clamp(34px,3.4vw,46px);font-weight:900;letter-spacing:-.04em}
.pcard p{font-size:18px;line-height:1.45;opacity:.95}
.pcard .go{margin-top:auto;padding-top:10px;font-weight:800;display:flex;align-items:center;gap:8px}
.pcard .go svg{width:18px;height:18px}

.tg{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.tg svg{width:100%;height:auto}
.tg svg text{font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif}
.vs{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs div{border-radius:20px;padding:22px;background:var(--card);border:1px solid var(--rule)}
.vs b{display:block;font-size:15px;color:var(--muted);margin-bottom:6px}
.vs p{font-size:18px;font-weight:700;line-height:1.3}
.vs .both{grid-column:1/-1;background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.vs .both b{color:rgba(243,244,242,.6)}

.steps{margin-top:40px;list-style:none;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--rule)}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.d-steps .dot{background:var(--teal)}.l-steps .dot{background:var(--plum)}
.steps .dot svg{width:20px;height:20px}
.steps h4{font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.steps p{color:var(--body);font-size:17px;line-height:1.55}

.outs{margin-top:44px;border-radius:24px;padding:32px 30px 28px;color:var(--on-dark)}
.outs.d{background:var(--teal)}.outs.l{background:var(--plum)}
.outs h4{font-size:18px;margin-bottom:16px}
.outs ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.outs li{position:relative;padding-left:24px;font-size:17px;font-weight:600;line-height:1.4}
.outs li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;border:2px solid rgba(243,244,242,.9)}

.changes{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.change{background:var(--card);border-radius:18px;padding:18px 20px;border:1px solid var(--rule)}
.change .was{font-size:14px;color:var(--muted);font-weight:600;text-decoration:line-through;text-decoration-color:rgba(91,95,96,.5)}
.change .now{margin-top:4px;font-size:17px;font-weight:700;line-height:1.3}

.quote{margin-top:36px;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.3;padding-left:22px;border-left:3px solid var(--rule)}
.quote small{display:block;margin-top:8px;font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}

.fmt-toggle{margin-top:44px;display:inline-flex;padding:6px;border-radius:999px;background:rgba(243,244,242,.08);border:1px solid rgba(243,244,242,.14)}
.fmt-toggle button{height:48px;padding:0 24px;border-radius:999px;border:0;background:transparent;color:rgba(243,244,242,.8);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s var(--ease)}
.fmt-toggle button[aria-pressed="true"]{background:var(--on-dark);color:var(--ink)}
.track{margin-top:40px}
.track[hidden]{display:none}
.phases{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.phase{border-radius:22px;padding:28px 26px;min-height:180px;display:flex;flex-direction:column;gap:8px;color:var(--on-dark)}
.phase.t{background:var(--teal)}.phase.p{background:var(--plum)}
.phase .w{font-size:14px;font-weight:700;opacity:.8}
.phase h4{font-size:30px;letter-spacing:-.03em;line-height:1.05}
.phase p{font-size:17px;line-height:1.5;opacity:.9;max-width:44ch}
.days{display:grid;grid-template-columns:.9fr 1.2fr .9fr 1fr .9fr;gap:12px}
.slot{border-radius:20px;padding:22px 20px;min-height:170px;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(243,244,242,.16);color:var(--on-dark)}
.slot .w{font-size:14px;font-weight:700;opacity:.75}
.slot h4{font-size:20px;letter-spacing:-.02em;line-height:1.15}
.slot p{font-size:15px;line-height:1.45;opacity:.85}
.slot.t{background:var(--teal)}.slot.p{background:var(--plum)}.slot.g{background:transparent;border-style:dashed}
.map-note{margin-top:24px;display:flex;align-items:center;gap:14px;font-size:16px;color:rgba(243,244,242,.8)}
.map-note .thread{flex:none;width:48px;height:3px;background:linear-gradient(90deg,#8fd0d6 50%,#e0a9d4 50%);border-radius:2px}

.who3{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.who3 article{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.who3 h3{font-size:24px;letter-spacing:-.02em}
.who3 .pain{font-size:18px;font-weight:700;line-height:1.35}
.who3 p{color:var(--body);font-size:17px;line-height:1.5}

details{border-top:1px solid var(--rule)}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:34px;width:12px;height:12px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(-135deg);top:40px}
details .a{padding:0 0 28px;color:var(--body);font-size:18px;line-height:1.6;max-width:62ch}

.oran{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.mono{width:200px;height:200px;border-radius:50%;background:conic-gradient(from 180deg,var(--teal) 0 50%,var(--plum) 50% 100%);display:grid;place-items:center;color:#fff;font-size:66px;font-weight:900;letter-spacing:-.05em}
.oran .line1{font-size:clamp(26px,2.8vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.creds{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.creds span{padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--rule);font-size:15px;font-weight:700}

.close{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-ink) 48%,var(--plum-ink) 52%,var(--plum) 100%);color:var(--on-dark);text-align:center}
.close .h2{max-width:17ch;margin:0 auto}
.close .lead{margin:24px auto 0;color:rgba(243,244,242,.85)}
.close .alt{margin-top:36px;font-size:17px;color:rgba(243,244,242,.85)}
.close .alt a{text-decoration:none;border-bottom:1px solid rgba(243,244,242,.5)}

.nextup{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.nextup a{text-decoration:none;border-radius:24px;padding:28px 30px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--rule);background:var(--card);transition:transform .3s var(--ease)}
.nextup a:hover{transform:translateY(-3px)}
.nextup .k{font-size:14px;font-weight:700;color:var(--muted)}
.nextup h3{font-size:28px;letter-spacing:-.03em}
.nextup.d a:first-child h3{color:var(--plum)}
.nextup p{color:var(--body);font-size:16px;line-height:1.45}

footer.fin{padding:34px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--rule)}
footer.fin .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.fin a{text-decoration:none}
footer.fin a:hover{color:var(--ink)}

@media (max-width:980px){
  .wrap{padding:0 22px}
  .sec,.sec.tight{padding:76px 0}
  .hero.split,.tg,.layers,.ladder,.progs,.who3,.oran,.vs,.outs ul,.changes,.nextup,.phases{grid-template-columns:1fr}
  .days{grid-template-columns:1fr 1fr}
  .stat,.stat.wide{grid-column:span 12;min-height:0}
  .duo{height:380px}
  .mono{width:140px;height:140px;font-size:46px}
  .pull{grid-template-columns:1fr;gap:12px}
}
@media (max-width:520px){
  .days{grid-template-columns:1fr}
  .duo{height:320px}
  .loopmark{width:96px;height:96px}
}

.tealdark .vs div{background:rgba(243,244,242,.07);border-color:rgba(243,244,242,.16)}
.tealdark .vs b{color:rgba(243,244,242,.6)}
.outs ul{grid-template-columns:1fr}
@media (max-width:980px){.hero{min-height:0;padding-top:40px}}

/* site header: mirrors geniusworks.co.za */
.site{position:sticky;top:0;z-index:40;background:rgba(238,240,238,.94);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(20,22,24,.08)}
.bar1{display:flex;justify-content:space-between;align-items:center;height:64px}
.glogo{line-height:0}
.glogo img{height:36px;width:auto}
.gnav{font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.gnav summary{display:none;list-style:none;cursor:pointer}
.gnav summary::-webkit-details-marker{display:none}
.gnav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.gnav a{text-decoration:none;color:#1d2d5c}
.gnav a:hover,.gnav a[aria-current]{color:#f4564e}
.bar2{border-top:1px solid rgba(20,22,24,.06)}
.bar2i{display:flex;justify-content:space-between;align-items:center;height:56px;gap:16px}
.tabs{display:flex;gap:6px}
.tabs a{padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;color:var(--body)}
.tabs a:hover{background:rgba(20,22,24,.05)}
.tabs a[aria-current]{background:var(--ink);color:var(--on-dark)}
.btn.sm{height:40px;padding:0 18px;font-size:15px}
.proof{margin-top:26px;font-size:14px;color:var(--muted);line-height:1.6;max-width:56ch}
.proof b{color:var(--ink);font-weight:700}
.mcta{display:none}
.fin .wrap{flex-direction:column;align-items:flex-start;gap:14px}
.fin .f1,.fin .f2{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.fin .f3{font-size:13px}
@media (max-width:980px){
  .gnav summary{display:block;color:#1d2d5c}
  .gnav details[open] ul{position:absolute;right:16px;top:58px;flex-direction:column;gap:16px;background:#fff;padding:20px 24px;border-radius:16px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
  .bar2 .btn{display:none}
  .tabs{width:100%;justify-content:space-between}
  .tabs a{flex:1;text-align:center;padding:8px 6px;font-size:14px}
  .mcta{display:flex;justify-content:center;align-items:center;gap:8px;position:fixed;left:16px;right:16px;bottom:16px;z-index:45;height:52px;border-radius:999px;background:var(--ink);color:var(--on-dark);font-weight:700;text-decoration:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
  .mcta svg{width:18px;height:18px}
  footer.fin{padding-bottom:96px}
}
.gnav details{border:0}
.gnav summary{padding:0;font-size:13px;letter-spacing:.06em;line-height:1}
.gnav summary::after{display:none}

/* Look inside (3D layers) */
.xp{background:#0f1415;color:var(--on-dark);overflow:hidden}
.xp .lead{color:rgba(243,244,242,.75)}
.xpg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:center}
.xp .after{margin-top:18px;min-height:3em;font-size:18px;line-height:1.5;color:rgba(243,244,242,.8);transition:opacity .5s}
.xp .stage{position:relative;height:min(70vh,640px);touch-action:pan-y;cursor:grab}
.xp .stage:active{cursor:grabbing}
.xp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.xp .tag{position:absolute;left:0;top:0;width:230px;pointer-events:none}
.xp .tag b{display:block;font-size:22px;font-weight:900;letter-spacing:-.02em}
.xp .tag span{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:rgba(243,244,242,.75)}
.xp .tag i{display:block;width:34px;height:2px;margin-bottom:10px}
.xp .drag{position:absolute;right:8px;bottom:6px;font-size:13px;color:rgba(243,244,242,.45)}
.xp .stage.flat{height:auto;display:grid;gap:14px;cursor:default}
.xp .stage.flat .tag{position:static;width:auto;opacity:1!important;transform:none!important;padding:20px;border:1px solid rgba(243,244,242,.16);border-radius:18px}
.xp .stage.flat .drag{display:none}
@media (max-width:980px){.xpg{grid-template-columns:1fr}.xp .stage{height:62vh}.xp .tag{width:160px}.xp .tag b{font-size:18px}.xp .tag span{font-size:12.5px}}
section[id]{scroll-margin-top:124px}