/* =========================================================
   CPM Group – Shared Stylesheet
   Farbpalette laut Vorgabe:
   Primär (CPM):     #31435E
   Primär (VILS):    #243144  (für spätere Academy-Seiten)
   Abstufungen:      #4A5D78 #647691 #7E90AB #97A9C4 #B0C2DE #D7E2F0
   Hintergrund hell: #F7F8F9
   Akzent (selten):  #FF8E00
   ========================================================= */

:root{
  --primary: #31435E;
  --primary-academy: #243144;
  --shade-1: #4A5D78;
  --shade-2: #647691;
  --shade-3: #7E90AB;
  --shade-4: #97A9C4;
  --shade-5: #B0C2DE;
  --shade-6: #D7E2F0;
  --bg-light: #F7F8F9;
  --accent: #FF8E00;
  --white: #FFFFFF;
  --text-dark: #1C2530;
  --text-muted: #56657C;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(49,67,94,0.10);
  --shadow-sm: 0 4px 14px rgba(49,67,94,0.08);
  --max-width: 1180px;

  /* Dark-mode-aware semantic tokens. Default values below simply point back
     to the existing light-mode tokens, so nothing changes visually until
     html[data-theme="dark"] is set — that block is the only place these get
     redefined. Keeps --primary/--white/--shade-* untouched since those are
     also used as fixed brand-surface colors (buttons, hero, footer, banner)
     that must stay the same in both themes. */
  --surface: var(--white);
  --surface-2: var(--bg-light);
  --surface-3: var(--shade-6);
  --on-surface: var(--text-dark);
  --on-surface-muted: var(--text-muted);
  --border: var(--shade-6);
  --heading: var(--primary);
  --header-surface: rgba(255,255,255,.92);
}

html[data-theme="dark"]{
  --surface: #161D29;
  --surface-2: #1E2733;
  --surface-3: #232E40;
  --on-surface: #EAF0F8;
  --on-surface-muted: #A9B7CC;
  --text-muted: #A9B7CC;     /* light-mode value is dark grey → override for dark mode */
  --primary: #5B8ABF;        /* light-mode #31435E is unreadable on dark bg → lighten */
  --border: #33405A;
  --heading: #8FB2E0;
  --header-surface: rgba(22,29,41,.85);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color: var(--on-surface);
  background: var(--surface);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
img{ max-width:100%; display:block; }
a{ color: var(--heading); text-decoration:none; }
ul{ margin:0; padding:0; }
li{ list-style:none; }
.container{
  width:100%;
  max-width: var(--max-width);
  margin:0 auto;
  padding: 0 24px;
}
section{ padding: 88px 0; }
h1,h2,h3,h4{ margin:0 0 16px; line-height:1.2; font-weight:700; color: var(--heading); font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
h1{ font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size: 1.25rem; }
p{ margin:0 0 16px; color: var(--on-surface-muted); }
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--heading);
  background: var(--surface-3);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.lead{ font-size:1.15rem; color: var(--on-surface-muted); max-width: 720px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  cursor:pointer;
  border:2px solid transparent;
  transition: all .2s ease;
}
.btn-primary{ background: var(--primary); color: var(--white); }
.btn-primary:hover{ background: var(--shade-1); }
.btn-outline{ background:transparent; border-color: var(--shade-4); color: var(--primary); }
.btn-outline:hover{ border-color: var(--primary); }
.btn-accent{ background: var(--accent); color:var(--white); }

/* Dark-mode contrast fix for plain .btn-outline buttons used outside a
   .hero context (e.g. inside content sections, achievement/contact cards) —
   the light-mode navy text/border has poor contrast on the dark theme's
   near-black surface. Written with :where() so its specificity stays equal
   to the base .btn-outline rule above, meaning the existing higher-
   specificity .hero / .hero.hero-photo dark-mode overrides elsewhere in
   this file are completely unaffected and keep working as before. */
:where(html[data-theme="dark"]) .btn-outline{ border-color: var(--shade-2); color: var(--on-surface); }
:where(html[data-theme="dark"]) .btn-outline:hover{ border-color: var(--heading); color: var(--white); }

/* ===================== HEADER / NAV ===================== */
header.site-header{
  position: sticky; top:0; z-index:1000;
  background: var(--header-surface);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  transition: background-color .25s ease, border-color .25s ease;
}
.nav-wrap{
  max-width: var(--max-width);
  margin:0 auto;
  padding: 16px 24px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
/* CPM (non-VILS) nav: push nav + CTA to the right */
header.site-header:not(.vils-header) nav.main-nav{ margin-left:auto; }
.logo{
  font-weight:800;
  font-size:1.3rem;
  color: var(--heading);
  letter-spacing:-.02em;
}
.logo span{ color: var(--accent); }
html[data-theme="dark"] .logo img{ filter: brightness(0) invert(1); }
nav.main-nav > ul{
  display:flex;
  gap:32px;
  align-items:center;
}
nav.main-nav a{
  color: var(--on-surface);
  font-weight:600;
  font-size:.95rem;
}
nav.main-nav a:hover{ color: var(--heading); }
/* Academy Configurator nav button pill — lives in .nav-cta on VILS pages */
a.nav-cfg-btn {
  display:inline-flex; align-items:center; padding:5px 14px;
  border:1.5px solid var(--heading); border-radius:999px;
  color:var(--heading) !important; font-weight:700; font-size:.85rem;
  transition:background .18s ease, color .18s ease;
  line-height:1.4; text-decoration:none;
}
a.nav-cfg-btn:hover {
  background:var(--heading); color:var(--surface) !important;
}
html[data-theme="dark"] a.nav-cfg-btn {
  border-color:var(--shade-2); color:var(--shade-2) !important;
}
html[data-theme="dark"] a.nav-cfg-btn:hover {
  background:var(--shade-2); color:var(--surface) !important;
}
/* In dropdown: plain link, no special treatment */
.nav-cta{ display:flex; align-items:center; gap:12px; margin-left:28px; }
/* Get in touch — pill outline, same style as Academy Configurator button */
.nav-cta a.btn-primary{
  background:transparent;
  border:1.5px solid var(--heading);
  color:var(--heading) !important;
  padding:5px 16px;
  font-weight:700;
  font-size:.85rem;
  line-height:1.4;
}
.nav-cta a.btn-primary:hover{
  background:var(--heading);
  color:var(--surface) !important;
}
html[data-theme="dark"] .nav-cta a.btn-primary{
  border-color:var(--shade-2);
  color:var(--shade-2) !important;
}
html[data-theme="dark"] .nav-cta a.btn-primary:hover{
  background:var(--shade-2);
  color:var(--surface) !important;
}
.menu-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  font-size:1.6rem; color:var(--heading);
}
.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:none; border:none; cursor:pointer;
  color: var(--on-surface);
}
.theme-toggle:hover{ background: var(--surface-2); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
@media (max-width: 880px){
  nav.main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 70px);
    overflow-y:auto;
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav > ul{ flex-direction:column; padding:20px 24px; gap:18px; align-items:flex-start; }
  .menu-toggle{ display:block; }
  .nav-cta .btn{ padding:10px 18px; font-size:.85rem; }
}

