/* ============================================================
   AINA ZORG, Eindhoven
   Concept: ochtendlicht door het raam. Thuiszorg betekent bij
   mensen binnenkomen. Het boograam is het terugkerende motief,
   de dag (van ochtendzorg tot nacht) is de signatuur.
   ============================================================ */

:root{
  --paper:      #F2F8FD;
  --paper-2:    #E7F1FA;
  --card:       #FFFFFF;
  --ink:        #24506F;
  --ink-2:      #4E6E86;
  --ink-3:      #8AA1B4;
  --night:      #234C6E;
  --night-2:    #1B3A56;
  --amber:      #8FC0E8;
  --amber-soft: #B9DAF1;
  --amber-deep: #2E6491;
  --blush:      #FBEEF3;
  --dawn:       #E7F1FA;
  --line:       rgba(36,80,111,.16);
  --line-soft:  rgba(36,80,111,.09);
  --pink:       #D67395;
  --pink-deep:  #9C3F60;
  --pink-soft:  #F0C3D3;

  --f-display:  "Fraunces", Georgia, serif;
  --f-body:     "Alegreya Sans", "Segoe UI", sans-serif;
  --f-caps:     "Alegreya Sans SC", "Alegreya Sans", sans-serif;

  --w-max: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec-y: clamp(72px, 11vw, 140px);
  --r-lg: 26px;
  --r-md: 18px;
  --ease: cubic-bezier(.22,.61,.25,1);
  --shadow-soft: 0 18px 50px -18px rgba(31,62,55,.22);
  --shadow-card: 0 10px 34px -14px rgba(31,62,55,.18);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
html, body{ overflow-x:clip; }

body{
  font-family:var(--f-body);
  font-size:1.1875rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* Fijne filmkorrel over de hele pagina, geeft papiergevoel */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:2000;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

img, svg{ display:block; max-width:100%; }
a{ color:inherit; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
strong{ font-weight:700; }

::selection{ background:var(--amber-soft); color:var(--night); }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

.skiplink{
  position:absolute; left:16px; top:-60px;
  z-index:3000;
  background:var(--ink); color:var(--paper);
  padding:10px 18px; border-radius:10px;
  font-weight:700; text-decoration:none;
  transition:top .2s var(--ease);
}
.skiplink:focus{ top:14px; }

.wrap{
  width:min(var(--w-max), 100% - 2*var(--gutter));
  margin-inline:auto;
}

section{ scroll-margin-top:96px; }

/* ---------- Typografie ---------- */
.eyebrow{
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:lowercase;
  color:var(--amber-deep);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:"";
  width:34px; height:2px;
  background:var(--amber);
  border-radius:2px;
  flex:none;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:"";
  width:34px; height:2px;
  background:var(--amber);
  border-radius:2px;
  flex:none;
}

h1,h2,h3{
  font-family:var(--f-display);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 82;
  font-weight:420;
  line-height:1.06;
  letter-spacing:-0.014em;
  text-wrap:balance;
}
h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); margin:18px 0 0; }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.6rem); line-height:1.15; }

.lead{
  font-size:clamp(1.16rem, 1.7vw, 1.34rem);
  color:var(--ink-2);
  max-width:62ch;
  margin-top:20px;
}
.sec-head{ max-width:780px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .lead{ margin-inline:auto; }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body);
  font-weight:700;
  font-size:1.02rem;
  padding:15px 28px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn-primary{
  background:var(--ink);
  color:#FCF7EC;
  box-shadow:0 14px 30px -14px rgba(31,62,55,.55);
}
.btn-primary:hover{
  background:var(--night);
  transform:translateY(-2px);
  box-shadow:0 20px 38px -16px rgba(31,62,55,.6);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{
  border-color:var(--ink);
  background:rgba(31,62,55,.05);
  transform:translateY(-2px);
}
.btn-light{
  background:var(--paper);
  color:var(--night);
}
.btn-light:hover{
  background:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 34px -16px rgba(0,0,0,.5);
}

/* ---------- Navigatie ---------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(251,245,234,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-color:var(--line-soft);
  box-shadow:0 10px 30px -18px rgba(31,62,55,.25);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand-mark{
  width:42px; height:42px; flex:none;
}
.brand-name{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:540;
  font-size:1.42rem;
  letter-spacing:-0.01em;
  line-height:1;
}
.brand-name small{
  display:block;
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.6rem;
  letter-spacing:.3em;
  color:var(--amber-deep);
  margin-top:4px;
  white-space:nowrap;
}
.brand-name{ white-space:nowrap; }
.nav-links{
  display:flex; align-items:center; gap:6px;
}
.nav-links a{
  text-decoration:none;
  font-weight:500;
  font-size:1rem;
  color:var(--ink-2);
  padding:9px 13px;
  border-radius:999px;
  white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover{
  color:var(--ink);
  background:rgba(31,62,55,.06);
}
.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none;
  font-weight:700;
  font-size:.98rem;
  color:var(--paper);
  background:var(--ink);
  padding:11px 20px;
  border-radius:999px;
  white-space:nowrap;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.nav-cta:hover{ background:var(--night); transform:translateY(-1px); }
.nav-cta svg{ width:16px; height:16px; }

.nav-burger{
  display:none;
  width:46px; height:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-burger span{
  display:block; width:20px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  z-index:990;
  background:var(--paper);
  display:none;
  flex-direction:column;
  padding:110px var(--gutter) 40px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  text-decoration:none;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:460;
  font-size:2rem;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu .mobile-tel{
  margin-top:auto;
  font-family:var(--f-body);
  font-size:1.05rem;
  font-weight:700;
  border:none;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper);
  border-radius:999px;
  padding:16px 26px;
  justify-content:center;
}
.mobile-menu .mobile-tel svg{ width:18px; height:18px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(130px, 16vw, 190px) 0 clamp(56px, 7vw, 96px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-30%; right:-16%;
  width:65vw; height:65vw;
  max-width:900px; max-height:900px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(143,192,232,.45) 0%,
    rgba(185,218,241,.32) 42%,
    rgba(242,248,253,0) 72%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
  position:relative;
}
.hero-copy{ min-width:0; }
.hero h1{
  font-size:clamp(3.1rem, 8.2vw, 6rem);
  font-weight:400;
  margin-top:26px;
}
.hero h1 .w{
  display:block;
  opacity:0;
  transform:translateY(26px);
  animation:riseIn .9s var(--ease) forwards;
}
.hero h1 .w:nth-child(2){ animation-delay:.14s; padding-left:.9em; }
.hero h1 .w:nth-child(3){ animation-delay:.28s; padding-left:1.8em; }
.hero h1 em{
  font-style:italic;
  font-weight:440;
  color:var(--amber-deep);
}
@keyframes riseIn{
  to{ opacity:1; transform:translateY(0); }
}
.hero .lead{ max-width:52ch; }
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:34px;
}
.hero-chips{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:36px;
  padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.hero-chips li{
  display:flex; align-items:center; gap:9px;
  font-size:.98rem;
  color:var(--ink-2);
  font-weight:500;
}
.hero-chips svg{ width:17px; height:17px; flex:none; color:var(--amber-deep); }

/* Het boograam */
.hero-visual{
  position:relative;
  min-width:0;
  display:flex;
  justify-content:center;
}
.window-frame{
  position:relative;
  width:min(460px, 100%);
  padding-bottom:14px;
}
.window{
  position:relative;
  width:100%;
  aspect-ratio:10 / 13;
  border-radius:999px 999px 26px 26px;
  background:
    radial-gradient(120% 95% at 50% 4%,
      #EAF5FD 0%, #CDE6F8 30%, #A6D0F0 55%, #83BCE8 78%, #6BAEE0 100%);
  box-shadow:var(--shadow-soft), inset 0 0 0 10px var(--card);
  border:1px solid var(--line);
  overflow:hidden;
}
.window-sun{
  position:absolute;
  left:50%; top:31%;
  width:27%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #FFF3D2, #FBD98A 68%);
  box-shadow:0 0 66px 20px rgba(255,214,120,.55);
  animation:sunBreathe 7s ease-in-out infinite alternate;
}
@keyframes sunBreathe{
  from{ transform:translate(-50%,-50%) scale(1);   box-shadow:0 0 56px 16px rgba(255,214,120,.45); }
  to{   transform:translate(-50%,-52%) scale(1.05); box-shadow:0 0 86px 28px rgba(255,214,120,.62); }
}
.window-hills{
  position:absolute; inset:auto 0 0 0;
  height:34%;
  color:rgba(31,62,55,.9);
}
.window-bars::before,
.window-bars::after{
  content:"";
  position:absolute;
  background:var(--card);
  box-shadow:0 1px 0 rgba(31,62,55,.12);
}
.window-bars::before{
  left:50%; top:0; bottom:0;
  width:10px;
  transform:translateX(-50%);
}
.window-bars::after{
  left:0; right:0; top:52%;
  height:10px;
}
.window-plant{
  position:absolute;
  left:7%; bottom:-2%;
  width:36%;
  color:var(--night);
}
.window-sill{
  position:absolute;
  left:-5%; right:-5%;
  bottom:-14px;
  height:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 14px 26px -14px rgba(31,62,55,.35);
}
.window-tag{
  position:absolute;
  right:clamp(-10px, -1vw, -26px);
  bottom:1.5%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:14px 18px;
  display:flex; align-items:center; gap:12px;
  max-width:250px;
}
.window-tag svg{ width:26px; height:26px; flex:none; color:var(--amber-deep); }
.window-tag strong{
  display:block;
  font-size:.98rem;
  line-height:1.3;
}
.window-tag span{
  font-size:.86rem;
  color:var(--ink-2);
  line-height:1.4;
  display:block;
}
.window-tag2{
  position:absolute;
  left:clamp(-8px, -.5vw, -20px);
  top:9%;
  background:var(--night);
  color:#F3ECDD;
  border-radius:14px;
  padding:11px 16px;
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.18em;
  box-shadow:var(--shadow-card);
}

/* ---------- Secties algemeen ---------- */
.section{ padding:var(--sec-y) 0; }
.section-tint{ background:var(--paper-2); }

/* ---------- De naam Aina ---------- */
.naam{ position:relative; }
.naam-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 3vw, 34px);
  margin-top:clamp(40px, 6vw, 64px);
}
.naam-card{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px);
  box-shadow:var(--shadow-card);
  position:relative;
}
.naam-card .nr{
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.22em;
  color:var(--ink-3);
}
.naam-word{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:480;
  font-style:italic;
  font-size:clamp(2.1rem, 3.4vw, 2.8rem);
  line-height:1;
  margin:14px 0 4px;
  color:var(--ink);
}
.naam-word .mirror{
  position:relative;
  display:inline-block;
}
.naam-word .mirror::after{
  content:attr(data-word);
  position:absolute;
  left:0; top:96%;
  transform:scaleY(-1);
  transform-origin:top;
  opacity:.28;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 72%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 72%);
  pointer-events:none;
}
.naam-kind{
  font-family:var(--f-caps);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.16em;
  color:var(--amber-deep);
}
.naam-card p{
  margin-top:14px;
  color:var(--ink-2);
  font-size:1.02rem;
}

