/* ---------- DUC — Dutch Unique Ceramics ---------- */
/* Warm, artisanal palette. Serif display + clean sans body. */

:root {
  --cream: #faf7f2;
  --cream-2: #eef4f3;        /* pale teal mist — client's pick for section panels */
  --paper: #ffffff;
  --ink: #2a2520;
  --ink-2: #4a4036;
  --muted: #7a6d5f;
  --border: #e4dbcb;
  --brand: #8a5a3b;
  --brand-dark: #6b4426;
  --accent: #c87456;
  --accent-dark: #a85a3f;
  --shadow: 0 2px 12px rgba(42, 37, 32, 0.06);
  --shadow-lg: 0 8px 32px rgba(42, 37, 32, 0.12);
  --radius: 4px;
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); margin-bottom: 0.75em; }
h3 { font-size: 1.5rem; margin-bottom: 0.5em; }
h4 { font-size: 1.15rem; margin-bottom: 0.4em; font-weight: 600; font-family: "Inter", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); }

p { margin-bottom: 1em; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent); }

blockquote {
  border-left: 3px solid var(--brand);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--ink-2);
  font-size: 1.05rem;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand:hover { color: inherit; }       /* no colour change on hover */
.brand small { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #5fb4ab; font-family: "Inter", sans-serif; font-weight: 400; margin-top: 0.15rem; }

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  align-items: center;
}
.nav-links a {
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5rem 0;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: #5fb4ab; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #5fb4ab;
}

.has-dropdown { position: relative; }
.has-dropdown > a::after { content: " ▾"; font-size: 0.7rem; color: var(--muted); }
.dropdown {
  position: absolute;
  top: 100%;
  left: -1rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  list-style: none;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.5rem 1.25rem; color: var(--ink-2); }
.dropdown a:hover { background: var(--cream-2); color: var(--brand); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  transition: all 0.2s ease;
  text-align: center;
  cursor: pointer;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-accent { background: var(--accent); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-teal {
  background: #5fb4ab;
  border-color: #5fb4ab;
  color: #fff;
  border-radius: 100px;
  padding: 0.75rem 1.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  font-size: 0.85rem;
}
.btn-teal:hover { background: #4faea3; border-color: #4faea3; color: #fff; }
.btn-teal::before { background: #4faea3; }

/* ---------- Layout primitives ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section + .section { border-top: 1px solid var(--border); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-block;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 4rem 1.5rem;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(42,37,32,0.35), rgba(42,37,32,0.55));
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; }
.hero h1 .hero-line { display: block; }
.hero .hero-subtitle { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; color: rgba(255,255,255,0.92); letter-spacing: 0.04em; margin-top: 0.25rem; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero .eyebrow { color: #e4c8aa; }
.hero p.lead { font-size: 1.2rem; max-width: 600px; color: rgba(255,255,255,0.92); margin-bottom: 2rem; }

/* ---------- Hero (homepage light variant — Keramiekatelier DUC) ---------- */
/* Matches the original ducdutchuniqueceramics.com hero: a single full-width
   image of the blue ring sculpture (entire piece + pedestal visible),
   with serif text overlaid inside the ring. Adds a slow ken-burns crossfade
   between a wide shot and a tighter crop for movement. */
.hero.hero-light {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  padding: 0;
  background: #f1ece1;
  color: #2a2520;
  text-align: center;
  overflow: hidden;
}
.hero.hero-light::before { display: none; }

/* Parallax wrapper — JS translates this on scroll. */
.hero-parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  display: block;
}

.hero-inner-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
}
.hero-eyebrow {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 400;
  color: #5fb4ab;        /* teal — same blue as Dutch Unique Ceramics */
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.1rem;
  text-shadow: 0 1px 2px rgba(255,255,255,0.55);
}
.hero.hero-light .hero-title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.5rem, 8.5vw, 7rem);
  font-weight: 400;
  color: #393F44;
  letter-spacing: 0.01em;
  margin: 0 0 0.1rem;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(255,255,255,0.55);
}
.hero.hero-light .hero-subtitle {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 400;
  color: #5fb4ab;        /* teal accent matching old site */
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.hero.hero-light .hero-subtitle em { font-style: italic; }

/* Disable the default word-by-word reveal for the homepage hero so "DUC"
   stays a single character group with a soft fade. */
.js .hero.hero-light h1 .word {
  display: inline;
  opacity: 1;
  transform: none;
  animation: hero-title-fade 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hero-title-fade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .hero.hero-light { min-height: 70vh; height: 70vh; }
}

/* ---------- Page header (small hero) ---------- */
.page-header {
  padding: 5rem 0 3rem;
  text-align: center;
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
}
.page-header h1 { margin-bottom: 0.5rem; }
.page-header p { color: var(--muted); font-size: 1.1rem; }

/* ---------- Feature rows (home) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.feature {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature img { aspect-ratio: 4/3; object-fit: cover; }
.feature-body { padding: 1.5rem 1.75rem 2rem; }
.feature h3 { margin-bottom: 0.25rem; }
.feature h4 { font-size: 0.7rem; margin-bottom: 0.75rem; }

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; }
.split-content h2 { margin-bottom: 1rem; }

/* ---------- Gallery (art-gallery style: masonry, full images) ---------- */
.gallery {
  column-count: 3;
  column-gap: 1.25rem;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  cursor: zoom-in;
}
.gallery img:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--shadow-lg);
}

