/* ============================================================
   MIRACLE DETAILING — built on the WERK_ system
   Dark stage, one signal red taken from the logo, expanded
   Archivo for display, JetBrains Mono for spec labels.
   ============================================================ */

/* fonts are served from this site (OFL licensed): no third-party connections before first paint */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-normal-latin.woff2") format("woff2");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:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-italic-latin.woff2") format("woff2");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:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/jetbrains-mono-normal-latin.woff2") format("woff2");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{
  --bg:#070708;
  --bg-2:#0D0D0F;
  --bg-3:#141417;
  --fg:#F3F2EF;
  --fg-2:#C9C8C4;
  --dim:#8C8D93;
  --line:rgba(243,242,239,.10);
  --line-2:rgba(243,242,239,.18);
  --red:#E3161D;          /* surfaces: buttons, rules, large type */
  --red-hi:#FF2A31;       /* hover */
  --red-text:#FF4047;     /* small red text on black: 5.6:1 */
  --red-deep:#6E0508;
  --chrome:#D6DADF;
  --gutter:28px;
  --col:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 100;
  font-size:16px;line-height:1.55;overflow-x:hidden;
}
img{display:block;max-width:100%}
/* no lone last words ("out.”" on its own line); browsers without support simply ignore it */
p,blockquote,.qa__q{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-text);outline-offset:3px}

/* pasek przewijania w kolorach strony — domyslny jasny psul wrazenie na czarnym tle */
html{scrollbar-color:#2A2A2E var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2A2A2E;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* odzew na wcisniecie: bez tego klikniecie wydaje sie "martwe".
   Bez przejscia i bez .pbtn — tam transformem steruje efekt magnesu w skrypcie. */
.bbtn:active,.act:active,.svc__add:active,.nav__cta:active,.nav__menu-cta:active,
.score__link:active,.dock__b:active,.seg button:active,.qa summary:active i{transform:translateY(1px) scale(.99)}

/* --- cursor: a crosshair, red, rotates over anything clickable --- */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:28px;height:28px;margin:-14px 0 0 -14px;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor::before,.cursor::after{content:"";position:absolute;background:var(--red-hi);transition:transform .35s var(--ease)}
.cursor::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.cursor::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.cursor.hot::before{transform:translateX(-.5px) rotate(45deg) scaleY(.6)}
.cursor.hot::after{transform:translateY(-.5px) rotate(45deg) scaleX(.6)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:9990}

/* ================= NAV ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:76px;padding:0 var(--gutter);
  transition:background .5s,border-color .5s,height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{background:rgba(7,7,8,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.brand__word{
  display:flex;flex-direction:column;line-height:1;
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:"wdth" 125;
}
.brand__word b{font-weight:600;font-size:9.5px;letter-spacing:.42em;color:var(--fg-2);margin-top:5px;font-variation-settings:"wdth" 100}

.nav__menu{display:flex;align-items:center;gap:30px}
/* padding, nie sam tekst: cel dotykowy 45 px zamiast 21 px (WCAG 2.5.8 chce >=24) */
.nav__menu a{
  position:relative;font-size:13.5px;font-weight:500;color:var(--fg-2);
  display:flex;align-items:baseline;gap:7px;padding:12px 0;transition:color .3s;
}
.nav__menu a i{font-style:normal;font-size:10px;color:var(--red-text);letter-spacing:.04em}
.nav__menu a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__menu a:hover{color:var(--fg)}
.nav__menu a:hover::after{transform:scaleX(1);transform-origin:left}
/* sekcja, w ktorej wlasnie jestes */
.nav__menu a.is-now{color:var(--fg)}
.nav__menu a.is-now::after{transform:scaleX(1);transform-origin:left}
.nav__menu a.is-now i{color:var(--red-hi)}
.nav__menu .nav__menu-cta{display:none}
.nav__foot{display:none}

.nav__right{display:flex;align-items:center;gap:18px}
.nav__phone{font-size:12.5px;letter-spacing:.04em;color:var(--fg-2);padding:11px 0;transition:color .3s}
.nav__phone:hover{color:var(--fg)}
.nav__cta{
  display:inline-flex;align-items:center;height:42px;padding:0 20px;
  background:var(--red);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background .3s,box-shadow .4s;
}
.nav__cta:hover{background:var(--red-hi);box-shadow:0 10px 34px -8px rgba(227,22,29,.65)}
.nav__burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--fg);transition:transform .45s var(--ease),top .45s var(--ease)}
.nav__burger span:nth-child(1){top:17px}
.nav__burger span:nth-child(2){top:25px}
.nav.is-open .nav__burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
body.nav-open{overflow:hidden}

/* ================= HERO ================= */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;padding-top:76px;
}
.hero__bg{position:absolute;inset:0;z-index:-4}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.04)}
/* left-to-right shade so the type stays readable, plus a floor that grounds the rails */
.hero__shade{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,7,8,.94) 0%,rgba(7,7,8,.78) 34%,rgba(7,7,8,.25) 64%,rgba(7,7,8,.35) 100%),
    linear-gradient(180deg,rgba(7,7,8,.82) 0%,rgba(7,7,8,.45) 9%,rgba(7,7,8,0) 24%,rgba(7,7,8,0) 62%,rgba(7,7,8,.92) 100%);
}
/* Byla tu wedrujaca smuga swiatla na masce. Zmierzone: zmieniala jasnosc ekranu
   srednio o 2,25/255 (czyli prawie nic), a zabierala od 15 do 25 % klatek przy wejsciu
   na strone. Usunieta swiadomie — pierwszy ekran ma byc plynny. */
