/* ==========================================================================
   sections.css — the nine sections, in Figma order, at the mobile layout.
   Wider layouts are in responsive.css. Node ids reference frame 3300:14024.
   ========================================================================== */

/* ==========================================================================
   HERO — region 0 … 1436.7
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(74px, 5.830vw, 101px);   /* clears the overlaid nav */
}

/* Fills the hero at every width so the artists/skyline plate sits on the
   damask + starfield rather than an empty void. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  isolation: isolate;
  /* fades into the page's starfield instead of ending on a hard edge */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* bg 1 — 3300:14028, the damask ground */
/* image 35 — 3300:14029, starfield screened over the damask */
.hero__stars { mix-blend-mode: screen; }

/* Three.js atmospheric layer. Sits above the backdrop, below the artwork, and
   never takes the pointer. Added by js/three-scene.js. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__atmosphere.is-ready { opacity: 1; }
.hero__atmosphere canvas { width: 100%; height: 100%; display: block; }

/* 3320:16542 — y 187, 508 x 343 export (alpha restored) */
.hero__title {
  position: relative;
  width: clamp(200px, 29.40vw, 508px);
  margin: clamp(16px, 2.430vw, 42px) auto 0;
}
.hero__title img { width: 100%; height: auto; }

/* image 42 — 3387:13 — x -22, y 464.5, 1772 × 1199.5.
   Single plate: artists + skyline with the navy colour/transparency baked in.
   Bleeds past the hero into the intro so the skyline sits between the two
   sections. Roses (Group 103) flank that seam on both sides. */
.hero__artists {
  position: relative;
  aspect-ratio: 1772 / 1199.5;
}
.hero__artists img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__group { left: 0; top: 0; width: 100%; }

/* Group 103 — image 40 + image 41 on both sides of the skyline seam.
   Roses paint over the intro backdrop, but never steal clicks from the CTA. */
.hero__roses {
  position: relative;
  z-index: 7;
  margin-top: -14%;
  pointer-events: none;
}
.hero__roses img { width: 100%; height: auto; }

/* Scroll cue, sitting on the hero's bottom edge. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vw, 34px);
  z-index: var(--z-raised);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(226, 226, 226, .65);
  pointer-events: none;
}
.hero__cue-line {
  width: 1px;
  height: clamp(28px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(226, 226, 226, .7), transparent);
}

/* ==========================================================================
   INTRO — 3300:16503 — region 1436.7 … 2045.6
   pill at +0, copy at +115, then 263.9 of air
   ========================================================================== */
.intro {
  position: relative;
  /* No z-index — so .cta-row can stack above .hero__roses while the florals
     still paint over the intro seam / statues. */
  padding: 0 var(--gutter) clamp(70px, 15.272vw, 263.9px);
}

