/* ==========================================================================
   AMAKHOSI — Privésauna & Wellness Hamont-Achel
   Gedeelde stylesheet voor alle pagina's (GoHighLevel-ready)
   --------------------------------------------------------------------------
   Volledig donkere huisstijl, zoals de huidige amakhosi.be:
   - Ebbenhout #1d0000 / Cacao #331802 als basis
   - Logo-goud #d6a833 + merkgoud #e0bb02, zon-verloop #ffec03 -> #fbb239
   - Roest #913e00, crème #fbeee0 voor tekst
   - Playfair Display (titels, zoals het logo) + Manrope (tekst/UI)
   - Motieven uit het logo: halve zon boven de horizon, kroon, giraffepatroon

   Alle klassen beginnen met "amk-" en alle inhoud staat in <div class="amk">,
   zodat niets botst met de eigen CSS van GoHighLevel.

   INHOUD
   01. Design tokens
   02. Reset (gescopet op .amk)
   03. Typografie
   04. Layout, secties & koppen
   05. Knoppen, links, chips & iconen
   06. Animatie-hulpmiddelen (reveal, split, tilt, spotlight)
   07. Header: voortgangsbalk, topbalk, zwevende navigatie
   08. Mobiel menu
   09. Hero (homepage)
   10. Paginahero (subpagina's) & breadcrumbs
   11. Giraffe-band (marquee)
   12. Welkom / verhaal
   13. Faciliteiten (bento)
   14. Arrangementen & prijzen
   15. Extra's
   16. Stappen
   17. Reviews
   18. FAQ
   19. Contact, kaart & slot-CTA
   20. Subpagina-componenten (features, kaarten, menukaart, galerij,
       lightbox, vergelijking, deals, reserveren)
   21. Footer
   22. Mobiele CTA-balk
   23. Keyframes
   24. Breakpoints
   25. Reduced motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Achtergronden (altijd donker) */
  --amk-bg: #1d0000;
  --amk-bg-deep: #140000;
  --amk-bg-raised: #250703;
  --amk-cocoa: #331802;
  --amk-bark: #2a0c04;
  --amk-ember: #3d1604;

  /* Merkkleuren */
  --amk-rust: #913e00;
  --amk-rust-bright: #b4560f;
  --amk-gold: #e0bb02;
  --amk-gold-logo: #d6a833;
  --amk-sun-1: #ffec03;
  --amk-sun-2: #fbb239;
  --amk-giraffe: #ef8f25;

  /* Tekst */
  --amk-text: #fbeee0;
  --amk-muted: rgba(251, 238, 224, 0.74);
  --amk-faint: rgba(251, 238, 224, 0.5);
  --amk-white: #ffffff;

  /* Oppervlakken & lijnen */
  --amk-surface: rgba(251, 238, 224, 0.035);
  --amk-surface-2: rgba(251, 238, 224, 0.06);
  --amk-line: rgba(214, 168, 51, 0.18);
  --amk-line-strong: rgba(214, 168, 51, 0.42);

  /* Verlopen */
  --amk-grad-sun: linear-gradient(100deg, var(--amk-sun-1) 0%, #fdd21c 38%, var(--amk-sun-2) 72%, var(--amk-giraffe) 100%);
  --amk-grad-btn: linear-gradient(120deg, #ffe45c 0%, #f9c93a 38%, var(--amk-sun-2) 72%, var(--amk-giraffe) 100%);
  --amk-grad-line: linear-gradient(90deg, transparent, rgba(214, 168, 51, 0.45), transparent);

  /* Typografie */
  --amk-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --amk-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Ruimte & vormen */
  --amk-container: 1200px;
  --amk-gutter: clamp(16px, 4vw, 32px);
  --amk-section-y: clamp(80px, 11vw, 140px);
  --amk-radius-sm: 12px;
  --amk-radius: 20px;
  --amk-radius-lg: 28px;

  /* Header */
  --amk-topbar-h: 38px;
  --amk-nav-h: 76px;

  /* Beweging */
  --amk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --amk-ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --amk-speed: 0.35s;

  /* Schaduwen */
  --amk-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --amk-shadow-glow: 0 14px 40px -12px rgba(251, 178, 57, 0.55);

  /* Merkmotieven als data-URI (geen extra bestanden nodig) */
  --amk-giraffe-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><path fill='%235a2408' stroke='%235a2408' stroke-width='12' stroke-linejoin='round' d='M111 -4 L103 48 L79 48 L62 25 L80 -7 L103 -11ZM111 216 L103 268 L79 268 L62 245 L80 213 L103 209ZM123 54 L130 3 L160 5 L177 36 L156 59 L130 60ZM123 274 L130 223 L160 225 L177 256 L156 279 L130 280ZM59 116 L55 108 L79 68 L108 68 L116 74 L103 122ZM37 117 L42 126 L31 162 L6 171 L-19 163 L-27 145 L-21 130 L20 112ZM257 117 L262 126 L251 162 L226 171 L201 163 L193 145 L199 130 L240 112ZM-47 70 L-27 48 L-10 48 L6 96 L-24 109ZM173 70 L193 48 L210 48 L226 96 L196 109ZM61 -15 L44 16 L23 16 L17 -32 L36 -38ZM61 205 L44 236 L23 236 L17 188 L36 182ZM99 190 L77 193 L50 167 L60 136 L105 143 L109 148ZM45 36 L62 58 L39 97 L27 93 L9 42 L17 36ZM265 36 L282 58 L259 97 L247 93 L229 42 L237 36ZM126 203 L118 195 L128 156 L176 156 L183 170 L161 205ZM122 131 L135 80 L155 79 L180 123 L175 136 L125 136ZM-6 28 L-25 28 L-42 -4 L-21 -37 L-3 -31 L3 22ZM-6 248 L-25 248 L-42 216 L-21 183 L-3 189 L3 242ZM214 28 L195 28 L178 -4 L199 -37 L217 -31 L223 22ZM214 248 L195 248 L178 216 L199 183 L217 189 L223 242Z'/></svg>");
  --amk-giraffe-subtle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g opacity='.06'><path fill='%23d6a833' stroke='%23d6a833' stroke-width='12' stroke-linejoin='round' d='M111 -4 L103 48 L79 48 L62 25 L80 -7 L103 -11ZM111 216 L103 268 L79 268 L62 245 L80 213 L103 209ZM123 54 L130 3 L160 5 L177 36 L156 59 L130 60ZM123 274 L130 223 L160 225 L177 256 L156 279 L130 280ZM59 116 L55 108 L79 68 L108 68 L116 74 L103 122ZM37 117 L42 126 L31 162 L6 171 L-19 163 L-27 145 L-21 130 L20 112ZM257 117 L262 126 L251 162 L226 171 L201 163 L193 145 L199 130 L240 112ZM-47 70 L-27 48 L-10 48 L6 96 L-24 109ZM173 70 L193 48 L210 48 L226 96 L196 109ZM61 -15 L44 16 L23 16 L17 -32 L36 -38ZM61 205 L44 236 L23 236 L17 188 L36 182ZM99 190 L77 193 L50 167 L60 136 L105 143 L109 148ZM45 36 L62 58 L39 97 L27 93 L9 42 L17 36ZM265 36 L282 58 L259 97 L247 93 L229 42 L237 36ZM126 203 L118 195 L128 156 L176 156 L183 170 L161 205ZM122 131 L135 80 L155 79 L180 123 L175 136 L125 136ZM-6 28 L-25 28 L-42 -4 L-21 -37 L-3 -31 L3 22ZM-6 248 L-25 248 L-42 216 L-21 183 L-3 189 L3 242ZM214 28 L195 28 L178 -4 L199 -37 L217 -31 L223 22ZM214 248 L195 248 L178 216 L199 183 L217 189 L223 242Z'/></g></svg>");
  --amk-sun-mark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'><defs><linearGradient id='s' x1='0' x2='1'><stop offset='0' stop-color='%23ffec03'/><stop offset='1' stop-color='%23fbb239'/></linearGradient></defs><path d='M3 11a10 10 0 0 1 20 0z' fill='url(%23s)'/><rect x='3' y='13' width='20' height='2.2' rx='1' fill='%23fbb239'/></svg>");
  --amk-sun-mark-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'><defs><linearGradient id='s' x1='0' x2='1'><stop offset='0' stop-color='%23d99a00'/><stop offset='1' stop-color='%23c0600c'/></linearGradient></defs><path d='M3 11a10 10 0 0 1 20 0z' fill='url(%23s)'/><rect x='3' y='13' width='20' height='2.2' rx='1' fill='%23c0600c'/></svg>");
}


/* ==========================================================================
   02. RESET (gescopet; :where() houdt de specificiteit op 0)
   ========================================================================== */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--amk-bg); }

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

.amk {
  margin: 0;
  font-family: var(--amk-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--amk-text);
  background: var(--amk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.amk :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, table) {
  margin: 0;
  padding: 0;
}

.amk :where(ul, ol) { list-style: none; }
.amk :where(img, svg, iframe, video) { display: block; max-width: 100%; }
.amk :where(img) { height: auto; }
.amk :where(a) { color: inherit; text-decoration: none; }
.amk :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.amk :where(table) { border-collapse: collapse; width: 100%; }

.amk :focus-visible {
  outline: 2px solid var(--amk-sun-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.amk ::selection {
  background: var(--amk-sun-2);
  color: var(--amk-bg);
}

.amk-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.amk-nowrap { white-space: nowrap; }

.amk-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--amk-sun-2);
  color: var(--amk-bg);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform var(--amk-speed) var(--amk-ease);
}

.amk-skip:focus { transform: none; }


/* ==========================================================================
   03. TYPOGRAFIE
   ========================================================================== */
.amk :where(h1, h2, h3, h4) {
  font-family: var(--amk-font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--amk-white);
}

.amk :where(h1, h2, h3) em {
  font-style: italic;
  font-weight: 400;
}

.amk :where(p + p) { margin-top: 1em; }
.amk :where(strong) { font-weight: 700; }

/* Goud zon-verloop op cursieve accenten */
.amk-title em,
.amk-hero__headline em,
.amk-pagehero__title em,
.amk-cta__title em {
  background: var(--amk-grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}


/* ==========================================================================
   04. LAYOUT, SECTIES & KOPPEN
   ========================================================================== */
.amk-container {
  width: 100%;
  max-width: calc(var(--amk-container) + var(--amk-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--amk-gutter);
}

.amk-section {
  position: relative;
  padding-block: var(--amk-section-y);
  background-color: var(--amk-bg);
  isolation: isolate;
}

/* Varianten — allemaal donker, voor ritme tussen secties */
.amk-section--deep { background-color: var(--amk-bg-deep); }

.amk-section--raised {
  background-color: var(--amk-bg);
  background-image:
    radial-gradient(900px 500px at 50% 0%, rgba(145, 62, 0, 0.32), transparent 70%),
    linear-gradient(180deg, var(--amk-bg-raised) 0%, var(--amk-bg) 100%);
}

/* Zachte warme gloed (geen patroon) */
.amk-section--textured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(800px 420px at 15% 0%, rgba(145, 62, 0, 0.22), transparent 70%),
    radial-gradient(700px 400px at 90% 100%, rgba(251, 178, 57, 0.07), transparent 70%);
  pointer-events: none;
}

/* Gouden haarlijn tussen secties */
.amk-section--line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1200px, 90%);
  height: 1px;
  transform: translateX(-50%);
  background: var(--amk-grad-line);
}

