/* ============================================================
   JONAS DE BRUYN — Magic · Message · Impact
   Draft site stylesheet
   ============================================================ */

@font-face {
  font-family: "Eleven Eleven";
  src: url("../fonts/ElevenEleven-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Eleven Eleven";
  src: url("../fonts/ElevenEleven-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Eleven Eleven";
  src: url("../fonts/ElevenEleven-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Clair d'Or";
  src: url("../fonts/ClairdOr-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clair d'Or";
  src: url("../fonts/ClairdOr-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sloop Script";
  src: url("../fonts/Sloop Script Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root{
  --ink:        #08080a;
  --ink-soft:   #101013;
  --panel:      #151518;
  --panel-line: rgba(245,242,234,0.09);
  --paper:      #f6f2e9;
  --paper-dim:  #cfc9bb;
  --gold:       #cbab6e;
  --gold-light: #e8d5a4;
  --gold-dim:   rgba(203,171,110,0.35);
  --shadow:     0 30px 80px rgba(0,0,0,0.45);

  --f-display: "Eleven Eleven", "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Clair d'Or", Georgia, serif;
  --f-script:  "Sloop Script", cursive;

  --container: 1240px;
  --pad: clamp(24px, 5vw, 96px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
/* The WebP <picture> wrapper added around most photos is otherwise an
   unstyled, unsized inline element -- every "width:100%; height:100%"
   img rule in this file was written assuming the img's own parent (the
   card, the gallery cell, ...) sizes it, and would silently break the
   moment an <img> gained a <picture> parent instead. display:contents
   would remove <picture> from the box tree entirely so the <img> inside
   keeps behaving exactly as if it were still a direct child; giving it a
   real block box at the same 100%/100% every wrapped photo already needs
   produces the identical fill behaviour without relying on contents,
   whose interaction with lazy-loaded/replaced content has enough known
   cross-engine edge cases to avoid by default. */
picture{ display: block; width: 100%; height: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

/* ---------- Accessibility ---------- */
.skip-link{
  position: fixed;
  top: -60px; left: 16px;
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: top .25s ease;
}
.skip-link:focus{ top: 16px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

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

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.container--wide{ max-width: 1520px; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 22px;
}
.eyebrow--nowrap{
  white-space: nowrap;
  font-size: clamp(9px, 2.2vw, 12px);
  letter-spacing: clamp(0.06em, 1.5vw, 0.32em);
}
.eyebrow.center{ justify-content:center; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.01em;
}

.script{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: 0;
}

.section-head{
  max-width: 720px;
  margin: 0 0 56px;
}
.section-head h2{
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  color: var(--paper);
}
.section-head p{
  margin-top: 20px;
  font-size: 17px;
  color: var(--paper-dim);
  max-width: 560px;
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
/* For headings whose intended line break is authored with <br>: the default
   720px cap is a few pixels too narrow for the longer line, which would wrap
   it a second time. */
.section-head--wide{ max-width: 940px; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 16px 34px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: all .35s ease;
  white-space: nowrap;
  appearance: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.btn-gold{
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover{
  background: var(--gold-light);
  transform: translateY(-2px);
}
.btn-ghost{
  border-color: rgba(245,242,234,0.35);
  color: var(--paper);
}
.btn-ghost:hover{
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}
.btn svg{ width:14px; height:14px; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay: .1s; }
.reveal-d2{ transition-delay: .2s; }
.reveal-d3{ transition-delay: .3s; }
.reveal-d4{ transition-delay: .4s; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 26px var(--pad);
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(8,8,10,0.86);
  backdrop-filter: blur(14px);
  padding-top: 16px;
  padding-bottom: 16px;
  border-color: var(--panel-line);
}
.nav__logo{ display:flex; align-items:center; height: 26px; flex-shrink: 0; }
.nav__logo img{ height: 100%; width:auto; max-width: none; }

.nav__links{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav__links > li{ display:flex; align-items:center; }
.nav__links a{
  display:inline-flex;
  align-items:center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--on-photo-gold);
  transition: right .35s ease;
}
.nav__links a:hover{ color: var(--paper); }
.nav__links a:hover::after{ right:0; }
/* Un-scoped var(--gold)/var(--gold-light) resolve to the theme's darker,
   light-surface gold here (nav isn't inside .band-dark/footer), which read
   as a mismatched dark underline/active colour against the Search and Play
   buttons' on-photo-gold in this same bar. var(--on-photo-gold) is the
   context-independent token those two already use, so this now matches
   them exactly instead of guessing a new colour. */
.nav__links a.active,
.nav:not(.scrolled):not(.menu-open) .nav__links > li > a.active{ color: var(--on-photo-gold); }
.nav__links a.active::after{ right:0; }

.nav__item--dropdown{ position:relative; }
.nav__item--dropdown > a{ display:flex; align-items:center; gap:6px; }
.nav__item--dropdown > a::before{
  content:"";
  width:6px; height:6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity:0.6;
}
.nav__dropdown{
  position:absolute; top:100%; left:50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  padding: 8px;
  margin-top: 14px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, visibility .2s ease;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  z-index:50;
}
.nav__dropdown::before{
  content:"";
  position:absolute; left:0; right:0; bottom:100%;
  height:14px;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.open .nav__dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown a{
  display:block;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  border-radius: 2px;
}
.nav__dropdown a:hover{ color: var(--gold-light); background: rgba(245,242,234,0.05); }

.nav__cta{ display:flex; align-items:center; gap: 16px; }
.nav__cta .btn{ padding: 12px 26px; }

.nav__enquire{ animation: navEnquireNudge 5.5s ease-in-out infinite; }
.nav__enquire:hover, .nav__enquire:focus-visible{ animation: none; }
@keyframes navEnquireNudge{
  0%, 82%, 100%{ transform: scale(1); }
  87%{ transform: scale(1.05); }
  92%{ transform: scale(0.99); }
  96%{ transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .nav__enquire{ animation: none; }
}

/* ---------- Language switcher ---------- */
.lang-switch{
  display:flex;
  align-items:center;
  gap: 8px;
}
.lang-btn{
  background:none;
  border:none;
  padding: 4px 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--paper-dim);
  transition: color .25s ease;
}
.lang-btn:hover{ color: var(--paper); }
.lang-btn.active{ color: var(--gold-light); }
.lang-switch--mobile{
  margin-top: 8px;
  gap: 16px;
}
.lang-switch--mobile .lang-btn{ font-size: 15px; }

/* ---------- Desktop language dropdown ---------- */
/* Reuses .nav__item--dropdown / .nav__dropdown (open on hover or .open,
   see the shared dropdown JS) for the panel mechanics; only the trigger
   button and the in-panel .lang-btn layout are dropdown-specific. */
.lang-dropdown__trigger{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  padding: 4px 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--paper-dim);
  transition: color .25s ease;
}
.lang-dropdown__trigger:hover,
.lang-dropdown.open .lang-dropdown__trigger{ color: var(--paper); }
.lang-dropdown__current{ font-variant-caps: all-small-caps; letter-spacing: 0.14em; }
.lang-dropdown__trigger svg{
  width:12px; height:12px;
  transition: transform .2s ease;
}
.lang-dropdown.open .lang-dropdown__trigger svg{ transform: rotate(180deg); }
.lang-dropdown__menu{ min-width: 150px; }
.lang-dropdown__menu .lang-btn{
  display:block;
  width:100%;
  text-align:left;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}
.lang-dropdown__menu .lang-btn:hover{ color: var(--gold-light); background: rgba(245,242,234,0.05); }
.lang-dropdown__menu .lang-btn.active{ color: var(--gold-light); }

.nav__burger{
  display:none;
  width: 26px; height: 18px;
  position: relative;
  background:none; border:none;
}
.nav__burger span{
  position:absolute; left:0; right:0; height:1px;
  background: var(--paper);
  transition: all .3s ease;
}
.nav__burger span:nth-child(1){ top:0; }
.nav__burger span:nth-child(2){ top:50%; margin-top:-0.5px; }
.nav__burger span:nth-child(3){ bottom:0; }
.nav__burger.open span:nth-child(1){ transform: translateY(8.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform: translateY(-8.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset:0;
  z-index: 190;
  background: var(--ink);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 22px;
  padding: 90px 20px 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.77,0,.18,1);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{
  font-size: 26px;
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--paper);
  text-align: center;
}
.mobile-menu a.active{ color: var(--gold-light); }
.mobile-menu__group{ display:contents; }
.mobile-menu__parent{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  font-size: 26px;
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--paper);
  text-align: center;
}
.mobile-menu__chevron{
  width:18px; height:18px; flex-shrink:0;
  transition: transform .3s ease;
}
.mobile-menu__parent[aria-expanded="true"] .mobile-menu__chevron{ transform: rotate(180deg); }
/* Collapsed by default (item 7): tapping the parent reveals the four
   sub-pages instead of always showing them, same 0fr/1fr grid technique
   the FAQ accordion already uses elsewhere on the site. */
.mobile-menu__sub{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
  width:100%;
}
.mobile-menu__parent[aria-expanded="true"] + .mobile-menu__sub{ grid-template-rows: 1fr; }
.mobile-menu__sub-inner{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding-top: 14px;
}
.mobile-menu__sub a{
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.mobile-menu__sub a:hover,
.mobile-menu__sub a.active{ color: var(--gold-light); }
/* Enquire must read as an action, not another nav link (item 8) -- same
   filled-gold treatment as .btn-gold elsewhere, sized down to sit
   comfortably among the display-font nav links instead of looming.
   .mobile-menu is its own fixed dark overlay, not a .band-dark context,
   so --ink/--gold here would resolve to the light-band values (the same
   trap fixed elsewhere this session) -- literal hex instead, matching
   .btn-gold's actual dark-on-gold rendering. */
.mobile-menu__enquire{
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #17171b !important;
  background: #cbab6e;
  padding: 14px 34px;
  border-radius: 2px;
  margin-top: 4px;
  transition: background-color .25s ease, transform .2s ease;
}
.mobile-menu__enquire:hover{ background: #e8d5a4; }
.mobile-menu__enquire:active{ transform: scale(.97); }
/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  height: 100svh;
  min-height: 620px;
  display:flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-image: url("../img/jonas-de-bruyn-belgian-champion-of-magic-hero.jpg");
  background-size: cover;
  background-position: 43% 22%;
  transform: scale(1.08);
  will-change: transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    /* Nav-contrast reinforcement: a short, steep band added at 0-14% that
       resolves back into the original curve by 30%. On hero photos with
       bright content right at the top (e.g. a white parasol on
       private-events.html), the original flat 0.4 start left the
       light on-photo nav icons/Enquire/burger with too little contrast.
       This only darkens the strip behind the nav; the rest of the hero's
       existing "breathing" look and the bottom title scrim are untouched. */
    linear-gradient(180deg, rgba(6,6,8,0.62) 0%, rgba(6,6,8,0.4) 14%, rgba(6,6,8,0.08) 30%, rgba(6,6,8,0.24) 62%, rgba(6,6,8,0.82) 100%),
    linear-gradient(90deg, rgba(6,6,8,0.68) 0%, rgba(6,6,8,0.36) 42%, rgba(6,6,8,0.12) 68%, rgba(6,6,8,0.08) 100%);
}
.hero__content{
  position: relative;
  z-index: 2;
  width:100%;
  padding: 0 var(--pad) 88px;
}
.hero__eyebrow{
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 26px;
  display:flex;
  align-items:center;
  gap:14px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero__eyebrow::before{ content:""; width:34px; height:1px; background: var(--gold); }

.hero__title{
  font-size: clamp(34px, 5.6vw, 78px);
  line-height: 1.05;
  max-width: 1100px;
  color: var(--paper);
  text-shadow: 0 4px 26px rgba(0,0,0,0.6);
}
.hero__name{
  display:block;
  white-space: nowrap;
}
.hero__name-logo{
  display:block;
  height: clamp(30px, 4.9vw, 68px);
  width: auto;
}
.hero__title .script{
  display:block;
  font-size: 1.05em;
}

.hero__sub{
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero__sub span{ color: var(--gold); }

.hero__actions{
  margin-top: 46px;
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__play{
  position:absolute;
  left: var(--pad);
  top: 130px;
  z-index:2;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(203,171,110,0.16);
  border: 1px solid var(--gold-dim);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  color: var(--paper);
  transition: all .35s ease;
}
.hero__play svg{ width:20px; height:20px; margin-left:2px; }
.hero__play:hover{
  background: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
}
.hero__scroll{
  position:absolute;
  right: var(--pad);
  bottom: 40px;
  z-index:2;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  color: var(--paper-dim);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero__scroll .line{
  width:1px; height: 54px;
  background: linear-gradient(var(--gold), transparent);
  position:relative;
  overflow:hidden;
}
.hero__scroll .line::after{
  content:"";
  position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--gold-light);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; }
  50%{ top:100%; }
  100%{ top:100%; }
}

/* ============================================================
   MARQUEE / TRUSTED BY
   ============================================================ */
.trusted{
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
  padding: 34px 0;
  background: var(--ink-soft);
}
.trusted__label{
  text-align:center;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 22px;
}
.marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__set{
  display:flex;
  align-items:center;
  gap: 72px;
  padding-right: 72px;
}
.marquee__set img{
  height: 36px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.6);
  /* Fading out (mouse leaves) can stay leisurely; fading in has to be near-
     instant or the highlight visibly lags the logo the track keeps moving. */
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.marquee__set img:hover{
  transition: opacity .08s linear, filter .08s linear, transform .08s linear;
}
.marquee__set img.logo--large{
  height: 50px;
}
.marquee__set img.logo--xl{
  height: 62px;
}
.marquee__set img[src*="cartier"]{ height: 36px; }
.marquee__set img[src*="schwarzkopf"]{ height: 61px; }
.marquee__set img[src*="porsche"]{ height: 51px; }
.marquee__set img[src*="lvmh"]{ height: 29px; }
.marquee__set img[src*="sennheiser"]{ height: 59px; }
.marquee__set img[src*="nestle"]{ height: 60px; }
.marquee__set img[src*="formula1"]{ height: 48px; }
.marquee__set img[src*="microsoft"]{ height: 32px; }
.marquee__set img:hover{
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding: 100px 0 130px; }
.about__grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:center;
}
.about__grid--reverse{ grid-template-columns: 1.15fr 0.85fr; }
.about__grid--reverse .about__frame-col,
.about__grid--reverse .about__frame{ order:2; }
.about__grid--reverse .about__text{ order:1; }
@media (max-width: 920px){
  .about__grid--reverse .about__frame-col,
  .about__grid--reverse .about__frame,
  .about__grid--reverse .about__text{ order:0; }
}
.about__frame{
  position: relative;
}
.about__frame img{
  /* This is the one place aspect-ratio drives an <img>'s own height
     directly (every other aspect-ratio in this file sizes a wrapper div,
     with a separate width:100%;height:100% rule filling it) -- now that
     every <img> also carries real width/height attributes for CLS
     prevention, height:auto is required here or the browser's own
     attribute-derived box wins over aspect-ratio and the portrait gets
     rendered at the source photo's full native height, squeezed into
     the column's width. */
  width:100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 23% 30%;
  border-radius: 2px;
  position: relative;
  z-index:2;
}
/* About "Man Behind the Magic" portrait: unlike every other .about__frame
   user, the source here is already a tall portrait (narrower than the
   frame's own 4:5 box), so cover crops the top/bottom rather than the
   sides -- the shared 23%/30% position (tuned for a wide landscape source)
   would cut into his head. He's off-centre right, looking up and out of
   frame to the left, so the crop is aimed to keep his face and the
   station's clock/dome architecture both in view. */
.crop-story-about img{ object-position: 68% 12%; }
.about__frame::before{
  content:"";
  position:absolute;
  top: 22px; left: 22px;
  right: -22px; bottom: -22px;
  border: 1px solid var(--gold-dim);
  z-index:1;
}
.about__text h2{
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.22;
  color: var(--paper);
  margin-bottom: 26px;
}
.about__text p{
  color: var(--paper-dim);
  font-size: 16.5px;
  max-width: 540px;
  margin: 0 0 16px;
}
.about__lang{
  margin-top: 22px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0.8;
}
/* Natural-sentence contextual discovery links (items 52-53) -- one or two
   per page, pointing to a genuinely related secondary page (Conference,
   Team Building) without a full CTA band. */
.cross-ref{
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper-dim);
}
.cross-ref a{
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-dim);
  transition: text-decoration-color .2s ease;
}
.cross-ref a:hover{ text-decoration-color: var(--gold-light); }
.section-link{
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold-dim);
  transition: text-decoration-color .2s ease;
}
.section-link:hover{ text-decoration-color: var(--gold-light); }

/* A quiet honest notice on pages removed from primary positioning
   (Hosting/Keynote/Team Training) -- still reachable by direct link,
   not deleted, but not part of the active public journey either. */
.legacy-notice{
  background: var(--sand);
  border-bottom: 1px solid var(--hairline);
  padding: 16px var(--pad);
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper-dim);
}
.legacy-notice a{
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about__stats{
  display:flex;
  gap: clamp(28px, 5vw, 56px);
  margin-top: 46px;
  flex-wrap: wrap;
}
.about__stat b{
  display:block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(34px,4vw,46px);
  color: var(--gold-light);
  line-height:1;
  font-variant-numeric: tabular-nums;
}
.about__stat--link{ transition: opacity .3s ease; }
.about__stat--link:hover{ opacity: 0.75; }
.about__stat span{
  display:block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* About page: a premium horizontal career timeline -- a journey, not a
   dated CV. No exact years are shown; only the left-to-right order
   communicates progression. Alternating above/below content keeps every
   node's connecting line at the same height regardless of which side
   carries a title only vs. a title + one short supporting line: each
   .career-timeline__item is a 3-row flex column (top slot / node row /
   bottom slot) with both slots reserving the same min-height, so every
   item's node-row lands at the same Y coordinate, which is what lets a
   single absolutely-positioned line (rather than one border per item)
   pass through every node at desktop widths. Reveal is the site's
   existing IntersectionObserver .reveal/.in system (no new JS): once
   .career-timeline gets .in, a single gold line draws left-to-right via
   one scaleX transform, and each node/content pair fades in with a
   transition-delay timed to when the line reaches it, so the career
   reads as unfolding along that one line rather than eight cards
   appearing independently. The sitewide prefers-reduced-motion rule
   above already forces every transition-duration to ~0, so reduced-
   motion users see the finished, fully-connected timeline immediately
   with no separate styling needed here. Below 901px the single overlay
   line is replaced by a per-item border (each item's own top border),
   because the track becomes horizontally scrollable there and content
   wider than the viewport can't be spanned by one left:0/right:0
   element -- the borders still read as one continuous line since every
   item shares the same node-row height, and needs no scroll-linked
   animation since the whole strip is already visible on swipe. */
.career-timeline{ margin-top: 44px; position: relative; }
.career-timeline__track{
  display: flex;
  align-items: stretch;
}
.career-timeline__line,
.career-timeline__line-fill{
  display: none;
}
.career-timeline__item{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 14px;
  text-align: center;
}
.career-timeline__slot{
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.career-timeline__slot--bottom{ justify-content: flex-start; }
.career-timeline__slot--top .career-timeline__content{ padding-bottom: 18px; }
.career-timeline__slot--bottom .career-timeline__content{ padding-top: 18px; }
.career-timeline__title{
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--paper);
  margin: 0 0 6px;
}
.career-timeline__support{
  font-size: 13.5px;
  color: var(--paper-dim);
  line-height: 1.5;
  margin: 6px 0 0;
}
/* TV Consulting, International Keynotes and Brand Collaborations carry
   longer support text than the shared 1/8-column width comfortably
   wraps -- widening just these three lets each read in 2 clean lines
   instead of 4-5 narrow ones. Safe to overflow the column: alternating
   top/bottom placement keeps every widened block clear of whichever
   neighbour shares its row (see the media query below for exact px).
   Each widened block is TRUE-centred on its own column's midpoint
   (margin-left: calc(50% - half its own width), text stays centred) so
   its subtitle lines up with the title above/below it -- a plain
   width+max-width:none override left the box flush at the column's own
   left edge instead (block boxes don't auto-centre), which visibly
   offset TV Consulting's and International Keynotes' subtitles from
   their titles. Plain margin-left:auto doesn't work here either: once
   width already exceeds the column, auto margins are zeroed by the CSS
   over-constraint rule instead of being solved for -- calc(50% - Xpx)
   sidesteps that by keeping the box's total width contribution exactly
   equal to 100% of the column, so nothing is over-constrained. */
@media (min-width: 901px){
  .career-timeline__item:nth-child(4) .career-timeline__support{ width: 230px; max-width: none; margin-left: calc(50% - 115px); margin-right: calc(50% - 115px); }
  .career-timeline__item:nth-child(7) .career-timeline__support{ width: 210px; max-width: none; margin-left: calc(50% - 105px); margin-right: calc(50% - 105px); }
  /* Last column has no right-hand neighbour, so centring it at the same
     width as 901-1299px would bleed past the container/viewport (the
     1024px overflow found in Round 13 QA) -- a narrower centred width
     avoids that while still lining its subtitle up with its title. From
     1300px there is enough room to centre it at the full 170px used by
     the other two widened items. */
  .career-timeline__item:nth-child(8) .career-timeline__support{ width: 130px; max-width: none; margin-left: calc(50% - 65px); margin-right: calc(50% - 65px); }
}
@media (min-width: 1300px){
  .career-timeline__item:nth-child(8) .career-timeline__support{ width: 170px; margin-left: calc(50% - 85px); margin-right: calc(50% - 85px); }
}
.career-timeline__node-row{
  position: relative;
  height: 0;
  border-top: 1px solid var(--gold-light);
  flex-shrink: 0;
}
.career-timeline__node{
  position: absolute;
  top: 0; left: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--sand, #ede8e0);
}
.career-timeline__hint{
  display: none;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 18px 0 0;
}
/* Desktop: one continuous drawn line instead of per-item borders. */
@media (min-width: 901px){
  .career-timeline__node-row{ border-top: 0; }
  .career-timeline__line,
  .career-timeline__line-fill{
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: 132px;
    height: 1px;
  }
  .career-timeline__line{ background: var(--gold-light); opacity: .35; }
  .career-timeline__line-fill{
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.3s cubic-bezier(.22,.61,.36,1);
  }
  .career-timeline.in .career-timeline__line-fill{ transform: scaleX(1); }
  .career-timeline__node{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    transition: opacity .35s ease, transform .35s ease;
  }
  .career-timeline__content{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .career-timeline.in .career-timeline__item:nth-child(1) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .15s; }
  .career-timeline.in .career-timeline__item:nth-child(1) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: .25s; }
  .career-timeline.in .career-timeline__item:nth-child(2) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .30s; }
  .career-timeline.in .career-timeline__item:nth-child(2) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: .40s; }
  .career-timeline.in .career-timeline__item:nth-child(3) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .45s; }
  .career-timeline.in .career-timeline__item:nth-child(3) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: .55s; }
  .career-timeline.in .career-timeline__item:nth-child(4) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .60s; }
  .career-timeline.in .career-timeline__item:nth-child(4) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: .70s; }
  .career-timeline.in .career-timeline__item:nth-child(5) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .75s; }
  .career-timeline.in .career-timeline__item:nth-child(5) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: .85s; }
  .career-timeline.in .career-timeline__item:nth-child(6) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: .90s; }
  .career-timeline.in .career-timeline__item:nth-child(6) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: 1.00s; }
  .career-timeline.in .career-timeline__item:nth-child(7) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: 1.05s; }
  .career-timeline.in .career-timeline__item:nth-child(7) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: 1.15s; }
  .career-timeline.in .career-timeline__item:nth-child(8) .career-timeline__node{ opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: 1.20s; }
  .career-timeline.in .career-timeline__item:nth-child(8) .career-timeline__content{ opacity: 1; transform: translateY(0); transition-delay: 1.30s; }
}
@media (max-width: 900px){
  .career-timeline__track{
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .career-timeline__item{
    flex: 0 0 auto;
    width: 200px;
    scroll-snap-align: center;
  }
  .career-timeline__hint{ display: block; }
}
@media (max-width: 560px){
  .career-timeline__item{ width: 168px; }
  .career-timeline__title{ font-size: 17px; }
}

/* ---------- About: In Motion (curated social) ----------
   Three real, verified local photos (not fabricated Instagram post
   embeds -- no specific post URL could be independently verified) each
   link out to the actual Instagram profile, honestly representing "more
   like this on Instagram" rather than claiming these exact images are
   published there. */
.about__moments{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.about__moment{
  position: relative;
  display: block;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  background: var(--ink);
}
.about__moment picture,
.about__moment img{ display:block; width:100%; height:100%; object-fit:cover; }
.about__moment img{ aspect-ratio: 3/4; transition: transform 1s cubic-bezier(.22,.61,.36,1); }
.about__moment:hover img{ transform: scale(1.05); }
/* One wide, landscape "hero" moment spans the full row above the four
   portrait supporting moments -- an editorial mosaic rather than a flat
   uniform grid, and the natural fit for the one landscape source photo
   in this set (the others are all portrait). */
.about__moment--wide{ grid-column: 1 / -1; }
.about__moment--wide img{ aspect-ratio: 21/9; }
.about__moment::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.05) 45%, rgba(6,6,8,0.85) 100%);
}
.about__moment-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 16px 18px;
  font-size: 12.5px; font-weight:600;
  color: var(--on-photo);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.about__social-links{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
/* Sits below .about__frame as a sibling, not inside it -- needs extra
   clearance so it lands clear of the frame's own offset border decoration
   (.about__frame::before extends 22px past the image's bottom edge)
   instead of visually colliding with it. */
.about__social-links--under-frame{ margin-top: 42px; }
.about__social-link{
  /* --paper is this theme's actual "dark text" token in a light band --
     --ink is (confusingly) the inverse, aliased to --sand by default and
     only dark inside .band-dark. Used var(--ink) here originally and it
     silently resolved to near-white text on the sand background. */
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--paper);
  text-decoration: none;
  font-size: 13px; font-weight:600; letter-spacing:.02em;
  transition: border-color .2s ease, background-color .2s ease;
}
.about__social-link svg{ width:18px; height:18px; flex-shrink:0; color: var(--gold); }
.about__social-link:hover{ border-color: var(--gold); background: rgba(203,171,110,0.06); }
.about__social-link--primary{
  /* A dark-filled button sitting in a light band, not inside .band-dark --
     needs the always-reliable on-photo tokens for its own text/icon
     rather than --paper/--gold-light, which would resolve to this same
     band's light-context values and vanish against the dark fill. */
  background: #17171b;
  border-color: #17171b;
  color: var(--on-photo);
}
.about__social-link--primary svg{ color: var(--on-photo-gold); }
.about__social-link--primary:hover{ background: #2a2a30; border-color: #2a2a30; }
@media (max-width: 640px){
  .about__moments{ grid-template-columns: 1fr 1fr; }
  .about__moment--wide img{ aspect-ratio: 16/9; }
}
@media (max-width: 420px){
  .about__social-links{ grid-template-columns: 1fr; }
}

/* ============================================================
   PHILOSOPHY (full bleed statement)
   ============================================================ */
.philosophy{
  position: relative;
  padding: 180px var(--pad);
  text-align:center;
  overflow:hidden;
}
.philosophy__bg{
  position:absolute; inset:0;
  background-image: url("../img/jonas-de-bruyn-mentalist-audience-connection-theatre.jpg");
  background-size: cover;
  background-position: center 30%;
  animation: kenBurns 28s ease-in-out infinite alternate;
}

@keyframes kenBurns{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.09); }
}
.philosophy__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.62), rgba(6,6,8,0.5) 40%, rgba(6,6,8,0.7));
}
.philosophy__content{ position:relative; z-index:2; max-width: 920px; margin:0 auto; }
.philosophy__kicker{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
  font-size: clamp(16px, 2vw, 20px);
  margin: 0 0 28px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.quote-band{
  position: relative;
  padding: 140px var(--pad);
  text-align: center;
  overflow: hidden;
}
.quote-band__bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center 30%;
}
.quote-band__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.72), rgba(6,6,8,0.55) 40%, rgba(6,6,8,0.8));
}
.quote-band__content{ position:relative; z-index:2; max-width: 820px; margin:0 auto; }
.quote-band .quote__mark{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height:1;
  color: var(--gold-light);
  margin-bottom: 6px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.quote-band blockquote{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.5;
  color: var(--paper);
  text-shadow: 0 4px 24px rgba(0,0,0,0.65);
  margin: 0 0 22px;
}
.quote-band cite{
  display:block;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  margin-bottom: 34px;
}
.philosophy p.lead{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(26px, 4.4vw, 50px);
  line-height: 1.32;
  color: var(--paper);
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
.philosophy p.lead .gold{ color: var(--gold-light); }
.philosophy p.support{
  margin-top: 34px;
  color: var(--paper-dim);
  font-size: 16px;
  max-width: 640px;
  margin-left:auto;
  margin-right:auto;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* ============================================================
   OFFERINGS
   ============================================================ */
.offerings{ padding: 130px 0; }
.offer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
}
.offer-card{
  background: var(--ink);
  padding: 44px 32px;
  transition: background .4s ease, transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
  position:relative;
  display:flex;
  flex-direction:column;
}
.offer-card:hover{
  background: var(--panel);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
.offer-card .num{
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--gold-dim);
  font-size: 15px;
  margin-bottom: 28px;
  transition: color .4s ease;
}
.offer-card:hover .num{ color: var(--gold-light); }
.offer-card h3{
  font-size: 19px;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 14px;
  line-height:1.3;
  min-height: 2.6em;
}
.offer-card p{
  font-size: 14.5px;
  color: var(--paper-dim);
}
.offer-card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
  padding-top: 18px;
  border-bottom: 1px solid transparent;
}
.offer-card a:hover{ border-color: var(--gold); }

/* ============================================================
   PAGE HERO  (image banner + title at top of every interior page)
   ============================================================ */
.page-hero{
  position:relative;
  height: 100svh;
  min-height: 620px;
  display:flex;
  align-items:flex-end;
  padding: 140px var(--pad) 56px;
  overflow:hidden;
}
.page-hero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  animation: kenBurns 30s ease-in-out infinite alternate;
}
.page-hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.15) 0%, rgba(6,6,8,0.2) 40%, rgba(6,6,8,0.92) 100%);
}
.page-hero__content{ position:relative; z-index:2; width:100%; max-width: 1100px; margin:0 auto; }
.page-hero .roman{
  font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-light);
  margin-bottom: 16px; display:block;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.page-hero h1{
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.12;
  max-width: 760px;
  color: var(--paper);
  text-shadow: 0 4px 26px rgba(0,0,0,0.7);
}
@media (max-width: 640px){
  .page-hero{ padding: 110px 20px 40px; }
  .page-hero h1{ font-size: 28px; }
}

