/* ==========================================================================
   DeltaFysio public styles

   Contents
   01. Layer Order
   02. Variables
   03. Reset
   04. Base
   05. Layout
   06. Components
   07. Contact
   08. Over ons
   09. Therapeut
   10. Tarieven
   11. Sponsors
   12. Behandelingen
   13. 404
   14. Utilities
   15. Homepage
   16. Shared tweaks

   Homepage sits late because its hero/navbar styling is different from the
   regular pages.
   ========================================================================== */

/* 01. Layer Order
   Main CSS order. */
@layer reset, tokens, base, layout, components, pages, utilities, responsive;

/* 02. Variables */
@layer tokens {
   :root {
      --background: #f3f3f3;
      --primary: #4d6797;
      --primary-dark: #183b63;
      --primary-footer: #4a628a;
      --accent-light: #d8ebe9;
      --section-blue: #bfd4e0;
      --text: #222;
      --muted: #666;
      --white: #fff;
      --warning-bg: rgba(255, 243, 205, 0.9);
      --warning-border: #ffc107;
      --surface: rgba(255, 255, 255, 0.95);
      --surface-soft: rgba(255, 255, 255, 0.72);
      --surface-blue-soft: rgba(191, 212, 224, 0.22);
      --border-soft: rgba(77, 103, 151, 0.12);
      --pill-bg: rgba(77, 103, 151, 0.12);
      --page-pattern: radial-gradient(circle at left top, rgba(118, 196, 221, 0.25) 0%, transparent 35%), radial-gradient(circle at right bottom, rgba(118, 196, 221, 0.18) 0%, transparent 30%), var(--background);
      --hero-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(216, 235, 233, 0.88));
      --cta-gradient: linear-gradient(135deg, rgba(191, 212, 224, 0.85), rgba(216, 235, 233, 0.75));
      --card-gradient: linear-gradient(180deg, rgba(216, 235, 233, 0.65), rgba(255, 255, 255, 0.96));
      --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
      --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
      --shadow-lifted: 0 18px 36px rgba(35, 80, 120, 0.07);
      --shadow-lifted-hover: 0 24px 46px rgba(35, 80, 120, 0.12);
      --radius-pill: 999px;
      --radius-section: 30px;
      --radius-panel: 22px;
      --radius-card: 16px;
      --content-max: 1200px;
      --content-wide: 1320px;
      --page-padding: 40px;
      --page-padding-mobile: 18px;
      --section-padding: 50px;
      --section-padding-mobile: 24px;
      --gap-page: 40px;
      --gap-card: 24px;
      --font-main: 'Poppins', sans-serif;
      --h1-fluid: clamp(2.35rem, 5vw, 3.4rem);
      --h2-fluid: clamp(2rem, 4.5vw, 4rem);
      --h3-fluid: clamp(1.15rem, 2vw, 1.35rem)
   }
}

/* 03. Reset
   Small browser cleanup. */
@layer reset {

   *,
   *::before,
   *::after {
      box-sizing: border-box
   }

   * {
      margin: 0;
      padding: 0
   }

   img,
   picture,
   iframe {
      max-width: 100%
   }

   img {
      height: auto;
      display: block
   }

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

   ul,
   ol {
      list-style: inherit
   }
}

/* 04. Base
   Default page and text styling. */
@layer base {

   html,
   body {
      min-height: 100vh;
      background: var(--background);
      font-family: var(--font-main)
   }

   html {
      scroll-behavior: smooth
   }

   body {
      position: relative;
      overflow-x: hidden;
      color: var(--text)
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
      color: var(--text);
      line-height: 1.15
   }

   h2 {
      margin-bottom: 40px;
      color: var(--primary);
      font-size: var(--h2-fluid);
      font-weight: 600;
      text-align: center
   }

   p,
   li,
   td,
   th {
      line-height: 1.7
   }

   section,
   .section {
      width: 100%;
      padding: var(--section-padding);
      overflow: hidden;
      border-radius: var(--radius-section);
      background: var(--section-blue)
   }
}

/* 05. Layout
   Shared wrappers and background shapes. */
@layer layout {

   .site-header,
   main,
   .site-footer,
   .page-container,
   .main-content {
      position: relative
   }

   .navbar-container,
   section>*,
   .site-footer>* {
      position: relative;
      z-index: 2
   }

   .page-container {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column
   }

   .main-content {
      flex: 1;
      padding: 0 var(--page-padding) var(--page-padding)
   }

   .bg-pattern,
   .homepage,
   .contact-page,
   .treatments-page,
   .tarieven-page,
   .therapist-page {
      background: var(--page-pattern)
   }

   .contact-page,
   .treatments-page {
      display: grid;
      gap: var(--gap-page);
      padding: 20px var(--page-padding) 80px
   }

   .page-ovals {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none
   }

   .oval-main {
      position: absolute;
      top: -420px;
      left: -380px;
      width: 900px;
      height: 760px;
      border-radius: 58% 42% 48% 52% / 45% 50% 50% 55%;
      background: rgba(185, 229, 232, 0.5);
      transform: rotate(-22deg)
   }

   .oval-main::before {
      content: '';
      position: absolute;
      inset: 90px 110px 80px 120px;
      border-radius: 55% 45% 50% 50% / 45% 50% 55% 50%;
      background: rgba(118, 196, 221, 0.25)
   }
}

/* 06. Components */
@layer components {
   .section-header {
      max-width: 800px;
      margin: 0 auto 40px;
      text-align: center
   }

   .section-header h2 {
      margin-bottom: 12px;
      color: var(--primary-dark);
      font-size: clamp(2rem, 3vw, 2.6rem)
   }

   .section-header p {
      color: var(--muted)
   }

   .section-header a,
   .card-link {
      color: var(--primary-dark);
      font-weight: 700
   }

   .card-link:hover {
      text-decoration: underline
   }

   .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease
   }

   .btn:hover {
      transform: translateY(-2px)
   }

   .btn-primary {
      background: var(--primary);
      color: var(--white);
      box-shadow: var(--shadow-card)
   }

   .btn-primary:hover {
      background: var(--primary-dark)
   }

   .btn-secondary {
      background: var(--white);
      color: var(--primary-dark);
      box-shadow: var(--shadow-card)
   }

   .hero-buttons,
   .contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px
   }

   .surface-panel,
   .contact-page .contact-section,
   .contact-page .contact-map-section,
   .treatments-page .treatments-section,
   .treatments-page .specialties-section {
      width: 100%;
      max-width: var(--content-max);
      margin-inline: auto;
      border-radius: var(--radius-panel);
      background: var(--surface);
      box-shadow: var(--shadow-card)
   }

   /* Shared panel look for intro sections and large cards. */
   .hero-panel,
   .contact-page .contact-hero,
   .treatments-page .treatments-hero,
   .overons-page .hero-section,
   .tarieven-page .tarieven-hero,
   .notfound-page .notfound-card,
   .tarieven-page .tarieven-container,
   .therapist-card,
   .sponsor-page {
      background: var(--hero-gradient);
      border-radius: var(--radius-section);
      box-shadow: var(--shadow-soft)
   }

   .info-card,
   .contact-card,
   .contact-info-panel,
   .opening-hours,
   .treatment-card,
   .specialty-card,
   .tarieven-kaart {
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-panel);
      box-shadow: var(--shadow-lifted)
   }

   .info-card,
   .contact-card,
   .contact-info-panel,
   .opening-hours,
   .treatment-card {
      background: var(--card-gradient)
   }

   .eyebrow,
   .contact-page .contact-hero-content::before,
   .treatments-page .treatments-hero-content::before,
   .tarieven-page .tarieven-hoofdtitel::before,
   .therapist-content .eyebrow,
   .overons-page .eyebrow {
      display: inline-block;
      margin-bottom: 14px;
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      background: var(--pill-bg);
      color: var(--primary-dark);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase
   }

   .contact-page .contact-hero-content::before {
      content: 'Contact'
   }

   .treatments-page .treatments-hero-content::before {
      content: 'Behandelingen'
   }

   .tarieven-page .tarieven-hoofdtitel::before {
      content: 'Vergoedingen';
      display: block;
      width: max-content
   }
}

