/* ==========================================================================
   Impact Entertainment - core stylesheet
   Design language: monumental dark editorial, gold as the single accent.
   Radius system: sharp (0) everywhere. Accent: gold only. Theme: dark, locked.
   ========================================================================== */

/* Sora variable, self hosted. Full Latin incl. Slovak diacritics.
   A different typeface from web-impact (Archivo) so the sibling sites do not
   share type. Licence: SIL Open Font License 1.1, see assets/fonts/OFL.txt */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
}

/* Playfair Display carries the headline voice: a high-contrast editorial serif,
   deliberately unlike web-impact's grotesque display. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-latin.woff2") format("woff2");
}

:root {
  --ink:        #0a0908;
  --ink-2:      #100e0b;
  --ink-3:      #17140f;
  --line:       rgba(242, 244, 249, 0.22);
  --line-soft:  rgba(244, 239, 230, 0.12);

  /* Accent role: soft champagne, added sparingly over the platinum base for a
     quiet high-end warmth. Names kept as --gold* for the whole codebase; only
     --gold-deep stays a neutral grey so muted text/borders/scrollbars remain
     cool and the colour reads decent, not loud. */
  --gold:       #c7a97a;
  --gold-hi:    #d8be93;
  --gold-deep:  #7f8391;

  --paper:      #d9dce4;
  --muted:      #888b96;

  --pad-x:      clamp(1.25rem, 5vw, 5.5rem);
  --gap-y:      clamp(5rem, 12vw, 11rem);

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  /* softer landing for scroll reveals, longer tail so nothing snaps */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.24, 1);
  /* headline masks: slow start, long glide */
  --ease-line:  cubic-bezier(0.19, 1, 0.22, 1);
  --nav-h:      88px;

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Sora", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.62;
  font-variation-settings: "wght" 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ----------------------------------------------------------- typography -- */

/* Sentence-case high-contrast serif, editorial not monumental. This is the
   core move that separates Magic from web-impact's uppercase grotesque. */
.display {
  font-family: var(--font-display);
  font-variation-settings: "wght" 640;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* emphasis stays in the same family: bold weight, no faux italic, no second font */
.display em, .display .em { font-style: normal; font-variation-settings: "wght" 820; }

.d-xl { font-size: clamp(2.1rem, 6.4vw, 7rem); }
.d-lg { font-size: clamp(1.9rem, 5vw, 4.5rem); }
.d-md { font-size: clamp(1.75rem, 4vw, 3.5rem); }
.d-sm { font-size: clamp(1.25rem, 2vw, 1.75rem); }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.45;
  color: var(--paper);
  max-width: 34ch;
}

.body-copy {
  color: var(--muted);
  max-width: 62ch;
}
.body-copy + .body-copy { margin-top: 1.1em; }
.body-copy strong { color: var(--paper); font-weight: 500; }

.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-variation-settings: "wght" 600;
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.gold { color: var(--gold); }

/* fallback for browsers without background-clip: paint the warm line champagne */
.sheen--warm { color: var(--gold); }

