/*
Theme Name: Northbound Digital
Theme URI: https://northbounddigital.eu
Author: Northbound Digital
Description: Maatwerkthema voor Northbound Digital. Donkere, typografische opzet met NL/EN-schakelaar, dienstenoverzicht, casepagina en offerteformulier. Afbeeldingen instelbaar via Weergave > Aanpassen.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northbound
*/

/* ---------- Tokens ---------- */
:root{
  --navy:#12263F;
  --navy-deep:#0D1C2E;
  --cream:#FBF8F3;
  --tan:#C6A17B;
  --tan-ink:#96703F;
  --max:1240px;
}

/* ---------- Reset & basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-deep);color:var(--cream);font-family:Karla,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--tan)}
::selection{background:var(--tan);color:var(--navy)}
:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
h1,h2,h3,h4{font-family:Jost,system-ui,sans-serif;font-weight:300;letter-spacing:-0.025em;margin:0}
h3{font-weight:500;letter-spacing:0}
p{margin:0}
button{font-family:inherit}
.nb-skip{position:absolute;left:-9999px}
.nb-skip:focus{left:16px;top:16px;z-index:200;background:var(--tan);color:var(--navy);padding:10px 16px;font-weight:700}
.nb-wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.nb-kicker{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--tan)}
.nb-kicker--ink{color:var(--tan-ink)}
.nb-kicker--rule{display:flex;align-items:center;gap:14px}
.nb-kicker--rule::before{content:"";width:44px;height:1px;background:linear-gradient(90deg,rgba(198,161,123,0),var(--tan))}
.nb-lead{font-size:17px;line-height:1.58}
.nb-muted{color:rgba(251,248,243,.7)}
.nb-muted-ink{color:rgba(18,38,63,.72)}

/* ---------- Secties ---------- */
.nb-sec{padding:88px 0}
.nb-sec--navy{background:var(--navy)}
.nb-sec--deep{background:var(--navy-deep);border-top:1px solid rgba(198,161,123,.22)}
.nb-sec--cream{background:var(--cream);color:var(--navy)}

/* ---------- Header ---------- */
.nb-header{position:sticky;top:0;z-index:60;background:rgba(13,28,46,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(251,248,243,.10)}
.nb-header__inner{max-width:var(--max);margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:28px}
.nb-brand{display:flex;align-items:center;gap:12px}
.nb-brand img{height:32px;width:auto}
.nb-brand__text{display:flex;flex-direction:column;line-height:1}
.nb-brand__name{font-family:Jost,sans-serif;font-size:15px;font-weight:500;letter-spacing:.18em}
.nb-brand__sub{font-family:Jost,sans-serif;font-size:9px;letter-spacing:.42em;color:var(--tan);margin-top:4px}
.nb-nav{margin-left:auto}
.nb-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14.5px}
.nb-nav a{white-space:nowrap;position:relative;color:rgba(251,248,243,.78)}
.nb-nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--tan);transition:width .3s ease}
.nb-nav a:hover::after,.nb-nav .current-menu-item>a::after{width:100%}
.nb-nav .current-menu-item>a{color:var(--tan);font-weight:700}
.nb-lang{background:transparent;border:1px solid rgba(251,248,243,.26);color:var(--cream);padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:border-color .3s ease,color .3s ease}
.nb-lang:hover{border-color:var(--tan);color:var(--tan)}
.nb-header .nb-btn--ghost{padding:11px 20px;font-size:13.5px}
.nb-burger{display:none;background:transparent;border:1px solid rgba(251,248,243,.26);color:var(--cream);padding:9px 12px;font-size:13px;cursor:pointer}

/* ---------- Buttons ---------- */
.nb-btn{display:inline-block;padding:17px 28px;font-size:15px;font-weight:700;white-space:nowrap;transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;border:1px solid transparent;background:transparent;cursor:pointer}
.nb-btn--tan{background:var(--tan);color:var(--navy)}
.nb-btn--tan:hover{background:var(--cream);color:var(--navy);transform:translateY(-2px)}
.nb-btn--navy{background:var(--navy);color:var(--cream)}
.nb-btn--navy:hover{background:var(--tan);color:var(--navy)}
.nb-btn--outline{border-color:rgba(251,248,243,.3);color:var(--cream);font-weight:600}
.nb-btn--outline:hover{border-color:var(--tan);color:var(--tan)}
.nb-btn--outline-ink{border-color:rgba(18,38,63,.24);color:var(--navy);font-weight:600}
.nb-btn--outline-ink:hover{border-color:var(--tan);color:var(--navy)}
.nb-btn--ghost{border-color:var(--tan);color:var(--tan)}
.nb-btn--ghost:hover{background:var(--tan);color:var(--navy)}
.nb-link{position:relative;font-size:15px;font-weight:700;display:inline-block}
.nb-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--tan);transition:width .3s ease}
.nb-link:hover::after{width:100%}
.nb-link--tan{color:var(--tan)}

