/* AWO Adam Gabrych — montaż okien i podnośnik, Zduńska Wola
   Plan: ../PLAN-STRONY.md (zaakceptowany 2026-11-09) · tokeny: ../DESIGN.md · odrzucone: ../design-system/awo/pages/index.md
   Paleta z pipety zdjęcia referencyjnego img/kosz-elewacja (Pexels 31983863). */

/* ---------- fonty (lokalne, latin + latin-ext) ---------- */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Barlow;font-weight:800;font-display:swap;src:url(fonts/barlow-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;font-weight:800;font-display:swap;src:url(fonts/barlow-latin-ext-800.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow SC";font-weight:600;font-display:swap;src:url(fonts/barlow-sc-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow SC";font-weight:600;font-display:swap;src:url(fonts/barlow-sc-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokeny ---------- */
:root{
  --rama:#181E21; --rama-2:#232B2F;
  --szklo:#4A5F64; --szklo-j:#E9EDEE;
  --alu:#C2C6CE; --alu-ciemny:#3A464B; --linia:#DCE1E3;
  --pcv:#F4F6F6; --biel:#FFFFFF;
  --wys:#DA6843; --wys-t:#B24A22;
  --r:2px;
  --font:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sc:"Barlow SC",Barlow,system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1320px; --gut:32px;
  --nav-h:72px;
}

/* ---------- baza ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
html.is-motion{scroll-behavior:smooth}
body{font-family:var(--font);font-size:17px;line-height:1.55;font-synthesis:none;color:var(--rama);background:var(--pcv);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
svg.ic{width:1em;height:1em;flex:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--wys);outline-offset:3px;border-radius:var(--r)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--wys);color:var(--rama);font-weight:700;padding:12px 18px;border-radius:var(--r);transition:top .2s}
.skip:focus{top:12px}

h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1;text-wrap:balance}
p,dd,li{text-wrap:pretty}
.nav__tel,.btn,.facts dd,.mbar a{font-variant-numeric:tabular-nums}
.h2{font-size:clamp(32px,3.4vw,48px)}
.lead{font-size:19px;line-height:1.5;color:var(--szklo);max-width:34em}
.tag{display:block;font-family:var(--font-sc);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- pasek demo ---------- */
.demobar{background:#0F1315;color:var(--alu);font-size:13.5px;line-height:1.4;text-align:center;padding:9px 16px}
.demobar b{color:var(--biel);font-weight:600}

/* ---------- przyciski: button-in-button, kwadrat 2 px (kształt ramy) ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:7px 7px 7px 22px;border-radius:var(--r);font-weight:700;font-size:17px;line-height:1.2;white-space:nowrap;background:var(--wys);color:var(--rama);border:0;cursor:pointer;touch-action:manipulation;transition:background .25s var(--ease),transform .15s var(--ease)}
.btn:hover{background:#E57A57}
.btn:active{transform:scale(.98)}
.btn__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);background:var(--rama);color:var(--wys);font-size:18px;transition:transform .35s var(--ease)}
.btn:hover .btn__ic{transform:translate(3px,-1px)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;padding:7px 22px}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--ghost .ic{color:var(--wys);font-size:20px}
.on-light .btn--ghost:hover{background:rgba(24,30,33,.05)}
.on-light .btn--ghost .ic{color:var(--wys-t)}
.btn--sm{min-height:44px;font-size:15px;padding:5px 5px 5px 16px}
.btn--sm .btn__ic{width:34px;height:34px;font-size:16px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:2px;min-height:44px}
.link .ic{transition:transform .3s var(--ease)}
.link:hover .ic{transform:translateX(4px)}

/* ---------- nawigacja ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--rama);color:var(--biel);border-bottom:1px solid rgba(194,198,206,.14);transition:box-shadow .3s var(--ease)}
.nav.is-scrolled{box-shadow:0 10px 30px -12px rgba(10,14,16,.55)}
.nav__in{height:var(--nav-h);display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-height:44px}
.brand__mark{font-weight:800;font-size:28px;letter-spacing:.04em;line-height:1;display:flex;align-items:center}
.brand__mark i{display:inline-block;width:11px;height:3px;background:var(--wys);transform:rotate(-24deg);margin:0 3px 11px}
.brand small{font-family:var(--font-sc);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;color:var(--alu);border-left:1px solid rgba(194,198,206,.35);padding-left:12px}
.nav__links{list-style:none;display:flex;gap:4px;padding:0}
.nav__links a{display:flex;align-items:center;min-height:44px;padding:0 11px;font-weight:500;font-size:16px;border-radius:var(--r);transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--wys)}
.nav__tel{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;min-height:44px}
.nav__tel .ic{color:var(--wys);font-size:20px}
.nav__menu{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r);background:transparent;border:1.5px solid rgba(194,198,206,.4);color:var(--biel);font-weight:600;cursor:pointer}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--wys);transform-origin:left;transform:scaleX(0)}
.is-static .progress{display:none}

/* ---------- 1. hero A2 ---------- */
.hero{position:relative;background:var(--rama);color:var(--biel)}
.hero__grid{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);min-height:max(600px,calc(100dvh - var(--nav-h) - 38px))}
.hero__txt{display:flex;flex-direction:column;justify-content:flex-end;padding:48px 40px 136px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.hero .tag{color:var(--wys);margin-bottom:18px}
.hero h1{font-size:clamp(44px,5.9vw,86px);line-height:.94;letter-spacing:-.03em;text-wrap:nowrap}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln>span{display:block;white-space:nowrap}
.hero h1 .ln:nth-child(2){color:var(--wys)}
.hero__lead{font-size:20px;line-height:1.55;font-weight:500;letter-spacing:.004em;max-width:28em;margin:28px 0 32px;color:#D5DBDD}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pane{position:relative;overflow:hidden;display:block;background:var(--rama-2);color:var(--biel)}
.pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pane::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,30,33,.45) 0%,rgba(24,30,33,0) 20%,rgba(24,30,33,0) 58%,rgba(24,30,33,.78) 100%);pointer-events:none}
.pane__lbl{position:absolute;z-index:1;left:24px;right:24px;bottom:120px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;font-size:22px}
.pane__lbl i{display:grid;place-items:center;width:46px;height:46px;flex:none;background:var(--wys);color:var(--rama);border-radius:var(--r);font-size:20px;font-style:normal;transition:transform .35s var(--ease)}
.pane:hover .pane__lbl i,.pane:focus-visible .pane__lbl i{transform:translateX(4px)}
.hero__facts{position:absolute;left:0;right:0;bottom:0;z-index:2}

/* wejście hero w czystym CSS (rusza przed JS; rejestr błędów: LCP) */
.is-motion .pane img{animation:najazd 18s var(--ease-out) both}
.is-motion .pane:nth-child(2) img{animation-delay:.15s}
@keyframes najazd{from{transform:scale(1.07)}to{transform:scale(1)}}
.is-motion .hero h1 .ln>span{animation:wjazd 1s var(--ease-out) both}
.is-motion .hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.is-motion .hero__lead,.is-motion .hero__cta,.is-motion .hero .tag{animation:pojaw .9s .25s var(--ease-out) both}
.is-motion .hero__cta{animation-delay:.38s}
@keyframes wjazd{from{transform:translateY(105%)}to{transform:none}}
@keyframes pojaw{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 2. pasek faktów — siatka ramy ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--biel);color:var(--rama);border:1px solid var(--linia)}
.facts>div{padding:18px 22px 20px;border-left:1px solid var(--linia)}
.facts>div:first-child{border-left:0}
.facts dt{font-family:var(--font-sc);font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--szklo)}
.facts dd{font-weight:700;font-size:19px;line-height:1.3;margin-top:3px}
.facts dd b{color:var(--wys-t);font-variant-numeric:tabular-nums}

