:root{
  --ink:#14181B;
  --body:#3D474C;
  --muted:#626F75;
  --rule:#DCE1E3;
  --wash:#F4F6F6;
  --white:#FFFFFF;
  --serif:'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --sans:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter:clamp(20px, 5.5vw, 80px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--white)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--white); color:var(--body); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid #2E6BE6; outline-offset:3px}

.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase}
h1,h2,h3{font-family:var(--serif); font-weight:400; color:var(--ink); margin:0; text-wrap:balance}
p{margin:0}

/* ---------- header ---------- */
.site-header{position:absolute; top:0; left:0; right:0; z-index:20; padding:26px var(--gutter) 76px;
  background:linear-gradient(to bottom, rgba(10,14,17,.62), rgba(10,14,17,0));
  display:flex; align-items:center; justify-content:space-between; gap:20px; transition:background .25s ease, padding .25s ease}
.site-header.stuck{position:fixed; padding:14px var(--gutter); background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--rule); box-shadow:0 1px 14px rgba(20,24,27,.06)}
.wordmark{font-family:var(--serif); font-size:21px; color:#fff; text-shadow:0 1px 16px rgba(8,12,15,.5)}
.site-header.stuck .wordmark{color:var(--ink); text-shadow:none}
.nav{display:flex; gap:clamp(18px,2.4vw,34px); font-size:15px; font-weight:500; color:#fff; text-shadow:0 1px 16px rgba(8,12,15,.5)}
.site-header.stuck .nav{color:var(--ink); text-shadow:none}
.nav a{padding:4px 0; border-bottom:1px solid transparent; transition:border-color .18s ease, opacity .18s ease}
.nav a:hover{border-bottom-color:currentColor}
.nav-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.5); color:#fff; font:500 14px/1 var(--sans); padding:10px 14px; border-radius:2px; cursor:pointer}
.site-header.stuck .nav-toggle{border-color:var(--rule); color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative}
.hero-img{width:100%; height:clamp(460px, 62vw, 760px); object-fit:cover}
.hero-body{position:absolute; left:0; right:0; bottom:0; padding:clamp(120px,22vw,200px) var(--gutter) clamp(40px,5vw,64px);
  background:linear-gradient(to top, rgba(12,16,18,.88), rgba(12,16,18,0))}
.hero-inner{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,26px)}
.hero .eyebrow{color:#fff; letter-spacing:.14em}
.hero h1{font-size:clamp(32px,5.4vw,68px); line-height:1.08; color:#fff; max-width:17ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.btn{display:inline-block; font-size:15px; font-weight:600; padding:15px 32px; transition:transform .15s ease, background-color .18s ease, color .18s ease}
.btn-solid{background:#fff; color:var(--ink)}
.btn-solid:hover{background:#E9EDEE; transform:translateY(-1px)}
.btn-ghost{border:1px solid rgba(255,255,255,.5); color:#fff; font-weight:500}
.btn-ghost:hover{background:rgba(255,255,255,.14); transform:translateY(-1px)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#000; transform:translateY(-1px)}

/* ---------- sections ---------- */
section{scroll-margin-top:84px}
.intro{padding:clamp(56px,7vw,96px) var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(28px,5vw,80px); align-items:start}
.intro .lede{font-family:var(--serif); font-size:clamp(22px,2.6vw,34px); line-height:1.36; color:var(--ink); max-width:26ch}
.intro .col{display:flex; flex-direction:column; gap:16px; padding-top:8px}
.intro .col p+p{color:var(--ink); font-weight:500}
.intro p{font-size:clamp(16px,1.3vw,17.5px); line-height:1.68}

.offers{padding:0 var(--gutter) clamp(56px,7vw,96px); display:flex; flex-direction:column; gap:clamp(24px,3vw,36px)}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid var(--rule); padding-bottom:18px}
.sec-head h2{font-size:clamp(26px,3vw,34px)}
.offer-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,28px)}
.offer{display:flex; flex-direction:column; gap:18px}
.offer img{width:100%; height:clamp(200px,19vw,270px); object-fit:cover; transition:transform .4s ease}
.offer .frame{overflow:hidden}
.offer:hover img{transform:scale(1.03)}
.offer h3{font-size:clamp(21px,1.9vw,25px)}
.offer .for{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; line-height:1.5}
.offer .txt{display:flex; flex-direction:column; gap:11px}
.offer p{font-size:16.5px; line-height:1.62}

/* ---------- image bands ---------- */
.band{position:relative}
.band>img{width:100%; height:clamp(420px,33vw,480px); object-fit:cover}
.band .scrim{position:absolute; inset:0; padding:clamp(40px,6vw,72px) var(--gutter); display:flex; flex-direction:column; gap:clamp(24px,3vw,40px); justify-content:center;
  background:linear-gradient(to bottom, rgba(10,14,17,.34), rgba(10,14,17,.22))}
.band h2{color:#fff; font-size:clamp(26px,3.2vw,36px); text-shadow:0 2px 20px rgba(8,12,15,.85)}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px)}
.stat{display:flex; flex-direction:column; gap:12px}
.stat .fig{font-family:var(--serif); font-size:clamp(32px,3.8vw,46px); line-height:1; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 2px 20px rgba(8,12,15,.85)}
.stat p{font-size:16px; line-height:1.6; color:#fff; text-shadow:0 1px 16px rgba(8,12,15,.9)}

/* ---------- speaking ---------- */
.speaking{display:grid; grid-template-columns:minmax(0,720px) minmax(0,1fr); align-items:stretch}
.speaking>img{width:100%; height:100%; min-height:clamp(320px,40vw,560px); object-fit:cover}
.speaking .col{padding:clamp(44px,5vw,72px) var(--gutter); display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); justify-content:center}
.speaking h2{font-size:clamp(26px,3vw,38px); line-height:1.18; max-width:18ch}
.speaking .col>p{font-size:17px; line-height:1.65; max-width:46ch}
.topics{display:flex; flex-direction:column; margin-top:8px; border-top:1px solid var(--rule)}
.topics li{list-style:none; padding:15px 0; border-bottom:1px solid var(--rule); font-size:17px; color:var(--ink)}
.topics{padding:0; margin-block:8px 0}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,620px); align-items:center; background:var(--wash)}
.about .col{padding:clamp(48px,6vw,88px) var(--gutter); display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px)}
.about h2{font-size:clamp(28px,3.4vw,42px); line-height:1.16}
.about p{font-size:clamp(16px,1.4vw,18px); line-height:1.7; max-width:54ch}
.about .pic{padding:clamp(0px,4vw,64px) var(--gutter) clamp(40px,4vw,64px) 0}
.about .pic img{width:100%; max-width:280px; height:340px; margin-inline:auto; object-fit:cover; object-position:50% 22%}
.inline-link{font-weight:600; color:var(--ink); border-bottom:1px solid var(--rule); align-self:flex-start; padding-bottom:2px; transition:border-color .18s ease}
.inline-link:hover{border-bottom-color:var(--ink)}

/* ---------- contact ---------- */
.contact{position:relative}
.contact>img{width:100%; height:clamp(380px,30vw,400px); object-fit:cover}
.contact .scrim{position:absolute; inset:0; padding:clamp(40px,6vw,72px) var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,5vw,64px); flex-wrap:wrap;
  background:linear-gradient(to right, rgba(8,14,22,.46) 0%, rgba(8,14,22,.20) 58%, rgba(8,14,22,.04) 100%)}
