/*
 Theme Name:   SSO  
 Theme URI:    https://generatepress.com
 Description:  Default child theme 
 Author:       SSO Intern
 Author URI:   https://specialsecurityops.nl
 Template:     generatepress
 Version:      0.2
*/


/* --------------------------------------------------------------------------
   0. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ops-ocean:       #0186bb;
  --ops-blaze:       #f66213;
  --ops-black:       #0c0a08;
  --ops-alabaster:   #d4d9d9;
  --ops-lime:        #b9c75b;

  --ops-ocean-light: #03a8e6;
  --ops-ocean-dark:  #015f85;
  --ops-blaze-light: #ff8a4c;
  --ops-blaze-dark:  #c44e0f;
  --ops-lime-light:  #d0db82;
  --ops-lime-dark:   #8fa33d;

  --ops-bg:          var(--ops-black);
  --ops-bg-surface:  #141210;
  --ops-bg-elevated: #1e1b18;
  --ops-bg-input:    #1a1816;
  --ops-text:        var(--ops-alabaster);
  --ops-text-muted:  #9a9c9c;

  --ops-fs-display:  clamp(3rem, 5.5vw + 1rem, 6.5rem);
  --ops-fs-h2:       clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  --ops-fs-h3:       clamp(1.375rem, 1.5vw + 0.625rem, 1.875rem);
  --ops-fs-body:     clamp(1.125rem, 0.35vw + 1rem, 1.25rem);
  --ops-fs-small:    clamp(1rem, 0.25vw + 0.9375rem, 1.0625rem);
  --ops-fs-caption:  clamp(0.875rem, 0.2vw + 0.8125rem, 0.9375rem);

  --ops-space-2xs:   clamp(0.25rem, 0.5vw, 0.5rem);
  --ops-space-xs:    clamp(0.5rem, 1vw, 0.75rem);
  --ops-space-s:     clamp(0.75rem, 1.5vw, 1.25rem);
  --ops-space-m:     clamp(1.25rem, 2.5vw, 2rem);
  --ops-space-l:     clamp(2rem, 4vw, 3.5rem);
  --ops-space-xl:    clamp(3rem, 6vw, 5rem);
  --ops-space-2xl:   clamp(4.5rem, 8vw, 8rem);

  --ops-max:         2000px;
  --ops-gutter:      clamp(1rem, 3vw, 2.5rem);
  --ops-radius:      28px;
  --ops-radius-sm:   12px;
  --ops-radius-full: 100px;

  --ops-ease:        cubic-bezier(0.2, 1, 0.3, 1);
  --ops-dur:         0.4s;
}


/* --------------------------------------------------------------------------
   1. PAGE WRAPPER
   -------------------------------------------------------------------------- */
.ops-root {
  background-color: var(--ops-bg);
  color: var(--ops-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--ops-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(1, 134, 187, 0.07), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 90%, rgba(246, 98, 19, 0.06), transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(185, 199, 91, 0.03), transparent 40%);
  background-attachment: fixed;
}


/* --------------------------------------------------------------------------
   2. CONTAINER
   -------------------------------------------------------------------------- */
.ops-container {
  width: min(var(--ops-max), 100% - var(--ops-gutter) * 2);
  margin-inline: auto;
}

.ops-container--narrow {
  --ops-max: 860px;
}


/* --------------------------------------------------------------------------
   3. HEADER — Wit frosted glass, overlay op hero
   -------------------------------------------------------------------------- */
.ops-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding-block: 0;
  border-bottom: 2px solid var(--ops-blaze);
}

.ops-header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72px;
  position: relative;
}

@media (min-width: 768px) {
  .ops-header-inner {
    min-height: 84px;
  }
}

/* Logo: gecentreerd, geen extra badge nodig op witte header */
.ops-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ops-header .wp-block-site-logo,
.ops-header .custom-logo-link,
.ops-logo .wp-block-site-logo,
.ops-logo .custom-logo-link {
  margin: 0 !important;
  line-height: 1;
  background: transparent !important;
  padding: 0 !important;
}

