:root {
  --bg: #eef4fb;
  --bg-soft: #dfeaf4;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-soft: rgba(247, 250, 253, 0.98);
  --surface-strong: rgba(235, 242, 248, 0.98);
  --ink: #263b53;
  --muted: #61758a;
  --line: rgba(112, 137, 163, 0.22);
  --line-strong: rgba(82, 108, 136, 0.32);
  --steel: #b7c5d2;
  --silver: #f7fafc;
  --silver-dark: #607487;
  --silver-deep: #2b4461;
  --gold: #c9d8e6;
  --gold-soft: #dce7f1;
  --gold-pale: #eff5fa;
  --blue: #2f74c7;
  --cyan: #61b8f6;
  --ice: #d5ebfb;
  --teal: #39c7c7;
  --violet: #6986ff;
  --shadow: 0 20px 42px rgba(59, 83, 109, 0.1);
  --shadow-strong: 0 26px 58px rgba(59, 83, 109, 0.14);
  --content-width: 1120px;
  --banner-width: 920px;
  --rs-template-bg-image: url("assets/rs-klimaat-template-bg.png");
  --rs-home-top-banner-image: url("assets/rs-home-top-banner.png?v=20260517-header-bg-align-01");
  --rs-home-bottom-banner-image: url("assets/rs-home-bottom-banner.png?v=20260517-header-bg-align-01");
  --pointer-x: 50%;
  --pointer-y: 20%;
}

/* Mobiele basisronde: geen horizontale breuk, grotere tikvlakken en rustiger formulieren. */
@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main,
  .content-section,
  .portal-section,
  .site-header,
  .header-shell,
  .header-shell--portal,
  .tech-panel,
  .portal-section-card,
  .portal-case,
  .portal-mini-note,
  .document-page-main,
  .document-sheet,
  .document-sheet--professional,
  .document-preview,
  .document-preview--professional {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .content-section,
  .portal-section {
    width: 100% !important;
    padding-inline: clamp(10px, 3.5vw, 16px) !important;
  }

  .tech-panel,
  .portal-section-card,
  .portal-case,
  .portal-mini-note {
    padding: clamp(14px, 4vw, 20px) !important;
    border-radius: 18px !important;
  }

  .field-row,
  .contact-grid,
  .portal-admin-workspace,
  .portal-admin-overview-grid,
  .portal-admin-grid,
  .portal-kpi-grid,
  .portal-kpis,
  .planning-layout,
  .planning-customer-grid,
  .planning-admin-grid,
  .planning-admin-grid--top,
  .planning-admin-grid--time,
  .planning-admin-grid--contact,
  .document-builder-layout,
  .document-preview-grid,
  .portal-finance-grid,
  .portal-finance-toolbar,
  .portal-project-admin-grid,
  .homepage-media-grid-admin {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .portal-admin-sidebar,
  .portal-admin-detail,
  .planning-create-card,
  .planning-overview-card,
  .document-builder-preview-shell,
  .document-builder-form,
  .portal-finance-main,
  .portal-finance-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .field,
  .field-full,
  .field input,
  .field select,
  .field textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  input,
  select,
  textarea {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 118px !important;
  }

  .button,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  button,
  input[type="submit"] {
    min-height: 44px !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  .login-actions,
  .portal-inline-links,
  .portal-session__actions,
  .planning-create-card__actions,
  .planning-toolbar__actions,
  .portal-finance-summary__actions,
  .document-template-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .login-actions > *,
  .portal-inline-links > *,
  .planning-create-card__actions > *,
  .planning-toolbar__actions > *,
  .portal-finance-summary__actions > *,
  .document-template-actions > * {
    width: 100% !important;
  }

  h1,
  .portal-section-card h1,
  .tech-panel h1 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  h2,
  .portal-section-card h2,
  .tech-panel h2 {
    font-size: clamp(1.35rem, 6vw, 2rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  h3 {
    font-size: clamp(1.05rem, 4.8vw, 1.35rem) !important;
    line-height: 1.16 !important;
  }

  p,
  li,
  .portal-case__detail,
  .portal-case__summary,
  .field-hint,
  .planning-field-note {
    overflow-wrap: anywhere !important;
  }

  .portal-admin-customer-list,
  .portal-admin-document-list,
  .portal-case-filter-bar,
  .planning-chip-group,
  .planning-time-grid,
  .planning-time-grid--buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .portal-admin-customer,
  .portal-admin-document,
  .planning-time-button,
  .planning-overview-row,
  .portal-case {
    width: 100% !important;
    min-width: 0 !important;
  }

  .document-preview,
  .document-preview--professional,
  .document-sheet,
  .document-sheet--professional {
    overflow-x: hidden !important;
  }

  .document-summary__totals,
  .document-summary--professional .document-summary__totals {
    width: 100% !important;
    min-width: 0 !important;
  }

  .rs-language-switcher {
    max-width: calc(100vw - 20px) !important;
    overflow-x: auto !important;
  }
}

/* Topbalk: compact zwart glas met rustige premium knoppen. */
@media screen {
  body.site-home .top-toolbar {
    position: relative !important;
    z-index: 40 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.56) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 34%, rgba(0, 0, 0, 0.06) 68%, rgba(0, 0, 0, 0.2)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.08) 72%, rgba(0, 0, 0, 0.24)) !important;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  body.site-home .top-toolbar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%) !important;
    opacity: 0.7 !important;
  }

  body.site-home .top-toolbar__inner {
    position: relative !important;
    z-index: 1 !important;
    min-height: 48px !important;
    width: min(calc(100% - 24px), 1680px) !important;
    padding: 6px 12px !important;
    gap: 14px !important;
  }

  body.site-home .toolbar-group {
    align-items: center !important;
    gap: 10px !important;
  }

  body.site-home .toolbar-group--right {
    gap: 11px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #1c3449 !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    opacity: 0.9 !important;
  }

  body.site-home .toolbar-group a:not(:last-child)::after,
  body.site-home .toolbar-group span:not(:last-child)::after {
    width: 1px !important;
    height: 22px !important;
    right: -6px !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.26), transparent) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.24) !important;
  }

  body.site-home .top-login-link,
  body.site-home .top-toolbar .top-direct-contact,
  body.site-home .rs-language-button {
    min-height: 34px !important;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.18) 48%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
    color: #142c42 !important;
    box-shadow:
      0 9px 20px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(0, 0, 0, 0.26),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    transform: none !important;
    filter: none !important;
  }

  body.site-home .top-login-link {
    min-width: 118px !important;
    padding: 0 20px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-width: 132px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
  }

  body.site-home .top-toolbar .top-direct-contact--call {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 255, 0.34) 54%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
  }

  body.site-home .top-toolbar .top-direct-contact--whatsapp {
    border-color: rgba(0, 0, 0, 0.54) !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(72, 226, 137, 0.98), rgba(20, 174, 92, 0.94) 54%, rgba(7, 95, 49, 0.98)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2)) !important;
    box-shadow:
      0 10px 24px rgba(7, 116, 62, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.36),
      inset 0 -1px 0 rgba(0, 0, 0, 0.32),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
  }

  body.site-home .rs-language-switcher {
    top: 9px !important;
    left: 12px !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.48) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.1)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.18)) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      inset 0 -1px 0 rgba(0, 0, 0, 0.34) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  body.site-home .rs-language-button {
    min-width: 92px !important;
    padding: 5px 11px 5px 8px !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
  }

  body.site-home .rs-language-button.is-active {
    border-color: rgba(0, 0, 0, 0.58) !important;
    color: #102b42 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(217, 239, 254, 0.38) 54%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
  }

  body.site-home .rs-lang-flag {
    border: 1px solid rgba(0, 0, 0, 0.26) !important;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  }
}

@media screen and (min-width: 900px) {
  body.site-home .toolbar-group--brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .top-toolbar {
    padding-top: 42px !important;
  }

  body.site-home .top-toolbar__inner {
    min-height: auto !important;
    padding: 5px 10px 8px !important;
  }

  body.site-home .toolbar-group--right {
    gap: 8px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    display: none !important;
  }

  body.site-home .top-login-link {
    min-width: 112px !important;
    min-height: 34px !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-width: 0 !important;
    min-height: 42px !important;
    flex: 1 1 calc(50% - 8px) !important;
    padding-inline: 12px !important;
  }

  body.site-home .rs-language-switcher {
    top: 8px !important;
    left: 8px !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
  }
}

/* REPAIR v1: editor-tint terug op glaslagen en topbalk gelijkmatiger verdeeld. */
@media screen {
  html body.site-home {
    --rs-repair-glass-edge: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, rgba(0, 0, 0, 0.54) 42%);
    --rs-repair-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 54%, rgba(0, 0, 0, 0.24) 46%);
  }

  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within {
    border-color: var(--rs-repair-glass-edge) !important;
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 0 0 2px rgba(0, 0, 0, 0.18),
      inset 0 18px 22px -23px rgba(255, 255, 255, 0.34),
      inset 0 -18px 24px -24px rgba(0, 0, 0, 0.58),
      inset 18px 0 24px -28px rgba(0, 0, 0, 0.5),
      inset -18px 0 24px -28px rgba(0, 0, 0, 0.5) !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    border-color: var(--rs-repair-glass-edge) !important;
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.16)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: var(--rs-repair-glass-edge-soft) !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.74), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.08), transparent 34%, rgba(255, 255, 255, 0.14) 72%),
      linear-gradient(180deg, rgba(250, 253, 255, 0.78), rgba(229, 241, 249, 0.7)) !important;
    background-color: rgba(241, 248, 253, 0.64) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card),
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within,
  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    border-color: var(--rs-repair-glass-edge-soft) !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 26%, transparent 80%, var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 246, 253, 0.66)) !important;
    background-color: rgba(241, 248, 253, 0.68) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) auto minmax(560px, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 18px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    transform: none !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #d7e9f8 !important;
    -webkit-text-fill-color: #d7e9f8 !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    grid-column: 3 !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
    margin-right: clamp(80px, 6vw, 150px) !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1300px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    grid-template-columns: minmax(180px, 1fr) auto minmax(400px, 1fr) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-right: clamp(34px, 4vw, 74px) !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    justify-content: center !important;
  }
}

/* FINAL OVERRIDE topbalk v4: definitieve glasbalk en buttons. */
@media screen {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar {
    position: relative !important;
    z-index: 60 !important;
    min-height: 56px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.64) !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.06) 58%, rgba(0, 0, 0, 0.34)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0.04) 82%, rgba(0, 0, 0, 0.34)) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      inset 0 -1px 0 rgba(0, 0, 0, 0.58),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%, rgba(0, 0, 0, 0.18)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.16)) !important;
    opacity: 0.82 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: min(calc(100% - 24px), 1880px) !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    padding: 7px 12px 7px 230px !important;
    gap: 14px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a:not(.top-direct-contact) {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #d7e9f8 !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44) !important;
    opacity: 0.9 !important;
    white-space: nowrap !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group a:not(:last-child)::after,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group span:not(:last-child)::after {
    width: 1px !important;
    height: 24px !important;
    right: -7px !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.38), transparent) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.18) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-button {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.58) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.22) 48%, rgba(0, 0, 0, 0.1)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)) !important;
    color: #132a3f !important;
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: none !important;
    filter: none !important;
    white-space: nowrap !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 124px !important;
    padding: 0 22px !important;
    font-size: 0.82rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact {
    min-width: 142px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.02em !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a.top-direct-contact.top-direct-contact--call {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(226, 242, 253, 0.44) 52%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a.top-direct-contact.top-direct-contact--whatsapp,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a[href*="wa.me"].top-direct-contact {
    border-color: rgba(0, 0, 0, 0.62) !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(76, 229, 139, 0.98), rgba(19, 178, 94, 0.95) 54%, rgba(6, 104, 53, 0.98)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)) !important;
    box-shadow:
      0 12px 24px rgba(5, 107, 56, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.36),
      inset 0 -1px 0 rgba(0, 0, 0, 0.38),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher {
    top: 8px !important;
    left: 12px !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.58) !important;
    border-radius: 25px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.14)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.22)) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      inset 0 -1px 0 rgba(0, 0, 0, 0.38) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-button {
    min-width: 92px !important;
    padding: 5px 11px 5px 8px !important;
    font-size: 0.74rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.04em !important;
  }
}

@media screen and (max-width: 1600px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="mailto:"],
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="tel:"]:not(.top-direct-contact) {
    display: none !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar {
    min-height: 132px !important;
    padding-top: 0 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    width: 100% !important;
    min-height: 132px !important;
    padding: 52px 8px 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: static !important;
    transform: none !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    order: 2 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 126px !important;
    min-height: 36px !important;
    margin-inline: auto !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact {
    min-width: 0 !important;
    min-height: 44px !important;
    flex: 1 1 calc(50% - 6px) !important;
    padding-inline: 10px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher {
    top: 7px !important;
    left: 8px !important;
    transform: scale(0.78) !important;
    transform-origin: top left !important;
  }
}

/* FINAL LOCK topbalk v3: zwart glas, strakke knoppen, geen overlap. */
@media screen {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar {
    position: relative !important;
    z-index: 60 !important;
    min-height: 56px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.64) !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.06) 58%, rgba(0, 0, 0, 0.34)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0.04) 82%, rgba(0, 0, 0, 0.34)) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      inset 0 -1px 0 rgba(0, 0, 0, 0.58),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%, rgba(0, 0, 0, 0.18)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.16)) !important;
    opacity: 0.82 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: min(calc(100% - 24px), 1880px) !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    padding: 7px 12px 7px 230px !important;
    gap: 14px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a:not(.top-direct-contact) {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #d7e9f8 !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44) !important;
    opacity: 0.9 !important;
    white-space: nowrap !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group a:not(:last-child)::after,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group span:not(:last-child)::after {
    width: 1px !important;
    height: 24px !important;
    right: -7px !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.38), transparent) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.18) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-button {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.58) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.22) 48%, rgba(0, 0, 0, 0.1)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)) !important;
    color: #132a3f !important;
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: none !important;
    filter: none !important;
    white-space: nowrap !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 124px !important;
    padding: 0 22px !important;
    font-size: 0.82rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact {
    min-width: 142px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.02em !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a.top-direct-contact.top-direct-contact--call {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(226, 242, 253, 0.44) 52%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a.top-direct-contact.top-direct-contact--whatsapp,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a[href*="wa.me"].top-direct-contact {
    border-color: rgba(0, 0, 0, 0.62) !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(76, 229, 139, 0.98), rgba(19, 178, 94, 0.95) 54%, rgba(6, 104, 53, 0.98)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)) !important;
    box-shadow:
      0 12px 24px rgba(5, 107, 56, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.36),
      inset 0 -1px 0 rgba(0, 0, 0, 0.38),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher {
    top: 8px !important;
    left: 12px !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.58) !important;
    border-radius: 25px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.14)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.22)) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      inset 0 -1px 0 rgba(0, 0, 0, 0.38) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-button {
    min-width: 92px !important;
    padding: 5px 11px 5px 8px !important;
    font-size: 0.74rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.04em !important;
  }
}

@media screen and (max-width: 1600px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="mailto:"],
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="tel:"]:not(.top-direct-contact) {
    display: none !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar {
    min-height: 132px !important;
    padding-top: 0 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    width: 100% !important;
    min-height: 132px !important;
    padding: 52px 8px 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: static !important;
    transform: none !important;
    order: 1 !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    order: 2 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 126px !important;
    min-height: 36px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact {
    min-width: 0 !important;
    min-height: 44px !important;
    flex: 1 1 calc(50% - 6px) !important;
    padding-inline: 10px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher {
    top: 7px !important;
    left: 8px !important;
    transform: scale(0.78) !important;
    transform-origin: top left !important;
  }
}

/* Fix beheer op mobiele portrait: menu-knoppen altijd zichtbaar en meldingen compact. */
@media (max-width: 760px) {
  body.portal-page--admin .site-header,
  body.portal-page--finance .site-header,
  body.portal-page--documents .site-header {
    margin-bottom: 14px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
    width: min(calc(100vw - 18px), 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    overflow: visible !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
    order: 1 !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner {
    width: 160px !important;
    height: 82px !important;
    margin-inline: auto !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    max-height: 76px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text .client-access-link__eyebrow,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-trigger__eyebrow {
    font-size: 0.58rem !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text .client-access-link__label,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-trigger__label {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-links {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__form {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__toggle,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-mini-button {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__toggle span:first-child,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__count,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link strong {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 0.72rem !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
    order: 3 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .menu-toggle {
    display: none !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav {
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a.site-nav__cta {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 112px !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 0.82rem !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__panel {
    position: fixed !important;
    inset: 78px 10px auto 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, 520px) !important;
    overflow: auto !important;
    border-radius: 18px !important;
    z-index: 5000 !important;
  }
}

@media (max-width: 420px) {
  .content-section,
  .portal-section {
    padding-inline: 8px !important;
  }

  .tech-panel,
  .portal-section-card,
  .portal-case,
  .portal-mini-note {
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .site-nav.portal-nav > a,
  .button,
  .portal-inline-button,
  .portal-mini-button {
    font-size: 0.86rem !important;
  }
}

/* Mobiele beheerbalk: compact houden zodat meldingen niet half buiten beeld staan. */
@media (max-width: 760px) {
  body.portal-page .site-header .header-utility {
    overflow: visible !important;
  }

  body.portal-page .site-header .header-utility > .portal-session {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.portal-page .site-header .portal-session__text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    gap: 0 !important;
    text-align: left !important;
  }

  body.portal-page .site-header .portal-session__text .client-access-link__eyebrow {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0.16em !important;
  }

  body.portal-page .site-header .portal-session__text .client-access-link__label {
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.portal-page .site-header .portal-session__actions {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  body.portal-page .site-header .portal-blocked-menu,
  body.portal-page .site-header .portal-session__form {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.portal-page .site-header .portal-blocked-menu__toggle,
  body.portal-page .site-header .portal-mini-button {
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    padding: 0 7px !important;
    border-radius: 12px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.portal-page .site-header .portal-blocked-menu__toggle span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.portal-page .site-header .portal-blocked-menu__count {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 0.7rem !important;
  }

  body.portal-page .site-header .portal-blocked-menu__panel {
    position: fixed !important;
    inset: 92px 10px auto 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 520px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 420px) {
  body.portal-page .site-header .portal-session__actions {
    grid-template-columns: 1fr 1fr !important;
  }

  body.portal-page .site-header .portal-session__form {
    grid-column: 1 / -1 !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 18% 18%, rgba(141, 198, 245, 0.18), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(113, 174, 232, 0.14), transparent 20%),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(97, 184, 246, 0.08), transparent 20%),
    linear-gradient(180deg, #f8fbfe 0%, #edf4fb 44%, #e5eef7 100%);
}

body.is-portal-modal-open {
  overflow: hidden;
}

body.is-payment-modal-open {
  overflow: hidden;
}

.rs-language-switcher {
  position: fixed;
  top: 10px;
  left: 14px;
  z-index: 4200;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(121, 164, 208, 0.36);
  border-radius: 999px;
  background: rgba(249, 252, 255, 0.88);
  box-shadow: 0 14px 32px rgba(43, 68, 97, 0.14);
  backdrop-filter: blur(16px);
}

.rs-language-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px 5px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--silver-deep);
  font: 800 0.78rem/1 "Segoe UI Variable", "Segoe UI", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.rs-language-button:hover,
.rs-language-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(74, 147, 224, 0.42);
  background: rgba(235, 246, 255, 0.9);
  outline: none;
}

.rs-language-button.is-active {
  color: #0f4f91;
  border-color: rgba(74, 147, 224, 0.5);
  background: linear-gradient(180deg, rgba(235, 247, 255, 0.96), rgba(216, 236, 250, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 7px 18px rgba(47, 116, 199, 0.14);
}

.rs-lang-flag {
  width: 30px;
  height: 20px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid rgba(24, 55, 88, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 9px rgba(43, 68, 97, 0.14);
  transform-origin: left center;
}

.rs-language-button.is-active .rs-lang-flag {
  animation: rsFlagWave 1.35s ease-in-out infinite;
}

.rs-lang-flag--nl {
  background: linear-gradient(180deg, #ae1c28 0 33.33%, #ffffff 33.33% 66.66%, #21468b 66.66% 100%);
}

.rs-lang-flag--en {
  background:
    linear-gradient(90deg, transparent 41%, #ffffff 41% 59%, transparent 59%),
    linear-gradient(0deg, transparent 39%, #ffffff 39% 61%, transparent 61%),
    linear-gradient(90deg, transparent 45%, #c8102e 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 44%, #c8102e 44% 56%, transparent 56%),
    linear-gradient(35deg, transparent 43%, #ffffff 43% 48%, #c8102e 48% 52%, #ffffff 52% 57%, transparent 57%),
    linear-gradient(145deg, transparent 43%, #ffffff 43% 48%, #c8102e 48% 52%, #ffffff 52% 57%, transparent 57%),
    #012169;
}

.rs-lang-code {
  min-width: 20px;
}

@keyframes rsFlagWave {
  0%,
  100% {
    transform: perspective(80px) rotateY(-7deg) translateY(0);
  }

  50% {
    transform: perspective(80px) rotateY(9deg) translateY(-1px);
  }
}

@media (max-width: 720px) {
  .rs-language-switcher {
    top: 8px;
    left: 8px;
    gap: 4px;
    padding: 4px;
  }

  .rs-language-button {
    min-height: 30px;
    padding: 4px 8px 4px 5px;
    font-size: 0.68rem;
  }

  .rs-lang-flag {
    width: 25px;
    height: 17px;
  }
}

@media print {
  .rs-language-switcher {
    display: none !important;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(118, 145, 169, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 145, 169, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 84%);
  opacity: 0.46;
}

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(rgba(35, 50, 65, 0.34) 0.55px, transparent 0.55px);
  background-size: 6px 6px;
}

.portal-page--guest {
  --portal-tech-bg-size: cover;
  --portal-tech-bg-position: center center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 255, 0.9) 18%, rgba(224, 237, 249, 0.4) 48%, transparent 74%),
    linear-gradient(180deg, #f8fbff 0%, #ebf4fd 45%, #e1edf9 100%);
}

.portal-page--guest .page-noise {
  opacity: 0.05;
}

.scroll-top-button {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1200;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(72, 103, 135, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(224, 232, 239, 0.95));
  box-shadow:
    0 16px 28px rgba(55, 73, 91, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: var(--blue);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.92);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.scroll-top-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(97, 184, 246, 0.16), rgba(255, 255, 255, 0.12) 42%, rgba(181, 213, 242, 0.14));
  opacity: 0.92;
}

.scroll-top-button::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  opacity: 0.72;
}

.scroll-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
  border-color: rgba(47, 127, 224, 0.34);
  color: #0f5ebf;
  box-shadow:
    0 20px 34px rgba(47, 127, 224, 0.2),
    0 0 0 4px rgba(47, 127, 224, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  outline: none;
}

.scroll-top-button__icon {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 22px;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  transform: translateY(1px);
}

.scroll-top-button__icon::before,
.scroll-top-button__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  display: block;
}

.scroll-top-button__icon::before {
  top: 3px;
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  border-radius: 2px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}

.scroll-top-button__icon::after {
  top: 8px;
  width: 3px;
  height: 13px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button[disabled] {
  cursor: wait;
  opacity: 0.76;
}

img {
  max-width: none;
  display: block;
}

.top-toolbar__inner,
.hero-shell,
.callout-strip__inner,
.content-section,
.site-footer,
.footer-callout__link {
  width: min(calc(100% - 28px), var(--content-width));
  margin: 0 auto;
}

.top-toolbar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(149, 174, 201, 0.18);
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(236, 243, 249, 0.96));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.78);
}

.top-toolbar__inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #45596c;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.toolbar-group a,
.toolbar-group span {
  position: relative;
}

.toolbar-group a:not(:last-child)::after,
.toolbar-group span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 1px;
  height: 11px;
  background: rgba(69, 89, 108, 0.18);
  transform: translateY(-50%);
}

.status-pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(124, 155, 187, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(233, 241, 248, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(117, 176, 230, 0.05);
}

.status-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow:
    0 0 8px rgba(47, 116, 199, 0.18),
    0 0 0 3px rgba(140, 194, 241, 0.14);
  animation: pulseDot 2s ease-in-out infinite;
}

.site-header {
  position: relative;
  padding-top: 14px;
}

.header-shell {
  --accent-rgb: 40, 121, 215;
  --accent-text: #1b5d95;
  position: relative;
  width: min(calc(100% - 44px), var(--banner-width));
  margin: 0 auto;
  padding: 20px 24px 18px;
  border: 1px solid rgba(146, 170, 194, 0.26);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.99), rgba(234, 242, 249, 0.98)),
    radial-gradient(circle at 50% 18%, rgba(148, 201, 244, 0.2), transparent 30%),
    radial-gradient(circle at 14% 28%, rgba(132, 188, 237, 0.16), transparent 24%),
    radial-gradient(circle at 86% 24%, rgba(168, 215, 249, 0.12), transparent 20%);
  box-shadow:
    0 24px 56px rgba(68, 94, 120, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.header-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(160, 186, 211, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 186, 211, 0.12) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 18%, rgba(172, 205, 235, 0.2) 18.2%, transparent 18.6%),
    linear-gradient(180deg, transparent 0 68%, rgba(150, 184, 214, 0.14) 68.2%, transparent 68.6%);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.28));
  pointer-events: none;
  opacity: 0.9;
}

.header-shell::after {
  content: "";
  position: absolute;
  inset: auto 24px 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(88, 144, 204, 0.22), rgba(108, 188, 242, 0.62), rgba(88, 144, 204, 0.22), transparent);
}

.header-shell:not(.header-shell--portal) {
  --home-banner-bg-size: cover;
  --home-banner-bg-position: center center;
  border-color: rgba(151, 178, 204, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(236, 244, 251, 0.74)),
    linear-gradient(130deg, rgba(255, 255, 255, 0.18), transparent 36%, rgba(120, 175, 228, 0.12)),
    var(--rs-template-bg-image);
  background-position: center center, center center, var(--home-banner-bg-position);
  background-size: 100% 100%, 100% 100%, var(--home-banner-bg-size);
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow:
    0 26px 56px rgba(58, 82, 108, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.header-shell:not(.header-shell--portal)::before {
  background:
    linear-gradient(rgba(160, 186, 211, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 186, 211, 0.08) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, 0.22) 18.2%, transparent 18.6%),
    linear-gradient(180deg, rgba(247, 251, 255, 0.22), rgba(238, 246, 252, 0.16)),
    var(--rs-template-bg-image);
  background-position: center center, center center, center center, center center, var(--home-banner-bg-position);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%, var(--home-banner-bg-size);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  mask-image: none;
  opacity: 0.74;
}

.header-shell:not(.header-shell--portal)::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(95, 165, 226, 0.18), rgba(68, 145, 214, 0.82), rgba(95, 165, 226, 0.18), transparent);
}

.header-shell:not(.header-shell--portal) .header-main::before {
  inset: 14% 18% 18%;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.66), rgba(232, 243, 252, 0.28) 42%, transparent 74%);
  filter: blur(14px);
}

.header-shell:not(.header-shell--portal) .brand--banner img {
  filter:
    drop-shadow(0 20px 34px rgba(59, 103, 147, 0.18))
    drop-shadow(0 0 26px rgba(132, 189, 239, 0.22));
}

.header-shell:not(.header-shell--portal) .header-bottom {
  border-top-color: rgba(144, 175, 205, 0.24);
  backdrop-filter: blur(4px);
}

@media (min-aspect-ratio: 16/9) {
  .header-shell:not(.header-shell--portal) {
    --home-banner-bg-size: contain;
    --home-banner-bg-position: center center;
  }
}

@media (max-aspect-ratio: 11/10) {
  .header-shell:not(.header-shell--portal) {
    --home-banner-bg-size: contain;
    --home-banner-bg-position: center center;
  }
}

.header-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 152px;
}

.header-main::before {
  content: "";
  position: absolute;
  inset: 18% 26% 22%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(148, 201, 244, 0.32), rgba(148, 201, 244, 0.14) 34%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;
}

.brand--banner {
  width: min(100%, 320px);
  margin: 0 auto;
}

.brand--banner img {
  width: 100%;
  filter:
    drop-shadow(0 16px 30px rgba(69, 112, 158, 0.12))
    drop-shadow(0 0 18px rgba(129, 185, 235, 0.1));
}

.header-bottom {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(153, 178, 202, 0.18);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.header-utility {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.header-shell:not(.header-shell--portal) .header-utility {
  top: 22px;
  right: 24px;
}

.client-access-link {
  min-width: 178px;
  display: inline-grid;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(136, 166, 197, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(248, 251, 254, 0.98), rgba(226, 236, 245, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 28px rgba(72, 104, 136, 0.1);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.client-access-link:hover,
.client-access-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(96, 144, 196, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 30px rgba(72, 104, 136, 0.14),
    0 0 0 1px rgba(150, 201, 244, 0.08);
}

.client-access-link--active {
  border-color: rgba(90, 139, 191, 0.4);
  background:
    linear-gradient(180deg, rgba(245, 250, 254, 0.99), rgba(224, 235, 245, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 30px rgba(72, 104, 136, 0.12),
    0 0 0 1px rgba(150, 201, 244, 0.08);
}

.client-access-link__eyebrow,
.client-access-link__label {
  position: relative;
  z-index: 1;
}

.client-access-link__eyebrow {
  color: #7a9ec2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.client-access-link__label {
  color: #28496a;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-shell:not(.header-shell--portal) .site-nav {
  flex-wrap: nowrap;
}

.header-login-entry {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 18px;
}

.portal-trigger {
  min-width: 0;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 28px;
  border: 1px solid rgba(97, 145, 196, 0.34);
  border-radius: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background:
    linear-gradient(180deg, rgba(248, 251, 254, 0.98), rgba(225, 236, 246, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(150, 176, 201, 0.14),
    0 10px 22px rgba(67, 94, 120, 0.09);
  color: #2b4461;
  cursor: pointer;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.portal-trigger:hover,
.portal-trigger:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(101, 154, 209, 0.46);
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.99), rgba(230, 240, 248, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 26px rgba(67, 94, 120, 0.12),
    0 0 0 1px rgba(162, 202, 238, 0.12);
  outline: none;
}

.portal-trigger--current {
  border-color: rgba(101, 154, 209, 0.42);
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(229, 239, 248, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 24px rgba(67, 94, 120, 0.1);
}

.portal-trigger__eyebrow {
  display: none;
}

.portal-trigger__label {
  color: #28496a;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.site-nav a,
.button,
.filter-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(222, 232, 241, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 8px 18px rgba(62, 80, 98, 0.06);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}

.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid rgba(146, 170, 194, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(252, 254, 255, 0.96), rgba(226, 236, 245, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(154, 179, 203, 0.14),
    0 10px 22px rgba(68, 94, 120, 0.08);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
  isolation: isolate;
  transition:
    transform 220ms ease,
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease,
    color 260ms ease;
}

.site-nav a::before,
.site-nav a::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 15px;
  pointer-events: none;
  background: transparent;
  transition:
    opacity 240ms ease,
    border-color 240ms ease,
    transform 240ms ease;
  z-index: 2;
}

.site-nav a::before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  opacity: 0.9;
}

.site-nav a::after {
  inset: auto 14px 7px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(151, 188, 224, 0.22), transparent);
  opacity: 0.72;
}

.nav-core {
  position: absolute;
  inset: 4px;
  border-radius: 14px;
  z-index: 0;
  opacity: 0;
  transform: scale(0.985);
  background:
    linear-gradient(180deg, rgba(45, 116, 199, 0.98), rgba(36, 93, 165, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(16, 56, 103, 0.28),
    0 10px 22px rgba(47, 116, 199, 0.18);
  transition:
    opacity 360ms ease,
    transform 320ms ease,
    box-shadow 320ms ease;
}

.nav-core::before,
.nav-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.nav-core::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  filter: none;
  opacity: 1;
  animation: none;
}

.nav-core::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: none;
}

.nav-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28%;
  width: 42%;
  z-index: 3;
  opacity: 0.22;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0.82) 48%, rgba(218, 236, 252, 0.96) 56%, transparent 100%);
  filter: blur(0.5px);
  transform: translateX(-210%) skewX(-18deg);
  animation: navSilverSweep 8.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.nav-label {
  position: relative;
  z-index: 4;
  line-height: 1;
  color: #345273;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    color 260ms ease,
    letter-spacing 260ms ease,
    text-shadow 260ms ease;
}

.site-nav__cta {
  border-color: rgba(107, 145, 186, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(248, 251, 254, 0.98), rgba(228, 238, 247, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(68, 94, 120, 0.1) !important;
}

.site-nav__cta::before,
.site-nav__cta::after {
  border-color: rgba(255, 255, 255, 0.78);
}

.site-nav__cta .nav-core {
  background: linear-gradient(180deg, rgba(47, 116, 199, 0.98), rgba(35, 91, 161, 0.98));
}

.site-nav__cta .nav-sheen {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(241, 248, 255, 0.88) 48%, rgba(207, 227, 245, 0.98) 56%, transparent 100%);
}

.site-nav a:nth-child(2) .nav-sheen {
  animation-delay: 1.1s;
}

.site-nav a:nth-child(3) .nav-sheen {
  animation-delay: 2.2s;
}

.site-nav a:nth-child(4) .nav-sheen {
  animation-delay: 3.3s;
}

.site-nav a:nth-child(5) .nav-sheen {
  animation-delay: 4.4s;
}

.site-nav a:nth-child(6) .nav-sheen {
  animation-delay: 5.5s;
}

.button:hover,
.button:focus-visible,
.filter-button:hover,
.filter-button:focus-visible,
.filter-button.is-active {
  transform: translateY(-2px);
  color: var(--silver-deep);
  border-color: rgba(92, 145, 201, 0.38);
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(231, 239, 247, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 14px 26px rgba(68, 94, 120, 0.12),
    0 0 0 1px rgba(151, 188, 224, 0.08);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active {
  transform: translateY(-2px);
  border-color: rgba(94, 144, 197, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 28px rgba(68, 94, 120, 0.14),
    0 0 0 1px rgba(163, 202, 238, 0.1);
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before,
.site-nav a.is-active::before {
  opacity: 1;
  transform: none;
  border-color: rgba(255, 255, 255, 0.82);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.is-active::after {
  opacity: 0.92;
  transform: translateY(1px);
}

.site-nav a:hover .nav-core,
.site-nav a:focus-visible .nav-core,
.site-nav a.is-active .nav-core {
  opacity: 1;
  transform: scale(1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(16, 56, 103, 0.34),
    0 12px 24px rgba(47, 116, 199, 0.22);
}

.site-nav a:hover .nav-sheen,
.site-nav a:focus-visible .nav-sheen,
.site-nav a.is-active .nav-sheen {
  opacity: 0.16;
  transition: opacity 240ms ease;
}

.site-nav a:hover .nav-label,
.site-nav a:focus-visible .nav-label,
.site-nav a.is-active .nav-label {
  color: #f5fbff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(9, 35, 68, 0.32);
}

.site-nav__cta:hover .nav-label,
.site-nav__cta:focus-visible .nav-label {
  color: #ffffff;
}

.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.portal-modal[hidden] {
  display: none;
}

.portal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 37, 61, 0.26);
  backdrop-filter: blur(8px);
}

.portal-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  padding: 28px;
  --accent-rgb: 97, 184, 246;
  --accent-text: #2f74c7;
  box-shadow:
    0 28px 56px rgba(44, 70, 97, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.portal-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(143, 169, 194, 0.28);
  border-radius: 12px;
  background: rgba(250, 252, 254, 0.94);
  color: #5f7690;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.portal-modal__close:hover,
.portal-modal__close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(101, 154, 209, 0.38);
  color: #28496a;
  box-shadow: 0 10px 18px rgba(67, 94, 120, 0.12);
  outline: none;
}

.portal-modal__dialog h2 {
  margin: 0 0 12px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #203446;
}

.portal-modal__intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.portal-modal__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.portal-modal__choices--single {
  grid-template-columns: 1fr;
}

.portal-modal__form {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

.portal-modal__note {
  margin: 0;
}

.portal-modal__feedback {
  margin-top: 0;
}

.portal-modal__actions {
  margin-top: 4px;
}

.portal-modal__actions .button {
  width: 100%;
}

.portal-modal--locked .portal-modal__dialog {
  width: min(100%, 520px);
}

.portal-modal--notice .portal-modal__dialog {
  width: min(100%, 520px);
}

.portal-modal--notice .portal-modal__intro {
  max-width: 44ch;
}

.portal-modal--notice .portal-auth-note {
  margin-top: 18px;
}

.portal-modal--locked .portal-modal__intro,
.portal-modal--locked .portal-modal__footnote {
  max-width: 46ch;
}

.portal-choice {
  display: grid;
  gap: 8px;
  padding: 20px;
  width: 100%;
  border: 1px solid rgba(145, 171, 196, 0.26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(233, 241, 248, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(67, 94, 120, 0.08);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

button.portal-choice {
  appearance: none;
  font: inherit;
}

.portal-choice--guest {
  border-color: rgba(129, 156, 181, 0.22);
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(236, 243, 249, 0.96));
}

.portal-choice:hover,
.portal-choice:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(101, 154, 209, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 30px rgba(67, 94, 120, 0.12),
    0 0 0 1px rgba(162, 202, 238, 0.1);
  outline: none;
}

.portal-choice__eyebrow {
  color: #87a6c6;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portal-choice__title {
  color: #28496a;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.portal-choice__text {
  color: var(--muted);
  line-height: 1.62;
}

.portal-modal__footnote {
  margin: 18px 0 0;
  color: #687d92;
  font-size: 0.9rem;
  line-height: 1.6;
}

.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
}

.payment-modal[hidden] {
  display: none;
}

.payment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 32, 51, 0.42);
  backdrop-filter: blur(10px);
}

.payment-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  padding: 26px;
  border: 1px solid rgba(156, 178, 200, 0.26);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(253, 254, 255, 0.98), rgba(241, 247, 252, 0.97));
  box-shadow:
    0 28px 64px rgba(31, 49, 70, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.payment-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(143, 169, 194, 0.28);
  border-radius: 12px;
  background: rgba(250, 252, 254, 0.94);
  color: #5f7690;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.payment-modal__close:hover,
.payment-modal__close:focus-visible {
  border-color: rgba(101, 154, 209, 0.38);
  color: #28496a;
  outline: none;
  box-shadow: 0 10px 18px rgba(67, 94, 120, 0.12);
}

.payment-modal__dialog h2 {
  margin: 0 0 10px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 1.45rem + 0.9vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #203446;
}

.payment-modal__intro,
.payment-modal__summary-note,
.payment-modal__scan-note {
  margin: 0;
  color: #5c7187;
  line-height: 1.6;
}

.payment-modal__content {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(220px, 0.84fr);
  gap: 16px;
  align-items: start;
}

.payment-modal__qr-panel,
.payment-modal__summary {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(122, 142, 163, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.payment-modal__qr-panel {
  justify-items: center;
  text-align: center;
}

.payment-modal__qr {
  width: 220px;
  min-height: 220px;
}

.payment-modal__detail {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(124, 145, 166, 0.12);
}

.payment-modal__detail:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.payment-modal__detail span {
  color: #5d7a98;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.payment-modal__detail strong {
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.payment-modal__cta {
  min-width: min(100%, 280px);
}

@media (max-width: 760px) {
  .payment-modal__content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .payment-modal {
    padding: 16px;
  }

  .payment-modal__dialog {
    padding: 22px 18px 18px;
    border-radius: 22px;
  }

  .payment-modal__qr-panel,
  .payment-modal__summary {
    padding: 14px;
    border-radius: 16px;
  }

  .payment-modal__qr {
    width: 180px;
    min-height: 180px;
  }

  .payment-modal__cta {
    width: 100%;
  }
}

.menu-toggle {
  display: none;
}

.hero-section {
  position: relative;
  overflow: clip;
  padding: 14px 0 18px;
}
.hero-install-note {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.85;
}

.hero-tech-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-tech-lines span {
  position: absolute;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 168, 223, 0.36), transparent);
  box-shadow: 0 0 4px rgba(111, 168, 223, 0.08);
}

.hero-tech-lines span:nth-child(1) {
  top: 12%;
  left: 4%;
  width: 40%;
  animation: driftLine 8s ease-in-out infinite;
}

.hero-tech-lines span:nth-child(2) {
  top: 25%;
  right: 8%;
  width: 28%;
  animation: driftLine 10s ease-in-out infinite reverse;
}

.hero-tech-lines span:nth-child(3) {
  bottom: 14%;
  left: 18%;
  width: 36%;
  animation: driftLine 9s ease-in-out infinite;
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 20px;
  align-items: stretch;
}

.tech-panel {
  --accent-rgb: 40, 121, 215;
  --accent-text: #1b5d95;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(154, 178, 201, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 251, 0.98));
  box-shadow: var(--shadow);
}

.tech-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.84) 36%, transparent 62%);
  opacity: 0;
  transform: translateX(-120%);
  transition: transform 680ms ease, opacity 260ms ease;
  pointer-events: none;
}

.tech-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb), 0.08), transparent 52%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.tech-panel > * {
  position: relative;
  z-index: 1;
}

.tech-panel:hover::before,
.tech-panel:focus-within::before {
  opacity: 1;
  transform: translateX(120%);
}

.tech-panel:hover::after,
.tech-panel:focus-within::after {
  opacity: 1;
}

.panel-corners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.panel-corners::before,
.panel-corners::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}

.panel-corners::before {
  top: 12px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}

.panel-corners::after {
  right: 12px;
  bottom: 12px;
  border-left: 0;
  border-top: 0;
}

.hero-copy,
.hero-panel,
.feature-card,
.project-card,
.process-card,
.contact-copy,
.contact-form,
.appointment-form,
.footer-columns,
.footer-callout__link {
  transition:
    transform 260ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

[data-tilt]:hover,
[data-tilt]:focus-within {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow:
    var(--shadow-strong),
    0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.hero-copy {
  padding: 40px;
  --accent-rgb: 97, 184, 246;
  --accent-text: #2f74c7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.hero-copy::before {
  opacity: 1;
  transform: translateX(0);
  background:
    linear-gradient(90deg, rgba(97, 184, 246, 0.07), transparent 20%),
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.72) 34%, transparent 60%);
}

.section-kicker,
.project-label,
.panel-title,
.card-code,
.hero-intro {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.section-kicker,
.panel-title,
.card-code {
  color: #6e92b5;
}

.hero-intro {
  color: var(--silver-dark);
}

.hero-copy h1,
.section-heading h2,
.contact-copy h2 {
  margin: 0 0 16px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #203446;
  transition: color 220ms ease;
}

.hero-copy h1 {
  max-width: 11ch;
  font-size: clamp(3.2rem, 2.5rem + 2vw, 5.4rem);
  text-wrap: balance;
}

.hero-text,
.section-heading p,
.feature-card p,
.project-card p,
.process-card p,
.faq-item p,
.contact-copy p,
.contact-box p,
.footer-columns p,
.footer-callout__link span {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
  transition: color 220ms ease;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button-primary {
  border-color: rgba(92, 145, 201, 0.36);
  background: linear-gradient(180deg, #4d8ddd, #2f74c7);
  color: #ffffff;
}

.button-primary:hover,
.button-primary:focus-visible {
  color: #ffffff;
  border-color: rgba(114, 166, 221, 0.44);
  background: linear-gradient(180deg, #5b98e5, #2d6fc0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 30px rgba(47, 116, 199, 0.22),
    0 0 0 1px rgba(151, 188, 224, 0.12);
}

.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.28) 42%, rgba(180, 218, 248, 0.18) 52%, transparent 66%);
  transform: translateX(-160%);
  animation: buttonSweep 3.8s linear infinite;
  pointer-events: none;
}

.button-primary::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(191, 227, 253, 0.88), transparent);
  box-shadow: 0 0 10px rgba(97, 184, 246, 0.16);
  animation: navLinePulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

.button-secondary {
  color: var(--ink);
}

.hero-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.hero-point {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid rgba(132, 143, 153, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 238, 238, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-point::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(97, 184, 246, 0.76), transparent);
}

.hero-point span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #4d7cad;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-point strong {
  display: block;
  margin-bottom: 8px;
  color: var(--silver-deep);
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.hero-point p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.hero-panel {
  padding: 30px;
  --accent-rgb: 40, 121, 215;
  --accent-text: #1b5d95;
  min-height: 100%;
}

.hero-panel--display {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 246, 251, 0.98) 62%, rgba(234, 241, 247, 0.98));
}

.visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.visual-title {
  display: block;
  margin-top: 4px;
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}

.visual-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(110, 136, 160, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #4d7cad;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.visual-core {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.visual-ring {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(110, 136, 160, 0.16);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98), rgba(233, 235, 236, 0.96));
  box-shadow:
    inset 0 0 0 18px rgba(255, 255, 255, 0.72),
    0 16px 36px rgba(58, 77, 96, 0.12);
}

.visual-ring::before,
.visual-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(47, 127, 224, 0.18);
  border-radius: 50%;
  animation: spinSlow 14s linear infinite;
}

.visual-ring::after {
  inset: 36px;
  animation-direction: reverse;
  animation-duration: 10s;
}

.visual-ring__inner {
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(110, 136, 160, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 239, 243, 0.96));
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.52);
}

.visual-ring__inner strong {
  display: block;
  color: var(--silver-deep);
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.visual-ring__inner span {
  margin-top: 4px;
  color: var(--silver-dark);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.visual-stats {
  display: grid;
  gap: 12px;
}

.visual-stat,
.visual-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(128, 139, 149, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 238, 238, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.visual-stat::before,
.visual-card::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(97, 184, 246, 0.72), transparent);
}

.visual-stat span,
.visual-card span,
.faq-item summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #4d7cad;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.visual-stat strong,
.visual-card strong,
.feature-card h3,
.project-card h3,
.process-card h3,
.faq-item summary,
.footer-columns h3 {
  display: block;
  margin: 0 0 8px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  color: var(--silver-deep);
  letter-spacing: -0.02em;
  transition: color 220ms ease;
}

.visual-stat p,
.visual-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.visual-stat:hover,
.visual-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 127, 224, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 16px 24px rgba(47, 127, 224, 0.08);
}

.visual-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.visual-track span {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(190, 211, 232, 0.34), rgba(97, 184, 246, 0.9), rgba(190, 211, 232, 0.34));
  box-shadow: 0 0 10px rgba(97, 184, 246, 0.12);
  animation: pulseTrack 2.8s ease-in-out infinite;
}

.visual-track span:nth-child(2) { animation-delay: 0.2s; }
.visual-track span:nth-child(3) { animation-delay: 0.4s; }
.visual-track span:nth-child(4) { animation-delay: 0.6s; }

.visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.visual-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.visual-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(110, 136, 160, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--silver-dark);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.callout-strip {
  padding: 18px 0 0;
}

.callout-strip__inner {
  padding: 24px;
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.callout-strip__inner strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.45rem;
  color: #203446;
  transition: color 220ms ease;
}

.content-section {
  position: relative;
  padding: 54px 0 0;
}

.section-soft::before {
  content: "";
  position: absolute;
  inset: 18px 0 0;
  background: linear-gradient(180deg, rgba(191, 214, 239, 0.24), transparent);
  z-index: -1;
}

.section-heading {
  margin-bottom: 24px;
}

.section-heading h2 {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 3.2rem);
}

.service-grid,
.project-grid,
.process-grid,
.footer-columns {
  display: grid;
  gap: 18px;
}

.top-direct-contact {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(40, 109, 178, 0.28);
  border-radius: 999px;
  color: #173a5b;
  font-weight: 900;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(224, 238, 250, 0.9));
  box-shadow: 0 10px 20px rgba(31, 79, 122, 0.1);
}

.top-direct-contact--call {
  color: #ffffff;
  border-color: rgba(14, 82, 148, 0.54);
  background: linear-gradient(180deg, #348bdc, #1267af);
}

.top-direct-contact--whatsapp {
  color: #ffffff;
  border-color: rgba(18, 128, 74, 0.64);
  background: linear-gradient(180deg, #32d279, #15985a);
  text-shadow: 0 1px 0 rgba(5, 58, 32, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 22px rgba(19, 128, 74, 0.18);
}

.service-grid,
.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-card,
.project-card,
.process-card {
  padding: 24px;
}

.feature-card:nth-child(1) { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.feature-card:nth-child(2) { --accent-rgb: 88, 102, 116; --accent-text: #51606f; }
.feature-card:nth-child(3) { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.feature-card:nth-child(4) { --accent-rgb: 185, 146, 82; --accent-text: #816231; }

.project-card:nth-child(1) { --accent-rgb: 88, 102, 116; --accent-text: #51606f; }
.project-card:nth-child(2) { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.project-card:nth-child(3) { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.project-card:nth-child(4) { --accent-rgb: 185, 146, 82; --accent-text: #816231; }

.process-card:nth-child(1) { --accent-rgb: 88, 102, 116; --accent-text: #51606f; }
.process-card:nth-child(2) { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.process-card:nth-child(3) { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.process-card:nth-child(4) { --accent-rgb: 185, 146, 82; --accent-text: #816231; }

.feature-card:hover,
.project-card:hover,
.process-card:hover,
.contact-copy:hover,
.contact-form:hover,
.appointment-form:hover,
.footer-callout__link:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--accent-rgb), 0.06));
}

.hero-copy:hover .section-kicker,
.hero-copy:hover .hero-intro,
.hero-copy:hover h1,
.hero-copy:hover .hero-text,
.hero-panel:hover .panel-title,
.hero-panel:hover .visual-title,
.hero-panel:hover .visual-status,
.hero-panel:hover .visual-pill,
.callout-strip__inner:hover strong,
.callout-strip__inner:hover p,
.feature-card:hover .card-code,
.feature-card:hover p,
.project-card:hover .project-label,
.project-card:hover p,
.process-card:hover p,
.contact-copy:hover .section-kicker,
.contact-copy:hover h2,
.contact-copy:hover p,
.contact-copy:hover .contact-box p,
.contact-form:hover .field span,
.appointment-form:hover .field span,
.appointment-form:hover h3,
.appointment-form:hover .appointment-intro,
.appointment-form:hover .appointment-note span,
.appointment-form:hover .appointment-note strong,
.footer-callout__link:hover strong,
.footer-callout__link:hover span,
.footer-columns:hover h3,
.footer-columns:hover p,
.footer-columns:hover li {
  color: var(--accent-text);
}

.card-hoverline {
  width: 44%;
  height: 3px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.08));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.16);
  transition: width 220ms ease, box-shadow 220ms ease;
}

.feature-card:hover .card-hoverline,
.feature-card:focus-within .card-hoverline {
  width: 86%;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.34);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.filter-button {
  cursor: pointer;
  color: var(--ink);
}

.project-label {
  color: #4d7cad;
}

.project-card {
  overflow: hidden;
  width: 100%;
  max-width: 340px;
}

.project-media {
  position: relative;
  overflow: hidden;
  margin: -8px -8px 18px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(232, 243, 253, 0.92), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at 20% 15%, rgba(47, 127, 224, 0.18), transparent 32%);
  aspect-ratio: 16 / 9;
  max-height: 190px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 28px rgba(58, 77, 96, 0.07);
}

.project-media--gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  aspect-ratio: 16 / 9;
}

.project-media--gallery::after {
  display: none;
}

.project-media::after {
  content: "";
  position: absolute;
  inset: auto 18px 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.75), transparent);
}

.project-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform 420ms ease;
}

.project-media--gallery img {
  border-radius: 12px;
}

.project-card:hover .project-media img,
.project-card:focus-within .project-media img {
  transform: none;
}

.project-media--placeholder {
  display: grid;
  place-items: center;
}

.project-media--placeholder span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  border: 1px solid rgba(47, 127, 224, 0.22);
  background: rgba(255, 255, 255, 0.68);
  color: rgba(47, 127, 224, 0.88);
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  box-shadow: 0 18px 35px rgba(47, 127, 224, 0.1);
}

.project-card--empty {
  grid-column: 1 / -1;
  min-height: 170px;
}

.project-hovermeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  opacity: 0.86;
  transition: opacity 220ms ease, transform 220ms ease;
}

.project-hovermeta span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgb(var(--accent-rgb));
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.12);
}

.project-card:hover .project-hovermeta,
.project-card:focus-within .project-hovermeta {
  opacity: 1;
  transform: translateY(-2px);
}

.project-card:hover .project-hovermeta span,
.project-card:focus-within .project-hovermeta span {
  border-color: rgba(var(--accent-rgb), 0.36);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.18);
}

.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-grid--linked {
  position: relative;
}

.process-grid--linked::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 52px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(47, 127, 224, 0.34), rgba(185, 146, 82, 0.12), transparent);
  pointer-events: none;
}

.process-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.78), rgba(var(--accent-rgb), 0.96));
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
  border-radius: 14px;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: background 220ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] summary,
.faq-item:hover summary {
  background: rgba(223, 234, 245, 0.62);
  color: var(--accent-text);
}

.faq-item p {
  padding: 0 20px 20px;
}

.faq-item:hover p {
  color: var(--accent-text);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: start;
  margin-top: 14px;
}

.contact-stack {
  display: grid;
  gap: 14px;
}

.contact-switcher {
  padding: 10px 12px;
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.contact-switcher__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contact-tab {
  min-height: 38px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(110, 130, 150, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 234, 242, 0.96));
  color: #34404c;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    color 220ms ease;
}

.contact-tab::before {
  content: "";
  position: absolute;
  inset: auto 12px 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(97, 184, 246, 0.9), transparent);
  opacity: 0.4;
  transition: opacity 220ms ease;
}

.contact-tab:hover,
.contact-tab:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(47, 127, 224, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 22px rgba(47, 127, 224, 0.08);
}

.contact-tab.is-active {
  border-color: rgba(47, 127, 224, 0.4);
  background:
    radial-gradient(circle at 50% 25%, rgba(132, 221, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(241, 247, 253, 0.99), rgba(223, 234, 244, 0.97));
  color: #1f4f81;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 24px rgba(47, 127, 224, 0.1),
    0 0 0 1px rgba(132, 221, 255, 0.08);
}

.contact-tab.is-active::before {
  opacity: 1;
}

.contact-tab--link {
  border-color: rgba(47, 127, 224, 0.26);
  background:
    linear-gradient(180deg, rgba(238, 247, 255, 0.98), rgba(221, 236, 249, 0.96));
  color: #1f5a8f;
}

.contact-panel-group {
  position: relative;
}

.contact-panel {
  margin: 0;
}

.contact-panel[hidden] {
  display: none;
}

.contact-copy,
.contact-form,
.appointment-form {
  padding: 26px;
}

.contact-copy { --accent-rgb: 88, 102, 116; --accent-text: #51606f; }
.contact-form { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.appointment-form { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }
.contact-copy { align-self: start; }

.contact-form h3,
.appointment-form h3,
.booking-shell h1 {
  margin: 0 0 14px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #203446;
}

.contact-box {
  margin-top: 24px;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(126, 148, 169, 0.18);
  border-radius: 12px;
  background: rgba(248, 247, 243, 0.88);
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field span {
  color: #4d7cad;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field-hint {
  color: #6b7f92;
  font-size: 0.74rem;
  line-height: 1.5;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(122, 146, 169, 0.22);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  outline: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(95, 114, 132, 0.62);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(47, 127, 224, 0.44);
  box-shadow: 0 0 0 1px rgba(47, 127, 224, 0.12), 0 0 18px rgba(47, 127, 224, 0.08);
}

.appointment-intro {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.72;
}

.appointment-note,
.booking-summary div {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(126, 148, 169, 0.18);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
}

.appointment-note {
  margin: 4px 0 18px;
}

.appointment-note strong,
.booking-summary strong {
  color: #28445f;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.appointment-note span,
.booking-summary span,
.booking-helper,
.booking-alert {
  color: var(--muted);
  line-height: 1.68;
}

.booking-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.booking-page-main {
  padding: 56px 0 72px;
}

.booking-shell {
  width: min(calc(100% - 28px), 760px);
  margin: 0 auto;
  padding: 30px;
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.booking-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.booking-actions form {
  margin: 0;
}

.booking-actions--choice {
  align-items: center;
}

.booking-confirm-terms {
  margin: 0 0 12px;
  border-color: rgba(196, 139, 32, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 251, 236, 0.98), rgba(255, 243, 204, 0.9));
  color: #4d3912;
}

.booking-confirm-terms span {
  font-weight: 800;
  line-height: 1.5;
}

.booking-helper {
  margin-top: 14px;
}

.booking-alert {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(185, 146, 82, 0.26);
  border-radius: 12px;
  background: rgba(255, 247, 232, 0.78);
  color: #675133;
}

.booking-helper--compact {
  font-size: 0.92rem;
}

.booking-reschedule-card {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(105, 139, 176, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(126, 190, 226, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 246, 250, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.booking-reschedule-card h2 {
  margin: 0 0 8px;
  color: #203446;
}

.booking-reschedule-form {
  margin-top: 14px;
}

.booking-reschedule-picker {
  max-height: 380px;
  overflow: auto;
  padding-right: 4px;
}

.planning-reschedule-notice {
  margin-bottom: 18px;
}

.login-hero {
  padding-top: 20px;
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 22px;
  align-items: start;
}

.login-copy,
.login-card {
  padding: 28px;
}

.login-copy { --accent-rgb: 88, 102, 116; --accent-text: #51606f; }
.login-card { --accent-rgb: 47, 127, 224; --accent-text: #1b5d95; }

.login-copy h1,
.login-card h2 {
  margin: 0 0 16px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #203446;
}

.login-copy p,
.login-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.login-points {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.login-points article {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(126, 148, 169, 0.18);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
}

.login-points strong {
  color: #28445f;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.login-card .field:last-of-type {
  margin-bottom: 8px;
}

.login-card .appointment-note {
  margin-top: 18px;
}

.portal-auth-section {
  padding-top: 28px;
  padding-bottom: 10px;
}

.portal-auth-shell {
  width: min(calc(100% - 28px), 820px);
  margin: 0 auto;
}

.portal-page--guest .header-shell--portal {
  border-color: rgba(171, 194, 216, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 244, 251, 0.86)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 32%, rgba(151, 191, 232, 0.12)),
    url("assets/portal-frost-tech.svg");
  background-position: center center, center center, var(--portal-tech-bg-position);
  background-size: 100% 100%, 100% 100%, var(--portal-tech-bg-size);
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow:
    0 22px 48px rgba(62, 86, 111, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.portal-page--guest .header-shell--portal::before {
  background:
    linear-gradient(rgba(160, 186, 211, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 186, 211, 0.1) 1px, transparent 1px),
    linear-gradient(112deg, transparent 0 18%, rgba(255, 255, 255, 0.28) 18.2%, transparent 18.7%),
    url("assets/portal-frost-tech.svg");
  background-position: center center, center center, center center, var(--portal-tech-bg-position);
  background-size: 44px 44px, 44px 44px, 100% 100%, var(--portal-tech-bg-size);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  opacity: 0.58;
  mask-image: none;
}

.portal-page--guest .header-shell--portal::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(128, 190, 240, 0.32), rgba(88, 161, 227, 0.78), rgba(128, 190, 240, 0.32), transparent);
}

.portal-page--guest .portal-auth-section {
  padding-top: 34px;
  padding-bottom: 26px;
}

.portal-page--guest .portal-auth-shell {
  position: relative;
  padding: clamp(12px, 2.8vw, 26px);
  border: 1px solid rgba(176, 198, 219, 0.38);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(235, 245, 252, 0.22)),
    url("assets/portal-frost-tech.svg");
  background-position: center center, var(--portal-tech-bg-position);
  background-size: 100% 100%, var(--portal-tech-bg-size);
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    0 30px 72px rgba(54, 80, 108, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  overflow: hidden;
  isolation: isolate;
}

@media (min-aspect-ratio: 16/9) {
  .portal-page--guest {
    --portal-tech-bg-size: 100% auto;
    --portal-tech-bg-position: center center;
  }
}

@media (max-aspect-ratio: 11/10) {
  .portal-page--guest {
    --portal-tech-bg-size: auto 100%;
    --portal-tech-bg-position: 68% center;
  }
}

@media (max-width: 980px) {
  .portal-page--guest {
    --portal-tech-bg-size: auto 100%;
    --portal-tech-bg-position: 70% center;
  }
}

@media (max-width: 640px) {
  .portal-page--guest {
    --portal-tech-bg-size: auto 100%;
    --portal-tech-bg-position: 74% center;
  }
}

@media (max-width: 420px) {
  .portal-page--guest {
    --portal-tech-bg-size: auto 100%;
    --portal-tech-bg-position: 78% center;
  }
}

.portal-page--guest .portal-auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78) 28%, rgba(244, 249, 255, 0.58) 50%, rgba(229, 240, 249, 0.18) 72%, transparent 84%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(220, 234, 247, 0.08));
}

.portal-page--guest .portal-auth-shell::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 26%, transparent 74%, rgba(255, 255, 255, 0.1));
}

.portal-auth-card {
  padding: clamp(24px, 4vw, 40px);
  border-radius: 24px;
  border: 1px solid rgba(176, 194, 212, 0.42);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 56px rgba(60, 81, 102, 0.1);
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.portal-auth-card.tech-panel::before,
.portal-auth-card.tech-panel::after,
.portal-auth-card .panel-corners {
  display: none;
}

.portal-page--guest .portal-auth-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-color: rgba(184, 201, 218, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 254, 0.92));
  box-shadow:
    0 28px 62px rgba(60, 83, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.portal-page--guest .portal-auth-card.tech-panel::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 14%, rgba(255, 255, 255, 0.74) 18%, transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(103, 179, 246, 0.14), transparent 24%),
    radial-gradient(circle at 10% 82%, rgba(255, 255, 255, 0.9), transparent 20%);
  opacity: 0.92;
  transform: none;
}

.portal-page--guest .portal-auth-card.tech-panel::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 84% 22%, rgba(84, 155, 228, 0.14), transparent 28%);
  opacity: 1;
}

.portal-auth-card h1 {
  margin: 0 0 12px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #203446;
}

#account-activeren {
  scroll-margin-top: 18px;
}

.portal-auth-card > p {
  margin: 0;
  color: var(--muted);
  max-width: 42rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.portal-auth-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 520px);
  margin-top: 28px;
  padding: 4px;
  border: 1px solid rgba(125, 146, 167, 0.18);
  border-radius: 16px;
  background: #f1f5f8;
}

.portal-page--guest .portal-auth-switch {
  border-color: rgba(159, 184, 207, 0.26);
  background: rgba(238, 244, 250, 0.88);
  backdrop-filter: blur(8px);
}

.portal-auth-tab {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #5a6f82;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.portal-auth-tab.is-active {
  background: #ffffff;
  color: #203446;
  box-shadow: 0 8px 18px rgba(58, 79, 99, 0.08);
}

.portal-page--guest .portal-auth-tab.is-active {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(64, 88, 112, 0.12);
}

.portal-auth-panels {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(184, 199, 214, 0.5);
}

.portal-page--guest .portal-auth-panels {
  border-top-color: rgba(176, 196, 214, 0.56);
}

.portal-auth-panel {
  display: grid;
  gap: 18px;
}

.portal-auth-panel[hidden] {
  display: none !important;
}

.portal-auth-panel h2 {
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
  color: #203446;
  letter-spacing: -0.03em;
}

.portal-auth-panel > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.portal-auth-form {
  display: grid;
  gap: 18px;
}

.portal-auth-form .field {
  margin-bottom: 0;
}

.portal-auth-form .field input {
  min-height: 56px;
  border-radius: 14px;
  background: #ffffff;
}

.portal-auth-form--two-factor {
  max-width: 420px;
  gap: 14px;
}

.portal-auth-form--two-factor .login-actions {
  align-items: center;
}

.portal-inline-link {
  color: #315f89;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.portal-inline-link:hover,
.portal-inline-link:focus-visible {
  color: #123557;
}

.registration-consent-box {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(64, 129, 198, 0.18);
  border-radius: 14px;
  background: rgba(240, 248, 255, 0.74);
  color: #415b73;
  font-size: 0.9rem;
  line-height: 1.45;
}

.registration-consent-box input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.password-live-feedback {
  display: grid;
  gap: 12px;
  margin-top: -4px;
}

.password-feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.password-feedback-row strong {
  color: #28445f;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.password-feedback-row span {
  color: #5b7084;
  font-size: 0.86rem;
  text-align: right;
}

.password-match-indicator,
.password-strength-meter {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(194, 207, 219, 0.54);
  border-radius: 14px;
  background: #f9fbfd;
}

.password-match-indicator__track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(174, 188, 203, 0.28);
}

.password-match-indicator__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: rgba(147, 169, 191, 0.62);
  transition:
    width 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.password-match-indicator[data-password-match-state="match"] .password-match-indicator__fill {
  width: 100%;
  background: linear-gradient(90deg, #4be38f, #79ffb1);
  box-shadow:
    0 0 0 1px rgba(66, 219, 135, 0.26),
    0 0 14px rgba(84, 244, 161, 0.72),
    0 0 28px rgba(84, 244, 161, 0.38);
}

.password-match-indicator[data-password-match-state="mismatch"] .password-match-indicator__fill {
  width: 100%;
  background: linear-gradient(90deg, #e17878, #f09999);
  box-shadow: 0 0 0 1px rgba(225, 120, 120, 0.2);
}

.password-strength-meter__bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.password-strength-meter__bars span {
  display: block;
  height: 10px;
  border-radius: 999px;
  opacity: 0.24;
  transform: scaleX(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.password-strength-meter__bars span:nth-child(1) {
  background: #df7676;
}

.password-strength-meter__bars span:nth-child(2) {
  background: #efc158;
}

.password-strength-meter__bars span:nth-child(3) {
  background: #57cf86;
}

.password-strength-meter[data-password-strength-state="weak"] .password-strength-meter__bars span:nth-child(1),
.password-strength-meter[data-password-strength-state="medium"] .password-strength-meter__bars span:nth-child(-n + 2),
.password-strength-meter[data-password-strength-state="strong"] .password-strength-meter__bars span:nth-child(-n + 3) {
  opacity: 1;
  transform: scaleX(1);
}

.password-strength-meter[data-password-strength-state="strong"] .password-strength-meter__bars span:nth-child(3) {
  box-shadow: 0 0 12px rgba(87, 207, 134, 0.42);
}

.portal-auth-card .button {
  min-height: 50px;
  border-radius: 14px;
}

.portal-auth-card .button::before,
.portal-auth-card .button::after {
  display: none;
}

.portal-auth-card .button-primary {
  border-color: #203446;
  background: #203446;
  box-shadow: none;
}

.portal-auth-card .button-primary:hover,
.portal-auth-card .button-primary:focus-visible {
  border-color: #2a4967;
  background: #2a4967;
  box-shadow: none;
}

.portal-auth-card .button-secondary {
  border-color: rgba(147, 169, 191, 0.46);
  background: #ffffff;
  color: #203446;
  box-shadow: none;
}

.portal-auth-card .button-secondary:hover,
.portal-auth-card .button-secondary:focus-visible {
  border-color: rgba(113, 139, 165, 0.56);
  background: #f7fafc;
  box-shadow: none;
}

.portal-auth-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(194, 207, 219, 0.54);
  border-radius: 14px;
  background: #f7fafc;
}

.portal-auth-note strong {
  color: #28445f;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portal-auth-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.portal-page--guest .portal-auth-note {
  border-color: rgba(190, 205, 220, 0.56);
  background: rgba(247, 251, 255, 0.78);
  backdrop-filter: blur(5px);
}

.portal-auth-card .login-actions {
  margin-top: 6px;
}

@media (max-width: 640px) {
  .portal-auth-switch {
    grid-template-columns: 1fr;
  }

  .portal-auth-card .login-actions {
    flex-direction: column;
  }

  .portal-auth-card .button {
    width: 100%;
  }

  .password-feedback-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .password-feedback-row span {
    text-align: left;
  }
}

.portal-session {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(92, 117, 141, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 238, 244, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 20px rgba(61, 80, 98, 0.08);
}

.portal-session__text {
  display: grid;
  gap: 2px;
}

.portal-session__form {
  margin: 0;
}

.portal-session__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-page .site-header,
.portal-page .header-shell--portal,
.portal-page .header-utility,
.portal-page .portal-session,
.portal-page .portal-session__actions,
.portal-page .portal-header-links {
  position: relative;
  z-index: 2600;
  overflow: visible;
}

.portal-modal {
  z-index: 5200;
}

.portal-blocked-menu {
  position: relative;
}

.portal-blocked-menu__toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(147, 169, 191, 0.46);
  border-radius: 12px;
  background: #ffffff;
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.portal-blocked-menu__toggle > span:first-child {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.portal-blocked-menu__toggle em,
.portal-header-link em {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: #2f5f86;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.portal-blocked-menu__toggle::-webkit-details-marker {
  display: none;
}

.portal-blocked-menu__toggle:hover,
.portal-blocked-menu__toggle:focus-visible,
.portal-blocked-menu[open] .portal-blocked-menu__toggle {
  border-color: rgba(113, 139, 165, 0.56);
  background: #f7fafc;
  box-shadow: 0 10px 18px rgba(67, 94, 120, 0.08);
  outline: none;
}

.portal-blocked-menu__count {
  min-width: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(235, 243, 251, 0.96);
  color: #24507b;
  font-size: 0.72rem;
}

.portal-blocked-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 3700;
  width: min(460px, calc(100vw - 44px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(176, 194, 212, 0.46);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 253, 0.96));
  box-shadow:
    0 24px 40px rgba(56, 79, 102, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.portal-page .site-header .portal-blocked-menu,
.portal-page .site-header .portal-blocked-menu[open],
.portal-page .site-header .portal-session,
.portal-page .site-header .portal-session__actions,
.portal-page .site-header .portal-header-links,
.portal-page .site-header .header-utility,
.portal-page .site-header .header-shell--portal {
  overflow: visible !important;
}

.portal-page .site-header .portal-blocked-menu[open] {
  position: relative !important;
  z-index: 9000 !important;
}

.portal-page .site-header .portal-blocked-menu[open] > .portal-blocked-menu__panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9001 !important;
}

.portal-blocked-menu[open] {
  z-index: 3600;
}

.portal-blocked-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-blocked-menu__header strong {
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.96rem;
}

.portal-blocked-menu__header span,
.portal-blocked-menu__empty {
  color: #5b7186;
  font-size: 0.84rem;
  line-height: 1.55;
}

.portal-blocked-menu__empty {
  margin: 0;
}

.portal-blocked-menu__list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
}

.portal-blocked-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(186, 201, 216, 0.56);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
}

.portal-blocked-menu__item-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.portal-notification-open-area {
  margin: -4px;
  padding: 4px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.portal-notification-open-area:hover,
.portal-notification-open-area:focus-visible {
  background: rgba(218, 237, 252, 0.78);
  box-shadow: inset 0 0 0 1px rgba(72, 148, 210, 0.22);
  outline: none;
  transform: translateY(-1px);
}

.portal-blocked-menu__item-copy strong {
  color: #203446;
  font-size: 0.9rem;
}

.portal-blocked-menu__item-copy span {
  color: #5d7387;
  font-size: 0.8rem;
  line-height: 1.45;
  word-break: break-word;
}

.portal-blocked-menu__item-copy .portal-notification-message {
  padding: 6px 0;
  color: #40586f;
}

.portal-notification-kind {
  align-self: flex-start;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid rgba(66, 150, 219, 0.35);
  border-radius: 999px;
  background: rgba(224, 243, 255, 0.82);
  color: #1d5f95 !important;
  font-size: 0.68rem !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.planning-card:target {
  border-color: rgba(29, 114, 184, 0.55);
  box-shadow: 0 0 0 3px rgba(29, 114, 184, 0.18), var(--shadow-soft);
}

.portal-blocked-menu__form {
  margin: 0;
}

.portal-blocked-menu__item .portal-inline-links {
  margin-top: 0;
  justify-content: flex-end;
}

.portal-mini-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
}

.header-shell--portal {
  --portal-banner-bg-size: cover;
  --portal-banner-bg-position: center center;
  width: min(calc(100% - 28px), 1080px);
  padding: 14px 18px 14px;
  border-radius: 20px;
  border-color: rgba(151, 178, 204, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(236, 244, 251, 0.76)),
    linear-gradient(130deg, rgba(255, 255, 255, 0.16), transparent 38%, rgba(120, 175, 228, 0.12)),
    var(--rs-template-bg-image);
  background-position: center center, center center, var(--portal-banner-bg-position);
  background-size: 100% 100%, 100% 100%, var(--portal-banner-bg-size);
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.header-shell--portal::before {
  background:
    linear-gradient(rgba(160, 186, 211, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 186, 211, 0.08) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, 0.22) 18.2%, transparent 18.6%),
    linear-gradient(180deg, rgba(247, 251, 255, 0.2), rgba(238, 246, 252, 0.14)),
    var(--rs-template-bg-image);
  background-position: center center, center center, center center, center center, var(--portal-banner-bg-position);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%, var(--portal-banner-bg-size);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  mask-image: none;
  opacity: 0.74;
}

.portal-page .header-main {
  min-height: 112px;
}

.portal-page .header-main::before {
  inset: 20% 30% 26%;
  filter: blur(14px);
}

.portal-page .brand--banner {
  width: min(100%, 250px);
}

.portal-page .header-utility {
  top: 14px;
  right: 16px;
}

.portal-page--admin .header-shell--portal,
.portal-page--customer .header-shell--portal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.portal-page--admin .header-main,
.portal-page--customer .header-main {
  order: 1;
}

.portal-page--admin .header-utility,
.portal-page--customer .header-utility {
  order: 2;
  position: relative;
  top: auto;
  right: auto;
  width: min(100%, 760px);
  margin: -8px auto 2px;
  justify-content: center;
}

.portal-page--admin .header-bottom,
.portal-page--customer .header-bottom {
  order: 3;
}

.portal-page--admin .portal-session,
.portal-page--customer .portal-session {
  width: 100%;
  justify-content: space-between;
}

.portal-page--guest .header-utility {
  display: none;
}

.portal-page .header-bottom {
  margin-top: 10px;
  padding-top: 10px;
}

.portal-page .portal-session {
  gap: 10px;
  padding: 7px 8px 7px 12px;
  border-radius: 14px;
}

.portal-page .portal-session__actions {
  gap: 8px;
}

.portal-page .portal-mini-button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.portal-page .portal-blocked-menu__toggle {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
}

.portal-nav {
  gap: 8px;
}

.portal-page .site-nav.portal-nav {
  gap: 8px;
}

.portal-page .site-nav.portal-nav a {
  --door-shift: 14px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  letter-spacing: 0;
}

.portal-page .site-nav.portal-nav a::before,
.portal-page .site-nav.portal-nav a::after {
  top: 2px;
  bottom: 2px;
  border-radius: 9px;
}

.portal-page .site-nav.portal-nav .nav-core {
  inset: 3px;
  border-radius: 9px;
}

.portal-page .site-nav.portal-nav .nav-sheen {
  opacity: 0.22;
}

.portal-page .button,
.portal-page .filter-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.84rem;
}

.login-feedback {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(106, 129, 151, 0.2);
  border-radius: 12px;
  background: rgba(241, 246, 251, 0.92);
  color: var(--silver-deep);
  line-height: 1.6;
}

.login-feedback--success {
  border-color: rgba(47, 127, 224, 0.24);
  background: rgba(236, 244, 252, 0.94);
  color: #204f7f;
}

.login-feedback--error {
  border-color: rgba(185, 146, 82, 0.26);
  background: rgba(255, 248, 238, 0.96);
  color: #6c4d22;
}

.portal-section {
  padding-top: 22px;
}

.portal-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.portal-kpi {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 143, 161, 0.18);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.portal-kpi strong {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.92rem;
  color: #203446;
  letter-spacing: -0.02em;
}

.portal-kpi span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.portal-search-form {
  display: grid;
  gap: 16px;
}

.portal-list {
  display: grid;
  gap: 18px;
}

.portal-admin-intro {
  width: 100%;
  grid-column: 1 / -1;
}

.portal-kpis--compact {
  margin-top: 10px;
}

.portal-kpis--compact,
.portal-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-kpis--compact .portal-kpi,
.portal-kpi-grid .portal-kpi {
  flex: 0 1 auto;
  min-width: 0;
}

.portal-kpis--micro {
  margin-top: 8px;
}

.portal-kpis--micro .portal-kpi {
  min-height: 28px;
  padding: 4px 8px;
}

.portal-kpis--micro .portal-kpi strong {
  min-width: 20px;
  height: 20px;
  font-size: 0.8rem;
}

.portal-kpis--micro .portal-kpi span {
  font-size: 0.72rem;
}

.portal-search-form--admin {
  margin-top: 18px;
}

.portal-section--admin {
  padding-top: 16px;
}

.portal-admin-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.portal-admin-sidebar {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 16px;
}

.portal-admin-sidebar-card,
.portal-admin-detail-header {
  --accent-rgb: 88, 102, 116;
  --accent-text: #51606f;
}

.portal-admin-customer-list {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 240px);
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.portal-admin-list-group {
  display: grid;
  gap: 6px;
}

.portal-admin-list-group + .portal-admin-list-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(118, 139, 160, 0.14);
}

.portal-admin-list-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  color: #607792;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.portal-admin-list-group__header strong {
  color: #24425e;
  font-size: 0.86rem;
  letter-spacing: -0.02em;
}

.portal-admin-customer-search {
  margin-top: 14px;
}

.portal-admin-add-customer {
  margin-top: 12px;
}

.portal-admin-add-customer summary {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}

.portal-admin-add-customer summary::-webkit-details-marker {
  display: none;
}

.portal-admin-add-customer__form {
  margin-top: 10px;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(119, 138, 158, 0.18);
  border-radius: 14px;
  background: rgba(248, 251, 254, 0.78);
}

.portal-admin-add-customer__form .field-row {
  gap: 8px;
}

.portal-admin-add-customer__form .field span {
  margin-bottom: 4px;
  font-size: 0.68rem;
}

.portal-admin-add-customer__form input,
.portal-admin-add-customer__form select {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.portal-admin-add-customer__form .button {
  min-height: 36px;
  padding: 0 14px;
}

.portal-admin-convert-guest {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-admin-convert-guest span {
  color: #607792;
  font-size: 0.78rem;
  font-weight: 700;
}

.portal-admin-customer-search span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.portal-admin-customer-search input {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
}

.portal-admin-customer {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(119, 138, 158, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(237, 243, 248, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 14px rgba(58, 77, 96, 0.06);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.portal-admin-customer--guest {
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(241, 245, 249, 0.96));
}

.portal-admin-customer--company {
  border-color: rgba(59, 131, 207, 0.24);
  background:
    linear-gradient(180deg, rgba(243, 249, 255, 0.99), rgba(230, 239, 248, 0.97));
}

.portal-admin-customer:hover,
.portal-admin-customer:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 18px rgba(47, 127, 224, 0.09);
}

.portal-admin-customer.is-active {
  border-color: rgba(47, 127, 224, 0.34);
  background:
    linear-gradient(180deg, rgba(239, 246, 253, 0.99), rgba(226, 237, 247, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 20px rgba(47, 127, 224, 0.1),
    0 0 0 1px rgba(132, 221, 255, 0.08);
}

.portal-admin-customer__name {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.94rem;
  color: #203446;
  letter-spacing: -0.02em;
}

.portal-admin-customer__type {
  color: #6a85a4;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portal-admin-customer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-admin-customer__meta span {
  color: #6c8095;
  font-size: 0.69rem;
  line-height: 1.4;
}

.portal-admin-customer-empty {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.portal-admin-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.planning-layout {
  display: grid;
  gap: 20px;
}

.planning-layout--admin {
  width: min(100%, 1380px);
  margin: 0 auto;
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 22px;
}

.planning-layout--customer {
  gap: 18px;
}

.planning-dashboard-card {
  grid-column: 1 / -1;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 26px);
  border-color: rgba(90, 128, 164, 0.32);
  background:
    radial-gradient(circle at 82% 4%, rgba(55, 144, 228, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(244, 249, 253, 0.94), rgba(210, 225, 237, 0.78));
}

.planning-dashboard-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: 18px;
  align-items: stretch;
}

.planning-dashboard-card h1 {
  margin: 4px 0 8px;
  font-size: clamp(2.2rem, 1.55rem + 2.4vw, 4.3rem);
  line-height: 0.98;
}

.planning-dashboard-card p:not(.section-kicker) {
  max-width: 720px;
  margin: 0;
  color: #536d86;
  font-size: clamp(1rem, 0.93rem + 0.25vw, 1.18rem);
  line-height: 1.55;
}

.planning-next-card {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 128px;
  padding: 18px;
  border: 1px solid rgba(95, 137, 176, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(232, 243, 252, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 18px 32px rgba(34, 65, 96, 0.1);
}

.planning-next-card span,
.planning-next-card small,
.planning-dashboard-stats span {
  color: #5e7389;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.planning-next-card strong {
  color: #19314a;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.15rem;
  line-height: 1.2;
}

.planning-next-card small {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
}

.planning-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.planning-dashboard-stats article {
  display: grid;
  gap: 3px;
  min-height: 82px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(95, 137, 176, 0.22);
  border-radius: 16px;
  background: rgba(247, 251, 254, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.planning-dashboard-stats strong {
  color: #18314a;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.planning-hero-card {
  padding: 12px 14px;
}

.planning-hero-card .section-kicker {
  margin-bottom: 6px;
}

.planning-hero-card .portal-kpi-grid,
.planning-hero-card .portal-kpis--compact {
  margin-top: 0;
}

.planning-create-card,
.planning-admin-create-card {
  overflow: visible;
  border-color: rgba(44, 130, 214, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 246, 255, 0.88)),
    radial-gradient(circle at 96% 0%, rgba(68, 185, 233, 0.2), transparent 34%);
}

.planning-create-card::before,
.planning-admin-create-card::before {
  opacity: 0.42;
}

.planning-admin-create-card {
  position: sticky;
  top: 14px;
  grid-column: 1;
  display: grid;
  gap: 16px;
  padding: clamp(16px, 1.6vw, 22px);
}

.planning-group-card,
.planning-layout--admin > .planning-empty-card:not(.planning-empty-card--inline) {
  grid-column: 2;
}

.planning-admin-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(96, 138, 178, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(249, 252, 255, 0.96), rgba(230, 241, 250, 0.82));
}

.planning-admin-search .login-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.planning-admin-create-card .portal-case__top {
  margin-bottom: 0;
}

.planning-admin-create-card .portal-case__top h2 {
  margin: 4px 0 6px;
  color: #1a324b;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.5rem);
  line-height: 1;
}

.planning-admin-create-card .field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.planning-admin-create-card .field-row:nth-of-type(4) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.planning-admin-create-card input,
.planning-admin-create-card select,
.planning-admin-create-card textarea {
  border-radius: 14px;
}

.planning-group-card {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 1.6vw, 22px);
  background:
    linear-gradient(135deg, rgba(245, 250, 254, 0.94), rgba(216, 229, 240, 0.72)),
    radial-gradient(circle at 90% 0%, rgba(63, 155, 235, 0.13), transparent 30%);
}

.planning-create-card__head,
.planning-create-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.planning-create-card__head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(99, 139, 178, 0.14);
}

.planning-create-card__head h2 {
  margin: 2px 0 0;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.72rem);
}

.planning-admin-create-form {
  display: grid;
  gap: 10px;
}

.planning-admin-grid {
  display: grid;
  gap: 10px;
}

.planning-admin-grid--top {
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr);
}

.planning-admin-grid--time,
.planning-admin-grid--contact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-admin-create-form,
.planning-admin-grid,
.planning-admin-grid--time,
.planning-admin-grid--time .field {
  overflow: visible;
}

.planning-admin-grid--time .field,
.planning-admin-grid--time .field:focus-within {
  position: relative;
  z-index: 4;
}

.planning-create-card .field span {
  font-size: 0.72rem;
}

.planning-create-card input,
.planning-create-card select,
.planning-create-card textarea {
  min-height: 42px;
  font-size: 0.92rem;
}

.planning-duration-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.planning-admin-grid--time .planning-duration-field {
  grid-column: 1 / -1;
}

.planning-duration-field select {
  min-height: 54px;
  border-color: rgba(47, 127, 224, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 242, 255, 0.92));
  color: #213b58;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 22px rgba(47, 127, 224, 0.08);
}

.planning-duration-field select:focus {
  border-color: rgba(47, 127, 224, 0.72);
  box-shadow:
    0 0 0 3px rgba(47, 127, 224, 0.14),
    0 12px 24px rgba(47, 127, 224, 0.12);
}

.planning-duration-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 8px;
  min-height: 42px;
}

.planning-duration-option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(98, 137, 180, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 246, 255, 0.88));
  color: #253d57;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.planning-duration-option:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.38);
  box-shadow: 0 10px 20px rgba(47, 127, 224, 0.12);
}

.planning-duration-option.is-active {
  border-color: rgba(47, 127, 224, 0.58);
  background: linear-gradient(180deg, #3b8bec, #2f78cf);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(47, 127, 224, 0.24);
}

.planning-duration-option[data-planning-duration-option="fixed_price"] {
  border-color: rgba(185, 146, 82, 0.32);
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.98), rgba(244, 232, 205, 0.9));
  color: #6f5320;
}

.planning-duration-option[data-planning-duration-option="fixed_price"].is-active {
  border-color: rgba(185, 146, 82, 0.58);
  background: linear-gradient(180deg, #c69a48, #9d742e);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(157, 116, 46, 0.22);
}

.planning-create-card textarea {
  min-height: 82px;
  resize: vertical;
}

.planning-field-note {
  margin: -2px 0 2px;
  color: #627a93;
  font-size: 0.82rem;
  line-height: 1.55;
}

.planning-field-note strong {
  color: #28445f;
}

.planning-create-card__actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 2px;
}

.planning-customer-grid {
  display: grid;
  grid-template-columns: minmax(320px, 560px) minmax(300px, 1fr);
  gap: 20px;
  align-items: start;
}

.planning-toolbar {
  display: grid;
  gap: 18px;
}

.planning-toolbar__search {
  display: grid;
  gap: 16px;
}

.planning-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.planning-filter-row {
  display: grid;
  gap: 14px;
}

.planning-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.planning-chip-group__label {
  color: #617991;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.planning-overview-card {
  padding: 18px;
}

.planning-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.planning-overview-head h2 {
  margin: 4px 0 0;
}

.planning-overview-list {
  display: grid;
  gap: 7px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.planning-overview-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(130px, 0.7fr) minmax(190px, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(105, 139, 176, 0.18);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 252, 0.88));
  color: #23384d;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.planning-overview-row:hover,
.planning-overview-row:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(47, 127, 224, 0.12);
}

.planning-overview-row strong,
.planning-overview-row em {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 800;
}

.planning-overview-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5e748c;
}

.planning-overview-row em {
  justify-self: end;
  padding: 5px 10px;
  border: 1px solid rgba(47, 127, 224, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #2b5f99;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .planning-layout--admin {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .planning-dashboard-card,
  .planning-admin-create-card,
  .planning-group-card,
  .planning-layout--admin > .planning-empty-card:not(.planning-empty-card--inline) {
    grid-column: 1;
  }

  .planning-admin-create-card {
    position: static;
    padding: 14px;
  }

  .planning-dashboard-card__main,
  .planning-dashboard-stats,
  .planning-admin-create-card .field-row,
  .planning-admin-create-card .field-row:nth-of-type(4) {
    grid-template-columns: 1fr;
  }

  .planning-dashboard-card h1 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .planning-dashboard-stats {
    gap: 8px;
  }

  .planning-dashboard-stats article {
    min-height: 62px;
    padding: 11px 12px;
  }

  .planning-layout--admin .planning-card {
    grid-template-columns: 1fr;
  }

  .planning-layout--admin .planning-card::before {
    display: none;
  }

  .planning-card__time {
    justify-items: start;
    min-height: 0;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
  }

  .planning-card__time + .planning-card__top,
  .planning-card__time ~ .planning-card__meta,
  .planning-card__time ~ .planning-card__detail,
  .planning-card__time ~ .planning-card__actions {
    grid-column: 1;
  }

  .planning-admin-search .login-actions {
    grid-template-columns: 1fr;
  }

  .planning-overview-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .planning-overview-row em {
    justify-self: start;
  }
}

.planning-type-picker,
.planning-request-form {
  display: grid;
  gap: 16px;
}

.planning-calendar-field {
  align-content: start;
}

.planning-calendar-picker {
  display: grid;
  gap: 9px;
}

.planning-calendar-day {
  border: 1px solid rgba(105, 139, 176, 0.2);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 252, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.planning-calendar-day summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  cursor: pointer;
  color: #23384d;
  list-style: none;
}

.planning-calendar-day summary::-webkit-details-marker {
  display: none;
}

.planning-calendar-day summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 127, 224, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #2b66a2;
  font-weight: 900;
}

.planning-calendar-day[open] summary::after {
  content: "-";
}

.planning-calendar-day summary strong {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.98rem;
}

.planning-calendar-day summary span {
  margin-left: auto;
  color: #6a7f96;
  font-size: 0.78rem;
  font-weight: 700;
}

.planning-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.planning-time-option {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(105, 139, 176, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #253d57;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.planning-time-option:hover,
.planning-time-option:focus-within {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.42);
  box-shadow: 0 10px 18px rgba(47, 127, 224, 0.11);
}

.planning-time-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.planning-time-option:has(input:checked) {
  border-color: rgba(47, 127, 224, 0.62);
  background: linear-gradient(180deg, #3b8bec, #2f78cf);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(47, 127, 224, 0.22);
}

.planning-date-field input[type="date"] {
  min-height: 58px;
  color: #20364d;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.planning-date-field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 22px;
  height: 22px;
  cursor: pointer;
  opacity: 0.82;
}

.planning-field-note,
.planning-date-helper {
  margin: 7px 0 0;
  color: #657b93;
  font-size: 0.9rem;
  line-height: 1.45;
}

.planning-time-field {
  display: grid;
  gap: 10px;
  align-content: start;
}

.planning-date-slot-group[hidden] {
  display: none !important;
}

.planning-date-slot-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(105, 139, 176, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(232, 243, 252, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 24px rgba(45, 92, 135, 0.08);
}

.planning-date-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #20364d;
}

.planning-date-slot-header strong {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
}

.planning-date-slot-header span {
  padding: 5px 10px;
  border: 1px solid rgba(105, 139, 176, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #5e748d;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.planning-time-grid--buttons {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  padding: 0;
}

.planning-time-button {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid rgba(105, 139, 176, 0.26);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 249, 0.92));
  color: #253d57;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 850;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.planning-time-button__start {
  display: block;
  font-size: 1.08rem;
  line-height: 1.05;
}

.planning-time-button__range,
.planning-time-button__duration {
  display: block;
  color: #60758b;
  font-family: "Segoe UI", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
}

.planning-time-button__duration {
  color: #2f74b7;
}

.planning-time-button:hover,
.planning-time-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.46);
  box-shadow: 0 12px 22px rgba(47, 127, 224, 0.13);
  outline: none;
}

.planning-time-button.is-selected {
  border-color: rgba(38, 111, 203, 0.72);
  background: linear-gradient(180deg, #3c8eed, #2e76ca);
  color: #ffffff;
  box-shadow: 0 14px 26px rgba(47, 127, 224, 0.24);
}

.planning-time-button.is-selected .planning-time-button__range,
.planning-time-button.is-selected .planning-time-button__duration {
  color: rgba(255, 255, 255, 0.92);
}

.planning-slot-info {
  padding: 12px 13px;
  border: 1px solid rgba(105, 139, 176, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.94), rgba(235, 244, 252, 0.9));
  color: #516b85;
  font-size: 0.9rem;
  line-height: 1.5;
}

.planning-slot-info.is-active {
  border-color: rgba(47, 127, 224, 0.42);
  background:
    radial-gradient(circle at 96% 10%, rgba(95, 197, 245, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(246, 252, 255, 0.98), rgba(224, 241, 255, 0.92));
  color: #1f456d;
  font-weight: 800;
}

.planning-list {
  display: grid;
  gap: 14px;
}

.planning-group__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.planning-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(125, 143, 161, 0.18);
  border-radius: 16px;
  background: rgba(248, 251, 254, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(41, 68, 95, 0.06);
}

.planning-layout--admin .planning-card {
  grid-template-columns: 86px minmax(0, 1fr);
}

.planning-layout--admin .planning-card::before {
  content: "";
  position: absolute;
  left: 57px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(47, 127, 224, 0.16), rgba(105, 139, 176, 0.08));
}

.planning-card__time {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: center;
  min-height: 70px;
  padding: 10px 8px;
  border: 1px solid rgba(47, 127, 224, 0.22);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 240, 252, 0.9));
  box-shadow: 0 10px 20px rgba(47, 127, 224, 0.08);
}

.planning-card__time strong {
  color: #1f4f80;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.08rem;
  line-height: 1;
}

.planning-card__time span {
  color: #657b91;
  font-size: 0.74rem;
  font-weight: 800;
}

.planning-card__time em {
  color: #7b91a7;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.planning-card__time + .planning-card__top,
.planning-card__time ~ .planning-card__meta,
.planning-card__time ~ .planning-card__detail,
.planning-card__time ~ .planning-card__actions {
  grid-column: 2;
}

.planning-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.planning-card__top h3 {
  margin: 6px 0 0;
}

.planning-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planning-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(116, 140, 164, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #5d738b;
  font-size: 0.78rem;
  line-height: 1.4;
}

.planning-card__detail {
  display: grid;
  gap: 8px;
}

.planning-card__detail strong {
  color: #22384e;
}

.planning-card__detail p {
  margin: 0;
  color: var(--muted);
}

.planning-card__detail--schedule,
.portal-case__detail--schedule {
  padding: 12px 14px;
  border: 1px solid rgba(83, 143, 204, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(226, 241, 255, 0.72));
}

.planning-card__detail--schedule strong,
.portal-case__detail--schedule strong {
  color: #1f4f80;
}

.planning-card__detail--success,
.portal-case__detail--success {
  padding: 12px 14px;
  border: 1px solid rgba(65, 154, 104, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(244, 253, 249, 0.98), rgba(221, 245, 232, 0.78));
}

.planning-card__detail--success strong,
.portal-case__detail--success strong {
  color: #24734f;
}

.planning-card__detail--success p,
.portal-case__detail--success p {
  color: #416b59;
}

.booking-terms-notice {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 158, 54, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 250, 231, 0.98), rgba(255, 244, 205, 0.82));
  color: #70510f;
}

.booking-terms-notice strong {
  color: #7a560c;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.booking-terms-notice p {
  margin: 0;
  color: #6d5c34;
}

.planning-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.planning-empty-card {
  padding: 20px;
  border: 1px dashed rgba(124, 146, 168, 0.28);
  border-radius: 16px;
  background: rgba(247, 250, 253, 0.76);
}

.planning-empty-card h3 {
  margin: 0 0 10px;
}

.planning-empty-card p {
  margin: 0;
}

.planning-empty-card--inline {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .planning-layout--admin {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .planning-dashboard-card,
  .planning-admin-create-card,
  .planning-group-card,
  .planning-layout--admin > .planning-empty-card:not(.planning-empty-card--inline) {
    grid-column: 1;
  }

  .planning-admin-create-card {
    position: static;
    padding: 14px;
  }

  .planning-dashboard-card__main,
  .planning-dashboard-stats,
  .planning-admin-create-card .field-row,
  .planning-admin-create-card .field-row:nth-of-type(4) {
    grid-template-columns: 1fr;
  }

  .planning-layout--admin .planning-card {
    grid-template-columns: 1fr;
  }

  .planning-layout--admin .planning-card::before {
    display: none;
  }

  .planning-card__time {
    justify-items: start;
    min-height: 0;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
  }

  .planning-card__time + .planning-card__top,
  .planning-card__time ~ .planning-card__meta,
  .planning-card__time ~ .planning-card__detail,
  .planning-card__time ~ .planning-card__actions {
    grid-column: 1;
  }

  .planning-admin-search .login-actions {
    grid-template-columns: 1fr;
  }
}

.portal-admin-dossier {
  display: grid;
  gap: 18px;
}

.portal-admin-tabbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.portal-admin-tab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(103, 123, 145, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(232, 239, 246, 0.96));
  color: #43586d;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(58, 77, 96, 0.06);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
  cursor: pointer;
}

.portal-admin-tab:hover,
.portal-admin-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.3);
  color: #244a71;
}

.portal-admin-tab.is-active {
  border-color: rgba(47, 127, 224, 0.36);
  background: linear-gradient(180deg, rgba(236, 245, 253, 0.99), rgba(221, 235, 248, 0.98));
  color: #1f4f80;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 22px rgba(47, 127, 224, 0.1),
    0 0 0 1px rgba(132, 221, 255, 0.08);
}

.portal-admin-tabpanels {
  display: grid;
}

.portal-admin-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.portal-admin-panel[hidden] {
  display: none !important;
}

.portal-admin-panel-copy {
  display: grid;
  gap: 4px;
}

.portal-case-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.portal-case-filter {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(103, 123, 145, 0.18);
  border-radius: 999px;
  background: rgba(249, 252, 255, 0.94);
  color: #486076;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.portal-case-filter:hover,
.portal-case-filter:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.28);
  color: #244a71;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 16px rgba(58, 77, 96, 0.06);
}

.portal-case-filter span {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-case-filter strong {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #33546f;
  font-size: 0.78rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.portal-case-filter.is-active {
  border-color: rgba(47, 127, 224, 0.34);
  background: linear-gradient(180deg, rgba(236, 245, 253, 0.99), rgba(221, 235, 248, 0.98));
  color: #1f4f80;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 18px rgba(47, 127, 224, 0.08);
}

.portal-admin-photo-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 16px;
  background: rgba(248, 251, 253, 0.92);
}

.portal-admin-photo-form .login-actions {
  margin-top: 0;
}

.portal-admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.portal-admin-photo-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(238, 244, 249, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(58, 77, 96, 0.05);
}

.portal-admin-photo-card__media {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  background: rgba(232, 239, 246, 0.82);
  aspect-ratio: 4 / 3;
}

.portal-admin-photo-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.portal-admin-photo-meta {
  display: grid;
  gap: 6px;
}

.portal-admin-photo-meta strong {
  color: #203446;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.portal-admin-photo-meta span {
  color: #63798f;
  font-size: 0.76rem;
}

.portal-admin-photo-meta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.portal-project-admin {
  display: grid;
  gap: 18px;
}

.portal-project-editor,
.portal-project-list-card {
  padding: 20px;
}

.portal-project-editor h1 {
  margin: 4px 0 0;
  color: #203446;
  font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.45rem);
  letter-spacing: -0.04em;
}

.portal-project-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 18px;
}

.portal-project-photo-field {
  padding: 14px;
  border: 1px dashed rgba(47, 127, 224, 0.32);
  border-radius: 16px;
  background: rgba(238, 247, 255, 0.54);
}

.portal-project-dropzone {
  grid-column: 1 / -1;
  min-height: 260px;
}

.portal-checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: #203446;
  font-weight: 700;
}

.portal-checkline input {
  width: 18px;
  height: 18px;
  accent-color: #2f7fe0;
}

.document-deposit-field {
  display: grid;
  gap: 10px;
}

.document-deposit-field__percent {
  display: grid;
  grid-template-columns: auto minmax(90px, 140px);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  color: #294560;
  font-weight: 800;
}

.document-deposit-field__percent input {
  width: 100%;
  text-align: center;
}

.document-deposit-field__percent input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.document-deposit-field__quick {
  width: 100%;
  min-height: 42px;
}

.document-payment-split-row {
  border-top: 1px solid rgba(47, 127, 224, 0.16);
  color: #214766;
}

.document-payment-split-row strong {
  color: #0f3456;
}

.portal-project-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.portal-project-admin-card {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(238, 244, 249, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(58, 77, 96, 0.05);
}

.portal-project-admin-card__media {
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 138px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(232, 243, 253, 0.92), rgba(255, 255, 255, 0.88));
  color: #5b748d;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-project-admin-card__media img {
  width: 100%;
  height: 100%;
  min-height: 138px;
  display: block;
  object-fit: contain;
  object-position: center;
}

.portal-project-admin-card__body {
  display: grid;
  align-content: start;
  gap: 8px;
}

.portal-project-admin-card__body h3 {
  margin: 0;
  color: #203446;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
}

.portal-project-admin-card__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.portal-project-admin-card .portal-inline-links {
  margin-top: 6px;
}

.homepage-media-admin {
  display: grid;
  gap: 18px;
}

.homepage-media-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
}

.homepage-update-editor {
  display: grid;
  gap: 16px;
}

.homepage-update-form {
  display: grid;
  gap: 14px;
}

.homepage-section-editor {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(132, 173, 211, 0.28);
}

.homepage-section-editor legend {
  padding: 0 8px;
  color: #527ca9;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.homepage-section-items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.homepage-section-item-editor {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(132, 173, 211, 0.24);
  border-radius: 16px;
  background: rgba(236, 246, 253, 0.58);
}

.homepage-section-item-editor .field {
  margin: 0;
}

.homepage-section-item-editor .field-full {
  grid-column: 1 / -1;
}

.faq-item summary strong {
  color: inherit;
  font: inherit;
}

.homepage-media-hero h1 {
  margin: 4px 0 8px;
  color: #203446;
  font-size: clamp(1.65rem, 1.28rem + 1vw, 2.45rem);
  letter-spacing: -0.04em;
}

.homepage-media-grid-admin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.homepage-media-editor-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.homepage-media-editor-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.homepage-media-editor-card__top h2 {
  margin: 2px 0 0;
  color: #203446;
  font-size: 1.22rem;
}

.homepage-media-form {
  display: grid;
  gap: 12px;
}

.homepage-media-dropzone {
  display: grid;
  min-height: 220px;
  border: 1px dashed rgba(47, 127, 224, 0.42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 80% 8%, rgba(126, 166, 207, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 241, 248, 0.72));
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.homepage-media-dropzone.is-dragging,
.homepage-media-dropzone:focus-within {
  border-color: rgba(47, 127, 224, 0.72);
  box-shadow: 0 18px 34px rgba(47, 127, 224, 0.12);
  transform: translateY(-1px);
}

.homepage-media-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.homepage-media-dropzone__preview {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 16px;
  color: #507094;
  text-align: center;
}

.homepage-media-dropzone__preview img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
}

.homepage-media-dropzone__preview strong {
  color: #203446;
  font-size: 1.05rem;
}

.homepage-media-dropzone__preview small {
  color: #6b7f92;
  font-size: 0.78rem;
}

.homepage-media-actions {
  margin-top: 0;
}

@media (max-width: 720px) {
  .portal-project-form,
  .portal-project-admin-card,
  .homepage-section-editor,
  .homepage-section-item-editor,
  .homepage-media-grid-admin {
    grid-template-columns: 1fr;
  }

  .portal-project-editor,
  .portal-project-list-card,
  .homepage-media-hero,
  .homepage-media-editor-card {
    padding: 16px;
  }

  .homepage-media-hero {
    align-items: stretch;
    flex-direction: column;
  }
}

.photo-viewer-main {
  max-width: 1200px;
}

.photo-viewer-card {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.photo-viewer-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  color: #203446;
}

.photo-viewer-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(121, 141, 161, 0.2);
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(236, 242, 248, 0.98));
  min-height: 320px;
  padding: 18px;
}

.photo-viewer-frame img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 20px 44px rgba(41, 65, 89, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.82);
}

.photo-viewer-note {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 18px;
  background: rgba(248, 251, 253, 0.94);
}

.photo-viewer-note p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.portal-admin-panel-copy h3 {
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.18rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.portal-admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portal-admin-appointment-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.portal-admin-appointment-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(98, 145, 191, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(237, 246, 253, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 20px rgba(43, 72, 100, 0.06);
}

.portal-admin-appointment-card .portal-case__top,
.portal-admin-appointment-card .portal-case__meta,
.portal-admin-appointment-card .portal-case__detail {
  margin: 0;
}

.portal-admin-appointment-card .portal-case__top h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.portal-admin-appointment-summary {
  margin-top: 0;
}

.portal-admin-detail-group {
  display: grid;
  gap: 18px;
}

.portal-admin-document-list {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.portal-admin-document {
  padding: 18px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 14px;
  background: rgba(248, 251, 253, 0.92);
}

.portal-admin-document .portal-case__meta {
  margin-top: 12px;
}

.portal-admin-document .portal-case__detail {
  margin-top: 12px;
}

.portal-admin-document .portal-inline-links {
  margin-top: 14px;
}

.portal-finance-filter-list {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.portal-finance-top-strip {
  grid-column: 1 / -1;
  padding: 16px 18px;
}

.portal-finance-top-strip__inner {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.portal-finance-top-strip__copy {
  display: grid;
  gap: 8px;
}

.portal-finance-top-strip__copy h2,
.portal-finance-top-strip__copy p {
  margin: 0;
}

.portal-finance-top-strip__copy p:not(.section-kicker) {
  color: var(--muted);
  line-height: 1.55;
}

.portal-finance-filter-list--inline {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.portal-finance-filter-list--inline .portal-finance-filter {
  min-height: 100%;
}

.portal-finance-filter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(119, 138, 158, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(237, 243, 248, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 22px rgba(58, 77, 96, 0.06);
  color: inherit;
  text-decoration: none;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.portal-finance-filter:hover,
.portal-finance-filter:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(47, 127, 224, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 16px 28px rgba(47, 127, 224, 0.09);
}

.portal-finance-filter.is-active {
  border-color: rgba(47, 127, 224, 0.34);
  background:
    linear-gradient(180deg, rgba(239, 246, 253, 0.99), rgba(226, 237, 247, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 32px rgba(47, 127, 224, 0.12),
    0 0 0 1px rgba(132, 221, 255, 0.08);
}

.portal-finance-filter span:first-child {
  display: grid;
  gap: 4px;
}

.portal-finance-filter strong {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #203446;
  letter-spacing: -0.02em;
}

.portal-finance-filter small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.portal-finance-filter__count {
  min-width: 42px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(115, 138, 160, 0.16);
  background: rgba(255, 255, 255, 0.76);
  color: #4f6a83;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.portal-finance-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: start;
}

.portal-finance-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.portal-admin-inline-link {
  margin-left: 10px;
  color: #3e74af;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.portal-admin-inline-link:hover,
.portal-admin-inline-link:focus-visible {
  color: #285f98;
  text-decoration: underline;
}

.portal-finance-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-finance-compact-switch {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-finance-compact-switch .button {
  min-height: 34px;
  padding: 0 12px;
}

.portal-finance-group {
  display: grid;
  gap: 18px;
}

.portal-finance-group__header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: start;
}

.portal-finance-group__header h3,
.portal-finance-document__top h4 {
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.4rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.portal-finance-group__header p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.portal-finance-document-list {
  display: grid;
  gap: 14px;
}

.portal-finance-document {
  padding: 20px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(249, 251, 253, 0.96), rgba(239, 244, 249, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 22px rgba(59, 78, 97, 0.06);
}

.portal-finance-document--compact {
  padding: 0;
  overflow: hidden;
}

.portal-finance-document__summary {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
}

.portal-finance-document__summary::-webkit-details-marker {
  display: none;
}

.portal-finance-document__summary::marker {
  content: "";
}

.portal-finance-document__summary::after {
  content: "+";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(115, 138, 160, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: #506173;
  font-size: 1rem;
  font-weight: 700;
}

.portal-finance-document--compact[open] .portal-finance-document__summary::after {
  content: "-";
}

.portal-finance-document__summary-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.portal-finance-document__summary-type {
  color: #5f84b2;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portal-finance-document__summary-main strong {
  color: #203446;
  font-size: 1rem;
  line-height: 1.35;
}

.portal-finance-document__summary-main small {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.portal-finance-document__summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 42px;
}

.portal-finance-document__summary-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(115, 138, 160, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: #5b6b7b;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portal-finance-main--compact {
  gap: 12px;
}

.portal-finance-toolbar-card,
.portal-finance-search-card,
.portal-finance-summary-card {
  padding: 14px 16px;
}

.portal-finance-toolbar {
  display: grid;
  gap: 10px;
}

.portal-finance-toolbar__group {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.portal-finance-toolbar__label {
  padding-top: 8px;
  color: #5b7694;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portal-finance-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-finance-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(127, 150, 173, 0.22);
  border-radius: 999px;
  background: rgba(247, 250, 253, 0.9);
  color: #2c4865;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.portal-finance-chip:hover,
.portal-finance-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(75, 136, 212, 0.34);
  box-shadow: 0 10px 18px rgba(47, 116, 199, 0.08);
}

.portal-finance-chip.is-active {
  border-color: rgba(47, 127, 224, 0.3);
  background: linear-gradient(180deg, rgba(237, 245, 253, 0.98), rgba(223, 236, 248, 0.96));
  color: #183958;
  box-shadow: 0 10px 18px rgba(47, 116, 199, 0.08);
}

.portal-finance-chip em {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(129, 150, 171, 0.16);
  color: #57718d;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.portal-finance-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.portal-finance-search-field {
  margin: 0;
}

.portal-finance-search-actions,
.portal-finance-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-finance-search-actions .button,
.portal-finance-summary__actions .button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 0.86rem;
}

.portal-finance-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}

.portal-finance-summary__copy {
  display: grid;
  gap: 6px;
}

.portal-finance-summary__copy h2,
.portal-finance-summary__copy p {
  margin: 0;
}

.portal-page--finance .header-shell--portal {
  padding: 16px 18px 14px;
}

.portal-page--finance .header-main {
  min-height: 104px;
}

.portal-page--finance .brand--banner {
  width: min(100%, 186px);
}

.portal-page--finance .brand--banner img {
  width: min(100%, 144px);
}

.portal-page--finance .header-bottom {
  margin-top: 10px;
  padding-top: 12px;
}

.portal-page--finance .portal-session {
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
}

.portal-page--finance .portal-session__text {
  gap: 2px;
}

.portal-page--finance .portal-session__text .client-access-link__eyebrow {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
}

.portal-page--finance .portal-session__text .client-access-link__label {
  font-size: 0.82rem;
}

.portal-page--finance .portal-mini-button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.72rem;
}

.portal-page--finance .site-nav {
  gap: 6px;
}

.portal-page--finance .site-nav a {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
}

.portal-page--finance .nav-label {
  font-size: 0.82rem;
}

.portal-page--finance .portal-section {
  padding-top: 10px;
}

.portal-page--finance .panel-corners {
  opacity: 0.45;
}

.portal-page--finance .portal-section-card {
  padding: 14px 16px;
  border-radius: 18px;
}

.portal-page--finance .portal-section-card h2 {
  margin: 2px 0 6px;
  font-size: clamp(1.08rem, 0.98rem + 0.36vw, 1.38rem);
}

.portal-page--finance .section-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.portal-page--finance .portal-admin-main,
.portal-page--finance .portal-finance-group,
.portal-page--finance .portal-finance-document-list {
  gap: 12px;
}

.portal-page--finance .portal-finance-toolbar-card,
.portal-page--finance .portal-finance-search-card,
.portal-page--finance .portal-finance-summary-card {
  padding: 12px 14px;
}

.portal-page--finance .portal-finance-toolbar {
  gap: 8px;
}

.portal-page--finance .portal-finance-toolbar__group {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}

.portal-page--finance .portal-finance-toolbar__label {
  padding-top: 5px;
  font-size: 0.64rem;
}

.portal-page--finance .portal-finance-chip-row {
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.portal-page--finance .portal-finance-chip-row::-webkit-scrollbar {
  height: 6px;
}

.portal-page--finance .portal-finance-chip-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(123, 148, 173, 0.28);
}

.portal-page--finance .portal-finance-chip {
  min-height: 30px;
  gap: 8px;
  padding: 0 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.portal-page--finance .portal-finance-chip em {
  min-width: 20px;
  min-height: 20px;
  padding: 0 6px;
  font-size: 0.62rem;
}

.portal-page--finance .portal-finance-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.portal-page--finance .portal-finance-search-field span {
  margin-bottom: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.portal-page--finance .portal-finance-search-field input {
  min-height: 36px;
  border-radius: 10px;
  font-size: 0.92rem;
}

.portal-page--finance .portal-finance-search-actions,
.portal-page--finance .portal-finance-summary__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.portal-page--finance .portal-finance-search-actions .button,
.portal-page--finance .portal-finance-summary__actions .button,
.portal-page--finance .portal-inline-button,
.portal-page--finance .portal-payment-form__actions .button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.portal-page--finance .portal-finance-document__actions,
.portal-page--finance .portal-payment-form__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.portal-page--finance .portal-finance-summary {
  align-items: center;
  gap: 10px;
}

.portal-page--finance .portal-finance-summary__copy {
  gap: 4px;
}

.portal-page--finance .portal-finance-summary__copy h2 {
  font-size: 1.28rem;
}

.portal-page--finance .portal-finance-summary__copy p {
  font-size: 0.88rem;
}

.portal-page--finance .portal-finance-group__header,
.portal-page--finance .portal-finance-header {
  gap: 8px;
}

.portal-page--finance .portal-finance-group__header h3,
.portal-page--finance .portal-finance-document__top h4 {
  font-size: 1rem;
}

.portal-page--finance .portal-finance-group__header p {
  margin-top: 4px;
  font-size: 0.86rem;
}

.portal-page--finance .portal-status {
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.63rem;
}

.portal-page--finance .portal-finance-document {
  border-radius: 14px;
}

.portal-page--finance .portal-finance-document__summary {
  padding: 10px 12px;
  gap: 10px;
}

.portal-page--finance .portal-finance-document__summary::after {
  top: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
}

.portal-page--finance .portal-finance-document__summary-main strong {
  font-size: 0.9rem;
}

.portal-page--finance .portal-finance-document__summary-main small {
  font-size: 0.72rem;
}

.portal-page--finance .portal-finance-document__summary-meta {
  gap: 6px;
  padding-right: 32px;
}

.portal-page--finance .portal-finance-document__summary-chip {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.62rem;
}

.portal-page--finance .portal-finance-document__expanded {
  padding: 0 12px 12px;
}

.portal-page--finance .portal-finance-document__meta {
  gap: 6px;
  margin-top: 10px;
}

.portal-page--finance .portal-finance-document__meta span {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.62rem;
}

.portal-page--finance .portal-finance-document__details,
.portal-page--finance .portal-finance-document__totals,
.portal-page--finance .portal-finance-document__actions,
.portal-page--finance .portal-payment-form {
  margin-top: 12px;
}

.portal-page--finance .portal-finance-document__details p {
  font-size: 0.88rem;
}

.portal-page--finance .portal-finance-document__totals {
  padding-top: 10px;
  gap: 8px 12px;
  font-size: 0.86rem;
}

.portal-page--finance .portal-payment-form__grid {
  gap: 10px;
}

.portal-finance-document__expanded {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(121, 141, 161, 0.14);
}

.portal-finance-document__top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: start;
}

.portal-finance-document__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.portal-finance-document__meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(115, 138, 160, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: #5b6b7b;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-finance-document__details {
  margin-top: 16px;
  display: grid;
  gap: 6px;
}

.portal-finance-document__details strong {
  color: #223849;
  font-size: 1rem;
}

.portal-finance-document__details p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.portal-finance-document__totals {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(121, 141, 161, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  color: #4f6172;
}

.portal-finance-document__totals strong {
  color: #203446;
}

.portal-finance-document__actions {
  margin-top: 16px;
}

.portal-case {
  padding: 24px;
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.portal-case--admin {
  --accent-rgb: 88, 102, 116;
  --accent-text: #51606f;
}

.portal-case h3 {
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.5rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.portal-case__top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: start;
}

.portal-status {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(103, 125, 148, 0.2);
  border-radius: 999px;
  background: rgba(241, 246, 250, 0.96);
  color: #3f5164;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.portal-status--new,
.portal-status--planned {
  border-color: rgba(47, 127, 224, 0.24);
  background: rgba(234, 243, 252, 0.96);
  color: #215f98;
}

.portal-status--requested {
  border-color: rgba(201, 158, 54, 0.34);
  background: rgba(255, 247, 219, 0.98);
  color: #8a6314;
}

.portal-status--approved {
  border-color: rgba(70, 132, 105, 0.24);
  background: rgba(236, 247, 243, 0.96);
  color: #2f7658;
}

.portal-status--reviewed {
  border-color: rgba(64, 138, 156, 0.28);
  background: rgba(233, 247, 250, 0.98);
  color: #1f6d7c;
}

.portal-status--in_progress {
  border-color: rgba(88, 102, 116, 0.22);
  background: rgba(238, 242, 246, 0.96);
  color: #4f6071;
}

.portal-status--waiting_customer {
  border-color: rgba(201, 158, 54, 0.34);
  background: rgba(255, 247, 219, 0.98);
  color: #8a6314;
}

.portal-status--warning {
  border-color: rgba(214, 132, 48, 0.34);
  background: rgba(255, 243, 230, 0.98);
  color: #9a5413;
}

.portal-status--completed {
  border-color: rgba(70, 132, 105, 0.22);
  background: rgba(236, 247, 243, 0.96);
  color: #356b54;
}

.portal-status--closed {
  border-color: rgba(191, 93, 93, 0.28);
  background: rgba(255, 238, 238, 0.98);
  color: #9b2f2f;
}

.portal-status--cancelled {
  border-color: rgba(191, 93, 93, 0.28);
  background: rgba(255, 238, 238, 0.98);
  color: #9b2f2f;
}

@media (max-width: 1100px) {
  .planning-customer-grid,
  .planning-admin-grid--top,
  .planning-admin-grid--time,
  .planning-admin-grid--contact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .planning-create-card__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .planning-group__header,
  .planning-card__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .planning-card__actions,
  .planning-chip-group,
  .planning-toolbar__actions {
    width: 100%;
  }
}

.portal-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.portal-case__meta span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(115, 138, 160, 0.18);
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-case__summary,
.portal-case__detail p,
.portal-update p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.portal-case__summary {
  margin-top: 18px;
}

.portal-case__detail,
.portal-update,
.portal-payment-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 253, 0.9);
}

.portal-case__detail strong,
.portal-update strong,
.portal-payment-card strong {
  display: block;
  margin-bottom: 8px;
  color: #28445f;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-payment-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.portal-payment-card__actions {
  margin-top: 14px;
}

.portal-payment-form {
  margin-top: 14px;
}

.portal-payment-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portal-payment-form__actions {
  margin-top: 14px;
}

.portal-section-card {
  padding: 24px;
  --accent-rgb: 88, 102, 116;
  --accent-text: #51606f;
}

.portal-section-card h2 {
  margin: 4px 0 10px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
  color: #203446;
  letter-spacing: -0.03em;
}

.portal-section-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.portal-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.portal-customer-shell {
  align-items: start;
}

.portal-page .login-hero {
  padding-top: 12px;
}

.portal-page .login-shell {
  gap: 16px;
}

.portal-page .login-copy,
.portal-page .login-card {
  padding: 22px;
}

.portal-page .login-copy h1,
.portal-page .login-card h2 {
  margin-bottom: 12px;
  font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2.1rem);
}

.portal-page .login-copy p,
.portal-page .login-card p,
.portal-page .portal-section-card p,
.portal-page .portal-case__summary,
.portal-page .portal-case__detail p,
.portal-page .portal-update p,
.portal-page .portal-finance-document__details p,
.portal-page .portal-payment-card p,
.portal-page .portal-mini-note p {
  line-height: 1.58;
}

.portal-page .portal-section {
  padding-top: 16px;
}

.portal-page .portal-kpis {
  gap: 6px;
  margin-top: 10px;
}

.portal-page .portal-kpi {
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 999px;
}

.portal-page .portal-kpi strong {
  min-width: 22px;
  height: 22px;
  margin: 0;
  font-size: 0.86rem;
}

.portal-page .portal-kpi span {
  font-size: 0.76rem;
  line-height: 1.2;
}

.portal-page .portal-admin-workspace {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  scroll-margin-top: 18px;
}

.portal-page .portal-admin-sidebar {
  top: 12px;
  gap: 12px;
}

.portal-page .portal-admin-customer-list,
.portal-page .portal-finance-filter-list {
  margin-top: 14px;
  gap: 8px;
}

.portal-page .portal-finance-top-strip {
  padding: 14px 16px;
}

.portal-page .portal-finance-top-strip__inner {
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 14px;
}

.portal-page .portal-finance-filter-list--inline {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-page .portal-admin-customer-list {
  max-height: calc(100vh - 210px);
}

.portal-page .portal-admin-customer-search input {
  min-height: 36px;
  border-radius: 10px;
}

.portal-page .portal-admin-customer {
  min-height: 44px;
  padding: 0 12px;
}

.portal-page .portal-admin-customer__name {
  font-size: 0.9rem;
}

.portal-page .portal-admin-main,
.portal-page .portal-admin-detail-group,
.portal-page .portal-finance-group,
.portal-page .portal-finance-document-list {
  gap: 14px;
}

.portal-page .portal-admin-dossier {
  gap: 14px;
}

.portal-page .portal-case,
.portal-page .portal-section-card {
  padding: 18px;
}

.portal-page .portal-case h3,
.portal-page .portal-finance-group__header h3,
.portal-page .portal-finance-document__top h4 {
  font-size: 1.18rem;
}

.portal-page .portal-section-card h2 {
  margin: 3px 0 8px;
  font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.55rem);
}

.portal-page .portal-case__top,
.portal-page .portal-finance-document__top,
.portal-page .portal-finance-group__header,
.portal-page .portal-finance-header {
  gap: 10px;
}

.portal-page .portal-status {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.72rem;
}

.portal-page .portal-case__meta,
.portal-page .portal-finance-document__meta {
  gap: 6px;
  margin-top: 12px;
}

.portal-page .portal-case__meta span,
.portal-page .portal-finance-document__meta span {
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.66rem;
}

.portal-page .portal-case__summary,
.portal-page .portal-case__detail,
.portal-page .portal-update,
.portal-page .portal-payment-card,
.portal-page .portal-mini-note,
.portal-page .portal-finance-document__details,
.portal-page .portal-finance-document__totals,
.portal-page .portal-finance-document__actions,
.portal-page .portal-payment-form,
.portal-page .portal-shortcuts {
  margin-top: 14px;
}

.portal-page .portal-case__detail,
.portal-page .portal-update,
.portal-page .portal-payment-card,
.portal-page .portal-mini-note {
  padding: 13px 14px;
}

.portal-page .portal-finance-filter {
  padding: 12px 13px;
  border-radius: 12px;
  gap: 10px;
}

.portal-page .portal-finance-filter strong {
  font-size: 0.94rem;
}

.portal-page .portal-finance-filter small {
  font-size: 0.78rem;
}

.portal-page .portal-finance-filter__count {
  min-width: 36px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.72rem;
}

.portal-page .portal-finance-header__actions {
  gap: 8px;
}

.portal-page .portal-finance-compact-switch {
  gap: 6px;
}

.portal-page .portal-finance-compact-switch .button {
  min-height: 32px;
  padding: 0 10px;
}

.portal-page .portal-finance-document {
  padding: 16px;
  border-radius: 14px;
}

.portal-page .portal-finance-document__summary {
  padding: 12px 14px;
}

.portal-page .portal-finance-document__summary::after {
  top: 12px;
  right: 14px;
}

.portal-page .portal-finance-document__summary-main strong {
  font-size: 0.95rem;
}

.portal-page .portal-finance-document__summary-main small,
.portal-page .portal-finance-document__summary-chip {
  font-size: 0.68rem;
}

.portal-page .portal-finance-document__details strong {
  font-size: 0.94rem;
}

.portal-page .portal-finance-document__totals {
  padding-top: 12px;
  gap: 10px 14px;
  font-size: 0.92rem;
}

.portal-admin-search-panel {
  padding: 16px 18px;
}

.portal-admin-search-panel .portal-search-form--admin {
  margin-top: 0;
  gap: 12px;
}

.portal-admin-search-panel .field span {
  margin-bottom: 6px;
}

.portal-admin-search-panel__actions {
  margin-top: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .portal-finance-document__summary {
    grid-template-columns: 1fr;
  }

  .portal-finance-document__summary-meta {
    justify-content: flex-start;
    padding-right: 0;
  }
}

.portal-page .portal-admin-tabbar {
  gap: 8px;
}

.portal-page .portal-admin-tab {
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 0.76rem;
}

.portal-page .portal-admin-overview-grid {
  gap: 12px;
}

.portal-page .document-preview {
  padding: 18px;
}

.portal-page .document-preview__header h3 {
  font-size: 1.18rem;
}

.portal-page .document-preview__meta {
  gap: 12px;
}

.portal-customer-form {
  display: grid;
  gap: 16px;
}

.portal-company-planning-form .field-row {
  align-items: start;
}

.portal-file-field {
  padding: 14px;
  border: 1px dashed rgba(47, 127, 224, 0.34);
  border-radius: 16px;
  background: rgba(238, 247, 255, 0.58);
}

.portal-file-field input[type="file"] {
  min-height: 46px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.portal-attachment-list .portal-inline-links {
  margin-top: 10px;
}

.portal-attachment-list .portal-inline-button {
  max-width: 100%;
  white-space: normal;
}

.portal-account-edit {
  margin-top: 22px;
}

.portal-account-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.portal-account-legend__item {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(121, 141, 161, 0.2);
  border-radius: 999px;
  color: #24405b;
  font-size: 0.82rem;
  font-weight: 900;
}

.portal-account-legend__item--edit {
  border-color: rgba(48, 148, 103, 0.36);
  background: rgba(232, 248, 240, 0.96);
  color: #196342;
}

.portal-account-legend__item--locked {
  border-color: rgba(121, 137, 153, 0.32);
  background: rgba(238, 243, 247, 0.96);
  color: #536273;
}

.portal-account-legend__item--request {
  border-color: rgba(201, 151, 42, 0.4);
  background: rgba(255, 248, 223, 0.96);
  color: #77530b;
}

.portal-account-edit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portal-account-edit .field {
  margin-bottom: 0;
}

.portal-account-field {
  padding: 12px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 14px;
  background: rgba(248, 251, 253, 0.9);
}

.portal-account-field > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portal-account-field > span em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.portal-account-field--edit {
  border-color: rgba(48, 148, 103, 0.34);
  background: linear-gradient(180deg, rgba(244, 253, 248, 0.98), rgba(232, 248, 240, 0.82));
}

.portal-account-field--edit > span em {
  background: #dff6ea;
  color: #17613f;
}

.portal-account-field--locked {
  border-color: rgba(121, 137, 153, 0.36);
  background: linear-gradient(180deg, rgba(247, 250, 252, 0.98), rgba(234, 240, 246, 0.9));
}

.portal-account-field--locked > span em {
  background: #e2e9ef;
  color: #526273;
}

.portal-account-field--request {
  border-color: rgba(201, 151, 42, 0.42);
  background: linear-gradient(180deg, rgba(255, 253, 244, 0.98), rgba(255, 246, 214, 0.88));
}

.portal-account-field--request > span em {
  background: #fff0b9;
  color: #79540d;
}

.portal-account-edit input[readonly] {
  color: rgba(33, 57, 82, 0.74);
  background: rgba(234, 242, 250, 0.72);
  cursor: not-allowed;
}

.portal-mini-note--account-request {
  border-color: rgba(201, 151, 42, 0.32);
  background: rgba(255, 249, 228, 0.94);
}

.portal-two-factor-card {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid rgba(47, 127, 224, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(235, 244, 252, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.portal-two-factor-card h3 {
  margin: 2px 0 6px;
  color: #203446;
  font-size: 1.22rem;
}

.portal-two-factor-card p {
  margin: 0;
  color: #5f7285;
  line-height: 1.58;
}

.portal-two-factor-invite {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(61, 135, 206, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(97, 184, 246, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(247, 252, 255, 0.98), rgba(232, 242, 250, 0.92));
}

.portal-two-factor-invite h2 {
  margin: 2px 0 8px;
  color: #203446;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.portal-two-factor-invite p {
  margin: 0;
  color: #5f7285;
  line-height: 1.58;
}

.portal-two-factor-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.portal-two-factor-choice-grid article {
  padding: 14px;
  border: 1px solid rgba(133, 164, 194, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.portal-two-factor-choice-grid strong,
.portal-two-factor-choice-grid span {
  display: block;
}

.portal-two-factor-choice-grid strong {
  color: #203446;
}

.portal-two-factor-choice-grid span {
  margin-top: 5px;
  color: #607487;
  font-size: 0.92rem;
  line-height: 1.45;
}

.portal-auth-note--secure {
  border-color: rgba(48, 148, 103, 0.28);
  background: rgba(232, 248, 240, 0.9);
}

.portal-two-factor-setup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.portal-two-factor-qr {
  display: grid;
  place-items: center;
  width: 156px;
  min-height: 156px;
  padding: 10px;
  border: 1px solid rgba(121, 141, 161, 0.22);
  border-radius: 14px;
  background: #ffffff;
}

.portal-two-factor-qr span {
  color: #6a7d8f;
  font-size: 0.82rem;
  font-weight: 800;
}

.portal-two-factor-setup__copy {
  display: grid;
  gap: 8px;
}

.portal-two-factor-setup__copy strong {
  color: #203446;
}

.portal-two-factor-mobile-help,
.portal-two-factor-mobile-actions {
  display: none;
}

.portal-two-factor-setup__copy code {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(47, 127, 224, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #153b65;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.portal-two-factor-secret-box {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(121, 141, 161, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.portal-two-factor-secret-box > span {
  color: #5e7891;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-two-factor-secret-box .button.is-copied {
  border-color: rgba(48, 148, 103, 0.42) !important;
  background: rgba(232, 248, 240, 0.95) !important;
  color: #1e6b45 !important;
}

.portal-mini-note.portal-admin-backup--compact {
  margin-top: 10px;
  padding: 10px 12px;
}

.portal-mini-note.portal-admin-backup--compact strong {
  margin-bottom: 4px;
}

.portal-mini-note.portal-admin-backup--compact p {
  margin: 4px 0 8px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.portal-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-backup-actions form {
  margin: 0;
}

.portal-backup-actions .button {
  min-height: 34px;
  padding: 7px 12px;
}

.portal-backup-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.portal-backup-file {
  width: 130px;
  max-width: 100%;
  font-size: 0.76rem;
  color: #4b6074;
}

.portal-backup-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.portal-backup-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(121, 141, 161, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.portal-backup-item strong,
.portal-backup-item span {
  display: block;
}

.portal-backup-item strong {
  color: #203446;
}

.portal-backup-item span {
  margin-top: 3px;
  color: #607487;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.portal-two-factor-form {
  gap: 12px;
}

@media (max-width: 720px) {
  .portal-account-edit__grid {
    grid-template-columns: 1fr;
  }

  .portal-two-factor-setup {
    grid-template-columns: 1fr;
  }

  .portal-two-factor-choice-grid {
    grid-template-columns: 1fr;
  }

  .portal-two-factor-qr {
    order: 2;
    width: min(100%, 220px);
    min-height: 180px;
  }

  .portal-two-factor-setup__copy {
    order: 1;
  }

  .portal-two-factor-desktop-help {
    display: none;
  }

  .portal-two-factor-mobile-help,
  .portal-two-factor-mobile-actions {
    display: flex;
  }

  .portal-two-factor-mobile-actions {
    margin: 4px 0;
  }

  .portal-two-factor-secret-box code {
    width: 100%;
    user-select: all;
  }
}

.portal-mini-note {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 253, 0.9);
}

.portal-mini-note strong {
  display: block;
  margin-bottom: 8px;
  color: #28445f;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-mini-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.portal-mini-note--guest {
  border-color: rgba(107, 131, 157, 0.22);
  background: rgba(244, 248, 252, 0.94);
}

.portal-delete-account {
  border-color: rgba(177, 110, 82, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 250, 247, 0.96), rgba(246, 239, 235, 0.9));
}

.portal-delete-confirm {
  margin-top: 12px;
}

.portal-delete-confirm summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(177, 110, 82, 0.26);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 247, 243, 0.98), rgba(247, 234, 228, 0.96));
  color: #7d4029;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 800;
  list-style: none;
  box-shadow: 0 8px 18px rgba(125, 64, 41, 0.08);
}

.portal-delete-confirm summary::-webkit-details-marker {
  display: none;
}

.portal-delete-confirm[open] summary {
  border-color: rgba(177, 110, 82, 0.36);
  color: #6b311e;
}

.portal-delete-confirm__form {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(177, 110, 82, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.portal-delete-confirm__form label {
  display: grid;
  gap: 7px;
  color: #28445f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.portal-delete-confirm__form input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(107, 131, 157, 0.22);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.portal-delete-confirm__check {
  display: flex !important;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 9px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.45;
  text-transform: none !important;
}

.portal-delete-confirm__check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #b16e52;
}

.portal-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.portal-inline-form {
  margin: 0;
}

.portal-inline-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
}

.portal-document-archive-note {
  padding: 12px 14px;
  border: 1px solid rgba(133, 150, 168, 0.22);
  border-radius: 14px;
  background: rgba(244, 247, 251, 0.96);
  color: #4d6278;
}

.portal-countdown-card {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(92, 126, 165, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(245, 249, 253, 0.96), rgba(232, 240, 248, 0.96));
}

.portal-countdown-card strong,
.portal-countdown strong {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  color: #203446;
}

.portal-countdown-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.66;
}

.portal-countdown {
  min-width: 200px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(47, 127, 224, 0.18);
  background: rgba(233, 242, 251, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.portal-countdown strong {
  font-size: 1.08rem;
  letter-spacing: -0.03em;
}

.portal-countdown span {
  color: #45637d;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portal-countdown--inline {
  margin-top: 18px;
  min-width: 0;
}

.button-danger {
  border-color: rgba(177, 110, 82, 0.24);
  background: linear-gradient(180deg, rgba(255, 246, 242, 0.98), rgba(246, 231, 224, 0.96));
  color: #7d4029;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(125, 64, 41, 0.1);
}

.button-danger:hover,
.button-danger:focus-visible {
  border-color: rgba(177, 110, 82, 0.32);
  color: #6b311e;
}

.document-preview {
  padding: 22px;
  --accent-rgb: 88, 102, 116;
  --accent-text: #51606f;
}

.document-preview__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.document-preview__header h3 {
  margin: 4px 0 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.document-preview__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.document-preview__meta div,
.document-preview__note,
.document-preview__totals div {
  padding: 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 253, 0.9);
}

.document-preview__meta strong {
  display: block;
  margin-bottom: 8px;
  color: #28445f;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-preview__meta p,
.document-preview__note {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.document-preview__note {
  white-space: pre-line;
}

.document-preview__rows {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.document-preview__row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(70px, 0.6fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr);
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
}

.document-preview__row strong {
  color: #203446;
  text-align: right;
}

.document-preview__row span:nth-child(2),
.document-preview__row span:nth-child(3) {
  text-align: right;
}

.document-preview__empty {
  padding: 16px;
  border: 1px dashed rgba(121, 141, 161, 0.28);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(248, 251, 253, 0.72);
}

.document-preview__totals {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.document-preview__totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.document-preview__totals strong {
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.05rem;
}

.portal-admin-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.portal-admin-form textarea {
  min-height: 122px;
}

.field--checkbox {
  justify-content: end;
}

.checkbox-row {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 253, 0.9);
  color: var(--muted);
}

.checkbox-row input {
  width: 18px;
  height: 18px;
}

.portal-document-form {
  display: grid;
  gap: 16px;
}

.portal-section--documents-builder {
  padding-top: 20px;
}

.document-builder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
  gap: 20px;
  align-items: start;
}

.document-builder-form,
.document-builder-preview-shell {
  min-width: 0;
}

.document-builder-preview-shell {
  display: grid;
  gap: 14px;
  align-content: start;
  position: relative;
}

.document-builder-form {
  display: grid;
  gap: 20px;
  align-content: start;
}

.document-builder-widget {
  min-width: 0;
}

.document-builder-form-panel {
  padding: 24px;
}

.document-builder-form-panel > h2 {
  margin-bottom: 12px;
}

.document-builder-meta-panel,
.document-builder-actions-panel {
  padding: 24px;
}

.document-builder-meta-panel h3,
.document-builder-actions-panel h3 {
  margin: 4px 0 14px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.document-builder-actions-panel .login-actions {
  margin-top: 0;
}

.document-template-dock {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}

.document-template-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.document-template-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-dock__field {
  margin: 0;
}

.document-template-dock__field span,
.document-template-slider-field span,
.document-template-select-field span {
  display: block;
  margin-bottom: 6px;
  color: #587ba0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.document-template-inspector {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  border-radius: 14px;
  background: rgba(247, 250, 253, 0.92);
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  max-height: min(76vh, 720px);
  overflow: auto;
  z-index: 90;
  box-shadow: 0 22px 40px rgba(25, 46, 67, 0.14);
  backdrop-filter: blur(14px);
}

.document-template-inspector[hidden] {
  display: none !important;
}

.document-template-inspector__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.document-template-inspector__head strong {
  display: block;
  color: #203446;
  font-size: 1rem;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
}

.document-template-inspector__note {
  margin: 0;
  color: #5f7893;
  font-size: 0.86rem;
  line-height: 1.58;
}

.document-template-inspector__global {
  display: grid;
  gap: 10px;
}

.document-template-inspector__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.document-template-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(121, 141, 161, 0.14);
  border-radius: 999px;
  background: rgba(246, 250, 253, 0.96);
  color: #375676;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-template-toggle input {
  margin: 0;
  accent-color: #2f7fe0;
}

.document-template-stepper,
.document-template-size-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-hidden-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(47, 127, 224, 0.28);
  border-radius: 12px;
  background: rgba(237, 247, 255, 0.58);
}

.document-template-hidden-panel[hidden] {
  display: none !important;
}

.document-template-hidden-panel > span {
  color: #587ba0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.document-template-hidden-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-hidden-list__button {
  appearance: none;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(47, 127, 224, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #23517a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.document-template-stepper .button,
.document-template-size-buttons .button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
}

.document-template-size-buttons .button.is-active {
  border-color: rgba(47, 127, 224, 0.28);
  background: linear-gradient(180deg, rgba(65, 137, 226, 0.22), rgba(47, 127, 224, 0.18));
  color: #21456b;
}

.document-template-inspector__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.document-template-inspector__grid--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-template-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.document-template-slider input[type="range"],
.document-template-scale-control input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #2f7fe0;
}

.document-template-slider output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #223849;
  font-size: 0.74rem;
  font-weight: 700;
}

.document-template-table-tools {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(47, 127, 224, 0.14);
  border-radius: 14px;
  background: rgba(238, 247, 255, 0.72);
}

.document-template-table-tools[hidden] {
  display: none !important;
}

.document-template-inspector__field {
  margin: 0;
}

.document-template-order-output,
.document-template-scale-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(121, 141, 161, 0.14);
  border-radius: 999px;
  background: rgba(244, 248, 252, 0.96);
  color: #223849;
  font-size: 0.76rem;
  font-weight: 700;
}

.document-template-storage {
  display: none !important;
}

.document-template-select-field select,
.document-template-dock__field select {
  min-height: 38px;
}

.document-template-scale-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.document-template-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.document-template-edit-mode [data-template-section] {
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: outline-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.document-template-edit-mode [data-template-section].is-draggable {
  cursor: grab;
}

.document-template-edit-mode [data-template-section].is-moving,
.document-template-edit-mode [data-template-section].is-dragging {
  opacity: 0.66;
  cursor: grabbing;
  z-index: 50;
  transition: outline-color 180ms ease, box-shadow 180ms ease;
}

.document-template-edit-mode [data-template-section] img {
  -webkit-user-drag: none;
  pointer-events: none;
  user-select: none;
}

.document-template-edit-mode [data-template-section]:hover {
  outline: 2px dashed rgba(47, 127, 224, 0.44);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(47, 127, 224, 0.08);
}

.document-template-edit-mode [data-template-section].is-selected {
  outline: 2px solid rgba(47, 127, 224, 0.78);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(47, 127, 224, 0.12);
}

.document-template-edit-mode [data-template-section].is-drop-target {
  outline: 2px dashed rgba(47, 127, 224, 0.88);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(47, 127, 224, 0.16);
}

.document-template-selection-toolbar {
  position: fixed;
  z-index: 1800;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(720px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid rgba(42, 111, 199, 0.32);
  border-radius: 16px;
  background: rgba(249, 252, 255, 0.97);
  box-shadow:
    0 18px 34px rgba(26, 74, 124, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px);
  color: #203446;
  pointer-events: auto;
  flex-wrap: wrap;
}

.document-template-selection-toolbar[hidden] {
  display: none !important;
}

.document-template-selection-toolbar__title {
  max-width: 140px;
  padding: 0 8px;
  color: #2c567f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-template-selection-toolbar button {
  appearance: none;
  min-width: 34px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(87, 138, 201, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 246, 255, 0.92));
  color: #24435f;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.document-template-selection-toolbar button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.5);
  box-shadow: 0 8px 18px rgba(36, 91, 155, 0.16);
}

.document-template-selection-toolbar button[hidden] {
  display: none !important;
}

.document-template-selection-toolbar button[data-template-action="hide"] {
  border-color: rgba(208, 82, 82, 0.32);
  background: linear-gradient(180deg, rgba(255, 249, 247, 0.98), rgba(255, 234, 228, 0.94));
  color: #8a2f25;
}

.document-template-selection-toolbar button[data-template-action="reset"] {
  border-color: rgba(117, 138, 159, 0.28);
  color: #526d86;
}

.document-template-edit-mode [data-inline-edit-field] {
  border-radius: 10px;
}

.document-template-edit-mode [data-inline-edit-field].is-inline-editable {
  cursor: text;
  touch-action: auto;
  user-select: text;
  outline: 1px dashed rgba(47, 127, 224, 0.44);
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.46);
}

.document-template-edit-mode [data-inline-edit-field].is-inline-editable:focus {
  outline: 2px solid rgba(47, 127, 224, 0.74);
  box-shadow: 0 0 0 4px rgba(47, 127, 224, 0.14);
  background: rgba(255, 255, 255, 0.78);
}

.portal-admin-summary-panel {
  margin-top: 18px;
}

.portal-admin-summary-panel h3 {
  margin: 0;
}

.portal-admin-summary-panel__copy {
  margin: 8px 0 0;
  color: #5d7893;
  line-height: 1.58;
}

.portal-admin-summary-panel .portal-kpis {
  margin-top: 16px;
}

.document-builder-preview-shell .document-preview {
  position: sticky;
  top: 20px;
}

@media print {
  .document-template-dock {
    display: none !important;
  }

  .document-builder-preview-shell {
    display: block !important;
  }

  .document-builder-preview-shell .document-preview {
    position: static !important;
    top: auto !important;
  }
}

body[data-layout-role="admin"].admin-layout-has-customization .document-builder-preview-shell .document-preview {
  position: static;
  top: auto;
}

.document-builder-lines-panel {
  padding: 0;
}

.document-lines {
  padding: 22px;
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.document-lines__header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.document-lines__header h3 {
  margin: 4px 0 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.document-table {
  display: grid;
  gap: 12px;
}

.document-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 116px 140px 140px;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(112, 151, 185, 0.2);
  border-radius: 18px;
  background: rgba(247, 251, 254, 0.68);
  box-shadow: 0 18px 36px rgba(31, 62, 88, 0.07);
}

.document-line-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.document-row--head {
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #4d7cad;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.document-cell {
  display: block;
}

.document-cell--description {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.document-line-type {
  width: 132px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(121, 141, 161, 0.2);
  border-radius: 14px;
  background: rgba(247, 250, 253, 0.96);
  color: #28445f;
  font-size: 0.84rem;
  font-weight: 600;
}

.document-price-select {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(40, 116, 189, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 253, 0.92));
  color: #203f5f;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 22px rgba(46, 91, 129, 0.08);
}

.document-description-line {
  min-width: 0;
}

.document-cell input,
.document-cell select {
  width: 100%;
}

.document-cell input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(121, 151, 178, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: #203446;
  font: 700 0.96rem/1.2 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.document-cell input::placeholder {
  color: rgba(69, 91, 112, 0.54);
  font-weight: 600;
}

.document-number-cell {
  display: grid;
  gap: 6px;
}

.document-number-cell span {
  display: none;
  color: #4d7cad;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.document-cell--total {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 253, 0.9);
  color: #203446;
  font-weight: 700;
  white-space: nowrap;
}

.document-totals {
  margin-top: 18px;
  margin-left: auto;
  width: min(100%, 360px);
  display: grid;
  gap: 10px;
}

.document-totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 253, 0.9);
}

.document-totals span {
  color: var(--muted);
}

.document-totals strong {
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.1rem;
}

.price-manager-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.15fr);
  gap: 18px;
}

.price-manager-card {
  padding: clamp(18px, 2vw, 28px);
}

.price-manager-card h2 {
  margin: 4px 0 10px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.02;
  color: #203446;
}

.price-manager-card > p {
  max-width: 64ch;
  color: #60738a;
  line-height: 1.6;
}

.price-manager-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.price-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portal-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #294560;
  font-weight: 700;
}

.portal-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #1f7ed0;
}

.price-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.price-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(119, 151, 178, 0.24);
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.82);
  box-shadow: 0 16px 36px rgba(29, 58, 84, 0.08);
}

.price-list-item.is-muted {
  opacity: 0.62;
}

.price-list-item__category {
  display: block;
  margin-bottom: 4px;
  color: #4e7caf;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price-list-item strong {
  color: #203446;
}

.price-list-item p {
  margin: 6px 0 0;
  color: #62758b;
}

.price-list-item__meta {
  display: grid;
  gap: 4px;
  justify-items: end;
  white-space: nowrap;
}

.price-list-item__meta span {
  color: #60809d;
  font-size: 0.82rem;
  font-weight: 700;
}

.price-list-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .price-manager-shell,
  .price-manager-grid,
  .price-list-item {
    grid-template-columns: 1fr;
  }

  .price-list-item__meta,
  .price-list-item__actions {
    justify-items: start;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .document-view-toolbar {
    width: min(calc(100% - 16px), 210mm);
    justify-content: stretch;
  }

  .document-view-toolbar .button {
    flex: 1 1 100%;
  }

  .document-row,
  .document-row--head {
    grid-template-columns: 1fr;
  }

  .document-row--head {
    display: none;
  }

  .document-cell--description {
    grid-template-columns: 1fr;
  }

  .document-line-type {
    width: 100%;
  }

  .document-number-cell span {
    display: block;
  }

  .document-cell--total {
    justify-content: space-between;
  }

  .document-cell--total::before {
    content: "Totaal";
    color: #4d7cad;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

.document-page {
  min-height: 100vh;
}

.document-page-main {
  padding-top: 18px;
  padding-bottom: 24px;
}

.document-view-toolbar {
  width: min(calc(100% - 18px), 210mm);
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(120, 153, 181, 0.22);
  border-radius: 18px;
  background: rgba(236, 245, 252, 0.92);
  box-shadow: 0 18px 42px rgba(19, 38, 55, 0.16);
}

.document-sheet {
  width: min(calc(100% - 18px), 210mm);
  margin: 0 auto;
  padding: 24px;
  --accent-rgb: 88, 102, 116;
  --accent-text: #51606f;
  box-shadow:
    0 26px 56px rgba(58, 77, 96, 0.14),
    0 0 0 1px rgba(111, 185, 255, 0.05);
}

.document-page--a4 .document-sheet {
  min-height: min(297mm, calc(100vh - 42px));
}

.document-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}

.document-sheet__header {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(120, 140, 160, 0.18);
}

.document-brand {
  display: grid;
  gap: 12px;
}

.document-brand img {
  width: min(100%, 210px);
  height: auto;
}

.document-brand strong,
.document-heading h1 {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  color: #203446;
  letter-spacing: -0.03em;
}

.document-brand strong {
  font-size: 1.12rem;
}

.document-brand span,
.document-heading p,
.document-meta-card p,
.document-intro p,
.document-note p,
.document-footer p {
  color: var(--muted);
  line-height: 1.72;
}

.document-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 1.45rem + 0.9vw, 2.45rem);
}

.document-heading p {
  margin: 0;
  font-size: 0.96rem;
}

.document-sheet__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.document-meta-card {
  padding: 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 14px;
  background: rgba(248, 251, 253, 0.9);
  break-inside: avoid;
}

.document-meta-card strong,
.document-note strong {
  display: block;
  margin-bottom: 10px;
  color: #28445f;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-meta-card p {
  margin: 0;
  font-size: 0.96rem;
}

.document-intro {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(248, 251, 253, 0.9);
  border: 1px solid rgba(121, 141, 161, 0.18);
  break-inside: avoid;
}

.document-intro p {
  margin: 0;
}

.document-payment-block {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(248, 251, 253, 0.95), rgba(235, 243, 250, 0.92));
  break-inside: avoid;
}

.document-payment-block__copy {
  display: grid;
  gap: 10px;
}

.document-payment-block__copy h2 {
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.3rem;
  color: #203446;
  letter-spacing: -0.03em;
}

.document-payment-block__copy p,
.document-payment-list p,
.document-qr-frame span {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.document-payment-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.document-payment-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.document-payment-list strong {
  color: #28445f;
}

.document-payment-helper {
  font-size: 0.92rem;
}

.document-payment-block__qr {
  display: flex;
  justify-content: center;
  align-items: center;
}

.document-qr-frame {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  background: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.document-qr-frame--empty {
  gap: 8px;
}

.document-qr-frame--empty strong {
  color: #28445f;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-qr {
  width: 176px;
  min-height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(121, 141, 161, 0.14);
}

.document-qr canvas,
.document-qr img,
.document-qr-image {
  display: block;
  width: 100%;
  height: auto;
}

.document-qr--missing {
  min-height: 176px;
  text-align: center;
}

.document-qr--missing span {
  color: #426c95;
  font-size: 0.85rem;
  font-weight: 800;
}

.document-table-sheet {
  margin-top: 18px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  break-inside: auto;
}

.document-table-sheet__head,
.document-table-sheet__row {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr);
  gap: 0;
}

.document-table-sheet__head {
  background: rgba(236, 244, 252, 0.96);
  color: #4d7cad;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.document-table-sheet__head span,
.document-table-sheet__row span {
  padding: 12px 14px;
}

.document-table-sheet__row {
  border-top: 1px solid rgba(121, 141, 161, 0.14);
  break-inside: avoid;
}

.document-table-sheet__row span:nth-child(2),
.document-table-sheet__row span:nth-child(3),
.document-table-sheet__row span:nth-child(4),
.document-table-sheet__head span:nth-child(2),
.document-table-sheet__head span:nth-child(3),
.document-table-sheet__head span:nth-child(4) {
  text-align: right;
}

.document-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 20px;
  margin-top: 18px;
}

.document-summary__notes {
  display: grid;
  gap: 14px;
}

.document-note {
  padding: 16px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  border-radius: 14px;
  background: rgba(248, 251, 253, 0.9);
  break-inside: avoid;
}

.document-note p {
  margin: 0;
}

.document-summary__totals {
  display: grid;
  gap: 10px;
}

.document-summary__totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(121, 141, 161, 0.18);
  background: rgba(248, 251, 253, 0.9);
  break-inside: avoid;
}

.document-summary__totals span {
  color: var(--muted);
}

.document-summary__totals strong {
  color: #203446;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.08rem;
}

.document-total-final {
  border-color: rgba(47, 127, 224, 0.24) !important;
  background: rgba(235, 243, 252, 0.96) !important;
}

.document-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 140, 160, 0.18);
  break-inside: avoid;
}

.document-footer p {
  margin: 0;
  font-size: 0.9rem;
}

.document-sheet--professional,
.document-preview--professional {
  position: relative;
  overflow: hidden;
  border-color: rgba(120, 145, 170, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 252, 255, 0.985)),
    linear-gradient(135deg, rgba(76, 149, 219, 0.05), transparent 42%);
}

.document-sheet--professional::before,
.document-preview--professional::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(96, 171, 246, 0.12), transparent 28%),
    linear-gradient(90deg, rgba(203, 220, 236, 0.28) 1px, transparent 1px),
    linear-gradient(rgba(203, 220, 236, 0.28) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}

.document-sheet--professional > *,
.document-preview--professional > * {
  position: relative;
  z-index: 1;
}

.document-sheet--professional .panel-corners,
.document-preview--professional .panel-corners {
  display: none;
}

.document-sheet--professional {
  padding: clamp(24px, 4vw, 36px);
  border-radius: 30px;
}

.document-sheet--professional .document-brand,
.document-preview--professional .document-brand {
  display: block;
  width: fit-content;
}

.document-sheet--professional .document-brand img {
  width: min(100%, 190px);
}

.document-preview--professional .document-brand img {
  width: min(100%, 142px);
}

.document-sheet__hero,
.document-preview__hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: start;
}

.document-brand--editable {
  align-self: start;
}

.document-template-section--logo.document-brand {
  display: grid;
  align-content: start;
  justify-items: start;
}

.document-template-section--logo.document-brand img {
  max-width: 100%;
}

.document-sheet__brand-panel,
.document-preview__brand-panel {
  display: grid;
  gap: 16px;
}

.document-company-card,
.document-party-card,
.document-lead-card,
.document-fact-card,
.document-note,
.document-footer--professional > div,
.document-preview__company-card,
.document-preview__party-card,
.document-preview__lead,
.document-preview__fact-card,
.document-preview__note,
.document-preview__payment-copy,
.document-preview__qr-card,
.document-preview__totals div {
  padding: 16px 18px;
  border: 1px solid rgba(122, 142, 163, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.document-company-card,
.document-preview__company-card {
  display: grid;
  gap: 5px;
}

.document-company-card p,
.document-preview__company-card p,
.document-party-card p,
.document-preview__party-card p,
.document-lead-card p,
.document-preview__lead,
.document-preview__payment-copy p,
.document-note p,
.document-preview__note {
  margin: 0;
  color: #576c82;
  line-height: 1.72;
}

.document-lead-card--update {
  background: rgba(236, 244, 255, 0.92);
  border-style: dashed;
}

.document-sheet__title-panel,
.document-preview__title-panel {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(76, 149, 219, 0.18);
  background:
    linear-gradient(145deg, rgba(244, 249, 255, 0.98), rgba(232, 241, 251, 0.96)),
    linear-gradient(90deg, rgba(70, 143, 214, 0.08), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 18px 34px rgba(55, 89, 122, 0.08);
}

.document-sheet__title-top,
.document-preview__title-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.document-sheet__title-copy,
.document-preview__title-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.document-sheet__title-top .portal-status,
.document-preview__title-top .portal-status {
  justify-self: end;
  align-self: start;
}

.document-sheet__title-panel h1,
.document-preview__title-panel h3 {
  margin: 0;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  letter-spacing: -0.05em;
  line-height: 0.94;
  color: #16283b;
}

.document-sheet__title-panel h1 {
  font-size: clamp(2.35rem, 2rem + 1vw, 3.2rem);
}

.document-preview__title-panel h3 {
  font-size: clamp(1.55rem, 1.2rem + 0.8vw, 2rem);
}

.document-sheet__subject,
.document-preview__subject {
  margin: 0;
  color: #5a7086;
  line-height: 1.68;
  max-width: 38ch;
}

.document-sheet__meta-note,
.document-preview__meta-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(124, 145, 166, 0.18);
  color: #587796;
}

.document-sheet__meta-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.document-sheet__meta-note span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.document-sheet__meta-note strong {
  color: #16283b;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.document-preview__meta-note {
  max-width: 34ch;
  font-size: 0.84rem;
  line-height: 1.55;
}

.document-sheet__numberline,
.document-preview__numberline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(124, 145, 166, 0.18);
}

.document-sheet__numberline strong,
.document-preview__numberline strong {
  color: #16283b;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.document-sheet__numberline strong {
  font-size: 1.1rem;
}

.document-preview__numberline strong {
  font-size: 0.96rem;
}

.document-sheet__overview,
.document-preview__overview {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 18px;
}

.document-block-label {
  display: inline-flex;
  margin-bottom: 10px;
  color: #507aa3;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.document-party-card strong,
.document-preview__party-card strong {
  display: block;
  margin-bottom: 8px;
  color: #1f3347;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.document-facts-grid,
.document-preview__facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-facts-grid--streamlined,
.document-preview__facts-grid--streamlined {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.document-facts-grid--streamlined .document-fact-card,
.document-preview__facts-grid--streamlined .document-preview__fact-card {
  background: rgba(248, 251, 254, 0.88);
  border-color: rgba(122, 142, 163, 0.12);
  box-shadow: none;
}

.document-fact-card span,
.document-preview__fact-card span {
  display: block;
  margin-bottom: 8px;
  color: #587796;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.document-fact-card strong,
.document-preview__fact-card strong {
  color: #1b2f42;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.document-lead-card {
  margin-top: 20px;
  border-left: 4px solid rgba(66, 139, 212, 0.36);
}

.document-payment-block--professional {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(237, 244, 252, 0.96));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 18px;
}

.document-payment-block--professional .document-payment-block__copy h2 {
  margin: 6px 0 10px;
  font-size: clamp(1.2rem, 1rem + 0.4vw, 1.55rem);
  color: #1f3347;
  letter-spacing: -0.03em;
}

.document-payment-block--professional .document-payment-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.document-payment-block--professional .document-payment-list p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(124, 145, 166, 0.15);
}

.document-payment-block--professional .document-payment-list p strong {
  color: #203446;
}

.document-payment-block--professional .document-payment-list p span {
  color: #5a7086;
  text-align: right;
}

.document-payment-online-note {
  margin-top: 12px;
  color: #5d7893;
  line-height: 1.6;
}

.document-payment-block--professional .document-payment-helper {
  margin-top: 14px;
}

.document-payment-open {
  width: 100%;
}

.document-table-sheet--professional {
  margin-top: 24px;
  border-radius: 22px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.document-sheet--professional .document-table-sheet__head,
.document-sheet--professional .document-table-sheet__row {
  grid-template-columns: minmax(0, 2.6fr) minmax(88px, 0.72fr) minmax(120px, 0.88fr) minmax(76px, 0.5fr) minmax(126px, 0.94fr);
}

.document-sheet--professional .document-table-sheet__head {
  background: linear-gradient(90deg, rgba(233, 242, 251, 0.98), rgba(244, 249, 255, 0.98));
  color: #51789b;
}

.document-sheet--professional .document-table-sheet__row {
  background: rgba(255, 255, 255, 0.96);
}

.document-sheet--professional .document-table-sheet__row:nth-child(even) {
  background: rgba(248, 251, 254, 0.94);
}

.document-sheet--professional .document-table-sheet__row span:nth-child(2),
.document-sheet--professional .document-table-sheet__row span:nth-child(3),
.document-sheet--professional .document-table-sheet__row span:nth-child(4),
.document-sheet--professional .document-table-sheet__row span:nth-child(5),
.document-sheet--professional .document-table-sheet__head span:nth-child(2),
.document-sheet--professional .document-table-sheet__head span:nth-child(3),
.document-sheet--professional .document-table-sheet__head span:nth-child(4),
.document-sheet--professional .document-table-sheet__head span:nth-child(5) {
  text-align: right;
}

.document-summary--professional {
  margin-top: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.document-summary--professional .document-summary__totals div {
  padding: 16px 18px;
  border-radius: 18px;
}

.document-footer--professional {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(121, 141, 161, 0.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.document-footer--professional strong {
  display: block;
  margin-bottom: 8px;
  color: #203446;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.document-qr--placeholder {
  display: grid;
  place-items: center;
  color: #23486d;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.18;
  padding-inline: 12px;
  text-align: center;
  letter-spacing: -0.04em;
}

.document-sheet--professional {
  padding: clamp(18px, 3vw, 28px);
  border-radius: 24px;
}

.document-sheet--professional .document-brand img {
  width: min(100%, 190px);
}

.document-sheet__title-panel,
.document-preview__title-panel {
  padding: 18px 20px;
  border-radius: 20px;
}

.document-sheet__title-panel h1 {
  font-size: clamp(1.95rem, 1.7rem + 0.8vw, 2.65rem);
}

.document-preview__title-panel h3 {
  font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.75rem);
}

.document-sheet__subject,
.document-preview__subject {
  font-size: 0.94rem;
  line-height: 1.56;
}

.document-sheet__meta-note,
.document-preview__meta-note {
  padding-top: 12px;
}

.document-sheet__meta-note span {
  font-size: 0.7rem;
}

.document-sheet__meta-note strong {
  font-size: 0.92rem;
}

.document-preview__meta-note {
  font-size: 0.8rem;
}

.document-sheet__numberline,
.document-preview__numberline {
  margin-top: 12px;
  padding-top: 12px;
}

.document-sheet__numberline strong {
  font-size: 0.98rem;
}

.document-company-card,
.document-party-card,
.document-lead-card,
.document-fact-card,
.document-note,
.document-footer--professional > div,
.document-preview__company-card,
.document-preview__party-card,
.document-preview__lead,
.document-preview__fact-card,
.document-preview__note,
.document-preview__payment-copy,
.document-preview__qr-card,
.document-preview__totals div {
  padding: 14px 16px;
  border-radius: 16px;
}

.document-company-card p,
.document-preview__company-card p,
.document-party-card p,
.document-preview__party-card p,
.document-lead-card p,
.document-preview__lead,
.document-preview__payment-copy p,
.document-note p,
.document-preview__note,
.document-footer p {
  font-size: 0.92rem;
  line-height: 1.6;
}

.document-party-card strong,
.document-preview__party-card strong {
  font-size: 0.98rem;
}

.document-fact-card span,
.document-preview__fact-card span {
  margin-bottom: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.document-fact-card strong,
.document-preview__fact-card strong {
  font-size: 0.92rem;
}

.document-lead-card {
  margin-top: 18px;
}

.document-payment-block--professional {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  gap: 14px;
}

.document-payment-block--professional .document-payment-block__copy h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.08rem, 0.98rem + 0.3vw, 1.28rem);
}

.document-payment-block--professional .document-payment-list {
  margin-top: 10px;
}

.document-payment-block--professional .document-payment-list p {
  padding: 8px 0;
}

.document-qr-frame {
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
}

.document-qr {
  width: 156px;
  min-height: 156px;
  padding: 8px;
  border-radius: 10px;
}

.document-table-sheet--professional {
  margin-top: 18px;
  border-radius: 18px;
}

.document-table-sheet__head {
  font-size: 0.68rem;
}

.document-table-sheet__head span,
.document-table-sheet__row span {
  padding: 9px 11px;
}

.document-sheet--professional .document-table-sheet__row span {
  font-size: 0.92rem;
}

.document-summary--professional {
  margin-top: 18px;
  gap: 14px;
}

.document-summary--professional .document-summary__totals div {
  padding: 12px 14px;
  border-radius: 14px;
}

.document-footer--professional {
  margin-top: 18px;
  padding-top: 14px;
  gap: 12px;
}

.document-footer--professional strong {
  margin-bottom: 6px;
  font-size: 0.72rem;
}

.document-preview--professional {
  padding: 20px;
  border-radius: 26px;
}

.document-preview__title-panel {
  display: grid;
  gap: 8px;
}

.document-preview__overview,
.document-preview__summary {
  margin-top: 16px;
}

.document-preview__lead {
  margin-top: 16px;
  white-space: pre-line;
}

.document-preview__payment {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(160px, 0.84fr);
  gap: 12px;
}

.document-preview__payment-copy strong {
  display: block;
  margin-bottom: 8px;
  color: #1f3347;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.document-preview__payment-copy p,
.document-preview__note {
  white-space: pre-line;
}

.document-preview__payment-helper {
  margin-top: 12px !important;
  color: #607893;
  font-size: 0.88rem;
  line-height: 1.55 !important;
}

.document-preview__qr-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.document-preview__qr-box {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(100, 124, 150, 0.18);
  background:
    linear-gradient(135deg, rgba(27, 53, 82, 0.05), rgba(27, 53, 82, 0.02)),
    linear-gradient(90deg, rgba(132, 157, 182, 0.18) 1px, transparent 1px),
    linear-gradient(rgba(132, 157, 182, 0.18) 1px, transparent 1px);
  background-size: auto, 12px 12px, 12px 12px;
  color: #1f3347;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-preview__payment[data-document-mode="quote"] .document-preview__qr-card {
  border-style: dashed;
  background: rgba(247, 250, 253, 0.92);
}

.document-preview__payment[data-document-mode="quote"] .document-preview__qr-box {
  opacity: 0.78;
}

.document-preview__payment-badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(76, 149, 219, 0.2);
  background: rgba(236, 245, 253, 0.98);
  color: #265989;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-sheet__title-panel h1 {
  font-size: clamp(1.72rem, 1.5rem + 0.65vw, 2.2rem);
}

.document-preview__title-panel h3 {
  font-size: clamp(1.14rem, 1rem + 0.42vw, 1.4rem);
}

.document-sheet__subject,
.document-preview__subject {
  font-size: 0.86rem;
  line-height: 1.48;
}

.document-sheet__numberline strong,
.document-preview__numberline strong {
  font-size: 0.9rem;
}

.document-company-card p,
.document-preview__company-card p,
.document-party-card p,
.document-preview__party-card p,
.document-lead-card p,
.document-preview__lead-card p,
.document-note p,
.document-preview__note p,
.document-footer--professional p {
  font-size: 0.84rem;
  line-height: 1.5;
}

.document-party-card strong,
.document-preview__party-card strong {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.document-fact-card strong,
.document-preview__fact-card strong {
  font-size: 0.82rem;
}

.document-payment-block--professional .document-payment-list p,
.document-payment-online-note,
.document-payment-block--professional .document-payment-helper {
  font-size: 0.84rem;
  line-height: 1.5;
}

.document-sheet--professional .document-table-sheet__head span,
.document-preview--professional .document-preview__table-head span {
  font-size: 0.68rem;
}

.document-sheet--professional .document-table-sheet__row span,
.document-preview--professional .document-preview__row span {
  font-size: 0.84rem;
}

.document-summary--professional .document-summary__totals div strong {
  font-size: 0.92rem;
}

.document-summary--professional .document-total-final strong {
  font-size: 1.02rem;
}

.payment-modal__intro,
.payment-modal__summary-note,
.payment-modal__scan-note {
  font-size: 0.92rem;
}

.payment-modal__detail strong {
  font-size: 0.94rem;
}

.document-preview__table {
  margin-top: 16px;
  border: 1px solid rgba(121, 141, 161, 0.16);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.document-preview__table-head,
.document-preview__row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(60px, 0.7fr) minmax(94px, 0.85fr) minmax(58px, 0.5fr) minmax(108px, 0.95fr);
}

.document-preview__table-head {
  background: linear-gradient(90deg, rgba(233, 242, 251, 0.98), rgba(244, 249, 255, 0.98));
  color: #51789b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.document-preview__table-head span,
.document-preview__row span {
  padding: 11px 12px;
}

.document-preview__row {
  align-items: center;
  border-top: 1px solid rgba(121, 141, 161, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

.document-preview__row:nth-child(even) {
  background: rgba(248, 251, 254, 0.94);
}

.document-preview__row span:nth-child(2),
.document-preview__row span:nth-child(3),
.document-preview__row span:nth-child(4),
.document-preview__row span:nth-child(5),
.document-preview__table-head span:nth-child(2),
.document-preview__table-head span:nth-child(3),
.document-preview__table-head span:nth-child(4),
.document-preview__table-head span:nth-child(5) {
  text-align: right;
}

.document-preview__row-total {
  color: #1e3247;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 700;
}

.document-preview__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.92fr);
  gap: 12px;
  align-items: start;
}

.document-preview__summary-notes,
.document-preview__totals {
  display: grid;
  gap: 10px;
}

.document-template-flow {
  display: grid;
  gap: 18px;
}

.document-template-flow > [data-template-section] {
  margin-top: 0 !important;
}

.document-template-section {
  position: relative;
  transform: translate(var(--template-x, 0px), var(--template-y, 0px));
  transform-origin: top left;
  width: var(--template-width, 100%);
  max-width: 100%;
  font-size: calc(1em * var(--template-text-scale, 1));
}

.document-template-section--hidden {
  display: none !important;
}

.document-template-surface--font-modern {
  --document-heading-font: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  --document-copy-font: "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif;
}

.document-template-surface--font-narrow {
  --document-heading-font: "Bahnschrift SemiCondensed", "Arial Narrow", "Bahnschrift", "Segoe UI", sans-serif;
  --document-copy-font: "Aptos Narrow", "Segoe UI Semilight", "Segoe UI", sans-serif;
}

.document-template-surface--font-classic {
  --document-heading-font: "Cambria", "Georgia", "Times New Roman", serif;
  --document-copy-font: "Calibri", "Segoe UI", sans-serif;
}

.document-template-surface--font-modern,
.document-template-surface--font-narrow,
.document-template-surface--font-classic {
  font-family: var(--document-copy-font, "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif);
}

.document-template-surface--font-modern .document-sheet__title-panel h1,
.document-template-surface--font-modern .document-preview__title-panel h3,
.document-template-surface--font-modern .document-payment-block__copy h2,
.document-template-surface--font-modern .document-brand strong,
.document-template-surface--font-modern .document-sheet__meta-note strong,
.document-template-surface--font-modern .document-summary__totals strong,
.document-template-surface--font-modern .document-preview__row-total,
.document-template-surface--font-modern .document-preview__totals strong,
.document-template-surface--font-modern .document-table-sheet__row span:last-child,
.document-template-surface--font-modern .document-fact-card strong,
.document-template-surface--font-modern .document-preview__fact-card strong,
.document-template-surface--font-narrow .document-sheet__title-panel h1,
.document-template-surface--font-narrow .document-preview__title-panel h3,
.document-template-surface--font-narrow .document-payment-block__copy h2,
.document-template-surface--font-narrow .document-brand strong,
.document-template-surface--font-narrow .document-sheet__meta-note strong,
.document-template-surface--font-narrow .document-summary__totals strong,
.document-template-surface--font-narrow .document-preview__row-total,
.document-template-surface--font-narrow .document-preview__totals strong,
.document-template-surface--font-narrow .document-table-sheet__row span:last-child,
.document-template-surface--font-narrow .document-fact-card strong,
.document-template-surface--font-narrow .document-preview__fact-card strong,
.document-template-surface--font-classic .document-sheet__title-panel h1,
.document-template-surface--font-classic .document-preview__title-panel h3,
.document-template-surface--font-classic .document-payment-block__copy h2,
.document-template-surface--font-classic .document-brand strong,
.document-template-surface--font-classic .document-sheet__meta-note strong,
.document-template-surface--font-classic .document-summary__totals strong,
.document-template-surface--font-classic .document-preview__row-total,
.document-template-surface--font-classic .document-preview__totals strong,
.document-template-surface--font-classic .document-table-sheet__row span:last-child,
.document-template-surface--font-classic .document-fact-card strong,
.document-template-surface--font-classic .document-preview__fact-card strong {
  font-family: var(--document-heading-font, "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif);
}

.document-template-surface--scale-compact .document-sheet__title-panel h1 {
  font-size: clamp(1.55rem, 1.32rem + 0.54vw, 1.95rem);
}

.document-template-surface--scale-large .document-sheet__title-panel h1 {
  font-size: clamp(1.9rem, 1.6rem + 0.78vw, 2.45rem);
}

.document-template-surface--scale-compact .document-preview__title-panel h3 {
  font-size: clamp(1.06rem, 0.96rem + 0.28vw, 1.24rem);
}

.document-template-surface--scale-large .document-preview__title-panel h3 {
  font-size: clamp(1.28rem, 1.12rem + 0.44vw, 1.56rem);
}

.document-template-surface--scale-compact .document-sheet__subject,
.document-template-surface--scale-compact .document-preview__subject,
.document-template-surface--scale-compact .document-company-card p,
.document-template-surface--scale-compact .document-preview__company-card p,
.document-template-surface--scale-compact .document-party-card p,
.document-template-surface--scale-compact .document-preview__party-card p,
.document-template-surface--scale-compact .document-lead-card p,
.document-template-surface--scale-compact .document-preview__lead,
.document-template-surface--scale-compact .document-payment-block__copy p,
.document-template-surface--scale-compact .document-preview__payment-copy p,
.document-template-surface--scale-compact .document-note p,
.document-template-surface--scale-compact .document-preview__note,
.document-template-surface--scale-compact .document-footer--professional p,
.document-template-surface--scale-compact .document-preview__table-head span,
.document-template-surface--scale-compact .document-table-sheet__head span,
.document-template-surface--scale-compact .document-table-sheet__row span,
.document-template-surface--scale-compact .document-preview__row span {
  font-size: 0.82rem;
}

.document-template-surface--scale-large .document-sheet__subject,
.document-template-surface--scale-large .document-preview__subject,
.document-template-surface--scale-large .document-company-card p,
.document-template-surface--scale-large .document-preview__company-card p,
.document-template-surface--scale-large .document-party-card p,
.document-template-surface--scale-large .document-preview__party-card p,
.document-template-surface--scale-large .document-lead-card p,
.document-template-surface--scale-large .document-preview__lead,
.document-template-surface--scale-large .document-payment-block__copy p,
.document-template-surface--scale-large .document-preview__payment-copy p,
.document-template-surface--scale-large .document-note p,
.document-template-surface--scale-large .document-preview__note,
.document-template-surface--scale-large .document-footer--professional p {
  font-size: 0.96rem;
}

.document-template-section--size-small.document-sheet__hero,
.document-template-section--size-small.document-preview__hero,
.document-template-section--size-small.document-sheet__overview,
.document-template-section--size-small.document-preview__overview,
.document-template-section--size-small.document-payment-block--professional,
.document-template-section--size-small.document-preview__payment,
.document-template-section--size-small.document-summary--professional,
.document-template-section--size-small.document-preview__summary,
.document-template-section--size-small.document-footer--professional {
  gap: 12px;
}

.document-template-section--size-large.document-sheet__hero,
.document-template-section--size-large.document-preview__hero,
.document-template-section--size-large.document-sheet__overview,
.document-template-section--size-large.document-preview__overview,
.document-template-section--size-large.document-payment-block--professional,
.document-template-section--size-large.document-preview__payment,
.document-template-section--size-large.document-summary--professional,
.document-template-section--size-large.document-preview__summary,
.document-template-section--size-large.document-footer--professional {
  gap: 22px;
}

.document-template-section--size-small.document-sheet__title-panel,
.document-template-section--size-small.document-preview__title-panel,
.document-template-section--size-small.document-company-card,
.document-template-section--size-small.document-party-card,
.document-template-section--size-small.document-lead-card,
.document-template-section--size-small.document-fact-card,
.document-template-section--size-small.document-note,
.document-template-section--size-small.document-preview__company-card,
.document-template-section--size-small.document-preview__party-card,
.document-template-section--size-small.document-preview__lead,
.document-template-section--size-small.document-preview__fact-card,
.document-template-section--size-small.document-preview__note,
.document-template-section--size-small.document-preview__payment-copy,
.document-template-section--size-small.document-preview__qr-card,
.document-template-section--size-small.document-preview__totals div,
.document-template-section--size-small.document-payment-block--professional,
.document-template-section--size-small.document-footer--professional > div {
  padding: 12px 14px;
}

.document-template-section--size-large.document-sheet__title-panel,
.document-template-section--size-large.document-preview__title-panel,
.document-template-section--size-large.document-company-card,
.document-template-section--size-large.document-party-card,
.document-template-section--size-large.document-lead-card,
.document-template-section--size-large.document-fact-card,
.document-template-section--size-large.document-note,
.document-template-section--size-large.document-preview__company-card,
.document-template-section--size-large.document-preview__party-card,
.document-template-section--size-large.document-preview__lead,
.document-template-section--size-large.document-preview__fact-card,
.document-template-section--size-large.document-preview__note,
.document-template-section--size-large.document-preview__payment-copy,
.document-template-section--size-large.document-preview__qr-card,
.document-template-section--size-large.document-preview__totals div,
.document-template-section--size-large.document-payment-block--professional,
.document-template-section--size-large.document-footer--professional > div {
  padding: 20px 22px;
}

.document-template-section--size-small.document-brand img,
.document-template-section--size-small.document-sheet--professional .document-brand img,
.document-sheet--professional .document-template-section--size-small.document-brand img {
  width: min(100%, 130px);
}

.document-preview--professional .document-template-section--size-small.document-brand img {
  width: min(100%, 92px);
}

.document-template-section--size-large.document-brand img,
.document-template-section--size-large.document-sheet--professional .document-brand img,
.document-sheet--professional .document-template-section--size-large.document-brand img {
  width: min(100%, 250px);
}

.document-preview--professional .document-template-section--size-large.document-brand img {
  width: min(100%, 185px);
}

.document-template-section--size-small.document-table-sheet--professional .document-table-sheet__head span,
.document-template-section--size-small.document-table-sheet--professional .document-table-sheet__row span,
.document-template-section--size-small.document-preview__table .document-preview__table-head span,
.document-template-section--size-small.document-preview__table .document-preview__row span {
  padding: 8px 10px;
}

.document-template-section--size-large.document-table-sheet--professional .document-table-sheet__head span,
.document-template-section--size-large.document-table-sheet--professional .document-table-sheet__row span,
.document-template-section--size-large.document-preview__table .document-preview__table-head span,
.document-template-section--size-large.document-preview__table .document-preview__row span {
  padding: 13px 15px;
}

.document-template-section--size-small.document-payment-block--professional .document-payment-block__copy h2 {
  font-size: 1rem;
}

.document-template-section--size-large.document-payment-block--professional .document-payment-block__copy h2 {
  font-size: 1.42rem;
}

@media screen and (min-width: 681px) and (max-width: 980px) {
  .document-sheet__hero,
  .document-sheet__overview,
  .document-payment-block--professional,
  .document-summary--professional,
  .document-footer--professional,
  .document-preview__hero,
  .document-preview__overview,
  .document-preview__payment,
  .document-preview__summary {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 640px) {
  .document-sheet--professional,
  .document-preview--professional {
    padding: 16px;
    border-radius: 22px;
  }

  .document-sheet__title-top,
  .document-preview__title-top {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .document-sheet__title-top .portal-status,
  .document-preview__title-top .portal-status {
    justify-self: start;
  }

  .document-sheet__title-panel,
  .document-preview__title-panel,
  .document-company-card,
  .document-party-card,
  .document-lead-card,
  .document-fact-card,
  .document-note,
  .document-footer--professional > div,
  .document-preview__company-card,
  .document-preview__party-card,
  .document-preview__lead,
  .document-preview__fact-card,
  .document-preview__note,
  .document-preview__payment-copy,
  .document-preview__qr-card,
  .document-preview__totals div {
    padding: 14px;
  }

  .document-preview__table-head {
    display: none;
  }

  .document-preview__row {
    grid-template-columns: 1fr;
  }

  .document-preview__row span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left !important;
    border-top: 1px solid rgba(121, 141, 161, 0.12);
  }

  .document-preview__row span::before {
    content: attr(data-label);
    color: #51789b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .document-facts-grid--streamlined,
  .document-preview__facts-grid--streamlined {
    grid-template-columns: 1fr;
  }
}

.no-print {
  display: flex;
}

.footer-callout {
  margin-top: 56px;
  padding: 0 0 18px;
}

.footer-callout__link {
  display: block;
  padding: 30px;
  --accent-rgb: 47, 127, 224;
  --accent-text: #1b5d95;
}

.footer-callout__link strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.55rem;
  color: #203446;
}

.site-footer {
  padding: 18px 0 36px;
}

.footer-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 28px 24px;
  --accent-rgb: 88, 102, 116;
  --accent-text: #51606f;
}

.footer-columns ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.footer-bottom {
  margin: 14px 0 0;
  color: var(--muted);
  text-align: center;
}

.project-card.is-hidden {
  display: none;
}

.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.28);
    opacity: 0.82;
  }
}

@keyframes pulseTrack {
  0%,
  100% {
    opacity: 0.45;
    transform: scaleX(0.92);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes monitorSweep {
  0% {
    transform: translateX(-150%);
  }

  100% {
    transform: translateX(160%);
  }
}

@keyframes navCoreFlux {
  0%,
  100% {
    transform: translateX(-20%) scaleX(0.9);
    opacity: 0.54;
  }

  50% {
    transform: translateX(20%) scaleX(1.08);
    opacity: 0.88;
  }
}

@keyframes navParticleDrift {
  0% {
    background-position: 0% 50%, 100% 0%, 40% 100%, 70% 24%, 0% 0%;
  }

  50% {
    background-position: 28% 46%, 84% 20%, 52% 78%, 62% 40%, 100% 0%;
  }

  100% {
    background-position: 56% 40%, 70% 36%, 68% 56%, 48% 60%, 200% 0%;
  }
}

@keyframes navSilverSweep {
  0%,
  64%,
  100% {
    transform: translateX(-190%) skewX(-20deg);
    opacity: 0;
  }

  8% {
    opacity: 0.16;
  }

  18% {
    transform: translateX(210%) skewX(-20deg);
    opacity: 0.62;
  }

  24% {
    opacity: 0;
  }
}

@keyframes navSweep {
  0%,
  18% {
    transform: translateX(-150%);
  }

  38% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes navLinePulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scaleX(0.9);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes buttonSweep {
  0%,
  22% {
    transform: translateX(-160%);
  }

  44% {
    transform: translateX(135%);
  }

  100% {
    transform: translateX(135%);
  }
}

@keyframes driftLine {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.45;
  }

  50% {
    transform: translateX(14px);
    opacity: 0.92;
  }
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 940px) {
  .header-main {
    min-height: auto;
  }

  .brand--banner {
    width: min(100%, 280px);
  }

  .hero-shell,
  .contact-layout,
  .service-grid,
  .project-grid,
  .process-grid,
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .hero-points,
  .visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-core {
    grid-template-columns: 200px 1fr;
  }

  .process-grid--linked::before {
    display: none;
  }

  .portal-admin-workspace {
    grid-template-columns: 1fr;
  }

  .portal-admin-sidebar {
    position: static;
  }

  .portal-admin-customer-list {
    max-height: none;
  }

  .portal-finance-header {
    flex-direction: column;
  }

  .portal-finance-top-strip__inner,
  .portal-page .portal-finance-top-strip__inner {
    grid-template-columns: 1fr;
  }

  .portal-finance-filter-list--inline,
  .portal-page .portal-finance-filter-list--inline {
    grid-template-columns: 1fr;
  }

  .portal-finance-header__actions {
    width: 100%;
  }

  .document-payment-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .top-toolbar__inner {
    justify-content: center;
    text-align: center;
  }

  .toolbar-group--right {
    justify-content: center;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(88, 116, 144, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(228, 236, 243, 0.96));
    color: var(--ink);
    cursor: pointer;
    justify-self: end;
  }

  .header-shell {
    width: min(calc(100% - 24px), var(--banner-width));
    padding: 18px 16px 16px;
    border-radius: 20px;
  }

  .header-shell:not(.header-shell--portal) {
    --home-banner-bg-size: auto 100%;
    --home-banner-bg-position: 70% center;
  }

  .header-main {
    min-height: 136px;
  }

  .brand--banner {
    width: min(100%, 220px);
  }

  .header-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .header-utility {
    position: static;
    grid-column: 1 / 2;
    justify-content: flex-start;
  }

  .header-shell:not(.header-shell--portal) .header-utility {
    width: 100%;
    margin: 10px 0 2px;
    justify-content: center;
  }

  .header-shell:not(.header-shell--portal) .site-nav {
    flex-wrap: wrap;
  }

  .site-nav {
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding-top: 6px;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    min-height: 46px;
    border-radius: 14px;
    perspective: none;
  }

  .site-nav a::before,
  .site-nav a::after,
  .nav-sheen,
  .nav-core,
  .nav-core::before,
  .nav-core::after {
    transition-duration: 220ms;
    animation: none;
  }

  .nav-sheen {
    opacity: 0.18;
    transform: translateX(-22%) skewX(-20deg);
  }

  .portal-session {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .portal-blocked-menu {
    width: 100%;
  }

  .portal-blocked-menu__toggle {
    width: 100%;
  }

  .portal-blocked-menu__panel {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 44px));
  }

  .portal-blocked-menu__item {
    grid-template-columns: 1fr;
  }

  .portal-blocked-menu__form .button {
    width: 100%;
  }

  .portal-admin-customer-list {
    grid-template-columns: 1fr;
  }

  .portal-admin-workspace,
  .portal-admin-main,
  .portal-admin-detail-group {
    gap: 14px;
  }

  .portal-finance-filter {
    padding: 13px 14px;
  }

  .portal-finance-header__actions .button {
    width: 100%;
  }

  .portal-payment-form__grid {
    grid-template-columns: 1fr;
  }

  .document-row,
  .document-summary,
  .document-sheet__header,
  .document-sheet__meta {
    grid-template-columns: 1fr;
  }

  .document-table-sheet__head {
    display: none;
  }

  .document-table-sheet__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .document-table-sheet__row span {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    text-align: left !important;
    border-top: 1px solid rgba(121, 141, 161, 0.14);
  }

  .document-table-sheet__row span::before {
    content: attr(data-label);
    flex: 0 0 92px;
    color: #4d7cad;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .document-table-sheet__row span:first-child {
    flex-direction: column;
    gap: 8px;
  }

  .document-table-sheet__row span:first-child::before {
    flex-basis: auto;
  }

  .document-sheet {
    padding: 18px;
    width: min(calc(100% - 12px), 100%);
    min-height: 0;
  }

  .document-template-grid,
  .document-template-toolbar,
  .document-template-item__controls,
  .document-template-inspector__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .top-toolbar__inner,
  .hero-shell,
  .callout-strip__inner,
  .content-section,
  .site-footer,
  .footer-callout__link {
    width: min(calc(100% - 18px), var(--content-width));
  }

  .header-shell {
    width: min(calc(100% - 18px), var(--banner-width));
  }

  .header-shell:not(.header-shell--portal) {
    --home-banner-bg-size: auto 100%;
    --home-banner-bg-position: 74% center;
  }

  .header-shell,
  .hero-copy,
  .hero-panel,
  .feature-card,
  .project-card,
  .process-card,
  .faq-item,
  .contact-copy,
  .contact-form,
  .appointment-form,
  .footer-columns,
  .footer-callout__link,
  .callout-strip__inner {
    border-radius: 12px;
  }

  .hero-section {
    padding-top: 20px;
  }

  .header-shell {
    padding: 16px 14px 14px;
  }

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

    .header-login-entry {
      width: 100%;
      padding-left: 0;
    }

    .header-shell:not(.header-shell--portal) .header-utility {
      margin: 12px 0 4px;
    }

    .header-shell:not(.header-shell--portal) .header-utility .portal-trigger {
      width: 100%;
      text-align: center;
      justify-content: center;
    }

    .portal-trigger {
      width: 100%;
      justify-items: center;
      text-align: center;
  }

  .brand--banner {
    width: min(100%, 190px);
  }

  .hero-copy,
  .hero-panel,
  .contact-copy,
  .contact-form,
  .appointment-form,
  .login-copy,
  .login-card,
  .footer-callout__link,
  .callout-strip__inner {
    padding: 22px;
  }

  .field-row,
  .booking-summary,
  .contact-switcher__buttons,
  .login-shell {
    grid-template-columns: 1fr;
  }

  .hero-points,
  .visual-grid,
  .visual-core {
    grid-template-columns: 1fr;
  }

  .portal-modal {
    padding: 16px;
  }

  .portal-modal__dialog {
    padding: 22px;
  }

  .portal-modal__choices {
    grid-template-columns: 1fr;
  }

  .visual-ring {
    width: min(100%, 220px);
    margin: 0 auto;
  }

  .toolbar-group {
    justify-content: center;
  }

  .scroll-top-button {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .portal-kpis {
    grid-template-columns: 1fr;
  }

  .portal-auth-shell {
    width: min(calc(100% - 18px), 760px);
  }

  .portal-auth-card {
    padding: 22px;
  }

  .portal-page--guest .portal-auth-shell {
    padding: 12px;
    border-radius: 24px;
  }

  .portal-page--guest .portal-auth-shell::after {
    inset: 12px;
    border-radius: 20px;
  }

  .portal-auth-switch {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-auth-tab {
    width: 100%;
    justify-content: center;
  }

  body.portal-page--verification .top-toolbar,
  body.portal-page--verification .site-header,
  body.portal-page--verification .site-footer {
    display: none;
  }

  body.portal-page--verification .portal-auth-section {
    padding: 8px 0 14px;
  }

  body.portal-page--verification .portal-auth-shell {
    width: min(calc(100% - 12px), 520px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.portal-page--verification .portal-auth-shell::before,
  body.portal-page--verification .portal-auth-shell::after {
    display: none;
  }

  body.portal-page--verification .portal-auth-card {
    padding: 16px;
    border-radius: 18px;
  }

  body.portal-page--verification .portal-auth-card h1 {
    margin-bottom: 8px;
    font-size: 1.55rem;
    line-height: 1.08;
  }

  body.portal-page--verification .portal-auth-card > p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  body.portal-page--verification .portal-auth-panels {
    margin-top: 14px;
    padding-top: 14px;
  }

  body.portal-page--verification .portal-auth-panel,
  body.portal-page--verification .portal-auth-form,
  body.portal-page--verification .password-live-feedback {
    gap: 12px;
  }

  body.portal-page--verification .portal-auth-form .field input {
    min-height: 50px;
  }

  body.portal-page--verification .portal-auth-note {
    padding: 11px 12px;
  }

  body.portal-page--verification .login-actions {
    margin-top: 0;
  }

  .portal-admin-customer {
    padding: 13px;
  }

  .portal-finance-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-finance-filter__count {
    align-self: flex-start;
  }

  .portal-case {
    padding: 22px;
  }

  .portal-case__top,
  .portal-session {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-countdown-card {
    grid-template-columns: 1fr;
  }

  .portal-status {
    align-self: flex-start;
  }

  .portal-shortcuts .button,
  .portal-countdown,
  .portal-customer-form .button,
  #portalDeleteForm .button,
  .portal-inline-links .button,
  .portal-admin-document .button {
    width: 100%;
  }

  .portal-session__actions {
    width: 100%;
  }

  .portal-session__actions .button,
  .portal-session__actions .portal-session__form {
    width: 100%;
  }

  .portal-session__actions .portal-session__form .button {
    width: 100%;
  }

  .portal-admin-customer__meta {
    gap: 6px;
  }

  .portal-admin-customer__meta span {
    font-size: 0.68rem;
  }

  .portal-finance-document__meta,
  .portal-finance-document__totals {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-finance-document__actions .button,
  .portal-finance-header__actions .button {
    width: 100%;
  }

  .document-qr {
    width: 154px;
    min-height: 154px;
  }

  .document-lines,
  .document-sheet {
    padding: 18px;
  }

  .document-lines__header,
  .document-sheet__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .document-totals {
    width: 100%;
  }

  .document-preview__meta,
  .document-preview__row {
    grid-template-columns: 1fr;
  }

  .document-builder-shell {
    grid-template-columns: 1fr;
  }

  .document-builder-preview-shell .document-preview {
    position: static;
  }

  .document-preview__row span,
  .document-preview__row strong {
    text-align: left !important;
  }

  .document-page-main {
    padding-top: 10px;
    padding-bottom: 18px;
  }

  .document-sheet__actions .button {
    width: 100%;
  }

  .document-brand img {
    width: min(100%, 170px);
  }

  .document-heading h1 {
    font-size: 1.55rem;
  }

  .document-meta-card,
  .document-intro,
  .document-note,
  .document-summary__totals div {
    padding: 14px;
  }

  .document-table-sheet__row span {
    padding: 11px 12px;
  }

  .document-table-sheet__row span::before {
    flex: 0 0 84px;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  .portal-page .header-shell--portal {
    width: min(calc(100% - 22px), var(--banner-width));
    padding: 14px;
  }

  .portal-page .header-main {
    min-height: 92px;
  }

  .portal-page .brand--banner {
    width: min(100%, 220px);
  }

  .portal-page .portal-admin-workspace {
    grid-template-columns: 1fr;
  }

  .portal-page .portal-admin-sidebar {
    position: static;
  }

  .portal-page .portal-admin-customer-list {
    max-height: none;
  }

  .portal-page .portal-admin-tabbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-page .portal-admin-overview-grid {
    grid-template-columns: 1fr;
  }

  .portal-page--finance .portal-finance-toolbar__group {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .portal-page--finance .portal-finance-toolbar__label {
    padding-top: 0;
  }

  .portal-page--finance .portal-finance-search-form {
    grid-template-columns: 1fr;
  }

  .portal-page--finance .portal-finance-summary {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .portal-page .site-nav.portal-nav a {
    min-height: 40px;
    padding: 0 14px;
  }

  .portal-page .login-copy,
  .portal-page .login-card,
  .portal-page .portal-case,
  .portal-page .portal-section-card,
  .portal-page .portal-finance-document,
  .portal-page .document-preview {
    padding: 16px;
  }

  .portal-page .portal-session {
    width: 100%;
    justify-content: space-between;
  }

  .portal-page .portal-session__actions {
    width: auto;
  }

  .portal-page .portal-admin-tabbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-page--finance .brand--banner {
    width: min(100%, 160px);
  }

  .portal-page--finance .brand--banner img {
    width: min(100%, 120px);
  }

  .portal-page--finance .site-nav.portal-nav a {
    min-height: 34px;
    padding: 0 11px;
  }

  .portal-page--finance .nav-label {
    font-size: 0.76rem;
  }

  .portal-page--finance .portal-finance-chip {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.74rem;
  }

  .portal-page--finance .portal-finance-search-actions,
  .portal-page--finance .portal-finance-summary__actions {
    width: auto;
  }

  .portal-page--finance .portal-finance-search-actions .button,
  .portal-page--finance .portal-finance-summary__actions .button,
  .portal-page--finance .portal-inline-button,
  .portal-page--finance .portal-payment-form__actions .button {
    flex: 0 0 auto;
    justify-content: center;
  }

  .portal-page--finance .portal-finance-document__summary {
    grid-template-columns: 1fr;
  }

  .portal-page--finance .portal-finance-document__summary-meta {
    justify-content: flex-start;
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .portal-auth-switch {
    grid-template-columns: 1fr;
  }

  .portal-auth-card .login-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-auth-card .login-actions .button {
    width: 100%;
  }

  .portal-page .portal-session,
  .portal-page .portal-session__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-page .portal-session__actions,
  .portal-page .portal-session__form,
  .portal-page .portal-session__actions .button,
  .portal-page .portal-session__form .button {
    width: 100%;
  }

  .portal-page .portal-admin-tabbar {
    grid-template-columns: 1fr;
  }
}

@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  html,
  body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .document-page {
    min-height: 0;
  }

  body[data-layout-role="admin"].admin-layout-has-customization main,
  body[data-layout-role="admin"].admin-layout-has-customization .content-section,
  body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget,
  body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    translate: none !important;
    z-index: auto !important;
  }

  .page-noise,
  .no-print,
  .scroll-top-button,
  .payment-modal,
  .document-payment-open,
  .admin-layout-controls,
  .admin-layout-widget__handle,
  .admin-layout-widget__resize,
  .admin-layout-widget__close {
    display: none !important;
  }

  .document-page-main,
  .content-section.document-page-main {
    width: 100%;
    margin: 0;
    padding: 0 !important;
  }

  .document-sheet {
    width: 100%;
    margin: 0 auto;
    padding: 3mm 2.5mm 4mm;
    border: 0;
    box-shadow: none;
    background: #ffffff;
    min-height: 0;
    font-size: 8.4pt;
    box-sizing: border-box;
    overflow: visible;
  }

  .portal-page--documents .document-builder-shell {
    display: block !important;
  }

  .portal-page--documents .document-builder-form,
  .portal-page--documents .document-builder-form-panel,
  .portal-page--documents .document-builder-lines-panel,
  .portal-page--documents .document-builder-meta-panel,
  .portal-page--documents .document-builder-actions-panel {
    display: none !important;
  }

  .portal-page--documents .document-builder-preview-shell {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .portal-page--documents .document-builder-preview-shell .document-preview {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
    border: 0 !important;
    background: #ffffff !important;
    padding: 0 !important;
  }

  .portal-page--documents .document-template-dock {
    display: none !important;
  }

  .document-template-inspector {
    top: 44px;
    left: 0;
    right: 0;
    width: auto;
  }

  .document-sheet::before,
  .document-sheet::after,
  .panel-corners {
    display: none !important;
  }

  .document-page--a4 .document-sheet {
    min-height: 0 !important;
  }

  .document-sheet__actions,
  .document-sheet__actions.no-print {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .document-sheet__hero {
    grid-template-columns: 34mm minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .document-sheet__brand-panel {
    gap: 8px;
    align-content: start;
  }

  .document-brand,
  .document-sheet--professional .document-brand {
    width: fit-content;
  }

  .document-brand img,
  .document-sheet--professional .document-brand img {
    width: 28mm;
    max-width: 28mm;
  }

  .document-sheet--professional .document-template-section--size-small.document-brand img {
    width: 21mm;
    max-width: 21mm;
  }

  .document-sheet--professional .document-template-section--size-large.document-brand img {
    width: 38mm;
    max-width: 38mm;
  }

  .document-sheet__title-panel {
    padding: 10px 12px;
    border-radius: 12px;
    gap: 8px;
  }

  .document-sheet__title-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .document-sheet__title-panel h1 {
    font-size: 15.5pt;
    line-height: 0.95;
  }

  .document-sheet__subject {
    font-size: 7.2pt;
    line-height: 1.35;
    max-width: none;
  }

  .document-sheet__meta-note {
    gap: 8px;
    padding-top: 7px;
    font-size: 7pt;
    line-height: 1.35;
  }

  .document-sheet__meta-note span {
    font-size: 5.8pt;
    letter-spacing: 0.09em;
  }

  .document-sheet__meta-note strong {
    font-size: 8.1pt;
  }

  .portal-status {
    min-height: 0;
    padding: 3px 7px;
    font-size: 5.8pt;
    letter-spacing: 0.12em;
  }

  .document-sheet__overview {
    margin-top: 10px;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.08fr);
    gap: 10px;
    align-items: stretch;
  }

  .document-facts-grid {
    gap: 7px;
  }

  .document-company-card,
  .document-party-card,
  .document-lead-card,
  .document-fact-card,
  .document-note,
  .document-footer--professional > div {
    padding: 8px 9px;
    border-radius: 10px;
  }

  .document-company-card p,
  .document-party-card p,
  .document-lead-card p,
  .document-note p,
  .document-footer--professional p {
    font-size: 6.9pt;
    line-height: 1.34;
  }

  .document-party-card strong {
    margin-bottom: 4px;
    font-size: 8.2pt;
  }

  .document-fact-card span {
    margin-bottom: 4px;
    font-size: 5.8pt;
    letter-spacing: 0.08em;
  }

  .document-fact-card strong {
    font-size: 7.3pt;
  }

  .document-lead-card {
    margin-top: 10px;
  }

  .document-payment-block--professional {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    gap: 10px;
    grid-template-columns: minmax(0, 1.24fr) 31mm;
    break-inside: auto;
    page-break-inside: auto;
  }

  .document-payment-block__copy {
    gap: 5px;
  }

  .document-payment-block__copy .section-kicker {
    font-size: 5.8pt;
    letter-spacing: 0.16em;
  }

  .document-payment-block--professional .document-payment-block__copy h2 {
    font-size: 9pt;
    margin: 0;
  }

  .document-payment-block__copy p,
  .document-payment-list p,
  .document-payment-online-note,
  .document-payment-block--professional .document-payment-helper {
    font-size: 6.8pt;
    line-height: 1.34;
  }

  .document-payment-block--professional .document-payment-list {
    margin-top: 5px;
  }

  .document-payment-block--professional .document-payment-list p {
    padding: 5px 0;
    gap: 8px;
  }

  .document-qr-frame {
    padding: 7px;
    gap: 6px;
    border-radius: 8px;
  }

  .document-payment-block__qr .document-qr-frame > span {
    display: none;
  }

  .document-qr {
    width: 26mm;
    min-height: 26mm;
    padding: 3px;
    border-radius: 6px;
  }

  .document-table-sheet--professional {
    margin-top: 10px;
    border-radius: 12px;
    break-inside: auto;
    page-break-inside: auto;
  }

  .document-table-sheet__head span,
  .document-table-sheet__row span {
    padding: 6px 7px;
    font-size: 6.8pt;
  }

  .document-table-sheet__head {
    font-size: 5.7pt;
  }

  .document-summary--professional {
    margin-top: 10px;
    grid-template-columns: minmax(0, 1fr) 46mm;
    gap: 10px;
    break-inside: auto;
    page-break-inside: auto;
  }

  .document-summary__notes,
  .document-summary__totals {
    gap: 7px;
  }

  .document-summary__totals div {
    padding: 8px 9px;
    border-radius: 10px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .document-summary__totals span {
    font-size: 5.8pt;
    line-height: 1.2;
  }

  .document-summary__totals strong {
    font-size: 7.6pt;
  }

  .document-summary--professional .document-total-final strong {
    font-size: 8.5pt;
  }

  .document-footer--professional {
    margin-top: 10px;
    padding-top: 8px;
    gap: 8px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .document-footer--professional strong {
    margin-bottom: 4px;
    font-size: 5.8pt;
    letter-spacing: 0.1em;
  }

  .document-company-card,
  .document-party-card,
  .document-lead-card,
  .document-fact-card,
  .document-note,
  .document-summary__totals div,
  .document-footer--professional > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

body[data-layout-role="admin"] {
  position: relative;
}

body[data-layout-role="admin"] .admin-layout-spacer {
  width: 100%;
  height: 0;
  pointer-events: none;
}

body[data-layout-role="admin"].admin-layout-has-customization main {
  position: relative;
  min-height: calc(100vh - 160px);
}

body[data-layout-role="admin"].admin-layout-has-customization .content-section {
  position: static !important;
}

body[data-layout-role="admin"].admin-layout-has-customization .portal-admin-sidebar {
  position: static !important;
}

body[data-layout-role="admin"] .admin-layout-controls {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1600;
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(118, 160, 214, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.94));
  box-shadow:
    0 22px 44px rgba(18, 56, 96, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px);
}

body[data-layout-role="admin"] .admin-layout-controls__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #56749b;
}

body[data-layout-role="admin"] .admin-layout-controls__hint {
  max-width: 260px;
  color: #5f7588;
  font-size: 0.78rem;
  line-height: 1.35;
}

body[data-layout-role="admin"] .admin-layout-controls__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-layout-role="admin"] .admin-layout-controls__hidden {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(118, 160, 214, 0.18);
}

body[data-layout-role="admin"] .admin-layout-controls__scale {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(118, 160, 214, 0.18);
}

body[data-layout-role="admin"] .admin-layout-controls__scale[hidden] {
  display: none;
}

body[data-layout-role="admin"] .admin-layout-controls__hidden[hidden] {
  display: none;
}

body[data-layout-role="admin"] .admin-layout-controls__sublabel {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6d87a7;
}

body[data-layout-role="admin"] .admin-layout-controls__hidden-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-layout-role="admin"] .admin-layout-controls__scale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-layout-role="admin"] .admin-layout-controls__scale-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2f4762;
}

body[data-layout-role="admin"] .admin-layout-controls__scale-value {
  font-size: 0.76rem;
  font-weight: 700;
  color: #56749b;
}

body[data-layout-role="admin"] .admin-layout-controls__slider {
  width: 100%;
  accent-color: #397fe0;
  cursor: pointer;
}

body[data-layout-role="admin"] .admin-layout-controls__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid rgba(116, 155, 208, 0.34);
  border-radius: 999px;
  padding: 0.58rem 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  color: #355073;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

body[data-layout-role="admin"] .admin-layout-controls__button:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 130, 212, 0.46);
  box-shadow: 0 14px 28px rgba(40, 83, 133, 0.15);
}

body[data-layout-role="admin"] .admin-layout-controls__button--primary {
  color: #fff;
  border-color: rgba(52, 121, 212, 0.6);
  background:
    linear-gradient(140deg, #3c87e7 0%, #2b6dc4 52%, #4fa6ff 100%);
  box-shadow:
    0 18px 34px rgba(41, 101, 177, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body[data-layout-role="admin"] .admin-layout-controls__button[hidden] {
  display: none;
}

body[data-layout-role="admin"] .admin-layout-controls__button--ghost,
body[data-layout-role="admin"] .admin-layout-controls__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(116, 155, 208, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #436183;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

body[data-layout-role="admin"] .admin-layout-controls__button--ghost:hover,
body[data-layout-role="admin"] .admin-layout-controls__chip:hover {
  border-color: rgba(72, 130, 212, 0.4);
  box-shadow: 0 10px 24px rgba(40, 83, 133, 0.12);
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget {
  --admin-layout-font-scale: 1;
  --admin-layout-ui-scale: 1;
  --admin-layout-space-scale: 1;
  position: absolute;
  margin: 0 !important;
  overflow: auto;
  z-index: 80;
}

body[data-layout-role="admin"].admin-layout-editing .admin-layout-widget {
  outline: 1px solid rgba(56, 126, 214, 0.48);
  box-shadow:
    0 18px 36px rgba(25, 70, 118, 0.18),
    0 0 0 4px rgba(118, 177, 255, 0.12);
}

body[data-layout-role="admin"].admin-layout-editing .admin-layout-widget.admin-layout-widget--selected {
  outline: 1px solid rgba(52, 128, 223, 0.7);
  box-shadow:
    0 22px 44px rgba(25, 70, 118, 0.2),
    0 0 0 5px rgba(85, 163, 255, 0.2);
}

body[data-layout-role="admin"].admin-layout-editing .admin-layout-item {
  position: relative;
  cursor: grab;
  user-select: none;
  z-index: 3;
  outline: 1px dashed rgba(83, 141, 217, 0.42);
  outline-offset: 2px;
}

body[data-layout-role="admin"].admin-layout-editing .admin-layout-item--dragging {
  cursor: grabbing;
  z-index: 4;
  box-shadow: 0 10px 24px rgba(40, 83, 133, 0.16);
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget h1 {
  font-size: calc(clamp(1.72rem, 1.36rem + 0.62vw, 2.18rem) * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget h2 {
  font-size: calc(clamp(1.18rem, 1rem + 0.42vw, 1.52rem) * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-group__header h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-document__top h4 {
  font-size: calc(1.08rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .section-kicker,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-toolbar__label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-status {
  font-size: calc(0.68rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget li,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-case__summary,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-case__detail p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-summary__copy p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .document-preview__subject,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .document-preview__payment-helper,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .document-preview__meta-note {
  font-size: calc(0.96rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .filter-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-inline-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-mini-button {
  min-height: calc(38px * var(--admin-layout-ui-scale));
  padding: 0 calc(14px * var(--admin-layout-ui-scale));
  font-size: calc(0.84rem * var(--admin-layout-font-scale));
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget input:not([type="checkbox"]):not([type="radio"]),
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget select,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget textarea {
  min-height: calc(40px * var(--admin-layout-ui-scale));
  padding: calc(0.7rem * var(--admin-layout-space-scale)) calc(0.88rem * var(--admin-layout-space-scale));
  font-size: calc(0.88rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-status {
  min-height: calc(32px * var(--admin-layout-ui-scale));
  padding: calc(0.38rem * var(--admin-layout-space-scale)) calc(0.8rem * var(--admin-layout-space-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-session__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-inline-links,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-document__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-payment-form__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-summary__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-search-actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-case__meta,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-toolbar,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-group,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-document-list,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-admin-customer-list,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-filter-list {
  gap: calc(10px * var(--admin-layout-space-scale));
  align-items: flex-start;
  justify-content: flex-start;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-toolbar__group {
  gap: calc(10px * var(--admin-layout-space-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-search-actions .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-summary__actions .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-payment-form__actions .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-finance-document__actions .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-inline-links .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-session__actions .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-inline-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget .portal-mini-button {
  flex: 0 0 auto;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact.portal-section-card,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact.portal-case,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact.document-preview {
  padding: calc(16px * var(--admin-layout-space-scale));
  border-radius: 18px;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight.portal-section-card,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight.portal-case,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight.document-preview {
  padding: calc(14px * var(--admin-layout-space-scale));
  border-radius: 16px;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny.portal-section-card,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny.portal-case,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny.document-preview {
  padding: calc(12px * var(--admin-layout-space-scale));
  border-radius: 14px;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact h1,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact h2,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact h3 {
  line-height: 1.08;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact h1 {
  font-size: calc(clamp(1.5rem, 1.2rem + 0.55vw, 2rem) * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact h2 {
  font-size: calc(clamp(1.08rem, 0.94rem + 0.38vw, 1.35rem) * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-group__header h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-document__top h4 {
  font-size: calc(1rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight h1 {
  font-size: calc(clamp(1.3rem, 1.02rem + 0.42vw, 1.72rem) * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight h2 {
  font-size: calc(clamp(0.98rem, 0.86rem + 0.3vw, 1.16rem) * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-group__header h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-document__top h4 {
  font-size: calc(0.9rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny h1 {
  font-size: calc(1.15rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny h2 {
  font-size: calc(0.92rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-finance-group__header h3,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-finance-document__top h4 {
  font-size: calc(0.84rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .section-kicker,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-toolbar__label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-status {
  font-size: calc(0.62rem * var(--admin-layout-font-scale));
  letter-spacing: 0.13em;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .section-kicker,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-toolbar__label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-status {
  font-size: calc(0.56rem * var(--admin-layout-font-scale));
  letter-spacing: 0.11em;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact li,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-case__summary,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-case__detail p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-summary__copy p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .document-preview__subject,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .document-preview__payment-helper,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .document-preview__meta-note {
  font-size: calc(0.88rem * var(--admin-layout-font-scale));
  line-height: 1.5;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight li,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-case__summary,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-case__detail p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-summary__copy p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .document-preview__subject,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .document-preview__payment-helper,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .document-preview__meta-note {
  font-size: calc(0.8rem * var(--admin-layout-font-scale));
  line-height: 1.42;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny li,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-case__summary,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-case__detail p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-finance-summary__copy p,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .document-preview__subject,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .document-preview__payment-helper,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .document-preview__meta-note {
  font-size: calc(0.74rem * var(--admin-layout-font-scale));
  line-height: 1.34;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .filter-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-inline-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-mini-button {
  min-height: calc(34px * var(--admin-layout-ui-scale));
  padding: 0 calc(12px * var(--admin-layout-ui-scale));
  border-radius: 10px;
  font-size: calc(0.76rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .filter-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-inline-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-mini-button {
  min-height: calc(30px * var(--admin-layout-ui-scale));
  padding: 0 calc(10px * var(--admin-layout-ui-scale));
  border-radius: 9px;
  font-size: calc(0.7rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .filter-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-inline-button,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-mini-button {
  min-height: calc(26px * var(--admin-layout-ui-scale));
  padding: 0 calc(8px * var(--admin-layout-ui-scale));
  border-radius: 8px;
  font-size: calc(0.66rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact input:not([type="checkbox"]):not([type="radio"]),
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact select,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact textarea {
  min-height: calc(36px * var(--admin-layout-ui-scale));
  padding: calc(0.62rem * var(--admin-layout-space-scale)) calc(0.78rem * var(--admin-layout-space-scale));
  font-size: calc(0.82rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight input:not([type="checkbox"]):not([type="radio"]),
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight select,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight textarea {
  min-height: calc(32px * var(--admin-layout-ui-scale));
  padding: calc(0.55rem * var(--admin-layout-space-scale)) calc(0.7rem * var(--admin-layout-space-scale));
  font-size: calc(0.76rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny input:not([type="checkbox"]):not([type="radio"]),
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny select,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny textarea {
  min-height: calc(28px * var(--admin-layout-ui-scale));
  padding: calc(0.46rem * var(--admin-layout-space-scale)) calc(0.6rem * var(--admin-layout-space-scale));
  font-size: calc(0.7rem * var(--admin-layout-font-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-session__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-inline-links,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-document__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-payment-form__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-summary__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-search-actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-case__meta,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-toolbar,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-group,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-document-list,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-admin-customer-list,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--compact .portal-finance-filter-list {
  gap: calc(8px * var(--admin-layout-space-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-session__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-inline-links,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-document__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-payment-form__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-summary__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-search-actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-case__meta,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-toolbar,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-group,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-document-list,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-admin-customer-list,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-filter-list {
  gap: calc(6px * var(--admin-layout-space-scale));
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--short .portal-finance-document__actions,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--short .portal-payment-form,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--short .portal-inline-links,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--short .portal-session__actions {
  margin-top: 8px;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-toolbar__group,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-finance-toolbar__group {
  grid-template-columns: 1fr;
  gap: 6px;
}

body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tight .portal-finance-toolbar__label,
body[data-layout-role="admin"].admin-layout-has-customization .admin-layout-widget--tiny .portal-finance-toolbar__label {
  padding-top: 0;
}

body[data-layout-role="admin"] .admin-layout-widget__handle,
body[data-layout-role="admin"] .admin-layout-widget__resize {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body[data-layout-role="admin"].admin-layout-editing .admin-layout-widget__handle,
body[data-layout-role="admin"].admin-layout-editing .admin-layout-widget__close,
body[data-layout-role="admin"].admin-layout-editing .admin-layout-widget__resize {
  opacity: 1;
  pointer-events: auto;
}

body[data-layout-role="admin"] .admin-layout-widget__handle {
  top: 10px;
  right: 42px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(116, 155, 208, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 244, 255, 0.94));
  box-shadow:
    0 10px 22px rgba(34, 75, 122, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: grab;
}

body[data-layout-role="admin"] .admin-layout-widget__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(182, 115, 115, 0.26);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 253, 253, 0.94), rgba(248, 238, 238, 0.94));
  color: #8c5050;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

body[data-layout-role="admin"] .admin-layout-widget__close:hover {
  transform: translateY(-1px);
  border-color: rgba(182, 115, 115, 0.42);
}

body[data-layout-role="admin"] .admin-layout-widget__close span {
  display: block;
  transform: translateY(-1px);
}

body[data-layout-role="admin"] .admin-layout-widget__scale {
  display: none !important;
}

/* Definitieve offerte-editor layout: regels blijven binnen de linker kaart en vallen niet achter de preview. */
.portal-page--documents .document-builder-lines-panel {
  container-type: inline-size;
  overflow: hidden !important;
}

.portal-page--documents .document-lines,
.portal-page--documents .document-table {
  min-width: 0;
  overflow: hidden !important;
}

.portal-page--documents .document-table .document-row,
.portal-page--documents .document-table .document-row--head {
  grid-template-columns: minmax(300px, 1fr) minmax(68px, 86px) minmax(76px, 96px) minmax(92px, 110px) minmax(108px, 124px) !important;
  gap: 10px !important;
}

.portal-page--documents .document-table .document-cell--description {
  min-width: 0;
  grid-template-columns: minmax(104px, 122px) minmax(0, 1fr) !important;
  align-items: start !important;
}

.portal-page--documents .document-table .document-line-type,
.portal-page--documents .document-table .document-description-line,
.portal-page--documents .document-table .document-cell textarea {
  min-width: 0 !important;
}

@container (max-width: 1040px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .portal-page--documents .document-table .document-row--head {
    display: none !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-column: 1 / -1;
  }

  .portal-page--documents .document-table .document-number-cell span,
  .portal-page--documents .document-table .document-unit-cell span {
    display: block;
  }

  .portal-page--documents .document-table .document-line-type {
    width: 100% !important;
  }
}

@container (max-width: 680px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: 1fr !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-template-columns: 1fr !important;
  }
}

/* Laatste override: in de document-editor nooit meer een brede regel onder de preview laten schuiven. */
.portal-page--documents .document-table .document-row:not(.document-row--head) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.portal-page--documents .document-table .document-row--head {
  display: none !important;
}

.portal-page--documents .document-table .document-cell--description {
  grid-column: 1 / -1;
}

.portal-page--documents .document-table .document-number-cell span,
.portal-page--documents .document-table .document-unit-cell span {
  display: block;
}

.portal-page--documents .document-table .document-cell--total {
  display: grid !important;
  align-content: center;
  justify-items: end;
  gap: 4px;
}

.portal-page--documents .document-table .document-cell--total::before {
  content: "Totaal";
  justify-self: start;
  color: #4d7cad;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: 1fr !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL mobile repair: grotere voorpagina-foto's en beheer-menu boven alle latere overrides. */
@media screen and (max-width: 680px) {
  body.site-home .homepage-media-card {
    grid-template-columns: clamp(108px, 31vw, 136px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 130px !important;
  }

  body.site-home .homepage-media-strip--compact .homepage-media-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    max-width: 340px !important;
  }

  body.site-home .homepage-media-card__image {
    grid-row: 1 / span 3 !important;
    width: 100% !important;
    min-height: clamp(106px, 30vw, 144px) !important;
    height: clamp(106px, 30vw, 144px) !important;
    aspect-ratio: 4 / 3 !important;
    align-self: stretch !important;
  }

  body.site-home .homepage-media-card__image img,
  body.site-home .homepage-media-card__image span {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.site-home .homepage-media-card__image img {
    object-fit: cover !important;
  }

  body.site-home .project-card {
    grid-template-columns: clamp(108px, 31vw, 136px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 130px !important;
  }

  body.site-home .project-card .project-media {
    min-height: clamp(106px, 30vw, 144px) !important;
    height: clamp(106px, 30vw, 144px) !important;
  }
}

@media screen and (max-width: 390px) {
  body.site-home .homepage-media-card,
  body.site-home .project-card {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .project-card .project-media {
    min-height: 104px !important;
    height: 104px !important;
  }
}

@media screen and (max-width: 760px) {
  body.portal-page[data-layout-role="admin"] .site-header,
  body.portal-page--admin .site-header {
    position: relative !important;
    z-index: 20000 !important;
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .header-shell,
  body.portal-page--admin .site-header .header-shell {
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  body.portal-page--admin .site-header .header-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .menu-toggle,
  body.portal-page--admin .site-header .menu-toggle {
    display: none !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav,
  body.portal-page--admin .site-header .site-nav.portal-nav {
    display: grid !important;
    width: 100% !important;
    max-height: min(62vh, 430px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px 0 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 20020 !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav.is-open,
  body.portal-page--admin .site-header .site-nav.portal-nav.is-open {
    display: grid !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav > a,
  body.portal-page--admin .site-header .site-nav.portal-nav > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
  }
}

@media screen and (max-width: 390px) {
  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav,
  body.portal-page--admin .site-header .site-nav.portal-nav {
    grid-template-columns: 1fr !important;
  }
}

/* TRUE FINAL OVERRIDE 2026-05-24c: admin-menu compact zichtbaar in mobile portrait. */
@media screen and (max-width: 760px) {
  html body .site-header .header-shell:has(.portal-nav--admin),
  html body.portal-page[data-layout-role="admin"] .site-header .header-shell,
  html body.portal-page--admin .site-header .header-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .site-header .header-bottom:has(.portal-nav--admin),
  html body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  html body.portal-page--admin .site-header .header-bottom {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
    overflow: visible !important;
  }

  html body .site-header .header-bottom:has(.portal-nav--admin) .menu-toggle,
  html body.portal-page[data-layout-role="admin"] .site-header .menu-toggle,
  html body.portal-page--admin .site-header .menu-toggle {
    display: none !important;
  }

  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open,
  html body.portal-page[data-layout-role="admin"] .site-header .portal-nav--admin,
  html body.portal-page--admin .site-header .portal-nav--admin {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 0 0 100% !important;
  }

  html body .site-header .portal-nav--admin > a,
  html body .site-header .portal-nav--admin > a.site-nav__cta {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: clamp(0.58rem, 2.35vw, 0.68rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .site-header .portal-nav--admin > a .nav-label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media screen and (min-width: 520px) and (max-width: 760px) {
  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 360px) {
  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* FINAL MOBILE FRONT PAGE OVERRIDE 2026-05-31:
   keep the mobile homepage readable by forcing cards into real columns.
   This lives at the end of the stylesheet on purpose, because older mobile
   carousel rules below the main theme were still winning. */
@media screen and (max-width: 680px) {
  html,
  body.site-home {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.site-home .top-toolbar,
  body.site-home .site-header,
  body.site-home main,
  body.site-home .site-main,
  body.site-home .content-section,
  body.site-home .hero-panel,
  body.site-home .site-footer {
    width: min(100% - 20px, 430px) !important;
    max-width: min(100% - 20px, 430px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.site-home .content-section,
  body.site-home .site-footer {
    padding: 22px 14px !important;
    border-radius: 22px !important;
  }

  body.site-home .section-heading,
  body.site-home .section-heading--split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: left !important;
  }

  body.site-home .section-heading h2 {
    font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  body.site-home .section-heading p,
  body.site-home .content-section p {
    max-width: 100% !important;
    font-size: clamp(0.96rem, 4.4vw, 1.08rem) !important;
    line-height: 1.45 !important;
  }

  html body.site-home .homepage-media-strip,
  html body.site-home .homepage-media-strip.homepage-media-strip--compact,
  html body.site-home .compact-home-hub .homepage-media-strip,
  html body.site-home .compact-home-hub .homepage-media-strip.homepage-media-strip--compact,
  html body.site-home .project-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  html body.site-home .homepage-media-strip > .homepage-media-card,
  html body.site-home .homepage-media-strip.homepage-media-strip--compact > .homepage-media-card,
  html body.site-home .compact-home-hub .homepage-media-strip > .homepage-media-card,
  html body.site-home .compact-home-hub .homepage-media-strip.homepage-media-strip--compact > .homepage-media-card,
  html body.site-home .project-grid > .project-card {
    display: grid !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 13px !important;
    box-sizing: border-box !important;
    flex: none !important;
    flex-basis: auto !important;
    transform: none !important;
    scroll-snap-align: none !important;
  }

  html body.site-home .homepage-media-card__image,
  html body.site-home .homepage-media-card__image img,
  html body.site-home .project-card .project-card__media,
  html body.site-home .project-card .project-card__media img {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    height: 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    object-fit: cover !important;
  }

  html body.site-home .homepage-media-card__body,
  html body.site-home .project-card__body {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body.site-home .homepage-media-card h3,
  html body.site-home .project-card h3 {
    font-size: clamp(1rem, 4.6vw, 1.16rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }

  html body.site-home .homepage-media-card p,
  html body.site-home .project-card p {
    font-size: clamp(0.86rem, 3.8vw, 0.98rem) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  body.site-home .site-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  body.site-home .site-footer *,
  body.site-home .footer-panel *,
  body.site-home .footer-column * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media screen and (max-width: 360px) {
  html body.site-home .homepage-media-strip > .homepage-media-card,
  html body.site-home .homepage-media-strip.homepage-media-strip--compact > .homepage-media-card,
  html body.site-home .compact-home-hub .homepage-media-strip > .homepage-media-card,
  html body.site-home .compact-home-hub .homepage-media-strip.homepage-media-strip--compact > .homepage-media-card,
  html body.site-home .project-grid > .project-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    padding: 11px !important;
    gap: 11px !important;
  }

  html body.site-home .homepage-media-card__image,
  html body.site-home .homepage-media-card__image img,
  html body.site-home .project-card .project-card__media,
  html body.site-home .project-card .project-card__media img {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }
}

/* Live mobile repair 2026-05-31: voorpagina in echte telefoonkolommen, zonder half verborgen carousel-kaarten. */
@media screen and (max-width: 680px) {
  html,
  body.site-home {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.site-home .top-toolbar {
    min-height: 0 !important;
  }

  body.site-home .top-toolbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 58px 14px 12px !important;
  }

  body.site-home .toolbar-group,
  body.site-home .toolbar-group--right {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    display: none !important;
  }

  body.site-home .top-login-link {
    justify-self: start !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.site-home .top-direct-contact {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding-inline: 10px !important;
  }

  body.site-home .site-header {
    margin-top: 18px !important;
    margin-bottom: 24px !important;
  }

  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within {
    width: min(calc(100vw - 24px), 430px) !important;
    height: auto !important;
    min-height: 260px !important;
    max-height: none !important;
    margin-inline: auto !important;
    border-radius: 22px !important;
  }

  body.site-home .header-main {
    min-height: 190px !important;
    padding: 18px 16px 54px !important;
  }

  body.site-home .brand--banner {
    width: min(280px, 78vw) !important;
    height: 150px !important;
    background-size: contain !important;
  }

  body.site-home .brand--banner img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.site-home .header-bottom {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 7px !important;
  }

  body.site-home .menu-toggle {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 15px !important;
  }

  body.site-home .site-nav.is-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.site-home .site-nav.is-open > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
  }

  body.site-home .hero-shell,
  body.site-home .hero-copy.tech-panel,
  body.site-home .content-section,
  body.site-home .footer-columns.tech-panel {
    width: min(calc(100vw - 24px), 430px) !important;
    max-width: min(calc(100vw - 24px), 430px) !important;
    margin-inline: auto !important;
  }

  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 20px !important;
    border-radius: 22px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body.site-home .hero-copy.tech-panel h1 {
    font-size: clamp(1.85rem, 8vw, 2.45rem) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  body.site-home .hero-actions,
  body.site-home .process-grid,
  body.site-home .faq-list,
  body.site-home .contact-layout,
  body.site-home .footer-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.site-home .hero-actions .top-direct-contact {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  body.site-home .content-section {
    margin-top: 30px !important;
    padding: 28px 18px !important;
    border-radius: 22px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body.site-home .content-section .section-heading {
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  body.site-home .content-section .section-heading h2 {
    font-size: clamp(1.9rem, 8vw, 2.55rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  body.site-home .homepage-media-strip--compact,
  body.site-home .homepage-media-strip,
  body.site-home .project-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  body.site-home .homepage-media-card,
  body.site-home .homepage-media-strip--compact .homepage-media-card,
  body.site-home .project-card,
  body.site-home .process-card,
  body.site-home .faq-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    flex-basis: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  body.site-home .homepage-media-card,
  body.site-home .homepage-media-strip--compact .homepage-media-card,
  body.site-home .project-card {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
    min-height: 126px !important;
    padding: 14px !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .project-card .project-media {
    grid-row: 1 / span 3 !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    border-radius: 14px !important;
  }

  body.site-home .homepage-media-card__image img,
  body.site-home .project-card .project-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.site-home .homepage-media-card .card-code,
  body.site-home .project-card .project-label {
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
    margin: 0 !important;
  }

  body.site-home .homepage-media-card h3,
  body.site-home .project-card h3 {
    font-size: 1.03rem !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }

  body.site-home .homepage-media-card p,
  body.site-home .project-card p {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 360px) {
  body.site-home .homepage-media-card,
  body.site-home .homepage-media-strip--compact .homepage-media-card,
  body.site-home .project-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    padding: 12px !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .project-card .project-media {
    height: 86px !important;
    min-height: 86px !important;
  }
}

/* Planning pro polish 2026-05-29: rustiger cockpit, duidelijke filters en scanbare werkkaarten. */
body.portal-page .planning-layout--admin {
  grid-template-columns: minmax(350px, 450px) minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: 18px;
}

body.portal-page .planning-dashboard-card {
  padding: clamp(16px, 1.8vw, 24px);
}

body.portal-page .planning-dashboard-card__main {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 16px;
}

body.portal-page .planning-dashboard-card h1 {
  margin-bottom: 6px;
  font-size: clamp(2rem, 1.35rem + 2vw, 3.45rem);
  line-height: 1.02;
}

body.portal-page .planning-dashboard-card p:not(.section-kicker) {
  max-width: 620px;
  color: #4f6982;
  font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.06rem);
}

body.portal-page .planning-next-card {
  min-height: 108px;
  padding: 15px 16px;
  border-radius: 16px;
}

body.portal-page .planning-dashboard-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

body.portal-page .planning-dashboard-stats article {
  min-height: 68px;
  padding: 11px 12px;
  border-radius: 14px;
}

body.portal-page .planning-dashboard-stats strong {
  font-size: 1.35rem;
}

body.portal-page .planning-admin-actions-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  overflow: hidden;
  border-color: rgba(77, 118, 158, 0.24);
  background:
    linear-gradient(135deg, rgba(247, 252, 255, 0.93), rgba(218, 232, 242, 0.72)),
    radial-gradient(circle at 92% 0%, rgba(74, 162, 235, 0.12), transparent 34%);
}

body.portal-page .planning-admin-actions-card::before,
body.portal-page .planning-admin-actions-card:hover::before,
body.portal-page .planning-admin-actions-card:focus-within::before {
  opacity: 0;
  transform: none;
  transition: none;
}

body.portal-page .planning-quickbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-content: stretch;
}

body.portal-page .planning-quicklink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(67, 121, 174, 0.26);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 242, 252, 0.9));
  color: #213a55;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(47, 94, 136, 0.07);
}

body.portal-page .planning-quicklink--primary {
  border-color: rgba(30, 118, 201, 0.42);
  background: linear-gradient(180deg, #2d8edf, #1371bd);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

body.portal-page .planning-admin-actions-card .planning-admin-search {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.45fr) minmax(150px, 0.45fr) auto;
  align-items: end;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.portal-page .planning-admin-actions-card .planning-admin-search .field {
  min-width: 0;
}

body.portal-page .planning-admin-actions-card .planning-admin-search .login-actions {
  grid-template-columns: repeat(2, minmax(86px, 1fr));
  gap: 7px;
}

body.portal-page .planning-admin-create-card {
  gap: 13px;
  padding: 16px;
}

body.portal-page .planning-admin-create-card .portal-case__top {
  align-items: center;
  gap: 12px;
}

body.portal-page .planning-admin-create-card .portal-case__top h2 {
  font-size: clamp(1.45rem, 1.1rem + 0.9vw, 2.05rem);
  line-height: 1.05;
}

body.portal-page .planning-admin-create-card .field-row {
  gap: 9px;
}

body.portal-page .planning-admin-create-form {
  gap: 9px;
}

body.portal-page .planning-admin-create-card .login-actions {
  margin-top: 2px;
}

body.portal-page .planning-team-card {
  grid-column: 1;
  padding: 16px;
  overflow: hidden;
}

body.portal-page .planning-team-card::before,
body.portal-page .planning-team-card:hover::before,
body.portal-page .planning-team-card:focus-within::before {
  opacity: 0;
  transform: none;
  transition: none;
}

body.portal-page .planning-team-card .portal-case__top h2 {
  font-size: clamp(1.35rem, 1.05rem + 0.75vw, 1.9rem);
}

body.portal-page .planning-team-card .planning-admin-create-form {
  gap: 9px;
}

body.portal-page .planning-team-list {
  gap: 9px;
}

body.portal-page .planning-results-anchor {
  grid-column: 2;
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 28px;
}

body.portal-page .planning-group-card {
  grid-column: 2;
  padding: 16px;
}

body.portal-page .planning-group__header {
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(91, 125, 157, 0.15);
}

body.portal-page .planning-card {
  gap: 12px;
  padding: 14px;
  border-color: rgba(84, 113, 141, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(233, 243, 250, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(34, 57, 79, 0.06);
}

body.portal-page .planning-layout--admin .planning-card,
body.portal-page--colleague .planning-card {
  grid-template-columns: 78px minmax(0, 1fr);
}

body.portal-page .planning-layout--admin .planning-card::before,
body.portal-page--colleague .planning-card::before {
  left: 53px;
  top: 16px;
  bottom: 16px;
}

body.portal-page .planning-card__time {
  min-height: 68px;
  padding: 9px 7px;
  border-radius: 14px;
}

body.portal-page .planning-card__top {
  align-items: center;
}

body.portal-page .planning-card__top h3 {
  margin-top: 4px;
  line-height: 1.12;
}

body.portal-page .planning-card__meta {
  gap: 6px;
}

body.portal-page .planning-card__meta span {
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 11px;
  color: #405a72;
  white-space: normal;
}

body.portal-page .planning-card__meta span strong {
  color: #2f6ea8;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

body.portal-page .planning-card__detail {
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 126, 156, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.56);
}

body.portal-page .planning-card__actions {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 2px;
}

body.portal-page .planning-card__actions .portal-inline-button {
  min-height: 38px;
}

@media screen and (max-width: 980px) {
  body.portal-page .planning-layout--admin {
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  }

  body.portal-page .planning-admin-actions-card {
    grid-template-columns: 1fr;
  }

  body.portal-page .planning-admin-actions-card .planning-admin-search {
    grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.45fr) minmax(140px, 0.45fr) auto;
  }
}

@media screen and (max-width: 760px) {
  body.portal-page .planning-layout--admin {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.portal-page .planning-dashboard-card,
  body.portal-page .planning-admin-actions-card,
  body.portal-page .planning-admin-create-card,
  body.portal-page .planning-team-card,
  body.portal-page .planning-group-card,
  body.portal-page .planning-results-anchor,
  body.portal-page .planning-layout--admin > .planning-empty-card:not(.planning-empty-card--inline) {
    grid-column: 1;
  }

  body.portal-page .planning-dashboard-card {
    padding: 14px;
  }

  body.portal-page .planning-dashboard-card__main {
    grid-template-columns: 1fr;
  }

  body.portal-page .planning-dashboard-card h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  body.portal-page .planning-next-card {
    min-height: 0;
  }

  body.portal-page .planning-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.portal-page .planning-dashboard-stats article {
    min-height: 58px;
  }

  body.portal-page .planning-quickbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.portal-page .planning-quicklink {
    min-height: 42px;
    font-size: 0.78rem;
  }

  body.portal-page .planning-admin-actions-card .planning-admin-search,
  body.portal-page .planning-admin-actions-card .planning-admin-search .login-actions,
  body.portal-page .planning-admin-create-card .field-row,
  body.portal-page .planning-admin-create-card .field-row:nth-of-type(4),
  body.portal-page .planning-team-card .field-row {
    grid-template-columns: 1fr;
  }

  body.portal-page .planning-admin-create-card,
  body.portal-page .planning-team-card,
  body.portal-page .planning-group-card {
    padding: 13px;
  }

  body.portal-page .planning-admin-create-card .portal-case__top,
  body.portal-page .planning-group__header,
  body.portal-page .planning-card__top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.portal-page .planning-layout--admin .planning-card,
  body.portal-page--colleague .planning-card {
    grid-template-columns: 1fr;
  }

  body.portal-page .planning-layout--admin .planning-card::before,
  body.portal-page--colleague .planning-card::before {
    display: none;
  }

  body.portal-page .planning-card__time {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    gap: 7px;
    justify-content: start;
    justify-items: start;
    width: fit-content;
    min-height: 0;
    padding: 8px 10px;
  }

  body.portal-page .planning-card__time + .planning-card__top,
  body.portal-page .planning-card__time ~ .planning-card__meta,
  body.portal-page .planning-card__time ~ .planning-card__detail,
  body.portal-page .planning-card__time ~ .planning-card__actions {
    grid-column: 1;
  }

  body.portal-page .planning-card__meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.portal-page .planning-card__meta span {
    width: 100%;
  }

  body.portal-page .planning-card__actions,
  body.portal-page .planning-card__actions .portal-inline-form,
  body.portal-page .planning-card__actions .portal-inline-button {
    width: 100%;
  }
}

@media screen and (max-width: 760px) {
  html body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  html body.portal-page--admin .site-header .header-bottom {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.portal-page[data-layout-role="admin"] .site-header .portal-nav--admin,
  html body.portal-page--admin .site-header .portal-nav--admin {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* FINAL OVERRIDE 2026-05-24b: compact admin menu voor mobiele portrait-weergave. */
@media screen and (max-width: 760px) {
  html body .site-header .header-shell:has(.portal-nav--admin),
  html body.portal-page[data-layout-role="admin"] .site-header .header-shell,
  html body.portal-page--admin .site-header .header-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .site-header .header-bottom:has(.portal-nav--admin),
  html body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  html body.portal-page--admin .site-header .header-bottom {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
    overflow: visible !important;
  }

  html body .site-header .header-bottom:has(.portal-nav--admin) .menu-toggle,
  html body.portal-page[data-layout-role="admin"] .site-header .menu-toggle,
  html body.portal-page--admin .site-header .menu-toggle {
    display: none !important;
  }

  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open,
  html body.portal-page[data-layout-role="admin"] .site-header .portal-nav--admin,
  html body.portal-page--admin .site-header .portal-nav--admin {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 0 0 100% !important;
  }

  html body .site-header .portal-nav--admin > a,
  html body .site-header .portal-nav--admin > a.site-nav__cta {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: clamp(0.58rem, 2.35vw, 0.68rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .site-header .portal-nav--admin > a .nav-label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media screen and (min-width: 520px) and (max-width: 760px) {
  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 360px) {
  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile repair: grotere voorpagina-foto's en een bereikbaar beheer-menu. */
@media screen and (max-width: 680px) {
  body.site-home .homepage-media-card {
    grid-template-columns: clamp(108px, 31vw, 136px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 130px !important;
  }

  body.site-home .homepage-media-strip--compact .homepage-media-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    max-width: 340px !important;
  }

  body.site-home .homepage-media-card__image {
    grid-row: 1 / span 3 !important;
    width: 100% !important;
    min-height: clamp(106px, 30vw, 144px) !important;
    height: clamp(106px, 30vw, 144px) !important;
    aspect-ratio: 4 / 3 !important;
    align-self: stretch !important;
  }

  body.site-home .homepage-media-card__image img,
  body.site-home .homepage-media-card__image span {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.site-home .homepage-media-card__image img {
    object-fit: cover !important;
  }

  body.site-home .project-card {
    grid-template-columns: clamp(108px, 31vw, 136px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 130px !important;
  }

  body.site-home .project-card .project-media {
    min-height: clamp(106px, 30vw, 144px) !important;
    height: clamp(106px, 30vw, 144px) !important;
  }
}

@media screen and (max-width: 390px) {
  body.site-home .homepage-media-card,
  body.site-home .project-card {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .project-card .project-media {
    min-height: 104px !important;
    height: 104px !important;
  }
}

@media screen and (max-width: 760px) {
  body.portal-page[data-layout-role="admin"] .site-header,
  body.portal-page--admin .site-header {
    position: relative !important;
    z-index: 20000 !important;
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .header-shell,
  body.portal-page--admin .site-header .header-shell {
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  body.portal-page--admin .site-header .header-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .menu-toggle,
  body.portal-page--admin .site-header .menu-toggle {
    display: inline-flex !important;
    width: min(260px, 100%) !important;
    min-height: 46px !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    z-index: 20030 !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav,
  body.portal-page--admin .site-header .site-nav.portal-nav {
    display: none !important;
    width: 100% !important;
    max-height: min(62vh, 430px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px 0 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 20020 !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav.is-open,
  body.portal-page--admin .site-header .site-nav.portal-nav.is-open {
    display: grid !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav > a,
  body.portal-page--admin .site-header .site-nav.portal-nav > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
  }
}

@media screen and (max-width: 390px) {
  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav,
  body.portal-page--admin .site-header .site-nav.portal-nav {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL document-view override: metadata blijft normaal leesbaar in plaats van verticale blokjes. */
body.document-page:not(.document-page--print-preview) .document-sheet__hero,
body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr) !important;
  grid-template-areas:
    "title logo"
    "title brand" !important;
  align-items: start !important;
  gap: 12px 34px !important;
  padding-bottom: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__hero .document-sheet__title-panel {
  align-self: start !important;
  min-width: 0 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top .portal-status {
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  margin-top: 12px !important;
  gap: 5px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
  display: grid !important;
  grid-template-columns: minmax(128px, max-content) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list span {
  color: #0f2336 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list strong {
  color: #263b50 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__overview {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr) !important;
  gap: 22px !important;
  margin-top: 10px !important;
  align-items: start !important;
}

body.document-page:not(.document-page--print-preview) .document-facts-grid--streamlined .document-fact-card strong {
  white-space: nowrap !important;
}

@media screen and (max-width: 720px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__hero,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "title"
      "brand" !important;
    gap: 12px !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
    max-width: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr) !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__overview {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 480px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
    grid-template-columns: 1fr !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list strong {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* FINAL document-view override: metadata blijft normaal leesbaar in plaats van verticale blokjes. */
body.document-page:not(.document-page--print-preview) .document-sheet__hero,
body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr) !important;
  grid-template-areas:
    "title logo"
    "title brand" !important;
  align-items: start !important;
  gap: 12px 34px !important;
  padding-bottom: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__hero .document-sheet__title-panel {
  align-self: start !important;
  min-width: 0 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top .portal-status {
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  margin-top: 12px !important;
  gap: 5px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
  display: grid !important;
  grid-template-columns: minmax(128px, max-content) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list span {
  color: #0f2336 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list strong {
  color: #263b50 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__overview {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr) !important;
  gap: 22px !important;
  margin-top: 10px !important;
  align-items: start !important;
}

body.document-page:not(.document-page--print-preview) .document-facts-grid--streamlined .document-fact-card strong {
  white-space: nowrap !important;
}

@media screen and (max-width: 720px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__hero,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "title"
      "brand" !important;
    gap: 12px !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
    max-width: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr) !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__overview {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 480px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
    grid-template-columns: 1fr !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

/* Laatste document-view override: offerte/factuur metadata blijft leesbaar en breekt niet verticaal af. */
body.document-page:not(.document-page--print-preview) .document-sheet__hero,
body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr) !important;
  grid-template-areas:
    "title logo"
    "title brand" !important;
  align-items: start !important;
  gap: 12px 34px !important;
  padding-bottom: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__hero .document-sheet__title-panel {
  align-self: start !important;
  min-width: 0 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top .portal-status {
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  margin-top: 12px !important;
  gap: 5px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
  display: grid !important;
  grid-template-columns: minmax(128px, max-content) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list span {
  color: #0f2336 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list strong {
  color: #263b50 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__overview {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr) !important;
  gap: 22px !important;
  margin-top: 10px !important;
  align-items: start !important;
}

body.document-page:not(.document-page--print-preview) .document-facts-grid--streamlined .document-fact-card strong {
  white-space: nowrap !important;
}

@media screen and (max-width: 720px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__hero,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "title"
      "brand" !important;
    gap: 12px !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
    max-width: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr) !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__overview {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 480px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
    grid-template-columns: 1fr !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

/* Productie-afwerking offerte/factuur: compacter, leesbaarder en printvriendelijker zonder nieuw design. */
.document-page .document-template-flow,
.portal-page--documents .document-preview .document-template-flow {
  gap: 14px;
}

.document-page .document-sheet__hero,
.portal-page--documents .document-preview__hero {
  gap: 16px;
}

.document-page .document-sheet__overview,
.portal-page--documents .document-preview__overview {
  margin-top: 0;
  gap: 14px;
  align-items: stretch;
}

.document-page .document-sheet__title-panel,
.portal-page--documents .document-preview__title-panel {
  gap: 10px;
  padding: 15px 18px;
}

.document-page .document-sheet__title-copy,
.portal-page--documents .document-preview__title-copy {
  gap: 4px;
}

.document-page .document-sheet__title-panel h1 {
  font-size: clamp(1.7rem, 1.45rem + 0.62vw, 2.18rem);
  letter-spacing: 0;
}

.portal-page--documents .document-preview__title-panel h3 {
  letter-spacing: 0;
}

.document-page .document-sheet__meta-list,
.portal-page--documents .document-preview__meta-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.document-page .document-sheet__meta-list p,
.portal-page--documents .document-preview__meta-list p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(121, 141, 161, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.document-page .document-company-card,
.document-page .document-party-card,
.portal-page--documents .document-preview__company-card,
.portal-page--documents .document-preview__party-card {
  align-content: start;
  gap: 3px;
}

.document-line-description {
  display: grid !important;
  gap: 3px;
  text-align: left !important;
}

.document-line-main {
  display: block;
  color: #182f45;
  font-weight: 800;
  line-height: 1.28;
}

.document-line-main em {
  color: #5d7287;
  font-style: normal;
  font-weight: 700;
}

.document-line-sub {
  display: block;
  color: #657a8f;
  font-size: 0.88em;
  font-weight: 500;
  line-height: 1.42;
}

.document-page .document-table-sheet--professional,
.portal-page--documents .document-preview__table {
  margin-top: 12px;
}

.document-page .document-summary--professional,
.portal-page--documents .document-preview__summary {
  margin-top: 12px;
}

.document-page .document-summary__totals,
.portal-page--documents .document-preview__totals {
  gap: 8px;
}

.document-page .document-summary__totals div,
.portal-page--documents .document-preview__totals div {
  border-radius: 13px;
}

.document-page .document-summary__totals .document-payment-split-row,
.portal-page--documents .document-preview__totals .document-payment-split-row {
  margin-top: 4px;
}

.document-page .document-note p,
.document-page .document-professional-block p,
.document-page .document-payment-schedule--professional li,
.document-page .document-professional-block li,
.portal-page--documents .document-preview__note,
.portal-page--documents .document-preview__payment-copy p {
  color: #36516b;
  line-height: 1.55;
}

.document-print-status {
  display: inline-flex;
  margin: 0 0 2mm;
  padding: 1mm 2.2mm;
  border: 1px solid #c8d6e4;
  border-radius: 99mm;
  background: #eef4fb;
  color: #275d92;
  font-size: 6.4pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media print {
  .document-line-main {
    color: #111827 !important;
    font-size: 7.7pt !important;
    line-height: 1.2 !important;
  }

  .document-line-sub {
    color: #4d5f72 !important;
    font-size: 7pt !important;
    line-height: 1.25 !important;
  }
}

/* Offerte-editor: regels blijven binnen hun eigen paneel en schuiven niet meer onder de preview. */
.portal-page--documents .document-builder-lines-panel {
  container-type: inline-size;
  overflow: hidden !important;
}

.portal-page--documents .document-lines,
.portal-page--documents .document-table {
  min-width: 0;
  overflow: hidden !important;
}

.portal-page--documents .document-table .document-row,
.portal-page--documents .document-table .document-row--head {
  grid-template-columns: minmax(300px, 1fr) minmax(68px, 86px) minmax(76px, 96px) minmax(92px, 110px) minmax(108px, 124px) !important;
  gap: 10px !important;
}

.portal-page--documents .document-table .document-cell--description {
  min-width: 0;
  grid-template-columns: minmax(104px, 122px) minmax(0, 1fr) !important;
}

.portal-page--documents .document-table .document-line-type,
.portal-page--documents .document-table .document-description-line,
.portal-page--documents .document-table .document-cell textarea {
  min-width: 0 !important;
}

@container (max-width: 1040px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .portal-page--documents .document-table .document-row--head {
    display: none !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-column: 1 / -1;
  }

  .portal-page--documents .document-table .document-number-cell span,
  .portal-page--documents .document-table .document-unit-cell span {
    display: block;
  }

  .portal-page--documents .document-table .document-line-type {
    width: 100% !important;
  }
}

@container (max-width: 680px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: 1fr !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-template-columns: 1fr !important;
  }
}

body[data-layout-role="admin"] .admin-layout-widget__handle span,
body[data-layout-role="admin"] .admin-layout-widget__handle span::before,
body[data-layout-role="admin"] .admin-layout-widget__handle span::after {
  display: block;
  width: 14px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(52, 87, 126, 0.8);
  content: "";
}

body[data-layout-role="admin"] .admin-layout-widget__handle span {
  position: absolute;
  top: 10px;
  left: 9px;
}

body[data-layout-role="admin"] .admin-layout-widget__handle span::before {
  margin-top: 5px;
}

body[data-layout-role="admin"] .admin-layout-widget__handle span::after {
  margin-top: 5px;
}

body[data-layout-role="admin"] .admin-layout-widget__resize {
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: nwse-resize;
}

body[data-layout-role="admin"] .admin-layout-widget__resize::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-right: 2px solid rgba(52, 87, 126, 0.78);
  border-bottom: 2px solid rgba(52, 87, 126, 0.78);
  border-bottom-right-radius: 5px;
}

body[data-layout-role="admin"] .admin-layout-widget--dragging .admin-layout-widget__handle {
  cursor: grabbing;
}

body[data-layout-role="admin"] .admin-layout-widget--dragging,
body[data-layout-role="admin"] .admin-layout-widget--resizing {
  user-select: none;
}

@media (max-width: 900px) {
  body[data-layout-role="admin"] .admin-layout-controls {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  body[data-layout-role="admin"] .admin-layout-controls__actions {
    width: 100%;
  }

  body[data-layout-role="admin"] .admin-layout-controls__hidden-list {
    width: 100%;
  }

  body[data-layout-role="admin"] .admin-layout-controls__scale-head {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-layout-role="admin"] .admin-layout-controls__button {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* Strakke factuur/offerte-indeling: rustiger, zakelijker en dichter bij een klassieke A4. */
.document-sheet--professional,
.document-preview--professional {
  color: #111827;
  border: 1px solid rgba(14, 42, 71, 0.12);
  background: #ffffff;
}

.document-sheet--professional::before,
.document-preview--professional::before {
  opacity: 0.16;
  background:
    linear-gradient(135deg, rgba(47, 127, 224, 0.09), transparent 34%),
    linear-gradient(90deg, rgba(47, 127, 224, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(47, 127, 224, 0.05) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

.document-sheet--professional .document-template-flow,
.document-preview--professional .document-template-flow {
  gap: 12px;
}

.document-sheet__hero,
.document-preview__hero {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.46fr);
  grid-template-areas:
    "title logo"
    "title brand";
  gap: 10px 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.72);
}

.document-sheet__hero .document-brand,
.document-preview__hero .document-brand {
  grid-area: logo;
  justify-self: end;
}

.document-sheet__hero .document-company-card,
.document-preview__hero .document-preview__company-card {
  grid-area: brand;
  justify-self: end;
  width: min(100%, 230px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: right;
}

.document-company-card__name {
  display: block;
  margin-bottom: 5px;
  color: #111827;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.88rem;
  line-height: 1.25;
}

.document-sheet__hero .document-company-card p,
.document-preview__hero .document-preview__company-card p {
  color: #111827;
  font-size: 0.78rem;
  line-height: 1.35;
}

.document-sheet__hero .document-sheet__title-panel,
.document-preview__hero .document-preview__title-panel {
  grid-area: title;
  align-self: end;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.document-sheet__title-top,
.document-preview__title-top {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.document-sheet__title-top .portal-status,
.document-preview__title-top .portal-status {
  margin-top: 4px;
}

.document-sheet__title-panel h1,
.document-preview__title-panel h3 {
  color: #050b12;
  letter-spacing: -0.03em;
}

.document-sheet__title-panel h1 {
  font-size: clamp(2rem, 1.76rem + 0.7vw, 2.65rem);
}

.document-preview__title-panel h3 {
  font-size: clamp(1.28rem, 1.05rem + 0.48vw, 1.62rem);
}

.document-sheet__subject,
.document-preview__subject {
  color: #334155;
  line-height: 1.45;
}

.document-sheet__meta-note,
.document-preview__meta-note {
  display: none;
}

.document-sheet__meta-list,
.document-preview__meta-list {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  max-width: 360px;
}

.document-sheet__meta-list p,
.document-preview__meta-list p {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  color: #111827;
  font-size: 0.86rem;
  line-height: 1.3;
}

.document-sheet__meta-list span,
.document-preview__meta-list span {
  font-weight: 700;
}

.document-sheet__meta-list strong,
.document-preview__meta-list strong {
  font-weight: 500;
}

.document-sheet__overview,
.document-preview__overview {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.22fr);
  gap: 28px;
  margin-top: 16px;
  align-items: start;
}

.document-party-card,
.document-preview__party-card,
.document-fact-card,
.document-preview__fact-card,
.document-lead-card,
.document-preview__lead,
.document-note,
.document-preview__note,
.document-footer--professional > div {
  border-radius: 0;
  box-shadow: none;
}

.document-party-card,
.document-preview__party-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.document-party-card .document-block-label,
.document-preview__party-card .document-block-label {
  margin-bottom: 8px;
  color: #050b12;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

.document-party-card .document-block-label::after,
.document-preview__party-card .document-block-label::after {
  content: ":";
}

.document-party-card strong,
.document-preview__party-card strong {
  margin-bottom: 4px;
  color: #050b12;
  font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 0.94rem;
  letter-spacing: 0;
}

.document-party-card p,
.document-preview__party-card p {
  color: #050b12;
  font-size: 0.9rem;
  line-height: 1.45;
}

.document-facts-grid--streamlined,
.document-preview__facts-grid--streamlined {
  grid-template-columns: 1fr;
}

.document-facts-grid--streamlined .document-fact-card,
.document-preview__facts-grid--streamlined .document-preview__fact-card {
  padding: 10px 12px;
  border: 1px solid rgba(15, 95, 165, 0.18);
  border-radius: 12px;
  background: rgba(242, 248, 254, 0.75);
}

.document-lead-card,
.document-preview__lead {
  margin-top: 8px;
  padding: 10px 0;
  border: 0;
  border-left: 0;
  background: transparent;
  color: #334155;
}

.document-payment-block--professional,
.document-preview__payment {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 0;
  border: 1px solid rgba(17, 24, 39, 0.16);
  background: rgba(245, 250, 255, 0.74);
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.28fr);
}

.document-payment-block--professional .document-payment-block__copy h2 {
  font-size: 1rem;
}

.document-payment-block--professional .document-payment-list p {
  padding: 6px 0;
}

.document-qr,
.document-preview__qr-box {
  border-radius: 6px;
}

.document-table-sheet--professional,
.document-preview__table {
  margin-top: 14px;
  border: 0;
  border-top: 1px solid #111827;
  border-bottom: 1px solid #111827;
  border-radius: 0;
  background: #ffffff;
}

.document-sheet--professional .document-table-sheet__head,
.document-sheet--professional .document-table-sheet__row,
.document-preview__table-head,
.document-preview__row {
  grid-template-columns:
    minmax(52px, var(--table-col-date, 0.62fr))
    minmax(0, var(--table-col-desc, 2fr))
    minmax(44px, var(--table-col-qty, 0.48fr))
    minmax(64px, var(--table-col-price, 0.72fr))
    minmax(42px, var(--table-col-vat, 0.42fr))
    minmax(66px, var(--table-col-total, 0.76fr));
}

.document-sheet--professional .document-table-sheet__head,
.document-preview__table-head {
  border-bottom: 1px solid #111827;
  background: #ffffff;
  color: #0284d9;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.document-table-sheet__head span,
.document-table-sheet__row span,
.document-preview__table-head span,
.document-preview__row span {
  padding: 9px 8px;
}

.document-sheet--professional .document-table-sheet__row,
.document-preview__row {
  border-top: 0;
  background: #ffffff;
}

.document-sheet--professional .document-table-sheet__row:nth-child(even),
.document-preview__row:nth-child(even) {
  background: #ffffff;
}

.document-sheet--professional .document-table-sheet__row span:nth-child(1),
.document-preview__row span:nth-child(1) {
  color: #111827;
  white-space: nowrap;
}

.document-sheet--professional .document-table-sheet__row span:nth-child(2),
.document-sheet--professional .document-table-sheet__head span:nth-child(2),
.document-preview__row span:nth-child(2),
.document-preview__table-head span:nth-child(2) {
  text-align: left;
}

.document-sheet--professional .document-table-sheet__row span:nth-child(3),
.document-sheet--professional .document-table-sheet__row span:nth-child(4),
.document-sheet--professional .document-table-sheet__row span:nth-child(5),
.document-sheet--professional .document-table-sheet__row span:nth-child(6),
.document-sheet--professional .document-table-sheet__head span:nth-child(3),
.document-sheet--professional .document-table-sheet__head span:nth-child(4),
.document-sheet--professional .document-table-sheet__head span:nth-child(5),
.document-sheet--professional .document-table-sheet__head span:nth-child(6),
.document-preview__row span:nth-child(3),
.document-preview__row span:nth-child(4),
.document-preview__row span:nth-child(5),
.document-preview__row span:nth-child(6),
.document-preview__table-head span:nth-child(3),
.document-preview__table-head span:nth-child(4),
.document-preview__table-head span:nth-child(5),
.document-preview__table-head span:nth-child(6) {
  text-align: right;
}

.document-summary--professional,
.document-preview__summary {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  margin-top: 18px;
}

.document-summary__notes,
.document-preview__summary-notes {
  align-self: end;
}

.document-summary__totals,
.document-preview__totals {
  gap: 0;
}

.document-summary__totals div,
.document-preview__totals div {
  padding: 9px 8px;
  border: 0;
  border-radius: 0;
  border-top: 1px solid #111827;
  background: #ffffff;
}

.document-summary__totals div:first-child,
.document-preview__totals div:first-child {
  background: rgba(239, 248, 255, 0.72);
}

.document-summary__totals span,
.document-preview__totals span {
  color: #050b12;
  font-weight: 700;
}

.document-summary__totals strong,
.document-preview__totals strong {
  color: #050b12;
  font-size: 1rem;
}

.document-total-final {
  border-color: #111827 !important;
  background: #ffffff !important;
  text-transform: uppercase;
}

.document-total-final strong {
  font-size: 1.08rem !important;
}

.document-summary__notes .document-note,
.document-preview__summary-notes .document-preview__note {
  padding: 0;
  border: 0;
  background: transparent;
}

.document-summary__notes .document-note strong {
  display: block;
  margin-bottom: 8px;
  text-align: right;
}

/* Directe factuur/offerte-editor: blokken reageren op breedte, tekst en kolomsliders. */
.document-template-section.document-brand img {
  width: calc(150px * var(--template-text-scale, 1));
  max-width: 100%;
}

.document-preview--professional .document-template-section.document-brand img {
  width: calc(105px * var(--template-text-scale, 1));
  max-width: 100%;
}

.document-template-section--size-small.document-brand img,
.document-preview--professional .document-template-section--size-small.document-brand img {
  width: calc(82px * var(--template-text-scale, 1));
}

.document-template-section--size-large.document-brand img,
.document-preview--professional .document-template-section--size-large.document-brand img {
  width: calc(155px * var(--template-text-scale, 1));
}

.document-footer--professional {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 24, 39, 0.7);
}

.document-footer--professional > div {
  padding: 0;
  border: 0;
  background: transparent;
}

.document-footer--professional > div:only-child {
  grid-column: 1 / -1;
}

.document-footer--professional strong {
  color: #050b12;
}

@media screen and (max-width: 780px) {
  .document-sheet__hero,
  .document-preview__hero,
  .document-sheet__overview,
  .document-preview__overview,
  .document-summary--professional,
  .document-preview__summary,
  .document-payment-block--professional,
  .document-preview__payment {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .document-sheet__hero .document-brand,
  .document-preview__hero .document-brand,
  .document-sheet__hero .document-company-card,
  .document-preview__hero .document-preview__company-card,
  .document-sheet__hero .document-sheet__title-panel,
  .document-preview__hero .document-preview__title-panel {
    grid-area: auto;
    justify-self: stretch;
    text-align: left;
  }
}

@media print {
  .document-sheet--professional {
    padding: 8mm 9mm 9mm !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .document-sheet__hero {
    grid-template-columns: minmax(0, 1fr) 52mm !important;
    grid-template-areas:
      "title logo"
      "title brand" !important;
    gap: 5mm 10mm !important;
    padding-bottom: 5mm !important;
  }

  .document-sheet__hero .document-brand {
    justify-self: end !important;
  }

  .document-sheet__hero .document-company-card {
    justify-self: end !important;
    text-align: right !important;
  }

  .document-sheet--professional .document-brand img {
    width: 31mm !important;
    max-width: 31mm !important;
  }

  .document-sheet__title-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .document-sheet__title-panel h1 {
    font-size: 20pt !important;
  }

  .document-sheet__meta-list {
    margin-top: 10mm !important;
    gap: 2mm !important;
  }

  .document-sheet__meta-list p {
    grid-template-columns: 30mm minmax(0, 1fr) !important;
    font-size: 8.2pt !important;
  }

  .document-sheet__overview {
    margin-top: 5mm !important;
    grid-template-columns: minmax(0, 1fr) 26mm !important;
    gap: 9mm !important;
  }

  .document-party-card,
  .document-fact-card,
  .document-lead-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .document-table-sheet--professional {
    margin-top: 5mm !important;
  }

  .document-sheet--professional .document-table-sheet__head,
  .document-sheet--professional .document-table-sheet__row {
    grid-template-columns: 25mm minmax(0, 1fr) 17mm 25mm 14mm 25mm !important;
  }

  .document-table-sheet__head span,
  .document-table-sheet__row span {
    padding: 2.2mm 1.8mm !important;
  }

  .document-summary--professional {
    grid-template-columns: minmax(0, 1fr) 54mm !important;
    gap: 8mm !important;
  }

  .document-payment-block--professional {
    grid-template-columns: minmax(0, 1fr) 30mm !important;
    padding: 4mm !important;
  }

  .document-footer--professional {
    margin-top: 7mm !important;
  }
}

/* Publieke hoofdsite 2026: compactere, moderne laag zonder portal/admin mee te raken. */
.site-home {
  --home-ink: #162f48;
  --home-muted: #60758e;
  --home-line: rgba(122, 161, 200, 0.22);
  --home-blue: #287bd7;
  --home-soft: rgba(239, 248, 255, 0.72);
  --home-banner-bg-image: var(--rs-home-top-banner-image);
  --home-bottom-banner-bg-image: var(--rs-home-bottom-banner-image);
}

.site-home .top-toolbar {
  background: rgba(246, 251, 255, 0.82);
  backdrop-filter: blur(18px);
}

.site-home .header-shell:not(.header-shell--portal) {
  width: min(calc(100% - 32px), 1240px);
  margin-top: 14px;
  padding: 14px 18px 12px;
  min-height: clamp(310px, 37.5vw, 465px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  box-shadow: 0 26px 70px rgba(40, 87, 130, 0.13);
}

.site-home .header-main {
  flex: 1 1 auto;
  min-height: clamp(180px, 23vw, 330px);
}

.site-home .header-shell:not(.header-shell--portal) .header-main::before {
  inset: 20% 30% 18%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.28), rgba(221, 240, 255, 0.14) 44%, transparent 74%);
  filter: blur(18px);
}

.site-home .brand--banner {
  width: min(360px, 45vw);
}

.site-home .header-shell:not(.header-shell--portal) .header-utility {
  top: 20px;
  right: 22px;
}

.site-home .header-shell:not(.header-shell--portal) .portal-trigger {
  min-width: 178px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 16px;
  clip-path: none;
  background: rgba(248, 252, 255, 0.82);
  backdrop-filter: blur(10px);
}

.site-home .header-bottom {
  margin-top: 10px;
  padding: 12px 0 0;
}

.site-home .site-nav {
  gap: 10px;
}

.site-home .site-nav a {
  min-height: 46px;
  min-width: auto;
  padding: 0 18px;
  border-radius: 16px;
}

.site-home .hero-section {
  padding-top: 24px;
}

.site-home .hero-shell {
  width: min(calc(100% - 32px), 1240px);
  grid-template-columns: 1fr;
  gap: 0;
}

.site-home .hero-copy,
.site-home .hero-panel--display,
.site-home .content-section,
.site-home .callout-strip__inner,
.site-home .contact-switcher,
.site-home .contact-copy,
.site-home .contact-form,
.site-home .appointment-form,
.site-home .footer-callout__link,
.site-home .footer-columns {
  border-radius: 30px;
}

.site-home .hero-copy {
  padding: clamp(22px, 2.4vw, 34px);
  min-height: clamp(270px, 31vw, 390px);
  overflow: hidden;
}

.site-home .hero-copy::before,
.site-home .hero-copy:hover::before,
.site-home .hero-copy:focus-within::before {
  opacity: 1;
  transform: none;
  background:
    linear-gradient(90deg, rgba(246, 251, 255, 0.08) 0%, rgba(246, 251, 255, 0.26) 35%, rgba(246, 251, 255, 0.88) 66%, rgba(246, 251, 255, 0.96) 100%);
}

.hero-photo-bg {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  background: var(--home-bottom-banner-bg-image) center center / cover no-repeat;
  pointer-events: none;
}

.hero-heading-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hero-heading-line .section-kicker,
.hero-heading-line .visual-status {
  margin: 0;
}

.site-home .hero-copy h1 {
  max-width: 17ch;
  margin-bottom: 10px;
  color: #173a62;
  font-size: clamp(1.62rem, 2.12vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

.site-home .hero-text {
  max-width: 520px;
  color: #34516c;
  font-size: clamp(0.92rem, 0.86rem + 0.16vw, 1.02rem);
  line-height: 1.55;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}

.site-home .hero-service-list {
  max-width: 520px;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(42, 108, 174, 0.18);
  border-radius: 18px;
  background: rgba(246, 251, 255, 0.72);
  color: #213c57;
  box-shadow: 0 14px 28px rgba(33, 70, 104, 0.08);
}

.site-home .hero-service-list strong {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #173a62;
}

.site-home .hero-service-list ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-home .hero-service-list li {
  position: relative;
  padding-left: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.site-home .hero-service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f7ed8;
  box-shadow: 0 0 0 4px rgba(47, 126, 216, 0.12);
}

.hero-news-ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: min(100%, 500px);
  min-height: 38px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(39, 123, 215, 0.26);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.95), rgba(229, 242, 253, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 26px rgba(31, 97, 158, 0.1);
}

.hero-news-ticker__label {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 12px;
  border-right: 1px solid rgba(39, 123, 215, 0.2);
  background:
    linear-gradient(180deg, rgba(42, 128, 221, 0.98), rgba(17, 92, 176, 0.98));
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 31, 72, 0.3);
}

.hero-news-ticker__track {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: #183f68;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.hero-news-ticker__track::before,
.hero-news-ticker__track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 32px;
  pointer-events: none;
}

.hero-news-ticker__track::before {
  left: 0;
  background: linear-gradient(90deg, rgba(238, 247, 255, 0.96), transparent);
}

.hero-news-ticker__track::after {
  right: 0;
  background: linear-gradient(270deg, rgba(238, 247, 255, 0.96), transparent);
}

.hero-news-ticker__track span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  min-width: 100%;
  padding: 0 26px;
  animation: heroNewsTicker 24s linear infinite;
}

.hero-news-ticker:hover .hero-news-ticker__track span,
.hero-news-ticker:focus-within .hero-news-ticker__track span {
  animation-play-state: paused;
}

@keyframes heroNewsTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-news-ticker__track {
    white-space: normal;
  }

  .hero-news-ticker__track span {
    animation: none;
    padding: 8px 12px;
  }

  .hero-news-ticker__track span[aria-hidden="true"] {
    display: none;
  }
}

.site-home .hero-copy > :not(.panel-corners):not(.hero-photo-bg) {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  margin-left: auto;
}

.site-home .hero-actions {
  gap: 10px;
  margin-top: 24px;
}

.home-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.home-jump-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(47, 127, 224, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(227, 238, 248, 0.78));
  color: #255986;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(40, 87, 130, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.home-jump-nav a:hover,
.home-jump-nav a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 224, 0.42);
  box-shadow: 0 14px 28px rgba(40, 87, 130, 0.12);
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(126, 171, 215, 0.28);
  border-radius: 999px;
  background: rgba(245, 251, 255, 0.82);
  color: var(--home-ink);
  font-weight: 800;
  font-size: 0.88rem;
}

.site-home .hero-points {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.site-home .hero-point {
  min-height: auto;
  padding: 12px 13px;
  border-radius: 16px;
}

.site-home .hero-point span {
  margin-bottom: 5px;
}

.site-home .hero-point strong {
  margin-bottom: 5px;
}

.site-home .hero-point p {
  line-height: 1.42;
}

.site-home .hero-panel--display {
  padding: clamp(22px, 3vw, 34px);
}

.site-home .visual-core {
  gap: 18px;
}

.site-home .visual-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.overview-rail {
  width: min(calc(100% - 32px), 1240px);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.overview-rail__item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 18px;
  border: 1px solid var(--home-line);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.78)),
    rgba(255, 255, 255, 0.9);
  color: var(--home-ink);
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(40, 87, 130, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.overview-rail__item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--home-blue), transparent);
  opacity: 0.38;
}

.overview-rail__item:hover,
.overview-rail__item:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(47, 127, 224, 0.34);
  box-shadow: 0 24px 52px rgba(40, 87, 130, 0.13);
}

.overview-rail__item span {
  color: #4d7cad;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.overview-rail__item strong {
  max-width: 20ch;
  font-size: 1rem;
  line-height: 1.35;
}

.site-home .content-section {
  width: min(calc(100% - 32px), 1240px);
  padding: clamp(22px, 3vw, 34px);
}

.site-home .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.56fr);
  align-items: end;
  gap: 20px;
  margin-bottom: 22px;
}

.site-home .section-heading .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: -8px;
}

.site-home .section-heading h2 {
  max-width: 16ch;
  margin-bottom: 0;
  font-size: clamp(2rem, 1.4rem + 1.7vw, 3.65rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.site-home .section-heading > p:not(.section-kicker) {
  margin: 0;
  font-size: 1.03rem;
}

.legacy-home-section[hidden] {
  display: none !important;
}

.compact-home-hub {
  scroll-margin-top: 24px;
}

.site-home .section-heading--compact {
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.46fr);
  margin-bottom: 16px;
}

.site-home .section-heading--compact h2 {
  max-width: 18ch;
  font-size: clamp(1.35rem, 1.05rem + 0.95vw, 2.15rem);
  line-height: 1.08;
}

.compact-segment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.compact-segment-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 0;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 8%, rgba(189, 223, 250, 0.32), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(235, 244, 252, 0.86));
}

.compact-segment-card h3,
.compact-appliance-card strong {
  margin: 0;
  color: #203446;
  line-height: 1.1;
}

.compact-segment-card h3 {
  font-size: 1.2rem;
}

.compact-segment-card p:not(.card-code) {
  margin: 0;
  color: var(--home-muted, var(--muted));
  line-height: 1.48;
}

.compact-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compact-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(47, 127, 224, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4d667f;
  font-size: 0.72rem;
  font-weight: 850;
}

.compact-appliance-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.compact-appliance-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(232, 239, 247, 0.82));
}

.compact-appliance-card span {
  color: var(--home-muted, var(--muted));
  font-size: 0.88rem;
  line-height: 1.42;
}

.homepage-media-strip--compact {
  margin-top: 12px;
}

.homepage-media-strip--compact .homepage-media-card {
  padding: 10px;
}

.homepage-media-strip--compact .homepage-media-card__image,
.homepage-media-strip--compact .homepage-media-card__image img {
  min-height: 82px;
}

.homepage-media-strip--compact .homepage-media-card h3 {
  font-size: clamp(1rem, 0.94rem + 0.18vw, 1.18rem);
  line-height: 1.16;
}

.homepage-media-strip--compact .homepage-media-card p:last-child {
  font-size: 0.9rem;
  line-height: 1.38;
}

.site-home .service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.site-home .product-showroom {
  overflow: hidden;
  border-color: rgba(126, 166, 207, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.96), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(185, 218, 246, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(247, 251, 255, 0.96), rgba(229, 240, 249, 0.82) 54%, rgba(248, 250, 252, 0.96));
}

.product-showroom__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.product-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 360px;
  padding: 14px;
  border-radius: 24px;
  --accent-rgb: 47, 127, 224;
  background:
    radial-gradient(circle at 80% 7%, rgba(var(--accent-rgb), 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 243, 250, 0.86));
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.product-card:nth-child(2) { --accent-rgb: 88, 102, 116; }
.product-card:nth-child(3) { --accent-rgb: 185, 146, 82; }
.product-card:nth-child(4) { --accent-rgb: 83, 155, 132; }

.product-card__visual {
  position: relative;
  min-height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(225, 238, 249, 0.62)),
    repeating-linear-gradient(90deg, rgba(73, 116, 159, 0.07) 0 1px, transparent 1px 18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.product-card__visual::before,
.product-card__visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.32), transparent);
  filter: blur(0.2px);
}

.product-card__visual::before {
  width: 68%;
  height: 3px;
  bottom: 28px;
}

.product-card__visual::after {
  width: 46%;
  height: 2px;
  bottom: 18px;
  opacity: 0.6;
}

.product-card__visual span {
  position: relative;
  display: block;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 238, 249, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 28px rgba(43, 82, 120, 0.12);
}

.product-card__visual--wall span {
  width: min(74%, 210px);
  height: 42px;
  border-radius: 18px 18px 12px 12px;
}

.product-card__visual--wall span::after,
.product-card__visual--multi span::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 9px;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.36);
}

.product-card__visual--multi {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-inline: 22px;
}

.product-card__visual--multi span {
  width: 100%;
  max-width: 118px;
  height: 38px;
  border-radius: 16px 16px 12px 12px;
}

.product-card__visual--floor span {
  width: min(54%, 132px);
  height: 86px;
  border-radius: 22px 22px 16px 16px;
}

.product-card__visual--floor span::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 18px;
  height: 30px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.18) 0 2px, transparent 2px 9px);
}

.product-card__visual--pump span {
  width: min(58%, 142px);
  height: 92px;
  border-radius: 22px;
}

.product-card__visual--pump span::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 5px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 999px;
}

.product-card__body {
  display: grid;
  align-content: start;
  gap: 10px;
}

.product-card h3 {
  margin: 0;
  color: var(--silver-deep);
  font-size: clamp(1.12rem, 1rem + 0.4vw, 1.34rem);
  line-height: 1.12;
}

.product-card p:not(.card-code) {
  margin: 0;
  color: var(--home-muted, var(--muted));
  font-size: 0.96rem;
  line-height: 1.55;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.product-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: #49657f;
  font-size: 0.74rem;
  font-weight: 800;
}

.product-card__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 4px;
  padding: 8px 13px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(223, 237, 250, 0.82));
  color: #285d93;
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.product-showroom__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
  padding: 15px 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(233, 240, 247, 0.78));
}

.product-showroom__note strong {
  color: var(--silver-deep);
  font-size: 1rem;
}

.product-showroom__note span {
  color: var(--home-muted, var(--muted));
  line-height: 1.5;
}

.homepage-media-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.homepage-media-card {
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 8%, rgba(126, 166, 207, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 241, 247, 0.88));
}

.homepage-media-card__image {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 168px;
  margin: -4px -4px 14px;
  border: 1px solid rgba(126, 166, 207, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(212, 230, 246, 0.62)),
    repeating-linear-gradient(0deg, rgba(126, 166, 207, 0.08) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(126, 166, 207, 0.08) 0 1px, transparent 1px 18px);
}

.homepage-media-card__image img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  display: block;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.34);
}

.homepage-media-card__image img[hidden] {
  display: none !important;
}

.homepage-media-card__image span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #2d5f94;
  font-weight: 900;
  letter-spacing: -0.06em;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.homepage-media-card.has-homepage-media .homepage-media-card__image span {
  display: none;
}

.homepage-media-card h3 {
  margin: 0 0 8px;
  color: #203446;
  font-size: 1.18rem;
  letter-spacing: -0.03em;
}

.homepage-media-card p:last-child {
  margin: 0;
  color: var(--home-muted, var(--muted));
  line-height: 1.56;
}

.site-home .project-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 340px));
  justify-content: start;
  gap: 14px;
}

.site-home .feature-card,
.site-home .project-card,
.site-home .process-card {
  min-height: 0;
  padding: 22px;
  border-radius: 22px;
}

.site-home .feature-card h3,
.site-home .project-card h3,
.site-home .process-card h3 {
  font-size: 1.24rem;
}

.site-home .feature-card p,
.site-home .project-card p,
.site-home .process-card p {
  font-size: 0.98rem;
  line-height: 1.58;
}

.site-home .process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.site-home .process-grid--linked::before {
  opacity: 0.45;
}

.site-home .faq-list {
  display: grid;
  gap: 10px;
}

.site-home .faq-item {
  border-radius: 18px;
}

.site-home .contact-switcher {
  width: min(calc(100% - 32px), 1240px);
  margin: 0 auto 18px;
  padding: 18px;
}

.site-home .contact-layout {
  width: min(calc(100% - 32px), 1240px);
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
}

.site-home .contact-copy,
.site-home .contact-form,
.site-home .appointment-form {
  padding: clamp(24px, 3.5vw, 40px);
}

.site-home .contact-copy h2,
.site-home .contact-form h3,
.site-home .appointment-form h3 {
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.site-home .footer-callout,
.site-home .site-footer {
  width: min(calc(100% - 32px), 1240px);
  margin-inline: auto;
}

.site-home .footer-callout__link {
  width: 100%;
}

@media screen and (max-width: 1180px) {
  .site-home .service-grid,
  .product-showroom__grid,
  .homepage-media-strip,
  .site-home .process-grid,
  .overview-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-home .section-heading {
    grid-template-columns: 1fr;
  }

  .site-home .section-heading h2 {
    max-width: 18ch;
  }
}

@media screen and (max-width: 960px) {
  .site-home .header-main {
    min-height: 170px;
  }

  .site-home .header-shell:not(.header-shell--portal) .header-utility {
    position: static;
    margin: 10px auto 0;
  }

  .site-home .hero-shell,
  .site-home .contact-layout {
    grid-template-columns: 1fr;
  }

  .site-home .hero-copy h1 {
    max-width: 15ch;
  }

  .site-home .hero-copy > :not(.panel-corners):not(.hero-photo-bg) {
    width: min(100%, 640px);
    margin-left: 0;
  }

  .site-home .hero-points,
  .site-home .visual-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 680px) {
  .site-home .top-toolbar__inner {
    gap: 8px;
    justify-content: center;
  }

  .site-home .toolbar-group--right {
    width: 100%;
    justify-content: center;
  }

  .site-home .toolbar-group--right > a:not(.top-direct-contact) {
    display: none;
  }

  .site-home .toolbar-group--brand > .top-login-link {
    display: inline-flex !important;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.64rem;
  }

  .site-home .top-direct-contact {
    flex: 1 1 calc(50% - 8px);
    min-height: 42px;
  }

  .site-home .header-shell:not(.header-shell--portal),
  .site-home .hero-shell,
  .site-home .content-section,
  .site-home .contact-switcher,
  .site-home .contact-layout,
  .site-home .footer-callout,
  .site-home .site-footer,
  .overview-rail {
    width: min(calc(100% - 20px), 1240px);
  }

  .site-home .header-main {
    min-height: 132px;
  }

  .site-home .brand--banner {
    width: min(320px, 78vw);
  }

  .site-home .site-nav {
    gap: 8px;
  }

  .site-home .site-nav a {
    min-height: 40px;
    padding: 0 13px;
    font-size: 0.9rem;
  }

  .site-home .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(1.55rem, 7.2vw, 2.05rem);
    line-height: 1.08;
  }

  .site-home .section-heading--compact {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .site-home .section-heading--compact h2 {
    max-width: 100%;
    font-size: clamp(1.26rem, 6vw, 1.72rem);
  }

  .site-home .section-heading--compact > p:not(.section-kicker) {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .homepage-media-strip--compact .homepage-media-card {
    padding: 10px;
  }

  .homepage-media-strip--compact .homepage-media-card__image,
  .homepage-media-strip--compact .homepage-media-card__image img {
    min-height: 66px;
  }

  .site-home .hero-copy {
    padding: 24px 18px 20px;
    min-height: 0;
  }

  .site-home .hero-actions {
    width: 100%;
  }

  .site-home .hero-actions .top-direct-contact {
    flex: 1 1 100%;
  }

  .site-home .hero-copy::before,
  .site-home .hero-copy:hover::before,
  .site-home .hero-copy:focus-within::before {
    background:
      linear-gradient(180deg, rgba(246, 251, 255, 0.96), rgba(246, 251, 255, 0.86) 62%, rgba(246, 251, 255, 0.58));
  }

  .hero-news-ticker {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
  }

  .hero-news-ticker__label {
    min-height: 28px;
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid rgba(39, 123, 215, 0.2);
    font-size: 0.68rem;
  }

  .hero-news-ticker__track {
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
  }

  .hero-news-ticker__track span {
    padding: 0 22px;
    animation: heroNewsTicker 20s linear infinite;
  }

  .site-home .hero-panel--display {
    display: none;
  }

  .home-jump-nav {
    gap: 6px;
  }

  .home-jump-nav a {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.78rem;
  }

  .overview-rail,
  .site-home .service-grid,
  .product-showroom__grid,
  .homepage-media-strip,
  .site-home .process-grid {
    grid-template-columns: 1fr;
  }

  .overview-rail__item {
    min-height: 78px;
  }

  .site-home .contact-switcher__buttons {
    grid-template-columns: 1fr;
  }

  .compact-segment-grid,
  .compact-appliance-row {
    grid-template-columns: 1fr;
  }

  .compact-segment-card,
  .compact-appliance-card {
    padding: 14px;
  }

  .homepage-media-strip--compact {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }

  .homepage-media-strip--compact .homepage-media-card {
    min-width: min(78vw, 320px);
    scroll-snap-align: start;
  }
}

/* Zachte parel/blauw/zilver kleurlagen voor meer diepte op de hoofdsite. */
.site-home {
  background:
    radial-gradient(circle at 10% 6%, rgba(134, 190, 240, 0.24), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(184, 199, 214, 0.32), transparent 32%),
    radial-gradient(circle at 50% 58%, rgba(230, 244, 255, 0.55), transparent 42%),
    linear-gradient(135deg, #fbfdff 0%, #edf7ff 38%, #f8fbfe 68%, #e7f1fb 100%);
}

.site-home .page-noise {
  opacity: 0.48;
}

.site-home .top-toolbar {
  background:
    linear-gradient(90deg, rgba(250, 253, 255, 0.92), rgba(229, 243, 255, 0.82), rgba(247, 250, 253, 0.92));
}

.site-home .header-shell:not(.header-shell--portal) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(232, 243, 253, 0.1) 44%, rgba(247, 249, 252, 0.18)),
    var(--home-banner-bg-image) center center / 100% 100% no-repeat,
    rgba(242, 248, 253, 0.92);
}

.site-home .header-shell:not(.header-shell--portal)::before {
  background: none;
  opacity: 0;
}

.site-home .hero-copy {
  background:
    var(--home-bottom-banner-bg-image) center center / cover no-repeat,
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.88) 54%, rgba(246, 248, 251, 0.96));
}

.site-home .hero-panel--display {
  background:
    radial-gradient(circle at 72% 20%, rgba(190, 221, 248, 0.58), transparent 34%),
    linear-gradient(145deg, rgba(246, 251, 255, 0.96), rgba(232, 240, 248, 0.84) 58%, rgba(255, 255, 255, 0.94));
}

.site-home .callout-strip__inner {
  background:
    linear-gradient(105deg, rgba(236, 247, 255, 0.92), rgba(255, 255, 255, 0.96) 46%, rgba(230, 239, 248, 0.9));
  border-color: rgba(105, 159, 213, 0.22);
}

.overview-rail__item:nth-child(1) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(229, 244, 255, 0.86));
}

.overview-rail__item:nth-child(2) {
  background: linear-gradient(145deg, rgba(249, 252, 255, 0.96), rgba(232, 238, 244, 0.9));
}

.overview-rail__item:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(222, 239, 253, 0.82));
}

.overview-rail__item:nth-child(4) {
  background: linear-gradient(145deg, rgba(249, 252, 255, 0.96), rgba(227, 234, 241, 0.9));
}

.site-home .content-section {
  border-color: rgba(126, 166, 207, 0.2);
  background:
    radial-gradient(circle at 86% 12%, rgba(208, 232, 252, 0.36), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 253, 0.82));
}

.site-home .section-soft {
  background:
    radial-gradient(circle at 12% 18%, rgba(209, 231, 250, 0.46), transparent 34%),
    linear-gradient(145deg, rgba(243, 250, 255, 0.94), rgba(236, 243, 250, 0.88) 54%, rgba(255, 255, 255, 0.94));
}

.site-home .feature-card:nth-child(odd),
.site-home .project-card:nth-child(odd),
.site-home .process-card:nth-child(odd) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(231, 245, 255, 0.78));
}

.site-home .feature-card:nth-child(even),
.site-home .project-card:nth-child(even),
.site-home .process-card:nth-child(even) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 240, 246, 0.82));
}

.site-home .contact-switcher,
.site-home .contact-copy,
.site-home .contact-form,
.site-home .appointment-form {
  background:
    radial-gradient(circle at 90% 14%, rgba(210, 235, 255, 0.36), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 254, 0.86));
}

.site-home .footer-callout__link,
.site-home .footer-columns {
  background:
    linear-gradient(135deg, rgba(238, 248, 255, 0.94), rgba(255, 255, 255, 0.96) 46%, rgba(230, 238, 246, 0.9));
}

/* Android/touch-vriendelijk: kaarten zijn zonder hover al duidelijk, knoppen reageren subtiel op tikken. */
.site-home .feature-card,
.site-home .project-card,
.site-home .product-card,
.site-home .process-card,
.site-home .visual-card,
.site-home .hero-point,
.overview-rail__item {
  border-color: rgba(var(--accent-rgb, 47, 127, 224), 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 14px 34px rgba(45, 82, 119, 0.07);
}

.site-home .feature-card,
.site-home .project-card,
.site-home .product-card,
.site-home .process-card {
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--accent-rgb, 47, 127, 224), 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(235, 246, 255, 0.8) 52%, rgba(236, 241, 247, 0.84));
}

.site-home .feature-card:nth-child(even),
.site-home .project-card:nth-child(even),
.site-home .product-card:nth-child(even),
.site-home .process-card:nth-child(even) {
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--accent-rgb, 88, 102, 116), 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(232, 239, 247, 0.86) 52%, rgba(245, 250, 254, 0.9));
}

.site-home .card-hoverline {
  width: 62%;
  opacity: 0.72;
}

.site-home .project-hovermeta {
  opacity: 0.96;
  transform: none;
}

.site-home .project-hovermeta span {
  border-color: rgba(var(--accent-rgb, 47, 127, 224), 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(231, 242, 253, 0.72));
}

.site-home .button,
.site-home .filter-button,
.site-home .contact-tab,
.site-home .site-nav a,
.site-home .portal-trigger,
.overview-rail__item {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    color 170ms ease;
}

.site-home .button:active,
.site-home .filter-button:active,
.site-home .contact-tab:active,
.site-home .site-nav a:active,
.site-home .portal-trigger:active,
.overview-rail__item:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 2px 8px rgba(16, 56, 96, 0.08),
    0 8px 18px rgba(47, 127, 224, 0.1);
}

@media (hover: hover) and (pointer: fine) {
  .site-home .feature-card:hover,
  .site-home .project-card:hover,
  .site-home .product-card:hover,
  .site-home .process-card:hover,
  .site-home .visual-card:hover,
  .site-home .hero-point:hover,
  .overview-rail__item:hover {
    border-color: rgba(var(--accent-rgb, 47, 127, 224), 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 22px 46px rgba(42, 84, 126, 0.12);
  }
}

@media (hover: none), (pointer: coarse) {
  .site-home .button,
  .site-home .filter-button,
  .site-home .contact-tab,
  .site-home .site-nav a,
  .site-home .portal-trigger {
    min-height: 46px;
  }

  .site-home .feature-card:hover,
  .site-home .project-card:hover,
  .site-home .product-card:hover,
  .site-home .process-card:hover,
  .site-home .contact-copy:hover,
  .site-home .contact-form:hover,
  .site-home .appointment-form:hover,
  .site-home .footer-callout__link:hover {
    transform: none;
  }

  .site-home .feature-card:hover .card-hoverline,
  .site-home .feature-card:focus-within .card-hoverline {
    width: 72%;
    box-shadow: 0 0 12px rgba(var(--accent-rgb, 47, 127, 224), 0.18);
  }

  .site-home .project-card:hover .project-media img,
  .site-home .project-card:focus-within .project-media img {
    transform: none;
  }

  .site-home .project-card:hover .project-hovermeta,
  .site-home .project-card:focus-within .project-hovermeta {
    transform: none;
  }

  .site-home .project-card:hover .project-hovermeta span,
  .site-home .project-card:focus-within .project-hovermeta span {
    box-shadow: none;
  }

  .site-home .overview-rail__item,
  .site-home .feature-card,
  .site-home .project-card,
  .site-home .product-card,
  .site-home .process-card {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 10px 24px rgba(45, 82, 119, 0.075);
  }
}

/* Sitebrede kleurcontour: meer zichtbaar blauw/zilver zonder harde kleuren. */
body.site-home,
body.portal-page,
body.booking-page {
  --contour-blue: 47, 127, 224;
  --contour-cyan: 89, 183, 246;
  --contour-silver: 150, 169, 190;
  --contour-ink: #1c3854;
  background:
    radial-gradient(circle at 8% 10%, rgba(var(--contour-cyan), 0.28), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(var(--contour-blue), 0.18), transparent 28%),
    radial-gradient(circle at 50% 78%, rgba(var(--contour-silver), 0.24), transparent 38%),
    linear-gradient(135deg, #f6fbff 0%, #dceeff 34%, #f4f8fc 62%, #d6e6f5 100%);
}

body.portal-page:not(.portal-page--guest) {
  background:
    radial-gradient(circle at 7% 14%, rgba(var(--contour-cyan), 0.22), transparent 30%),
    radial-gradient(circle at 94% 8%, rgba(var(--contour-blue), 0.16), transparent 28%),
    linear-gradient(135deg, #f4f9fe 0%, #ddeeff 42%, #edf4fb 100%);
}

body.booking-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(var(--contour-cyan), 0.22), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(var(--contour-blue), 0.15), transparent 30%),
    linear-gradient(135deg, #f6fbff 0%, #dfefff 46%, #edf5fc 100%);
}

body.site-home::before,
body.portal-page::before,
body.booking-page::before {
  background:
    linear-gradient(rgba(62, 116, 168, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 116, 168, 0.08) 1px, transparent 1px);
  opacity: 0.58;
}

body.site-home .header-shell,
body.portal-page .header-shell,
body.booking-page .header-shell,
body.site-home .tech-panel,
body.portal-page .tech-panel,
body.booking-page .tech-panel,
body.portal-page .portal-section-card,
body.portal-page .portal-auth-card,
body.portal-page .portal-finance-toolbar-card,
body.portal-page .portal-finance-search-card,
body.portal-page .portal-finance-summary-card,
body.portal-page .portal-finance-document,
body.portal-page .portal-case,
body.portal-page .portal-admin-list-card,
body.portal-page .portal-admin-detail-card,
body.portal-page .portal-message-card,
body.booking-page .booking-card,
body.booking-page .booking-panel {
  border-color: rgba(var(--contour-blue), 0.26);
  background:
    radial-gradient(circle at 96% 0%, rgba(var(--contour-cyan), 0.18), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(229, 243, 255, 0.86) 48%, rgba(238, 244, 250, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 20px 48px rgba(39, 80, 120, 0.11);
}

body.site-home .content-section,
body.site-home .contact-switcher,
body.site-home .footer-callout__link,
body.site-home .footer-columns,
body.portal-page .portal-section-card,
body.portal-page .portal-finance-toolbar-card,
body.portal-page .portal-finance-search-card,
body.portal-page .portal-finance-summary-card,
body.booking-page .booking-card {
  border-left-color: rgba(var(--contour-blue), 0.44);
  border-top-color: rgba(var(--contour-cyan), 0.36);
}

body.site-home .feature-card,
body.site-home .project-card,
body.site-home .process-card,
body.site-home .visual-card,
body.site-home .hero-point,
body.site-home .overview-rail__item,
body.portal-page .portal-case,
body.portal-page .portal-finance-document,
body.portal-page .portal-status-card,
body.portal-page .portal-timeline-card,
body.portal-page .portal-photo-card,
body.portal-page .portal-admin-list-item,
body.booking-page .slot-card {
  border-color: rgba(var(--contour-blue), 0.3);
  background:
    radial-gradient(circle at 92% 10%, rgba(var(--contour-cyan), 0.16), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(226, 242, 255, 0.86) 52%, rgba(232, 239, 247, 0.9));
}

body.site-home .feature-card:nth-child(even),
body.site-home .project-card:nth-child(even),
body.site-home .process-card:nth-child(even),
body.portal-page .portal-finance-document:nth-child(even),
body.portal-page .portal-case:nth-child(even) {
  background:
    radial-gradient(circle at 92% 10%, rgba(var(--contour-silver), 0.18), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(231, 238, 246, 0.9) 52%, rgba(240, 247, 253, 0.94));
}

body.site-home .section-kicker,
body.portal-page .section-kicker,
body.booking-page .section-kicker,
body.site-home .card-code,
body.site-home .project-label {
  color: #2f6faa;
}

body.site-home input:not([type="checkbox"]):not([type="radio"]),
body.site-home select,
body.site-home textarea,
body.portal-page input:not([type="checkbox"]):not([type="radio"]),
body.portal-page select,
body.portal-page textarea,
body.booking-page input:not([type="checkbox"]):not([type="radio"]),
body.booking-page select,
body.booking-page textarea {
  border-color: rgba(var(--contour-blue), 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.site-home .button,
body.site-home .filter-button,
body.site-home .contact-tab,
body.portal-page .button,
body.portal-page .filter-button,
body.portal-page .portal-inline-button,
body.portal-page .portal-mini-button,
body.booking-page .button {
  border-color: rgba(var(--contour-blue), 0.32);
  background:
    linear-gradient(180deg, rgba(249, 253, 255, 0.98), rgba(219, 237, 253, 0.94));
}

body.site-home .button-primary,
body.portal-page .button-primary,
body.booking-page .button-primary {
  background:
    linear-gradient(135deg, #2f7ed8 0%, #3d98ed 54%, #2c69b6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 30px rgba(var(--contour-blue), 0.22);
}

@media print {
  body.document-page,
  body.document-page::before {
    background: #ffffff !important;
  }
}

/* Pearl silver tuning: minder hard blauw, meer zilver/parel en actieve idle buttons. */
body.site-home,
body.portal-page,
body.booking-page {
  --contour-blue: 69, 118, 168;
  --contour-cyan: 126, 190, 226;
  --contour-silver: 174, 185, 197;
  --pearl-white: #fbfcfc;
  --pearl-soft: #f1f5f7;
  --pearl-blue: #e3f1fb;
  --pearl-silver: #dbe2e8;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.92), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(var(--contour-silver), 0.28), transparent 30%),
    radial-gradient(circle at 18% 76%, rgba(var(--contour-cyan), 0.16), transparent 32%),
    linear-gradient(135deg, #fbfcfd 0%, #edf3f6 28%, #dce8ef 58%, #f7fafb 100%);
}

body.portal-page:not(.portal-page--guest),
body.booking-page {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.88), transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(var(--contour-silver), 0.25), transparent 30%),
    linear-gradient(135deg, #fbfcfd 0%, #edf4f7 34%, #dfeaf0 68%, #f7fafc 100%);
}

body.site-home::before,
body.portal-page::before,
body.booking-page::before {
  background:
    linear-gradient(rgba(88, 119, 148, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 119, 148, 0.065) 1px, transparent 1px);
  opacity: 0.48;
}

body.site-home .header-shell,
body.portal-page .header-shell,
body.booking-page .header-shell,
body.site-home .tech-panel,
body.portal-page .tech-panel,
body.booking-page .tech-panel,
body.site-home .content-section,
body.site-home .contact-switcher,
body.portal-page .portal-section-card,
body.portal-page .portal-auth-card,
body.portal-page .portal-finance-toolbar-card,
body.portal-page .portal-finance-search-card,
body.portal-page .portal-finance-summary-card,
body.portal-page .portal-finance-document,
body.portal-page .portal-case,
body.portal-page .portal-admin-list-card,
body.portal-page .portal-admin-detail-card,
body.portal-page .portal-message-card,
body.booking-page .booking-card,
body.booking-page .booking-panel {
  border-color: rgba(var(--contour-silver), 0.5);
  background:
    radial-gradient(circle at 94% 0%, rgba(var(--contour-cyan), 0.11), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 248, 0.92) 46%, rgba(224, 232, 238, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(138, 154, 170, 0.1),
    0 20px 46px rgba(45, 65, 84, 0.11);
}

body.site-home .feature-card,
body.site-home .project-card,
body.site-home .process-card,
body.site-home .visual-card,
body.site-home .hero-point,
body.site-home .overview-rail__item,
body.portal-page .portal-status-card,
body.portal-page .portal-timeline-card,
body.portal-page .portal-photo-card,
body.portal-page .portal-admin-list-item,
body.booking-page .slot-card {
  border-color: rgba(var(--contour-silver), 0.46);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(242, 246, 248, 0.94) 48%, rgba(229, 236, 241, 0.9)),
    radial-gradient(circle at 92% 8%, rgba(var(--contour-cyan), 0.12), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 28px rgba(52, 72, 92, 0.08);
}

body.site-home .feature-card:nth-child(even),
body.site-home .project-card:nth-child(even),
body.site-home .process-card:nth-child(even),
body.portal-page .portal-finance-document:nth-child(even),
body.portal-page .portal-case:nth-child(even) {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(236, 241, 245, 0.94) 52%, rgba(246, 249, 251, 0.92)),
    radial-gradient(circle at 90% 8%, rgba(var(--contour-silver), 0.18), transparent 34%);
}

body.site-home .button,
body.site-home .filter-button,
body.site-home .contact-tab,
body.site-home .site-nav a,
body.site-home .portal-trigger,
body.portal-page .button,
body.portal-page .filter-button,
body.portal-page .portal-inline-button,
body.portal-page .portal-mini-button,
body.booking-page .button {
  border-color: rgba(126, 149, 171, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(244, 248, 250, 0.98) 46%, rgba(222, 231, 238, 0.96) 100%);
  color: #27415c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(127, 145, 164, 0.22),
    0 10px 22px rgba(44, 66, 88, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.56);
}

body.site-home .button:not(.button-primary)::before,
body.portal-page .button:not(.button-primary)::before,
body.booking-page .button:not(.button-primary)::before {
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.14) 24%, rgba(255, 255, 255, 0.52) 44%, rgba(181, 196, 209, 0.18) 58%, transparent 76%);
  opacity: 0.6;
}

body.site-home .button:hover,
body.site-home .button:focus-visible,
body.site-home .filter-button:hover,
body.site-home .filter-button:focus-visible,
body.site-home .contact-tab:hover,
body.site-home .contact-tab:focus-visible,
body.site-home .site-nav a:hover,
body.site-home .site-nav a:focus-visible,
body.portal-page .button:hover,
body.portal-page .button:focus-visible,
body.portal-page .filter-button:hover,
body.portal-page .filter-button:focus-visible,
body.portal-page .portal-inline-button:hover,
body.portal-page .portal-inline-button:focus-visible,
body.portal-page .portal-mini-button:hover,
body.portal-page .portal-mini-button:focus-visible,
body.booking-page .button:hover,
body.booking-page .button:focus-visible {
  border-color: rgba(79, 132, 180, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 247, 251, 0.98) 42%, rgba(210, 226, 237, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(106, 134, 160, 0.22),
    0 14px 28px rgba(45, 77, 108, 0.14),
    0 0 0 3px rgba(138, 194, 230, 0.11);
}

body.site-home .button-primary,
body.portal-page .button-primary,
body.booking-page .button-primary,
body.site-home .filter-button.is-active,
body.portal-page .filter-button.is-active {
  border-color: rgba(52, 105, 158, 0.48);
  background:
    linear-gradient(135deg, #5b7f9d 0%, #2f75b7 48%, #75b3d6 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(13, 45, 78, 0.24),
    0 14px 30px rgba(48, 87, 125, 0.2);
}

body.site-home .section-kicker,
body.portal-page .section-kicker,
body.booking-page .section-kicker,
body.site-home .card-code,
body.site-home .project-label {
  color: #547da3;
}

body.site-home input:not([type="checkbox"]):not([type="radio"]),
body.site-home select,
body.site-home textarea,
body.portal-page input:not([type="checkbox"]):not([type="radio"]),
body.portal-page select,
body.portal-page textarea,
body.booking-page input:not([type="checkbox"]):not([type="radio"]),
body.booking-page select,
body.booking-page textarea {
  border-color: rgba(126, 149, 171, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 249, 0.94));
}

/* Clickable idle contrast: duidelijker knoppen/acties, zonder gedrag of markup te wijzigen. */
body.site-home :where(
  .button,
  .filter-button,
  .contact-tab,
  .site-nav a,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .menu-toggle,
  .scroll-top-button
),
body.portal-page :where(
  .button,
  .filter-button,
  .site-nav a,
  .portal-inline-button,
  .portal-mini-button,
  .client-access-link,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .menu-toggle,
  .scroll-top-button
),
body.booking-page :where(
  .button,
  .filter-button,
  .planning-duration-option,
  .planning-time-button,
  .menu-toggle,
  .scroll-top-button
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  border-color: rgba(36, 104, 174, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 244, 253, 0.98) 42%, rgba(189, 219, 242, 0.98) 100%);
  color: #153a60;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(32, 92, 150, 0.22),
    0 10px 20px rgba(24, 67, 112, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(61, 153, 232, 0.08);
}

body.site-home :where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .menu-toggle,
  .scroll-top-button
)::before,
body.portal-page :where(
  .button,
  .filter-button,
  .portal-inline-button,
  .portal-mini-button,
  .client-access-link,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .menu-toggle,
  .scroll-top-button
)::before,
body.booking-page :where(
  .button,
  .filter-button,
  .planning-duration-option,
  .planning-time-button,
  .menu-toggle,
  .scroll-top-button
)::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.85), transparent 34%),
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.42) 38%, rgba(91, 181, 246, 0.2) 52%, transparent 72%);
  opacity: 0.72;
}

body.site-home :where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link
)::after,
body.portal-page :where(
  .button,
  .filter-button,
  .portal-inline-button,
  .portal-mini-button,
  .client-access-link,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link
)::after,
body.booking-page :where(
  .button,
  .filter-button,
  .planning-duration-option,
  .planning-time-button
)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 122, 230, 0.72), rgba(108, 215, 255, 0.72), transparent);
  opacity: 0.62;
  transform: scaleX(0.72);
  transform-origin: center;
}

body.site-home :where(.button-primary, .filter-button.is-active, .contact-tab.is-active),
body.portal-page :where(.button-primary, .filter-button.is-active, .portal-finance-filter.is-active, .portal-finance-chip.is-active, .portal-auth-tab.is-active, .portal-case-filter.is-active, .portal-admin-tab.is-active),
body.booking-page :where(.button-primary, .filter-button.is-active, .planning-duration-option.is-active, .planning-time-button.is-selected) {
  border-color: rgba(17, 89, 164, 0.72);
  background:
    linear-gradient(135deg, #1d65b2 0%, #168ce6 48%, #61c8f4 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(5, 33, 68, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(6, 44, 88, 0.32),
    0 14px 28px rgba(19, 94, 169, 0.26),
    0 0 0 4px rgba(50, 160, 235, 0.13);
}

body.site-home :where(.site-nav a) .nav-label,
body.portal-page :where(.site-nav a) .nav-label {
  color: #183d63;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

body.site-home :where(.button:hover, .button:focus-visible, .filter-button:hover, .filter-button:focus-visible, .contact-tab:hover, .contact-tab:focus-visible, .site-nav a:hover, .site-nav a:focus-visible, .portal-trigger:hover, .portal-trigger:focus-visible, .home-jump-nav a:hover, .home-jump-nav a:focus-visible, .product-card__link:hover, .product-card__link:focus-visible, .menu-toggle:hover, .menu-toggle:focus-visible),
body.portal-page :where(.button:hover, .button:focus-visible, .filter-button:hover, .filter-button:focus-visible, .site-nav a:hover, .site-nav a:focus-visible, .portal-inline-button:hover, .portal-inline-button:focus-visible, .portal-mini-button:hover, .portal-mini-button:focus-visible, .client-access-link:hover, .client-access-link:focus-visible, .portal-finance-filter:hover, .portal-finance-filter:focus-visible, .portal-finance-chip:hover, .portal-finance-chip:focus-visible, .portal-auth-tab:hover, .portal-auth-tab:focus-visible, .portal-case-filter:hover, .portal-case-filter:focus-visible, .portal-admin-tab:hover, .portal-admin-tab:focus-visible, .portal-admin-inline-link:hover, .portal-admin-inline-link:focus-visible, .menu-toggle:hover, .menu-toggle:focus-visible),
body.booking-page :where(.button:hover, .button:focus-visible, .filter-button:hover, .filter-button:focus-visible, .planning-duration-option:hover, .planning-duration-option:focus-visible, .planning-time-button:hover, .planning-time-button:focus-visible, .menu-toggle:hover, .menu-toggle:focus-visible) {
  border-color: rgba(11, 96, 188, 0.76);
  background:
    linear-gradient(180deg, #ffffff 0%, #e4f4ff 38%, #abd9f9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(19, 91, 158, 0.24),
    0 16px 30px rgba(23, 91, 156, 0.22),
    0 0 0 4px rgba(42, 159, 244, 0.16),
    0 0 18px rgba(92, 194, 255, 0.22);
}

body.site-home :where(.button:hover, .button:focus-visible, .filter-button:hover, .filter-button:focus-visible, .contact-tab:hover, .contact-tab:focus-visible, .portal-trigger:hover, .portal-trigger:focus-visible, .home-jump-nav a:hover, .home-jump-nav a:focus-visible, .product-card__link:hover, .product-card__link:focus-visible)::after,
body.portal-page :where(.button:hover, .button:focus-visible, .filter-button:hover, .filter-button:focus-visible, .portal-inline-button:hover, .portal-inline-button:focus-visible, .portal-mini-button:hover, .portal-mini-button:focus-visible, .client-access-link:hover, .client-access-link:focus-visible, .portal-finance-filter:hover, .portal-finance-filter:focus-visible, .portal-finance-chip:hover, .portal-finance-chip:focus-visible, .portal-auth-tab:hover, .portal-auth-tab:focus-visible, .portal-case-filter:hover, .portal-case-filter:focus-visible, .portal-admin-tab:hover, .portal-admin-tab:focus-visible, .portal-admin-inline-link:hover, .portal-admin-inline-link:focus-visible)::after,
body.booking-page :where(.button:hover, .button:focus-visible, .filter-button:hover, .filter-button:focus-visible, .planning-duration-option:hover, .planning-duration-option:focus-visible, .planning-time-button:hover, .planning-time-button:focus-visible)::after {
  opacity: 0.95;
  transform: scaleX(1);
}

body.site-home :where(.button-primary:hover, .button-primary:focus-visible),
body.portal-page :where(.button-primary:hover, .button-primary:focus-visible),
body.booking-page :where(.button-primary:hover, .button-primary:focus-visible) {
  border-color: rgba(20, 78, 138, 0.82);
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.28), transparent 32%),
    linear-gradient(135deg, #1f5f9e 0%, #2677bd 48%, #164d88 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(6, 26, 52, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(4, 34, 72, 0.34),
    0 16px 30px rgba(18, 78, 137, 0.26),
    0 0 0 1px rgba(151, 205, 246, 0.16);
}

body.site-home :where(.button-primary:hover, .button-primary:focus-visible)::after,
body.portal-page :where(.button-primary:hover, .button-primary:focus-visible)::after,
body.booking-page :where(.button-primary:hover, .button-primary:focus-visible)::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), rgba(116, 205, 255, 0.62), transparent);
}

body.site-home :where(.button-primary),
body.portal-page :where(.button-primary),
body.booking-page :where(.button-primary) {
  border-color: rgba(20, 86, 150, 0.78);
  background:
    linear-gradient(180deg, rgba(105, 171, 220, 0.92) 0%, rgba(48, 119, 181, 0.98) 42%, rgba(20, 78, 137, 1) 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(3, 24, 48, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(3, 28, 58, 0.34),
    0 12px 24px rgba(20, 83, 145, 0.22),
    0 0 0 1px rgba(151, 205, 246, 0.16);
}

body.site-home :where(.button-primary:hover, .button-primary:focus-visible),
body.portal-page :where(.button-primary:hover, .button-primary:focus-visible),
body.booking-page :where(.button-primary:hover, .button-primary:focus-visible) {
  border-color: rgba(5, 48, 100, 0.9);
  background:
    radial-gradient(circle at 22% 0%, rgba(205, 236, 255, 0.26), transparent 34%),
    linear-gradient(180deg, #2f76b8 0%, #14579d 48%, #0a376f 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 16, 38, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 14, 36, 0.44),
    0 16px 30px rgba(8, 59, 116, 0.3),
    0 0 0 1px rgba(112, 186, 245, 0.2);
}

body.site-home :where(.button-primary)::before,
body.portal-page :where(.button-primary)::before,
body.booking-page :where(.button-primary)::before {
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 26%, rgba(215, 239, 255, 0.46) 44%, rgba(74, 166, 235, 0.18) 58%, transparent 76%);
  opacity: 0.82;
}

body.site-home :where(.button-primary)::after,
body.portal-page :where(.button-primary)::after,
body.booking-page :where(.button-primary)::after {
  background: linear-gradient(90deg, transparent, rgba(149, 213, 255, 0.86), rgba(255, 255, 255, 0.58), transparent);
  opacity: 0.76;
}

body.site-home :where(button:disabled, .button[disabled], .is-disabled),
body.portal-page :where(button:disabled, .button[disabled], .is-disabled),
body.booking-page :where(button:disabled, .button[disabled], .is-disabled) {
  cursor: not-allowed;
  color: #36516b;
  filter: grayscale(0.18);
  opacity: 0.88;
  text-shadow: none;
  background:
    linear-gradient(180deg, rgba(241, 247, 252, 0.98), rgba(205, 220, 232, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 6px 14px rgba(44, 66, 88, 0.08);
}

body.site-home :where(button:disabled:hover, button:disabled:focus-visible, .button[disabled]:hover, .button[disabled]:focus-visible, .is-disabled:hover, .is-disabled:focus-visible),
body.portal-page :where(button:disabled:hover, button:disabled:focus-visible, .button[disabled]:hover, .button[disabled]:focus-visible, .is-disabled:hover, .is-disabled:focus-visible),
body.booking-page :where(button:disabled:hover, button:disabled:focus-visible, .button[disabled]:hover, .button[disabled]:focus-visible, .is-disabled:hover, .is-disabled:focus-visible) {
  transform: none;
  color: #36516b;
  border-color: rgba(126, 149, 171, 0.42);
  background:
    linear-gradient(180deg, rgba(241, 247, 252, 0.98), rgba(205, 220, 232, 0.94));
}

body.site-home :where(button:disabled::after, .button[disabled]::after, .is-disabled::after),
body.portal-page :where(button:disabled::after, .button[disabled]::after, .is-disabled::after),
body.booking-page :where(button:disabled::after, .button[disabled]::after, .is-disabled::after) {
  opacity: 0.18;
}

/* Hoofdmenu: zilverparel idle glow en beter touch-gevoel op Android. */
body.site-home .site-nav a,
body.portal-page .site-nav a {
  min-height: 54px;
  padding: 0 25px;
  border-color: rgba(113, 146, 178, 0.66);
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.98), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(188, 220, 245, 0.44), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(238, 244, 248, 0.98) 46%, rgba(203, 216, 226, 0.98) 100%);
  color: #12385d;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(74, 165, 235, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(101, 129, 156, 0.32),
    0 10px 18px rgba(43, 70, 96, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 0 14px rgba(179, 205, 224, 0.28);
  animation: navPearlIdle 3.8s ease-in-out infinite;
}

body.site-home .site-nav a::before,
body.portal-page .site-nav a::before {
  inset: 3px;
  border-color: rgba(255, 255, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12) 46%, rgba(128, 158, 186, 0.12)),
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.58) 38%, rgba(169, 202, 227, 0.2) 54%, transparent 76%);
  opacity: 1;
  background-size: 100% 100%, 230% 100%;
  animation: navPearlSweep 4.6s ease-in-out infinite;
}

body.site-home .site-nav a::after,
body.portal-page .site-nav a::after {
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(134, 162, 188, 0.78), rgba(255, 255, 255, 0.92), rgba(73, 152, 218, 0.68), transparent);
  opacity: 0.82;
  transform: scaleX(0.82);
  animation: navPearlLine 3.8s ease-in-out infinite;
}

body.site-home .site-nav a .nav-core,
body.portal-page .site-nav a .nav-core {
  opacity: 0.08;
  background: linear-gradient(180deg, rgba(66, 134, 202, 0.88), rgba(26, 82, 143, 0.86));
  box-shadow: 0 0 16px rgba(86, 164, 231, 0.2);
}

body.site-home .site-nav a .nav-sheen,
body.portal-page .site-nav a .nav-sheen {
  opacity: 0.28;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0.92) 48%, rgba(208, 225, 238, 0.96) 58%, transparent 100%);
  animation-duration: 5.8s;
}

body.site-home .site-nav a .nav-label,
body.portal-page .site-nav a .nav-label {
  color: #14395f;
  font-weight: 800;
}

body.site-home .site-nav a:hover,
body.site-home .site-nav a:focus-visible,
body.site-home .site-nav a.is-active,
body.portal-page .site-nav a:hover,
body.portal-page .site-nav a:focus-visible,
body.portal-page .site-nav a.is-active {
  transform: translateY(-2px);
  border-color: rgba(62, 76, 91, 0.9);
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.9), transparent 26%),
    radial-gradient(circle at 86% 0%, rgba(205, 219, 231, 0.46), transparent 34%),
    linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, 0.34) 36%, rgba(160, 176, 190, 0.14) 48%, transparent 64%),
    linear-gradient(180deg, #f3f6f8 0%, #c7d0d8 28%, #8d9ba7 56%, #556675 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    inset 0 -10px 18px rgba(29, 42, 55, 0.22),
    0 16px 30px rgba(37, 52, 67, 0.28),
    0 0 0 4px rgba(134, 152, 168, 0.2),
    0 0 24px rgba(198, 211, 222, 0.42);
  animation: navPearlHover 1.8s ease-in-out infinite;
}

body.site-home .site-nav a:hover::before,
body.site-home .site-nav a:focus-visible::before,
body.site-home .site-nav a.is-active::before,
body.portal-page .site-nav a:hover::before,
body.portal-page .site-nav a:focus-visible::before,
body.portal-page .site-nav a.is-active::before {
  border-color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.82), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.09) 42%, rgba(28, 39, 51, 0.2)),
    linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.64) 42%, rgba(192, 205, 218, 0.26) 54%, transparent 74%);
  background-size: 100% 100%, 100% 100%, 240% 100%;
  animation: navPearlHoverSweep 1.85s ease-in-out infinite;
}

body.site-home .site-nav a:hover::after,
body.site-home .site-nav a:focus-visible::after,
body.site-home .site-nav a.is-active::after,
body.portal-page .site-nav a:hover::after,
body.portal-page .site-nav a:focus-visible::after,
body.portal-page .site-nav a.is-active::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), rgba(217, 228, 237, 0.96), rgba(94, 116, 137, 0.72), transparent);
  opacity: 1;
  transform: scaleX(1);
}

body.site-home .site-nav a:hover .nav-core,
body.site-home .site-nav a:focus-visible .nav-core,
body.site-home .site-nav a.is-active .nav-core,
body.portal-page .site-nav a:hover .nav-core,
body.portal-page .site-nav a:focus-visible .nav-core,
body.portal-page .site-nav a.is-active .nav-core {
  opacity: 0.24;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(180deg, rgba(128, 144, 158, 0.94), rgba(50, 64, 78, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(16, 24, 32, 0.28);
}

body.site-home .site-nav a:hover .nav-label,
body.site-home .site-nav a:focus-visible .nav-label,
body.site-home .site-nav a.is-active .nav-label,
body.portal-page .site-nav a:hover .nav-label,
body.portal-page .site-nav a:focus-visible .nav-label,
body.portal-page .site-nav a.is-active .nav-label {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(18, 28, 38, 0.58);
}

@media (pointer: coarse), (hover: none) {
  body.site-home .site-nav a,
  body.portal-page .site-nav a {
    min-height: 52px;
    padding: 0 22px;
    animation-duration: 3.2s;
  }
}

@keyframes navPearlIdle {
  0%,
  100% {
    border-color: rgba(113, 146, 178, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(101, 129, 156, 0.3),
      0 10px 18px rgba(43, 70, 96, 0.13),
      0 0 0 1px rgba(255, 255, 255, 0.82),
      0 0 12px rgba(179, 205, 224, 0.24);
  }

  50% {
    border-color: rgba(92, 153, 205, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(76, 130, 178, 0.34),
      0 12px 22px rgba(43, 70, 96, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.92),
      0 0 20px rgba(126, 190, 226, 0.36);
  }
}

@keyframes navPearlSweep {
  0%,
  100% {
    background-position: center, 120% center;
    opacity: 0.72;
  }

  48% {
    background-position: center, 0% center;
    opacity: 1;
  }
}

@keyframes navPearlLine {
  0%,
  100% {
    opacity: 0.58;
    transform: scaleX(0.72);
  }

  50% {
    opacity: 0.95;
    transform: scaleX(1);
  }
}

@keyframes navPearlHover {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }

  50% {
    filter: saturate(1.08) brightness(1.08);
  }
}

@keyframes navPearlHoverSweep {
  0%,
  100% {
    background-position: center, center, 118% center;
  }

  50% {
    background-position: center, center, 0% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-home .site-nav a,
  body.portal-page .site-nav a,
  body.site-home .site-nav a::before,
  body.portal-page .site-nav a::before,
  body.site-home .site-nav a::after,
  body.portal-page .site-nav a::after {
    animation: none;
  }
}

/* Click repair: glanslagen blijven visueel, maar kunnen nooit echte knoppen/links blokkeren. */
body.site-home :where(a, button, input, select, textarea, summary),
body.portal-page :where(a, button, input, select, textarea, summary),
body.booking-page :where(a, button, input, select, textarea, summary),
body.document-page :where(a, button, input, select, textarea, summary) {
  pointer-events: auto;
}

/* Document bekijken: altijd netjes binnen het scherm, ook als de editor ooit blokken heeft verschoven. */
body.document-page {
  overflow-x: hidden;
}

body.document-page .document-page-main,
body.document-page .content-section.document-page-main {
  width: min(100% - 24px, 210mm);
  margin-inline: auto;
  padding-inline: 0;
}

body.document-page .document-sheet {
  width: 100%;
  max-width: 210mm;
  overflow: hidden;
}

body.document-page .document-template-section {
  transform: none !important;
  width: min(var(--template-width, 100%), 100%) !important;
  max-width: 100% !important;
}

body.document-page .document-sheet__hero {
  align-items: end;
}

body.document-page .document-sheet__title-panel h1 {
  overflow-wrap: anywhere;
}

body.document-page .document-party-card p,
body.document-page .document-company-card p,
body.document-page .document-sheet__meta-list strong {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 720px) {
  body.document-page .document-page-main,
  body.document-page .content-section.document-page-main {
    width: min(100% - 16px, 210mm);
    padding-top: 8px;
    padding-bottom: 14px;
  }

  body.document-page .document-sheet--professional {
    padding: 18px;
    border-radius: 18px;
  }

  body.document-page .document-sheet__hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "brand"
      "title";
    gap: 12px;
    padding-bottom: 16px;
  }

  body.document-page .document-sheet__hero .document-brand,
  body.document-page .document-sheet__hero .document-company-card,
  body.document-page .document-sheet__hero .document-sheet__title-panel {
    justify-self: stretch;
    text-align: left;
  }

  body.document-page .document-sheet__hero .document-brand {
    grid-area: logo;
  }

  body.document-page .document-sheet__hero .document-company-card {
    grid-area: brand;
    width: 100%;
  }

  body.document-page .document-sheet__hero .document-sheet__title-panel {
    grid-area: title;
  }

  body.document-page .document-brand img {
    width: min(190px, 58vw);
  }

  body.document-page .document-sheet__title-panel h1 {
    font-size: clamp(2rem, 12vw, 3rem);
    line-height: 0.98;
  }

  body.document-page .document-sheet__meta-list {
    max-width: none;
    margin-top: 16px;
  }

  body.document-page .document-sheet__meta-list p {
    grid-template-columns: minmax(108px, 0.85fr) minmax(0, 1fr);
    gap: 10px;
  }

  body.document-page .document-sheet__overview,
  body.document-page .document-summary--professional,
  body.document-page .document-payment-block--professional {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.document-page .document-facts-grid--streamlined {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
  body.document-page .document-sheet--professional {
    padding: 16px 14px;
  }

  body.document-page .document-sheet__meta-list p,
  body.document-page .document-payment-list p,
  body.document-page .document-summary__totals div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.document-page .document-facts-grid--streamlined {
    grid-template-columns: 1fr;
  }
}

body.site-home :where(.button, .filter-button, .contact-tab, .site-nav a, .portal-trigger, .home-jump-nav a, .product-card__link, .menu-toggle, .scroll-top-button)::before,
body.site-home :where(.button, .filter-button, .contact-tab, .site-nav a, .portal-trigger, .home-jump-nav a, .product-card__link, .menu-toggle, .scroll-top-button)::after,
body.portal-page :where(.button, .filter-button, .site-nav a, .portal-inline-button, .portal-mini-button, .client-access-link, .portal-finance-filter, .portal-finance-chip, .portal-auth-tab, .portal-case-filter, .portal-admin-tab, .portal-admin-inline-link, .menu-toggle, .scroll-top-button)::before,
body.portal-page :where(.button, .filter-button, .site-nav a, .portal-inline-button, .portal-mini-button, .client-access-link, .portal-finance-filter, .portal-finance-chip, .portal-auth-tab, .portal-case-filter, .portal-admin-tab, .portal-admin-inline-link, .menu-toggle, .scroll-top-button)::after,
body.booking-page :where(.button, .filter-button, .planning-duration-option, .planning-time-button, .menu-toggle, .scroll-top-button)::before,
body.booking-page :where(.button, .filter-button, .planning-duration-option, .planning-time-button, .menu-toggle, .scroll-top-button)::after {
  pointer-events: none !important;
}

body.site-home .site-nav a > :where(.nav-core, .nav-sheen),
body.portal-page .site-nav a > :where(.nav-core, .nav-sheen),
.panel-corners {
  pointer-events: none !important;
}

body.site-home :where(.button, .filter-button, .contact-tab, .portal-trigger, .home-jump-nav a, .product-card__link, .menu-toggle, .scroll-top-button) > :not(.nav-core):not(.nav-sheen),
body.portal-page :where(.button, .filter-button, .portal-inline-button, .portal-mini-button, .client-access-link, .portal-finance-filter, .portal-finance-chip, .portal-auth-tab, .portal-case-filter, .portal-admin-tab, .portal-admin-inline-link, .menu-toggle, .scroll-top-button) > :not(.nav-core):not(.nav-sheen),
body.booking-page :where(.button, .filter-button, .planning-duration-option, .planning-time-button, .menu-toggle, .scroll-top-button) > :not(.nav-core):not(.nav-sheen) {
  position: relative;
  z-index: 2;
}

/* Definitieve hoverkleur voor gewone knoppen: nooit meer wit wegvallen. */
body.site-home :where(.button:not(.button-primary):hover, .button:not(.button-primary):focus-visible, .filter-button:hover, .filter-button:focus-visible, .contact-tab:hover, .contact-tab:focus-visible, .portal-trigger:hover, .portal-trigger:focus-visible, .home-jump-nav a:hover, .home-jump-nav a:focus-visible),
body.portal-page :where(.button:not(.button-primary):hover, .button:not(.button-primary):focus-visible, .filter-button:hover, .filter-button:focus-visible, .portal-inline-button:not(.button-primary):hover, .portal-inline-button:not(.button-primary):focus-visible, .portal-mini-button:not(.button-primary):hover, .portal-mini-button:not(.button-primary):focus-visible, .client-access-link:hover, .client-access-link:focus-visible, .portal-finance-filter:hover, .portal-finance-filter:focus-visible, .portal-finance-chip:hover, .portal-finance-chip:focus-visible, .portal-auth-tab:hover, .portal-auth-tab:focus-visible, .portal-case-filter:hover, .portal-case-filter:focus-visible, .portal-admin-tab:hover, .portal-admin-tab:focus-visible, .portal-admin-inline-link:hover, .portal-admin-inline-link:focus-visible),
body.booking-page :where(.button:not(.button-primary):hover, .button:not(.button-primary):focus-visible, .filter-button:hover, .filter-button:focus-visible, .planning-duration-option:hover, .planning-duration-option:focus-visible, .planning-time-button:hover, .planning-time-button:focus-visible) {
  border-color: rgba(47, 67, 88, 0.84) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #d8e1e8 0%, #8799a8 36%, #42586c 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(9, 20, 32, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(13, 26, 39, 0.38),
    0 14px 28px rgba(47, 73, 98, 0.22),
    0 0 0 2px rgba(96, 152, 205, 0.16) !important;
}

body.site-home :where(.button:not(.button-primary):hover, .button:not(.button-primary):focus-visible, .filter-button:hover, .filter-button:focus-visible, .contact-tab:hover, .contact-tab:focus-visible, .portal-trigger:hover, .portal-trigger:focus-visible, .home-jump-nav a:hover, .home-jump-nav a:focus-visible)::after,
body.portal-page :where(.button:not(.button-primary):hover, .button:not(.button-primary):focus-visible, .filter-button:hover, .filter-button:focus-visible, .portal-inline-button:not(.button-primary):hover, .portal-inline-button:not(.button-primary):focus-visible, .portal-mini-button:not(.button-primary):hover, .portal-mini-button:not(.button-primary):focus-visible, .client-access-link:hover, .client-access-link:focus-visible, .portal-finance-filter:hover, .portal-finance-filter:focus-visible, .portal-finance-chip:hover, .portal-finance-chip:focus-visible, .portal-auth-tab:hover, .portal-auth-tab:focus-visible, .portal-case-filter:hover, .portal-case-filter:focus-visible, .portal-admin-tab:hover, .portal-admin-tab:focus-visible, .portal-admin-inline-link:hover, .portal-admin-inline-link:focus-visible)::after,
body.booking-page :where(.button:not(.button-primary):hover, .button:not(.button-primary):focus-visible, .filter-button:hover, .filter-button:focus-visible, .planning-duration-option:hover, .planning-duration-option:focus-visible, .planning-time-button:hover, .planning-time-button:focus-visible)::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), rgba(151, 203, 246, 0.68), transparent) !important;
  opacity: 1 !important;
}

/* Planningfilters: actieve "Alles" en hover blijven leesbaar, ook met de algemene button-glans. */
body.portal-page .planning-chip-group .portal-finance-filter {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-color: rgba(62, 106, 148, 0.42) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.86), transparent 38%),
    linear-gradient(180deg, #f9fcff 0%, #e7f2fb 48%, #c9dcea 100%) !important;
  color: #1d3854 !important;
  text-shadow: none !important;
}

body.portal-page .planning-chip-group .portal-finance-filter:hover,
body.portal-page .planning-chip-group .portal-finance-filter:focus-visible {
  border-color: rgba(34, 67, 99, 0.78) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(180deg, #d7e2eb 0%, #8195a8 42%, #31485e 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(7, 22, 38, 0.65) !important;
}

body.portal-page .planning-chip-group .portal-finance-filter.is-active,
body.portal-page .planning-chip-group .portal-finance-filter.is-active:hover,
body.portal-page .planning-chip-group .portal-finance-filter.is-active:focus-visible {
  border-color: rgba(16, 80, 144, 0.78) !important;
  background:
    linear-gradient(135deg, #1d65ad 0%, #2d89da 54%, #58b8ec 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(5, 32, 64, 0.58) !important;
}

body.portal-page .planning-chip-group .portal-finance-filter::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), rgba(133, 199, 242, 0.54), transparent) !important;
}

/* Centrale header-fix: alle topheaders gebruiken dezelfde banner en veranderen niet bij hover. */
body.site-home .site-header .header-shell,
body.portal-page .site-header .header-shell,
body.booking-page .site-header .header-shell,
.site-header .header-shell {
  --home-banner-bg-size: contain;
  --home-banner-bg-position: center center;
  --portal-banner-bg-size: cover;
  --portal-banner-bg-position: center center;
  border-color: rgba(151, 178, 204, 0.34) !important;
  background:
    var(--rs-home-top-banner-image) center center / contain no-repeat,
    rgba(242, 248, 253, 0.92) !important;
  box-shadow:
    0 26px 56px rgba(58, 82, 108, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body.site-home .site-header .header-shell:hover,
body.site-home .site-header .header-shell:focus-within,
body.portal-page .site-header .header-shell:hover,
body.portal-page .site-header .header-shell:focus-within,
body.booking-page .site-header .header-shell:hover,
body.booking-page .site-header .header-shell:focus-within,
.site-header .header-shell:hover,
.site-header .header-shell:focus-within {
  background:
    var(--rs-home-top-banner-image) center center / contain no-repeat,
    rgba(242, 248, 253, 0.92) !important;
  transform: none !important;
}

body.site-home .site-header .header-shell::before,
body.portal-page .site-header .header-shell::before,
body.booking-page .site-header .header-shell::before,
.site-header .header-shell::before,
body.site-home .site-header .header-shell:hover::before,
body.portal-page .site-header .header-shell:hover::before,
body.booking-page .site-header .header-shell:hover::before,
.site-header .header-shell:hover::before {
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
}

body.site-home .site-header .header-main::before,
body.portal-page .site-header .header-main::before,
body.booking-page .site-header .header-main::before,
.site-header .header-main::before {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.36), rgba(221, 240, 255, 0.16) 44%, transparent 74%) !important;
  transform: none !important;
}

body.site-home .site-header .brand--banner img,
body.portal-page .site-header .brand--banner img,
body.booking-page .site-header .brand--banner img,
.site-header .brand--banner img {
  filter:
    drop-shadow(0 20px 34px rgba(59, 103, 147, 0.18))
    drop-shadow(0 0 26px rgba(132, 189, 239, 0.22)) !important;
}

/* Klantportaal auth-tabs: nette 3-delige balk in plaats van een losse derde tegel. */
body.portal-page--guest .portal-auth-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(100%, 680px) !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 18px !important;
}

body.portal-page--guest .portal-auth-tab {
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  white-space: nowrap;
  font-size: clamp(0.88rem, 0.82rem + 0.18vw, 1rem) !important;
  line-height: 1.1;
}

body.portal-page--guest .portal-auth-tab:not(.is-active) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(226, 239, 248, 0.86)) !important;
  color: #213d59 !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-tab.is-active {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef7fd 46%, #cce5f6 100%) !important;
  color: #123557 !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-tab:hover,
body.portal-page--guest .portal-auth-tab:focus-visible {
  background:
    linear-gradient(180deg, #d8e1e8 0%, #8799a8 42%, #42586c 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(9, 20, 32, 0.62) !important;
}

/* Home hero: onderste beeld exact in dezelfde maatvoering als de topbanner houden. */
@media (min-width: 901px) {
  body.site-home .hero-section {
    padding-top: 22px;
  }

  body.site-home .hero-copy {
    height: clamp(310px, 37.5vw, 465px);
    min-height: 0;
    padding: clamp(18px, 2vw, 28px);
    background:
      var(--home-bottom-banner-bg-image) center center / contain no-repeat,
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.88) 54%, rgba(246, 248, 251, 0.96));
  }

  body.site-home .hero-photo-bg {
    background-position: center center;
    background-size: contain;
  }

  body.site-home .hero-copy > :not(.panel-corners):not(.hero-photo-bg) {
    width: min(100%, 680px);
  }

  body.site-home .hero-heading-line {
    margin-bottom: 8px;
  }

  body.site-home .hero-intro {
    margin-bottom: 8px;
    font-size: clamp(0.72rem, 0.66rem + 0.18vw, 0.84rem);
  }

  body.site-home .hero-copy h1 {
    max-width: 17ch;
    margin-bottom: 8px;
    font-size: clamp(1.62rem, 2.05vw, 2.22rem);
    line-height: 1.08;
  }

  body.site-home .hero-text {
    max-width: 500px;
    font-size: clamp(0.88rem, 0.83rem + 0.14vw, 0.98rem);
    line-height: 1.5;
  }

  body.site-home .hero-actions {
    margin-top: 12px;
  }

  body.site-home .hero-points {
    display: none;
  }

  body.site-home .hero-point {
    padding: 10px 12px;
    border-radius: 14px;
  }

  body.site-home .hero-point strong {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  body.site-home .hero-point p {
    font-size: 0.86rem;
    line-height: 1.34;
  }
}

body.site-home .hero-points {
  display: none;
}

/* Home hero: compactere serviceboodschap zodat de eerste indruk rustig blijft. */
body.site-home .hero-copy h1 {
  max-width: 720px;
  font-size: clamp(1.34rem, 1.48vw, 1.72rem);
  line-height: 1.1;
}

body.site-home .hero-text {
  max-width: 620px;
  margin-bottom: 0;
  font-size: clamp(0.88rem, 0.82rem + 0.13vw, 0.98rem);
  line-height: 1.46;
}

body.site-home .hero-service-list {
  max-width: 620px;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(246, 251, 255, 0.66);
  backdrop-filter: blur(5px);
}

body.site-home .hero-service-list strong {
  font-size: 0.94rem;
  line-height: 1.28;
}

body.site-home .hero-service-list ul {
  gap: 5px;
}

body.site-home .hero-service-list li {
  padding-left: 16px;
  font-size: 0.94rem;
  line-height: 1.28;
}

body.site-home .hero-actions {
  margin-top: 8px;
  width: min(100%, 620px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.site-home .hero-actions .top-direct-contact {
  min-height: 42px;
  flex: 1 1 180px;
  padding: 0 18px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.site-home .hero-availability-note {
  width: min(100%, 620px);
  margin: 6px 0 0;
  color: #516b84;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

/* Home hero: alle tekst, kaart en acties strak onder elkaar op dezelfde lijn. */
body.site-home .hero-copy > :not(.panel-corners):not(.hero-photo-bg) {
  width: min(100%, 620px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.site-home .hero-copy h1,
body.site-home .hero-text,
body.site-home .hero-service-list,
body.site-home .hero-install-note,
body.site-home .hero-actions,
body.site-home .hero-availability-note {
  max-width: 620px !important;
}

body.site-home .hero-copy h1 {
  margin-bottom: 12px !important;
}

body.site-home .hero-text {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

body.site-home .hero-service-list {
  margin-top: 0 !important;
}

body.site-home .hero-install-note {
  width: min(100%, 620px) !important;
  margin: 14px 0 0 !important;
  color: #34516c;
  font-size: clamp(0.88rem, 0.82rem + 0.13vw, 0.98rem);
  line-height: 1.42;
}

body.site-home .hero-actions {
  margin-top: 12px !important;
}

/* Desktop: hero-inhoud rechts houden, maar binnen dat blok strak onder elkaar. */
@media screen and (min-width: 681px) {
  body.site-home .hero-copy > :not(.panel-corners):not(.hero-photo-bg) {
    width: min(100%, 620px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Home banner-schaal: bovenste en onderste helft komen uit een beeld en moeten exact gelijk schalen. */
@media screen and (min-width: 681px) {
  body.site-home .header-shell:not(.header-shell--portal) {
    --home-banner-bg-size: contain !important;
    --home-banner-bg-position: center center !important;
    background-size: contain !important;
    background-position: center center !important;
  }

  body.site-home .hero-copy {
    background:
      var(--home-bottom-banner-bg-image) center center / contain no-repeat,
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.88) 54%, rgba(246, 248, 251, 0.96)) !important;
  }

  body.site-home .hero-photo-bg {
    background: var(--home-bottom-banner-bg-image) center center / contain no-repeat !important;
  }
}

/* De grote home-banners mogen niet op hover bewegen; alleen losse kaarten krijgen nog tilt. */
body.site-home .header-shell,
body.site-home .header-shell:hover,
body.site-home .header-shell:focus-within,
body.site-home .hero-copy,
body.site-home .hero-copy:hover,
body.site-home .hero-copy:focus-within {
  transform: none !important;
}

/* Home conversie: probleem + oplossing direct hoger in beeld brengen. */
body.site-home .header-shell:not(.header-shell--portal) {
  min-height: clamp(220px, 27vw, 335px);
}

body.site-home .header-main {
  min-height: clamp(130px, 17vw, 230px);
}

body.site-home .brand--banner {
  width: min(330px, 38vw);
}

body.site-home .header-bottom {
  margin-top: 4px;
  padding-top: 8px;
}

body.site-home .hero-section {
  padding-top: 16px;
}

body.site-home .hero-heading-line {
  margin-bottom: 5px;
}

body.site-home .hero-intro {
  margin-bottom: 6px;
}

@media (min-width: 901px) {
  body.site-home .hero-section {
    padding-top: 16px;
  }

  body.site-home .hero-copy {
    height: clamp(360px, 36vw, 455px);
    padding-top: clamp(26px, 2.7vw, 42px);
  }
}

body.site-home .top-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #456782;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
}

body.site-home .top-login-link:hover,
body.site-home .top-login-link:focus-visible {
  color: #0d68bd;
  text-decoration: underline;
  outline: 0;
}

body.site-home .toolbar-group--brand {
  min-width: max-content;
}

/* Portaaltoegang: ingelogd duidelijk Uitloggen, niet ingelogd duidelijk Inloggen. */
body.portal-page .site-header .header-login-entry,
body.booking-page .site-header .header-login-entry {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.portal-page .site-header .header-login-entry .portal-trigger,
body.booking-page .site-header .header-login-entry .portal-trigger {
  min-width: 112px !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
}

body.portal-page .site-header .header-login-entry .portal-trigger__eyebrow,
body.booking-page .site-header .header-login-entry .portal-trigger__eyebrow {
  display: none !important;
}

body.portal-page .site-header .header-login-entry .portal-trigger__label,
body.booking-page .site-header .header-login-entry .portal-trigger__label {
  font-size: 0.86rem !important;
  line-height: 1.1 !important;
}

@media (max-width: 760px) {
  body.portal-page .site-header .header-utility,
  body.booking-page .site-header .header-login-entry {
    overflow: visible !important;
  }

  body.portal-page .site-header .portal-mini-button {
    min-width: 96px !important;
  }
}

@media (max-width: 620px) {
  body.portal-page--guest .portal-auth-switch {
    grid-template-columns: 1fr !important;
  }

  body.portal-page--guest .portal-auth-tab {
    justify-content: center;
    white-space: normal;
  }
}

/* Android/touch performance: dure desktop-effecten uit tijdens mobiel scrollen. */
@media (hover: none), (pointer: coarse), (max-width: 820px) {
  body.site-home,
  body.site-home::before {
    background-attachment: scroll !important;
  }

  body.site-home .page-noise,
  body.site-home .hero-tech-lines,
  body.site-home .visual-track {
    display: none !important;
  }

  body.site-home *,
  body.site-home *::before,
  body.site-home *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  body.site-home [data-tilt],
  body.site-home [data-tilt]:hover,
  body.site-home [data-tilt]:focus-within {
    transform: none !important;
  }

  body.site-home .top-toolbar,
  body.site-home .portal-trigger,
  body.site-home .language-switcher,
  body.site-home .scroll-top-button,
  body.site-home .header-shell,
  body.site-home .tech-panel,
  body.site-home .content-section,
  body.site-home .contact-switcher,
  body.site-home .contact-copy,
  body.site-home .contact-form,
  body.site-home .appointment-form,
  body.site-home .footer-columns {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.site-home .site-header .brand--banner img,
  body.site-home .brand--banner img {
    filter: none !important;
  }

  body.site-home .header-shell,
  body.site-home .tech-panel,
  body.site-home .content-section,
  body.site-home .feature-card,
  body.site-home .project-card,
  body.site-home .product-card,
  body.site-home .process-card,
  body.site-home .visual-card,
  body.site-home .hero-point,
  body.site-home .overview-rail__item,
  body.site-home .contact-switcher,
  body.site-home .contact-copy,
  body.site-home .contact-form,
  body.site-home .appointment-form,
  body.site-home .footer-columns {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 8px 18px rgba(45, 72, 96, 0.07) !important;
  }

  body.site-home .content-section,
  body.site-home .contact-switcher,
  body.site-home .contact-layout,
  body.site-home .footer-callout,
  body.site-home .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 520px;
  }

  body.site-home .button,
  body.site-home .filter-button,
  body.site-home .contact-tab,
  body.site-home .site-nav a,
  body.site-home .portal-trigger {
    transform: none !important;
  }

  .scroll-top-button {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 1200 !important;
    width: 48px;
    height: 48px;
  }

  body.site-home .hero-news-ticker__track span {
    animation: heroNewsTicker 20s linear infinite !important;
  }

  body.site-home .hero-news-ticker:hover .hero-news-ticker__track span,
  body.site-home .hero-news-ticker:focus-within .hero-news-ticker__track span {
    animation-play-state: running !important;
  }
}

/* Mobiel contactblok: automatisch compact maken zonder desktop-layout te raken. */
@media (max-width: 680px) {
  body.site-home #contact {
    padding-top: 16px !important;
  }

  body.site-home .contact-switcher {
    width: min(calc(100% - 18px), 1240px) !important;
    margin: 0 auto 8px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  body.site-home .contact-switcher > .section-kicker {
    display: none !important;
  }

  body.site-home .contact-switcher__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.site-home .contact-tab {
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 0.9rem !important;
  }

  body.site-home .contact-layout {
    width: min(calc(100% - 18px), 1240px) !important;
    gap: 8px !important;
  }

  body.site-home .contact-copy {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  body.site-home .contact-copy > .section-kicker,
  body.site-home .contact-copy > p {
    display: none !important;
  }

  body.site-home .contact-copy h2 {
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  body.site-home .contact-box {
    margin-top: 8px !important;
    padding: 10px 12px !important;
    gap: 4px !important;
    border-radius: 12px !important;
  }

  body.site-home .contact-box p:not(:first-child) {
    display: none !important;
  }

  body.site-home .contact-box p,
  body.site-home .contact-box strong {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  body.site-home .contact-form,
  body.site-home .appointment-form {
    padding: 14px !important;
    border-radius: 15px !important;
  }

  body.site-home .contact-form .section-kicker,
  body.site-home .appointment-form .section-kicker,
  body.site-home .appointment-form .appointment-intro {
    display: none !important;
  }

  body.site-home .contact-form h3,
  body.site-home .appointment-form h3 {
    margin-bottom: 10px !important;
    font-size: 1.14rem !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  body.site-home .contact-form .field,
  body.site-home .appointment-form .field {
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  body.site-home .contact-form .field span,
  body.site-home .appointment-form .field span {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
  }

  body.site-home .contact-form input,
  body.site-home .contact-form select,
  body.site-home .appointment-form input,
  body.site-home .appointment-form select {
    min-height: 43px !important;
    padding: 9px 12px !important;
    font-size: 0.95rem !important;
  }

  body.site-home .contact-form textarea,
  body.site-home .appointment-form textarea {
    min-height: 94px !important;
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
  }

  body.site-home .contact-form .appointment-note,
  body.site-home .appointment-form .appointment-note {
    margin: 8px 0 10px !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
  }

  body.site-home .contact-form .appointment-note span,
  body.site-home .appointment-form .appointment-note span {
    display: none !important;
  }

  body.site-home .contact-form .appointment-note strong,
  body.site-home .appointment-form .appointment-note strong {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  body.site-home .contact-form .button,
  body.site-home .appointment-form .button {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* Uniforme RS-knopstijl: alle klikbare acties krijgen dezelfde herkenbare topbanner-vorm. */
:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .client-access-link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
) {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(105, 142, 178, 0.64) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 20% 7%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(242, 247, 250, 0.98) 43%, rgba(213, 225, 235, 0.97) 100%) !important;
  color: #173a5e !important;
  font-weight: 800;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(96, 126, 154, 0.26),
    0 9px 18px rgba(37, 62, 88, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.7) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(74, 165, 235, 0.18);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  line-height: 1.1;
}

:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .client-access-link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
)::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08) 48%, rgba(95, 125, 154, 0.12)),
    linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0.42) 38%, rgba(165, 203, 231, 0.2) 55%, transparent 76%);
  background-size: 100% 100%, 230% 100%;
  opacity: 0.92;
}

:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
)::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 7px;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92, 157, 214, 0.64), rgba(231, 242, 250, 0.92), transparent);
  opacity: 0.72;
  transform: scaleX(0.78);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}

:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .client-access-link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):hover,
:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .client-access-link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(48, 88, 126, 0.88) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.92), transparent 30%),
    linear-gradient(180deg, #f8fbfd 0%, #cbd6df 38%, #7c8d9d 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(12, 25, 38, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(26, 44, 61, 0.34),
    0 14px 26px rgba(35, 57, 78, 0.22),
    0 0 0 4px rgba(116, 146, 173, 0.18) !important;
}

:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .client-access-link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):hover::after,
:where(
  .button,
  .filter-button,
  .contact-tab,
  .portal-trigger,
  .home-jump-nav a,
  .product-card__link,
  .client-access-link,
  .portal-inline-button,
  .portal-mini-button,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-auth-tab,
  .portal-case-filter,
  .portal-admin-tab,
  .portal-admin-inline-link,
  .portal-blocked-menu__toggle,
  .planning-duration-option,
  .planning-time-button,
  .planning-calendar-day summary,
  .rs-language-button,
  .menu-toggle,
  .admin-layout-controls__button,
  .admin-layout-controls__chip,
  .document-template-selection-toolbar button,
  .document-template-table-tools button,
  .document-template-size-buttons button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), rgba(229, 240, 249, 0.98), rgba(96, 119, 141, 0.74), transparent);
}

:where(
  .button-primary,
  .filter-button.is-active,
  .contact-tab.is-active,
  .site-nav a.is-active,
  .portal-finance-filter.is-active,
  .portal-finance-chip.is-active,
  .portal-auth-tab.is-active,
  .portal-case-filter.is-active,
  .portal-admin-tab.is-active,
  .planning-duration-option.is-active,
  .planning-time-button.is-selected,
  .rs-language-button.is-active,
  .admin-layout-controls__button--primary,
  [aria-selected="true"],
  [aria-pressed="true"]
) {
  border-color: rgba(18, 83, 151, 0.78) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(205, 236, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #5fa7df 0%, #2b78bd 46%, #155291 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(4, 24, 49, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(4, 34, 72, 0.34),
    0 13px 25px rgba(18, 78, 137, 0.24),
    0 0 0 4px rgba(68, 157, 228, 0.14) !important;
}

:where(.button-danger, .portal-delete-button, [data-action="delete"], [data-template-action="hide"]) {
  border-color: rgba(196, 91, 55, 0.58) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.88), transparent 32%),
    linear-gradient(180deg, #fff8f4 0%, #f6ddd0 46%, #e7b196 100%) !important;
  color: #7f311b !important;
}

:where(.button-danger, .portal-delete-button, [data-action="delete"], [data-template-action="hide"]):hover,
:where(.button-danger, .portal-delete-button, [data-action="delete"], [data-template-action="hide"]):focus-visible {
  border-color: rgba(151, 56, 31, 0.78) !important;
  background:
    linear-gradient(180deg, #fff2eb 0%, #dd8f6c 42%, #a94725 100%) !important;
  color: #ffffff !important;
}

:where(button:disabled, .button[disabled], .is-disabled, [aria-disabled="true"]) {
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.62 !important;
  color: #4d657d !important;
  filter: grayscale(0.14);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: rgba(42, 123, 198, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(239, 248, 255, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 4px rgba(65, 153, 226, 0.14) !important;
  outline: none;
}

:where(.payment-modal__close, .portal-modal__close) {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(105, 142, 178, 0.58) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 24% 8%, rgba(255, 255, 255, 0.96), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(217, 229, 238, 0.96)) !important;
  color: #173a5e !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 18px rgba(37, 62, 88, 0.12) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
  :where(
    .button,
    .filter-button,
    .contact-tab,
    .portal-trigger,
    .home-jump-nav a,
    .product-card__link,
    .portal-inline-button,
    .portal-mini-button,
    .portal-finance-filter,
    .portal-finance-chip,
    .portal-auth-tab,
    .portal-case-filter,
    .portal-admin-tab,
    .portal-admin-inline-link,
    .planning-duration-option,
    .planning-time-button,
    .rs-language-button,
    .menu-toggle,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
  ) {
    min-height: 44px;
  }
}

/* Definitieve beheerheader: ook documenten, controle, administratie en archief gelijk trekken. */
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
  order: 1 !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
  order: 2 !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: min(100%, 960px) !important;
  margin: -8px auto 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 10px 8px 14px !important;
  border: 1px solid rgba(146, 176, 205, 0.42) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 251, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 30px rgba(45, 76, 106, 0.12) !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger {
  display: grid !important;
  gap: 2px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #183d63 !important;
  text-align: left !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger::before,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger::after {
  display: none !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .portal-trigger__eyebrow,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .client-access-link__eyebrow {
  color: #7399bf !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .portal-trigger__label,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .client-access-link__label {
  color: #1f456b !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

.portal-header-links {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-header-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid rgba(107, 152, 195, 0.48) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.94), transparent 36%),
    linear-gradient(180deg, #fbfdff 0%, #e7f2fb 52%, #c9ddea 100%) !important;
  color: #1f456b !important;
  font-weight: 900;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 18px rgba(45, 76, 106, 0.1) !important;
}

.portal-header-link span,
.portal-header-link strong {
  position: relative;
  z-index: 2;
}

.portal-header-link > span:first-child {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

summary.portal-header-link {
  cursor: pointer;
  list-style: none;
}

summary.portal-header-link::-webkit-details-marker {
  display: none;
}

.portal-header-link strong {
  min-width: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(232, 243, 253, 0.98);
  color: #155b9e;
}

.portal-header-link:hover,
.portal-header-link:focus-visible,
.portal-header-notification-menu[open] > .portal-header-link {
  border-color: rgba(13, 88, 164, 0.78) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #55b4ee 0%, #2584d8 42%, #145da8 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(5, 34, 70, 0.62);
}

.portal-header-link:hover strong,
.portal-header-link:focus-visible strong,
.portal-header-notification-menu[open] > .portal-header-link strong {
  background: rgba(255, 255, 255, 0.9);
  color: #145da8;
  text-shadow: none;
}

.portal-header-notification-menu {
  position: relative;
}

.portal-header-notification-menu > .portal-blocked-menu__panel {
  right: 0;
  left: auto;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
  order: 3 !important;
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
    width: 100% !important;
    margin: 0 auto 10px !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions,
  .portal-header-links {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .portal-header-link,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .portal-mini-button {
    width: 100% !important;
  }
}

/* Compacte beheerlogin: overal klein, duidelijk en zonder afgesneden tekst. */
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
  width: auto !important;
  max-width: min(100%, 760px) !important;
  min-height: 54px !important;
  margin: -6px auto 10px !important;
  padding: 7px 9px 7px 14px !important;
  border-radius: 16px !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session {
  width: auto !important;
  min-width: 0 !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger {
  min-width: 170px !important;
  max-width: 230px !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .portal-trigger__eyebrow,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .client-access-link__eyebrow {
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .portal-trigger__label,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility .client-access-link__label {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #1f456b !important;
  font-size: 0.98rem !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-links {
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.portal-header-link {
  min-height: 34px !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  font-size: 0.84rem !important;
  white-space: nowrap !important;
}

.portal-header-link strong {
  min-width: 23px !important;
  min-height: 23px !important;
  padding: 0 7px !important;
  font-size: 0.78rem !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-mini-button {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 0.84rem !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
    max-width: min(100%, 680px) !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger {
    min-width: 150px !important;
    max-width: 190px !important;
  }

  .portal-header-link {
    padding: 0 10px !important;
    font-size: 0.78rem !important;
  }
}

/* Centrale navigatiekleuren: topmenu-knoppen blijven overal gelijk en leesbaar. */
body :where(.site-nav.portal-nav a, .site-nav.portal-nav a.site-nav__cta) {
  border-color: rgba(79, 124, 166, 0.52) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.94), transparent 34%),
    linear-gradient(180deg, #f9fcff 0%, #e7f1fa 48%, #c8dbea 100%) !important;
  color: #173a5f !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(96, 132, 166, 0.26),
    0 10px 20px rgba(43, 70, 96, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

body :where(.site-nav.portal-nav a, .site-nav.portal-nav a.site-nav__cta) .nav-core {
  opacity: 0 !important;
  background:
    linear-gradient(180deg, rgba(36, 122, 210, 0.98), rgba(20, 83, 156, 0.98)) !important;
}

body :where(.site-nav.portal-nav a, .site-nav.portal-nav a.site-nav__cta) .nav-sheen {
  opacity: 0.24 !important;
}

body :where(.site-nav.portal-nav a, .site-nav.portal-nav a.site-nav__cta) .nav-label {
  color: #173a5f !important;
  text-shadow: none !important;
}

body :where(.site-nav.portal-nav a:hover, .site-nav.portal-nav a:focus-visible, .site-nav.portal-nav a.is-active, .site-nav.portal-nav a.site-nav__cta:hover, .site-nav.portal-nav a.site-nav__cta:focus-visible, .site-nav.portal-nav a.site-nav__cta.is-active) {
  border-color: rgba(13, 88, 164, 0.86) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #55b4ee 0%, #2584d8 42%, #145da8 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(5, 34, 70, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(4, 44, 88, 0.44),
    0 14px 28px rgba(22, 90, 158, 0.28),
    0 0 0 3px rgba(59, 151, 226, 0.18) !important;
}

body :where(.site-nav.portal-nav a:hover, .site-nav.portal-nav a:focus-visible, .site-nav.portal-nav a.is-active, .site-nav.portal-nav a.site-nav__cta:hover, .site-nav.portal-nav a.site-nav__cta:focus-visible, .site-nav.portal-nav a.site-nav__cta.is-active) .nav-core {
  opacity: 0.34 !important;
}

body :where(.site-nav.portal-nav a:hover, .site-nav.portal-nav a:focus-visible, .site-nav.portal-nav a.is-active, .site-nav.portal-nav a.site-nav__cta:hover, .site-nav.portal-nav a.site-nav__cta:focus-visible, .site-nav.portal-nav a.site-nav__cta.is-active) .nav-label {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(5, 34, 70, 0.62) !important;
}

/* Sterkere correctie voor de topheader: actieve menu-items winnen van oude CTA/hover-regels. */
body.portal-page .site-header .site-nav.portal-nav > a,
body.site-home .site-header .site-nav.portal-nav > a,
body.booking-page .site-header .site-nav.portal-nav > a {
  border-color: rgba(79, 124, 166, 0.52) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.94), transparent 34%),
    linear-gradient(180deg, #f9fcff 0%, #e7f1fa 48%, #c8dbea 100%) !important;
  color: #173a5f !important;
  text-shadow: none !important;
}

body.portal-page .site-header .site-nav.portal-nav > a .nav-label,
body.site-home .site-header .site-nav.portal-nav > a .nav-label,
body.booking-page .site-header .site-nav.portal-nav > a .nav-label {
  color: #173a5f !important;
  text-shadow: none !important;
}

body.portal-page .site-header .site-nav.portal-nav > a.is-active,
body.portal-page .site-header .site-nav.portal-nav > a:hover,
body.portal-page .site-header .site-nav.portal-nav > a:focus-visible,
body.site-home .site-header .site-nav.portal-nav > a.is-active,
body.site-home .site-header .site-nav.portal-nav > a:hover,
body.site-home .site-header .site-nav.portal-nav > a:focus-visible,
body.booking-page .site-header .site-nav.portal-nav > a.is-active,
body.booking-page .site-header .site-nav.portal-nav > a:hover,
body.booking-page .site-header .site-nav.portal-nav > a:focus-visible {
  border-color: rgba(13, 88, 164, 0.86) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #55b4ee 0%, #2584d8 42%, #145da8 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(5, 34, 70, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(4, 44, 88, 0.44),
    0 14px 28px rgba(22, 90, 158, 0.28),
    0 0 0 3px rgba(59, 151, 226, 0.18) !important;
}

body.portal-page .site-header .site-nav.portal-nav > a.is-active .nav-label,
body.portal-page .site-header .site-nav.portal-nav > a:hover .nav-label,
body.portal-page .site-header .site-nav.portal-nav > a:focus-visible .nav-label,
body.site-home .site-header .site-nav.portal-nav > a.is-active .nav-label,
body.site-home .site-header .site-nav.portal-nav > a:hover .nav-label,
body.site-home .site-header .site-nav.portal-nav > a:focus-visible .nav-label,
body.booking-page .site-header .site-nav.portal-nav > a.is-active .nav-label,
body.booking-page .site-header .site-nav.portal-nav > a:hover .nav-label,
body.booking-page .site-header .site-nav.portal-nav > a:focus-visible .nav-label {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(5, 34, 70, 0.62) !important;
}

/* Vaste beheerbalk: op elke adminpagina dezelfde plek en vorm als de klantenpagina. */
body.portal-page--admin .site-header .header-shell,
body.portal-page--admin .site-header .header-shell.header-shell--portal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body.portal-page--admin .site-header .header-main {
  order: 1 !important;
}

body.portal-page--admin .site-header .header-utility {
  order: 2 !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: min(100%, 960px) !important;
  margin: -8px auto 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 10px 8px 14px !important;
  border: 1px solid rgba(146, 176, 205, 0.42) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 251, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 30px rgba(45, 76, 106, 0.12) !important;
}

body.portal-page--admin .site-header .header-utility > .portal-session {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.portal-page--admin .site-header .header-utility > .portal-trigger {
  display: grid !important;
  gap: 2px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #183d63 !important;
  text-align: left !important;
}

body.portal-page--admin .site-header .header-utility > .portal-trigger::before,
body.portal-page--admin .site-header .header-utility > .portal-trigger::after {
  display: none !important;
}

body.portal-page--admin .site-header .header-utility .portal-trigger__eyebrow,
body.portal-page--admin .site-header .header-utility .client-access-link__eyebrow {
  color: #7399bf !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

body.portal-page--admin .site-header .header-utility .portal-trigger__label,
body.portal-page--admin .site-header .header-utility .client-access-link__label {
  color: #1f456b !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

body.portal-page--admin .site-header .portal-session__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body.portal-page--admin .site-header .header-utility > .portal-inline-form {
  margin-left: auto !important;
}

body.portal-page--admin .site-header .header-bottom {
  order: 3 !important;
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  body.portal-page--admin .site-header .header-utility {
    width: 100% !important;
    margin: 0 auto 10px !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.portal-page--admin .site-header .header-utility > .portal-session,
  body.portal-page--admin .site-header .portal-session__actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.portal-page--admin .site-header .header-utility > .portal-inline-form,
  body.portal-page--admin .site-header .header-utility .portal-mini-button {
    width: 100% !important;
  }
}

/* Finale admin-header reset: alle ingelogde beheerpagina's dezelfde header en volledige knoppenrij. */
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
  width: min(calc(100% - 28px), 1160px) !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  display: grid !important;
  grid-template-rows: 104px 54px 50px !important;
  gap: 8px !important;
  padding: 10px 18px 12px !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
  order: initial !important;
  min-height: 104px !important;
  height: 104px !important;
  max-height: 104px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner img {
  width: 220px !important;
  max-width: 220px !important;
  height: 86px !important;
  max-height: 86px !important;
  object-fit: contain !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
  order: initial !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 760px) !important;
  min-height: 46px !important;
  height: 46px !important;
  max-height: 46px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 8px 6px 12px !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
  order: initial !important;
  min-height: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a {
  flex: 0 0 auto !important;
  min-width: 112px !important;
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  padding: 0 16px !important;
}

/* Laatste header-lock: geen hoogteverspringing meer tussen adminpagina's of knoppen. */
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
  width: min(calc(100% - 28px), 1160px) !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  display: grid !important;
  grid-template-rows: 104px 54px 50px !important;
  gap: 8px !important;
  align-items: stretch !important;
  padding: 10px 18px 12px !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
  order: initial !important;
  min-height: 104px !important;
  height: 104px !important;
  max-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner {
  width: 230px !important;
  height: 92px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner img {
  width: 220px !important;
  max-width: 220px !important;
  height: 86px !important;
  max-height: 86px !important;
  object-fit: contain !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
  order: initial !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 760px) !important;
  min-height: 46px !important;
  height: 46px !important;
  max-height: 46px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 8px 6px 12px !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session {
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-links {
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-mini-button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
  order: initial !important;
  min-height: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a.site-nav__cta {
  flex: 0 0 auto !important;
  min-width: 112px !important;
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
}

@media (max-width: 760px) {
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
    width: min(calc(100% - 18px), 100%) !important;
    height: 216px !important;
    min-height: 216px !important;
    max-height: 216px !important;
    grid-template-rows: 82px 72px 44px !important;
    gap: 6px !important;
    padding: 9px 10px 10px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner {
    width: 190px !important;
    height: 72px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner img {
    width: 180px !important;
    max-width: 180px !important;
    height: 66px !important;
    max-height: 66px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session {
    flex: 0 0 auto !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-links {
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav {
    justify-content: flex-start !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a.site-nav__cta {
    min-width: 104px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 13px !important;
  }
}

/* Header-volgorde hard vastzetten, los van de HTML-volgorde per pagina. */
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
  display: grid !important;
  grid-template-rows: 104px 54px 50px !important;
  align-items: stretch !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
  grid-row: 1 !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
  grid-row: 2 !important;
  align-self: center !important;
}

body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
  grid-row: 3 !important;
  align-self: center !important;
}

@media (max-width: 760px) {
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
    grid-template-rows: 82px 72px 44px !important;
  }
}

/* Terug-naar-boven knop: sitebreed boven alle gewone lagen en ook op mobiel zichtbaar. */
.scroll-top-button,
body.site-home .scroll-top-button,
body.portal-page .scroll-top-button,
body.booking-page .scroll-top-button,
body.document-page .scroll-top-button {
  position: fixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 7000 !important;
  pointer-events: none !important;
}

.scroll-top-button.is-visible,
body.site-home .scroll-top-button.is-visible,
body.portal-page .scroll-top-button.is-visible,
body.booking-page .scroll-top-button.is-visible,
body.document-page .scroll-top-button.is-visible {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

@media (max-width: 720px) {
  .scroll-top-button,
  body.site-home .scroll-top-button,
  body.portal-page .scroll-top-button,
  body.booking-page .scroll-top-button,
  body.document-page .scroll-top-button {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }
}

/* Registratieformulier: primaire verzendknop gelijk trekken met de rest van de site. */
body.portal-page .portal-auth-card .button.button-primary,
body.portal-page .portal-auth-card button.button-primary {
  border-color: rgba(20, 86, 150, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(105, 171, 220, 0.92) 0%, rgba(48, 119, 181, 0.98) 42%, rgba(20, 78, 137, 1) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(3, 24, 48, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(3, 28, 58, 0.34),
    0 12px 24px rgba(20, 83, 145, 0.22),
    0 0 0 1px rgba(151, 205, 246, 0.16) !important;
}

body.portal-page .portal-auth-card .button.button-primary:hover,
body.portal-page .portal-auth-card .button.button-primary:focus-visible,
body.portal-page .portal-auth-card button.button-primary:hover,
body.portal-page .portal-auth-card button.button-primary:focus-visible {
  border-color: rgba(5, 48, 100, 0.9) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(205, 236, 255, 0.26), transparent 34%),
    linear-gradient(180deg, #2f76b8 0%, #14579d 48%, #0a376f 100%) !important;
  color: #ffffff !important;
}

/* Contactformulier: verzendknop volgt het centrale kleurenpalet. */
body.site-home #contact .contact-form > .button.button-primary,
body.site-home #contact .appointment-form > .button.button-primary {
  --contact-button-fg: var(--rs-home-button-fg, #1d72b8);
  --contact-button-hover: var(--rs-home-button-hover, #bfe6ff);
  --contact-button-gloss: var(--rs-home-button-gloss, #ffffff);
  --contact-button-active-text: var(--rs-home-button-active-text, #ffffff);
  --contact-button-hover-text: var(--rs-home-button-hover-text, #ffffff);
  min-width: 178px;
  border-color: color-mix(in srgb, var(--contact-button-fg) 78%, var(--contact-button-gloss) 22%) !important;
  background:
    radial-gradient(circle at 26% 0%, color-mix(in srgb, var(--contact-button-hover) 42%, var(--contact-button-gloss) 58%), transparent 32%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--contact-button-fg) 68%, var(--contact-button-gloss) 32%) 0%,
      var(--contact-button-fg) 48%,
      color-mix(in srgb, var(--contact-button-fg) 84%, #052f60 16%) 100%
    ) !important;
  color: var(--contact-button-active-text) !important;
  -webkit-text-fill-color: var(--contact-button-active-text) !important;
  text-shadow: 0 1px 0 rgba(0, 19, 45, 0.72) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--contact-button-gloss) 42%, transparent 58%),
    inset 0 -1px 0 color-mix(in srgb, var(--contact-button-fg) 58%, #001634 42%),
    0 14px 28px color-mix(in srgb, var(--contact-button-fg) 30%, transparent 70%),
    0 0 0 4px color-mix(in srgb, var(--contact-button-hover) 18%, transparent 82%) !important;
}

body.site-home #contact .contact-form > .button.button-primary:hover,
body.site-home #contact .contact-form > .button.button-primary:focus-visible,
body.site-home #contact .appointment-form > .button.button-primary:hover,
body.site-home #contact .appointment-form > .button.button-primary:focus-visible {
  border-color: color-mix(in srgb, var(--contact-button-fg) 76%, var(--contact-button-gloss) 24%) !important;
  background:
    radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--contact-button-hover) 60%, var(--contact-button-gloss) 40%), transparent 34%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--contact-button-hover) 86%, var(--contact-button-gloss) 14%) 0%,
      var(--contact-button-hover) 50%,
      color-mix(in srgb, var(--contact-button-hover) 68%, var(--contact-button-fg) 32%) 100%
    ) !important;
  color: var(--contact-button-hover-text) !important;
  -webkit-text-fill-color: var(--contact-button-hover-text) !important;
}

/* Donker zilver/antraciet basislaag: minder wit, meer technische diepte. */
body {
  --bg: #263340;
  --bg-soft: #334351;
  --surface: rgba(224, 232, 239, 0.66);
  --surface-soft: rgba(213, 224, 234, 0.58);
  --surface-strong: rgba(196, 211, 225, 0.72);
  --line: rgba(169, 192, 214, 0.3);
  --line-strong: rgba(104, 151, 198, 0.46);
  --shadow: 0 22px 48px rgba(10, 20, 31, 0.22);
  --shadow-strong: 0 28px 70px rgba(8, 17, 28, 0.28);
  background:
    radial-gradient(circle at 16% 10%, rgba(49, 117, 190, 0.34), transparent 28rem),
    radial-gradient(circle at 82% 8%, rgba(116, 137, 157, 0.22), transparent 24rem),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(66, 144, 218, 0.14), transparent 18rem),
    linear-gradient(145deg, #131c25 0%, #202c36 34%, #3d4b57 68%, #748491 100%);
  background-attachment: fixed;
}

body::before {
  background:
    linear-gradient(rgba(204, 220, 235, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 220, 235, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(42, 101, 164, 0.14), transparent 34%, rgba(11, 20, 30, 0.16));
  background-size: 56px 56px, 56px 56px, 100% 100%;
  opacity: 0.82;
}

.page-noise {
  opacity: 0.13;
  background-image: radial-gradient(rgba(229, 239, 248, 0.46) 0.55px, transparent 0.55px);
}

.site-header,
.content-section,
.portal-section,
.booking-main,
.document-main {
  position: relative;
}

.top-toolbar,
.header-shell,
.header-shell--portal,
.portal-session,
.portal-blocked-menu__panel,
.login-feedback,
.portal-mini-note,
.portal-detail-card,
.portal-admin-card,
.portal-case,
.portal-customer-card,
.portal-auth-card,
.document-sheet,
.appointment-card,
.booking-card,
.tech-panel {
  border-color: rgba(187, 207, 225, 0.42);
  background:
    linear-gradient(180deg, rgba(233, 240, 246, 0.72), rgba(191, 204, 217, 0.5)),
    radial-gradient(circle at 82% 10%, rgba(83, 154, 224, 0.12), transparent 32%),
    radial-gradient(circle at 12% 92%, rgba(17, 32, 48, 0.14), transparent 34%);
  box-shadow:
    0 24px 58px rgba(9, 17, 27, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(26, 42, 58, 0.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.header-shell:not(.header-shell--portal),
.portal-page--guest .header-shell--portal {
  background:
    linear-gradient(180deg, rgba(238, 244, 249, 0.46), rgba(146, 160, 175, 0.34)),
    linear-gradient(130deg, rgba(255, 255, 255, 0.1), transparent 36%, rgba(69, 141, 214, 0.12)),
    var(--rs-home-top-banner-image);
  background-position: center center, center center, var(--home-banner-bg-position);
  background-size: 100% 100%, 100% 100%, var(--home-banner-bg-size);
  background-repeat: no-repeat;
}

.header-shell--portal {
  background:
    linear-gradient(180deg, rgba(238, 244, 249, 0.44), rgba(142, 157, 172, 0.34)),
    linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(69, 141, 214, 0.12)),
    var(--rs-home-top-banner-image);
  background-position: center center, center center, var(--portal-banner-bg-position);
  background-size: 100% 100%, 100% 100%, var(--portal-banner-bg-size);
  background-repeat: no-repeat;
}

.content-section::before,
.portal-section::before {
  content: "";
  position: absolute;
  inset: 24px -18px -18px;
  z-index: -1;
  border: 1px solid rgba(168, 191, 212, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(12, 20, 29, 0.34), rgba(70, 84, 98, 0.12)),
    radial-gradient(circle at 88% 12%, rgba(30, 102, 180, 0.12), transparent 32%);
  pointer-events: none;
}

.tech-panel::before {
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.42) 36%, transparent 62%);
}

.feature-card:hover,
.project-card:hover,
.process-card:hover,
.contact-copy:hover,
.contact-form:hover,
.appointment-form:hover,
.footer-callout__link:hover,
.tech-panel:hover,
.tech-panel:focus-within {
  background:
    linear-gradient(180deg, rgba(238, 244, 249, 0.78), rgba(202, 216, 230, 0.58)),
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb), 0.13), transparent 48%);
}

input,
select,
textarea,
.portal-auth-switch,
.portal-admin-tab,
.portal-case-filter,
.portal-finance-filter,
.portal-trigger,
.portal-blocked-menu__toggle,
.portal-status,
.status-pill {
  background-color: rgba(238, 244, 249, 0.76);
  backdrop-filter: blur(12px);
}

.section-heading,
.content-section > .section-kicker,
.portal-section-card > .section-kicker {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

@media (max-width: 720px) {
  body {
    background:
      radial-gradient(circle at 24% 2%, rgba(49, 117, 190, 0.28), transparent 20rem),
      linear-gradient(155deg, #151f28 0%, #26333e 48%, #657786 100%);
    background-attachment: scroll;
  }

  .content-section::before,
  .portal-section::before {
    inset: 16px -8px -10px;
    border-radius: 22px;
  }
}

/* Extra glaslaag voor de voorpagina: panelen blijven leesbaar maar niet meer krijtwit. */
.site-home .content-section,
.site-home .hero-copy,
.site-home .hero-panel--display,
.site-home .contact-copy,
.site-home .contact-form,
.site-home .appointment-form,
.site-home .callout-strip__inner,
.site-home .footer-columns,
.site-home .footer-callout__link {
  border-color: rgba(186, 207, 226, 0.36);
  background:
    linear-gradient(180deg, rgba(232, 239, 246, 0.12), rgba(169, 184, 199, 0.08)),
    radial-gradient(circle at 82% 12%, rgba(63, 143, 220, 0.05), transparent 34%),
    radial-gradient(circle at 16% 92%, rgba(17, 30, 44, 0.06), transparent 36%);
  box-shadow:
    0 24px 60px rgba(11, 21, 34, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(18, 34, 50, 0.08);
  backdrop-filter: blur(10px) saturate(1.04);
}

.site-home .feature-card,
.site-home .project-card,
.site-home .process-card {
  border-color: rgba(193, 213, 231, 0.42);
  background:
    linear-gradient(180deg, rgba(234, 242, 249, 0.24), rgba(193, 209, 224, 0.16)),
    radial-gradient(circle at 82% 12%, rgba(63, 143, 220, 0.08), transparent 34%);
  box-shadow:
    0 18px 42px rgba(11, 21, 34, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px) saturate(1.06);
}

.site-home .content-section::before {
  inset: 12px -22px -22px;
  border-color: rgba(60, 80, 100, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 33, 45, 0.18), rgba(185, 199, 213, 0.05)),
    radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.08), transparent 34%);
  box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22);
}

.site-home .hero-copy::before,
.site-home .hero-copy:hover::before,
.site-home .hero-copy:focus-within::before {
  background:
    linear-gradient(90deg, rgba(225, 234, 243, 0.01) 0%, rgba(213, 226, 238, 0.06) 34%, rgba(231, 239, 247, 0.18) 67%, rgba(235, 243, 250, 0.22) 100%);
}

.site-home .hero-copy h1,
.site-home .hero-text,
.site-home .section-kicker,
.site-home .feature-card p,
.site-home .project-card p,
.site-home .process-card p {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.44), 0 10px 24px rgba(13, 28, 43, 0.08);
}

.site-home .hero-news-ticker {
  background:
    linear-gradient(180deg, rgba(234, 242, 249, 0.76), rgba(188, 207, 224, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 34px rgba(16, 44, 74, 0.16);
  backdrop-filter: blur(14px);
}

.site-home .hero-news-ticker__track::before {
  background: linear-gradient(90deg, rgba(220, 233, 244, 0.72), transparent);
}

.site-home .hero-news-ticker__track::after {
  background: linear-gradient(270deg, rgba(220, 233, 244, 0.72), transparent);
}

.site-home .feature-card:hover,
.site-home .project-card:hover,
.site-home .process-card:hover,
.site-home .contact-copy:hover,
.site-home .contact-form:hover,
.site-home .appointment-form:hover {
  background:
    linear-gradient(180deg, rgba(238, 245, 251, 0.3), rgba(180, 197, 214, 0.2)),
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb), 0.12), transparent 46%);
}

@media screen and (max-width: 680px) {
  .site-home .hero-copy::before,
  .site-home .hero-copy:hover::before,
  .site-home .hero-copy:focus-within::before {
    background:
      linear-gradient(180deg, rgba(230, 239, 247, 0.68), rgba(224, 235, 245, 0.56) 62%, rgba(195, 211, 226, 0.34));
  }
}

/* Projectfoto's: geen filterknoppen meer, maar een rustige swipe-rij zoals mobiel. */
.site-home #projecten .filter-row {
  display: none !important;
}

.site-home .project-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 2px 6px 20px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.site-home .project-grid::-webkit-scrollbar {
  height: 10px;
}

.site-home .project-grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(16, 28, 40, 0.16);
}

.site-home .project-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(55, 132, 208, 0.78), rgba(178, 198, 216, 0.72));
}

.site-home .project-grid .project-card {
  flex: 0 0 clamp(280px, 31vw, 380px);
  width: clamp(280px, 31vw, 380px);
  max-width: none;
  scroll-snap-align: start;
}

.site-home .project-card--empty {
  flex-basis: min(520px, 86vw);
}

@media screen and (max-width: 680px) {
  .site-home .project-grid {
    gap: 12px;
    padding-inline: 0;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
  }

  .site-home .project-grid .project-card {
    flex-basis: min(82vw, 340px);
    width: min(82vw, 340px);
  }
}

/* Mobiele correcties: portaalmenu en offerte/factuur moeten in portrait bruikbaar blijven. */
@media screen and (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .rs-language-switcher {
    top: 6px;
    left: 8px;
    transform: scale(0.78);
    transform-origin: top left;
  }

  .rs-lang-code {
    display: none;
  }

  body:not(.portal-page):not(.document-page) .top-toolbar {
    padding-top: 42px;
  }

  body:not(.portal-page):not(.document-page) .top-toolbar__inner {
    min-height: auto;
    padding-block: 4px 8px;
  }

  body.site-home .toolbar-group--brand {
    width: 100%;
    justify-content: flex-start;
  }

  body.site-home .toolbar-group--brand > .top-login-link {
    margin: 0 auto 0 0;
  }

  body.portal-page .top-toolbar {
    display: none;
  }

  body.portal-page .site-header {
    padding-top: 42px;
  }

  body.portal-page .header-shell,
  body.portal-page .header-shell--portal {
    width: min(calc(100vw - 18px), var(--banner-width)) !important;
    padding: 14px 12px 12px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  body.portal-page .header-main {
    min-height: 116px !important;
  }

  body.portal-page .brand--banner {
    width: min(210px, 58vw) !important;
    margin-inline: auto;
  }

  body.portal-page .header-utility {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }

  body.portal-page .portal-session {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  body.portal-page .portal-session__actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.portal-page .portal-session__form,
  body.portal-page .portal-session__actions .button,
  body.portal-page .portal-blocked-menu,
  body.portal-page .portal-blocked-menu__toggle {
    width: 100% !important;
  }

  body.portal-page .header-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  body.portal-page .menu-toggle {
    display: inline-flex !important;
    width: min(220px, 100%) !important;
    justify-self: center !important;
    justify-content: center !important;
  }

  body.portal-page .site-nav.portal-nav {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.portal-page .site-nav.portal-nav.is-open {
    display: flex !important;
  }

  body.portal-page .site-nav.portal-nav a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 0 12px !important;
  }

  body.document-page .top-toolbar,
  body.document-page .site-header {
    display: none !important;
  }

  body.document-page {
    overflow-x: hidden !important;
  }

  .document-page-main,
  .content-section.document-page-main {
    width: 100% !important;
    padding: 8px 0 18px !important;
  }

  .document-sheet,
  .document-sheet--professional,
  .document-page--a4 .document-sheet {
    width: min(calc(100vw - 12px), 100%) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .document-sheet__hero,
  .document-sheet--professional .document-sheet__hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "title"
      "brand" !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .document-sheet__hero .document-brand,
  .document-sheet__hero .document-company-card,
  .document-sheet__hero .document-preview__company-card,
  .document-sheet__title-panel {
    justify-self: stretch !important;
    width: 100% !important;
    text-align: left !important;
  }

  .document-payment-block {
    grid-template-columns: 1fr !important;
  }

  .document-qr-frame {
    padding: 12px !important;
  }

  .document-qr {
    width: min(74vw, 260px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .document-table-sheet,
  .document-table-sheet--professional {
    width: 100% !important;
    overflow: visible !important;
    border-radius: 14px !important;
  }

  .document-table-sheet__head,
  .document-sheet--professional .document-table-sheet__head {
    display: none !important;
  }

  .document-table-sheet__row,
  .document-sheet--professional .document-table-sheet__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 8px 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .document-table-sheet__row span,
  .document-sheet--professional .document-table-sheet__row span {
    display: grid !important;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    border-top: 1px solid rgba(121, 141, 161, 0.12) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .document-table-sheet__row span::before,
  .document-sheet--professional .document-table-sheet__row span::before {
    content: attr(data-label) !important;
    color: #426c95 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  .document-table-sheet__row span:first-child,
  .document-sheet--professional .document-table-sheet__row span:first-child {
    border-top: 0 !important;
  }

  .document-summary,
  .document-summary--professional {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .document-summary__totals div,
  .document-summary--professional .document-summary__totals div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    font-size: 0.98rem !important;
  }

  .document-summary__totals strong {
    white-space: nowrap !important;
    font-size: 1rem !important;
  }

  .document-footer--professional {
    grid-template-columns: 1fr !important;
  }
}

/* Laatste mobiele override: deze regels moeten winnen van oudere pagina-specifieke CSS. */
@media (max-width: 760px) {
  body {
    overflow-x: hidden !important;
  }

  .content-section,
  .portal-section,
  .document-page-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: clamp(10px, 3.5vw, 16px) !important;
    box-sizing: border-box !important;
  }

  .field-row,
  .contact-grid,
  .portal-admin-workspace,
  .portal-admin-overview-grid,
  .portal-admin-grid,
  .portal-kpi-grid,
  .portal-kpis,
  .planning-layout,
  .planning-customer-grid,
  .planning-admin-grid,
  .planning-admin-grid--top,
  .planning-admin-grid--time,
  .planning-admin-grid--contact,
  .document-builder-layout,
  .document-preview-grid,
  .portal-finance-grid,
  .portal-finance-toolbar,
  .portal-project-admin-grid,
  .homepage-media-grid-admin {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tech-panel,
  .portal-section-card,
  .portal-case,
  .portal-mini-note,
  .document-preview,
  .document-preview--professional {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(14px, 4vw, 20px) !important;
    box-sizing: border-box !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  .button,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  button,
  input[type="submit"] {
    min-height: 44px !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .login-actions,
  .portal-inline-links,
  .planning-create-card__actions,
  .planning-toolbar__actions,
  .portal-finance-summary__actions,
  .document-template-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .login-actions > *,
  .portal-inline-links > *,
  .planning-create-card__actions > *,
  .planning-toolbar__actions > *,
  .portal-finance-summary__actions > *,
  .document-template-actions > * {
    width: 100% !important;
  }

  .portal-admin-sidebar,
  .portal-admin-detail,
  .planning-create-card,
  .planning-overview-card,
  .document-builder-preview-shell,
  .document-builder-form,
  .portal-finance-main,
  .portal-finance-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .portal-admin-customer-list,
  .portal-admin-document-list,
  .portal-case-filter-bar,
  .planning-chip-group,
  .planning-time-grid,
  .planning-time-grid--buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  h1,
  .portal-section-card h1,
  .tech-panel h1 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
    line-height: 1.02 !important;
  }

  h2,
  .portal-section-card h2,
  .tech-panel h2 {
    font-size: clamp(1.35rem, 6vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  p,
  li,
  strong,
  span,
  .portal-case__detail,
  .portal-case__summary {
    overflow-wrap: anywhere !important;
  }
}

/* DEFINITIEVE mobiele beheer-header: dit staat bewust helemaal onderaan en wint van oude headerregels. */
@media (max-width: 760px) {
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header {
    margin: 0 0 12px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-shell.header-shell--portal {
    width: calc(100vw - 18px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-main {
    order: 1 !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .brand--banner img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    max-height: 72px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-session {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-utility > .portal-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text .client-access-link__eyebrow,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-trigger__eyebrow {
    font-size: 0.54rem !important;
    line-height: 1 !important;
    letter-spacing: 0.16em !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__text .client-access-link__label,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-trigger__label {
    font-size: 0.95rem !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__actions,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-links {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-session__form,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__toggle,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-mini-button {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__toggle span:first-child,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__count,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-header-link strong {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 0.68rem !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .header-bottom {
    order: 3 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .menu-toggle {
    display: none !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav.is-open {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 7px !important;
    padding: 0 !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a,
  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .site-nav.portal-nav > a.site-nav__cta {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 0.76rem !important;
  }

  body:where(.portal-page--admin, .portal-page--finance, .portal-page--documents) .site-header .portal-blocked-menu__panel {
    position: fixed !important;
    inset: 74px 10px auto 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, 520px) !important;
    overflow: auto !important;
    z-index: 5000 !important;
  }
}

/* Factuur/offerte print/PDF: de scherm-layout mag het A4-document niet afknijpen. */
@media print {
  html,
  body.document-page {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.document-page::before,
  body.document-page .page-noise,
  body.document-page .document-view-toolbar,
  body.document-page .document-sheet__actions,
  body.document-page .scroll-top-button,
  body.document-page .no-print {
    display: none !important;
  }

  body.document-page .document-page-main,
  body.document-page .content-section.document-page-main {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.document-page .document-sheet,
  body.document-page .document-sheet--professional {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body.document-page .document-template-flow,
  body.document-page .document-template-section {
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.document-page .document-template-section--hidden {
    display: revert !important;
  }

  body.document-page .document-template-flow {
    display: block !important;
  }

  body.document-page .document-sheet__hero {
    display: grid !important;
  }

  body.document-page .document-sheet__overview,
  body.document-page .document-payment-block--professional,
  body.document-page .document-summary--professional {
    display: grid !important;
  }

  body.document-page .document-brand,
  body.document-page .document-company-card,
  body.document-page .document-sheet__title-panel,
  body.document-page .document-party-card,
  body.document-page .document-facts-grid,
  body.document-page .document-lead-card,
  body.document-page .document-table-sheet,
  body.document-page .document-footer--professional {
    display: block !important;
  }

  body.document-page .document-facts-grid {
    display: grid !important;
  }

  body.document-page .document-table-sheet__head,
  body.document-page .document-table-sheet__row {
    display: grid !important;
  }

  body.document-page [data-reveal] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.document-page .document-qr img,
  body.document-page .document-qr canvas,
  body.document-page .document-qr svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* FINAL topbalk polish: wint van alle oudere toolbar- en knopregels. */
@media screen {
  body.site-home .top-toolbar {
    position: relative !important;
    z-index: 40 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.58) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 34%, rgba(0, 0, 0, 0.06) 68%, rgba(0, 0, 0, 0.2)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.08) 72%, rgba(0, 0, 0, 0.24)) !important;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  body.site-home .top-toolbar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%) !important;
    opacity: 0.7 !important;
  }

  body.site-home .top-toolbar__inner {
    position: relative !important;
    z-index: 1 !important;
    min-height: 48px !important;
    width: min(calc(100% - 24px), 1680px) !important;
    padding: 6px 12px !important;
    gap: 14px !important;
  }

  body.site-home .toolbar-group {
    align-items: center !important;
    gap: 10px !important;
  }

  body.site-home .toolbar-group--right {
    gap: 11px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #1c3449 !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    opacity: 0.9 !important;
  }

  body.site-home .toolbar-group a:not(:last-child)::after,
  body.site-home .toolbar-group span:not(:last-child)::after {
    width: 1px !important;
    height: 22px !important;
    right: -6px !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.26), transparent) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.24) !important;
  }

  body.site-home .top-login-link,
  body.site-home .top-toolbar .top-direct-contact,
  body.site-home .rs-language-button {
    min-height: 34px !important;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.18) 48%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
    color: #142c42 !important;
    box-shadow:
      0 9px 20px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(0, 0, 0, 0.26),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
  }

  body.site-home .top-login-link {
    min-width: 118px !important;
    padding: 0 20px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-width: 132px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
  }

  body.site-home .top-toolbar .top-direct-contact--call {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 255, 0.34) 54%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
  }

  body.site-home .top-toolbar .top-direct-contact--whatsapp {
    border-color: rgba(0, 0, 0, 0.54) !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(72, 226, 137, 0.98), rgba(20, 174, 92, 0.94) 54%, rgba(7, 95, 49, 0.98)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2)) !important;
    box-shadow:
      0 10px 24px rgba(7, 116, 62, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.36),
      inset 0 -1px 0 rgba(0, 0, 0, 0.32),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
  }

  body.site-home .rs-language-switcher {
    top: 9px !important;
    left: 12px !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.48) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.1)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.18)) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      inset 0 -1px 0 rgba(0, 0, 0, 0.34) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  body.site-home .rs-language-button {
    min-width: 92px !important;
    padding: 5px 11px 5px 8px !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
  }

  body.site-home .rs-language-button.is-active {
    border-color: rgba(0, 0, 0, 0.58) !important;
    color: #102b42 !important;
  }

  body.site-home .rs-lang-flag {
    border: 1px solid rgba(0, 0, 0, 0.26) !important;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  }
}

@media screen and (min-width: 900px) {
  body.site-home .toolbar-group--brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .top-toolbar {
    padding-top: 42px !important;
  }

  body.site-home .top-toolbar__inner {
    min-height: auto !important;
    padding: 5px 10px 8px !important;
  }

  body.site-home .toolbar-group--right {
    gap: 8px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    display: none !important;
  }

  body.site-home .top-login-link {
    min-width: 112px !important;
    min-height: 34px !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-width: 0 !important;
    min-height: 42px !important;
    flex: 1 1 calc(50% - 8px) !important;
    padding-inline: 12px !important;
  }

  body.site-home .rs-language-switcher {
    top: 8px !important;
    left: 8px !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
  }
}

body.document-page .document-sheet .document-view-toolbar,
body.document-page .document-sheet .document-sheet__actions {
  display: none !important;
}

.document-print-sheet {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body.document-page .document-page-main,
  body.document-page .payment-modal,
  body.document-page .scroll-top-button,
  body.document-page .document-view-toolbar,
  body.document-page .page-noise {
    display: none !important;
  }

  body.document-page .document-print-sheet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #101827 !important;
    background: #ffffff !important;
    font: 10pt/1.42 Arial, Helvetica, sans-serif !important;
  }

  .document-print-sheet * {
    box-sizing: border-box !important;
    color: inherit !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  .document-print-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42mm !important;
    gap: 16mm !important;
    align-items: start !important;
    border-bottom: 1px solid #111827 !important;
    padding-bottom: 9mm !important;
    margin-bottom: 8mm !important;
  }

  .document-print-header h1 {
    margin: 0 0 2mm !important;
    font-size: 24pt !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .document-print-header p {
    margin: 0 !important;
    color: #4b5d70 !important;
    font-size: 9pt !important;
  }

  .document-print-header img {
    width: 38mm !important;
    max-width: 38mm !important;
    height: auto !important;
    justify-self: end !important;
  }

  .document-print-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58mm !important;
    gap: 16mm !important;
    margin-bottom: 8mm !important;
  }

  .document-print-meta p,
  .document-print-party p,
  .document-print-payment p,
  .document-print-summary p,
  .document-print-footer {
    margin: 0 0 2mm !important;
  }

  .document-print-meta p {
    display: grid !important;
    grid-template-columns: 34mm minmax(0, 1fr) !important;
    gap: 5mm !important;
  }

  .document-print-meta strong,
  .document-print-party strong,
  .document-print-payment strong,
  .document-print-summary strong {
    font-weight: 800 !important;
  }

  .document-print-party,
  .document-print-payment {
    border: 1px solid #d4dde7 !important;
    padding: 5mm !important;
    margin-bottom: 7mm !important;
    break-inside: avoid !important;
  }

  .document-print-payment {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36mm !important;
    gap: 8mm !important;
    align-items: center !important;
  }

  .document-print-payment img {
    width: 34mm !important;
    height: 34mm !important;
    justify-self: end !important;
  }

  .document-print-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 8mm !important;
    table-layout: fixed !important;
  }

  .document-print-table th,
  .document-print-table td {
    border-bottom: 1px solid #d4dde7 !important;
    padding: 2.4mm 1.6mm !important;
    vertical-align: top !important;
    text-align: left !important;
    font-size: 8.6pt !important;
    overflow-wrap: anywhere !important;
  }

  .document-print-table th {
    border-bottom-color: #111827 !important;
    color: #075dab !important;
    font-size: 7.2pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  .document-print-table th:nth-child(1),
  .document-print-table td:nth-child(1) {
    width: 22mm !important;
  }

  .document-print-table th:nth-child(3),
  .document-print-table td:nth-child(3),
  .document-print-table th:nth-child(4),
  .document-print-table td:nth-child(4),
  .document-print-table th:nth-child(5),
  .document-print-table td:nth-child(5),
  .document-print-table th:nth-child(6),
  .document-print-table td:nth-child(6) {
    text-align: right !important;
  }

  .document-print-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62mm !important;
    gap: 10mm !important;
    align-items: start !important;
    break-inside: avoid !important;
  }

  .document-print-totals {
    border: 1px solid #111827 !important;
  }

  .document-print-totals p {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4mm !important;
    margin: 0 !important;
    padding: 3mm !important;
    border-bottom: 1px solid #d4dde7 !important;
  }

  .document-print-totals p:last-child {
    border-bottom: 0 !important;
    font-weight: 800 !important;
    background: #eef4fb !important;
  }

  .document-print-footer {
    margin-top: 9mm !important;
    padding-top: 4mm !important;
    border-top: 1px solid #d4dde7 !important;
    color: #4b5d70 !important;
    font-size: 8pt !important;
  }

  body.document-page .document-screen-only,
  body.document-page main.document-screen-only,
  body.document-page .content-section.document-page-main.document-screen-only {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Laatste lock voor de publieke topbanner: mouse-over mag de afbeelding niet verplaatsen. */
body.site-home .site-header .header-shell,
body.site-home .site-header .header-shell:hover,
body.site-home .site-header .header-shell:focus,
body.site-home .site-header .header-shell:focus-within {
  --home-banner-bg-size: contain !important;
  --home-banner-bg-position: center center !important;
  height: clamp(360px, 36vw, 455px) !important;
  min-height: clamp(360px, 36vw, 455px) !important;
  max-height: clamp(360px, 36vw, 455px) !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(232, 241, 248, 0.28),
      rgba(141, 160, 176, 0.18)
    ),
    linear-gradient(
      180deg,
      var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)),
      var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))
    ),
    var(--rs-home-top-banner-image) center center / contain no-repeat !important;
  background-position: center center, center center, center center !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  border-color: rgba(186, 207, 226, 0.42) !important;
  box-shadow:
    inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
    0 24px 60px rgba(11, 21, 34, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
}

body.site-home .site-header .header-main {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto !important;
}

body.site-home .hero-copy {
  height: clamp(360px, 36vw, 455px) !important;
  min-height: clamp(360px, 36vw, 455px) !important;
  background:
    linear-gradient(
      180deg,
      rgba(232, 241, 248, 0.18),
      rgba(141, 160, 176, 0.12)
    ),
    linear-gradient(
      180deg,
      var(--rs-home-hero-tint-top, transparent),
      var(--rs-home-hero-tint-bottom, transparent)
    ),
    var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
  background-position: center center, center center, center center !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  border-color: rgba(186, 207, 226, 0.42) !important;
  box-shadow:
    inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
    0 24px 60px rgba(11, 21, 34, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
}

body.site-home .hero-copy::before,
body.site-home .hero-copy:hover::before,
body.site-home .hero-copy:focus-within::before {
  z-index: 1 !important;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(91, 130, 164, 0.08)),
    linear-gradient(90deg, rgba(225, 234, 243, 0.04) 0%, rgba(213, 226, 238, 0.08) 34%, rgba(231, 239, 247, 0.2) 67%, rgba(235, 243, 250, 0.24) 100%) !important;
  opacity: 1 !important;
  transform: none !important;
}

body.site-home .hero-photo-bg {
  background: var(--rs-home-bottom-banner-image) center top / 100% auto no-repeat !important;
  opacity: 1 !important;
}

/* Mobiel heeft eigen verhoudingen: niet de desktophoogte van de gesplitste banner forceren. */
@media screen and (max-width: 680px) {
  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within {
    height: auto !important;
    min-height: clamp(225px, 64vw, 292px) !important;
    max-height: none !important;
    padding: 12px 12px 10px !important;
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)),
        var(--rs-home-header-tint-bottom-mobile, color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent))
      ),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
    background-position: center center, center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, contain !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  }

  body.site-home .site-header .header-main {
    height: auto !important;
    min-height: clamp(118px, 34vw, 154px) !important;
    max-height: none !important;
  }

  body.site-home .brand--banner {
    width: min(270px, 70vw) !important;
  }

  body.site-home .header-bottom {
    margin-top: 6px !important;
    padding-top: 8px !important;
  }

  body.site-home .hero-section {
    padding-top: 12px !important;
  }

  body.site-home .hero-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px 16px 18px !important;
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.18),
        rgba(141, 160, 176, 0.12)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-hero-tint-top, transparent),
        var(--rs-home-hero-tint-bottom-mobile, transparent)
      ),
      var(--rs-home-bottom-banner-image) center top / cover no-repeat !important;
    background-position: center center, center center, center top !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }

  body.site-home .hero-photo-bg {
    background: var(--rs-home-bottom-banner-image) center top / cover no-repeat !important;
  }

  body.site-home .hero-copy > :not(.panel-corners):not(.hero-photo-bg),
  body.site-home .hero-copy h1,
  body.site-home .hero-text,
  body.site-home .hero-service-list,
  body.site-home .hero-install-note,
  body.site-home .hero-actions,
  body.site-home .hero-availability-note {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.site-home .hero-copy h1 {
    font-size: clamp(1.35rem, 6.4vw, 1.85rem) !important;
    line-height: 1.08 !important;
  }

  body.site-home .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

body.site-home .site-header .header-shell::before,
body.site-home .site-header .header-shell:hover::before,
body.site-home .site-header .header-shell:focus-within::before,
body.site-home .site-header .header-shell::after,
body.site-home .site-header .header-shell:hover::after,
body.site-home .site-header .header-shell:focus-within::after,
body.site-home .site-header .header-main::before,
body.site-home .site-header .header-main:hover::before,
body.site-home .site-header .header-main:focus-within::before {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  animation: none !important;
}

.portal-reminder-panel {
  overflow: hidden;
}

.portal-reminder-panel__header {
  align-items: flex-start;
}

.portal-reminder-form {
  display: grid;
  gap: 18px;
}

.portal-reminder-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 16px;
}

.portal-reminder-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-reminder-summary span {
  border: 1px solid rgba(95, 141, 183, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: #23445f;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 7px 11px;
}

.portal-reminder-form textarea {
  min-height: 235px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .portal-reminder-form__grid {
    grid-template-columns: 1fr;
  }

  .portal-reminder-form__actions {
    align-items: stretch;
  }

  .portal-reminder-form__actions .button {
    width: 100%;
  }
}

/* Mobiele documentweergave: factuur/offerte-regels mogen nooit als smalle desktop-tabel breken. */
@media screen and (max-width: 980px), screen and (pointer: coarse) and (max-width: 1180px) {
  body.document-page:not(.document-page--print-preview) .document-template-section.document-table-sheet,
  body.document-page:not(.document-page--print-preview) .document-table-sheet,
  body.document-page:not(.document-page--print-preview) .document-table-sheet--professional,
  body.portal-page .document-preview__table,
  body.document-page .document-preview__table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-table-sheet__head,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-table-sheet__head,
  body.portal-page .document-preview__table-head,
  body.document-page .document-preview__table-head {
    display: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-table-sheet__row,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-table-sheet__row,
  body.portal-page .document-preview__row,
  body.document-page .document-preview__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 1px solid rgba(121, 141, 161, 0.22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    overflow: hidden !important;
  }

  body.document-page:not(.document-page--print-preview) .document-table-sheet__row span,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-table-sheet__row span,
  body.portal-page .document-preview__row span,
  body.portal-page .document-preview__row strong,
  body.document-page .document-preview__row span,
  body.document-page .document-preview__row strong {
    display: grid !important;
    grid-template-columns: minmax(100px, 0.42fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    border-top: 1px solid rgba(121, 141, 161, 0.12) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    line-height: 1.35 !important;
  }

  body.document-page:not(.document-page--print-preview) .document-table-sheet__row span:first-child,
  body.portal-page .document-preview__row span:first-child,
  body.document-page .document-preview__row span:first-child {
    border-top: 0 !important;
  }

  body.document-page:not(.document-page--print-preview) .document-table-sheet__row span::before,
  body.portal-page .document-preview__row span::before,
  body.portal-page .document-preview__row strong::before,
  body.document-page .document-preview__row span::before,
  body.document-page .document-preview__row strong::before {
    color: #426c95 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.document-page:not(.document-page--print-preview) .document-table-sheet__row span::before,
  body.portal-page .document-preview__row span::before,
  body.document-page .document-preview__row span::before {
    content: attr(data-label) !important;
  }

  body.portal-page .document-preview__row span:nth-child(1)::before,
  body.document-page .document-preview__row span:nth-child(1)::before {
    content: "Datum" !important;
  }

  body.portal-page .document-preview__row span:nth-child(2)::before,
  body.document-page .document-preview__row span:nth-child(2)::before {
    content: "Omschrijving" !important;
  }

  body.portal-page .document-preview__row span:nth-child(3)::before,
  body.document-page .document-preview__row span:nth-child(3)::before {
    content: "Aantal" !important;
  }

  body.portal-page .document-preview__row span:nth-child(4)::before,
  body.document-page .document-preview__row span:nth-child(4)::before {
    content: "Eenheid" !important;
  }

  body.portal-page .document-preview__row span:nth-child(5)::before,
  body.document-page .document-preview__row span:nth-child(5)::before {
    content: "Prijs" !important;
  }

  body.portal-page .document-preview__row span:nth-child(6)::before,
  body.document-page .document-preview__row span:nth-child(6)::before {
    content: "BTW" !important;
  }

  body.portal-page .document-preview__row span:nth-child(7)::before,
  body.document-page .document-preview__row span:nth-child(7)::before,
  body.portal-page .document-preview__row strong::before,
  body.document-page .document-preview__row strong::before {
    content: "Totaal" !important;
  }
}

/* Centrale RS-knopstijl: alle pagina's gebruiken dezelfde blauwe/zilveren knopfamilie. */
:root {
  --rs-button-ink: #123554;
  --rs-button-muted: #4c6b89;
  --rs-button-blue-top: #3d98e4;
  --rs-button-blue-mid: #1f79c8;
  --rs-button-blue-bottom: #0a5a9d;
  --rs-button-blue-dark: #073f72;
  --rs-button-ice-top: rgba(255, 255, 255, 0.98);
  --rs-button-ice-mid: rgba(236, 245, 252, 0.97);
  --rs-button-ice-bottom: rgba(213, 229, 241, 0.96);
  --rs-button-hover-top: #54a9ee;
  --rs-button-hover-mid: #257fd0;
  --rs-button-hover-bottom: #0b64ad;
  --rs-button-active-text: #ffffff;
  --rs-button-hover-text: #ffffff;
  --rs-button-line: rgba(75, 139, 199, 0.46);
  --rs-button-line-strong: rgba(25, 105, 178, 0.62);
  --rs-button-glow: rgba(36, 129, 210, 0.22);
  --rs-button-shadow: rgba(21, 56, 86, 0.18);
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .contact-tab,
  .portal-auth-tab,
  .portal-admin-tab,
  .planning-time-button,
  .site-nav a,
  .site-nav__cta,
  .top-direct-contact,
  .payment-modal__cta,
  button:not(.scroll-top-button):not(.rs-language-button),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  summary.button
) {
  -webkit-tap-highlight-color: transparent !important;
  appearance: none;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  min-height: 40px;
  border: 1px solid var(--rs-button-line) !important;
  border-radius: 14px !important;
  color: var(--rs-button-ink) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(180deg, var(--rs-button-ice-top), var(--rs-button-ice-mid) 48%, var(--rs-button-ice-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 0 rgba(44, 101, 152, 0.12),
    0 9px 18px var(--rs-button-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.34) !important;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    filter 150ms ease !important;
}

:where(
  .button-primary,
  .button.is-active,
  .filter-button.is-active,
  .contact-tab.is-active,
  .portal-auth-tab.is-active,
  .portal-admin-tab.is-active,
  .planning-time-button.is-selected,
  .site-nav a.is-active,
  .site-nav__cta.is-active,
  .top-direct-contact--call,
  .top-direct-contact--whatsapp
) {
  border-color: var(--rs-button-line-strong) !important;
  color: var(--rs-button-active-text) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(159, 223, 255, 0.52), transparent 42%),
    linear-gradient(180deg, var(--rs-button-blue-top), var(--rs-button-blue-mid) 52%, var(--rs-button-blue-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -2px 0 rgba(1, 47, 92, 0.34),
    0 12px 24px var(--rs-button-glow),
    0 0 0 1px rgba(255, 255, 255, 0.28) !important;
  text-shadow: 0 1px 0 rgba(3, 34, 63, 0.72) !important;
}

:where(
  .button-danger,
  .portal-delete-button,
  [data-action="delete"],
  [data-template-action="hide"]
) {
  border-color: var(--rs-button-line) !important;
  color: var(--rs-button-ink) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(180deg, var(--rs-button-ice-top), var(--rs-button-ice-mid) 48%, var(--rs-button-ice-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 0 rgba(44, 101, 152, 0.12),
    0 9px 18px var(--rs-button-shadow) !important;
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .contact-tab,
  .portal-auth-tab,
  .portal-admin-tab,
  .planning-time-button,
  .site-nav a,
  .site-nav__cta,
  .top-direct-contact,
  .payment-modal__cta,
  button:not(.scroll-top-button):not(.rs-language-button),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  summary.button
):hover,
:where(
  .button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .contact-tab,
  .portal-auth-tab,
  .portal-admin-tab,
  .planning-time-button,
  .site-nav a,
  .site-nav__cta,
  .top-direct-contact,
  .payment-modal__cta,
  button:not(.scroll-top-button):not(.rs-language-button),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  summary.button
):focus-visible {
  border-color: var(--rs-button-line-strong) !important;
  color: var(--rs-button-hover-text) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(182, 232, 255, 0.66), transparent 44%),
    linear-gradient(180deg, var(--rs-button-hover-top), var(--rs-button-hover-mid) 52%, var(--rs-button-hover-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(2, 49, 94, 0.34),
    0 14px 28px rgba(28, 112, 190, 0.28),
    0 0 0 3px rgba(122, 194, 246, 0.16) !important;
  text-shadow: 0 1px 0 rgba(3, 34, 63, 0.68) !important;
  transform: translateY(-1px);
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .contact-tab,
  .portal-auth-tab,
  .portal-admin-tab,
  .planning-time-button,
  .site-nav a,
  .site-nav__cta,
  .top-direct-contact,
  .payment-modal__cta,
  button:not(.scroll-top-button):not(.rs-language-button),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  summary.button
):active {
  filter: saturate(0.98) brightness(0.96);
  transform: translateY(1px) scale(0.992);
  box-shadow:
    inset 0 2px 6px rgba(3, 34, 63, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    0 5px 12px rgba(21, 56, 86, 0.16) !important;
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .contact-tab,
  .portal-auth-tab,
  .portal-admin-tab,
  .planning-time-button,
  .site-nav a,
  .site-nav__cta,
  .top-direct-contact,
  .payment-modal__cta,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  summary.button
):disabled,
:where(
  .button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .contact-tab,
  .portal-auth-tab,
  .portal-admin-tab,
  .planning-time-button,
  .site-nav a,
  .site-nav__cta,
  .top-direct-contact,
  .payment-modal__cta
)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
  filter: grayscale(0.2) !important;
  transform: none !important;
}

:where(.site-nav a, .site-nav__cta) .nav-label,
:where(.site-nav a, .site-nav__cta) span,
:where(.button, .portal-inline-button, .portal-mini-button, .filter-button, .contact-tab, .portal-auth-tab, .portal-admin-tab) span {
  color: inherit !important;
  text-shadow: inherit !important;
}

input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid var(--rs-button-line);
  border-radius: 12px;
  color: var(--rs-button-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(180deg, var(--rs-button-ice-top), var(--rs-button-ice-mid) 48%, var(--rs-button-ice-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 16px rgba(21, 56, 86, 0.14);
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--rs-button-line-strong);
  color: var(--rs-button-hover-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(182, 232, 255, 0.66), transparent 44%),
    linear-gradient(180deg, var(--rs-button-hover-top), var(--rs-button-hover-mid) 52%, var(--rs-button-hover-bottom));
}

@media (max-width: 680px) {
  :where(.button, .portal-inline-button, .portal-mini-button, .filter-button, .contact-tab, .portal-auth-tab, .portal-admin-tab) {
    border-radius: 13px !important;
  }
}

:where(.site-nav a, .site-nav__cta) .nav-core {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(180deg, var(--rs-button-blue-top), var(--rs-button-blue-mid) 52%, var(--rs-button-blue-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(1, 47, 92, 0.3),
    0 12px 24px rgba(36, 129, 210, 0.2) !important;
}

:where(.site-nav a, .site-nav__cta) .nav-sheen {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.72) 48%, rgba(190, 226, 252, 0.9) 58%, transparent 100%) !important;
}

:where(.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active, .site-nav__cta:hover, .site-nav__cta:focus-visible, .site-nav__cta.is-active) .nav-core {
  opacity: 1 !important;
}

:where(.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active, .site-nav__cta:hover, .site-nav__cta:focus-visible, .site-nav__cta.is-active) .nav-label {
  color: var(--rs-button-hover-text) !important;
  text-shadow: 0 1px 0 rgba(3, 34, 63, 0.72) !important;
}

.scroll-top-button {
  border-color: var(--rs-button-line-strong) !important;
  color: var(--rs-button-active-text) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(159, 223, 255, 0.52), transparent 42%),
    linear-gradient(180deg, var(--rs-button-blue-top), var(--rs-button-blue-mid) 52%, var(--rs-button-blue-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -2px 0 rgba(1, 47, 92, 0.34),
    0 12px 24px var(--rs-button-glow) !important;
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

/* WhatsApp blijft bewust groen, ook met de centrale RS-knopstijl erboven. */
.top-direct-contact--whatsapp,
a.top-direct-contact--whatsapp,
a[href*="wa.me"].top-direct-contact,
a[href*="wa.me"],
a[href*="api.whatsapp.com"] {
  border-color: rgba(18, 128, 74, 0.7) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(202, 255, 225, 0.48), transparent 42%),
    linear-gradient(180deg, #35dc82 0%, #1fb969 52%, #0b8f49 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(5, 92, 45, 0.36),
    0 12px 24px rgba(20, 157, 86, 0.23),
    0 0 0 1px rgba(255, 255, 255, 0.24) !important;
  text-shadow: 0 1px 0 rgba(5, 58, 32, 0.62) !important;
}

.top-direct-contact--whatsapp:hover,
.top-direct-contact--whatsapp:focus-visible,
a[href*="wa.me"].top-direct-contact:hover,
a[href*="wa.me"].top-direct-contact:focus-visible,
a[href*="wa.me"]:hover,
a[href*="wa.me"]:focus-visible,
a[href*="api.whatsapp.com"]:hover,
a[href*="api.whatsapp.com"]:focus-visible {
  border-color: rgba(10, 111, 57, 0.86) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(220, 255, 236, 0.56), transparent 44%),
    linear-gradient(180deg, #3feb8e 0%, #22c56f 50%, #087d3f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 0 rgba(4, 76, 38, 0.38),
    0 15px 28px rgba(20, 157, 86, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.26) !important;
}

/* Back-up upload: voorkom losse bestandsnaamtekst naast de compacte knop. */
.portal-backup-upload {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.portal-backup-file-label {
  width: 100%;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
}

.portal-backup-file {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-backup-upload .button {
  white-space: nowrap !important;
}

/* Leesbaarheid: iets donkerdere zilver/antraciet achtergrond zonder de bannerbeelden te breken. */
@media screen {
  :root {
    --bg: #d8e3ec;
    --bg-soft: #c6d4df;
    --surface: rgba(218, 229, 238, 0.84);
    --surface-soft: rgba(197, 213, 226, 0.74);
    --surface-strong: rgba(232, 240, 247, 0.94);
    --ink: #14283c;
    --muted: #405a72;
    --line: rgba(64, 89, 113, 0.28);
    --line-strong: rgba(43, 68, 92, 0.42);
    --silver-deep: #18314a;
  }

  body:not(.document-page):not(.document-page--print-preview) {
    color: var(--ink);
    background:
      radial-gradient(circle at 18% 12%, rgba(50, 121, 194, 0.22), transparent 24rem),
      radial-gradient(circle at 82% 4%, rgba(17, 42, 68, 0.2), transparent 24rem),
      linear-gradient(155deg, #c9d6e0 0%, #b7c7d3 42%, #8fa2b0 100%) !important;
  }

  body:not(.document-page):not(.document-page--print-preview)::before {
    background:
      linear-gradient(rgba(54, 78, 101, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(54, 78, 101, 0.09) 1px, transparent 1px) !important;
    opacity: 0.82;
  }

  body:not(.document-page):not(.document-page--print-preview) .page-noise {
    opacity: 0.18;
    background-image: radial-gradient(rgba(27, 48, 68, 0.18) 0.55px, transparent 0.55px);
  }

  body:not(.document-page):not(.document-page--print-preview) .top-toolbar {
    background:
      linear-gradient(180deg, rgba(222, 232, 240, 0.96), rgba(190, 205, 218, 0.88)) !important;
    border-bottom-color: rgba(47, 75, 102, 0.2);
    box-shadow:
      inset 0 -1px 0 rgba(255, 255, 255, 0.42),
      0 10px 24px rgba(17, 32, 48, 0.12);
  }

  body:not(.document-page):not(.document-page--print-preview) :where(.content-section, .portal-section)::before {
    border-color: rgba(43, 68, 92, 0.2) !important;
    background:
      linear-gradient(180deg, rgba(35, 51, 66, 0.24), rgba(91, 110, 127, 0.16)),
      radial-gradient(circle at 88% 10%, rgba(38, 118, 198, 0.12), transparent 34%) !important;
    box-shadow: 0 26px 62px rgba(13, 24, 36, 0.2);
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .tech-panel:not(.hero-copy),
    .portal-session,
    .portal-blocked-menu__panel,
    .login-feedback,
    .portal-section-card,
    .portal-mini-note,
    .portal-detail-card,
    .portal-admin-card,
    .portal-case,
    .portal-customer-card,
    .portal-auth-card,
    .booking-card,
    .appointment-card,
    .document-preview,
    .contact-switcher,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .feature-card,
    .project-card,
    .process-card,
    .homepage-media-card,
    .product-card,
    .faq-item,
    .footer-columns
  ) {
    border-color: rgba(92, 122, 150, 0.36) !important;
    background:
      linear-gradient(180deg, rgba(218, 229, 238, 0.88), rgba(181, 198, 213, 0.72)),
      radial-gradient(circle at 82% 12%, rgba(56, 136, 214, 0.11), transparent 34%),
      radial-gradient(circle at 12% 92%, rgba(12, 26, 40, 0.13), transparent 36%) !important;
    box-shadow:
      0 22px 54px rgba(12, 22, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(21, 38, 54, 0.1) !important;
    color: var(--ink);
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    input,
    select,
    textarea,
    .portal-trigger,
    .portal-blocked-menu__toggle,
    .portal-status,
    .status-pill,
    .document-preview__meta div,
    .document-preview__note,
    .document-preview__totals div
  ) {
    color: var(--ink) !important;
    background-color: rgba(230, 238, 245, 0.9) !important;
    border-color: rgba(84, 112, 139, 0.32) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) ::placeholder {
    color: #667b8f !important;
    opacity: 1;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    p,
    li,
    small,
    .portal-case__summary,
    .portal-case__detail p,
    .portal-update p,
    .portal-mini-note p,
    .portal-section-card p,
    .document-preview__meta p,
    .document-preview__note,
    .homepage-media-card p:last-child,
    .product-card p:not(.card-code)
  ) {
    color: var(--muted);
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    h1,
    h2,
    h3,
    .portal-case h3,
    .portal-section-card h2,
    .homepage-media-card h3,
    .product-card h3,
    .document-preview__header h3
  ) {
    color: var(--ink) !important;
  }

  body.site-home .hero-copy h1,
  body.site-home .hero-text,
  body.site-home .hero-service-list,
  body.site-home .hero-install-note {
    color: #102940 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.58),
      0 12px 26px rgba(8, 20, 34, 0.16) !important;
  }

  body.site-home .hero-service-list {
    border-color: rgba(87, 116, 145, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(226, 237, 246, 0.82), rgba(198, 214, 228, 0.68)) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(.section-kicker, .card-code, .project-label) {
    color: #2d679e !important;
  }
}

/* Extra contrast: iets donkerder, zodat tekst minder wegvalt tegen de lichte glaslagen. */
@media screen {
  body:not(.document-page):not(.document-page--print-preview) {
    background:
      radial-gradient(circle at 18% 12%, rgba(35, 100, 170, 0.24), transparent 23rem),
      radial-gradient(circle at 82% 4%, rgba(8, 24, 42, 0.26), transparent 24rem),
      linear-gradient(155deg, #bdcbd6 0%, #a7b8c5 44%, #8295a3 100%) !important;
  }

  body:not(.document-page):not(.document-page--print-preview)::before {
    background:
      linear-gradient(rgba(26, 47, 66, 0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 47, 66, 0.12) 1px, transparent 1px) !important;
    opacity: 0.9;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(.content-section, .portal-section)::before {
    background:
      linear-gradient(180deg, rgba(30, 45, 60, 0.3), rgba(83, 101, 118, 0.22)),
      radial-gradient(circle at 88% 10%, rgba(34, 111, 190, 0.14), transparent 34%) !important;
    border-color: rgba(35, 61, 86, 0.27) !important;
    box-shadow: 0 28px 66px rgba(9, 18, 29, 0.24);
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .tech-panel:not(.hero-copy),
    .portal-session,
    .portal-blocked-menu__panel,
    .login-feedback,
    .portal-section-card,
    .portal-mini-note,
    .portal-detail-card,
    .portal-admin-card,
    .portal-case,
    .portal-customer-card,
    .portal-auth-card,
    .booking-card,
    .appointment-card,
    .document-preview,
    .contact-switcher,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .feature-card,
    .project-card,
    .process-card,
    .homepage-media-card,
    .product-card,
    .faq-item,
    .footer-columns
  ) {
    background:
      linear-gradient(180deg, rgba(209, 222, 233, 0.92), rgba(164, 183, 200, 0.8)),
      radial-gradient(circle at 82% 12%, rgba(35, 112, 190, 0.14), transparent 34%),
      radial-gradient(circle at 12% 92%, rgba(7, 18, 30, 0.16), transparent 36%) !important;
    border-color: rgba(58, 86, 113, 0.43) !important;
    box-shadow:
      0 24px 58px rgba(9, 18, 29, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -1px 0 rgba(13, 29, 45, 0.12) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    input,
    select,
    textarea,
    .portal-trigger,
    .portal-blocked-menu__toggle,
    .portal-status,
    .status-pill,
    .document-preview__meta div,
    .document-preview__note,
    .document-preview__totals div
  ) {
    background-color: rgba(222, 232, 240, 0.96) !important;
    border-color: rgba(65, 94, 122, 0.38) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    p,
    li,
    small,
    .portal-case__summary,
    .portal-case__detail p,
    .portal-update p,
    .portal-mini-note p,
    .portal-section-card p,
    .document-preview__meta p,
    .document-preview__note,
    .homepage-media-card p:last-child,
    .product-card p:not(.card-code)
  ) {
    color: #314d66 !important;
  }
}

/* Blauwgrijze basis: minder wit, meer contrast voor langere beheerschermen. */
@media screen {
  :root {
    --bg: #a8b9c7;
    --bg-soft: #91a7b7;
    --surface: rgba(190, 207, 220, 0.88);
    --surface-soft: rgba(166, 188, 205, 0.8);
    --surface-strong: rgba(214, 226, 236, 0.94);
    --muted: #2f4c66;
    --line: rgba(42, 72, 100, 0.34);
  }

  body:not(.document-page):not(.document-page--print-preview) {
    background:
      radial-gradient(circle at 18% 10%, rgba(34, 104, 174, 0.28), transparent 22rem),
      radial-gradient(circle at 82% 0%, rgba(10, 30, 52, 0.34), transparent 26rem),
      linear-gradient(155deg, #aebfcc 0%, #8fa5b6 46%, #6f8493 100%) !important;
  }

  body:not(.document-page):not(.document-page--print-preview)::before {
    background:
      linear-gradient(rgba(19, 39, 58, 0.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19, 39, 58, 0.14) 1px, transparent 1px) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) .page-noise {
    opacity: 0.24;
  }

  body:not(.document-page):not(.document-page--print-preview) .top-toolbar {
    background:
      linear-gradient(180deg, rgba(205, 219, 231, 0.96), rgba(163, 184, 201, 0.9)) !important;
    border-bottom-color: rgba(29, 58, 85, 0.28) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(.content-section, .portal-section)::before {
    background:
      linear-gradient(180deg, rgba(21, 39, 56, 0.36), rgba(75, 97, 116, 0.28)),
      radial-gradient(circle at 82% 8%, rgba(20, 96, 172, 0.18), transparent 36%) !important;
    border-color: rgba(27, 56, 83, 0.34) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .tech-panel:not(.hero-copy),
    .portal-session,
    .portal-blocked-menu__panel,
    .login-feedback,
    .portal-section-card,
    .portal-mini-note,
    .portal-detail-card,
    .portal-admin-card,
    .portal-case,
    .portal-customer-card,
    .portal-auth-card,
    .booking-card,
    .appointment-card,
    .document-preview,
    .contact-switcher,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .feature-card,
    .project-card,
    .process-card,
    .homepage-media-card,
    .product-card,
    .faq-item,
    .footer-columns
  ) {
    background:
      linear-gradient(180deg, rgba(198, 215, 228, 0.93), rgba(146, 169, 188, 0.84)),
      radial-gradient(circle at 82% 12%, rgba(20, 104, 190, 0.17), transparent 34%),
      radial-gradient(circle at 10% 92%, rgba(6, 18, 30, 0.2), transparent 38%) !important;
    border-color: rgba(42, 75, 105, 0.48) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(input, select, textarea) {
    background-color: rgba(213, 226, 236, 0.97) !important;
    border-color: rgba(48, 82, 112, 0.44) !important;
  }
}

/* Page editor kleurenpalet: veilige homepage-thema variabelen. */
:root {
  --rs-home-page-bg: #748998;
  --rs-home-panel-bg: #b5c8d6;
  --rs-home-header-bg: #cddbe6;
  --rs-home-header-bar: #9fb5c7;
}

/* Gedeeld kleurenpalet: normale site- en portaalpagina's volgen de page editor.
   Documenten, facturen en printweergaves blijven bewust buiten deze laag. */
@media screen {
  body:not(.site-home):not(.document-page):not(.document-page--print-preview) {
    background:
      radial-gradient(circle at 18% 10%, rgba(34, 104, 174, 0.22), transparent 22rem),
      radial-gradient(circle at 82% 0%, rgba(10, 30, 52, 0.28), transparent 26rem),
      linear-gradient(
        155deg,
        color-mix(in srgb, var(--rs-home-page-bg) 94%, #ffffff 6%) 0%,
        var(--rs-home-page-bg) 46%,
        color-mix(in srgb, var(--rs-home-page-bg) 92%, #203142 8%) 100%
      ) !important;
  }

  body:not(.site-home):not(.document-page):not(.document-page--print-preview)::before {
    background:
      linear-gradient(rgba(19, 39, 58, 0.13) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19, 39, 58, 0.13) 1px, transparent 1px) !important;
  }

  body:not(.site-home):not(.document-page):not(.document-page--print-preview) :where(
    .top-toolbar,
    .header-bottom
  ) {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-header-bar) 82%, #ffffff 18%),
        color-mix(in srgb, var(--rs-home-header-bar) 88%, #18314a 12%)
      ) !important;
    border-color: color-mix(in srgb, var(--rs-home-header-bar) 62%, #24425f 38%) !important;
  }

  body:not(.site-home):not(.document-page):not(.document-page--print-preview) :where(
    .portal-trigger,
    .portal-blocked-menu__toggle,
    .portal-status,
    .status-pill
  ) {
    background-color: color-mix(in srgb, var(--rs-home-header-bg) 88%, #ffffff 12%) !important;
    border-color: color-mix(in srgb, var(--rs-home-header-bg) 70%, #2a587c 30%) !important;
  }

  body:not(.site-home):not(.document-page):not(.document-page--print-preview) :where(.content-section, .portal-section)::before {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-page-bg) 72%, rgba(15, 32, 48, 0.52) 28%),
        color-mix(in srgb, var(--rs-home-page-bg) 84%, rgba(255, 255, 255, 0.16) 16%)
      ),
      radial-gradient(circle at 82% 8%, rgba(20, 96, 172, 0.18), transparent 36%) !important;
    border-color: color-mix(in srgb, var(--rs-home-page-bg) 58%, #1f405f 42%) !important;
  }

  body:not(.site-home):not(.document-page):not(.document-page--print-preview) :where(
    .tech-panel:not(.hero-copy),
    .portal-session,
    .portal-blocked-menu__panel,
    .login-feedback,
    .portal-section-card,
    .portal-mini-note,
    .portal-detail-card,
    .portal-admin-card,
    .portal-case,
    .portal-customer-card,
    .portal-auth-card,
    .booking-card,
    .appointment-card,
    .contact-switcher,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .feature-card,
    .project-card,
    .process-card,
    .homepage-media-card,
    .product-card,
    .faq-item,
    .footer-columns
  ) {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-panel-bg) 86%, #ffffff 14%),
        color-mix(in srgb, var(--rs-home-panel-bg) 86%, #203142 14%)
      ),
      radial-gradient(circle at 82% 12%, rgba(20, 104, 190, 0.14), transparent 34%),
      radial-gradient(circle at 10% 92%, rgba(6, 18, 30, 0.16), transparent 38%) !important;
    border-color: color-mix(in srgb, var(--rs-home-panel-bg) 62%, #244b6c 38%) !important;
  }

  body:not(.site-home):not(.document-page):not(.document-page--print-preview) :where(
    input,
    select,
    textarea,
    .document-preview__meta div,
    .document-preview__note,
    .document-preview__totals div
  ) {
    background-color: color-mix(in srgb, var(--rs-home-panel-bg) 76%, #ffffff 24%) !important;
    border-color: color-mix(in srgb, var(--rs-home-panel-bg) 58%, #254763 42%) !important;
  }
}

.homepage-theme-form {
  display: grid;
  gap: 8px;
}

.homepage-theme-reset-form {
  margin-top: 6px;
}

.homepage-theme-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.homepage-theme-presets button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(55, 91, 125, 0.34);
  border-radius: 999px;
  color: #17324b;
  font: 800 0.82rem/1.1 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 45%),
    linear-gradient(180deg, rgba(228, 239, 247, 0.94), rgba(169, 191, 208, 0.84));
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 8px 18px rgba(12, 29, 45, 0.12);
}

.homepage-theme-presets button:hover,
.homepage-theme-presets button:focus-visible {
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(170, 224, 255, 0.56), transparent 44%),
    linear-gradient(180deg, #4aa9e8 0%, #2178bf 52%, #0b528f 100%);
}

.homepage-theme-help {
  margin: -2px 0 2px;
  color: #304e67;
  font-size: 0.76rem;
  line-height: 1.25;
}

.homepage-toggle-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(63, 96, 126, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(226, 237, 246, 0.86), rgba(178, 198, 215, 0.66));
  cursor: pointer;
}

.homepage-toggle-option__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.homepage-toggle-option__text strong {
  color: #17324b;
  font-size: 0.78rem;
  line-height: 1.1;
}

.homepage-toggle-option__text small {
  color: #47657f;
  font-size: 0.62rem;
  line-height: 1.25;
}

.homepage-toggle-option__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 26px;
  flex: 0 0 auto;
}

.homepage-toggle-option__control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.homepage-toggle-option__control span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(63, 96, 126, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(167, 185, 199, 0.78), rgba(127, 149, 166, 0.82));
  box-shadow:
    inset 0 1px 2px rgba(14, 31, 47, 0.22),
    0 6px 12px rgba(12, 29, 45, 0.1);
}

.homepage-toggle-option__control span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(13, 36, 56, 0.2);
  transition: transform 0.18s ease, background 0.18s ease;
}

.homepage-toggle-option__control input:checked + span {
  border-color: color-mix(in srgb, var(--rs-home-button-fg) 58%, #ffffff 42%);
  background:
    linear-gradient(180deg, var(--rs-home-button-hover), var(--rs-home-button-fg));
}

.homepage-toggle-option__control input:checked + span::after {
  transform: translateX(22px);
}

.homepage-toggle-option__control input:focus-visible + span {
  box-shadow:
    0 0 0 4px rgba(39, 142, 218, 0.18),
    inset 0 1px 2px rgba(14, 31, 47, 0.18);
}

.homepage-layout-group {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(63, 96, 126, 0.24);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(227, 239, 248, 0.62), rgba(169, 191, 208, 0.36));
}

.homepage-layout-group legend {
  padding: 0 6px;
  color: #2f628f;
  font: 900 0.62rem/1 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.homepage-layout-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px;
}

.homepage-layout-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(150px, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 50px;
  padding: 6px;
  border: 1px solid rgba(63, 96, 126, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(226, 237, 246, 0.86), rgba(178, 198, 215, 0.66));
  cursor: pointer;
}

.homepage-layout-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--rs-home-button-fg) 70%, #ffffff 30%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--rs-home-button-hover) 24%, transparent 76%),
    0 10px 20px rgba(21, 84, 138, 0.12);
}

.homepage-layout-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.homepage-layout-option__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.homepage-layout-option__text strong {
  color: #17324b;
  font-size: 0.78rem;
  line-height: 1.05;
}

.homepage-layout-option__text small {
  color: #47657f;
  font-size: 0.58rem;
  line-height: 1.2;
}

.homepage-layout-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.homepage-layout-preview span {
  min-width: 0;
  color: var(--rs-home-header-button-text);
  font: 900 0.52rem/1 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  text-align: center;
  white-space: nowrap;
}

.homepage-layout-preview--separate {
  gap: 5px;
}

.homepage-layout-preview--separate span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 50%, #ffffff 50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 82%, #ffffff 18%), var(--rs-home-header-button-bg));
}

.homepage-layout-preview--bar {
  gap: 0;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 46%, #ffffff 54%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 82%, #ffffff 18%), var(--rs-home-header-button-bg));
}

.homepage-layout-preview--bar span {
  padding: 7px 11px;
  border-left: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 26%, transparent 74%);
}

.homepage-layout-preview--bar span:first-child {
  border-left: 0;
}

.homepage-layout-preview--angled {
  gap: 0;
}

.homepage-layout-preview--angled span {
  margin-left: -6px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 50%, #ffffff 50%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 82%, #ffffff 18%), var(--rs-home-header-button-bg));
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}

.homepage-layout-preview--angled span:first-child {
  margin-left: 0;
}

.homepage-layout-preview--underline {
  gap: 2px;
}

.homepage-layout-preview--underline span {
  position: relative;
  padding: 8px 10px 9px;
  background: transparent;
}

.homepage-layout-preview--underline span::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: var(--rs-home-header-button-fg);
  box-shadow: 0 0 9px color-mix(in srgb, var(--rs-home-header-button-fg) 62%, transparent 38%);
}

.homepage-layout-preview--carbon {
  gap: 2px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 48%, #0d1722 52%);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #273847, #111923);
}

.homepage-layout-preview--carbon span {
  padding: 7px 10px;
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.homepage-layout-preview--compact {
  gap: 4px;
}

.homepage-layout-preview--compact span {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 38%, #ffffff 62%);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 88%, #ffffff 12%), var(--rs-home-header-button-bg));
}

.homepage-layout-preview--outline {
  gap: 5px;
}

.homepage-layout-preview--outline span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 68%, #ffffff 32%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rs-home-header-button-bg) 28%, transparent 72%);
}

.homepage-layout-preview--slab {
  gap: 4px;
}

.homepage-layout-preview--slab span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 46%, #ffffff 54%);
  border-radius: 5px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 82%, #ffffff 18%), var(--rs-home-header-button-bg));
}

.homepage-theme-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
  grid-auto-rows: max-content;
  align-items: start;
  justify-content: start;
  gap: 8px;
}

.homepage-theme-group {
  align-self: start;
  min-width: 0;
  height: max-content;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(63, 96, 126, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(227, 239, 248, 0.72), rgba(169, 191, 208, 0.5));
}

.homepage-theme-group legend {
  padding: 0 5px;
  color: #2f628f;
  font: 900 0.62rem/1 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.homepage-theme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.homepage-color-field {
  display: grid;
  grid-template-columns: minmax(78px, 0.7fr) minmax(104px, 1fr);
  align-items: center;
  column-gap: 5px;
  row-gap: 0;
  min-width: 0;
  min-height: 38px;
  padding: 4px 5px;
  border: 1px solid rgba(63, 96, 126, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(226, 237, 246, 0.86), rgba(178, 198, 215, 0.68));
}

.homepage-color-field > span:first-child {
  min-width: 0;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homepage-color-control {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.homepage-color-control input[type="color"] {
  width: 24px !important;
  min-height: 22px !important;
  padding: 2px !important;
  border-radius: 7px !important;
  cursor: pointer;
}

.homepage-color-control input[data-homepage-theme-hex] {
  width: 100% !important;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(63, 96, 126, 0.24);
  border-radius: 7px;
  color: #17324b;
  background: rgba(235, 243, 249, 0.74);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.homepage-color-field .field-hint {
  grid-column: 1 / -1;
  display: none;
  margin: -1px 0 0;
  font-size: 0.56rem;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homepage-color-control input[data-homepage-theme-hex]:focus {
  border-color: rgba(21, 128, 206, 0.62) !important;
  box-shadow: 0 0 0 4px rgba(39, 142, 218, 0.14) !important;
}

.homepage-color-control input[data-homepage-theme-hex].is-invalid {
  border-color: rgba(176, 56, 56, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(176, 56, 56, 0.12) !important;
}

@media screen {
  body.site-home {
    background:
      radial-gradient(circle at 18% 10%, rgba(18, 108, 190, 0.12), transparent 22rem),
      radial-gradient(circle at 82% 0%, rgba(6, 29, 51, 0.1), transparent 26rem),
      linear-gradient(
        155deg,
        color-mix(in srgb, var(--rs-home-page-bg) 96%, #ffffff 4%) 0%,
        var(--rs-home-page-bg) 46%,
        color-mix(in srgb, var(--rs-home-page-bg) 94%, #243a4d 6%) 100%
      ) !important;
  }

  body.site-home .top-toolbar {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-header-bg) 94%, #ffffff 6%),
        color-mix(in srgb, var(--rs-home-header-bar) 92%, var(--rs-home-header-bg) 8%)
      ) !important;
    border-bottom-color: color-mix(in srgb, var(--rs-home-header-bar) 82%, #19334a 18%) !important;
  }

  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)),
        var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))
      ),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, contain !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    border-color: rgba(186, 207, 226, 0.42) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
  }

  body.site-home .header-bottom {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-header-bar) 88%, rgba(255, 255, 255, 0.12) 12%),
        color-mix(in srgb, var(--rs-home-header-bar) 96%, rgba(255, 255, 255, 0.04) 4%)
      ) !important;
    border-color: color-mix(in srgb, var(--rs-home-header-bar) 78%, #1f4c73 22%) !important;
  }

  body.site-home :where(.content-section)::before {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-panel-bg) 96%, #ffffff 4%),
        color-mix(in srgb, var(--rs-home-panel-bg) 92%, #263746 8%)
      ),
      radial-gradient(circle at 82% 8%, rgba(20, 96, 172, 0.18), transparent 36%) !important;
  }

  body.site-home :where(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .footer-columns,
    .hero-service-list
  ) {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-panel-bg) 96%, #ffffff 4%),
        color-mix(in srgb, var(--rs-home-panel-bg) 92%, #688296 8%)
      ),
      radial-gradient(circle at 84% 12%, rgba(40, 128, 210, 0.12), transparent 34%) !important;
    border-color: color-mix(in srgb, var(--rs-home-panel-bg) 76%, #315a80 24%) !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)),
        var(--rs-home-header-tint-bottom-mobile, color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent))
      ),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
    background-position: center center, center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, contain !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  }

  .homepage-theme-groups,
  .homepage-theme-grid {
    grid-template-columns: 1fr;
  }

  .homepage-layout-options {
    grid-template-columns: 1fr;
  }

  .homepage-layout-option {
    grid-template-columns: 1fr;
  }

}

@media screen and (min-width: 681px) and (max-width: 980px) {
  .homepage-theme-groups {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media screen and (max-width: 620px) {
  .homepage-theme-groups {
    grid-template-columns: 1fr;
  }

  .homepage-color-field {
    grid-template-columns: 1fr;
  }

  .homepage-color-control {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

/* Klantportaal: compacte header zodat het bannerlogo niet als grote crop achter de klantbalk valt. */
body.portal-page--customer .site-header .header-shell.header-shell--portal {
  min-height: 0 !important;
  padding: 12px 18px 10px !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--rs-home-header-bg) 52%, transparent),
      color-mix(in srgb, var(--rs-home-header-bar) 42%, transparent)
    ),
    var(--rs-home-top-banner-image) center center / contain no-repeat !important;
}

body.portal-page--customer .site-header .header-main {
  height: 106px !important;
  min-height: 106px !important;
  max-height: 106px !important;
  align-items: center !important;
}

body.portal-page--customer .site-header .brand--banner {
  width: min(190px, 22vw) !important;
  max-width: 190px !important;
}

body.portal-page--customer .site-header .brand--banner img {
  width: 100% !important;
  max-height: 92px !important;
  object-fit: contain !important;
}

body.portal-page--customer .site-header .header-utility {
  margin: 0 auto 4px !important;
}

body.portal-page--customer .site-header .header-bottom {
  margin-top: 4px !important;
  padding-top: 8px !important;
}

@media screen and (max-width: 760px) {
  body.portal-page--customer .site-header .header-shell.header-shell--portal {
    padding: 10px !important;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--rs-home-header-bg) 54%, transparent),
        color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent)
      ),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
  }

  body.portal-page--customer .site-header .header-main {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }

  body.portal-page--customer .site-header .brand--banner {
    width: min(136px, 44vw) !important;
    max-width: 136px !important;
  }

body.portal-page--customer .site-header .brand--banner img {
    max-height: 64px !important;
  }
}

/* Laatste vangnet voor portaalmeldingen: het paneel mag nooit achter header/nav verdwijnen. */
body.portal-page .site-header,
body.portal-page .site-header .header-shell,
body.portal-page .site-header .header-shell--portal,
body.portal-page .site-header .header-utility,
body.portal-page .site-header .portal-session,
body.portal-page .site-header .portal-session__actions,
body.portal-page .site-header .portal-header-links,
body.portal-page .site-header .portal-blocked-menu {
  overflow: visible !important;
}

body.portal-page .site-header .portal-session,
body.portal-page .site-header .portal-header-links,
body.portal-page .site-header .portal-blocked-menu[open] {
  position: relative !important;
  z-index: 12000 !important;
}

body.portal-page .site-header .portal-blocked-menu[open] > .portal-blocked-menu__panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(480px, calc(100vw - 24px)) !important;
  max-height: min(72vh, 560px) !important;
  overflow: auto !important;
  z-index: 12001 !important;
}

body.portal-page .site-header .portal-blocked-menu__item {
  color: var(--ink) !important;
}

body.portal-page .site-header .portal-blocked-menu__item-copy,
body.portal-page .site-header .portal-blocked-menu__item-copy span,
body.portal-page .site-header .portal-notification-message {
  color: #2e4d69 !important;
}

body.portal-page .site-header .portal-blocked-menu__item-copy strong {
  color: #17324b !important;
}

@media screen and (max-width: 720px) {
  body.portal-page .site-header .portal-blocked-menu[open] > .portal-blocked-menu__panel {
    position: fixed !important;
    top: 76px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 96px) !important;
  }
}

/* Functionele statussen blijven signaalkleuren, los van het algemene knopthema. */
@media screen {
  body:not(.document-page):not(.document-page--print-preview) .portal-status,
  body:not(.document-page):not(.document-page--print-preview) .status-pill {
    border-width: 1px !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      0 8px 18px rgba(10, 24, 38, 0.1) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .portal-status--completed,
    .portal-status--approved,
    .portal-status--paid,
    .status-pill--completed,
    .status-pill--approved,
    .status-pill--paid
  ) {
    background:
      linear-gradient(180deg, #ecfbf3 0%, #c8efd9 100%) !important;
    border-color: #72c992 !important;
    color: #12623a !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .portal-status--planned,
    .portal-status--requested,
    .portal-status--waiting_customer,
    .portal-status--warning,
    .status-pill--planned,
    .status-pill--requested,
    .status-pill--waiting_customer,
    .status-pill--warning
  ) {
    background:
      linear-gradient(180deg, #fff8df 0%, #f3d889 100%) !important;
    border-color: #d6aa3f !important;
    color: #6f4c00 !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .portal-status--reviewed,
    .status-pill--reviewed
  ) {
    background:
      linear-gradient(180deg, #e7f7ff 0%, #bee8f6 100%) !important;
    border-color: #78bfd8 !important;
    color: #155f78 !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .portal-status--closed,
    .portal-status--cancelled,
    .portal-status--unpaid,
    .status-pill--closed,
    .status-pill--cancelled,
    .status-pill--unpaid
  ) {
    background:
      linear-gradient(180deg, #fff0ec 0%, #f3c2b8 100%) !important;
    border-color: #dd7a69 !important;
    color: #8c2419 !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .portal-status--in_progress,
    .portal-status--new,
    .status-pill--in_progress,
    .status-pill--new
  ) {
    background:
      linear-gradient(180deg, #edf6ff 0%, #cfe6fb 100%) !important;
    border-color: #88bce8 !important;
    color: #1b5f98 !important;
  }
}

/* Definitieve override: meldingen in de header blijven klikbaar, compact en boven alle lagen. */
body.portal-page .site-header .portal-blocked-menu,
body.portal-page .site-header .portal-header-notification-menu {
  position: relative !important;
  overflow: visible !important;
}

body.portal-page .site-header .portal-blocked-menu__toggle,
body.portal-page .site-header .portal-header-link--notifications {
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  overflow: visible !important;
  line-height: 1 !important;
}

body.portal-page .site-header .portal-blocked-menu__toggle > span:first-child,
body.portal-page .site-header .portal-header-link--notifications > span:first-child {
  min-width: 0 !important;
  max-width: clamp(88px, 13vw, 178px) !important;
  display: inline-flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
  line-height: 1.05 !important;
}

body.portal-page .site-header .portal-blocked-menu__toggle > span:first-child > span,
body.portal-page .site-header .portal-header-link--notifications > span:first-child > span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.portal-page .site-header .portal-blocked-menu__toggle em,
body.portal-page .site-header .portal-header-link--notifications em {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 1px !important;
  overflow: hidden !important;
  color: color-mix(in srgb, var(--rs-button-text, #17324b) 74%, #2f7eb8 26%) !important;
  font-size: 0.56rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  pointer-events: none !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body.portal-page .site-header .portal-blocked-menu__count,
body.portal-page .site-header .portal-header-link--notifications strong {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

body.portal-page .site-header .portal-blocked-menu[open] {
  z-index: 22000 !important;
}

body.portal-page .site-header .portal-blocked-menu[open] > .portal-blocked-menu__panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: clamp(78px, 7vw, 116px) !important;
  right: clamp(12px, 3vw, 42px) !important;
  left: auto !important;
  width: min(520px, calc(100vw - 24px)) !important;
  max-height: min(72vh, 560px) !important;
  overflow: auto !important;
  z-index: 99999 !important;
}

@media screen and (max-width: 980px) {
  body.portal-page .site-header .portal-blocked-menu__toggle em,
  body.portal-page .site-header .portal-header-link--notifications em {
    display: none !important;
  }
}

@media screen and (max-width: 720px) {
  body.portal-page .site-header .portal-blocked-menu[open] > .portal-blocked-menu__panel {
    position: fixed !important;
    top: 76px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 96px) !important;
  }
}


/* Laatste override voor header-meldingen: deze moet onder alle oude headerregels staan. */
body.portal-page .site-header details[data-notification-menu] > summary em {
  display: none !important;
}

body.portal-page .site-header details[data-notification-menu][open] {
  position: relative !important;
  isolation: isolate !important;
  z-index: 100000 !important;
}

body.portal-page .site-header details[data-notification-menu][open] > .portal-blocked-menu__panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: clamp(94px, 8vw, 128px) !important;
  right: clamp(14px, 3vw, 44px) !important;
  left: auto !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-height: min(74vh, 620px) !important;
  overflow: auto !important;
  z-index: 100001 !important;
  padding: 16px !important;
  border: 1px solid rgba(102, 145, 184, 0.5) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 246, 255, 0.98)) !important;
  box-shadow:
    0 28px 54px rgba(17, 42, 65, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.portal-page .site-header details[data-notification-menu] .portal-blocked-menu__list {
  max-height: none !important;
  overflow: visible !important;
}

body.portal-page .site-header details[data-notification-menu] .portal-blocked-menu__item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
}

@media screen and (max-width: 720px) {
  body.portal-page .site-header details[data-notification-menu][open] > .portal-blocked-menu__panel {
    top: 82px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 96px) !important;
  }

body.portal-page .site-header details[data-notification-menu] .portal-blocked-menu__item {
    grid-template-columns: 1fr !important;
  }
}

/* Meldingenpaneel wordt via script los boven de pagina geplaatst, zodat de header het niet kan afknippen. */
body.portal-page .portal-floating-notification-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: auto !important;
  z-index: 2147483000 !important;
  padding: 16px !important;
  border: 1px solid rgba(93, 137, 174, 0.58) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(230, 243, 252, 0.99)) !important;
  box-shadow:
    0 32px 70px rgba(12, 31, 49, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body.portal-page .portal-floating-notification-panel .portal-blocked-menu__item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body.portal-page .portal-floating-notification-panel .portal-notification-open-area {
  min-width: 0 !important;
  color: #2f526f !important;
  text-decoration: none !important;
}

body.portal-page .portal-floating-notification-panel .portal-notification-kind,
body.portal-page .portal-floating-notification-panel .portal-blocked-menu__item-copy strong {
  color: #17324b !important;
}

body.portal-page .portal-floating-notification-panel .portal-notification-message {
  color: #294a65 !important;
}

@media screen and (max-width: 720px) {
  body.portal-page .portal-floating-notification-panel .portal-blocked-menu__item {
    grid-template-columns: 1fr !important;
  }
}

/* Page editor: kleurenpalet horizontaal en compact, zonder lege verticale gaten. */
.homepage-theme-editor .homepage-theme-form {
  gap: 7px !important;
}

.homepage-theme-editor .homepage-theme-help {
  margin: 0 !important;
}

.homepage-theme-editor .homepage-layout-group {
  margin: 0 !important;
  padding: 6px !important;
}

.homepage-theme-editor .homepage-layout-options {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 5px !important;
}

.homepage-theme-editor .homepage-layout-option {
  grid-template-columns: minmax(86px, 0.75fr) minmax(96px, 1fr) !important;
  min-height: 42px !important;
  padding: 5px !important;
}

.homepage-theme-editor .homepage-layout-option__text {
  gap: 1px !important;
}

.homepage-theme-editor .homepage-layout-option__text strong {
  font-size: 0.72rem !important;
}

.homepage-theme-editor .homepage-layout-option__text small {
  font-size: 0.54rem !important;
  line-height: 1.08 !important;
}

.homepage-theme-editor .homepage-theme-groups {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  column-count: auto !important;
  column-gap: 0 !important;
}

.homepage-theme-editor .homepage-theme-group {
  display: block !important;
  flex: 1 1 250px !important;
  width: auto !important;
  min-width: 238px !important;
  max-width: 360px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  break-inside: auto !important;
  page-break-inside: auto !important;
}

.homepage-theme-editor .homepage-theme-group:has(.homepage-color-field:nth-child(6)) {
  flex-basis: 520px !important;
  max-width: 720px !important;
}

.homepage-theme-editor .homepage-theme-grid {
  display: grid !important;
  grid-template-rows: repeat(5, minmax(30px, auto)) !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(230px, 1fr) !important;
  gap: 4px 6px !important;
}

.homepage-theme-editor .homepage-color-field {
  min-height: 30px !important;
  padding: 3px 5px !important;
  grid-template-columns: minmax(82px, 0.8fr) minmax(106px, 1fr) !important;
}

.homepage-theme-editor .homepage-color-field > span:first-child {
  font-size: 0.54rem !important;
  line-height: 1 !important;
}

.homepage-theme-editor .homepage-color-control {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 4px !important;
}

.homepage-theme-editor .homepage-color-control input[type="color"] {
  width: 22px !important;
  min-width: 22px !important;
  height: 20px !important;
  min-height: 20px !important;
}

.homepage-theme-editor .homepage-color-control input[data-homepage-theme-hex] {
  min-height: 20px !important;
  height: 22px !important;
  padding: 2px 7px !important;
  font-size: 0.62rem !important;
}

.homepage-theme-editor .homepage-color-field .field-hint {
  display: none !important;
}

@media screen and (max-width: 1180px) {
  .homepage-theme-editor .homepage-theme-group,
  .homepage-theme-editor .homepage-theme-group:has(.homepage-color-field:nth-child(6)) {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: none !important;
  }
}

@media screen and (max-width: 620px) {
  .homepage-theme-editor .homepage-layout-options {
    grid-template-columns: 1fr !important;
  }

  .homepage-theme-editor .homepage-layout-option {
    grid-template-columns: 1fr !important;
  }

  .homepage-theme-editor .homepage-theme-group,
  .homepage-theme-editor .homepage-theme-group:has(.homepage-color-field:nth-child(6)) {
    flex: 1 1 100% !important;
  }

  .homepage-theme-editor .homepage-theme-grid {
    grid-template-rows: none !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
  }

  .homepage-theme-editor .homepage-color-field {
    grid-template-columns: 1fr !important;
  }
}

/* Page editor: kleurvelden echt compact, 5 regels omlaag en daarna naar rechts. */
.homepage-theme-editor .homepage-theme-groups {
  display: grid !important;
  grid-template-rows: repeat(5, minmax(30px, auto)) !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(252px, 1fr) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 5px 8px !important;
}

.homepage-theme-editor .homepage-theme-group,
.homepage-theme-editor .homepage-theme-grid {
  display: contents !important;
}

.homepage-theme-editor .homepage-theme-group legend {
  display: none !important;
}

.homepage-theme-editor .homepage-color-field {
  min-height: 30px !important;
  padding: 3px 5px !important;
  border-radius: 8px !important;
  grid-template-columns: minmax(96px, 0.72fr) minmax(116px, 1fr) !important;
}

.homepage-theme-editor .homepage-color-field > span:first-child {
  font-size: 0.54rem !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

.homepage-theme-editor .homepage-color-control {
  grid-template-columns: 22px minmax(0, 1fr) !important;
}

.homepage-theme-editor .homepage-color-control input[type="color"] {
  width: 22px !important;
  min-width: 22px !important;
  height: 20px !important;
  min-height: 20px !important;
}

.homepage-theme-editor .homepage-color-control input[data-homepage-theme-hex] {
  height: 22px !important;
  min-height: 22px !important;
  padding: 2px 7px !important;
  font-size: 0.62rem !important;
}

@media screen and (max-width: 980px) {
  .homepage-theme-editor .homepage-theme-groups {
    grid-template-rows: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
  }
}

@media screen and (max-width: 620px) {
  .homepage-theme-editor .homepage-theme-groups {
    grid-template-columns: 1fr !important;
  }

  .homepage-theme-editor .homepage-color-field {
    grid-template-columns: 1fr !important;
  }
}

/* Page editor: voorkom dat layout- en kleurvakken buiten het venster vallen. */
.homepage-theme-editor,
.homepage-theme-editor * {
  box-sizing: border-box !important;
}

.homepage-theme-editor {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.homepage-theme-editor .homepage-theme-form,
.homepage-theme-editor .homepage-layout-group,
.homepage-theme-editor .homepage-layout-options,
.homepage-theme-editor .homepage-theme-groups {
  min-width: 0 !important;
  max-width: 100% !important;
}

.homepage-theme-editor .homepage-layout-group {
  padding: 5px !important;
}

.homepage-theme-editor .homepage-layout-options {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 4px !important;
}

.homepage-theme-editor .homepage-layout-option {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 4px !important;
  grid-template-columns: minmax(50px, 0.7fr) minmax(48px, 0.9fr) !important;
  gap: 4px !important;
  overflow: hidden !important;
}

.homepage-theme-editor .homepage-layout-option__text strong {
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

.homepage-theme-editor .homepage-layout-option__text small {
  display: none !important;
}

.homepage-theme-editor .homepage-layout-preview {
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.homepage-theme-editor .homepage-layout-preview span {
  max-width: 44px !important;
  padding: 3px 5px !important;
  font-size: 0.45rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.homepage-theme-editor .homepage-layout-preview--bar,
.homepage-theme-editor .homepage-layout-preview--carbon {
  padding: 3px !important;
}

.homepage-theme-editor .homepage-layout-preview--bar span,
.homepage-theme-editor .homepage-layout-preview--carbon span {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.homepage-theme-editor .homepage-layout-preview--angled span {
  margin-left: -4px !important;
  padding-inline: 8px !important;
}

.homepage-theme-editor .homepage-theme-groups {
  grid-template-rows: repeat(5, minmax(24px, auto)) !important;
  grid-auto-columns: minmax(156px, 1fr) !important;
  gap: 4px 5px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.homepage-theme-editor .homepage-color-field {
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 2px 4px !important;
  border-radius: 7px !important;
  grid-template-columns: minmax(58px, 0.66fr) minmax(82px, 0.95fr) !important;
  gap: 3px !important;
}

.homepage-theme-editor .homepage-color-field > span:first-child {
  min-width: 0 !important;
  font-size: 0.48rem !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.homepage-theme-editor .homepage-color-control {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.homepage-theme-editor .homepage-color-control input[type="color"] {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
}

.homepage-theme-editor .homepage-color-control input[data-homepage-theme-hex] {
  min-width: 0 !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 1px 5px !important;
  font-size: 0.56rem !important;
}

@media screen and (max-width: 1360px) {
  .homepage-theme-editor .homepage-theme-groups {
    grid-template-rows: none !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
  }
}

/* Page editor: headerbeelden compact beheren. */
.site-header-media-editor {
  padding: clamp(14px, 2vw, 22px) !important;
}

.site-header-media-editor .portal-case__top {
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.site-header-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.site-header-media-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--rs-home-accent, #4f7fab) 24%, transparent 76%);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 80%, #ffffff 20%), color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 92%, #6f8798 8%));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--rs-home-heading, #13283a) 9%, transparent 91%);
}

.site-header-media-preview {
  aspect-ratio: 16 / 5;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rs-home-accent, #4f7fab) 18%, transparent 82%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 72%, #ffffff 28%);
}

.site-header-media-preview--logo {
  aspect-ratio: 16 / 6;
}

.site-header-media-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.site-header-media-preview--logo img {
  object-fit: contain;
  padding: 8px;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.32) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.32) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.32) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.32) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.site-header-media-copy h3 {
  margin: 0 0 2px;
  color: var(--rs-home-heading, #13283a);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
}

.site-header-media-copy p {
  margin: 0;
  color: var(--rs-home-muted, #5d7488);
  font-size: 0.82rem;
  line-height: 1.35;
}

.site-header-media-copy small {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rs-home-button-bg, #edf6fc) 78%, transparent 22%);
  color: var(--rs-home-button-text, #17324b);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-header-media-form,
.site-header-media-remove {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
}

.site-header-media-file {
  position: relative;
  flex: 1 1 132px;
  min-width: 0;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rs-home-button-fg, #1d72b8) 38%, #ffffff 62%);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-gloss, #ffffff) 55%, transparent 45%), transparent 48%),
    linear-gradient(180deg, var(--rs-home-button-bg, #edf6fc), color-mix(in srgb, var(--rs-home-button-bg, #edf6fc) 78%, var(--rs-home-button-fg, #1d72b8) 22%));
  color: var(--rs-home-button-text, #17324b);
  cursor: pointer;
  font-weight: 900;
}

.site-header-media-file span {
  display: grid;
  min-height: 34px;
  place-items: center;
  padding: 0 10px;
  font-size: 0.86rem;
  text-align: center;
  white-space: nowrap;
}

.site-header-media-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.site-header-media-card .button {
  min-height: 34px !important;
  padding: 0 13px !important;
  font-size: 0.82rem !important;
}

@media screen and (max-width: 980px) {
  .site-header-media-grid {
    grid-template-columns: 1fr;
  }

  .site-header-media-card {
    grid-template-rows: auto;
  }
}

/* Page editor: centrale kleurlaag over alle glasplaten. */
@media screen {
  body:not(.document-page):not(.document-page--print-preview) :where(
    .site-header .header-shell,
    .site-header .header-shell--portal,
    .hero-copy,
    .content-section,
    .portal-section,
    .portal-section-card,
    .tech-panel,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .footer-columns,
    .footer-callout__link,
    .hero-service-list,
    .contact-switcher,
    .portal-session,
    .portal-mini-note,
    .portal-detail-card,
    .portal-admin-card,
    .portal-case,
    .portal-customer-card,
    .portal-auth-card,
    .booking-card,
    .appointment-card
  ) {
    border-color: var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(
    .top-toolbar,
    .header-bottom,
    .portal-trigger,
    .portal-blocked-menu__toggle,
    .portal-status,
    .status-pill,
    input,
    select,
    textarea
  ) {
    border-color: var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  }

  body:not(.document-page):not(.document-page--print-preview) :where(.content-section, .portal-section)::before {
    border-color: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-strong, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(180deg, rgba(22, 33, 45, 0.18), rgba(185, 199, 213, 0.05)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.08), transparent 34%) !important;
  }

  body.site-home .hero-copy::before,
  body.site-home .hero-copy:hover::before,
  body.site-home .hero-copy:focus-within::before {
    background:
      linear-gradient(
        120deg,
        var(--rs-home-glass-tint-mid, transparent),
        transparent 46%,
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(91, 130, 164, 0.08)),
      linear-gradient(90deg, rgba(225, 234, 243, 0.04) 0%, rgba(213, 226, 238, 0.08) 34%, rgba(231, 239, 247, 0.2) 67%, rgba(235, 243, 250, 0.24) 100%) !important;
    opacity: 1 !important;
  }
}

/* Homepage bladen: meer ademruimte en dezelfde dubbele glasplaat als de lagere secties. */
@media screen {
  body.site-home .site-header {
    margin-bottom: clamp(28px, 3.4vw, 54px) !important;
  }

  body.site-home .hero-section {
    padding-top: clamp(28px, 3vw, 48px) !important;
    padding-bottom: clamp(46px, 5vw, 82px) !important;
  }

  body.site-home .hero-section + .content-section,
  body.site-home .content-section + .content-section {
    margin-top: clamp(44px, 4.4vw, 78px) !important;
  }

  body.site-home .content-section {
    margin-bottom: clamp(42px, 4vw, 70px) !important;
  }

  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within,
  body.site-home .hero-copy,
  body.site-home .hero-copy:hover,
  body.site-home .hero-copy:focus-within {
    overflow: visible !important;
    isolation: isolate;
  }

  body.site-home .site-header .header-shell::before,
  body.site-home .site-header .header-shell:hover::before,
  body.site-home .site-header .header-shell:focus-within::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px -22px -24px !important;
    z-index: -1 !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-strong, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  body.site-home .hero-copy::after,
  body.site-home .hero-copy:hover::after,
  body.site-home .hero-copy:focus-within::after {
    content: "" !important;
    position: absolute !important;
    inset: 16px -22px -24px !important;
    z-index: -1 !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-strong, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .site-header {
    margin-bottom: 26px !important;
  }

  body.site-home .hero-section {
    padding-top: 22px !important;
    padding-bottom: 42px !important;
  }

  body.site-home .hero-section + .content-section,
  body.site-home .content-section + .content-section {
    margin-top: 38px !important;
  }
}

/* Tweede header: de fotolaag zelf afronden, terwijl de glasplaat buiten mag blijven steken. */
body.site-home .hero-copy,
body.site-home .hero-copy:hover,
body.site-home .hero-copy:focus-within {
  background:
    linear-gradient(
      180deg,
      rgba(232, 241, 248, 0.18),
      rgba(141, 160, 176, 0.12)
    ),
    linear-gradient(
      180deg,
      var(--rs-home-hero-tint-top, transparent),
      var(--rs-home-hero-tint-bottom, transparent)
    ) !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
}

body.site-home .hero-photo-bg {
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  clip-path: inset(0 round 30px) !important;
  background: var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
  opacity: 1 !important;
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy,
  body.site-home .hero-copy:hover,
  body.site-home .hero-copy:focus-within {
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.2),
        rgba(141, 160, 176, 0.14)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-hero-tint-top, transparent),
        var(--rs-home-hero-tint-bottom-mobile, transparent)
      ) !important;
    background-position: center center, center center !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  body.site-home .hero-photo-bg {
    clip-path: inset(0 round 24px) !important;
    background: var(--rs-home-bottom-banner-image) center top / cover no-repeat !important;
  }
}

/* Tweede header: geen scherpe hoekdecoratie en geen mouse-over op de banner zelf. */
body.site-home .hero-copy .panel-corners {
  display: none !important;
}

body.site-home .hero-copy,
body.site-home .hero-copy:hover,
body.site-home .hero-copy:focus,
body.site-home .hero-copy:focus-within,
body.site-home .hero-copy::before,
body.site-home .hero-copy:hover::before,
body.site-home .hero-copy:focus-within::before,
body.site-home .hero-copy::after,
body.site-home .hero-copy:hover::after,
body.site-home .hero-copy:focus-within::after,
body.site-home .hero-photo-bg {
  transform: none !important;
  transition: none !important;
}

body.site-home .hero-copy:hover .section-kicker,
body.site-home .hero-copy:hover .hero-intro,
body.site-home .hero-copy:hover h1,
body.site-home .hero-copy:hover .hero-text {
  color: inherit !important;
}

/* Tweede header definitief: paneel zelf rond knippen, geen losse scherpe backplate en geen hoverstate. */
body.site-home .hero-copy,
body.site-home .hero-copy:hover,
body.site-home .hero-copy:focus,
body.site-home .hero-copy:focus-within {
  overflow: hidden !important;
  border-radius: 30px !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  border-color: rgba(186, 207, 226, 0.42) !important;
  box-shadow:
    0 0 0 18px var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)),
    0 0 0 19px color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%),
    0 30px 70px rgba(7, 13, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
}

body.site-home .hero-copy::after,
body.site-home .hero-copy:hover::after,
body.site-home .hero-copy:focus-within::after {
  content: none !important;
  display: none !important;
}

body.site-home .hero-copy::before,
body.site-home .hero-copy:hover::before,
body.site-home .hero-copy:focus-within::before,
body.site-home .hero-photo-bg {
  border-radius: inherit !important;
  clip-path: inset(0 0 0 0 round 30px) !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

body.site-home .hero-copy:hover h1 {
  color: #173a62 !important;
}

body.site-home .hero-copy:hover .hero-text,
body.site-home .hero-copy:hover .hero-intro {
  color: #314f69 !important;
}

body.site-home .hero-copy:hover .section-kicker {
  color: var(--rs-home-accent, #4f7fab) !important;
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy,
  body.site-home .hero-copy:hover,
  body.site-home .hero-copy:focus,
  body.site-home .hero-copy:focus-within {
    border-radius: 24px !important;
  }

  body.site-home .hero-copy::before,
  body.site-home .hero-copy:hover::before,
  body.site-home .hero-copy:focus-within::before,
  body.site-home .hero-photo-bg {
    clip-path: inset(0 0 0 0 round 24px) !important;
  }
}

/* Tweede banner: geen tilt/hover, heldere foto, glas alleen als rand en achterplaat. */
body.site-home .hero-copy.tech-panel,
body.site-home .hero-copy.tech-panel:hover,
body.site-home .hero-copy.tech-panel:focus,
body.site-home .hero-copy.tech-panel:focus-within,
body.site-home .hero-copy[data-tilt],
body.site-home .hero-copy[data-tilt]:hover,
body.site-home .hero-copy[data-tilt]:focus-within {
  overflow: visible !important;
  border: 1px solid rgba(226, 241, 253, 0.78) !important;
  border-top-color: rgba(244, 251, 255, 0.9) !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow:
    0 26px 58px rgba(7, 13, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(18, 34, 50, 0.08) !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

body.site-home .hero-copy.tech-panel::before,
body.site-home .hero-copy.tech-panel:hover::before,
body.site-home .hero-copy.tech-panel:focus-within::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  border: 1px solid rgba(238, 249, 255, 0.7) !important;
  background: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(105, 160, 208, 0.1) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  pointer-events: none !important;
}

body.site-home .hero-copy.tech-panel::after,
body.site-home .hero-copy.tech-panel:hover::after,
body.site-home .hero-copy.tech-panel:focus-within::after {
  content: "" !important;
  position: absolute !important;
  inset: 14px -18px -20px !important;
  z-index: -1 !important;
  display: block !important;
  border: 1px solid rgba(220, 238, 251, 0.46) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 5%, transparent),
      color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 2%, transparent)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(70, 95, 116, 0.08)) !important;
  box-shadow: 0 30px 70px rgba(7, 13, 22, 0.18) !important;
  opacity: 0.78 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  pointer-events: none !important;
}

body.site-home .hero-copy.tech-panel .hero-photo-bg {
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  clip-path: inset(0 round 30px) !important;
  background: var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  pointer-events: none !important;
}

body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
  position: relative !important;
  z-index: 2 !important;
}

body.site-home .hero-copy.tech-panel .panel-corners {
  display: none !important;
}

body.site-home .hero-copy.tech-panel:hover,
body.site-home .hero-copy.tech-panel:hover *:not(a):not(button):not(.button):not(.button-primary):not(.button-secondary) {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    border-radius: 24px !important;
  }

  body.site-home .hero-copy.tech-panel .hero-photo-bg {
    clip-path: inset(0 round 24px) !important;
    background: var(--rs-home-bottom-banner-image) center top / cover no-repeat !important;
  }
}

/* Glas-tint voor de rest van de voorpagina: op de voorkant van het glas, niet achter de plaat. */
@media screen {
  body.site-home :where(.content-section, .portal-section) {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  body.site-home :where(.content-section, .portal-section)::before {
    z-index: -1 !important;
    background:
      linear-gradient(180deg, rgba(22, 33, 45, 0.18), rgba(185, 199, 213, 0.05)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.08), transparent 34%) !important;
  }

  body.site-home :where(.content-section, .portal-section)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-mid, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -1px 0 rgba(18, 34, 50, 0.08) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body.site-home :where(.content-section, .portal-section) > * {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home :where(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .footer-columns,
    .hero-service-list,
    .contact-switcher
  ) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  body.site-home :where(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .footer-columns,
    .hero-service-list,
    .contact-switcher
  )::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-mid, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 40%, rgba(60, 98, 132, 0.06)) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: none !important;
  }

  body.site-home :where(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .footer-columns,
    .hero-service-list,
    .contact-switcher
  ) > * {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home :where(.hero-copy, .site-header .header-shell)::after {
    /* Deze twee hebben hun eigen glaslaag; niet door de algemene laag laten veranderen. */
  }
}

@media screen and (max-width: 680px) {
  body.site-home :where(.content-section, .portal-section)::after {
    border-radius: inherit !important;
  }
}

/* Win van oudere sectie-backplates: tint hoort voorop, achterplaat blijft neutraal. */
@media screen {
  body.site-home .content-section::before,
  body.site-home .portal-section::before,
  body.site-home .content-section:hover::before,
  body.site-home .portal-section:hover::before,
  body.site-home .content-section:focus-within::before,
  body.site-home .portal-section:focus-within::before {
    z-index: -1 !important;
    background:
      linear-gradient(180deg, rgba(22, 33, 45, 0.18), rgba(185, 199, 213, 0.05)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.08), transparent 34%) !important;
  }

  body.site-home .content-section::after,
  body.site-home .portal-section::after,
  body.site-home .content-section:hover::after,
  body.site-home .portal-section:hover::after,
  body.site-home .content-section:focus-within::after,
  body.site-home .portal-section:focus-within::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-mid, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    pointer-events: none !important;
  }

  body.site-home .content-section > *,
  body.site-home .portal-section > * {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Tweede header volgt weer dezelfde glas-tintkleur als de rest, zonder mouse-over terug te brengen. */
@media screen {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    isolation: isolate !important;
    background: transparent !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel::before,
  body.site-home .hero-copy.tech-panel:hover::before,
  body.site-home .hero-copy.tech-panel:focus-within::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    border: 1px solid rgba(238, 249, 255, 0.64) !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-strong, transparent),
        var(--rs-home-glass-tint-mid, transparent)
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 0 0 1px rgba(105, 160, 208, 0.1) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    pointer-events: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-photo-bg {
    z-index: 0 !important;
  }

  body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Hero tekstvak: gewone inhoudskaart, zonder clipping door de algemene glaslaag. */
@media screen {
  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    position: relative !important;
    z-index: 2 !important;
    isolation: auto !important;
    display: grid !important;
    gap: 8px !important;
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 12px 14px !important;
    overflow: visible !important;
    border: 1px solid rgba(42, 108, 174, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(246, 251, 255, 0.72) !important;
    box-shadow: 0 14px 28px rgba(33, 70, 104, 0.08) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: #213c57 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list::before,
  body.site-home .hero-copy.tech-panel .hero-service-list::after,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover::before,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover::after,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::before,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after {
    content: none !important;
    display: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list > * {
    position: relative !important;
    z-index: 1 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list strong {
    color: #173a62 !important;
    font-size: 0.94rem !important;
    line-height: 1.28 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list ul {
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list li {
    position: relative !important;
    padding-left: 16px !important;
    color: #213c57 !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    text-shadow: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.58em !important;
    width: 7px !important;
    height: 7px !important;
    display: block !important;
    border-radius: 50% !important;
    background: #2f7ed8 !important;
    box-shadow: 0 0 0 4px rgba(47, 126, 216, 0.12) !important;
  }
}

@media screen and (min-width: 681px) {
  body.site-home .hero-copy.tech-panel .hero-service-list {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy.tech-panel .hero-service-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Extra borging: het servicekader moet alle regels binnen de achtergrond houden. */
@media screen {
  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    box-sizing: border-box !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    min-height: calc(6.8em + 64px) !important;
    padding: 14px 20px 26px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
}

/* Page editor: compacte bewerking voor Werkwijze en FAQ. */
@media screen {
  .homepage-section-quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .homepage-section-quicklinks .button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.03em !important;
  }

  .homepage-section-core {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(120px, 0.32fr) minmax(220px, 0.8fr) minmax(220px, 1fr);
    gap: 8px;
  }

  .homepage-section-editor--compact-items {
    gap: 10px !important;
    padding: 12px !important;
    scroll-margin-top: 18px;
  }

  .homepage-section-editor--compact-items .panel-corners {
    display: none !important;
  }

  .homepage-section-editor--compact-items legend {
    max-width: 100%;
    padding: 0 5px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .homepage-section-editor--compact-items .homepage-section-items {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .homepage-section-editor--compact-items .homepage-section-item-editor {
    grid-template-columns: 56px minmax(180px, 0.78fr) minmax(240px, 1fr) !important;
    align-items: end;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(236, 246, 253, 0.42) !important;
  }

  .homepage-section-editor--compact-items .homepage-section-item-editor .field-full {
    grid-column: auto !important;
  }

  .homepage-section-editor--compact-items .field {
    gap: 4px !important;
  }

  .homepage-section-editor--compact-items .field span {
    font-size: 0.62rem !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
  }

  .homepage-section-editor--compact-items input,
  .homepage-section-editor--compact-items textarea {
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  .homepage-section-editor--compact-items textarea {
    resize: vertical;
    overflow: auto !important;
  }
}

@media screen and (max-width: 860px) {
  .homepage-section-core,
  .homepage-section-editor--compact-items .homepage-section-item-editor {
    grid-template-columns: 1fr !important;
  }

  .homepage-section-editor--compact-items .homepage-section-item-editor .field-full {
    grid-column: 1 / -1 !important;
  }
}

/* Tweede header: duidelijkere dubbele glasrand zoals de top en de lagere platen. */
@media screen {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    border: 1px solid rgba(246, 252, 255, 0.9) !important;
    box-shadow:
      0 0 0 1px rgba(43, 82, 112, 0.28),
      0 0 0 12px color-mix(in srgb, var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)) 72%, rgba(238, 249, 255, 0.22) 28%),
      0 0 0 13px rgba(232, 247, 255, 0.58),
      0 0 0 14px rgba(43, 82, 112, 0.22),
      0 30px 70px rgba(7, 13, 22, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(18, 34, 50, 0.16),
      inset 0 0 0 1px rgba(74, 132, 182, 0.18) !important;
  }

  body.site-home .hero-copy.tech-panel::before,
  body.site-home .hero-copy.tech-panel:hover::before,
  body.site-home .hero-copy.tech-panel:focus-within::before {
    border: 2px solid rgba(242, 250, 255, 0.68) !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-mid, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%, rgba(40, 86, 126, 0.1)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(54, 113, 164, 0.2),
      inset 0 -18px 32px rgba(22, 45, 66, 0.1) !important;
  }
}

/* Reset 2de header: rustige glasplaat met de juiste bottom-banner foto. */
@media screen {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    overflow: hidden !important;
    border: 1px solid rgba(232, 247, 255, 0.76) !important;
    border-radius: 30px !important;
    background: transparent !important;
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)) 62%, transparent),
      0 0 0 9px rgba(238, 249, 255, 0.34),
      0 24px 58px rgba(7, 13, 22, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-photo-bg {
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    clip-path: inset(0 round 30px) !important;
    background: url("assets/rs-home-bottom-banner.png?v=20260517-header-bg-align-01") center center / cover no-repeat !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel::before,
  body.site-home .hero-copy.tech-panel:hover::before,
  body.site-home .hero-copy.tech-panel:focus-within::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border: 1px solid rgba(248, 253, 255, 0.5) !important;
    border-radius: inherit !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-mid, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(40, 86, 126, 0.06)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      inset 0 0 0 1px rgba(74, 132, 182, 0.1) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel::after,
  body.site-home .hero-copy.tech-panel:hover::after,
  body.site-home .hero-copy.tech-panel:focus-within::after {
    content: none !important;
    display: none !important;
  }

  body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy.tech-panel .hero-photo-bg {
    clip-path: inset(0 round 24px) !important;
    background: url("assets/rs-home-bottom-banner.png?v=20260517-header-bg-align-01") center top / cover no-repeat !important;
  }
}

/* Definitief: 2de banner krijgt dezelfde glas- en achtergrondbehandeling als de topheader. */
@media screen {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    height: clamp(360px, 36vw, 455px) !important;
    min-height: clamp(360px, 36vw, 455px) !important;
    max-height: clamp(360px, 36vw, 455px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(186, 207, 226, 0.42) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-hero-tint-top, transparent),
        var(--rs-home-hero-tint-bottom, transparent)
      ),
      var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, contain !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-photo-bg {
    display: none !important;
  }

  body.site-home .hero-copy.tech-panel::before,
  body.site-home .hero-copy.tech-panel:hover::before,
  body.site-home .hero-copy.tech-panel:focus-within::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border: 0 !important;
    border-radius: inherit !important;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(91, 130, 164, 0.08)),
      linear-gradient(90deg, rgba(225, 234, 243, 0.04) 0%, rgba(213, 226, 238, 0.08) 34%, rgba(231, 239, 247, 0.2) 67%, rgba(235, 243, 250, 0.24) 100%) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel::after,
  body.site-home .hero-copy.tech-panel:hover::after,
  body.site-home .hero-copy.tech-panel:focus-within::after {
    content: none !important;
    display: none !important;
  }

  body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-hero-tint-top, transparent),
        var(--rs-home-hero-tint-bottom-mobile, transparent)
      ),
      var(--rs-home-bottom-banner-image) center top / cover no-repeat !important;
    background-size: 100% 100%, 100% 100%, cover !important;
  }
}

/* FINAL: het middelste servicekader mag nooit tekst afsnijden. */
@media screen {
  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    height: auto !important;
    min-height: 166px !important;
    max-height: none !important;
    padding: 14px 18px 22px !important;
    overflow: visible !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list ul {
    gap: 6px !important;
  }
}

/* WINNING LAST: gelijke glasstijl en hover voor header 1, header 2 en alle grote glasplaten. */
@media screen {
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 1px solid rgba(186, 207, 226, 0.42) !important;
    border-radius: 24px !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    transform: none !important;
    filter: none !important;
    transition:
      background-position 620ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      filter 220ms ease !important;
  }

  body.site-home .site-header .header-shell {
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
    background-position: -160% 0, center center, center center, center center !important;
    background-size: 76% 100%, 100% 100%, 100% 100%, contain !important;
  }

  body.site-home .hero-copy.tech-panel {
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))),
      var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
    background-position: -160% 0, center center, center center, center center !important;
    background-size: 76% 100%, 100% 100%, 100% 100%, contain !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel) {
    background:
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)),
      color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent) !important;
  }

  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px -22px -24px !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: border-color 220ms ease, box-shadow 220ms ease !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    height: auto !important;
    border: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important;
    transition: background-position 620ms ease, box-shadow 220ms ease !important;
  }

  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > * {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list {
    z-index: 3 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover,
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within {
    background-position: -160% 0, center center, center center, center center !important;
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.06) brightness(1.03) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 30px 76px rgba(7, 13, 22, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.06) brightness(1.03) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 30px 76px rgba(7, 13, 22, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    background-position: 185% 0, 0 0, 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important;
  }
}

/* Alleen header 1 en 2: echte glas-hover op de voorgrond, zonder de rest aan te raken. */
@media screen {
  body.site-home .site-header .header-shell > .panel-corners,
  body.site-home .hero-copy.tech-panel > .panel-corners {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: inherit !important;
    clip-path: inset(0 round 24px) !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important;
    transform: none !important;
    transition: background-position 620ms ease, box-shadow 220ms ease, opacity 220ms ease !important;
  }

  body.site-home .site-header .header-shell > :not(.panel-corners),
  body.site-home .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list {
    z-index: 3 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus-within {
    background-position: -160% 0, center center, center center, center center !important;
  }

  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus-within {
    background-position: -160% 0, center center, center center, center center !important;
  }

  body.site-home .site-header .header-shell:hover > .panel-corners,
  body.site-home .site-header .header-shell:focus-within > .panel-corners,
  body.site-home .hero-copy.tech-panel:hover > .panel-corners,
  body.site-home .hero-copy.tech-panel:focus-within > .panel-corners {
    background-position: 185% 0, 0 0, 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important;
  }
}

/* FINAL glasstijl: header 1 en 2 zijn de basis voor alle grote glasplaten. */
@media screen {
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ) {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 1px solid rgba(186, 207, 226, 0.42) !important;
    border-radius: 24px !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    transform: none !important;
    transition:
      background-position 620ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      filter 220ms ease !important;
  }

  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ) {
    background:
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)),
      color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent) !important;
  }

  body.site-home .site-header .header-shell {
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
    background-position: -160% 0, center center, center center, center center !important;
    background-size: 76% 100%, 100% 100%, 100% 100%, contain !important;
  }

  body.site-home .hero-copy.tech-panel {
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))),
      var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
    background-position: -160% 0, center center, center center, center center !important;
    background-size: 76% 100%, 100% 100%, 100% 100%, contain !important;
  }

  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  )::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px -22px -24px !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    transition:
      border-color 220ms ease,
      box-shadow 220ms ease,
      opacity 220ms ease !important;
  }

  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  )::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    height: auto !important;
    border: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important;
    transition:
      background-position 620ms ease,
      opacity 220ms ease,
      box-shadow 220ms ease !important;
  }

  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ) > * {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list {
    z-index: 3 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover,
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within {
    background-position: -160% 0, center center, center center, center center !important;
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.06) brightness(1.03) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 30px 76px rgba(7, 13, 22, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.06) brightness(1.03) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 30px 76px rgba(7, 13, 22, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    background-position: 185% 0, 0 0, 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important;
  }

  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):hover::before,
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):focus-within::before {
    border-color: rgba(238, 249, 255, 0.58) !important;
    box-shadow: 0 34px 82px rgba(7, 13, 22, 0.28) !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .site-header .header-shell {
    background-size: 76% 100%, 100% 100%, 100% 100%, cover !important;
  }

  body.site-home .hero-copy.tech-panel {
    background-size: 76% 100%, 100% 100%, 100% 100%, cover !important;
  }
}

/* Laatste borging voor het middelste tekstkader: alle regels blijven zichtbaar. */
@media screen {
  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    height: auto !important;
    min-height: 166px !important;
    max-height: none !important;
    padding: 14px 18px 22px !important;
    overflow: visible !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list ul {
    gap: 6px !important;
  }
}

/* Footer glasplaat en spiegel-hover voor de glasblokken. */
@media screen {
  body.site-home .footer-columns.tech-panel {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.44)) 66%, transparent 34%) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, rgba(233, 244, 252, 0.34)), var(--rs-home-glass-tint-soft, rgba(128, 154, 176, 0.2))),
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 42%, rgba(54, 93, 124, 0.1)) !important;
    box-shadow:
      0 30px 72px rgba(7, 13, 22, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(20, 38, 56, 0.12) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
  }

  body.site-home .footer-columns.tech-panel > * {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home :where(
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  body.site-home :where(
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  )::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 0.92 !important;
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important;
    transform: none !important;
    filter: none !important;
    transition:
      background-position 620ms ease,
      opacity 220ms ease,
      box-shadow 220ms ease !important;
  }

  body.site-home :where(
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ) > * {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.site-home :where(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ) {
    transition:
      border-color 220ms ease,
      box-shadow 220ms ease,
      filter 220ms ease !important;
  }

  body.site-home :where(
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ):hover::after,
  body.site-home :where(
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ):focus-within::after {
    background-position: 185% 0, 0 0, 0 0 !important;
    opacity: 1 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important;
  }

  body.site-home :where(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ):hover,
  body.site-home :where(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns,
    .footer-callout__link
  ):focus-within {
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.05) brightness(1.025);
  }
}

/* 2de banner inhoud: tekst blijft leesbaar op dezelfde donkere/neutrale headerachtergrond. */
@media screen {
  body.site-home .hero-copy.tech-panel h1,
  body.site-home .hero-copy.tech-panel:hover h1 {
    color: #eef8ff !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18),
      0 2px 6px rgba(0, 0, 0, 0.72),
      0 12px 28px rgba(0, 0, 0, 0.48) !important;
  }

  body.site-home .hero-copy.tech-panel .hero-text,
  body.site-home .hero-copy.tech-panel .hero-install-note,
  body.site-home .hero-copy.tech-panel .hero-availability-note,
  body.site-home .hero-copy.tech-panel:hover .hero-text,
  body.site-home .hero-copy.tech-panel:hover .hero-install-note,
  body.site-home .hero-copy.tech-panel:hover .hero-availability-note {
    color: #d9ebf7 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12),
      0 2px 5px rgba(0, 0, 0, 0.72),
      0 10px 22px rgba(0, 0, 0, 0.42) !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    background: rgba(236, 246, 253, 0.84) !important;
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }
}

/* 2de banner inhoud compacter houden binnen het venster. */
@media screen and (min-width: 681px) {
  body.site-home .hero-copy.tech-panel {
    padding-inline: clamp(30px, 5vw, 72px) !important;
  }

  body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: clamp(18px, 4.8vw, 82px) !important;
  }

  body.site-home .hero-copy.tech-panel h1,
  body.site-home .hero-copy.tech-panel .hero-text,
  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-install-note,
  body.site-home .hero-copy.tech-panel .hero-actions,
  body.site-home .hero-copy.tech-panel .hero-availability-note {
    width: 100% !important;
    max-width: 520px !important;
  }

  body.site-home .hero-copy.tech-panel h1 {
    font-size: clamp(1.24rem, 1.28vw, 1.54rem) !important;
    line-height: 1.1 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    min-height: 0 !important;
    padding: 12px 16px 16px !important;
  }

  body.site-home .hero-copy.tech-panel .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.site-home .hero-copy.tech-panel .hero-actions .top-direct-contact {
    min-width: 0 !important;
    padding-inline: 12px !important;
  }
}

/* Match 2de header exact met de topheader: zelfde glas, radius, tint en randgedrag. */
@media screen {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    height: clamp(360px, 36vw, 455px) !important;
    min-height: clamp(360px, 36vw, 455px) !important;
    max-height: clamp(360px, 36vw, 455px) !important;
    overflow: visible !important;
    isolation: isolate !important;
    border: 1px solid rgba(186, 207, 226, 0.42) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)),
        var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))
      ),
      var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, contain !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel .hero-photo-bg {
    display: none !important;
  }

  body.site-home .hero-copy.tech-panel::before,
  body.site-home .hero-copy.tech-panel:hover::before,
  body.site-home .hero-copy.tech-panel:focus-within::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px -22px -24px !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(
        180deg,
        var(--rs-home-glass-tint-strong, transparent),
        var(--rs-home-glass-tint-soft, transparent)
      ),
      linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel::after,
  body.site-home .hero-copy.tech-panel:hover::after,
  body.site-home .hero-copy.tech-panel:focus-within::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 24px 0 !important;
    z-index: 1 !important;
    display: block !important;
    height: 3px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(95, 165, 226, 0.18), rgba(68, 145, 214, 0.82), rgba(95, 165, 226, 0.18), transparent) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus,
  body.site-home .hero-copy.tech-panel:focus-within {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 24px !important;
    background:
      linear-gradient(
        180deg,
        rgba(232, 241, 248, 0.28),
        rgba(141, 160, 176, 0.18)
      ),
      linear-gradient(
        180deg,
        var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)),
        var(--rs-home-header-tint-bottom-mobile, color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent))
      ),
      var(--rs-home-bottom-banner-image) center top / cover no-repeat !important;
    background-size: 100% 100%, 100% 100%, cover !important;
  }
}

/* FINAL EOF: het middelste servicekader mag nooit tekst afsnijden. */
@media screen {
  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    height: auto !important;
    min-height: 166px !important;
    max-height: none !important;
    padding: 14px 18px 22px !important;
    overflow: visible !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list ul {
    gap: 6px !important;
  }
}

/* ABSOLUTE LAST: deze wint over alle oudere glasregels. */
@media screen {
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 1px solid rgba(186, 207, 226, 0.42) !important;
    border-radius: 24px !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 24px 60px rgba(11, 21, 34, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    transform: none !important;
    filter: none !important;
    transition: background-position 620ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
  }

  body.site-home .site-header .header-shell {
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))),
      var(--rs-home-top-banner-image) center center / contain no-repeat !important;
    background-position: -160% 0, center center, center center, center center !important;
    background-size: 76% 100%, 100% 100%, 100% 100%, contain !important;
  }

  body.site-home .hero-copy.tech-panel {
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))),
      var(--rs-home-bottom-banner-image) center center / contain no-repeat !important;
    background-position: -160% 0, center center, center center, center center !important;
    background-size: 76% 100%, 100% 100%, 100% 100%, contain !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel) {
    background:
      linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)),
      color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent) !important;
  }

  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px -22px -24px !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)),
      radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: border-color 220ms ease, box-shadow 220ms ease !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    height: auto !important;
    border: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important;
    transition: background-position 620ms ease, box-shadow 220ms ease !important;
  }

  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > * {
    position: relative !important;
    z-index: 2 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list {
    z-index: 3 !important;
  }

  body.site-home .site-header .header-shell > .panel-corners,
  body.site-home .hero-copy.tech-panel > .panel-corners {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: inherit !important;
    clip-path: inset(0 round 24px) !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
      linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat,
      linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important;
    transform: none !important;
    transition: background-position 620ms ease, box-shadow 220ms ease, opacity 220ms ease !important;
  }

  body.site-home .hero-copy.tech-panel > .panel-corners::before,
  body.site-home .hero-copy.tech-panel > .panel-corners::after {
    content: none !important;
    display: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover,
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within {
    background-position: -160% 0, center center, center center, center center !important;
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.06) brightness(1.03) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 30px 76px rgba(7, 13, 22, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: rgba(238, 249, 255, 0.74) !important;
    filter: saturate(1.06) brightness(1.03) !important;
    box-shadow:
      inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent),
      0 30px 76px rgba(7, 13, 22, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important;
  }

  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    background-position: 185% 0, 0 0, 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important;
  }

  body.site-home .site-header .header-shell:hover > .panel-corners,
  body.site-home .site-header .header-shell:focus-within > .panel-corners,
  body.site-home .hero-copy.tech-panel:hover > .panel-corners,
  body.site-home .hero-copy.tech-panel:focus-within > .panel-corners {
    background-position: 185% 0, 0 0, 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important;
  }
}

/* Alleen 2e header: aparte spiegelstreep, los van background-position conflicten. */
@keyframes rs-hero-header-sheen-swipe-ltr {
  0% {
    opacity: 0;
    transform: translateX(-120%) skewX(-10deg);
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(120%) skewX(-10deg);
  }
}

body.site-home .hero-copy.tech-panel > .panel-corners,
body.site-home .hero-copy.tech-panel:hover > .panel-corners,
body.site-home .hero-copy.tech-panel:focus-within > .panel-corners {
  animation: none !important;
  background-position: -160% 0, 0 0, 0 0 !important;
}

body.site-home .hero-copy.tech-panel > .panel-corners::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -8% -42% !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.16) 54%,
    transparent 60%,
    transparent 100%
  ) !important;
  box-shadow: none !important;
  transform: translateX(-120%) skewX(-10deg);
  animation: none !important;
  transition: none !important;
}

body.site-home .hero-copy.tech-panel > .panel-corners::after {
  content: none !important;
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.site-home .hero-copy.tech-panel:hover > .panel-corners::before,
  body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::before {
    animation: rs-hero-header-sheen-swipe-ltr 720ms ease both !important;
  }
}

/* RS consistency layer: meer rust, vaste spacing en een strakker component-systeem. */
@media screen {
  body.site-home {
    --rs-pro-page-width: 1220px;
    --rs-pro-section-gap: clamp(50px, 5.2vw, 86px);
    --rs-pro-card-gap: clamp(12px, 1.4vw, 18px);
    --rs-pro-section-radius: 24px;
    --rs-pro-card-radius: 18px;
    --rs-pro-button-radius: 14px;
    --rs-pro-card-shadow: 0 16px 34px rgba(9, 18, 30, 0.16);
    --rs-pro-card-shadow-hover: 0 20px 44px rgba(9, 18, 30, 0.2);
  }

  body.site-home .hero-section + .content-section,
  body.site-home .content-section + .content-section {
    margin-top: var(--rs-pro-section-gap) !important;
  }

  body.site-home .content-section {
    width: min(calc(100% - clamp(28px, 5vw, 72px)), var(--rs-pro-page-width)) !important;
    padding: clamp(26px, 3.2vw, 42px) !important;
    border-radius: var(--rs-pro-section-radius) !important;
  }

  body.site-home .section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr) !important;
    align-items: end !important;
    gap: clamp(14px, 2.2vw, 30px) !important;
    margin-bottom: clamp(18px, 2.4vw, 30px) !important;
  }

  body.site-home .section-heading .section-kicker {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  body.site-home .section-heading h2,
  body.site-home .contact-copy h2 {
    max-width: 18ch !important;
    margin: 0 !important;
    font-size: clamp(1.72rem, 1.22rem + 1.55vw, 3rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  body.site-home .section-heading > p:not(.section-kicker),
  body.site-home .contact-copy > p,
  body.site-home .appointment-intro {
    max-width: 54ch !important;
    margin: 0 !important;
    color: var(--rs-home-muted, var(--muted)) !important;
    font-size: clamp(0.94rem, 0.9rem + 0.18vw, 1.04rem) !important;
    line-height: 1.55 !important;
  }

  body.site-home :is(.section-kicker, .card-code, .project-label) {
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    opacity: 0.86 !important;
  }

  body.site-home .hero-copy.tech-panel h1 {
    max-width: 520px !important;
    margin-bottom: 14px !important;
    font-size: clamp(1.42rem, 1.1rem + 1.05vw, 1.82rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-text,
  body.site-home .hero-copy.tech-panel .hero-install-note,
  body.site-home .hero-copy.tech-panel .hero-availability-note {
    font-size: clamp(0.92rem, 0.86rem + 0.18vw, 1rem) !important;
    line-height: 1.45 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    height: auto !important;
    min-height: 146px !important;
    padding: 12px 18px 14px !important;
    border-radius: 16px !important;
    background: rgba(236, 246, 253, 0.74) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list ul {
    gap: 5px !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list li {
    font-size: clamp(0.92rem, 0.88rem + 0.16vw, 1rem) !important;
    line-height: 1.18 !important;
  }

  body.site-home :is(
    .homepage-media-strip,
    .project-grid,
    .process-grid,
    .service-grid,
    .product-showroom__grid,
    .faq-list
  ) {
    gap: var(--rs-pro-card-gap) !important;
  }

  body.site-home :is(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher
  ) {
    border-radius: var(--rs-pro-card-radius) !important;
    box-shadow: var(--rs-pro-card-shadow) !important;
  }

  body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) {
    padding: clamp(14px, 1.45vw, 18px) !important;
  }

  body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) h3 {
    margin: 0 0 7px !important;
    font-size: clamp(1rem, 0.94rem + 0.24vw, 1.18rem) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) p {
    font-size: clamp(0.86rem, 0.82rem + 0.12vw, 0.94rem) !important;
    line-height: 1.45 !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .project-media,
  body.site-home .product-card__visual {
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  body.site-home .faq-item summary {
    padding: 16px 18px !important;
    line-height: 1.35 !important;
  }

  body.site-home .faq-item p {
    padding: 0 18px 18px !important;
    line-height: 1.55 !important;
  }

  body.site-home .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
  }

  body.site-home :is(
    .hero-actions .top-direct-contact,
    .button,
    .button-primary,
    .contact-tab,
    .product-card__link
  ) {
    min-height: 46px !important;
    border-radius: var(--rs-pro-button-radius) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      border-color 180ms ease,
      filter 180ms ease !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-height: 34px !important;
    border-radius: 999px !important;
    padding-inline: 14px !important;
  }

  body.site-home :is(.top-direct-contact--whatsapp, a[href*="wa.me"].top-direct-contact) {
    border-color: rgba(14, 139, 78, 0.72) !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #31d17c, #12a160) !important;
    box-shadow:
      0 12px 24px rgba(13, 142, 80, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  }

  body.site-home .hero-actions .top-direct-contact--call {
    color: #17324a !important;
    background: linear-gradient(180deg, rgba(242, 250, 255, 0.94), rgba(203, 228, 245, 0.9)) !important;
    border-color: rgba(105, 174, 224, 0.7) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.site-home :is(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns
  ):hover {
    box-shadow: var(--rs-pro-card-shadow-hover) !important;
    filter: saturate(1.03) brightness(1.015) !important;
  }

  body.site-home :is(
    .hero-actions .top-direct-contact,
    .button,
    .button-primary,
    .contact-tab,
    .product-card__link
  ):hover {
    transform: translateY(-1px) !important;
    filter: saturate(1.05) brightness(1.02) !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home {
    --rs-pro-section-gap: 34px;
    --rs-pro-card-gap: 12px;
    --rs-pro-section-radius: 22px;
    --rs-pro-card-radius: 16px;
  }

  body.site-home .content-section {
    width: min(calc(100% - 20px), var(--rs-pro-page-width)) !important;
    padding: 20px 16px !important;
  }

  body.site-home .section-heading,
  body.site-home .section-heading--compact {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  body.site-home .section-heading h2,
  body.site-home .contact-copy h2 {
    max-width: 100% !important;
    font-size: clamp(1.38rem, 6.2vw, 2rem) !important;
  }

  body.site-home .section-heading > p:not(.section-kicker) {
    max-width: 100% !important;
    font-size: 0.94rem !important;
  }

  body.site-home .hero-copy.tech-panel h1 {
    max-width: 100% !important;
    font-size: clamp(1.45rem, 6.2vw, 2.08rem) !important;
  }

  body.site-home .hero-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.site-home .hero-actions .top-direct-contact--whatsapp {
    order: -1 !important;
  }

  body.site-home .hero-actions .top-direct-contact {
    width: 100% !important;
    min-height: 50px !important;
  }

  body.site-home :is(.homepage-media-strip, .project-grid, .process-grid, .service-grid, .product-showroom__grid) {
    grid-template-columns: 1fr !important;
  }

  body.site-home .homepage-media-card {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  body.site-home .homepage-media-card__image {
    grid-row: 1 / span 3 !important;
    min-height: 76px !important;
  }

  body.site-home .homepage-media-card__image img {
    min-height: 76px !important;
  }

  body.site-home .homepage-media-card :is(.card-code, h3, p:last-child) {
    grid-column: 2 !important;
  }

  body.site-home .faq-item summary {
    padding: 15px 14px !important;
  }

  body.site-home .faq-item p {
    padding: 0 14px 15px !important;
  }

  body.site-home .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 18px !important;
  }
}

/* Desktop: hover-glas en bewegende glans volledig uit. */
@media (hover: hover) and (pointer: fine) {
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher
  ):hover,
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher
  ):focus-within,
  body.site-home [data-tilt]:hover,
  body.site-home [data-tilt]:focus-within {
    transform: none !important;
    filter: none !important;
  }

  body.site-home :is(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns
  ):hover,
  body.site-home :is(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher,
    .footer-columns
  ):focus-within {
    box-shadow: var(--rs-pro-card-shadow, 0 16px 34px rgba(9, 18, 30, 0.16)) !important;
  }

  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover,
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within {
    background-position: -160% 0, center center, center center, center center !important;
  }

  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover > .panel-corners,
  body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within > .panel-corners,
  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher
  ):hover::after,
  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item,
    .contact-copy,
    .contact-form,
    .appointment-form,
    .contact-switcher
  ):focus-within::after {
    animation: none !important;
    background-position: -160% 0, 0 0, 0 0 !important;
  }

  body.site-home .hero-copy.tech-panel:hover > .panel-corners::before,
  body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::before {
    animation: none !important;
    opacity: 0 !important;
    transform: translateX(-120%) skewX(-10deg) !important;
  }

  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):hover::before,
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):focus-within::before {
    border-color: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important;
    box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important;
  }

  body.site-home .site-nav a:hover .nav-sheen,
  body.site-home .site-nav a:focus-visible .nav-sheen {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
}

/* Mobile compact herstel: kaders minder uitgerekt, desktop blijft onaangeraakt. */
@media screen and (max-width: 680px) {
  body.site-home {
    --rs-pro-section-gap: 26px;
    --rs-pro-card-gap: 10px;
    --rs-pro-section-radius: 18px;
    --rs-pro-card-radius: 14px;
  }

  body.site-home .site-header .header-shell:not(.header-shell--portal),
  body.site-home .hero-shell,
  body.site-home .content-section,
  body.site-home .contact-switcher,
  body.site-home .footer-columns.tech-panel {
    width: min(calc(100% - 28px), 520px) !important;
    max-width: 520px !important;
  }

  body.site-home .hero-section + .content-section,
  body.site-home .content-section + .content-section {
    margin-top: 26px !important;
  }

  body.site-home .content-section {
    padding: 16px 14px !important;
    border-radius: var(--rs-pro-section-radius) !important;
  }

  body.site-home .section-heading,
  body.site-home .section-heading--compact {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  body.site-home .section-heading h2,
  body.site-home .contact-copy h2 {
    max-width: 16ch !important;
    font-size: clamp(1.24rem, 5.2vw, 1.72rem) !important;
    line-height: 1.08 !important;
  }

  body.site-home .section-heading > p:not(.section-kicker),
  body.site-home .contact-copy > p,
  body.site-home .appointment-intro {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }

  body.site-home .hero-copy.tech-panel {
    padding: 18px 14px 16px !important;
    border-radius: var(--rs-pro-section-radius) !important;
  }

  body.site-home .hero-copy.tech-panel h1 {
    font-size: clamp(1.28rem, 5.4vw, 1.72rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 10px !important;
  }

  body.site-home .hero-copy.tech-panel .hero-text,
  body.site-home .hero-copy.tech-panel .hero-install-note,
  body.site-home .hero-copy.tech-panel .hero-availability-note {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    min-height: 0 !important;
    padding: 11px 12px 12px !important;
    border-radius: var(--rs-pro-card-radius) !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list ul {
    gap: 4px !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list li {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
  }

  body.site-home .hero-actions {
    gap: 9px !important;
    margin-top: 10px !important;
  }

  body.site-home .hero-actions .top-direct-contact {
    min-height: 44px !important;
  }

  body.site-home :is(
    .homepage-media-strip,
    .project-grid,
    .process-grid,
    .service-grid,
    .product-showroom__grid,
    .faq-list
  ) {
    gap: var(--rs-pro-card-gap) !important;
  }

  body.site-home :is(
    .homepage-media-card,
    .feature-card,
    .project-card,
    .process-card,
    .product-card,
    .faq-item
  ) {
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: var(--rs-pro-card-radius) !important;
  }

  body.site-home .homepage-media-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  body.site-home .homepage-media-strip--compact {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: var(--rs-pro-card-gap) !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x proximity !important;
  }

  body.site-home .homepage-media-strip--compact .homepage-media-card {
    flex: 0 0 min(78vw, 300px) !important;
    width: min(78vw, 300px) !important;
    min-width: min(78vw, 300px) !important;
    max-width: 300px !important;
    scroll-snap-align: start !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .homepage-media-card__image img {
    min-height: 62px !important;
  }

  body.site-home .project-card {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
  }

  body.site-home .project-card .project-media {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    min-height: 68px !important;
    height: 68px !important;
  }

  body.site-home .project-card :is(.project-label, h3, p, .project-hovermeta) {
    grid-column: 2 !important;
  }

  body.site-home .project-card .project-hovermeta {
    display: none !important;
  }

  body.site-home .process-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
  }

  body.site-home .process-card > span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  body.site-home .process-card h3,
  body.site-home .process-card p {
    grid-column: 2 !important;
  }

  body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) h3 {
    margin-bottom: 4px !important;
    font-size: 0.96rem !important;
    line-height: 1.16 !important;
  }

  body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) p {
    margin-bottom: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }

  body.site-home .faq-item summary {
    padding: 12px !important;
  }

  body.site-home .faq-item p {
    padding: 0 12px 12px !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
  }

  body.site-home .footer-columns {
    gap: 14px !important;
    padding: 18px 14px !important;
  }
}

/* Strak zwart getint glas: donkere randen, midden blijft transparant. */
@media screen {
  body.site-home {
    --rs-black-glass-edge: rgba(0, 0, 0, 0.54);
    --rs-black-glass-edge-soft: rgba(0, 0, 0, 0.24);
    --rs-black-glass-glow: rgba(255, 255, 255, 0.2);
    --rs-black-glass-shadow: rgba(0, 0, 0, 0.24);
  }

  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .tech-panel,
    .hero-service-list
  ),
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .tech-panel,
    .hero-service-list
  ):hover,
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .tech-panel,
    .hero-service-list
  ):focus-within {
    border-color: var(--rs-black-glass-edge) !important;
    background-color: transparent !important;
    box-shadow:
      0 22px 54px var(--rs-black-glass-shadow),
      inset 0 0 0 1px var(--rs-black-glass-glow),
      inset 0 0 0 2px rgba(0, 0, 0, 0.18),
      inset 0 18px 22px -23px rgba(255, 255, 255, 0.34),
      inset 0 -18px 24px -24px rgba(0, 0, 0, 0.58),
      inset 18px 0 24px -28px rgba(0, 0, 0, 0.5),
      inset -18px 0 24px -28px rgba(0, 0, 0, 0.5) !important;
    transform: none !important;
    filter: none !important;
  }

  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .tech-panel,
    .hero-service-list
  ),
  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .tech-panel,
    .hero-service-list
  ):hover,
  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel,
    .tech-panel,
    .hero-service-list
  ):focus-within {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.18)) !important;
  }

  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
  }

  body.site-home .hero-copy.tech-panel,
  body.site-home .hero-copy.tech-panel:hover,
  body.site-home .hero-copy.tech-panel:focus-within {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.16)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
  }

  body.site-home .hero-copy.tech-panel .hero-service-list,
  body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.16)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)) !important;
    background-color: transparent !important;
    border-color: var(--rs-black-glass-edge) !important;
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 0 0 2px rgba(0, 0, 0, 0.16),
      inset 0 15px 20px -24px rgba(255, 255, 255, 0.28),
      inset 0 -15px 20px -22px rgba(0, 0, 0, 0.5) !important;
  }

  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  )::before,
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):hover::before,
  body.site-home :is(
    .site-header .header-shell,
    .hero-copy.tech-panel,
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):focus-within::before {
    border-color: rgba(0, 0, 0, 0.42) !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 24%, transparent 78%, rgba(0, 0, 0, 0.14)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.18)) !important;
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.24) !important;
  }

  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  )::after,
  body.site-home .tech-panel > .panel-corners,
  body.site-home .site-header .header-shell > .panel-corners,
  body.site-home .hero-copy.tech-panel > .panel-corners,
  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):hover::after,
  body.site-home .tech-panel:hover > .panel-corners,
  body.site-home .site-header .header-shell:hover > .panel-corners,
  body.site-home .hero-copy.tech-panel:hover > .panel-corners,
  body.site-home :is(
    .content-section,
    .portal-section,
    .footer-columns.tech-panel
  ):focus-within::after,
  body.site-home .tech-panel:focus-within > .panel-corners,
  body.site-home .site-header .header-shell:focus-within > .panel-corners,
  body.site-home .hero-copy.tech-panel:focus-within > .panel-corners {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 17%, transparent 82%, rgba(0, 0, 0, 0.18)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.18)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.18),
      inset 0 18px 26px -28px rgba(255, 255, 255, 0.34),
      inset 0 -18px 26px -26px rgba(0, 0, 0, 0.62) !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

/* FINAL CONTENT GLASS v1: panelen lichter houden, topheaders niet aanpassen. */
@media screen {
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: rgba(0, 0, 0, 0.32) !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 5%, rgba(255, 255, 255, 0.1)), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.11), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.11)) !important;
    background-color: transparent !important;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.16),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.08),
      inset 0 18px 22px -26px rgba(255, 255, 255, 0.34),
      inset 0 -18px 24px -28px rgba(0, 0, 0, 0.28),
      inset 18px 0 24px -30px rgba(0, 0, 0, 0.18),
      inset -18px 0 24px -30px rgba(0, 0, 0, 0.18) !important;
    filter: none !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::before,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::before,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::before {
    border-color: rgba(0, 0, 0, 0.2) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 24%, transparent 78%, rgba(0, 0, 0, 0.07)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.14) !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.08)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 0 0 2px rgba(0, 0, 0, 0.08),
      inset 0 18px 26px -30px rgba(255, 255, 255, 0.3),
      inset 0 -18px 26px -30px rgba(0, 0, 0, 0.24) !important;
    opacity: 1 !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card),
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within {
    border-color: rgba(0, 0, 0, 0.28) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%, transparent 74%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.09), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.09)) !important;
    background-color: transparent !important;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 0 0 2px rgba(0, 0, 0, 0.07),
      inset 0 16px 22px -28px rgba(255, 255, 255, 0.34),
      inset 0 -16px 22px -28px rgba(0, 0, 0, 0.2) !important;
    filter: none !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within > .panel-corners {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.08)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.08),
      inset 0 18px 26px -30px rgba(255, 255, 255, 0.28),
      inset 0 -18px 26px -30px rgba(0, 0, 0, 0.22) !important;
    opacity: 1 !important;
  }
}

/* FINAL CONTENT GLASS v2: alleen subtiele donkere randen, midden blijft helder. */
@media screen {
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: rgba(0, 0, 0, 0.24) !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 3%, rgba(255, 255, 255, 0.08)), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.035)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.045), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.045)) !important;
    background-color: transparent !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 20px -28px rgba(255, 255, 255, 0.28),
      inset 0 -16px 20px -30px rgba(0, 0, 0, 0.12),
      inset 16px 0 22px -32px rgba(0, 0, 0, 0.1),
      inset -16px 0 22px -32px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::before,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::before,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::before {
    border-color: rgba(0, 0, 0, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%, transparent 82%, rgba(0, 0, 0, 0.035)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.04)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.035)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card),
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within {
    border-color: rgba(0, 0, 0, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 26%, transparent 78%, rgba(0, 0, 0, 0.035)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.035)) !important;
    background-color: transparent !important;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.04),
      inset 0 14px 20px -30px rgba(255, 255, 255, 0.28),
      inset 0 -14px 20px -32px rgba(0, 0, 0, 0.08) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within > .panel-corners {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.035)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.24),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel :is(p, li),
  html body.site-home .footer-columns.tech-panel :is(p, li) {
    color: rgba(34, 58, 80, 0.78) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }
}

/* FINAL CONTENT GLASS v3: witte basisplaat onder gewone panelen. */
@media screen {
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: rgba(0, 0, 0, 0.24) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.055)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.055), transparent 11%, transparent 89%, rgba(0, 0, 0, 0.055)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.82), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.1), transparent 34%, rgba(255, 255, 255, 0.16) 72%),
      linear-gradient(180deg, rgba(250, 253, 255, 0.88), rgba(229, 241, 249, 0.8)) !important;
    background-color: rgba(241, 248, 253, 0.82) !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.13),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 0 2px rgba(0, 0, 0, 0.055),
      inset 0 18px 24px -30px rgba(255, 255, 255, 0.36),
      inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14),
      inset 18px 0 24px -34px rgba(0, 0, 0, 0.11),
      inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::before,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::before,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::before {
    border-color: rgba(0, 0, 0, 0.17) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.045)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11) !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 22%, transparent 84%, rgba(0, 0, 0, 0.04)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.035)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.17),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card),
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within {
    border-color: rgba(0, 0, 0, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.045)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(236, 246, 253, 0.74)) !important;
    background-color: rgba(241, 248, 253, 0.78) !important;
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 14px 20px -30px rgba(255, 255, 255, 0.34),
      inset 0 -14px 20px -32px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within > .panel-corners {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.04)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
  }
}

/* FINAL TOPBAR TUNE v1: login als tekst, CTA's niet tegen de rand. */
@media screen {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #d7e9f8 !important;
    -webkit-text-fill-color: #d7e9f8 !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:hover,
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    outline: 0 !important;
  }
}

@media screen and (min-width: 1601px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-right: clamp(110px, 7vw, 210px) !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1600px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-right: clamp(34px, 4vw, 72px) !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-right: 0 !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-height: 0 !important;
    margin-inline: auto !important;
  }
}

/* FINAL WINNING topbalk: zelfde zwarte glasstijl als de panelen. */
@media screen {
  body.site-home .top-toolbar {
    position: relative !important;
    z-index: 40 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.58) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 34%, rgba(0, 0, 0, 0.06) 68%, rgba(0, 0, 0, 0.2)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.08) 72%, rgba(0, 0, 0, 0.24)) !important;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  body.site-home .top-toolbar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.05) 55%, transparent),
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%) !important;
    opacity: 0.7 !important;
  }

  body.site-home .top-toolbar__inner {
    position: relative !important;
    z-index: 1 !important;
    min-height: 48px !important;
    width: min(calc(100% - 24px), 1680px) !important;
    padding: 6px 12px !important;
    gap: 14px !important;
  }

  body.site-home .toolbar-group {
    align-items: center !important;
    gap: 10px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #1c3449 !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    opacity: 0.9 !important;
  }

  body.site-home .toolbar-group a:not(:last-child)::after,
  body.site-home .toolbar-group span:not(:last-child)::after {
    width: 1px !important;
    height: 22px !important;
    right: -6px !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.26), transparent) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.24) !important;
  }

  body.site-home .top-login-link,
  body.site-home .top-toolbar .top-direct-contact,
  body.site-home .rs-language-button {
    min-height: 34px !important;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.18) 48%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
    color: #142c42 !important;
    box-shadow:
      0 9px 20px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(0, 0, 0, 0.26),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
  }

  body.site-home .top-login-link {
    min-width: 118px !important;
    padding: 0 20px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-width: 132px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
  }

  body.site-home .top-toolbar .top-direct-contact--call {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 255, 0.34) 54%, rgba(0, 0, 0, 0.08)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important;
  }

  body.site-home .top-toolbar .top-direct-contact--whatsapp {
    border-color: rgba(0, 0, 0, 0.54) !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(72, 226, 137, 0.98), rgba(20, 174, 92, 0.94) 54%, rgba(7, 95, 49, 0.98)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2)) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
  }

  body.site-home .rs-language-switcher {
    top: 9px !important;
    left: 12px !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.48) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.1)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.18)) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      inset 0 -1px 0 rgba(0, 0, 0, 0.34) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  body.site-home .rs-language-button {
    min-width: 92px !important;
    padding: 5px 11px 5px 8px !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
  }
}

@media screen and (min-width: 900px) {
  body.site-home .toolbar-group--brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .top-toolbar {
    padding-top: 42px !important;
  }

  body.site-home .top-toolbar__inner {
    min-height: auto !important;
    padding: 5px 10px 8px !important;
  }

  body.site-home .toolbar-group--right > a:not(.top-direct-contact) {
    display: none !important;
  }

  body.site-home .top-toolbar .top-direct-contact {
    min-width: 0 !important;
    min-height: 42px !important;
    flex: 1 1 calc(50% - 8px) !important;
    padding-inline: 12px !important;
  }

  body.site-home .rs-language-switcher {
    top: 8px !important;
    left: 8px !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
  }
}
 
/* REPAIR v2 FINAL: editor-tint wint als laatste, zonder vaste donkere laag. */
@media screen {
  html body.site-home {
    --rs-repair-glass-edge: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, rgba(0, 0, 0, 0.54) 42%);
    --rs-repair-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 54%, rgba(0, 0, 0, 0.24) 46%);
  }

  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within {
    border-color: var(--rs-repair-glass-edge) !important;
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 0 0 2px rgba(0, 0, 0, 0.18),
      inset 0 18px 22px -23px rgba(255, 255, 255, 0.34),
      inset 0 -18px 24px -24px rgba(0, 0, 0, 0.58),
      inset 18px 0 24px -28px rgba(0, 0, 0, 0.5),
      inset -18px 0 24px -28px rgba(0, 0, 0, 0.5) !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    border-color: var(--rs-repair-glass-edge) !important;
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.16)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: var(--rs-repair-glass-edge-soft) !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.74), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.08), transparent 34%, rgba(255, 255, 255, 0.14) 72%),
      linear-gradient(180deg, rgba(250, 253, 255, 0.78), rgba(229, 241, 249, 0.7)) !important;
    background-color: rgba(241, 248, 253, 0.64) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card),
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within,
  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    border-color: var(--rs-repair-glass-edge-soft) !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 26%, transparent 80%, var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 246, 253, 0.66)) !important;
    background-color: rgba(241, 248, 253, 0.68) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) auto minmax(560px, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 18px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    transform: none !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #d7e9f8 !important;
    -webkit-text-fill-color: #d7e9f8 !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    grid-column: 3 !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
    margin-right: clamp(80px, 6vw, 150px) !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1300px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    grid-template-columns: minmax(180px, 1fr) auto minmax(400px, 1fr) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-right: clamp(34px, 4vw, 74px) !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    justify-content: center !important;
  }
}

/* REPAIR v3 FINAL: topmenu terug symmetrisch, login exact midden. */
@media screen and (min-width: 681px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-left: auto !important;
    margin-right: clamp(118px, 7.5vw, 190px) !important;
    justify-content: flex-end !important;
  }
}

@media screen and (min-width: 681px) and (max-width: 1300px) {
  html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right {
    margin-right: clamp(42px, 5vw, 86px) !important;
  }
}

/* REPAIR v4 FINAL: footer-cornerlaag mag geen extra kolom worden. */
@media screen {
  html body.site-home .site-footer .footer-columns.tech-panel > .panel-corners {
    display: none !important;
  }
}

/* REPAIR v5 FINAL: header 1 en 2 gebruiken dezelfde lichte glasplaat als de rest. */
@media screen {
  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within,
  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    border-color: var(--rs-repair-glass-edge-soft) !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.13),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 0 2px rgba(0, 0, 0, 0.055),
      inset 0 18px 24px -30px rgba(255, 255, 255, 0.36),
      inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14),
      inset 18px 0 24px -34px rgba(0, 0, 0, 0.11),
      inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important;
  }

  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
  }

  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px -22px -22px !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid var(--rs-repair-glass-edge-soft) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.38), transparent 42%),
      linear-gradient(180deg, rgba(250, 253, 255, 0.18), rgba(229, 241, 249, 0.12)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11) !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  html body.site-home .site-header .header-shell::after,
  html body.site-home .site-header .header-shell:hover::after,
  html body.site-home .site-header .header-shell:focus-within::after,
  html body.site-home .hero-copy.tech-panel::after,
  html body.site-home .hero-copy.tech-panel:hover::after,
  html body.site-home .hero-copy.tech-panel:focus-within::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 22%, transparent 84%, rgba(0, 0, 0, 0.04)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.035)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.17),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
  }

  html body.site-home .site-header .header-shell > .panel-corners,
  html body.site-home .hero-copy.tech-panel > .panel-corners {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.04)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
  }
}

/* REPAIR v6 FINAL: brede headerplaten houden hetzelfde glas zonder horizontale overscroll. */
@media screen {
  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before {
    inset: 12px -14px -22px !important;
  }
}

@media screen and (min-width: 1500px) {
  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before {
    inset: 12px -22px -22px !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before {
    inset: 10px -8px -16px !important;
    border-radius: 24px !important;
  }
}

/* REPAIR v7 FINAL: animaties mogen geen horizontale scrollbar maken. */
@media screen {
  html,
  html body.site-home {
    max-width: 100% !important;
    overflow-x: clip !important;
  }
}

@supports not (overflow: clip) {
  @media screen {
    html,
    html body.site-home {
      overflow-x: hidden !important;
    }
  }
}

/* REPAIR v8 FINAL: glasrand en backplate komen nu uit de Page editor. */
@media screen {
  html body.site-home {
    --rs-editor-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent);
    --rs-editor-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent);
    --rs-editor-glass-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent);
    --rs-editor-glass-backplate-soft: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) var(--rs-home-glass-backplate-soft-alpha, 12%), transparent);
    --rs-editor-glass-backplate-mid: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) var(--rs-home-glass-backplate-alpha, 20%), transparent);
    --rs-editor-glass-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent);
    --rs-repair-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), rgba(0, 0, 0, 0.42));
    --rs-repair-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), rgba(0, 0, 0, 0.18));
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: var(--rs-repair-glass-edge-soft) !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::before {
    border-color: var(--rs-editor-glass-edge) !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, var(--rs-editor-glass-backplate-strong), transparent 42%),
      linear-gradient(180deg, var(--rs-editor-glass-backplate-mid), var(--rs-editor-glass-backplate-soft)) !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section) > .panel-corners,
  html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners {
    background:
      linear-gradient(180deg, var(--rs-editor-glass-backplate-soft), transparent 22%, transparent 84%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)),
      linear-gradient(90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent), transparent 10%, transparent 90%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)) !important;
  }

  html body.site-home :is(.content-section, .portal-section) .tech-panel,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:hover,
  html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card),
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover,
  html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within,
  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within {
    border-color: var(--rs-editor-glass-edge-soft) !important;
    background:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 26%, transparent 80%, var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      linear-gradient(135deg, color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 58%, rgba(255, 255, 255, 0.22)), color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 42%, transparent)) !important;
    background-color: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 22%, transparent) !important;
  }
}

/* Page editor: compacte sliders voor de glasrand en backplate. */
.homepage-theme-editor .homepage-glass-style-group {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(63, 96, 126, 0.24) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(227, 239, 248, 0.64), rgba(169, 191, 208, 0.36)) !important;
}

.homepage-theme-editor .homepage-glass-style-group legend {
  padding: 0 6px !important;
  color: #2f628f !important;
  font: 900 0.62rem/1 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.homepage-theme-editor .homepage-glass-style-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 5px !important;
}

.homepage-theme-editor .homepage-glass-range {
  display: grid !important;
  grid-template-columns: minmax(88px, 0.8fr) minmax(82px, 1fr) 42px !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 4px 6px !important;
  border: 1px solid rgba(63, 96, 126, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(236, 246, 253, 0.52) !important;
}

.homepage-theme-editor .homepage-glass-range span {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.homepage-theme-editor .homepage-glass-range strong {
  color: #17324b !important;
  font-size: 0.58rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.homepage-theme-editor .homepage-glass-range small {
  display: none !important;
}

.homepage-theme-editor .homepage-glass-range input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  accent-color: var(--rs-home-button-fg, #1d72b8) !important;
}

.homepage-theme-editor .homepage-glass-range output {
  color: #284861 !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  text-align: right !important;
}

@media screen and (max-width: 680px) {
  .homepage-theme-editor .homepage-glass-style-grid,
  .homepage-theme-editor .homepage-glass-range {
    grid-template-columns: 1fr !important;
  }

  .homepage-theme-editor .homepage-glass-range output {
    text-align: left !important;
  }
}

/* REPAIR v9 FINAL: planning hover-glans niet buiten de kaart laten lekken. */
body.portal-page .planning-layout :is(
  .planning-dashboard-card,
  .planning-create-card,
  .planning-admin-create-card,
  .planning-empty-card,
  .planning-group-card,
  .planning-hero-card,
  .planning-form-card,
  .planning-customer-list-card
) {
  overflow: hidden;
}

body.portal-page .planning-layout :is(
  .planning-dashboard-card,
  .planning-create-card,
  .planning-admin-create-card,
  .planning-empty-card,
  .planning-group-card,
  .planning-hero-card,
  .planning-form-card,
  .planning-customer-list-card
)::before,
body.portal-page .planning-layout :is(
  .planning-dashboard-card,
  .planning-create-card,
  .planning-admin-create-card,
  .planning-empty-card,
  .planning-group-card,
  .planning-hero-card,
  .planning-form-card,
  .planning-customer-list-card
):hover::before,
body.portal-page .planning-layout :is(
  .planning-dashboard-card,
  .planning-create-card,
  .planning-admin-create-card,
  .planning-empty-card,
  .planning-group-card,
  .planning-hero-card,
  .planning-form-card,
  .planning-customer-list-card
):focus-within::before {
  opacity: 0;
  transform: translateX(0);
  transition: none;
}

/* REPAIR v10 FINAL: banner 1 en 2 krijgen geen mouse-over glasbeweging meer. */
@media screen {
  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within,
  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    filter: none !important;
    transform: none !important;
    transition: none !important;
    border-color: var(--rs-repair-glass-edge-soft) !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.13),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 0 2px rgba(0, 0, 0, 0.055),
      inset 0 18px 24px -30px rgba(255, 255, 255, 0.36),
      inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14),
      inset 18px 0 24px -34px rgba(0, 0, 0, 0.11),
      inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important;
  }

  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
    background-position: center center, center center, center center, center center, center center, center center !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
    background-position: center center, center center, center center, center center, center center, center center !important;
  }

  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .site-header .header-shell::after,
  html body.site-home .site-header .header-shell:hover::after,
  html body.site-home .site-header .header-shell:focus-within::after,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before,
  html body.site-home .hero-copy.tech-panel::after,
  html body.site-home .hero-copy.tech-panel:hover::after,
  html body.site-home .hero-copy.tech-panel:focus-within::after {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  html body.site-home .site-header .header-shell > .panel-corners,
  html body.site-home .site-header .header-shell:hover > .panel-corners,
  html body.site-home .site-header .header-shell:focus-within > .panel-corners,
  html body.site-home .hero-copy.tech-panel > .panel-corners,
  html body.site-home .hero-copy.tech-panel:hover > .panel-corners,
  html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners {
    animation: none !important;
    background:
      linear-gradient(180deg, var(--rs-editor-glass-backplate-soft), transparent 22%, transparent 84%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)),
      linear-gradient(90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent), transparent 10%, transparent 90%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)) !important;
    background-position: 0 0, 0 0 !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 2px rgba(0, 0, 0, 0.045),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* REPAIR v11 FINAL: alle tekstkleuren in de tweede banner komen uit de Page editor. */
@media screen {
  html body.site-home .hero-copy.tech-panel h1,
  html body.site-home .hero-copy.tech-panel:hover h1,
  html body.site-home .hero-copy.tech-panel:focus-within h1 {
    color: var(--rs-home-hero-title-text, #eef8ff) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-text,
  html body.site-home .hero-copy.tech-panel .hero-install-note,
  html body.site-home .hero-copy.tech-panel .hero-availability-note,
  html body.site-home .hero-copy.tech-panel:hover .hero-text,
  html body.site-home .hero-copy.tech-panel:hover .hero-install-note,
  html body.site-home .hero-copy.tech-panel:hover .hero-availability-note,
  html body.site-home .hero-copy.tech-panel:focus-within .hero-text,
  html body.site-home .hero-copy.tech-panel:focus-within .hero-install-note,
  html body.site-home .hero-copy.tech-panel:focus-within .hero-availability-note {
    color: var(--rs-home-hero-body-text, #d9ebf7) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within,
  html body.site-home .hero-copy.tech-panel .hero-service-list li {
    color: var(--rs-home-hero-card-text, #213c57) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list strong {
    color: var(--rs-home-hero-card-title-text, #173a62) !important;
  }

  html body.site-home .hero-actions .top-direct-contact--call,
  html body.site-home .hero-actions .top-direct-contact--call:hover,
  html body.site-home .hero-actions .top-direct-contact--call:focus-visible {
    color: var(--rs-home-hero-call-text, #17324b) !important;
    -webkit-text-fill-color: var(--rs-home-hero-call-text, #17324b) !important;
  }

  html body.site-home .hero-actions .top-direct-contact--whatsapp,
  html body.site-home .hero-actions .top-direct-contact--whatsapp:hover,
  html body.site-home .hero-actions .top-direct-contact--whatsapp:focus-visible,
  html body.site-home .hero-actions a[href*="wa.me"].top-direct-contact,
  html body.site-home .hero-actions a[href*="wa.me"].top-direct-contact:hover,
  html body.site-home .hero-actions a[href*="wa.me"].top-direct-contact:focus-visible {
    color: var(--rs-home-hero-whatsapp-text, #ffffff) !important;
    -webkit-text-fill-color: var(--rs-home-hero-whatsapp-text, #ffffff) !important;
  }
}

/* REPAIR v12 FINAL: geen glas-hover meer, randkleur en randdikte reageren stabiel vanuit de editor. */
@media screen {
  html body.site-home {
    --rs-editor-glass-edge-hard: var(--rs-home-glass-edge-color, #c6d0d9);
    --rs-editor-glass-edge-line: var(--rs-editor-glass-edge-hard);
    --rs-editor-glass-edge-fill: color-mix(in srgb, var(--rs-editor-glass-edge-hard) 18%, transparent);
    --rs-editor-glass-edge-shadow: color-mix(in srgb, var(--rs-editor-glass-edge-hard) 34%, transparent);
    --rs-editor-glass-corner-line: color-mix(in srgb, var(--rs-editor-glass-edge-hard) 28%, transparent);
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    animation: none !important;
    border-color: var(--rs-editor-glass-edge-line) !important;
    filter: none !important;
    outline: 0 !important;
    transform: none !important;
    transition: none !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.13),
      0 0 0 var(--rs-home-glass-edge-width, 3px) var(--rs-editor-glass-edge-shadow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 0 calc(var(--rs-home-glass-edge-width, 3px) + 1px) var(--rs-editor-glass-edge-fill),
      inset 0 18px 24px -30px rgba(255, 255, 255, 0.36),
      inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14),
      inset 18px 0 24px -34px rgba(0, 0, 0, 0.11),
      inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher),
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within {
    animation: none !important;
    border-color: var(--rs-editor-glass-edge-line) !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 0 var(--rs-home-glass-edge-width, 3px) var(--rs-editor-glass-edge-fill),
      inset 0 12px 18px -24px rgba(255, 255, 255, 0.34),
      inset 0 -12px 18px -24px rgba(0, 0, 0, 0.12) !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > .panel-corners,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover > .panel-corners,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within > .panel-corners {
    animation: none !important;
    background-position: 0 0, 0 0, 0 0 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 var(--rs-home-glass-edge-width, 3px) var(--rs-editor-glass-corner-line),
      inset 0 16px 24px -32px rgba(255, 255, 255, 0.26),
      inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home .hero-copy.tech-panel > .panel-corners::before,
  html body.site-home .hero-copy.tech-panel:hover > .panel-corners::before,
  html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::before,
  html body.site-home .hero-copy.tech-panel > .panel-corners::after,
  html body.site-home .hero-copy.tech-panel:hover > .panel-corners::after,
  html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::after {
    animation: none !important;
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::before,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::before,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* REPAIR v13 FINAL: glastint is alleen een binnenlaag, nooit de backplate of pagina-achtergrond. */
@media screen {
  html body.site-home {
    --rs-editor-glass-inner-tint:
      linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 30%, transparent 78%, var(--rs-home-glass-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent));
    --rs-editor-glass-neutral-backplate:
      radial-gradient(circle at 18% 8%, var(--rs-editor-glass-backplate-strong, transparent), transparent 42%),
      linear-gradient(180deg, var(--rs-editor-glass-backplate-mid, transparent), var(--rs-editor-glass-backplate-soft, transparent));
  }

  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
    background-position: center center, center center, center center, center center !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
    background-position: center center, center center, center center, center center !important;
  }

  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.045)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.72), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.06), transparent 34%, rgba(255, 255, 255, 0.12) 72%) !important;
    background-color: transparent !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::before,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::before {
    background: var(--rs-editor-glass-neutral-backplate) !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    background: var(--rs-editor-glass-inner-tint) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > .panel-corners,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover > .panel-corners,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within > .panel-corners {
    background:
      linear-gradient(180deg, var(--rs-editor-glass-backplate-soft, transparent), transparent 22%, transparent 84%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)),
      linear-gradient(90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent), transparent 10%, transparent 90%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher),
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 26%, transparent 80%, rgba(0, 0, 0, 0.04)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)),
      linear-gradient(135deg, color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 58%, rgba(255, 255, 255, 0.22)), color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 42%, transparent)) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    background: var(--rs-editor-glass-inner-tint) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list > *,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher) > * {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* REPAIR v14 FINAL: rand-slider maakt een zachte fade-rand, geen harde dikke outline. */
@media screen {
  html body.site-home {
    --rs-editor-glass-edge-outer: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 78%, transparent);
    --rs-editor-glass-edge-middle: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 34%, transparent);
    --rs-editor-glass-edge-inner: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 10%, transparent);
    --rs-editor-glass-edge-fade-layer:
      linear-gradient(
        180deg,
        var(--rs-editor-glass-edge-outer) 0,
        var(--rs-editor-glass-edge-middle) var(--rs-home-glass-edge-fade-mid, 14px),
        var(--rs-editor-glass-edge-inner) var(--rs-home-glass-edge-fade, 30px),
        transparent calc(var(--rs-home-glass-edge-fade, 30px) + 10px),
        transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 10px),
        var(--rs-editor-glass-edge-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)),
        var(--rs-editor-glass-edge-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)),
        var(--rs-editor-glass-edge-outer) 100%
      ),
      linear-gradient(
        90deg,
        var(--rs-editor-glass-edge-outer) 0,
        var(--rs-editor-glass-edge-middle) var(--rs-home-glass-edge-fade-mid, 14px),
        var(--rs-editor-glass-edge-inner) var(--rs-home-glass-edge-fade, 30px),
        transparent calc(var(--rs-home-glass-edge-fade, 30px) + 10px),
        transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 10px),
        var(--rs-editor-glass-edge-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)),
        var(--rs-editor-glass-edge-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)),
        var(--rs-editor-glass-edge-outer) 100%
      );
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel),
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within {
    border-color: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 58%, transparent) !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher),
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within {
    border-color: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 54%, transparent) !important;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > .panel-corners,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover > .panel-corners,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within > .panel-corners {
    background: var(--rs-editor-glass-edge-fade-layer) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-service-list::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after {
    background:
      var(--rs-editor-glass-edge-fade-layer),
      var(--rs-editor-glass-inner-tint) !important;
  }
}

/* REPAIR v15 FINAL: ook de glasplaat zelf krijgt een randfade; het midden blijft open. */
@media screen {
  html body.site-home {
    --rs-editor-glass-tint-outer: var(--rs-home-glass-tint-strong, transparent);
    --rs-editor-glass-tint-middle: var(--rs-home-glass-tint-mid, transparent);
    --rs-editor-glass-tint-inner: var(--rs-home-glass-tint-soft, transparent);
    --rs-editor-glass-inner-tint:
      linear-gradient(
        180deg,
        var(--rs-editor-glass-tint-outer) 0,
        var(--rs-editor-glass-tint-middle) var(--rs-home-glass-edge-fade-mid, 14px),
        var(--rs-editor-glass-tint-inner) var(--rs-home-glass-edge-fade, 30px),
        transparent calc(var(--rs-home-glass-edge-fade, 30px) + 14px),
        transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 14px),
        var(--rs-editor-glass-tint-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)),
        var(--rs-editor-glass-tint-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)),
        var(--rs-editor-glass-tint-outer) 100%
      ),
      linear-gradient(
        90deg,
        var(--rs-editor-glass-tint-outer) 0,
        var(--rs-editor-glass-tint-middle) var(--rs-home-glass-edge-fade-mid, 14px),
        var(--rs-editor-glass-tint-inner) var(--rs-home-glass-edge-fade, 30px),
        transparent calc(var(--rs-home-glass-edge-fade, 30px) + 14px),
        transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 14px),
        var(--rs-editor-glass-tint-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)),
        var(--rs-editor-glass-tint-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)),
        var(--rs-editor-glass-tint-outer) 100%
      );
    --rs-editor-glass-surface-fade:
      var(--rs-editor-glass-edge-fade-layer),
      var(--rs-editor-glass-inner-tint);
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list:hover::after,
  html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after,
  html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after {
    background: var(--rs-editor-glass-surface-fade) !important;
    opacity: 1 !important;
  }
}

/* REPAIR v16 FINAL: foto/header tint en tekstkader tint zijn gescheiden. */
@media screen {
  html body.site-home {
    --rs-editor-photo-inner-tint:
      linear-gradient(180deg, var(--rs-home-photo-tint-strong, transparent), transparent 30%, transparent 78%, var(--rs-home-photo-tint-mid, transparent)),
      linear-gradient(90deg, var(--rs-home-photo-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-photo-tint-soft, transparent));
  }

  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-top-banner-image) center center / cover no-repeat !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus-within {
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-bottom-banner-image) center center / cover no-repeat !important;
  }

  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel)::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover::after,
  html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within::after {
    background:
      var(--rs-editor-glass-edge-fade-layer),
      var(--rs-editor-photo-inner-tint) !important;
  }
}

/* REPAIR v17 FINAL: geen horizontale uitsteeksels bij de ronde headerhoeken. */
@media screen {
  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before {
    top: 22px !important;
    border-top-color: transparent !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1) !important;
  }

  html body.site-home .site-header .header-shell > .panel-corners,
  html body.site-home .site-header .header-shell:hover > .panel-corners,
  html body.site-home .site-header .header-shell:focus-within > .panel-corners,
  html body.site-home .hero-copy.tech-panel > .panel-corners,
  html body.site-home .hero-copy.tech-panel:hover > .panel-corners,
  html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners {
    overflow: hidden !important;
    clip-path: inset(0 round inherit) !important;
  }
}

/* REPAIR v18 FINAL: de externe backplate van header 1/2 tekende losse lijntjes buiten de radius. */
@media screen {
  html body.site-home .site-header .header-shell::before,
  html body.site-home .site-header .header-shell:hover::before,
  html body.site-home .site-header .header-shell:focus-within::before,
  html body.site-home .hero-copy.tech-panel::before,
  html body.site-home .hero-copy.tech-panel:hover::before,
  html body.site-home .hero-copy.tech-panel:focus-within::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
  }
}

/* REPAIR v19 FINAL: bovenste headerhoogte komt uit de Page editor en de foto blijft onvervormd. */
@media screen {
  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within {
    height: var(--rs-home-top-header-height, 320px) !important;
    min-height: var(--rs-home-top-header-height, 320px) !important;
    max-height: var(--rs-home-top-header-height, 320px) !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, contain !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
}

@media screen and (max-width: 680px) {
  body.site-home .site-header .header-shell,
  body.site-home .site-header .header-shell:hover,
  body.site-home .site-header .header-shell:focus,
  body.site-home .site-header .header-shell:focus-within {
    height: auto !important;
    min-height: var(--rs-home-top-header-height-mobile, 230px) !important;
    max-height: none !important;
    background-size: 100% 100%, 100% 100%, contain !important;
  }
}

/* REPAIR v20 FINAL: header 1 en 2 schalen met foto, glaslaag en randfade als een geheel. */
@media screen {
  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus,
  html body.site-home .site-header .header-shell:focus-within {
    height: var(--rs-home-top-header-height, 455px) !important;
    min-height: var(--rs-home-top-header-height, 455px) !important;
    max-height: var(--rs-home-top-header-height, 455px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
      linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-top-banner-image) center top / 100% auto no-repeat !important;
    background-position: center center, center center, center center, center top !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus,
  html body.site-home .hero-copy.tech-panel:focus-within {
    height: clamp(360px, 36vw, var(--rs-home-second-header-height, 455px)) !important;
    min-height: clamp(360px, 36vw, var(--rs-home-second-header-height, 455px)) !important;
    max-height: clamp(360px, 36vw, var(--rs-home-second-header-height, 455px)) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%),
      linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%),
      var(--rs-home-bottom-banner-image) center top / 100% auto no-repeat !important;
    background-position: center center, center center, center center, center top !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  }

  html body.site-home .hero-copy.tech-panel .hero-photo-bg {
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    background: var(--rs-home-bottom-banner-image) center top / 100% auto no-repeat !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  html body.site-home .site-header .header-shell::after,
  html body.site-home .site-header .header-shell:hover::after,
  html body.site-home .site-header .header-shell:focus-within::after,
  html body.site-home .hero-copy.tech-panel::after,
  html body.site-home .hero-copy.tech-panel:hover::after,
  html body.site-home .hero-copy.tech-panel:focus-within::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      var(--rs-editor-glass-edge-fade-layer),
      var(--rs-editor-photo-inner-tint) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  html body.site-home .site-header .header-shell > :not(.panel-corners),
  html body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media screen and (max-width: 680px) {
  html body.site-home .site-header .header-shell,
  html body.site-home .site-header .header-shell:hover,
  html body.site-home .site-header .header-shell:focus,
  html body.site-home .site-header .header-shell:focus-within {
    height: auto !important;
    min-height: var(--rs-home-top-header-height-mobile, 292px) !important;
    max-height: none !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important;
  }

  html body.site-home .hero-copy.tech-panel,
  html body.site-home .hero-copy.tech-panel:hover,
  html body.site-home .hero-copy.tech-panel:focus,
  html body.site-home .hero-copy.tech-panel:focus-within {
    height: auto !important;
    min-height: var(--rs-home-second-header-height-mobile, 355px) !important;
    max-height: none !important;
    border-radius: 24px !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important;
  }
}

/* === Inspector Gadget auto styles START === */
:root {
  --theme-blue: #1c5d99;
  --theme-anthracite: #171b22;
  --theme-white: #ffffff;
  --theme-accent: #0f7b72;
}

html > body.site-home > header#top > div.header-shell.is-visible:nth-of-type(1) > div.header-bottom:nth-of-type(3) {
  --html-body-site-home-header-top-div-header-shell-is-visible-nth-of-type1-div-header-bottom-nth-of-type3-opacity: 1;
  opacity: var(--html-body-site-home-header-top-div-header-shell-is-visible-nth-of-type1-div-header-bottom-nth-of-type3-opacity) !important;
}

html > body.site-home > header#top > div.header-shell.is-visible:nth-of-type(1) > div.header-bottom:nth-of-type(3) > button.menu-toggle:nth-of-type(1) {
  --html-body-site-home-header-top-div-header-shell-is-visible-nth-of-type1-div-header-bottom-nth-of-type3-button-menu-toggle-nth-of-type1-opacity: 0.67;
  opacity: var(--html-body-site-home-header-top-div-header-shell-is-visible-nth-of-type1-div-header-bottom-nth-of-type3-button-menu-toggle-nth-of-type1-opacity) !important;
}
/* === Inspector Gadget auto styles END === */

/* Repair 2026-05-20: open mobile menus must stay clickable above notification panels. */
@media (max-width: 760px) {
  body.is-site-menu-open .site-header,
  body.is-site-menu-open .header-bottom,
  body.is-site-menu-open .header-actions {
    position: relative !important;
    z-index: 30000 !important;
  }

  body.is-site-menu-open .menu-toggle {
    position: relative !important;
    z-index: 30030 !important;
    pointer-events: auto !important;
  }

  body.is-site-menu-open .site-nav.is-open {
    position: relative !important;
    z-index: 30020 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body.is-site-menu-open .portal-floating-notification-panel,
  body.is-site-menu-open .portal-blocked-menu[open] > .portal-blocked-menu__panel,
body.is-site-menu-open details[data-notification-menu][open] > .portal-blocked-menu__panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Offerte-template 2026-05-22: rustige 7-koloms regels, betalingsschema en print-zekere blokken. */
.document-row {
  grid-template-columns: minmax(0, 1fr) 76px 78px 98px 112px !important;
  gap: 10px;
  align-items: end;
}

.document-cell textarea {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid rgba(121, 151, 178, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #203446;
  font: 700 0.96rem/1.35 "Bahnschrift", "Segoe UI Variable", "Segoe UI", sans-serif;
  resize: vertical;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.document-cell textarea::placeholder {
  color: rgba(69, 91, 112, 0.54);
  font-weight: 600;
}

.document-cell--description {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 10px;
}

.document-line-type {
  width: 112px !important;
  min-height: 42px;
}

.document-unit-cell span {
  display: none;
}

.document-cell input,
.document-cell select {
  min-width: 0;
}

.document-cell input,
.document-cell textarea,
.document-cell select,
.document-cell--total {
  min-height: 42px;
  border-radius: 13px;
}

.document-line-description {
  white-space: normal;
  line-height: 1.42;
}

.document-sheet--professional .document-table-sheet__head,
.document-sheet--professional .document-table-sheet__row,
.document-preview__table-head,
.document-preview__row {
  grid-template-columns:
    minmax(52px, var(--table-col-date, 0.58fr))
    minmax(0, var(--table-col-desc, 2.2fr))
    minmax(42px, var(--table-col-qty, 0.46fr))
    minmax(48px, 0.48fr)
    minmax(62px, var(--table-col-price, 0.7fr))
    minmax(42px, var(--table-col-vat, 0.42fr))
    minmax(70px, var(--table-col-total, 0.78fr)) !important;
}

.document-sheet--professional .document-table-sheet__row span:nth-child(2),
.document-sheet--professional .document-table-sheet__head span:nth-child(2),
.document-preview__row span:nth-child(2),
.document-preview__table-head span:nth-child(2) {
  text-align: left !important;
}

.document-sheet--professional .document-table-sheet__row span:nth-child(n+3),
.document-sheet--professional .document-table-sheet__head span:nth-child(n+3),
.document-preview__row span:nth-child(n+3),
.document-preview__table-head span:nth-child(n+3) {
  text-align: right !important;
}

.document-payment-schedule--professional,
.document-professional-blocks {
  margin-top: 16px;
}

.document-payment-schedule--professional {
  order: 55;
}

.document-professional-blocks {
  order: 68;
}

.document-payment-schedule--professional,
.document-professional-block,
.document-print-block {
  border: 1px solid rgba(121, 151, 178, 0.22);
  border-radius: 14px;
  background: rgba(248, 251, 254, 0.88);
  color: #1b3145;
}

.document-payment-schedule--professional,
.document-professional-block {
  padding: 14px 16px;
}

.document-payment-schedule--professional strong,
.document-professional-block strong,
.document-print-block strong {
  display: block;
  margin-bottom: 8px;
  color: #102f4b;
  font-weight: 900;
}

.document-payment-schedule--professional ul,
.document-professional-block ul,
.document-print-block ul {
  margin: 0;
  padding-left: 1.1rem;
}

.document-payment-schedule--professional li,
.document-professional-block li,
.document-print-block li {
  margin: 0 0 5px;
}

.document-professional-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-professional-block:last-child {
  grid-column: 1 / -1;
}

.document-professional-block p,
.document-print-block p {
  margin: 0;
  line-height: 1.55;
}

.document-print-block,
.document-print-blocks {
  break-inside: avoid;
}

.document-print-summary-note {
  margin: 0 0 3mm;
  break-inside: avoid;
}

.document-print-summary-note strong {
  display: block;
  margin-bottom: 1.2mm;
}

.document-print-summary-note ul {
  margin: 0;
  padding-left: 4mm;
}

.document-print-summary-note li {
  margin: 0 0 0.8mm;
}

.document-print-block {
  padding: 3mm;
  margin: 3mm 0;
}

.document-print-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
}

.document-print-blocks .document-print-block:last-child {
  grid-column: 1 / -1;
}

.document-print-total-final {
  font-weight: 900;
  background: #eef4fb;
}

@media (max-width: 860px) {
  .document-row,
  .document-row--head {
    grid-template-columns: 1fr;
  }

  .document-row--head {
    display: none;
  }

  .document-cell--description {
    grid-template-columns: 1fr;
  }

  .document-professional-blocks,
  .document-print-blocks {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 980px), screen and (pointer: coarse) and (max-width: 1180px) {
  body.portal-page .document-preview__row span:nth-child(4)::before,
  body.document-page .document-preview__row span:nth-child(4)::before {
    content: "Eenheid" !important;
  }

  body.portal-page .document-preview__row span:nth-child(5)::before,
  body.document-page .document-preview__row span:nth-child(5)::before {
    content: "Prijs" !important;
  }

  body.portal-page .document-preview__row span:nth-child(6)::before,
  body.document-page .document-preview__row span:nth-child(6)::before {
    content: "BTW" !important;
  }

  body.portal-page .document-preview__row span:nth-child(7)::before,
  body.document-page .document-preview__row span:nth-child(7)::before,
  body.portal-page .document-preview__row strong::before,
  body.document-page .document-preview__row strong::before {
    content: "Totaal" !important;
  }
}

@media print {
  .document-print-table th:nth-child(1),
  .document-print-table td:nth-child(1) {
    width: 18mm !important;
  }

  .document-print-table th:nth-child(3),
  .document-print-table td:nth-child(3) {
    width: 13mm !important;
  }

  .document-print-table th:nth-child(4),
  .document-print-table td:nth-child(4) {
    width: 14mm !important;
  }

  .document-print-table th:nth-child(5),
  .document-print-table td:nth-child(5) {
    width: 22mm !important;
  }

  .document-print-table th:nth-child(6),
  .document-print-table td:nth-child(6) {
    width: 13mm !important;
  }

  .document-print-table th:nth-child(7),
  .document-print-table td:nth-child(7) {
    width: 24mm !important;
    white-space: nowrap !important;
  }

  .document-print-table th:nth-child(n+3),
  .document-print-table td:nth-child(n+3) {
    text-align: right !important;
  }

  .document-print-totals p:last-child {
    border-bottom: 0 !important;
    font-weight: inherit !important;
    background: transparent !important;
  }

  .document-print-totals p.document-print-total-final {
    font-weight: 800 !important;
    background: #eef4fb !important;
  }

  .document-print-summary {
    grid-template-columns: minmax(0, 1fr) 72mm !important;
    gap: 6mm !important;
  }

  .document-print-totals p {
    grid-template-columns: minmax(0, 1fr) 30mm !important;
    padding: 1.6mm 2mm !important;
  }
}

/* Repair offerte-editor: omschrijving mag niet samendrukken tot een smal textarea-vak. */
.document-table .document-row,
.document-table .document-row--head {
  grid-template-columns: minmax(380px, 1.35fr) 90px 100px 118px 132px !important;
  gap: 12px !important;
}

.document-table .document-cell--description {
  grid-template-columns: 122px minmax(240px, 1fr) !important;
  align-items: stretch !important;
}

.document-table .document-description-line {
  min-width: 240px !important;
}

/* Document productie-fix: metadata mag nooit in smalle kaartjes verticaal afbreken. */
body.document-page:not(.document-page--print-preview) .document-sheet__hero,
body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr) !important;
  grid-template-areas:
    "title logo"
    "title brand" !important;
  align-items: start !important;
  gap: 12px 34px !important;
  padding-bottom: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__hero .document-sheet__title-panel {
  align-self: start !important;
  min-width: 0 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top .portal-status {
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  margin-top: 12px !important;
  gap: 5px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
  display: grid !important;
  grid-template-columns: minmax(128px, max-content) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list span {
  color: #0f2336 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list strong {
  color: #263b50 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__overview {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr) !important;
  gap: 22px !important;
  margin-top: 10px !important;
  align-items: start !important;
}

body.document-page:not(.document-page--print-preview) .document-facts-grid--streamlined .document-fact-card {
  min-width: 0 !important;
}

body.document-page:not(.document-page--print-preview) .document-facts-grid--streamlined .document-fact-card strong {
  white-space: nowrap !important;
}

@media screen and (max-width: 720px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__hero,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "title"
      "brand" !important;
    gap: 12px !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
    max-width: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr) !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__overview {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 480px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
    grid-template-columns: 1fr !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

.document-table .document-line-type {
  width: 122px !important;
  height: 100% !important;
  min-height: 64px !important;
}

.document-table .document-cell textarea {
  display: block !important;
  width: 100% !important;
  min-width: 240px !important;
  min-height: 64px !important;
  max-height: 110px !important;
  overflow: auto !important;
}

.document-table .document-cell input,
.document-table .document-cell--total {
  min-height: 64px !important;
}

@media (max-width: 1100px) {
  .document-table .document-row,
  .document-table .document-row--head {
    grid-template-columns: minmax(320px, 1fr) 84px 88px 104px 118px !important;
    gap: 10px !important;
  }

  .document-table .document-cell--description {
    grid-template-columns: 112px minmax(200px, 1fr) !important;
  }

  .document-table .document-description-line,
  .document-table .document-cell textarea {
    min-width: 200px !important;
  }

  .document-table .document-line-type {
    width: 112px !important;
  }
}

@media (max-width: 900px) {
  .document-table .document-row,
  .document-table .document-row--head {
    grid-template-columns: 1fr !important;
  }

  .document-table .document-row--head {
    display: none !important;
  }

  .document-table .document-cell--description {
    grid-template-columns: 1fr !important;
  }

  .document-table .document-line-type,
  .document-table .document-description-line,
  .document-table .document-cell textarea {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Offerte-editor: lange omschrijvingen moeten de regel laten meegroeien, niet in een klein scrollvak verdwijnen. */
.document-builder-lines-panel,
.document-lines,
.document-table {
  overflow: visible !important;
}

.document-table .document-row {
  align-items: start !important;
}

.document-table .document-cell--description {
  align-items: start !important;
}

.document-table .document-cell textarea[name="item_description[]"] {
  height: auto;
  max-height: none !important;
  overflow: hidden !important;
  resize: none;
  white-space: pre-wrap;
}

.document-table .document-line-type,
.document-table .document-cell input,
.document-table .document-cell--total {
  align-self: start;
}

/* Admin layout-editor is uitgezet; het losse hulppaneel hoort niet meer in beeld te komen. */
body[data-layout-role="admin"] .admin-layout-controls,
body[data-layout-role="admin"] .admin-layout-widget__handle,
body[data-layout-role="admin"] .admin-layout-widget__resize,
body[data-layout-role="admin"] .admin-layout-widget__close,
body[data-layout-role="admin"] .admin-layout-widget__scale {
  display: none !important;
}

/* Document-view override: metadata blijft normaal leesbaar in plaats van verticale blokjes. */
body.document-page:not(.document-page--print-preview) .document-sheet__hero,
body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr) !important;
  grid-template-areas:
    "title logo"
    "title brand" !important;
  align-items: start !important;
  gap: 12px 34px !important;
  padding-bottom: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__hero .document-sheet__title-panel {
  align-self: start !important;
  min-width: 0 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__title-top .portal-status {
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  margin-top: 12px !important;
  gap: 5px !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
  display: grid !important;
  grid-template-columns: minmax(128px, max-content) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list span {
  color: #0f2336 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__meta-list strong {
  color: #263b50 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.document-page:not(.document-page--print-preview) .document-sheet__overview {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr) !important;
  gap: 22px !important;
  margin-top: 10px !important;
  align-items: start !important;
}

body.document-page:not(.document-page--print-preview) .document-facts-grid--streamlined .document-fact-card strong {
  white-space: nowrap !important;
}

@media screen and (max-width: 720px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__hero,
  body.document-page:not(.document-page--print-preview) .document-sheet--professional .document-sheet__hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "title"
      "brand" !important;
    gap: 12px !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list {
    max-width: none !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr) !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__overview {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 480px) {
  body.document-page:not(.document-page--print-preview) .document-sheet__title-top {
    grid-template-columns: 1fr !important;
  }

  body.document-page:not(.document-page--print-preview) .document-sheet__meta-list p {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

/* Definitieve offerte-editor layout: regels blijven binnen de linker kaart en vallen niet achter de preview. */
.portal-page--documents .document-builder-lines-panel {
  container-type: inline-size;
  overflow: hidden !important;
}

.portal-page--documents .document-lines,
.portal-page--documents .document-table {
  min-width: 0;
  overflow: hidden !important;
}

.portal-page--documents .document-table .document-row,
.portal-page--documents .document-table .document-row--head {
  grid-template-columns: minmax(300px, 1fr) minmax(68px, 86px) minmax(76px, 96px) minmax(92px, 110px) minmax(108px, 124px) !important;
  gap: 10px !important;
}

.portal-page--documents .document-table .document-cell--description {
  min-width: 0;
  grid-template-columns: minmax(104px, 122px) minmax(0, 1fr) !important;
  align-items: start !important;
}

.portal-page--documents .document-table .document-line-type,
.portal-page--documents .document-table .document-description-line,
.portal-page--documents .document-table .document-cell textarea {
  min-width: 0 !important;
}

@container (max-width: 1040px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .portal-page--documents .document-table .document-row--head {
    display: none !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-column: 1 / -1;
  }

  .portal-page--documents .document-table .document-number-cell span,
  .portal-page--documents .document-table .document-unit-cell span {
    display: block;
  }

  .portal-page--documents .document-table .document-line-type {
    width: 100% !important;
  }
}

@container (max-width: 680px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: 1fr !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-template-columns: 1fr !important;
  }
}

/* Laatste override: in de document-editor nooit meer een brede regel onder de preview laten schuiven. */
.portal-page--documents .document-table .document-row:not(.document-row--head) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.portal-page--documents .document-table .document-row--head {
  display: none !important;
}

.portal-page--documents .document-table .document-cell--description {
  grid-column: 1 / -1;
}

.portal-page--documents .document-table .document-number-cell span,
.portal-page--documents .document-table .document-unit-cell span {
  display: block;
}

.portal-page--documents .document-table .document-cell--total {
  display: grid !important;
  align-content: center;
  justify-items: end;
  gap: 4px;
}

.portal-page--documents .document-table .document-cell--total::before {
  content: "Totaal";
  justify-self: start;
  color: #4d7cad;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .portal-page--documents .document-table .document-row:not(.document-row--head) {
    grid-template-columns: 1fr !important;
  }

  .portal-page--documents .document-table .document-cell--description {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL OVERRIDE 2026-05-24: mobiele uploadfoto's groter en alle admin-menu knoppen zichtbaar. */
@media screen and (max-width: 680px) {
  body.site-home .homepage-media-card {
    grid-template-columns: clamp(108px, 31vw, 136px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 130px !important;
  }

  body.site-home .homepage-media-strip--compact .homepage-media-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    max-width: 340px !important;
  }

  body.site-home .homepage-media-card__image {
    grid-row: 1 / span 3 !important;
    width: 100% !important;
    min-height: clamp(106px, 30vw, 144px) !important;
    height: clamp(106px, 30vw, 144px) !important;
    aspect-ratio: 4 / 3 !important;
    align-self: stretch !important;
  }

  body.site-home .homepage-media-card__image img,
  body.site-home .homepage-media-card__image span {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.site-home .homepage-media-card__image img {
    object-fit: cover !important;
  }

  body.site-home .project-card {
    grid-template-columns: clamp(108px, 31vw, 136px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 130px !important;
  }

  body.site-home .project-card .project-media {
    min-height: clamp(106px, 30vw, 144px) !important;
    height: clamp(106px, 30vw, 144px) !important;
  }
}

@media screen and (max-width: 390px) {
  body.site-home .homepage-media-card,
  body.site-home .project-card {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  body.site-home .homepage-media-card__image,
  body.site-home .project-card .project-media {
    min-height: 104px !important;
    height: 104px !important;
  }
}

@media screen and (max-width: 760px) {
  body.portal-page[data-layout-role="admin"] .site-header,
  body.portal-page--admin .site-header {
    position: relative !important;
    z-index: 20000 !important;
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .header-shell,
  body.portal-page--admin .site-header .header-shell {
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  body.portal-page--admin .site-header .header-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .menu-toggle,
  body.portal-page--admin .site-header .menu-toggle {
    display: none !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav,
  body.portal-page--admin .site-header .site-nav.portal-nav {
    display: grid !important;
    width: 100% !important;
    max-height: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px 0 2px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 20020 !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav.is-open,
  body.portal-page--admin .site-header .site-nav.portal-nav.is-open {
    display: grid !important;
  }

  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav > a,
  body.portal-page--admin .site-header .site-nav.portal-nav > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
  }
}

@media screen and (max-width: 390px) {
  body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav,
  body.portal-page--admin .site-header .site-nav.portal-nav {
    grid-template-columns: 1fr !important;
  }
}

/* TRUE FINAL OVERRIDE 2026-05-24c: admin-menu compact zichtbaar in mobile portrait. */
@media screen and (max-width: 760px) {
  html body .site-header .header-shell:has(.portal-nav--admin),
  html body.portal-page[data-layout-role="admin"] .site-header .header-shell,
  html body.portal-page--admin .site-header .header-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .site-header .header-bottom:has(.portal-nav--admin),
  html body.portal-page[data-layout-role="admin"] .site-header .header-bottom,
  html body.portal-page--admin .site-header .header-bottom {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
    overflow: visible !important;
  }

  html body .site-header .header-bottom:has(.portal-nav--admin) .menu-toggle,
  html body.portal-page[data-layout-role="admin"] .site-header .menu-toggle,
  html body.portal-page--admin .site-header .menu-toggle {
    display: none !important;
  }

  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open,
  html body.portal-page[data-layout-role="admin"] .site-header .portal-nav--admin,
  html body.portal-page--admin .site-header .portal-nav--admin {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 0 0 100% !important;
  }

  html body .site-header .portal-nav--admin > a,
  html body .site-header .portal-nav--admin > a.site-nav__cta {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: clamp(0.58rem, 2.35vw, 0.68rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .site-header .portal-nav--admin > a .nav-label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media screen and (min-width: 520px) and (max-width: 760px) {
  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 360px) {
  html body .site-header .portal-nav--admin,
  html body .site-header .portal-nav--admin.is-open {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Login clarity palette */
body.portal-page--guest,
body.portal-page--verification {
  --login-page-bg: #f4f7fb;
  --login-surface: #ffffff;
  --login-surface-soft: #f7faff;
  --login-line: #d8e3ef;
  --login-line-strong: #b8c8da;
  --login-ink: #10233d;
  --login-muted: #5d7089;
  --login-blue: #0f66d6;
  --login-blue-dark: #084da8;
  --login-blue-soft: #e8f2ff;
  --login-focus: rgba(15, 102, 214, 0.22);
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(15, 102, 214, 0.09), transparent 28rem),
    radial-gradient(circle at 86% 8%, rgba(32, 99, 158, 0.07), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, var(--login-page-bg) 48%, #edf3f9 100%) !important;
  color: var(--login-ink) !important;
  overflow-x: hidden !important;
}

body.portal-page--guest::before,
body.portal-page--verification::before,
body.portal-page--guest .page-noise,
body.portal-page--verification .page-noise {
  opacity: 0 !important;
}

body.portal-page--guest .top-toolbar,
body.portal-page--verification .top-toolbar {
  border-bottom: 1px solid var(--login-line) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--login-muted) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

body.portal-page--guest .top-toolbar a,
body.portal-page--verification .top-toolbar a,
body.portal-page--guest .status-pill,
body.portal-page--verification .status-pill {
  color: var(--login-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.portal-page--guest .site-header,
body.portal-page--verification .site-header {
  background: transparent !important;
  box-shadow: none !important;
}

body.portal-page--guest .header-shell.header-shell--portal,
body.portal-page--verification .header-shell.header-shell--portal {
  border: 0 !important;
  border-bottom: 1px solid var(--login-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)) !important;
  box-shadow: 0 12px 30px rgba(16, 35, 61, 0.06) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body.portal-page--guest .header-shell::before,
body.portal-page--guest .header-shell::after,
body.portal-page--verification .header-shell::before,
body.portal-page--verification .header-shell::after,
body.portal-page--guest .panel-corners,
body.portal-page--verification .panel-corners {
  display: none !important;
  content: none !important;
}

body.portal-page--guest .site-nav a,
body.portal-page--verification .site-nav a,
body.portal-page--guest .portal-trigger,
body.portal-page--verification .portal-trigger,
body.portal-page--guest .client-access-link,
body.portal-page--verification .client-access-link {
  border: 1px solid var(--login-line) !important;
  background: #ffffff !important;
  color: var(--login-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

body.portal-page--guest .site-nav a::before,
body.portal-page--guest .site-nav a::after,
body.portal-page--verification .site-nav a::before,
body.portal-page--verification .site-nav a::after,
body.portal-page--guest .site-nav a .nav-core,
body.portal-page--guest .site-nav a .nav-sheen,
body.portal-page--verification .site-nav a .nav-core,
body.portal-page--verification .site-nav a .nav-sheen {
  display: none !important;
  content: none !important;
}

body.portal-page--guest .site-nav a:hover,
body.portal-page--guest .site-nav a:focus-visible,
body.portal-page--guest .site-nav a.is-active,
body.portal-page--verification .site-nav a:hover,
body.portal-page--verification .site-nav a:focus-visible,
body.portal-page--verification .site-nav a.is-active {
  border-color: var(--login-blue) !important;
  background: var(--login-blue-soft) !important;
  color: var(--login-blue-dark) !important;
  transform: none !important;
  box-shadow: 0 0 0 3px var(--login-focus) !important;
}

body.portal-page--guest .content-section::before,
body.portal-page--guest .portal-section::before,
body.portal-page--verification .content-section::before,
body.portal-page--verification .portal-section::before {
  display: none !important;
  content: none !important;
}

body.portal-page--guest .portal-auth-section,
body.portal-page--verification .portal-auth-section {
  width: min(100% - 32px, 1120px) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 5vw, 66px) 0 clamp(36px, 6vw, 76px) !important;
  background: transparent !important;
}

body.portal-page--guest .portal-auth-shell,
body.portal-page--verification .portal-auth-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
}

body.portal-page--guest .portal-auth-card,
body.portal-page--verification .portal-auth-card {
  width: 100% !important;
  max-width: 760px !important;
  padding: clamp(24px, 4vw, 42px) !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 12px !important;
  background: var(--login-surface) !important;
  background-image: none !important;
  color: var(--login-ink) !important;
  box-shadow: 0 22px 58px rgba(16, 35, 61, 0.10) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.portal-page--guest .portal-auth-card::before,
body.portal-page--guest .portal-auth-card::after,
body.portal-page--verification .portal-auth-card::before,
body.portal-page--verification .portal-auth-card::after {
  display: none !important;
  content: none !important;
}

body.portal-page--guest .portal-auth-card .section-kicker,
body.portal-page--verification .portal-auth-card .section-kicker {
  margin-bottom: 8px !important;
  color: var(--login-blue) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.14em !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-card h1,
body.portal-page--verification .portal-auth-card h1 {
  margin: 0 0 10px !important;
  color: var(--login-ink) !important;
  font-size: clamp(2rem, 1.45rem + 1.5vw, 3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-card h2,
body.portal-page--verification .portal-auth-card h2 {
  color: var(--login-ink) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-card p,
body.portal-page--verification .portal-auth-card p {
  color: var(--login-muted) !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-switch,
body.portal-page--verification .portal-auth-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 22px 0 20px !important;
  padding: 6px !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 10px !important;
  background: var(--login-surface-soft) !important;
  box-shadow: none !important;
}

body.portal-page--guest .portal-auth-tab,
body.portal-page--verification .portal-auth-tab {
  min-height: 44px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--login-muted) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.portal-page--guest .portal-auth-tab.is-active,
body.portal-page--verification .portal-auth-tab.is-active {
  border-color: var(--login-blue) !important;
  background: var(--login-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 102, 214, 0.22) !important;
}

body.portal-page--guest .portal-auth-tab:hover,
body.portal-page--guest .portal-auth-tab:focus-visible,
body.portal-page--verification .portal-auth-tab:hover,
body.portal-page--verification .portal-auth-tab:focus-visible {
  border-color: var(--login-blue) !important;
  color: var(--login-blue-dark) !important;
  box-shadow: 0 0 0 3px var(--login-focus) !important;
}

body.portal-page--guest .portal-auth-tab.is-active:hover,
body.portal-page--guest .portal-auth-tab.is-active:focus-visible,
body.portal-page--verification .portal-auth-tab.is-active:hover,
body.portal-page--verification .portal-auth-tab.is-active:focus-visible {
  color: #ffffff !important;
}

body.portal-page--guest .portal-auth-panels,
body.portal-page--guest .portal-auth-panel,
body.portal-page--guest .portal-auth-form,
body.portal-page--verification .portal-auth-panels,
body.portal-page--verification .portal-auth-panel,
body.portal-page--verification .portal-auth-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.portal-page--guest .portal-auth-form,
body.portal-page--verification .portal-auth-form {
  gap: 16px !important;
}

body.portal-page--guest .portal-auth-form .field,
body.portal-page--verification .portal-auth-form .field {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

body.portal-page--guest .portal-auth-form .field span,
body.portal-page--verification .portal-auth-form .field span {
  color: var(--login-ink) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.portal-page--guest .portal-auth-form input,
body.portal-page--guest .portal-auth-form select,
body.portal-page--guest .portal-auth-form textarea,
body.portal-page--verification .portal-auth-form input,
body.portal-page--verification .portal-auth-form select,
body.portal-page--verification .portal-auth-form textarea {
  min-height: 52px !important;
  border: 1px solid var(--login-line-strong) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--login-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.portal-page--guest .portal-auth-form input:focus,
body.portal-page--guest .portal-auth-form select:focus,
body.portal-page--guest .portal-auth-form textarea:focus,
body.portal-page--verification .portal-auth-form input:focus,
body.portal-page--verification .portal-auth-form select:focus,
body.portal-page--verification .portal-auth-form textarea:focus {
  border-color: var(--login-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px var(--login-focus) !important;
}

body.portal-page--guest .portal-auth-form input::placeholder,
body.portal-page--verification .portal-auth-form input::placeholder,
body.portal-page--guest .portal-auth-form textarea::placeholder,
body.portal-page--verification .portal-auth-form textarea::placeholder {
  color: #8a9ab0 !important;
}

body.portal-page--guest .portal-auth-card .login-actions,
body.portal-page--verification .portal-auth-card .login-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 8px !important;
}

body.portal-page--guest .portal-auth-card .button,
body.portal-page--verification .portal-auth-card .button {
  min-height: 48px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.portal-page--guest .portal-auth-card .button::before,
body.portal-page--guest .portal-auth-card .button::after,
body.portal-page--verification .portal-auth-card .button::before,
body.portal-page--verification .portal-auth-card .button::after {
  display: none !important;
  content: none !important;
}

body.portal-page--guest .portal-auth-card .button-primary,
body.portal-page--guest .portal-auth-card button.button-primary,
body.portal-page--verification .portal-auth-card .button-primary,
body.portal-page--verification .portal-auth-card button.button-primary {
  border-color: var(--login-blue) !important;
  background: linear-gradient(180deg, #1474ec, var(--login-blue)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 102, 214, 0.22) !important;
}

body.portal-page--guest .portal-auth-card .button-primary:hover,
body.portal-page--guest .portal-auth-card .button-primary:focus-visible,
body.portal-page--guest .portal-auth-card button.button-primary:hover,
body.portal-page--guest .portal-auth-card button.button-primary:focus-visible,
body.portal-page--verification .portal-auth-card .button-primary:hover,
body.portal-page--verification .portal-auth-card .button-primary:focus-visible,
body.portal-page--verification .portal-auth-card button.button-primary:hover,
body.portal-page--verification .portal-auth-card button.button-primary:focus-visible {
  border-color: var(--login-blue-dark) !important;
  background: linear-gradient(180deg, #0f66d6, var(--login-blue-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px var(--login-focus), 0 14px 28px rgba(8, 77, 168, 0.24) !important;
}

body.portal-page--guest .portal-auth-card .button-secondary,
body.portal-page--verification .portal-auth-card .button-secondary {
  border-color: var(--login-line-strong) !important;
  background: #ffffff !important;
  color: var(--login-ink) !important;
}

body.portal-page--guest .portal-auth-card .button-secondary:hover,
body.portal-page--guest .portal-auth-card .button-secondary:focus-visible,
body.portal-page--verification .portal-auth-card .button-secondary:hover,
body.portal-page--verification .portal-auth-card .button-secondary:focus-visible {
  border-color: var(--login-blue) !important;
  background: var(--login-blue-soft) !important;
  color: var(--login-blue-dark) !important;
  box-shadow: 0 0 0 4px var(--login-focus) !important;
}

body.portal-page--guest .portal-auth-note,
body.portal-page--verification .portal-auth-note,
body.portal-page--guest .password-match-indicator,
body.portal-page--guest .password-strength-meter,
body.portal-page--verification .password-match-indicator,
body.portal-page--verification .password-strength-meter {
  border: 1px solid var(--login-line) !important;
  border-radius: 8px !important;
  background: var(--login-surface-soft) !important;
  color: var(--login-muted) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.portal-page--guest .portal-auth-note strong,
body.portal-page--verification .portal-auth-note strong,
body.portal-page--guest .password-feedback-row strong,
body.portal-page--verification .password-feedback-row strong {
  color: var(--login-ink) !important;
}

body.portal-page--guest .portal-auth-note p,
body.portal-page--verification .portal-auth-note p,
body.portal-page--guest .field-hint,
body.portal-page--verification .field-hint,
body.portal-page--guest .password-feedback-row span,
body.portal-page--verification .password-feedback-row span {
  color: var(--login-muted) !important;
}

body.portal-page--guest .login-feedback,
body.portal-page--verification .login-feedback {
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.portal-page--guest .login-feedback--success,
body.portal-page--verification .login-feedback--success {
  border-color: #9bd7b7 !important;
  background: #effbf4 !important;
  color: #155c32 !important;
}

body.portal-page--guest .login-feedback--error,
body.portal-page--verification .login-feedback--error {
  border-color: #f0b2b2 !important;
  background: #fff3f3 !important;
  color: #8a2424 !important;
}

body.portal-page--guest .portal-inline-link,
body.portal-page--verification .portal-inline-link {
  color: var(--login-blue) !important;
}

body.portal-page--guest .portal-inline-link:hover,
body.portal-page--guest .portal-inline-link:focus-visible,
body.portal-page--verification .portal-inline-link:hover,
body.portal-page--verification .portal-inline-link:focus-visible {
  color: var(--login-blue-dark) !important;
}

@media (max-width: 680px) {
  body.portal-page--guest .portal-auth-section,
  body.portal-page--verification .portal-auth-section {
    width: min(100% - 20px, 1120px) !important;
    padding-top: 18px !important;
  }

  body.portal-page--guest .portal-auth-card,
  body.portal-page--verification .portal-auth-card {
    padding: 20px 16px !important;
  }

  body.portal-page--guest .portal-auth-switch,
  body.portal-page--verification .portal-auth-switch,
  body.portal-page--guest .portal-auth-card .login-actions,
  body.portal-page--verification .portal-auth-card .login-actions {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  body.portal-page--guest .portal-auth-card .button,
  body.portal-page--verification .portal-auth-card .button {
    width: 100% !important;
  }
}
/* Admin absolute neutral override 2026-06-04 */
html body.portal-page[data-layout-role="admin"],
html body.portal-page--admin[data-layout-role="admin"] {
  background: #f5f7fa !important;
  color: #142235 !important;
}

html body.portal-page[data-layout-role="admin"]::before,
html body.portal-page[data-layout-role="admin"]::after,
html body.portal-page[data-layout-role="admin"] .page-noise,
html body.portal-page[data-layout-role="admin"] .panel-corners,
html body.portal-page[data-layout-role="admin"] .nav-sheen,
html body.portal-page[data-layout-role="admin"] .tech-panel::before,
html body.portal-page[data-layout-role="admin"] .tech-panel::after,
html body.portal-page[data-layout-role="admin"] .portal-section-card::before,
html body.portal-page[data-layout-role="admin"] .portal-section-card::after,
html body.portal-page[data-layout-role="admin"] .button::before,
html body.portal-page[data-layout-role="admin"] .button::after,
html body.portal-page[data-layout-role="admin"] .portal-inline-button::before,
html body.portal-page[data-layout-role="admin"] .portal-inline-button::after,
html body.portal-page[data-layout-role="admin"] .portal-admin-tab::before,
html body.portal-page[data-layout-role="admin"] .portal-admin-tab::after,
html body.portal-page[data-layout-role="admin"] .portal-case-filter::before,
html body.portal-page[data-layout-role="admin"] .portal-case-filter::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.portal-page[data-layout-role="admin"] .rs-admin-topbar,
html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar,
html body.portal-page[data-layout-role="admin"] > .rs-admin-sidebar,
html body.portal-page[data-layout-role="admin"] .rs-admin-help {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dde5ee !important;
  box-shadow: none !important;
}

html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar__nav a,
html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--customers,
html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--backup,
html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a,
html body.portal-page[data-layout-role="admin"] .portal-admin-mobile-menu__grid a {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #26384d !important;
  -webkit-text-fill-color: #26384d !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar__nav a.is-active,
html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--customers.is-active,
html body.portal-page[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--backup.is-active,
html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a.is-active,
html body.portal-page[data-layout-role="admin"] .portal-admin-mobile-menu__grid a.is-active {
  border-color: #c8d8eb !important;
  border-left: 4px solid #2c6fbb !important;
  background: #f1f6fc !important;
  background-image: none !important;
  color: #173d67 !important;
  -webkit-text-fill-color: #173d67 !important;
  box-shadow: none !important;
}

html body.portal-page[data-layout-role="admin"] .tech-panel,
html body.portal-page[data-layout-role="admin"] .tech-panel:hover,
html body.portal-page[data-layout-role="admin"] .tech-panel:focus-within,
html body.portal-page[data-layout-role="admin"] .portal-section-card,
html body.portal-page[data-layout-role="admin"] .portal-section-card:hover,
html body.portal-page[data-layout-role="admin"] .portal-section-card:focus-within,
html body.portal-page[data-layout-role="admin"] .portal-section-card.tech-panel,
html body.portal-page[data-layout-role="admin"] .portal-section-card.tech-panel:hover,
html body.portal-page[data-layout-role="admin"] .portal-section-card.tech-panel:focus-within,
html body.portal-page[data-layout-role="admin"] .portal-section-card.tech-panel.price-manager-card,
html body.portal-page[data-layout-role="admin"] .portal-section-card.tech-panel.price-manager-card:hover,
html body.portal-page[data-layout-role="admin"] .portal-section-card.tech-panel.price-manager-card:focus-within,
html body.portal-page[data-layout-role="admin"] .price-manager-card,
html body.portal-page[data-layout-role="admin"] .price-manager-card:hover,
html body.portal-page[data-layout-role="admin"] .price-manager-card:focus-within,
html body.portal-page[data-layout-role="admin"] .portal-admin-sidebar-card,
html body.portal-page[data-layout-role="admin"] .portal-admin-detail-header,
html body.portal-page[data-layout-role="admin"] .portal-admin-dossier,
html body.portal-page[data-layout-role="admin"] .portal-admin-card,
html body.portal-page[data-layout-role="admin"] .portal-case,
html body.portal-page[data-layout-role="admin"] .portal-admin-document,
html body.portal-page[data-layout-role="admin"] .portal-admin-photo-card,
html body.portal-page[data-layout-role="admin"] .document-builder-widget,
html body.portal-page[data-layout-role="admin"] .account-card,
html body.portal-page[data-layout-role="admin"] .planning-dashboard-card,
html body.portal-page[data-layout-role="admin"] .planning-admin-actions-card,
html body.portal-page[data-layout-role="admin"] .planning-group-card,
html body.portal-page[data-layout-role="admin"] .planning-empty-card,
html body.portal-page[data-layout-role="admin"] .portal-backup-panel,
html body.portal-page[data-layout-role="admin"] .portal-backup-summary-card,
html body.portal-page[data-layout-role="admin"] .portal-backup-list-item {
  border: 1px solid #dbe4ee !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #142235 !important;
  box-shadow: 0 8px 20px rgba(20, 34, 53, 0.05) !important;
  filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.portal-page[data-layout-role="admin"] .portal-mini-note,
html body.portal-page[data-layout-role="admin"] .portal-case__detail,
html body.portal-page[data-layout-role="admin"] .portal-admin-panel,
html body.portal-page[data-layout-role="admin"] .portal-admin-tabbar,
html body.portal-page[data-layout-role="admin"] .portal-case-filter-bar,
html body.portal-page[data-layout-role="admin"] .portal-filter-bar,
html body.portal-page[data-layout-role="admin"] .portal-search-form,
html body.portal-page[data-layout-role="admin"] .planning-quickbar,
html body.portal-page[data-layout-role="admin"] .planning-admin-search,
html body.portal-page[data-layout-role="admin"] .portal-backup-upload,
html body.portal-page[data-layout-role="admin"] .price-manager-form,
html body.portal-page[data-layout-role="admin"] .price-manager-grid {
  border-color: #dbe4ee !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.portal-page[data-layout-role="admin"] .button,
html body.portal-page[data-layout-role="admin"] .portal-inline-button,
html body.portal-page[data-layout-role="admin"] .portal-mini-button,
html body.portal-page[data-layout-role="admin"] .filter-button,
html body.portal-page[data-layout-role="admin"] .portal-admin-tab,
html body.portal-page[data-layout-role="admin"] .portal-case-filter,
html body.portal-page[data-layout-role="admin"] .portal-finance-filter,
html body.portal-page[data-layout-role="admin"] .portal-finance-chip,
html body.portal-page[data-layout-role="admin"] input[type="file"]::file-selector-button {
  border: 1px solid #cbd8e6 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #26384d !important;
  -webkit-text-fill-color: #26384d !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

html body.portal-page[data-layout-role="admin"] .button-primary,
html body.portal-page[data-layout-role="admin"] .portal-inline-button.button-primary,
html body.portal-page[data-layout-role="admin"] button[type="submit"]:not(.portal-mini-button),
html body.portal-page[data-layout-role="admin"] .filter-button.is-active,
html body.portal-page[data-layout-role="admin"] .portal-case-filter.is-active,
html body.portal-page[data-layout-role="admin"] .portal-admin-tab.is-active,
html body.portal-page[data-layout-role="admin"] .portal-admin-tab[aria-selected="true"] {
  border-color: #2c6fbb !important;
  background-color: #2c6fbb !important;
  background: #2c6fbb !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

html body.portal-page[data-layout-role="admin"] input,
html body.portal-page[data-layout-role="admin"] select,
html body.portal-page[data-layout-role="admin"] textarea {
  border: 1px solid #cbd8e6 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #142235 !important;
  box-shadow: none !important;
}

html body.portal-page[data-layout-role="admin"] .portal-status,
html body.portal-page[data-layout-role="admin"] .status-pill,
html body.portal-page[data-layout-role="admin"] .portal-kpi,
html body.portal-page[data-layout-role="admin"] .portal-case__meta span,
html body.portal-page[data-layout-role="admin"] .portal-admin-detail-tags span {
  border-color: #dbe4ee !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  background-image: none !important;
  color: #485d72 !important;
  box-shadow: none !important;
}
/* Admin grayscale no blue 2026-06-04 */
html body.portal-page[data-layout-role="admin"],
html body.portal-page--admin[data-layout-role="admin"],
html body[data-layout-role="admin"] {
  --admin-gray-bg: #f4f5f6;
  --admin-gray-surface: #ffffff;
  --admin-gray-soft: #f7f8f9;
  --admin-gray-muted: #eceff2;
  --admin-gray-border: #d8dde2;
  --admin-gray-border-strong: #bfc7cf;
  --admin-gray-text: #1f242b;
  --admin-gray-text-soft: #5f6873;
  --admin-gray-active: #2f343a;
  --admin-gray-active-hover: #1f2328;
  --admin-gray-active-soft: #eef0f2;
  background: var(--admin-gray-bg) !important;
  color: var(--admin-gray-text) !important;
}

html body.portal-page[data-layout-role="admin"]::before,
html body.portal-page[data-layout-role="admin"]::after,
html body[data-layout-role="admin"]::before,
html body[data-layout-role="admin"]::after,
html body[data-layout-role="admin"] .page-noise,
html body[data-layout-role="admin"] .panel-corners,
html body[data-layout-role="admin"] .nav-sheen,
html body[data-layout-role="admin"] .tech-panel::before,
html body[data-layout-role="admin"] .tech-panel::after,
html body[data-layout-role="admin"] .portal-section-card::before,
html body[data-layout-role="admin"] .portal-section-card::after,
html body[data-layout-role="admin"] .button::before,
html body[data-layout-role="admin"] .button::after,
html body[data-layout-role="admin"] .portal-inline-button::before,
html body[data-layout-role="admin"] .portal-inline-button::after,
html body[data-layout-role="admin"] .portal-admin-tab::before,
html body[data-layout-role="admin"] .portal-admin-tab::after,
html body[data-layout-role="admin"] .portal-case-filter::before,
html body[data-layout-role="admin"] .portal-case-filter::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-layout-role="admin"] *,
html body[data-layout-role="admin"] *::before,
html body[data-layout-role="admin"] *::after {
  text-shadow: none !important;
}

html body[data-layout-role="admin"] .rs-admin-topbar,
html body[data-layout-role="admin"] .rs-admin-sidebar,
html body[data-layout-role="admin"] > .rs-admin-sidebar,
html body[data-layout-role="admin"] .rs-admin-help {
  background: #ffffff !important;
  background-image: none !important;
  border-color: var(--admin-gray-border) !important;
  box-shadow: none !important;
  color: var(--admin-gray-text) !important;
}

html body[data-layout-role="admin"] .rs-admin-brand,
html body[data-layout-role="admin"] .rs-admin-brand span,
html body[data-layout-role="admin"] h1,
html body[data-layout-role="admin"] h2,
html body[data-layout-role="admin"] h3,
html body[data-layout-role="admin"] h4,
html body[data-layout-role="admin"] strong,
html body[data-layout-role="admin"] .nav-label {
  color: var(--admin-gray-text) !important;
  -webkit-text-fill-color: var(--admin-gray-text) !important;
}

html body[data-layout-role="admin"] p,
html body[data-layout-role="admin"] small,
html body[data-layout-role="admin"] .field-hint,
html body[data-layout-role="admin"] .portal-case__meta,
html body[data-layout-role="admin"] .portal-case__summary,
html body[data-layout-role="admin"] .portal-admin-document__meta,
html body[data-layout-role="admin"] .portal-session__text {
  color: var(--admin-gray-text-soft) !important;
  -webkit-text-fill-color: var(--admin-gray-text-soft) !important;
}

html body[data-layout-role="admin"] .section-kicker,
html body[data-layout-role="admin"] label > span:first-child,
html body[data-layout-role="admin"] .field > span:first-child,
html body[data-layout-role="admin"] legend {
  color: #5c646d !important;
  -webkit-text-fill-color: #5c646d !important;
  letter-spacing: 0.1em !important;
}

html body[data-layout-role="admin"] .rs-admin-sidebar__nav a,
html body[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--customers,
html body[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--backup,
html body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a,
html body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #2f343a !important;
  -webkit-text-fill-color: #2f343a !important;
  box-shadow: none !important;
  filter: none !important;
}

html body[data-layout-role="admin"] .rs-admin-sidebar__nav a:hover,
html body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a:hover,
html body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a:hover,
html body[data-layout-role="admin"] .rs-admin-sidebar__nav a:focus-visible,
html body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a:focus-visible,
html body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a:focus-visible {
  border-color: var(--admin-gray-border) !important;
  background: var(--admin-gray-soft) !important;
  background-image: none !important;
  color: #1f242b !important;
  -webkit-text-fill-color: #1f242b !important;
}

html body[data-layout-role="admin"] .rs-admin-sidebar__nav a.is-active,
html body[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--customers.is-active,
html body[data-layout-role="admin"] .rs-admin-sidebar__nav a.portal-admin-nav--backup.is-active,
html body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a.is-active,
html body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a.is-active {
  border-color: var(--admin-gray-border-strong) !important;
  border-left: 4px solid var(--admin-gray-active) !important;
  background: var(--admin-gray-active-soft) !important;
  background-color: var(--admin-gray-active-soft) !important;
  background-image: none !important;
  color: #1f242b !important;
  -webkit-text-fill-color: #1f242b !important;
  box-shadow: none !important;
}

html body[data-layout-role="admin"] .rs-admin-sidebar__nav .nav-core,
html body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin .nav-core,
html body[data-layout-role="admin"] .portal-admin-mobile-menu__grid .nav-core,
html body[data-layout-role="admin"] .rs-admin-sidebar__nav a.is-active .nav-core,
html body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a.is-active .nav-core,
html body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a.is-active .nav-core {
  background: #6b737c !important;
  opacity: 1 !important;
}

html body[data-layout-role="admin"] .tech-panel,
html body[data-layout-role="admin"] .tech-panel:hover,
html body[data-layout-role="admin"] .tech-panel:focus-within,
html body[data-layout-role="admin"] .portal-section-card,
html body[data-layout-role="admin"] .portal-section-card:hover,
html body[data-layout-role="admin"] .portal-section-card:focus-within,
html body[data-layout-role="admin"] .portal-section-card.tech-panel,
html body[data-layout-role="admin"] .portal-section-card.tech-panel:hover,
html body[data-layout-role="admin"] .portal-section-card.tech-panel:focus-within,
html body[data-layout-role="admin"] .portal-section-card.tech-panel.price-manager-card,
html body[data-layout-role="admin"] .portal-section-card.tech-panel.price-manager-card:hover,
html body[data-layout-role="admin"] .portal-section-card.tech-panel.price-manager-card:focus-within,
html body[data-layout-role="admin"] .price-manager-card,
html body[data-layout-role="admin"] .price-manager-card:hover,
html body[data-layout-role="admin"] .price-manager-card:focus-within,
html body[data-layout-role="admin"] .portal-admin-sidebar-card,
html body[data-layout-role="admin"] .portal-admin-detail-header,
html body[data-layout-role="admin"] .portal-admin-dossier,
html body[data-layout-role="admin"] .portal-admin-card,
html body[data-layout-role="admin"] .portal-case,
html body[data-layout-role="admin"] .portal-admin-document,
html body[data-layout-role="admin"] .portal-admin-photo-card,
html body[data-layout-role="admin"] .document-builder-widget,
html body[data-layout-role="admin"] .price-manager-card,
html body[data-layout-role="admin"] .account-card,
html body[data-layout-role="admin"] .login-card,
html body[data-layout-role="admin"] .planning-dashboard-card,
html body[data-layout-role="admin"] .planning-admin-actions-card,
html body[data-layout-role="admin"] .planning-group-card,
html body[data-layout-role="admin"] .planning-empty-card,
html body[data-layout-role="admin"] .portal-backup-panel,
html body[data-layout-role="admin"] .portal-backup-summary-card,
html body[data-layout-role="admin"] .portal-backup-list-item {
  border: 1px solid var(--admin-gray-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--admin-gray-text) !important;
  -webkit-text-fill-color: initial !important;
  box-shadow: 0 8px 18px rgba(31, 36, 43, 0.045) !important;
  filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-layout-role="admin"] .portal-mini-note,
html body[data-layout-role="admin"] .portal-case__detail,
html body[data-layout-role="admin"] .portal-admin-panel,
html body[data-layout-role="admin"] .portal-admin-tabbar,
html body[data-layout-role="admin"] .portal-case-filter-bar,
html body[data-layout-role="admin"] .portal-filter-bar,
html body[data-layout-role="admin"] .portal-search-form,
html body[data-layout-role="admin"] .planning-quickbar,
html body[data-layout-role="admin"] .planning-admin-search,
html body[data-layout-role="admin"] .portal-backup-upload,
html body[data-layout-role="admin"] .price-manager-form,
html body[data-layout-role="admin"] .price-manager-grid,
html body[data-layout-role="admin"] .portal-attachment-list,
html body[data-layout-role="admin"] .portal-notification-open-area {
  border-color: var(--admin-gray-border) !important;
  background: var(--admin-gray-soft) !important;
  background-color: var(--admin-gray-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-layout-role="admin"] .button,
html body[data-layout-role="admin"] .portal-inline-button,
html body[data-layout-role="admin"] .portal-mini-button,
html body[data-layout-role="admin"] .filter-button,
html body[data-layout-role="admin"] .portal-admin-tab,
html body[data-layout-role="admin"] .portal-case-filter,
html body[data-layout-role="admin"] .portal-finance-filter,
html body[data-layout-role="admin"] .portal-finance-chip,
html body[data-layout-role="admin"] .portal-blocked-menu__toggle,
html body[data-layout-role="admin"] input[type="file"]::file-selector-button {
  border: 1px solid var(--admin-gray-border-strong) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #2f343a !important;
  -webkit-text-fill-color: #2f343a !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

html body[data-layout-role="admin"] .button-primary,
html body[data-layout-role="admin"] .portal-inline-button.button-primary,
html body[data-layout-role="admin"] button[type="submit"]:not(.portal-mini-button),
html body[data-layout-role="admin"] .filter-button.is-active,
html body[data-layout-role="admin"] .portal-case-filter.is-active,
html body[data-layout-role="admin"] .portal-admin-tab.is-active,
html body[data-layout-role="admin"] .portal-admin-tab[aria-selected="true"],
html body[data-layout-role="admin"] .portal-finance-filter.is-active,
html body[data-layout-role="admin"] .portal-finance-chip.is-active {
  border-color: var(--admin-gray-active) !important;
  background: var(--admin-gray-active) !important;
  background-color: var(--admin-gray-active) !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

html body[data-layout-role="admin"] .button-primary:hover,
html body[data-layout-role="admin"] .button-primary:focus-visible,
html body[data-layout-role="admin"] .portal-inline-button.button-primary:hover,
html body[data-layout-role="admin"] .portal-inline-button.button-primary:focus-visible,
html body[data-layout-role="admin"] button[type="submit"]:not(.portal-mini-button):hover,
html body[data-layout-role="admin"] button[type="submit"]:not(.portal-mini-button):focus-visible,
html body[data-layout-role="admin"] .filter-button.is-active:hover,
html body[data-layout-role="admin"] .portal-case-filter.is-active:hover,
html body[data-layout-role="admin"] .portal-admin-tab.is-active:hover,
html body[data-layout-role="admin"] .portal-admin-tab[aria-selected="true"]:hover {
  border-color: var(--admin-gray-active-hover) !important;
  background: var(--admin-gray-active-hover) !important;
  background-color: var(--admin-gray-active-hover) !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-layout-role="admin"] input,
html body[data-layout-role="admin"] select,
html body[data-layout-role="admin"] textarea {
  border: 1px solid var(--admin-gray-border-strong) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--admin-gray-text) !important;
  -webkit-text-fill-color: var(--admin-gray-text) !important;
  box-shadow: none !important;
}

html body[data-layout-role="admin"] input:focus,
html body[data-layout-role="admin"] select:focus,
html body[data-layout-role="admin"] textarea:focus {
  border-color: #69717a !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(31, 36, 43, 0.14) !important;
}

html body[data-layout-role="admin"] .portal-status,
html body[data-layout-role="admin"] .status-pill,
html body[data-layout-role="admin"] .portal-kpi,
html body[data-layout-role="admin"] .portal-admin-stat,
html body[data-layout-role="admin"] .portal-case__meta span,
html body[data-layout-role="admin"] .portal-admin-detail-tags span,
html body[data-layout-role="admin"] .planning-dashboard-stats article {
  border-color: var(--admin-gray-border) !important;
  background: var(--admin-gray-soft) !important;
  background-color: var(--admin-gray-soft) !important;
  background-image: none !important;
  color: #4f5964 !important;
  -webkit-text-fill-color: #4f5964 !important;
  box-shadow: none !important;
}
/* ADMIN NO BLUE HARD OVERRIDE 2026-06-04 */
body[data-layout-role="admin"],
body[data-layout-role="admin"] * {
  --accent: #2f343a !important;
  --accent-rgb: 47, 52, 58 !important;
  --accent-text: #2f343a !important;
  --primary: #2f343a !important;
  --primary-rgb: 47, 52, 58 !important;
  --blue: #2f343a !important;
  --admin-blue: #2f343a !important;
  --admin-accent: #2f343a !important;
  --admin-neutral-accent: #2f343a !important;
  --admin-gray-active: #2f343a !important;
}

body[data-layout-role="admin"] :is(
  .tech-panel,
  .portal-section-card,
  .price-manager-card,
  .portal-admin-sidebar-card,
  .portal-admin-detail-header,
  .portal-admin-dossier,
  .portal-mini-note,
  .portal-case,
  .portal-admin-document,
  .portal-admin-photo-card,
  .portal-admin-panel,
  .portal-admin-tabbar,
  .portal-case-filter-bar,
  .portal-filter-bar,
  .portal-search-form,
  .planning-quickbar,
  .planning-admin-search,
  .portal-backup-panel,
  .portal-backup-summary-card,
  .portal-backup-list-item,
  .portal-backup-upload,
  .document-builder-widget,
  .account-card,
  .planning-dashboard-card,
  .planning-admin-actions-card,
  .planning-group-card,
  .planning-empty-card
),
body[data-layout-role="admin"] :is(
  .tech-panel,
  .portal-section-card,
  .price-manager-card,
  .portal-admin-sidebar-card,
  .portal-admin-detail-header,
  .portal-admin-dossier,
  .portal-mini-note,
  .portal-case,
  .portal-admin-document,
  .portal-admin-photo-card,
  .portal-admin-panel,
  .portal-admin-tabbar,
  .portal-case-filter-bar,
  .portal-filter-bar,
  .portal-search-form,
  .planning-quickbar,
  .planning-admin-search,
  .portal-backup-panel,
  .portal-backup-summary-card,
  .portal-backup-list-item,
  .portal-backup-upload,
  .document-builder-widget,
  .account-card,
  .planning-dashboard-card,
  .planning-admin-actions-card,
  .planning-group-card,
  .planning-empty-card
):hover,
body[data-layout-role="admin"] :is(
  .tech-panel,
  .portal-section-card,
  .price-manager-card,
  .portal-admin-sidebar-card,
  .portal-admin-detail-header,
  .portal-admin-dossier,
  .portal-mini-note,
  .portal-case,
  .portal-admin-document,
  .portal-admin-photo-card,
  .portal-admin-panel,
  .portal-admin-tabbar,
  .portal-case-filter-bar,
  .portal-filter-bar,
  .portal-search-form,
  .planning-quickbar,
  .planning-admin-search,
  .portal-backup-panel,
  .portal-backup-summary-card,
  .portal-backup-list-item,
  .portal-backup-upload,
  .document-builder-widget,
  .account-card,
  .planning-dashboard-card,
  .planning-admin-actions-card,
  .planning-group-card,
  .planning-empty-card
):focus-within {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d8dde2 !important;
  color: #1f242b !important;
  box-shadow: 0 8px 18px rgba(31,36,43,.05) !important;
  filter: none !important;
}

body[data-layout-role="admin"] :is(
  button,
  .button,
  .button-primary,
  .button-secondary,
  .portal-inline-button,
  .portal-mini-button,
  .filter-button,
  .portal-admin-tab,
  .portal-case-filter,
  .portal-finance-filter,
  .portal-finance-chip,
  .portal-blocked-menu__toggle,
  .rs-admin-sidebar__nav a,
  .site-nav.portal-nav--admin > a,
  input[type="file"]::file-selector-button
) {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

body[data-layout-role="admin"] :is(
  .button-primary,
  .portal-inline-button.button-primary,
  button[type="submit"]:not(.portal-mini-button),
  .filter-button.is-active,
  .portal-case-filter.is-active,
  .portal-admin-tab.is-active,
  .portal-admin-tab[aria-selected="true"],
  .portal-finance-filter.is-active,
  .portal-finance-chip.is-active
) {
  background: #2f343a !important;
  background-color: #2f343a !important;
  background-image: none !important;
  border-color: #2f343a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-layout-role="admin"] :is(input, select, textarea) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #bfc7cf !important;
  color: #1f242b !important;
  box-shadow: none !important;
}

body[data-layout-role="admin"] :is(.portal-status,.status-pill,.portal-kpi,.portal-admin-stat,.portal-case__meta span,.portal-admin-detail-tags span) {
  background: #f4f5f6 !important;
  background-color: #f4f5f6 !important;
  background-image: none !important;
  border-color: #d8dde2 !important;
  color: #4f5964 !important;
  box-shadow: none !important;
}
/* ADMIN FORCE GRAY ALL ADMIN PAGES 2026-06-04 */
body.portal-page--admin,
body.portal-page--admin * {
  --accent: #30343a !important;
  --accent-rgb: 48,52,58 !important;
  --accent-text: #30343a !important;
  --primary: #30343a !important;
  --primary-rgb: 48,52,58 !important;
  --blue: #30343a !important;
  --admin-blue: #30343a !important;
  --admin-accent: #30343a !important;
  --admin-neutral-accent: #30343a !important;
}

body.portal-page--admin :is(.button-primary,.portal-inline-button.button-primary,button[type="submit"],.filter-button.is-active,.portal-finance-filter.is-active,.portal-finance-chip.is-active,.portal-auth-tab.is-active,.portal-case-filter.is-active,.portal-admin-tab.is-active,.portal-admin-tab[aria-selected="true"],.planning-duration-option.is-active,.planning-time-button.is-selected,.rs-admin-sidebar__nav a.is-active) {
  background: #30343a !important;
  background-color: #30343a !important;
  background-image: none !important;
  border-color: #30343a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

body.portal-page--admin :is(.tech-panel,.portal-section-card,.portal-section-card.tech-panel,.portal-section-card.tech-panel.price-manager-card,.price-manager-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-admin-sidebar-card,.portal-admin-detail-header,.portal-admin-dossier,.portal-mini-note,.portal-case,.portal-admin-document,.document-builder-widget,.account-card,.planning-dashboard-card,.planning-admin-actions-card,.planning-group-card,.planning-empty-card,.portal-backup-panel,.portal-backup-summary-card,.portal-backup-list-item),
body.portal-page--admin :is(.tech-panel,.portal-section-card,.portal-section-card.tech-panel,.portal-section-card.tech-panel.price-manager-card,.price-manager-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-admin-sidebar-card,.portal-admin-detail-header,.portal-admin-dossier,.portal-mini-note,.portal-case,.portal-admin-document,.document-builder-widget,.account-card,.planning-dashboard-card,.planning-admin-actions-card,.planning-group-card,.planning-empty-card,.portal-backup-panel,.portal-backup-summary-card,.portal-backup-list-item):hover,
body.portal-page--admin :is(.tech-panel,.portal-section-card,.portal-section-card.tech-panel,.portal-section-card.tech-panel.price-manager-card,.price-manager-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-admin-sidebar-card,.portal-admin-detail-header,.portal-admin-dossier,.portal-mini-note,.portal-case,.portal-admin-document,.document-builder-widget,.account-card,.planning-dashboard-card,.planning-admin-actions-card,.planning-group-card,.planning-empty-card,.portal-backup-panel,.portal-backup-summary-card,.portal-backup-list-item):focus-within {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d7dce2 !important;
  color: #1f242b !important;
  box-shadow: 0 8px 18px rgba(31,36,43,.05) !important;
  filter: none !important;
  transform: none !important;
}

body.portal-page--admin :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-auth-tab,.portal-case-filter,.portal-admin-tab,.client-access-link,.menu-toggle,.portal-admin-inline-link):not(.button-primary):not(.is-active) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #c5ccd3 !important;
  color: #30343a !important;
  -webkit-text-fill-color: #30343a !important;
  box-shadow: none !important;
}

body.portal-page--admin :is(input,select,textarea) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #bfc7cf !important;
  color: #1f242b !important;
  box-shadow: none !important;
}

body.portal-page--admin :is(.portal-status,.portal-status-card,.status-pill,.portal-kpi,.portal-admin-stat,.portal-case__meta span,.portal-admin-detail-tags span,.portal-finance-chip:not(.is-active)) {
  background: #f4f5f6 !important;
  background-color: #f4f5f6 !important;
  background-image: none !important;
  border-color: #d7dce2 !important;
  color: #4f5964 !important;
  box-shadow: none !important;
}

body.portal-page--admin :is(.tech-panel,.portal-section-card,.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter,.portal-admin-tab)::before,
body.portal-page--admin :is(.tech-panel,.portal-section-card,.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter,.portal-admin-tab)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}
/* ADMIN KILL REMAINING BLUE BUTTONS 2026-06-04 */
body.portal-page--admin .portal-finance-filter.is-active,
body.portal-page--admin .portal-finance-chip.is-active,
body.portal-page--admin .filter-button.is-active,
body.portal-page--admin .button-primary,
body.portal-page--admin button.button-primary,
body.portal-page--admin button[type="submit"],
body.portal-page--admin .portal-admin-tab.is-active,
body.portal-page--admin .portal-case-filter.is-active,
body.portal-page--admin .portal-inline-button.button-primary,
body[data-layout-role="admin"] .portal-finance-filter.is-active,
body[data-layout-role="admin"] .portal-finance-chip.is-active,
body[data-layout-role="admin"] .filter-button.is-active,
body[data-layout-role="admin"] .button-primary,
body[data-layout-role="admin"] button.button-primary,
body[data-layout-role="admin"] button[type="submit"],
body[data-layout-role="admin"] .portal-admin-tab.is-active,
body[data-layout-role="admin"] .portal-case-filter.is-active,
body[data-layout-role="admin"] .portal-inline-button.button-primary {
  background: #1f1f1f !important;
  background-color: #1f1f1f !important;
  background-image: none !important;
  border-color: #1f1f1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.portal-page--admin .portal-finance-filter.is-active *,
body.portal-page--admin .portal-finance-chip.is-active *,
body.portal-page--admin .filter-button.is-active *,
body.portal-page--admin .button-primary *,
body.portal-page--admin button.button-primary *,
body.portal-page--admin button[type="submit"] *,
body.portal-page--admin .portal-admin-tab.is-active *,
body.portal-page--admin .portal-case-filter.is-active *,
body[data-layout-role="admin"] .portal-finance-filter.is-active *,
body[data-layout-role="admin"] .portal-finance-chip.is-active *,
body[data-layout-role="admin"] .filter-button.is-active *,
body[data-layout-role="admin"] .button-primary *,
body[data-layout-role="admin"] button.button-primary *,
body[data-layout-role="admin"] button[type="submit"] *,
body[data-layout-role="admin"] .portal-admin-tab.is-active *,
body[data-layout-role="admin"] .portal-case-filter.is-active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.portal-page--admin .portal-finance-filter::before,
body.portal-page--admin .portal-finance-filter::after,
body.portal-page--admin .portal-finance-chip::before,
body.portal-page--admin .portal-finance-chip::after,
body.portal-page--admin .filter-button::before,
body.portal-page--admin .filter-button::after,
body.portal-page--admin .button::before,
body.portal-page--admin .button::after,
body.portal-page--admin button::before,
body.portal-page--admin button::after,
body[data-layout-role="admin"] .portal-finance-filter::before,
body[data-layout-role="admin"] .portal-finance-filter::after,
body[data-layout-role="admin"] .portal-finance-chip::before,
body[data-layout-role="admin"] .portal-finance-chip::after,
body[data-layout-role="admin"] .filter-button::before,
body[data-layout-role="admin"] .filter-button::after,
body[data-layout-role="admin"] .button::before,
body[data-layout-role="admin"] .button::after,
body[data-layout-role="admin"] button::before,
body[data-layout-role="admin"] button::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

body.portal-page--admin input,
body.portal-page--admin select,
body.portal-page--admin textarea,
body[data-layout-role="admin"] input,
body[data-layout-role="admin"] select,
body[data-layout-role="admin"] textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #9ca3aa !important;
}
/* FINANCE BOOKKEEPER NO BLUE 2026-06-04 */
body.portal-page--finance,
body.portal-page--finance *,
body[data-layout-role="bookkeeper"],
body[data-layout-role="bookkeeper"] * {
  --accent: #30343a !important;
  --accent-rgb: 48,52,58 !important;
  --primary: #30343a !important;
  --primary-rgb: 48,52,58 !important;
  --blue: #30343a !important;
  --admin-blue: #30343a !important;
  --admin-accent: #30343a !important;
}

body.portal-page--finance :is(.button-primary,.portal-inline-button.button-primary,button[type="submit"],.filter-button.is-active,.portal-finance-filter.is-active,.portal-finance-chip.is-active,.portal-case-filter.is-active),
body[data-layout-role="bookkeeper"] :is(.button-primary,.portal-inline-button.button-primary,button[type="submit"],.filter-button.is-active,.portal-finance-filter.is-active,.portal-finance-chip.is-active,.portal-case-filter.is-active) {
  background: #30343a !important;
  background-color: #30343a !important;
  background-image: none !important;
  border-color: #30343a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.portal-page--finance :is(.tech-panel,.portal-section-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-case,.portal-admin-document,.planning-empty-card),
body.portal-page--finance :is(.tech-panel,.portal-section-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-case,.portal-admin-document,.planning-empty-card):hover,
body[data-layout-role="bookkeeper"] :is(.tech-panel,.portal-section-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-case,.portal-admin-document,.planning-empty-card),
body[data-layout-role="bookkeeper"] :is(.tech-panel,.portal-section-card,.portal-finance-toolbar-card,.portal-finance-search-card,.portal-finance-summary-card,.portal-finance-group,.portal-case,.portal-admin-document,.planning-empty-card):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d7dce2 !important;
  color: #1f242b !important;
  box-shadow: 0 8px 18px rgba(31,36,43,.05) !important;
  filter: none !important;
}

body.portal-page--finance :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter):not(.button-primary):not(.is-active),
body[data-layout-role="bookkeeper"] :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter):not(.button-primary):not(.is-active) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #c5ccd3 !important;
  color: #30343a !important;
  -webkit-text-fill-color: #30343a !important;
  box-shadow: none !important;
}

body.portal-page--finance :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter)::before,
body.portal-page--finance :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter)::after,
body[data-layout-role="bookkeeper"] :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter)::before,
body[data-layout-role="bookkeeper"] :is(.button,.portal-inline-button,.portal-mini-button,.filter-button,.portal-finance-filter,.portal-finance-chip,.portal-case-filter)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
/* ADMIN PLAIN SELECTORS NO BLUE 2026-06-04 */
body.portal-page--admin .button-primary,
body.portal-page--admin a.button-primary,
body.portal-page--admin button.button-primary,
body.portal-page--admin .button.button-primary,
body.portal-page--admin .portal-inline-button.button-primary,
body.portal-page--admin button[type="submit"],
body.portal-page--admin .portal-admin-tab.is-active,
body.portal-page--admin .portal-admin-tab[aria-selected="true"],
body.portal-page--admin .portal-case-filter.is-active,
body.portal-page--admin .filter-button.is-active,
body.portal-page--finance .button-primary,
body.portal-page--finance a.button-primary,
body.portal-page--finance button.button-primary,
body.portal-page--finance .button.button-primary,
body.portal-page--finance .portal-inline-button.button-primary,
body.portal-page--finance button[type="submit"],
body.portal-page--finance .portal-finance-filter.is-active,
body.portal-page--finance .portal-finance-chip.is-active,
body.portal-page--finance .filter-button.is-active,
body[data-layout-role="admin"] .button-primary,
body[data-layout-role="admin"] a.button-primary,
body[data-layout-role="admin"] button.button-primary,
body[data-layout-role="admin"] .button.button-primary,
body[data-layout-role="admin"] .portal-inline-button.button-primary,
body[data-layout-role="admin"] button[type="submit"],
body[data-layout-role="admin"] .portal-admin-tab.is-active,
body[data-layout-role="admin"] .portal-admin-tab[aria-selected="true"],
body[data-layout-role="admin"] .portal-case-filter.is-active,
body[data-layout-role="admin"] .filter-button.is-active {
  background: #1f1f1f !important;
  background-color: #1f1f1f !important;
  background-image: none !important;
  border-color: #1f1f1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.portal-page--admin .button-primary::before,
body.portal-page--admin .button-primary::after,
body.portal-page--admin .portal-admin-tab::before,
body.portal-page--admin .portal-admin-tab::after,
body.portal-page--admin .portal-case-filter::before,
body.portal-page--admin .portal-case-filter::after,
body.portal-page--finance .button-primary::before,
body.portal-page--finance .button-primary::after,
body.portal-page--finance .portal-finance-filter::before,
body.portal-page--finance .portal-finance-filter::after,
body.portal-page--finance .portal-finance-chip::before,
body.portal-page--finance .portal-finance-chip::after,
body[data-layout-role="admin"] .button-primary::before,
body[data-layout-role="admin"] .button-primary::after,
body[data-layout-role="admin"] .portal-admin-tab::before,
body[data-layout-role="admin"] .portal-admin-tab::after,
body[data-layout-role="admin"] .portal-case-filter::before,
body[data-layout-role="admin"] .portal-case-filter::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.portal-page--admin .button-primary *,
body.portal-page--admin .portal-admin-tab.is-active *,
body.portal-page--admin .portal-case-filter.is-active *,
body.portal-page--finance .button-primary *,
body.portal-page--finance .portal-finance-filter.is-active *,
body.portal-page--finance .portal-finance-chip.is-active *,
body[data-layout-role="admin"] .button-primary *,
body[data-layout-role="admin"] .portal-admin-tab.is-active *,
body[data-layout-role="admin"] .portal-case-filter.is-active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.portal-page--admin .portal-admin-tab:not(.is-active),
body.portal-page--admin .portal-case-filter:not(.is-active),
body.portal-page--admin .button:not(.button-primary),
body.portal-page--finance .portal-finance-filter:not(.is-active),
body.portal-page--finance .portal-finance-chip:not(.is-active),
body.portal-page--finance .button:not(.button-primary),
body[data-layout-role="admin"] .portal-admin-tab:not(.is-active),
body[data-layout-role="admin"] .portal-case-filter:not(.is-active),
body[data-layout-role="admin"] .button:not(.button-primary) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #c7ccd1 !important;
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
  box-shadow: none !important;
}
/* ADMIN ACCOUNT INPUTS BLACK WHITE 2026-06-04 */
body.portal-page--admin input,
body.portal-page--admin select,
body.portal-page--admin textarea,
body.portal-page--admin .account-card input,
body.portal-page--admin .account-card select,
body.portal-page--admin .account-card textarea,
body[data-layout-role="admin"] input,
body[data-layout-role="admin"] select,
body[data-layout-role="admin"] textarea,
body[data-layout-role="admin"] .account-card input,
body[data-layout-role="admin"] .account-card select,
body[data-layout-role="admin"] .account-card textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #9b9b9b !important;
  color: #1f1f1f !important;
  -webkit-text-fill-color: #1f1f1f !important;
  box-shadow: none !important;
}

body.portal-page--admin input:disabled,
body.portal-page--admin select:disabled,
body.portal-page--admin textarea:disabled,
body[data-layout-role="admin"] input:disabled,
body[data-layout-role="admin"] select:disabled,
body[data-layout-role="admin"] textarea:disabled {
  background: #eeeeee !important;
  background-color: #eeeeee !important;
  color: #4a4a4a !important;
  -webkit-text-fill-color: #4a4a4a !important;
}

body.portal-page--admin .button-primary,
body.portal-page--admin button.button-primary,
body.portal-page--admin .button.button-primary,
body.portal-page--admin button[type="submit"],
body[data-layout-role="admin"] .button-primary,
body[data-layout-role="admin"] button.button-primary,
body[data-layout-role="admin"] .button.button-primary,
body[data-layout-role="admin"] button[type="submit"] {
  background: #1f1f1f !important;
  background-color: #1f1f1f !important;
  background-image: none !important;
  border-color: #1f1f1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.portal-page--admin .button-primary::before,
body.portal-page--admin .button-primary::after,
body.portal-page--admin button.button-primary::before,
body.portal-page--admin button.button-primary::after,
body.portal-page--admin .button.button-primary::before,
body.portal-page--admin .button.button-primary::after,
body.portal-page--admin button[type="submit"]::before,
body.portal-page--admin button[type="submit"]::after,
body[data-layout-role="admin"] .button-primary::before,
body[data-layout-role="admin"] .button-primary::after,
body[data-layout-role="admin"] button.button-primary::before,
body[data-layout-role="admin"] button.button-primary::after,
body[data-layout-role="admin"] .button.button-primary::before,
body[data-layout-role="admin"] .button.button-primary::after,
body[data-layout-role="admin"] button[type="submit"]::before,
body[data-layout-role="admin"] button[type="submit"]::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* RS admin direct gray/antracite reset - 20260604-direct-gray-24 */
body.portal-page--admin,
body.portal-page--finance,
body.portal-page--backup,
body[data-layout-role="admin"],
body[data-layout-role="bookkeeper"] {
  --rs-admin-ink: #121417 !important;
  --rs-admin-muted: #5e6670 !important;
  --rs-admin-line: #d9dee4 !important;
  --rs-admin-panel: #ffffff !important;
  --rs-admin-soft: #f3f4f6 !important;
  --rs-admin-field: #e7ebef !important;
  --rs-admin-accent: #24282e !important;
  --admin-blue: #24282e !important;
  --admin-blue-dark: #171a1f !important;
  --admin-accent: #24282e !important;
  --admin-focus: rgba(31, 36, 43, 0.18) !important;
  color: #121417 !important;
  background: #f3f4f6 !important;
}

body.portal-page--admin .portal-admin-shell,
body.portal-page--finance .portal-admin-shell,
body.portal-page--backup .portal-admin-shell,
body[data-layout-role="admin"] .portal-admin-shell,
body[data-layout-role="bookkeeper"] .portal-admin-shell {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 28px 28px 40px !important;
  box-sizing: border-box !important;
}

body.portal-page--admin .portal-admin-sidebar,
body.portal-page--finance .portal-admin-sidebar,
body.portal-page--backup .portal-admin-sidebar,
body[data-layout-role="admin"] .portal-admin-sidebar,
body[data-layout-role="bookkeeper"] .portal-admin-sidebar {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
  background: #ffffff !important;
  border-right: 1px solid #dfe3e8 !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
}

body.portal-page--admin .portal-admin-main,
body.portal-page--finance .portal-admin-main,
body.portal-page--backup .portal-admin-main,
body[data-layout-role="admin"] .portal-admin-main,
body[data-layout-role="bookkeeper"] .portal-admin-main,
body.portal-page--admin .portal-admin-content,
body.portal-page--finance .portal-admin-content,
body.portal-page--backup .portal-admin-content {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.portal-page--admin .portal-admin-nav,
body.portal-page--finance .portal-admin-nav,
body.portal-page--backup .portal-admin-nav,
body[data-layout-role="admin"] .portal-admin-nav,
body[data-layout-role="bookkeeper"] .portal-admin-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 18px 12px !important;
}

body.portal-page--admin .portal-admin-nav a,
body.portal-page--finance .portal-admin-nav a,
body.portal-page--backup .portal-admin-nav a,
body[data-layout-role="admin"] .portal-admin-nav a,
body[data-layout-role="bookkeeper"] .portal-admin-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  color: #1f2328 !important;
  background: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.portal-page--admin .portal-admin-nav a svg,
body.portal-page--finance .portal-admin-nav a svg,
body.portal-page--backup .portal-admin-nav a svg,
body[data-layout-role="admin"] .portal-admin-nav a svg,
body[data-layout-role="bookkeeper"] .portal-admin-nav a svg {
  position: static !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: #737b84 !important;
  stroke: currentColor !important;
}

body.portal-page--admin .portal-admin-nav a.is-active,
body.portal-page--finance .portal-admin-nav a.is-active,
body.portal-page--backup .portal-admin-nav a.is-active,
body[data-layout-role="admin"] .portal-admin-nav a.is-active,
body[data-layout-role="bookkeeper"] .portal-admin-nav a.is-active {
  color: #111315 !important;
  background: #eef0f2 !important;
  border-color: #cfd5dc !important;
  border-left: 4px solid #24282e !important;
}

body.portal-page--admin .rs-admin-brand img,
body.portal-page--finance .rs-admin-brand img,
body.portal-page--backup .rs-admin-brand img,
body[data-layout-role="admin"] .rs-admin-brand img,
body[data-layout-role="bookkeeper"] .rs-admin-brand img {
  filter: grayscale(1) contrast(1.06) !important;
}

body.portal-page--admin .admin-card,
body.portal-page--admin .portal-card,
body.portal-page--admin .portal-panel,
body.portal-page--admin .planning-panel,
body.portal-page--admin .planning-stat-card,
body.portal-page--admin .planning-filter-card,
body.portal-page--admin .planning-list-card,
body.portal-page--finance .admin-card,
body.portal-page--finance .portal-card,
body.portal-page--finance .portal-panel,
body.portal-page--backup .admin-card,
body.portal-page--backup .portal-card,
body.portal-page--backup .portal-panel,
body[data-layout-role="admin"] .admin-card,
body[data-layout-role="admin"] .portal-card,
body[data-layout-role="admin"] .portal-panel,
body[data-layout-role="bookkeeper"] .admin-card,
body[data-layout-role="bookkeeper"] .portal-card,
body[data-layout-role="bookkeeper"] .portal-panel {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #d9dee4 !important;
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.06) !important;
  color: #121417 !important;
}

body.portal-page--admin input,
body.portal-page--admin select,
body.portal-page--admin textarea,
body.portal-page--finance input,
body.portal-page--finance select,
body.portal-page--finance textarea,
body.portal-page--backup input,
body.portal-page--backup select,
body.portal-page--backup textarea,
body[data-layout-role="admin"] input,
body[data-layout-role="admin"] select,
body[data-layout-role="admin"] textarea,
body[data-layout-role="bookkeeper"] input,
body[data-layout-role="bookkeeper"] select,
body[data-layout-role="bookkeeper"] textarea {
  background: #e7ebef !important;
  background-image: none !important;
  border: 1px solid #aeb7c1 !important;
  color: #15181c !important;
  box-shadow: none !important;
}

body.portal-page--admin input:focus,
body.portal-page--admin select:focus,
body.portal-page--admin textarea:focus,
body.portal-page--finance input:focus,
body.portal-page--finance select:focus,
body.portal-page--finance textarea:focus,
body.portal-page--backup input:focus,
body.portal-page--backup select:focus,
body.portal-page--backup textarea:focus,
body[data-layout-role="admin"] input:focus,
body[data-layout-role="admin"] select:focus,
body[data-layout-role="admin"] textarea:focus,
body[data-layout-role="bookkeeper"] input:focus,
body[data-layout-role="bookkeeper"] select:focus,
body[data-layout-role="bookkeeper"] textarea:focus {
  border-color: #24282e !important;
  box-shadow: 0 0 0 3px rgba(31, 36, 43, 0.16) !important;
}

body.portal-page--admin .button-primary,
body.portal-page--admin button[type="submit"],
body.portal-page--admin .portal-admin-topbar a,
body.portal-page--admin .portal-admin-tab.is-active,
body.portal-page--admin .portal-case-filter.is-active,
body.portal-page--admin .portal-finance-filter.is-active,
body.portal-page--admin .portal-finance-chip.is-active,
body.portal-page--admin .filter-button.is-active,
body.portal-page--admin .planning-quickbar .button-primary,
body.portal-page--admin .planning-quickbar .button.is-active,
body.portal-page--admin .planning-duration-option.is-active,
body.portal-page--admin .planning-time-button.is-selected,
body.portal-page--admin .planning-admin-actions-card button[type="submit"],
body.portal-page--finance .button-primary,
body.portal-page--finance button[type="submit"],
body.portal-page--finance .portal-admin-tab.is-active,
body.portal-page--finance .portal-case-filter.is-active,
body.portal-page--finance .portal-finance-filter.is-active,
body.portal-page--finance .portal-finance-chip.is-active,
body.portal-page--backup .button-primary,
body.portal-page--backup button[type="submit"],
body[data-layout-role="admin"] .button-primary,
body[data-layout-role="admin"] button[type="submit"],
body[data-layout-role="admin"] .portal-admin-tab.is-active,
body[data-layout-role="admin"] .portal-case-filter.is-active,
body[data-layout-role="admin"] .portal-finance-filter.is-active,
body[data-layout-role="admin"] .portal-finance-chip.is-active,
body[data-layout-role="bookkeeper"] .button-primary,
body[data-layout-role="bookkeeper"] button[type="submit"],
body[data-layout-role="bookkeeper"] .portal-admin-tab.is-active,
body[data-layout-role="bookkeeper"] .portal-case-filter.is-active,
body[data-layout-role="bookkeeper"] .portal-finance-filter.is-active,
body[data-layout-role="bookkeeper"] .portal-finance-chip.is-active {
  background: #24282e !important;
  background-image: none !important;
  border-color: #24282e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.14) !important;
}

body.portal-page--admin .button,
body.portal-page--admin .button-secondary,
body.portal-page--admin .portal-admin-tab,
body.portal-page--admin .portal-case-filter,
body.portal-page--admin .portal-finance-filter,
body.portal-page--admin .portal-finance-chip,
body.portal-page--admin .filter-button,
body.portal-page--admin .planning-quickbar .button,
body.portal-page--finance .button,
body.portal-page--finance .button-secondary,
body.portal-page--finance .portal-admin-tab,
body.portal-page--finance .portal-case-filter,
body.portal-page--finance .portal-finance-filter,
body.portal-page--finance .portal-finance-chip,
body.portal-page--backup .button,
body.portal-page--backup .button-secondary,
body[data-layout-role="admin"] .button,
body[data-layout-role="admin"] .button-secondary,
body[data-layout-role="admin"] .portal-admin-tab,
body[data-layout-role="admin"] .portal-case-filter,
body[data-layout-role="admin"] .portal-finance-filter,
body[data-layout-role="admin"] .portal-finance-chip,
body[data-layout-role="bookkeeper"] .button,
body[data-layout-role="bookkeeper"] .button-secondary,
body[data-layout-role="bookkeeper"] .portal-admin-tab,
body[data-layout-role="bookkeeper"] .portal-case-filter,
body[data-layout-role="bookkeeper"] .portal-finance-filter,
body[data-layout-role="bookkeeper"] .portal-finance-chip {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cfd5dc !important;
  color: #1f2328 !important;
  -webkit-text-fill-color: #1f2328 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.portal-page--admin [style*="background"],
body.portal-page--finance [style*="background"],
body.portal-page--backup [style*="background"],
body[data-layout-role="admin"] [style*="background"],
body[data-layout-role="bookkeeper"] [style*="background"] {
  --admin-blue: #24282e !important;
  --admin-blue-dark: #171a1f !important;
}

@media (max-width: 900px) {
  body.portal-page--admin .portal-admin-shell,
  body.portal-page--finance .portal-admin-shell,
  body.portal-page--backup .portal-admin-shell,
  body[data-layout-role="admin"] .portal-admin-shell,
  body[data-layout-role="bookkeeper"] .portal-admin-shell {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
  body.portal-page--admin .portal-admin-sidebar,
  body.portal-page--finance .portal-admin-sidebar,
  body.portal-page--backup .portal-admin-sidebar,
  body[data-layout-role="admin"] .portal-admin-sidebar,
  body[data-layout-role="bookkeeper"] .portal-admin-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}