/*
 * AmbitionBI website: corrections on top of the theme.
 *
 * Loaded after the theme stylesheets. Everything here fixes a rendering
 * defect or aligns the page with the brand guide. This is not a place to
 * restyle the site: per how-we-work-marketing.md §11.0 the template decides
 * what the site looks like. Each rule below says which defect it answers.
 */

/* --------------------------------------------------------------------------
   0. Figtree, self-hosted.

   The theme and every heading rule below ask for Figtree (brand.md §3), and
   the old site loaded it from Google Fonts. The July capture only brought
   the Open Sans stylesheet along, and the CSP allows no request to Google,
   so from the first build until 2026-08-26 every heading fell back to Arial
   and nothing reported it. The two files are Google's own latin and
   latin-ext subsets of Figtree v9 (variable, 300 to 700), OFL-licensed;
   the licence sits beside them in assets/fonts/. The version is in the
   file name, so a new font version is a new URL (§11.4).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-v9-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-v9-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Body copy is left aligned, never justified.

   The theme ships `text-align: justify; hyphens: auto` on paragraph copy.
   Justified text at this measure opens rivers of white space between words
   and the automatic hyphenation breaks Dutch compounds mid-word: "de cij-
   fers", "gemo-delleerd". brand.md §3 specifies left aligned body copy for
   exactly this reason.
   -------------------------------------------------------------------------- */

#top .avia_textblock p,
#top .avia_textblock li,
#top .avia_textblock td,
#top .iconlist_content_wrap p,
#top .entry-content-wrapper p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* The rule above was not enough, and the gap was only visible on a phone.
   Two things beat it. The theme ships `#main p { hyphens: auto !important }`,
   which no plain declaration can outrank, so Dutch compounds still broke
   mid-word: "actie-plan", "be-gint", "maandrapporta-ge". And the per-section
   stylesheet Enfold generated sets `text-align: justify` on the whole
   `.avia_textblock` of the closing band, which headings inherit, so the h2
   "Begin met de Business Data Scan" came out with word gaps wide enough to
   read as a layout fault. Reported from a phone, 2026-08-03.

   Headings were never covered by the rule at all, only p / li / td. Both are
   fixed here, with `!important` because the declarations being overridden
   carry it too. */
#top .avia_textblock,
#top .avia_textblock p,
#top .avia_textblock li,
#top .avia_textblock h1,
#top .avia_textblock h2,
#top .avia_textblock h3,
#top .avia_textblock h4,
#top .avia_textblock blockquote,
#top .iconlist_title,
#top .iconlist_content_wrap p {
  text-align: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}

/* Turning hyphenation off has a cost on a phone: a Dutch compound longer than
   the column no longer breaks, so "investeringsmaatschappij" in a case heading
   ran off the right edge at 390px, which is the horizontal-overflow failure
   §11 exists to prevent. `overflow-wrap` breaks a word only when it cannot fit
   at all, where `hyphens: auto` was breaking ordinary words mid-syllable. Both
   ends of the same problem, and this is the end worth keeping. */
#top .avia_textblock h1,
#top .avia_textblock h2,
#top .avia_textblock h3,
#top .avia_textblock h4,
#top .avia_textblock p,
#top .avia_textblock li,
#top .iconlist_title,
#top h1,
#top h2,
#top h3 {
  overflow-wrap: break-word;
  word-break: normal;
}

/* The number in the process band is the one thing on the site that is
   deliberately right aligned, so it has to opt back out. */
#top .kj-big-number,
#top .kj-big-number p {
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   2. Tables are readable.

   Theme table cells render at 13px against 18px body copy. On the pricing
   page that is the single most important table on the site and it was the
   smallest text on the page.
   -------------------------------------------------------------------------- */

#top .avia_textblock table {
  border-collapse: collapse;
  margin: 1.6em 0;
}

#top .avia_textblock table th,
#top .avia_textblock table td {
  font-size: 16px;
  line-height: 1.55;
  padding: 14px 18px;
  vertical-align: top;
}

#top .avia_textblock table th {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The rightmost column is the price, or the lead time. Give it weight, because
   it is what the reader came for. It used to be `nowrap` too, which was right
   for "€4.000" and wrong the moment a cell held a range in words: the column
   grew to the width of the sentence and pushed the table off the page. */
#top .avia_textblock table td:last-child {
  font-weight: 600;
}