.ops-header .wp-block-site-logo img,
.ops-header .custom-logo-link img,
.ops-header .wp-block-site-logo a img,
.ops-logo .wp-block-site-logo img,
.ops-logo .custom-logo-link img {
  display: block !important;
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

@media (min-width: 768px) {
  .ops-header .wp-block-site-logo img,
  .ops-header .custom-logo-link img,
  .ops-header .wp-block-site-logo a img,
  .ops-logo .wp-block-site-logo img,
  .ops-logo .custom-logo-link img {
    height: 60px !important;
  }
}

/* Verberg tekst-badge als site-logo actief is */
.ops-logo-badge,
.ops-logo > .gb-text:not(.ops-logo-badge) {
  /* Verborgen via blockVisibility in de editor */
}

/* CTA button: rechts, onafhankelijk van logo centering */
.ops-header-inner .ops-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.ops-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.ops-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ops-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.ops-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(12, 10, 8, 0.25) 0%,
      rgba(12, 10, 8, 0.6) 50%,
      var(--ops-bg) 92%);
  z-index: 1;
}

.ops-hero-content {
  position: relative;
  z-index: 10;
  padding-block-start: 7rem;
  max-width: 55rem;
}

.ops-hero-label {
  display: inline-block;
  color: var(--ops-ocean);
  text-transform: uppercase;
  font-weight: 800;
  font-size: var(--ops-fs-small);
  letter-spacing: 0.15em;
  margin-block-end: var(--ops-space-s);
}

.ops-hero-title {
  font-size: var(--ops-fs-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #fff;
  margin-block-end: var(--ops-space-m);
}

.ops-hero-desc {
  font-size: clamp(1.1875rem, 1.5vw, 1.5rem);
  max-width: 50ch;
  color: var(--ops-text-muted);
  margin-block-end: var(--ops-space-l);
  line-height: 1.55;
}

.ops-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ops-space-s);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ops-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem 2.25rem;
  border-radius: var(--ops-radius-full);
  font-weight: 800;
  font-size: var(--ops-fs-body);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--ops-dur) var(--ops-ease),
    box-shadow var(--ops-dur) var(--ops-ease),
    background var(--ops-dur) var(--ops-ease),
    color var(--ops-dur) var(--ops-ease),
    border-color var(--ops-dur) var(--ops-ease);
}

.ops-btn--primary {
  background: var(--ops-blaze);
  color: #fff;
}

.ops-btn--primary:hover {
  background: var(--ops-blaze-light);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(246, 98, 19, 0.35);
}

.ops-btn--outline {
  background: transparent;
  border-color: var(--ops-ocean);
  color: var(--ops-ocean-light);
}

.ops-btn--outline:hover {
  background: var(--ops-ocean);
  border-color: var(--ops-ocean);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(1, 134, 187, 0.25);
}

.ops-btn--sm {
  padding: 0.7rem 1.6rem;
  font-size: var(--ops-fs-small);
}

/* Mobile buttons */
@media (max-width: 767px) {
  .ops-btn {
    padding: 0.85rem 1.5rem;
    font-size: var(--ops-fs-small);
  }

  .ops-btn--sm {
    padding: 0.6rem 1.2rem;
    font-size: var(--ops-fs-caption);
  }
}

@media (max-width: 480px) {
  .ops-hero-cta-group {
    flex-direction: column;
  }

  .ops-hero-cta-group .ops-btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   6. SECTION
   -------------------------------------------------------------------------- */
.ops-section {
  padding-block: var(--ops-space-2xl);
}


/* --------------------------------------------------------------------------
   7. SECTION HEADERS
   -------------------------------------------------------------------------- */
.ops-section-h {
  font-size: var(--ops-fs-h2);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-block-end: var(--ops-space-l);
}

.ops-section-h em {
  font-style: normal;
  color: var(--ops-blaze);
}


/* --------------------------------------------------------------------------
   8. CARD GRID — horizontal swipe on mobile
   -------------------------------------------------------------------------- */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--ops-space-s);
}

