@font-face{font-family:'Mulish';src:url('assets/mulish-latin-ext.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mulish';src:url('assets/mulish-latin.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------------------------------------------------------------------------
   Taxi Jenny — 1-op-1 overgenomen van de Avada-site (nagemeten computed styles).
   Rood #AD1F34, donkergrijs #353637, lopende tekst #929AA3 in Mulish 600.
   Mulish is een variabel font: één bestand per subset dekt 600 t/m 800.
   --------------------------------------------------------------------------- */
:root{
  --sp-container:1180px;
  --sp-narrow:800px;
  --sp-gutter:20px;
  --sp-gap:46px;   /* Avada rekent kolommen op 1140 min 46 px tussenruimte */
  --sp-primary:#AD1F34;
  --sp-primary-contrast:#fff;
  --sp-secondary:#353637;
  --sp-text:#929AA3;
  --sp-muted:#929AA3;
  --sp-line:#CECECE;
  --sp-surface:#F7F7F7;
  --sp-radius:4px;
  --sp-btn-radius:25px;
  --sp-shadow:0 2px 10px rgba(0,0,0,.12);
  --sp-font:'Mulish',sans-serif;
  --sp-font-heading:var(--sp-font);
  --tj-kop:#494C4E;        /* koppen in de lopende inhoud */
  --tj-staal:#7799AD;      /* de blauwgrijze tussenkoppen op de vacaturepagina's */
  --tj-balk:#353637;       /* bovenbalk en half-doorzichtige kop */
  --tj-voet:#363839;
  --tj-voet-onder:#1C1D1E;
}

body{font-weight:600;font-size:16px;line-height:32px;color:var(--sp-text);background:#D7D6D6}
main{background:#fff}

h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);margin:0}
h1{font-size:60px;line-height:84px;font-weight:700}
h2{font-size:40px;line-height:60px;font-weight:800;color:var(--tj-kop)}
h3{font-size:30px;line-height:45px;font-weight:700;color:var(--sp-primary)}
/* In de lopende tekst zijn de h4's de blauwgrijze tussenkoppen van de vacatures;
   een kop-widget met tag h4 (zoals "Solliciteer nu!") is gewoon zwart. */
h4{font-size:21px;line-height:31.5px;font-weight:800;color:var(--tj-staal);margin:27.93px 0}
h5,h6{font-size:18px;line-height:28px;font-weight:800;color:var(--tj-kop)}
.sp-heading.sp-heading{margin:0}
h4.sp-heading{color:#000}
p{margin:0 0 20px}
ul,ol{padding-left:40px;margin:16px 0}
li{margin:0}
a{color:var(--sp-primary)}

/* --- secties: de oude site ademt met 80 px boven en onder --- */
.sp-pad-m{padding:80px 0}
.sp-pad-s{padding:40px 0}
.sp-pad-l{padding:100px 0}

/* De kop staat absoluut over de eerste sectie; die vangt de hoogte van balk + kop op. */
/* De bovenbalk (45 px) staat wél in de flow, de kop valt eroverheen; de padding hieronder is
   de maat van de oude site min die 45 px, zodat de secties eronder op dezelfde hoogte beginnen. */
main>.sp-section:first-child{padding:145px 0 33px;min-height:262px}
.is-home main>.sp-section:first-child{padding:245px 0 187px}
/* Op een donkere sectie (scheme light) zijn alle koppen wit; de eigen kleur van h2/h3 wint
   anders van de overerfde kleur van de sectie. */
.sp-scheme-light h1,.sp-scheme-light h2,.sp-scheme-light h3,.sp-scheme-light h4,.sp-scheme-light h5,.sp-scheme-light h6{color:#fff}
main>.sp-section:first-child h1{color:#fff}
main>.sp-section:first-child .sp-text{color:#fff;font-size:21px;line-height:31.5px;font-weight:700}

/* --- bovenbalk --- */
.tj-balk{background:var(--tj-balk);color:#929AA3;font-size:13px;line-height:45px}
.tj-balk-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tj-balk p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-balk a{color:#929AA3;text-decoration:none}
.tj-balk a:hover{color:#fff}
.tj-sociaal{display:inline-flex;align-items:center;color:#BEBDBD}
.tj-sociaal svg{width:16px;height:16px}

/* --- kop: half doorzichtig, over de hero --- */
.tj-kop{position:absolute;left:0;right:0;z-index:100;background:rgba(53,54,55,.5)}
.tj-kop-inner{display:flex;align-items:center;justify-content:space-between;height:140px;gap:2rem}
.tj-logo{flex:none;display:block}
.tj-logo img{width:120px;height:auto;display:block}
.tj-nav .sp-menu{display:flex;align-items:center;gap:25px;list-style:none;margin:0;padding:0 25px 0 0}
.tj-nav .sp-menu li{position:relative;margin:0}
.tj-nav .sp-menu a{font-size:14px;font-weight:800;line-height:1;color:#fff;text-decoration:none;white-space:nowrap}
/* De core geeft menulinks padding en afgeronde hoeken; de oude site heeft daar niets van,
   de tussenruimte komt volledig van de gap hierboven. De knoppen zetten hun eigen padding terug. */
.tj-nav>.sp-menu>li>a{padding:0;border-radius:0}
.tj-nav>.sp-menu>li.is-active>a{color:var(--sp-primary)}
.tj-nav>.sp-menu>li.is-active>a::after{content:"";display:block;height:2px;background:var(--sp-primary);margin-top:6px}
.tj-nav .sp-menu a:hover{color:var(--sp-primary)}
/* De laatste twee menu-items zijn knoppen, net als op de oude site (fusion-menu-item-button).
   Verandert het menu, dan verschuift die opmaak mee naar de laatste twee items. */
.tj-nav>.sp-menu>li:nth-last-child(-n+2)>a{background:var(--sp-primary);color:#fff;border-radius:25px;padding:13px 29px;display:inline-block}
.tj-nav>.sp-menu>li:nth-last-child(-n+2)>a:hover{background:#8d1a2b;color:#fff}
.tj-nav>.sp-menu>li:nth-last-child(-n+2).is-active>a::after{display:none}
.tj-nav>.sp-menu>li:last-child>a{padding-left:58px}
.tj-nav>.sp-menu>li:last-child{position:relative}
.tj-nav>.sp-menu>li:last-child::before{content:"";position:absolute;left:38px;top:50%;transform:translateY(-50%);width:1px;height:26px;background:rgba(255,255,255,.45);z-index:1;pointer-events:none}
.tj-nav>.sp-menu>li:last-child::after{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:11px;height:17px;background:#fff;z-index:1;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z'/%3E%3C/svg%3E") no-repeat center/contain}
/* Uitklapmenu zoals op de oude site: een donker doorzichtig paneel van 180 px met gewone witte
   tekstlinks en een rode balk bij hover. De regels voor de CTA-knoppen hierboven staan bewust op
   .tj-nav>.sp-menu: de menu-renderer geeft het submenu óók de klasse sp-menu, dus zonder dat
   kind-teken kregen Dispatcher en Chauffeur de rode pilstijl (en het telefoonicoon) mee. */
.tj-nav .sp-menu-sub{position:absolute;top:100%;left:0;width:180px;min-width:180px;background:rgba(10,9,9,.7);box-shadow:none;border-radius:0;padding:0;display:none;flex-direction:column;align-items:stretch;gap:0}
.tj-nav .sp-menu-sub>li{width:100%}
.tj-nav .sp-menu li:hover>.sp-menu-sub{display:flex}
.tj-nav .sp-menu-sub a{display:block;padding:7px 20px;font-size:14px;font-weight:600;line-height:28px;color:#fff;text-transform:none;background:none;border-radius:0}
.tj-nav .sp-menu-sub a:hover{background:var(--sp-primary);color:#fff}
.tj-menu-toggle,.sp-menu-toggle{display:none}
.tj-knop{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.tj-knop span{width:26px;height:3px;background:#fff;border-radius:2px}

/* --- knoppen --- */
.sp-btn,.sp-button,button[type=submit],input[type=submit]{font-family:var(--sp-font);font-size:14px;font-weight:800;line-height:17px;text-transform:uppercase;background:var(--sp-primary);color:#fff;border:0;border-radius:25px;padding:13px 29px;cursor:pointer}
.sp-btn:hover,button[type=submit]:hover,input[type=submit]:hover{background:#8d1a2b;color:#fff}

/* --- formulieren --- */
.sp-form label,.sp-field label{font-size:16px;line-height:32px;font-weight:600;color:var(--sp-text)}
.sp-form input[type=text],.sp-form input[type=email],.sp-form input[type=tel],.sp-form select,.sp-form textarea,
input[type=text],input[type=email],input[type=tel],textarea,select{font-family:var(--sp-font);font-size:13px;background:#F7F7F7;border:1px solid #D8D8D8;border-radius:4px;padding:0 15px;color:#555;width:100%}
.sp-form input[type=text],.sp-form input[type=email],.sp-form input[type=tel],input[type=text],input[type=email],input[type=tel]{height:50px}
.sp-form textarea,textarea{padding:14px 15px;min-height:150px;line-height:1.5}
.sp-form ::placeholder{color:#AAA9A9}

/* --- de witte formulierkaart op de homepage: schuift met zijn bovenrand over de hero --- */
.tj-formkaart{background:#fff;border-radius:10px;box-shadow:0 25px 20px rgba(61,61,61,.1);padding:40px;margin-top:-120px}
.tj-formkaart .sp-heading{margin-bottom:10px}
.tj-formkaart .sp-form{text-align:left}

/* De eerste alinea van de homepage-inleiding staat op de oude site groter. */
.tj-intro p:first-child{font-size:21px;line-height:42px}

/* --- de witte kaart op de contactpagina (twee kolommen die samen één kaart vormen) --- */
.tj-kaart .sp-row{background:#fff;border-radius:10px;box-shadow:0 45px 40px rgba(0,44,91,.3);padding:60px}
.tj-kaart .sp-col{padding:0}
.tj-kaart .sp-col:first-child{padding-right:35px}
/* De sectie eromheen staat op "licht" voor de achtergrondfoto; binnen de witte kaart
   gelden gewoon de donkere tekstkleuren weer. */
.tj-kaart .sp-row,.tj-formkaart{color:var(--sp-text)}
.tj-kaart .sp-row h1,.tj-kaart .sp-row h2,.tj-formkaart h1,.tj-formkaart h2{color:var(--tj-kop)}
.tj-kaart .sp-row h3,.tj-formkaart h3{color:var(--sp-primary)}
.tj-kaart .sp-row h4,.tj-formkaart h4{color:var(--tj-staal)}
.tj-kaart .sp-row h4.sp-heading,.tj-formkaart h4.sp-heading{color:#000}
.tj-kaart .sp-row a:not(.sp-btn),.tj-formkaart a:not(.sp-btn){color:var(--sp-primary)}
/* De telefoonnummers in de kaart staan op de oude site iets kleiner dan de kopjes eromheen. */
.tj-tel-groot h3{font-size:26px;line-height:39px}

/* --- teamkaarten: ronde foto, rode naam, grijze regel, lijntje eronder --- */
.sp-card{text-align:center;border:0;border-bottom:1px solid var(--sp-line);border-radius:0;padding:0 0 30px;margin-bottom:30px;background:none;box-shadow:none}
.sp-card .sp-post-img{border-radius:50%;overflow:hidden;width:min(300px,100%);aspect-ratio:1;margin:0 auto 20px;background:none}
.sp-card .sp-post-img img{border-radius:50%;width:100%;height:100%;object-fit:cover;display:block}
.sp-card .sp-post-body{padding:0}
.sp-card .sp-post-title{font-size:21px;line-height:31.5px;font-weight:800;color:var(--sp-primary);margin:0}
.sp-card .sp-post-title a{color:inherit;text-decoration:none}
.sp-card .sp-post-excerpt{color:var(--sp-text);font-size:16px;line-height:32px}
.sp-card .sp-post-excerpt p{margin:0}

/* De app-store-badges staan op de oude site op ware grootte, gecentreerd, met een lijn eronder. */
.tj-appbadge img{max-width:120px;width:100%;height:auto;margin:0 auto}
.tj-appbadge{text-align:center}

/* --- voet --- */
.tj-voet{background:var(--tj-voet-onder)}
.tj-voet-widgets{background:var(--tj-voet) url('../../../uploads/taxijenny/2026/10/footer-background-color.jpg') center/cover;padding:70px 0}
.tj-voet-inner{display:flex;gap:60px;justify-content:space-between;align-items:flex-start}
.tj-voet-merk{flex:0 1 420px}
.tj-voet-merk img{width:240px;height:auto;display:block;margin-bottom:24px}
.tj-voet-merk p{font-size:13px;line-height:26px;color:var(--sp-text);margin:0}
.tj-voet-contact{flex:0 1 420px;color:var(--sp-text);font-size:13px;line-height:26px}
.tj-voet-kop{color:#fff;font-size:16px;line-height:32px;margin:0 0 14px}
.tj-voet-contact ul{list-style:none;margin:0;padding:0}
.tj-voet-contact li{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;line-height:28.9px}
.tj-voet-contact li svg{flex:none;width:17px;height:17px;margin-top:5px;color:#BBCBD3}
.tj-voet-contact a{color:var(--sp-text);text-decoration:none}
.tj-voet-contact a:hover{color:#fff}
.tj-voet-onder{padding:50px 0}
.tj-voet-onder-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.tj-voet-onder p{margin:0;font-size:13px;color:var(--sp-text)}
.tj-voet-legal{display:flex;align-items:center;gap:1rem;font-size:13px}
.tj-voet-legal a{color:var(--sp-text);text-decoration:none}
.tj-voet-legal a:hover{color:#fff}

/* --- responsief --- */
@media(max-width:1100px){
  h1{font-size:40px;line-height:1.2}
  h2{font-size:30px;line-height:1.3}
  h3{font-size:24px;line-height:1.35}
}
@media(max-width:900px){
  .tj-knop{display:flex}
  .tj-balk p{white-space:normal;font-size:12px;line-height:1.5;padding:8px 0}
  .tj-balk{line-height:1.5}
  .tj-nav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--tj-balk);padding:90px 1.5rem 2rem;transform:translateX(100%);transition:.25s;z-index:99;overflow-y:auto}
  .tj-nav.is-open{transform:none}
  .tj-nav .sp-menu{flex-direction:column;align-items:stretch;gap:4px}
  .tj-nav .sp-menu a{display:block;font-size:16px}
  .tj-nav>.sp-menu>li>a{padding:14px 0}
  /* het streepje onder het actieve item zou hier over de volle breedte lopen; de rode kleur volstaat */
  .tj-nav>.sp-menu>li.is-active>a::after{display:none}
  .tj-nav>.sp-menu>li:nth-last-child(-n+2)>a{text-align:center;margin-top:10px}
  .tj-nav>.sp-menu>li:last-child>a{padding-left:29px}
  .tj-nav>.sp-menu>li:last-child::before,.tj-nav>.sp-menu>li:last-child::after{display:none}
  .tj-nav .sp-menu-sub{position:static;display:flex;width:auto;min-width:0;box-shadow:none;background:transparent;padding:0 0 0 1rem}
  .tj-nav .sp-menu-sub a{color:#fff;padding:10px 0;font-size:15px;line-height:1.4}
  .tj-nav .sp-menu-sub a:hover{background:none;color:var(--sp-primary)}
  .tj-kop-inner{height:90px}
  main>.sp-section:first-child{padding:150px 0 40px;min-height:0}
  .is-home main>.sp-section:first-child{padding:170px 0 60px}
  .tj-voet-inner{flex-direction:column;gap:40px}
  .tj-kaart .sp-row{padding:30px}
  .tj-kaart .sp-col:first-child{padding-right:0;padding-bottom:30px}
  .tj-formkaart{margin-top:0}
}

/* De ondertitel in de oproepbalk is op de oude site kleiner dan een gewone h3. */
.tj-cta-sub .sp-heading{font-size:21px;line-height:31.5px}

/* De oproepbalk ademt met 60 px, niet met de 80 px van de gewone secties. */
.tj-oproep{padding:60px 0}

/* --- telefoonnummers in de oproepbalk (css-klasse tj-cta-tel op de tekstwidget) --- */
.tj-cta-tel p{display:flex;align-items:center;gap:18px;margin:0;font-size:24px;line-height:51px;font-weight:600;color:#fff}
.tj-cta-tel a{color:#fff;text-decoration:none}
.tj-cta-tel a:hover{color:#fff;text-decoration:underline}
.tj-cta-tel p::before{content:"";flex:none;width:26px;height:26px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E") no-repeat center/contain}
@media(max-width:900px){.tj-cta-tel p{font-size:20px;line-height:40px}}