:root{
  --white:#FFFFFF;

  /* Thema: oudroze */
  --theme-tint:#F4EEEE;
  --theme-main:#9E8084;
  --theme-softaccent:#C2ADB0;
  --theme-brightaccent:#A98D91;

  --theme-main-rgb:158,128,132;
  --theme-softaccent-rgb:194,173,176;
  --theme-brightaccent-rgb:169,141,145;

  /* Neutrale tekstkleuren */
  --text-dark:#1F1F1F;
  --text-muted:#606060;

  --line:rgba(31,31,31,0.10);

  --separator-size:1.55rem;
  --section-text-size:clamp(19px,2.2vw,21px);
  --body-text-size:15px;

  /* Liquid Glass */
  --glass-highlight:rgba(255,255,255,0.58);
  --glass-edge:rgba(255,255,255,0.42);
  --glass-fill-strong:rgba(255,255,255,0.20);
  --glass-fill-mid:rgba(255,255,255,0.035);
  --glass-fill-soft:rgba(255,255,255,0.10);
  --glass-theme:rgba(var(--theme-main-rgb),0.16);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--white);
  color:var(--text-dark);
  font-family:'Karla', sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,
h2,
h3{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  margin:0;
  color:inherit;
}

a{
  color:inherit;
}

p{
  margin:0;
}

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

/* Header */

.nav-wrap{
  position:sticky;
  top:14px;
  z-index:50;

  width:calc(100% - 32px);
  max-width:700px;

  margin:14px auto 0 auto;
}

header.site-header{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:12px 26px;
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--glass-fill-strong),
      var(--glass-fill-mid) 45%,
      var(--glass-fill-soft)
    );

  backdrop-filter:
    blur(18px)
    saturate(180%)
    brightness(1.07);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(180%)
    brightness(1.07);

  border:1px solid var(--glass-edge);

  box-shadow:
    0 10px 32px rgba(var(--theme-main-rgb),0.11),
    inset 0 1px 0 rgba(255,255,255,0.68),
    inset 0 -1px 0 rgba(255,255,255,0.12);

  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

header.site-header::before{
  content:"";
  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(
      ellipse at 18% 0%,
      var(--glass-highlight) 0%,
      rgba(255,255,255,0.12) 30%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 82% 100%,
      var(--glass-theme) 0%,
      transparent 48%
    );
}

header.site-header::after{
  content:"";
  position:absolute;
  inset:1px;

  border-radius:inherit;

  pointer-events:none;
  z-index:0;

  background:
    linear-gradient(
      110deg,
      transparent 10%,
      rgba(255,255,255,0.10) 30%,
      rgba(255,255,255,0.28) 48%,
      rgba(255,255,255,0.07) 64%,
      transparent 80%
    );

  opacity:0.72;
  mix-blend-mode:screen;
}

header.site-header > *{
  position:relative;
  z-index:1;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand span{
  font-family:'Bodoni Moda', serif;
  font-size:24px;
  font-weight:500;
  color:var(--text-dark);
}

.menu-toggle{
  background:none;
  border:none;
  padding:0;

  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  content:"";

  display:block;

  width:18px;
  height:2px;

  background:var(--text-dark);

  position:relative;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.menu-toggle span::before{
  position:absolute;
  top:-6px;
}

.menu-toggle span::after{
  position:absolute;
  top:6px;
}

.menu-toggle.open span{
  background:transparent;
}

.menu-toggle.open span::before{
  transform:translateY(6px) rotate(45deg);
}

.menu-toggle.open span::after{
  transform:translateY(-6px) rotate(-45deg);
}

/* Mobile menu */

#mobile-menu{
  max-height:0;
  overflow:hidden;

  margin:8px 0 0 0;
  border-radius:24px;

  transition:max-height .25s ease;

  z-index:49;
  position:relative;
}

#mobile-menu.open{
  max-height:200px;

  background:rgba(255,255,255,0.48);

  backdrop-filter:
    blur(18px)
    saturate(165%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(165%);

  border:1px solid rgba(255,255,255,0.45);

  box-shadow:
    0 8px 32px rgba(31,31,31,0.10);

  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

#mobile-menu a{
  display:block;

  padding:16px 24px;

  font-size:15px;
  text-decoration:none;

  border-top:1px solid rgba(31,31,31,0.08);

  color:var(--text-muted);
}

#mobile-menu a:first-child{
  border-top:none;
}

#mobile-menu a.active{
  color:var(--theme-brightaccent);
  font-weight:700;
}

/* General layout */

section{
  width:100%;
}

.inner{
  max-width:640px;
  margin:0 auto;
  padding:0 6vw;
}

.contact .inner,
.complaints .inner{
  max-width:700px;
}

/* Shared footer */

.separator-dot{
  font-size:var(--separator-size);
  line-height:0;

  display:inline-block;
  position:relative;

  top:0.08em;
}

footer{
  padding:40px 6vw 56px 6vw;

  font-size:var(--body-text-size);
  color:var(--text-muted);

  text-align:center;
  line-height:1.8;
}

/* Gedeelde linkstijl */

.footer-link,
.footer-link:visited,
.step a,
.step a:visited,
.info-value a,
.info-value a:visited{
  color:var(--text-muted);
  text-decoration:none;
}

.footer-link:hover,
.step a:hover,
.info-value a:hover{
  color:var(--theme-softaccent);
}

/* Index */

.home section .inner{
  text-align:center;
}

.home .hero{
  padding:56px 0 72px 0;
}

h1.name{
  font-size:clamp(40px,8vw,64px);
  line-height:1.02;
}

.who{
  font-size:clamp(16px,2.75vw,20.5px);
  color:var(--text-muted);

  margin-top:14px;

  white-space:nowrap;
}

