@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/DM-Sans/DMSans-VariableFont_opsz,wght.ttf")
    format("truetype");
}

:root {
  --border-radius: 8px;
  --box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.12),
    0 0.125rem 0.25rem rgba(0, 0, 0, 0.14);
  --color-0: #eee6db;
  --color-1: #ff5315;
  --color-2: #fbb48a;
  --color-3: #1f2b1a;
  --color-4: #405940;
  --color-5: #cccab1;
  --color-6: #271416;
  --color-7: #30422d;
}

body {
  background-color: var(--color-0);
  color: var(--color-6);
  font-size: 1.2rem;
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
html,
body {
  overflow-x: clip;
}
h1,
h2,
h3 {
  font-family: "DM Sans," serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 5rem);
  line-height: clamp(2.7rem, 3.5vw, 4.8rem);
  font-weight: bold;
}

h2 {
  font-size: 4rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
    line-height: 2.8rem;
  }

  h2 {
    font-size: 2rem;
  }
}

p {
  line-height: 1.8rem;
}

/* De grootte van een h1 voor koppen die om de koppenstructuur (één h1 per pagina) een h2 zijn. */
.h1_look {
  font-size: clamp(1.5rem, 4vw, 5rem);
  line-height: clamp(2.7rem, 3.5vw, 4.8rem);
  font-weight: bold;
}

@media (max-width: 768px) {
  .h1_look {
    font-size: 3rem;
    line-height: 2.8rem;
  }
}

/* Tekst die alleen voor schermlezers en zoekmachines in de html staat. */
.visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

button {
  cursor: pointer;
  border: none;
  font-size: inherit;
  font-family: inherit;
}

/* Homepage: de inleiding onder het logo FOMOZO. Boven genoeg ruimte voor het logo dat half over de
   rand valt. */
.home_intro {
  /* Een float, zoals de andere secties van de homepage (.width_100): de header en het logo zijn
     floats, dus een gewoon blok zou eronder doorlopen. */
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(130px, 19vh, 210px) 0 clamp(80px, 12vh, 150px);
}

/* Gecentreerd: de kernzin donker, de uitleg smal in Alverata cursief en iets lichter. */
.home_intro_column {
  width: min(660px, 86%);
  margin: 0 auto;
  text-align: center;
}

.home_intro_lead {
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  line-height: 1.1;
  color: var(--color-3);
  text-wrap: balance;
}

.home_intro_text {
  padding-top: 1.8rem; /* padding en geen marge: .margin_0 staat op de alinea */
  font-size: clamp(1.15rem, 1.4vw, 1.5rem);
  line-height: 1.6;
  color: rgb(31 43 26 / 85%);
}

@media (max-width: 1023px) {
  .home_intro {
    padding-top: clamp(110px, 16vh, 160px);
  }
}

/* Homepage: de drie pijlers (eerste drie landingspagina's) rechts in de header. Bewust subtiel: een
   smalle lijst met kleine letters en een dunne lijn tussen de rijen; bij hover wordt de titel
   oranje en de pijl gevuld. */
.header_pillars {
  max-width: 440px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgb(31 43 26 / 18%);
}

.header_pillars li {
  border-top: 1px solid rgb(31 43 26 / 18%);
}

.header_pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 20px 0;
  color: var(--color-3);
  text-decoration: none;
}

.header_pillar_main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_pillar:hover .header_pillar_main {
  transform: translateX(6px);
}

.header_pillar_name {
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-4);
  transition: color 0.4s;
}

.header_pillar_subtitle {
  font-size: 0.95rem;
  opacity: 0.8;
}

.header_pillar_arrow {
  width: 34px;
  height: 34px;
  border-color: rgb(64 89 64 / 55%);
  transition: background-color 0.4s, border-color 0.4s;
}

.header_pillar_arrow img {
  width: 55%;
  transition: filter 0.4s;
}

.header_pillar:hover .header_pillar_name {
  color: var(--color-1);
}

.header_pillar:hover .header_pillar_arrow {
  background-color: var(--color-1);
  border-color: var(--color-1);
}

.header_pillar:hover .header_pillar_arrow img {
  filter: brightness(0) invert(1);
}

.header_pillar:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 4px;
}

/* De inhoud van de header op de homepage en van de hero op de landingspagina's houdt links ruimte voor de social buttons (die staan
   absoluut links) en rechts voor de gedraaide slogan, in plaats van een vaste breedte. */
@media (min-width: 768px) {
  #header > .screen_width,
  .landing_page_hero_content.screen_width {
    box-sizing: border-box;
    width: 100%;
    max-width: 1300px;
    padding-left: clamp(120px, 11vw, 160px);
    padding-right: clamp(40px, 6vw, 90px);
  }
}

/* Op grote schermen blijft de inhoud zelf 1300px breed (zoals voor de ruimte links en rechts), anders
   wordt de kolom naast een lange titel te smal en loopt de titel over de tekst ernaast. */
@media (min-width: 1301px) {
  #header > .screen_width,
  .landing_page_hero_content.screen_width {
    max-width: calc(1300px + clamp(120px, 11vw, 160px) + clamp(120px, 10vw, 160px));
    padding-right: clamp(120px, 10vw, 160px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header_pillar_main {
    transition: none;
  }

  .header_pillar:hover .header_pillar_main {
    transform: none;
  }
}

/* Bolletjes onder een slider (inc/cases.php, inc/scripts.php) in olijf, zoals de pijlen ernaast: het
   gevulde bolletje is de eerste case in beeld. Het klikvlak is groter dan het bolletje zelf. */
.slider_dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.slider_dot {
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--color-5);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

.slider_dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.slider_dot:hover {
  background: var(--color-5);
}

.slider_dot[aria-current] {
  background: var(--color-5);
  transform: scale(1.25);
}

.slider_dot:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 4px;
}

/* Tekst wrapper */
.text_slide_animation {
  color: inherit; /* de tekstkleur van de alinea */
  position: relative;
  display: inline-block;
}

/* Pseudo-element dat de kwaststreek maakt */
.text_slide_animation::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mask-width, 0%);
  color: var(--color-1); /* oranje kwastkleur */
  overflow: hidden;
  white-space: nowrap;
  transition: width 1.2s cubic-bezier(0.42, 0.42, 0.2, 1); /* geen overshoot: de streek stopt op 100% */
}

.page_wrapper {
  overflow-x: hidden;
  width: 100%;
}

.background_color_linkedin {
  background: linear-gradient(135deg, #0a66c2, #004182);
}
.background_color_instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
}
.font_nothing {
  font-family: nothing, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
}

.font_alverata {
  font-family: alverata, serif;
  font-style: normal;
  font-weight: 400;
}

.text_color_0 {
  color: var(--color-0) !important;
}

.text_color_1 {
  color: var(--color-1) !important;
}

.text_color_2 {
  color: var(--color-2) !important;
}

.text_color_3 {
  color: var(--color-3) !important;
}

.text_color_4 {
  color: var(--color-4) !important;
}

.text_color_5 {
  color: var(--color-5) !important;
}

.text_color_6 {
  color: var(--color-6) !important;
}

