/* =========================================================
   BERGHOFER BALKONE – STARTSEITE / REFACTOR PHASE 2
   Stand: 2026-08-21

   Eigenständige CSS-Datei für die Sicherheitskopie der Startseite.
   Kein zusätzliches style.css nötig.

   Aufbau:
   1. Design Tokens & Base
   2. Typografie
   3. Buttons
   4. Header & Navigation
   5. Hero
   6. Intro
   7. NUWI Showcase
   8. NUWI Farbkarte
   9. Mini Galerie
   10. Konfigurator
   11. DIY / Eigenleistung
   12. Vorteile
   13. Footer
   14. Responsive
========================================================= */


/* =========================================================
   1) DESIGN TOKENS & BASE
========================================================= */

:root{
  --bg:#ffffff;
  --text:#585555;
  --muted:#666666;
  --line:#e6e6e6;
  --surface:#ffffff;
  --surface-soft:#f7f7f7;

  --accent:#ff0000;
  --accent-strong:#e00000;

  --nuwi-light:#466282;
  --nuwi-dark:#243a5e;

  --header-bg:#dfdee0;

  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-soft:0 12px 30px rgba(0,0,0,.08);

  --content-max:2300px;

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --space-6:32px;
  --space-7:42px;
  --space-8:56px;
  --space-9:72px;
  --space-10:80px;

  --transition:.22s ease;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:140px;
}

body{
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text);

  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:clamp(18px, 1.15vw, 22px);
  line-height:1.6;
}

img{
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

.container{
  width:min(100%, var(--content-max));
  margin-inline:auto;
  padding-inline:clamp(16px, 2.6vw, 64px);
}

.accent{
  color:var(--accent);
  font-weight:800;
}


/* =========================================================
   2) TYPOGRAFIE
========================================================= */

.section-kicker{
  margin:0 0 var(--space-2);
  color:var(--muted);

  font-size:16px;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.5;
  text-transform:uppercase;
}

.section-kicker__accent{
  color:var(--accent);
  font-weight:800;
}

.section-heading{
  margin:0 0 16px;
  color:var(--text);

  font-size:clamp(30px, 2.4vw, 40px);
  font-weight:400;
  line-height:1.2;
}

.section-copy{
  max-width:72ch;
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.section-copy p{
  margin:0 0 18px;
}

.section-copy p:last-child{
  margin-bottom:0;
}

.section-copy--wide{
  max-width:1050px;
}


/* =========================================================
   3) BUTTON SYSTEM
========================================================= */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:46px;
  padding:11px 20px;

  border:1px solid var(--line);
  border-radius:var(--radius-pill);

  font-size:18px;
  font-weight:700;
  line-height:1.2;
  text-align:center;

  cursor:pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.button:hover{
  transform:translateY(-1px);
}

.button--primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

.button--primary:hover{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
}

.button--secondary{
  background:#fff;
  color:var(--text);
}

.button--secondary:hover{
  background:var(--surface-soft);
}

.button--nuwi{
  border-color:var(--nuwi-dark);
  background:var(--nuwi-dark);
  color:#fff;
}

.button--nuwi:hover{
  background:#1c304f;
  border-color:#1c304f;
}

.button--compact{
  min-height:42px;
  padding:10px 15px;
  font-size:17px;
}

.button--wide{
  min-width:240px;
}

.button--map{
  width:auto;
  max-width:300px;
}


/* =========================================================
   4) HEADER & NAVIGATION
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;

  background:rgba(223,222,224,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}

.site-header__row{
  min-height:108px;

  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:clamp(18px, 2vw, 34px);

  padding-top:5px;
  padding-bottom:5px;
}

.site-brand{
  display:inline-flex;
  align-items:center;
}

.site-brand__logo{
  width:auto;
  height:clamp(70px, 7vw, 108px);
  display:block;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  margin:0;
  padding:0;

  list-style:none;
}

.site-nav__item{
  position:relative;
}

.site-nav__toggle,
.site-nav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:10px 11px;

  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--text);

  font-weight:600;
  cursor:pointer;

  transition:background var(--transition);
}

.site-nav__toggle:hover,
.site-nav__link:hover{
  background:rgba(255,255,255,.58);
}

.site-nav__dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:20;

  display:none;
  min-width:240px;
  padding:8px;

  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.site-nav__dropdown a{
  display:block;
  padding:10px 12px;

  border-radius:10px;
  color:var(--text);
  font-weight:600;
}

.site-nav__dropdown a:hover{
  background:var(--surface-soft);
}

.site-nav__item:hover > .site-nav__dropdown,
.site-nav__item:focus-within > .site-nav__dropdown{
  display:block;
}

.site-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.site-header__nuwi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
}

.site-header__nuwi img{
  width:auto;
  height:48px;
  display:block;
}

.site-menu-toggle{
  display:none;
  width:46px;
  height:46px;

  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;

  cursor:pointer;
  position:relative;
}

.site-menu-toggle span{
  position:absolute;
  left:12px;
  right:12px;

  height:2px;
  border-radius:2px;
  background:var(--text);

  transition:
    top .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

.site-menu-toggle span:nth-child(1){ top:16px; }
.site-menu-toggle span:nth-child(2){ top:22px; }
.site-menu-toggle span:nth-child(3){ top:28px; }

.site-header.is-open .site-menu-toggle span:nth-child(1){
  top:22px;
  transform:rotate(45deg);
}

.site-header.is-open .site-menu-toggle span:nth-child(2){
  opacity:0;
}

.site-header.is-open .site-menu-toggle span:nth-child(3){
  top:22px;
  transform:rotate(-45deg);
}


/* =========================================================
   5) HOME HERO
========================================================= */

.home-hero{
  padding:40px 40px 4px;
}

.home-hero__inner{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;

  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1.2fr);
  gap:20px;
  align-items:stretch;
}

.hero-slider{
  position:relative;
  order:2;

  width:100%;
  height:clamp(320px, 38vw, 700px);

  overflow:hidden;
  background:#f3f3f3;
}

.hero-slider__track{
  display:flex;
  height:100%;

  transition:transform .6s ease;
  will-change:transform;
}

.hero-slider__slide{
  flex:0 0 100%;
  width:100%;
  height:100%;

  overflow:hidden;
}

.hero-slider__slide img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;
}

.hero-slider__controls{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-slider__button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-pill);
  background:#eaeaea;
  color:var(--accent);

  font-size:30px;
  line-height:1;

  cursor:pointer;
  pointer-events:auto;

  transition:background var(--transition);
}