/* ==========================================================================
   07. Contact
   ========================================================================== */
@layer pages {
   .contact-page .contact-hero {
      text-align: left
   }

   .contact-page .contact-hero-content {
      max-width: 820px
   }

   .contact-page .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap-card)
   }

   .contact-page .contact-support-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--gap-card);
      margin-top: var(--gap-card)
   }

   .contact-page .contact-card,
   .contact-page .contact-info-panel,
   .contact-page .opening-hours {
      padding: 28px
   }

   .contact-page .contact-card {
      min-height: 210px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s ease, box-shadow 0.2s ease
   }

   .contact-page .contact-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lifted-hover)
   }

   .contact-page .contact-card h3 {
      margin-bottom: 14px;
      color: var(--primary-dark);
      font-size: 1.25rem
   }

   .contact-page .contact-card p {
      margin-bottom: 22px;
      overflow-wrap: anywhere;
      color: var(--text);
      font-size: 1.05rem;
      font-weight: 700
   }

   .contact-page .contact-card a {
      color: var(--primary);
      font-weight: 700
   }

   .contact-page .contact-card a:hover {
      text-decoration: underline
   }

   .contact-page .contact-info-panel h2,
   .contact-page .opening-hours h2,
   .contact-page .contact-map-section h2 {
      margin-bottom: 18px;
      color: var(--primary-dark);
      font-size: 1.6rem;
      text-align: left
   }

   .contact-page .contact-info-panel ul {
      display: grid;
      gap: 12px;
      padding-left: 20px;
      color: var(--text)
   }

   .contact-page .hours-table {
      width: 100%;
      border-collapse: collapse
   }

   .contact-page .hours-table tr {
      border-bottom: 1px solid #e0e0e0
   }

   .contact-page .hours-table tr:last-child {
      border-bottom: 0
   }

   .contact-page .hours-table td {
      padding: 12px 0;
      color: var(--text);
      font-size: 1rem
   }

   .contact-page .hours-table td:first-child {
      padding-right: 28px;
      color: var(--primary);
      font-weight: 700
   }

   .contact-page .hours-table td:last-child {
      color: var(--muted);
      text-align: right
   }

   .contact-page .contact-map-section {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 28px;
      align-items: center;
      background: var(--section-blue)
   }

   .contact-page .contact-map-section p {
      color: var(--text);
      font-size: 1.1rem
   }

   .contact-page .map-container iframe {
      width: 100%;
      height: 360px;
      border: 4px solid var(--white);
      border-radius: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15)
   }

   /* ==========================================================================
   08. Over ons
   ========================================================================== */
   .overons-page .hero-copy {
      max-width: 820px
   }

   .overons-page .main-content {
      padding-top: 20px
   }

   .overons-page .team-section {
      max-width: var(--content-wide);
      margin: 0 auto 40px;
      padding: 20px 0 40px;
      border-radius: var(--radius-section);
      background: rgba(191, 212, 224, 0.18)
   }

   .overons-page .team-grid {
      max-width: 1260px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(260px, 1fr));
      gap: 30px;
      align-items: stretch
   }

   .overons-page .team-card {
      min-height: 430px;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      border: 1px solid var(--border-soft);
      border-radius: 28px;
      background: var(--surface);
      box-shadow: 0 24px 50px rgba(35, 80, 120, 0.08);
      text-align: center
   }

   .overons-page .image-frame {
      width: 100%;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(191, 212, 224, 0.45), rgba(255, 255, 255, 0.9))
   }

   .overons-page .image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover
   }

   .overons-page .team-card-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 24px 22px 26px
   }

   .overons-page .team-card-content h3 {
      color: var(--primary-dark);
      font-size: 1.3rem
   }

   .overons-page .team-card-content p {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.75
   }

   .overons-page .section-header {
      margin-bottom: 32px
   }

   .overons-page .content-section {
      margin-top: 30px;
      padding: 34px 36px;
      border-radius: var(--radius-panel);
      background: var(--surface);
      box-shadow: var(--shadow-card)
   }

   .overons-page .content-section h2 {
      margin-bottom: 20px;
      color: var(--primary-dark);
      font-size: 2rem;
      text-align: left
   }

   .overons-page .content-section h3 {
      margin: 16px 0 8px;
      color: var(--primary);
      font-size: 1.2rem
   }

   .overons-page .content-section p,
   .overons-page .content-section li {
      color: var(--text);
      font-size: 1.02rem
   }

   .overons-page .content-section ul {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      padding-left: 20px
   }

   /* ==========================================================================
   09. Therapeut
   ========================================================================== */
   .therapist-page {
      display: flex;
      justify-content: center;
      padding: 60px 24px 80px
   }

   .therapist-card {
      width: 100%;
      max-width: 1100px;
      display: grid;
      grid-template-columns: minmax(280px, 360px) 1fr;
      gap: 32px;
      align-items: center;
      padding: 32px;
      border: 1px solid var(--border-soft);
      border-radius: 28px
   }

   .therapist-image-wrap {
      overflow: hidden;
      border-radius: 24px;
      aspect-ratio: 4 / 5;
      background: #dfe7eb;
      box-shadow: var(--shadow-card)
   }

   .therapist-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover
   }

   .therapist-content h1 {
      margin-bottom: 12px;
      color: var(--primary-dark);
      font-size: clamp(2.1rem, 4vw, 2.7rem);
      text-align: left
   }

   .therapist-specialties {
      margin-bottom: 12px;
      color: var(--primary);
      font-size: 1.05rem;
      font-weight: 700
   }

   .therapist-content p {
      color: var(--text);
      font-size: 1.05rem;
      line-height: 1.8
   }

   /* ==========================================================================
   10. Tarieven
   ========================================================================== */
   .tarieven-page {
      width: 100%;
      display: grid;
      gap: 34px;
      padding: 20px 0 80px
   }

   .tarieven-page .tarieven-container {
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 50px
   }

   .tarieven-page .tarieven-hoofdtitel {
      font-weight: 700
   }

   .tarieven-page .tarieven-intro {
      max-width: 840px;
      margin: 0 0 32px;
      color: var(--text);
      font-size: 1.08rem;
      line-height: 1.75
   }

   .tarieven-page .tarieven-hoofdtitel::before {
      margin-bottom: 14px
   }

   .tarieven-page .tarieven-kaart {
      margin-bottom: 24px;
      padding: 30px;
      border: 1px solid var(--border-soft);
      border-radius: 28px;
      background: var(--surface);
      box-shadow: 0 24px 50px rgba(35, 80, 120, .08)
   }

   .tarieven-page .tarieven-kaart p {
      margin-bottom: 12px;
      color: var(--text)
   }

   .tarieven-page .tarieven-kaart p:last-child {
      margin-bottom: 0
   }

   .tarieven-page .tarieven-koptitel {
      margin-bottom: 12px;
      color: var(--primary-dark);
      font-size: 1.35rem;
      text-align: left
   }

   .tarieven-page .tarieven-subtitel {
      margin: 14px 0 8px;
      color: var(--primary);
      font-size: 1.05rem
   }

   .tarieven-page .tarieven-melding {
      margin: 26px 0;
      padding: 20px;
      border-left: 5px solid var(--warning-border);
      border-radius: 22px;
      background: var(--warning-bg);
      box-shadow: var(--shadow-card)
   }

   .tarieven-page .tarieven-titel-prijzen {
      margin: 40px 0 24px;
      color: var(--primary-dark);
      font-size: 2rem;
      text-align: left
   }

   .tarieven-page .tarieven-tabel-box {
      overflow-x: auto;
      border-radius: 18px;
      box-shadow: var(--shadow-card)
   }

   .tarieven-page .tarieven-tabel {
      width: 100%;
      overflow: hidden;
      border-collapse: collapse;
      background: var(--white)
   }

   .tarieven-page .tarieven-tabel thead th {
      padding: 16px;
      background: var(--primary-dark);
      color: var(--white);
      text-align: left
   }

   .tarieven-page .tarieven-tabel td {
      padding: 16px;
      border-bottom: 1px solid #eee
   }

   .tarieven-page .tarieven-bedrag {
      display: inline-block;
      min-width: 7ch;
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1
   }

   /* ==========================================================================
   11. Sponsors
   ========================================================================== */
   .sponsor-page {
      width: auto;
      display: grid;
      gap: 0;
      margin: 20px var(--page-padding) 80px;
      padding: 0;
      overflow: hidden
   }

   .sponsor-page .sponsor-banner {
      position: relative;
      width: 100%;
      height: 420px;
      overflow: hidden
   }

   .sponsor-page .sponsor-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.74
   }

   .sponsor-page .sponsor-circle {
      position: absolute;
      left: 50%;
      bottom: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px 34px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: var(--shadow-card);
      transform: translateX(-50%)
   }

   .sponsor-page .sponsor-circle h1 {
      color: var(--primary-dark);
      font-size: clamp(2.2rem, 5vw, 3rem);
      font-weight: 700;
      text-align: center
   }

   .sponsor-page .sponsor-content {
      padding: 50px;
      text-align: center
   }

   .sponsor-page .sponsor-content h2 {
      margin-bottom: 40px;
      color: var(--primary-dark);
      font-size: clamp(2rem, 4vw, 2.5rem);
      font-weight: 700;
      text-align: center
   }

   .sponsor-page .sponsor-content p {
      margin-inline: auto;
      max-width: 760px;
      text-align: center
   }

   .sponsor-page .sponsor-company {
      max-width: 980px;
      margin: 0 auto 40px;
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 40px;
      align-items: center;
      justify-content: center;
      padding: 28px;
      border: 1px solid var(--border-soft);
      border-radius: 24px;
      background: var(--surface);
      box-shadow: var(--shadow-card);
      text-align: center
   }

   .sponsor-page .sponsor-logo {
      display: grid;
      justify-items: center;
      gap: 10px;
      text-align: center
   }

   .sponsor-page .sponsor-logo p {
      max-width: 100%;
      color: var(--primary-dark);
      font-size: 0.95rem;
      font-weight: 700;
      overflow-wrap: anywhere
   }

   .sponsor-page .sponsor-description {
      max-width: 620px;
      margin-inline: auto
   }

   .sponsor-page .sponsor-description p {
      color: var(--text);
      font-size: clamp(1.1rem, 2vw, 1.3rem);
      font-weight: 700;
      line-height: 1.55;
      text-align: center
   }

   /* Sponsor detail page. */
   .sponsor-detail-page {
      width: auto;
      display: grid;
      gap: 0;
      margin: 20px var(--page-padding) 80px;
      padding: 0;
      overflow: hidden
   }

   .sponsor-detail-hero {
      position: relative;
      width: 100%;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 80px 24px;
      background: linear-gradient(135deg, rgba(216, 235, 233, .9), rgba(255, 255, 255, .95))
   }

   .sponsor-detail-hero__inner {
      width: min(1080px, 100%);
      text-align: center
   }

   .sponsor-detail-hero__inner .eyebrow {
      margin-bottom: 18px
   }

   .sponsor-detail-hero__inner h1 {
      color: var(--primary-dark);
      font-size: clamp(2.4rem, 5vw, 4rem);
      font-weight: 800;
      margin-bottom: 18px;
      line-height: 1.08;
      overflow-wrap: anywhere
   }

   .sponsor-detail-hero-text {
      max-width: 760px;
      margin: 0 auto 24px;
      color: var(--text);
      font-size: clamp(1rem, 2vw, 1.2rem);
      line-height: 1.8
   }

   .sponsor-detail-hero__inner .btn {
      min-width: 220px;
      margin-top: 16px
   }

   .sponsor-detail-content {
      width: min(1080px, 100%);
      margin: 0 auto;
      padding: 40px 32px 60px;
      background: var(--surface);
      border-radius: 32px;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(77, 103, 151, .12)
   }

   .sponsor-detail-error {
      padding: 40px;
      background: rgba(255, 243, 243, .9);
      border: 1px solid rgba(255, 99, 99, .2);
      border-radius: 24px;
      text-align: center
   }

   .sponsor-detail-error p {
      color: var(--primary-dark);
      font-size: 1.15rem;
      line-height: 1.75;
      margin-bottom: 24px
   }

   .sponsor-detail-intro {
      display: none
   }

   .sponsor-detail-gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      margin-bottom: 50px
   }

   .sponsor-detail-card {
      display: grid;
      gap: 20px;
      background: var(--surface);
      border: 1px solid rgba(77, 103, 151, .12);
      border-radius: 28px;
      box-shadow: var(--shadow-card);
      overflow: hidden;
      max-width: 900px;
      margin-inline: auto
   }

   .sponsor-detail-image-wrap {
      position: relative;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: var(--surface-soft)
   }

   .sponsor-detail-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .35s ease
   }

   .sponsor-detail-image-wrap:hover img {
      transform: scale(1.02)
   }

   .sponsor-detail-caption {
      padding: 28px
   }

   .sponsor-detail-caption p {
      margin: 0;
      color: var(--text);
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      line-height: 1.9
   }

   .sponsor-detail-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center
   }

   .sponsor-detail-actions .btn {
      min-width: 180px
   }

   /* ==========================================================================
   12. Behandelingen
   ========================================================================== */
   .treatments-page .treatments-hero {
      text-align: left
   }

   .treatments-page .treatments-hero-content {
      max-width: 820px
   }

   .treatments-page .treatments-hero-text {
      padding: 24px;
      border-radius: var(--radius-panel);
      background: var(--surface-soft);
      color: var(--text);
      line-height: 1.75;
      box-shadow: var(--shadow-card)
   }

   .treatments-page .treatments-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px
   }

   .treatments-page .treatment-card {
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 30px
   }

   .treatments-page .treatment-card h3 {
      margin-bottom: 14px;
      color: var(--primary-dark);
      font-size: 1.3rem
   }

   .treatments-page .treatment-card p {
      margin-bottom: 20px;
      color: var(--text)
   }

   .treatments-page .specialties-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px
   }

   .treatments-page .specialty-card {
      padding: 24px;
      background: var(--white);
      box-shadow: 0 18px 36px rgba(35, 80, 120, 0.06)
   }

   .treatments-page .specialty-card h3 {
      margin-bottom: 10px;
      color: var(--primary-dark);
      font-size: 1.15rem
   }

   .treatments-page .specialty-card p {
      color: var(--muted);
      font-size: 0.95rem
   }

   .treatments-page .tariffs-cta {
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 44px;
      border-radius: var(--radius-panel);
      background: var(--cta-gradient);
      box-shadow: var(--shadow-card)
   }

   .treatments-page .tariffs-cta h2 {
      margin-bottom: 10px;
      color: var(--primary-dark);
      font-size: 2rem;
      text-align: left
   }

   .treatments-page .tariffs-cta p {
      color: var(--text)
   }

   /* ==========================================================================
   13. 404
   ========================================================================== */
   .notfound-page .main-content {
      display: grid;
      align-items: center
   }

   .notfound-page .notfound-card {
      width: 100%;
      max-width: var(--content-max);
      min-height: 430px;
      margin: 20px auto 80px;
      padding: 70px 40px 40px;
      border: 1px solid var(--border-soft)
   }

   .notfound-page .notfound-card h1 {
      width: max-content;
      margin-bottom: 16px;
      padding: 10px 22px;
      border-radius: var(--radius-pill);
      background: var(--pill-bg);
      color: var(--primary-dark);
      font-size: clamp(3.5rem, 8vw, 5.5rem);
      line-height: 1
   }

   .notfound-page .notfound-card h2 {
      margin-bottom: 14px;
      color: var(--primary-dark);
      font-size: clamp(2rem, 4vw, 2.75rem);
      line-height: 1.15
   }

   .notfound-page .notfound-card p:not(.eyebrow) {
      max-width: 560px;
      margin-bottom: 28px;
      color: var(--text);
      font-size: 1.08rem;
      line-height: 1.7
   }
}

