/* ───────────────────────────────────────────────
   אדל · רקדנית בטן — "קריסטל"
   Mobile first. RTL. Logical properties throughout.
   ─────────────────────────────────────────────── */

:root {
  --bg: #070606;
  --bg-soft: #0e0c0a;
  --ink: #f4ecdd;
  --ink-soft: #cfc5b3;
  --muted: #9b917f;
  --gold: #dcc08c;
  --gold-hi: #f8e9c6;
  --gold-deep: #a98a52;
  --pink: #f2b7c7;
  --line: rgba(220, 192, 140, .22);
  --line-soft: rgba(220, 192, 140, .12);

  /* ── Type. To try another heading face: change --display (and load it in index.html),
        then tune the weights / tracking below. Nothing else in the file names a font. ── */
  --display: "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;   /* headings, wordmark, quotes */
  --sans: "Heebo", "Assistant", "Arial Hebrew", Arial, sans-serif;      /* body text */
  --name-w: 200;          /* the "אדל" wordmark */
  --name-w-sm: 300;       /* … on phones, where it lies over the hero video */
  --name-track: .2em;
  --name-scale: 1.06;
  --h2-w: 200;            /* section headings */
  --h2-track: -.012em;
  --h2-lh: 1.1;
  --h2-scale: 1.06;
  --h3-w: 300;            /* small headings, quotes */
  --num-w: 200;           /* numerals / outlined letters */

  --pad: clamp(20px, 5.4vw, 72px);
  --maxw: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.is-shot { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
main { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure, fieldset, blockquote { margin: 0; padding: 0; }
[hidden] { display: none !important; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }
strong { font-weight: 400; }

.skip {
  position: absolute; z-index: 50; top: 8px; inset-inline-start: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--gold-hi); color: #17110a; font-weight: 500; font-size: .9rem;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

::selection { background: rgba(242, 183, 199, .35); color: #fff; }

:focus-visible {
  outline: 1.5px solid var(--gold-hi);
  outline-offset: 4px;
  border-radius: 4px;
}

.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ───────── 3D canvas ───────── */
.crystal {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.webgl-on .crystal { opacity: 1; }
.is-shot .crystal { transition: none; }
.static-3d .crystal { position: absolute; }
.no-webgl .crystal { display: none; }

/* ───────── Hero video (under the canvas, so the crystals glint over it) ───────── */
.hero-bg {
  position: absolute; inset: 0 0 auto 0; z-index: 0;
  height: var(--hero-h, 100svh); min-height: 560px;
  overflow: hidden; pointer-events: none;
  background: var(--bg);
}
.hero-bg__amb { display: none; }
.hero-bg__in, .hero-bg__win, .hero-bg__scrim { position: absolute; inset: 0; }
.hero-bg__vid {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 26%;
  filter: saturate(1.06) contrast(1.05) brightness(.92);
  background: #0b0908 url("../vid/hero-fire.jpg") 50% 26% / cover no-repeat;
}
.hero-bg__scrim {
  background:
    linear-gradient(180deg, rgba(7, 6, 6, .6) 0%, rgba(7, 6, 6, .1) 14%, rgba(7, 6, 6, .16) 26%, rgba(7, 6, 6, .62) 40%, rgba(7, 6, 6, .84) 54%, rgba(7, 6, 6, .94) 70%, var(--bg) 94%);
}

.nav, main, .foot { position: relative; z-index: 1; }

.stage { pointer-events: none; }
.no-webgl .stage--band, .static-3d .stage--band { display: none; }

/* ───────── Nav ───────── */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad);
}
.nav__mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 300; font-size: 1.3rem; letter-spacing: .16em;
  color: var(--ink); line-height: 1;
  padding-block: 13px; margin-block: -13px;
}
.nav__mark svg { width: 15px; height: 15px; fill: var(--gold); }
.nav__links { display: none; }
.nav__ig {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); font-size: .82rem; letter-spacing: .04em;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(7, 6, 6, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s, color .3s;
}
.nav__ig:hover { border-color: var(--gold); color: var(--gold-hi); }
.nav__ig .ico { width: 17px; height: 17px; }

/* ───────── Primary Instagram button ───────── */
.btn-ig {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.02em 1.75em;
  border-radius: 999px;
  background: linear-gradient(118deg, #fbefd2 0%, #e4c995 42%, #c9a56a 100%);
  color: #17110a;
  font-weight: 500; font-size: 1.04rem; line-height: 1.2;
  letter-spacing: .005em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 224, .55),
    0 14px 44px -14px rgba(220, 192, 140, .7),
    0 2px 0 rgba(0, 0, 0, .3);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-ig .ico { width: 1.3em; height: 1.3em; stroke-width: 1.5; }
.btn-ig::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.btn-ig:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 246, 224, .7), 0 20px 54px -14px rgba(220, 192, 140, .9), 0 2px 0 rgba(0, 0, 0, .3); }
.btn-ig:active { transform: translateY(0) scale(.985); }
.btn-ig--lg { font-size: 1.12rem; padding: 1.12em 2em; }

/* outlined secondary */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  width: 100%;
  padding: 1.05em .9em;
  border: 1px solid var(--gold); border-radius: 999px;
  background: transparent; color: var(--gold-hi);
  font-weight: 400; font-size: .95rem; cursor: pointer;
  transition: background .3s, color .3s;
}
.btn-line:hover { background: rgba(220, 192, 140, .12); }

.link-line {
  display: inline-flex; align-items: center; gap: .6em;
  color: var(--gold); font-size: .98rem;
  min-height: 44px; padding-block: 6px;
  border-bottom: 1px solid var(--line);
  transition: color .3s, border-color .3s, gap .3s;
}
.link-line:hover { color: var(--gold-hi); border-color: var(--gold); gap: .9em; }
.link-line .ico { width: 1.1em; height: 1.1em; }

