:root{--accent:#C6A043;--ink:#222;--muted:#707070;--line:#e8e8e8;--bg:#fff;--soft:#f5f5f5;--dark:#202225;--max:1180px;--radius:0px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7;background:#fff}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.narrow{max-width:900px}.site-header{height:86px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);position:relative;z-index:50}.header-inner{height:100%;width:min(calc(100% - 48px),1320px);margin:auto;display:flex;align-items:center;gap:34px}.brand{display:inline-flex;flex-direction:column;line-height:.9;font-weight:800;letter-spacing:.08em;min-width:118px}.brand span{font-size:23px}.brand small{font-size:9px;letter-spacing:.24em;margin-top:8px}.main-nav{margin-left:auto}.main-nav>ul{display:flex;list-style:none;padding:0;margin:0;gap:30px;align-items:center}.main-nav a{font-size:13px;font-weight:700;transition:.2s}.main-nav a:hover{color:var(--accent)}.has-sub{position:relative;display:flex;align-items:center}.sub-toggle{display:none}.sub-menu{display:none;position:absolute;top:100%;left:-18px;min-width:270px;background:#fff;padding:13px 0;list-style:none;margin:20px 0 0;box-shadow:0 14px 40px rgba(0,0,0,.13);border-top:3px solid var(--accent)}.sub-menu:before{content:"";position:absolute;height:22px;top:-22px;left:0;right:0}.has-sub:hover>.sub-menu{display:block}.sub-menu li a{display:block;padding:8px 18px;font-size:12px}.phone{font-size:13px;font-weight:700;white-space:nowrap}.menu-toggle{display:none;border:0;background:none;padding:8px}.menu-toggle span{display:block;width:24px;height:2px;background:#222;margin:5px}
.page-hero{padding:74px 0 54px;background:#f7f7f7;border-bottom:1px solid #eee}.page-hero h1{font-size:42px;line-height:1.15;margin:0;font-weight:700;letter-spacing:-.03em}.content-flow{padding:40px 0 20px}.split-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.86fr);gap:72px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}.split-section.reverse .split-copy{order:2}.split-section.reverse .image-placeholder{order:1}.split-copy h2{font-size:30px;line-height:1.2;margin:0 0 22px}.split-copy p{margin:0 0 16px;color:#4d4d4d}.check-list{padding-left:0;list-style:none;margin:18px 0}.check-list li{padding:8px 0 8px 28px;position:relative;border-bottom:1px solid #eee}.check-list li:before{content:"✓";position:absolute;left:2px;color:var(--accent);font-weight:700}.image-placeholder{aspect-ratio:4/3;background:linear-gradient(135deg,#e8e8e8,#f8f8f8);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid #e0e0e0;color:#969696;min-height:280px}.image-placeholder span{font-size:11px;letter-spacing:.18em;font-weight:800}.image-placeholder small{margin-top:10px;max-width:75%}.contact-band{grid-column:1/-1;background:var(--accent);color:#fff;margin:30px calc(50% - 50vw);padding:44px 0}.contact-band-grid{display:flex;align-items:center;justify-content:space-between;gap:32px}.contact-band h2{margin:0 0 6px;font-size:28px}.contact-band p{margin:0;opacity:.95}.button-row{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-block;border:2px solid var(--accent);background:var(--accent);color:#fff;padding:12px 23px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.btn-light{background:#fff;border-color:#fff;color:#333}.btn-outline-light{background:transparent;border-color:#fff;color:#fff}.form-section{padding:72px 0;background:#fafafa}.form-section h2{font-size:32px}.contact-form label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}input,textarea{width:100%;border:1px solid #ddd;background:#fff;padding:14px;margin-top:7px;font:inherit;outline:none}input:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical}.contact-form>label{margin:20px 0}.form-status{font-size:13px;color:var(--muted)}
.site-footer{background:#25272a;color:#c9c9c9;padding-top:60px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:50px}.site-footer h3{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.08em}.site-footer a:hover{color:#fff}.brand--footer{color:#fff}.footer-bottom{border-top:1px solid #3a3c3f;padding:20px 0;font-size:12px}
.hero-home{min-height:720px;display:flex;align-items:center;text-align:center;color:#fff;position:relative;background:linear-gradient(rgba(0,0,0,.44),rgba(0,0,0,.44)),linear-gradient(135deg,#7c7c7c,#333)}.hero-home .container{max-width:900px}.eyebrow{font-size:34px;color:var(--accent);font-weight:700;line-height:1.1}.hero-home h1{font-size:86px;line-height:.95;margin:10px 0 20px;letter-spacing:-.04em;text-transform:none}.hero-home h1 span{display:block}.hero-home p{font-size:20px;max-width:700px;margin:0 auto 30px}.intro{padding:88px 0}.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px}.intro h2,.section-title{font-size:38px;line-height:1.15;margin:0 0 24px}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:0;list-style:none}.feature-list li{padding:13px 0;border-bottom:1px solid #eaeaea;font-size:14px;font-weight:700}.feature-list li:before{content:"✓";color:var(--accent);margin-right:9px}.template-section{padding:84px 0;background:#f7f7f7}.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.testimonial{background:#fff;padding:32px;border:1px solid #eee}.avatar{width:58px;height:58px;border-radius:50%;background:#dedede;margin-bottom:18px}.testimonial strong{display:block}.testimonial small{color:#999}.testimonial p{font-size:14px;color:#666}.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd}.portfolio-card{min-height:230px;background:linear-gradient(135deg,#bdbdbd,#777);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:end}.portfolio-card h3{margin:0;font-size:19px}.portfolio-card p{margin:3px 0 0;font-size:12px}.more-about{padding:88px 0}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.blog-card{background:#fff}.blog-img{aspect-ratio:16/10;background:#ddd}.blog-card h3{font-size:20px;line-height:1.3}.blog-card p{font-size:14px;color:#666}.parent-hero{padding:100px 0;background:#f4f4f4;text-align:center}.parent-hero h1{font-size:52px;margin:0}.card-grid{padding:70px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.nav-card{border:1px solid #e6e6e6;padding:30px;min-height:170px;transition:.2s}.nav-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}.nav-card h2{font-size:23px;margin:0 0 10px}.nav-card span{color:var(--accent);font-weight:700;font-size:12px;text-transform:uppercase}.chair-hero{padding:90px 0 70px;background:#222;color:#fff}.chair-hero h1{font-size:58px;max-width:900px;line-height:1.05;margin:0 0 20px}.chair-hero p{font-size:19px;max-width:780px;color:#ddd}.accent-quote{border-left:4px solid var(--accent);padding:15px 22px;margin:35px 0;font-size:20px;font-weight:700}
@media(max-width:1024px){.phone{display:none}.main-nav>ul{gap:18px}.hero-home h1{font-size:70px}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.split-section{gap:40px}.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container,.header-inner{width:min(calc(100% - 32px),var(--max))}.site-header{height:70px}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;border-top:1px solid #eee;max-height:calc(100vh - 70px);overflow:auto}.main-nav.open{display:block}.main-nav>ul{display:block;padding:10px 16px}.main-nav li{border-bottom:1px solid #eee}.main-nav a{display:block;padding:14px 4px}.has-sub{display:block}.sub-toggle{display:block;position:absolute;right:0;top:7px;width:38px;height:38px;border:0;background:none}.sub-menu{display:none!important;position:static;box-shadow:none;border:0;margin:0;padding:0 0 8px 15px}.has-sub.open>.sub-menu{display:block!important}.hero-home{min-height:620px}.eyebrow{font-size:26px}.hero-home h1{font-size:52px}.hero-home p{font-size:17px}.intro-grid,.more-grid,.split-section{grid-template-columns:1fr}.split-section.reverse .split-copy,.split-section.reverse .image-placeholder{order:initial}.testimonials,.blog-grid,.form-grid{grid-template-columns:1fr}.contact-band-grid{display:block}.button-row{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.card-grid{grid-template-columns:1fr}.page-hero h1{font-size:34px}.chair-hero h1{font-size:43px}}
@media(max-width:480px){body{font-size:15px}.hero-home h1{font-size:44px}.feature-list{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.split-section{padding:42px 0}.split-copy h2{font-size:26px}.parent-hero h1{font-size:40px}.chair-hero h1{font-size:38px}}

/* Official photography supplied 2026-08-17 */
.hero-home--photo{background-image:linear-gradient(rgba(0,0,0,.44),rgba(0,0,0,.44)),url("../assets/images/landscape-hero.jpg");background-size:cover;background-position:center 42%}
.content-image{aspect-ratio:4/3;margin:0;min-height:280px;overflow:hidden;background:#eee}
.content-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.split-section:nth-of-type(4n+1) .content-image img{object-position:center 26%}
.split-section:nth-of-type(4n+2) .content-image img{object-position:center 38%}
.split-section:nth-of-type(4n+3) .content-image img{object-position:center 48%}
.portfolio-card{background-size:cover!important;background-position:center!important}
.blog-img{background-size:cover!important;background-position:center 35%!important}
.avatar{background-size:cover!important;background-position:center top!important}
@media(max-width:768px){.content-image{min-height:0;aspect-ratio:4/3}.hero-home--photo{background-position:center}}


/* Visual fidelity pass based on live-site screenshots, 2026-08-17 */
:root{--accent:#C6A043;--gold:#C6A043}

/* Gold replaces the temporary cyan accent everywhere. */
a:hover,.main-nav a:hover{color:var(--gold)}

/* Home header overlays the hero like the live page. */
.home-page .site-header{position:absolute;top:0;left:0;right:0;height:112px;background:transparent;border-bottom:0;color:#fff;z-index:100;transition:background .2s,height .2s,box-shadow .2s,color .2s}
.home-page .header-inner{width:min(calc(100% - 72px),1440px);gap:42px}
.home-page .brand{position:relative;min-width:276px;width:276px;height:96px;justify-content:center;color:#fff;font-weight:300;letter-spacing:.05em;line-height:.78;text-transform:none}
.home-page .brand span{font-size:63px;font-weight:300;letter-spacing:.075em;text-transform:none}
.home-page .brand small{font-size:15px;font-weight:300;letter-spacing:.18em;margin-top:17px;margin-left:18px;text-transform:none}
.home-page .brand:after{content:"";position:absolute;left:-8px;right:0;top:63px;height:3px;background:var(--gold)}
.home-page .main-nav{margin-left:8px}
.home-page .main-nav>ul{gap:37px}
.home-page .main-nav a{font-size:15px;font-weight:700;color:#fff}
.home-page .main-nav>ul>li:first-child>a{position:relative}
.home-page .main-nav>ul>li:first-child>a:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:#fff}
.home-page .phone{margin-left:auto;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;gap:13px}
.phone:before{content:"";display:inline-block;width:15px;height:27px;border:2px solid currentColor;border-radius:2px;box-sizing:border-box;box-shadow:inset 0 -4px 0 -3px currentColor}
.home-page .menu-toggle span{background:#fff}

/* Compact white sticky header after scrolling, matching the live page behavior. */
.home-page .site-header.scrolled{position:fixed;height:72px;background:#fff;color:#222;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.home-page .site-header.scrolled .brand{width:128px;min-width:128px;height:62px;color:#222;line-height:.8}
.home-page .site-header.scrolled .brand span{font-size:24px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.home-page .site-header.scrolled .brand small{font-size:8px;font-weight:700;letter-spacing:.24em;margin:8px 0 0;text-transform:uppercase}
.home-page .site-header.scrolled .brand:after{display:none}
.home-page .site-header.scrolled .main-nav{margin-left:auto}
.home-page .site-header.scrolled .main-nav a,.home-page .site-header.scrolled .phone{color:#222}
.home-page .site-header.scrolled .main-nav>ul>li:first-child>a:after{background:var(--gold);bottom:-11px}
.home-page .site-header.scrolled .menu-toggle span{background:#222}

/* Hero: warmer/darker, larger typography, lower text block, two solid gold CTAs. */
.hero-home.hero-home--photo{min-height:790px;padding:150px 0 52px;background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38)),url("../assets/images/landscape-hero.jpg");background-position:center 46%;align-items:center}
.hero-home .container{max-width:980px;transform:translateY(56px)}
.hero-home .eyebrow{font-family:Georgia,"Times New Roman",serif;font-size:48px;line-height:1.05;font-weight:700;color:var(--gold);margin-bottom:17px}
.hero-home h1{font-family:Arial,Helvetica,sans-serif;font-size:116px;line-height:1.05;font-weight:300;letter-spacing:-.035em;margin:0 0 34px}
.hero-home h1 span{display:block}
.hero-home .button-row{gap:28px!important}
.hero-home .btn{width:312px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;background:var(--gold);border-color:var(--gold);color:#fff;text-transform:none;letter-spacing:0;font-size:14px;padding:10px 24px}
.hero-home .btn-outline-light{background:var(--gold);border-color:var(--gold);color:#fff}
.hero-home .btn:hover{filter:brightness(.94);color:#fff}

/* Homepage "Wie zijn wij" section from the live layout. */
.home-intro{padding:58px 0 72px;background:#fff}
.home-intro .home-intro-title{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:68px;line-height:1.08;font-weight:700;color:#333;margin:0 0 32px;letter-spacing:.015em}
.home-intro .title-rule{width:138px;height:3px;background:var(--gold);margin:0 auto 88px}
.home-intro-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(520px,1fr);gap:70px;align-items:start}
.home-intro-copy{font-size:17px;line-height:1.7;color:#808080;padding-top:2px}
.home-intro-copy p{margin:0 0 22px}
.home-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,190px);gap:10px}
.home-photo-grid figure{margin:0;overflow:hidden;background:#eee}
.home-photo-grid img{width:100%;height:100%;object-fit:cover;display:block}
.home-photo-grid figure:nth-child(1) img{object-position:39% 42%}
.home-photo-grid figure:nth-child(2) img{object-position:50% 34%}
.home-photo-grid figure:nth-child(3) img{object-position:72% 32%}
.home-photo-grid figure:nth-child(4) img{object-position:35% 43%}
.home-photo-grid figure:nth-child(5) img{object-position:51% 42%}
.home-photo-grid figure:nth-child(6) img{object-position:70% 42%}
.home-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;row-gap:0;list-style:none;padding:0;margin:42px 0 0;max-width:760px}
.home-features li{position:relative;padding:9px 0 9px 31px;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.4;font-weight:700;color:#444;border:0}
.home-features li:before{content:"◆";position:absolute;left:0;top:9px;color:var(--gold);font-size:14px}

/* Inner-page live styling uses dark serif titles with short gold rules. */
.page-hero{text-align:center;background:#fff;padding:62px 0 32px;border-bottom:0}
.page-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:58px;font-weight:700;letter-spacing:.01em;color:#333}
.page-hero h1:after{content:"";display:block;width:76px;height:2px;background:var(--gold);margin:25px auto 0}

@media(max-width:1200px){
 .home-page .brand{min-width:220px;width:220px}.home-page .brand span{font-size:52px}.home-page .brand:after{top:59px}.home-page .main-nav>ul{gap:24px}.home-page .phone{font-size:15px}
 .hero-home h1{font-size:96px}.hero-home .eyebrow{font-size:32px}.home-intro-main{grid-template-columns:1fr 1fr;gap:44px}.home-photo-grid{grid-template-rows:repeat(2,160px)}
}
@media(max-width:900px){
 .home-page .site-header{height:82px}.home-page .header-inner{width:min(calc(100% - 32px),1440px)}.home-page .brand{min-width:150px;width:150px;height:70px}.home-page .brand span{font-size:36px}.home-page .brand small{font-size:9px;margin-top:12px;margin-left:8px}.home-page .brand:after{top:46px;height:2px}.home-page .main-nav{margin-left:auto}.home-page .phone{display:none}
 .hero-home.hero-home--photo{min-height:690px;padding-top:100px}.hero-home .container{transform:translateY(40px)}.hero-home h1{font-size:76px}.hero-home .eyebrow{font-size:27px}.hero-home .btn{width:240px}
 .home-intro .home-intro-title{font-size:56px}.home-intro .title-rule{margin-bottom:58px}.home-intro-main{grid-template-columns:1fr}.home-photo-grid{grid-template-rows:repeat(2,210px)}.home-features{max-width:none}
}
@media(max-width:768px){
 .home-page .site-header,.home-page .site-header.scrolled{height:70px}.home-page .site-header:not(.scrolled) .main-nav{top:70px;background:#fff;color:#222}.home-page .site-header:not(.scrolled) .main-nav a{color:#222}.home-page .site-header:not(.scrolled) .main-nav>ul>li:first-child>a:after{display:none}.home-page .site-header:not(.scrolled) .sub-menu a{color:#222}
 .hero-home.hero-home--photo{min-height:620px;padding-top:86px;background-position:center}.hero-home .container{transform:translateY(22px)}.hero-home h1{font-size:58px;margin-bottom:26px}.hero-home .eyebrow{font-size:24px}.hero-home .button-row{gap:12px!important}.hero-home .btn{width:auto;min-width:180px}
 .home-intro{padding:50px 0}.home-intro .home-intro-title{font-size:46px}.home-intro .title-rule{width:90px;margin-bottom:45px}.home-photo-grid{grid-template-rows:repeat(2,160px);gap:6px}.home-features{grid-template-columns:1fr;gap:0;margin-top:30px}
}
@media(max-width:480px){
 .home-page .brand{min-width:126px;width:126px}.home-page .brand span{font-size:30px}.home-page .brand small{font-size:7px}.home-page .brand:after{top:43px}
 .hero-home.hero-home--photo{min-height:570px}.hero-home h1{font-size:49px}.hero-home .eyebrow{font-size:21px}.hero-home .button-row{display:grid;width:100%;max-width:290px;margin:auto}.hero-home .btn{width:100%}
 .home-intro .home-intro-title{font-size:40px}.home-photo-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,150px)}
}

/* ==========================================================
   HOMEPAGE RECONSTRUCTIE – referenties + aangeleverde foto's
   2026-08-17. Deze regels staan bewust onderaan als fidelity-
   laag zodat de overige 33 pagina's hun bestaande basis houden.
   ========================================================== */
.home-page{background:#fff;color:#3b3b3b}
.home-page .site-header{height:110px}
.home-page .header-inner{width:min(calc(100% - 72px),1460px);height:100%;margin:auto}
.home-page .brand{min-width:282px;width:282px}
.home-page .brand span{font-family:Arial,Helvetica,sans-serif;font-size:64px;font-weight:300}
.home-page .main-nav>ul{gap:36px}
.home-page .main-nav a{font-size:15px}
.home-page .phone{font-size:18px;white-space:nowrap}
.home-page .main-nav .sub-toggle{color:inherit}

.hero-home.hero-home--photo{height:900px;min-height:900px;padding:0;background-image:linear-gradient(rgba(5,0,0,.32),rgba(5,0,0,.32)),url("../assets/images/landscape-hero.jpg");background-size:cover;background-position:center center;display:flex;align-items:center}
.hero-home__content{padding-top:110px;transform:none!important;text-align:center;max-width:920px}
.hero-home .eyebrow{margin:0 0 26px;font-family:Georgia,"Times New Roman",serif;font-size:38px;line-height:1.15;letter-spacing:.02em;color:#dfb232;font-weight:400;font-style:italic}
.hero-home h1{margin:0 0 46px;font-family:Arial,Helvetica,sans-serif;font-size:112px;line-height:1.12;font-weight:300;letter-spacing:-.035em;color:#fff}
.hero-actions{display:flex;justify-content:center!important;gap:28px!important}
.hero-home .hero-actions .btn{width:320px;min-height:50px;background:#dfb232;border:1px solid #dfb232;color:#fff;font-size:14px;font-weight:700}
.hero-home .hero-actions .btn:hover{background:#c99c23;border-color:#c99c23}

.home-nav-cards{display:grid;grid-template-columns:repeat(3,1fr);width:100%;background:#111}
.home-nav-card{position:relative;height:340px;overflow:hidden;color:#fff;background:#111}
.home-nav-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.06) 62%);transition:background .2s}
.home-nav-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.home-nav-card span{position:absolute;z-index:2;left:0;right:0;bottom:34px;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:34px;font-weight:700;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.55)}
.home-nav-card:hover{color:#fff}.home-nav-card:hover img{transform:scale(1.025)}.home-nav-card:hover:after{background:linear-gradient(to top,rgba(198,160,67,.62),rgba(0,0,0,.08) 64%)}

.home-section-shell{width:min(calc(100% - 56px),1400px);margin:auto}
.home-display-title{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:76px;line-height:1.06;font-weight:700;color:#353535;letter-spacing:.008em;margin:0}
.home-title-rule{width:138px;height:3px;background:#d6a72e;margin:38px auto 88px}
.home-intro{padding:64px 0 80px;background:#fff}
.home-intro-main{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:70px;align-items:start}
.home-intro-copy{font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.7;color:#7c7c7c}
.home-intro-copy p{margin:0 0 25px}
.home-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,214px);gap:10px}
.home-photo-grid figure{margin:0;overflow:hidden;background:#eee}.home-photo-grid img{width:100%;height:100%;object-fit:cover;display:block}
.home-features{display:grid;grid-template-columns:repeat(2,1fr);gap:0 54px;padding:0;margin:46px 0 0;list-style:none}
.home-features li{position:relative;padding:8px 0 8px 27px;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.4;font-weight:700;color:#444}
.home-features li:before{content:"◆";position:absolute;left:0;color:#d7a62d;font-size:13px}

.reviews-section{padding:92px 0 100px;background:#f7f7f7}
.reviews-section .home-title-rule{margin-bottom:42px}
.google-rating-line{display:flex;justify-content:center;gap:13px;align-items:center;margin:0 0 48px;color:#6d6d6d;font-weight:700}.stars,.review-meta span{color:#d7a62d;letter-spacing:2px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.review-card{min-height:230px;padding:0;background:transparent;color:#777;font-size:17px;line-height:1.65}
.review-card .quote-mark{font-family:Georgia,serif;color:#c9c9c9;font-size:58px;height:44px;line-height:1}
.review-card p{margin:10px 0 24px}.review-meta{display:flex;flex-direction:column;gap:4px}.review-meta strong{font-size:18px;color:#333}.review-card--cta a{color:#c8951b;text-decoration:underline;font-weight:700}
.review-meta small{font-size:12px;color:#8d8d8d;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.google-rating-line a{color:#6d6d6d;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px}
.google-rating-line a:hover{color:#333}

.recent-projects-section{padding:84px 0 0;background:#fff}.recent-projects-heading .home-title-rule{margin-bottom:64px}
.recent-projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.recent-projects-grid figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#eee}.recent-projects-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.recent-projects-grid figure:hover img{transform:scale(1.03)}
.recent-projects-grid figure:nth-child(8) img{object-position:center 25%}

/* Geen template-blog of demo-secties meer op de homepage. */
.home-page .template-section,.home-page .more-about{display:none!important}

@media(max-width:1180px){
 .home-page .header-inner{width:min(calc(100% - 36px),1460px);gap:22px}.home-page .brand{min-width:220px;width:220px}.home-page .brand span{font-size:52px}.home-page .main-nav>ul{gap:22px}.hero-home h1{font-size:96px}.hero-home .eyebrow{font-size:44px}.home-nav-card{height:290px}.home-intro-main{gap:42px}.home-photo-grid{grid-template-rows:repeat(2,180px)}
}
@media(max-width:900px){
 .hero-home.hero-home--photo{height:760px;min-height:760px}.hero-home h1{font-size:76px}.hero-home .eyebrow{font-size:38px}.home-nav-card{height:240px}.home-nav-card span{font-size:28px}.home-display-title{font-size:60px}.home-intro-main{grid-template-columns:1fr}.home-photo-grid{grid-template-rows:repeat(2,210px)}.reviews-grid{gap:32px}.recent-projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 .home-page .site-header{height:76px}.home-page .brand{min-width:140px;width:140px}.home-page .brand span{font-size:33px}.home-page .brand small{font-size:8px}.home-page .brand:after{top:43px}.hero-home.hero-home--photo{height:680px;min-height:680px;background-position:56% center}.hero-home__content{padding-top:70px}.hero-home h1{font-size:62px}.hero-home .eyebrow{font-size:32px}.hero-actions{flex-wrap:wrap}.hero-home .hero-actions .btn{width:240px}.home-nav-cards{grid-template-columns:1fr}.home-nav-card{height:270px}.home-display-title{font-size:48px}.home-title-rule{margin:28px auto 50px}.home-intro{padding:52px 0 60px}.home-photo-grid{grid-template-rows:repeat(2,155px)}.home-features{grid-template-columns:1fr}.reviews-section{padding:65px 0}.reviews-grid{grid-template-columns:1fr;gap:26px}.review-card{min-height:auto}.recent-projects-section{padding-top:62px}
}
@media(max-width:480px){
 .home-section-shell{width:min(calc(100% - 34px),1400px)}.hero-home.hero-home--photo{height:610px;min-height:610px}.hero-home h1{font-size:50px}.hero-home .eyebrow{font-size:28px}.hero-home .hero-actions .btn{width:280px}.home-nav-card{height:230px}.home-display-title{font-size:41px}.home-photo-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,150px)}.recent-projects-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================
   HOME FIDELITY + LOCAL FILE NAVIGATION FIX — 2026-08-17
   ========================================================== */
/* Desktop dropdowns: visible dark text on white, compact live-style panel. */
.home-page .main-nav .sub-menu{z-index:250;top:100%;margin-top:18px;min-width:250px;width:max-content;max-width:340px;background:#fff;border-top:3px solid var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.16);padding:10px 0;color:#282828}
.home-page .main-nav .sub-menu a{display:block!important;color:#282828!important;padding:8px 18px;font-size:13px;line-height:1.35;white-space:nowrap}
.home-page .main-nav .sub-menu a:hover{color:var(--gold)!important;background:#f7f7f7}
.home-page .has-sub:hover>.sub-menu,.home-page .has-sub.menu-open>.sub-menu{display:block}

/* Three navigation/image buttons directly under the hero. */
.home-nav-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;background:#111}
.home-nav-card{height:335px;position:relative;overflow:hidden;display:block}
.home-nav-card img{width:100%;height:100%;object-fit:cover;display:block}
.home-nav-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,.04) 68%)}
.home-nav-card span{position:absolute;z-index:2;left:20px;right:20px;bottom:30px;text-align:center;color:#fff;font:700 34px/1.1 Georgia,"Times New Roman",serif}

/* Restore the requested More about us section instead of hiding it with old template rules. */
.more-about-home{display:block!important;background:#f6f6f6;padding:78px 0 105px}
.more-about-home .home-title-rule{margin-bottom:82px}
.more-about-columns{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.more-about-columns h3{font-family:Georgia,"Times New Roman",serif;color:#363636;font-size:48px;line-height:1.27;margin:0 0 26px;font-weight:700}
.more-about-columns p{font-size:16px;line-height:1.65;color:#858585;margin:0 0 26px}
.more-button{display:inline-flex!important;width:auto!important;min-height:42px!important;padding:9px 15px!important;margin-top:22px;background:#dfad28!important;border-color:#dfad28!important;color:#fff!important;font-size:12px!important;font-weight:700!important}
.more-button span{font-size:22px;line-height:14px;margin-left:8px}
.more-features{list-style:none;padding:0;margin:43px 0 0}
.more-features li{position:relative;padding:5px 0 5px 27px;font:700 15px/1.35 Georgia,"Times New Roman",serif;color:#424242}
.more-features li:before{content:"◆";position:absolute;left:0;color:#dfad28;font-size:13px}




/* Dark live-style footer. */
.site-footer.live-footer{display:block!important;background:#1d2023;color:#a5a5a5;padding-top:0}
.footer-live-grid{display:grid;grid-template-columns:1.05fr 1.05fr 1fr;gap:105px;padding:64px 0 58px}
.live-footer h3{margin:0 0 25px;color:#fff;font-size:15px;letter-spacing:0;text-transform:none}.live-footer h4{font-size:14px;color:#fff;font-weight:400;margin:18px 0 3px}.live-footer p{margin:0;color:#85888b;font-size:14px;line-height:1.7}
.social-dots{display:flex;gap:8px;margin-top:17px}.social-dots a,.social-dots span{width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#303438;color:#95999d;font-size:11px;text-decoration:none;transition:.2s}
.social-dots a:hover{background:var(--accent);color:#fff}
.footer-post{display:grid;grid-template-columns:70px 1fr;gap:15px;align-items:center;margin:0 0 16px}.footer-post img,.post-thumb{width:70px;height:52px;display:block;object-fit:cover;background:#202326;border:1px solid #2a2e31}.footer-post strong{display:block;color:#fff;font-size:14px;font-weight:400;line-height:1.3}.footer-post small{display:block;color:#7d8083;margin-top:5px;font-size:13px}
.footer-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.footer-project-grid img{aspect-ratio:1.25/1;width:100%;height:100%;object-fit:cover}
.live-footer .footer-bottom{padding:18px 0;border-top:1px solid #34383b;background:#1d2023;font-size:12px;color:#e4e4e4}.footer-bottom-inner{display:flex;justify-content:space-between;gap:25px;align-items:center}.footer-bottom-contact{white-space:nowrap}

@media(max-width:1050px){.more-about-columns{grid-template-columns:1fr 1fr;gap:50px}.footer-live-grid{gap:45px}.more-about-columns h3{font-size:40px}}
@media(max-width:768px){.home-nav-cards{grid-template-columns:1fr}.home-nav-card{height:250px}.more-about-columns{grid-template-columns:1fr}.more-about-columns h3{font-size:38px}.footer-live-grid{grid-template-columns:1fr;gap:42px}.footer-bottom-inner{display:block}.footer-bottom-contact{display:block;margin-top:8px}.home-page .main-nav .sub-menu{width:auto;max-width:none}.home-page .main-nav .sub-menu a{white-space:normal}}

/* Homepage – live logo strip under testimonials + portfolio CTA. */




.portfolio-cta-wrap{display:flex;justify-content:center;padding:44px 20px 82px;background:#fff}
.portfolio-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:205px;min-height:48px;padding:12px 25px;background:#dfb232;color:#fff!important;font-size:14px;font-weight:700;text-decoration:none;transition:background .18s ease}
.portfolio-cta:hover{background:#c99c23;color:#fff}

@media(max-width:650px){.portfolio-cta-wrap{padding-bottom:58px}}

/* ------------------------------------------------------------------
   Contactpagina
   ------------------------------------------------------------------ */
.page-hero .lead{max-width:640px;margin:26px auto 0;color:var(--muted);font-size:18px;line-height:1.75}
.info-card{border:1px solid var(--line);padding:34px 30px;background:#fff;transition:.2s}
.info-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.07)}
.info-card h2{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.info-card h2:after{content:"";display:block;width:32px;height:2px;background:var(--accent);margin-top:13px}
.info-card p{margin:0 0 9px;line-height:1.8}
.info-card p:last-child{margin-bottom:0}
.info-card a{font-weight:700;border-bottom:1px solid rgba(198,160,67,.45);transition:.2s}
.info-card a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.contact-meta{margin:-34px auto 0;padding-bottom:60px;color:var(--muted);font-size:13px}
/* Alleen /contact/: page-hero gevolgd door het kaartraster. De hubpagina's
   gebruiken .parent-hero en worden hier niet door geraakt. */
.page-hero+.card-grid{padding-top:54px}
@media(max-width:768px){.page-hero .lead{font-size:17px;margin-top:20px}.page-hero+.card-grid{padding-top:38px}.contact-meta{margin-top:-26px;padding-bottom:44px}}
.form-intro{margin:-8px 0 26px;color:var(--muted)}
.footer-bottom-contact a{color:inherit}

/* Tarieftabellen (/investering/) */
.price-table{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:15px}
.price-table caption{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);padding-bottom:10px}
.price-table th,.price-table td{text-align:left;padding:12px 14px;border-bottom:1px solid #e6e6e6}
.price-table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--accent)}
.price-table tbody td:last-child{font-weight:700;white-space:nowrap}
.price-table tbody tr:hover{background:#faf7f0}
.price-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-terug{background:transparent;color:var(--accent)}
.btn-terug:hover{background:var(--accent);color:#fff}

/* ------------------------------------------------------------------
   Fotohero's binnenpagina's

   Opzet: .parent-hero--photo / .chair-hero--photo leveren de gedeelde
   behandeling (witte tekst, hoogte, tekstschaduw). De foto zelf en de
   scrim staan per pagina in een .hero-photo--* klasse, zodat elke foto
   zijn eigen uitsnede en verduistering kan krijgen.

   De basisklassen .parent-hero en .chair-hero blijven ongewijzigd.
   ------------------------------------------------------------------ */
.parent-hero--photo,.chair-hero--photo{background-color:#222;background-size:cover;background-repeat:no-repeat;color:#fff}
/* De hero van /stoelverhuur/ krijgt dezelfde afmetingen als die van
   /behandelingen/ en /devi-academy/, zodat de drie hubpagina's gelijk ogen. */
.chair-hero--photo{display:flex;align-items:center;min-height:620px;padding:60px 0;text-align:center}
.chair-hero--photo h1,.chair-hero--photo p{margin-inline:auto}
.chair-hero--photo h1{font-size:52px}
.parent-hero--photo h1,.parent-hero--photo p,.chair-hero--photo h1,.chair-hero--photo p{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.parent-hero--photo{display:flex;align-items:center;min-height:620px;padding:60px 0}
.parent-hero--photo h1{color:#fff}
.parent-hero--photo p{color:#f0f0f0;font-size:19px;max-width:640px;margin-inline:auto}
.chair-hero--photo p{color:#ececec}

/* Devi Academy — lichte ruimte, dus een band-scrim over de tekstzone. */
.hero-photo--academy{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.74) 34%,rgba(0,0,0,.74) 74%,rgba(0,0,0,.46) 100%),url("../assets/images/heroes/devi-academy-hero-2000.webp");background-position:center 30%}

/* Behandelingen — donkere foto; radiale scrim houdt de haarkleur en de
   gehandschoende hand zichtbaar en verduistert alleen achter de tekst. */
.hero-photo--behandelingen{background-image:radial-gradient(ellipse 66% 62% at 50% 52%,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.42) 100%),url("../assets/images/heroes/behandelingen-hero-2000.webp");background-position:34% 2%}

/* Stoelverhuur — donkere salonfoto met vlakke ondergrond. */
.hero-photo--stoelverhuur{background-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.76) 30%,rgba(0,0,0,.76) 88%,rgba(0,0,0,.6) 100%),url("../assets/images/heroes/stoelverhuur-hero-2000.webp");background-position:center 62%}

@media(max-width:768px){
 /* Mobiel: tekst onderaan uitlijnen. Het venster is bijna vierkant, waardoor
    gecentreerde tekst precies over het onderwerp van de foto valt. */
 .parent-hero--photo,
 .chair-hero--photo{align-items:flex-end;min-height:480px;padding:48px 0 38px}
 .chair-hero--photo h1{font-size:43px}
 .hero-photo--academy{background-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.76) 30%,rgba(0,0,0,.76) 78%,rgba(0,0,0,.5) 100%),url("../assets/images/heroes/devi-academy-hero-1200.webp")}
 .hero-photo--behandelingen{background-image:radial-gradient(ellipse 92% 58% at 50% 50%,rgba(0,0,0,.80) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.5) 100%),url("../assets/images/heroes/behandelingen-hero-1200.webp");background-position:34% 10%}
 .hero-photo--stoelverhuur{background-image:linear-gradient(180deg,rgba(0,0,0,.54) 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.62) 100%),url("../assets/images/heroes/stoelverhuur-hero-1200.webp")}
}

/* ------------------------------------------------------------------
   Detailpagina-opmaak (voorbeeld: /haar-kleuren/)

   Doel: lange tekstpagina's opbreken met beeld en gouden accenten.
   Bouwstenen: fotohero, lead met gouden lijn, split-secties met een
   gouden eyebrow, een zachte band-sectie, een pull-quote, een gouden
   vinklijst en een resultatenraster.
   ------------------------------------------------------------------ */
.detail-hero{position:relative;display:flex;align-items:flex-end;min-height:460px;padding:60px 0 46px;background-color:#222;background-size:cover;background-repeat:no-repeat;color:#fff}
/* Extra scrim links, waar de titel staat. Houdt de rechterkant van de foto open. */
.detail-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.24) 46%,rgba(0,0,0,0) 76%)}
.detail-hero>.container{position:relative;z-index:1}
.detail-hero h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:50px;line-height:1.12;max-width:820px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.detail-hero h1:after{content:"";display:block;width:76px;height:2px;background:var(--gold);margin:22px 0 0}
.detail-hero p{margin:20px 0 0;max-width:600px;font-size:18px;color:#f0f0f0;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.detail-hero--kleuren{background-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.72) 100%),url("../assets/images/pages/haar-kleuren/hero-2000.webp");background-position:center 38%}

/* Gouden scheidingselementen */
.gold-rule{display:block;width:76px;height:2px;background:var(--gold);margin:34px auto 0}
.gold-rule--left{margin-left:0;margin-right:auto;margin-top:22px}
.eyebrow-gold{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}

.lead-block{padding:62px 0 0;text-align:center}
.lead-block .lead{margin:0;font-size:19px;line-height:1.8;color:#4d4d4d}
.lead-block .lead+.lead{margin-top:20px}
.lead-block .lead-cta{justify-content:center;margin-top:30px}

/* Zachte band om secties visueel te scheiden */
.section-band{background:#faf8f4;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px}
.section-band .split-section{border-bottom:0}
.section-band>.container.narrow{padding:66px 0}
.band-title{margin:0;font-size:30px;line-height:1.2}
.band-closing{margin:26px 0 0;color:#4d4d4d}
.band-intro{margin:24px 0 0;color:#4d4d4d}
.section-band .feature-list{margin-top:30px}
.section-band .feature-list li{border-bottom-color:#ece5d8}

.quote-block{padding:20px 0 8px}

/* Resultatenraster */
.result-section{padding:70px 0 10px}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.result-grid figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:#eee}
/* Liggende galerij: voor procesfoto's in plaats van kapselresultaten. */
.result-grid--breed{grid-template-columns:repeat(2,1fr);gap:16px}
/* Drie portretten naast elkaar (teamgalerij). */
.result-grid--drie{grid-template-columns:repeat(3,1fr);gap:16px}
.result-grid--breed figure{aspect-ratio:3/2}
.result-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.result-grid figure:hover img{transform:scale(1.04)}

@media(max-width:1024px){.detail-hero h1{font-size:42px}}
@media(max-width:768px){
 .detail-hero{min-height:390px;padding:48px 0 36px}
 .detail-hero h1{font-size:34px}
 .detail-hero p{font-size:16px}
 .detail-hero--kleuren{background-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.54) 55%,rgba(0,0,0,.74) 100%),url("../assets/images/pages/haar-kleuren/hero-1200.webp")}
 .lead-block{padding-top:44px}.lead-block .lead{font-size:17px}
 .section-band>.container.narrow{padding:48px 0}
 .result-grid{grid-template-columns:1fr 1fr;gap:10px}
 .result-section{padding:52px 0 0}
}

/* Fotohero's detailpagina's — ronde A */
.detail-hero--dames-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.72) 100%),url("../assets/images/pages/gedeeld/fohnen-rondborstel-2000.webp");background-position:center 34%}
.detail-hero--heren-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.74) 100%),url("../assets/images/pages/heren-knippen/hero-2000.webp");background-position:center 40%}
.detail-hero--kinderen-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.74) 100%),url("../assets/images/pages/kinderen-knippen/hero-2000.webp");background-position:center 62%}
/* Losse tekstsectie zonder beeld */
/* Staande foto in een split-sectie: 3:4 i.p.v. het standaard 4:3-kader,
   zodat er niets van het onderwerp wordt weggesneden. */
.content-image--portret{aspect-ratio:3/4}
@media(max-width:768px){.content-image--portret{aspect-ratio:3/4}}
.tekst-blok{padding:56px 0 10px}
.tekst-blok p{margin:22px 0 0;color:#4d4d4d}
@media(max-width:768px){
 .detail-hero--dames-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.54) 55%,rgba(0,0,0,.74) 100%),url("../assets/images/pages/gedeeld/fohnen-rondborstel-1200.webp")}
 .detail-hero--heren-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.76) 100%),url("../assets/images/pages/heren-knippen/hero-1200.webp")}
 .detail-hero--kinderen-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.76) 100%),url("../assets/images/pages/kinderen-knippen/hero-1200.webp")}
 .tekst-blok{padding:42px 0 4px}
}

/* Fotohero's detailpagina's — ronde B */
.detail-hero--krullen-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/krullen-knippen/hero-2000.webp");background-position:center 40%}
.detail-hero--highlights{background-image:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.84) 100%),url("../assets/images/pages/highlights/hero-720.webp");background-position:center 40%}
@media(max-width:768px){
 .detail-hero--krullen-knippen{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/krullen-knippen/hero-1200.webp")}
 .detail-hero--highlights{background-image:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.84) 100%),url("../assets/images/pages/highlights/hero-720.webp")}
}

/* Fotohero's detailpagina's — ronde C */
.detail-hero--haarverzorging{background-image:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.78) 100%),url("../assets/images/pages/haarverzorging/hero-2000.webp");background-position:center 42%}
.detail-hero--wenkbrauwen{background-image:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.78) 100%),url("../assets/images/pages/wenkbrauwen/hero-threading-2000.webp");background-position:center 44%}
.detail-hero--permanent{background-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.54) 55%,rgba(0,0,0,.76) 100%),url("../assets/images/pages/permanent/hero-1200.webp");background-position:center 34%}
@media(max-width:768px){
 .detail-hero--haarverzorging{background-image:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/haarverzorging/hero-1200.webp")}
 .detail-hero--wenkbrauwen{background-image:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/wenkbrauwen/hero-threading-1200.webp")}
 .detail-hero--permanent{background-image:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.78) 100%),url("../assets/images/pages/permanent/hero-900.webp")}
 .result-grid--breed{grid-template-columns:1fr;gap:10px}
/* Drie teamportretten onder elkaar op mobiel: in twee kolommen valt de derde
   alleen op een tweede rij, en in drie kolommen worden de gezichten te klein. */
.result-grid--drie{grid-template-columns:1fr;gap:14px}
.result-grid--drie figure{aspect-ratio:4/3}
}

/* Fotohero's detailpagina's — ronde D1 (Devi Academy) */
.detail-hero--over-devi-academy{background-image:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.56) 55%,rgba(0,0,0,.78) 100%),url("../assets/images/pages/over-devi-academy/hero-2000.webp");background-position:center 42%}
.detail-hero--basis-opleiding-kapper{background-image:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.84) 100%),url("../assets/images/pages/basis-opleiding-kapper/hero-2000.webp");background-position:center 42%}
.detail-hero--vervolg-opleiding{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/vervolg-opleiding/hero-2000.webp");background-position:center 38%}
.detail-hero--allround-kapper{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/allround-kapper/hero-2000.webp");background-position:center 44%}
@media(max-width:768px){
 .detail-hero--over-devi-academy{background-image:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/over-devi-academy/hero-1200.webp")}
 .detail-hero--basis-opleiding-kapper{background-image:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.70) 55%,rgba(0,0,0,.86) 100%),url("../assets/images/pages/basis-opleiding-kapper/hero-1200.webp")}
 .detail-hero--vervolg-opleiding{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/vervolg-opleiding/hero-1200.webp")}
 .detail-hero--allround-kapper{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/allround-kapper/hero-1200.webp")}
}

/* Vraag-en-antwoordraster (/veel-gestelde-vragen/) */
.faq-section{padding:56px 0 10px}
/* Meerkoloms in plaats van een raster: in een raster wordt iedere rij zo hoog
   als de langste kaart, waardoor er onder korte antwoorden veel wit bleef
   staan. Met kolommen stromen de vragen strak achter elkaar door. */
.faq-grid{columns:2;column-gap:44px;margin-top:32px}
.faq-item{border-top:2px solid var(--gold);padding-top:18px;margin:0 0 30px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.faq-item h2{margin:0 0 10px;font-size:18px;line-height:1.35}
.faq-item p{margin:0 0 10px;color:#4d4d4d;font-size:15px;line-height:1.75}
.faq-item p:last-child{margin-bottom:0}
@media(max-width:768px){.faq-grid{columns:1}
.faq-item{margin-bottom:24px}.faq-section{padding:42px 0 4px}}

/* Fotohero's detailpagina's — ronde D2 (Devi Academy) */
.detail-hero--stage-lopen{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/gedeeld/academy-les-2000.webp");background-position:center 42%}
.detail-hero--veel-gestelde-vragen{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/gedeeld/team-drie-2000.webp");background-position:center 34%}
.detail-hero--modellen-tijdens-de-opleiding{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/modellen-tijdens-de-opleiding/hero-2000.webp");background-position:center 38%}
.detail-hero--model-worden{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/gedeeld/adviesgesprek-2000.webp");background-position:center 42%}
@media(max-width:768px){
 .detail-hero--stage-lopen{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/gedeeld/academy-les-1200.webp")}
 .detail-hero--veel-gestelde-vragen{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/gedeeld/team-drie-1200.webp")}
 .detail-hero--modellen-tijdens-de-opleiding{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/modellen-tijdens-de-opleiding/hero-1200.webp")}
 .detail-hero--model-worden{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/gedeeld/adviesgesprek-1200.webp")}
}

/* Fotohero's detailpagina's — ronde E1 (Stoelverhuur) */
.detail-hero--onze-visie{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/gedeeld/salon-breed-2000.webp");background-position:center 42%}
.detail-hero--voor-wie-is-deze-plek{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/voor-wie-is-deze-plek/hero-2000.webp");background-position:center 46%}
.detail-hero--wat-maakt-anders{background-image:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.85) 100%),url("../assets/images/pages/wat-maakt-devi-hairfashion-anders/hero-2000.webp");background-position:center 40%}
.detail-hero--ondernemen-niet-alleen{background-image:linear-gradient(180deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.74) 55%,rgba(0,0,0,.88) 100%),url("../assets/images/pages/ondernemen-maar-niet-alleen/hero-2000.webp");background-position:center 35%}
.detail-hero--jouw-vrijheid{background-image:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.8) 100%),url("../assets/images/pages/jouw-vrijheid/hero-2000.webp");background-position:center 52%}
@media(max-width:768px){
 .detail-hero--onze-visie{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/gedeeld/salon-breed-1200.webp")}
 .detail-hero--voor-wie-is-deze-plek{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/voor-wie-is-deze-plek/hero-1200.webp")}
 .detail-hero--wat-maakt-anders{background-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.87) 100%),url("../assets/images/pages/wat-maakt-devi-hairfashion-anders/hero-1200.webp")}
 .detail-hero--ondernemen-niet-alleen{background-image:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.76) 55%,rgba(0,0,0,.90) 100%),url("../assets/images/pages/ondernemen-maar-niet-alleen/hero-1200.webp")}
 .detail-hero--jouw-vrijheid{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/jouw-vrijheid/hero-1200.webp")}
}

/* Vergelijkingstabel 'Wij regelen / Jij regelt' (/transparant-ondernemen/) */
.verdeel-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:32px;border:1px solid var(--line)}
.verdeel-kolom{padding:28px 30px}
.verdeel-kolom+.verdeel-kolom{border-left:1px solid var(--line)}
.verdeel-kolom h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.verdeel-kolom h3:after{content:"";display:block;width:32px;height:2px;background:var(--accent);margin-top:12px}
.verdeel-kolom ul{list-style:none;padding:0;margin:18px 0 0}
.verdeel-kolom li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid #eee;font-size:15px}
.verdeel-kolom li:last-child{border-bottom:0}
.verdeel-kolom li:before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:700}
@media(max-width:768px){
 .verdeel-grid{grid-template-columns:1fr}
 .verdeel-kolom+.verdeel-kolom{border-left:0;border-top:1px solid var(--line)}
}

/* Fotohero's detailpagina's — ronde E2 (Stoelverhuur + Over ons) */
.detail-hero--wat-verwachten-wij{background-image:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.60) 55%,rgba(0,0,0,.80) 100%),url("../assets/images/pages/gedeeld/werkplekken-2000.webp");background-position:center 46%}
.detail-hero--transparant-ondernemen{background-image:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.85) 100%),url("../assets/images/pages/transparant-ondernemen/hero-1920.webp");background-position:center 50%}
.detail-hero--producten-en-werkwijze{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/gedeeld/natulique-flessen-2000.webp");background-position:center 50%}
.detail-hero--investering{background-image:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.85) 100%),url("../assets/images/pages/investering/hero-1920.webp");background-position:center 50%}
.detail-hero--over-devi-hairfashion{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/over-devi-hairfashion/hero-2000.webp");background-position:center 46%}
@media(max-width:768px){
 .detail-hero--wat-verwachten-wij{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.82) 100%),url("../assets/images/pages/gedeeld/werkplekken-1200.webp")}
 .detail-hero--transparant-ondernemen{background-image:linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.70) 55%,rgba(0,0,0,.87) 100%),url("../assets/images/pages/transparant-ondernemen/hero-1200.webp")}
 .detail-hero--producten-en-werkwijze{background-image:linear-gradient(180deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.64) 55%,rgba(0,0,0,.84) 100%),url("../assets/images/pages/gedeeld/natulique-flessen-1200.webp")}
 .detail-hero--investering{background-image:linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.70) 55%,rgba(0,0,0,.87) 100%),url("../assets/images/pages/investering/hero-1200.webp")}
 .detail-hero--over-devi-hairfashion{background-image:linear-gradient(180deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.64) 55%,rgba(0,0,0,.84) 100%),url("../assets/images/pages/over-devi-hairfashion/hero-1200.webp")}
}

/* ------------------------------------------------------------------
   Homepage-header: navigatie exact in het midden.

   De header stond in een flexbox waarin het logo de startpositie van
   het menu bepaalde. Omdat het logo bij het scrollen krimpt (282px naar
   128px), verschoof het menu daardoor zichtbaar mee. Met een raster van
   drie kolommen (1fr | auto | 1fr) staat de middenkolom altijd exact
   gecentreerd, ongeacht de breedte van het logo of het telefoonnummer.
   ------------------------------------------------------------------ */
/* minmax(0,1fr) i.p.v. 1fr: anders kan de linkerkolom niet verder krimpen dan
   het logo en verschuift het menu bij smallere schermen alsnog naar rechts. */
.home-page .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.home-page .brand{justify-self:start}
.home-page .main-nav,
.home-page .site-header.scrolled .main-nav{margin-left:0;justify-self:center}
.home-page .phone{margin-left:0;justify-self:end}

@media(max-width:768px){
 /* Mobiel terug naar flexbox: daar hoort het hamburgermenu rechts. */
 .home-page .header-inner{display:flex;gap:16px}
 .home-page .main-nav{margin-left:0;justify-self:auto}
}

@media(max-width:1000px){
 .home-page .header-inner{gap:16px}
 .home-page .main-nav>ul{gap:18px}
}

/* ------------------------------------------------------------------
   Eenduidige menubalk op de hele site.

   De binnenpagina's hadden een afwijkende header: lagere balk, kleiner
   woordmerk, rechts uitgelijnde navigatie en een smallere container.
   Daardoor voelde doorklikken vanaf de homepage als een andere website.

   Deze regels geven elke pagina dezelfde balk als de homepage in
   gescrolde staat: wit, 72px hoog, gecentreerde navigatie en hetzelfde
   woordmerk. De homepage houdt zijn eigen transparante hero-variant,
   omdat `.home-page .site-header` een hogere specificiteit heeft.
   ------------------------------------------------------------------ */
/* position:sticky houdt de balk bovenaan tijdens het scrollen, net als op de
   homepage. Sticky in plaats van fixed: het element blijft in de normale
   stroom staan, dus er ontstaat geen sprong in de layout. */
.site-header{position:sticky;top:0;z-index:100;height:72px;border-bottom:0;box-shadow:0 2px 14px rgba(0,0,0,.08)}
/* Ankerlinks niet onder de vastgezette balk laten verdwijnen. */
html{scroll-padding-top:88px}
.header-inner{width:min(calc(100% - 72px),1460px);display:grid;
              grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
/* justify-content:center centreert het woordmerk verticaal in de balk.
   Zonder deze regel bleef het bovenaan hangen; font-weight en
   letter-spacing staan gelijk aan de homepage voor een exacte match. */
.brand{width:128px;min-width:128px;height:62px;line-height:.8;justify-self:start;justify-content:center;font-weight:300;letter-spacing:.05em}
.brand span{font-size:24px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.brand small{font-size:8px;font-weight:700;letter-spacing:.24em;margin:8px 0 0;text-transform:uppercase}
.main-nav{margin-left:0;justify-self:center}
.main-nav a{font-size:15px}
.phone{font-size:18px;font-weight:700;display:flex;align-items:center;gap:13px;justify-self:end}

@media(max-width:1100px){
 .header-inner{gap:16px}
 .main-nav>ul{gap:18px}
}
@media(max-width:1024px){
 /* Telefoonnummer verdwijnt hier al; opnieuw verklaren omdat de regel
    hierboven anders wint en het nummer op mobiel zou terugkeren. */
 .phone{display:none}
}
@media(max-width:768px){
 /* Mobiel terug naar flexbox met het hamburgermenu rechts. */
 .site-header{height:70px}
 .header-inner{width:min(calc(100% - 32px),var(--max));display:flex;gap:16px}
 .brand{width:auto;min-width:118px;height:auto;justify-self:auto}
 .main-nav{margin-left:0;justify-self:auto}
}

/* Credit onderin de footer: bewust ingetogen, iets kleiner en gedempt,
   zodat het de bedrijfsgegevens van de klant niet overschreeuwt. */
.credit{font-size:12px;opacity:.72}
.credit a{border-bottom:1px solid rgba(255,255,255,.28);transition:.2s}
.credit a:hover{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:768px){.credit{display:block;margin-top:8px}}

/* Fotohero /ondernemen-bij-devi-hairfashion/ */
.detail-hero--ondernemen-bij-devi{background-image:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.85) 100%),url("../assets/images/pages/ondernemen-bij-devi-hairfashion/hero-2000.webp");background-position:center 55%}
@media(max-width:768px){
 .detail-hero--ondernemen-bij-devi{background-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.87) 100%),url("../assets/images/pages/ondernemen-bij-devi-hairfashion/hero-1200.webp")}
}

/* Boek-knop in de hero van de behandelpagina's.
   Wit i.p.v. goud: witte tekst op de gouden knop haalt maar 2,5:1 contrast,
   terwijl donkere tekst op wit ruim boven de norm zit en op de donkere
   fotohero juist goed opvalt. */
.detail-hero .hero-cta{margin-top:28px}
@media(max-width:768px){.detail-hero .hero-cta{margin-top:22px}}

/* ------------------------------------------------------------------
   Mobiel menu: paneel over de volle breedte.

   `.main-nav` krijgt op desktop `justify-self:center` om het menu in de
   headerbalk te centreren. Op mobiel is `.main-nav` echter absoluut
   gepositioneerd met left:0/right:0; een absoluut gepositioneerd item met
   `justify-self:center` krimpt dan tot inhoudsbreedte in plaats van te
   strekken. Op de homepage won de regel
   `.home-page .site-header.scrolled .main-nav` (specificiteit 0,4,0) nog
   van de mobiele reset, waardoor het menu na scrollen als een smalle
   kolom opende.

   Onderstaande selectors zetten `justify-self` op mobiel expliciet terug.
   `top:100%` laat het paneel altijd direct onder de balk beginnen,
   ongeacht of de header 70, 76 of 110 px hoog is.
   ------------------------------------------------------------------ */
@media(max-width:768px){
 .main-nav,
 .home-page .main-nav,
 .home-page .site-header .main-nav,
 .home-page .site-header.scrolled .main-nav{justify-self:auto;justify-self:stretch}
 .main-nav{top:100%;max-height:calc(100vh - 70px)}
}

/* Actieprijs in het investeringsblok: de huidige prijs krijgt nadruk,
   de normale prijs staat er ingetogen en doorgehaald naast. */
.prijs-actie strong{font-weight:800}
.prijs-normaal{margin-left:10px;font-weight:400;color:var(--muted);text-decoration:line-through;
               text-decoration-thickness:1px}
@media(max-width:480px){.prijs-normaal{display:block;margin:4px 0 0}}