/* ==========================================================================
   SAID DE ASSISTENT — STYLE 1: "GIGAGAAF CLASSIC UPGRADED" (PUNTJES OP DE I)
   Hosted at: saiddeassistent.steelhullstudio.nl | saiddeassistent.nl
   ========================================================================== */

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f8fc;
  --bg-tertiary: #e6f2ff;
  --bg-card: #ffffff;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;

  --said-green: #28a745;
  --said-green-dark: #1f8838;
  --said-orange: #ff6900;
  --said-gold: #fcb900;
  --said-red: #f00808;
  --said-blue: #0693e3;
  --said-navy: #002b5e;

  --border-light: rgba(15, 23, 42, 0.09);
  --shadow-soft: 0 12px 32px rgba(0, 43, 94, 0.08), 0 3px 8px rgba(0, 43, 94, 0.04);
  --shadow-hover: 0 22px 48px rgba(0, 43, 94, 0.16), 0 6px 16px rgba(255, 105, 0, 0.12);

  --radius-card: 22px;
  --radius-pill: 999px;

  --font-heading: 'Raleway', 'Montserrat', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  --topbar-h: 42px;
  --header-h: 82px;
  /* Hoogte van alles wat bovenin blijft staan (op mobiel alleen de header) */
  --sticky-h: calc(var(--topbar-h) + var(--header-h));
  --gutter: 24px;
  --container-max: 1260px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.22s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Rij met knoppen naast elkaar; op mobiel onder elkaar over de volle breedte */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   TOP GIGAGAAF ANNOUNCEMENT BAR (FIXED TOP)
   ========================================================================== */
.gigagaaf-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 1002;
  background: linear-gradient(90deg, #002b5e 0%, #004085 50%, #002b5e 100%);
  color: #ffffff;
  border-bottom: 2px solid var(--said-gold);
  font-size: 0.82rem;
  font-weight: 600;
}

.topbar-inner {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-badge {
  background: var(--said-red);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.68rem;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--said-gold);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.topbar-center a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-center a:hover {
  text-decoration: underline;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-bell-btn {
  background: linear-gradient(135deg, #ffe066, #fcb900);
  color: #002b5e;
  font-weight: 900;
  font-size: 0.76rem;
  padding: 4px 13px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(252, 185, 0, 0.4);
  transition: transform 0.18s ease;
}

.topbar-bell-btn:hover {
  transform: scale(1.06);
  background: #ffffff;
}

/* ==========================================================================
   MAIN STICKY HEADER (1-LINE PERFECT ALIGNMENT + PROTRUDING LOGO)
   ========================================================================== */
.site-header {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid #0f172a;
  box-shadow: 0 6px 24px rgba(0, 43, 94, 0.08);
}

.header-inner {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

/* Protruding Comic Logo (Just like original saiddeassistent.nl, neatly aligned) */
.brand-logo {
  flex-shrink: 0;
  position: relative;
  z-index: 15;
  display: block;
}

.brand-logo img {
  width: 162px;
  height: auto;
  transform: translateY(12px);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.22));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-logo:hover img {
  transform: translateY(12px) scale(1.06) rotate(-2deg);
}

/* Crisp Single-Line Main Nav */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-left: 4px;
  flex: 1;
  min-width: 0;
}

.nav-item,
.nav-item-dropdown {
  position: relative;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  white-space: nowrap;
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 3px;
  background: var(--said-orange);
  border-radius: 2px;
  transition: width 0.22s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--said-orange);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-pill-hot {
  background: var(--said-red);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: var(--radius-pill);
  line-height: 1.1;
}

/* Dropdown Menu for "Boek Saïd Als" */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 270px;
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid var(--said-navy);
  box-shadow: 0 18px 40px rgba(0, 43, 94, 0.18);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 100;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item,
.dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.83rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-link:hover {
  background: var(--bg-tertiary);
  color: var(--said-navy);
  transform: translateX(4px);
}

/* Header Right Actions (Socials + Single-Line Green Pill Button) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1680px) {
  .header-socials {
    display: none;
  }
}

.social-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.social-circle:hover {
  background: var(--said-navy);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-said-boeken,
.btn-book-header {
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.32);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid transparent;
}

.btn-said-boeken:hover,
.btn-book-header:hover {
  background: var(--said-green-dark);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px rgba(40, 167, 69, 0.42);
}

.mobile-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 2px solid var(--said-navy);
  color: var(--said-navy);
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
}

/* ==========================================================================
   HERO SECTION — PERFECTED TROPICAL GIGAGAAF COMPOSITION
   ========================================================================== */
.hero-classic {
  position: relative;
  min-height: 670px;
  background-image: url('../assets/media/SDA-header-bg-scaled-1.webp');
  background-position: center top;
  background-size: cover;
  border-bottom: 10px solid var(--said-red);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-top: 64px;
}

.hero-classic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 35, 75, 0.02) 0%, rgba(0, 22, 48, 0.45) 100%);
  pointer-events: none;
}

.hero-classic-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 390px 1fr 330px;
  align-items: flex-end;
  gap: 20px;
}

/* Left Pitch Card — Clean spacing below protruding header logo + side-by-side buttons */
.classic-hero-card-left {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 26px 26px 24px;
  box-shadow: 0 22px 48px rgba(0, 22, 50, 0.28);
  border: 3px solid var(--said-gold);
  margin-bottom: 38px;
  transform: rotate(-1deg);
}

.classic-badge-sbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--said-red);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.72rem;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.classic-hero-card-left h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.88rem;
  line-height: 1.14;
  color: var(--said-navy);
  margin-bottom: 12px;
}

.classic-hero-card-left h1 span {
  color: var(--said-orange);
}

.classic-hero-card-left p {
  font-size: 0.93rem;
  color: #334155;
  margin-bottom: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.classic-hero-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.btn-primary-classic {
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.82rem;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(40, 167, 69, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex: 1;
}

.btn-primary-classic:hover {
  background: var(--said-green-dark);
  transform: translateY(-2px);
}

.btn-secondary-classic {
  background: var(--said-navy);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.82rem;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex: 1;
}

.btn-secondary-classic:hover {
  background: var(--said-orange);
  transform: translateY(-2px);
}

/* Center Composition: Said Standing Proud Directly In Front of Giant Logo! */
.classic-hero-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 565px;
}

.classic-backdrop-logo {
  position: absolute;
  bottom: 115px;
  width: 112%;
  max-width: 560px;
  z-index: 1;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.38));
  animation: floatLogo 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.015); }
}

.classic-said-cutout {
  position: relative;
  z-index: 2;
  width: 495px;
  max-width: 100%;
  margin-bottom: -4px;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.48));
  transform-origin: bottom center;
  transition: transform 0.35s ease;
}

.classic-hero-center:hover .classic-said-cutout {
  transform: scale(1.025);
}

/* Right Interactive GigaGaaf Bell Card */
.classic-hero-card-right {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: 0 22px 48px rgba(0, 22, 50, 0.28);
  border: 3px solid var(--said-navy);
  margin-bottom: 38px;
  transform: rotate(1deg);
  text-align: center;
}

.bell-widget-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.12rem;
  color: var(--said-navy);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.bell-widget-sub {
  font-size: 0.83rem;
  color: #475569;
  margin-bottom: 14px;
  line-height: 1.45;
}

.desk-bell-btn {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066, #fcb900 60%, #d97706 100%);
  border: 4px solid var(--said-navy);
  box-shadow: 0 10px 25px rgba(252, 185, 0, 0.55), inset 0 4px 8px rgba(255, 255, 255, 0.85);
  font-size: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desk-bell-btn:hover {
  transform: scale(1.08);
}

.desk-bell-btn:active,
.desk-bell-btn.ringing {
  transform: scale(0.9) rotate(-10deg);
}

.quote-bubble-live {
  background: #eef6ff;
  border: 2px dashed var(--said-blue);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--said-navy);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

/* ==========================================================================
   SUBPAGE HERO BANNER (FOR SEO CONTENT PAGES)
   ========================================================================== */
.subpage-hero {
  position: relative;
  background-image: url('../assets/media/SDA-header-bg-scaled-1.webp');
  background-position: center center;
  background-size: cover;
  border-bottom: 8px solid var(--said-red);
  padding: 68px 0 58px;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

.subpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 43, 94, 0.72) 0%, rgba(0, 24, 56, 0.88) 100%);
}