/* ───────── Shared section head ───────── */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .8rem; font-weight: 400; letter-spacing: .26em;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(to left, var(--gold), transparent); }
.eyebrow--plain::before { display: none; }

h2 {
  font-family: var(--display); font-weight: var(--h2-w);
  font-size: calc(clamp(2.3rem, 9.6vw, 4.2rem) * var(--h2-scale));
  line-height: var(--h2-lh); letter-spacing: var(--h2-track);
  color: var(--ink);
  text-wrap: balance;
}
h3 { font-family: var(--display); font-weight: var(--h3-w); color: var(--ink); line-height: 1.2; }

/* CTA block: button + one quiet line under it */
.cta { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.cta .btn-ig { width: 100%; max-width: 380px; }
.cta__note { font-size: .86rem; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
.cta--sec { margin-top: clamp(40px, 7vw, 64px); }
.cta__note--soon { color: var(--ink-soft); }
.cta__help { /* quiet second route: jumps to the message helper form */
  font-size: .86rem; line-height: 1.5; color: var(--gold); text-align: center;
  padding-block: 11px; margin-block: -7px -11px;
  text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color .3s, text-decoration-color .3s;
}
.cta__help:hover { color: var(--gold-hi); text-decoration-color: var(--gold); }

.sec-head__note { margin-top: 20px; max-width: 34ch; color: var(--ink-soft); }
.sec-head__note a { color: var(--gold-hi); border-bottom: 1px solid var(--line); }
.sec-head__note a:hover { border-color: var(--gold); }

section { position: relative; }

/* ───────── Hero ───────── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 70px var(--pad) 26px;
  text-align: center;
}
.hero__visual { /* the stage the crystal fan opens in — over the upper part of the video */
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(170px, 30svh, 300px);
}
.fan-fallback {
  position: absolute; inset-inline: -12%; bottom: 0; width: 124%; height: auto; max-height: 100%;
  fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0;
  pointer-events: none;
}
.fan-fallback circle { fill: var(--pink); stroke: none; }
.no-webgl .fan-fallback { opacity: .7; }

.hero__text { position: relative; }
.hero__text::before { /* a soft dark pool behind the wordmark and the headline, so a passing flame never swallows them */
  content: ""; position: absolute; z-index: -1; inset: -34px calc(var(--pad) * -1) 30% calc(var(--pad) * -1);
  background: radial-gradient(62% 56% at 50% 46%, rgba(7, 6, 6, .78) 0%, rgba(7, 6, 6, .5) 52%, rgba(7, 6, 6, 0) 100%);
  pointer-events: none;
}
h1 { font: inherit; }
.hero__name {
  display: block;
  font-family: var(--display); font-weight: var(--name-w-sm);
  font-size: calc(clamp(3.7rem, 19.5vw, 5.3rem) * var(--name-scale));
  line-height: 1; letter-spacing: var(--name-track);
  margin-inline-end: calc(var(--name-track) * -1); /* optical centring: drop the trailing tracking */
  padding-block: .02em .06em;
  background: linear-gradient(176deg, #fff7e4 10%, #ecd6a6 52%, #c7a468 98%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(7, 6, 6, .9)) drop-shadow(0 3px 18px rgba(0, 0, 0, .7));
}
.hero__role {
  display: block;
  margin-top: 2px;
  font-size: .8125rem; font-weight: 400; letter-spacing: .34em;
  margin-inline-end: -.34em;
  color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(7, 6, 6, .9);
}
.hero__head {
  margin-top: 18px;
  font-family: var(--display); font-weight: var(--h3-w);
  font-size: clamp(2.2rem, 10.6vw, 2.85rem);
  line-height: 1.1; letter-spacing: -.01em;
  color: #fffaf0;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.hero__promise {
  margin: 12px auto 0; max-width: 33ch;
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
  text-wrap: pretty;
}
.hero__actions { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__actions .cta { width: 100%; }
.hero__actions .cta__note { color: var(--ink-soft); }
.proof {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-soft); font-size: .8125rem; line-height: 1.35; text-align: start;
  min-height: 44px;
}
.proof strong {
  font-family: var(--display); font-weight: var(--num-w); font-size: 1.6rem; line-height: 1; letter-spacing: .02em;
  color: var(--gold-hi);
  padding-inline-end: 12px; border-inline-end: 1px solid var(--line);
}
.proof:hover { color: var(--ink); }
.hero__scroll { display: none; }

/* ───────── Pains: three large media cards — the worry written on the footage, the answer under it ───────── */
.pains { padding-block: clamp(64px, 11vw, 130px) clamp(56px, 9vw, 110px); }
.pcards { display: grid; gap: 40px; margin-top: clamp(30px, 5vw, 56px); }
.pcard__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  background: #0b0908;
  box-shadow: 0 0 0 1px rgba(248, 233, 198, .3), 0 34px 70px -40px #000;
}
.pcard--a .pcard__media { border-radius: 170px 170px 3px 3px; }
.pcard--b .pcard__media { border-radius: 3px 3px 3px 90px; }
.pcard--c .pcard__media { border-radius: 3px 170px 3px 3px; }
.pcard--c .loop img, .pcard--c .loop video { object-position: 50% 78%; } /* keep the guests at the table in frame */
.loop img, .loop video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.loop video { opacity: 0; transition: opacity .5s ease; }
.loop.is-live video { opacity: 1; }
.loop--crop img, .loop--crop video { transform: scale(1.17); transform-origin: 100% 0; } /* pushes an editor watermark (bottom-left) out of frame */
.pcard__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(7, 6, 6, .94) 0%, rgba(7, 6, 6, .66) 26%, rgba(7, 6, 6, 0) 56%);
}
.pcard__q {
  position: absolute; z-index: 2; inset: auto 20px 20px 20px;
  padding-top: 30px;
  font-family: var(--display); font-weight: var(--h3-w);
  font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.14; letter-spacing: -.01em;
  color: #fffaf0; text-wrap: balance;
}
.pcard__q::before { /* quote mark */
  content: "\201D"; position: absolute; top: -8px; inset-inline-start: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 3rem; line-height: 1; color: var(--gold);
}
.pcard__a { margin-top: 16px; padding-inline: 4px; max-width: 34ch; line-height: 1.55; }
.pcard__a strong { display: block; color: var(--gold-hi); font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.3; margin-bottom: 2px; }
.pains__extra {
  margin-top: clamp(44px, 7vw, 72px); padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: var(--h3-w); font-size: clamp(1.3rem, 5.4vw, 1.9rem); line-height: 1.34;
  color: var(--ink-soft); text-wrap: balance;
}
.pains__extra strong { color: var(--gold-hi); font-weight: inherit; }
.pains .cta--sec { margin-top: 28px; }

