:root{ /* A speaker identity, not a product brand: near-black and navy carry the weight, gold does the signalling, beige keeps the reading sections warm. Fixed palette by design, so the page opts out of dark-mode inversion. */ color-scheme: only light; --black:#08090c; --ink:#0c1322; --navy-900:#0b1b33; --navy-800:#10294a; --navy-700:#17385f; --gold-200:#f7ecc8; --gold-300:#efd89a; --gold-400:#e0c274; --gold-500:#c9a227; --gold-600:#a8841d; --beige-50:#faf6ee; --beige-100:#f3ebdc; --beige-200:#e8dcc6; --beige-300:#d9c8a8; --sheen:linear-gradient(100deg,#a8841d 0%,#e0c274 22%,#fff6dd 40%,#efd89a 56%,#c9a227 78%,#a8841d 100%); --display:"Playfair Display",ui-serif,Georgia,serif; --sans:"Inter",ui-sans-serif,system-ui,sans-serif; --gut:20px; --ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--black);color:var(--beige-50);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:1160px;margin:0 auto;padding:0 var(--gut)} .narrow{max-width:820px;margin:0 auto;padding:0 var(--gut)} /* ---------- type helpers ---------- */ .label{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400)} .label.dim{color:var(--gold-600)} .gold-text{background:var(--sheen);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite} @keyframes sheen{0%{background-position:0% 50%}100%{background-position:220% 50%}} h2.sec{font-family:var(--display);font-weight:600;font-size:clamp(30px,5.4vw,46px);line-height:1.1;letter-spacing:-.01em;margin:16px 0 0} .hair{height:1px;border:0;background:linear-gradient(to right,transparent,rgba(224,194,116,.5),transparent)} /* ---------- nav ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(8,9,12,.72);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(224,194,116,.16)} nav{display:flex;align-items:center;justify-content:space-between;gap:14px;height:66px} .brand{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.14em;text-decoration:none;white-space:nowrap;color:var(--beige-50)} .brand em{font-style:normal} .links{display:none;gap:32px;font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase} .links a{color:rgba(250,246,238,.66);text-decoration:none;transition:color .25s var(--ease)} .links a:hover,.links a:focus-visible{color:var(--gold-300)} @media(min-width:940px){.links{display:flex}} /* Language switch. Stays visible at phone width, where .links is hidden: a reader who cannot read the page must still be able to leave it. */ .lang{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:12px;flex-shrink:0} .lang a{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-decoration:none; padding:6px 9px;border-radius:2px;color:rgba(250,246,238,.55); transition:color .25s var(--ease),background .25s var(--ease)} .lang a:hover,.lang a:focus-visible{color:var(--gold-300)} .lang a[aria-current]{color:var(--gold-300);background:rgba(224,194,116,.12)} .lang span{color:rgba(250,246,238,.22);font-size:11px} @media(min-width:940px){.lang{margin-left:0}} /* The switch costs the bar 78px it did not have before. Below 480 the three items together exceeded the gutter, so the button sat flush to the screen edge with overflow-x hiding the evidence. */ @media(max-width:480px){ nav{gap:8px} .brand{font-size:14px;letter-spacing:.1em} .lang{margin-right:4px} .lang a{padding:6px 6px} .btn-sm{padding:11px 15px;letter-spacing:.05em} } /* ---------- buttons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:14px 26px;border-radius:2px;text-decoration:none;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)} .btn-gold{color:#120d02;background:var(--sheen);background-size:220% 100%;box-shadow:0 10px 34px -14px rgba(224,194,116,.9);animation:sheen 9s linear infinite} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(224,194,116,1)} .btn-line{color:var(--beige-50);border:1px solid rgba(224,194,116,.42);background:transparent} .btn-line:hover{border-color:var(--gold-400);color:var(--gold-300);transform:translateY(-2px)} .btn-sm{padding:11px 20px;font-size:11.5px} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background: radial-gradient(120% 80% at 78% 0%,rgba(23,56,95,.55),transparent 58%), radial-gradient(90% 70% at 10% 100%,rgba(168,132,29,.16),transparent 60%), linear-gradient(180deg,#08090c 0%,#0b1b33 52%,#08090c 100%)} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(to right,transparent,rgba(224,194,116,.42),transparent)} .hero-grid{position:relative;z-index:2;display:grid;gap:46px;align-items:center;padding:62px 0 70px} @media(min-width:980px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:64px;padding:96px 0 104px}} .hero h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,9vw,78px);line-height:1;letter-spacing:-.015em;margin:20px 0 0} .hero .roles{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,238,.62)} .hero .roles span{position:relative;padding-left:18px} .hero .roles span:first-child{padding-left:0} .hero .roles span:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--gold-500)} .hero .idea{margin-top:28px;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(19px,3vw,24px);line-height:1.5;color:var(--beige-100);max-width:30ch} .hero .idea b{font-style:normal;font-weight:600;color:var(--gold-300)} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} /* hero portrait */ .portrait{position:relative;justify-self:center;width:min(100%,378px)} .portrait .glow{position:absolute;inset:-12% -12% 4%;background:radial-gradient(closest-side,rgba(224,194,116,.26),transparent 74%);filter:blur(22px);pointer-events:none} .portrait .frame{position:relative;border-radius:3px;overflow:hidden;border:1px solid rgba(224,194,116,.42);box-shadow:0 46px 104px -36px rgba(0,0,0,.95)} .portrait .frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 38%)} .portrait img{width:100%;height:auto} .portrait .pcap{position:relative;margin-top:14px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)} /* ---------- idea band ---------- */ .band{position:relative;background:var(--ink);border-bottom:1px solid rgba(224,194,116,.14);padding:56px 0} .band .narrow{text-align:center} .band .statement{margin-top:18px;font-family:var(--display);font-weight:500;font-size:clamp(20px,3.4vw,29px);line-height:1.42;letter-spacing:-.01em;color:var(--beige-50)} .band .statement b{font-weight:600;color:var(--gold-300)} @media(min-width:900px){.band{padding:76px 0}} /* ---------- background / credentials ---------- */ #background{background:var(--ink);border-bottom:1px solid rgba(224,194,116,.14);position:relative;overflow:hidden} #background::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 85% 0%,rgba(23,56,95,.55),transparent 62%)} #background .wrap{position:relative;z-index:2} .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:42px;background:rgba(224,194,116,.18);border:1px solid rgba(224,194,116,.18)} @media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--ink);padding:26px 16px;text-align:center} .stat .n{font-family:var(--display);font-weight:700;font-size:clamp(28px,5vw,38px);line-height:1;color:var(--gold-400)} .stat .l{margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,246,238,.6);line-height:1.5} .creds{margin-top:38px;display:grid} @media(min-width:800px){.creds{grid-template-columns:1fr 1fr;column-gap:48px}} .cred-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(224,194,116,.14);align-items:flex-start} .cred-item .mark{flex-shrink:0;width:8px;height:10px;margin-top:7px;border-left:1.5px solid var(--gold-500);border-top:1.5px solid var(--gold-500);border-bottom:1.5px solid var(--gold-500)} .cred-item p{font-size:15px;line-height:1.65;color:rgba(250,246,238,.76)} .cred-item p b{font-weight:600;color:#fff} /* The one blue on a gold page: an outbound link the reader is meant to follow and verify, so it reads as a link rather than as an accent. */ .cred-item a{color:#7fb8ef;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s var(--ease)} .cred-item a:hover,.cred-item a:focus-visible{color:#a9d2f7} /* proof row: the foundation's own words beside a photograph from the floor */ .proof-row{margin-top:40px;display:grid;gap:34px;align-items:center} @media(min-width:900px){.proof-row{grid-template-columns:1.25fr .75fr;gap:52px}} .floor{position:relative;justify-self:center;width:min(100%,330px)} .floor .frame{position:relative;border-radius:3px;overflow:hidden;border:1px solid rgba(224,194,116,.36);box-shadow:0 34px 76px -32px rgba(0,0,0,.95)} .floor .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(122deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 40%)} .floor img{width:100%;height:auto} .floor figcaption{margin-top:12px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-400);line-height:1.6} /* the field photograph the testimonial belongs to */ .field .frame{position:relative;border-radius:3px;overflow:hidden;border:1px solid rgba(224,194,116,.3);box-shadow:0 30px 68px -34px rgba(0,0,0,.9)} .field .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(124deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 42%)} .field img{width:100%;height:auto} .field figcaption{margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)} /* testimonial */ .quote{margin-top:30px;position:relative;border-left:2px solid var(--gold-500);padding:4px 0 4px 26px;max-width:62ch} .quote p.said{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(18px,2.8vw,23px);line-height:1.52;color:var(--beige-50)} .quote p.trans{margin-top:12px;font-size:14.5px;line-height:1.66;color:rgba(250,246,238,.6)} .quote footer{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)} .quote footer span{display:block;margin-top:5px;font-weight:500;letter-spacing:.1em;color:rgba(250,246,238,.5)} /* promise */ #promise{background:var(--ink);border-top:1px solid rgba(224,194,116,.14);border-bottom:1px solid rgba(224,194,116,.14)} .promises{display:grid;gap:0;margin-top:42px} @media(min-width:840px){.promises{grid-template-columns:1fr 1fr;column-gap:48px}} .promise{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(224,194,116,.14);align-items:flex-start} .promise .tick{flex-shrink:0;width:15px;height:9px;margin-top:6px;border-left:2px solid var(--gold-400);border-bottom:2px solid var(--gold-400);transform:rotate(-45deg)} .promise p{font-size:15.5px;line-height:1.66;color:rgba(250,246,238,.78)} .promise p b{font-weight:600;color:#fff} .kit{margin-top:38px;border:1px solid rgba(224,194,116,.26);border-radius:3px;padding:26px 28px;background:linear-gradient(160deg,rgba(23,56,95,.4),rgba(12,19,34,.8))} .kit h3{font-family:var(--display);font-weight:600;font-size:20px;color:#fff;margin-top:10px} .kit p{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(250,246,238,.7);max-width:62ch} .kit .intro{margin-top:18px;padding:20px 22px;border-left:2px solid var(--gold-500);background:rgba(8,9,12,.45)} .kit .intro p{margin-top:0;font-family:var(--display);font-style:italic;font-size:16px;line-height:1.64;color:var(--beige-100);max-width:64ch} .kit .intro p + p{margin-top:15px} /* ---------- sections ---------- */ section{padding:74px 0} @media(min-width:900px){section{padding:104px 0}} .sec-head{max-width:660px} .sec-head .lede{margin-top:18px;font-size:16.5px;line-height:1.78;color:rgba(250,246,238,.68)} /* topics */ #topics{background:var(--black);position:relative} .topics{display:grid;gap:18px;margin-top:46px} @media(min-width:780px){.topics{grid-template-columns:1fr 1fr;gap:20px}} .topic{position:relative;display:flex;flex-direction:column;border-radius:3px;padding:34px 30px 30px;background:linear-gradient(165deg,rgba(23,56,95,.42),rgba(12,19,34,.75));border:1px solid rgba(224,194,116,.2);overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)} .topic::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(247,236,200,.75),transparent)} .topic:hover{transform:translateY(-5px);border-color:rgba(224,194,116,.46);box-shadow:0 34px 70px -34px rgba(0,0,0,.95)} .topic .n{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.26em;color:var(--gold-500)} .topic h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.9vw,26px);line-height:1.2;letter-spacing:-.01em;margin:14px 0 0;color:#fff} .topic .sub{margin-top:9px;font-size:13.5px;font-style:italic;color:var(--gold-300);line-height:1.5} .topic p.body{margin-top:16px;font-size:15px;line-height:1.75;color:rgba(250,246,238,.7)} .topic .tags{margin-top:auto;padding-top:16px;border-top:1px solid rgba(224,194,116,.18);display:flex;flex-wrap:wrap;gap:7px;list-style:none} /* Scannable in two seconds. Each line opens with a bracket mark drawn in CSS rather than a typed character, so long lines wrap without a stray glyph. */ .topic .points{list-style:none;margin:18px 0 22px} .topic .points li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.62;color:rgba(250,246,238,.78)} .topic .points li+li{margin-top:9px} .topic .points li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:9px;border-left:1.5px solid var(--gold-400);border-top:1.5px solid var(--gold-400);border-bottom:1.5px solid var(--gold-400)} @media(min-width:780px){ .topic.wide{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start} .topic.wide .head{display:flex;flex-direction:column} .topic.wide .points{margin-top:0} } .topic .tags li{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-400);border:1px solid rgba(224,194,116,.28);padding:5px 11px;border-radius:999px} /* formats */ .formats{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px} .chip{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--beige-100);border:1px solid rgba(224,194,116,.26);padding:10px 18px;border-radius:999px;background:rgba(23,56,95,.28)} .formats-note{margin-top:24px;font-size:15px;line-height:1.78;color:rgba(250,246,238,.62);max-width:62ch} /* ---------- about (light) ---------- */ #about{background:var(--beige-50);color:var(--ink)} #about .label{color:var(--gold-600)} #about h2.sec{color:var(--ink)} .about-grid{display:grid;gap:40px;margin-top:42px} @media(min-width:920px){.about-grid{grid-template-columns:1.12fr .88fr;gap:60px;align-items:start}} .about-body p{font-size:16.5px;line-height:1.82;color:#3a4152} .about-body p+p{margin-top:18px} .about-body strong{color:var(--ink);font-weight:600} .side{border:1px solid rgba(12,19,34,.1);border-radius:3px;background:#fff;padding:28px 26px;box-shadow:0 1px 2px rgba(8,9,12,.04),0 26px 56px -34px rgba(8,9,12,.3)} .side .label{color:var(--gold-600)} .side dl{margin-top:16px} .side .row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(12,19,34,.08);align-items:baseline} .side .row:last-child{border-bottom:0;padding-bottom:0} .side dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);min-width:104px;flex-shrink:0} .side dd{font-size:15px;color:#3a4152} .side .iaapa{margin-top:24px;padding-top:22px;border-top:1px solid rgba(12,19,34,.08);text-align:center} .side .iaapa img{width:168px;margin:0 auto;height:auto} .side .iaapa p{margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);line-height:1.6} /* ---------- mentoring ---------- */ #mentoring{background:var(--ink);position:relative;overflow:hidden} #mentoring::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 15% 0%,rgba(23,56,95,.6),transparent 62%)} .ment-grid{position:relative;z-index:2;display:grid;gap:34px;margin-top:42px} @media(min-width:860px){.ment-grid{grid-template-columns:repeat(3,1fr);gap:22px}} .ment{border-left:1px solid rgba(224,194,116,.3);padding:4px 0 4px 22px} .ment h4{font-family:var(--display);font-weight:600;font-size:19px;color:#fff;letter-spacing:-.005em} .ment p{margin-top:10px;font-size:14.5px;line-height:1.75;color:rgba(250,246,238,.66)} /* ---------- booking ---------- */ #book{background: radial-gradient(100% 70% at 50% 0%,rgba(23,56,95,.5),transparent 60%), linear-gradient(180deg,#08090c,#0b1b33 70%,#08090c)} .book-grid{display:grid;gap:40px;margin-top:44px} @media(min-width:940px){.book-grid{grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}} .book-aside p{font-size:15.5px;line-height:1.8;color:rgba(250,246,238,.68)} .book-aside p+p{margin-top:16px} .book-aside .direct{margin-top:26px;padding-top:22px;border-top:1px solid rgba(224,194,116,.2)} .book-aside .direct a{display:block;font-size:15px;color:var(--gold-300);text-decoration:none;margin-top:8px;letter-spacing:.01em;transition:color .25s var(--ease)} .book-aside .direct a:hover{color:var(--gold-200)} form{background:linear-gradient(165deg,rgba(23,56,95,.4),rgba(12,19,34,.8));border:1px solid rgba(224,194,116,.24);border-radius:3px;padding:30px 26px;position:relative;overflow:hidden} form::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(247,236,200,.7),transparent)} .fields{display:grid;gap:16px} @media(min-width:620px){.fields{grid-template-columns:1fr 1fr}.fw{grid-column:1/-1}} .field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:8px} .field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--beige-50);background:rgba(8,9,12,.5);border:1px solid rgba(224,194,116,.24);border-radius:2px;padding:12px 13px;transition:border-color .25s var(--ease),background .25s var(--ease)} .field textarea{min-height:104px;resize:vertical} /* The page is light-scheme, but these controls sit on near-black: without this the native date picker's icon is dark-on-dark and unreadable. */ .field input[type=date]{color-scheme:dark} .field input::placeholder,.field textarea::placeholder{color:rgba(250,246,238,.34)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-400);background:rgba(8,9,12,.72)} .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-400) 50%),linear-gradient(135deg,var(--gold-400) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .field select option{background:var(--ink);color:var(--beige-50)} .field .err{display:none;margin-top:6px;font-size:12px;color:#ffab9a} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e0705c} .field.invalid .err{display:block} form .submit{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} form .hint{font-size:12.5px;line-height:1.6;color:rgba(250,246,238,.46);max-width:34ch} .sent{display:none;margin-top:18px;padding:14px 16px;border:1px solid rgba(224,194,116,.4);border-radius:2px;background:rgba(224,194,116,.09);font-size:14px;line-height:1.65;color:var(--gold-200)} .sent.show{display:block} .sent.bad{border-color:rgba(224,112,92,.5);background:rgba(224,112,92,.1);color:#ffc4b6} .sent a{color:var(--gold-300)} form button[disabled]{opacity:.62;cursor:progress} /* Honeypot: off-screen rather than display:none, since some bots skip hidden fields but happily fill one that is merely out of view. */ .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- footer ---------- */ /* Scoped: a