/* ==========================================================================
   Symposium 2027 "Van mond tot mond" — page styles (template symposiumHomeTemplate)
   Scoped to .sym27 (page content) and body:has(.sym27) (header tweaks on this page only).
   The shared theme (main.min.css + custom.css) is not modified.
   Design reference: tasks/Webpagina symposium.pdf, tasks/chrome_I5Ys7iqkmy.png
   ========================================================================== */

.sym27 {
  --sym27-gold: #FDDA24;
  --sym27-ink: #101820;
  --sym27-blue: #00A3E0;          /* brand blue — decorative only (lines, dots) */
  --sym27-blue-text: #0077A8;     /* AA: 5.0:1 on white */
  --sym27-blue-on-light: #006A96; /* AA: 4.72:1 on light blue */
  --sym27-light-blue: #C8EAF5;
  --sym27-text: #1F2A33;          /* body copy: 14.6:1 on white */
  --sym27-fs: clamp(1.125rem, 1.03rem + .3vw, 1.3125rem);   /* 18 → 21px: slightly larger than theme 18px */
  --sym27-fs-sm: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);   /* 17 → 19px */
  --sym27-section-py: clamp(3.5rem, 8vw, 6.5rem);
  --sym27-ease: cubic-bezier(.22, .61, .36, 1);
  --sym27-ease-back: cubic-bezier(.34, 1.4, .64, 1);
  color: var(--sym27-text);
}
.sym27 p, .sym27 li { font-size: var(--sym27-fs); line-height: 1.65; }

/* Draft sections (no final content yet): hidden for visitors, shown for colleagues with ?full=1
   (html.sym27-full is set by an inline script in <head>, before first paint). */
html:not(.sym27-full) .sym27-countdown,
html:not(.sym27-full) .sym27-speakers,
html:not(.sym27-full) .sym27 .sym27-draft { display: none; }
/* Equal optical padding top/bottom in every block: no trailing margin after the last paragraph/list. */
.sym27 .wysiwyg-content > :last-child,
.sym27 .sym27-timeline__body > :last-child { margin-bottom: 0; }

/* The generic .content padding is dropped on this page: the hero starts right under the header. */
.main > .content:has(> .zones > .sym27) { padding-top: 0; padding-bottom: 0; }

.sym27-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;
}
.sym27 :focus-visible { outline: 3px solid var(--sym27-ink); outline-offset: 3px; border-radius: 4px; }
.sym27 .wysiwyg-content a:not(.btn) { color: var(--sym27-blue-text); text-decoration: underline; text-underline-offset: .15em; }
.sym27 .wysiwyg-content a:not(.btn):hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   Header on this page (tasks/chrome_I5Ys7iqkmy.png): gold starts under the nav row,
   the logo sits in a white circle and a white "speech bubble" tail drops into the gold.
   ========================================================================== */