/* Sectie-kop */
.amk-head {
  max-width: 740px;
  margin-bottom: clamp(44px, 6vw, 68px);
}

.amk-head--center {
  margin-inline: auto;
  text-align: center;
}

.amk-head--split {
  max-width: none;
  display: grid;
  gap: 20px;
  align-items: end;
}

.amk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--amk-font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--amk-gold-logo);
}

.amk-eyebrow::before {
  content: "";
  width: 26px;
  height: 16px;
  flex: none;
  background: var(--amk-sun-mark) center / contain no-repeat;
}

/* De zon komt op wanneer de kop in beeld schuift */
.amk-eyebrow::before { transition: clip-path 0.9s var(--amk-ease) 0.3s; }

.amk-js [data-amk-reveal]:not(.is-visible) .amk-eyebrow::before,
.amk-js .amk-eyebrow[data-amk-reveal]:not(.is-visible)::before {
  clip-path: inset(100% 0 0 0);
}

.amk-title {
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
}

.amk-lead {
  margin-top: 22px;
  font-size: clamp(1.03rem, 1.4vw, 1.16rem);
  color: var(--amk-muted);
}

.amk-head--center .amk-lead { margin-inline: auto; max-width: 620px; }


/* ==========================================================================
   05. KNOPPEN, LINKS, CHIPS & ICONEN
   ========================================================================== */
.amk-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.amk-icon-wrap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--amk-line);
  color: var(--amk-sun-2);
}

.amk-btn {
  --amk-btn-pad-y: 16px;
  --amk-btn-pad-x: 26px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: var(--amk-btn-pad-y) var(--amk-btn-pad-x);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--amk-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  translate: var(--amk-bx, 0) var(--amk-by, 0);
  transition:
    transform var(--amk-speed) var(--amk-ease),
    translate 0.4s var(--amk-ease),
    box-shadow var(--amk-speed) var(--amk-ease),
    background-color var(--amk-speed) var(--amk-ease),
    background-position 0.6s var(--amk-ease),
    color var(--amk-speed) var(--amk-ease),
    border-color var(--amk-speed) var(--amk-ease);
}

.amk-btn .amk-icon { width: 1.15em; height: 1.15em; }
.amk-btn:hover { transform: translateY(-2px); }
.amk-btn:active { transform: translateY(0) scale(0.98); }

.amk-btn .amk-icon--arrow { transition: transform var(--amk-speed) var(--amk-ease); }
.amk-btn:hover .amk-icon--arrow { transform: translateX(4px); }

/* Goud — primaire actie (zon-verloop uit het logo) met lichtschittering */
.amk-btn--gold {
  background-image: var(--amk-grad-btn);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: var(--amk-bg);
  box-shadow: 0 10px 30px -14px rgba(251, 178, 57, 0.8);
}

.amk-btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--amk-ease);
}

.amk-btn--gold:hover {
  background-position: 100% 50%;
  box-shadow: var(--amk-shadow-glow);
}

.amk-btn--gold:hover::after { transform: translateX(130%); }

/* Knop die af en toe uit zichzelf glinstert (hero/CTA) */
.amk-btn--shine::after { animation: amk-shine 5s var(--amk-ease) 2.4s infinite; }

/* Omlijnd */
.amk-btn--ghost {
  border-color: rgba(251, 238, 224, 0.28);
  color: var(--amk-text);
  background-color: rgba(251, 238, 224, 0.02);
}

.amk-btn--ghost:hover {
  border-color: var(--amk-sun-2);
  background-color: rgba(251, 178, 57, 0.08);
  color: var(--amk-white);
}

/* Roest — knopkleur van de huidige site */
.amk-btn--rust {
  background-color: var(--amk-rust);
  color: var(--amk-white);
}

.amk-btn--rust:hover {
  background-color: var(--amk-rust-bright);
  box-shadow: 0 14px 34px -14px rgba(180, 86, 15, 0.8);
}

.amk-btn--sm {
  --amk-btn-pad-y: 12px;
  --amk-btn-pad-x: 20px;
  min-height: 44px;
  font-size: 0.88rem;
}

.amk-btn--lg {
  --amk-btn-pad-y: 20px;
  --amk-btn-pad-x: 34px;
  min-height: 60px;
  font-size: 1.02rem;
}

.amk-btn--block { width: 100%; }

.amk-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Link met pijl */
.amk-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--amk-sun-2);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: gap var(--amk-speed) var(--amk-ease), background-size 0.5s var(--amk-ease), color var(--amk-speed);
}

.amk-link:hover {
  gap: 16px;
  color: var(--amk-sun-1);
}

.amk-inline-link {
  font-weight: 700;
  color: var(--amk-sun-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--amk-speed);
}

.amk-inline-link:hover { color: var(--amk-sun-1); }

/* Chips */
.amk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.amk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--amk-line);
  background: var(--amk-surface);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--amk-text);
  transition: border-color var(--amk-speed), background-color var(--amk-speed), transform var(--amk-speed) var(--amk-ease);
}

.amk-chip:hover {
  border-color: var(--amk-line-strong);
  background: var(--amk-surface-2);
  transform: translateY(-2px);
}

.amk-chip .amk-icon { color: var(--amk-sun-2); }


/* ==========================================================================
   06. ANIMATIE-HULPMIDDELEN
   Werken enkel als scripts.js geladen is (klasse .amk-js op <html>), zodat
   inhoud nooit onzichtbaar blijft als het script ontbreekt.
   ========================================================================== */

/* Scroll-reveal: gebruikt `translate`/`scale` zodat het niet botst met
   hover-transforms (tilt, zoom) op hetzelfde element. */
.amk-js [data-amk-reveal] {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 1s var(--amk-ease),
    translate 1.1s var(--amk-ease),
    scale 1.1s var(--amk-ease),
    clip-path 1.3s var(--amk-ease-io);
  transition-delay: var(--amk-delay, 0s);
}

.amk-js [data-amk-reveal="fade"] { translate: none; }
.amk-js [data-amk-reveal="left"] { translate: -46px 0; }
.amk-js [data-amk-reveal="right"] { translate: 46px 0; }
.amk-js [data-amk-reveal="zoom"] { translate: none; scale: 0.94; }
.amk-js [data-amk-reveal="clip"] {
  opacity: 1;
  translate: none;
  clip-path: inset(100% 0 0 0);
}

.amk-js [data-amk-reveal].is-visible {
  opacity: 1;
  translate: none;
  scale: none;
  clip-path: inset(0 0 0 0);
}

/* Woord-voor-woord titels (scripts.js splitst de woorden) */
.amk-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.07em 0.14em;
  margin: 0 -0.07em -0.14em;
}

.amk-w__i {
  display: inline-block;
  transform: translateY(108%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.05s var(--amk-ease);
  transition-delay: calc(var(--amk-split-delay, 0s) + var(--i, 0) * 0.055s);
}

.amk-split.is-visible .amk-w__i { transform: none; }

/* Verloop per woord in cursieve accenten */
em .amk-w__i {
  background: var(--amk-grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.04em;
}

/* 3D-tilt (pointer) + spotlight die de cursor volgt */
[data-amk-tilt] {
  transform: perspective(1000px) rotateX(var(--amk-rx, 0deg)) rotateY(var(--amk-ry, 0deg));
  transition: transform 0.6s var(--amk-ease);
}

[data-amk-tilt].is-tilting { transition: transform 0.12s linear; }

.amk-spot {
  position: relative;
  isolation: isolate;
}

.amk-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(460px circle at var(--amk-mx, 50%) var(--amk-my, 0%), rgba(251, 178, 57, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--amk-ease);
  pointer-events: none;
}

.amk-spot:hover::before { opacity: 1; }

/* Gloeiende sintels (hero & CTA) */
.amk-embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.amk-ember {
  position: absolute;
  bottom: -14px;
  left: var(--x, 50%);
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3a8 0%, var(--amk-sun-2) 45%, rgba(239, 143, 37, 0) 72%);
  opacity: 0;
  animation: amk-ember var(--d, 12s) linear var(--delay, 0s) infinite;
}


/* ==========================================================================
   07. HEADER: VOORTGANGSBALK, TOPBALK, ZWEVENDE NAVIGATIE
   ========================================================================== */
.amk-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 130;
  width: 100%;
  height: 2px;
  background: var(--amk-grad-sun);
  transform-origin: 0 50%;
  transform: scaleX(var(--amk-progress, 0));
  pointer-events: none;
}

.amk-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--amk-text);
  transition: transform 0.55s var(--amk-ease);
}

.amk-header.is-hidden { transform: translateY(-120%); }

/* Topbalk met Koninklijke deals */
.amk-topbar {
  display: grid;
  grid-template-rows: 1fr;
  background: linear-gradient(90deg, #6e2c02 0%, var(--amk-rust) 30%, #a54a06 50%, var(--amk-rust) 70%, #6e2c02 100%);
  transition: grid-template-rows 0.5s var(--amk-ease);
}

.amk-topbar__inner { overflow: hidden; }

.amk-topbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--amk-topbar-h);
  padding: 8px var(--amk-gutter);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--amk-text);
  text-align: center;
}

