/* Mobile-first overrides: less visual noise, larger tap targets and a shorter service list. */
.mobile-service-tools, .mobile-service-more { display: none; }
@media (max-width: 620px) {
  .customer-page .nav-inner { min-height: 64px; }
  .customer-page .hero { padding-block: 24px 20px; gap: 20px; }
  .customer-page .hero h1 { font-size: clamp(36px, 11vw, 44px); line-height: 1.05; margin: 16px 0 17px; }
  .customer-page .hero .lead { font-size: 15px; line-height: 1.55; }
  .customer-page .hero-copy .actions { margin: 20px 0 12px; }
  .customer-page .hero-copy .actions .btn { min-height: 48px; }
  .customer-page .hero-copy .actions .btn-outline {
    min-height: 42px;
    border: 0;
    padding: 7px 4px;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    background: transparent;
  }
  .customer-page .hero-copy > .micro,
  .customer-page .hero-copy > .ticks { display: none; }
  .customer-page .hero-copy > .intake-hint { display: block; font-size: 12px; line-height: 1.4; margin: 4px 0 10px; }
  .customer-page .hero-copy .price-message { margin: 15px 0 0; padding: 11px 13px; }
  .customer-page .hero .epc-hero { height: 225px; min-height: 225px; max-height: 225px; border-radius: 18px; }
  .customer-page .epc-hero-stamp { display: none; }
  .customer-page #diensten { padding-top: 14px; }
  .customer-page .services { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .customer-page .service {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 3px 13px;
    min-height: 0;
    padding: 14px;
    border-radius: 13px;
  }
  .customer-page .service .icon { grid-column: 1; grid-row: 1 / span 3; width: 42px; height: 42px; margin: 1px 0 0; }
  .customer-page .service h3 { grid-column: 2; margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
  .customer-page .service p { grid-column: 2; margin: 0; font-size: 12px; line-height: 1.45; }
  .customer-page .service-foot { grid-column: 2; margin-top: 3px; font-size: 11px; }
  .customer-page .service-foot span { font-size: 10px; }
  .customer-page .service-foot b { font-size: 17px; }
  .customer-page .service:hover { transform: none; }
  .mobile-service-tools { display: grid; gap: 8px; margin: 17px 0 16px; }
  .mobile-service-tools label { font-size: 13px; font-weight: 700; }
  .mobile-service-tools input {
    width: 100%; height: 49px; padding: 11px 14px;
    border: 1px solid #aab9a5; border-radius: 10px;
    background: white; color: var(--ink); font: inherit; font-size: 16px;
  }
  .mobile-service-tools input:focus-visible { outline: 3px solid #9e6b00; outline-offset: 2px; }
  .mobile-service-status { margin: 0; color: var(--muted); font-size: 12px; }
  .mobile-service-more {
    display: block; min-height: 44px; padding: 8px 0; margin: 12px 0 0;
    border: 0; background: none; color: var(--ink);
    font: inherit; font-size: 13px; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .mobile-service-more:focus-visible { outline: 3px solid #9e6b00; outline-offset: 3px; }
  .customer-page main > .section { padding-block: 30px; }
  .customer-page dialog[open] {
    width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh;
    margin: 0; inset: 0; border-radius: 0;
  }
  .customer-page .dialog-head { min-height: 64px; padding: 10px 16px; }
  .customer-page .dialog-head .close { width: 44px; height: 44px; flex: none; }
  .customer-page .dialog-body { padding: 20px 16px 28px; }
  /* The window form is the primary task on a phone; show the drawing afterwards. */
  .window-page .window-form { grid-row: 1; }
  .window-page .window-preview { grid-row: 2; }
  .window-page .window-form input,
  .window-page .window-form select { font-size: 16px; min-height: 48px; }
  .window-page .window-item-actions button { min-height: 44px; padding: 10px 6px; font-size: 14px; }
}
@media (max-width: 360px) {
  .customer-page .brand { font-size: 19px; }
  .customer-page .nav .btn { padding: 10px 9px; font-size: 11px; }
  .customer-page .hero h1 { letter-spacing: -1.5px; }
}
@media (hover: none) {
  .customer-page .service:hover .icon,
  .customer-page .service:hover .service-foot b { transform: none; box-shadow: none; }
}
@media print { .mobile-service-tools, .mobile-service-more { display: none; } }

/* A quiet first screen and a short, searchable list on the homepage. */
.customer-page .hero::before { inset: 0; }
.home-page .hero { padding-block: 50px 40px; }
.home-page .hero-copy .actions { margin: 21px 0 8px; }
.home-page .hero .lead { max-width: 510px; }
.home-page .hero-promise { width: fit-content; max-width: 100%; margin: 18px 0 0; padding: 14px 19px; border-left: 4px solid #bf8422; border-radius: 0 12px 12px 0; background: #fff0b9; color: var(--ink); box-shadow: 0 8px 24px rgb(25 50 46 / 7%); font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.035em; line-height: 1.22; }
.home-page .hero-promise strong, .home-page .hero-promise span { display: block; }
.home-page .hero-promise strong { font-weight: 800; }
.home-page .hero-visual.epc-hero { height: 395px; }
.home-page .mobile-service-tools { display: grid; grid-template-columns: 160px minmax(240px, 390px) 1fr; align-items: center; gap: 12px; margin: 16px 0 24px; }
.home-page .mobile-service-tools label { font-size: 14px; font-weight: 700; }
.home-page .mobile-service-tools input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #aab9a5; border-radius: 10px; background: white; color: var(--ink); font-size: 16px; }
.home-page .mobile-service-status { margin: 0; color: var(--muted); font-size: 12px; }
.home-page .mobile-service-status:empty { display: none; }
.home-page .mobile-service-more { display: inline-flex; align-items: center; min-height: 48px; margin-top: 15px; padding: 8px 0; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 800px) {
  .customer-page .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .customer-page .hero-visual { width: min(100%, 560px); }
  .home-page .hero { padding-block: 30px 18px; }
  .home-page .hero h1 { font-size: clamp(38px, 8vw, 52px); margin-block: 15px 17px; }
  .home-page .hero .lead { font-size: 16px; line-height: 1.5; }
  .home-page .hero-promise { margin-top: 15px; padding: 12px 15px; font-size: clamp(19px, 5vw, 24px); }
  .home-page .hero-visual { display: none; }
  .home-page #diensten { padding-top: 24px; }
  .home-page #diensten .section-top { display: block; margin-bottom: 10px; }
  .home-page #diensten .section-top p:last-child { margin-top: 8px; }
  .home-page .mobile-service-tools { grid-template-columns: 1fr; gap: 7px; margin: 16px 0; }
  .home-page .services { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .home-page .service { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 3px 13px; min-height: 0; padding: 15px; }
  .home-page .service .icon { grid-column: 1; grid-row: 1 / span 3; width: 42px; height: 42px; margin: 0; }
  .home-page .service h3 { grid-column: 2; margin: 0; font-size: 17px; }
  .home-page .service p { grid-column: 2; margin: 0; font-size: 12px; }
  .home-page .service-foot { grid-column: 2; margin-top: 3px; }
}
@media print { .home-page .mobile-service-tools, .home-page .mobile-service-more { display: none; } }

/* Keep the matching example visible on small screens as one compact card. */
@media (max-width: 800px) {
  .home-page .hero-visual.epc-hero { display: block; width: 100%; height: auto; min-height: 0; max-height: none; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .home-page .hero-visual.epc-hero > img,
  .home-page .hero-visual.epc-hero::after,
  .home-page .epc-hero-stamp,
  .home-page .epc-image-caption { display: none; }
  .home-page .hero-match-flow { position: relative; top: auto; left: auto; width: min(100%, 520px); min-width: 0; max-width: none; margin: 0; padding: 13px 15px; }
}

/* Three specialist routes remain prominent without turning the hero into a directory. */
.home-page .hero-experts { max-width: 540px; margin: 20px 0 0; padding: 15px 17px; background: #e9eee4; border: 1px solid #d4decc; border-left: 4px solid #e2ad3e; border-radius: 0 14px 14px 0; }
.home-page .hero-experts > strong { display: block; font-size: 13px; letter-spacing: .01em; margin-bottom: 9px; }
.home-page .hero-expert-links { display: flex; flex-wrap: wrap; gap: 7px; }
.home-page .hero-expert-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 8px 10px; background: white; border: 1px solid #ccd8c9; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.home-page .hero-expert-links a:hover { border-color: #788b60; text-decoration: none; }
.home-page .hero-expert-links a span { color: #758654; }
.home-page .all-projects-link { display: inline-block; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; color: var(--ink); }
@media (min-width: 801px) {
  .home-page .hero { padding-top: 32px; }
  .home-page .hero h1 { margin-block: 16px; }
  .home-page .hero-experts { margin-top: 12px; }
  .home-page .hero-promise { margin-top: 12px; }
  .home-page .hero-copy .actions { margin-top: 15px; }
}

.catalog-page .catalog-intro { max-width: 770px; padding: 32px 0 36px; }
.catalog-page .catalog-intro h1 { margin: 15px 0; }
.catalog-page .catalog-intro > p:not(.eyebrow):not(.catalog-status) { max-width: 610px; color: var(--muted); }
.catalog-page .catalog-intro label { display: block; margin: 26px 0 8px; font-size: 14px; font-weight: 700; }
.catalog-page .catalog-intro input { width: min(100%, 550px); min-height: 52px; padding: 11px 15px; border: 1px solid #aab9a5; border-radius: 10px; background: white; color: var(--ink); font-size: 16px; }
.catalog-page .catalog-status { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.catalog-page .catalog-group { padding: 26px 0 34px; border-top: 1px solid var(--line); }
.catalog-page .catalog-group h2 { margin: 0 0 19px; font-size: clamp(26px, 3vw, 37px); }
.catalog-page .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-page .catalog-card { position: relative; display: grid; gap: 5px; align-content: start; min-height: 105px; padding: 18px 42px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.catalog-page .catalog-card:hover { border-color: #839575; text-decoration: none; }
.catalog-page .catalog-card strong { font-size: 16px; }
.catalog-page .catalog-card span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.catalog-page .catalog-card b { position: absolute; right: 16px; top: 15px; font-size: 18px; font-weight: 400; }
.catalog-page .closing { margin-top: 30px; }
@media (max-width: 800px) {
  .home-page .hero-experts { padding: 13px 14px; margin-top: 15px; }
  .home-page .hero-expert-links a { min-height: 44px; }
  .catalog-page .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-page .hero-experts > strong { font-size: 12px; }
  .home-page .hero-expert-links { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .home-page .hero-expert-links a { width: 100%; padding: 7px 10px; }
  .catalog-page .catalog-intro { padding: 18px 0 27px; }
  .catalog-page .catalog-intro h1 { font-size: 39px; }
  .catalog-page .catalog-grid { grid-template-columns: 1fr; gap: 9px; }
  .catalog-page .catalog-card { min-height: 82px; padding: 13px 38px 13px 14px; }
  .catalog-page .catalog-group { padding: 25px 0; }
}

/* Homepage: one clear animation, followed by four compact service menus. */
.home-page .hero::before,
.home-page .hero-visual.epc-hero::after { display: none; }
.home-page .hero h1 em,
.home-page .hero-visual > img,
.home-page .epc-hero-stamp { animation: none; }
.home-page .hero-copy .hero-match-flow {
  position: relative; top: auto; left: auto;
  width: min(100%, 520px); min-width: 0;
  margin: 19px 0 0; padding: 16px 19px;
  border: 1px solid #d9e2d2; border-left: 4px solid #e0ac36;
  border-radius: 0 13px 13px 0;
  background: #fffef7; box-shadow: 0 8px 25px rgb(25 50 46 / 6%);
  backdrop-filter: none;
}
.home-page .hero-match-kicker { margin-bottom: 10px; font-size: 10px; letter-spacing: .09em; }
.home-page .hero-match-scenes { min-height: 35px; }
.home-page .hero-match-scene { gap: 12px; animation-timing-function: steps(1, end); }
.home-page .hero-match-node { gap: 8px; font-size: 14px; }
.home-page .hero-match-icon { width: 33px; height: 33px; }
.home-page .hero-match-icon svg { width: 19px; height: 19px; }
.home-page .hero-match-track { min-width: 30px; height: 3px; }
.home-page .hero-match-travel { top: -5px; width: 13px; height: 13px; }
.home-page .hero-promise { margin-top: 17px; padding: 10px 15px; font-size: clamp(17px, 1.8vw, 22px); }
.home-page .hero-promise strong,
.home-page .hero-promise span { display: inline; }
.home-page .hero-promise strong::after { content: " "; }
.home-page .home-finder { margin-top: 17px; }

.home-page #diensten { position: relative; z-index: 3; padding-block: 46px 65px; }
.home-page #diensten .section-top { margin-bottom: 20px; }
.home-page #diensten .section-top h2 { max-width: none; }
.home-page .service-finder { display: flex; align-items: center; gap: 15px; margin: 0 0 17px; }
.home-page .service-finder label { flex: none; font-size: 14px; font-weight: 700; }
.home-page .service-finder input { width: min(100%, 390px); min-height: 49px; padding: 10px 14px; border: 1px solid #b6c6b2; border-radius: 10px; background: white; color: var(--ink); font-size: 16px; }
.home-page .service-search-status { margin: 0; color: var(--muted); font-size: 12px; }
.home-page .service-search-status:empty { display: none; }
.home-page .service-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: start; }
.home-page .service-group { position: relative; min-width: 0; }
.home-page .service-group summary {
  display: flex; align-items: center; gap: 13px;
  min-height: 110px; padding: 16px;
  border: 1px solid #dbe3d6; border-radius: 14px;
  background: #fff; box-shadow: 0 5px 18px rgb(25 50 46 / 4%);
  cursor: pointer; list-style: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.home-page .service-group summary::-webkit-details-marker { display: none; }
.home-page .service-group summary::marker { content: ""; }
.home-page .service-group:is(:hover,[open]) summary { border-color: #a0b294; box-shadow: 0 10px 27px rgb(25 50 46 / 10%); }
.home-page .service-group summary:hover { transform: translateY(-2px); }
.home-page .service-group-art { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: #ecf2e9; color: #315c43; }
.home-page .service-group-art svg { width: 29px; height: 29px; }
.home-page .service-group:nth-child(2) .service-group-art { background: #fff0bf; color: #544018; }
.home-page .service-group:nth-child(3) .service-group-art { background: #e7f1f0; color: #285b60; }
.home-page .service-group-copy { display: grid; gap: 5px; min-width: 0; }
.home-page .service-group-copy strong { font-size: 17px; line-height: 1.25; }
.home-page .service-group-copy small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.home-page .service-group-arrow { flex: none; margin-left: auto; font-size: 21px; line-height: 1; color: #8a975f; transition: transform .2s; }
.home-page .service-group[open] .service-group-arrow { transform: rotate(45deg); }
.home-page .service-group-panel { position: absolute; z-index: 10; top: calc(100% + 7px); left: 0; width: max(100%, 300px); max-height: 420px; overflow-y: auto; padding: 8px; border: 1px solid #d6e0d0; border-radius: 13px; background: #fff; box-shadow: 0 18px 42px rgb(25 50 46 / 16%); }
.home-page .service-group:nth-child(3n) .service-group-panel { left: auto; right: 0; }
.home-page .service-group-intro { display: block; padding: 7px 10px 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.home-page .service-group-panel .service { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 45px; padding: 11px 10px; border: 0; border-top: 1px solid #edf0ea; border-radius: 0; box-shadow: none; background: white; transform: none; }
.home-page .service-group-panel .service:hover { background: #f3f7ee; border-color: #dbe5d7; box-shadow: none; transform: none; }
.home-page .service-group-panel .service::before,
.home-page .service-group-panel .service p,
.home-page .service-group-panel .service-foot span { display: none; }
.home-page .service-group-panel .service .icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 9px; background: #eaf0e5; }
.home-page .service-group-panel .service .icon svg { width: 20px; height: 20px; }
.home-page .service-group-panel .service h3 { margin: 0; font-size: 14px; line-height: 1.3; letter-spacing: 0; }
.home-page .service-group-panel .service-foot { margin: 0 0 0 auto; }
.home-page .service-group-panel .service-foot b { font-size: 18px; }

@media (max-width: 800px) {
  .home-page .hero-visual.epc-hero { display: none; }
  .home-page .service-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-page .service-group summary { min-height: 100px; }
  .home-page .service-group-panel { position: static; width: auto; max-height: none; margin-top: -5px; border-radius: 0 0 13px 13px; box-shadow: 0 7px 18px rgb(25 50 46 / 6%); }
}
@media (max-width: 620px) {
  .home-page .hero { padding-top: 27px; }
  .home-page .hero-copy .hero-match-flow { margin-top: 16px; padding: 13px 14px; }
  .home-page .hero-match-node { font-size: 12px; }
  .home-page .hero-match-icon { width: 27px; height: 27px; }
  .home-page .hero-match-icon svg { width: 16px; height: 16px; }
  .home-page .hero-match-scenes { min-height: 29px; }
  .home-page .hero-match-kicker { font-size: 9px; }
  .home-page .hero-promise { padding: 10px 12px; font-size: 17px; }
  .home-page .service-finder { display: grid; gap: 7px; }
  .home-page .service-finder input { width: 100%; }
  .home-page .service-groups { grid-template-columns: 1fr; gap: 9px; }
  .home-page .service-group summary { min-height: 82px; padding: 15px; }
  .home-page .service-group-copy strong { font-size: 16px; }
  .home-page #diensten { padding-block: 35px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .service-group summary,
  .home-page .service-group-arrow { transition: none; }
}

/* Keep the first screen focused on one choice. More work types appear on request. */
.home-page .hero{padding-bottom:22px}
.home-page .hero h1{font-size:clamp(39px,4.6vw,61px);margin:8px 0 0}
.home-page .hero-promise{display:block;width:auto;max-width:620px;margin:15px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#52674f;font:600 clamp(16px,1.6vw,20px)/1.4 Arial,Helvetica,sans-serif;letter-spacing:0}
.home-page .hero-promise strong{display:inline;font-weight:800;color:var(--ink)}
.home-page .hero-promise strong::after{content:none}
.home-page .home-finder{margin-top:21px;box-shadow:0 7px 20px rgb(25 50 46 / 5%)}
.home-page #diensten{padding:0 0 45px}
.home-page .service-disclosure{border:1px solid #dbe3d6;border-radius:14px;background:#fff;overflow:visible}
.home-page .service-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:72px;padding:16px 23px;cursor:pointer;list-style:none}
.home-page .service-disclosure>summary::-webkit-details-marker{display:none}
.home-page .service-disclosure>summary::marker{content:""}
.home-page .service-disclosure>summary strong{display:block;font-size:17px;line-height:1.3}
.home-page .service-disclosure>summary small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.home-page .service-disclosure>summary>span:first-child{min-width:0}
.home-page .service-disclosure-icons{display:flex;align-items:center;gap:6px;margin-left:auto}
.home-page .service-disclosure-icons .icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#edf2e9;color:#315c43}
.home-page .service-disclosure-icons .icon:nth-child(2){background:#fff0bf;color:#544018}
.home-page .service-disclosure-icons .icon svg{width:22px;height:22px}
.home-page .service-disclosure-arrow{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9eee4;color:#315c43;font-size:21px;line-height:1;transition:transform .2s}
.home-page .service-disclosure[open] .service-disclosure-arrow{transform:rotate(180deg)}
.home-page .service-disclosure-content{padding:18px 22px 21px;border-top:1px solid #e3e8df}
.home-page .service-all-projects{display:inline-block;margin-top:18px;color:#315c43;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
  .home-page .hero{padding:27px 0 18px}
  .home-page .hero h1{font-size:clamp(36px,9vw,44px);line-height:1.08}
  .home-page .hero-promise{margin-top:12px;font-size:16px}
  .home-page .home-finder{margin-top:17px}
  .home-page #diensten{padding:0 0 30px}
  .home-page .service-disclosure>summary{min-height:64px;padding:12px 16px}
  .home-page .service-disclosure-content{padding:15px}
  .home-page .service-disclosure-icons,
  .home-page .service-disclosure>summary small{display:none}
}
@media(prefers-reduced-motion:reduce){.home-page .service-disclosure-arrow{transition:none}}