:root {
  --green:#123D2B;
  --mid:#1C513A;
  --gold:#B0903D;
  --lightgold:#C9AB5C;
  --cream:#F3EFE5;
  --ink:#17201B
}

* {
  box-sizing:border-box
}

html {
  scroll-padding-top:170px;
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.7 'DM Sans',sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea,select {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px
}

img {
  display:block;
  max-width:100%;
  object-fit:cover
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;
  line-height:1.12
}

h1 {
  font-size:clamp(46px,5.4vw,82px);
  letter-spacing:-.045em
}

h2 {
  font-size:clamp(34px,3.6vw,54px);
  letter-spacing:-.035em
}

h3 {
  font-size:29px
}

.wrap {
  width:min(1180px,calc(100% - 64px));
  margin:auto
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  font-weight:700;
  color:var(--gold);
  margin-bottom:22px
}

.header {
  position:fixed;
  top:26px;
  left:32px;
  right:32px;
  z-index:100;
  --nav-background:#203c30;
  --nav-stripes:repeating-linear-gradient(105deg,transparent 0 3px,#ffffff04 3px 4px);
  background-color:var(--nav-background);
  background-image:var(--nav-stripes);
  color:var(--cream);
  padding:21px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid #c9ab5c38;
  box-shadow:0 10px 30px #08170f29,inset 0 1px 0 #f3efe50a;
  transition:top .2s ease,left .2s ease,right .2s ease;
}

.header.is-scrolled {
  top:0;
  left:0;
  right:0;
}

.brand {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:12px
}

.brand img {
    margin-left: 60px;
  width: 60px;
  height: 60px;
  object-fit:contain;
  transform:scale(1.4)
}

.brand span {
  font-family:Georgia,serif;
  line-height:1.2;
  font-size:20px
}

.brand small {
  display:block;
  font:10px 'DM Sans',sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:3px
}

.nav {
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:24px;
  font-size:17px;
  margin-right: 60px;
  font-weight: bold;

}

.nav>a:not(.button) {
  position:relative;
  padding:9px 0;
  transition:color .2s ease
}

.nav>a:not(.button):hover,
.nav>a:not(.button)[aria-current] {
  color:var(--lightgold)
}

.nav>a:not(.button):after {
  content:'';
  height:1px;
  background:var(--gold);
  position:absolute;
  bottom:2px;
  left:0;
  width:0;
  transition:width .2s
}

.nav>a:hover:after,.nav>a[aria-current]:after {
  width:100%
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  padding:14px 24px;
  background:var(--gold);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  border:1px solid transparent;
  transition:background .2s,transform .2s;
  cursor:pointer;
  border-radius: 4px;
}

.button:hover {
  background:var(--lightgold);
  transform:translateY(-2px)
}

.button.dark {
  background:var(--green);
  color:var(--cream);
}

.button.outline {
  border-color:#f3efe56b;
  background:transparent;
  color:var(--cream)
}

.button.outline:hover {
  background:#ffffff14
}

.button {
  min-height:50px;
  padding:13px 23px;
  border-radius:7px;
  font-size:15px;
  line-height:1.3;
  letter-spacing:.015em;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.button b {
  font-size:15px !important;
  font-weight:600;
}

.button:not(.outline):not(.dark),
.button.dark[href$="#aanvraag"],
button.button[type="submit"] {
  background:#c6a458;
  color:#182d23;
  border-color:#dfc582;
  box-shadow:0 3px 8px #08170f26,inset 0 1px 0 #ffffff26;
}

.button:not(.outline):not(.dark):hover,
.button.dark[href$="#aanvraag"]:hover,
button.button[type="submit"]:hover {
  background:#d6b66c;
  border-color:#e7cf96;
  box-shadow:0 5px 12px #08170f33;
}

.button.outline {
  color:var(--green);
  background:#123d2b05;
  border-color:#123d2b40;
}

.button.outline:hover {
  background:#123d2b0d;
  border-color:var(--green);
}

.nav .button.outline,
.hero .button.outline {
  text-align:center;
  color:var(--cream);
  background:#f3efe508;
  border-color:#f3efe540;
  box-shadow:inset 0 1px 0 #ffffff05;
}

.nav .button.outline:hover,
.hero .button.outline:hover {
  background:#f3efe514;
  border-color:#c9ab5c99;
}

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

.nav .button:focus-visible,
.hero .button:focus-visible,
.footer .button:focus-visible {
  outline-color:var(--cream);
}

.button:active {
  transform:translateY(0);
  box-shadow:none;
}

.menu {
  display:none
}

.hero {
  min-height:100svh;
  background:var(--green);
  position:relative;
  color:var(--cream);
  padding:165px 24px 0;
  display:flex;
  align-items:center;
  flex-direction:column;
  overflow:hidden
}

.hero:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,#123d2bfa,#123d2bb0 60%,#123d2b30);
  z-index:1
}

.hero video,.hero>.hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.hero-content {
  position:relative;
  z-index:2;
  text-align:center;
  max-width:860px;
  margin:auto
}

.hero h1 em {
  font-weight:400;
  color:#d6bb77
}

.hero-content>p:not(.eyebrow) {
  max-width:500px;
  margin:0 auto 28px;
  color:#edece4
}

.hero-logo {
  width:83px;
  height:83px;
  object-fit:contain;
  margin:0 auto 18px
}

.actions {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-bottom {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  width:min(1180px,100%);
  border-top:1px solid #ffffff30;
  padding:22px 0;
  margin-top:58px;
  font-size:12px;
  letter-spacing:.08em
}

.section {
  padding:100px 0
}

.intro {
  text-align:center;
  max-width:670px;
  margin:0 auto 54px
}

.intro p {
  color:#646960
}

.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.services-section .intro {
  max-width:760px;
  margin-bottom:48px;
}

.services-section .intro h2 {
  color:#203c30;
  font-size:clamp(34px,4vw,54px);
  letter-spacing:-.035em;
  margin-bottom:22px;
}

.services-section .intro h2 b {
  font-weight:500;
}

.services-section .services-intro {
  max-width:510px;
  margin:0 auto;
  font-size:16px;
  line-height:1.8;
}

.service {
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  --service-padding:32px;
  min-width:0;
  background:#fffdf8;
  padding:var(--service-padding);
  border:1px solid #203c301c;
  box-shadow:0 6px 22px #203c3006;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  border-radius:12px;
}

.service-image {
  display:block;
  width:calc(100% + 2 * var(--service-padding));
  max-width:none;
  aspect-ratio:6 / 5;
  object-fit:cover;
  border-radius:0;
  margin:calc(-1 * var(--service-padding)) calc(-1 * var(--service-padding)) 28px;
}

.service:hover,.service:focus-visible {
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 16px 36px #203c3014;
}

.service .icon {
  font-size:25px;
  color:var(--gold);
  display:block;
  margin-bottom:30px
}

.service h3 {
  font-family:'DM Sans',Arial,sans-serif;
  color:#203c30;
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
  margin-bottom:12px
}

.service p {
  color:#666c65;
  font-size:15px;
  line-height:1.8;
  margin-bottom:28px;
}

.service .arrow {
  display:block;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid #203c301a;
  text-align:left;
  font-size:14px;
  color:#203c30;
  transition:color .2s ease;
}

.service:hover .arrow,.service:focus-visible .arrow {
  color:#937329;
}

@media(prefers-reduced-motion:reduce) {
  .service {
    transition:none;
  }
  .service:hover,.service:focus-visible {
    transform:none;
  }
}

.section-link {
  text-align:center;
  margin-top:34px
}

.text-link {
  border-bottom:1px solid var(--gold);
  padding-bottom:7px;
  font-size:14px
}

.section-link .text-link {
  transition:color .2s ease;
}

.section-link .text-link:hover,
.section-link .text-link:focus-visible {
  color:var(--gold);
}

.split-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:40px
}

.split-heading h2 {
  margin-bottom:0
}

.split-heading>p {
  max-width:350px;
  color:#646960
}

.transformation {
  background:#e7e5d9
}

.comparison {
  --split:50%;
  position:relative;
  height:520px;
  overflow:hidden;
  background:#d4cfbf
}

.comparison img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.comparison .before {
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
  z-index:1
}

.comparison .divider {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--split);
  width:2px;
  background:var(--gold);
  z-index:2;
  pointer-events:none
}

.divider:after {
  content:'↔';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--gold);
  border-radius:50%;
  font-size:26px
}