.amk-topbar a strong { color: var(--amk-sun-1); font-weight: 800; }
.amk-topbar .amk-icon { color: var(--amk-sun-1); }
.amk-topbar__arrow { transition: transform var(--amk-speed) var(--amk-ease); }
.amk-topbar a:hover .amk-topbar__arrow { transform: translateX(4px); }

/* Navigatie: volle breedte bovenaan, zwevende capsule na scrollen */
.amk-navwrap {
  padding-inline: var(--amk-gutter);
  transition: padding 0.6s var(--amk-ease);
}

.amk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--amk-container);
  height: var(--amk-nav-h);
  margin-inline: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    max-width 0.7s var(--amk-ease),
    height 0.6s var(--amk-ease),
    padding 0.6s var(--amk-ease),
    border-radius 0.7s var(--amk-ease),
    background-color 0.6s var(--amk-ease),
    border-color 0.6s var(--amk-ease),
    box-shadow 0.6s var(--amk-ease);
}

.amk-header.is-scrolled .amk-topbar { grid-template-rows: 0fr; }
.amk-header.is-scrolled .amk-navwrap { padding-top: 10px; }

.amk-header.is-scrolled .amk-nav,
.amk-header.is-menu-open .amk-nav {
  max-width: 1140px;
  height: 64px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  border-color: var(--amk-line);
  background-color: rgba(20, 0, 0, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 236, 3, 0.06);
}

.amk-logo {
  display: block;
  flex: none;
  margin-block: -12px;
  margin-left: -8px;
}

.amk-logo img {
  width: auto;
  height: 64px;
  transition: height 0.6s var(--amk-ease), transform 0.6s var(--amk-ease);
}

.amk-logo:hover img { transform: scale(1.04); }

.amk-header.is-scrolled .amk-logo img,
.amk-header.is-menu-open .amk-logo img { height: 54px; }

/* Links met glijdende markering */
.amk-nav__links {
  position: relative;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
}

.amk-nav__glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--amk-gw, 0px);
  border-radius: 999px;
  background: rgba(251, 178, 57, 0.1);
  border: 1px solid rgba(251, 178, 57, 0.28);
  transform: translateX(var(--amk-gx, 0px));
  opacity: 0;
  transition:
    transform 0.5s var(--amk-ease),
    width 0.5s var(--amk-ease),
    opacity 0.3s var(--amk-ease);
  pointer-events: none;
}

.amk-nav__links.has-glider .amk-nav__glider { opacity: 1; }

.amk-nav__links a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--amk-text);
  transition: color var(--amk-speed);
}

.amk-nav__links a:hover { color: var(--amk-white); }

.amk-nav__links a[aria-current="page"] { color: var(--amk-sun-2); }

.amk-nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--amk-sun-2);
  box-shadow: 0 0 10px var(--amk-sun-2);
}

.amk-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.amk-nav__phone {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--amk-text);
  transition: color var(--amk-speed);
}

.amk-nav__phone:hover { color: var(--amk-sun-2); }
.amk-nav__phone .amk-icon { color: var(--amk-sun-2); }

/* Glijder is een <li> zonder inhoud */
.amk-nav__links .amk-nav__glider { list-style: none; }

.amk-nav__cta { display: none; }

.amk-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(251, 238, 224, 0.2);
  color: var(--amk-text);
  transition: background-color var(--amk-speed), border-color var(--amk-speed), color var(--amk-speed);
}

.amk-icon-btn:hover {
  border-color: var(--amk-sun-2);
  color: var(--amk-sun-2);
}

/* Menu-knop (mobiel): label + lijntjes */
.amk-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(251, 238, 224, 0.2);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: border-color var(--amk-speed), background-color var(--amk-speed);
}

.amk-menu-btn:hover { border-color: var(--amk-sun-2); }

.amk-menu-btn[aria-expanded="true"] {
  border-color: transparent;
  background-image: var(--amk-grad-btn);
  color: var(--amk-bg);
}

.amk-menu-btn__lines {
  position: relative;
  width: 18px;
  height: 12px;
}

.amk-menu-btn__lines span {
  position: absolute;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--amk-ease), top 0.45s var(--amk-ease), width 0.45s var(--amk-ease);
}

.amk-menu-btn__lines span:nth-child(1) { top: 0; width: 100%; }
.amk-menu-btn__lines span:nth-child(2) { top: 10px; width: 65%; }

.amk-menu-btn[aria-expanded="true"] .amk-menu-btn__lines span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.amk-menu-btn[aria-expanded="true"] .amk-menu-btn__lines span:nth-child(2) { top: 5px; width: 100%; transform: rotate(-45deg); }


/* ==========================================================================
   08. MOBIEL MENU (cirkel-onthulling vanaf de menuknop)
   ========================================================================== */
.amk-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  padding: calc(var(--amk-nav-h) + 40px) var(--amk-gutter) 28px;
  background-color: var(--amk-bg);
  background-image:
    radial-gradient(700px 420px at 100% 100%, rgba(251, 178, 57, 0.18), transparent 70%),
    radial-gradient(500px 300px at 0% 0%, rgba(145, 62, 0, 0.35), transparent 70%);
  color: var(--amk-text);
  overflow-y: auto;
  visibility: hidden;
  clip-path: circle(0px at var(--amk-menu-x, calc(100% - 50px)) var(--amk-menu-y, 50px));
  transition: clip-path 0.8s var(--amk-ease-io), visibility 0s linear 0.8s;
}

.amk-menu.is-open {
  visibility: visible;
  clip-path: circle(150vmax at var(--amk-menu-x, calc(100% - 50px)) var(--amk-menu-y, 50px));
  transition: clip-path 0.8s var(--amk-ease-io), visibility 0s;
}

.amk-menu__links li { overflow: hidden; }

.amk-menu__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--amk-line);
  font-family: var(--amk-font-display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.15;
  color: var(--amk-white);
  transform: translateY(105%);
  transition: transform 0.8s var(--amk-ease), color var(--amk-speed);
  transition-delay: calc(0.18s + var(--i, 0) * 0.06s), 0s;
}

.amk-menu.is-open .amk-menu__links a { transform: none; }

.amk-menu__links a:hover,
.amk-menu__links a[aria-current="page"] { color: var(--amk-sun-2); }

.amk-menu__num {
  font-family: var(--amk-font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--amk-gold-logo);
}

.amk-menu__links a .amk-icon {
  margin-left: auto;
  align-self: center;
  color: var(--amk-gold-logo);
  transition: transform var(--amk-speed) var(--amk-ease);
}

.amk-menu__links a:hover .amk-icon { transform: translateX(6px); }

.amk-menu__footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.6s var(--amk-ease) 0.45s, translate 0.6s var(--amk-ease) 0.45s;
}

.amk-menu.is-open .amk-menu__footer { opacity: 1; translate: none; }

.amk-menu__meta {
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--amk-muted);
  text-align: center;
}

.amk-lock,
.amk-lock body { overflow: hidden; }


/* ==========================================================================
   09. HERO (homepage)
   ========================================================================== */
.amk-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--amk-topbar-h) + var(--amk-nav-h) + clamp(28px, 5vw, 56px));
  padding-bottom: clamp(72px, 9vw, 112px);
  background-color: var(--amk-bg);
  color: var(--amk-text);
}

.amk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  /* Enige plek met het giraffepatroon als achtergrond: heel zacht, alleen
     linksboven, vervaagt snel */
  background-image: var(--amk-giraffe-subtle);
  background-size: 260px 260px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(55% 60% at 0% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(55% 60% at 0% 0%, #000 0%, transparent 100%);
}

.amk-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 70%;
  z-index: -2;
  background: radial-gradient(50% 60% at 50% 100%, rgba(145, 62, 0, 0.55), transparent 70%);
  pointer-events: none;
}

/* Warm licht dat de cursor volgt */
.amk-hero__light {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(620px circle at var(--amk-px, 70%) var(--amk-py, 35%), rgba(251, 178, 57, 0.11), transparent 62%);
  pointer-events: none;
}

.amk-hero__grid {
  display: grid;
  gap: clamp(56px, 8vw, 80px);
  align-items: center;
}

.amk-hero__title { font-weight: 500; }

.amk-hero__kicker { margin-bottom: 22px; }

.amk-hero__headline {
  display: block;
  font-size: clamp(2.8rem, 7.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.amk-hero__text {
  max-width: 34rem;
  margin-top: 26px;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--amk-muted);
}

.amk-hero .amk-btn-row { margin-top: 38px; }

.amk-hero__trust {
  display: grid;
  gap: 14px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--amk-line);
}

.amk-hero__trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}

.amk-hero__trust small {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--amk-muted);
}

/* Beeld: boog (de halve zon uit het logo) */
.amk-hero__media {
  position: relative;
  width: min(80%, 460px);
  margin-inline: auto;
  padding-bottom: 8%;
}

.amk-hero__sun {
  position: absolute;
  top: -14%;
  left: 50%;
  width: 140%;
  aspect-ratio: 1;
  translate: -50% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 236, 3, 0.3) 0%, rgba(251, 178, 57, 0.18) 30%, rgba(239, 143, 37, 0.06) 52%, transparent 68%);
  pointer-events: none;
}

.amk-arch {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  /* halve cirkel bovenaan: horizontaal 50%, verticaal = 50% * (4/5) = 40% */
  border-radius: 50% 50% var(--amk-radius-lg) var(--amk-radius-lg) / 40% 40% var(--amk-radius-lg) var(--amk-radius-lg);
  background: var(--amk-cocoa);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}

.amk-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amk-hero__arch img { scale: 1.12; }

.amk-hero__outline {
  position: absolute;
  inset: -14px -14px calc(8% - 14px) -14px;
  border: 1px solid rgba(214, 168, 51, 0.45);
  border-radius: 50% 50% 36px 36px / 40% 40% 36px 36px;
  pointer-events: none;
}

.amk-hero__inset {
  position: absolute;
  left: -8%;
  bottom: 0;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--amk-bg);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.85);
}

.amk-hero__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Draaiende tekstring met kroon */
.amk-hero__ring {
  position: absolute;
  top: 6%;
  left: -12%;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--amk-line);
  color: var(--amk-sun-2);
  box-shadow: var(--amk-shadow);
}

.amk-hero__ring svg.amk-ring-text {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  animation: amk-spin 26s linear infinite;
}

.amk-hero__ring text {
  font-family: var(--amk-font-body);
  font-size: 8.6px;
  font-weight: 800;
  fill: var(--amk-gold-logo);
  text-transform: uppercase;
}