/* On a phone a three-column table cannot fit: the middle column is a sentence
   and both outer columns are nowrap, so the row runs off the right edge and the
   price, the one thing the reader came for, is the part that disappears. Stack
   each row instead of scrolling it sideways. The first cell is the row's name
   and reads as its heading, so no per-cell labels are needed. */
@media only screen and (max-width: 767px) {
  #top .avia_textblock table,
  #top .avia_textblock table tbody,
  #top .avia_textblock table tr,
  #top .avia_textblock table td {
    display: block;
    width: auto;
  }

  #top .avia_textblock table thead {
    display: none;
  }

  #top .avia_textblock table tr {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    margin: 0 0 14px;
    padding: 14px 16px;
  }

  #top .avia_textblock table td {
    border: 0;
    padding: 0 0 6px;
    white-space: normal;
  }

  #top .avia_textblock table td:first-child {
    font-family: 'Figtree', 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
  }

  #top .avia_textblock table td:last-child {
    padding: 6px 0 0;
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   2b. Rows of four and five get an even gutter.

   The theme's card row is a real CSS table. Margins are ignored on a table
   cell, so the gutters are whatever the table algorithm has left over after
   honouring the cell widths. At three cells that lands on an even 26px. At
   four it gives the first three 26px and the fourth nothing, so cards three
   and four touch, which is the overlap that was visible on every page
   showing the four build layers.

   Rows of four and five come out of table layout and use flex with a real
   gap. Equal height comes free from `align-items: stretch`.
   -------------------------------------------------------------------------- */

#top .flex_column_table.ab-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#top .flex_column_table.ab-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#top .flex_column_table.ab-grid-4,
#top .flex_column_table.ab-grid-5 {
  align-items: stretch;
  gap: 26px;
  width: 100%;
}

/* Grid, not flex. Flex sized the cells from their content, so a card whose
   title wrapped to two lines came out taller than its neighbours and the row
   read as ragged. `1fr` columns are equal by construction, and `stretch` plus
   an explicit full height makes every card the height of the tallest one
   rather than of its own text. */
#top .flex_column_table.ab-grid-4 > .flex_column,
#top .flex_column_table.ab-grid-5 > .flex_column {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  height: 100%;
  margin-left: 0;
  align-self: stretch;
  /* The theme gives every column a 50px top margin except the one it marks
     `.first`, which gets none, because in table layout the margin was ignored
     anyway. In a grid it is not ignored, so the first card floated 50px above
     its neighbours and the row read as broken. Zero them all and put the gap
     on the row instead, so the spacing the theme intended survives and the
     cards line up. */
  margin-top: 0;
}

#top .flex_column_table.ab-grid-4,
#top .flex_column_table.ab-grid-5 {
  margin-top: 50px;
}

/* Between tablet and the theme's desktop breakpoint, four cards across is too
   narrow to be readable: measured at 820px each card came out about 120px of
   text column, which broke "€20.000" onto two lines and turned every card into
   a two-word-per-line ribbon. Two across at that width, four above it. */
@media only screen and (min-width: 768px) and (max-width: 989px) {
  #top .flex_column_table.ab-grid-4,
  #top .flex_column_table.ab-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Below the theme's own breakpoint the columns stack, same as every other
   row on the site. */
@media only screen and (max-width: 767px) {
  #top .flex_column_table.ab-grid-4,
  #top .flex_column_table.ab-grid-5 {
    display: block;
  }
  #top .flex_column_table.ab-grid-4 > .flex_column,
  #top .flex_column_table.ab-grid-5 > .flex_column {
    display: block;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2a-bis. The numbered band's columns are equal.

   Enfold writes each column's width into a per-element `av-<hash>` rule, and
   the step that used to be full width keeps a 100% rule under its own hash no
   matter what the class list says. Rather than reassign hashes in the build
   and hope, let table layout do it: `table-layout: fixed` distributes the row
   evenly and ignores the per-cell widths entirely. Cells came out 824 / 258 /
   258 before this.
   -------------------------------------------------------------------------- */

#top .kj-werkwijze-blokken .flex_column_table {
  table-layout: fixed;
  width: 100%;
}

/* `table-layout: fixed` takes its column widths from the first row's cells, so
   on its own it just made the 100% cell authoritative. The cells have to give
   up their own width before the row can share it out evenly. */
