/* ---- Accord (brand typeface, local files in /fonts) ---- */
@font-face{ font-family:'Accord'; font-weight:100; font-style:normal; font-display:swap; src:url('/fonts/Accord Thin.woff2') format('woff2'),url('/fonts/Accord Thin.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:200; font-style:normal; font-display:swap; src:url('/fonts/Accord ExtraLight.woff2') format('woff2'),url('/fonts/Accord ExtraLight.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:300; font-style:normal; font-display:swap; src:url('/fonts/Accord Light.woff2') format('woff2'),url('/fonts/Accord Light.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/Accord Regular.woff2') format('woff2'),url('/fonts/Accord Regular.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:400; font-style:italic; font-display:swap; src:url('/fonts/Accord Italic.woff2') format('woff2'),url('/fonts/Accord Italic.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/Accord Medium.woff2') format('woff2'),url('/fonts/Accord Medium.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/Accord Bold.woff2') format('woff2'),url('/fonts/Accord Bold.woff') format('woff'); }
@font-face{ font-family:'Accord'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/Accord ExtraBold.woff2') format('woff2'),url('/fonts/Accord ExtraBold.woff') format('woff'); }
/* ============================================================
   FLEX - Architectural Systems
   Design system & layout
   ============================================================ */

:root{
  --c-white:   #ffffff;
  --c-black:   #0e0e0e;   /* charcoal black */
  --c-graphite:#1a1a1a;
  --c-graphite-2:#262625;
  --c-ink:     #14130f;
  --c-gray:    #6d6c68;   /* muted text */
  --c-gray-2:  #9a9994;
  --c-line:    #e5e4e0;
  --c-bg:      #f5f4f1;   /* warm light gray */
  --c-bg-2:    #efeee9;
  --c-wood:    #b0824f;   /* warm wood accent */
  --c-wood-2:  #c79a6b;

  --f-sans: 'Accord', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1480px;
  --pad: clamp(1.4rem, 5vw, 5.5rem);
  --section-y: clamp(5rem, 11vw, 11rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-sans);
  font-weight:400;
  color:var(--c-graphite);
  background:var(--c-white);
  line-height:1.65;
  font-size:clamp(15px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul,ol{ list-style:none; }
::selection{ background:var(--c-black); color:var(--c-white); }

.skip-link{
  position:fixed; left:1rem; top:-100px; z-index:2000;
  background:var(--c-black); color:#fff; padding:.7rem 1.2rem; border-radius:2px;
  transition:top .2s;
}
.skip-link:focus{ top:1rem; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-block;
  font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-wood);
  margin-bottom:1.6rem;
}
.section-title{
  font-weight:200;
  font-size:clamp(2.1rem,4.6vw,4.2rem);
  line-height:1.04;
  letter-spacing:-.025em;
  color:var(--c-black);
}
.section-lead{
  margin-top:1.6rem; max-width:42ch;
  color:var(--c-gray); font-weight:400;
}

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.container-pad{ padding-inline:var(--pad); }
.section{ padding-block:var(--section-y); }
.section-head{ margin-bottom:clamp(3rem,6vw,5.5rem); max-width:60ch; }
.section-head--center{ max-width:720px; margin-inline:auto; text-align:center; }
.section-head--center .section-lead{ margin-inline:auto; }

/* "Çfarë ofrojmë" intro - tighter spacing + premium title */
.categories{ padding-block:clamp(3.5rem, 7vw, 6rem); }
.categories-head{ margin-bottom:clamp(1.8rem, 4vw, 3rem); }
.categories-head .section-title{
  font-weight:200; font-size:clamp(2.6rem, 6vw, 5rem);
  letter-spacing:-.035em; line-height:1;
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--c-black); --fg:#fff; --bd:var(--c-black);
  position:relative; display:inline-flex; align-items:center; gap:.8rem;
  padding:1.05rem 2.3rem;
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg); border:1px solid var(--bd);
  background:transparent;
  overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bg);
  transform:scaleX(1); transform-origin:left;
  transition:transform .55s var(--ease);
}
.btn--solid{ color:#fff; }
.btn--solid:hover{ color:var(--c-black); }
.btn--solid:hover::before{ transform:scaleX(0); transform-origin:right; }

.btn--ghost-light{
  color:#fff; border-color:rgba(255,255,255,.55); --bg:#fff;
}
.btn--ghost-light::before{ transform:scaleX(0); transform-origin:left; }
.btn--ghost-light:hover{ color:var(--c-black); border-color:#fff; }
.btn--ghost-light:hover::before{ transform:scaleX(1); }

.btn--sm{ padding:.8rem 1.6rem; font-size:.72rem; }
.btn--block{ width:100%; justify-content:center; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.header__inner{
  max-width:var(--container); margin-inline:auto;
  padding:1.6rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  transition:padding .5s var(--ease);
}
.brand{ display:flex; flex-direction:column; line-height:1; color:#fff; transition:color .5s var(--ease); }
.brand__mark{ font-size:1.5rem; font-weight:700; letter-spacing:.12em; }
.brand__sub{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; opacity:.7; margin-top:.45rem; font-weight:500; }
/* Logo: dark artwork - white over the hero, native dark on light (scrolled / inner) headers */
.brand__logo{ height:2.6rem; width:auto; display:block; filter:brightness(0) invert(1); transition:filter .5s var(--ease); }
.header.is-scrolled .brand__logo,
.page-inner .brand__logo{ filter:none; }
.footer__brand .brand__logo--footer{ height:2.73rem; filter:brightness(0) invert(1); }

.nav{ display:flex; gap:clamp(1.4rem,2.4vw,2.8rem); align-items:center; }
.nav__link{
  position:relative; color:#fff; font-size:.82rem; font-weight:500;
  letter-spacing:.06em; padding:.4rem 0; transition:color .4s var(--ease), opacity .4s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link--mobile-cta{ display:none; }
/* highlighted link to the door configurator */
.nav__link--accent{ color:var(--c-wood) !important; font-weight:600; }
.nav__link--accent::after{ background:var(--c-wood); }

/* ---------- Products mega-menu ---------- */
.nav__item.has-dropdown{ position:relative; display:inline-flex; }
.nav__dd-trigger{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; background:none; border:none; }
.nav__caret{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .35s var(--ease); opacity:.85; }
.has-dropdown:hover .nav__caret{ transform:rotate(225deg) translateY(-1px); }
.has-dropdown.is-active > .nav__dd-trigger::after{ transform:scaleX(1); transform-origin:left; }

.dropdown{
  position:absolute; top:calc(100% + 14px); right:0; left:auto; transform:translateY(10px);
  min-width:264px; background:#fff; border-radius:12px;
  border:1px solid var(--c-line); box-shadow:0 22px 60px rgba(10,10,10,.12);
  padding:.55rem; z-index:1100;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } /* hover bridge */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }

.dropdown__list{ list-style:none; margin:0; padding:0; }
.dropdown__row{ position:relative; }
.dropdown__link{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.72rem 1rem; border-radius:7px; color:var(--c-graphite);
  font-size:.92rem; font-weight:400; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.dropdown__link:hover{ background:var(--c-bg); color:var(--c-black); padding-left:1.25rem; }
.dropdown__row.has-sub > .dropdown__link--parent::after{
  content:""; flex:none; width:6px; height:6px; opacity:.55;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg);
}
.dropdown__caret{ display:none; }
.dropdown__sub{
  position:absolute; top:-.55rem; left:calc(100% + 6px); right:auto;
  min-width:230px; background:#fff; border-radius:12px;
  border:1px solid var(--c-line); box-shadow:0 22px 60px rgba(10,10,10,.12);
  padding:.55rem; list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateX(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.dropdown__sub::before{ content:""; position:absolute; top:0; left:-12px; width:12px; height:100%; }
.dropdown__row.has-sub:hover > .dropdown__sub,
.dropdown__row.has-sub:focus-within > .dropdown__sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); }
.dropdown__sublink{
  display:block; padding:.6rem 1rem; border-radius:7px; color:var(--c-gray);
  font-size:.9rem; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.dropdown__sublink:hover{ background:var(--c-bg); color:var(--c-black); padding-left:1.25rem; }

.header__actions{ display:flex; align-items:center; gap:1rem; }
.header .btn--solid{ color:#fff; border-color:rgba(255,255,255,.6); --bg:#fff; }
.header .btn--solid::before{ transform:scaleX(0); transform-origin:left; }
.header .btn--solid:hover{ color:var(--c-black); border-color:#fff; }
.header .btn--solid:hover::before{ transform:scaleX(1); }

/* Scrolled state */
.header.is-scrolled{ background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--c-line); }
.header.is-scrolled .header__inner{ padding-block:1.05rem; }
.header.is-scrolled .brand,
.header.is-scrolled .nav__link{ color:var(--c-black); }
.header.is-scrolled .btn--solid{ color:#fff; border-color:var(--c-black); --bg:var(--c-black); }
.header.is-scrolled .btn--solid::before{ transform:scaleX(1); transform-origin:left; }
.header.is-scrolled .btn--solid:hover{ color:var(--c-black); }
.header.is-scrolled .btn--solid:hover::before{ transform:scaleX(0); transform-origin:right; }
.header.is-scrolled .burger span{ background:var(--c-black); }

/* ---------- Language switcher ---------- */
.lang-switch{ display:flex; align-items:center; gap:.55rem; }
.lang-switch__link{
  font-size:.76rem; font-weight:600; letter-spacing:.12em;
  color:#fff; opacity:.55; transition:opacity .35s var(--ease), color .35s var(--ease);
  position:relative; padding:.2rem 0;
}
.lang-switch__link:hover{ opacity:.9; }
.lang-switch__link.is-active{ opacity:1; }
.lang-switch__link.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--c-wood-2);
}
.lang-switch__sep{ color:#fff; opacity:.25; font-size:.7rem; }
.header.is-scrolled .lang-switch__link,
.header.is-scrolled .lang-switch__sep{ color:var(--c-black); }
.header.is-scrolled .lang-switch__link.is-active::after{ background:var(--c-wood); }
.lang-switch--mobile{ display:none; }
.lang-switch--footer{ margin-bottom:1rem; }
.lang-switch--footer .lang-switch__link,
.lang-switch--footer .lang-switch__sep{ color:#fff; }
.lang-switch--footer .lang-switch__link{ opacity:.6; }
.lang-switch--footer .lang-switch__link.is-active{ opacity:1; }

.burger{ display:none; flex-direction:column; gap:6px; width:30px; padding:6px 0; }
.burger span{ display:block; height:1.5px; width:100%; background:#fff; transition:transform .4s var(--ease), opacity .3s; }
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-0px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; background:var(--c-black); overflow:hidden; }
.hero-swiper{ width:100%; height:100%; }
.hero-swiper .swiper-slide{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; overflow:hidden; }
/* taller than the viewport so subtle parallax never reveals an edge */
.hero-bg img{ position:absolute; top:-10%; left:0; width:100%; height:120%; object-fit:cover; will-change:transform; }
/* interior-doors photo is portrait - zoom out to show the whole door, framed on the right (targeted by src so swiper loop-clones match too) */
.hero-bg img[src*="interior-doors-flex"]{ top:0; left:auto; right:0; width:auto; max-width:60%; height:100%; object-fit:contain; object-position:right center; }
@media (max-width:760px){ .hero-bg img[src*="interior-doors-flex"]{ left:0; right:0; width:100%; max-width:100%; object-position:center; } }
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.45) 38%, rgba(10,10,10,.15) 70%, rgba(10,10,10,.35) 100%),
    linear-gradient(0deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 45%);
}

.hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start;
  padding-left:var(--pad); padding-right:var(--pad);
  max-width:min(960px, 78%);
}
.hero-eyebrow{
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--c-wood-2); font-weight:500; margin-bottom:1.8rem;
}
.hero-title{
  color:#fff; font-weight:200;
  font-size:clamp(3rem,8.5vw,8rem);
  line-height:.92; letter-spacing:-.035em;
  margin-bottom:1.8rem;
}
.hero-title span{ display:block; }
.hero-desc{
  color:rgba(255,255,255,.82); max-width:46ch;
  font-size:clamp(1rem,1.3vw,1.2rem); font-weight:300; margin-bottom:2.6rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero-catalog{ display:inline-flex; align-items:center; gap:.5rem; }
@media (max-width:480px){ .hero-actions{ gap:.7rem; width:100%; } .hero-actions .btn{ flex:1 1 100%; text-align:center; justify-content:center; } }

/* Right-side numbered nav */
.hero-nav{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  z-index:20; display:flex; flex-direction:column; gap:.2rem;
}
.hero-nav__item{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:1rem; padding:.9rem 0 .9rem 1.4rem;
  position:relative; text-align:left; color:rgba(255,255,255,.45);
  transition:color .5s var(--ease); min-width:210px;
}
.hero-nav__num{ font-size:.78rem; font-weight:600; letter-spacing:.1em; grid-row:1; }
.hero-nav__label{
  font-size:.92rem; font-weight:300; letter-spacing:.02em; grid-row:1;
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-nav__track{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:62%; background:rgba(255,255,255,.22); overflow:hidden;
}
.hero-nav__track i{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:var(--c-wood-2); transform:scaleY(0); transform-origin:top;
}
.hero-nav__item.is-active{ color:#fff; }
.hero-nav__item.is-active .hero-nav__label{ opacity:1; transform:translateX(0); }
.hero-nav__item:hover{ color:rgba(255,255,255,.85); }

.hero-scroll{
  position:absolute; left:var(--pad); bottom:2.2rem; z-index:20;
  display:flex; align-items:center; gap:1rem; color:rgba(255,255,255,.7);
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
}
.hero-scroll__line{ width:60px; height:1px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.hero-scroll__line::after{ content:""; position:absolute; inset:0; background:#fff; animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:translateX(-100%);} 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

/* ============================================================
   CATEGORIES
   ============================================================ */
.categories-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  grid-auto-rows:minmax(280px, 38vh);
  padding-inline:var(--pad); max-width:var(--container); margin-inline:auto;
}
.cat{
  position:relative; overflow:hidden; min-height:280px; height:100%;
  display:block; background:var(--c-black);
}
.cat--tall{ grid-row:span 2; }
.cat--wide{ grid-column:1 / -1; grid-auto-rows:initial; min-height:340px; }
.cat__media{ position:absolute; inset:0; }
.cat__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.cat__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.15) 55%, rgba(10,10,10,.05) 100%);
  transition:background .6s var(--ease);
}
.cat__body{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.6rem,3vw,2.6rem); color:#fff;
}
.cat__num{ font-size:.74rem; letter-spacing:.2em; color:var(--c-wood-2); font-weight:600; }
.cat__title{ font-weight:200; font-size:clamp(1.6rem,2.6vw,2.4rem); letter-spacing:-.02em; margin:.5rem 0 1rem; }
.cat__cta{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.cat__cta .arrow{ font-style:normal; transition:transform .5s var(--ease); }
.cat:hover .cat__media img{ transform:scale(1.08); }
.cat:hover .cat__overlay{ background:linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 60%, rgba(10,10,10,.2) 100%); }
.cat:hover .cat__cta{ opacity:1; transform:translateY(0); }
.cat:hover .cat__cta .arrow{ transform:translateX(6px); }

/* ============================================================
   HOMEPAGE BENTO GRID (product categories)
   ============================================================ */
.bento{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:clamp(160px, 19vw, 260px);
  gap:0.7px;
  padding-inline:var(--pad); max-width:var(--container); margin-inline:auto;
  border-radius:22px; overflow:hidden;
}
/* irregular mosaic layout (desktop) - fills a 4×5 grid with no gaps */
.b-fstr{ grid-column:1 / 3; grid-row:1 / 3; }
.b-fvent{ grid-column:3; grid-row:1; }
.b-hyrese{ grid-column:4; grid-row:1; }
.b-dritare{ grid-column:3 / 5; grid-row:2; }
.b-rreshqites{ grid-column:1; grid-row:3; }
.b-roleta{ grid-column:2 / 4; grid-row:3 / 5; }
.b-brendshme{ grid-column:4; grid-row:3; }
.b-automatike{ grid-column:1; grid-row:4; }
.b-industriale{ grid-column:4; grid-row:4; }
.b-paramak{ grid-column:1 / 3; grid-row:5; }
.b-ndarje{ grid-column:3; grid-row:5; }
.b-pivot{ grid-column:4; grid-row:5; }

.bento__card{
  position:relative; display:block; overflow:hidden; border-radius:0;
  cursor:pointer; background:var(--c-black);
}
.bento__media{ position:absolute; inset:0; }
.bento__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
/* empty category card (no photo yet) - neutral fill instead of stock image */
.bento__card--empty .bento__media{ background:linear-gradient(135deg,#1c1c1b,#2b2b29); }
.bento__soon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.38); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; }
.bento__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.18) 55%, rgba(10,10,10,0) 100%);
  transition:background .6s var(--ease);
}
.bento__body{ position:absolute; inset:auto 0 0 0; padding:clamp(1.2rem,2vw,1.9rem); color:#fff; }
.bento__num{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.2em; color:var(--c-wood-2); margin-bottom:.4rem; }
.bento__title{ font-weight:300; font-size:clamp(1.3rem,1.9vw,1.95rem); letter-spacing:-.01em; line-height:1.05; }
.bento__card:hover .bento__media img{ transform:scale(1.05); }
.bento__card:hover .bento__overlay{ background:linear-gradient(0deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.38) 60%, rgba(10,10,10,.12) 100%); }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:clamp(150px, 33vw, 230px); }
  .b-fstr,.b-fvent,.b-hyrese,.b-dritare,.b-rreshqites,.b-roleta,.b-brendshme,.b-automatike,.b-industriale,.b-paramak,.b-ndarje,.b-pivot{ grid-column:auto; grid-row:auto; }
}

