.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form-feedback{margin:16px 0;padding:12px;border-radius:8px;background:#f1e9fb;color:#4d1f80;font-size:14px}
.form-feedback:empty{display:none}
.form-feedback[data-error="true"]{background:#fff1f2;color:#9f1239}
.nav-burger{cursor:pointer}
.mobile-quote-link{display:none}
@media(max-width:980px){.mobile-quote-link{display:block}}
:focus-visible{outline:3px solid #8b4dd6;outline-offset:4px}
@media(max-width:980px){
  .nav .nav-inner{position:relative;flex-wrap:nowrap;gap:12px}
  .nav .nav-right{margin-left:auto}
  .nav .nav-right .lang-toggle{display:flex!important}
  .nav .nav-burger{display:flex!important}
  .nav .nav-links{display:none!important}
  .nav .nav-links.is-open{display:flex!important;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:white;padding:16px;box-shadow:0 12px 24px #0002;border-radius:0 0 10px 10px;z-index:100}
  .nav .nav-links.is-open a{color:#3f3f3f!important;padding:12px}
}
@media(max-width:520px){.nav .nav-right{gap:8px}.nav .btn-cta{display:none}.nav .nav-logo{flex-shrink:0}.nav .nav-logo img{max-width:110px;height:auto;max-height:38px}.nav .nav-burger{flex-shrink:0;width:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1!important;transform:none!important}}

/* ===================================================================
   Neumorphic zones
   -------------------------------------------------------------------
   This treatment needs the surface under a control to be GREY. Its
   highlight is pure white, so on the site's white pages there is
   nothing for that highlight to catch and the effect collapses into a
   one-sided tilt. So it is scoped to panels that set their own grey
   surface — the filter sidebar, the pager tray, the form cards — and
   the rest of the site stays white.

   Contrast on #ebe8f2, measured: ink 14.4:1, ink-2 7.3:1, brand 6.7:1.
   The muted grey used for placeholders elsewhere only reaches 2.9:1
   here, so .neu redefines it.
   =================================================================== */
.neu{
  --neu-surface:#ebe8f2;
  --neu-hi:#ffffff;
  --neu-lo:rgba(106,45,175,.28);
  --neu-muted:#686874;              /* 4.54:1 on the surface */
  --neu-rim:rgba(255,255,255,.55);
  --neu-up:-5px -3px 14px 0 var(--neu-hi), 5px 4px 16px 0 var(--neu-lo);
  --neu-up-sm:-3px -2px 8px 0 var(--neu-hi), 3px 2px 9px 0 var(--neu-lo);
  --neu-carved:inset 3px 3px 8px 0 rgba(106,45,175,.22), inset -3px -3px 8px 0 var(--neu-hi);
  background:var(--neu-surface);
  border:none;
  border-radius:20px;
}

/* Raised control inside a .neu panel. Hover shrinks the shadow rather
   than growing it — the control settles toward the surface instead of
   lifting off it, which is what makes the material read as one piece. */
.neu .neu-btn{
  background:var(--neu-surface);
  border:2px solid var(--neu-rim);
  border-radius:999px;
  color:var(--brand);
  box-shadow:var(--neu-up);
  transition:box-shadow .22s cubic-bezier(.2,.8,.2,1), color .22s, background-color .22s;
}
.neu .neu-btn:hover{box-shadow:var(--neu-up-sm);color:var(--brand-dark)}
.neu .neu-btn:active,
.neu .neu-btn[aria-current="page"],
.neu .neu-btn.active{
  color:var(--brand-dark);
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--neu-carved);
}
.neu .neu-btn:disabled{opacity:.42;box-shadow:var(--neu-up-sm);cursor:not-allowed}

/* --- pager tray (news) --------------------------------------------- */
.pagination.neu{
  width:max-content;justify-self:center;
  padding:9px 11px;gap:8px;border-radius:999px;
  box-shadow:inset 2px 2px 6px rgba(106,45,175,.18), inset -2px -2px 6px var(--neu-hi);
}
.pagination.neu .pg-btn{
  background:var(--neu-surface);
  border:2px solid var(--neu-rim);
  border-radius:999px;
  color:var(--brand);
  box-shadow:var(--neu-up-sm);
  transition:box-shadow .22s cubic-bezier(.2,.8,.2,1), color .22s, background-color .22s;
}
.pagination.neu .pg-btn:hover:not(:disabled){box-shadow:-2px -1px 5px var(--neu-hi), 2px 1px 6px var(--neu-lo)}
.pagination.neu .pg-btn.active{
  background:var(--neu-surface);color:var(--brand-dark);
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--neu-carved);
}
.pagination.neu .pg-btn:disabled{opacity:.4;box-shadow:none;border-color:rgba(255,255,255,.3)}

/* --- filter sidebar (products) ------------------------------------- */
.filters.neu{
  padding:26px;
  border:2px solid var(--neu-rim);
  box-shadow:var(--neu-up);
}
/* a groove rather than a line: shadow above, highlight below */
.filters.neu .filter-group{
  border-bottom:1px solid rgba(106,45,175,.14);
  box-shadow:0 1px 0 0 var(--neu-hi);
}
.filters.neu .filter-group:last-child{border-bottom:none;box-shadow:none}
.filters.neu .filters-clear,
.filters.neu .clear{color:var(--brand)}
/* unchecked reads as a hole in the surface, checked as a raised key */
.filters.neu .filter-opt input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:7px;flex-shrink:0;
  background:var(--neu-surface);position:relative;margin:0;
  box-shadow:inset 2px 2px 5px rgba(106,45,175,.26), inset -2px -2px 5px var(--neu-hi);
  transition:box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .2s;
}
.filters.neu .filter-opt input[type="checkbox"]:checked{
  background:var(--brand);
  box-shadow:-2px -1px 6px var(--neu-hi), 2px 2px 7px rgba(106,45,175,.42);
}
.filters.neu .filter-opt input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:6.5px;top:3px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* --- form cards (quote, contact) ----------------------------------- */
.form-card.neu,
.form-section.neu{
  padding:40px;
  border:2px solid var(--neu-rim);
  box-shadow:var(--neu-up);
}
.neu .field input,
.neu .field select,
.neu .field textarea{
  background:var(--neu-surface);
  border:none;
  border-radius:12px;
  color:var(--ink);
  box-shadow:inset 3px 3px 7px rgba(106,45,175,.20), inset -3px -3px 7px var(--neu-hi);
  transition:box-shadow .2s cubic-bezier(.2,.8,.2,1);
}
.neu .field input:focus,
.neu .field select:focus,
.neu .field textarea:focus{
  box-shadow:inset 3px 3px 7px rgba(106,45,175,.26), inset -3px -3px 7px var(--neu-hi),
             0 0 0 3px rgba(106,45,175,.20);
}
.neu .field input::placeholder,
.neu .field textarea::placeholder{color:var(--neu-muted)}
.neu .hint,
.neu .form-note{color:var(--neu-muted)}
.neu .btn-submit{
  border:2px solid rgba(255,255,255,.28);
  border-radius:999px;
  box-shadow:-5px -3px 14px 0 var(--neu-hi), 5px 5px 18px 0 rgba(106,45,175,.45);
  transition:box-shadow .22s cubic-bezier(.2,.8,.2,1), background-color .22s;
}
.neu .btn-submit:hover{
  transform:none;
  box-shadow:-3px -2px 8px 0 var(--neu-hi), 3px 3px 11px 0 rgba(106,45,175,.52);
}
.neu .btn-submit:active{
  box-shadow:inset 3px 3px 9px 0 rgba(0,0,0,.34), inset -2px -2px 7px 0 rgba(255,255,255,.18);
}

@media (prefers-reduced-motion:reduce){
  .neu .neu-btn,.neu .pg-btn,.neu .field input,.neu .field select,
  .neu .field textarea,.neu .btn-submit{transition:none!important}
}

/* The quote form hides the real input and draws .check-box instead, so the
   control to restyle here is that span, not the input. */
.neu .prod-check{
  background:var(--neu-surface);
  border:none;border-radius:14px;
  box-shadow:var(--neu-up-sm);
  transition:box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
.neu .prod-check:hover{background:var(--neu-surface);box-shadow:var(--neu-up)}
/* a picked option settles into the surface rather than changing colour */
.neu .prod-check:has(input:checked){background:var(--neu-surface);box-shadow:var(--neu-carved)}
.neu .check-box{
  background:var(--neu-surface);border:none;
  box-shadow:inset 2px 2px 5px rgba(106,45,175,.26), inset -2px -2px 5px var(--neu-hi);
  transition:box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .2s;
}
.neu .prod-check input:checked ~ .check-box{
  background:var(--brand);
  box-shadow:-2px -1px 6px var(--neu-hi), 2px 2px 7px rgba(106,45,175,.42);
}
.neu .check-sub{color:var(--neu-muted)}

/* ===================================================================
   Quote CTA — an outline pill that fills from the centre on hover
   -------------------------------------------------------------------
   Two notes on the original this is adapted from:

   * its ::before is z-index:-1 while the button is only
     `position:relative`, which does NOT open a stacking context. The
     circle then paints behind the nearest ancestor that does — so on a
     nav or a banner with a background it simply never appears.
     `isolation:isolate` keeps it inside the button.
   * its circle is 50px scaled 3x = 150px across, narrower than these
     buttons, so the corners never filled. A fixed size cannot serve both
     a 170px nav pill and a 370px banner button at once, so the circle is
     as wide as the button and scales past it.

   Contrast, measured: brand on white 8.05:1, white on the brand fill
   8.05:1, white on the banner gradient 9.62:1, brand-dark on the white
   fill 11.52:1.
   =================================================================== */
.q-cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;line-height:1;white-space:nowrap;
  font-weight:700;
  color:var(--brand,#6A2DAF);
  background-color:transparent;
  border:2px solid var(--brand,#6A2DAF);
  box-shadow:none;
  transition:color .35s cubic-bezier(.23,1,.32,1),
             scale .35s cubic-bezier(.23,1,.32,1),
             box-shadow .35s cubic-bezier(.23,1,.32,1),
             border-color .35s cubic-bezier(.23,1,.32,1);
}
.q-cta::before{
  content:'';position:absolute;inset:0;margin:auto;
  width:100%;aspect-ratio:1;border-radius:50%;
  scale:0;z-index:-1;
  background-color:var(--brand,#6A2DAF);
  transition:scale .6s cubic-bezier(.23,1,.32,1);
}
.q-cta:hover::before,
.q-cta:focus-visible::before{scale:1.6}
.q-cta:hover,
.q-cta:focus-visible{color:#fff;scale:1.05;box-shadow:0 0 20px rgba(106,45,175,.40)}
.q-cta:active{scale:1}
.q-cta svg{transition:transform .35s cubic-bezier(.23,1,.32,1)}
.q-cta:hover svg{transform:translateX(3px)}

/* on a photo or a dark banner the outline inverts */
.q-cta-inv{color:#fff;border-color:rgba(255,255,255,.85)}
.q-cta-inv::before{background-color:#fff}
.q-cta-inv:hover,
.q-cta-inv:focus-visible{color:var(--brand-dark,#4d1f80);box-shadow:0 0 22px rgba(255,255,255,.35)}

/* --- nav: transparent over the hero, white once scrolled ----------- */
.nav .btn-cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 24px;border-radius:999px;
  background-color:transparent;box-shadow:none;
  color:#fff;border:2px solid rgba(255,255,255,.85);
  transition:color .35s cubic-bezier(.23,1,.32,1),
             scale .35s cubic-bezier(.23,1,.32,1),
             box-shadow .35s cubic-bezier(.23,1,.32,1),
             border-color .35s cubic-bezier(.23,1,.32,1),
             padding .3s ease;
}
.nav .btn-cta::before{
  content:'';position:absolute;inset:0;margin:auto;
  width:100%;aspect-ratio:1;border-radius:50%;
  scale:0;z-index:-1;background-color:#fff;
  transition:scale .6s cubic-bezier(.23,1,.32,1), background-color .3s ease;
}
.nav .btn-cta:hover::before,
.nav .btn-cta:focus-visible::before{scale:1.6}
/* a smaller lift here — the nav row is tight and 1.1 collided with the
   language toggle at tablet widths */
.nav .btn-cta:hover,
.nav .btn-cta:focus-visible{color:var(--brand-dark);scale:1.04;box-shadow:0 0 20px rgba(255,255,255,.3)}
.nav .btn-cta:active{scale:1}

.nav.scrolled .btn-cta{color:var(--brand);border-color:var(--brand)}
.nav.scrolled .btn-cta::before{background-color:var(--brand)}
.nav.scrolled .btn-cta:hover,
.nav.scrolled .btn-cta:focus-visible{color:#fff;box-shadow:0 0 20px rgba(106,45,175,.40)}
/* the quote page's own nav entry stays filled, it marks the current page */
.nav .btn-cta.active::before{scale:1.6}
.nav .btn-cta.active{color:#fff}
.nav.scrolled .btn-cta.active{color:#fff;border-color:var(--brand)}

/* --- closing CTA banners (index, news) — both sit on dark ---------- */
.cta-banner-right .btn-primary,
.cta-band-right .btn-primary-white{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:999px;background-color:transparent;box-shadow:none;
  color:#fff;border:2px solid rgba(255,255,255,.85);
  transition:color .35s cubic-bezier(.23,1,.32,1),
             scale .35s cubic-bezier(.23,1,.32,1),
             box-shadow .35s cubic-bezier(.23,1,.32,1);
}
.cta-banner-right .btn-primary::before,
.cta-band-right .btn-primary-white::before{
  content:'';position:absolute;inset:0;margin:auto;
  width:100%;aspect-ratio:1;border-radius:50%;
  scale:0;z-index:-1;background-color:#fff;
  transition:scale .6s cubic-bezier(.23,1,.32,1);
}
.cta-banner-right .btn-primary:hover::before,
.cta-banner-right .btn-primary:focus-visible::before,
.cta-band-right .btn-primary-white:hover::before,
.cta-band-right .btn-primary-white:focus-visible::before{scale:1.6}
.cta-banner-right .btn-primary:hover,
.cta-banner-right .btn-primary:focus-visible,
.cta-band-right .btn-primary-white:hover,
.cta-band-right .btn-primary-white:focus-visible{
  color:var(--brand-dark);transform:none;scale:1.05;
  box-shadow:0 0 22px rgba(255,255,255,.35);
}
.cta-banner-right .btn-primary:active,
.cta-band-right .btn-primary-white:active{scale:1}

@media (prefers-reduced-motion:reduce){
  .q-cta,.nav .btn-cta,.cta-banner-right .btn-primary,.cta-band-right .btn-primary-white{
    transition:color .01ms,border-color .01ms!important;
  }
  .q-cta:hover,.nav .btn-cta:hover,
  .cta-banner-right .btn-primary:hover,.cta-band-right .btn-primary-white:hover{scale:1}
  .q-cta::before,.nav .btn-cta::before,
  .cta-banner-right .btn-primary::before,.cta-band-right .btn-primary-white::before{
    transition:none!important;
  }
}

/* The mobile hide for this button lives further up in this file. These rules
   come later at the same specificity, so they win on source order and the
   button reappeared at 390px — pushing the burger 34px off-screen. Restate it. */
@media (max-width:520px){
  .nav .btn-cta{display:none}
}

/* --- hero CTA ------------------------------------------------------
   Same fill, but the hero is a photo carousel of four slides, so an
   outline alone is a gamble: white text reads over the dark cabinets on
   one slide and washes out over a bright sunset on the next. A faint
   darkened, blurred backdrop rides under the pill so the label holds on
   every slide while the button still reads as an outline. */
.hx-cta{
  /* position stays with each page: the live hero pins this bottom-right,
     the parked draft lets it sit in the flow under the copy. Declaring it
     here would rip the draft's button out of its row. */
  isolation:isolate;overflow:hidden;
  background-color:rgba(10,8,20,.30);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  backdrop-filter:blur(8px) saturate(1.2);
  color:#fff;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:none;
  transition:color .35s cubic-bezier(.23,1,.32,1),
             scale .35s cubic-bezier(.23,1,.32,1),
             box-shadow .35s cubic-bezier(.23,1,.32,1),
             background-color .35s cubic-bezier(.23,1,.32,1);
}
.hx-cta::before{
  content:'';position:absolute;inset:0;margin:auto;
  width:100%;aspect-ratio:1;border-radius:50%;
  scale:0;z-index:-1;background-color:#fff;
  transition:scale .6s cubic-bezier(.23,1,.32,1);
}
.hx-cta:hover::before,
.hx-cta:focus-visible::before{scale:1.6}
.hx-cta:hover,
.hx-cta:focus-visible{
  color:var(--brand-dark,#4d1f80);
  background-color:transparent;
  transform:none;scale:1.05;
  box-shadow:0 0 26px rgba(255,255,255,.4);
}
.hx-cta:active{scale:1}
/* the badge is the accent, so it flips the other way: quiet at rest,
   brand purple once the pill has filled */
.hx-cta .hx-cta-arrow{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  transition:background-color .35s cubic-bezier(.23,1,.32,1),
             border-color .35s cubic-bezier(.23,1,.32,1),
             transform .35s cubic-bezier(.23,1,.32,1);
}
.hx-cta:hover .hx-cta-arrow,
.hx-cta:focus-visible .hx-cta-arrow{
  background:var(--brand,#6A2DAF);
  border-color:var(--brand,#6A2DAF);
  color:#fff;transform:translateX(3px);
}

@media (prefers-reduced-motion:reduce){
  .hx-cta{transition:color .01ms!important}
  .hx-cta::before{transition:none!important}
  .hx-cta:hover{scale:1}
}

/* ===================================================================
   One button shape
   -------------------------------------------------------------------
   The quote CTA, the neumorphic panels and the hero are settled above.
   What was left was eleven unrelated styles across five pages: three
   radii (8px, 10px, 999px), eight padding pairs, four type sizes and
   four different hover moves, for what is all the same control.

   These are all buttons, so they get one shape, one type scale and one
   hover law. Colour is the only thing that varies, and the catalogue
   cards no longer vary it by category — the card and its badge already
   carry that, so the button repeating it only fought the brand.
   =================================================================== */
.btn-outline,
.btn-back,
.prod-foot .btn,
.pg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;
  font-weight:700;line-height:1;white-space:nowrap;
  transition:background-color .25s var(--ease,cubic-bezier(.2,.8,.2,1)),
             color .25s var(--ease,cubic-bezier(.2,.8,.2,1)),
             border-color .25s var(--ease,cubic-bezier(.2,.8,.2,1)),
             box-shadow .25s var(--ease,cubic-bezier(.2,.8,.2,1)),
             transform .25s var(--ease,cubic-bezier(.2,.8,.2,1));
}
/* one hover law: lift 2px, deepen the shadow */
.btn-outline:hover,
.btn-back:hover,
.prod-foot .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(26,26,46,.12);
}
.btn-outline:active,
.btn-back:active,
.prod-foot .btn:active{transform:translateY(0);box-shadow:none}

/* two sizes, not eight */
.btn-outline{padding:13px 26px;font-size:14.5px}
.btn-back{padding:13px 26px;font-size:14.5px}
.prod-foot .btn{padding:11px 18px;font-size:13px}

@media (prefers-reduced-motion:reduce){
  .btn-outline:hover,.btn-back:hover,.prod-foot .btn:hover{transform:none}
}