/* ==========================================================================
   Avangard Show — style.css
   Mobile-first (320px →). Breakpoints: 640 / 768 / 900 / 1024 / 1200.
   Theme: FIRE, LIGHT & DARKNESS. Order: fonts → tokens → base → layout → components → sections → utilities → motion
   ========================================================================== */


/* ==========================================================================
   0. Fonts
   ========================================================================== */

/* Montserrat — latin-ext (display face: headings, nav, buttons) */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat — latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (limit layout shift while the webfonts swap in) */
@font-face {
  font-family: "Montserrat Fallback";
  font-style: normal;
  font-weight: 500 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 113.95%;
  ascent-override: 84.95%;
  descent-override: 22.03%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 400 500;
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("HelveticaNeue"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 106%;
  ascent-override: 91.4%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 101%;
  ascent-override: 95.9%;
  descent-override: 23.9%;
  line-gap-override: 0%;
}





/* ==========================================================================
   1. Tokens — FIRE, LIGHT & DARKNESS
   Deep warm blacks; the only light comes from fire (gold → orange → ember red).
   Cool colours (UV / pixel / bubble) live ONLY inside their show cards and
   gallery filter chips.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* darkness */
  --bg: #080504;
  --bg-deep: #050302;
  --surface: #110b09;
  --surface-2: #19110d;
  --surface-3: #221813;
  --line: rgba(255, 196, 140, .1);
  --line-2: rgba(255, 196, 140, .18);

  /* warm-tinted text (all AA on --bg / --surface) */
  --text: #f6ece2;
  --text-soft: #e4d5c7;
  --muted: #bfae9f;
  --ink: #140703;

  /* fire */
  --gold: #ffd27a;
  --amber: #ffb238;
  --flame: #ff8a2a;
  --ember: #ff5a1f;
  --brand: #e4222e;
  --gold-text: #f5c27c;

  /* cool accents — show cards / gallery chips only */
  --uv: #b14cff;
  --pixel: #22d3ee;
  --bubble: #7dd3fc;

  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 64px;
  --gutter: 16px;
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --section-pad: clamp(64px, 12vw, 128px);
  --mcta-h: 72px;

  --font-display: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* decorative fire (heading accents, rules, glows) */
  --fire: linear-gradient(100deg, #ffd27a 0%, #ff8a2a 48%, #e4222e 100%);
  /* button fill: same flame, kept bright enough under the label for dark ink text (≥ 4.5:1) */
  --fire-btn: linear-gradient(100deg, #ffd27a 0%, #ffa547 30%, #ff8a2a 56%, #f6612b 80%, #e8402c 100%);
  /* firelight glows */
  --glow-1: rgba(255, 138, 42, .55);
  --glow-2: rgba(255, 106, 31, .3);
  --horizon: linear-gradient(90deg, rgba(255, 150, 60, 0) 0%, rgba(255, 168, 80, .55) 50%, rgba(255, 150, 60, 0) 100%);

  --glass: rgba(14, 9, 7, .58);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 640px) {
  :root { --gutter: 20px; }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
  }
}


/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-deep);
  scrollbar-color: #3a2a22 var(--bg-deep);
  font-synthesis: style;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

strong, b {
  font-weight: 700;
}

::selection {
  background: rgba(255, 138, 42, .42);
  color: #fff;
}

[hidden] {
  display: none !important;
}

/* Focus — keyboard rings only (with a :focus fallback for Safari < 15.4) */
a:focus,
button:focus,
summary:focus,
[tabindex]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  summary:focus:not(:focus-visible),
  [tabindex]:focus:not(:focus-visible) {
    outline: none;
  }
}

.skip-link {
  position: fixed;
  top: calc(8px + var(--safe-t));
  left: var(--pad-l);
  z-index: 300;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}

.skip-link:focus {
  transform: none;
}


/* ==========================================================================
   3. Layout — sections sit in darkness, lit from their edges like torchlight
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* torchlight: warm radial glows blooming from the section edges (per section below) */
.section-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* glowing "horizon" between two sections: hairline with a hot centre + light pooling around it */
.ember-divider {
  position: relative;
  display: block;
  width: min(100% - 2 * var(--gutter), 1120px);
  height: 1px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  overflow: visible;
  color: transparent;
  background: linear-gradient(90deg, rgba(255, 150, 60, 0) 0%, rgba(255, 150, 60, .22) 22%, rgba(255, 200, 120, .7) 50%, rgba(255, 150, 60, .22) 78%, rgba(255, 150, 60, 0) 100%);
}

.ember-divider::before,
.ember-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

/* hot core */
.ember-divider::before {
  top: 0;
  width: min(36%, 240px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 210, 122, 0), #ffd27a 50%, rgba(255, 210, 122, 0));
  box-shadow: 0 0 10px 1px rgba(255, 150, 50, .75);
}

/* light pooling above and below the line */
.ember-divider::after {
  top: -70px;
  width: min(100%, 760px);
  height: 140px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 128, 40, .14), rgba(255, 128, 40, 0) 100%);
}

main [id] {
  scroll-margin-top: calc(var(--header-h) + var(--safe-t) + 12px);
}

.section[id] {
  scroll-margin-top: max(0px, calc(var(--header-h) + var(--safe-t) + 24px - var(--section-pad)));
}

.section-head {
  max-width: 46rem;
  margin: 0 auto clamp(28px, 6vw, 56px);
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--gold-text);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 178, 56, 0), var(--flame));
  box-shadow: 0 0 8px rgba(255, 138, 42, .6);
}

.eyebrow::after {
  background: linear-gradient(90deg, var(--flame), rgba(255, 178, 56, 0));
}

/* titles are lit from below, as if by a fire at the foot of the stage */
.section-title {
  color: var(--text);
  font-size: clamp(1.875rem, 1rem + 4.6vw, 3.875rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-title {
    background: linear-gradient(180deg, #fff6ec 0%, #f6ece2 48%, #ffc98f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.section-intro {
  max-width: 40rem;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.8vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: balance;
}


/* ==========================================================================
   4. Components
   ========================================================================== */

/* ---- Icons ---- */

.sprite {
  display: none;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  vertical-align: -.25em;
}

/* ---- Buttons ---- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .55em 1.3em;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform .2s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s;
}

.btn .icon {
  width: 1.25em;
  height: 1.25em;
}

.btn:active {
  transform: scale(.98);
}

.btn--sm {
  min-height: 40px;
  padding: .4em 1.05em;
  font-size: .875rem;
}

/* invisible hit-area extension → 44px tap target */
.btn--sm::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.btn--lg {
  min-height: 54px;
  padding: .6em 1.6em;
  font-size: 1.0625rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* small phones: keep one-line labels on full-width large buttons */
@media (max-width: 374.98px) {
  .btn--lg {
    padding-inline: 1.1em;
    font-size: 1rem;
  }
}

/* Primary = a glowing ember: gold → orange → red, dark ink label */
.btn--primary {
  isolation: isolate;
  color: var(--ink);
  background: var(--fire-btn);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, .7),
    inset 0 -2px 6px rgba(160, 30, 10, .28),
    0 0 0 1px rgba(255, 170, 90, .35),
    0 10px 34px -10px rgba(255, 110, 30, .85),
    0 0 46px -12px rgba(255, 150, 50, .6);
  text-shadow: 0 1px 0 rgba(255, 236, 200, .35);
}

.btn--primary > * {
  position: relative;
  z-index: 1;
}

/* ember shimmer (runs once on hover) */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 252, 240, 0) 35%, rgba(255, 252, 240, .55) 50%, rgba(255, 252, 240, 0) 65%) no-repeat;
  background-size: 260% 100%;
  background-position: 140% 0;
  opacity: 0;
}

.btn--ghost {
  color: var(--text);
  background: rgba(16, 10, 8, .45);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Instagram follow: warm outline (no cool brand gradient on page level) */
.btn--ig {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 170, 90, .1), rgba(255, 120, 40, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 178, 56, .5), 0 8px 26px -14px rgba(255, 130, 40, .8);
}

.btn--ig .icon {
  color: var(--gold);
}