/* ============================================================
   FORMAT / DETAIL SECTIONS  (corporate, activation, experiences)
   ============================================================ */
.detail-section{ padding: 60px 0 80px; }
.detail-section .roman{
  font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom: 14px; display:block;
}

.formats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
/* Three cards in a clean single row instead of 2-up-plus-orphan; collapses
   to one column at the same breakpoint as the base .formats rule since
   that later media-query selector still matches (it targets .formats,
   which every .formats--three element also carries). */
.formats--three{ grid-template-columns: repeat(3, 1fr); }
.format-detail{
  max-width: 640px;
  margin: 24px 0 0;
}
.format-detail p{
  color: var(--paper-dim);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.shows-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.shows-grid .format-card{ min-height: 440px; }
.shows-grid--three{ grid-template-columns: repeat(3, 1fr); }
.format-card{
  container-type: inline-size;
  position: relative;
  border-radius: 3px;
  overflow:hidden;
  min-height: 480px;
  display:flex;
  align-items:flex-end;
}
.format-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.format-card:hover img{ transform: scale(1.06); }
.format-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.1) 22%, rgba(6,6,8,0.72) 62%, rgba(6,6,8,0.97) 100%);
}
.format-card__body{
  position:relative; z-index:2;
  padding: 40px;
}
.format-card__body h3{
  font-size: 24px;
  color: var(--paper);
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.format-card__body p{
  color: var(--paper-dim);
  font-size: 14.5px;
  max-width: 420px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.format-card__tag{
  display:inline-flex;
  align-items:center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(6.5px, 2.7cqw, 10px);
  line-height: 1.3;
  letter-spacing: clamp(0.02em, 0.45cqw, 0.2em);
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(8,8,10,0.55);
  border: 1px solid var(--gold-dim);
  padding: 6px 10px;
  margin-bottom: 18px;
  border-radius: 30px;
  backdrop-filter: blur(6px);
  box-sizing: border-box;
}
.format-card__tag--wrap{
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
  text-align: center;
  border-radius: 14px;
}
/* "Anniversaries, Communions & Family Celebrations" is roughly twice the
   length of every other tag on the site -- tightening tracking and the
   floor size (still far from unreadable) keeps it on one line rather than
   letting the shared clamp's normal tracking clip it at tablet widths. */
.format-card__tag--tight{
  font-size: clamp(6px, 1.8cqw, 10px);
  letter-spacing: clamp(0.01em, 0.18cqw, 0.08em);
}

/* ============================================================
   SHOW CARDS (Illusionist / Mentalist / Magic Up Close)
   Minimal permanent overlay — click opens a detail modal,
   keeping the photograph itself the main focus.
   ============================================================ */
.show-card{
  container-type: inline-size;
  appearance:none; border:0; margin:0; padding:0; cursor:pointer;
  font-family: inherit; text-align:left;
  position: relative;
  border-radius: 3px;
  overflow:hidden;
  min-height: 440px;
  display:flex;
  align-items:flex-end;
  background: none;
}
.show-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.show-card:hover img{ transform: scale(1.06); }
.show-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 58%, rgba(6,6,8,0.88) 100%);
  transition: opacity .35s ease;
}
.show-card__overlay{
  position:relative; z-index:2;
  width: 100%;
  padding: 26px 28px;
}
.show-card__overlay h3{
  font-size: clamp(13px, 6.5cqw, 21px);
  line-height: 1.22;
  min-height: 1.22em;
  color: var(--paper);
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
  max-width: 100%;
}
.show-card__overlay .format-card__tag{ min-height: 1.3em; margin-bottom: 10px; }
.show-card__overlay p{
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 4.35em;
  color: var(--paper-dim);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  max-width: 360px;
}
/* #formats repeats on corporate/brand-activations/private-events; Corporate's
   own instance has one tag that wraps to two lines (Partner & Client
   Events) — every sibling in that specific group needs the same reserved
   tag height so titles still start at one line. */