/* the sheen only paints where background-clip is supported, otherwise the
   text keeps its ordinary colour and nothing is lost */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .sheen {
    /* The colour underneath is what actually paints the glyphs. The gradient
       only rides over it. Without this, any part of the text the gradient
       image does not cover would clip to nothing and vanish. */
    background-color: var(--paper);
    background-image: linear-gradient(100deg,
      var(--paper) 0 42%, var(--gold-hi) 48%, #ffffff 50%, var(--gold-hi) 52%, var(--paper) 58% 100%);
    background-size: 300% 100%;
    /* both ends of the sweep keep the 300% image over the whole box */
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* a hero line that paints champagne instead of platinum, sweep kept */
  .sheen--warm {
    background-color: var(--gold);
    background-image: linear-gradient(100deg,
      var(--gold) 0 42%, #ffffff 49%, #ffffff 51%, var(--gold) 58% 100%);
  }
  .hero.is-ready .sheen { animation: sheen 1.9s 1s var(--ease) 1 forwards; }
  @keyframes sheen { to { background-position: 0% 0; } }
}

/* the logo picks up a slow gold glow on hover, no loop, no glare */
.nav__brand img { transition: filter 0.6s var(--ease); }
.nav__brand:hover img { filter: drop-shadow(0 0 18px rgba(242, 244, 249, 0.55)); }

/* ---------------------------------------------------------------- grain -- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0 var(--pad-x);
  background: linear-gradient(to bottom, rgba(10, 9, 8, 0.92), rgba(10, 9, 8, 0));
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 9, 8, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav__brand { flex: none; }
/* the logo files ship on black; screen blending drops the plate on any dark surface */
.brandmark { mix-blend-mode: screen; }
.nav__brand img { width: clamp(132px, 14vw, 184px); }

/* the wordmark is a lockup: the sparkle mark, then "Magic" in paper and
   "Happens" in the accent. Both parts scale together. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  letter-spacing: 0.1em;
  word-spacing: -0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
  transition: text-shadow 0.6s var(--ease);
}
.wordmark b { color: var(--gold); font-weight: 800; }
.wordmark__mark {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  color: var(--gold);
  transition: filter 0.6s var(--ease);
}
.nav__brand:hover .wordmark { text-shadow: 0 0 20px rgba(242, 244, 249, 0.55); }
.footer .wordmark { font-size: 1.3rem; }

/* editorial nav: sentence case, quiet tracking, not web-impact's wide caps */
.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.4rem);
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  font-variation-settings: "wght" 480;
  white-space: nowrap;
}
.nav__links a { position: relative; padding: 0.4rem 0; color: var(--paper); transition: color 0.3s var(--ease); }
.nav__links a:hover { color: var(--gold); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--gold); }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: clamp(0.5rem, 1.5vw, 1.25rem);
  border-left: 1px solid var(--line-soft);
  color: var(--muted);
}
.nav__lang a[aria-current="true"] { color: var(--gold); }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  padding: 0.5rem 0.9rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
}

/* ---------------------------------------------------------------- shell -- */

main { position: relative; z-index: 1; }

section { position: relative; }

.wrap {
  padding-inline: var(--pad-x);
  max-width: 1560px;
  margin-inline: auto;
}

.section { padding-block: var(--gap-y); }
.section--tight { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--alt { background: var(--ink-2); }

.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------- image slots -- */
/*  <figure class="shot"> renders a designed gold plate until a real photo
    is dropped in. The photo, once present, covers the plate entirely.       */

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 105%, rgba(242, 244, 249, 0.30), transparent 62%),
    radial-gradient(80% 60% at 18% 10%, rgba(242, 244, 249, 0.16), transparent 70%),
    linear-gradient(168deg, #191510 0%, #0b0a08 58%, #0a0908 100%);
  isolation: isolate;
}
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/logo-mark.webp") center / cover no-repeat;
  /* the mark ships as glow-on-black, so screen drops the plate and keeps the light */
  mix-blend-mode: screen;
  opacity: 0.5;
  z-index: 0;
}
.shot__note {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  max-width: 26ch;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.7;
  color: rgba(242, 244, 249, 0.8);
}
.shot img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot:has(img) .shot__note,
.shot:has(img)::before { display: none; }

