/*
 * Gymful V3.2 — semantic light/dark surfaces and the original Gymful glass.
 * Load after mobile-v31.css. Brand paper, ink and acid remain fixed colors.
 * The textured glass is the original Webflow asset used by .mandaan-child;
 * its highlights and one-pixel rim are retained, with a quiet reading layer.
 * The navigation and photographic captions use real backdrop blur, matching
 * the original navigation's material. Every blurred surface has a solid fallback.
 */

:root {
  --gf-page-bg: #f0efe9;
  --gf-page-text: #121412;
  --gf-page-subtle: #52604d;
  --gf-page-line: rgb(18 20 18 / 18%);
  --gf-page-raised: #faf9f5;
  --gf-page-hover: rgb(18 20 18 / 5%);
  --gf-page-soft: #e7eadd;
  --gf-page-eco: #dce1d7;
  --gf-page-toolkit: #e5e7dc;
  --gf-page-toolkit-art: #cbd5be;
  --gf-page-print: #dfe4d6;
  --gf-page-stack: #c6d2b8;
  --gf-page-focus: #476f00;
  --gf-page-scheme: light;
  --gf-float-solid: #eeeee8;
  --gf-float-glass: rgb(244 244 238 / 87%);
  --gf-float-border: rgb(18 20 18 / 17%);
  --gf-float-shadow: 0 8px 32px rgb(18 20 18 / 12%);
  --gf-input-bg: #faf9f5;
  --gf-input-focus: #fff;
  --gf-input-border: #95998c;
  --gf-input-placeholder: #6d7468;
  --gf-status-success-bg: #e8eedd;
  --gf-status-success-text: #284322;
  --gf-status-success-border: #788867;
  --gf-status-error-bg: #f9e9df;
  --gf-status-error-text: #792e24;
  --gf-status-error-border: #a04435;
  --gf-glass-image: url("/assets/cdn.prod.website-files.com/675aeddaa1c01371b8839234/678ea63765f5a9cc36564825_Mask_Group_2.avif");
  --gf-glass-image-tall: url("/assets/cdn.prod.website-files.com/675aeddaa1c01371b8839234/678e5b729919d62b096c2ad7_Mask_Group_2.avif");
  --gf-glass-bg: #151a16;
  --gf-glass-text: #f0efe9;
  --gf-glass-subtle: #c0c8bb;
  --gf-glass-border: rgb(170 180 160 / 30%);
  --gf-glass-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  --gf-line: var(--gf-page-line);
  --gf-focus: var(--gf-page-focus);
}

html[data-theme="dark"] {
  --gf-page-bg: #101410;
  --gf-page-text: #f0efe9;
  --gf-page-subtle: #b5c0af;
  --gf-page-line: rgb(240 239 233 / 22%);
  --gf-page-raised: #1b221b;
  --gf-page-hover: rgb(240 239 233 / 7%);
  --gf-page-soft: #182018;
  --gf-page-eco: #1b241a;
  --gf-page-toolkit: #171f17;
  --gf-page-toolkit-art: #273322;
  --gf-page-print: #182117;
  --gf-page-stack: #293a28;
  --gf-page-focus: #ecff50;
  --gf-page-scheme: dark;
  --gf-float-solid: #181e18;
  --gf-float-glass: rgb(24 30 24 / 91%);
  --gf-float-border: rgb(240 239 233 / 24%);
  --gf-float-shadow: 0 8px 36px rgb(0 0 0 / 26%);
  --gf-input-bg: #222a21;
  --gf-input-focus: #2a3528;
  --gf-input-border: #6c7a65;
  --gf-input-placeholder: #b4bdaf;
  --gf-status-success-bg: #213c28;
  --gf-status-success-text: #d4e8c8;
  --gf-status-success-border: #81a775;
  --gf-status-error-bg: #40271f;
  --gf-status-error-text: #ffcec0;
  --gf-status-error-border: #e7a08c;
}

html {
  color-scheme: var(--gf-page-scheme);
  background: var(--gf-page-bg);
}

body.gymful-ui-v3 {
  --gf-heading-ink: var(--gf-page-text);
  color: var(--gf-page-text);
  background: var(--gf-page-bg);
}