#formats .show-card__overlay .format-card__tag{ min-height: 2.6em; }
/* Private Events' own #formats content runs longer than its two siblings'
   (titles up to two lines, descriptions up to five), so only that page's
   section carries this taller shared reservation. */
#formats.formats--tall .show-card__overlay h3{
  font-size: clamp(11px, 5.3cqw, 18px);
  min-height: 1.22em;
}
#formats.formats--tall .show-card__overlay p{ min-height: 7.25em; }
/* The four bookable "shows" (Illusionist/Mentalist/Magic Up Close/Custom)
   repeat across four pages with the same content; two of their descriptions
   run to four lines, so the whole group needs that taller reservation to
   keep every card's description starting at the same point. */
#shows .show-card__overlay p{ min-height: 5.8em; }
/* Home's four packages have longer titles (up to 27 characters) than this
   4-column card width can fit at the shared clamp's ceiling -- "Event
   Hosting & Moderation" doesn't fit on one line even at 21px. Scaled down
   the same way as the other over-length groups so it stays one line. */
#packages .show-card__overlay h3{
  font-size: clamp(10px, 4.2cqw, 14px);
  min-height: 1.22em;
}
/* Magical Experiences' four top-level categories: "Brand Activations"
   needs four lines at the 2-column tablet width while its siblings only
   need three, so the group needs the taller shared reservation too. */
#categories .show-card__overlay p{ min-height: 5.8em; }
/* Team Training's three-card group: three cards across leaves each card
   narrower than the shared h3 font-size formula assumes, so "Communication
   Training" doesn't fit on one line even at its 21px ceiling on a full
   desktop. Scaled the whole clamp down (not just the ceiling) so it still
   fits at every width in this group's own 3-column range, one line. */
.formats--three .show-card__overlay h3{
  font-size: clamp(11px, 5cqw, 18px);
  min-height: 1.22em;
}
/* Cards with a teaser line need a slightly taller scrim so the extra
   text stays legible, while still leaving most of the photo clear. */
.show-card--teaser::after{
  background: linear-gradient(180deg, transparent 40%, rgba(6,6,8,0.9) 100%);
}
.show-card__icon{
  position:absolute; top:20px; right:20px; z-index:3;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(6,6,8,0.4);
  color: var(--paper);
  font-size: 20px;
  line-height:1;
  backdrop-filter: blur(6px);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.show-card:hover .show-card__icon{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
}
.show-card__video-btn{
  position:absolute; top:20px; left:20px; z-index:3;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(6,6,8,0.45);
  color: var(--paper);
  backdrop-filter: blur(6px);
  cursor:pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.show-card__video-btn svg{ width:13px; height:13px; margin-left:2px; }
.show-card__video-btn:hover{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
}

/* ---- Homepage "Choose Your Experience" -- the four locked show cards
   at hero scale (items 20-26 of the Magic-First rebuild). Wider cards,
   the tagline moved up to the icon's vertical level (a sibling of
   .show-card__overlay, not nested inside it, so it can sit at the top
   of the full card height rather than the top of the bottom overlay),
   a more dominant title, and a description allowed up to three lines
   at this width. Card copy itself is unchanged -- presentation only. ---- */
.show-card__tag--top{
  position: absolute;
  top: 20px; left: 20px; z-index: 3;
  margin-bottom: 0;
}
.show-card--hero{ min-height: 640px; }
.shows-grid--hero{ margin-top: 48px; }
.show-card--hero .show-card__overlay{ padding: 32px 36px 38px; }
.show-card--hero .show-card__overlay h3{
  font-size: clamp(21px, 2.5cqw, 30px);
}
.show-card--hero .show-card__overlay p{
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 100%;
  min-height: unset;
}
@media (max-width: 1080px){
  .show-card--hero{ min-height: 480px; }
}

/* ---- Show detail modal ---- */
.show-modal{
  position: fixed; inset:0; z-index: 400;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.video-modal{
  z-index: 500;
}
.show-modal.open{ opacity:1; visibility:visible; }
.show-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(6,6,8,0.92);
  backdrop-filter: blur(4px);
}
.show-modal__panel{
  position:relative; z-index:2;
  width: 100%; max-width: 920px; max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  transform: translateY(16px) scale(.98);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.show-modal.open .show-modal__panel{ transform: translateY(0) scale(1); }
.show-modal__media{
  position:relative;
  min-height: 320px;
}
.show-modal__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.show-modal__body{
  container-type: inline-size;
  padding: 48px 44px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.show-modal__body h3{
  font-size: clamp(11px, 4.6cqw, 28px);
  color: var(--paper);
  margin: 6px 0 18px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.show-modal__body p{
  color: var(--paper-dim);
  font-size: 15.5px;
  margin-bottom: 28px;
}
.show-modal__benefits{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.show-modal__benefits li{
  position:relative;
  padding-left:22px;
  color:var(--paper-dim);
  font-size:15.5px;
  line-height:1.5;
}
.show-modal__benefits li::before{
  content:"\2192";
  position:absolute; left:0;
  color:var(--gold);
}
.show-modal__body h4{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: -8px 0 12px;
}
.show-modal__duration{
  margin: -6px 0 24px;
  padding: 16px 0 2px;
  border-top: 1px solid var(--panel-line);
  display:flex;
  flex-direction:column;
  gap: 11px;
}
.show-modal__duration-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
}
.show-modal__duration-row .k{
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.show-modal__duration-row .v{
  flex: 1 1 auto;
  min-width: 0;
  font-size:13.5px;
  color:var(--paper-dim);
  text-align:right;
}
.show-modal__duration-row a.v,
.show-modal__duration-row button.v{
  appearance:none; border:0; background:none; padding:0;
  font-family:inherit; line-height:inherit;
  text-decoration:none; cursor:pointer;
  transition: color .2s ease;
}
.show-modal__duration-row a.v:hover,
.show-modal__duration-row button.v:hover{ color:var(--gold-light); }
.show-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
}
.show-modal__body .btn{
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  padding: 14px 22px;
  font-size: clamp(9.5px, 3.1cqw, 12px);
  letter-spacing: clamp(0.08em, 1.4cqw, 0.24em);
  max-width: 100%;
}
.show-modal__body p.show-modal__pairs{
  font-size:12px;
  font-style:italic;
  color:var(--gold-light);
  margin: 0 0 24px;
}
.show-modal__close{
  position:absolute; top:16px; right:16px; z-index:4;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(6,6,8,0.5);
  color: var(--paper);
  font-size: 22px;
  line-height:1;
  cursor:pointer;
  appearance:none;
  transition: background .25s ease, border-color .25s ease;
}
.show-modal__close:hover{ background: rgba(6,6,8,0.8); border-color: var(--gold); }
@media (max-width: 760px){
  .show-modal__panel{ grid-template-columns: 1fr; }
  .show-modal__media{ min-height: 220px; }
  .show-modal__body{ padding: 32px 26px 40px; }
}

/* ---------- Video lightbox modal (nav play button) ---------- */
.video-modal__panel{
  display:block;
  max-width: 1000px;
  background: #000;
}
.video-modal__frame{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  background:#000;
}
.video-modal__frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.nav__play{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(245,242,234,0.35);
  background: transparent;
  color: var(--paper);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
  flex-shrink: 0;
}
.nav__play svg{ width:13px; height:13px; margin-left:2px; }
.nav__play:hover{ border-color: var(--gold); color: var(--gold-light); transform: scale(1.06); }

/* ============================================================
   QUOTE / TESTIMONIAL
   ============================================================ */
.quote{
  padding: 60px var(--pad) 50px;
  text-align:center;
  position:relative;
}
.quote__mark{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  color: var(--gold-dim);
  line-height:1;
  margin-bottom: 6px;
}
.quote blockquote{
  margin:0 auto;
  max-width: 920px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.5;
  color: var(--paper);
}
.quote cite{
  display:block;
  margin-top: 30px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.quote--featured{
  max-width: 900px;
  margin: 0 auto;
  padding: 50px var(--pad) 60px;
}
.quote--featured::before,
.quote--featured::after{
  content:"";
  display:block;
  width: 34px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 30px;
}
.quote--featured::after{ margin: 30px auto 0; }
.quote--featured .quote__mark{ font-size: 76px; color: var(--gold-light); }
.quote--featured blockquote{
  max-width: 900px;
  font-size: clamp(19px, 2.3vw, 27px);
}
.quote--featured cite{
  margin-top: 26px;
  color: var(--gold-light);
  font-size: 12.5px;
}

/* ============================================================
   MOMENT BREAK (visual pause between CTA band and process)
   ============================================================ */
.moment{
  position: relative;
  width: 100%;
  aspect-ratio: 2.1 / 1;
  min-height: 340px;
  max-height: 900px;
  overflow: hidden;
}
.moment img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 25%;
  animation: kenBurns 24s ease-in-out infinite alternate;
}
.moment__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.25) 0%, transparent 30%, transparent 70%, rgba(6,6,8,0.55) 100%);
}
.moment__caption{
  position:absolute; left: var(--pad); bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

/* ---- Moment gallery variant (swipeable multi-photo) ---- */
.moment--gallery .moment__track{
  display:flex;
  width:100%; height:100%;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.moment--gallery .moment__track::-webkit-scrollbar{ display:none; }
.moment--gallery .moment__slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  height:100%;
  position:relative;
}
.moment--gallery .moment__slide img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 25%;
  animation:none;
}
.moment__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(6,6,8,0.35);
  color:var(--paper);
  cursor:pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  z-index:2;
}
.moment__arrow svg{ width:18px; height:18px; }
.moment__arrow:hover{ background:rgba(6,6,8,0.6); border-color:rgba(255,255,255,0.7); }
.moment__arrow--prev{ left:20px; }
.moment__arrow--next{ right:20px; }
.moment__dots{
  position:absolute; right: var(--pad); bottom: 22px;
  display:flex; gap:8px; z-index:2;
}
.moment__dots button{
  width:7px; height:7px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.6);
  background:transparent;
  padding:0; cursor:pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.moment__dots button.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.2); }
