/* =========================================================
   Gardenn.nl — site-combined.css
   This file is a SAFE merge of:
   1) main.css
   2) overrides.css (was intended to load AFTER main.css)

   Notes:
   - Order is preserved to avoid breaking cascade.
   - Dark-mode rules (html[data-theme="dark"]) stay where they were.
   ========================================================= */

/* =========================
   1) main.css
   ========================= */
/* =========================================================
   Gardenn.nl — main.css (FULL WORKING)
   Supports:
   - Homepage (.page-home)
   - Landingpage (.page-landing)
   Astra-safe: scoped fixes only in these wrappers.
   ========================================================= */


/* ---------------------------
   TOKENS
--------------------------- */
:root{
  --primary: #76f3a6;
  --secondary: #58d7ff;

  --ink: rgba(12, 18, 32, 0.92);
  --ink-muted: rgba(12, 18, 32, 0.62);

  --line: rgba(12, 18, 32, 0.1);
  --glass: rgba(255, 255, 255, 0.78);

  --shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.1);

  --radius: 18px;
  --radius-lg: 22px;

  --navH: 76px;
  --navMax: 1180px;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;


  /* Theme surfaces (light defaults) */
  --bg: var(--bg);
  --section-bg: #ffffff;
  --section-alt-bg: #f9fcff;

  --nav-bg: rgba(255, 255, 255, 0.55);
  --nav-border: rgba(12, 18, 32, 0.08);

  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-soft: rgba(255, 255, 255, 0.65);
  --surface-card: rgba(255, 255, 255, 0.88);
  --surface-card2: rgba(255, 255, 255, 0.86);

  --surface-82: rgba(255, 255, 255, 0.82);
  --surface-75: rgba(255, 255, 255, 0.75);
  --panel-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));


  --panel-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  --panel-border: rgba(255, 255, 255, 0.65);

  --field-bg: rgba(255, 255, 255, 0.85);

  --chip-bg: rgba(255, 255, 255, 0.7);
  --chip-bg-strong: rgba(255, 255, 255, 0.78);
  --chip-text: rgba(12, 18, 32, 0.78);

  --border: rgba(12, 18, 32, 0.1);
  --border-soft: rgba(12, 18, 32, 0.08);
  --border-strong: rgba(12, 18, 32, 0.14);

  --btn-bg: rgba(255, 255, 255, 0.72);
  --btn-bg-hover: rgba(255, 255, 255, 0.9);
  --btn-ghost: rgba(255, 255, 255, 0.58);

  --menu-link: rgba(12, 18, 32, 0.82);
  --menu-hover-bg: rgba(12, 18, 32, 0.06);

  --mobile-bg: rgba(255, 255, 255, 0.92);
  --mobile-link-bg: rgba(255, 255, 255, 0.78);

  --media-bg: #eef4f7;
}

/* ---------------------------
   BASE
--------------------------- */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font);
  color: var(--ink);
  overflow-x: hidden;

  /* Site background */
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(118, 243, 166, 0.18), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(88, 215, 255, 0.16), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(118, 243, 166, 0.1), transparent 60%),
    var(--bg);
}

/* prevent WP image stretching */
img{ height: auto; max-width: 100%; }

/* anchor offset so sections don't hide behind fixed nav */
.page-home section[id]{ scroll-margin-top: calc(var(--navH) + 18px); }

/* ---------------------------
   ASTRA / WP SAFETY FIXES (SCOPED)
   Only affects pages that contain our wrappers
--------------------------- */

/* Remove Astra container constraints in our custom pages */
.page-home .ast-container,
.page-landing .ast-container,
.page-home .site-content .ast-container,
.page-landing .site-content .ast-container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove extra WP padding inside custom pages */
.page-home .site-content,
.page-landing .site-content,
.page-home .site-main,
.page-landing .site-main,
.page-home .content-area,
.page-landing .content-area,
.page-home .entry-content,
.page-landing .entry-content{
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent skip-link white square */
a.skip-link{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
a.skip-link:focus{
  left: 12px !important;
  top: 12px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 12px !important;
  background: #fff !important;
  color: #000 !important;
  z-index: 999999 !important;
  border-radius: 10px;
}


/* =========================================================
   HOMEPAGE (.page-home)
   ========================================================= */

/* Layout helper */
.page-home .g-container{
  width: min(var(--navMax), calc(100% - 40px));
  margin: 0 auto;
}

/* ---------------------------
   NAV (fixed glass)
--------------------------- */
.page-home .g-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid var(--nav-border);
}

/* If WP admin bar is on */
.admin-bar .page-home .g-header{ top: 32px; }
@media (max-width: 782px){
  .admin-bar .page-home .g-header{ top: 46px; }
}

.page-home .g-header a{
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  color: inherit;
}

.page-home .g-nav{
  height: var(--navH);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}

.page-home .g-brand{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}

.page-home .g-logo{
  width: 120px !important;
  height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;
  object-fit: contain !important;
  display:block !important;
}

.page-home .g-brandText{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 16px;
  line-height: 1;
}

.page-home .g-menu{
  display:flex;
  align-items:center;
  gap: 18px;
  margin-left: auto;
}

.page-home .g-menu a{
  color: var(--menu-link);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 10px 10px;
  border-radius: 999px;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}

.page-home .g-menu a:hover{
  background: var(--menu-hover-bg);
  color: var(--ink);
  transform: translateY(-1px);
}

.page-home .g-menu a.g-cta{
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.45), rgba(88, 215, 255, 0.22));
  border: 1px solid var(--border);
}

/* Burger */
.page-home .g-burger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  align-items:center;
  justify-content:center;
  padding: 0;
}
.page-home .g-burger span{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--menu-link);
  margin: 4px 0;
  border-radius: 999px;
}

.page-home .g-mobile[hidden]{ display:none; }
.page-home .g-mobile:not([hidden]){
  background: var(--mobile-bg);
  border-top: 1px solid var(--border-soft);
  padding: 12px 20px 18px;
}
.page-home .g-mobile a{
  display:block;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  text-decoration: none !important;
}
.page-home .g-mobile a + a{ margin-top: 10px; }
.page-home .g-mobile a.g-cta{
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.45), rgba(88, 215, 255, 0.22));
}

/* Optional scroll progress bar container (JS inserts <div class="g-scrollbar"><i></i>) */
.page-home .g-scrollbar{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2px;
  background: var(--menu-hover-bg);
  overflow: hidden;
}
.page-home .g-scrollbar > i{
  display:block;
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 999px;
}

/* ---------------------------
   HERO (full-width video)
   - Hero background goes under nav
   - Hero content starts below nav
--------------------------- */
.page-home .g-hero{
  position: relative;
  width: 100%;
  min-height: clamp(560px, 78vh, 860px);
  display:flex;
  align-items:center;
  overflow:hidden;

  /* No gaps */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-home .g-heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

.page-home .g-heroOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(118, 243, 166, 0.22), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(88, 215, 255, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
  will-change: transform;
}

.page-home .g-heroInner{
  position: relative;
  z-index: 2;

  /* Push content below fixed nav */
  padding-top: calc(var(--navH) + 22px);
  padding-bottom: 64px;
}

/* Badge + headline */
.page-home .g-badge{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  font-weight: 650;
  font-size: 13px;
  color: var(--chip-text);
}

.page-home .g-heroTitle{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.7px;
}
.page-home .g-heroTitle span{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .g-heroLead{
  margin: 0;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.65;
}

/* Actions */
.page-home .g-heroActions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* PRO Buttons (homepage) */
.page-home .g-btn,
.page-home .g-btn:link,
.page-home .g-btn:visited,
.page-home .g-btn:hover,
.page-home .g-btn:active,
.page-home .g-btn:focus{
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

.page-home .g-btn{
  font-weight: 650;
  letter-spacing: .1px;
  line-height: 1;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--btn-bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transform: translateY(0);
  will-change: transform, box-shadow;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.page-home .g-btnPrimary{
  border-color: rgba(12, 18, 32, 0.12);
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.4), rgba(88, 215, 255, 0.18));
}

.page-home .g-btnGhost{
  background: var(--btn-ghost);
}

.page-home .g-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  border-color: rgba(12, 18, 32, 0.18);
  background: var(--surface-card2);
}

.page-home .g-btn:active{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.page-home .g-btn:focus-visible{
  outline: 3px solid rgba(88, 215, 255, 0.35);
  outline-offset: 3px;
}

/* Stats */
.page-home .g-heroStats{
  margin-top: 20px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.page-home .g-stat{
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  min-width: 160px;
}
.page-home .g-statNum{ font-weight: 900; font-size: 18px; }
.page-home .g-statLbl{ margin-top: 2px; color: rgba(12, 18, 32, 0.62); font-weight: 650; font-size: 13px; }

/* Sections */
.page-home .g-section{
  padding: 84px 0;
  background: var(--section-bg);
}
.page-home .g-sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.page-home .g-sectionHead h2{
  margin:0;
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -0.4px;
}
.page-home .g-sectionHead p{
  margin:0;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* Services */
.page-home .g-services{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.page-home .g-card{
  border-radius: var(--radius);
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-home .g-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.14);
  border-color: rgba(12, 18, 32, 0.16);
}

.page-home .g-cardIcon{
  width: 42px; height: 42px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.38), rgba(88, 215, 255, 0.18));
  border: 1px solid var(--border);
  font-size: 18px;
}
.page-home .g-card h3{ margin: 10px 0 6px; font-size: 18px; }
.page-home .g-card p{ margin: 0 0 10px; color: var(--ink-muted); line-height: 1.6; }

.page-home .g-list{ margin: 0; padding-left: 18px; color: rgba(12, 18, 32, 0.72); }
.page-home .g-list li{ margin: 6px 0; }

/* Responsive (homepage) */
@media (max-width: 980px){
  .page-home .g-menu{ display:none; }
  .page-home .g-burger{ display:inline-flex; }
  .page-home .g-brand{ min-width: auto; }
  .page-home .g-sectionHead{ flex-direction: column; align-items: flex-start; }
  .page-home .g-services{ grid-template-columns: 1fr; }
}


/* =========================================================
   LANDINGPAGE (.page-landing)
   ========================================================= */

/* Container */
.page-landing .wrap{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 64px;
  position: relative;
  z-index: 2;
}

/* Header row */
.page-landing header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 18px;
}

/* Brand */
.page-landing .brand{
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.page-landing .brand-logo{
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  display: block !important;
}

.page-landing .brand-text h1{
  margin: 0;
  font-size: 18px;
  letter-spacing: .2px;
  font-weight: 800;
  color: var(--ink);
}
.page-landing .brand-text p{
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Status pill */
.page-landing .pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  backdrop-filter: blur(10px);
  color: var(--ink-muted);
  font-size: 13px;
  white-space: nowrap;
}
.page-landing .dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(118, 243, 166, 0.18);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.12); opacity: .75; }
}

/* Layout */
.page-landing main{
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 26px;
  margin-top: 12px;
  align-items: stretch;
}

/* Panels */
.page-landing .hero,
.page-landing .side{
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  color: var(--ink);
}

/* Left hero panel */
.page-landing .hero{
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.page-landing .hero::before{
  content:"";
  position:absolute;
  inset:-90px -90px auto auto;
  width: 320px; height: 320px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 243, 166, 0.3), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(88, 215, 255, 0.22), transparent 60%);
  filter: blur(12px);
  opacity: .85;
  transform: rotate(10deg);
  pointer-events: none;
}

.page-landing .kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(118, 243, 166, 0.18);
  border: 1px solid rgba(118, 243, 166, 0.28);
  color: rgba(12, 18, 32, 0.85);
  font-size: 13px;
  font-weight: 700;
}

.page-landing .hero h2{
  margin: 14px 0 10px;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.page-landing .grad{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-landing .hero p{
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 64ch;
}

/* CTA row */
.page-landing .ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  align-items: center;
}

/* Buttons (landing) */
.page-landing .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: rgba(12, 18, 32, 0.92) !important;
  text-decoration: none !important;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.page-landing .btn:hover{
  transform: translateY(-2px);
  background: var(--btn-bg-hover);
  border-color: rgba(12, 18, 32, 0.18);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
}
.page-landing .btn:active{ transform: translateY(-1px); }

.page-landing .btn.primary{
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.42), rgba(88, 215, 255, 0.18));
  border-color: rgba(12, 18, 32, 0.12);
}

/* Landing cards */
.page-landing .cards{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.page-landing .card{
  border-radius: 16px;
  padding: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--border-soft);
  min-height: 108px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-landing .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.14);
  border-color: rgba(12, 18, 32, 0.16);
}
.page-landing .card h3{
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .1px;
  color: var(--ink);
  font-weight: 800;
}
.page-landing .card p{
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Right panel */
.page-landing .side{
  padding: 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.page-landing .side h3{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 850;
}
.page-landing .side p{
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Countdown (landing) — strong contrast so it never “disappears” */
.page-landing .countdown{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 20px;
}

.page-landing .timeBox{
  position: relative;
  padding: 18px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.28), rgba(88, 215, 255, 0.16)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(12, 18, 32, 0.1) !important;
  text-align: center;
}
.page-landing .timeBox::before{
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--surface-75);
  opacity: .75;
}
.page-landing .timeBox .num{
  color: rgba(12, 18, 32, 0.92) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
}
.page-landing .timeBox .lbl{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(12, 18, 32, 0.62) !important;
  opacity: 1 !important;
}

/* Form */
.page-landing form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.page-landing .field{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--field-bg);
  border: 1px solid var(--border-strong);
  align-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.page-landing input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  padding: 6px 6px;
}
.page-landing input::placeholder{ color: rgba(12, 18, 32, 0.45); }

.page-landing .msg{
  font-size: 13px;
  color: var(--ink-muted);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: none;
}
.page-landing .msg.ok{
  border-color: rgba(118, 243, 166, 0.45);
  background: rgba(118, 243, 166, 0.18);
}
.page-landing .msg.bad{
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.14);
}

/* Contact pinned to bottom */
.page-landing .contact{
  margin-top: auto;
  border-top: 1px solid rgba(12, 18, 32, 0.1);
  padding-top: 16px;
}

.page-landing .contactRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.page-landing .tip{
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Footer */
.page-landing footer{
  margin-top: 22px;
  padding: 18px 0 0;
  color: rgba(12, 18, 32, 0.55);
  font-size: 12px;
  border-top: 1px solid var(--border-soft);
}

/* Responsive (landing) */
@media (max-width: 980px){
  .page-landing .wrap{
    width: min(1120px, calc(100% - 28px));
    padding: 20px 0 40px;
  }

  .page-landing main{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-landing .side{
    position: relative;
    top: 0;
    max-height: none;
    overflow: visible;
  }

  .page-landing .cards{ grid-template-columns: 1fr; }
}


/* =========================================================
   REVEAL ANIMATIONS (works on both pages)
   - Used by your JS: .reveal + .is-in
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.reveal{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, filter .8s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal[data-delay]{ transition-delay: var(--d, 0ms); }

/* ===== FIX: hero/video must be true full-width (remove left whitespace) ===== */
.page-home .g-hero{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
}

.page-home .g-heroVideo,
.page-home .g-heroOverlay{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* ===== PRO BUTTON EFFECT (no layout shift) ===== */

/* remove underlines everywhere on our buttons */
.g-btn,
.g-btn:link,
.g-btn:visited{
  text-decoration: none !important;
}

/* base */
.g-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-weight: 650;                 /* less bold */
  letter-spacing: .1px;

  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--btn-bg);
  color: var(--ink);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
  will-change: transform;
}

/* subtle “sheen” sweep */
.g-btn::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(120px 60px at 20% 30%, rgba(255, 255, 255, 0.65), transparent 60%),
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 22%, transparent 45%);
  opacity: 0;
  transform: translateX(-20%) rotate(0.001deg);
  transition: opacity .18s ease, transform .35s ease;
  pointer-events: none;
}

/* glow ring */
.g-btn::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(118, 243, 166, 0.35), transparent 70%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .18s ease;
  pointer-events:none;
}

.g-btn:hover{
  transform: translateY(-2px); /* moves up slightly but no layout shift */
  border-color: rgba(12, 18, 32, 0.18);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.g-btn:hover::before{
  opacity: .9;
  transform: translateX(18%);
}

.g-btn:hover::after{
  opacity: 1;
}

.g-btn:active{
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Primary button = richer gradient + stronger glow */
.g-btnPrimary{
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.58), rgba(88, 215, 255, 0.28));
  border-color: rgba(118, 243, 166, 0.4);
}

.g-btnPrimary::after{
  background: radial-gradient(closest-side, rgba(118, 243, 166, 0.45), transparent 70%);
}

/* Ghost button = cleaner */
.g-btnGhost{
  background: var(--btn-ghost);
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .g-btn, .g-btn::before, .g-btn::after{
    transition: none !important;
  }
}
/* =========================
   PORTFOLIO — ALL CARDS SAME SIZE (like bottom-left)
   ========================= */

.g-portfolio{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch; /* key: same row height behavior */
}

/* REMOVE any stagger differences */
.g-portfolio .g-case{
  margin-top: 0 !important;
}

/* Card: fixed height for ALL */
.g-case{
  position: relative;
  display: block;
  height: 520px;                 /* <<< set ONE consistent height */
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12);
  background: var(--surface-soft);
  transform: translateZ(0);
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Image area: fixed height inside card */
.g-caseMedia{
  position: absolute;
  inset: 0;                      /* media fills the entire card */
  overflow: hidden;
  background: var(--media-bg);
}

