/* ===================================================================
   MFAZA — ABOUT page layouts · set 2 (about7–about11). After style.css.
   tabbed · dual panels · sticky swap · accordion · quote-over-portrait
   =================================================================== */

/* ---------- A) TABBED LEADERSHIP ---------- */
.abt__tabs{display:flex;gap:10px;justify-content:center;margin-bottom:clamp(36px,4vw,56px);flex-wrap:wrap}
.abt__tab{font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:13px 30px;background:transparent;cursor:pointer;transition:.4s var(--ease)}
.abt__tab.active{background:var(--accent);border-color:var(--accent);color:#111}
.abt__panel{display:none;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,80px);align-items:center}
.abt__panel.show{display:grid;animation:fadeUp .6s var(--ease)}
.abt__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.abt__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%)}
.abt__media .frame{position:absolute;inset:16px;border:1px solid rgba(245,245,245,.25);pointer-events:none}
.abt__role{font-family:var(--display);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.abt__name{font-family:var(--display);font-weight:200;font-size:clamp(26px,3vw,46px);text-transform:uppercase;margin:10px 0 22px;line-height:1.02}
.abt .qm{font-family:var(--serif);font-size:84px;line-height:.4;color:var(--accent);display:block;height:38px}
.abt blockquote{font-family:var(--display);font-weight:200;font-size:clamp(18px,1.7vw,25px);line-height:1.4;margin-bottom:18px}
.abt p{color:var(--muted);margin-bottom:14px}
.abt .sig{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.abt .sig b{font-family:var(--display);font-weight:400;font-size:17px;display:block}
.abt .sig span{font-family:var(--display);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
@media(max-width:860px){.abt__panel.show{grid-template-columns:1fr}.abt__media{max-width:420px}}

/* ---------- B) DUAL FULL-HEIGHT PORTRAIT PANELS ---------- */
.abpanels{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.abpanel{position:relative;min-height:clamp(520px,72vh,780px);overflow:hidden;background:var(--bg-2)}
.abpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(25%) brightness(.7);transition:transform 1.3s var(--ease),filter .7s}
.abpanel:hover img{transform:scale(1.04);filter:grayscale(0) brightness(.85)}
.abpanel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.25),transparent 30%,rgba(17,17,17,.95));z-index:1}
.abpanel__b{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(30px,3.4vw,56px);width:100%}
.abpanel__role{font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.abpanel__b h3{font-family:var(--display);font-weight:200;font-size:clamp(26px,2.8vw,42px);text-transform:uppercase;margin:10px 0 16px;line-height:1.02}
.abpanel__b blockquote{font-family:var(--display);font-weight:200;font-size:clamp(15px,1.2vw,19px);line-height:1.5;color:rgba(245,245,245,.85);margin-bottom:12px;max-width:48ch}
.abpanel__b p{color:var(--muted);font-size:13px;max-width:50ch}
@media(max-width:760px){.abpanels{grid-template-columns:1fr}}

/* ---------- C) STICKY PORTRAIT SWAP ---------- */
.abss{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.abss__media{position:sticky;top:100px;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.abss__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),transform 6s var(--ease);transform:scale(1.05)}
.abss__media img.show{opacity:1;transform:scale(1)}
.abss__media .tag{position:absolute;left:0;bottom:0;z-index:2;background:rgba(17,17,17,.55);backdrop-filter:blur(6px);border-top:1px solid var(--line);border-right:1px solid var(--line);padding:14px 20px}
.abss__media .tag b{font-family:var(--display);font-weight:400;display:block}
.abss__media .tag span{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.abss__msg{min-height:80vh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);padding:40px 0}
.abss__msg:last-child{border-bottom:none}
.abss__msg .role{font-family:var(--display);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.abss__msg h3{font-family:var(--display);font-weight:200;font-size:clamp(24px,2.6vw,40px);text-transform:uppercase;margin:10px 0 18px}
.abss__msg blockquote{font-family:var(--display);font-weight:200;font-size:clamp(18px,1.6vw,24px);line-height:1.4;margin-bottom:16px}
.abss__msg p{color:var(--muted)}
@media(max-width:860px){
  .abss{grid-template-columns:1fr}
  /* on mobile the single swapping portrait scrolls away before the CEO message
     appears, so show both portraits inline instead */
  .abss__media{position:static;top:auto;aspect-ratio:auto;overflow:visible;background:none;
    display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:none;margin-bottom:18px}
  .abss__media img{position:relative;inset:auto;opacity:1;transform:none;width:100%;height:auto;
    aspect-ratio:4/5;object-fit:cover;object-position:top center}
  .abss__media .tag{display:none}
  .abss__msg{min-height:0;padding:24px 0}
}
@media(max-width:460px){.abss__media{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

/* ---------- D) SECTIONS ACCORDION ---------- */
.abacc{border-top:1px solid var(--line)}
.abacc__item{border-bottom:1px solid var(--line)}
.abacc__head{display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:center;padding:clamp(22px,2.6vw,34px) 4px;cursor:pointer}
.abacc__head .n{font-family:var(--display);font-size:13px;letter-spacing:.12em;color:var(--accent)}
.abacc__head h3{font-family:var(--display);font-weight:200;font-size:clamp(22px,2.8vw,42px);text-transform:uppercase;line-height:1;transition:color .35s}
.abacc__head .pl{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--accent);transition:.45s var(--ease)}
.abacc__item.open .abacc__head h3,.abacc__head:hover h3{color:var(--accent)}
.abacc__item.open .pl{transform:rotate(45deg);background:var(--accent);color:#111;border-color:var(--accent)}
.abacc__panel{max-height:0;overflow:hidden;transition:max-height .7s var(--ease)}
.abacc__in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);padding:6px 4px 40px;align-items:center}
.abacc__in p{color:var(--muted);margin-bottom:12px}
.abacc__in blockquote{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.5vw,22px);line-height:1.4;margin-bottom:14px}
.abacc__in .who{margin-top:8px;font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.abacc__img{overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.abacc__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%)}
@media(max-width:760px){.abacc__head{grid-template-columns:40px 1fr auto}.abacc__in{grid-template-columns:1fr;gap:18px}.abacc__img{aspect-ratio:16/10}}

/* ---------- E) QUOTE OVER PORTRAIT ---------- */
.abover{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.abovercard{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-2)}
.abovercard img{width:100%;height:100%;object-fit:cover;filter:grayscale(25%) brightness(.62);transition:transform 1.2s var(--ease),filter .7s}
.abovercard:hover img{transform:scale(1.04);filter:grayscale(0) brightness(.78)}
.abovercard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.2),transparent 30%,rgba(17,17,17,.92));z-index:1}
.abovercard__b{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(28px,3vw,48px);width:100%}
.abovercard__role{font-family:var(--display);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.abovercard__b h3{font-family:var(--display);font-weight:200;font-size:clamp(24px,2.6vw,38px);text-transform:uppercase;margin:10px 0 14px;line-height:1.02}
.abovercard__b blockquote{font-family:var(--display);font-weight:200;font-size:clamp(15px,1.2vw,19px);line-height:1.5;color:rgba(245,245,245,.88);margin-bottom:10px}
.abovercard__b p{color:var(--muted);font-size:13px}
@media(max-width:760px){.abover{grid-template-columns:1fr}}