/* Dachy Pietrasz · demo budstrony.pl nr 5
   System: niebo po ulewie. Burzowa szarozieleń (ciemne), niebo po deszczu i wapno (jasne), jeden sygnał: czerwień dachówki ceramicznej.
   Kształt: karpiówka (3 px u góry, 14 px u dołu). Kroje: Big Shoulders (nagłówki, wąskie jak rzędy dachówek) + Hanken Grotesk (tekst).
   Plan: dema-plany/dachy/PLAN-DEMA.md */

@font-face {
  font-family: "Big Shoulders";
  src: url(fonts/bigshoulders-latin-ext.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders";
  src: url(fonts/bigshoulders-latin.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url(fonts/hanken-latin-ext.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url(fonts/hanken-latin.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sky: #E3E8E5;     /* niebo po deszczu */
  --lime: #F4F5F2;    /* wapno, tynk */
  --white: #FFFFFF;
  --ink: #1A2021;
  --mute: #525B5C;
  --storm: #1F2728;   /* chmura burzowa */
  --storm2: #2A3436;  /* panel na ciemnym */
  --storm3: #36423F;
  --mist: #A7B3B1;
  --tile: #A3301E;    /* SYGNAŁ: czerwień dachówki ceramicznej */
  --tile-dk: #852514;
  --tile-bg: #F7E6E1;
  --tile-lt: #F08068; /* sygnał na ciemnym */
  --line: #C9D0CD;
  --line-dk: #3B4749;
  --field: #7A8584;
  --err: #A4282B;

  --karp: 3px 3px 14px 14px; /* karpiówka */
  --karp-sm: 3px 3px 10px 10px;
  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --bars: 106px; /* pasek demo + nawigacja */
  --disp: "Big Shoulders", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--lime); color: var(--ink);
  font: 400 17px/1.55 "Hanken Grotesk", system-ui, sans-serif;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--tile); outline-offset: 3px; }
.hero :focus-visible, .layers :focus-visible, .foot :focus-visible, .nav :focus-visible, .mbar :focus-visible, .demobar :focus-visible { outline-color: var(--tile-lt); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--tile); color: #fff; padding: 10px 16px; font-weight: 600; border-radius: var(--karp-sm); }
.skip:focus { top: 12px; }

/* ---------- typografia: wąski, wysoki nagłówek ---------- */
.h2 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 5.2vw, 76px); line-height: .92; letter-spacing: .005em; text-wrap: balance;
}
.h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
small { font-size: .8em; color: var(--mute); }
.src { font-size: 13px; color: var(--mute); margin-top: 18px; max-width: 90ch; }
.src--dark { color: var(--mist); }
.opt { font-weight: 400; color: var(--mute); font-size: .88em; }

.sec-head { display: grid; gap: 14px; margin-bottom: clamp(26px, 3.5vw, 44px); max-width: 760px; }
.sec-head__lead { color: var(--mute); max-width: 54ch; font-size: 18px; }
.sec-head--row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 14px 48px; }
.sec-head--dark .sec-head__lead { color: var(--mist); }

/* ---------- przyciski: karpiówka, ikona w osobnym polu ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 6px 6px 6px 20px; border: 0; border-radius: 3px 3px 12px 12px;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 2px 2px 9px 9px; transition: transform .5s var(--ease); }
.btn:hover .btn__ic { transform: translateX(3px); }
.btn--tile { background: var(--tile); color: #fff; }
.btn--tile .btn__ic { background: rgba(0, 0, 0, .22); }
.btn--tile:hover { background: var(--tile-dk); }
.btn--tilelt { background: var(--tile-lt); color: var(--storm); }
.btn--tilelt .btn__ic { background: var(--storm); color: var(--tile-lt); }
.btn--tilelt:hover { background: #F49A86; }
.btn--ghost { padding: 6px 20px; background: rgba(15, 20, 21, .4); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.btn--ghost:hover { background: rgba(15, 20, 21, .75); box-shadow: inset 0 0 0 1px #fff; }
.btn--line { padding: 6px 18px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field); }
.btn--line .btn__ic { background: var(--sky); width: 34px; height: 34px; }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { min-height: 44px; font-size: 15px; padding-left: 16px; }
.btn--sm .btn__ic { width: 34px; height: 34px; }

/* ---------- pasek demo ---------- */
.demobar {
  display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
  background: #0E1213; color: #DCE2E0; font-size: 14px; padding: 9px var(--gut); text-align: center;
}
.demobar a { display: inline-flex; align-items: center; gap: 6px; color: var(--tile-lt); font-weight: 600; text-underline-offset: 3px; min-height: 28px; }