/* Image fills consistently */
.g-caseMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  transform: scale(1.01);
  transition: transform .6s ease;
  filter: saturate(1.02) contrast(1.02);
}

/* subtle tint/vignette */
.g-caseMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 25%, rgba(118, 243, 166, 0.1), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(88, 215, 255, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.18));
  pointer-events:none;
  z-index: 1;
}

/* Label pill */
.g-casePill{
  position:absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-weight: 700;
  font-size: 14px;
  backdrop-filter: blur(10px);
}
.g-caseDot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ff7a45;
  box-shadow: 0 0 0 6px rgba(255, 122, 69, 0.18);
}

/* Bottom overlay (same for all) */
.g-caseBody{
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: min(78%, 520px);
  padding: 18px 18px 16px;
  background: var(--mobile-bg);
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
  z-index: 4;
}

.g-caseBody h3{
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -0.4px;
  line-height: 1.05;
}
.g-caseBody p{
  margin: 0;
  color: rgba(12, 18, 32, 0.62);
  font-size: 16px;
  line-height: 1.45;
}

/* Hover effects */
.g-case:hover{
  transform: translateY(-6px);
  border-color: rgba(12, 18, 32, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.16);
}
.g-case:hover .g-caseMedia img{
  transform: scale(1.07);
}

/* Shine sweep */
.g-caseMedia::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-30%);
  opacity: 0;
  transition: transform .75s ease, opacity .25s ease;
  pointer-events:none;
  z-index: 2;
}
.g-case:hover .g-caseMedia::before{
  opacity: 1;
  transform: translateX(30%);
}

/* Responsive */
@media (max-width: 980px){
  .g-portfolio{ grid-template-columns: 1fr; }
  .g-case{ height: 460px; }          /* still consistent on mobile */
  .g-caseBody{ width: calc(100% - 36px); }
}

/* Stagger: push right-column cards down (desktop only) */
@media (min-width: 981px){
  .g-portfolio > .g-case:nth-child(2n){
    margin-top: 26px; /* adjust: 16–40px */
  }
}

/* =========================
   WERKWIJZE — VERTICAL TIMELINE (DESKTOP + MOBILE)
   Clean + no conflicts
========================= */

.g-werkwijze{
  background: var(--section-alt-bg);
}

.g-steps--timeline{
  position: relative;
  isolation: isolate; /* keep SVG stacking predictable */
  margin-top: 40px;
  display: grid;
  gap: 22px;
  padding-left: 64px; /* space for line + dots */
}

/* SVG line behind (must have real size) */
.g-steps--timeline .g-tlSvg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;              /* important in WP */
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.g-steps--timeline .g-tlPath{
  fill: none !important;

  /* fallback stroke so you ALWAYS see a line */
  stroke: #76f3a6 !important; /* fallback */
  stroke-color: #76f3a6 !important;
  stroke-opacity: 1;
  opacity: 1;

  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;

  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.08));

  /* JS will overwrite these with the correct length */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}


/* Step wrapper (reveals in) */
.g-steps--timeline .g-step{
  position: relative;
  z-index: 1;

  /* Default: visible (so content never "disappears" if JS fails) */
  opacity: 1;
  transform: none;
}

/* Animate ONLY after timeline init succeeded (JS adds .tl-js on the wrapper) */
.g-steps--timeline.tl-js .g-step{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

.g-steps--timeline .g-step.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Dot on the timeline */
.g-steps--timeline .g-stepDot{
  position: absolute;
  left: -44px;
  top: 34px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 7px rgba(118, 243, 166, 0.18);
  z-index: 2;
}

/* Card */
.g-steps--timeline .g-stepCard{
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  background: var(--surface-card2);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  overflow: hidden;

  transform: translateY(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}

/* Top row */
.g-steps--timeline .g-stepTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* Icon */
.g-steps--timeline .g-stepIcon{
  width: 52px;
  height: 52px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.35), rgba(88, 215, 255, 0.18));
  border: 1px solid var(--border-soft);
}

/* Step number pill (animates in; JS counts up) */
.g-steps--timeline .g-stepNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-weight: 850;
  letter-spacing: .08em;
  font-size: 12px;

  /* Default: visible if JS isn't running */
  opacity: 1;
  transform: none;
}

.g-steps--timeline.tl-js .g-stepNum{
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

.g-steps--timeline .g-step.is-visible .g-stepNum{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Typography */
.g-steps--timeline h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.g-steps--timeline p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Glow */
.g-steps--timeline .g-stepGlow{
  position: absolute;
  inset: -80px -80px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 243, 166, 0.34), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(88, 215, 255, 0.22), transparent 60%);
  filter: blur(10px);
  opacity: 0;
  transform: translate3d(14px,-10px,0);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

/* Shine sweep */
.g-steps--timeline .g-stepCard::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: transform .55s ease, opacity .35s ease;
  pointer-events:none;
}

/* Hover */
.g-steps--timeline .g-stepCard:hover{
  transform: translateY(-6px);
  border-color: rgba(12, 18, 32, 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}
.g-steps--timeline .g-stepCard:hover .g-stepGlow{
  opacity: 1;
  transform: translate3d(0,0,0);
}
.g-steps--timeline .g-stepCard:hover::after{
  opacity: .9;
  transform: translateX(220%) rotate(18deg);
}

/* Desktop: add rhythm (even cards slightly offset) */
@media (min-width: 981px){
  .g-steps--timeline .g-step:nth-child(even) .g-stepCard{
    transform: translateX(16px);
  }
  .g-steps--timeline .g-step:nth-child(even) .g-stepCard:hover{
    transform: translateX(16px) translateY(-6px);
  }
}

/* Mobile: tighter spacing */
@media (max-width: 980px){
  .g-steps--timeline{
    padding-left: 54px;
    gap: 16px;
  }
  .g-steps--timeline .g-stepDot{
    left: -40px;
  }
}

/* =========================================================
   WERKWIJZE — align left + taller cards (override)
   Put this at the END of main.css
========================================================= */

/* Keep timeline layout but make it roomier */
.g-steps--timeline{
  gap: 26px;                 /* more space between cards */
  padding-left: 72px;        /* a bit more breathing room for dots/line */
}

/* Align ALL cards evenly (remove alternating offset) */
@media (min-width: 981px){
  .g-steps--timeline .g-step:nth-child(even) .g-stepCard{
    transform: translateX(0) !important;
  }
  .g-steps--timeline .g-step:nth-child(even) .g-stepCard:hover{
    transform: translateY(-6px) !important;
  }
}

/* Bigger cards: more white space, higher (not wider) */
.g-steps--timeline .g-stepCard{
  padding: 34px 28px 30px;   /* more internal whitespace */
  min-height: 170px;         /* taller cards */
  border-radius: 22px;       /* slightly more premium */
}

/* Give titles a little more room */
.g-steps--timeline h3{
  font-size: 19px;
  margin: 6px 0 10px;
}

/* Make body text breathe */
.g-steps--timeline p{
  font-size: 15px;
  line-height: 1.75;
  max-width: 70ch;           /* keeps it readable */
}

/* Keep icon + number nicely aligned inside the bigger card */
.g-steps--timeline .g-stepTop{
  margin-bottom: 16px;
}

/* Optional: make the icon a touch bigger for balance */
.g-steps--timeline .g-stepIcon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 24px;
}

/* Dot alignment tweak so it stays centered with taller cards */
.g-steps--timeline .g-stepDot{
  top: 44px;                 /* was 34px */
  left: -50px;               /* match new padding-left feel */
}

/* Mobile: also taller + comfy */
@media (max-width: 980px){
  .g-steps--timeline{
    padding-left: 60px;
    gap: 18px;
  }
  .g-steps--timeline .g-stepDot{
    left: -44px;
    top: 42px;
  }
  .g-steps--timeline .g-stepCard{
    padding: 28px 20px 24px;
    min-height: 160px;
  }
}

/* =========================================================
   PAKKETTEN (Pricing) — Gardenn style
========================================================= */

.g-pakketten{
  background: var(--section-bg);
}

.g-packGrid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch; /* important: equal height grid rows */
}

.g-pack{
  position: relative;
  display: flex;
  flex-direction: column;         /* allow CTA to stick bottom */
  height: 100%;                   /* equalize */
  border-radius: 22px;
  margin-top: 50px;
  padding: 22px;
  background: var(--surface-card2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  isolation: isolate;
}

/* top row */
.g-packTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.g-packPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  font-weight: 750;
  font-size: 13px;
  color: var(--chip-text);
}

.g-packIcon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.35), rgba(88, 215, 255, 0.18));
  border: 1px solid var(--border-soft);
}

.g-packTitle{
  margin: 6px 0 6px;
  font-size: 20px;
  letter-spacing: -0.3px;
}

.g-packLead{
  margin: 0 0 14px;
  color: var(--ink-muted);
  line-height: 1.65;
  font-size: 14px;
}

/* lists */
.g-packList{
  margin: 0;
  padding-left: 18px;
  color: rgba(12, 18, 32, 0.76);
}
.g-packList li{ margin: 8px 0; }

.g-packList--muted{
  color: rgba(12, 18, 32, 0.62);
}

/* optional block */
.g-packOpt{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.g-packOptTitle{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(12, 18, 32, 0.55);
  font-weight: 800;
  margin-bottom: 8px;
}

/* CTA pinned to bottom */
.g-packCtas{
  margin-top: auto; /* pushes to bottom => equal visual height */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
}

/* Shine sweep */
.g-pack::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: transform .55s ease, opacity .35s ease;
  pointer-events:none;
}

/* Glow */
.g-packGlow{
  position: absolute;
  inset: -90px -90px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 243, 166, 0.3), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(88, 215, 255, 0.22), transparent 60%);
  filter: blur(12px);
  opacity: 0;
  transform: translate3d(14px,-10px,0);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 0;
}

.g-pack:hover{
  transform: translateY(-6px);
  border-color: rgba(12, 18, 32, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.16);
}
.g-pack:hover .g-packGlow{
  opacity: 1;
  transform: translate3d(0,0,0);
}
.g-pack:hover::after{
  opacity: .9;
  transform: translateX(220%) rotate(18deg);
}

/* FEATURED (middle card) */
.g-pack--featured{
  border-color: rgba(118, 243, 166, 0.45);
  background: var(--panel-bg-strong);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.18);
  transform: translateY(-8px);
}

.g-pack--featured:hover{
  transform: translateY(-12px);
}

.g-packBadge{
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 850;
  font-size: 12px;
  color: var(--chip-text);
  backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 980px){
  .g-packGrid{
    grid-template-columns: 1fr;
  }
  .g-pack--featured{
    transform: translateY(0);
  }
  .g-pack--featured:hover{
    transform: translateY(-6px);
  }
}

/* ==============================
   PAKKETTEN — FIXES (one button + featured pop + spacing)
============================== */

/* More room between header text and cards */
.g-packGrid{
  margin-top: 34px !important;
}

/* One button row */
.g-packCtas{
  margin-top: auto;
  padding-top: 18px;
  display: block;              /* not flex anymore */
}

/* Make the single button full-width (clean + premium) */
.g-packCtas .g-btn{
  width: 100%;
  justify-content: center;
}

/* FEATURED: stand out more, but keep spacing above */
.g-pack--featured{
  transform: translateY(-18px) !important;   /* bigger height difference */
  border-color: rgba(118, 243, 166, 0.6) !important;
  box-shadow: 0 45px 140px rgba(0, 0, 0, 0.2) !important;
}

/* Hover keeps it stable + premium */
.g-pack--featured:hover{
  transform: translateY(-24px) !important;
}

/* Stronger glow for featured */
.g-pack--featured .g-packGlow{
  opacity: .75;
  transform: translate3d(0,0,0);
}

/* Move the "Meest gekozen" badge so it NEVER overlaps the icon */
.g-packBadge{
  top: 14px !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3;
}

/* Reserve space at the top so badge has breathing room */
.g-pack--featured{
  padding-top: 34px !important;
}

/* Keep top row nicely spaced */
.g-packTop{
  margin-bottom: 14px !important;
}

/* =========================
   CONTACT (premium CTA)
========================= */

.g-contact{
  background: var(--section-bg);
}

.g-contactGrid{
  margin-top: 18px;
  display: block;   /* no grid */
  width: 100%;
}

.g-contactCard{
  width: 100%;      /* fill the container like other sections */
  max-width: none;  /* IMPORTANT: remove cap */
  margin: 0;        /* IMPORTANT: remove centering */

  border-radius: var(--radius-lg);
  background: var(--surface-82);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 28px;
  position: relative;
  overflow: hidden;
}


/* subtle background glow */
.g-contactCard::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 360px;
  height: 360px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 243, 166, 0.28), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(88, 215, 255, 0.2), transparent 60%);
  filter: blur(14px);
  opacity: .85;
  pointer-events: none;
}

.g-contactCard--cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(118, 243, 166, 0.1), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(88, 215, 255, 0.1), transparent 60%);
  pointer-events:none;
}

.g-contactTop{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.g-contactBadge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-weight: 650;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

.g-contactDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(118, 243, 166, 0.18);
}

.g-contactCard h3{
  margin: 14px 0 10px;
  font-size: 22px;
  letter-spacing: -0.3px;
  position: relative;
  z-index: 1;
}

.g-contactLead{
  margin: 0;
  max-width: 62ch;
  color: var(--ink-muted);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.g-contactHighlight{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--chip-bg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  color: rgba(12, 18, 32, 0.75);
  position: relative;
  z-index: 1;
}

.g-contactCtas{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Form side */
.g-contactSmall{
  margin: 6px 0 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.g-contactForm{
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.g-field{
  display: grid;
  gap: 6px;
}

.g-field span{
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(12, 18, 32, 0.55);
}

.g-field input,
.g-field textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.g-field textarea{ resize: vertical; min-height: 120px; }

.g-field input:focus,
.g-field textarea:focus{
  border-color: rgba(88, 215, 255, 0.45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  background: var(--mobile-bg);
}

.g-contactBtn{
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* Full meta blocks become clickable CTAs */
.g-contactMeta{
  display: grid;
  gap: 12px;
}

.g-contactMetaItem{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 16px 18px;
  border-radius: 18px;

  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);

  text-decoration: none !important;
  color: inherit;

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

/* Title */
.g-contactMetaItem strong{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(12, 18, 32, 0.55);
}

/* Value text */
.g-contactMetaItem span{
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* Gradient hover layer */
.g-contactMetaItem::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.55), rgba(88, 215, 255, 0.3));
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 0;
}

/* Keep text above gradient */
.g-contactMetaItem > *{
  position: relative;
  z-index: 1;
}

/* Hover */
.g-contactMetaItem:hover{
  transform: translateY(-2px);
  border-color: rgba(118, 243, 166, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
.g-contactMetaItem:hover::before{
  opacity: 1;
}

/* Active */
.g-contactMetaItem:active{
  transform: translateY(-1px);
}

/* Keyboard focus */
.g-contactMetaItem:focus-visible{
  outline: 3px solid rgba(88, 215, 255, 0.35);
  outline-offset: 4px;
}

/* =========================================================
   CASE TEMPLATE (single-case.php)
   ========================================================= */

.page-case .g-container{
  width: min(var(--navMax), calc(100% - 40px));
  margin: 0 auto;
}

.page-case .g-section{
  padding: 84px 0;
  background: var(--section-bg);
}

.page-case .g-caseHero{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(118, 243, 166, 0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(88, 215, 255, 0.14), transparent 60%),
    #fff;
}

.page-case .g-caseHeroGrid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
}

.page-case .g-caseKicker{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-75);
  font-weight: 750;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.page-case .g-caseTitle{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.6px;
}

.page-case .g-caseLead{
  margin: 0;
  max-width: 60ch;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.7;
}

.page-case .g-caseHeroActions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Media */
.page-case .g-caseHeroMedia{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--surface-soft);
}
.page-case .g-caseHeroMedia img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

/* Content typography */
.page-case .g-caseContent{
  max-width: 880px;
}
.page-case .g-caseContent h2{
  margin: 36px 0 10px;
  font-size: 28px;
  letter-spacing: -0.4px;
}
.page-case .g-caseContent p{
  color: var(--ink-muted);
  line-height: 1.75;
  font-size: 16px;
}
.page-case .g-caseContent img{
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* Next / prev */
.page-case .g-caseNavGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.page-case .g-caseNavItem{
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--surface-82);
  box-shadow: var(--shadow-soft);
}
.page-case .g-caseNavItem--right{
  text-align: right;
}
.page-case .g-caseNavLbl{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(12, 18, 32, 0.55);
  margin-bottom: 6px;
}
.page-case .g-caseNavLink{
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.page-case .g-caseNavLink:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 980px){
  .page-case .g-caseHeroGrid{
    grid-template-columns: 1fr;
  }
  .page-case .g-caseHeroMedia img{
    height: 360px;
  }
  .page-case .g-caseNavGrid{
    grid-template-columns: 1fr;
  }
}

/* =====================================
   SINGLE CASE BUTTON FIX
===================================== */

.g-caseActions{
  display:flex;
  gap:14px;
  margin-top:18px;
  flex-wrap:wrap;
}

.g-caseActions .g-btn{
  text-decoration:none !important;
  box-shadow:none !important;
  border-bottom:0 !important;
}

/* =========================================
   SINGLE CASE — Buttons (same as homepage)
   ========================================= */

.page-case .g-caseActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.page-case .g-caseActions .g-btn,
.page-case .g-caseActions .g-btn:link,
.page-case .g-caseActions .g-btn:visited{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Base button look */
.page-case .g-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);

  background: var(--btn-bg);
  color: rgba(12, 18, 32, 0.92) !important;

  font-weight: 650;
  letter-spacing: .1px;
  line-height: 1;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}

/* Primary */
.page-case .g-btnPrimary{
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.58), rgba(88, 215, 255, 0.28));
  border-color: rgba(118, 243, 166, 0.4);
}

/* Ghost */
.page-case .g-btnGhost{
  background: var(--btn-ghost);
}

/* Hover (no layout shift) */
.page-case .g-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border-color: rgba(12, 18, 32, 0.18);
  background: var(--surface-card2);
}