/* ---------- Diensten ---------- */
.diensten-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 3vw, 30px);
  margin-top:clamp(44px, 6vw, 72px);
}
.dienst{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:180px 180px var(--r-lg) var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dienst:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -20px rgba(31,62,55,.3);
}
.dienst-visual{
  position:relative;
  aspect-ratio:16 / 11;
  display:flex; align-items:center; justify-content:center;
}
.dienst-visual svg{ width:clamp(52px, 5vw, 66px); height:auto; color:var(--night); position:relative; }
.dienst:nth-child(1) .dienst-visual{
  background:radial-gradient(130% 110% at 50% 0%, #FBE7BE 0%, #F1CE93 55%, #E7B76B 100%);
}
.dienst:nth-child(2) .dienst-visual{
  background:radial-gradient(130% 110% at 50% 0%, #F6E3CF 0%, #EFCEAC 55%, #E2B385 100%);
}
.dienst:nth-child(3) .dienst-visual{
  background:radial-gradient(130% 110% at 50% 0%, #EFE0D6 0%, #DFC3B4 55%, #C9A08F 100%);
}
.dienst-body{
  padding:clamp(24px, 2.6vw, 34px);
  display:flex; flex-direction:column;
  flex:1;
}
.dienst-body p{
  color:var(--ink-2);
  font-size:1.02rem;
  margin-top:12px;
}
.dienst-list{
  margin-top:18px;
  display:grid; gap:10px;
}
.dienst-list li{
  display:flex; gap:10px;
  font-size:.99rem;
  color:var(--ink);
}
.dienst-list svg{
  width:17px; height:17px; flex:none;
  margin-top:4px;
  color:var(--amber-deep);
}
.dienst-link{
  margin-top:auto;
  padding-top:22px;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  font-weight:700;
  color:var(--ink);
}
.dienst-link svg{
  width:17px; height:17px;
  transition:transform .25s var(--ease);
}
.dienst-link:hover svg{ transform:translateX(4px); }
.dienst-link span{
  border-bottom:2px solid var(--amber);
  padding-bottom:2px;
}

/* ---------- Een dag met Aina (signatuur) ---------- */
.dag{ position:relative; overflow:hidden; }
.dag-arcwrap{
  position:relative;
  margin-top:clamp(30px, 4vw, 40px);
  display:none;
}
.dag-arc{ width:100%; height:auto; overflow:visible; }
.dag-arc .arc-path{
  fill:none;
  stroke:var(--line);
  stroke-width:2;
  stroke-dasharray:3 9;
  stroke-linecap:round;
}
.dag-arc .arc-progress{
  fill:none;
  stroke:#F4B942;
  stroke-width:4;
  stroke-linecap:round;
}
.dag-arc .arc-stop{
  fill:var(--paper-2);
  stroke:var(--ink-2);
  stroke-width:2;
  transition:fill .3s var(--ease), stroke .3s var(--ease);
}
.dag-arc .arc-stop.passed{
  fill:#F4B942;
  stroke:#C8871A;
}
.dag-sun{
  transition:opacity .3s var(--ease);
  filter:drop-shadow(0 0 14px rgba(244,185,66,.55));
}
.dag-sun .sun-core{ fill:#F7C948; transition:opacity .3s var(--ease); }
.dag-sun .sun-rays{ stroke:#E8A317; stroke-width:2.4; stroke-linecap:round; opacity:.95; transition:opacity .3s var(--ease); }
.dag-sun .moon-shape{ fill:#DDE6F0; stroke:rgba(36,80,111,.4); stroke-width:3; opacity:0; transition:opacity .3s var(--ease); }
.dag-sun.is-moon{ filter:drop-shadow(0 0 12px rgba(166,208,240,.6)); }
.dag-sun.is-moon .sun-core{ opacity:0; }
.dag-sun.is-moon .sun-rays{ opacity:0; }
.dag-sun.is-moon .moon-shape{ opacity:1; }

.dag-steps{
  display:grid;
  gap:14px;
  margin-top:clamp(28px, 4vw, 20px);
}
.dag-step{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:20px 20px 22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  position:relative;
}
.dag-step.active{
  border-color:rgba(143,192,232,.75);
  box-shadow:0 18px 40px -18px rgba(31,62,55,.3);
  transform:translateY(-4px);
}
.dag-time{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.18em;
  color:var(--amber-deep);
}
.dag-time svg{ width:15px; height:15px; }
.dag-step h3{
  font-size:1.22rem;
  margin-top:10px;
}
.dag-step p{
  margin-top:8px;
  font-size:.97rem;
  color:var(--ink-2);
}

/* Mobiele verticale tijdlijn: zelfde container, andere kleren */
@media (max-width:900px){
  .dag-steps{
    position:relative;
    margin-top:clamp(36px, 6vw, 48px);
    padding-left:34px;
    gap:18px;
  }
  .dag-steps::before{
    content:"";
    position:absolute;
    left:10px; top:14px; bottom:14px;
    width:2px;
    background:repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 12px);
  }
  .dag-steps .dag-step::before{
    content:"";
    position:absolute;
    left:-31px; top:26px;
    width:12px; height:12px;
    border-radius:50%;
    background:var(--amber);
    border:2px solid var(--amber-deep);
  }
  .dag-steps .dag-step:last-child::before{
    background:#E9E2D0;
    border-color:var(--ink-2);
  }
}

/* ---------- Nachtband, spoed ---------- */
.night{
  position:relative;
  background:
    radial-gradient(90% 130% at 85% 0%, rgba(143,192,232,.16) 0%, rgba(27,58,86,0) 55%),
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%);
  color:#F3ECDC;
  overflow:hidden;
}
.night::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(243,236,220,.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 26% 62%, rgba(243,236,220,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 22%, rgba(243,236,220,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 48%, rgba(243,236,220,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(243,236,220,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 58%, rgba(243,236,220,.5) 50%, transparent 51%);
  pointer-events:none;
}
.night-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px, 4vw, 60px);
  align-items:center;
  padding:clamp(56px, 8vw, 88px) 0;
}
.night .eyebrow{ color:var(--amber-soft); }
.night .eyebrow::before{ background:var(--amber-soft); }
.night h2{ color:#FCF7EA; }
.night p{
  color:rgba(243,236,220,.82);
  max-width:56ch;
  margin-top:16px;
  font-size:1.08rem;
}
.night-moon{
  position:absolute;
  right:4%;
  top:-34px;
  width:110px; height:110px;
  color:#EBE3CF;
  opacity:.9;
  pointer-events:none;
}
.night-tel{
  display:flex; flex-direction:column; gap:12px;
  align-items:flex-start;
}
.night-tel .btn{ font-size:1.12rem; padding:17px 32px; }
.night-tel small{
  color:rgba(243,236,220,.7);
  font-size:.92rem;
}

/* ---------- Stappen ---------- */
.stappen-grid{
  counter-reset:stap;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 3vw, 30px);
  margin-top:clamp(44px, 6vw, 68px);
}
.stap{
  counter-increment:stap;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(26px, 3vw, 36px);
  box-shadow:var(--shadow-card);
  position:relative;
}
.stap::before{
  content:counter(stap, decimal-leading-zero);
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:420;
  font-style:italic;
  font-size:clamp(2.6rem, 4vw, 3.4rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(153,97,12,.7);
  display:block;
}
.stap h3{ margin-top:18px; }
.stap p{
  margin-top:12px;
  color:var(--ink-2);
  font-size:1rem;
}
.stap-connector{
  display:none;
}
.stappen-note{
  margin-top:clamp(30px, 4vw, 44px);
  display:flex; align-items:center; gap:14px;
  background:var(--blush);
  border:1px solid rgba(153,97,12,.22);
  border-radius:var(--r-md);
  padding:18px 22px;
  max-width:640px;
}
.stappen-note svg{ width:24px; height:24px; flex:none; color:var(--amber-deep); }
.stappen-note p{ font-size:1rem; }
.stappen-note a{ font-weight:700; color:var(--ink); }

/* ---------- Kwaliteiten ---------- */
.kwaliteiten{ background:var(--paper-2); }
.kwal-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 26px);
  margin-top:clamp(44px, 6vw, 64px);
}
.kwal{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3vw, 34px);
  display:flex; gap:20px;
  align-items:flex-start;
}
.kwal-icon{
  flex:none;
  width:58px; height:58px;
  border-radius:999px 999px 12px 12px;
  background:linear-gradient(160deg, var(--dawn), var(--blush));
  border:1px solid rgba(153,97,12,.25);
  display:flex; align-items:center; justify-content:center;
}
.kwal-icon svg{ width:26px; height:26px; color:var(--night); }
.kwal h3{ font-size:1.3rem; }
.kwal p{
  margin-top:8px;
  color:var(--ink-2);
  font-size:.99rem;
}

/* ---------- Over Neela ---------- */
.over-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px, 5vw, 80px);
  align-items:center;
}
.over-quotecard{
  position:relative;
  background:var(--night);
  color:#F5EEDF;
  border-radius:999px 999px var(--r-lg) var(--r-lg);
  padding:clamp(56px, 7vw, 84px) clamp(28px, 3.4vw, 48px) clamp(32px, 4vw, 44px);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.over-quotecard::before{
  content:"";
  position:absolute;
  left:50%; top:-16%;
  width:60%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,192,232,.5), rgba(143,192,232,0) 70%);
  pointer-events:none;
}
.over-quotecard blockquote{
  position:relative;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-style:italic;
  font-weight:420;
  font-size:clamp(1.5rem, 2.5vw, 2rem);
  line-height:1.3;
}
.over-quotecard figcaption{
  position:relative;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid rgba(243,236,220,.2);
  font-family:var(--f-caps);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.82rem;
  color:var(--amber-soft);
}
.over-quotecard figcaption span{
  display:block;
  font-family:var(--f-body);
  font-weight:400;
  letter-spacing:0;
  color:rgba(243,236,220,.72);
  font-size:.9rem;
  margin-top:4px;
}
.over-copy p + p{ margin-top:16px; }
.over-copy p{ color:var(--ink-2); font-size:1.06rem; }
.over-copy p strong{ color:var(--ink); }
.over-feiten{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:28px;
}
.over-feiten li{
  font-family:var(--f-caps);
  font-weight:700;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
}

