/*
 * Charles Groenhuijsen — Elementor design system
 * Source: https://charles-groenhuijsen3.netlify.app/
 *
 * HOW TO LOAD IN ELEMENTOR
 * 1) Google Fonts (Site Settings → Custom Code / Theme, or Custom HTML in <head>):
 *    Playfair Display (700,900,italic 400) + Inter (300–700)
 * 2) Paste this file into:
 *    Elementor → Site Settings → Custom CSS
 *    OR Appearance → Customize → Additional CSS
 *    OR enqueue from /wp-content/uploads/... via a small plugin/snippet
 * 3) On the page: Page Settings (gear) → CSS Classes → add: cg-site
 *
 * NAMING
 * All classes are prefixed cg- so they don't fight Elementor (.cg-btn, .cg-container, etc.).
 * Column HTML snippets in later steps will use these same class names.
 *
 * LAYOUT NOTE
 * Elementor owns outer sections/columns. Some original layout grids (hero-inner,
 * lezingen-grid, etc.) are still here for when you paste multi-part HTML into one
 * HTML widget. If you split into Elementor columns, you can ignore those wrappers
 * and only use the inner component classes.
 */


/* global margin reset removed — breaks Elementor */
.cg-site, .cg-site * { box-sizing: border-box; }

:root{
      --navy:    #0b1526;
      --navy-2:  #111e33;
      --navy-3:  #162240;
      --magenta: #e01a7d;
      --magenta-light: #f03b90;
      --cyan:    #00c2e0;
      --gold:    #f0a030;
      --white:   #ffffff;
      --off-white: #f6f4f0;
      --text-body: #3a4560;
      --text-light: rgba(255,255,255,0.55);
      --border-dark: rgba(255,255,255,0.08);
      --border-light: rgba(0,0,0,0.08);
      --ff-serif: 'Playfair Display', Georgia, serif;
      --ff-sans:  'Inter', system-ui, sans-serif;
      --max: 1200px;
      --radius: 6px;
    }

html{ scroll-behavior: smooth; }
body{
      font-family: var(--ff-sans);
      background: var(--off-white);
      color: var(--navy);
      -webkit-font-smoothing: antialiased;
    }

:where(.cg-site) a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }

    /* ─── UTILS ─── */
.cg-container{ max-width: var(--max); margin: 0 auto; padding: 0 48px; }
.cg-label{
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--magenta);
    }
.cg-label::before{ content:''; display:block; width:20px; height:2px; background:var(--magenta); }
.cg-label.cyan{ color: var(--cyan); }
.cg-label.cyan::before{ background: var(--cyan); }
.cg-label.gold{ color: var(--gold); }
.cg-label.gold::before{ background: var(--gold); }
.cg-label.white{ color: rgba(255,255,255,0.6); }
.cg-label.white::before{ background: rgba(255,255,255,0.3); }

.cg-btn{
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 14px 28px; border-radius: var(--radius);
      transition: all 0.2s; cursor: pointer; border: none;
    }