@media (max-width: 767px) {
  .ops-grid {
    display: flex;
    gap: var(--ops-space-s);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--ops-gutter);
    padding-block-end: var(--ops-space-s);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .ops-grid > * {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }

  .ops-grid::-webkit-scrollbar { display: none; }
  .ops-grid { scrollbar-width: none; }
}

.ops-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--ops-radius);
  padding: var(--ops-space-l) var(--ops-space-m);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--ops-dur) var(--ops-ease),
    transform var(--ops-dur) var(--ops-ease);
}

.ops-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ops-ocean), var(--ops-lime));
  opacity: 0;
  transition: opacity var(--ops-dur) var(--ops-ease);
}

.ops-card:hover {
  border-color: var(--ops-ocean);
  transform: translateY(-4px);
}

.ops-card:hover::before {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   9. SERVICE TILES
   -------------------------------------------------------------------------- */
.ops-service-num {
  display: block;
  font-size: var(--ops-fs-caption);
  font-weight: 700;
  color: var(--ops-ocean);
  letter-spacing: 0.1em;
  margin-block-end: var(--ops-space-2xs);
}

.ops-service-title {
  font-size: var(--ops-fs-h3);
  font-weight: 800;
  color: #fff;
  margin-block-end: var(--ops-space-xs);
}

.ops-service-desc {
  font-size: var(--ops-fs-small);
  color: var(--ops-text-muted);
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   10. TWO-COLUMN CONTENT GRID
   -------------------------------------------------------------------------- */
.ops-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ops-space-l);
}

@media (min-width: 768px) {
  .ops-content-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* --------------------------------------------------------------------------
   11. CONTENT SECTIONS (eisen / aanbod)
   -------------------------------------------------------------------------- */
.ops-content-section {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--ops-radius);
  padding: var(--ops-space-l) var(--ops-space-m);
  position: relative;
  overflow: hidden;
}

.ops-content-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.ops-content-section-h {
  font-size: var(--ops-fs-h3);
  font-weight: 800;
  margin-block-end: var(--ops-space-m);
}

.ops-content-section-h--ocean { color: var(--ops-ocean); }
.ops-content-section:has(.ops-content-section-h--ocean)::before {
  background: linear-gradient(90deg, var(--ops-ocean), var(--ops-ocean-dark));
}

.ops-content-section-h--lime { color: var(--ops-lime); }
.ops-content-section:has(.ops-content-section-h--lime)::before {
  background: linear-gradient(90deg, var(--ops-lime), var(--ops-lime-dark));
}

.ops-content-section-h--blaze { color: var(--ops-blaze); }
.ops-content-section:has(.ops-content-section-h--blaze)::before {
  background: linear-gradient(90deg, var(--ops-blaze), var(--ops-blaze-dark));
}


/* --------------------------------------------------------------------------
   12. CHECKLISTS
   -------------------------------------------------------------------------- */
.ops-list-reset {
  list-style: none;
  padding: 0; margin: 0;
}

.ops-list-grid {
  display: flex;
  flex-direction: column;
  gap: var(--ops-space-xs);
}

.ops-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--ops-fs-body);
  line-height: 1.55;
}

.ops-list-item .gb-shape {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.15em;
}

.ops-list-item .gb-shape svg {
  width: 14px; height: 14px;
}

.ops-list-item--require .gb-shape { color: var(--ops-ocean); }
.ops-list-item--offer   .gb-shape { color: var(--ops-lime); }
.ops-list-item--service .gb-shape { color: var(--ops-blaze); }

/* FIX: GB editor dupliceert icon nesting */
.ops-list-item > .gb-text > .gb-shape,
.ops-list-item > .gb-text > .gb-text > .gb-shape,
.ops-list-item > .gb-text > .gb-text > .gb-text > .gb-shape,
.ops-list-item > .gb-text > .gb-text > .gb-text > .gb-text > .gb-shape {
  display: none !important;
}