.contact h2{color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.12; text-shadow:0 2px 22px rgba(6,10,16,.95)}
.contact p{color:#fff; font-size:18px; line-height:1.6; max-width:46ch; text-shadow:0 2px 18px rgba(6,10,16,.95)}
.contact .col{display:flex; flex-direction:column; gap:18px}

.site-footer{background:var(--ink); padding:30px var(--gutter); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:#7E8A90; text-transform:uppercase}
.site-footer a:hover{color:#fff}
.site-footer .links{display:flex; gap:28px}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .speaking{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about .pic{padding:0 var(--gutter) clamp(40px,6vw,64px)}
  .about .col{padding-bottom:clamp(24px,4vw,40px)}
}
@media (max-width: 900px){
  .intro{grid-template-columns:1fr; gap:24px}
}
@media (max-width: 820px){
  .offer-grid{grid-template-columns:1fr; gap:36px}
  .offer img{height:clamp(220px,48vw,300px)}
  .stats{grid-template-columns:1fr; gap:22px}
  .band>img{height:auto; min-height:560px}
  .band .scrim{position:absolute}
}
@media (max-width: 720px){
  .nav{display:none; position:absolute; top:100%; right:var(--gutter); left:var(--gutter);
    flex-direction:column; gap:0; background:#fff; color:var(--ink); border:1px solid var(--rule);
    text-shadow:none; box-shadow:0 12px 40px rgba(20,24,27,.14)}
  .nav.open{display:flex}
  .nav a{padding:15px 20px; border-bottom:1px solid var(--rule); color:var(--ink)}
  .nav a:last-child{border-bottom:none}
  .nav-toggle{display:block}
  .site-header{padding-bottom:60px}
  .contact .scrim{flex-direction:column; align-items:flex-start; justify-content:center}
  .band>img{min-height:680px}
}

/* Writing and strategy resources */
.hero-img{height:clamp(640px,65vw,850px);object-position:50% 25%}
.hero-body{top:0;display:flex;align-items:flex-end;background:linear-gradient(to top,rgba(12,16,18,.94),rgba(12,16,18,.35) 70%,rgba(12,16,18,.15))}
.hero h1{max-width:22ch;font-size:clamp(36px,5vw,64px)}
.hero-subtitle{color:#fff;max-width:58ch;font-size:clamp(17px,1.8vw,21px);line-height:1.5}
.writing,.frameworks{padding:clamp(48px,6vw,88px) var(--gutter)}
.writing{background:var(--wash)}
.section-intro{margin:22px 0 32px;max-width:65ch}
.writing .offer,.offers .offer{border-top:2px solid var(--ink);padding-top:20px}
.talks{display:grid;gap:26px}.talks article{border-top:1px solid var(--rule);padding-top:22px;display:grid;gap:10px}
.talks h3,.frameworks h3{font-size:28px;line-height:1.2}
.talk-subtitle{font-weight:500;color:var(--ink)}.talks .audience{font-size:14px}
.talks .inline-link{justify-self:start;font-size:14px}
.speaking{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.speaking>img{max-height:850px;position:sticky;top:65px}
.framework-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:32px}
.framework-grid article>p{margin-top:14px}
.model{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.model li{padding:20px;border:1px solid var(--rule);background:var(--wash);display:grid;gap:5px}
.model strong{color:var(--ink);font-weight:500}.model span{font-size:15px}
@media(max-width:980px){.speaking{grid-template-columns:1fr}.speaking>img{position:static;height:auto;min-height:0;max-height:none;object-fit:contain}}
@media(max-width:720px){.framework-grid{grid-template-columns:1fr;gap:32px}.sec-head{align-items:flex-start;flex-direction:column;gap:10px}.hero-img{height:760px;object-position:58% 25%}}
.post-card{border-top:1px solid var(--rule);padding-top:22px}.post-card h3{font-size:27px;line-height:1.25;margin:12px 0}.post-card p{margin:14px 0 20px}.post-card a:hover{text-decoration:underline}
/* Share heading, introduction, and box rows across both frameworks. */
@media(min-width:721px){
  .framework-grid{row-gap:0}
  .framework-grid>article{display:grid;grid-template-rows:subgrid;grid-row:span 5}
  .framework-grid .model{grid-row:span 3;grid-template-rows:subgrid}
}
/* Let the experience section grow with its text at every screen size. */
#proof>img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
#proof .scrim{position:relative;background:rgba(10,14,17,.82)}
#proof h2{max-width:34ch}
#proof h3{color:#fff;font-size:clamp(25px,2.5vw,32px);line-height:1.2}
/* Contact form */
#contact>img{position:absolute;inset:0;height:100%;object-fit:cover}
#contact .scrim{position:relative;background:rgba(8,14,22,.8);display:grid;grid-template-columns:1fr 1fr;align-items:start}
.contact-form{display:grid;gap:9px;min-width:0;color:#fff}
.contact-form label{font-weight:500;margin-top:6px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border:1px solid #aeb7bb;border-radius:3px;background:#fff;color:var(--ink);font:16px var(--sans)}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form :focus-visible{outline:3px solid #9cd9ee;outline-offset:3px}
#contact .form-note,#contact #contact-status{font-size:14px;line-height:1.5}
.contact-form button{justify-self:start;margin-top:12px;cursor:pointer}
.contact-form button:disabled{opacity:.65;cursor:wait}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:820px){#contact .scrim{grid-template-columns:1fr}.contact-form{width:100%}}
.speaking-invitation{display:grid;gap:16px;padding:24px;background:var(--wash);border-left:3px solid var(--ink)}
.speaking-invitation h3{font-size:28px;line-height:1.2}
.speaking-invitation p{font-size:17px;line-height:1.65}
.speaking-invitation .inline-link{justify-self:start}
.consulting-invitation{display:grid;gap:18px;max-width:75ch;margin:28px 0 36px}
.consulting-invitation p{font-size:18px;line-height:1.7}
.consulting-invitation .inline-link{justify-self:start}
.article-updates{margin:36px 0;padding:28px;background:var(--wash);border:1px solid var(--rule)}
.article-updates h2{font-size:30px;margin-bottom:12px}.article-updates p{max-width:65ch;margin:0 0 18px}
.article-updates label{display:block;font-weight:500;margin-bottom:8px}.updates-fields{display:flex;flex-wrap:wrap;gap:12px}
.updates-fields input{flex:1 1 200px;min-width:0;padding:12px;border:1px solid var(--rule);font:inherit;background:white}
.updates-fields button{padding:12px 24px;border:0;background:var(--ink);color:white;font:inherit}
.updates-fields button:disabled{opacity:.65}.article-updates .updates-note{font-size:14px;line-height:1.6;margin:12px 0 0}

/* Shared navigation and keyboard access. */
.skip-link{position:fixed;top:12px;left:var(--gutter);z-index:100;padding:12px 18px;background:#fff;color:var(--ink);border:2px solid var(--ink);transform:translateY(-200%);font-weight:600}
.skip-link:focus{transform:translateY(0)}
#main-content:focus{outline:none}
@media(max-width:720px){
  html:not(.js) .site-header{position:relative;background:var(--ink);flex-wrap:wrap;padding:20px var(--gutter)}
  html:not(.js) .nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:12px;border:0;background:none;box-shadow:none;width:100%}
  html:not(.js) .nav a{padding:0;border:0;color:#fff}
  html:not(.js) .nav-toggle{display:none}
}
@media print{.skip-link{display:none}}

.site-header{position:relative;background:var(--ink);padding:26px var(--gutter)}
.nav{flex-wrap:wrap}.page{max-width:1200px;margin:auto;padding:64px var(--gutter)}
.page h1{font-size:clamp(36px,5vw,60px);line-height:1.12;margin:20px 0}
.article{max-width:760px;margin:auto}.article-body{margin-top:40px}
.article-body p,.article-body li{font-size:18px;line-height:1.8}
.article-body p{margin:0 0 20px}.article-body ul,.article-body ol{padding-left:26px;margin:0 0 24px}.article-body li{margin-bottom:12px}
.article-body h2{font-size:30px;line-height:1.25;margin:38px 0 16px}.meta{font-size:14px;color:var(--body)}
.article-tools{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0}.article-tools a,.article-tools button{border:1px solid var(--rule);padding:10px 16px;font:500 14px var(--sans);background:white;color:var(--ink);cursor:pointer}
.conversation{padding:28px;background:var(--wash);margin:40px 0}.conversation h2{font-size:30px;margin-bottom:12px}.conversation p{margin-bottom:16px}
.article-nav{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--rule);padding-top:24px}.article-nav a{max-width:48%;text-decoration:underline}
.collection{margin-top:48px}.collection h2{font-size:34px;margin-bottom:24px}.post-card{border-top:1px solid var(--rule);padding:25px 0}.post-card h3{font-size:27px;line-height:1.25;margin:10px 0}.post-card p{margin:12px 0}.post-card a:hover{text-decoration:underline}
.topic-links{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}.topic-links a{border-bottom:1px solid var(--rule)}
.series-guide{margin:24px 0;padding:18px 22px;background:var(--wash)}.series-guide summary{cursor:pointer;font-weight:600;color:var(--ink)}
.series-guide ol{padding-left:24px}.series-guide li{margin:10px 0}.series-guide a,.series-overview a{text-decoration:underline;text-underline-offset:3px}
.series-overview{padding:26px;background:var(--wash);margin:32px 0}.series-overview h2{font-size:30px;margin-bottom:14px}.series-overview li{margin:12px 0}
@media print{.site-header,.site-footer,.article-tools,.series-guide,.conversation,.article-nav,.article-updates{display:none}.page{padding:0}.article{max-width:none}.article-body h2{break-after:avoid}.article-body p{font-size:12pt;color:#000}a{color:#000}}
.worksheet-line{display:block;min-height:2em;border-bottom:1px solid var(--rule);width:100%}
.editor-note{padding:18px 22px;border-left:3px solid var(--muted);background:var(--wash);margin:24px 0}
@media(max-width:720px){.page{padding-top:36px}.article-nav{gap:18px}.conversation{padding:22px}.page h1{overflow-wrap:break-word}.site-header{padding:20px var(--gutter)}.js .nav{flex-wrap:nowrap}.js .nav-toggle{display:block}}