/* Subtle size variation for an "art wall" feel: every 3rd image gets
   a slightly tighter crop via a soft matted frame, every 5th slightly
   larger by removing the frame. Keeps whole product visible in all. */
.gallery img:nth-child(3n) { padding: 6px; background: var(--paper); }
.gallery img:nth-child(5n) { box-shadow: var(--shadow-lg); }

/* ---------- Shop ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.product {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.product-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-2);
}
.product-img { position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.4s ease; }
.product:hover .product-img img { transform: scale(1.05); }
.product-img .product-img-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product:hover .product-img .product-img-alt { opacity: 1; }
.product-body { padding: 1.1rem 1.25rem 1.4rem; }
.product-name { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; }
.product-price { font-size: 1rem; color: var(--brand); font-weight: 600; }
.product-price .was { text-decoration: line-through; color: var(--muted); margin-right: 0.4rem; font-weight: 400; }
.product-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
}
.product-tag.sale { background: var(--accent); }
.product-tag.new { background: var(--brand); }
.product-tag.best { background: #2d5f4d; }
.product-tag.pre { background: var(--ink-2); }

/* ---------- Info card grid (cursus prijzen, workshop) ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.info-card {
  background: var(--paper);
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}
.info-card h4 { color: var(--brand); margin-bottom: 0.5rem; }
.info-card .price { font-family: "Cormorant Garamond", serif; font-size: 2.25rem; color: var(--ink); font-weight: 500; }
.info-card p { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; }

/* Tables */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.schedule-table th, .schedule-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.schedule-table th { background: var(--cream-2); font-weight: 600; color: var(--ink); font-size: 0.9rem; letter-spacing: 0.04em; }
.schedule-table tr:last-child td { border-bottom: none; }

/* Prose (long copy pages) */
.prose { max-width: 720px; margin: 0 auto; }
.prose p, .prose li { font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }

/* Voorwaarden page specific layout */
.voorwaarden-prose { max-width: 820px; }
.voorwaarden-prose h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--brand);
}
.voorwaarden-prose h2:first-child { margin-top: 0; }
.voorwaarden-prose ul,
.voorwaarden-prose ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.voorwaarden-prose li { margin-bottom: 0.75rem; }
.voorwaarden-prose li::marker { color: var(--brand); }

/* Label-style headings (Lestijden:, Kosten:, Locatie:, Wanneer:, etc.) */
.label-head {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brand);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

/* Bulletless plain list for schedule */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.plain-list li {
  padding: 0.4rem 0;
  color: var(--ink-2);
  font-size: 1.08rem;
  border-bottom: 1px dashed var(--border);
}
.plain-list li:last-child { border-bottom: none; }

/* Price rows */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 1.08rem;
  color: var(--ink-2);
}
.price-list li:last-child { border-bottom: none; }
.price-list li span:last-child {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}

