/* ============================================================
   style.css — Zaalverhuur
   Mobile-first · Pixel-precise · RTL-safe
   ============================================================ */

/* ─── 1. Custom Properties ───────────────────────────────── */
:root {
  --dark:        #1E130A;
  --dark-2:      #2C1C0F;
  --dark-3:      #3A2518;
  --bg:          #FAF8F4;
  --bg-warm:     #F3EDE3;
  --bg-sand:     #EDE4D6;
  --white:       #FFFFFF;
  --accent:      #B96B38;
  --accent-h:    #9E5A2C;
  --accent-l:    #EDD8C5;
  --accent-xl:   #F7EDE1;
  --accent-glow: rgba(185,107,56,.22);
  --text:        #3A3028;
  --text-mid:    #6E6255;
  --text-muted:  #9C9083;
  --border:      #E2D8CE;
  --border-l:    #EDE7E0;
  --success:     #2E7D52;
  --error:       #C0392B;

  --font-h:  'Playfair Display', Georgia, serif;
  --font-b:  'DM Sans', system-ui, sans-serif;
  --font-ar: 'Tajawal', system-ui, sans-serif;

  --nav-h:   68px;
  --max-w:   1240px;
  --pad:     clamp(1.25rem, 5vw, 4rem);

  /* Radii */
  --r-xs: 3px;
  --r-sm: 8px;
  --r:    14px;

  /* Shadows */
  --sh-sm: 0 1px 8px rgba(30,19,10,.08);
  --sh:    0 4px 24px rgba(30,19,10,.10);
  --sh-lg: 0 8px 48px rgba(30,19,10,.14);
  --sh-xl: 0 16px 72px rgba(30,19,10,.18);

  /* Easing */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Safe areas */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

/* ─── 2. Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  line-height: 1.68;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-rtl { font-family: var(--font-ar); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: none; }
address { font-style: normal; }
p { max-width: 64ch; }
::selection { background: var(--accent); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* Prevent scroll when lang picker is shown */
body:has(.lang-picker) { overflow: hidden; }

/* ─── 3. Typography ──────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-h);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--dark);
}
body.is-rtl h1,
body.is-rtl h2,
body.is-rtl h3,
body.is-rtl h4 { font-family: var(--font-ar); letter-spacing: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
em { font-style: italic; color: var(--accent); }
body.is-rtl em { font-style: normal; }

/* ─── 4. Layout Utilities ────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { padding-block: clamp(72px, 10vw, 130px); }

.section__label {
  display: inline-block;
  font-family: var(--font-b);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
body.is-rtl .section__label { letter-spacing: 0; }

.section__header { margin-bottom: clamp(40px, 6vw, 80px); }
.section__header--center { text-align: center; }
.section__header--center p { margin-inline: auto; }

.section__title { margin-bottom: .75rem; }
.section__lead  { font-size: 1.05rem; color: var(--text-mid); line-height: 1.75; }

/* ─── 5. Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1.6rem;
  border-radius: var(--r-xs);
  font-family: var(--font-b);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color .2s var(--ease),
    border-color     .2s var(--ease),
    box-shadow       .25s var(--ease),
    transform        .25s var(--ease);
}
body.is-rtl .btn { font-family: var(--font-ar); letter-spacing: 0; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 16px var(--accent-glow);
}
.btn--accent:hover { background: var(--accent-h); box-shadow: 0 5px 24px var(--accent-glow); }

.btn--outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn--outline:hover { background: var(--accent-xl); }

.btn--ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.36); }

.btn--lg   { padding: .9rem 2rem; font-size: .95rem; }
.btn--full { width: 100%; justify-content: center; }

/* ─── 6. Language Picker ─────────────────────────────────── */
.lang-picker {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(160deg, #FAF5EC 0%, #EDE3D0 60%, #E4D5BF 100%);
  /* Full-height with safe areas */
  padding-top:    calc(var(--sat) + 2rem);
  padding-bottom: calc(var(--sab) + 2rem);
  padding-inline: calc(max(var(--sal), var(--sar)) + 1.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lang-picker__inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

.lang-picker__logo {
  font-family: var(--font-h);
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 600;
  color: var(--dark);
  letter-spacing: .06em;
  line-height: 1;
}
.lang-picker__logo::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  margin: .65rem auto 0;
  border-radius: 99px;
}

.lang-picker__titles {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.lang-picker__titles p {
  font-size: .95rem;
  color: var(--text-mid);
  max-width: none;
}

/* 3 cards always in a row */
.lang-picker__grid {
  display: flex;
  gap: .75rem;
  width: 100%;
}

.lang-picker__opt {
  flex: 1;
  min-width: 0;           /* prevent flex overflow */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.4rem .5rem;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--dark);
  cursor: pointer;
  transition:
    border-color .22s var(--ease),
    transform    .22s var(--ease-spring),
    box-shadow   .22s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.lang-picker__opt:hover,
.lang-picker__opt:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  outline: none;
}
.lang-picker__opt:active { transform: translateY(-1px) scale(.98); }

.lang-picker__flag   { font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1; }
.lang-picker__name   { font-size: clamp(.75rem, 2.5vw, .95rem); font-weight: 600; color: var(--dark); word-break: break-word; }
.lang-picker__native {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-warm);
  padding: .15rem .45rem;
  border-radius: 99px;
}
body.is-rtl .lang-picker__native { letter-spacing: 0; }
.lang-picker__opt:hover .lang-picker__native { background: var(--accent-l); color: var(--accent); }

/* ─── 7. Navigation ──────────────────────────────────────── */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 500;
  height: var(--nav-h);
  /* Include safe area at top */
  padding-top: var(--sat);
  transition:
    background .3s var(--ease),
    box-shadow  .3s var(--ease),
    transform   .3s var(--ease);
}
.nav--scrolled {
  background: rgba(250,248,244,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}
.nav--hidden { transform: translateY(-100%); }

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Logo */
.nav__logo {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  margin-inline-end: auto;   /* push everything else to the end */
  flex-shrink: 0;
}
.nav__logo-mark {
  font-family: var(--font-h);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #fff;
  line-height: 1;
  transition: color .3s;
}
.nav--scrolled .nav__logo-mark { color: var(--dark); }

/* Nav links (hidden on mobile, shown ≥ 900px) */
.nav__menu {
  display: none;
  align-items: center;
  gap: .1rem;
  list-style: none;
}
.nav__link {
  display: block;
  padding: .42rem .8rem;
  font-size: .86rem;
  font-weight: 400;
  color: rgba(255,255,255,.72);
  border-radius: var(--r-sm);
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-active { color: #fff; background: rgba(255,255,255,.1); }
.nav--scrolled .nav__link { color: var(--text-mid); }
.nav--scrolled .nav__link:hover,
.nav--scrolled .nav__link.is-active { color: var(--dark); background: var(--border-l); }

/* Language switcher — always visible */
.nav__lang { position: relative; }

.nav__lang-btn {
  display: flex;
  align-items: center;
  gap: .28rem;
  padding: .38rem .65rem;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.nav--scrolled .nav__lang-btn { border-color: var(--border); color: var(--text-mid); }
.nav__lang-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.nav--scrolled .nav__lang-btn:hover { background: var(--bg-warm); }

.nav__lang-flag { font-size: 1rem; line-height: 1; }
.nav__lang-code { font-size: .72rem; font-weight: 700; }
.nav__lang-btn svg { opacity: .7; flex-shrink: 0; transition: transform .2s; }
.nav__lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__lang-drop {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 148px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  transition: opacity .18s, transform .18s;
}
[dir="rtl"] .nav__lang-drop { transform-origin: top left; }
.nav__lang-drop.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.nav__lang-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
}
.nav__lang-item:hover  { background: var(--bg-warm); }
.nav__lang-item.is-active { color: var(--accent); background: var(--accent-xl); font-weight: 500; }
.nav__lang-item span:first-child { font-size: 1rem; line-height: 1; }

/* CTA button — hidden on mobile */
.nav__cta { display: none; margin-inline-start: .35rem; }

/* Burger — visible on mobile */
.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: .5rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-inline-start: .25rem;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #fff;
  border-radius: 99px;
  transition: transform .28s var(--ease), opacity .2s;
}
.nav--scrolled .nav__burger span { background: var(--dark); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu overlay */
.nav__menu-overlay {
  /* HIDDEN BY DEFAULT — display:none is the only guaranteed way */
  display: none;
  position: fixed;
  inset: 0;
  inset-block-start: var(--nav-h);
  background: rgba(250,248,244,.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 499;
  padding: 1.75rem var(--pad) calc(var(--sab) + 2.5rem);
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: .3rem;
}
.nav__menu-overlay.is-open {
  display: flex;
  animation: overlayIn .26s cubic-bezier(.2,0,0,1) both;
}
.nav__menu-overlay.is-closing {
  display: flex;
  animation: overlayOut .2s cubic-bezier(.4,0,1,1) both;
}
@keyframes overlayIn  { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes overlayOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-10px); } }
.nav__menu-overlay .nav__link {
  padding: .85rem 1rem;
  font-size: 1.05rem;
  color: var(--text);
  border-radius: var(--r-sm);
  display: block;
}
.nav__menu-overlay .nav__link:hover,
.nav__menu-overlay .nav__link.is-active { background: var(--border-l); color: var(--dark); }
.nav__menu-overlay .nav__cta-mob {
  display: flex;
  margin-top: 1.25rem;
  align-self: stretch;
  justify-content: center;
}

/* ─── 8. Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #4A2810 0%, #2E1608 50%, #1A0B05 100%);
}

/* Background glow layers */
.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.hero__glow--1 {
  width: min(700px, 90vw);
  height: min(700px, 90vw);
  top: -30%;
  inset-inline-start: -15%;
  background: radial-gradient(circle, rgba(201,150,58,.28) 0%, transparent 70%);
  animation: gDrift1 11s ease-in-out infinite alternate;
}
.hero__glow--2 {
  width: min(600px, 80vw);
  height: min(600px, 80vw);
  bottom: -20%;
  inset-inline-end: -10%;
  background: radial-gradient(circle, rgba(185,107,56,.16) 0%, transparent 70%);
  animation: gDrift2 14s ease-in-out infinite alternate;
}
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .55;
  animation: grainShift 2s steps(1) infinite;
}

.hero__body {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: calc(var(--nav-h) + var(--sat) + 3rem);
  padding-bottom: 2.5rem;
  padding-inline: var(--pad);
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 1.2rem;
}
body.is-rtl .hero__eyebrow { letter-spacing: 0; }
.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: dotPulse 2.4s ease-in-out infinite;
}

.hero__title {
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.02;
  margin-bottom: 1.25rem;
}
body.is-rtl .hero__title { letter-spacing: 0; }
.hero__title em { color: var(--accent); font-style: italic; }
body.is-rtl .hero__title em { font-style: normal; }

.hero__lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,.54);
  line-height: 1.74;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Hall preview cards */
