/* =========================================================
   JOHN BRAMLEY — ABOUT LUXE RECOMPOSITION v51
   Desktop hero + second section. Mobile shell intentionally preserved.
   ========================================================= */

@media (min-width: 981px){
  /* HERO: center John + copy as one composed unit */
  body.page-about .about-hero-v22-inner{
    width:min(1320px,calc(100% - 64px))!important;
    height:100%!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }

  body.page-about .about-hero-v22-main{
    width:min(100%,1120px)!important;
    margin:0 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(250px,300px) minmax(0,650px)!important;
    gap:clamp(48px,5vw,76px)!important;
    align-items:center!important;
    justify-content:center!important;
    padding:112px 0 26px!important;
  }

  body.page-about .about-hero-v22-portrait{
    width:100%!important;
    max-width:300px!important;
    height:clamp(400px,48vh,500px)!important;
    margin:0!important;
    align-self:center!important;
    justify-self:end!important;
    transform:none!important;
  }

  body.page-about .about-hero-v22-copy{
    max-width:650px!important;
    align-self:center!important;
    justify-self:start!important;
    padding:0!important;
    transform:translateY(-2px)!important;
  }

  body.page-about .about-hero-v22-eyebrow{
    margin:0 0 18px!important;
  }

  body.page-about .about-hero-v22 h1{
    max-width:620px!important;
    font-size:clamp(47px,4vw,62px)!important;
    line-height:.99!important;
  }

  body.page-about .about-hero-v22-lede{
    max-width:570px!important;
    margin-top:22px!important;
  }

  body.page-about .about-hero-v22-support{
    max-width:560px!important;
  }

  body.page-about .about-hero-v22-marine{
    right:-4%!important;
    width:min(58vw,930px)!important;
    opacity:.58!important;
  }

  /* SECOND SECTION: editorial, luxe, less blocky */
  body.page-about .about-profile-v21{
    position:relative!important;
    overflow:hidden!important;
    padding:92px 0 96px!important;
    background:
      radial-gradient(circle at 85% 18%,rgba(107,169,218,.12),transparent 28%),
      linear-gradient(180deg,#fbfdff 0%,#f3f7fa 100%)!important;
  }

  body.page-about .about-profile-v21::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(1320px,calc(100% - 64px));
    transform:translateX(-50%);
    border-top:1px solid rgba(26,63,96,.12);
  }

  body.page-about .about-profile-v21-inner{
    width:min(1320px,calc(100% - 64px))!important;
    display:grid!important;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
    gap:clamp(68px,7vw,110px)!important;
    align-items:start!important;
  }

  body.page-about .about-profile-v21-head{
    display:block!important;
    padding:0!important;
    border:0!important;
  }

  body.page-about .about-profile-v21-title .eyebrow{
    margin:0 0 18px!important;
    color:#4d8fc4!important;
  }

  body.page-about .about-profile-v21-title h2{
    margin:0!important;
    max-width:11.8ch!important;
    font-size:clamp(38px,3.45vw,50px)!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
    color:#0f2841!important;
    text-wrap:balance!important;
  }

  body.page-about .about-profile-v21-stat{
    margin-top:42px!important;
    display:flex!important;
    align-items:flex-end!important;
    gap:15px!important;
    text-align:left!important;
    padding:0!important;
  }

  body.page-about .about-profile-v21-stat strong{
    margin:0!important;
    color:#2f76ad!important;
    font-size:82px!important;
    line-height:.78!important;
    font-weight:350!important;
    letter-spacing:-.05em!important;
  }

  body.page-about .about-profile-v21-stat span{
    max-width:120px!important;
    margin:0 0 4px!important;
    color:#718294!important;
    font-size:10px!important;
    line-height:1.42!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    white-space:normal!important;
  }

  body.page-about .about-profile-v21-copy{
    display:block!important;
    padding:0!important;
  }

  body.page-about .about-profile-v21-copy .lead{
    position:relative!important;
    margin:0 0 34px!important;
    max-width:42ch!important;
    padding:0 0 30px!important;
    color:#17324b!important;
    font-size:clamp(21px,1.7vw,26px)!important;
    line-height:1.48!important;
    font-weight:480!important;
    letter-spacing:-.015em!important;
  }

  body.page-about .about-profile-v21-copy .lead::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:76px;
    height:2px;
    background:#6ca9d7;
  }

  body.page-about .about-profile-v21-columns{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:34px!important;
  }

  body.page-about .about-profile-v21-columns p{
    margin:0!important;
    max-width:35ch!important;
    color:#566a7c!important;
    font-size:15.5px!important;
    line-height:1.76!important;
  }

  /* subtle vertical rhythm marker between the two copy columns */
  body.page-about .about-profile-v21-columns p + p{
    padding-left:34px!important;
    border-left:1px solid rgba(29,66,98,.14)!important;
  }
}

@media (max-width: 1100px) and (min-width: 981px){
  body.page-about .about-hero-v22-main{
    width:min(100%,980px)!important;
    grid-template-columns:240px minmax(0,600px)!important;
    gap:42px!important;
  }
  body.page-about .about-profile-v21-inner{
    gap:56px!important;
  }
}

/* Preserve mobile layout, only make second section cleaner on phones */
@media (max-width: 980px){
  body.page-about .about-profile-v21{
    padding:58px 0 62px!important;
    background:linear-gradient(180deg,#fbfdff 0%,#f4f8fb 100%)!important;
  }
  body.page-about .about-profile-v21-inner{
    width:calc(100% - 28px)!important;
  }
  body.page-about .about-profile-v21-title h2{
    max-width:none!important;
    font-size:clamp(30px,8vw,39px)!important;
    line-height:1.06!important;
  }
  body.page-about .about-profile-v21-stat{
    margin-top:24px!important;
    text-align:left!important;
  }
  body.page-about .about-profile-v21-copy{
    margin-top:30px!important;
  }
  body.page-about .about-profile-v21-copy .lead{
    max-width:none!important;
    font-size:19px!important;
    line-height:1.52!important;
  }
  body.page-about .about-profile-v21-columns{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  body.page-about .about-profile-v21-columns p{
    max-width:none!important;
  }
  body.page-about .about-profile-v21-columns p + p{
    padding-left:0!important;
    border-left:0!important;
  }
}