.intro__decor { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
/* The busts are a wide-screen flourish; on phones they only crowd the copy. */
.intro__statue { display: none; position: absolute; height: auto; }
.intro__statue--l { left: 3.27%;  top: 24.6%; width: 15.09%; }   /* 3300:16422 */
.intro__statue--r { left: 95.52%; top: 8.0%;  width: 13.66%; }   /* 3300:16419 */

.cta-row {                              /* 3300:16504 */
  position: relative;
  z-index: 8; /* above .hero__roses (7) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.intro__copy {
  position: relative;
  z-index: 8;
  width: 100%;
  max-width: 1133.2px;
  margin: clamp(22px, 2.604vw, 45px) auto 0;
  display: grid;
  gap: var(--spacing-sm);
}
.intro__copy .lede { max-width: 1012px; margin-inline: auto; }

/* ==========================================================================
   REELS — 3300:16515 — region 2045.6 … 3094.9
   heading at +0, stage at +124, then 98.5 of air
   ========================================================================== */
.reels {
  position: relative;
  padding: 0 var(--gutter) clamp(40px, 5.700vw, 98.5px);
}

/* Group 87 sits at y 1949.9 (above this section) and Group 86 at y 2421.7 */
.reels__floral {
  position: absolute;
  left: 0; right: 0;
  aspect-ratio: 1728 / 505;
  pointer-events: none;
  opacity: .9;
  z-index: 0;
}
.reels__floral--top { top: clamp(-56px, -5.538vw, 0px); background: url("../assets/images/floral-strip-a.png") center / 100% 100% no-repeat; }
.reels__floral--bot { top: clamp(150px, 21.765vw, 376px); background: url("../assets/images/floral-strip-b.png") center / 100% 100% no-repeat; }

.reels .h-section { position: relative; z-index: var(--z-content); }

/* Shuffle deck stage — three portrait cards stacked; GSAP owns every
   transform while the section is pinned and scrubbed. */
.reels__stage {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 916px;
  margin: clamp(24px, 2.894vw, 50px) auto 0;
  aspect-ratio: 915.9 / 826.8;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.reel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(50.78%, 420px);
  aspect-ratio: 465.1 / 826.8;
  border-radius: clamp(14px, 1.5vw, 26px);
  overflow: hidden;
  background: #000;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  transform-origin: center center;
  will-change: transform, opacity;
  cursor: pointer;
}

@media (max-width: 767px) {
  .reels {
    /* Keep the shuffle stage optically centered while pinned. */
    padding-top: 0;
  }
  .reels .h-section {
    margin-bottom: 0;
  }
  .reels__stage {
    aspect-ratio: auto;
    height: min(88svh, 740px);
    min-height: 560px;
    margin-top: clamp(8px, 2vh, 20px);
  }
  .reel {
    width: min(88vw, 400px);
  }
}
.reel img,
.reel video { width: 100%; height: 100%; object-fit: cover; }

.reel__play {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3.2vw, 28px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(44px, 5.2vw, 56px);
  height: clamp(44px, 5.2vw, 56px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(241, 245, 255, .92);
  color: var(--color-on-light);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), opacity .25s var(--ease-out);
}
.reel__play:hover,
.reel__play:focus-visible {
  transform: translateX(-50%) scale(1.06);
  background: #fff;
  outline: none;
}
.reel__play:focus-visible {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

.reel__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent currentColor;
}
.reel__play.is-playing .reel__play-icon {
  width: 14px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}
/* Muted autoplay preview — keep pause bars but hint sound is off */
.reel__play.is-playing.is-muted {
  background: rgba(241, 245, 255, .72);
}
.reel__play.is-playing.is-muted::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c45c5c;
  box-shadow: 0 0 0 2px rgba(241, 245, 255, .9);
}

.reel__focus,
.reel__sound {
  position: absolute;
  top: clamp(10px, 2vw, 16px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(34px, 4vw, 42px);
  height: clamp(34px, 4vw, 42px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(4, 13, 45, .55);
  color: var(--color-accent);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.reel__focus { left: clamp(10px, 2vw, 16px); }
.reel__sound { right: clamp(10px, 2vw, 16px); }
/* Outer corners stay reachable on the fanned side cards. */
.reel--l .reel__focus { left: clamp(10px, 2vw, 16px); }
.reel--r .reel__sound { right: clamp(10px, 2vw, 16px); }
.reel__focus:hover,
.reel__focus:focus-visible,
.reel__sound:hover,
.reel__sound:focus-visible {
  transform: scale(1.06);
  background: rgba(241, 245, 255, .92);
  color: var(--color-on-light);
  outline: none;
}
.reel__focus:focus-visible,
.reel__sound:focus-visible {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* Speaker glyph — quiet by default, open cone when .is-on */
.reel__sound-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 12px;
}
.reel__sound-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: currentColor;
  clip-path: polygon(0 30%, 55% 30%, 100% 0, 100% 100%, 55% 70%, 0 70%);
}
.reel__sound-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border: 1.5px solid currentColor;
  border-left: 0;
  border-radius: 0 50% 50% 0;
  opacity: .35;
}
.reel__sound.is-on .reel__sound-icon::after {
  opacity: 1;
  width: 7px;
  height: 8px;
  margin-top: -4px;
}
.reel__sound:not(.is-on) .reel__sound-icon {
  opacity: .9;
}
.reel__sound:not(.is-on)::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-42deg);
  border-radius: 1px;
}

/* Corner expand glyph — opens the single-reel viewer */
.reel__focus-icon {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}
.reel__focus-icon::before,
.reel__focus-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
}
.reel__focus-icon::before {
  top: 0; left: 0;
  border-right: 0; border-bottom: 0;
}
.reel__focus-icon::after {
  right: 0; bottom: 0;
  border-left: 0; border-top: 0;
}

.reel--main { z-index: 3; }
.reel--l { z-index: 1; }
.reel--r { z-index: 2; }