.hero__halls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.hero__hall {
  display: flex;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.hero__hall:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.hero__hall-visual {
  position: relative;
  width: 80px;
  flex-shrink: 0;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__hall-nr {
  font-family: var(--font-h);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255,255,255,.1);
  line-height: 1;
  user-select: none;
}
.hero__hall-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .9rem 1rem;
  background: rgba(255,255,255,.04);
  gap: .22rem;
}
.hero__hall-name {
  font-family: var(--font-h);
  font-size: .9rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-rtl .hero__hall-name { font-family: var(--font-ar); }
.hero__hall-cap { font-size: .75rem; color: rgba(255,255,255,.48); }
.hero__hall-cap strong { color: rgba(255,255,255,.78); }
.hero__hall-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: .2rem;
  transition: gap .2s;
}
.hero__hall:hover .hero__hall-link { gap: .55rem; }

/* Stats bar */
.hero__stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.25rem;
  padding-inline: var(--pad);
}
.hero__stats-inner {
  display: flex;
  align-items: center;
  max-width: var(--max-w);
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}
.hero__stats-inner::-webkit-scrollbar { display: none; }
.hero__stat {
  flex: 1 0 100px;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding-inline: 1.2rem;
}
.hero__stat:first-child { padding-inline-start: 0; }
.hero__stat strong { font-family: var(--font-h); font-size: 1.7rem; font-weight: 500; color: #fff; line-height: 1; }
.hero__stat span   { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.36); white-space: nowrap; }
body.is-rtl .hero__stat span { letter-spacing: 0; }
.hero__stat-sep    { width: 1px; height: 30px; background: rgba(255,255,255,.12); flex-shrink: 0; }

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: 1.75rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 44px;
  overflow: hidden;
}
[dir="rtl"] .hero__scroll { transform: translateX(50%); }
.hero__scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.55));
  animation: scrollLine 2s ease-in-out infinite;
}