/* ---------- Verantwoording ---------- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.6vw, 26px);
  margin-top:clamp(44px, 6vw, 64px);
}
.trust{
  display:flex; flex-direction:column; gap:12px;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3vw, 32px);
  text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.trust:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 46px -20px rgba(31,62,55,.3);
}
.trust-top{
  display:flex; align-items:center; justify-content:space-between;
}
.trust-top svg:first-child{ width:30px; height:30px; color:var(--night); }
.trust-top svg:last-child{
  width:18px; height:18px; color:var(--ink-3);
  transition:transform .25s var(--ease), color .25s var(--ease);
}
.trust:hover .trust-top svg:last-child{
  transform:translate(3px,-3px);
  color:var(--amber-deep);
}
.trust h3{ font-size:1.28rem; }
.trust p{ color:var(--ink-2); font-size:.98rem; }
.trust em{
  margin-top:auto;
  padding-top:10px;
  font-style:normal;
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--amber-deep);
}

/* ---------- Werken bij ---------- */
.werken{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(214,115,149,.22) 0%, rgba(251,238,243,0) 60%),
    var(--blush);
  border-block:1px solid rgba(153,97,12,.2);
}
.werken-inner{ position:relative; z-index:1; }
.werken-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px, 4vw, 60px);
  padding:clamp(52px, 7vw, 80px) 0;
}
.werken p{
  margin-top:14px;
  color:var(--ink-2);
  max-width:52ch;
  font-size:1.06rem;
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px, 5vw, 72px);
  margin-top:clamp(44px, 6vw, 64px);
  align-items:start;
}
.contact-list{
  display:grid; gap:12px;
}
.contact-item{
  display:flex; gap:16px;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:18px 20px;
  text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
a.contact-item:hover{
  border-color:var(--amber);
  transform:translateX(4px);
}
.contact-item svg{
  width:22px; height:22px; flex:none;
  margin-top:3px;
  color:var(--amber-deep);
}
.contact-item strong{ display:block; font-size:1.05rem; }
.contact-item span{
  display:block;
  color:var(--ink-2);
  font-size:.93rem;
  margin-top:2px;
}
.contact-form{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(26px, 3.4vw, 42px);
}
.contact-form h3{ font-size:1.5rem; }
.contact-form > p{
  color:var(--ink-2);
  font-size:.99rem;
  margin-top:8px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.16em;
  color:var(--ink-2);
}
.field input,
.field select,
.field textarea{
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 15px;
  width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--amber-deep);
  box-shadow:0 0 0 4px rgba(143,192,232,.35);
}
.form-foot{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap;
  align-items:center; gap:18px;
  margin-top:6px;
}
.form-foot small{
  color:var(--ink-3);
  font-size:.86rem;
  max-width:34ch;
  line-height:1.45;
}

