/* MUFT.AI apparel funnel v5: real-asset hero video, Aeon-style IN/OUT before/after, Selected Work rows.
   Loads after v3.css; same palette (black + gold) and fonts (Space Grotesk + Space Mono). */

/* ---------- Hero video ---------- */
.hero__media{background:#0d0d0c}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
@media (min-width:1000px){
  .hero__vid{object-position:50% 28%}
}
/* Phones/tablets: video full-bleed behind the copy, dark overlay for legibility */
@media (max-width:999px){
  .hero{display:block;position:relative;min-height:100svh;overflow:hidden}
  .hero__media,.hero__media[style]{display:block!important;position:absolute!important;inset:0;height:auto!important;min-height:0!important;z-index:0}
  .hero__media::after{background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.35) 30%,rgba(10,10,10,.78) 62%,rgba(10,10,10,.96) 100%)!important}
  .hero__copy{position:relative;z-index:2;min-height:100svh;margin-top:0!important;padding-top:6rem!important;padding-bottom:2.2rem!important;justify-content:flex-end}
  .hero__ai{top:5rem!important;bottom:auto!important;right:var(--pad)!important;left:auto!important;display:inline-block!important}
  .hero__lead{color:#ebe7e0}
}
@media (max-width:699px){
  .hero .display{font-size:2.35rem}
  .hero__works,.hero__cta .ig{display:revert}
  .hero__lead{order:0}
}