body:has(.sym27) .header { --sym27-hdr-gold: 18px; background: #fff; }
body:has(.sym27) .header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: var(--sym27-hdr-gold); background: #FDDA24; pointer-events: none;
}
body:has(.sym27) .header .container::after { display: none; } /* theme separator line */
body:has(.sym27) .header .logo-link::before {
  /* Deep circle: chord at the logo's bottom edge ≈ 1.31 × logo width → ~15% white margin on both sides of
     "MONDGEZONDHEID" at every breakpoint, and the circle never touches the viewport edge (logo is 20–72px from it). */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%;
  width: 145%; aspect-ratio: 1; transform: translateX(-50%);
  background: #fff; border-radius: 50%;
}
@media (min-width: 576px)  { body:has(.sym27) .header { --sym27-hdr-gold: 16px; } }
@media (min-width: 992px)  {
  body:has(.sym27) .header { --sym27-hdr-gold: 26px; --sym27-hdr-container: 960px; }
  body:has(.sym27) .header::before {          /* speech-bubble tail */
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    bottom: calc(var(--sym27-hdr-gold) - 52px);
    right: calc((100% - var(--sym27-hdr-container)) / 2 + 190px);
    width: 0; height: 0;
    border-left: 28px solid transparent; border-right: 28px solid transparent; border-top: 52px solid #fff;
  }
}
@media (min-width: 1200px) { body:has(.sym27) .header { --sym27-hdr-gold: 24px; --sym27-hdr-container: 1140px; } }
@media (min-width: 1400px) { body:has(.sym27) .header { --sym27-hdr-gold: 37px; --sym27-hdr-container: 1320px; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
/* All CTAs are the theme's own buttons (Sofia Pro Soft 700, padding 22/78/40, radius 34px, "pijltje" arrow + its hover),
   so the label sits exactly where it sits on every other page of the site. Only fills are added here. */
/* "Schrijf je in!": "btn btn-light" — transparent by default (made for gold sections), the intro is white → gold fill. */
.sym27 .btn.btn-light.sym27-btn-register {
  --bs-btn-bg: #FDDA24; --bs-btn-border-color: #FDDA24;
  --bs-btn-hover-bg: #FDDA24; --bs-btn-hover-border-color: #FDDA24;
  --bs-btn-active-bg: #FDDA24; --bs-btn-active-border-color: #FDDA24;
}
/* "Dien iets in!": "btn btn-light btn-arrow-black" — same geometry as "Schrijf je in!", but a secondary action:
   outlined in ink (2px look via an inset ring, so the box stays the theme's), white fill on hover. Ink on light blue 13.6:1. */
.sym27 .btn.btn-light.sym27-btn-call {
  --bs-btn-bg: transparent; --bs-btn-border-color: var(--sym27-ink);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--sym27-ink);
  --bs-btn-active-bg: #fff; --bs-btn-active-border-color: var(--sym27-ink);
  box-shadow: inset 0 0 0 1px var(--sym27-ink);
}
/* "Schrijf je in!" on gold (hero, band) and floating: theme "btn btn-dark" (black fill, white label + arrow, 21:1). */

/* Hover effects on top of the theme styles: lift + shadow, and a light sheen sweeping across the pill.
   The sheen is a background-image (the theme needs ::before/::after for its arrow): 300% wide, the band (40–60%) is
   off the left edge at 100% and off the right edge at 0%. */
.sym27 .sym27-btn-register,
.sym27 .sym27-btn-call {
  background-image: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
  transition: transform .35s var(--sym27-ease-back), box-shadow .35s var(--sym27-ease), background-position .8s var(--sym27-ease),
              background-color .3s var(--sym27-ease), border-color .3s var(--sym27-ease);
}
.sym27 .sym27-btn-register:hover, .sym27 .sym27-btn-register:focus-visible,
.sym27 .sym27-btn-call:hover, .sym27 .sym27-btn-call:focus-visible {
  transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16, 24, 32, .18); background-position: 0 0;
}
.sym27 .btn.btn-light.sym27-btn-call:hover, .sym27 .btn.btn-light.sym27-btn-call:focus-visible { box-shadow: inset 0 0 0 1px var(--sym27-ink), 0 10px 24px rgba(16, 24, 32, .18); }

/* ==========================================================================
   Registration CTA (registerCta.tpl) — button + accreditation sticker + redirect/deadline note
   ========================================================================== */