/* ---------- nawigacja ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--storm); color: #fff; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-dk); opacity: 0; transition: opacity .5s var(--ease); }
.nav.is-solid::after { opacity: 1; }
.nav__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); height: 66px; display: flex; align-items: center; gap: 26px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logo__mark { width: 34px; height: 27px; fill: #DCE2E0; }
.logo__mark .logo__red { fill: var(--tile-lt); }
.logo__word { font-family: var(--disp); font-weight: 600; font-size: 25px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.logo__word b { font-weight: 900; }
.nav__links { display: flex; gap: 22px; font-size: 15px; }
.nav__links a { text-decoration: none; padding: 8px 0; position: relative; color: #DCE2E0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--tile-lt); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__menu-tel { display: none; }
.nav__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-variant-numeric: tabular-nums; color: #fff; }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--karp-sm); background: var(--storm2); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: #fff; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.nav.is-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.nav.is-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* =========================================================
   1 · HERO: czarna dachówka po ulewie. Dach schnie rząd po rzędzie, potem łapie światło.
   Scena w proporcjach zdjęcia (3:2) liczona w jednostkach kontenera. Szeroki ekran: pełna szerokość, kadr wyśrodkowany w pionie;
   wąski: pełna wysokość, kadr przesunięty tak, żeby kos i koniec kalenicy były przy prawej krawędzi.
   ========================================================= */