.page-case .g-btn:active{
  transform: translateY(-1px);
}

/* =========================================
   SINGLE CASE — full width canvas + centered content
   ========================================= */

/* Make Astra containers full width on case pages */
.single-case .ast-container,
.single-case .site-content .ast-container,
.single-case .content-area,
.single-case .site-main,
.single-case .entry-content{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Put your site gradient on the FULL viewport for case pages */
.single-case body{
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(118, 243, 166, 0.18), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(88, 215, 255, 0.16), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(118, 243, 166, 0.1), transparent 60%),
    #f7fbff !important;
}

/* Your page-case should span full width */
.single-case .page-case{
  width: 100%;
  max-width: none;
}

/* Your own container should be centered */
.single-case .page-case .g-container{
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* Make sections truly full width (backgrounds extend) */
.single-case .page-case .g-section{
  width: 100%;
}

/* Optional: ensure hero background fills */
.single-case .g-caseHero{
  background: transparent;
}

/* =========================================
   CASE CLOSE BUTTON (subtle X top right)
   ========================================= */

.single-case .page-case{
  position: relative;
}

/* floating X */
.g-caseClose{
  position: fixed; /* always visible */
  top: 28px;
  right: 32px;
  z-index: 9999;

  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;
  color: rgba(12, 18, 32, 0.75);

  background: var(--surface-soft);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* hover = soft gradient glow */
.g-caseClose:hover{
  transform: translateY(-2px);

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.3)
  );

  border-color: rgba(118, 243, 166, 0.35);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.12),
    0 0 0 6px rgba(118, 243, 166, 0.1);
}

/* Mobile spacing */
@media (max-width: 980px){
  .g-caseClose{
    top: 18px;
    right: 18px;
  }
}

/* =========================================================
   CASE LIGHTBOX — FULLSCREEN (single truth)
   ========================================================= */

html.g-noScroll, body.g-noScroll{ overflow: hidden !important; }

/* hidden by default */
.g-lightbox[hidden]{ display: none !important; }
.g-lightbox{ display: none; }

/* open state */
.g-lightbox.is-open{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999999;
}

/* backdrop */
.g-lightboxBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease;
}
.g-lightbox.is-open .g-lightboxBackdrop{ opacity: 1; }

/* FULLSCREEN panel */
.g-lightboxPanel{
  position: absolute;
  inset: 0;
  overflow: hidden;

  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(118, 243, 166, 0.14), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(88, 215, 255, 0.12), transparent 55%),
    var(--bg);

  transform: translateY(10px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.g-lightbox.is-open .g-lightboxPanel{
  transform: translateY(0);
  opacity: 1;
}

/* iframe fills screen */
.g-lightboxFrame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* close button (matches your glass UI) */
.g-lightboxClose{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000000;

  width: 52px;
  height: 52px;
  border-radius: 18px;

  border: 1px solid var(--border);
  background: var(--btn-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* IMPORTANT: prevent “double X” if you have inner text/span/svg */
.g-lightboxClose *{ display: none !important; }
.g-lightboxClose::before,
.g-lightboxClose::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: rgba(12, 18, 32, 0.65);
  border-radius: 999px;
  transform-origin: center;
}
.g-lightboxClose::before{ transform: translate(-50%,-50%) rotate(45deg); }
.g-lightboxClose::after { transform: translate(-50%,-50%) rotate(-45deg); }

.g-lightboxClose:hover{
  transform: translateY(-2px);
  border-color: rgba(118, 243, 166, 0.35);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22), 0 0 0 6px rgba(118, 243, 166, 0.1);
}

/* admin bar safe */
.admin-bar .g-lightboxClose{ top: 52px; }
@media (max-width: 782px){
  .admin-bar .g-lightboxClose{ top: 66px; }
}

/* =========================================
   GLOBAL FULL-WIDTH PAGE BACKGROUND
========================================= */

.site,
.site-content,
#page {
  background: transparent !important;
}

/* =========================================
   FULL WIDTH SECTION SYSTEM
========================================= */

.page-home .g-section,
.page-home .g-werkwijze,
.page-home .g-pakketten,
.page-home .g-contact {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

.page-home .g-section:nth-of-type(1) {
  background:
    radial-gradient(
      1200px 800px at 15% 20%,
      rgba(118, 243, 166, 0.2),
      transparent 65%
    ),
    linear-gradient(
      135deg,
      #f8fcf9 0%,
      #f3f8f6 100%
    );
}

.page-home .g-werkwijze {
  background:
    radial-gradient(
      1000px 700px at 80% 30%,
      rgba(88, 215, 255, 0.18),
      transparent 70%
    ),
    radial-gradient(
      1200px 800px at 10% 80%,
      rgba(118, 243, 166, 0.18),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      #f6fafc 0%,
      #eef4f8 100%
    );
}

.page-home .g-pakketten {
  background:
    radial-gradient(
      1100px 800px at 20% 10%,
      rgba(118, 243, 166, 0.22),
      transparent 65%
    ),
    linear-gradient(
      135deg,
      #f9fbfc 0%,
      #eef3f6 100%
    );
}

.page-home .g-contact {
  background:
    radial-gradient(
      1200px 900px at 85% 85%,
      rgba(88, 215, 255, 0.2),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      #fafcfc 0%,
      #f4f7f9 100%
    );
}

/* =========================================================
   SECTION BACKGROUNDS — FULL WIDTH GRADIENTS (NO WHITE CUT-OFF)
   Put this at the VERY END of main.css
   ========================================================= */

/* Make sure theme wrappers don't paint white behind our sections */
.page-home .site,
.page-home .site-content,
.page-home #page,
.page-home .content-area,
.page-home .site-main,
.page-home .entry-content{
  background: transparent !important;
}

/* Every section spans the full viewport width (even inside theme containers) */
.page-home .g-section,
.page-home .g-werkwijze,
.page-home .g-pakketten,
.page-home .g-contact{
  position: relative;
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Let the gradient layer do the background */
  background: transparent !important;
  overflow: hidden;
}

/* Gradient layer per section (subtle, high-end) */
.page-home .g-section::before,
.page-home .g-werkwijze::before,
.page-home .g-pakketten::before,
.page-home .g-contact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(118, 243, 166, 0.16), transparent 62%),
    radial-gradient(1000px 700px at 88% 28%, rgba(88, 215, 255, 0.14), transparent 60%),
    radial-gradient(1100px 800px at 50% 115%, rgba(118, 243, 166, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.88));
}

/* Keep content above the gradient */
.page-home .g-section > .g-container,
.page-home .g-werkwijze > .g-container,
.page-home .g-pakketten > .g-container,
.page-home .g-contact > .g-container{
  position: relative;
  z-index: 1;
}

/* If some sections don't have direct .g-container children, keep all children above */
.page-home .g-section > *,
.page-home .g-werkwijze > *,
.page-home .g-pakketten > *,
.page-home .g-contact > *{
  position: relative;
  z-index: 1;
}

/* OPTIONAL: slightly different tone for alternating sections (nice rhythm) */
.page-home .g-section:nth-of-type(odd)::before{
  background:
    radial-gradient(1200px 700px at 10% 20%, rgba(118, 243, 166, 0.18), transparent 62%),
    radial-gradient(900px 650px at 92% 30%, rgba(88, 215, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.86));
}
.page-home .g-section:nth-of-type(even)::before{
  background:
    radial-gradient(1100px 720px at 14% 18%, rgba(118, 243, 166, 0.12), transparent 62%),
    radial-gradient(1100px 720px at 86% 30%, rgba(88, 215, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.86));
}

/* Lightbox: if the iframe has its own close button, hide the outer one */
.g-lightbox.has-inner-close .g-lightboxClose{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   SINGLE CASE — Premium Brand Background + Accents
   ========================================================= */

/* Full page background (same language as homepage) */
.single-case body{
  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(118, 243, 166, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 88% 22%, rgba(88, 215, 255, 0.16), transparent 60%),
    radial-gradient(900px 800px at 50% 100%, rgba(118, 243, 166, 0.1), transparent 60%),
    linear-gradient(135deg, #f9fcff 0%, #f4f8fb 50%, #eef3f8 100%);
}

/* Remove any theme white wrappers */
.single-case .site,
.single-case .site-content,
.single-case .content-area,
.single-case .site-main,
.single-case .entry-content{
  background: transparent !important;
}


/* =========================================================
   HERO SECTION — elevated glass feel
   ========================================================= */

.single-case .g-caseHero{
  padding-top: 120px;
  padding-bottom: 90px;
  position: relative;
  overflow: hidden;
}

/* subtle glow blob */
.single-case .g-caseHero::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:420px;
  height:420px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 243, 166, 0.3), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(88, 215, 255, 0.22), transparent 60%);
  filter: blur(16px);
  opacity:.75;
  pointer-events:none;
}

/* hero title stronger */
.single-case .g-caseTitle{
  background: linear-gradient(90deg, #0f1b2b 0%, #1c2b3f 60%, #0f1b2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* lead text softer */
.single-case .g-caseLead{
  color: rgba(12, 18, 32, 0.65);
  font-size: 17px;
}


/* =========================================================
   HERO IMAGE — floating premium card
   ========================================================= */

.single-case .g-caseHeroMedia{
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(0);
  transition: transform .4s ease, box-shadow .4s ease;
}

.single-case .g-caseHeroMedia:hover{
  transform: translateY(-6px);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* =========================================================
   CONTENT SECTION — glass card feel
   ========================================================= */

.single-case .g-caseContent{
  margin-top: 40px;
  padding: 48px 48px 52px;
  border-radius: 28px;
  background: var(--field-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Headings inside content */
.single-case .g-caseContent h2{
  font-size: 26px;
  letter-spacing: -0.3px;
  margin-top: 40px;
  margin-bottom: 12px;
}

/* Paragraphs more elegant */
.single-case .g-caseContent p{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(12, 18, 32, 0.72);
}


/* =========================================================
   CLOSE BUTTON — refined floating glass
   ========================================================= */

.single-case .g-caseClose{
  position: fixed;
  top: 32px;
  right: 40px;
  z-index: 9999;

  width: 48px;
  height: 48px;
  border-radius: 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: var(--surface-soft);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  font-size: 16px;
  font-weight: 700;
  color: rgba(12, 18, 32, 0.75);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.single-case .g-caseClose:hover{
  transform: translateY(-3px);
  border-color: rgba(118, 243, 166, 0.4);
  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.3)
  );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.22),
    0 0 0 8px rgba(118, 243, 166, 0.1);
}


/* =========================================================
   MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 980px){

  .single-case .g-caseHero{
    padding-top: 90px;
  }

  .single-case .g-caseContent{
    padding: 32px 22px;
  }

  .single-case .g-caseClose{
    top: 18px;
    right: 18px;
  }
}

/* =========================================================
   SINGLE CASE — Wider Editorial Layout (Minder feel)
   ========================================================= */

/* Remove old max-width limitation */
.single-case .g-caseContent{
  max-width: none;
  width: 100%;
}

/* Center container properly */
.single-case .g-caseContent{
  margin-left: auto;
  margin-right: auto;
}

/* Large screens (1440px+) */
@media (min-width: 1440px){
  .single-case .g-caseContent{
    width: min(1200px, 78%);
  }
}

/* Ultra-wide screens (1920px+) */
@media (min-width: 1920px){
  .single-case .g-caseContent{
    width: min(1350px, 72%);
  }
}

/* =========================================
   WPForms — Gardenn Contact Form Skin
   (Keeps your current design)
========================================= */

/* make the whole wpforms block behave like your .g-contactForm */
.g-contactCard .wpforms-container{
  margin: 0 !important;
}

.g-contactCard .wpforms-form{
  display: grid;
  gap: 12px;
}

/* labels -> match your uppercase label style */
.g-contactCard .wpforms-field-label{
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(12, 18, 32, 0.55) !important;
  margin-bottom: 6px !important;
}

/* inputs + textarea -> match your .g-field input styles */
.g-contactCard .wpforms-form input[type="text"],
.g-contactCard .wpforms-form input[type="email"],
.g-contactCard .wpforms-form input[type="tel"],
.g-contactCard .wpforms-form textarea{
  width: 100% !important;
  border-radius: 16px !important;
  border: 1px solid rgba(12, 18, 32, 0.12) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: rgba(12, 18, 32, 0.92) !important;
  outline: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.g-contactCard .wpforms-form textarea{
  min-height: 120px !important;
  resize: vertical !important;
}

/* focus = same as yours */
.g-contactCard .wpforms-form input:focus,
.g-contactCard .wpforms-form textarea:focus{
  border-color: rgba(88, 215, 255, 0.45) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

/* remove WPForms extra spacing */
.g-contactCard .wpforms-field{
  padding: 0 !important;
  margin: 0 !important;
}

/* buttons -> use your .g-btn styling */
.g-contactCard .wpforms-submit{
  width: 100% !important;
  justify-content: center !important;

  /* mimic your .g-btn + .g-btnPrimary */
  border-radius: 999px !important;
  border: 1px solid rgba(118, 243, 166, 0.4) !important;
  background: linear-gradient(135deg, rgba(118, 243, 166, 0.58), rgba(88, 215, 255, 0.28)) !important;
  color: rgba(12, 18, 32, 0.92) !important;

  font-weight: 650 !important;
  letter-spacing: .1px !important;
  padding: 12px 18px !important;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

/* hover like your buttons */
.g-contactCard .wpforms-submit:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(12, 18, 32, 0.18) !important;
}

/* WPForms confirmation message styling */
.g-contactCard .wpforms-confirmation-container-full{
  border-radius: 16px !important;
  border: 1px solid rgba(118, 243, 166, 0.45) !important;
  background: rgba(118, 243, 166, 0.14) !important;
  color: rgba(12, 18, 32, 0.82) !important;
  padding: 12px 14px !important;
  margin-top: 12px !important;
}

/* =========================================================
   GARDENN — WPForms skin (Homepage Contact)
   Put this at the VERY END of overrides.css or main.css
   ========================================================= */

.page-home #contact .wpforms-container{
  margin: 0 !important;
}

.page-home #contact .wpforms-form{
  /* Make the form look like your old premium card */
  border-radius: 22px;
  background: var(--surface-82);
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

/* soft brand glow */
.page-home #contact .wpforms-form::before{
  content:"";
  position:absolute;
  inset:-140px -140px auto auto;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 243, 166, 0.28), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(88, 215, 255, 0.2), transparent 60%);
  filter: blur(14px);
  opacity: .9;
  pointer-events:none;
}

/* subtle overall gradient wash */
.page-home #contact .wpforms-form::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 28%, rgba(118, 243, 166, 0.1), transparent 60%),
    radial-gradient(900px 520px at 88% 26%, rgba(88, 215, 255, 0.1), transparent 60%);
  pointer-events:none;
}

/* keep content above the glows */
.page-home #contact .wpforms-field,
.page-home #contact .wpforms-submit-container{
  position: relative;
  z-index: 1;
}

/* spacing */
.page-home #contact .wpforms-field{
  margin-bottom: 14px !important;
}

/* label = your uppercase micro-label look */
.page-home #contact .wpforms-field-label{
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(12, 18, 32, 0.55) !important;
  margin: 0 0 8px !important;
}

/* Remove “First / Last” sub labels if WPForms shows them */
.page-home #contact .wpforms-field-sublabel,
.page-home #contact .wpforms-field-sublabel-before,
.page-home #contact .wpforms-field-sublabel-after{
  display: none !important;
}

/* Inputs / textarea = pill + glass like your old form */
.page-home #contact input[type="text"],
.page-home #contact input[type="email"],
.page-home #contact input[type="tel"],
.page-home #contact input[type="url"],
.page-home #contact input[type="number"],
.page-home #contact select,
.page-home #contact textarea{
  width: 100% !important;
  border-radius: 16px !important;
  border: 1px solid rgba(12, 18, 32, 0.12) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: rgba(12, 18, 32, 0.92) !important;
  outline: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-home #contact textarea{
  min-height: 120px !important;
  resize: vertical !important;
}

/* Focus */
.page-home #contact input:focus,
.page-home #contact select:focus,
.page-home #contact textarea:focus{
  border-color: rgba(88, 215, 255, 0.45) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Make Name field 2 columns like your old layout (First/Last) */
@media (min-width: 760px){
  .page-home #contact .wpforms-field-name .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .page-home #contact .wpforms-field-name .wpforms-field-row .wpforms-field-row-block{
    width: 100% !important;
    max-width: none !important;
  }
}

/* Button = your gradient, full width */
.page-home #contact .wpforms-submit-container{
  margin-top: 14px !important;
}

.page-home #contact button.wpforms-submit{
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  padding: 12px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(12, 18, 32, 0.12) !important;

  background: linear-gradient(135deg, rgba(118, 243, 166, 0.58), rgba(88, 215, 255, 0.28)) !important;
  color: rgba(12, 18, 32, 0.92) !important;

  font-weight: 650 !important;
  letter-spacing: .1px !important;
  line-height: 1 !important;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  cursor: pointer !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.page-home #contact button.wpforms-submit:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(118, 243, 166, 0.4) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), 0 0 0 6px rgba(118, 243, 166, 0.1) !important;
}