/* Dark chapters and acid chapters keep their intended contrast in both modes. */
.gf-dark {
  --gf-page-text: #f0efe9;
  --gf-page-subtle: #b7c0b3;
  --gf-page-line: rgb(240 239 233 / 20%);
  --gf-heading-ink: #f0efe9;
  --gf-focus: #ecff50;
  color: #f0efe9;
}

.gf-contact,
.gf-promise,
.gf-stack-card--1 {
  --gf-page-text: #121412;
  --gf-page-line: rgb(18 20 18 / 20%);
  --gf-page-hover: rgb(18 20 18 / 5%);
  --gf-line: rgb(18 20 18 / 20%);
  --gf-heading-ink: #121412;
  --gf-focus: #476f00;
  color: #121412;
}

.gf-service-hero {
  color: var(--gf-page-text);
  background: var(--gf-page-bg);
}

.gf-problem { background: var(--gf-page-soft); }
.gf-ecosystem { background: var(--gf-page-eco); }
.gf-toolkit { background: var(--gf-page-toolkit); }
.gf-toolkit-art { background: var(--gf-page-toolkit-art); }
.gf-print-platform { background: var(--gf-page-print); }
.gf-stack-card--0 { background: var(--gf-page-stack); }

html[data-theme="dark"] .gf-hero-dot { color: var(--gf-acid); }

.gf-connect-canvas {
  border-color: var(--gf-page-line);
  background: radial-gradient(circle, var(--gf-page-raised) 0, transparent 70%);
}

.gf-connect-piece {
  color: var(--gf-page-text);
  border-color: var(--gf-page-line);
  background: var(--gf-page-raised);
}

.gf-connect-line { background: var(--gf-page-text); }
.gf-connect-result { color: var(--gf-page-subtle); }

.gf-connect[data-connected="true"] .gf-connect-piece {
  color: #121412;
  border-color: #121412;
  background: var(--gf-acid);
}