/* ===================== DROPDOWN NAV (Consultancy / Training / Software / About us) ===================== */
nav.main-nav li.has-dropdown{ position:relative; display:flex; align-items:center; }
nav.main-nav li.has-dropdown > a{ padding:6px 0; }
.dropdown-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  color: var(--on-surface); font-size:.7rem; opacity:.7;
  padding:6px 4px; margin-left:2px;
}
.dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding:10px;
  min-width:250px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:1100;
}
nav.main-nav li.has-dropdown:hover > .dropdown-menu,
nav.main-nav li.has-dropdown:focus-within > .dropdown-menu{ display:flex; }
.dropdown-menu li{ width:100%; }
.dropdown-menu a{
  display:block; padding:9px 14px; border-radius: var(--radius-sm);
  font-weight:500; font-size:.88rem; white-space:nowrap; color: var(--on-surface);
}
.dropdown-menu a:hover{ background: var(--surface-2); color: var(--heading); }

@media (max-width: 880px){
  nav.main-nav li.has-dropdown{
    flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%;
  }
  nav.main-nav li.has-dropdown > a{ flex:1; }
  .dropdown-toggle{ display:inline-block; }
  .dropdown-menu{
    display:none;
    position:static; transform:none; width:100%;
    box-shadow:none; border:none; border-left:2px solid var(--shade-6);
    margin:10px 0 0 4px; padding:0 0 0 16px; min-width:0;
  }
  nav.main-nav li.has-dropdown.open .dropdown-menu{ display:flex; }
  nav.main-nav li.has-dropdown.open .dropdown-toggle{ transform:rotate(180deg); }
}

/* ===================== LANGUAGE SWITCH ===================== */
.lang-switch{
  display:flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color: var(--shade-3);
}
.lang-switch a{ color: var(--shade-3); }
.lang-switch a.lang-active{ color: var(--heading); pointer-events:none; }
.lang-switch span{ color: var(--shade-5); }
@media (max-width: 880px){
  .lang-switch{ order:-1; margin-right:auto; }
}

/* ===================== VILS HEADER (Training/Academy pages) =====================
   Separate "Universal Block" nav for everything under the Vienna Institute for
   Leadership and Sales, so visitors who land directly on a training page get a
   focused, training-only navigation instead of the full 3-pillar CPM Group menu. */
.vils-header{ border-top:3px solid var(--primary-academy); }
.vils-header .logo img{ height:40px; }

/* Top banner above the main nav: "by CPM Group GmbH" + DE/EN, both top-right
   (mirrors how this lived as its own banner above the nav on the old
   ClickFunnels Vienna Institute page). */
.vils-topbar{ background: var(--surface-2); border-bottom:1px solid var(--border); }
.vils-topbar-inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding:6px 24px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
}
.vils-by-cpm{ font-size:.68rem; font-weight:600; color:var(--shade-3); text-decoration:none; }
.vils-by-cpm:hover{ color:var(--heading); text-decoration:underline; }

/* DE/EN now lives in .vils-topbar, so pull the remaining nav items rightward.
   Academy Configurator button lives in .nav-cta (after the nav), matching
   CPM's "Get in Touch" placement so it sits at the far right. */
.vils-header .nav-wrap{ justify-content:flex-start; }
.vils-header nav.main-nav{ margin-left:auto; margin-right:0; }
.vils-header nav.main-nav > ul{ gap:22px; }
.vils-header nav.main-nav a{ font-size:.88rem; }
@media (max-width:880px){
  .vils-header nav.main-nav{ margin-right:0; }
  .vils-topbar .lang-switch{ order:0; margin-right:0; }
}

/* ===================== HERO ===================== */
.hero{
  background: linear-gradient(135deg, var(--primary) 0%, var(--shade-1) 100%);
  color:var(--white);
  padding: 80px 0;
  min-height: 70vh;
  display:flex;
  align-items:center;
}
@media (max-width:640px){ .hero{ min-height:60vh; padding:64px 0; } }
.hero h1, .hero p{ color: var(--white); }
.hero .eyebrow{ background: rgba(255,255,255,.15); color: var(--white); }
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:center;
}
@media (max-width: 880px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 28px;}
.hero .btn-outline{ border-color: rgba(255,255,255,.5); color:var(--white); }
.hero .btn-outline:hover{ border-color:var(--white); }

/* Homepage-only variant: light photo background instead of the navy gradient.
   Scoped to the combo class so offering.html/pricing.html (plain .hero, dark
   gradient + white text) are untouched. The source photo is a very light/
   white graphic, so text switches from white to the standard dark palette. */
.hero.hero-photo{
  background-color: var(--white);
  background-image: url('../img/home/homepage-header.jpg');
  background-size: cover;
  background-position: center;
}
.hero.hero-photo h1{ color: var(--primary); }
.hero.hero-photo p{ color: var(--text-dark); }
.hero.hero-photo .eyebrow{ background: var(--shade-6); color: var(--primary); }
.hero.hero-photo .btn-outline{ border-color: var(--shade-4); color: var(--primary); }
.hero.hero-photo .btn-outline:hover{ border-color: var(--primary); }

/* Cert strip: multiply blend in light mode, invert for dark mode */
.cert-strip-img { mix-blend-mode: multiply; }
html[data-theme="dark"] .cert-strip-img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
html[data-theme="dark"] .iso-badge {
  border-color: rgba(255,255,255,.7) !important;
}
html[data-theme="dark"] .iso-badge div {
  color: rgba(255,255,255,.9) !important;
}

/* Dark mode: swap to a dedicated dark-toned version of the same hexagon photo
   (provided by Becca) instead of darkening the light photo with a heavy
   overlay — that overlay was washing out the hexagon pattern. The photo is
   already dark, so only a light overlay is needed for text contrast. */
html[data-theme="dark"] .hero.hero-photo{
  position: relative;
  background-image: url('../img/home/homepage-header-dark.jpg');
}
html[data-theme="dark"] .hero.hero-photo::before{
  content:""; position:absolute; inset:0; background: rgba(6,9,15,.3);
}
html[data-theme="dark"] .hero.hero-photo .container{ position:relative; z-index:1; }
html[data-theme="dark"] .hero.hero-photo h1,
html[data-theme="dark"] .hero.hero-photo p{ color: var(--white); }
html[data-theme="dark"] .hero.hero-photo .eyebrow{ background: rgba(255,255,255,.18); color: var(--white); }
html[data-theme="dark"] .hero.hero-photo .btn-outline{ border-color: rgba(255,255,255,.5); color: var(--white); }
html[data-theme="dark"] .hero.hero-photo .btn-outline:hover{ border-color: var(--white); }