.hero-slider__button:hover{
  background:#fff;
}

.hero-slider__button.prev{
  left:14px;
}

.hero-slider__button.next{
  right:14px;
}

.hero-slider__dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);

  display:flex;
  gap:8px;
  padding:8px 10px;

  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-pill);
  background:rgba(0,0,0,.22);

  pointer-events:auto;
  backdrop-filter:blur(8px);
}

.hero-slider__dot{
  width:10px;
  height:10px;
  padding:0;

  border:0;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.5);

  cursor:pointer;
}

.hero-slider__dot.active{
  background:#fff;
}

.home-hero__copy{
  order:1;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;

  min-width:0;
  max-width:660px;
}

.home-hero__eyebrow{
  margin-top:50px;

  color:var(--muted);
  font-size:18px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

.home-hero__headline{
  margin:0;

  color:#111;
  font-size:clamp(42px, 4vw, 60px);
  font-weight:300;
  letter-spacing:1px;
  line-height:1.1;
  text-transform:uppercase;
}

.home-hero__quality{
  margin-top:30px;
  padding-left:50px;
}

.home-hero__quality img{
  width:300px;
  height:auto;
  display:block;
}


/* =========================================================
   6) HOME INTRO
========================================================= */

.home-intro{
  padding:var(--space-9) 0;background:linear-gradient(
    135deg,
    #ffffff 0%,
    #f8f8f8 20%,
    #eeeeee 100%
  );
}

.home-intro__inner{
  padding:58px clamp(24px, 4vw, 72px);
 
}

.home-intro__title{
  margin:0;

  color:var(--text);
  font-size:clamp(30px, 2.5vw, 40px);
  font-weight:300;
  line-height:1.25;
  text-align:center;
}

.home-intro__brand{
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}

.home-intro__divider{
  width:100%;
  height:1px;

  margin:24px 0 30px;
  background:var(--text);
  opacity:.55;
}

.home-intro__text{
  max-width:1000px;
  margin-inline:auto;

  color:var(--muted);
  text-align:center;
}

.home-intro__text p{
  margin:0;
  line-height:1.65;
}


/* =========================================================
   7) NUWI SHOWCASE
========================================================= */

.nuwi-showcase{
  padding:var(--space-10) 0;
}

.nuwi-showcase .container{
  max-width:1600px;
}

.nuwi-showcase__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}

.nuwi-showcase__copy,
.nuwi-showcase__media{
  min-width:0;
}

.nuwi-showcase__points{
  display:grid;
  gap:10px;
  margin:36px 0;
}

.nuwi-showcase__point{
  padding:10px 12px;

  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;

  color:var(--muted);
  font-weight:600;
}

.nuwi-showcase__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nuwi-showcase__main-image,
.nuwi-showcase__thumb{
  margin:0;
  overflow:hidden;

  border-radius:18px;
  background:#fff;
}

.nuwi-showcase__main-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.nuwi-showcase__thumbs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}

.nuwi-showcase__thumb{
  aspect-ratio:1 / 1;
}

.nuwi-showcase__thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


/* =========================================================
   8) NUWI FARBKARTE
========================================================= */

.nuwi-intro-section{
  padding:var(--space-9) 0;
}

.nuwi-intro{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(180px, 250px) auto;
  gap:clamp(22px, 3vw, 42px);
  align-items:center;

  padding:26px;

  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #ffffff, #f6f6f6);
}

.nuwi-intro__copy{
  min-width:0;
}

.nuwi-intro__color-card{
  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

.nuwi-intro__color-card img{
  width:min(220px, 100%);
  height:auto;
  display:block;
}

.nuwi-intro__actions{
  align-self:start;
  justify-self:end;

  display:flex;
  flex-wrap:nowrap;
  gap:10px;
}


/* =========================================================
   9) MINI GALERIE
========================================================= */

.home-mini-gallery{
  padding:0 0 80px;
}

.home-mini-gallery .section-copy{
  margin-bottom:24px;
}

.mg{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  gap:12px;
  align-items:center;
}

.mg-viewport{
  min-width:0;
  overflow:hidden;
  border-radius:18px;
}

.mg-track{
  display:flex;
  transition:transform .55s ease;
  will-change:transform;
}

.mg-page{
  flex:0 0 100%;

  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  padding:2px;
}

.mg-tile{
  position:relative;
  margin:0;

  aspect-ratio:16 / 10;
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.mg-tile img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  transition:transform .25s ease;
}

.mg-tile:hover img{
  transform:scale(1.03);
}

.mg-corner{
  position:absolute;

  padding:8px 12px;

  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.9);

  color:var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
}

.mg-corner:hover{
  background:#fff;
}

.mg-corner.bl{
  left:12px;
  bottom:12px;
}

.mg-btn{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;

  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.mg-btn:hover{
  background:var(--surface-soft);
}

.mg-dots{
  display:flex;
  justify-content:center;
  gap:8px;

  margin-top:14px;
}

.mg-dot{
  width:10px;
  height:10px;
  padding:0;

  border:0;
  border-radius:var(--radius-pill);
  background:rgba(0,0,0,.18);

  cursor:pointer;
}

.mg-dot.active{
  background:rgba(0,0,0,.55);
}


/* =========================================================
   10) KONFIGURATOR
========================================================= */

.kfg-sync{
  padding:var(--space-9) 0;
}

.kfg-sync-wrap{
  display:grid;
  grid-template-columns:minmax(360px, 1.1fr) minmax(0, 2fr);
  gap:26px;
  align-items:stretch;
}

.kfg-left{
  min-width:0;
  padding:26px;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.konfi-mockup{
  position:relative;

  width:100%;
  margin:18px 0 0;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.konfi-screen{
  position:absolute;
  inset:0;
  z-index:1;

  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
}

.konfi-overlay{
  position:relative;
  z-index:2;

  width:100%;
  height:auto;
  display:block;

  pointer-events:none;
}


.kfg-lead{
  max-width:60ch;
  margin:14px 0 0;

  color:var(--muted);
  font-weight:600;
  line-height:1.7;
}

.kfg-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:14px;
}

.kfg-right{
  min-width:0;
  display:flex;
}

.kfg-big{
  position:relative;

  width:100%;
  min-height:420px;
  aspect-ratio:16 / 9;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.kfg-big img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.kfg-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-pill);
  background:#e2e2e2;
  color:var(--accent);

  font-size:30px;
  line-height:1;

  cursor:pointer;
}

.kfg-btn:hover{
  background:#fff;
}

.kfg-btn.prev{
  left:14px;
}

.kfg-btn.next{
  right:14px;
}

.kfg-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);

  display:flex;
  gap:8px;
  padding:8px 10px;

  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-pill);
  background:rgba(0,0,0,.22);

  backdrop-filter:blur(8px);
}

