/* The Gym — landingspagina v1 (naar ontwerp Jamie 07-07-2026, brand Danny v1.0) */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--chalk-white);
  color: var(--rings-black);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Loader (draaiend poppetje, idee Jamie p.1) ---------- */

/* Loader — "Warming-up ritueel": gymnast pendelt om de vork (pivot = vorklijn),
   krijt-ripples uit de logocirkel, exit = cirkel-reveal via mask (mockup-GO 2026-07-08).
   Zonder @property-support: geen hole-animatie, opacity-fade vangt het op. */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }

#loader {
  position: fixed; inset: 0; z-index: 50;
  background: var(--chalk-white); /* guide: licht vlak → Rings Black artwork (operator 2026-07-08, conform Jamie p.1) */
  display: flex; align-items: center; justify-content: center;
  --hole: -2px; /* negatief: anders prikt de gradient een subpixel-gaatje op exact het middelpunt */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole));
          mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole));
  transition: --hole .85s cubic-bezier(.55,0,.2,1), opacity .3s ease .6s;
}
#loader.is-done { --hole: 120vmax; opacity: 0; pointer-events: none; }

.loader-scene { position: relative; width: 280px; height: 280px; display: grid; place-content: center; }

/* Exact cirkel-beeldmerk, ONGEsplitst (2026-07-09: laag-splitsing dismembert het artwork —
   compound-path winding laat zich niet veilig scheiden). Motie = één uitdempende zwaai bij
   binnenkomst (embleem "wordt opgehangen"), daarna rust: artwork altijd 100% intact. */
.loader-art {
  position: relative; width: 200px;
  transform-origin: 50% 48%; /* vorklijn */
  animation: loader-settle 1.7s cubic-bezier(.34, 1.35, .5, 1) 1 both;
}
.loader-art img { display: block; width: 100%; max-width: none; height: auto; }
@keyframes loader-settle {
  0%   { transform: rotate(-11deg); }
  55%  { transform: rotate(3.5deg); }
  80%  { transform: rotate(-1.2deg); }
  100% { transform: rotate(0deg); }
}

.loader-reveal {
  position: absolute; left: 50%; top: 50%; width: 180px; height: 180px;
  transform: translate(-50%,-50%) scale(.98); border-radius: 50%;
  border: 2px solid var(--rings-black); opacity: 0; pointer-events: none;
}
#loader.is-done .loader-reveal { animation: loader-reveal .85s cubic-bezier(.55,0,.2,1) forwards; }
@keyframes loader-reveal {
  0%   { transform: translate(-50%,-50%) scale(1);  opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(16); opacity: 0; }
}
#loader.is-done .loader-art { transition: opacity .3s ease; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .loader-art, .loader-reveal { animation: none !important; }
  #loader { -webkit-mask-image: none; mask-image: none; transition: opacity .45s ease; }
}

/* ---------- Verticale gids-lijnen + dalende kreeft (guide p.11 × Fidalgo; GO 2026-07-09) ---------- */