.comparison input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  margin:0;
  z-index:3
}

.comparison:focus-within {
  outline:3px solid var(--gold);
  outline-offset:4px
}

.compare-label {
  position:absolute;
  top:22px;
  left:22px;
  z-index:2;
  padding:5px 15px;
  background:var(--cream);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.13em;
  border-radius: 4px;
}

.compare-label.after {
  left:auto;
  right:22px
}

.caption {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-top:22px
}

.caption h3 {
  font-size:25px;
  margin-bottom:8px
}

.caption p,.caption small {
  font-size:13px;
  color:#646960
}

.trust {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  border-top:1px solid #b0903d50;
  border-bottom:1px solid #b0903d50;
  padding:42px 0;
  text-align:center
}

.trust h3 {
  font-size:27px;
  margin-bottom:12px
}

.trust p {
  font-size:14px;
  color:#646960;
  margin:0
}

.process {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}

.process-image {
  height:420px;
  width: 100%;
  margin-top:35px
}

.steps {
  display:grid;
  gap:12px
}

.step {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:15px;
  padding:24px;
  background:#e8e5d8
}

.step:nth-child(2n) {
  background:var(--green);
  color:var(--cream)
}

.step>b {
  font:22px Georgia;
  color:var(--gold)
}

.step h3 {
  font-size:23px;
  margin:0 0 10px
}

.step p {
  font-size:14px;
  margin:0;
  opacity:.75
}

.cta {
  padding:70px 0;
  background: #e7e5d9;
  color:var(--cream)
}

.cta .wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.cta h2 {
  margin-bottom:14px;
  color: #17201B
}

.cta p {
  margin:0;
  color:#17201B;
}

.footer {
  background:#123D2B;
  padding:55px 0 22px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:35px
}

.footer-logo {
  width:120px;
  height:120px;
  object-fit:contain
}

.footer h3 {
  font:12px 'DM Sans';
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#b0903d;
  margin-bottom:20px
}

.footer a {
  display:block;
  margin-bottom:9px;
  font-size:14px;
  overflow-wrap:anywhere;
  color: #bebcb5;
  transition:color .2s ease;
}

.footer a:hover {
  color:var(--gold);
}

.footer .button {
  display:inline-flex
}

.copyright {
  margin-top:45px;
  padding-top:20px;
  border-top:1px solid #b0903d50;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#65695f
}

.page-top {
  padding:190px 0 70px;
  background:var(--green);
  color:var(--cream)
}

.page-top p:not(.eyebrow) {
  max-width:590px;
  color:#d6ddd4
}

.page-top h1 {
  max-width:840px
}

.services-menu-section {
  padding:205px 0 65px;
  background:radial-gradient(ellipse at 95% 0%,#c9ab5c18,transparent 50%),var(--cream);
}

.services-menu-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:48px;
}

.services-menu-heading .eyebrow {
  margin-bottom:20px;
  font-size:11px;
}

.services-menu-section h1 {
  color:var(--green);
  font-size:clamp(58px,7.5vw,104px);
  line-height:.98;
  margin:0;
}

.services-menu-section h1 em {
  color:#94732e;
  font-weight:400;
}

.services-menu-caption {
  display:flex;
  align-items:center;
  gap:30px;
  padding-bottom:7px;
  font-size:12px;
  color:var(--green);
}

.services-menu-caption>span {
  font-size:52px;
  font-weight:400;
  line-height:1;
  color:var(--gold);
}

.services-menu {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.services-menu-card {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:470px;
  overflow:hidden;
  background:#173e2e;
  color:var(--cream);
  border-radius:4px;
  box-shadow:0 14px 30px #123d2b12;
  transition:transform .35s ease,box-shadow .35s ease;
}

.services-menu-card::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,#081a1240 0%,#081a1200 30%,#081a1280 60%,#081a12f5 100%);
}

.services-menu-image {
  position:absolute;
  inset:0;
  z-index:-2;
  height:100%;
  width:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.65,.3,1),filter .7s ease;
  filter:saturate(.75);
}

.services-menu-number {
  position:absolute;
  top:27px;
  left:28px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.15em;
  color:#fff8e9;
  text-shadow:0 1px 8px #0009;
}

.services-menu-card-content {
  width:100%;
  padding:28px;
}

.services-menu-name {
  display:block;
  margin-bottom:24px;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(34px,3.6vw,49px);
  line-height:1.1;
  letter-spacing:-.035em;
}

