/* ==========================================================================
   MUAMS — Home page · v2
   ========================================================================== */

/* ---------- hero: full-width banner — a collage of real shirt photos with a two-part title,
   or the banner pictures set in the admin panel (Website → Homepage). 1440×640 on desktop, 16:9-ish on phones. ---------- */
.hc { position: relative; margin-top: var(--header-h); background: #1a1916; overflow: hidden; }
.hc__track { position: relative; width: 100%; aspect-ratio: 1440 / 640; min-height: 360px; max-height: calc(100svh - var(--header-h) - 72px); }
.hc__slide { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.hc__slide.is-on { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; z-index: 1; }
.hc__collage { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; }
.hc__collage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.hc__collage img + img { box-shadow: -1px 0 0 rgba(255, 255, 255, .08); }
.hc__pic, .hc__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc__pic img { object-fit: cover; object-position: center; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.hc__shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 52%, rgba(10, 10, 9, .46), rgba(10, 10, 9, .14) 70%), linear-gradient(180deg, rgba(10, 10, 9, .08), rgba(10, 10, 9, .28)); }
.hc__t { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; transform: translate(-50%, -54%); white-space: nowrap; pointer-events: none; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hc__l1 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 5.3vw, 86px); line-height: 1; letter-spacing: .2em; text-transform: uppercase; margin-right: -.06em;
  opacity: 0; transform: translateY(14px); transition: opacity .9s ease .25s, transform 1.1s var(--ease) .25s; }
.hc__l2 { font-family: "Allura", "Brush Script MT", cursive; font-weight: 400; font-size: clamp(58px, 10vw, 164px); line-height: .7; margin: 0 0 0 -.12em; transform: translate(-14px, .3em); opacity: 0;
  transition: opacity 1s ease .5s, transform 1.2s var(--ease) .5s; }
.hc__slide:hover .hc__collage img, .hc__slide:hover .hc__pic img { transform: scale(1.02); }
.hc.is-ready .hc__slide.is-on .hc__collage img, .hc.is-ready .hc__slide.is-on .hc__pic img { transform: scale(1); }
.hc.is-ready .hc__slide.is-on .hc__l1 { opacity: 1; transform: none; }
.hc.is-ready .hc__slide.is-on .hc__l2 { opacity: 1; transform: translate(0, .3em); }
html:not(.js) .hc__l1, html:not(.js) .hc__l2 { opacity: 1; }   /* no JavaScript: show the title straight away */
.hc__slide:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }
.hc__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.hc__dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .55); overflow: hidden; cursor: pointer; transition: width .4s ease, background .3s; }
.hc__dots button.is-on { width: 30px; background: rgba(255, 255, 255, .35); }
.hc__dots button i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hc__dots button.is-on i { animation: hc-dot var(--hc-dur, 6s) linear forwards; }
.hc.is-hold .hc__dots button.is-on i { animation-play-state: paused; }
.hc.no-auto .hc__dots button.is-on i { animation: none; transform: scaleX(1); }
@keyframes hc-dot { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hc__slide, .hc__collage img, .hc__pic img, .hc__l1, .hc__l2 { transition: none; } }

@media (max-width: 749px) {
  .hc__track { aspect-ratio: 375 / 222; min-height: 0; max-height: none; }
  .hc__collage img { object-position: 50% 8%; }
  .hc__l1 { font-size: clamp(22px, 7.4vw, 40px); letter-spacing: .16em; }
  .hc__l2 { font-size: clamp(44px, 14.5vw, 76px); }
  .hc__dots { bottom: 8px; }
}

