/* ===================================================================
   MFAZA — NEW LAYOUTS · set 5 (index35–index39)
   New HEROES + new SECTION types, in the existing dark-luxury system.
   Heroes: diagonal split, kinetic word, image mosaic, framed, type-only
   Sections: process steps, leadership, sectors, pullquote, capabilities
   =================================================================== */

/* ========================= HEROES ========================= */

/* 1) DIAGONAL SPLIT HERO */
.hero5-diag{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden}
.hero5-diag__text{padding:120px var(--gutter) 70px;position:relative;z-index:2}
.hero5-diag__text .eyebrow{margin-bottom:28px;opacity:0;animation:fadeUp 1s var(--ease) .3s forwards}
.hero5-diag h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,5.6vw,92px);line-height:.98;text-transform:uppercase;letter-spacing:-.02em}
.hero5-diag h1 em{font-family:var(--serif);font-style:italic;color:var(--accent);text-transform:none}
.hero5-diag h1 .ln{display:block;overflow:hidden}
.hero5-diag h1 .ln span{display:block;transform:translateY(105%);animation:lineUp 1.05s var(--ease) forwards}
.hero5-diag h1 .ln:nth-child(1) span{animation-delay:.4s}
.hero5-diag h1 .ln:nth-child(2) span{animation-delay:.55s}
.hero5-diag__sub{margin-top:30px;max-width:42ch;opacity:0;animation:fadeUp 1s var(--ease) 1s forwards}
.hero5-diag__cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeUp 1s var(--ease) 1.15s forwards}
.hero5-diag__media{position:relative;height:100%;min-height:60vh}
.hero5-diag__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.hero5-diag__media::after{content:"";position:absolute;inset:0;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(17,17,17,.25),transparent 40%,rgba(17,17,17,.5))}
@media(max-width:900px){
  .hero5-diag{grid-template-columns:1fr}
  .hero5-diag__media{order:-1;min-height:44vh}
  .hero5-diag__media img,.hero5-diag__media::after{clip-path:none}
  .hero5-diag__text{padding:110px var(--gutter) 56px}
}

