/* ==========================================================================
   GROSS — Hardware for Kitchens & Furniture
   Design system & stylesheet
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root{
  /* Ink & surface */
  --ink:        #0D0F12;
  --ink-2:      #171B20;
  --steel:      #38414A;
  --muted:      #5E6771;
  --muted-2:    #8A929B;
  --line:       #E4E1DB;
  --line-2:     #D3CFC7;
  --bg:         #FFFFFF;
  --bg-2:       #F7F5F1;

  /* Accent — brass */
  --brand:      #E2590F;
  --brand-2:    #BE4709;
  --brand-3:    #F5915A;
  --brand-soft: #FDEDE3;

  /* Type */
  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --wrap: 1220px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(64px, 9vw, 116px);
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 18px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------- 2. Reset/base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--f-display); font-weight:700; color:var(--ink); line-height:1.12; letter-spacing:-.025em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--brand); color:#fff; }

/* --------------------------------------------------------- 3. Layout utils */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(48px,6vw,76px); }
.section--paper{ background:var(--bg-2); }
.section--dark{ background:var(--ink); color:#C9CED4; }
.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }

.stack-sm > * + *{ margin-top:.6rem; }
.stack    > * + *{ margin-top:1rem; }
.stack-lg > * + *{ margin-top:1.75rem; }
.center{ text-align:center; }
.hide{ display:none !important; }

/* ---------------------------------------------------------- 4. Typography  */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-2);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brand); flex:none; }
.section--dark .eyebrow{ color:var(--brand-3); }
.section--dark .eyebrow::before{ background:var(--brand-3); }

.h-xl{ font-size:clamp(2.4rem,6.2vw,4.4rem); letter-spacing:-.035em; }
.h-lg{ font-size:clamp(1.95rem,3.9vw,3rem); }
.h-md{ font-size:clamp(1.4rem,2.3vw,1.85rem); letter-spacing:-.02em; }
.h-sm{ font-size:1.08rem; letter-spacing:-.01em; }

.lead{ font-size:clamp(1.02rem,1.35vw,1.18rem); color:var(--muted); line-height:1.7; max-width:62ch; }
.section--dark .lead{ color:#9BA3AC; }
.muted{ color:var(--muted); }
.small{ font-size:.87rem; }

.section-head{ max-width:720px; margin-bottom:clamp(34px,4.5vw,56px); }
.section-head .h-lg{ margin-top:.7rem; }
.section-head .lead{ margin-top:1rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .lead{ margin-inline:auto; }
.section-head--center .eyebrow::before{ display:none; }

/* ------------------------------------------------------------- 5. Buttons  */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.6em; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--f-display); font-size:.92rem; font-weight:600; letter-spacing:.01em;
  border-radius:var(--r-sm); text-align:center;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(13,15,18,.5); }