/* Looping wave video background — homepage hero only (.has-bg-video).
   The <video> sits as a child on top of the existing .hero-photo
   background-image, so if it's hidden (mobile/reduced-motion) or hasn't
   loaded yet, the static photo already in place shows through automatically
   — no JS fallback required. Scoped to .has-bg-video so it never affects
   any other page's .hero-photo / .page-hero-photo usage.
   Full-screen: this hero should fill the viewport like a splash screen
   (homepage only, per Becca) rather than use the shared 70vh .hero default —
   the 3-class selector already outweighs the 70vh/60vh rules above regardless
   of source order, so one rule here is enough for all breakpoints. */
.hero.hero-photo.has-bg-video{ position:relative; overflow:hidden; min-height:100vh; min-height:100dvh; }
.hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
/* The video hero always gets the same dark-overlay + white-text treatment
   as dark mode, regardless of the site theme toggle — a lighter/white wash
   looked washed-out against this footage, so light mode no longer gets a
   different (brighter) version. */
.hero.hero-photo.has-bg-video::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: rgba(6,9,15,.45);
}
.hero.hero-photo.has-bg-video .container{ position:relative; z-index:2; }
.hero.hero-photo.has-bg-video h1,
.hero.hero-photo.has-bg-video p{
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
/* Homepage video hero: slightly larger headline + balanced line-wrapping
   so long titles don't orphan a single word on the last line.
   text-wrap:balance is progressive enhancement — older browsers ignore it. */
.hero.hero-photo.has-bg-video h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  text-wrap: balance;
}
.hero.hero-photo.has-bg-video .eyebrow{ background: rgba(255,255,255,.18); color: var(--white); }
.hero.hero-photo.has-bg-video .btn-outline{ border-color: rgba(255,255,255,.5); color: var(--white); }
.hero.hero-photo.has-bg-video .btn-outline:hover{ border-color: var(--white); }
/* Disable the video (battery/bandwidth + motion sensitivity) and fall back
   to the static background-image that's already on .hero-photo. */
@media (max-width:768px){ .hero-bg-video{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero-bg-video{ display:none; } }

/* placeholder image blocks (real photos/logos to be added later) */
.placeholder-img{
  background: var(--shade-6);
  border:2px dashed var(--shade-4);
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--text-muted);
  font-size:.85rem;
  padding:24px;
  min-height:160px;
}
.placeholder-img.round{ border-radius:50%; aspect-ratio:1/1; min-height:0; width:96px; height:96px; padding:8px; font-size:.65rem; }

/* ===================== LOGO STRIP ===================== */
/* Background intentionally stays literal white in BOTH light and dark mode:
   several client logos' corporate design guidelines only permit use on a
   white background, so this section must not follow --surface/dark theme. */
.logo-strip{ padding: 28px 0 0; background: var(--white); }
.logo-strip-grid{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
}
@media (max-width:880px){
  .logo-strip-grid{ justify-content:center; }
}
.logo-strip-grid .placeholder-img{ width:130px; height:60px; min-height:0; font-size:.6rem; }
.logo-strip-grid img.placeholder-img,
.logo-strip-grid img.cert-logo{ width:auto; height:95px; max-width:240px; }

/* ===================== HOMEPAGE: TRUST INTRO TEXT ===================== */
/* Calm, light-weight tracked caption — keeps the original all-caps trust-bar
   convention but with a thinner, quieter font weight instead of the old
   default-weight text. Scoped to the homepage only. */
.page-home .trust-intro{
  text-align:center;
  font-size:.75rem;
  font-weight:300;
  letter-spacing:.07em;
  text-transform:uppercase;
  color: var(--text-muted);
  margin:0 0 10px;
}
.page-home .logo-strip{ padding:18px 0 6px; }
html[data-theme="dark"] .page-home .trust-intro{ color: var(--on-surface-muted); }

/* ===================== HOMEPAGE: LOGO WALL (TRUST SECTION) =====================
   Homepage-only replacement for the scrolling marquee above: a calm two-column
   layout — bigger headline on the left, a 3x2 grid of client logos on the
   right. Each tile independently cross-fades to a new, randomly-picked logo
   on its own staggered timer (see assets/js/logo-wall.js), so the wall never
   "refreshes" all at once. New, dedicated classes — the .logo-marquee
   component itself is untouched and still used on the 5 Consultancy pages
   (task #183).
   Light mode: literal white background, same reasoning as .logo-strip above
   (several client logos may only be used on white) — logos sit directly on
   the section background, no individual boxes needed.
   Dark mode: the section itself goes to a dark surface tone, but each logo
   still needs its own white box underneath it for the same brand-guideline
   reason — rounded white tiles on a dark background instead of a literal
   white band. */
.trust-wall{ padding:64px 0; background:var(--white); }
/* Dark mode: must read as its own band, distinct from BOTH neighbors —
   the Three Pillars section above sits on --surface-2, and Testimonials
   below sits on --surface-3 — so this uses the base --surface tone, which
   differs from both, mirroring how light mode steps from off-white up to
   literal white here. */