.btn__sub {
  margin-left: .35em;
  font-size: .8125em;
  font-weight: 500;
  opacity: .85;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 225, .85),
      inset 0 -2px 6px rgba(160, 30, 10, .24),
      0 0 0 1px rgba(255, 190, 110, .55),
      0 14px 40px -10px rgba(255, 110, 30, 1),
      0 0 64px -10px rgba(255, 160, 60, .75);
    transform: translateY(-1px);
  }

  .btn--primary:hover::before {
    animation: ember-shimmer 1.1s var(--ease) both;
  }

  .btn--ghost:hover {
    background: rgba(255, 170, 90, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .5), 0 8px 28px -14px rgba(255, 130, 40, .8);
  }

  .btn--ig:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 190, 90, .85), 0 10px 32px -12px rgba(255, 130, 40, 1);
    transform: translateY(-1px);
  }
}

/* Montserrat for every button-like control and the nav (body copy stays Inter) */
.chip,
.site-nav__link,
.show-card__cta,
.hero__link,
.mobile-cta__btn,
.site-footer__top,
.lang-suggest__close {
  font-family: var(--font-display);
}

/* ---- Language switch (segmented HR | EN — always visible, header top-right) ---- */

.lang-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .2), 0 4px 18px -8px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.lang-switch__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em; /* optically centre letter-spaced caps */
  transition: color .2s, background-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* 44px-tall hit area without growing the control */
.lang-switch__opt::after {
  content: "";
  position: absolute;
  inset: -6px -1px;
}

.lang-switch__opt[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(180deg, #fff6ea 0%, #f3dcc2 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 16px -2px rgba(255, 170, 80, .55);
  cursor: default;
}

.lang-switch__opt:focus {
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch__opt:not([aria-current="page"]):hover {
    color: var(--text);
    background: rgba(255, 190, 120, .1);
  }
}

/* ---- Filter chips (cool colours allowed here, per category) ---- */

.chip {
  --c: 255, 196, 140;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255, 190, 130, .04);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  transition: color .2s, background-color .25s, box-shadow .25s;
}

.chip[data-filter="fire"]  { --c: 255, 138, 42; }
.chip[data-filter="uv"]    { --c: 177, 76, 255; }
.chip[data-filter="pixel"] { --c: 34, 211, 238; }

.chip:not([data-filter="all"])::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--c));
  box-shadow: 0 0 8px rgba(var(--c), .9);
}

.chip[aria-pressed="true"] {
  color: var(--text);
  background: rgba(var(--c), .16);
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), .85), 0 6px 24px -8px rgba(var(--c), .75);
}

.chip[data-filter="all"][aria-pressed="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, #fff6ea 0%, #f3dcc2 100%);
  box-shadow: 0 6px 22px -8px rgba(255, 170, 80, .7);
}

@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):hover {
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(var(--c), .55);
  }
}

/* ---- Social links ---- */

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials__link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 190, 130, .05);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .2s, box-shadow .3s, transform .3s var(--ease);
}

.socials__link .icon {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .socials__link:hover {
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(255, 178, 56, .6), 0 8px 26px -10px rgba(255, 138, 42, .85);
    transform: translateY(-2px);
  }
}

/* ---- Missing image placeholder (build-time fallback) ---- */

.img-missing {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(80% 60% at 30% 80%, rgba(255, 106, 31, .2), transparent 70%),
    var(--surface-2);
}


/* ==========================================================================
   5. Sections
   ========================================================================== */

/* ---- Header (transparent over the hero → dark glass when .is-scrolled) ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: var(--safe-t);
  color: var(--text);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--horizon) bottom center / 100% 1px no-repeat,
    rgba(8, 5, 4, .8);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.site-header.is-scrolled::before,
.no-js .site-header::before {
  opacity: 1;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before { background-color: rgba(8, 5, 4, .97); }
  .lang-switch { background-color: rgba(18, 12, 10, .9); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}

.brand__logo {
  width: auto;
  height: 28px;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .55));
}

.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

/* < 1024px: logo + HR|EN only (no hamburger, no nav, no header CTA) */
.site-nav,
.site-header__cta {
  display: none;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 359.98px) {
  .brand__logo { height: 26px; }
}

@media (min-width: 1024px) {
  .brand__logo { height: 34px; }

  .site-nav {
    display: block;
    margin-right: 6px;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 9px;
    color: rgba(246, 236, 226, .84);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s;
  }

  .site-header:not(.is-scrolled) .site-nav__link {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 7px;
    height: 2px;
    border-radius: 2px;
    background: var(--fire);
    box-shadow: 0 0 10px rgba(255, 138, 42, .7);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease);
  }

  .site-nav__link:hover,
  .site-nav__link.is-active,
  .site-nav__link[aria-current] {
    color: var(--text);
  }

  .site-nav__link:hover::after,
  .site-nav__link.is-active::after,
  .site-nav__link[aria-current]::after {
    transform: scaleX(1);
  }

  /* same width in HR and EN, so the HR|EN switch doesn't move when switching language */
  .site-header__cta {
    display: inline-flex;
    justify-content: center;
    min-width: 10.5rem;
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .site-nav__link {
    padding: 0 12px;
    font-size: .9rem;
  }

  .site-nav__link::after {
    left: 12px;
    right: 12px;
  }
}

/* ---- Hero (uncluttered: photo + title + subtitle + tagline + 1 button + 1 link) ---- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: max(560px, 100svh);
  padding-top: calc(var(--header-h) + var(--safe-t) + 32px);
  padding-bottom: calc(28px + var(--safe-b));
  overflow: hidden;
  background: var(--bg-deep);
}

.hero__media,
.hero > .img-missing {
  position: absolute;
  inset: 0;
  z-index: -3;
  aspect-ratio: auto;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* darkness closing in from the bottom (phones) — text sits in deep shadow */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 3, 2, .72) 0%, rgba(5, 3, 2, .2) 14%, rgba(5, 3, 2, 0) 24%),
    linear-gradient(0deg, var(--bg) 0%, rgba(8, 5, 4, .95) 20%, rgba(8, 5, 4, .84) 36%, rgba(8, 5, 4, .52) 52%, rgba(8, 5, 4, .12) 68%, rgba(8, 5, 4, 0) 78%),
    radial-gradient(140% 70% at 50% 50%, rgba(5, 3, 2, 0) 55%, rgba(5, 3, 2, .45) 100%);
}

/* firelight pooling at the foot of the hero (slow flicker) */
.hero__overlay::after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  height: 60%;
  background: radial-gradient(60% 70% at 50% 100%, rgba(255, 110, 30, .2), rgba(255, 90, 31, .06) 55%, rgba(255, 90, 31, 0) 100%);
  transform-origin: 50% 100%;
}

.hero__content {
  position: relative;
}

/* local scrim: keeps AA contrast wherever the copy lands on the photo */
.hero__content::before {
  content: "";
  position: absolute;
  inset: -48px -10% -20px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 46% at 40% 54%, rgba(8, 5, 4, .55) 0%, rgba(8, 5, 4, .3) 55%, rgba(8, 5, 4, 0) 100%);
}

.hero__title,
.hero__subtitle,
.hero__tagline {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 26px rgba(0, 0, 0, .45);
}

.hero__title {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(3.25rem, 16.4vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: initial;
}

.hero__title-accent {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: .06em;
  padding-bottom: .04em;
  color: var(--flame);
  text-shadow: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-accent {
    background: var(--fire);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(255, 110, 30, .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  }
}

.hero__subtitle {
  max-width: 24ch;
  margin-bottom: 12px;
  color: var(--text);
  font-size: clamp(1.1875rem, 5.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* tagline: lighter voice — small letter-spaced caps in warm gold */
.hero__tagline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 52ch;
  color: var(--gold-text);
  font-size: clamp(.75rem, 3.5vw, .9375rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-wrap: balance; /* no lone "LIGHT." on a second line */
}

.hero__tagline::before {
  content: "";
  flex: none;
  width: 22px;
  height: 1px;
  margin-top: .75em;
  background: linear-gradient(90deg, rgba(255, 178, 56, 0), var(--flame));
  box-shadow: 0 0 8px rgba(255, 138, 42, .8);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 28px;
}

.hero__ctas .btn {
  width: 100%;
}

.hero__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  color: var(--text-soft);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 190, 120, 0);
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
  transition: color .2s, text-decoration-color .25s;
}

.hero__link .icon {
  width: 18px;
  height: 18px;
  color: var(--amber);
  transition: transform .3s var(--ease);
}

.hero__link:hover {
  color: var(--text);
  text-decoration-color: rgba(255, 190, 120, .7);
}

.hero__link:hover .icon {
  transform: translateX(4px);
}

/* 320px: one-line tagline without the dash */
@media (max-width: 359.98px) {
  .hero__tagline { letter-spacing: .11em; }
  .hero__tagline::before { display: none; }
}

/* short phones (iPhone SE & co.): keep the CTA above the fold */
@media (max-width: 639.98px) and (max-height: 700px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--safe-t) + 16px);
    padding-bottom: calc(18px + var(--safe-b));
  }

  .hero__title { margin-bottom: 14px; font-size: clamp(3rem, 15vw, 3.5rem); }
  .hero__subtitle { margin-bottom: 10px; }
  .hero__ctas { margin-top: 20px; gap: 2px; }
}

