/* ==========================================================================
   Rijschool ZUKO — professionele regiopagina's
   Eén gedeelde, cachebare stijl voor alle lokale landingspagina's.
   ========================================================================== */

:root{
  --region-navy:#12283f;
  --region-navy-2:#0b1e30;
  --region-orange:#ff6a1a;
  --region-orange-dark:#e85d0d;
  --region-orange-soft:#fff1e8;
  --region-ink:#10233a;
  --region-muted:#64758a;
  --region-line:#dfe7ef;
  --region-soft:#f5f8fb;
  --region-white:#fff;
  --region-shadow:0 24px 65px rgba(18,40,63,.12);
}

.region-page{
  overflow-x:hidden;
}

.region-page .topbar-phone{
  color:inherit;
  text-decoration:none;
}

.region-page .topbar-phone:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.region-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-bottom:1.1rem;
  color:var(--region-muted);
  font-size:.78rem;
  font-weight:700;
}

.region-breadcrumb a{
  color:var(--region-navy);
  text-decoration:none;
}

.region-breadcrumb a:hover{
  color:var(--region-orange-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.region-breadcrumb span[aria-current="page"]{
  color:var(--region-orange-dark);
}

.region-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(4.25rem,8vw,7.25rem) 0 clamp(5rem,8vw,7.5rem);
  background:
    radial-gradient(circle at 82% 18%,rgba(255,106,26,.13),transparent 29%),
    linear-gradient(135deg,#fff 0%,#f8fafc 56%,#edf3f8 100%);
}

.region-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(18,40,63,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,40,63,.032) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%);
  pointer-events:none;
}

.region-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(330px,.96fr);
  align-items:center;
  gap:clamp(2.6rem,6vw,6.2rem);
}

.region-hero h1{
  max-width:14ch;
  margin:.6rem 0 1.2rem;
  color:var(--region-ink);
  font-size:clamp(2.65rem,5.7vw,5.1rem);
  line-height:1;
  letter-spacing:-.052em;
  text-wrap:balance;
}

.region-hero .lead{
  max-width:43rem;
  color:var(--region-muted);
  font-size:clamp(1.05rem,2vw,1.22rem);
  line-height:1.7;
}

.region-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin:1.55rem 0 1.9rem;
}

.region-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.63rem .9rem;
  border:1px solid rgba(18,40,63,.1);
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 30px rgba(18,40,63,.055);
  color:var(--region-ink);
  font-size:.87rem;
  font-weight:750;
}

.region-visual{
  position:relative;
  min-height:465px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,106,26,.22),transparent 30%),
    linear-gradient(155deg,var(--region-navy) 0%,var(--region-navy-2) 100%);
  box-shadow:0 34px 78px rgba(18,40,63,.25);
}

.region-visual::after{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-82px;
  bottom:64px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(255,255,255,.025),
    0 0 0 84px rgba(255,255,255,.018);
  pointer-events:none;
}

.region-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(1.9rem,4vw,3rem);
}

.region-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.86),transparent);
  pointer-events:none;
}

.region-panel>*{
  position:relative;
  z-index:1;
}

.region-panel-label{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  width:max-content;
  padding:.54rem .78rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.region-panel-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--region-orange);
  box-shadow:0 0 0 5px rgba(255,106,26,.15);
}

.region-panel-city{
  margin:1.7rem 0 .9rem;
  color:#fff;
  font-family:var(--font-head);
  font-size:clamp(2.7rem,6.3vw,5.15rem);
  font-weight:800;
  line-height:.97;
  letter-spacing:-.052em;
  overflow-wrap:anywhere;
}

.region-panel-intro{
  max-width:29rem;
  margin:0;
  color:#dce7ef;
  font-size:1rem;
}

.region-panel-list{
  display:grid;
  gap:.72rem;
  margin:1.8rem 0 5.3rem;
}

.region-panel-item{
  display:flex;
  align-items:center;
  gap:.78rem;
  color:#fff;
  font-weight:700;
}

.region-panel-item span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 auto;
  border-radius:10px;
  background:rgba(255,106,26,.16);
  color:#ffab7d;
  font-size:.86rem;
}

.visual-note{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.2rem;
  border:1px solid rgba(255,255,255,.45);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 38px rgba(0,0,0,.15);
  backdrop-filter:blur(16px);
}