html[data-theme="dark"] .trust-wall{ background: var(--surface); }
.trust-wall-grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:48px; align-items:center;
}
.trust-wall-heading{
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height:1.25; color:var(--heading); margin:0;
}
.logo-wall{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.logo-wall-cell{
  display:flex; align-items:center; justify-content:center;
  height:150px; padding:8px;
}
html[data-theme="dark"] .logo-wall-cell{
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.logo-wall-cell img{
  max-width:200px; max-height:110px; width:auto; height:auto; object-fit:contain;
  opacity:1; transition: opacity 1.2s ease;
}
.logo-wall-cell img.is-fading{ opacity:0; }
@media (max-width:880px){
  .trust-wall-grid{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .logo-wall{ max-width:460px; margin:0 auto; }
}
@media (max-width:480px){
  .logo-wall{ grid-template-columns: repeat(2, 1fr); }
}

/* ===================== HOMEPAGE: CERTIFICATIONS BAND ===================== */
/* Same reasoning as the logo strip above: these certification badges
   (ISO, Top Arbeitgeber, Everything DiSC...) are delivered as opaque
   JPG/PNG files with a baked-in white background, so in light mode this
   band stays literal white instead of following --surface — otherwise the
   badges show up as harsh white rectangles on a dark page.
   Dark mode: same fix as the logo wall above — darker section background,
   each badge gets its own white rounded box instead of the whole band
   forcing literal white.
   Tiles are normalised to one consistent height (object-fit:contain) and
   centered with even spacing, instead of the old boxed/padded chip look
   fighting the very different native sizes of each badge file. Only 6
   badges exist, so unlike the logo wall above this band stays static —
   no rotation/JS needed.
   Layout mirrors the logo wall above it: label text on one side, logos on
   the other — instead of stacking both centered, so it reads as the same
   kind of "trust band" composition. */
/* Light mode: --surface-3 = #D7E2F0 (light blue-gray), distinct from
   Podcast above (body default = --surface = white) and Contact below
   (--surface-2 = #F7F8F9). Dark mode: --surface-3 = #232E40, distinct from
   Podcast (--surface = #161D29) and Contact (--surface-2 = #1E2733).
   A single token covers both themes correctly. */
.cert-band{ background: var(--surface-3); padding:40px 0; display:block; width:100%; margin:0; }
.cert-band-grid{
  display:grid; grid-template-columns: 1fr 2fr; gap:32px; align-items:center;
}
.cert-row{
  display:grid; grid-auto-flow:column; grid-template-rows: repeat(2, auto);
  column-gap:20px; row-gap:16px; justify-content:flex-start; align-items:center;
}
@media (max-width:880px){
  .cert-band-grid{ grid-template-columns:1fr; gap:16px; text-align:center; }
  .cert-band-grid .cert-row{ display:flex; flex-wrap:wrap; justify-content:center; }
}
/* White rounded box on every badge in both light and dark mode — the
   surface-3 background (blue-gray in light, dark in dark) makes the boxes
   visible in both themes without needing separate dark-mode overrides. */
.cert-row img.cert-logo{
  display:block; border:none; color:transparent;
  height:110px; width:100%; max-width:220px; object-fit:contain;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}
.cert-row img.cert-logo-iso{ max-width:280px; }
/* Top Arbeitgeber: same box height as the other badges (110px), logo
   appears smaller inside via extra vertical padding (20px top+bottom
   vs 12px for the others). No row-spanning — each badge sits in its
   own grid cell, same height as ISO and DiSC. */
.cert-row img.cert-logo-tall{
  max-width: 170px;
  padding: 20px 12px;
}
@media (max-width:880px){
  .cert-row img.cert-logo{ height:70px; max-width:150px; padding:8px; }
  .cert-row img.cert-logo-iso,
  .cert-row img.cert-logo-tall{ height:70px; max-width:150px; padding:8px; }
}

/* ===================== PILLARS / CARDS ===================== */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:48px; }
@media (max-width: 980px){ .pillars{ grid-template-columns:1fr; } }
.pillar-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:32px;
  box-shadow: var(--shadow-sm);
}
.pillar-card h3{ color: var(--heading); margin-bottom:20px; }
.pillar-card .sub-block{
  margin-bottom:0; border-bottom:1px solid var(--border); padding:16px 0;
}
.pillar-card .sub-block:first-of-type{ padding-top:0; }
.pillar-card .sub-block:last-child{ margin-bottom:0; border-bottom:none; padding-bottom:0; }
.pillar-card .sub-block h4{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--on-surface-muted); margin-bottom:0;
}
.pillar-card .sub-block summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pillar-card .sub-block summary::-webkit-details-marker{ display:none; }
.pillar-card .sub-block summary::after{
  content:"+"; flex-shrink:0; font-size:1rem; font-weight:700; color:var(--shade-3); line-height:1;
}
.pillar-card .sub-block[open] summary::after{ content:"\2212"; color:var(--heading); }
.pillar-card .sub-block ul{ margin-top:18px; margin-bottom:0; }
.pillar-card .sub-block ul li:last-child{ margin-bottom:0; }
.pillar-card ul li{
  position:relative; padding-left:20px; margin-bottom:12px; color:var(--on-surface-muted); font-size:.95rem;
}
.pillar-card ul li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%; background: var(--shade-4);
}
.pillar-card a.learn-more{ font-weight:700; font-size:.9rem; display:inline-block; margin-top:8px; }

/* ===================== PRIME / CTA BANNER ===================== */
.banner{
  background: var(--primary-academy);
  color:var(--white);
  border-radius: var(--radius);
  padding:56px;
  text-align:center;
  margin-top:40px;
}
.banner h2, .banner p{ color:var(--white); }
.banner p{ color: var(--shade-5); }

/* ===================== TESTIMONIALS ===================== */
.testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:48px; }
@media (max-width:980px){ .testimonials{ grid-template-columns:1fr; } }
.testimonial-card{
  background: var(--surface-2);
  border-radius: var(--radius);
  padding:28px;
}
.testimonial-card .person{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.testimonial-card .person h4{ margin:0; font-size:1rem; color: var(--on-surface); }
.testimonial-card .person span{ font-size:.82rem; color: var(--on-surface-muted); }
.testimonial-card blockquote{ margin:0; font-style:italic; color: var(--on-surface); }

/* ===================== CASE STUDIES / BLOG CARDS ===================== */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:48px; }
@media (max-width:980px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){ .card-grid{ grid-template-columns: 1fr; } }
.media-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column;
}
.media-card .placeholder-img{ border-radius:0; border-width:0 0 1px 0; }
.media-card .media-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.media-card .media-body .date{ font-size:.78rem; color: var(--on-surface-muted); font-weight:600; margin-bottom:8px; }
.media-card .media-body h3{ font-size:1.05rem; margin-bottom:14px; }
.media-card .media-body a.learn-more{ margin-top:auto; font-weight:700; font-size:.88rem; }