/* ---------- Hero ---------- */
.nb-hero{background:var(--navy);position:relative;overflow:hidden}
.nb-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,rgba(198,161,123,.20),rgba(18,38,63,0) 62%);pointer-events:none}
.nb-hero__inner{position:relative;max-width:var(--max);margin:0 auto;padding:104px 32px 72px}
.nb-hero h1{font-size:clamp(44px,7.2vw,96px);line-height:.98;letter-spacing:-.03em;margin:26px 0 0;max-width:15ch;text-wrap:balance}
.nb-hero h1 em{font-style:normal;color:var(--tan)}
.nb-hero__row{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;align-items:end}
.nb-hero__row p{font-size:18px;line-height:1.56;color:rgba(251,248,243,.72);max-width:46ch}
.nb-actions{display:flex;gap:12px;flex-wrap:wrap}
.nb-strip{border-top:1px solid rgba(251,248,243,.12)}
.nb-strip__inner{max-width:var(--max);margin:0 auto;padding:20px 32px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.nb-badges{display:flex;gap:10px;flex-wrap:wrap}
.nb-badge{border:1px solid rgba(198,161,123,.5);color:var(--tan);padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.06em}
.nb-badge--ink{border-color:rgba(150,112,63,.5);color:var(--tan-ink)}
.nb-strip__note{font-size:13.5px;color:rgba(251,248,243,.5)}

/* ---------- Case ---------- */
.nb-case{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;margin-top:22px;align-items:start}
.nb-case h2{font-size:clamp(36px,4.4vw,60px);line-height:1.02}
.nb-case__meta{font-size:14px;letter-spacing:.06em;color:rgba(18,38,63,.55);margin-top:12px}
.nb-case p{font-size:16.5px;line-height:1.62;color:rgba(18,38,63,.74);margin-top:22px;max-width:52ch}
.nb-stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:34px}
.nb-stat__n{font-family:Jost,sans-serif;font-size:64px;line-height:.85;letter-spacing:-.03em}
.nb-stat__n--mute{color:rgba(18,38,63,.35)}
.nb-stat__l{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(18,38,63,.5);margin-top:8px}
.nb-frame{background:var(--navy);overflow:hidden}
.nb-frame img{width:100%;height:100%;object-fit:cover}
.nb-frame--45{aspect-ratio:4/5}
.nb-frame--32{aspect-ratio:3/2}
.nb-frame__ph{width:100%;height:100%;min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:12.5px;letter-spacing:.06em;color:rgba(251,248,243,.5);background:repeating-linear-gradient(135deg,rgba(251,248,243,.06) 0 10px,rgba(251,248,243,.02) 10px 20px)}

/* ---------- Dienstenrijen ---------- */
.nb-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.nb-split h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin-top:16px}
.nb-split__intro{font-size:15.5px;line-height:1.6;color:rgba(251,248,243,.6);margin-top:18px;max-width:34ch}
.nb-rows{border-bottom:1px solid rgba(251,248,243,.13)}
.nb-row{display:grid;grid-template-columns:56px 1fr 24px;gap:20px;padding:26px 8px 26px 0;align-items:baseline;border-top:1px solid rgba(251,248,243,.13);transition:background .35s ease}
.nb-row:hover{background:rgba(198,161,123,.06)}
.nb-row__n{font-family:Jost,sans-serif;font-size:13px;letter-spacing:.1em;color:var(--tan)}
.nb-row__t{display:block;font-family:Jost,sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:-.01em}
.nb-row__b{display:block;font-size:15px;line-height:1.56;color:rgba(251,248,243,.6);margin-top:8px;max-width:56ch}
.nb-row__a{font-size:18px;color:var(--tan);opacity:.35;transition:transform .3s ease,opacity .3s ease}
.nb-row:hover .nb-row__a{transform:translateX(6px);opacity:1}

/* ---------- GEO ---------- */
.nb-geo{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.nb-geo h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06;margin-top:18px;max-width:24ch}
.nb-geo p{font-size:16.5px;line-height:1.62;color:rgba(251,248,243,.7);margin-top:20px;max-width:52ch}
.nb-list{border-bottom:1px solid rgba(251,248,243,.12)}
.nb-list__i{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:18px 0;border-top:1px solid rgba(251,248,243,.12);align-items:baseline}
.nb-list__n{font-family:Jost,sans-serif;font-size:12px;color:rgba(198,161,123,.8)}
.nb-list__t{font-family:Jost,sans-serif;font-size:18px;color:rgba(251,248,243,.86)}

