/* Falqon - ritme op tablet en telefoon.
   Losse laag zodat de desktopopmaak ongemoeid blijft; alles hieronder geldt
   uitsluitend onder 1025px. Doel: beeld, tekst en sectiehoogtes in verhouding
   houden op kleine schermen. */

/* ------------------------------------------------------------------
 * 1. Beeld
 * ------------------------------------------------------------------ */

/* Teamfoto's: op desktop vierkant, op telefoon rekten ze uit tot 390 hoog. */
.elementor-element-c935dd7 img{width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;display:block}

@media (max-width:1024px){
  /* De twee verhaalbeelden op About hebben een vaste hoogte van 912 en 580. */
  .elementor-element-ab6img,
  .elementor-element-ab7img{min-height:0!important;width:100%!important;aspect-ratio:4/3}

  /* Beeld in de tekst van een resource of blog: nooit hoger dan het scherm. */
  .elementor-element-a98622b img,
  .elementor-element-a98622b figure img{max-height:70vh;width:auto;max-width:100%;margin-left:auto;margin-right:auto}

  /* Losse afbeeldingswidgets die op een vaste hoogte staan. */
  .elementor-widget-image img{height:auto}
}

@media (max-width:767px){
  .elementor-element-ab1sec{min-height:560px!important}
  .elementor-element-ab6img,
  .elementor-element-ab7img{aspect-ratio:3/2}
}

/* Bijschrift onder een afbeelding in de tekst - stond op het grijs van de reset. */
.elementor-element-a98622b figcaption,
.elementor-element-a98622b .wp-element-caption{font-family:Inter,sans-serif;font-size:14px;line-height:20px;font-style:normal;color:#F6F3ECA3;margin:12px 0 0;text-align:left}

/* ------------------------------------------------------------------
 * 2. Sectiehoogtes
 * ------------------------------------------------------------------ */

@media (max-width:1024px){
  [data-elementor-type='wp-page']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='single']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='single-post']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='archive']>.e-con.e-parent:not(:first-child){padding-top:80px!important;padding-bottom:80px!important}

  [data-elementor-type='wp-page']>.e-con.e-parent:first-child,
  [data-elementor-type='single']>.e-con.e-parent:first-child,
  [data-elementor-type='single-post']>.e-con.e-parent:first-child,
  [data-elementor-type='archive']>.e-con.e-parent:first-child{padding-top:140px!important;padding-bottom:64px!important}

  #fq-footer-cta{padding-top:96px!important;padding-bottom:96px!important}
  .elementor-location-footer .elementor-element-77ceb90{padding-top:48px!important;padding-bottom:48px!important}
}

@media (max-width:767px){
  /* #105 - telefoon: overal 16px links en rechts, 30px boven en onder.
     De eerste sectie houdt ruimte voor de vaste header. De selectors staan
     bewust op :first-child / :not(:first-child), zodat ze even zwaar wegen als
     het tablet-ritme hierboven en er dus als laatste over heen gaan. */
  [data-elementor-type='wp-page']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='single']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='single-post']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='archive']>.e-con.e-parent:not(:first-child),
  [data-elementor-type='footer']>.e-con.e-parent{
    padding-left:16px!important;padding-right:16px!important;
    padding-top:30px!important;padding-bottom:30px!important;
  }

  [data-elementor-type='wp-page']>.e-con.e-parent:first-child,
  [data-elementor-type='single']>.e-con.e-parent:first-child,
  [data-elementor-type='single-post']>.e-con.e-parent:first-child,
  [data-elementor-type='archive']>.e-con.e-parent:first-child{
    padding-left:16px!important;padding-right:16px!important;
    padding-top:104px!important;padding-bottom:30px!important;
  }

  /* Kaarten: alles met een eigen achtergrond krijgt dezelfde 16px. */
  .e-con:not(.e-parent)[data-settings*="background_background"],
  .fq-rcard,.fq-fcard2__text,.fq-glass,.fq-faq__item,.fq-formblock .fq-form{
    padding-left:16px!important;padding-right:16px!important;
  }

  #fq-footer-cta{padding-top:30px!important;padding-bottom:30px!important}
}

/* ------------------------------------------------------------------
 * 3. Typografie
 * ------------------------------------------------------------------ */

@media (min-width:768px) and (max-width:1024px){
  h1,h1.elementor-heading-title,
  .elementor-widget-text-editor h1[style]{font-size:40px!important;line-height:44px!important;letter-spacing:-1.4px!important}
  h2,h2.elementor-heading-title,
  .elementor-widget-text-editor h2[style]{font-size:32px!important;line-height:36px!important;letter-spacing:-1px!important}
  h3,h3.elementor-heading-title{font-size:26px!important;line-height:30px!important;letter-spacing:-.4px!important}
  h4,h4.elementor-heading-title{font-size:22px!important;line-height:28px!important}
  .elementor-counter-number,
  .elementor-element-7f22890 .elementor-heading-title,
  .elementor-element-6a96b60 .elementor-heading-title,
  .elementor-element-c7b9b4a .elementor-heading-title{font-size:36px!important;line-height:40px!important}
  .elementor-element-ab1sec{min-height:640px!important}
}

@media (max-width:767px){
  h1,h1.elementor-heading-title,
  .elementor-widget-text-editor h1[style]{font-size:32px!important;line-height:36px!important;letter-spacing:-1.2px!important}
  h2,h2.elementor-heading-title{font-size:26px!important;line-height:30px!important;letter-spacing:-.8px!important}

  /* De grote intro-uitspraken (Home, Solutions, About) - op telefoon een maat
     kleiner dan een gewone kop. Herkenbaar aan de spans waarmee de zin in licht
     en gedempt wordt gezet; gewone sectiekoppen hebben die niet. */
  .elementor-widget-text-editor h2[style],
  .elementor-widget-text-editor h1[style],
  .fq-bigcopy,
  .fq-bigcopy .elementor-heading-title,
  .fq-bigcopy h1,.fq-bigcopy h2,.fq-bigcopy p,
  .elementor-widget-heading .elementor-heading-title:has(span),
  .elementor-widget-text-editor h2:has(span),
  .elementor-widget-text-editor p:has(span){font-size:22px!important;line-height:28px!important;letter-spacing:-.4px!important}
  h3,h3.elementor-heading-title{font-size:22px!important;line-height:26px!important;letter-spacing:-.4px!important}
  h4,h4.elementor-heading-title{font-size:20px!important;line-height:26px!important}
  .elementor-counter-number,
  .elementor-element-7f22890 .elementor-heading-title,
  .elementor-element-6a96b60 .elementor-heading-title,
  .elementor-element-c7b9b4a .elementor-heading-title{font-size:32px!important;line-height:36px!important}

  /* Broodtekst overal gelijk; labels en knoppen houden hun eigen maat. */
  .elementor-widget-text-editor p,
  .elementor-element-a98622b p,
  .elementor-element-a98622b li{font-size:16px!important;line-height:24px!important}
}

/* ------------------------------------------------------------------
 * 4. Solutions - productrijen op telefoon
 *    Volgorde in het ontwerp: beeld, dan label, titel, intro en knop.
 *    In de opbouw staat de tekstkolom eerst, dus het beeld wordt vooruit gezet.
 * ------------------------------------------------------------------ */

@media (max-width:767px){
  .elementor-element-solimg1,
  .elementor-element-solimg2,
  .elementor-element-solimg3{order:-1;min-height:220px!important;width:100%!important}

  .elementor-element-1013de4,
  .elementor-element-d4a652e,
  .elementor-element-b8b1d1f{gap:20px!important}

  .elementor-element-36dee2a,
  .elementor-element-bf1bfa7,
  .elementor-element-77081c2{padding:0!important;min-height:0!important;gap:16px!important}

  .elementor-element-solqsn1,
  .elementor-element-solqsn2{min-height:200px!important}
}

/* Vacature-hero: op telefoon was 640px hoog te veel voor alleen een kop. */
@media (max-width:767px){
  .elementor-element-jm10030,
  .elementor-element-jm10020{min-height:400px!important}
}

/* Header op telefoon: de balk stond op 32px marge terwijl het uitgeklapte paneel
   op 16px staat. Nu allebei 16px, zodat ze exact boven elkaar vallen. */
@media (max-width:767px){
  [data-elementor-type='header']>.e-con.e-parent{padding-left:16px!important;padding-right:16px!important}
}

/* Teamraster: gelijke afronding (8px, de siteradius) en een kleinere tussenruimte
   op telefoon. De foto volgt de afronding van de kaart. */
.elementor-element-ab8grid .e-loop-item{border-radius:8px!important;overflow:hidden}
.elementor-element-ab8grid .e-loop-item img{border-radius:0}
@media (max-width:767px){
  .elementor-element-ab8grid .elementor-grid{gap:16px!important}
}

/* ---- telefoon: ritme binnen de single-templates ----
   De secties zelf staan al op 30px (#105), maar de blokken binnen een sectie
   stonden nog op 48 tot 64px. Op een blog of resource gaf dat enorme gaten. */