/* ---------- odsłanianie pod hero (IO na rodzicu, klasa .is-in) ---------- */
.is-motion [data-rv] .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.is-motion [data-rv].is-in .rv{opacity:1;transform:none}

/* ---------- tabliczka znamionowa ---------- */
.plate{border:1px solid var(--linia);background:var(--biel)}
.plate__row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:16px;padding:13px 18px;border-top:1px solid var(--linia);align-items:baseline}
.plate__row:first-child{border-top:0}
.plate dt{font-family:var(--font-sc);font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--szklo)}
.plate dd{font-weight:700;font-size:17.5px;line-height:1.35}
.todo{font-weight:500;color:var(--szklo);text-decoration:underline dashed 1px;text-underline-offset:4px}
.plate--dark{background:rgba(24,30,33,.94);border-color:var(--alu-ciemny);color:var(--biel)}
.plate--dark .plate__row{border-color:var(--alu-ciemny)}
.plate--dark dt{color:var(--alu)}
.plate--dark .todo{color:var(--alu)}

/* ---------- 3. okna ---------- */
.okna{padding:80px 0;background:var(--pcv)}
.okna__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.okna__foto{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:var(--szklo-j)}
.okna__foto img{width:100%;height:100%;object-fit:cover}
/* zasłona nad zdjęciem zamiast clip-path na nim (rejestr błędów: IO nie widzi elementu o zerowej masce) */
.okna__foto::after{content:"";position:absolute;inset:0;background:var(--pcv);transform-origin:top;transform:scaleY(0)}
.is-motion .okna[data-rv] .okna__foto::after{transform:scaleY(1);transition:transform 1.1s var(--ease-out)}
.is-motion .okna[data-rv].is-in .okna__foto::after{transform:scaleY(0)}
.okna h2{margin-bottom:14px}
.okna .plate{margin:26px 0 28px}
.okna__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- 4. podnośnik ---------- */
.podn{position:relative;background:var(--rama);color:var(--biel);overflow:hidden}
.podn__foto{position:absolute;inset:0 0 0 34%}
.podn__foto{overflow:hidden}
.podn__foto img{width:100%;height:116%;object-fit:cover;object-position:46% 40%}
.podn__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--rama) 0%,rgba(24,30,33,.55) 22%,rgba(24,30,33,0) 50%),linear-gradient(0deg,rgba(24,30,33,.35) 0%,rgba(24,30,33,0) 30%)}
.podn__in{position:relative;display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:40px;min-height:760px;padding-top:80px;padding-bottom:80px;align-items:end}
.podn h2{margin-bottom:14px}
.podn .lead{color:#D5DBDD;font-weight:500;line-height:1.55;letter-spacing:.004em}
.podn .plate{margin:26px 0 24px}
.podn__prace{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 28px;padding:0;list-style:none}
.podn__prace li{font-weight:500;font-size:15.5px;padding:8px 12px;border:1px solid var(--alu-ciemny);border-radius:var(--r);background:rgba(24,30,33,.6)}
.podn__note{font-size:14px;color:var(--alu);margin-bottom:8px}
/* linia wymiarowa */
.dim{position:relative;justify-self:end;align-self:stretch;width:46px;color:var(--biel);margin:40px 12px 0 0}
.dim__l{position:absolute;left:22px;top:0;bottom:0;border-left:1.5px solid currentColor;transform-origin:bottom}
.dim::before,.dim::after{content:"";position:absolute;left:10px;width:26px;border-top:1.5px solid currentColor}
.dim::before{top:0}
.dim::after{bottom:0}
.dim em{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font-style:normal;font-family:var(--font-sc);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:var(--rama);padding:5px 12px}
.is-motion .podn[data-rv] .dim__l{transform:scaleY(0);transition:transform 1.4s .2s var(--ease-out)}
.is-motion .podn[data-rv].is-in .dim__l{transform:scaleY(1)}
.is-motion .podn[data-rv] .dim em,.is-motion .podn[data-rv] .dim::before{opacity:0;transition:opacity .6s 1.2s}
.is-motion .podn[data-rv].is-in .dim em,.is-motion .podn[data-rv].is-in .dim::before{opacity:1}
/* paralaksa zdjęcia, sterowana przewijaniem w CSS */
@supports (animation-timeline: view()){
  .is-motion .podn__foto img{animation:parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes parallax{from{transform:translateY(-8%)}to{transform:translateY(0)}}
}

/* ---------- kreska wysięgnika (wspólna) ---------- */
.boom{display:block;height:6px;width:min(240px,60%);background:var(--wys);transform-origin:left}
.is-motion [data-rv] .boom{transform:scaleX(0);transition:transform 1.1s .35s var(--ease-out)}
.is-motion [data-rv].is-in .boom{transform:scaleX(1)}

/* ---------- 5. opinia i firma ---------- */
.opinia{padding:72px 0;background:var(--szklo-j)}
.opinia__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:end}
.stars{display:flex;align-items:center;gap:3px;color:var(--wys-t);font-size:20px;margin-bottom:20px}
.stars span{margin-left:10px;font-weight:700;font-size:16px;color:var(--rama)}
.opinia blockquote p{font-weight:700;font-size:clamp(28px,3.1vw,46px);line-height:1.12;letter-spacing:-.015em;max-width:24em}
.opinia .boom{margin:28px 0 16px}
.opinia figcaption{font-weight:500;font-size:16px;color:var(--szklo)}
.opinia__firma .plate{margin-bottom:18px}

/* ---------- 6. od telefonu do odbioru ---------- */
.kroki{padding:72px 0;background:var(--biel)}
.kroki__os{list-style:none;padding:0;margin:40px 0 36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.kroki__os::before,.kroki__os::after{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:var(--linia)}
.kroki__os::after{background:var(--wys);height:4px;top:20px;transform-origin:left}
.kroki__os li{position:relative;z-index:1}
.kroki__nr{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);background:var(--rama);color:var(--biel);font-weight:800;font-size:19px;margin-bottom:18px;box-shadow:0 0 0 6px var(--biel)}
.kroki h3{font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.kroki p{color:var(--szklo);max-width:22em}
/* oś wysuwa się jak ramię podnośnika: sprzężona z przewijaniem; bez wsparcia — pełna */
@supports (animation-timeline: view()){
  .is-motion .kroki__os::after{animation:ramie linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  @keyframes ramie{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- 7. realizacje ---------- */
.real{padding:72px 0;background:var(--rama-2);color:var(--biel)}
.real__head{margin-bottom:28px}
.real__head .h2{margin-bottom:10px}
.real__note{color:var(--alu);font-size:15.5px}
.real__grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,250px));gap:8px}
.real__item{position:relative;overflow:hidden;background:var(--rama);display:flex;flex-direction:column}
.real__item--big{grid-row:span 2}
.real__item img{width:100%;flex:1;min-height:0;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.real__item:hover img{transform:scale(1.03)}
.real__item figcaption{position:relative;z-index:1;padding:10px 14px;font-weight:600;font-size:15px;background:var(--rama);color:var(--biel)}
.real__link{margin-top:24px;color:var(--biel)}
.real--jasne{background:var(--pcv);color:var(--rama)}
.real--jasne .real__note{color:var(--szklo)}
.real--jasne .real__item{background:var(--szklo-j)}
.real--jasne .real__item figcaption{background:var(--biel);color:var(--rama);border:1px solid var(--linia);border-top:0}
.real__link .ic{color:var(--wys)}

/* ---------- 8. pytania ---------- */
.faq{padding:72px 0;background:var(--pcv)}
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:32px}
.qa{border-top:1px solid var(--linia)}
.faq__grid>div .qa:last-child{border-bottom:1px solid var(--linia)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;font-weight:700;font-size:18.5px;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{flex:none;font-size:20px;color:var(--wys-t);transition:transform .35s var(--ease)}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.qa[open] .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{padding:0 40px 20px 0;color:var(--szklo);max-width:36em}
.qa__a a{color:var(--wys-t);font-weight:700}

/* ---------- 9. kontakt ---------- */
.kontakt{position:relative;padding:80px 0;background:var(--rama);color:var(--biel);overflow:hidden}
.kontakt__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.tel-plakat{display:block;margin:28px 0 36px}
.tel-plakat small{display:block;font-family:var(--font-sc);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--alu)}
.tel-plakat b{display:block;font-weight:800;font-size:clamp(46px,5vw,80px);line-height:1;letter-spacing:-.02em;margin:8px 0 14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tel-plakat .boom{width:100%}
.tel-plakat:hover b{color:var(--wys)}
.siatka{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--alu-ciemny)}
.siatka>div{padding:16px 18px;border-left:1px solid var(--alu-ciemny);border-top:1px solid var(--alu-ciemny)}
.siatka>div:nth-child(odd){border-left:0}
.siatka>div:nth-child(-n+2){border-top:0}
.siatka dt{font-family:var(--font-sc);font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--alu)}
.siatka dd{font-weight:700;font-size:17px;margin-top:3px}
.siatka .todo{color:var(--alu)}
.form{background:var(--biel);color:var(--rama);padding:34px 34px 30px;border-radius:var(--r)}
.form h3{font-size:28px;letter-spacing:-.015em;margin-bottom:18px}
.tryb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.tryb label{position:relative;display:flex}
.tryb input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tryb span{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 10px;border-radius:var(--r);font-weight:700;font-size:16px;background:var(--pcv);box-shadow:inset 0 0 0 1.5px var(--linia);transition:background .2s,color .2s,box-shadow .2s;text-align:center}
.tryb span .ic{font-size:19px;color:var(--wys-t)}
.tryb label:hover span{box-shadow:inset 0 0 0 1.5px var(--rama)}
.tryb input:checked+span{background:var(--wys);color:var(--rama);box-shadow:none}
.tryb input:checked+span .ic{color:var(--rama)}
.tryb input:focus-visible+span{outline:2px solid var(--rama);outline-offset:2px}
.pole[hidden]{display:none}
.form__lead{color:var(--szklo);margin:6px 0 22px}
.pole{display:grid;gap:7px;margin-bottom:18px;border:0;padding:0;min-width:0}
.pole label,.pole legend{font-weight:600;font-size:15.5px;padding:0}
.opc{font-weight:400;color:var(--szklo)}
.pole input[type=text],.pole input[type=tel],.pole textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #9AA6AB;border-radius:var(--r);background:var(--biel);font-size:17px;transition:border-color .2s}
.pole textarea{resize:vertical;min-height:96px}
.pole input:focus,.pole textarea:focus{outline:none;border-color:var(--rama);box-shadow:0 0 0 3px rgba(218,104,67,.35)}
.pole.is-err input{border-color:#B3261E}
.pole__err{display:flex;align-items:center;gap:6px;color:#B3261E;font-weight:600;font-size:14.5px}
.pole__err[hidden]{display:none}
.wybor{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wybor label{position:relative;display:flex}
.wybor input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wybor span{flex:1;display:grid;place-items:center;min-height:48px;font-weight:600;box-shadow:inset 0 0 0 1.5px #9AA6AB;border-radius:var(--r);transition:background .2s,color .2s,box-shadow .2s}
.wybor label:hover span{box-shadow:inset 0 0 0 1.5px var(--rama)}
.wybor input:checked+span{background:var(--rama);color:var(--biel);box-shadow:none}
.wybor input:focus-visible+span{outline:2px solid var(--wys);outline-offset:-4px}
.zgoda{display:flex;gap:12px;align-items:flex-start;font-weight:400!important;font-size:15px!important;color:var(--szklo);cursor:pointer}
.zgoda input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--rama)}
.form__btn{width:100%;justify-content:space-between;margin-top:4px}
.form__btn[aria-busy=true]{opacity:.75;pointer-events:none}
.form__btn[aria-busy=true] .btn__ic .ic{animation:kreci 1s linear infinite}
@keyframes kreci{to{transform:rotate(360deg)}}
.form__status{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px 16px;background:var(--szklo-j);border-radius:var(--r);font-weight:600}
.form__status[hidden]{display:none}
.form__status .ic{color:#1E7A46;font-size:22px;margin-top:1px}

/* ---------- stopka ---------- */
.stopka{background:#0F1315;color:var(--alu);font-size:15px}
.stopka__in{display:grid;grid-template-columns:5fr 3fr 4fr;gap:40px;padding-top:44px;padding-bottom:32px}
.stopka .brand__mark{color:var(--biel);margin-bottom:12px}
.stopka__brand p{max-width:26em}
.stopka ul{list-style:none;padding:0;display:grid;gap:2px}
.stopka ul a{display:inline-flex;min-height:44px;align-items:center;color:var(--biel)}
.stopka ul a:hover,.stopka address a:hover{color:var(--wys)}
.stopka address{font-style:normal;line-height:1.75}
.stopka address a{color:var(--biel);font-weight:600}
.stopka__dol{display:flex;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:22px;border-top:1px solid var(--alu-ciemny);font-size:13.5px}

/* ---------- podstrony: krótkie hero z okruszkami ---------- */
.phero{position:relative;background:var(--rama);color:var(--biel);overflow:hidden}
.phero__foto{position:absolute;inset:0 0 0 42%;overflow:hidden}
.phero__foto img{width:100%;height:100%;object-fit:cover}
.phero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--rama) 0%,rgba(24,30,33,.4) 30%,rgba(24,30,33,0) 60%)}
.phero__in{position:relative;padding-top:40px;padding-bottom:64px;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end}
.okruszki{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:15px;color:var(--alu);margin-bottom:auto;padding-bottom:40px}
.okruszki li+li::before{content:"/";margin-right:8px;color:var(--alu-ciemny)}
.okruszki a{color:var(--biel);display:inline-flex;min-height:44px;align-items:center}
.okruszki a:hover{color:var(--wys)}
.phero h1{font-size:clamp(40px,4.6vw,68px);max-width:11em}
.phero p{font-size:19px;font-weight:500;color:#D5DBDD;max-width:30em;margin-top:18px}
.is-motion .phero h1,.is-motion .phero p{animation:pojaw .9s var(--ease-out) both}
.is-motion .phero p{animation-delay:.12s}
.dwie{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dwie .pane{min-height:380px}
.dwie .pane__lbl{bottom:24px}
.dwie .pane::after{background:linear-gradient(180deg,rgba(24,30,33,0) 45%,rgba(24,30,33,.92) 100%)}
.sekcja{padding:72px 0}
.sekcja--pcv{background:var(--pcv)}
.sekcja--biel{background:var(--biel)}
.sekcja .lead{margin-top:12px}
.firma__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start}
.firma__grid .plate{margin-top:0}
.mapa{margin-top:40px;border:1px solid var(--alu-ciemny);aspect-ratio:16/6;width:100%;filter:grayscale(.6) contrast(1.05)}
.real__grid--pelna{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:280px}
.real__grid--pelna .real__item--big{grid-column:span 2;grid-row:span 2}

/* ---------- pasek mobilny ---------- */
.mbar{display:none}

/* ---------- responsywność ---------- */
@media (max-width:1100px){
  .nav__links a{padding:0 8px;font-size:15px}
  .nav__tel{display:none}
}
@media (max-width:900px){
  :root{--gut:16px;--nav-h:64px}
  body{font-size:16px}
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:flex}
  .nav.is-open .nav__links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--rama);padding:8px 16px 18px;border-bottom:1px solid var(--alu-ciemny)}
  .nav.is-open .nav__links a{font-size:18px;min-height:52px;border-bottom:1px solid var(--alu-ciemny)}
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .panes{order:-1;height:54vh;min-height:320px}
  .pane__lbl{bottom:14px;left:12px;right:12px;font-size:16px}
  .pane__lbl i{width:44px;height:44px}
  .hero__txt{padding:28px var(--gut) 32px}
  .hero__lead{font-size:17.5px}
  .hero__facts{position:static}
  .facts{grid-template-columns:1fr 1fr;border-left:0;border-right:0}
  .facts>div:nth-child(3){border-left:0}
  .facts>div:nth-child(n+3){border-top:1px solid var(--linia)}
  .facts>div{padding:14px 16px}
  .facts dd{font-size:17px}
  .okna{padding:56px 0}
  .okna__grid{grid-template-columns:1fr;gap:28px}
  .okna__foto{aspect-ratio:16/10}
  .plate__row{grid-template-columns:1fr;gap:2px;padding:11px 14px}
  .podn__foto{position:relative;inset:auto;height:300px}
  .podn__foto img{height:100%}
  .podn__foto::after{background:linear-gradient(0deg,var(--rama) 0%,rgba(24,30,33,0) 50%)}
  .podn__in{grid-template-columns:1fr;min-height:0;padding-top:8px;padding-bottom:56px}
  .dim{display:none}
  .opinia,.kroki,.real,.faq{padding:56px 0}
  .opinia__grid{grid-template-columns:1fr;gap:32px}
  .kroki__os{grid-template-columns:1fr;gap:22px;margin:28px 0}
  .kroki__os::before,.kroki__os::after{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .kroki__os::after{width:4px;left:20px;transform-origin:top}
  .kroki__os li{padding-left:64px}
  .kroki__nr{position:absolute;left:0;top:0;margin:0}
  @supports (animation-timeline: view()){ .is-motion .kroki__os::after{animation-name:ramie-y} @keyframes ramie-y{from{transform:scaleY(0)}to{transform:scaleY(1)}} }
  .real__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .real__item{aspect-ratio:auto}
  .real__item img{aspect-ratio:4/3;flex:none}
  .real__item--big{grid-column:span 2;grid-row:auto}
  .real__item--big img{aspect-ratio:16/10}
  .faq__grid{grid-template-columns:1fr}
  .faq__grid>div:first-child .qa:last-child{border-bottom:0}
  .kontakt{padding:56px 0}
  .kontakt__grid{grid-template-columns:1fr;gap:36px}
  .form{padding:24px 18px}
  .stopka__in{grid-template-columns:1fr;gap:24px}
  .stopka__dol{flex-direction:column;gap:4px}
  .phero__foto{position:relative;inset:auto;height:240px}
  .phero__foto::after{background:linear-gradient(0deg,var(--rama) 0%,rgba(24,30,33,0) 55%)}
  .phero__in{min-height:0;padding-top:0;padding-bottom:44px}
  .okruszki{order:-1;padding-bottom:16px}
  .dwie{grid-template-columns:1fr}
  .dwie .pane{min-height:260px}
  .sekcja{padding:56px 0}
  .firma__grid{grid-template-columns:1fr;gap:32px}
  .mapa{aspect-ratio:4/3}
  .real__grid--pelna{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .real__grid--pelna .real__item--big{grid-column:span 2;grid-row:auto}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(15,19,21,.96);border-top:1px solid var(--alu-ciemny)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:var(--r);font-weight:700;font-size:16px}
  .mbar a:first-child{background:var(--wys);color:var(--rama)}
  .mbar a:last-child{box-shadow:inset 0 0 0 1.5px var(--alu);color:var(--biel)}
  body{padding-bottom:70px}
}

@media (max-width:420px){.tryb span{font-size:15px}.tryb span .ic{display:none}}

/* ---------- ?static=1 i reduced-motion: stan końcowy ---------- */
.is-static *,.is-static *::before,.is-static *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- produkcja: <html class="is-prod"> ukrywa wiersze „do uzupełnienia”, dopóki klient nie poda danych
   (harden, odbiór 2026-11-09; w demie zostają widoczne celowo) ---------- */
.is-prod .plate__row:has(.todo),.is-prod .siatka>div:has(.todo),.is-prod .dim,.is-prod .demobar{display:none}
.is-prod .plate__row dd .todo{display:none}