/* ============ HOME page ============ */

/* --- Hero --- */
.hero {
  /* Height (locked 100dvh) + top padding (to clear the fixed, floating nav)
     come from the `body > section.hero` rule in globals.css. Here we add only
     the side and bottom padding. */
  background: var(--green-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 40px clamp(48px, 6vh, 72px);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(13, 30, 13, 0.85) 0%, rgba(13, 30, 13, 0.55) 40%, rgba(13, 30, 13, 0.2) 100%),
    radial-gradient(ellipse 80% 50% at 85% 35%, rgba(237, 86, 0, 0.18), transparent 55%);
}
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--orange);
  border-radius: 50%;
  filter: blur(0.5px);
  opacity: 0.6;
  animation: rise linear infinite;
  box-shadow: 0 0 6px var(--orange-soft);
}
@keyframes rise {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-10vh) translateX(40px); opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  /* Both columns stretch the full hero height so the title column can fill it
     and the event card can bottom-align within it. */
  align-items: stretch;
}
/* Left column owns the title + lead + CTAs as ONE cohesive block (title,
   then lead, then buttons with natural spacing between them) — and that block
   is centred in the hero height. The title still grows with the viewport (see
   .hero h1) so the block is large, but the leftover space becomes balanced
   margin above and below rather than a dead gap in the middle. Works the same
   on a short laptop and a tall phone: no space-between, no mid-hero void. */
.hero-inner > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4cqh, 40px);
  min-height: 0;
}
.hero-tag { color: var(--orange); margin-bottom: 28px; }
/* The ONE title-sizing rule — no per-breakpoint overrides. Font is a fraction
   of the hero's own height (cqh, via the container on body>section.hero), so
   across the 4 stacked lines the headline always fills the leftover vertical
   space. The vw term caps it so it never overruns its column on ultra-wide
   screens; the px floor keeps it bold on tiny phones. Works identically on
   every device because it measures the actual hero, not a guessed breakpoint. */
.hero h1 {
  font-size: clamp(44px, min(15cqh, 18vw), 168px);
  line-height: 0.92;
  color: var(--cream);
}
.hero h1 .fire {
  color: var(--orange);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  display: inline-block;
  transform: translateY(-0.04em);
}
/* Lead/subtitle is fluid (one rule, no breakpoint override): small and tight
   on phones so the title can dominate, easing up to 19px on desktop. */
.hero-lead { max-width: 42ch; color: rgba(245, 240, 230, 0.72); font-size: clamp(14px, 1.4vw, 19px); line-height: 1.5; margin: clamp(16px, 2vh, 30px) 0 0; }
.hero h1 .fire { position: relative; }
.hero-mark {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-0.05em, -50%);
  height: 1.1em;
  width: auto;
  filter: drop-shadow(0 8px 28px rgba(237, 86, 0, 0.35));
}

/* ============================================================
   Hero meta — right-column event card.
   ============================================================ */
.hero-meta {
  align-self: end;
  justify-self: end;
  text-align: right;
  width: min(400px, 100%);
  position: relative;
  margin-right: calc(-40px - max(0px, (100vw - 1680px) / 2));
  padding: 28px 72px 24px 28px;
  isolation: isolate;
}
.hero-meta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(13, 30, 13, 0) 0%,
    rgba(13, 30, 13, 0.62) 22%,
    rgba(13, 30, 13, 0.82) 50%,
    rgba(13, 30, 13, 0.82) 100%
  );
  pointer-events: none;
}
.hero-meta-link {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: transform 0.4s var(--ease);
}
.hero-meta-link:hover { transform: translateY(-2px); }
.hero-meta-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 8px;
  border-radius: 2px;
}

.hero-meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.7);
}
.hero-meta-label-lead {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  margin-bottom: 14px;
}
.hero-meta-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(237, 86, 0, 0.55);
  animation: hero-meta-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hero-meta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(237, 86, 0, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(237, 86, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(237, 86, 0, 0); }
}