@media (max-width:767px){
  body [data-elementor-type='single']>.e-con.e-parent>.e-con>.e-con-inner>.e-con,
  body [data-elementor-type='single']>.e-con.e-parent>.e-con>.e-con-inner>.e-con>.e-con,
  body [data-elementor-type='single']>.e-con.e-parent>.e-con-inner>.e-con,
  body [data-elementor-type='single-post']>.e-con.e-parent>.e-con>.e-con-inner>.e-con,
  body [data-elementor-type='single-post']>.e-con.e-parent>.e-con>.e-con-inner>.e-con>.e-con,
  body [data-elementor-type='single-page']>.e-con.e-parent>.e-con>.e-con-inner>.e-con,
  body [data-elementor-type='archive']>.e-con.e-parent>.e-con>.e-con-inner>.e-con{--row-gap:30px!important;row-gap:30px!important}
}

/* ---- telefoon: kaarten ----
   Elke kaart uit een loop krijgt rondom 16px, zodat de beeld- en tekstranden
   overal gelijk lopen. */
@media (max-width:767px){
  body [data-elementor-type='loop-item']>.e-con.e-parent{
    padding:16px!important;
  }
}

/* ---- telefoon: 'Featured news & press' ----
   Kop en knop stonden naast elkaar, waardoor de knop rechts onder de kop bleef
   hangen. Nu netjes onder de kop, links uitgelijnd. */
@media (max-width:767px){
  .elementor-element-dc29065{--flex-direction:column!important;flex-direction:column!important;--align-items:flex-start!important;align-items:flex-start!important}
  .elementor-element-b39985f{width:100%!important;--justify-content:flex-start!important;justify-content:flex-start!important;margin-top:4px!important}
  body .elementor-element-b39985f{--align-items:flex-start!important;align-items:flex-start!important;text-align:left!important}
  body .elementor-element-b39985f>.elementor-widget,
  body .elementor-element-4c71c1b{align-self:flex-start!important;text-align:left!important;width:auto!important}
  body .elementor-element-4c71c1b .elementor-widget-container{display:flex;justify-content:flex-start}
}

/* ==================================================================
 * Responsive-ronde 25-08 - naar aanleiding van de feedback van de klant
 * (mobiele marges/uitlijning en tekstgroottes). Alles hieronder geldt
 * uitsluitend onder 768px; de desktopversie blijft ongemoeid.
 * ================================================================== */

/* A. Niets mag breder zijn dan het scherm. Losse widgets hadden nog vaste
   breedtes uit Figma (o.a. 912px op All solutions) en liepen buiten beeld. */
@media (max-width:1024px){
  body [data-elementor-type='wp-page'] .elementor-widget,
  body [data-elementor-type='single'] .elementor-widget,
  body [data-elementor-type='single-post'] .elementor-widget,
  body [data-elementor-type='archive'] .elementor-widget{max-width:100%!important}
  body .elementor-element.elementor-element-f9e58e9{width:auto!important;max-width:100%!important}
}

/* B. Rijen met een blad-icoon plus kop stonden op nowrap. Op telefoon liep
   daardoor 'Careers - Quantum Optics Engineer', 'Current state of now' en de
   eyebrow-regels op vrijwel elke sectie buiten het scherm. Ze mogen nu
   afbreken zodra het niet past. */
@media (max-width:767px){
  .e-con:has(> .elementor-widget-image + .elementor-widget-heading),
  .e-con:has(> .elementor-widget-image + .elementor-widget-text-editor),
  .e-con:has(> .elementor-widget-heading + .elementor-widget-heading){
    --flex-wrap:wrap!important;flex-wrap:wrap!important;
    --row-gap:4px;row-gap:4px;
  }

  /* Inline geschreven regels (About-cijfers, partnerlabel) stonden hard op
     nowrap met een vaste hoogte van 12px. */
  .elementor-widget-text-editor span[style*='nowrap']{white-space:normal!important}
  .elementor-widget-text-editor div[style*='display:flex']{flex-wrap:wrap!important;height:auto!important;min-height:0!important}
}

/* C. Typografische schaal op telefoon. De klant merkte terecht op dat een
 *    aantal koppen niet in verhouding stond. Er liepen tien maten boven de
 *    22px door elkaar; dat is nu een vaste trap:
 *    36 cijfer - 32 paginakop - 26 sectiekop - 22 subkop - 18 intro - 16 tekst
 *    - 14 label - 10 juridisch. */
@media (max-width:767px){
  body [data-elementor-type] .elementor-element.elementor-element-ab5v1,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v1 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v1 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v2,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v2 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v2 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v3,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v3 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v3 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v4,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v4 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v4 > .elementor-widget-container > *{font-size:36px!important;line-height:38px!important;letter-spacing:-1px!important;}

  body [data-elementor-type] .elementor-element.elementor-element-f0003ea,
  body [data-elementor-type] .elementor-element.elementor-element-f0003ea .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-f0003ea > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-2cbece7,
  body [data-elementor-type] .elementor-element.elementor-element-2cbece7 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-2cbece7 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-jm10004,
  body [data-elementor-type] .elementor-element.elementor-element-jm10004 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-jm10004 > .elementor-widget-container > *{font-size:32px!important;line-height:36px!important;letter-spacing:-.9px!important;}

  body [data-elementor-type] .elementor-element.elementor-element-rsp0001,
  body [data-elementor-type] .elementor-element.elementor-element-rsp0001 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-rsp0001 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-rsg0001,
  body [data-elementor-type] .elementor-element.elementor-element-rsg0001 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-rsg0001 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-rsf0001,
  body [data-elementor-type] .elementor-element.elementor-element-rsf0001 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-rsf0001 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-k000a04,
  body [data-elementor-type] .elementor-element.elementor-element-k000a04 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-k000a04 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-m000b04,
  body [data-elementor-type] .elementor-element.elementor-element-m000b04 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-m000b04 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-83c6b52,
  body [data-elementor-type] .elementor-element.elementor-element-83c6b52 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-83c6b52 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-0f93268,
  body [data-elementor-type] .elementor-element.elementor-element-0f93268 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-0f93268 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-nt7w002,
  body [data-elementor-type] .elementor-element.elementor-element-nt7w002 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-nt7w002 > .elementor-widget-container > *{font-size:26px!important;line-height:30px!important;letter-spacing:-.6px!important;}

  body [data-elementor-type] .elementor-element.elementor-element-6d39787,
  body [data-elementor-type] .elementor-element.elementor-element-6d39787 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-6d39787 > .elementor-widget-container > *,
  body [data-elementor-type] .elementor-element.elementor-element-solcase1,
  body [data-elementor-type] .elementor-element.elementor-element-solcase1 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-solcase1 > .elementor-widget-container > *{font-size:22px!important;line-height:26px!important;letter-spacing:-.4px!important;}
}

/* D. Aanraakvlakken. De knoppen waren 34px hoog en de sociale iconen 24px;
   op een telefoon is dat aan de kleine kant om betrouwbaar te raken. De
   knop zelf blijft optisch gelijk, er komt alleen hoogte bij. */
@media (max-width:767px){
  .elementor-button,
  a.fq-btn,
  .gform_wrapper .gform_button,
  .fqb-pill{min-height:44px!important;display:inline-flex!important;align-items:center!important}
  .elementor-social-icon{width:44px!important;height:44px!important}
  .fq-legal .elementor-nav-menu a.elementor-item{padding-top:7px!important;padding-bottom:7px!important}
}

/* E. Sluitstuk van de typografische trap. Deze maten kwamen niet uit een
   Elementor-instelling maar uit inline stijl of uit een componentklasse,
   en bleven daardoor buiten de regels hierboven vallen. */
@media (max-width:767px){
  body .elementor-element-ab5v1 div[style],
  body .elementor-element-ab5v2 div[style],
  body .elementor-element-ab5v3 div[style],
  body .elementor-element-ab5v4 div[style]{font-size:36px!important;line-height:38px!important;letter-spacing:-1px!important}

  body .fq-people__h,
  body .fq-gal__h,
  body .fq-formblock__h,
  body .fq-apply__h{font-size:26px!important;line-height:30px!important;letter-spacing:-.6px!important}

  body .fq-hero-title,
  body .fq-hero-title span{font-size:32px!important;line-height:36px!important;letter-spacing:-.9px!important}

  body .fq-drawer__title,
  body .fq-case__t{font-size:22px!important;line-height:26px!important;letter-spacing:-.4px!important}
}

/* F. Op tablet liep dezelfde inline nowrap-regel op About nog buiten beeld. */
@media (max-width:1024px){
  .elementor-widget-text-editor span[style*='nowrap']{white-space:normal!important}
  .elementor-widget-text-editor div[style*='display:flex']{flex-wrap:wrap!important;height:auto!important;min-height:0!important}
}

/* G. De blokkoppen in een resource (team, galerij, formulier) werden op 36px
   gezet door een sectie-eigen regel in de template-CSS van Elementor, die
   zwaarder weegt dan een klasse alleen. Deze selector wint wel. */