.shot--21x9  { aspect-ratio: 21 / 9; }
.shot--16x9  { aspect-ratio: 16 / 9; }
.shot--3x2   { aspect-ratio: 3 / 2; }
.shot--4x5   { aspect-ratio: 4 / 5; }
.shot--1x1   { aspect-ratio: 1 / 1; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* subpage header: same construction, shorter */
.hero--sub { min-height: min(78dvh, 680px); }
.hero--sub .hero__inner { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media .shot { width: 100%; height: 100%; aspect-ratio: auto; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to top, rgba(10, 9, 8, 0.96) 4%, rgba(10, 9, 8, 0.35) 48%, rgba(10, 9, 8, 0.72) 100%);
}

.hero__inner {
  position: relative;
  z-index: 4;
  align-self: end;
  padding: 0 var(--pad-x) clamp(3rem, 7vw, 5.5rem);
  max-width: 1560px;
  margin-inline: auto;
  width: 100%;
}

.hero__title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__title .line {
  display: block;
  overflow: hidden;
  /* the mask must clear Slovak diacritics above and descenders below */
  padding: 0.2em 0 0.14em;
  margin: -0.2em 0 -0.14em;
}
.hero__title .line > span { display: block; }

.hero__row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .hero__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------- button -- */

/* rounded (pill) buttons with sentence-case labels: another clean break from
   web-impact, which uses sharp corners and uppercase button text. Interactive
   controls are pill; cards, tiles and inputs stay sharp (documented mixed rule). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  font-variation-settings: "wght" 540;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: var(--gold);
  color: #14100a;
  border: 1px solid var(--gold);
}
.btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }

.btn--ghost {
  background: rgba(10, 9, 8, 0.4);
  color: var(--paper);
  border: 1px solid rgba(244, 239, 230, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ------------------------------------------------------------ statement -- */

.statement { max-width: 22ch; }
.statement--wide { max-width: 30ch; }

.statement__foot {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  max-width: 78rem;
}
@media (min-width: 860px) {
  .statement__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ band (bleed) */

.band { position: relative; }
.band .shot { width: 100%; }

.band__caption {
  position: absolute;
  z-index: 5;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(1.75rem, 4vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  pointer-events: none;
}
.band__caption p { max-width: 40ch; color: var(--paper); }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.9), rgba(10, 9, 8, 0) 55%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- split -- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--media-first > *:first-child { order: 2; }
}

/* founder block on the About page: portrait plus a short intro */
.founder {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.founder__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  max-width: 360px;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__role {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}
@media (min-width: 900px) {
  .founder { grid-template-columns: 0.85fr 1.15fr; }
  .founder__photo { max-width: none; }
}

/* --------------------------------------------------------- capabilities -- */
/*  Sticky heading on the left, scrolling index on the right. The hovered
    row drives the image shown in the sticky column.                         */

.caps {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .caps { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .caps__aside { position: sticky; top: calc(var(--nav-h) + 3rem); }
}

.caps__stage {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: none;
}
@media (min-width: 1000px) { .caps__stage { display: block; } }
.caps__stage .shot { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s var(--ease); }
.caps__stage .shot:first-child,
.caps__stage .shot.is-active { opacity: 1; }
.caps__stage { aspect-ratio: 4 / 5; }

.caps__item { border-top: 1px solid var(--line-soft); }
.caps__item:last-child { border-bottom: 1px solid var(--line-soft); }

.caps__head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.35rem, 2.4vw, 2rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.caps__head:hover, .caps__item.is-open .caps__head { color: var(--gold); }

.caps__num {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  font-variation-settings: "wght" 600;
}
.caps__item.is-open .caps__num { color: var(--gold); }
.caps__title { flex: 1; }
.caps__sign {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}
.caps__sign::before, .caps__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
}
.caps__sign::after { transform: rotate(90deg); transition: transform 0.45s var(--ease); }
.caps__item.is-open .caps__sign::after { transform: rotate(0deg); }

.caps__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.caps__item.is-open .caps__panel { grid-template-rows: 1fr; }
.caps__panel > div { overflow: hidden; }
.caps__panel .inner { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.tag {
  border: 1px solid var(--line);
  padding: 0.42rem 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* -------------------------------------------------------------- clusters -- */

.clusters {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 780px)  { .clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .clusters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cluster__title {
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--gold-deep);
  color: var(--gold);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-variation-settings: "wght" 600;
}
.cluster li { padding: 0.42rem 0; color: var(--muted); }

/* ------------------------------------------------------------ tile grid -- */

/* the services grid reads as one rounded panel, softer than web-impact's flush
   sharp table. Outer corners rounded; inner cells clip to it via overflow. */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid rgba(242, 244, 249, 0.16);
  border-radius: 20px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* six services fill the grid exactly: 2 cols then 3 cols, never a stray empty cell */
@media (min-width: 700px)  { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
  background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  min-height: clamp(12rem, 18vw, 16rem);
  display: flex;
  flex-direction: column;
  /* number, heading and body read top down as one block */
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem);
  transition: background 0.4s var(--ease);
}
.tile:hover { background: var(--ink-3); }
.tile__k {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 0.4s var(--ease);
}
/* the heading and its number warm to champagne on hover */
.tile .display { transition: color 0.4s var(--ease); }
.tile:hover .display,
.tile:hover .tile__k { color: var(--gold); }
.tile--lit {
  background:
    radial-gradient(120% 120% at 100% 100%, rgba(199, 169, 122, 0.20), transparent 60%),
    var(--ink);
}

/* --------------------------------------------------------------- people -- */

.people {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.person {
  display: block;
  background: var(--ink);
  transition: background 0.45s var(--ease);
}
.person:hover { background: var(--ink-3); }
.person .shot { aspect-ratio: 4 / 5; }
.person .shot img { transition: opacity 0.7s var(--ease), transform 1.2s var(--ease); }
.person:hover .shot img { transform: scale(1.04); }

.person__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.6rem;
}
.person__role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  transition: color 0.35s var(--ease);
}
.person:hover .person__role { color: var(--gold); }
.person__more {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}

/* profile header: portrait beside the name, used on the owner pages */

.profile {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .profile { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
}
.profile .shot { aspect-ratio: 4 / 5; }

.facts {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.facts div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .facts div { grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr); align-items: baseline; }
}
.facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}
.facts dd { margin: 0; color: var(--paper); }

/* -------------------------------------------------------------- marquee -- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  user-select: none;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(1.5rem, 3vw, 3rem);
  animation: slide 46s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 3.25rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 244, 249, 0.55);
  white-space: nowrap;
}
.marquee__track span:nth-child(even) {
  color: var(--gold);
  -webkit-text-stroke: 0;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- partner ----- */

.partner {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 4.5rem);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(242, 244, 249, 0.10), transparent 60%),
    var(--ink-2);
}
@media (min-width: 900px) { .partner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

/* ----------------------------------------------------------------- cta --- */

.closing { text-align: left; }
.closing__quote {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 2px solid var(--gold);
  max-width: 52ch;
  color: var(--paper);
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.4rem);
  line-height: 1.5;
}