@media (min-width: 481px) {
  .hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
  }

  .hero__ctas .btn {
    width: auto;
  }

  .hero__link {
    align-self: auto;
  }
}

@media (min-width: 900px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--safe-t) + 48px);
    padding-bottom: clamp(64px, 11vh, 120px);
  }

  /* darkness from the left + the bottom; she stays lit on the right */
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(5, 3, 2, .7) 0%, rgba(5, 3, 2, 0) 18%),
      linear-gradient(0deg, var(--bg) 0%, rgba(8, 5, 4, .95) 5%, rgba(8, 5, 4, .4) 20%, rgba(8, 5, 4, 0) 38%),
      linear-gradient(90deg, rgba(8, 5, 4, .94) 0%, rgba(8, 5, 4, .82) 26%, rgba(8, 5, 4, .45) 48%, rgba(8, 5, 4, .08) 68%, rgba(8, 5, 4, 0) 80%),
      radial-gradient(120% 120% at 70% 45%, rgba(5, 3, 2, 0) 50%, rgba(5, 3, 2, .5) 100%);
  }

  .hero__overlay::after {
    inset: auto 0 0 -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(60% 70% at 30% 100%, rgba(255, 110, 30, .2), rgba(255, 90, 31, .05) 55%, rgba(255, 90, 31, 0) 100%);
  }

  .hero__content::before {
    inset: -64px auto -48px -12%;
    width: 78%;
  }

  .hero__subtitle { max-width: 26ch; margin-bottom: 14px; }
  .hero__title { margin-bottom: 26px; font-size: clamp(4.75rem, 7.4vw, 7rem); }
  .hero__ctas { margin-top: 36px; }
}

/* wide screens: her face sits at ≈ 51% of the viewport — keep the title on the dark side */
@media (min-width: 1200px) {
  .hero__title { font-size: clamp(4.75rem, 5.6vw, 6rem); }
}

/* very wide screens: pull the copy (and the logo, to stay aligned) further into the darkness */
@media (min-width: 1600px) {
  .site-header__inner,
  .hero__content {
    max-width: 1480px;
  }
}

/* phones (< 900px): let the first row of the trust band peek under the hero */
@media (max-width: 899.98px) {
  .hero { min-height: max(560px, calc(100svh - 52px)); }
}

/* phones in landscape: compact hero so title, subtitle, tagline and the WhatsApp button
   all fit in ≈ 360–430px of height (the sticky bar stays hidden until the user scrolls) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + var(--safe-t) + 8px);
    padding-bottom: calc(12px + var(--safe-b));
  }

  .hero__title { margin-bottom: 8px; font-size: clamp(2.5rem, 14svh, 3.5rem); }
  .hero__subtitle { max-width: 40ch; margin-bottom: 4px; font-size: clamp(1.0625rem, 5.4svh, 1.375rem); }
  .hero__ctas { margin-top: 12px; }
}

/* ---- Trust band (slim, directly under the hero) ---- */

.trust-band {
  position: relative;
  padding-block: 16px;
  background:
    radial-gradient(60% 140% at 50% 50%, rgba(255, 130, 40, .07), rgba(255, 130, 40, 0) 100%),
    var(--bg);
}

.trust-band::before,
.trust-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--horizon);
  opacity: .8;
  pointer-events: none;
}

.trust-band::before { top: 0; }
.trust-band::after { bottom: 0; }

.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 36px;
  color: var(--text-soft);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
}

.trust__item .icon {
  width: 20px;
  height: 20px;
  color: var(--amber);
  filter: drop-shadow(0 0 6px rgba(255, 138, 42, .55));
}

@media (min-width: 375px) {
  .trust__item { font-size: .84375rem; }
}

@media (min-width: 640px) {
  .trust__item { font-size: .875rem; }
}

@media (min-width: 900px) {
  .trust-band { padding-block: 20px; }

  .trust {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0;
  }

  .trust__item {
    position: relative;
    justify-content: center;
    padding-inline: clamp(16px, 3vw, 40px);
  }

  .trust__item:first-child { padding-left: 0; }
  .trust__item:last-child { padding-right: 0; }

  .trust__item + .trust__item::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 168, 80, 0), rgba(255, 168, 80, .45), rgba(255, 168, 80, 0));
  }
}

/* ---- Section torchlight (edge glows; all warm) ---- */

.shows > .section-glow {
  background:
    radial-gradient(60% 34% at 0% 4%, rgba(255, 120, 40, .14), rgba(255, 120, 40, 0) 100%),
    radial-gradient(55% 30% at 100% 98%, rgba(255, 90, 31, .1), rgba(255, 90, 31, 0) 100%);
}

.videos > .section-glow {
  background:
    radial-gradient(58% 34% at 100% 14%, rgba(255, 150, 50, .11), rgba(255, 150, 50, 0) 100%),
    radial-gradient(48% 30% at 0% 88%, rgba(255, 106, 31, .09), rgba(255, 106, 31, 0) 100%);
}

.benefits > .section-glow {
  background:
    radial-gradient(52% 28% at 0% 20%, rgba(255, 178, 56, .08), rgba(255, 178, 56, 0) 100%),
    radial-gradient(62% 32% at 100% 90%, rgba(255, 106, 31, .12), rgba(255, 106, 31, 0) 100%);
}

.gallery > .section-glow {
  background:
    radial-gradient(52% 28% at 100% 4%, rgba(255, 120, 40, .11), rgba(255, 120, 40, 0) 100%),
    radial-gradient(52% 26% at 0% 100%, rgba(255, 90, 31, .09), rgba(255, 90, 31, 0) 100%);
}

.instagram > .section-glow {
  background: radial-gradient(64% 38% at 50% 100%, rgba(255, 138, 42, .1), rgba(255, 138, 42, 0) 100%);
}

/* campfire under the contact card (slow flicker, see Motion) */
.contact > .section-glow {
  background:
    radial-gradient(48% 30% at 0% 0%, rgba(255, 178, 56, .07), rgba(255, 178, 56, 0) 100%),
    radial-gradient(75% 48% at 60% 100%, rgba(255, 110, 30, .2), rgba(255, 90, 31, .06) 55%, rgba(255, 90, 31, 0) 100%);
  transform-origin: 60% 100%;
}

/* ---- Shows (always 2×2) ---- */

.shows__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 960px;
  margin-inline: auto;
}

.show-card {
  --accent: var(--flame);
  --accent-rgb: 255, 138, 42;
  --card-r: var(--radius-sm);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--card-r);
  background: var(--surface-2);
  color: var(--text);
}

.show-card--fire   { --accent-rgb: 255, 106, 31; }
.show-card--uv     { --accent-rgb: 177, 76, 255; }
.show-card--pixel  { --accent-rgb: 34, 211, 238; }
.show-card--bubble { --accent-rgb: 125, 211, 252; }

/* hairline ring + warm firelight bloom (outside the clipped media, so it can bloom).
   The cool accent stays on the inset ring only — never spills onto the page. */
.show-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 190, .09), 0 18px 40px -26px rgba(255, 120, 40, .55);
  pointer-events: none;
  transition: box-shadow .4s var(--ease);
}

.show-card:hover::before,
.show-card:focus-within::before {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .9), 0 18px 54px -14px rgba(255, 120, 40, .6);
}

.show-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background: var(--surface-2);
}

.show-card__media picture,
.show-card__media img,
.show-card__media .img-missing {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.show-card__media img {
  object-fit: cover;
  transition: transform .9s var(--ease);
}

/* bottom darkness + soft vignette (performers in the dark) */
.show-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(6, 4, 3, .97) 0%, rgba(6, 4, 3, .9) 28%, rgba(6, 4, 3, .55) 52%, rgba(6, 4, 3, .12) 72%, rgba(6, 4, 3, 0) 84%),
    radial-gradient(120% 90% at 50% 35%, rgba(6, 4, 3, 0) 55%, rgba(6, 4, 3, .5) 100%);
}

