/* ── TOKENS ────────────────────────────────────────────── */
:root {
  --g:        #2248a4;
  --g-dark:   #1a3a82;
  --g-mid:    #3a64b8;
  --g-light:  #6b8f5e;
  --g-pale:   #e8f0e3;
  --g-xpale:  #f3f7f0;
  --cream:    #faf8f4;
  --white:    #ffffff;
  --ink:      #111714;
  --ink-60:   rgba(17,23,20,.6);
  --ink-30:   rgba(17,23,20,.3);
  --gold:     #c8a96e;
  --gold-lt:  #f0e4cc;
  --r:        8px;
  --r-lg:     16px;
  --r-xl:     24px;
  --ease:     cubic-bezier(.25,.46,.45,.94);
  --max:      1200px;
  
  --mag-navy:#0f2742;
  --mag-navy-2:#183a61;
  --mag-cream:#f6f0e6;
  --mag-cream-2:#fbf8f2;
  --mag-blue:#8fb9e3;
  --mag-blue-soft:#dceaf7;
  --mag-ink:#13202c;
  --mag-muted:rgba(19,32,44,.72);
  --mag-border:rgba(15,39,66,.10);
  --mag-white:#ffffff;
  --mag-shadow:0 22px 50px rgba(15,39,66,.08);
  --mag-radius:18px;
  --mag-max:1240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── NAV ────────────────────────────────────────────────── */

.nav-language-select-wrap{
  margin:6px 0 14px;
}

.nav-language-select{
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
  outline:none;
  appearance:none;
  cursor:pointer;
}

.nav-language-select option{
  color:#111;
  background:#fff;
}

.nav-language-select:focus{
  border-color:rgba(255,255,255,.35);
}
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--g);
  height: 58px;
  display: flex; align-items: center;
  box-shadow: 0 2px 20px rgba(0,0,0,.18);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

.nav-logo {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none;
  min-width: 0;
}
.nav-logo img {
  height: 50px; width: 50px; object-fit: contain;
  border-radius: 50%; padding: 0;
  flex-shrink: 0;
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.nav-logo-text strong { font-size: .95rem; font-weight: 600; color: var(--cream); letter-spacing: .06em; }
.nav-logo-text small { font-size: .65rem; color: rgba(255,255,255,.55); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.nav-links {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 58px;
  right: 0;
  width: min(300px, calc(100vw - 24px));
  background: var(--g-dark);
  padding: 1.1rem;
  gap: .35rem;
  list-style: none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.nav-links.open { display: flex; }

.nav-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  width: 100%;
}

.nav-submenu-title {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.42);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .95rem .15rem;
}

.nav-main-link {
  border: 1px solid rgba(255,255,255,.12);
}

.nav-links a {
  display: block;
  width: 100%;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
  padding: .35rem 2.5rem;
  border-radius: 8px;
  text-align: left;
}
.nav-links a:hover {
  color: var(--white);
  background: rgba(255,255,255,.08); 
}

.nav-cta {
  display: inline-flex;
  align-items: center; 
  justify-content: center;
  background: var(--gold);
  color: var(--g-dark) !important;
  padding: .55rem 1rem;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600 !important;
  transition: background .2s, transform .2s !important;
  white-space: nowrap;
  line-height: 1;
}
.nav-cta:hover { background: var(--gold-lt) !important; transform: translateY(-1px); }

.nav-links .nav-cta {
  width: 100%;
  margin-top: .35rem;
  min-height: 44px;
  padding-top: .95rem;
}

.nav-cta-header {
  min-width: 168px;
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.88);
  border-radius: 2px;
  transition: .3s;
}

.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  padding-top: 58px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  position: relative;
  overflow: hidden;
}

.hero-left {
  background: var(--g-dark);
  padding: 5rem 1rem 5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 480px;
}

.hero-left::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero-sub,
.hero-ctas,
.hero-disclaimer {
  max-width: 380px;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

.hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 3.6vw, 3.6rem) !important;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--white);
    margin-bottom: 1.25rem;
}
.hero h1 em { font-style: italic; color: var(--gold); }

.hero-sub {
  font-size: 1rem; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,.65); max-width: 370px; margin-bottom: 2.5rem;
}

.hero-extra {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  max-width: 420px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.78);
  font-size: .75rem;
  line-height: 1;
}

.hero-ctas { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 380px; margin-top: 10px;}

.cta-primary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-radius: var(--r);
  font-size: .875rem; font-weight: 600; transition: transform .2s var(--ease), box-shadow .2s;
  cursor: pointer; text-decoration: none;
}
.cta-primary:hover { transform: translateX(4px); }

.cta-1 { background: var(--gold); color: var(--g-dark); box-shadow: 0 8px 24px rgba(200,169,110,.3); }
.cta-1:hover { box-shadow: 0 12px 32px rgba(200,169,110,.45); }
.cta-2 { background: rgba(255,255,255,.1); color: var(--white); border: 1px solid rgba(255,255,255,.2); }
.cta-2:hover { background: rgba(255,255,255,.16); }
.cta-3 { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.12); }
.cta-3:hover { background: rgba(255,255,255,.11); }

.cta-label { display: flex; flex-direction: column; }
.cta-label small { font-size: .7rem; font-weight: 400; opacity: .7; margin-top: .15rem; }
.cta-arrow { font-size: 1rem; opacity: .6; }

.hero-quickproof {
  margin-top: 1.2rem;
  display: grid;
  gap: .75rem;
  max-width: 390px;
}

.hero-quickproof-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .7rem;
  align-items: start;
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  line-height: 1.55;
}

.hero-quickproof-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  margin-top: .15rem;
}

.hero-disclaimer {
  margin-top: 2rem;
  font-size: .72rem; color: rgba(255,255,255,.35); line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; max-width: 380px;
}

.hero-right {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.hero-right img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}

.hero-badge {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.hero-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--g-pale);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hero-badge-icon svg { width: 20px; height: 20px; stroke: var(--g); fill: none; stroke-width: 1.8; }

.hero-badge > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.hero-badge strong {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--g-dark);
  line-height: 1.2;
  white-space: normal;
}

.hero-badge span {
  font-size: clamp(.8rem, 1.4vw, .95rem);
  color: var(--ink-60);
  line-height: 1.35;
}

/* ── TRUST BAR ──────────────────────────────────────────── */
.trust-bar {
  background: var(--g-xpale);
  border-top: 1px solid var(--g-pale);
  border-bottom: 1px solid var(--g-pale);
  padding: 1.25rem 2rem;
}
.trust-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 500; color: var(--g-dark);
}
.trust-item svg { width: 16px; height: 16px; stroke: var(--g-light); fill: none; stroke-width: 2; flex-shrink: 0; }
.trust-divider { width: 1px; height: 24px; background: var(--g-pale); }

/* ── SECTION SHARED ─────────────────────────────────────── */
.section { padding: 6rem 2rem; }
.section-inner { max-width: var(--max); margin: 0 auto; }

.eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-light); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--g-light); }

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 1rem;
}
.section-sub { font-size: 1rem; font-weight: 300; color: var(--ink-60); max-width: 560px; line-height: 1.7; }

/* ── METHODE ─────────────────────────────────────────────── */
.methode { background: var(--white); }

.methode-grid {
  margin-top: 3.5rem;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start;
}

.methode-steps { display: flex; flex-direction: column; gap: 1px; }

.step {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.5rem 1.25rem; border-radius: var(--r);
  cursor: pointer; transition: background .2s;
  position: relative;
}
.step::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; border-radius: 3px; transition: background .2s;
}
.step:hover { background: var(--g-xpale); }
.step:hover::before { background: var(--g-light); }
.step.active { background: var(--g-xpale); }
.step.active::before { background: var(--g); }

.step-num {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--g-pale); color: var(--g-dark);
  font-size: .75rem; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .2s;
}
.step.active .step-num { background: var(--g); color: var(--white); }

.step-text h4 { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.step-text p { font-size: .85rem; color: var(--ink-60); line-height: 1.6; }

.methode-output {
  background: var(--g-dark);
  border-radius: var(--r-xl); padding: 2.5rem;
  position: sticky; top: 80px;
}
.methode-output h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; color: var(--white); margin-bottom: .5rem;
}
.methode-output p { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 2rem; }

.output-items { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.output-item {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: .875rem 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.output-item::before { content: '✓'; color: var(--gold); font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.output-item span { font-size: .8rem; color: rgba(255,255,255,.8); }

.rapport-badge {
  margin-top: 1.5rem;
  background: var(--gold);
  border-radius: var(--r); padding: .875rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.rapport-badge span { font-size: .8rem; font-weight: 600; color: var(--g-dark); }
.rapport-badge small { font-size: .7rem; color: rgba(43,63,44,.7); }

/* ── PIJLERS ─────────────────────────────────────────────── */
.pijlers { background: var(--cream); }

.pijlers-grid {
  margin-top: 3.5rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}

.pijler-card {
  background: var(--white); border-radius: var(--r-xl);
  border: 1px solid rgba(0,0,0,.07);
  padding: 2rem; overflow: hidden; position: relative;
  transition: transform .25s var(--ease), box-shadow .25s;
  cursor: pointer;
}
.pijler-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(61,90,62,.1); }

.pijler-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem; font-weight: 600; line-height: 1;
  color: var(--g-pale); position: absolute; top: 1rem; right: 1.5rem;
  user-select: none;
}

.pijler-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--g-pale); display: grid; place-items: center; margin-bottom: 1.25rem;
}
.pijler-icon svg { width: 22px; height: 22px; stroke: var(--g); fill: none; stroke-width: 1.8; }

.pijler-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem;
}
.pijler-tag { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g-light); margin-bottom: .75rem; }
.pijler-card p { font-size: .875rem; color: var(--ink-60); line-height: 1.65; margin-bottom: 1.25rem; }

.pijler-bullets { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.pijler-bullets li {
  font-size: .8rem; color: var(--ink-60); padding-left: 1.1rem; position: relative;
}
.pijler-bullets li::before {
  content: ''; position: absolute; left: 0; top: .5rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--g-light);
}

.pijler-link {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--g);
  transition: gap .2s;
}
.pijler-link:hover { gap: .7rem; }

