/* ==========================================================================
   Our Story — founder panel and team grid
   Lifted out of our-story.html. Loads after home.css and mobile.css, which is where
   it sat inline, so the cascade is unchanged.
   ========================================================================== */

.story-hero{ background:var(--tint); min-height:72vh; display:flex; align-items:center; padding:120px 0 130px; }
  .story-hero .label--pill{ background:var(--white); }
  .story-hero .wrap{ max-width:1040px; }
  .story-hero h1{ font-size:calc(clamp(48px,6.5vw,88px) * var(--type-scale)); line-height:1.02; }
  .story-hero p{ margin-top:26px; max-width:680px; font-size:20px; line-height:1.7; color:var(--ink-soft); }
  /* keep the founder section flush at the top of this page */
  #story.fndr{ padding-top:var(--section-y); }
  /* team grid (from ortoncare.css experts pattern) */
  .oexperts__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:0 auto; }
  .oexpert{ background:var(--white); border-radius:var(--r-card); overflow:hidden; box-shadow:0 10px 30px rgba(13,43,107,.06); }
  .oexpert__photo{ height:270px; background:#fff; overflow:hidden; padding:8px 8px 0; box-sizing:border-box; display:flex; align-items:flex-end; justify-content:center; }
  .oexpert__photo image-slot{ display:block; width:100%; height:100%; filter:grayscale(1); }
  .oexpert__body{ padding:18px 18px 24px; text-align:center; display:flex; flex-direction:column; gap:6px; }
  .oexpert__body h3{ margin:0; }
  .oexpert__role{ margin:0; opacity:1 !important; }
  .oexpert{ overflow:visible; }
  .oexpert__photo{ border-radius:var(--r-card) var(--r-card) 0 0; }
  .oexpert h3{ font-size:20px; }
  .oexpert__role{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-soft); }
  @media (max-width:1020px){ .oexperts__grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .oexperts__grid{ grid-template-columns:1fr; } }
  /* story quote — distinct editorial style on this page */
  #story .fndr__quote{
    background:var(--tint); color:var(--ink-soft); position:relative;
  }
  #story .fndr__quote::before{
    content:"\201C"; position:absolute; top:26px; left:72px;
    font-family:var(--font-display); font-size:120px; line-height:1;
    color:var(--accent); opacity:.25;
  }
  #story .fndr__quote h2{ color:var(--accent); position:relative; }
  #story .fndr__cont{ color:var(--ink); font-size:17px; border-left:3px solid var(--accent); padding-left:20px; }
  #story .fndr__attr{ color:var(--ink-soft); }
  #story .fndr__btn{ background:var(--accent); color:var(--white); }
  #story .fndr__btn:hover{ background:var(--accent-dark); color:var(--white); }
  /* story photo panel — clean card style, no peach offset */
  #story .fndr__photo-panel{ background:transparent; padding:64px 0 64px 64px; align-self:center; }
  #story .fndr__photo{ transform:none; margin:0; height:auto; overflow:visible; }
  #story .fndr__photo image-slot{ height:480px; border-radius:18px; overflow:hidden; display:block; box-shadow:0 18px 48px rgba(13,43,107,.14); }
  #story .fndr__name{
    position:static; display:block; margin-top:20px; text-align:left;
    background:none; color:var(--ink); font-size:21px; font-weight:700; padding:0;
  }
  #story .fndr__role{
    position:static; display:block; margin-top:4px; text-align:left;
    background:none; color:var(--ink-soft); font-size:14.5px; font-weight:500; padding:0;
  }
  @media (max-width:900px){
    #story .fndr__photo-panel{ padding:32px; }
    #story .fndr__photo{ transform:none; }
  }