/* ===================================================================
   MFAZA — SERVICES page layouts (services2–services6). After style.css.
   accordion · bento · sticky split · zigzag · hover-swap
   =================================================================== */

/* ---------- A) ACCORDION ---------- */
.sv-acc{border-top:1px solid var(--line)}
.sv-accitem{border-bottom:1px solid var(--line)}
.sv-acchead{display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;padding:clamp(22px,2.8vw,38px) 4px;cursor:pointer}
.sv-acchead .n{font-family:var(--display);font-size:13px;letter-spacing:.12em;color:var(--accent)}
.sv-acchead h3{font-family:var(--display);font-weight:200;font-size:clamp(24px,3.4vw,52px);text-transform:uppercase;line-height:1;transition:color .35s}
.sv-acchead .pl{width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--accent);transition:.45s var(--ease)}
.sv-accitem.open .sv-acchead h3,.sv-acchead:hover h3{color:var(--accent)}
.sv-accitem.open .pl{transform:rotate(45deg);background:var(--accent);color:#111;border-color:var(--accent)}
.sv-accpanel{max-height:0;overflow:hidden;transition:max-height .7s var(--ease)}
.sv-accin{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);padding:6px 4px 40px;align-items:center}
.sv-accin p{color:var(--muted);max-width:52ch}
.sv-accin .img{overflow:hidden;aspect-ratio:16/10;background:var(--bg-2)}
.sv-accin .img img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%)}
@media(max-width:760px){.sv-acchead{grid-template-columns:44px 1fr auto}.sv-accin{grid-template-columns:1fr;gap:18px}}

/* ---------- B) BENTO ---------- */
.sv-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:16px}
.sv-bcell{position:relative;overflow:hidden;background:var(--bg-2)}
.sv-bcell img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%) brightness(.62);transition:transform 1.1s var(--ease),filter .6s}
.sv-bcell:hover img{transform:scale(1.05);filter:grayscale(0) brightness(.8)}
.sv-bcell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.2),transparent 40%,rgba(17,17,17,.9));z-index:1}
.sv-bcell__b{position:absolute;left:0;bottom:0;z-index:2;padding:26px;width:100%}
.sv-bcell__b .n{font-family:var(--serif);font-size:24px;color:var(--accent);line-height:1}
.sv-bcell__b h3{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.5vw,24px);text-transform:uppercase;margin:8px 0 6px}
.sv-bcell__b p{color:var(--muted);font-size:13px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.sv-bcell:hover .sv-bcell__b p{max-height:80px;opacity:1}
.sv-bcell.w2{grid-column:span 2}.sv-bcell.h2{grid-row:span 2}
@media(max-width:980px){.sv-bento{grid-template-columns:repeat(2,1fr)}.sv-bcell.w2{grid-column:span 2}}
@media(max-width:560px){.sv-bento{grid-template-columns:1fr;grid-auto-rows:230px}.sv-bcell.w2{grid-column:span 1}.sv-bcell.h2{grid-row:span 1}}

/* ---------- C) STICKY SPLIT ---------- */
.sv-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,5vw,80px);align-items:start}
.sv-split__aside{position:sticky;top:110px}
.sv-split__aside h2{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,52px);text-transform:uppercase;line-height:1.02;margin-bottom:24px}
.sv-split__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sv-split__list a{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:13px 0;border-bottom:1px solid var(--line);transition:.35s}
.sv-split__list a .n{font-size:11px;color:var(--accent)}
.sv-split__list a:hover,.sv-split__list a.active{color:var(--accent);padding-left:8px}
.sv-split__main{display:flex;flex-direction:column;gap:clamp(40px,6vw,90px)}
.sv-detail{scroll-margin-top:100px}
.sv-detail__img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--bg-2);margin-bottom:24px}
.sv-detail__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%);transition:transform 1.2s var(--ease)}
.sv-detail__img:hover img{transform:scale(1.04)}
.sv-detail .n{font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.sv-detail h3{font-family:var(--display);font-weight:200;font-size:clamp(26px,3vw,46px);text-transform:uppercase;margin:10px 0 14px;line-height:1.03}
.sv-detail p{color:var(--muted);max-width:56ch}
@media(max-width:900px){.sv-split{grid-template-columns:1fr}.sv-split__aside{position:static}.sv-split__list{display:none}}

/* ---------- D) ZIGZAG ---------- */
.sv-zig{display:flex;flex-direction:column;gap:clamp(40px,6vw,100px)}
.sv-zrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.sv-zrow:nth-child(even) .sv-zimg{order:2}
.sv-zimg{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.sv-zimg img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%);transition:transform 1.2s var(--ease)}
.sv-zimg:hover img{transform:scale(1.05)}
.sv-zbody .n{font-family:var(--serif);font-size:clamp(40px,5vw,80px);color:transparent;-webkit-text-stroke:1px rgba(200,178,138,.55);line-height:.9;display:block;margin-bottom:16px}
.sv-zbody h3{font-family:var(--display);font-weight:200;font-size:clamp(26px,3vw,46px);text-transform:uppercase;margin-bottom:16px;line-height:1.03}
.sv-zbody p{color:var(--muted);max-width:46ch;margin-bottom:18px}
@media(max-width:860px){.sv-zrow{grid-template-columns:1fr;gap:20px}.sv-zrow:nth-child(even) .sv-zimg{order:0}}

/* ---------- E) HOVER-SWAP ---------- */
.sv-swap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:start}
.sv-swap__list{border-top:1px solid var(--line)}
.sv-swap__item{display:flex;align-items:center;gap:22px;padding:clamp(16px,2vw,26px) 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:padding .4s var(--ease)}
.sv-swap__item .n{font-family:var(--display);font-size:12px;letter-spacing:.12em;color:var(--accent);width:34px;flex:0 0 auto}
.sv-swap__item h3{font-family:var(--display);font-weight:200;font-size:clamp(22px,2.6vw,40px);text-transform:uppercase;line-height:1;transition:color .35s}
.sv-swap__item:hover h3,.sv-swap__item.active h3{color:var(--accent)}
.sv-swap__item.active{padding-left:14px}
.sv-swap__media{position:sticky;top:110px}
.sv-swap__imgwrap{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.sv-swap__imgwrap 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)}
.sv-swap__imgwrap img.show{opacity:1;transform:scale(1)}
.sv-swap__desc{margin-top:22px}
.sv-swap__desc .n{font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.sv-swap__desc h4{font-family:var(--display);font-weight:200;font-size:clamp(22px,2vw,30px);text-transform:uppercase;margin:8px 0 12px}
.sv-swap__desc p{color:var(--muted);max-width:48ch}
@media(max-width:900px){.sv-swap{grid-template-columns:1fr}.sv-swap__media{position:static;margin-top:20px}}