/* ==========================================================================
   Shelf & Shape — design system
   Source of truth: github.com/skalskiw/blog-style-guide (shape.css)
   Layers: 1 tokens · 2 base · 3 page layer (landing) · 4 motion · 5 responsive
   Rules: one radius (14px; 9–10px for chips), no blurred shadows, no gradients,
   no left-border bars. Pastels mark, tint and label — never carry body text.
   ========================================================================== */

/* 1 · TOKENS ------------------------------------------------------------ */
:root{
  --bg:#FFFFFF; --panel:#F6F6F8; --panel-2:#EFEFF3; --line:#E4E4EA;
  --ink:#1B1B21; --ink-2:#5A5A66; --ink-3:#7A7A86;
  --rose-bg:#F9DCE3;     --rose-ink:#A03D5F;
  --peach-bg:#FCE4D4;    --peach-ink:#A85A26;
  --lemon-bg:#F9EFC7;    --lemon-ink:#8A6D1B;
  --mint-bg:#D8F0DF;     --mint-ink:#23754B;
  --sky-bg:#D9E9F9;      --sky-ink:#2A6099;
  --lavender-bg:#E6E0F7; --lavender-ink:#64509F;

  --font-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --font-mono:"Spline Sans Mono","SF Mono",Consolas,monospace;

  --radius:14px; --radius-sm:10px;
  --wrap:1200px; --gutter:24px; --measure:46rem;

  --logo-filter:brightness(0); --logo-opacity:.72; --doodle:.1;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#131318; --panel:#1B1B22; --panel-2:#23232C; --line:#2D2D38;
  --ink:#ECECF2; --ink-2:#A7A7B5; --ink-3:#8A8A97;
  --rose-bg:#3B2530;     --rose-ink:#F2A9C1;
  --peach-bg:#39281B;    --peach-ink:#F0B48A;
  --lemon-bg:#342E19;    --lemon-ink:#E3C86F;
  --mint-bg:#1D3226;     --mint-ink:#8FDCAF;
  --sky-bg:#1D2A3B;      --sky-ink:#8FC0EE;
  --lavender-bg:#29223E; --lavender-ink:#C2B0F0;
  --logo-filter:brightness(0) invert(1); --logo-opacity:.8; --doodle:.085;
  color-scheme:dark;
}