.cg-btn-magenta{ background: var(--magenta); color: #fff; }
.cg-btn-magenta:hover{ background: var(--magenta-light); box-shadow: 0 8px 24px rgba(224,26,125,0.35); }
.cg-btn-outline-white{ background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.cg-btn-outline-white:hover{ border-color: #fff; background: rgba(255,255,255,0.08); }
.cg-btn-navy{ background: var(--navy); color: #fff; }
.cg-btn-navy:hover{ background: var(--navy-3); }
.cg-btn-outline-navy{ background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.cg-btn-outline-navy:hover{ background: var(--navy); color: #fff; }
.cg-btn-ghost{ background: transparent; color: var(--magenta); padding: 0; font-size: 0.75rem; }
.cg-btn-ghost::after{ content: ' →'; }

.cg-arrow{ display: inline-block; transition: transform 0.2s; }
.cg-btn-magenta:hover .cg-arrow, .cg-btn-navy:hover .cg-arrow{ transform: translateX(4px); }

    /* ─── NAV (markup: cg-header-footer.php) ─── */
#cg-nav{
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      height: 68px;
      background: rgba(11,21,38,0.97);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-dark);
      transition: box-shadow 0.3s;
      font-family: var(--ff-sans);
    }
#cg-nav.is-scrolled{ box-shadow: 0 4px 32px rgba(0,0,0,0.4); }
#cg-nav .inner{
      max-width: var(--max); margin: 0 auto; padding: 0 48px;
      height: 68px; display: flex; align-items: center; gap: 28px;
    }
.cg-nav-logo{
      font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 700;
      color: #fff; white-space: nowrap; margin-right: auto;
      line-height: 1.2;
    }
/* Brighter magenta for the small tagline (brand magenta is 4.0:1 on navy) */
.cg-nav-logo span{ display: block; font-size: 0.58rem; font-family: var(--ff-sans); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta-light); margin-top: 2px; }
.cg-nav-menu{ display: flex; align-items: center; }
.cg-nav-links{ display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.cg-nav-links > li{ position: relative; display: flex; align-items: center; height: 68px; }
.cg-nav-links a{
      font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em;
      text-transform: uppercase; color: rgba(255,255,255,0.75);
      transition: color 0.2s;
    }
.cg-nav-links a:hover,
.cg-nav-links a:focus-visible,
.cg-nav-links > li.is-active > a{ color: #fff; }
.cg-nav-links > li.is-active > a{
      text-decoration: underline; text-decoration-color: var(--magenta);
      text-decoration-thickness: 2px; text-underline-offset: 8px;
    }
.cg-sub-toggle{
      display: flex; align-items: center; justify-content: center;
      background: none; border: 0; padding: 4px; margin-left: 2px;
      color: rgba(255,255,255,0.75); cursor: pointer;
    }
.cg-sub-toggle svg{ width: 10px; height: 10px; transition: transform 0.2s; }
.has-sub.is-open .cg-sub-toggle svg{ transform: rotate(180deg); }
.cg-sub{
      position: absolute; top: 100%; left: -20px; min-width: 260px;
      list-style: none; margin: 0; padding: 10px 0;
      background: var(--navy-2); border: 1px solid var(--border-dark);
      border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,0.4);
      opacity: 0; visibility: hidden; transform: translateY(6px);
      transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    }
.has-sub:hover .cg-sub,
.has-sub:focus-within .cg-sub,
.has-sub.is-open .cg-sub{ opacity: 1; visibility: visible; transform: none; }
.cg-nav-links .cg-sub a{
      display: block; padding: 9px 20px;
      font-size: 0.85rem; letter-spacing: 0; text-transform: none;
      color: rgba(255,255,255,0.8);
    }
.cg-nav-links .cg-sub a:hover{ color: #fff; background: rgba(255,255,255,0.05); }
.cg-nav-links .cg-sub a[aria-current]{ color: #fff; box-shadow: inset 2px 0 0 var(--magenta); }
.cg-nav-cta{
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--navy);
      background: var(--magenta); padding: 10px 22px;
      border-radius: var(--radius); transition: all 0.2s; white-space: nowrap;
    }
.cg-nav-cta:hover{ background: var(--magenta-light); }
.cg-nav-cta--menu{ display: none; }
.cg-nav-burger{ display: none; }
.cg-skip-link{
      position: fixed; left: 16px; top: -100px; z-index: 300;
      background: #fff; color: var(--navy); padding: 10px 16px;
      border-radius: var(--radius); font-weight: 600;
    }
.cg-skip-link:focus{ top: 12px; }
/* Anchor targets (/#media, /#bureaus) land below the fixed nav */
.cg-site [id]{ scroll-margin-top: 84px; }

@media (max-width: 1024px) {
/* backdrop-filter would make #cg-nav the containing block of the fixed menu panel */
#cg-nav{ backdrop-filter: none; background: var(--navy); }
#cg-nav .inner{ padding: 0 32px; gap: 16px; }
.cg-nav-burger{
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; padding: 11px; margin-right: -11px;
      background: none; border: 0; cursor: pointer;
    }
.cg-nav-burger span{
      display: block; height: 2px; width: 100%; background: #fff;
      border-radius: 2px; transition: transform 0.2s, opacity 0.2s;
    }
#cg-nav.is-open .cg-nav-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
#cg-nav.is-open .cg-nav-burger span:nth-child(2){ opacity: 0; }
#cg-nav.is-open .cg-nav-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.cg-nav-menu{
      position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
      flex-direction: column; align-items: stretch;
      background: var(--navy); padding: 8px 32px 40px; overflow-y: auto;
      opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    }
#cg-nav.is-open .cg-nav-menu{ opacity: 1; visibility: visible; transform: none; }
.cg-nav-links{ flex-direction: column; align-items: stretch; gap: 0; }
.cg-nav-links > li{ height: auto; flex-wrap: wrap; border-bottom: 1px solid var(--border-dark); }
.cg-nav-links > li > a{ flex: 1; padding: 16px 0; font-size: 0.85rem; }
.cg-sub-toggle{ width: 44px; height: 44px; }
.cg-sub{
      position: static; flex-basis: 100%; min-width: 0; display: none;
      padding: 0 0 12px; background: none; border: 0; box-shadow: none;
      opacity: 1; visibility: visible; transform: none;
    }
.has-sub.is-open .cg-sub{ display: block; }
.cg-nav-links .cg-sub a{ padding: 10px 16px; }
.cg-nav-cta--menu{ display: block; margin-top: 28px; padding: 16px; text-align: center; }
body.cg-nav-open{ overflow: hidden; }
}
@media (max-width: 600px) {
#cg-nav .inner{ padding: 0 20px; }
.cg-nav-menu{ padding: 8px 20px 40px; }
.cg-nav-cta--bar{ display: none; }
}

    /* ─── HERO ─── */
.cg-hero{
      min-height: 100vh;
      background: var(--navy);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: stretch;
    }

    /* Subtle grid overlay */
.cg-hero::before{
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

.cg-hero-inner{
      max-width: var(--max); margin: 0 auto; padding: 0 48px;
      width: 100%; display: grid;
      grid-template-columns: 1fr 480px;
      gap: 40px; align-items: center;
      padding-top: 100px; padding-bottom: 60px;
      position: relative; z-index: 2;
    }

.cg-hero-content{ padding-right: 32px; }

.cg-hero-label{ margin-bottom: 28px; }

.cg-hero-title{
      font-family: var(--ff-serif);
      font-size: clamp(3rem, 5.5vw, 5.5rem);
      font-weight: 900;
      line-height: 1.0;
      color: #fff;
      margin-bottom: 20px;
    }
.cg-hero-title em{ font-style: italic; color: var(--magenta); }

.cg-hero-sub{
      font-size: clamp(1rem, 1.4vw, 1.2rem);
      color: rgba(255,255,255,0.7);
      line-height: 1.65;
      max-width: 520px;
      margin-bottom: 14px;
    }

.cg-hero-descriptor{
      font-size: 0.82rem;
      color: rgba(255,255,255,0.6);
      margin-bottom: 40px;
      font-style: italic;
    }

.cg-hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }

.cg-hero-proof{
      display: flex; align-items: center; gap: 24px;
      padding-top: 32px;
      border-top: 1px solid var(--border-dark);
    }
.cg-hero-proof-label{
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em;
      text-transform: uppercase; color: rgba(255,255,255,0.6);
      white-space: nowrap;
    }
.cg-hero-media-logos{
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
.cg-media-logo-pill{
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
      color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 5px 12px; border-radius: 100px;
    }

    /* Hero right panel */
.cg-hero-right{
      position: relative;
      display: flex; flex-direction: column; align-items: center;
      gap: 20px;
    }

.cg-hero-photo-frame{
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,0.5);
      background: #0b1526;
      aspect-ratio: 3/4;
      width: 100%;
      display: flex; align-items: flex-end; justify-content: center;
    }
.cg-hero-photo-frame img{
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
    }
    /* subtle dark vignette bottom so text/badge reads better */
.cg-hero-photo-frame::after{
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 60%, rgba(11,21,38,0.6) 100%);
      pointer-events: none;
    }
.cg-photo-placeholder{
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-serif); font-style: italic;
      color: rgba(255,255,255,0.5); font-size: 0.9rem; text-align: center;
      padding: 24px;
    }

    /* Book badge floating */
.cg-book-badge-float{
      position: absolute;
      right: -16px; bottom: 32px;
      background: #fff;
      border-radius: var(--radius);
      padding: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      width: 110px;
    }
.cg-book-badge-float img{ border-radius: 3px; }
.cg-book-badge-new{
      position: absolute; top: -8px; right: -8px;
      background: var(--magenta); color: #fff;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 3px 8px;
      border-radius: 100px;
    }

    /* Availability badge */
.cg-avail-badge{
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px; padding: 8px 16px;
      font-size: 0.72rem; color: rgba(255,255,255,0.6); width: 100%;
      justify-content: center;
    }
.cg-avail-dot{ width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.cg-avail-badge strong{ color: #fff; font-weight: 600; }

    /* Scroll indicator */
.cg-scroll-hint{
      position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: rgba(255,255,255,0.6); font-size: 0.65rem; letter-spacing: 0.15em;
      text-transform: uppercase; z-index: 3;
    }
.cg-scroll-line{
      width: 1px; height: 40px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
    }

    /* ─── STATS BAND ─── */
.cg-stats-band{
      background: var(--navy-2);
      border-top: 1px solid var(--border-dark);
      border-bottom: 1px solid var(--border-dark);
    }
.cg-stats-inner{
      max-width: var(--max); margin: 0 auto; padding: 0 48px;
      display: flex; align-items: stretch;
    }
.cg-stat-item{
      flex: 1; padding: 28px 32px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      border-right: 1px solid var(--border-dark);
    }
.cg-stat-item:last-child{ border-right: none; }
.cg-stat-num{
      font-family: var(--ff-serif); font-size: 1.8rem; font-weight: 900;
      color: #fff; line-height: 1;
    }
.cg-stat-label{
      font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.6);
    }

    /* ─── LEZINGEN ─── */
.cg-lezingen{
      background: var(--navy);
      padding: 96px 0;
    }
.cg-lezingen .cg-container{ position: relative; }
.cg-lezingen-header{
      display: flex; align-items: flex-end; justify-content: space-between;
      margin-bottom: 48px;
    }
.cg-lezingen-header .cg-section-title{ margin-bottom: 0; }

.cg-section-title{
      font-family: var(--ff-serif);
      font-size: clamp(1.7rem, 3vw, 2.6rem);
      font-weight: 700; line-height: 1.15;
      color: #fff; margin-top: 12px;
      max-width: 560px;
    }
.cg-section-title.dark{ color: var(--navy); }

.cg-avail-tag{
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--cyan);
      border: 1px solid rgba(0,194,224,0.25);
      padding: 7px 14px; border-radius: 100px; white-space: nowrap;
    }

.cg-lezingen-grid{
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2px; margin-bottom: 40px;
    }

.cg-lezing-card{
      background: var(--navy-2);
      border: 1px solid var(--border-dark);
      padding: 40px 36px;
      position: relative; overflow: hidden;
      transition: background 0.3s, border-color 0.3s;
      display: flex; flex-direction: column; gap: 16px;
    }
.cg-lezing-card:hover{
      background: var(--navy-3);
      border-color: rgba(224,26,125,0.3);
    }
.cg-lezing-card::before{
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px; background: transparent;
      transition: background 0.3s;
    }
.cg-lezing-card:nth-child(1)::before{ background: var(--magenta); }
.cg-lezing-card:nth-child(2)::before{ background: var(--cyan); }
.cg-lezing-card:nth-child(3)::before{ background: var(--gold); }

.cg-lezing-icon{
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
    }
.cg-lezing-icon.m{ background: rgba(224,26,125,0.15); }
.cg-lezing-icon.c{ background: rgba(0,194,224,0.12); }
.cg-lezing-icon.g{ background: rgba(240,160,48,0.12); }

.cg-lezing-num{
      font-family: var(--ff-serif); font-size: 0.8rem; font-weight: 700;
      color: rgba(255,255,255,0.5);
    }

.cg-lezing-title{
      font-family: var(--ff-serif); font-size: 1.2rem; font-weight: 700;
      line-height: 1.25; color: #fff;
    }
.cg-lezing-card:nth-child(1) .cg-lezing-title{ color: var(--magenta-light); }
.cg-lezing-card:nth-child(2) .cg-lezing-title{ color: var(--cyan); }
.cg-lezing-card:nth-child(3) .cg-lezing-title{ color: var(--gold); }

.cg-lezing-desc{
      font-size: 0.88rem; color: rgba(255,255,255,0.6);
      line-height: 1.7; flex: 1;
    }

.cg-lezing-link{
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.6);
      display: flex; align-items: center; gap: 8px;
      transition: color 0.2s; margin-top: 8px;
    }