/* ============================================================
   WHY FLEX
   ============================================================ */
.why{ background:var(--c-bg); }
.why__layout{ display:grid; grid-template-columns:minmax(280px, 0.85fr) 1.15fr; gap:clamp(2.5rem,6vw,6rem); }
.section-head--sticky{ position:sticky; top:120px; align-self:start; margin-bottom:0; }
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-line); border:1px solid var(--c-line); }
.why-card{
  background:var(--c-white); padding:clamp(2rem,3.2vw,3.2rem);
  display:flex; flex-direction:column; gap:1rem; min-height:240px;
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.why-card__no{ font-size:.78rem; font-weight:600; letter-spacing:.16em; color:var(--c-wood); }
.why-card__title{ font-weight:300; font-size:clamp(1.3rem,1.8vw,1.65rem); letter-spacing:-.01em; color:var(--c-black); }
.why-card__text{ color:var(--c-gray); font-size:.96rem; }
.why-card:hover{ background:var(--c-black); }
.why-card:hover .why-card__title{ color:#fff; }
.why-card:hover .why-card__text{ color:rgba(255,255,255,.7); }
.why-card:hover .why-card__no{ color:var(--c-wood-2); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-section{ padding-bottom:calc(var(--section-y) + 1rem); }
.gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; max-width:none; }
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.4rem; }
.filter{
  padding:.6rem 1.2rem; font-size:.78rem; font-weight:500; letter-spacing:.06em;
  color:var(--c-gray); border:1px solid transparent; border-radius:999px;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.filter:hover{ color:var(--c-black); }
.filter.is-active{ color:#fff; background:var(--c-black); border-color:var(--c-black); }

/* ============================================================
   LAMINAM FINISH CATALOG - /produkte/fasada-ventiluse/laminam
   Uniform framed finish-cards in a grid (Laminam catalog style).
   ============================================================ */
.lam-explorer{ max-width:var(--container); margin:clamp(2.5rem,5vw,4rem) auto 0; padding-inline:var(--pad); }
.lam-explorer__head{ max-width:760px; margin-bottom:clamp(1.4rem,3vw,2rem); }
.lam-explorer__eyebrow{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--c-wood-2); margin:0 0 .8rem; }
.lam-explorer__title{ font-size:clamp(1.8rem,3.6vw,2.9rem); font-weight:300; letter-spacing:-.02em; line-height:1.06; margin:0 0 1rem; color:var(--c-black); }
.lam-explorer__intro{ font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.7; color:#4a4a46; margin:0; max-width:60ch; }

.lam-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:clamp(1.4rem,3vw,2rem) 0 clamp(1.8rem,3vw,2.6rem); }
.lam-chip{ font-family:inherit; font-size:.85rem; padding:.5rem 1.05rem; border-radius:30px; border:1px solid rgba(0,0,0,.18); background:transparent; color:#4a4a46; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.lam-chip:hover{ border-color:var(--c-black); }
.lam-chip.is-active{ background:var(--c-black); color:#fff; border-color:var(--c-black); }

.lam-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(190px,20vw,244px),1fr)); gap:clamp(1.6rem,2.6vw,2.6rem) clamp(1rem,1.6vw,1.7rem); }
.lam-card{ display:block; text-decoration:none; color:inherit; }
.lam-card.is-hidden{ display:none; }
.lam-card__frame{ display:block; position:relative; aspect-ratio:3/5; border-radius:6px; overflow:hidden; background:#eceae5 center/cover no-repeat; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.lam-card:hover .lam-card__frame{ transform:translateY(-5px); box-shadow:0 26px 50px -28px rgba(0,0,0,.45); }
.lam-card__badge{ position:absolute; top:12px; right:12px; background:#123047; color:#fff; font-size:.66rem; font-weight:600; letter-spacing:.01em; padding:.42rem .8rem; border-radius:30px; }
.lam-card__name{ display:block; margin-top:1rem; font-size:1.06rem; font-weight:400; line-height:1.28; color:var(--c-black); }
/* name + product code row (Puricelli finishes carry a #code) */
.lam-card__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:.7rem; margin-top:1rem; }
.lam-card__meta .lam-card__name{ margin-top:0; }
.lam-card__code{ flex-shrink:0; font-size:.82rem; letter-spacing:.03em; color:#8a8983; }
.lam-card__coll{ display:block; margin-top:.5rem; font-size:.8rem; letter-spacing:.02em; color:#12324a; }

@media (max-width:760px){ .lam-grid{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1.1rem; } }
@media (max-width:400px){ .lam-grid{ gap:1.3rem .9rem; } }

.gallery{
  column-count:3; column-gap:14px;
  padding-inline:var(--pad); max-width:var(--container); margin-inline:auto;
}
/* When Lenis smooth-scroll is off (touch devices / reduced setups), let native
   anchor navigation stay smooth and clear the fixed header. */
html:not(.lenis){ scroll-behavior:smooth; scroll-padding-top:84px; }

.g-item{
  position:relative; display:block; break-inside:avoid; margin-bottom:14px;
  overflow:hidden; background:var(--c-bg-2);
  /* NOTE: no content-visibility here - skipped tiles paint NOTHING (transparent),
     which reads as stuck white boxes on slower machines. Photos must always paint. */
}
.g-item img{ width:100%; height:auto; object-fit:cover; transition:transform 1.1s var(--ease); }
.g-item__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,10,.7) 0%, rgba(10,10,10,0) 55%);
  opacity:.55; transition:opacity .5s var(--ease); pointer-events:none;
}
.g-item__meta{
  position:absolute; left:0; bottom:0; padding:1.6rem; color:#fff;
  transform:translateY(14px); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease);
  pointer-events:none;
}
.g-item__cat{ display:block; font-style:normal; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-wood-2); font-weight:600; margin-bottom:.35rem; }
.g-item__title{ display:block; font-weight:300; font-size:1.25rem; letter-spacing:-.01em; }
.g-item:hover img{ transform:scale(1.1); }
.g-item:hover .g-item__overlay{ opacity:.85; }
.g-item:hover .g-item__meta{ transform:translateY(0); opacity:1; }
.g-item.is-hidden{ display:none; }