/* Schedule grid (Lestijden) */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.schedule-day {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem 1.4rem;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.schedule-day:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.schedule-day-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--brand);
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}
.schedule-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.schedule-slot {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: var(--cream-2);
  border-radius: 100px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Price grid (Kosten) */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 1.25rem;
}
.price-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.price-card-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}
.price-card-featured:hover { border-color: var(--accent); }
.price-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(200, 116, 86, 0.25);
}
.price-name {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.price-amount {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.price-amount .price-note {
  font-size: 0.55em;
  opacity: 0.7;
  font-weight: 400;
  margin-left: 0.08em;
}
.price-meta {
  color: var(--ink-2);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}
.price-save {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.65rem;
  background: rgba(45, 95, 77, 0.1);
  color: #2d5f4d;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.price-detail {
  color: var(--ink-2);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact block ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-list { list-style: none; }
.contact-list li { padding: 1rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; align-items: baseline; }
.contact-list li:last-child { border-bottom: none; }
.contact-list .label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  min-width: 80px;
}
.contact-list .value { color: var(--ink); font-size: 1.05rem; }
.map-embed {
  width: 100%;
  aspect-ratio: 4/3;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
  margin-top: 5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer h4 { color: #fff; font-size: 0.75rem; margin-bottom: 1rem; }
.footer .brand { color: #fff; font-size: 1.5rem; }
.footer .brand small { color: rgba(255,255,255,0.5); }
.footer p { color: rgba(255,255,255,0.65); margin-bottom: 0.4rem; }
.footer a { color: rgba(255,255,255,0.8); }
.footer a:hover { color: var(--accent); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

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

/* --- Tablet (≤960px) --- */
@media (max-width: 960px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse { direction: ltr; }
  .split img { max-height: 400px; object-fit: cover; }
  .gallery { column-count: 2; column-gap: 1rem; }
  .gallery img { margin-bottom: 1rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Phone landscape / large phone (≤680px) --- */
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 3rem 0; }

  /* Nav mobile menu */
  .nav-inner { gap: 1rem; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.5rem;
    gap: 0;
    display: none;
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    padding: 0.75rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .dropdown {
    position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none;
    padding-left: 1rem;
  }
  .dropdown li { border-bottom: 1px dashed var(--border); }
  .dropdown li:last-child { border-bottom: none; }
  .dropdown a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.5rem 0.5rem;
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  /* Hero */
  .hero { min-height: 50vh; padding: 3rem 1.5rem 3.5rem; }

  /* Page header */
  .page-header { padding: 3rem 0 2rem; }

  /* Grids → single column on phones */
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid[style] { grid-template-columns: 1fr !important; }
  .feature-body { padding: 1.25rem 1.25rem 1.5rem; }
  .feature-body .btn { display: block; width: 100%; min-height: 44px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .product-name { font-size: 1.1rem; }
  .product-body { padding: 0.85rem 1rem 1.1rem; }

  /* Gallery single column on small phones */
  .gallery { column-count: 2; column-gap: 0.75rem; }
  .gallery img { margin-bottom: 0.75rem; }

  /* Split image cap */
  .split img { max-height: 320px; }

  /* Reviews carousel */
  .reviews-carousel { padding: 0 3rem; }
  .review-nav { width: 44px; height: 44px; font-size: 1.2rem; }
  .review-nav-prev { left: -0.25rem; }
  .review-nav-next { right: -0.25rem; }
  .rating-number { font-size: 2.5rem; }
  .rating-stars { font-size: 1.4rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Map */
  .map-embed { aspect-ratio: 3/2; min-height: 260px; }

  /* Contact gap */
  .contact-grid { gap: 1.5rem; }

  /* Featured card */
  .featured-card { padding: 2.25rem 1.5rem 1.75rem; }
  .featured-card::before, .featured-card::after { display: none; }

  /* Schedule grid */
  .schedule-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }

}

/* --- Small phone (≤480px) --- */
@media (max-width: 480px) {
  .section { padding: 2.5rem 0; }
  .page-header { padding: 2.5rem 0 1.5rem; }
  h1 { font-size: clamp(2rem, 8vw, 2.5rem); }

  /* Showcase strip → single column */
  .showcase-item { flex: 1 1 100%; }
  .showcase-item img { height: 240px; }

  /* Gallery → single column */
  .gallery { column-count: 1; column-gap: 0; }
  .gallery img { margin-bottom: 0.75rem; }

  /* Shop → single column */
  .shop-grid { grid-template-columns: 1fr; }

  /* Featured card tighter */
  .featured-card { padding: 1.75rem 1.25rem 1.5rem; }

  /* Nav inner */
  .nav-inner { padding: 0.75rem 1rem; }
}

/* ---------- Word-break safety for long strings ---------- */
.contact-list a,
.prose, .voorwaarden-prose {
  overflow-wrap: break-word;
  word-break: break-word;
}
.footer a { word-break: normal; overflow-wrap: normal; white-space: normal; }
.footer p a[href^="mailto:"],
.footer p a[href^="tel:"] {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-size: 0.92rem;
}
.footer-grid > div { min-width: 0; }
.voorwaarden-prose { hyphens: auto; }

/* ---------- Tap target safety ---------- */
.btn { min-height: 44px; }

/* ---------- Review dots: expanded tap area ---------- */
.reviews-dots { gap: 0.25rem; }
.reviews-dots button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.reviews-dots button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  display: block;
  transition: background 0.2s ease, transform 0.2s ease;
}
.reviews-dots button.active::after {
  background: var(--brand);
  transform: scale(1.3);
}

/* ---------- iPhone notch / safe area ---------- */
@supports (padding: env(safe-area-inset-top)) {
  .nav { padding-top: env(safe-area-inset-top); }
  .footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ============================================================
   Animations
   ============================================================ */

/* page-load fade */
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { animation: page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* hero background zoom on load */
@keyframes hero-zoom {
  from { transform: scale(1.15); }
  to   { transform: scale(1); }
}
.hero { overflow: hidden; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: hero-zoom 14s ease-out forwards;
  z-index: 0;
  will-change: transform;
}
.hero-inner { z-index: 1; }

/* floating scroll cue at bottom of hero */
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.9; }
  50%      { transform: translate(-50%, 10px); opacity: 0.4; }
}
.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.7), transparent);
  animation: float 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* word-by-word hero h1 reveal */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.08s);
}
.js .hero .eyebrow, .js .hero p.lead, .js .hero .hero-subtitle, .js .hero .btn {
  opacity: 0;
  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js .hero .eyebrow { animation-delay: 0.05s; }
.js .hero .hero-subtitle { animation-delay: 0.55s; }
.js .hero p.lead { animation-delay: 0.6s; }
.js .hero .btn { animation-delay: 0.75s; }

/* generic scroll-reveal — gated on .js so no-JS users see content */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: translateY(0); }

/* image reveal via clip-path — also gated on .js */
.js .reveal-img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal-img.in { clip-path: inset(0 0 0 0); }

/* scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  z-index: 200;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(200, 116, 86, 0.45);
}

/* nav: elegant underline slide + scrolled state */
.nav-links a { overflow: hidden; }
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #5fb4ab;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav-links a:hover::before { transform: scaleX(1); transform-origin: left; }
.nav-links a.active::before { transform: scaleX(1); }
.nav-links a.active::after { display: none; }
.nav.scrolled { box-shadow: 0 2px 18px rgba(42,37,32,0.08); background: rgba(250,247,242,0.98); }

/* Brand wrapper kept for layout reasons; sheen + hover effects disabled. */
.brand { position: relative; display: inline-block; }
.brand::after { display: none; }

/* button — fill-up sweep on hover */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-dark);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }
.btn-accent::before  { background: var(--accent-dark); }
.btn-outline::before { background: var(--brand); }

/* product cards: smooth lift + inner image zoom (already defined, enhance) */
.product {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(42,37,32,0.25));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.product { position: relative; }
.product:hover .product-img::after { opacity: 1; }

/* feature cards: enhanced hover */
.feature { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; }
.feature img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.feature:hover img { transform: scale(1.06); }

/* info-card hover */
.info-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--brand);
}