/* 2 · BASE -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .3s, color .3s}
img{max-width:100%; display:block}
a{color:inherit}
p{margin:0}
::selection{background:var(--lavender-bg); color:var(--ink)}
:focus-visible{outline:2px solid var(--sky-ink); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.015em; text-wrap:balance}
h1{font-weight:800}
h2{font-weight:700; font-size:clamp(30px,3.4vw,42px); line-height:1.15; max-width:18ch}
h3{font-weight:700; font-size:20px; line-height:1.3}
h1 em, h2 em{font-style:normal; color:inherit; background:var(--mint-bg); border-radius:6px; padding:0 .12em; -webkit-box-decoration-break:clone; box-decoration-break:clone}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
section{padding:112px 0; position:relative}
section + section{border-top:1px solid var(--line)}
.lead{font-size:clamp(17px,1.4vw,19px); color:var(--ink-2); max-width:60ch}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 22px}
.eyebrow::before{content:""; width:12px; height:12px; border-radius:3px; background:var(--rose-ink); flex:none}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:64px}
.section-head .lead{justify-self:end}

/* buttons — the press dip is the base interaction */
.btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:14px 22px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel); color:var(--ink); font:600 .95rem/1 var(--font-body); text-decoration:none; cursor:pointer; transition:transform .12s ease, background-color .2s, border-color .2s}
.btn:hover{background:var(--panel-2)}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-2); border-color:var(--ink-2)}
.btn svg{width:16px; height:16px; transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.link-arrow{color:var(--sky-ink); text-decoration:none; font-weight:600; font-size:15px; display:inline-flex; gap:6px; align-items:center}
.link-arrow:hover{text-decoration:underline; text-underline-offset:4px}

/* prototype-only helpers (hidden in production) */
.note{display:none}
.flag::after{content:none}

/* 3 · PAGE LAYER -------------------------------------------------------- */

/* nav */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px}
.brand{font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.nav ul{list-style:none; margin:0; padding:0; display:flex; gap:30px}
.nav ul a{position:relative; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; color:var(--ink-2); text-decoration:none}
.nav ul a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out)}
.nav ul a:hover, .nav ul a[aria-current]{color:var(--ink)}
.nav ul a:hover::after, .nav ul a[aria-current]::after{transform:scaleX(1)}
.nav-end{display:flex; align-items:center; gap:10px}
.nav .btn{padding:11px 18px; font-size:.88rem; white-space:nowrap}
.lang{font-family:var(--font-mono); font-size:.76rem; font-weight:600; letter-spacing:.06em; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:9px 11px; line-height:1}
.lang:hover{color:var(--ink); border-color:var(--ink-2)}
.lang .fl{font-size:.95rem; margin-right:5px; vertical-align:-1px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mode-btn{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; padding:0; transition:transform .12s ease, background-color .2s}
.mode-btn:hover{background:var(--panel-2)}
.mode-btn:active{transform:translateY(2px)}
.mode-btn svg{width:16px; height:16px}
.mode-btn .sun{display:none}
[data-theme="dark"] .mode-btn .sun{display:block}
[data-theme="dark"] .mode-btn .moon{display:none}

/* hero */
.hero{padding:88px 0 96px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center}
.hero .wrap > *{min-width:0}
.hero h1{font-size:clamp(40px,5.2vw,64px); line-height:1.08; margin-bottom:30px}
.hero h1.title{font-size:clamp(52px,7.2vw,104px); line-height:.98; margin-bottom:24px}
.hero .sub{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.3vw,30px); line-height:1.25; letter-spacing:-.01em; margin:0 0 16px; max-width:24ch}
.hero .lead{margin-bottom:32px; max-width:44ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px}
.hero-proof{display:flex; flex-wrap:wrap; gap:10px 28px; color:var(--ink-3); font-family:var(--font-mono); font-size:.78rem}
.hero-proof b{color:var(--ink); font-weight:600}
.stars{color:var(--lemon-ink); letter-spacing:2px}
.hero-figure{margin:0}
.hero-figure .ph{aspect-ratio:4/5}
.hero-figure img{object-position:56% 30%}
.hero-figure.portrait img{object-position:50% 25%}
.hero-figure figcaption{margin-top:.65rem; text-align:center; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-3)}

/* logo wall */
.logos{padding:96px 0}
.logos-head{margin-bottom:32px}
.logos-head h2{font-size:clamp(28px,3vw,38px); max-width:none}
.logo-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem}
.logo-tile{position:relative; min-height:104px; display:grid; place-items:center; padding:18px 14px; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg)}
.logo-tile img, .logo-row li img{filter:var(--logo-filter); opacity:var(--logo-opacity); width:auto; max-width:140px}
.txt{color:var(--ink); opacity:var(--logo-opacity); line-height:1; white-space:nowrap}
.lk{display:flex; align-items:center; gap:6px}
.stackl{display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-3)}

/* cases — text left, one photo right */
.cases2{display:grid; gap:20px}
.case2{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; padding:44px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg)}
.case2 .kicker{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .8rem; margin:0 0 14px; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-3)}
.case2 .kicker b{font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--ink); letter-spacing:-.01em}
.case2 h3{font-weight:800; font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-.015em; margin:0 0 22px}
.case2 .nums{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px}
.case2 .nums div{background:var(--panel); border-radius:var(--radius); padding:14px 18px; min-width:170px}
.case2 .nums b{display:block; font-family:var(--font-display); font-weight:800; font-size:2.1rem; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.case2 .nums span{font-size:.92rem; color:var(--ink-2)}
.case2 p.lede2{color:var(--ink-2); margin:0 0 22px; max-width:46ch}
.case2 .more{font-weight:600; font-size:.95rem; color:var(--sky-ink); text-decoration:none}
.case2 .more:hover{text-decoration:underline; text-underline-offset:4px}
.case2 figure{margin:0}
.case2 .ph{aspect-ratio:4/5}
.case2 figcaption{text-align:center; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-3); margin-top:.6rem}
.case2 figcaption a{color:var(--ink-3)}

/* quote (inside a case) */
.quote{margin:0 0 18px; background:var(--panel); border-radius:var(--radius); padding:1.3rem 1.4rem 1.15rem}
.quote p{font-style:italic; font-weight:500; font-size:1.06rem; line-height:1.65}
.quote footer{display:flex; align-items:center; gap:12px; margin-top:12px; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-3)}
.quote footer a{color:var(--ink-2)}