/* 14. Utility Classes
   Small helpers used by older markup. */
@layer utilities {
   .min-h-screen {
      min-height: 100vh
   }

   .w-full {
      width: 100%
   }

   .h-auto {
      height: auto
   }

   .flex {
      display: flex
   }

   .flex-1 {
      flex: 1
   }

   .flex-row {
      flex-direction: row
   }

   .flex-col {
      flex-direction: column
   }

   .items-center {
      align-items: center
   }

   .justify-center {
      justify-content: center
   }

   .gap-6 {
      gap: 24px
   }

   .gap-10 {
      gap: 40px
   }

   .px-8 {
      padding-inline: 32px
   }

   .px-10 {
      padding-inline: 40px
   }

   .py-2 {
      padding-block: 8px
   }

   .py-20 {
      padding-block: 80px
   }

   .pb-20 {
      padding-bottom: 80px
   }

   .mt-4 {
      margin-top: 16px
   }

   .mt-6 {
      margin-top: 24px
   }

   .max-w-2xl {
      max-width: 672px
   }

   .text-md {
      font-size: 1rem
   }

   .text-2xl {
      font-size: 1.5rem
   }

   .text-4xl {
      font-size: 2.25rem
   }

   .text-6xl {
      font-size: 3.75rem
   }

   .text-black {
      color: #000
   }

   .text-white {
      color: var(--white)
   }

   .font-bold {
      font-weight: 700
   }

   .bg-\[\#F3F3F3\] {
      background: #f3f3f3
   }

   .bg-\[\#B9E5E8\] {
      background: #b9e5e8
   }

   .text-\[\#4A628A\] {
      color: #4a628a
   }
}