.amk-hero__ring > .amk-icon {
  width: 30%;
  height: 30%;
}

.amk-hero__badge {
  position: absolute;
  right: -8%;
  bottom: 18%;
  max-width: 210px;
  padding: 16px 18px;
  border-radius: var(--amk-radius);
  border: 1px solid var(--amk-line);
  background: rgba(20, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--amk-shadow);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--amk-muted);
  animation: amk-float 7s ease-in-out infinite;
}

.amk-hero__badge strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--amk-font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--amk-sun-2);
}

.amk-hero__scroll { display: none; }

/* Laadanimaties hero (pure CSS; de titel wordt woord per woord onthuld) */
.amk-hero__copy > :not(.amk-hero__title) { animation: amk-fade-up 1s var(--amk-ease) both; }
.amk-hero__copy > :nth-child(2) { animation-delay: 0.55s; }
.amk-hero__copy > :nth-child(3) { animation-delay: 0.7s; }
.amk-hero__copy > :nth-child(4) { animation-delay: 0.85s; }
.amk-hero__kicker { animation: amk-fade-up 0.9s var(--amk-ease) 0.05s both; }
.amk-hero__headline { --amk-split-delay: 0.15s; }

.amk-hero__arch { animation: amk-arch-in 1.6s var(--amk-ease-io) 0.15s both; }
.amk-hero__arch img { animation: amk-kenburns 2.6s var(--amk-ease) 0.15s both; }
.amk-hero__outline { animation: amk-fade 1.4s var(--amk-ease) 0.9s both; }
.amk-hero__inset { animation: amk-pop 1.1s var(--amk-ease) 0.9s both; }
.amk-hero__ring { animation: amk-pop 1.1s var(--amk-ease) 1.05s both; }
.amk-hero__badge { animation: amk-pop 1.1s var(--amk-ease) 1.2s both, amk-float 7s ease-in-out 2.4s infinite; }
.amk-hero__sun { animation: amk-sun-pulse 9s ease-in-out infinite; }


/* ==========================================================================
   10. PAGINAHERO (subpagina's) & BREADCRUMBS
   ========================================================================== */
.amk-pagehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 78vh, 760px);
  padding-top: calc(var(--amk-topbar-h) + var(--amk-nav-h) + 48px);
  padding-bottom: clamp(56px, 8vw, 96px);
  background-color: var(--amk-bg);
}

.amk-pagehero--compact { min-height: clamp(420px, 56vh, 560px); }

.amk-pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.amk-pagehero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: amk-kenburns-slow 18s var(--amk-ease) both;
}

.amk-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(29, 0, 0, 0.55) 0%, rgba(29, 0, 0, 0.35) 40%, rgba(29, 0, 0, 0.92) 85%, var(--amk-bg) 100%),
    linear-gradient(90deg, rgba(29, 0, 0, 0.85) 0%, rgba(29, 0, 0, 0.2) 70%);
}

.amk-pagehero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  z-index: -1;
  background: radial-gradient(60% 100% at 20% 100%, rgba(145, 62, 0, 0.28), transparent 70%);
  pointer-events: none;
}

.amk-pagehero__inner { max-width: 780px; }

.amk-pagehero__title {
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.amk-pagehero__lead {
  max-width: 36rem;
  margin-top: 22px;
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  color: var(--amk-muted);
  animation: amk-fade-up 1s var(--amk-ease) 0.55s both;
}

.amk-pagehero .amk-btn-row {
  margin-top: 32px;
  animation: amk-fade-up 1s var(--amk-ease) 0.7s both;
}

.amk-pagehero .amk-eyebrow { animation: amk-fade-up 0.9s var(--amk-ease) 0.05s both; }
.amk-pagehero__title { --amk-split-delay: 0.15s; }

.amk-breadcrumbs {
  margin-bottom: 26px;
  animation: amk-fade 1s var(--amk-ease) both;
}

.amk-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amk-faint);
}

.amk-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.amk-breadcrumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amk-gold-logo);
  opacity: 0.6;
}

.amk-breadcrumbs a { color: var(--amk-muted); transition: color var(--amk-speed); }
.amk-breadcrumbs a:hover { color: var(--amk-sun-2); }
.amk-breadcrumbs [aria-current="page"] { color: var(--amk-sun-2); }


/* ==========================================================================
   11. GIRAFFE-BAND (marquee met faciliteiten) — licht schuin, zoals het lint
       in de huidige huisstijl
   ========================================================================== */
.amk-bandwrap {
  position: relative;
  overflow: hidden;
  padding-block: 26px;
  margin-block: -26px;
  z-index: 2;
}

.amk-band {
  position: relative;
  overflow: hidden;
  padding-block: 18px;
  background-color: var(--amk-ember);
  background-image: var(--amk-giraffe-band);
  background-size: 220px 220px;
  border-block: 1px solid rgba(214, 168, 51, 0.3);
  color: var(--amk-text);
  transform: rotate(-1.6deg) scale(1.04);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
}

.amk-band::before,
.amk-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 1;
  pointer-events: none;
}

.amk-band::before { left: 0; background: linear-gradient(90deg, var(--amk-ember), transparent); }
.amk-band::after { right: 0; background: linear-gradient(-90deg, var(--amk-ember), transparent); }

.amk-band__track {
  display: flex;
  width: max-content;
  animation: amk-marquee 44s linear infinite;
}

.amk-band:hover .amk-band__track { animation-play-state: paused; }

.amk-band__list {
  display: flex;
  align-items: center;
  flex: none;
}

.amk-band__list li {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--amk-font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-style: italic;
  white-space: nowrap;
}

.amk-band__list li::after {
  content: "";
  width: 22px;
  height: 14px;
  background: var(--amk-sun-mark) center / contain no-repeat;
}


/* ==========================================================================
   12. WELKOM / VERHAAL
   ========================================================================== */
.amk-intro__grid {
  display: grid;
  gap: clamp(64px, 8vw, 104px);
  align-items: center;
}

.amk-intro__media {
  position: relative;
  width: min(100%, 480px);
  margin-inline: auto;
  padding-right: 16%;
  padding-bottom: 14%;
}

.amk-intro__glow {
  position: absolute;
  top: -16%;
  left: -20%;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 178, 57, 0.22) 0%, rgba(145, 62, 0, 0.18) 40%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}

.amk-intro__arch {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% var(--amk-radius-lg) var(--amk-radius-lg) / 37.5% 37.5% var(--amk-radius-lg) var(--amk-radius-lg);
}

.amk-intro__arch img { scale: 1.12; }

.amk-intro__small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
}

.amk-intro__small-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--amk-radius);
  border: 6px solid var(--amk-bg-deep);
  box-shadow: var(--amk-shadow);
}

.amk-intro__small-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

.amk-intro__small figcaption {
  margin-top: 10px;
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--amk-muted);
}

.amk-intro__copy > p {
  color: var(--amk-muted);
  font-size: 1.05rem;
}

.amk-intro__copy .amk-title { margin-bottom: 26px; }

.amk-quote {
  position: relative;
  margin-block: 34px;
  padding: 28px 28px 28px 32px;
  border-radius: var(--amk-radius);
  background: linear-gradient(140deg, rgba(251, 178, 57, 0.08), rgba(251, 238, 224, 0.02) 60%);
  border: 1px solid var(--amk-line);
}

.amk-quote::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--amk-sun-1), var(--amk-sun-2), var(--amk-giraffe));
}

.amk-quote p {
  font-family: var(--amk-font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.42;
  color: var(--amk-white);
}

.amk-quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--amk-muted);
}

.amk-quote footer strong {
  display: block;
  font-family: var(--amk-font-display);
  font-size: 1.12rem;
  font-weight: 500;
  font-style: italic;
  color: var(--amk-sun-2);
}

.amk-quote__crown {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background-image: var(--amk-grad-btn);
  color: var(--amk-bg);
}

.amk-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.amk-fact {
  padding: 20px 12px;
  border-radius: var(--amk-radius-sm);
  border: 1px solid var(--amk-line);
  background: var(--amk-surface);
  text-align: center;
}

.amk-fact strong {
  display: block;
  font-family: var(--amk-font-display);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--amk-sun-2);
}

.amk-fact > span {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--amk-muted);
}


/* ==========================================================================
   13. FACILITEITEN (bento)
   ========================================================================== */
.amk-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 210px;
  gap: 12px;
}

.amk-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--amk-radius);
  background: var(--amk-bark);
  isolation: isolate;
  border: 1px solid rgba(214, 168, 51, 0.1);
}

.amk-tile--hero { grid-column: span 2; grid-row: span 2; }
.amk-tile--wide:last-child { grid-column: span 2; }

.amk-tile__img {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
}

.amk-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--amk-ease), filter 0.8s var(--amk-ease);
  filter: saturate(0.95) brightness(0.92);
}

.amk-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(29, 0, 0, 0) 30%, rgba(29, 0, 0, 0.9) 100%);
  transition: opacity 0.6s var(--amk-ease);
}

/* Gouden glans die de cursor volgt */
.amk-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(380px circle at var(--amk-mx, 50%) var(--amk-my, 50%), rgba(255, 220, 120, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--amk-ease);
  pointer-events: none;
}

.amk-tile:hover::before { opacity: 1; }

.amk-tile:hover .amk-tile__img img {
  scale: 1.07;
  filter: saturate(1.05) brightness(1);
}

.amk-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 18px;
}

.amk-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(29, 0, 0, 0.55);
  border: 1px solid rgba(251, 178, 57, 0.4);
  color: var(--amk-sun-2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.6s var(--amk-ease), background-color 0.4s;
}

.amk-tile:hover .amk-tile__icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(251, 178, 57, 0.18);
}

.amk-tile h3 { font-size: 1.25rem; }

.amk-tile p {
  display: none;
  margin-top: 6px;
  max-width: 36ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--amk-muted);
}

.amk-tile--hero h3 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
.amk-tile--hero p { display: block; }

.amk-facilities__more {
  display: grid;
  gap: 28px;
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--amk-line);
}

.amk-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--amk-font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amk-muted);
}


/* ==========================================================================
   14. ARRANGEMENTEN & PRIJZEN
   ========================================================================== */