.kfg-dot{
  width:10px;
  height:10px;
  padding:0;

  border:0;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.45);

  cursor:pointer;
}

.kfg-dot.active{
  background:#fff;
}

.kfg-sync-note-section{
 margin:25px 0px 0px 0px;


  background:linear-gradient(
    135deg,
    #ffffff 0%,
    #f8f8f8 20%,
    #eeeeee 100%
  );
}

.kfg-sync-note{
  width:100%;
  max-width:1800px;
 
}

.kfg-sync-note p{
  width:100%;
  max-width:none;
  margin:0px 0px 0px 30px;

  color:var(--muted);
  font-weight:600;
  line-height:1.75;
}

/* =========================================================
   11) DIY / EIGENLEISTUNG
========================================================= */

.diy-section{
  padding:var(--space-10) 0;
}

.diy-section .container{
  max-width:1600px;
}

.diy-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(380px, .85fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}

.diy-content,
.diy-media{
  min-width:0;
}

.diy-intro{
  max-width:78ch;
  margin:0 0 38px;

  color:var(--muted);
  line-height:1.7;
}

.diy-content__lower{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(190px, 280px);
  gap:clamp(24px, 4vw, 52px);
  align-items:center;
}

.diy-detail{
  margin:0;

  color:var(--muted);
  line-height:1.65;
}

.diy-worker{
  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

.diy-worker img{
  width:min(100%, 260px);
  height:auto;
  display:block;

  object-fit:contain;
}

.diy-media__main,
.diy-media__small figure{
  margin:0;
  overflow:hidden;

  border-radius:18px;
  background:#fff;
}

.diy-media__main{
  aspect-ratio:16 / 8.5;
}

.diy-media__main img,
.diy-media__small img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
}

.diy-media__small{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;

  margin-top:14px;
}

.diy-media__small figure{
  aspect-ratio:4 / 3;
}

.diy-support{
  margin-top:28px;
}

.diy-support p{
  margin:0 0 22px;

  color:var(--muted);
  line-height:1.7;
}


/* =========================================================
   12) NUWI VORTEILE
========================================================= */

.benefits-section{
  padding:var(--space-9) 0;
}

.benefits-head{
  max-width:90ch;
  margin-bottom:18px;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;

  margin-top:18px;
}

.benefit-card{
  min-width:0;
  min-height:320px;

  display:flex;
  flex-direction:column;

  padding:18px 18px 16px;

  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.benefit-card__head{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:10px;
}

.benefit-card__icon{
  width:40px;
  height:40px;
  flex:0 0 auto;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;

  font-size:18px;
}

.benefit-card__title{
  margin:0;

  color:#111;
  font-size:18px;
  font-weight:900;
}

.benefit-card__list{
  margin:0;
  padding-left:18px;

  color:var(--muted);
  font-weight:600;
  line-height:1.85;
}

.benefit-card__list li{
  margin:6px 0;
}

.benefit-card__note{
  margin-top:auto;
  padding-top:12px;

  border-top:1px solid var(--line);

  color:var(--muted);
  font-weight:700;
  line-height:1.6;
}

.benefits-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:40px;
}


/* =========================================================
   13) FOOTER
========================================================= */

.footer{
  padding:40px 0;

  border-top:1px solid var(--line);
  background:var(--header-bg);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:18px;
}

.footer-title{
  margin:0 0 10px;
  font-weight:900;
}

.footer-title-logo{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;

  margin:-18px 0 0 -15px;
  padding:0 0 20px;
}

.footer-title-logo img{
  width:auto;
  height:80px;
  display:block;
  opacity:.95;
}

.footer-contact{
  margin-bottom:12px;

  color:var(--muted);
  font-weight:600;
}

.footer a:not(.button){
  display:block;
  padding:6px 0;

  color:var(--muted);
  font-weight:600;
}

.footer a:not(.button):hover{
  color:var(--text);
}

.footer .button{
  display:inline-flex;
}

.footer-cta{
  margin-top:24px;
}