.subpage-hero-inner,
.subpage-hero > .container {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.subpage-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--said-gold);
  margin-bottom: 18px;
}

.breadcrumb-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--said-gold);
  margin-bottom: 18px;
}

.breadcrumb-pills a {
  color: #ffffff;
}

.breadcrumb-pills a:hover {
  color: var(--said-gold);
}

.subpage-hero h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.subpage-hero h1 span {
  color: var(--said-gold);
}

.subpage-hero p {
  font-size: 1.12rem;
  color: #e2e8f0;
  max-width: 720px;
  margin: 0 auto;
}

/* ==========================================================================
   MARQUEE TICKER BAR
   ========================================================================== */
.catchphrase-ticker {
  background: var(--said-navy);
  color: #ffffff;
  padding: 13px 0;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.ticker-track {
  display: flex;
  gap: 42px;
  width: max-content;
  animation: tickerScroll 34s linear infinite;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ticker-item .hl {
  color: var(--said-gold);
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   SECTIONS & TYPOGRAPHY
   ========================================================================== */
.section-pad {
  padding: 90px 0;
}

.section-pad-alt {
  padding: 90px 0;
  background: var(--bg-secondary);
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  background: rgba(255, 105, 0, 0.12);
  color: var(--said-orange);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  line-height: 1.12;
  color: var(--said-navy);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 1.06rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   SERVICES GRID ("BOEK SAID ALS")
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

.service-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-hover);
  border-color: var(--said-navy);
}

.service-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border: 3px solid var(--said-gold);
}

.service-img-wrap {
  position: relative;
  height: 305px;
  overflow: hidden;
  background: #0f172a;
}

.service-card-wide .service-img-wrap {
  height: 100%;
  min-height: 340px;
}

.service-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.service-card:hover .service-img-wrap img {
  transform: scale(1.06);
}

.service-num-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0, 43, 94, 0.9);
  backdrop-filter: blur(8px);
  color: var(--said-gold);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.76rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(252, 185, 0, 0.5);
}

.service-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-body h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--said-navy);
  margin-bottom: 12px;
}

.service-body p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  margin-bottom: 18px;
  flex-grow: 1;
}

.service-perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.service-perks li {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  color: var(--said-navy);
}

.service-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.btn-book-role {
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.86rem;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-book-role:hover {
  background: var(--said-green-dark);
  transform: translateX(3px);
}

/* ==========================================================================
   FUN COMPARISON TABLE: "WERKDAG ZONDER SAÏD VS. MET SAÏD"
   ========================================================================== */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 30px;
  align-items: stretch;
}

.comp-box {
  border-radius: 24px;
  padding: 34px;
}

.comp-box.boring {
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  color: #475569;
}

.comp-box.gigagaaf {
  background: linear-gradient(135deg, #002b5e 0%, #004494 100%);
  color: #ffffff;
  border: 3px solid var(--said-gold);
  box-shadow: 0 22px 50px rgba(0, 43, 94, 0.25);
  position: relative;
}

.comp-badge-top {
  position: absolute;
  top: -15px;
  right: 24px;
  background: var(--said-gold);
  color: var(--said-navy);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.8rem;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.comp-box h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.comp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.comp-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 600;
}

/* ==========================================================================
   STORY SPLIT & HUMOR PILLARS
   ========================================================================== */
.story-split {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 52px;
  align-items: center;
}

.story-photo-stack {
  position: relative;
}

.story-main-photo {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  border: 4px solid var(--said-gold);
}

.story-quote-card {
  position: absolute;
  bottom: -24px;
  right: -20px;
  max-width: 330px;
  background: var(--said-navy);
  color: #ffffff;
  padding: 20px 24px;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  border: 2px solid var(--said-gold);
}

.story-quote-card p {
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--said-gold);
}

.story-quote-card span {
  font-size: 0.78rem;
  color: #cbd5e1;
}

.story-content h2 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  line-height: 1.15;
  color: var(--said-navy);
  margin-bottom: 18px;
}

.story-content p {
  color: var(--text-secondary);
  font-size: 1.02rem;
  margin-bottom: 16px;
}

.humor-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.humor-pillar {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.humor-pillar strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  color: var(--said-navy);
  margin-bottom: 6px;
}

.humor-pillar span {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   VIDEO SHOWCASE & YOUTUBE GRID
   ========================================================================== */
.video-showcase-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.native-video-card {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.native-video-player-wrap {
  position: relative;
  background: radial-gradient(circle at center, #0f172a 0%, #050911 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.native-video-player-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: object-fit 0.2s ease, transform 0.25s ease;
  display: block;
}

/* Zodra een filmpje afspeelt (of gepauzeerd is tijdens afspelen): 100% zichtbaar in het schermpje! */
.native-video-player-wrap.is-active-playback video {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: radial-gradient(circle at center, #0f172a 0%, #050911 100%);
}

/* Als bezoeker tijdens afspelen zelf wil wisselen naar vullend kader */
.native-video-player-wrap.is-active-playback.force-cover video {
  object-fit: cover !important;
}

.video-frame-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.video-expand-btn,
.video-fit-toggle-btn {
  pointer-events: auto;
  background: rgba(6, 15, 32, 0.82);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1.5px solid rgba(252, 185, 0, 0.75);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.video-expand-btn:hover,
.video-fit-toggle-btn:hover {
  background: var(--said-gold);
  color: var(--said-navy);
  border-color: #ffffff;
  transform: translateY(-1px) scale(1.03);
}

.lightbox-frame-wrap.is-native-video {
  aspect-ratio: auto;
  height: min(84vh, 820px);
  background: #050911;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-frame-wrap.is-native-video video {
  width: 100%;
  height: 100%;
  max-height: 84vh;
  object-fit: contain;
  background: #050911;
}

.native-video-meta {
  padding: 24px;
}

.native-video-meta h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--said-navy);
  margin-bottom: 8px;
}

.yt-channel-banner {
  background: linear-gradient(135deg, #002b5e 0%, #0f172a 100%);
  color: #ffffff;
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
  border: 2px solid var(--said-gold);
}

.yt-channel-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.yt-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--said-gold);
  object-fit: cover;
}

.yt-channel-info h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.yt-channel-info p {
  color: #cbd5e1;
  font-size: 0.9rem;
}

.btn-yt-sub {
  background: var(--said-red);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.86rem;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-yt-sub:hover {
  background: #c80000;
  transform: translateY(-2px);
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.yt-card {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
}

.yt-card:hover {
  transform: translateY(-6px);
  border-color: var(--said-orange);
}

.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.yt-card:hover .yt-thumb img {
  transform: scale(1.06);
}

.yt-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
}

.yt-play-btn span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--said-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 8px 20px rgba(240, 8, 8, 0.5);
  transition: transform 0.22s ease;
}

.yt-card:hover .yt-play-btn span {
  transform: scale(1.12);
}

.yt-card-body {
  padding: 18px;
}

.yt-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--said-orange);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.yt-card-body h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--said-navy);
}

/* "Veeg voor meer" onder de veegbare rijen; alleen zichtbaar op mobiel */
.swipe-hint {
  display: none;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==========================================================================
   STEUNACTIE SPOTLIGHT CARD
   ========================================================================== */
.steunactie-card {
  background: linear-gradient(135deg, #002b5e 0%, #091931 100%);
  color: #ffffff;
  border-radius: 28px;
  padding: 46px;
  border: 3px solid var(--said-gold);
  box-shadow: 0 24px 60px rgba(0, 25, 55, 0.3);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 42px;
  align-items: center;
}

.steunactie-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--said-green);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.steunactie-content h2 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 16px;
  color: #ffffff;
}

