/* Founder story: a comfortably centred editorial composition inside the
   site's existing full-viewport scrolling scene. Keep the canvas immersive,
   not the *content* artificially full-height. */
html body main.page > #story.story-with-founder {
  display:flex!important;
  align-items:safe center!important;
  /* Use safe centring: narrow/short screens scroll from the beginning. */
  justify-content:safe center!important;
  padding:clamp(30px,5vh,60px) clamp(28px,6vw,96px)!important;
}
html body main.page > #story .story-shell {
  box-sizing:border-box!important;
  /* This parent is a COLUMN flex container: a width-sized flex-basis would
     become an artificial HEIGHT and leave the story pinned at the top. */
  flex:0 0 auto!important;
  width:min(1100px,100%)!important;
  max-width:1100px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
}
html body main.page > #story .story-editorial {
  display:grid!important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  gap:clamp(32px,4.4vw,66px)!important;
  min-height:0!important;
  align-items:center!important;
  min-width:0!important;
}
html body main.page > #story .story-narrative {
  display:block!important;
  min-width:0!important;
}
html body main.page > #story .story-narrative #story-heading {
  max-width:18ch!important;
  font-size:clamp(38px,3.7vw,52px)!important;
  margin-bottom:clamp(22px,2.8vw,32px)!important;
}
html body main.page > #story .story-narrative > p {
  margin-bottom:clamp(17px,2vw,24px)!important;
}
html body main.page > #story .story-narrative > .story-purpose {
  margin-top:clamp(24px,2.8vw,34px)!important;
  margin-bottom:0!important;
}
html body main.page > #story #founder.story-founder {
  box-sizing:border-box!important;
  display:block!important;
  align-self:center!important;
  min-width:0!important;
  width:100%!important;
  height:auto!important;
  padding:clamp(26px,3vw,40px)!important;
}
html body main.page > #story .story-founder-intro {
  display:flex!important;
  align-items:center!important;
  gap:clamp(14px,1.8vw,22px)!important;
}
html body main.page > #story .story-founder-identity {
  flex:1 1 auto;
  min-width:0!important;
}
/* A single readable column when two columns become cramped. The scene itself
   remains scrollable, so text and the contact button are never cropped. */
@media(max-width:1050px) {
  html body main.page > #story.story-with-founder {
    padding:clamp(28px,4vh,46px) clamp(22px,5vw,56px)!important;
  }
  html body main.page > #story .story-shell {
    flex-basis:700px!important;
    max-width:700px!important;
  }
  html body main.page > #story .story-editorial {
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(26px,3vw,36px)!important;
  }
  html body main.page > #story .story-narrative #story-heading {
    font-size:clamp(36px,5vw,46px)!important;
  }
}
@media(max-width:600px) {
  html body main.page > #story.story-with-founder {
    padding:26px 16px!important;
  }
  html body main.page > #story .story-narrative #story-heading {
    font-size:clamp(30px,7.6vw,39px)!important;
    margin-bottom:22px!important;
  }
  html body main.page > #story .story-narrative > p {
    margin-bottom:18px!important;
  }
  html body main.page > #story .story-narrative > .story-purpose {
    margin-top:26px!important;
  }
  html body main.page > #story #founder.story-founder {
    padding:clamp(20px,5vw,28px)!important;
  }
  html body main.page > #story .story-founder-intro {
    gap:12px!important;
  }
  html body main.page > #story .story-founder-intro h3 {
    font-size:clamp(20px,5vw,25px)!important;
  }
}
/* Prefer natural overflow to miniature text or artificial stretching on short
   laptop screens. The scrollytelling section handles its own vertical scroll. */