/* --------------------------------------------------------------------------
   13. USP STRIP — horizontal swipe on mobile
   -------------------------------------------------------------------------- */
section[aria-label="Kenmerken SSO"] {
  padding-block: var(--ops-space-l);
  background: var(--ops-bg-surface);
  border-block: 1px solid rgba(255, 255, 255, 0.05);
}

section[aria-label="Kenmerken SSO"] .ops-section-h {
  text-align: center;
  margin-block-end: var(--ops-space-m);
}

.ops-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--ops-radius);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

@media (max-width: 767px) {
  .ops-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }

  .ops-strip::-webkit-scrollbar { display: none; }
  .ops-strip { scrollbar-width: none; }

  .ops-strip-cell {
    flex: 0 0 45%;
    scroll-snap-align: start;
  }
}

.ops-strip-cell {
  background: var(--ops-bg-surface);
  padding: var(--ops-space-m) var(--ops-space-s);
  text-align: center;
}

.ops-strip-cell::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--ops-blaze);
  border-radius: 2px;
  margin-inline: auto;
  margin-block-end: var(--ops-space-xs);
}

.ops-strip-label {
  display: block;
  font-size: var(--ops-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ops-ocean);
  margin-block-end: var(--ops-space-2xs);
}

.ops-strip-value {
  display: block;
  font-size: var(--ops-fs-body);
  font-weight: 700;
  color: #fff;
}


/* --------------------------------------------------------------------------
   14. CTA BANNER
   -------------------------------------------------------------------------- */
.ops-cta-banner {
  background:
    linear-gradient(135deg, rgba(246, 98, 19, 0.08) 0%, transparent 50%),
    linear-gradient(315deg, rgba(1, 134, 187, 0.06) 0%, transparent 50%),
    var(--ops-bg-elevated);
  border: 1px solid rgba(246, 98, 19, 0.15);
  border-radius: var(--ops-radius);
  padding: var(--ops-space-xl) var(--ops-space-l);
  text-align: center;
}

.ops-cta-banner-title {
  font-size: var(--ops-fs-h2);
  font-weight: 900;
  color: #fff;
  margin-block-end: var(--ops-space-xs);
}

.ops-cta-banner-desc {
  font-size: var(--ops-fs-body);
  color: var(--ops-text-muted);
  max-width: 48ch;
  margin-inline: auto;
  margin-block-end: var(--ops-space-l);
}


/* --------------------------------------------------------------------------
   15. GRAVITY FORMS — Dark SSO Theme
   -------------------------------------------------------------------------- */
.ops-cta-banner .gform_wrapper.gform-theme--framework {
  --gf-color-primary: var(--ops-blaze) !important;
  --gf-color-danger: var(--ops-blaze) !important;
  --gf-color-out-ctrl-light: var(--ops-bg-input) !important;
  --gf-color-out-ctrl-lighter: var(--ops-bg-elevated) !important;
  --gf-color-in-ctrl: var(--ops-text) !important;
  --gf-color-in-ctrl-light: var(--ops-text-muted) !important;
  --gf-color-out-ctrl-dark: var(--ops-text) !important;
  --gf-ctrl-border-color: rgba(255, 255, 255, 0.12) !important;
  --gf-ctrl-border-radius: var(--ops-radius-sm) !important;
  --gf-label-color-primary: var(--ops-text) !important;
  --gf-label-color-secondary: var(--ops-text-muted) !important;
  --gf-ctrl-bg-color: var(--ops-bg-input) !important;
  --gf-ctrl-focus-border-color: var(--ops-ocean) !important;
  --gf-font-family: 'Inter', system-ui, sans-serif !important;
  --gf-font-size-secondary: var(--ops-fs-small) !important;
}

.ops-cta-banner .gform_wrapper {
  margin-block-end: var(--ops-space-l);
}

.ops-cta-banner .gform_wrapper .gform_body,
.ops-cta-banner .gform_wrapper .gform_fields {
  text-align: left;
}