/* ---------- Footer ---------- */
.footer{
  background:var(--night-2);
  color:rgba(243,236,220,.78);
  padding:clamp(56px, 7vw, 84px) 0 34px;
}
.footer a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
.footer a:hover{ color:var(--amber-soft); }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(30px, 4vw, 56px);
}
.footer-brand .brand-name{ color:#FCF7EA; }
.footer-brand .brand-name small{ color:var(--amber-soft); }
.footer-brand p{
  margin-top:18px;
  font-size:.98rem;
  max-width:32ch;
}
.footer h4{
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.22em;
  color:var(--amber-soft);
  margin-bottom:18px;
}
.footer-col ul{ display:grid; gap:11px; font-size:.98rem; }
.footer-bottom{
  margin-top:clamp(40px, 5vw, 60px);
  padding-top:24px;
  border-top:1px solid rgba(243,236,220,.14);
  display:flex; flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  font-size:.9rem;
  color:rgba(243,236,220,.55);
}
.footer-bottom a{ color:rgba(243,236,220,.7); }

/* ---------- Hemel: dag, schemer en nacht ---------- */
.sky-layer{
  position:absolute; inset:0;
  transition:opacity 1.4s var(--ease);
}
.sky-day{
  background:radial-gradient(120% 95% at 50% 6%, #EAF5FD 0%, #CDE6F8 32%, #A6D0F0 58%, #83BCE8 80%, #6BAEE0 100%);
  opacity:1;
}
.sky-dusk{
  background:radial-gradient(120% 95% at 50% 12%, #F6D79E 0%, #E9A765 34%, #C9743F 62%, #8C4A3A 86%, #5A3446 100%);
  opacity:0;
}
.sky-night{
  background:radial-gradient(120% 95% at 50% 14%, #2C3E63 0%, #1E2C4B 38%, #172138 66%, #101828 100%);
  opacity:0;
}
/* Schemer */
html[data-tijd="dusk"] .sky-day{ opacity:0; }
html[data-tijd="dusk"] .sky-dusk{ opacity:1; }
/* Nacht */
html[data-tijd="night"] .sky-day{ opacity:0; }
html[data-tijd="night"] .sky-dusk{ opacity:0; }
html[data-tijd="night"] .sky-night{ opacity:1; }

/* Sterren: alleen zichtbaar in schemer/nacht */
.star-field{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.star-field span{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:#FBF3DC;
  box-shadow:0 0 6px 1px rgba(251,243,220,.7);
  animation:sterFonkel 3.5s ease-in-out infinite alternate;
}
@keyframes sterFonkel{ from{ opacity:.35; } to{ opacity:1; } }
html[data-tijd="dusk"] .star-field{ opacity:.5; }
html[data-tijd="night"] .star-field{ opacity:1; }

/* De maan schuift in bij nacht, zon schuift uit */
.window-sun{ transition:opacity 1.2s var(--ease), transform .6s var(--ease); }
html[data-tijd="night"] .window-sun,
html[data-tijd="dusk"] .window-sun{ opacity:.15; }
.window-moon{
  position:absolute;
  left:50%; top:30%;
  width:24%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #F4EEDC, #D9D2BD 72%);
  box-shadow:0 0 44px 10px rgba(233,227,207,.4), inset -8px -6px 0 rgba(31,44,72,.16);
  opacity:0;
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
html[data-tijd="night"] .window-moon{ opacity:1; transform:translate(-50%,-50%) scale(1); }
html[data-tijd="dusk"] .window-moon{ opacity:.45; transform:translate(-50%,-50%) scale(.85); }

/* Lampje binnen: brandt in schemer en nacht */
.window-lamp{
  position:absolute;
  left:50%; bottom:0;
  width:150%; height:70%;
  transform:translateX(-50%);
  background:radial-gradient(60% 70% at 50% 100%, rgba(255,206,120,.55), rgba(255,206,120,0) 70%);
  opacity:0;
  transition:opacity 1.4s var(--ease);
  pointer-events:none;
  mix-blend-mode:screen;
}
html[data-tijd="dusk"] .window-lamp{ opacity:.7; }
html[data-tijd="night"] .window-lamp{ opacity:1; }

/* Verre vogels die overvliegen (parallax-laag) */
.parallax-far{ position:absolute; inset:0; pointer-events:none; will-change:transform; }
.bird-far{
  position:absolute;
  width:34px; height:auto;
  color:#4A5B54;
  opacity:0;
  animation:vliegOver 19s linear infinite;
}
.bird-far path{ animation:vlerk .5s ease-in-out infinite alternate; }
.bird-far.b1{ top:20%; animation-delay:3s; }
.bird-far.b2{ top:28%; width:24px; animation-delay:11s; }
html[data-tijd="night"] .bird-far{ display:none; }
@keyframes vliegOver{
  0%{ transform:translateX(-40px) translateY(0); opacity:0; }
  8%{ opacity:.75; }
  50%{ transform:translateX(150px) translateY(-14px); }
  82%{ opacity:.75; }
  100%{ transform:translateX(360px) translateY(6px); opacity:0; }
}
@keyframes vlerk{
  from{ d:path("M2 12 Q10 6 19 11 Q28 6 38 12"); }
  to{ d:path("M2 11 Q10 2 19 10 Q28 2 38 11"); }
}

/* Het vogeltje dat op de vensterbank landt */
.sill-bird{
  position:absolute;
  right:16%; bottom:100%;
  width:46px; height:46px;
  transform-origin:center bottom;
  opacity:0;
  animation:vogelLand 15s ease-in-out 4s infinite;
  z-index:6;
}
.sill-bird .bird-wing{
  transform-box:fill-box;
  transform-origin:70% 20%;
}
@keyframes vogelLand{
  0%{ opacity:0; transform:translate(70px,-46px) rotate(8deg); }
  6%{ opacity:1; }
  16%{ transform:translate(0,0) rotate(0deg); }
  20%,58%{ transform:translate(0,0) rotate(0deg); }
  /* zit even, kijkt rond via de kop-tik hieronder */
  64%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  74%{ opacity:0; transform:translate(-90px,-40px) rotate(-10deg); }
  100%{ opacity:0; transform:translate(-90px,-40px) rotate(-10deg); }
}
/* wiebertje van de kop terwijl hij zit */
.sill-bird-inner{
  transform-box:view-box;
  transform-origin:20px 30px;
  animation:vogelKijk 15s ease-in-out 4s infinite;
}
@keyframes vogelKijk{
  0%,20%{ transform:rotate(0deg); }
  30%{ transform:rotate(-9deg); }
  40%{ transform:rotate(6deg); }
  50%{ transform:rotate(-4deg); }
  58%,100%{ transform:rotate(0deg); }
}
.sill-bird .bird-wing{
  animation:vogelWiek 15s ease-in-out 4s infinite;
}
@keyframes vogelWiek{
  0%,14%{ transform:rotate(0deg); }
  4%,10%{ transform:rotate(-38deg); }
  16%,100%{ transform:rotate(0deg); }
}

/* ---------- Het raam gaat open: oma zwaait ---------- */
.window{ perspective:1100px; }
.window-hills{
  position:absolute;
  left:0; right:0; bottom:0;
  height:30%;
  color:var(--night);
  opacity:.55;
}
.window-glow{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 45%, rgba(251,223,158,.75), rgba(251,223,158,0) 70%);
  opacity:0;
  animation:gloed 1.8s var(--ease) 1.15s forwards;
}
@keyframes gloed{
  0%{ opacity:0; }
  55%{ opacity:.9; }
  100%{ opacity:.4; }
}
.oma{
  position:absolute;
  left:50%; bottom:-2%;
  width:76%;
  transform:translateX(-50%) translateY(20%);
  animation:omaOp 1.1s var(--ease) 1.9s forwards;
}
@keyframes omaOp{
  to{ transform:translateX(-50%) translateY(3%); }
}
.oma-head{
  transform-box:view-box;
  transform-origin:150px 208px;
  animation:knik 5.5s ease-in-out 3s infinite alternate;
}
@keyframes knik{
  from{ transform:rotate(-1.6deg); }
  to{ transform:rotate(2.4deg); }
}
.oma-arm{
  transform-box:view-box;
  transform-origin:232px 282px;
  transform:rotate(92deg);
  animation:armOmhoog .8s var(--ease) 2.7s forwards,
            zwaai 1.5s ease-in-out 3.5s infinite alternate;
}
@keyframes armOmhoog{
  to{ transform:rotate(-16deg); }
}
@keyframes zwaai{
  from{ transform:rotate(-16deg); }
  to{ transform:rotate(9deg); }
}
.hartje{
  position:absolute;
  width:22px; height:22px;
  right:12%; top:34%;
  opacity:0;
  animation:hartZweef 6s ease-in-out infinite;
}
.hartje.h2{ right:7%; top:40%; width:16px; animation-delay:2s; }
.hartje.h3{ right:17%; top:42%; width:14px; animation-delay:4s; }
@keyframes hartZweef{
  0%{ opacity:0; transform:translateY(6px) scale(.6); }
  8%{ opacity:.95; }
  22%{ opacity:0; transform:translateY(-52px) scale(1.05); }
  100%{ opacity:0; transform:translateY(-52px) scale(1.05); }
}
.luik{
  position:absolute;
  top:0; bottom:0;
  width:50.5%;
  z-index:5;
  background:linear-gradient(115deg, rgba(255,251,242,.6), rgba(255,244,224,.38) 55%, rgba(255,251,242,.55));
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border:7px solid var(--card);
  box-shadow:inset 0 0 0 1px var(--line);
}
.luik::after{
  content:"";
  position:absolute;
  left:-7px; right:-7px;
  top:52%;
  height:10px;
  background:var(--card);
  box-shadow:0 1px 0 rgba(31,62,55,.12);
}
.luik-l{
  left:0;
  transform-origin:left center;
  animation:luikOpenL 1.7s cubic-bezier(.55,0,.25,1) 1s forwards;
}
.luik-r{
  right:0;
  transform-origin:right center;
  animation:luikOpenR 1.7s cubic-bezier(.55,0,.25,1) 1.18s forwards;
}
@keyframes luikOpenL{
  to{ transform:rotateY(-112deg); }
}
@keyframes luikOpenR{
  to{ transform:rotateY(112deg); }
}

/* ---------- Foto in het raam ---------- */
.window-photo{ position:absolute; inset:0; }
.window-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:sepia(.34) saturate(1.14) brightness(1.03) contrast(1.02);
}
.window-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(185deg, rgba(143,192,232,.42) 0%, rgba(233,241,250,.12) 45%, rgba(36,80,111,.34) 100%);
  mix-blend-mode:multiply;
}
.window-sun{ mix-blend-mode:screen; }
.window-sun::before{
  content:"";
  position:absolute; inset:-110%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,224,150,.30) 0deg 7deg, transparent 7deg 21deg);
  -webkit-mask-image:radial-gradient(circle, #000 18%, transparent 66%);
  mask-image:radial-gradient(circle, #000 18%, transparent 66%);
  animation:sunspin 70s linear infinite;
}
@keyframes sunspin{ to{ transform:rotate(360deg); } }

/* Wolkjes die traag voorbij drijven */
.window-cloud{
  position:absolute;
  top:16%; left:-45%;
  width:52%; height:15%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,252,244,.9), rgba(255,252,244,0));
  filter:blur(3px);
  animation:drift 44s linear infinite;
}
.window-cloud.c2{
  top:32%; width:38%; height:11%;
  animation-duration:58s;
  animation-delay:14s;
  opacity:.75;
}
@keyframes drift{
  from{ transform:translateX(0); }
  to{ transform:translateX(340%); }
}

/* De plant wiegt zachtjes */
.window-plant{
  transform-origin:55% 100%;
  animation:sway 8.5s ease-in-out infinite alternate;
}
@keyframes sway{
  from{ transform:rotate(-1.4deg); }
  to{ transform:rotate(1.6deg); }
}

/* Zwevende stofjes in het ochtendlicht */
.hero-motes{
  position:absolute; inset:0;
  pointer-events:none;
}
.hero-motes span{
  position:absolute;
  width:9px; height:9px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,192,232,.9), rgba(143,192,232,0) 72%);
  opacity:0;
  animation-name:mote;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes mote{
  0%{ transform:translate(0, 40px) scale(.7); opacity:0; }
  18%{ opacity:.85; }
  80%{ opacity:.5; }
  100%{ transform:translate(26px, -150px) scale(1.1); opacity:0; }
}

/* Kaartjes bij het raam zweven mee */
.window-tag{ animation:floaty 7s ease-in-out infinite alternate; }
.window-tag2{ animation:floaty 9s ease-in-out infinite alternate-reverse; }
@keyframes floaty{
  from{ transform:translateY(0); }
  to{ transform:translateY(-9px); }
}

/* Dienstfoto met warme toon en icoon-chip */
.dienst-visual{ overflow:hidden; }
.dienst-visual > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:sepia(.3) saturate(1.12) brightness(1.02);
  transition:transform 1s var(--ease);
}
.dienst:hover .dienst-visual > img{ transform:scale(1.07); }
.dienst-visual::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(143,192,232,.28) 0%, rgba(233,241,250,.05) 55%, rgba(36,80,111,.22) 100%);
  mix-blend-mode:multiply;
}
.dienst-icon{
  position:relative;
  z-index:2;
  width:86px; height:86px;
  border-radius:50%;
  background:rgba(255,253,247,.94);
  border:1px solid rgba(153,97,12,.28);
  box-shadow:0 12px 30px -10px rgba(31,62,55,.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease);
}
.dienst:hover .dienst-icon{ transform:translateY(-5px) scale(1.05); }
.dienst-icon svg{ width:40px; height:40px; color:var(--night); }