/* ziarno tez bez blendowania — druga warstwa mieszania kosztowala kolejne klatki */
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero__rail{position:relative;padding:0 var(--gutter)}
.hero__rail--top{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  height:52px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.hero__rail--top em,.finale__kicker em{font-style:normal;color:var(--red-text);margin:0 8px}

/* skip link: invisible until focused from the keyboard */
.skip{
  position:fixed;left:16px;top:12px;z-index:10000;padding:12px 16px;background:var(--red);color:#fff;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;transform:translateY(-160%);transition:transform .3s var(--ease);
}
.skip:focus{transform:none}
.hero__rail-r{display:flex;align-items:center;gap:10px;color:var(--fg-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(227,22,29,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,22,29,.55)}70%{box-shadow:0 0 0 10px rgba(227,22,29,0)}100%{box-shadow:0 0 0 0 rgba(227,22,29,0)}}

.hero__stage{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:var(--col);margin:0 auto;padding:6vh var(--gutter) 7vh;
}
.hero__kicker{display:flex;flex-wrap:wrap;gap:0;margin-bottom:clamp(18px,3vh,30px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
.hero__kicker span{padding:0 14px;border-left:1px solid var(--line-2)}
.hero__kicker span:first-child{padding-left:0;border-left:0}
.hero__h{
  font-weight:900;text-transform:uppercase;
  font-variation-settings:"wdth" 125;
  /* capped at 128 px: above that "IN YOUR RIDE." no longer fits the 1320 px column and breaks in two */
  font-size:clamp(46px,8.9vw,128px);line-height:.86;letter-spacing:-.018em;
  display:flex;flex-direction:column;
  text-shadow:0 18px 60px rgba(0,0,0,.45);
}
.hero__h .w{display:block;overflow:hidden;padding:.06em 0 .04em;margin:-.06em 0 -.04em}
.hero__h .w > span{display:block}
.hero__h .w--accent > span{
  color:var(--red);font-style:italic;
  background:linear-gradient(180deg,#FF3A40 0%,#E3161D 52%,#A90D12 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-right:.08em;
}
.hero__note{
  margin-top:clamp(22px,4vh,40px);max-width:46ch;
  font-size:clamp(15.5px,1.25vw,18.5px);line-height:1.55;color:var(--fg-2);
  padding-left:20px;border-left:2px solid var(--red);
  text-shadow:0 1px 14px rgba(0,0,0,.85);
}
.hero__note q{color:var(--fg);quotes:"“" "”"}

.hero__rail--bottom{
  display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:0;
  /* bez backdrop-filter: rozmycie calego paska nad zdjeciem przeliczalo sie w kazdej
     klatce animacji wejscia; gestsze tlo wyglada tak samo, a nie kosztuje nic */
  padding:0;border-top:1px solid var(--line);background:rgba(7,7,8,.88);
}
.rail__specs{display:flex;align-items:stretch}
.rail__specs span{
  display:flex;align-items:center;padding:0 26px;white-space:nowrap;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border-right:1px solid var(--line);
}
.rail__specs span:first-child{padding-left:var(--gutter)}
.rail__specs b{color:var(--fg);font-weight:500;margin-left:10px}
.rail__cta{display:flex;align-items:stretch}
.pbtn{
  display:flex;align-items:center;gap:40px;padding:25px 28px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
  border-left:1px solid var(--line);transition:background .35s,color .35s;
}
.pbtn i{font-style:normal;color:var(--red-text);transition:transform .35s var(--ease)}
.pbtn:hover{background:rgba(255,255,255,.04)}
.pbtn:hover i{transform:translateX(5px)}
.pbtn--acc{background:var(--red);color:#fff;border-left:0;font-weight:500}
.pbtn--acc i{color:#fff}
.pbtn--acc:hover{background:var(--red-hi)}
.pbtn--acc:hover i{transform:translateY(4px)}

/* ================= RESPONSIVE: nav + hero ================= */
@media (max-width:1180px){
  .nav__menu{gap:22px}
  .nav__phone{display:none}
  /* specs on one full-width row, the two actions share the row below —
     wrapping naturally left a dead half-row on the right at 1024 px */
  .rail__specs{width:100%;border-bottom:1px solid var(--line)}
  .rail__specs span{flex:1;padding:16px 22px}
  .rail__specs span:last-child{border-right:0}
  .rail__cta{width:100%}
  .rail__cta .pbtn{flex:1;justify-content:space-between}
}
@media (max-width:980px){
  :root{--gutter:20px}
  .nav{height:68px}
  .hero{padding-top:68px}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .nav__menu{
    position:fixed;left:0;right:0;top:68px;height:calc(100dvh - 68px);
    flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gutter) 40px;
    background:var(--bg);border-top:1px solid var(--line);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .35s,transform .5s var(--ease),visibility .35s;
  }
  .nav.is-open{background:var(--bg);border-color:var(--line)}
  .nav.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
  .nav__menu a{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--fg);padding:18px 0;border-bottom:1px solid var(--line);gap:14px;font-variation-settings:"wdth" 110}
  .nav__menu a i{font-size:11px}
  .nav__menu a::after{display:none}
  .nav__menu .nav__menu-cta{display:flex;justify-content:center;margin-top:28px;background:var(--red);color:#fff;border:0;font-size:15px;text-transform:uppercase;letter-spacing:.08em;padding:20px}
  /* menu konczylo sie pustka na pol ekranu: pod przyciskiem stoja kontakty i godziny */
  .nav__foot{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:34px}
  .nav__menu .nav__foot a{
    font-size:14px;font-weight:400;letter-spacing:.06em;color:var(--fg);
    border:0;padding:10px 0;min-height:44px;align-items:center;font-variation-settings:normal;
  }
  .nav__foot p{
    display:flex;align-items:center;gap:10px;padding:6px 0;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  }
  .nav__foot em{font-style:normal;color:var(--red-text);margin:0 4px}
}
@media (max-width:820px){
  .hero__bg img{object-position:62% 50%}
  .hero__shade{
    background:
      linear-gradient(180deg,rgba(7,7,8,.9) 0%,rgba(7,7,8,.55) 11%,rgba(7,7,8,.2) 30%,rgba(7,7,8,.55) 58%,rgba(7,7,8,.96) 100%);
  }
  .hero__rail--top{height:44px;font-size:11px}
  .hero__rail--top > span:first-child{display:none}
  .hero__stage{justify-content:flex-end;padding:0 var(--gutter) 30px}
  .hero__kicker{font-size:10px;letter-spacing:.16em}
  .hero__kicker span{padding:0 9px}
  .hero__h{font-size:clamp(40px,13.2vw,84px);line-height:.9}
  .hero__rail--bottom{flex-direction:column}
  .rail__specs{border-bottom:1px solid var(--line)}
  .rail__specs span{flex:1;justify-content:center;flex-direction:column;align-items:flex-start;gap:4px;padding:14px var(--gutter);font-size:11px}
  .rail__specs span:first-child{padding-left:var(--gutter)}
  .rail__specs span:last-child{border-right:0}
  .rail__specs b{margin-left:0;font-size:13px}
  .rail__cta{flex-direction:column}
  .pbtn{justify-content:space-between;border-left:0;border-top:1px solid var(--line);padding:19px var(--gutter)}
  .pbtn--acc{border-top:0}
}
@media (max-width:400px){
  /* small phones (360 px): three spec cells no longer fit — booking is already the two buttons below */
  .rail__specs span:nth-child(3){display:none}
  .rail__specs span:nth-child(2){border-right:0}
  .hero__kicker{letter-spacing:.12em}
  .hero__kicker span{padding:0 7px}
}
@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
}
/* desktop only: hide what the entrance animation reveals, so there is no flash of the final
   state before the scripts run. Phones paint the headline at once (it is the largest element
   on screen, and a delayed headline is a slower page). */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  .js-hero .hero__h .w > span,.js-hero .hero__kicker span,.js-hero .hero__note,
  .js-hero .hero__rail--top > span,.js-hero .rail__specs span,.js-hero .pbtn{visibility:hidden}
}

[id]{scroll-margin-top:90px}

/* ================= BAND (marquee) ================= */
.band{
  position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg);padding:22px 0;
}
.band__track{display:flex;align-items:center;width:max-content;animation:run 46s linear infinite}
.band:hover .band__track{animation-play-state:paused}
.band span{
  padding:0 30px;white-space:nowrap;text-transform:uppercase;
  font-weight:800;font-variation-settings:"wdth" 125;
  font-size:clamp(26px,3.3vw,50px);line-height:1;letter-spacing:-.01em;color:var(--fg);
}
.band span.o{color:transparent;-webkit-text-stroke:1px rgba(243,242,239,.55)}
.band i{font-style:normal;color:var(--red);font-size:clamp(14px,1.4vw,20px)}
@keyframes run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__track{animation:none}}

/* ================= SECTION HEADER ================= */
.sec{
  max-width:var(--col);margin:0 auto;padding:130px var(--gutter) 56px;
  /* 1.5fr: przy 1.35fr "bring it back." nie miescilo sie w jednej linii na zadnej
     szerokosci (zmierzone: potrzebuje 740 px, kolumna dawala 689 px) */
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px 64px;align-items:end;
}
.sec__id{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.sec__id b{color:var(--red-text);font-weight:500}
.sec__h{
  font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 118;
  /* 72 px to najwiekszy kegl, przy ktorym kazda z szesciu drugich linii miesci sie
     w kolumnie naglowka (najciasniejsza: "bring it back." = 9.49 px na 1 px kegla) */
  font-size:clamp(38px,5.4vw,72px);line-height:.9;letter-spacing:-.02em;
}
.sec__h em{font-style:italic;color:var(--red)}
.sec__note{max-width:44ch;justify-self:end;color:var(--fg-2);font-size:16px;line-height:1.6}
.sec__note a{color:var(--fg);border-bottom:1px solid var(--red);transition:color .3s}
.sec__note a:hover{color:var(--red-text)}

/* ================= SERVICES ================= */
.services{position:relative}
.svc{
  list-style:none;max-width:var(--col);margin:0 auto;padding:0 var(--gutter) 40px;
  counter-reset:svc;
}
/* kazda usluga ma stale zdjecie, nie tylko pod kursorem: sekcja ma wygladac
   skonczenie takze na nieruchomym zrzucie ekranu */
.svc__row{
  position:relative;display:grid;align-items:center;
  grid-template-columns:156px minmax(0,1.55fr) minmax(0,1fr) auto;
  grid-template-rows:auto auto;gap:10px 36px;
  padding:26px 0;border-top:1px solid var(--line);
  transition:background .45s var(--ease);
}
.svc__img{
  display:block;grid-column:1;grid-row:1 / 3;position:relative;
  aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);
}
.svc__img img{
  width:100%;height:100%;object-fit:cover;
  /* w spoczynku wszystkie sześć miniatur trzyma jeden ton (roznokolorowy stok
     rozbijal kolumne), a po najechaniu kadr wraca do pelnego koloru */
  filter:brightness(.8) saturate(.55) contrast(1.06);
  transition:filter .5s,transform .9s var(--ease);
}
.svc__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.svc__code{grid-column:2;grid-row:1;align-self:end}
.svc__name{grid-column:2;grid-row:2}
.svc__desc{grid-column:3;grid-row:1 / 3;align-self:center}
.svc__add{grid-column:4;grid-row:1 / 3;align-self:center}
.svc__row:last-child{border-bottom:1px solid var(--line)}
.svc__row::before{
  content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,rgba(227,22,29,.10),rgba(227,22,29,0) 60%);
  opacity:0;transition:opacity .45s var(--ease);
}
.svc__code{font-size:12px;letter-spacing:.12em;color:var(--dim);transition:color .35s}
.svc__name{
  font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 115;
  font-size:clamp(26px,3.1vw,48px);line-height:.95;letter-spacing:-.015em;
  /* nazwa biegnie po zdjeciu spod kursora — cien trzyma ja czytelna nad jasnym kadrem */
  text-shadow:0 2px 18px rgba(0,0,0,.5);
  transition:transform .6s var(--ease),color .35s;
}
.svc__desc{color:var(--dim);font-size:15px;line-height:1.6;max-width:46ch;transition:color .35s}
.svc__add{
  display:flex;align-items:center;gap:12px;height:46px;padding:0 6px 0 18px;
  border:1px solid var(--line-2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  transition:background .35s,border-color .35s,color .35s;
}
.svc__add i{
  font-style:normal;display:grid;place-items:center;width:34px;height:34px;font-size:18px;
  background:rgba(255,255,255,.06);color:var(--fg);transition:transform .5s var(--ease),background .35s;
}
.svc__add:hover{background:var(--red);border-color:var(--red);color:#fff}
.svc__add:hover i{background:rgba(0,0,0,.18);transform:rotate(90deg)}
.svc__add.is-picked{border-color:var(--red);color:var(--fg)}
.svc__add.is-picked i{background:var(--red);transform:rotate(45deg)}

@media (hover:hover) and (pointer:fine){
  .svc__row:hover::before{opacity:1}
  .svc__row:hover .svc__code{color:var(--red-text)}
  .svc__row:hover .svc__name{transform:translateX(10px);color:var(--fg)}
  .svc__row:hover .svc__desc{color:var(--fg-2)}
  .svc__row:hover .svc__img img{filter:brightness(1.06) saturate(1.02) contrast(1.03);transform:scale(1.06)}
  .svc:hover .svc__row:not(:hover) .svc__name{color:rgba(243,242,239,.42)}
}

/* duze zdjecie lecace za kursorem — siedzi POD lista, wiec nazwa biegnie po nim
   i nigdy nie jest zaslonieta */
.services .svc{position:relative;z-index:2}
.svc__float{
  position:fixed;left:0;top:0;z-index:1;pointer-events:none;
  width:min(28vw,380px);aspect-ratio:1;overflow:hidden;
  clip-path:inset(50% 50% 50% 50%);transition:clip-path .55s var(--ease);
}
.svc__float.on{clip-path:inset(0 0 0 0)}
.svc__float img{
  width:100%;height:100%;object-fit:cover;object-position:50% 35%;
  transform:scale(1.15);transition:transform .9s var(--ease);
  filter:brightness(.95) contrast(1.05) saturate(1.05);
}
.svc__float.on img{transform:scale(1)}
.svc__float::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media (max-width:820px){.svc__float{display:none}}

@media (max-width:980px){
  .sec{grid-template-columns:1fr;padding-top:110px}
  .sec__note{justify-self:start}
  /* ponizej 980 px nie ma miejsca na miniature obok tekstu */
  .svc__row{grid-template-columns:70px minmax(0,1fr) auto;gap:14px 24px;padding:30px 0}
  .svc__img{display:none}
  .svc__code{grid-column:1;grid-row:1;align-self:start}
  .svc__name{grid-column:2;grid-row:1}
  .svc__desc{grid-column:2;grid-row:2;align-self:start}
  .svc__add{grid-row:1 / 3;grid-column:3;align-self:center}
}
@media (max-width:820px){
  .sec{padding:84px var(--gutter) 34px;gap:18px}
  /* 9.2vw: przy 10.4vw "bring it back." i "How a detail" lamaly sie na telefonie */
  .sec__h{font-size:clamp(32px,9.2vw,52px)}
  .sec__note{font-size:15px}
  /* on a phone the list becomes a row of cards you swipe through */
  .svc{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    padding:0 var(--gutter) 26px;scroll-padding-left:var(--gutter);scrollbar-width:none;
  }
  .svc::-webkit-scrollbar{display:none}
  .svc__row{
    flex:0 0 82%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:0;border:1px solid var(--line);background:var(--bg-2);
  }
  .svc__row:last-child{border-bottom:1px solid var(--line)}
  .svc__img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;order:-1}
  /* na karcie zdjecie jest glownym elementem, wiec bez przyciemnienia z wersji desktopowej */
  .svc__img img{width:100%;height:100%;object-fit:cover;filter:none;transform:none}
  .svc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,15,0) 55%,rgba(13,13,15,.85))}
  .svc__code{padding:18px 18px 0;font-size:11px;color:var(--red-text)}
  .svc__name{padding:8px 18px 0;font-size:25px}
  .svc__desc{padding:12px 18px 0;font-size:14.5px;color:var(--fg-2);flex:1}
  .svc__add{margin:20px 18px 18px;justify-content:space-between}
  .svc__float{display:none}
}
/* ================= WORK ================= */
.work__grid{
  max-width:var(--col);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);grid-template-rows:auto auto;gap:22px;
}
.shot{margin:0;display:flex;flex-direction:column;min-width:0}
.shot--a{grid-row:1 / 3}
.shot__frame{
  position:relative;display:block;width:100%;flex:1;min-height:0;overflow:hidden;cursor:zoom-in;
  border:0;padding:0;background:var(--bg-2);
}
.shot--b .shot__frame,.shot--c .shot__frame{aspect-ratio:16/10}
.shot--a .shot__frame img{object-position:58% 30%}
.shot__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* trzy zdjecia z telefonu, robione w roznym swietle — wspolna korekta trzyma je jako jeden zestaw */
  filter:contrast(1.1) saturate(.8) brightness(.98);transition:transform 1.1s var(--ease),filter .6s;
}
.shot__frame:hover img{filter:contrast(1.06) saturate(.95) brightness(1)}
.shot--c .shot__frame img{object-position:50% 62%}
.shot__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(7,7,8,0) 60%,rgba(7,7,8,.45));
}
.shot__zoom{
  position:absolute;right:14px;top:14px;z-index:2;padding:8px 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(7,7,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--fg);
  opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .5s var(--ease);
}
.shot__frame:hover img{transform:scale(1.04)}
.shot__frame:hover .shot__zoom,.shot__frame:focus-visible .shot__zoom{opacity:1;transform:none}
.shot__cap{
  display:flex;align-items:baseline;gap:14px;padding:14px 2px 0;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border-top:1px solid var(--line);margin-top:12px;
}
.shot__cap b{color:var(--red-text);font-weight:500}
.shot__cap span{color:var(--fg)}
.shot__cap em{font-style:normal;margin-left:auto}
@media (hover:none){.shot__zoom{opacity:1;transform:none}}