@media (max-width:767px){
  body [data-elementor-type] .elementor-element h2.fq-people__h,
  body [data-elementor-type] .elementor-element h2.fq-gal__h,
  body [data-elementor-type] .elementor-element h2.fq-formblock__h,
  body [data-elementor-type] .elementor-element h2.fq-apply__h,
  body [data-elementor-type] .elementor-element h2.fq-faq__h{font-size:26px!important;line-height:30px!important;letter-spacing:-.6px!important;margin-bottom:20px!important}
}

/* H. Aanraakvlak van de sociale iconen op een teamkaart. */
@media (max-width:767px){
  .fq-tsoc__a{width:40px!important;height:40px!important}
}

/* I. Vaste kolombreedtes uit Figma (680px, 586px) pasten wel in de
   ontwerpbreedte van 1440px, maar niet op een laptop van 1147px - precies
   het scherm waarop de klant kijkt. Daar liep de rechterkolom van de
   vacature-, resource- en About-pagina buiten beeld. Kolommen mogen nu
   meekrimpen zodra de ruimte kleiner is dan het ontwerp. */
@media (max-width:1440px){
  body [data-elementor-type] .e-con.e-flex > .e-con{flex-shrink:1!important;min-width:0!important;max-width:100%!important}
  body [data-elementor-type] .e-con .elementor-widget{max-width:100%!important}
}


/* ====================================================================
 * MOBIELE RITMELAAG - feedbackronde 2 (26-08)
 * Deze laag staat bewust als laatste in het bestand en overschrijft alles
 * wat er hierboven aan losse mobiele regels is gegroeid. Alles binnen
 * max-width:767px, dus de goedgekeurde desktopversie blijft ongemoeid.
 *
 * De schaal - en de regel die de klant vroeg:
 *   sectie boven/onder  32px   (twee secties = 64px scheiding)
 *   sectie links/rechts  16px
 *   tussen groepen       24px
 *   binnen een groep     12px
 *   label bij kop         8px
 *   kaartpadding         16px
 * Hieruit volgt de hierarchie 64 > 24 > 12 > 8: de afstand tussen twee
 * secties is altijd groter dan die tussen groepen, en die is altijd groter
 * dan de ruimte binnen een groep. Dat is wat een blok als een blok laat
 * lezen in plaats van als losse regels.
 * ================================================================== */
@media (max-width:767px){
  :root{
    --fq-m-section:32px;
    --fq-m-side:16px;
    --fq-m-group:24px;
    --fq-m-item:12px;
    --fq-m-tight:8px;
    --fq-m-card:16px;
  }

  /* 1. Secties: overal dezelfde marge. De eerste sectie houdt ruimte vrij
        voor de zwevende navigatiebalk (16 + 64 hoog) plus lucht. */
  body [data-elementor-type='wp-page']>.e-con.e-parent,
  body [data-elementor-type='single']>.e-con.e-parent,
  body [data-elementor-type='single-post']>.e-con.e-parent,
  body [data-elementor-type='single-page']>.e-con.e-parent,
  body [data-elementor-type='archive']>.e-con.e-parent{
    padding-top:var(--fq-m-section)!important;
    padding-bottom:var(--fq-m-section)!important;
    padding-left:var(--fq-m-side)!important;
    padding-right:var(--fq-m-side)!important;
  }
  body [data-elementor-type='wp-page']>.e-con.e-parent:first-child,
  body [data-elementor-type='single']>.e-con.e-parent:first-child,
  body [data-elementor-type='single-post']>.e-con.e-parent:first-child,
  body [data-elementor-type='single-page']>.e-con.e-parent:first-child,
  body [data-elementor-type='archive']>.e-con.e-parent:first-child{
    padding-top:112px!important;
  }

  /* 2. Ritme binnen een sectie. Kinderen van een sectie zijn groepen (24),
        alles daaronder hoort bij elkaar (12). Hier zaten waardes van 48,
        64 en zelfs 80px, waardoor de ruimte binnen een sectie groter was
        dan die tussen twee secties. */
  body [data-elementor-type] > .e-con.e-parent,
  body [data-elementor-type] > .e-con.e-parent > .e-con-inner{
    --row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important;
    --column-gap:var(--fq-m-group)!important;column-gap:var(--fq-m-group)!important;
  }
  body [data-elementor-type] > .e-con.e-parent .e-con .e-con,
  body [data-elementor-type] > .e-con.e-parent > .e-con-inner > .e-con,
  body [data-elementor-type] > .e-con.e-parent > .e-con{
    --row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important;
  }
}

/* --- Navigatie (#1 #2 #3 #13) ------------------------------------- */
@media (max-width:767px){
  /* #1 de balk hangt even ver van de bovenrand als van de zijkanten */
  body [data-elementor-type='header']>.e-con.e-parent{padding:16px!important}

  /* #2 het uitklappaneel loopt exact gelijk met de balk. Het stond op
        x=32 met een breedte van 326 tegenover 16/358 van de balk. */
  body .elementor-location-header .elementor-nav-menu--dropdown{
    left:16px!important;right:16px!important;width:auto!important;max-width:none!important;
    top:96px!important;box-sizing:border-box!important;
  }

  /* #3 de chevron staat vast rechts in de rij, ook als het submenu open
        staat; hij schoof eerder mee met de inspringing. */
  body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item{
    position:relative!important;padding-right:48px!important;
  }
  body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item .sub-arrow,
  body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item i,
  body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item svg{
    position:absolute!important;right:16px!important;top:50%!important;
    transform:translateY(-50%)!important;margin:0!important;padding:0!important;
    inset-inline-start:auto!important;
  }
  body .elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown a.elementor-sub-item{
    padding-left:16px!important;padding-right:48px!important;
  }
}

/* --- Kaarten, sliders en blokken (#6 #8 #14) ----------------------- */
@media (max-width:767px){
  /* #6 kaarten: 16px rondom en 12px tussen de regels binnenin. */
  body [data-elementor-type='loop-item']>.e-con.e-parent{
    padding:var(--fq-m-card)!important;
    --row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important;
  }
  body [data-elementor-type='loop-item'] .e-con .e-con{
    --row-gap:var(--fq-m-tight)!important;row-gap:var(--fq-m-tight)!important;
  }
  body .fq-rcard,body .fq-glass,body .fq-faq__item,body .fq-fcard2__text,
  body .fq-formblock .fq-form,body .fq-apply,body .fq-usp-cell{
    padding:var(--fq-m-card)!important;
  }
  /* de USP-kaarten stonden op 32-40px rondom */
  body .fq-usps .e-con,body .fq-usp-cell{--row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important}

  /* #14 blokken met beeld naast tekst: geen dubbele inspringing meer. De
     sectie levert de 16px, het blok erbinnen hoeft niets toe te voegen. */
  body [data-elementor-type='wp-page'] > .e-con.e-parent > .e-con,
  body [data-elementor-type='single'] > .e-con.e-parent > .e-con,
  body [data-elementor-type='archive'] > .e-con.e-parent > .e-con,
  body [data-elementor-type='wp-page'] > .e-con.e-parent > .e-con-inner > .e-con,
  body [data-elementor-type='single'] > .e-con.e-parent > .e-con-inner > .e-con{
    padding-left:0!important;padding-right:0!important;
  }

  /* #8 de pijlen van de carrousel staan als paar precies in het midden. */
  body .fq-sec-car .elementor-swiper-button,
  body .fq-testi-car .elementor-swiper-button{width:48px!important;height:40px!important}
  body .fq-sec-car .elementor-swiper-button-prev,
  body .fq-testi-car .elementor-swiper-button-prev{left:calc(50% - 54px)!important}
  body .fq-sec-car .elementor-swiper-button-next,
  body .fq-testi-car .elementor-swiper-button-next{left:calc(50% + 6px)!important}
}

/* --- Footer, CTA en team (#10 #11 #12 #15 #16) --------------------- */
@media (max-width:767px){
  /* #11 de footer stapelde padding: 16 op de sectie, 32 op de doos en nog
     eens 15 op de kolom - samen 63px inspringing. Alleen de sectie houdt
     zijn 16px over. */
  body [data-elementor-type='footer']>.e-con.e-parent{padding:var(--fq-m-section) var(--fq-m-side)!important}
  body [data-elementor-type='footer']>.e-con.e-parent .e-con{padding-left:0!important;padding-right:0!important}
  body .elementor-element-cad5358{padding:0!important}
  body .elementor-element-c831531{padding:0!important;--row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important}
  body .elementor-element-2991125{--row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important}

  /* #10 het CTA-blok was 680px hoog voor 280px inhoud. */
  body #fq-footer-cta{padding:var(--fq-m-section) var(--fq-m-side)!important;min-height:0!important}
  body #fq-footer-cta .e-con{min-height:0!important}
  body .elementor-element-adcf1e6{--row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important}

  /* #12 de teamfoto's waren 139px in een cel van 171px. Ze vullen nu de
     hele kaartbreedte, net als in het ontwerp, en blijven twee kolommen. */
  body .elementor-element-ab8grid .elementor-grid{gap:var(--fq-m-group) var(--fq-m-side)!important}
  body .elementor-element-ab8grid .e-loop-item{padding:0!important;--row-gap:var(--fq-m-tight)!important;row-gap:var(--fq-m-tight)!important}
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-image,
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-image .elementor-widget-container,
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-theme-post-featured-image{width:100%!important;max-width:100%!important}
  body .elementor-element-ab8grid .e-loop-item img{
    width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:8px;
  }

  /* #15 de filterbalk brak over drie regels; nu een rij die horizontaal
     schuift, met de actieve pil altijd zichtbaar. */
  body .fq-teamfilter,body .fqb-filter{width:auto!important}
  body .fq-teamfilter .fqb-bar,body .fqb-filter .fqb-bar{
    flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-snap-type:x proximity;
    margin-left:calc(var(--fq-m-side) * -1);margin-right:calc(var(--fq-m-side) * -1);
    padding-left:var(--fq-m-side);padding-right:var(--fq-m-side);
  }
  body .fq-teamfilter .fqb-bar::-webkit-scrollbar,body .fqb-filter .fqb-bar::-webkit-scrollbar{display:none}
  body .fq-teamfilter .fqb-pill,body .fqb-filter .fqb-pill{flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start}
}