/* Nacht: sterren fonkelen, maan gloeit */
.night::before{ animation:twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle{
  from{ opacity:.55; }
  to{ opacity:1; }
}
.night-moon{ animation:moonglow 8s ease-in-out infinite alternate; }
@keyframes moonglow{
  from{ filter:drop-shadow(0 0 10px rgba(235,227,207,.2)); }
  to{ filter:drop-shadow(0 0 26px rgba(235,227,207,.55)); }
}

/* Oranje lijntje groeit als een sectie in beeld komt */
.reveal .eyebrow::before,
.reveal .eyebrow::after{ width:0; transition:width .9s var(--ease) .25s; }
.reveal.in .eyebrow::before,
.reveal.in .eyebrow::after{ width:34px; }

/* Groot telefoonnummer voor wie liever belt */
.tel-big{
  font-size:1.55rem !important;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:560;
  letter-spacing:.01em;
}

/* ---------- Voetstappenpad: wij lopen met u mee ---------- */
.stappen-padwrap{
  display:none;
  position:relative;
  margin-top:clamp(26px, 4vw, 40px);
}
.stappen-pad{ width:100%; height:auto; overflow:visible; }
.pad-line{
  fill:none;
  stroke:var(--line);
  stroke-width:2;
  stroke-dasharray:2 10;
  stroke-linecap:round;
}
.pad-progress{
  fill:none;
  stroke:var(--amber);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.85;
}
.voet{
  fill:var(--amber-deep);
  opacity:0;
  transform:scale(.5);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.voet.zichtbaar{ opacity:.8; transform:scale(1); }
@media (min-width:901px){
  .stappen-padwrap{ display:block; }
  .stappen-grid{ margin-top:20px; }
}

/* ---------- Vallende sterren in de nacht ---------- */
.night-ster{
  position:absolute;
  top:14%; left:-8%;
  width:120px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(243,236,220,0), rgba(243,236,220,.95));
  transform:rotate(13deg);
  opacity:0;
  pointer-events:none;
  animation:vallen 10s linear infinite;
}
.night-ster.s2{
  top:40%;
  width:90px;
  animation-duration:13s;
  animation-delay:5.5s;
}
@keyframes vallen{
  0%, 86%{ opacity:0; transform:translate(0,0) rotate(13deg); }
  88%{ opacity:.95; }
  100%{ opacity:0; transform:translate(110vw, 26vh) rotate(13deg); }
}

/* ---------- Hart dat zichzelf tekent ---------- */
.quote-hart{
  position:relative;
  width:72px; height:auto;
  margin-bottom:16px;
}
.quote-hart path{
  fill:none;
  stroke:var(--amber-soft);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.reveal.in .quote-hart path{
  animation:hartTekenen 2.4s var(--ease) .35s forwards;
}
@keyframes hartTekenen{ to{ stroke-dashoffset:0; } }

/* ---------- Groeiende plant bij werken ---------- */
.groei{
  position:absolute;
  right:4%; bottom:0;
  width:112px; height:auto;
  z-index:0;
  pointer-events:none;
}
.groei .g-stem{
  fill:none;
  stroke:var(--night);
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.groei .g-leaf{
  fill:var(--night);
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center bottom;
}
.groei .g-pot{ fill:var(--night-2); }
.groei.in .g-stem{ animation:groeien 1.7s var(--ease) .2s forwards; }
.groei.in .g-leaf{ animation:blad .65s var(--ease) forwards; }
.groei.in .gl1{ animation-delay:.9s; }
.groei.in .gl2{ animation-delay:1.2s; }
.groei.in .gl3{ animation-delay:1.5s; }
.groei.in .gl4{ animation-delay:1.8s; }
@keyframes groeien{ to{ stroke-dashoffset:0; } }
@keyframes blad{ to{ transform:scale(1); } }
@media (max-width:1200px){ .groei{ display:none; } }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0s);
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ============================================================
   DIENSTEN, interactief spreekuur
   Concept: een zacht "dossier" met drie tabbladen. Je kiest
   een zorgvorm en het paneel eronder wisselt. Rustig, groot
   klikbaar, en niemand anders heeft deze indeling.
   ============================================================ */
:root{
  --aina-blue:   #8FC0E8;
  --aina-blue-d: #5B9AD1;
  --aina-blue-ink:#2E6491;
  --aina-pink:   #D67395;
  --aina-pink-d: #C05A7E;
  --aina-pink-ink:#9C3F60;
  --aina-blue-wash:#EAF4FC;
  --aina-pink-wash:#FBEEF3;
  --sun:         #F4B942;
  --sun-ink:     #B67611;
}
.diensten2{
  position:relative;
  background:
    radial-gradient(60% 50% at 92% 0%, var(--aina-pink-wash) 0%, rgba(251,238,243,0) 60%),
    radial-gradient(60% 55% at 4% 100%, var(--aina-blue-wash) 0%, rgba(234,244,252,0) 60%),
    #FBFDFE;
  overflow:hidden;
}
.diensten2 .eyebrow{ color:var(--aina-pink-ink); justify-content:center; }
.diensten2 .eyebrow::before{ background:var(--aina-pink); }
.diensten2 .eyebrow::after{ background:var(--aina-blue); }
.diensten2 h2{ color:#2B3A44; }
.diensten2 h2 em{ font-style:italic; color:var(--aina-blue-ink); }
.diensten2 .lead{ color:#5C6B73; }

/* Kiezer, de drie tabbladen */
.dx-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:clamp(40px,5vw,60px);
}
.dx-tab{
  position:relative;
  display:flex; align-items:center; gap:16px;
  text-align:left;
  padding:20px 22px;
  border-radius:22px;
  background:#fff;
  border:1.5px solid rgba(46,100,145,.14);
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease), background-color .35s var(--ease);
}
.dx-tab:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(46,100,145,.4); }
.dx-tab .dx-ic{
  flex:none;
  width:52px; height:52px;
  border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease);
}
.dx-tab .dx-ic svg{ width:27px; height:27px; }
.dx-tab .dx-lbl{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dx-tab .dx-lbl .k{
  font-family:var(--f-caps);
  font-weight:700; letter-spacing:.15em;
  font-size:.66rem;
  color:#94A2AC;
}
.dx-tab .dx-lbl .t{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:520;
  font-size:1.24rem;
  line-height:1.05;
  color:#2B3A44;
}
.dx-tab[data-tab] .dx-ic{ background:var(--aina-blue-wash); color:var(--aina-blue-ink); }
.dx-tab[data-tab="begeleiding"] .dx-ic{ background:var(--aina-pink-wash); color:var(--aina-pink-ink); }
/* actieve tab */
.dx-tab.active{ border-color:transparent; transform:translateY(-3px); }
.dx-tab.active::after{
  content:"";
  position:absolute; left:26px; right:26px; bottom:-1px; height:3px;
  border-radius:3px;
}
.dx-tab.tone-blue.active{ background:var(--aina-blue-ink); box-shadow:0 20px 40px -20px var(--aina-blue-ink); }
.dx-tab.tone-pink.active{ background:var(--aina-pink-ink); box-shadow:0 20px 40px -20px var(--aina-pink-ink); }
.dx-tab.active .dx-lbl .k{ color:rgba(255,255,255,.7); }
.dx-tab.active .dx-lbl .t{ color:#fff; }
.dx-tab.active .dx-ic{ background:rgba(255,255,255,.16); transform:scale(1.04); }
.dx-tab.tone-blue.active .dx-ic{ color:#fff; }
.dx-tab.tone-pink.active .dx-ic{ color:#fff; }

/* Het paneel */
.dx-stage{
  position:relative;
  margin-top:22px;
  border-radius:32px;
  background:#fff;
  border:1px solid rgba(46,100,145,.12);
  box-shadow:0 30px 80px -44px rgba(46,100,145,.55);
  overflow:hidden;
}
.dx-panel{
  display:grid;
  grid-template-columns:1.02fr 1.15fr;
}
.dx-panel[hidden]{ display:none; }

/* beeld met kleurwas per zorgvorm */
.dx-figure{
  position:relative;
  min-height:520px;
  overflow:hidden;
}
.dx-figure img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 6s var(--ease);
}
.dx-panel:not([hidden]) .dx-figure img{ transform:scale(1.1); }
.dx-figure::after{
  content:"";
  position:absolute; inset:0;
  mix-blend-mode:multiply;
}
.tone-blue .dx-figure::after{
  background:linear-gradient(155deg, rgba(143,192,232,.62) 0%, rgba(91,154,209,.4) 50%, rgba(46,100,145,.6) 100%);
}
.tone-pink .dx-figure::after{
  background:linear-gradient(155deg, rgba(214,115,149,.6) 0%, rgba(192,90,126,.4) 50%, rgba(156,63,96,.6) 100%);
}
/* groot woordmerk in het beeld */
.dx-figure .dx-word{
  position:absolute;
  left:34px; bottom:26px;
  z-index:2;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 60;
  font-style:italic;
  font-weight:440;
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1;
  color:rgba(255,255,255,.96);
  text-shadow:0 8px 30px rgba(0,0,0,.25);
  letter-spacing:-.01em;
}
.dx-figure .dx-chip{
  position:absolute;
  top:26px; left:26px;
  z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  font-family:var(--f-caps);
  font-weight:700; letter-spacing:.12em;
  font-size:.68rem;
  color:#3E4C55;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.4);
}
.dx-figure .dx-chip svg{ width:16px; height:16px; }
.tone-blue .dx-chip svg{ color:var(--aina-blue-ink); }
.tone-pink .dx-chip svg{ color:var(--aina-pink-ink); }

/* tekstzijde */
.dx-content{
  padding:clamp(32px,3.6vw,52px);
  display:flex; flex-direction:column;
}
.dx-content h3{
  font-size:clamp(1.8rem,3vw,2.4rem);
  color:#2B3A44;
  line-height:1.04;
}
.dx-content .dx-intro{
  color:#59686F;
  font-size:1.08rem;
  line-height:1.6;
  margin-top:16px;
  max-width:52ch;
}
.dx-sub{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-caps);
  font-weight:700; letter-spacing:.14em;
  font-size:.72rem;
  color:#8A97A0;
  margin:28px 0 4px;
}
.dx-sub::before{
  content:""; width:22px; height:2px; border-radius:2px;
}
.tone-blue .dx-sub::before{ background:var(--aina-blue-d); }
.tone-pink .dx-sub::before{ background:var(--aina-pink-d); }

/* lijst als nette twee-koloms rij met streepjes */
.dx-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 26px;
  margin-top:14px;
}
.dx-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0;
  border-bottom:1px solid rgba(46,100,145,.09);
  font-size:1.01rem;
  color:#3E4C55;
  line-height:1.4;
}
.dx-list .tick{
  flex:none; width:22px; height:22px; margin-top:1px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.tone-blue .dx-list .tick{ background:var(--aina-blue-wash); }
.tone-pink .dx-list .tick{ background:var(--aina-pink-wash); }
.dx-list .tick svg{ width:12px; height:12px; }
.tone-blue .dx-list .tick svg{ color:var(--aina-blue-ink); }
.tone-pink .dx-list .tick svg{ color:var(--aina-pink-ink); }

.dx-foot{
  margin-top:auto;
  padding-top:30px;
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center;
}
.dx-btn{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  font-weight:700; font-size:1.02rem;
  padding:15px 26px;
  border-radius:999px;
  color:#fff;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.tone-blue .dx-btn{ background:var(--aina-blue-d); box-shadow:0 14px 28px -14px var(--aina-blue-d); }
.tone-pink .dx-btn{ background:var(--aina-pink-d); box-shadow:0 14px 28px -14px var(--aina-pink-d); }
.dx-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.dx-btn svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
.dx-btn:hover svg{ transform:translateX(3px); }
.dx-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  font-weight:700; font-size:1rem;
  padding:13px 18px;
  border-radius:999px;
  transition:background-color .25s var(--ease);
}
.tone-blue .dx-link{ color:var(--aina-blue-ink); }
.tone-pink .dx-link{ color:var(--aina-pink-ink); }
.dx-link:hover{ background:rgba(46,100,145,.06); }
.dx-link svg{ width:16px; height:16px; }

@media (max-width:900px){
  .dx-tabs{ grid-template-columns:1fr; gap:10px; }
  .dx-tab{ padding:16px 18px; }
  .dx-panel{ grid-template-columns:1fr; }
  .dx-figure{ min-height:260px; order:0; }
  .dx-list{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .dx-tab .dx-lbl .k{ display:none; }
  .dx-foot .dx-btn, .dx-foot .dx-link{ width:100%; justify-content:center; }
}


/* ---------- Responsief ---------- */
@media (min-width:901px){
  .dag-arcwrap{ display:block; }
  .dag-steps{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width:1120px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .window-frame{ width:min(340px, 88%); }
  .hero h1 .w:nth-child(2){ padding-left:.55em; }
  .hero h1 .w:nth-child(3){ padding-left:1.1em; }
  .naam-grid{ grid-template-columns:1fr; }
  .diensten-grid{ grid-template-columns:1fr; }
  .dienst{ border-radius:150px 150px var(--r-lg) var(--r-lg); }
  .stappen-grid{ grid-template-columns:1fr; }
  .kwal-grid{ grid-template-columns:1fr; }
  .over-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .werken-inner{ grid-template-columns:1fr; justify-items:start; }
  .night-inner{ grid-template-columns:1fr; }
  .night-moon{ width:78px; height:78px; top:-20px; right:6%; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .window-tag{ right:-4px; max-width:210px; padding:12px 14px; }
  .window-tag2{ left:-4px; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; }
  .night-tel{ width:100%; }
  .night-tel .btn{ width:100%; }
}

/* ---------- Rustige modus ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero h1 .w{ opacity:1; transform:none; animation:none; }
  .window-sun{ animation:none; }
}

/* ============================================================
   SUBPAGINA'S: gedeelde componenten
   ============================================================ */

.nav-links a[aria-current="page"]{
  color:var(--ink);
  background:rgba(31,62,55,.07);
  font-weight:700;
}

/* ---------- Pagina-hero ---------- */
.page-hero{
  position:relative;
  padding:clamp(136px, 15vw, 186px) 0 clamp(44px, 6vw, 76px);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  top:-34%; right:-14%;
  width:58vw; height:58vw;
  max-width:820px; max-height:820px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(143,192,232,.42) 0%,
    rgba(185,218,241,.3) 42%,
    rgba(242,248,253,0) 72%);
  pointer-events:none;
}
.page-hero.tint-pink::before{
  background:radial-gradient(circle at center,
    rgba(214,115,149,.3) 0%,
    rgba(240,195,211,.24) 42%,
    rgba(242,248,253,0) 72%);
}
.page-hero.tint-dusk::before{
  background:radial-gradient(circle at center,
    rgba(233,167,101,.3) 0%,
    rgba(246,215,158,.22) 42%,
    rgba(242,248,253,0) 72%);
}
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
  position:relative;
}
.page-hero h1{
  font-size:clamp(2.7rem, 6.4vw, 4.6rem);
  font-weight:400;
  margin-top:24px;
}
.page-hero h1 em{
  font-style:italic;
  font-weight:440;
  color:var(--amber-deep);
}
.tint-pink h1 em{ color:var(--pink-deep); }
.page-hero .lead{ max-width:54ch; }
.page-hero-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:32px;
}
.page-hero-visual{
  position:relative;
  min-width:0;
  display:flex;
  justify-content:center;
}

/* ---------- Klein boograam ---------- */
.mini-frame{
  position:relative;
  width:min(330px, 100%);
  padding-bottom:12px;
}
.mini-window{
  position:relative;
  width:100%;
  aspect-ratio:10 / 12;
  border-radius:999px 999px 22px 22px;
  box-shadow:var(--shadow-soft), inset 0 0 0 9px var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  background:radial-gradient(120% 95% at 50% 4%,
    #EAF5FD 0%, #CDE6F8 30%, #A6D0F0 55%, #83BCE8 78%, #6BAEE0 100%);
}
.mini-window.is-dawn{
  background:radial-gradient(120% 95% at 50% 4%,
    #FDF3F7 0%, #F8DCE7 34%, #F0C3D3 60%, #E29DB8 82%, #D67395 100%);
}
.mini-window.is-dusk{
  background:radial-gradient(120% 95% at 50% 12%,
    #F6D79E 0%, #E9A765 34%, #C9743F 62%, #8C4A3A 86%, #5A3446 100%);
}
.mini-sun{
  position:absolute;
  left:50%; top:32%;
  width:26%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #FFF3D2, #FBD98A 68%);
  box-shadow:0 0 46px 14px rgba(255,214,120,.5);
  animation:sunBreathe 7s ease-in-out infinite alternate;
}
.mini-moon{
  position:absolute;
  left:50%; top:30%;
  width:22%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #F4EEDC, #D9D2BD 72%);
  box-shadow:0 0 38px 8px rgba(233,227,207,.45), inset -7px -5px 0 rgba(31,44,72,.16);
}
.mini-hills{
  position:absolute;
  left:0; right:0; bottom:0;
  height:32%;
  color:var(--night);
  opacity:.5;
}
.mini-bars::before,
.mini-bars::after{
  content:"";
  position:absolute;
  background:var(--card);
  box-shadow:0 1px 0 rgba(31,62,55,.12);
}
.mini-bars::before{
  left:50%; top:0; bottom:0;
  width:8px;
  transform:translateX(-50%);
}
.mini-bars::after{
  left:0; right:0; top:52%;
  height:8px;
}
.mini-plant{
  position:absolute;
  left:8%; bottom:-2%;
  width:34%;
  color:var(--night);
  transform-origin:55% 100%;
  animation:sway 8.5s ease-in-out infinite alternate;
}
.mini-sill{
  position:absolute;
  left:-5%; right:-5%;
  bottom:-12px;
  height:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 22px -12px rgba(31,62,55,.35);
}

/* ---------- Inhoudskaarten ---------- */
.zorg-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 26px);
  margin-top:clamp(40px, 5vw, 56px);
}
.zorg-card{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3vw, 34px);
  box-shadow:var(--shadow-card);
  display:flex; gap:20px;
  align-items:flex-start;
}
.zorg-card .zc-icon{
  flex:none;
  width:58px; height:58px;
  border-radius:999px 999px 12px 12px;
  background:linear-gradient(160deg, var(--dawn), var(--blush));
  border:1px solid rgba(46,100,145,.25);
  display:flex; align-items:center; justify-content:center;
}
.zorg-card .zc-icon svg{ width:26px; height:26px; color:var(--night); }
.zorg-card h3{ font-size:1.28rem; }
.zorg-card p{
  margin-top:8px;
  color:var(--ink-2);
  font-size:.99rem;
}
.zorg-cards.pink .zc-icon{
  background:linear-gradient(160deg, var(--blush), #F8DCE7);
  border-color:rgba(156,63,96,.25);
}

/* ---------- Tekst en beeld naast elkaar ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 76px);
  align-items:center;
}
.split-copy p + p{ margin-top:16px; }
.split-copy > p{ color:var(--ink-2); font-size:1.06rem; }
.split-copy p strong{ color:var(--ink); }

/* ---------- Vinklijst ---------- */
.checklist{
  display:grid; gap:12px;
  margin-top:22px;
}
.checklist li{
  display:flex; gap:12px;
  align-items:flex-start;
  font-size:1.04rem;
  color:var(--ink-2);
  line-height:1.55;
}
.checklist li strong{ color:var(--ink); }
.checklist svg{
  width:20px; height:20px; flex:none;
  margin-top:5px;
  color:var(--amber-deep);
}
.checklist.pink svg{ color:var(--pink-deep); }

/* ---------- CTA-band ---------- */
.cta-band{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(143,192,232,.24) 0%, rgba(231,241,250,0) 60%),
    var(--paper-2);
  border-block:1px solid var(--line-soft);
}
.cta-band.pink{
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(214,115,149,.22) 0%, rgba(251,238,243,0) 60%),
    var(--blush);
  border-block:1px solid rgba(156,63,96,.18);
}
.cta-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px, 4vw, 56px);
  padding:clamp(48px, 6vw, 76px) 0;
}
.cta-inner p{
  margin-top:14px;
  color:var(--ink-2);
  max-width:52ch;
  font-size:1.06rem;
}
.cta-actions{
  display:flex; flex-wrap:wrap; gap:14px;
}