/* ─── 9. Zalen ────────────────────────────────────────────── */
.zalen-section { background: var(--bg); }
.zalen-section > .container { padding-bottom: 0; }
.zalen-section .section__header { padding-top: clamp(64px, 9vw, 120px); }

/* Single column on mobile (visual always on top) */
.zaal-row { display: grid; grid-template-columns: 1fr; }
.zaal-row__visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  order: 1;
}
.zaal-row__content {
  order: 2;
  padding: clamp(2rem, 5vw, 4.5rem) var(--pad);
}

.zaal-row__nr {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-end: -.5rem;
  font-family: var(--font-h);
  font-size: clamp(7rem, 20vw, 14rem);
  font-weight: 700;
  color: rgba(255,255,255,.06);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.zaal-row__meta {
  position: absolute;
  inset-block-end: 1.75rem;
  inset-inline-start: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.zaal-row__floor {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
body.is-rtl .zaal-row__floor { letter-spacing: 0; }
.zaal-row__cap { display: flex; align-items: baseline; gap: .35rem; }
.zaal-row__cap strong {
  font-family: var(--font-h);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.zaal-row__cap span { font-size: .82rem; color: rgba(255,255,255,.5); }
.zaal-row__area  { font-size: .73rem; color: rgba(255,255,255,.33); }

.zaal-row__title { margin-bottom: .85rem; }
.zaal-row__desc  { font-size: 1rem; color: var(--text-mid); line-height: 1.72; margin-bottom: 1.5rem; }
.zaal-row__features { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.75rem; }
.zaal-row__features li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--text-mid); }
.zaal-row__features li svg { color: var(--accent); flex-shrink: 0; }
.zaal-row__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-l);
}
.zaal-row__price { display: flex; align-items: baseline; gap: .35rem; }
.zaal-row__price span   { font-size: .76rem; color: var(--text-muted); }
.zaal-row__price strong { font-family: var(--font-h); font-size: 1.65rem; font-weight: 500; color: var(--dark); }