#top .kj-werkwijze-blokken .flex_column_table > .flex_column {
  width: auto;
  /* The theme gives every column but `.first` a 50px top margin, which in the
     original three-row layout was the gap between rows. In one row it made the
     third card sit ten pixels below its neighbours, which reads as a
     misalignment rather than as spacing. */
  margin-top: 0;
  vertical-align: top;
}

/* The badge hangs 70px above its card. In the source that overlapped the row
   above; here the first card sits directly under the section heading, so the
   heading needs room rather than the badge needing moving. */
#top .kj-werkwijze-blokken .flex_column_table {
  margin-top: 46px;
}

/* --------------------------------------------------------------------------
   2ay. Contact form.

   The form is the theme's own, so it needs almost no styling. Three things do
   need it: the honeypot has to be genuinely invisible without being
   `display: none` (some bots skip hidden fields, and a screen reader should
   not announce it either, which is what aria-hidden and tabindex handle), the
   status line needs to read as feedback, and the submit row needs air.
   -------------------------------------------------------------------------- */

#top .ab-contact-form .ab-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#top .ab-contact-form .ab-submit-row {
  margin-top: 18px;
}

/* Every call to action on the site is the orange button. The theme's bare
   `.button` is blue, which made the one button that actually submits something
   the odd one out. */
#top .ab-contact-form .ab-contact-submit {
  background-color: #f0a01e;
  border-color: #f0a01e;
  color: #fff;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 40px;
}

#top .ab-contact-form .ab-contact-submit:hover,
#top .ab-contact-form .ab-contact-submit:focus-visible {
  background-color: #d98d12;
  border-color: #d98d12;
  color: #fff;
}

#top .ab-contact-form .ab-contact-submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

#top .ab-contact-form .ab-form-status {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.5;
}

#top .ab-contact-form .ab-form-status.is-busy {
  background: rgba(17, 125, 191, 0.08);
  color: #12314a;
}

#top .ab-contact-form .ab-form-status.is-ok {
  background: rgba(46, 139, 87, 0.1);
  color: #1e5c3a;
}

#top .ab-contact-form .ab-form-status.is-error {
  background: rgba(240, 160, 30, 0.14);
  color: #7a4d00;
}

#top .ab-contact-form .ab-form-status a {
  color: inherit;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   2az. Checklist: a list shape that is not the card row and not the chevrons.

   The white card row and the blue chevron list were carrying almost every
   list on the site, and by the fourth page the reader stops seeing them. This
   is the third shape: two columns of ticked items in the brand orange, on a
   plain text section, so it adds no new section type to the template.
   -------------------------------------------------------------------------- */

#top .ab-checklist .avia_textblock ul {
  list-style: none;
  margin: 1.4em 0 0;
  padding: 0;
  columns: 2;
  column-gap: 44px;
}

#top .ab-checklist .avia_textblock ul li {
  position: relative;
  margin: 0 0 1.15em;
  padding: 0 0 0 34px;
  break-inside: avoid;
  list-style: none;
  background: none;
}

#top .ab-checklist .avia_textblock ul li::marker {
  content: none;
}

/* The tick is drawn rather than typed, so it does not depend on an icon font
   being present and it keeps its weight at any size. */
#top .ab-checklist .avia_textblock ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.42em;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid #f0a01e;
  border-bottom: 2.5px solid #f0a01e;
  transform: rotate(-45deg);
}

#top .ab-checklist .avia_textblock ul li strong {
  display: block;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-weight: 600;
}

@media only screen and (max-width: 767px) {
  #top .ab-checklist .avia_textblock ul {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   2ba. Case images are all the same shape.

   The four case photos come out of the old media library at 1030x686,
   495x400, 768x330 and 1030x750. Dropped in at their own ratios they gave
   every case block a different height, and a list whose rows are all
   different sizes reads as unfinished rather than as varied. One 3:2 crop for
   all of them, which is the standard editorial choice for a case list: the
   eye can compare entries when only the content changes.
   -------------------------------------------------------------------------- */

#top .ab-case .avia-image-container-inner,
#top .ab-case .avia_image {
  width: 100%;
}

#top .ab-case .avia_image,
#top .ab-case .avia-image-container img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* The lead paragraph above a card row, an icon list or the numbered band. It
   is body copy sitting inside a heading block, so it needs the body's own
   measure rather than the heading's. */
#top .ab-section-intro {
  max-width: 62ch;
  margin-top: 0.7em;
}

