/* Rijschool Talander — Bergen NH.
   Concept: DE L IN HUN NAAM. Ze schrijven zichzelf als "Ta L ander" — het L-plaatje zit
   letterlijk in hun merknaam. Dat plaatje is hier het accent in koppen, het baken in lijsten
   en de badge op elke instructeursfoto. Grond: duin en bos rond Bergen — diep bosgroen als
   inkt, zandpapier als vlak, hun eigen bordblauw als merkkleur. */

@font-face{font-family:'Kop';src:url('outfit-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Kop';src:url('outfit-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Tekst';src:url('figtree-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tekst';src:url('figtree-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --inkt:#1C2C24;            /* diep bosgroen */
  --zacht:#4A5C52;
  --papier:#F2F0E7;          /* zand */
  --papier-diep:#E7E3D6;
  --wit:#FFFFFF;
  --merk:#1E6FBF;            /* het blauw van hun daklichtbak */
  --merk-diep:#155493;
  --merk-licht:#E4EFF9;
  --mos:#7C9A6E;
  --lijn:rgba(28,44,36,.15);
  --maat:min(1180px,92vw);
  --schaduw:0 24px 50px -30px rgba(28,44,36,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:'Tekst',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
figure{margin:0}
.maat{width:var(--maat);margin-inline:auto}
h1,h2,h3{font-family:'Kop',system-ui,sans-serif;font-weight:800;line-height:1.06;
  letter-spacing:-.028em;margin:0;text-wrap:balance}

/* ── HET L-PLAATJE — hun eigen merkteken, in drie maten ───────────── */
.lp{display:inline-grid;place-items:center;background:var(--merk);color:#fff;
  font-family:'Kop';font-weight:800;line-height:1;border-radius:4px;flex:none;
  width:.78em;height:.92em;font-size:.72em;transform:translateY(-.06em)}
h1 .lp,h2 .lp{border-radius:6px}
.lp-s{width:22px;height:26px;font-size:15px;border-radius:5px}
.lp-m{width:30px;height:36px;font-size:20px;border-radius:6px}

/* ── kop ──────────────────────────────────────────────────────────── */
.kop{position:sticky;top:0;z-index:40;background:rgba(242,240,231,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.kop-rij{display:flex;align-items:center;gap:1rem;padding-block:.78rem}
.merk{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto;min-width:0}
.merk-naam{font-family:'Kop';font-weight:800;font-size:19px;letter-spacing:-.03em;
  display:flex;align-items:center;gap:.08em}
.merk-sub{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--zacht);
  display:block;font-family:'Tekst';font-weight:400;letter-spacing:.11em}
.nav{display:flex;gap:1.25rem;align-items:center}
.nav a{text-decoration:none;font-size:15px;padding-block:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--merk)}
.knop{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:700;
  padding:.82rem 1.5rem;border-radius:999px;border:2px solid var(--inkt);
  transition:box-shadow .14s ease,background .14s ease,color .14s ease}
.knop:hover{box-shadow:0 0 0 4px rgba(30,111,191,.18)}
.knop-vol{background:var(--inkt);color:var(--wit);border-color:var(--inkt)}
.knop-vol:hover{background:var(--merk-diep);border-color:var(--merk-diep)}
.knop-open:hover{background:var(--inkt);color:var(--wit)}
.hamburger{display:none;width:42px;height:38px;border:1.5px solid var(--inkt);border-radius:9px;
  background:transparent;position:relative;cursor:pointer}
.hamburger i,.hamburger i::before,.hamburger i::after{position:absolute;height:2px;background:var(--inkt);border-radius:2px}
.hamburger i{left:10px;right:10px;top:50%;margin-top:-1px}
.hamburger i::before,.hamburger i::after{content:'';left:0;right:0}
.hamburger i::before{top:-7px}
.hamburger i::after{top:7px}
.paneel{display:none;border-top:1px solid var(--lijn);background:var(--papier);padding:1rem 0 1.4rem}
.paneel.open{display:block}
.paneel a:not(.knop){display:block;text-decoration:none;padding:.92rem 0;border-bottom:1px solid var(--lijn);font-size:17.5px}
.paneel-voet{margin:1.2rem 0 0;font-size:14px;color:var(--zacht);line-height:1.5}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:3.4rem 3.6rem;isolation:isolate;
  background-image:radial-gradient(48% 52% at 88% 12%, rgba(124,154,110,.20), transparent 68%)}
/* het licht schuift langzaam over het duin — de doorlopende beweging die de RIJK-regel vraagt,
   op een klein oppervlak zodat hij binnen het motion-budget blijft */
.strijklicht{position:absolute;left:-10%;top:-30%;width:46%;height:160%;z-index:-1;display:block;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side, rgba(30,111,191,.14), transparent 72%);
  animation:strijklicht 18s ease-in-out infinite}
@keyframes strijklicht{0%,100%{transform:translateX(0) scale(1);opacity:.7}50%{transform:translateX(26%) scale(1.08);opacity:1}}
.hero-rij{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.kicker{display:flex;align-items:center;gap:.55rem;font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--zacht);margin:0 0 1rem}
h1{font-size:clamp(38px,5.2vw,68px)}
.leid{font-size:clamp(17px,1.5vw,19.5px);color:var(--zacht);max-width:37ch;margin:1.1rem 0 0}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.feiten{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:2rem 0 0;padding:1.3rem 0 0;
  border-top:1px solid var(--lijn);list-style:none}
.feiten li{display:flex;align-items:center;gap:.5rem;font-size:14.5px;color:var(--zacht)}
.feiten b{color:var(--inkt);font-weight:700}
.hero-foto{position:relative}
.hero-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;
  box-shadow:var(--schaduw)}
.hero-badge{position:absolute;left:-14px;bottom:-14px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:12px;padding:.75rem 1rem;
  box-shadow:0 16px 34px -22px rgba(28,44,36,.7);display:flex;align-items:center;gap:.7rem;max-width:88%}
.hero-badge b{font-family:'Kop';font-weight:600;font-size:15px;display:block;letter-spacing:-.01em}
.hero-badge span{font-size:12.5px;color:var(--zacht)}

/* ── band ─────────────────────────────────────────────────────────── */
.band{background:var(--inkt);color:var(--wit);
  background-image:linear-gradient(100deg, rgba(255,255,255,.07), transparent 45%, rgba(30,111,191,.2))}
.band-rij{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-block:1.1rem}
.band-item{display:flex;align-items:baseline;gap:.5rem;font-size:14px;color:rgba(255,255,255,.72);white-space:nowrap}
.band-item b{font-family:'Kop';font-weight:800;font-size:20px;color:var(--wit);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.band-slot{margin-left:auto}
.band-slot a{color:var(--wit);text-decoration:none;font-weight:700;font-size:14.5px;
  border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:2px}

/* ── secties ──────────────────────────────────────────────────────── */
section{padding-block:4.2rem}
.vlak-wit{background:var(--wit);border-block:1px solid var(--lijn)}
h2{font-size:clamp(27px,3.3vw,42px)}
.sec-kop{max-width:56ch}
.sec-rij{display:grid;grid-template-columns:1fr .8fr;gap:3.2rem;align-items:start}

/* HET TEAM — acht gezichten, elk met zijn eigen auto */
#team{background-image:radial-gradient(50% 44% at 6% 8%, rgba(30,111,191,.09), transparent 70%)}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.4rem;list-style:none;padding:0}
.team li{position:relative}
.team img{width:100%;aspect-ratio:300/345;object-fit:cover;border-radius:12px;
  box-shadow:0 16px 34px -26px rgba(28,44,36,.8)}
.team figcaption,.team .naam{display:flex;align-items:center;gap:.45rem;margin-top:.6rem;
  font-family:'Kop';font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.team .rol{display:block;font-family:'Tekst';font-weight:400;font-size:13px;color:var(--zacht);margin-top:.1rem}

/* stappen */
.stappen{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem}
.stappen li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.stappen b.t{display:block;font-family:'Kop';font-weight:600;font-size:18.5px;letter-spacing:-.01em}
.stappen p{margin:.3rem 0 0;color:var(--zacht);font-size:16px}
.stappen a{color:var(--merk-diep);font-weight:700}
.nr{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--merk);color:#fff;font-family:'Kop';font-weight:800;font-size:15px;flex:none;margin-top:.1rem}

/* tarieven */
#tarieven{background-image:radial-gradient(54% 46% at 92% 6%, rgba(124,154,110,.16), transparent 68%)}
.tarief-rij{display:grid;grid-template-columns:1.3fr .7fr;gap:2.6rem;align-items:start;margin-top:2.2rem}
.tabel{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabel th,.tabel td{text-align:left;padding:.72rem .6rem}
.tabel tbody tr:nth-child(odd) td{background:rgba(28,44,36,.035)}
.tabel thead th{font-family:'Kop';font-weight:600;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--zacht);border-bottom-width:2px}
.tabel td.prijs{text-align:right;font-weight:700;white-space:nowrap;font-family:'Kop'}
.tabel tr.uit td{background:var(--merk-licht)}
.tabel small{display:block;font-size:13.5px;color:var(--zacht);font-weight:400}
.kaartje{background:var(--wit);border:1px solid var(--lijn);border-left:5px solid var(--merk);
  border-radius:0 14px 14px 0;padding:1.35rem 1.4rem}
.kaartje + .kaartje{margin-top:1rem}
.kaartje h3{font-family:'Kop';font-weight:600;font-size:18px;margin:0 0 .5rem;letter-spacing:-.01em}
.kaartje p{margin:0;font-size:15.5px;color:var(--zacht)}
.let-op{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.5rem;font-size:14.5px;color:var(--zacht)}

/* de eerlijkheids-vergelijking: hun eigen punt, groot gemaakt */
.uur{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.uur div{border:1px solid var(--lijn);border-radius:12px;padding:1.1rem;background:var(--wit)}
.uur .goed{border-color:var(--merk);background:var(--merk-licht)}
.uur b{display:block;font-family:'Kop';font-weight:800;font-size:26px;letter-spacing:-.02em}
.uur span{font-size:14px;color:var(--zacht)}

/* werkgebied */
.dorpen{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.dorpen li{background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:.42rem .95rem;
  font-size:14.5px;box-shadow:0 6px 14px -13px rgba(28,44,36,.6)}
.dorpen li.eigen{background:var(--merk);border-color:var(--merk);color:#fff;font-weight:700}

/* lijst */
.lijst{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.lijst li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;font-size:16px}
.lijst a{color:var(--merk-diep);font-weight:700}

/* contact */
.contact{background:var(--inkt);color:var(--wit);
  background-image:radial-gradient(56% 58% at 90% 8%, rgba(30,111,191,.3), transparent 66%)}
.contact h2{color:var(--wit)}
.contact .leid{color:rgba(255,255,255,.75)}
.contact-rij{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;margin-top:2rem}
.gegevens{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.gegevens li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start}
.gegevens b{display:block;font-family:'Kop';font-weight:600;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.gegevens span{font-size:17px}
.gegevens a{color:var(--wit);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.contact .knop{border-color:var(--wit);color:var(--wit)}
.contact .knop-vol{background:var(--wit);color:var(--inkt)}
.contact-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.contact .lp{background:var(--wit);color:var(--inkt)}

.voet{background:var(--papier-diep);border-top:1px solid var(--lijn);padding-block:1.5rem;
  font-size:14px;color:var(--zacht)}
.voet-rij{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
.voet .rechts{margin-left:auto}

.op{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.op.in{opacity:1;transform:none}
html:not(.js) .op{opacity:1;transform:none}

@media (max-width:900px){
  .nav,.kop .knop{display:none}
  .hamburger{display:block}
  .paneel.open{display:flex;flex-direction:column;min-height:calc(100dvh - 60px);padding-bottom:2rem}
  .paneel-voet{margin-top:auto;padding-top:1.4rem}
  .hero{padding-block:2.2rem 2.6rem}
  .hero-rij,.sec-rij,.tarief-rij,.contact-rij{grid-template-columns:1fr;gap:2rem}
  .hero-foto{order:-1}
  .hero-badge{left:0;bottom:-10px;max-width:calc(100% - 12px)}
  h1{font-size:clamp(31px,8.4vw,44px)}
  .leid{max-width:100%}
  .team{grid-template-columns:repeat(2,1fr);gap:1rem}
  section{padding-block:3.1rem}
  .band-slot{margin-left:0;width:100%}
  .voet .rechts{margin-left:0}
  .uur{grid-template-columns:1fr}
}
@media (max-width:380px){ .hero-knoppen .knop{width:100%;justify-content:center} }

/* de twee witte secties kregen geen eigen licht; elke kamer hoort er een te hebben */
#begin{background-image:radial-gradient(46% 48% at 4% 96%, rgba(124,154,110,.15), transparent 70%)}
#theorie{background-image:radial-gradient(50% 46% at 96% 10%, rgba(30,111,191,.08), transparent 70%)}