.steunactie-content h2 span {
  color: var(--said-gold);
}

.steunactie-content p {
  color: #e2e8f0;
  font-size: 1rem;
  margin-bottom: 16px;
}

.bigband-instruments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 26px;
}

.inst-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(252, 185, 0, 0.45);
  color: var(--said-gold);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
}

.steunactie-progress-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 24px;
}

.steun-poster-img {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.progress-stats .raised {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--said-gold);
}

.progress-bar-track {
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 18px;
}

.progress-bar-fill {
  height: 100%;
  width: 24%;
  background: linear-gradient(90deg, #28a745, #fcb900);
  border-radius: var(--radius-pill);
}

.supporters-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.84rem;
  color: #cbd5e1;
}

.supporter-row {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 10px;
}

.btn-steunactie {
  width: 100%;
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.96rem;
  text-transform: uppercase;
  padding: 15px 22px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(40, 167, 69, 0.4);
}

.btn-steunactie:hover {
  background: var(--said-green-dark);
  transform: translateY(-2px);
}

/* ==========================================================================
   3D FLIP-BOX SHIRTS
   ========================================================================== */
.shirts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.shirt-flip-container {
  perspective: 1200px;
  height: 440px;
}

.shirt-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

/* Alleen draaien bij hover op apparaten met een muis; op een telefoon blijft
   :hover na een tik hangen, dan draait het shirt niet meer terug. */
.shirt-flip-container.flipped .shirt-flip-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .shirt-flip-container:hover .shirt-flip-inner {
    transform: rotateY(180deg);
  }
}

.shirt-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shirt-front {
  background: #ffffff;
}

.shirt-img-box {
  height: 310px;
  background: #edf2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.shirt-img-box img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.shirt-info-bar {
  padding: 20px 22px;
  text-align: center;
  background: #ffffff;
}

.shirt-info-bar h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.18rem;
  color: var(--said-navy);
  margin-bottom: 4px;
}

.shirt-info-bar span {
  font-size: 0.82rem;
  color: var(--said-orange);
  font-weight: 800;
}

.shirt-back {
  background: linear-gradient(135deg, #002b5e 0%, #0693e3 100%);
  color: #ffffff;
  transform: rotateY(180deg);
  padding: 32px 26px;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.shirt-zoom-preview {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--said-gold);
  background: #000;
}

.btn-shirt-order {
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.88rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-shirt-order:hover {
  background: var(--said-gold);
  color: var(--said-navy);
}

/* ==========================================================================
   SOUNDBOARD & DICTIONARY CARDS (FOR GIGAGAAF-SOUNDBOARD PAGE & WIDGETS)
   ========================================================================== */
.soundboard-volume-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  max-width: 860px;
  margin: 0 auto 26px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #002b5e 0%, #003e85 100%);
  border: 3px solid var(--said-gold);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 43, 94, 0.22);
  color: #ffffff;
}

.sb-vol-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 260px;
}

.sb-vol-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 2px solid rgba(252, 185, 0, 0.65);
  border-radius: 12px;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.sb-vol-btn:hover {
  background: rgba(252, 185, 0, 0.24);
  border-color: var(--said-gold);
}

.sb-vol-btn.is-muted {
  background: #dc2626;
  border-color: #fca5a5;
}

.sb-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.sb-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 240px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
}

.sb-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--said-gold);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.sb-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.sb-volume-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--said-gold);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.sb-volume-pct {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.98rem;
  color: var(--said-gold);
  min-width: 48px;
}