/* gallery: stagger-friendly */
.gallery img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.gallery img:hover {
  transform: scale(1.04) rotate(-0.5deg);
  filter: saturate(1.1);
}

/* blockquote mark glow */
blockquote {
  position: relative;
  transition: border-color 0.5s ease;
}
blockquote.reveal.in { border-left-color: var(--accent); }

/* section divider ornament */
.ornament {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--brand);
  margin: 0 auto 1.25rem;
  position: relative;
}
.ornament::before, .ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
  transform: translateY(-50%);
}
.ornament::before { left: -14px; }
.ornament::after  { right: -14px; }

/* ---------- Google reviews carousel ---------- */
.reviews-section { text-align: center; }
.reviews-header { margin-bottom: 2.5rem; }
.reviews-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.google-g { flex-shrink: 0; }
.reviews-brand-text {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.reviews-rating {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.rating-number {
  font-family: "Cormorant Garamond", serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.rating-stars {
  position: relative;
  display: inline-block;
  font-size: 1.75rem;
  letter-spacing: 0.15em;
  line-height: 1;
}
.rating-stars-bg { color: #e4dbcb; }
.rating-stars-fill {
  position: absolute;
  top: 0; left: 0;
  color: #f5b400;
  overflow: hidden;
  white-space: nowrap;
}
.rating-count {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.reviews-carousel {
  position: relative;
  margin: 0 auto 2rem;
  max-width: 720px;
}
.reviews-viewport {
  overflow: hidden;
  border-radius: var(--radius);
}
.reviews-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.review-card {
  flex: 0 0 100%;
  padding: 0 0.25rem;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  --card-bg: var(--paper);
}
.review-card .review-stars {
  background: var(--card-bg);
  padding: 1.5rem 1.75rem 0.5rem;
  border-radius: var(--radius) var(--radius) 0 0;
  color: #f5b400;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--border);
  border-bottom: none;
}
.review-card .review-text {
  background: var(--card-bg);
  padding: 0.25rem 1.75rem 1rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.65;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  margin: 0;
  flex: 1;
}
.review-card .review-author {
  background: var(--card-bg);
  padding: 1rem 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-name {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}
.review-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--brand);
  background: var(--cream-2);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  margin-left: 0.35rem;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.review-date {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.1rem;
}

.review-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
}
.review-nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.review-nav-prev { left: -18px; }
.review-nav-next { right: -18px; }

.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
/* review dot visual styles moved to responsive section with expanded tap targets */

.reviews-cta { margin-top: 1rem; }

/* ---------- Featured card (BRAinS interview) ---------- */
.featured-section { padding: 5rem 0; }
.featured-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem 2.5rem 2.5rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.featured-card::before,
.featured-card::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--brand), transparent);
  opacity: 0.35;
}
.featured-card::before { left: 1.25rem; }
.featured-card::after  { right: 1.25rem; }

.featured-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 1.75rem;
  box-shadow: 0 2px 10px rgba(200, 116, 86, 0.3);
}