/* -------------------------------------------------------------- contact -- */
/*  Two columns: an inviting aside on the left, the form on a raised gold-lit
    panel on the right. Labels float, so the fields read clean until focused.  */

.contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .contact { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.contact__aside .lead { max-width: 26ch; }

.form-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(242, 244, 249, 0.12), transparent 58%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  overflow: hidden;
}
/* a thin gold seam runs down the left edge of the card */
.form-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--gold-hi), var(--gold-deep));
  z-index: 1;
}

.form { display: grid; gap: clamp(1.4rem, 2.5vw, 1.9rem); }
@media (min-width: 620px) {
  .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.5vw, 1.9rem); }
}

/* floating-label field: the label sits over the input, then lifts on focus or
   once the control holds a value */
.field { position: relative; display: block; }
.field label {
  position: absolute;
  left: 0;
  top: 1rem;
  font-size: 1rem;
  color: #8d857a;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.26);
  border-radius: 0;
  color: var(--paper);
  font: inherit;
  padding: 1rem 0 0.7rem;
  transition: border-color 0.3s var(--ease);
}
.field select { color: var(--paper); }
.field select option { background: var(--ink-2); color: var(--paper); }

/* placeholder is transparent so the floating label owns the resting state */
.field input::placeholder,
.field textarea::placeholder { color: transparent; }

.field input:focus,
.field textarea:focus,
.field select:focus { border-bottom-color: var(--gold); outline: none; }