.guides { display: none; }
.guide-plate { display: none; }
footer { position: relative; overflow: hidden; } /* anker + clip: bord steekt half uit de bodem */
@media (min-width: 900px) {
  .guides { display: block; position: fixed; inset: 0; pointer-events: none; }
  .guides-over  { z-index: 7; } /* linkerlijn: boven de secties, onder de nav (z10) */
  .guides-under { z-index: 2; } /* rechterlijn: duikt achter galerij (z3), footer-beeld (z3) én het bord (z4) */
  .guides-lob   { z-index: 2; } /* kreeft: eigen laag — duikt mee, maar ligt bij landing bóven het bord */
  .guide-line {
    position: absolute; top: 0; width: 1px; bottom: 0;
    background-image: repeating-linear-gradient(180deg,
      rgba(148,106,71,.5) 0 5px, transparent 5px 11px); /* medal-bronze: leest op chalk, groen én foto */
  }
  .guide-line.left { bottom: var(--lines-cut, 0px); } /* linkerlijn stopt op de balk-rand; rechterlijn loopt door achter het bord */
  .guide-line.left  { left: clamp(24px, 4vw, 56px); }   /* in de marge — botst nergens met tekst */
  /* rechterlijn exact op de linkerrand van de hero-video (JS meet de naad → --gr op :root); fallback = marge */
  .guide-line.right { right: var(--gr, clamp(24px, 4vw, 56px)); }
  .guide-lobster {
    position: absolute; right: var(--gr, clamp(24px, 4vw, 56px)); top: 120px;
    width: 26px; height: 33px;
    transform: translateX(50%) rotate(0deg); /* gecentreerd op de lijn */
    transition: top .15s linear, transform .7s cubic-bezier(.34, 1.3, .5, 1);
    /* geen shadow (operator): kreeft in medal-bronze (asset-fill) = zelfde systeem als de lijnen */
  }
  .guide-lobster.landed { transform: translateX(50%) rotate(90deg) scale(1.3); } /* finale: groter, ín het bord */
  .guide-lobster img { display: block; width: 100%; max-width: none; height: auto; }
  .guide-plate { /* echt bord, half uit de bodem (operator 2026-07-09); z4 = boven footer-foto (z3) */
    display: block;
    position: absolute; right: var(--gr, clamp(24px, 4vw, 56px)); bottom: -60px; z-index: 4;
    width: 120px; height: 120px;
    transform: translateX(50%); /* gecentreerd op de lijn */
  }
  .guide-plate img { display: block; width: 100%; max-width: none; height: auto; }
  body.at-bottom .guides-lob { z-index: 6; } /* bij landing: kreeft bóven het bord (lijn blijft eronder) */
  @media (prefers-reduced-motion: reduce) {
    .guide-lobster { top: 45vh !important; transition: none; }
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; /* anker voor de full-width overlay-header */
  display: grid;
  /* Geen 50/50: de videokolom volgt de eigen verhouding van de video (640×1134),
     zodat het beeld na laden altijd volledig zichtbaar is; tekst krijgt de rest. */
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: min(88vh, 780px);
}

.hero-left {
  background: var(--locker-green);
  color: var(--chalk-white);
  display: flex; flex-direction: column;
  /* padding-top compenseert de overlay-header (header-padding + nav-hoogte) */
  padding: calc(clamp(24px, 4vw, 48px) + clamp(56px, 7.2vw, 90px)) clamp(24px, 5vw, 72px) clamp(24px, 4vw, 48px);
}

/* Uniforme full-width header: overlay over de hele hero, identieke posities op home + careers */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: clamp(18px, 2.5vw, 32px);
  min-height: clamp(56px, 7.2vw, 90px);
  padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 72px) 0;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }

/* Nav-effect (referentie ver-brand 2026-07-09): directionele underline — schuift van links in,
   verdwijnt naar rechts. Geel = actieve/hover-register, zoals de rest van de header. */
.nav-link {
  position: relative;
  color: var(--chalk-white);
  text-decoration: none;
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--label-tracking);
  transition: color .3s ease-in-out;
}
.nav-link::after {
  content: ""; position: absolute;
  left: auto; right: 0; bottom: -6px;
  width: 0; height: 1.5px;
  background: var(--accent-yellow);
  transition: width .3s ease-in-out;
}
.nav-link.is-active { color: var(--accent-yellow); }
.nav-link:hover { color: var(--accent-yellow); }
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; left: 0; right: auto; }

/* NL | EN altijd zichtbaar; actieve taal in accent-geel (operator 2026-07-08). margin-left:auto behoudt logo-centrering. */
.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang-opt {
  background: none; border: none; padding: 4px 2px;
  color: rgba(242, 237, 228, .55);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--label-tracking);
  cursor: pointer;
}
.lang-opt { transition: color .3s ease-in-out; }
.lang-opt:hover { color: var(--chalk-white); }
.lang-opt.is-active { color: var(--accent-yellow); cursor: default; }
.lang-sep { color: rgba(242, 237, 228, .35); font-size: 12px; }

.hero-copy {
  margin: auto;
  width: min(100%, 34em);
  padding: clamp(40px, 6vw, 64px) 0;
  max-width: 30em;
}

.eyebrow {
  font-size: 12px; font-weight: 400; font-style: italic;
  letter-spacing: var(--label-tracking);
  line-height: 1.9;
  margin: 0 0 clamp(18px, 3vw, 28px);
  opacity: .92;
}

.hero-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 clamp(16px, 2.5vw, 24px);
}