.featured-question {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  color: var(--brand);
  line-height: 1.4;
  margin: 0 auto 1.5rem;
  max-width: 600px;
  font-weight: 500;
}

.featured-answer {
  border: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  max-width: 620px;
  text-align: left;
  font-style: normal;
  color: var(--ink-2);
}
.featured-answer p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1em;
}
.featured-answer p:last-child { margin-bottom: 0; }
.featured-answer strong { color: var(--ink); font-weight: 600; }

@media (max-width: 680px) {
  .featured-card { padding: 2.25rem 1.5rem 1.75rem; }
  .featured-card::before,
  .featured-card::after { display: none; }
}

@media (max-width: 960px) {
  .review-nav-prev { left: 0.5rem; }
  .review-nav-next { right: 0.5rem; }
}
@media (max-width: 680px) {
  .rating-number { font-size: 2.5rem; }
  .rating-stars { font-size: 1.4rem; }
  .review-nav { width: 38px; height: 38px; font-size: 1.2rem; }
}

/* smooth-scroll class for anchors */
html { scroll-behavior: smooth; }

/* ---------- Showcase intro + strip ---------- */
.showcase-intro {
  padding-bottom: 3.5rem;
  border-bottom: none !important;
}
.section + .showcase-intro { border-top: none; }
.showcase-intro + .showcase-strip { margin-top: 0; }
.showcase-strip {
  width: 100%;
  overflow: hidden;
  background: var(--cream-2);
  padding: 0;
  border: none;
}
.showcase-strip + .section { border-top: none; }
.showcase-track {
  display: flex;
  width: 100%;
  align-items: stretch;
}
/* Each tile takes its width directly from JS so it always equals (or is
   proportional to) its image's natural width at the fixed 420 px height.
   That way the image inside fills the tile exactly — no gap, no blur,
   no zoom. */
