/* Phone-only refinements (about). Every rule must sit inside @media (max-width:760px): desktop and tablet never load these rules. */
@media (max-width:760px){

  /* ---------- Who we are: a calmer photograph, tighter rhythm ---------- */
  .ab-who{gap:36px}
  .ab-who-ph{height:auto;aspect-ratio:4/3.4}
  .ab-who-ph figcaption{max-width:calc(100% - 32px)}
  .ab-cols{gap:16px;margin-top:20px;font-size:15.5px}
  .ab-more{min-height:44px;margin-top:16px}
  .ab-serve{margin-top:24px;gap:6px 14px;font-size:15px;line-height:1.5}
  .ab-serve span{flex:1 0 100%}

  /* ---------- What we stand for: a stacked accordion of photographs ---------- */
  .ab-ubuntu{padding-left:18px}
  .ab-ubuntu p{font-size:22px}
  .vp-head{margin-bottom:12px}
  .vp-row{gap:8px}
  .vp{height:76px;border-radius:18px;transition:height .65s cubic-bezier(.22,1,.36,1),box-shadow .5s}
  .vp.on{height:420px;box-shadow:0 30px 60px -36px rgba(14,30,48,.55)}
  /* the closed rows read as clean labels: a deeper wash so the photograph stays a texture */
  .vp:not(.on)::after{background:linear-gradient(90deg,rgba(10,35,66,.9) 0%,rgba(10,35,66,.62) 60%,rgba(10,35,66,.4) 100%)}
  .vp-ic{top:14px;left:14px;width:48px;height:48px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,35,66,.55)}
  .vp-side{left:76px;top:38px;bottom:auto;transform:translateY(-50%);font-size:12.5px;letter-spacing:.16em;max-width:calc(100% - 96px);overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
  .vp-body{padding:22px 22px 26px;transform:translateY(12px)}
  .vp.on .vp-body{transition-delay:.2s}
  .vp-tag{font-size:11px;letter-spacing:.18em;line-height:1.5}
  .vp h3{font-size:25px;line-height:1.16}
  .vp-body>p:not(.vp-tag){font-size:15px;line-height:1.55;margin-top:12px;padding-top:12px}

  /* ---------- Leadership: a swipeable row of portraits instead of three tall cards ---------- */
  .team{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 28px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .team::-webkit-scrollbar{display:none}
  .person{flex:0 0 min(78vw,320px);scroll-snap-align:start;border-radius:20px;overflow:hidden}
  .person .ph{aspect-ratio:1/1.05}
  .person .bd{padding:20px 20px 22px;gap:8px}
  .person .role{font-size:11.5px;letter-spacing:.14em}
  .person h3{font-size:22px}
  .person .short{font-size:15px;line-height:1.55}
  .person .quals{font-size:13.5px;line-height:1.45}
  .p-open{min-height:44px;margin-top:0}
  /* gentle, sideways arrival for cards that are swiped into view */
  .js .team .person.rise{transform:translateX(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .js .team .person.rise.in{transform:none}

  /* the profile sheet */
  .pf-ph{aspect-ratio:1/1}
  .pf-bd{padding:24px 22px 28px;gap:10px}
  .modal .pf-bd h2{font-size:28px}
  .pf-bd>p:not(.role):not(.quals){font-size:16px;line-height:1.6}
  .pf-bd .mail{min-height:44px;display:inline-flex;align-items:center}

  /* ---------- What sets us apart: no pinned scene on phones; six reasons read as one calm list ---------- */
  .ap-scroll{height:auto}
  .ap-sticky{position:relative;top:auto;height:auto;overflow:visible;display:block;padding:88px 0 8px}
  .ap-bg{bottom:auto;height:min(100%,760px);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .ap-bg img{object-position:62% 50%!important;transform:none;will-change:auto}
  .ap-bg::after{background:linear-gradient(180deg,rgba(10,35,66,.62) 0%,rgba(10,35,66,.82) 45%,rgba(10,35,66,.96) 100%)}
  .ap-grid{padding-top:0;gap:28px}
  .ap-title{font-size:30px;line-height:1.1}
  .ap-lede{display:block;font-size:15.5px;margin-top:16px}
  .ap-index{display:none}
  .ap-card{min-height:0;padding:6px 22px;border-radius:22px;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(160deg,rgba(14,30,48,.78),rgba(0,70,111,.55))}
  .ap-pane{min-height:0}
  .ap-pane li{position:relative;inset:auto;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:22px 0;opacity:1;transform:none;pointer-events:auto;
    border-top:1px solid rgba(255,255,255,.12)}
  .ap-pane li:first-child{border-top:0}
  .ap-pane li.gone{transform:none}
  .ap-n{grid-row:1/3;font-size:15px;font-weight:500;letter-spacing:.04em;line-height:1.6;color:#9CC0DA}
  .ap-pane b{margin-top:0;font-size:21px;line-height:1.25;font-weight:400}
  .ap-d{margin-top:6px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
  .ap-prog{display:none}
  /* each reason arrives on its own as it scrolls in (about.js adds .rise on phones) */
  .js .ap-pane li.rise{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .js .ap-pane li.rise.in{opacity:1;transform:none}
  .ap-after{padding-top:44px;padding-bottom:64px}
  .ap-quote p{font-size:22px}
  /* on the home page the list closes the section itself (no quote beneath it) */
  .ap-x>.ap-scroll:last-child .ap-sticky{padding-bottom:64px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .vp,.vp-body,.js .team .person.rise,.js .ap-pane li.rise{transition:none}
  .js .team .person.rise,.js .ap-pane li.rise{opacity:1;transform:none}
}