/* ── DOELGROEPEN ─────────────────────────────────────────── */
.doelgroepen { background: var(--g-dark); }
.doelgroepen .section-title { color: var(--white); }
.doelgroepen .section-sub { color: rgba(255,255,255,.55); }
.doelgroepen .eyebrow { color: var(--gold); }
.doelgroepen .eyebrow::before { background: var(--gold); }

.dg-grid {
  margin-top: 3.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}

.dg-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl); padding: 2rem;
  transition: background .2s, transform .2s var(--ease);
}
.dg-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }

.dg-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  margin-bottom: 1.25rem;
}
.dg-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.7; }

.dg-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--white); margin-bottom: .4rem; }
.dg-card p { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.65; margin-bottom: 1.5rem; }

.dg-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--gold);
  transition: gap .2s;
}
.dg-cta:hover { gap: .8rem; }

/* ── VISIE STRIP ─────────────────────────────────────────── */
.visie {
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%);
  padding: 5rem 2rem; position: relative; overflow: hidden;
}
.visie::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.visie-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.visie h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; color: var(--white);
  line-height: 1.12; margin-bottom: 1rem;
}
.visie h2 em { font-style: italic; color: var(--gold); }
.visie p { font-size: .95rem; color: rgba(255,255,255,.6); line-height: 1.7; }

.visie-items { display: flex; flex-direction: column; gap: 1.25rem; }
.visie-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem; border-radius: var(--r-lg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
.visie-item-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: rgba(200,169,110,.18); display: grid; place-items: center;
}
.visie-item-icon svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; }
.visie-item h4 { font-size: .9rem; font-weight: 600; color: var(--white); margin-bottom: .25rem; }
.visie-item p { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.55; margin: 0; }

/* ── STATS ───────────────────────────────────────────────── */
.stats { background: var(--white); padding: 4rem 2rem; }
.stats-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  text-align: center;
}
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem; font-weight: 600; color: var(--g);
  line-height: 1; display: block;
}
.stat-label { font-size: .8rem; color: var(--ink-60); margin-top: .35rem; line-height: 1.4; }

/* ── JURIDISCH ───────────────────────────────────────────── */
.juridisch {
  background: var(--g-xpale);
  border-top: 1px solid var(--g-pale);
  border-bottom: 1px solid var(--g-pale);
  padding: 2.5rem 2rem;
}
.juridisch-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: flex-start; gap: 1.25rem;
}
.juridisch-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--g-pale); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px;
}
.juridisch-icon svg { width: 18px; height: 18px; stroke: var(--g); fill: none; stroke-width: 2; }
.juridisch-text { font-size: .82rem; color: var(--ink-60); line-height: 1.7; max-width: 900px; }
.juridisch-text strong { color: var(--ink); font-weight: 600; }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact-section { background: var(--white); }

.contact-grid {
  margin-top: 3.5rem;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-item-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--g-pale); display: grid; place-items: center;
}
.contact-item-icon svg { width: 16px; height: 16px; stroke: var(--g); fill: none; stroke-width: 2; }
.contact-item strong { font-size: .85rem; color: var(--ink); display: block; margin-bottom: .2rem; }
.contact-item span { font-size: .85rem; color: var(--ink-60); }

.contact-form { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field-group { display: flex; flex-direction: column; gap: .4rem; }
.field-group label { font-size: .75rem; font-weight: 600; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], select, textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1.5px solid rgba(0,0,0,.1); border-radius: var(--r);
  font-family: 'DM Sans', sans-serif; font-size: .875rem; color: var(--ink);
  background: var(--g-xpale); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--g-light);
  box-shadow: 0 0 0 3px rgba(107,143,94,.15);
  background: var(--white);
}
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; cursor: pointer; }

.submit-btn {
  width: 100%; padding: 1rem;
  background: var(--g); color: var(--white); border: none;
  border-radius: var(--r); font-family: 'DM Sans', sans-serif;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .2s;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.submit-btn:hover { background: var(--g-dark); transform: translateY(-2px); }

/* ── HOME GRIDS & CARDS (TCM-Motion) ─────────────────────── */
.home-section-alt { background: var(--g-xpale); }

.home-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.home-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.home-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.home-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }

.home-card,
.route-card-new,
.blog-card-new,
.step-card-new,
.proof-card-new,
.offer-card-new,
.faq-card-new {
  background: var(--white);
  border: 1px solid rgba(43,63,44,.08);
  border-radius: 18px;
  padding: 1.5rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.home-card:hover,
.route-card-new:hover,
.blog-card-new:hover,
.step-card-new:hover,
.proof-card-new:hover,
.offer-card-new:hover,
.faq-card-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(43,63,44,.08);
  border-color: rgba(61,90,62,.18);
}

.icon-box-new {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--g-pale);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.icon-box-new svg {
  width: 22px;
  height: 22px;
  stroke: var(--g);
  fill: none;
  stroke-width: 1.9;
}

.mini-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--g-light);
  margin-bottom: .8rem;
}
.mini-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--g-light);
}

.card-title-new {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1.12;
  margin-bottom: .6rem;
}
.card-copy-new {
  color: var(--ink-60);
  font-size: .9rem;
  line-height: 1.72;
}

.card-list-new {
  list-style: none;
  display: grid;
  gap: .55rem;
  margin: 1rem 0 1.2rem;
}
.card-list-new li {
  position: relative;
  padding-left: 1rem;
  color: var(--ink-60);
  font-size: .84rem;
  line-height: 1.6;
}
.card-list-new li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-light);
  position: absolute;
  left: 0;
  top: .5rem;
}

.text-link-new {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--g);
  font-size: .84rem;
  font-weight: 700;
  transition: gap .2s var(--ease);
}
.text-link-new:hover { gap: .7rem; }

.route-card-new {
  position: relative;
  overflow: hidden;
}


/* ── BAND (donkere sectie voor citaten/daoyin) ─────────────────── */
.band {
  background: var(--g);
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%);
  position: relative;
  overflow: hidden;
}

.band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.band-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.band h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.band h2 em {
  font-style: italic;
  color: var(--gold);
}

.band p {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,.75);
}

.band strong {
  color: var(--gold);
  font-weight: 600;
}

.band .quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.3;
  margin-bottom: 0.5rem;
}

/* ── PRINCIPLE TABLE (5 werkingsprincipes) ─────────────────── */
.principle-table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.principle-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  background: var(--white);
  border: 1px solid var(--g-pale);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.75rem;
  align-items: center;
  transition: all 0.2s var(--ease);
}

.principle-row:hover {
  border-color: var(--g-light);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  transform: translateX(4px);
}

.principle-row strong {
  color: var(--g);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.principle-row strong small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-60);
  margin-left: 0.25rem;
}

.principle-row span {
  color: var(--ink-60);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 768px) {
  .principle-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.25rem;
  }
  
  .principle-row strong {
    font-size: 0.95rem;
  }
  
  .principle-row span {
    font-size: 0.85rem;
  }
}
/* ── BENEFIT STRIP ─────────────────────────────────────── */
.benefit-strip {
  background: var(--white);
  border-top: 1px solid var(--g-pale);
  border-bottom: 1px solid var(--g-pale);
  padding: 3rem 2rem;
}
.benefit-strip-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}
.benefit-stat {
  text-align: center;
  padding: 1rem;
}
.benefit-stat strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--g-dark);
  margin-bottom: .35rem;
}
.benefit-stat span {
  display: block;
  color: var(--ink-60);
  font-size: .82rem;
  line-height: 1.55;
}

/* ── STEPS LAYOUT ─────────────────────────────────────── */
.steps-layout-new {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: start;
  margin-top: 3rem;
}
.steps-stack-new { display: grid; gap: 1rem; }
.step-card-new {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: start;
}
.step-num-new {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--g);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .82rem;
}
.step-card-new h3 {
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: .3rem;
}
.step-card-new p {
  color: var(--ink-60);
  font-size: .86rem;
  line-height: 1.68;
}

.method-panel-new {
  background: var(--g-dark);
  color: var(--white);
  border-radius: 22px;
  padding: 2rem;
}
.method-panel-new h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  line-height: 1.08;
  margin-bottom: .7rem;
  color: var(--white);
}
.method-panel-new p {
  color: rgba(255,255,255,.64);
  font-size: .9rem;
  line-height: 1.72;
}
.method-points-new {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.3rem 0 1.5rem;
}
.method-point-new {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .85rem .95rem;
  color: rgba(255,255,255,.88);
  font-size: .8rem;
  line-height: 1.5;
}

/* ── DARK PROOF SECTION ───────────────────────────────── */
.dark-proof-section {
  background: var(--g-dark);
}
.dark-proof-section .section-title,
.dark-proof-section .section-sub {
  color: var(--white);
}
.dark-proof-section .section-sub {
  color: rgba(255,255,255,.58);
}
.dark-proof-section .eyebrow {
  color: var(--gold);
}
.dark-proof-section .eyebrow::before {
  background: var(--gold);
}
.proof-card-new {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.proof-card-new .card-title-new,
.proof-card-new .card-copy-new {
  color: var(--white);
}
.proof-card-new .card-copy-new {
  color: rgba(255,255,255,.62);
}
.proof-card-new .icon-box-new {
  background: rgba(255,255,255,.08);
}
.proof-card-new .icon-box-new svg {
  stroke: var(--gold);
}

/* ── CTA BANNER ───────────────────────────────────────── */
.cta-banner-home-wrap {
  background: var(--white);
  padding: 0 2rem 5.5rem;
}
.cta-banner {
  background: var(--g-dark);
  border-radius: var(--r-xl);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  max-width: var(--max);
  margin: 0 auto;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cta-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-banner h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .4rem;
}
.cta-banner p {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  max-width: 480px;
  line-height: 1.6;
}

/* ── CONTACT HOME GRID ────────────────────────────────── */
.contact-home-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  margin-top: 3rem;
}
.contact-box-new {
  background: var(--white);
  border: 1px solid var(--g-pale);
  border-radius: 20px;
  padding: 1.75rem;
}
.contact-box-new h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1.1;
  margin-bottom: .7rem;
}
.contact-box-new p {
  color: var(--ink-60);
  font-size: .9rem;
  line-height: 1.72;
}
.contact-links-new {
  display: grid;
  gap: .8rem;
  margin-top: 1.2rem;
}
.contact-links-new a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--g-pale);
  background: var(--g-xpale);
  padding: .9rem 1rem;
  color: var(--g-dark);
  font-size: .86rem;
  font-weight: 600;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.contact-links-new a:hover {
  transform: translateX(3px);
  border-color: rgba(61,90,62,.22);
  background: #eef5ea;
}
.contact-note-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}
.contact-note-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--g-pale);
  background: var(--g-xpale);
  border-radius: 14px;
  padding: 1rem;
}
.contact-note-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--white);
  display: grid;
  place-items: center;
}
.contact-note-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--g);
  fill: none;
  stroke-width: 1.8;
}
.contact-note-item strong {
  display: block;
  color: var(--g-dark);
  margin-bottom: .2rem;
  font-size: .92rem;
}
.contact-note-item span {
  display: block;
  color: var(--ink-60);
  font-size: .84rem;
  line-height: 1.62;
}

