/* Warstwa wykończeniowa: menu, błysk zdjęć, porównanie przed/po,
   zakończenie stron, przycisk gradientowy i formularz kontaktowy. */

/* ---------------------------------------------------------- menu główne */
/* Podkreślenie rośnie od środka w obie strony, z miękką poświatą. */
@media (min-width: 1101px) {
  .main-nav > a:not(.btn), .main-nav .coating-dropdown > summary { position:relative; transition:color .3s ease, text-shadow .3s ease; }
  .main-nav > a:not(.btn)::after, .main-nav .coating-dropdown > summary::after {
    content:""; position:absolute; left:-6px; right:-6px; bottom:-8px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--brass-2) 22%, #fff3d6 50%, var(--brass-2) 78%, transparent);
    box-shadow:0 0 12px #e3bd8088; transform:scaleX(0); transform-origin:center; opacity:0;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  }
  .main-nav .coating-dropdown > summary::after { bottom:12px; }
  .main-nav > a:not(.btn):hover, .main-nav > a:not(.btn):focus-visible,
  .main-nav .coating-dropdown > summary:hover, .main-nav .coating-dropdown[open] > summary { color:var(--text); text-shadow:0 0 18px #e3bd8055; }
  .main-nav > a:not(.btn):hover::after, .main-nav > a:not(.btn):focus-visible::after,
  .main-nav .coating-dropdown > summary:hover::after, .main-nav .coating-dropdown[open] > summary::after,
  .main-nav > a[aria-current=page]::after { transform:scaleX(1); opacity:1; }
  .main-nav > a[aria-current=page]::after { box-shadow:none; opacity:.75; }
}

/* ------------------------------------------------------- błysk na zdjęciu */
/* ::before, bo ::after zajmuje światło przechyłu 3D. */
.photo-frame::before, .home-work-photo::before, .gal-media::before {
  content:""; position:absolute; inset:-2px; z-index:2; pointer-events:none;
  background:linear-gradient(112deg, transparent 32%, #ffffff10 42%, #ffffff38 50%, #ffffff10 58%, transparent 68%);
  transform:translateX(-120%); opacity:0; transition:opacity .6s ease, transform 0s .6s;
}
/* Po zjechaniu błysk łagodnie gaśnie tam, gdzie był, i dopiero potem wraca na start. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .finish-photo:hover .photo-frame::before, .photo-frame:hover::before, .home-work-photo:hover::before, .gal-card:hover .gal-media::before {
    transform:translateX(120%); opacity:1; transition:transform 1.1s cubic-bezier(.3,.6,.3,1), opacity .2s ease;
  }
}
.finish-gallery .photo-frame[data-tilt]::after { display:block; translate:none; }

/* ------------------------------------------------ strona główna: przed/po */
.compare { min-width:0; border:1px solid #ffffff16; border-radius:18px; overflow:hidden; background:#101113; box-shadow:0 28px 70px #0004; }
.compare-top { display:flex; justify-content:space-between; gap:12px; padding:19px 22px; color:var(--muted); font:.64rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid #ffffff0d; }
.compare-hint { color:var(--brass-2); transition:opacity .4s ease; }
.compare.is-touched .compare-hint { opacity:.45; }
.compare-stage { --pos:50%; position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0d0f; cursor:ew-resize; user-select:none; }
.compare-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.compare-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.compare-before .compare-img { filter:saturate(.9); }
.compare-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:linear-gradient(#fff0, #fff 18%, #fff 82%, #fff0); box-shadow:0 0 16px #0009; pointer-events:none; }
.compare-handle span { position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:1px solid #ffffffc0; background:#0e0f11b8; backdrop-filter:blur(8px); box-shadow:0 8px 24px #0008; }
.compare-handle span::before, .compare-handle span::after { content:""; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border:solid #fff; border-width:0 0 2px 2px; }
.compare-handle span::before { left:12px; transform:rotate(45deg); }
.compare-handle span::after { right:12px; transform:rotate(-135deg); }
.compare-tag { position:absolute; top:16px; padding:7px 12px; border-radius:999px; background:#0d0e10c7; border:1px solid #ffffff2a; backdrop-filter:blur(8px); color:#fff; font:600 .66rem var(--font-label); letter-spacing:.14em; text-transform:uppercase; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.compare-tag--before { left:16px; }
.compare-tag--after { right:16px; color:#fff4da; border-color:#e3bd8066; }
.shows-after .compare-tag--before, .shows-before .compare-tag--after { opacity:0; transform:translateY(-4px); }
.compare-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.compare-range:focus-visible ~ .compare-handle span, .compare-stage:has(.compare-range:focus-visible) .compare-handle span { outline:2px solid var(--brass-2); outline-offset:3px; }
.compare-foot { display:flex; justify-content:space-between; align-items:center; gap:18px 24px; padding:18px 22px 20px; }
.compare-foot p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.6; max-width:46ch; }
.compare-foot b { color:var(--text); font-weight:600; }
.compare-foot .text-link { flex-shrink:0; color:var(--brass-2); }
.home-work-photo[data-tilt] { transform-style:preserve-3d; }
.home-work-photo[data-tilt]::after { border-radius:inherit; }

/* ------------------------------------------------------------ zakończenie */
.finale { position:relative; padding-block:clamp(72px,11vw,140px) clamp(64px,9vw,112px); text-align:center; isolation:isolate; }
.finale::before { content:""; position:absolute; left:50%; top:0; width:min(560px,70%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg, transparent, rgba(var(--page-rgb),.6), transparent); }
.finale::after { content:""; position:absolute; inset:10% 8% 0; z-index:-1; background:radial-gradient(ellipse 50% 55% at 50% 48%, rgba(var(--page-rgb),.13), transparent 70%); pointer-events:none; }
.finale-inner { max-width:720px; margin-inline:auto; }
.finale .eyebrow { justify-content:center; margin-bottom:18px; }
.finale h2 { margin:0 0 20px; font-size:clamp(3rem,8vw,6.2rem); line-height:1; letter-spacing:-.05em; }
.finale h2 em { font-family:var(--font-serif); font-weight:500; background:linear-gradient(100deg, #b58848, #f3d9a8 30%, #fff6e4 45%, #d8a960 62%, #9c7338); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.08em; }
.material-page .finale h2 em { background:none; color:var(--page-accent); }
.finale-lede { max-width:48ch; margin:0 auto 34px; color:var(--muted); font-size:1rem; line-height:1.75; }
.finale-alt { margin:22px 0 0; color:var(--muted); font-size:.84rem; }
.finale-alt a { color:var(--text); font-weight:600; border-bottom:1px solid rgba(var(--page-rgb),.5); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; }
.finale-alt a:hover { color:var(--page-accent); border-color:var(--page-accent); }
.finale-facts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin:44px 0 0; color:var(--muted-2); font:.62rem var(--font-mono); text-transform:uppercase; letter-spacing:.12em; }
.finale-facts span + span::before { content:"·"; margin-right:28px; color:rgba(var(--page-rgb),.7); }
.home-page .home-work { padding-bottom:20px; }
.material-page main > .finale { border-top:0; }

/* ------------------------------------------------------ przycisk gradient */
.btn--gradient {
  position:relative; min-height:50px; padding:0 30px; border:0; border-radius:999px; color:#1a1207; font-weight:700; letter-spacing:-.005em;
  background:linear-gradient(100deg, #9c7338, #e3bd80 25%, #fff0cc 45%, #d9a45a 65%, #b0873f 85%, #e6c68b) 0 50%/220% 100%;
  box-shadow:inset 0 1px 0 #ffffff80, 0 10px 30px rgba(200,148,74,.28), 0 0 0 1px #ffffff14;
  transition:background-position .9s cubic-bezier(.2,.7,.2,1), transform .25s var(--ease), box-shadow .3s ease;
}
.material-page .btn--gradient { background-image:linear-gradient(100deg, rgba(var(--page-rgb),1), var(--page-accent) 30%, #fff 48%, var(--page-accent) 66%, rgba(var(--page-rgb),1) 90%); }
.btn--gradient:hover { background-position:100% 50%; transform:translateY(-2px); box-shadow:inset 0 1px 0 #ffffffa0, 0 16px 38px rgba(200,148,74,.4), 0 0 0 1px #ffffff24; }
.btn--gradient:focus-visible { outline:2px solid var(--brass-2); outline-offset:4px; }
.btn--gradient:disabled { opacity:.7; cursor:progress; transform:none; }

/* ---------------------------------------------------- formularz kontaktu */
.contact-reassurance { color:var(--muted); gap:12px 34px; }
.contact-reassurance b { margin-right:8px; color:var(--brass-2); font:500 .72rem var(--font-mono); }
.content-page .form-card, .form-card {
  position:relative; padding:38px; border:1px solid var(--line-2); border-radius:20px; color:var(--text);
  background:radial-gradient(ellipse 80% 50% at 100% 0%, #e3bd8012, transparent 60%), linear-gradient(165deg, #18171a, #0f0f11 70%);
  box-shadow:0 34px 80px #0007, inset 0 1px 0 #ffffff0d;
}
.form-card::before { content:""; position:absolute; top:-1px; left:38px; right:38px; height:1px; background:linear-gradient(90deg, transparent, var(--brass-2), transparent); }
.form-card .form-head { color:var(--muted); border-bottom-color:var(--line); }
.form-card .form-head span:last-child { color:var(--brass-2); }
.form-card h3 { color:var(--text); font-size:clamp(1.7rem,2.6vw,2.2rem); letter-spacing:-.035em; line-height:1.15; margin-bottom:10px; }
.form-card h3 em { font-family:var(--font-serif); font-weight:500; color:var(--brass-2); }
.form-card > p { color:var(--muted); }
.form-card .quote-help { border-color:var(--line-2); background:#ffffff05; color:var(--text); }
.form-card .quote-help summary { color:var(--text); }
.form-card .quote-help ul, .form-card .quote-help p { color:var(--muted); }
.form-card .quote-help a { color:var(--brass-2); }
.form-card .required-note { color:var(--muted)!important; }
.form-card .required-note span, .field .req { color:var(--brass-2); }
.field .opt { margin-left:6px; color:var(--muted-2); font:400 .58rem var(--font-mono); letter-spacing:.06em; text-transform:lowercase; }
.form-card .field label, .coating-field legend { color:var(--muted); }
.form-card .field:focus-within label { color:var(--brass-2); }
.form-card .field input, .form-card .field textarea {
  padding:14px 15px; border:1px solid #ffffff17; border-radius:11px; background:#09090bb3; color:var(--text);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-card .field input::placeholder, .form-card .field textarea::placeholder { color:#6f6c66; }
.form-card .field input:hover, .form-card .field textarea:hover { border-color:#ffffff2b; }
.form-card .field input:focus, .form-card .field textarea:focus { outline:none; border-color:var(--brass); background:#0b0b0d; box-shadow:0 0 0 4px rgba(200,148,74,.14); }
.form-card .field input:user-invalid, .form-card .field textarea:user-invalid { border-color:#d77a6b; }
.form-card .message-meta { color:var(--muted-2); }
.coating-field { margin:0; padding:0; border:0; min-width:0; }
.coating-field legend { padding:0; margin-bottom:12px; font-family:var(--font-label); font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.coating-chips { display:flex; flex-wrap:wrap; gap:8px; }
.coating-chip { position:relative; }
.coating-chip input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.coating-chip span { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 16px 0 10px; border:1px solid #ffffff17; border-radius:999px; background:#ffffff05; color:var(--muted); font-size:.86rem; font-weight:500; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.coating-chip .menu-metal { width:22px; height:22px; border-radius:50%; }
.chip-q { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px dashed #ffffff40; font:600 .7rem var(--font-label); font-style:normal; }
.coating-chip input:hover + span { border-color:#ffffff33; color:var(--text); }
.coating-chip input:checked + span { border-color:var(--brass-2); background:#e3bd8014; color:var(--text); box-shadow:0 0 0 3px #e3bd801a; }
.coating-chip input:focus-visible + span { outline:2px solid var(--brass-2); outline-offset:3px; }
.form-card .form-consent { color:var(--muted); }
.form-card .form-consent a { color:var(--brass-2); }
.form-card .form-foot .btn--gradient { padding-inline:28px; }
.form-card .form-status.is-success { color:#9ad7a6; background:#3c784622; border-color:#3c784666; }
.form-card .form-status.is-error { color:#f0a497; background:#963c3222; border-color:#963c3266; }

@media (max-width: 720px) {
  .compare-top { padding-inline:16px; font-size:.56rem; }
  .compare-hint { display:none; }
  .compare-foot { flex-direction:column; align-items:flex-start; padding:16px; }
  .compare-handle span { width:40px; height:40px; margin:-20px 0 0 -20px; }
  .finale { text-align:left; }
  .finale .eyebrow { justify-content:flex-start; }
  .finale-lede { margin-left:0; }
  .finale::before { left:20px; transform:none; width:60px; }
  .finale-facts { justify-content:flex-start; flex-direction:column; gap:8px; }
  .finale-facts span + span::before { display:none; }
  .btn--gradient { width:100%; justify-content:center; }
  .content-page .form-card, .form-card { padding:26px 18px; border-radius:16px; }
  .form-card::before { left:18px; right:18px; }
  .coating-chip span { padding-right:13px; font-size:.84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav > a:not(.btn)::after, .main-nav .coating-dropdown > summary::after, .btn--gradient { transition:none; }
}
.form-card .field .coating-chip { margin:0; font-family:var(--font-sans); font-size:inherit; font-weight:500; letter-spacing:0; text-transform:none; color:inherit; }
.multipage .btn--gradient { border-radius:999px; }
.compare { text-align:left; }

/* ------------------------------------------------ przechył 3D za kursorem */
/* Transformację liczy skrypt klatka po klatce, więc CSS nie może jej
   dodatkowo animować, bo ruch robi się ciągnący i „gumowy”. */
[data-tilt] { will-change:auto; transition-property:border-color, box-shadow, filter !important; transition-duration:.45s !important; }
[data-tilt].is-tilting { will-change:transform; }
[data-tilt]::after { opacity:var(--tilt, 0) !important; transition:none !important; border-radius:inherit; }
.finish-gallery .photo-frame[data-tilt]::after, .photo-frame[data-tilt]::after { display:block; translate:none; }
.photo-frame.is-tilting, .home-work-photo.is-tilting, .gal-media.is-tilting { box-shadow:0 22px 44px #0006; }
.photo-frame.is-tilting { border-color:rgba(var(--page-rgb), .5); }
[data-tilt]::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), rgba(255, 244, 218, .16), transparent 70%) !important; }

/* ------------------------------------------------ linie między sekcjami */
/* Wszystkie poziome linie mają szerokość treści (bez marginesu .shell),
   tak jak linia nad przyciskami galerii, więc nie wychodzą krzywo. */
.shell.finish-gallery, .shell.material-details, .shell.metal-lab, .shell.home-work, .shell.nickel-feature {
  border-top:0;
  background-image:linear-gradient(var(--line), var(--line));
  background-repeat:no-repeat; background-size:calc(100% - 56px) 1px; background-position:50% 0;
}
.gallery-actions { padding-block:24px; margin-top:28px; }
.shell.finish-gallery { padding-bottom:24px; }
.material-details + .metal-lab, .finish-gallery + .material-details { margin-top:0; }
@media (max-width: 720px) {
  .shell.finish-gallery, .shell.material-details, .shell.metal-lab, .shell.home-work, .shell.nickel-feature { background-size:calc(100% - 40px) 1px; }
}

/* ------------------------------------------ przełącznik metali i przejście */
.metal-switcher { position:relative; isolation:isolate; }
.metal-switcher a, .metal-switcher a:hover, .metal-switcher a[aria-current] { position:relative; z-index:1; border-color:transparent; background:transparent; transition:color .35s ease; }
.metal-switcher a:hover, .metal-switcher a[aria-current] { color:var(--page-accent); }
.switcher-pill { position:absolute; top:0; left:0; z-index:0; border:1px solid rgba(var(--page-rgb),.32); border-radius:8px; background:rgba(var(--page-rgb),.09); box-shadow:0 6px 18px rgba(var(--page-rgb),.08); opacity:0; pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.9,.25,1), width .5s cubic-bezier(.2,.9,.25,1), opacity .3s ease, border-color .6s ease, background-color .6s ease; }
@media (prefers-reduced-motion: no-preference) {
  main.is-entering .metal-block { animation:metalSwap .95s cubic-bezier(.16,1,.3,1) both; }
  main.is-entering .material-copy > :not(.metal-switcher) { animation:copyRise .6s cubic-bezier(.2,.8,.2,1) both; }
  main.is-entering .material-copy > :nth-child(2) { animation-delay:.05s; }
  main.is-entering .material-copy > :nth-child(3) { animation-delay:.1s; }
  main.is-entering .material-copy > :nth-child(4) { animation-delay:.15s; }
  main.is-entering .material-copy > :nth-child(5) { animation-delay:.2s; }
  main.is-entering .material-copy > :nth-child(n+6) { animation-delay:.25s; }
  main.is-entering > section:not(.material-hero) { animation:copyRise .7s .2s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes metalSwap { from { opacity:0; translate:-12% 0; rotate:-6deg; scale:.92; } to { opacity:1; translate:0 0; rotate:0deg; scale:1; } }
@keyframes copyRise { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@media (prefers-reduced-motion: reduce) { .switcher-pill { transition:none; } }

/* ------------------------------------------------ powiększenie zdjęć */
/* Pełny ekran, zdjęcie w centrum, sterowanie unosi się nad nim. */
.photo-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:clamp(14px,2.4vw,28px); border:0; border-radius:0; background:transparent; color:var(--text); overflow:hidden; }
.photo-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; animation:none !important; }
.photo-dialog::backdrop { background:radial-gradient(ellipse at 50% 45%, #16161aeb, #050506f7 70%); backdrop-filter:blur(12px); animation:none !important; opacity:0; transition:opacity .45s ease; }
.photo-dialog.is-open::backdrop { opacity:1; }
.photo-dialog.is-closing::backdrop { opacity:0; transition-duration:.4s; }
.photo-dialog-bar, .photo-dialog-footer { opacity:0; translate:0 -6px; transition:opacity .35s ease .1s, translate .45s cubic-bezier(.2,.8,.2,1) .1s; }
.photo-dialog-footer { translate:0 6px; }
.photo-dialog.is-open .photo-dialog-bar, .photo-dialog.is-open .photo-dialog-footer { opacity:1; translate:0 0; }
.photo-dialog.is-closing .photo-dialog-bar, .photo-dialog.is-closing .photo-dialog-footer { transition-delay:0s; transition-duration:.2s; }
.photo-dialog-bar { padding:0 0 14px; }
.photo-dialog button { width:44px; height:44px; border-radius:999px; border-color:#ffffff26; background:#ffffff0a; backdrop-filter:blur(10px); }
.photo-dialog .photo-close { border-radius:999px; }
.photo-dialog-count { font-size:.72rem; letter-spacing:.08em; }
.photo-slides { background:transparent; border-radius:0; }
.photo-slide { position:relative; display:grid; place-items:center; overflow:hidden; cursor:default; }
.photo-slide img { grid-area:1/1; width:100%; height:100%; object-fit:contain; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.photo-slide .photo-low { filter:saturate(.95); }
.photo-slide .photo-full { opacity:0; }
.photo-slide.is-loaded .photo-full { opacity:1; }
.photo-slide.is-loaded .photo-low { opacity:0; transition-delay:.3s; }
.photo-slide.is-hidden img { opacity:0 !important; transition:none; }

.photo-slide--rotated .photo-full { opacity:1; }
.photo-ghost { position:fixed; z-index:5; overflow:hidden; margin:0; pointer-events:none; box-shadow:0 30px 80px #000a; }
.photo-ghost img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-dialog-footer { padding:14px 0 0; }
.photo-dialog-caption { font-size:.92rem; }
@media (max-width:720px) {
  .photo-dialog { padding:12px; }
  .photo-dialog button { width:42px; height:42px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-dialog::backdrop, .photo-dialog-bar, .photo-dialog-footer, .photo-slide img { transition:none; }
}

/* ------------------------------------------------ suwak przed/po: tylko przeciąganie */
.compare-stage { cursor:grab; touch-action:pan-y; -webkit-user-select:none; }
.compare-stage.is-dragging { cursor:grabbing; }
.compare-range { pointer-events:none; }
.compare-img { -webkit-user-drag:none; }
.compare-handle span { transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease; }
.compare-stage:hover .compare-handle span { border-color:#fff; }
.compare-stage.is-dragging .compare-handle span { transform:scale(1.12); background:#e3bd80e0; border-color:#fff4da; }
.compare-stage.is-dragging .compare-handle span::before, .compare-stage.is-dragging .compare-handle span::after { border-color:#1a1207; }
@media (prefers-reduced-motion: no-preference) {
  .compare:not(.is-touched) .compare-handle span { animation:handlePulse 2.4s ease-in-out 1.2s infinite; }
}
@keyframes handlePulse { 0%,100% { box-shadow:0 8px 24px #0008, 0 0 0 0 #e3bd8066; } 50% { box-shadow:0 8px 24px #0008, 0 0 0 12px #e3bd8000; } }
.gallery-actions { padding-bottom:0; }
.home-work-photo > span { display:inline-flex; align-items:center; gap:7px; z-index:3; } .home-work-photo > span svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Etykieta nad tabelką dublowała nagłówek „Zastosowanie i wykończenie”. */ .material-details > .material-caption { display:none; }
.portrait img { z-index:0; }
.portrait::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 55%, #0b0b0cd9); pointer-events:none; }
.portrait figcaption, .portrait-badge { z-index:2; }
.portrait figcaption { color:#e9e6df; }
.process-photo img { object-position:50% 40%; }

/* ------------------------------------------------ dokumenty prawne */
.legal-summary { margin:28px 0 8px; padding:20px 24px; border:1px solid var(--line-2); border-radius:14px; background:linear-gradient(160deg, #e3bd800d, #ffffff04); }
.legal-summary p { margin:0 0 8px; }
.legal-summary ul { margin:0; padding-left:18px; }
.legal-summary li { margin:4px 0; }

/* ------------------------------------------------ pytania i odpowiedzi */
.faq-lede { max-width:56ch; margin:-18px 0 44px; color:var(--muted); font-size:1rem; line-height:1.75; }
.faq-lede a { color:var(--brass-2); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.faq-list { display:grid; gap:48px; max-width:940px; }
.faq-group-title { display:flex; align-items:center; gap:14px; margin:0 0 10px; color:var(--brass-2); font:500 .68rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.faq-group-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line-2), transparent); }
.faq-item { position:relative; border-bottom:1px solid var(--line); }
.faq-item::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:2px; background:var(--brass-2); transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.faq-item.is-open::before { transform:scaleY(1); }
.faq-q { margin:0; font:inherit; }
.faq-trigger { display:grid; grid-template-columns:34px minmax(0,1fr) 28px; align-items:center; gap:14px; width:100%; min-height:64px; padding:20px 12px 20px 18px; border:0; border-radius:12px; background:transparent; color:var(--text); font:600 clamp(1rem,1.5vw,1.12rem)/1.4 var(--font-sans); letter-spacing:-.01em; text-align:left; cursor:pointer; transition:background .3s ease, color .3s ease; }
.faq-num { color:var(--muted-2); font:500 .66rem var(--font-mono); letter-spacing:.08em; transition:color .3s ease; }
.faq-icon { position:relative; width:28px; height:28px; border:1px solid var(--line-2); border-radius:50%; transition:border-color .3s ease, background .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.faq-icon::before, .faq-icon::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; margin:-.75px 0 0 -5px; border-radius:2px; background:currentColor; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.faq-icon::after { transform:rotate(90deg); }
.faq-trigger:hover { background:#ffffff05; color:#fff; }
.faq-trigger:hover .faq-icon { border-color:var(--brass); }
.faq-trigger:hover .faq-num, .faq-item.is-open .faq-num { color:var(--brass-2); }
.faq-trigger:active { background:#ffffff08; }
.faq-trigger:focus-visible { outline:2px solid var(--brass-2); outline-offset:2px; }
.faq-item.is-open .faq-trigger { color:var(--brass-2); }
.faq-item.is-open .faq-icon { transform:rotate(180deg); border-color:var(--brass-2); background:#e3bd8014; }
.faq-item.is-open .faq-icon::after { transform:rotate(0deg); opacity:0; }
.faq-panel p { margin:0; padding:0 56px 26px 66px; max-width:72ch; color:var(--muted); font-size:.95rem; line-height:1.8; }
.faq-panel strong { color:var(--text); font-weight:600; }
.faq-panel a { color:var(--brass-2); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
/* Zwijanie tylko z działającym skryptem; bez niego odpowiedzi są widoczne. */
.faq-list.is-ready .faq-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.faq-list.is-ready .faq-panel-inner { min-height:0; overflow:hidden; }
.faq-list.is-ready .faq-panel p { opacity:0; translate:0 -6px; transition:opacity .3s ease, translate .45s cubic-bezier(.2,.8,.2,1); }
.faq-list.is-ready .is-open .faq-panel { grid-template-rows:1fr; }
.faq-list.is-ready .is-open .faq-panel p { opacity:1; translate:0 0; transition-delay:.08s; }
@media (max-width:720px) {
  .faq-list { gap:36px; }
  .faq-trigger { grid-template-columns:26px minmax(0,1fr) 26px; gap:10px; padding:18px 4px 18px 12px; }
  .faq-panel p { padding:0 8px 22px 48px; font-size:.92rem; }
  .faq-icon { width:26px; height:26px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list.is-ready .faq-panel, .faq-list.is-ready .faq-panel p, .faq-icon, .faq-icon::before, .faq-icon::after, .faq-item::before { transition:none; }
}

/* ------------------------------------------------ 3D bez powiększania */
/* Żadne zdjęcie nie powiększa się przy najechaniu: głębię dają tylko
   perspektywa, obrót, cień i światło (skrypt initTilt). */
.finish-photo:hover .photo-frame img, .finish-photo:hover img, .home-work-photo:hover img, .gal-card:hover .gal-media img, .portrait:hover img { transform:none !important; filter:none; }
.finish-photo:hover .process-image--rotated img { transform:translate(-50%,-50%) rotate(-90deg) !important; }
.finish-photo:hover .photo-frame, .portrait:hover, .gal-card:hover .gal-media { transform:none; }
[data-tilt] { transform-style:flat; backface-visibility:hidden; }
[data-tilt].is-tilting { box-shadow:var(--sx, 0px) calc(var(--sy, 0px) + 18px * var(--tilt, 0)) calc(30px + 26px * var(--tilt, 0)) rgba(0, 0, 0, calc(.25 + .3 * var(--tilt, 0))) !important; }
[data-tilt]::after { background:radial-gradient(circle 300px at var(--mx, 50%) var(--my, 50%), rgba(255, 246, 226, .2), rgba(255, 246, 226, .05) 45%, transparent 72%) !important; mix-blend-mode:soft-light; }
.metal-block { transform:perspective(1100px) rotateX(var(--hx, 0deg)) rotateY(calc(-24deg + var(--hy, 0deg))) rotateZ(-12deg); }
.metal-block > span { transform:translateZ(0); }
/* Refleks przesuwa się po metalu razem z pochyleniem. */
.metal-block::after { background:repeating-linear-gradient(100deg,#ffffff0b 0 1px,transparent 1px 4px), linear-gradient(115deg, transparent calc(var(--hl, 50%) - 22%), #ffffff2e var(--hl, 50%), transparent calc(var(--hl, 50%) + 22%)); }

/* ------------------------------------------------ poświata tła */
/* Dwa duże, miękkie pola światła pod całą stroną. Kolor ustawia skrypt
   (zmienne --amb-warm/--amb-cool), przenikanie robi CSS. */
body.multipage, body.multipage.material-page { transition:--amb-warm 1.8s cubic-bezier(.4,0,.2,1), --amb-cool 2.2s cubic-bezier(.4,0,.2,1), --scene-color .85s ease; }
.multipage::before {
  content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none; animation:none;
  background:
    radial-gradient(closest-side, var(--amb-warm), transparent) 0% 18% / 70% 75% no-repeat,
    radial-gradient(closest-side, var(--amb-cool), transparent) 100% 82% / 75% 80% no-repeat;
}
@media (max-width:720px) {
  .multipage::before { background:
    radial-gradient(closest-side, var(--amb-warm), transparent) 0% 10% / 120% 60% no-repeat,
    radial-gradient(closest-side, var(--amb-cool), transparent) 100% 90% / 120% 60% no-repeat; }
}
@media (prefers-reduced-motion: reduce) { body.multipage, body.multipage.material-page { transition:none; } }

/* ------------------------------------------------ zakończenie bez szwów */
/* Poświata sięga poza sekcję (w górę i na boki) i wygasa dokładnie na
   krawędzi swojego pola (closest-side), więc nigdzie nie ma cięcia.
   Kończy się przed stopką, a stopka przechodzi w tło gradientem. */
.finale { overflow:visible; }
.finale::after { inset:-18% -12% 10% -12%; background:radial-gradient(closest-side, rgba(var(--page-rgb), .11), rgba(var(--page-rgb), .04) 55%, transparent); }
.btn--gradient { box-shadow:inset 0 1px 0 #ffffff80, 0 10px 30px rgba(var(--page-rgb), .26), 0 0 0 1px #ffffff14; }
.btn--gradient:hover { box-shadow:inset 0 1px 0 #ffffffa0, 0 16px 38px rgba(var(--page-rgb), .38), 0 0 0 1px #ffffff24; }
.site-footer.compact-footer { background:linear-gradient(180deg, rgba(16,16,18,0), rgba(16,16,18,.92) 90px, #101012); border-top-color:transparent; position:relative; }
.site-footer.compact-footer::before { content:""; position:absolute; top:0; left:50%; width:min(1200px, calc(100% - 40px)); height:1px; transform:translateX(-50%); background:linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); }
.finale { overflow-x:clip; overflow-y:visible; }
.finale::after { inset:-18% 0 10% 0; }

/* ------------------------------------------------ mobile: prosto i na temat */
/* Atrybut height na <img> wygrywał z aspect-ratio i zdjęcie hali miało 1144 px wysokości. */
.process-photo img { height:auto; }
@media (max-width:720px) {
  /* Bloczek metalu w nagłówku powłoki: mniejszy, żeby nie zajmował całego ekranu. */
  .material-art { width:100%; min-height:0; height:230px; margin-top:18px; }
  .metal-block { width:230px; left:50%; top:4px; margin-left:-115px; border-radius:18px; }
  .metal-block > span { font-size:3rem; }
  /* Cookies: zwarty pasek przy dolnej krawędzi zamiast dużej karty. */
  .cookie-bar { left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); width:auto; padding:16px 16px 14px; border-radius:14px; }
  .cookie-bar h4 { font-size:.92rem; margin-bottom:4px; }
  .cookie-bar p { font-size:.8rem; line-height:1.5; margin-bottom:12px; }
  .cookie-actions .btn { padding:9px 12px; min-height:44px; font-size:.84rem; }
  /* Mapa: przyciski jeden pod drugim, tej samej szerokości. */
  .map-blocked { padding:24px 20px; gap:12px; }
  .map-blocked .btn, .map-blocked a { width:100%; max-width:280px; justify-content:center; }
  /* Przycisk „do góry”: mniejszy i półprzezroczysty, żeby nie zasłaniał treści. */
  .back-top { width:40px; height:40px; font-size:1.1rem; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); background:#151518b8; backdrop-filter:blur(6px); }
}

/* ------------------------------------------------ galeria: całe zdjęcie z oddechem */
/* Zdjęcie nigdy nie jest przycięte ani przybliżone przy otwarciu: mieści się
   w całości i ma margines wokół, jakby oglądane z lekkiego oddalenia. */
.photo-slide:not(.photo-slide--rotated) img { width:86%; height:86%; }
.photo-slide img { filter:drop-shadow(0 18px 40px #0009); }
@media (max-width:720px) { .photo-slide:not(.photo-slide--rotated) img { width:calc(100% - 28px); height:78%; } }