/* ==========================================================================
   15. Homepage
   ========================================================================== */
@layer pages {
   .homepage {
      --homepage-blue: #4d6797;
      --homepage-blue-dark: #183b63;
      --homepage-soft: #eef6f8;
      --homepage-card: #fff;
      --homepage-border: rgba(77, 103, 151, .14);
      --homepage-shadow: 0 18px 45px rgba(35, 80, 120, .12);
      display: grid;
      gap: 54px;
      padding: 0 24px 80px;
      background: linear-gradient(180deg, #f7fbfc 0%, #eef6f8 100%);
      color: var(--text)
   }

   /* Hero with image background and navbar overlay. */
   .homepage .homepage-hero {
      position: relative;
      width: calc(100% + 48px);
      min-height: 720px;
      margin: 0 -24px;
      display: flex;
      flex-direction: column;
      background: linear-gradient(90deg, rgba(24, 59, 99, .74), rgba(77, 103, 151, .22)), url("../img/practice/homepage-hero.webp") center/cover no-repeat;
      border-radius: 0;
      padding: 0;
      overflow: hidden
   }

   .homepage .homepage-hero-chrome {
      position: absolute;
      inset: 0 0 auto;
      z-index: 5;
      pointer-events: none
   }

   .homepage .homepage-hero-chrome .site-header {
      position: relative;
      z-index: 6;
      background: transparent;
      background-color: transparent;
      overflow: visible;
      pointer-events: auto
   }

   .homepage .homepage-hero-chrome .navbar-logo {
      display: flex;
      align-items: center;
      width: fit-content;
      height: fit-content;
      border-radius: 999px;
      padding: 4px 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
      background: rgba(77, 103, 151, .75)
   }

   .homepage .homepage-hero-chrome .navbar-container {
      min-height: 128px;
      padding: 24px 80px
   }

   .homepage .homepage-hero-chrome .navbar-links {
      background: rgba(255, 255, 255, .22);
      border: 1px solid rgba(255, 255, 255, .36);
      box-shadow: 0 16px 40px rgba(24, 59, 99, .16);
      backdrop-filter: blur(14px)
   }

   .homepage .homepage-hero-chrome .navbar-btn {
      background: rgba(255, 255, 255, .82);
      color: var(--homepage-blue-dark)
   }

   .homepage .homepage-hero-chrome .navbar-btn:hover,
   .homepage .homepage-hero-chrome .navbar-btn.active {
      background: #d8ebe9;
      color: var(--homepage-blue-dark)
   }

   .homepage .homepage-hero-chrome .page-ovals {
      z-index: 1
   }

   .homepage .homepage-hero-chrome .oval-main {
      top: -500px;
      left: -360px;
      background: rgba(185, 229, 232, .34)
   }

   .homepage .homepage-hero-overlay {
      position: relative;
      z-index: 3;
      flex: 1;
      display: flex;
      align-items: center;
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
      padding: 190px 0 90px
   }

   .homepage .homepage-hero-content {
      max-width: 660px;
      color: #fff
   }

   .homepage .homepage-eyebrow {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(77, 103, 151, 0.75);
      color: var(--homepage-blue-dark);
      font-weight: 700;
      font-size: .86rem;
      letter-spacing: .08em;
      text-transform: uppercase
   }

   .homepage .homepage-hero h1 {
      font-size: clamp(2.8rem, 6vw, 5rem);
      line-height: 1.04;
      color: #fff;
      margin-bottom: 22px
   }

   .homepage .homepage-hero p {
      font-size: 1.24rem;
      line-height: 1.75;
      color: rgba(255, 255, 255, .94);
      margin-bottom: 32px
   }

   .homepage .homepage-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 13px 24px;
      border-radius: 999px;
      font-weight: 800;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease
   }

   .homepage .homepage-button:hover {
      transform: translateY(-2px)
   }

   .homepage .homepage-button-primary {
      background: var(--homepage-blue);
      color: #fff;
      box-shadow: 0 12px 24px rgba(24, 59, 99, .2)
   }

   .homepage .homepage-button-primary:hover {
      background: var(--homepage-blue-dark)
   }

   .homepage .homepage-button-secondary {
      background: #fff;
      color: var(--homepage-blue-dark);
      box-shadow: var(--homepage-shadow)
   }

   .homepage .homepage-section,
   .homepage .homepage-final-cta {
      width: min(1180px, 100%);
      margin: 0 auto;
      border-radius: 30px;
      background: rgba(255, 255, 255, .96);
      box-shadow: var(--homepage-shadow);
      border: 1px solid var(--homepage-border);
      padding: 42px
   }

   .homepage .homepage-split {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 38px;
      align-items: center
   }

   .homepage .homepage-image-panel,
   .homepage .homepage-building-image {
      border-radius: 26px;
      overflow: hidden;
      min-height: 360px;
      background: #d8ebe9;
      box-shadow: 0 12px 30px rgba(24, 59, 99, .12)
   }

   .homepage .homepage-image-panel img,
   .homepage .homepage-building-image img {
      width: 100%;
      height: 100%;
      object-fit: cover
   }

   .homepage .homepage-copy-panel h2,
   .homepage .homepage-section-heading h2,
   .homepage .homepage-final-cta h2 {
      font-size: clamp(2rem, 3.8vw, 3.25rem);
      line-height: 1.12;
      color: var(--homepage-blue-dark);
      margin-bottom: 18px;
      text-align: left
   }

   .homepage .homepage-copy-panel p {
      font-size: 1.08rem;
      line-height: 1.75;
      color: var(--text);
      margin-bottom: 26px
   }

   .homepage .homepage-section-heading {
      max-width: 780px;
      margin: 0 auto 32px;
      text-align: center
   }

   .homepage .homepage-section-heading h2 {
      text-align: center
   }

   .homepage .homepage-section-heading .homepage-eyebrow {
      margin-inline: auto
   }

   /* Team carousel. */
   .homepage .homepage-team-carousel {
      position: relative;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 52px;
      gap: 18px;
      align-items: center
   }

   .homepage .homepage-team-viewport {
      overflow: hidden;
      padding: 4px
   }

   .homepage .homepage-team-track {
      display: flex;
      gap: 24px;
      transition: transform .55s ease
   }

   .homepage .homepage-team-card {
      flex: 0 0 calc((100% - 48px) / 3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 26px;
      background: #fff;
      border: 1px solid var(--homepage-border);
      box-shadow: 0 14px 32px rgba(35, 80, 120, .08)
   }

   .homepage .homepage-team-card img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      background: #d8ebe9
   }

   .homepage .homepage-team-card div {
      display: grid;
      gap: 12px;
      padding: 24px
   }

   .homepage .homepage-team-card h3,
   .homepage .homepage-service-card h3,
   .homepage .homepage-location-grid h3 {
      color: var(--homepage-blue-dark);
      font-size: 1.25rem
   }

   .homepage .homepage-team-card p,
   .homepage .homepage-service-card p,
   .homepage .homepage-location-grid p,
   .homepage .homepage-location-grid li {
      color: var(--muted);
      line-height: 1.7
   }

   .homepage .homepage-card-link {
      display: inline-flex;
      width: max-content;
      margin-top: 4px;
      color: var(--homepage-blue);
      font-weight: 800
   }

   .homepage .homepage-card-link:hover {
      text-decoration: underline
   }

   .homepage .homepage-slider-control {
      width: 52px;
      height: 52px;
      border: 0;
      border-radius: 50%;
      background: var(--homepage-blue);
      color: #fff;
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 14px 28px rgba(24, 59, 99, .18);
      transition: transform .2s ease, background-color .2s ease
   }

   .homepage .homepage-slider-control:hover {
      background: var(--homepage-blue-dark);
      transform: translateY(-2px)
   }

   .homepage .homepage-services {
      background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(216, 235, 233, .55))
   }

   /* Horizontal services row. */
   .homepage .homepage-service-scroll {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(280px, 1fr);
      gap: 22px;
      overflow-x: auto;
      padding: 4px 4px 18px;
      scroll-snap-type: x proximity
   }

   .homepage .homepage-service-card {
      min-height: 170px;
      padding: 26px;
      border-radius: 24px;
      background: #fff;
      border: 1px solid var(--homepage-border);
      box-shadow: 0 12px 28px rgba(35, 80, 120, .07);
      scroll-snap-align: start
   }

   .homepage .homepage-service-card h3 {
      margin-bottom: 10px
   }

   .homepage .homepage-services-action {
      display: flex;
      justify-content: center;
      margin-top: 18px
   }

   .homepage .homepage-location {
      background: linear-gradient(135deg, rgba(238, 246, 248, .95), rgba(255, 255, 255, .96))
   }

   /* Location grid. */
   .homepage .homepage-location-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "info image" "contact map" "hours map";
      gap: 24px;
      align-items: stretch
   }

   .homepage .homepage-practice-info {
      grid-area: info
   }

   .homepage .homepage-building-image {
      grid-area: image;
      min-height: 280px
   }

   .homepage .homepage-contact-card {
      grid-area: contact
   }

   .homepage .homepage-map {
      grid-area: map;
      min-height: 100%
   }

   .homepage .homepage-hours {
      grid-area: hours
   }

   .homepage .homepage-practice-info,
   .homepage .homepage-contact-card,
   .homepage .homepage-hours {
      padding: 26px;
      border-radius: 24px;
      background: #fff;
      border: 1px solid var(--homepage-border);
      box-shadow: 0 12px 28px rgba(35, 80, 120, .07)
   }

   .homepage .homepage-practice-info ul {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      padding-left: 20px
   }

   .homepage .homepage-contact-card a {
      color: var(--homepage-blue);
      font-weight: 800
   }

   .homepage .homepage-map iframe {
      width: 100%;
      height: 100%;
      min-height: 460px;
      border: 0;
      border-radius: 24px;
      box-shadow: 0 12px 28px rgba(35, 80, 120, .12)
   }

   .homepage .homepage-hours table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 8px
   }

   .homepage .homepage-hours td {
      padding: 10px 0;
      border-bottom: 1px solid rgba(77, 103, 151, .14);
      color: var(--text)
   }

   .homepage .homepage-hours td:first-child {
      font-weight: 800;
      color: var(--homepage-blue-dark)
   }

   .homepage .homepage-hours td:last-child {
      text-align: right;
      color: var(--muted)
   }

   /* Final CTA. */
   .homepage .homepage-final-cta {
      display: grid;
      justify-items: center;
      text-align: center;
      background: linear-gradient(135deg, var(--homepage-blue-dark), var(--homepage-blue))
   }

   .homepage .homepage-final-cta h2 {
      color: #fff;
      text-align: center;
      margin-bottom: 20px
   }
}