.footer-map{
  width:100%;
  max-width:420px;
  height:180px;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.footer-map-frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.footer-map-link{
  margin-top:12px;
  text-align:center;
}

.footer-nuwi{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;

  margin-top:10px;
  padding:10px 0 !important;
}

.footer-nuwi img{
  width:auto;
  height:40px;
  display:block;

  opacity:.95;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.footer-nuwi:hover img{
  opacity:1;
  transform:translateY(-1px);
}

.tiny{
  margin-top:18px;
  padding-top:14px;

  border-top:1px solid var(--line);

  color:var(--muted);
  font-size:13px;
}


/* =========================================================
   14) TABLET
========================================================= */

@media (max-width:1100px){

  html{
    scroll-padding-top:110px;
  }

  .site-header__row{
    grid-template-columns:auto 1fr auto;
    min-height:90px;
  }

  .site-brand__logo{
    height:clamp(62px, 9vw, 88px);
  }

  .home-hero{
    padding:28px 20px 4px;
  }

  .home-hero__inner{
    grid-template-columns:1fr;
    gap:18px;
  }

  .hero-slider{
    order:1;
    height:clamp(300px, 55vw, 440px);
  }

  .home-hero__copy{
    order:2;
    max-width:100%;
    padding-top:20px;
  }

  .home-hero__eyebrow{
    margin-top:0;
  }

  .home-hero__quality{
    padding-left:0;
  }

  .home-intro__text{
    gap:32px;
  }

  .nuwi-showcase__grid{
    grid-template-columns:1fr;
  }

  .nuwi-showcase__main-image{
    max-width:900px;
  }

  .nuwi-intro{
    grid-template-columns:minmax(0, 1fr) minmax(170px, 220px);
  }

  .nuwi-intro__actions{
    grid-column:1 / -1;
    justify-self:start;
  }

  .mg-page{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .mg-tile{
    aspect-ratio:4 / 3;
  }

  .kfg-sync-wrap{
    grid-template-columns:1fr;
  }

  .kfg-big{
    min-height:0;
  }

  .diy-layout{
    grid-template-columns:1fr;
  }

  .diy-media{
    max-width:900px;
  }

  .benefits-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .benefit-card{
    min-height:auto;
  }

  .footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:32px 24px;
  }

  .footer-map{
    max-width:100%;
  }
}


/* =========================================================
   15) MOBILE NAVIGATION
========================================================= */

@media (max-width:900px){

  .site-header__row{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
  }

  .site-brand{
    min-width:0;
  }

  .site-menu-toggle{
    display:block;
    justify-self:end;
  }

  .site-nav{
    grid-column:1 / -1;

    display:none;
    width:100%;

    flex-direction:column;
    align-items:stretch;
    gap:6px;

    padding:10px 0 6px;
  }

  .site-header.is-open .site-nav{
    display:flex;
  }

  .site-nav__item{
    width:100%;
  }

  .site-nav__toggle,
  .site-nav__link{
    width:100%;
    justify-content:space-between;

    padding:12px;
    text-align:left;
  }

  .site-nav__dropdown{
    position:static;

    min-width:0;
    margin-top:6px;

    border-radius:14px;
    box-shadow:none;

    display:none;
  }

  .site-nav__item:hover > .site-nav__dropdown,
  .site-nav__item:focus-within > .site-nav__dropdown{
    display:none;
  }

  .site-nav__item.is-dropdown-open > .site-nav__dropdown{
    display:block;
  }

  .site-header__actions{
    grid-column:1 / -1;

    display:none;
    width:100%;

    justify-content:flex-start;
    flex-wrap:wrap;

    padding-bottom:10px;
  }

  .site-header.is-open .site-header__actions{
    display:flex;
  }
}


/* =========================================================
   16) SMARTPHONE
========================================================= */

@media (max-width:700px){

  body{
    font-size:18px;
  }

  .container{
    padding-inline:16px;
  }

  .section-kicker{
    font-size:14px;
  }

  .section-heading{
    font-size:28px;
  }

  .button{
    white-space:normal;
  }

  .button--wide{
    min-width:0;
    width:100%;
  }

  .site-header__row{
    min-height:66px;
  }

  .site-brand__logo{
    height:55px;
    max-width:220px;
    object-fit:contain;
  }

  .site-menu-toggle{
    width:42px;
    height:42px;
  }

  .site-menu-toggle span{
    left:10px;
    right:10px;
  }

  .site-menu-toggle span:nth-child(1){ top:14px; }
  .site-menu-toggle span:nth-child(2){ top:20px; }
  .site-menu-toggle span:nth-child(3){ top:26px; }

  .site-header.is-open .site-menu-toggle span:nth-child(1),
  .site-header.is-open .site-menu-toggle span:nth-child(3){
    top:20px;
  }

  .site-header__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .site-header__actions .button{
    width:100%;
  }

  .site-header__nuwi{
    justify-content:flex-start;
  }

  .home-hero{
    padding:18px 10px 4px;
  }

  .hero-slider{
    height:clamp(240px, 65vw, 340px);
  }

  .hero-slider__button{
    width:38px;
    height:38px;
  }

  .hero-slider__button.prev{
    left:8px;
  }

  .hero-slider__button.next{
    right:8px;
  }

  .hero-slider__dots{
    bottom:8px;
    padding:6px 8px;
  }

  .home-hero__copy{
    gap:12px;
    padding-top:8px;
  }

  .home-hero__eyebrow{
    font-size:13px;
    letter-spacing:2px;
  }

  .home-hero__headline{
    font-size:clamp(30px, 10vw, 40px);
    line-height:1.08;
  }

  .home-hero__quality{
    margin-top:18px;
  }

  .home-hero__quality img{
    width:min(260px, 75vw);
  }

  .home-intro{
    padding:42px 0;
  }

  .home-intro__inner{
    padding:38px 18px;
  }

  .home-intro__title{
    font-size:28px;
    text-align:left;
  }

  .home-intro__text{
    grid-template-columns:1fr;
    gap:18px;
  }

  .nuwi-showcase{
    padding:48px 0;
  }

  .nuwi-showcase__thumbs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .nuwi-intro-section{
    padding:42px 0;
  }

  .nuwi-intro{
    grid-template-columns:1fr;
    gap:24px;

    padding:18px;
  }

  .nuwi-intro__color-card{
    justify-content:flex-start;
  }

  .nuwi-intro__color-card img{
    width:min(190px, 65vw);
  }

  .nuwi-intro__actions{
    grid-column:auto;
    width:100%;

    flex-direction:column;
  }

  .nuwi-intro__actions .button{
    width:100%;
  }

  .home-mini-gallery{
    padding-bottom:55px;
  }

  .mg{
    grid-template-columns:36px minmax(0, 1fr) 36px;
    gap:6px;
  }

  .mg-btn{
    width:36px;
    height:36px;
  }

  .mg-page{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .mg-tile{
    aspect-ratio:1 / 1;
    border-radius:12px;
  }

  .mg-corner.bl{
    left:6px;
    bottom:6px;
  }

  .mg-corner{
    padding:6px 8px;
    font-size:10px;
  }

  .kfg-sync{
    padding:45px 0;
  }

  .kfg-left{
    padding:18px;
  }

  .kfg-btn{
    width:38px;
    height:38px;
  }

  .kfg-btn.prev{
    left:8px;
  }

  .kfg-btn.next{
    right:8px;
  }

  .kfg-dots{
    bottom:8px;
    padding:6px 8px;
  }

  .diy-section{
    padding:48px 0;
  }

  .diy-content__lower{
    grid-template-columns:1fr;
    gap:24px;
  }

  .diy-worker{
    justify-content:flex-start;
  }

  .diy-worker img{
    width:min(220px, 70vw);
  }

  .diy-media__small{
    grid-template-columns:1fr;
  }

  .benefits-section{
    padding:48px 0;
  }

  .benefits-grid{
    grid-template-columns:1fr;
  }

  .footer{
    padding:32px 0;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .footer-title-logo{
    margin:0 0 0 -10px;
  }

  .footer-title-logo img{
    height:70px;
  }

  .footer-map{
    height:200px;
  }

  .footer-map-link{
    text-align:left;
  }

  .footer-cta .button{
    width:100%;
  }
}


/* =========================================================
   17) VERY SMALL SCREENS
========================================================= */

@media (max-width:380px){

  .container{
    padding-inline:12px;
  }

  .home-hero{
    padding-inline:6px;
  }

  .home-hero__headline{
    font-size:28px;
  }

  .section-heading{
    font-size:25px;
  }

  .site-brand__logo{
    height:48px;
    max-width:190px;
  }

  .mg{
    grid-template-columns:32px minmax(0, 1fr) 32px;
    gap:4px;
  }

  .mg-btn{
    width:32px;
    height:32px;
  }
}
/* =========================================================
   18) PRODUCT PAGES – SHARED COMPONENTS
========================================================= */


/* ---------- Product Hero ---------- */

.product-hero{
  padding:56px 0 34px;
}

.product-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(420px, 1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.product-hero__copy{
  min-width:0;
}

.product-hero__title{
  margin:8px 0 18px;

  color:#111;
  font-size:clamp(42px, 4.2vw, 60px);
  font-weight:300;
  letter-spacing:1px;
  line-height:1.05;
  text-transform:uppercase;
}

.product-hero__kicker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-bottom:18px;

  color:var(--muted);
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.product-hero__kicker-accent{
  color:var(--accent);
}

.product-hero__lead{
  max-width:80ch;
  margin:0 0 16px;

  color:var(--text);
  line-height:1.75;
}

.product-hero__lead--strong{
  font-weight:700;
}

.product-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:24px;
}

.product-hero__media{
  margin:0;

  min-height:420px;
  overflow:hidden;

  border-radius:18px;
  background:var(--surface-soft);
}

.product-hero__media img{
  width:100%;
  height:100%;
  min-height:420px;
  display:block;

  object-fit:cover;
}


/* ---------- Product Subnavigation ---------- */

.product-nav{
  padding:14px 0;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

.product-nav__row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.product-nav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:10px 14px;

  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;

  color:var(--muted);
  font-weight:800;

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.product-nav__link:hover{
  border-color:#d6d6d6;
  background:var(--surface-soft);
  color:var(--text);
}

.product-nav__nuwi{
  margin-left:auto;
}


/* ---------- Product Feature Sections ---------- */

.product-section{
  padding:72px 0;
  scroll-margin-top:140px;
}

.product-section--soft{
  background:linear-gradient(135deg, #ffffff, #f7f7f7);
}

.product-feature{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(420px, 1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}

.product-feature__copy{
  min-width:0;
  max-width:80ch;
}

.product-feature__tag{
  margin-bottom:8px;

  color:var(--muted);
  font-size:15px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.product-feature__title{
  margin:0 0 14px;

  color:#111;
  font-size:clamp(28px, 2.4vw, 36px);
  font-weight:700;
  line-height:1.2;
}

.product-feature__text{
  max-width:75ch;
  margin:0 0 20px;

  color:var(--text);
  line-height:1.75;
}

.product-feature__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:20px;
}

.product-feature__media{
  margin:0;

  min-height:360px;
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.product-feature__media img{
  width:100%;
  height:100%;
  min-height:360px;
  display:block;

  object-fit:cover;
}


/* ---------- Native Details Accordion ---------- */

.info-accordion{
  width:min(100%, 720px);
  margin:18px 0 0;

  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

.info-accordion__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:13px 15px;

  color:var(--text);
  font-weight:800;

  cursor:pointer;
  list-style:none;
  user-select:none;
}

.info-accordion__summary::-webkit-details-marker{
  display:none;
}

.info-accordion__summary:hover{
  background:var(--surface-soft);
}

.info-accordion__icon{
  position:relative;

  width:22px;
  height:22px;
  flex:0 0 auto;
}

.info-accordion__icon::before,
.info-accordion__icon::after{
  content:"";

  position:absolute;
  top:50%;
  left:50%;

  width:14px;
  height:2px;

  border-radius:2px;
  background:var(--muted);

  transform:translate(-50%, -50%);
  transition:transform var(--transition);
}

.info-accordion__icon::after{
  transform:translate(-50%, -50%) rotate(90deg);
}

.info-accordion[open] .info-accordion__icon::after{
  transform:translate(-50%, -50%) rotate(0deg);
}

.info-accordion__content{
  padding:0 15px 16px;

  color:var(--muted);
  line-height:1.75;
}

.info-accordion__content p{
  margin:12px 0 0;
}

.info-accordion__list{
  margin:10px 0 0;
  padding-left:22px;

  color:var(--muted);
  line-height:1.8;
}

.info-accordion__list li{
  margin:5px 0;
}


/* ---------- CTA Panels ---------- */

.cta-section{
  padding:56px 0;
}

.cta-section--soft{
  background:linear-gradient(135deg, #ffffff, #f7f7f7);
}

.cta-panel{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:28px;
  align-items:center;

  padding:24px;

  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.cta-panel__copy{
  min-width:0;
}

.cta-panel__title{
  margin:0 0 8px;

  color:var(--text);
  font-size:clamp(28px, 2.2vw, 38px);
  font-weight:300;
  line-height:1.2;
}

.cta-panel__text{
  max-width:75ch;
  margin:0;

  color:var(--muted);
  line-height:1.65;
}

.cta-panel__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}


/* =========================================================
   19) PRODUCT PAGES – RESPONSIVE
========================================================= */

@media (max-width:1100px){

  .product-hero__grid,
  .product-feature{
    grid-template-columns:1fr;
  }

  .product-hero__media{
    min-height:340px;
  }

  .product-hero__media img{
    min-height:340px;
  }

  .product-feature__copy{
    max-width:100%;
  }

  .product-feature__media{
    min-height:320px;
  }

  .product-feature__media img{
    min-height:320px;
  }

  .product-nav__nuwi{
    margin-left:0;
  }

  .cta-panel{
    grid-template-columns:1fr;
  }

  .cta-panel__actions{
    justify-content:flex-start;
  }
}


@media (max-width:700px){

  .product-hero{
    padding:38px 0 26px;
  }

  .product-hero__title{
    font-size:34px;
  }

  .product-hero__kicker{
    font-size:14px;
  }

  .product-hero__media{
    min-height:260px;
  }

  .product-hero__media img{
    min-height:260px;
  }

  .product-nav{
    padding:12px 0;
  }

  .product-nav__row{
    align-items:stretch;
  }

  .product-nav__link{
    flex:1 1 calc(50% - 10px);
  }

  .product-nav__nuwi{
    width:100%;
  }

  .product-section{
    padding:48px 0;
    scroll-margin-top:90px;
  }

  .product-feature{
    gap:28px;
  }

  .product-feature__title{
    font-size:28px;
  }

  .product-feature__media{
    min-height:240px;
  }

  .product-feature__media img{
    min-height:240px;
  }

  .info-accordion{
    width:100%;
  }

  .cta-section{
    padding:42px 0;
  }

  .cta-panel{
    gap:22px;
    padding:18px;
  }

  .cta-panel__actions{
    width:100%;
    flex-direction:column;
  }

  .cta-panel__actions .button{
    width:100%;
  }
}


@media (max-width:420px){

  .product-nav__link{
    flex:1 1 100%;
  }
}

/* =========================================================
   20) PRODUCT PAGE EXTENSIONS
========================================================= */

.product-feature__eyebrow{
  margin:0 0 12px;
  color:var(--accent);
  font-size:15px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1.5;
  text-transform:uppercase;
}

.options-section{
  padding:72px 0;
  scroll-margin-top:140px;
}

.options-section__head{
  max-width:1000px;
  margin-bottom:28px;
}

.options-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
}

.option-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:88px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--muted);
  font-weight:800;
  text-align:center;
}

.accordion-stack{
  display:grid;
  gap:12px;
  max-width:900px;
  margin-top:24px;
}

.accordion-stack .info-accordion{
  width:100%;
  margin:0;
}

.cta-panel__list{
  margin:16px 0 0;
  padding-left:22px;
  color:var(--muted);
  line-height:1.75;
}

.cta-panel__list li{
  margin:4px 0;
}

@media (max-width:1100px){
  .options-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .options-section{
    padding:48px 0;
    scroll-margin-top:90px;
  }

  .options-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .option-card{
    min-height:74px;
    padding:12px;
  }
}

@media (max-width:420px){
  .options-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   22) SIMPLE PAGE HERO
========================================================= */

.simple-hero{
  padding:56px 0 34px;
}

.simple-hero__copy{
  max-width:1000px;
}

.simple-hero__title{
  margin:8px 0 16px;
  color:#111;
  font-size:clamp(42px, 4.2vw, 60px);
  font-weight:300;
  letter-spacing:1px;
  line-height:1.08;
  text-transform:uppercase;
}

.simple-hero__lead{
  max-width:75ch;
  margin:0;
  color:var(--muted);
  line-height:1.75;
}


/* =========================================================
   23) CONTACT PAGE
========================================================= */

.contact-overview{
  padding:28px 0 54px;
}

.contact-overview__grid{
  display:grid;
  grid-template-columns:minmax(340px, .85fr) minmax(0, 1.15fr);
  gap:24px;
  align-items:stretch;
}

.contact-card,
.contact-form-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.contact-card{
  padding:28px;
}

.contact-card__title{
  margin:0 0 24px;
  color:#111;
  font-size:clamp(28px, 2.2vw, 36px);
  font-weight:500;
  line-height:1.2;
}

.contact-card__details{
  display:grid;
  gap:20px;
}

.contact-detail{
  display:grid;
  gap:4px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  line-height:1.55;
}

.contact-detail:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.contact-detail__label{
  color:var(--text);
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

.contact-detail a{
  width:max-content;
  max-width:100%;
  color:var(--text);
  font-weight:700;
  overflow-wrap:anywhere;
}

.contact-detail a:hover{
  color:var(--accent);
}

.contact-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.contact-map{
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:minmax(360px, 1fr) auto;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.contact-map__frame{
  width:100%;
  height:100%;
  min-height:360px;
  display:block;
  border:0;
}

.contact-map__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 18px;
  border-top:1px solid var(--line);
}

.contact-map__address{
  color:var(--muted);
  font-weight:700;
}

.contact-form-section{
  padding:18px 0 72px;
}

.contact-form-card{
  padding:clamp(22px, 3vw, 38px);
}

.contact-form-card__head{
  max-width:900px;
  margin-bottom:28px;
}

.contact-form-card__title{
  margin:0 0 8px;
  color:#111;
  font-size:clamp(30px, 2.4vw, 40px);
  font-weight:400;
  line-height:1.2;
}

.contact-form-card__intro{
  max-width:75ch;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.contact-form__grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:20px;
}

.form-field{
  grid-column:span 3;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.form-field--street{
  grid-column:span 4;
}

.form-field--zip{
  grid-column:span 1;
}

.form-field--city{
  grid-column:span 1;
}

.form-field--full{
  grid-column:1 / -1;
}

.form-field label{
  color:var(--text);
  font-size:15px;
  font-weight:800;
}

.form-field input,
.form-field textarea{
  width:100%;
  border:1px solid #d7d7d7;
  border-radius:12px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.form-field input{
  min-height:50px;
  padding:10px 13px;
}

.form-field textarea{
  min-height:160px;
  padding:13px;
  resize:vertical;
}

.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--nuwi-light);
  box-shadow:0 0 0 3px rgba(70,98,130,.12);
}

.form-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted) !important;
  font-weight:600 !important;
  line-height:1.55;
}

.form-check input{
  width:18px;
  min-width:18px;
  height:18px;
  min-height:0;
  margin-top:4px;
  padding:0;
}

.form-check a{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
}

.contact-form__submit{
  display:flex;
  align-items:center;

  flex-wrap:wrap;
  gap:14px;
}

.contact-form__required{
  color:var(--muted);
  font-size:15px;
  font-weight:600;
}


/* =========================================================
   24) GALLERY PAGE
========================================================= */

.gallery-section{
  padding:28px 0 72px;
  scroll-margin-top:120px;
}

.gallery-section__head{
  margin-bottom:28px;
}

.gallery-category-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.gallery-category-card{
  position:relative;
  min-width:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.gallery-category-card:hover,
.gallery-category-card.is-active{
  transform:translateY(-2px);
  border-color:#d4d4d4;
  box-shadow:var(--shadow-soft);
}

.gallery-category-card.is-active{
  outline:2px solid rgba(255,0,0,.14);
  outline-offset:2px;
}

.gallery-category-card__image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .3s ease;
}

.gallery-category-card:hover .gallery-category-card__image{
  transform:scale(1.025);
}

.gallery-category-card__label{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  width:max-content;
  max-width:calc(100% - 28px);
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.9);
  color:#222;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
  backdrop-filter:blur(8px);
}

.gallery-panels{
  margin-top:28px;
}

.gallery-panel{
  scroll-margin-top:130px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #ffffff, #f8f8f8);
}

.gallery-panel[hidden]{
  display:none;
}

.gallery-panel__title{
  margin:0 0 18px;
  color:#111;
  font-size:clamp(24px, 2vw, 32px);
  font-weight:500;
  line-height:1.2;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.gallery-thumb{
  position:relative;
  min-width:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.gallery-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .25s ease;
}

.gallery-thumb:hover img{
  transform:scale(1.035);
}

.gallery-thumb__caption{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 9px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.9);
  color:#222;
  font-size:12px;
  font-weight:900;
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:70px 80px;
  background:rgba(0,0,0,.88);
}

.gallery-lightbox.is-open{
  display:flex;
}

body.lightbox-open{
  overflow:hidden;
}

.gallery-lightbox__figure{
  max-width:min(1300px, 90vw);
  max-height:85vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.gallery-lightbox__figure img{
  max-width:100%;
  max-height:78vh;
  display:block;
  object-fit:contain;
  border-radius:12px;
}

.gallery-lightbox__figure figcaption{
  color:#fff;
  font-size:16px;
  font-weight:700;
  text-align:center;
}

.gallery-lightbox__close,
.gallery-lightbox__nav{
  position:absolute;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(8px);
}

.gallery-lightbox__close{
  top:20px;
  right:20px;
  width:48px;
  height:48px;
  font-size:32px;
  line-height:1;
}

.gallery-lightbox__nav{
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  font-size:34px;
  line-height:1;
}

.gallery-lightbox__nav--prev{
  left:20px;
}

.gallery-lightbox__nav--next{
  right:20px;
}


/* =========================================================
   25) CONTACT + GALLERY RESPONSIVE
========================================================= */

@media (max-width:1100px){
  .contact-overview__grid{
    grid-template-columns:1fr;
  }

  .contact-map{
    grid-template-rows:360px auto;
  }

  .contact-form__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .form-field,
  .form-field--street,
  .form-field--zip,
  .form-field--city{
    grid-column:span 1;
  }

  .form-field--street,
  .form-field--full{
    grid-column:1 / -1;
  }

  .gallery-category-grid,
  .gallery-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .simple-hero{
    padding:38px 0 26px;
  }

  .simple-hero__title{
    font-size:34px;
  }

  .contact-overview{
    padding:20px 0 42px;
  }

  .contact-card{
    padding:20px;
  }

  .contact-card__actions{
    flex-direction:column;
  }

  .contact-card__actions .button{
    width:100%;
  }

  .contact-map{
    grid-template-rows:300px auto;
  }

  .contact-map__frame{
    min-height:300px;
  }

  .contact-map__bar{
    align-items:flex-start;
    flex-direction:column;
  }

  .contact-map__bar .button{
    width:100%;
  }

  .contact-form-section{
    padding:12px 0 48px;
  }

  .contact-form__grid{
    grid-template-columns:1fr;
  }

  .form-field,
  .form-field--street,
  .form-field--zip,
  .form-field--city,
  .form-field--full{
    grid-column:1;
  }

  .contact-form__submit{
    align-items:stretch;
    flex-direction:column;
  }

  .contact-form__submit .button{
    width:100%;
  }

  .gallery-section{
    padding:20px 0 48px;
  }

  .gallery-category-grid,
  .gallery-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .gallery-panel{
    padding:18px;
  }

  .gallery-lightbox{
    padding:62px 54px;
  }

  .gallery-lightbox__nav{
    width:42px;
    height:42px;
  }

  .gallery-lightbox__nav--prev{
    left:8px;
  }

  .gallery-lightbox__nav--next{
    right:8px;
  }

  .gallery-lightbox__close{
    top:10px;
    right:10px;
    width:42px;
    height:42px;
  }
}

@media (max-width:420px){
  .gallery-category-grid,
  .gallery-grid{
    grid-template-columns:1fr;
  }

  .gallery-category-card{
    aspect-ratio:16 / 10;
  }

  .gallery-lightbox{
    padding:58px 42px;
  }
}

/* =========================================================
   26) REMAINING SITE PAGES
   FAQ / SERVICE / COMPANY / PROJECTS
========================================================= */

.page-section{
  padding:72px 0;
}

.page-section--compact{
  padding-top:24px;
}

.section-soft{
  padding:72px 0;
  background:linear-gradient(135deg, #ffffff, #f7f7f7);
}

.section-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.service-section{
  padding:72px 0;
}
.service-section .section-copy,
.section-soft .section-copy{
  max-width:1000px;
}
/* ---------- Generic legacy page heroes, now on clean system ---------- */

.service-hero,
.company-hero,
.faq-hero,
.page-hero{
  padding:56px 0 40px;
}

.service-hero-grid,
.company-hero-grid,
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .9fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.service-hero-copy,
.page-hero-copy{
  min-width:0;
}

.hero-eyebrow,
.company-kicker,
.feature-tag{
  margin-bottom:8px;
  color:var(--accent);
  font-size:15px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.page-title,
.company-title{
  margin:0 0 16px;
  color:#111;
  font-size:clamp(42px, 4.2vw, 60px);
  font-weight:300;
  line-height:1.08;
  text-transform:uppercase;
}

.page-lead,
.company-lead{
  max-width:75ch;
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.page-hero-actions,
.company-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.page-hero-media,
.company-hero-media{
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-soft);
  color:var(--muted);
  font-weight:800;
  text-align:center;
}

.page-hero-media img{
  width:100%;
  height:100%;
  min-height:360px;
  display:block;
  object-fit:cover;
}


/* ---------- Service pages ---------- */

.service-hero-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.service-card,
.service-box,
.split-card,
.company-panel,
.job-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.service-card{
  min-height:150px;
  padding:20px;
}

.service-card-title,
.service-box-title,
.split-title{
  margin:0 0 8px;
  color:#111;
  font-size:20px;
  font-weight:800;
}

.service-card-text,
.service-box-text,
.split-note,
.step-text{
  color:var(--muted);
  line-height:1.65;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:26px;
}

.service-box{
  padding:22px;
}

.split-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:26px;
}

.split-card{
  padding:24px;
}

.split-list,
.job-list{
  margin:14px 0 0;
  padding-left:22px;
  color:var(--muted);
  line-height:1.8;
}

.work-gallery,
.company-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:24px;
}

.work-item,
.strip-item{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1px dashed #cfcfcf;
  border-radius:18px;
  background:#fff;
  color:var(--muted);
  font-weight:800;
  text-align:center;
}

.usp{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:24px;
}

.usp .item{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font-weight:800;
  text-align:center;
}

.steps{
  display:grid;
  gap:12px;
  margin-top:26px;
}

.step{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.step-num{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:900;
}

.step-title{
  color:#111;
  font-weight:800;
}

.cta-panel > div:first-child{
  min-width:0;
}

.cta-panel .section-heading{
  margin-bottom:6px;
}


/* ---------- FAQ ---------- */

.faq-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 420px);
  gap:28px;
  align-items:end;
}

.faq-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
}

.faq-search__icon{
  color:var(--muted);
  font-weight:900;
}

.faq-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
}

.faq-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}

.tag{
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
}

.tag:hover,
.tag.active{
  border-color:var(--accent);
  color:var(--accent);
}

.faq-wrap{
  display:grid;
  gap:10px;
}

.faq-item{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border:0;
  background:transparent;
  color:var(--text);
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.faq-q:hover{
  background:var(--surface-soft);
}

.faq-icon{
  flex:0 0 auto;
  font-size:24px;
}

.faq-a{
  display:none;
  padding:0 18px 18px;
  color:var(--muted);
  line-height:1.7;
}

.faq-item.open .faq-a{
  display:block;
}

.faq-help{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:28px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-soft);
}

.faq-small{
  margin:0;
  color:var(--muted);
}


/* ---------- Company / careers ---------- */

#team,
#jobs{
  padding:72px 0;
  scroll-margin-top:120px;
}

