/* Sweet Car | «النيون» Neon Night. Their amber neon sign, a black car in the dark, light you can play with. */
@font-face { font-family: "Lalezar"; src: url(assets/fonts/lalezar.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Readex"; src: url(assets/fonts/readex-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Readex"; src: url(assets/fonts/readex-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Anton"; src: url(assets/fonts/anton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sora"; src: url(assets/fonts/sora-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url(assets/fonts/sora-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --black: #050608; --ink-1: #0b0d12; --ink-2: #12151d; --ink-3: #1b1f2a;
  --text: #ece7dc; --soft: #b9b4aa; --mute: #7f828c; --line: rgba(255, 196, 110, .14);
  --amber: #ffb02e; --amber-hot: #ffd27a; --amber-deep: #e07b00; --pink: #ff3d84; --pink-soft: #ff7fae;
  --tube: #fff3d3;
  --glow-amber: 0 0 4px #fff0c8, 0 0 12px var(--amber), 0 0 28px var(--amber), 0 0 56px var(--amber-deep), 0 0 100px rgba(224, 123, 0, .55);
  --glow-pink: drop-shadow(0 0 3px #ffd0e2) drop-shadow(0 0 10px var(--pink)) drop-shadow(0 0 24px var(--pink));
  --f-display: "Lalezar", "Readex", sans-serif;
  --f-text: "Readex", system-ui, sans-serif;
  --gutter: clamp(18px, 4.5vw, 64px);
  --top-h: 66px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
html[lang="en"] { --f-display: "Anton", "Sora", sans-serif; --f-text: "Sora", system-ui, sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top-h); background: var(--black); }
body { margin: 0; background: var(--black); color: var(--text); font: 400 16px/1.75 var(--f-text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: 1.15; }
html[lang="en"] h2, html[lang="en"] h3 { text-transform: uppercase; line-height: 1.02; letter-spacing: .005em; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--amber); color: var(--black); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 3px; }

/* ---------- shared ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 600 16px/1 var(--f-text); text-decoration: none; transition: transform .25s var(--ease), box-shadow .3s, background-color .25s, border-color .25s; }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn:active { transform: scale(.97); }
.btn-neon { background: var(--amber); color: #1a0f00; box-shadow: 0 0 0 1px rgba(255, 220, 150, .6), 0 0 22px rgba(255, 176, 46, .55), 0 10px 40px -10px rgba(255, 140, 0, .8); }
.btn-neon:hover { background: var(--amber-hot); box-shadow: 0 0 0 1px #ffe2a6, 0 0 34px rgba(255, 176, 46, .8), 0 10px 50px -10px rgba(255, 140, 0, .9); }
.btn-ghost { border: 1px solid rgba(255, 220, 160, .3); color: #fff; background: rgba(5, 6, 8, .4); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--amber); }
.round { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 220, 160, .25); background: rgba(5, 6, 8, .55); cursor: pointer; }
.round:hover { border-color: var(--amber); }
.round svg { width: 20px; height: 20px; fill: currentColor; }
html[dir="rtl"] .viewer-next svg, html[dir="ltr"] .viewer-prev svg { transform: scaleX(-1); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--f-text); color: var(--amber); }
html[lang="en"] .kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 0 0 10px var(--amber); }
.sec-head { display: grid; gap: 12px; padding: 0 var(--gutter); margin-bottom: 32px; }
.sec-head h2, .polish-copy h2, .visit h2 { font-size: clamp(46px, 9vw, 112px); color: #fff; text-shadow: 0 0 40px rgba(255, 176, 46, .18); }
html[lang="en"] .sec-head h2, html[lang="en"] .polish-copy h2, html[lang="en"] .visit h2 { font-size: clamp(42px, 7.6vw, 100px); }
.sec-sub { color: var(--mute); font-size: 16px; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); transition: background-color .35s, border-color .35s, opacity .5s; border-bottom: 1px solid transparent; }
.top.is-solid { background: rgba(5, 6, 8, .82); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); }
.brand { position: relative; display: inline-flex; text-decoration: none; padding-top: 10px; opacity: 0; transition: opacity .5s; }
.top.is-solid .brand { opacity: 1; }
.brand-arc { position: absolute; top: -2px; inset-inline-start: -4px; width: 60px; height: 20px; color: var(--pink); filter: var(--glow-pink); }
.brand-ar { font: 400 28px/1 "Lalezar", sans-serif; color: var(--tube); text-shadow: 0 0 3px #fff0c8, 0 0 10px var(--amber), 0 0 22px var(--amber-deep); }
.nav { display: none; gap: 30px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--soft); transition: color .2s, text-shadow .2s; }
.nav a:hover { color: var(--amber-hot); text-shadow: 0 0 12px rgba(255, 176, 46, .6); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.lang { min-width: 48px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 220, 160, .25); background: rgba(5, 6, 8, .4); cursor: pointer; font: 600 13px/1 "Sora", sans-serif; letter-spacing: .06em; }
.lang[lang="ar"] { font-family: "Readex", sans-serif; font-size: 15px; letter-spacing: 0; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amber); color: #1a0f00; box-shadow: 0 0 18px rgba(255, 176, 46, .5); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 900px) { .nav { display: flex; } }

/* ---------- 1. hero: the sign ignites ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--black); }
.hero-media img, .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-still { opacity: 0; transform: scale(1.08); transition: opacity 2.2s var(--ease), transform 6s var(--ease); }
.hero.is-lit .hero-still { opacity: 1; transform: scale(1); }
.hero-film { opacity: 0; transition: opacity 1.8s var(--ease); }
.hero-film.is-on { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 6, 8, .92) 0%, rgba(5, 6, 8, .3) 26%, rgba(5, 6, 8, 0) 42%, rgba(5, 6, 8, 0) 58%, rgba(5, 6, 8, .85) 82%, var(--black) 100%); }
.haze { position: absolute; inset: -20%; background: radial-gradient(40% 30% at 30% 40%, rgba(255, 150, 40, .16), transparent 70%), radial-gradient(35% 25% at 75% 60%, rgba(255, 120, 30, .12), transparent 70%); animation: drift 18s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events: none; }
@keyframes drift { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.15); } }
.hero-copy { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; gap: 24px; padding: calc(var(--top-h) + 4vh) var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.sign { position: relative; display: inline-block; padding-top: .28em; font-size: clamp(66px, 21vw, 130px); line-height: 1; white-space: nowrap; }
.sign-word { display: block; font-family: "Lalezar", sans-serif; color: rgba(255, 236, 200, .08); text-shadow: none; -webkit-text-stroke: 1px rgba(255, 220, 160, .14); transition: color .08s, text-shadow .08s; }
.sign-arc { position: absolute; top: 0; inset-inline-start: 4%; width: 54%; height: .4em; color: rgba(255, 120, 170, .12); transition: color .08s, filter .08s; }
.sign.is-arc .sign-arc { color: var(--pink); filter: var(--glow-pink); }
.sign.is-on .sign-word { color: var(--tube); -webkit-text-stroke: 0; text-shadow: var(--glow-amber); }
.sign.is-on.is-buzz .sign-word { animation: buzz 7s steps(1) infinite; }
@keyframes buzz { 0%, 96%, 100% { opacity: 1; } 96.5% { opacity: .55; } 97% { opacity: 1; } 97.5% { opacity: .7; } 98% { opacity: 1; } }
.sign-sub { margin-top: -6px; font: 600 clamp(13px, 3.4vw, 18px)/1.5 var(--f-text); color: #fff; letter-spacing: .02em; text-shadow: 0 0 8px rgba(255, 255, 255, .5), 0 0 18px rgba(255, 176, 46, .5); opacity: 0; transition: opacity 1s var(--ease) .2s; }
html[lang="en"] .sign-sub { letter-spacing: .14em; text-transform: uppercase; font-size: clamp(11px, 2.8vw, 14px); }
.hero.is-lit .sign-sub { opacity: 1; }
.hero-top { display: grid; justify-items: center; gap: 14px; }
.hero-bottom { display: grid; justify-items: center; gap: 18px; opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease) .6s, transform 1s var(--ease) .6s; }
.hero.is-lit .hero-bottom { opacity: 1; transform: none; }
.lede { font-size: clamp(17px, 2.2vw, 22px); color: var(--text); text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.scroll-cue { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; z-index: 3; width: 26px; height: 42px; border: 1.5px solid rgba(255, 220, 160, .4); border-radius: 14px; display: none; }
.scroll-cue span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (min-width: 900px) {
  .hero-media img, .hero-film { object-position: 50% 50%; }
  html[dir="ltr"] .hero-media img, html[dir="ltr"] .hero-film { transform: scaleX(-1); }
  html[dir="ltr"] .hero.is-lit .hero-still { transform: scaleX(-1); }
  .hero-media::after { background: linear-gradient(to left, rgba(5, 6, 8, .78) 0%, rgba(5, 6, 8, .35) 30%, rgba(5, 6, 8, 0) 55%), linear-gradient(to top, var(--black) 0%, rgba(5, 6, 8, 0) 26%), linear-gradient(to bottom, rgba(5, 6, 8, .6), transparent 18%); }
  html[dir="ltr"] .hero-media::after { background: linear-gradient(to right, rgba(5, 6, 8, .78) 0%, rgba(5, 6, 8, .35) 30%, rgba(5, 6, 8, 0) 55%), linear-gradient(to top, var(--black) 0%, rgba(5, 6, 8, 0) 26%), linear-gradient(to bottom, rgba(5, 6, 8, .6), transparent 18%); }
  .hero-copy { width: min(50vw, 760px); margin-inline-end: auto; justify-content: center; gap: 34px; padding: calc(var(--top-h) + 20px) var(--gutter) 60px; }
  .sign { font-size: clamp(110px, 9.6vw, 190px); }
  .scroll-cue { display: block; }
}

/* ---------- 2. proof ---------- */
.proof { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); background: linear-gradient(var(--ink-1), var(--black)); }
.stat { display: grid; gap: 4px; padding: 26px var(--gutter); border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-inline-end: 0; }
.stat:nth-child(n+3) { border-bottom: 0; }
.stat strong { display: inline-flex; align-items: center; gap: 8px; font: 400 clamp(34px, 8vw, 58px)/1 "Anton", sans-serif; color: var(--amber-hot); text-shadow: 0 0 18px rgba(255, 176, 46, .45); }
.stat strong[data-open-status], .stat strong[data-i18n] { font-family: var(--f-display); font-size: clamp(24px, 5.6vw, 38px); }
html[lang="ar"] .stat strong[data-open-status] { font-family: "Readex", sans-serif; font-weight: 600; font-size: clamp(18px, 4.4vw, 26px); }
.stat strong svg { width: .6em; height: .6em; fill: currentColor; }
.stat > span { color: var(--mute); font-size: 14px; }
[data-open-status].is-open::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, .16), 0 0 12px #34d27b; flex: none; }
@media (min-width: 900px) { .proof { grid-template-columns: repeat(4, 1fr); } .stat { border-bottom: 0; } .stat:nth-child(2n) { border-inline-end: 1px solid var(--line); } .stat:last-child { border-inline-end: 0; } }

/* ---------- 3. polish it yourself ---------- */
.polish { position: relative; display: grid; gap: 30px; padding: clamp(80px, 12vw, 150px) var(--gutter); overflow: hidden; }
.polish::before { content: ""; position: absolute; inset: 10% -20% auto; height: 70%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 140, 20, .12), transparent 70%); pointer-events: none; }
.polish-copy { position: relative; display: grid; gap: 16px; align-content: center; }
.polish-copy > p:not(.kicker):not(.meter-label) { color: var(--soft); font-size: 18px; max-width: 36ch; }
.meter { height: 6px; border-radius: 6px; background: rgba(255, 220, 160, .1); overflow: hidden; max-width: 380px; margin-top: 8px; }
.meter-fill { display: block; height: 100%; width: var(--m, 0%); background: linear-gradient(90deg, var(--amber-deep), var(--amber), var(--amber-hot)); box-shadow: 0 0 14px var(--amber); transition: width .25s; }
html[dir="rtl"] .meter-fill { margin-inline-start: 0; background: linear-gradient(270deg, var(--amber-deep), var(--amber), var(--amber-hot)); }
.meter-label { color: var(--mute); font-size: 14px; }
.meter-label strong { color: var(--amber-hot); font: 400 22px/1 "Anton", sans-serif; margin-inline-start: 6px; }
.link-btn { justify-self: start; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(255, 220, 160, .4); background: none; color: var(--soft); cursor: pointer; font-size: 15px; }
.link-btn:hover { color: var(--amber-hot); border-color: var(--amber); }
.polish-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px rgba(255, 196, 110, .22), 0 40px 120px -30px rgba(255, 140, 0, .45); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.polish-stage:active { cursor: grabbing; }
.polish-shine, .polish-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.polish-hint { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px; padding: 18px 22px; border-radius: 18px; background: rgba(5, 6, 8, .55); backdrop-filter: blur(6px); color: #fff; font-weight: 600; pointer-events: none; transition: opacity .4s; }
.polish-hint svg { width: 40px; height: 40px; fill: var(--amber); filter: drop-shadow(0 0 10px var(--amber)); animation: swipe 1.8s ease-in-out infinite; }
@keyframes swipe { 0%, 100% { transform: translateX(-26px) rotate(-8deg); } 50% { transform: translateX(26px) rotate(8deg); } }
.polish-stage.is-touched .polish-hint { opacity: 0; }
.polish-done { position: absolute; inset: auto 0 0; display: grid; justify-items: center; gap: 14px; padding: 60px 20px 28px; background: linear-gradient(to top, rgba(5, 6, 8, .92), transparent); text-align: center; animation: rise .8s var(--ease) both; }
.polish-done[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.spark { width: 34px; height: 34px; fill: var(--amber-hot); filter: drop-shadow(0 0 12px var(--amber)); }
.done-title { font: 400 clamp(30px, 7vw, 44px)/1.1 var(--f-display); color: #fff; text-shadow: 0 0 20px rgba(255, 176, 46, .5); }
html[lang="en"] .done-title { text-transform: uppercase; }
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkles i { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle, #fff 0 20%, var(--amber-hot) 40%, transparent 70%); border-radius: 50%; animation: pop 1.2s var(--ease) forwards; }
@keyframes pop { 0% { transform: scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; } }
@media (min-width: 900px) { .polish { grid-template-columns: 1fr minmax(0, 520px); gap: 70px; align-items: center; max-width: 1280px; margin: 0 auto; } }

/* ---------- 4. anatomy ---------- */
.anatomy { position: relative; padding: clamp(70px, 10vw, 130px) 0; background: radial-gradient(70% 60% at 50% 45%, rgba(255, 140, 20, .07), transparent 70%); }
.car { position: relative; max-width: 1100px; margin: 0 auto; }
.car-img { width: 100%; height: auto; }
.car-glow { position: absolute; left: var(--gx, 57%); top: var(--gy, 52%); width: 46%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgba(255, 176, 46, .38), rgba(255, 120, 20, .12) 40%, transparent 68%); mix-blend-mode: screen; pointer-events: none; transition: left .6s var(--ease), top .6s var(--ease); }
.spot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.spot span { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--amber-hot); box-shadow: 0 0 0 3px rgba(255, 176, 46, .3), 0 0 16px var(--amber); transition: transform .3s var(--ease), background-color .3s; }
.spot span::before, .spot span::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 176, 46, .6); animation: ring 2.2s ease-out infinite; }
.spot span::after { animation-delay: 1.1s; }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.spot[aria-pressed="true"] span { background: var(--pink); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255, 61, 132, .3), 0 0 22px var(--pink); }
.spot[aria-pressed="true"] span::before, .spot[aria-pressed="true"] span::after { border-color: rgba(255, 61, 132, .7); }
.svc-tabs { display: flex; gap: 8px; padding: 24px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tabs button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 220, 160, .2); background: transparent; cursor: pointer; font-size: 15px; color: var(--soft); transition: all .25s; }
.svc-tabs button[aria-selected="true"] { background: var(--amber); color: #1a0f00; border-color: var(--amber); font-weight: 600; box-shadow: 0 0 20px rgba(255, 176, 46, .4); }
.svc-card { margin: 20px var(--gutter) 0; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: linear-gradient(160deg, var(--ink-2), var(--ink-1)); border: 1px solid var(--line); display: grid; gap: 12px; max-width: 760px; }
.svc-card.is-swap { animation: rise .5s var(--ease) both; }
.svc-no { font: 400 16px/1 "Anton", sans-serif; letter-spacing: .14em; color: var(--pink-soft); }
.svc-card h3 { font-size: clamp(38px, 7vw, 68px); color: var(--tube); text-shadow: 0 0 22px rgba(255, 176, 46, .35); }
html[lang="en"] .svc-card h3 { font-size: clamp(34px, 5.6vw, 56px); }
.svc-card p { color: var(--soft); font-size: 17px; max-width: 46ch; }
.svc-card .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) { .svc-tabs { justify-content: center; } .svc-card { margin-inline: auto; text-align: center; justify-items: center; } .svc-card .btn { justify-self: center; } }

