/* Loop Market · style */
@font-face { font-family: "Climate Crisis"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/loop-market__fonts-climatecrisis-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/loop-market__fonts-poppins-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/loop-market__fonts-poppins-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/loop-market__fonts-poppins-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/loop-market__fonts-silkscreen-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --slime: #69FF3C;
  --pink: #FF82EB;
  --aqua: #AAFAFA;
  --grape: #9600FA;
  --white: #FFFFFF;
  --black: #000000;
  --ink-60: rgba(0, 0, 0, .6);
  --ink-28: rgba(0, 0, 0, .28);
  --paper-70: rgba(255, 255, 255, .7);
  --chrome: linear-gradient(100deg, #FFFFFF 0%, #AAFAFA 22%, #FFFFFF 34%, #000000 50%, #FF82EB 62%, #FFFFFF 74%, #AAFAFA 88%, #FFFFFF 100%);
  --f-display: "Climate Crisis", "Arial Black", sans-serif;
  --f-ui: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Silkscreen", "Courier New", monospace;
  --gut: clamp(16px, 2.2vw, 32px);
  --r-bubble: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--aqua); color: var(--black); font-family: var(--f-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
img.is-broken { visibility: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--black); color: var(--white); padding: 10px 16px; border-radius: var(--r-bubble); }
.skip:focus { left: 8px; }
.lbl { font-family: var(--f-label); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }

/* ---------- buttons: bubble UI ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--r-bubble); border: 0; font-family: var(--f-ui); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1); white-space: nowrap; }
.btn::after { content: ""; position: absolute; left: 14%; right: 14%; top: 5px; height: 34%; border-radius: var(--r-bubble); background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); pointer-events: none; }
.btn:hover { transform: scale(1.05) rotate(-2deg); }
.btn--black { background: var(--black); color: var(--white); }
.btn--black::after { opacity: .35; }
.btn--slime { background: var(--slime); color: var(--black); }
.btn--ghost { background: rgba(255,255,255,.55); color: var(--black); box-shadow: inset 0 0 0 1.5px var(--black); }
.pill { display: inline-block; padding: 7px 12px; border-radius: var(--r-bubble); }
.pill--pink { background: var(--pink); color: var(--black); }
.pill--slime { background: var(--slime); color: var(--black); }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 100; top: 14px; left: var(--gut); right: var(--gut); display: flex; align-items: center; gap: 18px; height: 58px; padding: 0 8px 0 18px; border-radius: var(--r-bubble); background: rgba(255,255,255,.62); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -10px 18px rgba(170,250,250,.45); transition: background .4s, color .4s; }
.nav.is-dark { background: rgba(0,0,0,.55); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__mark { width: 30px; height: 30px; }
.nav__word { font-family: var(--f-display); font-size: 15px; letter-spacing: .01em; line-height: 1; padding-top: 2px; }
.nav__links { display: flex; gap: 4px; margin-left: 10px; }
.nav__links a { text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: var(--r-bubble); transition: background .25s; }
.nav__links a:hover { background: var(--slime); color: var(--black); }
.nav__now { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.nav__now .lbl { font-size: 10px; margin-right: 4px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 100%; background: var(--grape); border-radius: 2px; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.nav.is-dark .eq i { background: var(--slime); }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.nav__cta { height: 42px; padding: 0 20px; font-size: 14px; }
.nav__menu { display: none; margin-left: auto; height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-bubble); background: var(--black); color: var(--white); font-weight: 600; cursor: pointer; }
.sheet { position: fixed; z-index: 99; top: 80px; left: var(--gut); right: var(--gut); padding: 14px; border-radius: 28px; background: var(--white); display: grid; gap: 4px; box-shadow: 0 0 0 1px var(--black); }
.sheet[hidden] { display: none; }
.sheet a { padding: 14px 16px; border-radius: 18px; text-decoration: none; font-weight: 600; font-size: 18px; }
.sheet a:hover { background: var(--slime); }

/* ---------- 1 · hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 680px; background: var(--aqua); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); pointer-events: none; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.track { position: absolute; inset: 0; pointer-events: none; }
.tcard { position: absolute; left: 50%; top: 0; width: 10.6vw; min-width: 92px; margin: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: auto; cursor: pointer; }
.tcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px rgba(0,0,0,.08); }
.tcard figcaption { margin-top: 8px; display: flex; gap: 6px; align-items: baseline; justify-content: center; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.tcard.is-now figcaption { opacity: 1; }
.tcard figcaption .lbl { font-size: 10px; }
.tcard.is-now img { box-shadow: 0 0 0 3px var(--black), 0 0 0 7px var(--slime); }
.hero__copy { position: absolute; z-index: 60; left: 0; right: 0; bottom: 6.5vh; text-align: center; padding: 0 var(--gut); pointer-events: none; }
.hero__copy a { pointer-events: auto; }
.hero__word { font-family: var(--f-display); font-weight: 400; font-size: 8.2vw; line-height: .9; letter-spacing: -.01em; white-space: nowrap; }
.hero__word .hw { display: inline-block; }
.hero__line { margin: 18px auto 0; max-width: 34em; font-size: 18px; font-weight: 500; }
.hero__ctas { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.player { position: absolute; z-index: 61; left: var(--gut); bottom: 4.2vh; display: flex; align-items: center; gap: 10px; width: 300px; padding: 10px; border-radius: 26px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--white); }
.player__btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--black); color: var(--white); display: grid; place-items: center; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.player__btn:hover { transform: scale(1.1); background: var(--grape); }
.player__btn svg { width: 16px; height: 16px; }
.player__info { flex: 1; min-width: 0; }
.player__top { display: flex; justify-content: space-between; }
.player__top .lbl { font-size: 9px; }
.player__title { font-weight: 600; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__meta { font-size: 11px; color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__bar { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(0,0,0,.12); overflow: hidden; }
.player__bar i { display: block; height: 100%; width: 0; background: var(--grape); border-radius: 4px; }
.hero__count { position: absolute; z-index: 61; right: var(--gut); bottom: 4.2vh; writing-mode: vertical-rl; transform: rotate(180deg); }

.hdeco { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.hstk { position: absolute; padding: 12px 20px 10px; border-radius: var(--r-bubble); border: 2px solid var(--black); font-family: var(--f-display); font-size: 20px; line-height: 1; white-space: nowrap; box-shadow: 4px 5px 0 var(--black); animation: bob 2.4s ease-in-out infinite alternate; }
.hstk--a { left: 13%; top: 24%; background: var(--slime); --r: -9deg; }
.hstk--b { right: 11%; top: 19%; background: var(--pink); --r: 7deg; animation-delay: -1.2s; }
.hsp { position: absolute; width: 46px; height: 46px; animation: twinkle 3.2s ease-in-out infinite; }
.hsp svg { width: 100%; height: 100%; }
.hsp--1 { left: 26%; top: 15%; } .hsp--2 { right: 24%; top: 44%; width: 30px; height: 30px; animation-delay: -1s; }
.hsp--3 { left: 7%; top: 47%; width: 34px; height: 34px; animation-delay: -2s; } .hsp--4 { right: 6%; top: 34%; width: 24px; height: 24px; animation-delay: -.5s; }
@keyframes bob { from { transform: translateY(-8px) rotate(var(--r)); } to { transform: translateY(8px) rotate(calc(var(--r) * 0.6)); } }
@keyframes twinkle { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .7; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* ticker (scroll-driven) */
.ticker { position: relative; z-index: 3; background: var(--slime); overflow: hidden; height: 64px; display: flex; align-items: center; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.ticker__row { display: flex; gap: 28px; align-items: center; white-space: nowrap; will-change: transform; font-family: var(--f-display); font-size: 22px; line-height: 1; padding-top: 3px; }
.ticker__row i { font-style: normal; color: var(--grape); font-family: var(--f-ui); font-size: 22px; }

/* ---------- 2 · drops ---------- */
.drops { position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 640px; background: var(--black); color: var(--white); overflow: hidden; }
.drops__list { position: absolute; inset: 0; }
.drop { position: absolute; inset: 0; visibility: hidden; --seam: 50%; }
.drop.is-active, .drop.is-leaving { visibility: visible; }
.drop.is-leaving { z-index: 1; } .drop.is-active { z-index: 2; }
.drop__half { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.drop__half img { width: 100%; height: 100%; object-fit: cover; }
.drop__half--first { left: 0; width: 56%; }
.drop__half--next { right: 0; width: 56%; }
.drop__half--next img { filter: grayscale(1) contrast(1.18) brightness(1.06); }
.duo { position: absolute; inset: 0; background: var(--grape); mix-blend-mode: multiply; }
.drop__half--next::after { content: ""; position: absolute; inset: 0; background: var(--pink); mix-blend-mode: screen; opacity: .12; pointer-events: none; }
.drop__seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.drop__seam polygon { fill: var(--white); filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.drop__title { position: absolute; left: 0; right: 0; bottom: 5vh; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 7vw; line-height: .9; white-space: nowrap; pointer-events: none; }
.dt { display: inline-block; }
.dt--a { color: var(--pink); }
.dt--b { color: var(--slime); }
.drops__ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.drops__ui > * { pointer-events: auto; }
.drops__head { position: absolute; top: 100px; left: var(--gut); max-width: 300px; font-size: 15px; font-weight: 500; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.drops__head .lbl { display: block; color: var(--slime); margin-bottom: 4px; }
.drops__l { position: absolute; top: 100px; left: calc(50% - 130px); }
.drops__r { position: absolute; top: 100px; left: calc(50% + 24px); }
.drops__side { position: absolute; top: 34vh; right: var(--gut); width: 260px; padding: 16px 18px; border-radius: 22px; background: rgba(0,0,0,.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px; }
.drops__side .lbl { color: var(--slime); margin-bottom: 6px; }
.drops__nav { position: absolute; right: var(--gut); top: calc(34vh + 170px); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.drops__bars { display: flex; gap: 6px; width: 260px; }
.drops__bars i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); overflow: hidden; }
.drops__bars b { display: block; height: 100%; width: 0; background: var(--slime); }

/* ---------- 3 · aisles ---------- */
.aisles { position: relative; z-index: 4; height: 112vh; min-height: 720px; background: var(--white); overflow: hidden; }
.aisles__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.aisles__fallback { position: absolute; left: var(--gut); top: 18vh; display: flex; flex-wrap: wrap; gap: 8px; max-width: 70vw; }
.aisles__fallback li { padding: 10px 18px; border-radius: var(--r-bubble); background: var(--grape); color: var(--white); font-family: var(--f-display); font-size: 20px; }
.has-gl .aisles__fallback { display: none; }
.aisles__tip { position: absolute; z-index: 3; left: 0; top: 0; padding: 8px 12px; border-radius: var(--r-bubble); background: var(--black); color: var(--white); pointer-events: none; opacity: 0; transform: translate(-9999px, 0); white-space: nowrap; }
.aisles__tip [data-aisle-count] { color: var(--slime); margin-left: 6px; }
.aisles__copy { position: absolute; z-index: 2; left: var(--gut); bottom: 8vh; max-width: 46vw; pointer-events: none; }
.aisles__copy .lbl { margin-bottom: 10px; }
.aisles__para { font-size: 2.4vw; line-height: 1.12; font-weight: 500; letter-spacing: -.035em; }

/* ---------- 4 · how ---------- */
.how { position: relative; z-index: 4; background: var(--slime); }
.how__stage { position: relative; height: 340vh; }
.how__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.how__label { position: absolute; top: 96px; left: var(--gut); }
.how__state { position: absolute; left: var(--gut); top: 128px; font-family: var(--f-display); font-weight: 400; font-size: 5.6vw; line-height: .98; color: var(--black); }
.ln { position: relative; display: block; width: max-content; overflow: hidden; }
.ln__t { display: block; }
.ln__c { position: absolute; inset: 0; background: var(--slime); }
.ln__l { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--grape); }
.how__cards { position: absolute; left: 50%; top: 22vh; width: 25vw; min-width: 280px; height: 33vw; min-height: 370px; transform: translateX(-10%); }
.hcard { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 6px; will-change: transform; }
.hcard__n { font-family: var(--f-label); font-size: 30px; line-height: 1; }
.hcard h3 { font-family: var(--f-display); font-weight: 400; font-size: 3vw; line-height: 1; margin-bottom: 10px; }
.hcard p { font-size: 14px; line-height: 1.45; max-width: 26em; }
.hcard--1 { background: var(--pink); color: var(--black); }
.hcard--2 { background: var(--black); color: var(--white); }
.hcard--3 { background: var(--grape); color: var(--white); }

/* ---------- 5 · swap ---------- */
.swap { position: relative; z-index: 4; background: var(--grape); color: var(--white); padding: 104px var(--gut) 48px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 4vw; row-gap: 26px; overflow: hidden; }
.swap__left { align-self: center; }
.swap__word { font-family: var(--f-display); font-weight: 400; font-size: 13vw; line-height: .86; font-variation-settings: "YEAR" 2050; margin: 8px 0 18px; color: var(--slime); }
.swap__lede { font-size: 17px; max-width: 30em; font-weight: 500; }
.swap__stats { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.swap__stats > div { padding: 14px 18px; border-radius: 22px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); min-width: 190px; }
.swap__stats dd { font-family: var(--f-display); font-size: 32px; line-height: 1.1; margin-top: 6px; color: var(--aqua); }
.swap__note { margin-top: 12px; font-size: 12px; opacity: .75; }
.swap__stage { position: relative; display: grid; place-items: center; min-height: 58vh; padding-bottom: 34px; }
.swap__stage::before { content: ""; position: absolute; width: min(40vw, 540px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(170,250,250,.38), rgba(170,250,250,0) 68%); }
.mannequin { position: relative; height: 56vh; min-height: 380px; max-height: 560px; width: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.mannequin.is-hot .mq-torso { filter: brightness(1.25); }
.swap__hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--r-bubble); background: var(--slime); color: var(--black); white-space: nowrap; }
.swap__fx { position: absolute; inset: -10%; width: 120%; height: 120%; pointer-events: none; }
.swap__rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding-top: 30px; position: relative; }
.swap__rail::before { content: ""; position: absolute; left: -2%; right: -2%; top: 4px; height: 8px; border-radius: 8px; background: var(--chrome); }
.scard { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.scard__hook { position: absolute; left: 50%; top: -30px; width: 26px; height: 30px; transform: translateX(-50%); color: var(--white); }
.scard__body { position: relative; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; border-radius: 20px; background: var(--white); color: var(--black); padding: 7px; cursor: grab; box-shadow: 0 10px 20px rgba(0,0,0,.25); will-change: transform; }
.scard.is-drag .scard__body { cursor: grabbing; }
.scard__body img { grid-row: 1 / 4; width: 58px; height: 72px; object-fit: cover; border-radius: 14px; pointer-events: none; -webkit-user-drag: none; }
.scard__name { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard__meta { font-size: 11px; color: var(--ink-60); white-space: nowrap; }
.scard__try { justify-self: start; height: 26px; padding: 0 12px; border: 0; border-radius: var(--r-bubble); background: var(--black); color: var(--white); font-size: 11px; font-weight: 600; cursor: pointer; margin-top: 3px; }
.scard__try:hover { background: var(--slime); color: var(--black); }
.scard.is-on .scard__body { box-shadow: 0 0 0 3px var(--slime), 0 10px 20px rgba(0,0,0,.25); }

/* ---------- 6 · closets ---------- */
.closets { position: relative; z-index: 4; background: var(--pink); padding: 110px var(--gut) 90px; }
.closets__hero { position: relative; min-height: 64vw; display: grid; place-items: center; }
.blob { width: 56vw; aspect-ratio: 1; clip-path: url(#blobClip); -webkit-clip-path: url(#blobClip); will-change: transform; }
.blob img { width: 100%; height: 100%; object-fit: cover; }
.closets__c { position: absolute; bottom: 0; max-width: 300px; font-size: 14px; font-weight: 500; }
.closets__c--l { left: 0; }
.closets__c--r { right: 0; text-align: right; }
.closets__c em { font-style: normal; }
.closets__index { margin-top: 70px; border-top: 2px solid var(--black); padding-top: 22px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.filters button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-bubble); border: 1.5px solid var(--black); background: transparent; font-weight: 500; font-size: 14px; cursor: pointer; transition: background .25s; }
.filters button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--black); }
.filters button[aria-checked="true"] { background: var(--black); color: var(--white); }
.filters button[aria-checked="true"]::before { background: var(--slime); border-color: var(--slime); }
.filters button:hover { background: var(--white); color: var(--black); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 18px; }
.tile a { display: block; border-radius: 26px; overflow: hidden; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.tile a:hover img { transform: scale(1.04); }
.tile p { margin-top: 10px; font-size: 13px; }
.tile p b { font-weight: 600; margin-right: 6px; }
.tile.is-hidden { display: none; }
.grid.is-hovering .tile { transition: filter .3s, opacity .3s; }
.grid.is-hovering .tile:not(:hover) { filter: blur(4px); opacity: .55; }
.tile--list a { aspect-ratio: 4 / 5; background: var(--slime); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; font-weight: 600; font-size: 20px; line-height: 1.2; }
.tile__plus { font-family: var(--f-display); font-size: 64px; line-height: 1; }

/* ---------- 7 · footer ---------- */
.foot { position: relative; z-index: 4; background: var(--black); color: var(--white); padding: 120px var(--gut) 28px; overflow: hidden; }
.stickers { position: absolute; inset: 0; pointer-events: none; }
.stk { position: absolute; width: 90px; height: 90px; will-change: transform; }
.foot__top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.news { max-width: 460px; }
.news .lbl { color: var(--slime); font-size: 12px; }
.news > p { margin-top: 8px; font-size: 18px; font-weight: 500; }
.news__row { display: flex; gap: 8px; margin-top: 18px; padding: 6px; border-radius: var(--r-bubble); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.news input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; background: transparent; color: var(--white); font: inherit; font-size: 16px; }
.news input::placeholder { color: rgba(255,255,255,.55); }
.news input:focus { outline: none; }
.news__ok { margin-top: 10px; font-size: 14px; color: var(--aqua); min-height: 1.5em; }
.foot__links { display: flex; gap: 60px; }
.foot__links div { display: grid; gap: 8px; align-content: start; }
.foot__links .lbl { color: var(--pink); }
.foot__links a { text-decoration: none; font-size: 15px; }
.foot__links a:hover { color: var(--slime); }
.foot__word { position: relative; z-index: 2; margin: 14vh 0 26px; font-family: var(--f-display); font-size: 8.8vw; line-height: .9; white-space: nowrap; text-align: center; overflow: hidden; padding-bottom: .04em; }
.foot__word span { display: inline-block; }
.foot__word .sp { width: .28em; }
.foot__word span:nth-child(4n+1) { color: var(--slime); } .foot__word span:nth-child(4n+2) { color: var(--pink); } .foot__word span:nth-child(4n+3) { color: var(--aqua); } .foot__word span:nth-child(4n) { color: var(--white); }
.foot__base { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; opacity: .8; border-top: 1px solid rgba(255,255,255,.25); padding-top: 16px; }

/* sparkle cursor */
.sparkles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 150; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav__links a { padding: 8px 8px; font-size: 13px; }
  .nav__now { display: none; }
}
@media (max-width: 991px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
  .swap { grid-template-columns: minmax(0, 1fr); }
  .swap__rail { grid-template-columns: repeat(7, 210px); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
  .swap__rail::before { left: 0; right: auto; width: calc(7 * 222px + var(--gut)); }
  .scard { scroll-snap-align: start; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .how__state { font-size: 7.4vw; }
  .how__cards { left: auto; right: var(--gut); transform: none; top: auto; bottom: 8vh; width: 46vw; height: 56vw; min-height: 0; }
  .hcard h3 { font-size: 5vw; }
  .aisles__copy { max-width: 80vw; }
  .aisles__para { font-size: 4vw; }
}
@media (max-width: 767px) {
  .nav { height: 52px; top: 10px; }
  .nav__word { font-size: 13px; }
  .hero { min-height: 640px; }
  .tcard { width: 22vw; min-width: 0; }
  .tcard figcaption { display: none; }
  .hero__word { font-size: 15.2vw; line-height: .92; }
  .hero__word .hw { display: block; }
  .hero__copy { bottom: 128px; }
  .hero__line { font-size: 15px; margin-top: 12px; }
  .hero__ctas { margin-top: 14px; }
  .hero__ctas .btn { height: 44px; padding: 0 18px; font-size: 14px; }
  .player { left: var(--gut); right: var(--gut); width: auto; bottom: 18px; }
  .hero__count { display: none; }
  .hstk { font-size: 13px; padding: 9px 14px 7px; }
  .hstk--a { left: 4%; top: 13%; } .hstk--b { right: 4%; top: 13%; }
  .hsp--1, .hsp--2 { display: none; }
  .ticker { height: 52px; }
  .ticker__row { font-size: 16px; }
  .drops { height: auto; min-height: 0; }
  .drops__list { position: relative; height: 100svh; min-height: 620px; }
  .drop__half--first { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 56%; }
  .drop__half--next { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 56%; }
  .drop__title { font-size: 12.6vw; bottom: auto; top: 50%; transform: translateY(-50%); line-height: .95; }
  .dt { display: block; }
  .drops__ui { position: absolute; }
  .drops__head { top: 78px; max-width: 70vw; font-size: 13px; }
  .drops__l { top: auto; bottom: calc(50% + 34px); left: var(--gut); }
  .drops__r { top: calc(50% + 34px); left: auto; right: var(--gut); }
  .drops__side { display: none; }
  .drops__nav { top: auto; bottom: 18px; right: var(--gut); left: var(--gut); flex-direction: row; align-items: center; }
  .drops__bars { width: auto; flex: 1; }
  .aisles { height: auto; min-height: 0; padding-bottom: 40px; }
  .aisles__gl { position: relative; height: 72svh; }
  .aisles__copy { position: relative; left: auto; bottom: auto; max-width: none; padding: 0 var(--gut); }
  .aisles__para { font-size: 6.4vw; }
  .how__stage { height: auto; }
  .how__sticky { position: relative; height: auto; padding: 96px var(--gut) 60px; }
  .how__label { position: static; margin-bottom: 10px; }
  .how__state { position: static; font-size: 8.4vw; }
  .how__cards { position: static; width: auto; height: auto; transform: none; display: grid; gap: 12px; margin-top: 36px; }
  .hcard { position: relative; inset: auto; min-height: 220px; }
  .hcard h3 { font-size: 10vw; }
  .swap { padding-top: 96px; row-gap: 20px; }
  .swap__word { font-size: 24vw; }
  .swap__lede { font-size: 15px; }
  .swap__stats > div { min-width: 0; flex: 1; }
  .swap__stats dd { font-size: 24px; }
  .swap__stage { min-height: 0; }
  .mannequin { height: 50vh; min-height: 340px; }
  .swap__rail { grid-template-columns: repeat(7, 200px); }
  .closets { padding-top: 90px; }
  .closets__hero { min-height: 0; display: block; }
  .blob { width: 92vw; margin: 0 auto; }
  .closets__c { position: static; margin-top: 16px; max-width: none; text-align: left; }
  .closets__c--r { text-align: left; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gut) * -1) 20px; padding: 0 var(--gut) 6px; }
  .filters button { flex: none; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .tile--list a { font-size: 15px; padding: 16px; }
  .tile__plus { font-size: 40px; }
  .foot { padding-top: 90px; }
  .foot__links { gap: 36px; }
  .foot__word { font-size: 14vw; margin-top: 10vh; line-height: .95; }
  .foot__word .sp { display: block; width: auto; height: 0; }
  .stk { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hstk { animation: none; transform: rotate(var(--r)); }
  .hsp { animation: none; }
  .eq i { animation: none; transform: scaleY(.6); }
  .btn, .tile img { transition: none; }
}

/* ?static freezes all CSS motion for screenshots */
.is-still *, .is-still *::before, .is-still *::after { animation: none !important; }

/* WordPress / Elementor compatibility: the active WordPress theme styles <body> and every heading as well
   (Twenty Twenty-Five sets body weight 300 and -0.1px tracking, and h1-h6 weight 400, -0.1px tracking,
   line-height 1.125 and preset sizes). This page's class rules set size, weight and line-height where it
   cares and rely on browser defaults for the rest, so restore those defaults at element level: every class
   rule above still wins (0,1,0 beats 0,0,3). Inert in a plain browser.
   Twenty Twenty-Five also sets text-wrap: pretty on blockquote, caption, figcaption, h1-h6 and p, which moves
   line breaks; the text-wrap rule puts back the browser default.
   The container rule also pins display: block: once Elementor generates the page's post CSS it turns that
   container into a wrapping flex column, which can shrink a section below its content. */
html body { font-weight: 400; letter-spacing: normal; }
html body :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; letter-spacing: normal; line-height: inherit; }
html body h1 { font-size: 2em; }
html body h2 { font-size: 1.5em; }
html body h3 { font-size: 1.17em; }
html body .elementor .e-con.e-parent:has(> .elementor-element [class^="uichemy-"]) { --display: block; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --row-gap: 0px; --column-gap: 0px; --gap: 0px 0px; }
html body :is(blockquote, caption, figcaption, h1, h2, h3, h4, h5, h6, p) { text-wrap: wrap; }