/* Just As It Was v9.8 — About page reference parity.
   Built against the supplied About-page crops at 4K and the live Sites reference.
   Main corrections: 4K type/canvas scaling, hero crop, full-size team portraits,
   normal team row rhythm, studio facts sizing and CTA/editing typography. */

/* -------------------------------------------------------------------------
   Desktop baseline: the supplied reference uses full editorial portraits on
   About.  The old 48px circular portraits were a legacy placeholder treatment.
   ------------------------------------------------------------------------- */
@media (min-width:1101px){
  body.jaiw-reference-about .about-page-hero>img{
    object-position:center 38%!important;
  }

  body.jaiw-reference-about .team-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:clamp(22px,1.5vw,34px)!important;
    row-gap:clamp(90px,5.4vw,124px)!important;
  }
  body.jaiw-reference-about .team-portrait{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:.80 / 1!important;
    border-radius:0!important;
    overflow:hidden!important;
    margin:0 0 clamp(18px,1.15vw,26px)!important;
    background:var(--mist)!important;
  }
  body.jaiw-reference-about .team-portrait img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  body.jaiw-reference-about .team-portrait>span{
    position:absolute!important;
    left:14px!important;
    top:14px!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(250,248,241,.96)!important;
    color:var(--ink)!important;
    font:600 8px/1 var(--sans)!important;
    z-index:2!important;
  }
  body.jaiw-reference-about .team-section{
    padding-top:clamp(110px,6.4vw,148px)!important;
    padding-bottom:clamp(130px,7vw,170px)!important;
  }
  body.jaiw-reference-about .team-section>.section-heading{
    margin-bottom:clamp(70px,4.8vw,108px)!important;
  }
  body.jaiw-reference-about .team-section .section-heading h2{
    font-size:clamp(46px,2.65vw,61px)!important;
    line-height:.94!important;
    max-width:760px!important;
  }
  body.jaiw-reference-about .team-section>.section-heading>p{
    font-size:clamp(11px,.66vw,15px)!important;
    line-height:1.52!important;
    max-width:340px!important;
  }
  body.jaiw-reference-about .team-card h3{
    font-size:clamp(28px,1.55vw,35px)!important;
    line-height:1!important;
  }
  body.jaiw-reference-about .team-card .role{
    font-size:clamp(8px,.43vw,10px)!important;
    line-height:1.3!important;
    margin:7px 0 17px!important;
  }
  body.jaiw-reference-about .team-card p:not(.role){
    font-size:clamp(10.5px,.58vw,13px)!important;
    line-height:1.55!important;
    margin-bottom:16px!important;
  }
  body.jaiw-reference-about .team-card small{
    display:block!important;
    border-top:1px solid var(--line)!important;
    padding-top:14px!important;
    font:300 italic clamp(10px,.55vw,12.5px)/1.35 var(--serif)!important;
  }

  /* Studio-story typography: body copy in the supplied reference is clearly
     larger than the old 10.5px calibration. */
  body.jaiw-reference-about .brand-story h2{
    font-size:clamp(48px,2.7vw,62px)!important;
    line-height:.95!important;
    max-width:580px!important;
  }
  body.jaiw-reference-about .brand-story>div:last-child p{
    font-size:clamp(12px,.64vw,14.5px)!important;
    line-height:1.62!important;
    margin-bottom:20px!important;
  }
  body.jaiw-reference-about .brand-promise{
    font-size:clamp(22px,1.12vw,26px)!important;
    line-height:1.08!important;
    margin-top:34px!important;
  }

  body.jaiw-reference-about .studio-model-copy h2{
    font-size:clamp(48px,2.75vw,63px)!important;
    line-height:.96!important;
    max-width:560px!important;
  }
  body.jaiw-reference-about .studio-model-copy>p:not(.eyebrow){
    font-size:clamp(11px,.62vw,14px)!important;
    line-height:1.55!important;
    max-width:560px!important;
  }
  body.jaiw-reference-about .model-facts strong{
    font-size:clamp(31px,1.55vw,36px)!important;
  }
  body.jaiw-reference-about .model-facts span{
    font-size:clamp(8px,.4vw,9px)!important;
  }
  body.jaiw-reference-about .model-facts p{
    font-size:clamp(8.5px,.45vw,10px)!important;
    line-height:1.35!important;
    margin:8px 0 0!important;
  }

  body.jaiw-reference-about .editing-team{
    max-width:920px!important;
    padding-top:clamp(120px,7vw,160px)!important;
    padding-bottom:clamp(115px,6.6vw,150px)!important;
  }
  body.jaiw-reference-about .editing-team h2{
    font-size:clamp(46px,2.5vw,58px)!important;
    line-height:.96!important;
  }
  body.jaiw-reference-about .editing-team>p:not(.eyebrow){
    font-size:clamp(11px,.62vw,14px)!important;
    line-height:1.52!important;
    max-width:760px!important;
    margin:26px auto 0!important;
  }
}