/* ─── 10. Arrangementen ───────────────────────────────────── */
.arr-section { background: var(--bg-warm); }

/* 2 columns on mobile */
.arr__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.arr-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.5rem;
  background: var(--white);
  cursor: default;
  transition: background .22s, transform .22s var(--ease);
}
.arr-card:hover { background: var(--bg); transform: translateY(-2px); z-index: 1; position: relative; }

.arr-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-l);
  color: var(--accent);
  margin-bottom: .25rem;
  flex-shrink: 0;
  transition: background .2s, transform .2s var(--ease-spring), color .2s;
}
.arr-card:hover .arr-card__icon { background: var(--accent); color: #fff; transform: scale(1.1); }
.arr-card__naam  { font-family: var(--font-h); font-size: 1.05rem; font-weight: 500; color: var(--dark); line-height: 1.2; }
.arr-card__tekst { font-size: .84rem; color: var(--text-mid); line-height: 1.62; flex: 1; }
.arr-card__link  {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: .2rem;
  transition: gap .18s;
}
.arr-card:hover .arr-card__link { gap: .55rem; }

/* ─── 11. Catering ────────────────────────────────────────── */
.catering-section { background: var(--bg); }

/* 1 column on mobile */
.catering__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* Keep all cards flush — no transforms causing overflow */
  align-items: stretch;
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  transition: box-shadow .25s var(--ease), border-color .25s;
}
.cat-card:hover { box-shadow: var(--sh-lg); border-color: var(--accent-l); }

/* Highlighted: only use border + bg, NO transform (avoids grid blowout) */
.cat-card--hl { background: var(--dark); border-color: var(--dark); box-shadow: var(--sh-xl); }
.cat-card--hl:hover { border-color: var(--accent); }

.cat-card__badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .85rem;
  border-radius: 99px;
  white-space: nowrap;
}
body.is-rtl .cat-card__badge { letter-spacing: 0; }
[dir="rtl"] .cat-card__badge { transform: translateX(50%); }