.text_color_7 {
  color: var(--color-7) !important;
}

.border_color_0 {
  border-color: var(--color-0) !important;
}

.border_color_1 {
  border-color: var(--color-1) !important;
}

.border_color_2 {
  border-color: var(--color-2) !important;
}

.border_color_3 {
  border-color: var(--color-3) !important;
}

.border_color_4 {
  border-color: var(--color-4) !important;
}

.border_color_5 {
  border-color: var(--color-5) !important;
}

.border_color_6 {
  border-color: var(--color-6) !important;
}

.border_color_7 {
  border-color: var(--color-7) !important;
}

.background_color_0 {
  background-color: var(--color-0);
}

.background_color_1 {
  background-color: var(--color-1);
}

.background_color_2 {
  background-color: var(--color-2);
}

.background_color_3 {
  background-color: var(--color-3);
}

.background_color_4 {
  background-color: var(--color-4);
}

.background_color_5 {
  background-color: var(--color-5);
}

.background_color_6 {
  background-color: var(--color-6);
}

.background_color_7 {
  background-color: var(--color-7);
}

.background_img_1 {
  background: url(../img/backgrounds/Paper_Calk.jpg);
  background-size: cover;
}

.background_img_2 {
  background: url("../img/backgrounds/Paper_Pine.jpg");
  background-size: cover;
}

.background_img_3 {
  background: url("../img/backgrounds/Paper_Sunset.jpg");
  background-size: cover;
}

.background_img_4 {
  background: url("../img/backgrounds/Mockup_Photography_papier_vouwen_Fomozo_A4_Groen.jpg");
  background-size: cover;
}

.background_img_5 {
  background: linear-gradient(rgb(39 20 22 / 30%), rgb(39 20 22 / 100%)),
    url(../img/backgrounds/Mockup_Photography_papier_vouwen_Fomozo_A4_Wit.jpg);
  background-size: cover;
}

.background_img_6 {
  background: url("../img/backgrounds/Mockup_Photography_papier_vouwen_Fomozo_A4_Wit2.jpg");
  background-size: cover;
}

.background_img_7 {
  background: url("../img/backgrounds/Mockup_Photography_papier_vouwen_Fomozo_A4.jpg");
  background-size: cover;
}
.background_img_8 {
  position: relative;
  background: linear-gradient(rgb(255 84 22 / 0%), rgb(238 230 219));
  background-size: cover;
}

.background_img_8::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/backgrounds/Mockup_Photography_papier_vouwen_Fomozo_A4_2.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.3; /* hier pas je de transparantie van de afbeelding aan */
  pointer-events: none; /* zodat het geen klikken blokkeert */
  z-index: -1;
}

.button {
  display: block;
  width: fit-content;
  padding: 10px 50px;
  border-radius: var(--border-radius);
  margin: 15px;
  margin-left: 0;
  box-shadow: var(--box-shadow);
  transition: 0.8s;
}

.button_round {
  box-sizing: border-box;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pijl-svg's in ronde knoppen (img/Arrow-*.svg) hebben width/height 100% en geen eigen maat.
   Chrome past ze in de knop, Safari rekt ze op tot de standaardmaat van een svg (300 x 150) en
   ze lopen dan ver buiten de knop. Een vaste breedte voorkomt dat in elke browser. */
.button_round > img {
  display: block;
  width: 60%;
  height: auto;
  flex-shrink: 0;
}

.button_border {
  border-width: 1px;
  border-style: solid;
  background: none;
}

button:hover,
a.button:hover {
  filter: brightness(90%);
  text-decoration: none;
}

.copy_button_container {
  position: relative;
}
.copy_button_message {
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 0.5s; /* wacht 0.5s vóór fade-out */
}
.copy_button:hover + .copy_button_message {
  opacity: 1;
  transition: opacity 0.4s ease; /* direct fade-in */
}

.copy_button_message_header {
  background: var(--color-5);
  padding: 10px 20px;
  position: absolute;
  left: 70px;
  top: 0;
  height: 50px;
  font-size: 1rem;
  width: 200px;
  z-index: 0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-6);
}

.copy_button_message_contact {
  background: var(--color-1);
  padding: 10px 20px;
  position: absolute;
  left: 250px;
  top: 0;
  height: 43px;
  font-size: 1rem;
  width: 200px;
  z-index: 0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-0);
}
.testimonials_container {
  background-color: var(--color-0);
  padding: 20px;
  float: right;
}

.testimonial_name {
  font-size: small;
}

.testimonial_organization {
  font-size: small;
}

.testimonial_quote {
  font-style: italic;
}

.case_container {
  padding: 15px 0;
}

.case_heading {
  height: 70px;
  overflow: hidden;
  display: flex;
  align-items: end;
  margin-bottom: 10px;
}

.case_heading h3,
.case_heading .case_card_organization {
  margin: 0;
}

.case_heading .case_card_organization {
  font-size: 1.17em;
  line-height: normal;
  text-transform: uppercase;
}

.case_container p {
  font-size: 1.1rem;
  line-height: 1.5rem;
}
.case_tag {
  position: absolute;
  right: 10px;
  top: 10px;
  background: var(--color-1);
  color: var(--color-0);
  padding: 5px 10px;
  border-radius: var(--border-radius);
  font-size: 1.1rem;
  z-index: 1;
}

.case_img_container {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 2/3;
  box-shadow: var(--box-shadow);
}

.case_img_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case_img_overlay {
  background: var(--color-6);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 0.8s;
  opacity: 0.2;
}

.case_container:hover .case_img_overlay {
  opacity: 0;
}

/* Caseslider op de homepage (inc/cases.php, inc/case-card.php). Alle kaarten in een rij zijn even
   hoog en de knop staat onderaan, zodat de knoppen op één lijn staan. De titel is altijd twee
   regels hoog (langer wordt afgekapt), de tekst maximaal drie regels. */
/* Ruimte boven en onder rechtstreeks via padding in plaats van centreren in een schermhoge
   sectie (min_height_100 staat uit). Onder meer dan boven, zodat het geheel optisch in het midden
   staat; na de sectie volgt nog een large_break. */
#cases_scroll_anchor {
  min-height: 0;
  padding: 9vh 0 18vh;
}

#cases_scroll_anchor .slider_wrapper {
  margin-bottom: 0;
}

#cases_scroll_anchor .slider_item {
  display: flex;
}

#cases_scroll_anchor .slider_item > div {
  display: flex;
  width: 100%;
}

.case_card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.case_card .case_img_container img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.case_card:hover .case_img_container img {
  transform: scale(1.04);
}

.case_card .case_tag {
  font-size: 1rem;
  padding: 4px 10px;
}

.case_card_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.15em);
  margin: 22px 0 10px;
  font-size: clamp(1.3rem, 1.4vw, 1.6rem);
  line-height: 1.15;
}

.case_card_text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
}