/* ===================== FORM / CONTACT ===================== */
.contact-section{ background: var(--surface-2); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
/* Modifier for sections where the photo column should hug the photo's own
   width (e.g. homepage) instead of taking an equal 1fr share, so the form
   next to it gets the freed-up width. Only active above the stacking
   breakpoint so mobile keeps the normal single-column .contact-grid rule. */
@media (min-width:881px){
  .contact-grid.contact-grid-photo-wide{ grid-template-columns: 360px 1fr; }
}
form.lead-form{
  background:var(--surface);
  border-radius: var(--radius);
  padding:32px;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
form.lead-form label{ font-size:.85rem; font-weight:600; color: var(--on-surface); margin-bottom:-10px; }
form.lead-form input, form.lead-form textarea{
  padding:13px 16px;
  border:1.5px solid var(--shade-5);
  border-radius: var(--radius-sm);
  font-size:.95rem;
  font-family:inherit;
  color: var(--on-surface);
  background: var(--surface);
}
html[data-theme="dark"] form.lead-form input,
html[data-theme="dark"] form.lead-form textarea{ border-color: var(--border); }
form.lead-form input:focus, form.lead-form textarea:focus{
  outline:none; border-color: var(--heading);
}
form.lead-form .btn{ align-self:flex-start; border:none; }
.form-note{ font-size:.78rem; color: var(--on-surface-muted); }

/* ===================== VALUES (about page) ===================== */
.values-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; margin-top:48px; }
@media (max-width:880px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{ display:flex; gap:20px; align-items:flex-start; }
.value-card .placeholder-img{ width:64px; height:64px; min-height:0; flex-shrink:0; border-radius:50%; font-size:.55rem; }
.value-card h3{ margin-bottom:6px; color:var(--heading); }

/* ===================== VALUES WITH PHOTOS (about page) ===================== */
.value-photo-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; margin-top:48px; }
@media (max-width:880px){ .value-photo-grid{ grid-template-columns:1fr; } }
.value-photo-card{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
}
.value-photo-card img.placeholder-img{ width:100%; height:190px; object-fit:cover; border-radius:0; }
.value-photo-card .value-photo-body{ padding:24px; }
.value-photo-card h3{ margin-bottom:8px; color:var(--heading); }
.value-photo-card p{ margin:0; }

/* About page only: headings in dark blue instead of the default near-black text */
.page-about h2{ color: var(--heading); }

/* Jobs page only: 6 real photos look better in 3 columns, with a slightly taller
   image box so the wide (16:9) source photos aren't cropped too aggressively. */
.page-jobs .value-photo-grid{ grid-template-columns: repeat(3,1fr); }
.page-jobs .value-photo-card img.placeholder-img{ height:200px; }
@media (max-width:980px){ .page-jobs .value-photo-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .page-jobs .value-photo-grid{ grid-template-columns: 1fr; } }

/* achievements */
.achievements-list{ display:grid; gap:16px; margin-top:32px; }
.achievement-item{
  display:flex; gap:16px; align-items:flex-start;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding:18px 20px;
}
.achievement-item .dot{
  flex-shrink:0; width:10px; height:10px; border-radius:50%; background: var(--primary); margin-top:7px;
}
.achievement-item strong{ color: var(--on-surface); }

/* ===================== FOOTER ===================== */
footer.site-footer{
  background: var(--primary-academy);
  color: var(--shade-6);
  padding: 64px 0 32px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:880px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
footer.site-footer h4{ color:var(--white); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
footer.site-footer a{ color: var(--shade-5); display:block; margin-bottom:10px; font-size:.92rem; }
footer.site-footer a:hover{ color:var(--white); }
footer.site-footer .legal-line{ font-size:.8rem; color: var(--shade-4); margin-top:24px; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; font-size:.8rem; color: var(--shade-4);
}
.social-row{ display:flex; gap:14px; margin-top:8px; }
.social-row a{ margin-bottom:0; }

/* ===================== PAGE HEADER (sub pages) ===================== */
.page-hero{
  background: var(--bg-light);
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--shade-6);
}
.page-hero h1{ color: var(--primary); }

/* Page-hero variant with a photo background (e.g. About us) — added via an
   extra .page-hero-photo class + inline background-image, so plain
   .page-hero pages elsewhere are unaffected. */
.page-hero.page-hero-photo{
  position:relative; border-bottom:none; background-color:var(--primary);
  background-size:cover; background-position:center; padding:80px 0;
  min-height:100vh; display:flex; align-items:center;
  overflow:hidden;
}
@media (max-width:640px){ .page-hero.page-hero-photo{ min-height:80vh; padding:64px 0; } }
.page-hero.page-hero-photo::before{
  content:""; position:absolute; inset:0; background:rgba(18,28,46,.6);
}
.page-hero.page-hero-photo .container{ position:relative; z-index:1; }
.page-hero.page-hero-photo .eyebrow{ background:rgba(255,255,255,.18); color:var(--white); }
.page-hero.page-hero-photo h1,
.page-hero.page-hero-photo .lead{ color:var(--white); max-width:none; }
.page-hero.page-hero-photo .hero-subheadline{ color:var(--white); }
.page-hero.page-hero-photo .btn-outline{ border-color:rgba(255,255,255,.5); color:var(--white); }
.page-hero.page-hero-photo .btn-outline:hover{ border-color:var(--white); }

/* misc */
.text-block{ max-width: 760px; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:flex-start; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; } }
hr.divider{ border:none; border-top:1px solid var(--shade-6); margin: 48px 0; }

/* Hero subheadline: a secondary line between H1 and the .lead paragraph,
   used where the H1 needs to clearly name a product/offering while a
   previous framing phrase still adds value as a supporting line. */
.hero-subheadline{ font-size:1.15rem; font-weight:600; color:var(--heading); margin:6px 0 12px; }

/* Small square icon at the top of a .pillar-card (scoped addition — does
   not change .pillar-card layout on pages that don't use this class). */
.pillar-icon{ width:56px; height:56px; object-fit:contain; margin-bottom:16px; }

/* Compact, non-boxed bullet list (no background/padding per item) — an
   alternative to .achievement-item for sections that need tighter spacing. */
.dot-list{ list-style:none; margin:0; padding:0; }
.dot-list li{ position:relative; padding-left:20px; margin-bottom:8px; }
.dot-list li::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--primary); }
.dot-list li:last-child{ margin-bottom:0; }

/* Vertical numbered timeline (e.g. "How It Works" 1-2-3 steps) — a line
   connecting circular step markers, sized via flex stretch from a sibling
   text column rather than a fixed height. */
.timeline-wrap{ position:relative; width:60px; flex-shrink:0; }
.timeline-line{
  position:absolute; left:50%; top:18px; bottom:18px; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, var(--primary-academy), var(--shade-2), var(--shade-5));
  z-index:0;
}
.timeline-step{
  position:absolute; left:50%; width:40px; height:40px;
  transform:translateX(-50%);
  border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:600; color:var(--primary-academy);
  box-sizing:border-box; z-index:1;
}
.timeline-step.step-1{ top:0; border:2px solid var(--primary-academy); }
.timeline-step.step-2{ top:50%; transform:translate(-50%,-50%); border:2px solid var(--shade-2); }
.timeline-step.step-3{ bottom:0; border:2px solid var(--shade-5); }

/* ===================== REAL PHOTOS / LOGOS ===================== */
/* When a placeholder div becomes a real <img>, drop the dashed "placeholder"
   look but keep the same sizing rules (round/.logo-strip-grid etc.) */
img.placeholder-img{
  border:none; background:none; padding:0; color:transparent;
  display:block; object-fit:cover;
}
.logo-strip-grid img.placeholder-img,
.logo-strip-grid img.cert-logo{
  object-fit:contain; background:var(--white); padding:16px;
  border-radius: var(--radius-sm);
}