.cat-card__sub  { font-size: .69rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
body.is-rtl .cat-card__sub { letter-spacing: 0; }
.cat-card--hl .cat-card__sub { color: rgba(255,255,255,.4); }
.cat-card__naam { font-family: var(--font-h); font-size: 1.55rem; font-weight: 500; color: var(--dark); margin: .15rem 0 0; }
.cat-card--hl .cat-card__naam { color: #fff; }

.cat-card__items { display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.cat-card__items li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: var(--text-mid); }
.cat-card--hl .cat-card__items li { color: rgba(255,255,255,.55); }
.cat-card__items li svg { color: var(--accent); flex-shrink: 0; }

.cat-card .btn--outline { border-color: var(--border); color: var(--text-mid); }
.cat-card .btn--outline:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }

/* ─── 12. Offerte Section ─────────────────────────────────── */
.offerte-section { background: var(--bg-warm); }

/* Single column on mobile */
.offerte__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.offerte__aside { /* No sticky on mobile */ }
.offerte__lead  { font-size: 1rem; color: var(--text-mid); line-height: 1.7; margin: .75rem 0 1.6rem; }
.offerte__lead strong { color: var(--dark); }

.offerte__contacts { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.offerte__contact {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem .95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.offerte__contact:hover { border-color: var(--accent-l); box-shadow: var(--sh-sm); transform: translateX(3px); }
[dir="rtl"] .offerte__contact:hover { transform: translateX(-3px); }
.offerte__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent-l);
  border-radius: var(--r-sm);
  color: var(--accent);
  flex-shrink: 0;
}
.offerte__contact div { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.offerte__contact span  { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
body.is-rtl .offerte__contact span { letter-spacing: 0; }
.offerte__contact strong { font-size: .87rem; font-weight: 500; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.offerte__promises { display: flex; flex-direction: column; gap: .6rem; }
.offerte__promise  { display: flex; align-items: center; gap: .55rem; font-size: .87rem; color: var(--text-mid); }
.offerte__promise svg { color: var(--accent); flex-shrink: 0; }

/* Form card */
.offerte__form-col {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
}

/* Accent top stripe on the form card */
.offerte__form-col::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #D4924A 60%, var(--accent-l) 100%);
}

.offerte-form { display: flex; flex-direction: column; }

.form-block {
  padding: 1.6rem 1.75rem;
  border-bottom: 1px solid var(--border-l);
}
.form-block:first-of-type {
  padding-top: 1.85rem;
}
.form-block:last-of-type { border-bottom: none; }

.form-block__legend {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-l);
}
body.is-rtl .form-block__legend { letter-spacing: 0; }
.form-block__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.form-block__opt { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: .76rem; }

/* Form row: 1-col on mobile, 2-col on tablet+ */
.form-row { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-bottom: .85rem; }
.form-row:last-child { margin-bottom: 0; }

.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .85rem; }
.form-group:last-child { margin-bottom: 0; }
.form-group.is-error .form-input,
.form-group.is-error .form-select,
.form-group.is-error .form-textarea { border-color: var(--error); background: #fdf5f5; }

.form-lbl { font-size: .8rem; font-weight: 500; color: var(--text); }
.req { color: var(--accent); }

/* Inputs */
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: .7rem .95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-b);
  font-size: .9rem;
  color: var(--dark);
  background: var(--bg);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
body.is-rtl .form-input,
body.is-rtl .form-select,
body.is-rtl .form-textarea { font-family: var(--font-ar); text-align: right; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(185,107,56,.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239C9083' stroke-width='1.5'%3E%3Cpolyline points='2,4 7,10 12,4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-inline-end: 2.4rem;
  cursor: pointer;
}
[dir="rtl"] .form-select {
  background-position: left .85rem center;
  padding-inline-end: .95rem;
  padding-inline-start: 2.4rem;
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-err { font-size: .77rem; color: var(--error); }

/* Custom radio — zaal */
.form-radios { display: flex; flex-direction: column; gap: .5rem; }
.form-radio {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.form-radio:hover { border-color: var(--accent-l); background: var(--bg); }
.form-radio:has(input:checked) { border-color: var(--accent-l); background: var(--accent-xl); }
.form-radio input[type="radio"] { display: none; }
.form-radio__box {
  width: 17px;
  height: 17px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color .18s;
}
.form-radio__box::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
  transform: scale(0);
  transition: transform .18s var(--ease-spring);
}
.form-radio input:checked ~ .form-radio__box { border-color: var(--accent); }
.form-radio input:checked ~ .form-radio__box::after { transform: scale(1); }
.form-radio input:checked ~ .form-radio__lbl strong { color: var(--accent); }
.form-radio__lbl { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.form-radio__lbl strong { font-size: .86rem; font-weight: 600; color: var(--dark); transition: color .18s; }
.form-radio__lbl small  { font-size: .74rem; color: var(--text-muted); }

/* Catering radio options — 2-col */
.form-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.form-cat-opt input[type="radio"] { display: none; }
.form-cat-opt__ui {
  display: flex;
  flex-direction: column;
  gap: .16rem;
  padding: .8rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .18s, background .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.form-cat-opt:hover .form-cat-opt__ui { border-color: var(--accent-l); }
.form-cat-opt input:checked ~ .form-cat-opt__ui { border-color: var(--accent); background: var(--accent-xl); box-shadow: 0 0 0 2px rgba(185,107,56,.1); }
.form-cat-opt__ui strong { font-size: .84rem; font-weight: 600; color: var(--dark); }
.form-cat-opt__ui small  { font-size: .73rem; color: var(--text-muted); }
.form-cat-opt__tag {
  position: absolute;
  top: .28rem;
  inset-inline-end: .45rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-l);
  padding: .12rem .38rem;
  border-radius: 99px;
}
body.is-rtl .form-cat-opt__tag { letter-spacing: 0; }
.form-cat-opt--pop .form-cat-opt__ui { border-color: var(--accent-l); background: var(--accent-xl); }

/* Alert bar */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .9rem 1.1rem;
  margin: .9rem 1.75rem 0;
  border-radius: var(--r-sm);
}
.form-alert--error { background: #fdf0ef; border: 1px solid #f5c5c0; color: var(--error); }
.form-alert div { display: flex; flex-direction: column; gap: .1rem; }
.form-alert strong { font-size: .84rem; }
.form-alert span   { font-size: .77rem; opacity: .8; }

.form-footer {
  padding: 1.5rem 1.75rem 2rem;
  background: var(--bg-warm);
  border-top: 1px solid var(--border-l);
}
.form-privacy { font-size: .77rem; color: var(--text-muted); line-height: 1.6; margin-bottom: .9rem; }
.form-privacy a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Success state */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.75rem;
  gap: .85rem;
}
.form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  background: linear-gradient(135deg, #e6f5ee, #d1ecdf);
  border-radius: 50%;
  color: var(--success);
  margin-bottom: .35rem;
}
.form-success h3 { font-size: 1.45rem; }
.form-success p  { font-size: .94rem; color: var(--text-mid); max-width: 38ch; }
.form-success__ref {
  font-size: .8rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: .45rem .95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* ─── 13. Footer ──────────────────────────────────────────── */
.footer { background: var(--dark); padding-block-start: clamp(48px, 8vw, 88px); }

/* Single column on mobile */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer__logo  { font-family: var(--font-h); font-size: 1.25rem; font-weight: 600; color: #fff; letter-spacing: .04em; margin-bottom: .5rem; }
.footer__about { font-size: .86rem; color: rgba(255,255,255,.35); line-height: 1.65; margin-bottom: 1.2rem; max-width: 36ch; }
.footer__wa {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 500;
  color: #4ade80;
  padding: .48rem .9rem;
  border: 1px solid rgba(74,222,128,.2);
  border-radius: var(--r-sm);
  transition: background .2s, border-color .2s;
}
.footer__wa:hover { background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.42); }

.footer__col h4 {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: .9rem;
}
body.is-rtl .footer__col h4 { letter-spacing: 0; }
.footer__col ul { display: flex; flex-direction: column; gap: .45rem; }
.footer__col li a { font-size: .86rem; color: rgba(255,255,255,.32); transition: color .18s; }
.footer__col li a:hover { color: rgba(255,255,255,.72); }

.footer__address { display: flex; flex-direction: column; gap: .55rem; }
.footer__address a,
.footer__address span { display: flex; align-items: center; gap: .48rem; font-size: .86rem; color: rgba(255,255,255,.32); transition: color .18s; }
.footer__address a:hover { color: rgba(255,255,255,.72); }
.footer__address svg { opacity: .4; flex-shrink: 0; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-block: 1.3rem;
  padding-inline: var(--pad);
  font-size: .78rem;
  color: rgba(255,255,255,.25);
}
.footer__bottom-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer__bottom-links a { color: rgba(255,255,255,.25); transition: color .18s; }
.footer__bottom-links a:hover { color: rgba(255,255,255,.6); }

/* ─── 14. WhatsApp Float ──────────────────────────────────── */
.wa-float {
  position: fixed;
  inset-block-end: calc(1.5rem + var(--sab));
  inset-inline-end: 1.5rem;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 3px 18px rgba(37,211,102,.4);
  transition: transform .3s var(--ease-spring), box-shadow .25s;
  animation: waPulse 4s ease-in-out 3s infinite;
  -webkit-tap-highlight-color: transparent;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.5); animation: none; }

/* ─── 15. Animations ──────────────────────────────────────── */
@keyframes gDrift1  { to { transform: translate(50px, 35px); } }
@keyframes gDrift2  { to { transform: translate(-40px, -28px); } }
@keyframes grainShift {
  0%  { background-position:   0    0;   }
  25% { background-position: -40px -40px; }
  50% { background-position:  60px  30px; }
  75% { background-position: -20px  50px; }
}
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.6)} }
@keyframes scrollLine {
  0%   { transform:scaleY(0); transform-origin:top;    }
  45%  { transform:scaleY(1); transform-origin:top;    }
  55%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}
