/* Syryn-laag bovenop de originele Construcfy-stylesheet: alleen logo en foto's. */

/* ------------------------------------------------------------------ logo */
.header-logo-link { max-width: none; width: auto; }
/* logo volgens het Syryn-logo: "SYRYN." breed en vet, "TOTAALRENOVATIES" dun en gespreid over dezelfde breedte.
   Karnchang SemiExpanded en Beautifully Delicious zijn Canva-lettertypes; Archivo Expanded benadert ze. */
:root { --syryn-wit: #fbfaf5; }
.syryn-logo { display: inline-grid; justify-items: stretch; color: var(--neutral--800); line-height: 1; }
.syryn-logo__word { font: 800 34px/0.8 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -0.005em; }
.syryn-logo__sub { display: flex; justify-content: space-between; margin-top: 7px; font: 400 8.5px/1 "Archivo", sans-serif; font-stretch: 125%; }
.syryn-logo--footer { color: var(--syryn-wit); }
.footer-logo-wrapper { max-width: none; }
@media screen and (max-width: 479px) {
  .syryn-logo__word { font-size: 27px; }
  .syryn-logo__sub { font-size: 6.8px; margin-top: 6px; }
}
.syryn-tel { white-space: nowrap; margin-left: 32px; }
@media screen and (max-width: 991px) { .syryn-tel { margin-left: 0; margin-right: 16px; } }
.syryn-footer-link { color: inherit; }
.syryn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* logostrook: materialen in plaats van partnerlogo's */
.syryn-material { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--neutral--800); white-space: nowrap; }

/* ------------------------------------------------------------------ foto's */
/* foto's in kleur (het template toonde ze zwart-wit) */
.half-bg-image-left.cta-home-v2-half-bg { background-image: url("assets/ig/carport.jpg"); background-size: cover; background-position: 50% 50%; width: 40%; height: 100%; bottom: 0; }
@media screen and (max-width: 991px) {
  .half-bg-image-left.cta-home-v2-half-bg { background-size: cover; margin-bottom: 0; width: 100%; height: auto; }
}

/* ------------------------------------------------------------------ motion */
/* maskers voor de woordanimatie van syryn-motion.js; zonder script bestaan ze niet */
.syryn-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.18em 0 0.08em; margin: -0.18em 0 -0.08em; }
.syryn-word { display: inline-block; will-change: transform; }
.syryn-frame { overflow: hidden; }
.hero-v2-left-image-wrapper { overflow: hidden; }

/* ------------------------------------------------------- zwarte headerzone */
/* de header is op elke pagina een zwarte balk met het logo in wit; op de homepage loopt het zwart door in de hero */
.header-wrapper.v1 { background-color: var(--neutral--800); }
.header-wrapper.v1 .syryn-logo { color: var(--syryn-wit); }
.header-wrapper.v1 .hamburger-menu-bar { background-color: var(--neutral--100); }
@media screen and (min-width: 992px) {
  .header-wrapper.v1 .header-nav-link { color: var(--neutral--100); }
  .header-wrapper.v1 .header-nav-link:hover { color: var(--neutral--300); }
}
@media screen and (max-width: 991px) {
  /* de telefoonlink staat naast de hamburger, buiten het uitklapmenu */
  .header-wrapper.v1 .syryn-tel { color: var(--neutral--100); }
}
.bg-accent-1:has(> .header-wrapper) { background-color: var(--neutral--200); }
.bg-accent-1:has(> .header-wrapper):has(.hero.v2) { background-color: var(--neutral--800); }
.position-absolute.hero-v18-bg { background-color: var(--neutral--200); }

/* zonder iconen: kenmerken en contactgegevens krijgen de volle breedte */
.grid-2-columns.project-single-stats, .contact-link---icon-left, .contact-link---icon-left.icon-48px { grid-template-columns: 1fr; }

/* hero: linksboven loopt de foto over in het zwart van de header; naar linksonder en rechts komt hij steeds meer door.
   Het donkerste deel zit achter de kop, de tekst eronder houdt genoeg contrast. */