.show-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #cffafe 0%, var(--bubble) 45%, #c4b5fd 100%);
  box-shadow: 0 0 18px rgba(125, 211, 252, .55);
  color: #06121c;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.show-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.show-card__body::before {
  content: "";
  width: 22px;
  height: 3px;
  margin-bottom: 6px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .95);
}

.show-card__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(1rem, 4.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.14;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .5);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.show-card__tagline {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-soft);
  font-size: clamp(.8125rem, 3.4vw, 1rem);
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  text-wrap: pretty;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* phones: reserve two tagline lines so names + accent bars line up across each 2×2 row */
@media (max-width: 639.98px) {
  .show-card__tagline { min-height: calc(2em * 1.35); }
}

.show-card__desc {
  display: none;
}

/* WhatsApp pill (show-specific prefilled message).
   NB: no backdrop-filter / filter / transform / contain / will-change on this pill or on
   .show-card__body — any of them makes it the containing block of its ::after and the
   "whole card is the tap target" overlay below collapses to the pill. */
.show-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch; /* phones: full-width pill (a 2-line label at ≤ 360px looks intended) */
  gap: 5px;
  max-width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 999px;
  background: rgba(8, 5, 4, .78);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 18px -6px rgba(var(--accent-rgb), .6);
  color: var(--text);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  transition: background-color .3s, box-shadow .3s var(--ease);
}

.show-card__cta .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .8));
}

.show-card__cta span {
  min-width: 0;
}

/* whole card is the tap target */
.show-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--card-r);
}

.show-card__cta:focus {
  outline: none;
}

.show-card__cta:focus::after {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@supports selector(:focus-visible) {
  .show-card__cta:focus:not(:focus-visible)::after {
    outline: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .show-card:hover .show-card__media img { transform: scale(1.06); }

  .show-card:hover .show-card__cta {
    background: linear-gradient(rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .2)), rgba(8, 5, 4, .78);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .95), 0 0 24px -4px rgba(var(--accent-rgb), .8);
  }
}

/* Bubble show — CSS iridescent bubbles (cool colours stay inside this card) */
.show-card__art--bubble {
  background:
    radial-gradient(70% 55% at 25% 20%, rgba(125, 211, 252, .28), transparent 70%),
    radial-gradient(65% 50% at 85% 72%, rgba(177, 76, 255, .3), transparent 70%),
    radial-gradient(50% 40% at 60% 42%, rgba(34, 211, 238, .12), transparent 70%),
    linear-gradient(160deg, #0d1626 0%, #140c22 55%, #080504 100%);
}

.bubble {
  position: absolute;
  top: var(--y, 20%);
  left: var(--x, 20%);
  width: var(--s, 20%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 56%, rgba(200, 235, 255, .07) 74%, rgba(255, 255, 255, .2) 100%);
  animation: bubble-float var(--d, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}

.bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7dd3fc, #b14cff, #ff7ab6, #ffb238, #a7f3d0, #7dd3fc);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 92%, #000 97%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 78%, #000 92%, #000 97%, transparent 100%);
  opacity: .8;
  animation: bubble-spin 14s linear infinite;
}

.bubble::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 20%;
  width: 32%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  transform: rotate(-35deg);
}

.bubble:nth-child(1) { --x: 8%;  --y: 10%; --s: 36%; --d: 9s;   --delay: -2s;   --dx: 6px;  --dy: -12px; }
.bubble:nth-child(2) { --x: 56%; --y: 5%;  --s: 22%; --d: 7s;   --delay: -5s;   --dx: -5px; --dy: -9px; }
.bubble:nth-child(3) { --x: 58%; --y: 30%; --s: 38%; --d: 11s;  --delay: -1s;   --dx: -8px; --dy: -14px; }
.bubble:nth-child(4) { --x: 12%; --y: 48%; --s: 18%; --d: 8s;   --delay: -3s;   --dx: 5px;  --dy: -10px; }
.bubble:nth-child(5) { --x: 40%; --y: 27%; --s: 12%; --d: 6.5s; --delay: -4s;   --dx: 4px;  --dy: -8px; }
.bubble:nth-child(6) { --x: 82%; --y: 20%; --s: 11%; --d: 7.5s; --delay: -6s;   --dx: -3px; --dy: -7px; }
.bubble:nth-child(7) { --x: 32%; --y: 60%; --s: 14%; --d: 10s;  --delay: -2.5s; --dx: 6px;  --dy: -11px; }

.shows__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 40rem;
  margin: 22px auto 0;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(255, 170, 90, .04);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-soft);
  font-size: .875rem;
  line-height: 1.45;
  text-align: left;
}

.shows__note .icon {
  width: 20px;
  height: 20px;
  color: var(--amber);
  filter: drop-shadow(0 0 6px rgba(255, 138, 42, .6));
}

/* phones: tighten so name + tagline + the one-line pill fit the 2×2 cards */
@media (max-width: 399.98px) {
  .show-card__body { padding: 10px; }
}

/* 320px: the pill may wrap to two lines — keep it a soft capsule; trim the rest */
@media (max-width: 359.98px) {
  .shows__grid { gap: 8px; }
  .show-card__body::before { display: none; }
  .show-card__cta { margin-top: 6px; border-radius: 14px; }
}

@media (min-width: 640px) {
  .show-card__body {
    gap: 6px;
    padding: 18px;
  }

  .show-card__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.5;
    text-wrap: pretty;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .show-card__cta {
    align-self: flex-start;
    min-height: 40px;
    margin-top: 10px;
    padding: 8px 16px 8px 12px;
    font-size: .875rem;
    gap: 8px;
  }

  .show-card__cta .icon { width: 18px; height: 18px; }

  .show-card__badge {
    top: 14px;
    left: 14px;
  }

  .shows__note {
    width: fit-content;
    margin-top: 28px;
    border-radius: 999px;
  }
}

@media (min-width: 768px) {
  .shows__grid { gap: 20px; }
  .show-card { --card-r: var(--radius); }
}

/* laptops/desktops: landscape cards at the full content width → the whole 2×2 is ≈ 790px
   tall, so the first row's WhatsApp CTAs sit above the fold right after the "Nastupi" jump */
@media (min-width: 1024px) {
  .shows__grid { max-width: 1136px; }
  .show-card { aspect-ratio: 16 / 11; }

  .show-card__body {
    gap: 8px;
    padding: 26px;
  }

  .show-card__body::before {
    width: 32px;
    margin-bottom: 8px;
  }

  .show-card__desc {
    font-size: .9375rem;
  }

  .show-card__cta {
    font-size: .9375rem;
  }
}

/* ---- Videos ---- */

.videos__layout {
  display: grid;
  gap: 28px;
}

.video {
  min-width: 0;
  margin: 0;
}

.videos__featured .video--short {
  width: 100%;
  max-width: min(320px, calc(76vh * .5625));
  max-width: min(320px, calc(76svh * .5625));
  margin-inline: auto;
}

.yt {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: #fff;
  text-align: left;
  box-shadow: 0 20px 50px -30px rgba(255, 110, 30, .45);
}

.video--short .yt,
.yt[data-short] {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
}

.yt__poster,
.yt__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.yt__poster img {
  object-fit: cover;
  transition: transform .8s var(--ease);
}

/* vignette + bottom darkness */
.yt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 190, .08), inset 0 0 60px 8px rgba(5, 3, 2, .55);
  background: linear-gradient(0deg, rgba(8, 5, 4, .55) 0%, rgba(8, 5, 4, 0) 45%), rgba(8, 5, 4, .1);
}

.yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--fire-btn);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, .7),
    0 0 0 6px rgba(255, 138, 42, .16),
    0 0 40px -4px rgba(255, 120, 30, .9);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.yt__play::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255, 170, 80, .65);
  border-radius: 50%;
  animation: pulse-ring 2.8s var(--ease) infinite;
}

.yt__play .icon {
  width: 24px;
  height: 24px;
  margin-left: 3px;
  color: var(--ink);
}

.yt__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 5, 4, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .2);
  color: var(--text);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.yt__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember);
}

.yt:focus {
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .yt:hover .yt__poster img { transform: scale(1.05); }
  .yt:hover .yt__play { transform: scale(1.08); }
}

.yt__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #000;
}

.video--short .yt__frame,
.yt__frame[data-short],
.yt__frame--short {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
}