/* ---------- Vacatures ---------- */
.vac-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.6vw, 26px);
  margin-top:clamp(40px, 5vw, 56px);
}
.vac{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:120px 120px var(--r-lg) var(--r-lg);
  padding:clamp(30px, 3.4vw, 40px) clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 30px);
  box-shadow:var(--shadow-card);
  text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vac:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -20px rgba(31,62,55,.3);
}
.vac .vac-icon{
  width:74px; height:74px;
  margin:0 auto;
  border-radius:50%;
  background:linear-gradient(160deg, var(--dawn), var(--blush));
  border:1px solid rgba(156,63,96,.22);
  display:flex; align-items:center; justify-content:center;
}
.vac .vac-icon svg{ width:32px; height:32px; color:var(--night); }
.vac .vac-tag{
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--pink-deep);
  margin-top:18px;
}
.vac h3{ margin-top:8px; font-size:1.34rem; }
.vac p{
  margin-top:10px;
  color:var(--ink-2);
  font-size:.98rem;
}
.vac a{
  margin-top:auto;
  padding-top:20px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
  font-weight:700;
  color:var(--ink);
}
.vac a span{
  border-bottom:2px solid var(--pink-soft);
  padding-bottom:2px;
}
.vac a svg{
  width:17px; height:17px;
  transition:transform .25s var(--ease);
}
.vac a:hover svg{ transform:translateX(4px); }