/* 2) KINETIC WORD HERO */
.hero5-kin{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero5-kin__bg{position:absolute;inset:0;z-index:-1}
.hero5-kin__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero5-kin__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(17,17,17,.4),rgba(17,17,17,.85))}
.hero5-kin .container{position:relative;z-index:2}
.hero5-kin .eyebrow{margin-bottom:30px}
.hero5-kin h1{font-family:var(--display);font-weight:200;font-size:clamp(34px,6.5vw,104px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.hero5-kin .swap{display:inline-block;min-width:5ch;color:var(--accent);position:relative}
.hero5-kin .swap span{display:inline-block;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hero5-kin .swap.out span{opacity:0;transform:translateY(-12px)}
.hero5-kin__sub{margin:34px auto 0;max-width:52ch;color:var(--muted)}
.hero5-kin__cta{margin-top:42px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* 3) IMAGE MOSAIC HERO */
.hero5-mosaic{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero5-mosaic__grid{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.hero5-mosaic__grid img{width:100%;height:100%;object-fit:cover}
.hero5-mosaic__grid::after,.hero5-mosaic::before{content:""}
.hero5-mosaic::before{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.7),rgba(17,17,17,.55) 40%,rgba(17,17,17,.85))}
.hero5-mosaic .container{position:relative;z-index:2}
.hero5-mosaic .eyebrow{margin-bottom:28px}
.hero5-mosaic h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,8vw,128px);line-height:.94;text-transform:uppercase;letter-spacing:-.02em}
.hero5-mosaic h1 em{font-family:var(--serif);font-style:italic;color:var(--accent);text-transform:none}
.hero5-mosaic__sub{margin:32px auto 0;max-width:50ch;color:var(--muted)}
.hero5-mosaic__cta{margin-top:42px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@media(max-width:760px){.hero5-mosaic__grid{grid-template-columns:repeat(2,1fr)}}

/* 4) FRAMED HERO */
.hero5-frame{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero5-frame__bg{position:absolute;inset:0;z-index:-2}
.hero5-frame__bg img{width:100%;height:100%;object-fit:cover}
.hero5-frame__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.4),transparent 35%,rgba(17,17,17,.85))}
.hero5-frame__box{position:absolute;inset:clamp(20px,4vw,60px);border:1px solid rgba(245,245,245,.25);z-index:1;pointer-events:none}
.hero5-frame .container{position:relative;z-index:2;padding-bottom:clamp(60px,9vw,120px)}
.hero5-frame .eyebrow{margin-bottom:24px}
.hero5-frame h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,7vw,108px);line-height:.96;text-transform:uppercase;letter-spacing:-.02em;max-width:16ch}
.hero5-frame h1 em{font-family:var(--serif);font-style:italic;color:var(--accent);text-transform:none}
.hero5-frame__row{margin-top:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero5-frame__row p{max-width:44ch;color:var(--muted)}

/* 5) TYPE-ONLY HERO */
.hero5-type{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--bg)}
.hero5-type .container{position:relative;z-index:2}
.hero5-type .eyebrow{margin-bottom:34px}
.hero5-type h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,9vw,150px);line-height:.92;text-transform:uppercase;letter-spacing:-.03em}
.hero5-type h1 em{font-family:var(--serif);font-style:italic;color:var(--accent);text-transform:none}
.hero5-type h1 .stroke{color:transparent;-webkit-text-stroke:1px var(--accent);text-stroke:1px var(--accent)}
.hero5-type__meta{margin-top:46px;display:flex;gap:clamp(30px,5vw,80px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px}
.hero5-type__meta .m .k{font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.hero5-type__meta .m .v{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.6vw,24px);margin-top:8px}
.hero5-type__meta .m .v em{color:var(--accent);font-style:normal;font-family:var(--serif)}

/* ========================= SECTIONS ========================= */

/* PROCESS STEPS */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.proc__step{background:var(--bg);padding:44px 32px;position:relative;transition:background .5s var(--ease)}
.proc__step:hover{background:var(--bg-2)}
.proc__step .n{font-family:var(--serif);font-size:40px;color:var(--accent);line-height:1}
.proc__step h3{font-family:var(--display);font-weight:300;font-size:21px;text-transform:uppercase;margin:26px 0 12px;letter-spacing:.03em}
.proc__step p{color:var(--muted);font-size:14px}
@media(max-width:900px){.proc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proc{grid-template-columns:1fr}}

/* LEADERSHIP CARDS */
.lead-cards{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.lead-card{display:grid;grid-template-columns:auto 1fr;gap:28px;border:1px solid var(--line);background:var(--bg-2);padding:30px;align-items:center;transition:.5s var(--ease)}
.lead-card:hover{border-color:var(--line-strong);background:var(--bg-3)}
.lead-card__img{width:clamp(110px,12vw,150px);aspect-ratio:3/4;overflow:hidden;background:var(--bg)}
.lead-card__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(25%)}
.lead-card .role{font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.lead-card h3{font-family:var(--display);font-weight:300;font-size:clamp(20px,1.8vw,26px);margin:10px 0 12px}
.lead-card p{color:var(--muted);font-size:14px}
@media(max-width:900px){.lead-cards{grid-template-columns:1fr}}
@media(max-width:420px){.lead-card{grid-template-columns:1fr}.lead-card__img{width:140px}}

/* SECTORS */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sector{background:var(--bg);padding:46px 30px;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.sector:hover{background:var(--bg-2)}
.sector .v{font-family:var(--serif);font-size:clamp(48px,5vw,80px);color:var(--text);line-height:1}
.sector .v em{color:var(--accent);font-style:normal}
.sector h3{font-family:var(--display);font-weight:300;font-size:18px;text-transform:uppercase;letter-spacing:.04em;margin-top:16px}
.sector p{color:var(--muted);font-size:13px;margin-top:8px}
.sector::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .6s var(--ease)}
.sector:hover::after{width:100%}
@media(max-width:900px){.sectors{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sectors{grid-template-columns:1fr}}

/* PULLQUOTE */
.pquote{text-align:center;max-width:24ch;margin:0 auto}
.pquote .mark{font-family:var(--serif);font-size:90px;line-height:.4;color:var(--accent);display:block;height:46px}
.pquote blockquote{font-family:var(--display);font-weight:200;font-size:clamp(26px,4vw,56px);line-height:1.15;text-transform:uppercase}
.pquote blockquote em{font-family:var(--serif);font-style:italic;color:var(--accent);text-transform:none}
.pquote .by{margin-top:34px;font-family:var(--display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pquote .by b{color:var(--text);font-weight:400;display:block;margin-bottom:4px;font-size:15px;letter-spacing:.06em}

/* CAPABILITIES SPLIT */
.capsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.capsplit__list{list-style:none;border-top:1px solid var(--line)}
.capsplit__list li{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:clamp(16px,1.5vw,21px);letter-spacing:.02em;transition:padding .4s var(--ease),color .4s}
.capsplit__list li:hover{padding-left:12px;color:var(--accent)}
.capsplit__list li .tick{color:var(--accent);font-size:13px;flex:0 0 auto}
@media(max-width:900px){.capsplit{grid-template-columns:1fr;gap:34px}}