/* ---------- Waarom / kolommen ---------- */
.nb-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;margin-top:44px}
.nb-cols--4{grid-template-columns:repeat(4,1fr);gap:30px}
.nb-col{border-top:1px solid rgba(18,38,63,.18);padding-top:16px}
.nb-col--dark{border-top-color:rgba(251,248,243,.16)}
.nb-col__n{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.1em;color:var(--tan-ink)}
.nb-col--dark .nb-col__n{color:var(--tan)}
.nb-col h3{font-size:19px;margin:12px 0 8px}
.nb-col p{font-size:14.5px;line-height:1.56;color:rgba(18,38,63,.68)}
.nb-col--dark p{color:rgba(251,248,243,.64)}
.nb-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.nb-tag{border:1px solid rgba(18,38,63,.2);padding:9px 16px;font-size:13.5px}
.nb-pill{border:1px solid rgba(18,38,63,.18);padding:8px 15px;font-size:13px;border-radius:100px}
.nb-divider{margin-top:72px;padding-top:40px;border-top:1px solid rgba(18,38,63,.12)}

/* ---------- CTA-band ---------- */
.nb-cta{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.nb-cta h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06}
.nb-cta p{font-size:16.5px;line-height:1.6;color:rgba(251,248,243,.68);margin-top:16px;max-width:50ch}
.nb-cta__side{display:grid;gap:12px;justify-items:start}
.nb-cta__note{font-size:13px;color:rgba(251,248,243,.5)}

/* ---------- Pagina-koppen ---------- */
.nb-phead{background:var(--navy);padding:88px 0 64px}
.nb-phead__inner{max-width:var(--max);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.nb-phead h1{font-size:clamp(36px,5vw,62px);line-height:1.02;margin-top:20px}
.nb-phead p{font-size:16px;line-height:1.6;color:rgba(251,248,243,.64)}
.nb-phead--single .nb-phead__inner{display:block}
.nb-phead--single p{margin-top:18px;max-width:58ch}

/* ---------- Dienstenpagina ---------- */
.nb-svc{display:grid;grid-template-columns:.62fr 1.38fr;gap:40px;padding:44px 0;border-bottom:1px solid rgba(18,38,63,.14)}
.nb-svc__label{font-family:Jost,sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan-ink)}
.nb-svc h2{font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.06;margin-top:14px}
.nb-svc p{font-size:16.5px;line-height:1.62;color:rgba(18,38,63,.74);max-width:62ch}
.nb-svc__tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.nb-endcta{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-top:44px}
.nb-endcta h2{font-size:clamp(22px,2.4vw,32px);line-height:1.2;max-width:44ch}

/* ---------- Casepagina ---------- */
.nb-workhead{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.nb-bignum{font-family:Jost,sans-serif;font-size:clamp(72px,10vw,132px);line-height:.82;letter-spacing:-.04em}
.nb-bignum--sm{font-size:clamp(40px,5vw,66px);color:rgba(18,38,63,.34)}
.nb-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:64px;padding-top:36px;border-top:1px solid rgba(18,38,63,.14)}
.nb-block__l{font-family:Jost,sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(18,38,63,.48)}
.nb-block p{font-size:14.5px;line-height:1.56;color:rgba(18,38,63,.72);margin-top:12px}
.nb-foot-note{font-size:14px;color:rgba(18,38,63,.45);margin-top:56px;padding-top:24px;border-top:1px solid rgba(18,38,63,.1)}

/* ---------- Over ---------- */
.nb-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.nb-about h2{font-size:clamp(28px,3.4vw,42px);line-height:1.08;margin-top:16px}
.nb-about p{font-size:16.5px;line-height:1.62;color:rgba(18,38,63,.74);margin-top:20px}