.yt__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 12px;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.videos__featured .video__title {
  text-align: center;
}

/* mobile: horizontal scroll-snap rail that bleeds to the screen edges */
.videos__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 12px;
  margin-left: calc(var(--pad-l) * -1);
  margin-right: calc(var(--pad-r) * -1);
  padding: 6px var(--pad-r) 14px var(--pad-l);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-l);
  scroll-padding-right: var(--pad-r);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.videos__rail::-webkit-scrollbar {
  display: none;
}

.videos__rail > .video {
  scroll-snap-align: start;
}

.videos__more {
  margin-top: 32px;
  text-align: center;
}

/* ≥ 640 (portrait tablets up): Short on the left + all other videos in a 2-column grid —
   every video visible at once, no hidden horizontal rail */
@media (min-width: 640px) {
  .videos__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.9fr);
    align-items: start;
    gap: 20px;
  }

  .videos__featured .video--short {
    max-width: none;
  }

  .videos__featured .video__title {
    text-align: left;
  }

  .videos__rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 20px 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
}

@media (min-width: 900px) {
  .videos__layout {
    gap: 24px;
  }

  .videos__rail {
    gap: 24px 20px;
  }

  .videos__more {
    margin-top: 44px;
  }
}

/* ---- Benefits ---- */

.benefits__grid {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start; /* titles + text start at the same height across a row */
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 150, 60, .07), rgba(255, 150, 60, 0) 60%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.benefit__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 70%, rgba(255, 150, 50, .26), rgba(255, 106, 31, .06) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 178, 56, .24);
  color: var(--amber);
}

.benefit__icon .icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(255, 138, 42, .55));
}

.benefit__title {
  margin-top: 2px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.benefit__text {
  grid-column: 2;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.benefit--safety {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 106, 31, .2), rgba(255, 106, 31, 0) 60%),
    var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 42, .55), 0 20px 54px -26px rgba(255, 106, 31, .75);
}

.benefit--safety .benefit__icon {
  background: var(--fire-btn);
  box-shadow: 0 0 22px -4px rgba(255, 120, 30, .85);
  color: var(--ink);
}

.benefit--safety .benefit__icon .icon {
  filter: none;
}

@media (min-width: 640px) {
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .benefit {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    padding: 24px;
  }

  .benefit__icon {
    grid-row: auto;
    margin-bottom: 8px;
  }

  .benefit__text {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  .benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .benefit {
    padding: 28px;
  }

  .benefit__title {
    font-size: 1.1875rem;
  }
}

/* ---- Process ---- */

.process {
  margin-top: clamp(48px, 9vw, 88px);
  padding: 26px 18px;
  border-radius: var(--radius);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 130, 40, .08), rgba(255, 130, 40, 0) 100%),
    linear-gradient(180deg, rgba(255, 190, 130, .025), rgba(255, 190, 130, .005));
  box-shadow: inset 0 0 0 1px var(--line);
}

.process__title {
  margin-bottom: 24px;
  font-size: clamp(1.375rem, 5vw, 2rem);
  font-weight: 800;
  text-align: center;
}

.process__steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.process__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: -18px;
  left: 21px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 138, 42, .75), rgba(255, 138, 42, .06));
}

.process__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fire-btn);
  box-shadow: 0 0 0 4px rgba(255, 138, 42, .14), 0 0 24px -4px rgba(255, 120, 30, .9);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.process__step-title {
  margin: 9px 0 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.process__step-text {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.55;
}

@media (min-width: 640px) {
  .process {
    padding: 32px;
  }
}

@media (min-width: 900px) {
  .process {
    padding: 40px;
  }

  .process__title {
    margin-bottom: 32px;
  }

  .process__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .process__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .process__step:not(:last-child)::before {
    top: 21px;
    right: -20px;
    bottom: auto;
    left: 60px;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 138, 42, .75), rgba(255, 138, 42, .06));
  }

  .process__step-title {
    margin-top: 4px;
  }
}

/* ---- CTA band ---- */

.cta-band {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(32px, 6vw, 56px);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -36px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 120, 30, .16), rgba(255, 120, 30, 0));
}

@media (min-width: 640px) {
  .cta-band {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
}

/* ---- Gallery ---- */

.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

/* uniform square tiles (focal-point crops; the lightbox shows the full photo): rows end
   level at every width instead of ragged masonry columns; an incomplete last row (or a
   filtered set) is centred. Columns: 2 → 3 (≥ 640) → 4 (≥ 1024). */
.gallery__grid {
  --cols: 2;
  --gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  margin: 0;
}

.gallery__link {
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: box-shadow .4s var(--ease);
}

.gallery__link picture {
  height: 100%;
}

.gallery__link img,
.gallery__link .img-missing {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

/* soft vignette: every photo sits in darkness */
.gallery__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 190, .07), inset 0 0 40px 4px rgba(5, 3, 2, .55);
  background: linear-gradient(0deg, rgba(8, 5, 4, .35), rgba(8, 5, 4, 0) 40%);
  transition: opacity .3s;
}

@media (hover: hover) and (pointer: fine) {
  .gallery__link:hover {
    box-shadow: 0 16px 44px -16px rgba(255, 120, 30, .6);
  }

  .gallery__link:hover img { transform: scale(1.05); }
  .gallery__link:hover::after { opacity: .6; }
}

@media (min-width: 640px) {
  .gallery__filters { margin-bottom: 30px; }
  .gallery__grid { --cols: 3; --gap: 14px; }
}

@media (min-width: 768px) {
  .gallery__link { border-radius: 14px; }
}

/* 4 columns from 1024 (landscape tablets / small laptops): the gallery stays ≈ 1.5 screens */
@media (min-width: 1024px) {
  .gallery__grid { --cols: 4; --gap: 16px; }
}

/* phones: the first 8 photos (4 even rows) + "show all photos (22)"; items after them are
   .is-extra until main.js adds .is-expanded (button tap or any filter chip). No JS → all shown. */
.gallery__more {
  display: flex;
  width: fit-content;
  margin: 20px auto 0;
}

@media (max-width: 639.98px) {
  .js .gallery__grid:not(.is-expanded) > .is-extra { display: none; }
}

@media (min-width: 640px) {
  .gallery__more { display: none; }
}

html:not(.js) .gallery__more {
  display: none;
}

/* ---- Lightbox (created by JS) ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(64px + var(--safe-t)) var(--pad-r) calc(84px + var(--safe-b)) var(--pad-l);
  overflow: hidden;
  overscroll-behavior: contain;
  border: 0;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(255, 110, 30, .1), rgba(255, 110, 30, 0) 100%),
    rgba(5, 3, 2, .97);
  color: var(--text);
  animation: fade-in .25s var(--ease);
}

dialog.lightbox:not([open]) {
  display: none;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, .86);
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  touch-action: pan-y pinch-zoom;
}

.lightbox__figure picture {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.lightbox__figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(86vh - 150px);
  max-height: min(86svh, calc(100svh - 190px - var(--safe-t) - var(--safe-b)));
  border-radius: 10px;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 120, 30, .4);
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transition: opacity .25s;
}

.lightbox__figure.is-loading img {
  opacity: .5;
}

.lightbox__caption {
  max-width: 60ch;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.45;
  text-align: center;
}

.lightbox__count {
  position: fixed;
  top: calc(26px + var(--safe-t));
  left: var(--pad-l);
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 200, 150, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .22);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .2s, box-shadow .25s;
}

.lightbox__close .icon,
.lightbox__prev .icon,
.lightbox__next .icon {
  width: 24px;
  height: 24px;
}

.lightbox__close {
  top: calc(12px + var(--safe-t));
  right: var(--pad-r);
}

.lightbox__prev,
.lightbox__next {
  bottom: calc(18px + var(--safe-b));
}

.lightbox__prev { left: var(--pad-l); }
.lightbox__next { right: var(--pad-r); }

@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover,
  .lightbox__prev:hover,
  .lightbox__next:hover {
    background: rgba(255, 170, 90, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 178, 56, .6), 0 0 24px -6px rgba(255, 130, 40, .8);
  }
}

@media (min-width: 900px) {
  .lightbox {
    padding: 72px 104px;
  }

  .lightbox__figure img {
    max-height: min(86svh, calc(100svh - 150px));
  }

  .lightbox__prev,
  .lightbox__next {
    top: 50%;
    bottom: auto;
    width: 56px;
    height: 56px;
    margin-top: -28px;
  }

  .lightbox__prev { left: 28px; }
  .lightbox__next { right: 28px; }
  .lightbox__close { top: 20px; right: 28px; }
  .lightbox__count { top: 34px; left: 32px; }
}

/* ---- Instagram ---- */