/* ============================================================
   GALLERY PAGE - uniform HORIZONTAL grid (user 2026-07-02:
   no vertical strips; every photo sits in a 3:2 landscape
   frame, portraits centre-cropped - the full photo opens in
   the lightbox on click)
   ============================================================ */
.gallery.gallery--land{
  column-count:auto;                 /* cancel masonry */
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.gallery--land .g-item{ margin:0; aspect-ratio:3 / 2; background:#e2dfd8; } /* visible neutral tile while a photo decodes - never white-on-white */
.gallery--land .g-item img{ width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width:980px){ .gallery.gallery--land{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .gallery.gallery--land{ grid-template-columns:1fr; gap:12px; } .gallery--land .g-item{ aspect-ratio:16 / 10; } }

/* ============================================================
   PROJECTS PORTFOLIO (Projekte filter) - uniform premium grid
   ============================================================ */
.gallery.is-projects{
  column-count:auto;                 /* cancel masonry */
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.4rem, 2.6vw, 2.6rem);  /* generous spacing */
}
@media (max-width:980px){ .gallery.is-projects{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .gallery.is-projects{ grid-template-columns:1fr; } }

.gallery.is-projects .g-item--project{ margin:0; aspect-ratio:4 / 3; border-radius:6px; overflow:hidden; }
.g-item--project img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.g-item--project .g-item__overlay{
  opacity:0;
  background:linear-gradient(0deg, rgba(10,10,10,.8) 0%, rgba(10,10,10,.2) 55%, rgba(10,10,10,0) 100%);
  transition:opacity .55s var(--ease);
}
.g-item--project:hover img{ transform:scale(1.04); }   /* very slight zoom */
.g-item--project:hover .g-item__overlay{ opacity:1; }
.g-item__status{
  display:block; margin-top:.45rem;
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-wood-2);
}

/* ============================================================
   PROJECT DETAIL - clean large grid
   ============================================================ */
/* PROJECT DETAIL - fit-to-frame masonry (NO crop). Same column engine as the
   products .gallery; each box's ratio == the photo's real ratio via per-item
   inline style="--ar:W/H", so the WHOLE photo shows (portraits tall, landscapes
   wide). Pure-CSS at runtime · reflows the .is-hidden{display:none} filter for
   free · CLS ~0 (ratio reserves height pre-decode). */
.gallery.gallery--detail{
  display:block; grid-template-columns:none;          /* cancel old grid/aspect */
  column-count:2; column-gap:clamp(1.4rem, 2.5vw, 2.4rem);
  max-width:var(--container); margin-inline:auto; padding-inline:var(--pad);
}
.gallery--detail .g-item{
  position:relative;                                   /* display:block comes from base .g-item, so .is-hidden{display:none} still wins the filter */
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 clamp(1.4rem, 2.5vw, 2.4rem);
  border-radius:6px; overflow:hidden; background:var(--c-bg-2);
  aspect-ratio:var(--ar, 3 / 2);                      /* --ar stamped per item == real photo ratio */
}
.gallery--detail .g-item img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center;          /* contain = safe: box ratio already == file ratio */
  transition:transform 1.1s var(--ease);
}
/* never re-introduce the crop: unstamped items show the whole photo */
.gallery--detail .g-item:not([style*="--ar"]){ aspect-ratio:auto; }
.gallery--detail .g-item:not([style*="--ar"]) img{ height:auto; }
/* premium hover + caption fade */
.gallery--detail .g-item__overlay{
  opacity:0; background:linear-gradient(0deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 55%);
  transition:opacity .5s var(--ease);
}
.gallery--detail .g-item:hover img{ transform:scale(1.05); }
.gallery--detail .g-item:hover .g-item__overlay{ opacity:1; }
.gallery--detail .g-item:hover .g-item__meta{ transform:translateY(0); opacity:1; }
@media (prefers-reduced-motion:reduce){
  .gallery--detail .g-item img{ transition:none; }
  .gallery--detail .g-item:hover img{ transform:none; }
}
@media (max-width:820px){ .gallery.gallery--detail{ column-count:2; } }
@media (max-width:700px){ .gallery.gallery--detail{ column-count:1; } }

.project-status{
  margin-top:1.2rem; font-size:.78rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--c-wood);
}