/* --------------------------------------------------------------------------
   2ay-bis. The blog archive.

   The posts come out of the capture with their own theme markup, so they need
   almost nothing. What they do need is a list to be found from, and a header
   that says what a reader is looking at and when it was written, because a
   2023 opinion read as if it were written today is misleading.
   -------------------------------------------------------------------------- */

#top .ab-post-list {
  list-style: none;
  margin: 1.6em 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}

#top .avia_textblock ul.ab-post-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
}

#top .avia_textblock ul.ab-post-list > li::before,
#top .avia_textblock ul.ab-post-list > li::marker {
  content: none;
  display: none;
}

#top .ab-post-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(11, 21, 32, 0.1);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#top .ab-post-card:hover,
#top .ab-post-card:focus-visible {
  border-color: #117dbf;
  box-shadow: 0 6px 20px rgba(11, 21, 32, 0.08);
}

#top .ab-post-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: #eef2f6;
}

#top .ab-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#top .ab-post-body {
  display: block;
}

#top .ab-post-date {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a9199;
  margin-bottom: 0.3em;
}

#top .ab-post-title {
  display: block;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: #0b1520;
  margin-bottom: 0.35em;
}

#top .ab-post-card:hover .ab-post-title {
  color: #117dbf;
}

#top .ab-post-excerpt {
  display: block;
  font-size: 16px;
  line-height: 1.6;
}

@media only screen and (max-width: 767px) {
  #top .ab-post-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #top .ab-post-thumb {
    aspect-ratio: 2 / 1;
  }
}

/* The post's own header: where you came from, when it was written, what it is
   called. The date is not decoration on an archive. */
#top .ab-post .ab-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
  align-items: baseline;
  font-size: 14px;
  margin-bottom: 0.6em;
}

#top .ab-post .ab-post-meta .ab-post-date {
  display: inline;
  margin: 0;
}

#top .ab-post .ab-post-hero {
  margin: 1.4em 0 0;
}

#top .ab-post .ab-post-hero img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* A note standing in for content the archive can no longer show. */
#top .ab-post-note {
  background: #f2f7fb;
  border-left: 3px solid #117dbf;
  border-radius: 0 6px 6px 0;
  padding: 0.7em 1em;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   2az-bis. The closing button clears the floating dock on a phone.

   The theme right-aligns the button in the call-to-action band, which is right
   on a desktop where it sits beside the copy. On a phone the band stacks and
   the button lands in the bottom right corner, which is exactly where the
   WhatsApp and call buttons are pinned, so the site's main call to action was
   sitting underneath two floating circles. Full width instead: it is the one
   thing on the page the reader is meant to press.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  /* The wrap is what carries the width, not the anchor: measured at 390px it
     came out 191px inside a 290px column, so widening only the button left it
     at 60% and still in the corner. */
  #top .kj-cta-block .avia-button-wrap {
    display: block;
    width: 100%;
    text-align: left;
  }
  #top .kj-cta-block .avia-button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   2ba-bis. A case opens and closes.

   Four full cases in a row is around 1,400 words the reader walks past before
   finding the one that resembles their own company. The summary stays, the
   rest folds into a <details>. Native disclosure rather than a script: it
   works with JavaScript off, the keyboard reaches it, and the text inside is
   still indexed.
   -------------------------------------------------------------------------- */

#top .ab-case-details {
  margin-top: 1.1em;
}

#top .ab-case-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #117dbf;
  padding: 4px 0;
}

#top .ab-case-details > summary::-webkit-details-marker {
  display: none;
}

/* The chevron is drawn, so it does not depend on the theme's icon font and it
   rotates to say which way the block is going. */
#top .ab-case-details > summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-top: -3px;
}

#top .ab-case-details[open] > summary::before {
  transform: rotate(45deg);
  margin-top: 2px;
}

#top .ab-case-details > summary:hover,
#top .ab-case-details > summary:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#top .ab-case-details .ab-case-body {
  padding-top: 0.4em;
}

/* --------------------------------------------------------------------------
   2ba-ter. The client quote under a case, quietly.

   The template has exactly one quote treatment and it is the loudest section
   on the site: a full-width Ambition Blue gradient band with the quote set at
   30px in white, justified. On the old site it appeared once per page and
   carried the whole page. On /cases/ it appears four times, between four case
   blocks, and the consultant's reading was that it takes over the page.

   So the section stays, its columns stay, and the paint comes off. What is
   left is what a quote actually needs: an indent, a rule down the side, and
   the client's own sentence at reading size. It is the smallest section on the
   page now, which is the right weight for a line somebody else wrote about us.

   The three per-element rules being overridden are the theme's own, keyed to
   the section's `av-<hash>` classes: 30px/#fff/justify on the quote, 18px at
   50% white on the company name, 18px/#fff on the attribution. Overriding by
   class rather than by editing the harvest keeps the section exactly as
   captured, so a re-harvest does not undo this.
   -------------------------------------------------------------------------- */