.hero-v2-image-shadow {
  background-color: transparent;
  background-image:
    linear-gradient(90deg, var(--neutral--800) 0%, rgb(0 0 0 / 0) 14%),
    linear-gradient(180deg, var(--neutral--800) 0%, rgb(0 0 0 / 0.55) 30%, rgb(0 0 0 / 0) 88%),
    radial-gradient(120% 95% at 0% 0%, var(--neutral--800) 0%, rgb(0 0 0 / 0.7) 40%, rgb(0 0 0 / 0.2) 85%, rgb(0 0 0 / 0) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.12) 60%, rgb(0 0 0 / 0.05) 100%);
}
.hero-v2-left-image-wrapper { background-color: var(--neutral--800); }

/* ------------------------------------------------------------- lettertypes */
/* Bebas Neue voor de koppen, DM Sans Light voor de tekst (paar uit Ref CoachedBy Club, beide gratis).
   Het logo houdt zijn eigen letter. */
:root {
  --syryn-kop: "Bebas Neue", "Arial Narrow", sans-serif;
  --syryn-tekst: "DM Sans", system-ui, sans-serif;
}
body, p, li, .input, .text-area, label, .rich-text, .rich-text-v2 { font-family: var(--syryn-tekst); font-weight: 300; letter-spacing: -0.03em; }
.btn-primary, .btn-secondary, .w-button { font-family: var(--syryn-tekst); font-weight: 400; letter-spacing: -0.03em; }
.header-nav-link, .link-menu, .text-100, .text-200, .text-300, .text-400, .syryn-tel, .syryn-material { font-family: var(--syryn-tekst); font-weight: 500; }
label { font-weight: 500; }

/* tekstgroottes iets kleiner dan het template: rustiger */
.text-400 { font-size: 21px; }
.text-300 { font-size: 18px; }
.text-200, .btn-primary, .btn-secondary, label, .input, .text-area { font-size: 16px; }
body, p, .rich-text p, .rich-text li, .rich-text-v2 p, .rich-text-v2 li { font-size: 17px; }
@media screen and (max-width: 991px) { .text-400 { font-size: 18px; } }
@media screen and (max-width: 767px) { body, p, .rich-text p, .rich-text li, .rich-text-v2 p, .rich-text-v2 li { font-size: 16px; } }
@media screen and (max-width: 479px) { .text-400 { font-size: 16px; } }

/* koppen: Bebas Neue in één gewicht; hiërarchie alleen via grootte */
h1, h2, h3, .display-1, .display-2, .display-3, .display-4,
.card-title, .card-title-white, .heading-h3-size, .heading-h5-size, .accordion-title,
.rich-text h2, .rich-text h3, .rich-text-v2 h2, .rich-text-v2 h3 {
  font-family: var(--syryn-kop);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1; /* bij 0,9 botsen de accenten van ÉÉN tegen de regel erboven */
  text-transform: uppercase; /* anders toont een kleine i in de bron zijn punt */
}
.display-1 { font-size: clamp(46px, 6.8vw, 98px); }
.display-2 { font-size: clamp(40px, 5vw, 72px); }
.display-3 { font-size: clamp(34px, 3.7vw, 54px); }
.display-4, .card-title, .card-title-white { font-size: clamp(26px, 2.3vw, 34px); }
.heading-h3-size, .accordion-title { font-size: clamp(22px, 1.9vw, 28px); }
.heading-h5-size { font-size: 22px; }
.rich-text h2, .rich-text-v2 h2 { font-size: clamp(34px, 3.1vw, 46px); }
.rich-text h3, .rich-text-v2 h3 { font-size: clamp(24px, 2vw, 30px); }
.stats-v1 .display-1 { font-size: clamp(64px, 8vw, 120px); }
/* de stats-labels zijn h3 in het template, maar lezen als tekst */
.stats-v1---text { font-family: var(--syryn-tekst); font-weight: 300; font-size: 17px; line-height: 1.3; letter-spacing: -0.03em; text-transform: none; }
.syryn-logo, .syryn-logo * { letter-spacing: normal; }

/* e-mailadres in de footer niet in hoofdletters */
.link-menu[href^="mailto:"] { text-transform: none; }

/* foto bovenaan een realisatie: liggend kader, ook als de Instagramfoto rechtop staat */
.project-image { aspect-ratio: 16 / 9; height: auto; }
@media screen and (max-width: 767px) { .project-image { aspect-ratio: 4 / 3; } }