/* Hide ugly WPForms required star alignment issues */
.page-home #contact .wpforms-required-label{
  color: rgba(255, 107, 107, 0.9) !important;
}

/* Make WPForms errors match your style */
.page-home #contact label.wpforms-error{
  margin-top: 8px !important;
  font-size: 13px !important;
  color: rgba(255, 107, 107, 0.95) !important;
  font-weight: 650 !important;
}

.page-home #contact .wpforms-field.wpforms-has-error input,
.page-home #contact .wpforms-field.wpforms-has-error textarea{
  border-color: rgba(255, 107, 107, 0.45) !important;
  background: rgba(255, 107, 107, 0.06) !important;
}

/* =========================================================
   CONTACT — Meta buttons horizontal desktop / stacked mobile
   ========================================================= */

.page-home #contact .g-contactMeta{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.page-home #contact .g-contactMetaItem{
  height: 100%;
}

/* Mobile: stack */
@media (max-width: 980px){
  .page-home #contact .g-contactMeta{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   WPFORMS — Fix Name field (First/Last) alignment
   ========================================================= */

/* Force true 2-column layout for the Name field row */
@media (min-width: 760px){
  .page-home #contact .wpforms-field-name .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* Remove WPForms block sizing/offsets that cause misalignment */
  .page-home #contact .wpforms-field-name .wpforms-field-row .wpforms-field-row-block{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
}

/* Make sure both inputs behave consistently */
.page-home #contact .wpforms-field-name input{
  width: 100% !important;
  display: block !important;
}

/* If WPForms adds any weird spacing above the second input, kill it */
.page-home #contact .wpforms-field-name .wpforms-field-row-block + .wpforms-field-row-block{
  margin-top: 0 !important;
}

/* =========================================================
   WPFORMS — HARD FIX: First/Last inputs align perfectly
   ========================================================= */

/* Desktop/tablet: lock the Name field to a true 2-col grid */
@media (min-width: 760px){
  .page-home #contact .wpforms-field-name .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .page-home #contact .wpforms-field-name .wpforms-field-row-block{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;

    /* Make each column behave the same */
    display: flex !important;
    flex-direction: column !important;
  }
}

/* WPForms "First / Last" sublabels can create uneven spacing.
   Your design doesn’t need them, so hide them consistently. */
.page-home #contact .wpforms-field-name .wpforms-field-sublabel{
  display: none !important;
}

/* Ensure inputs are full width + consistent vertical spacing */
.page-home #contact .wpforms-field-name input{
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

/* If WPForms injects any top spacing inside the blocks, remove it */
.page-home #contact .wpforms-field-name .wpforms-field-row-block > *{
  margin-top: 0 !important;
}

/* =========================================
   ABOUT (matches Gardenn style)
========================================= */

.g-about .g-sectionHead {
  margin-bottom: 18px;
}

.g-aboutCard{
  position: relative;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 26px;
  align-items: center;

  padding: 26px;
  border-radius: 26px;

  background: var(--chip-bg);
  border: 1px solid rgba(10, 20, 30, 0.08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateY(14px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease, box-shadow .4s ease;
  will-change: transform;
}

.g-aboutCard.is-visible{
  transform: translateY(0);
  opacity: 1;
}

.g-aboutMedia{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 420px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);
}

.g-aboutPhoto{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.02);
  transition: transform .6s ease;
}

.g-aboutGlow{
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(closest-side at 30% 25%, rgba(118, 243, 166, 0.35), transparent 70%),
    radial-gradient(closest-side at 80% 70%, rgba(88, 215, 255, 0.28), transparent 72%);
  filter: blur(18px);
  transform: translateZ(0);
  pointer-events: none;
  z-index: 0;
}

.g-aboutMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent 45%, rgba(0, 0, 0, 0.08));
  pointer-events:none;
}

.g-aboutMedia *{ position: relative; z-index: 1; }

.g-aboutBadge{
  display: inline-flex;
  margin-bottom: 10px;
}

.g-aboutTitle{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.08;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.g-aboutTitle span{
  background: linear-gradient(90deg, #76f3a6, #58d7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.g-aboutText{
  margin: 0 0 14px;
  max-width: 62ch;
  color: rgba(10, 20, 30, 0.78);
}

.g-aboutList{
  margin: 0 0 18px;
  padding-left: 18px;
  color: rgba(10, 20, 30, 0.78);
}

.g-aboutList li{
  margin: 6px 0;
}

.g-aboutActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hover polish */
@media (hover:hover){
  .g-aboutCard:hover{
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.1);
  }
  .g-aboutCard:hover .g-aboutPhoto{
    transform: scale(1.06);
  }
}

/* Responsive */
@media (max-width: 980px){
  .g-aboutCard{
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .g-aboutMedia{
    min-height: 360px;
    aspect-ratio: 16 / 10;
  }
}

/* =========================
   Pricing cards – reset on mobile
========================= */

/* =========================
   Pricing cards – reset on mobile
========================= */

@media (max-width: 900px){

  .g-pack--featured{
    transform: none !important;
  }

}


/* =========================
   2) overrides.css (loaded after main.css)
   ========================= */
/* =========================================================
   Gardenn.nl — overrides.css
   Purpose:
   - Fix Astra "white cut-off" seams
   - Keep content perfectly centered
   - Make EACH section have a full-bleed (100vw) gradient background
   - Prevent clipping on ultra-wide screens (2560px+)
   Load this AFTER main.css
   ========================================================= */

/* Prevent any horizontal drift caused by 100vw backgrounds */
html, body{
  overflow-x: hidden;
}

/* ---- Astra / theme wrappers: MUST be transparent + not clipping ---- */
.site,
.site-content,
#page,
#content,
.ast-container,
.site-main,
.content-area,
.entry-content,
.ast-plain-container,
.ast-separate-container,
.ast-page-builder-template{
  background: transparent !important;
}

/* Some Astra layouts clip children (kills 100vw ::before) */
.site,
.site-content,
#page,
#content,
.site-main,
.entry-content{
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
}

/* Astra sometimes applies width limits on the container */
.ast-container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure our custom page canvas is truly full width */
.page-home{
  width: 100% !important;
  max-width: none !important;
}

/* Ensure our sections themselves stay normal width (centered layout) */
.page-home .g-section,
.page-home .g-werkwijze,
.page-home .g-pakketten,
.page-home .g-contact{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: transparent !important; /* painted by ::before */
  position: relative;
  isolation: isolate;

  /* IMPORTANT: prevent ancestor clipping perception */
  overflow: visible !important;
}

/* Full-bleed background painter (100vw) WITHOUT shifting layout */
.page-home .g-section::before,
.page-home .g-werkwijze::before,
.page-home .g-pakketten::before,
.page-home .g-contact::before{
  content: "";
  position: absolute;

  /* paint area */
  top: 0;
  bottom: 0;

  /* full-bleed trick */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  /* Premium Gardenn gradient */
  background:
    radial-gradient(1400px 900px at 12% 12%, rgba(118, 243, 166, 0.18), transparent 62%),
    radial-gradient(1200px 850px at 88% 26%, rgba(88, 215, 255, 0.16), transparent 60%),
    radial-gradient(1100px 900px at 50% 105%, rgba(118, 243, 166, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));

  z-index: -1;
  pointer-events: none;
}

/* Optional variation so sections feel designed (keeps it premium) */
.page-home .g-section:nth-of-type(odd)::before{
  background:
    radial-gradient(1500px 950px at 18% 20%, rgba(118, 243, 166, 0.2), transparent 64%),
    radial-gradient(1200px 850px at 82% 34%, rgba(88, 215, 255, 0.14), transparent 60%),
    radial-gradient(1100px 900px at 60% 105%, rgba(118, 243, 166, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82));
}

/* Keep inner content above the background painter */
.page-home .g-section > *{ position: relative; z-index: 1; }

/* Make sure your inner centered container stays centered */
.page-home .g-container{
  width: min(1180px, calc(100% - 40px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   WPFORMS — HARD FIX: First/Last inputs align perfectly
   ========================================================= */

/* Desktop/tablet: lock the Name field to a true 2-col grid */
@media (min-width: 760px){
  .page-home #contact .wpforms-field-name .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .page-home #contact .wpforms-field-name .wpforms-field-row-block{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;

    /* Make each column behave the same */
    display: flex !important;
    flex-direction: column !important;
  }
}

/* WPForms "First / Last" sublabels can create uneven spacing.
   Your design doesn’t need them, so hide them consistently. */
.page-home #contact .wpforms-field-name .wpforms-field-sublabel{
  display: none !important;
}

/* Ensure inputs are full width + consistent vertical spacing */
.page-home #contact .wpforms-field-name input{
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

/* If WPForms injects any top spacing inside the blocks, remove it */
.page-home #contact .wpforms-field-name .wpforms-field-row-block > *{
  margin-top: 0 !important;
}

/* =========================================================
   WPFORMS — FIX Name (First/Last) alignment (your DOM)
   ========================================================= */

/* Kill clearfix that can push the second column down */
.page-home #contact .wpforms-field-name .wpforms-field-row::before,
.page-home #contact .wpforms-field-name .wpforms-field-row::after{
  content: none !important;
  display: none !important;
}

/* Force a clean 2-col grid for the name row */
@media (min-width: 760px){
  .page-home #contact .wpforms-field-name .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;

    /* override float layouts */
    clear: none !important;
  }

  .page-home #contact .wpforms-field-name .wpforms-field-row-block{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
  }
}

/* Mobile: stack (WPForms usually does this, but we force it cleanly) */
@media (max-width: 759px){
  .page-home #contact .wpforms-field-name .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .page-home #contact .wpforms-field-name .wpforms-field-row-block{
    float: none !important;
    width: 100% !important;
  }
}

/* Remove the “First / Last” sublabels (they cause uneven vertical space) */
.page-home #contact .wpforms-field-name .wpforms-field-sublabel{
  display: none !important;
}

/* Inputs full width + consistent */
.page-home #contact .wpforms-field-name input{
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

/* =========================================================
   CASE ARCHIVE — match SINGLE-CASE widths + full-bleed backgrounds
   Put this at the VERY END of overrides.css
   ========================================================= */

/* 1) Make sure Astra/theme wrappers don't force white blocks */
.post-type-archive-case .site,
.post-type-archive-case .site-content,
.post-type-archive-case .content-area,
.post-type-archive-case .site-main,
.post-type-archive-case .entry-content,
.post-type-archive-case #page{
  background: transparent !important;
}

/* 2) Ensure the archive "page-case" can span the full viewport */
.post-type-archive-case .page-case{
  width: 100%;
  max-width: none;
}

/* 3) Container widths — same centering logic as single-case,
      but also scales up on ultra-wide monitors */
.post-type-archive-case .page-case .g-container{
  width: min(1180px, calc(100% - 40px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ultra-wide tuning (so your cards/images get room on 2560px+) */
@media (min-width: 1440px){
  .post-type-archive-case .page-case .g-container{
    width: min(1320px, 82%);
  }
}
@media (min-width: 1920px){
  .post-type-archive-case .page-case .g-container{
    width: min(1480px, 78%);
  }
}

/* 4) Full-bleed section background painter (100vw) like your homepage,
      without pushing content to the left */
.post-type-archive-case .page-case .g-section{
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: transparent !important;
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

/* paint 100vw behind each section */
.post-type-archive-case .page-case .g-section::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(1400px 900px at 12% 12%, rgba(118, 243, 166, 0.18), transparent 62%),
    radial-gradient(1200px 850px at 88% 26%, rgba(88, 215, 255, 0.16), transparent 60%),
    radial-gradient(1100px 900px at 50% 105%, rgba(118, 243, 166, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
  z-index: -1;
  pointer-events: none;
}

/* keep inner content above the background */
.post-type-archive-case .page-case .g-section > *{
  position: relative;
  z-index: 1;
}

/* =========================================
   ARCHIVE – CLEAN WHITE BACKGROUND
========================================= */

.post-type-archive-case,
.post-type-archive-case body,
.post-type-archive-case .site,
.post-type-archive-case .site-content,
.post-type-archive-case #page {
  background: #ffffff !important;
}

/* =========================================
   ARCHIVE – MATCH HOMEPAGE PORTFOLIO GRID
========================================= */

.post-type-archive-case .g-portfolio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

/* Large screens */
@media (min-width: 1600px) {
  .post-type-archive-case .g-portfolio {
    gap: 64px;
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .post-type-archive-case .g-portfolio {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   ARCHIVE – MATCH CARD SIZE
========================================= */

.post-type-archive-case .g-case {
  width: 100%;
  max-width: none;
}

.post-type-archive-case .g-caseMedia {
  aspect-ratio: 16 / 11;
  border-radius: 24px;
  overflow: hidden;
}

/* Match single-case container width */

.post-type-archive-case .g-container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media (min-width: 1800px) {
  .post-type-archive-case .g-container {
    max-width: 1600px;
  }
}

/* =========================================
   CASE ARCHIVE — FORCE WHITE (disable section gradient painters)
   Put at VERY END of overrides.css
========================================= */

.post-type-archive-case .page-case .g-section::before{
  content: none !important;
  display: none !important;
}

.post-type-archive-case,
.post-type-archive-case body,
.post-type-archive-case .site,
.post-type-archive-case .site-content,
.post-type-archive-case #page{
  background: #fff !important;
}

/* =========================================
   CASE ARCHIVE — HIDE ASTRA HEADER (top bar)
========================================= */

.post-type-archive-case header.site-header,
.post-type-archive-case #masthead,
.post-type-archive-case .ast-primary-header-bar,
.post-type-archive-case .ast-above-header-bar,
.post-type-archive-case .ast-below-header-bar{
  display: none !important;
}

/* Remove any spacing Astra leaves for the header */
.post-type-archive-case #content,
.post-type-archive-case .site-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =========================
   Gardenn Sticky Social Sidebar
========================= */

.g-socialBar {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(15px);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 12px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);

  opacity: 0;
  pointer-events: none;
  transition: all .45s cubic-bezier(.2,.8,.2,1);
}

.g-socialBar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.g-socialLink {
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);

  transition: transform .2s ease, box-shadow .2s ease;
}

.g-socialLink svg {
  width: 18px;
  height: 18px;
  fill: rgba(15, 23, 42, 0.75);
}

.g-socialLink:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15);
}

/* Optional: hide on small devices */
@media (max-width: 820px) {
  .g-socialBar {
    right: 14px;
  }
}

/* =========================
   Gardenn Social Bar — Mobile bottom bar
   (keep desktop vertical)
========================= */

@media (max-width: 820px){
  .g-socialBar{
    /* move from right-center to bottom-center */
    top: auto;
    right: auto;
    left: 50%;
    bottom: 16px;

    transform: translateX(-50%) translateY(10px);

    flex-direction: row;
    gap: 12px;

    padding: 10px 12px;
    border-radius: 999px;

    /* a bit lighter + tighter for mobile */
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.14);
  }

  .g-socialBar.is-visible{
    transform: translateX(-50%) translateY(0);
  }

  .g-socialLink{
    width: 46px;
    height: 46px;
  }

  .g-socialLink svg{
    width: 18px;
    height: 18px;
  }
}

/* Optional: respect iPhone safe area */
@supports (padding: max(0px)){
  @media (max-width: 820px){
    .g-socialBar{
      bottom: calc(16px + env(safe-area-inset-bottom));
    }
  }
}

/* =========================
   About section — fix mobile image overflow
========================= */

@media (max-width: 820px){

  /* the card that contains the image (safe clamp) */
  .g-aboutCard,
  .g-aboutMedia{
    overflow: hidden;
    border-radius: 24px; /* match your card radius */
  }

  /* wrapper around the image */
  .g-aboutMedia{
    width: 100%;
    max-width: 100%;
  }

  /* the actual image */
  .g-aboutMedia img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: 260px;           /* pick a clean mobile height */
    object-fit: cover;       /* prevents overflow + keeps it premium */
    object-position: 50% 12%;/* center-top look */
    border-radius: inherit;
  }
}

/* =========================
   About section — image MUST fill container (mobile)
========================= */

@media (max-width: 820px){

  /* This is the “image container” */
  .g-aboutMedia{
    width: 100%;
    aspect-ratio: 16 / 10;   /* change to 4/3 if you want taller */
    border-radius: 24px;
    overflow: hidden;
    position: relative;
  }

  /* Image fills the container */
  .g-aboutMedia img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%; /* center-top */
    display: block;
  }
}

/* =========================================================
   THEME TOGGLE (Light + Dark)
   ========================================================= */
.g-themeToggle{
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(12, 18, 32, 0.14);
  color: rgba(12, 18, 32, 0.86);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.g-themeToggle:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}