@media (max-width: 640px){
  .moment__arrow{ width:36px; height:36px; }
  .moment__arrow--prev{ left:10px; }
  .moment__arrow--next{ right:10px; }
  .moment__dots{
    left:50%; right:auto; bottom:46px;
    transform:translateX(-50%);
    max-width: calc(100% - 32px);
    flex-wrap:wrap; justify-content:center;
  }
}

/* ============================================================
   PROCESS
   ============================================================ */
.process{ padding: 110px 0 140px; }
.process-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 50px;
  position: relative;
}
.process-grid--four{ grid-template-columns: repeat(4,1fr); }
.process-grid::before{
  content:"";
  position:absolute;
  top: 22px; left: 10%; right:10%;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1) .2s;
}
.process-grid.in::before{ transform: scaleX(1); }
.process-step{ position:relative; }
.process-step .n{
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--gold-light);
  font-size: 44px;
  margin-bottom: 22px;
}
.process-step.reveal.in .n{
  animation: processGlow 1.3s cubic-bezier(.22,.61,.36,1);
}
@keyframes processGlow{
  0%{ text-shadow: 0 0 0 rgba(212,175,102,0); }
  35%{ text-shadow: 0 0 22px rgba(212,175,102,0.85); }
  100%{ text-shadow: 0 0 0 rgba(212,175,102,0); }
}
.process-step h3{
  font-size: 18px;
  color: var(--paper);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.process-step p{
  color: var(--paper-dim);
  font-size: 14.5px;
  max-width: 320px;
}

/* ============================================================
   CHECKLIST (bulleted lists with a gold arrow marker, reused
   for page-level commitment/pain-point lists)
   ============================================================ */
.checklist{
  list-style:none;
  margin: 24px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 13px;
}
.checklist li{
  position:relative;
  padding-left:24px;
  color: var(--paper-dim);
  font-size: 15px;
  line-height: 1.55;
}
.checklist li::before{
  content:"\2192";
  position:absolute; left:0;
  color: var(--gold);
}
.checklist--pain{
  max-width: 700px;
  margin: 40px auto 30px;
}
.checklist--pain li{ font-size: 16px; }

/* ============================================================
   PAIN POINTS BAND
   ============================================================ */
.pain-points{
  padding: 90px 0;
  background: var(--ink-soft);
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
}
.pain-points-fix{ padding: 70px 0; text-align: center; }
.pain-points__lead{
  max-width: 620px;
  margin: 0 auto;
  text-align:center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 25px);
  color: var(--paper);
  line-height: 1.4;
}

/* ============================================================
   VIDEO DUO (two video-facades side by side)
   ============================================================ */
.video-duo{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin: 44px 0;
}
.video-duo .video-facade--inline{ margin: 0; }
@media (max-width: 780px){
  .video-duo{ grid-template-columns: 1fr; }
}

/* ============================================================
   VIDEO TRIO (three video-facades, center one emphasized)
   ============================================================ */
.video-trio{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  align-items:center;
  gap: 26px;
  margin: 44px 0;
}
.video-trio .video-facade--inline{ margin: 0; aspect-ratio: 4/3; }
@media (max-width: 900px){
  .video-trio{ grid-template-columns: 1fr; }
  .video-trio .video-facade--inline{ aspect-ratio: 16/10 !important; }
}
.trailer-section .container{ max-width: 1400px; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ padding: 96px 0 140px; }
.credentials-list{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 32px;
  list-style:none;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--panel-line);
}
.credentials-list li{
  display:flex;
  flex-direction:column;
  gap: 5px;
}
.credentials-list li b{
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
}
.credentials-list li span{
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
/* The natural next step after these credentials, not a button pasted on
   top of them -- same row rhythm as the list above it (a border-top
   "next section" feel would be one editorial device too many here). */
.credentials-list__more{
  display:inline-flex;
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  transition: color .2s ease, transform .2s ease;
}
.credentials-list__more:hover{ color: var(--on-photo-gold); transform: translateX(3px); }
.gallery-feature{
  display:block;
  width:100%;
  aspect-ratio: 21/9;
  border-radius: 2px;
  overflow:hidden;
  position:relative;
  margin-bottom: 14px;
}
.gallery-feature img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 30%;
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
}
.gallery-feature:hover img{ transform: scale(1.05); }

/* Reaction loop -- continuous, cinematic drift of candid guest-reaction
   photography that never stops for hover (autoplay is always primary).
   Each photo is a real, clickable gallery link. The duplicated
   .reaction-loop__group exists only to make the 0%->-50% translate
   seamless; roughly half of what's on screen at any moment is this clone
   copy, so its <a> items are still real click targets (mouse/touch) --
   otherwise half the visible photos would silently fail to open depending
   on animation timing. They're kept out of the accessibility tree and tab
   order via the parent's aria-hidden="true" plus their own tabindex="-1"
   (belt-and-suspenders on the <a> itself), so they can never create a
   duplicate focusable/announced element or a duplicate lightbox entry --
   openLightbox's group-building already dedupes by href, so clicking a
   clone opens the exact same gallery index as its canonical counterpart.
   Left/right arrows nudge the running Web Animations API timeline by one
   item's time-slot without ever pausing it. */
.reaction-loop{ padding: 70px 0; overflow: hidden; position: relative; }
.reaction-loop__head{ margin-bottom: 34px; }
.reaction-loop__track{
  display: flex;
  width: max-content;
  animation: reaction-loop-scroll var(--loop-duration, 70s) linear infinite;
}
.reaction-loop__group{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.reaction-loop__item{
  display: block;
  height: 260px;
  width: auto;
  margin-right: 16px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
a.reaction-loop__item{ cursor: pointer; }
.reaction-loop__item picture{ display: block; height: 100%; }
.reaction-loop__item img{
  height: 100%; width: auto; display: block; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  -webkit-user-drag: none;
}
a.reaction-loop__item:hover img,
a.reaction-loop__item:focus-visible img{ transform: scale(1.04); }
a.reaction-loop__item:focus-visible{ outline: 2px solid var(--on-photo-gold); outline-offset: 2px; }
@keyframes reaction-loop-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
/* Minimal, translucent nav -- subtle by default, only steps forward
   without ever pausing the continuous autoplay underneath it. */
.reaction-loop__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(232,213,164,0.35);
  background: rgba(10,10,12,0.35);
  color: var(--on-photo-gold);
  opacity: 0;
  transition: opacity .3s ease, background .25s ease, border-color .25s ease;
  cursor: pointer;
}
.reaction-loop__arrow svg{ width: 17px; height: 17px; }
.reaction-loop__arrow--prev{ left: 16px; }
.reaction-loop__arrow--next{ right: 16px; }
.reaction-loop:hover .reaction-loop__arrow,
.reaction-loop:focus-within .reaction-loop__arrow{ opacity: 1; }
.reaction-loop__arrow:hover{ background: rgba(10,10,12,0.6); border-color: var(--on-photo-gold); }
.reaction-loop__arrow:focus-visible{ opacity: 1; outline: 2px solid var(--on-photo-gold); outline-offset: 2px; }
/* No hover on touch -- keep the controls dimly present rather than
   invisible-until-a-gesture-that-never-comes. */
@media (hover: none){
  .reaction-loop__arrow{ opacity: 0.55; }
}
@media (max-width: 900px){
  .reaction-loop__item{ height: 210px; }
}
@media (max-width: 560px){
  .reaction-loop__item{ height: 160px; margin-right: 10px; }
  .reaction-loop__arrow{ width: 34px; height: 34px; }
  .reaction-loop__arrow svg{ width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .reaction-loop__track{
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .reaction-loop__group[aria-hidden="true"]{ display: none; }
  /* Nothing to scrub without the running animation, and every photo is
     already visible at once in the static wrapped grid above. */
  .reaction-loop__arrow{ display: none; }
}
.page-gallery{ padding: 90px 0; border-top: 1px solid var(--panel-line); }
.gallery-strip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-strip a{
  display:block;
  overflow:hidden;
  border-radius: 2px;
  aspect-ratio: 4/5;
  position:relative;
}
.gallery-strip img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.gallery-strip a:hover img{ transform: scale(1.08); }

/* ---------- Masonry gallery (preserves each photo's native shape) ---------- */
.gallery-masonry{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.gallery-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gallery-masonry a{
  display:block;
  border-radius: 2px;
  overflow:hidden;
  position:relative;
}
.gallery-masonry img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
/* Every gallery photo is shown at one of two fixed ratios, so the columns
   line up and the block reads as a single rectangle. */
.gallery-masonry a.g-p{ aspect-ratio: 2 / 3; --u: 3; }
.gallery-masonry a.g-l{ aspect-ratio: 3 / 2; --u: 1.333; }

/* On the three-column layout the columns are pinned to one shared height and
   each photo takes a share of it proportional to its ratio. The photos flex a
   few percent off 2:3 / 3:2 and cover-crop to suit, which is what makes the
   block finish as an exact rectangle instead of a ragged edge. */
@media (min-width: 901px){
  .gallery-col{ aspect-ratio: 1 / var(--gal-h, 5); }
  .gallery-masonry a{ flex: var(--u) 1 0; aspect-ratio: auto; min-height: 0; }
}
.gallery-masonry--12{ --gal-h: 4.06; }
.gallery-masonry--15{ --gal-h: 5; }
.gallery-masonry--16{ --gal-h: 5.33; }
.gallery-masonry a:hover img{ transform: scale(1.045); }
@media (max-width: 900px){
  /* Below three columns the fixed column split can't hold, so the photos
     flow and balance themselves instead. */
  .gallery-masonry{ display:block; columns: 2; column-gap: 16px; }
  .gallery-col{ display: contents; }
  .gallery-masonry a{ break-inside: avoid; margin-bottom: 16px; }
}
@media (max-width: 600px){
  .gallery-masonry{ columns: 1; }
}

/* ---------- Press headline strip ---------- */
.press-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
  margin-top: 14px;
}
.press-strip li{
  background: var(--ink);
  padding: 34px 26px;
  transition: background .4s ease;
}
.press-strip li:hover{ background: var(--panel); }
.press-strip__headline{
  display:block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 16px;
}
.press-strip cite{
  display:block;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   TESTIMONIALS / SOCIAL PROOF
   ============================================================ */
.testimonials{ padding: 130px 0; border-top: 1px solid var(--panel-line); }
.testimonials--compact{ padding: 100px 0; }
.testi-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
}
.testi-grid--three{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){
  .testi-grid--three{ grid-template-columns: 1fr; }
}
.testi-card{
  background: var(--ink);
  padding: 44px 40px;
  transition: background .4s ease;
  display:flex;
  flex-direction:column;
}
.testi-card:hover{ background: var(--panel); }
.testi-card__mark{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 44px;
  color: var(--gold-dim);
  line-height: 1;
  transition: color .4s ease;
  margin-bottom: 14px;
}
.testi-card:hover .testi-card__mark{ color: var(--gold-light); }
.testi-card blockquote{
  margin: 0 0 22px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper);
}
.testi-card cite{
  display:block;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
  padding-top: 8px;
}

/* ============================================================
   CREDIBILITY LAYER
   A second, editorial proof layer -- distinct from the monochrome
   .trusted marquee (grayscale, dozens of logos, first thing on the
   page) and from .testi-grid (plain text, no imagery). Here a client's
   real logo keeps its own colour (no grayscale filter) and sits beside
   a real photo and a fully-attributed quote, so it reads as a feature
   spread on two named engagements rather than another logo wall.
   ============================================================ */
.credibility{ padding: 120px 0; }
.credibility__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: 56px;
}
@media (max-width: 820px){
  .credibility__grid{ grid-template-columns: 1fr; }
}
.credibility__card{
  display:flex;
  flex-direction:column;
  background: var(--white);
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  overflow:hidden;
}
.credibility__media{
  aspect-ratio: 16/10;
  /* .credibility__card is a column flexbox; a flex item's default
     min-height is auto, not 0, which lets its content's own intrinsic
     size act as a floor underneath aspect-ratio -- and now that the
     <img> inside carries real width/height attributes, one card used a
     portrait-oriented photo (1068x1600) whose intrinsic ratio wanted far
     more height than 16/10 does, so that card rendered noticeably taller
     than its landscape-photo sibling (788px vs 351px measured). */
  min-height: 0;
}
.credibility__media img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 25%;
}
.credibility__body{
  padding: 34px 36px 38px;
}
.credibility__logo{
  height: 30px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display:block;
  margin-bottom: 24px;
}
.credibility__body blockquote{
  margin: 0 0 18px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--paper);
}
.credibility__body cite{
  display:block;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding: 130px 0; }