/* ---------- Contact ---------- */
.nb-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.nb-contact__intro{font-size:16.5px;line-height:1.62;color:rgba(18,38,63,.72);max-width:44ch}
.nb-contact__links{display:grid;gap:12px;margin-top:28px;font-size:16px;justify-items:start}
.nb-form{background:var(--navy);color:var(--cream);padding:40px;display:grid;gap:18px}
.nb-form__title{font-family:Jost,sans-serif;font-size:21px;font-weight:500}
.nb-form__two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nb-field{display:grid;gap:7px}
.nb-field label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,243,.62)}
.nb-field input,.nb-field select,.nb-field textarea{background:rgba(251,248,243,.06);border:1px solid rgba(251,248,243,.22);color:var(--cream);padding:14px 15px;font-size:15.5px;font-family:Karla,sans-serif;outline:none;border-radius:0;width:100%}
.nb-field textarea{resize:vertical}
.nb-field input:focus,.nb-field select:focus,.nb-field textarea:focus{border-color:var(--tan)}
.nb-field select option{color:var(--navy)}
.nb-form__note{font-size:12.5px;color:rgba(251,248,243,.5);text-align:center}
.nb-notice{background:rgba(198,161,123,.14);border:1px solid var(--tan);color:var(--cream);padding:14px 16px;font-size:14.5px}

/* ---------- Footer ---------- */
.nb-footer{background:var(--navy-deep);color:rgba(251,248,243,.72);border-top:1px solid rgba(251,248,243,.1)}
.nb-footer__top{max-width:var(--max);margin:0 auto;padding:60px 32px 26px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.nb-footer__top img{height:44px;width:auto}
.nb-footer__tagline{font-size:14.5px;line-height:1.6;margin-top:18px;max-width:36ch}
.nb-footer__col{display:grid;gap:11px;font-size:14.5px;align-content:start;justify-items:start}
.nb-footer__h{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,243,.42)}
.nb-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;justify-items:start}
.nb-footer__bar{max-width:var(--max);margin:0 auto;padding:20px 32px 40px;border-top:1px solid rgba(251,248,243,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:rgba(251,248,243,.45)}
.nb-footer__bar a:hover{color:var(--tan)}

/* ---------- Cookiebanner ---------- */
.nb-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--navy-deep);border-top:1px solid rgba(198,161,123,.35);box-shadow:0 -12px 30px rgba(13,28,46,.35)}
.nb-cookie[hidden]{display:none!important}
.nb-cookie__inner{max-width:var(--max);margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.nb-cookie__text{margin:0;font-size:14px;line-height:1.55;color:rgba(251,248,243,.78);max-width:640px}
.nb-cookie__text a{color:var(--tan);text-decoration:underline}
.nb-cookie__actions{display:flex;gap:12px;flex-shrink:0}
.nb-cookie .nb-btn{padding:12px 22px;font-size:13.5px}
@media (max-width:640px){.nb-cookie__inner{flex-direction:column;align-items:stretch}.nb-cookie__actions{justify-content:flex-end}}

/* ---------- WP-content (blokken op losse pagina's) ---------- */
.nb-entry{max-width:70ch;font-size:17px;line-height:1.68;color:rgba(18,38,63,.82)}
.nb-entry h2,.nb-entry h3{margin:32px 0 12px;color:var(--navy)}
.nb-entry p{margin:0 0 18px}
.nb-entry a{color:var(--tan-ink);text-decoration:underline}
.nb-entry ul,.nb-entry ol{margin:0 0 18px;padding-left:22px}
.nb-entry img{margin:24px 0}
.nb-pagination{margin-top:40px;font-size:15px}

/* ---------- EN (primair) / NL ---------- */
.nb-en,.nb-nl{display:contents}
body:not(.nb-lang-nl) .nb-nl{display:none}
body.nb-lang-nl .nb-en{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .nb-nav{display:none}
  .nb-burger{display:inline-block;margin-left:auto}
  .nb-nav.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--navy-deep);border-bottom:1px solid rgba(251,248,243,.12);padding:18px 32px}
  .nb-nav.is-open ul{flex-direction:column;gap:16px}
  .nb-header__inner{position:relative;flex-wrap:wrap}
}
@media (max-width:900px){
  .nb-hero__row,.nb-case,.nb-split,.nb-geo,.nb-cta,.nb-phead__inner,.nb-svc,.nb-endcta,.nb-workhead,.nb-about,.nb-contact,.nb-form__two,.nb-strip__inner{grid-template-columns:1fr!important}
  .nb-cols,.nb-cols--4,.nb-blocks{grid-template-columns:1fr 1fr!important}
  .nb-footer__top{grid-template-columns:1fr!important}
  .nb-sec{padding:64px 0}
  .nb-hero__inner{padding:72px 24px 56px}
  .nb-wrap,.nb-header__inner,.nb-strip__inner,.nb-phead__inner,.nb-footer__top,.nb-footer__bar{padding-left:24px;padding-right:24px}
  .nb-form{padding:26px}
}
@media (max-width:560px){
  .nb-cols,.nb-cols--4,.nb-blocks{grid-template-columns:1fr!important}
  .nb-btn{padding:15px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.nb-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.nb-reveal.is-visible{opacity:1;transform:translateY(0)}