/* ---------- 5. stories + gallery ---------- */
.stories { padding: clamp(70px, 10vw, 130px) 0; border-top: 1px solid var(--line); }
.story-row { list-style: none; margin: 0 0 40px; padding: 4px var(--gutter) 6px; display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.story-row::-webkit-scrollbar { display: none; }
.story-btn { display: grid; justify-items: center; gap: 8px; width: 88px; padding: 0; border: 0; background: none; cursor: pointer; }
.story-ring { position: relative; width: 84px; height: 84px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, var(--amber), var(--pink), var(--amber-hot), var(--amber)); box-shadow: 0 0 18px rgba(255, 140, 20, .35); transition: transform .3s var(--ease); }
.story-btn:hover .story-ring { transform: scale(1.06); }
.story-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--black); }
.story-btn.is-seen .story-ring { background: rgba(255, 220, 160, .22); box-shadow: none; }
.story-name { font-size: 12px; color: var(--soft); max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .story-row { justify-content: center; gap: 26px; } .story-btn { width: 110px; } .story-ring { width: 104px; height: 104px; } }

.grid { list-style: none; margin: 0; padding: 0 var(--gutter); columns: 2; column-gap: 10px; }
.grid li { break-inside: avoid; margin-bottom: 10px; }
.tile { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--ink-3); cursor: zoom-in; }
.tile img { width: 100%; height: auto; filter: brightness(.88) saturate(.95); transition: transform .9s var(--ease), filter .6s; }
.tile:hover img { transform: scale(1.05); filter: brightness(1.02); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .08); pointer-events: none; transition: box-shadow .3s; }
.tile:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 176, 46, .5), inset 0 0 30px rgba(255, 140, 20, .2); }
@media (min-width: 900px) { .grid { columns: 4; column-gap: 14px; max-width: 1400px; margin: 0 auto; } .grid li { margin-bottom: 14px; } }