/* Full-screen single-reel viewer */
.reel-viewer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-loader) + 1);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(1, 8, 30, .88);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), visibility .35s var(--ease-out);
}
.reel-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.reel-viewer__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(48px, 12vw, 56px);
  height: clamp(48px, 12vw, 56px);
  border: 0;
  border-radius: 50%;
  background: #f1f5ff;
  color: var(--color-on-light);
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.reel-viewer__close:hover,
.reel-viewer__close:focus-visible {
  background: #fff;
  outline: none;
  transform: scale(1.05);
}
.reel-viewer__close-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}
.reel-viewer__close-icon::before,
.reel-viewer__close-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.reel-viewer__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.reel-viewer__close-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.reel-viewer__frame {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 465.1 / 826.8;
  border-radius: clamp(16px, 1.8vw, 28px);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
  transform: translateY(18px) scale(.94);
  transition: transform .45s var(--ease-out);
}
.reel-viewer.is-open .reel-viewer__frame {
  transform: none;
}
@media (max-width: 767px) {
  .reel-viewer__frame {
    width: min(92vw, 400px);
    max-height: min(82vh, 720px);
  }
}
.reel-viewer__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-viewer__play {
  left: 50%;
  bottom: clamp(16px, 3vw, 28px);
}
.reel-viewer__sound {
  top: clamp(12px, 2.4vw, 18px);
  right: clamp(12px, 2.4vw, 18px);
}

/* Custom cursor lives under the loader layer normally; lift it above the
   fullscreen reel viewer so close / play / mute stay visible. */
body.has-reel-viewer.has-custom-cursor .cursor {
  z-index: calc(var(--z-loader) + 2);
}

/* ==========================================================================
   PASSES — 3300:16264 — region 3094.9 … 4384.5
   panel at +134 (h 904), then 251.6 of air
   ========================================================================== */
.passes {
  position: relative;
  padding: clamp(40px, 7.755vw, 134px) var(--gutter) clamp(90px, 14.560vw, 251.6px);
}

.passes__dholak {                       /* 3351:4 / 3351:5, clipped exports */
  position: absolute;
  bottom: clamp(20px, 4.5vw, 78px);
  width: 18%;                           /* 311 / 1728 */
  height: auto;
  pointer-events: none;
  z-index: 3;
}
.passes__dholak--l { left: 0; }
.passes__dholak--r { right: 0; }

.passes__star { position: absolute; height: auto; pointer-events: none; }
.passes__star--a { top: 0;                           left: 89.53%; width: 6.91%; }  /* Group 46 */
.passes__star--b { top: clamp(40px, 8.241vw, 142px); left: 8.03%;  width: 5.09%; }  /* Group 47 */
.passes__star--c { top: clamp(22px, 4.300vw, 74px);  left: 8.80%;  width: 2.59%; }  /* Group 48 */

.passes__panel {                        /* 3300:16265 — 1386 x 904 */
  position: relative;
  z-index: var(--z-content);
  width: var(--w-pass);
  max-width: 1386px;
  margin-inline: auto;
  padding: var(--spacing-md) clamp(16px, 5.556vw, 96px) 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-bg-card) 6.27%, var(--color-bg-card-0) 67.14%);
}

/* The stroke fades out with the panel's gradient instead of closing off at the
   bottom, which is how it reads on the Figma canvas. */
.passes__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: clamp(2px, 0.231vw, 4px) solid var(--color-accent);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 72%);
}

.tickets {
  margin-top: clamp(20px, 2.743vw, 47.4px);
  display: grid;
  gap: clamp(18px, 1.539vw, 26.6px);
  grid-template-columns: 1fr;
}

.passes__note {
  margin-top: clamp(26px, 8.400vw, 145px);
  padding-bottom: clamp(0px, 0.5vw, 8px);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: var(--text-note);
  line-height: 1.563;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--color-text);
}

/* ==========================================================================
   DIFFERENT — 3300:14069 — region 4384.5 … 5525
   arch at +0 (1931.4 x 1085.8 at x -106.7); headline at +359
   ========================================================================== */
.different { position: relative; padding-bottom: clamp(50px, 9.144vw, 158px); }

/* The node is 1931.4 wide at x -106.7, but the export already comes back
   clipped to the 1728 frame, so it sits flush. */