.team-grid,
.job-grid,
.company-grid{
  display:grid;
  gap:16px;
  margin-top:26px;
}

.team-grid,
.job-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.company-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.team-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.team-photo{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-soft);
  color:var(--muted);
  font-weight:800;
  text-align:center;
}

.team-meta{
  padding:18px;
}

.team-name{
  color:#111;
  font-size:20px;
  font-weight:800;
}

.team-role{
  margin-top:4px;
  color:var(--muted);
}

.team-tag,
.job-badge,
.meta-pill{
  display:inline-flex;
  margin-top:10px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.job-card{
  padding:22px;
}

.job-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.job-title{
  color:#111;
  font-size:20px;
  font-weight:800;
}

.job-badge{
  margin-top:0;
}

.job-text{
  color:var(--muted);
  line-height:1.65;
}

.company-panel{
  padding:24px;
}

.company-panel h3{
  margin:0 0 8px;
  color:#111;
}

.company-panel p{
  margin:0;
  color:var(--muted);
}

.timeline-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.timeline-actions{
  display:flex;
  gap:8px;
}

.tl-btn{
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--text);
  font-size:24px;
  cursor:pointer;
}

.timeline{
  position:relative;
  display:flex;
  gap:18px;
  overflow-x:auto;
  margin-top:28px;
  padding:6px 2px 18px;
  scroll-snap-type:x proximity;
}