.story { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; }
.story[hidden] { display: none; }
.story-video { width: min(100vw, calc(100svh * 9 / 16)); height: 100svh; object-fit: cover; }
.story-bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: min(94vw, calc(100svh * 9 / 16 - 20px)); display: flex; gap: 4px; z-index: 3; direction: ltr; }
html[dir="rtl"] .story-bars { flex-direction: row-reverse; }
.story-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.story-bars i b { display: block; height: 100%; width: var(--p, 0%); background: #fff; }
html[dir="rtl"] .story-bars i b { margin-inline-start: auto; }
.story-close { position: absolute; top: calc(24px + env(safe-area-inset-top)); inset-inline-end: 14px; z-index: 4; }
.story-tap { position: absolute; top: 0; bottom: 140px; width: 40%; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.story-prev { inset-inline-start: 0; }
.story-next { inset-inline-end: 0; }
.story-cap { position: absolute; inset: auto 0 0; z-index: 3; display: grid; justify-items: center; gap: 6px; padding: 80px 20px calc(24px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent); text-align: center; }
.story-cap strong { font: 400 28px/1 "Anton", sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.story-cap span { color: var(--amber-hot); font-size: 15px; margin-bottom: 8px; }

.viewer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .94); }
.viewer[hidden] { display: none; }
.viewer img { max-width: min(92vw, 1100px); max-height: 84vh; border-radius: 12px; }
.viewer-close { position: absolute; top: 18px; inset-inline-end: 18px; }
.viewer-prev, .viewer-next { position: absolute; top: 50%; translate: 0 -50%; }
.viewer-prev { inset-inline-start: 14px; }
.viewer-next { inset-inline-end: 14px; }

/* ---------- 6. reviews ---------- */
.reviews { padding: clamp(70px, 10vw, 130px) 0; background: linear-gradient(var(--black), var(--ink-1)); }
.reviews .sec-head h2 { font-size: clamp(40px, 7.4vw, 96px); max-width: 15ch; }
.deck { list-style: none; margin: 0 0 30px; padding: 0 var(--gutter) 10px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.card { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; display: grid; gap: 18px; align-content: space-between; min-height: 220px; padding: 26px; border-radius: 22px; background: linear-gradient(160deg, var(--ink-2), var(--ink-1)); border: 1px solid var(--line); }
.card blockquote, .card p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--text); }
.card blockquote { font-family: "Sora", sans-serif; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--mute); }
.card-foot strong { color: var(--text); font-weight: 600; }
.stars { display: inline-flex; gap: 2px; color: var(--amber); filter: drop-shadow(0 0 6px rgba(255, 176, 46, .5)); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }
.text-link { display: inline-flex; align-items: center; gap: 10px; margin: 0 var(--gutter); color: var(--amber-hot); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--amber); padding-bottom: 4px; }
.text-link svg { width: 18px; height: 18px; fill: currentColor; }
html[dir="rtl"] .text-link svg { transform: scaleX(-1); }