.lightbox{
  position:fixed;inset:0;z-index:9995;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);
  align-items:center;gap:0 18px;padding:0 20px 24px;
  background:rgba(7,7,8,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  /* podglad zdjecia wchodzi i wychodzi lagodnie, a nie przeskokiem */
  opacity:0;transition:opacity .32s var(--ease);
}
.lightbox.is-on{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__bar{
  grid-column:1 / -1;display:flex;align-items:center;gap:18px;height:68px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.lightbox__bar #lbCount{color:var(--red-text)}
.lightbox__cap{color:var(--fg)}
.lightbox img{
  grid-column:2;justify-self:center;max-width:min(1400px,100%);max-height:calc(100dvh - 100px);object-fit:contain;
  box-shadow:0 40px 120px -30px #000;animation:lbIn .45s var(--ease)
}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lightbox__close{
  margin-left:auto;height:40px;padding:0 16px;cursor:pointer;
  border:1px solid var(--line-2);background:none;color:var(--fg);font:inherit;letter-spacing:.14em;text-transform:uppercase;
}
.lightbox__close:hover{border-color:var(--red);color:var(--red-text)}
.lightbox__nav{
  width:52px;height:52px;border:1px solid var(--line-2);background:rgba(7,7,8,.6);color:var(--fg);cursor:pointer;
  font-size:18px;transition:border-color .3s,background .3s;
}
.lightbox__nav:hover{border-color:var(--red);background:var(--red)}
@media (max-width:820px){
  .lightbox{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:0 14px calc(18px + env(safe-area-inset-bottom));gap:12px}
  .lightbox__bar{height:60px}
  .lightbox__cap{display:none}
  .lightbox img{grid-column:1 / -1;grid-row:2;max-height:calc(100dvh - 160px)}
  .lightbox__nav{grid-row:3;width:100%}
  .lightbox__nav--prev{grid-column:1}
  .lightbox__nav--next{grid-column:2}
}

@media (max-width:820px){
  /* one large photo, two small ones side by side: three full-width photos
     in a row made the phone scroll for a whole screen and a half */
  .work__grid{grid-template-columns:1fr 1fr;gap:22px 12px}
  .shot--a{grid-row:auto;grid-column:1 / -1}
  .shot--a .shot__frame{aspect-ratio:4/3;flex:none}
  .shot--b .shot__frame,.shot--c .shot__frame{aspect-ratio:1/1;flex:none}
  .shot__cap{font-size:11px;gap:8px;padding-top:10px;margin-top:10px;letter-spacing:.05em}
  .shot--b .shot__cap em,.shot--c .shot__cap em{display:none}
  .shot__zoom{right:8px;top:8px;padding:5px 8px;font-size:9px}
  .shot--b .shot__zoom,.shot--c .shot__zoom{display:none}
}

/* trzy zdjecia to malo jak na detailing — reszta prac jest na ich Instagramie */
.work__foot{max-width:var(--col);margin:16px auto 0;padding:0 var(--gutter)}
.work__more{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  transition:color .3s;
}
.work__more span{border-bottom:1px solid var(--line-2);padding-bottom:6px;transition:border-color .3s}
.work__more i{font-style:normal;font-size:14px;color:var(--red-text);transition:transform .4s var(--ease)}
.work__more:hover{color:var(--fg)}
.work__more:hover span{border-color:var(--red)}
.work__more:hover i{transform:translate(3px,-3px)}

/* ================= PROCESS ================= */
.process__grid{
  max-width:var(--col);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start;
}
.process__media{position:sticky;top:110px}
.process__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.process__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:contrast(1.05) saturate(.95)}
.process__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(7,7,8,0) 55%,rgba(7,7,8,.7))}
.process__tag{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.process__tag b{color:var(--fg);font-weight:500}

.steps{list-style:none;position:relative;padding-left:34px}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:10px;width:1px}
.steps::before{bottom:10px;background:var(--line)}
.steps::after{height:var(--fill,0%);background:var(--red);transition:height .5s var(--ease)}
.step{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 18px;
  padding:44px 0;border-bottom:1px solid var(--line);
}
.step:first-child{padding-top:6px}
.step__n{font-size:13px;letter-spacing:.1em;color:var(--dim);padding-top:14px;transition:color .4s}
.step__t{
  font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 115;
  font-size:clamp(30px,3.4vw,52px);line-height:.95;letter-spacing:-.015em;color:rgba(243,242,239,.34);
  transition:color .5s var(--ease);
}
.step__d{margin-top:16px;max-width:42ch;font-size:16px;line-height:1.6;color:var(--dim);transition:color .5s}
.step__d a{color:var(--fg);border-bottom:1px solid var(--red);white-space:nowrap}
.step.is-on .step__n{color:var(--red-text)}
.step.is-on .step__t{color:var(--fg)}
.step.is-on .step__d{color:var(--fg-2)}
/* without motion (or before the script runs) every step reads at full strength */
@media (prefers-reduced-motion:reduce){
  .steps::after{height:100%}
  .step .step__n{color:var(--red-text)}
  .step .step__t{color:var(--fg)}
  .step .step__d{color:var(--fg-2)}
}
html:not(.js) .step .step__t{color:var(--fg)}