/* --- Correcties na meting ------------------------------------------
   Drie regels verloren het van eerdere lagen of van een verkeerd
   referentiekader; hier staan ze met het juiste gewicht. */
@media (max-width:767px){
  /* De sectiemarge stond nog op 30px omdat het tabletritme hierboven een
     zwaardere selector heeft (:not(:first-child)). Zelfde vorm, dus wint. */
  body [data-elementor-type='wp-page']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='single']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='single-post']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='single-page']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='archive']>.e-con.e-parent:not(:first-child){
    padding-top:var(--fq-m-section)!important;padding-bottom:var(--fq-m-section)!important;
    padding-left:var(--fq-m-side)!important;padding-right:var(--fq-m-side)!important;
  }
  body [data-elementor-type='wp-page']>.e-con.e-parent:first-child,
  body [data-elementor-type='single']>.e-con.e-parent:first-child,
  body [data-elementor-type='single-post']>.e-con.e-parent:first-child,
  body [data-elementor-type='single-page']>.e-con.e-parent:first-child,
  body [data-elementor-type='archive']>.e-con.e-parent:first-child{
    padding-top:112px!important;padding-bottom:var(--fq-m-section)!important;
    padding-left:var(--fq-m-side)!important;padding-right:var(--fq-m-side)!important;
  }

  /* #2 opnieuw: de balk heeft een backdrop-filter en is daardoor zelf het
     referentiekader voor het vaste paneel - left:16px werd dus vanaf de balk
     gerekend in plaats van vanaf het scherm. Het paneel hangt nu gewoon
     onder de balk en neemt exact diens breedte over. */
  body .elementor-location-header .elementor-element-de02904{position:relative!important}
  body .elementor-location-header .elementor-element-5db0c57{position:static!important}
  body .elementor-location-header .elementor-nav-menu--dropdown{
    position:absolute!important;left:0!important;right:0!important;
    top:calc(100% + 8px)!important;width:auto!important;margin:0!important;
    max-height:calc(100vh - 140px)!important;
  }

  /* #8 opnieuw: met marges in plaats van calc staat het pijlenpaar
     gegarandeerd symmetrisch om het midden. */
  body .fq-sec-car .elementor-swiper-button-prev,
  body .fq-testi-car .elementor-swiper-button-prev{left:50%!important;right:auto!important;margin-left:-54px!important}
  body .fq-sec-car .elementor-swiper-button-next,
  body .fq-testi-car .elementor-swiper-button-next{left:50%!important;right:auto!important;margin-left:6px!important}
}

/* #4 het introblok. De marge boven en onder klopt nu, maar het blok zelf
   was 95vh hoog waardoor de kop pas halverwege het scherm begon. Op een
   telefoon is dat vooral leegte. */
@media (max-width:767px){
  body .elementor-element-51f879a{min-height:66vh!important}
  body .elementor-element-51f879a > .e-con-inner,
  body .elementor-element-51f879a > .e-con{--row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important}
}

/* De footerkolommen stonden nog op 40px tussenruimte, meer dan de 32px
   sectiemarge - precies de omkering die we juist wegwerken. */
@media (max-width:767px){
  body [data-elementor-type='footer'] .e-con{
    --row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important;
  }
  body [data-elementor-type='footer'] .e-con .e-con .e-con{
    --row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important;
  }
}

/* De footerkolommen kregen hun 40px via de gap-shorthand uit de
   template-CSS van Elementor; een losse row-gap wint daar niet van.
   Daarom hier dezelfde shorthand. */
@media (max-width:767px){
  body [data-elementor-type='footer'] .e-con.e-child{gap:var(--fq-m-group) var(--fq-m-side)!important}
  body [data-elementor-type='footer'] .e-con.e-child .e-con.e-child{gap:var(--fq-m-item) var(--fq-m-item)!important}
  body [data-elementor-type='footer'] .elementor-widget-container{margin-bottom:0!important}
}

/* De 40px kwam uit een sectie-eigen regel in de footertemplate met zes
   klassen in de selector; daar wint alleen iets zwaarders van. */
@media (max-width:767px){
  body .elementor-location-footer .elementor-element.elementor-element-77ceb90 .e-con.e-child>.e-con,
  body .elementor-location-footer .elementor-element.elementor-element-77ceb90 .e-con.e-child>.e-con:first-child,
  body .elementor-location-footer .elementor-element.elementor-element-77ceb90 .e-con>.e-con.e-child:first-child{
    gap:var(--fq-m-group) var(--fq-m-side)!important;
  }
}

/* #12 in het teamraster stond op elk onderdeel nog de vaste 139px uit
   Figma, terwijl de cel 171px breed is. Daardoor bleef er rechts van elke
   kaart een strook leeg en oogde de foto klein. Alles vult nu de cel. */
@media (max-width:767px){
  body .elementor-element-ab8grid .e-loop-item > .elementor-element,
  body .elementor-element-ab8grid .e-loop-item > .e-con,
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-container{
    width:100%!important;max-width:100%!important;
  }
  body .elementor-element-ab8grid .e-loop-item img{
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:8px!important;display:block;
  }
  /* zelfde behandeling voor het vacatureraster */
  body .elementor-element-ab9grd .e-loop-item > .elementor-element,
  body .elementor-element-ab9grd .e-loop-item .elementor-widget-container{width:100%!important;max-width:100%!important}
}

/* De teamkaart is een flexkolom die op align-items:center stond; de
   onderdelen krompen daardoor naar hun eigen inhoud in plaats van de cel
   te vullen. Vandaar de 139px in een cel van 171px. */
@media (max-width:767px){
  body .elementor-element-ab8grid .e-loop-item,
  body .elementor-element-ab8grid .e-loop-item > .e-con{
    --align-items:stretch!important;align-items:stretch!important;
    --justify-content:flex-start!important;
  }
  body .elementor-element-ab8grid .e-loop-item > *{align-self:stretch!important}
  body .elementor-element-ab8grid .e-loop-item img{
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;
    object-fit:cover!important;object-position:top center!important;border-radius:8px!important;
  }
}

/* #12 De 139px bleek de 16px kaartpadding aan weerszijden van een cel van
   171px. Op een teamkaart hoort de foto juist tot de rand te lopen, net als
   op desktop; de tekst eronder heeft die padding niet nodig omdat de
   rasterruimte de kolommen al scheidt. */
@media (max-width:767px){
  body [data-elementor-type='loop-item']>.e-con.e-parent.elementor-element-c935dd7,
  body .elementor-element-ab8grid [data-elementor-type='loop-item']>.e-con.e-parent{
    padding:0!important;
    --row-gap:var(--fq-m-tight)!important;row-gap:var(--fq-m-tight)!important;
  }
}

/* Eigen bevinding: de partnerbalk begon met een half afgesneden logo tegen
   de linkerrand. Een zachte uitvloeier aan beide kanten maakt duidelijk dat
   de rij doorloopt in plaats van dat er iets wegvalt. */
@media (max-width:767px){
  body .fq-partners,body .fq-partners-viewport{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  }
  /* en dezelfde behandeling voor de filterbalk die nu horizontaal schuift */
  body .fq-teamfilter .fqb-bar,body .fqb-filter .fqb-bar{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
  }
}


/* ==================================================================
 * FEEDBACKRONDE 3 - 26-08. Laatste laag, alles binnen 767px.
 * ================================================================== */