.amk-section--prices {
  background-color: var(--amk-bg-deep);
  background-image:
    radial-gradient(900px 520px at 50% 105%, rgba(251, 178, 57, 0.14), transparent 70%),
    radial-gradient(700px 420px at 50% -10%, rgba(145, 62, 0, 0.3), transparent 70%);
}

.amk-tabs__wrap { text-align: center; }

.amk-tabs {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  margin: 0 auto clamp(36px, 5vw, 52px);
  border-radius: 999px;
  background: rgba(251, 238, 224, 0.04);
  border: 1px solid var(--amk-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.amk-tabs__btn {
  position: relative;
  z-index: 1;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--amk-muted);
  transition: color var(--amk-speed) var(--amk-ease);
}

.amk-tabs__btn small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.8;
}

.amk-tabs__btn[aria-selected="true"] { color: var(--amk-bg); }

.amk-tabs__indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background-image: var(--amk-grad-btn);
  box-shadow: var(--amk-shadow-glow);
  transition: transform 0.55s var(--amk-ease);
}

.amk-tabs[data-active="1"] .amk-tabs__indicator { transform: translateX(100%); }

.amk-prices {
  display: grid;
  gap: 16px;
}

.amk-prices[hidden] { display: none; }

.amk-prices--two {
  max-width: 840px;
  margin-inline: auto;
}

.amk-price {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border-radius: var(--amk-radius-lg);
  background: linear-gradient(170deg, rgba(251, 238, 224, 0.06), rgba(251, 238, 224, 0.015));
  border: 1px solid var(--amk-line);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.amk-price__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.amk-price__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(251, 178, 57, 0.12);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--amk-sun-2);
}

.amk-price__name {
  margin-top: 22px;
  font-size: 1.6rem;
}

.amk-price__desc {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--amk-muted);
}

.amk-price__amount {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 26px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--amk-line);
  font-family: var(--amk-font-display);
  line-height: 1;
}

.amk-price__amount span {
  margin-top: 8px;
  font-size: 1.4rem;
  color: var(--amk-sun-2);
}

.amk-price__amount strong {
  font-size: 3.8rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--amk-white);
  font-variant-numeric: tabular-nums;
}

.amk-price__amount small {
  align-self: flex-end;
  margin: 0 0 8px 8px;
  font-family: var(--amk-font-body);
  font-size: 0.82rem;
  color: var(--amk-muted);
}

.amk-checks {
  display: grid;
  gap: 12px;
  margin: 22px 0 28px;
}

.amk-checks li {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.amk-checks .amk-icon {
  margin-top: 1px;
  color: var(--amk-sun-2);
}

.amk-price .amk-btn { margin-top: auto; }

/* Uitgelichte kaart met gouden verlooprand */
.amk-price--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, #2b0a03, #1a0100) padding-box,
    linear-gradient(160deg, var(--amk-sun-1), var(--amk-sun-2) 40%, rgba(145, 62, 0, 0.6) 100%) border-box;
  box-shadow: 0 40px 80px -40px rgba(251, 178, 57, 0.35);
}

.amk-price--featured .amk-price__amount { border-color: rgba(251, 178, 57, 0.3); }

.amk-price__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background-image: var(--amk-grad-btn);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--amk-bg);
  white-space: nowrap;
}

.amk-prices__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: clamp(36px, 5vw, 52px);
  text-align: center;
  color: var(--amk-muted);
  font-size: 0.95rem;
}

.amk-prices__note a:not(.amk-link) {
  font-weight: 700;
  color: var(--amk-text);
  border-bottom: 1px solid var(--amk-line-strong);
}


/* ==========================================================================
   15. EXTRA'S
   ========================================================================== */
.amk-extras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 16px;
  margin-inline: calc(var(--amk-gutter) * -1);
  padding: 4px var(--amk-gutter) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--amk-gutter);
  scrollbar-width: none;
}

.amk-extras::-webkit-scrollbar { display: none; }

.amk-extra {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: var(--amk-radius-lg);
  overflow: hidden;
  background: var(--amk-bark);
  border: 1px solid var(--amk-line);
  transition: border-color var(--amk-speed);
}

.amk-extra:hover { border-color: rgba(251, 178, 57, 0.5); }

.amk-extra__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.amk-extra__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--amk-ease);
}

.amk-extra:hover .amk-extra__img img { scale: 1.08; }

.amk-extra__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.amk-extra__body h3 { font-size: 1.35rem; }

.amk-extra__body p {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--amk-muted);
}

.amk-extra__tag {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amk-sun-2);
}

.amk-extra--icon {
  background:
    radial-gradient(360px 260px at 0% 0%, rgba(255, 236, 3, 0.16), transparent 70%),
    linear-gradient(160deg, #6b2a05 0%, var(--amk-rust) 55%, #6e2c02 100%);
  border-color: rgba(251, 178, 57, 0.35);
}

.amk-extra__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}

.amk-extra__sunrise {
  width: 58%;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.amk-extra__sunrise::before {
  content: "";
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--amk-sun-1), var(--amk-sun-2));
  box-shadow: 0 0 60px rgba(255, 220, 60, 0.45);
  transform-origin: 50% 100%;
  animation: amk-sunrise-loop 6s ease-in-out infinite;
}

.amk-extra__sunrise::after {
  content: "";
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--amk-sun-2);
}

.amk-extras__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.amk-extras__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 760px;
  font-size: 0.92rem;
  color: var(--amk-muted);
}

.amk-extras__note .amk-icon {
  margin-top: 2px;
  color: var(--amk-sun-2);
}


/* ==========================================================================
   16. STAPPEN (met lijn die zich tekent)
   ========================================================================== */
.amk-steps {
  position: relative;
  display: grid;
  gap: 16px;
}

.amk-steps__line { display: none; }

.amk-step {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--amk-radius-lg);
  background: var(--amk-surface);
  border: 1px solid var(--amk-line);
}

.amk-step__num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.amk-step__num > span:first-child {
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: 3.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--amk-sun-2);
}

.amk-step__num .amk-icon-wrap {
  width: 54px;
  height: 54px;
  background: rgba(251, 178, 57, 0.1);
  border-color: rgba(251, 178, 57, 0.35);
}

.amk-step__num .amk-icon { width: 24px; height: 24px; }

.amk-step h3 { font-size: 1.45rem; }

.amk-step p {
  margin-top: 10px;
  font-size: 0.97rem;
  color: var(--amk-muted);
}

.amk-steps__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 60px);
}


/* ==========================================================================
   17. REVIEWS
   ========================================================================== */
.amk-reviews {
  display: grid;
  gap: 16px;
}

.amk-review {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--amk-radius-lg);
  background: var(--amk-surface);
  border: 1px solid var(--amk-line);
}

.amk-stars {
  display: flex;
  gap: 4px;
  color: var(--amk-sun-2);
}

.amk-stars .amk-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.amk-review blockquote {
  margin-top: 18px;
  font-family: var(--amk-font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--amk-text);
}

.amk-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 0.88rem;
  color: var(--amk-muted);
}

.amk-review figcaption strong { display: block; color: var(--amk-text); }

.amk-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background-image: var(--amk-grad-btn);
  font-family: var(--amk-font-display);
  font-weight: 600;
  color: var(--amk-bg);
}

.amk-review--placeholder blockquote { color: var(--amk-muted); font-style: italic; }

.amk-reviews__widget:empty { display: none; }


/* ==========================================================================
   18. FAQ (vloeiend open/dicht via scripts.js)
   ========================================================================== */
.amk-faq__grid {
  display: grid;
  gap: 40px;
}

.amk-faq__aside > p {
  margin-top: 18px;
  color: var(--amk-muted);
}

.amk-faq__aside .amk-btn-row { margin-top: 28px; }

.amk-faq__list {
  display: grid;
  gap: 12px;
}

.amk-faq__item {
  border-radius: var(--amk-radius);
  background: var(--amk-surface);
  border: 1px solid var(--amk-line);
  transition: border-color var(--amk-speed), background-color var(--amk-speed);
}

.amk-faq__item:hover { border-color: var(--amk-line-strong); }

.amk-faq__item[open] {
  border-color: rgba(251, 178, 57, 0.45);
  background: linear-gradient(160deg, rgba(251, 178, 57, 0.07), rgba(251, 238, 224, 0.02));
}

.amk-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-family: var(--amk-font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--amk-white);
  cursor: pointer;
  list-style: none;
}

.amk-faq__item summary::-webkit-details-marker { display: none; }

.amk-faq__toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--amk-line-strong);
  color: var(--amk-sun-2);
  transition: transform 0.5s var(--amk-ease), background-color var(--amk-speed), color var(--amk-speed), border-color var(--amk-speed);
}

.amk-faq__item[open] .amk-faq__toggle {
  transform: rotate(135deg);
  border-color: transparent;
  background-image: var(--amk-grad-btn);
  color: var(--amk-bg);
}

.amk-faq__answer { overflow: hidden; }

.amk-faq__answer > div {
  padding: 0 22px 22px;
  color: var(--amk-muted);
}

.amk-faq__answer a {
  color: var(--amk-sun-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   19. CONTACT, KAART & SLOT-CTA
   ========================================================================== */
.amk-contact,
.amk-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--amk-section-y);
  background-color: var(--amk-bg);
  color: var(--amk-text);
}

/* De zon komt op boven de horizon — zoals in het logo */
.amk-contact__sun,
.amk-cta__sun {
  position: absolute;
  left: 50%;
  bottom: -38%;
  width: min(1100px, 160%);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 3, 0.2) 0%, rgba(251, 178, 57, 0.16) 28%, rgba(145, 62, 0, 0.18) 48%, transparent 66%);
  z-index: -1;
  pointer-events: none;
}

.amk-js .amk-contact__sun,
.amk-js .amk-cta__sun {
  translate: -50% 18%;
  opacity: 0.4;
  transition: translate 2.2s var(--amk-ease), opacity 2.2s var(--amk-ease);
}

.amk-js .is-risen .amk-contact__sun,
.amk-js .is-risen .amk-cta__sun {
  translate: -50% 0;
  opacity: 1;
}

/* Horizonlijn onder de opkomende zon (zoals in het logo) */
.amk-contact::before,
.amk-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: min(1100px, 90%);
  height: 1px;
  translate: -50% 0;
  background: var(--amk-grad-line);
  pointer-events: none;
}

.amk-contact__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.amk-contact .amk-title,
.amk-cta__title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }

.amk-contact__lead {
  margin-top: 18px;
  max-width: 34rem;
  font-size: 1.08rem;
  color: var(--amk-muted);
}

.amk-contact .amk-btn-row { margin-top: 32px; }

.amk-contact__info {
  display: grid;
  gap: 18px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--amk-line);
}

.amk-contact__info li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.amk-contact__info small {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amk-muted);
}

.amk-contact__info a,
.amk-contact__info span:not(.amk-icon-wrap) {
  font-weight: 600;
  color: var(--amk-text);
}

.amk-contact__info a:hover { color: var(--amk-sun-2); }

.amk-areas {
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--amk-muted);
}

.amk-areas strong { color: var(--amk-text); }

.amk-map {
  position: relative;
  padding: 10px;
  border-radius: calc(var(--amk-radius-lg) + 10px);
  border: 1px solid var(--amk-line);
  background: rgba(20, 0, 0, 0.6);
  box-shadow: var(--amk-shadow);
}

.amk-map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--amk-radius-lg);
  background: var(--amk-cocoa);
  filter: sepia(0.35) saturate(0.9) contrast(1.02);
}

.amk-map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 12px 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.amk-map__caption > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.amk-map__caption .amk-icon { color: var(--amk-sun-2); }

/* Gecentreerde slot-CTA voor subpagina's */
.amk-cta { text-align: center; }

.amk-cta__inner {
  max-width: 760px;
  margin-inline: auto;
}

.amk-cta__lead {
  max-width: 36rem;
  margin: 20px auto 0;
  font-size: 1.08rem;
  color: var(--amk-muted);
}

.amk-cta .amk-btn-row {
  justify-content: center;
  margin-top: 34px;
}

.amk-cta .amk-eyebrow { justify-content: center; }


/* ==========================================================================
   20. SUBPAGINA-COMPONENTEN
   ========================================================================== */

/* --- Verhaal met portretfoto (impressie) --- */
.amk-story {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

.amk-story__media { position: relative; }

.amk-story__img {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--amk-radius-lg);
  box-shadow: var(--amk-shadow);
}

.amk-story__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
}

.amk-story__stamp {
  position: absolute;
  right: -12px;
  bottom: -18px;
  display: grid;
  place-items: center;
  width: 128px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: var(--amk-grad-btn);
  color: var(--amk-bg);
  text-align: center;
  font-family: var(--amk-font-display);
  font-size: 0.95rem;
  line-height: 1.15;
  box-shadow: var(--amk-shadow-glow);
  animation: amk-float 7s ease-in-out infinite;
}

.amk-story__stamp .amk-icon { width: 26px; height: 26px; margin: 0 auto 4px; }

.amk-story__copy > p { color: var(--amk-muted); font-size: 1.05rem; }
.amk-story__copy .amk-title { margin-bottom: 24px; }

/* --- Features (zigzag) --- */
.amk-features {
  display: grid;
  gap: clamp(64px, 9vw, 120px);
}

.amk-feature {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.amk-feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--amk-radius-lg);
  border: 1px solid var(--amk-line);
  box-shadow: var(--amk-shadow);
}

.amk-feature__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

.amk-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 0, 0, 0.55));
}

.amk-feature__index {
  display: block;
  margin-bottom: 14px;
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: clamp(3.4rem, 7vw, 5rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(251, 178, 57, 0.6);
}

.amk-feature__body h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

.amk-feature__body p {
  margin-top: 16px;
  max-width: 34rem;
  font-size: 1.05rem;
  color: var(--amk-muted);
}

.amk-feature__body .amk-chips { margin-top: 22px; }

/* --- Icoonkaarten --- */
.amk-cards {
  display: grid;
  gap: 16px;
}

.amk-card {
  padding: 30px 26px;
  border-radius: var(--amk-radius-lg);
  background: var(--amk-surface);
  border: 1px solid var(--amk-line);
  transition: border-color var(--amk-speed);
}

.amk-card:hover { border-color: var(--amk-line-strong); }

.amk-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: rgba(251, 178, 57, 0.1);
  border: 1px solid rgba(251, 178, 57, 0.3);
  color: var(--amk-sun-2);
  transition: transform 0.6s var(--amk-ease);
}

.amk-card:hover .amk-card__icon { transform: rotate(-8deg) scale(1.08); }
.amk-card__icon .amk-icon { width: 24px; height: 24px; }

.amk-card h3 { font-size: 1.3rem; }

.amk-card p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--amk-muted);
}

/* --- Checklijst-raster (faciliteiten) --- */
.amk-checkgrid {
  display: grid;
  gap: 10px;
}

.amk-checkgrid li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--amk-radius-sm);
  background: var(--amk-surface);
  border: 1px solid var(--amk-line);
  font-weight: 600;
}

.amk-checkgrid .amk-icon-wrap { width: 36px; height: 36px; }

/* --- Uitgelicht pakket (beeld + tekst) --- */
.amk-spotlight {
  display: grid;
  overflow: hidden;
  border-radius: var(--amk-radius-lg);
  border: 1px solid var(--amk-line-strong);
  background: linear-gradient(150deg, #2b0a03, var(--amk-bg-deep));
  box-shadow: var(--amk-shadow);
}

.amk-spotlight__media {
  position: relative;
  min-height: 300px;
  overflow: hidden;
}

.amk-spotlight__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--amk-ease);
}

.amk-spotlight:hover .amk-spotlight__media img { scale: 1.05; }

.amk-spotlight__body {
  padding: clamp(32px, 5vw, 56px);
}

.amk-spotlight__body h3 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }

.amk-spotlight__body p {
  margin-top: 14px;
  color: var(--amk-muted);
}

.amk-or {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.amk-or li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--amk-radius-sm);
  border: 1px solid var(--amk-line);
  background: var(--amk-surface);
}

.amk-or li .amk-icon { margin-top: 2px; color: var(--amk-sun-2); }

.amk-or__sep {
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--amk-font-display);
  font-style: italic;
  color: var(--amk-gold-logo);
}

/* --- Menukaart (ontbijt, dranken, planken) --- */
.amk-carte-grid {
  display: grid;
  gap: 16px;
}

.amk-carte {
  position: relative;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--amk-radius-lg);
  background:
    linear-gradient(170deg, rgba(251, 238, 224, 0.05), rgba(251, 238, 224, 0.01)),
    var(--amk-bg);
  border: 1px solid var(--amk-line);
}

.amk-carte::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(214, 168, 51, 0.1);
  border-radius: calc(var(--amk-radius-lg) - 6px);
  pointer-events: none;
}

.amk-carte__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.amk-carte__head h3 { font-size: 1.55rem; }

.amk-carte__note {
  margin-bottom: 18px;
  font-size: 0.88rem;
  color: var(--amk-faint);
}

.amk-carte__list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--amk-line);
  color: var(--amk-text);
}

.amk-carte__list li:last-child { border-bottom: 0; }

.amk-carte__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  translate: 0 -2px;
  border-radius: 50%;
  background: var(--amk-sun-2);
  box-shadow: 0 0 8px rgba(251, 178, 57, 0.7);
}

.amk-carte__price {
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--amk-font-display);
  font-size: 1.05rem;
  color: var(--amk-sun-2);
  white-space: nowrap;
}

.amk-carte__head .amk-carte__price { font-size: 1.3rem; }

.amk-pricetag {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--amk-font-display);
  font-size: 1.6rem;
  color: var(--amk-sun-2);
}

.amk-carte__list small {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--amk-muted);
}

/* --- Tijdlijn van arrangementen (3u → overnachting) --- */
.amk-durations {
  display: grid;
  gap: 12px;
}

.amk-duration {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 22px 20px;
  border-radius: var(--amk-radius);
  border: 1px solid var(--amk-line);
  background: var(--amk-surface);
  transition: border-color var(--amk-speed), background-color var(--amk-speed);
}

.amk-duration:hover {
  border-color: var(--amk-line-strong);
  background: var(--amk-surface-2);
}

.amk-duration__time {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amk-sun-2);
}

.amk-duration__name {
  font-family: var(--amk-font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--amk-white);
}

.amk-duration__price {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--amk-font-display);
  font-size: 1.6rem;
  color: var(--amk-text);
}

.amk-duration--night {
  background: linear-gradient(160deg, rgba(251, 178, 57, 0.1), rgba(251, 238, 224, 0.02));
  border-color: rgba(251, 178, 57, 0.35);
}

/* --- Twee beelden naast elkaar --- */
.amk-imgpair {
  display: grid;
  gap: 12px;
  margin-block: clamp(40px, 6vw, 64px);
}

.amk-imgpair figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--amk-radius-lg);
  border: 1px solid var(--amk-line);
}

.amk-imgpair img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

/* --- Juridische pagina's (algemene voorwaarden, privacybeleid) --- */
.amk-pagehero--legal { min-height: clamp(380px, 48vh, 500px); }

.amk-legal {
  display: grid;
  gap: 40px;
  align-items: start;
}

.amk-legal__toc {
  padding: 22px 22px 18px;
  border-radius: var(--amk-radius);
  border: 1px solid var(--amk-line);
  background: var(--amk-surface);
}

.amk-legal__toc ol {
  display: grid;
  gap: 2px;
  counter-reset: none;
}

.amk-legal__toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--amk-muted);
  transition: color var(--amk-speed), background-color var(--amk-speed);
}

.amk-legal__toc a:hover {
  color: var(--amk-sun-2);
  background: rgba(251, 178, 57, 0.08);
}

.amk-legal__body {
  max-width: 760px;
  color: var(--amk-muted);
  font-size: 1.02rem;
}

.amk-legal__body h2 {
  margin: 48px 0 14px;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  scroll-margin-top: 110px;
}

.amk-legal__body h2:first-of-type { margin-top: 8px; }

.amk-legal__body > p + p { margin-top: 0.8em; }

.amk-legal__body ul {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.amk-legal__body ul li {
  position: relative;
  padding-left: 22px;
}

.amk-legal__body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amk-sun-2);
  box-shadow: 0 0 8px rgba(251, 178, 57, 0.6);
}

.amk-legal__body strong { color: var(--amk-text); }