@media (max-width:980px){
  .process__grid{grid-template-columns:1fr;gap:34px}
  .process__media{position:relative;top:auto}
  /* a 2:1 band out of a portrait photo: framed on the hands and the polisher */
  .process__img{aspect-ratio:2/1}
  .process__img img{object-position:52% 34%}
}
@media (max-width:820px){
  .steps{padding-left:22px}
  .step{grid-template-columns:40px minmax(0,1fr);gap:0 10px;padding:26px 0}
  .step__n{padding-top:6px;font-size:11.5px}
  .step__t{font-size:26px;color:var(--fg)}
  .step__d{margin-top:10px;font-size:15px;color:var(--fg-2)}
  .step .step__n{color:var(--red-text)}
  .steps::after{height:100%;background:linear-gradient(180deg,var(--red),rgba(227,22,29,.15))}
  .process__tag{display:none}
}

/* ================= BUILD YOUR DETAIL ================= */
.builder{
  max-width:calc(var(--col) - 2 * var(--gutter));margin:0 auto;width:calc(100% - 2 * var(--gutter));
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  border:1px solid var(--line);background:var(--line);gap:1px;
}
.builder__controls{background:var(--bg);padding:44px 40px;display:flex;flex-direction:column;gap:38px}
.field{border:0;min-width:0}
.field__l{
  display:flex;align-items:center;gap:10px;width:100%;margin-bottom:16px;padding:0;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.field__l b{
  display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-2);
  font-weight:500;font-size:10px;letter-spacing:0;color:var(--fg);
}
.field__l span{margin-left:auto;letter-spacing:.08em;text-transform:none;font-size:11px;color:var(--dim);transition:color .3s}
.field__l span.is-warn{color:var(--red-text)}