@media (max-width:767px){
  :root{--fq-m-section:48px;--fq-m-section-lg:64px}

  /* #1 De balk had geen binnenmarge meer: logo plakte links, knop rechts.
     Oorzaak was mijn eigen regel van vorige ronde die de padding van elk
     direct kind van een sectie op nul zette - de balk is zo'n kind. */
  body [data-elementor-type='header'] .e-con,
  body .elementor-location-header .elementor-element-de02904{
    padding-left:16px!important;padding-right:16px!important;
  }
  body .elementor-location-header .elementor-element-de02904{padding-top:12px!important;padding-bottom:12px!important}

  /* #2 De hero mist het verloop dat op desktop wel over het beeld ligt,
     waardoor de kop nauwelijks contrast heeft. Dit zet dezelfde scrim
     terug, los van of Elementor zijn overlay rendert. */
  body .elementor-element-51f879a{position:relative;isolation:isolate}
  body .elementor-element-51f879a::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(1,2,30,.35) 0,rgba(1,2,30,.15) 30%,rgba(1,2,30,.86) 78%,#01021E 100%);
  }
  body .elementor-element-51f879a > *:not(.fq-hvid):not(.elementor-background-video-container){position:relative;z-index:2}

  /* #3 De chevron hangt vast rechts in de rij en verschuift dus niet meer
     als een submenu open- of dichtklapt. */
  body .elementor-nav-menu--dropdown li{position:relative!important}
  body .elementor-nav-menu--dropdown .fq-mm-toggle{
    position:absolute!important;top:0!important;right:0!important;
    width:48px!important;height:52px!important;margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;background:none!important;border:0!important;
  }
  body .elementor-nav-menu--dropdown .fq-mm-chev{margin:0!important}
  body .elementor-nav-menu--dropdown .fq-mm-panel{clear:both}

  /* #4 Meer lucht tussen secties: 48 boven en onder, dus 96px scheiding. */
  body [data-elementor-type='wp-page']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='single']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='single-post']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='single-page']>.e-con.e-parent:not(:first-child),
  body [data-elementor-type='archive']>.e-con.e-parent:not(:first-child){
    padding-top:var(--fq-m-section)!important;padding-bottom:var(--fq-m-section)!important;
  }

  /* #6 Het USP-blok krijgt het dubbele: 64px boven en onder. */
  body .elementor-element-da8da23,
  body .fq-usp-sec{padding-top:var(--fq-m-section-lg)!important;padding-bottom:var(--fq-m-section-lg)!important}

  /* #8 De eerste sectie werd 25px onder de balk getrokken, waardoor er nog
     maar 7px tussen balk en broodkruimel zat. */
  body [data-elementor-type='single']>.e-con.e-parent:first-child,
  body [data-elementor-type='single-post']>.e-con.e-parent:first-child,
  body [data-elementor-type='wp-page']>.e-con.e-parent:first-child,
  body [data-elementor-type='archive']>.e-con.e-parent:first-child{
    margin-top:0!important;padding-top:120px!important;
  }
}

@media (max-width:767px){
  /* #9 De voordeelblokken op een productpagina stonden op 32px met een
     haarlijn erboven; op de homepage staan ze op 16px zonder lijn. Nu overal
     hetzelfde, met de homepage als maat. */
  body .elementor-element-nt2c00a,body .elementor-element-nt2c00f,
  body .elementor-element-nt2c014,body .elementor-element-nt2c019,
  body .elementor-element-nt2c01e,body .fq-usps .e-con.e-child{
    padding:var(--fq-m-card)!important;box-shadow:none!important;
    --row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important;
  }

  /* #10 De uitgelichte resource had een radius maar geen vulling; de kaart
     zag er daardoor uit als losse tekst in een leeg kader. */
  body .elementor-element-rfgrid1 .e-loop-item{
    background:#060830!important;border-radius:8px!important;overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(246,243,236,.10)!important;
  }
  body .elementor-element-rfgrid1 .e-loop-item .e-con{background-color:transparent!important}

  /* #11 De filterbalk lag met de eerste pil tegen de schermrand. De balk
     blijft binnen de sectiemarge staan en schuift daarbinnen. */
  body .fq-teamfilter .fqb-bar,body .fqb-filter .fqb-bar{
    margin-left:0!important;margin-right:0!important;
    padding-left:8px!important;padding-right:8px!important;
  }

  /* #12 Op About stond het rechterblok met de tekst boven het beeld; nu
     overal beeld eerst, net als bij de oplossingen. */
  body .elementor-element-ab7img{order:-1!important}
  body .elementor-element-ab6row,body .elementor-element-ab7row{
    padding-left:0!important;padding-right:0!important;
    --row-gap:var(--fq-m-group)!important;row-gap:var(--fq-m-group)!important;
  }
}

@media (max-width:767px){
  /* #13 De teamkaart klopte qua raster, maar de tekst eronder was even hoog
     als de foto. Op desktop is die verhouding ongeveer 3:1. Kleinere maten
     en strakkere regelafstand brengen dat terug. */
  body .elementor-element-ab8grid .e-loop-item .elementor-widget:not(:first-child){margin:0!important}
  body .elementor-element-ab8grid .e-loop-item h3,
  body .elementor-element-ab8grid .e-loop-item .elementor-heading-title{font-size:16px!important;line-height:20px!important;letter-spacing:-.2px!important}
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-text-editor,
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-text-editor p{font-size:12px!important;line-height:16px!important}
  body .elementor-element-ab8grid .e-loop-item .fq-tsoc__a{width:32px!important;height:32px!important}
  body .elementor-element-ab8grid .e-loop-item > .e-con{--row-gap:6px!important;row-gap:6px!important}

  /* #14 De vacaturerijen stonden nog naast elkaar in een rij van 358px.
     Op telefoon worden het kaarten die netjes stapelen. */
  body .elementor-element-ab9grd .e-loop-item{
    --flex-direction:column!important;flex-direction:column!important;
    background:#060830!important;border-radius:8px!important;padding:var(--fq-m-card)!important;
    box-shadow:inset 0 0 0 1px rgba(246,243,236,.10)!important;
    --row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important;
    --align-items:flex-start!important;align-items:flex-start!important;
  }
  body .elementor-element-ab9grd .e-loop-item > *{width:100%!important;max-width:100%!important}
  body .elementor-element-ab9grd .elementor-grid{gap:var(--fq-m-item)!important}
  body .elementor-element-e1a28f5{--flex-direction:column!important;flex-direction:column!important;
    --align-items:flex-start!important;align-items:flex-start!important;padding:0!important;
    --row-gap:var(--fq-m-tight)!important;row-gap:var(--fq-m-tight)!important}

  /* #15 De twee contactpersonen stonden onder elkaar met een portret van
     100px. Nu twee kolommen waarin het portret de kolom vult. */
  body .elementor-element-k000a21{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:var(--fq-m-group) var(--fq-m-side)!important;
  }
  body .elementor-element-k000a13,body .elementor-element-k000a20{
    width:100%!important;max-width:100%!important;
    --flex-direction:column!important;flex-direction:column!important;
    --align-items:flex-start!important;align-items:flex-start!important;
    --row-gap:var(--fq-m-tight)!important;row-gap:var(--fq-m-tight)!important;padding:0!important;
  }
  /* #6 - alleen het portret meeschalen. De vorige regel pakte elk beeld in
     de kaart, dus ook het blad-icoontje van 18x8, dat daardoor als een groene
     vlek van 137px werd getekend. */
  body .elementor-element-k000a13 img:not([src$='.svg']),
  body .elementor-element-k000a20 img:not([src$='.svg']){
    width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;
  }
  body .elementor-element-k000a13 img[src$='.svg'],
  body .elementor-element-k000a20 img[src$='.svg']{width:18px!important;height:8px!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important}
  body .elementor-element-k000a13 .elementor-widget,body .elementor-element-k000a20 .elementor-widget{width:100%!important;max-width:100%!important}

  /* #7 De logobalk onderin de footer was onnodig hoog. */
  body .elementor-element-2991125{--row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important}
  body .elementor-element-fqfold{padding-top:var(--fq-m-item)!important;padding-bottom:var(--fq-m-item)!important}
  body .fq-footer-logo,body .elementor-element-97b6f44 img{max-width:180px!important;height:auto!important}
}

@media (max-width:767px){
  /* #8 nog wat meer lucht onder de balk: 40px in plaats van 15. */
  body [data-elementor-type='single']>.e-con.e-parent:first-child,
  body [data-elementor-type='single-post']>.e-con.e-parent:first-child,
  body [data-elementor-type='archive']>.e-con.e-parent:first-child{padding-top:144px!important}

  /* #7 de decoratieve lijnenbalk hoeft geen sectiemarge; hij is zelf de scheiding. */
  body [data-elementor-type='footer']>.e-con.e-parent.elementor-element-fqfold{
    padding-top:0!important;padding-bottom:0!important;
  }

  /* #13 de tekst onder de teamfoto blijft nog te hoog ten opzichte van het
     beeld; op desktop is dat ongeveer 3:1. Strakker zetten. */
  body .elementor-element-ab8grid .e-loop-item .fq-tsoc,
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-container{margin:0!important}
  body .elementor-element-ab8grid .e-loop-item > .e-con > .elementor-widget{margin:0!important}
  body .elementor-element-ab8grid .e-loop-item h3,
  body .elementor-element-ab8grid .e-loop-item .elementor-heading-title{font-size:15px!important;line-height:19px!important}
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-text-editor,
  body .elementor-element-ab8grid .e-loop-item .elementor-widget-text-editor p,
  body .elementor-element-ab8grid .e-loop-item span{font-size:11px!important;line-height:15px!important}
  body .elementor-element-ab8grid .e-loop-item > .e-con{--row-gap:4px!important;row-gap:4px!important}
  body .elementor-element-ab8grid .e-loop-item .fq-tsoc__a{width:28px!important;height:28px!important}
}