/* Block flow, not flex: the button keeps the theme's own display (inline-block), sticker and note stack under it. */
.sym27-register { --sym27-register-gap: 1rem; text-align: center; }
.sym27-register > * + * { margin-top: var(--sym27-register-gap); }
.sym27 .sym27-register > .sym27-perk { display: flex; width: fit-content; margin-inline: auto; }
.sym27 .sym27-register > .sym27-register__note { margin-inline: auto; }
.sym27-register--expect { text-align: left; margin-top: 2.25rem; }
.sym27 .sym27-register--expect > .sym27-perk, .sym27 .sym27-register--expect > .sym27-register__note { margin-inline: 0; }
/* Accreditation "sticker": white pill with a slight tilt, like the mouth cut-outs (white border, soft shadow). */
.sym27 .sym27-perk {
  display: inline-flex; align-items: center; gap: .625rem; margin-bottom: 0;
  padding: .5rem 1.25rem .5rem .625rem; border-radius: 999px;
  background: #fff; color: var(--sym27-ink);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.25; text-align: left;
  box-shadow: 0 8px 18px rgba(16, 24, 32, .14); rotate: -2deg;
}
.sym27-perk__icon { flex: none; width: 1.75em; height: 1.75em; color: var(--sym27-blue-text); } /* 5.0:1 on white */
.sym27-perk__text > * { display: block; }        /* two designed lines at every width: never a ragged wrap */
.sym27-perk__text strong { font-weight: 700; }
.sym27-perk__text span { font-size: .875em; color: #3D4A55; }
.sym27-motion .sym27 .is-in .sym27-perk,
.sym27-motion .sym27 .is-in.sym27-perk { animation: sym27-stick .8s var(--sym27-ease-back) .45s both; }
@keyframes sym27-stick { from { opacity: 0; scale: .6; rotate: -14deg; } }
.sym27 .sym27-register__note { margin-bottom: 0; max-width: 34ch; font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.45; color: #3D4A55; } /* 9.2:1 on white, 6.7:1 on gold */
.sym27 .sym27-register__note strong { color: var(--sym27-ink); }

/* Floating "Schrijf je in!" (symposium-2027.js adds .is-visible while no other registration button is on screen).
   Desktop: pill bottom-right. Phone: full-width bar with safe-area padding. Below the cookie banner and dialogs. */
.sym27-sticky {
  position: fixed; z-index: 1020; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(1.5rem);
  transition: opacity .35s var(--sym27-ease), transform .45s var(--sym27-ease-back), visibility 0s linear .45s;
}
.sym27-sticky.is-visible { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.sym27-sticky .sym27-btn-register { box-shadow: 0 12px 30px rgba(16, 24, 32, .3); }
@media (max-width: 575.98px) {
  .sym27-sticky {
    left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 20px rgba(16, 24, 32, .12);
  }
  .sym27-sticky .sym27-btn-register { box-shadow: none; }
}

/* "Lees bio": the site's text link (theme "btn btn-link", as "Lees artikel": gold arrow that stretches right on hover).
   Same arrow motion when the pointer is anywhere on the speaker card (the whole card opens the bio). */
/* Optical centring on the card axis: btn-link keeps 13px empty after its arrow (room for the hover stretch) → offset it. */
.sym27 .btn.btn-link.sym27-speaker__more { margin-left: 13px; }
.sym27 .sym27-speaker__card:hover .btn.btn-link.sym27-speaker__more::before { width: 30px; right: 0; }
.sym27 .sym27-speaker__card:hover .btn.btn-link.sym27-speaker__more::after { right: 0; }

/* ==========================================================================
   Hero — typographic grid + mouths
   ========================================================================== */
.sym27-hero {
  /* grid ≈ 16.5em wide incl. gaps. Phones/tablets: full width (÷16.8, up to 3.5rem).
     ≥992px: ≈ 60% of the viewport (tasks/chrome_yXuojKWT7b.png) — 100vw ÷ 27.5, up to 3.75rem (≈ 52% at 1920, CTA still on screen at 1080). */
  --fs: max(1.25rem, min(3.5rem, calc((100vw - 2.5rem) / 16.8)));
  --sym27-hero-pb: calc(var(--fs) * 2.7);           /* under the grid: room for the lower mouth (hangs ≈ 30% of the grid) */
  position: relative; z-index: 2; background: var(--sym27-gold); overflow-x: clip; /* mouths may bleed down, never sideways */
}
.sym27-hero__stage {
  position: relative;
  padding: calc(var(--fs) * 2.1) 1.25rem var(--sym27-hero-pb);
  display: flex; justify-content: center;
}
/* optical balance: (upper mouth + text) sits centred in the visible gold, the lower mouth hangs out */
@media (min-width: 576px) {
  .sym27-hero__stage { padding-top: calc(var(--fs) * 2.1 + 1.2rem); }
}
/* ≥992px the lower mouth sits right of the centred facts → little vertical clearance needed */
@media (min-width: 992px) {
  .sym27-hero { --fs: min(3.75rem, calc(100vw / 27.5)); --sym27-hero-pb: calc(var(--fs) * 1.15); }
  .sym27-hero__stage { padding-top: calc(var(--fs) * 1.7 + 1.25rem); }  /* upper mouth ↔ gold top ≈ facts ↔ gold bottom */
  .sym27-hero__facts { padding-bottom: 2.5rem; }
  /* lower mouth a touch higher: its whole box ends above the centred H1 (clear air, no overlap) */
  .sym27-hero .sym27-mouth--b { bottom: -10%; }
}
/* ≥1200px the grid is ~80% wide → room to move the lower mouth further out without touching the viewport edge */
/* 1200–1399px: the header's gold strip is 13px shorter (24 vs 37px) → same air above the upper mouth as at ≥1400 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .sym27-hero__stage { padding-top: calc(var(--fs) * 1.7 + 2.0625rem); }
}
.sym27-hero__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, auto);
  column-gap: .32em; row-gap: .06em;
  font-size: var(--fs); font-weight: 700; line-height: 1.08; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
  color: #fff;
}
.sym27-w { display: block; text-align: center; }
.sym27-w::before { content: attr(data-t); display: inline-block; }
.sym27-w--ink { color: var(--sym27-ink); }
.sym27-w--date { color: var(--sym27-ink); font-size: .74em; align-self: center; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.sym27-mouth {
  position: absolute; z-index: 2; height: auto; pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(16, 24, 32, .18));
  will-change: transform;
}
/* mirrored (tasks/chrome_yXuojKWT7b.png): upper mouth's corner points left, lower mouth's corner points right */
.sym27-mouth--a { width: 40%; left: -9%; top: -19%; --rot: 6deg; --flip: -1; }
.sym27-mouth--b { width: 36%; right: -7%; bottom: -27%; --rot: -4deg; --flip: 1; }
.sym27-mouth { transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--rot)) scaleX(var(--flip, 1)); }
@media (max-width: 575.98px) {
  .sym27-hero__stage { padding-top: calc(var(--fs) * 3.6); }
  .sym27-mouth--a { width: 36%; left: -3%; top: -30%; }
  .sym27-mouth--b { width: 33%; right: -3%; bottom: -30%; }
}
/* tablets: the grid is full width → pull the mouths in so the viewport edge never clips them */
@media (min-width: 576px) and (max-width: 991.98px) {
  .sym27-mouth--a { left: -3%; }
  .sym27-mouth--b { right: -3%; }
}

/* Facts under the poster: visible H1 (what / when / where) + first CTA + accreditation sticker, on one centred axis. */
.sym27-hero__facts {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  padding: 0 1.25rem clamp(2.25rem, 5vw, 3.25rem); text-align: center;
}
.sym27 .sym27-hero__title {
  margin: 0; color: var(--sym27-ink); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.2; text-wrap: balance;
}
.sym27 .sym27-hero__when { display: block; margin-top: .35rem; font-size: var(--sym27-fs-sm); font-weight: 400; } /* ink on gold 12.98:1 */
.sym27-hero .sym27-register { --sym27-register-gap: 1.125rem; }

/* Motion (only when html.sym27-motion is set: JS-capable + no reduced-motion preference) */
.sym27-motion .sym27-w { opacity: 0; transform: translateY(.35em); transition: opacity .6s var(--sym27-ease), transform .7s var(--sym27-ease); transition-delay: calc(var(--d) * 70ms + 150ms); }
.sym27-motion .sym27-hero.is-in .sym27-w { opacity: 1; transform: none; }
.sym27-motion .sym27-mouth { opacity: 0; transition: opacity .7s var(--sym27-ease), translate 1s var(--sym27-ease-back); }
.sym27-motion .sym27-mouth--a { translate: -12% -10%; }
.sym27-motion .sym27-mouth--b { translate: 12% 10%; transition-delay: .55s; }
.sym27-motion .sym27-hero.is-in .sym27-mouth { opacity: 1; translate: 0 0; }
/* "word of mouth" wave: dark ink travels diagonally from mouth A to mouth B, then rests */
.sym27-motion .sym27-hero.is-live .sym27-w:not(.sym27-w--ink):not(.sym27-w--date):not(.sym27-w--void) {
  animation: sym27-wave 7.5s var(--sym27-ease) infinite;
  animation-delay: calc(var(--d) * 110ms + 1.2s);
}
.sym27-motion .sym27-hero.is-live .sym27-mouth--a { animation: sym27-talk 7.5s ease-in-out infinite 1s; }
.sym27-motion .sym27-hero.is-live .sym27-mouth--b { animation: sym27-talk 7.5s ease-in-out infinite 2s; }
@keyframes sym27-wave {
  0%, 9%, 100% { color: #fff; }
  4% { color: var(--sym27-ink); }
}
@keyframes sym27-talk {
  0%, 12%, 100% { scale: 1; }
  3% { scale: 1.04 .96; }
  6% { scale: .98 1.03; }
  9% { scale: 1.02 .99; }
}

/* ==========================================================================
   Intro
   ========================================================================== */
.sym27-intro { position: relative; z-index: 1; padding-top: clamp(3.5rem, 9vw, 6rem); }
.sym27-intro__inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.sym27-intro__text h2,
.sym27-intro__text h3,
.sym27-intro__text h5 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin-bottom: 1.5rem; color: var(--sym27-ink); }
.sym27-intro__cta { margin: 2.25rem 0 0; }

/* Registration band after the speakers (registerBand.tpl): gold bookend to the hero */
.sym27-band { background: var(--sym27-gold); padding-block: var(--sym27-section-py); }
.sym27-band__inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.sym27 .sym27-band__title { margin: 0; color: var(--sym27-ink); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.sym27 .sym27-band__when { margin: .75rem 0 2rem; color: var(--sym27-ink); }

/* ==========================================================================
   Countdown
   ========================================================================== */
.sym27-countdown { padding-top: var(--sym27-section-py); }
.sym27-countdown__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.75rem; align-items: center;
  max-width: 64rem; margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem);
  background: var(--sym27-ink); color: #fff; border-radius: 34px;
}
.sym27-countdown__panel::before {               /* slow gold glow */
  content: ""; position: absolute; z-index: -1; width: 46rem; height: 46rem; right: -18rem; top: -26rem;
  background: radial-gradient(closest-side, rgba(253, 218, 36, .26), transparent 70%);
  animation: sym27-glow 12s ease-in-out infinite alternate;
}
@keyframes sym27-glow { to { transform: translate(-10rem, 8rem) scale(1.15); } }
@media (min-width: 992px) { .sym27-countdown__panel { grid-template-columns: minmax(14rem, 1fr) 2.2fr; } }
.sym27 .sym27-countdown__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); margin: 0 0 .5rem; line-height: 1.1; }
.sym27 .sym27-countdown__date { margin: 0; color: #E9EDF0; font-size: var(--sym27-fs-sm); }
.sym27-countdown__units { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1.5vw, 1rem); }
@media (max-width: 575.98px) { .sym27-countdown__units { grid-template-columns: repeat(2, 1fr); } }
.sym27-countdown__unit {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: clamp(.75rem, 2vw, 1.25rem) .25rem;
  border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.sym27-countdown__value {
  display: block; overflow: hidden;
  font-size: clamp(2rem, 1.2rem + 4vw, 4rem); font-weight: 700; line-height: 1;
  color: var(--sym27-gold);                     /* 12.98:1 on ink */
  font-variant-numeric: tabular-nums;
}
.sym27-countdown__value.is-tick { animation: sym27-tick .45s var(--sym27-ease); }
@keyframes sym27-tick { from { transform: translateY(-.45em); opacity: 0; } to { transform: none; opacity: 1; } }
.sym27 .sym27-countdown__label { font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); color: #E9EDF0; text-transform: uppercase; letter-spacing: .08em; line-height: 1.2; }
.sym27 .sym27-countdown__done { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: var(--sym27-gold); font-weight: 700; }

/* ==========================================================================
   Expect
   ========================================================================== */
.sym27-expect { padding-top: var(--sym27-section-py); overflow: hidden; }
.sym27-divider { margin: 0 auto var(--sym27-section-py); max-width: 64rem; border: 0; border-top: 2px solid var(--sym27-gold); opacity: 1; transform-origin: center; }
.sym27-expect__text h2,
.sym27-expect__text h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); line-height: 1.25; margin-bottom: 1.5rem; color: var(--sym27-ink); }
.sym27-expect__text ul { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.sym27 .sym27-expect__text .wysiwyg-content ul li::before { background: var(--sym27-gold); height: 3px; top: .85em; }
.sym27-expect__text li strong { font-weight: 700; color: var(--sym27-ink); }

/* CSS visual: gold half-stadium (left side = perfect semicircle) that bleeds to the viewport's right edge,
   with the mouth sticker overlapping its top-left — geometry taken from tasks/afbeelding webpagina symposium.png. */
.sym27-expect__visual { --sym27-container: 100vw; }
@media (min-width: 576px)  { .sym27-expect__visual { --sym27-container: 540px; } }
@media (min-width: 768px)  { .sym27-expect__visual { --sym27-container: 720px; } }
@media (min-width: 992px)  { .sym27-expect__visual { --sym27-container: 960px; } }
@media (min-width: 1200px) { .sym27-expect__visual { --sym27-container: 1140px; } }
@media (min-width: 1400px) { .sym27-expect__visual { --sym27-container: 1320px; } }
.sym27-sticker {
  /* distance from the column's content box to the viewport edge = half the free space + container & column gutters */
  --sym27-bleed: calc((100vw - var(--sym27-container)) / 2 + 1.5rem);
  position: relative; container-type: inline-size;
  aspect-ratio: 2000 / 1580; margin-top: 2.5rem;
}
@media (min-width: 992px) { .sym27-sticker { margin-top: 0; margin-left: 4%; } }
.sym27-sticker__blob {
  position: absolute; top: 13cqw; bottom: 0; left: 22cqw; right: calc(var(--sym27-bleed) * -1);
  background: var(--sym27-gold); border-radius: 999px 0 0 999px;
  transform-origin: right center;
}
.sym27-sticker__mouth {
  position: absolute; z-index: 1; left: 15.5cqw; top: 7cqw; width: 53cqw; height: auto;
  filter: drop-shadow(0 14px 22px rgba(16, 24, 32, .2));
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  will-change: transform;
}
.sym27-motion .sym27 [data-sym27-reveal="sticker"] { opacity: 1; transform: none; }
.sym27-motion .sym27-sticker .sym27-sticker__blob { transform: scaleX(0); transition: transform 1.2s var(--sym27-ease); }
.sym27-motion .sym27-sticker .sym27-sticker__mouth { opacity: 0; scale: .7; rotate: -14deg; transition: opacity .6s var(--sym27-ease) .45s, scale .9s var(--sym27-ease-back) .45s, rotate .9s var(--sym27-ease-back) .45s; }
.sym27-motion .sym27-sticker.is-in .sym27-sticker__blob { transform: none; }
.sym27-motion .sym27-sticker.is-in .sym27-sticker__mouth { opacity: 1; scale: 1; rotate: 0deg; }
.sym27-motion .sym27-sticker.is-live .sym27-sticker__mouth { animation: sym27-talk 7.5s ease-in-out infinite 1.5s, sym27-float 6s ease-in-out infinite; }
.sym27-motion [data-sym27-loop].is-paused,
.sym27-motion [data-sym27-loop].is-paused * { animation-play-state: paused !important; }
@keyframes sym27-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ==========================================================================
   Programme (reuses theme .single-timeline-* rules)
   ========================================================================== */
.sym27-programme { padding-block: var(--sym27-section-py); }
.sym27 .sym27-section-title { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin-bottom: clamp(2rem, 4vw, 3rem); color: var(--sym27-ink); }
.sym27-timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 60rem; }
.sym27 .single-timeline-area .timeline-date p { font-size: 1rem; color: var(--sym27-ink); font-weight: 700; letter-spacing: .06em; }
.sym27 .single-timeline-area .timeline-date::before { width: 15px; height: 15px; margin-top: -7.5px; right: 24px; background: var(--sym27-gold); box-shadow: 0 0 0 5px rgba(253, 218, 36, .25); }
.sym27 .single-timeline-area .single-timeline-content {
  background: #fff; border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem);
  transition: box-shadow .5s var(--sym27-ease), transform .5s var(--sym27-ease);
}
.sym27 .single-timeline-area .single-timeline-content:hover { box-shadow: 0 .5rem 1.75rem rgba(16, 24, 32, .12); transform: translateY(-3px); }
.sym27 .sym27-timeline__title { color: var(--sym27-blue-text); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); margin: .25rem 0 1rem; line-height: 1.2; }
.sym27 .sym27-timeline__body ul { list-style: none; padding: 0; margin: 0; }
.sym27 .sym27-timeline__body li { font-size: var(--sym27-fs-sm); }
.sym27 .sym27-timeline__body li + li { margin-top: .4rem; }
.sym27 .sym27-timeline__body p:empty,
.sym27 .sym27-timeline__body p:has(> br:only-child) { display: none; }
.sym27 .single-timeline-area { position: relative; }
/* air between the gold dot (+5px halo) and the card: theme leaves 4px → 26px */
@media (min-width: 576px) { .sym27 .single-timeline-area { padding-left: 202px; } }
@media (max-width: 575.98px) {
  .sym27 .single-timeline-area { padding-left: 2.5rem; }  /* ≈20px from the dot */
  .sym27 .single-timeline-area .timeline-date { position: static; width: auto; height: auto; justify-content: flex-start; padding: 1rem 0 0; }
  .sym27 .single-timeline-area .timeline-date::after { right: auto; left: .55rem; top: 0; height: 100%; }
  .sym27 .single-timeline-area .timeline-date::before { right: auto; left: calc(.55rem - 6px); top: 1.75rem; margin-top: 0; }
}