/* ---- date row ---- */
.hero-meta-date {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  line-height: 0.9;
}
.hero-meta-day {
  font-family: var(--display);
  font-size: 88px;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.hero-meta-mo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.005em;
  color: var(--orange);
}
.hero-meta-yr {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.6);
  align-self: flex-start;
  padding-top: 8px;
}

.hero-meta-sep {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 22px 0 22px auto;
}

.hero-meta-rows {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 20px;
  row-gap: 6px;
  justify-content: end;
  align-items: baseline;
}
.hero-meta-rows .hero-meta-label {
  justify-self: end;
  text-align: right;
}
.hero-meta-rows .hero-meta-val {
  justify-self: start;
  text-align: left;
}
.hero-meta-row {
  display: contents;
}
.hero-meta-val {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--cream);
}
.hero-meta-rule {
  grid-column: 1 / -1;
  justify-self: end;
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 16px 0;
}
.hero-meta-rows .hero-meta-bar {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.hero-meta-of {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(245, 240, 230, 0.6);
  margin-left: 2px;
  vertical-align: 0.3em;
}

.hero-meta-bar {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 14px 0 24px;
  background: rgba(245, 240, 230, 0.1);
  overflow: hidden;
}
.hero-meta-bar > span {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  background: linear-gradient(270deg, var(--orange), rgba(237, 86, 0, 0.45));
  box-shadow: 0 0 8px rgba(237, 86, 0, 0.5);
  transform-origin: right;
  animation: hero-meta-bar 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes hero-meta-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-meta-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 0.3s var(--ease);
}
.hero-meta-arrow {
  position: relative;
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.hero-meta-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3.5px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.hero-meta-link:hover .hero-meta-cta { color: var(--orange); }
.hero-meta-link:hover .hero-meta-arrow { width: 44px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero-actions .btn-secondary { color: var(--cream); border-color: rgba(245,240,230,0.2); }
.hero-actions .btn-secondary:hover { border-color: var(--cream); background: var(--cream); color: var(--green-deep); }

/* --- Filosofie --- */
/* Vertical padding is fluid so the section can shrink to fit 100dvh on desktop
   (see the locked-section rule in globals.css); it eases back up to 160px on
   tall screens. The mobile rule below resets it to a fixed 80px. */
.filosofie { background: var(--cream); padding: clamp(56px, 9vh, 160px) 40px; position: relative; }
.filosofie-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.filosofie-media { aspect-ratio: 4/5; position: relative; border-radius: var(--radius); overflow: hidden; }
.filosofie-media .ph { width: 100%; height: 100%; border-radius: var(--radius); }
.filosofie-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
.filosofie-meta { position: absolute; bottom: 22px; left: 22px; background: var(--green); color: var(--cream); padding: 12px 20px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; z-index: 2; }
.filosofie-content .eyebrow { color: var(--orange); }
.filosofie-content h2 { margin: 22px 0 36px; font-size: clamp(56px, 7vw, 108px); }
.filosofie-lead { font-size: 22px; line-height: 1.4; color: var(--ink); margin-bottom: 22px; max-width: 44ch; }
.filosofie-body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin-bottom: 44px; }
.filosofie-cta { display: inline-flex; align-items: center; gap: 18px; padding: 18px 28px; border-radius: 999px; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; transition: all 0.3s var(--ease); }
.filosofie-cta:hover { background: var(--orange); }
.filosofie-cta-arrow { width: 32px; height: 1px; background: currentColor; position: relative; transition: width 0.3s var(--ease); }
.filosofie-cta-arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.filosofie-cta:hover .filosofie-cta-arrow { width: 48px; }

/* --- Services / Formules --- */
.services {
  background: var(--cream-warm);
  color: var(--ink);
  /* Fluid vertical padding so the section fits 100dvh on desktop. Top is
     overridden by the flame-divider rule in globals.css; this bottom value
     shrinks the section on shorter viewports. */
  padding: clamp(56px, 9vh, 200px) 40px clamp(48px, 8vh, 160px);
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  top: 80px; left: -90px;
  width: 280px; height: 280px;
  background: var(--mark-flame-light) no-repeat center / contain;
  opacity: 0.22;
  transform: rotate(-12deg);
  pointer-events: none;
}
/* Title (left, breaks over two lines via | in the heading field) and intro
   (right) share one row, vertically centred against each other — same head
   pattern as the bites section on the Formules page. */
.services-head { max-width: 1440px; margin: 0 auto 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.services-head h2 { color: var(--ink); margin: 0; }
.services-head p { color: var(--ink-soft); font-size: 18px; line-height: 1.55; max-width: 56ch; margin: 0; }
.services-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; z-index: 1; }
.service-card { position: relative; display: flex; flex-direction: column; transition: transform 0.5s var(--ease); }
.service-card:hover { transform: translateY(-6px); }
.service-card-img { aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--green-deep); border-radius: var(--radius); }
.service-card-img .ph { width: 100%; height: 100%; border-radius: var(--radius); background: var(--green-deep); }
.service-card-img .ph::before { opacity: 0.6; }
.service-card-img .ph .ph-label { border: none; background: transparent; padding: 0; color: rgba(245,240,230,0.35); letter-spacing: 0.2em; }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
.service-card-num {
  position: absolute;
  top: 22px; left: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.01em;
  color: var(--orange);
  z-index: 2;
  line-height: 1;
}
.service-card-num::after { content: ''; display: block; width: 22px; height: 2px; background: var(--orange); margin-top: 10px; }
.service-card-body { padding: 26px 2px 0; flex: 1; display: flex; flex-direction: column; }
.service-card-body h3 { font-size: clamp(30px, 2.4vw, 44px); color: var(--ink); margin-bottom: 10px; line-height: 1; }
.service-card-body p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 42ch; margin-bottom: 24px; }
.service-card-meta { display: flex; gap: 30px; padding-top: 22px; border-top: 1px solid rgba(21, 47, 21, 0.14); margin-top: auto; }
.service-card-meta .item { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.service-card-meta .item strong { display: block; font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: -0.005em; line-height: 1; color: var(--ink); margin-top: 6px; font-weight: 400; text-transform: none; }
.service-card-arrow {
  position: absolute;
  top: 22px; right: 22px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange);
  transition: transform 0.4s var(--ease);
  z-index: 2;
  color: var(--paper);
}
.service-card:hover .service-card-arrow { transform: rotate(-45deg) scale(1.08); }
.service-card-arrow::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 11 L11 3 M5 3 L11 3 L11 9' stroke='black' fill='none' stroke-width='1.4'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 11 L11 3 M5 3 L11 3 L11 9' stroke='black' fill='none' stroke-width='1.4'/></svg>") no-repeat center / contain;
}