@keyframes waPulse {
  0%,88%,100% { transform:scale(1);    }
  92%         { transform:scale(1.08) translateY(-3px); }
  96%         { transform:scale(1);    }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-0 { transition-delay: 0s; }
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

/* ─── 16. Responsive ──────────────────────────────────────── */

/* 560px: form rows go 2-col */
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .hero__halls { gap: 1rem; }
  .hero__hall-visual { width: 110px; }
  .hero__hall-nr { font-size: 5rem; }
}

/* 700px: tablet adjustments */
@media (min-width: 700px) {
  .arr__grid { grid-template-columns: repeat(3, 1fr); }
  .catering__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* 900px: full desktop layout */
@media (min-width: 900px) {

  /* Nav: show full links, hide burger, fully hide mobile overlay */
  .nav__menu          { display: flex; }
  .nav__cta           { display: inline-flex; }
  .nav__burger        { display: none; }
  .nav__menu-overlay  { display: none !important; }

  /* Hero: 2-column */
  .hero__body {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
    padding-bottom: 3rem;
  }
  .hero__copy { flex: 1; min-width: 0; }
  .hero__halls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 360px;
    flex-shrink: 0;
  }
  .hero__hall-visual { width: 120px; min-height: 120px; }
  .hero__hall-nr     { font-size: 5.5rem; }

  /* Events: 3-col (9 items = 3 × 3) */
  .arr__grid { grid-template-columns: repeat(3, 1fr); }

  /* Zalen: side by side with alternating layout */
  .zaal-row {
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    border-top: 1px solid var(--border-l);
  }
  .zaal-row__visual { min-height: 100%; order: unset; }
  .zaal-row__content { order: unset; }

  /* Flip: second zaal reverses column order */
  .zaal-row--flip .zaal-row__visual  { order: 2; }
  .zaal-row--flip .zaal-row__content { order: 1; }

  /* In RTL, don't double-flip */
  [dir="rtl"] .zaal-row--flip .zaal-row__visual  { order: unset; }
  [dir="rtl"] .zaal-row--flip .zaal-row__content { order: unset; }

  /* Offerte: 2-col */
  .offerte__wrap { grid-template-columns: 340px 1fr; gap: 4rem; }
  .offerte__aside { position: sticky; top: calc(var(--nav-h) + 24px); }

  /* Footer: 4 columns */
  .footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* 1100px: large desktop */
@media (min-width: 1100px) {
  .hero__halls { width: 400px; }
  .offerte__wrap { grid-template-columns: 380px 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .15ms !important;
  }
}