.founder-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,min(576px,50%));gap:clamp(28px,5vw,80px);align-items:center;padding-top:clamp(36px,4.2vw,56px);padding-bottom:clamp(12px,1.5vw,20px)}
.founder-hero .lede{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.3vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--ink-2);max-width:26ch;padding-left:18px;border-left:3px solid var(--leaf)}
.photo{position:relative;aspect-ratio:16/10;width:100%;border-radius:20px;overflow:hidden;background:radial-gradient(120% 90% at 30% 15%,var(--leaf-soft),var(--surface) 65%);background-clip:padding-box;border:2px solid color-mix(in srgb,var(--leaf) 60%,transparent);--photo-glow:0 0 0 1px color-mix(in srgb,var(--leaf) 25%,transparent),0 10px 34px -6px color-mix(in srgb,var(--leaf) 45%,transparent);box-shadow:var(--photo-glow)}
.photo picture{display:block;width:100%;height:100%}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .photo{animation:photo-in 400ms ease-out both}
  @keyframes photo-in{
    from{opacity:0;transform:translateY(12px);box-shadow:0 0 0 1px transparent,0 10px 34px -6px transparent}
    60%{border-color:color-mix(in srgb,var(--leaf) 85%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--leaf) 40%,transparent),0 12px 46px -4px color-mix(in srgb,var(--leaf) 75%,transparent)}
    to{opacity:1;transform:none;border-color:color-mix(in srgb,var(--leaf) 60%,transparent);box-shadow:var(--photo-glow)}
  }
}
.letter-sec{padding-top:clamp(20px,2.5vw,36px)}
.letter{display:grid;grid-template-columns:minmax(0,66ch) minmax(260px,1fr);column-gap:clamp(40px,6vw,104px);align-items:start}
.letter>*{grid-column:1}
.letter>p{margin:0 0 20px;font-size:18px;line-height:1.75;color:var(--ink-2)}
.letter>p:first-child{font-family:var(--display);font-weight:700;font-size:clamp(22px,2vw,26px);line-height:1.3;color:var(--ink);margin-bottom:22px}
.pull{grid-column:2;grid-row:1/span 7;align-self:start;position:sticky;top:32px;margin:6px 0 0;padding:30px 30px 28px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--leaf) 26%,var(--line));border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.22);font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.22;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.pull::before{content:"\201C";display:block;font-size:84px;line-height:.7;height:44px;color:var(--leaf)}
.signature{display:flex;align-items:center;gap:16px;margin-top:10px;padding-top:22px;border-top:1px solid var(--line);max-width:66ch}
.signature img{width:72px;height:72px;flex:none}
.signature b{display:block;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink)}
.signature span{font:500 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.exp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.exp{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--tile);border-radius:var(--radius);padding:22px}
.exp p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.exp a{font-weight:600}
.li-line{display:flex;align-items:center;gap:12px;margin:18px 0 0;font-size:16px;color:var(--ink-2)}
.li-line .ic{color:var(--sea)}
@media (hover:hover) and (pointer:fine){
  .exp:hover{border-color:color-mix(in srgb,var(--tile) 45%,var(--line));border-top-color:var(--tile)}
}
@media (max-width:1000px){
  .letter{grid-template-columns:minmax(0,1fr)}
  .pull{grid-column:1;grid-row:auto;position:static;margin:8px 0 28px;max-width:34ch}
  .exp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .exp-grid>li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .founder-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}
  .exp-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .letter>p{font-size:17px;line-height:1.7}
  .pull{padding:22px 20px 20px;font-size:23px}
  .pull::before{font-size:64px;height:34px}
  .exp{padding:18px}
  .li-line{align-items:flex-start}
}
.exp{--pop-c:var(--tile)}
@media (prefers-reduced-motion:no-preference){
  .exp{transition:var(--calm-tr)}
  @media (hover:hover) and (pointer:fine){
    .exp:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--pop-c) 22%,transparent),0 12px 28px -18px color-mix(in srgb,var(--pop-c) 70%,transparent);transition:var(--calm-tr)}
    .exp:hover .icon-tile{transform:var(--bounce);transition:transform 260ms var(--pop-ease)}
  }
  .exp:has(:focus-visible){box-shadow:0 0 0 1px color-mix(in srgb,var(--pop-c) 22%,transparent),0 12px 28px -18px color-mix(in srgb,var(--pop-c) 70%,transparent)}
  .exp:has(:focus-visible) .icon-tile{transform:var(--bounce);transition:transform 260ms var(--pop-ease)}
}