.visual-note strong{
  display:block;
  color:var(--region-ink);
  font-size:1rem;
}

.visual-note span{
  color:var(--region-muted);
  font-size:.87rem;
}

.visual-note .more-link{
  color:var(--region-orange-dark);
  font-weight:850;
  white-space:nowrap;
}

.region-strip{
  position:relative;
  z-index:3;
  margin-top:-2rem;
}

.region-strip-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border:1px solid var(--region-line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--region-shadow);
}

.region-stat{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.45rem 1.55rem;
}

.region-stat+.region-stat{
  border-left:1px solid var(--region-line);
}

.region-stat svg{
  width:29px;
  height:29px;
  flex:0 0 auto;
  color:var(--region-orange);
}

.region-stat strong{
  display:block;
  color:var(--region-ink);
  font-size:1rem;
}

.region-stat span{
  color:var(--region-muted);
  font-size:.88rem;
}

.region-section{
  padding:clamp(4.5rem,7vw,7rem) 0;
}

.region-section.soft{
  background:var(--region-soft);
}

.region-copy-grid{
  display:grid;
  grid-template-columns:.98fr 1.02fr;
  align-items:start;
  gap:clamp(2.7rem,6vw,6rem);
}

.region-copy-grid>div{
  position:relative;
  padding-top:1.2rem;
}

.region-copy-grid>div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:48px;
  height:4px;
  border-radius:999px;
  background:var(--region-orange);
}

.region-copy-grid h2,
.region-local-copy h2,
.region-nearby h2{
  margin:.52rem 0 1.1rem;
  color:var(--region-ink);
  font-size:clamp(2rem,4vw,3.12rem);
  line-height:1.08;
  letter-spacing:-.034em;
  text-wrap:balance;
}

.region-copy-grid p,
.region-local-copy p{
  color:var(--region-muted);
  font-size:1.04rem;
  line-height:1.75;
}

.region-skill-list{
  display:grid;
  gap:.78rem;
  margin:1.4rem 0 0;
  padding:0;
  list-style:none;
}

.region-skill-list li{
  display:flex;
  gap:.78rem;
  align-items:flex-start;
  padding:.9rem .95rem;
  border:1px solid var(--region-line);
  border-radius:15px;
  background:#fff;
}

.region-skill-list__icon{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 auto;
  border-radius:9px;
  background:var(--region-orange-soft);
  color:var(--region-orange-dark);
  font-weight:900;
}

.region-skill-list__copy{
  display:grid;
  gap:.14rem;
}

.region-skill-list__copy strong{
  color:var(--region-ink);
  font-size:.93rem;
}

.region-skill-list__copy span{
  color:var(--region-muted);
  font-size:.87rem;
  line-height:1.5;
}

.region-quote{
  margin-top:1.45rem;
  padding:1.45rem 1.5rem;
  border-left:4px solid var(--region-orange);
  border-radius:0 18px 18px 0;
  background:var(--region-navy);
  box-shadow:0 18px 40px rgba(18,40,63,.13);
}

.region-quote p{
  margin:0;
  color:#fff;
  font-weight:650;
}

.region-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.15rem;
}

.region-card{
  position:relative;
  overflow:hidden;
  padding:1.75rem;
  border:1px solid var(--region-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 15px 38px rgba(18,40,63,.055);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.region-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--region-orange),#ff9b65);
}

.region-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,106,26,.25);
  box-shadow:0 24px 50px rgba(18,40,63,.105);
}

.region-card .icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  margin-bottom:1.15rem;
  border-radius:15px;
  background:var(--region-orange-soft);
  color:var(--region-orange);
}

.region-card svg{
  width:25px;
  height:25px;
}

.region-card h3{
  margin:.2rem 0 .68rem;
  color:var(--region-ink);
}

.region-card p{
  margin:0;
  color:var(--region-muted);
}

.region-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
  counter-reset:step;
}

.region-step{
  position:relative;
  min-height:238px;
  padding:1.9rem 1.7rem 1.7rem;
  border:1px solid var(--region-line);
  border-radius:24px;
  background:#fff;
  counter-increment:step;
  box-shadow:0 14px 36px rgba(18,40,63,.045);
}