/* --- Op maat --- */
.custom-cta {
  background: var(--green);
  color: var(--cream);
  padding: clamp(56px, 9vh, 180px) 40px;
  position: relative;
  overflow: hidden;
}
.custom-cta::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 520px; height: 520px;
  background: var(--mark-flame-dark) no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
.custom-cta-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.custom-cta-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.custom-cta-eyebrow::before, .custom-cta-eyebrow::after {
  content: '';
  width: 28px; height: 1px;
  background: rgba(237, 86, 0, 0.6);
}
.custom-cta h2 { margin: 32px auto 0; font-size: clamp(64px, 9vw, 144px); color: var(--cream); max-width: 14ch; }
.custom-cta-lead { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.45; color: rgba(245, 240, 230, 0.85); max-width: 52ch; margin: 40px auto 50px; }
.custom-cta-types { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.custom-cta-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(245, 240, 230, 0.18);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.78);
  transition: all 0.3s var(--ease);
}
.custom-cta-type::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.custom-cta-type:hover { border-color: var(--orange); color: var(--cream); }
.custom-cta-action {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease);
}
.custom-cta-action:hover { background: var(--ember); }
.custom-cta-action-arrow {
  width: 32px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.3s var(--ease);
}
.custom-cta-action-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -4px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.custom-cta-action:hover .custom-cta-action-arrow { width: 48px; }
.custom-cta-foot {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.45);
}