/* ==========================================================================
   16. Shared tweaks
   ========================================================================== */

/* Shared two-column hero layout. */
.contact-page .contact-hero,
.treatments-page .treatments-hero,
.overons-page .hero-section,
.tarieven-page .tarieven-hero {
   width: 100%;
   min-height: 430px;
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 32px;
   align-items: center;
   margin: 20px auto 40px;
   padding: 70px 40px 40px
}

.contact-page .contact-hero-content,
.treatments-page .treatments-hero-content,
.overons-page .hero-copy,
.tarieven-page .tarieven-hero-copy {
   max-width: 820px
}

.contact-page .contact-hero h1,
.treatments-page .treatments-hero h1,
.overons-page .hero-section h1,
.tarieven-page .tarieven-hoofdtitel {
   margin-bottom: 20px;
   color: var(--primary-dark);
   font-size: clamp(2.35rem, 4vw, 3rem);
   text-align: left
}

.contact-page .contact-hero-content>p,
.treatments-page .treatments-hero-subtitle,
.overons-page .hero-copy>p:not(.eyebrow),
.tarieven-page .tarieven-intro {
   color: var(--text);
   font-size: 1.08rem;
   line-height: 1.75
}

.contact-page .hero-highlight,
.treatments-page .hero-highlight,
.overons-page .hero-highlight,
.tarieven-page .hero-highlight {
   padding: 28px;
   border-radius: var(--radius-panel);
   background: var(--primary-dark);
   color: var(--white);
   box-shadow: var(--shadow-card)
}