.lead {
  font-weight: 300;
  font-size: clamp(15px, 1.35vw, 17px);
  max-width: 26em;
  margin: 0 0 clamp(28px, 4vw, 44px);
  opacity: .95;
}

/* Tekstlink-effect (referentie ver-brand 2026-07-09): onderstreep groeit mee en een pijl
   schuift van rechts in — de padding maakt de ruimte, de border-bottom volgt vanzelf. */
.insta-link {
  position: relative;
  color: var(--chalk-white);
  text-decoration: none;
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--label-tracking);
  border-bottom: 1px solid rgba(242, 237, 228, .45);
  padding-bottom: 4px;
  align-self: flex-start;
  width: fit-content;
  transition: color .3s ease-in-out, border-color .3s ease-in-out, padding-right .3s ease-in-out;
}
.insta-link::after {
  content: "\2192"; /* → */
  position: absolute; right: -14px; bottom: 4px;
  font-size: 13px; line-height: 1;
  color: var(--accent-yellow);
  opacity: 0; visibility: hidden;
  transition: right .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
}
.insta-link:hover { border-color: var(--accent-yellow); color: var(--accent-yellow); padding-right: 22px; }
.insta-link:hover::after { right: 0; opacity: 1; visibility: visible; }

/* Foto rechts */

.hero-right {
  position: relative;
  background: var(--rings-black);
  width: calc(min(88vh, 780px) * (640 / 1134));
}

.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

.badge {
  /* basis-pill; positionering per variant: .badge-head (in header, desktop) / .badge-photo (op foto, mobiel) */
  background: var(--chalk-white);
  color: var(--rings-black);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--label-tracking);
  padding: 9px 18px;
  white-space: nowrap;
}

/* Wordmark in de header — absoluut gecentreerd in de balk (operator 2026-07-08:
   auto-marge-variant hing rechts van het midden omdat links breder is dan de switcher). */
.nav-logo {
  position: absolute; left: 50%;
  top: calc(50% + clamp(12px, 2vw, 24px)); /* +halve padding-top: border-box maakt 50% anders boven de rij */
  transform: translate(-50%, -50%);
  width: clamp(110px, 12vw, 150px); max-width: none; height: auto;
}
@media (max-width: 639px) { /* smal scherm: logo op eigen rij — gecentreerd logo overlapte "WERKEN BIJ" (iPhone, operator 2026-07-09) */
  .nav { flex-wrap: wrap; row-gap: 12px; }
  .nav-logo {
    position: static; transform: none;
    order: -1; flex-basis: 100%;
    height: 60px; width: auto; object-fit: contain;
  }
  .hero-left { padding-top: 150px; } /* twee-rijen-header is hoger: eyebrow zat tegen de nav (operator-iPhone) */
}

/* ---------- First look-slider (Danny-first ronde 2, GO 2026-07-08) ---------- */

.fl { position: relative; z-index: 3; height: min(82vh, 720px); overflow: hidden; background: var(--rings-black); } /* z3: dekt de guides-under af (kreeft duikt erachter) */
.fl-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.fl-slide.is-active { opacity: 1; }
.fl-slide img { width: 100%; height: 100%; object-fit: cover; }
.fl-slide.pos-hall img { object-position: 50% 30%; } /* portret-foto: Sidney in beeld houden */
.fl-slide::after { /* leesbaarheidsgradient onderin */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,31,31,.08) 45%, rgba(31,31,31,.62) 100%);
}
.fl-caption {
  position: absolute; left: clamp(20px, 6vw, 72px); bottom: clamp(28px, 6vh, 56px); z-index: 3;
  color: var(--chalk-white); max-width: 34em;
}
.fl-kicker {
  font-size: 11px; letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--accent-pink); margin: 0 0 10px;
}
.fl-title {
  font-family: var(--font-heading); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 3.4vw, 34px); line-height: 1.15; margin: 0;
}
.fl-nav {
  position: absolute; right: clamp(20px, 5vw, 56px); bottom: clamp(28px, 6vh, 56px); z-index: 4;
  display: flex; align-items: center; gap: 18px; color: var(--chalk-white);
}
.fl-count { font-size: 12px; letter-spacing: .2em; }
.fl-count b { font-weight: 600; color: var(--accent-yellow); }
.fl-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(242,237,228,.55); background: rgba(31,31,31,.25);
  color: var(--chalk-white); font-size: 16px; cursor: pointer;
  display: grid; place-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.fl-btn:hover { background: var(--medal-bronze); border-color: var(--medal-bronze); }