.ops-cta-banner .gform_wrapper .gfield,
.ops-cta-banner .gform_wrapper .gform-grid-col {
  margin-block-end: var(--ops-space-s);
}

.ops-cta-banner .gform_wrapper .gfield_label,
.ops-cta-banner .gform_wrapper .gform-field-label,
.ops-cta-banner .gform_wrapper label.gform-field-label {
  color: var(--ops-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: var(--ops-fs-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  margin-block-end: var(--ops-space-xs);
}

.ops-cta-banner .gform_wrapper .gfield_required,
.ops-cta-banner .gform_wrapper .gfield_required_asterisk,
.ops-cta-banner .gform_wrapper .gfield_required_text {
  color: var(--ops-blaze) !important;
}

.ops-cta-banner .gform_wrapper input[type="text"],
.ops-cta-banner .gform_wrapper input[type="email"],
.ops-cta-banner .gform_wrapper input[type="tel"],
.ops-cta-banner .gform_wrapper input[type="url"],
.ops-cta-banner .gform_wrapper input[type="number"],
.ops-cta-banner .gform_wrapper textarea,
.ops-cta-banner .gform_wrapper select,
.ops-cta-banner .gform_wrapper .ginput_container input,
.ops-cta-banner .gform_wrapper .ginput_container textarea,
.ops-cta-banner .gform_wrapper .ginput_container select {
  background: var(--ops-bg-input) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--ops-radius-sm) !important;
  color: var(--ops-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: var(--ops-fs-body) !important;
  padding: 1.1rem 1.35rem !important;
  width: 100%;
  min-height: 3.5rem;
  transition:
    border-color var(--ops-dur) var(--ops-ease),
    box-shadow var(--ops-dur) var(--ops-ease);
}

.ops-cta-banner .gform_wrapper input:focus,
.ops-cta-banner .gform_wrapper textarea:focus,
.ops-cta-banner .gform_wrapper select:focus {
  outline: none !important;
  border-color: var(--ops-ocean) !important;
  box-shadow: 0 0 0 3px rgba(1, 134, 187, 0.2) !important;
}

.ops-cta-banner .gform_wrapper input::placeholder,
.ops-cta-banner .gform_wrapper textarea::placeholder {
  color: var(--ops-text-muted) !important;
  opacity: 0.6;
}

.ops-cta-banner .gform_wrapper select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239a9c9c' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.5rem !important;
}

.ops-cta-banner .gform_wrapper .gchoice,
.ops-cta-banner .gform_wrapper .gform-field-label--type-inline {
  display: flex; align-items: center; gap: 0.6rem;
  margin-block-end: var(--ops-space-2xs);
}

.ops-cta-banner .gform_wrapper input[type="checkbox"],
.ops-cta-banner .gform_wrapper input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1.5rem !important; height: 1.5rem !important;
  min-width: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  background: var(--ops-bg-input) !important;
  flex-shrink: 0; cursor: pointer;
  transition:
    border-color var(--ops-dur) var(--ops-ease),
    background var(--ops-dur) var(--ops-ease);
}

.ops-cta-banner .gform_wrapper input[type="checkbox"] { border-radius: 4px !important; }
.ops-cta-banner .gform_wrapper input[type="radio"]    { border-radius: 50% !important; }

.ops-cta-banner .gform_wrapper input[type="checkbox"]:checked {
  background: var(--ops-lime) !important;
  border-color: var(--ops-lime) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230c0a08' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.ops-cta-banner .gform_wrapper input[type="radio"]:checked {
  background: var(--ops-ocean) !important;
  border-color: var(--ops-ocean) !important;
  box-shadow: inset 0 0 0 3px var(--ops-bg-input) !important;
}

.ops-cta-banner .gform_wrapper .gchoice label,
.ops-cta-banner .gform_wrapper .gform-field-label--type-inline {
  color: var(--ops-text) !important;
  font-size: var(--ops-fs-body) !important;
  cursor: pointer; line-height: 1.5;
}