/* ---------- Vergoedingsroutes ---------- */
.route-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 2.6vw, 26px);
  margin-top:clamp(40px, 5vw, 56px);
}
.route{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(26px, 3vw, 36px);
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.route .rt-badge{
  align-self:flex-start;
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.18em;
  padding:7px 14px;
  border-radius:999px;
  background:#EAF4FC;
  color:#2E6491;
}
.route.pink .rt-badge{ background:var(--blush); color:var(--pink-deep); }
.route.sun .rt-badge{ background:#FBF0D5; color:#8A5E10; }
.route h3{ margin-top:16px; font-size:1.4rem; }
.route > p{
  margin-top:10px;
  color:var(--ink-2);
  font-size:1rem;
}
.route .checklist{ margin-top:16px; gap:9px; }
.route .checklist li{ font-size:.97rem; }

/* ---------- Handige links ---------- */
.linklist{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:clamp(30px, 4vw, 44px);
}
.linklist a{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:17px 20px;
  text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.linklist a:hover{
  border-color:var(--amber);
  transform:translateX(4px);
}
.linklist svg{
  width:20px; height:20px; flex:none;
  margin-top:3px;
  color:var(--amber-deep);
}
.linklist strong{ display:block; font-size:1.02rem; }
.linklist span{
  display:block;
  color:var(--ink-2);
  font-size:.9rem;
  margin-top:2px;
}

/* ---------- Rustige quote (palliatief) ---------- */
.stil-quote{
  margin:clamp(44px, 6vw, 64px) auto 0;
  max-width:720px;
  text-align:center;
}
.stil-quote blockquote{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-style:italic;
  font-weight:430;
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  line-height:1.35;
  color:var(--ink);
}
.stil-quote figcaption{
  margin-top:18px;
  font-family:var(--f-caps);
  font-weight:700;
  letter-spacing:.18em;
  font-size:.78rem;
  color:var(--amber-deep);
}

/* ---------- Responsief subpagina's ---------- */
@media (max-width:900px){
  .page-hero-grid{ grid-template-columns:1fr; }
  .page-hero-visual{ order:-1; }
  .mini-frame{ width:min(250px, 76%); }
  .zorg-cards{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .vac-grid{ grid-template-columns:1fr; }
  .route-grid{ grid-template-columns:1fr; }
  .linklist{ grid-template-columns:1fr; }
  .cta-inner{ grid-template-columns:1fr; justify-items:start; }
}
@media (max-width:560px){
  .page-hero-actions .btn{ width:100%; }
  .cta-actions{ width:100%; }
  .cta-actions .btn{ width:100%; }
}

/* ============================================================
   UITBREIDING, juli 2026
   Over ons + team, veelgestelde vragen, zo werkt het,
   juridische pagina's, 404, en het merk wat ruimer aanwezig.
   ============================================================ */

/* ---------- Merk-watermerk: het boograam heel zacht op de achtergrond ---------- */
.brand-watermark{
  position:absolute;
  pointer-events:none;
  z-index:0;
  color:var(--amber);
  opacity:.06;
}
.brand-watermark.tr{ top:-40px; right:-30px; width:min(320px, 40vw); }
.brand-watermark.bl{ bottom:-50px; left:-40px; width:min(300px, 38vw); }
.page-hero .wrap,
.section .wrap,
.cta-inner{ position:relative; z-index:1; }

/* Twee hoofdjes als merk-accent, herbruikbaar streepje-vervanger */
.dots{
  display:inline-flex; align-items:center; gap:7px;
  vertical-align:middle;
}
.dots::before,
.dots::after{
  content:"";
  width:12px; height:12px;
  border-radius:50%;
  flex:none;
}
.dots::before{ background:var(--pink); }
.dots::after{ background:var(--amber); }

/* ============================================================
   OVER ONS, de mensen achter Aina
   ============================================================ */
.founder{ position:relative; overflow:hidden; }
.founder-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px, 5vw, 76px);
  align-items:center;
}
/* Portret in het boograam */
.portrait-frame{
  position:relative;
  width:min(400px, 100%);
  margin-inline:auto;
  padding-bottom:14px;
}
.portrait-window{
  position:relative;
  width:100%;
  aspect-ratio:10 / 12;
  border-radius:999px 999px 22px 22px;
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:var(--shadow-soft), inset 0 0 0 9px var(--card);
  border:1px solid var(--line);
}
.portrait-window img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  filter:grayscale(1) contrast(1.02);
}
.portrait-window::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(185deg, rgba(143,192,232,.16) 0%, rgba(233,241,250,0) 42%, rgba(36,80,111,.22) 100%);
  mix-blend-mode:multiply;
}
.portrait-sill{
  position:absolute;
  left:-5%; right:-5%; bottom:-12px;
  height:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 22px -12px rgba(31,62,55,.35);
}
.portrait-tag{
  position:absolute;
  right:-14px; bottom:8%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:13px 18px;
  max-width:230px;
}
.portrait-tag strong{ display:block; font-size:1rem; line-height:1.2; }
.portrait-tag span{ display:block; font-size:.84rem; color:var(--ink-2); margin-top:2px; }

.founder-copy blockquote{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-style:italic;
  font-weight:430;
  font-size:clamp(1.5rem, 2.6vw, 2.05rem);
  line-height:1.3;
  color:var(--ink);
  margin:6px 0 22px;
}
.founder-copy p + p{ margin-top:16px; }
.founder-copy > p{ color:var(--ink-2); font-size:1.06rem; }
.founder-copy p strong{ color:var(--ink); }
.founder-sign{
  margin-top:24px;
  font-family:var(--f-caps);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.82rem;
  color:var(--amber-deep);
}
.founder-sign span{
  display:block;
  font-family:var(--f-body);
  font-weight:400; letter-spacing:0;
  color:var(--ink-2);
  font-size:.95rem;
  margin-top:3px;
}

/* Team-raster */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 3vw, 30px);
  margin-top:clamp(44px, 6vw, 64px);
}
.member{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.member:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -20px rgba(31,62,55,.3);
}
.member-photo{
  position:relative;
  aspect-ratio:4 / 4.4;
  overflow:hidden;
  background:var(--paper-2);
}
.member-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 20%;
  filter:grayscale(1) contrast(1.03);
  transition:transform 1s var(--ease), filter .6s var(--ease);
}
.member:hover .member-photo img{ transform:scale(1.05); }
.member-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(143,192,232,.05) 0%, rgba(36,80,111,.28) 100%);
  mix-blend-mode:multiply;
  transition:opacity .5s var(--ease);
}
.member:nth-child(2) .member-photo::after{
  background:linear-gradient(180deg, rgba(214,115,149,.06) 0%, rgba(156,63,96,.3) 100%);
}
.member-mark{
  position:absolute;
  left:16px; bottom:14px;
  z-index:2;
  display:inline-flex; align-items:center; gap:7px;
}
.member-mark span{ width:11px; height:11px; border-radius:50%; }
.member-mark .p{ background:var(--pink); }
.member-mark .b{ background:var(--amber); }
.member-body{ padding:clamp(20px, 2.4vw, 28px); }
.member-body .role{
  font-family:var(--f-caps);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--amber-deep);
}
.member:nth-child(2) .member-body .role{ color:var(--pink-deep); }
.member-body h3{ margin-top:8px; font-size:1.36rem; }
.member-body p{ margin-top:10px; color:var(--ink-2); font-size:.98rem; }