.ig-card {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 16px;
  border-radius: var(--radius);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255, 138, 42, .08), rgba(255, 138, 42, 0) 100%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -40px rgba(0, 0, 0, .95), 0 24px 70px -40px rgba(255, 110, 30, .35);
}

/* the follow button sits under the feed (the embed already shows the profile header) */
.ig-card__foot {
  margin-top: 14px;
}

.ig-card__foot .btn--ig {
  width: 100%;
}

.ig-embed {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.ig-embed__fallback {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 28px 16px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(255, 120, 30, .12), rgba(255, 120, 30, 0) 100%),
    var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: .9375rem;
  text-align: center;
}

.ig-embed__fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 190, 120, .45);
  text-underline-offset: .25em;
}

.ig-embed.is-loaded .ig-embed__fallback {
  display: none;
}

/* With JS + autoload: reserve ≈ the embed's final height (embed.js sizes the profile to
   ≈ 0.69 × width + 206px) so the section doesn't jump when the feed arrives, and keep the
   placeholder on top of the still-rendering iframe until it is ready. */
.js .ig-embed[data-autoload="true"]:not(.is-loaded) {
  position: relative;
  min-height: clamp(380px, calc(69vw + 162px), 640px); /* phones: card + container padding = 64px */
}

.js .ig-embed[data-autoload="true"]:not(.is-loaded) .ig-embed__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
}

/* while loading: a neutral "loading" line instead of the "can't be shown" error copy */
.ig-embed__loading {
  display: none;
}

.ig-embed.is-loading .ig-embed__fallback > p:not(.ig-embed__loading) {
  display: none;
}

.ig-embed.is-loading .ig-embed__fallback > .ig-embed__loading {
  display: block;
}

/* a single live ember says "loading" without words */
.ig-embed.is-loading .ig-embed__fallback::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 138, 42, .18), 0 0 10px 1px rgba(255, 138, 42, .8);
  animation: live-dot 1.6s ease-in-out infinite;
}

/* Instagram injects inline min-width: 326px — must not overflow 320px phones */
.ig-embed .instagram-media,
.ig-embed iframe {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.ig-embed .instagram-media {
  width: 100% !important;
  border-radius: var(--radius-sm) !important;
}

/* the feed is a white panel: dim + warm it slightly, as if lit by firelight */
.ig-embed iframe {
  filter: brightness(.88) sepia(.14);
}

.ig-embed__frame {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
}

@media (min-width: 640px) {
  .ig-card {
    padding: 24px;
  }

  .ig-card__foot {
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }

  .ig-card__foot .btn--ig {
    width: auto;
  }

  /* tablets: card + container padding = 88px; capped at the 712px-wide desktop embed */
  .js .ig-embed[data-autoload="true"]:not(.is-loaded) {
    min-height: min(calc(69vw + 145px), 697px);
  }
}

@media (min-width: 768px) {
  .ig-embed__frame { height: 640px; }
}

/* ---- Contact (heading + lit conversion card + socials/legal) ---- */

.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.section-head--left,
.contact__head {
  margin: 0;
  text-align: left;
}

.section-head--left .section-intro {
  margin-inline: 0;
}

.section-head--left .eyebrow::before {
  display: none;
}

/* the conversion card: person + 3 big buttons + reply note, lit from below */
.contact__card {
  position: relative;
  min-width: 0;
  padding: 18px 16px 16px;
  border-radius: var(--radius);
  background:
    radial-gradient(100% 50% at 50% 0%, rgba(255, 150, 60, .1), rgba(255, 150, 60, 0) 100%),
    radial-gradient(100% 60% at 50% 100%, rgba(255, 106, 31, .1), rgba(255, 106, 31, 0) 100%),
    linear-gradient(180deg, rgba(26, 18, 14, .94), rgba(14, 9, 7, .94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 140, .14),
    inset 0 1px 0 rgba(255, 214, 170, .12),
    0 40px 90px -40px rgba(0, 0, 0, .95),
    0 30px 80px -40px rgba(255, 110, 30, .5);
}

.person {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.person__photo,
.person > .img-missing {
  flex: none;
  width: 64px;
  height: 64px;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(255, 138, 42, .8), 0 0 26px -2px rgba(255, 110, 30, .75);
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.person__photo {
  object-fit: cover;
}

.person > div {
  min-width: 0;
}

.person__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.person__role {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.35;
}

.contact__actions {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 18px;
}

/* contact rows: icon bubble + label, number/email on a second line */
.contact__actions .btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
  justify-items: start;
  align-items: center;
  column-gap: 14px;
  row-gap: 1px;
  min-height: 66px;
  padding: 10px 18px 10px 11px;
  text-align: left;
}

.contact__actions .btn .icon {
  grid-row: 1 / span 2;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 11px;
  border-radius: 50%;
  background: rgba(255, 200, 150, .1);
  color: var(--gold);
}

.contact__actions .btn--primary .icon {
  background: rgba(20, 7, 3, .14);
  box-shadow: inset 0 0 0 1px rgba(20, 7, 3, .12);
  color: var(--ink);
}

.contact__actions .btn__label {
  max-width: 100%;
  line-height: 1.25;
}

.contact__actions .btn__sub {
  grid-column: 2;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .85;
  overflow-wrap: anywhere;
}

.contact__actions .btn--primary .btn__sub {
  opacity: .9;
  font-weight: 600;
}

.contact__reply {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-inline: 4px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.45;
}

/* a single live ember */
.contact__reply::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 138, 42, .18), 0 0 10px 1px rgba(255, 138, 42, .8);
  animation: live-dot 2.6s ease-in-out infinite;
}

.contact__meta {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.legal {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.6;
}

.legal__title {
  margin-bottom: 6px;
  color: var(--gold-text);
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 374.98px) {
  .contact__card { padding: 16px 14px 14px; }
  .contact__actions .btn { column-gap: 12px; padding-right: 14px; }
  .contact__actions .btn .icon { padding: 10px; }
}

@media (min-width: 380px) {
  .contact__card { padding: 20px 18px 18px; }
}

/* tablets: keep the single column at a comfortable reading width */
@media (min-width: 640px) {
  .contact__layout {
    max-width: calc(640px + var(--pad-l) + var(--pad-r));
    gap: 32px;
  }

  .contact__card { padding: 28px; }

  .person__photo,
  .person > .img-missing {
    width: 72px;
    height: 72px;
  }
}

/* desktop: heading + meta on the left, the card on the right spanning both rows */
@media (min-width: 1024px) {
  .contact__layout {
    max-width: 1200px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-areas:
      "head card"
      "meta card";
    align-items: start;
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 40px;
  }

  .contact__head { grid-area: head; padding-top: 16px; }
  .contact__card { grid-area: card; padding: 32px; }
  .contact__meta { grid-area: meta; align-self: end; }

  .contact .section-title {
    font-size: clamp(2.5rem, 4.4vw, 3.875rem);
  }

  .contact__actions {
    gap: 12px;
    margin-top: 24px;
  }

  .contact__actions .btn {
    min-height: 72px;
    padding-right: 24px;
  }
}

/* ---- Footer (embers dying out) ---- */

.site-footer {
  position: relative;
  /* no room kept for the sticky bar: main.js hides it once the contact buttons are reached */
  padding: 48px 0 calc(40px + var(--safe-b));
  background:
    var(--horizon) top center / min(100%, 1120px) 1px no-repeat,
    radial-gradient(50% 120px at 50% 0%, rgba(255, 128, 40, .12), rgba(255, 128, 40, 0) 100%),
    var(--bg-deep);
  text-align: center;
}

.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.site-footer__logo {
  width: auto;
  height: 34px;
}

.site-footer__tagline {
  max-width: 36ch;
  color: var(--gold-text);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-footer__copy {
  max-width: 60ch;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.6;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  transition: box-shadow .25s, color .2s;
}

.site-footer__top::after {
  content: "\2191";
  color: var(--amber);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__top:hover {
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(255, 178, 56, .6), 0 8px 26px -12px rgba(255, 138, 42, .8);
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-bottom: calc(48px + var(--safe-b));
  }
}

/* ---- Language suggestion (drops from the header, pointing at the HR|EN switch) ----
   position:absolute (not fixed): it sits under the switch at the top of the page and
   scrolls away with the hero instead of covering every section until dismissed. */

.lang-suggest {
  position: absolute;
  top: calc(var(--header-h) + var(--safe-t) + 10px);
  left: var(--pad-l);
  right: var(--pad-r);
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(24, 16, 12, .95);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .16), 0 24px 60px -16px rgba(0, 0, 0, .9), 0 0 40px -20px rgba(255, 120, 30, .6);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  animation: suggest-in .5s var(--ease) both;
}

/* caret under the 88px-wide HR|EN switch, flush with the header's right edge */
.lang-suggest::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 38px;
  width: 12px;
  height: 12px;
  border-radius: 2px 0 0 0;
  background: rgba(24, 16, 12, .95);
  box-shadow: inset 1px 1px 0 rgba(255, 210, 160, .16);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(45deg);
}

.lang-suggest p {
  flex: 1 1 100%;
  margin: 0 0 2px;
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.45;
}

.lang-suggest .btn {
  min-height: 44px;
  color: var(--ink);
  background: linear-gradient(180deg, #fff6ea 0%, #f3dcc2 100%);
  box-shadow: 0 6px 18px -8px rgba(255, 170, 80, .7);
}

.lang-suggest__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  transition: color .2s, background-color .2s;
}

.lang-suggest__close:hover {
  color: var(--text);
  background: rgba(255, 190, 130, .07);
}

@media (min-width: 640px) {
  .lang-suggest {
    left: auto;
    width: 380px;
    right: max(var(--pad-r), calc((100vw - 1200px) / 2 + var(--gutter)));
  }
}

/* ≥ 1024px the header CTA sits right of the switch → drop the caret */
@media (min-width: 1024px) {
  .lang-suggest::before { display: none; }
}

/* ≥ 1600px the header container is 1480px wide (see hero) → stay aligned with it */
@media (min-width: 1600px) {
  .lang-suggest { right: calc((100vw - 1480px) / 2 + var(--gutter)); }
}


/* ==========================================================================
   6. Utilities
   ========================================================================== */

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-center {
  text-align: center;
}


/* ==========================================================================
   7. Motion (everything decorative is off under prefers-reduced-motion)
   ========================================================================== */

@keyframes flicker {
  0%, 100% { opacity: .82; }
  9%       { opacity: .94; }
  17%      { opacity: .78; }
  26%      { opacity: 1; }
  38%      { opacity: .86; }
  51%      { opacity: .97; }
  63%      { opacity: .8; }
  74%      { opacity: 1; }
  86%      { opacity: .88; }
}

@keyframes ember-shimmer {
  0%   { opacity: 0; background-position: 140% 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}

@keyframes bubble-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(var(--dx, 6px), var(--dy, -12px), 0) scale(1.04); }
}