.contact-page .hero-highlight h2,
.treatments-page .hero-highlight h2,
.overons-page .hero-highlight h2,
.tarieven-page .hero-highlight h2 {
   margin-bottom: 18px;
   color: var(--white);
   font-size: 1.5rem;
   text-align: left
}

.contact-page .hero-highlight ul,
.treatments-page .hero-highlight ul,
.overons-page .hero-highlight ul,
.tarieven-page .hero-highlight ul {
   display: grid;
   gap: 12px;
   padding-left: 18px
}

.contact-page .hero-highlight li,
.treatments-page .hero-highlight li,
.overons-page .hero-highlight li,
.tarieven-page .hero-highlight li {
   color: var(--white)
}

.contact-page .contact-section,
.contact-page .contact-map-section,
.treatments-page .treatments-section,
.treatments-page .specialties-section {
   border: 1px solid var(--border-soft);
   box-shadow: 0 24px 50px rgba(35, 80, 120, .08)
}

.contact-page .contact-card,
.treatments-page .treatment-card,
.treatments-page .specialty-card {
   position: relative;
   overflow: hidden;
   border-radius: 28px;
   background: var(--surface);
   box-shadow: 0 24px 50px rgba(35, 80, 120, .08)
}

.contact-page .contact-card::before,
.treatments-page .treatment-card::before,
.treatments-page .specialty-card::before {
   content: '';
   position: absolute;
   inset: 0 0 auto;
   height: 8px;
   background: linear-gradient(90deg, var(--accent-light), var(--primary))
}

.treatments-page .treatment-card,
.treatments-page .specialty-card {
   justify-content: flex-start;
   gap: 12px
}

/* Sponsor page wrapper. */
.sponsors-main {
   padding: 20px var(--page-padding) 80px;
   background: var(--page-pattern)
}

.sponsor-page {
   max-width: var(--content-wide);
   margin: 0 auto;
   padding: 0;
   border: 1px solid var(--border-soft)
}

.sponsor-page .sponsor-banner {
   height: 430px;
   border-radius: var(--radius-section) var(--radius-section) 0 0
}

.sponsor-page .sponsor-banner::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(24, 59, 99, .18), rgba(24, 59, 99, .38))
}

.sponsor-page .sponsor-circle {
   z-index: 2;
   bottom: 34px;
   display: grid;
   gap: 6px;
   padding: 18px 34px;
   border-radius: 24px;
   background: rgba(255, 255, 255, .92)
}