@media (max-width:767px){
  /* #7 de lijnenbalk hield geen eigen hoogte over toen de sectiemarge eraf
     ging; hij krijgt zijn hoogte nu zelf. */
  body [data-elementor-type='footer']>.e-con.e-parent.elementor-element-fqfold{min-height:56px!important}
}

@media (max-width:767px){
  /* #6 het USP-blok verloor zijn dubbele marge van de algemene sectieregel,
     die met :not(:first-child) zwaarder weegt. Zelfde vorm, dus wint. */
  body [data-elementor-type='wp-page']>.e-con.e-parent.elementor-element-da8da23:not(:first-child),
  body [data-elementor-type='wp-page']>.e-con.e-parent.fq-usp-sec:not(:first-child){
    padding-top:var(--fq-m-section-lg)!important;padding-bottom:var(--fq-m-section-lg)!important;
  }
}

@media (max-width:767px){
  /* #3 De LinkedIn-knop stond als losse regel tussen de foto en de rubriek,
     wat de kaart uit balans trok. Hij schuift nu met een negatieve marge in
     de linkeronderhoek van de foto, zodat de tekst eronder een aaneengesloten
     blok vormt: rubriek, naam, functie. */
  body .elementor-element-ab8grid .e-loop-item .elementor-element-t129soc{
    margin:-40px 0 0 8px!important;
    align-self:flex-start!important;
    position:relative!important;z-index:3!important;
    width:auto!important;max-width:none!important;
  }
  body .elementor-element-ab8grid .e-loop-item .fq-tsoc{margin:0!important;gap:6px!important}
}

@media (max-width:767px){
  /* #1 De hero was 66vh en oogde daardoor gedrongen naast de andere
     overzichtspagina's. Nu 85vh, net als het overzicht Solutions. */
  body .elementor-element-51f879a{min-height:85vh!important}

  /* #2 De blokken Foundation en Sovereign Quantum hielden nog een eigen
     binnenmarge aan bovenop die van de sectie. */
  body .elementor-element-ab6sec,body .elementor-element-ab7sec,
  body .elementor-element-ab6box,body .elementor-element-ab7box,
  body .elementor-element-ab6txt,body .elementor-element-ab7txt{
    padding-left:0!important;padding-right:0!important;
  }
  body [data-elementor-type='wp-page']>.e-con.e-parent.elementor-element-ab6sec,
  body [data-elementor-type='wp-page']>.e-con.e-parent.elementor-element-ab7sec{
    padding-left:var(--fq-m-side)!important;padding-right:var(--fq-m-side)!important;
  }
  body .elementor-element-ab6txt,body .elementor-element-ab7txt{
    --row-gap:var(--fq-m-item)!important;row-gap:var(--fq-m-item)!important;
  }

  /* #5 De vacaturekaarten stonden qua maat los van de rest van de pagina. */
  body .elementor-element-ab9grd .e-loop-item h3,
  body .elementor-element-ab9grd .e-loop-item .elementor-heading-title{font-size:18px!important;line-height:24px!important;letter-spacing:-.3px!important}
  body .elementor-element-ab9grd .e-loop-item .elementor-widget-text-editor,
  body .elementor-element-ab9grd .e-loop-item .elementor-widget-text-editor p{font-size:14px!important;line-height:20px!important}
  body .elementor-element-ab9lst,body .elementor-element-ab9top,body .elementor-element-ab9ft{
    padding-left:0!important;padding-right:0!important;
  }
  body .elementor-element-ab9oh{font-size:16px!important;line-height:22px!important}
}

@media (max-width:767px){
  /* #2 vervolg: ab6txt en ab7txt hielden zelf nog 48px boven en onder aan,
     bovenop de marge van de sectie. Samen was dat bijna 100px. */
  body .elementor-element-ab6txt,body .elementor-element-ab7txt,
  body .elementor-element-ab6img,body .elementor-element-ab7img{
    padding-top:0!important;padding-bottom:0!important;
  }

  /* #3 vervolg: mijn eigen regel van vorige ronde zette de marge van elk
     widget in de teamkaart op nul en won het van de nieuwe. Nu zwaarder. */
  body .elementor-element-ab8grid .e-loop-item > .e-con > .elementor-widget.elementor-element-t129soc{
    margin:-40px 0 0 8px!important;align-self:flex-start!important;
    position:relative!important;z-index:3!important;width:auto!important;
  }
}


/* ==================================================================
 * TABLET 768-1024. De typografische trap was hier nooit meegenomen:
 * dertien maten door elkaar, met de cijfers op About nog op 64px.
 * Dezelfde aanpak als op telefoon, een maat groter:
 *   48 cijfer - 40 paginakop - 32 sectiekop - 26 subkop - 22 intro
 *   - 20 lead - 16 tekst - 14 label - 10 juridisch
 * ================================================================== */
@media (min-width:768px) and (max-width:1024px){
  body [data-elementor-type] .elementor-element.elementor-element-ab5v1,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v1 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v1 > .elementor-widget-container > *,
  body .elementor-element-ab5v1 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-ab5v2,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v2 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v2 > .elementor-widget-container > *,
  body .elementor-element-ab5v2 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-ab5v3,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v3 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v3 > .elementor-widget-container > *,
  body .elementor-element-ab5v3 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-ab5v4,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v4 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-ab5v4 > .elementor-widget-container > *,
  body .elementor-element-ab5v4 div[style]{font-size:48px!important;line-height:52px!important;letter-spacing:-1.4px!important}

  body [data-elementor-type] .elementor-element.elementor-element-rsp0001,
  body [data-elementor-type] .elementor-element.elementor-element-rsp0001 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-rsp0001 > .elementor-widget-container > *,
  body .elementor-element-rsp0001 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-rsg0001,
  body [data-elementor-type] .elementor-element.elementor-element-rsg0001 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-rsg0001 > .elementor-widget-container > *,
  body .elementor-element-rsg0001 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-rsf0001,
  body [data-elementor-type] .elementor-element.elementor-element-rsf0001 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-rsf0001 > .elementor-widget-container > *,
  body .elementor-element-rsf0001 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-k000a04,
  body [data-elementor-type] .elementor-element.elementor-element-k000a04 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-k000a04 > .elementor-widget-container > *,
  body .elementor-element-k000a04 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-0f93268,
  body [data-elementor-type] .elementor-element.elementor-element-0f93268 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-0f93268 > .elementor-widget-container > *,
  body .elementor-element-0f93268 div[style]{font-size:32px!important;line-height:36px!important;letter-spacing:-1px!important}

  body [data-elementor-type] .elementor-element.elementor-element-m000b04,
  body [data-elementor-type] .elementor-element.elementor-element-m000b04 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-m000b04 > .elementor-widget-container > *,
  body .elementor-element-m000b04 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-83c6b52,
  body [data-elementor-type] .elementor-element.elementor-element-83c6b52 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-83c6b52 > .elementor-widget-container > *,
  body .elementor-element-83c6b52 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-nt7w002,
  body [data-elementor-type] .elementor-element.elementor-element-nt7w002 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-nt7w002 > .elementor-widget-container > *,
  body .elementor-element-nt7w002 div[style]{font-size:26px!important;line-height:30px!important;letter-spacing:-.6px!important}

  body [data-elementor-type] .elementor-element.elementor-element-6d39787,
  body [data-elementor-type] .elementor-element.elementor-element-6d39787 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-6d39787 > .elementor-widget-container > *,
  body .elementor-element-6d39787 div[style],
  body [data-elementor-type] .elementor-element.elementor-element-solcase1,
  body [data-elementor-type] .elementor-element.elementor-element-solcase1 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-solcase1 > .elementor-widget-container > *,
  body .elementor-element-solcase1 div[style]{font-size:22px!important;line-height:28px!important;letter-spacing:-.4px!important}

  body .fq-people__h,body .fq-gal__h,body .fq-formblock__h,body .fq-apply__h,
  body [data-elementor-type] .elementor-element h2.fq-people__h,
  body [data-elementor-type] .elementor-element h2.fq-gal__h,
  body [data-elementor-type] .elementor-element h2.fq-formblock__h{font-size:32px!important;line-height:36px!important;letter-spacing:-1px!important}
  body .fq-hero-title,body .fq-hero-title span{font-size:40px!important;line-height:44px!important;letter-spacing:-1.4px!important}
  body .fq-drawer__title,body .fq-case__t{font-size:22px!important;line-height:28px!important}

  /* lange samenstellingen mogen afbreken; 'Mission-Critical' liep in een
     smalle kolom buiten zijn kader. */
  body h1,body h2,body h3,body h4,body .elementor-heading-title{overflow-wrap:anywhere;word-break:normal;hyphens:auto}

  /* aanraakvlak van de sociale iconen, net als op telefoon */
  body .elementor-social-icon{width:40px!important;height:40px!important}
}