/* Header / footer logo */
.logo img{ height:48px; display:block; }
.footer-logo img{ height:30px; display:block; filter:brightness(0) invert(1); opacity:.95; }

/* Scrolling client-logo marquee (replaces the old looping ClickFunnels strip) —
   full-bleed: sits directly inside <section class="logo-strip"> (white bg),
   outside .container, so it really runs edge-to-edge. */
.logo-marquee{
  width:100%; overflow:hidden; background:var(--white); padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.logo-marquee-track{
  display:flex; align-items:center; gap:64px; width:max-content;
  animation: logo-scroll 32s linear infinite;
}
.logo-marquee:hover .logo-marquee-track{ animation-play-state: paused; }
.logo-marquee-track img{
  height:100px; width:auto; max-width:260px; object-fit:contain;
}
@media (max-width:880px){
  .logo-marquee-track img{ height:64px; max-width:170px; }
  .logo-marquee-track{ gap:40px; }
}
@keyframes logo-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}

/* Named contact photo (Ansprechpartner) */
.contact-person{ display:flex; align-items:center; gap:14px; margin-top:24px; }
.contact-person img{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid var(--shade-6);
}
.contact-person p{ margin:0; color:var(--text-dark); font-weight:600; }
.contact-person .contact-person-info{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.contact-person .calendar-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:700; color: var(--primary);
}

/* Contact photo card with caption overlay on the lower portion of the
   photo (jobs.html – Apply Now / Astrid). Deliberately separate from
   .contact-person so the circular-avatar pattern used elsewhere is
   untouched. */
.contact-photo-card{
  position:relative; max-width:360px; margin-top:24px;
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.contact-photo-card img{
  display:block; width:100%; aspect-ratio: 3/4;
  object-fit:cover; object-position: top center;
}
.contact-photo-card-info{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(to top, rgba(18,28,46,.92) 0%, rgba(18,28,46,.8) 55%, rgba(18,28,46,0) 100%);
  padding:32px 18px 16px; display:flex; flex-direction:column; gap:6px;
}
.contact-photo-card-info p{ margin:0; color:var(--white); font-weight:700; font-size:1rem; }
.contact-photo-card-info span{ color: rgba(255,255,255,.85); font-size:.82rem; line-height:1.4; }
.contact-photo-card-info a{ color:var(--white); font-size:.88rem; font-weight:600; }
.contact-photo-card-info a:hover{ text-decoration:underline; }

/* Award banner with badge image (jobs.html) */
.banner-with-badge{ display:flex; align-items:center; justify-content:flex-start; gap:40px; flex-wrap:wrap; text-align:left; }
.banner-with-badge .badge-group{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.banner-with-badge img{ height:140px; width:auto; border-radius:var(--radius-sm); flex-shrink:0; }
.banner-with-badge .banner-text{ max-width:420px; }
.banner-with-badge .banner-text h2, .banner-with-badge .banner-text p{ text-align:left; margin:0 0 8px; }
@media (max-width:600px){ .banner-with-badge{ justify-content:center; text-align:center; } .banner-with-badge .banner-text{ text-align:center; } .banner-with-badge .banner-text h2, .banner-with-badge .banner-text p{ text-align:center; } }

/* This badge banner reuses .banner for spacing, but the dark CTA background
   from .banner doesn't suit a white award-certificate image — switch it to a
   light card instead. Scoped to the combo class so the dark .banner CTA used
   on other pages (CPM Prime, etc.) is untouched. */
.banner.banner-with-badge{
  background: var(--white);
  border: 1px solid var(--shade-6);
  box-shadow: var(--shadow-sm);
}
.banner.banner-with-badge h2{ color: var(--primary); }
.banner.banner-with-badge p{ color: var(--text-muted); }

/* ===================== COOKIE CONSENT ===================== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:3000;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(49,67,94,0.12);
  padding:24px; transform:translateY(110%); transition: transform .35s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width: var(--max-width); margin:0 auto;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between;
}
.cookie-banner-inner p{ margin:0; color:var(--on-surface-muted); font-size:.92rem; max-width:640px; flex:1 1 320px; }
.cookie-banner-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-banner-actions .btn{ padding:11px 22px; font-size:.88rem; white-space:nowrap; }

.cookie-modal{ position:fixed; inset:0; z-index:3100; display:none; }
.cookie-modal.is-open{ display:block; }
.cookie-modal-backdrop{ position:absolute; inset:0; background:rgba(18,28,46,.55); }
.cookie-modal-dialog{
  position:relative; z-index:1; background:var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); max-width:520px; width:92%; margin:8vh auto 0; padding:32px;
  max-height:82vh; overflow-y:auto;
}
.cookie-modal-dialog h3{ margin-bottom:8px; color:var(--heading); }
.cookie-modal-dialog > p{ font-size:.92rem; margin-bottom:24px; }
.cookie-category{ border-top:1px solid var(--border); padding:16px 0; }
.cookie-category:first-of-type{ border-top:none; padding-top:0; }
.cookie-category-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; color:var(--on-surface); }
.cookie-category p{ margin:6px 0 0; font-size:.85rem; }
.cookie-modal-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.cookie-modal-actions .btn{ padding:11px 22px; font-size:.88rem; }

/* simple toggle switch */
.switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; cursor:pointer; inset:0; background:var(--shade-5);
  border-radius:999px; transition:.2s;
}
.switch .slider::before{
  content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:var(--white); border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:var(--primary); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
.switch.disabled .slider{ background:var(--shade-4); cursor:not-allowed; }

@media (max-width:640px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1; justify-content:center; }
}

/* ===================== TEAM (VILS team.html) ===================== */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:48px; }
@media (max-width:980px){ .team-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){ .team-grid{ grid-template-columns: 1fr; } }
.team-card{
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.team-card img{ width:100%; height:280px; object-fit:cover; object-position:center top; display:block; }
.team-card-body{ padding:24px; }
.team-card-body h3{ margin-bottom:2px; color:var(--heading); }
.team-card-body span{ display:block; font-size:.82rem; color:var(--on-surface-muted); margin-bottom:14px; }
.team-card-body blockquote{ margin:0; font-style:italic; font-size:.92rem; color:var(--on-surface); }

/* ===================== BUBBLE-ICON LIST (hunting-engine.html pillars) ===================== */
/* Scoped, reusable alternative to plain .pillar-card ul/li bullets: a small
   circular "bubble" icon swatch next to a label + description. Does not
   touch .pillar-card ul/li, so every other page keeps its plain bullets. */
.bubble-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.bubble-item{ display:flex; align-items:flex-start; gap:14px; }
.icon-bubble{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background: var(--surface-3);
  display:flex; align-items:center; justify-content:center;
}
.icon-bubble svg{ width:20px; height:20px; stroke: var(--heading); }
.bubble-item p{ margin:0; font-size:.95rem; color: var(--on-surface-muted); }
.bubble-item strong{ color: var(--on-surface); }

/* ===================== MODULE CARD GRID (hunting-engine.html My Sales DNA) ===================== */
/* Narrow left column (bubble label + photo) next to a wider right column
   (heading + supporting content) inside a .pillar-card. Scoped class, so
   plain .pillar-card pages elsewhere are unaffected. */
.module-card-grid{ display:grid; grid-template-columns: 200px 1fr; gap:28px; align-items:start; }
@media (max-width:760px){ .module-card-grid{ grid-template-columns:1fr; } }
.module-card-grid img{ border-radius:12px; }

/* ===================== TESTIMONIAL SLIDER (hunting-engine.html) ===================== */
/* Shows 3 testimonial cards at a time with prev/next arrow controls. Scoped
   to .testimonial-slider so the plain static .testimonials grid used on
   other pages is completely unaffected. JS lives in assets/js/main.js. */
.testimonial-slider{ position:relative; margin-top:48px; }
.testimonial-track-viewport{ overflow:hidden; width:100%; }
.testimonial-track{ display:flex; gap:28px; transition: transform .35s ease; }
.testimonial-track .testimonial-card{ flex:0 0 calc((100% - 56px) / 3); background:transparent; border-radius:0; padding:40px 44px; border-right:1px solid var(--border); }
@media (max-width:980px){ .testimonial-track .testimonial-card{ flex:0 0 calc(100% - 80px); } }
@media (max-width:540px){ .testimonial-track .testimonial-card{ flex:0 0 100%; } }
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background: var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1; color: var(--heading); cursor:pointer;
  transition: background-color .2s ease, border-color .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.slider-prev{ left:-22px; }
.slider-next{ right:-22px; }
.slider-arrow:hover{ background: var(--surface-3); }
.slider-arrow:disabled{ opacity:.35; cursor:default; }
.slider-arrow[hidden]{ display:none; }

/* Podcast section responsive */
@media (max-width:860px){ .podcast-grid{ grid-template-columns:1fr !important; gap:40px !important; } }

/* ===================== STATS BAND ===================== */
/* Dark accent bar below a page hero — big numbers + short labels.
   Uses --primary (fixed brand navy) so it reads the same in both themes. */
.stats-band{ background:var(--primary); padding:32px 0; }
.stats-band-grid{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:20px 48px; text-align:center; }
.stats-band-item{ color:var(--white); }
.stats-band-num{ display:block; font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:clamp(2rem,3.5vw,2.8rem); font-weight:700; line-height:1; }
.stats-band-label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; opacity:.72; margin-top:6px; }

