/* VAYRO by NEXA — shared design system. Loaded LAST on every page (homepage and all inner pages, NL / BE / TR).
   One definition per component; pages must not restyle these locally.
   Components: Button (primary / secondary / compact), Navigation pill & CTA, Category pill, Card, Form controls, Status message, Tooltip. */
:root{
  --vb-gold:#d5a968;--vb-gold-soft:#e4be86;--vb-gold-dark:#a97d3e;
  --vb-ink:#111716;--vb-graphite:#1b211f;--vb-paper:#f3f1eb;
  --vb-line-gold:rgba(213,169,104,.5);--vb-line-dark:rgba(17,23,22,.16);--vb-line-light:rgba(255,255,255,.14);
  --vb-radius-pill:999px;--vb-radius-card:20px;--vb-radius-field:14px;
  --vb-shadow-gold:0 10px 24px -14px rgba(213,169,104,.75);
  --vb-ease:.28s ease;
  --header-h:72px;
}

/* ---------------------------------------------------------------- Button
   Primary = gold capsule (main action). Secondary = transparent/dark capsule with a fine gold outline (supporting action).
   .btn / .btn-primary / .btn-outline are the homepage names of the same components. */
.button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;min-height:48px;padding:12px 26px;
  border:1px solid transparent;border-radius:var(--vb-radius-pill);font:600 14.5px/1.25 "DM Sans",Arial,sans-serif;letter-spacing:.01em;text-align:center;text-decoration:none;cursor:pointer;
  transition:background var(--vb-ease),border-color var(--vb-ease),color var(--vb-ease),box-shadow .3s ease,transform var(--vb-ease)}