.ops-cta-banner .gform_wrapper .ginput_complex,
.ops-cta-banner .gform_wrapper .ginput_container_name {
  display: flex; flex-wrap: wrap; gap: var(--ops-space-xs);
}

.ops-cta-banner .gform_wrapper .ginput_complex > span,
.ops-cta-banner .gform_wrapper .ginput_container_name > span,
.ops-cta-banner .gform_wrapper .name_first,
.ops-cta-banner .gform_wrapper .name_last {
  flex: 1 1 200px;
}

.ops-cta-banner .gform_wrapper .ginput_complex label,
.ops-cta-banner .gform_wrapper .ginput_container_name label {
  color: var(--ops-text-muted) !important;
  font-size: var(--ops-fs-small) !important;
  margin-block-start: var(--ops-space-2xs);
  display: block;
}

.ops-cta-banner .gform_wrapper .gfield_error input,
.ops-cta-banner .gform_wrapper .gfield_error textarea,
.ops-cta-banner .gform_wrapper .gfield_error select {
  border-color: var(--ops-blaze) !important;
}

.ops-cta-banner .gform_wrapper .validation_message,
.ops-cta-banner .gform_wrapper .gfield_description.validation_message {
  color: var(--ops-blaze) !important;
  font-size: var(--ops-fs-small) !important;
}

.ops-cta-banner .gform_wrapper .gform_validation_errors {
  background: rgba(246, 98, 19, 0.08) !important;
  border: 1px solid rgba(246, 98, 19, 0.3) !important;
  border-radius: var(--ops-radius-sm) !important;
  padding: var(--ops-space-m);
  margin-block-end: var(--ops-space-m);
  color: var(--ops-text) !important;
}

.ops-cta-banner .gform_wrapper .gfield_description {
  color: var(--ops-text-muted) !important;
  font-size: var(--ops-fs-small) !important;
}

/* Submit = Blaze */
.ops-cta-banner .gform_wrapper .gform_button,
.ops-cta-banner .gform_wrapper input[type="submit"],
.ops-cta-banner .gform_wrapper .gform_footer button,
.ops-cta-banner .gform_wrapper .gform-button--primary,
.ops-cta-banner .gform_wrapper .button.gform_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem 2.5rem !important;
  border-radius: var(--ops-radius-full) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--ops-fs-body) !important;
  text-transform: uppercase !important;
  background: var(--ops-blaze) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  cursor: pointer; width: 100%;
  transition:
    transform var(--ops-dur) var(--ops-ease),
    box-shadow var(--ops-dur) var(--ops-ease),
    background var(--ops-dur) var(--ops-ease);
}

.ops-cta-banner .gform_wrapper .gform_button:hover,
.ops-cta-banner .gform_wrapper input[type="submit"]:hover,
.ops-cta-banner .gform_wrapper .gform-button--primary:hover {
  background: var(--ops-blaze-light) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(246, 98, 19, 0.35) !important;
}

.ops-cta-banner .gform_wrapper .gform_footer,
.ops-cta-banner .gform_wrapper .gform-footer {
  margin-block-start: var(--ops-space-m);
  text-align: center;
}

@media (max-width: 767px) {
  .ops-cta-banner .gform_wrapper .gform_button,
  .ops-cta-banner .gform_wrapper input[type="submit"],
  .ops-cta-banner .gform_wrapper .gform-button--primary,
  .ops-cta-banner .gform_wrapper .button.gform_button {
    padding: 0.95rem 1.75rem !important;
    font-size: var(--ops-fs-small) !important;
  }
}

/* Confirmation = Lime */
.ops-cta-banner .gform_confirmation_message {
  background: rgba(185, 199, 91, 0.1);
  border: 1px solid rgba(185, 199, 91, 0.3);
  border-radius: var(--ops-radius-sm);
  padding: var(--ops-space-l);
  text-align: center;
  color: var(--ops-lime);
  font-weight: 600;
}

