/**
 * Teeco site theme: tokens, typography, layout surfaces, header.
 * Colour accents are in assets/color/theme-teeco.css.
 */

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-body);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
}

/* CMS controls capitalization — disable ThemeForest text-transform on copy */
.teeco-site-shell h1,
.teeco-site-shell h2,
.teeco-site-shell h3,
.teeco-site-shell h4,
.teeco-site-shell h5,
.teeco-site-shell h6,
.teeco-site-shell .sub_title,
.teeco-site-shell .page-title h1,
.teeco-site-shell .heading_s1 :is(h1, h2, h3, h4, h5, h6),
.teeco-site-shell .heading_s2 :is(h1, h2, h3, h4, h5, h6),
.teeco-site-shell .heading_s3 :is(h1, h2, h3, h4, h5, h6),
.teeco-site-shell .banner_content :is(h1, h2),
.teeco-site-shell .icon_box_content :is(h1, h2, h3, h4, h5, h6),
.teeco-site-shell .team_title :is(h5, h6, a),
.teeco-site-shell .portfolio_content :is(h5, h6),
.teeco-site-shell .portfolio_info_box :is(li, strong, b),
.teeco-site-shell .portfolio_filter a,
.teeco-site-shell .accordion .card-header :is(a, button, h5),
.teeco-site-shell .navbar-nav .nav-link,
.teeco-site-shell .btn,
.teeco-site-shell .btn-default,
.teeco-site-shell .client_info h6,
.teeco-site-shell .teeco-footer-minimal__email a,
.teeco-site-shell .teeco-footer-minimal__tax,
.teeco-site-shell .copyright {
  text-transform: none !important;
}

p,
.lead {
  color: var(--color-body);
}

.sub_title {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-accent) !important;
}

/* Remove ThemeForest diagonal section dividers */
.angle_top,
.angle_bottom {
  display: none !important;
}

.gray_bg {
  background-color: var(--color-bg) !important;
}

.light_gray_bg {
  background-color: var(--color-accent-tint) !important;
}

/* Default: no accent wash on legacy gradient class */
.bg_gd_stripe {
  background: var(--color-bg) !important;
  filter: none;
}

.banner_section.bg_gd_stripe {
  background: var(--color-bg) !important;
}

.banner_section.bg_gd_stripe .banner_content.text_white h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading) !important;
}

.banner_section.bg_gd_stripe .banner_content.text_white p {
  font-family: var(--font-body);
  color: var(--color-body) !important;
}

.banner_section.bg_gd_stripe .banner_content.text_white .btn-default,
.banner_section.bg_gd_stripe .banner_content.text_white .btn-default:hover {
  color: #ffffff !important;
}

.teeco-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* 404 — full-height layout (shell wraps header/main/footer; scripts stay outside) */
html.teeco-html-error {
  min-height: 100vh;
  min-height: 100dvh;
  /* Fallback hex: legacy style.css sets body background #fff */
  background-color: #f8f8fa;
}

body.teeco-page-error {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #f8f8fa !important;
}

body.teeco-page-error .teeco-site-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

body.teeco-page-error .teeco-site-shell > main {
  background-color: #f8f8fa;
}

body.teeco-page-error .teeco-site-header.fixed-top {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  flex-shrink: 0;
}

body.teeco-page-error .teeco-site-shell > main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body.teeco-page-error .teeco-site-shell > .teeco-footer {
  flex-shrink: 0;
}