/* ============================================================
   SHOWREEL VIDEO (full-screen, looping)
   ============================================================ */
.video-section{
  position:relative; width:100%; height:100svh; min-height:520px;
  overflow:hidden; background:var(--c-black);
}
.video-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.video-section::after{
  /* subtle vignette so it blends into the dark stats band below */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 22%);
}
.video-sound{
  position:absolute; z-index:3;
  right:clamp(1.4rem,4vw,3rem); bottom:clamp(1.4rem,4vw,3rem);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.2rem; color:#fff;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(12,12,12,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.video-sound:hover{ background:rgba(12,12,12,.55); border-color:#fff; }
.video-sound__ic{ display:inline-flex; }
.video-sound__ic--on{ display:none; }
.video-sound.is-on .video-sound__ic--muted{ display:none; }
.video-sound.is-on .video-sound__ic--on{ display:inline-flex; }

/* video centre CTA -> full gallery */
.video-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at center, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 60%, rgba(10,10,10,.5) 100%);
}
.video-cta{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  color:#fff; padding:1.5rem;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.video-cta__label{ font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--c-wood-2); }
.video-cta__text{ font-weight:300; font-size:clamp(2rem,4.4vw,3.6rem); letter-spacing:-.02em; line-height:1.05; }
.video-cta__arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; margin-top:1.1rem; border:1.5px solid rgba(255,255,255,.85); border-radius:50%;
  font-size:1.2rem; text-shadow:none;
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.video-cta:hover .video-cta__arrow{ background:#fff; color:var(--c-black); transform:translateY(5px); }

/* prominent "view full gallery" button under the home gallery grid */
.gallery-more{ display:flex; justify-content:center; margin-top:clamp(2.5rem,5vw,4rem); }
.gallery-more .btn span{ transition:transform .35s var(--ease); }
.gallery-more .btn:hover span{ transform:translateX(5px); }

/* arrow text links */
.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.4rem;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-black); transition:color .3s var(--ease);
}
.link-arrow span{ transition:transform .35s var(--ease); }
.link-arrow:hover{ color:var(--c-wood); }
.link-arrow:hover span{ transform:translateX(5px); }
.link-arrow--back{ margin:0 0 2.2rem; color:var(--c-gray); }
.link-arrow--back:hover span{ transform:translateX(-5px); }

/* ============================================================
   INNER PAGES (no dark hero) - header stays solid from load
   ============================================================ */
