/* ============================================================
   GATEWAY — filmische segment-keuze
   ============================================================ */
.gw {
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
/* cinematic vignette over the panels (under the chrome) */
.gw::after {
  content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
}
/* Entrance-cascade verwijderd: die hing aan het oude reveal-JS en werd elders
   al met !important zichtbaar geforceerd. Panelen zijn nu direct zichtbaar. */
.gw-reveal { opacity: 1; transform: none; }

/* top wordmark band */
.gw-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--gutter);
  pointer-events: none;
}
.gw-head > * { pointer-events: auto; }
.gw-wordmark { text-align: left; }
.gw-wordmark .mark {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  line-height: 1; white-space: nowrap;
}
.gw-wordmark .tag {
  font-family: var(--accent);
  font-size: clamp(.56rem, 1vw, .68rem); letter-spacing: .34em;
  text-transform: uppercase; color: var(--olive); margin-top: .55rem;
}

/* centred intro title */
.gw-intro {
  position: absolute; z-index: 18; left: 0; right: 0;
  top: clamp(7rem, 16vh, 11rem);
  text-align: center; pointer-events: none;
  padding-inline: var(--gutter);
}
.gw-intro h1 {
  color: var(--white); font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.02; letter-spacing: .02em;
}
.gw-intro h1 em { font-style: italic; color: var(--olive); font-weight: 400; }
.gw-intro p {
  font-family: var(--accent); text-transform: uppercase; letter-spacing: .3em;
  font-size: clamp(.62rem, 1.1vw, .78rem); color: rgba(234,234,234,.7);
  margin-top: 1.4rem;
}

/* the three doors */
.gw-panels {
  position: absolute; inset: 0;
  display: flex;
}
.gw-panel {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-right: 1px solid rgba(234,234,234,.1);
  text-align: center;
  transition: flex-grow .65s var(--ease);
  isolation: isolate;
}
/* expanding-panel cinematic hover */
@media (hover: hover) and (min-width: 821px) {
  .gw-panels:hover .gw-panel { flex-grow: .82; }
  .gw-panels:hover .gw-panel:hover { flex-grow: 1.9; }
}
.gw-panel:last-child { border-right: none; }
.gw-panel .ph { position: absolute; inset: 0; min-height: 0; z-index: -2; filter: grayscale(.35) brightness(.45); transition: filter .8s var(--ease), transform 1.4s var(--ease); }
.gw-panel .ph .ph-tag { opacity: 0; }
.gw-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,20,32,.25) 0%, rgba(11,20,32,.2) 45%, rgba(11,20,32,.9) 100%);
  transition: background .7s var(--ease);
}
.gw-panel:hover .ph,
.gw-panel:focus-visible .ph { filter: grayscale(0) brightness(.92); transform: scale(1.08); }
.gw-panel:hover::after { background: linear-gradient(180deg, rgba(11,20,32,.1) 0%, rgba(29,53,87,.22) 45%, rgba(11,20,32,.85) 100%); }

.gw-panel-inner {
  position: relative; z-index: 2;
  padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(3.5rem, 9vh, 7rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.gw-panel .num {
  font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--olive);
  letter-spacing: .05em;
}
.gw-panel h2 {
  color: var(--white); font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: .03em;
}
.gw-panel .desc {
  font-family: var(--body); font-size: .92rem; color: rgba(234,234,234,.72);
  max-width: 30ch; line-height: 1.6;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .6s var(--ease);
}
.gw-panel:hover .desc, .gw-panel:focus-within .desc { max-height: 8rem; opacity: 1; }
.gw-enter {
  font-family: var(--accent); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--white); display: inline-flex; gap: .7rem; align-items: center;
  border: 1px solid rgba(234,234,234,.4); padding: .8rem 1.5rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.gw-panel:hover .gw-enter, .gw-panel:focus-within .gw-enter { background: var(--olive); border-color: var(--olive); color: var(--ink); }
.gw-panel a.cover { position: absolute; inset: 0; z-index: 3; }

/* footer line on gateway */
.gw-foot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem;
  padding: 1.2rem var(--gutter);
  font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .04em;
  color: rgba(234,234,234,.42);
  pointer-events: none;
}
.gw-foot > * { pointer-events: auto; }
.gw-foot .social { display: flex; gap: 1.2rem; }
.gw-foot a:hover { color: var(--olive); }

@media (max-width: 820px) {
  .gw { position: static; overflow: visible; }
  .gw-head { position: sticky; background: rgba(11,20,32,.92); backdrop-filter: blur(8px); }
  .gw-intro { position: static; padding-block: 2.5rem 1.5rem; }
  .gw-panels { position: static; flex-direction: column; min-height: 0; }
  .gw-panel { min-height: 62vh; flex: none; border-right: none; border-bottom: 1px solid rgba(234,234,234,.1); }
  .gw-panel .desc { max-height: 8rem; opacity: 1; }
  .gw-foot { position: static; }
  .gw::after { display: none; }
}