.btn svg{ width:17px; height:17px; flex:none; }
.btn--accent{ --btn-bg:var(--brand); --btn-bd:var(--brand); }
.btn--accent:hover{ --btn-bg:var(--brand-2); --btn-bd:var(--brand-2); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-2); }
.btn--ghost:hover{ --btn-bd:var(--ink); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.32); }
.btn--outline-light:hover{ --btn-bd:#fff; }
.btn--sm{ padding:.68em 1.15em; font-size:.85rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-display); font-weight:600; font-size:.92rem; color:var(--ink);
}
.link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }
.link-arrow--accent{ color:var(--brand-2); }
.section--dark .link-arrow{ color:#fff; }

/* -------------------------------------------------------------- 6. Header  */
.topbar{
  background:var(--ink); color:#9BA3AC; font-size:.8rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; }
.topbar__list{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar__list a,.topbar__list span{ display:inline-flex; align-items:center; gap:.45em; }
.topbar__list a:hover{ color:#fff; }
.topbar svg{ width:14px; height:14px; opacity:.7; flex:none; }
.topbar__social{ display:flex; gap:.9rem; }
.topbar__social a{ opacity:.75; }
.topbar__social a:hover{ opacity:1; color:#fff; }
.topbar__social svg{ width:16px; height:16px; opacity:1; }

.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.header.is-stuck{ box-shadow:0 8px 30px -22px rgba(13,15,18,.55); }
.header__in{ display:flex; align-items:center; gap:1rem; min-height:74px; }

.logo{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.logo__mark{ width:34px; height:34px; flex:none; border-radius:5px; }
.logo__text{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-family:var(--f-display); font-weight:800; font-size:1.32rem; letter-spacing:.02em; color:var(--ink); }
.logo__tag{ font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); margin-top:.28rem; font-weight:500; }

.nav{ display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.nav a{
  position:relative; padding:.5rem .8rem; border-radius:var(--r-sm);
  font-size:.93rem; font-weight:500; color:var(--steel); white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover{ color:var(--ink); background:var(--bg-2); }
.nav a.is-active{ color:var(--ink); font-weight:600; }
.nav a.is-active::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.15rem; height:2px; background:var(--brand); border-radius:2px;
}
.header__actions{ display:flex; align-items:center; gap:.6rem; flex:none; }

/* Language switch */
.lang{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; }
.lang button{
  padding:.42rem .62rem; background:transparent; border:0;
  font-family:var(--f-display); font-size:.78rem; font-weight:700; letter-spacing:.05em; color:var(--muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang button + button{ border-left:1px solid var(--line-2); }
.lang button:hover{ color:var(--ink); }
.lang button.is-active{ background:var(--ink); color:#fff; }

/* Burger + mobile drawer */
.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm); }
.burger span{ display:block; width:18px; height:1.6px; background:var(--ink); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.6px; background:var(--ink); transition:transform .28s var(--ease), top .28s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ top:0; transform:rotate(45deg); }
.burger.is-open span::after{  top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(88vw,360px); z-index:70;
  background:#fff; border-left:1px solid var(--line);
  transform:translateX(101%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; padding:1.5rem var(--gutter) 2rem; overflow-y:auto;
}
.drawer.is-open{ transform:translateX(0); }
.drawer__head{ display:flex; justify-content:flex-end; margin-bottom:1rem; }
.drawer__close{ width:40px; height:40px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:none; display:grid; place-items:center; }
.drawer__close svg{ width:18px; height:18px; }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{ padding:.95rem 0; border-bottom:1px solid var(--line); font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--ink); }
.drawer__foot{ margin-top:auto; padding-top:1.75rem; display:grid; gap:.7rem; }
.scrim{ position:fixed; inset:0; background:rgba(13,15,18,.45); z-index:65; opacity:0; visibility:hidden; transition:opacity .34s var(--ease), visibility .34s; }
.scrim.is-open{ opacity:1; visibility:visible; }
body.no-scroll{ overflow:hidden; }

/* ---------------------------------------------------------------- 7. Hero  */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:#C9CED4; }
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 75% at 70% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 70% 30%,#000 30%,transparent 78%);
}
.hero::after{
  content:""; position:absolute; width:640px; height:640px; right:-140px; top:-200px; border-radius:50%;
  background:radial-gradient(circle,rgba(226,89,15,.34),transparent 66%); filter:blur(20px);
}
.hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,68px); align-items:center; padding-block:clamp(62px,8.5vw,110px); }
.hero h1{ color:#fff; margin-top:1.1rem; }
.hero h1 em{ font-style:normal; color:var(--brand-3); }
.hero .lead{ color:#A6AEB7; margin-top:1.35rem; }
.hero .btn-row{ margin-top:2.1rem; }

.hero__facts{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:3rem; padding-top:1.9rem; border-top:1px solid rgba(255,255,255,.12); }
.hero__fact strong{ display:block; font-family:var(--f-display); font-size:1.75rem; font-weight:700; color:#fff; letter-spacing:-.02em; }
.hero__fact span{ font-size:.8rem; color:var(--muted-2); letter-spacing:.04em; }

.hero__art{ position:relative; }
.hero__art svg{ width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); }

/* ------------------------------------------------------- 8. Brand strip    */
.strip{ border-block:1px solid var(--line); background:var(--bg); padding-block:1.6rem; }
.strip__label{ text-align:center; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.15rem; }
.strip__items{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem clamp(1.6rem,4vw,3.4rem); }
.strip__items li{
  font-family:var(--f-display); font-weight:700; font-size:clamp(1rem,1.7vw,1.24rem);
  letter-spacing:.06em; color:var(--muted-2);
  transition:color .25s var(--ease);
}
.strip__items li:hover{ color:var(--ink); }

/* ------------------------------------------------------------- 9. Grids    */
.grid{ display:grid; gap:clamp(14px,1.6vw,22px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split--wide{ grid-template-columns:.95fr 1.05fr; }

/* --------------------------------------------------- 10. Category cards    */
.cat{
  position:relative; display:flex; flex-direction:column; gap:.85rem;
  padding:clamp(20px,2.2vw,28px); background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.cat:hover{ border-color:var(--brand); transform:translateY(-4px); box-shadow:0 18px 40px -28px rgba(13,15,18,.5); }
.cat__icon{
  width:50px; height:50px; display:grid; place-items:center; flex:none;
  border-radius:var(--r-sm); background:var(--brand-soft); color:var(--brand-2);
  transition:background .28s var(--ease), color .28s var(--ease);
}
.cat:hover .cat__icon{ background:var(--brand); color:#fff; }
.cat__icon svg{ width:26px; height:26px; }
.cat h3{ font-size:1.06rem; }
.cat p{ font-size:.9rem; color:var(--muted); line-height:1.62; }
.cat__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.35rem; }
.cat__tags li{
  font-size:.73rem; padding:.24em .62em; border-radius:100px;
  background:var(--bg-2); color:var(--steel); border:1px solid var(--line);
}
.cat__brand{
  position:absolute; top:clamp(20px,2.2vw,28px); right:clamp(20px,2.2vw,28px);
  font-family:var(--f-display); font-size:.68rem; font-weight:700; letter-spacing:.1em;
  color:var(--muted-2); text-transform:uppercase;
}

/* ------------------------------------------------------- 11. Brand cards   */
.brand{
  display:flex; flex-direction:column; gap:.8rem; height:100%;
  padding:clamp(22px,2.4vw,30px); background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.brand:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 18px 40px -30px rgba(13,15,18,.45); }
.brand__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.brand__name{ font-family:var(--f-display); font-weight:800; font-size:1.35rem; letter-spacing:.01em; color:var(--ink); }
.brand__flag{
  display:inline-flex; align-items:center; gap:.4em; flex:none;
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:.28em .6em; border:1px solid var(--line); border-radius:100px; background:var(--bg-2);
}
.brand__role{ font-size:.76rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-2); }
.brand p{ font-size:.92rem; color:var(--muted); line-height:1.65; }
.brand__list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.6rem; }
.brand__list li{ font-size:.75rem; color:var(--steel); padding:.24em .62em; border-radius:100px; background:var(--bg-2); border:1px solid var(--line); }

/* ------------------------------------------------------------ 12. Feature  */
.feature{ display:flex; gap:1rem; }
.feature__ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg-2); color:var(--brand-2); }
.section--dark .feature__ic{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--brand-3); }
.feature__ic svg{ width:21px; height:21px; }
.feature h4{ font-size:1rem; margin-bottom:.3rem; }
.feature p{ font-size:.9rem; color:var(--muted); line-height:1.62; }
.section--dark .feature p{ color:#9BA3AC; }

/* -------------------------------------------------------------- 13. Steps  */
.steps{ counter-reset:s; display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(4,1fr); }
.step{ position:relative; padding-top:2.6rem; border-top:2px solid var(--line); }
.section--dark .step{ border-top-color:rgba(255,255,255,.16); }
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:1rem; left:0;
  font-family:var(--f-display); font-size:.82rem; font-weight:700; letter-spacing:.1em; color:var(--brand);
}
.step h4{ font-size:1.02rem; margin-bottom:.4rem; }
.step p{ font-size:.89rem; color:var(--muted); line-height:1.6; }
.section--dark .step p{ color:#9BA3AC; }

/* -------------------------------------------------------------- 14. Stats  */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.stat{ padding:1.5rem 1.4rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.stat strong{ display:block; font-family:var(--f-display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.stat span{ display:block; margin-top:.55rem; font-size:.85rem; color:var(--muted); }

/* ------------------------------------------------------------ 15. Segments */
.seg{ display:flex; align-items:center; gap:.85rem; padding:1rem 1.15rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.seg:hover{ border-color:var(--brand); transform:translateX(4px); }
.seg svg{ width:22px; height:22px; color:var(--brand-2); flex:none; }
.seg span{ font-family:var(--f-display); font-weight:600; font-size:.96rem; color:var(--ink); }

/* ---------------------------------------------------------------- 16. CTA  */
.cta{ position:relative; overflow:hidden; background:var(--ink); color:#C9CED4; border-radius:var(--r-lg); padding:clamp(36px,5.5vw,72px); }
.cta::after{ content:""; position:absolute; width:520px; height:520px; right:-160px; bottom:-260px; border-radius:50%; background:radial-gradient(circle,rgba(226,89,15,.32),transparent 68%); }
.cta__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,4vw,52px); align-items:center; }
.cta h2{ color:#fff; }
.cta p{ color:#A6AEB7; margin-top:.9rem; max-width:52ch; }
.cta .btn-row{ justify-content:flex-end; }

/* ------------------------------------------------------------ 17. Contact  */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,4.5vw,60px); align-items:start; }
.info-list{ display:grid; gap:1.4rem; }
.info{ display:flex; gap:.95rem; }
.info__ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--brand-soft); color:var(--brand-2); }
.info__ic svg{ width:20px; height:20px; }
.info h4{ font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.info p,.info a{ font-size:1rem; color:var(--ink); line-height:1.55; }
.info a:hover{ color:var(--brand-2); }

.form{ padding:clamp(24px,3vw,38px); border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.field{ display:grid; gap:.42rem; }
.field label{ font-size:.82rem; font-weight:600; color:var(--steel); }
.field label .req{ color:var(--brand-2); }
.field input,.field select,.field textarea{
  width:100%; padding:.82rem .95rem; font:inherit; font-size:.94rem; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); background:#fff; }
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form .field + .field,.form .field-row + .field,.form .field + .field-row{ margin-top:1.05rem; }
.form__foot{ margin-top:1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between; }
.form__note{ font-size:.8rem; color:var(--muted); max-width:34ch; }
.form__msg{ margin-top:1rem; padding:.85rem 1rem; border-radius:var(--r-sm); font-size:.9rem; display:none; }
.form__msg.is-ok{ display:block; background:#EDF7EE; border:1px solid #BFE0C3; color:#245A2C; }
.form__msg.is-err{ display:block; background:#FDF0EE; border:1px solid #F0C9C2; color:#8A2F1E; }
.hp{ position:absolute; left:-9999px; opacity:0; }

.map{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-2); }
.map iframe{ width:100%; height:380px; border:0; display:block; }

/* ------------------------------------------------------------- 18. Banner  */
.pagehead{ background:var(--bg-2); border-bottom:1px solid var(--line); padding-block:clamp(38px,5.5vw,72px); }
.pagehead h1{ margin-top:.75rem; }
.pagehead .lead{ margin-top:.9rem; }
.crumbs{ display:flex; gap:.5rem; align-items:center; font-size:.82rem; color:var(--muted); }
.crumbs a:hover{ color:var(--ink); }
.crumbs svg{ width:13px; height:13px; opacity:.55; }

/* -------------------------------------------------------------- 19. Footer */
.footer{ background:var(--ink); color:#8A929B; padding-block:clamp(48px,6vw,76px) 0; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:clamp(26px,3.5vw,48px); }
.footer h4{ font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:1.05rem; }
.footer a:hover{ color:#fff; }
.footer__links{ display:grid; gap:.62rem; font-size:.92rem; }
.footer__about p{ font-size:.92rem; line-height:1.7; margin-top:1rem; max-width:38ch; }
.footer .logo__name{ color:#fff; }
.footer .logo__tag{ color:#6E767F; }
.footer__contact{ display:grid; gap:.75rem; font-size:.92rem; }
.footer__contact li{ display:flex; gap:.65rem; align-items:flex-start; }
.footer__contact svg{ width:16px; height:16px; margin-top:.25rem; opacity:.6; flex:none; }
.footer__social{ display:flex; gap:.6rem; margin-top:1.35rem; }
.footer__social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); transition:background .25s var(--ease), border-color .25s var(--ease); }
.footer__social a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.footer__social svg{ width:17px; height:17px; }
.footer__bar{ margin-top:clamp(36px,4.5vw,58px); padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; font-size:.83rem; }

/* ---------------------------------------------------------- 20. Float CTA  */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 12px 28px -10px rgba(37,211,102,.7);
  transition:transform .25s var(--ease);
}
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:27px; height:27px; }

/* ------------------------------------------------------------ 21. Reveal   */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}

/* -------------------------------------------------------- 22. Responsive   */
@media (max-width:1180px){
  .nav{ display:none; }
  .hide-sm{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps,.stats{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:440px; }
  .split,.split--wide,.contact-grid,.cta__in{ grid-template-columns:1fr; }
  .cta .btn-row{ justify-content:flex-start; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .topbar__list--sec{ display:none; }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4,.stats,.steps{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero__facts{ gap:1.5rem 2rem; }
  .logo__tag{ display:none; }
  .topbar__in{ justify-content:center; }
  .topbar__social{ display:none; }
}

/* ==================================================== 23. Catalogue ====== */
.filters{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  padding:1rem 1.15rem; margin-bottom:1.9rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  position:sticky; top:82px; z-index:20;
}
.filters__search{ position:relative; flex:1 1 240px; min-width:200px; }
.filters__search svg{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--muted-2); pointer-events:none;
}
.filters__search input{
  width:100%; padding:.72rem .9rem .72rem 2.5rem; font:inherit; font-size:.93rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink);
}
.filters__search input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.filters select{
  padding:.72rem 2rem .72rem .9rem; font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6771' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:15px;
}
.filters select:focus{ outline:none; border-color:var(--brand); }
.filters__count{ font-size:.86rem; color:var(--muted); margin-left:auto; white-space:nowrap; }
.filters__count b{ color:var(--ink); font-weight:600; }

.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); }
.pcard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:0 16px 36px -26px rgba(13,15,18,.5); }
.pcard__media{
  aspect-ratio:4/3; background:var(--bg-2); border-bottom:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.pcard__media img{ width:100%; height:100%; object-fit:contain; padding:10%; }
.pcard__ph{ color:var(--line-2); }
.pcard__ph svg{ width:44px; height:44px; }
.pcard__body{ padding:1rem 1.05rem 1.15rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.pcard__brand{
  font-family:var(--f-display); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-2);
}
.pcard h3{ font-size:.99rem; line-height:1.25; }
.pcard p{ font-size:.85rem; color:var(--muted); line-height:1.55; }
.pcard__cat{
  margin-top:auto; padding-top:.7rem; font-size:.74rem; color:var(--muted-2);
  display:flex; align-items:center; gap:.4em;
}
.pcard__cat::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none; }

.empty{ padding:3.5rem 1rem; text-align:center; color:var(--muted); }
.empty svg{ width:44px; height:44px; margin:0 auto 1rem; color:var(--line-2); }

/* brand logo slot — falls back to the wordmark when no file is present */
.brand__logo{ height:34px; max-width:150px; object-fit:contain; object-position:left center; }

@media (max-width:1080px){ .pgrid{ grid-template-columns:repeat(3,1fr); } .filters{ position:static; } }
@media (max-width:820px){  .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .pgrid{ grid-template-columns:1fr; } .filters__count{ margin-left:0; } }

/* brand logo slot: the wordmark shows only when no logo file is present */
.brand__logo + .brand__name{ display:none; }
.brand__top{ align-items:center; }
.brand__count{ font-variant-numeric:tabular-nums; }

/* product dimensions line */
.pcard__dim{
  display:block; margin-top:.15rem;
  font-size:.78rem; line-height:1.45; color:var(--steel);
  padding:.4rem .55rem; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

/* ==================================================== 24. Porosia (cart) == */
.cartlink{
  position:relative; width:42px; height:42px; flex:none;
  display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid var(--line-2); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cartlink:hover{ border-color:var(--ink); background:var(--bg-2); }
.cartlink svg{ width:20px; height:20px; }
.cartlink__n{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:100px;
  background:var(--brand); color:#fff;
  font-family:var(--f-display); font-size:.7rem; font-weight:700; line-height:1;
}
.cartlink__n[hidden]{ display:none; }

/* add-to-order control on a product card */
.pcard__buy{ display:flex; gap:.45rem; margin-top:.8rem; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2); flex:none; }
.qty button{
  width:30px; height:36px; border:0; background:none; color:var(--muted);
  font-size:1.05rem; line-height:1; display:grid; place-items:center;
}
.qty button:hover{ color:var(--ink); }
.qty input{
  width:40px; height:36px; border:0; background:none; text-align:center;
  font:inherit; font-size:.88rem; font-weight:600; color:var(--ink);
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pcard__add{
  flex:1; height:36px; padding:0 .7rem; border:1px solid var(--ink); border-radius:var(--r-sm);
  background:var(--ink); color:#fff;
  font-family:var(--f-display); font-size:.8rem; font-weight:600;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.pcard__add:hover{ background:var(--brand); border-color:var(--brand); }
.pcard__add.is-done{ background:#1E7A3C; border-color:#1E7A3C; }

/* order page */
.order-grid{ display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(24px,3.5vw,44px); align-items:start; }
.orows{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.orow{ display:grid; grid-template-columns:74px 1fr auto auto; gap:1rem; align-items:center; padding:.9rem 1.05rem; border-bottom:1px solid var(--line); }
.orow:last-child{ border-bottom:0; }
.orow__img{ width:74px; height:60px; border-radius:var(--r-sm); background:var(--bg-2); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.orow__img img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.orow__img svg{ width:22px; height:22px; color:var(--line-2); }
.orow__b{ min-width:0; }
.orow__brand{ font-family:var(--f-display); font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-2); }
.orow h3{ font-size:.95rem; margin-top:.15rem; }
.orow__dim{ font-size:.76rem; color:var(--muted); margin-top:.2rem; }
.orow__x{ width:32px; height:32px; border:1px solid var(--line); border-radius:var(--r-sm); background:none; color:var(--muted); display:grid; place-items:center; }
.orow__x:hover{ border-color:#C0392B; color:#C0392B; }
.orow__x svg{ width:15px; height:15px; }

.osum{ position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:clamp(20px,2.4vw,28px); }
.osum h2{ font-size:1.15rem; }
.osum__stats{ display:grid; gap:.5rem; margin:1.1rem 0 1.4rem; padding-block:1rem; border-block:1px solid var(--line); }
.osum__stat{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--muted); }
.osum__stat b{ color:var(--ink); font-family:var(--f-display); }
.osum .field + .field{ margin-top:.85rem; }
.osum__actions{ display:grid; gap:.6rem; margin-top:1.3rem; }
.btn--wa{ --btn-bg:#25D366; --btn-bd:#25D366; --btn-fg:#fff; }
.btn--wa:hover{ --btn-bg:#1EB855; --btn-bd:#1EB855; }
.osum__hint{ font-size:.79rem; color:var(--muted); margin-top:.85rem; line-height:1.55; }
.osum__err{ display:none; margin-top:.8rem; padding:.7rem .85rem; border-radius:var(--r-sm); background:#FDF0EE; border:1px solid #F0C9C2; color:#8A2F1E; font-size:.85rem; }
.osum__err.is-on{ display:block; }

.obar{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.obar__n{ font-size:.9rem; color:var(--muted); }
.obar__n b{ color:var(--ink); }

@media (max-width:900px){
  .order-grid{ grid-template-columns:1fr; }
  .osum{ position:static; }
}
@media (max-width:560px){
  .orow{ grid-template-columns:60px 1fr auto; gap:.75rem; padding:.8rem; }
  .orow__img{ width:60px; height:52px; }
  .orow__x{ grid-column:3; }
  .orow .qty{ grid-column:2 / -1; justify-self:start; margin-top:.4rem; }
}
@media print{
  .topbar,.header,.drawer,.scrim,.wa,.osum__actions,.obar,.footer,.orow__x,.qty button{ display:none !important; }
  .order-grid{ grid-template-columns:1fr; }
  body{ font-size:12px; }
}