.page-inner .header{ background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--c-line); }
.page-inner .brand,
.page-inner .nav__link,
.page-inner .lang-switch__link,
.page-inner .lang-switch__sep{ color:var(--c-black); }
.page-inner .btn--solid{ color:#fff; border-color:var(--c-black); --bg:var(--c-black); }
.page-inner .btn--solid::before{ transform:scaleX(1); transform-origin:left; }
.page-inner .btn--solid:hover{ color:var(--c-black); }
.page-inner .btn--solid:hover::before{ transform:scaleX(0); transform-origin:right; }
.page-inner .burger span{ background:var(--c-black); }

.gallery-hero{ padding:clamp(6rem,11vh,8rem) 0 clamp(1.4rem,3vw,2rem); background:var(--c-bg); }
.gallery-hero .section-title{ margin-bottom:0; }
.gallery-hero .section-lead{ margin-top:1.1rem; }
.gallery-section--page{ padding-top:clamp(1.4rem,3vw,2rem); background:var(--c-bg); }
.gallery-filters--page{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }

/* product pages */
.product-media{ background:var(--c-bg); padding-top:clamp(2rem,4vw,3rem); padding-bottom:clamp(2rem,4vw,3rem); }
.product-cover img{ width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:8px; }
.product-photos-note{ margin-top:1rem; font-size:.85rem; color:var(--c-gray); }
.product-cta{ background:var(--c-black); color:#fff; text-align:center; }
.product-cta .container{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.product-cta .section-title{ color:#fff; }

/* 404 page */
.notfound{ min-height:100vh; display:flex; align-items:center; background:var(--c-bg); text-align:center; }
.notfound .container{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.notfound .section-title{ margin:.4rem 0 1rem; }
.notfound .section-lead{ margin:0 0 2.4rem; }
.notfound .btn span{ transition:transform .35s var(--ease); }
.notfound .btn:hover span{ transform:translateX(5px); }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--c-black); color:#fff; }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); }
.stat{ position:relative; padding-top:2rem; border-top:1px solid rgba(255,255,255,.16); }
/* animated parts (created by JS only when motion is allowed) */
.stat__line{ position:absolute; top:-1px; left:0; width:100%; height:1px; background:var(--c-wood-2); transform:scaleX(0); transform-origin:left center; }
.stat__num-mask{ display:block; overflow:hidden; }
.stat__num{
  display:block; font-weight:200; font-size:clamp(3rem,6vw,5.5rem); line-height:1;
  letter-spacing:-.04em; color:#fff;
}
.stat__num .suffix{ color:var(--c-wood-2); }
.stat__label{ display:block; margin-top:1rem; font-size:.84rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-gray-2); }

/* ============================================================
   PARTNERS MARQUEE (auto-scrolling brand strip)
   ============================================================ */
/* sits directly under the stats as one continuous black band */
.stats{ padding-bottom:clamp(2rem,4vw,3rem); }
.partners{ padding:clamp(1rem,2.5vw,1.6rem) 0 clamp(3rem,6vw,5rem); background:var(--c-black); overflow:hidden; }
.partners__label{ display:block; text-align:center; margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; align-items:center; width:max-content;
  animation:marquee 80s linear infinite;
  will-change:transform; transform:translate3d(0,0,0); backface-visibility:hidden;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* symmetric per-item spacing (incl. the edges) makes the -50% wrap perfectly seamless - no jump */
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.marquee__item{
  display:inline-flex; align-items:center; padding:0 clamp(1.25rem,3vw,3rem);
  font-size:clamp(1.3rem,2.4vw,2rem); font-weight:300; letter-spacing:.01em;
  color:rgba(255,255,255,.5); white-space:nowrap; transition:color .35s var(--ease);
}
.marquee__item:hover{ color:#fff; }
/* logo images: forced solid white (transparent areas stay transparent), uniform height */
.marquee__logo{
  height:clamp(26px,3.4vw,42px); width:auto; display:block;
  filter:brightness(0) invert(1);
  opacity:.75; transition:opacity .35s var(--ease);
}
.marquee__item:hover .marquee__logo{ opacity:1; }
/* Reynaers is a square mark - scale it up so it reads as large as the wide wordmarks */
.marquee__logo[src*="reynaers"]{ height:clamp(46px,5.8vw,70px); }

/* keep the partner strip moving even when the OS prefers reduced motion */
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation-duration:80s !important; }
}

/* ============================================================
   PROCESS
   ============================================================ */
.timeline{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1.2rem,2.5vw,2.4rem);
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:34px; height:1px; background:var(--c-line);
}
/* progress line that draws itself on scroll (added by JS) */
.timeline__line{
  position:absolute; left:0; top:34px; height:1px; width:100%;
  background:var(--c-wood); transform:scaleX(0); transform-origin:left center; z-index:0;
}
.step{ position:relative; padding-top:0; }
.step__no{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:68px; height:68px; border-radius:50%; background:var(--c-white); border:1px solid var(--c-line);
  font-size:.92rem; font-weight:500; letter-spacing:.08em; color:var(--c-black);
  margin-bottom:1.6rem; transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.step:hover .step__no{ background:var(--c-black); color:#fff; border-color:var(--c-black); }
.step__title{ font-weight:400; font-size:clamp(1.1rem,1.5vw,1.4rem); letter-spacing:-.01em; color:var(--c-black); margin-bottom:.6rem; }
.step__text{ color:var(--c-gray); font-size:.92rem; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding-block:0; }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:90vh; }
.about__media{ position:relative; overflow:hidden; min-height:60vh; }
.about__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about__content{
  display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--section-y); max-width:640px;
}
.about__content .section-title{ margin:0 0 1.8rem; }
.about__content p{ color:var(--c-gray); margin-bottom:1.3rem; max-width:48ch; }
.about__sign{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.2rem; }
.about__sign strong{ font-size:1.3rem; font-weight:700; letter-spacing:.1em; color:var(--c-black); }
.about__sign span{ font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--c-gray); }
.about__sign-logo{ height:2.8rem; width:auto; display:block; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--c-bg); }
.contact__cta{ margin-bottom:clamp(3rem,6vw,5rem); }
.contact__title{ font-weight:200; font-size:clamp(2.6rem,7vw,6rem); line-height:.98; letter-spacing:-.03em; color:var(--c-black); }
.contact__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }

.info-row{ padding:1.4rem 0; border-bottom:1px solid var(--c-line); display:flex; flex-direction:column; gap:.3rem; }
.info-row:first-child{ border-top:1px solid var(--c-line); }
.info-row__label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-wood); font-weight:500; }
.info-row__value{ font-size:1.15rem; font-weight:300; color:var(--c-black); transition:color .3s; }
a.info-row__value:hover{ color:var(--c-wood); }
.contact__map{ margin-top:2rem; aspect-ratio:16/10; overflow:hidden; background:var(--c-bg-2); border:1px solid var(--c-line); }
.contact__map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.05); transition:filter .5s var(--ease); }
.contact__map:hover iframe{ filter:grayscale(0); }

.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.4rem; }
.field{ position:relative; }
.field--full{ grid-column:1 / -1; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--c-line);
  padding:1.1rem 0 .7rem; font-family:inherit; font-size:1rem; color:var(--c-black);
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--c-black); }
.field label{
  position:absolute; left:0; top:1.1rem; color:var(--c-gray); font-size:1rem;
  pointer-events:none; transition:transform .35s var(--ease), color .35s var(--ease), font-size .35s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.5rem); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-wood);
}
/* always-visible label above the custom select */
.label--static{ display:block; margin:0 0 .4rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-wood); }