.sponsor-page .sponsor-circle .eyebrow {
   margin: 0 auto;
   padding: 0;
   background: transparent;
   color: var(--primary);
   font-size: .78rem
}

.sponsor-page .sponsor-circle h1 {
   overflow-wrap: anywhere
}

.sponsor-page .sponsor-content {
   padding: 46px
}

.sponsor-page .sponsor-company {
   max-width: 1040px;
   border-radius: 28px;
   box-shadow: 0 24px 50px rgba(35, 80, 120, .08);
   text-align: left
}

.sponsor-page .sponsor-logo img {
   width: 150px;
   height: 150px;
   object-fit: cover;
   border-radius: 24px;
   box-shadow: var(--shadow-card)
}

.sponsor-page .sponsor-company-no-image {
   grid-template-columns: 1fr
}

.sponsor-page .sponsor-company-no-image .sponsor-logo {
   justify-items: start;
   text-align: left
}

.sponsor-page .sponsor-description {
   display: grid;
   gap: 14px;
   text-align: left
}

.sponsor-page .sponsor-description p {
   text-align: left
}

.sponsor-detail-page {
   margin: 20px auto 80px;
   border-radius: var(--radius-section);
   background: var(--hero-gradient);
   box-shadow: var(--shadow-soft)
}

.sponsor-detail-hero {
   border-radius: var(--radius-section) var(--radius-section) 0 0
}

.sponsor-detail-content {
   transform: translateY(-22px)
}

/* Dark info panels. */
.notfound-page .hero-highlight,
.therapist-highlight {
   padding: 28px;
   border-radius: var(--radius-panel);
   background: var(--primary-dark);
   color: var(--white);
   box-shadow: var(--shadow-card)
}

.notfound-page .hero-highlight h2,
.therapist-highlight h2 {
   margin-bottom: 18px;
   color: var(--white);
   font-size: 1.5rem;
   text-align: left
}

.notfound-page .hero-highlight ul,
.therapist-highlight ul {
   display: grid;
   gap: 12px;
   padding-left: 18px
}

.notfound-page .hero-highlight li,
.therapist-highlight li {
   color: var(--white)
}

.notfound-page .hero-highlight a {
   color: var(--white);
   font-weight: 700;
   text-decoration: none
}

.notfound-page .hero-highlight a:hover {
   text-decoration: underline
}

.overons-page .team-card-content .card-link {
   justify-self: center;
   margin-top: 4px;
   color: var(--primary);
   font-weight: 800
}

.overons-page .team-card-content .card-link:hover {
   text-decoration: underline
}

.therapist-detail-page .main-content {
   display: grid;
   align-items: center
}

.therapist-page {
   padding: 40px 0 80px;
   background: transparent
}

.therapist-card {
   background: var(--hero-gradient);
   box-shadow: var(--shadow-soft)
}

.therapist-content {
   display: grid;
   gap: 16px
}

.therapist-highlight {
   margin: 8px 0
}

.therapist-highlight h2 {
   font-size: 1.35rem
}

.notfound-page .notfound-card {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: 32px;
   align-items: center;
   text-align: left
}

.notfound-page .notfound-copy {
   text-align: left
}

.notfound-page .notfound-card .btn {
   width: max-content
}

/* Practice photo sections. */
.contact-page .contact-photo-section,
.treatments-page .treatments-photo-section {
   width: 100%;
   max-width: var(--content-max);
   margin: 0 auto;
   display: grid;
   grid-template-columns: .95fr 1.05fr;
   gap: 28px;
   align-items: center;
   padding: 34px;
   border-radius: var(--radius-section);
   background: var(--hero-gradient);
   box-shadow: 0 24px 50px rgba(35, 80, 120, .08);
   border: 1px solid var(--border-soft)
}

.contact-page .contact-photo-copy h2,
.treatments-page .treatments-photo-copy h2 {
   margin-bottom: 14px;
   color: var(--primary-dark);
   font-size: clamp(1.8rem, 3vw, 2.5rem);
   text-align: left
}

.contact-page .contact-photo-copy p,
.treatments-page .treatments-photo-copy p {
   color: var(--text);
   line-height: 1.75
}

.contact-page .contact-photo,
.treatments-page .treatments-photo {
   min-height: 310px;
   border-radius: 28px;
   overflow: hidden;
   box-shadow: 0 20px 44px rgba(35, 80, 120, .12);
   background: var(--surface-soft)
}

.contact-page .contact-photo img,
.treatments-page .treatments-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

/* Hidden RGB easter egg, toggled from main.js with a Shift + arrow sequence. */
body.rgb-mode::before {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 4998;
   pointer-events: none;
   background: linear-gradient(115deg, rgba(255, 0, 128, .2), rgba(0, 180, 255, .2), rgba(0, 255, 160, .18), rgba(255, 214, 0, .16), rgba(255, 0, 128, .2));
   background-size: 500% 500%;
   mix-blend-mode: screen;
   animation: rgbOverlayShift 4s linear infinite
}

body.rgb-mode main,
body.rgb-mode .site-header,
body.rgb-mode .site-footer {
   animation: rgbContentShift 7s linear infinite
}

body.rgb-mode .site-header,
body.rgb-mode section,
body.rgb-mode .section,
body.rgb-mode .site-footer,
body.rgb-mode .sponsor-page,
body.rgb-mode .sponsor-detail-page,
body.rgb-mode .therapist-card,
body.rgb-mode .notfound-card {
   animation: rgbPanelShift 5s linear infinite;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, .58), 0 0 32px rgba(0, 220, 255, .46), 0 0 68px rgba(255, 40, 180, .34), 0 0 100px rgba(70, 255, 150, .26)
}

body.rgb-mode img,
body.rgb-mode iframe {
   animation: rgbMediaShift 6s linear infinite
}

body.rgb-mode .btn,
body.rgb-mode .navbar-btn,
body.rgb-mode .homepage-button,
body.rgb-mode .homepage-slider-control {
   animation: rgbAccentShift 3s linear infinite
}

.easter-toast {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 5000;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 999px;
   background: rgba(24, 59, 99, .94);
   color: #fff;
   box-shadow: 0 18px 40px rgba(0, 0, 0, .22), 0 0 36px rgba(0, 220, 255, .28);
   font-size: .92rem;
   font-weight: 700;
   opacity: .92;
   transition: opacity .2s ease, transform .2s ease
}

body.rgb-mode .easter-toast {
   opacity: .32
}

body.rgb-mode .easter-toast:hover,
body.rgb-mode .easter-toast:focus-within {
   opacity: 1;
   transform: translateY(-2px)
}

.easter-toast button {
   border: 0;
   border-radius: 999px;
   padding: 8px 12px;
   background: #fff;
   color: var(--primary-dark);
   font: inherit;
   cursor: pointer
}