/* ===================== CPM PRIME: STEPS GRID ===================== */
.prime-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.prime-step{ background:var(--surface-2); border-radius:var(--radius); padding:28px 24px; }
.prime-step-num{ font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:2.2rem; font-weight:700; color:var(--primary); opacity:.25; display:block; line-height:1; margin-bottom:12px; }
html[data-theme="dark"] .prime-step-num{ color:var(--heading); }
.how-step-num{ font-size:2.4rem; font-weight:800; color:var(--primary); opacity:.15; font-family:'Space Grotesk',sans-serif; line-height:1; margin-bottom:12px; }
html[data-theme="dark"] .how-step-num{ color:var(--heading); opacity:.5; }
.prime-step h3{ margin-bottom:8px; font-size:1.1rem; }
.prime-step p{ margin:0; color:var(--on-surface-muted); font-size:.93rem; }
@media(max-width:880px){ .prime-steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .prime-steps{ grid-template-columns:1fr; } }

/* ===================== CPM PRIME: TARGET CARDS (who it's for) ===================== */
.target-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px; }
.target-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 28px; }
.target-badge{ font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:1.2rem; font-weight:700; color:var(--primary); margin-bottom:6px; }
html[data-theme="dark"] .target-badge{ color:var(--heading); }
.target-card h4{ margin:0 0 8px; }
.target-card p{ margin:0; color:var(--on-surface-muted); font-size:.93rem; }
@media(max-width:640px){ .target-grid{ grid-template-columns:1fr; } }

/* ===================== CPM PRIME: PULL QUOTE ===================== */
.prime-quote{ margin:0; }
.prime-quote > p{ font-size:clamp(1.1rem,2vw,1.35rem); font-style:italic; color:var(--heading); line-height:1.55; margin-bottom:24px; }
.prime-quote footer{ display:flex; align-items:center; gap:16px; }
.prime-quote-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.prime-quote footer strong{ display:block; color:var(--heading); margin-bottom:2px; }
.prime-quote footer span{ font-size:.85rem; color:var(--on-surface-muted); }

/* ===================== CPM TOPBAR — mirrors VILS topbar exactly ===================== */
.cpm-topbar{ background:var(--surface-2); border-bottom:1px solid var(--border); }
.cpm-topbar-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:6px 24px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
}
.cpm-topbar-inner .lang-switch{ display:flex; align-items:center; gap:4px; }
.cpm-topbar-inner .lang-switch a{ font-weight:600; color:var(--shade-3); text-decoration:none; }
.cpm-topbar-inner .lang-switch a.lang-active{ color:var(--heading); }
.cpm-topbar-inner .lang-switch span{ opacity:.35; }
/* theme toggle — same default 36px as VILS topbar (no override needed) */

/* ===================== SEARCH TOGGLE BUTTON ===================== */
.search-toggle{
  background:none;
  border:none;
  cursor:pointer;
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--shade-3);
  transition:color .15s;
  line-height:1;
}
.search-toggle:hover{ color:var(--heading); }
.search-toggle svg{ width:16px; height:16px; }
/* VILS topbar — inherit the topbar text colour */
.vils-topbar-inner .search-toggle{ color:var(--shade-3); }
.vils-topbar-inner .search-toggle:hover{ color:var(--heading); }
.vils-topbar-inner .search-toggle svg{ width:16px; height:16px; }

/* ===================== SITE SEARCH OVERLAY — Apple Spotlight style ===================== */
#site-search-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  z-index:99999;
  align-items:flex-start;
  justify-content:center;
  padding-top:110px;
}
#site-search-overlay.open{ display:flex; }

#site-search-modal{
  background:rgba(245,245,250,.93);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:0 36px 88px rgba(0,0,0,.18), 0 0 0 0.5px rgba(0,0,0,.06);
  width:100%;
  max-width:600px;
  margin:0 16px;
  overflow:hidden;
}
html[data-theme="dark"] #site-search-modal{
  background:rgba(26,30,42,.92);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 36px 88px rgba(0,0,0,.5), 0 0 0 0.5px rgba(255,255,255,.04);
}