.hero {
  position: relative; overflow: hidden; background: #151B1C; color: #fff;
  height: max(600px, calc(100svh - var(--bars)));
  container-type: size; container-name: hero;
}
.hero__stage { position: absolute; left: 0; top: min(0px, calc((100cqh - 66.667cqw) * .45)); width: 100cqw; height: calc(100cqw * 2 / 3); }
@container hero (aspect-ratio < 3 / 2) {
  .hero__stage { top: 0; width: calc(100cqh * 3 / 2); height: 100cqh; left: clamp(calc(100cqw - 150cqh), calc(88cqw - 79.5cqh), 0px); }
}
.hero__img, .hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img img { object-fit: cover; }
/* warstwy dachu: lewy dolny prostokąt sceny (1397 × 793 z 2000 × 1333 px) */
.roofl { position: absolute; left: 0; top: 40.51%; width: 69.85%; height: 59.49%; }
.roofl img { position: absolute; inset: 0; width: 100%; height: 100%; }
.roofl .wet { mix-blend-mode: multiply; opacity: 0; }
.roofl .sun { mix-blend-mode: screen; opacity: 1; }
/* przejaśnienie w szczelinie chmur za kosem */
.hero__gap { position: absolute; left: 44%; top: 34%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 205, .32), rgba(255, 236, 205, 0)); mix-blend-mode: screen; pointer-events: none; }
.hero__storm { position: absolute; inset: 0; pointer-events: none; background: #0B1112; opacity: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 17, 18, 0) 38%, rgba(12, 17, 18, .55) 72%, rgba(12, 17, 18, .72) 100%),
    linear-gradient(180deg, rgba(12, 17, 18, .3) 0%, rgba(12, 17, 18, 0) 16%, rgba(12, 17, 18, 0) 55%, rgba(12, 17, 18, .55) 100%);
}
.hero__copy {
  position: absolute; z-index: 2; left: 59cqw;
  bottom: clamp(28px, 7cqh, 72px); width: min(37cqw, 560px);
}
.hero__h {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(54px, min(6.2vw, 11vh), 120px); line-height: .88; letter-spacing: .005em;
  margin-bottom: clamp(16px, 3cqh, 28px); text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero__h .ln { display: block; overflow: hidden; padding: .14em 0 .04em; margin-top: -.14em; }
.hero__h .ln > span { display: block; }
.hero__lead { font-size: 18px; color: #EDF1EF; max-width: 42ch; margin-bottom: 22px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__state {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 12px 8px;
  background: rgba(12, 17, 18, .62); border-radius: var(--karp-sm);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #E6ECEA;
}
.hero__state .ic { color: var(--tile-lt); }
.hero__state .sts { display: inline-grid; }
.hero__state .st { grid-area: 1 / 1; }
.hero__state .st--a { opacity: 0; }

/* ruch hero: woda spływa od kalenicy, rzędy łapią światło po burzy */
.is-motion .hero__storm { animation: clear 3.6s cubic-bezier(.45, 0, .25, 1) .2s both; }
@keyframes clear { from { opacity: .58; } to { opacity: 0; } }
.is-motion .roofl .wet { animation: dry 1s cubic-bezier(.45, 0, .25, 1) both; animation-delay: calc(.55s + var(--k) * .36s); }
@keyframes dry { from { opacity: 1; } to { opacity: 0; } }
.is-motion .roofl .sun { animation: glint 1.3s var(--ease) both; animation-delay: calc(1s + var(--k) * .36s); }
@keyframes glint { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 1; } }
.is-motion .hero__gap { animation: gap 3.4s var(--ease) .8s both; }
@keyframes gap { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.is-motion .hero__img img, .is-motion .roofl { animation: settle 3.4s var(--ease) both; transform-origin: 40% 70%; }
@keyframes settle { from { transform: scale(1.035); } to { transform: none; } }
.is-motion .hero__h .ln > span { animation: lineUp 1.1s var(--ease) .15s both; }
.is-motion .hero__h .ln + .ln > span { animation-delay: .27s; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.is-motion .hero__lead, .is-motion .hero__cta { animation: up .9s var(--ease) .5s both; }
.is-motion .hero__state { animation: up .9s var(--ease) .1s both; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.is-motion .hero__state .st--a { animation: fadeOut .2s linear 2.7s both; }
.is-motion .hero__state .st--b { animation: fadeIn .25s linear 2.9s both; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* odsłanianie przy przewijaniu */
.is-motion .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.is-motion .rv.in { opacity: 1; transform: none; }

/* =========================================================
   2 · PROBLEMY: rzędy na zakład. Wyższy rząd leży na niższym, cień dolnej krawędzi.
   ========================================================= */
.probs { background: var(--sky); padding: clamp(56px, 7vw, 92px) 0; }
.rows { display: grid; }
.row {
  position: relative; z-index: calc(10 - var(--i));
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 26px; align-items: center;
  padding: 16px 22px 16px 16px; background: var(--lime); border-radius: var(--karp);
  box-shadow: 0 10px 16px -10px rgba(22, 32, 33, .38), inset 0 -1px 0 rgba(22, 32, 33, .08);
}
.row + .row { margin-top: -10px; padding-top: 26px; }
.row:nth-child(even) { background: #ECEFEB; }
.row__img img { width: 100%; height: 132px; object-fit: cover; border-radius: var(--karp); }
.row__h { display: flex; align-items: baseline; gap: 12px; font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 34px; line-height: 1; margin-bottom: 6px; }
.row__no { font-size: 18px; color: var(--tile); font-weight: 700; font-variant-numeric: tabular-nums; }
.row__lead { font-weight: 500; margin-bottom: 4px; }
.row__chk { color: var(--mute); font-size: 15.5px; }
.row__chk b { color: var(--ink); font-weight: 600; }
.row__src { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--tile); }
.row__src small { font-weight: 400; margin-left: 6px; }
.is-motion .row.rv { transform: translateY(-14px); }
.is-motion .row.rv.in { transform: none; }

/* =========================================================
   3 · MODUŁ: zgłoszenie z dachu
   ========================================================= */
.req { background: var(--lime); padding: clamp(56px, 7vw, 96px) 0; }
.panel { background: var(--white); border-radius: var(--karp); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(22, 32, 33, .4); overflow: hidden; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--storm); color: var(--mist); }
.steps li { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-right: 1px solid var(--line-dk); }
.steps li:last-child { border-right: 0; }
.steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px 2px 8px 8px; background: var(--storm2); color: #fff; font-size: 14px; }
.steps .is-on { color: #fff; }
.steps .is-on b { background: var(--tile-lt); color: var(--storm); }
.steps .is-done b { background: var(--storm3); color: var(--tile-lt); }
.step { padding: clamp(22px, 3vw, 40px); }
.step__h { display: flex; align-items: center; gap: 12px; font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3vw, 40px); line-height: 1; margin-bottom: 22px; }
.step__h .ic { color: var(--tile); }
legend.step__h { float: left; width: 100%; }
legend.step__h + * { clear: both; }
.step__lead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: -8px 0 20px; color: var(--mute); }
.step__cnt { font-variant-numeric: tabular-nums; color: var(--ink); }
.step__cnt b { color: var(--tile); }
.step__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.step__nav .btn:only-child { margin-left: auto; }
.step[data-step="1"] .step__nav { justify-content: flex-end; }

/* wybór: kafle z ukrytym polem */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--big { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 26px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip > span {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; height: 100%; padding: 10px 16px;
  background: var(--lime); border-radius: var(--karp-sm); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.chips--big .chip > span { padding: 16px 18px 18px; min-height: 86px; }
.chip b { font-weight: 600; }
.chips--big .chip b { font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; }
.chip small { color: var(--mute); font-size: 14px; }
.chip:hover > span { box-shadow: inset 0 0 0 1px var(--field); }
.chip input:checked + span { background: var(--tile-bg); box-shadow: inset 0 0 0 2px var(--tile); }
.chip input:checked + span b { color: var(--tile-dk); }
.chip input:focus-visible + span { outline: 2px solid var(--tile); outline-offset: 3px; }
.pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 32px; }
.sub legend { font-weight: 600; margin-bottom: 10px; }
.hint { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; background: var(--sky); border-radius: var(--karp-sm); font-size: 15.5px; }
.hint:empty { display: none; }
.hint b { color: var(--tile-dk); }

/* pięć miejsc na zdjęcia */
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.slot { position: relative; display: flex; flex-direction: column; background: var(--lime); border-radius: var(--karp); box-shadow: inset 0 0 0 1px var(--line); padding: 10px 10px 12px; transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.slot.is-need { box-shadow: inset 0 0 0 2px var(--tile); background: #FBF4F2; }
.slot__frame { position: relative; aspect-ratio: 16 / 11; background: var(--sky); border-radius: 2px 2px 10px 10px; overflow: hidden; margin-bottom: 12px; }
.slot__draw { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.slot__draw .d-ln { stroke: var(--mute); stroke-width: 2; }
.slot__draw .d-roof { stroke: var(--ink); stroke-width: 2.5; }
.slot__draw .d-acc { stroke: var(--tile); stroke-width: 2.5; }
.slot__draw .d-vf { stroke: var(--tile); stroke-width: 2; }
.slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-motion .slot__img:not([hidden]) { animation: drop .6s var(--ease) both; }
@keyframes drop { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.slot__h { display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.slot__h span { color: var(--tile); font-variant-numeric: tabular-nums; }
.slot__txt p { font-size: 14.5px; color: var(--mute); line-height: 1.45; }
.slot__txt { flex: 1; margin-bottom: 12px; }
.slot__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 3px 3px 10px 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--field); font-weight: 600; font-size: 15px; cursor: pointer; }
.slot__btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.slot__btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot__btn:focus-within { outline: 2px solid var(--tile); outline-offset: 3px; }
.slot.is-full .slot__btn { background: var(--sky); box-shadow: none; }
.slot__rm { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 2px 2px 9px 9px; background: rgba(15, 20, 21, .72); color: #fff; cursor: pointer; }
.slot__tag { position: absolute; top: 16px; left: 16px; padding: 4px 9px 5px; border-radius: 2px 2px 7px 7px; background: var(--tile); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 15px; color: var(--mute); }
.note .ic { margin-top: 3px; color: var(--tile); }
.note--warn { margin: 0 0 20px; padding: 12px 14px; background: var(--tile-bg); border-radius: var(--karp-sm); color: var(--ink); }
.note--warn strong { color: var(--tile-dk); }

/* kalendarz oględzin */
.cal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.cal__days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cal__dow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: center; padding-bottom: 2px; }
.cal__week { grid-column: 1 / -1; font-size: 13px; color: var(--mute); margin-top: 6px; }
.day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; padding: 6px 4px;
  border: 0; border-radius: 2px 2px 10px 10px; background: var(--lime); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.day b { font-family: var(--disp); font-weight: 800; font-size: 26px; line-height: 1; }
.day small { font-size: 12px; }
.day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink); }
.day[aria-pressed="true"] { background: var(--tile); box-shadow: none; color: #fff; }
.day[aria-pressed="true"] small { color: #fff; }
.day:disabled { cursor: not-allowed; color: #8C9595; background: repeating-linear-gradient(135deg, var(--lime) 0 6px, #E9ECE8 6px 12px); }
.day:disabled small { color: #6E7778; }
.cal__side { padding: 18px; background: var(--sky); border-radius: var(--karp); }
.cal__day { font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1.05; margin-bottom: 14px; }
.cal__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cal__slots:empty { display: none; }
.hour { min-height: 48px; border: 0; border-radius: 2px 2px 10px 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--field); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.hour[aria-pressed="true"] { background: var(--tile); color: #fff; box-shadow: none; }
.hour:disabled { color: #6E7778; text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; }
.cal__hint { margin-top: 14px; font-size: 14px; color: var(--mute); }

/* pola */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.field { display: grid; gap: 7px; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 3px 3px 8px 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--field); font-size: 16px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tile); }
.field.has-err input { box-shadow: inset 0 0 0 2px var(--err); }
.field__err { display: flex; align-items: flex-start; gap: 7px; color: var(--err); font-size: 14.5px; font-weight: 500; }
.field__err .ic { margin-top: 2px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15.5px; min-height: 44px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tile); flex: none; }

/* podgląd: mapa domu + karta zgłoszenia */
.done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.map { background: var(--sky); border-radius: var(--karp); padding: 14px 14px 12px; }
.map svg { width: 100%; height: auto; display: block; }
.map__key { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 4px 0; font-size: 14px; color: var(--mute); }
.map__key span { display: inline-flex; align-items: center; gap: 7px; }
.k { width: 14px; height: 14px; border-radius: 50%; }
.k--photo { background: var(--tile); }
.k--site { box-shadow: inset 0 0 0 2px var(--tile); background: var(--white); }
.m-house { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.m-roof { fill: #3A4446; stroke: var(--ink); stroke-width: 2; }
.m-rows { stroke: #55615F; stroke-width: 1.2; }
.m-ln { fill: none; stroke: var(--ink); stroke-width: 2; }
.m-dash { fill: none; stroke: var(--mute); stroke-width: 1.5; stroke-dasharray: 5 4; }
.m-ground { stroke: var(--mute); stroke-width: 2; }
.m-pin circle { fill: var(--white); stroke: var(--tile); stroke-width: 2.5; }
.m-pin text { font: 700 14px "Hanken Grotesk", sans-serif; fill: var(--tile); text-anchor: middle; dominant-baseline: central; }
.m-pin.is-photo circle { fill: var(--tile); }
.m-pin.is-photo text { fill: #fff; }
.m-pin.is-off { opacity: .55; }

.m-lbl { font: 600 13px "Hanken Grotesk", sans-serif; fill: var(--ink); }
.m-lbl.m-lbl--inv { fill: #fff; }
.is-motion .m-pin { animation: pin .5s var(--ease) both; animation-delay: calc(var(--d) * 120ms + 200ms); transform-box: fill-box; transform-origin: center; }
@keyframes pin { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.is-motion .m-pin.is-off { animation-name: pinOff; }
@keyframes pinOff { from { opacity: 0; } to { opacity: .55; } }
.sheet { display: grid; gap: 16px; }
.sheet__h { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.sheet__term { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--storm); color: #fff; border-radius: var(--karp); }
.sheet__term .ic { color: var(--tile-lt); width: 26px; height: 26px; }
.sheet__term b { font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1.05; display: block; }
.sheet__term span { font-size: 14px; color: var(--mist); }
.sheet__list { display: grid; gap: 8px; }
.sheet__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sheet__list .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--tile); color: var(--tile); }
.sheet__list .is-photo .n { background: var(--tile); color: #fff; box-shadow: none; }
.sheet__list b { display: block; font-weight: 600; }
.sheet__list small { font-size: 13.5px; }
.sheet__list img { width: 64px; height: 48px; object-fit: cover; border-radius: 2px 2px 8px 8px; }
.sheet__list .ph { width: 64px; height: 48px; border-radius: 2px 2px 8px 8px; background: var(--sky); }
.sheet__who { font-size: 15.5px; color: var(--mute); }
.sheet__who b { color: var(--ink); }

/* =========================================================
   4 · POKRYCIA: przekrój rozłożony na warstwy (ciemne)
   ========================================================= */
.layers { background: var(--storm); color: #F1F4F2; padding: clamp(56px, 7vw, 96px) 0; }
.cover-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.cover-tabs button {
  min-height: 48px; padding: 10px 18px; border: 0; border-radius: 3px 3px 12px 12px; cursor: pointer;
  background: var(--storm2); color: #E6ECEA; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-dk);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.cover-tabs button:hover { box-shadow: inset 0 0 0 1px var(--mist); }
.cover-tabs [aria-selected="true"] { background: var(--tile-lt); color: var(--storm); box-shadow: none; }
.lay { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.xray { background: var(--storm2); border-radius: var(--karp); padding: 10px; }
.xray svg { display: block; width: 100%; height: auto; }
.x-layer { transition: transform 1s var(--ease); }
.x-face { stroke: #0F1515; stroke-width: 1.2; }
.x-lead { stroke: var(--mist); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.x-dot { fill: var(--tile-lt); }
.x-no { font: 700 12px "Hanken Grotesk", sans-serif; fill: var(--tile-lt); letter-spacing: .08em; }
.x-name { font: 600 15px "Hanken Grotesk", sans-serif; fill: #F1F4F2; }
.x-sub { font: 400 12.5px "Hanken Grotesk", sans-serif; fill: var(--mist); }
.is-motion .xray:not(.in) .x-layer { transform: translate(0, 0) !important; }
.lay__side { display: grid; gap: 20px; }
.xray__key { display: none; }
.xray__key li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 2px 10px; padding: 8px 4px; border-top: 1px solid var(--line-dk); font-size: 15px; }
.xray__key i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--tile-lt); padding-top: 2px; }
.xray__key b { font-weight: 600; }
.xray__key span { grid-column: 2; color: var(--mist); font-size: 14px; }
.lay__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--karp); }
.prices { display: grid; gap: 0; }
.prices div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dk); }
.prices dt { color: var(--mist); font-size: 15px; }
.prices dd { font-family: var(--disp); font-weight: 800; font-size: 26px; line-height: 1; color: #fff; text-align: right; font-variant-numeric: tabular-nums; max-width: 13ch; text-wrap: balance; }
.prices small { grid-column: 1 / -1; color: var(--mist); font-size: 13px; }
.prices .none dd { font-family: inherit; font-weight: 600; font-size: 16px; color: var(--tile-lt); }
.extras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: clamp(32px, 4vw, 52px); }
.extras div { padding: 16px 16px 18px; background: var(--storm2); border-radius: var(--karp); display: grid; gap: 4px; align-content: start; }
.extras dt { font-size: 14px; color: var(--mist); }
.extras dd { white-space: nowrap; font-family: var(--disp); font-weight: 800; font-size: 30px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.extras small { color: var(--mist); font-size: 12.5px; }

/* =========================================================
   5 · PAPIERY I PIENIĄDZE
   ========================================================= */
.law { background: var(--sky); padding: clamp(56px, 7vw, 96px) 0; }
.law__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.law__col > .h3 { margin-bottom: 16px; }
.cases { display: grid; gap: 0; }
.cases li { display: block; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--line); position: relative; }
.cases li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 0 3px 3px; background: var(--tile); }
.cases__v { display: block; margin-top: 4px; font-weight: 600; color: var(--tile-dk); }
.cases__v--ok { color: #24603F; }
.law__note { margin-top: 18px; padding: 14px 16px; background: var(--lime); border-radius: var(--karp-sm); font-size: 15.5px; max-width: 62ch; }
.law__note strong { color: var(--tile-dk); }
.money { display: grid; gap: 12px; }
.money li { position: relative; padding: 18px 20px 20px; background: var(--lime); border-radius: var(--karp); box-shadow: 0 8px 14px -10px rgba(22, 32, 33, .3); }
.money__tag { display: inline-block; margin-bottom: 8px; padding: 3px 9px 4px; border-radius: 2px 2px 7px 7px; background: var(--storm); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.money h4 { font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; margin-bottom: 6px; }
.money p { font-size: 15.5px; margin-bottom: 8px; }
.money small { font-size: 13px; }

/* =========================================================
   6 · PRZEBIEG: zdjęcie ekipy + kroki na łatach
   ========================================================= */
.flow { background: var(--lime); padding: clamp(56px, 7vw, 96px) 0; }
.flow__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.flow__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--karp); }
.flow__copy .h2 { margin-bottom: 26px; }
.laths { display: grid; }
.laths li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
.laths li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 1px; background: linear-gradient(180deg, #C9B79A, #B7A383); box-shadow: 0 2px 0 rgba(0, 0, 0, .08); transform-origin: left; }
.is-motion .laths li.rv::before { transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.is-motion .laths li.rv.in::before { transform: none; }
.laths__no { font-family: var(--disp); font-weight: 800; font-size: 38px; line-height: 1; color: var(--tile); font-variant-numeric: tabular-nums; padding-top: 6px; }
.laths h3 { font-size: 19px; font-weight: 700; margin: 8px 0 4px; }
.laths p { color: var(--mute); font-size: 16px; }

/* =========================================================
   7 · PYTANIA
   ========================================================= */
.faq { background: var(--sky); padding: clamp(56px, 7vw, 96px) 0; }
.faq .h2 { margin-bottom: 30px; }
.faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 17.5px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--tile); transition: transform .4s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 0 18px; color: var(--mute); max-width: 60ch; }

/* =========================================================
   8 · STOPKA: znak firmy wypełniony zdjęciem dachówki
   ========================================================= */
.foot { background: var(--storm); color: #E6ECEA; padding: clamp(56px, 7vw, 88px) 0 28px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px 64px; }
.foot__col { display: grid; gap: 16px; align-content: start; justify-items: start; }
.foot__h { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; }
.foot__h .ic { color: var(--tile-lt); }
.foot__tel { display: inline-flex; align-items: center; gap: 12px; font-family: var(--disp); font-weight: 800; font-size: clamp(40px, 5vw, 60px); line-height: 1; text-decoration: none; color: #fff; font-variant-numeric: tabular-nums; }
.foot__tel .ic { width: .7em; height: .7em; color: var(--tile-lt); }
.foot__hours { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); }
.towns { display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { padding: 6px 12px 7px; border-radius: 2px 2px 8px 8px; background: var(--storm2); font-size: 15px; }
.foot__word {
  margin: clamp(40px, 6vw, 72px) 0 18px; font-family: var(--disp); font-weight: 900; text-transform: uppercase;
  font-size: clamp(80px, 21.5vw, 300px); line-height: .8; letter-spacing: .01em; white-space: nowrap;
  background: #4A3A33 url(img/ceramika-800.webp) 50% 40% / cover; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-motion .foot__word { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.is-motion .foot__word.in { clip-path: inset(0 0 0 0); }
.foot__demo { font-size: 13.5px; color: var(--mist); max-width: 100ch; }
.foot__demo a { color: var(--tile-lt); }

/* dolny pasek na telefonie */
.mbar { display: none; }

/* =========================================================
   Responsywność
   ========================================================= */
@media (max-width: 1180px) {
  .nav__links { gap: 16px; font-size: 14.5px; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips--big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .nav__links {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; gap: 0; padding: 8px var(--gut) 20px;
    background: var(--storm); border-top: 1px solid var(--line-dk); transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav__links a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--line-dk); }
  .nav__menu-tel { display: block; color: var(--tile-lt) !important; }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; }
  .burger { display: block; }
  .nav__tel span { display: none; }
  .nav__tel { width: 44px; height: 44px; justify-content: center; }
  .nav__cta { display: none; }
  .mbar {
    display: grid; grid-template-columns: auto 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: var(--storm); box-shadow: 0 -1px 0 var(--line-dk);
  }
  .mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 3px 3px 12px 12px; font-weight: 600; text-decoration: none; }
  .mbar__tel { background: var(--storm2); color: #fff; }
  .mbar__cta { background: var(--tile-lt); color: var(--storm); }
  body { padding-bottom: 64px; }
  .sec-head--row { grid-template-columns: 1fr; }
  .lay, .law__grid, .done, .cal { grid-template-columns: 1fr; }
  .flow__grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .row { grid-template-columns: 150px minmax(0, 1fr); }
  .row__btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  /* TELEFON — mniej czytania */
  body { font-size: 16.5px; }
  .demobar { font-size: 13px; padding: 7px var(--gut); }
  .demobar span { display: none; }
  .hero { height: max(560px, calc(100svh - var(--bars) - 64px)); }
  .hero::after { background: linear-gradient(180deg, rgba(12, 17, 18, .25) 0%, rgba(12, 17, 18, 0) 18%, rgba(12, 17, 18, 0) 34%, rgba(12, 17, 18, .82) 64%, rgba(12, 17, 18, .94) 100%); }
  .hero__copy { left: var(--gut); right: var(--gut); width: auto; bottom: 22px; }
  .hero__h { font-size: clamp(46px, 13.4vw, 64px); }
  .hero__lead { font-size: 16.5px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__cta .btn--ghost { display: none; }
  .hero__state { margin-bottom: 12px; font-size: 12px; }
  .row { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 12px 14px; }
  .row + .row { padding-top: 22px; }
  .row__img img { height: 92px; }
  .row__h { font-size: 27px; }
  .row__chk { display: none; }
  .row__btn { grid-column: 1 / -1; justify-self: stretch; }
  .steps li { padding: 12px 6px; justify-content: center; }
  .steps li span { display: none; }
  .steps li.is-on span { display: inline; }
  .steps li.is-on { grid-column: span 1; }
  .step { padding: 22px 16px; }
  .chips--big { grid-template-columns: 1fr 1fr; }
  .chips--big .chip > span { min-height: 72px; padding: 12px 14px 14px; }
  .chips--big .chip b { font-size: 21px; }
  .pair { grid-template-columns: 1fr; }
  .slots { grid-template-columns: 1fr; }
  .slot { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 12px; padding: 10px; }
  .slot__frame { grid-row: span 2; margin: 0; aspect-ratio: 1; align-self: start; }
  .slot__txt { margin: 0; }
  .slot__txt p { font-size: 14px; }
  .slot__btn { grid-column: 2; }
  .slot__rm { top: 14px; left: 74px; right: auto; width: 44px; height: 44px; }
  .slot__tag { top: 96px; left: 14px; right: auto; font-size: 11px; padding: 3px 7px 4px; }
  .cal__days { gap: 6px; }
  .day { min-height: 52px; }
  .day b { font-size: 22px; }
  .fields { grid-template-columns: 1fr; }
  .step__nav .btn { flex: 1 1 auto; }
  .extras { grid-template-columns: 1fr; gap: 6px; }
  .extras div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; }
  .extras dd { font-size: 24px; grid-row: 1; grid-column: 2; }
  .extras small { grid-column: 1 / -1; }
  .x-no, .x-name, .x-sub { display: none; }
  .xray__key { display: block; margin-top: 6px; }
  .flow__grid { grid-template-columns: 1fr; }
  .flow__img img { aspect-ratio: 16 / 10; }
  .faq__cols { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .sheet__list li { grid-template-columns: 28px minmax(0, 1fr) 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}