:root{--ink:#101512;--paper:#f4f1e9;--cream:#e8e1d4;--green:#496b59;--green-dark:#213d31;--wood:#b66a2d;--white:#fff;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.55}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
.site-header{height:92px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;padding:0 max(24px,calc((100vw - var(--max))/2));color:white;background:linear-gradient(180deg,rgba(5,9,6,.82),rgba(5,9,6,.25),transparent)}.brand{width:210px;display:flex;align-items:center;line-height:1;color:white}.brand-copy{display:grid;text-align:center;letter-spacing:.32em}.brand-kicker{font-size:12px;padding:0 0 8px;border-bottom:1px solid rgba(255,255,255,.75)}.brand-name{font-size:16px;letter-spacing:.55em;padding:8px 0 0}.main-nav{display:flex;gap:29px;align-items:center;margin-left:auto;font-size:13px;font-weight:600}.main-nav a:not(.nav-cta){text-shadow:0 1px 8px rgba(0,0,0,.65)}.nav-cta{padding:12px 18px;background:var(--green-dark);border:1px solid rgba(255,255,255,.25);border-radius:7px}.menu-toggle{display:none}
.hero{min-height:700px;height:84vh;position:relative;color:white;display:flex;align-items:flex-end;overflow:hidden}.hero-media{position:absolute;inset:0;background:url('assets/hero.jpg') center center/cover no-repeat}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,10,.78) 0%,rgba(8,14,10,.42) 45%,rgba(8,14,10,.04) 76%),linear-gradient(0deg,rgba(8,14,10,.42),transparent 42%)}.hero-content{position:relative;z-index:2;padding-bottom:92px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.17em;margin:0 0 15px}.eyebrow.dark{color:var(--green-dark)}.eyebrow.light{color:#cadad2}.hero h1,.section h2,.modal h2{font-family:"DM Sans",sans-serif;font-weight:600;line-height:1.06;margin:0;letter-spacing:-.035em}.hero h1{font-size:clamp(46px,5.2vw,76px);max-width:680px}.hero h1 em{font-style:normal;font-weight:500;color:#dbe7dc}.hero-copy{font-size:18px;max-width:600px;margin:25px 0 30px;color:rgba(255,255,255,.88)}.hero-actions{display:flex;align-items:center;gap:30px}.button{border:0;border-radius:7px;padding:15px 22px;display:inline-flex;justify-content:center;align-items:center;gap:10px;font:600 14px "DM Sans",sans-serif;cursor:pointer;transition:.2s transform,.2s background}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--wood);color:white}.button-light{background:white;color:var(--ink)}.text-link{font-weight:600;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px}.hero-note{position:absolute;z-index:2;bottom:25px;right:max(24px,calc((100vw - var(--max))/2));font-size:12px;color:rgba(255,255,255,.7)}
.section{padding:95px 0}.section h2{font-size:clamp(34px,4vw,55px)}.teachers{background:#ebe8e0}.section-heading{display:grid;grid-template-columns:1fr .7fr;gap:80px;align-items:end}.section-heading>p{font-size:16px;color:#555d57}.teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px}.teacher-card{position:relative;height:480px;overflow:hidden;background:#222;border-radius:3px}.teacher-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.teacher-card:hover img{transform:scale(1.02)}.teacher-meta{position:absolute;left:0;right:0;bottom:0;padding:70px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:white}.teacher-meta h3{font:600 26px "DM Sans",sans-serif;margin:0 0 2px}.teacher-meta p{margin:0;font-size:13px;color:rgba(255,255,255,.75)}
.music-word{color:var(--green)}.music-staff{height:54px;margin-top:20px;display:flex;align-items:center;max-width:420px;overflow:hidden}.treble{font-family:"Times New Roman",serif;font-size:61px;line-height:1;color:var(--green-dark);width:47px;z-index:1}.staff-lines{position:relative;display:flex;flex-direction:column;gap:6px;flex:1}.staff-lines:after{content:"";position:absolute;inset:-5px 0 -5px 45%;background:linear-gradient(90deg,transparent,var(--paper))}.staff-lines i{height:1px;background:linear-gradient(90deg,var(--green-dark),#b66a2d 48%,transparent);display:block}.intro-grid{display:grid;grid-template-columns:1fr .85fr;gap:85px;align-items:end}.intro-copy{font-size:17px;color:#3d443f}.lesson-cards{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border-top:1px solid #cfc9bd}.lesson-card{padding:28px 24px 5px 0;border-right:1px solid #cfc9bd;min-height:200px}.lesson-card+.lesson-card{padding-left:24px}.lesson-card span{font-size:11px;color:var(--green);font-weight:700}.lesson-card h3{font:600 23px "DM Sans",sans-serif;margin:6px 0 10px}.lesson-card p{font-size:14px;color:#5d615e}

.photo-break{height:340px;position:relative;overflow:hidden;background:#111}.photo-break-image{position:absolute;left:0;right:0;top:-13%;height:126%;background-position:center;background-size:cover;will-change:transform}.photo-break-case .photo-break-image{background-image:linear-gradient(90deg,rgba(10,15,12,.10),rgba(10,15,12,.02)),url('assets/case.jpg');background-position:center 48%}.photo-break-atmosphere{height:300px}.photo-break-atmosphere .photo-break-image{background-image:linear-gradient(90deg,rgba(10,15,12,.06),rgba(10,15,12,.02)),url('assets/atmosphere.jpg');background-position:center 38%}

.community{background:var(--paper);padding-top:60px}.community-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:75px;align-items:center}.community-image img{width:100%;aspect-ratio:1.4/1;object-fit:cover}.community-copy p:not(.eyebrow){font-size:17px;color:#515752;max-width:520px;margin:24px 0}.dark-link{border-color:#999}.pricing{background:var(--green-dark);color:white}.pricing-grid{display:grid;grid-template-columns:1fr 400px;gap:110px;align-items:center}.pricing-copy{font-size:17px;color:#c1cec7;max-width:620px}.price-card{border:1px solid rgba(255,255,255,.28);padding:34px}.price-label{font-size:11px;letter-spacing:.17em;font-weight:700}.price{font:600 76px/1 "DM Sans",sans-serif;margin:18px 0}.price-card p{color:#c7d3cc;margin-bottom:26px}.proefles{background:#f6f3ec}.proefles-grid{display:grid;grid-template-columns:.85fr .75fr;gap:90px}.proefles-grid>div>p:not(.eyebrow){font-size:17px;color:#535954;max-width:520px}.detail-img{margin-top:42px;width:100%;height:300px;object-fit:cover}.lead-form{background:white;padding:36px;box-shadow:0 20px 70px rgba(23,31,26,.08)}label{display:block;font-size:13px;font-weight:600;margin-bottom:18px}label span{font-weight:400;color:#7b817d}input,select{width:100%;border:0;border-bottom:1px solid #bbb;background:transparent;font:inherit;padding:11px 0;outline:none;border-radius:0}input:focus,select:focus{border-color:var(--green-dark)}.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;font-weight:400;color:#626762}.consent input{width:15px;margin-top:2px}.full{width:100%}.form-note{font-size:11px;text-align:center;color:#777}.form-success{font-size:13px;background:#e7f1eb;padding:12px;margin-top:14px}footer{background:var(--ink);color:white;padding:48px 0}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:70px}.footer-grid div{display:flex;flex-direction:column;gap:9px}.footer-grid span,.footer-grid a{font-size:13px;color:rgba(255,255,255,.62)}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(9,13,10,.62);display:none;align-items:center;justify-content:center;padding:24px}.modal-backdrop.open{display:flex}.modal{background:var(--paper);width:min(520px,100%);padding:42px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.25)}.modal h2{font-size:38px}.modal>p:not(.eyebrow){color:#555;margin:20px 0 26px}.modal-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:32px;cursor:pointer}.modal form>input{background:white;padding:15px;margin-bottom:12px;border:1px solid #cfc8bd}.compact{margin-top:14px}
@media(max-width:850px){.wrap{width:min(calc(100% - 32px),var(--max))}.site-header{height:76px;padding:0 16px}.brand{width:155px}.brand-kicker{font-size:9px}.brand-name{font-size:11px}.menu-toggle{display:block;background:rgba(16,21,18,.72);color:white;border:1px solid rgba(255,255,255,.65);border-radius:6px;padding:9px 13px;font-weight:600}.main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:rgba(16,21,18,.98);padding:24px;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.nav-cta{text-align:center}.hero{height:auto;min-height:700px}.hero-media{background-position:58% center}.hero-overlay{background:linear-gradient(0deg,rgba(8,14,10,.82),rgba(8,14,10,.15))}.hero-content{padding-bottom:90px}.hero h1{font-size:48px}.hero-copy{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-note{left:16px;right:auto;font-size:11px}.section{padding:70px 0}.section-heading,.intro-grid,.community-grid,.pricing-grid,.proefles-grid{grid-template-columns:1fr;gap:32px}.teacher-grid{grid-template-columns:1fr;gap:14px}.teacher-card{height:470px}.lesson-cards{grid-template-columns:1fr 1fr;margin-top:45px}.lesson-card{min-height:180px}.pricing-grid{gap:35px}.price-card{max-width:520px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-grid>div:first-child{grid-column:1/-1}.modal{padding:34px 26px}.modal h2{font-size:34px}}
@media(max-width:520px){.hero h1{font-size:42px}.lesson-cards{grid-template-columns:1fr}.lesson-card,.lesson-card+.lesson-card{padding-left:0;border-right:0;border-bottom:1px solid #cfc9bd}.section h2{font-size:36px}.teacher-card{height:410px}.lead-form{padding:26px 20px}.price{font-size:66px}}

@media(max-width:850px){.photo-break{height:240px}.photo-break-atmosphere{height:220px}.photo-break-image{top:-8%;height:116%}}
@media(prefers-reduced-motion:reduce){.photo-break-image{transform:none!important}}

/* Logo gebaseerd op het aangeleverde Gitaarschool Tijn ontwerp */
.brand{width:330px;max-width:30vw}.brand-logo{display:block;width:100%;height:auto;mix-blend-mode:screen}.brand-copy{display:none}@media(max-width:850px){.brand{width:235px;max-width:68vw}}

/* Formulierstatus + eenvoudige anti-spam honeypot */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-error{font-size:13px;background:#f7e5e2;color:#7b2e24;padding:12px;margin-top:14px}
button:disabled{opacity:.65;cursor:wait;transform:none!important}