.case_card_button {
  margin: auto 0 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* De hele kaart is één link. De knop is een span en krijgt zijn hover-effect van de kaart: een
   filter op een link waarin een uitgerekte ::after zat, maakte die ::after zo klein als de knop,
   waardoor de cursor bleef flikkeren. */
.case_card:hover .case_card_button {
  filter: brightness(90%);
}

/* Ruimte tussen tekst en knop, ook als de tekst kort is. */
.case_card_text {
  margin-bottom: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .case_card .case_img_container img {
    transition: none;
  }

  .case_card:hover .case_img_container img {
    transform: none;
  }
}

@media (max-width: 768px) {
  .case_img_overlay {
    opacity: 0;
  }
}

/* Case detailpagina (/cases/<case_id>-<slug>/) */

/* Op de homepage ligt .case_tag over de afbeelding, hier staat hij los boven de titel. */
.case_detail_tag {
  position: static;
  display: inline-block;
  margin-bottom: 15px;
}

.case_detail_buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.case_detail_buttons .button {
  margin-right: 15px;
}

/* Header van de casepagina: één case uitgelicht op de papierachtergrond van de homepage. Links
   de foto, rechts tag, organisatie, titel, korte tekst en de knoppen Lees verder en Bekijk
   website. */
.case_feature {
  position: relative;
  display: flow-root;
  background-position: center;
}

/* Paginatitel "Cases" in de header: gecentreerd, op dezelfde hoogte als het logo
   (.logo_container: top 60px, 75px hoog) en de knop "Terug naar home". Een div en geen kop,
   want de h1 is de titel van de case. */
.case_feature_page_title {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  height: 75px;
  display: flex;
  align-items: center;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  z-index: 2;
}

/* Op mobiel staat het logo in de flow; de titel komt er gecentreerd onder. */
@media (max-width: 767px) {
  .case_feature_page_title {
    position: static;
    transform: none;
    height: auto;
    display: block;
    clear: both;
    padding-top: 28px;
    text-align: center;
  }
}

/* "Terug naar home" rechtsboven, op dezelfde hoogte als het logo (.logo_container). */
.case_hero_home {
  position: absolute;
  top: 72px;
  right: 60px;
  margin: 0;
  z-index: 2;
}

.case_feature_grid {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 5rem;
  align-items: center;
  /* Bovenin genoeg ruimte om onder het logo en de titel "Cases" te beginnen; onderin evenveel. */
  padding: max(10vh, 90px) 0;
}

.case_feature_image {
  margin: 0;
  aspect-ratio: 3 / 4;
  max-width: 520px;
  justify-self: end;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--color-5);
}

.case_feature_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case_feature_info .case_detail_tag {
  margin-bottom: 14px;
  font-size: 1.2rem;
  padding: 6px 14px;
}