.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field.is-filled label {
  transform: translateY(-1.35rem) scale(0.74);
  color: var(--gold);
  letter-spacing: 0.06em;
}
/* select always shows a value, so its label stays lifted */
.field--select label { transform: translateY(-1.35rem) scale(0.74); color: var(--gold-deep); }
.field--select select:focus + label { color: var(--gold); }

/* a soft underline that sweeps in from the left on focus, over the hairline */
.field::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }

.field textarea { resize: vertical; min-height: 3rem; }
.field .hint { display: block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.form .btn--gold { min-width: 12rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  font-size: 0.95rem;
  min-height: 1.4em;
}
.form__status[data-state="ok"]  { color: var(--gold); }
.form__status[data-state="err"] { color: #ef8a6a; }

.form__gdpr { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; }
.form__gdpr a:hover { color: var(--gold); }

.contact-list {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.contact-list dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  margin-bottom: 0.4rem;
}
.contact-list dd { margin: 0; }
.contact-list a:hover { color: var(--gold); }

/* --------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.footer__grid img { width: 168px; }
.footer h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}
.footer li { padding: 0.3rem 0; color: var(--muted); }
.footer li a:hover { color: var(--gold); }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
}
/* the cookie-settings control sits among the footer links and must read as one */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
.footer__base .linklike:hover { color: var(--gold); }

/* floating cookie-settings control, always reachable in the bottom-left corner */
.cc-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 30;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--gold);
  background: rgba(10, 9, 8, 0.82);
  border: 1px solid rgba(242, 244, 249, 0.45);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cc-fab:hover,
.cc-fab:focus-visible {
  opacity: 1;
  color: var(--gold-hi);
  border-color: var(--gold);
  outline: none;
}
@media (prefers-reduced-motion: reduce) { .cc-fab { transition: none; } }

/* ------------------------------------------------------- animated logo -- */
/*  The waveform from the logo, redrawn live on a canvas. It sits behind the
    hero copy and is removed by JS the moment a real photo is dropped in.     */

.wave {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.wave.is-lit { opacity: 0.55; }
.wave.is-hot { opacity: 0.85; }
.shot:has(img) .wave { display: none; }

/* once the canvas is running it replaces the static mark, otherwise two
   waveforms sit on top of each other and the headline loses the fight */
.shot.is-live::before { display: none; }

/* --------------------------------------------------------------- reel --- */
/*  One iframe at most, ever. Cards are static thumbnails until clicked.      */

.reel__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.reel__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.reel__facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.reel__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.66;
  transform: scale(1.01);
  transition: opacity 0.7s var(--ease), transform 1.1s var(--ease);
}
.reel__facade:hover img,
.reel__facade:focus-visible img { opacity: 0.88; transform: scale(1.045); }

.reel__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.88), rgba(10, 9, 8, 0) 62%);
  pointer-events: none;
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(3.25rem, 5vw, 4.5rem);
  height: clamp(3.25rem, 5vw, 4.5rem);
  transform: translate(-50%, -50%);
  background: var(--gold);
  display: grid;
  place-items: center;
  transition: background 0.35s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.play::before {
  content: "";
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent #14100a;
  margin-left: 0.18rem;
}
.reel__facade:hover .play,
.reel__facade:focus-visible .play { background: var(--gold-hi); transform: translate(-50%, -50%) scale(1.08); }