/* quote cards */
.q-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.qbox{margin:0; padding:28px; border-radius:var(--radius); background:var(--panel); display:flex; flex-direction:column; gap:20px}
.qbox .co{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.qbox .co .wm{font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink)}
.qbox .co small{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-3); text-align:right}
.qbox blockquote{margin:0; flex:1; font-style:italic; font-weight:500; font-size:1.06rem; line-height:1.65}
.person{display:flex; align-items:center; gap:12px}
.person b{display:block; font-size:15px; font-weight:600}
.person span{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-3)}
.person a, .person .badge{margin-left:auto; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-3); text-decoration:none; border:1px solid var(--line); padding:5px 10px; border-radius:999px; white-space:nowrap}
.person a:hover{color:var(--ink); border-color:var(--ink-2)}
.avatar{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; object-fit:cover; background:var(--lavender-bg); color:var(--lavender-ink); font-family:var(--font-mono); font-weight:600; font-size:14px}
.quote footer .avatar{width:40px; height:40px}

/* kinds — small illustration per field */
.kinds{display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px}
.kind .ill{aspect-ratio:5/3; border-radius:var(--radius); display:grid; place-items:center; margin-bottom:14px; overflow:hidden}
.kind .ill svg{width:82%; height:auto; display:block}
.kind h3{font-size:1.12rem; margin:0 0 2px}
.kind p{margin:0; font-size:.95rem; color:var(--ink-2)}
.ill.peach{background:var(--peach-bg)} .ill.sky{background:var(--sky-bg)} .ill.rose{background:var(--rose-bg)}
.ill.lavender{background:var(--lavender-bg)} .ill.lemon{background:var(--lemon-bg)} .ill.mint{background:var(--mint-bg)}
.ill svg .s{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.ill svg .paper{fill:var(--bg)}
.ill svg .ink{fill:var(--ink)}
.ill svg text{font-family:var(--font-display); font-weight:800; stroke:none}

/* speaking & mentoring */
.speaking{padding:100px 0}
.speak-top{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; margin-bottom:48px}
.speak-top h2{font-size:clamp(28px,3vw,38px)}
.speak-top .lead{margin-top:18px; font-size:17px}
.speak-top .link-arrow{margin-top:22px}
.strip{display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:240px; gap:14px}
.strip .ph{height:100%; min-width:0}
.strip .ph:last-child img{object-position:50% 20%}
.logo-rows{display:grid; gap:14px}
.logo-row{display:grid; grid-template-columns:170px 1fr; align-items:stretch; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg)}
.logo-row > span{display:flex; align-items:center; padding:0 24px; font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border-right:1px solid var(--line); background:var(--panel)}
.logo-row ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr)}
.logo-row.three ul{grid-template-columns:repeat(3,1fr)}
.logo-row li{min-height:84px; display:grid; place-items:center; text-align:center; padding:14px 12px}
.logo-row li + li{border-left:1px solid var(--line)}

/* faq */
.faq-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px}
.faq-wrap > *{min-width:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:26px 48px 26px 0; font-size:1.1rem; font-weight:600; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:28px; font-weight:300; color:var(--sky-ink); transition:transform .3s var(--ease-spring)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 48px 28px 0; color:var(--ink-2)}

/* contact */
.contact{padding:120px 0 130px}
.contact h2{font-size:clamp(42px,5.4vw,76px); max-width:13ch; margin-bottom:56px}
.help-list{list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.help-list li{padding:28px 28px 0 0}
.help-list li + li{padding-left:28px; border-left:1px solid var(--line)}
.help-list .n{display:block; margin-bottom:14px; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; color:var(--mint-ink)}
.help-list h3{font-size:1.7rem; line-height:1.1; margin-bottom:10px}
.help-list p{color:var(--ink-2); font-size:15.5px}
.help-list a{color:var(--ink)}
.mail-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:36px 40px; border-radius:var(--radius); background:var(--mint-bg); color:var(--ink)}
.mail-cta p{font-size:18px; font-weight:500; max-width:40ch}
.mail-cta a.mail{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,52px); line-height:1; color:var(--ink); text-decoration:none; letter-spacing:-.015em}
.mail-cta a.mail:hover{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}

/* photo frame: border + radius live on the frame */
.ph{position:relative; display:block; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); isolation:isolate}
.ph img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}

