/* Editorial, high-end personal brand. Charcoal hero, generous white space, light-weight display type, hairline rules, teal used sparingly. Single light theme to match the white-ground brand. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --mist:#F4F6F7; --ink:#2A333D; --night:#1E252D; --soft:#55606A; --gray:#7E7F81;
  --teal:#0E999F; --teal-deep:#08797C; --teal-lite:#6FD0D3; --line:#E1E6E9; --line-dark:rgba(255,255,255,.14);
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16.5px;line-height:1.8;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
main{flex:1}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.narrow{max-width:740px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-deep);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.display{font-weight:300;letter-spacing:-.025em;line-height:1.05}
.display strong{font-weight:600}
.h2{font-size:clamp(30px,3.6vw,44px);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.h2 strong{font-weight:600}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1.05}
.brand img{height:36px;width:auto}
.brand b{display:block;font-weight:700;font-size:14px;letter-spacing:.14em}
.brand i{display:block;font-style:normal;font-weight:600;font-size:10px;letter-spacing:.5em;color:var(--teal);margin-top:3px}
nav{display:flex;gap:4px 34px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);padding:6px 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal)}

/* buttons */
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 30px;border:1px solid currentColor;transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.solid:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.btn.ghost:hover{border-color:#fff}
.btn.line{color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.textlink{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.textlink:hover{color:var(--ink)}

/* home hero */
.hero{background:var(--night);color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:center;padding-block:88px 96px}
.hero .copy{display:grid;gap:30px;min-width:0}
.hero .eyebrow{color:var(--teal-lite)}
.hero h1{font-size:clamp(46px,6.6vw,86px)}
.hero h1 strong{color:var(--teal-lite);font-weight:600}
.hero .lede{font-size:clamp(17px,1.7vw,19px);line-height:1.75;max-width:50ch;color:#C3CBD1}
.portrait{margin:0;justify-self:end;width:100%;max-width:420px}
.frame{position:relative;display:block}
.plate{position:relative;z-index:1;display:grid;place-items:center;background:#fff;aspect-ratio:5/5.4;padding:14%}
.plate img{width:100%;height:auto;aspect-ratio:auto!important}
.portrait img{width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:50% 20%;position:relative;z-index:1}
.frame::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--teal);z-index:0}
.portrait figcaption{margin-top:44px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#93A0AA}
.portrait figcaption b{display:block;color:#fff;font-size:14px;letter-spacing:.14em;margin-bottom:2px}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:56px;padding-block:64px 80px}.portrait{justify-self:start;max-width:340px}}

/* credential strip */
.strip{border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));padding-block:0}
.stat{padding:40px 28px 40px 0;display:grid;gap:6px;align-content:start;min-width:0}
.stat + .stat{padding-left:28px;border-left:1px solid var(--line)}
@media (max-width:900px){.strip .wrap{grid-template-columns:1fr 1fr}.stat,.stat + .stat{padding:28px 16px 28px 0;border-left:0}.stat:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}.stat:nth-child(n+3){border-top:1px solid var(--line)}.stat .n{font-size:26px}}
.stat .n{font-size:32px;font-weight:300;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}

section > .wrap{padding-block:104px}
section.mist{background:var(--mist)}
.sec-head{display:grid;gap:18px;margin-bottom:56px;max-width:60ch}
.sec-head p{color:var(--soft);font-size:17px}
.sec-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:56px}
.sec-row .sec-head{margin-bottom:0}

/* editorial article list */
.list{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:12px 40px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row .topic{font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-deep)}
.row .main{display:grid;gap:10px;min-width:0}
.row h3{font-size:clamp(21px,2.3vw,27px);font-weight:500;letter-spacing:-.01em;line-height:1.3;transition:color .2s}
.row p{color:var(--soft);font-size:16px;max-width:62ch}
.row .time{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);white-space:nowrap;display:flex;align-items:center;gap:14px}
.row .time::after{content:"\2192";font-size:18px;letter-spacing:0;color:var(--ink);transition:transform .2s}
.row:hover h3{color:var(--teal-deep)}
.row:hover .time::after{transform:translateX(5px)}
.row[hidden]{display:none}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:10px;padding:28px 0}}

.filters{display:flex;gap:6px 28px;flex-wrap:wrap;margin-bottom:40px}
.filters button{font:600 12px var(--font);letter-spacing:.16em;text-transform:uppercase;background:none;color:var(--gray);border:0;border-bottom:1px solid transparent;padding:6px 0;cursor:pointer}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--teal)}