.fl-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: rgba(242,237,228,.18); z-index: 4;
}
.fl-bar i { display: block; height: 100%; width: 0; background: var(--accent-yellow); }
.fl-bar i.run { animation: fl-bar 4.8s linear forwards; }
@keyframes fl-bar { to { width: 100%; } }

@media (max-width: 899px) { /* nieuwsbriefkaart steekt 64px de galerij in: caption + pijlen erboven houden (operator 2026-07-09) */
  .fl-caption, .fl-nav { bottom: calc(64px + clamp(28px, 6vh, 44px)); }
  .fl-caption { right: calc(clamp(20px, 5vw, 56px) + 170px); } /* tekst wrapt vrij van teller + pijlen */
}

@media (prefers-reduced-motion: reduce) {
  .fl-slide { transition: none; }
  .fl-bar { display: none; }
}

/* ---------- DK campagne-regel — leeft in het mascotte-podium (guide p.7; foto-footer vervangen 2026-07-09) ---------- */

.dk-type {
  margin: 0;
  align-self: center;
  position: relative; z-index: 4; /* boven de lichtpool: tekst blijft helder (operator 2026-07-09) */
  font-family: var(--font-display);
  font-size: clamp(36px, 6.4vw, 84px);
  line-height: .95; text-transform: uppercase;
  padding-bottom: 10vh;
  pointer-events: none;
}
.dk-l1 { display: block; color: var(--chalk-white); }
.dk-l2 { display: block; color: var(--accent-yellow); }

/* Glitch op de DK-regel (operator-referentie, ver-brand 2026-07-09): twee pseudo-echo's
   (roze + bronze i.p.v. neon) met intermitterende clip-bursts; basistekst blijft leesbaar. */
.dk-type .glitched { position: relative; display: block; }
.dk-type .glitched::before,
.dk-type .glitched::after {
  content: attr(data-text) / ""; /* lege alt: decoratief — screenreaders lezen de regel anders 3x */
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none;
}
.dk-type .glitched::before {
  transform: translateX(2px);
  text-shadow: -2px 0 rgba(240,188,174,.75); /* accent-pink echo */
  clip-path: inset(100% 0 0 0);
  animation: dk-glitch-a 3.4s infinite steps(1);
}
.dk-type .glitched::after {
  transform: translateX(-2px);
  text-shadow: 2px 0 rgba(148,106,71,.85); /* medal-bronze echo */
  clip-path: inset(0 0 100% 0);
  animation: dk-glitch-b 2.9s infinite steps(1);
}
.dk-l2.glitched::before { text-shadow: -2px 0 rgba(242,237,228,.6); } /* op geel: chalk-echo */
@keyframes dk-glitch-a { /* bursts met lange stiltes */
  0%   { clip-path: inset(100% 0 0 0); }
  12%  { clip-path: inset(18% 0 62% 0); }
  15%  { clip-path: inset(100% 0 0 0); }
  46%  { clip-path: inset(55% 0 20% 0); }
  49%  { clip-path: inset(100% 0 0 0); }
  78%  { clip-path: inset(5% 0 80% 0); }
  82%  { clip-path: inset(100% 0 0 0); }
}
@keyframes dk-glitch-b {
  0%   { clip-path: inset(0 0 100% 0); }
  27%  { clip-path: inset(70% 0 8% 0); }
  30%  { clip-path: inset(0 0 100% 0); }
  61%  { clip-path: inset(30% 0 45% 0); }
  65%  { clip-path: inset(0 0 100% 0); }
  90%  { clip-path: inset(82% 0 4% 0); }
  93%  { clip-path: inset(0 0 100% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-type .glitched::before, .dk-type .glitched::after { animation: none !important; opacity: 0; }
}

/* ---------- Signup — leather-red kaart als menu-omslag (Danny-first, GO 2026-07-08) ---------- */

.signup {
  position: relative;
  padding: clamp(64px, 10vw, 112px) 24px clamp(48px, 7vw, 80px);
  display: flex; justify-content: center;
}
.signup::before { /* brand-pattern (guide p.11): locker op chalk, laagste register — "support, never overpower" */
  content: ""; position: absolute; inset: 0;
  background: url("../assets/img/pattern-locker.webp") repeat;
  background-size: 1600px auto; /* 4x groter (operator 2026-07-09) */
  opacity: .13;
  pointer-events: none;
}

/* Broodmand tégen de nieuwsbriefkaart (operator): gespiegeld zodat de bolle kant naar buiten wijst
   en de snijkant achter de kaart verdwijnt; kaart (later in DOM, positioned) dekt de overlap af. */
.signup-bread { display: none; }
@media (min-width: 1100px) {
  .signup-bread {
    display: block;
    position: absolute;
    right: calc(50% + 348px); /* vrijwel volledig zichtbaar; raakt de kaartrand net (8px overlap) */
    bottom: clamp(48px, 7vw, 80px); /* gelijk met de kaart-onderkant */
    width: clamp(360px, 34vw, 480px); max-width: none; height: auto;
    transform: scaleX(-1);
    pointer-events: none;
  }
}

.signup-card {
  position: relative;
  z-index: 4; /* boven de galerij (z3) waar de kaart eroverheen steekt */
  margin-top: calc(clamp(64px, 10vw, 112px) * -1 - 64px); /* kaart 64px over de galerij heen (operator 2026-07-09) */
  width: min(712px, 100%);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.05), transparent 60%),
    var(--leather-red);
  color: var(--chalk-white);
  padding: clamp(40px, 7vw, 64px) clamp(24px, 6vw, 56px) clamp(36px, 6vw, 56px);
  box-shadow: 0 24px 60px -24px rgba(31,31,31,.45), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  text-align: left;
}
/* Cursor-volgende gradient-rand + gloed (reel-inspiratie, ver-brand: bronze/geel i.p.v. neon; operator 2026-07-08).
   Alleen hover/fine-pointer; touch en reduced-motion zien niets. */