/* contact line with an envelope */
.mail-cta .mail-lead{display:flex; align-items:center; gap:12px; font-size:20px; font-weight:600}
.fi.paper{background:var(--bg)}

/* homepage: path cards + roles */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.path{display:flex; flex-direction:column; gap:12px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); text-decoration:none; color:var(--ink)}
.path .ill{aspect-ratio:5/3; border-radius:var(--radius); display:grid; place-items:center; margin-bottom:6px}
.path .ill svg{width:70%; height:auto}
.path .tag{font-family:var(--font-mono); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}
.path h3{font-size:1.6rem; line-height:1.15; margin:0}
.path p{margin:0; color:var(--ink-2); font-size:.98rem}
.path .go{margin-top:auto; padding-top:6px; font-weight:600; font-size:.95rem; color:var(--sky-ink)}
.path.soon{background:var(--panel); border-color:transparent; color:var(--ink-3)}
.path.soon h3, .path.soon .go{color:var(--ink-3)}
.path.soon .go{font-weight:500}
.roles2{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line)}
.roles2 > div{padding:24px 22px 4px 0}
.roles2 > div + div{padding-left:22px; border-left:1px solid var(--line)}
.roles2 .tag{display:block; margin-bottom:10px; font-family:var(--font-mono); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}
.roles2 b{display:block; font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.3; margin-bottom:6px}
.roles2 p{margin:0; font-size:.92rem; color:var(--ink-2)}

/* footer */
.footer{border-top:1px solid var(--line); padding:36px 0 48px; color:var(--ink-3); font-family:var(--font-mono); font-size:.76rem}
.footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.footer nav{display:flex; gap:22px; flex-wrap:wrap}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink)}

/* homepage: facts with small icons */
.facts{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 26px}
.facts li{display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--ink-2)}
.facts b{color:var(--ink); font-weight:700}
.fi{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none}
.fi svg{width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fi.sky{background:var(--sky-bg)} .fi.mint{background:var(--mint-bg)} .fi.peach{background:var(--peach-bg)}
.paths.duo{grid-template-columns:1.35fr 1fr}
.paths.duo .ill{aspect-ratio:auto; height:190px}
.paths.duo .ill svg{height:150px; width:auto}

/* under the logo wall: total + live Clutch rating */
.logos-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.logos-foot p{font-size:1.05rem; color:var(--ink-2)}
.logos-foot p b{font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--ink); margin-right:4px; font-variant-numeric:tabular-nums}
.clutch{width:260px; max-width:100%; min-height:45px}
.clutch-frame{display:block; width:100%; height:45px; border:0; overflow:hidden; color-scheme:normal}

/* how I can help: four roles with small looping icons */
.roles3{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.role{padding:26px 24px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg)}
.role h3{font-size:1.25rem; margin:16px 0 6px}
.role h3 small{font-family:var(--font-mono); font-weight:500; font-size:.72rem; color:var(--ink-3); letter-spacing:0}
.role p{margin:0; font-size:.95rem; color:var(--ink-2)}
.role p a{color:var(--sky-ink); text-decoration:none}
.role p a:hover{text-decoration:underline}
.ri{width:56px; height:56px; border-radius:var(--radius); display:grid; place-items:center}
.ri svg{width:40px; height:40px; overflow:visible}
.ri .s{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.ri .paper{fill:var(--bg)} .ri .ink{fill:var(--ink)}
.ri.sky{background:var(--sky-bg)} .ri.mint{background:var(--mint-bg)} .ri.peach{background:var(--peach-bg)} .ri.lavender{background:var(--lavender-bg)}

/* edtech: education doodles behind the hero. Two sparse tiles of different
   sizes, so the pattern doesn't visibly repeat. */
.hero.edu{isolation:isolate}
.hero.edu::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--ink); opacity:var(--doodle);
  -webkit-mask:url(/assets/img/edu-doodles-a.svg) 0 0/1100px 1100px repeat, url(/assets/img/edu-doodles-b.svg) 380px 560px/760px 760px repeat;
  mask:url(/assets/img/edu-doodles-a.svg) 0 0/1100px 1100px repeat, url(/assets/img/edu-doodles-b.svg) 380px 560px/760px 760px repeat}
.fi.lemon{background:var(--lemon-bg)} .fi.lavender{background:var(--lavender-bg)}