.button-primary,.btn-primary{background:var(--vb-gold);border-color:var(--vb-gold);color:var(--vb-ink);box-shadow:var(--vb-shadow-gold)}
.button-primary:hover,.button-primary:focus-visible,.btn-primary:hover,.btn-primary:focus-visible{background:var(--vb-gold-soft);border-color:var(--vb-gold-soft);color:var(--vb-ink);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(213,169,104,.3),0 14px 28px -12px rgba(213,169,104,.6)}
.button-ghost,.btn-outline{background:rgba(17,23,22,.42);border-color:var(--vb-line-gold);color:#fff}
.button-ghost:hover,.button-ghost:focus-visible,.btn-outline:hover,.btn-outline:focus-visible{background:rgba(213,169,104,.1);border-color:var(--vb-gold);color:var(--vb-gold);transform:translateY(-1px)}
.button:active,.btn:active{transform:translateY(0)}
.button:focus-visible,.btn:focus-visible{outline:2px solid #f0d8a9;outline-offset:3px}
.button[disabled],.button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
/* secondary button on a light section (category chips under a heading) */
.button-ghost.cat-chip{background:transparent;border-color:rgba(169,125,62,.55);color:var(--vb-ink);min-height:44px;padding:10px 22px}
.button-ghost.cat-chip:hover,.button-ghost.cat-chip:focus-visible{background:rgba(169,125,62,.1);border-color:var(--vb-gold-dark);color:var(--vb-ink)}
/* form submit: full-width capsule */
.form-submit{width:100%}

/* ---------------------------------------------------------------- Compact buttons (header, sub-navigation, footer)
   Same look as .button, smaller. */
.primary-nav>a.nav-cta,.subnav .subnav-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:0 26px;
  border-radius:var(--vb-radius-pill);background:var(--vb-gold);border:1px solid var(--vb-gold);color:var(--vb-ink);
  font:600 14.5px/1 "DM Sans",Arial,sans-serif;letter-spacing:.01em;text-align:center;white-space:nowrap;box-shadow:var(--vb-shadow-gold);
  transition:background var(--vb-ease),border-color var(--vb-ease),box-shadow .3s ease,transform var(--vb-ease)}
.subnav .subnav-cta{min-height:38px;padding:0 20px;font-size:13.5px;margin-left:auto}
.primary-nav>a.nav-cta::after{content:none;display:none}
.primary-nav>a.nav-cta:hover,.primary-nav>a.nav-cta:focus-visible,.subnav .subnav-cta:hover,.subnav .subnav-cta:focus-visible{background:var(--vb-gold-soft);border-color:var(--vb-gold-soft);color:var(--vb-ink);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(213,169,104,.35),0 14px 30px -12px rgba(213,169,104,.65)}
.primary-nav>a.nav-cta:active,.subnav .subnav-cta:active{transform:translateY(0)}
.primary-nav>a.nav-cta:focus-visible,.subnav .subnav-cta:focus-visible{outline:2px solid #f0d8a9;outline-offset:3px}
.footer-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:0 24px;border-radius:var(--vb-radius-pill);
  background:rgba(17,23,22,.42);border:1px solid var(--vb-line-gold);color:#f1ede4;font:500 14px/1 "DM Sans",Arial,sans-serif;text-align:center;white-space:nowrap;
  transition:background var(--vb-ease),border-color var(--vb-ease),color var(--vb-ease),transform var(--vb-ease)}
.footer-cta:hover,.footer-cta:focus-visible{background:rgba(213,169,104,.1);border-color:var(--vb-gold);color:var(--vb-gold);transform:translateY(-1px)}

/* ---------------------------------------------------------------- Category pill / navigation pill
   (hero category pills, dropdown bubbles and form choice pills share radius, outline and hover) */
.hero-pills a,.pill-group span{border-radius:var(--vb-radius-pill)}
.pill-group span{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border:1px solid rgba(17,23,22,.2);background:#fff;font:500 14px/1.2 "DM Sans",Arial,sans-serif;
  transition:background var(--vb-ease),border-color var(--vb-ease),color var(--vb-ease)}
.pill-group label:hover span{border-color:var(--vb-gold-dark)}
.pill-group input:checked+span{background:var(--vb-ink);color:#fff;border-color:var(--vb-ink);box-shadow:inset 0 0 0 1px rgba(213,169,104,.55)}

/* ---------------------------------------------------------------- Cards (solution / service / project / form / empty state)
   Separate rounded cards with the same radius, outline and hover on every page. */
.cat-grid,.sol-grid{border:0;gap:16px}
.cat-card,.sol-card{border:1px solid var(--vb-line-dark);border-radius:var(--vb-radius-card);background:rgba(255,255,255,.55);transition:background var(--vb-ease),border-color var(--vb-ease),transform var(--vb-ease),box-shadow .3s ease}
.cat-card:hover{border-color:rgba(169,125,62,.5);transform:translateY(-2px);box-shadow:0 18px 36px -26px rgba(17,23,22,.35)}
.cat-section.dark .cat-card,.sol-card{border-color:var(--vb-line-light);background:rgba(255,255,255,.025)}
.cat-section.dark .cat-card:hover,.sol-card:hover{background:var(--vb-graphite);border-color:var(--vb-line-gold);transform:translateY(-2px);box-shadow:0 18px 36px -26px rgba(0,0,0,.7)}
.sol-card.sol-cta{background:var(--vb-gold);border-color:var(--vb-gold)}
.sol-card.sol-cta:hover{background:var(--vb-gold-soft);border-color:var(--vb-gold-soft)}
.project-tile,.projects-empty,.page-hero-media,.page-hero-mark{border-radius:var(--vb-radius-card);overflow:hidden}
.page-hero-media>span{border-radius:var(--vb-radius-pill);padding:7px 13px}
.inquiry-form{border-radius:24px}
.form-mode{border-radius:var(--vb-radius-field);border-left-width:1px;border:1px solid rgba(169,125,62,.4)}

/* ---------------------------------------------------------------- Form controls */
.inquiry-form input:not([type=checkbox]):not([type=radio]),.inquiry-form textarea,.inquiry-form select{
  border:1px solid #cdd0cc;border-radius:var(--vb-radius-field);background:#fcfbf8;padding:13px 16px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.inquiry-form input:not([type=checkbox]):not([type=radio]):hover,.inquiry-form textarea:hover,.inquiry-form select:hover{border-color:#b9bdb8}
.inquiry-form input:not([type=checkbox]):not([type=radio]):focus,.inquiry-form textarea:focus,.inquiry-form select:focus{
  border-color:var(--vb-gold-dark);background:#fff;box-shadow:0 0 0 3px rgba(213,169,104,.22)}
.inquiry-form select{padding-right:44px;background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%}
.inquiry-form input::placeholder,.inquiry-form textarea::placeholder{color:#9aa09b}
.inquiry-form input[type=file]{padding:10px 12px;border-style:dashed}
.inquiry-form input[type=file]::file-selector-button{margin-right:14px;padding:8px 16px;border:1px solid rgba(169,125,62,.55);border-radius:var(--vb-radius-pill);background:transparent;color:var(--vb-ink);font:600 13px/1 "DM Sans",Arial,sans-serif;cursor:pointer;transition:background .25s ease,border-color .25s ease}
.inquiry-form input[type=file]::file-selector-button:hover{background:rgba(169,125,62,.1);border-color:var(--vb-gold-dark)}
.inquiry-form .consent input{border-radius:5px}

/* ---------------------------------------------------------------- Status messages (error / success / info) */
.inquiry-form .form-error{margin:0 0 16px;padding:12px 16px;border:1px solid rgba(138,47,47,.35);border-radius:var(--vb-radius-field);background:rgba(138,47,47,.06);color:#7b2a2a;font-size:13.5px;line-height:1.5}
.form-status .status-box{margin-top:10px;padding:16px 18px;border:1px solid rgba(169,125,62,.45);border-radius:var(--vb-radius-field);background:#f6f1e6;color:var(--vb-ink)}
.form-status textarea{border:1px solid #cdd0cc;border-radius:var(--vb-radius-field);padding:12px 14px;background:#fff}
.form-status pre{border-radius:var(--vb-radius-field)}
.file-list li.bad{color:#7b2a2a}

/* ---------------------------------------------------------------- Tooltip (any element with data-tip)
   Dark translucent bubble, fine gold outline, soft shadow, gentle fade. Used by the language selector. */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);z-index:80;transform:translate(-50%,-4px);
  padding:7px 13px;border-radius:var(--vb-radius-pill);background:rgba(17,23,22,.9);border:1px solid rgba(213,169,104,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 28px -12px rgba(0,0,0,.85);
  color:#f3ead8;font:500 12px/1 "DM Sans",Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(hover:none){[data-tip]::after{display:none}}

/* ---------------------------------------------------------------- phones */
@media(max-width:1000px){
  .primary-nav>a.nav-cta{width:100%;min-height:48px;margin-top:14px;padding:0 20px;font-size:15px}
}
@media(max-width:700px){
  .button,.btn{min-height:48px;padding:12px 22px}
  .page-hero .hero-actions,.cta-band .cta-actions,.hero-actions{gap:10px}
  .inquiry-form{border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.button,.btn,.nav-cta,.cat-card,.sol-card,[data-tip]::after{transition:none!important;transform:none!important}}

/* Contact cards (e-mail / phone / area): three separate rounded cards, like every other card */
.contact-cards{border:0;gap:16px}
.contact-cards>*{border:1px solid var(--vb-line-dark);border-radius:var(--vb-radius-card);background:rgba(255,255,255,.55);transition:border-color var(--vb-ease),transform var(--vb-ease),box-shadow .3s ease}
.contact-cards>a:hover{border-color:rgba(169,125,62,.5);transform:translateY(-2px);box-shadow:0 18px 36px -26px rgba(17,23,22,.35)}
@media(max-width:1000px){.contact-cards{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- Header bar (all pages)
   Slim bar (--header-h), visually separated from the page by a dark translucent band and a fine gold line. */
@media(max-width:700px){:root{--header-h:64px}}
.site-header{background:rgba(12,17,16,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(213,169,104,.22)}
.primary-nav>a.nav-cta{min-height:40px;padding:0 22px;font-size:14px}

/* ---------------------------------------------------------------- Compact button size (.btn-sm / .button-sm) */
.btn-sm,.button-sm{min-height:42px;padding:0 22px;font-size:14px}

/* ---------------------------------------------------------------- Dropdown bubbles, compact (opens under its trigger) */
.primary-nav .nav-panel{gap:6px;margin-top:18px;min-width:268px}
.primary-nav .nav-panel a{min-height:42px;padding:8px 16px 8px 14px;font-size:13.5px;gap:11px}
.primary-nav .nav-panel a .ni{width:18px;height:18px}
@media(max-width:1000px){.primary-nav .nav-panel a{min-height:46px;font-size:14.5px}}

/* ---------------------------------------------------------------- Page header (all inner pages, NL / BE / TR)
   One compact header band: slim padding, smaller white/gold heading, short lead, capsule buttons; the real content starts right below. */
.page-hero{padding:calc(var(--header-h) + clamp(26px,3vw,40px)) 0 clamp(30px,3vw,42px)}
.page-hero-inner{gap:5%;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.page-hero-inner.no-media{grid-template-columns:minmax(0,1fr)}
.crumbs{margin:0 0 14px;gap:8px;font-size:11.5px}
.page-hero .eyebrow{margin:0 0 10px}
.page-hero h1{font-size:clamp(32px,3.9vw,54px);line-height:1.05}
.page-hero .lead{max-width:680px;margin:14px 0 20px;font-size:clamp(15px,1.15vw,17px);line-height:1.65}
.page-hero .hero-actions{gap:10px}
.page-hero .hero-actions .button{min-height:44px;padding:10px 22px;font-size:14px}
.page-hero-media img,.page-hero-mark{aspect-ratio:16/10}
.page-hero-mark b{font-size:clamp(54px,6vw,92px)}
.page-hero-mark span{margin-top:-2px}
.page-hero-media.contain img{padding:12px}
/* the content under the header starts higher */
.page-hero+.section,.subnav+.section{padding-top:clamp(40px,4.5vw,64px)}
@media(max-width:1000px){
  .page-hero-inner{grid-template-columns:1fr;gap:24px}
  .page-hero-media,.page-hero-mark{max-width:520px}
  .page-hero-media img,.page-hero-mark{aspect-ratio:16/9}
}
@media(max-width:700px){
  .page-hero{padding:calc(var(--header-h) + 22px) 0 28px}
  .page-hero h1{font-size:clamp(28px,8vw,36px)}
  .page-hero .lead{font-size:15px;margin:12px 0 18px}
  .crumbs{margin-bottom:12px}
}
@media(max-width:700px){.page-hero-media,.page-hero-mark{max-width:none}.page-hero-media img,.page-hero-mark{aspect-ratio:2.2/1}.page-hero-mark b{font-size:48px}}
/* sub-navigation: the compact CTA is hidden on tablet and phone, where the header menu carries it */
@media(max-width:1000px){.subnav .subnav-cta{display:none}}
.page-hero-media img{height:auto}

/* Gallery strip on category pages (e.g. Bouwmaterialen) */
.bm-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.bm-gallery figure{margin:0;aspect-ratio:3/4;border-radius:var(--vb-radius-card,20px);overflow:hidden;border:1px solid rgba(17,23,22,.12);background:#e8e6df}
.bm-gallery img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.bm-gallery{grid-template-columns:1fr 1fr;gap:10px}.bm-gallery figure:last-child{grid-column:1 / -1;aspect-ratio:4/3}}

/* Partner projects (Projecten page): same tile as the project grid, caption with place and partner */
.partner-projects{grid-template-columns:repeat(3,1fr);gap:18px}
.partner-projects .project-tile{aspect-ratio:4/3;min-height:0}
.partner-projects .project-tile img{height:100%;min-height:0}
@media(max-width:1000px){.partner-projects{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.partner-projects{grid-template-columns:1fr}}
.partner-projects .project-tile figcaption{padding:90px 20px 18px}
.partner-projects .project-tile figcaption span{display:inline-block;padding:6px 11px;border-radius:999px;background:rgba(17,23,22,.82);border:1px solid rgba(213,169,104,.4);color:#f0d8a9;font-size:9.5px;letter-spacing:.12em}
.partner-projects .project-tile figcaption h3{margin-top:10px}
.partner-projects.cat-gallery .project-tile{aspect-ratio:3/2}