/* gsm-menu: Webflow kleurt de header bij openen wit (inline stijl); hij blijft zwart met witte links */
.header-wrapper.v1 { background-color: var(--neutral--800) !important; }
.header-wrapper.v1 .hamburger-menu-bar { background-color: var(--neutral--100) !important; }
@media screen and (max-width: 991px) {
  .header-wrapper.v1 .header-nav-menu-wrapper { background-color: var(--neutral--800); border-top: 1px solid rgb(255 255 255 / 0.12); }
  .header-wrapper.v1 .header-nav-menu-wrapper .header-nav-link { color: var(--neutral--100); }
  .header-wrapper.v1 .header-nav-menu-wrapper .header-nav-link:hover { color: var(--neutral--300); }
}

/* ---------------------------------------------------------- foto's in beweging */
/* het template draaide foto's bij hover 4 à 5 graden schuin (Webflow-interactie); die transform staat uit */
img[src^="assets/ig/"]:not(.hero-v2-image) { transform: none !important; }
/* scroll: de foto drijft traag verticaal binnen zijn kader (syryn-motion.js zet --py) */
.syryn-parallax { translate: 0 var(--py, 0%); scale: calc(1.12 * var(--zoom, 1)); transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* hover op een klikbare foto: een zachte, rechte zoom */
a:hover .syryn-parallax, a:focus-visible .syryn-parallax { --zoom: 1.04; }
@media (prefers-reduced-motion: reduce) { .syryn-parallax { transition: none; } a:hover .syryn-parallax { --zoom: 1; } }

/* CTA-knoppen compacter: 50px hoog in plaats van 60 tot 72px, op elke schermbreedte */
.btn-primary.w-button:not(.inside-input):not(.btn-form), .btn-secondary.w-button { padding: 16px 28px; font-size: 15px; line-height: 1.2; }
.btn-primary.btn-form-wrapper { padding: 0 24px 0 0; font-size: 15px; }
.btn-primary.btn-form-wrapper > .btn-form { padding: 16px 4px 16px 28px; font-size: 15px; line-height: 1.2; }
.w-button > .line-square-icon { display: none; } /* lege plek van het weggehaalde pijltje */

/* zeven diensten plus de contactkaart: vier kolommen op desktop, het template regelt tablet en mobiel */
@media (min-width: 992px) { .services-grid.syryn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* dienstpagina met één realisatie: kop en knop links, de kaart rechts */
@media (min-width: 992px) {
  .syryn-rel-single .container-default { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .syryn-rel-single .container-default::before, .syryn-rel-single .container-default::after { content: none; }
  .syryn-rel-single .container-default > .mg-bottom-48px { margin-bottom: 0; }
  .syryn-rel-single .title-and-buttons { grid-template-columns: 1fr; justify-items: start; row-gap: 32px; }
  .syryn-rel-single .w-dyn-items { grid-template-columns: 1fr; }
}

/* dienstenkaarten: titel en tekst delen per rij twee sporen (subgrid), zo start elke beschrijving op dezelfde hoogte,
   ook als een titel naast een andere over twee regels loopt */
.services-grid.syryn-grid-4 > .w-dyn-item,
.services-grid.syryn-grid-4 > .w-dyn-item > .card-link { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }

/* footer: links kleiner en op één regel, zodat de rijen van de drie kolommen op dezelfde hoogte staan */
.footer---middle .link-menu { font-size: 14px; line-height: 1.2; white-space: nowrap; }

/* footer: de eerste link van elke kolom (Home, Totaalrenovatie, Contact) in het wit */
.footer---middle .links-menu-1-col > .link-menu:first-child { color: var(--syryn-wit); }

/* scrollknop in de hero: een kleine cirkel met een fijne pijl in plaats van de grote cirkel van het template */
.btn-circle-absolute-v1:has(> .hero-v2-btn-circle) { width: auto; right: 0; bottom: 112px; }
.btn-circle-secondary.hero-v2-btn-circle { width: 52px; height: 52px; min-width: 0; min-height: 0; border-width: 1px; border-color: rgb(255 255 255 / 0.45); }
.btn-circle-secondary.hero-v2-btn-circle:hover { border-color: var(--syryn-wit); }
.btn-circle-secondary.hero-v2-btn-circle > .arrow-down.arrow-down-white { width: 14px; min-width: 0; max-width: 14px; height: auto; min-height: 0; }
@media screen and (max-width: 767px) { .btn-circle-absolute-v1:has(> .hero-v2-btn-circle) { bottom: 32px; } }
.btn-circle-secondary.hero-v2-btn-circle:focus-visible { outline: 2px solid var(--syryn-wit); outline-offset: 3px; transition: none; }

/* zijbalk links met Instagram, telefoon en e-mail: een afgeronde strook zonder vakjes.
   syryn.js zet .is-licht zodra de strook boven een lichte sectie staat; dan worden de kleuren omgekeerd. */
.syryn-side {
  --side-bg: var(--neutral--800); --side-rand: rgb(255 255 255 / 0.16); --side-icoon: var(--neutral--400);
  --side-actief: var(--syryn-wit);
  position: fixed; left: 20px; top: 50%; z-index: 50; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.syryn-side.is-licht {
  --side-bg: var(--syryn-wit); --side-rand: rgb(0 0 0 / 0.12); --side-icoon: var(--neutral--600);
  --side-actief: var(--neutral--800);
}
.syryn-side__icons {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 0;
  background-color: var(--side-bg); border: 1px solid var(--side-rand); border-radius: 12px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.syryn-side__link {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--side-icoon); transition: color 0.35s ease;
}
.syryn-side__link:hover { color: var(--side-actief); }
.syryn-side__link:focus-visible { outline: 2px solid var(--side-actief); outline-offset: -3px; color: var(--side-actief); transition: none; }
@media (prefers-reduced-motion: reduce) { .syryn-side__icons, .syryn-side__link { transition: none; } }
/* alleen waar de marge naast de inhoud breed genoeg is (vanaf 1340 px); smaller zou de strook over de tekst vallen,
   en daar staan Instagram en de telefoon al in de header */
@media screen and (max-width: 1339px) { .syryn-side { display: none; } }

/* werkwijze (over ons): per rij starten titel, tekst en lijn van beide blokken op dezelfde hoogte, ook als een titel over twee regels loopt */
.values-grid---items { align-items: start; }
.values-grid---items > div { display: grid; grid-row: span 3 !important; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.values-grid---items > div > .divider-line { align-self: end; }

/* intro over ons: gecentreerd label, subtekst in twee regels, compactere hoogte en een rij van drie foto's onder de knoppen */
.syryn-label-center { justify-content: center; }
.syryn-intro-tekst { max-width: 620px; margin-left: auto; margin-right: auto; }
/* template: 97 boven en 158 onder; compacter, de fotorij vult nu de onderkant */
.section.hero.v4 { padding-top: 72px; padding-bottom: 96px; }
@media screen and (max-width: 991px) { .section.hero.v4 { padding-top: 64px; padding-bottom: 88px; } }
.syryn-intro-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 64px; position: relative; z-index: 1; }
.syryn-intro-foto { aspect-ratio: 4 / 3; overflow: hidden; }
@media screen and (max-width: 767px) {
  .section.hero.v4 { padding-top: 48px; padding-bottom: 64px; }
  .syryn-intro-fotos { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
  .syryn-intro-foto:nth-child(n + 2) { display: none; }
}

/* realisaties op de homepage: de foto volgde de staande verhouding van het beeld (659 x 879 op desktop); nu liggend 4:3 */
.porfolio-slider .project-card-picture { aspect-ratio: 4 / 3; height: auto; }
.porfolio-slider .project-card-picture > .card-image { position: absolute; inset: 0; }

/* footer: Home, Totaalrenovatie en Contact blijven 14 px en wit, de links eronder een maat kleiner */
.footer---middle .links-menu-1-col > .link-menu:not(:first-child) { font-size: 12px; }
/* de twee alinea's onder het footerlogo op dezelfde 14 px als Home, Totaalrenovatie en Contact */
.footer---middle .footer-logo-wrapper ~ p, .footer---middle p.color-neutral-400.keep { font-size: 14px; line-height: 1.6; }
.footer---middle .syryn-footer-link { white-space: nowrap; }

/* ons verhaal (over ons): de subtekst ongeveer zo breed als de titel erboven, zodat hij in 3 à 4 regels valt */
#our-story .layout-grid-v2-column-01---content > .inner-container._532px { max-width: 600px; }

/* header tussen 992 en 1199 px: menu-items nooit over twee regels en iets dichter bij elkaar, zodat Realisaties niet tegen het logo komt */
.header-nav-link { white-space: nowrap; }
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .header-wrapper .header-nav-list-item.left:not(.pd-right-0) { padding-right: 20px; }
  .header-wrapper .header-left-side .header-nav-list-item { padding-left: 20px; }
  .header-wrapper .header-left-side .syryn-tel { margin-left: 20px; }
}
@media screen and (min-width: 992px) and (max-width: 1099px) {
  .header-wrapper .header-nav-link { font-size: 13px; }
}

/* ------------------------------------------------------------------ mobiel menu in blokken (syryn.js) */
.syryn-menu { position: fixed; inset: 0; z-index: 1000; overflow: hidden; }
.syryn-menu[hidden] { display: none; }
.syryn-menu__blokken { position: absolute; inset: 0; display: grid; grid-auto-rows: var(--maat); align-content: end; } /* onderste rij altijd volledig */
.syryn-menu__blok {
  /* 1 px groter dan de cel zodat er tussen de blokken geen haarlijntjes zichtbaar zijn */
  width: calc(var(--maat) + 1px); height: calc(var(--maat) + 1px);
  background-color: var(--neutral--800); transform: scale(0); transform-origin: 100% 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc((var(--stappen) - var(--stap)) * 22ms);
}
.syryn-menu__blok.is-licht { background-color: var(--syryn-wit); }
.syryn-menu.is-open .syryn-menu__blok { transform: scale(1); transition-delay: calc(var(--stap) * 30ms); }
.syryn-menu__nav {
  position: absolute; inset: 0; bottom: var(--onder); display: flex; flex-direction: column; justify-content: center;
  gap: 28px; padding: 96px 24px 16px; overflow-y: auto;
}
.syryn-menu__lijst { list-style: none; margin: 0; padding: 0; }
.syryn-menu__link {
  position: relative; display: inline-block; padding: 2px 0;
  font-family: var(--syryn-kop); font-size: clamp(48px, 13vw, 76px); line-height: 1; text-transform: uppercase;
  color: var(--syryn-wit); text-decoration: none;
  opacity: 0; transform: translateY(16px); transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.syryn-menu__link[aria-current="page"]::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; background-color: var(--accent--primary-1);
}
.syryn-menu__link:hover { color: var(--neutral--400); }
.syryn-menu__link:focus-visible, .syryn-menu__contact a:focus-visible { outline: 2px solid var(--syryn-wit); outline-offset: 4px; transition: none; }
.syryn-menu__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; opacity: 0; transition: opacity 0.2s ease; }
.syryn-menu__contact a { font-family: var(--syryn-tekst); font-size: 15px; font-weight: 500; color: var(--neutral--400); text-decoration: none; }
.syryn-menu.is-open .syryn-menu__link { opacity: 1; transform: none; transition-duration: 0.45s; transition-delay: calc(var(--stappen) * 22ms + 100ms + var(--i, 0) * 50ms); }
.syryn-menu.is-open .syryn-menu__contact { opacity: 1; transition-duration: 0.45s; transition-delay: calc(var(--stappen) * 22ms + 400ms); }
.syryn-menu__lijst li:nth-child(2) .syryn-menu__link { --i: 1; }
.syryn-menu__lijst li:nth-child(3) .syryn-menu__link { --i: 2; }
.syryn-menu__lijst li:nth-child(4) .syryn-menu__link { --i: 3; }
.syryn-menu__lijst li:nth-child(5) .syryn-menu__link { --i: 4; }
/* de header (logo en kruisje) blijft boven het menu; de twee streepjes draaien tot een kruis */
.syryn-menu-open .header-wrapper { position: relative; z-index: 1001; }
.syryn-menu-open body { overflow: hidden; }
.header-wrapper .hamburger-menu-bar { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* !important: de Webflow-interactie zet zelf een inline transform op de streepjes */
.syryn-menu-open .header-wrapper .hamburger-menu-bar.top { transform: translateY(7.5px) rotate(45deg) !important; }
.syryn-menu-open .header-wrapper .hamburger-menu-bar.bottom { transform: translateY(-7.5px) rotate(-45deg) !important; }
@media (prefers-reduced-motion: reduce) {
  .syryn-menu__blok, .syryn-menu__link, .syryn-menu__contact, .header-wrapper .hamburger-menu-bar { transition: none !important; }
}