/* case card: years on top + chapter tabs */
.case2 .yrs{display:inline-block; margin:0 0 14px; padding:5px 11px; border-radius:999px; background:var(--panel); font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--ink-2)}
.tabs{margin:0 0 22px}
.tab-list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.tab-list button{font:600 .8rem/1 var(--font-mono); letter-spacing:.02em; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:999px; padding:9px 12px; min-height:36px; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s, transform .12s}
.tab-list button:hover{border-color:var(--ink-3); color:var(--ink)}
.tab-list button:active{transform:translateY(2px)}
.tab-list button[aria-selected="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tab-panel{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; background:var(--panel); border-radius:var(--radius); padding:16px 18px; min-height:106px}
.tab-panel + .tab-panel{margin-top:8px}
.tabs.ready .tab-panel + .tab-panel{margin-top:0}
.tab-panel[hidden]{display:none}
.tab-panel > b{font-family:var(--font-display); font-weight:800; font-size:2.3rem; line-height:1; letter-spacing:-.02em; min-width:3.2ch; color:var(--sky-ink)}
.tab-panel > b.word{font-size:2.1rem}
.tab-panel h4{font-family:var(--font-display); font-size:1.08rem; margin:0 0 2px}
.tab-panel p{font-size:.95rem; color:var(--ink-2); line-height:1.55}

/* compact quote cards (five in a row) */
.q-grid.mini{grid-template-columns:repeat(5,1fr); gap:16px; align-items:start}
.q-grid.mini .qbox{padding:18px 18px 16px; gap:14px}
.q-grid.mini blockquote{font-size:.93rem; line-height:1.55}
.q-grid.mini .person{gap:10px}
.q-grid.mini .avatar{width:34px; height:34px; font-size:12px}
.q-grid.mini .person b{font-size:13.5px; line-height:1.3}
.q-grid.mini .person span{font-size:.68rem; display:block; line-height:1.35}
.qbox .src{align-self:flex-start; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-3); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:4px 9px}
.qbox .src:hover{color:var(--ink); border-color:var(--ink-2)}

/* every kind of edtech: big headline, small drawing, company tags */
.kinds2{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.kind2{display:flex; align-items:center; gap:18px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg)}
.kind2 .ill{flex:none; width:104px; aspect-ratio:5/3; border-radius:12px; display:grid; place-items:center; overflow:hidden}
.kind2 .ill svg{width:86%; height:auto}
.kind2 h3{font-size:1.32rem; font-weight:800; line-height:1.15; margin:0 0 8px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags span{font-family:var(--font-mono); font-size:.7rem; font-weight:500; color:var(--ink-2); background:var(--panel); border-radius:999px; padding:4px 9px}

/* 4 · MOTION ------------------------------------------------------------
   Soft and tactile, like paper on a desk: things lift (≤6px), straighten or
   tilt (≤1.5°) and settle with a gentle spring. A lifted card shows a flat
   pastel "underlay" (hard offset, never a blur). prefers-reduced-motion
   switches all of it off.                                                 */

/* cards on the table: quotes rest at small angles and straighten on hover */
.q-grid .qbox{--tilt:0deg; --under:var(--panel-2); position:relative; transform:rotate(var(--tilt)); box-shadow:0 0 0 0 var(--under); transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring)}
.q-grid .qbox:nth-child(6n+1){--tilt:-1.2deg; --under:var(--sky-bg)}
.q-grid .qbox:nth-child(6n+2){--tilt:.9deg;   --under:var(--mint-bg)}
.q-grid .qbox:nth-child(6n+3){--tilt:-.5deg;  --under:var(--rose-bg)}
.q-grid .qbox:nth-child(6n+4){--tilt:1.1deg;  --under:var(--lemon-bg)}
.q-grid .qbox:nth-child(6n+5){--tilt:-.9deg;  --under:var(--lavender-bg)}
.q-grid .qbox:nth-child(6n+6){--tilt:.6deg;   --under:var(--peach-bg)}
.q-grid .qbox:hover, .q-grid .qbox:focus-within{transform:rotate(0deg) translateY(-6px); box-shadow:8px 10px 0 0 var(--under); z-index:2}
.q-grid .qbox .avatar{transition:transform .5s var(--ease-spring)}
.q-grid .qbox:hover .avatar{transform:rotate(-8deg) scale(1.06)}