.ops-cta-banner .gform_wrapper .gf_progressbar {
  background: var(--ops-bg-input);
  border-radius: var(--ops-radius-full);
  overflow: hidden; height: 6px;
  margin-block-end: var(--ops-space-m);
}

.ops-cta-banner .gform_wrapper .gf_progressbar_percentage {
  background: linear-gradient(90deg, var(--ops-ocean), var(--ops-blaze));
  height: 100%; border-radius: var(--ops-radius-full);
}


/* --------------------------------------------------------------------------
   16. STICKY BAR — Verborgen totdat je voorbij de hero scrollt
   -------------------------------------------------------------------------- */
.ops-sticky {
  position: fixed;
  bottom: var(--ops-space-m);
  left: 50%; translate: -50% 0;
  z-index: 9999;
  width: min(92%, 540px);
  background: rgba(12, 10, 8, 0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(1, 134, 187, 0.15);
  border-radius: var(--ops-radius-full);
  padding: 0.6rem 0.6rem 0.6rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ops-space-s);

  /* Start verborgen, schuift omhoog bij scroll */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition:
    opacity 0.5s var(--ops-ease),
    transform 0.5s var(--ops-ease);
}

/* JS voegt deze class toe als je voorbij de hero scrollt */
.ops-sticky.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ops-sticky-info {
  display: flex; flex-direction: column; min-width: 0;
}

.ops-sticky-title {
  display: block; font-weight: 800;
  font-size: var(--ops-fs-small); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ops-sticky-sub {
  display: block;
  font-size: var(--ops-fs-caption);
  color: var(--ops-ocean-light);
}

.ops-sticky-cta { flex-shrink: 0; }

@media (max-width: 767px) {
  .ops-sticky {
    padding: 0.45rem 0.45rem 0.45rem 1rem;
    gap: 0.5rem;
  }

  .ops-sticky-title {
    font-size: var(--ops-fs-caption);
  }

  .ops-sticky-sub {
    font-size: 0.8125rem;
  }
}


/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.ops-footer {
  padding-block: var(--ops-space-l);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: var(--ops-fs-small);
  color: var(--ops-text-muted);
}

.ops-footer-inner {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; gap: var(--ops-space-m);
}

.ops-footer-brand {
  font-size: var(--ops-fs-h3); font-weight: 900;
  color: #fff; letter-spacing: -0.02em;
}

.ops-footer-brand span { color: var(--ops-blaze); }

.ops-footer-contact {
  display: flex; flex-wrap: wrap;
  gap: var(--ops-space-xs) var(--ops-space-m);
}

.ops-footer-contact a {
  color: var(--ops-text); text-decoration: none;
  transition: color var(--ops-dur) var(--ops-ease);
}

.ops-footer-contact a:hover { color: var(--ops-ocean); }

.ops-footer-copy {
  width: 100%; text-align: center;
  margin-block-start: var(--ops-space-m);
  padding-block-start: var(--ops-space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: var(--ops-fs-caption);
}


/* --------------------------------------------------------------------------
   18. EXTRA SECTIES
   -------------------------------------------------------------------------- */
.ops-intro-text {
  font-size: var(--ops-fs-body);
  color: var(--ops-text-muted);
  line-height: 1.65;
  max-width: 65ch;
  margin-block-end: var(--ops-space-m);
}

.ops-content-section--wide {
  margin-block-end: var(--ops-space-l);
}

.ops-list-grid--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ops-space-xs);
}

@media (min-width: 768px) {
  .ops-list-grid--2col {
    grid-template-columns: 1fr 1fr;
  }
}

.ops-text-lime {
  color: var(--ops-lime) !important;
}

.ops-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ops-space-m);
  margin-block-start: var(--ops-space-m);
}

@media (min-width: 600px) {
  .ops-contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ops-contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--ops-space-2xs);
}

.ops-contact-label {
  font-size: var(--ops-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ops-ocean);
}

.ops-contact-value {
  font-size: var(--ops-fs-body);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

a.ops-contact-value:hover {
  color: var(--ops-blaze);
}