.signup-card { --mx: 50%; --my: 25%; }
.signup-card::before { /* zachte interieur-gloed nabij de cursor */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(222,178,53,.14), transparent 65%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.signup-card::after { /* gradient-randring die de cursor volgt */
  content: ""; position: absolute; inset: 0; z-index: 3;
  padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(222,178,53,.8), rgba(148,106,71,.35) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .signup-card:hover::before, .signup-card:hover::after { opacity: 1; }
}

.signup-emboss { /* blind-embossed wordmark, zoals het leren menu-omslag in de guide */
  position: absolute; right: -30px; bottom: -34px;
  width: 300px; max-width: none; height: auto; opacity: .10;
  filter: brightness(.4) sepia(1) hue-rotate(-20deg) saturate(2);
  pointer-events: none;
}
.signup-kicker {
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--accent-pink); margin: 0 0 16px;
}
.signup-rule { width: 56px; height: 1px; background: var(--medal-bronze); margin: 0 0 22px; }

.signup-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  color: var(--chalk-white);
  font-size: clamp(28px, 4.2vw, 42px);
  margin: 0 0 14px;
}

.signup-body {
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 34em;
  margin: 0 0 clamp(26px, 4vw, 34px);
  opacity: .9;
}

.mc-form { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 2; }

.mc-email {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 300;
  color: var(--chalk-white);
  background: transparent;
  border: 1px solid rgba(242,237,228,.4);
  padding: 13px 16px;
  flex: 1 1 240px;
  outline: none;
}
.mc-email:focus { border-color: var(--medal-bronze); }
.mc-email::placeholder { color: rgba(242,237,228,.5); }

/* Knop-effect (referentie ver-brand 2026-07-09): diagonale gradient-sweep (geel schuift over
   bronze binnen) + bronze offset-frame rechtsonder dat bij hover op z'n plek klikt en dooft. */
.mc-submit {
  position: relative;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--label-tracking);
  color: var(--chalk-white);
  background-color: var(--medal-bronze);
  background-image: linear-gradient(340deg, var(--accent-yellow) 50%, rgba(222, 178, 53, 0) 50%);
  background-size: 300%;
  background-position: 0%;
  border: 1px solid var(--medal-bronze);
  padding: 13px 28px;
  cursor: pointer;
  transition: background-position .35s ease-in-out, color .35s ease-in-out, border-color .35s ease-in-out;
}
.mc-submit::before,
.mc-submit::after {
  content: ""; position: absolute; pointer-events: none;
  background: rgba(148, 106, 71, .8);
  transition: right .3s ease-in-out, bottom .3s ease-in-out, opacity .3s ease-in-out;
}
.mc-submit::before { right: -7px; bottom: -7px; width: 100%; height: 1px; }
.mc-submit::after  { right: -7px; bottom: -7px; width: 1px; height: 100%; }
.mc-submit:hover { background-position: 98%; color: var(--rings-black); border-color: var(--accent-yellow); }
.mc-submit:hover::before,
.mc-submit:hover::after { right: 0; bottom: 0; opacity: 0; }