@keyframes bubble-spin {
  to { transform: rotate(1turn); }
}

@keyframes pulse-ring {
  0%   { opacity: .8; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes live-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 138, 42, .18), 0 0 10px 1px rgba(255, 138, 42, .8); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 138, 42, 0), 0 0 14px 2px rgba(255, 160, 60, .95); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes suggest-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-settle {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* smooth only after load (main.js adds .is-loaded): the browser's own jump to a URL
     #fragment on page load stays instant instead of a multi-thousand-pixel animation */
  html.is-loaded {
    scroll-behavior: smooth;
  }

  .hero__media img {
    animation: hero-settle 2.6s var(--ease) both;
  }

  .hero__title,
  .hero__subtitle,
  .hero__tagline,
  .hero__ctas {
    animation: hero-rise .9s var(--ease) both;
  }

  .hero__subtitle { animation-delay: .08s; }
  .hero__tagline  { animation-delay: .14s; }
  .hero__ctas     { animation-delay: .22s; }

  /* firelight: a slow, irregular flicker on two glows only */
  .hero__overlay::after {
    animation: flicker 7.5s ease-in-out infinite;
    will-change: opacity;
  }

  .contact > .section-glow {
    animation: flicker 9s ease-in-out -3s infinite;
    will-change: opacity;
  }

  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  :is(.shows__grid, .benefits__grid, .process__steps, .videos__rail, .contact__actions) > [data-reveal]:nth-child(2) { --reveal-delay: .08s; }
  :is(.shows__grid, .benefits__grid, .process__steps, .videos__rail, .contact__actions) > [data-reveal]:nth-child(3) { --reveal-delay: .16s; }
  :is(.shows__grid, .benefits__grid, .process__steps, .videos__rail, .contact__actions) > [data-reveal]:nth-child(4) { --reveal-delay: .24s; }
  :is(.shows__grid, .benefits__grid, .process__steps, .videos__rail, .contact__actions) > [data-reveal]:nth-child(5) { --reveal-delay: .32s; }
  :is(.shows__grid, .benefits__grid, .process__steps, .videos__rail, .contact__actions) > [data-reveal]:nth-child(6) { --reveal-delay: .4s; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .bubble,
  .bubble::before,
  .yt__play::before,
  .contact__reply::before,
  .hero__overlay::after,
  .contact > .section-glow,
  .btn--primary::before {
    animation: none !important;
  }
}

/* Gallery heading is a full sentence ("Vatra, svjetlo i pokret – uhvaćeni u kadru.") — keep it to ~2 balanced lines on phones */
.gallery .section-title {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.55rem, 6.6vw, 3rem);
  line-height: 1.12;
  text-wrap: balance;
}

/* ==========================================================================
   Show cards: portrait (4:5) at every width so the costumes stay visible
   (the photos are all portrait; landscape cards cropped them to a face strip)
   ========================================================================== */
@media (min-width: 768px) {
  .shows__grid { max-width: 880px; margin-inline: auto; }
  .show-card { aspect-ratio: 4 / 5; }
}

/* Bubble show: translucent soap bubbles drifting over the photo.
   Realistic film: almost invisible body, hair-thin Fresnel rim, faint thin-film
   iridescence, a small window reflection + a weak opposite reflection.
   mix-blend-mode: screen → bubbles only ADD light, the photo always shows through. */
.show-card__bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.show-card__bubbles .bubble {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 68% 76%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 13%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 66%, rgba(205, 230, 255, .035) 80%, rgba(225, 240, 255, .11) 91%, rgba(255, 255, 255, .3) 98.5%, rgba(255, 255, 255, 0) 100%);
}

/* thin-film interference colours, strongest right at the rim, fading inward */
.show-card__bubbles .bubble::before {
  background: conic-gradient(from 200deg,
    rgba(255, 120, 200, .9), rgba(255, 214, 120, .7), rgba(140, 255, 210, .6),
    rgba(110, 190, 255, .85), rgba(190, 130, 255, .8), rgba(255, 120, 200, .9));
  -webkit-mask: radial-gradient(closest-side, transparent 74%, rgba(0, 0, 0, .18) 86%, rgba(0, 0, 0, .75) 96%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 74%, rgba(0, 0, 0, .18) 86%, rgba(0, 0, 0, .75) 96%, transparent 100%);
  opacity: .56;
  filter: blur(.3px);
}

/* soft "window" reflection, not a white blob */
.show-card__bubbles .bubble::after {
  top: 15%;
  left: 21%;
  width: 24%;
  height: 13%;
  border-radius: 45%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 62%, rgba(255, 255, 255, 0));
  filter: blur(.4px);
  opacity: .85;
}