.services-menu-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:19px;
  border-top:1px solid #f3efe545;
  font-size:12px;
  letter-spacing:.025em;
}

.services-menu-arrow {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:43px;
  height:43px;
  border:1px solid #c9ab5c80;
  border-radius:50%;
  font-size:24px;
  color:var(--lightgold);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}

.services-menu-card:hover,
.services-menu-card:focus-visible {
  transform:translateY(-7px);
  box-shadow:0 24px 40px #123d2b26;
}

.services-menu-card:hover .services-menu-image,
.services-menu-card:focus-visible .services-menu-image {
  transform:scale(1.06);
  filter:saturate(1);
}

.services-menu-card:hover .services-menu-arrow,
.services-menu-card:focus-visible .services-menu-arrow {
  background:var(--lightgold);
  color:var(--green);
  transform:rotate(45deg);
}

.services-menu-blueprint {
  background-color:#214b39;
  background-image:linear-gradient(#c9ab5c0d 1px,transparent 1px),linear-gradient(90deg,#c9ab5c0d 1px,transparent 1px);
  background-size:26px 26px;
}

.services-menu-drawing {
  position:absolute;
  z-index:-2;
  width:100%;
  height:auto;
  top:12px;
  left:0;
  color:#d9c28b;
  transition:transform .7s ease;
}

.services-menu-card:hover .services-menu-drawing,
.services-menu-card:focus-visible .services-menu-drawing {
  transform:translateY(-8px);
}

.services-menu-footnote {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid #123d2b25;
  font-size:11px;
  color:#62695f;
  letter-spacing:.045em;
}

@media(max-width:800px) {
  .services-menu-section { padding:175px 0 45px; }
  .services-menu-heading { margin-bottom:32px; }
  .services-menu-caption { display:none; }
  .services-menu { grid-template-columns:1fr; gap:20px; }
  .services-menu-card { min-height:380px; }
  .services-menu-name { font-size:46px; }
  .services-menu-image { object-position:center 45%; }
  .services-menu-drawing { width:340px; max-width:100%; left:auto; right:15px; top:-30px; }
  .services-menu-footnote>span:last-child { display:none; }
}

@media(max-width:480px) {
  .services-menu-section { padding-top:140px; }
  .services-menu-heading .eyebrow { font-size:9px; letter-spacing:.15em; }
  .services-menu-card { min-height:365px; }
  .services-menu-card-content { padding:24px; }
}

@media(prefers-reduced-motion:reduce) {
  .services-menu-card:hover,
  .services-menu-card:focus-visible,
  .services-menu-card:hover .services-menu-image,
  .services-menu-card:focus-visible .services-menu-image,
  .services-menu-card:hover .services-menu-arrow,
  .services-menu-card:focus-visible .services-menu-arrow,
  .services-menu-card:hover .services-menu-drawing,
  .services-menu-card:focus-visible .services-menu-drawing { transform:none; }
}
.services-menu-card[aria-current] {
  outline:3px solid var(--gold);
  outline-offset:5px;
}

.service-gallery {
  padding:65px 0 90px;
  background:#183e30;
  color:var(--cream);
  border-top:1px solid #c9ab5c45;
}

.service-gallery[hidden],
.gallery-empty[hidden],
.gallery-photo img[hidden],
.lightbox-image[hidden] { display:none; }

.gallery-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px;
}

.gallery-heading .eyebrow { margin-bottom:12px; color:var(--lightgold); }
.gallery-heading h2 { margin:0; color:var(--cream); }
.gallery-heading h2:focus { outline:none; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:10px; }

.gallery-filters button {
  padding:12px 22px;
  border:1px solid #f3efe550;
  border-radius:30px;
  background:transparent;
  color:var(--cream);
  cursor:pointer;
}