/* ---------- Before / after (Aeon IN -> OUT) ---------- */
.ba5{display:grid;gap:clamp(14px,2vw,24px)}
.ba5__tag{display:inline-block;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin-bottom:12px}
.ba5__cap{color:#9a9690;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin-top:12px}
.ba5 ul{list-style:none}
.ba5__in-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ba5__in-grid img{aspect-ratio:1;object-fit:cover;width:100%;height:100%;filter:saturate(.85)}
.ba5__arrow{color:var(--gold);font-size:clamp(26px,2.6vw,40px);line-height:1;justify-self:start}
.ba5__out-grid{display:grid;grid-template-columns:1fr;gap:8px}
.ba5__film{position:relative;overflow:hidden;background:#151514;aspect-ratio:9/16;max-height:80svh}
.ba5__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba5__shots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ba5__shots img{aspect-ratio:3/4;object-fit:cover;width:100%;height:100%;transition:opacity var(--t) var(--ease)}
.ba5__shots li:hover img{opacity:.85}
@media (min-width:700px){
  .ba5__in-grid{grid-template-columns:repeat(6,1fr);max-width:820px}
  /* film left (9:16) is sized to match the height of the 2x2 grid of 3:4 shots on the right */
  .ba5__out-grid{grid-template-columns:1.5fr 2fr;align-items:stretch}
  .ba5__film{aspect-ratio:auto;max-height:none;height:100%}
}

/* ---------- Selected work ---------- */
.wk{border-top:1px solid var(--line)}
.wk-row{display:grid;gap:16px;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--line)}
.wk-meta{display:flex;flex-direction:column;gap:.35rem}
.wk-n{color:var(--faint);font-size:12px;letter-spacing:.12em}
.wk-title{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:.88;font-size:clamp(2.1rem,3.4vw,3.6rem);display:flex;flex-direction:column;align-items:flex-start}
.wk-shoot{font-family:var(--fm);font-weight:400;font-size:clamp(.68rem,.8vw,.8rem);letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-top:.7rem;display:inline-flex;align-items:center;gap:.6rem}
.wk-shoot::before{content:'';width:2.2rem;height:1px;background:var(--gold);opacity:.7}
.wk-meta p{color:#9a9690;letter-spacing:.12em;text-transform:uppercase;font-size:12px;line-height:1.6;margin-top:.6rem}
.wk-strip{list-style:none;display:grid;gap:8px;grid-template-columns:repeat(6,62%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wk-strip::-webkit-scrollbar{display:none}
.wk-strip li{scroll-snap-align:start;overflow:hidden;background:#151514}
.wk-strip img{aspect-ratio:3/4;object-fit:cover;width:100%;height:100%;transition:transform .8s var(--ease),opacity var(--t)}
.wk-strip li:hover img{transform:scale(1.035)}
@media (min-width:700px){.wk-strip{grid-template-columns:repeat(6,30%)}}
@media (min-width:1000px){
  .wk-row{grid-template-columns:minmax(220px,1fr) 4fr;align-items:start;gap:clamp(16px,2.4vw,40px)}
  .wk-strip{grid-template-columns:repeat(6,1fr);overflow:visible}
}
@media (max-width:699px){.ba5-sec .display--md,#gallery .display--md{margin-bottom:1.2rem}}

/* =====================================================================
   v6: publish polish (Aeon audit) + phone hero simplification
   ===================================================================== */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.igcard__av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:#1a1a19;border:1px solid var(--line-2)}
.igcard{transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.igcard:hover{border-color:var(--line-p);background:rgba(245,185,66,.04)}
.ig__av{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2)}
/* Aeon-like tighter display type */
.display{letter-spacing:-.045em;line-height:.88}
.hero .display{line-height:.86}
.sec-label{letter-spacing:.16em}
.statement{letter-spacing:-.04em}
/* quiet motion + hover */
.reveal{transform:translateY(26px)}
.wk-strip li,.ba5__shots li,.ba5__in-grid li{overflow:hidden}
.ba5__in-grid img,.ba5__shots img{transition:transform .8s var(--ease),opacity var(--t) var(--ease)}
.wk-shoot::before{transition:width .6s var(--ease)}
.minicta a{transition:letter-spacing .4s var(--ease)}
@media (hover:hover){
  .ba5__shots li:hover img,.ba5__in-grid li:hover img{transform:scale(1.035);opacity:1}
  .wk-row:hover .wk-shoot::before{width:3.4rem}
  .minicta a:hover{letter-spacing:.14em}
}
img[loading=lazy]{background:#141413}
/* before row ~20% larger */
@media (min-width:700px){.ba5__in-grid{max-width:985px;gap:8px}}
.form-privacy{color:var(--muted);margin-top:.4rem}
/* nav: logo + CTA only (tagline collided with hero video) */
.nav__tag{display:none!important}
/* phone hero: video, eyebrow, headline, one CTA */
@media (max-width:699px){
  .hero__lead,.hero__works,.hero__cta .ig,.hero__ai,.hero__micro{display:none!important}
  .hero__copy{gap:1rem!important;padding-bottom:2.6rem!important}
  .hero .display{font-size:clamp(2.6rem,12vw,3.4rem);line-height:.86}
  .hero .eyebrow{font-size:.78rem;letter-spacing:.14em}
  .hero__cta{width:100%}
  .hero__media::after{background:linear-gradient(180deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,.55) 58%,rgba(10,10,10,.95) 100%)!important}
  .nav{padding:.6rem var(--pad)}
  .nav .btn--sm{min-height:36px;padding:.5rem .8rem;font-size:.66rem;letter-spacing:.1em;background:transparent;color:var(--txt);border:1px solid var(--line-2)}
  .nav .btn--sm .br{display:none}
  .nav__logo img{width:84px;height:auto}
}

/* site nav (links back to themuftai.com) */
.nav__right{display:flex;align-items:center;gap:.6rem}
.nav__links{display:flex;gap:1.9rem;font-family:'Space Grotesk',var(--fd);font-size:.86rem;letter-spacing:.01em;position:absolute;left:50%;transform:translateX(-50%)}
.nav__links a{color:rgba(255,255,255,.72);position:relative;padding:.3rem 0;transition:color var(--t) var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:#fff}
.nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold,#f5b942)}
.nav__burger{display:none;width:36px;height:36px;border:1px solid var(--line-2);background:transparent;border-radius:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav__burger span{display:block;width:15px;height:1.5px;background:#fff;transition:transform .3s var(--ease)}
.nav.is-open .nav__burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:959px){
  .nav__burger{display:flex}
  .nav__links{position:fixed;left:0;right:0;top:0;transform:none;padding:4.4rem var(--pad) 1.6rem;flex-direction:column;gap:0;background:rgba(10,10,10,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);font-size:1.5rem;z-index:-1;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
  .nav__links a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav__links a.is-active::after{display:none}.nav__links a.is-active{color:var(--gold,#f5b942)}
  .nav.is-open .nav__links{opacity:1;visibility:visible}
}
.nav__links a{text-decoration:none}