.show-card__bubbles .bubble:nth-child(1)  { --x: 4%;  --y: 4%;  --s: 22%; --d: 11s;  --delay: -3s; --dx: 5px;  --dy: -10px; }
.show-card__bubbles .bubble:nth-child(2)  { --x: 70%; --y: 2%;  --s: 18%; --d: 9s;   --delay: -5s; --dx: -5px; --dy: -9px; }
.show-card__bubbles .bubble:nth-child(3)  { --x: 81%; --y: 26%; --s: 12%; --d: 8s;   --delay: -1s; --dx: -4px; --dy: -11px; }
.show-card__bubbles .bubble:nth-child(4)  { --x: 2%;  --y: 34%; --s: 15%; --d: 10s;  --delay: -6s; --dx: 6px;  --dy: -12px; }
.show-card__bubbles .bubble:nth-child(5)  { --x: 67%; --y: 46%; --s: 9%;  --d: 7s;   --delay: -2s; --dx: -3px; --dy: -8px; }
.show-card__bubbles .bubble:nth-child(6)  { --x: 14%; --y: 54%; --s: 7%;  --d: 7.5s; --delay: -7s; --dx: 4px;  --dy: -7px; }
.show-card__bubbles .bubble:nth-child(7)  { --x: 85%; --y: 48%; --s: 6%;  --d: 8.5s; --delay: -3s; --dx: -3px; --dy: -9px; }
.show-card__bubbles .bubble:nth-child(8)  { --x: 30%; --y: 12%; --s: 6%;  --d: 6s;   --delay: -4s; --dx: 3px;  --dy: -6px; }
.show-card__bubbles .bubble:nth-child(9)  { --x: 56%; --y: 13%; --s: 5%;  --d: 6.5s; --delay: -2s; --dx: -2px; --dy: -6px; }
.show-card__bubbles .bubble:nth-child(10) { --x: 89%; --y: 11%; --s: 5%;  --d: 7s;   --delay: -5s; --dx: -2px; --dy: -7px; }

/* ==========================================================================
   Hero on tablets/desktops: the UV dancer photo has a pure-black background,
   so show it WHOLE (never zoomed/cropped) on the right, merged into black
   ========================================================================== */
@media (min-width: 1024px), (min-width: 768px) and (min-aspect-ratio: 801/1000) {
  .hero { background: #000; }

  .hero .hero__media {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--header-h) + 12px) 2vw 24px 0;
  }

  .hero .hero__media img {
    width: min(64vw, 1400px);
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: 100% 50%;
  }
}

/* ==========================================================================
   Kontakt: contact card (left) + Instagram embed (right) — twin panels,
   identical look and equal size; stacked on phones (contact first)
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
}

.contact__grid > .panel {
  position: relative;
  grid-area: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 18px 16px 16px;
  border-radius: var(--radius);
  background:
    radial-gradient(100% 50% at 50% 0%, rgba(255, 150, 60, .1), rgba(255, 150, 60, 0) 100%),
    radial-gradient(100% 60% at 50% 100%, rgba(255, 106, 31, .1), rgba(255, 106, 31, 0) 100%),
    linear-gradient(180deg, rgba(26, 18, 14, .94), rgba(14, 9, 7, .94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 140, .14),
    inset 0 1px 0 rgba(255, 214, 170, .12),
    0 40px 90px -40px rgba(0, 0, 0, .95),
    0 30px 80px -40px rgba(255, 110, 30, .5);
}

@media (min-width: 640px) {
  .contact__grid > .panel { padding: 24px; }
}

.contact__card { gap: 16px; }

.contact__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.contact__foot .legal {
  flex: 1 1 220px;
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}

.ig-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ig-card__profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.ig-card__profile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-card__profile .icon { flex: none; width: 28px; height: 28px; color: #ff8a5c; }
.ig-card__head .btn--ig { flex: none; }

/* the embed fills the rest of the panel, so both panels end at the same line */
.ig-card .ig-embed {
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
  overflow: hidden;
  border-radius: 12px;
}

@media (min-width: 900px) {
  .ig-card .ig-embed { min-height: 500px; }
}

.ig-card .ig-embed .instagram-media,
.ig-card .ig-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}


/* ==========================================================================
   Seamless hand-off from the hero to "Ponuda": nothing may be cut at the edge.
   1) the firelight pool sits higher and fades to zero at the hero's bottom edge
   2) room under the WhatsApp button so its glow dies out before the edge
   3) the next section's torchlight fades in instead of starting at full strength
   ========================================================================== */
.hero__overlay::after {
  background: radial-gradient(60% 55% at 50% 72%, rgba(255, 110, 30, .17), rgba(255, 90, 31, .05) 55%, rgba(255, 90, 31, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

.hero { padding-bottom: calc(64px + var(--safe-b)); }

@media (min-width: 768px) {
  .hero { padding-bottom: calc(80px + var(--safe-b)); }
}

.shows > .section-glow {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 220px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 220px);
}

/* keep the compact variants compact (CTA above the fold), with just enough room for the glow to fade */
@media (max-width: 639.98px) and (max-height: 700px) {
  .hero { padding-bottom: calc(40px + var(--safe-b)); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-bottom: calc(28px + var(--safe-b)); }
}

/* No photo descriptions under photos (user): the lightbox shows the image + counter only */
.lightbox__caption { display: none !important; }

/* contact buttons without a second line (WhatsApp: number intentionally hidden) → icon + label centred on one row */
.contact__actions .btn--single .icon { grid-row: auto; }
.contact__actions .btn--single .btn__label { align-self: center; }

/* ==========================================================================
   Back-to-top (phones/tablets) — replaces the old sticky WhatsApp bar.
   Labelled pill in the bottom-right corner; fades in once the hero is gone.
   ========================================================================== */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + var(--safe-b));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(14, 9, 7, .86);
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 140, .24),
    0 12px 32px -12px rgba(0, 0, 0, .95),
    0 0 26px -8px rgba(255, 120, 40, .55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gold);
  transform: rotate(-90deg);
}

.to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .to-top { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* Pixel card (user): show the user-specified crop of IMG_2222 EXACTLY (768×728, nearly square) —
   full card width from the top, nothing trimmed; its bottom (waist/rail) fades into the dark
   card behind the title. */
.show-card--pixel .show-card__media picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.show-card--pixel .show-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 728;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}

.show-card--pixel .show-card__media { background: #05080b; }

/* ==========================================================================
   Instagram click-to-load (GDPR): nothing from Meta loads until the visitor
   clicks. The placeholder fills the whole embed area of the twin panel.
   ========================================================================== */
.ig-card .ig-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 0;
  padding: 24px 20px;
  border-radius: 12px;
  background:
    radial-gradient(70% 45% at 50% 32%, rgba(214, 41, 118, .14), rgba(214, 41, 118, 0) 100%),
    radial-gradient(80% 50% at 50% 100%, rgba(255, 120, 30, .12), rgba(255, 120, 30, 0) 100%),
    var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
}

.ig-consent__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 28%, #d62976 58%, #962fbf 80%, #4f5bd5 100%);
  box-shadow: 0 14px 34px -14px rgba(214, 41, 118, .75);
}

.ig-consent__icon .icon { width: 34px; height: 34px; }

.ig-consent__note {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}

.ig-consent__link {
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* while loading: only the spinner dot remains */
.ig-embed.is-loading .ig-consent__icon,
.ig-embed.is-loading .ig-consent__btn,
.ig-embed.is-loading .ig-consent__note,
.ig-embed.is-loading .ig-consent__link { display: none; }

/* Contact card polish (verification findings)
   - one divider only above the business line (the old .legal rule added a second one)
   - desktop: the card is stretched to the Instagram panel's height → centre person + buttons
     vertically instead of leaving an empty block under the e-mail button
   - phones: even spacing around the buttons */
.contact__foot .legal { padding-top: 0; border-top: 0; }

@media (min-width: 900px) {
  .contact__card > .person { margin-top: auto; }
  .contact__card > .contact__actions { margin-bottom: auto; }
  .contact__card > .contact__foot { margin-top: 0; }
}

@media (max-width: 899.98px) {
  .contact__actions { margin-top: 8px; }
  .contact__card > .contact__foot { padding-top: 20px; }
}

/* ==========================================================================
   Privacy policy page (/pravila-privatnosti/, /en/privacy-policy/) + footer link
   ========================================================================== */
.site-footer__privacy {
  color: var(--muted);
  font-size: .8125rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 196, 140, .35);
  text-underline-offset: 3px;
}

.site-footer__privacy:hover { color: var(--text); }

.policy-page .site-header { position: sticky; top: 0; }

.policy {
  padding: 40px 0 64px;
}

.policy__inner { max-width: 720px; }

.policy__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.policy__body { color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.policy__body .legal-updated { margin: 0 0 28px; font-size: .8125rem; color: var(--muted); }
.policy__body section { padding: 20px 0; border-top: 1px solid var(--line); }
.policy__body h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}
.policy__body p { margin: 0 0 10px; }
.policy__body ul { margin: 0; padding-left: 1.1em; }
.policy__body li { margin: 0 0 8px; }
.policy__body li::marker { color: var(--flame); }
.policy__body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 178, 56, .6);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.policy__back { margin: 28px 0 0; }
.policy__back a { color: var(--gold); font-weight: 600; text-decoration: none; }