.region-step::before{
  content:"0" counter(step);
  display:block;
  margin-bottom:1.75rem;
  color:var(--region-orange);
  font-family:var(--font-head);
  font-size:2.25rem;
  font-weight:800;
  line-height:1;
}

.region-step h3{
  margin:0 0 .68rem;
  color:var(--region-ink);
}

.region-step p{
  margin:0;
  color:var(--region-muted);
}

.region-local{
  padding:clamp(4.5rem,7vw,7rem) 0;
  background:#fff;
}

.region-local-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}

.region-local-points{
  display:grid;
  gap:.78rem;
  margin:1.45rem 0 0;
  padding:0;
  list-style:none;
}

.region-local-points li{
  display:flex;
  gap:.72rem;
  align-items:flex-start;
  color:var(--region-ink);
  font-weight:700;
}

.region-local-points li::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:9px;
  background:var(--region-orange-soft);
  color:var(--region-orange);
}

.region-exam-card{
  position:sticky;
  top:calc(var(--header-h,78px) + 1.5rem);
  padding:1.8rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:23px;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,106,26,.18),transparent 33%),
    linear-gradient(145deg,var(--region-navy),var(--region-navy-2));
  box-shadow:0 20px 48px rgba(18,40,63,.16);
}

.region-kicker-light{
  color:#ffab7d!important;
}

.region-exam-card h3{
  margin:.2rem 0 .8rem;
  color:#fff;
  font-size:1.45rem;
}

.region-exam-card p{
  margin:0;
  color:#dce7ef;
  line-height:1.7;
}

.region-nearby{
  padding:clamp(4.5rem,7vw,6.4rem) 0;
  background:var(--region-soft);
}

.region-nearby-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.9rem;
  margin-top:1.9rem;
}

.region-nearby-grid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  min-height:78px;
  padding:1rem 1.05rem;
  border:1px solid var(--region-line);
  border-radius:16px;
  background:#fff;
  color:var(--region-ink);
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(18,40,63,.045);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.region-nearby-grid a:hover{
  transform:translateY(-3px);
  border-color:rgba(255,106,26,.32);
  box-shadow:0 18px 34px rgba(18,40,63,.08);
}

.region-nearby-grid a span{
  color:var(--region-orange);
}

.region-faq{
  padding:clamp(4.5rem,7vw,7rem) 0;
  background:#fff;
}

.region-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1.8rem;
}

.region-faq-item{
  padding:1.45rem 1.5rem;
  border:1px solid var(--region-line);
  border-radius:19px;
  background:#fff;
  box-shadow:0 12px 30px rgba(18,40,63,.045);
}

.region-faq-item h3{
  margin:0 0 .58rem;
  color:var(--region-ink);
  font-size:1.02rem;
}

.region-faq-item p{
  margin:0;
  color:var(--region-muted);
  line-height:1.65;
}

.region-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(4.15rem,7vw,6.5rem) 0;
  background:linear-gradient(135deg,var(--region-navy) 0%,#183f5d 100%);
  color:#fff;
}

.region-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

.region-cta::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-120px;
  top:-150px;
  border-radius:50%;
  background:rgba(255,106,26,.18);
}

.region-cta-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2rem;
}

.region-cta h2{
  margin:0 0 .82rem;
  color:#fff;
  font-size:clamp(2rem,4vw,3.35rem);
  text-wrap:balance;
}

.region-cta p{
  max-width:45rem;
  margin:0;
  color:#dbe5ef;
}

.region-cta .actions{
  margin:0;
  justify-content:flex-end;
}

.btn-region-light{
  border-color:var(--region-orange)!important;
  background:var(--region-orange)!important;
  color:#fff!important;
}

.btn-region-light:hover{
  border-color:var(--region-orange-dark)!important;
  background:var(--region-orange-dark)!important;
}

.btn-region-outline{
  border-color:rgba(255,255,255,.58)!important;
  background:transparent!important;
  color:#fff!important;
}

.btn-region-outline:hover{
  border-color:#fff!important;
  background:#fff!important;
  color:var(--region-navy)!important;
}

.region-page a:focus-visible,
.region-page button:focus-visible{
  outline:3px solid rgba(255,106,26,.3);
  outline-offset:3px;
}