.amk-legal__body a:not(.amk-btn) {
  font-weight: 700;
  color: var(--amk-sun-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.amk-legal__card {
  display: grid;
  gap: 4px;
  margin: 18px 0 8px;
  padding: 20px 22px;
  border-radius: var(--amk-radius);
  border: 1px solid var(--amk-line);
  background: linear-gradient(150deg, rgba(251, 178, 57, 0.07), rgba(251, 238, 224, 0.02));
}

.amk-legal__card strong {
  font-family: var(--amk-font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--amk-white);
}

.amk-legal__table {
  overflow-x: auto;
  margin: 14px 0;
  border-radius: var(--amk-radius);
  border: 1px solid var(--amk-line);
}

.amk-legal__table table { min-width: 520px; font-size: 0.95rem; }

.amk-legal__table th,
.amk-legal__table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--amk-line);
}

.amk-legal__table th {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amk-gold-logo);
}

.amk-legal__table tbody tr:last-child td { border-bottom: 0; }
.amk-legal__table td:first-child { color: var(--amk-text); }

.amk-legal__updated {
  margin-top: 40px !important;
  padding-top: 20px;
  border-top: 1px solid var(--amk-line);
  font-size: 0.88rem;
  color: var(--amk-faint);
}

/* Ontwerp-markering: nog in te vullen door de eigenaar */
.amk-legal__draft {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 14px 16px;
  border-radius: var(--amk-radius-sm);
  border: 1px dashed rgba(251, 178, 57, 0.6);
  background: rgba(251, 178, 57, 0.08);
  font-size: 0.92rem;
}

.amk-legal__draft .amk-icon { margin-top: 2px; color: var(--amk-sun-2); }

.amk-todo {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(251, 178, 57, 0.16);
  outline: 1px dashed rgba(251, 178, 57, 0.7);
  color: var(--amk-sun-1);
}

.amk-summary__legal {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--amk-faint);
}

.amk-footer__legal a { color: var(--amk-muted) !important; }
.amk-footer__legal a:hover { color: var(--amk-sun-2) !important; }

/* --- Galerij met lightbox --- */
.amk-gallery {
  columns: 2 160px;
  column-gap: 12px;
}

.amk-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: var(--amk-radius);
  break-inside: avoid;
  border: 1px solid rgba(214, 168, 51, 0.12);
  cursor: zoom-in;
}

.amk-gallery__item img {
  width: 100%;
  transition: scale 1.2s var(--amk-ease), filter 0.6s;
}

.amk-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(29, 0, 0, 0.2), rgba(29, 0, 0, 0.65)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbb239' stroke-width='1.7' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5M11 8v6M8 11h6'/></svg>") center / 44px no-repeat;
  opacity: 0;
  transition: opacity 0.5s var(--amk-ease);
}

.amk-gallery__item:hover img { scale: 1.06; }
.amk-gallery__item:hover::after,
.amk-gallery__item:focus-visible::after { opacity: 1; }

.amk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 64px 16px 24px;
  background: rgba(14, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--amk-ease), visibility 0s linear 0.45s;
}

.amk-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--amk-ease), visibility 0s;
}

.amk-lightbox__img {
  max-width: min(1200px, 100%);
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  border-radius: var(--amk-radius);
  box-shadow: 0 40px 80px -30px #000;
  scale: 0.96;
  transition: scale 0.6s var(--amk-ease), opacity 0.35s;
}

.amk-lightbox.is-open .amk-lightbox__img { scale: 1; }
.amk-lightbox__img.is-switching { opacity: 0; }

.amk-lightbox__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  color: var(--amk-muted);
  font-size: 0.9rem;
}

.amk-lightbox__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--amk-line-strong);
  background: rgba(29, 0, 0, 0.6);
  color: var(--amk-text);
  transition: border-color var(--amk-speed), color var(--amk-speed), background-color var(--amk-speed);
}

.amk-lightbox__btn:hover {
  border-color: var(--amk-sun-2);
  color: var(--amk-sun-2);
}

.amk-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* --- Vergelijkingstabel (prijslijst) --- */
.amk-compare-wrap {
  overflow-x: auto;
  border-radius: var(--amk-radius-lg);
  border: 1px solid var(--amk-line);
  background: var(--amk-surface);
}

.amk-compare {
  min-width: 880px;
  font-size: 0.95rem;
}

.amk-compare th,
.amk-compare td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--amk-line);
}

.amk-compare thead th {
  font-family: var(--amk-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--amk-white);
  vertical-align: bottom;
}

.amk-compare thead small {
  display: block;
  margin-top: 4px;
  font-family: var(--amk-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--amk-sun-2);
}

.amk-compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--amk-text);
}

.amk-compare td { color: var(--amk-muted); }
.amk-compare tbody tr:last-child > * { border-bottom: 0; }
.amk-compare tbody tr { transition: background-color var(--amk-speed); }
.amk-compare tbody tr:hover { background: rgba(251, 178, 57, 0.05); }
.amk-compare .amk-icon { margin-inline: auto; color: var(--amk-sun-2); }

.amk-compare .amk-dash { color: var(--amk-faint); }

/* --- Deals --- */
.amk-deals {
  display: grid;
  gap: 16px;
}

.amk-deal {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--amk-radius-lg);
  border: 1px solid var(--amk-line);
  background: linear-gradient(160deg, rgba(251, 238, 224, 0.06), rgba(251, 238, 224, 0.015));
}

.amk-deal__label {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(251, 178, 57, 0.12);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amk-sun-2);
}

.amk-deal h3 {
  margin-top: 20px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.amk-deal p {
  margin-top: 12px;
  color: var(--amk-muted);
}

.amk-deal .amk-btn { margin-top: 26px; align-self: flex-start; }

.amk-deal__ribbon {
  position: absolute;
  top: 22px;
  right: -46px;
  width: 180px;
  padding: 6px 0;
  rotate: 45deg;
  background: var(--amk-rust);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: var(--amk-text);
}

.amk-deal--placeholder { border-style: dashed; }

/* --- Reserveren --- */
.amk-booking__grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

.amk-booking__frame {
  padding: clamp(10px, 2vw, 18px);
  border-radius: calc(var(--amk-radius-lg) + 8px);
  border: 1px solid var(--amk-line-strong);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(251, 178, 57, 0.1), transparent 70%),
    var(--amk-bg-deep);
  box-shadow: var(--amk-shadow);
}

.amk-booking__frame iframe {
  width: 100%;
  min-height: 760px;
  border: 0;
  border-radius: var(--amk-radius);
  background: #fff;
}

/* Gsm: de agenda past precies op het scherm. Het betaalvenster van de agenda
   staat vast binnen de iframe; is de iframe hoger dan het scherm, dan valt de
   knop "Betalen" buiten beeld en kan je er niet naartoe scrollen. */
@media (max-width: 767.98px) {
  .amk-booking__frame { padding: 6px; }
  .amk-booking__frame iframe {
    min-height: 0;
    height: calc(100vh - 12px) !important;
    height: calc(100svh - 12px) !important;
  }
}

/* Op de reserveerpagina geen vaste reserveerbalk of -knop: die schoof over
   de onderkant van de agenda (voorwaarden, betalen). */
.amk:has(.amk-booking__frame) .amk-mobilebar,
.amk:has(.amk-booking__frame) .amk-fab { display: none !important; }

.amk-booking__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 4px 8px 12px;
}

.amk-booking__top .amk-booking__hint { padding: 0; }

.amk-booking__full { flex: none; }

.amk-booking__phone {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 8px 14px;
  padding: 12px 14px;
  border-radius: var(--amk-radius-sm);
  border: 1px solid var(--amk-line);
  background: rgba(251, 178, 57, 0.06);
  font-size: 0.88rem;
  color: var(--amk-muted);
}

.amk-booking__phone .amk-icon { margin-top: 2px; color: var(--amk-sun-2); }
.amk-booking__phone strong { color: var(--amk-text); }

.amk-booking__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 14px;
  font-size: 0.88rem;
  color: var(--amk-muted);
}

.amk-booking__hint .amk-icon { color: var(--amk-sun-2); }

.amk-summary {
  padding: 28px 26px;
  border-radius: var(--amk-radius-lg);
  background: var(--amk-surface);
  border: 1px solid var(--amk-line);
}

.amk-summary + .amk-summary { margin-top: 16px; }

.amk-summary h2,
.amk-summary h3 { font-size: 1.4rem; margin-bottom: 14px; }

.amk-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--amk-line);
}

.amk-summary__row:last-child { border-bottom: 0; }

.amk-summary__row span { color: var(--amk-muted); font-size: 0.93rem; }

.amk-summary__row strong {
  font-family: var(--amk-font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--amk-white);
  white-space: nowrap;
}


/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.amk-footer {
  position: relative;
  overflow: hidden;
  background: var(--amk-bg-deep);
  color: var(--amk-muted);
  font-size: 0.93rem;
}

.amk-footer::before {
  content: "";
  display: block;
  height: 14px;
  background-color: var(--amk-ember);
  background-image: var(--amk-giraffe-band);
  background-size: 120px 120px;
  border-block: 1px solid rgba(214, 168, 51, 0.25);
}

.amk-footer__grid {
  display: grid;
  gap: 40px;
  padding-block: clamp(56px, 8vw, 88px) 40px;
}

.amk-footer__brand img {
  width: 190px;
  height: auto;
  margin: -24px 0 -16px -18px;
}

.amk-footer__brand p {
  max-width: 32ch;
  margin-top: 12px;
}

.amk-footer h2 {
  margin-bottom: 16px;
  font-family: var(--amk-font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amk-gold-logo);
}

.amk-footer ul { display: grid; gap: 10px; }

.amk-footer a { transition: color var(--amk-speed); }
.amk-footer a:hover { color: var(--amk-sun-2); }
.amk-footer address { font-style: normal; }

/* Groot woordmerk onderaan */
.amk-footer__wordmark {
  display: block;
  padding-inline: var(--amk-gutter);
  font-family: var(--amk-font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 10.5vw, 10.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 168, 51, 0.22);
  background: linear-gradient(180deg, rgba(251, 178, 57, 0.12), transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  margin-bottom: -0.12em;
}

.amk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-block: 24px;
  border-top: 1px solid var(--amk-line);
  font-size: 0.82rem;
}

.amk-footer__bottom a { color: var(--amk-gold-logo); }

.amk-totop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--amk-text);
}

.amk-totop .amk-icon {
  rotate: -90deg;
  transition: translate var(--amk-speed) var(--amk-ease);
}

.amk-totop:hover .amk-icon { translate: 0 -3px; }


/* ==========================================================================
   22. MOBIELE CTA-BALK
   ========================================================================== */