.showcase-item {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  height: 560px;         /* taller row → every image is rendered bigger,
                            so the hover-expanded tile is much wider too */
  background: var(--cream-2);
  width: 20%;            /* fallback before JS runs */
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Image stays at its natural aspect ratio at fixed 420 px height — never
   resized, never cropped vertically. The tile clips horizontally when
   narrower than the image's natural width. */
.showcase-item img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  filter: contrast(1.04) saturate(1.06);
  image-rendering: -webkit-optimize-contrast;
}
.showcase-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  z-index: 2;
  pointer-events: none;
  transition: left 0s;
}
.showcase-item:hover .showcase-shine {
  left: 150%;
  transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcase-item::after { display: none; }

@media (max-width: 960px) {
  .showcase-item { height: 300px; }
}
@media (max-width: 680px) {
  .showcase-track { flex-wrap: wrap; }
  .showcase-item { flex: 1 1 50%; height: 220px; }
  .showcase-item:nth-child(5) { flex: 1 1 100%; }
  .showcase-item img {
    /* On mobile each tile owns its image fully — fill tile with cover */
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---------- Shop bottom CTA ---------- */
.shop-cta {
  text-align: center;
  max-width: 640px;
  margin: 4rem auto 0;
  padding: 2.5rem 1.5rem 2.75rem;
  background: var(--cream-2);
  border-radius: var(--radius);
}
.shop-cta .ornament { margin-bottom: 1rem; }
.shop-cta h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--ink);
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}
.shop-cta p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 auto 1.5rem;
}
.shop-cta a[href^="mailto:"] {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-cta .email-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.shop-cta .copy-email {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  padding: 0;
}
.shop-cta .copy-email:hover {
  background: var(--paper);
  color: var(--brand);
  border-color: var(--brand);
}
.shop-cta .copy-email .copy-feedback {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.shop-cta .copy-email .copy-feedback.show { opacity: 1; }
.shop-cta .btn { margin-top: 0.25rem; }

@media (max-width: 680px) {
  .shop-cta { margin-top: 2.5rem; padding: 2rem 1.25rem; }
}

/* ---------- BLIK OP DE TOEKOMST (centered intro + wide banner image) ---------- */
.blik-section { padding: 5rem 0 0; }
.blik-intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 0 1.5rem 3rem;
}
.blik-title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #393F44;
  letter-spacing: 0.04em;
  margin: 0 0 1.25rem;
}
.blik-text {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  color: #393F44;
  line-height: 1.7;
  margin: 0 auto 0.75rem;
  max-width: 620px;
}
.blik-banner {
  width: 100%;
  height: 360px;
  overflow: hidden;
  position: relative;
}
.blik-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
  transition: transform 8s linear;
}
.blik-banner:hover img { transform: scale(1.04); }

@media (max-width: 680px) {
  .blik-banner { height: 220px; }
  .blik-section { padding-top: 3rem; }
}

/* ---------- Three techniques (vertical stacked rows like old site) ---------- */
.techniques-section { padding: 5rem 0; }
.technique-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}
.technique-row:last-child { margin-bottom: 0; }
.technique-row-reverse { grid-template-columns: 380px 1fr; }
.technique-row-reverse .technique-text { order: 2; }
.technique-row-reverse .technique-img { order: 1; }

.technique-text { padding: 0 1rem; }
.technique-title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  color: #393F44;
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.technique-sub {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: #6a6258;
  margin: 0 0 1rem;
}
.technique-text p {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #393F44;
  line-height: 1.7;
  margin: 0;
}
.technique-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
  filter: contrast(1.04) saturate(1.06);
}
.technique-img:hover { transform: scale(1.03); filter: contrast(1.08) saturate(1.12); }