.sb-vol-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-preset-btn,
.sb-stop-btn {
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sb-preset-btn:hover,
.sb-preset-btn.is-active {
  background: var(--said-gold);
  color: var(--said-navy);
  border-color: var(--said-gold);
}

.sb-stop-btn {
  background: rgba(240, 8, 8, 0.85);
  border-color: #fca5a5;
}

.sb-stop-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.soundboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sound-pad-btn {
  background: #ffffff;
  border: 3px solid var(--said-navy);
  border-radius: 22px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 10px 0 var(--said-navy), 0 16px 32px rgba(0, 43, 94, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sound-pad-btn:hover {
  border-color: var(--said-orange);
  transform: translateY(-3px);
}

.sound-pad-btn:active {
  transform: translateY(6px);
  box-shadow: 0 4px 0 var(--said-navy);
}

.sound-pad-emoji {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe066, #fcb900);
  border: 3px solid var(--said-navy);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sound-pad-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--said-navy);
  text-transform: uppercase;
}

.sound-pad-quote {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Live-citaat boven het soundboard blijft in beeld terwijl je langs de knoppen scrolt */
.soundboard-live-quote {
  position: sticky;
  top: calc(var(--sticky-h) + 10px);
  z-index: 5;
  max-width: 680px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(0, 43, 94, 0.12);
}

.dictionary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dict-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  border-left: 6px solid var(--said-orange);
  box-shadow: var(--shadow-soft);
}

.dict-word {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--said-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.dict-phonetic {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--said-orange);
  font-weight: 700;
  margin-bottom: 12px;
  display: block;
}

.dict-card p {
  color: var(--text-secondary);
}

/* Keuzehulp-kaarten op contact.html */
.dict-term {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.dict-term > span:first-child {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--said-navy);
}

.dict-term .dict-phonetic {
  margin-bottom: 0;
}

.dict-meaning {
  color: var(--text-secondary);
  font-size: 0.96rem;
}

/* ==========================================================================
   SEO FAQ ACCORDION
   ========================================================================== */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #ffffff;
  border: 2px solid var(--border-light);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.faq-item summary {
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.08rem;
  color: var(--said-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary > span:last-child {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary > span:last-child {
  transform: rotate(45deg);
}

.faq-item[open] {
  border-color: var(--said-orange);
}

.faq-answer {
  padding: 0 24px 22px;
  color: var(--text-secondary);
  font-size: 0.96rem;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

/* ==========================================================================
   BOOKING FORM & CONTACT
   ========================================================================== */
.booking-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

.booking-form-card {
  background: #ffffff;
  border: 2px solid var(--border-light);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

.role-pills-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.role-radio-label {
  cursor: pointer;
}

.role-radio-label input {
  display: none;
}

.role-radio-box {
  border: 2px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.83rem;
  color: var(--said-navy);
  transition: all 0.2s ease;
  display: block;
}

.role-radio-label input:checked + .role-radio-box {
  border-color: var(--said-green);
  background: var(--said-green);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.28);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--said-navy);
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.96rem;
}

.form-control:focus {
  outline: none;
  border-color: var(--said-green);
  background: #ffffff;
}

.btn-submit-booking {
  width: 100%;
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.04rem;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: var(--radius-pill);
  margin-top: 10px;
  box-shadow: 0 10px 25px rgba(40, 167, 69, 0.32);
  transition: all 0.2s ease;
}

.btn-submit-booking:hover {
  background: var(--said-green-dark);
  transform: translateY(-2px);
}

.booking-direct-card {
  background: #ffffff;
  border: 2px solid var(--border-light);
  border-radius: 24px;
  padding: 34px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-method-box {
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.contact-method-box span.label {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.contact-method-box a {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.08rem;
  color: var(--said-green);
}

/* ==========================================================================
   FOOTER & SEO INTERNAL LINKING HUB
   ========================================================================== */
.site-footer {
  background: #071326;
  color: #cbd5e1;
  padding: 68px 0 36px;
  border-top: 6px solid var(--said-gold);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 46px;
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--said-gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: #cbd5e1;
  font-size: 0.92rem;
}

.footer-links a:hover {
  color: var(--said-gold);
  transform: translateX(4px);
  display: inline-block;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* ==========================================================================
   LIGHTBOX MODAL
   ========================================================================== */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 10, 22, 0.92);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox-modal.open {
  display: flex;
}

.lightbox-content {
  width: 100%;
  max-width: 940px;
  background: #0f172a;
  border: 3px solid var(--said-gold);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--said-red);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
}

.lightbox-frame-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.lightbox-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   UNIFIED ALIASES FOR CONTACT & SHIRT ORDER PAGE (contact.html)
   ========================================================================== */
:root {
  --green-primary: #28a745;
}

.header-container {
  max-width: 1360px;
  margin: 0 auto;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 700;
}

.topbar-links a:hover {
  color: var(--said-gold);
}

.topbar-links .sep {
  opacity: 0.45;
}

.gigagaaf-bell-btn {
  background: var(--said-gold);
  color: var(--said-navy);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(252, 185, 0, 0.35);
}

.nav-dropdown-trigger {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--text-primary);
  padding: 9px 14px;
  border-radius: var(--radius-pill);
}

.dropdown-menu a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  transition: background 0.18s ease;
}

.dropdown-menu a:hover {
  background: rgba(40, 167, 69, 0.09);
}

.dropdown-menu .dm-icon {
  font-size: 1.3rem;
}

.dropdown-menu .dm-text {
  display: flex;
  flex-direction: column;
}

.dropdown-menu .dm-text strong {
  font-size: 0.9rem;
  color: var(--said-navy);
}

.dropdown-menu .dm-text span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.btn-header-book {
  background: linear-gradient(135deg, #28a745 0%, #1e8436 100%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.94rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 22px rgba(40, 167, 69, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.page-hero {
  background: linear-gradient(135deg, #002b5e 0%, #004494 52%, #0678be 100%);
  color: #ffffff;
  padding: 74px 0 68px;
  text-align: center;
  border-bottom: 6px solid var(--said-gold);
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  text-transform: uppercase;
  margin: 12px 0 16px;
}

.page-hero .lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.12rem;
  color: #e2e8f0;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--said-gold);
  margin-bottom: 10px;
}

.bg-darker {
  background: var(--bg-secondary);
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.merch-flip-card {
  perspective: 1200px;
  height: 460px;
  cursor: pointer;
}

.merch-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.merch-flip-card:hover .merch-flip-inner,
.merch-flip-card.flipped .merch-flip-inner {
  transform: rotateY(180deg);
}

.merch-flip-front,
.merch-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.merch-flip-back {
  transform: rotateY(180deg);
  border-color: var(--said-gold);
  justify-content: space-between;
}

.merch-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  background: var(--said-green);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.76rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.merch-img,
.merch-zoom-img {
  width: 100%;
  height: 330px;
  object-fit: contain;
  background: #f8fafc;
  padding: 16px;
}

.merch-front-meta,
.merch-back-overlay {
  padding: 18px 22px;
  text-align: center;
  background: #ffffff;
}

.merch-front-meta h3,
.merch-back-overlay h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.12rem;
  color: var(--said-navy);
  margin-bottom: 4px;
}

.btn-merch-order {
  display: inline-block;
  margin-top: 10px;
  background: var(--said-green);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.booking-form-card {
  background: #ffffff;
  border: 3px solid var(--said-navy);
  border-radius: 26px;
  padding: 36px;
  box-shadow: 0 24px 55px rgba(0, 43, 94, 0.14);
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-light);
}

.form-card-header .form-logo {
  height: 54px;
  width: auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.booking-perks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.perk-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.perk-icon {
  font-size: 1.5rem;
}

.btn-submit-gigagaaf {
  width: 100%;
  margin-top: 14px;
  background: var(--said-green);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  padding: 17px 26px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(40, 167, 69, 0.35);
}

.social-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 960px) {
  .merch-grid,
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CMS: ACCENTKLEUR, BEHEERBALK & KLEINE AANVULLINGEN
   Woorden die Saïd in de admin met 🎨 markeert komen als <mark> binnen.
   ========================================================================== */
mark {
  background: none;
  color: var(--said-orange);
}

.classic-hero-card-left h1 mark {
  color: var(--said-orange);
}

.subpage-hero h1 mark,
.steunactie-content h2 mark,
.ticker-item mark,
.comp-box.gigagaaf mark,
.site-footer mark {
  color: var(--said-gold);
}

.section-title mark {
  color: var(--said-orange);
}

.faq-answer a,
.dict-card p a,
.service-body p a,
.story-content p a {
  color: var(--said-orange);
  font-weight: 800;
  text-decoration: underline;
}

.footer-bottom a {
  color: var(--said-gold);
  font-weight: 800;
}

/* Pagina zonder blauwe balk bovenaan */
html.no-topbar {
  --topbar-h: 0px;
  --sticky-h: var(--header-h);
}

/* Held zonder belkaart: kaart en Saïd netjes verdeeld */
.hero-classic-grid.no-bell {
  grid-template-columns: 420px 1fr;
}

/* Eén eigen video: niet op halve breedte */
.video-showcase-featured.is-single {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Kleur per soundboardknop (in te stellen in de admin) */
.sound-pad-emoji {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 60%), var(--pad-color, #fcb900);
}

.sound-pad-btn.is-playing {
  border-color: var(--said-orange);
}

.sound-pad-btn.is-playing .sound-pad-emoji {
  animation: padPulse 0.6s ease-in-out infinite alternate;
}

@keyframes padPulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* Honeypot tegen spam: onzichtbaar voor mensen */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Melding na het versturen van het formulier */
#booking-feedback {
  margin-top: 16px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(40, 167, 69, 0.1);
  border: 2px solid var(--said-green);
  color: var(--text-secondary);
}

#booking-feedback.is-error {
  background: #fff5f5;
  border-color: var(--said-red);
}

#booking-feedback .bf-title {
  display: block;
  font-size: 1.05rem;
  color: var(--said-navy);
  margin-bottom: 6px;
}

#booking-feedback p {
  font-size: 0.92rem;
}

#booking-feedback a {
  color: var(--said-green-dark);
  font-weight: 800;
  text-decoration: underline;
}

.btn-submit-booking[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.yt-card:focus-visible,
.shirt-flip-container:focus-visible {
  outline: 3px solid var(--said-orange);
  outline-offset: 4px;
}

/* Beheerbalk (alleen zichtbaar voor ingelogde beheerders) */
.cms-adminbar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100vw - 32px);
  background: #0f172a;
  color: #fff;
  border: 2px solid var(--said-gold);
  border-radius: 16px;
  padding: 6px 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
}

.cms-adminbar a {
  color: #fff;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.cms-adminbar a:hover {
  background: var(--said-gold);
  color: var(--said-navy);
}

.cms-adminbar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--said-green);
  margin: 0 4px;
}

.cms-adminbar-warn {
  color: #fecaca;
  padding: 0 6px;
}

.cms-edit-pencil {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--said-gold);
  color: var(--said-navy);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  opacity: 0.88;
}

.cms-edit-pencil:hover {
  opacity: 1;
  transform: scale(1.05);
}