.hp { position: absolute; left: -5000px; }

.mc-privacy {
  font-size: 12px; font-weight: 300;
  max-width: 40em;
  margin: 14px 0 0;
  opacity: .6;
}

.mc-msg { font-size: 14px; min-height: 1.5em; margin: 16px 0 0; }
.mc-msg.is-ok { color: var(--accent-pink); }
.mc-msg.is-err { color: var(--accent-yellow); }

/* ---------- Footer ---------- */

/* Mascotte-podium (mockup-variant 5, GO 2026-07-09): rings-black wand, DK-regel links,
   kreeft2-video rechts op origineel contrast — de blend gebeurt via de zwarte lichtpool
   en een rand-feather op de video, niet via zwart-lift (dat maakte het beeld dof). */
.footer-stage {
  position: relative; z-index: 3; /* dekt de guides-under af (kreeft duikt erachter) */
  background: var(--rings-black);
  overflow: hidden;
}
.stage-inner {
  position: relative;
  max-width: 1240px; margin: 0 auto;
  min-height: min(78vh, 680px);
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  padding: 72px clamp(96px, 12vw, 180px) 0 clamp(28px, 6vw, 96px);
}
.stage-mascot { position: relative; align-self: end; line-height: 0; }
.stage-mascot::before { /* zwarte pool: de wand loopt donker toe naar de scène (theaterlicht) */
  content: ""; position: absolute; inset: -32% -48%;
  background: radial-gradient(ellipse 58% 56% at 50% 52%, #000 48%, rgba(0,0,0,0) 80%);
  pointer-events: none;
}
.stage-mascot video {
  position: relative; display: block;
  height: min(66vh, 620px); width: auto; max-width: none;
  /* alleen de randen zacht in de pool laten lopen; antennes blijven vrij van de fade */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 48px, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
              linear-gradient(180deg, transparent 0, #000 48px, #000 100%);
  mask-composite: intersect;
}
.mascot-still { display: none; position: relative; height: min(56vh, 520px); width: auto; max-width: none; }
@media (prefers-reduced-motion: reduce) { /* geen autoplay: statische cutout in dezelfde pool */
  .stage-mascot video { display: none; }
  .mascot-still { display: block; }
}
@media (max-width: 899px) { /* gestapeld: regel gecentreerd boven, mascotte op de balk */
  .stage-inner { grid-template-columns: 1fr; justify-items: center; padding: 56px 20px 0; }
  .dk-type { text-align: center; align-self: start; padding-bottom: 36px; }
  .stage-mascot video { height: min(52vh, 480px, 112vw); } /* vw-cap: geen harde clip voorbij de feather op smalle hoge schermen (Z Fold cover e.d.) */
  .mascot-still { height: min(44vh, 400px); }
}

.footer-bar {
  background: var(--rings-black); /* rings-black balk (operator 2026-07-09) */
  border-top: 1px solid rgba(148, 106, 71, .35); /* bronze hairline scheidt podium en balk */
  color: var(--chalk-white);
  text-align: center;
  padding: 14px 20px;
}
.foot-line { font-size: 12.5px; font-weight: 300; margin: 0; opacity: .9; }
.foot-line a { color: inherit; text-decoration: none; }
.foot-line a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */

.badge-photo { position: absolute; top: 24px; right: 24px; z-index: 2; }
@media (min-width: 900px) {
  .badge-photo { display: none; } /* desktop: badge zit in de header-rij */
}

@media (max-width: 899px) {
  .badge-head { display: none; } /* mobiel: badge op de foto (gestapelde hero) */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-left { min-height: 62vh; }
  .hero-right { width: 100%; aspect-ratio: 640 / 1134; max-height: 86vh; margin: 0 auto; }
  .badge { top: 16px; right: 16px; }
}