/* --- Events preview --- */
.events { background: var(--cream); padding: clamp(56px, 9vh, 160px) 40px; }
.events-head { max-width: 1100px; margin: 0 auto 80px; text-align: center; }
.events-head .eyebrow { color: var(--orange); justify-content: center; display: inline-flex; }
.events-head h2 { margin: 22px 0 28px; }
.events-head p { color: var(--ink-soft); font-size: 18px; line-height: 1.55; max-width: 56ch; margin: 0 auto; }
.events-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}
.event-card:hover { transform: translateY(-6px); border-color: var(--orange); }
.event-date { position: absolute; top: 22px; left: 22px; z-index: 3; background: var(--green); color: var(--cream); border-radius: 999px; padding: 14px 20px; display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.event-date .event-day { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; letter-spacing: -0.01em; color: var(--orange); }
.event-date .event-month { color: var(--cream); font-weight: 500; }
.event-date .event-year { color: rgba(245, 240, 230, 0.55); }
.event-card-img { aspect-ratio: 4/3; background: var(--green-deep); position: relative; }
.event-card-img .ph { width: 100%; height: 100%; border-radius: 0; background: var(--green-deep); }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.event-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.event-card-body h3 { font-size: clamp(22px, 1.7vw, 28px); color: var(--ink); margin-bottom: 12px; line-height: 1.05; }
.event-card-body p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 22px; max-width: none; flex: 1; }
.event-meta { display: flex; gap: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.event-meta .item { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.event-meta .item strong { display: block; font-family: var(--serif); font-style: italic; font-size: 20px; letter-spacing: -0.005em; line-height: 1; color: var(--ink); margin-top: 6px; font-weight: 400; text-transform: none; }
.events-foot { max-width: 1440px; margin: 60px auto 0; display: flex; justify-content: center; }

/* --- Home contact --- */
.home-contact { background: var(--green-deep); color: var(--cream); padding: clamp(56px, 9vh, 160px) 40px; position: relative; overflow: hidden; scroll-margin-top: 80px; }
.home-contact::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: var(--mark-flame-light) no-repeat center / contain;
  opacity: 0.04;
  pointer-events: none;
}
.home-contact-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; align-items: start; position: relative; z-index: 1; }
.home-contact .eyebrow { color: var(--orange); }
.home-contact-content h2 { color: var(--cream); margin: 22px 0 30px; font-size: clamp(56px, 7vw, 110px); line-height: 0.95; }
.home-contact-lead { font-size: 22px; line-height: 1.45; color: rgba(245,240,230,0.85); max-width: 38ch; margin-bottom: 44px; }
.home-contact-channels { display: flex; flex-direction: column; gap: 0; }
.channel { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-bottom: 1px solid rgba(245,240,230,0.1); color: var(--cream); transition: padding-left 0.3s var(--ease); }
.channel:first-child { border-top: 1px solid rgba(245,240,230,0.1); }
a.channel:hover { padding-left: 16px; }
a.channel:hover .channel-val { color: var(--orange); }
.channel-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); }
.channel-val { font-family: var(--display); font-size: 22px; letter-spacing: 0.005em; line-height: 1.15; color: var(--cream); transition: color 0.3s var(--ease); }

