/* MAK Toys — claymorphism.
   Every surface is soft, inflated clay sitting on the cream ground of the Master World:
   a white highlight pressed into the top-left, a tinted shade pooled bottom-right, and a
   warm, blurred lift underneath. Inputs are the reverse (pressed into the clay).
   Light always comes from the top-left, in RTL too: it is physical light, not reading order. */

@font-face { font-family: "Nunito"; src: url(/assets/fonts/nunito-latin.woff2) format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url(/assets/fonts/nunito-cyrillic.woff2) format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Lalezar"; src: url(/assets/fonts/lalezar-arabic.woff2) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Vazirmatn"; src: url(/assets/fonts/vazirmatn.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ground: #EED6B6;          /* the Master World's cream — film and page are one surface */
  --ground-2: #E6C9A2;
  --cream-clay: #FFF6EC;
  --ink: #3A2A1E;
  --mute: #7A5F4B;
  --orange: #FF7A2F;
  --shade: #7A3F12;           /* the warm brown every shadow is mixed from */

  --f-display: "Nunito", "Vazirmatn", system-ui, sans-serif;
  --f-body: "Nunito", "Vazirmatn", system-ui, sans-serif;
  --d-weight: 900;
  --d-leading: .98;
  --d-track: -0.03em;

  --t-sm: .9rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.6rem, 2.6vw, 2.2rem);
  --t-2xl: clamp(2.5rem, 5vw, 4.6rem);
  --t-hero: clamp(2.9rem, 6.6vw, 6.6rem);

  --gutter: clamp(18px, 4.4vw, 72px);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --clay: var(--cream-clay);
  --tone: var(--ink);
}
:lang(fa), :lang(ar) {
  --f-display: "Lalezar", "Vazirmatn", system-ui, sans-serif;
  --f-body: "Vazirmatn", system-ui, sans-serif;
  --d-weight: 400;
  --d-leading: 1.3;
  --d-track: 0;
  --t-hero: clamp(2.8rem, 6.4vw, 6.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 600 var(--t-base)/1.6 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body:lang(fa), body:lang(ar) { font-weight: 500; line-height: 1.85; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: var(--d-weight); line-height: var(--d-leading); letter-spacing: var(--d-track); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 12px; }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 99px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the clay material ---------- */
.clay {
  background: var(--clay);
  box-shadow:
    0 26px 44px -20px color-mix(in srgb, var(--clay) 30%, var(--shade) 55%),
    inset 9px 11px 16px -4px rgba(255, 255, 255, .78),
    inset -10px -13px 22px -6px color-mix(in srgb, var(--clay) 45%, var(--shade) 30%);
}
.clay-in {
  background: color-mix(in srgb, var(--clay) 82%, var(--shade) 6%);
  box-shadow: inset 7px 9px 14px -2px color-mix(in srgb, var(--clay) 40%, var(--shade) 30%), inset -6px -7px 12px rgba(255, 255, 255, .85);
}

/* ---------- buttons: puffy, they spring up and press in ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 0;
  font: 800 1rem/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: transform .45s var(--spring), box-shadow .3s var(--ease), filter .3s; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(2px) scale(.97); transition-duration: .12s; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .9rem; }
.btn--orange { color: #fff; background: radial-gradient(120% 140% at 30% 20%, #FFA36A 0%, #FF7A2F 45%, #EC5F1C 100%);
  box-shadow: 0 18px 30px -12px rgba(226, 88, 26, .65), inset 6px 8px 12px -2px rgba(255, 255, 255, .5), inset -6px -9px 14px -4px rgba(150, 45, 0, .4);
  text-shadow: 0 1px 0 rgba(150, 45, 0, .3); }
.btn--orange:active { box-shadow: 0 8px 14px -8px rgba(226, 88, 26, .6), inset 4px 6px 10px rgba(150, 45, 0, .35), inset -3px -4px 8px rgba(255, 255, 255, .25); }
.btn--clay { --clay: var(--cream-clay); color: var(--ink); background: var(--clay);
  box-shadow: 0 16px 28px -16px color-mix(in srgb, var(--clay) 30%, var(--shade) 55%), inset 6px 8px 12px -2px rgba(255, 255, 255, .9), inset -6px -8px 14px -4px color-mix(in srgb, var(--clay) 45%, var(--shade) 30%); }
.btn--clay:active { box-shadow: inset 5px 7px 12px color-mix(in srgb, var(--clay) 40%, var(--shade) 30%), inset -4px -5px 10px rgba(255, 255, 255, .8); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.chip { --clay: var(--cream-clay); display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 .85rem/1 var(--f-body); color: var(--mute); text-decoration: none; background: transparent; transition: background-color .3s, color .3s, box-shadow .3s, transform .4s var(--spring); }
.chip:hover { color: var(--ink); transform: translateY(-1px); }
.chip.is-on, .chip[aria-current="true"] { color: var(--ink); background: var(--clay);
  box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--clay) 30%, var(--shade) 55%), inset 4px 5px 8px -2px rgba(255, 255, 255, .85), inset -4px -6px 10px -4px color-mix(in srgb, var(--clay) 45%, var(--shade) 30%); }

/* ---------- top bar: one floating clay capsule ---------- */
.bar { position: fixed; inset-inline: 0; top: 14px; z-index: 100; padding-inline: var(--gutter); pointer-events: none; }
.bar__pill { --clay: rgba(255, 246, 236, .9); pointer-events: auto; max-width: 1240px; margin-inline: auto; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
[dir="rtl"] .bar__pill { padding: 8px 18px 8px 8px; }
.bar__logo img { height: 40px; width: auto; }
.bar__chapters, .bar__nav { display: flex; gap: 4px; margin-inline: auto; }
.is-film .bar__nav, body:not(.is-film) .bar__chapters { display: none; }
.langs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.langs { --clay: #F6E3CF; background: var(--clay); box-shadow: inset 4px 5px 9px -2px rgba(122, 63, 18, .22), inset -4px -4px 8px rgba(255, 255, 255, .85); }
.langs a { min-width: 34px; height: 32px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; text-decoration: none; font: 800 .75rem/1 "Nunito", sans-serif; color: var(--mute); transition: background-color .3s, color .3s; }
.langs a:lang(fa), .langs a:lang(ar) { font: 500 .95rem/1 "Vazirmatn", sans-serif; }
.langs a[aria-current="page"] { color: var(--ink); background: var(--cream-clay); box-shadow: 0 6px 10px -6px rgba(122, 63, 18, .5), inset 3px 3px 6px rgba(255, 255, 255, .9); }

/* ---------- the film ---------- */
.film { position: relative; height: 100vh; }
.film__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ground); }
.film__stage { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; opacity: 0; }
.scene.is-on { opacity: 1; }
.scene__still, .scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%;
  -webkit-mask: radial-gradient(140% 125% at 50% 46%, #000 58%, transparent 98%); mask: radial-gradient(140% 125% at 50% 46%, #000 58%, transparent 98%); }
.scene__video { z-index: 1; }
.scene.has-clip .scene__still { visibility: hidden; }
.film__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(238, 214, 182, .92) 0%, rgba(238, 214, 182, .55) 26%, rgba(238, 214, 182, 0) 50%),
              linear-gradient(0deg, rgba(238, 214, 182, .85) 0%, rgba(238, 214, 182, 0) 30%); }
[dir="rtl"] .film__veil { background: linear-gradient(-90deg, rgba(238, 214, 182, .92) 0%, rgba(238, 214, 182, .55) 26%, rgba(238, 214, 182, 0) 50%),
              linear-gradient(0deg, rgba(238, 214, 182, .85) 0%, rgba(238, 214, 182, 0) 30%); }

.hero, .chapter { position: absolute; z-index: 5; inset-inline-start: var(--gutter); bottom: clamp(56px, 11vh, 120px); width: min(100% - 2 * var(--gutter), 40rem); }
.hero__title { font-size: clamp(2rem, 3.6vw, 3.4rem); white-space: nowrap; text-shadow: 0 2px 0 rgba(255, 255, 255, .6), 0 14px 30px rgba(122, 63, 18, .16); }
.hero__sub { margin-top: 20px; font-size: var(--t-lg); color: var(--mute); max-width: 30ch; }
.hero .ctas { margin-top: 30px; }
.coin { position: absolute; z-index: 5; inset-inline-end: clamp(70px, 9vw, 150px); bottom: clamp(60px, 12vh, 130px); width: clamp(110px, 10vw, 150px); height: auto; overflow: visible;
  filter: drop-shadow(0 22px 22px rgba(226, 88, 26, .35)); }
.coin__ring { display: block; width: 100%; height: auto; overflow: visible; }
.coin__logo { position: absolute; left: 50%; top: 50%; width: 58%; height: auto; translate: -50% -50%; filter: drop-shadow(0 2px 3px rgba(120, 40, 0, .35)); }
.coin text { font: 900 11.5px/1 "Nunito", sans-serif; letter-spacing: .16em; fill: #fff; text-transform: uppercase; direction: ltr; }

.chapter { opacity: 0; pointer-events: none; }
.chapter__num { display: flex; align-items: center; gap: 14px; font-weight: 800; color: var(--tone); }
.chapter__num span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 900 1.05rem/1 "Nunito", sans-serif; color: var(--tone); }
.chapter__title { margin-top: 18px; font-size: var(--t-2xl); text-shadow: 0 2px 0 rgba(255, 255, 255, .6), 0 14px 30px rgba(122, 63, 18, .16); }
.chapter__line { margin-top: 14px; font-size: var(--t-lg); color: var(--mute); max-width: 32ch; }

.dots { position: absolute; z-index: 6; inset-inline-end: 22px; top: 50%; translate: 0 -50%; display: grid; gap: 12px; }
.dots__d { --clay: var(--cream-clay); width: 16px; height: 16px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--cream-clay);
  box-shadow: 0 6px 10px -6px rgba(122, 63, 18, .5), inset 2px 3px 4px rgba(255, 255, 255, .9), inset -2px -3px 5px rgba(122, 63, 18, .2); transition: height .5s var(--spring), background-color .3s; }