#site-search-input-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
}
#site-search-input-row svg{
  flex-shrink:0;
  width:20px; height:20px;
  opacity:.38;
  color:#000;
}
html[data-theme="dark"] #site-search-input-row svg{ color:#fff; opacity:.4; }

#site-search-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:1.1rem;
  font-weight:400;
  letter-spacing:-.01em;
  color:#111;
  font-family:-apple-system,BlinkMacSystemFont,'Space Grotesk',"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="dark"] #site-search-input{ color:#f0f0f0; }
#site-search-input::placeholder{ color:rgba(0,0,0,.3); }
html[data-theme="dark"] #site-search-input::placeholder{ color:rgba(255,255,255,.3); }

#site-search-esc-key{
  flex-shrink:0;
  padding:3px 8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:6px;
  font-size:.68rem;
  font-family:inherit;
  color:rgba(0,0,0,.35);
  background:rgba(0,0,0,.05);
  cursor:pointer;
  letter-spacing:.02em;
}
html[data-theme="dark"] #site-search-esc-key{
  border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.05);
}

/* divider — only visible when results are showing */
#site-search-results:not(:empty){
  border-top:1px solid rgba(0,0,0,.08);
}
html[data-theme="dark"] #site-search-results:not(:empty){
  border-top-color:rgba(255,255,255,.07);
}

#site-search-results{
  list-style:none;
  margin:0;
  padding:8px;
  max-height:360px;
  overflow-y:auto;
}
#site-search-results li a{
  display:block;
  padding:11px 14px;
  border-radius:11px;
  text-decoration:none;
  transition:background .1s;
}
#site-search-results li a:hover,
#site-search-results li.active a{
  background:rgba(0,0,0,.06);
}
html[data-theme="dark"] #site-search-results li a:hover,
html[data-theme="dark"] #site-search-results li.active a{
  background:rgba(255,255,255,.08);
}
.search-result-title{
  font-weight:600;
  font-size:.92rem;
  color:#111;
  letter-spacing:-.01em;
}
html[data-theme="dark"] .search-result-title{ color:#e8e8ec; }
.search-result-desc{
  font-size:.76rem;
  color:rgba(0,0,0,.42);
  margin-top:2px;
  letter-spacing:.005em;
}
html[data-theme="dark"] .search-result-desc{ color:rgba(255,255,255,.38); }
.search-no-results{
  padding:20px 16px;
  text-align:center;
  color:rgba(0,0,0,.35);
  font-size:.88rem;
}
html[data-theme="dark"] .search-no-results{ color:rgba(255,255,255,.3); }

#site-search-footer{
  display:flex;
  gap:16px;
  padding:8px 22px 10px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:.68rem;
  color:rgba(0,0,0,.3);
}
html[data-theme="dark"] #site-search-footer{
  border-top-color:rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);
}
#site-search-footer kbd{
  display:inline-block;
  padding:1px 5px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:4px;
  font-size:.65rem;
  font-family:inherit;
  background:rgba(0,0,0,.05);
  margin:0 1px;
}
html[data-theme="dark"] #site-search-footer kbd{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
}

@media(max-width:600px){
  #site-search-overlay{ padding-top:48px; align-items:flex-start; }
  #site-search-modal{ border-radius:16px; }
  #site-search-footer{ display:none; }
}

/* ── Pillar numbers dark-mode fix ───────────────────────────── */
html[data-theme="dark"] .pillar-num{ color:#fff !important; opacity:0.28 !important; }

/* ── Venue section ──────────────────────────────────────────── */
.venue-section{ padding:80px 0; }
.venue-top{ max-width:680px; margin-bottom:48px; }
.venue-cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:32px; }
.venue-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; }
.venue-card-img{ width:100%; height:240px; object-fit:cover; display:block; flex-shrink:0; }
.venue-card-placeholder{ height:240px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:3.5rem; flex-shrink:0; }
.venue-card-body{ padding:28px 28px 32px; flex:1; display:flex; flex-direction:column; gap:10px; }
.venue-card-badge{ display:inline-block; background:var(--primary); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:100px; align-self:flex-start; }
.venue-card h3{ font-size:1.1rem; margin:0; color:var(--heading); font-family:'Space Grotesk',sans-serif; }
.venue-card p{ font-size:.9rem; color:var(--text-muted); margin:0; line-height:1.65; }
.venue-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-top:28px; border-top:1px solid var(--border); }
.venue-service{ display:flex; flex-direction:column; gap:8px; }
.venue-service-icon{ font-size:1.4rem; }
.venue-service strong{ font-size:.9rem; color:var(--heading); font-weight:600; display:block; }
.venue-service p{ font-size:.85rem; color:var(--text-muted); margin:0; line-height:1.6; }
@media(max-width:768px){
  .venue-cards{ grid-template-columns:1fr; }
  .venue-services{ grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .venue-services{ grid-template-columns:1fr; }
}

/* ── FAQ accordion ─────────────────────────────────────────── */
.faq-list{ margin-top:40px; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; cursor:pointer; font-weight:600; font-size:1rem; color:var(--heading); font-family:'Space Grotesk',sans-serif; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .18s, border-color .18s; color:var(--shade-3); font-size:1rem; line-height:1; }
.faq-item[open] .faq-icon{ background:var(--primary); border-color:var(--primary); color:#fff; }
.faq-item[open] summary{ color:var(--primary); }
.faq-answer{ padding:0 0 22px; color:var(--text); line-height:1.75; font-size:.95rem; max-width:720px; }
.faq-answer strong{ color:var(--heading); }


/* Form consent checkboxes */
.form-consent { margin:14px 0 6px; display:flex; flex-direction:column; gap:10px; }
.form-consent label { display:flex; align-items:flex-start; gap:10px; font-size:.83rem; color:var(--text-muted); line-height:1.5; cursor:pointer; }
.form-consent input[type="checkbox"] { flex-shrink:0; margin-top:2px; accent-color:var(--primary); width:15px; height:15px; cursor:pointer; }

/* Agenda item boxes (World of Better Cooperation) */
.agenda-item { display:flex;align-items:stretch;gap:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.10);border:1px solid var(--border);transition:box-shadow .18s,transform .18s; }
.agenda-item:hover { box-shadow:0 6px 20px rgba(0,0,0,.12);transform:translateY(-2px); }
.agenda-time { background:var(--primary);color:#fff;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.8rem;padding:14px 16px;display:flex;align-items:center;justify-content:center;min-width:76px;text-align:center;line-height:1.35;flex-shrink:0; }
.agenda-body { background:var(--surface);padding:14px 20px;flex:1;display:flex;flex-direction:column;gap:4px;justify-content:center; }
.agenda-body strong { display:block;color:var(--heading);font-size:.93rem; }
.agenda-body span { font-size:.83rem;color:var(--text-muted);line-height:1.5; }