.home-contact-form {
  background: rgba(245,240,230,0.04);
  border: 1px solid rgba(245,240,230,0.1);
  border-radius: var(--radius);
  padding: 48px;
}
.home-contact-form .form-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.home-contact-form .form-title { font-family: var(--display); font-size: clamp(34px, 3.4vw, 48px); text-transform: uppercase; line-height: 0.98; letter-spacing: 0.005em; margin-bottom: 14px; color: var(--cream); }
.home-contact-form .form-lead { color: rgba(245,240,230,0.65); font-size: 15px; line-height: 1.55; margin-bottom: 32px; }
.hc-field { margin-bottom: 14px; }
.hc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.hc-field-row .hc-field { margin-bottom: 0; }
.hc-field input, .hc-field textarea, .hc-field select {
  width: 100%;
  padding: 16px 22px;
  border: 1px solid rgba(245,240,230,0.14);
  background: rgba(245,240,230,0.04);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--cream);
  border-radius: 999px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.hc-field textarea {
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 130px;
}
.hc-field input::placeholder, .hc-field textarea::placeholder { color: rgba(245,240,230,0.4); }
.hc-field input:focus, .hc-field textarea:focus, .hc-field select:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(245,240,230,0.08);
}
.hc-foot {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(245,240,230,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hc-foot-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hc-foot-note::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.hc-submit, .home-contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  background: var(--orange);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.hc-submit:hover, .home-contact-form .wpcf7-submit:hover { background: var(--ember); }

/* CF7 response output — main feedback panel below the form. */
.home-contact-form .wpcf7-response-output {
  margin: 22px 0 0 !important;
  padding: 16px 22px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  color: var(--cream) !important;
  border: 1px solid rgba(245,240,230,0.16) !important;
}
.home-contact-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--orange) !important;
  background: rgba(237, 86, 0, 0.08);
}
.home-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.home-contact-form .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: rgba(237, 86, 0, 0.45) !important;
}
.home-contact-form .wpcf7 form.failed .wpcf7-response-output,
.home-contact-form .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c84a2a !important;
  color: #fbd9c8 !important;
}
.home-contact-form .wpcf7 form.spam .wpcf7-response-output {
  border-color: #c84a2a !important;
}

/* Per-field validation state — small italic-orange tip below the input. */
.home-contact-form .wpcf7-not-valid {
  border-color: var(--orange) !important;
  background: rgba(237, 86, 0, 0.08) !important;
}
.home-contact-form .wpcf7-not-valid-tip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin: 8px 4px 0;
}