.tl-item{
  flex:0 0 340px;
  scroll-snap-align:start;
}

.tl-year{
  color:var(--accent);
  font-weight:900;
}

.tl-dot{
  width:12px;
  height:12px;
  margin:10px 0;
  border-radius:50%;
  background:var(--accent);
}

.tl-card{
  min-height:170px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.tl-title{
  color:#111;
  font-weight:800;
}

.tl-text{
  margin-top:8px;
  color:var(--muted);
  line-height:1.65;
}


/* ---------- Projects gallery page ---------- */

.subnav{
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.subnav-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--muted);
  font-weight:800;
}

.chip:hover{
  background:var(--surface-soft);
  color:var(--text);
}

.projects-wrap{
  display:grid;
  gap:24px;
  padding:24px 0 72px;
}

.project-card{
  scroll-margin-top:130px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.project-row{
  display:grid;
  grid-template-columns:minmax(300px, .8fr) minmax(0, 1.2fr);
  gap:28px;
  align-items:center;
}

.project-media{
  min-height:300px;
  overflow:hidden;
  border-radius:16px;
  background:var(--surface-soft);
}

.project-media img{
  width:100%;
  height:100%;
  min-height:300px;
  display:block;
  object-fit:cover;
}

.project-title{
  margin:4px 0 10px;
  color:#111;
  font-size:clamp(28px, 2.2vw, 36px);
  font-weight:600;
}

.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.project-text{
  color:var(--muted);
  line-height:1.7;
}

.project-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.project-sep{
  height:1px;
  margin:24px 0;
  background:var(--line);
}

.project-details{
  display:grid;
  gap:18px;
}

.accordion{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}

.acc-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:0;
  background:#fff;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}

.acc-content{
  display:none;
  padding:0 16px 16px;
  color:var(--muted);
}

.accordion.open .acc-content{
  display:block;
}

.feature-list{
  margin:0;
  padding-left:20px;
}

.mini-gallery{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.g-thumb{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
}

.g-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.cap{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:5px 8px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.9);
  color:#222;
  font-size:11px;
  font-weight:900;
}


/* ---------- Responsive ---------- */

@media (max-width:1100px){
  .service-hero-grid,
  .company-hero-grid,
  .page-hero-grid,
  .project-row{
    grid-template-columns:1fr;
  }

  .services-grid,
  .team-grid,
  .job-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .faq-head{
    grid-template-columns:1fr;
  }

  .mini-gallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .page-section,
  .section-soft,
  #team,
  #jobs{
    padding:48px 0;
  }

  .service-hero,
  .company-hero,
  .faq-hero,
  .page-hero{
    padding:38px 0 28px;
  }

  .page-title,
  .company-title{
    font-size:34px;
  }

  .service-hero-cards,
  .services-grid,
  .split-grid,
  .work-gallery,
  .company-strip,
  .usp,
  .team-grid,
  .job-grid,
  .company-grid{
    grid-template-columns:1fr;
  }

  .page-hero-actions,
  .company-actions,
  .section-actions,
  .project-actions{
    flex-direction:column;
  }

  .page-hero-actions .button,
  .company-actions .button,
  .section-actions .button,
  .project-actions .button{
    width:100%;
  }

  .faq-help{
    align-items:stretch;
    flex-direction:column;
  }

  .faq-help .section-actions{
    width:100%;
  }

  .tl-item{
    flex-basis:280px;
  }

  .project-card{
    padding:18px;
  }

  .mini-gallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:420px){
  .mini-gallery{
    grid-template-columns:1fr;
  }
}
@media (max-width:700px){
  .service-section{
    padding:48px 0;
  }
}