.different__arch {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: var(--z-decor);
}

.halo { position: absolute; height: auto; pointer-events: none; z-index: var(--z-decor); }
.halo--l { left: 2.52%;  top: clamp(166px, 27.81vw, 481px); width: 34.68%; }   /* 3300:14072 */
.halo--r { left: 97.48%; top: clamp(160px, 26.81vw, 463px); width: 36.74%; }   /* 3300:15149 */

.glint {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: var(--z-content);
  transform: scaleX(-1);
}
.glint--a { left: 32.74%; top: clamp(150px, 25.22vw, 436px); width: 3.20%; }
.glint--b { left: 72.41%; top: clamp(156px, 26.11vw, 451px); width: 3.20%; }
.glint--c { left: 44.62%; top: clamp(158px, 26.45vw, 457px); width: 1.17%; }

/* On phones the arch is a short ornamental band, so the copy clears it. From
   1024px it is tall enough to frame the copy inside it (Figma: headline +359). */
.different__inner {
  position: relative;
  z-index: var(--z-content);
  padding-inline: var(--gutter);
  padding-top: calc(100vw * 0.6285 * 0.92);   /* arch is 1086/1728 = 0.6285 of width */
}

.ringed {                               /* 3300:16253 / 16254 ellipses */
  position: relative;
  width: 100%;
  max-width: 990px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: clamp(24px, 3.009vw, 52px) 0;
}
.ringed__text { position: relative; z-index: var(--z-content); max-width: 604px; }
.ringed__ell {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* --ring-rot is the Figma rake; --ring-spin is what GSAP scrubs. */
  transform: translate(-50%, -50%) rotate(calc(var(--ring-rot) + var(--ring-spin, 0deg)));
}
.ringed__ell--a { --ring-rot: -3.7deg; }
.ringed__ell--b { --ring-rot: 5.31deg; }

.different__sub {
  position: relative;
  z-index: var(--z-content);
  margin-top: clamp(24px, 3.5vw, 60px);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: var(--text-display);
  letter-spacing: -0.4px;
  line-height: var(--leading-display);
  text-align: center;
  color: var(--color-text);
}

.triad {
  width: 100%;
  max-width: 1448px;
  margin: clamp(28px, 4.022vw, 69.5px) auto 0;
  display: grid;
  gap: clamp(28px, 2.5vw, 44px);
  grid-template-columns: 1fr;
}
.triad li { position: relative; text-align: center; }
.triad h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: var(--text-triad);
  line-height: var(--leading-triad);
  letter-spacing: -0.2px;
  color: #fff;
}
.triad p {
  margin-top: clamp(8px, 0.903vw, 15.6px);
  font-family: var(--font-body);
  font-variation-settings: "opsz" 28;
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: -0.2px;
  color: #fff;
  max-width: 447px;
  margin-inline: auto;
}

/* ==========================================================================
   LINE-UP — 3300:16334 — region 5525 … 7528.3
   strip at +0, manjira at +141.4, heading at +533, rail at +783
   ========================================================================== */
 /* flow-root contains .lineup__manjira's 141.4px top margin. Without it that
   margin collapses out through the section, dragging the section box — and
   the decorative strip pinned to its top edge — 176px below the Figma
   position. Containing it moves the strip back up without shifting the
   manjira or anything below, since the margin simply moves inside the box. */
.lineup {
  position: relative;
  display: flow-root;
  /* Modest gap before gallery — enough to separate sections and let the
     statues peek in, without the tall empty band from the original. */
  padding-bottom: clamp(72px, 18vw, 300px);
}

.lineup__strip {                        /* Group 104 — clipped export */
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 1728 / 409;
  background: url("../assets/images/decor-strip-brings.png") center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: .9;
  z-index: 0;
}

.lineup__manjira {                      /* 3351:2 — 638.3 x 434.9 at y +141.4 */
  position: relative;
  z-index: var(--z-content);
  width: clamp(190px, 36.94vw, 638.3px);
  height: auto;
  margin: clamp(40px, 8.183vw, 141.4px) auto 0;
}

.lineup__head {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 1133px;
  margin: 20px auto 0;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--spacing-sm);
}

/* Below 1024 the rail is a native scroll-snap carousel; from 1024 up
   js/artists.js pins the section and scrubs the track horizontally. */