.play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--gold);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .play::after { animation: ring 2.6s var(--ease) infinite; }
}
@keyframes ring {
  0%   { transform: scale(0.86); opacity: 0.75; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.reel__meta {
  position: absolute;
  left: clamp(1rem, 3vw, 2.25rem);
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  text-align: left;
  pointer-events: none;
}
.reel__meta .who {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}
.reel__meta .what {
  color: var(--paper);
  font-family: var(--font-display);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1rem, 2vw, 1.65rem);
  max-width: 26ch;
}

.reel__rail {
  display: flex;
  gap: 1px;
  margin-top: 1px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
  padding-bottom: 2px;
}
.reel__rail::-webkit-scrollbar { height: 3px; }
.reel__rail::-webkit-scrollbar-thumb { background: var(--gold-deep); }

.reel__card {
  flex: 0 0 clamp(11rem, 22vw, 17rem);
  scroll-snap-align: start;
  position: relative;
  padding: 0;
  border: 0;
  background: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background 0.4s var(--ease);
}
.reel__card:hover { background: var(--ink-3); }
.reel__card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.5s var(--ease);
}
.reel__card:hover img,
.reel__card:focus-visible img,
.reel__card[aria-current="true"] img { opacity: 0.92; }
.reel__card span {
  display: block;
  padding: 0.85rem 1rem 1.1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}
.reel__card[aria-current="true"] { background: var(--ink-3); box-shadow: inset 0 2px 0 var(--gold); }
.reel__card[aria-current="true"] span { color: var(--paper); }

.reel__hint {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- sound ---- */

.sound[hidden] { display: none; }

.sound {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sound:hover { color: var(--gold); border-color: var(--line); }
.sound[aria-pressed="true"] { color: var(--gold); border-color: var(--line); }

.sound i {
  display: block;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 2px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 50% / 2px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 50% / 2px 6px no-repeat;
}
.sound[aria-pressed="true"] i { animation: eq 1.1s ease-in-out infinite alternate; }
@keyframes eq {
  from { background-size: 2px 4px, 2px 10px, 2px 6px; }
  to   { background-size: 2px 10px, 2px 4px, 2px 11px; }
}

/* -------------------------------------------------------------- reveals -- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1.1s var(--ease-soft), transform 1.25s var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* media settles a touch slower and scales down into place, so an image never
   arrives at the same beat as the copy beside it */
figure[data-reveal] {
  transform: translate3d(0, 44px, 0) scale(1.035);
  transition: opacity 1.3s var(--ease-soft), transform 1.5s var(--ease-soft);
}
figure[data-reveal].is-in { transform: translate3d(0, 0, 0) scale(1); }

.hero__title .line > span {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.35s var(--ease-line);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.hero.is-ready .hero__title .line > span { transform: translate3d(0, 0, 0); }
.hero.is-ready .hero__title .line > span { will-change: auto; }

/* everything under the headline follows it in, on the same curve */
.hero__row, .hero__inner > .eyebrow, .hero__inner > .lead {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 1.1s var(--ease-soft) 620ms, transform 1.1s var(--ease-soft) 620ms;
}
.hero.is-ready .hero__row,
.hero.is-ready .hero__inner > .eyebrow,
.hero.is-ready .hero__inner > .lead { opacity: 1; transform: translate3d(0, 0, 0); }
.hero__inner > .eyebrow { transition-delay: 240ms; }

/* the hero plate drifts as you scroll, GPU only, skipped where unsupported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band .shot > img,
    .band .shot::before {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes drift {
      from { transform: translate3d(0, -4%, 0) scale(1.1); }
      to   { transform: translate3d(0, 4%, 0) scale(1.1); }
    }
  }
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 960px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 1rem var(--pad-x) 2rem;
    background: rgba(10, 9, 8, 0.98);
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    transform: translateY(-120%);
    transition: transform 0.45s var(--ease);
  }
  .nav__links a { padding: 0.85rem 0; }
  .nav__links.is-open { transform: none; }
  .nav__toggle { display: block; }
  .nav__lang { border-left: 0; padding-left: 0; padding-top: 1rem; }
  .caps__stage { display: none; }
}

/* ------------------------------------------------------ reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], figure[data-reveal] { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .hero__row, .hero__inner > .eyebrow, .hero__inner > .lead { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .sound[aria-pressed="true"] i { animation: none; }
  .sheen { animation: none !important; }
  .play::after { animation: none; }
  .wave { display: none; }
}

@media print {
  .grain, .nav, .hero__media { display: none; }
  body { background: #fff; color: #000; }
}