.g-themeToggle:active{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.g-themeToggle:focus-visible{
  outline: 3px solid rgba(88, 215, 255, 0.3);
  outline-offset: 4px;
}
.g-themeToggleIcon{
  display: inline-flex;
  line-height: 0;
}

/* =========================================================
   DARK MODE — Cinematic Architectural
   Applies when <html data-theme="dark">
   ========================================================= */
html[data-theme="dark"]{
  color-scheme: dark;
}

/* Core palette tokens (only used in overrides; does not affect light mode) */
html[data-theme="dark"]{
  --dm-bg: #0f1419;
  --dm-bg2: #111a20;
  --dm-surface: rgba(27, 36, 44, 0.78);
  --dm-surface2: rgba(21, 28, 34, 0.72);
  --dm-card: rgba(24, 32, 39, 0.82);
  --dm-border: rgba(255, 255, 255, 0.1);
  --dm-border2: rgba(255, 255, 255, 0.14);
  --dm-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
  --dm-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.28);

  --dm-text: rgba(243, 246, 249, 0.94);
  --dm-muted: rgba(163, 182, 198, 0.82);

  --dm-accent: #7dd3b0;
  --dm-accent2: #58d7ff;
  --dm-accentGlow: rgba(125, 211, 176, 0.22);
  --dm-blueGlow: rgba(88, 215, 255, 0.18);
}

/* Page base */
html[data-theme="dark"] body{
  background: radial-gradient(1200px 700px at 18% 12%, rgba(125, 211, 176, 0.1), transparent 55%),
              radial-gradient(1000px 600px at 78% 22%, rgba(88, 215, 255, 0.08), transparent 60%),
              linear-gradient(180deg, var(--dm-bg) 0%, var(--dm-bg2) 100%);
  color: var(--dm-text);
}

/* Headings / default text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4{
  color: var(--dm-text);
}
html[data-theme="dark"] p,
html[data-theme="dark"] li{
  color: var(--dm-muted);
}

/* Navbar */
html[data-theme="dark"] .g-header{
  background: rgba(12, 16, 20, 0.72);
  border-bottom: 1px solid var(--dm-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] .g-brandText{
  color: var(--dm-text);
}

/* Toggle button in dark */
html[data-theme="dark"] .g-themeToggle{
  background: rgba(15, 20, 25, 0.68);
  border-color: var(--dm-border);
  color: var(--dm-text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .g-themeToggle:hover{
  border-color: var(--dm-border2);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
}

/* Hero readability */
html[data-theme="dark"] .g-hero::before{
  /* stronger cinematic fade on left so headline is readable */
  background:
    linear-gradient(90deg,
      rgba(8, 10, 12, 0.88) 0%,
      rgba(8, 10, 12, 0.7) 38%,
      rgba(8, 10, 12, 0.32) 72%,
      rgba(8, 10, 12, 0) 100%);
}
html[data-theme="dark"] .g-hero h1{
  color: var(--dm-text);
}
html[data-theme="dark"] .g-hero p{
  color: rgba(220, 232, 242, 0.86);
}

/* =========================================================
   Buttons — fix hover "glow" to match dark mode (Screenshot 2)
   ========================================================= */
html[data-theme="dark"] .page-home .g-btn{
  background: rgba(24, 32, 39, 0.64);
  border-color: var(--dm-border);
  color: var(--dm-text);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .page-home .g-btnPrimary{
  background:
    linear-gradient(135deg, rgba(125, 211, 176, 0.34), rgba(88, 215, 255, 0.14));
  border-color: rgba(125, 211, 176, 0.22);
}
html[data-theme="dark"] .page-home .g-btnGhost{
  background: rgba(24, 32, 39, 0.46);
}
html[data-theme="dark"] .page-home .g-btn:hover{
  background: rgba(28, 38, 46, 0.72);
  border-color: rgba(125, 211, 176, 0.28);
  box-shadow:
    0 20px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 0 6px rgba(125, 211, 176, 0.06);
}

/* =========================================================
   Sections + cards — fix mismatches (Screens 3–6)
   ========================================================= */

/* All homepage sections were hard-set to white in main.css */
html[data-theme="dark"] .page-home .g-section{
  background: transparent !important;
}

/* Services cards (.g-card) */
html[data-theme="dark"] .page-home .g-card{
  background: var(--dm-card);
  border: 1px solid var(--dm-border);
  box-shadow: var(--dm-shadow-soft);
  color: var(--dm-text);
}
html[data-theme="dark"] .page-home .g-card h3{ color: var(--dm-text); }
html[data-theme="dark"] .page-home .g-card p,
html[data-theme="dark"] .page-home .g-card li{ color: var(--dm-muted); }
html[data-theme="dark"] .page-home .g-cardIcon{
  background: rgba(125, 211, 176, 0.14);
  border: 1px solid rgba(125, 211, 176, 0.18);
}

/* Werkwijze timeline cards */
html[data-theme="dark"] .page-home .g-stepCard{
  background: var(--dm-card);
  border-color: var(--dm-border);
  box-shadow: var(--dm-shadow-soft);
}
html[data-theme="dark"] .page-home .g-stepCard h3{ color: var(--dm-text); }
html[data-theme="dark"] .page-home .g-stepCard p{ color: var(--dm-muted); }
html[data-theme="dark"] .page-home .g-stepNo{
  background: rgba(255, 255, 255, 0.1);
  color: var(--dm-text);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .page-home .g-stepIcon{
  background: rgba(125, 211, 176, 0.12);
  border-color: rgba(125, 211, 176, 0.18);
}

/* Pakketten section + pack cards */
html[data-theme="dark"] .page-home .g-pakketten{
  background: transparent !important;
}
html[data-theme="dark"] .page-home .g-pack{
  background: var(--dm-card);
  border-color: var(--dm-border);
  box-shadow: var(--dm-shadow);
}
html[data-theme="dark"] .page-home .g-pack h3{ color: var(--dm-text); }
html[data-theme="dark"] .page-home .g-pack p,
html[data-theme="dark"] .page-home .g-pack li{ color: var(--dm-muted); }
html[data-theme="dark"] .page-home .g-packPill{
  background: rgba(255, 255, 255, 0.1);
  color: var(--dm-text);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .page-home .g-packIcon{
  background: rgba(125, 211, 176, 0.12);
  border-color: rgba(125, 211, 176, 0.18);
}
html[data-theme="dark"] .page-home .g-packCta{
  background: linear-gradient(135deg, rgba(125, 211, 176, 0.3), rgba(88, 215, 255, 0.12));
  border-color: rgba(125, 211, 176, 0.22);
  color: var(--dm-text);
}
html[data-theme="dark"] .page-home .g-packCta:hover{
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.48),
    0 0 0 8px rgba(125, 211, 176, 0.06);
}

/* Over section: large light panel -> dark glass */
html[data-theme="dark"] .page-home .g-about{
  background: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
  box-shadow: var(--dm-shadow) !important;
}
html[data-theme="dark"] .page-home .g-about h2,
html[data-theme="dark"] .page-home .g-about h3{
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .page-home .g-about p,
html[data-theme="dark"] .page-home .g-about li{
  color: var(--dm-muted) !important;
}
html[data-theme="dark"] .page-home .g-aboutTag{
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--dm-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Portfolio cards: remove light panel + ensure readable overlay */
html[data-theme="dark"] .page-home .g-case{
  background: rgba(24, 32, 39, 0.4);
  border-color: var(--dm-border);
  box-shadow: var(--dm-shadow);
}
html[data-theme="dark"] .page-home .g-caseMedia{
  background: #0b0f13;
}
html[data-theme="dark"] .page-home .g-caseBody{
  background: rgba(12, 16, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .page-home .g-caseBody h3{ color: var(--dm-text); }
html[data-theme="dark"] .page-home .g-caseBody p{ color: rgba(220, 232, 242, 0.86); }

/* Contact section + form (Screenshot 8) */
html[data-theme="dark"] .page-home .g-contact{
  background: transparent !important;
}
html[data-theme="dark"] .page-home .g-contactCard{
  background: var(--dm-card);
  border-color: var(--dm-border);
  box-shadow: var(--dm-shadow);
}
html[data-theme="dark"] .page-home .g-contactCard::before{
  opacity: .55;
}
html[data-theme="dark"] .page-home .g-field label,
html[data-theme="dark"] .page-home .g-contactCard .wpforms-title,
html[data-theme="dark"] .page-home .g-contactCard .wpforms-field-label{
  color: rgba(220, 232, 242, 0.86) !important;
}

html[data-theme="dark"] .page-home .g-field input,
html[data-theme="dark"] .page-home .g-field textarea{
  background: rgba(10, 14, 18, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .page-home .g-field input:focus,
html[data-theme="dark"] .page-home .g-field textarea:focus{
  background: rgba(10, 14, 18, 0.7) !important;
  border-color: rgba(125, 211, 176, 0.28) !important;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.35),
    0 0 0 6px rgba(125, 211, 176, 0.06) !important;
}

html[data-theme="dark"] .page-home #contact input[type="text"],
html[data-theme="dark"] .page-home #contact input[type="email"],
html[data-theme="dark"] .page-home #contact input[type="tel"],
html[data-theme="dark"] .page-home #contact textarea{
  background: rgba(10, 14, 18, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .page-home #contact input::placeholder,
html[data-theme="dark"] .page-home #contact textarea::placeholder{
  color: rgba(163, 182, 198, 0.7) !important;
}

/* Footer mini cards below form (WhatsApp / E-mail) */
html[data-theme="dark"] .page-home .g-miniCard{
  background: rgba(24, 32, 39, 0.56) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--dm-text) !important;
}

/* =========================================================
   Keep screenshot 7 as-is (no changes needed)
   ========================================================= */

html[data-theme="dark"] .page-home .g-heroOverlay{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 700px at 18% 12%, rgba(125, 211, 176, 0.1), transparent 55%),
              radial-gradient(1000px 600px at 78% 22%, rgba(88, 215, 255, 0.08), transparent 60%),
              linear-gradient(180deg, var(--dm-bg) 0%, var(--dm-bg2) transparent 55%);
  will-change: transform;
}

/* ================================
   DARK MODE – DIENSTEN SECTION
================================ */
html[data-theme="dark"] #diensten {
  position: relative;
  background:
    radial-gradient(
      900px 500px at 20% 10%,
      rgba(125, 211, 176, 0.06),
      transparent 60%
    ),
    radial-gradient(
      700px 400px at 85% 20%,
      rgba(80, 160, 220, 0.05),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #0e141a 0%,
      #101820 40%,
      #0c1218 100%
    );
}

/* subtle inner glow to frame the cards */
html[data-theme="dark"] #diensten::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      1200px 600px at 50% 30%,
      rgba(255, 255, 255, 0.04),
      transparent 70%
    );
  opacity: 0.6;
}

/* =================================
   DARK MODE – WERKWIJZE SECTION
================================= */
html[data-theme="dark"] #werkwijze {
  position: relative;
  background:
    radial-gradient(
      800px 600px at 12% 40%,
      rgba(125, 211, 176, 0.08),
      transparent 65%
    ),
    radial-gradient(
      900px 500px at 85% 10%,
      rgba(80, 160, 220, 0.05),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0c1218 0%,
      #0f161d 45%,
      #0b1116 100%
    );
}

/* soft cinematic framing glow */
html[data-theme="dark"] #werkwijze::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      1200px 700px at 50% 30%,
      rgba(255, 255, 255, 0.04),
      transparent 70%
    );
  opacity: 0.5;
}

/* optional: enhance the vertical timeline line glow */
html[data-theme="dark"] .g-werkwijze .timeline-line,
html[data-theme="dark"] .g-werkwijze::after {
  box-shadow:
    0 0 12px rgba(125, 211, 176, 0.6),
    0 0 30px rgba(125, 211, 176, 0.3);
}

/* =================================
   DARK MODE – PAKKETTEN (FULL-WIDTH BACKGROUND FIX)
================================= */
html[data-theme="dark"] #pakketten{
  position: relative;
  isolation: isolate;
  background: none !important;
}

/* Full-bleed background (100vw) even if section is constrained */
html[data-theme="dark"] #pakketten::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* force full viewport width */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      900px 520px at 50% 18%,
      rgba(125, 211, 176, 0.07),
      transparent 65%
    ),
    radial-gradient(
      850px 620px at 12% 88%,
      rgba(80, 160, 220, 0.05),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0b1116 0%,
      #0d141a 45%,
      #0a1014 100%
    );
}

/* Soft vignette for framing (also full-bleed) */
html[data-theme="dark"] #pakketten::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      1200px 820px at 50% 40%,
      transparent 55%,
      rgba(0, 0, 0, 0.35) 100%
    );
  opacity: 0.55;
}

/* IMPORTANT: only neutralize the inner wrapper that could have a panel bg */
html[data-theme="dark"] #pakketten > .container{
  background: transparent !important;
}
html[data-theme="dark"] #pakketten > .container::before,
html[data-theme="dark"] #pakketten > .container::after{
  background: transparent !important;
}

/* =================================
   DARK MODE – ABOUT (match Diensten vibe + full component theming)
================================= */
html[data-theme="dark"] #about{
  position: relative;
  isolation: isolate;
  background: none !important;
}

/* full-bleed cinematic gradient like Diensten */
html[data-theme="dark"] #about::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 18% 18%, rgba(125, 211, 176, 0.06), transparent 62%),
    radial-gradient(760px 520px at 86% 22%, rgba(80, 160, 220, 0.05), transparent 70%),
    linear-gradient(180deg, #0e141a 0%, #101820 42%, #0c1218 100%);
}

/* subtle framing glow */
html[data-theme="dark"] #about::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  pointer-events:none;

  background: radial-gradient(1200px 700px at 50% 30%, rgba(255, 255, 255, 0.04), transparent 70%);
  opacity: .55;
}

/* kill any inner wrapper panels that might interfere */
html[data-theme="dark"] #about > .g-container,
html[data-theme="dark"] #about .g-container{
  background: transparent !important;
}

/* ---- Card / panel ---- */
html[data-theme="dark"] #about .g-aboutCard{
  background: rgba(18, 26, 33, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
  backdrop-filter: blur(10px);
}

/* ---- Text readability ---- */
html[data-theme="dark"] #about .g-sectionTitle,
html[data-theme="dark"] #about .g-aboutTitle{
  color: rgba(243, 246, 249, 0.95) !important;
}

html[data-theme="dark"] #about .g-sectionKicker,
html[data-theme="dark"] #about .g-aboutText,
html[data-theme="dark"] #about .g-aboutBody p,
html[data-theme="dark"] #about .g-aboutBody li{
  color: rgba(159, 176, 192, 0.92) !important;
}

/* list bullets */
html[data-theme="dark"] #about .g-aboutList li::marker{
  color: rgba(125, 211, 176, 0.75);
}

/* ---- Badge / pill ---- */
html[data-theme="dark"] #about .g-badge,
html[data-theme="dark"] #about .g-aboutBadge{
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(243, 246, 249, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- Image framing ---- */
html[data-theme="dark"] #about .g-aboutMedia{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] #about .g-aboutGlow{
  opacity: .35; /* keep glow but reduce "milky" feel */
}

/* ---- Buttons inside About ---- */
html[data-theme="dark"] #about .g-aboutActions .g-btn{
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(243, 246, 249, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] #about .g-aboutActions .g-btn:hover{
  transform: translateY(-1px);
  background: rgba(125, 211, 176, 0.1) !important;
  border-color: rgba(125, 211, 176, 0.22) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(125, 211, 176, 0.14);
}

/* Primary button (if you have a primary class) */
html[data-theme="dark"] #about .g-aboutActions .g-btn.primary,
html[data-theme="dark"] #about .g-aboutActions .g-btn.is-primary{
  background: linear-gradient(90deg, rgba(125, 211, 176, 0.3), rgba(80, 160, 220, 0.22)) !important;
  border-color: rgba(125, 211, 176, 0.28) !important;
}

/* =================================
   DARK MODE – PORTFOLIO
================================= */
html[data-theme="dark"] #portfolio{
  position: relative;
  isolation: isolate;
  background: none !important;
}

/* Full-bleed cinematic background */
html[data-theme="dark"] #portfolio::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 18% 20%, rgba(125, 211, 176, 0.05), transparent 65%),
    radial-gradient(850px 600px at 88% 15%, rgba(80, 160, 220, 0.05), transparent 70%),
    linear-gradient(180deg, #0c1218 0%, #0f161d 45%, #0b1116 100%);
}

/* Soft framing glow */
html[data-theme="dark"] #portfolio::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  pointer-events:none;

  background: radial-gradient(
    1200px 750px at 50% 35%,
    rgba(255, 255, 255, 0.04),
    transparent 70%
  );
  opacity:.55;
}

/* Remove accidental wrapper panels */
html[data-theme="dark"] #portfolio > .g-container,
html[data-theme="dark"] #portfolio .g-container{
  background: transparent !important;
}

/* =================================
   PORTFOLIO CARDS
================================= */

/* Card container */
html[data-theme="dark"] #portfolio .g-case{
  background: rgba(18, 26, 33, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

/* Image overlay (bottom label area) */
html[data-theme="dark"] #portfolio .g-caseBody{
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(10, 14, 18, 0.75) 100%
  ) !important;
}

/* Title */
html[data-theme="dark"] #portfolio .g-caseTitle{
  color: rgba(243, 246, 249, 0.96) !important;
}

/* Subtitle */
html[data-theme="dark"] #portfolio .g-caseText{
  color: rgba(159, 176, 192, 0.9) !important;
}

/* Small category badge */
html[data-theme="dark"] #portfolio .g-badge{
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(243, 246, 249, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover refinement */
html[data-theme="dark"] #portfolio .g-case:hover{
  transform: translateY(-4px);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(125, 211, 176, 0.1);
}

/* =================================
   DARK MODE – CONTACT
================================= */
html[data-theme="dark"] #contact{
  position: relative;
  isolation: isolate;
  background: none !important;
}