/* ---------- flat info strip under the banner ---------- */
.strip { background: #0d0d0d; color: var(--accent); padding: 13px 0; border-bottom: 1px solid #000; }
.strip .marquee__group span { font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: .01em; padding: 0 clamp(24px, 3vw, 44px); }

/* ---------- shop the collection: category tiles ---------- */
.collection { padding-top: clamp(56px, 7vw, 100px); }
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.3vw, 18px); }
.cat-tile { position: relative; display: block; aspect-ratio: .8; border-radius: 10px; overflow: hidden; background: var(--bone); color: #fff; isolation: isolate; }
.cat-tile__img { position: absolute; inset: 0; z-index: -2; }
.cat-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat-tile:hover .cat-tile__img img { transform: scale(1.07); }
.cat-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7)); }
.cat-tile__n { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.cat-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px clamp(16px, 2vw, 26px); text-align: center; }
.cat-tile__name { font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 32px); line-height: 1; letter-spacing: -.01em; }
.cat-tile__name span { display: block; font-family: "Allura", "Brush Script MT", cursive; font-weight: 400; text-transform: none; font-size: 1.35em; line-height: .8; margin-top: -.02em; color: var(--accent); }
@media (max-width: 899px) { .cat-tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- shop the latest (filter) ---------- */
.latest__tabs { margin-bottom: clamp(24px, 3vw, 36px); }
.pills { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex-shrink: 0; height: 46px; padding: 0 24px; border-radius: 999px; border: 2px solid #cfcfcf; background: #fff; font-size: 15.5px; font-weight: 500; color: #222; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.pill:hover { border-color: #111; }
.pill.is-active { background: #111; border-color: #111; color: #fff; }
@media (max-width: 640px) { .pill { height: 40px; padding: 0 18px; font-size: 14px; } }
.latest-grid { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.latest-grid.is-out { opacity: 0; transform: translateY(18px); }

/* ---------- loupe ---------- */
.loupe__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.loupe__points { margin-top: 36px; display: grid; gap: 4px; }
.loupe__points li { display: flex; gap: 18px; align-items: flex-start; padding: 16px; border-radius: 14px; cursor: pointer; transition: background .4s var(--ease); }
.loupe__points li:hover, .loupe__points li.is-on { background: rgba(255, 255, 255, .06); }
.loupe__points li.is-on .num-badge { background: var(--accent); color: var(--ink); box-shadow: none; }
.loupe__points b { display: block; font-family: var(--serif); font-weight: 600; font-size: 17px; color: #fff; }
.loupe__points p { font-size: 14.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.loupe__stage { position: relative; }
.loupe__frame { position: relative; aspect-ratio: 853 / 1280; max-height: 84vh; margin-left: auto; border-radius: 24px; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.loupe__frame > img { width: 100%; height: 100%; object-fit: cover; }
.loupe__lens { position: absolute; left: 0; top: 0; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px rgba(17, 17, 17, .3), 0 30px 60px -10px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.5); transition: opacity .35s var(--ease), transform .45s var(--ease); z-index: 3; }
.loupe__frame.is-lens .loupe__lens { opacity: 1; transform: scale(1); }
.spot { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease-back); }
.spot::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent); animation: pulse 2.4s var(--ease) infinite; }
.spot:hover, .spot.is-on { transform: scale(1.18); }
.loupe__hint { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); text-align: right; }
@media (max-width: 899px) { .loupe__grid { grid-template-columns: 1fr; } .loupe__stage { order: -1; } .loupe__frame { max-height: none; } }

/* ---------- occasions ---------- */
.occ { display: flex; gap: 12px; height: min(70vh, 660px); }
.occ__i { position: relative; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; color: #fff; transition: flex 1.1s var(--ease); isolation: isolate; }
.occ__i.is-active { flex: 3.6; }
.occ__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.6s var(--ease); }
.occ__i:hover img { transform: scale(1.05); }
.occ__i::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 17, .05) 30%, rgba(17, 17, 17, .82)); }
.occ__label { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.4vw, 32px); }
.occ__top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; }
.occ__top m-icon { --is: 22px; color: var(--ink); padding: 8px; box-sizing: content-box; background: var(--accent); border-radius: 10px; }
.occ__n { font-family: var(--serif); font-weight: 700; font-size: 15px; color: #fff; background: rgba(17, 17, 17, .45); padding: 4px 10px; border-radius: 8px; }
.occ__label h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -.035em; font-size: clamp(28px, 3vw, 48px); line-height: 1; white-space: nowrap; }
.occ__label p { max-width: 34ch; margin-top: 10px; color: rgba(255, 255, 255, .82); font-size: 15px; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.occ__label .link-u { margin-top: 16px; color: #fff; opacity: 0; transition: opacity .6s var(--ease) .1s; }
.occ__i.is-active .occ__label p, .occ__i.is-active .occ__label .link-u { opacity: 1; transform: none; }
.occ__i:not(.is-active) .occ__label h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(24px, 2.2vw, 34px); }
@media (max-width: 899px) {
  .occ { flex-direction: column; height: auto; gap: 10px; }
  .occ__i { flex: none; height: auto; min-height: 112px; transition: min-height 1s var(--ease); }
  .occ__i.is-active { min-height: 330px; }
  .occ__label { padding: 22px; }
  .occ__label h3, .occ__i:not(.is-active) .occ__label h3 { writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: clamp(24px, 6vw, 36px); line-height: 1.08; }
  .occ__label p { max-width: 34ch; }
  .occ__i.is-active .occ__label p { opacity: 1; transform: none; }
  .occ__i.is-active .occ__label .link-u { opacity: 1; }
}

/* ---------- group orders band ---------- */
.bulk-band { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
.bulk-band__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.bulk-band p.b { margin-top: 20px; max-width: 40ch; font-size: 17.5px; color: rgba(17, 17, 17, .78); }
.bulk-band .eyebrow { color: var(--ink); }
.bulk-band .eyebrow::before { background: var(--ink); }
.fan { position: relative; height: clamp(340px, 38vw, 520px); }
.fan__c { position: absolute; left: 50%; bottom: 0; width: 44%; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; transform-origin: 50% 130%; transform: translateX(-50%) rotate(calc((var(--i) - 2) * 10deg)); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 60ms); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); border: 5px solid #fff; }
.fan__c img { width: 100%; height: 100%; object-fit: cover; }
.fan:hover .fan__c { transform: translateX(-50%) rotate(calc((var(--i) - 2) * 17deg)) translateY(-10px); transition-delay: 0s; }
.js .fan[data-reveal] { opacity: 1; transform: none; }
.js .fan:not(.is-in) .fan__c { transform: translateX(-50%) rotate(0deg) translateY(60px); }
@media (max-width: 899px) { .bulk-band__grid { grid-template-columns: 1fr; } .fan { height: 300px; margin-top: 30px; } }

/* ---------- quotes ---------- */
.quotes__stage { position: relative; min-height: clamp(300px, 26vw, 340px); margin-top: 32px; }
.quotes__stage > m-icon { --is: 48px; color: var(--accent); margin: 0 auto 24px; display: flex; }
.quote { position: absolute; left: 0; right: 0; top: 76px; opacity: 0; transform: translateY(24px); filter: blur(8px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); pointer-events: none; }
.quote.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.quote p { font-family: var(--serif); font-weight: 600; font-size: clamp(1.45rem, 2.7vw, 2.4rem); line-height: 1.22; letter-spacing: -.025em; color: var(--ink); }
.quote footer { margin-top: 24px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.quote footer .stars { color: var(--accent); letter-spacing: 3px; margin-right: 10px; }
.quote footer a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.quotes__nav { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.quotes__nav button { width: 54px; height: 20px; position: relative; }
.quotes__nav button::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: var(--line-2); }
.quotes__nav button i { position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.quotes__nav button.is-on i { animation: qprog 6.5s linear forwards; }
@keyframes qprog { to { transform: scaleX(1); } }
@media (max-width: 640px) { .quote { top: 66px; } .quotes__stage { min-height: 400px; } }

/* ---------- instagram ---------- */
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.insta__t { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.insta__in { position: absolute; inset: 0; display: block; }
.insta__t img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.insta__in::after { content: ''; position: absolute; inset: 0; background: rgba(17, 17, 17, .4); opacity: 0; transition: opacity .5s; }
.insta__t m-icon { position: absolute; left: 50%; top: 50%; z-index: 2; --is: 34px; color: #fff; transform: translate(-50%, -30%) scale(.6); opacity: 0; transition: transform .6s var(--ease-back), opacity .4s; }
.insta__t:hover img { transform: scale(1.1); }
.insta__t:hover .insta__in::after { opacity: 1; }
.insta__t:hover m-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 899px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- faq teaser ---------- */
.faq-teaser__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.faq-teaser__grid .lead { margin: 20px 0 30px; }
@media (max-width: 899px) { .faq-teaser__grid { grid-template-columns: 1fr; } }

/* ---------- why muams (trust row) ---------- */
.why { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.why__i { display: flex; gap: 16px; align-items: flex-start; padding: clamp(26px, 3vw, 40px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--line); }
.why__i:first-child { border-left: 0; padding-left: 0; }
.why__i > m-icon { --is: 24px; padding: 10px; box-sizing: content-box; border-radius: 12px; background: var(--accent-soft); color: var(--ink); transition: background .4s, transform .6s var(--ease-back); }
.why__i:hover > m-icon { background: var(--accent); transform: rotate(-8deg) scale(1.06); }
.why__i b { display: block; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.why__i p { margin-top: 3px; font-size: 14px; color: var(--stone); line-height: 1.5; }
@media (max-width: 899px) { .why__grid { grid-template-columns: 1fr 1fr; } .why__i:nth-child(3) { border-left: 0; padding-left: 0; } .why__i:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .why__i { flex-direction: column; gap: 10px; } }