/* ---------- Custom select dropdown ---------- */
.field--select{ position:relative; }
.select{ position:relative; }
.select__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:transparent; border:none; border-bottom:1px solid var(--c-line);
  padding:1.1rem 0 .7rem; font-family:inherit; font-size:1rem; color:var(--c-black);
  text-align:left; cursor:pointer; transition:border-color .4s var(--ease);
}
.select__trigger:focus-visible{ outline:none; border-color:var(--c-black); }
.select.is-open .select__trigger{ border-color:var(--c-black); }
.select__arrow{
  flex:none; width:8px; height:8px; margin-bottom:4px;
  border-right:1.5px solid var(--c-gray); border-bottom:1.5px solid var(--c-gray);
  transform:rotate(45deg); transition:transform .4s var(--ease), margin .4s var(--ease);
}
.select.is-open .select__arrow{ transform:rotate(-135deg); margin-bottom:-2px; }
.select__list{
  position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:30;
  list-style:none; margin:0; padding:.5rem;
  background:#fff; border:1px solid var(--c-line); box-shadow:0 26px 60px rgba(10,10,10,.16);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.select.is-open .select__list{ opacity:1; visibility:visible; transform:translateY(0); }
.select__option{
  padding:.85rem 1rem; font-size:.98rem; color:var(--c-graphite); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.select__option:hover,
.select__option.is-active{ background:var(--c-bg); color:var(--c-black); padding-left:1.3rem; }
.select__option.is-selected{ color:var(--c-wood); font-weight:500; }
.select__option.is-selected::after{ content:"\2713"; font-size:.85rem; }
.form-note{ grid-column:1 / -1; font-size:.85rem; color:var(--c-wood); min-height:1.2em; }
.form-note.is-ok{ color:#1c7a3f; }
.form-note.is-err{ color:#c0392b; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ---------- Windows page: aluminium system cards ---------- */
.win-systems{ padding-top:0; }
/* blurred photo mosaic hero */
.win-hero{ position:relative; overflow:hidden; min-height:68vh; display:flex; align-items:center; justify-content:center; padding:clamp(6rem,10vh,7rem) clamp(1.25rem,5vw,3rem) clamp(2.5rem,5vw,3.5rem); margin-bottom:clamp(2.75rem,6vw,4.5rem); }
.win-hero__mosaic{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; transform:scale(1.06); filter:blur(5px) grayscale(1) brightness(1.05); }
.win-hero__row{ display:flex; flex:1 1 0; min-height:0; width:max-content; will-change:transform; }
.win-hero__row img{ height:100%; width:auto; flex:0 0 auto; object-fit:cover; }
.win-hero__row--a{ animation:winMosaicA 32s linear infinite; }
.win-hero__row--b{ animation:winMosaicB 40s linear infinite; }
@keyframes winMosaicA{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes winMosaicB{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* keep the mosaic moving even when the OS/browser requests reduced motion (like the partners marquee) */
@media (prefers-reduced-motion: reduce){
  .win-hero__row--a{ animation:winMosaicA 32s linear infinite !important; }
  .win-hero__row--b{ animation:winMosaicB 40s linear infinite !important; }
}

/* ---- Supplier brand logos (Aluminco / Laminam / Puricelli) ---- */
.win-hero__logo{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:.7rem 1.15rem; margin-bottom:1.4rem; box-shadow:0 12px 34px rgba(0,0,0,.28); }
.win-hero__logo img{ height:clamp(34px,5vw,52px); width:auto; max-width:200px; object-fit:contain; display:block; }
.win-card__logo{ position:absolute; top:1rem; right:1.15rem; z-index:2; display:inline-flex; align-items:center; justify-content:center; }
.win-card__logo img{ height:42px; width:auto; max-width:180px; object-fit:contain; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.65)); }

/* ---- Systems section scroll-reveal (JS adds .win-reveal, then .is-in in view) ---- */
.win-reveal{ opacity:0; }
.win-reveal.is-in{ animation:winReveal .9s var(--ease,cubic-bezier(.22,1,.36,1)) both; animation-delay:var(--win-rd,0ms); }
@keyframes winReveal{ from{ opacity:0; transform:translateY(46px); } to{ opacity:1; transform:none; } }
/* run the reveal even under reduced-motion (the global rule below would freeze it) */
@media (prefers-reduced-motion: reduce){
  .win-reveal.is-in{ animation:winReveal .9s var(--ease,cubic-bezier(.22,1,.36,1)) both !important; animation-delay:var(--win-rd,0ms) !important; }
}
.win-hero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,10,10,.26),rgba(10,10,10,.42)); }
.win-hero__inner{ position:relative; z-index:2; max-width:92ch; margin-inline:auto; text-align:center; }
.win-hero__title{ font-size:clamp(2rem,5vw,3.4rem); font-weight:300; line-height:1.08; letter-spacing:.01em; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.8), 0 1px 5px rgba(0,0,0,.55); }
.win-hero__lead{ margin-top:clamp(1.1rem,2.5vw,1.6rem); color:rgba(255,255,255,.92); font-size:clamp(.98rem,1.4vw,1.12rem); line-height:1.75; text-shadow:0 1px 18px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5); }
.win-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); align-items:start; gap:clamp(1.4rem,3vw,2.25rem); margin-top:clamp(2.5rem,5vw,4rem); counter-reset:wincard; }
.win-card{ counter-increment:wincard; position:relative; background:#fff; border:2px solid #000; overflow:hidden; font-family:'Accord', 'Inter', sans-serif; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.win-card:hover{ transform:translate(-5px,-5px); box-shadow:14px 14px 0 #000; }
.win-card.is-open{ transform:none; box-shadow:none; }
.win-card__head{ display:block; width:100%; text-align:left; background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; color:inherit; }
.win-card__imgwrap{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#000; }
.win-card__img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; filter:grayscale(1) contrast(1.05); transition:transform .7s var(--ease), filter .5s var(--ease); }
/* fit-to-frame: full photo (contain) over a blurred backdrop of itself so nothing is cropped and no empty bars - regular product cards only (not the profile window cards) */
.win-card__imgwrap:not(:has(.win-card__img--profile))::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--card-bg,#161616) center/cover no-repeat; filter:blur(24px) brightness(.5) saturate(1.15); transform:scale(1.2); }
.win-card__imgwrap .win-card__logo{ z-index:4; }
.win-card__imgwrap::after{ z-index:4; }
.win-card:hover .win-card__img{ transform:scale(1.06); filter:grayscale(0) contrast(1); }
/* Window cards (.win-card__img--profile): a real building photo sits in the background
   while the transparent profile render floats above the card in 3D (perspective tilt +
   soft drop shadow). Applied to all five systems - W4750, W450, MasterLine 8,
   ConceptSystem 77, Elvial W77. */
.win-card__imgwrap:has(.win-card__img--profile){
  background:#0c0c0c url('/assets/img/cat-windows.webp') center/cover no-repeat;
  overflow:visible; position:relative; z-index:2; /* lift above the title bar so the profile can dip onto it */
}
.win-card__imgwrap:has(.win-card__img--profile)::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(125% 95% at 50% 38%, rgba(10,10,10,.32), rgba(8,8,8,.8));
}
.win-card__imgwrap:has(.win-card__img--profile)::after{ z-index:3; } /* keep the 02 number on top */
/* Every render webp is pre-baked onto an identical 520×660 canvas with its content
   tight-cropped + area-normalised and centred - so a single height makes all five read
   as the SAME visual size, regardless of their very different cross-section proportions. */