/* Buttons */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  font-family:'Karla', sans-serif;
  font-weight:700;
  font-size:var(--body-text-size);

  padding:16px 32px;
  border-radius:999px;

  text-decoration:none;
  display:inline-block;

  margin-top:36px;

  backdrop-filter:
    blur(12px)
    saturate(165%)
    brightness(1.05);

  -webkit-backdrop-filter:
    blur(12px)
    saturate(165%)
    brightness(1.05);

  border:1px solid rgba(255,255,255,0.38);

  box-shadow:
    0 6px 20px rgba(var(--theme-main-rgb),0.13),
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -1px 0 rgba(255,255,255,0.10);
}

.btn-soft{
  background:
    linear-gradient(
      135deg,
      rgba(var(--theme-softaccent-rgb),0.72),
      rgba(var(--theme-softaccent-rgb),0.54)
    );

  color:var(--white);
}

.btn::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;
  z-index:-1;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.07) 32%,
      transparent 55%,
      rgba(255,255,255,0.08) 80%,
      rgba(255,255,255,0.18) 100%
    );
}

/* Slogan band */

.band{
  background:var(--theme-main);
  color:var(--white);

  display:flex;
  align-items:stretch;
  justify-content:center;

  gap:0;

  padding:0 20px;

  position:relative;
  overflow:hidden;
}

.band .inner{
  width:auto;
  max-width:none;

  margin:0;
  padding:72px 0;

  display:flex;
  align-items:center;

  position:relative;
  z-index:1;

  text-align:left;
}

.slogan{
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  font-weight:400;

  font-size:clamp(28px,7.5vw,38px);
  line-height:1.28;

  color:var(--white);

  text-align:left;
}

.band-photo{
  position:static;

  height:285px;
  width:auto;
  max-width:48%;

  flex-shrink:0;
  align-self:flex-end;

  object-fit:contain;
  object-position:bottom;
}

/* Bio */

.bio{
  padding:72px 0;
}

.bio p{
  font-size:var(--body-text-size);
  line-height:1.75;

  color:var(--text-muted);

  max-width:56ch;

  margin-bottom:24px;
}

.bio p:last-child{
  margin-bottom:0;
}

/* CTA */

.cta-band{
  background:var(--theme-main);
  color:var(--white);

  padding:72px 0;

  text-align:center;
}

.cta-band h2{
  font-size:clamp(28px,5vw,40px);
  line-height:1.15;

  max-width:20ch;

  margin:0 auto;
}

.cta-band .btn{
  margin-top:32px;
}

/* Inner pages */

.page-hero{
  padding:56px 0 48px 0;
}

h1.page-title{
  font-size:clamp(40px,8vw,58px);
}

.complaints h1.page-title{
  font-size:clamp(36px,7vw,52px);
}

.intro{
  font-family:'Bodoni Moda', serif;
  font-style:normal;
  font-weight:400;

  font-size:var(--section-text-size);
  line-height:1.5;

  color:var(--text-muted);

  margin-top:24px;
}

.contact .intro{
  max-width:32ch;
}

.complaints .intro{
  max-width:38ch;
}

/* Contact */

.contact-info{
  padding:16px 0 72px 0;

  background:var(--theme-tint);
}

.info-row,
.step{
  display:grid;
  grid-template-columns:64px 1fr;

  gap:20px;

  padding:36px 0;

  border-top:1px solid var(--line);
}

.info-row:first-child,
.step:first-child{
  border-top:none;
}

/* Glass badges */

.info-icon,
.step-num{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  color:var(--theme-softaccent);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.40),
      rgba(255,255,255,0.08)
    );

  backdrop-filter:
    blur(12px)
    saturate(165%);

  -webkit-backdrop-filter:
    blur(12px)
    saturate(165%);

  border:1px solid rgba(255,255,255,0.52);

  box-shadow:
    0 6px 18px rgba(var(--theme-main-rgb),0.09),
    inset 0 1px 0 rgba(255,255,255,0.68),
    inset 0 -1px 0 rgba(var(--theme-softaccent-rgb),0.10);
}

.info-icon svg{
  width:26px;
  height:26px;

  stroke:currentColor;
}

.info-label,
.step h3{
  font-family:'Bodoni Moda', serif;

  font-size:var(--section-text-size);
  font-weight:500;

  color:var(--text-dark);

  margin:0 0 10px 0;
}

.info-value,
.step p{
  font-size:var(--body-text-size);
  line-height:1.75;

  color:var(--text-muted);
}

/* Klachtenregeling */

.steps{
  padding:16px 0 72px 0;

  background:var(--theme-tint);
}

.step-num{
  font-family:'Bodoni Moda', serif;

  font-size:30px;
  font-weight:500;

  line-height:1;
}

.step a::before{
  content:"→";

  color:var(--theme-softaccent);

  margin-right:8px;
}

/* Alleen mobiel */

@media(max-width:639px){

  h1.name{
    font-size:49.5px;
  }
}

/* Desktop */

@media(min-width:640px){

  .home .hero{
    padding:80px 0 96px 0;
  }

  .band{
    gap:12px;
    padding:0 6vw;
  }

  .band .inner{
    width:auto;
    max-width:none;

    margin:0;
    padding:96px 0;

    display:flex;
    align-items:center;

    text-align:left;
  }

  .slogan{
    font-size:clamp(32px,4.2vw,40px);
    text-align:left;
  }

  .band-photo{
    height:346px;
    width:auto;
    max-width:42%;

    align-self:flex-end;

    object-fit:contain;
    object-position:bottom;
  }

  .bio{
    padding:96px 0;
  }

  .cta-band{
    padding:96px 0;
  }

  .page-hero{
    padding:80px 0 64px 0;
  }
}