.faq__grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items:start;
}
.faq__media{
  position: sticky;
  top: 110px;
  border-radius: 3px;
  overflow:hidden;
  aspect-ratio: 4/5;
}
.faq__media img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 22%;
}
.faq__list .eyebrow{ margin-bottom: 18px; }
.faq__list h2{
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  color: var(--paper);
  margin-bottom: 40px;
  max-width: 480px;
}
.faq-item{
  border-top: 1px solid var(--panel-line);
}
.faq-item:last-child{ border-bottom: 1px solid var(--panel-line); }
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  background:none;
  border:none;
  padding: 24px 0;
  text-align:left;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--paper);
  transition: color .25s ease;
}
.faq-item__q:hover{ color: var(--gold-light); }
.faq-item__icon{
  flex-shrink:0;
  width: 26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border: 1px solid var(--panel-line);
  font-size: 16px;
  color: var(--gold);
  transition: transform .35s ease, border-color .35s ease;
}
.faq-item__q[aria-expanded="true"] .faq-item__icon{
  transform: rotate(135deg);
  border-color: var(--gold);
}
.faq-item__a{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.faq-item__q[aria-expanded="true"] + .faq-item__a{
  grid-template-rows: 1fr;
}
.faq-item__a-inner{ overflow:hidden; }
.faq-item__a p{
  margin:0;
  padding-bottom: 20px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-dim);
}
.faq-item__cta{
  display:inline-flex;
  margin-bottom: 30px;
  padding: 12px 22px;
  font-size: 11px;
}
@media (max-width: 860px){
  .faq__grid{ grid-template-columns: 1fr; gap: 36px; }
  .faq__media{ position:static; aspect-ratio: 16/10; }
}

/* Team Building FAQ visual: source is a tall portrait shot from behind Jonas
   facing a packed raked theatre audience, with the empty stage/curtain
   filling the top ~40%. The shared .faq__media object-position (22% from
   top) is tuned for landscape photos and would crop straight to that empty
   curtain here, cutting Jonas and the crowd out of frame entirely -- so
   this page anchors low instead, keeping both in the visible crop at every
   container aspect ratio (portrait desktop, short landscape mobile). */
.crop-faq-teambuilding img{ object-position: center 78%; }
@media (max-width: 860px){
  .crop-faq-teambuilding img{ object-position: center 72%; }
}

/* Brand Activations FAQ visual: source is wide (1.5:1) against the
   portrait-shaped desktop frame (4:5), so cover crops the sides down to a
   narrow vertical slice -- his face and the lit flame he's holding both
   sit left-of-centre, with the spark burst filling the upper right, so the
   crop is aimed there rather than the frame's shared centred default. */
.crop-faq-brand img{ object-position: 42% 22%; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.finale{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:flex-end;
  padding: 0 var(--pad) 190px;
  text-align:center;
  overflow:hidden;
}
.finale__bg{
  position:absolute; inset:0;
  background-image: url("../img/jonas-de-bruyn-mentalist-fire-trick-portrait.jpg");
  background-size: cover;
  background-position: 46% 58%;
  animation: kenBurns 30s ease-in-out infinite alternate;
}
.finale__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.05) 0%, rgba(6,6,8,0.1) 28%, rgba(6,6,8,0.62) 56%, rgba(6,6,8,0.97) 100%);
}
.finale__content{ position:relative; z-index:2; width:100%; }
.finale h2{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.22;
  max-width: 820px;
  margin: 0 auto 22px;
  color: var(--paper);
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 8px 34px rgba(0,0,0,0.7);
}
.finale p{
  color: var(--paper-dim);
  font-size: 17.5px;
  max-width: 540px;
  margin: 0 auto 40px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 6px 22px rgba(0,0,0,0.6);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding: 130px 0 100px; }
.contact-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px,6vw,100px);
}
.contact-info h2{
  font-size: clamp(28px,3.6vw,44px);
  line-height:1.2;
  color: var(--paper);
  margin-bottom: 26px;
}
.contact-info > p{
  color: var(--paper-dim);
  font-size: 16px;
  max-width: 420px;
  margin-bottom: 40px;
}
.contact-detail{
  display:flex; flex-direction:column; gap: 22px;
  padding-top: 30px;
  border-top: 1px solid var(--panel-line);
}
.contact-detail div span.k{
  display:block; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}
.contact-detail div span.v, .contact-detail div a{
  font-size: 16px; color: var(--paper);
}
.contact-detail div a:hover{ color: var(--gold-light); }

.form{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: clamp(28px,4vw,52px);
  border-radius: 3px;
  transition: border-color .5s ease, box-shadow .5s ease;
}
.form--nudge{
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 32px rgba(203,171,110,0.35);
  animation: form-nudge-pulse 1.8s ease-out;
}
@keyframes form-nudge-pulse{
  0%{ box-shadow: 0 0 0 1px var(--gold), 0 0 0 rgba(203,171,110,0.5); }
  20%{ box-shadow: 0 0 0 1px var(--gold), 0 0 40px rgba(203,171,110,0.45); }
  100%{ box-shadow: 0 0 0 1px var(--gold), 0 0 32px rgba(203,171,110,0.35); }
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom: 22px; }
.field label{
  display:block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 10px;
}
.field input, .field select, .field textarea{
  width:100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245,242,234,0.25);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 15px;
  padding: 10px 2px;
  transition: border-color .3s ease;
}
.field select option{ background: var(--ink); color: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color: var(--gold);
}
.field textarea{ resize: vertical; min-height: 90px; }
.form button{ width:100%; justify-content:center; margin-top: 6px; border:none; }
.form-response-time{
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-align:center;
}
.form-note{
  margin-top: 6px;
  font-size: 12px;
  color: var(--paper-dim);
  text-align:center;
}
/* ---------- Form validation, loading, honeypot, success ---------- */
.field-error{
  display:block;
  min-height: 15px;
  margin-top: 5px;
  font-size: 11.5px;
  color: #e6a26b;
}
.field--invalid input,
.field--invalid select,
.field--invalid textarea{ border-color: #e6a26b; }
.field--honeypot{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.form-error-summary{
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid #e6a26b;
  border-radius: 3px;
  background: rgba(230,162,107,0.08);
  color: var(--paper);
  font-size: 13px;
  text-align: center;
}
.btn-spinner{
  display:none;
  width: 15px; height: 15px;
  margin-left: 10px;
  border: 2px solid rgba(23,23,27,0.3);
  border-top-color: #17171b;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
#formSubmitBtn.is-loading{ opacity: 0.85; cursor: progress; pointer-events: none; }
#formSubmitBtn.is-loading .btn-spinner{ display: inline-block; }
@keyframes btn-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn-spinner{ animation: none; }
}
.form-success{
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: clamp(28px,4vw,52px);
  border-radius: 3px;
  text-align: center;
}
.form-success svg{
  width: 44px; height: 44px;
  color: var(--gold);
  margin-bottom: 16px;
}
.form-success h3{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--paper);
  margin: 0 0 10px;
}
.form-success p{
  color: var(--paper-dim);
  font-size: 14.5px;
  margin: 0 0 26px;
}
.form-success__actions{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: 14px;
}
.form-success__actions .btn svg{
  /* .form-success svg{ width:44px; color:var(--gold); margin-bottom:16px }
     targets any nested svg (it was written for the checkmark icon above)
     and ties with .btn svg on specificity, so without this override these
     button icons render at 44px in --gold -- invisible on the gold-filled
     button since the icon and its background become the same colour. */
  width: 14px; height: 14px; margin-bottom: 0; color: inherit;
}
.form-success__explore{
  display:block;
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-dim);
  transition: text-decoration-color .2s ease;
}
.form-success__explore:hover{ text-decoration-color: var(--gold-light); }
@media (max-width: 480px){
  .form-success__actions{ flex-direction: column; align-items: stretch; }
  .form-success__actions .btn{ justify-content: center; }
}

/* ============================================================
   SECTION CTA (contextual booking prompts)
   ============================================================ */