/* ==========================================================================
   Speakers
   ========================================================================== */
.sym27-speakers { padding-block: 0 var(--sym27-section-py); }
.sym27-speakers__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.sym27-speaker__card { position: relative; height: 100%; text-align: center; }
.sym27-speaker__photo {
  position: relative; aspect-ratio: 1; max-width: 15rem; margin: 0 auto calc(min(100%, 15rem) * .08 + 1rem); /* disc overhang ≈ 8% of the photo (rest 7%, hover 8.5%) + 1rem */
  border-radius: 50%; isolation: isolate;
}
.sym27-speaker__photo::before {               /* gold disc offset behind the portrait */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--sym27-gold); transform: translateY(7%); /* horizontally symmetric 'shadow' disc */
  transition: transform .6s var(--sym27-ease-back);
}
.sym27-speaker__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 5px solid #fff; background: #F0F1F2;
  filter: grayscale(1) contrast(1.05);
  transition: filter .6s var(--sym27-ease), transform .6s var(--sym27-ease);
}
.sym27-speaker__card:hover .sym27-speaker__photo img,
.sym27-speaker__card:focus-within .sym27-speaker__photo img { filter: none; transform: scale(1.03); }
.sym27-speaker__card:hover .sym27-speaker__photo::before,
.sym27-speaker__card:focus-within .sym27-speaker__photo::before { transform: translateY(6%) scale(1.05); } /* grows, barely drops: stays clear of the name */
.sym27 .sym27-speaker__name { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; margin: 0 0 .35rem; color: var(--sym27-ink); }
.sym27 .sym27-speaker__role { font-size: var(--sym27-fs-sm); color: #3D4A55; margin: 0 0 .75rem; line-height: 1.45; }
/* Whole card clickable: symposium-2027.js opens the bio on a click anywhere on the card (the theme's btn-link needs
   ::before/::after for its arrow, so no stretched-pseudo overlay). Keyboard users use the button itself. */
.sym27-speaker__card:has([data-sym27-dialog-open]) { cursor: pointer; }
.sym27-speaker__card { padding-bottom: .25rem; }

.sym27-dialog {
  width: min(46rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100dvh - 2rem));
  padding: 0; border: 0; border-radius: 24px; color: var(--sym27-text);
  overflow: hidden;                       /* the dialog itself never scrolls — the bio does, inside the card */
  box-shadow: 0 30px 80px rgba(16, 24, 32, .35);
}
.sym27-dialog[open] { display: flex; flex-direction: column; }
.sym27-dialog::backdrop { background: rgba(16, 24, 32, .6); backdrop-filter: blur(3px); }
.sym27-dialog__inner {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem) 0;
}
.sym27-dialog__head { flex: none; display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; padding-right: 2.5rem; }
.sym27-dialog__photo { width: clamp(5rem, 18vw, 7.5rem); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--sym27-gold); }
.sym27-dialog__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -1rem 0 -.75rem; padding: .25rem 1rem clamp(1.5rem, 4vw, 2.75rem) .75rem; /* scrollbar in the card's right padding; room for the focus ring */
  scrollbar-width: thin; scrollbar-color: var(--sym27-gold) #F0F1F2;
  border-radius: 0 0 0 4px;
}
.sym27-dialog__scroll::-webkit-scrollbar { width: 8px; }
.sym27-dialog__scroll::-webkit-scrollbar-track { background: #F0F1F2; border-radius: 8px; margin-bottom: 1.25rem; }
.sym27-dialog__scroll::-webkit-scrollbar-thumb { background: var(--sym27-gold); border-radius: 8px; }
.sym27-dialog__scroll:focus-visible { outline: 2px solid var(--sym27-ink); outline-offset: -2px; border-radius: 12px; }
/* soft fade at the bottom while there is more to read (JS toggles .is-scrollable / .is-end) */
.sym27-dialog__scroll.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
}
.sym27 .sym27-dialog__name { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin: 0 0 .25rem; color: var(--sym27-ink); line-height: 1.15; }
.sym27 .sym27-dialog__role { margin: 0; font-size: var(--sym27-fs-sm); color: #3D4A55; }
.sym27-dialog__close {
  position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: #F0F1F2; color: var(--sym27-ink);
  font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background .2s;
  display: inline-flex; align-items: center; justify-content: center; padding: 2px 0 0; /* optical centre of × */
}
.sym27-dialog__close:hover { background: var(--sym27-gold); }
html:has(.sym27-dialog[open]) { overflow: hidden; }
.sym27-motion .sym27-dialog[open] { animation: sym27-dialog-in .45s var(--sym27-ease-back); }
.sym27-motion .sym27-dialog[open]::backdrop { animation: sym27-fade .3s ease; }
@keyframes sym27-dialog-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes sym27-fade { from { opacity: 0; } }

/* ==========================================================================
   Call for projects
   ========================================================================== */
.sym27-call { background: var(--sym27-light-blue); padding-block: var(--sym27-section-py); overflow: hidden; }
.sym27 .sym27-call__title { color: var(--sym27-blue-on-light); text-transform: uppercase; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); margin-bottom: 1.25rem; }
.sym27-call__inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.sym27-call__text p { color: var(--sym27-ink); }
.sym27 .sym27-call__cta { margin: 2.25rem 0 0; }

