@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');
/* NOVA SEVEN - huisstijl Deep Forest / Warm Sand Gold - sitebreed geladen via website.custom_code_head (14 okt 2026). Homepage-secties: klassen .ns-* */
:root{
  --ns-forest:#1B3D2E; --ns-forest-deep:#123226; --ns-gold:#D6B86A; --ns-gold-deep:#B99642;
  --ns-bg:#FAF8F2; --ns-text:#1C2928; --ns-muted:#5D625F; --ns-line:#E9E1D2; --ns-sand:#F6EEDC;
  --ns-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ns-sans:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- header: gouden Contact-knop ---------- */
html body header#top a.btn.btn_cta,
html body header#top .navbar a.btn_cta{
  background:linear-gradient(135deg,#D6B86A,#E2C78A) !important; background-color:#D6B86A !important;
  color:#1C2928 !important; border:0 !important; border-radius:999px !important;
  padding:.5rem 1.25rem !important; font-family:var(--ns-serif) !important; font-weight:600 !important; font-size:.92rem !important;
  box-shadow:0 8px 20px rgba(185,150,66,.25) !important;
}
html body header#top a.btn.btn_cta::after{content:"\2192"; font-family:var(--ns-sans); margin-left:.6rem;}
html body header#top a.btn.btn_cta:hover{background:linear-gradient(135deg,#CDAE5E,#DBBE7C) !important; color:#1C2928 !important;}

/* ---------- algemeen op deze pagina ---------- */
#wrap:has(> section.ns-hero){background:var(--ns-bg);}
/* titels sitebreed in Source Serif 4 (Mat, 14 okt) */
#wrap :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6){font-family:var(--ns-serif); font-weight:600; letter-spacing:-.005em;}
#wrap :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4):is(.fw-bold,.fw-bolder){font-weight:600 !important;}
/* knoppen sitebreed volledig rond (Mat, 14 okt) */
#wrap .btn, #footer .btn, .o_footer .btn{border-radius:999px;}
.ns-container{width:min(1240px, calc(100% - 48px)); margin:0 auto;}
.ns-wide{width:min(1340px, calc(100% - 48px)); margin:0 auto;}
.ns-arrow{font-family:var(--ns-sans); font-weight:400; margin-left:.65em; display:inline-block; transition:transform .2s ease;}
a:hover .ns-arrow{transform:translateX(3px);}
.ns-eyebrow{font-family:var(--ns-sans); text-transform:uppercase; letter-spacing:.24em; font-size:12px; font-weight:600; color:#7B7D79; margin:0 0 18px;}
.ns-eyebrow .ns-sep{margin:0 .9em; color:#B8B5AC;}
.ns-icon{width:58px; height:58px; flex:0 0 58px; border-radius:50%; background:var(--ns-sand); display:inline-flex; align-items:center; justify-content:center;}
.ns-icon img{width:27px !important; height:27px !important; margin:0 !important; box-shadow:none !important; border:0 !important;}
.ns-icon.ns-icon-ring{background:#FFFBF2; border:1px solid rgba(214,184,106,.6);}

/* knoppen */
a.ns-btn{display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; border-radius:999px; font-family:var(--ns-serif); font-size:17px; font-weight:500; line-height:1.2; text-decoration:none !important; border:1px solid transparent; transition:all .2s ease;}
a.ns-btn-primary{background:linear-gradient(135deg,#1B3D2E,#123226); color:#fff !important; box-shadow:0 10px 24px rgba(27,61,46,.18);}
a.ns-btn-primary:hover{background:linear-gradient(135deg,#234A39,#173B2C); transform:translateY(-1px);}
a.ns-btn-outline{background:rgba(255,255,255,.7); color:var(--ns-forest) !important; border-color:#B9C2BC;}
a.ns-btn-outline:hover{background:#fff; border-color:var(--ns-forest);}
a.ns-btn-gold{background:linear-gradient(135deg,#D6B86A,#E3C98A); color:#1C2928 !important; box-shadow:0 10px 26px rgba(0,0,0,.22); padding:16px 38px;}
a.ns-btn-gold:hover{background:linear-gradient(135deg,#DDBF73,#EAD196); transform:translateY(-1px);}

/* ---------- hero ---------- */
section.ns-hero{position:relative; overflow:hidden; background:var(--ns-bg); min-height:480px; display:flex; align-items:center;}
.ns-hero .ns-hero-inner{position:relative; z-index:2; padding:56px 0 52px;}
.ns-hero .ns-hero-copy{max-width:760px;}
.ns-hero h1.ns-title{font-family:var(--ns-serif); font-weight:600; font-size:clamp(36px,3.5vw,54px); line-height:1.08; letter-spacing:-.012em; color:#13231C; margin:0 0 20px;}
.ns-title .ns-gold{background:linear-gradient(90deg,#A9853A 0%,#BE9A50 60%,#C9A862 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.ns-hero p.ns-lead{font-family:var(--ns-sans); font-size:18px; line-height:1.62; color:#4F5753; max-width:560px; margin:0 0 30px;}
.ns-cta-row{display:flex; flex-wrap:wrap; gap:14px;}
section.ns-hero > .ns-hero-media{position:absolute; z-index:1; top:0; right:0; bottom:0; left:30%; width:auto;}
.ns-hero-media img.ns-hero-photo{width:100%; height:100%; object-fit:cover; object-position:60% 55%; display:block; margin:0; border-radius:0;}
.ns-hero-media::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(250,248,242,1) 0%, rgba(250,248,242,.9) 14%, rgba(250,248,242,.55) 30%, rgba(250,248,242,.15) 44%, rgba(250,248,242,0) 54%);}

/* ---------- pijlers ---------- */
section.ns-pillars{background:#FDFCF9; border-top:1px solid #F0EADF; border-bottom:1px solid #F0EADF;}
.ns-pillars-grid{display:grid; grid-template-columns:repeat(3,1fr);}
.ns-pillar{display:flex; align-items:center; justify-content:center; gap:18px; padding:20px 18px; position:relative;}
.ns-pillar + .ns-pillar::before{content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:#E2DACB;}
.ns-pillar h3, #wrap .ns-pillar h3{font-family:var(--ns-serif); font-size:18px; font-weight:600; color:var(--ns-text); margin:0 0 3px;}
.ns-pillar p{font-family:var(--ns-sans); font-size:14px; color:#6E746F; margin:0;}

/* ---------- diensten-kaarten ---------- */
section.ns-services{padding:22px 0 14px;}
.ns-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ns-card{position:relative; display:block; background:#fff; border:1px solid #F0E8DA; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(28,41,40,.06); min-height:208px; transition:transform .25s ease, box-shadow .25s ease;}
.ns-card:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(28,41,40,.10);}
.ns-card-body{padding:22px 22px 22px 22px; position:relative; z-index:2;}
.ns-card-body > p{max-width:64%;}
.ns-card h3{white-space:nowrap;}
.ns-card-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.ns-card h3, #wrap .ns-card h3{font-family:var(--ns-serif); font-size:20px; font-weight:600; color:var(--ns-text); margin:0; line-height:1.2;}
.ns-card p{font-family:var(--ns-sans); font-size:15px; line-height:1.62; color:var(--ns-muted); margin:0 0 16px;}
a.ns-link{font-family:var(--ns-serif); font-size:16.5px; color:var(--ns-text) !important; text-decoration:none !important; white-space:nowrap;}
a.ns-link .ns-u{border-bottom:1px solid currentColor; padding-bottom:1px;}
a.ns-link:hover{color:var(--ns-forest) !important;}
.ns-card-media{position:absolute; top:0; right:0; bottom:0; width:40%; overflow:hidden; z-index:1;}
.ns-card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0;}
.ns-card-media::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#fff 0%, rgba(255,255,255,.85) 18%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 60%);}

/* ---------- waarom ---------- */
section.ns-why{padding:44px 0 26px; text-align:center;}
#wrap .ns-why h2.ns-why-title{font-family:var(--ns-serif); font-size:clamp(30px,3vw,40px); font-weight:600; color:#13231C; margin:0 0 10px;}
.ns-why p.ns-why-intro{font-family:var(--ns-sans); font-size:16px; line-height:1.6; color:var(--ns-muted); max-width:640px; margin:0 auto 28px;}
.ns-feature-row{display:grid; grid-template-columns:repeat(4,1fr); text-align:left;}
.ns-feature{display:flex; align-items:flex-start; gap:18px; padding:4px 26px; position:relative;}
.ns-feature + .ns-feature::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:#E2DACB;}
.ns-feature h4, #wrap .ns-feature h4{font-family:var(--ns-serif); font-size:17.5px; font-weight:600; color:var(--ns-text); margin:4px 0 6px;}
.ns-feature p{font-family:var(--ns-sans); font-size:14.5px; line-height:1.55; color:var(--ns-muted); margin:0;}

/* ---------- CTA-band ---------- */
section.ns-cta{padding:22px 0 56px;}
.ns-cta-panel{position:relative; overflow:hidden; border-radius:16px; color:#fff; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:28px; align-items:center; padding:34px 80px;
  background:url('/web/image/1393/ns-cta-ringen.svg') right bottom / cover no-repeat, linear-gradient(100deg,#0E2A1E 0%,#143627 40%,#1F4232 72%,#2B4A3A 100%);}
.ns-cta-panel .ns-eyebrow{color:var(--ns-gold); font-size:11.5px; margin:0 0 10px;}
#wrap .ns-cta-panel h2{font-family:var(--ns-serif); font-weight:500; font-size:clamp(26px,2.4vw,34px); line-height:1.22; color:#fff; margin:0;}
.ns-cta-action{text-align:center; position:relative; z-index:2;}
.ns-cta-action p{font-family:var(--ns-sans); font-size:13.5px; color:rgba(255,255,255,.78); margin:14px 0 0;}

/* ---------- tablet ---------- */
@media (max-width:991.98px){
  section.ns-hero{display:block; min-height:0; padding-bottom:28px;}
  .ns-hero .ns-hero-inner{padding:40px 0 8px;}
  section.ns-hero > .ns-hero-media{position:relative; left:auto; top:auto; right:auto; bottom:auto; width:auto; height:320px; margin:18px 24px 0; border-radius:18px; overflow:hidden;}
  .ns-hero-media img.ns-hero-photo{object-position:72% 55%;}
  .ns-hero-media::before{display:none;}
  .ns-pillars-grid{grid-template-columns:1fr;}
  .ns-pillar{justify-content:flex-start; padding:16px 6px;}
  .ns-pillar + .ns-pillar::before{left:0; right:0; top:0; bottom:auto; width:auto; height:1px;}
  .ns-card-grid{grid-template-columns:1fr; gap:16px;}
  .ns-feature-row{grid-template-columns:1fr 1fr; row-gap:24px;}
  .ns-feature:nth-child(3)::before{display:none;}
  .ns-cta-panel{grid-template-columns:1fr; padding:30px 28px; background-size:cover, auto; background-position:right bottom, 0 0;}
  .ns-cta-action{text-align:left;}
}
/* ---------- gsm ---------- */
@media (max-width:575.98px){
  .ns-container,.ns-wide{width:calc(100% - 32px);}
  .ns-hero h1.ns-title{font-size:36px;}
  .ns-hero p.ns-lead{font-size:16.5px;}
  a.ns-btn{width:100%;}
  section.ns-hero > .ns-hero-media{height:240px; margin:16px 16px 0;}
  .ns-eyebrow{letter-spacing:.1em; font-size:10.5px;}
  .ns-eyebrow .ns-sep{margin:0 .45em;}
  a.ns-btn{font-size:16px; padding:14px 20px;}
  a.ns-btn-gold{padding:15px 20px;}
  .ns-card-media{width:36%;}
  .ns-card h3{white-space:normal;}
  .ns-card-body{padding:18px 2px 18px 18px;}
  .ns-card h3, #wrap .ns-card h3{font-size:20px;}
  .ns-icon{width:50px; height:50px; flex-basis:50px;}
  .ns-feature-row{grid-template-columns:1fr;}
  .ns-feature{padding:4px 0;}
  .ns-feature + .ns-feature::before{display:none;}
}

/* ---------- menu ---------- */
html body header#top .navbar-nav .nav-link{font-size:.86rem !important; padding-left:.7rem !important; padding-right:.7rem !important; color:#1C2928 !important; white-space:nowrap;}

/* ---------- sectiekop links: eyebrow + grote titel + intro rechts (14 okt) ---------- */
.ns-eyebrow.ns-eyebrow-green{color:#2E5A43;}
#wrap h2.ns-section-title{font-size:clamp(32px,3.4vw,50px); line-height:1.08; letter-spacing:-.012em; color:#13231C; margin:0 0 6px;}
#wrap p.ns-section-intro{font-family:var(--ns-sans); font-size:16.5px; line-height:1.7; color:var(--ns-muted); margin:0 0 8px;}
@media (max-width:991.98px){#wrap p.ns-section-intro{margin-top:14px;}}
#wrap p.ns-card-label{font-family:var(--ns-sans); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#2E5A43; margin:0 0 12px;}

/* Foto op subpagina's (Overstappen, Contact, ...) */
#wrap img.ns-page-photo{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 40px rgba(28,41,40,.12);}
@media (max-width:991.98px){#wrap img.ns-page-photo{margin-top:32px;}}

/* Goud accent in titels op lichte achtergrond (donkerder goud, contrast >= 3:1 voor grote tekst) */
#wrap .ns-accent{background:linear-gradient(90deg,#8F6E2C 0%,#A9853A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}

/* Menu: keuzelijst in huisstijl (15 okt 2026) */
#wrapwrap header .navbar .dropdown-menu{border:1px solid rgba(28,41,40,.08);border-radius:14px;box-shadow:0 14px 34px rgba(28,41,40,.12);padding:8px;margin-top:10px;min-width:220px;}
#wrapwrap header .navbar .dropdown-menu .dropdown-item{border-radius:9px;padding:9px 14px;font-size:15px;color:#1C2928;}
#wrapwrap header .navbar .dropdown-menu .dropdown-item:hover,#wrapwrap header .navbar .dropdown-menu .dropdown-item:focus{background:#EEF3EF;color:#1B3D2E;}
#wrapwrap header .navbar .dropdown-menu .dropdown-item.active,#wrapwrap header .navbar .dropdown-menu .dropdown-item.active span{background-color:#EEF3EF;color:#1B3D2E;font-weight:600;}
#wrapwrap .o_mega_menu_is_offcanvas .accordion-collapse > .list-group{padding-left:18px !important;}
#wrapwrap .o_mega_menu_is_offcanvas .accordion-collapse .list-group .nav-link{font-size:15px;}


/* Salonpagina: beelden (15 okt 2026) */
#wrap img.ns-salon-hero{aspect-ratio:3/2; object-fit:cover; height:auto;}
#wrap img.ns-salon-portrait{aspect-ratio:4/5; object-fit:cover; height:auto; max-height:560px;}
#wrap img.ns-salon-feature{aspect-ratio:19/10; object-fit:cover; height:auto; border-radius:14px; box-shadow:0 10px 26px rgba(28,41,40,.10);}
#wrap p.ns-salon-feature-label{text-align:center; margin:14px 0 0;}
@media (max-width:991.98px){#wrap .ns-salon-features img.ns-page-photo{margin-top:0;}}
.ns-cta-panel.ns-cta-foto{background:url('/web/image/1393/ns-cta-ringen.svg') right bottom / cover no-repeat, linear-gradient(100deg,rgba(14,42,30,.95) 0%,rgba(20,54,39,.90) 40%,rgba(31,66,50,.80) 72%,rgba(43,74,58,.74) 100%), url('/web/image/1428/ns-salon-5-cta-achtergrond.webp') center 60% / cover no-repeat, #143627;}
@media (max-width:991.98px){.ns-cta-panel.ns-cta-foto{background-size:cover, auto, cover; background-position:right bottom, 0 0, center;}}


/* CTA met persoon (Valerie, salonpagina, 15 okt 2026) */
.ns-cta-persoon{display:flex; flex-direction:column; align-items:center; margin:0 0 18px;}
#wrap img.ns-cta-avatar{width:112px; height:112px; border-radius:50%; object-fit:cover; border:3px solid var(--ns-gold); box-shadow:0 8px 22px rgba(0,0,0,.28); margin:0 0 10px; display:block;}
#wrap p.ns-cta-naam{font-family:var(--ns-serif); font-size:17px; font-weight:500; color:#fff; margin:0; line-height:1.3;}
#wrap p.ns-cta-naam span{display:block; font-family:var(--ns-sans); font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ns-gold); margin-top:3px;}
@media (max-width:991.98px){.ns-cta-persoon{flex-direction:row; align-items:center; gap:14px;} #wrap img.ns-cta-avatar{width:80px; height:80px; margin:0;}}


/* Ruimte tussen pijlers en dienstkaarten op de homepage (Mat, 16 okt 2026) */
section.ns-services{padding-top:56px;}
@media (max-width:991.98px){section.ns-services{padding-top:36px;}}


/* Meer ruimte tussen dienstkaarten en "Herken je dit" (Mat, 20 okt 2026) */
section.ns-services{padding-bottom:64px;}
@media (max-width:991.98px){section.ns-services{padding-bottom:40px;}}


/* Goudaccent in sectietitels, zelfde verloop als de hero (Mat, 20 okt 2026) */
#wrap h2 .ns-gold{background:linear-gradient(90deg,#A9853A 0%,#BE9A50 60%,#C9A862 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}

/* Introtekst onder de sectietitel in plaats van ernaast (Mat, 20 okt 2026) */
#wrap h2.ns-section-title + p.ns-section-intro{margin-top:18px; max-width:640px;}

/* Kerncijfers Odoo onder de video (Mat, 20 okt 2026) */
#wrap .ns-kpi{background:#FFFFFF; border:1px solid var(--ns-line); border-radius:16px; padding:22px 20px 20px; height:100%; box-shadow:0 6px 18px rgba(27,61,46,.05);}
#wrap .ns-kpi::before{content:''; display:block; width:28px; height:3px; border-radius:2px; background:var(--ns-gold); margin-bottom:14px;}
#wrap p.ns-kpi-num{font-family:var(--ns-serif); font-size:clamp(26px,2.5vw,36px); font-weight:600; line-height:1.1; color:var(--ns-forest); margin:0 0 6px;}
#wrap p.ns-kpi-label{font-family:var(--ns-sans); font-size:14.5px; line-height:1.45; color:var(--ns-muted); margin:0;}
#wrap p.ns-kpi-bron{font-family:var(--ns-sans); font-size:12.5px; color:var(--ns-muted); margin:4px 0 0;}

/* Vijf kerncijfers naast elkaar: getallen op één regel (Mat, 20 okt 2026) */
#wrap .ns-kpis p.ns-kpi-num{font-size:clamp(22px,1.9vw,30px); white-space:nowrap;}
#wrap .ns-kpis .ns-kpi{padding:20px 18px 18px;}

/* Zwevend robotje links in de AI-sectie (Mat, 20 okt 2026) */
#wrap section[data-name="AI die meteen werkt"]{position:relative; overflow:hidden;}
#wrap .ns-robot{position:absolute; left:max(20px,7vw); top:36px; width:92px; pointer-events:none; z-index:1;}
#wrap .ns-robot img{display:block; animation:ns-robot-float 4.6s ease-in-out infinite; transform-origin:50% 60%;}
#wrap .ns-robot::after{content:''; display:block; width:52px; height:9px; margin:4px auto 0; border-radius:50%; background:rgba(27,61,46,.13); animation:ns-robot-shadow 4.6s ease-in-out infinite;}
@keyframes ns-robot-float{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-14px) rotate(4deg);}}
@keyframes ns-robot-shadow{0%,100%{transform:scaleX(1); opacity:1;} 50%{transform:scaleX(.7); opacity:.55;}}
@media (prefers-reduced-motion:reduce){#wrap .ns-robot img, #wrap .ns-robot::after{animation:none;}}
@media (max-width:991.98px){#wrap .ns-robot{display:none;}}
@media (min-width:992px) and (max-width:1199.98px){#wrap .ns-robot{left:24px; top:12px; width:72px;}}

/* Waarom Nova Seven: meer lucht, icoon boven de tekst (Mat, 20 okt 2026) */
section.ns-why{padding:72px 0 64px;}
.ns-why p.ns-why-intro{margin:0 auto 44px;}
#wrap .ns-why .ns-feature-row{gap:0;}
#wrap .ns-why .ns-feature{flex-direction:column; align-items:center; text-align:center; padding:8px 24px 4px;}
#wrap .ns-why .ns-feature .ns-icon{margin:0 0 14px;}
#wrap .ns-why .ns-feature h4{margin:0 0 8px;}
#wrap .ns-why .ns-feature p{margin:0; max-width:220px;}
@media (max-width:991.98px){section.ns-why{padding:48px 0 40px;} #wrap .ns-why .ns-feature{padding:14px 16px;}}