.section-cta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--panel-line);
}
.section-cta--center{
  justify-content: center;
  border-top: none;
  padding-top: 0;
  margin-top: 40px;
}
.section-cta--tight{ margin-top: 14px; }
.section-gap-after{ margin-bottom: 90px; }
.section-cta p{
  font-size: 15px;
  color: var(--paper-dim);
  margin: 0;
}
.section-cta p b{ color: var(--paper); font-weight: 500; }
.about__text .section-cta{ margin-top: 40px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top: 1px solid var(--panel-line);
}
.footer-links{
  border-top: 1px solid var(--panel-line);
  padding: 70px 0 34px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer-brand img{ height: 30px; width:auto; margin-bottom: 18px; }
.footer-brand p{
  color: var(--paper-dim);
  font-size: 14px;
  max-width: 320px;
  margin-bottom: 0;
}
.footer-col h4{
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  font-weight: 500;
}
.footer-col ul{ display:flex; flex-direction:column; gap: 12px; }
.footer-col a{
  color: var(--paper-dim);
  font-size: 14.5px;
  transition: color .25s ease;
}
.footer-col a:hover{ color: var(--paper); }
.footer-bottom{
  padding-top: 30px;
  border-top: 1px solid var(--panel-line);
  font-size: 12.5px;
  color: var(--paper-dim);
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom__social{ display:flex; gap: 22px; }
.footer-bottom__social a{
  color: var(--paper-dim);
  transition: color .25s ease;
}
.footer-bottom__social a:hover{ color: var(--gold-light); }

/* ============================================================
   SHOWREEL / VIDEO FACADE
   ============================================================ */
.showreel{ padding: 100px 0 70px; border-bottom: 1px solid var(--panel-line); }

.video-facade{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.video-facade__thumb{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s cubic-bezier(.22,.61,.36,1), filter .6s ease;
  filter: brightness(0.8);
}
.video-facade:hover .video-facade__thumb{ transform: scale(1.04); filter: brightness(0.9); }
.video-facade__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.25) 0%, rgba(6,6,8,0.15) 45%, rgba(6,6,8,0.75) 100%);
}
.video-facade__play{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(203,171,110,0.16);
  border: 1px solid var(--gold-dim);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  color: var(--paper);
  transition: all .35s ease;
}
.video-facade__play::before{
  content:"";
  position:absolute; inset:-14px;
  border-radius:50%;
  border: 1px solid var(--gold-dim);
  animation: playPulse 2.6s ease-out infinite;
}
@keyframes playPulse{
  0%{ transform: scale(0.85); opacity: 0.8; }
  100%{ transform: scale(1.35); opacity: 0; }
}
.video-facade__play svg{ width: 26px; height:26px; margin-left: 4px; }
.video-facade:hover .video-facade__play{
  background: var(--gold);
  color: var(--ink);
  transform: translate(-50%,-50%) scale(1.08);
}
.video-facade__caption{
  position:absolute; left: 26px; bottom: 20px;
  z-index:2;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.video-facade iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

.video-facade--inline{
  max-width: none;
  margin-top: 0;
}

/* Shown over a video-facade or the fullscreen video-modal frame if the
   embed hasn't started within a few seconds (blocked by an ad blocker,
   corporate network filter, or a dropped connection) -- the visitor
   always gets a working way to watch instead of a stuck blank frame. */
.video-fallback{
  position:absolute; inset:0;
  z-index: 3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 14px;
  padding: 24px;
  text-align:center;
  background: rgba(8,8,10,0.92);
}
.video-fallback p{
  margin:0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(246,242,233,0.7);
  max-width: 320px;
}
.video-fallback a{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  text-decoration:none;
  transition: border-color .2s ease, background-color .2s ease;
}
.video-fallback a:hover{ border-color: var(--gold); background: rgba(203,171,110,0.1); }

/* ============================================================
   ACCOLADES STRIP
   ============================================================ */
.accolades{
  padding: 44px 0;
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
  background: var(--ink-soft);
}
.accolades__line{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  text-align: center;
  row-gap: 10px;
}
.accolades__line b{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.accolades__line > span > span{
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: 4px;
}
.accolades__sep{
  color: var(--panel-line);
  font-size: 13px;
}

/* ============================================================
   SUBSECTION (Teambuilding & Training within Corporate)
   ============================================================ */
.subsection{
  margin-top: 90px;
  padding-top: 70px;
  border-top: 1px solid var(--panel-line);
}
.subsection__inner{
  display:grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 56px;
  align-items:center;
}
.subsection__media{
  border-radius: 4px;
  overflow:hidden;
  aspect-ratio: 3/2;
}
.subsection__media img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 40%;
}
@media (max-width: 860px){
  .subsection__inner{ grid-template-columns: 1fr; gap:32px; }
  .subsection__media{ aspect-ratio: 3/2; }
}
.subsection__text{ max-width: 720px; }
.subsection__text h3{
  font-size: clamp(24px, 3vw, 32px);
  color: var(--paper);
  margin: 14px 0 22px;
}
.subsection__text p{
  color: var(--paper-dim);
  font-size: 16px;
  margin-bottom: 18px;
}
.subsection__quote{
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--paper);
  font-size: 17px;
  margin: 26px 0;
  padding-left: 20px;
  border-left: 2px solid var(--gold-dim);
}
.subsection__quote cite{
  display:block;
  margin-top: 10px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.btn-sm{ padding: 13px 26px; font-size: 11px; margin-top: 8px; }

/* ============================================================
   CUSTOM EXPERIENCES CTA BAND
   ============================================================ */
.custom-band{
  padding: 130px 0;
  border-bottom: 1px solid var(--panel-line);
  position: relative;
}
.custom-band::before{
  content:"";
  position:absolute; top:0; left:50%;
  transform: translateX(-50%);
  width: 60px; height:1px;
  background: var(--gold);
}
.custom-band__grid{
  display:grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items:center;
}
.custom-band__inner{ max-width: 560px; }
.custom-band__media{
  border-radius: 4px;
  overflow:hidden;
  aspect-ratio: 4/5;
}
.custom-band__media img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 35%;
}
@media (max-width: 860px){
  .custom-band__grid{ grid-template-columns: 1fr; gap:32px; text-align:center; }
  .custom-band__inner{ max-width: none; margin: 0 auto; }
  .custom-band__media{ aspect-ratio: 16/10; }
}
.custom-band .roman{
  display:block;
  font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom: 26px;
}
.custom-band h2{
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.32;
  letter-spacing: 0.005em;
  color: var(--paper);
  margin-bottom: 24px;
}
.custom-band h2 .script{
  display: inline-block;
  margin-top: 8px;
  font-size: 1.1em;
}
.custom-band h3{
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 20px;
}
.custom-band p{
  color: var(--paper-dim);
  font-size: 16px;
  margin-bottom: 36px;
}
.custom-band--training{ padding: 70px 0 130px; }
.custom-band--training .custom-band__inner{ max-width: 620px; }
.custom-band--training .custom-band__media{ aspect-ratio: 3/2; }
@media (max-width: 860px){
  .custom-band--training .custom-band__media{ aspect-ratio: 3/2; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .offer-grid{ grid-template-columns: repeat(2,1fr); }
  .press-strip{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .shows-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1240px){
  .nav__links, .nav__cta .lang-switch{ display:none; }
  .nav__burger{ display:block; }
  .nav__cta{ gap: 10px; }
  .nav__cta .btn-ghost{ padding: 10px 16px; font-size: 10px; letter-spacing: 0.1em; }
}
@media (max-width: 420px){
  .nav__cta .btn-ghost{ padding: 9px 12px; font-size: 9.5px; }
  /* Even with the play button already dropped above and this button at its
     smallest legible size, the logo (a fixed 26px-tall, ~190px-wide mark)
     plus Search + Contact + burger still don't all fit under ~400px wide --
     shrink the logo mark slightly and tighten the gap between the
     remaining nav__cta controls to close the last ~30px. */
  .nav__logo{ height: 22px; }
  .nav__cta{ gap: 6px; }
}
@media (max-width: 480px){
  /* Logo + search + trailer-play + Contact + burger no longer fit in one
     bar under ~480px: nav__cta was rendering past the right edge of the
     viewport (invisibly, since it's inside position:fixed .nav, so no
     scrollbar ever appeared -- but the burger itself ended up partly or
     fully off-screen and untappable). The trailer play button is the one
     redundant control here (every video on the page is also reachable via
     its own in-page play button), so drop it to reclaim the space Search,
     Contact and the burger all need to stay reachable. */
  .nav__play{ display:none; }
}

@media (max-width: 920px){
  .about__grid, .contact-grid{ grid-template-columns: 1fr; }
  .about__frame{ max-width: 420px; }
  .about__frame-col{ max-width: 420px; }
  .formats{ grid-template-columns: 1fr; }
  .format-card{ min-height: 0; aspect-ratio: 4/3; }
  .process-grid{ grid-template-columns: 1fr; gap: 60px; }
  .process-grid::before{ display:none; }
  /* Hosting's process eyebrow ("Magical Hosting, As The Red Thread") is long
     enough that even its own clamp()'d minimum font-size doesn't fit on one
     line under ~430px wide, pushing the whole page into horizontal scroll --
     let it wrap here rather than shrinking the type further. */
  .eyebrow--nowrap{ white-space: normal; }
  .form-row{ grid-template-columns: 1fr; }
  .accolades__line{ gap: 6px; }
  .accolades__sep{ display:none; }
  .accolades__line > span{ flex: 0 0 100%; }
  .testi-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .hero__name{ white-space: normal; font-size: 0.86em; }
  .hero__scroll{ display: none; }
  .hero__play{ width: 52px; height: 52px; top: 100px; left: 20px; }
  .hero__play:hover{ transform: scale(1.08); }
  .hero__play svg{ width:16px; height:16px; }
  .finale{ min-height: 96vh; padding-bottom: 105px; }
  .finale h2{ font-size: 27px; line-height: 1.26; margin-bottom: 14px; max-width: 320px; }
  .finale p{ font-size: 14.5px; margin-bottom: 24px; max-width: 300px; }
  .finale .btn{ padding: 14px 28px; font-size: 11.5px; }
  .offer-grid{ grid-template-columns: 1fr; }
  .shows-grid{ grid-template-columns: 1fr; }
  .show-card__overlay h3,
  .formats--three .show-card__overlay h3,
  #formats.formats--tall .show-card__overlay h3{ -webkit-line-clamp: unset; min-height: 0; }
  .show-card__overlay p,
  #shows .show-card__overlay p,
  #categories .show-card__overlay p,
  #formats.formats--tall .show-card__overlay p{ -webkit-line-clamp: unset; min-height: 0; }
  .show-card__overlay .format-card__tag,
  #formats .show-card__overlay .format-card__tag{ min-height: 0; }
  .press-strip{ grid-template-columns: 1fr; }
  .gallery-feature{ aspect-ratio: 4/3; }
  .gallery-strip{ grid-template-columns: 1fr 1fr; }
  .gallery-strip a:last-child{ grid-column: 1/3; aspect-ratio: 16/9; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ justify-content:center; }
  .section-cta{ flex-direction:column; align-items:stretch; }
  .section-cta .btn{ white-space:normal; justify-content:center; text-align:center; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .video-facade__play{ width: 64px; height: 64px; }
  .video-facade__play svg{ width: 20px; height: 20px; }
  .video-facade__caption{ left: 16px; bottom: 14px; font-size: 10px; }
  .quote--featured blockquote{ font-size: 15px; }
  .quote blockquote{ font-size: 14px; }
}

/* Short viewports (laptops, or a maximized browser window on a wide
   1080p-class screen once OS/browser chrome eats into the height — real
   viewports there commonly land around 900-1000px, not the full 1080px
   the screen advertises) — keep the finale text block compact so it
   never climbs into the face region. Scoped to min-width so it never
   fights the dedicated mobile rules above. */
@media (min-width: 641px) and (max-height: 1000px){
  .finale h2{ font-size: clamp(26px, 4vw, 42px); margin-bottom: 16px; }
  .finale p{ font-size: 15.5px; margin-bottom: 26px; }
  .finale .btn{ padding: 15px 32px; }
  .finale{ min-height: 84vh; padding-bottom: 130px; }
}

/* ============ GALLERY LIGHTBOX ============
   Clicking a gallery photo opens it here instead of navigating to the file.
   Arrows step through every image in that gallery; clicking anywhere around
   the image (the backdrop) returns to the page. */
.lightbox{
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(16px, 4vw, 48px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.lightbox.open{ opacity: 1; visibility: visible; }
.lightbox__backdrop{
  position: absolute; inset: 0;
  background: rgba(6,6,8,0.94);
  backdrop-filter: blur(6px);
}
.lightbox__figure{
  position: relative; z-index: 2;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 100%; max-height: 100%;
  transform: scale(.97);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.lightbox.open .lightbox__figure{ transform: scale(1); }
.lightbox__img{
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.lightbox__caption{
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-align: center;
}
.lightbox__nav,
.lightbox__close{
  position: absolute; z-index: 3;
  flex: 0 0 auto;
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--panel-line);
  background: rgba(16,16,20,.72);
  color: var(--paper);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.lightbox__nav{ top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev{ left: clamp(12px, 3vw, 40px); }
.lightbox__nav--next{ right: clamp(12px, 3vw, 40px); }
.lightbox__nav svg{ width: 24px; height: 24px; }
.lightbox__nav:hover,
.lightbox__close:hover{
  background: rgba(32,32,38,.9);
  border-color: var(--gold);
}
.lightbox__nav:active{ transform: translateY(-50%) scale(.94); }
.lightbox__actions{
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px;
  margin-top: 2px;
}
/* Three-tier hierarchy: See Full Gallery is the one action always available
   and gets the primary (filled) treatment; Enquire Now is the secondary
   button; View [Page] only ever appears alongside both of those, so it
   reads as a plain contextual link rather than a third competing button --
   the photo stays the focal point regardless of how many actions show. */
.lightbox__full-gallery{
  /* Jonas wanted this to match "Magical Experiences"' exact existing
     brand colour in the homepage hero (.script, --gold-light: #e8d5a4).
     --gold-light itself is a band-context-dependent token though (redefined
     for dark bands elsewhere), and the lightbox never establishes that
     context -- same trap the .lightbox__enquire rule above already works
     around. --on-photo-gold is the same #e8d5a4 value but reliable
     regardless of context, so that's the one actually used here. Text is
     a literal dark hex for the same reason: --ink flips to a light value
     in dark-band contexts, and this button always needs dark-on-gold. */
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  appearance: none; cursor: pointer;
  border: 1px solid var(--on-photo-gold);
  border-radius: 2px;
  background: var(--on-photo-gold);
  color: #17171b;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox__full-gallery svg{ width: 15px; height: 15px; flex-shrink: 0; }
.lightbox__full-gallery:hover{ background: #cbab6e; border-color: #cbab6e; }
.lightbox__enquire{
  /* The lightbox is a fixed dark overlay that never rescopes --paper/
     --panel-line the way .hero/.band-dark do, so those context-dependent
     tokens resolved to the light-theme's dark-ink values here -- near-
     black text and a near-invisible border on a near-black background.
     Always-light tokens fix it regardless of context. */
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 12px 24px;
  appearance: none; cursor: pointer;
  border: 1px solid rgba(246,242,233,0.4);
  border-radius: 2px;
  background: rgba(16,16,20,.6);
  color: var(--on-photo);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.lightbox__enquire:hover{ border-color: var(--on-photo-gold); color: var(--on-photo-gold); background: rgba(32,32,38,.85); }
.lightbox__view-page{
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--on-photo-dim);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.lightbox__view-page svg{ width: 13px; height: 13px; flex-shrink: 0; }
.lightbox__view-page:hover{ color: var(--on-photo-gold); border-bottom-color: currentColor; }

/* ---------- Gallery picker: "See Full Gallery" popup ----------
   Stacks above the lightbox (higher z-index) rather than replacing it, so
   closing the picker at any point -- X, backdrop, Escape, back button --
   simply reveals the lightbox again at the same photo, never the page
   underneath. Only the picker's own "Go to This Page" button navigates. */
.gallery-picker{
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.gallery-picker.open{ opacity: 1; visibility: visible; }
.gallery-picker__backdrop{
  position: absolute; inset: 0;
  background: rgba(6,6,8,0.94);
  backdrop-filter: blur(6px);
}
.gallery-picker__panel{
  position: relative; z-index: 2;
  width: 100%; max-width: 860px; max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  padding: clamp(28px, 5vw, 48px);
  transform: translateY(16px) scale(.98);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.gallery-picker.open .gallery-picker__panel{ transform: translateY(0) scale(1); }
.gallery-picker__close{
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  appearance: none; cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--panel-line);
  background: rgba(16,16,20,.6);
  color: var(--paper);
  font-size: 22px; line-height: 1;
  transition: border-color .2s ease, background-color .2s ease;
}
.gallery-picker__close:hover{ border-color: var(--gold); background: rgba(32,32,38,.9); }

.gallery-picker__eyebrow{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 8px;
}
.gallery-picker__view--categories h3,
.gallery-picker__view--detail h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--paper);
  margin-bottom: 24px;
}

.gallery-picker__tiles{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.gallery-picker__tile{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 3px;
  overflow: hidden;
  appearance: none; cursor: pointer; border: 0; padding: 0;
  background: var(--ink-soft);
}
.gallery-picker__tile img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gallery-picker__tile:hover img{ transform: scale(1.06); }
.gallery-picker__tile::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,8,0.05) 40%, rgba(6,6,8,0.85) 100%);
}
.gallery-picker__tile-label{
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--on-photo);
  text-align: left;
}
.gallery-picker__tile-count{
  font-size: 10.5px; letter-spacing: .06em; color: var(--on-photo-dim);
  flex-shrink: 0;
}

.gallery-picker__back{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  appearance: none; cursor: pointer; border: 0; background: none; padding: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-dim);
  transition: color .2s ease;
}
.gallery-picker__back svg{ width: 16px; height: 16px; }
.gallery-picker__back:hover{ color: var(--gold); }

.gallery-picker__photos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-height: 44vh;
  overflow-y: auto;
  margin-bottom: 26px;
  padding-right: 4px;
}
.gallery-picker__photos img{
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.gallery-picker__photos img:hover{ opacity: .82; }

.gallery-picker__actions{
  display: flex; flex-wrap: wrap; gap: 12px;
}
.gallery-picker__actions .btn{
  /* The "View [Category]" label is built at runtime from the category's
     own name (main.js), so its length varies -- "View Custom Experiences"
     is meaningfully longer than "View Hosting". The base .btn class is
     nowrap (fine for its static, short, hand-written labels elsewhere),
     but here that let longer names overflow the panel at narrow widths. */
  flex: 1 1 200px; text-align: center; white-space: normal; line-height: 1.3;
}

@media (max-width: 640px){
  .gallery-picker__panel{ padding: 24px 18px; max-height: 90vh; }
  .gallery-picker__photos{ max-height: 38vh; }
}

.lightbox__close{
  position: absolute;
  top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  font-size: 26px; line-height: 1;
  width: 44px; height: 44px;
}
@media (max-width: 700px){
  .lightbox{ gap: 6px; padding: 12px; }
  .lightbox__nav{ width: 40px; height: 40px; }
  .lightbox__nav svg{ width: 20px; height: 20px; }
  .lightbox__img{ max-height: 74vh; }
}


/* Portrait variant of the quote band: keeps the subject's face in the upper
   part of the frame and drops the quote beneath it, at every viewport. */
.quote-band--portrait{
  min-height: clamp(560px, 72vh, 780px);
  display: flex;
  align-items: flex-end;
  padding-top: 120px;
  padding-bottom: 88px;
}
.quote-band--portrait .quote-band__bg{ background-position: 50% 18%; }
.quote-band--portrait .quote-band__content{ max-width: 760px; }

/* The four category cards carry longer titles than the home teasers, so they
   get a slightly tighter type scale to keep every title on one line. */
#categories .show-card__overlay h3{ font-size: clamp(11px, 5.6cqw, 20px); }
/* Delphine quote: wide enough to settle on three lines. */
.quote-band--portrait .quote-band__content{ max-width: 1040px; }

/* Wider, balanced intro paragraph: needs to out-specify `.section-head p`,
   which otherwise caps every lead at 560px. */
.section-head p.section-head__lead-wide{
  max-width: 100%;
  text-wrap: balance;
}

/* The four show cards carry longer titles than the home teasers ("Custom
   Experiences"), so they use the same tighter type scale as #categories to
   keep every title on a single line. */
.shows .show-card__overlay h3{ font-size: clamp(11px, 5.6cqw, 20px); }

/* Breathing room under the full-bleed quote band before the next section. */
.quote-band + .shows{ padding-top: 132px; }

/* <picture> wrapper must not break the absolutely-positioned card image:
   .show-card is a flex row (picture, icon, overlay as siblings), and giving
   picture a real box here (as the sitewide picture{} rule below does)
   makes it compete with .show-card__overlay for width, shrinking the
   overlay unevenly per card and breaking the centered/aligned text this
   component depends on. display:contents removes picture from that flex
   layout entirely; its child img is absolutely positioned regardless. */
.show-card picture{ display: contents; }

/* Brand activations: the trailer sits in the middle and runs wider, at the
   thumbnail's own 16:9 so it reads as the visually dominant frame. Left and
   right stay on the shared 4:3 video-trio rule (same column width, same
   aspect-ratio), so they render at exactly the same size as each other. */
.video-trio--feature{ grid-template-columns: 1fr 1.45fr 1fr; }
.video-trio--feature .video-facade--inline:nth-child(2){ aspect-ratio: 16 / 9; }
/* Previously object-fit:contain with a dark fill -- letterboxed visible black
   bars whenever YouTube fell back to the 4:3 hqdefault thumbnail inside this
   16:9 box. cover fills the frame completely (no bars); centered position
   keeps the thumbnail's usual subject-in-middle framing intact. */
.video-trio--feature .video-facade--inline:nth-child(2) .video-facade__thumb{
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px){
  .video-trio--feature{ grid-template-columns: 1fr; }
  .video-trio--feature .video-facade--inline:nth-child(2){ aspect-ratio: 16 / 9 !important; }
}

/* Heroes whose subject stands high in the frame: pairs with
   background-position: 50% 0% to keep the head clear of the fixed nav.
   Always `cover` (not the taller auto-height this used to be) -- on wide
   viewports a portrait source scaled by height alone is narrower than the
   viewport, and with no explicit background-repeat that tiled the photo
   into repeating panels instead of one continuous image. */
.hero__bg--lower{ background-size: cover; background-repeat: no-repeat; }

/* Some cards are <a> and some are <button>. Buttons don't inherit font-weight
   from the page, so their copy rendered at 400 next to 300 on the links, which
   read as a different font. Pin the card typography so every card matches. */
.show-card{ font-weight: inherit; }
.show-card__overlay p{ font-weight: 300; }
.show-card__overlay h3{ font-weight: 500; }
/* ============================================================
   THEME — three tones: warm sand, pure white, cinematic black
   Sand is the resting surface, white lifts the blocks that need to feel
   open and easy to read, black carries the photography and video. Bands
   alternate down every page so nothing reads as a repeat of the section
   above it. Brand gold, photography and copy are unchanged.
   ============================================================ */
:root{
  --sand:       #efeae1;   /* warm resting surface */
  --white:      #ffffff;   /* breathing room / raised panels */
  --night:      #0d0d10;   /* cinematic bands */
  --brand-gold: #cbab6e;   /* unchanged brand gold, used for fills */

  --ink:        var(--sand);
  --ink-soft:   #e7e1d6;
  --panel:      var(--white);
  --panel-line: rgba(18,18,24,0.13);
  --paper:      #17171b;
  --paper-dim:  #55535c;
  --gold:       #8a6a22;   /* darker gold for TEXT on light surfaces */
  --gold-light: #6f5519;
  --gold-dim:   rgba(138,106,34,0.35);
  --shadow:     0 22px 55px rgba(18,18,24,0.10);
  --hairline:   rgba(18,18,24,0.30);

  /* Always-light tokens for content layered on photography. */
  --on-photo:      #f6f2e9;
  --on-photo-dim:  #ded8cc;
  --on-photo-gold: #e8d5a4;
}

body{ background: var(--sand); color: var(--paper); }

/* ---------- band system ---------- */
.band-sand { background: var(--sand); }
.band-white{ background: var(--white); }
footer,
.band-dark {
  background: var(--night);
  color: var(--on-photo);
  --paper:      #f6f2e9;
  --paper-dim:  #cfc9bb;
  --gold:       #cbab6e;
  --gold-light: #e8d5a4;
  --gold-dim:   rgba(203,171,110,0.35);
  --panel:      #151518;
  --panel-line: rgba(245,242,234,0.09);
  --ink:        #08080a;
  --ink-soft:   #101013;
  --hairline:   rgba(245,242,234,0.35);
  --shadow:     0 30px 80px rgba(0,0,0,0.45);
}
/* Photo-backed bands paint nothing of their own but read as dark. */
.philosophy, .finale, .quote-band{ background: transparent; }

/* The hero and page-hero are <header> elements, so they never receive a band
   class — but they sit on photography and must resolve gold and paper against
   the dark palette, not the light page one. */
.hero, .page-hero{
  --paper:      #f6f2e9;
  --paper-dim:  #cfc9bb;
  --gold:       #cbab6e;
  --gold-light: #e8d5a4;
  --gold-dim:   rgba(203,171,110,0.35);
  --panel-line: rgba(245,242,234,0.09);
  --hairline:   rgba(245,242,234,0.35);
}
/* Every gold on a photo or a black band is the original brand gold. */
.hero__sub,
.hero__eyebrow::before,
.page-hero .roman::before{ color: var(--on-photo-gold); }
.hero__eyebrow::before,
.page-hero .roman::before{ background: var(--on-photo-gold); }

/* The two grey bars stay exactly as they were. */
.trusted, .accolades{
  background: #101013; color: #f6f2e9;
  --paper: #f6f2e9; --paper-dim: #cfc9bb;
  --gold: #cbab6e; --gold-light: #e8d5a4;
  --panel-line: rgba(245,242,234,0.09);
  --hairline: rgba(245,242,234,0.35);
}

/* Reviews: white cards on the sand surface — the professional mix. */
.testi-card{
  background: var(--white);
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  padding: 30px 28px;
  box-shadow: 0 2px 10px rgba(18,18,24,0.05);
}
.band-white .testi-card{ background: var(--sand); }
.faq-item{
  background: var(--white);
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  margin-bottom: 10px;
  padding: 0 22px;
}
.band-white .faq-item{ background: var(--sand); }

/* ---------- content sitting directly on photography ---------- */
.hero__title, .hero__scroll,
.page-hero h1,
.show-card__overlay h3,
.video-facade__caption,
.press-strip__headline,
.lightbox__caption,
.philosophy p.lead, .philosophy p.support,
.finale h2, .finale p,
.quote-band blockquote, .quote-band cite{ color: var(--on-photo); }
.show-card__overlay p, .moment__caption{ color: var(--on-photo-dim); }

/* The hero script line uses the same gold as the eyebrow above it. */
.hero__title .script,
.page-hero h1 .script,
.hero__eyebrow, .page-hero .roman,
.format-card__tag,
.philosophy__kicker, .philosophy p.lead .gold,
.quote-band .quote__mark{ color: var(--on-photo-gold); }

.hero__play, .video-facade__play, .moment__arrow,
.lightbox__nav, .lightbox__close{ color: var(--on-photo); }
.hero__scroll .line::after{ background: var(--on-photo-gold); }

/* ---------- the + affordance on cards ---------- */
.show-card__icon{
  background: rgba(10,10,14,0.55);
  border-color: rgba(255,255,255,0.85);
  color: #ffffff;
  font-weight: 400;
}
.show-card:hover .show-card__icon{
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0d0d10;
}

/* ---------- buttons: legible on every band ---------- */
.btn-gold{ background: var(--brand-gold); color: #0d0d10; }
.btn-gold:hover{ background: #e8d5a4; color: #0d0d10; }
.btn-ghost{ border-color: var(--hairline); color: var(--paper); }
.hero__actions .btn-ghost,
.page-hero .btn-ghost,
.philosophy .btn-ghost,
.finale .btn-ghost,
.quote-band .btn-ghost{ color: var(--on-photo); border-color: rgba(246,242,233,0.55); }
.hero__actions .btn-ghost:hover,
.page-hero .btn-ghost:hover,
.philosophy .btn-ghost:hover,
.finale .btn-ghost:hover,
.quote-band .btn-ghost:hover{ border-color: var(--on-photo-gold); color: var(--on-photo-gold); }

/* ---------- nav: white bar with the black logo once scrolled ---------- */
.nav__logo{ position: relative; display: inline-flex; }
.nav__logo-img{ display: block; transition: opacity .3s ease; }
.nav__logo-img--dark{ position: absolute; inset: 0; opacity: 0; }
.nav.scrolled .nav__logo-img--light,
.nav.menu-open .nav__logo-img--light{ opacity: 0; }
.nav.scrolled .nav__logo-img--dark,
.nav.menu-open .nav__logo-img--dark{ opacity: 1; }

/* Scoped to the top-level nav links only (`> li > a`) -- the unscoped
   descendant selector this replaced also matched the Magical Experiences
   dropdown's own links, since the dropdown panel lives inside that same
   <li>. That painted its links cream-on-white (near-invisible) for as long
   as the nav was unscrolled, which is exactly "over the hero, at the top of
   any page" -- the dropdown only looked fine once you'd scrolled past the
   point where .scrolled takes over and this rule stops applying. */
.nav:not(.scrolled):not(.menu-open) .nav__links > li > a,
.nav:not(.scrolled):not(.menu-open) .lang-dropdown__trigger,
.nav:not(.scrolled):not(.menu-open) .nav__play,
.nav:not(.scrolled):not(.menu-open) .nav__enquire{ color: var(--on-photo); }
.nav:not(.scrolled):not(.menu-open) .nav__enquire{ border-color: rgba(246,242,233,0.55); }
.nav:not(.scrolled):not(.menu-open) .nav__burger span{ background: var(--on-photo); }

.nav.scrolled{ background: #ffffff; border-bottom-color: rgba(18,18,24,0.12); }
/* The mobile menu itself is a light (sand) full-screen panel, not the dark
   hero photo the on-photo icon colours were designed for -- so once it's
   open, the still-visible nav bar controls need the same dark treatment
   .scrolled already uses, even if the page itself hasn't been scrolled. */
.nav.scrolled .nav__links a,
.nav.scrolled .lang-dropdown__trigger,
.nav.scrolled .nav__play,
.nav.scrolled .nav__enquire,
.nav.menu-open .nav__links a,
.nav.menu-open .lang-dropdown__trigger,
.nav.menu-open .nav__play,
.nav.menu-open .nav__enquire{ color: #17171b; }
.nav.scrolled .nav__enquire,
.nav.menu-open .nav__enquire{ border-color: rgba(18,18,24,0.35); }
.nav.scrolled .nav__burger span,
.nav.menu-open .nav__burger span{ background: #17171b; }
.nav.scrolled .nav__links a.active,
.nav.menu-open .nav__links a.active{ color: #8a6a22; }
.nav.scrolled .nav__links a::after,
.nav.menu-open .nav__links a::after{ background: #8a6a22; }
/* Same context-token fix as the nav-link active colour above, scoped to the
   nav's own language switch only (.lang-switch--mobile inside the mobile
   menu panel is a light/sand background, where the un-scoped var(--gold-light)
   this rule used to inherit is already the correct dark-on-light colour --
   only the nav bar's own instance, floating over the dark hero photo, needs
   the always-light token). */
.nav__cta .lang-btn.active{ color: var(--on-photo-gold); }
.nav.scrolled .nav__cta .lang-btn.active,
.nav.menu-open .nav__cta .lang-btn.active{ color: #8a6a22; }

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

/* Standalone quote strip (Belfius) gets its own dark band. */
.quote-strip{ padding: 10px 0 58px; }
.quote-strip .quote--featured{ margin-left: auto; margin-right: auto; }

/* Section borders should follow the band, not the old dark palette. */
.trusted, .accolades, .pain-points{ border-color: var(--panel-line); }

/* The play button's outline is a light hairline, invisible once the bar
   turns white — give it the band's own hairline instead. */
.nav__play{ border-color: var(--hairline); }
/* Over the hero photo the play icon is a video play button like the others,
   so it carries the brand gold; once the bar turns white it has to go dark to
   stay legible. */
.nav:not(.scrolled):not(.menu-open) .nav__play{ border-color: rgba(232,213,164,0.60); color: var(--on-photo-gold); }
.nav:not(.scrolled):not(.menu-open) .nav__play:hover{ border-color: var(--on-photo-gold); color: #f2e4bf; }
.nav.scrolled .nav__play,
.nav.menu-open .nav__play{ border-color: rgba(18,18,24,0.4); color: #17171b; }
.nav.scrolled .nav__play:hover,
.nav.menu-open .nav__play:hover{ border-color: var(--brand-gold); color: #8a6a22; }

/* Standalone CTA band: the divider rule belongs to in-section CTAs, not to a
   band that already separates itself by colour. */
.cta-band{ padding: 58px 0; }
.section-cta--flush{ margin-top: 0; padding-top: 0; border-top: 0; }

/* A colour change already separates two bands, so drop the hairline where
   one band meets another. */
.band-sand + .band-dark,
.band-white + .band-dark,
.band-dark + .band-sand,
.band-dark + .band-white,
.band-sand + .band-white,
.band-white + .band-sand{ border-top: 0; }

/* Play buttons on video thumbnails carry the original brand gold. */
.video-facade__play{ color: var(--on-photo-gold); }
.video-facade:hover .video-facade__play{ color: #f2e4bf; }
.hero__play{ color: var(--on-photo-gold); }

/* The shows section had no vertical padding at all, so a closing CTA spilled
   past the section edge into the next band. Give it the same rhythm as its
   siblings, and guarantee breathing room under whatever ends any section. */
.shows{ padding: 130px 0; }
section > .container > *:last-child{ margin-bottom: 0; }
.section-cta:last-child{ margin-bottom: 6px; }
@media (max-width: 700px){
  .shows{ padding-bottom: 90px; }
}

/* ============================================================
   SITE SEARCH
   ============================================================ */

/* The trigger sits next to the play button and mirrors it exactly, so the two
   read as one pair of round controls rather than two unrelated icons. */
.nav__search{
  display:flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--paper);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
  flex-shrink: 0;
}
.nav__search svg{ width:15px; height:15px; }
.nav__search:hover{ transform: scale(1.06); }
.nav:not(.scrolled):not(.menu-open) .nav__search{ border-color: rgba(232,213,164,0.60); color: var(--on-photo-gold); }
.nav:not(.scrolled):not(.menu-open) .nav__search:hover{ border-color: var(--on-photo-gold); color: #f2e4bf; }
.nav.scrolled .nav__search,
.nav.menu-open .nav__search{ border-color: rgba(18,18,24,0.4); color: #17171b; }
.nav.scrolled .nav__search:hover,
.nav.menu-open .nav__search:hover{ border-color: var(--brand-gold); color: #8a6a22; }

.mobile-menu__search{
  display:flex; align-items:center; gap: 12px;
  background: transparent; border: 0; padding: 0;
  color: inherit; font: inherit;
}
.mobile-menu__search svg{ width:17px; height:17px; flex-shrink:0; }

/* The panel itself is dark, like the video modal and the lightbox: an overlay
   should read as a layer above the page, whatever band it was opened from. */
.site-search{
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 96px 24px 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.site-search.is-open{ opacity: 1; visibility: visible; }
.site-search__backdrop{
  position: absolute; inset: 0;
  background: rgba(6,6,8,0.90);
  backdrop-filter: blur(5px);
}
.site-search__panel{
  position: relative; z-index: 2;
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 44px 40px 34px;
  background: #121216;
  border: 1px solid rgba(245,242,234,0.12);
  border-radius: 4px;
  color: #f6f2e9;
  transform: translateY(-14px);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.site-search.is-open .site-search__panel{ transform: translateY(0); }

.site-search__close{
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; line-height: 1;
  font-size: 26px;
  background: transparent; border: 0;
  color: rgba(246,242,233,0.6);
  transition: color .2s ease;
}
.site-search__close:hover{ color: var(--brand-gold); }

.site-search__eyebrow{
  font-family: var(--f-display);
  font-size: 20px; letter-spacing: 0.01em;
  margin: 0 0 8px;
}
.site-search__sub{
  font-size: 13.5px; line-height: 1.6;
  color: rgba(246,242,233,0.62);
  margin: 0 0 22px;
}

.site-search__field{
  position: relative;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(245,242,234,0.28);
  transition: border-color .25s ease;
}
.site-search__field:focus-within{ border-color: var(--brand-gold); }
.site-search__field-icon{
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--brand-gold);
}
.site-search__input{
  flex: 1;
  padding: 12px 0 12px 14px;
  background: transparent; border: 0; outline: none;
  color: #f6f2e9;
  font-family: inherit; font-size: 16px; font-weight: 300;
}
.site-search__input::placeholder{ color: rgba(246,242,233,0.38); }
/* Safari draws its own clear button on type="search"; it clashes with the rule. */
.site-search__input::-webkit-search-cancel-button{ -webkit-appearance: none; }

.site-search__results{
  list-style: none; margin: 14px 0 0; padding: 0;
}
.site-search__result a{
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px;
  border-radius: 3px;
  text-decoration: none; color: inherit;
  transition: background-color .18s ease;
}
.site-search__result-label{
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #f6f2e9;
  flex-shrink: 0;
}
.site-search__result-desc{
  flex: 1;
  font-size: 12.5px; line-height: 1.45;
  color: rgba(246,242,233,0.55);
}
.site-search__result-arrow{
  width: 17px; height: 17px; flex-shrink: 0;
  color: var(--brand-gold);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.site-search__result.is-active a{ background: rgba(245,242,234,0.07); }
.site-search__result.is-active .site-search__result-label{ color: var(--brand-gold); }
.site-search__result.is-active .site-search__result-arrow{ opacity: 1; transform: translateX(0); }

.site-search__empty{
  padding: 16px 14px;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(246,242,233,0.62);
}
.site-search__empty a{ color: var(--brand-gold); }

/* A real prompt to keep typing, not a keyboard instruction -- but styled
   and placed exactly where the old "press Enter" hint sat, after the
   results: small, quiet, uppercase. Putting it after the suggestions
   rather than between the field and the results keeps the input's
   immediate neighbourhood uncluttered, so the list of suggestions is the
   first thing read, not a line of gold italic competing with it. */
/* Same quiet, small-caps register the old "press Enter" hint used --
   after the results, not competing with them -- but now a genuine
   fallback action instead of a keyboard instruction: a small button, not
   just a line of text, for whoever typed something the routing table
   didn't recognise. */
.site-search__cta{
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(245,242,234,0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.site-search__cta p{
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(246,242,233,0.34);
}
.site-search__cta-btn{
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid rgba(245,242,234,0.3);
  border-radius: 2px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-gold);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-search__cta-btn:hover{ border-color: var(--brand-gold); background: rgba(203,171,110,0.08); }

/* Locking the body stops the page scrolling behind the open panel. */
body.search-open{ overflow: hidden; }

@media (max-width: 620px){
  .site-search{ padding: 76px 16px 16px; }
  .site-search__panel{ padding: 38px 22px 26px; max-height: calc(100vh - 92px); }
  .site-search__sub{ margin-bottom: 18px; }
  /* Stacked, so a long description never squeezes the label to one word. */
  .site-search__result a{ flex-wrap: wrap; gap: 4px 12px; padding: 12px 10px; }
  .site-search__result-label{ width: 100%; }
  .site-search__result-desc{ flex: 1 1 100%; }
  .site-search__result-arrow{ display: none; }
  .site-search__cta{ flex-direction: column; align-items: stretch; gap: 10px; }
  .site-search__cta-btn{ text-align: center; }
  }

/* iOS zooms any input under 16px on focus; the field is already at 16px, but
   the panel must not be taller than the visual viewport when the keyboard is up. */
@media (max-width: 620px) and (max-height: 560px){
  .site-search{ padding-top: 56px; }
  .site-search__sub{ display: none; }
}

/* The global focus ring resolves to the light-band gold (#6f5519), which is
   nearly invisible on the search panel's dark surface. Inside the panel it
   takes the brand gold instead -- except on the input, where the gold rule
   under the field is already the focus indicator and a box around it reads
   as a second, competing border. */
.site-search :focus-visible{ outline: 2px solid var(--brand-gold); outline-offset: 3px; }
.site-search__input:focus-visible{ outline: none; }

/* ============================================================
   MARQUEE HOVER FIX
   ============================================================ */
/* The scroll must never stop, including on hover -- :hover already
   hit-tests against each logo's actual painted (post-transform) position,
   so the browser highlights whichever logo is really under the cursor at
   that instant with no help needed. What made it feel wrong was the 0.35s
   ease-in on hover: by the time the highlight finished fading in, the
   marquee had carried that logo on and the highlight looked like it landed
   on its neighbour. A near-instant hover-in fixes the perceived mismatch
   without ever touching animation-play-state. */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation-play-state: paused; }
}

/* ============================================================
   SEARCH CONSOLE (inline, between hero and trusted-by strip)
   ============================================================ */
.search-console{ padding: 76px 0; }
.search-console .section-head{ margin-bottom: 0; }
/* The heading now carries a hard <br> so it always reads as exactly two
   lines; the shared .section-head clamp floors at 30px, which is too large
   for "Not sure where to start?" to fit one line on a narrow phone without
   wrapping a third time. A lower floor keeps each authored line on its own
   single line at every width instead of letting the browser re-wrap it. */
/* Tuned so the floor (not the fluid term) is what's actually active across
   the whole realistic phone range -- at 6vw the "preferred" value overtook
   the floor well before the width where French's longer line needed it,
   which was silently undoing the floor's job. 3.5vw stays under the floor
   until ~540px, so every phone width gets the same safe, tested size. */
.search-console .section-head h2{ font-size: clamp(19px, 3.5vw, 40px); }
/* French's second line is the long pole -- still wraps a third time under
   ~370px even at the 19px floor. A lower floor for genuinely narrow phones
   (down to the 320px iPhone SE) keeps every language's break at exactly two
   lines everywhere, not just from ~375px up. */
@media (max-width: 370px){
  .search-console .section-head h2{ font-size: 16px; }
}
.search-console__field{
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 560px;
  margin: 30px auto 0;
  padding: 15px 4px;
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  color: var(--paper-dim);
  text-align: left; font-family: inherit;
  transition: border-color .25s ease;
}
.search-console__field:hover,
.search-console__field:focus-visible{ border-color: var(--gold); outline: none; }
.search-console__field-icon{ width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }
.search-console__placeholder{ font-size: 16px; font-weight: 300; color: var(--paper-dim); }
@media (max-width: 620px){
  .search-console{ padding: 56px 0; }
}

/* Trade Fair show card (Corporate + Brand Activations, same source photo):
   the strong reaction is at the far left of the frame and Jonas is at the
   far right -- a single crop can't hold both extremes, so mobile favours
   the reaction (the card's dominant, full-bleed content at that width)
   and desktop favours keeping Jonas himself in frame. */
.crop-tradefair{ object-position: 8% center; }
@media (min-width: 901px){
  .crop-tradefair{ object-position: 78% center; }
}

/* Home finale band ("Three months from now..."): source photo is a six-person
   group shot, ~1.5:1. At narrow/tall viewports background-size:cover already
   crops down to a narrow vertical strip of the source, so a plain
   background-position is enough to aim that strip at the reacting guest on
   the left and Jonas on the right -- unchanged from the prior round.
   At any viewport whose finale container is about as wide as, or wider
   than, the photo's own aspect (roughly min-aspect-ratio 4/3 and up --
   1024x768 landscape tablets through 2560x1440 desktops and 844x390
   landscape mobile), cover already shows the complete photo with no
   horizontal crop at all, so no extra zoom is applied there; position is
   kept high in the frame, since .finale anchors its text to the bottom of
   the section and the scrim only fully darkens the lower ~45% -- keeping
   the group's faces above that line. */
.crop-finale-home{ background-position: 82% 16%; }
@media (min-aspect-ratio: 4/3){
  .crop-finale-home{ background-size: cover; background-position: 58% center; }
}