/* =====================================================
   R1 ReadyFirst – About Page Layout
   Requires: shared.css
   v20 – Real photos, expanded team, reordered sections
   ===================================================== */

/* HERO */
.about-hero{padding:var(--lg) var(--md);background:var(--g-deep);text-align:center;color:var(--white)}
.about-hero__inner{max-width:620px;margin:0 auto}
.about-hero .section-eyebrow{color:var(--eyebrow-dark)}
.about-hero h1{font-size:clamp(2rem,5vw,2.75rem);font-weight:800;color:var(--white);margin-bottom:var(--sm);line-height:1.1}
.about-hero p{font-family:var(--font-prose);font-size:clamp(1.0625rem,2vw,1.1875rem);color:rgba(var(--sand-rgb),.85);line-height:1.7;max-width:560px;margin:0 auto}

/* MATT FEATURED */
.about-matt{background:var(--white);padding:var(--lg) var(--md)}
.about-matt__inner{max-width:920px;margin:0 auto}
.about-matt__feature{display:grid;grid-template-columns:280px 1fr;gap:var(--xl);align-items:center}
.about-matt__photo{width:280px;position:relative}
.about-matt__photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block;border-radius:12px;transform:scale(1.08);transform-origin:center top}
.about-matt__photo .about-video-link img{transform:none}
.about-matt__info{flex:1}
.about-matt__name{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,1.875rem);font-weight:800;color:var(--char);margin-bottom:.25rem}
.about-matt__creds{font-family:var(--font-ui);font-size:1rem;color:var(--char);line-height:1.75;margin-bottom:var(--sm)}
.about-matt__origin{font-family:var(--font-ui);font-size:1rem;color:var(--char);line-height:1.75;margin-bottom:var(--md)}

/* MATT PILLAR TAG */
.about-matt__title{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--char);margin-bottom:var(--sm);display:flex;align-items:center;gap:.5rem}

/* PILLAR TAGS (reusable) */
.pillar-badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:100px;font-family:var(--font-ui);font-size:.6875rem;font-weight:600;letter-spacing:.03em}
.pillar-badge--body{background:rgba(var(--jade-rgb),.12);color:var(--jade)}
.pillar-badge--mind{background:rgba(var(--sky-rgb),.12);color:var(--sky)}
.pillar-badge--energy{background:rgba(var(--terra-rgb),.12);color:var(--terra)}

/* PILLAR VISUALISATION (S3 header – icon columns) */

/* A TOOL FOR LIFE, NOT JUST SPORT (dark section) */
.about-life{background:var(--g-deep);padding:var(--lg) var(--md);color:var(--white)}
.about-life__inner{max-width:640px;margin:0 auto;text-align:center}
.about-life .section-eyebrow{color:var(--eyebrow-dark)}
.about-life h2{color:var(--white);margin-bottom:var(--md)}
.about-life__text{font-family:var(--font-prose);font-size:clamp(1.0625rem,2.2vw,1.1875rem);color:rgba(var(--sand-rgb),.85);line-height:1.75;margin-bottom:var(--md)}
.about-life__text:last-of-type{margin-bottom:0}

/* ADVISOR GOVERNANCE LINE */
.about-advisor-section__governance{font-family:var(--font-ui);font-size:.875rem;color:var(--wgray);line-height:1.65;max-width:640px;margin:var(--lg) auto 0;text-align:center;padding-top:var(--md);border-top:1px solid var(--sand-dk)}

/* CORE TEAM */
.about-team{background:var(--sand);padding:var(--lg) var(--md)}
.about-team__inner{max-width:860px;margin:0 auto}
.about-team__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.about-team__header .section-eyebrow{color:var(--eyebrow-light)}
.about-team__header h2{margin-bottom:var(--sm)}
.about-team__header p{color:var(--char);font-size:1.0625rem;line-height:1.7}
.about-team__grid{display:flex;flex-direction:column;gap:var(--lg)}
.about-team__member{display:grid;grid-template-columns:280px 1fr;gap:var(--lg);align-items:start;padding:var(--md);border-radius:12px}
.about-team__member--mind{background:linear-gradient(135deg,rgba(var(--pillar-warm-rgb),.08) 0%,rgba(var(--pillar-green-rgb),.05) 50%,rgba(var(--pillar-teal-rgb),.04) 100%)}
.about-team__member--energy{background:linear-gradient(135deg,rgba(var(--pillar-teal-rgb),.06) 0%,rgba(var(--pillar-green-rgb),.05) 50%,rgba(var(--pillar-warm-rgb),.06) 100%)}
.about-team__member--reverse{direction:rtl}
.about-team__member--reverse > *{direction:ltr}
.about-team__member-photo{width:280px;position:relative}
.about-team__member-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block;border-radius:12px}

/* VIDEO THUMBNAIL LINK – wraps a bio photo when a video is available; a <button> styled to match the former <a> */
.about-video-link{display:block;position:relative;width:100%;border:0;margin:0;padding:0;background:none;font:inherit;text-align:inherit;cursor:pointer}
.about-video-link__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(var(--jade-rgb),.88);box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background .15s ease}
.about-video-link__play svg{width:20px;height:20px;margin-left:3px}
.about-video-link:hover .about-video-link__play,.about-video-link:focus-visible .about-video-link__play{background:var(--jade)}