/* ───────── Services ───────── */
.services { padding-block: clamp(72px, 14vw, 150px) clamp(64px, 10vw, 120px); }
.services__stage { height: 300px; margin-block: 4px -8px; }

.svc-list { border-top: 1px solid var(--line); }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 16px;
  align-items: start;
  padding-block: 30px 32px;
  border-bottom: 1px solid var(--line);
}
.svc::after { /* gold line that draws in */
  content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(to left, var(--gold-hi), var(--gold) 60%, transparent);
  transition: width .9s var(--ease);
}
.svc.in::after { width: 38%; }
.svc__num {
  font-size: .78rem; letter-spacing: .14em; color: var(--gold);
  padding-top: .62em; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.svc h3 { font-size: clamp(1.75rem, 7.2vw, 2.6rem); font-weight: var(--h2-w); letter-spacing: -.01em; }
.svc p { margin-top: 10px; max-width: 40ch; }
.svc .svc__why { margin-top: 14px; color: var(--ink); }
.svc__why span {
  display: flex; align-items: center; gap: 9px; margin-bottom: 3px;
  font-size: .78rem; font-weight: 400; letter-spacing: .18em; color: var(--gold);
}
.svc__why span::before { content: ""; width: 6px; height: 6px; background: var(--pink); transform: rotate(45deg); flex: none; }
.svc__ico {
  width: 40px; height: 40px; margin-top: 4px;
  fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9;
}
.svc__media {
  width: clamp(96px, 28vw, 124px); aspect-ratio: 3 / 4; margin-top: 4px;
  border-radius: 999px 999px 3px 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(248, 233, 198, .34), 0 0 0 6px var(--bg), 0 0 0 7px var(--line);
}
.svc:nth-child(even) .svc__media { border-radius: 3px 3px 999px 999px; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__media.loop { position: relative; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li {
  font-size: .82rem; color: var(--ink); letter-spacing: .02em;
  padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(7, 6, 6, .4);
}

/* ───────── The show: props + video ───────── */
.show { padding-block: clamp(56px, 9vw, 110px) clamp(56px, 9vw, 110px); }
.props {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px;
  margin-top: 36px; padding-block: 26px;
  border-block: 1px solid var(--line);
}
.prop { display: grid; gap: 10px; align-content: start; }
.prop__ico {
  width: 38px; height: 38px;
  fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.prop h3 { font-size: 1.16rem; font-weight: 400; }
.prop p { margin-top: 3px; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.props__note { margin-top: 14px; font-size: .84rem; color: var(--muted); }
.clips + .props { margin-top: 30px; }            /* the props strip now follows the clips */
.props__note + .show__foot { margin-top: 36px; }

.clips {
  display: flex; gap: 14px;
  margin-top: 26px; padding: 14px var(--pad) 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.clips::-webkit-scrollbar { display: none; }
.clip { flex: none; width: min(62vw, 250px); scroll-snap-align: center; }
.clip__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  padding: 0; border: 0; cursor: pointer;
  background: #0b0908;
  border-radius: 110px 110px 3px 3px;
  overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(248, 233, 198, .34), 0 30px 60px -34px #000;
  -webkit-tap-highlight-color: transparent;
}
.clip__btn:focus-visible { outline-offset: 5px; border-radius: 110px 110px 3px 3px; }
.clip__btn img, .clip__btn video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.clip__btn video { opacity: 0; transition: opacity .5s ease; }
.clip.is-live video { opacity: 1; }
/* this clip carries an editor watermark in its bottom-left corner: zoom from the top-right so it falls outside the frame */
.clip--crop img, .clip--crop video { transform: scale(1.17); transform-origin: 100% 0; }
.clip__btn::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 1;
  background: linear-gradient(to top, rgba(7, 6, 6, .7), transparent);
}
.clip__state {
  position: absolute; z-index: 2; inset-inline-start: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: rgba(7, 6, 6, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .35s, transform .35s var(--ease);
}
.clip__state .ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.clip__state .ico.is-line { fill: none; stroke: currentColor; stroke-width: 1.6; }
.clip.is-playing .clip__state { background: rgba(7, 6, 6, .42); }
.clip.is-sound .clip__state { background: var(--gold-hi); color: #17110a; box-shadow: 0 0 0 5px rgba(248, 233, 198, .2); }
.clip.is-sound .clip__btn { box-shadow: 0 0 0 1.5px var(--gold-hi), 0 30px 60px -30px #000; }
.clip__cap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; font-size: .8125rem; font-weight: 400; letter-spacing: .14em; color: var(--gold);
}
.clip__cap::before { content: ""; width: 18px; height: 1px; background: var(--gold); opacity: .6; }
.show__foot { margin-top: 26px; display: grid; justify-items: center; gap: 30px; }

/* ───────── About ───────── */
.about { padding-block: clamp(56px, 9vw, 120px); display: grid; gap: 40px; }
.about__photo { justify-self: center; width: min(60vw, 240px); padding-top: 12px; }
.about__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 3px 3px; }
.about__crop { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.about__frame::before {
  content: ""; position: absolute; inset: -10px; pointer-events: none;
  border: 1px solid rgba(248, 233, 198, .5); border-radius: 999px 999px 3px 3px;
}
.about__frame::after {
  content: ""; position: absolute; bottom: -15px; inset-inline-start: -15px; width: 9px; height: 9px;
  background: var(--gold-hi); transform: rotate(45deg) scale(.7);
  box-shadow: 0 0 12px 2px rgba(248, 233, 198, .6);
}
/* the portrait is cropped to the face, the crown and the crystal veil */
.about__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.12); transform-origin: 46% 0; }
.about__body { margin-top: 26px; max-width: 54ch; }
.about__body p + p { margin-top: 16px; }
.about__lead {
  font-family: var(--display); font-weight: var(--h3-w);
  font-size: clamp(1.3rem, 5.2vw, 1.6rem); line-height: 1.42; color: var(--ink);
}
.about .cta { margin-top: 30px; }

/* ───────── Gallery ───────── */
.gallery { padding-block: clamp(56px, 9vw, 110px) clamp(64px, 10vw, 120px); }
.strip-wrap { position: relative; margin-top: 34px; }
.gallery__stage { position: absolute; inset: -34px -6% -20px; }
.strip {
  display: flex; gap: 20px;
  padding: 26px var(--pad) 30px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.gallery__cta { position: relative; margin-top: 18px; }
.shot {
  flex: none; width: min(62vw, 250px);
  scroll-snap-align: center;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  transition: transform .6s var(--ease);
}
.shot:nth-child(1) { --r: -2.2deg; }
.shot:nth-child(2) { --r: 1.6deg; --y: 18px; }
.shot:nth-child(3) { --r: -1.2deg; --y: 4px; }
.shot:nth-child(4) { --r: 2.2deg; --y: 20px; }
.shot:nth-child(5) { --r: -1.8deg; --y: 6px; }
.shot:nth-child(6) { --r: 1.4deg; --y: 16px; }
.shot__frame {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(248, 233, 198, .4);
  background: #0b0908;
  box-shadow: 0 30px 60px -30px #000, 0 0 0 1px rgba(0, 0, 0, .6);
}
.shot__frame::after { /* crystal corner glint */
  content: ""; position: absolute; top: -5px; inset-inline-start: -5px; width: 9px; height: 9px;
  background: var(--gold-hi); transform: rotate(45deg) scale(.7);
  box-shadow: 0 0 12px 2px rgba(248, 233, 198, .6);
}
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.shot figcaption {
  display: flex; align-items: center; gap: 10px;
  width: fit-content; margin-top: 12px; padding: 3px 0 3px 10px;
  font-size: .8125rem; font-weight: 400; letter-spacing: .16em; color: var(--gold-hi);
  background: rgba(7, 6, 6, .78); box-shadow: 0 0 14px 8px rgba(7, 6, 6, .78);
}
.shot figcaption::before { content: ""; width: 18px; height: 1px; background: var(--gold); opacity: .6; }

/* ───────── How ───────── */
.how { padding-block: clamp(56px, 9vw, 110px) clamp(56px, 9vw, 110px); }
.how__stage { height: 190px; margin-block: 10px 0; }
.steps { position: relative; display: grid; gap: 44px; margin-top: 28px; padding-inline-start: 6px; }
.step { position: relative; padding-inline-start: 84px; min-height: 96px; }
.step__letter {
  position: absolute; inset-inline-start: 0; top: -.28em;
  font-family: var(--display); font-weight: var(--num-w); font-size: 5.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gold);
  opacity: .85;
}
.step__ico {
  width: 34px; height: 34px; margin-bottom: 10px;
  fill: none; stroke: var(--pink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.step h3 { font-size: 1.6rem; }
.step p { margin-top: 8px; max-width: 36ch; }

/* Reading blocks get a soft dark backdrop: the crystal canvas lies behind <main>,
   so this hides any sparkle that drifts behind running text. */
.pcard__a, .pains__extra, .about__body, .steps, .faq__list {
  position: relative;
  background: rgba(7, 6, 6, .8);
  box-shadow: 0 0 34px 26px rgba(7, 6, 6, .8);
}

/* ───────── FAQ ───────── */
.faq { padding-block: clamp(56px, 9vw, 110px); }
.faq__stage { display: none; } /* the gem lives under the heading on wide screens only */
.faq__photo {
  display: none; /* wide screens only: on a phone it left a column of empty space above the questions */
  width: min(44vw, 170px); aspect-ratio: 3 / 4; margin-top: 26px;
  border-radius: 999px 999px 3px 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(248, 233, 198, .34), 0 0 0 7px var(--bg), 0 0 0 8px var(--line);
}
.faq__photo img { width: 100%; height: 100%; object-fit: cover; }
.faq__credit { display: none; margin-top: 16px; font-size: .74rem; letter-spacing: .12em; color: var(--muted); } /* shown wherever the photo is shown */
.how__photo {
  width: min(56vw, 220px); aspect-ratio: 3 / 4; margin: 6px auto 0;
  border-radius: 999px 999px 3px 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(248, 233, 198, .34), 0 0 0 7px var(--bg), 0 0 0 8px var(--line);
}
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.faq__list { margin-top: clamp(30px, 5vw, 48px); border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 21px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: var(--h3-w); font-size: clamp(1.18rem, 4.8vw, 1.45rem); line-height: 1.3;
  color: var(--ink);
  transition: color .3s;
  -webkit-tap-highlight-color: transparent;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover, .qa[open] summary { color: var(--gold-hi); }
.qa summary i { position: relative; flex: none; width: 17px; height: 17px; transition: transform .45s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; background: var(--gold); }
.qa summary i::before { inset: 8px 0 auto 0; height: 1px; }
.qa summary i::after { inset: 0 auto 0 8px; width: 1px; transition: opacity .3s; }
.qa[open] summary i { transform: rotate(180deg); }
.qa[open] summary i::after { opacity: 0; }
.qa__a { padding-block: 0 24px; max-width: 58ch; }
.qa__a p + p { margin-top: 12px; }

/* ───────── Sections waiting for real content (all carry the hidden attribute) ───────── */
.voices, .packs, .areas, .venues { padding-block: clamp(56px, 9vw, 110px); }
.voices__list, .packs__list { display: grid; gap: 22px; margin-top: 40px; }
.voice { position: relative; padding: 30px 24px 26px; border: 1px solid var(--line); background: rgba(14, 12, 10, .6); }
.voice blockquote p { font-family: var(--display); font-weight: var(--h3-w); font-size: 1.35rem; line-height: 1.4; color: var(--ink); }
.voice figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; font-size: .86rem; color: var(--muted); }
.voice figcaption strong { color: var(--gold-hi); }
.pack { padding: 30px 24px; border: 1px solid var(--line); background: rgba(14, 12, 10, .6); }
.pack h3 { font-size: 1.6rem; }
.pack__meta { margin-top: 6px; font-size: .84rem; letter-spacing: .08em; color: var(--gold); }
.pack ul { margin-top: 16px; display: grid; gap: 8px; }
.pack ul li { position: relative; padding-inline-start: 18px; }
.pack ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 6px; height: 6px; background: var(--pink); transform: rotate(45deg); }
.pack__price { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--gold-hi); }
.areas__list { margin-top: 30px; }
.venues__list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: 8px; color: var(--ink-soft); font-family: var(--display); font-weight: var(--h3-w); font-size: 1.2rem; }
.venues__list img { height: 32px; width: auto; opacity: .8; }

/* ───────── Contact ───────── */
.contact { padding-block: clamp(64px, 10vw, 130px) clamp(72px, 10vw, 130px); display: grid; gap: 30px; }
.contact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 40% at 50% 12%, rgba(220, 192, 140, .1), transparent 70%);
}
.contact__lead { position: relative; }
.contact__actions { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contact__actions .btn-ig { width: 100%; max-width: 420px; }
.contact__stage { height: 250px; margin-top: 18px; }
.facts { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 26px; max-width: 520px; border: 1px solid var(--line); background: var(--line); }
.fact { flex: 1 1 calc(50% - 1px); padding: 14px 16px; background: var(--bg); }
.fact dt { font-size: .74rem; letter-spacing: .08em; color: var(--gold); }
.fact dd { margin: 4px 0 0; font-family: var(--display); font-weight: var(--h3-w); font-size: 1.12rem; line-height: 1.35; color: var(--ink); }

.helper {
  position: relative;
  display: grid; gap: 24px;
  padding: 30px 22px 26px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 17, 13, .82), rgba(9, 8, 7, .88));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.helper::before, .helper::after { /* corner ticks */
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--gold-hi);
}
.helper::before { top: -1px; inset-inline-start: -1px; border-inline-end: 0; border-bottom: 0; }
.helper::after { bottom: -1px; inset-inline-end: -1px; border-inline-start: 0; border-top: 0; }
.helper__head .eyebrow { margin-bottom: 8px; }
.helper__head h3 { font-size: clamp(1.5rem, 5.6vw, 2rem); }
.helper__head p:last-child { margin-top: 8px; color: var(--muted); font-size: .98rem; }