.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2)}
.seg--3{grid-template-columns:repeat(3,1fr)}
.seg button{
  position:relative;height:52px;padding:0 8px;background:transparent;border:0;border-left:1px solid var(--line);cursor:pointer;
  font-size:14px;font-weight:600;color:var(--fg-2);transition:background .3s,color .3s;
}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--fg);background:rgba(255,255,255,.03)}
.seg button.on{background:var(--red);color:#fff}

.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checks label{
  position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line-2);font-size:14.5px;font-weight:500;color:var(--fg-2);
  transition:border-color .3s,color .3s,background .3s;
}
.checks label:hover{border-color:rgba(243,242,239,.4);color:var(--fg)}
.checks input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;margin:0;cursor:pointer;
  border:1px solid var(--dim);position:relative;transition:background .25s,border-color .25s;
}
.checks input:checked{background:var(--red);border-color:var(--red)}
.checks input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.checks__c{font-size:10px;letter-spacing:.1em;color:var(--dim)}
.checks label:has(input:checked){border-color:rgba(227,22,29,.75);color:var(--fg);background:rgba(227,22,29,.07)}
.checks label:has(input:checked) .checks__c{color:var(--red-text)}
.checks label:has(input:focus-visible){outline:2px solid var(--red-text);outline-offset:2px}