.case_feature_organization {
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Zelfde letter als de titels in de hero van de homepage en de landingspagina's. */
.case_feature_title {
  font-size: clamp(2.4rem, 3.6vw, 4.4rem);
  line-height: 1.02;
  overflow-wrap: break-word;
  font-weight: 800;
  margin: 0.2em 0 0.4em;
}

.case_feature_text {
  max-width: 55ch;
  font-size: clamp(1.1rem, 1.3vw, 1.4rem);
}

.case_feature_text p {
  line-height: 1.5;
}

@media (max-width: 767px) {
  /* minmax(0, 1fr): anders rekt de kolom mee met het langste woord en loopt de tekst buiten beeld. */
  .case_feature_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2vh 0 8vh;
  }

  .case_feature_image {
    justify-self: center;
    max-width: 75vw;
  }

  .case_feature_title {
    hyphens: auto;
  }

  .case_feature_organization {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Secties op de landingspagina's en de casepagina staan gewoon onder elkaar, zonder float.
   frame.css bouwt de homepage met floats (.width_100 floatt); een mix van floats en gewone
   blokken laat Safari achtergronden te kort tekenen en het donkere vlak boven de footer
   weglaten. clear: both zorgt dat elke sectie onder alles erboven begint. */
.landing_page_block,
.landing_page_more,
.case_story,
.cta_case,
.page_footer_space {
  float: none;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

/* "Waar we je nog meer bij helpen" (inc/landing-pages-more.php): de andere landingspagina's als
   kaarten. Staat onder de afsluitende banner, direct boven de footer, op effen lichte zandkleur
   (--color-0): de papieren banner erboven en de footer eronder lopen er met een verloop in over. */
.landing_page_more {
  padding: 5vh 0 12vh;
}

.landing_page_more_head {
  text-align: center;
  margin-bottom: 6vh;
}

.landing_page_more_title {
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.05;
}

/* Tot drie kolommen naast elkaar, in de opbouw van de pijlerstrook onder de hero: geen kaarten
   maar kolommen met dunne scheidingslijnen, grote oranje nummers en een onderstreepte link. Een
   onvolledige laatste rij staat gecentreerd. */
.landing_page_more_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 0;
}

.landing_page_more_card {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(100% / 3);
  min-width: 260px;
  box-sizing: border-box;
  padding: 0 2.5rem;
  border-left: 1px solid rgb(64 89 64 / 20%);
  color: var(--color-3);
  text-decoration: none;
}

.landing_page_more_grid > .landing_page_more_card:first-child {
  border-left: 0;
}

.landing_page_more_card_body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

.landing_page_more_card_name {
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-4);
  transition: color 0.4s;
}

.landing_page_more_card_subtitle {
  font-size: 1.15rem;
  color: var(--color-7);
}

/* "Bekijk" met een kleine pijl, altijd onderaan: zo staan ze in alle kolommen op één lijn. */
.landing_page_more_card_footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: var(--color-1);
  font-size: 1.15rem;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.landing_page_more_card_arrow {
  width: 32px;
  height: 32px;
  border-color: rgb(64 89 64 / 45%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing_page_more_card_arrow img {
  filter: brightness(0.45);
}

.landing_page_more_card:hover .landing_page_more_card_name {
  color: var(--color-1);
}

.landing_page_more_card:hover .landing_page_more_card_arrow {
  transform: translateX(6px);
}

/* Horizontale carrousel (js/landing-pages-more.js zet .is_carousel): de kolommen op één rij, het
   venster laat zoveel zien als er passen (drie, op mobiel één) en de rij schuift. De eerste pixel
   valt weg, zodat de scheidingslijn van de eerste kolom in beeld niet als rand aan de zijkant
   staat. */
.is_carousel .landing_page_more_viewport {
  overflow: hidden;
  clip-path: inset(0 0 0 1px);
}

.is_carousel .landing_page_more_grid {
  position: relative;
  flex-wrap: nowrap;
  justify-content: flex-start;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.is_carousel .landing_page_more_card {
  flex: 0 0 calc(100% / 3);
  min-width: 0;
}

/* Passen alle kaarten: gecentreerd en zonder pijlen. */
.is_static .landing_page_more_grid {
  justify-content: center;
}

.is_static .landing_page_more_controls {
  display: none;
}

.landing_page_more_controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
}

/* Zonder JavaScript staan alle kaarten op rijen; pijlen hebben dan geen zin. */
.landing_page_more_rows:not(.is_carousel) .landing_page_more_controls {
  display: none;
}

.landing_page_more_count {
  margin-right: 8px;
  color: var(--color-4);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.landing_page_more_button {
  background: none;
  border-color: rgb(64 89 64 / 45%);
  cursor: pointer;
  transition: background-color 0.4s, border-color 0.4s, opacity 0.3s;
}

.landing_page_more_button img {
  filter: brightness(0.45);
  transition: filter 0.4s;
}

.landing_page_more_button:hover:not(:disabled) {
  background-color: var(--color-1);
  border-color: var(--color-1);
}

.landing_page_more_button:hover:not(:disabled) img {
  filter: brightness(0) invert(1);
}

.landing_page_more_button:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 768px) {
  .landing_page_more_card,
  .is_carousel .landing_page_more_card {
    flex-basis: 100%;
    padding: 0;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing_page_more_card_arrow,
  .is_carousel .landing_page_more_grid {
    transition: none;
  }

  .landing_page_more_card:hover .landing_page_more_card_arrow {
    transform: none;
  }
}

/* Afsluitende banner op de landingspagina's (inc/cta-banner.php met $cta_paper): zandpapier, kop,
   tekst en knop gecentreerd onder elkaar. */
.cta_paper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 14vh clamp(2rem, 6vw, 8rem);
  box-sizing: border-box;
  color: var(--color-3);
  text-align: center;
}

/* Onderaan loopt het papier over in de lichte zandkleur van de banner eronder, zonder harde lijn. */
.cta_paper.landing_page_bg_paper_calk {
  background:
    linear-gradient(to bottom, rgba(238, 230, 219, 0) 65%, var(--color-0) 100%),
    url(../img/backgrounds/Paper_Calk.jpg) center / cover no-repeat,
    var(--color-0);
}

.cta_paper_content {
  max-width: 900px;
}

.cta_paper_title {
  font-size: clamp(2.4rem, 3.6vw, 4.2rem);
  line-height: 1;
  font-weight: 800;
  color: var(--color-4);
  text-wrap: balance;
}

.cta_paper_text {
  margin: 2rem 0;
  font-size: clamp(1.1rem, 1.2vw, 1.35rem);
  line-height: 1.65;
  text-wrap: balance;
}

.cta_paper_text {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.cta_paper_subtitle {
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height: 1.1;
  color: var(--color-1);
}

.cta_paper_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 1.5rem;
}

.cta_paper .button {
  margin: 0;
}

/* "Kopieer email" verschijnt onder de knop in plaats van ernaast. */
.cta_paper_copy_message {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1rem;
  color: var(--color-4);
}

@media (max-width: 768px) {
  .cta_paper {
    padding: 64px 24px;
  }
}

/* Afsluitende banner op de casepagina (inc/cta-banner.php zonder $cta_paper): effen lichte
   zandkleur (--color-0), gecentreerd. De footer eronder
   begint in dezelfde kleur en loopt over in papier. */
.cta_case {
  clear: both;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 14vh clamp(2rem, 6vw, 8rem);
  text-align: center;
  color: var(--color-3);
  background:
    linear-gradient(to bottom, var(--color-0) 0%, rgba(238, 230, 219, 0) 35%, rgba(238, 230, 219, 0) 65%, var(--color-0) 100%),
    url(../img/backgrounds/Paper_Calk.jpg) center / cover no-repeat,
    var(--color-0);
}

.cta_case_content {
  max-width: 820px;
}

.cta_case_title {
  font-size: clamp(2.4rem, 3.6vw, 4.2rem);
  line-height: 1;
  font-weight: 800;
  color: var(--color-4);
  text-wrap: balance;
}

.cta_case_text {
  max-width: 640px;
  margin: 1.8rem auto 2rem;
  font-size: clamp(1.1rem, 1.2vw, 1.35rem);
  line-height: 1.65;
}

.cta_case_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.cta_case_buttons .button {
  margin: 0;
}

@media (max-width: 768px) {
  .cta_case {
    padding: 80px 24px;
  }
}

/* Donker vlak boven de footer, waar het logo en de slogan uit inc/logo-overlap.php overheen
   vallen. */
.page_footer_space {
  height: 15vh;
  background: var(--color-6);
}

/* Landingspagina's: de footer in lichte zandkleur, op hetzelfde papier als de banner erboven. Het
   logo en de slogan over de rand zijn dan donkergroen (inc/logo-overlap.php, 'forest'). */
.footer_light .page_footer_space,
.footer_light #copyright_footer {
  background: url(../img/backgrounds/Paper_Calk.jpg) center / cover no-repeat, var(--color-0);
}

/* Bovenaan begint de footer in de lichte zandkleur van de banner erboven en loopt dan over in het
   papier, zonder harde lijn. */
.footer_light .page_footer_space {
  background:
    linear-gradient(to bottom, var(--color-0) 0%, rgba(238, 230, 219, 0) 60%),
    url(../img/backgrounds/Paper_Calk.jpg) center / cover no-repeat,
    var(--color-0);
}

/* Het logo en de slogan staan in de footer zelf, niet over de rand: de ruimte groeit met de inhoud. */
.footer_light .page_footer_space {
  height: auto;
  padding: clamp(48px, 8vh, 96px) 0 clamp(24px, 4vh, 48px);
}

.footer_light .overlap {
  float: none;
  height: auto;
}

.footer_light .overlap .height_0 {
  height: auto;
}

.footer_light #copyright_footer,
.footer_light #copyright_footer a,
.footer_light #copyright_footer p {
  color: var(--color-3);
}

/* Video op de casepagina (YouTube of Vimeo): groot en gecentreerd, 16:9. */
/* Geen ruimte onder de video: de sectie eronder (andere cases) heeft zelf al ruimte bovenin. */
.case_video_section.banner_padding_8 {
  padding-bottom: 0;
}

.case_video {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--color-3);
}

.case_video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lange omschrijving op de casepagina: links de feiten (blijven staan tijdens het scrollen),
   rechts de tekst met tussenkoppen in Alverata, een grotere eerste alinea, citaten met een
   oranje lijn en lijsten met oranje bolletjes. */
.case_story_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 5rem;
  align-items: start;
}

.case_story_facts {
  position: sticky;
  top: 40px;
}

.case_story_label {
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  line-height: 1.1;
}

.case_story_facts dl {
  margin: 25px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-4);
}

.case_story_facts dt {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-4);
}

.case_story_facts dd {
  margin: 4px 0 18px;
  font-size: 1.2rem;
}

.case_story_facts a {
  color: var(--color-7);
  text-decoration: underline;
  text-decoration-color: var(--color-1);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.case_story_body {
  max-width: 68ch;
  font-size: 1.15rem;
}

.case_story_body p {
  line-height: 1.7;
  margin: 0 0 1.1em;
}

.case_story_body > p:first-child {
  font-size: 1.4rem;
  line-height: 1.55;
}

.case_story_body h2,
.case_story_body h3 {
  font-family: alverata, serif;
  font-style: italic;
  font-weight: 700;
  color: var(--color-4);
  margin: 1.6em 0 0.5em;
  line-height: 1.1;
}

.case_story_body h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
}

.case_story_body h3 {
  font-size: 1.5rem;
}

.case_story_body ul {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
}

.case_story_body ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
  line-height: 1.6;
}

.case_story_body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-1);
}