/* lifting cards */
a.path, .case2{transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), border-color .2s, background-color .2s}
a.path:hover{transform:translateY(-5px); border-color:var(--ink-3); box-shadow:7px 9px 0 0 var(--panel-2)}
a.path:active{transform:translateY(-2px)}
a.path .go{display:inline-block; transition:transform .3s var(--ease-out)}
a.path:hover .go{transform:translateX(5px)}
.path .ill svg, .kind .ill, .kind .ill svg{transition:transform .5s var(--ease-spring)}
a.path:hover .ill svg{transform:translateY(-4px) rotate(-2deg)}
.case2:hover{border-color:var(--ink-3)}

/* illustrations come alive a little */
.kind:hover .ill{transform:translateY(-4px) rotate(-1deg)}
.ill .mv{transform-box:fill-box; transform-origin:center; transition:transform .55s var(--ease-spring)}
.kind:hover .ill .mv, a.path:hover .ill .mv{transform:translateY(-5px) rotate(-10deg)}

/* logos wake up: the tile fills with a pastel, the logo goes to full ink */
.logo-tile, .logo-row li{--hl:var(--sky-bg); transition:background-color .3s, border-color .3s}
.logo-tile:nth-child(6n+2), .logo-row li:nth-child(6n+2){--hl:var(--mint-bg)}
.logo-tile:nth-child(6n+3), .logo-row li:nth-child(6n+3){--hl:var(--rose-bg)}
.logo-tile:nth-child(6n+4), .logo-row li:nth-child(6n+4){--hl:var(--lemon-bg)}
.logo-tile:nth-child(6n+5), .logo-row li:nth-child(6n+5){--hl:var(--lavender-bg)}
.logo-tile:nth-child(6n+6), .logo-row li:nth-child(6n+6){--hl:var(--peach-bg)}
.logo-tile:hover, .logo-row li:hover{background:var(--hl); border-color:transparent}
.logo-tile img, .logo-row li img, .logo-tile .txt{transition:opacity .25s}
.logo-tile:hover img, .logo-tile:hover .txt, .logo-row li:hover img{opacity:1}

/* role icons: quiet loops (paused when motion is reduced) */
.ri .needle{transform-box:view-box; transform-origin:24px 24px; animation:seek 2.8s ease-in-out infinite}
.ri .gear{transform-box:view-box; transform-origin:24px 24px; animation:spin 9s linear infinite}
.ri .leaf-l{transform-box:view-box; transform-origin:24px 28px; animation:sway 1.7s ease-in-out infinite}
.ri .leaf-r{transform-box:view-box; transform-origin:24px 24px; animation:sway 1.7s ease-in-out infinite reverse}
.ri .wave{transform-box:fill-box; transform-origin:left center; animation:wave 1.3s ease-out infinite}
.ri .w2{animation-delay:.22s}
@keyframes seek{0%{transform:rotate(0)} 12%{transform:rotate(-40deg)} 27%{transform:rotate(32deg)} 41%{transform:rotate(-20deg)} 54%{transform:rotate(11deg)} 65%{transform:rotate(-5deg)} 74%,100%{transform:rotate(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sway{0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)}}
@keyframes wave{0%{opacity:0; transform:translateX(-4px) scale(.85)} 35%{opacity:1} 100%{opacity:0; transform:translateX(3px) scale(1.05)}}
.role{transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), border-color .2s}
.role:hover{transform:translateY(-4px); border-color:var(--ink-3); box-shadow:6px 8px 0 0 var(--panel-2)}
.role:hover .gear{animation-duration:3s}
.mail-cta .fi{transition:transform .4s var(--ease-spring)}
.mail-cta:hover .fi{transform:rotate(-8deg) translateY(-2px)}
.facts .fi{transition:transform .4s var(--ease-spring)}
.facts li:hover .fi{transform:rotate(-8deg) translateY(-2px)}

/* story cards lift with their own pastel underlay */
.case2{transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring), border-color .2s}
.case2.lift-sky:hover{transform:translateY(-4px); box-shadow:10px 12px 0 0 var(--sky-bg)}
.case2.lift-peach:hover{transform:translateY(-4px); box-shadow:10px 12px 0 0 var(--peach-bg)}
.tab-panel:not([hidden]){animation:panel-in .35s var(--ease-out)}
@keyframes panel-in{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.q-grid.mini .qbox:hover, .q-grid.mini .qbox:focus-within{transform:rotate(0deg) translateY(-5px); box-shadow:6px 8px 0 0 var(--under)}
.kind2{transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), border-color .2s}
.kind2:hover{transform:translateY(-3px); border-color:var(--ink-3); box-shadow:6px 7px 0 0 var(--panel-2)}
.kind2 .ill svg{transition:transform .5s var(--ease-spring)}
.kind2:hover .ill svg{transform:rotate(-3deg) scale(1.04)}
.kind2:hover .ill .mv{transform:translateY(-5px) rotate(-10deg)}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  .q-grid .qbox{transform:none !important}
}