body.teeco-page-error .teeco-site-header {
  background-color: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

body.teeco-page-error .teeco-site-header .logo_light,
body.teeco-page-error .teeco-site-header .logo_default {
  display: none !important;
}

body.teeco-page-error .teeco-site-header .logo_dark {
  display: inline-block !important;
}

.teeco-error-page {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  padding: 4rem 0 5rem;
  display: flex;
  align-items: center;
}

.teeco-error-page > .container {
  width: 100%;
}

.teeco-error-page__svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.teeco-error-page__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

.teeco-error-page__text {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 28rem;
}

.teeco-error-page__copy.text-lg-left .teeco-error-page__text {
  margin-left: 0;
  margin-right: auto;
}

.teeco-error-page__copy.text-center .teeco-error-page__text {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .teeco-error-page__copy .btn {
    margin-top: 0.25rem;
  }
}

/* Inner page hero (heroSmall) */
/* The theme's own fixed-header offset, `.header_wrap.fixed-top + .breadcrumb_section`
   in style.css/responsive.css, never matches here: it needs the hero to be an
   immediate sibling of the header, but base.twig wraps page content in <main>, so
   the hero is a sibling of <main>, not of the header. Without that offset firing,
   the hero fell back to the theme's bare `section { padding: 100px 0 }` default
   (30px on mobile), which happened to clear the 71px desktop header (29px to
   spare) but not the 61px mobile header (a 31px overlap: the title sat under the
   logo). Set explicitly here instead of depending on that sibling relationship. */
.teeco-hero-small {
  background-color: var(--color-bg) !important;
  padding-top: 90px;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 992px) {
  .teeco-hero-small {
    padding-top: 100px;
  }
}

.teeco-hero-small .page-title h1 {
  font-family: var(--font-page-title);
  font-weight: 700;
  color: var(--color-heading);
}

.teeco-hero-small__subtext {
  max-width: 42rem;
  margin: 0.75rem 0 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body);
}

/* Project info block */
.teeco-project-info .row > [class*='col-']:first-child {
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  .teeco-project-info .row > [class*='col-']:first-child {
    margin-bottom: 0;
  }
}

.teeco-project-info__summary p:last-child {
  margin-bottom: 0;
}