.case_story_body blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 4px solid var(--color-1);
  font-family: alverata, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  color: var(--color-7);
}

.case_story_body blockquote p {
  line-height: 1.35;
  margin: 0;
}

.case_story_body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

@media (max-width: 767px) {
  .case_story_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .case_story_facts {
    position: static;
  }
}

/* Landingspagina (/<slug>/) */

/* De hero is de header: logo bovenin (inc/top-menu-sub-pages.php), daaronder de inhoud
   verticaal gecentreerd in de rest van de hoogte, zoals de header van de homepage. */
.landing_page_hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 80vh;
}

.landing_page_hero_body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 5vh 0 10vh;
}

/* Logo, social buttons en inhoud boven de sluier van de achtergrondfoto. */
.landing_page_hero .logo_container,
.landing_page_hero_content {
  position: relative;
  z-index: 1;
}

/* De social buttons blijven absoluut links staan, zoals op de homepage. */
.landing_page_hero .social_media_container {
  z-index: 1;
}

/* Op de lichte achtergrond van de hero (background_img_8) valt olijf weg: de tagline naast het
   logo en de social buttons zijn hier bosgroen, zoals de F van het logo. De gedraaide slogan is
   lichtoranje (Sunset), met een eigen svg (Fomozo_Tagline_Wordmark_Sunset_Rgb_Rotated.svg). */
.landing_page_hero .logo_container_tagline {
  color: var(--color-4) !important;
}

.landing_page_hero .social_media_container .button_round {
  background-color: var(--color-4);
}

.landing_page_hero .social_media_container .button_round:hover {
  background-color: var(--color-1);
}

@media (min-width: 769px) {
  .landing_page_hero .logo_container {
    position: absolute;
  }
}

/* Slogan rechts (.slogan_container, zoals op de homepage). Daar centreert de flex-uitlijning
   van de hero hem verticaal; deze header is een kolom, dus hier expliciet. */