.rail {
  position: relative;
  z-index: var(--z-content);
  margin-top: clamp(26px, 5.093vw, 88px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2.569vw, 44.4px);    /* 455.6 pitch − 411.2 ring */
  padding-inline: clamp(var(--gutter), 5.787vw, 100px);
  width: max-content;
}

/* Pinned mode: the browser must stop scrolling the rail so GSAP owns x. */
.rail.is-pinned {
  overflow: hidden;
  scroll-snap-type: none;
  margin-top: 0;
}
.rail.is-pinned .rail__track { will-change: transform; }

/* Progress read-out for the pinned rail. */
.rail-progress {
  display: none;
  width: clamp(120px, 14vw, 240px);
  height: 2px;
  margin: clamp(20px, 2.5vw, 40px) auto 0;
  background: var(--color-hairline);
}
.rail-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--color-accent);
}

/* ==========================================================================
   GALLERY — 3300:16426 — region 7528.3 … 9437.6
   panel 1574 x 1909.3, padding 42, grid at +193
   ========================================================================== */
.gallery { position: relative; padding: 0 var(--gutter) clamp(0px, 6.366vw, 110px); }

.gallery__statue { position: absolute; height: auto; pointer-events: none; z-index: var(--z-decor); }
.gallery__statue--l { left: 0;  top: clamp(-186px, -18.627vw, 0px); width: 22.04%; }  /* 3300:16421 */
.gallery__statue--r { right: 0; top: clamp(-216px, -21.626vw, 0px); width: 19.26%; }  /* 3300:16418 */

.gallery__panel {
  position: relative;
  z-index: var(--z-content);
  width: var(--w-gallery);
  max-width: 1574px;
  margin-inline: auto;
  padding: clamp(20px, 2.431vw, 42px);
  border: 1px dashed var(--color-hairline-lt);
  border-radius: clamp(16px, 1.74vw, 30px);
  background: rgba(4, 13, 45, .34);
  backdrop-filter: blur(2px);
}

.grid {
  margin-top: clamp(20px, 4.456vw, 77px);
  display: grid;
  gap: clamp(14px, 1.615vw, 27.9px);
  grid-template-columns: 1fr;
}
.grid__col { display: grid; gap: clamp(14px, 1.615vw, 27.9px); align-content: start; }

/* ==========================================================================
   FAQ — 3300:16437 — region 9437.6 … 11232.6
   matkas at +0, heading at +298.2, panel at +399.2, then 475.8 of air
   ========================================================================== */
.faq {
  position: relative;
  padding: clamp(90px, 17.257vw, 298.2px) var(--gutter) clamp(120px, 27.535vw, 475.8px);
}

.faq__matka {                           /* Group 107 — clipped export */
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 1728 / 299;
  background: url("../assets/images/matka-pair.png") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: var(--z-decor);
}

.faq .h-section { position: relative; z-index: var(--z-content); }

.faq__panel {                           /* 3300:16440 — 1286 x 920 */
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 1286px;
  margin: clamp(20px, 1.563vw, 27px) auto 0;
  padding: var(--spacing-md);
  background: var(--color-bg-panel);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   FOOTER — 3300:16478 — 1728 x 335.6
   ========================================================================== */
.footer {
  position: relative;
  background: var(--color-bg-deep);
  padding: clamp(26px, 2.584vw, 44.65px) var(--gutter) clamp(20px, 2vw, 34px);
}

.footer__top { display: grid; gap: clamp(26px, 2.5vw, 44px); justify-items: center; }
.footer__logo img { width: clamp(120px, 10vw, 172.8px); height: auto; }

/* "Get your sponsored title" is too wide to sit three-up on a phone. */
.footer__cols {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-foot);
}
.footer__cols h2 {
  font-family: var(--font-body);
  font-variation-settings: "opsz" 24;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.2;
}
.footer__cols ul { margin-top: clamp(12px, 1.377vw, 23.8px); display: grid; gap: clamp(6px, 0.551vw, 9.5px); }
.footer__cols a { font-weight: 400; opacity: .92; }
.footer__cols a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom { margin-top: clamp(24px, 4vw, 66px); display: grid; gap: 16px; justify-items: center; }

.footer__copy {
  font-family: var(--font-body);
  font-variation-settings: "opsz" 20;
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.188;
  text-align: center;
  color: var(--color-text-foot);
}