@media (min-width:768px) and (max-width:1024px){
  /* Restanten van de trap: de cijfers op de homepage horen bij de cijfers op
     About (48), de losse intro's en citaten zakken naar 26 en 22. */
  body [data-elementor-type] .elementor-element.elementor-element-7f22890 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-6a96b60 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-c7b9b4a .elementor-heading-title{font-size:48px!important;line-height:52px!important;letter-spacing:-1.4px!important}

  body [data-elementor-type] .elementor-element.elementor-element-nt5w002,
  body [data-elementor-type] .elementor-element.elementor-element-nt5w002 span,
  body [data-elementor-type] .elementor-element.elementor-element-95f27b1,
  body [data-elementor-type] .elementor-element.elementor-element-95f27b1 p{font-size:26px!important;line-height:32px!important;letter-spacing:-.6px!important}

  body [data-elementor-type] .elementor-element.elementor-element-f0003ed,
  body [data-elementor-type] .elementor-element.elementor-element-f0003ed *{font-size:22px!important;line-height:30px!important;letter-spacing:-.4px!important}

  /* juridische links onderin krijgen hetzelfde aanraakvlak als op telefoon */
  body .fq-legal .elementor-nav-menu a.elementor-item{padding-top:7px!important;padding-bottom:7px!important}
}

/* ==================================================================
 * TABLET, visuele controle. De meetlat gaf groen op 768-1024, maar
 * het oog vond vier dingen die een getal niet ziet:
 *   1. de scrim op de oplossingskaarten is een balk van 204px vanaf
 *      de onderrand. Op tablet is de tekst twee keer zo hoog, dus de
 *      kop stond op de kale foto - op de chipfoto onleesbaar.
 *   2. de LinkedIn-knop op de teamkaart hield ruimte in de flow, dus
 *      de drie kaarten met een profiel stonden 32px lager dan de rest.
 *   3. de beeldkolom op About rekte mee met de tekst: 293 bij 1326.
 *   4. het citaat op Contact plakte tegen de introzin.
 * Plus: overflow-wrap:anywhere brak 'Infrastructure' middenin.
 * ================================================================== */
@media (min-width:768px) and (max-width:1024px){
  /* 1. scrim over de hele kaart, van doorzichtig naar dekkend, zonder
     blur zodat het beeld bovenin scherp blijft. Zwaarder dan de regel
     uit de eigen CSS van de sectie, die op (0,5,0) met !important staat. */
  body .fq-sol-card.fq-sol-card.fq-sol-card>.e-con.e-con.e-con::after,
  body .fq-sol-card.fq-sol-card.fq-sol-card a.e-con.e-con.e-con::after{
    top:0!important;bottom:0!important;height:auto!important;
    background:linear-gradient(180deg,rgba(1,2,30,0) 0%,rgba(1,2,30,.12) 18%,rgba(1,2,30,.56) 42%,rgba(1,2,30,.88) 70%,rgba(1,2,30,.96) 100%)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }

  /* 2. de knop schuift in de linkeronderhoek van de foto en houdt een
     vaste hoogte, zodat een kaart zonder profiel dezelfde ruimte houdt
     en alle rubrieken in een rij op een lijn staan. */
  body .elementor-element-ab8grid .e-loop-item > .e-con > .elementor-widget.elementor-element-t129soc,
  body .elementor-element-ab8grid .e-loop-item .elementor-element-t129soc{
    margin:-44px 0 0 8px!important;align-self:flex-start!important;
    position:relative!important;z-index:3!important;
    width:auto!important;max-width:none!important;
    height:32px!important;min-height:32px!important;
  }
  body .elementor-element-ab8grid .e-loop-item .fq-tsoc{margin:0!important;gap:6px!important}

  /* 3. het beeld houdt zijn eigen verhouding; align-items:stretch gaf het
     een vaste hoogte en zette daarmee de aspect-ratio buiten spel. */
  body .elementor-element-ab6row,body .elementor-element-ab7row{align-items:flex-start!important}
  body .elementor-element-ab6img,body .elementor-element-ab7img{align-self:flex-start!important}
  body .elementor-element-ab6img img,body .elementor-element-ab7img img{
    height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;
  }

  /* 4. lucht tussen de introzin en het citaat */
  body .elementor-element-f0003ec{margin-top:24px!important}

  /* een woord breekt alleen nog af als het echt niet past; anywhere brak
     'Infrastructure' terwijl er ruimte genoeg was. */
  body h1,body h2,body h3,body h4,body .elementor-heading-title{
    overflow-wrap:break-word;word-break:normal;hyphens:manual;
  }
}

@media (min-width:768px) and (max-width:899px){
  /* De tekstkolom naast het beeld was 347 breed en liep veertig regels
     door. Onder de 900 staat het beeld boven de tekst, net als op telefoon. */
  body .elementor-element-ab6row,body .elementor-element-ab7row{flex-direction:column!important}
  body .elementor-element-ab7img{order:-1!important}
  body .elementor-element-ab6img,body .elementor-element-ab7img,
  body .elementor-element-ab6txt,body .elementor-element-ab7txt{width:100%!important;max-width:100%!important}
}

@media (max-width:767px){
  /* zelfde reden als 2 hierboven: op telefoon stonden de rubrieken van de
     kaarten met een profiel 28px lager dan die zonder. */
  body .elementor-element-ab8grid .e-loop-item > .e-con > .elementor-widget.elementor-element-t129soc,
  body .elementor-element-ab8grid .e-loop-item .elementor-element-t129soc{
    height:28px!important;min-height:28px!important;margin:-40px 0 0 8px!important;
  }
}

/* ==================================================================
 * TABLET, vervolg. Drie dingen die alleen op tablet spelen:
 *   5. het USP-blok hield 48px binnenmarge aan, ook toen de kaart nog
 *      maar 235 breed was: 139px tekst in een kaart van 235. Daardoor
 *      brak 'Infrastructure' middenin, ondanks de regel hierboven.
 *      De kop stond bovendien op 26px, groter dan de 24px op desktop.
 *   6. de beelden in de oplossingsrijen rekten mee met de tekst:
 *      301 breed bij 584 hoog, een staande uitsnede van een liggende
 *      productfoto.
 * ================================================================== */
@media (min-width:768px) and (max-width:1024px){
  body .elementor-element-d667318,
  body .elementor-element-4d18e89,
  body .elementor-element-c010fc9{padding:24px!important}

  body .elementor-element-solimg1,
  body .elementor-element-solimg2,
  body .elementor-element-solimg3{align-self:flex-start!important}
  body .elementor-element-solimg1 img,
  body .elementor-element-solimg2 img,
  body .elementor-element-solimg3 img{
    height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;
  }
}

@media (min-width:768px) and (max-width:899px){
  /* kop terug naar de 22 uit de trap; op 26 paste geen enkel lang woord
     meer in een kolom van 187. */
  body [data-elementor-type] .elementor-element.elementor-element-d667318 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-4d18e89 .elementor-heading-title,
  body [data-elementor-type] .elementor-element.elementor-element-c010fc9 .elementor-heading-title{
    font-size:22px!important;line-height:28px!important;letter-spacing:-.4px!important;
  }
}

@media (min-width:768px) and (max-width:1024px){
  /* 6 vervolg: de tekstkolom hield 584px minimumhoogte aan, ook toen de
     tekst nog maar 330 hoog was; het beeld rekte daarin mee. De rij volgt
     nu de inhoud en het beeld houdt 4:3. */
  body .elementor-element-1013de4>.e-con,
  body .elementor-element-d4a652e>.e-con,
  body .elementor-element-b8b1d1f>.e-con{min-height:0!important;height:auto!important}
  body .elementor-element-solimg1,
  body .elementor-element-solimg2,
  body .elementor-element-solimg3{align-self:flex-start!important;min-height:0!important;height:auto!important;aspect-ratio:4/3!important}
  body .elementor-element-solimg1 img,
  body .elementor-element-solimg2 img,
  body .elementor-element-solimg3 img{height:100%!important;width:100%!important;object-fit:cover!important;aspect-ratio:auto!important}
}

@media (min-width:768px) and (max-width:1024px){
  /* 7. De koppen van een vacature en van een resource staan op desktop naast
     een beeld van 640 hoog en zijn daarom zelf ook 640. Op tablet valt het
     beeld eronder, maar hield de tekstkolom die 640 vast: ruim 500px lege
     ruimte tussen de functietitel en het beeld. */
  body .elementor-element-jm10030,body .elementor-element-jm10020,
  body .elementor-element-ar10030,body .elementor-element-ar10020{
    min-height:0!important;height:auto!important;
  }
}

/* ==================================================================
 * 8. LAPTOP 1025-1439. De Contact-pagina viel vanaf 1439 in een
 *    gestapelde versie: een regel in de eigen CSS van de hero-sectie
 *    zette alle kolommen op 100% en alle rijen op column. Die grens
 *    staat nu op 1024, zodat de desktopopbouw tot 1025 blijft staan.
 *    De kolommen krompen al mee (flex-shrink), dus daar was verder
 *    niets voor nodig.
 *    Wat daardoor wel zichtbaar werd: de juridische regel in de
 *    voettekst deelt zijn rij met het woordmerk. Onder 1440 bleef er
 *    341px over voor vier items en liep de copyrightregel over
 *    'Disclaimer' heen. De regel krijgt nu een eigen volle regel.
 * ================================================================== */