.field legend, .field > span {
  display: block; padding: 0; margin-bottom: 10px;
  font-size: .8rem; letter-spacing: .12em; color: var(--gold); font-weight: 400;
}
.field small { font-size: .74rem; letter-spacing: .02em; color: var(--muted); margin-inline-start: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: block; padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font-size: .96rem; line-height: 1.3;
  transition: background .25s, color .25s, border-color .25s;
}
.chip span { min-height: 44px; display: flex; align-items: center; }
.chips--sm .chip span { padding: 9px 14px; font-size: .9rem; }
.chip:hover span { border-color: var(--gold); }
.chip input:checked + span { background: rgba(220, 192, 140, .16); border-color: var(--gold-hi); color: var(--gold-hi); }
.chip input:focus-visible + span { outline: 1.5px solid var(--gold-hi); outline-offset: 3px; }
#kindField[hidden] { display: none; }

.field-row { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.field--line { display: block; min-width: 0; }
.field--line input, .field--line textarea {
  display: block; width: 100%; min-width: 0;
  padding: 8px 0 10px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--ink); font-size: 1.02rem; font-weight: 300;
  transition: border-color .3s;
  resize: vertical;
}
.field--line input[type="date"] { min-height: 44px; text-align: start; }
.field--line input::placeholder, .field--line textarea::placeholder { color: var(--muted); opacity: 1; }
.field--line input:focus, .field--line textarea:focus { outline: 0; border-color: var(--gold-hi); }
.field--line input:focus-visible, .field--line textarea:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 4px; }