.easter-toast button:hover {
   background: var(--accent-light)
}

.easter-confetti {
   position: fixed;
   inset: 0;
   z-index: 4999;
   pointer-events: none;
   overflow: hidden
}

.easter-confetti span {
   position: absolute;
   top: -26px;
   left: 50%;
   width: 10px;
   height: 20px;
   border-radius: 4px;
   background: hsl(var(--hue, 198), 88%, 58%);
   box-shadow: 0 0 12px hsla(var(--hue, 198), 88%, 58%, .55);
   animation: easterConfettiFall 2.2s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s) forwards;
   transform: rotate(var(--spin, 0deg))
}

.easter-confetti span:nth-child(20n+1) {
   left: 3%
}

.easter-confetti span:nth-child(20n+2) {
   left: 8%
}

.easter-confetti span:nth-child(20n+3) {
   left: 13%
}

.easter-confetti span:nth-child(20n+4) {
   left: 18%
}

.easter-confetti span:nth-child(20n+5) {
   left: 23%
}

.easter-confetti span:nth-child(20n+6) {
   left: 28%
}

.easter-confetti span:nth-child(20n+7) {
   left: 33%
}

.easter-confetti span:nth-child(20n+8) {
   left: 38%
}

.easter-confetti span:nth-child(20n+9) {
   left: 43%
}

.easter-confetti span:nth-child(20n+10) {
   left: 48%
}

.easter-confetti span:nth-child(20n+11) {
   left: 53%
}

.easter-confetti span:nth-child(20n+12) {
   left: 58%
}

.easter-confetti span:nth-child(20n+13) {
   left: 63%
}

.easter-confetti span:nth-child(20n+14) {
   left: 68%
}

.easter-confetti span:nth-child(20n+15) {
   left: 73%
}

.easter-confetti span:nth-child(20n+16) {
   left: 78%
}

.easter-confetti span:nth-child(20n+17) {
   left: 83%
}

.easter-confetti span:nth-child(20n+18) {
   left: 88%
}

.easter-confetti span:nth-child(20n+19) {
   left: 93%
}

.easter-confetti span:nth-child(20n+20) {
   left: 98%
}

.easter-confetti span:nth-child(10n+1) {
   --delay: .02s
}

.easter-confetti span:nth-child(10n+2) {
   --delay: .16s
}

.easter-confetti span:nth-child(10n+3) {
   --delay: .3s
}

.easter-confetti span:nth-child(10n+4) {
   --delay: .08s
}

.easter-confetti span:nth-child(10n+5) {
   --delay: .24s
}

.easter-confetti span:nth-child(10n+6) {
   --delay: .42s
}

.easter-confetti span:nth-child(10n+7) {
   --delay: .12s
}

.easter-confetti span:nth-child(10n+8) {
   --delay: .36s
}

.easter-confetti span:nth-child(10n+9) {
   --delay: .2s
}

.easter-confetti span:nth-child(10n+10) {
   --delay: .48s
}

.easter-confetti span:nth-child(12n+1) {
   --spin: 28deg;
   --hue: 198
}

.easter-confetti span:nth-child(12n+2) {
   --spin: 182deg;
   --hue: 318
}

.easter-confetti span:nth-child(12n+3) {
   --spin: 74deg;
   --hue: 52
}

.easter-confetti span:nth-child(12n+4) {
   --spin: 236deg;
   --hue: 164
}

.easter-confetti span:nth-child(12n+5) {
   --spin: 118deg;
   --hue: 274
}

.easter-confetti span:nth-child(12n+6) {
   --spin: 306deg;
   --hue: 24
}

.easter-confetti span:nth-child(12n+7) {
   --spin: 145deg;
   --hue: 208
}

.easter-confetti span:nth-child(12n+8) {
   --spin: 261deg;
   --hue: 330
}

.easter-confetti span:nth-child(12n+9) {
   --spin: 42deg;
   --hue: 86
}

.easter-confetti span:nth-child(12n+10) {
   --spin: 214deg;
   --hue: 178
}

.easter-confetti span:nth-child(12n+11) {
   --spin: 98deg;
   --hue: 288
}

.easter-confetti span:nth-child(12n+12) {
   --spin: 336deg;
   --hue: 14
}

@keyframes rgbOverlayShift {
   0% {
      background-position: 0% 50%;
      opacity: .55
   }

   50% {
      background-position: 100% 50%;
      opacity: .78
   }

   100% {
      background-position: 0% 50%;
      opacity: .55
   }
}

@keyframes rgbContentShift {
   0% {
      filter: hue-rotate(0deg) saturate(1.08)
   }

   50% {
      filter: hue-rotate(190deg) saturate(1.28)
   }

   100% {
      filter: hue-rotate(360deg) saturate(1.08)
   }
}

@keyframes rgbPanelShift {
   0% {
      filter: hue-rotate(0deg) saturate(1.04)
   }

   50% {
      filter: hue-rotate(220deg) saturate(1.22)
   }

   100% {
      filter: hue-rotate(360deg) saturate(1.04)
   }
}

@keyframes rgbMediaShift {
   0% {
      filter: hue-rotate(0deg) saturate(1.12) contrast(1.02)
   }

   50% {
      filter: hue-rotate(180deg) saturate(1.32) contrast(1.06)
   }

   100% {
      filter: hue-rotate(360deg) saturate(1.12) contrast(1.02)
   }
}

@keyframes rgbAccentShift {
   0% {
      filter: hue-rotate(0deg) saturate(1.28)
   }

   50% {
      filter: hue-rotate(210deg) saturate(1.65)
   }

   100% {
      filter: hue-rotate(360deg) saturate(1.28)
   }
}

@keyframes easterConfettiFall {
   0% {
      opacity: 0;
      transform: translateY(-20px) rotate(var(--spin))
   }

   12% {
      opacity: 1
   }

   100% {
      opacity: 0;
      transform: translateY(105vh) rotate(calc(var(--spin) + 520deg))
   }
}

@media (prefers-reduced-motion:reduce) {

   body.rgb-mode::before,
   body.rgb-mode main,
   body.rgb-mode .site-header,
   body.rgb-mode .site-footer,
   body.rgb-mode section,
   body.rgb-mode .section,
   body.rgb-mode .sponsor-page,
   body.rgb-mode .sponsor-detail-page,
   body.rgb-mode .therapist-card,
   body.rgb-mode .notfound-card,
   body.rgb-mode img,
   body.rgb-mode iframe,
   .easter-confetti span,
   body.rgb-mode .btn,
   body.rgb-mode .navbar-btn,
   body.rgb-mode .homepage-button,
   body.rgb-mode .homepage-slider-control {
      animation: none
   }

   .easter-confetti {
      display: none
   }
}