@media (max-width: 760px) {
  .technique-row,
  .technique-row-reverse { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
  .technique-row-reverse .technique-text { order: 2; }
  .technique-row-reverse .technique-img { order: 1; }
  .technique-img { height: 240px; }
}

/* ---------- Inspiratie full-width banner ---------- */
.inspiratie-banner {
  position: relative;
  width: 100%;
  min-height: 620px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 6rem 1.5rem;
  color: #fff;
  overflow: hidden;
}
.inspiratie-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(40,30,40,0.45) 0%, rgba(40,30,40,0.25) 60%, rgba(40,30,40,0.1) 100%);
  z-index: 1;
}
.inspiratie-content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(1.5rem, 6vw, 5rem);
}
.inspiratie-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  color: #fff;
  letter-spacing: 0.05em;
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.inspiratie-subtitle {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: rgba(255,255,255,0.95);
  margin: 0 0 0.9rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.inspiratie-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255,255,255,0.95);
  max-width: 640px;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

@media (max-width: 680px) {
  .inspiratie-banner { min-height: 420px; padding: 4rem 1.25rem; }
  .inspiratie-content { padding-left: 0; }
  .inspiratie-overlay { background: linear-gradient(180deg, rgba(40,30,40,0.5), rgba(40,30,40,0.3)); }
}

/* ---------- Over DUC page (restored to original old-site layout) ---------- */
.overduc-page {
  background: var(--cream-2);
  padding: 5rem 1.5rem 4rem;
}
.overduc-inner {
  max-width: 760px;
  margin: 0 auto;
}
.overduc-header { text-align: center; margin-bottom: 2.5rem; }
.overduc-title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #393F44;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}
.overduc-divider {
  display: block;
  width: 110px;
  height: 1px;
  background: #2a2520;
  margin: 0.6rem auto 0;
  opacity: 0.5;
}
.overduc-prose {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.overduc-prose p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: #2a2520;
  margin: 0 0 1.5rem;
}
.overduc-quote {
  font-style: normal;
  color: #2a2520 !important;
}
.overduc-closer {
  text-align: center;
  font-style: normal;
}

.overduc-roos {
  background: var(--cream);
  padding: 4rem 1.5rem 5rem;
}
.overduc-roos-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #2a2520;
  margin: 0 0 1.75rem;
  letter-spacing: 0.02em;
}
.overduc-roos-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5rem;
  align-items: start;
}
.overduc-roos-text {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.overduc-roos-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2a2520;
  margin: 0 0 1rem;
}
.overduc-roos-text a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.overduc-roos-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 680px) {
  .overduc-roos-grid { grid-template-columns: 1fr; gap: 2rem; }
  .overduc-roos-img { max-width: 320px; margin: 0 auto; }
  .overduc-page { padding: 3rem 1.25rem 2.5rem; }
  .overduc-roos { padding: 2.5rem 1.25rem 3.5rem; }
}

/* ---------- Click-to-zoom lightbox ---------- */
/* Site-wide image lightbox. Built by scripts.js — opens when the user
   clicks any image that opts in (most photos; opt out with data-no-lightbox
   on the image or any ancestor). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 17, 14, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  cursor: zoom-out;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.lightbox-img {
  max-width: 94vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 12px 50px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-open .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
/* Make every photo that opts in show a zoom-in cursor */
img.zoomable, .zoomable img { cursor: zoom-in; }

/* ---------- Feature cards as full-link tiles (cursussen & workshops) ---------- */
a.feature-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.feature-link h3 { color: var(--ink); }
a.feature-link:hover h3 { color: var(--brand); }
a.feature-link .btn { pointer-events: none; }

/* ---------- Homepage video section ---------- */
.video-section { background: var(--cream); padding: 5rem 0; text-align: center; }
.video-header { margin-bottom: 2rem; }
.video-title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #393F44;
  margin: 0.75rem 0 0;
  letter-spacing: 0.02em;
}
.video-wrap {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #000;
}
.video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  body, .hero-bg, .scroll-cue, .brand::after { animation: none !important; }
  .reveal, .reveal-img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero h1 .word, .hero .eyebrow, .hero p.lead, .hero .btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .showcase-shine { display: none; }
}