/* Rij met gezichtjes op de homepage-teaser */
.face-row{ display:flex; align-items:center; margin-top:4px; }
.face-row img{
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
  filter:grayscale(1);
  border:2px solid var(--card);
  box-shadow:0 4px 12px -4px rgba(31,62,55,.4);
  margin-left:-12px;
}
.face-row img:first-child{ margin-left:0; }

/* Avatar bij het citaat van Neela op de homepage */
.over-avatar{
  position:relative; z-index:1;
  width:96px; height:96px;
  margin:0 auto 6px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(243,236,220,.28);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
}
.over-avatar img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
  filter:grayscale(1) contrast(1.05);
}

/* ============================================================
   VEELGESTELDE VRAGEN, zachte accordeon
   ============================================================ */
.faq-groups{ margin-top:clamp(40px, 5vw, 56px); display:grid; gap:clamp(30px, 4vw, 46px); }
.faq-group h2{
  font-size:clamp(1.5rem, 2.4vw, 1.9rem);
  display:flex; align-items:center; gap:14px;
}
.faq-list{ margin-top:22px; display:grid; gap:12px; }
.faq{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:border-color .3s var(--ease);
}
.faq[open]{ border-color:rgba(143,192,232,.6); }
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; gap:16px;
  padding:20px 22px;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-weight:500;
  font-size:clamp(1.1rem, 1.7vw, 1.28rem);
  line-height:1.25;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q-ic{
  flex:none;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--dawn);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-left:auto;
  transition:transform .35s var(--ease), background-color .3s var(--ease);
}
.faq summary .q-ic svg{ width:16px; height:16px; color:var(--amber-deep); }
.faq[open] summary .q-ic{ transform:rotate(45deg); background:var(--amber); }
.faq[open] summary .q-ic svg{ color:var(--card); }
.faq-answer{ padding:0 22px 22px 22px; }
.faq-answer p{ color:var(--ink-2); font-size:1.02rem; }
.faq-answer p + p{ margin-top:12px; }
.faq-answer a{ color:var(--amber-deep); font-weight:700; text-decoration:none; border-bottom:2px solid var(--amber-soft); }
.faq-answer strong{ color:var(--ink); }

/* ============================================================
   ZO WERKT HET, verticale tijdlijn
   ============================================================ */
.tl{
  position:relative;
  margin-top:clamp(44px, 6vw, 64px);
  display:grid; gap:20px;
}
.tl::before{
  content:"";
  position:absolute;
  left:31px; top:20px; bottom:20px;
  width:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 13px);
}
.tl-step{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.tl-num{
  position:relative; z-index:1;
  width:64px; height:64px;
  border-radius:999px 999px 16px 16px;
  background:linear-gradient(160deg, var(--dawn), var(--blush));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 82;
  font-style:italic;
  font-weight:460;
  font-size:1.7rem;
  color:var(--amber-deep);
  box-shadow:var(--shadow-card);
}
.tl-step:last-child .tl-num{
  background:var(--night);
  color:#F3ECDC;
  border-color:var(--night);
}
.tl-card{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(22px, 2.6vw, 30px);
  box-shadow:var(--shadow-card);
}
.tl-card h3{ font-size:1.36rem; }
.tl-card .when{
  font-family:var(--f-caps);
  font-weight:700; letter-spacing:.16em;
  font-size:.72rem;
  color:var(--amber-deep);
}
.tl-card p{ margin-top:10px; color:var(--ink-2); font-size:1.01rem; }
.tl-card .checklist{ margin-top:14px; }

@media (max-width:560px){
  .tl::before{ left:23px; }
  .tl-step{ grid-template-columns:48px minmax(0,1fr); gap:16px; }
  .tl-num{ width:48px; height:48px; font-size:1.3rem; }
}

/* ============================================================
   JURIDISCHE PAGINA'S, rustig leesbaar
   ============================================================ */
.legal-layout{
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(32px, 5vw, 68px);
  align-items:start;
}
.legal-toc{
  position:sticky; top:100px;
  align-self:start;
}
.legal-toc h2{
  font-family:var(--f-caps);
  font-weight:700; letter-spacing:.2em;
  font-size:.76rem;
  color:var(--ink-2);
  margin-bottom:16px;
}
.legal-toc ol{ list-style:none; display:grid; gap:2px; counter-reset:toc; }
.legal-toc a{
  counter-increment:toc;
  display:flex; gap:12px;
  padding:9px 12px;
  border-radius:10px;
  text-decoration:none;
  color:var(--ink-2);
  font-size:.96rem;
  line-height:1.35;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.legal-toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.72rem;
  color:var(--ink-3);
  padding-top:2px;
}
.legal-toc a:hover{ background:rgba(31,62,55,.05); color:var(--ink); }

.legal-prose{ max-width:70ch; }
.legal-prose > section{ scroll-margin-top:100px; }
.legal-prose > section + section{ margin-top:clamp(38px, 5vw, 56px); }
.legal-prose h2{
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  display:flex; align-items:baseline; gap:14px;
}
.legal-prose h2 .n{
  font-family:var(--f-caps);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.14em;
  color:var(--amber-deep);
  -webkit-text-fill-color:var(--amber-deep);
}
.legal-prose h3{ font-size:1.22rem; margin-top:24px; }
.legal-prose p{ margin-top:14px; color:var(--ink-2); font-size:1.04rem; }
.legal-prose p strong{ color:var(--ink); }
.legal-prose a{ color:var(--amber-deep); font-weight:600; text-decoration:none; border-bottom:1px solid var(--amber-soft); }
.legal-prose a:hover{ border-color:var(--amber-deep); }
.legal-prose ul{ margin-top:14px; display:grid; gap:10px; }
.legal-prose ul li{
  position:relative;
  padding-left:26px;
  color:var(--ink-2);
  font-size:1.02rem;
  line-height:1.55;
}
.legal-prose ul li::before{
  content:"";
  position:absolute; left:2px; top:11px;
  width:8px; height:8px; border-radius:50%;
  background:var(--amber);
}
.legal-prose ul li strong{ color:var(--ink); }
.legal-meta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px;
  font-family:var(--f-caps);
  font-weight:700; letter-spacing:.14em;
  font-size:.74rem;
  color:var(--ink-3);
}
.legal-meta svg{ width:17px; height:17px; flex:none; color:var(--amber-deep); }
.legal-note{
  margin-top:18px;
  display:flex; gap:14px;
  background:var(--blush);
  border:1px solid rgba(156,63,96,.2);
  border-radius:var(--r-md);
  padding:18px 22px;
}
.legal-note svg{ width:22px; height:22px; flex:none; color:var(--pink-deep); margin-top:2px; }
.legal-note p{ margin-top:0; font-size:.98rem; color:var(--ink); }
.legal-fill{
  font-style:normal;
  background:rgba(143,192,232,.28);
  border-bottom:1px dashed var(--amber-deep);
  padding:0 4px; border-radius:3px;
  color:var(--ink);
}
.legal-contactcard{
  margin-top:clamp(38px, 5vw, 52px);
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(26px, 3vw, 34px);
}
.legal-contactcard h3{ font-size:1.3rem; }
.legal-contactcard p{ margin-top:8px; color:var(--ink-2); font-size:1rem; }
.legal-contactcard .contact-list{ margin-top:18px; }

@media (max-width:900px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; }
  .legal-toc ol{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:8px; padding-bottom:6px; }
  .legal-toc a{ white-space:nowrap; border:1px solid var(--line-soft); }
}

/* ============================================================
   404
   ============================================================ */
.fourofour{
  min-height:82vh;
  display:flex; align-items:center;
  padding:clamp(128px, 16vw, 168px) 0 clamp(48px, 7vw, 80px);
  position:relative; overflow:hidden;
}
.fourofour-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
  width:100%;
}
.fourofour h1{
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  font-weight:400;
  margin-top:20px;
}
.fourofour h1 em{ font-style:italic; color:var(--amber-deep); }
.fourofour .lead{ max-width:48ch; }
.fourofour-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.fourofour-quick{
  margin-top:30px; padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:8px 22px;
}
.fourofour-quick a{
  text-decoration:none;
  color:var(--ink-2);
  font-weight:600;
  border-bottom:2px solid var(--amber-soft);
  transition:color .2s var(--ease);
}
.fourofour-quick a:hover{ color:var(--ink); }
@media (max-width:760px){
  .fourofour-grid{ grid-template-columns:1fr; }
  .fourofour-grid .page-hero-visual{ order:-1; }
}

/* Teaser-kaart met gezichtjes (hergebruikt .trust) */
.trust .face-row{ margin-top:16px; }

/* ---------- Echt logo in header en footer ---------- */
.brand{ gap:0; }
.brand-logo{ height:46px; width:auto; display:block; }
.footer-brand .brand-logo{ height:56px; }
@media (max-width:560px){ .brand-logo{ height:40px; } }

/* Team met twee leden: gecentreerd, niet uitgerekt */
.team-grid.two{
  grid-template-columns:repeat(2, minmax(0, 340px));
  justify-content:center;
}
@media (max-width:900px){ .team-grid.two{ grid-template-columns:minmax(0, 380px); } }