.gallery-filters button:hover { background:#f3efe512; }
.gallery-filters button[aria-pressed="true"] { background:var(--lightgold); color:var(--green); border-color:var(--lightgold); }
.gallery-count { margin:24px 0; font-size:13px; color:#ccd5cb; }
.gallery-count:empty { margin:24px 0 0; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }

.gallery-photo {
  position:relative;
  padding:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:0;
  border-radius:5px;
  background:var(--green);
  cursor:zoom-in;
}

.gallery-photo img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-photo:hover img { transform:scale(1.04); }
.gallery-photo:disabled { cursor:default; }
.gallery-photo>span {
  position:absolute;
  right:14px;
  bottom:14px;
  padding:8px 12px;
  border-radius:3px;
  background:#102c23ed;
  color:var(--cream);
  font-size:12px;
}

.gallery-empty { padding:55px 24px; border:1px solid #c9ab5c45; background:#ffffff04; text-align:center; }
.gallery-empty-icon { display:block; color:var(--lightgold); font-size:46px; margin-bottom:16px; }
.gallery-empty h3 { color:var(--cream); margin-bottom:12px; }
.gallery-empty p { color:#ccd5cb; }
.gallery-modal-open { overflow:hidden; }

.gallery-lightbox {
  width:min(1180px,calc(100% - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  padding:24px;
  border:1px solid #c9ab5c70;
  border-radius:8px;
  background:#10251c;
  color:var(--cream);
}

.gallery-lightbox::backdrop { background:#07150fee; }
.lightbox-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.lightbox-counter { margin:0; font-size:13px; }
.gallery-lightbox button {
  min-width:44px;
  min-height:44px;
  border:1px solid #c9ab5c70;
  border-radius:4px;
  background:transparent;
  color:var(--cream);
  cursor:pointer;
}
.gallery-lightbox button:hover { background:#ffffff15; }
.gallery-lightbox button:disabled { opacity:.3; cursor:default; }
.lightbox-close { padding:8px 16px; }
.lightbox-stage { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:16px; }
.lightbox-stage figure { min-width:0; margin:0; }
.lightbox-image { margin:auto; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 220px); object-fit:contain; }
.lightbox-caption { text-align:center; margin-top:16px; font-size:13px; overflow-wrap:anywhere; }

@media(max-width:800px) {
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:480px) {
  .service-gallery { padding:45px 0 60px; }
  .gallery-heading { align-items:flex-start; flex-direction:column; }
  .gallery-filters button { padding:10px 17px; font-size:14px; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-lightbox { padding:16px; }
  .lightbox-stage { grid-template-columns:1fr 1fr; gap:14px; }
  .lightbox-stage figure { grid-column:1 / -1; grid-row:1; }
  .lightbox-image { max-height:calc(100dvh - 270px); }
  .lightbox-counter { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .gallery-photo:hover img { transform:none; }
}

.service-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:center;
  padding:50px 0;
  border-bottom:1px solid #b0903d45
}

.service-detail:nth-child(even) .detail-visual {
  order:2
}

.detail-visual {
  height:320px;
  background:linear-gradient(120deg,#ded8c6,#c0bda9);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:var(--green);
  gap:20px
}

.detail-visual span {
  font-size:55px;
  color:var(--gold)
}

.detail-visual small {
  font-size:12px;
  letter-spacing:.1em
}

.projects-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 25px
}

.project-card img {
  height:330px;
  width:100%;
  transition:transform .3s
}

.project-card .image-box {
  overflow:hidden
}

.project-card:hover img {
  transform:scale(1.025)
}

.project-card h3 {
  margin:22px 0 10px
}

.project-card p {
  font-size:14px;
  color:#646960
}

.note {
  font-size:13px;
  color:#646960
}

.about {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:70px;
  align-items:center
}

.portrait {
  min-height:620px;
  background:#e4dfcf;
  overflow:hidden;
  border-radius:20px;
}

.portrait img {
  width:100%;
  height:620px;
  object-fit:contain;
  display:block
}

.values {
  background:var(--green);
  color:var(--cream);
  border-top:1px solid rgba(176,144,61,.45)
}

.values-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  align-items:end
}

.values-intro {
  max-width:520px
}

.values-intro h2 {
  margin-bottom:24px
}

.values-intro>p:last-child {
  color:rgba(243,239,229,.75);
  max-width:470px
}

.values-numbers {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}

.value-item {
  min-height:245px;
  padding:38px;
  background:rgba(243,239,229,.06);
  border:1px solid rgba(201,171,92,.45);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:transform .25s ease,border-color .25s ease,background .25s ease
}

.value-item+ .value-item {
  padding-left:38px
}

.value-item:hover {
  transform:translateY(-5px);
  background:rgba(243,239,229,.09);
  border-color:var(--lightgold)
}

.value-number {
  display:block;
  margin-bottom:12px;
  color:var(--lightgold);
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(64px,7vw,104px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums
}

.value-item h3 {
  margin-bottom:0;
  font-family:'DM Sans',sans-serif;
  font-size:18px;
  font-weight:700
}

@media(max-width:800px) {
  .values-layout {
    grid-template-columns:1fr;
    gap:48px
  }
}

@media(max-width:480px) {
  .values-numbers {
    grid-template-columns:1fr
  }

  .value-item {
    min-height:210px;
    padding:30px
  }

  .value-item+ .value-item {
    padding-left:30px
  }
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px
}

.contact-details a {
  display:block;
  font-size:clamp(17px,2vw,25px);
  margin-bottom:20px;
  overflow-wrap:anywhere
}

.contact-details .button {
  font-size:14px;
  display:flex
}

.contact-actions {
  display:grid;
  gap:12px;
  margin-top:30px;
  max-width:390px;
  border-radius: 10px;
}

.contact-details .contact-button {
  width:100%;
  margin:0;
  padding:16px 20px;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  text-align:left;
  background:var(--green);
  border-color:rgba(201,171,92,.35)
}

.contact-button-label {
  color:rgba(243,239,229,.65);
  font-size:10px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase
}

.contact-button-value {
  color:var(--lightgold);
  font-size:clamp(14px,1.5vw,17px);
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere
}

form {
  background:#fffdf8;
  padding:40px;
  border:1px solid #ddd7c8;
  border-radius: 20px;
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

label {
  display:block;
  font-size:14px;
  margin-bottom:20px
}

input,select,textarea {
  display:block;
  width:100%;
  border:1px solid #d0cabc;
  background:var(--cream);
  padding:12px;
  margin-top:7px;
  color:var(--ink);
  border-radius:0
}

textarea {
  resize:vertical;
  min-height:135px
}

.reveal {
  transition:opacity .6s,transform .6s
}

.js .reveal.pending {
  opacity:0;
  transform:translateY(18px)
}

.skip {
  position:fixed;
  top:-100px;
  z-index:101;
  background:var(--cream);
  padding:12px
}

.skip:focus {
  top:5px
}

@media(min-width:1500px) {
  .hero {
    min-height:900px
  }
}

@media (min-width: 1401px) {
  .nav {
    flex: 1;
    gap: 30px;

  }

  .nav > a:first-child {
    margin-left: auto;
  }

  .nav .phone {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    white-space: nowrap;
    
  }

}

@media (min-width: 1101px) {
  .header {
    left:20px;
    right:20px;
    padding:16px 18px
  }
  .process {
    gap:45px
  }
  .contact-grid {
    gap:40px
  }
}

@media(max-width:1400px) {
  .brand img {
    margin-left:0;
  }
  .menu {
    display:block;
    flex-shrink:0;
    background:none;
    border:1px solid #b0903d70;
    padding:9px 12px;
    color:var(--cream);
  }
  .nav {
    display:none;
    position:absolute;
    top:100%;
    left:-1px;
    right:-1px;
    margin-right:0;
    max-height:calc(100dvh - 155px);
    overflow-y:auto;
    background-color:var(--nav-background);
    background-image:var(--nav-stripes);
    padding:24px;
    flex-direction:column;
    align-items:stretch;
    border:1px solid #b0903d50
  }
  .nav.open {
    display:flex
  }
  .nav .phone {
    display:block
  }
}

@media(max-width:800px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header {
    top:15px
  }
  .hero {
    padding-top:140px
  }
  .hero-content {
    padding-top:20px
  }
  .hero-logo {
    width:65px;
    height:65px
  }
  .hero-bottom span:last-child {
    display:none
  }
  .section {
    padding:70px 0
  }
  .services {
    grid-template-columns:1fr
  }
  .process,.about,.contact-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .comparison {
    height:420px
  }
  .split-heading {
    display:block
  }
  .split-heading>p {
    margin-top:25px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .footer-grid>div:first-child {
    grid-column:1/-1
  }
  .cta .wrap {
    display:block
  }
  .cta .button {
    margin-top:25px
  }
  .service-detail {
    gap:30px
  }
  .trust {
    gap:22px
  }
  .trust h3 {
    font-size:23px
  }
  .page-top {
    padding-top:160px
  }
  .projects-grid {
    gap:30px 20px
  }
  .project-card img {
    height:260px
  }
}

@media(max-width:480px) {
  .header {
    left:12px;
    right:12px;
    padding:14px 12px
  }
  .brand img {
    width:41px;
    height:41px
  }
  .brand span {
    font-size:18px
  }
  .brand small {
    font-size:8px
  }
  .hero {
    padding-left:20px;
    padding-right:20px
  }
  .hero h1 {
    font-size:45px
  }
  .hero-content>p:not(.eyebrow) {
    font-size:15px
  }
  .eyebrow {
    font-size:10px
  }
  .hero-bottom {
    margin-top:40px;
    font-size:10px
  }
  .hero-logo {
    display:none
  }
  .services {
    grid-template-columns:1fr
  }
  .service {
    --service-padding:26px;
  }
  .service .icon {
    margin-bottom:18px
  }
  .service p {
    min-height:0
  }
  .trust {
    grid-template-columns:1fr
  }
  .caption {
    display:block
  }
  .comparison {
    height:320px
  }
  .process-image {
    height:300px
  }
  .footer-grid {
    gap:25px;
    grid-template-columns:1fr
  }
  .footer-grid>div:first-child {
    grid-column:auto
  }
  .copyright {
    display:block
  }
  .copyright span {
    display:block;
    margin-bottom:8px
  }
  .projects-grid,.service-detail,.field-row {
    grid-template-columns:1fr
  }
  .service-detail:nth-child(even) .detail-visual {
    order:0
  }
  .detail-visual {
    height:240px
  }
  .portrait {
    min-height:340px
  }
  form {
    padding:24px 20px
  }
  .page-top h1 {
    font-size:43px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js .reveal.pending {
    opacity:1;
    transform:none
  }
}

.service:empty {
  display: none;
}

.reviews {
  position:relative;
  overflow:hidden;
  padding:100px 0;
  background-image:
    linear-gradient(90deg, rgba(10,48,33,.92), rgba(18,61,43,.72) 50%, rgba(10,48,33,.92)),
    linear-gradient(0deg, rgba(8,43,29,.85), rgba(18,61,43,.58) 48%, rgba(8,43,29,.82)),
    url("images/reviews-keuken.png");
  background-position:center, center, center 54%;
  background-size:cover;
  background-repeat:no-repeat;
}

.reviews-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:40px;
}

.review {
  padding:34px;
  background:#fffdf8;
  border-top:3px solid #b0903d;
  border-radius: 10px;
}

.stars {
  margin-bottom:20px;
  color:#b0903d;
  letter-spacing:4px;
}

.review p {
  font-family:Georgia,serif;
  font-size:20px;
  line-height:1.6;
}

.review strong,
.review small {
  display:block;
}

.review small {
  margin-top:4px;
  color:#6d746d;
}

.eyebrowf {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  font-weight:700;
  color:var(--gold);
  margin-bottom:22px;
  text-align: center;
}

.aanpakcijfer {
  display:block;
  margin-left: 250px;
}


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


.review-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  width: fit-content;
  margin: 30px auto 45px;
  padding: 18px 28px;

  background: #fffdf8;
  border: 1px solid #d8d3c7;
  border-radius: 8px;
}

.review-score {
  color: #123d2b;
  font-family: Georgia, serif;
  font-size: 42px;
  line-height: 1;
}

.review-summary-content {
  padding-left: 18px;
  border-left: 1px solid #d8d3c7;
}

.review-stars {
  color: #b0903d;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 3px;
}

.review-summary-content p {
  margin: 8px 0 0;
  color: #646960;
  font-size: 14px;
}

.review-summary-content strong {
  color: #17201b;
}


@media (max-width: 480px) {
  .review-summary {
    width: 100%;
    gap: 14px;
    padding: 16px;
  }

  .review-score {
    font-size: 34px;
  }

  .review-summary-content {
    padding-left: 14px;
  }

  .review-stars {
    font-size: 20px;
    letter-spacing: 2px;
  }



} 


.eyebrowa {
  margin-top: 80px;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  font-weight:700;
  color:var(--gold);
  margin-bottom:22px;
  text-align: center;
}

.reviewlaten {
  display:flex;
  width:fit-content;
  gap:12px;
  max-width:calc(100% - 40px);
  margin:20px auto 0;
  text-transform:none;
  letter-spacing:normal;
}

.reviewlaten-star {
  color:inherit;
  font-size:20px;
  line-height:1;
}

.reviewlaten-label {
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  text-align:left;
}

.workflow {
    position: relative;
    overflow: hidden;
    padding: 115px 0 125px;
    background:
        repeating-linear-gradient(115deg, transparent 0 78px, rgba(255,255,255,.025) 78px 80px),
        #F3EFE5;
    color: #f3efe5;
}

.workflow-inner {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.55fr);
    gap: 85px;
    align-items: start;
}

.workflow-heading {
    position: relative;
    padding-top: 14px;
    text-align: left;
}

.workflow-eyebrow {
    margin: 0 0 15px;
    color: #b0903d;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.workflow-heading h2 {
    margin: 0 0 30px;
    color: #17201B;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5.2vw, 74px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.04em;
}

.workflow-mark {
    position: relative;
    display: block;
    width: 150px;
    height: 14px;
    margin: 0;
    border-left: 4px solid #b0903d;
}

.workflow-mark::before,
.workflow-mark::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 135px;
    height: 1px;
    background: #b0903d;
}

.workflow-mark::before { left: 0; }
.workflow-mark::after {
    left: 134px;
    width: 4px;
    height: 9px;
    top: 2px;
}

.workflow-steps {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1px minmax(0, 1fr);
    grid-template-areas:
        "number line title"
        "number line copy";
    align-items: center;
    column-gap: 25px;
    min-height: 142px;
    padding: 25px 42px 27px 25px;
    color: #17201b;
    background: #123D2B;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
    transition: transform .25s ease, background .25s ease;
}

.workflow-step:nth-child(2) {
    margin-left: 52px;
}

.workflow-step:nth-child(3) {
    margin-left: 104px;
}

.workflow-step::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: #b0903d;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.workflow-step:hover {
    transform: translateX(8px);
    background: #1C513A; 
}

.workflow-number {
    grid-area: number;
    color: #b0903d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 74px;
    line-height: 1;
    letter-spacing: -.08em;
}

.workflow-line {
    grid-area: line;
    width: 1px;
    height: 74px;
    background: #b0903d;
}

.workflow-step h3 {
    grid-area: title;
    margin: 0 0 8px;
    padding: 0;
    color: #123d2b;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 21px;
    line-height: 1.25;
}

.workflow-step h3::before {
    display: none;
}

.workflow-step p {
    grid-area: copy;
    max-width: 510px;
    margin: 0;
    color: #565d56;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

@media (max-width: 800px) {
    .workflow-inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }
    .workflow-heading { max-width: 570px; }
    .workflow-heading h2 { max-width: 500px; }
    .workflow-steps { gap: 15px; }
    .workflow-step {
        grid-template-columns: 80px 1px 1fr;
        grid-template-areas:
            "number line title"
            "number line copy";
        padding: 24px 35px 25px 22px;
        border: 0;
    }
    .workflow-step:nth-child(2) { margin-left: 28px; }
    .workflow-step:nth-child(3) { margin-left: 56px; }
    .workflow-number { font-size: 64px; }
}

@media (max-width: 480px) {
    .workflow { padding: 70px 0; }
    .workflow-inner { width: calc(100% - 40px); }
    .workflow-heading h2 { font-size: 41px; }
    .workflow-step {
        grid-template-columns: 58px 1px 1fr;
        column-gap: 15px;
        min-height: 128px;
        padding: 20px 23px 22px 18px;
    }
    .workflow-step:nth-child(2),
    .workflow-step:nth-child(3) { margin-left: 0; }
    .workflow-number { font-size: 49px; }
    .workflow-line { height: 64px; }
    .workflow-step h3 { font-size: 18px; }
    .workflow-step p { font-size: 14px; line-height: 1.55; }
}

.page-top {
  background:
    linear-gradient(rgba(18, 61, 43, 0.85), rgba(18, 61, 43, 0.92)),
    url("images/Roomdivider123.jpeg") center / cover no-repeat;
}

.overonsb {
  font-family: "Montserrat", sans-serif;
  font-weight: 50;
  font-size: 40px;
}

/* Cookie-informatie en voorwaarden in de bestaande footer. */
.legal-footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid #b0903d30;
}
.footer .legal-footer-links a {
  font-size:13px;
  margin:0;
  padding:8px 0;
  color:#d0d5c8;
}
.footer .legal-footer-links a:hover,
.footer .legal-footer-links a[aria-current] {color:var(--lightgold)}

/* Voor/na: rustige materialen en een precieze, tastbare bediening. */
.comparison-refined {
  height: clamp(320px, 44vw, 560px);
  border: 1px solid rgba(18, 61, 43, .16);
  border-radius: 6px;
  isolation: isolate;
  box-shadow: 0 18px 46px -30px rgba(18, 61, 43, .38);
}
.comparison-refined .divider {
  width: 2px;
  transform: translateX(-50%);
  background: var(--cream);
  box-shadow: 0 0 0 1px rgba(18, 61, 43, .14);
}
.comparison-refined .divider::after { content: none; }
.comparison-refined .compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid var(--lightgold);
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  box-shadow: 0 0 0 6px rgba(243, 239, 229, .22), 0 6px 24px rgba(0, 0, 0, .2);
  transform: translate(-50%, -50%);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.comparison-refined .compare-handle svg { width: 32px; height: 20px; }
.comparison-refined:hover .compare-handle,
.comparison-refined:focus-within .compare-handle {
  background: var(--mid);
  box-shadow: 0 0 0 9px rgba(243, 239, 229, .25), 0 6px 24px rgba(0, 0, 0, .2);
}
.comparison-refined.is-dragging .compare-handle {
  transform: translate(-50%, -50%) scale(.94);
}
.comparison-refined .compare-label {
  top: 24px;
  left: 24px;
  padding: 8px 17px;
  border: 1px solid rgba(243, 239, 229, .35);
  border-radius: 2px;
  background: var(--green);
  color: var(--cream);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  pointer-events: none;
}
.comparison-refined .compare-label.after { left: auto; right: 24px; }
.comparison-refined input { touch-action: pan-y; }
.comparison-refined:focus-within { outline: 2px solid var(--green); outline-offset: 5px; }
.comparison-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 8px;
  margin: 16px 0 0;
  color: #51594f;
  font-size: 12px;
  text-align: center;
}
@media (max-width: 600px) {
  .comparison-refined { height: 340px; }
  .comparison-refined .compare-handle { width: 50px; height: 50px; }
  .comparison-refined .compare-label { top: 16px; left: 16px; padding: 6px 12px; }
  .comparison-refined .compare-label.after { right: 16px; }
  .comparison-help { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .comparison-refined .compare-handle { transition: none; }
}
/* Alleen de onderste footer van de homepage. */
.footer.closing-footer {
  padding:48px 0 0;
  background:#123d2b;
  color:#f3efe5;
  border-top:3px solid #b0903d;
}
.closing-footer-grid {
  display:grid;
  grid-template-columns:1.2fr .9fr 1.25fr;
  gap:64px;
  align-items:start;
  padding-bottom:38px;
}
.closing-footer-brand { display:flex; align-items:center; gap:22px; }
.closing-footer-brand>a { flex:0 0 auto; margin:0; }
.closing-footer-brand img { width:94px; height:94px; object-fit:contain; }
.closing-footer-brand p { margin:0; color:#eeeadd; font:21px/1.45 'Playfair Display',Georgia,serif; }
.closing-footer-brand em { color:#d5b975; }
.closing-footer h3 { margin:5px 0 19px; font:600 12px/1.5 'DM Sans',sans-serif; letter-spacing:.09em; color:#d5b975; text-transform:uppercase; }
.closing-footer a { width:fit-content; font-size:14px; line-height:1.6; color:#e0e5da; margin-bottom:8px; transition:color .2s; }
.closing-footer a:hover { color:#d5b975; }
.closing-footer a:focus-visible { outline-color:#d5b975; }
.closing-footer-grid nav a { position:relative; }
.closing-footer-grid nav a::after { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#d5b975; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.closing-footer-grid nav a:hover::after { transform:scaleX(1); }
.closing-footer-contact a { overflow-wrap:anywhere; }
.closing-footer-contact>a:first-of-type { font-size:16px; }
.closing-footer-contact a span { color:#d5b975; margin-left:8px; }
.closing-footer-contact p { margin:20px 0 0; color:#b9c8b9; font-size:12px; }
.closing-footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #f3efe529; padding:18px 0; color:#b9c8b9; font-size:12px; }
.closing-footer-bottom nav { display:flex; flex-wrap:wrap; gap:24px; }
.closing-footer-bottom a { margin:0; font-size:12px; padding:5px 0; color:#cbd5c7; }
.closing-footer-bottom>a span { display:inline-block; margin-left:8px; color:#d5b975; transition:transform .2s; }
.closing-footer-bottom>a:hover span { transform:translateY(-3px); }
@media(max-width:1000px) {
 .closing-footer-grid { gap:35px; grid-template-columns:1fr 1fr; }
 .closing-footer-brand { grid-column:1/-1; }
}
@media(max-width:600px) {
 .footer.closing-footer { padding-top:32px; }
 .closing-footer-grid { grid-template-columns:1fr; gap:28px; padding-bottom:28px; }
 .closing-footer-brand { grid-column:auto; }
 .closing-footer-brand img { width:80px; height:80px; }
 .closing-footer-grid nav { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
 .closing-footer-grid nav h3 { grid-column:1/-1; margin-bottom:12px; }
 .closing-footer-bottom { flex-wrap:wrap; gap:8px 20px; }
 .closing-footer-bottom>span { width:100%; }
 .closing-footer-bottom nav { gap:18px; }
}
/* Heldere footerlinks en voorbeelden in het aanvraagformulier. */
.closing-footer-grid nav[aria-label="Footernavigatie"] {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.closing-footer-grid nav[aria-label="Footernavigatie"] h3 { margin-bottom:12px; }
.closing-footer-grid nav[aria-label="Footernavigatie"] a { margin:0; padding:5px 0; }
#contact-form input::placeholder,
#contact-form textarea::placeholder { color:#737c73; opacity:1; font-size:14px; }
#contact-form input,
#contact-form textarea,
#contact-form select { border-radius:5px; }
/* Contacticoontjes in de footer. */
.closing-footer-contact > a {
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
}
.footer-contact-icon {
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#d5b975;
}
@media(max-width:380px) {
 .closing-footer-contact>a:first-of-type { font-size:14px; }
}


/* Locatie onder het contactformulier, over de volledige paginabreedte. */
.contact-location { padding:0; background:var(--cream); }
.contact-location-heading { text-align:center; padding:12px 0 44px; }
.contact-location-heading .eyebrow { margin-bottom:16px; }
.contact-location-heading h2 { margin-bottom:0; }
.contact-location-map { display:block; width:100%; height:clamp(320px,38vw,520px); border:0; background:#e7e5d9; }
@media(max-width:600px) {
  .contact-location-heading { padding:0 0 32px; }
}


/* Goed leesbare uitleg bij de geselecteerde dienst. */
.service-description { max-width:68ch; margin:32px 0 0; }
.service-description-intro { margin-bottom:20px; color:#f3efe5; font-size:clamp(22px,2.3vw,28px); font-weight:500; line-height:1.5; }
.service-description-detail { margin-bottom:28px; color:#eeeade; font-size:18px; line-height:1.85; }
@media(max-width:600px) {
  .service-description { margin:24px 0 32px; }
}

.service-description .text-link { color:#f3efe5; }
.gallery-grid[hidden], .gallery-count[hidden] { display:none; }

/* Houd de aanbouwconstructie centraal in de foto. */
#aanbouw .services-menu-image { object-position:52% 65%; }


/* Woordlogo in de homepageheader: toon alleen het gedeelte met de letters. */
.header .brand-wordmark {
  position:relative;
  display:block;
  width:120px;
  aspect-ratio:1254 / 520;
  overflow:hidden;
}
.header .brand-wordmark img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
  object-fit:contain;
  transform:translateY(-51.834%);
}
@media(max-width:480px) {
  .header .brand-wordmark { width:105px; }
}
@media(max-width:360px) {
  .header .brand-wordmark { width:95px; }
}


/* Zachte goudkleur voor het woordlogo. */
.header .brand-wordmark img { opacity:0; }
.header .brand-wordmark::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  aspect-ratio:1;
  transform:translateY(-51.834%);
  background:#c9ab5c;
  -webkit-mask:url('images/timmerbedrijfpruimgeenzaag.png') center / contain no-repeat;
  mask:url('images/timmerbedrijfpruimgeenzaag.png') center / contain no-repeat;
}


/* PruimWebsite als tekstlogo; een link volgt zodra de URL beschikbaar is. */
.closing-footer-bottom .footer-credit {
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}
.footer-credit-label {
  color:#b9c8b9;
  font-size:11px;
}
.footer-credit-brand {
  color:#f3efe5;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.035em;
}
.footer-credit-accent { color:#ff3492; }
@media(max-width:600px) {
  .closing-footer-bottom .footer-credit { margin-left:auto; }
}


/* Mobiel menu: gouden tekst zonder onderstreping. */
@media(max-width:1400px) {
  .nav > a:not(.button)::after { content:none; }
  .nav > a:not(.button):hover { color:var(--lightgold); }
}


/* Verbouw: foto links, daarna foto rechts, elk met een eigen verhaal. */
.gallery-grid.gallery-stories {
  grid-template-columns:1fr;
  gap:64px;
  margin-top:32px;
}
.gallery-story {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
}
.gallery-grid.gallery-stories .gallery-photo {
  width:100%;
  aspect-ratio:4 / 3;
}
.gallery-grid.gallery-stories .gallery-photo img { object-fit:contain; }
.gallery-story:nth-child(even) .gallery-photo { grid-column:2; grid-row:1; }
.gallery-story:nth-child(even) .gallery-story-copy { grid-column:1; grid-row:1; }
.gallery-story-copy h3 {
  max-width:20ch;
  margin-bottom:20px;
  color:var(--cream);
  font-size:clamp(27px,3vw,38px);
  line-height:1.2;
}
.gallery-story-copy p {
  max-width:48ch;
  margin:0;
  color:#eeeade;
  font-size:17px;
  line-height:1.85;
}
@media(max-width:700px) {
  .gallery-grid.gallery-stories { gap:44px; }
  .gallery-story { grid-template-columns:1fr; gap:24px; }
  .gallery-story:nth-child(even) .gallery-photo,
  .gallery-story:nth-child(even) .gallery-story-copy { grid-column:auto; grid-row:auto; }
}


/* Lichte achtergrond en helder contrast bij de dienstenverhalen. */
.service-gallery {
  background:var(--cream);
  color:var(--ink);
  border-top-color:#123d2b20;
}
.service-gallery .gallery-heading .eyebrow { color:#806326; }
.service-gallery .gallery-heading h2,
.service-gallery .service-description-intro,
.service-gallery .gallery-story-copy h3,
.service-gallery .service-description .text-link { color:var(--green); }
.service-gallery .service-description-detail,
.service-gallery .gallery-story-copy p,
.service-gallery .gallery-count { color:#505950; }
.service-gallery .gallery-filters button { color:var(--green); border-color:#123d2b40; }
.service-gallery .gallery-filters button:hover { background:#123d2b0a; }
.service-gallery .gallery-filters button[aria-pressed="true"] { background:var(--lightgold); color:var(--green); border-color:var(--lightgold); }
.service-gallery .gallery-photo { background:transparent; }
.service-gallery .gallery-empty { background:#fffdf8; border-color:#123d2b26; }
.service-gallery .gallery-empty h3 { color:var(--green); }
.service-gallery .gallery-empty p { color:#505950; }


/* Badkamerfoto vult het vlak zonder lege zijkanten. */
.gallery-grid.gallery-stories[data-service="verbouw"] .gallery-story:first-child .gallery-photo img {
  object-fit:cover;
  object-position:center 55%;
}

/* Renovatie: behoud de volledige voor- en nafoto. */
.gallery-grid.gallery-stories[data-service="renovatie"] .gallery-photo { aspect-ratio:3 / 4; }
.service-gallery .gallery-story-copy .eyebrow { color:#806326; font-size:11px; line-height:1.5; margin-bottom:14px; }


/* Compactere voor- en nafoto's bij Renovatie. */
.gallery-grid.gallery-stories[data-service="renovatie"] .gallery-photo {
  max-width:380px;
  justify-self:start;
}
.gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story:nth-child(even) .gallery-photo {
  justify-self:end;
}
@media(max-width:700px) {
  .gallery-grid.gallery-stories[data-service="renovatie"] .gallery-photo,
  .gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story:nth-child(even) .gallery-photo {
    max-width:320px;
    justify-self:center;
  }
}


/* Renovatie: tekst sluit direct aan op de kleinere foto's. */
.gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story {
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:32px;
}
.gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story:nth-child(even) {
  grid-template-columns:minmax(0,1fr) minmax(0,380px);
}
.gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story:nth-child(even) .gallery-story-copy {
  justify-self:end;
}
@media(max-width:700px) {
  .gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story,
  .gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story:nth-child(even) {
    grid-template-columns:1fr;
    gap:18px;
  }
  .gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story-copy,
  .gallery-grid.gallery-stories[data-service="renovatie"] .gallery-story:nth-child(even) .gallery-story-copy {
    width:100%;
    max-width:320px;
    justify-self:center;
  }
}


/* Verbouwvideo: heldere titel boven de video, korte toelichting eronder. */
.service-video[hidden] { display:none; }
.service-video { width:100%; margin:44px 0 64px; }
.service-video-heading { margin-bottom:24px; }
.service-video-heading .eyebrow { color:#806326; margin:0 0 12px; }
.service-video-heading h3 { margin:0; color:var(--green); font-size:clamp(32px,4vw,46px); line-height:1.2; letter-spacing:-.03em; }
.service-video-media { position:relative; width:100%; max-width:100%; padding:0 64px; border:0; overflow:hidden; background:#000; }
.service-video-media video { display:block; width:auto; max-width:100%; height:auto; max-height:900px; margin:0 auto; object-fit:contain; }
.service-video-toggle { position:absolute; bottom:12px; right:12px; min-height:44px; padding:10px 16px; border:1px solid #f3efe580; border-radius:7px; background:#17201be6; color:#f3efe5; font:600 13px/1.4 'DM Sans',Arial,sans-serif; cursor:pointer; }
.service-video-toggle:hover { background:#17201b; }
.service-video-caption { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; margin-top:24px; }
.service-video-caption p { max-width:65ch; margin:0; color:#505950; font-size:17px; line-height:1.8; }
.service-video-caption .text-link { flex-shrink:0; margin-top:5px; color:var(--green); }
@media(max-width:800px) {
  .service-video { margin:32px 0 44px; }
  .service-video-heading { margin-bottom:20px; }
  .service-video-media { padding:0 24px; }
  .service-video-media video { max-height:720px; }
  .service-video-caption { flex-direction:column; gap:16px; margin-top:20px; }
  .service-video-caption p { font-size:16px; }
}

/* Videotekst in dezelfde kleuren als de overige dienstteksten. */
.service-video-heading .eyebrow, .service-video-heading h3 { color:var(--green); }
.service-video-caption p { color:#737b73; }

/* Titel en toelichting onder de video. */
.service-video-heading { margin:24px 0 0; }
.service-video-caption { margin-top:16px; }


/* Compacter videoblok; alle toelichting volgt onder de beelden. */
.service-video { max-width:900px; margin:28px auto 44px; }
.service-video-media video { max-height:540px; }
.service-video-heading h3 { font-size:clamp(28px,3vw,36px); }
@media(max-width:800px) {
  .service-video-media video { max-height:420px; }
}


/* Diensten: samenhangende introductie, video en fotoreeks. */
.service-introduction {
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  align-items:start;
  gap:clamp(28px,5vw,64px);
  padding-bottom:32px;
}
.service-introduction .gallery-heading { margin:0; }
.service-introduction .gallery-heading h2 { font-size:clamp(38px,4.5vw,58px); }
.service-introduction .service-description { max-width:65ch; margin:0; }
.service-introduction .service-description-intro { font-size:clamp(21px,2.4vw,28px); line-height:1.4; margin-bottom:16px; }
.service-introduction .service-description-detail { font-size:16px; line-height:1.85; margin:0; }
.service-video {
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  grid-template-areas:"media media" "heading caption";
  gap:28px clamp(28px,5vw,64px);
  width:100%;
  max-width:none;
  margin:0 0 48px;
}
.service-video-media { grid-area:media; }
.service-video-heading { grid-area:heading; margin:0; }
.service-video-heading .eyebrow { font-size:11px; margin-bottom:12px; }
.service-video-heading h3 { font-size:clamp(25px,2.8vw,32px); line-height:1.25; max-width:23ch; }
.service-video-caption { grid-area:caption; display:block; margin:0; }
.service-video-caption p { max-width:65ch; font-size:16px; line-height:1.85; color:#737b73; }
.service-gallery .gallery-count { margin:0 0 20px; }
@media(max-width:700px) {
  .service-introduction { grid-template-columns:1fr; gap:20px; padding-bottom:28px; }
  .service-video { grid-template-columns:1fr; grid-template-areas:"media" "heading" "caption"; gap:18px; margin-bottom:36px; }
}