.amk-mobilebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px var(--amk-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 0, 0, 0.92);
  border-top: 1px solid var(--amk-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.5s var(--amk-ease), visibility 0s linear 0.5s;
}

.amk-mobilebar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 0.5s var(--amk-ease), visibility 0s;
}

.amk-mobilebar .amk-btn { min-height: 50px; }


/* Vaste reserveerknop rechtsonder (computer) */
.amk-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 85;
  display: none;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 10px 30px -14px rgba(251, 178, 57, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.92);
  transition: opacity 0.4s var(--amk-ease), transform 0.5s var(--amk-ease), visibility 0s linear 0.5s;
}

.amk-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s var(--amk-ease), transform 0.5s var(--amk-ease), visibility 0s;
}

.amk-fab.is-visible:hover { transform: translateY(-2px); }


/* ==========================================================================
   23. KEYFRAMES
   ========================================================================== */
@keyframes amk-marquee { to { transform: translateX(-50%); } }

@keyframes amk-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes amk-fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes amk-arch-in {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes amk-kenburns {
  from { transform: scale(1.25); }
  to { transform: scale(1); }
}

@keyframes amk-kenburns-slow {
  from { transform: scale(1.18); }
  to { transform: scale(1.02); }
}

@keyframes amk-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

@keyframes amk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes amk-spin { to { transform: rotate(360deg); } }

@keyframes amk-sun-pulse {
  0%, 100% { opacity: 0.85; scale: 1; }
  50% { opacity: 1; scale: 1.05; }
}

@keyframes amk-sunrise-loop {
  0%, 100% { transform: translateY(6%) scaleY(0.92); }
  50% { transform: none; }
}

@keyframes amk-shine {
  0% { transform: translateX(-130%); }
  18%, 100% { transform: translateX(130%); }
}

@keyframes amk-ember {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10% { opacity: var(--o, 0.8); }
  55% { transform: translate3d(var(--sway, 20px), -45vh, 0) scale(0.85); }
  85% { opacity: calc(var(--o, 0.8) * 0.6); }
  100% { transform: translate3d(calc(var(--sway, 20px) * -0.6), -95vh, 0) scale(0.4); opacity: 0; }
}

@keyframes amk-scroll-dot {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes amk-draw { to { transform: scaleX(1); } }


/* ==========================================================================
   24. BREAKPOINTS (mobile-first)
   ========================================================================== */

/* ---- ≥ 560px ---- */
@media (min-width: 560px) {
  .amk-hero__trust {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 16px 28px;
  }

  .amk-extras { grid-auto-columns: 46%; }
  .amk-bento { grid-auto-rows: 240px; }
  .amk-tile p { display: block; }
  .amk-checkgrid { grid-template-columns: repeat(2, 1fr); }
  .amk-cards { grid-template-columns: repeat(2, 1fr); }
  .amk-gallery { columns: 3 160px; }
  .amk-durations { grid-template-columns: repeat(2, 1fr); }
  .amk-imgpair { grid-template-columns: 1fr 1fr; }
}

/* ---- ≥ 760px (tablet) ---- */
@media (min-width: 760px) {
  .amk-nav__phone { display: inline-flex; }
  .amk-nav__call { display: none; }

  .amk-prices { grid-template-columns: repeat(3, 1fr); }
  .amk-prices--four { grid-template-columns: repeat(2, 1fr); }
  .amk-prices--two { grid-template-columns: repeat(2, 1fr); }
  .amk-steps { grid-template-columns: repeat(3, 1fr); }
  .amk-reviews { grid-template-columns: repeat(3, 1fr); }
  .amk-deals { grid-template-columns: repeat(2, 1fr); }
  .amk-carte-grid { grid-template-columns: repeat(2, 1fr); }
  .amk-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .amk-facilities__more {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .amk-head--split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }

  .amk-head--split .amk-lead { margin-top: 0; }

  .amk-spotlight { grid-template-columns: 1fr 1fr; }
  .amk-spotlight__media { min-height: 100%; }

  .amk-feature { grid-template-columns: 1.05fr 0.95fr; }
  .amk-feature--reverse .amk-feature__media { order: 2; }

  .amk-map iframe { height: 420px; }

  /* Lijn die zich tekent tussen de stappen */
  .amk-steps__line {
    display: block;
    position: absolute;
    top: 60px;
    left: 8%;
    right: 8%;
    height: 1px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, var(--amk-sun-2), transparent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.8s var(--amk-ease-io) 0.3s;
  }

  .amk-steps.is-visible .amk-steps__line,
  .amk-steps .amk-steps__line.is-visible { transform: scaleX(1); }
}

/* ---- ≥ 1000px (desktop) ---- */
@media (min-width: 1000px) {
  :root { --amk-nav-h: 88px; }

  .amk-logo img { height: 76px; }

  .amk-nav__links { display: flex; }
  .amk-nav__cta { display: inline-flex; }
  .amk-menu-btn { display: none; }
  .amk-menu { display: none; }

  .amk-hero {
    min-height: min(100vh, 1000px);
    display: flex;
    align-items: center;
  }

  .amk-hero > .amk-container { width: 100%; }
  .amk-hero__grid { grid-template-columns: 1.08fr 0.92fr; }
  .amk-hero__media { width: min(100%, 470px); margin-right: 4%; }

  .amk-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 28px;
    display: grid;
    justify-items: center;
    gap: 8px;
    translate: -50% 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amk-muted);
    animation: amk-fade 1s var(--amk-ease) 1.6s both;
  }

  .amk-hero__scroll i {
    position: relative;
    width: 22px;
    height: 34px;
    border: 1px solid rgba(251, 238, 224, 0.35);
    border-radius: 12px;
  }

  .amk-hero__scroll i::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 4px;
    height: 7px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--amk-sun-2);
    animation: amk-scroll-dot 1.8s ease-in-out infinite;
  }

  .amk-intro__grid { grid-template-columns: 0.9fr 1.1fr; }
  .amk-story { grid-template-columns: 0.85fr 1.15fr; }

  .amk-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 256px;
    gap: 16px;
  }

  .amk-tile--hero { grid-column: 1 / 3; grid-row: 1 / 3; }
  .amk-tile--tall { grid-column: 3; grid-row: 1 / 3; }
  .amk-tile--wide { grid-column: span 2; }
  .amk-tile__body { padding: 24px; }

  .amk-extras {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .amk-cards { grid-template-columns: repeat(3, 1fr); }
  .amk-checkgrid { grid-template-columns: repeat(3, 1fr); }
  .amk-durations { grid-template-columns: repeat(3, 1fr); }
  .amk-fab { display: inline-flex; }
  .amk-carte-grid--three { grid-template-columns: repeat(3, 1fr); }
  .amk-gallery { columns: 3 240px; column-gap: 16px; }
  .amk-gallery__item { margin-bottom: 16px; }

  .amk-faq__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 72px;
    align-items: start;
  }

  .amk-faq__aside {
    position: sticky;
    top: 120px;
  }

  .amk-contact__grid { grid-template-columns: 1fr 1fr; gap: 72px; }

  .amk-booking__grid { grid-template-columns: 1.55fr 1fr; gap: 32px; }

  .amk-legal { grid-template-columns: 260px 1fr; gap: 64px; }
  .amk-legal__toc { position: sticky; top: 110px; }
  .amk-booking__aside { position: sticky; top: 110px; }

  .amk-mobilebar { display: none; }
}

/* ---- 1000–1279px: telefoonnummer enkel als icoon (ruimte voor de links) ---- */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .amk-nav__phone-num { display: none; }
  .amk-nav__phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(251, 238, 224, 0.2);
  }
}

/* ---- ≥ 1200px ---- */
@media (min-width: 1200px) {
  .amk-hero__media { width: 500px; }
  .amk-prices--four { grid-template-columns: repeat(4, 1fr); }
  .amk-prices--four .amk-price { padding-inline: 22px; }
  .amk-durations { grid-template-columns: repeat(6, 1fr); }
}

/* ---- Mobiel: ruimte voor de CTA-balk onderaan ---- */
@media (max-width: 999.98px) {
  .amk-footer { padding-bottom: 76px; }
}

/* ---- Kleine schermen ---- */
@media (max-width: 420px) {
  .amk-menu-btn__label { display: none; }
  .amk-menu-btn { padding: 0 14px; }
}

@media (max-width: 380px) {
  .amk-logo img { height: 56px; }
  .amk-btn { --amk-btn-pad-x: 20px; }
  .amk-hero__badge { display: none; }
  .amk-facts { grid-template-columns: 1fr; }
}

/* ---- Touch: geen hover-tilt ---- */
@media (hover: none) {
  [data-amk-tilt] { transform: none !important; }
}


/* ==========================================================================
   25. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .amk *,
  .amk *::before,
  .amk *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .amk-embers { display: none; }
  .amk-band__track { animation: none; }

  .amk-js [data-amk-reveal],
  .amk-w__i {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    transform: none !important;
  }

}


/* ==========================================================================
   26. CADEAUBON (/cadeaubon)
   ========================================================================== */
.amk-gift__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.amk-gift__grid > * { min-width: 0; }

.amk-gift__steps {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.amk-gift__steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--amk-muted);
}

.amk-gift__steps span {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--amk-line-strong);
  font-family: var(--amk-font-display);
  font-size: 0.95rem;
  color: var(--amk-sun-2);
}

.amk-gift__steps strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--amk-font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--amk-white);
}

.amk-gift__help {
  margin-top: 28px;
  font-size: 0.92rem;
  color: var(--amk-muted);
}

.amk-gift__embed {
  position: relative;
  min-height: 420px;
  border-radius: var(--amk-radius);
  background: #fff;
  overflow: hidden;
}

.amk-gift__embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

.amk-gift__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #5b4636;
  font-size: 0.95rem;
  pointer-events: none;
  transition: opacity var(--amk-speed);
}

.amk-gift__embed.is-geladen .amk-gift__loading { opacity: 0; }

.amk-gift__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(28px, 4vw, 40px) 0 0;
  text-align: center;
  color: var(--amk-muted);
}

.amk-gift__note .amk-icon { flex: none; color: var(--amk-sun-2); }

@media (min-width: 1000px) {
  .amk-gift__grid { grid-template-columns: 0.85fr 1.15fr; }
  .amk-gift__intro { position: sticky; top: 120px; }
}