/* Full-bleed cinematic background */
html[data-theme="dark"] #contact::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 20% 18%, rgba(125, 211, 176, 0.06), transparent 65%),
    radial-gradient(800px 600px at 85% 22%, rgba(80, 160, 220, 0.05), transparent 70%),
    linear-gradient(180deg, #0e141a 0%, #101820 45%, #0c1218 100%);
}

/* Soft framing glow */
html[data-theme="dark"] #contact::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  pointer-events:none;

  background: radial-gradient(
    1200px 750px at 50% 35%,
    rgba(255, 255, 255, 0.04),
    transparent 70%
  );
  opacity:.55;
}

/* Remove inner wrapper background */
html[data-theme="dark"] #contact .g-container{
  background: transparent !important;
}

/* =================================
   FORM CONTAINER (WPForms)
================================= */
html[data-theme="dark"] #contact .wpforms-container{
  background: rgba(18, 26, 33, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 28px;
}

/* Labels */
html[data-theme="dark"] #contact .wpforms-field-label{
  color: rgba(243, 246, 249, 0.9) !important;
}

/* Inputs / textarea */
html[data-theme="dark"] #contact input,
html[data-theme="dark"] #contact textarea,
html[data-theme="dark"] #contact select{
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(243, 246, 249, 0.92) !important;
  border-radius: 12px !important;
}

/* Placeholder */
html[data-theme="dark"] #contact input::placeholder,
html[data-theme="dark"] #contact textarea::placeholder{
  color: rgba(159, 176, 192, 0.7);
}

/* Focus state */
html[data-theme="dark"] #contact input:focus,
html[data-theme="dark"] #contact textarea:focus,
html[data-theme="dark"] #contact select:focus{
  outline: none !important;
  border-color: rgba(125, 211, 176, 0.5) !important;
  box-shadow:
    0 0 0 2px rgba(125, 211, 176, 0.15),
    0 10px 25px rgba(0, 0, 0, 0.35);
}

/* Submit button */
html[data-theme="dark"] #contact .wpforms-submit{
  background: linear-gradient(
    90deg,
    rgba(125, 211, 176, 0.35),
    rgba(80, 160, 220, 0.25)
  ) !important;
  border: 1px solid rgba(125, 211, 176, 0.35) !important;
  color: rgba(243, 246, 249, 0.95) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] #contact .wpforms-submit:hover{
  transform: translateY(-2px);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(125, 211, 176, 0.15);
}

/* =================================
   CONTACT META (WhatsApp / Email)
================================= */
html[data-theme="dark"] #contact .g-contactMetaItem{
  background: rgba(18, 26, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(243, 246, 249, 0.92);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

html[data-theme="dark"] #contact .g-contactMetaItem strong{
  color: rgba(243, 246, 249, 0.95);
}

html[data-theme="dark"] #contact .g-contactMetaItem span{
  color: rgba(159, 176, 192, 0.85);
}

html[data-theme="dark"] #contact .g-contactMetaItem:hover{
  transform: translateY(-3px);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(125, 211, 176, 0.12);
}

/* =================================
   DARK MODE – CONTACT: REMOVE LIGHT PANEL WASH
================================= */

/* 1) Neutralize any "light wash" pseudo-elements on the WPForms wrapper */
html[data-theme="dark"] #contact #wpforms-118,
html[data-theme="dark"] #contact #wpforms-118::before,
html[data-theme="dark"] #contact #wpforms-118::after{
  background: transparent !important;
}

/* 2) Force the actual visible panel (your theme's WPForms container) to dark glass */
html[data-theme="dark"] #contact #wpforms-118.wpforms-container{
  background: rgba(18, 26, 33, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px);
}

/* 3) If the wash is on the grid wrapper, remove it */
html[data-theme="dark"] #contact .g-contactGrid,
html[data-theme="dark"] #contact .g-contactGrid::before,
html[data-theme="dark"] #contact .g-contactGrid::after{
  background: transparent !important;
}

/* 4) Make sure the form itself isn't painting a light background */
html[data-theme="dark"] #contact form.wpforms-form{
  background: transparent !important;
}

/* =================================
   DARK MODE – WPForms SUBMIT BUTTON (premium)
================================= */
html[data-theme="dark"] #contact .wpforms-submit-container{
  text-align: left; /* keeps it consistent if your layout changes */
}

/* button base */
html[data-theme="dark"] #contact button.wpforms-submit,
html[data-theme="dark"] #contact input.wpforms-submit{
  appearance: none;
  -webkit-appearance: none;

  background: linear-gradient(
    90deg,
    rgba(125, 211, 176, 0.22),
    rgba(80, 160, 220, 0.16)
  ) !important;

  color: rgba(243, 246, 249, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 650;
  letter-spacing: 0.2px;

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}

/* hover = subtle architectural glow */
html[data-theme="dark"] #contact button.wpforms-submit:hover,
html[data-theme="dark"] #contact input.wpforms-submit:hover{
  transform: translateY(-2px);
  filter: saturate(1.06);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 26px rgba(125, 211, 176, 0.14),
    0 0 40px rgba(80, 160, 220, 0.1);
}

/* focus ring (keyboard users) */
html[data-theme="dark"] #contact button.wpforms-submit:focus-visible,
html[data-theme="dark"] #contact input.wpforms-submit:focus-visible{
  outline: none !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 0 3px rgba(125, 211, 176, 0.18),
    0 0 34px rgba(125, 211, 176, 0.12);
}

/* pressed */
html[data-theme="dark"] #contact button.wpforms-submit:active,
html[data-theme="dark"] #contact input.wpforms-submit:active{
  transform: translateY(0px);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

/* spinner visibility on dark */
html[data-theme="dark"] #contact .wpforms-submit-spinner{
  filter: brightness(2.2) saturate(0);
  opacity: 0.9;
}

/* =================================
   DARK MODE – Portfolio dot badges text black
================================= */
html[data-theme="dark"] #portfolio .g-badge{
  color: #000000 !important;
}

/* if the text is inside span/strong */
html[data-theme="dark"] #portfolio .g-badge span,
html[data-theme="dark"] #portfolio .g-badge strong{
  color: #000000 !important;
}

/* =================================
   DARK MODE – Portfolio "dot pill" text black
================================= */
html[data-theme="dark"] #portfolio .g-casePill{
  color: #000 !important;
}

html[data-theme="dark"] #portfolio .g-casePill *{
  color: #000 !important;
}

html[data-theme="dark"] .g-sectionHead p{
  color: rgba(159, 176, 192, 0.92) !important;
}

/* =================================
   THEME TOGGLE – Fix LIGHT mode hover/active + moon visibility
================================= */

/* Base (light mode) */
html:not([data-theme="dark"]) .g-themeToggle{
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: rgba(12, 16, 20, 0.85) !important; /* drives SVG via currentColor */
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

/* Kill the unwanted blue hover/active coming from global button styles */
html:not([data-theme="dark"]) .g-themeToggle:hover,
html:not([data-theme="dark"]) .g-themeToggle:active,
html:not([data-theme="dark"]) .g-themeToggle:focus,
html:not([data-theme="dark"]) .g-themeToggle:focus-visible{
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: rgba(12, 16, 20, 0.92) !important;
  outline: none !important;
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.14),
    0 0 0 3px rgba(125, 211, 176, 0.14);
}

/* Ensure the SVG uses currentColor and is visible */
html:not([data-theme="dark"]) .g-themeToggle svg{
  display: block;
  width: 18px;
  height: 18px;
  color: currentColor;
}

html:not([data-theme="dark"]) .g-themeToggle svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* =================================
   THEME TOGGLE – LIGHT MODE fixes
   (prevents blue hover/active + ensures moon visible)
================================= */
html:not([data-theme="dark"]) .g-themeToggle{
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  /* icon/text color for moon */
  color: rgba(12, 16, 20, 0.9) !important;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

/* override any global button hover/active/focus blue */
html:not([data-theme="dark"]) .g-themeToggle:hover,
html:not([data-theme="dark"]) .g-themeToggle:active,
html:not([data-theme="dark"]) .g-themeToggle:focus,
html:not([data-theme="dark"]) .g-themeToggle:focus-visible{
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;

  color: rgba(12, 16, 20, 0.96) !important;
  outline: none !important;

  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.14),
    0 0 0 3px rgba(125, 211, 176, 0.12);
}

/* make sure SVG always inherits currentColor properly */
html:not([data-theme="dark"]) .g-themeToggle svg{
  display:block;
  width:18px;
  height:18px;
}
html:not([data-theme="dark"]) .g-themeToggle svg path{
  fill: currentColor !important;
}