/* ==========================================================================
   FAQ ("Veelgestelde vragen"): native <details> accordion, white section between the call band and the location.
   ========================================================================== */
.sym27-faq { padding-block: var(--sym27-section-py); }
.sym27-faq__inner { max-width: 46rem; margin: 0 auto; }
.sym27 .sym27-faq__title { text-align: center; color: var(--sym27-ink); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); margin-bottom: 2rem; }
.sym27-faq__item { border-bottom: 1px solid rgba(16, 24, 32, .18); }
.sym27-faq__item:first-child { border-top: 1px solid rgba(16, 24, 32, .18); }
.sym27-faq__q {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 1.15rem 3rem 1.15rem 0; color: var(--sym27-ink); font-weight: 700; font-size: var(--sym27-fs); line-height: 1.4;
  transition: color .25s var(--sym27-ease);
}
.sym27-faq__q::-webkit-details-marker { display: none; }
/* +/− marker: gold disc, the vertical bar collapses when the item is open */
.sym27-faq__q::before, .sym27-faq__q::after {
  content: ""; position: absolute; top: 50%; right: .9rem; width: 14px; height: 2px; margin-top: -1px;
  background: var(--sym27-ink); border-radius: 1px; transition: transform .3s var(--sym27-ease);
}
.sym27-faq__q::after { transform: rotate(90deg); }
.sym27-faq__item[open] > .sym27-faq__q::after { transform: rotate(0deg); }
.sym27-faq__q { background: radial-gradient(circle at calc(100% - .9rem - 7px) 50%, var(--sym27-gold) 0 1.15rem, transparent calc(1.15rem + .5px)) no-repeat; }
.sym27-faq__q:hover, .sym27-faq__q:focus-visible { color: var(--sym27-blue-text); }
.sym27-faq__a { padding: 0 3rem 1.25rem 0; }
.sym27-faq__a p { margin: 0 0 .65rem; }
.sym27-faq__a p:last-child { margin-bottom: 0; }
.sym27-motion .sym27-faq__item[open] > .sym27-faq__a { animation: sym27-faq-open .35s var(--sym27-ease) both; }
@keyframes sym27-faq-open { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Location
   ========================================================================== */
.sym27-location__map { min-height: 440px; }
.sym27-location__map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
.sym27-location__info { padding: clamp(2rem, 5vw, 3.75rem) clamp(1.25rem, 5vw, 4rem); }
.sym27 .sym27-location__info h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.15; margin-bottom: 1.5rem; color: var(--sym27-ink); }
.sym27 .sym27-location__info h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); margin: 1.75rem 0 .5rem; color: var(--sym27-ink); }
.sym27 .sym27-location__info p { font-size: var(--sym27-fs-sm); }
.sym27-location__contact { background: #F8F6F2; padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.sym27 .sym27-contact p {
  max-width: 24ch; margin: 0 auto;
  font-size: clamp(1.75rem, 1.05rem + 2.7vw, 3.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.005em;
  color: var(--sym27-ink); text-wrap: balance;
}
/* the link: underlined (WCAG 1.4.1) + gold highlighter that sweeps in after the words */
.sym27 .sym27-contact a:not(.btn) {
  color: var(--sym27-ink); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em;
  background: linear-gradient(var(--sym27-gold), var(--sym27-gold)) no-repeat 0 88% / 100% .42em;
  padding: 0 .08em; border-radius: .08em;
  transition: background-size .45s var(--sym27-ease), background-position .45s var(--sym27-ease);
}
.sym27 .sym27-contact a:not(.btn):hover,
.sym27 .sym27-contact a:not(.btn):focus-visible { background-size: 100% 100%; background-position: 0 100%; text-decoration-thickness: .06em; }
.sym27-word { display: inline-block; }
.sym27-motion .sym27 [data-sym27-reveal="words"] { opacity: 1; transform: none; }
.sym27-motion .sym27 [data-sym27-reveal="words"] .sym27-word {
  opacity: 0; transform: translateY(.55em) rotate(2deg);
  transition: opacity .6s var(--sym27-ease), transform .8s var(--sym27-ease-back);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.sym27-motion .sym27 [data-sym27-reveal="words"].is-in .sym27-word { opacity: 1; transform: none; }
.sym27-motion .sym27 [data-sym27-reveal="words"] a:not(.btn) { background-size: 0% .42em; transition-delay: 0s; }
.sym27-motion .sym27 [data-sym27-reveal="words"].is-in a:not(.btn) {
  background-size: 100% .42em;
  transition: background-size .7s var(--sym27-ease) calc(var(--sym27-words, 8) * 60ms + 250ms), background-position .45s var(--sym27-ease);
}
.sym27-motion .sym27 [data-sym27-reveal="words"].is-in a:not(.btn):hover,
.sym27-motion .sym27 [data-sym27-reveal="words"].is-in a:not(.btn):focus-visible { background-size: 100% 100%; transition-delay: 0s; }

/* ==========================================================================
   Scroll reveal (JS adds .is-in). Hidden state only exists when motion is enabled.
   ========================================================================== */
.sym27-motion .sym27 [data-sym27-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--sym27-ease), transform .9s var(--sym27-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.sym27-motion .sym27 [data-sym27-reveal="left"]  { transform: translateX(-32px); }
.sym27-motion .sym27 [data-sym27-reveal="right"] { transform: translateX(40px); }
.sym27-motion .sym27 [data-sym27-reveal="scale"] { transform: scale(.94); }
.sym27-motion .sym27 [data-sym27-reveal="line"]  { transform: scaleX(0); opacity: 1; transition-duration: 1.2s; }
.sym27-motion .sym27 [data-sym27-reveal].is-in { opacity: 1; transform: none; }
.sym27-motion .sym27 [data-sym27-stagger] li { opacity: 0; transform: translateX(-18px); transition: opacity .6s var(--sym27-ease), transform .7s var(--sym27-ease); transition-delay: calc(var(--i, 0) * 110ms + 200ms); }
.sym27-motion .sym27 [data-sym27-stagger].is-in li { opacity: 1; transform: none; }

/* ==========================================================================
   Reduced motion: no transforms, no loops
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sym27 *, .sym27 *::before, .sym27 *::after { animation: none !important; transition: none !important; }
  .sym27 .sym27-btn-register:hover, .sym27 .sym27-btn-register:focus-visible, .sym27 .sym27-btn-call:hover, .sym27 .sym27-btn-call:focus-visible,
  .sym27 .single-timeline-area .single-timeline-content:hover, .sym27-sticky { transform: none; }
}