:root{--bg:#1E1F22;--bg2:#26272B;--card:#2E3035;--card2:#383A40;--acc:#FFB400;--acct:#FFB400;--onacc:#17181A;--text:#FFFFFF;--muted:#BFC1C6;--line:rgba(255,255,255,.12);--r:0px;--hf:"Manrope"}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 "Manrope",sans-serif}
a{color:inherit;text-decoration:none}h1,h2,h3{font-family:var(--hf),sans-serif;margin:0;letter-spacing:-.01em;font-weight:700}
header.site{display:flex;justify-content:space-between;align-items:center;padding:26px 72px;position:relative;z-index:5}
.wordmark{font-family:var(--hf);font-weight:800;font-size:24px;letter-spacing:.01em}.wordmark span{color:var(--acct)}
header nav{display:flex;gap:26px;font-size:15px;font-weight:500;align-items:center}header nav a{color:var(--muted)}header nav a.on{color:var(--acct)}
header nav a:last-child{background:var(--acc);color:var(--onacc);padding:10px 20px;border-radius:var(--r);font-weight:700}
.btn{display:inline-block;background:var(--acc);color:var(--onacc);font-weight:700;padding:16px 30px;border-radius:var(--r);font-size:16px;border:0;cursor:pointer;font-family:"Manrope"}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--line),inset 0 0 0 2px rgba(255,255,255,.45);margin-left:14px}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding:60px 72px 90px;min-height:720px;position:relative;overflow:hidden}
.hello{font-family:var(--hf);font-weight:600;font-size:24px;color:var(--acct);margin-bottom:6px}
.hero h1{font-size:120px;line-height:.95;font-weight:800;letter-spacing:-.02em}.hero h1 .n2{color:var(--acct)}
.role{font-family:var(--hf);font-size:26px;font-weight:600;margin:18px 0 0}.role mark{background:none;color:var(--acct)}
.hero p.sub{font-size:19px;color:var(--muted);max-width:560px;margin:20px 0 36px}
.portrait{position:relative;height:600px;display:flex;align-items:center;justify-content:center}
.portrait span{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;width:300px;padding:8px 12px;border-radius:var(--r)}
.fig{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:62%;height:78%;border-radius:999px 999px 0 0}
.fig:before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-26%;width:46%;aspect-ratio:1;border-radius:50%;background:inherit}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:0 72px 40px}
.stat{background:var(--card);border-radius:var(--r);padding:28px 26px;border:1px solid var(--line)}
.stat b{display:block;font-family:var(--hf);font-size:46px;line-height:1;font-weight:800;color:var(--acct);margin-bottom:10px}.stat span{color:var(--muted);font-size:15px;line-height:1.4;display:block}
.featured{display:flex;gap:28px;align-items:center;padding:28px 72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.featured .lab{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.featured .names{font-family:var(--hf);font-weight:700;font-size:26px}.featured .dot{color:var(--acct);margin:0 18px}
.sec{padding:100px 72px}.sec.alt{background:var(--bg2)}.sec-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px}
.kick{display:block;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acct);margin-bottom:12px}
.sec-h h2{font-size:60px;line-height:1.02;font-weight:800;max-width:860px}.sec-h a{font-weight:700;color:var(--acct)}
.talks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.talk{background:var(--card);border-radius:var(--r);padding:36px;border:1px solid var(--line)}
.talk .num{font-family:var(--hf);font-weight:800;font-size:64px;line-height:1;color:var(--acct)}
.talk h3{font-size:25px;line-height:1.2;margin:18px 0 14px}.talk p{color:var(--muted);font-size:15px}.talk .meta{color:var(--text)}.talk ul{padding-left:18px;color:var(--muted);font-size:14.5px}
.ventures{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.venture{background:var(--card);border-radius:var(--r);padding:30px;min-height:240px;display:flex;flex-direction:column;border:1px solid var(--line)}
.venture h3{font-size:26px}.venture p{color:var(--muted);flex:1}.go{font-weight:700;color:var(--acct)}
.venture:first-child{background:var(--acc);color:var(--onacc);border:0}.venture:first-child p,.venture:first-child .go{color:var(--onacc)}
.cta{margin:0 72px 100px;background:var(--card);border-radius:calc(var(--r)*1.6);padding:72px;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;border:1px solid var(--line)}
.cta h2{font-size:58px;font-weight:800;line-height:1.02}.cta p{color:var(--muted);font-size:18px}
.newsletter{padding:0 72px 100px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.newsletter h2{font-size:42px;font-weight:800}.newsletter p{color:var(--muted);margin:6px 0 0}
.newsletter form{display:flex;gap:10px;grid-column:2;grid-row:1/3}.newsletter input{flex:1;padding:16px 22px;border-radius:var(--r);border:2px solid rgba(255,255,255,.4);font:inherit;background:var(--card);color:var(--text)}
.newsletter input::placeholder,.contact ::placeholder{color:var(--muted)}
footer.site{background:var(--bg2);color:var(--muted);padding:48px 72px;display:grid;grid-template-columns:1fr 2fr;gap:12px;border-top:1px solid var(--line)}
.f-word{font-family:var(--hf);font-weight:800;font-size:36px;color:var(--text)}.f-links{display:flex;gap:26px;justify-content:flex-end;align-items:center;font-weight:500}.f-note{grid-column:1/-1;font-size:13px}
.pagehero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:50px 72px 80px;position:relative;overflow:hidden}
.pagehero h1{font-size:104px;font-weight:800;line-height:.95}.pagehero h1 .n2{color:var(--acct)}.pagehero p{font-size:20px;color:var(--muted);max-width:640px;margin:22px 0 30px}
.pagehero .portrait{height:480px}
.ph{background:linear-gradient(150deg,var(--card) 0%,var(--card2) 100%);border-radius:var(--r);min-height:300px;display:flex;align-items:flex-end;position:relative;overflow:hidden;border:1px solid var(--line)}
.ph span{position:relative;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);padding:18px 22px}
.prose{font-size:19px;line-height:1.7;max-width:900px}.prose h2{font-size:44px;font-weight:800;margin-bottom:18px}.prose p{color:var(--muted)}.prose .tags{color:var(--acct);font-weight:700}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.creds{width:100%;border-collapse:separate;border-spacing:0 10px}.creds th{text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 22px}
.creds td{background:var(--card);padding:22px;font-size:16px}.creds td:first-child{border-radius:var(--r) 0 0 var(--r)}.creds td:last-child{border-radius:0 var(--r) var(--r) 0}
.creds .cat{font-weight:700;color:var(--acct);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.creds .when{color:var(--muted)}
.schema-note{color:var(--muted);font-size:14px;margin-top:10px}a.ext{color:var(--acct);font-weight:700}
.bios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.bio{background:var(--card);border-radius:var(--r);padding:28px;font-size:15px;color:var(--muted);border:1px solid var(--line)}.bio h3{font-size:22px;margin-bottom:10px;color:var(--acct)}
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.formats div{background:var(--card);border-radius:var(--r);padding:28px}.formats h3{font-size:28px;color:var(--acct)}.formats p{color:var(--muted)}
.reel{min-height:520px}.quote{font-family:var(--hf);font-size:42px;font-weight:700;line-height:1.15;max-width:1000px}.quote small{display:block;font-family:"Manrope";font-size:14px;color:var(--muted);margin-top:20px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product{background:var(--card);border-radius:var(--r);padding:18px 18px 28px;border:1px solid var(--line)}.product .ph{min-height:240px}
.product h3{font-size:24px;margin:22px 10px 8px;line-height:1.15}.product p{color:var(--muted);margin:0 10px 10px;font-size:15px}.product .meta{color:var(--text)}.buy{display:flex;justify-content:space-between;align-items:center;margin:20px 10px 0}
.price{font-family:var(--hf);font-weight:800;font-size:24px}.product .btn{padding:12px 20px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--card);border-radius:var(--r);padding:40px}.contact label{font-weight:700;font-size:14px;display:flex;flex-direction:column;gap:8px}
.contact .wide{grid-column:1/-1}.contact input,.contact select,.contact textarea{font:16px "Manrope";padding:15px 18px;border:2px solid rgba(255,255,255,.35);border-radius:var(--r);background:var(--bg);color:var(--text)}.contact .btn{justify-self:start}
.side h3{font-size:32px;font-weight:800;margin-bottom:10px}.side p{color:var(--muted);font-size:17px}
.press{display:grid;grid-template-columns:1fr 1fr;gap:20px}.press-item{background:var(--card);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line)}
.press .pub{font-family:var(--hf);font-weight:800;font-size:30px}.press .ttl{font-size:18px}.press .pdate{color:var(--muted)}.press .purl{font-weight:700;color:var(--acct);margin-top:10px}