/* =================================
   DARK MODE – Social bar (premium glass)
================================= */
html[data-theme="dark"] .g-socialBar{
  background: rgba(12, 16, 20, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Links (icon buttons) */
html[data-theme="dark"] .g-socialBar .g-socialLink{
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(243, 246, 249, 0.92) !important; /* drives SVG via currentColor if used */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Hover glow – subtle architectural lighting */
html[data-theme="dark"] .g-socialBar .g-socialLink:hover{
  transform: translateY(-2px);
  background: rgba(125, 211, 176, 0.1) !important;
  border-color: rgba(125, 211, 176, 0.22) !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(125, 211, 176, 0.14),
    0 0 40px rgba(80, 160, 220, 0.1);
}

/* Keyboard focus */
html[data-theme="dark"] .g-socialBar .g-socialLink:focus-visible{
  outline: none !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 0 3px rgba(125, 211, 176, 0.18),
    0 0 30px rgba(125, 211, 176, 0.12);
}

/* If your icons are SVGs inside the link */
html[data-theme="dark"] .g-socialBar .g-socialLink svg{
  color: currentColor;
}
html[data-theme="dark"] .g-socialBar .g-socialLink svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =================================
   DARK MODE – HERO video overlay + gradient headline restore
   (safe: no layout/positioning changes)
================================= */

/* 1) Darken the video/image behind the hero content */
html[data-theme="dark"] .g-hero video,
html[data-theme="dark"] .g-hero .g-heroVideo,
html[data-theme="dark"] .g-hero .g-heroMedia video{
  filter: brightness(0.62) contrast(1.08) saturate(0.92);
}

/* If your hero uses a background image/video layer element */
html[data-theme="dark"] .g-hero .g-heroMedia,
html[data-theme="dark"] .g-hero .g-heroBg{
  filter: brightness(0.62) contrast(1.08) saturate(0.92);
}

/* Optional: if you already have a pseudo-element overlay on the video wrapper, strengthen it */
html[data-theme="dark"] .g-hero .g-heroMedia::before,
html[data-theme="dark"] .g-hero .g-heroBg::before{
  content: "";
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0.18) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* 2) Restore your gradient word so it pops on the darker overlay
   - Replace .g-gradient / .accent with the class you use if different.
*/
html[data-theme="dark"] .g-hero .g-gradient,
html[data-theme="dark"] .g-hero .accent,
html[data-theme="dark"] .g-hero .is-accent{
  background: linear-gradient(90deg, rgba(125, 211, 176, 1), rgba(80, 160, 220, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;

  /* subtle glow for cinematic pop */
  text-shadow: 0 0 18px rgba(125, 211, 176, 0.18);
}

/* Make the rest of the headline and subtext readable */
html[data-theme="dark"] .g-hero h1{
  color: rgba(243, 246, 249, 0.98) !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .g-hero p{
  color: rgba(210, 220, 232, 0.92) !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* =================================
   DARK MODE – Premium buttons (HOVER-ONLY)
   Applies site-wide EXCEPT #contact.
   Does NOT touch: .g-themeToggle, .g-socialBar
================================= */

/* Base: calm, clean, no visible effect */
html[data-theme="dark"] :not(#contact) .g-btn,
html[data-theme="dark"] :not(#contact) .btn{
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(243, 246, 249, 0.92) !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}

/* Disable any existing pseudo-element glows from your light-mode CSS */
html[data-theme="dark"] :not(#contact) .g-btn::before,
html[data-theme="dark"] :not(#contact) .g-btn::after,
html[data-theme="dark"] :not(#contact) .btn::before,
html[data-theme="dark"] :not(#contact) .btn::after{
  content: none !important;
}

/* Premium hover: subtle lift + controlled accent glow (only on hover) */
html[data-theme="dark"] :not(#contact) .g-btn:hover,
html[data-theme="dark"] :not(#contact) .btn:hover{
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(125, 211, 176, 0.24) !important;
  filter: saturate(1.05);

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(125, 211, 176, 0.1),
    0 0 40px rgba(80, 160, 220, 0.06);
}

/* Active: no weird lines, just a slightly pressed feel */
html[data-theme="dark"] :not(#contact) .g-btn:active,
html[data-theme="dark"] :not(#contact) .btn:active{
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* Keyboard focus (premium ring) */
html[data-theme="dark"] :not(#contact) .g-btn:focus-visible,
html[data-theme="dark"] :not(#contact) .btn:focus-visible{
  outline: none !important;
  border-color: rgba(125, 211, 176, 0.35) !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.62),
    0 0 0 3px rgba(125, 211, 176, 0.16);
}

/* =================================
   MOBILE – HERO layout tweaks
   - Buttons: stacked, near full width
   - Feature blocks: 3 in a row
================================= */
@media (max-width: 640px){

  /* Buttons: stack + full width */
  .g-hero .g-heroActions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .g-hero .g-heroActions .g-btn{
    width: 100% !important;
    justify-content: center;
  }

  /* Feature blocks: 3 columns in one row */
  .g-hero .g-heroChips,
  .g-hero .g-heroBadges,
  .g-hero .g-heroFeatures{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Make each block compact enough for mobile */
  .g-hero .g-chip,
  .g-hero .g-heroChip{
    padding: 10px 10px !important;
    min-height: 64px;
  }

  .g-hero .g-chip strong,
  .g-hero .g-heroChip strong{
    font-size: 14px;
  }

  .g-hero .g-chip small,
  .g-hero .g-heroChip small{
    font-size: 11px;
    line-height: 1.2;
  }
}

/* =================================
   MOBILE – HERO: 3 blocks in one row (robust)
================================= */
@media (max-width: 640px){

  /* Try to catch the real wrapper (covers common variations) */
  .g-hero .g-heroChips,
  .g-hero .g-heroFeatures,
  .g-hero .g-heroBadges,
  .g-hero .g-heroTiles,
  .g-hero .g-heroCards,
  .g-hero .g-kpiRow,
  .g-hero .g-featureRow{
    display: flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  /* Force the 3 blocks to take equal width (fallback even if wrapper isn’t matched) */
  .g-hero .g-chip,
  .g-hero .g-heroChip,
  .g-hero .g-kpi,
  .g-hero .g-feature,
  .g-hero .g-miniCard{
    flex: 0 0 calc((100% - 20px) / 3) !important; /* 3 items, 2 gaps */
    width: calc((100% - 20px) / 3) !important;
    min-width: 0 !important;
  }

  /* Keep them compact enough for mobile */
  .g-hero .g-chip,
  .g-hero .g-heroChip,
  .g-hero .g-kpi,
  .g-hero .g-feature,
  .g-hero .g-miniCard{
    padding: 10px !important;
    min-height: 64px;
  }

  .g-hero .g-chip strong,
  .g-hero .g-heroChip strong{
    font-size: 14px;
  }

  .g-hero .g-chip small,
  .g-hero .g-heroChip small{
    font-size: 11px;
    line-height: 1.2;
  }
}

/* =================================
   MOBILE – HERO stats: 3 in one row
================================= */
@media (max-width: 640px){

  .g-hero .g-heroStats{
    display: flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .g-hero .g-heroStats .g-stat{
    flex: 0 0 calc((100% - 20px) / 3) !important; /* 3 items, 2 gaps */
    width: calc((100% - 20px) / 3) !important;
    min-width: 0 !important;
  }

  /* Optional: make content fit nicely */
  .g-hero .g-heroStats .g-statNum{
    font-size: 14px !important;
  }
  .g-hero .g-heroStats .g-statLbl{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* =================================
   DARK MODE – HERO primary CTA (FORCE GRADIENT)
   Targets: <a class="g-btn g-btnPrimary" ...>
================================= */
html[data-theme="dark"] .g-hero .g-heroActions a.g-btn.g-btnPrimary{
  /* use background SHORTHAND so it can't be wiped by another background rule */
  background: linear-gradient(
    120deg,
    #7dd3b0 0%,
    #4ea8de 52%,
    #38bdf8 100%
  ) !important;

  color: #081014 !important;
  border: 0 !important;

  /* keep your premium glow */
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(125, 211, 176, 0.35),
    0 0 60px rgba(56, 189, 248, 0.25) !important;

  filter: saturate(1.08);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* make sure no pseudo overlay is covering it */
html[data-theme="dark"] .g-hero .g-heroActions a.g-btn.g-btnPrimary::before,
html[data-theme="dark"] .g-hero .g-heroActions a.g-btn.g-btnPrimary::after{
  content: none !important;
  background: none !important;
}

/* hover */
html[data-theme="dark"] .g-hero .g-heroActions a.g-btn.g-btnPrimary:hover{
  transform: translateY(-4px);
  filter: brightness(1.06) saturate(1.15);

  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(125, 211, 176, 0.45),
    0 0 90px rgba(56, 189, 248, 0.35) !important;
}

/* =================================
   DARK MODE – Pakketten: Optioneel white + subtle featured glow
================================= */

/* 1) Optioneel label: WHITE and readable */
html[data-theme="dark"] #pakketten .g-packOptTitle{
  color: rgba(243, 246, 249, 0.92) !important;
  opacity: 1 !important;
}

/* (Optional) If you want it slightly smaller + premium spacing */
html[data-theme="dark"] #pakketten .g-packOptTitle{
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}

/* 2) Featured card glow: make it subtle and darker */
html[data-theme="dark"] #pakketten .is-featured,
html[data-theme="dark"] #pakketten .g-card.is-featured,
html[data-theme="dark"] #pakketten .g-card.featured{
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(125, 211, 176, 0.16),
    0 0 10px rgba(125, 211, 176, 0.06),
    0 0 14px rgba(80, 160, 220, 0.04) !important;
}

/* Remove any light overlay that creates the bright streak */
html[data-theme="dark"] #pakketten .is-featured::before,
html[data-theme="dark"] #pakketten .is-featured::after,
html[data-theme="dark"] #pakketten .g-card.is-featured::before,
html[data-theme="dark"] #pakketten .g-card.is-featured::after{
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* =========================================
   MOBILE – Contact inner box adjustments
========================================= */

@media (max-width: 768px){

  /* Make inner box wider */
  #contact .wpforms-container{
    padding: 0 !important;
  }

  #contact .wpforms-container form{
    padding: 24px 18px !important;
  }

  /* If you have a custom inner wrapper with gradient */
  #contact .g-contactForm,
  #contact .g-contactCard,
  #contact .g-contactInner{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

}


/* =========================================
   DARK MODE – Remove gradient background
   from inner contact box (mobile only)
========================================= */

@media (max-width: 768px){

  html[data-theme="dark"] #contact .g-contactForm,
  html[data-theme="dark"] #contact .g-contactCard,
  html[data-theme="dark"] #contact .g-contactInner,
  html[data-theme="dark"] #contact .wpforms-container{
    background: none !important;
    background-image: none !important;
  }

}

/* =========================================
   DARK MODE – Hero stat cards
========================================= */

html[data-theme="dark"] .g-heroStats .g-stat{
  background: rgba(18, 26, 34, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(120, 255, 200, 0.12);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color: #f3f6f9;
}

html[data-theme="dark"] .g-heroStats .g-statNum{
  color: #ffffff !important;
}

html[data-theme="dark"] .g-heroStats .g-statLbl{
  color: rgba(180, 205, 220, 0.85) !important;
}

/* =========================================
   DARK MODE – Hero badge ONLY
========================================= */

html[data-theme="dark"] .g-hero .g-badge,
html[data-theme="dark"] .g-hero .g-heroBadge {
  background: rgba(18, 26, 34, 0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(120, 255, 200, 0.18);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color: rgba(220, 240, 250, 0.95) !important;
}

html[data-theme="dark"] .g-hero .g-badge::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(120, 255, 200, 0.15),
    transparent 60%
  );
  opacity: 0.4;
  pointer-events: none;
}

/* =========================================================
   FORCE: Hero primary button gradient in DARK mode
   Put at the VERY BOTTOM of overrides.css
   ========================================================= */

/* Works whether data-theme is on html or body */
html[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary,
body[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary{
  /* force gradient using background shorthand */
  background: linear-gradient(
    120deg,
    #7dd3b0 0%,
    #4ea8de 55%,
    #38bdf8 100%
  ) !important;

  background-color: transparent !important;
  background-image: linear-gradient(
    120deg,
    #7dd3b0 0%,
    #4ea8de 55%,
    #38bdf8 100%
  ) !important;

  color: #071114 !important;
  border: 0 !important;

  /* keep the premium pop */
  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    0 0 28px rgba(125,211,176,0.22),
    0 0 60px rgba(56,189,248,0.18) !important;
}

/* kill overlay layers that commonly hide the gradient */
html[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary::before,
html[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary::after,
body[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary::before,
body[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary::after{
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* if the button contains inner spans that have their own bg, remove it */
html[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary *,
body[data-theme="dark"] .page-home .g-hero .g-heroActions a.g-btn.g-btnPrimary *{
  background: transparent !important;
}

/* =========================================================
   POPUP MAKER – Package modal (Popup ID 160) – CLEAN / MINIMAL
   Light + Dark via html/body [data-theme="dark"]
   ========================================================= */

/* ---------- Vars (scoped) ---------- */
#popmake-160{
  --pm-radius: 20px;
  --pm-pad: 22px;

  --pm-border: rgba(0,0,0,0.10);
  --pm-shadow: 0 30px 90px rgba(0,0,0,0.35);

  --pm-bg: rgba(255,255,255,0.92);
  --pm-text: rgba(14,20,26,0.92);
  --pm-muted: rgba(14,20,26,0.62);

  --pm-card: rgba(255,255,255,0.72);
  --pm-cardBorder: rgba(0,0,0,0.08);

  --pm-accent1: #7dd3b0;
  --pm-accent2: #4ea8de;
  --pm-accent3: #38bdf8;
}

/* ---------- Popup panel ---------- */
#popmake-160.pum-container{
  border-radius: var(--pm-radius) !important;
  border: 1px solid var(--pm-border) !important;
  background: var(--pm-bg) !important;
  box-shadow: var(--pm-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#popmake-160 .pum-content{
  padding: var(--pm-pad) !important;
  color: var(--pm-text);
}

/* ---------- DARK overlay (removes white background around popup) ---------- */
html[data-theme="dark"] #pum-160.pum-overlay,
body[data-theme="dark"] #pum-160.pum-overlay{
  background: rgba(6, 10, 14, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 180px rgba(0,0,0,0.80);
}
html[data-theme="dark"] #pum-160.pum-overlay::before,
html[data-theme="dark"] #pum-160.pum-overlay::after,
body[data-theme="dark"] #pum-160.pum-overlay::before,
body[data-theme="dark"] #pum-160.pum-overlay::after{
  content: none !important;
}

/* ---------- Close button (match .g-caseClose) ----------
   NOTE: set Popup Maker close text to × / &times; for 1:1 match */
html[data-theme] #pum-160 #popmake-160 button.pum-close.popmake-close{
  position: fixed !important;
  top: 28px !important;
  right: 32px !important;
  z-index: 9999 !important;

  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color: rgba(12, 18, 32, 0.75) !important;

  background: var(--surface-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border) !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}
html[data-theme] #pum-160 #popmake-160 button.pum-close.popmake-close:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.30)
  ) !important;
  border-color: rgba(118, 243, 166, 0.35) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}
@media (max-width: 980px){
  html[data-theme] #pum-160 #popmake-160 button.pum-close.popmake-close{
    top: 18px !important;
    right: 18px !important;
  }
}

/* ---------- Modal layout ---------- */
#popmake-160 .pkgModal{ max-width: 980px; margin: 0 auto; }

#popmake-160 .pkgModal__head{
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
  border: 1px solid var(--pm-cardBorder);
  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
}

#popmake-160 .pkgModal__kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: var(--pm-muted);
}
#popmake-160 .pkgModal__title{
  margin: 10px 0 6px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  color: var(--pm-text);
}
#popmake-160 .pkgModal__sub{ margin: 0; color: var(--pm-muted); max-width: 70ch; }

/* Pills aligned perfectly */
#popmake-160 .pkgModal__priceRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
#popmake-160 .pkgModal__price,
#popmake-160 .pkgModal__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 44px;           /* key */
  padding: 0 16px;        /* key */
  border-radius: 999px;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.10);
  white-space: nowrap;
}
#popmake-160 .pkgModal__priceFrom,
#popmake-160 .pkgModal__priceNote{
  color: var(--pm-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
#popmake-160 .pkgModal__priceAmount{ font-size: 22px; font-weight: 900; line-height: 1; }

/* Cards grid */
#popmake-160 .pkgModal__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 16px; /* spacing before “Voor wie?” */
}
#popmake-160 .pkgModal__card{
  border-radius: 18px;
  padding: 18px;
  background: var(--pm-card);
  border: 1px solid var(--pm-cardBorder);
  box-shadow: 0 16px 45px rgba(0,0,0,0.10);
}
#popmake-160 .pkgModal__card--highlight{
  border-color: rgba(125,211,176,0.22);
  background:
    radial-gradient(420px 260px at 20% 15%, rgba(125,211,176,0.18), transparent 60%),
    rgba(255,255,255,0.72);
}
#popmake-160 .pkgModal__cardTitle{ margin: 0 0 10px; font-size: 16px; color: var(--pm-text); }
#popmake-160 .pkgModal__text{ margin: 0 0 14px; color: var(--pm-muted); }

#popmake-160 .pkgModal__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: var(--pm-text);
}
#popmake-160 .pkgModal__list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
#popmake-160 .pkgModal__list .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(125,211,176,0.95);
  box-shadow: 0 0 16px rgba(125,211,176,0.18);
}

#popmake-160 .pkgModal__note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--pm-muted);
}

/* CTA buttons */
#popmake-160 .pkgModal__cta{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}
#popmake-160 .pkgModal__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Smoother primary gradient (LIGHT mode) */
#popmake-160 .pkgModal__btn--primary{
  background: linear-gradient(135deg, var(--pm-accent1) 0%, var(--pm-accent2) 55%, var(--pm-accent3) 100%);
  color: #071114;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
#popmake-160 .pkgModal__btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.03); }

#popmake-160 .pkgModal__btn--secondary{
  background: rgba(255,255,255,0.70);
  border-color: rgba(0,0,0,0.12);
  color: var(--pm-text);
  box-shadow: 0 14px 40px rgba(0,0,0,0.14);
}
#popmake-160 .pkgModal__btn--secondary:hover{ transform: translateY(-2px); border-color: rgba(125,211,176,0.30); }

#popmake-160 .pkgModal__finePrint{ margin-top: 12px; color: var(--pm-muted); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  #popmake-160 .pkgModal__grid{ grid-template-columns: 1fr; }
  #popmake-160 .pkgModal__cta{ justify-content: stretch; flex-direction: column; }
  #popmake-160 .pkgModal__btn{ width: 100%; }
}

/* ---------- DARK MODE vars + key overrides ---------- */
html[data-theme="dark"] #popmake-160,
body[data-theme="dark"] #popmake-160{
  --pm-border: rgba(255,255,255,0.10);
  --pm-shadow: 0 30px 100px rgba(0,0,0,0.70);
  --pm-bg: rgba(12,16,20,0.82);
  --pm-text: rgba(243,246,249,0.96);
  --pm-muted: rgba(180,198,214,0.90);
  --pm-card: rgba(18,26,33,0.72);
  --pm-cardBorder: rgba(255,255,255,0.08);
}

html[data-theme="dark"] #popmake-160 .pkgModal__head,
body[data-theme="dark"] #popmake-160 .pkgModal__head{
  background: linear-gradient(180deg, rgba(18,26,33,0.86), rgba(18,26,33,0.70));
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #popmake-160 .pkgModal__price,
html[data-theme="dark"] #popmake-160 .pkgModal__pill,
body[data-theme="dark"] #popmake-160 .pkgModal__price,
body[data-theme="dark"] #popmake-160 .pkgModal__pill{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #popmake-160 .pkgModal__note,
body[data-theme="dark"] #popmake-160 .pkgModal__note{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* Resultaat card dark in dark mode */
html[data-theme="dark"] #popmake-160 .pkgModal__card--highlight,
body[data-theme="dark"] #popmake-160 .pkgModal__card--highlight{
  background:
    radial-gradient(520px 320px at 20% 15%, rgba(125,211,176,0.12), transparent 62%),
    rgba(18,26,33,0.78);
  border-color: rgba(125,211,176,0.22);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(125,211,176,0.10);
}
html[data-theme="dark"] #popmake-160 .pkgModal__card--highlight,
html[data-theme="dark"] #popmake-160 .pkgModal__card--highlight *,
body[data-theme="dark"] #popmake-160 .pkgModal__card--highlight,
body[data-theme="dark"] #popmake-160 .pkgModal__card--highlight *{
  color: rgba(243,246,249,0.94);
}

/* Secondary button in dark mode */
html[data-theme="dark"] #popmake-160 .pkgModal__btn--secondary,
body[data-theme="dark"] #popmake-160 .pkgModal__btn--secondary{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(243,246,249,0.95);
  box-shadow: 0 14px 45px rgba(0,0,0,0.55);
}

/* =========================================================
   POPUP 160 — Close button: perfect circle like /cases
   ========================================================= */

/* Make sure nothing clips the close button */
#pum-160,
#popmake-160,
#popmake-160.pum-container{
  overflow: visible !important;
}

/* HARD reset Popup Maker styling (safe reset) */
#pum-160 #popmake-160 button.pum-close.popmake-close{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;

  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  position: fixed !important;      /* match your cases */
  top: 28px !important;
  right: 32px !important;
  z-index: 999999 !important;

  color: rgba(12, 18, 32, 0.75) !important;
  background: var(--surface-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;

  cursor: pointer !important;
  opacity: 1 !important;
}

/* Remove weird pseudo elements that cause “blocks” */
#pum-160 #popmake-160 button.pum-close.popmake-close::before,
#pum-160 #popmake-160 button.pum-close.popmake-close::after{
  content: none !important;
}

/* Hover glow identical to your /cases hover */
#pum-160 #popmake-160 button.pum-close.popmake-close:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.30)
  ) !important;

  border-color: rgba(118, 243, 166, 0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}

/* Mobile positioning like your /cases */
@media (max-width: 980px){
  #pum-160 #popmake-160 button.pum-close.popmake-close{
    top: 18px !important;
    right: 18px !important;
  }
}

/* =========================================================
   Popup 160 – LIGHT MODE: make primary button match site buttons
   (dotted border, soft pill, subtle gradient hover)
   ========================================================= */

html:not([data-theme="dark"]) #popmake-160 .pkgModal__btn--primary,
body:not([data-theme="dark"]) #popmake-160 .pkgModal__btn--primary{
  background: rgba(255,255,255,0.65) !important;
  color: rgba(12,18,32,0.88) !important;

  border: 1px dashed rgba(12,18,32,0.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover = your soft green/blue glow */
html:not([data-theme="dark"]) #popmake-160 .pkgModal__btn--primary:hover,
body:not([data-theme="dark"]) #popmake-160 .pkgModal__btn--primary:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.40),
    rgba(88, 215, 255, 0.28)
  ) !important;

  border-color: rgba(118, 243, 166, 0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.10),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}

/* =========================================================
   POPUP MAKER – Package modal (Popup ID 182) – CLEAN / MINIMAL
   Light + Dark via html/body [data-theme="dark"]
   ========================================================= */

/* ---------- Vars (scoped) ---------- */
#popmake-182{
  --pm-radius: 20px;
  --pm-pad: 22px;

  --pm-border: rgba(0,0,0,0.10);
  --pm-shadow: 0 30px 90px rgba(0,0,0,0.35);

  --pm-bg: rgba(255,255,255,0.92);
  --pm-text: rgba(14,20,26,0.92);
  --pm-muted: rgba(14,20,26,0.62);

  --pm-card: rgba(255,255,255,0.72);
  --pm-cardBorder: rgba(0,0,0,0.08);

  --pm-accent1: #7dd3b0;
  --pm-accent2: #4ea8de;
  --pm-accent3: #38bdf8;
}

/* ---------- Popup panel ---------- */
#popmake-182.pum-container{
  border-radius: var(--pm-radius) !important;
  border: 1px solid var(--pm-border) !important;
  background: var(--pm-bg) !important;
  box-shadow: var(--pm-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#popmake-182 .pum-content{
  padding: var(--pm-pad) !important;
  color: var(--pm-text);
}

/* ---------- DARK overlay (removes white background around popup) ---------- */
html[data-theme="dark"] #pum-182.pum-overlay,
body[data-theme="dark"] #pum-182.pum-overlay{
  background: rgba(6, 10, 14, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 180px rgba(0,0,0,0.80);
}
html[data-theme="dark"] #pum-182.pum-overlay::before,
html[data-theme="dark"] #pum-182.pum-overlay::after,
body[data-theme="dark"] #pum-182.pum-overlay::before,
body[data-theme="dark"] #pum-182.pum-overlay::after{
  content: none !important;
}

/* ---------- Close button (match .g-caseClose) ----------
   NOTE: set Popup Maker close text to × / &times; for 1:1 match */
html[data-theme] #pum-182 #popmake-182 button.pum-close.popmake-close{
  position: fixed !important;
  top: 28px !important;
  right: 32px !important;
  z-index: 9999 !important;

  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color: rgba(12, 18, 32, 0.75) !important;

  background: var(--surface-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border) !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}
html[data-theme] #pum-182 #popmake-182 button.pum-close.popmake-close:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.30)
  ) !important;
  border-color: rgba(118, 243, 166, 0.35) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}
@media (max-width: 980px){
  html[data-theme] #pum-182 #popmake-182 button.pum-close.popmake-close{
    top: 18px !important;
    right: 18px !important;
  }
}

/* ---------- Modal layout ---------- */
#popmake-182 .pkgModal{ max-width: 980px; margin: 0 auto; }

#popmake-182 .pkgModal__head{
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
  border: 1px solid var(--pm-cardBorder);
  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
}

#popmake-182 .pkgModal__kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: var(--pm-muted);
}
#popmake-182 .pkgModal__title{
  margin: 10px 0 6px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  color: var(--pm-text);
}
#popmake-182 .pkgModal__sub{ margin: 0; color: var(--pm-muted); max-width: 70ch; }