/* ── SYNDROMEN & BEWEGINGEN PAGINAS ───────────────────── */
.detail-hero {
  background: var(--g-dark);
  padding: 4rem 2rem;
  margin-top: 58px;
}
.detail-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.detail-hero h1 {
  color: var(--white);
  margin-bottom: 0.5rem;
}
.detail-hero .kicker {
  color: var(--gold);
  display: inline-block;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}

.filters {
  background: var(--white);
  border: 1px solid var(--g-pale);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.filter-group {
  margin-bottom: 1rem;
}
.filter-group label {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g);
  display: block;
  margin-bottom: 0.5rem;
}
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-chip {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--g-xpale);
  border: 1px solid var(--g-pale);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-chip.active,
.filter-chip[class*="active"] {
  background: var(--g);
  color: white;
  border-color: var(--g);
}
.filter-chip:hover:not(.active) {
  background: var(--g-pale);
}

.syndroom-grid,
.beweging-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.syndroom-card,
.beweging-card {
  background: var(--white);
  border: 1px solid var(--g-pale);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.syndroom-card:hover,
.beweging-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.syndroom-card h3,
.beweging-card h3 {
  color: var(--g);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.syndroom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}
.syndroom-tag {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--g-xpale);
  color: var(--ink-60);
}
.syndroom-link {
  color: var(--g);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── MATRIX TABEL ─────────────────────────────────────── */
.matrix-container {
  overflow-x: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--g-pale);
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}
.matrix-table th,
.matrix-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--g-pale);
  text-align: left;
  vertical-align: top;
}
.matrix-table th {
  background: var(--g-xpale);
  font-weight: 700;
  color: var(--g);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.matrix-table td:first-child {
  font-weight: 600;
  background: var(--g-xpale);
}
.matrix-link {
  color: var(--g);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── INSTRUCTIE CARDS ─────────────────────────────────── */
.instructie-card {
  background: var(--white);
  border: 1px solid var(--g-pale);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.instructie-card h3 {
  color: var(--g);
  margin-bottom: 0.5rem;
}

/* ── DISCLAIMER ───────────────────────────────────────── */
.disclaimer {
  background: var(--white);
  border-left: 8px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.05);
}
.disclaimer h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.disclaimer p {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--g-dark); padding: 3rem 2rem 2rem;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand img { height: 70px; width: 70px; border-radius: 50%; background: var(--g); padding: 2px; }
.footer-brand p { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.65; max-width: 260px; }

.footer-col h4 { font-size: .8rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul a { font-size: .82rem; color: rgba(255,255,255,.45); transition: color .2s; }
.footer-col ul a:hover { color: rgba(255,255,255,.85); }


.footer-offices {
  max-width: var(--max);
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-offices-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.footer-office h5 {
  color: var(--white);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.footer-office p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.footer-office a {
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom {
  max-width: var(--max); margin: 1.5rem auto 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .75rem; color: rgba(255,255,255,.3);
}
.footer-bottom a { color: rgba(255,255,255,.4); transition: color .2s; }
.footer-bottom a:hover { color: rgba(255,255,255,.7); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  background: var(--g-dark); color: var(--white);
  padding: .75rem 1.5rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── ANIMATIONS ──────────────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: .1s; }
.fade-up:nth-child(3) { transition-delay: .2s; }
.fade-up:nth-child(4) { transition-delay: .3s; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-left {
    width: 100%;
    max-width: none;
    padding: 4rem 2rem;
  }
  .hero-right {
    height: 50vw;
    min-height: 300px;
  }
  .home-grid-4,
  .home-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps-layout-new,
  .contact-home-grid {
    grid-template-columns: 1fr;
  }
  .benefit-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-offices-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .methode-grid {
    grid-template-columns: 1fr;
  }
  .methode-output {
    position: static;
  }
  .visie-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .dg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pijlers-grid {
    grid-template-columns: 1fr;
  }
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-inner {
    padding: 0 1rem;
    gap: .5rem;
  }
  .nav-logo-text strong { font-size: .88rem; }
  .nav-logo-text small { font-size: .58rem; }
  .nav-cta-header { display: none; }
  .nav-links {
    right: 8px;
    width: calc(100vw - 16px);
  }
  .home-grid-2,
  .home-grid-3,
  .home-grid-4,
  .home-grid-5 {
    grid-template-columns: 1fr;
  }
  .benefit-strip {
    padding: 2.5rem 1.25rem;
  }
  .benefit-strip-inner {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .method-points-new {
    grid-template-columns: 1fr;
  }
  .cta-banner-home-wrap {
    padding: 0 1.25rem 4.5rem;
  }
  .hero-ctas { max-width: 100%; }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .trust-divider { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  
  .footer-offices-inner {
    grid-template-columns: 1fr;
  }
  .dg-grid {
    grid-template-columns: 1fr;
  }
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .output-items {
    grid-template-columns: 1fr;
  }
  .hero-badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .hero-badge > div:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }
  .hero-badge strong {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .section { padding: 4rem 1.25rem; }
  .hero-left { padding: 3rem 1.25rem; }
  .benefit-strip-inner { grid-template-columns: 1fr; }
  .nav-logo-text small { display: none; }
  
  .stats-inner {
    grid-template-columns: 1fr;
  }
}

/* ── EXTRA COMPONENTEN (anchor-nav, buttons, etc) ───────── */
.anchor-nav {
  background: var(--g-xpale);
  border-bottom: 1px solid var(--g-pale);
  padding: .875rem 2rem;
  position: sticky;
  top: 58px;
  z-index: 100;
}
.anchor-nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  overflow-x: auto;
}
.anchor-nav a {
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-60);
  padding: .4rem .9rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.anchor-nav a:hover,
.anchor-nav a.active {
  background: var(--g);
  color: var(--white);
}

.section-alt { background: var(--cream); }
.section-dark { background: var(--g-dark); }
.eyebrow-gold { color: var(--gold); }
.eyebrow-gold::before { background: var(--gold); }
.section-title-white { color: var(--white); }
.section-sub-white {
  color: rgba(255,255,255,.55);
  margin-bottom: 3rem;
}

.btn-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-radius: var(--r);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: var(--gold);
  color: var(--g-dark);
  box-shadow: 0 6px 20px rgba(200,169,110,.25);
}
.btn-gold:hover { box-shadow: 0 10px 28px rgba(200,169,110,.4); }
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
}
.btn-outline-white:hover { background: rgba(255,255,255,.08); }
.btn-outline-green {
  background: transparent;
  color: #fff;
  border: 1.5px solid var(--g-pale);
}
.btn-outline-green:hover { background: var(--g-xpale); }
.btn-green {
  background: var(--g);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(61,90,62,.2);
}
.btn-green:hover {
  background: var(--g-dark);
  box-shadow: 0 10px 28px rgba(61,90,62,.3);
}

.note {
  border-left: 3px solid var(--g-light);
  background: var(--g-xpale);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1rem 1.25rem;
  font-size: .82rem;
  color: var(--ink-60);
  line-height: 1.65;
}
.note-gold {
  border-left-color: var(--gold);
  background: rgba(200,169,110,.07);
}

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  color: var(--ink-60);
  line-height: 1.6;
}
.bullet-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-light);
  flex-shrink: 0;
  margin-top: .45rem;
}

/* ── WEBSHOP CART BUTTON ─────────────────────────────────── */
.nav-cta-cart {	 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--g);
  color: var(--white) !important;
  padding: .32rem 1rem;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600 !important;
  transition: background .2s, transform .2s !important;
  white-space: nowrap;
  line-height: 1;
  border: 1px solid #c8a96e; 
}
.nav-cta-cart:hover {
  background: var(--g-dark) !important;
  color: var(--white) !important;
  box-shadow: 0 12px 28px rgba(43,63,44,.24);
}
.nav-cta-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-cta-cart span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1;
}
.nav-cta-cart strong {
  font-weight: 700;
  color: inherit;
}
@media (max-width: 768px) {
  .nav-cta-cart {
    min-width: auto;
    padding: .58rem .9rem;
    display: block;
    border: none;
  }
  .nav-cta-cart svg {
    width: 17px;
    height: 17px;
  }
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--g-dark);
  padding: 3rem 2rem 2rem;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.footer-brand h4,