.landing_page_slogan {
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Titel in de hero: dezelfde maat, regelhoogte en dikte als de titel in de hero van de
   homepage (#header h1). */
.landing_page_hero_title {
  line-height: clamp(3.5rem, 3.3vw, 4.5rem);
  font-size: clamp(4rem, 3.7vw, 5.7rem);
  font-weight: 800;
}

/* Twee kolommen, zoals de hero van de homepage. De linkerkolom is iets breder, zodat de titel ruimte
   heeft. */
.landing_page_hero_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

/* In de linkerkolom schaalt de titel mee met de schermbreedte, zodat ook een lang woord als
   "Communicatieadvies" heel blijft. Dikte en regelhoogte zoals de homepage. */
.landing_page_hero_title {
  margin: 0;
}

.landing_page_hero_grid .landing_page_hero_title {
  font-size: clamp(2.4rem, 3.5vw, 5.2rem);
  line-height: 1.02;
}

.landing_page_hero_grid .landing_page_hero_side .landing_page_intro {
  margin-top: 0;
}

@media (max-width: 768px) {
  /* minmax(0, 1fr): anders rekt de kolom mee met het langste woord (bijv. in de ondertitel) en
     loopt alle tekst rechts buiten beeld. */
  .landing_page_hero_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .landing_page_hero_grid .landing_page_hero_title {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  /* Lange woorden (zoals "arbeidsmarktcommunicatie") mogen hier afbreken. */
  .landing_page_hero_title,
  .landing_page_subtitle {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .landing_page_subtitle {
    font-size: 1.35rem;
    line-height: 1.25;
  }

  /* De standaard mobiele regel schuift het logo 2vh omhoog (top: -2vh); in de hero valt het dan
     deels boven de rand. Hier gewoon ruimte erboven. */
  /* De wrapper van het logo (inc/top-menu-sub-pages.php) is 10vh hoog; op mobiel groeit hij mee,
     anders valt het logo over de tag eronder. */
  .landing_page_hero .height_10,
  .case_feature .height_10 {
    height: auto;
  }

  .landing_page_hero .logo_container,
  .case_feature .logo_container {
    top: 0;
    height: 130px;
    padding-top: 40px;
  }

  .landing_page_hero .logo_container img,
  .case_feature .logo_container img {
    height: 90px;
    width: auto;
  }

  /* Op mobiel iets groter dan de 75px van desktop: logo 90px hoog, de tekst ernaast evenredig. */
  .landing_page_hero .logo_container_tagline,
  .case_feature .logo_container_tagline {
    font-size: 1.85rem;
    line-height: 1.95rem;
  }
}

/* Zoals "We never miss." onder de titel op de homepage (#header h2). */
.landing_page_subtitle {
  margin: 14px 0 0;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase; /* een p en geen kop: de hoofdletters moeten hier expliciet */
}

/* Zoals de tekst rechts in de hero van de homepage (#header p). */
.landing_page_intro {
  max-width: 55ch;
  font-style: italic;
}

.landing_page_intro p {
  margin: 0 0 0.8em;
  font-size: clamp(1.25rem, 1.2vw, 1.7rem);
  line-height: 1.55;
}

.landing_page_hero_content .landing_page_intro {
  margin-top: 28px;
}

.landing_page_hero_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 12px;
}

.landing_page_hero_buttons .button {
  margin: 0;
}

/* Papierachtergronden voor de hero en de blokken (keuze in het beheer, zie landingPageStyle()).
   PAPER_DARK gebruikt background_img_5, de achtergrond van Connecten? op de homepage. */
.landing_page_bg_paper_calk,
.landing_page_bg_paper_sunset,
.landing_page_bg_paper_pine {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.landing_page_bg_peach {
  background-color: #fde6d6;
}

.landing_page_bg_paper_calk {
  background-image: url(../img/backgrounds/Paper_Calk.jpg);
}

.landing_page_bg_paper_sunset {
  background-image: url(../img/backgrounds/Paper_Sunset.jpg);
}

.landing_page_bg_paper_pine {
  background-image: url(../img/backgrounds/Paper_Pine.jpg);
}

/* Blok: tekst met optioneel één afbeelding of video ernaast. */
.landing_page_block_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Alleen de volgorde wisselt; in de html staat de tekst altijd eerst, zodat schermlezers en
   zoekmachines de kop vóór de media lezen. */
.landing_page_block_media_left .landing_page_block_media {
  order: -1;
}

/* Koppen van de landingspagina's: een lang woord (bijv. "arbeidsmarktcommunicatie") breekt af met
   een koppelteken (lang="nl"), en anders op de kolomgrens, zodat het nooit over de kolom ernaast
   of de rand loopt. */
.landing_page_block_title,
.landing_page_pillars_name,
.landing_page_more_card_name,
.cta_case_title {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Nummer van een pijler, gelijk aan dat op zijn tegel in de strook onder de hero. */
.landing_page_block_number {
  display: block;
  margin-bottom: 0.6rem;
  font-size: clamp(2.5rem, 3.5vw, 3.8rem);
  line-height: 0.9;
  color: var(--color-1);
}

/* Een gewone h2 is 4rem; dat is te groot naast een afbeelding in een halve kolom. */
.landing_page_block_title {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  margin-top: 0;
}

/* Een blok zonder media is één kolom op leesbare breedte. */
.landing_page_block_text_only {
  max-width: 75ch;
  margin: 0 auto;
}

/* Zonder media met Positie tekst Links of Rechts: twee kolommen, de tekst aan die kant en titel
   en statement aan de andere. In de html staan titel en statement eerst; bij Links schuift de
   tekst met order naar links. */
.landing_page_block_split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.landing_page_block_split_text_left .landing_page_block_text {
  order: -1;
}

/* Titel en tekst beginnen op dezelfde hoogte: het eerste element in elke kolom heeft geen
   bovenmarge (een alinea uit de editor heeft er standaard een). */
.landing_page_block_split .landing_page_block_head > :first-child,
.landing_page_block_split .landing_page_block_text > :first-child {
  margin-top: 0;
}

.landing_page_block_head .landing_page_block_lead {
  margin-bottom: 0;
}

/* Zonder media met Positie tekst Midden: alles gecentreerd. Het statement krijgt dan een kort
   oranje lijntje erboven in plaats van de streep links. */
.landing_page_block_text_center {
  text-align: center;
}

.landing_page_block_text_center .landing_page_block_lead {
  padding: 18px 0 0;
  border-left: 0;
  background: linear-gradient(var(--color-1), var(--color-1)) top center / 48px 3px no-repeat;
}

.landing_page_block_text_center .landing_page_chips {
  justify-content: center;
}

.landing_page_block_text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.landing_page_block_media {
  margin: 0;
}

.landing_page_block_media img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: block;
}

/* Houdt de insluiting op 16:9 zonder dat de pagina verspringt tijdens het laden. */
.landing_page_block_embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
}

.landing_page_block_embed iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Pijlers op de landingspagina's. */

/* Strook met de pijlers direct onder de hero: drie genummerde kolommen die naar de uitwerking
   springen. Op het donkergroene papier van de index op de homepage, zonder kaarten: dunne lichte
   scheidingslijnen, grote oranje nummers, perzik titels en een oranje onderstreepte link. */
.landing_page_pillars_strip {
  padding: 10vh 0;
  background: linear-gradient(rgb(31 43 26 / 35%), rgb(31 43 26 / 70%)),
    var(--color-3) url(../img/backgrounds/Paper_Pine.jpg) center / cover;
}

.landing_page_pillars_tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing_page_pillars_tiles li {
  display: flex;
}

.landing_page_pillars_tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2.5rem;
  border-left: 1px solid rgb(238 230 219 / 22%);
  color: var(--color-0);
  text-decoration: none;
}

.landing_page_pillars_tiles li:first-child .landing_page_pillars_tile {
  padding-left: 0;
  border-left: 0;
}

.landing_page_pillars_number {
  display: block;
  font-size: clamp(3.5rem, 5vw, 5.5rem);
  line-height: 0.9;
  color: var(--color-1);
}

.landing_page_pillars_name {
  margin: 18px 0 10px;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.15;
  color: var(--color-2);
  transition: color 0.4s;
}

.landing_page_pillars_tile:hover .landing_page_pillars_name {
  color: var(--color-0);
}

.landing_page_pillars_lead {
  margin-bottom: 22px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgb(238 230 219 / 85%);
}

.landing_page_pillars_more {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: var(--color-1);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.landing_page_pillars_arrow {
  width: 32px;
  height: 32px;
  border-color: rgb(238 230 219 / 50%);
  transform: rotate(90deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing_page_pillars_arrow img {
  filter: brightness(0) invert(1);
}

.landing_page_pillars_tile:hover .landing_page_pillars_arrow {
  transform: rotate(90deg) translateX(6px);
}

@media (max-width: 1023px) {
  .landing_page_pillars_tile,
  .landing_page_pillars_tiles li:first-child .landing_page_pillars_tile {
    padding: 2rem 0;
    border-left: 0;
    border-top: 1px solid rgb(238 230 219 / 22%);
  }

  .landing_page_pillars_tiles li:first-child .landing_page_pillars_tile {
    padding-top: 0;
    border-top: 0;
  }
}

/* Een blok met het vinkje Pijler onder de hero: het anker valt niet tegen de bovenrand, het
   statement staat uitgelicht onder de kop en de diensten als chips onder de tekst. */
.landing_page_block[id] {
  scroll-margin-top: 2rem;
}

.landing_page_block_lead {
  margin: 0 0 1.5rem;
  padding-left: 20px;
  border-left: 3px solid var(--color-1);
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  line-height: 1.3;
}

.landing_page_block_services_title {
  margin: 2.5rem 0 1rem;
  font-size: 1.3rem;
}

.landing_page_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing_page_chips li {
  padding: 6px 14px;
  border: 1px solid rgb(64 89 64 / 35%);
  border-radius: 999px;
  background: rgb(238 230 219 / 60%);
  color: var(--color-4);
  font-size: 1rem;
  line-height: 1.3;
}

@media (max-width: 1023px) {
  .landing_page_pillars_tiles {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  .landing_page_pillars_arrow,
  .landing_page_pillars_tile:hover .landing_page_pillars_arrow {
    transition: none;
    transform: rotate(90deg);
  }
}

/* "Waar we je bij helpen" op de homepage (inc/landing-pages.php): een index op donkergroen papier.
   Links kop en inleiding, rechts per landingspagina een rij; bij meer dan drie een eindige
   verticale carrousel (js/landing-pages-index.js). */
.landing_page_index {
  padding: 12vh 0;
  background: linear-gradient(rgb(31 43 26 / 35%), rgb(31 43 26 / 70%)),
    var(--color-3) url(../img/backgrounds/Paper_Pine.jpg) center / cover;
  color: var(--color-0);
}

.landing_page_index_grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 5rem;
  align-items: start;
}

.landing_page_index_intro {
  position: sticky;
  top: 40px;
}

.landing_page_index_title {
  font-size: clamp(2.6rem, 3.6vw, 4.4rem);
  line-height: 1;
  color: var(--color-0);
}

.landing_page_index_text {
  margin: 20px 0 10px;
  max-width: 34ch;
  color: rgb(238 230 219 / 75%);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* De bovenste lijn staat op het venster en niet op de lijst, zodat er in de carrousel ook na
   doorschuiven een lijn boven de eerste rij in beeld staat. */
.landing_page_index_viewport {
  border-top: 1px solid rgb(238 230 219 / 20%);
}

.landing_page_index_list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Carrousel (alleen met JavaScript): drie rijen in beeld, het venster en de lijst bewegen mee. */
.is_carousel .landing_page_index_viewport {
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.is_carousel .landing_page_index_list {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing_page_index_controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
}

.landing_page_index_count {
  margin-right: 8px;
  color: rgb(238 230 219 / 70%);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.landing_page_index_button {
  background: none;
  cursor: pointer;
  transition: background-color 0.4s, border-color 0.4s, opacity 0.3s;
}

/* De pijlen links en rechts, een kwartslag gedraaid: omhoog en omlaag. */
.landing_page_index_button img {
  width: 60%;
  transform: rotate(90deg);
  transition: filter 0.4s;
}

.landing_page_index_button:hover:not(:disabled) {
  background-color: var(--color-1);
  border-color: var(--color-1);
}

.landing_page_index_button:hover:not(:disabled) img {
  filter: brightness(0) invert(1);
}

.landing_page_index_button:disabled {
  opacity: 0.3;
  cursor: default;
}

.landing_page_index_list li {
  border-bottom: 1px solid rgb(238 230 219 / 20%);
}

.landing_page_index_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 28px 0;
  color: var(--color-0);
  text-decoration: none;
}

/* Bij hover schuift de titel iets op. Met transform en niet met padding: dat verandert de
   opmaak niet, dus de tekst loopt niet door naar een extra regel en de rij blijft even hoog. */
.landing_page_index_main {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing_page_index_row:hover .landing_page_index_main {
  transform: translateX(10px);
}

.landing_page_index_main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing_page_index_name {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  transition: color 0.4s;
}

.landing_page_index_subtitle {
  color: rgb(238 230 219 / 70%);
  font-size: 1.15rem;
}

/* Pijlen in wit (transparant), bij hover gevuld oranje. */
.landing_page_index_arrow,
.landing_page_index_button {
  border-color: rgb(238 230 219 / 45%);
}

.landing_page_index_arrow img,
.landing_page_index_button img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.landing_page_index_arrow {
  transition: background-color 0.4s, border-color 0.4s;
}

.landing_page_index_arrow img {
  width: 60%;
  transition: filter 0.4s;
}

.landing_page_index_row:hover .landing_page_index_name {
  color: var(--color-1);
}

.landing_page_index_row:hover .landing_page_index_arrow {
  background-color: var(--color-1);
  border-color: var(--color-1);
}

.landing_page_index_row:hover .landing_page_index_arrow img {
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  .landing_page_index_grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .landing_page_index_intro {
    position: static;
  }

  /* Op een telefoon is de hele rij de knop; tag en pijl vallen weg, zodat lange woorden passen. */
  .landing_page_index_row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    padding: 22px 0;
  }

  .landing_page_index_name {
    font-size: 1.35rem;
    overflow-wrap: break-word;
  }

  .landing_page_index_arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing_page_index_main,
  .is_carousel .landing_page_index_viewport,
  .is_carousel .landing_page_index_list {
    transition: none;
  }

  .landing_page_index_row:hover .landing_page_index_main {
    transform: none;
  }
}

/* Op een telefoon staat alles onder elkaar, media altijd onder de tekst. */
@media (max-width: 768px) {
  .landing_page_intro,
  .landing_page_block_text_only {
    max-width: 100%;
  }

  .landing_page_block_grid,
  .landing_page_block_split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .landing_page_block_split_text_left .landing_page_block_text {
    order: 0;
  }

  .landing_page_block_media_left .landing_page_block_media {
    order: 0;
  }
}

.logo_container {
  display: flex;
  position: absolute;
  height: 75px;
  left: 60px;
  top: 60px;
  align-items: stretch;
  gap: 2rem;
  font-style: italic;
}

/* "YOUR PERSONAL AGENCY" naast de F op de subpagina's (inc/top-menu-sub-pages.php): drie
   regels die samen even hoog zijn als de F. */
.logo_container_tagline {
  display: flex;
  align-items: center;
  font-size: 1.55rem;
  line-height: 1.6rem;
  text-transform: uppercase;
  white-space: nowrap;
  /* .logo_container heeft 2rem tussenruimte; zo staat de tekst dichter bij de F, zoals in het
     oude logo. */
  margin-left: -1rem;
}

.logo_container h2 {
  font-size: 1.7rem;
  line-height: 1.7rem;
  font-style: italic;
  margin: 0;
}

@media (max-width: 768px) {
  .logo_container {
    width: 100%;
    position: relative;
    left: 0;
    top: -2vh;
    padding: 0 50px;
  }
}

.social_media_container {
  position: absolute;
  left: 30px;
  top: 200px;
}

.social_media_container a,
.social_media_container button {
  margin: 10px;
  transition: 0.8s;
}

.social_media_container a:hover,
.social_media_container button:hover {
  background-color: var(--color-1);
}

.slogan_container {
  position: absolute;
  right: 40px;
  width: fit-content;
}

.slogan_container img {
  width: 80px;
  max-height: 70vh;
}

.overlap {
  float: left;
  height: 0;
  position: relative;
  z-index: 1;
  align-items: center;
  display: flex;
  width: 100%;
  justify-content: center;
}

#loader_container {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  background: var(--color-0);
}

#header p {
  line-height: clamp(1.9rem, 1.6vw, 2.7rem);
  font-size: clamp(1.4rem, 1.2vw, 2rem);
}
#header h1 {
  line-height: clamp(3.5rem, 3.3vw, 4.5rem);
  font-size: clamp(4rem, 3.7vw, 5.7rem);
  font-weight: 800;
}

#header h2,
#header #text {
  font-size: 2rem;
}
.accordion .content {
  display: none;
  width: 100%;
}

.accordion .title {
  border: none;
  border-top: 2px solid;
  width: 100%;
  background: none;
  text-align: left;
  padding: 20px 0;
  cursor: pointer;
  width: 100%;
}

.accordion .title.active {
  color: var(--color-1);
}

.accordion .title::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 20px;
  font-weight: bold;
  font-size: 22px;
}

.accordion .item.open .title::after {
  content: "-";
}

.accordion .content {
  padding: 0 10px 30px 10px;
  line-height: 1.9rem;
}

.friends_accordion_heading {
  font-size: 10rem;
  font-weight: bold;
  transition: 0.5s;
}

.friends_grid_item {
  padding: 20px;
  border-radius: var(--border-radius);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.friends_grid_item_text {
  width: 0;
  overflow: hidden;
  transition: 0.8s;
  color: var(--color-0);
}

.friends_grid_item:hover {
  width: 500%;
}

.friends_grid_item_text p {
  width: 350px;
}

@media (min-width: 768px) {
  .friends_grid_item:hover .friends_grid_item_text {
    width: 350px;
    color: var(--color-3);
  }

  .friends_grid_item:hover .friends_accordion_heading {
    font-size: 0rem;
  }
}

@media (max-width: 768px) {
  .friends_grid_item:hover .friends_accordion_heading {
    color: var(--color-3);
  }

  .friends_grid_item {
    flex-basis: 100%;
    width: 100%;
  }

  .friends_grid_item_text {
    color: var(--color-3);
    width: 100%;
  }

  .friends_grid_item_text p {
    width: 100%;
  }

  .friends_accordion_heading {
    font-size: 8rem;
  }
}

.skills_accordion_heading {
  font-size: 1.6rem;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
}

.stay_connected_grid_item {
  background: var(--color-0);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stay_connected_grid_item img {
  width: 100%;
  border-radius: var(--border-radius);
}

.stay_connected_grid_item:hover .stay_connected_grid_item_overlay {
  opacity: 0.8;
}

.stay_connected_grid_item_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transition: opacity 0.5s;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7rem;
}

.portrait_container {
  background: var(--color-0);
  aspect-ratio: 4 / 4.6;
  position: relative;
  border-radius: var(--border-radius);
  margin: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait_container img {
  width: 100%;
  border-radius: var(--border-radius);
}

.portrait_seal_agency_container {
  position: absolute;
  left: -16.5%;
  bottom: 53%;
  width: 35%;
  aspect-ratio: 1;
}

@media (max-width: 768px) {
  .portrait_container {
    margin: 20px;
  }
}
.logo_banner {
  width: 100%;
  overflow: hidden;
}

/* Twee eindeloze banen (inc/logos.php): elke baan is twee gelijke helften naast elkaar die samen één
   helft opschuiven, dus zonder sprong. De duur volgt het aantal items (--logo-count), zodat de
   snelheid gelijk blijft. */
.logo_slider,
.logo_slider_2 {
  display: flex;
  width: max-content;
  align-items: center;
  animation: logo_marquee calc(var(--logo-count, 10) * 5s) linear infinite;
}

.logo_slider_2 {
  animation-direction: reverse;
}

.logo_slider_half {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo_slider img {
  max-height: 80px;
  margin-right: 80px;
  max-width: 200px;
  height: 100%;
}

.logo_slider_2 li {
  padding: 0 50px;
  white-space: nowrap;
  font-size: 1.17em;
  font-weight: 900;
  text-transform: uppercase;
}

@media (min-width: 320px) and (max-width: 767px) {
  .logo_slider,
  .logo_slider_2 {
    animation-duration: calc(var(--logo-count, 10) * 4s);
  }

  .logo_slider img {
    max-height: 60px;
    margin-right: 60px;
    max-width: 150px;
    height: 100%;
  }

  .logo_slider_2 li {
    font-size: 1rem;
    padding: 0 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo_slider,
  .logo_slider_2 {
    animation: none;
  }
}

@keyframes logo_marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#footer {
  background: var(--color-6);
  color: var(--color-0);
}

/* Geen float (de klasse width_100 floatt): html en body hebben overflow-x clip/hidden, en Safari
   knipt dan wat buiten de hoogte van de body valt af. Een floatende footer telt niet mee in die
   hoogte en verdween daardoor op mobiel, met een lege zandkleurige strook eronder. */
#copyright_footer {
  float: none;
  clear: both;
  width: 100%;
  background: var(--color-6);
  padding: 30px 60px;
  font-weight: 600;
}

.policy_document_container h1 {
  font-size: 3rem;
  text-transform: none;
}
.policy_document_container h2 {
  font-size: 2rem;
  text-transform: none;
}
.policy_document_container h3 {
  font-size: 1rem;
  text-transform: none;
}

.slider_wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 60px;
}

.slider_container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-y: hidden;
}

.slider_container::-webkit-scrollbar {
  display: none;
}

.slider_item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 20px;
}

.slider_button {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.slider_button_prev {
  left: 10px;
}

.slider_button_next {
  right: 10px;
}

@media (min-width: 1024px) {
  .slider_button {
    display: block;
  }

  .slider_wrapper.slider_2 .slider_item {
    flex: 0 0 50%;
  }

  .slider_wrapper.slider_3 .slider_item {
    flex: 0 0 33.3333%;
  }

  .slider_wrapper.slider_4 .slider_item {
    flex: 0 0 25%;
  }

  .slider_wrapper.slider_5 .slider_item {
    flex: 0 0 20%;
  }

  .slider_wrapper.slider_6 .slider_item {
    flex: 0 0 16.6667%;
  }

  .slider_wrapper.slider_7 .slider_item {
    flex: 0 0 14.2857%;
  }

  .slider_wrapper.slider_8 .slider_item {
    flex: 0 0 12.5%;
  }

  .slider_wrapper.slider_9 .slider_item {
    flex: 0 0 11.1111%;
  }

  .slider_wrapper.slider_10 .slider_item {
    flex: 0 0 10%;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.rotation_animation {
  animation: rotate 10s linear infinite;
}

/* Relevante case zonder trapcarrousel (inc/case-spotlight.php): de eerste case uitgelicht met foto,
   de andere (max. twee) rechts als tekst, in een lijst met een dunne lijn voor elke case. */
.case_spot {
  clear: both;
  position: relative;
  padding: clamp(80px, 14vh, 160px) 0;
  box-sizing: border-box;
  background:
    linear-gradient(to bottom, var(--color-0) 0%, rgba(238, 230, 219, 0) 20%),
    url(../img/backgrounds/Paper_Calk.jpg) center / cover no-repeat,
    var(--color-0);
  --spot-w: clamp(240px, min(26vw, 46svh), 420px);
}

.case_spot .screen_width {
  position: relative;
}

.case_spot_grid {
  display: grid;
  grid-template-columns: var(--spot-w) minmax(0, 1fr) minmax(240px, 28%);
  gap: 48px;
  align-items: start;
}

.case_spot_grid.case_spot_single {
  grid-template-columns: var(--spot-w) minmax(0, 1fr);
}

.case_spot_photo {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--color-5);
}

.case_spot_photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.case_spot_main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.case_spot_title {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 3.2vw, 3.8rem);
  line-height: 1;
}

.case_spot_main .case_detail_tag {
  margin-bottom: 14px;
  font-size: 1.1rem;
  padding: 5px 12px;
}

.case_spot_organization {
  font-size: clamp(1.2rem, 1.5vw, 1.8rem);
  line-height: 1.2;
  text-transform: uppercase;
}

.case_spot_case_title {
  margin: 0.25em 0 0.4em;
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  line-height: 1.05;
}

.case_spot_text {
  font-size: clamp(1rem, 1.1vw, 1.25rem);
}

.case_spot_text p {
  margin: 0 0 0.6em;
  line-height: 1.45;
}

.case_spot_main .button {
  margin: 14px 0 0;
  font-size: 1.15rem;
  padding: 12px 45px;
}

/* Rechterkolom: de andere cases, alleen tekst. */
.case_spot_others {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case_spot_other {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.case_spot_other_tag {
  font-size: 0.9rem;
  color: var(--color-4);
}

.case_spot_other_organization {
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-4);
}

.case_spot_other_title {
  font-size: clamp(1.3rem, 1.6vw, 1.8rem);
  line-height: 1.15;
  color: var(--color-1);
}

.case_spot_other_more {
  margin-top: 4px;
  color: var(--color-3);
  transition: transform 0.3s;
}

.case_spot_other:hover .case_spot_other_more,
.case_spot_other:focus-visible .case_spot_other_more {
  transform: translateX(6px);
}

.case_spot_other:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 6px;
}

.case_spot_others li {
  padding: 22px 0;
  border-top: 1px solid var(--color-4);
}

.case_spot_others li:last-child {
  border-bottom: 1px solid var(--color-4);
}

/* Tot 1024px onder elkaar: foto, uitgelichte tekst, daaronder de andere cases. */
@media (max-width: 1023px) {
  .case_spot_grid,
  .case_spot_grid.case_spot_single {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case_spot_photo {
    width: min(58vw, 320px);
    justify-self: center;
  }

  .case_spot_title {
    align-self: center;
    text-align: center;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }

  .case_spot_main {
    margin: 0 10%;
  }
}