/* Hide CF7's screen-reader response container's visible spacing. */
.home-contact-form .screen-reader-response {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit spinner — orange dot that pulses while AJAX request is in flight. */
.home-contact-form .wpcf7-spinner {
  margin: 0 0 0 12px;
  width: 18px;
  height: 18px;
  background-color: var(--orange);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.home-contact-form .wpcf7 form.submitting .wpcf7-spinner { opacity: 0.7; }
.home-contact-form .wpcf7 form.submitting .wpcf7-submit { opacity: 0.85; }


/* ============================================================
   Desktop fit-to-viewport scaling.
   Each section is locked to 100dvh on desktop (globals.css). The grid-heavy
   sections (services, events, filosofie) are intrinsically taller than one
   screen, so here we scale their tall elements off viewport height — card
   images cap their height with vh, section-head margins shrink — so the whole
   section fits one screen without clipping. Mirrors how the hero title scales.
   Scoped to desktop with enough height (≥700px) — matching the section lock in
   globals.css. Below that the lock is off and sections grow, so this scaling
   would only shrink content needlessly. The mobile rules below are untouched.
   ============================================================ */
@media (min-width: 901px) and (min-height: 700px) {
  /* Trim every locked section's vertical padding so the scaled content
     settles inside 100dvh on an 800px-tall laptop with headroom to spare —
     card titles can wrap to TWO lines without overflowing (the lock clips,
     so we must leave that buffer). Eases back up on taller screens. */
  .filosofie, .services, .events, .custom-cta, .home-contact { padding-top: clamp(20px, 3.5vh, 120px); padding-bottom: clamp(20px, 3.5vh, 140px); }
  /* Divider sections: pull the divider's own top padding + footprint in on
     desktop so it eats less of the locked height. The flame mark itself
     scales with viewport height too — its 40px width renders ~67px tall,
     which is pure chrome on a 768px laptop. */
  body.home > section:has(> .flame-divider) { padding-top: clamp(20px, 3vh, 72px); }
  .flame-divider { margin-bottom: clamp(12px, 1.6vh, 28px); }
  .flame-divider img { width: clamp(28px, 4.5vh, 40px); }

  /* Big section headings size off width only (vw) — on short laptops they
     keep desktop size and blow the vertical budget. Cap them with a vh term
     so they shrink with the viewport height, like the hero title does. */
  .filosofie-content h2 { font-size: clamp(44px, min(7vw, 9.5vh), 108px); margin: clamp(12px, 1.8vh, 22px) 0 clamp(18px, 2.8vh, 36px); }
  .events-head h2, .home-contact-inner h2 { font-size: clamp(38px, min(5.5vw, 7.5vh), 92px); }
  .custom-cta-inner h2 { font-size: clamp(40px, min(6vw, 8.5vh), 100px); }

  /* Contact form: its fixed padding and tall textarea are the form column's
     slack — scale both with viewport height so the section fits the lock. */
  .home-contact-form { padding-top: clamp(24px, 4.5vh, 48px); padding-bottom: clamp(24px, 4.5vh, 48px); }
  .home-contact-form textarea { height: clamp(80px, 14vh, 150px); min-height: 0; }

  /* Section heads: the big bottom margins are pure slack on a short viewport. */
  .services-head { margin-bottom: clamp(16px, 3vh, 100px); }
  .events-head { margin-bottom: clamp(10px, 1.7vh, 64px); }
  /* head paragraphs are secondary lines — keep their top margin tight. */
  .services-head h2, .events-head h2 { margin: 14px 0 0; }

  /* Card images carry most of the card height. Cap them off viewport height so
     the whole card (image + body, incl. a 2-line title) fits one screen,
     easing back up on tall viewports. Overrides the default aspect-ratio. */
  .services-grid .service-card-img { aspect-ratio: auto; height: clamp(170px, 30vh, 460px); }
  .events-grid .event-card-img { aspect-ratio: auto; height: clamp(85px, 15.5vh, 380px); }
  /* Card bodies: reserve room for a 2-line title and trim padding so the meta
     row never clips. */
  .services-grid .service-card-body { padding-top: clamp(16px, 2vh, 26px); }
  .events-grid .event-card-body { padding: clamp(16px, 2vh, 28px) 28px clamp(18px, 2.2vh, 32px); }
  .events-grid .event-card-body p { margin-bottom: clamp(8px, 1.2vh, 22px); }

  /* Filosofie portrait: cap its height so the two-column row fits. */
  .filosofie-media { aspect-ratio: auto; height: clamp(280px, 60vh, 640px); }

  /* Events foot ("alle events") margin trims on short screens. */
  .events-foot { margin-top: clamp(10px, 1.5vh, 60px); }
}

@media (max-width: 900px) {
  /* Mobile keeps the SAME locked-100dvh hero and the SAME cqh title system —
     no font overrides. Only two structural changes: the hero side padding
     tightens, and the two-column grid collapses to one column (the event
     widget is hidden, so the title column simply gets the full width and the
     cqh-sized title fills the screen exactly like on desktop). */
  body > section.hero { padding-left: 24px; padding-right: 24px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  /* "Volgend event" widget is hidden on mobile — the upcoming event is still
     surfaced lower on the page in the events section. */
  .hero-meta { display: none; }
  .filosofie-inner, .events-head, .events-grid, .home-contact-inner, .services-head, .services-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .events-grid { gap: 20px; }
  .filosofie, .services, .custom-cta, .events, .home-contact { padding: 80px 24px; }
  .home-contact-form { padding: 32px 24px; }
  .hc-field-row { grid-template-columns: 1fr; }
  .hc-foot { flex-direction: column; align-items: stretch; }
  .hc-submit { justify-content: center; }

  /* Flame background marks — desktop sizes/offsets overflow a phone
     viewport and sit off-screen. Scale down and pull them in-bounds. */
  .services::before { width: 160px; height: 160px; top: 40px; left: -50px; }
  .custom-cta::before { width: 300px; height: 300px; top: -30px; }
  .home-contact::before { width: 260px; height: 260px; top: -70px; right: -70px; }
}