header.site{border-bottom:6px solid var(--acc)}
.hello{display:inline-block;background:var(--acc);color:var(--onacc);padding:4px 14px;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.hero h1{text-transform:uppercase;font-size:118px;margin-top:18px}.hero h1 .n2{color:var(--text)}
.hl{background:var(--acc);color:var(--onacc);padding:0 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.role mark{background:var(--acc);color:var(--onacc);padding:0 8px}
.p-block .blk{position:absolute;width:62%;height:78%;right:2%;top:2%;background:var(--acc)}
.p-block .frame{position:absolute;width:62%;height:80%;left:10%;bottom:4%;background:linear-gradient(170deg,#4A4C52,#2E3035);overflow:hidden}
.p-block .fig{background:#5C5F66}.p-block span{background:var(--bg);color:var(--text);border-radius:0;width:280px}
.p-block .bar{position:absolute;left:0;bottom:0;width:30%;height:16px;background:var(--acc)}
.stats{padding-top:0}.stat{border:0;border-top:8px solid var(--acc)}
.sec-h h2{text-transform:none;font-size:56px;max-width:1040px}.sec-h h2:before{content:"";display:block;width:90px;height:10px;background:var(--acc);margin-bottom:22px}
.talk{border:0;border-left:8px solid var(--acc)}
.cta{background:var(--acc);color:var(--onacc);border:0}.cta p{color:var(--onacc)}.cta .btn{background:var(--bg);color:var(--text)}
.cta:after{content:"";position:absolute;right:0;top:0;width:180px;height:100%;background:repeating-linear-gradient(90deg,rgba(23,24,26,.12) 0 20px,transparent 20px 40px)}
.pagehero h1{text-transform:uppercase;line-height:1.08}.pagehero h1 .n2{background:var(--acc);color:var(--onacc);padding:0 14px;display:inline-block;line-height:1;margin:6px 0}
footer.site{border-top:6px solid var(--acc)}
.p-block .stage-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,180,0,.10) 0 2px,transparent 2px 46px),linear-gradient(180deg,transparent 55%,rgba(255,180,0,.18))}
.docstack{position:relative;height:480px}.docstack div{position:absolute;width:300px;height:390px}
.docstack .d1{background:var(--acc);right:40px;top:0}.docstack .d2{background:var(--card2);right:110px;top:36px}
.docstack .d3{background:var(--card);right:180px;top:72px;border-top:10px solid var(--acc);padding:34px 30px}
.docstack b{display:block;font-family:var(--hf);font-size:30px;line-height:1.1;text-transform:uppercase;margin-bottom:26px}
.docstack i{display:block;height:10px;background:rgba(255,255,255,.14);margin:0 0 14px}.docstack i:nth-of-type(2){width:80%}.docstack i:nth-of-type(3){width:60%}
.docstack span{position:absolute;left:30px;bottom:26px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.infopanel{background:var(--acc);color:var(--onacc);padding:44px 44px 48px;align-self:center}
.infopanel h3{font-size:34px;text-transform:uppercase;margin-bottom:20px}.infopanel dl{display:grid;grid-template-columns:130px 1fr;gap:12px 18px;margin:0 0 30px;font-size:16px}
.infopanel dt{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.1em;padding-top:2px}.infopanel dd{margin:0}
.infopanel .btn{background:var(--bg);color:var(--text)}
.contact-sec{grid-template-columns:1fr 1.7fr}.side h3{text-transform:uppercase;font-size:28px}.side h3:before{content:"";display:block;width:60px;height:8px;background:var(--acc);margin-bottom:16px}
.ph{border:0}.ph:after{content:"";position:absolute;left:0;bottom:0;width:30%;height:8px;background:var(--acc)}
.reel{background:linear-gradient(160deg,#34363B,#26272B);min-height:560px;align-items:center;justify-content:center}
.reel:before{content:"";position:absolute;width:120px;height:120px;background:var(--acc);left:50%;top:50%;transform:translate(-50%,-50%)}
.reel:after{width:100%;height:8px}
.reel span{position:absolute;left:0;bottom:16px}
.reel i.play{position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:34px solid var(--onacc);border-top:22px solid transparent;border-bottom:22px solid transparent;z-index:1}
.formats div{border-top:8px solid var(--acc)}.formats h3{text-transform:uppercase;font-size:24px}
.quote{border-left:10px solid var(--acc);padding-left:40px}
.contact{border-top:10px solid var(--acc)}.contact input:focus,.contact select:focus,.contact textarea:focus{outline:3px solid var(--acc)}

/* ---- restraint: remove large yellow areas ---- */
header.site{border-bottom:1px solid var(--line)}footer.site{border-top:1px solid var(--line)}
header nav a.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--acc)}
header nav a:last-child{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.wordmark span{color:var(--acc)}
.hello{background:none;color:var(--muted);padding:0;font-size:18px;letter-spacing:.14em}
.hello:after,.kick:after{content:"";display:block;width:36px;height:2px;background:var(--acc);margin-top:10px}
.kick{color:var(--muted)}
.role mark{background:none;color:var(--acc);padding:0}
.hl{background:none;color:inherit;padding:0}
.pagehero h1 .n2{background:none;color:inherit;padding:0;margin:0;display:inline;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:5px;text-underline-offset:12px}
.sec-h h2:before{width:48px;height:3px}
.sec-h a,.go,.press .purl,a.ext{color:var(--text);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:5px}
.p-block .blk{background:transparent;box-shadow:inset 0 0 0 2px var(--acc)}
.p-block .bar{display:none}
.stat{border:0;border-top:2px solid var(--acc);background:var(--card)}.stat b{color:var(--acc)}
.talk{border:1px solid var(--line);border-top:2px solid var(--acc)}.talk .num{color:var(--muted)}
.venture:first-child{background:var(--card);color:var(--text);border:1px solid var(--line)}.venture:first-child p{color:var(--muted)}.venture:first-child .go{color:var(--text)}
.cta{background:var(--card);color:var(--text);border:1px solid var(--line);border-top:2px solid var(--acc)}.cta p{color:var(--muted)}.cta:after{display:none}
.cta .btn{background:var(--acc);color:var(--onacc)}
.newsletter .btn{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.creds .cat,.bio h3,.formats h3{color:var(--text)}.creds .cat{color:var(--muted)}
.featured .dot{color:var(--muted)}.prose .tags{color:var(--text)}
.ph:after{height:2px;width:48px}.reel:before{background:transparent;box-shadow:inset 0 0 0 2px var(--acc)}.reel i.play{border-left-color:var(--text)}
.formats div{border-top:2px solid var(--acc)}.quote{border-left:2px solid var(--acc)}.contact{border-top:2px solid var(--acc)}.side h3:before{height:2px;width:36px}
.docstack .d1{background:transparent;box-shadow:inset 0 0 0 2px var(--acc)}.docstack .d3{border-top:2px solid var(--acc)}
.infopanel{background:var(--card);color:var(--text);border-top:2px solid var(--acc)}.infopanel .btn{background:var(--acc);color:var(--onacc)}

/* ---- light pages; header + hero form the single charcoal band ---- */
:root{--bg:#FAFAF8;--bg2:#F2F2EF;--card:#FFFFFF;--card2:#ECECE8;--text:#1E1F22;--muted:#55585F;--line:rgba(30,31,34,.12);--acct:#1E1F22}
header.site,.hero,.pagehero{background:#1E1F22;--acct:#FFFFFF;--text:#FFFFFF;--muted:#BFC1C6;--line:rgba(255,255,255,.14);--card:#2E3035;--bg:#1E1F22;color:#fff}
header.site{border-bottom:0}
.hero{padding-bottom:110px}.stats{padding-top:72px}
.p-block span{background:#1E1F22;color:#fff}
.stat,.talk,.venture,.cta,.press-item,.bio,.product,.formats div,.contact{box-shadow:0 1px 0 rgba(30,31,34,.04)}
.stat{border:1px solid var(--line);border-top:2px solid var(--acc)}
.stat b{color:var(--text)}
.featured{background:var(--bg)}
.sec.alt{background:var(--bg2)}
.creds td{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--text)}
.newsletter input,.contact input,.contact select,.contact textarea{background:#fff;border:1.5px solid rgba(30,31,34,.35);color:var(--text)}
footer.site{background:var(--bg2)}
.sec,.cta{}


/* ---- Manrope already set above; imagery breaks for 27-light-imagery ---- */
.img-band{margin:0;padding:0;position:relative;overflow:hidden;background:#1E1F22}
.img-band img{display:block;width:100%;height:420px;object-fit:cover;object-position:center}
.img-band figcaption{position:absolute;left:72px;bottom:28px;background:rgba(30,31,34,.78);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px}
.speaking-band img{height:460px;object-position:center 40%}
.facade-band img{height:360px;object-position:center}
.hero-skyline{display:none} /* skyline used as hero overlay instead */

.hero.has-skyline{isolation:isolate}
.hero.has-skyline:before{content:"";position:absolute;inset:0;background-image:var(--skyline);background-size:cover;background-position:70% center;opacity:.28;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,rgba(0,0,0,.55) 62%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,rgba(0,0,0,.55) 62%,#000 100%)}
.hero.has-skyline > *{position:relative;z-index:1}

.img-divider{margin:0;padding:48px 72px 8px;background:var(--bg);text-align:center}
.img-divider img{display:block;width:min(920px,100%);height:auto;margin:0 auto;opacity:.92}
.img-divider.tight{padding:28px 72px 0}

.talk.has-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.talk-img{height:200px;background-size:cover;background-position:center;border-bottom:2px solid var(--acc)}
.talk-body{padding:28px 28px 32px}
.talk.has-img .num{margin-top:0}

.cta.has-pattern{position:relative;overflow:hidden}
.cta.has-pattern:before{content:"";position:absolute;right:0;top:0;bottom:0;width:42%;background-image:var(--pattern);background-size:cover;background-position:center;opacity:.9;mask-image:linear-gradient(90deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);pointer-events:none}
.cta.has-pattern > *{position:relative;z-index:1}

.media-strip{padding:80px 72px}
.media-strip-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.media-copy h2{font-size:48px;line-height:1.05;font-weight:800;text-transform:none;max-width:640px;margin:0 0 18px}
.media-copy h2:before{content:"";display:block;width:48px;height:3px;background:var(--acc);margin-bottom:22px}
.media-copy p{color:var(--muted);font-size:18px;max-width:480px;margin:0 0 28px}
.media-photo{margin:0;border:1px solid var(--line);box-shadow:0 1px 0 rgba(30,31,34,.04);overflow:hidden;background:var(--card)}
.media-photo img{display:block;width:100%;height:380px;object-fit:cover}
.media-photo:after{content:"";display:block;width:48px;height:2px;background:var(--acc);margin:0}

@media (max-width:980px){
  .talks{grid-template-columns:1fr}
  .media-strip-grid{grid-template-columns:1fr}
  .img-band img{height:280px}
  .img-band figcaption{left:24px;bottom:16px}
  .img-divider{padding-left:24px;padding-right:24px}
}


/* ---- social icons ---- */
.socials{display:flex;gap:10px;align-items:center}
header.site{gap:18px;flex-wrap:wrap}
header.site nav{margin-left:auto}
.header-socials{margin-left:18px}
.soc{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:0;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.soc svg{width:16px;height:16px;fill:currentColor}
header.site .soc{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
header.site .soc:hover{background:#FFB400;color:#17181A;box-shadow:none}
footer.site .footer-socials{grid-column:1/-1;margin:8px 0 4px}
footer.site .soc{color:#1E1F22}
footer.site .soc:hover{background:#FFB400;color:#17181A;box-shadow:none}

/* ---- hero photo beside copy on page heroes ---- */
.pagehero{grid-template-columns:1.15fr 1fr}
.hero-photo{margin:0;height:480px;overflow:hidden;border:1px solid rgba(255,255,255,.14);position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pagehero.has-skyline{isolation:isolate}
.pagehero.has-skyline:before{content:"";position:absolute;inset:0;background-image:var(--skyline);background-size:cover;background-position:70% center;opacity:.22;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,#000 100%)}
.pagehero.has-skyline > *{position:relative;z-index:1}

.ph-prod{background-size:cover!important;background-position:center!important;min-height:220px;align-items:flex-end}
.ph-prod span{background:rgba(30,31,34,.78);color:#fff}
.side-photo{margin:28px 0 0;overflow:hidden;border:1px solid var(--line)}
.side-photo img{display:block;width:100%;height:220px;object-fit:cover}

/* ---- Reach strip ---- */
.reach-sec .sec-h h2{max-width:900px}
.stats-dark,.reach{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reach-stat{background:#1E1F22;color:#fff;padding:28px 24px;border-top:2px solid #FFB400;min-height:160px}
.reach-stat b{display:block;font-family:var(--hf);font-size:42px;font-weight:800;line-height:1;color:#FFB400;margin-bottom:12px}
.reach-stat span{display:block;font-size:15px;color:#fff;font-weight:600}
.reach-stat small{display:block;margin-top:8px;font-size:12px;color:#BFC1C6}
.reach-note{margin:22px 0 0;font-size:13px;color:var(--muted);max-width:960px}
.meta.source{font-size:12px;color:var(--muted)}
.meta.source a{color:var(--muted);text-decoration:underline}

/* ---- SVG divider ---- */
.draw-divider{padding:48px 72px 12px;margin:0;background:var(--bg);text-align:center}
.draw-svg{width:min(920px,100%);height:auto;display:block;margin:0 auto}
.draw-svg .nodes{opacity:0;transition:opacity .6s ease .8s}
.draw-svg.drawn .nodes{opacity:1}

/* ---- motion: reveal, hover, ken burns ---- */
/* Visible by default so screenshots and no-JS still work; JS enables motion hide */
.reveal{opacity:1;transform:none}
html.motion-on .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
html.motion-on .reveal.is-in{opacity:1;transform:none}
.card-lift{transition:transform .35s ease, box-shadow .35s ease}
.card-lift:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(30,31,34,.08)}
.ken-burns.has-skyline:before{animation:ken 28s ease-in-out infinite alternate;transform-origin:70% center}
@keyframes ken{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.08) translate3d(-2%,1%,0)}
}
.talk-img,.hero-photo img,.img-band img,.media-photo img{transition:transform 8s ease}
.talk.has-img:hover .talk-img,.img-band:hover img{transform:scale(1.03)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card-lift,.card-lift:hover{transform:none;transition:none}
  .ken-burns.has-skyline:before{animation:none}
  .talk-img,.hero-photo img,.img-band img,.media-photo img{transition:none}
  .talk.has-img:hover .talk-img,.img-band:hover img{transform:none}
  .draw-svg .nodes{opacity:1}
}

@media (max-width:980px){
  .stats-dark,.reach{grid-template-columns:1fr 1fr}
  .pagehero{grid-template-columns:1fr}
  .hero-photo{height:300px}
  .header-socials{order:3;width:100%;margin:8px 0 0}
}


/* ---- 28 personal voice home ---- */
body.28-personal-voice .hero-personal{
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  min-height: 780px;
  padding: 48px 72px 100px;
}
body.28-personal-voice .hero-personal h1{
  text-transform: none;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 1.02;
  margin-top: 8px;
  letter-spacing: -0.03em;
}
body.28-personal-voice .hero-personal h1 .fca{
  display: inline-block;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: super;
  color: #FFB400;
  margin-left: 6px;
}
body.28-personal-voice .hero-personal .role{
  font-size: 28px;
  font-weight: 600;
  margin: 22px 0 0;
  color: #fff;
  max-width: 520px;
}
body.28-personal-voice .hero-personal .sub{
  font-size: 18px;
  max-width: 520px;
}
body.28-personal-voice .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
body.28-personal-voice .hero-actions .btn.ghost{margin-left:0}
body.28-personal-voice .portrait-lg{height:640px;min-height:560px}
body.28-personal-voice .portrait-lg .frame{width:78%;height:88%;left:8%;bottom:0}
body.28-personal-voice .portrait-lg .blk{width:78%;height:86%;right:0;top:0}
body.28-personal-voice .portrait-lg .fig{width:70%;height:82%}
body.28-personal-voice .portrait-lg span{width:min(340px,80%)}

/* thinking cards */
.think-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.think-card{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--acc);overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.think-img{margin:0;height:200px;overflow:hidden;background:#1E1F22}
.think-img img{width:100%;height:100%;object-fit:cover;display:block}
.think-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.think-body h3{font-size:26px;margin:0 0 12px;line-height:1.15}
.think-body p{color:var(--muted);font-size:15.5px;flex:1;margin:0 0 16px}
.think-body .kick{margin-bottom:10px}
.think-body .kick:after{margin-top:8px}

/* speaking layout */
.speak-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:stretch}
.speak-photo{margin:0;overflow:hidden;border:1px solid var(--line);background:#1E1F22;min-height:100%}
.speak-photo img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}
.speak-topics{grid-template-columns:1fr;gap:14px}
.speak-topics .talk{padding:0}
.sec-cta{margin:36px 0 0}

/* roles */
.roles-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.role-pill{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--acc);padding:36px 28px;min-height:140px}
.role-mark{display:block;font-family:var(--hf);font-weight:800;font-size:28px;line-height:1.15;margin-bottom:10px}
.role-pill small{color:var(--muted);font-size:14px}

/* built smaller */
.built-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.built-card{background:var(--card);border:1px solid var(--line);padding:24px 22px;min-height:180px;display:flex;flex-direction:column}
.built-card h3{font-size:22px;margin:0 0 10px}
.built-card p{color:var(--muted);font-size:14.5px;flex:1;margin:0 0 14px}
.built-card .go{font-size:14px}

/* course teaser */
.course-teaser{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--acc);padding:48px}
.course-teaser h2{font-size:42px;line-height:1.05;font-weight:800;margin:0 0 14px;max-width:520px;text-transform:none}
.course-teaser h2:before{content:"";display:block;width:48px;height:3px;background:var(--acc);margin-bottom:18px}
.course-teaser p{color:var(--muted);font-size:17px;max-width:480px;margin:0 0 24px}
.course-photo{margin:0;overflow:hidden;border:1px solid var(--line);min-height:280px;background:#1E1F22}
.course-photo img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}

.abstract-band img{height:320px;object-position:center}

@media (max-width:980px){
  body.28-personal-voice .hero-personal{grid-template-columns:1fr;min-height:0;padding:40px 24px 60px}
  body.28-personal-voice .portrait-lg{height:420px}
  .think-grid,.speak-layout,.roles-row,.built-grid,.course-teaser{grid-template-columns:1fr}
  .course-teaser{padding:28px}
}


/* ---- 28 work strands ---- */
.org-lede{font-size:19px;color:var(--muted);max-width:820px;margin:-20px 0 56px;line-height:1.65}
.strand{display:grid;grid-template-columns:1.15fr 0.95fr;gap:48px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.strand:first-of-type{border-top:0;padding-top:0}
.strand-rev{direction:rtl}
.strand-rev > *{direction:ltr}
.strand-copy h3{font-size:34px;line-height:1.15;font-weight:800;margin:0 0 16px;text-transform:none;max-width:560px}
.strand-copy > p{color:var(--muted);font-size:16.5px;max-width:560px;margin:0 0 14px}
.strand-copy .for{color:var(--text);font-size:15.5px}
.strand-copy .kick{margin-bottom:14px}
ul.hyphen{list-style:none;padding:0;margin:18px 0 28px;max-width:560px}
ul.hyphen li{color:var(--muted);font-size:15.5px;line-height:1.55;padding:6px 0;border-bottom:1px solid var(--line)}
ul.hyphen li strong{color:var(--text);font-weight:700}
ul.hyphen.keynote-list li{padding:10px 0}
.strand-copy .btn{margin:0 10px 10px 0}
.strand-media{margin:0;overflow:hidden;border:1px solid var(--line);background:#1E1F22;min-height:360px}
.strand-media img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}

.appear-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.appear-item{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--acc);padding:24px 20px;min-height:130px;display:flex;flex-direction:column;gap:8px}
.appear-when{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.appear-item strong{font-family:var(--hf);font-size:18px;line-height:1.25}
.appear-role{font-size:14px;color:var(--muted)}

.quote-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote-card{margin:0;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--acc);padding:32px 28px;min-height:200px;display:flex;flex-direction:column}
.quote-card p{font-family:var(--hf);font-size:20px;font-weight:600;line-height:1.35;margin:0 0 20px;flex:1;color:var(--text)}
.quote-card cite{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}

@media (max-width:980px){
  .strand,.strand-rev{grid-template-columns:1fr;direction:ltr;gap:24px;padding:36px 0}
  .appear-strip,.quote-strip{grid-template-columns:1fr}
  .strand-media img{min-height:240px}
}

.roles-inline{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.roles-inline{grid-template-columns:1fr}}


/* ---- 29 AI × built environment ---- */
body.design-29, body.design-30{
  --slate-deep:#15161A;
  --graphite:#2A2C32;
  --slate-cool:#3A4250;
  --mesh:#F3F3F0;
  --glow:rgba(255,180,0,.18);
}
body.design-29, body.design-30 .sec{
  background:
    radial-gradient(1200px 400px at 10% 0%, rgba(58,66,80,.04), transparent 60%),
    linear-gradient(180deg, #FAFAF8 0%, #F4F4F1 100%);
}
body.design-29, body.design-30 .sec.alt,
body.design-29, body.design-30 .band-mesh{
  background:
    radial-gradient(900px 320px at 90% 20%, rgba(255,180,0,.05), transparent 55%),
    linear-gradient(165deg, #F2F2EF 0%, #EAEAE6 48%, #F6F6F3 100%);
}

/* dark charcoal bands with gradient + faint grid */
body.design-29, body.design-30 header.site,
body.design-29, body.design-30 .hero-ai-built{
  background:
    radial-gradient(ellipse 70% 60% at 75% 40%, rgba(255,180,0,.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(58,66,80,.35), transparent 60%),
    linear-gradient(145deg, #15161A 0%, #1E1F22 42%, #2A2C32 78%, #1E1F22 100%) !important;
}
body.design-29, body.design-30 .hero-ai-built{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
body.design-29, body.design-30 .hero-ai-built:after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.35) 1px, transparent 0);
  background-size:28px 28px;
  mask-image:linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent);
}
body.design-29, body.design-30 .hero-ai-built > *{position:relative;z-index:1}

.theme-tag{
  display:inline-block;
  margin:10px 0 0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFB400;
}

.hero-graphic{position:relative}
.hero-intersect-svg{width:100%;height:auto;overflow:visible}
.hero-intersect-svg .draw-path{
  stroke-dasharray:900;
  stroke-dashoffset:900;
}
html.motion-on .hero-intersect-svg.is-drawn .draw-path{
  animation:drawStroke 2.8s ease forwards;
}
.hero-intersect-svg.is-drawn .draw-path{stroke-dashoffset:0}
html:not(.motion-on) .hero-intersect-svg .draw-path{stroke-dashoffset:0}
.hero-intersect-svg .draw-path:nth-child(odd){animation-delay:.15s}
.hero-intersect-svg .draw-path:nth-child(3n){animation-delay:.35s}
@keyframes drawStroke{
  to{stroke-dashoffset:0}
}
.pulse-node{
  transform-box:fill-box;
  transform-origin:center;
}
html.motion-on .pulse-node{
  animation:nodePulse 3.6s ease-in-out infinite;
}
.pulse-node:nth-child(2n){animation-delay:.6s}
.pulse-node:nth-child(3n){animation-delay:1.2s}
@keyframes nodePulse{
  0%,100%{opacity:.55; transform:scale(1)}
  50%{opacity:1; transform:scale(1.35)}
}

/* portrait stays prominent */
body.design-29, body.design-30 .portrait-lg{
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
body.design-29, body.design-30 .portrait-lg .blk{
  box-shadow:inset 0 0 0 2px rgba(255,180,0,.7), 0 0 40px rgba(255,180,0,.12);
}

/* Reach dark gradient boxes */
body.design-29, body.design-30 .reach-stat{
  background:linear-gradient(160deg, #15161A 0%, #1E1F22 55%, #2A2C32 100%);
  border-top:2px solid #FFB400;
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}
body.design-29, body.design-30 .reach-stat:before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size:18px 18px;
  opacity:.25;
}

/* cards with gradient border glow */
.card-glow{
  position:relative;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(30,31,34,.18), rgba(255,180,0,.35), rgba(58,66,80,.2)) border-box;
  border:1px solid transparent !important;
  box-shadow:0 8px 28px rgba(30,31,34,.06), 0 0 0 1px rgba(30,31,34,.04);
}
.card-glow:hover{
  box-shadow:0 14px 36px rgba(30,31,34,.1), 0 0 24px rgba(255,180,0,.12);
}

.strand.card-glow-section .strand-copy,
.strand.card-glow-section .strand-media{
  background:linear-gradient(180deg,#fff 0%, #F7F7F4 100%);
}
.strand.card-glow-section .strand-copy{
  padding:28px 28px 32px;
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#F7F7F4) padding-box,
    linear-gradient(160deg, rgba(30,31,34,.12), rgba(255,180,0,.28)) border-box;
  box-shadow:0 10px 30px rgba(30,31,34,.05);
}
.strand.card-glow-section .strand-media{
  box-shadow:0 0 40px rgba(255,180,0,.08), 0 12px 32px rgba(30,31,34,.1);
  border:1px solid rgba(30,31,34,.1);
}

.strand-ico-wrap{margin:8px 0 18px;color:#1E1F22}
.strand-ico{width:48px;height:48px;display:block}

.blueprint-divider{
  background:
    radial-gradient(600px 120px at 70% 50%, rgba(255,180,0,.08), transparent 70%),
    linear-gradient(180deg, #FAFAF8, #F0F0EC);
  padding:56px 72px;
}
.blueprint-svg{width:min(1100px,100%);height:auto;display:block;margin:0 auto}

/* dark CTA / dark bands */
body.design-29, body.design-30 .cta.has-pattern,
body.design-29, body.design-30 .band-dark-gradient{
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(255,180,0,.12), transparent 55%),
    linear-gradient(135deg, #15161A 0%, #1E1F22 50%, #2A2C32 100%) !important;
}
body.design-29, body.design-30 .band-dark-gradient .sec-h h2,
body.design-29, body.design-30 .band-dark-gradient .kick{color:#fff}
body.design-29, body.design-30 .band-dark-gradient .kick{color:#BFC1C6}
body.design-29, body.design-30 .band-dark-gradient .kick:after{background:#FFB400}
body.design-29, body.design-30 .band-dark-gradient .sec-h h2:before{background:#FFB400}
body.design-29, body.design-30 .band-dark-gradient .reach-note{color:#BFC1C6}
body.design-29, body.design-30 .band-dark-gradient{position:relative;overflow:hidden}
body.design-29, body.design-30 .band-dark-gradient:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.4) 1px, transparent 0);
  background-size:22px 22px;
}

body.design-29, body.design-30 .appear-item,
body.design-29, body.design-30 .role-pill,
body.design-29, body.design-30 .built-card,
body.design-29, body.design-30 .quote-card{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(145deg, rgba(30,31,34,.14), rgba(255,180,0,.25)) border-box;
  border:1px solid transparent;
}

body.design-29, body.design-30 .course-teaser{
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(255,180,0,.07), transparent 50%),
    linear-gradient(135deg, #fff 0%, #F3F3F0 100%);
  border:1px solid transparent;
  background-clip:padding-box, border-box;
  box-shadow:inset 0 0 0 1px rgba(30,31,34,.08), 0 0 0 1px transparent, 0 0 32px rgba(255,180,0,.06);
  border-top:2px solid #FFB400;
}

/* think cards image overlay gradient */
body.design-29, body.design-30 .think-img{position:relative}
body.design-29, body.design-30 .think-img:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(21,22,26,.35));
  pointer-events:none;
}

/* superseded by 29 hero layout fix */

@media (prefers-reduced-motion: reduce){
  .hero-intersect-svg .draw-path,
  html.motion-on .hero-intersect-svg .draw-path{
    animation:none !important;
    stroke-dashoffset:0 !important;
  }
  .pulse-node, html.motion-on .pulse-node{animation:none !important; opacity:1 !important; transform:none !important}
}


/* ---- 29 hero layout fix: 2-col, graphic behind portrait ---- */
body.design-29, body.design-30 .hero-personal.hero-ai-built{
  contain: paint;
  display:grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  gap: 36px;
  align-items: center;
  padding: 28px 72px 40px !important;
  min-height: 780px;
  height: 820px;
  max-height: 860px;
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 55% 70% at 78% 45%, rgba(255,180,0,.22), transparent 58%),
    radial-gradient(ellipse 40% 50% at 15% 85%, rgba(58,66,80,.45), transparent 55%),
    linear-gradient(145deg, #15161A 0%, #1C1D22 38%, #2A2C32 72%, #1A1B20 100%) !important;
}
body.design-29, body.design-30 .hero-personal.hero-ai-built:after{
  opacity: .28;
  background-size: 24px 24px;
}
body.design-29, body.design-30 .hero-copy{
  position: relative;
  z-index: 2;
  max-width: 560px;
}
body.design-29, body.design-30 .hero-personal h1{
  text-transform: none;
  font-size: clamp(48px, 5.8vw, 78px);
  line-height: 1.02;
  margin-top: 6px;
  letter-spacing: -0.03em;
}
body.design-29, body.design-30 .hero-personal h1 .fca{
  display: inline-block;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: super;
  color: #FFB400;
  margin-left: 6px;
}
body.design-29, body.design-30 .hero-personal .role{
  font-size: 24px;
  font-weight: 600;
  margin: 16px 0 0;
  color: #fff;
  max-width: 520px;
}
body.design-29, body.design-30 .hero-personal .sub{
  font-size: 17px;
  max-width: 500px;
  margin: 16px 0 28px;
  color: #BFC1C6;
}
body.design-29, body.design-30 .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;align-items:stretch}
body.design-29, body.design-30 .hero-actions .btn.ghost{margin-left:0}

/* Visual column: graphic fills, portrait sits on top */
body.design-29, body.design-30 .hero-visual{
  position: relative;
  z-index: 1;
  min-height: 0;
  height: 680px;
  max-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: paint;
  max-width: 100%;
}

body.design-29, body.design-30 .hero-graphic{
  position: absolute !important;
  inset: -6% -8% -6% -35%;
  min-height: 0 !important;
  display: block !important;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

body.design-29, body.design-30 .hero-intersect-svg{
  width: 115%;
  height: 100%;
  min-height: 640px;
  max-height: none;
}

body.design-29, body.design-30 .hero-visual .portrait-lg{
  position: relative;
  z-index: 2;
  width: min(380px, 72%);
  height: 520px !important;
  min-height: 480px !important;
  max-height: 540px;
  margin: 0 auto;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,.45));
}

body.design-29, body.design-30 .hero-visual .portrait-lg .frame{
  width: 86%;
  height: 90%;
  left: 4%;
  bottom: 0;
}
body.design-29, body.design-30 .hero-visual .portrait-lg .blk{
  width: 86%;
  height: 88%;
  right: 0;
  top: 0;
  box-shadow: inset 0 0 0 2px rgba(255,180,0,.75), 0 0 48px rgba(255,180,0,.16);
}
body.design-29, body.design-30 .hero-visual .portrait-lg .fig{
  width: 72%;
  height: 84%;
}
body.design-29, body.design-30 .hero-visual .portrait-lg span{
  width: min(300px, 85%);
  font-size: 11px;
}

/* Kill old 3-col / order rules */
body.design-29, body.design-30 .hero-ai-built{
  grid-template-columns: 1.05fr 1fr !important;
}
@media (max-width:1100px){
  body.design-29, body.design-30 .hero-ai-built{
    grid-template-columns: 1.05fr 1fr !important;
  }
  body.design-29, body.design-30 .hero-graphic{
    grid-column: auto !important;
    order: 0 !important;
  }
}

/* Other section grids: prevent empty columns / odd wrap */
body.design-29, body.design-30 .think-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.design-29, body.design-30 .strand{
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
}
body.design-29, body.design-30 .strand-rev{
  direction: rtl;
}
body.design-29, body.design-30 .strand-rev > *{direction: ltr}
body.design-29, body.design-30 .speak-layout{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
body.design-29, body.design-30 .built-grid,
body.design-29, body.design-30 .roles-row,
body.design-29, body.design-30 .quote-strip{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.design-29, body.design-30 .appear-strip{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.design-29, body.design-30 .roles-inline{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.design-29, body.design-30 .course-teaser{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
body.design-29, body.design-30 .reach,
body.design-29, body.design-30 .stats-dark{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* Mobile 390 */
@media (max-width: 720px){
  html:has(body.design-29, body.design-30), body.design-29, body.design-30{overflow-x:hidden; max-width:100%}
  body.design-29, body.design-30 header.site{
    padding: 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.design-29, body.design-30 header.site nav{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-left: 0;
    font-size: 12.5px;
    max-width: 100%;
  }
  body.design-29, body.design-30 .header-socials{margin-left:0; flex-wrap:wrap}
  body.design-29, body.design-30 .hero-personal.hero-ai-built{
    display:grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 24px 16px 36px !important;
    gap: 24px;
    overflow: hidden;
  }
  body.design-29, body.design-30 .hero-visual{
    height: 380px;
    max-height: 400px;
    min-height: 360px;
    width: 100%;
    max-width: 100%;
  }
  body.design-29, body.design-30 .hero-graphic{
    inset: 0 -5% 0 -25%;
    max-width: none;
  }
  body.design-29, body.design-30 .hero-intersect-svg{
    width: 120%;
    min-height: 380px;
    max-width: none;
  }
  body.design-29, body.design-30 .hero-visual{overflow:hidden; contain:paint; max-width:100%}
  body.design-29, body.design-30 .hero-personal.hero-ai-built{overflow:hidden; contain:paint}

  body.design-29, body.design-30 .hero-visual .portrait-lg{
    width: min(240px, 68%);
    height: 340px !important;
    min-height: 320px !important;
    max-height: 360px;
  }
  body.design-29, body.design-30 .hero-personal h1{font-size: 38px}
  body.design-29, body.design-30 .hero-personal .role{font-size: 18px}
  body.design-29, body.design-30 .hero-personal .sub{font-size: 15px; margin-bottom: 20px}
  body.design-29, body.design-30 .sec,
  body.design-29, body.design-30 .cta,
  body.design-29, body.design-30 .blueprint-divider,
  body.design-29, body.design-30 .reach-sec{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.design-29, body.design-30 .think-grid,
  body.design-29, body.design-30 .strand,
  body.design-29, body.design-30 .strand-rev,
  body.design-29, body.design-30 .speak-layout,
  body.design-29, body.design-30 .built-grid,
  body.design-29, body.design-30 .roles-row,
  body.design-29, body.design-30 .quote-strip,
  body.design-29, body.design-30 .appear-strip,
  body.design-29, body.design-30 .roles-inline,
  body.design-29, body.design-30 .course-teaser,
  body.design-29, body.design-30 .reach,
  body.design-29, body.design-30 .stats-dark{
    grid-template-columns: minmax(0, 1fr) !important;
    direction: ltr !important;
    gap: 14px;
  }
  body.design-29, body.design-30 .sec-h{flex-direction:column;align-items:flex-start;gap:10px}
  body.design-29, body.design-30 .sec-h h2{font-size:28px;max-width:100%}
  body.design-29, body.design-30 .strand-copy{padding:18px}
  body.design-29, body.design-30 .strand-media,
  body.design-29, body.design-30 .strand-media img{min-height:180px; max-width:100%}
  body.design-29, body.design-30 .cta{margin:0 16px 48px; padding:28px 20px}
  body.design-29, body.design-30 .course-teaser{padding:20px}
  body.design-29, body.design-30 footer.site{padding:28px 16px; grid-template-columns:1fr}
  body.design-29, body.design-30 .img-band img{height:200px}
  body.design-29, body.design-30 .abstract-band img{height:180px}
}

/* Full-hero immersive graphic */
body.design-29, body.design-30 .hero-graphic-bleed{display:none;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.55;
}
body.design-29, body.design-30 .hero-graphic-bleed .hero-intersect-svg{
  position:absolute;
  right:-5%;
  top:50%;
  transform:translateY(-50%);
  width:78%;
  min-height:900px;
  height:110%;
  opacity:.9;
}
body.design-29, body.design-30 .hero-copy,
body.design-29, body.design-30 .hero-visual{z-index:2}
body.design-29, body.design-30 .hero-personal.hero-ai-built > .hero-graphic-bleed{z-index:0}
@media (max-width:720px){
  body.design-29, body.design-30 .hero-graphic-bleed{display:none;opacity:.35}
  body.design-29, body.design-30 .hero-graphic-bleed .hero-intersect-svg{width:140%; right:-40%; min-height:500px}
}


/* ---- 29 refinements: button, press, quote, bands ---- */
body.design-29, body.design-30 .btn-book{
  white-space: nowrap;
  padding: 14px 20px;
  font-size: 14.5px;
}
@media (max-width:720px){
  body.design-29, body.design-30 .hero-actions{flex-wrap:wrap}
  body.design-29, body.design-30 .btn-book{
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
  }
}

/* Confine intersect graphic to right visual only */
body.design-29, body.design-30 .hero-graphic-bleed{display:none !important}
body.design-29, body.design-30 .hero-copy{
  background: transparent;
  isolation: isolate;
}
body.design-29, body.design-30 .hero-copy:before{
  content:"";
  position:absolute;
  inset: -24px -28px -24px -40px;
  background: linear-gradient(90deg, rgba(21,22,26,.92) 0%, rgba(21,22,26,.72) 70%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
body.design-29, body.design-30 .hero-graphic{
  inset: -4% -6% -4% -18% !important;
}

.theme-bridge{padding: 56px 72px 48px}
.theme-bridge-inner{max-width: 820px}
.theme-bridge h2{
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  text-transform: none;
  margin: 0 0 14px;
}
.theme-bridge h2:before{content:"";display:block;width:48px;height:3px;background:#FFB400;margin-bottom:20px}
.theme-bridge-sub{font-size:18px;color:var(--muted);max-width:640px;margin:0}

.press-strip{
  padding: 28px 72px 56px;
  display: grid;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.press-lab{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.press-marks{
  display: flex;
  flex-wrap: wrap;
  gap: 18px 42px;
  align-items: center;
  justify-content: flex-start;
}
.press-mark{
  font-family: var(--hf), Manrope, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  color: #6B6E75;
  letter-spacing: -0.01em;
}
.press-note{font-size:12px;color:var(--muted);margin:0;max-width:720px}

.pull-quote-band{
  padding: 88px 72px;
  text-align: left;
  background:
    radial-gradient(ellipse 50% 80% at 90% 40%, rgba(255,180,0,.12), transparent 55%),
    linear-gradient(145deg, #15161A 0%, #1E1F22 50%, #2A2C32 100%) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pull-quote-band:before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.4) 1px, transparent 0);
  background-size: 22px 22px;
}
.pull-quote{margin:0; position:relative; z-index:1; max-width:980px}
.pull-quote p{
  font-family: var(--hf), Manrope, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
.pull-quote p:before{
  content:"";
  display:block;
  width: 48px;
  height: 3px;
  background: #FFB400;
  margin-bottom: 28px;
}
.pull-attr{
  position:relative; z-index:1;
  margin: 28px 0 0;
  font-size: 14px;
  color: #BFC1C6;
  font-weight: 600;
}
.draft-flag{color:#8A8D94; font-weight:500}

/* Band rhythm */
body.design-29, body.design-30 .band-light{
  background:
    radial-gradient(900px 320px at 90% 10%, rgba(255,180,0,.04), transparent 55%),
    linear-gradient(180deg, #FAFAF8 0%, #F3F3F0 100%) !important;
  color: #1E1F22;
}
body.design-29, body.design-30 .band-dark{
  background:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(255,180,0,.10), transparent 55%),
    linear-gradient(145deg, #15161A 0%, #1E1F22 48%, #2A2C32 100%) !important;
  color: #fff;
  position: relative;
}
body.design-29, body.design-30 .band-dark .kick{color:#BFC1C6}
body.design-29, body.design-30 .band-dark .kick:after{background:#FFB400}
body.design-29, body.design-30 .band-dark .sec-h h2,
body.design-29, body.design-30 .band-dark h2,
body.design-29, body.design-30 .band-dark h3{color:#fff}
body.design-29, body.design-30 .band-dark .sec-h h2:before{background:#FFB400}
body.design-29, body.design-30 .band-dark p,
body.design-29, body.design-30 .band-dark .for,
body.design-29, body.design-30 .band-dark li,
body.design-29, body.design-30 .band-dark .reach-note{color:#BFC1C6}
body.design-29, body.design-30 .band-dark .go,
body.design-29, body.design-30 .band-dark .sec-h a{color:#fff; text-decoration-color:#FFB400}
body.design-29, body.design-30 .band-dark .think-card,
body.design-29, body.design-30 .band-dark .built-card,
body.design-29, body.design-30 .band-dark .appear-item,
body.design-29, body.design-30 .band-dark .role-pill{
  background:
    linear-gradient(#1E1F22,#26272B) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,180,0,.3)) border-box;
  border:1px solid transparent;
  color:#fff;
}
body.design-29, body.design-30 .band-dark .think-body p,
body.design-29, body.design-30 .band-dark .built-card p,
body.design-29, body.design-30 .band-dark .appear-role,
body.design-29, body.design-30 .band-dark small{color:#BFC1C6}
body.design-29, body.design-30 .band-dark .think-body h3,
body.design-29, body.design-30 .band-dark .built-card h3,
body.design-29, body.design-30 .band-dark .appear-item strong,
body.design-29, body.design-30 .band-dark .role-mark{color:#fff}
body.design-29, body.design-30 .band-dark .strand-copy{
  background:
    linear-gradient(#1E1F22,#26272B) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,180,0,.3)) border-box !important;
  color:#fff;
}
body.design-29, body.design-30 .band-dark .strand-ico-wrap{color:#fff}
body.design-29, body.design-30 .band-dark .btn.ghost{
  color:#fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
body.design-29, body.design-30 .reach-on-light .reach-stat{ /* keep charcoal boxes on light band */ }

@media (max-width:720px){
  .theme-bridge,.press-strip,.pull-quote-band{padding-left:16px !important; padding-right:16px !important}
  .press-marks{gap:14px 22px}
  .press-mark{font-size:16px}
  .pull-quote-band{padding-top:56px; padding-bottom:56px}
}

/* hero btn unify */

body.design-29, body.design-30 .hero-actions .btn{
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-height: 52px;
  padding: 0 22px;
  box-sizing: border-box;
  margin-left: 0 !important;
  font-size: 14.5px;
  line-height: 1.2;
}
body.design-29, body.design-30 .hero-actions .btn.ghost{
  height: 52px;
  min-height: 52px;
  padding: 0 22px;
}
body.design-29, body.design-30 .btn-book{
  white-space: nowrap;
  padding: 0 22px;
  font-size: 14.5px;
  height: 52px;
  min-height: 52px;
}
@media (max-width:720px){
  body.design-29, body.design-30 .hero-actions{flex-wrap:wrap}
  body.design-29, body.design-30 .hero-actions .btn,
  body.design-29, body.design-30 .btn-book{
    white-space: normal;
    height: auto;
    min-height: 52px;
    padding: 14px 18px;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
}

/* Soft fade building graphic into portrait column (no hard vertical clip) */
body.design-29, body.design-30 .hero-graphic{
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 28%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 28%, #000 100%);
}
body.design-29, body.design-30 .hero-visual{
  -webkit-mask-image: none;
  mask-image: none;
}


/* ---- 29b homepage tightening ---- */

/* Section headings stay in sentence case; eyebrow .kick labels remain uppercase */
body.design-29, body.design-30 .sec-h h2,
body.design-29, body.design-30 .media-copy h2,
body.design-29, body.design-30 .prose h2,
body.design-29, body.design-30 .cta h2,
body.design-29, body.design-30 .course-teaser h2,
body.design-29, body.design-30 .signup-copy h2,
body.design-29, body.design-30 .theme-bridge h2{
  text-transform: none;
}

body.design-29, body.design-30 .reach-sec.reach-under-hero{
  padding-top: 64px;
  padding-bottom: 40px;
}

.theme-bridge-inner{max-width: 1100px}
.theme-points{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  margin-top: 40px;
}
.theme-point h3{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #1E1F22;
}
.theme-point p{
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 34em;
}
.theme-ico{
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 0 14px;
  color: #1E1F22;
}

.work-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.work-card{
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  min-height: 100%;
  background: linear-gradient(#fff, #F7F7F4) padding-box,
    linear-gradient(160deg, rgba(30,31,34,.12), rgba(255,180,0,.28)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgba(30,31,34,.05);
}
.work-card .strand-ico-wrap{margin: 0 0 16px; color: #1E1F22}
.work-card .strand-ico{width: 40px; height: 40px}
.work-card h3{
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 12px;
  text-transform: none;
  color: #1E1F22;
}
.work-card .go{white-space: nowrap}
.work-card p{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.work-card .go{margin-top: auto; font-weight: 700}
.work-cards-cta{margin: 36px 0 0}
.work-cards-cta .btn{margin-left: 0}
body.design-29, body.design-30 #organisations .org-lede{margin-bottom: 36px}

/* Newsletter sign-up */
.signup-sec{padding-top: 72px; padding-bottom: 72px}
.signup-band{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(255,180,0,.07), transparent 50%),
    linear-gradient(135deg, #fff 0%, #F3F3F0 100%);
  border: 1px solid var(--line);
  border-top: 2px solid #FFB400;
  padding: 48px;
  box-shadow: 0 10px 30px rgba(30,31,34,.05);
}
.signup-copy h2{
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 14px;
  text-transform: none;
  color: #1E1F22;
}
.signup-copy p{
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 36em;
}
.signup-embed-note{
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.signup-fields{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 14px;
  align-items: end;
}
.signup-field{display: flex; flex-direction: column; gap: 6px; min-width: 0}
.signup-field label{
  font-size: 13px;
  font-weight: 700;
  color: #1E1F22;
}
.signup-field input[type="text"],
.signup-field input[type="email"]{
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid rgba(30,31,34,.35);
  border-radius: var(--r);
  background: #fff;
  color: #1E1F22;
  font: inherit;
  min-height: 52px;
  box-sizing: border-box;
}
.signup-field input:focus{
  outline: 3px solid #FFB400;
  outline-offset: 1px;
}
.signup-form .btn{
  height: 52px;
  min-height: 52px;
  padding: 0 22px;
  color: #17181A;
  background: #FFB400;
  margin-left: 0;
  white-space: nowrap;
}
.signup-lists{
  border: 0;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.signup-lists legend{
  font-size: 13px;
  font-weight: 700;
  color: #1E1F22;
  padding: 0;
  margin: 0 0 8px;
  width: 100%;
}
.signup-lists label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #1E1F22;
  cursor: pointer;
}
.signup-lists input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #1E1F22;
  flex-shrink: 0;
}

/* Course price: charcoal on light, never yellow text on a light ground */
.course-buy{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.course-buy .price{
  font-family: var(--hf), Manrope, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1E1F22;
  letter-spacing: -0.01em;
}

@media (max-width: 1100px){
  body.design-29, body.design-30 .work-cards,
  .work-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .theme-points{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .signup-band{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 720px){
  body.design-29, body.design-30 .work-cards,
  .work-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  body.design-29, body.design-30 .work-card,
  .work-card{padding: 20px 16px 18px}
  body.design-29, body.design-30 .work-card h3,
  .work-card h3{font-size: 17px}
  body.design-29, body.design-30 .work-card p,
  .work-card p{font-size: 13.5px}
  body.design-29, body.design-30 .theme-points,
  .theme-points{grid-template-columns: 1fr !important}
  body.design-29, body.design-30 .signup-band,
  .signup-band{
    grid-template-columns: 1fr !important;
    padding: 28px 20px;
  }
  body.design-29, body.design-30 .signup-fields,
  .signup-fields{
    grid-template-columns: 1fr;
  }
  body.design-29, body.design-30 .signup-form .btn,
  .signup-form .btn{
    width: 100%;
    white-space: normal;
  }
  body.design-29, body.design-30 .work-cards-cta .btn,
  .work-cards-cta .btn{
    white-space: normal;
    width: 100%;
    text-align: center;
    height: auto;
    min-height: 52px;
    padding: 14px 18px;
  }
  body.design-29, body.design-30 .theme-bridge{padding: 40px 16px 20px}
}

@media (max-width: 720px){
  body.design-29, body.design-30 .work-card .go{font-size: 13px}
  body.design-29, body.design-30 .reach,
  body.design-29, body.design-30 .stats-dark{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.design-29, body.design-30 .reach-stat{min-height: 0; padding: 20px 16px}
  body.design-29, body.design-30 .reach-stat b{font-size: 28px}
}


/* ---- 30 pencil sketch: paper contrast + faint section drawings ---- */

body.design-30{
  --paper:#F7F4EE;
  --paper2:#F1ECE3;
  --ink:#1C1B19;
  background: var(--paper);
  color: var(--ink);
}

/* Warm off-white paper on light bands, with faint grain */
body.design-30 .band-light,
body.design-30 .reach-sec,
body.design-30 .theme-bridge,
body.design-30 .press-strip,
body.design-30 .signup-sec,
body.design-30 .sec,
body.design-30 .sec.alt,
body.design-30 .media-strip,
body.design-30 footer.site,
body.design-30 .draw-divider,
body.design-30 .blueprint-divider,
body.design-30 .img-divider{
  background-color: var(--paper) !important;
  background-image:
    url("assets/pencil/paper-grain.webp"),
    linear-gradient(180deg, #F8F5F0 0%, #F3EEE6 100%) !important;
  background-size: 512px 512px, 100% 100%;
  background-blend-mode: multiply, normal;
  color: var(--ink);
}
body.design-30 .sec.alt,
body.design-30 .band-light.alt,
body.design-30 .media-strip{
  background-image:
    url("assets/pencil/paper-grain.webp"),
    linear-gradient(180deg, #F3EEE6 0%, #EFE8DE 100%) !important;
}

/* Charcoal bands stay charcoal, slightly deeper so paper contrast is stronger */
body.design-30 .band-dark,
body.design-30 .pull-quote-band,
body.design-30 .cta.has-pattern{
  background-image:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(255,180,0,.08), transparent 55%),
    linear-gradient(145deg, #141518 0%, #1A1B1E 48%, #26272B 100%) !important;
  background-color: #1A1B1E !important;
}

/* Lift cards on charcoal so they separate from the background */
body.design-30 .band-dark .think-card,
body.design-30 .band-dark .built-card,
body.design-30 .band-dark .appear-item,
body.design-30 .band-dark .role-pill,
body.design-30 .band-dark .quote-card,
body.design-30 .band-dark .talk,
body.design-30 .band-dark .formats div{
  background:
    linear-gradient(#2C2E34, #33353B) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,180,0,.25)) border-box !important;
  border: 1px solid transparent;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Section sketch layer: one faint drawing, faded at the edges, kept off the text */
body.design-30 .has-sketch{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.design-30 .has-sketch::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sketch);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
body.design-30 .has-sketch > *{position: relative; z-index: 1;}

body.design-30 .sketch-right::before{
  background-position: right 2% center;
  background-size: min(48%, 620px) auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,.4) 62%, #000 86%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,.4) 62%, #000 86%, #000 96%, transparent 100%);
}
body.design-30 .sketch-left::before{
  background-position: left 2% center;
  background-size: min(46%, 600px) auto;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, transparent 38%, rgba(0,0,0,.4) 62%, #000 86%, #000 96%, transparent 100%);
          mask-image: linear-gradient(270deg, transparent 0%, transparent 38%, rgba(0,0,0,.4) 62%, #000 86%, #000 96%, transparent 100%);
}
body.design-30 .sketch-heading-right::before{
  background-position: right 24px top 28px;
  background-size: min(42%, 480px) auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.25) 68%, transparent 92%),
                      linear-gradient(90deg, transparent 0%, transparent 46%, rgba(0,0,0,.5) 68%, #000 90%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.25) 68%, transparent 92%),
                      linear-gradient(90deg, transparent 0%, transparent 46%, rgba(0,0,0,.5) 68%, #000 90%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
body.design-30 .sketch-bottom::before{
  background-position: right 8% bottom 0;
  background-size: min(70%, 900px) auto;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 35%, rgba(0,0,0,.3) 65%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 40%, #000 80%);
          mask-image: linear-gradient(0deg, #000 0%, #000 35%, rgba(0,0,0,.3) 65%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 40%, #000 80%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
body.design-30 .sketch-wide::before{
  background-position: center 70%;
  background-size: min(92%, 1100px) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 55%, rgba(0,0,0,.4) 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 55%, rgba(0,0,0,.4) 80%, transparent 100%);
  opacity: .85;
}

/* Hero: pencil facade behind the portrait, SVG graphic retired */
body.design-30 .hero-personal.hero-ai-built{
  position: relative;
}
body.design-30 .hero-sketch{
  position: absolute;
  inset: 0 0 0 32%;
  background: url("assets/pencil/00-hero-facade-dark.webp") right 8% center / auto 108% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, #000 45%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, #000 45%, #000 88%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
body.design-30 .hero-copy,
body.design-30 .hero-visual{z-index: 2;}
body.design-30 .hero-graphic{opacity: 0; visibility: hidden;}
body.design-30 .hero-copy:before{
  /* keep a slightly stronger text scrim so the sketch never touches the type */
  background: linear-gradient(90deg, rgba(20,21,24,.94) 0%, rgba(20,21,24,.78) 68%, transparent 100%);
}

/* Page heroes on inner pages */
body.design-30 .pagehero.has-sketch::before{
  background-image: var(--sketch, var(--skyline));
  background-position: right center;
  background-size: auto 120%;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,.45) 55%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,.45) 55%, #000 80%);
  z-index: 0;
}
body.design-30 .pagehero.has-skyline:before{
  /* if a photo skyline remains, drop it in favour of the pencil layer */
  opacity: 0;
}
body.design-30 .pagehero.has-sketch.has-skyline:before{
  opacity: 0;
}
body.design-30 .pagehero.has-sketch{overflow: hidden;}

/* Pencil image bands in place of photographic ones */
body.design-30 .pencil-band{
  background: var(--paper);
  padding: 28px 0 8px;
  text-align: center;
}
body.design-30 .pencil-band img{
  display: block;
  width: min(1100px, 92%);
  height: auto;
  max-height: 380px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
body.design-30 .pencil-band figcaption{
  position: static;
  background: none;
  color: #6B6560;
  letter-spacing: .1em;
  margin: 8px auto 12px;
  display: inline-block;
  padding: 0;
}

/* Course photo: use a pencil drawing, keep layout */
body.design-30 .course-photo{
  background: var(--paper);
  border: 1px solid var(--line);
}
body.design-30 .course-photo img{
  object-fit: contain;
  background: var(--paper);
  mix-blend-mode: multiply;
}

/* Signup card sits clearly on paper */
body.design-30 .signup-band{
  background:
    url("assets/pencil/paper-grain.webp"),
    linear-gradient(135deg, #FFFcf7 0%, #F7F3EC 100%);
  background-blend-mode: multiply, normal;
  box-shadow: 0 10px 30px rgba(28,27,25,.06);
}

/* Footer paper */
body.design-30 footer.site{
  color: #5C5852;
  border-top: 1px solid rgba(28,27,25,.12);
}
body.design-30 footer.site .f-word{color: var(--ink);}
body.design-30 footer.site .soc{color: var(--ink);}

@media (max-width: 720px){
  body.design-30 .sketch-right::before,
  body.design-30 .sketch-left::before,
  body.design-30 .sketch-heading-right::before{
    background-size: min(80%, 420px) auto;
    background-position: right -10% top 10%;
    opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 40%, transparent 75%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 40%, transparent 75%);
  }
  body.design-30 .hero-sketch{
    inset: auto 0 0 0;
    height: 48%;
    background-position: center 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
    opacity: .85;
  }
  body.design-30 .pencil-band img{max-height: 200px;}
}

body.design-30 section.band-dark,
body.design-30 .band-dark.sec,
body.design-30 .pull-quote-band.band-dark,
body.design-30 .cta.band-dark{
  background-color: #1A1B1E !important;
  background-image:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(255,180,0,.08), transparent 55%),
    linear-gradient(145deg, #141518 0%, #1A1B1E 48%, #26272B 100%) !important;
}
body.design-30 .think-img img,
body.design-30 .talk-img,
body.design-30 .course-photo img{
  filter: grayscale(1) contrast(0.92) brightness(1.05);
}
body.design-30 .pagehero .hero-photo{
  background: transparent;
  border-color: rgba(255,255,255,.12);
}
body.design-30 .pagehero .hero-photo img{
  object-fit: contain;
  background: #1A1B1E;
}
body.design-30 .stats{
  background: transparent;
}


/* 30 fixes: multiply on light paper so sketches have no hard paper rectangle */
body.design-30 .band-light.has-sketch::before,
body.design-30 .sec.has-sketch::before,
body.design-30 .sec.alt.has-sketch::before,
body.design-30 .press-strip.has-sketch::before,
body.design-30 .reach-sec.has-sketch::before,
body.design-30 .theme-bridge.has-sketch::before,
body.design-30 .signup-sec.has-sketch::before,
body.design-30 .stats.has-sketch::before{
  mix-blend-mode: multiply;
}

/* Home hero sketch: sit in the right half, clearly visible, not under the type */
body.design-30 .has-hero-sketch{position:relative; isolation:isolate;}
body.design-30 .has-hero-sketch .hero-sketch{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: 40%;
  background: url("assets/pencil/00-hero-facade-dark-strong.webp") 70% 60% / auto 105% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 40%, #000 85%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 40%, #000 85%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}
body.design-30 .has-hero-sketch .hero-copy{z-index: 3;}
body.design-30 .has-hero-sketch .hero-visual{z-index: 2;}

/* Theme vignettes sit under the three points, not behind the type */
body.design-30 .theme-sketches{
  margin: 36px 0 0;
  padding: 0;
  background: none;
}
body.design-30 .theme-sketches img{
  width: 100%;
  max-width: 1100px;
  max-height: 280px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* About / speaking pagehero: keep the sketch to the right of the copy */
body.design-30 .pagehero.has-sketch::before{
  left: 42%;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  background-position: 60% 55%;
  background-size: auto 115%;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 50%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 50%, #000 90%, transparent 100%);
}
body.design-30.page-speaking .pagehero{grid-template-columns: 1.2fr 0.8fr;}
body.design-30.page-speaking .pagehero.has-sketch::before{
  background-image: var(--sketch);
  left: 45%;
}

@media (max-width:720px){
  body.design-30 .has-hero-sketch .hero-sketch{
    left: 0;
    top: 48%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 80%, transparent 100%);
  }
  body.design-30 .pagehero.has-sketch::before{
    left: 0;
    top: 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 70%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 70%);
    opacity: .7;
  }
  body.design-30 .theme-sketches img{max-height: 180px;}
}

/* Override: single mask so the hero sketch actually paints in Chrome */
body.design-30 .has-hero-sketch .hero-sketch{
  left: 38%;
  background: url("assets/pencil/00-hero-facade-dark-strong.webp") 62% 58% / auto 120% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 36%, #000 88%, rgba(0,0,0,.3) 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 36%, #000 88%, rgba(0,0,0,.3) 100%);
  -webkit-mask-composite: source-over;
          mask-composite: add;
  opacity: 1;
}
body.design-30.page-speaking .pagehero.has-sketch::before{
  left: 52%;
  background-position: 40% 50%;
  background-size: auto 125%;
}
body.design-30 .theme-sketches img{
  max-height: 340px;
  width: min(100%, 1080px);
}
body.design-30 .pagehero.has-sketch::before{
  /* drop intersecting masks */
  -webkit-mask-composite: source-over;
          mask-composite: add;
}


/* Soften boxed sketches: alpha WebP + feathered masks, no visible plate */
body.design-30 .pencil-band,
body.design-30 .theme-sketches,
body.design-30 .img-divider.pencil-band{
  background: transparent;
  overflow: visible;
}
body.design-30 .pencil-band img,
body.design-30 .theme-sketches img,
body.design-30 .img-divider img{
  background: none !important;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 50%, #000 42%, rgba(0,0,0,.65) 68%, transparent 86%);
          mask-image: radial-gradient(ellipse 92% 82% at 50% 50%, #000 42%, rgba(0,0,0,.65) 68%, transparent 86%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Theme vignettes: a touch more width, still faded */
body.design-30 .theme-sketches{
  margin: 28px 0 0;
  padding: 0;
}
body.design-30 .theme-sketches img{
  width: min(100%, 1120px);
  max-height: 360px;
  height: auto;
  object-fit: contain;
}
/* Skyline / divider bands: let the drawing sit in the flow without a paper plate */
body.design-30 figure.pencil-band{
  padding: 12px 0 4px;
}
/* Course photo stays in its framed card, but the sketch itself has no inner paper plate */
body.design-30 .course-photo{
  background: var(--paper);
}
body.design-30 .course-photo img{
  background: transparent;
  mix-blend-mode: multiply;
  /* lighter mask so the framed image still fills the card */
  -webkit-mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 70%, rgba(0,0,0,.5) 90%, transparent 100%);
          mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 70%, rgba(0,0,0,.5) 90%, transparent 100%);
}


/* Launch-ready: real headshot fills the existing amber frame */
body.design-30 .portrait .frame picture{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
body.design-30 .portrait .frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
body.design-30 .portrait .frame > .fig,
body.design-30 .portrait .frame > span{display: none !important;}
body.design-30.page-about .stats{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px){
  body.design-30.page-about .stats{grid-template-columns: 1fr 1fr;}
}
body.design-30 .press-strip-inline{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  margin-top: 8px;
}
body.design-30 .press-strip-inline .press-mark{
  font-family: var(--hf, "Manrope", sans-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink, #1C1B19);
}
body.design-30 .headshot-pack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 360px;
}
body.design-30 .headshot-pack .portrait{
  width: 100%;
  height: 420px;
}
body.design-30 .signup-note{
  margin: 14px 0 0;
  font-size: 14.5px;
  color: #5C5852;
}
body.design-30 .privacy-copy{
  max-width: 720px;
}
body.design-30 .privacy-copy h1{
  font-size: 60px;
  font-weight: 800;
  margin: 0 0 24px;
}
body.design-30 .privacy-copy h2{
  font-size: 22px;
  font-weight: 800;
  margin: 32px 0 10px;
}

/* Contact form status and honeypot */
.contact{position:relative}
.contact .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact .form-status{grid-column:1/-1;margin:4px 0 0;font-size:15px;font-weight:500;line-height:1.45}
.contact .form-status.is-ok{color:var(--text)}
.contact .form-status.is-err{color:#7a1d1d}
.contact .btn[disabled]{opacity:.6;cursor:wait}