.footer-col h5,
.footer-office h5 {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.footer-brand p,
.footer-col a,
.footer-office p,
.footer-office a,
.footer-bottom span,
.footer-bottom a,


.footer-brand p {
  color: rgba(255,255,255,.85);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col a {
  color: rgba(255,255,255,.75);
  font-size: 0.85rem;
  transition: color 0.2s;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--white) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer sites (logo links) */



/* Footer offices */
.footer-offices {
  max-width: var(--max);
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-offices-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.footer-office h5 {
  color: var(--white);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.footer-office p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.footer-office a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-office a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Footer bottom */
.footer-bottom {
  max-width: var(--max);
  margin: 1.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  padding-top: 1rem;
}

.footer-bottom span,
.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
 
  .footer-offices-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  footer {
    padding: 2rem 1rem 1.5rem;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-offices-inner {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}


/* Motion-specific styling */
.motion-hero {
    background: linear-gradient(135deg, #2c5f2d 0%, #1e3a1e 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 0 0 20px 20px;
    margin-bottom: 2rem;
}

.motion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.motion-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.motion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.motion-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.motion-category {
    background: #97bc62;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #1e3a1e;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.motion-code {
    font-family: monospace;
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

.motion-card h3 {
    font-size: 1.4rem;
    margin: 0.5rem 0;
    color: #2c5f2d;
}

.motion-meta {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.treatment-principle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.motion-read-more {
    margin-top: 1rem;
    color: #97bc62;
    font-weight: bold;
}

/* Eénkleurige iconen */
.mono-icon {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background: currentColor;
    flex: 0 0 auto;
    vertical-align: -0.1em;
}

.mono-icon-source {
    border-radius: 50%;
    position: relative;
    margin-right: 0.45em;
}

.mono-icon-source::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -35%;
    width: 0.32em;
    height: 0.55em;
    background: currentColor;
    border-radius: 1em;
    transform: translateX(-50%);
}

.mono-icon-category {
    border-radius: 50% 50% 45% 45%;
    position: relative;
}

.mono-icon-category::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -42%;
    width: 0.28em;
    height: 0.55em;
    background: currentColor;
    border-radius: 1em;
    transform: translateX(-50%);
}

.mono-icon-category::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -38%;
    width: 1.15em;
    height: 0.22em;
    background: currentColor;
    border-radius: 1em;
    transform: translateX(-50%);
}

.mono-icon-treatment {
    border-radius: 50%;
    position: relative;
}

.mono-icon-treatment::before {
    content: "";
    position: absolute;
    inset: 20%;
    border: 0.16em solid currentColor;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(25deg);
}

.mono-icon-treatment::after {
    content: "";
    position: absolute;
    right: 8%;
    top: 6%;
    width: 0.28em;
    height: 0.28em;
    background: currentColor;
    border-radius: 50%;
}

/* Pagination styling (zelfde als TCM Magazine) */
.pagination {
    margin-top: 3rem;
    padding: 1rem 0;
}

.pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next {
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
}

.pagination-page.active {
    background: #2c5f2d;
    color: white;
}

.pagination-info {
    text-align: center;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.pagination {
    margin-top: 3rem;
    padding: 1rem 0;
}

.pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next {
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
}

.pagination-prev:hover,
.pagination-next:hover {
    background: #e0e0e0;
}

.pagination-pages {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-page {
    padding: 0.5rem 0.8rem;
    background: #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.pagination-page:hover {
    background: #e0e0e0;
}

.pagination-page.active {
    background: #4a90e2;
    color: white;
}

.pagination-dots {
    padding: 0.5rem 0.8rem;
    color: #999;
}

.pagination-info {
    text-align: center;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

[dir="rtl"] .pagination-prev,
[dir="rtl"] .pagination-next {
    transform: scaleX(-1);
}

/* /assets/css/syndromen.css */

/* Main container */
.mag-syndromes {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Hero sectie */
.syndromes-hero {
    text-align: center;
	margin-top:50px;
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #2248a4 0%, #2248a4 100%);
    border-radius: 16px;
    color: white;
}

.syndromes-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.syndromes-hero h1 {
    font-size: 2.5rem;
	color: var(--gold);
    margin-bottom: 1rem;
    font-weight: 700;
}

.syndromes-hero p {
    font-size: 1.1rem;
	color:#fff;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.syndromes-source {
    font-size: 0.85rem;
    opacity: 0.8;
    font-style: italic;
}

/* Empty message */
.syndromes-empty-message {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    color: #6c757d;
    font-size: 1.1rem;
}

/* Grid layout */
.syndromes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Syndroom kaart */
.syndrome-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    border: 1px solid #e9ecef;
}

.syndrome-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Kaart header */
.syndrome-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.syndrome-category {
    background: var(--g-light);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.syndrome-code {
    font-family: monospace;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #495057;
}

/* Kaart titel */
.syndrome-card h3 {
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    color: #212529;
    font-weight: 600;
    line-height: 1.4;
}

/* Kaart beschrijving */
.syndrome-card p {
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
}

/* Meta informatie */
.syndrome-meta {
    margin: 1rem 0;
    padding: 0.75rem 0;
}

.treatment-principle {
    color: #495057;
    font-size: 0.9rem;
    font-style: italic;
    display: block;
    line-height: 1.5;
}

/* Read more link */
.syndrome-read-more {
    color: #667eea;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    display: inline-block;
}

.syndrome-card:hover .syndrome-read-more {
    color: #764ba2;
}

/* Paginering */
.pagination {
    margin-top: 3rem;
    padding: 1rem 0;
}

.pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next {
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
}

.pagination-prev:hover,
.pagination-next:hover {
    background: #e0e0e0;
}

.pagination-pages {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-page {
    padding: 0.5rem 0.8rem;
    background: #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
    min-width: 36px;
    text-align: center;
}

.pagination-page:hover {
    background: #e0e0e0;
}

.pagination-page.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pagination-dots {
    padding: 0.5rem 0.8rem;
    color: #999;
}

.pagination-info {
    text-align: center;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

/* RTL ondersteuning voor paginering */
[dir="rtl"] .pagination-prev,
[dir="rtl"] .pagination-next {
    transform: scaleX(-1);
}

[dir="rtl"] .syndrome-read-more {
    display: inline-block;
    transform: scaleX(-1);
}

/* Responsive design */
@media (max-width: 768px) {
    .syndromes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .syndromes-hero h1 {
        font-size: 2rem;
    }
    
    .syndromes-hero p {
        font-size: 1rem;
    }
    
    .syndromes-hero {
        padding: 1.5rem;
    }
    
    .syndrome-card {
        padding: 1.25rem;
    }
    
    .syndrome-card h3 {
        font-size: 1.2rem;
    }
    
    .pagination-prev,
    .pagination-next {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .pagination-page {
        padding: 0.4rem 0.6rem;
        min-width: 32px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .mag-syndromes {
        padding: 1rem;
    }
    
    .syndromes-hero h1 {
        font-size: 1.5rem;
    }
    
    .pagination-inner {
        gap: 0.5rem;
    }
    
    .pagination-pages {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    
    .pagination-prev {
        order: 1;
    }
    
    .pagination-next {
        order: 2;
    }
}

/* Print styles */
@media print {
    .syndrome-card {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .pagination,
    .syndromes-hero {
        background: none;
        color: black;
    }
    
    .syndrome-read-more {
        display: none;
    }
}


.mag-syndrome-detail {
    padding-top: 55px;
}

.syndrome-detail-hero {
    background: var(--mag-cream-2);
    padding: 2rem 2rem;
    border-bottom: 1px solid var(--mag-border);
}

.syndrome-detail-hero-inner {
    max-width: var(--mag-max);
    margin: 0 auto;
}

.syndrome-detail-breadcrumb {
    margin-bottom: 1.5rem;
}

.syndrome-detail-breadcrumb a {
    color: var(--mag-navy);
    font-size: 0.9rem;
    font-weight: 500;
}

.syndrome-detail-header {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.syndrome-category-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    background: var(--mag-cream);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: var(--mag-navy-2);
}

.syndrome-code-badge {
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--mag-navy);
    color: var(--mag-white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.syndrome-detail-hero h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin-bottom: 0.75rem;
    font-family: "Cormorant Garamond", Georgia, serif;
}

.syndrome-treatment-principle {
    font-size: 0.95rem;
    color: var(--mag-navy);
    background: var(--mag-blue-soft);
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: 30px;
}

.syndrome-detail-content {
    max-width: var(--mag-max);
    margin: 0 auto;
    padding: 3rem 2rem;
}

.syndrome-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2.5rem;
    align-items: start;
}

.detail-card {
    background: var(--mag-white);
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(15, 39, 66, 0.05);
}

.detail-card:last-child {
    margin-bottom: 0;
}

.detail-card h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--mag-blue);
    display: inline-block;
    font-family: "Inter", system-ui, sans-serif;
}

.caution-card {
    background: var(--mag-cream);
    border-left: 4px solid #e67e22;
}

.points-card {
    position: sticky;
    top: 100px;
}

.points-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.point-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mag-border);
}

.point-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.point-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.point-code-badge {
    font-family: monospace;
    font-weight: 700;
    font-size: 1rem;
    color: var(--mag-navy);
    background: var(--mag-blue-soft);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.point-role-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.role-primary {
    background: #2ecc71;
    color: white;
}

.role-secondary {
    background: #3498db;
    color: white;
}

.role-adjuvant {
    background: #95a5a6;
    color: white;
}

.point-name {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.point-chinese {
    font-size: 0.85rem;
    color: var(--mag-muted);
    margin-left: 0.5rem;
}

.point-meridian {
    font-size: 0.75rem;
    color: var(--mag-muted);
    margin-bottom: 0.5rem;
}

.point-location {
    font-size: 0.75rem;
    color: var(--mag-muted);
    margin-bottom: 0.5rem;
}

.point-detail-link {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--mag-navy);
    font-weight: 600;
    margin-top: 0.5rem;
}

@media (max-width: 980px) {
    .syndrome-detail-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .points-card {
        position: static;
    }
    
    .syndrome-detail-content {
        padding: 2rem 1rem;
    }
    
    .syndrome-detail-hero {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 640px) {
    .detail-card {
        padding: 1rem;
    }
}

/* =====================================================
   MERIDIANS OVERVIEW (meridians.php)
   ===================================================== */

.mag-meridians {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    margin-top: 70px;
}

.meridians-hero {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 2rem 1rem;
    background: #f5f3eb;
    border-radius: 8px;
}

.meridians-hero-inner h1 {
    font-size: 2.2rem;
    color: #2c3e4f;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.meridians-hero-inner p {
    font-size: 1rem;
    color: #6c86a3;
    max-width: 700px;
    margin: 0 auto;
}

.meridians-source {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: #6c86a3;
}

.meridians-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.meridian-card {
    display: block;
    background: #ffffff;
    border-radius: 8px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.meridian-card:hover {
    border-color: #cbd5e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.meridian-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.meridian-code {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c7a4d;
    background: #e6f7e6;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-family: monospace;
}

.meridian-element {
    font-size: 0.75rem;
    color: #8ba0ae;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.meridian-card h3 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
    color: #2c3e4f;
    font-weight: 500;
}

.meridian-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
    color: #6c86a3;
}

.meridian-meta span {
    background: #f8fafc;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.meridian-card p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #5a6e7c;
    margin: 0;
}

/* =====================================================
   MERIDIAN DETAIL (meridian.php)
   ===================================================== */

.mag-meridian {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    margin-top: 70px;
}

.back-link-wrapper {
    margin-bottom: 1rem;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: #6c86a3;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.back-button:hover {
    color: #2c7a4d;
}

.back-arrow {
    font-size: 1.1rem;
}

.meridian-hero {
    background: #f5f3eb;
    border-radius: 8px;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
}

.meridian-hero-inner h1 {
    font-size: 2rem;
    color: #2c3e4f;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.meridian-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.badge {
    background: #e9ecef;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #495057;
}

.meridian-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.meridian-section {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

.meridian-section h2 {
    font-size: 1.3rem;
    color: #2c3e4f;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 500;
}

.meridian-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #334155;
}

.meridian-text p {
    margin-bottom: 0.75rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.data-table th,
.data-table td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.data-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #2c3e4f;
}

.data-table tr:nth-child(even) {
    background: #fafafa;
}

.points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.point-card {
    background: #fafafa;
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
}

.point-card:hover {
    background: #ffffff;
    border-color: #cbd5e0;
}

.point-code {
    font-size: 1rem;
    font-weight: 600;
    color: #2c7a4d;
    font-family: monospace;
    margin-bottom: 0.25rem;
}

.point-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #2c3e4f;
    margin-bottom: 0.25rem;
}

.point-pinyin {
    font-size: 0.75rem;
    color: #8ba0ae;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.point-location,
.point-indications {
    font-size: 0.75rem;
    color: #5a6e7c;
    line-height: 1.3;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #e2e8f0;
}

.btn-small {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    background: #e9ecef;
    color: #2c3e4f;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.7rem;
    transition: background 0.2s;
}

.btn-small:hover {
    background: #dee2e6;
}

@media (max-width: 768px) {
    .mag-meridians,
    .mag-meridian {
        padding: 1rem;
    }
    
    .meridians-hero-inner h1,
    .meridian-hero-inner h1 {
        font-size: 1.5rem;
    }
    
    .meridian-section {
        padding: 1rem;
    }
    
    .meridian-section h2 {
        font-size: 1.1rem;
    }
    
    .points-grid {
        grid-template-columns: 1fr;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.4rem;
        font-size: 0.75rem;
    }
}

[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td {
    text-align: right;
}

/* =====================================================
   ACUPUNCTURE POINTS PAGE
   ===================================================== */

.mag-acupuncture {
    padding-top: 72px;
}

.acupuncture-hero {
    background: var(--mag-cream-2);
    padding: 4rem 2rem;
    text-align: center;
}

.acupuncture-hero-inner {
    max-width: 820px;
    margin: 0 auto;
}

.acupuncture-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    margin-bottom: 1rem;
}

.acupuncture-source {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--mag-muted);
}

.acupuncture-navigation {
    background: var(--mag-white);
    border-bottom: 1px solid var(--mag-border);
    position: sticky;
    top: 72px;
    z-index: 100;
}

.acupuncture-nav-inner {
    max-width: var(--mag-max);
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.acupuncture-nav-link {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: var(--mag-cream);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.acupuncture-nav-link:hover {
    background: var(--mag-navy);
    color: var(--mag-white);
}

.acupuncture-content {
    max-width: var(--mag-max);
    margin: 0 auto;
    padding: 2rem;
}

.acupuncture-meridian-section {
    margin-bottom: 3.5rem;
    scroll-margin-top: 100px;
}

.acupuncture-meridian-header {
    background: var(--mag-navy);
    color: var(--mag-white);
    padding: 0.75rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.acupuncture-meridian-header h2 {
    margin: 0;
    color: var(--mag-white);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.4rem;
}

.acupuncture-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--mag-border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    background: var(--mag-white);
}

.acupuncture-points-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.acupuncture-points-table th,
.acupuncture-points-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--mag-border);
}

.acupuncture-points-table th {
    background: var(--mag-cream);
    font-weight: 700;
    color: var(--mag-ink);
}

.acupuncture-points-table tr:hover {
    background: var(--mag-cream-2);
}

.point-code {
    font-family: monospace;
    font-weight: 700;
    color: var(--mag-navy);
    white-space: nowrap;
}

.point-chinese {
    font-family: "Noto Sans SC", "Noto Sans CJK SC", system-ui;
    font-size: 1rem;
}

.details-link {
    color: var(--mag-navy);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.details-na {
    color: var(--mag-muted);
}

@media (max-width: 768px) {
    .acupuncture-nav-inner {
        padding: 0.75rem 1rem;
    }

    .acupuncture-points-table th,
    .acupuncture-points-table td {
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
    }

    .point-chinese {
        font-size: 0.85rem;
    }
}

/* =====================================================
   ACUPUNCTURE DETAIL PAGE
   ===================================================== */

.mag-acupuncture-detail {
    padding-top: 72px;
}

.acupuncture-detail-hero {
    background: var(--mag-cream-2);
    padding: 2.5rem 2rem;
    border-bottom: 1px solid var(--mag-border);
}

.acupuncture-detail-hero-inner {
    max-width: var(--mag-max);
    margin: 0 auto;
}

.acupuncture-detail-breadcrumb {
    margin-bottom: 1.5rem;
}

.acupuncture-detail-breadcrumb a {
    color: var(--mag-navy);
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.acupuncture-detail-breadcrumb a:hover {
    opacity: 0.7;
}

.acupuncture-detail-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
    font-family: "Cormorant Garamond", Georgia, serif;
}

.acupuncture-detail-english {
    font-size: 1.1rem;
    color: var(--mag-muted);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.acupuncture-detail-meridian {
    font-size: 0.9rem;
    color: var(--mag-navy-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.acupuncture-detail-content {
    max-width: var(--mag-max);
    margin: 0 auto;
    padding: 3rem 2rem;
}

.acupuncture-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}

.acupuncture-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-card {
    background: var(--mag-white);
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(15, 39, 66, 0.05);
}

.detail-card h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--mag-blue);
    display: inline-block;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
}

.detail-card p {
    color: var(--mag-muted);
    line-height: 1.65;
    margin: 0;
}

.detail-card-message {
    background: var(--mag-cream);
    text-align: center;
    padding: 2rem;
}

.detail-card-message p {
    color: var(--mag-navy);
}

.detail-card-message p:first-child {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.detail-grid div {
    background: var(--mag-cream);
    padding: 0.75rem 1rem;
    border-radius: 12px;
}

.detail-grid strong {
    color: var(--mag-navy);
}

.acupuncture-detail-sidebar {
    position: sticky;
    top: 100px;
}

.acupuncture-detail-sidebar .detail-card {
    margin-bottom: 1.5rem;
}

.article-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-list li {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mag-border);
}

.article-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.article-list a {
    display: block;
    color: var(--mag-ink);
    transition: color 0.2s ease;
}

.article-list a:hover {
    color: var(--mag-navy);
}

.article-label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--mag-cream);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-right: 0.5rem;
    color: var(--mag-navy-2);
}

.article-list strong {
    font-size: 0.95rem;
    font-weight: 500;
}

@media (max-width: 980px) {
    .acupuncture-detail-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .acupuncture-detail-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .acupuncture-detail-hero {
        padding: 1.5rem 1rem;
    }

    .acupuncture-detail-content {
        padding: 2rem 1rem;
    }

    .detail-card {
        padding: 1rem;
    }

    .detail-card h2 {
        font-size: 1.1rem;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* over.php */

.mag-over {
    padding-top: 72px;
}

.over-hero {
    padding: 2rem;
}

.over-hero-inner {
    max-width: var(--mag-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 0;
    background: var(--mag-cream-2);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--mag-shadow);
}

.over-hero-copy {
    padding: 4rem 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.over-hero-copy h1 {
    font-size: clamp(2.6rem, 5vw, 4.7rem);
    max-width: 760px;
}

.over-hero-copy p {
    max-width: 680px;
    font-size: 1.08rem;
}

.over-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.over-hero-media {
    min-height: 420px;
    background: var(--mag-navy);
}

.over-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.over-mission-section {
    padding-top: 4rem;
    padding-bottom: 5rem;
}

.over-mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: start;
}

.over-mission-copy h2 {
    font-size: clamp(2.1rem, 4vw, 3.5rem);
}

.over-mission-copy p {
    font-size: 1.05rem;
    max-width: 620px;
}

.over-mission-cards {
    display: grid;
    gap: 1.25rem;
}

.over-info-card {
    background: var(--mag-white);
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgba(15,39,66,.05);
}

.over-info-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--mag-blue-soft);
    color: var(--mag-navy);
    font-weight: 800;
    font-size: 0.85rem;
}

.over-info-card h3 {
    font-size: 1.45rem;
    margin-bottom: 0.6rem;
}

.over-info-card p {
    margin-bottom: 0;
    font-size: 0.96rem;
}

.over-band {
    background: var(--mag-navy);
    color: var(--mag-white);
}

.over-band-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 4.75rem 2rem;
    text-align: center;
}

.over-band h2 {
    color: var(--mag-white);
    font-size: clamp(2.3rem, 4vw, 3.8rem);
    margin-bottom: 1rem;
}

.over-band p {
    max-width: 820px;
    margin: 0 auto;
    color: rgba(255,255,255,.86);
    font-size: 1rem;
}

@media (max-width: 980px) {
    .mag-over {
        padding-top: 66px;
    }

    .over-hero {
        padding: 1rem;
    }

    .over-hero-inner {
        grid-template-columns: 1fr;
    }

    .over-hero-copy {
        padding: 2.5rem 1.5rem;
    }

    .over-hero-media {
        min-height: 340px;
    }

    .over-mission-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .over-hero-copy h1 {
        font-size: 2.35rem;
    }

    .over-hero-copy p {
        font-size: 1rem;
    }

    .over-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .over-hero-actions .btn {
        width: 100%;
    }

    .over-band-inner {
        padding: 3.5rem 1rem;
    }
}


*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--mag-cream);
  color:var(--mag-ink);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

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

p{
  color:var(--mag-muted);
  line-height:1.75;
  margin:0 0 1rem;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 1rem;
  line-height:1.08;
  color:var(--mag-ink);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
}

main{
  display:block;
}

.section{
  max-width:var(--mag-max);
  margin:0 auto;
  padding:5rem 2rem;
}

.section-kicker{
  display:inline-block;
  margin-bottom:.75rem;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mag-navy-2);
  font-weight:700;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  background:var(--mag-navy);
  color:var(--mag-white);
  border:1px solid var(--mag-navy);
  transition:all .2s ease;
  cursor:pointer;
  font-weight:600;
}

.btn:hover{
  background:var(--mag-navy-2);
  border-color:var(--mag-navy-2);
}

.btn.light{
  background:var(--mag-white);
  color:var(--mag-navy);
  border-color:var(--mag-white);
}

.btn.light:hover{
  background:var(--mag-blue-soft);
  color:var(--mag-navy);
  border-color:var(--mag-blue-soft);
}

/* over.php */

.mag-over{
  padding-top:72px;
}

.over-hero{
  padding:2rem;
}

.over-hero-inner{
  max-width:var(--mag-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  background:var(--mag-cream-2);
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--mag-shadow);
}

.over-hero-copy{
  padding:4rem 4.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.over-hero-copy h1{
  font-size:clamp(2.6rem,2.6rem,2.6rem);
  max-width:760px;
}

.over-hero-copy p{
  max-width:680px;
  font-size:1.08rem;
}

.over-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}

.over-hero-media{
  min-height:420px;
  background:var(--mag-navy);
}

.over-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.over-mission-section{
  padding-top:4rem;
  padding-bottom:5rem;
}

.over-mission-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:3rem;
  align-items:start;
}

.over-mission-copy h2{
  font-size:clamp(2.1rem,2.1rem,2.1rem);
}

.over-mission-copy p{
  font-size:1.05rem;
  max-width:620px;
}

.over-mission-cards{
  display:grid;
  gap:1.25rem;
}

.over-info-card{
  background:var(--mag-white);
  border:1px solid var(--mag-border);
  border-radius:var(--mag-radius);
  padding:1.5rem;
  box-shadow:0 12px 32px rgba(15,39,66,.05);
}

.over-info-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:1rem;
  border-radius:999px;
  background:var(--mag-blue-soft);
  color:var(--mag-navy);
  font-weight:800;
  font-size:.85rem;
}

.over-info-card h3{
  font-size:1.45rem;
  margin-bottom:.6rem;
}

.over-info-card p{
  margin-bottom:0;
  font-size:.96rem;
}

.over-band{
  background:var(--mag-navy);
  color:var(--mag-white);
}

.over-band-inner{
  max-width:980px;
  margin:0 auto;
  padding:4.75rem 2rem;
  text-align:center;
}

.over-band h2{
  color:var(--mag-white);
  font-size:clamp(2.3rem,4vw,3.8rem);
  margin-bottom:1rem;
}

.over-band p{
  max-width:820px;
  margin:0 auto;
  color:rgba(255,255,255,.86);
  font-size:1rem;
}

@media (max-width:980px){
  .mag-over{
    padding-top:66px;
  }

  .over-hero{
    padding:1rem;
  }

  .over-hero-inner{
    grid-template-columns:1fr;
  }

  .over-hero-copy{
    padding:2.5rem 1.5rem;
  }

  .over-hero-media{
    min-height:340px;
  }

  .over-mission-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

@media (max-width:640px){
  .section{
    padding:3.25rem 1rem;
  }

  .over-hero-copy h1{
    font-size:2.35rem;
  }

  .over-hero-copy p{
    font-size:1rem;
  }

  .over-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .over-hero-actions .btn{
    width:100%;
  }

  .over-band-inner{
    padding:3.5rem 1rem;
  }
}


*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--mag-cream);
  color:var(--mag-ink);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

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

p{
  color:var(--mag-muted);
  line-height:1.75;
  margin:0 0 1rem;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 1rem;
  line-height:1.08;
  color:var(--mag-ink);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
}

main{
  display:block;
}

.section{
  max-width:var(--mag-max);
  margin:0 auto;
  padding:5rem 2rem;
}

.section-head{
  max-width:780px;
  margin-bottom:2rem;
}

.section-kicker{
  display:inline-block;
  margin-bottom:.75rem;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mag-navy-2);
  font-weight:700;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  background:var(--mag-navy);
  color:var(--mag-white);
  border:1px solid var(--mag-navy);
  transition:all .2s ease;
  cursor:pointer;
  font-weight:600;
}

.btn:hover{
  background:var(--mag-navy-2);
  border-color:var(--mag-navy-2);
}

.btn.light{
  background:var(--mag-white);
  color:var(--mag-navy);
  border-color:var(--mag-white);
}

.btn.light:hover{
  background:var(--mag-blue-soft);
  color:var(--mag-navy);
  border-color:var(--mag-blue-soft);
}

/* contact.php */

.mag-contact{
  padding-top:72px;
}

.contact-hero-mag{
  padding:2rem;
}

.contact-hero-mag-inner{
  max-width:var(--mag-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  background:var(--mag-cream-2);
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--mag-shadow);
}

.contact-hero-mag-copy{
  padding:4rem 4.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.contact-hero-mag-copy h1{
  font-size:clamp(2.6rem,2.6rem,2.6rem);
  max-width:760px;
}

.contact-hero-mag-copy p{
  max-width:680px;
  font-size:1.08rem;
}

.contact-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}

.contact-hero-mag-media{
  min-height:420px;
  background:var(--mag-navy);
}

.contact-hero-mag-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.contact-office-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.contact-office-card{
  background:var(--mag-white);
  border:1px solid var(--mag-border);
  border-radius:var(--mag-radius);
  padding:1.5rem;
  box-shadow:0 12px 32px rgba(15,39,66,.05);
}

.contact-office-card h3{
  font-size:1.45rem;
  margin-bottom:.75rem;
}

.contact-office-card p{
  font-size:.96rem;
}

.contact-office-card a{
  color:var(--mag-navy);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.contact-map-section{
  padding-top:3rem;
}

.contact-map{
  width:100%;
  height:520px;
  border-radius:var(--mag-radius);
  overflow:hidden;
  border:1px solid var(--mag-border);
  box-shadow:var(--mag-shadow);
  background:var(--mag-white);
  position:relative;
  z-index:1;
}

.contact-map .leaflet-pane,
.contact-map .leaflet-top,
.contact-map .leaflet-bottom{
  z-index:1;
}

@media (max-width:980px){
  .mag-contact{
    padding-top:66px;
  }

  .contact-hero-mag{
    padding:1rem;
  }

  .contact-hero-mag-inner{
    grid-template-columns:1fr;
  }

  .contact-hero-mag-copy{
    padding:2.5rem 1.5rem;
  }


  .contact-hero-mag-media{
    min-height:340px;
  }

  .contact-office-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .section{
    padding:3.25rem 1rem;
  }

  .contact-hero-mag-copy h1{
    font-size:2.35rem;
  }

  .contact-hero-mag-copy p{
    font-size:1rem;
  }

  .contact-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .contact-hero-actions .btn{
    width:100%;
  }

  .contact-map{
    height:420px;
  }
}

/* =====================================================
   EXTRA RESPONSIVE FIXES voor tcm-motion.com
   ===================================================== */

/* Fix 1: Hero left neemt volledige breedte op mobiel */
@media (max-width: 1024px) {
  .hero-left {
    width: 100%;
    max-width: 100%;
    padding: 3rem 1.5rem;
  }
  
  .hero-sub,
  .hero-ctas,
  .hero-disclaimer,
  .hero-quickproof {
    max-width: 100%;
  }
  
  .hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }
}

/* Fix 2: Hero right hoogte beter op tablets */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-right {
    height: 40vw;
    min-height: 280px;
  }
}

/* Fix 3: Trust bar op mobiel netter uitlijnen */
@media (max-width: 640px) {
  .trust-bar {
    padding: 1rem;
  }
  
  .trust-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  
  .trust-item {
    font-size: 0.7rem;
  }
  
  .trust-divider {
    display: inline-block;
    height: 20px;
  }
}

/* Fix 4: Home grids - soepelere overgang */
@media (max-width: 900px) and (min-width: 769px) {
  .home-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fix 5: Hero chips wrappen beter */
@media (max-width: 480px) {
  .hero-extra {
    gap: 0.4rem;
  }
  
  .hero-chip {
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
  }
  
  .hero-quickproof-item {
    font-size: 0.75rem;
    gap: 0.5rem;
  }
  
  .cta-primary {
    padding: 0.85rem 1rem;
  }
  
  .cta-label span {
    font-size: 0.8rem;
  }
  
  .cta-label small {
    font-size: 0.65rem;
  }
}

/* Fix 6: Band (daoyin) tekst op mobiel */
@media (max-width: 640px) {
  .band-inner {
    padding: 3rem 1.25rem;
  }
  
  .band h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  .band p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* Fix 7: Section padding consistent op mobiel */
@media (max-width: 640px) {
  .section {
    padding: 3rem 1.25rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .section-sub {
    font-size: 0.9rem;
  }
}

/* Fix 8: Contact home grid cards */
@media (max-width: 640px) {
  .contact-home-grid {
    gap: 1rem;
  }
  
  .contact-box-new {
    padding: 1.25rem;
  }
  
  .contact-box-new h3 {
    font-size: 1.4rem;
  }
  
  .contact-note-item {
    grid-template-columns: 40px 1fr;
    gap: 0.75rem;
  }
  
  .contact-note-icon {
    width: 40px;
    height: 40px;
  }
}

/* Fix 9: Principle table op mobiel al goed, maar extra padding */
@media (max-width: 480px) {
  .principle-row {
    padding: 1rem;
  }
  
  .principle-row strong {
    font-size: 0.9rem;
  }
  
  .principle-row span {
    font-size: 0.8rem;
  }
}

.syndrome-detail-main .motions-card {
    margin-top: 1.5rem;
}


/* /assets/css/syndrome-detail.css */

.mag-syndrome-detail {
    background: #f6f3ee;
    color: #1f2933;
    font-family: inherit;
}

.syndrome-detail-hero {
    background: linear-gradient(135deg, rgb(34 72 164), rgb(34 72 164)), radial-gradient(circle at top right, rgba(230, 167, 108, 0.28), transparent 42%);
    color: #fff;
}

.syndrome-detail-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.syndrome-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 26px;
}

.syndrome-back-link:hover {
    color: #fff;
    text-decoration: underline;
}

.syndrome-hero-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.syndrome-hero-labels span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}

.syndrome-detail-hero h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.1rem);
	color:var(--gold);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 780;
}

.syndrome-principle-box {
    max-width: 920px;
    margin-top: 28px;
    padding: 22px 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

.syndrome-principle-box strong {
    display: block;
    margin-bottom: 8px;
    color: #f5c894;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.syndrome-principle-box p {
    margin: 0;
    color: #fff;
    font-size: 1.12rem;
    line-height: 1.65;
}

.syndrome-detail-wrap {
    padding: 44px 20px 72px;
}

.syndrome-detail-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.syndrome-detail-main {
    min-width: 0;
}

.syndrome-block,
.syndrome-sidebar-card {
    background: #fff;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: 28px;
    box-shadow: 0 18px 48px rgba(31, 41, 51, 0.07);
}

.syndrome-block {
    padding: 34px;
    margin-bottom: 26px;
}

.syndrome-block-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.syndrome-block-heading span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #213a59;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
}

.syndrome-block-heading h2 {
    margin: 0;
    color: #213a59;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.syndrome-text {
    color: #3f4c5a;
    font-size: 1.05rem;
    line-height: 1.85;
}

.syndrome-text p {
    margin-top: 0;
}

.syndrome-subsection {
    padding: 22px 0 0;
    border-top: 1px solid rgba(31, 41, 51, 0.08);
}

.syndrome-subsection:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.syndrome-subsection + .syndrome-subsection {
    margin-top: 24px;
}

.syndrome-subsection h3 {
    margin: 0 0 10px;
    color: #213a59;
    font-size: 1.12rem;
}

.syndrome-caution-block {
    border-color: rgba(198, 92, 70, 0.22);
    background: #fffaf6;
}

.syndrome-caution-block .syndrome-block-heading span {
    background: #b85642;
}

.syndrome-references {
    font-size: 0.95rem;
    color: #566373;
}

.motion-list {
    display: grid;
    gap: 22px;
}

.motion-card {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(31, 41, 51, 0.08);
    background: #fbfaf7;
}

.motion-photo {
    margin: 0;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #e9e1d8;
}

.motion-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.motion-body {
    padding: 26px;
}

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

.motion-title-row h3 {
    margin: 0;
    color: #213a59;
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.motion-title-row span {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(33, 58, 89, 0.08);
    color: #213a59;
    font-size: 0.78rem;
    font-weight: 700;
}

.motion-intro {
    margin-bottom: 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    color: #3f4c5a;
    font-size: 1rem;
    line-height: 1.75;
}

.motion-sections {
    display: grid;
    gap: 16px;
}

.motion-sections section {
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(31, 41, 51, 0.07);
}

.motion-sections h4 {
    margin: 0 0 8px;
    color: #213a59;
    font-size: 0.98rem;
    line-height: 1.35;
}

.motion-sections p {
    margin: 0;
    color: #465565;
    font-size: 0.98rem;
    line-height: 1.75;
}

.motion-warning {
    background: #fff7f2 !important;
    border-color: rgba(184, 86, 66, 0.18) !important;
}

.motion-warning h4 {
    color: #a34834;
}

.syndrome-detail-sidebar {
    position: sticky;
    top: 110px;
}

.syndrome-sidebar-card {
    padding: 26px;
}

.syndrome-sidebar-card h2 {
    margin: 0 0 20px;
    color: #213a59;
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

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

.point-card {
    padding: 18px;
    border-radius: 20px;
    background: #fbfaf7;
    border: 1px solid rgba(31, 41, 51, 0.08);
}

.point-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.point-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #213a59;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}

.point-role {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(230, 167, 108, 0.22);
    color: #8a5523;
    font-size: 0.76rem;
    font-weight: 700;
}

.point-role.role-primary {
    background: rgba(33, 58, 89, 0.12);
    color: #213a59;
}

.point-role.role-secondary {
    background: rgba(230, 167, 108, 0.23);
    color: #8a5523;
}

.point-role.role-adjuvant {
    background: rgba(77, 132, 112, 0.14);
    color: #2f6958;
}

.point-card h3 {
    margin: 0 0 5px;
    color: #213a59;
    font-size: 1.05rem;
}

.point-zh {
    margin: 0 0 13px;
    color: #6b7683;
    font-size: 1rem;
}

.point-card a {
    display: inline-flex;
    color: #213a59;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.93rem;
}

.point-card a:hover {
    color: #e0974e;
}

.syndrome-empty {
    margin: 0;
    color: #687483;
    line-height: 1.7;
}

.syndrome-not-found {
    max-width: 760px;
    margin: 0 auto;
    padding: 90px 20px;
    text-align: center;
}

.syndrome-not-found h1 {
    margin: 0 0 12px;
    color: #213a59;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.syndrome-not-found p {
    color: #536171;
    font-size: 1.08rem;
}

.syndrome-not-found a {
    display: inline-flex;
    margin-top: 18px;
    color: #213a59;
    font-weight: 700;
    text-decoration: none;
}

[dir="rtl"] .syndrome-block-heading,
[dir="rtl"] .motion-title-row,

[dir="rtl"] .point-top {
    direction: rtl;
}

[dir="rtl"] .motion-intro {
    border-left: 0;
    border-right: 4px solid #e6a76c;
}

@media (max-width: 980px) {
    .syndrome-detail-grid {
        grid-template-columns: 1fr;
    }

    .syndrome-detail-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .syndrome-detail-hero {
        padding: 42px 16px 44px;
    }

    .syndrome-detail-wrap {
        padding: 28px 14px 52px;
    }

    .syndrome-block,
    .syndrome-sidebar-card {
        border-radius: 22px;
    }

    .syndrome-block {
        padding: 24px 20px;
    }

    .motion-body {
        padding: 20px;
    }

    .motion-title-row {
        display: block;
    }

    .motion-title-row span {
        margin-top: 10px;
    }

    .motion-photo {
        aspect-ratio: 4 / 3;
    }
}
/* Footer sites - logo links */
.footer-sites {
  max-width: 1320px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem;
}

.footer-site-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.75rem;
  border-radius: 16px;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}

.footer-site-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.footer-site-card img {
  height: 80px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.footer-site-card span {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
}

.footer-site-card:hover span {
  color: #ffffff;
}

/* Tablet */
@media (max-width: 1100px) {
  .footer-sites {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mobiel */
@media (max-width: 768px) {
  .footer-sites {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kleine mobiel */
@media (max-width: 480px) {
  .footer-sites {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================
   SYNDROMEN PAGINA (tcm-motion.com) - UNIFORM MET MAGAZINE
   Gebruikt magazine-structuur met motion-kleuren
   4 kolommen grid (zelfde als tcm-magazine)
   ===================================================== */

/* Main container - zelfde als magazine */
.mag-syndromes {
    max-width: var(--mag-max, 1240px);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    margin-top: 58px;
}

/* Hero sectie - magazine stijl met motion kleuren */
.syndromes-hero {
    text-align: center;
    margin-bottom: 3rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, var(--g, #2248a4) 0%, var(--g-dark, #1a3a82) 100%);
    border-radius: var(--mag-radius, 18px);
    color: white;
}

.syndromes-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.syndromes-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--gold, #c8a96e);
}

.syndromes-hero p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto 1.25rem;
    line-height: 1.65;
}

.syndromes-source {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.4rem 1.2rem;
    border-radius: 40px;
    color: rgba(255, 255, 255, 0.8);
}

/* Empty message */
.syndromes-empty-message {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--g-xpale, #f3f7f0);
    border-radius: 24px;
    color: var(--ink-60, #6b7280);
}

/* =====================================================
   GRID - 4 KOLOMMEN (zelfde als TCM Magazine)
   ===================================================== */
.syndromes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
    margin-bottom: 3rem;
}

/* Syndroom kaart - magazine stijl met motion kleuren */
.syndrome-card {
    background: var(--mag-white, #ffffff);
    border-radius: var(--mag-radius, 18px);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--mag-border, rgba(15, 39, 66, 0.1));
    transition: all 0.25s ease;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.syndrome-card:hover {
    transform: translateY(-5px);
    border-color: var(--g, #2248a4);
    box-shadow: 0 20px 35px rgba(34, 72, 164, 0.12);
}

/* Kaart header */
.syndrome-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.syndrome-category {
    background: rgba(34, 72, 164, 0.1);
    padding: 0.25rem 0.9rem;
    border-radius: 40px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--g, #2248a4);
}

.syndrome-code {
    font-family: monospace;
    background: var(--mag-cream, #f3f4f6);
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-60, #4b5563);
}

/* Kaart titel */
.syndrome-card h3 {
    font-size: 1.3rem;
    margin: 0 0 0.75rem 0;
    color: var(--mag-ink, #1e293b);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    line-height: 1.3;
}

/* Kaart beschrijving */
.syndrome-card p {
    color: var(--mag-muted, #5a6a7e);
    line-height: 1.65;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

/* Meta informatie (behandelprincipe) */
.syndrome-meta {
    margin: 0.75rem 0;
    padding: 0.6rem 0;
}

.treatment-principle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--g-mid, #3b5c8c);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.5;
}

/* Read more link */
.syndrome-read-more {
    margin-top: 1rem;
    color: var(--g, #2248a4);
    font-weight: 700;
    font-size: 0.85rem;
    transition: gap 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.syndrome-card:hover .syndrome-read-more {
    gap: 0.6rem;
    color: var(--gold, #c8a96e);
}

/* =====================================================
   PAGINERING - zelfde als TCM Magazine
   ===================================================== */
.pagination {
    margin-top: 2.5rem;
    padding: 1rem 0;
}

.pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    background: var(--mag-cream, #f3f4f6);
    border-radius: 999px;
    text-decoration: none;
    color: var(--mag-ink, #1f2937);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid var(--mag-border, rgba(15, 39, 66, 0.1));
}

.pagination-prev:hover,
.pagination-next:hover {
    background: var(--mag-cream-2, #e5e7eb);
    transform: translateY(-1px);
}

.pagination-pages {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    background: var(--mag-cream, #f3f4f6);
    border-radius: 999px;
    text-decoration: none;
    color: var(--mag-ink, #374151);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid var(--mag-border, rgba(15, 39, 66, 0.1));
}

.pagination-page:hover {
    background: var(--mag-cream-2, #e5e7eb);
}

.pagination-page.active {
    background: var(--g, #2248a4);
    color: white;
    border-color: var(--g, #2248a4);
}

.pagination-dots {
    padding: 0.5rem 0.5rem;
    color: var(--mag-muted, #9ca3af);
}

.pagination-info {
    text-align: center;
    margin-top: 1rem;
    color: var(--mag-muted, #6b7280);
    font-size: 0.85rem;
}

/* =====================================================
   RESPONSIVE - magazine breakpoints
   ===================================================== */

/* Tablet: 2 kolommen (zelfde als magazine) */
@media (max-width: 1100px) {
    .syndromes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    .mag-syndromes {
        padding: 1.5rem 1.5rem 3rem;
    }
}

/* Mobiel: 1 kolom (zelfde als magazine) */
@media (max-width: 768px) {
    .mag-syndromes {
        padding: 1rem 1rem 3rem;
        margin-top: 58px;
    }
    
    .syndromes-hero {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }
    
    .syndromes-hero h1 {
        font-size: 1.6rem;
    }
    
    .syndromes-hero p {
        font-size: 0.9rem;
    }
    
    .syndromes-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .syndrome-card {
        padding: 1.2rem;
    }
    
    .syndrome-card h3 {
        font-size: 1.2rem;
    }
    
    .syndrome-card p {
        font-size: 0.85rem;
    }
    
    .pagination-prev,
    .pagination-next {
        padding: 0.45rem 0.9rem;
        font-size: 0.8rem;
    }
    
    .pagination-page {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
    
    /* Paginering op mobiel: pijlen boven/onder pagina-nummers */
    .pagination-pages {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .pagination-prev {
        order: 1;
    }
    
    .pagination-next {
        order: 2;
    }
}

/* Kleine mobiel */
@media (max-width: 480px) {
    .syndrome-category,
    .syndrome-code {
        font-size: 0.6rem;
        padding: 0.2rem 0.6rem;
    }
    
    .treatment-principle {
        font-size: 0.75rem;
    }
    
    .pagination-info {
        font-size: 0.75rem;
    }
}

/* RTL ondersteuning */
[dir="rtl"] .pagination-prev,
[dir="rtl"] .pagination-next {
    transform: scaleX(-1);
}

[dir="rtl"] .syndrome-read-more {
    display: inline-flex;
    transform: scaleX(-1);
}

/* Print styles */
@media print {
    .syndromes-hero {
        background: #f3f4f6;
        color: black;
        box-shadow: none;
    }
    
    .syndromes-hero h1 {
        color: var(--g, #2248a4);
    }
    
    .syndrome-card {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .pagination {
        display: none;
    }
}

/* =====================================================
   SYNDROMEN PAGINA (tcm-motion.com)
   Exact dezelfde styling als TCM Magazine
   Alleen kleuren vervangen door motion-kleuren
   ===================================================== */

.mag-syndromes {
    max-width: 1400px;
    margin: 70px auto 0px;
    padding: 2rem 1.5rem;
}

/* Hero sectie - magazine stijl met motion gradient */
.syndromes-hero {
    text-align: center;
    margin-bottom: 3rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, var(--g, #2248a4) 0%, var(--g-dark, #1a3a82) 100%);
    border-radius: var(--mag-radius, 18px);
    color: white;
}

.syndromes-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.syndromes-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--gold, #c8a96e);
}

.syndromes-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto 1.25rem;
    line-height: 1.75;
}

.syndromes-source {
    display: inline-block;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.4rem 1.2rem;
    border-radius: 40px;
    color: rgba(255, 255, 255, 0.8);
}

/* Empty message */
.syndromes-empty-message {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--mag-cream, #f3f7f0);
    border-radius: var(--mag-radius, 18px);
    color: var(--mag-muted, #6b7280);
}

/* =====================================================
   GRID - 4 KOLOMMEN (exact als magazine)
   ===================================================== */
.syndromes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
    margin-bottom: 3rem;
}

/* =====================================================
   SYNDROOM CARD - exacte kopie van magazine styling
   Alleen kleuren vervangen door motion variabelen
   ===================================================== */
.syndrome-card {
    background: var(--mag-white, #ffffff);
    border: 1px solid var(--mag-border, rgba(15, 39, 66, 0.1));
    border-radius: var(--mag-radius, 18px);
    overflow: hidden;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.syndrome-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(34, 72, 164, 0.1);
}

/* Card header */
.syndrome-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.syndrome-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(34, 72, 164, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: var(--g, #2248a4);
}

.syndrome-code {
    font-family: monospace;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--mag-cream, #f3f4f6);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    color: var(--mag-muted, #4b5563);
}

/* Titel - exact zoals magazine (1.75rem) */
.syndrome-card h3 {
    font-size: 1.2rem;
    color: var(--mag-ink);
    font-weight: 500;
    margin: 0px 0px 0.75rem;
}

/* Beschrijving */
.syndrome-card p {
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--mag-muted, #5a6a7e);
    margin-bottom: 1rem;
}

/* Meta / behandelprincipe */
.syndrome-meta {
    margin-bottom: 1rem;
}

.treatment-principle {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--mag-navy);
    background: var(--mag-blue-soft);
    padding: 0.2rem 0.7rem;
    border-radius: 16px;
}

.treatment-principle::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23c8a96e'%3E%3Cpath d='M8.434 20.566c1.335 0 2.591-.52 3.535-1.464l7.134-7.133a5.01 5.01 0 0 0-.001-7.072 4.97 4.97 0 0 0-3.536-1.463c-1.335 0-2.59.52-3.534 1.464l-7.134 7.133a5.01 5.01 0 0 0-.001 7.072 4.97 4.97 0 0 0 3.537 1.463m5.011-14.254a2.98 2.98 0 0 1 2.12-.878c.802 0 1.556.312 2.122.878a3.004 3.004 0 0 1 .001 4.243l-2.893 2.892-4.242-4.244z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Read more link - exact zoals magazine (pseudo-element) */
.syndrome-read-more {
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mag-navy);
}


.syndrome-card:hover .syndrome-read-more {
    gap: 0.7rem;
}

/* =====================================================
   PAGINERING - exact als magazine
   ===================================================== */
.pagination {
    margin-top: 3rem;
    padding: 1rem 0;
}

.pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--mag-cream, #f3f4f6);
    border-radius: 999px;
    text-decoration: none;
    color: var(--mag-ink, #1f2937);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s;
    border: 1px solid var(--mag-border, rgba(15, 39, 66, 0.1));
}

.pagination-prev:hover,
.pagination-next:hover {
    background: var(--mag-cream-2, #e5e7eb);
}

.pagination-pages {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.9rem;
    background: var(--mag-cream, #f3f4f6);
    border-radius: 999px;
    text-decoration: none;
    color: var(--mag-ink, #374151);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid var(--mag-border, rgba(15, 39, 66, 0.1));
}

.pagination-page:hover {
    background: var(--mag-cream-2, #e5e7eb);
}

.pagination-page.active {
    background: var(--g, #2248a4);
    color: white;
    border-color: var(--g, #2248a4);
}

.pagination-dots {
    padding: 0.5rem 0.8rem;
    color: var(--mag-muted, #9ca3af);
}

.pagination-info {
    text-align: center;
    margin-top: 1rem;
    color: var(--mag-muted, #6b7280);
    font-size: 0.9rem;
}

/* =====================================================
   RESPONSIVE - exact als magazine
   ===================================================== */

/* Tablet: 2 kolommen */
@media (max-width: 1100px) {
    .syndromes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    .mag-syndromes {
        padding: 1.5rem 1.5rem 4rem;
    }
}

/* Mobiel: 1 kolom */
@media (max-width: 768px) {
    .mag-syndromes {
        padding: 1rem 1rem 3rem;
        margin-top: 58px;
    }
    
    .syndromes-hero {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }
    
    .syndromes-hero h1 {
        font-size: 1.8rem;
    }
    
    .syndromes-hero p {
        font-size: 0.9rem;
    }
    
    .syndromes-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .syndrome-card {
        padding: 1.25rem;
    }
    
    .syndrome-card h3 {
        font-size: 1.5rem;
    }
    
    .syndrome-card p {
        font-size: 0.9rem;
    }
    
    .pagination-prev,
    .pagination-next {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .pagination-page {
        min-width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
    
    .pagination-pages {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .pagination-prev {
        order: 1;
    }
    
    .pagination-next {
        order: 2;
    }
}

/* Kleine mobiel */
@media (max-width: 480px) {
    .syndrome-card h3 {
        font-size: 1.3rem;
    }
    
    .syndrome-category,
    .syndrome-code {
        font-size: 0.6rem;
    }
}

/* RTL ondersteuning */
[dir="rtl"] .pagination-prev,
[dir="rtl"] .pagination-next {
    transform: scaleX(-1);
}


[dir="rtl"] .syndrome-read-more::after {
    content: "←";
}

[dir="rtl"] .syndrome-read-more {
    gap: 0.45rem;
}

[dir="rtl"] .syndrome-card:hover .syndrome-read-more {
    gap: 0.7rem;
}

/* Print styles */
@media print {
    .syndromes-hero {
        background: #f3f4f6;
        color: black;
        box-shadow: none;
    }
    
    .syndromes-hero h1 {
        color: var(--g, #2248a4);
    }
    
    .syndrome-card {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .pagination {
        display: none;
    }
}


/* ── HERO BADGE ONDER FOTO OP MOBIEL ───────────────────── */

@media (max-width: 768px) {
  .hero-right {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .hero-right img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
  }

  .hero-badge {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-bottom: 1px solid var(--g-pale);
  }

  .hero-badge-product {
    padding: 1rem 1.25rem;
  }

  .hero-badge-product .hero-badge-text strong {
    font-size: .95rem;
  }

  .hero-badge-product .hero-badge-text span {
    font-size: .8rem;
    line-height: 1.45;
  }
}