.helper__result { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-block: 24px 40px; }
.helper { scroll-margin-top: 18px; }
.helper__result[hidden] { display: none; }
.helper__ok { display: flex; align-items: center; gap: 10px; color: var(--gold-hi); font-size: 1.08rem; font-weight: 400; }
.helper__ok .ico { width: 1.5em; height: 1.5em; color: var(--pink); }
.helper__result.is-manual .helper__ok .ico { display: none; }
.helper__text {
  width: 100%; padding: 14px 16px;
  background: rgba(0, 0, 0, .45); border: 1px dashed var(--line); border-radius: 2px;
  color: var(--ink); font-size: .98rem; line-height: 1.65; resize: none;
}
.helper__text:focus { outline: 0; border-color: var(--gold); }
.helper__text:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 3px; }
.helper__result .btn-ig { width: 100%; }

/* ───────── Footer ───────── */
.foot { border-top: 1px solid var(--line-soft); padding-block: 54px 124px; text-align: center; background: linear-gradient(180deg, transparent, rgba(7, 6, 6, .9) 60%); }
.foot__in { display: grid; justify-items: center; gap: 12px; }
.foot__name { font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--ink); font-weight: var(--name-w); letter-spacing: var(--name-track); margin-inline-end: calc(var(--name-track) * -1); }
.foot__line { font-size: .9rem; color: var(--muted); max-width: 30ch; }
.foot__ig { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; color: var(--gold); font-size: .95rem; letter-spacing: .03em; min-height: 44px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.foot__ig:hover { color: var(--gold-hi); border-color: var(--gold); }
.foot__small { font-size: .82rem; line-height: 1.6; color: var(--muted); max-width: 44ch; }
.foot__ig + .foot__small { margin-top: 14px; }
.foot__a11y { max-width: 46ch; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.foot__a11y summary {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; cursor: pointer; list-style: none;
  color: var(--gold); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}
.foot__a11y summary::-webkit-details-marker { display: none; }
.foot__a11y summary:hover, .foot__a11y[open] summary { color: var(--gold-hi); }
.foot__a11y-body { text-align: start; padding: 6px 2px 14px; color: var(--ink-soft); }
.foot__a11y-body p + p, .foot__a11y-body ul + p { margin-top: 12px; }
.foot__a11y-body strong { color: var(--ink); }
.foot__a11y-body ul { margin-top: 6px; display: grid; gap: 6px; }
.foot__a11y-body li { position: relative; padding-inline-start: 16px; }
.foot__a11y-body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .68em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.foot__a11y-body a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.foot__copy { margin-top: 16px; font-size: .8125rem; line-height: 1.7; color: var(--muted); letter-spacing: .03em; max-width: 46ch; }

/* ───────── Fixed mobile CTA ───────── */
.dock {
  position: fixed; z-index: 20;
  inset-inline: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding-block: .95em;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 224, .55), 0 18px 40px -8px rgba(0, 0, 0, .9), 0 0 0 6px rgba(7, 6, 6, .55);
  transform: translateY(160%);
  visibility: hidden; /* while it is off screen it must not take keyboard focus or be read out */
  transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.dock.is-on { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
html:not(.js) .dock { transform: none; visibility: visible; }

/* ───────── Reveal ───────── */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .shot[data-reveal] { transform: rotate(var(--r, 0deg)) translateY(calc(var(--y, 0px) + 30px)); }
.js .shot[data-reveal].in { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); }
html.is-shot [data-reveal] { transition: none !important; }
html.is-shot [data-reveal] { opacity: 1; transform: none; }
html.is-shot .shot[data-reveal] { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); }
html.is-shot .svc::after { transition: none; }

/* ═════════ ≥ 720px ═════════ */
@media (min-width: 720px) {
  .cta .btn-ig { width: auto; max-width: none; }
  .props { grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: 34px; }
  .prop { padding-inline: 26px; border-inline-start: 1px solid var(--line-soft); }
  .prop:first-child { padding-inline-start: 0; border: 0; }
  .voices__list, .packs__list { grid-template-columns: repeat(3, 1fr); }
  .contact__actions { flex-direction: row; align-items: center; gap: 30px; }
  .contact__actions .btn-ig { width: auto; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .helper { padding: 40px 38px 36px; }
  .btn-line { font-size: 1rem; padding-inline: 1.4em; }
  .strip { gap: 28px; }
}

/* ═════════ ≥ 980px (desktop) ═════════ */
@media (min-width: 980px) {
  body { font-size: 1.125rem; }
  .dock { display: none; }
  .foot { padding-block: 70px 60px; }

  .nav { padding-block: 26px; }
  .nav__mark { font-size: 1.6rem; }
  .nav__links { display: flex; gap: 38px; font-size: .92rem; color: var(--ink-soft); letter-spacing: .04em; }
  .nav__links a { position: relative; padding-block: 6px; transition: color .3s; }
  .nav__links a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
  .nav__links a:hover { color: var(--gold-hi); }
  .nav__links a:hover::after { transform: scaleX(1); }

  /* Hero: text on the start (right) side; the portrait video stands in a tall arch on the other,
     crisp at its native size, with a blurred echo of the same frame washing the whole stage. */
  .hero-bg__amb {
    display: block; position: absolute; inset: -6%;
    background: url("../vid/hero-fire.jpg") 30% 30% / cover no-repeat;
    filter: blur(70px) saturate(1.5) brightness(.8);
    opacity: .42;
  }
  .hero-bg__in, .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    column-gap: 3vw;
    max-width: calc(var(--maxw) + var(--pad) * 2);
    margin-inline: auto;
    padding: 104px var(--pad) 64px;
  }
  .hero { text-align: start; }
  .hero-bg__win {
    position: relative; inset: auto;
    grid-column: 2; justify-self: center;
    height: min(72vh, 640px); aspect-ratio: 9 / 16;
    border-radius: 999px 999px 4px 4px;
  }
  .hero-bg__win::before {
    content: ""; position: absolute; inset: -13px; pointer-events: none;
    border: 1px solid rgba(248, 233, 198, .5); border-radius: 999px 999px 4px 4px;
  }
  .hero-bg__vid { border-radius: inherit; object-position: 50% 40%; filter: saturate(1.08) contrast(1.05); }
  .hero-bg__scrim {
    background:
      linear-gradient(to top, var(--bg) 0%, rgba(7, 6, 6, 0) 20%),
      linear-gradient(to left, rgba(7, 6, 6, .82) 0%, rgba(7, 6, 6, .6) 44%, rgba(7, 6, 6, 0) 62%),
      linear-gradient(180deg, rgba(7, 6, 6, .5) 0%, rgba(7, 6, 6, 0) 16%);
  }
  .hero__visual { order: 2; flex: none; height: min(72vh, 640px); min-height: 0; }
  .hero__text { order: 1; }
  .hero__text::before { display: none; }
  .hero__name { font-weight: var(--name-w); font-size: calc(clamp(7rem, 11.5vw, 10.5rem) * var(--name-scale)); margin-inline-start: -.03em; line-height: .95; filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .7)); }
  .hero__role { font-size: .86rem; letter-spacing: .42em; margin-inline-end: 0; margin-top: 8px; color: var(--gold); }
  .hero__head { margin-top: 34px; font-size: clamp(2.6rem, 3.9vw, 3.5rem); font-weight: var(--h2-w); line-height: 1.1; }
  .hero__promise { margin: 18px 0 0; max-width: 36ch; font-size: 1.2rem; line-height: 1.6; }
  .hero__actions { flex-direction: row; align-items: flex-start; justify-content: flex-start; margin-top: 34px; gap: 34px; }
  .hero__actions .cta { width: auto; align-items: flex-start; }
  .proof { font-size: .86rem; padding-top: 6px; }
  .proof strong { font-size: 2rem; }
  .hero__scroll {
    display: block; position: absolute; inset-inline-start: var(--pad); bottom: 22px;
    width: 1px; height: 46px; background: var(--line); overflow: hidden;
  }
  .hero__scroll span { position: absolute; inset: 0; background: var(--gold-hi); animation: drip 2.6s var(--ease) infinite; }
  @keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

  h2 { font-size: calc(clamp(3.3rem, 5.3vw, 5rem) * var(--h2-scale)); }
  .cta--sec, .cta--start { align-items: flex-start; }
  .cta--sec .cta__note, .cta--start .cta__note { text-align: start; }

  /* Pains: three tall cards across, the middle one dropped */
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
  .pcard__media { aspect-ratio: 3 / 4; }
  .pcard--b { margin-top: 64px; }
  .pcard__q { inset: auto 26px 26px 26px; font-size: clamp(1.8rem, 2.4vw, 2.3rem); font-weight: var(--h2-w); }
  .pcard__a { margin-top: 20px; font-size: 1.08rem; }
  .pcard__a strong { font-size: 1.45rem; }
  .pains__extra { max-width: 30em; }

  .eyebrow { font-size: .84rem; margin-bottom: 24px; }

  /* Services: editorial list + sticky stage */
  .services {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 5vw;
    align-items: start;
  }
  .services .sec-head { grid-column: 1; grid-row: 1; margin-bottom: 56px; }
  .svc-list { grid-column: 1; grid-row: 2; }
  .services__cta { grid-column: 1; grid-row: 3; }
  .services__stage { grid-column: 2; grid-row: 1 / 4; position: sticky; top: 12vh; height: 76vh; margin: 0; }
  .svc { grid-template-columns: 64px 1fr auto; padding-block: 40px 44px; column-gap: 28px; align-items: center; transition: padding .5s var(--ease); }
  .svc__media { width: 178px; margin: 0; transition: transform .6s var(--ease); }
  .svc:hover .svc__media { transform: translateY(-5px); }
  .svc__num { align-self: start; }
  .svc h3 { font-size: clamp(2.2rem, 3.1vw, 2.9rem); transition: color .4s; }
  .svc p { margin-top: 12px; font-size: 1.1rem; }
  .svc__why span { font-size: .76rem; }
  .svc__num { font-size: .86rem; padding-top: 1.1em; }
  .svc__ico { width: 50px; height: 50px; margin-top: 10px; transition: transform .6s var(--ease), stroke .4s; }
  .svc:hover h3 { color: var(--gold-hi); }
  .svc:hover .svc__ico { transform: translateY(-4px) rotate(-6deg); stroke: var(--gold-hi); }
  .svc:hover::after { width: 100%; }
  .tags li { font-size: .88rem; }

  /* The show */
  .show .sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
  .show .sec-head .eyebrow { grid-column: 1 / -1; }
  .show .sec-head__note { margin: 0 0 12px; max-width: 28ch; }
  .props { margin-top: 56px; }
  .clips + .props { margin-top: 14px; }
  .prop { grid-template-columns: auto 1fr; column-gap: 16px; }
  .prop h3 { font-size: 1.3rem; }
  .prop p { font-size: .95rem; }
  .clips { justify-content: center; gap: clamp(12px, 1.5vw, 22px); overflow: visible; margin-top: 44px; padding-block: 30px 46px; max-width: 1440px; margin-inline: auto; }
  .clip { width: clamp(140px, 13.4vw, 196px); transform: translateY(var(--y, 0px)); }
  .clip:nth-child(odd) { --y: 26px; }
  .clip:nth-child(3n) { --y: -14px; }
  .js .clip[data-reveal] { transform: translateY(calc(var(--y, 0px) + 26px)); }
  .js .clip[data-reveal].in, html.is-shot .clip[data-reveal] { transform: translateY(var(--y, 0px)); }
  .clip__btn { border-radius: 98px 98px 3px 3px; transition: box-shadow .4s; }
  .clip__btn:hover { box-shadow: 0 0 0 1px var(--gold-hi), 0 30px 60px -30px #000; }
  .show__foot { grid-template-columns: 1fr auto; align-items: start; justify-items: start; }
  .show__foot .cta { align-items: flex-end; }
  .show__foot .cta__note { text-align: end; }

  /* About */
  .about { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 6vw; align-items: center; }
  .about__photo { width: min(100%, 290px); }
  .about__body { margin-top: 34px; }
  .about__lead { font-size: 1.7rem; font-weight: var(--h2-w); }

  /* FAQ: heading beside the list */
  .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 6vw; align-items: start; }
  .faq .sec-head { position: sticky; top: 10vh; }
  /* the gem sits in the empty space beside the photo, under the heading — never over the accordion */
  .faq__stage { display: block; position: absolute; bottom: 0; inset-inline: 262px 0; height: 290px; }
  .no-webgl .faq__stage, .static-3d .faq__stage { display: none; }
  .faq h2 { font-size: calc(clamp(2.8rem, 4.2vw, 4rem) * var(--h2-scale)); }
  .faq__list { margin-top: 12px; }
  .faq__photo { display: block; width: 230px; margin-top: 40px; }
  .faq__credit { display: block; width: 230px; text-align: center; }
  .faq .cta { grid-column: 2; }

  /* Gallery: staggered collage */
  .gallery .sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
  .gallery .sec-head .eyebrow { grid-column: 1 / -1; }
  .gallery .sec-head__note { margin: 0 0 14px; max-width: 26ch; }
  .strip-wrap { margin-top: 64px; max-width: 1440px; margin-inline: auto; }
  .gallery__stage { inset: -30px 1.5% -10px; }
  .strip { justify-content: center; gap: clamp(14px, 1.9vw, 30px); overflow: visible; padding-block: 50px 80px; }
  .shot { width: clamp(130px, 13.2vw, 205px); }
  .shot:nth-child(1) { --y: 26px; }
  .shot:nth-child(2) { --y: -22px; }
  .shot:nth-child(3) { --y: 46px; }
  .shot:nth-child(4) { --y: -8px; }
  .shot:nth-child(5) { --y: 34px; }
  .gallery__cta { margin-top: 10px; max-width: calc(var(--maxw) + var(--pad) * 2); }
  .js .shot[data-reveal].in:hover, .shot:hover { transform: rotate(0deg) translateY(calc(var(--y, 0px) - 10px)) scale(1.03); z-index: 2; }

  /* How: staircase */
  .how { padding-bottom: 120px; }
  .how .cta { margin-top: 90px; }
  .how .sec-head { max-width: 55%; }
  .how__stage { position: absolute; inset-inline-end: calc(var(--pad) + 236px); top: 60px; width: calc(45% - 250px); height: 300px; margin: 0; }
  .how__photo { position: absolute; inset-inline-end: calc(var(--pad) + 8px); top: 72px; width: 204px; margin: 0; }
  .steps { margin-top: 70px; gap: 4vw; padding: 0; }
  .step { padding-inline-start: 0; padding-top: 150px; }
  .step:nth-child(2) { margin-top: 64px; }
  .step:nth-child(3) { margin-top: 128px; }
  .step::before { content: ""; position: absolute; top: 122px; inset-inline: 0 -4vw; height: 1px; background: linear-gradient(to left, var(--gold), var(--line-soft)); }
  .step:last-child::before { inset-inline-end: 0; }
  .step__letter { font-size: 8.4rem; top: -14px; }
  .step__ico { position: absolute; top: 60px; inset-inline-end: 8px; width: 40px; height: 40px; margin: 0; }
  .step h3 { font-size: 1.9rem; }
  .step p { font-size: 1.1rem; }

  /* Contact: lead + helper side by side */
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; align-items: start; }
  .contact::before { inset: 0 -50vw; }
  .contact__lead { position: sticky; top: 8vh; }
  .contact__stage { height: 320px; margin-top: 30px; }
  .contact__actions { margin-top: 38px; }
}