.dots__d b { display: none; }
.dots__d.is-on { height: 46px; background: var(--clay); }
.hint { position: absolute; z-index: 6; left: 50%; translate: -50% 0; bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--mute); }
.hint i { width: 14px; height: 22px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--mute); position: relative; }
.hint i::after { content: ""; position: absolute; left: 50%; top: 4px; width: 4px; height: 6px; margin-left: -2px; border-radius: 4px; background: var(--orange); animation: wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0) } 40% { opacity: 1 } 100% { opacity: 0; transform: translateY(8px) } }

/* ---------- pinned sections ---------- */
[data-pin] { position: relative; }
.pin__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* statement — words light up; the real figures ride in clay capsules */
.statement { height: 260vh; }
.statement__stage { display: grid; place-items: center; padding: 120px var(--gutter) 60px; }
.statement__text { max-width: 20ch; text-align: center; font: var(--d-weight) clamp(2.3rem, 5.6vw, 5.4rem)/1.3 var(--f-display); letter-spacing: var(--d-track); }
:lang(fa) .statement__text, :lang(ar) .statement__text { line-height: 1.55; }
.statement .w { opacity: .16; transition: opacity .3s linear; }
.statement .w.is-lit { opacity: 1; }
.capsule { position: relative; display: inline-block; width: 2.1em; height: 1em; border-radius: 999px; vertical-align: -0.1em; transform: scale(.3) rotate(-8deg); opacity: 0;
  transition: transform .8s var(--spring), opacity .3s; }