/* VIDEO MODAL – in-page lightbox player opened by .about-video-link */
body.video-modal-open{overflow:hidden}
.video-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--lg) var(--md)}
.video-modal[hidden]{display:none}
.video-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);border:0;padding:0;cursor:pointer}
.video-modal__dialog{position:relative;width:100%;max-width:960px}
.video-modal__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:var(--sh2)}
.video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-modal__close{position:absolute;top:-48px;right:0;width:36px;height:36px;border-radius:50%;background:var(--jade);border:0;color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}
.video-modal__close svg{width:18px;height:18px}
.video-modal__close:hover,.video-modal__close:focus-visible{background:var(--jade-dk)}
@media(max-width:767px){
  .video-modal{padding:var(--md) var(--sm)}
  .video-modal__close{top:auto;bottom:calc(100% + 8px);right:0}
}

/* DOMAIN SCREENSHOT OVERLAYS – small angled app screen pinned to each pillar lead's photo */
.about-matt__photo img.about-domain-shot,
.about-team__member-photo img.about-domain-shot{position:absolute;left:-14px;bottom:-16px;width:96px;height:auto;aspect-ratio:auto;object-fit:contain;transform:rotate(-8deg);transform-origin:center;background:transparent;border:none;border-radius:0;box-shadow:none;filter:drop-shadow(0 4px 16px rgba(0,0,0,.1));display:block;z-index:2}
.about-team__member-info h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--char);margin-bottom:.25rem}
.about-team__member-role{font-family:var(--font-ui);font-size:.875rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.about-team__member-role--mind{color:var(--char)}
.about-team__member-role--energy{color:var(--char)}
.about-team__member-cred{font-family:var(--font-ui);font-size:.9375rem;color:var(--char);line-height:1.65;margin-bottom:var(--sm)}

/* ADVISOR */
.about-advisor-section{background:var(--white);padding:var(--lg) var(--md)}
.about-advisor-section__inner{max-width:860px;margin:0 auto}
.about-advisor-section__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.about-advisor-section__header .section-eyebrow{color:var(--eyebrow-light)}
.about-advisor-section__header h2{margin-bottom:var(--sm)}
.about-advisor{display:grid;grid-template-columns:200px 1fr;gap:var(--lg);align-items:start;max-width:720px;margin:0 auto}
.about-advisor__photo{width:200px;position:relative}
.about-advisor__photo img{width:100%;height:auto;display:block;border-radius:12px}
.about-advisor__name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--char);margin-bottom:.25rem}
.about-advisor__role{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade);margin-bottom:.75rem}
.about-advisor__cred{font-family:var(--font-ui);font-size:.9375rem;color:var(--char);line-height:1.65}

/* CTA */
.about-cta{background:var(--sand);padding:var(--lg) var(--md)}
.about-cta__inner{max-width:900px;margin:0 auto}
.about-cta__inner--row{display:flex;align-items:center;gap:var(--lg)}
.about-cta__content{flex:0 0 65%;text-align:left}
.about-cta__char{flex:0 0 35%;display:flex;align-items:center;justify-content:center}
.about-cta h2{margin-bottom:var(--sm)}
.about-cta p{color:var(--char);font-size:1rem;margin-bottom:var(--lg)}
.about-cta__buttons{display:flex;justify-content:flex-start;gap:var(--sm);flex-wrap:wrap}

/* RESPONSIVE */
@media(max-width:1024px){
  .about-matt__feature{grid-template-columns:240px 1fr;gap:var(--lg)}
  .about-matt__photo{width:240px}
  .about-team__member{grid-template-columns:240px 1fr}
  .about-team__member-photo{width:240px}
  .about-team__member--reverse{direction:ltr}
  .about-cta__inner--row{flex-direction:column}
  .about-cta__content,.about-cta__char{flex:none;width:100%}
}
@media(max-width:767px){
  .about-hero,.about-matt,.about-life,.about-team,.about-advisor-section,.about-cta{padding:52px 20px}
  .about-matt__feature{grid-template-columns:1fr;text-align:center}
  .about-matt__photo{width:220px;margin:0 auto}
  .about-matt__title{justify-content:center;flex-wrap:wrap}
  .about-team__member{grid-template-columns:1fr;text-align:center}
  .about-team__member--reverse{direction:ltr}
  .about-team__member-photo{width:220px;margin:0 auto}
  .about-team__member-role{justify-content:center;flex-wrap:wrap}
  .about-advisor{grid-template-columns:1fr;text-align:center}
  .about-advisor__photo{width:160px;margin:0 auto}
  .about-cta__inner--row{flex-direction:column}
  .about-cta__content{flex:none;width:100%;text-align:center}
  .about-cta__char{flex:none;width:100%;order:1;margin-top:var(--md)}
  .about-cta__buttons{justify-content:center}
}