/* Pills aligned perfectly */
#popmake-182 .pkgModal__priceRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
#popmake-182 .pkgModal__price,
#popmake-182 .pkgModal__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 44px;           /* key */
  padding: 0 16px;        /* key */
  border-radius: 999px;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.10);
  white-space: nowrap;
}
#popmake-182 .pkgModal__priceFrom,
#popmake-182 .pkgModal__priceNote{
  color: var(--pm-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
#popmake-182 .pkgModal__priceAmount{ font-size: 22px; font-weight: 900; line-height: 1; }

/* Cards grid */
#popmake-182 .pkgModal__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 16px; /* spacing before “Voor wie?” */
}
#popmake-182 .pkgModal__card{
  border-radius: 18px;
  padding: 18px;
  background: var(--pm-card);
  border: 1px solid var(--pm-cardBorder);
  box-shadow: 0 16px 45px rgba(0,0,0,0.10);
}
#popmake-182 .pkgModal__card--highlight{
  border-color: rgba(125,211,176,0.22);
  background:
    radial-gradient(420px 260px at 20% 15%, rgba(125,211,176,0.18), transparent 60%),
    rgba(255,255,255,0.72);
}
#popmake-182 .pkgModal__cardTitle{ margin: 0 0 10px; font-size: 16px; color: var(--pm-text); }
#popmake-182 .pkgModal__text{ margin: 0 0 14px; color: var(--pm-muted); }

#popmake-182 .pkgModal__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: var(--pm-text);
}
#popmake-182 .pkgModal__list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
#popmake-182 .pkgModal__list .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(125,211,176,0.95);
  box-shadow: 0 0 16px rgba(125,211,176,0.18);
}

#popmake-182 .pkgModal__note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--pm-muted);
}

/* CTA buttons */
#popmake-182 .pkgModal__cta{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}
#popmake-182 .pkgModal__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Smoother primary gradient (LIGHT mode) */
#popmake-182 .pkgModal__btn--primary{
  background: linear-gradient(135deg, var(--pm-accent1) 0%, var(--pm-accent2) 55%, var(--pm-accent3) 100%);
  color: #071114;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
#popmake-182 .pkgModal__btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.03); }

#popmake-182 .pkgModal__btn--secondary{
  background: rgba(255,255,255,0.70);
  border-color: rgba(0,0,0,0.12);
  color: var(--pm-text);
  box-shadow: 0 14px 40px rgba(0,0,0,0.14);
}
#popmake-182 .pkgModal__btn--secondary:hover{ transform: translateY(-2px); border-color: rgba(125,211,176,0.30); }

#popmake-182 .pkgModal__finePrint{ margin-top: 12px; color: var(--pm-muted); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  #popmake-182 .pkgModal__grid{ grid-template-columns: 1fr; }
  #popmake-182 .pkgModal__cta{ justify-content: stretch; flex-direction: column; }
  #popmake-182 .pkgModal__btn{ width: 100%; }
}

/* ---------- DARK MODE vars + key overrides ---------- */
html[data-theme="dark"] #popmake-182,
body[data-theme="dark"] #popmake-182{
  --pm-border: rgba(255,255,255,0.10);
  --pm-shadow: 0 30px 100px rgba(0,0,0,0.70);
  --pm-bg: rgba(12,16,20,0.82);
  --pm-text: rgba(243,246,249,0.96);
  --pm-muted: rgba(180,198,214,0.90);
  --pm-card: rgba(18,26,33,0.72);
  --pm-cardBorder: rgba(255,255,255,0.08);
}

html[data-theme="dark"] #popmake-182 .pkgModal__head,
body[data-theme="dark"] #popmake-182 .pkgModal__head{
  background: linear-gradient(180deg, rgba(18,26,33,0.86), rgba(18,26,33,0.70));
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #popmake-182 .pkgModal__price,
html[data-theme="dark"] #popmake-182 .pkgModal__pill,
body[data-theme="dark"] #popmake-182 .pkgModal__price,
body[data-theme="dark"] #popmake-182 .pkgModal__pill{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #popmake-182 .pkgModal__note,
body[data-theme="dark"] #popmake-182 .pkgModal__note{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* Resultaat card dark in dark mode */
html[data-theme="dark"] #popmake-182 .pkgModal__card--highlight,
body[data-theme="dark"] #popmake-182 .pkgModal__card--highlight{
  background:
    radial-gradient(520px 320px at 20% 15%, rgba(125,211,176,0.12), transparent 62%),
    rgba(18,26,33,0.78);
  border-color: rgba(125,211,176,0.22);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(125,211,176,0.10);
}
html[data-theme="dark"] #popmake-182 .pkgModal__card--highlight,
html[data-theme="dark"] #popmake-182 .pkgModal__card--highlight *,
body[data-theme="dark"] #popmake-182 .pkgModal__card--highlight,
body[data-theme="dark"] #popmake-182 .pkgModal__card--highlight *{
  color: rgba(243,246,249,0.94);
}

/* Secondary button in dark mode */
html[data-theme="dark"] #popmake-182 .pkgModal__btn--secondary,
body[data-theme="dark"] #popmake-182 .pkgModal__btn--secondary{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(243,246,249,0.95);
  box-shadow: 0 14px 45px rgba(0,0,0,0.55);
}

/* =========================================================
   POPUP 182 — Close button: perfect circle like /cases
   ========================================================= */

/* Make sure nothing clips the close button */
#pum-182,
#popmake-182,
#popmake-182.pum-container{
  overflow: visible !important;
}

/* HARD reset Popup Maker styling (safe reset) */
#pum-182 #popmake-182 button.pum-close.popmake-close{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;

  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  position: fixed !important;      /* match your cases */
  top: 28px !important;
  right: 32px !important;
  z-index: 999999 !important;

  color: rgba(12, 18, 32, 0.75) !important;
  background: var(--surface-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;

  cursor: pointer !important;
  opacity: 1 !important;
}

/* Remove weird pseudo elements that cause “blocks” */
#pum-182 #popmake-182 button.pum-close.popmake-close::before,
#pum-182 #popmake-182 button.pum-close.popmake-close::after{
  content: none !important;
}

/* Hover glow identical to your /cases hover */
#pum-182 #popmake-182 button.pum-close.popmake-close:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.30)
  ) !important;

  border-color: rgba(118, 243, 166, 0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}

/* Mobile positioning like your /cases */
@media (max-width: 980px){
  #pum-182 #popmake-182 button.pum-close.popmake-close{
    top: 18px !important;
    right: 18px !important;
  }
}

/* =========================================================
   Popup 182 – LIGHT MODE: make primary button match site buttons
   (dotted border, soft pill, subtle gradient hover)
   ========================================================= */

html:not([data-theme="dark"]) #popmake-182 .pkgModal__btn--primary,
body:not([data-theme="dark"]) #popmake-182 .pkgModal__btn--primary{
  background: rgba(255,255,255,0.65) !important;
  color: rgba(12,18,32,0.88) !important;

  border: 1px dashed rgba(12,18,32,0.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover = your soft green/blue glow */
html:not([data-theme="dark"]) #popmake-182 .pkgModal__btn--primary:hover,
body:not([data-theme="dark"]) #popmake-182 .pkgModal__btn--primary:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.40),
    rgba(88, 215, 255, 0.28)
  ) !important;

  border-color: rgba(118, 243, 166, 0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.10),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}

/* =========================================================
   POPUP MAKER – Package modal (Popup ID 186) – CLEAN / MINIMAL
   Light + Dark via html/body [data-theme="dark"]
   ========================================================= */

/* ---------- Vars (scoped) ---------- */
#popmake-186{
  --pm-radius: 20px;
  --pm-pad: 22px;

  --pm-border: rgba(0,0,0,0.10);
  --pm-shadow: 0 30px 90px rgba(0,0,0,0.35);

  --pm-bg: rgba(255,255,255,0.92);
  --pm-text: rgba(14,20,26,0.92);
  --pm-muted: rgba(14,20,26,0.62);

  --pm-card: rgba(255,255,255,0.72);
  --pm-cardBorder: rgba(0,0,0,0.08);

  --pm-accent1: #7dd3b0;
  --pm-accent2: #4ea8de;
  --pm-accent3: #38bdf8;
}

/* ---------- Popup panel ---------- */
#popmake-186.pum-container{
  border-radius: var(--pm-radius) !important;
  border: 1px solid var(--pm-border) !important;
  background: var(--pm-bg) !important;
  box-shadow: var(--pm-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#popmake-186 .pum-content{
  padding: var(--pm-pad) !important;
  color: var(--pm-text);
}

/* ---------- DARK overlay (removes white background around popup) ---------- */
html[data-theme="dark"] #pum-186.pum-overlay,
body[data-theme="dark"] #pum-186.pum-overlay{
  background: rgba(6, 10, 14, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 180px rgba(0,0,0,0.80);
}
html[data-theme="dark"] #pum-186.pum-overlay::before,
html[data-theme="dark"] #pum-186.pum-overlay::after,
body[data-theme="dark"] #pum-186.pum-overlay::before,
body[data-theme="dark"] #pum-186.pum-overlay::after{
  content: none !important;
}

/* ---------- Close button (match .g-caseClose) ----------
   NOTE: set Popup Maker close text to × / &times; for 1:1 match */
html[data-theme] #pum-186 #popmake-186 button.pum-close.popmake-close{
  position: fixed !important;
  top: 28px !important;
  right: 32px !important;
  z-index: 9999 !important;

  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color: rgba(12, 18, 32, 0.75) !important;

  background: var(--surface-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border) !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}
html[data-theme] #pum-186 #popmake-186 button.pum-close.popmake-close:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.30)
  ) !important;
  border-color: rgba(118, 243, 166, 0.35) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}
@media (max-width: 980px){
  html[data-theme] #pum-186 #popmake-186 button.pum-close.popmake-close{
    top: 18px !important;
    right: 18px !important;
  }
}

/* ---------- Modal layout ---------- */
#popmake-186 .pkgModal{ max-width: 980px; margin: 0 auto; }

#popmake-186 .pkgModal__head{
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
  border: 1px solid var(--pm-cardBorder);
  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
}

#popmake-186 .pkgModal__kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: var(--pm-muted);
}
#popmake-186 .pkgModal__title{
  margin: 10px 0 6px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  color: var(--pm-text);
}
#popmake-186 .pkgModal__sub{ margin: 0; color: var(--pm-muted); max-width: 70ch; }

/* Pills aligned perfectly */
#popmake-186 .pkgModal__priceRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
#popmake-186 .pkgModal__price,
#popmake-186 .pkgModal__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 44px;           /* key */
  padding: 0 16px;        /* key */
  border-radius: 999px;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.10);
  white-space: nowrap;
}
#popmake-186 .pkgModal__priceFrom,
#popmake-186 .pkgModal__priceNote{
  color: var(--pm-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
#popmake-186 .pkgModal__priceAmount{ font-size: 22px; font-weight: 900; line-height: 1; }

/* Cards grid */
#popmake-186 .pkgModal__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 16px; /* spacing before “Voor wie?” */
}
#popmake-186 .pkgModal__card{
  border-radius: 18px;
  padding: 18px;
  background: var(--pm-card);
  border: 1px solid var(--pm-cardBorder);
  box-shadow: 0 16px 45px rgba(0,0,0,0.10);
}
#popmake-186 .pkgModal__card--highlight{
  border-color: rgba(125,211,176,0.22);
  background:
    radial-gradient(420px 260px at 20% 15%, rgba(125,211,176,0.18), transparent 60%),
    rgba(255,255,255,0.72);
}
#popmake-186 .pkgModal__cardTitle{ margin: 0 0 10px; font-size: 16px; color: var(--pm-text); }
#popmake-186 .pkgModal__text{ margin: 0 0 14px; color: var(--pm-muted); }

#popmake-186 .pkgModal__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: var(--pm-text);
}
#popmake-186 .pkgModal__list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
#popmake-186 .pkgModal__list .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(125,211,176,0.95);
  box-shadow: 0 0 16px rgba(125,211,176,0.18);
}

#popmake-186 .pkgModal__note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--pm-muted);
}

/* CTA buttons */
#popmake-186 .pkgModal__cta{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}
#popmake-186 .pkgModal__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Smoother primary gradient (LIGHT mode) */
#popmake-186 .pkgModal__btn--primary{
  background: linear-gradient(135deg, var(--pm-accent1) 0%, var(--pm-accent2) 55%, var(--pm-accent3) 100%);
  color: #071114;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
#popmake-186 .pkgModal__btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.03); }

#popmake-186 .pkgModal__btn--secondary{
  background: rgba(255,255,255,0.70);
  border-color: rgba(0,0,0,0.12);
  color: var(--pm-text);
  box-shadow: 0 14px 40px rgba(0,0,0,0.14);
}
#popmake-186 .pkgModal__btn--secondary:hover{ transform: translateY(-2px); border-color: rgba(125,211,176,0.30); }

#popmake-186 .pkgModal__finePrint{ margin-top: 12px; color: var(--pm-muted); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  #popmake-186 .pkgModal__grid{ grid-template-columns: 1fr; }
  #popmake-186 .pkgModal__cta{ justify-content: stretch; flex-direction: column; }
  #popmake-186 .pkgModal__btn{ width: 100%; }
}

/* ---------- DARK MODE vars + key overrides ---------- */
html[data-theme="dark"] #popmake-186,
body[data-theme="dark"] #popmake-186{
  --pm-border: rgba(255,255,255,0.10);
  --pm-shadow: 0 30px 100px rgba(0,0,0,0.70);
  --pm-bg: rgba(12,16,20,0.82);
  --pm-text: rgba(243,246,249,0.96);
  --pm-muted: rgba(180,198,214,0.90);
  --pm-card: rgba(18,26,33,0.72);
  --pm-cardBorder: rgba(255,255,255,0.08);
}

html[data-theme="dark"] #popmake-186 .pkgModal__head,
body[data-theme="dark"] #popmake-186 .pkgModal__head{
  background: linear-gradient(180deg, rgba(18,26,33,0.86), rgba(18,26,33,0.70));
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #popmake-186 .pkgModal__price,
html[data-theme="dark"] #popmake-186 .pkgModal__pill,
body[data-theme="dark"] #popmake-186 .pkgModal__price,
body[data-theme="dark"] #popmake-186 .pkgModal__pill{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #popmake-186 .pkgModal__note,
body[data-theme="dark"] #popmake-186 .pkgModal__note{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* Resultaat card dark in dark mode */
html[data-theme="dark"] #popmake-186 .pkgModal__card--highlight,
body[data-theme="dark"] #popmake-186 .pkgModal__card--highlight{
  background:
    radial-gradient(520px 320px at 20% 15%, rgba(125,211,176,0.12), transparent 62%),
    rgba(18,26,33,0.78);
  border-color: rgba(125,211,176,0.22);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(125,211,176,0.10);
}
html[data-theme="dark"] #popmake-186 .pkgModal__card--highlight,
html[data-theme="dark"] #popmake-186 .pkgModal__card--highlight *,
body[data-theme="dark"] #popmake-186 .pkgModal__card--highlight,
body[data-theme="dark"] #popmake-186 .pkgModal__card--highlight *{
  color: rgba(243,246,249,0.94);
}

/* Secondary button in dark mode */
html[data-theme="dark"] #popmake-186 .pkgModal__btn--secondary,
body[data-theme="dark"] #popmake-186 .pkgModal__btn--secondary{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(243,246,249,0.95);
  box-shadow: 0 14px 45px rgba(0,0,0,0.55);
}

/* =========================================================
   POPUP 186 — Close button: perfect circle like /cases
   ========================================================= */

/* Make sure nothing clips the close button */
#pum-186,
#popmake-186,
#popmake-186.pum-container{
  overflow: visible !important;
}

/* HARD reset Popup Maker styling (safe reset) */
#pum-186 #popmake-186 button.pum-close.popmake-close{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;

  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  position: fixed !important;      /* match your cases */
  top: 28px !important;
  right: 32px !important;
  z-index: 999999 !important;

  color: rgba(12, 18, 32, 0.75) !important;
  background: var(--surface-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;

  cursor: pointer !important;
  opacity: 1 !important;
}

/* Remove weird pseudo elements that cause “blocks” */
#pum-186 #popmake-186 button.pum-close.popmake-close::before,
#pum-186 #popmake-186 button.pum-close.popmake-close::after{
  content: none !important;
}

/* Hover glow identical to your /cases hover */
#pum-186 #popmake-186 button.pum-close.popmake-close:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.55),
    rgba(88, 215, 255, 0.30)
  ) !important;

  border-color: rgba(118, 243, 166, 0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}

/* Mobile positioning like your /cases */
@media (max-width: 980px){
  #pum-186 #popmake-186 button.pum-close.popmake-close{
    top: 18px !important;
    right: 18px !important;
  }
}

/* =========================================================
   Popup 186 – LIGHT MODE: make primary button match site buttons
   (dotted border, soft pill, subtle gradient hover)
   ========================================================= */

html:not([data-theme="dark"]) #popmake-186 .pkgModal__btn--primary,
body:not([data-theme="dark"]) #popmake-186 .pkgModal__btn--primary{
  background: rgba(255,255,255,0.65) !important;
  color: rgba(12,18,32,0.88) !important;

  border: 1px dashed rgba(12,18,32,0.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover = your soft green/blue glow */
html:not([data-theme="dark"]) #popmake-186 .pkgModal__btn--primary:hover,
body:not([data-theme="dark"]) #popmake-186 .pkgModal__btn--primary:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(
    135deg,
    rgba(118, 243, 166, 0.40),
    rgba(88, 215, 255, 0.28)
  ) !important;

  border-color: rgba(118, 243, 166, 0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.10),
    0 0 0 6px rgba(118,243,166,0.10) !important;
}