/* C - Cobalto: kleur draagt de pagina; Marcellus + Manrope */
:root{
  --cobalt:oklch(.42 .17 262);--cobalt-deep:oklch(.3 .14 262);--cobalt-soft:oklch(.9 .04 262);
  --bg:oklch(.975 .01 262);--surface:oklch(.935 .02 262);--ink:oklch(.22 .05 262);
  --muted:oklch(.42 .04 262);--muted-strong:oklch(.32 .05 262);--line:oklch(.86 .02 262);--line-strong:oklch(.55 .06 262);
  --accent:var(--cobalt);--accent-hover:var(--cobalt-deep);--accent-ink:oklch(.99 .004 262);
  --font-display:'Marcellus',Georgia,serif;--font-body:'Manrope',system-ui,sans-serif;
  --top-bg:var(--cobalt);--hero-ink:#fff;--hero-pos:55% 45%;--btn-r:999px;--demo-bg:var(--cobalt-deep);--demo-ink:oklch(.9 .03 262);--focus:oklch(.7 .17 262)
}
.top{color:#fff;border-bottom-color:oklch(1 0 0 / .18)}
.top .langs a[aria-current]{box-shadow:inset 0 -2px 0 #fff}
.top .btn-solid{background:#fff;color:var(--cobalt)}
.top .btn-solid:hover{background:var(--cobalt-soft)}
.menu nav{--line:oklch(1 0 0 / .2)}
.mark{font-size:1.4rem;letter-spacing:.01em}
.hero{min-height:min(88dvh,54rem)}
.hero h1{font-size:clamp(2.5rem,6vw + .5rem,5.5rem);line-height:1.04;letter-spacing:-.01em;max-width:13ch}
.hero-scrim{background:linear-gradient(90deg,oklch(.32 .15 262 / .94) 0%,oklch(.38 .17 262 / .78) 42%,oklch(.42 .17 262 / .1) 82%)}
.hero-role{font-size:1.0625rem;color:oklch(.92 .04 262);margin-bottom:1rem;font-weight:600}
.hero .btn-solid{background:#fff;color:var(--cobalt)}
.hero .btn-solid:hover{background:var(--cobalt-soft)}
@media (max-width:43.75rem){.hero{min-height:min(90dvh,46rem)}.hero-scrim{background:linear-gradient(0deg,oklch(.3 .15 262 / .96) 0%,oklch(.36 .17 262 / .78) 55%,oklch(.42 .17 262 / .15) 100%)}}

.intro{padding-block:clamp(3.5rem,8vw,7rem)}
.intro-in{display:grid;gap:2.5rem 5rem;align-items:center}
.arch{margin:0;overflow:hidden;border-radius:999px 999px 0 0;background:var(--surface)}
.arch img{width:100%;height:100%;object-fit:cover}
.intro .arch{aspect-ratio:3/4;width:min(100%,24rem)}
.intro-t{font-family:var(--font-display);font-size:clamp(1.55rem,2.2vw + .9rem,2.6rem);line-height:1.25;color:var(--cobalt);max-width:28ch;margin-bottom:2rem;text-wrap:balance}
.intro .hours{max-width:26rem}
@media (min-width:56rem){.intro-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

.areas{background:var(--surface);padding-block:clamp(3.5rem,8vw,7rem)}
.areas-h{margin-bottom:2.5rem;display:grid;gap:1rem 4rem}
.areas-h h2{font-size:clamp(2rem,3vw + .8rem,3.25rem);line-height:1.08;color:var(--cobalt)}
.areas-h .note{color:var(--muted);max-width:40ch;align-self:end}
@media (min-width:56rem){.areas-h{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.tiles{display:grid;grid-template-columns:1fr;gap:.9rem}
.tile{padding:1.75rem 1.75rem 2rem;border-radius:14px;background:var(--bg);display:grid;align-content:space-between;gap:1.25rem;min-height:11rem}
.tile h3{font-size:1.6rem;line-height:1.15}
.tile p{color:var(--muted-strong);max-width:36ch}
.tile.t1,.tile.t6{background:var(--cobalt);color:#fff}
.tile.t1 p,.tile.t6 p{color:oklch(.94 .02 262)}
.tile.t4{background:var(--cobalt-deep);color:#fff}
.tile.t4 p{color:oklch(.92 .02 262)}
.tile.t3{background:var(--cobalt-soft)}
@media (min-width:50rem){
  .tiles{grid-template-columns:repeat(12,1fr);gap:1rem}
  .tile.t1{grid-column:span 7;min-height:15rem}.tile.t2{grid-column:span 5}
  .tile.t3,.tile.t4,.tile.t5{grid-column:span 4}
  .tile.t6{grid-column:span 12;min-height:9rem;grid-template-columns:1fr 1fr;align-items:center}
}

.method{background:var(--cobalt);color:#fff;padding-block:clamp(3.5rem,8vw,7rem);--line:oklch(1 0 0 / .28)}
.method h2{font-size:clamp(2rem,3vw + .8rem,3.25rem);margin-bottom:clamp(2rem,5vw,3.5rem)}
.steps{display:grid;gap:2rem}
.steps li{padding-top:1.5rem;border-top:1px solid oklch(1 0 0 / .4)}
.steps .num{display:grid;place-content:center;width:3rem;height:3rem;border:1.5px solid #fff;border-radius:50%;font-family:var(--font-display);font-size:1.4rem;margin-bottom:1.25rem}
.steps h3{font-size:1.55rem;margin-bottom:.6rem}
.steps p{color:oklch(.94 .02 262);max-width:34ch}
@media (min-width:50rem){.steps{grid-template-columns:repeat(3,1fr);gap:3rem}}

.arches{padding-block:clamp(3rem,7vw,6rem);background:var(--bg)}
.arches-in{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,2vw,2rem);align-items:end}
.arches .arch{aspect-ratio:3/4.4}
.arches .a3{aspect-ratio:3/5.2}
.arches .a4{aspect-ratio:3/3.8}

.faq{background:var(--surface);padding-block:clamp(3.5rem,7vw,6rem)}
.faq-in{display:grid;gap:2rem 4rem}
.faq h2{font-size:clamp(2rem,3vw + .8rem,3.25rem);color:var(--cobalt)}
.faq .faq-item summary{color:var(--ink)}
@media (min-width:56rem){.faq-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}

.contact{background:var(--cobalt-deep);color:#fff;padding-block:clamp(3.5rem,8vw,7rem);--line:oklch(1 0 0 / .25);--muted:oklch(.9 .03 262)}
.contact-in{display:grid;gap:3rem 5rem}
.contact h2{font-size:clamp(2.1rem,3.4vw + .8rem,3.75rem);line-height:1.06;max-width:14ch}
.contact .c-l p{margin-top:1.25rem;max-width:40ch;font-size:1.15rem;color:oklch(.94 .02 262)}
.contact h3{font-family:var(--font-body);font-weight:700;font-size:1rem;margin-bottom:.5rem}
.contact .btn-solid{background:#fff;color:var(--cobalt-deep)}
.contact .btn-solid:hover{background:var(--cobalt-soft)}
.contact .btn-line{border-color:oklch(.85 .04 262)}
.contact :focus-visible{outline-color:#fff}
@media (min-width:56rem){.contact-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}}
.foot{background:var(--bg)}
.sticky{background:var(--cobalt-deep);color:#fff}
.sticky a:last-child{background:#fff;color:var(--cobalt-deep)}