.capsule.is-lit { transform: scale(1) rotate(0); opacity: 1; }
.capsule img { position: absolute; left: 50%; bottom: .1em; height: 1.22em; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 .08em .06em rgba(122, 63, 18, .35)); }
.capsule img.is-photo { inset: 6px; bottom: auto; height: calc(100% - 12px); width: calc(100% - 12px); translate: none; object-fit: cover; border-radius: 999px; filter: none; }

/* collections — a pinned stack of clay cards; each new card slides up over the last */
.stack__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: 112px var(--gutter) 28px; overflow: hidden; }
.stack__head { display: flex; align-items: end; justify-content: space-between; gap: 14px 60px; flex-wrap: wrap; max-width: 1240px; width: 100%; margin-inline: auto; }
.stack__head h2 { font-size: var(--t-2xl); }
.stack__head p { color: var(--mute); max-width: 32ch; font-size: var(--t-lg); }
.stack__deck { position: relative; flex: 1; width: 100%; max-width: 1240px; margin: 26px auto 0; }
.stack__card { position: absolute; inset: 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 60px); align-items: center;
  padding: clamp(26px, 3.4vw, 52px); border-radius: 56px; will-change: transform; transform-origin: 50% 60%; }
.stack__count { --clay: var(--cream-clay); display: inline-flex; padding: 8px 14px; border-radius: 999px; font: 900 .8rem/1 "Nunito", sans-serif; color: var(--tone); }
.stack__name { margin-top: 20px; font-size: clamp(2.2rem, 4.2vw, 4rem); }
.stack__line { margin-top: 12px; color: color-mix(in srgb, var(--ink) 70%, var(--tone)); font-size: var(--t-lg); max-width: 22ch; }
.stack__card .btn { margin-top: 28px; }
.stack__art { position: relative; height: 100%; max-height: 520px; display: grid; align-items: center; }
.window { --clay: var(--cream-clay); position: relative; height: 88%; padding: 14px; border-radius: 48px; margin-inline-start: auto; width: min(100%, 560px); }
.window > img { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; }
/* every figure stands in the same box, so they all read at one scale */
.pedestal { position: absolute; z-index: 2; inset-inline-start: -2%; bottom: 0; width: 42%; display: grid; justify-items: center; }
.pedestal__fig { position: relative; z-index: 1; width: 100%; height: clamp(150px, 22vh, 230px); object-fit: contain; object-position: center bottom; margin-bottom: -9%;
  filter: drop-shadow(0 18px 14px rgba(70, 35, 10, .35)); }