#top .ab-quote {
  background: none;
}

#top .ab-quote .content {
  padding-top: 6px;
  padding-bottom: 26px;
}

/* The middle column carries the rule, so the indent holds at every width. */
#top .ab-quote .av_three_fifth {
  border-left: 3px solid #117dbf;
  padding-left: 22px;
  margin-bottom: 0;
}

#top .ab-quote .av_textblock_section {
  margin: 0;
}

#top .ab-quote .avia_textblock {
  font-size: 16px;
  color: #0b1520;
  text-align: left;
}

/* The company name above the quote. Small, blue, out of the way. */
#top .ab-quote .av_textblock_section:first-child .avia_textblock {
  font-size: 13px;
  color: #117dbf;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#top .ab-quote .avia_textblock h2 {
  margin: 0.35em 0 0.5em;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #0b1520;
  text-align: left;
}

#top .ab-quote .avia_textblock h2 strong {
  font-weight: 500;
}

/* The attribution sits under the quote where a reader looks for it, not out
   at the right margin where the theme's read-more link used to be. */
#top .ab-quote .av_textblock_section:last-child .avia_textblock p {
  font-size: 15px;
  font-weight: 400;
  color: #8a9199;
  text-align: left !important;
}

#top .ab-quote .av_textblock_section:last-child .avia_textblock strong {
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  #top .ab-quote .avia_textblock h2 {
    font-size: 18px;
  }
  #top .ab-quote .av_three_fifth {
    padding-left: 16px;
  }
}

/* --------------------------------------------------------------------------
   2bb. The price row reads price-first.

   Each pricing card opens with the amount on its own line. Left as body copy
   it sat at 16px under the heading and lost to the description beside it; the
   reader is scanning for the number, so the number is the headline.
   -------------------------------------------------------------------------- */

#top .ab-prices .avia_textblock p:first-child strong {
  display: block;
  margin-bottom: 0.35em;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #117dbf;
  /* An amount never breaks inside itself. The site-wide `overflow-wrap` that
     keeps long Dutch compounds on the page does not know the difference
     between a compound and a number, and at the tablet width it split
     "€20.000" across two lines. */
  overflow-wrap: normal;
  word-break: normal;
}

#top .ab-prices .flex_column h3 {
  margin-bottom: 0.2em;
}

@media only screen and (max-width: 767px) {
  #top .ab-prices .avia_textblock p:first-child strong {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------------------
   2c. The chevron sits in the middle of its circle.

   The theme centres the icon with `text-align: center` and a `line-height`
   of double the circle's height, which leaves the result at the mercy of the
   glyph's own metrics: the chevron's ink sits left of centre inside its
   advance width, so the circle read as lopsided. Flex centring ignores the
   metrics and centres the box, and the optical nudge puts the ink where the
   eye expects it on a shape that points one way.
   -------------------------------------------------------------------------- */

#top .avia-icon-list .iconlist_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#top .avia-icon-list .iconlist_icon .av-icon-char {
  display: block;
  line-height: 1;
  transform: translateX(0.06em);
}

/* A linked list heading has to look clickable. The theme renders headings in
   body colour whether or not they wrap a link, so the whole service name was
   a link that nothing told the reader about. */
#top .avia-icon-list .iconlist_title a {
  color: inherit;
  text-decoration: none;
}

#top .avia-icon-list .iconlist_title a:hover,
#top .avia-icon-list .iconlist_title a:focus-visible {
  color: #117dbf;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Card rows sit level.

   Cards in a row are equal height already, but their copy started at
   different vertical positions when one title wrapped to two lines and its
   neighbours did not.
   -------------------------------------------------------------------------- */

#top .flex_column.av-equal-height-column .avia_textblock h3 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   4. Rhythm between a heading and the copy under it.

   The theme spaces headings for pages built in its own editor, where every
   block is its own element. Our copy arrives as one block per section, so
   the first heading sat too tight against the paragraph above it.
   -------------------------------------------------------------------------- */