/* ---------- 7. visit ---------- */
.visit { position: relative; padding-bottom: clamp(56px, 8vw, 100px); }
.visit-sign { position: relative; margin: 0; height: clamp(300px, 52vh, 680px); overflow: hidden; }
.visit-sign img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.visit-sign::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--black) 3%, rgba(5, 6, 8, .25) 45%, rgba(5, 6, 8, .65)); }
.sign-glow { position: absolute; inset: 0; background: radial-gradient(45% 28% at 50% 36%, rgba(255, 170, 50, .5), transparent 70%); mix-blend-mode: screen; animation: glow 5s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .55; } 45% { opacity: 1; } 47% { opacity: .65; } 49% { opacity: 1; } }
.visit-panel { position: relative; z-index: 2; margin: -120px var(--gutter) 0; padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: rgba(11, 13, 18, .92); backdrop-filter: blur(10px); border: 1px solid var(--line); display: grid; gap: 18px; }
address { font-style: normal; display: grid; gap: 2px; font-size: 18px; color: #fff; }
.hours { margin: 0; display: grid; gap: 8px; max-width: 420px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--mute); }
.hours dd { margin: 0; color: #fff; font-weight: 600; }
.visit .cta-row { justify-content: flex-start; }
.visit-map { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.visit-map img { width: 100%; height: 100%; object-fit: cover; }
.map-cta { position: absolute; bottom: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--amber); color: #1a0f00; font-weight: 600; font-size: 15px; box-shadow: 0 0 18px rgba(255, 176, 46, .5); }
.map-cta svg { width: 18px; height: 18px; fill: currentColor; }
.map-attr { position: absolute; inset-block-end: 4px; inset-inline-end: 6px; font-size: 10px; line-height: 1; color: rgba(255, 255, 255, .45); }
@media (min-width: 900px) {
  .visit-sign { height: clamp(420px, 64vh, 720px); } .visit-sign img { object-position: 50% 42%; }
  .visit-panel { grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; max-width: 1240px; margin-inline: auto; }
  .visit-panel > :not(.visit-map) { grid-column: 1; }
  .visit-map { grid-column: 2; grid-row: 1 / span 6; align-self: stretch; aspect-ratio: auto; min-height: 340px; }
}

/* ---------- footer + dock ---------- */
.foot { padding: 56px var(--gutter) calc(48px + env(safe-area-inset-bottom)); display: grid; gap: 10px; justify-items: center; text-align: center; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px; }
.foot-sign { position: relative; padding-top: 14px; font-size: 46px; line-height: 1; }
.foot-sign .sign-arc { color: var(--pink); filter: var(--glow-pink); width: 60%; height: .4em; }
.foot-sign .sign-word { color: var(--tube); -webkit-text-stroke: 0; text-shadow: var(--glow-amber); }
.foot-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.foot-line a { color: #fff; text-decoration: none; }
.dock { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(5, 6, 8, .88); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .45s var(--ease); }
.dock.is-on { transform: none; }
.dock .btn { min-height: 48px; }
@media (min-width: 900px) { .dock { display: none; } }
@media (max-width: 899px) { .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

[data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-rise] { opacity: 1; transform: none; }
  .hero-still { opacity: 1; transform: none; }
  .sign-word { color: var(--tube); -webkit-text-stroke: 0; text-shadow: var(--glow-amber); }
  .sign-arc { color: var(--pink); filter: var(--glow-pink); }
  .sign-sub, .hero-bottom { opacity: 1; transform: none; }
  .polish-canvas, .polish-hint { display: none; }
}