/* About page header (tools/content/about-hero.html) and the lines added around the timeline.
   The header fills exactly one screen so the "My Story" tab sits at its bottom edge; type and
   spacing scale with viewport height so everything fits down to ~650px-tall screens. */

.section-hero-new{flex-shrink:0;height:auto;min-height:100vh;min-height:100svh;align-items:center;justify-content:center}
.section-hero-new .new-bg{display:none}
/* Webflow sizes these two as percentages of the hero; fixed sizes stop the tab stretching. */
.section-hero-new .div-block-78{height:auto;max-height:none;flex:1 0 auto;width:100%;display:flex;align-items:center;justify-content:center}
.section-hero-new .div-block-77{height:116px;flex:0 0 auto}

.about-hero{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(104px,14vh,128px) 48px clamp(16px,3vh,32px);color:#fff;
  text-align:left;display:grid;grid-template-columns:1fr auto;gap:72px;align-items:center;
  animation:about-in .8s ease-out both}
@keyframes about-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.about-h1{text-align:left;font-size:clamp(44px,8vh,76px);line-height:1.05;font-weight:400;letter-spacing:-.01em;
  margin:0 0 clamp(14px,2.6vh,28px)}
.about-sub{font-size:clamp(17px,2.2vh,20px);line-height:1.55;max-width:620px;color:rgba(255,255,255,.82);
  margin:0 0 clamp(20px,4vh,44px)}
.about-stats-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
  padding-top:clamp(14px,2.4vh,24px);border-top:1px solid rgba(255,255,255,.2);max-width:760px;
  margin-bottom:clamp(10px,1.6vh,16px)}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:760px;margin-bottom:clamp(20px,4vh,44px)}
.about-num{white-space:nowrap;font-size:clamp(30px,4.2vh,38px);line-height:1;margin-bottom:10px}
.about-label{font-size:14px;line-height:1.4;color:rgba(255,255,255,.7)}
.about-stat-link{color:inherit;text-decoration:none}
.about-stat-link:hover .about-label{color:#fff}

.about-ctas{display:flex;gap:12px;flex-wrap:wrap}
.about-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:16px;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.about-btn.primary{background:#fff;color:#111}
.about-btn.primary:hover{background:#e16a08;color:#fff}
.about-btn.ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
.about-btn.ghost:hover{border-color:#fff}

.about-photo{display:block;height:clamp(300px,47vh,420px);width:auto;aspect-ratio:340/420;object-fit:cover;
  object-position:50% 20%;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* Content added above the timeline pushes its absolutely-positioned path down (its top is auto),
   leaving the fixed orange progress bar floating in the gap. Pin the path to the section. */
.timeline-path{top:0;bottom:0;height:auto}
.about-bridge{position:relative;z-index:3;background:#e0e0e0;max-width:820px;margin:0 auto 100px;padding:24px;
  text-align:center;font-size:32px;line-height:1.3;color:#1a1a1a}
.about-bridge span{color:#e16a08}

.about-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.about-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}

@media (max-width:991px){
  .about-hero{grid-template-columns:1fr;gap:clamp(16px,2.6vh,28px)}
  .about-pic{order:-1}
  .about-photo{height:clamp(72px,11vh,112px);aspect-ratio:1;border-radius:50%;object-position:50% 50%}
  .about-h1{font-size:clamp(36px,6vh,48px)}
}
@media (max-width:767px){
  .section-hero-new .div-block-77{height:82px}
  .about-hero{padding:112px 20px 16px}
  .about-h1{font-size:clamp(32px,4.6vh,40px)}
  .about-sub{font-size:16px;line-height:1.5;margin-bottom:clamp(16px,2.8vh,28px)}
  .about-stats{gap:12px;margin-bottom:clamp(16px,2.8vh,28px)}
  .about-num{font-size:clamp(22px,3.2vh,28px);margin-bottom:6px}
  .about-label{font-size:12.5px;line-height:1.35}
  .about-btn{padding:12px 20px;font-size:15px}
  .about-bridge{font-size:24px;margin-bottom:60px}
}
@media (max-width:767px) and (max-height:700px){
  .about-hero{padding-top:106px}
  .about-photo{height:60px}
  .about-h1{font-size:30px;margin-bottom:12px}
  .about-sub{font-size:15px}
}