@charset "UTF-8";
/* CSS Document */

/* ========================================
   HILVA VARIABLES
======================================== */

@font-face {
    font-family: 'Enkel';
    src: url('../fonts/Enkel-Regular.woff2') format('woff2'),
         url('../fonts/Enkel-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Enkel';
    src: url('../fonts/Enkel-Medium.woff2') format('woff2'),
         url('../fonts/Enkel-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Enkel';
    src: url('../fonts/Enkel-Bold.woff2') format('woff2'),
         url('../fonts/Enkel-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
	
:root {
  /* Font family declarations */
  --tp-ff-body: 'Enkel', sans-serif;
  --tp-ff-heading: 'Enkel', sans-serif;
  --tp-ff-p: 'Enkel', sans-serif;
  --tp-ff-teko: 'Enkel', sans-serif;
  --tp-ff-funnel: 'Enkel', sans-serif;
  --tp-ff-sora: 'Enkel', sans-serif;
  --tp-ff-dm: 'Enkel', sans-serif;
  --tp-ff-inter: 'Enkel', sans-serif;
  --tp-ff-poppins: 'Enkel', sans-serif;
  --tp-ff-playfair: 'Enkel', serif;
  --tp-ff-jakarta: 'Enkel', sans-serif;
  --tp-ff-familjen: 'Familjen Grotesk', sans-serif;
  --tp-ff-morganite-bold: 'Morganite-Bold', sans-serif;
  --tp-ff-morganite-semibold: 'Morganite-SemiBold', sans-serif;
  --tp-ff-clash-light: 'Enkel', serif;
  --tp-ff-clash-regular: 'Enkel', serif;
  --tp-ff-clash-medium: 'Enkel', serif;
  --tp-ff-clash-semibold: 'Enkel', serif;
  --tp-ff-clash-bold: 'Enkel', serif;
  --tp-ff-phudu: 'Phudu', serif;
  --tp-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tp-common-white: #fffef5;
  --tp-common-white-2: #fffef5;
  --tp-common-black: #2e2d2c;
  --tp-common-black-1: #2e2d2c;
  --tp-common-black-2: #2e2d2c;
  --tp-common-black-3: #2e2d2c;
  --tp-common-black-4: #2e2d2c;
  --tp-common-black-5: #2e2d2c;
  --tp-common-black-6: #2e2d2c;
  --tp-common-black-7: #2e2d2c;
  --tp-common-yellow: #fff265;
  --tp-common-yellow-2: #fff265;
  --tp-common-green: #fff265;
  --tp-common-green-2: #fff265;
  --tp-common-green-3: #fff265;
  --tp-common-blue: #fff265;
  --tp-common-blue-2: #fff265;
  --tp-common-nights: #fff265;
  --tp-common-meteor: #fff265;
  --tp-common-angry: #fff265;
  --tp-common-sugar : #fff265;
  --tp-common-cream : #fff265;
  --tp-common-pink : #fff265;
  --tp-common-red : #fff265;
  --tp-grey-1: #2e2d2c;
  --tp-grey-2: #2e2d2c;
  --tp-grey-3: #2e2d2c;
  --tp-grey-4: #2e2d2c;
  --tp-grey-5: #2e2d2c;
  --tp-grey-6: #2e2d2c;
  --tp-grey-7: #2e2d2c;
  --tp-grey-8: #2e2d2c;
  --tp-theme-primary: #fff265;
  --tp-theme-secondary: #d6d4c8;
  --tp-theme-1: #0752c5;
  --tp-border-1: #eee;
  --tp-border-2: rgba(51, 51, 51, 0.8);
  --tp-border-3: rgba(255, 255, 255, 0.1);
}

.tp-portfolio-details-2-thumb img {
  border-radius: 0px !important;
}

.tp-main-menu nav > ul > li > a.hoofdmenu-active {
 text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}


.al-hero-archi-area {
    min-height: 100vh !important;
    background-size: 80% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
}

.al-hero-archi-area.bureau-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.al-hero-archi-title h2{font-weight: 500;}

#header-sticky.bureau-menu {
    background-color: #fffef5;
}


/* ========================================
   PROJECTKAART HOVER
   ======================================== */

/* Buitenste kader knipt de ingezoomde afbeelding af */
.al-project-archi-thumb {
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

/* Deze wrapper verzorgt de zoom */
.project-image-zoom {
   width: 100%;
   transform: scale(1.01);
   transform-origin: center;
   transition: transform 0.7s cubic-bezier(.22, .61, .36, 1);
   will-change: transform;
}

/* Inzoomen bij hover */
.al-project-archi-wrapper:hover .project-image-zoom {
   transform: scale(1.06);
}

/* Afbeelding zelf blijft beschikbaar voor de parallax */
.project-image-zoom img {
   display: block;
   width: 100%;
}

/* Titel voorbereiden */
.al-project-archi-title-sm {
   transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
   will-change: transform;
}

/* Titel iets naar rechts schuiven */
.al-project-archi-wrapper:hover
.al-project-archi-title-sm {
   transform: translateX(12px);
}

/* Normale state */
.al-project-archi-meta {
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
}

/* Hover */
.al-project-archi-wrapper:hover .al-project-archi-meta {
    transform: translateX(-5px);
}



/* Pijl voorbereiden */
.al-project-archi-icon .tp-arrow-svg-top-right {
   transform: rotate(0deg);
   transform-origin: center;
   transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
   will-change: transform;
}

/* Pijl van rechtsboven naar recht naar rechts draaien */
.al-project-archi-wrapper:hover
.al-project-archi-icon .tp-arrow-svg-top-right {
   transform: rotate(45deg);
}

.al-project-archi-wrapper:hover .al-project-archi-icon > a {
    background-color: var(--tp-theme-secondary);
    border-radius: 50%;
}
.project-thumb-link {
   display: block;
   width: 100%;
   cursor: pointer;
}



.al-hero-archi-shape {
   width: 65% !important;
   max-width: 1200px;
   height: auto;
   left: 50% !important;
   right: auto !important;
   translate: -50% 0;
}

.tp-breadcrumb-4-area.pre-header {
    width: 100%;
    height: calc(100svh - 90px);
    min-height: 600px;
    margin-top: 90px;
    padding: 0;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    position: relative;

    display: flex;
    align-items: flex-end;
}

.tp-breadcrumb-4-area.pre-header > .container-fluid {
    width: 100%;
    padding-bottom: 40px;
}

.hilva-contact-footer {
  background-image: url("../img/_hilva/Beeldmerk/Beeldmerk-Hilva-wit-outline.svg");
  background-repeat: no-repeat;
  background-position: right 30px bottom 30px;
  background-size: 22% auto;
}

@media (max-width: 767px) {
  .hilva-contact-footer {
    padding-bottom: 150px;
    background-size: 220px auto;
    background-position: right 20px bottom 20px;
  }
}


@media (max-width: 767px) {
    .tp-breadcrumb-4-area.pre-header {
        height: calc(100svh - 90px);
        min-height: 0;
        align-items: center;
    }

    .tp-breadcrumb-4-area.pre-header > .container-fluid {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .al-hero-archi-area {
        min-height: 50vh !important;
        background-size: cover !important;
        background-position: 0 100px !important;
        background-repeat: no-repeat !important;
    }

    .al-hero-archi-shape {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 80% !important;
        height: auto;
    }
}

@media (min-width: 1200px) {
  #header-sticky .tp-main-menu,
  #header-sticky .tp-header-right {
    position: relative;
    top: 10px;
  }
}



/* ========================================
   HILVA RESPONSIVE SPACING
   ======================================== */

/* Keep the menu transparent until the existing scroll state activates. */
#header-sticky.al-header-archi.header-transparent:not(.header-sticky):not(.bureau-menu) {
  background: transparent;
}

/* Keep a generous gutter when the wide desktop container fills the screen. */
@media (max-width: 1749.98px) {
  .container-1750 {
    padding-left: clamp(24px, 5vw, 85px);
    padding-right: clamp(24px, 5vw, 85px);
  }
}

@media (max-width: 767.98px) {
  main .container:not(.container-1750),
  .tp-breadcrumb-4-area.pre-header > .container-fluid {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Keep mobile hero titles readable instead of compressing the letters. */
@media (max-width: 767.98px) {
  .al-hero-archi-title {
    letter-spacing: normal;
  }
}

/* Keep the longest hero word inside the gutters on narrow phones. */
@media (max-width: 574.98px) {
  .al-hero-archi-title {
    font-size: clamp(32px, 10vw, 50px);
  }
}

/* HILVA MOBILE MENU ICON: draw on the button instead of replacing an img. */
@media (max-width: 1199.98px) {
  #header-sticky button.tp-menu-bar {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #header-sticky button.tp-menu-bar img[src$="contact-icoon.svg"] {
    display: none;
  }

  #header-sticky button.tp-menu-bar::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' fill='none' stroke='%232e2d2c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
  }
}

/* Back-to-top: visibility is controlled by a single scroll handler. */
.scrollToTop {
  padding: 0;
  border: 0;
  transition: transform 0.2s ease;
}
.scrollToTop .water {
  transition: none;
}
.scrollToTop:focus-visible {
  outline: 2px solid var(--tp-theme-primary);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .scrollToTop, .scrollToTop .water_wave {
    animation: none;
    transition: none;
  }
}

/* Keep the SVG wave paths the same yellow as the progress fill. */
.scrollToTop .water {
  color: var(--tp-theme-primary);
}

/* HILVA SMOOTH HEADER TRANSITION */
#header-sticky.al-header-archi {
  position: fixed;
  z-index: 10;
  animation: none;
  -webkit-animation: none;
  box-shadow: 0 2px 6px rgba(19, 19, 22, 0);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header-sticky.al-header-archi.header-sticky {
  box-shadow: 0 2px 6px rgba(19, 19, 22, 0.08);
}

/* Keep the blur layer mounted so it can fade in both directions. */
#header-sticky.al-header-archi.tp-header-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#header-sticky.al-header-archi.header-sticky.tp-header-blur::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #header-sticky.al-header-archi,
  #header-sticky.al-header-archi.tp-header-blur::after {
    transition: none;
  }
}

/* Match menu typography to the telephone number and align their text centers. */
#header-sticky .tp-main-menu nav > ul > li > a,
#header-sticky .tp-header-btn a {
  font-family: var(--tp-ff-p);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}

#header-sticky .tp-header-btn {
  align-items: center;
  display: flex !important;
}
@media (max-width: 575.98px) {
  #header-sticky .tp-header-btn {
    display: none !important;
  }
}

/* Telephone link hover in the header. */
#header-sticky .tp-header-btn a[href^="tel:"]:hover {
  color: var(--tp-common-yellow);
}

/* Project overview: stable text on touch screens. */
@media (hover: none), (max-width: 767.98px) {
  .al-project-archi-area .al-project-archi-wrapper .al-project-archi-title-sm,
  .al-project-archi-area .al-project-archi-wrapper .al-project-archi-meta {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .al-project-archi-area .al-project-archi-title-sm a:hover {
    color: inherit;
  }
}

/* Let the line fill the available card width before the arrow on mobile. */
@media (max-width: 767.98px) {
  .al-project-archi-area .al-project-archi-icon {
    width: 100%;
    float: none;
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    transform: none;
  }

  .al-project-archi-area .al-project-archi-icon::before {
    display: block;
    width: auto;
    left: 0;
    right: 76px;
    top: calc(50% + 6px);
  }
}