.win-card__img--profile{
  position:absolute; left:72%; bottom:0; z-index:5;       /* low, on the right between centre and the + */
  width:auto; height:clamp(92px,14.5vw,138px);
  object-fit:contain; object-position:center bottom; padding:0;
  filter:grayscale(.05) drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 5px 10px rgba(0,0,0,.42));
  transform:translate(-50%,30%) perspective(1000px) rotateY(-9deg) rotateX(3deg); /* sit down onto the black bar */
  transform-origin:center bottom; backface-visibility:hidden;
  transition:transform .65s var(--ease), filter .5s var(--ease);
}
.win-card:hover .win-card__img--profile{
  transform:translate(-50%,26%) perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.06);
  filter:grayscale(0) drop-shadow(0 22px 34px rgba(0,0,0,.6)) drop-shadow(0 7px 14px rgba(0,0,0,.46));
}
.win-card.is-open .win-card__img{ filter:grayscale(0) contrast(1); }
.win-card__imgwrap::after{ content:'0' counter(wincard); position:absolute; top:0; left:0; background:#000; color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.18em; padding:.55rem .95rem; }
/* Hub thumbnails = brand logo only, centred on white (no photo) */
.win-card__imgwrap--brand{ display:flex; align-items:center; justify-content:center; background:#fff; }
.win-card__imgwrap--brand::before{ display:none; }
.win-card__brand{ width:auto; height:auto; max-width:60%; max-height:52%; object-fit:contain; transition:transform .5s var(--ease); }
.win-card:hover .win-card__brand{ transform:scale(1.04); }
.win-card__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem 1.5rem; background:#000; }
.win-card__name{ font-size:1.32rem; font-weight:700; color:#fff; letter-spacing:.02em; text-transform:uppercase; }
.win-card__toggle{ position:relative; width:2.1rem; height:2.1rem; border-radius:50%; border:2px solid #fff; flex-shrink:0; transition:transform .4s var(--ease); }
.win-card__toggle::before,.win-card__toggle::after{ content:''; position:absolute; top:50%; left:50%; width:.85rem; height:2px; background:#fff; transform:translate(-50%,-50%); }
.win-card__toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.win-card.is-open .win-card__toggle{ transform:rotate(135deg); }
.win-card__details{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.win-card.is-open .win-card__details{ max-height:720px; }
.win-card__details-inner{ padding:1.6rem 1.5rem 1.75rem; }
.win-card__desc{ color:#161616; font-size:.98rem; line-height:1.7; }
.win-card__benefits{ list-style:none; margin:1.5rem 0; display:flex; flex-direction:column; }
.win-card__benefits li{ display:flex; align-items:center; gap:.85rem; font-size:.95rem; color:#000; font-weight:600; padding:.85rem 0; border-bottom:1px solid #e6e6e6; }
.win-card__benefits li:first-child{ border-top:1px solid #e6e6e6; }
.win-check{ display:grid; place-items:center; width:1.45rem; height:1.45rem; border-radius:50%; background:#000; color:#fff; font-size:.72rem; flex-shrink:0; }
.win-card__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:1.7rem; }
.win-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.8rem; background:#000; color:#fff; border:2px solid #000; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:background .3s var(--ease), color .3s var(--ease); }
.win-btn:hover{ background:#fff; color:#000; }
.win-btn--lg{ padding:1.05rem 2.4rem; font-size:.84rem; }
.win-dl{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#000; border-bottom:2px solid #000; padding-bottom:3px; transition:opacity .3s var(--ease); }
.win-dl:hover{ opacity:.5; }
.win-dl__ico{ display:grid; place-items:center; width:1.45rem; height:1.45rem; border-radius:50%; background:#000; color:#fff; font-size:.8rem; }
.win-closing{ text-align:center; max-width:58ch; margin:clamp(2.5rem,5vw,3.75rem) auto 0; }
.win-closing p{ color:#161616; font-size:1rem; line-height:1.7; margin-bottom:1.6rem; }
/* windows - key characteristics block */
.win-feats{ margin-top:clamp(3.5rem,7vw,6rem); }
.win-feats__title{ text-align:center; font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:300; letter-spacing:.01em; color:#000; margin-bottom:clamp(2rem,4vw,3.25rem); }
.win-feats__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:clamp(1.6rem,3vw,2.75rem); }
.win-feat{ padding-top:1.4rem; border-top:2px solid #000; }
.win-feat__no{ display:block; font-size:1.55rem; font-weight:800; letter-spacing:.05em; color:#000; }
.win-feat__title{ margin-top:.7rem; font-size:1.08rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#000; }
.win-feat__text{ margin-top:.7rem; color:#333; font-size:.92rem; line-height:1.7; }
/* "Dyer" hub grid - centred flex so a lone last card sits in the middle */
.win-grid--hub{ display:flex; flex-wrap:wrap; justify-content:center; }
.win-grid--hub > .win-card{ flex:1 1 320px; max-width:460px; }
/* "Dyer" hub cards - navigational (link) variant, body always visible */
.win-hubcard{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.win-card__go{ font-size:1.4rem; line-height:1; color:#fff; flex-shrink:0; transition:transform .4s var(--ease); }
.win-hubcard:hover .win-card__go{ transform:translateX(6px); }
.win-hubcard__body{ display:flex; flex-direction:column; flex:1; padding:1.6rem 1.5rem 1.75rem; }
.win-hubcard__desc{ color:#161616; font-size:.98rem; line-height:1.7; }
.win-hubcard__cta{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.4rem; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#000; }
.win-hubcard__cta span{ transition:transform .4s var(--ease); }
.win-hubcard:hover .win-hubcard__cta span{ transform:translateX(6px); }
/* windows cards - responsive */
@media (max-width: 640px){
  .win-card__bar{ padding:1.05rem 1.15rem; }
  .win-card__name{ font-size:1.12rem; }
  .win-card__toggle{ width:1.85rem; height:1.85rem; }
  .win-card__details-inner{ padding:1.3rem 1.15rem 1.5rem; }
  .win-card__imgwrap{ aspect-ratio:16/11; }
  /* tame the 3D floating profile on small cards so it doesn't collide with the title bar */
  .win-card__img--profile{
    transform:translate(-50%,28%) perspective(900px) rotateY(-6deg) rotateX(2deg);
    filter:grayscale(.05) drop-shadow(0 10px 16px rgba(0,0,0,.5));
  }
  .win-card:hover .win-card__img--profile{
    transform:translate(-50%,26%) perspective(900px) rotateY(-6deg) rotateX(2deg) scale(1.04);
  }
  .win-card:hover{ transform:none; box-shadow:none; } /* no offset jump on touch */
  .win-card__actions{ gap:.8rem 1rem; }
  .win-btn, .win-btn--lg{ width:100%; justify-content:center; }
  .win-dl{ width:100%; justify-content:center; padding-bottom:0; border-bottom:0; }
}

/* ============================================================
   SYSTEMS PAGES - cross-browser safety + responsive + smooth
   ============================================================ */
/* Failsafe: if @keyframes are unsupported, the section still shows */
.win-reveal.is-in{ opacity:1; }

/* WebKit prefixes so the mosaic + reveal animate on older Safari/Chrome/iOS */
@-webkit-keyframes winMosaicA{ from{ -webkit-transform:translateX(0); } to{ -webkit-transform:translateX(-50%); } }
@-webkit-keyframes winMosaicB{ from{ -webkit-transform:translateX(-50%); } to{ -webkit-transform:translateX(0); } }
@-webkit-keyframes winReveal{ from{ opacity:0; -webkit-transform:translateY(46px); } to{ opacity:1; -webkit-transform:translateY(0); } }
.win-hero__row--a{ -webkit-animation:winMosaicA 32s linear infinite; }
.win-hero__row--b{ -webkit-animation:winMosaicB 40s linear infinite; }
.win-reveal.is-in{ -webkit-animation:winReveal .9s var(--ease,cubic-bezier(.22,1,.36,1)) both; -webkit-animation-delay:var(--win-rd,0ms); }

/* `inset` fallback for browsers that only know top/right/bottom/left */
.win-hero__mosaic,.win-hero__veil{ top:0; right:0; bottom:0; left:0; }

/* `aspect-ratio` fallback (Safari < 15 / older Chrome) - padding-ratio box */
@supports not (aspect-ratio: 1 / 1){
  .win-card__imgwrap{ height:0; padding-top:62.5%; }
  .win-card__img{ position:absolute; top:0; left:0; }
  .win-card__img--profile{ top:auto; left:72%; right:auto; bottom:0; } /* keep profile low, right of centre */
}

/* keep the accordion + image transitions smooth even under reduced-motion */
@media (prefers-reduced-motion: reduce){
  .win-card__details{ transition:max-height .55s var(--ease) !important; }
  .win-card__img{ transition:transform .7s var(--ease), filter .5s var(--ease) !important; }
  .win-card,.win-card__toggle,.win-btn,.win-feat{ transition-duration:.4s !important; }
}

/* subtle motion on the feature cards */
.win-feat{ transition:transform .4s var(--ease); }
.win-feat:hover{ transform:translateY(-4px); }

/* prevent any rare horizontal overflow from the mosaic rows */
.win-hero{ max-width:100vw; }

/* Tablet */
@media (max-width: 900px){
  .win-hero{ min-height:60vh; }
  .win-grid{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
}
/* Phones - compact, content-height hero so it never eats the screen */
@media (max-width: 640px){
  .win-hero{ height:auto; min-height:0; max-height:none;
    padding:clamp(4.5rem,17vh,6rem) 1.25rem clamp(2.25rem,8vw,3rem); }
  .win-hero__mosaic{ filter:blur(4px) grayscale(1) brightness(1.05); }
  .win-feat:hover{ transform:none; }
}
@media (max-width: 380px){
  .win-card__name{ font-size:1rem; letter-spacing:.01em; }
  .win-card__imgwrap::after{ font-size:.7rem; padding:.45rem .75rem; }
}

.footer{ background:var(--c-black); color:#fff; padding-block:clamp(3rem,5vw,4.5rem); }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:2.5rem; align-items:start; }
.footer__brand .brand__mark{ font-size:1.6rem; }
.footer__brand p{ margin-top:1rem; color:var(--c-gray-2); max-width:38ch; font-size:.92rem; }
.footer__nav{ display:flex; flex-direction:column; gap:.8rem; }
.footer__nav a{ color:rgba(255,255,255,.75); font-size:.9rem; transition:color .3s; width:fit-content; }
.footer__nav a:hover{ color:#fff; }
.footer__legal{ color:var(--c-gray); font-size:.82rem; text-align:right; }
/* footer social icons (Instagram / TikTok / Facebook) - sit between the lang switch and © line */
.footer__social{ display:flex; gap:1.5rem; margin:1.1rem 0; }
.footer__legal .footer__social{ justify-content:flex-end; }
.footer__social-link{ display:grid; place-items:center; width:2.55rem; height:2.55rem; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.footer__social-link:hover{ background:#fff; color:#000; border-color:#fff; transform:translateY(-3px); }
.footer__social-link svg{ width:18px; height:18px; display:block; }

/* ============================================================
   REVEAL ANIMATIONS (base state; JS adds motion)
   ============================================================ */
[data-reveal]{ opacity:0; }
.js-ready [data-reveal]{ will-change:transform, opacity; }
.no-js [data-reveal]{ opacity:1; }

/* Line-mask reveal (created by JS only when motion is allowed) */
.ln{ display:block; overflow:hidden; }
.ln-i{ display:block; will-change:transform; }
.hero-ln{ display:block; will-change:transform; }

/* Lenis smooth scroll */
html.lenis,
html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* desktop header crowd band (esp. German) before the mobile drawer kicks in */
@media (max-width:1180px){
  .header__inner{ gap:1.25rem; }
  .nav{ gap:clamp(1rem,1.8vw,1.8rem); }
  .header__actions{ gap:.75rem; }
}
@media (max-width:1080px){
  .nav{
    position:fixed; top:0; right:0; left:auto; width:min(380px,84vw);
    height:100vh; height:100dvh;
    background:var(--c-white); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:1.1rem; padding:5.5rem var(--pad) 3rem; transform:translateX(100%);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:transform .55s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.12);
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__link{ color:var(--c-black); font-size:1.4rem; font-weight:300; }
  .nav__link--mobile-cta{ display:block; }
  .burger{ display:flex; }
  .header__actions .btn--solid{ display:none; }
  .header__actions > .lang-switch{ display:none; }
  .lang-switch--mobile{ display:flex; align-items:center; margin-top:1rem; gap:1.25rem; }
  .lang-switch--mobile .lang-switch__link,
  .lang-switch--mobile .lang-switch__sep{ color:var(--c-black); font-size:1rem; }
  .lang-switch--mobile .lang-switch__link{ min-height:44px; display:inline-flex; align-items:center; padding:.4rem .55rem; }
  .lang-switch--mobile .lang-switch__link.is-active::after{ background:var(--c-wood); }

  /* products mega-menu -> accordion on mobile */
  .nav__item.has-dropdown{ display:block; width:100%; }
  .nav__dd-trigger{ width:100%; justify-content:space-between; font-size:1.4rem; font-weight:300; color:var(--c-black); padding:.4rem 0; }
  .nav__caret{ width:9px; height:9px; }
  .dropdown{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    border:none; border-radius:0; box-shadow:none; padding:0; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .dropdown::before{ display:none; }
  .has-dropdown.is-open .dropdown{ max-height:1200px; }
  .has-dropdown.is-open > .nav__dd-trigger .nav__caret{ transform:rotate(225deg) translateY(2px); }
  .dropdown__list{ padding:.3rem 0 .8rem; }
  .dropdown__link{ font-size:1.05rem; padding:.6rem 0; min-height:44px; }
  .dropdown__link:hover{ background:none; padding-left:0; color:var(--c-black); }
  .dropdown__row.has-sub{ display:flex; flex-wrap:wrap; align-items:center; }
  .dropdown__link--parent{ flex:1; }
  .dropdown__row.has-sub > .dropdown__link--parent::after{ display:none; }
  .dropdown__caret{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; background:none; border:none; cursor:pointer;
  }
  .dropdown__caret::after{ content:""; width:9px; height:9px; border-right:1.5px solid var(--c-graphite); border-bottom:1.5px solid var(--c-graphite); transform:rotate(45deg); transition:transform .35s var(--ease); }
  .dropdown__row.is-open .dropdown__caret::after{ transform:rotate(225deg); }
  .dropdown__sub{
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    border:none; border-radius:0; box-shadow:none; padding:0; min-width:0; width:100%;
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .dropdown__row.is-open .dropdown__sub{ max-height:600px; }
  .dropdown__sub::before{ display:none; }
  .dropdown__sublink{ padding:.5rem 0 .5rem 1.2rem; font-size:1rem; color:var(--c-gray); min-height:42px; display:flex; align-items:center; }
  .dropdown__sublink:hover{ background:none; padding-left:1.2rem; }
  .why__layout{ grid-template-columns:1fr; }
  .section-head--sticky{ position:static; }
  .contact__grid{ grid-template-columns:1fr; }
}

/* hero copy vs. numbered rail collision band - drop the labels, keep the numbers */
@media (max-width:1024px){
  .hero-nav__item{ min-width:0; padding-left:1rem; }
  .hero-nav__label{ display:none; }
}
@media (max-width:820px){
  .hero-content{ max-width:100%; padding-right:var(--pad); }
  .hero-nav{ display:none; }
  .gallery{ column-count:2; }
  .timeline{ grid-template-columns:repeat(2,1fr); gap:2.5rem 1.5rem; }
  .timeline::before{ display:none; }
  .stats__grid{ grid-template-columns:1fr 1fr; gap:2.5rem 2rem; }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ min-height:55vh; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__legal{ text-align:left; }
  .footer__legal .footer__social{ justify-content:flex-start; margin-left:-0.72rem; } /* pull the round buttons so the icon glyph lines up with the text on the left */
}

@media (max-width:560px){
  .categories-grid{ grid-template-columns:1fr; grid-auto-rows:minmax(300px,46vh); }
  .cat--tall{ grid-row:span 1; }
  .cat--wide{ grid-column:auto; }
  .gallery{ column-count:1; }
  .why__grid{ grid-template-columns:1fr; }
  .contact__form{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   SMALL-PHONE POLISH - tighter rhythm, comfortable type & taps
   ============================================================ */
@media (max-width:560px){
  :root{ --section-y: clamp(3.25rem, 12vw, 5rem); }   /* trim dead space between sections */
  .section-head{ margin-bottom:clamp(2rem, 9vw, 3rem); }
  .eyebrow{ letter-spacing:.2em; margin-bottom:1.1rem; }
  .btn{ min-height:46px; }                            /* comfortable tap target */
  .gallery-filters{ gap:.55rem; }
  .filter{ padding:.7rem 1.15rem; }
  .hero-desc{ margin-bottom:2rem; }
  .footer__inner{ gap:2rem; }
}
@media (max-width:400px){
  :root{ --pad: clamp(1.15rem, 5vw, 5.5rem); }        /* a touch more usable width */
  .hero-title{ font-size:clamp(2.35rem, 12.5vw, 3rem); }
  .categories-head .section-title{ font-size:clamp(2rem, 9.5vw, 2.6rem); }
  .section-title{ font-size:clamp(1.95rem, 9vw, 2.4rem); }
}

/* ---- Lightbox (custom, dependency-free) ---- */
html.lb-open{ overflow:hidden; }
.lb{ position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center;
  background:rgba(10,10,10,.92); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s var(--ease); }
.lb.is-open{ display:flex; opacity:1; }
.lb__stage{ margin:0; max-width:92vw; max-height:88vh; display:flex; align-items:center; justify-content:center; }
.lb__img{ max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5); opacity:0; transform:scale(.97);
  transition:opacity .35s var(--ease), transform .35s var(--ease); }
.lb__img.is-in{ opacity:1; transform:none; }
.lb__close{ position:absolute; top:1.1rem; right:1.3rem; width:48px; height:48px; font-size:2rem; line-height:1;
  color:#fff; background:none; border:0; cursor:pointer; opacity:.85; transition:opacity .25s; z-index:2; }
.lb__close:hover{ opacity:1; }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; line-height:1;
  color:#fff; background:rgba(255,255,255,.08); border:0; border-radius:50%; cursor:pointer;
  opacity:.85; transition:opacity .25s, background .25s; z-index:2; }
.lb__nav:hover{ opacity:1; background:rgba(255,255,255,.18); }
.lb__prev{ left:1.2rem; } .lb__next{ right:1.2rem; }
@media (max-width:600px){ .lb__nav{ width:44px; height:44px; font-size:1.9rem; } .lb__prev{ left:.4rem; } .lb__next{ right:.4rem; } }

/* NOTE: We intentionally do NOT freeze animations under prefers-reduced-motion.
   The brand's motion design (subtle fades/slides, hero slider, moving mosaic) is
   part of the identity and must show on every device, including machines that have
   "reduce motion" enabled system-wide. JS mirrors this (prefersReduced = false). */