/* Phones and small tablets: in the contact section the message form comes before the crystal diamond */
@media (max-width: 979px) {
  .contact__lead { display: contents; }
  .contact__actions { margin-top: 0; }
  .contact .helper { order: 1; }
  .contact__stage { order: 2; margin-top: 0; }
}

/* Phones: the hero video is anchored to the upper part of the hero, so the dancer's face and
   crystal veil land in the free area above the wordmark instead of behind the text. Same video;
   the lower part of the hero is already covered by the dark scrim. */
@media (max-width: 560px) {
  .hero-bg__win {
    inset: 0 0 auto 0; height: 62%;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  }
  .hero-bg__vid { object-position: 50% 100%; background-position: 50% 100%; }
  .hero-bg__scrim {
    background:
      linear-gradient(180deg, rgba(7, 6, 6, .6) 0%, rgba(7, 6, 6, .1) 12%, rgba(7, 6, 6, .1) 30%, rgba(7, 6, 6, .62) 40%, rgba(7, 6, 6, .84) 54%, rgba(7, 6, 6, .94) 70%, var(--bg) 94%);
  }
}

/* Short phones (in-app browsers) */
@media (max-width: 979px) and (max-height: 700px) {
  .hero { padding-top: 60px; padding-bottom: 18px; }
  .hero__visual { min-height: 110px; }
  .hero__name { font-size: calc(clamp(3rem, 15.5vw, 4rem) * var(--name-scale)); }
  .hero__head { margin-top: 10px; font-size: clamp(1.9rem, 8.8vw, 2.35rem); }
  .hero__promise { margin-top: 8px; font-size: .95rem; }
  .hero__actions { margin-top: 14px; gap: 10px; }
}

/* Very narrow phones */
@media (max-width: 340px) {
  .btn-ig { padding-inline: 1.1em; }
  .btn-ig span { font-size: .95rem; }
  .hero .proof { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-ig::after, .hero__scroll span { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .shot[data-reveal] { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); }
  .dock, .svc::after, .clip__btn video, .loop video, .clip__state { transition: none; }
}

/* owner: no captions under gallery photos (alt text stays for accessibility) */
.gallery .shot figcaption { display: none; }