.teeco-project-info__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.teeco-project-info__link:hover,
.teeco-project-info__link:focus {
  color: var(--color-accent, #fff);
}

@media (min-width: 992px) {
  .teeco-project-info--many-facts .teeco-project-info__facts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 1.25rem;
    width: 100%;
  }

  .teeco-project-info--many-facts .teeco-project-info__facts-list > li {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* Accordion block */
.teeco-accordion__list {
  margin-top: 1.5rem;
}

.teeco-accordion__trigger {
  display: block;
  width: 100%;
  padding: 15px 25px 15px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.teeco-accordion__trigger::after {
  content: "\f126";
  font-family: "Ionicons";
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  right: 0;
  top: 15px;
}

.teeco-accordion__trigger.collapsed::after {
  content: "\f123";
}

.teeco-accordion__trigger:focus {
  outline: 2px solid var(--color-accent, #0e7a5f);
  outline-offset: 2px;
}

.teeco-accordion__answer p:last-child {
  margin-bottom: 0;
}

/* Text columns */
.teeco-text-columns__col {
  margin-bottom: 2rem;
}

.teeco-text-columns__col:last-child,
.teeco-text-columns__col:nth-last-child(2):nth-child(odd) {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .teeco-text-columns__col:last-child {
    margin-bottom: 0;
  }
}

.teeco-text-columns__title {
  font-family: var(--font-page-title);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.teeco-text-columns__body {
  color: var(--color-body);
  line-height: 1.7;
}

/* Stats */
.teeco-section-stats .heading_s3 h2 {
  color: var(--color-heading);
}

.teeco-section-stats .box_counter i {
  color: var(--color-accent) !important;
}

.teeco-section-stats .counter_text,
.teeco-section-stats .counter_text .counter,
.teeco-section-stats .box_counter h3 {
  color: var(--color-heading) !important;
}

.teeco-section-stats .box_counter p {
  color: var(--color-body) !important;
}

.teeco-section-stats .counter_style1 .counter_text::before {
  background-color: var(--color-border) !important;
}

/* CTA — light band, accent on button only */
.teeco-section-cta .heading_s3 h2 {
  color: var(--color-heading);
}

.teeco-section-cta p {
  color: var(--color-body);
}

/* Testimonials — light band, high-contrast cards */
.teeco-section-testimonials .heading_s3 h2 {
  color: var(--color-heading);
}

.teeco-section-testimonials .testimonial_style3 .testimonial_box {
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
}

.teeco-section-testimonials .testimonial_style3 .testi_meta p {
  color: var(--color-heading);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 500;
}

.teeco-section-testimonials .testimonial_style3 .client_info h6 {
  color: var(--color-heading);
  font-weight: 700;
}

.teeco-section-testimonials .testimonial_style3 .client_info span {
  color: var(--color-body);
}

/* Quote mark — accent, visible on white */
.teeco-section-testimonials .quote img {
  height: 28px;
  width: auto;
  opacity: 0.35;
  filter: brightness(0) saturate(100%) invert(32%) sepia(89%) saturate(2476%)
    hue-rotate(229deg) brightness(97%) contrast(93%);
}

/* Carousel: no faded side slides */
.teeco-section-testimonials .testimonial_slider[data-center="true"] .owl-item {
  opacity: 1;
}

/* Active slide: accent border, not inverted colors */
.teeco-section-testimonials .testimonial_slider[data-center="true"] .owl-item.center .testimonial_box,
.teeco-section-testimonials
  .testimonial_slider[data-center="true"].testimonial_style3
  .owl-item.center
  .testimonial_box {
  background-color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(75, 63, 238, 0.14);
  color: var(--color-heading);
}

.teeco-section-testimonials .testimonial_slider[data-center="true"] .owl-item.center .testimonial_box::before {
  content: none;
  display: none;
}

.teeco-section-testimonials .testimonial_slider[data-center="true"] .owl-item.center .testimonial_box * {
  color: inherit;
}

.teeco-section-testimonials .testimonial_slider[data-center="true"] .owl-item.center .testi_meta p {
  color: var(--color-heading);
}

.teeco-section-testimonials .testimonial_slider[data-center="true"] .owl-item.center .client_info span {
  color: var(--color-body);
}

.teeco-section-testimonials .owl-theme .owl-dots .owl-dot span {
  background-color: var(--color-border);
}

.teeco-section-testimonials .owl-theme .owl-dots .owl-dot.active span,
.teeco-section-testimonials .owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--color-accent);
}

/* Partners / brands — static grid (few logos) */
.teeco-brands-static .teeco-brands-grid__item img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

/* Testimonials — static row (few quotes) */
.teeco-testimonials-static .teeco-testimonials-grid__item .testimonial_box {
  height: 100%;
}

/* Footer — dark navy, not accent */
.teeco-footer {
  background-color: var(--color-heading) !important;
  filter: none;
}

.teeco-footer-minimal {
  padding: 2.5rem 0 2rem;
}

.teeco-footer-minimal__main {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.teeco-footer-minimal__meta {
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.teeco-footer-minimal__email a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.teeco-footer-minimal__email a:hover {
  color: var(--color-accent);
}

.teeco-footer-minimal__tax {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
  margin-top: 0.35rem !important;
}

.teeco-footer-minimal__bottom {
  padding-top: 1.25rem;
}

.teeco-footer-minimal .copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

.teeco-footer-minimal .footer_social li a {
  color: rgba(255, 255, 255, 0.75);
}

.teeco-footer-minimal .footer_social li a:hover {
  color: #ffffff;
}

.icon_box_style_13 {
  border: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.icon_box_style_13 .box_icon i {
  color: var(--color-accent) !important;
}

.icon_box_style_13:hover {
  background-color: var(--color-accent-tint);
  border-color: var(--color-border);
  box-shadow: none;
}

.icon_box_style_13 .icon_box_content h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
}

.btn-default {
  font-family: var(--font-body);
  font-weight: 500;
}

/* Header logos */
.teeco-site-header .logo_light,
.teeco-site-header .logo_default {
  display: none !important;
}

.teeco-site-header .logo_dark {
  display: block !important;
}

.teeco-site-header.nav-fixed .logo_light,
.teeco-site-header.nav-fixed .logo_default {
  display: none !important;
}

.teeco-site-header.nav-fixed .logo_dark {
  display: block !important;
}

.teeco-site-header .navbar-brand {
  padding: 12px 0;
}

.teeco-site-header .navbar-brand img {
  display: block;
  width: auto;
  max-width: 120px;
  height: 36px;
  max-height: 36px;
  object-fit: contain;
  object-position: left center;
}

.footer_logo img {
  display: block;
  width: auto;
  max-width: 128px;
  height: 40px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
}

@media only screen and (max-width: 991px) {
  .teeco-site-header .navbar-brand img {
    max-width: 100px;
    height: 30px;
    max-height: 30px;
  }

  .teeco-site-header .navbar-brand {
    padding: 10px 0;
  }

  .footer_logo img {
    max-width: 112px;
    height: 34px;
    max-height: 34px;
  }
}

.teeco-site-header {
  font-family: var(--font-body);
}

.teeco-site-header .navbar-nav a,
.teeco-site-header .navbar-toggler {
  color: var(--color-body) !important;
  font-weight: 500;
}

.teeco-site-header .navbar-nav .nav-link.active,
.teeco-site-header .navbar-nav > li:hover > a,
.teeco-site-header.hover_menu_style2 .navbar-expand-lg .navbar-nav.attr-nav li a.active,
.teeco-site-header.hover_menu_style2 .navbar-expand-lg .navbar-nav.attr-nav > li:hover > a {
  color: var(--color-accent) !important;
}

.teeco-site-header.hover_menu_style2 .navbar-expand-lg .navbar-nav > li > .nav-link::before {
  background-color: var(--color-accent) !important;
}

.teeco-site-header.header_wrap.nav-fixed:not([class*="bg_"]):not([class*="bg-"]) {
  background-color: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

.teeco-site-header.nav-fixed .navbar-nav a,
.teeco-site-header.nav-fixed .navbar-toggler {
  color: var(--color-body) !important;
}

.teeco-site-header.nav-fixed .navbar-nav .nav-link.active,
.teeco-site-header.nav-fixed .navbar-nav > li:hover > a {
  color: var(--color-accent) !important;
}


/* ---------------------------------------------------------------------------
   Process stepper (textColumns block with layoutVariant "steps")

   Three across, so six steps read as two rows of three rather than one tall
   column. A connector runs behind the number badges within each row, which is
   what makes it scan as a sequence instead of a bulleted list.

   "Jouw tijd" is split out of the body in the template and styled as a caption,
   because as a second paragraph it opened a blank line in every step and made
   the whole block read as prose.
--------------------------------------------------------------------------- */
.teeco-steps {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.teeco-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

/* Let the text block stretch so the "Jouw tijd" caption sits on a common
   baseline across a row, instead of floating wherever the description ends. */
.teeco-steps__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.teeco-steps__meta {
  margin-top: auto;
  padding-top: 4px;
}

/* Connector between badges. Hidden on the last item of each row so the line
   never runs off the edge of the grid. */
.teeco-steps__item::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 68px;
  right: -32px;
  height: 2px;
  background: var(--color-accent-tint, #EEECFD);
}

.teeco-steps__item:nth-child(3n)::after,
.teeco-steps__item:last-child::after {
  display: none;
}

.teeco-steps__marker {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent, #4B3FEE);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--color-bg, #F8F8FA);
}

.teeco-steps__title {
  font-size: 21px;
  line-height: 1.25;
  margin: 0;
  color: var(--color-heading, #1A1A2E);
}

.teeco-steps__body {
  margin: 0;
  color: var(--color-body, #44445A);
}

.teeco-steps__meta {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--color-accent, #4B3FEE);
}

.teeco-steps__note {
  background: var(--color-accent-tint, #EEECFD);
  border-radius: 10px;
  padding: 28px 32px;
}

.teeco-steps__note-title {
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--color-heading, #1A1A2E);
}

.teeco-steps__note-body {
  color: var(--color-body, #44445A);
}

@media (max-width: 991.98px) {
  .teeco-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 28px;
  }
  .teeco-steps__item:nth-child(3n)::after {
    display: block;
  }
  .teeco-steps__item:nth-child(2n)::after,
  .teeco-steps__item:last-child::after {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .teeco-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  /* One column: a horizontal connector makes no sense, so drop it entirely. */
  .teeco-steps__item::after {
    display: none !important;
  }
  .teeco-steps__marker {
    width: 46px;
    height: 46px;
    font-size: 19px;
  }
  .teeco-steps__note {
    padding: 22px 20px;
  }
}

/* ---------------------------------------------------------------------------
   Text column links (situations at the top of /diensten link to the matching
   service further down the same page).
--------------------------------------------------------------------------- */
.teeco-text-columns__col {
  /* Anchor targets must clear the fixed header, otherwise a jump lands with the
     heading hidden underneath it. */
  scroll-margin-top: 110px;
}

.teeco-text-columns[id] {
  /* Section-level anchor (e.g. the contact FAQ deep-linking to "Wat het kost"),
     same reason as the row-level rule above. */
  scroll-margin-top: 110px;
}

.teeco-text-columns__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 500;
  color: var(--color-accent, #4B3FEE);
  text-decoration: none;
}

.teeco-text-columns__link:hover,
.teeco-text-columns__link:focus {
  color: var(--color-accent, #4B3FEE);
  text-decoration: underline;
}

.teeco-text-columns__arrow {
  transition: transform .18s ease;
}

.teeco-text-columns__link:hover .teeco-text-columns__arrow {
  transform: translateX(3px);
}

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

/* ---------------------------------------------------------------------------
   Service detail icons and linked service cards
--------------------------------------------------------------------------- */
.teeco-text-columns__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--color-accent-tint, #EEECFD);
  color: var(--color-accent, #4B3FEE);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.teeco-text-columns__icon i {
  font-size: 24px;
  line-height: 1;
}

.teeco-service-card-link,
.teeco-service-card-link:hover,
.teeco-service-card-link:focus {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.teeco-service-card--linked {
  transition: transform .18s ease, box-shadow .18s ease;
}

.teeco-service-card-link:hover .teeco-service-card--linked {
  transform: translateY(-3px);
}

.teeco-service-card-link:focus-visible .teeco-service-card--linked {
  outline: 2px solid var(--color-accent, #4B3FEE);
  outline-offset: 4px;
  border-radius: 8px;
}

.teeco-service-card__more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 500;
  color: var(--color-accent, #4B3FEE);
}

@media (prefers-reduced-motion: reduce) {
  .teeco-service-card--linked { transition: none; }
  .teeco-service-card-link:hover .teeco-service-card--linked { transform: none; }
}

/* Service explainers as equal-height cards (textColumns with layoutVariant
   "anchors"). Without this the columns end ragged, because one service runs to
   twice the length of another. */
/* Cards size to their own content rather than stretching to the tallest in the
   row. Forcing equal heights left a ~250px hole in the short card whenever it sat
   beside SEO, which runs to roughly twice the length. Uneven bottom edges read
   better than a hole. */
.teeco-text-columns--cards > .teeco-text-columns__col {
  display: flex;
  align-self: flex-start;
  margin-bottom: 24px;
}

.teeco-text-columns--cards > .teeco-text-columns__col > .teeco-text-columns__card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E4E4EC);
  border-radius: 12px;
  padding: 28px 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.teeco-text-columns--cards .teeco-text-columns__body {
  flex: 1;
}

@media (max-width: 575.98px) {
  .teeco-text-columns--cards > .teeco-text-columns__col > .teeco-text-columns__card {
    padding: 22px 20px;
  }
}

/* Equal-height service cards, so the "Meer weten" link sits on a common baseline
   instead of wherever each summary happens to end. */
.teeco-service-card-link .icon_box_style_13,
.teeco-service-card--linked {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.teeco-service-card--linked .icon_box_content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.teeco-service-card--linked .teeco-service-card__more {
  margin-top: auto;
  padding-top: 12px;
}

/* ---------------------------------------------------------------------------
   FAQ accordion

   The accordion used to sit in a narrow centred column, which made it the only
   section on the page not matching the container width. It now spans the full
   width like everything else, and the answer text is capped at a readable
   measure instead, which is what the narrow column was really achieving.
--------------------------------------------------------------------------- */
/* No rules between rows: they cluttered the section. Structure comes from spacing
   and the weight of the question itself. */
.teeco-accordion__list .teeco-accordion__item {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 6px;
}

.teeco-accordion__list .teeco-accordion__item:last-child {
  margin-bottom: 0;
}

.teeco-accordion__list .teeco-accordion__item .card-header {
  background: transparent;
  border: 0;
  padding: 6px 0;
}

.teeco-accordion__list .teeco-accordion__item .card-body {
  padding: 2px 0 18px;
}

/* Cap the answer, not the container: roughly 75 characters, the same measure
   the old narrow column produced. */
.teeco-accordion__item .card-body > * {
  max-width: 68ch;
}

@media (max-width: 767.98px) {
  .teeco-accordion__item {
    border-radius: 10px;
  }
}

/* Trim the gap between a service card's summary and its "Meer weten" link.
   The paragraph's own bottom margin was stacking on top of the alignment
   spacing, which pushed the link about 46px clear of the text. */
.teeco-service-card--linked .icon_box_content p {
  margin-bottom: 0;
}

.teeco-service-card--linked .teeco-service-card__more {
  padding-top: 6px;
}

/* ---------------------------------------------------------------------------
   Price cards (textColumns with layoutVariant "pricing")

   The price used to be body text under a bold label, so the one number a
   visitor came for was the least prominent thing in the section. The hierarchy
   is inverted here: quiet label, loud price, quiet caveat.
--------------------------------------------------------------------------- */
.teeco-price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E4E4EC);
  border-radius: 12px;
  padding: 26px 28px;
  height: 100%;
}

.teeco-price__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted, #71718C);
  margin: 0;
}

.teeco-price__amount {
  font-family: "DM Sans", sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-heading, #1A1A2E);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.teeco-price__amount .teeco-price__from {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-muted, #71718C);
  letter-spacing: 0;
  margin-right: 6px;
}

.teeco-price__note {
  font-size: 15px;
  color: var(--color-body, #44445A);
  margin: 0;
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 575.98px) {
  .teeco-price { padding: 22px 20px; }
  .teeco-price__amount { font-size: 29px; }
}

.teeco-price__amount .teeco-price__unit {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-muted, #71718C);
  letter-spacing: 0;
  margin-left: 2px;
}

/* ---------------------------------------------------------------------------
   Long-form prose (legal pages built from the information block)
--------------------------------------------------------------------------- */
.teeco-prose h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: 40px 0 12px;
  color: var(--color-heading, #1A1A2E);
}

.teeco-prose h2:first-child {
  margin-top: 0;
}

.teeco-prose h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 26px 0 8px;
  color: var(--color-heading, #1A1A2E);
}

.teeco-prose p,
.teeco-prose li {
  color: var(--color-body, #44445A);
}

.teeco-prose p {
  margin-bottom: 14px;
}

.teeco-prose ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.teeco-prose li {
  margin-bottom: 7px;
}

.teeco-prose a {
  color: var(--color-accent, #4B3FEE);
}

.teeco-prose__updated {
  font-size: 14.5px;
  color: var(--color-muted, #71718C);
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #E4E4EC);
}

/* Legal links in the footer */
.teeco-footer-legal {
  margin: 0 0 10px;
  font-size: 14.5px;
}

.teeco-footer-legal a {
  color: inherit;
  opacity: .75;
}

.teeco-footer-legal a:hover,
.teeco-footer-legal a:focus {
  opacity: 1;
  color: inherit;
  text-decoration: underline;
}

.teeco-footer-legal span {
  margin: 0 10px;
  opacity: .4;
}

/* ---------------------------------------------------------------------------
   Service explainer cards

   The body used to render as one run of <br> tags: lead, bullets and price all
   the same size, weight and colour, with the bullets being literal "·"
   characters rather than a list. This gives each part its own role.
--------------------------------------------------------------------------- */
.teeco-text-columns__lead {
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-heading, #1A1A2E);
  margin: 0 0 16px;
}

.teeco-text-columns__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.teeco-text-columns__list li {
  position: relative;
  padding-left: 26px;
  color: var(--color-body, #44445A);
  font-size: 16px;
  line-height: 1.45;
}

/* A check reads as "included", which is what these lists are. */
.teeco-text-columns__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--color-accent, #4B3FEE);
  border-bottom: 2px solid var(--color-accent, #4B3FEE);
  transform: rotate(-45deg);
}

.teeco-text-columns__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-muted, #71718C);
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 2px solid var(--color-border, #E4E4EC);
}

/* Price closes the card, directly after the content. */
.teeco-text-columns__price {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #E4E4EC);
  font-weight: 500;
  color: var(--color-heading, #1A1A2E);
}

/* The per-card CTA that follows the price, closing the funnel from "here's
   what it costs" straight to the contact form. Own width (not stretched to
   the card), so it reads as an action rather than another content row. */
.teeco-text-columns__cta {
  align-self: flex-start;
  margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   Contact form: services checklist

   Native checkboxes, visually hidden, with a custom box drawn next to them.
   Same checkmark technique as the service explainer bullets above
   (.teeco-text-columns__list li::before): two rotated borders, not an icon
   font, so it stays crisp at any size and needs no extra asset.
--------------------------------------------------------------------------- */
.teeco-services-check__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading, #1A1A2E);
  margin-bottom: 12px;
}

.teeco-services-check__optional {
  font-weight: 400;
  color: var(--color-muted, #71718C);
}

.teeco-services-check__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-bottom: 4px;
}

.teeco-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.teeco-check__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.teeco-check__box {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border, #E4E4EC);
  border-radius: 5px;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}

.teeco-check__box::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity .1s ease;
}

.teeco-check__input:checked + .teeco-check__box {
  background: var(--color-accent, #4B3FEE);
  border-color: var(--color-accent, #4B3FEE);
}

.teeco-check__input:checked + .teeco-check__box::before {
  opacity: 1;
}

.teeco-check__input:focus-visible + .teeco-check__box {
  outline: 2px solid var(--color-accent, #4B3FEE);
  outline-offset: 2px;
}

.teeco-check__text {
  font-size: 15px;
  color: var(--color-body, #44445A);
}

/* ---------------------------------------------------------------------------
   Scroll-reveal animations (animate.css + waypoints, wired in scripts.js
   "13. ANIMATION JS"). Three overrides on top of the vendor defaults:

   1. Faster and less staggered. animate.css's own default is a 1s duration
      with delays up to 1s stacked on top, which reads as sluggish on a site
      whose own copy calls itself "direct". Site-wide, not just here, so it
      also covers .fadeIn/.fadeInLeft/.fadeInRight, not only fadeInUp.
   2. prefers-reduced-motion. Was not handled at all outside one hand-built
      hover effect (.teeco-service-card-link, above). scripts.js sets
      opacity:0 as an inline style on every ".animation" element before its
      waypoint fires, so the override needs !important on opacity to win
      over that inline style, and needs to target ".animation" (the
      not-yet-revealed state) as well as ".animated" (mid- or
      post-reveal), or a reduced-motion visitor would still hit the
      pre-reveal blank state.
   3. The pre-reveal stutter (Tristan, 2026-09-08): ".animation" carried NO
      CSS anywhere in the theme, only an inline opacity:0 that scripts.js
      applies once jQuery/waypoints (loaded at the very end of <body>) have
      run. Confirmed with a deliberately throttled script load: at +543ms,
      well before that JS runs, the hero and every other ".animation"
      element are already fully visible in their FINAL position. The moment
      the script finally does run, it snaps them to the animation's start
      state and replays it, which reads as the whole page stuttering. Fixed
      by hiding ".animation" from first paint via CSS instead of waiting for
      JS, so there is nothing left to snap away from. The no-JS/no-JS-yet
      visibility guarantee checked in the previous animations pass (crawlers
      and GEO answer engines that do not execute JS must still see full
      content) is preserved separately via a <noscript> override in
      base.twig, not by leaving this opacity unset.
--------------------------------------------------------------------------- */
.animation {
  opacity: 0;
}

.animated {
  animation-duration: .55s;
  -webkit-animation-duration: .55s;
}

@media (prefers-reduced-motion: reduce) {
  .animation,
  .animated {
    opacity: 1 !important;
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;
  }
}



/* Gallery hover: replace the theme's heavy overlay with a contrast-safe icon button.
   The vendor default (.gallary_hover_box, style.css) washes the whole photo in
   rgba(0,0,0,0.80) and, for gallery_hover_style2 specifically (what gallery.twig
   uses), also blurs and scales the image 1.3x underneath it. Removed the wash and
   the blur; kept a subtle zoom. The icon sits in its own solid circle instead of
   floating over the darkened photo, so it stays legible regardless of how light or
   dark the photo underneath is, without needing the overlay to do that work. */
.gallery_hover_style2 .gallary_hover_box {
  background: transparent;
}

.gallery_hover_style2 .gallary_hover_box i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.125rem;
  box-shadow: 0 0.5rem 1.25rem rgba(var(--color-primary-rgb), 0.35);
  transform: scale(0.85);
  transition: transform 0.3s ease;
}

.gallery_hover_style2 .image_gallery_item:hover .gallary_hover_box i {
  transform: scale(1);
}

.gallery_hover_style2 .image_gallery_item:hover .gallery_img img {
  transform: scale(1.06);
  filter: none;
}