/* -------------------------------------------------------------------------
   4K calibration.  This is the missing About equivalent of Home v9.4.
   The old About page remained fixed to a 1220px CSS canvas, which is why it
   looked approximately half-size on the user's 4K display.  The reference
   grows to a measured ~60vw editorial canvas.
   ------------------------------------------------------------------------- */
@media (min-width:2200px){
  body.jaiw-reference-about{
    font-size:clamp(14px,.42vw,18px)!important;
  }

  /* Header / primary menu. */
  body.jaiw-reference-about .site-header{
    height:clamp(82px,3.15vw,120px)!important;
    grid-template-columns:minmax(430px,1fr) auto minmax(310px,1fr)!important;
    gap:clamp(30px,1.5vw,58px)!important;
    padding:0 clamp(64px,3.15vw,120px)!important;
  }
  body.jaiw-reference-about .wordmark{
    min-width:430px!important;
    gap:clamp(14px,.65vw,25px)!important;
  }
  body.jaiw-reference-about .wordmark-monogram{
    width:clamp(44px,1.85vw,70px)!important;
    height:clamp(44px,1.85vw,70px)!important;
    font-size:clamp(19px,.82vw,31px)!important;
  }
  body.jaiw-reference-about .wordmark-copy strong{
    font-size:clamp(18px,.82vw,31px)!important;
  }
  body.jaiw-reference-about .wordmark-copy small{
    margin-top:clamp(5px,.25vw,10px)!important;
    font-size:clamp(7px,.31vw,11.5px)!important;
  }
  body.jaiw-reference-about .desktop-nav{
    gap:clamp(30px,1.38vw,54px)!important;
  }
  body.jaiw-reference-about .desktop-nav a{
    font-size:clamp(11px,.48vw,18px)!important;
    letter-spacing:.07em!important;
  }
  body.jaiw-reference-about .header-cta{
    min-width:clamp(155px,7.1vw,272px)!important;
    min-height:clamp(46px,2.25vw,86px)!important;
    padding:0 clamp(17px,.8vw,30px)!important;
    font-size:clamp(10px,.43vw,16px)!important;
  }

  /* Use the same measured 4K canvas as the supplied About reference. */
  body.jaiw-reference-about .about-page-hero>.shell,
  body.jaiw-reference-about .brand-story,
  body.jaiw-reference-about .studio-model>.shell,
  body.jaiw-reference-about .team-section,
  body.jaiw-reference-about .editing-team,
  body.jaiw-reference-about .final-cta-inner{
    width:60vw!important;
    max-width:none!important;
  }

  /* Hero.  Scaling height with viewport width preserves the same crop of the
     portrait source at 4K instead of showing only its blurred upper strip. */
  body.jaiw-reference-about .about-page-hero{
    height:clamp(980px,37.6vw,1540px)!important;
  }
  body.jaiw-reference-about .about-page-hero>.shell{
    padding-bottom:clamp(90px,3.4vw,140px)!important;
  }
  body.jaiw-reference-about .about-page-hero .eyebrow{
    margin-bottom:clamp(190px,5.8vw,238px)!important;
    font-size:clamp(10px,.43vw,16px)!important;
  }
  body.jaiw-reference-about .about-page-hero h1{
    font-size:clamp(78px,3.1vw,126px)!important;
    line-height:.88!important;
    max-width:35vw!important;
  }
  body.jaiw-reference-about .about-page-hero>.shell>p:last-child{
    font-size:clamp(15px,.69vw,27px)!important;
    line-height:1.48!important;
    max-width:20vw!important;
    margin-bottom:0!important;
  }

  body.jaiw-reference-about .eyebrow{
    font-size:clamp(10px,.42vw,16px)!important;
  }

  /* Studio story. */
  body.jaiw-reference-about .brand-story{
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr)!important;
    gap:clamp(150px,7vw,270px)!important;
    padding-top:clamp(145px,6.6vw,255px)!important;
    padding-bottom:clamp(150px,7vw,270px)!important;
  }
  body.jaiw-reference-about .brand-story h2{
    font-size:clamp(62px,2.75vw,106px)!important;
    max-width:31vw!important;
  }
  body.jaiw-reference-about .brand-story>div:last-child p{
    font-size:clamp(14px,.64vw,24px)!important;
    line-height:1.62!important;
    margin-bottom:clamp(20px,1vw,38px)!important;
  }
  body.jaiw-reference-about .brand-story>div:last-child{
    max-width:22vw!important;
  }
  body.jaiw-reference-about .brand-promise{
    font-size:clamp(26px,1.15vw,44px)!important;
    margin-top:clamp(30px,1.45vw,56px)!important;
  }

  /* Studio model / facts. */
  body.jaiw-reference-about .studio-model{
    padding:clamp(150px,6.2vw,250px) 0!important;
  }
  body.jaiw-reference-about .studio-model>.shell{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.12fr)!important;
    gap:clamp(150px,7vw,270px)!important;
  }
  body.jaiw-reference-about .studio-model-copy h2{
    font-size:clamp(62px,2.75vw,106px)!important;
    max-width:31vw!important;
  }
  body.jaiw-reference-about .studio-model-copy>p:not(.eyebrow){
    font-size:clamp(14px,.62vw,23px)!important;
    line-height:1.55!important;
    max-width:25vw!important;
  }
  body.jaiw-reference-about .model-facts>article{
    min-height:clamp(180px,6.7vw,275px)!important;
    padding:clamp(30px,1.25vw,48px)!important;
  }
  body.jaiw-reference-about .model-facts strong{
    font-size:clamp(38px,1.48vw,57px)!important;
    margin-bottom:clamp(10px,.48vw,18px)!important;
  }
  body.jaiw-reference-about .model-facts span{
    font-size:clamp(9px,.38vw,14px)!important;
  }
  body.jaiw-reference-about .model-facts p{
    font-size:clamp(10px,.46vw,17px)!important;
    margin-top:clamp(8px,.38vw,14px)!important;
  }

  /* People. */
  body.jaiw-reference-about .team-section{
    padding-top:clamp(150px,6.5vw,250px)!important;
    padding-bottom:clamp(160px,7vw,270px)!important;
  }
  body.jaiw-reference-about .team-section>.section-heading{
    grid-template-columns:minmax(0,1.3fr) minmax(420px,.55fr)!important;
    gap:clamp(130px,6vw,230px)!important;
    margin-bottom:clamp(120px,5.2vw,200px)!important;
  }
  body.jaiw-reference-about .team-section .section-heading h2{
    font-size:clamp(62px,2.72vw,104px)!important;
    max-width:38vw!important;
  }
  body.jaiw-reference-about .team-section>.section-heading>p{
    font-size:clamp(13px,.58vw,22px)!important;
    line-height:1.52!important;
    max-width:19vw!important;
  }
  body.jaiw-reference-about .team-grid{
    column-gap:clamp(30px,1.35vw,52px)!important;
    row-gap:clamp(145px,6vw,230px)!important;
  }
  body.jaiw-reference-about .team-portrait{
    aspect-ratio:.80 / 1!important;
    margin-bottom:clamp(24px,1.1vw,42px)!important;
  }
  body.jaiw-reference-about .team-portrait>span{
    left:clamp(18px,.75vw,29px)!important;
    top:clamp(18px,.75vw,29px)!important;
    width:clamp(38px,1.45vw,56px)!important;
    height:clamp(38px,1.45vw,56px)!important;
    font-size:clamp(9px,.36vw,13px)!important;
  }
  body.jaiw-reference-about .team-card h3{
    font-size:clamp(36px,1.45vw,56px)!important;
  }
  body.jaiw-reference-about .team-card .role{
    font-size:clamp(9px,.38vw,14px)!important;
    margin:clamp(8px,.4vw,15px) 0 clamp(18px,.85vw,33px)!important;
  }
  body.jaiw-reference-about .team-card p:not(.role){
    font-size:clamp(12px,.54vw,20px)!important;
    line-height:1.55!important;
    margin-bottom:clamp(18px,.8vw,31px)!important;
  }
  body.jaiw-reference-about .team-card small{
    padding-top:clamp(15px,.7vw,27px)!important;
    font-size:clamp(12px,.53vw,20px)!important;
  }

  /* Behind the delivery. */
  body.jaiw-reference-about .editing-team{
    width:44vw!important;
    padding-top:clamp(135px,6.4vw,246px)!important;
    padding-bottom:clamp(130px,6vw,230px)!important;
  }
  body.jaiw-reference-about .editing-team h2{
    font-size:clamp(60px,2.55vw,98px)!important;
  }
  body.jaiw-reference-about .editing-team>p:not(.eyebrow){
    font-size:clamp(14px,.6vw,23px)!important;
    line-height:1.55!important;
    max-width:38vw!important;
    margin-top:clamp(28px,1.25vw,48px)!important;
  }

  /* Final CTA — same 4K geometry as the approved Home reference. */
  body.jaiw-reference-about .final-cta-inner{
    min-height:clamp(390px,19vw,730px)!important;
    grid-template-columns:9vw minmax(0,1fr) 20vw!important;
    grid-template-rows:auto auto!important;
    column-gap:clamp(90px,4.4vw,169px)!important;
    row-gap:clamp(28px,1.4vw,54px)!important;
    align-items:center!important;
  }
  body.jaiw-reference-about .final-cta .eyebrow{
    grid-column:1!important;
    grid-row:1/3!important;
    align-self:center!important;
    font-size:clamp(10px,.42vw,16px)!important;
  }
  body.jaiw-reference-about .final-cta h2{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center!important;
    font-size:clamp(60px,2.8vw,108px)!important;
    line-height:.96!important;
    max-width:36vw!important;
  }
  body.jaiw-reference-about .final-cta-inner>p:not(.eyebrow){
    grid-column:3!important;
    grid-row:1!important;
    align-self:end!important;
    font-size:clamp(13px,.62vw,23px)!important;
    line-height:1.55!important;
    max-width:20vw!important;
  }
  body.jaiw-reference-about .final-cta .button{
    grid-column:3!important;
    grid-row:2!important;
    align-self:start!important;
    justify-self:start!important;
    min-width:clamp(160px,7.5vw,288px)!important;
    min-height:clamp(48px,2.2vw,84px)!important;
    margin:0!important;
    background:var(--green)!important;
    border-color:var(--green)!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(10px,.42vw,16px)!important;
  }
}

/* Keep the intended rectangular portraits on tablet/mobile as well; only the
   grid count changes in the base responsive stylesheet. */
@media (max-width:1100px){
  body.jaiw-reference-about .team-portrait{
    width:100%!important;
    height:auto!important;
    aspect-ratio:.80/1!important;
    border-radius:0!important;
    position:relative!important;
    overflow:hidden!important;
  }
  body.jaiw-reference-about .team-portrait img{width:100%!important;height:100%!important;object-fit:cover!important}
  body.jaiw-reference-about .team-portrait>span{position:absolute!important;left:12px!important;top:12px!important;width:30px!important;height:30px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(250,248,241,.96)!important;color:var(--ink)!important;font:600 8px/1 var(--sans)!important}
}