/* philosophy */
.philosophy .wrap{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.philosophy blockquote{margin:0;font-size:clamp(28px,3.6vw,46px);font-weight:300;letter-spacing:-.02em;line-height:1.25}
.philosophy blockquote strong{font-weight:600;color:var(--teal-deep)}
.philosophy .tenets{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px 40px}
.tenet{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:20px}
.tenet h3{font-size:15px;font-weight:600}
.tenet p{font-size:15px;color:var(--soft);line-height:1.7}
@media (max-width:860px){.philosophy .wrap{grid-template-columns:minmax(0,1fr)}}

/* page head */
.page-head{border-bottom:1px solid var(--line)}
.page-head .wrap{padding-block:96px 72px;display:grid;gap:24px}
.page-head h1{font-size:clamp(42px,6vw,72px)}
.page-head p{color:var(--soft);max-width:56ch;font-size:18px}

/* article page */
.post-head .wrap{padding-block:80px 48px;display:grid;gap:24px}
.post-head h1{font-size:clamp(34px,5vw,54px);font-weight:500;letter-spacing:-.025em;line-height:1.12}
.post-head .dek{font-size:20px;line-height:1.6;color:var(--soft);font-weight:300}
.meta{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.meta .topic{color:var(--teal-deep)}
.back{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);text-decoration:none}
.back:hover{color:var(--ink)}
.rule{width:64px;height:2px;background:var(--teal)}
.post-body .wrap{padding-block:8px 96px;display:grid;gap:26px}
.post-body p{font-size:18.5px;line-height:1.85}
.post-body p:first-child::first-letter{float:left;font-size:4.1em;line-height:.82;font-weight:600;margin:6px 12px 0 0;color:var(--teal-deep)}
.pull{font-weight:300!important;font-size:clamp(24px,3vw,30px)!important;line-height:1.35!important;letter-spacing:-.015em;color:var(--ink);padding-block:22px;border-block:1px solid var(--line);margin-block:10px}
.lessons{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.lessons li{font-size:17.5px;line-height:1.75;padding:18px 0 18px 32px;border-bottom:1px solid var(--line);position:relative}
.lessons li::before{content:"";position:absolute;left:4px;top:30px;width:12px;height:2px;background:var(--teal)}
.lessons strong{font-weight:600;color:var(--ink)}
.origin{font-size:14.5px!important;color:var(--gray);font-style:italic}
.origin a{color:var(--teal-deep)}
.post-fig{margin:12px 0 0}
.post-fig img{width:100%;max-width:560px;height:auto;aspect-ratio:1/1;object-fit:cover}
.byline{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:32px;margin-top:24px}
.byline img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.byline p{font-size:15px!important;line-height:1.65!important;color:var(--soft)}
.byline b{color:var(--ink)}
.next{background:var(--mist)}
.next .wrap{padding-block:56px;display:grid;gap:14px}
.next a{font-size:clamp(22px,2.8vw,30px);font-weight:300;letter-spacing:-.015em;text-decoration:none;line-height:1.3}
.next a:hover{color:var(--teal-deep)}

/* about */
.about-hero .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:center;padding-block:88px}
.about-hero .portrait{justify-self:start;max-width:440px}
.about-hero .frame::before{inset:22px 22px -22px -22px}
.about-hero .portrait img{aspect-ratio:5/6.4}
.about-hero .copy{display:grid;gap:26px;min-width:0}
.about-hero h1{font-size:clamp(44px,6vw,76px)}
.about-hero .role{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);line-height:2}
.about-hero .intro{font-size:clamp(18px,1.8vw,21px);font-weight:300;line-height:1.7;max-width:46ch}
@media (max-width:860px){.about-hero .wrap{grid-template-columns:minmax(0,1fr);gap:64px;padding-block:56px 72px}.about-hero .portrait{max-width:320px;margin-left:22px}}

.story .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px 96px;align-items:start}
.story .copy{display:grid;gap:22px;align-content:start;min-width:0}
.story .copy p{font-size:17.5px;line-height:1.85;max-width:62ch}
.story .copy .pull{margin-top:12px}
@media (max-width:860px){.story .wrap{grid-template-columns:minmax(0,1fr)}}
.creds{list-style:none;margin:0;padding:0;align-self:start;min-width:0}
.creds .cap{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-deep);padding-bottom:16px;border-bottom:1px solid var(--ink)}
.creds li:not(.cap){display:grid;gap:2px;padding:18px 0;border-bottom:1px solid var(--line)}
.creds li b{font-size:15.5px;font-weight:600}
.creds li span{font-size:14px;color:var(--gray)}

.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:1px solid var(--ink)}
.result{padding:40px 32px 8px 0;display:grid;gap:14px;align-content:start;min-width:0}
.result + .result{padding-left:32px;border-left:1px solid var(--line)}
@media (max-width:900px){.result + .result{border-left:0;padding-left:0;border-top:1px solid var(--line)}.result{padding-bottom:40px}}
.result .label{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.result .fig{font-weight:300;font-size:clamp(48px,5vw,64px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.result .fig small{font-size:.5em;color:var(--teal-deep);font-weight:400}
.result p{font-size:15.5px;color:var(--soft);line-height:1.7}

.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 48px;border-top:1px solid var(--ink)}
.tp{padding:24px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;min-width:0}
.tp h3{font-size:16px;font-weight:600}
.tp p{font-size:15px;color:var(--soft);line-height:1.65}

/* connect + footer */
.connect-band{background:var(--night);color:#fff}
.connect{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:36px 80px;align-items:center;padding-block:96px}
.connect .copy{display:grid;gap:20px;min-width:0}
.connect .eyebrow{color:var(--teal-lite)}
.connect h2{color:#fff}
.connect p{color:#AEB8C0;max-width:46ch}
.mail{display:grid;gap:14px;min-width:0}
.mail .v{font-size:clamp(19px,2.2vw,26px);font-weight:300;letter-spacing:-.01em;color:#fff;word-break:break-word;user-select:all;border-bottom:1px solid var(--line-dark);padding-bottom:16px}
.mail button{font:600 12px var(--font);letter-spacing:.18em;text-transform:uppercase;background:none;color:var(--teal-lite);border:0;padding:4px 0;cursor:pointer}
.mail button:hover{color:#fff}
.mail-actions{display:flex;gap:12px 32px;flex-wrap:wrap;align-items:center}
.mail .li{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lite);text-decoration:none}
.mail .li:hover{color:#fff}
footer{background:var(--bg);border-top:1px solid var(--line)}
footer .wrap{padding-block:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:64px;width:auto}
footer .f{display:grid;gap:4px;text-align:right;font-size:12.5px;color:var(--gray);letter-spacing:.04em}
@media (max-width:600px){footer .f{text-align:left}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}