.field__in{
  width:100%;height:52px;padding:0 16px;border:1px solid var(--line-2);background:transparent;
  /* 16 px, nie 15: Safari na iPhonie powieksza strone przy wejsciu w pole mniejsze niz 16 px */
  font:inherit;font-size:16px;color:var(--fg);transition:border-color .3s;
}
.field__in::placeholder{color:#5D5E63}
.field__in:focus{outline:0;border-color:var(--red)}

.builder__out{background:var(--bg-2);padding:44px 40px;display:flex;flex-direction:column;gap:26px}
.ticket{position:relative;flex:1;display:flex;flex-direction:column}
.ticket__top{
  display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line-2);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.ticket__top span:last-child{color:var(--fg)}
.ticket__rows{display:grid}
.ticket__rows div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px}
.ticket__rows dt{color:var(--dim);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.ticket__rows dd{color:var(--fg)}
.ticket__list{list-style:none;padding:14px 0 18px;border-bottom:1px dashed var(--line-2);min-height:92px}
.ticket__list li{
  display:flex;align-items:baseline;gap:12px;padding:5px 0;
  font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 112;font-size:21px;line-height:1.1;letter-spacing:-.005em;
}
.ticket__list li i{font-style:normal;font-family:"JetBrains Mono",monospace;font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--red-text);font-variation-settings:normal}
.ticket__list li.is-empty{font-weight:400;text-transform:none;font-size:14.5px;color:var(--dim);font-variation-settings:"wdth" 100}
.ticket__label{margin-top:20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.ticket__msg{
  margin-top:10px;padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-left:2px solid var(--red);
  font-size:14.5px;line-height:1.6;color:var(--fg-2);white-space:pre-line;
}

.builder__cta{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;align-items:stretch}
.bbtn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px;padding:0 20px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--fg);
  font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s,border-color .3s,color .3s,opacity .3s;
}
.bbtn i{font-style:normal;display:flex;align-items:center;transition:transform .4s var(--ease)}
.bbtn i svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
/* kwadraciki kodu QR rysowane pelnym wypelnieniem, reszta ikon konturem */
#bQr i svg path{fill:currentColor;stroke:none}
.bbtn:hover{border-color:var(--fg)}
.bbtn:hover i{transform:translateX(4px)}
.bbtn--acc{background:var(--red);border-color:var(--red);color:#fff}
.bbtn--acc:hover{background:var(--red-hi);border-color:var(--red-hi)}
.bbtn.is-off{opacity:.38;pointer-events:none}
.bbtn.is-done{border-color:var(--red);color:var(--red-text)}
.builder__call{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:center;min-height:44px;
  font-size:12px;letter-spacing:.08em;color:var(--dim);transition:color .3s;
}
.builder__call:hover{color:var(--fg)}
/* desktop (mouse) gets "Send to my phone" with a QR code; phones keep the direct SMS link */
#bQr{display:none}
.is-fine #bQr{display:flex}
.is-fine #bText{display:none}

.qr{
  position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;
  padding:6px 0;background:var(--bg-2);animation:qrIn .5s var(--ease);
}
.qr[hidden]{display:none}
@keyframes qrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nowrap{white-space:nowrap}
.qr__code{
  /* 204 px zamiast 228: tekst obok dostaje 24 px wiecej i naglowek miesci sie w trzech liniach */
  width:204px;aspect-ratio:1;padding:6px;background:#fff;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 70px -30px rgba(227,22,29,.45);
}
.qr__code svg{display:block;width:100%;height:100%}
.qr__code::before,.qr__code::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--red)}
.qr__code::before{left:-9px;top:-9px;border-right:0;border-bottom:0}
.qr__code::after{right:-9px;bottom:-9px;border-left:0;border-top:0}
.qr__k{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text)}
.qr__h{
  margin-top:14px;font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 108;
  font-size:19px;line-height:1.08;letter-spacing:-.005em;
}
.qr__s{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--fg-2)}
.qr__back{
  margin-top:20px;background:none;border:0;padding:0;cursor:pointer;color:var(--fg-2);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line-2);padding-bottom:4px;
}
.qr__back:hover{color:var(--fg);border-color:var(--red)}
@media (max-width:1180px){
  .qr{grid-template-columns:1fr;justify-items:start;align-content:center;gap:22px}
  .qr__code{width:190px}
}