@media (min-width:1025px) and (max-width:1439px){
  body .elementor-location-footer .elementor-element-2991125{flex-wrap:wrap!important;row-gap:8px!important}
  body .elementor-location-footer .elementor-element-1157b0d{
    flex:1 1 100%!important;width:100%!important;max-width:100%!important;
    justify-content:flex-end!important;flex-wrap:nowrap!important;gap:24px!important;min-width:0!important;
  }
  /* het woordmerk kreeg door die volle regel meer ruimte dan op desktop;
     33% houdt dezelfde verhouding aan als de 462 van 1408 op 1440. */
  body .elementor-location-footer .elementor-element-97b6f44 img{max-width:33%!important}
}

@media (min-width:1025px) and (max-width:1439px){
  /* 8 vervolg: op 1440 hield de tekstkolom nog 200px speling naast het
     formulier; onder die breedte raakten de twee elkaar. 32px tussenruimte,
     dezelfde maat als de andere rijen op de pagina. */
  body .elementor-80 .elementor-element-51dc25d,
  body .elementor-80 .elementor-element-bd13bd7,
  body .elementor-80 .elementor-element-34b5801{column-gap:32px!important}
}

/* ==================================================================
   FAQ-pagina op tablet en telefoon.
   Het menu staat niet langer naast de vragen maar als balk erboven, die
   blijft plakken onder de kop. De balk schuift horizontaal, dus acht
   groepen passen ook op een telefoon.
   ================================================================== */

/* De kolombreedtes staan hier en nergens anders: ze moeten boven blok I
   hierboven uit komen, dat onder 1440px alle kolommen laat meekrimpen. */
@media (min-width:1025px){
  body [data-elementor-type] .e-con.e-flex>.e-con.fq-faqrail{
    flex:0 0 300px!important;
    width:300px!important;
    max-width:300px!important;
  }
  body [data-elementor-type] .e-con.e-flex>.e-con.fq-faqbodycol{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:1020px!important;
  }
}

@media (max-width:1024px){
  .fq-faqrail{
    position:sticky;
    top:112px;
    width:100%!important;
    max-width:none!important;
    max-height:none;
    overflow:visible;
    z-index:5;
  }
  .fq-faqnav{
    flex-direction:row;
    align-items:center;
    gap:0;
    padding:8px;
    background:rgba(1,1,17,.92);
    -webkit-backdrop-filter:saturate(120%) blur(20px);
    backdrop-filter:saturate(120%) blur(20px);
  }
  .fq-faqnav__label,
  .fq-faqnav__div,
  .fq-faqnav__help,
  .fq-faqnav__i{display:none}
  .fq-faqnav__links{
    flex-direction:row;
    flex:1 1 auto;
    min-width:0;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .fq-faqnav__links::-webkit-scrollbar{display:none}
  .fq-faqnav__link{
    flex:0 0 auto;
    scroll-snap-align:start;
    gap:0;
    padding:8px 12px;
    border-radius:4px;
    background:rgba(246,243,236,.06);
  }
  .fq-faqnav__t{
    white-space:nowrap;
    font-size:13px;
    line-height:20px;
  }

  .fq-faqintro{scroll-margin-top:180px}
  .fq-faqintro__body,
  .fq-faqx__intro{max-width:none}
  body [data-elementor-type] .fq-faqintro .elementor-widget.fq-faqintro__body{max-width:none!important}
  .fq-faqintro__body p{margin:0 0 24px}

  .fq-faqx{gap:56px;margin-top:80px}
  .fq-faqx__sec{gap:24px;scroll-margin-top:180px}
  .fq-faqx h2.fq-faqx__title{
    font-size:40px!important;
    line-height:48px!important;
    letter-spacing:-.6px!important;
  }
  .fq-faqx .fq-faq__q{padding:20px!important;min-height:68px}
  .fq-faqx .fq-faq__a{padding:0 20px 20px!important}
  .fq-faqx .fq-faq__item[open] .fq-faq__a{padding-top:6px!important}
}

@media (max-width:767px){
  .fq-faqrail{top:96px}
  .fq-faqnav{padding:6px}
  .fq-faqnav__link{padding:8px 10px}
  .fq-faqnav__t{font-size:12px}

  .fq-faqintro{scroll-margin-top:164px}
  .fq-faqintro__body p{margin:0 0 20px}

  .fq-faqx{gap:48px;margin-top:56px}
  .fq-faqx__sec{gap:20px;scroll-margin-top:164px}
  .fq-faqx h2.fq-faqx__title{
    font-size:32px!important;
    line-height:38px!important;
    letter-spacing:-.6px!important;
  }
  .fq-faqx .fq-faq{gap:12px}
  .fq-faqx .fq-faq__q{padding:16px!important;min-height:60px}
  .fq-faqx .fq-faq__t{font-size:15px;line-height:22px;padding-right:12px}
  .fq-faqx .fq-faq__a{padding:0 16px 16px!important;font-size:15px;line-height:23px}
  .fq-faqx .fq-faq__item[open] .fq-faq__a{padding-top:4px!important}
  .fq-faqx .fq-faq__i{flex:0 0 32px;width:32px;height:26px}
}

/* r53 - het featureraster stapelt onder 1024px; de scheidingslijn draait dan
   mee van verticaal naar horizontaal, precies zoals de handgebouwde versie
   deed. De !important is nodig omdat de desktopregel op :not(:last-child)
   staat en dus zwaarder weegt dan deze. Onder 767px vervalt de lijn en
   gelden de mobiele maten, gelijk aan de USP-blokken op de homepage. */
@media (max-width:1024px){
  .fq-solfeat__row{flex-direction:column;gap:0;box-shadow:none!important}
  .fq-solfeat__row>.fq-solfeat__card{flex:1 1 auto!important;padding:32px;box-shadow:inset 0 1px 0 rgba(246,243,236,.16)!important}
}
@media (max-width:767px){
  .fq-solfeat{display:flex;flex-direction:column;gap:var(--fq-m-item,12px)}
  .fq-solfeat__row{gap:var(--fq-m-item,12px)}
  .fq-solfeat__row>.fq-solfeat__card{padding:var(--fq-m-card,16px);gap:var(--fq-m-item,12px);box-shadow:none!important}
  .fq-solfeat__body{gap:var(--fq-m-item,12px)}
}

/* r54 - de contentblokken stapelen onder 1024px, net als de vaste secties die
   ze vervangen. Die secties waren zelf elk een e-parent en kregen daardoor de
   sectiemarges en -tussenruimtes van de site: op tablet 80px boven en onder,
   op mobiel 48px plus 16px opzij, met 24px tussen de onderdelen van een sectie
   en 12px binnen een genest blok. Nu staat er een e-parent omheen die die
   marge krijgt, dus nemen de blokken die maten hier zelf over. */
@media (max-width:1024px){
  .fq-solblk{padding-left:32px!important;padding-right:32px!important;padding-top:0;padding-bottom:0}
  .fq-solblk+.fq-solblk{padding-top:160px}
  .fq-solblk--media,.fq-solblk--media.fq-solblk--flip{flex-direction:column;align-items:stretch;gap:32px}
  .fq-solblk__text{flex:1 1 auto;width:100%;min-height:0}
  .fq-solblk__media,.fq-solblk__media--empty{flex:1 1 auto;width:100%;min-height:0;aspect-ratio:680/584}
  .fq-solblk__text .fq-solblk__title,.fq-solblk__text .fq-solblk__body{width:100%}
  .fq-solblk__headrow{flex-direction:column;gap:24px}
  .fq-solblk__headrow h2.fq-solblk__title{width:100%}
  .fq-solblk__intro{width:100%;text-align:left}
  .fq-solblk--specs h2.fq-solblk__title{width:100%}
  .fq-solblk__specrow{flex-direction:column;gap:48px}
  .fq-solblk__specmedia{flex:0 0 auto;width:100%;max-width:616px;margin-top:0}
  .fq-solblk__list{flex:1 1 auto;width:100%;max-width:none}
  .fq-solblk__line{flex-wrap:wrap;gap:8px}
  .fq-solblk__cell{flex:0 0 100%;max-width:none}
}
@media (max-width:767px){
  .fq-solblk{padding-left:0!important;padding-right:0!important;gap:var(--fq-m-group,24px)}
  .fq-solblk+.fq-solblk{padding-top:96px}
  .fq-solblk--media,.fq-solblk--media.fq-solblk--flip{gap:var(--fq-m-group,24px)}
  .fq-solblk__text{padding:0;gap:var(--fq-m-item,12px)}
  .fq-solblk__head,.fq-solblk__headrow,.fq-solblk__specrow,
  .fq-solblk__list,.fq-solblk__cell,.fq-solblk__line{gap:var(--fq-m-item,12px)}
}
/* r57 - vier eigen titelregels voor .fq-solblk__title in de tablet- en
   telefoonblokken zijn verwijderd. Ze werden altijd overruled door de
   generieke h2-regel met !important, dus ze deden niets. De blokkoppen volgen
   dezelfde typeladder als elke andere h2: 32/36 op tablet, 26/30 op telefoon. */