/* 5 · RESPONSIVE -------------------------------------------------------- */
@media (max-width:1080px){
  .nav ul{display:none}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .case2{grid-template-columns:1fr; gap:28px; padding:30px}
  .case2 .ph{aspect-ratio:3/2}
  .q-grid{grid-template-columns:1fr 1fr}
  .q-grid.mini{grid-template-columns:repeat(3,1fr)}
  .kinds{grid-template-columns:repeat(2,1fr)}
  .kinds2{grid-template-columns:1fr 1fr}
  .speak-top{grid-template-columns:1fr; gap:32px}
  .logo-row ul{grid-template-columns:repeat(3,1fr)}
  .logo-row li:nth-child(4){border-left:0}
  .logo-row li:nth-child(n+4){border-top:1px solid var(--line)}
  .paths, .paths.duo{grid-template-columns:1fr 1fr}
  .roles3{grid-template-columns:1fr 1fr}
  .roles2{grid-template-columns:1fr 1fr 1fr}
  .roles2 > div:nth-child(4){padding-left:0; border-left:0}
}
@media (max-width:820px){
  :root{--gutter:16px}
  body{font-size:16px}
  section{padding:80px 0}
  .hero{padding:44px 0 64px}
  .hero .wrap{grid-template-columns:1fr; gap:40px}
  .hero h1.title{font-size:clamp(44px,12vw,64px)}
  .hero-figure .ph{aspect-ratio:4/3}
  .section-head{grid-template-columns:1fr; gap:20px; margin-bottom:40px}
  .section-head .lead{justify-self:start}
  .logos{padding:72px 0}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .logo-tile{min-height:84px}
  .case2{padding:22px}
  .case2 .nums div{min-width:0; flex:1}
  .q-grid{grid-template-columns:1fr; gap:20px}
  .q-grid.mini{grid-template-columns:1fr 1fr; gap:12px}
  .kinds2{grid-template-columns:1fr}
  .kind2 .ill{width:88px}
  .tab-panel{grid-template-columns:1fr; gap:6px}
  .qbox{padding:24px}
  .kinds{gap:18px 14px}
  .speaking{padding:72px 0}
  .strip{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .strip .ph{aspect-ratio:4/3; height:auto}
  .strip .ph:first-child{grid-column:1 / -1; aspect-ratio:16/9}
  .logo-row{grid-template-columns:1fr}
  .logo-row > span{padding:12px 18px; border-right:0; border-bottom:1px solid var(--line)}
  .logo-row ul, .logo-row.three ul{grid-template-columns:repeat(2,1fr)}
  .logo-row li{min-height:72px}
  .logo-row li:nth-child(odd){border-left:0}
  .logo-row li:nth-child(n+3){border-top:1px solid var(--line)}
  .logo-row li:nth-child(4){border-left:1px solid var(--line)}
  .faq-wrap{grid-template-columns:1fr; gap:32px}
  .faq summary{font-size:1rem}
  .contact{padding:80px 0 90px}
  .contact h2{margin-bottom:36px}
  .help-list{grid-template-columns:1fr; margin-bottom:40px}
  .help-list li, .help-list li + li{padding:24px 0; border-left:0}
  .help-list li + li{border-top:1px solid var(--line)}
  .mail-cta{padding:26px 22px}
  .paths, .paths.duo{grid-template-columns:1fr}
  .roles3{grid-template-columns:1fr; gap:14px}
  .logos-foot{flex-direction:column; align-items:flex-start}
  .roles2{grid-template-columns:1fr}
  .roles2 > div, .roles2 > div + div{padding:18px 0 4px; border-left:0; border-top:1px solid var(--line)}
  .roles2 > div:first-child{border-top:0}
  .brand{font-size:1rem}
}
@media (max-width:520px){
  .nav-end .btn{display:none}
  .q-grid.mini{grid-template-columns:1fr}
}