.gigagaaf-topbar .cms-edit-pencil,
.site-header .cms-edit-pencil {
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  left: 50%;
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Staat bewust onderaan: de alias-sectie hierboven herdefinieert o.a.
   .booking-form-card, en latere regels winnen.
   ========================================================================== */

/* Geen hover-sprongetjes op touchscreens (daar blijft :hover na een tik hangen) */
@media (hover: none) {
  .service-card:hover,
  .yt-card:hover,
  .btn-book-role:hover,
  .btn-said-boeken:hover,
  .btn-primary-classic:hover,
  .btn-secondary-classic:hover {
    transform: none;
  }

  .service-card:hover .service-img-wrap img,
  .yt-card:hover .yt-thumb img {
    transform: none;
  }
}

/* ---------- TABLET & KLEINER: HAMBURGERMENU ---------- */
@media (max-width: 1140px) {
  .hero-classic-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 30px;
  }

  .classic-hero-center {
    order: -1;
    min-height: 440px;
  }

  .classic-hero-card-left,
  .classic-hero-card-right {
    max-width: 640px;
    width: 100%;
    margin: 0 auto 24px;
    transform: none;
  }

  .classic-hero-btns {
    justify-content: center;
  }

  .main-nav {
    display: none;
  }

  /* Het menu klapt direct onder de header uit. Absolute positie t.o.v. de
     header zelf: .site-header heeft backdrop-filter, waardoor position:fixed
     hierbinnen niet meer ten opzichte van het scherm werkt. */
  .main-nav.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--sticky-h));
    max-height: calc(100dvh - var(--sticky-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    padding: 8px var(--gutter) 18px;
    border-bottom: 4px solid var(--said-navy);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    gap: 0;
    margin-left: 0;
  }

  .main-nav.mobile-open .nav-item,
  .main-nav.mobile-open > .nav-link {
    border-bottom: 1px solid var(--border-light);
  }

  .main-nav.mobile-open .nav-item:last-child {
    border-bottom: none;
  }

  .main-nav.mobile-open .nav-link {
    display: flex;
    width: 100%;
    padding: 14px 4px;
    font-size: 0.95rem;
  }

  .main-nav.mobile-open .nav-link::after {
    display: none;
  }

  /* Submenu "Boek Saïd Als" gewoon uitgeklapt tonen: hover bestaat niet op touch */
  .main-nav.mobile-open .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 10px 10px;
    margin-top: -6px;
  }

  .main-nav.mobile-open .dropdown-item {
    white-space: normal;
    padding: 9px 10px;
    font-size: 0.86rem;
    color: var(--text-secondary);
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .story-split,
  .steunactie-card,
  .booking-wrapper,
  .comparison-grid,
  .service-card-wide {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- MOBIEL ---------- */
@media (max-width: 768px) {
  :root {
    --topbar-h: 36px;
    --header-h: 64px;
    --sticky-h: var(--header-h);
    --gutter: 16px;
  }

  /* De topbalk scrolt mee weg, alleen de header blijft plakken:
     scheelt ruim een derde aan vaste balken bovenin het scherm. */
  body {
    padding-top: 0;
  }

  .gigagaaf-topbar {
    position: relative;
  }

  .site-header {
    position: sticky;
    top: 0;
  }

  /* Topbalk */
  .topbar-center,
  .topbar-left span.hide-mobile {
    display: none;
  }

  .topbar-inner {
    padding: 0 var(--gutter);
    gap: 8px;
  }

  .topbar-left {
    min-width: 0;
    flex-shrink: 1;
  }

  .topbar-badge {
    font-size: 0.62rem;
    padding: 2px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-bell-btn {
    font-size: 0.7rem;
    padding: 4px 11px;
  }

  /* Header */
  .header-inner {
    padding: 0 var(--gutter);
    gap: 8px;
  }

  .brand-logo img {
    width: 116px;
    transform: translateY(8px);
  }

  .brand-logo:hover img {
    transform: translateY(8px);
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .btn-said-boeken,
  .header-actions .btn-book-header {
    font-size: 0.72rem;
    padding: 9px 14px;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
  }

  .mobile-nav-toggle {
    width: 42px;
    height: 42px;
  }

  /* Knoppen mogen op mobiel afbreken in plaats van de pagina breder te duwen */
  .btn-primary-classic,
  .btn-secondary-classic,
  .btn-said-boeken,
  .btn-yt-sub,
  .btn-steunactie,
  .btn-book-role,
  .btn-shirt-order {
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.25;
  }

  .header-actions .btn-said-boeken {
    white-space: nowrap;
  }

  .cta-row > * {
    flex: 1 1 100%;
  }

  /* Hero (home) */
  .hero-classic {
    min-height: 0;
    padding-top: 12px;
    border-bottom-width: 6px;
  }

  .hero-classic-grid {
    padding: 0 var(--gutter);
    gap: 0;
  }

  /* Vaste verhouding zodat Saïd altijd netjes vóór het grote logo staat */
  .classic-hero-center {
    min-height: 0;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 1 / 0.92;
  }

  .classic-backdrop-logo {
    width: 100%;
    bottom: 34%;
  }

  .classic-said-cutout {
    width: 100%;
  }

  .classic-hero-card-left {
    position: relative;
    z-index: 3;
    margin: -14px auto 16px;
    padding: 20px 18px;
    border-radius: 20px;
  }

  .classic-hero-card-left h1 {
    font-size: 1.55rem;
  }

  .classic-hero-card-left p {
    font-size: 0.92rem;
  }

  .classic-hero-btns {
    flex-direction: column;
  }

  /* Belkaart compact: bel links, tekst rechts, citaat eronder */
  .classic-hero-card-right {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 16px;
    border-radius: 20px;
    margin-bottom: 20px;
  }

  .bell-widget-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
    margin: 0;
  }

  .bell-widget-sub {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
    margin: 2px 0 0;
  }

  .desk-bell-btn {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 74px;
    height: 74px;
    font-size: 2.1rem;
    margin: 0;
  }

  .classic-hero-card-right .quote-bubble-live {
    grid-column: 1 / -1;
    margin-top: 12px;
    min-height: 56px;
    font-size: 0.84rem;
    text-align: center;
  }

  .classic-hero-card-right > div:last-child {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* Subpagina-hero */
  .subpage-hero {
    padding: 38px 0 34px;
    border-bottom-width: 6px;
  }

  .subpage-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .subpage-hero p {
    font-size: 0.98rem;
  }

  .breadcrumb-pills,
  .subpage-badge {
    font-size: 0.72rem;
    padding: 5px 12px;
    margin-bottom: 14px;
    max-width: 100%;
  }

  .breadcrumb-pills {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Lichtkrant */
  .catchphrase-ticker {
    padding: 10px 0;
  }

  .ticker-item {
    font-size: 0.76rem;
  }

  .ticker-track {
    gap: 28px;
  }

  /* Secties & koppen */
  .section-pad,
  .section-pad-alt {
    padding: 52px 0;
  }

  .section-header {
    margin-bottom: 30px;
  }

  .section-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    line-height: 1.35;
    max-width: 100%;
  }

  .section-title {
    font-size: clamp(1.4rem, 6.4vw, 2rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .section-subtitle {
    font-size: 0.96rem;
  }

  /* Diensten */
  .services-grid,
  .video-showcase-featured,
  .dictionary-grid,
  .form-grid-2,
  .humor-pillars,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    gap: 20px;
  }

  .service-img-wrap {
    height: 210px;
  }

  .service-card-wide .service-img-wrap {
    height: 280px;
    min-height: 0;
  }

  .service-card-wide .service-img-wrap img {
    object-position: center 25%;
  }

  .service-num-badge {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    font-size: 0.66rem;
  }

  .service-body {
    padding: 20px 18px;
  }

  .service-body h3 {
    font-size: 1.35rem;
    line-height: 1.25;
  }

  .service-body p {
    font-size: 0.94rem;
  }

  .service-perks li {
    font-size: 0.76rem;
  }

  .service-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .btn-book-role {
    width: 100%;
  }

  /* Vergelijking */
  .comparison-grid {
    gap: 34px;
  }

  .comp-box {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .comp-box.gigagaaf {
    padding-top: 36px;
  }

  .comp-badge-top {
    left: 14px;
    right: 14px;
    top: -14px;
    text-align: center;
    font-size: 0.66rem;
    line-height: 1.3;
    padding: 6px 10px;
  }

  .comp-box h3 {
    font-size: 1.2rem;
  }

  .comp-list li {
    font-size: 0.9rem;
  }

  /* Verhaal */
  .story-split {
    gap: 28px;
  }

  .story-main-photo {
    border-radius: 18px;
  }

  .story-quote-card {
    position: static;
    margin-top: 14px;
    max-width: 100%;
  }

  .story-content h2 {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }

  .story-content p {
    font-size: 0.96rem;
  }

  .humor-pillars {
    gap: 12px;
  }

  .humor-pillar {
    padding: 16px;
  }

  /* Video's */
  .video-showcase-featured {
    gap: 18px;
    margin-bottom: 28px;
  }

  .native-video-meta {
    padding: 18px;
  }

  .native-video-meta h3 {
    font-size: 1.15rem;
  }

  .yt-channel-banner {
    padding: 20px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .yt-channel-info {
    align-items: flex-start;
    gap: 14px;
  }

  .yt-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  .yt-channel-info h4 {
    font-size: 1.05rem;
  }

  .yt-channel-info p {
    font-size: 0.86rem;
  }

  /* YouTube-video's en shirts als veegbare rij in plaats van een eindeloze kolom */
  .yt-grid,
  .shirts-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    padding: 8px var(--gutter) 16px;
    scrollbar-width: thin;
  }

  .yt-card,
  .shirt-flip-container {
    scroll-snap-align: start;
  }

  .yt-card-body {
    padding: 14px;
  }

  .yt-card-body h4 {
    font-size: 0.94rem;
  }

  .swipe-hint {
    display: block;
  }

  /* Steunactie */
  .steunactie-card {
    padding: 24px 18px;
    gap: 26px;
    border-radius: 22px;
  }

  .steunactie-badge {
    font-size: 0.7rem;
  }

  .steunactie-content h2 {
    font-size: 1.5rem;
  }

  .steunactie-content p {
    font-size: 0.95rem;
  }

  .inst-pill {
    font-size: 0.76rem;
  }

  .steunactie-progress-box {
    padding: 16px;
  }

  .progress-stats {
    flex-wrap: wrap;
    gap: 8px;
  }

  .supporter-row {
    gap: 10px;
    align-items: flex-start;
    font-size: 0.8rem;
  }

  .supporter-row > strong {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .btn-steunactie {
    font-size: 0.9rem;
    padding: 14px 16px;
  }

  /* Shirts */
  .shirt-flip-container {
    height: 420px;
  }

  .shirt-img-box {
    height: 290px;
  }

  /* Soundboard: twee knoppen naast elkaar */
  .soundboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .sound-pad-btn {
    padding: 16px 10px 14px;
    border-radius: 18px;
    gap: 8px;
    box-shadow: 0 6px 0 var(--said-navy), 0 10px 20px rgba(0, 43, 94, 0.12);
  }

  .sound-pad-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--said-navy);
  }

  .sound-pad-emoji {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
  }

  .sound-pad-title {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .sound-pad-quote {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .soundboard-live-quote {
    font-size: 0.9rem;
    margin-bottom: 20px;
    min-height: 60px;
  }

  /* Woordenboek / keuzehulp */
  .dictionary-grid {
    gap: 14px;
  }

  .dict-card {
    padding: 18px 16px;
    border-left-width: 5px;
    border-radius: 16px;
  }

  .dict-word {
    font-size: 1.12rem;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.3;
  }

  .dict-word > span:last-child {
    flex-shrink: 0;
  }

  .dict-term > span:first-child {
    font-size: 1.05rem;
  }

  .dict-card .btn-book-role {
    font-size: 0.8rem;
  }

  /* FAQ */
  .faq-item {
    border-radius: 14px;
  }

  .faq-item summary {
    padding: 16px;
    font-size: 0.98rem;
    gap: 12px;
  }

  .faq-answer {
    padding: 14px 16px 18px;
    font-size: 0.92rem;
  }

  /* Boekingsformulier */
  .booking-wrapper {
    gap: 20px;
  }

  .booking-form-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .role-pills-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
  }

  .role-radio-box {
    padding: 11px 6px;
    font-size: 0.8rem;
  }

  .form-grid-2 {
    gap: 14px;
    margin-bottom: 14px;
  }

  /* 16px voorkomt dat iOS inzoomt zodra je een veld aantikt */
  .form-control {
    font-size: 16px;
    padding: 13px 14px;
    min-width: 0;
  }

  .form-control::-webkit-date-and-time-value {
    text-align: left;
  }

  .btn-submit-booking {
    font-size: 0.92rem;
    padding: 16px 18px;
  }

  .booking-direct-card {
    padding: 20px 16px;
    border-radius: 20px;
    gap: 14px;
  }

  .contact-method-box a {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  /* Footer */
  .site-footer {
    padding: 44px 0 28px;
  }

  .footer-grid {
    gap: 26px;
    margin-bottom: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
  }

  /* Videospeler: sluitknop boven de video, niet over de YouTube-bediening */
  .lightbox-modal {
    padding: 12px;
  }

  .lightbox-content {
    overflow: visible;
    border-radius: 14px;
  }

  .lightbox-frame-wrap {
    border-radius: 11px;
    overflow: hidden;
  }

  .lightbox-close {
    top: -52px;
    right: 0;
  }
}

/* ---------- KLEINE TELEFOONS ---------- */
@media (max-width: 400px) {
  .brand-logo img {
    width: 100px;
  }

  .header-actions .btn-said-boeken,
  .header-actions .btn-book-header {
    font-size: 0.66rem;
    padding: 8px 11px;
  }

  .topbar-bell-btn {
    font-size: 0.66rem;
    padding: 4px 9px;
  }

  .classic-hero-card-left h1 {
    font-size: 1.4rem;
  }

  .role-radio-box {
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   LOGO-RANDEN & STRIPSTIJL
   Het logo staat op een blauwe ellips met een donkere rand die niet overal
   even dik is, en een dun wit lijntje tussen rand en blauw. Dat komt terug:
   - lichtblauwe secties en de footer beginnen met een boog uit die ellips
     (rand links dik, rechts dun, met het witte lijntje);
   - donkerblauwe blokken krijgen de opbouw van het logo zelf: blauw verloop,
     wit lijntje en een donkere rand die rechtsonder dikker is;
   - witte kaarten worden stickers: donkere rand, harde schaduw rechtsonder
     en hoeken die net niet gelijk zijn.
   Staat bewust helemaal onderaan zodat het de oudere regels overschrijft.
   ========================================================================== */
:root {
  --ink: #0a1f44;
  --font-comic: 'Luckiest Guy', 'Raleway', sans-serif;
  --alt-bg: #e8f2fc;
  --footer-top: #0c3272;
  --edge-h: 76px;
  --rim: 6px 7px 0 var(--ink);
  --rim-lift: 9px 11px 0 var(--ink);
  --logo-rim: 0 0 0 4px var(--ink), 8px 10px 0 4px var(--ink);
  --blob-a: 30px 22px 34px 20px / 22px 32px 20px 30px;
  --blob-b: 22px 32px 20px 30px / 30px 20px 34px 22px;
  --logo-blue:
    radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.8px) 0 0 / 16px 16px,
    radial-gradient(ellipse at 50% 30%, #2166b8 0%, #0f3d80 48%, #082a5c 100%);
  /* Boog uit de logo-ellips: donkere rand, wit lijntje, dan de sectiekleur */
  --edge-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'%3E%3Cpath d='M0,41 C280,-8 690,-8 1000,37 L1000,60 L0,60 Z' fill='%230a1f44'/%3E%3Cpath d='M0,52 C290,2 700,-1 1000,40 L1000,60 L0,60 Z' fill='%23ffffff'/%3E%3Cpath d='M0,55 C300,6 705,2 1000,43 L1000,60 L0,60 Z' fill='%23e8f2fc'/%3E%3C/svg%3E");
  --edge-footer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'%3E%3Cpath d='M0,41 C280,-8 690,-8 1000,37 L1000,60 L0,60 Z' fill='%230a1f44'/%3E%3Cpath d='M0,52 C290,2 700,-1 1000,40 L1000,60 L0,60 Z' fill='%23ffffff'/%3E%3Cpath d='M0,55 C300,6 705,2 1000,43 L1000,60 L0,60 Z' fill='%230c3272'/%3E%3C/svg%3E");
}

/* ---------- Secties met een boog uit de logo-ellips ---------- */
.section-pad-alt {
  position: relative;
  background: var(--alt-bg);
}

.section-pad-alt::before,
.section-pad-alt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--edge-h);
  background: var(--edge-alt) no-repeat center / 100% 100%;
  pointer-events: none;
}

.section-pad-alt::before {
  bottom: calc(100% - 1px);
}

/* Onderkant: dezelfde boog gespiegeld, dus nu rechts de dikke rand */
.section-pad-alt::after {
  top: calc(100% - 1px);
  transform: rotate(180deg);
}

/* Geen boog tegen de held of lichtkrant aan, niet dubbel tussen twee
   lichtblauwe secties en niet onderaan vlak boven de footer */
main > .section-pad-alt:first-child::before,
.subpage-hero + .section-pad-alt::before,
.hero-classic + .section-pad-alt::before,
.catchphrase-ticker + .section-pad-alt::before,
.section-pad-alt + .section-pad-alt::before,
main > .section-pad-alt:last-child::after {
  display: none;
}

/* Apart gezet: een browser die :has() niet kent slaat alleen deze regel over */
.section-pad-alt:has(+ .section-pad-alt)::after {
  display: none;
}

/* ---------- Footer: de bovenkant van de logo-ellips ---------- */
.site-footer {
  position: relative;
  border-top: 0;
  background: linear-gradient(180deg, var(--footer-top) 0%, #082654 40%, #061a3b 100%);
}

.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--edge-h);
  background: var(--edge-footer) no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Stripachtige rasterpuntjes die naar boven toe vervagen */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.8px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
  pointer-events: none;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-col h4 {
  font-family: var(--font-comic);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

/* ---------- Koppen in de letter van het logo ---------- */
.section-title,
.story-content h2,
.steunactie-content h2,
.subpage-hero h1 {
  font-family: var(--font-comic);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.08;
}

.section-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.service-body h3,
.native-video-meta h3,
.comp-box h3,
.shirt-info-bar h3,
.shirt-back h3,
.dict-word,
.sound-pad-title,
.yt-channel-info h4 {
  font-family: var(--font-comic);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* Woorden die Saïd met 🎨 markeert: oranje-geel met zwarte rand, zoals het logo */
.section-title mark,
.story-content h2 mark,
.steunactie-content h2 mark,
.subpage-hero h1 mark {
  color: var(--said-gold);
  background: linear-gradient(180deg, #ff5b1f 0%, #ff9420 45%, #ffd21c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink))
    drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))
    drop-shadow(3px 3px 0 var(--ink));
  text-shadow: none;
}

/* Op donkere achtergrond ook het witte buitenrandje van de logoletters */
.subpage-hero h1 mark,
.steunactie-content h2 mark {
  filter:
    drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink))
    drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))
    drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(3px 4px 0 var(--ink));
}

/* ---------- Labels als stickers ---------- */
.section-eyebrow {
  background: var(--said-gold);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px 14px 10px 14px / 14px 10px 14px 10px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 0.05em;
  transform: rotate(-2deg);
}

.service-num-badge,
.steunactie-badge,
.comp-badge-top {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 10px 14px 10px 14px / 14px 10px 14px 10px;
}

.service-num-badge {
  background: var(--said-gold);
  color: var(--ink);
  transform: rotate(-3deg);
  /* Linksonder in de foto: bovenin staan meestal de gezichten */
  top: auto;
  bottom: 14px;
  /* Boven de foto houden, ook als die ingezoomd (transform) is */
  z-index: 2;
}

.steunactie-badge {
  transform: rotate(-2deg);
}

.comp-badge-top {
  transform: rotate(2deg);
}

/* ---------- Witte kaarten als stickers ---------- */
.service-card,
.native-video-card,
.yt-card,
.humor-pillar,
.faq-item,
.dict-card,
.booking-form-card,
.booking-direct-card,
.shirt-face,
.dropdown-menu {
  border: 3px solid var(--ink);
  border-radius: var(--blob-a);
  box-shadow: var(--rim);
}

:is(.services-grid, .yt-grid, .dictionary-grid, .humor-pillars, .faq-list, .video-showcase-featured, .shirts-grid) > :nth-child(even),
:is(.services-grid, .yt-grid, .dictionary-grid, .humor-pillars, .faq-list, .video-showcase-featured, .shirts-grid) > :nth-child(even) .shirt-face,
.booking-direct-card {
  border-radius: var(--blob-b);
}

/* De uitgelichte videomaker-kaart ligt op een gele sticker */
.service-card-wide {
  border: 3px solid var(--ink);
  box-shadow: 9px 10px 0 var(--said-gold), 9px 10px 0 3px var(--ink);
}

/* Achterkant van een shirt staat gedraaid: schaduw spiegelen zodat hij
   na het omdraaien ook rechtsonder valt */
.shirt-back {
  background: var(--logo-blue);
  box-shadow: -6px 7px 0 var(--ink);
}

.faq-item[open] {
  border-color: var(--ink);
  box-shadow: 6px 7px 0 var(--said-orange), 6px 7px 0 3px var(--ink);
}

.faq-answer {
  border-top: 2px dashed rgba(10, 31, 68, 0.18);
}

.dict-card {
  border-left-width: 3px;
}

.comp-box.boring {
  border: 3px dashed #94a3b8;
  border-radius: var(--blob-b);
  background: #ffffff;
}

.dropdown-menu {
  border-width: 2.5px;
  box-shadow: 5px 6px 0 var(--ink);
}

/* ---------- Donkerblauwe blokken in de opbouw van het logo ---------- */
.comp-box.gigagaaf,
.steunactie-card,
.yt-channel-banner,
.story-quote-card,
.soundboard-volume-bar,
.lightbox-content {
  background: var(--logo-blue);
  border: 3px solid #ffffff;
  border-radius: var(--blob-a);
  box-shadow: var(--logo-rim);
}

.steunactie-card,
.yt-channel-banner {
  border-radius: 40px 30px 44px 28px / 32px 42px 28px 38px;
}

.steunactie-progress-box {
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--blob-b);
  background: rgba(3, 18, 44, 0.35);
}

/* Foto in het verhaal: wit lijntje en ongelijke donkere rand, net als het logo */
.story-main-photo {
  border: 4px solid #ffffff;
  border-radius: var(--blob-a);
  box-shadow: 0 0 0 3px var(--ink), 9px 10px 0 3px var(--ink);
}

.story-quote-card {
  border-radius: var(--blob-b);
}

/* ---------- Soundboard ---------- */
.sound-pad-btn {
  border-color: var(--ink);
  border-radius: var(--blob-a);
  box-shadow: 0 9px 0 var(--ink), 0 14px 26px rgba(0, 43, 94, 0.12);
}

.soundboard-grid > :nth-child(even) {
  border-radius: var(--blob-b);
}

.sound-pad-btn:active {
  box-shadow: 0 3px 0 var(--ink);
}

.sound-pad-emoji {
  border-color: var(--ink);
}

/* ---------- Formulier ---------- */
.role-radio-box {
  border: 2px solid rgba(10, 31, 68, 0.35);
  background: #ffffff;
}

.role-radio-label input:checked + .role-radio-box {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.form-control {
  border: 2px solid rgba(10, 31, 68, 0.28);
  background: #ffffff;
}

.form-control:focus {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--said-green);
}

.contact-method-box {
  border: 2px dashed rgba(10, 31, 68, 0.28);
  background: var(--alt-bg);
}

/* ---------- Knoppen met een stripschaduw ---------- */
.btn-said-boeken,
.btn-book-header,
.btn-header-book,
.btn-primary-classic,
.btn-secondary-classic,
.btn-book-role,
.btn-steunactie,
.btn-submit-booking,
.btn-submit-gigagaaf,
.btn-yt-sub,
.btn-shirt-order,
.btn-merch-order {
  border: 2.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

.btn-said-boeken:active,
.btn-book-header:active,
.btn-header-book:active,
.btn-primary-classic:active,
.btn-secondary-classic:active,
.btn-book-role:active,
.btn-steunactie:active,
.btn-submit-booking:active,
.btn-submit-gigagaaf:active,
.btn-yt-sub:active,
.btn-shirt-order:active,
.btn-merch-order:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

/* Optillen alleen met een muis; op touch blijft :hover na een tik hangen */
@media (hover: hover) {
  .btn-said-boeken:hover,
  .btn-book-header:hover,
  .btn-header-book:hover,
  .btn-primary-classic:hover,
  .btn-secondary-classic:hover,
  .btn-book-role:hover,
  .btn-steunactie:hover,
  .btn-submit-booking:hover,
  .btn-submit-gigagaaf:hover,
  .btn-yt-sub:hover,
  .btn-shirt-order:hover,
  .btn-merch-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--ink);
  }

  .service-card:hover,
  .yt-card:hover {
    transform: translate(-3px, -4px);
    border-color: var(--ink);
    box-shadow: var(--rim-lift);
  }

  .service-card-wide:hover {
    box-shadow: 12px 14px 0 var(--said-gold), 12px 14px 0 3px var(--ink);
  }
}

@media (hover: none) {
  .service-card:hover,
  .yt-card:hover {
    border-color: var(--ink);
    box-shadow: var(--rim);
  }
}

/* ---------- Mobiel: zelfde vormen, iets kleiner ---------- */
@media (max-width: 768px) {
  :root {
    --edge-h: 30px;
    --rim: 4px 5px 0 var(--ink);
    --rim-lift: 4px 5px 0 var(--ink);
    --logo-rim: 0 0 0 3px var(--ink), 5px 7px 0 3px var(--ink);
    --blob-a: 24px 18px 26px 16px / 18px 25px 16px 23px;
    --blob-b: 18px 25px 16px 23px / 24px 16px 26px 18px;
  }

  .service-card,
  .native-video-card,
  .yt-card,
  .humor-pillar,
  .faq-item,
  .dict-card,
  .booking-form-card,
  .booking-direct-card,
  .shirt-face {
    border-width: 2.5px;
  }

  .service-card-wide {
    box-shadow: 6px 7px 0 var(--said-gold), 6px 7px 0 2.5px var(--ink);
  }

  .shirt-back {
    box-shadow: -4px 5px 0 var(--ink);
  }

  .faq-item[open] {
    box-shadow: 4px 5px 0 var(--said-orange), 4px 5px 0 2.5px var(--ink);
  }

  .steunactie-card,
  .yt-channel-banner {
    border-radius: var(--blob-a);
  }

  .story-main-photo {
    border-width: 3px;
    box-shadow: 0 0 0 2.5px var(--ink), 6px 7px 0 2.5px var(--ink);
  }

  .section-title {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
  }

  .section-eyebrow {
    box-shadow: 2px 2px 0 var(--ink);
  }

  .sound-pad-btn {
    box-shadow: 0 6px 0 var(--ink), 0 10px 20px rgba(0, 43, 94, 0.12);
  }

  .sound-pad-btn:active {
    box-shadow: 0 2px 0 var(--ink);
  }

  /* Veegrijen: ruimte voor de harde schaduw rechtsonder */
  .yt-grid,
  .shirts-grid {
    padding-bottom: 20px;
  }
}

/* ==========================================================================
   COMPLIMENTEN-GENERATOR (soundboard-pagina)
   ========================================================================== */
.compliment-card {
  max-width: 780px;
  margin: 0 auto;
}

.form-control.is-invalid {
  border-color: var(--said-red);
  box-shadow: 3px 3px 0 var(--said-red);
}

.compliment-output {
  margin-top: 26px;
}

/* Tekstballon van Saïd, met het staartje linksonder */
.compliment-bubble {
  position: relative;
  background: var(--said-gold);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 30px 22px 34px 20px / 22px 32px 20px 30px;
  box-shadow: 6px 7px 0 var(--ink);
  padding: 24px 26px 20px;
  margin-bottom: 28px;
  transform: rotate(-0.6deg);
}

.compliment-bubble::after {
  content: '';
  position: absolute;
  left: 44px;
  bottom: -19px;
  width: 30px;
  height: 30px;
  background: var(--said-gold);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: skewX(28deg) rotate(45deg);
}

.compliment-bubble p {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.22rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.compliment-signature {
  display: block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  color: rgba(10, 31, 68, 0.75);
}

.compliment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.compliment-actions > * {
  flex: 1 1 180px;
}

#compliment-share {
  background: #25d366;
}

.compliment-copied {
  margin-top: 12px;
  font-weight: 800;
  color: var(--said-green-dark);
}

.compliment-cta {
  margin-top: 18px;
  text-align: center;
}

.compliment-cta a {
  font-weight: 900;
  color: var(--said-orange);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .compliment-bubble {
    padding: 18px 18px 16px;
    box-shadow: 4px 5px 0 var(--ink);
  }

  .compliment-bubble p {
    font-size: 1.05rem;
  }

  .compliment-actions > * {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   PRIVACYVERKLARING & ZINNETJE ONDER HET FORMULIER
   ========================================================================== */
.legal-text {
  max-width: 820px;
}

.legal-updated {
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.legal-block {
  margin-bottom: 34px;
}

.legal-block h2 {
  font-family: var(--font-comic);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--said-navy);
  margin-bottom: 12px;
}

.legal-block p,
.legal-block li {
  color: var(--text-secondary);
  font-size: 1rem;
}

.legal-block p + p {
  margin-top: 12px;
}

.legal-block ul {
  padding-left: 22px;
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.legal-block a,
.form-privacy-note a {
  color: var(--said-orange);
  font-weight: 800;
  text-decoration: underline;
}

.form-privacy-note {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
}

.form-date-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b42318;
}

@media (max-width: 768px) {
  .legal-block h2 {
    font-size: 1.35rem;
  }

  .legal-block p,
  .legal-block li {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   POSITIE PER APPARAAT
   In de admin kiest Saïd per foto een focuspunt (en zoom) voor computer,
   tablet en mobiel. cms_media_style() zet die als --pos / --pos-t / --pos-m
   (en --zoom…) op de foto; hier wordt per schermbreedte de juiste gekozen.
   Tablet volgt de computer en mobiel volgt de tablet, tenzij ze een eigen
   waarde hebben. !important omdat dit vroeger inline stond en dus altijd won.
   ========================================================================== */
[style*="--pos:"] {
  object-position: var(--pos) !important;
  transform-origin: var(--pos) !important;
}

[style*="--zoom:"] {
  transform: scale(var(--zoom)) !important;
}

[style*="--bgpos:"] {
  background-position: var(--bgpos) !important;
}

@media (max-width: 1140px) {
  [style*="--pos-t:"] {
    object-position: var(--pos-t) !important;
    transform-origin: var(--pos-t) !important;
  }

  [style*="--zoom-t:"] {
    transform: scale(var(--zoom-t)) !important;
  }

  [style*="--bgpos-t:"] {
    background-position: var(--bgpos-t) !important;
  }
}

@media (max-width: 768px) {
  [style*="--pos-m:"] {
    object-position: var(--pos-m) !important;
    transform-origin: var(--pos-m) !important;
  }

  [style*="--zoom-m:"] {
    transform: scale(var(--zoom-m)) !important;
  }

  [style*="--bgpos-m:"] {
    background-position: var(--bgpos-m) !important;
  }
}

/* ==========================================================================
   EIGEN EMOJI (assets/emoji, zie includes/emoji.php)
   Iets groter dan een gewone emoji, omdat de witte stickerrand in het
   icoon zit. Negatieve marge: de regelhoogte blijft gelijk.
   ========================================================================== */
img.sda-emoji {
  display: inline-block;
  width: 1.32em;
  height: 1.32em;
  margin: -0.2em 0.06em -0.2em 0.02em;
  vertical-align: -0.34em;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}