.gf-slider-controls button { color: var(--gf-page-text); }
.gf-slider-controls button:hover:enabled { color: #121412; }
.gf-cases [data-slider="progress"] { background: var(--gf-page-line); }
.gf-cases [data-slider="progress"] > span { background: var(--gf-page-text); }

.gf-editorial-note,
.gf-benefits-list,
.gf-benefits-list > article,
.gf-faq details,
.gf-faq details:last-child,
.gf-faq summary > i { border-color: var(--gf-page-line); }

.gf-faq details[open] summary > i {
  border-color: var(--gf-page-text);
  background: var(--gf-page-text);
  color: var(--gf-page-bg);
}

.gf-button--outline {
  color: var(--gf-page-text);
  border-color: var(--gf-page-line);
}

.gf-button--outline:hover { background: var(--gf-page-hover); }

html[data-theme="dark"] .gf-button--dark {
  border-color: rgb(240 239 233 / 28%);
}

/* Original smoked glass. These panels are dark in either page theme. */
.gf-system-content,
.gf-cap-stage,
.gf-glass-panel {
  --gf-line: rgb(240 239 233 / 22%);
  --gf-heading-ink: var(--gf-glass-text);
  color: var(--gf-glass-text);
  border: 1px solid var(--gf-glass-border);
  background-color: var(--gf-glass-bg);
  background-image:
    linear-gradient(115deg, rgb(10 14 10 / 24%), rgb(10 14 10 / 48%)),
    linear-gradient(#ffffff08, #ffffff12),
    var(--gf-glass-image);
  background-position: 0 0, 0 0, center;
  background-size: auto, auto, 110% 110%;
  background-repeat: no-repeat;
  box-shadow: var(--gf-glass-shadow);
}

.gf-system-panel__copy > p,
.gf-cap-content > p:not(.gf-eyebrow),
.gf-glass-panel > p:not(.gf-eyebrow) {
  color: var(--gf-glass-subtle);
}

.gf-system-orbit {
  border-color: rgb(192 204 176 / 42%);
  background: rgb(15 20 14 / 42%);
}

.gf-system-orbit::before,
.gf-system-orbit::after { border-color: rgb(192 204 176 / 36%); }

.gf-system-dial-row .gf-orbit-point {
  color: #c2cbb9;
  border-color: #6e7b63;
  background: #1d251b;
}

.gf-system-dial-row .gf-orbit-point.is-selected {
  color: #121412;
  border-color: var(--gf-acid);
  background: var(--gf-acid);
}

.gf-glass-panel {
  min-width: 0;
  padding: clamp(1.5rem, 3.25vw, 3.5rem);
  border-radius: 1.3125rem;
}

.gf-service-case-grid > .gf-glass-panel h2 {
  font-size: clamp(2.75rem, 4.6vw, 4.8rem);
}

.gf-glass-panel > .gf-eyebrow { margin-bottom: 1.5rem; }

/* A caption blurs the photograph only within its own small surface. */
.gf-founder-name,
.gf-service-art .gf-art-label {
  color: #f0efe9;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: .625rem;
  background: #171d17;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

.gf-founder-name > span:last-child {
  color: #d0d6c8;
  opacity: 1;
}

/* The floating menu uses the original website's translucent glass treatment. */
[data-twostep-nav] {
  --gf-nav-paper: var(--gf-float-solid);
  --gf-nav-ink: var(--gf-page-text);
}

[data-twostep-nav] .twostep-nav__back-bg {
  border-color: var(--gf-float-border);
  background: var(--gf-float-solid);
  box-shadow: var(--gf-float-shadow), inset 0 1px 0 rgb(255 255 255 / 10%);
}

[data-twostep-nav] .twostep-nav__top-line { background: var(--gf-page-line); }
[data-twostep-nav] .twostep-nav__toggle,
[data-twostep-nav] .twostep-nav__link { border-color: var(--gf-page-line); }
[data-twostep-nav] .twostep-nav__bottom-inner { scrollbar-color: var(--gf-page-subtle) transparent; }

[data-twostep-nav] .twostep-nav__cta,
[data-twostep-nav] .gf-nav-mobile-cta,
[data-twostep-nav] .twostep-nav__visual-caption {
  color: #121412;
}

html[data-theme="dark"] [data-twostep-nav] .twostep-nav__logo img {
  filter: brightness(0) invert(1);
}

/* SVG icons render identically on iOS, Android and desktop. */
.gf-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.gf-theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  flex: 0 0 2.75rem;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: .625rem;
  border: 1px solid var(--gf-page-line);
  border-radius: .625rem;
  background: transparent;
  color: var(--gf-page-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s, border-color .2s;
}

.gf-theme-toggle .gf-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.gf-theme-toggle .gf-theme-toggle__sun { display: none; }
html[data-theme="dark"] .gf-theme-toggle .gf-theme-toggle__moon { display: none; }
html[data-theme="dark"] .gf-theme-toggle .gf-theme-toggle__sun { display: block; }

.gf-theme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-twostep-nav] .gf-theme-toggle:focus-visible {
  outline: 2px solid var(--gf-page-focus);
  outline-offset: 3px;
}

/* Forms follow the page preference, including native date fields and autofill. */
body.gymful-ui-v3 [data-gymful-drawer] {
  --gf-form-paper: var(--gf-page-bg);
  --gf-form-ink: var(--gf-page-text);
  color-scheme: var(--gf-page-scheme);
  border-left-color: var(--gf-page-line);
  scrollbar-color: var(--gf-page-subtle) var(--gf-form-paper);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(p, .paragraph, .onderregel-text-form, small) {
  color: var(--gf-page-subtle);
}

body.gymful-ui-v3 [data-gymful-drawer] :where(input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  color-scheme: var(--gf-page-scheme);
  border-color: var(--gf-input-border);
  background: var(--gf-input-bg);
  color: var(--gf-form-ink);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(input, textarea)::placeholder {
  color: var(--gf-input-placeholder);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(input, textarea, select):focus-visible {
  border-color: var(--gf-page-focus);
  outline-color: var(--gf-page-focus);
  background-color: var(--gf-input-focus);
}

body.gymful-ui-v3 [data-gymful-drawer] [aria-invalid="true"] {
  border-color: var(--gf-status-error-border);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(input, select, textarea):-webkit-autofill {
  -webkit-text-fill-color: var(--gf-form-ink);
  box-shadow: 0 0 0 1000px var(--gf-input-bg) inset;
  caret-color: var(--gf-form-ink);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(input, select, textarea):autofill {
  color: var(--gf-form-ink);
  background: var(--gf-input-bg);
  caret-color: var(--gf-form-ink);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--gf-page-focus);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(input[type="submit"], button[type="submit"], .form-submit-button) {
  color: #121412;
  border-color: #121412;
  background: var(--gf-form-acid);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(.w-form-done, .w-form-fail) {
  color: var(--gf-status-success-text);
  border-color: var(--gf-status-success-border);
  background: var(--gf-status-success-bg);
}

body.gymful-ui-v3 [data-gymful-drawer] .w-form-fail {
  color: var(--gf-status-error-text);
  border-color: var(--gf-status-error-border);
  background: var(--gf-status-error-bg);
}

body.gymful-ui-v3 [data-gymful-drawer] :is(.w-form-done, .w-form-fail) p { color: inherit; }

html[data-theme="dark"] body.gymful-ui-v3 [data-gymful-drawer] [data-gymful-dialog-close] img {
  filter: brightness(0) invert(1);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-twostep-nav] .twostep-nav__back-bg {
    background: var(--gf-float-glass);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    backdrop-filter: blur(30px) saturate(120%);
  }

  .gf-founder-name,
  .gf-service-art .gf-art-label {
    background: rgb(18 24 18 / 74%);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-twostep-nav] .twostep-nav__toggle:hover,
  .gf-theme-toggle:hover { background: var(--gf-page-hover); }

  [data-twostep-nav] .twostep-nav__cta:hover,
  [data-twostep-nav] .gf-nav-mobile-cta:hover,
  body.gymful-ui-v3 [data-gymful-drawer] [type="submit"]:hover:not(:disabled) {
    color: #121412;
    background: #d8ec39;
  }

  .gf-benefits-list > article:hover { background: var(--gf-page-hover); }

  .gf-faq summary:hover > i { color: #121412; }
  .gf-faq details[open] summary:hover > i {
    color: var(--gf-page-bg);
    background: var(--gf-page-text);
  }

  body.gymful-ui-v3 [data-gymful-drawer] [data-gymful-dialog-close]:hover {
    color: #121412;
    background: var(--gf-form-acid);
  }

  html[data-theme="dark"] body.gymful-ui-v3 [data-gymful-drawer] [data-gymful-dialog-close]:hover img {
    filter: brightness(0);
  }
}

@media (max-width: 767px) {
  [data-twostep-nav] .twostep-nav__top-actions { gap: .375rem; }
  [data-twostep-nav] .twostep-nav__logo { min-width: 0; }

  .gf-system-content,
  .gf-glass-panel {
    background-image:
      linear-gradient(115deg, rgb(10 14 10 / 24%), rgb(10 14 10 / 48%)),
      linear-gradient(#ffffff12, #ffffff0d),
      var(--gf-glass-image-tall);
    background-size: auto, auto, cover;
  }

  .gf-glass-panel { padding: 1.5rem 1.25rem; border-radius: .875rem; }
  .gf-service-case-grid > .gf-glass-panel h2 { font-size: clamp(2.6rem, 10.5vw, 3.6rem); }
}

@media (max-width: 359px) {
  [data-twostep-nav] .twostep-nav__logo { width: 6.25rem; }
  [data-twostep-nav] .twostep-nav__toggle { width: 6.25rem; padding-inline: .65rem; }
  [data-twostep-nav] .twostep-nav__top { padding-inline: .75rem; gap: .375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gf-theme-toggle { transition: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-twostep-nav] .twostep-nav__back-bg {
    background: var(--gf-float-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .gf-founder-name,
  .gf-service-art .gf-art-label {
    background: #171d17;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .gf-system-content,
  .gf-cap-stage,
  .gf-glass-panel { background-image: none; }
}