#top .avia_textblock h2 {
  margin-bottom: 0.6em;
}

#top .avia_textblock h3 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

#top .avia_textblock h2 + p,
#top .avia_textblock h3 + p {
  margin-top: 0;
}

#top .avia_textblock blockquote {
  border-left: 4px solid #f5a21e;
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.4em;
  font-size: 19px;
  line-height: 1.6;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   5. The client logo wall.

   Logos arrive at wildly different aspect ratios and background colours.
   Boxing them to a common height and desaturating until hover keeps the row
   from reading as a ransom note.
   -------------------------------------------------------------------------- */

.ab-logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 44px;
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.ab-logo-wall li {
  flex: 0 0 auto;
}

/* The theme draws its own list marker with a pseudo-element on every `li`
   inside a text block, and it outranks the `list-style: none` above. So each
   logo shipped with a bullet in front of it. Match the theme's specificity and
   remove both the marker and the indent it sits in. */
#top .avia_textblock ul.ab-logo-wall {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

#top .avia_textblock ul.ab-logo-wall li {
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
}

#top .avia_textblock ul.ab-logo-wall li::before,
#top .avia_textblock ul.ab-logo-wall li::marker {
  content: none;
  display: none;
}

.ab-logo-wall img {
  /* Hoogte per vorm, gezet als klasse door tools/sections.mjs. Een vaste
     hoogte voor elke mark laat de vierkante logo's half zo groot lijken als de
     liggende: het oog leest oppervlak. Zie de toelichting bij clientLogos in
     tools/media.mjs. */
  height: 34px;
  width: auto;
  object-fit: contain;
  /* No greyscale here. It was the obvious choice and it made four of the ten
     marks disappear: several are light or low contrast to begin with, and
     desaturating plus fading them left an empty gap in the row. Better a row
     that is slightly uneven in colour than one that reads as broken. */
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.ab-logo-wall img.ab-logo-xwide {
  height: 30px;
}

.ab-logo-wall img.ab-logo-mid {
  height: 46px;
}

.ab-logo-wall img.ab-logo-square {
  height: 56px;
}

.ab-logo-wall img:hover {
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .ab-logo-wall {
    gap: 20px 28px;
  }
  .ab-logo-wall img {
    height: 24px;
  }
  .ab-logo-wall img.ab-logo-xwide {
    height: 21px;
  }
  .ab-logo-wall img.ab-logo-mid {
    height: 32px;
  }
  .ab-logo-wall img.ab-logo-square {
    height: 39px;
  }
}

/* --------------------------------------------------------------------------
   6. Floating call and WhatsApp button.

   The live site has a phone affordance on mobile (`kj-phone-number-mobile`)
   that the capture left empty, because it is filled in by the theme's own
   script against settings we do not have. This is the same idea rebuilt in
   the brand colours, on every viewport rather than mobile only.
   -------------------------------------------------------------------------- */

.ab-contact-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ab-contact-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(11, 21, 32, 0.28);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.ab-contact-dock a:hover {
  transform: translateY(-2px);
}

.ab-contact-dock .ab-dock-whatsapp {
  background: #25d366;
}

.ab-contact-dock .ab-dock-call {
  background: #117dbf;
}

.ab-contact-dock img {
  width: 26px;
  height: 26px;
}

.ab-contact-dock .ab-dock-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  .ab-contact-dock {
    right: 12px;
    bottom: 12px;
  }
  .ab-contact-dock a {
    width: 46px;
    height: 46px;
  }
}

/* While the cookie notice is up it covers the bottom of the viewport, and the
   dock sat behind it with only the top button visible. The notice measures
   itself and publishes its height, because a fixed offset was wrong on mobile
   where the text wraps to four lines. */
body.ab-cookie-open .ab-contact-dock {
  bottom: calc(var(--ab-cookie-h, 120px) + 18px);
}

/* --------------------------------------------------------------------------
   7. Cookie notice.

   Built here rather than harvested: on the live site the banner is rendered
   by a WordPress plugin over AJAX, so it is not in the static capture and
   there was nothing to reuse. Colours and type come from the brand guide.
   -------------------------------------------------------------------------- */

.ab-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #0b1520;
  color: #f2f5f8;
  padding: 20px 24px;
  box-shadow: 0 -4px 20px rgba(11, 21, 32, 0.3);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.ab-cookie[hidden] {
  display: none;
}