@media(max-width:1000px){
  .region-nearby-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .region-hero-grid,
  .region-copy-grid,
  .region-local-grid,
  .region-cta-grid{
    grid-template-columns:1fr;
  }

  .region-visual{
    min-height:430px;
  }

  .region-strip-inner,
  .region-cards,
  .region-steps{
    grid-template-columns:1fr;
  }

  .region-stat+.region-stat{
    border-top:1px solid var(--region-line);
    border-left:0;
  }

  .region-exam-card{
    position:relative;
    top:auto;
  }

  .region-cta .actions{
    justify-content:flex-start;
  }
}

@media(max-width:650px){
  .region-hero{
    padding-top:3.15rem;
  }

  .region-hero h1{
    max-width:none;
    font-size:clamp(2.35rem,11vw,3rem);
  }

  .region-visual{
    min-height:405px;
    border-radius:25px;
  }

  .region-panel{
    padding:1.45rem;
  }

  .region-panel-city{
    font-size:clamp(2.55rem,14vw,3.45rem);
  }

  .region-panel-list{
    margin-bottom:6rem;
  }

  .region-badges{
    gap:.48rem;
  }

  .region-badge{
    padding:.58rem .75rem;
    font-size:.8rem;
  }

  .visual-note{
    align-items:flex-start;
    flex-direction:column;
  }

  .region-card,
  .region-step{
    padding:1.4rem;
  }

  .region-step{
    min-height:auto;
  }

  .region-nearby-grid,
  .region-faq-grid{
    grid-template-columns:1fr;
  }

  .region-nearby-grid a{
    min-height:64px;
  }

  .region-cta .actions{
    display:grid;
    width:100%;
  }

  .region-cta .actions .btn{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  .region-page *,
  .region-page *::before,
  .region-page *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .region-card:hover,
  .region-nearby-grid a:hover{
    transform:none;
  }
}


/* ==========================================================================
   ZUKO regiopagina eindronde — inhoudelijke verfijning en mobiele kaartfix
   ========================================================================== */
.region-local-signature{margin-top:1.25rem;padding:1.1rem 1.15rem;border:1px solid rgba(255,106,26,.18);border-radius:17px;background:linear-gradient(135deg,#fff8f3,#fff);}
.region-local-signature h3{margin:0 0 .35rem;color:var(--region-ink);font-size:1rem;}
.region-local-signature p{margin:0;color:var(--region-muted);font-size:.92rem;line-height:1.65;}
.region-city-depth{padding:clamp(4.5rem,7vw,7rem) 0;background:radial-gradient(circle at 12% 10%,rgba(255,106,26,.07),transparent 28%),#fff;}
.region-city-depth .section-head{max-width:790px;margin-inline:auto;}
.region-city-depth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem;}
.region-city-depth-card{position:relative;min-height:225px;padding:1.55rem;overflow:hidden;border:1px solid var(--region-line);border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(18,40,63,.055);}
.region-city-depth-card:after{content:"";position:absolute;width:105px;height:105px;right:-50px;bottom:-52px;border-radius:50%;background:var(--region-orange-soft);}
.region-city-depth-card__number{display:inline-flex;margin-bottom:1.1rem;color:var(--region-orange);font-family:var(--font-head);font-size:1.2rem;font-weight:800;}
.region-city-depth-card h3{position:relative;z-index:1;margin:0 0 .65rem;color:var(--region-ink);font-size:1.04rem;}
.region-city-depth-card p{position:relative;z-index:1;margin:0;color:var(--region-muted);line-height:1.65;}
@media(max-width:1000px){.region-city-depth-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){
 .region-hero{padding-bottom:2.6rem;}
 .region-visual{min-height:0;height:auto;}
 .region-panel{display:block;}
 .region-panel-list{margin:1.45rem 0 0;}
 .visual-note{position:static;left:auto;right:auto;bottom:auto;width:100%;margin-top:1.3rem;padding:1rem 1.05rem;box-shadow:0 12px 28px rgba(0,0,0,.13);}
 .visual-note .more-link{align-self:flex-start;}
 .region-strip{margin-top:1.15rem;}
 .region-city-depth-grid{grid-template-columns:1fr;}
 .region-city-depth-card{min-height:auto;}
}