.cg-lezing-card:hover .cg-lezing-link{ color: #fff; }
.cg-lezing-link::after{ content: '→'; }

.cg-lezingen-cta{
      text-align: center;
    }

    /* ─── WAAROM CHARLES ─── */
.cg-waarom{
      background: var(--off-white);
      padding: 96px 0;
    }
.cg-waarom-inner{
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center;
    }

.cg-check-list{
      list-style: none;
      display: flex; flex-direction: column; gap: 14px;
      margin: 28px 0 36px;
    }
.cg-check-list li{
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 0.95rem; color: var(--text-body); line-height: 1.5;
    }
.cg-check-icon{
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(224,26,125,0.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem; color: var(--magenta);
      flex-shrink: 0; margin-top: 2px;
    }

.cg-media-row{
      margin-top: 36px; padding-top: 28px;
      border-top: 1px solid var(--border-light);
    }
.cg-media-row-label{
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: rgba(0,0,0,0.6); margin-bottom: 16px;
    }
.cg-media-logos{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cg-media-logo-tag{
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
      color: rgba(0,0,0,0.6); padding: 5px 12px;
      border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
    }

.cg-waarom-right{ position: relative; }

.cg-photo-frame-on-stage{
      border-radius: 8px; overflow: hidden;
      background: #0b1526;
      aspect-ratio: 4/5;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 24px 72px rgba(0,0,0,0.15);
      position: relative;
    }
.cg-photo-frame-on-stage img{
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
    }

.cg-quote-overlay{
      position: absolute; bottom: -24px; left: -24px;
      background: var(--navy);
      border-radius: var(--radius);
      padding: 24px 28px;
      max-width: 300px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    }
.cg-quote-overlay p{
      font-family: var(--ff-serif); font-style: italic;
      font-size: 1.05rem; color: #fff; line-height: 1.5;
      margin-bottom: 10px;
    }
.cg-quote-overlay cite{
      font-size: 0.72rem; font-style: normal; font-weight: 600;
      color: var(--magenta); letter-spacing: 0.06em;
    }
.cg-quote-open{
      font-size: 3rem; font-family: var(--ff-serif);
      color: var(--magenta); line-height: 1; margin-bottom: 4px;
      display: block;
    }

    /* ─── VOOR WIE ─── */
.cg-voor-wie{
      background: var(--navy-2);
      padding: 72px 0;
      border-top: 1px solid var(--border-dark);
      border-bottom: 1px solid var(--border-dark);
    }
.cg-voor-wie-inner{
      display: flex; align-items: center; gap: 64px;
    }
.cg-voor-wie-title{
      font-family: var(--ff-serif); font-size: 1.4rem; font-weight: 700;
      color: #fff; min-width: 200px;
    }
.cg-voor-wie-tags{
      display: flex; flex-wrap: wrap; gap: 10px; flex: 1;
    }
.cg-wie-tag{
      font-size: 0.78rem; font-weight: 500;
      color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 8px 18px; border-radius: 100px;
      transition: all 0.2s;
    }
.cg-wie-tag:hover{
      border-color: var(--magenta);
      color: var(--magenta-light);
    }

    /* ─── BOEKEN ─── */
.cg-boeken{
      background: var(--off-white);
      padding: 96px 0;
    }
.cg-boeken-header{
      display: flex; align-items: flex-end; justify-content: space-between;
      margin-bottom: 56px;
    }
.cg-boeken-grid{
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }

.cg-book-card{
      display: flex; flex-direction: column; gap: 16px;
    }
.cg-book-cover{
      aspect-ratio: 2/3; border-radius: 4px; overflow: hidden;
      background: linear-gradient(150deg, #1a2850 0%, #0d1829 100%);
      box-shadow: 0 8px 32px rgba(0,0,0,0.18), -4px 0 0 0 rgba(0,0,0,0.2);
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
.cg-book-cover > img{
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
.cg-book-cover-inner{
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 20px; text-align: center;
    }
.cg-book-cover-title{
      font-family: var(--ff-serif); font-size: 0.85rem; font-weight: 700;
      color: rgba(255,255,255,0.6); line-height: 1.3;
    }
.cg-book-new-badge{
      position: absolute; top: 10px; left: 10px;
      background: var(--magenta); color: #fff;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
    }
.cg-book-title-text{
      font-family: var(--ff-serif); font-size: 0.95rem; font-weight: 700;
      color: var(--navy); line-height: 1.3;
    }
.cg-book-cta{
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--magenta);
      display: flex; align-items: center; gap: 6px; transition: gap 0.2s;
    }
.cg-book-cta:hover{ gap: 10px; }
.cg-book-cta::after{ content: '→'; }

    /* ─── VIDEO ─── */
.cg-media-section{
      background: var(--navy);
      padding: 96px 0;
    }
.cg-media-header{ margin-bottom: 48px; }
.cg-media-grid{
      display: grid; grid-template-columns: 2fr 1fr 1fr;
      gap: 16px;
    }
.cg-video-thumb{
      border-radius: var(--radius); overflow: hidden;
      background: var(--navy-3); position: relative;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: transform 0.2s;
    }
.cg-video-thumb:hover{ transform: scale(1.02); }
.cg-video-thumb.cg-big{ aspect-ratio: 16/9; }
.cg-video-thumb.cg-small{ aspect-ratio: 4/3; }
.cg-video-grad{
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
    }
.cg-play-circle{
      width: 56px; height: 56px;
      background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      transition: all 0.3s; position: relative; z-index: 1;
    }
.cg-video-thumb.cg-big .cg-play-circle{ width: 72px; height: 72px; }
.cg-video-thumb:hover .cg-play-circle{ background: var(--magenta); border-color: var(--magenta); }
.cg-play-circle svg{ width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.cg-video-caption{
      position: absolute; bottom: 14px; left: 16px; right: 16px;
      z-index: 1;
    }
.cg-video-tag{
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--magenta); margin-bottom: 4px;
    }
.cg-video-title-text{
      font-size: 0.85rem; font-weight: 600; color: #fff;
      line-height: 1.3;
    }
.cg-media-grid-side{ display: flex; flex-direction: column; gap: 16px; }

    /* ─── TESTIMONIALS ─── */
.cg-testimonials{
      background: var(--off-white);
      padding: 96px 0;
    }
.cg-test-grid{
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px; margin-top: 48px;
    }
.cg-test-card{
      background: #fff; border-radius: var(--radius);
      padding: 36px; box-shadow: 0 2px 16px rgba(0,0,0,0.06);
      display: flex; flex-direction: column; gap: 16px;
      border-top: 3px solid transparent;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
.cg-test-card:hover{
      border-top-color: var(--magenta);
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
.cg-test-stars{ color: var(--gold); font-size: 0.85rem; letter-spacing: 3px; }
.cg-test-quote{
      font-family: var(--ff-serif); font-style: italic;
      font-size: 1rem; line-height: 1.7; color: var(--navy);
      flex: 1;
    }
.cg-test-source{ padding-top: 16px; border-top: 1px solid var(--border-light); }
.cg-test-name{ font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.cg-test-org{ font-size: 0.75rem; color: rgba(0,0,0,0.6); font-weight: 500; }

    /* ─── BUREAUS ─── */
.cg-bureaus{
      background: var(--navy-2);
      padding: 80px 0;
    }
.cg-bureaus-inner{
      display: flex; align-items: center; justify-content: space-between;
      gap: 48px;
    }
.cg-bureaus-left{ max-width: 520px; }
.cg-bureaus-title{
      font-family: var(--ff-serif); font-size: 1.8rem; font-weight: 700;
      color: #fff; margin: 12px 0 16px; line-height: 1.2;
    }
.cg-bureaus-desc{ font-size: 0.92rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.cg-bureaus-features{
      margin: 24px 0; list-style: none;
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
.cg-bureaus-features li{
      font-size: 0.82rem; color: rgba(255,255,255,0.6);
      display: flex; align-items: center; gap: 8px;
    }
.cg-bureaus-features li::before{
      content: '✓'; color: var(--cyan); font-weight: 700; font-size: 0.7rem;
    }
.cg-bureaus-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.cg-bureaus-right{
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-dark);
      border-radius: var(--radius); padding: 32px;
      min-width: 280px;
    }
.cg-bureaus-right h4{
      font-family: var(--ff-serif); font-size: 1.1rem; color: #fff;
      margin-bottom: 20px;
    }
.cg-bureaus-detail-list{ list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cg-bureaus-detail-list li{
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.82rem; padding-bottom: 12px;
      border-bottom: 1px solid var(--border-dark);
    }
.cg-bureaus-detail-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.cg-bureaus-detail-list .key{ color: rgba(255,255,255,0.6); }
.cg-bureaus-detail-list .val{ color: #fff; font-weight: 600; text-align: right; max-width: 160px; }
.val.cyan{ color: var(--cyan); }

    /* ─── CONTACT / CTA ─── */
.cg-contact{
      background: var(--navy);
      padding: 96px 0;
    }
.cg-contact-inner{
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: flex-start;
    }
.cg-contact-left .cg-section-title{ margin-bottom: 16px; }
.cg-contact-desc{ font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 32px; }
.cg-contact-direct{
      display: flex; flex-direction: column; gap: 12px;
    }
.cg-contact-direct a{
      display: flex; align-items: center; gap: 12px;
      font-size: 0.88rem; color: rgba(255,255,255,0.6);
      transition: color 0.2s;
    }
.cg-contact-direct a:hover{ color: #fff; }
.cg-contact-icon{
      width: 32px; height: 32px; border-radius: 6px;
      background: rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; flex-shrink: 0;
    }

.cg-contact-form{
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-dark);
      border-radius: var(--radius); padding: 40px;
    }
.cg-contact-form h3{
      font-family: var(--ff-serif); font-size: 1.2rem; color: #fff;
      margin-bottom: 24px;
    }
.cg-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cg-form-field{ display: flex; flex-direction: column; gap: 6px; }
.cg-form-field.cg-full{ grid-column: 1/-1; }
.cg-form-field label{
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: rgba(255,255,255,0.6);
    }
.cg-form-field input, .cg-form-field select, .cg-form-field textarea{
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 4px; padding: 11px 14px;
      font-size: 0.88rem; color: #fff; font-family: var(--ff-sans);
      transition: border-color 0.2s;
      -webkit-appearance: none;
    }
.cg-form-field input::placeholder, .cg-form-field textarea::placeholder{ color: rgba(255,255,255,0.5); }
.cg-form-field input:focus, .cg-form-field select:focus, .cg-form-field textarea:focus{
      outline: none; border-color: var(--magenta);
    }
.cg-form-field select option{ background: var(--navy-2); }
.cg-form-field textarea{ resize: vertical; min-height: 90px; }
.cg-form-submit{
      margin-top: 20px; width: 100%;
      font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 15px;
      background: var(--magenta); color: #fff; border: none;
      border-radius: var(--radius); cursor: pointer;
      transition: all 0.2s; font-family: var(--ff-sans);
    }
.cg-form-submit:hover{ background: var(--magenta-light); }
.cg-form-note{
      margin-top: 12px; font-size: 0.72rem;
      color: rgba(255,255,255,0.6); text-align: center;
    }

    /* ─── FOOTER ─── */
.cg-footer{
      background: #060a12;
      padding: 64px 0 40px;
    }
.cg-footer-top{
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px; margin-bottom: 48px; padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
.cg-footer-brand{
      font-family: var(--ff-serif); font-size: 1.15rem;
      font-weight: 700; color: #fff; margin-bottom: 12px;
    }
.cg-footer-tagline{ font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 24px; }
.cg-footer-socials{ display: flex; gap: 10px; }
.cg-footer-social-btn{
      width: 34px; height: 34px; border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.25);
      display: flex; align-items: center; justify-content: center;
      color: #ffffff; font-size: 0.75rem;
      transition: all 0.2s;
    }
.cg-footer-social-btn:hover{ border-color: var(--magenta); color: var(--magenta); }
.cg-footer-col-head{
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: rgba(255,255,255,0.6);
      margin-bottom: 18px;
    }
.cg-footer-col ul{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cg-footer-col ul a{
      font-size: 0.85rem; color: rgba(255,255,255,0.75); transition: color 0.2s;
    }
.cg-footer-col ul a:hover{ color: #fff; }
.cg-footer-bottom{
      display: flex; align-items: center; justify-content: space-between;
    }
.cg-footer-copy{ font-size: 0.75rem; color: rgba(255,255,255,0.6); }

    /* ─── SECTION SPACING ─── */
.cg-pt-label{ margin-bottom: 12px; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1024px) {
.cg-container{ padding: 0 32px; }
.cg-hero-inner{ grid-template-columns: 1fr; padding-top: 120px; }
/* keep hero photo visible; Elementor stacks columns */
.cg-hero-title{ font-size: 3rem; }
.cg-lezingen-grid{ grid-template-columns: 1fr; }
.cg-waarom-inner{ grid-template-columns: 1fr; }
.cg-waarom-right{ display: none; }
.cg-boeken-grid{ grid-template-columns: repeat(2, 1fr); }
.cg-media-grid{ grid-template-columns: 1fr; }
.cg-media-grid-side{ flex-direction: row; }
.cg-test-grid{ grid-template-columns: 1fr; }
.cg-bureaus-inner{ flex-direction: column; }
.cg-contact-inner{ grid-template-columns: 1fr; }
.cg-footer-top{ grid-template-columns: 1fr 1fr; }
.cg-stats-inner{ flex-wrap: wrap; }
.cg-stat-item{ min-width: 120px; }
.cg-voor-wie-inner{ flex-direction: column; align-items: flex-start; }
.cg-lezingen-header{ flex-direction: column; align-items: flex-start; gap: 16px; }
.cg-boeken-header{ flex-direction: column; align-items: flex-start; gap: 16px; }
    }
    @media (max-width: 600px) {
.cg-container{ padding: 0 20px; }
.cg-hero-title{ font-size: 2.4rem; }
.cg-boeken-grid{ grid-template-columns: 1fr; }
.cg-form-grid{ grid-template-columns: 1fr; }
.cg-footer-top{ grid-template-columns: 1fr; }
    }
  



/* ─── ELEMENTOR HTML WIDGET HELPERS ─── */
.elementor-widget-html .cg-btn,
.elementor-widget-html a.cg-btn {
  text-decoration: none;
}

/* Filled dark buttons: force light type (Elementor/theme inherit navy otherwise) */
body.cg-site a.cg-btn-magenta,
body.cg-site .cg-btn-magenta,
body.cg-site a.cg-btn-navy,
body.cg-site .cg-btn-navy,
body.cg-site a.cg-nav-cta,
body.cg-site .cg-nav-cta,
body.cg-site .cg-form-submit,
body.cg-site button.cg-btn-magenta,
body.cg-site button.cg-form-submit {
  color: #ffffff !important;
}
body.cg-site a.cg-btn-magenta:hover,
body.cg-site .cg-btn-magenta:hover,
body.cg-site a.cg-btn-navy:hover,
body.cg-site .cg-btn-navy:hover,
body.cg-site a.cg-nav-cta:hover,
body.cg-site .cg-nav-cta:hover,
body.cg-site .cg-form-submit:hover,
body.cg-site button.cg-btn-magenta:hover {
  color: #ffffff !important;
}
body.cg-site a.cg-btn-outline-white,
body.cg-site .cg-btn-outline-white {
  color: #ffffff !important;
}
body.cg-site a.cg-footer-social-btn,
body.cg-site .cg-footer-social-btn {
  color: #ffffff !important;
}
body.cg-site a.cg-footer-social-btn:hover,
body.cg-site .cg-footer-social-btn:hover {
  color: var(--magenta) !important;
}
.elementor-widget-html p:last-child { margin-bottom: 0; }

.elementor-section.cg-section-navy,
.e-con.cg-section-navy {
  background-color: var(--navy) !important;
}
.elementor-section.cg-section-navy-2,
.e-con.cg-section-navy-2 {
  background-color: var(--navy-2) !important;
}
.elementor-section.cg-section-offwhite,
.e-con.cg-section-offwhite {
  background-color: var(--off-white) !important;
}

body.cg-site { padding-top: 0; }

.elementor-widget-html .cg-hero,
.elementor-widget-html .cg-stats-band,
.elementor-widget-html .cg-lezingen,
.elementor-widget-html .cg-waarom,
.elementor-widget-html .cg-voor-wie,
.elementor-widget-html .cg-boeken,
.elementor-widget-html .cg-media-section,
.elementor-widget-html .cg-testimonials,
.elementor-widget-html .cg-bureaus,
.elementor-widget-html .cg-contact,
.elementor-widget-html .cg-footer {
  width: 100%;
}

/*
  Hero layout in Elementor:
  - Outer row: full-bleed navy
  - Inner row: same 1200px content width as .cg-container
  - Photo: larger than before (was capped at 420px)
*/
.elementor-widget-html .cg-hero-content {
  padding-right: 0;
  max-width: none;
  width: 100%;
}

.elementor-widget-html .cg-hero-right {
  width: 100%;
  max-width: 560px; /* was 420px — larger portrait */
  margin-left: auto;
  margin-right: auto;
}

.elementor-widget-html .cg-hero-photo-frame {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 3 / 4;
}

/* Fallback if inner shell class is present on an e-flexbox */
.e-con.cg-hero-shell,
.elementor-element.cg-hero-shell {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

.e-con.cg-hero-bleed,
.elementor-element.cg-hero-bleed {
  background-color: #0b1526 !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  .e-con.cg-hero-shell,
  .elementor-element.cg-hero-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-widget-html .cg-hero-right {
    max-width: 100%;
  }
}

/*
  All CG pages: Elementor v4 flexboxes ship with 10px padding.
  That plus the off-white body color reads as a light “border”
  around every dark band. Kill the padding so navy sections
  go edge-to-edge. (Inner .cg-container still caps content at 1200px.)
*/
body.cg-site,
body.cg-site .elementor {
  background: var(--navy);
}
body.cg-site .elementor {
  --widgets-spacing: 0px 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
  --kit-widget-spacing: 0px;
  --container-max-width: 100%;
}
body.cg-site .elementor .e-flexbox-base,
body.cg-site .elementor .e-con {
  padding: 0 !important;
}
body.cg-site .elementor .elementor-widget,
body.cg-site .elementor .elementor-widget-html {
  padding: 0 !important;
  margin: 0 !important;
}
body.cg-site .elementor .elementor-widget-html > div,
body.cg-site .elementor .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
/* Restore the 1200px content shell inside the full-bleed homepage hero */
body.cg-site .e-con.cg-hero-shell {
  max-width: 1200px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 600px) {
  body.cg-site .e-con.cg-hero-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ─── INNER PAGES ─── */
.cg-page-hero {
  background: var(--navy);
  padding: 140px 0 72px;
  position: relative;
  overflow: hidden;
}
.cg-page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.cg-page-hero .cg-container { position: relative; z-index: 1; }
.cg-page-kicker { margin-bottom: 18px; }
.cg-page-title {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 18px;
}
.cg-page-title em { font-style: italic; color: var(--magenta); font-weight: 400; }
.cg-page-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
  max-width: 720px;
  margin: 0 0 28px;
}
.cg-page-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cg-band {
  padding: 88px 0;
}
.cg-band.navy { background: var(--navy); }
.cg-band.navy-2 { background: var(--navy-2); }
.cg-band.off { background: var(--off-white); }
.cg-band.white { background: #fff; }

.cg-prose {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-body);
  max-width: 760px;
}
.cg-prose.light, .cg-band.navy .cg-prose, .cg-band.navy-2 .cg-prose {
  color: rgba(255,255,255,0.72);
}
.cg-prose p { margin: 0 0 18px; }
.cg-prose p:last-child { margin-bottom: 0; }
.cg-prose h2, .cg-prose h3 {
  font-family: var(--ff-serif);
  color: var(--navy);
  line-height: 1.2;
  margin: 32px 0 12px;
}
.cg-band.navy .cg-prose h2, .cg-band.navy .cg-prose h3,
.cg-band.navy-2 .cg-prose h2, .cg-band.navy-2 .cg-prose h3 {
  color: #fff;
}
.cg-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.cg-split.reverse { grid-template-columns: 0.85fr 1.15fr; }
.cg-split img, .cg-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}
.cg-frame {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.cg-frame.portrait { aspect-ratio: 4/5; }
.cg-frame.portrait img { width: 100%; height: 100%; object-fit: cover; }
.cg-frame.square { aspect-ratio: 1; }
.cg-frame.square img { width: 100%; height: 100%; object-fit: cover; }

.cg-two-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cg-book-catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.cg-book-catalog .cg-book-cover { min-height: 0; }

.cg-lecture-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cg-lecture-tile {
  background: var(--navy-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}
.cg-lecture-tile:hover { transform: translateY(-3px); border-color: rgba(224,26,125,0.4); }
.cg-lecture-tile img {
  width: 100%; height: 180px; object-fit: cover; display: block;
}
.cg-lecture-tile .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cg-lecture-tile h3 {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}
.cg-lecture-tile p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.cg-client-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cg-client-pills span {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 14px; border-radius: 100px;
}

.cg-simple-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cg-simple-form .full { grid-column: 1 / -1; }
.cg-simple-form label {
  display: block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.cg-simple-form input,
.cg-simple-form select,
.cg-simple-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--ff-sans);
  font-size: 0.92rem;
}
.cg-simple-form textarea { min-height: 140px; resize: vertical; }
.cg-simple-form input::placeholder,
.cg-simple-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.cg-form-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 32px;
}
.cg-form-card h3 {
  font-family: var(--ff-serif);
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 20px;
}

.cg-info-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; }
.cg-info-list a { color: #fff; font-weight: 600; }
.cg-info-list li { color: rgba(255,255,255,0.6); font-size: 0.92rem; }

@media (max-width: 1024px) {
  .cg-split, .cg-split.reverse { grid-template-columns: 1fr; }
  .cg-book-catalog { grid-template-columns: repeat(2, 1fr); }
  .cg-lecture-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cg-page-hero { padding: 120px 0 56px; }
  .cg-book-catalog { grid-template-columns: 1fr; }
  .cg-simple-form { grid-template-columns: 1fr; }
  .cg-two-photos { grid-template-columns: 1fr; }
}


/* ─── LAYOUT FIXES ───
   Elementor's `.elementor img { height: auto }` loads after this file and
   overrides the image sizing above (frames showed letterboxed photos, tiles
   had uneven image heights). The body.cg-site prefix restores those rules. */

/* Homepage hero: clear the fixed nav, full-width photo column */
body.cg-site .e-con.cg-hero-shell { padding-top: 132px !important; padding-bottom: 72px !important; }
body.cg-site .elementor-widget-html:has(> .cg-hero-right) { width: 100%; }
body.cg-site .elementor-widget-html .cg-hero-right { max-width: 440px; }
body.cg-site .elementor-widget-html .cg-hero-photo-frame { aspect-ratio: 4 / 5; overflow: visible; }
body.cg-site .cg-hero-photo-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; border-radius: 8px;
}
body.cg-site .cg-hero-photo-frame::after { border-radius: 8px; }
/* Book badge sits on the frame edge instead of being clipped by it */
body.cg-site .cg-book-badge-float { right: -24px; bottom: 40px; width: 112px; z-index: 2; }
body.cg-site .cg-book-badge-float img { position: static; width: 100%; height: auto; }
.cg-hero-proof { flex-direction: column; align-items: flex-start; gap: 14px; }
.cg-hero-media-logos { gap: 8px; }

/* Stats band: equal columns, text-only stat no longer overflows */
.cg-stat-item { flex: 1 1 0; min-width: 0; padding: 28px 16px; text-align: center; justify-content: center; }
.cg-stat-num { min-height: 1.8rem; display: flex; align-items: center; }
.cg-stat-item:last-child .cg-stat-num { font-size: 1.15rem; white-space: nowrap; }

/* Waarom Charles: photo fills the frame, quote card overlaps the corner */
body.cg-site .cg-photo-frame-on-stage { overflow: visible; }
body.cg-site .cg-photo-frame-on-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; border-radius: 8px;
}
.cg-quote-overlay { z-index: 1; }

/* Media: big showreel + two stacked clips, same total height */
.cg-media-grid { grid-template-columns: 2fr 1fr; }
.cg-video-thumb.big { aspect-ratio: 16 / 9; }
.cg-media-grid-side .cg-video-thumb { flex: 1; min-height: 0; }
.cg-video-thumb.big .cg-play-circle { width: 72px; height: 72px; }
.cg-video-caption { right: 16px; }
.cg-video-title-text { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* Lecture tiles: one image shape, text and "Meer" aligned */
body.cg-site .cg-lecture-tile img {
  height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center 25%;
}
body.cg-site .cg-lecture-tile img[src*="/book-"] {
  object-fit: contain; padding: 20px;
  background: radial-gradient(circle at 50% 40%, var(--navy-3), var(--navy));
}
.cg-lecture-tile .cg-btn-ghost { margin-top: 6px; }

/* Inner-page photo frames */
body.cg-site .cg-frame.portrait img,
body.cg-site .cg-frame.square img { height: 100%; }
.cg-two-photos .cg-frame { aspect-ratio: 4 / 5; }
body.cg-site .cg-two-photos .cg-frame img { height: 100%; object-fit: cover; object-position: center 25%; }

@media (max-width: 1024px) {
body.cg-site .e-con.cg-hero-shell { padding-top: 112px !important; padding-bottom: 56px !important; }
body.cg-site .cg-book-badge-float { right: -8px; width: 96px; }
.cg-stats-inner { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 32px; }
.cg-stat-item { border-right: none; border-bottom: 1px solid var(--border-dark); }
.cg-media-grid { grid-template-columns: 1fr; }
.cg-media-grid-side .cg-video-thumb { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
body.cg-site .e-con.cg-hero-shell { padding-top: 100px !important; }
.cg-stats-inner { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
.cg-stat-item:last-child { grid-column: 1 / -1; }
.cg-media-grid-side { flex-direction: column; }
}

/* Voor wie: pills read as pills, rows start level with the title */
.cg-voor-wie-inner{ align-items: flex-start; }
.cg-wie-tag{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }

/* Lecture cards (homepage): "Meer informatie" on one line across cards */
.cg-lezing-link{ margin-top: auto; }

/* Split sections with a form: text starts level with the form, not centred beside it */
.cg-split:has(.cg-form-card){ align-items: start; }

/* Section rhythm */
/* The Elementor reset above zeroes padding on div-based sections */
body.cg-site .elementor .elementor-widget-html > div.cg-voor-wie { padding: 36px 0 !important; }
/* Navy band straight after the navy page hero: divider instead of a double gap */
.cg-band.after-hero { padding-top: 0; }
.cg-band.after-hero > .cg-container { border-top: 1px solid var(--border-dark); padding-top: 64px; }
/* Testimonial cards on a white band (after an off-white band) */
.cg-band.white .cg-test-card { background: var(--off-white); box-shadow: none; }

@media (max-width: 600px) {
body.cg-site .elementor .elementor-widget-html > div.cg-voor-wie { padding: 28px 0 !important; }
.cg-band.after-hero > .cg-container { padding-top: 48px; }
}

/* Forms (cg-forms.js) */
.cg-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cg-form-notice{
      border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px;
      font-size: 0.95rem; line-height: 1.6; color: #fff;
    }
.cg-form-notice.is-sent{ background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.45); }
.cg-form-notice.is-error{ background: rgba(224,26,125,0.12); border: 1px solid rgba(224,26,125,0.5); grid-column: 1 / -1; }
.cg-form-notice a{ color: #fff; text-decoration: underline; }
.cg-form-notice strong{ display: block; margin-bottom: 4px; }

/* Snel overzicht: wider card, room for the lecture titles */
.cg-bureaus-right{ flex: 0 1 480px; }
.cg-bureaus-detail-list li{ gap: 24px; }
.cg-bureaus-detail-list .key{ flex-shrink: 0; }
.cg-bureaus-detail-list .val{ max-width: 300px; }
.cg-bureaus-detail-list .val a{ color: #fff; }
.cg-bureaus-detail-list .val a:hover{ color: var(--magenta-light); }

/* Video thumbnails are links to YouTube */
a.cg-video-thumb{ color: inherit; text-decoration: none; }
a.cg-video-thumb:focus-visible{ outline: 2px solid var(--magenta-light); outline-offset: 3px; }

/* Contact block: text icons for social links */
.cg-contact-icon--text{ font-weight: 700; font-size: 0.8rem; color: #fff; }
/* Play button stays visible on busy thumbnails */
.cg-play-circle{ background: rgba(11,21,38,0.55); border-color: rgba(255,255,255,0.6); }

/* Titles use the full width; balanced wrapping only where a line is too long */
body.cg-site .cg-section-title{ max-width: 860px; }
body.cg-site :is(h1, h2, h3){ text-wrap: balance; }
.cg-lezingen-header > div, .cg-boeken-header > div{ flex: 1 1 auto; min-width: 0; }
@media (min-width: 601px) { .cg-voor-wie-title{ white-space: nowrap; } }

/* Photo crops: no cut-off heads */
/* Close-up portraits whose head touches the top edge: crop from the top */
body.cg-site img[src*="photo-27."], body.cg-site img[src*="photo-38."], body.cg-site img[src*="photo-62."]{ object-position: center top !important; }
/* Taller media tiles, so the small videos show a whole head */
.cg-video-thumb.big{ aspect-ratio: 3 / 2; }
@media (max-width: 1024px) { .cg-media-grid-side .cg-video-thumb{ aspect-ratio: 3 / 2; } }
/* Wide stage photo in a square frame: face sits right of centre */
body.cg-site .cg-frame.square img[src*="stage-charles."]{ object-position: 75% center; }
/* Landscape portrait with the face left of centre, in a portrait frame */
body.cg-site .cg-frame img[src*="photo-about4."]{ object-position: 8% center; }

/* Media page: two recent appearances side by side, and the 9/11 playlist */
.cg-media-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.cg-media-duo .cg-video-thumb{ aspect-ratio: 16 / 9; }
.cg-media-duo .cg-play-circle{ width: 64px; height: 64px; }
.cg-media-duo .cg-video-title-text{ font-size: 1rem; }
.cg-media-duo + .cg-page-actions{ margin-top: 28px; }
.cg-playlist{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.cg-playlist > .cg-video-thumb{ aspect-ratio: 16 / 9; }
.cg-playlist .cg-section-title{ margin-bottom: 20px; }
.cg-playlist-list{ list-style: none; margin: 24px 0 28px; padding: 0; border-top: 1px solid var(--border-light, rgba(11,21,38,0.12)); }
.cg-playlist-list li{ border-bottom: 1px solid var(--border-light, rgba(11,21,38,0.12)); }
.cg-playlist-list a{ display: flex; gap: 14px; padding: 12px 0; color: var(--navy); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.cg-playlist-list a:hover{ color: var(--magenta); }
.cg-playlist-list span{ flex: 0 0 56px; color: var(--magenta); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
@media (max-width: 900px) {
  .cg-media-duo, .cg-playlist{ grid-template-columns: 1fr; }
  .cg-playlist{ gap: 32px; }
}
/* Media page: navy video block straight above the navy contact block, divider instead of a double gap */
.cg-media-section.before-contact{ padding-bottom: 64px; }
.cg-contact.after-media{ padding-top: 0 !important; }
.cg-contact.after-media > .cg-container{ border-top: 1px solid var(--border-dark); padding-top: 64px; }
/* YouTube thumbnails carry their own text: darker base so the caption stays readable */
.cg-media-duo .cg-video-grad, .cg-playlist .cg-video-grad{ background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, transparent 70%); }
/* Homepage: "Meer media" under the video grid */
.cg-media-more{ display: flex; justify-content: center; margin-top: 40px; }

/* Mobile: the three lecture cards get real spacing once stacked (the 2px gap is a column divider on desktop) */
@media (max-width: 1024px) {
  .cg-lezingen-grid{ gap: 16px; }
  .cg-lezing-card{ border-radius: var(--radius); }
}
@media (max-width: 600px) {
  .cg-lezing-card{ padding: 32px 24px; }
}

/* Homepage hero: "Nieuwste boek" label centred above the book */
body.cg-site .cg-book-badge-new{ left: 50%; right: auto; top: -10px; transform: translateX(-50%); white-space: nowrap; }

/* Contact icons (phone, mail, socials): one line-icon style everywhere */
.cg-icon{ width: 16px; height: 16px; display: block; }
body.cg-site .cg-contact-icon{ background: rgba(255,255,255,0.1); color: #fff; }
.cg-footer-social-btn .cg-icon{ width: 16px; height: 16px; }
body.cg-site a.cg-footer-contact{ display: inline-flex; align-items: center; gap: 10px; }
.cg-footer-contact .cg-contact-icon{ width: 28px; height: 28px; }
.cg-footer-contact .cg-icon{ width: 14px; height: 14px; }
.cg-split .cg-contact-direct{ margin-top: 24px; }
.cg-contact-photo{ margin-top: 32px; max-width: 420px; }

/* Book cards: "Bestel nu" as a filled button (the "Charles boeken" style), "Meer info" as a text link */
.cg-book-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 4px; }
body.cg-site a.cg-book-buy{
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff !important; background: var(--magenta); padding: 10px 18px;
  border-radius: var(--radius); transition: background 0.2s; white-space: nowrap;
}
body.cg-site a.cg-book-buy:hover{ background: var(--magenta-light); }
.cg-book-card{ height: 100%; }

/* Single book pages */
.cg-book-hero-inner{ display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: center; }
.cg-book-hero-cover img{ width: 100%; height: auto; border-radius: 4px; box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
.cg-book-body{ max-width: 760px; }
.cg-book-meta{ margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(11,21,38,0.12); font-size: 0.82rem; color: var(--text-body); }
@media (max-width: 900px) {
  .cg-book-hero-inner{ grid-template-columns: 1fr; gap: 36px; }
  .cg-book-hero-cover{ max-width: 220px; }
}

/* Request form: "Bericht" spans both columns (the markup uses .full) */
.cg-form-field.full{ grid-column: 1 / -1; }
.cg-form-field textarea{ min-height: 120px; }
/* The standard request form also sits in the navy request bands of inner pages */
.cg-split > .cg-contact-form{ width: 100%; }

/* Text links inside running text: the site's pink */
body.cg-site .cg-prose a:not(.cg-btn){ color: var(--magenta); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.cg-site .cg-prose a:not(.cg-btn):hover{ color: var(--magenta-light); }

/* Lecture tile: stage photo with Charles nearer the centre */
body.cg-site .cg-lecture-tile img[src*="stage-charles."]{ object-position: 72% center; }

/* Photo next to the request form */
.cg-split .cg-contact-photo.square{ max-width: 360px; }

/* Legal pages */
.cg-legal{ max-width: 780px; }
.cg-legal h2{ font-size: 1.35rem; margin: 40px 0 12px; }
.cg-legal h2:first-of-type{ margin-top: 32px; }
.cg-legal ul{ margin: 0 0 18px; padding-left: 20px; }
.cg-legal li{ margin-bottom: 6px; }
.cg-table-wrap{ overflow-x: auto; margin: 8px 0 22px; }
.cg-legal table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; background: #fff; border-radius: 6px; overflow: hidden; }
.cg-legal th, .cg-legal td{ text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(11,21,38,0.1); }
.cg-legal th{ background: var(--navy); color: #fff; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; }
.cg-legal-date{ margin-top: 36px; font-size: 0.82rem; opacity: 0.75; }
@media (max-width: 600px) {
  /* Tables become one block per row, each cell with its column name */
  .cg-legal thead{ display: none; }
  .cg-legal table, .cg-legal tbody, .cg-legal tr, .cg-legal td{ display: block; width: 100%; }
  .cg-legal tr{ border-bottom: 1px solid rgba(11,21,38,0.12); padding: 8px 0; }
  .cg-legal td{ border: 0; padding: 6px 14px; }
  .cg-legal td::before{ content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); margin-bottom: 2px; }
}

/* Privacy links: under the forms and in the footer */
body.cg-site .cg-form-note a{ color: var(--magenta-light); text-decoration: underline; text-underline-offset: 2px; }
body.cg-site a.cg-footer-legal{ font-size: 0.8rem; color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 3px; }
body.cg-site a.cg-footer-legal:hover{ color: #fff; }

/* Photo grid (earlier lectures) */
.cg-photo-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.cg-photo-grid .cg-frame{ aspect-ratio: 3 / 2; }
body.cg-site .cg-photo-grid .cg-frame img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .cg-photo-grid{ grid-template-columns: 1fr 1fr; gap: 12px; } }
/* Upright photos in the square frame next to the request form: keep the head in view */
body.cg-site .cg-contact-photo.square img{ object-position: center 22%; }

/* Photos next to the request form use the full column width */
body.cg-site .cg-split .cg-contact-photo{ max-width: none; }
/* Text section with a photo beside it (e.g. "Enorme maatschappelijke verandering") */
.cg-split--photo{ align-items: start; }
.cg-split--photo > .cg-prose{ margin-top: 24px; }
.cg-split--photo > .cg-frame{ margin-top: 24px; position: sticky; top: 100px; }
@media (max-width: 1024px) { .cg-split--photo > .cg-frame{ position: static; max-width: 420px; } }
/* Year of publication on book cards */
.cg-book-year{ font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); margin: 0 0 -8px; }

/* ─── 2026-10-08: desktop + mobile refinements ─── */
/* "Voor wie is Charles?": labels, not links, so no hover effect */
.cg-wie-tag, .cg-wie-tag:hover{ border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); cursor: default; transition: none; }

/* Contact page hero: call and mail buttons equally wide */
.cg-page-actions.cg-actions-equal{ display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
.cg-actions-equal .cg-btn{ justify-content: center; text-align: center; }

@media (max-width: 1024px) {
  /* "Waarom Charles?": keep the photo on tablet and mobile, below the list */
  body.cg-site .cg-waarom-right{ display: block; max-width: 440px; margin: 16px 0 28px; }
  body.cg-site .cg-quote-overlay{ left: 16px; right: 16px; bottom: -28px; max-width: none; }

  /* Request forms: the photo goes below the form instead of between text and form */
  .cg-split:has(> .cg-contact-form){ display: flex; flex-direction: column; gap: 0; }
  .cg-split:has(> .cg-contact-form) > div:first-child{ display: contents; }
  .cg-split:has(> .cg-contact-form) > .cg-contact-form{ order: 1; margin-top: 32px; }
  .cg-split:has(> .cg-contact-form) .cg-contact-photo{ order: 2; margin-top: 32px; }
}

@media (max-width: 767px) {
  /* Homepage: no "Voor wie is Charles?" on phones */
  body.cg-site .elementor-widget-html:has(> .cg-voor-wie, > .elementor-widget-container > .cg-voor-wie){ display: none; }

  /* Homepage books: swipeable row instead of a long column */
  body.cg-site .cg-boeken-grid{
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px 12px; scroll-padding: 0 20px; scrollbar-width: none;
  }
  body.cg-site .cg-boeken-grid::-webkit-scrollbar{ display: none; }
  body.cg-site .cg-boeken-grid > .cg-book-card{ flex: 0 0 68%; scroll-snap-align: start; }
}

@media (max-width: 600px) {
  /* Two photos side by side (Dagvoorzitter, Over Charles), smaller instead of stacked */
  body.cg-site .cg-two-photos{ grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 767px) {
  /* "Waarom Charles?" and "Boeken" share the light background once "Voor wie" is hidden: one normal gap, not two */
  body.cg-site #over.cg-waarom{ padding-bottom: 16px; }
}

/* Podcast / radio: click-to-load Spotify player */
.cg-audio-embed{ max-width: 760px; margin-top: 32px; }
.cg-audio-facade{
  display: flex; align-items: center; gap: 20px; width: 100%; padding: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-dark); border-radius: 12px;
  color: #fff; text-align: left; cursor: pointer; font: inherit; transition: border-color 0.2s, background 0.2s;
}
.cg-audio-facade:hover, .cg-audio-facade:focus-visible{ border-color: var(--magenta); background: rgba(255,255,255,0.08); }
.cg-audio-facade img{ width: 104px; height: 104px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.cg-audio-facade .cg-audio-meta{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-audio-facade .cg-audio-show{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta-light); }
.cg-audio-facade .cg-audio-title{ font-family: var(--ff-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.cg-audio-facade .cg-audio-play{ display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.cg-audio-facade .cg-audio-play::before{ content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--magenta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 14px no-repeat; }
.cg-audio-embed iframe{ display: block; border-radius: 12px; border: 0; }
.cg-audio-note{ margin-top: 12px; font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.cg-audio-note a{ color: rgba(255,255,255,0.8); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .cg-audio-facade img{ width: 72px; height: 72px; } .cg-audio-facade{ gap: 14px; } }

/* ─── Cookie banner (cg-consent.php / .js): small card, site style ─── */
.cg-consent[hidden]{ display: none !important; }
.cg-consent{
  position: fixed; left: 24px; bottom: 24px; z-index: 9999; max-width: 380px;
  background: var(--navy-2); color: #fff; border: 1px solid var(--border-dark); border-radius: 10px;
  padding: 20px 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); font-size: 0.85rem; line-height: 1.55;
  animation: cg-consent-in 0.3s ease-out;
}
.cg-consent-title{ font-family: var(--ff-serif); font-weight: 700; font-size: 1.02rem; margin: 0 0 6px; }
.cg-consent-text{ color: rgba(255,255,255,0.72); margin: 0 0 14px; }
body.cg-site .cg-consent-text a{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cg-consent-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-consent-btn{
  font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 14px; border-radius: var(--radius); cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.cg-consent-btn.is-accept{ background: var(--magenta); border: 1px solid var(--magenta); color: #fff; }
.cg-consent-btn.is-accept:hover{ background: var(--magenta-light); }
.cg-consent-btn.is-refuse{ background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff; }
.cg-consent-btn.is-refuse:hover{ border-color: #fff; }
.cg-consent-btn:focus-visible{ outline: 2px solid var(--magenta-light); outline-offset: 2px; }
@keyframes cg-consent-in{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .cg-consent{ animation: none; } }
@media (max-width: 600px){ .cg-consent{ left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 16px 18px; } }
.cg-footer-legal-links{ display: inline-flex; gap: 18px; flex-wrap: wrap; }

/* 404 page: links to the main sections */
.cg-404-links{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.cg-site .cg-404-links a{ display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #fff; border: 1px solid rgba(11,21,38,0.08); border-radius: var(--radius); color: var(--navy); transition: border-color 0.2s, transform 0.2s; }
body.cg-site .cg-404-links a:hover{ border-color: var(--magenta); transform: translateY(-2px); }
.cg-404-links strong{ font-family: var(--ff-serif); font-size: 1.15rem; }
.cg-404-links strong::after{ content: ' →'; color: var(--magenta); }
.cg-404-links span{ font-size: 0.88rem; color: var(--text-body); }
@media (max-width: 900px){ .cg-404-links{ grid-template-columns: 1fr; } }