.ab-cookie-inner {
  max-width: 1130px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.ab-cookie p {
  margin: 0;
  flex: 1 1 340px;
  text-align: left;
}

.ab-cookie a {
  color: #7cc4ee;
}

.ab-cookie-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.ab-cookie button {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 11px 20px;
  cursor: pointer;
}

.ab-cookie .ab-cookie-accept {
  background: #f5a21e;
  color: #0b1520;
}

.ab-cookie .ab-cookie-decline {
  background: transparent;
  color: #f2f5f8;
  border-color: rgba(242, 245, 248, 0.45);
}

@media only screen and (max-width: 767px) {
  /* Measured at 454px tall on a 390px viewport with the first draft: more
     than half the screen, for a notice nobody came for. Tighter type, tighter
     padding and the two buttons side by side bring it back to a strip. */
  .ab-cookie {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .ab-cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* `flex: 1 1 340px` is right in the row layout and wrong here: in a column
     the same rule makes the paragraph grow vertically, which left 250px of
     empty navy between the text and the buttons. */
  .ab-cookie p {
    flex: 0 0 auto;
  }
  .ab-cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ab-cookie button {
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
   Afsluitende blauwe balk: knop naast de tekst in plaats van eronder.

   De gevangen sectie zet de tekstblok en de knopwrap onder elkaar in een
   av_one_full-kolom, met de knop rechts uitgelijnd. Bij een kop van een regel
   en een body van twee regels hangt die knop daardoor los rechtsboven, wat de
   consultant op 04-08-2026 aanwees als "niet goed uitgelijnd".

   Geen nieuw ontwerp: dezelfde twee elementen, dezelfde kleuren, alleen op een
   rij gezet en verticaal gecentreerd. Onder 767px weer onder elkaar, want naast
   elkaar wordt de knop daar te smal.
--------------------------------------------------------------------------- */
#top .kj-cta-block {
  display: flex;
  align-items: center;
  gap: 2.5em;
  flex-wrap: wrap;
}
#top .kj-cta-block > .av_textblock_section {
  flex: 1 1 30em;
  min-width: 0;
}
#top .kj-cta-block > .avia-button-wrap {
  flex: 0 0 auto;
  margin: 0;
}
#top .kj-cta-block > .avia-button-wrap .avia-button {
  margin: 0;
}
@media only screen and (max-width: 767px) {
  #top .kj-cta-block {
    display: block;
  }
  #top .kj-cta-block > .avia-button-wrap {
    margin-top: 1.5em;
  }
}

/* ---------------------------------------------------------------------------
   Vierde stap in de genummerde band: eigen kleur.

   Het gevangen sjabloon heeft drie kolomkleuren (#f5a21e, #6dc3d4, #117dbf),
   elk met een badge waarin die kleur is ingebakken. Een vierde stap kloont een
   kolom en kreeg daarmee een kleur die al in de rij stond. Deze regel geeft die
   kolom Midnight Navy uit het merkpalet; numberedSteps() zet er de bijpassende
   badge bij. De `av-<hash>` van de gekloonde kolom zet zijn eigen achtergrond,
   vandaar de hogere specificiteit.
--------------------------------------------------------------------------- */
#top .flex_column.kj-text-werkwijze.ab-step-extra,
#top .ab-step-extra.flex_column {
  background-color: #0b1520;
}

/* ---------------------------------------------------------------------------
   Hero zonder beeld, over de volle breedte.

   Het gevangen sjabloon zet de titel links in een `av_one_half` en de foto
   rechts. De foto is eruit (consultantbesluit 26-08-2026: op elke pagina een
   plaat naast de titel maakte de site druk in plaats van geillustreerd), maar
   grid.css pint die kolom op 47%, dus de kop zou in de linkerhelft blijven
   staan met een lege rechterhelft. Deze regel zet de kolom terug op volle
   breedte en houdt de regellengte leesbaar.

   De harvest zelf blijft ongemoeid, per how-we-work-marketing S11.0: de
   afwijking staat hier, in een eigen `ab-`-klasse, en is in een keer terug te
   draaien.
--------------------------------------------------------------------------- */
#top .ab-hero .flex_column_table {
  display: block;
}
#top .ab-hero .flex_column_table_cell {
  display: block;
}
#top div .ab-hero .flex_column.av_one_half {
  width: 100%;
  max-width: 900px;
  margin-left: 0;
}