.pedestal--box .pedestal__fig { height: clamp(120px, 17vh, 180px); }
.pedestal__disc { --clay: var(--cream-clay); width: 92%; aspect-ratio: 3.8; border-radius: 50%; }

/* turntable — scroll turns the figure on its clay plinth */
.turn { height: 320vh; }
.turn__stage { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; padding: 110px var(--gutter) 40px; }
.turn__text h2 { font-size: var(--t-2xl); max-width: 11ch; }
.turn__text p { margin-top: 18px; font-size: var(--t-lg); color: var(--mute); max-width: 30ch; }
.turn__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; max-width: 30rem; }
.turn__chips .chip { min-height: 46px; padding: 0 20px; font-size: .92rem; background: rgba(255, 246, 236, .55); }
.turn__stagebox { position: relative; height: min(70vh, 640px); display: grid; place-items: center; }
.turn__halo { position: absolute; width: min(78%, 520px); aspect-ratio: 1; border-radius: 50%; top: 4%; transition: background-color .5s; }
.turn__figure { position: absolute; z-index: 2; bottom: 21%; width: min(56%, 400px); aspect-ratio: 1; }
.turn__view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 26px 18px rgba(70, 35, 10, .32)); }
.turn__view.is-on { opacity: 1; transform: scale(1); }
.turn__disc { --clay: var(--cream-clay); position: absolute; z-index: 1; bottom: 12%; width: min(70%, 460px); aspect-ratio: 3.4; border-radius: 50%; }
.turn__figure { perspective: 1100px; cursor: grab; touch-action: pan-y; outline: none; }
.turn__figure:active { cursor: grabbing; }
.turn__figure:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; border-radius: 30px; }
.turn__view { transition: none; transform-style: preserve-3d; backface-visibility: hidden; }
.turn__hint { position: absolute; z-index: 3; bottom: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--mute);
  --clay: #F6E3CF; background: var(--clay); box-shadow: inset 4px 5px 9px -2px rgba(122, 63, 18, .22), inset -4px -4px 8px rgba(255, 255, 255, .85); }
.turn__hint i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--mute); border-inline-end-color: transparent; animation: spin 2.4s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* why — collectible clay cards dealt onto the table */
.why { height: 380vh; }
.why__stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 110px var(--gutter) 40px; gap: 40px; }
.why__title { font-size: clamp(3.2rem, 8.4vw, 8.4rem); }
.deck { position: relative; height: min(66vh, 560px); }
.card { position: absolute; inset-block: 0; inset-inline-start: 50%; translate: -50% 0; width: min(410px, 80vw); display: flex; flex-direction: column; padding: 34px; border-radius: 44px; will-change: transform; }
[dir="rtl"] .card { translate: 50% 0; }
.card__no { font: 900 .78rem/1 "Nunito", sans-serif; letter-spacing: .06em; color: var(--tone); }
.card__big { margin-top: auto; font: 1000 clamp(6rem, 12vw, 9.5rem)/.9 "Nunito", sans-serif; letter-spacing: -0.06em; color: var(--tone);
  text-shadow: 0 3px 0 rgba(255, 255, 255, .7), 0 16px 26px color-mix(in srgb, var(--tone) 35%, transparent); }
.card__text { margin-top: 18px; font-size: var(--t-lg); font-weight: 800; line-height: 1.35; max-width: 18ch; }
.card__mark { position: absolute; inset-block-start: 26px; inset-inline-end: 28px; height: 28px; width: auto; }