.checks__c{white-space:nowrap}
@media (max-width:1180px){
  /* at 1024 px the two buttons were ~190 px wide and both labels broke in two */
  .builder__cta{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .builder__controls,.builder__out{padding:36px 30px}
}
@media (max-width:980px){
  .builder{grid-template-columns:1fr}
}
@media (max-width:820px){
  .builder{width:100%;max-width:none;border-left:0;border-right:0}
  .builder__controls,.builder__out{padding:30px var(--gutter)}
  .builder__controls{gap:30px}
  .seg button{height:50px;font-size:13.5px}
  .checks{grid-template-columns:1fr;gap:8px}
  .checks label{min-height:54px}
  .ticket__list li{font-size:18px}
  .builder__cta{grid-template-columns:1fr}
}

/* ================= REVIEWS ================= */
.reviews__grid{
  max-width:var(--col);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:64px;align-items:start;
}
.score{position:sticky;top:120px;border-top:1px solid var(--line-2);padding-top:26px}
.score__n{
  font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(96px,13vw,210px);line-height:.8;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 10%,#9EA2A8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* --red-text zamiast --red: gwiazdki maja 20 px na telefonie, a #E3161D dawalo 4.22:1 */
.score__stars{margin-top:18px;font-size:26px;letter-spacing:.14em;color:var(--red-text)}
.score__meta{margin-top:12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.score__meta span{color:var(--red-text);margin:0 6px}
.score__link{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;height:46px;padding:0 18px;
  border:1px solid var(--line-2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
  transition:border-color .3s,background .3s;
}
.score__link:hover{border-color:var(--red);background:rgba(227,22,29,.08)}
.score__link i{font-style:normal;color:var(--red-text)}

.quotes{display:flex;flex-direction:column}
.quote{margin:0;padding:38px 0 40px;border-top:1px solid var(--line)}
.quote:last-child{border-bottom:1px solid var(--line)}
.quote blockquote{
  position:relative;padding-left:58px;
  font-size:clamp(21px,2.05vw,30px);line-height:1.34;font-weight:500;letter-spacing:-.012em;color:var(--fg);
}
.quote blockquote::before{
  content:"“";position:absolute;left:0;top:-.08em;
  font-weight:900;font-variation-settings:"wdth" 125;font-size:2.6em;line-height:1;color:var(--red);
}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:20px;padding-left:58px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.quote figcaption b{color:var(--fg);font-weight:500}
.quote figcaption span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--line-2);vertical-align:middle;margin-right:14px}

@media (max-width:980px){
  .reviews__grid{grid-template-columns:1fr;gap:26px}
  .score{position:relative;top:auto;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:6px 22px}
  .score__n{grid-row:1 / 4;font-size:clamp(92px,26vw,150px)}
  .score__stars{margin:0;font-size:20px}
  .score__meta{margin:0}
  .score__link{margin:4px 0 0;justify-self:start}
}
@media (max-width:820px){
  .quote{padding:28px 0 30px}
  .quote blockquote{padding-left:40px;font-size:19px;line-height:1.42}
  .quote figcaption{padding-left:40px;margin-top:14px;font-size:10.5px}
  .score{grid-template-columns:1fr;gap:0}
  .score__n{grid-row:auto}
  .score__stars{margin-top:14px}
  .score__meta{margin-top:10px}
  .score__link{margin-top:20px}
}

/* ================= FAQ ================= */
.faq__list{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:84px minmax(0,1fr) 44px;align-items:center;gap:0 36px;
  padding:30px 0;transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa__n{font-size:12px;letter-spacing:.12em;color:var(--dim);transition:color .3s}
.qa__q{
  font-weight:700;font-variation-settings:"wdth" 108;font-size:clamp(20px,2.1vw,30px);line-height:1.18;letter-spacing:-.012em;
  color:var(--fg-2);transition:color .3s;
}
.qa summary i{position:relative;width:44px;height:44px;border:1px solid var(--line-2);transition:background .35s,border-color .35s,transform .5s var(--ease)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.qa summary:hover .qa__q,.qa[open] .qa__q{color:var(--fg)}
.qa summary:hover .qa__n,.qa[open] .qa__n{color:var(--red-text)}
.qa summary:hover i{border-color:var(--fg)}
.qa[open] summary i{background:var(--red);border-color:var(--red)}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa__a{padding:0 80px 34px 120px}
/* 58ch daje ~72 znaki w linii; przy 68ch wychodzilo 84, a czytelny zakres to 45-75 */
.qa__a p{max-width:58ch;font-size:16.5px;line-height:1.7;color:var(--fg-2)}
.qa__a a{color:var(--fg);border-bottom:1px solid var(--red)}
/* wysokosc odpowiedzi animuje skrypt (Web Animations), zeby wiersz sie rozwijal,
   a nie przeskakiwal; bez skryptu odpowiedz po prostu jest widoczna */
@media (max-width:820px){
  .qa summary{grid-template-columns:minmax(0,1fr) 38px;gap:8px 18px;padding:22px 0}
  .qa__n{grid-column:1 / -1;font-size:10.5px}
  .qa__q{grid-column:1;font-size:19px}
  .qa summary i{width:38px;height:38px;grid-column:2;grid-row:2}
  .qa__a{padding:0 0 24px}
  .qa__a p{font-size:15.5px}
}

/* ================= DOCK (phones: call / text / quote) ================= */
.dock{display:none}
@media (max-width:820px){
  .dock{
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;
    display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:6px;padding:6px;
    background:rgba(13,13,15,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
    border:1px solid var(--line-2);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
    transform:translateY(calc(100% + 30px));transition:transform .55s var(--ease);
  }
  .dock.on{transform:none}
  .dock__b{
    display:flex;align-items:center;justify-content:center;gap:8px;height:50px;
    font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
    background:rgba(255,255,255,.04);
  }
  .dock__b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .dock__b--acc{background:var(--red);color:#fff}
  body.nav-open .dock{transform:translateY(calc(100% + 30px))}
}

/* ================= FINALE (contact) ================= */
.finale{position:relative;isolation:isolate;overflow:hidden;margin-top:150px;min-height:92svh;display:flex;align-items:flex-end}
.finale__bg{position:absolute;inset:0;z-index:-2}
.finale__bg img{width:100%;height:115%;object-fit:cover;object-position:50% 45%;filter:grayscale(.35) contrast(1.05)}
.finale::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,7,8,1) 0%,rgba(7,7,8,.55) 22%,rgba(7,7,8,.45) 50%,rgba(7,7,8,.95) 100%),
    radial-gradient(ellipse 70% 60% at 20% 90%,rgba(227,22,29,.22),transparent 70%);
}
.finale__in{width:100%;max-width:var(--col);margin:0 auto;padding:120px var(--gutter) 70px}
.finale__kicker{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.finale__h{
  margin-top:22px;display:flex;flex-direction:column;
  font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 125;
  /* nic na stronie nie jest wieksze od naglowka hero (128 px) */
  font-size:clamp(46px,8.6vw,128px);line-height:.86;letter-spacing:-.02em;
}
.finale__h em{font-style:italic;color:var(--red)}
.finale__actions{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.act{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 16px;padding:26px 28px;min-height:132px;
  background:rgba(7,7,8,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s;
}
.act__k{grid-column:1;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);align-self:start}
.act__v{grid-column:1;font-weight:700;font-variation-settings:"wdth" 112;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;line-height:1.1}
.act i{grid-column:2;grid-row:1 / 3;align-self:end;font-style:normal;font-size:22px;color:var(--red-text);transition:transform .45s var(--ease)}
.act:hover{background:rgba(20,20,23,.9)}
.act:hover i{transform:translateX(6px)}
.act--acc{background:var(--red)}
/* pelna biel: przy .75 alfa etykieta na czerwonym miala 3.13:1, wymagane 4.5:1 */
.act--acc .act__k{color:#fff}
.act--acc i{color:#fff}
.act--acc:hover{background:var(--red-hi)}

@media (max-width:820px){
  .finale{margin-top:100px;min-height:0}
  .finale__in{padding:180px var(--gutter) 40px}
  /* 10vw: przy 12.6vw "READY WHEN" i "YOUR CAR IS." lamaly sie na cztery linie */
  .finale__h{font-size:clamp(34px,10vw,64px)}
  .finale__actions{margin-top:34px;grid-template-columns:1fr}
  .act{min-height:0;padding:20px 20px}
}

/* ================= FOOTER ================= */
.foot{border-top:1px solid var(--line);background:var(--bg)}
.foot__top{
  max-width:var(--col);margin:0 auto;padding:64px var(--gutter) 54px;
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start;
}
.brand--foot img{width:64px;height:64px}
.brand--foot .brand__word{font-size:16px}
.foot__tag{
  justify-self:center;text-align:center;font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 125;
  font-size:clamp(22px,2.4vw,34px);line-height:.95;letter-spacing:-.01em;color:var(--fg-2);
}
.foot__tag em{color:var(--red);font-style:italic}
.foot__nav{display:grid;gap:2px;justify-items:end;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/* linki stopki mialy 19 px wysokosci: za malo na palec i ponizej progu WCAG 2.5.8 */
.foot__nav a{display:flex;align-items:center;min-height:30px;color:var(--fg-2);transition:color .3s}
.foot__nav a:hover{color:var(--red-text)}
.foot__bottom{
  max-width:var(--col);margin:0 auto;padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.foot__bottom a{display:inline-flex;align-items:center;min-height:28px;color:var(--fg-2);transition:color .3s}
.foot__bottom a:hover{color:var(--fg)}
.foot__up{margin-left:auto}
@media (max-width:820px){
  .foot__top{grid-template-columns:1fr;gap:28px;padding:48px var(--gutter) 36px}
  .foot__tag{justify-self:start;text-align:left}
  .foot__nav{justify-items:start;grid-template-columns:1fr 1fr;gap:2px 20px}
  .foot__nav a{min-height:44px}
  .foot__bottom{gap:4px 22px}
  .foot__bottom a,.foot__bottom span{display:inline-flex;align-items:center;min-height:40px}
  .foot__up{margin-left:0}
}

.swipe-hint{display:none}
@media (max-width:820px){
  .swipe-hint{display:flex;align-items:center;gap:10px;padding:0 var(--gutter);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .swipe-hint b{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
  .swipe-hint b::after{content:"";position:absolute;inset:0;width:var(--p,16%);background:var(--red);transition:width .2s}
}