/* wholesale */
.wholesale { padding-block: clamp(110px, 13vw, 190px); }
.wholesale__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.wholesale h2 { font-size: var(--t-2xl); max-width: 13ch; }
.wholesale__sub { margin-top: 20px; font-size: var(--t-lg); color: var(--mute); }
.points { margin: 44px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.points li { padding: 24px 22px; border-radius: 32px; }
.points h3 { font: 900 1.05rem/1.25 var(--f-body); color: var(--tone); }
.points p { margin-top: 8px; font-size: .95rem; color: color-mix(in srgb, var(--ink) 75%, var(--tone)); }
.wholesale__blocks > p { font-weight: 800; color: var(--mute); text-align: center; }
.blocks { margin-top: 26px; display: grid; justify-items: center; }
.block { width: min(100%, 340px); padding: 22px 26px; border-radius: 30px; text-align: center; rotate: var(--r); font: 900 clamp(2rem, 3.6vw, 3rem)/1.1 "Nunito", sans-serif; color: var(--tone); margin-top: -10px;
  transition: rotate .6s var(--spring), translate .6s var(--spring); }
.block:lang(fa), .block:lang(ar) { font-family: "Lalezar", "Vazirmatn", sans-serif; font-weight: 400; }
.block:hover { rotate: 0deg; translate: 0 -6px; }

/* faq */
.faq { padding-bottom: clamp(100px, 12vw, 170px); }
.faq__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: start; }
.faq h2 { font-size: var(--t-2xl); }
.faq__list { display: grid; gap: 16px; }
.qa { border-radius: 34px; padding: 0 26px; }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 900 var(--t-lg)/1.35 var(--f-body); }
.qa__knob { --clay: #FFB07A; flex: none; width: 40px; height: 40px; border-radius: 50%; position: relative; transition: rotate .5s var(--spring); }
.qa__knob::before, .qa__knob::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; border-radius: 3px; background: #fff; translate: -50% -50%; }
.qa__knob::after { rotate: 90deg; }
.qa[open] .qa__knob { rotate: 135deg; }
.qa p { padding-bottom: 24px; color: var(--mute); max-width: 56ch; }

/* contact */
.contact { padding-block: 190px clamp(50px, 6vw, 90px); }
.contact__panel { --clay: var(--cream-clay); position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 90px); padding: clamp(32px, 5vw, 76px); border-radius: 64px; }
.contact h2 { font-size: var(--t-2xl); }
.contact__sub { margin-top: 16px; font-size: var(--t-lg); color: var(--mute); }
.contact__big { margin-top: 34px; min-height: 84px; padding: 0 34px; flex-direction: column; align-items: flex-start; gap: 6px; border-radius: 40px; }
.contact__big span { font-size: .8rem; opacity: .85; }
.contact__big bdi { font: 1000 clamp(1.6rem, 3vw, 2.4rem)/1 "Nunito", sans-serif; letter-spacing: -0.02em; }
.ways { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.ways > div { --clay: #FFF9F2; padding: 14px 18px; border-radius: 24px; }
.ways dt { font-size: .75rem; font-weight: 800; color: var(--mute); }
.ways dd { margin: 4px 0 0; font-weight: 900; }
.ways a { text-decoration: none; white-space: nowrap; }
/* a deer strolls along the top of the panel, turns, and walks back */
.walker { position: absolute; top: -132px; inset-inline: 6%; height: 140px; pointer-events: none; }
.walker__body { position: absolute; bottom: 0; left: 0; width: 120px; animation: stroll 22s linear infinite; }
.walker__body img { width: 100%; filter: drop-shadow(0 14px 10px rgba(70, 35, 10, .3)); transform-origin: 50% 100%; animation: step .55s ease-in-out infinite alternate; }
@keyframes stroll {
  0% { left: 0; transform: scaleX(1); }
  44% { left: calc(100% - 120px); transform: scaleX(1); }
  50% { left: calc(100% - 120px); transform: scaleX(-1); }
  94% { left: 0; transform: scaleX(-1); }
  100% { left: 0; transform: scaleX(1); }
}
@keyframes step { from { transform: translateY(0) rotate(-1.4deg); } to { transform: translateY(-5px) rotate(1.4deg); } }
.quick { display: grid; gap: 14px; align-content: start; }
.quick h3 { font: 900 var(--t-lg)/1.3 var(--f-body); }
.quick__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quick label { display: grid; gap: 7px; font-size: .82rem; font-weight: 800; color: var(--mute); }
.quick input, .quick textarea { --clay: var(--cream-clay); font: inherit; font-size: 1rem; color: var(--ink); border: 0; border-radius: 22px; padding: 14px 18px; min-height: 54px; resize: vertical; }
.quick input:focus-visible, .quick textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.quick [aria-invalid="true"] { outline: 3px solid #FF9A6A; }
.quick__err { color: #B23A00; font-size: .875rem; font-weight: 800; }
.quick__hint { font-size: .8rem; color: var(--mute); }
.quick .btn { justify-self: start; }

.foot { padding-block: 10px 40px; }
.foot__in { display: flex; align-items: center; gap: 22px; font-size: .85rem; color: var(--mute); }
.foot__logo { height: 36px; width: auto; }
.foot__in .btn { margin-inline-start: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .bar__nav, .bar__chapters { display: none !important; } .bar__pill .btn--sm { margin-inline-start: auto; } .langs { margin-inline-start: auto; } .langs + .btn--sm { margin-inline-start: 0; } }
@media (max-width: 860px) {
  .bar { top: 10px; padding-inline: 10px; }
  .bar__pill { gap: 8px; padding-inline-start: 12px; }
  .bar__logo img { height: 32px; }
  .bar .btn--sm { display: none; }
  .langs a { min-width: 30px; height: 30px; }
  .hero, .chapter { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .hero__sub, .chapter__line { font-size: var(--t-base); }
  .coin { width: 88px; top: 92px; bottom: auto; }
  .hero__title { white-space: normal; font-size: 2rem; }
  .film__veil { background: linear-gradient(0deg, rgba(238, 214, 182, .97) 0%, rgba(238, 214, 182, .75) 34%, rgba(238, 214, 182, 0) 62%); }
  .dots { inset-inline-end: 10px; }
  .scene__still, .scene__video { object-position: center 40%; }
  .stack__pin { padding-top: 92px; }
  .stack__head p { display: none; }
  .stack__card { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 20px; border-radius: 38px; }
  .stack__art { order: -1; height: 38vh; }
  .window { width: 100%; height: 100%; padding: 10px; border-radius: 32px; }
  .window > img { border-radius: 24px; }
  .stack__name { margin-top: 8px; font-size: 2rem; }
  .stack__line { font-size: var(--t-base); }
  .stack__card .btn { margin-top: 12px; }
  .pedestal { width: 40%; inset-inline-start: auto; inset-inline-end: -2%; bottom: -6%; }
  .pedestal__fig { height: 15vh; }
  .walker { top: -98px; height: 100px; }
  .walker__body { width: 86px; animation-name: stroll-m; }
  @keyframes stroll-m { 0% { left: 0; transform: scaleX(1); } 44% { left: calc(100% - 86px); transform: scaleX(1); } 50% { left: calc(100% - 86px); transform: scaleX(-1); } 94% { left: 0; transform: scaleX(-1); } 100% { left: 0; transform: scaleX(1); } }
  .turn__stage { grid-template-columns: minmax(0, 1fr); align-content: center; padding-top: 96px; gap: 10px; }
  .turn__text, .turn__stagebox { min-width: 0; }
  .turn__figure { width: 60%; bottom: 22%; }
  .turn__halo { width: 74%; top: 6%; }
  .turn__disc { width: 66%; bottom: 14%; }
  .turn__text p { display: none; }
  .turn__chips { margin-top: 16px; flex-wrap: nowrap; overflow-x: auto; max-width: none; padding-bottom: 14px; }
  .turn__chips .chip { flex: none; }
  .turn__stagebox { height: 50vh; }
  .why__stage { grid-template-columns: 1fr; align-content: center; padding-top: 100px; gap: 22px; }
  .why__title { font-size: 3.2rem; }
  .deck { height: 54vh; }
  .wholesale__grid, .faq__grid { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; }
  .contact__panel { grid-template-columns: 1fr; border-radius: 40px; padding: 28px 22px; }
  .quick__row { grid-template-columns: 1fr; }
  .foot__in { flex-wrap: wrap; }
}

/* reduced motion: no pinned theatre */
.no-pin [data-pin] { height: auto !important; }
.no-pin .pin__stage { position: relative; height: auto; overflow: visible; }
.no-pin .statement .w { opacity: 1; }
.no-pin .capsule { opacity: 1; transform: none; }
.no-pin .stack__deck { display: grid; gap: 20px; } .no-pin .stack__card { position: relative; inset: auto; transform: none !important; }
.no-pin .deck { height: auto; display: grid; gap: 20px; }
.no-pin .card { position: relative; inset: auto; translate: none; margin-inline: auto; min-height: 420px; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .walker__body, .walker__body img, .turn__hint i { animation: none; } .hint i::after { animation: none; } .btn, .chip, .block { transition: none; } }