/*
Theme Name: Lotnicza100
Theme URI: https://lotnicza100.pl
Author: Publicon
Description: Hi-fi one-pager Lotnicza 100 / Lotnicza 100 Południe — fidelity 1:1 z handoffu.
Version: 1.0.0
Text Domain: lotnicza100
Requires at least: 6.0
Requires PHP: 8.0
*/

/* WP compatibility */
body.wp-theme-lotnicza100 { margin: 0; background: #081F19; }
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}
html { scroll-behavior: smooth; }



  @font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Regular.woff2') format('woff2'), url('assets/fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Medium.woff2') format('woff2'), url('assets/fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-SemiBold.woff2') format('woff2'), url('assets/fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Bold.woff2') format('woff2'), url('assets/fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
  html { scroll-behavior: smooth; }
  #pt-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: none; scroll-behavior: smooth; }
  #pt-track::-webkit-scrollbar { display: none; }
  #pt-track.pt-dragging { scroll-behavior: auto; scroll-snap-type: none; }
  .pt-card { flex: 0 0 auto; width: 400px; scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid rgba(12,46,37,0.16); }
  .pt-card:focus-visible { outline: 2px solid #17513F; outline-offset: 3px; }
  .pt-card { transition: opacity var(--t-fast) var(--e-out); }
  #pt-track.dim-new .pt-new, #pt-track.dim-exist .pt-exist { opacity: 0.35; }
  #pt-cursor { position: fixed; z-index: 300; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 999px; background: rgba(12,46,37,0.9); color: #F2F0E6; display: grid; place-items: center; font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity var(--t-fast) var(--e-out); }
  @media (hover: none) { #pt-cursor { display: none; } #pt-track { cursor: grab; } }
  @media (max-width: 1220px) {
    .partner-grid { grid-template-columns: repeat(3, 1fr); }
    #pt-bar { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
    #pt-right { width: 100%; justify-content: space-between; }
  }
  @media (max-width: 700px) {
    .form-cell { grid-column: 1 / -1 !important; }
  }
  @media (max-width: 900px) {
    .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .partner-head { flex-wrap: wrap; gap: 10px !important; }
    .water-top, .water-body { grid-template-columns: 1fr !important; }
    .water-top > *, .water-body > * { grid-column: 1 !important; }
    .water-nums { grid-template-columns: 1fr !important; gap: 24px !important; }
    .water-nums > * { margin-top: 0 !important; }
    .water-photo { position: static !important; order: -1; }
    .pt-card { width: 85vw; }
    #pt-legend { flex-wrap: wrap !important; }
    #pt-arrows { display: none !important; }
  }
  .scroll-cue .cue-ring { transition: stroke-dashoffset var(--t-slow) var(--e-out); }
  .scroll-cue:hover .cue-ring { stroke-dashoffset: 0; }
  .scroll-cue .cue-core { transition: background var(--t-base) var(--e-out), color var(--t-base) var(--e-out); }
  .scroll-cue .cue-arrow { transition: color var(--t-base) var(--e-out); color: #F2F0E6; }
  .scroll-cue:hover .cue-core { background: rgba(214, 245, 168, 0.16); color: #D6F5A8; }
  .scroll-cue:hover .cue-arrow { color: #D6F5A8; }
  .scroll-cue:hover .cue-type text { fill: rgba(242,240,230,0.75); }
  .scroll-cue .cue-type text { transition: fill var(--t-base) var(--e-out); }
  .fb-pill { transition: background var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out); }
  .fb-pill:hover { background: #D6F5A8 !important; border-color: #D6F5A8 !important; color: #0C2E25 !important; }
  .fb-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(214,245,168,0.9); }
  .fb-ico { position: relative; display: block; width: 13px; height: 13px; overflow: hidden; }
  .fb-ico span { position: absolute; left: 0; top: 0; display: block; line-height: 13px; transition: transform var(--t-fast) var(--e-out); }
  .fb-ico span:last-child { transform: translate(-8px, 8px); }
  .fb-pill:hover .fb-ico span:first-child { transform: translate(8px, -8px); }
  .fb-pill:hover .fb-ico span:last-child { transform: translate(0, 0); }
  .wordmark:hover { opacity: 0.78; }
  @media (max-width: 760px) {
    #site-header {
      grid-template-columns: 1fr auto !important;
      height: 58px !important;
      padding: 0 18px !important;
      gap: 10px !important;
    }
    .hdr-desc { display: none !important; }
    .wordmark { justify-self: start !important; font-size: 16.5px !important; }
    .fb-pill {
      padding: 7px 12px !important;
      gap: 6px !important;
      font-size: 12px !important;
      min-height: 0 !important;
      background: rgba(242,240,230,0.14) !important;
      backdrop-filter: blur(20px) saturate(170%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
      border: 1px solid rgba(242,240,230,0.32) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 8px rgba(6,24,18,0.18);
    }
    .fb-ico { width: 11px !important; height: 11px !important; }
    .fb-ico span { line-height: 11px !important; }
  }
  @media (max-width: 360px) {
    .fb-pill {
      padding: 0 !important;
      width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      justify-content: center;
    }
    .fb-pill .fb-text { display: none; }
  }
  #ulim-track { --ulim-gutter: max(clamp(24px, 4.4vw, 64px), calc(50vw - 720px)); --ulim-card: clamp(280px, 30vw, 420px); --ulim-gap: clamp(14px, 1.6vw, 22px); display: flex; gap: var(--ulim-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--ulim-gutter); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; }
  @media (max-width: 900px) { #ulim-track { padding-left: var(--ulim-gutter) !important; } }
  #ulim-track::-webkit-scrollbar { display: none; }
  #ulim-track.pt-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; }
  .ulim-card { flex: 0 0 clamp(280px, 30vw, 420px); scroll-snap-align: start; min-height: clamp(320px, 40dvh, 430px); display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 26px); padding: clamp(22px, 2.4vw, 34px); border: 1px solid rgba(12,46,37,0.16); border-top: 2px solid rgba(12,46,37,0.16); background: transparent; transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out); }
  .ulim-card:hover { background: #EDEDE8; }
  .ulim-card.uc-active { border-top-color: #D6F5A8; }
  .ulim-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: rgba(12,46,37,0.6); background: transparent; transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out); }
  .ulim-ico svg { width: 22px; height: 22px; display: block; }
  .ulim-card:hover .ulim-ico { background: #D6F5A8; color: #17513F; }
  @media (max-width: 700px) { .ulim-card { flex-basis: 85vw; } }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: #081F19; -webkit-font-smoothing: antialiased; }
  ::selection { background: #D6F5A8; color: #0C2E25; }
  a { color: #D6F5A8; text-decoration: none; }
  a:hover { color: #F2F0E6; }
  :root {
    --t-fast: 0.25s;
    --t-base: 0.7s;
    --t-slow: 1.2s;
    --t-step: 0.09s;
    --e-out: cubic-bezier(0.16, 1, 0.3, 1);
    --e-io: cubic-bezier(0.55, 0.06, 0.42, 0.97);
    --e-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --rv-text: 24px;
    --rv-img: 48px;
    --lift: -2px;
    --shadow-lift: 0 14px 34px rgba(6, 24, 18, 0.18);
    --shell: 1440px;
    --gut: clamp(24px, 4.4vw, 64px);
    /* Keeps content on one rail when zoomed-out / ultra-wide (Mac Studio Display, etc.). */
    --page-inline: max(var(--gut), calc((100vw - var(--shell)) / 2));
    /* display type: rem ceilings keep Ctrl± zoom coherent; vw grows on large canvases */
    --fs-hero: clamp(2.75rem, 1.85rem + 2.9vw, 7.25rem);
    --fs-display: clamp(1.875rem, 1.2rem + 2.4vw, 5.25rem);
    --fs-footer-word: clamp(3.5rem, 12.5vw, 20rem);
  }

  /* Large / ultrawide: shell tracks the canvas so content doesn't become a thin postage stamp */
  @media (min-width: 1600px) {
    :root {
      --shell: clamp(1500px, 86vw, 1760px);
      --gut: clamp(32px, 3.4vw, 80px);
      --fs-hero: clamp(3.25rem, 1.6rem + 3.2vw, 8rem);
      --fs-display: clamp(2.25rem, 1rem + 2.6vw, 5.75rem);
      --fs-footer-word: clamp(4rem, 13vw, 22rem);
    }
  }
  @media (min-width: 1920px) {
    :root {
      --shell: clamp(1680px, 84vw, 2000px);
      --gut: clamp(40px, 3vw, 96px);
      --fs-hero: clamp(3.75rem, 1.4rem + 3.4vw, 8.75rem);
      --fs-display: clamp(2.5rem, 0.9rem + 2.8vw, 6.25rem);
      --fs-footer-word: clamp(4.5rem, 13.5vw, 24rem);
    }
  }
  @media (min-width: 2400px) {
    :root {
      --shell: clamp(1800px, 80vw, 2280px);
      --fs-hero: clamp(4.25rem, 1.2rem + 3.6vw, 9.5rem);
      --fs-display: clamp(2.75rem, 0.8rem + 3vw, 6.75rem);
      --fs-footer-word: clamp(5rem, 14vw, 26rem);
    }
  }

  /* One content rail for hard-coded 1440px blocks + header/hero chrome */
  #wizja .intro-grid,
  #woda > div,
  #fakty > div,
  #korzysci > .kz-shell,
  #kontakt > .split,
  #kontakt > div:not(#footer-word),
  #filary .split,
  #inwestycje .split,
  #lokalizacja .loc-grid,
  #projekt > div,
  #procedura > div {
    max-width: var(--shell) !important;
  }

  #site-header {
    padding-left: var(--page-inline) !important;
    padding-right: var(--page-inline) !important;
  }
  #site-header > span[aria-hidden="true"] {
    left: var(--page-inline) !important;
    right: var(--page-inline) !important;
  }
  /* Hero media stays full-bleed; only the typography/CTA rail is capped */
  #top .hero-inner {
    padding-left: var(--page-inline) !important;
    padding-right: var(--page-inline) !important;
    box-sizing: border-box;
  }
  #wizja,
  #lokalizacja,
  #filary,
  #woda,
  #projekt,
  #inwestycje,
  #korzysci,
  #procedura,
  #ulim,
  #fakty,
  #kontakt {
    padding-left: var(--page-inline) !important;
    padding-right: var(--page-inline) !important;
  }

  /* Hero title — fluid across all diagonals (replaces min(vw, dvh) which fights zoom) */
  .hero-title {
    font-size: var(--fs-hero);
    max-width: min(18ch, 100%);
  }

  /* Footer wordmark: CSS fallback size; JS snaps ink flush to the full bleed width */
  #footer-word {
    height: auto;
    min-height: 0.7em;
  }
  #footer-word-text {
    font-size: var(--fs-footer-word);
  }

  /* Display headings: lift hard-coded clamp ceilings on large canvases */
  @media (min-width: 1600px) {
    #wizja h2,
    #woda h2,
    #projekt h2,
    #inwestycje h2,
    #procedura h2,
    #fakty h2,
    #kontakt h2,
    #lokalizacja h2 {
      font-size: var(--fs-display) !important;
    }
    #korzysci #odo-cap {
      font-size: clamp(1.35rem, 0.8rem + 1.4vw, 2.75rem) !important;
      max-width: 40ch !important;
    }
  }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes barGrow { from { transform: scaleY(0.02); opacity: 0.2; } to { transform: scaleY(1); opacity: 1; } }
  @keyframes ptswipe {
    0% { transform: translateX(0); opacity: 0.25; }
    12% { opacity: 1; }
    46% { transform: translateX(46px); opacity: 1; }
    58% { transform: translateX(46px); opacity: 0.25; }
    59% { transform: translateX(0); opacity: 0; }
    72% { transform: translateX(0); opacity: 0.25; }
    100% { transform: translateX(0); opacity: 0.25; }
  }
  @keyframes ptwheel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  @keyframes rv { from { opacity: 0; transform: translateY(var(--rv-text)); } to { opacity: 1; transform: none; } }
  @keyframes rvx { from { opacity: 0; transform: translateX(calc(var(--rv-text) * -1)); } to { opacity: 1; transform: none; } }
  @keyframes rvimg {
    from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(var(--rv-img)) scale(1.06); }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  }
  @keyframes rvmask { from { clip-path: inset(100% 0 -12% 0); transform: translateY(var(--rv-text)); } to { clip-path: inset(-12% 0 -12% 0); transform: none; } }
  @keyframes curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes stamp { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: none; } }
  @keyframes fillread { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  /* Hero LCP: never fade opacity to 0 (breaks PageSpeed LCP / NO_LCP). */
  @keyframes herobg { from { transform: scale(1.04); } to { transform: scale(1); } }
  @keyframes rvsoft {
    from { transform: translateY(var(--rv-text)); opacity: 1; }
    to { transform: none; opacity: 1; }
  }
  @keyframes rvline { from { transform: scaleX(0); transform-origin: left center; } to { transform: scaleX(1); transform-origin: left center; } }
  @keyframes para { from { transform: translateY(-7%) scale(1.12); } to { transform: translateY(7%) scale(1.12); } }
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 62% { transform: translateY(10px); opacity: 1; } 100% { transform: translateY(13px); opacity: 0; } }
  @keyframes bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
  @keyframes spinslow { to { transform: rotate(360deg); } }
  @keyframes halo { 0% { transform: scale(0.86); opacity: 0.55; } 70% { transform: scale(1.42); opacity: 0; } 100% { transform: scale(1.42); opacity: 0; } }
  @keyframes creep { from { transform: translateX(4%); } to { transform: translateX(-4%); } }
  @media (max-width: 1220px) {
    .partner-grid { grid-template-columns: repeat(3, 1fr); }
    #pt-bar { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
    #pt-right { width: 100%; justify-content: space-between; }
  }
  @media (max-width: 700px) {
    .form-cell { grid-column: 1 / -1 !important; }
    .chart-pair { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 900px) {
    .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .partner-head { flex-wrap: wrap; gap: 10px !important; }
    .water-top, .water-body { grid-template-columns: 1fr !important; }
    .water-top > *, .water-body > * { grid-column: 1 !important; }
    .water-nums { grid-template-columns: 1fr !important; gap: 24px !important; }
    .water-nums > * { margin-top: 0 !important; }
    .water-photo { position: static !important; order: -1; } .split { grid-template-columns: 1fr !important; } .edge { display: none !important; } }
  @media (max-width: 1220px) {
    .partner-grid { grid-template-columns: repeat(3, 1fr); }
    #pt-bar { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
    #pt-right { width: 100%; justify-content: space-between; }
  }
  @media (max-width: 700px) {
    .form-cell { grid-column: 1 / -1 !important; }
    .chart-pair { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 900px) {
    .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .partner-head { flex-wrap: wrap; gap: 10px !important; }
    .water-top, .water-body { grid-template-columns: 1fr !important; }
    .water-top > *, .water-body > * { grid-column: 1 !important; }
    .water-nums { grid-template-columns: 1fr !important; gap: 24px !important; }
    .water-nums > * { margin-top: 0 !important; }
    .water-photo { position: static !important; order: -1; }
    .loc-grid { grid-template-columns: 1fr !important; padding-right: 0 !important; }
    .loc-grid > * { grid-column: 1 !important; }
    .filary-head { position: static !important; margin-top: 0 !important; }
    .loc-photo {
      width: 100% !important;
      margin-top: 8px !important;
      margin-right: 0 !important;
      min-height: 0 !important;
    }
    .loc-col { grid-column: 1 / -1 !important; padding-right: 0 !important; }
    .intro-grid { grid-template-columns: 1fr !important; }
    .intro-grid > * { grid-column: 1 / -1 !important; }
    .intro-photo { max-width: 320px; }
    /* >8 ha full width; "7" + "<15 min" side by side, no left rules (look like indent) */
    .loc-stats {
      grid-template-columns: 1fr 1fr !important;
      gap: 20px 16px !important;
    }
    .loc-stats > *:first-child { grid-column: 1 / -1 !important; }
    .loc-stats > *:nth-child(2),
    .loc-stats > *:nth-child(3) {
      grid-column: auto !important;
      border-left: none !important;
      padding-left: 0 !important;
    }
  }
  @media (max-height: 760px) and (min-width: 769px) {
    .hero-cue { display: none !important; }
    .hero-inner { padding-top: 96px !important; gap: 24px !important; }
    .hero-foot { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 1220px) {
    .partner-grid { grid-template-columns: repeat(3, 1fr); }
    #pt-bar { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
    #pt-right { width: 100%; justify-content: space-between; }
  }
  @media (max-width: 700px) {
    .form-cell { grid-column: 1 / -1 !important; }
    .chart-pair { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 900px) {
    .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .partner-head { flex-wrap: wrap; gap: 10px !important; }
    .water-top, .water-body { grid-template-columns: 1fr !important; }
    .water-top > *, .water-body > * { grid-column: 1 !important; }
    .water-nums { grid-template-columns: 1fr !important; gap: 24px !important; }
    .water-nums > * { margin-top: 0 !important; }
    .water-photo { position: static !important; order: -1; }
    .hero-foot { grid-template-columns: 1fr !important; gap: 28px !important; }
    .hero-foot > * { grid-column: 1 !important; justify-self: start !important; }
    .hero-statement { text-align: left !important; }
  }
  .pt-card, .ulim-card, .fil-row { transition: transform var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out); }
  .pt-card:hover, .ulim-card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); }
  p a, .prose a { position: relative; }
  p a::after, .prose a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--t-fast) var(--e-out); }
  p a:hover::after, .prose a:hover::after { transform: scaleX(1); }

  /* --- reveal engine: one-shot, unpaused by observer; no-JS keeps content visible --- */
  @media (scripting: none) { *, *::before, *::after { animation-play-state: running !important; } }

  /* --- 4. WIZJA / filary: 3-beat rhythm per row (desktop) --- */
  #pillars [data-pillar] > span { animation: rvx var(--t-base) var(--e-out) both; animation-play-state: paused; }
  #pillars [data-pillar] > .split > h3 { animation: rv var(--t-base) var(--t-step) var(--e-out) both; animation-play-state: paused; }
  #pillars [data-pillar] > .split > p { animation: rv var(--t-base) calc(var(--t-step) * 2) var(--e-out) both; animation-play-state: paused; }
  #pillars [data-pillar] > .split > div { animation: rvimg var(--t-base) calc(var(--t-step) * 2) var(--e-out) both; animation-play-state: paused; }

  /* Mobile: one elegant row reveal as you scroll (not all at once) */
  @media (max-width: 768px) {
    #pillars [data-pillar] {
      opacity: 0;
      transform: translate3d(0, 32px, 0);
      filter: blur(2px);
      transition:
        opacity 0.75s var(--e-out),
        transform 0.75s var(--e-out),
        filter 0.75s var(--e-out);
      will-change: opacity, transform, filter;
    }
    #pillars [data-pillar].is-in {
      opacity: 1;
      transform: none;
      filter: none;
    }
    #pillars [data-pillar] > span,
    #pillars [data-pillar] > .split > h3,
    #pillars [data-pillar] > .split > p,
    #pillars [data-pillar] > .split > div {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
  }
  @media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #pillars [data-pillar] {
      opacity: 1;
      transform: none;
      filter: none;
      transition: none;
    }
  }

  /* --- 1. HERO / header: three zones, drawn line --- */
  #site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(242,240,230,0.14); transform-origin: left center; animation: rvline var(--t-base) var(--e-out) both; }
  /* Header chrome: transform-only (opacity:0 entrances hurt LCP scoring). */
  #site-header .hdr-desc { animation: rvsoft var(--t-base) var(--t-step) var(--e-out) both; transition: opacity var(--t-base) var(--e-io); }
  #site-header .wordmark { animation: rvsoft var(--t-base) calc(var(--t-step) * 2) var(--e-out) both; }
  #site-header .fb-pill { animation: rvsoft var(--t-base) calc(var(--t-step) * 3) var(--e-out) both; }

  /*
   * First paint without above-the-fold entrance animations → stable LCP for PageSpeed.
   * JS adds html.l100-motion on the next frames; motion then runs normally.
   */
  html:not(.l100-motion) #site-header .hdr-desc,
  html:not(.l100-motion) #site-header .wordmark,
  html:not(.l100-motion) #site-header .fb-pill,
  html:not(.l100-motion) #site-header::after,
  html:not(.l100-motion) #top .hero-cta,
  html:not(.l100-motion) #top .hero-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-header.docked .hdr-desc { opacity: 0.5; }

  /* --- 2. INTRO: statement fills as it is read --- */
  .stmt-fill { display: none; }
  .stmt-acc { position: relative; }
  .stmt-acc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base) var(--e-out); }
  .stmt.acc-on .stmt-acc::after { transform: scaleX(1); }
  .stmt-fill { display: none !important; }

  /* --- 8. PAKIET INWESTYCJI: rows + travelling dot --- */
  #inwestycje [data-inw] { position: relative; transition: opacity var(--t-base) var(--e-io); }
  #inwestycje [data-inw] > span:first-of-type { animation: rvx var(--t-base) var(--e-out) both; animation-play-state: paused; }
  #inwestycje [data-inw] > div:last-child { animation: rvimg var(--t-base) calc(var(--t-step) * 2) var(--e-out) both; animation-play-state: paused; opacity: 0.7; transition: opacity var(--t-base) var(--e-io); }
  #inwestycje [data-inw].inw-on > div:last-child { opacity: 1; }
  /* Vertical rail/dot removed on all breakpoints (numbers alone carry the list rhythm). */
  #inw-rail,
  #inw-dot { display: none !important; }

  /* --- 9. BILANS: curtain under the content --- */
  #korzysci > .kz-curtain { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #0A2620 0%, #0C2E25 40%, #081F19 100%); animation: curtain var(--t-slow) var(--e-out) both; animation-play-state: paused; }
  /* Desktop plate: PS Exclusion @ 40% — soft mask kills hard plate edge */
  #korzysci > .kz-bg {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,0.45) 68%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,0.45) 68%, transparent 100%);
  }
  #korzysci > .kz-bg img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    opacity: 0.4;
    mix-blend-mode: multiply;
  }
  @media (min-width: 901px) {
    #korzysci > .kz-bg {
      display: block;
    }
    #korzysci > .kz-bg img {
      position: absolute;
      left: 0;
      top: 46%; /* align with ~250 mln metric band */
      width: 115%;
      max-width: none;
      max-height: none;
      transform: none;
      transform-origin: left top;
    }
  }
  #korzysci > .kz-shell { position: relative; z-index: 1; }

  /* Korzyści: stack from tablet down — inline grid-column spans create implicit tracks when .split collapses to 1fr */
  @media (max-width: 900px) {
    #korzysci > .kz-bg { display: none !important; }
    #korzysci {
      overflow: hidden !important;
      padding-top: 72px !important;
      padding-bottom: 80px !important;
    }
    #korzysci #counter-anchor {
      margin: 18px 0 28px !important;
      gap: 12px !important;
    }
    #korzysci #odo {
      width: max-content !important;
      max-width: none !important;
      letter-spacing: -0.03em !important;
    }
    /* PLN uses font-size: 0.2em — margin in its own em; ~1.2em ≈ gap vs digits */
    #korzysci #odo .odo-pln {
      margin-left: 1.2em !important;
    }
    #korzysci #odo-cap {
      max-width: 28ch !important;
      font-size: clamp(20px, 5.2vw, 28px) !important;
      line-height: 1.22 !important;
    }
    #korzysci .split,
    #korzysci .kz-split {
      grid-template-columns: 1fr !important;
      gap: 0 !important;
    }
    #korzysci .split > *,
    #korzysci .kz-split > * {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      max-width: none !important;
      margin-top: 0 !important;
    }
    #korzysci .kz-intro {
      padding-bottom: 28px !important;
      margin-bottom: 4px !important;
      font-size: 16px !important;
      line-height: 1.7 !important;
    }
    #korzysci .kz-metric,
    #korzysci .kz-qual {
      gap: 8px !important;
      padding-top: 22px !important;
      padding-bottom: 22px !important;
      border-top: 1px solid rgba(242,240,230,0.18) !important;
    }
    #korzysci .kz-qual:last-child {
      padding-bottom: 0 !important;
    }
    /* SVG: crop empty sky, keep air under labels before the big number */
    #korzysci .kz-metric svg {
      width: min(100%, 280px) !important;
      max-width: 280px !important;
      margin-top: -36px !important;
      margin-bottom: -12px !important;
    }
    #korzysci .kz-metric-val {
      font-size: clamp(44px, 12vw, 64px) !important;
      letter-spacing: -0.034em !important;
      color: #D6F5A8;
      margin-top: 14px !important;
    }
    #korzysci .kz-metric-val-cit {
      font-size: clamp(40px, 11vw, 58px) !important;
    }
    #korzysci .kz-metric > p,
    #korzysci .kz-qual > p {
      max-width: 36ch;
      font-size: 15px !important;
      line-height: 1.65 !important;
    }
    #korzysci .kz-qual-title {
      font-size: clamp(22px, 5.6vw, 28px) !important;
    }

    #fakty > div > .split {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      align-items: start !important;
    }
    #fakty > div > .split h2 {
      margin-left: 0 !important;
    }
  }

  /* --- 10. ULIM: stamped number + icon --- */
  .ulim-card > div:first-child > span,
  .ulim-card > div:first-child > .ulim-ico { animation: stamp var(--t-fast) var(--e-back) both; animation-play-state: paused; }
  .ulim-card > div:first-child > .ulim-ico { animation-delay: var(--t-step); }
  .ulim-card > span,
  .ulim-card > p { animation: rv var(--t-base) calc(var(--t-step) * 2) var(--e-out) both; animation-play-state: paused; }

  /* --- 12. FINAŁ: monumental word rises with the scroll --- */
  #footer-word-text { animation: rvmask var(--t-slow) var(--e-out) both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
  #kontakt .form-cell > * { animation: rv var(--t-base) var(--e-out) both; animation-play-state: paused; }
  #kontakt .form-cell > *:nth-child(2) { animation-delay: var(--t-step); }
  #kontakt .form-cell > *:nth-child(3) { animation-delay: calc(var(--t-step) * 2); }
  #kontakt .form-cell > *:nth-child(4) { animation-delay: calc(var(--t-step) * 3); }
  #kontakt .form-cell > *:nth-child(5) { animation-delay: calc(var(--t-step) * 4); }
  #kontakt .form-cell > *:nth-child(n+6) { animation-delay: calc(var(--t-step) * 5); }
  /* --- 7. KARUZELA: glass parallax on the photo layer --- */
  .pt-card > div:first-child > img, .pt-card > div:first-child > div[role="img"] { transition: transform var(--t-base) var(--e-out); }
  @media (pointer: fine) { #pt-track.pt-dim .pt-card { opacity: 0.86; transition: opacity var(--t-fast) var(--e-out); } #pt-track.pt-dim .pt-card.pt-front { opacity: 1; } }

  .swipe-hint-short { display: none; }

  /* --- 13. NAWIGACJA: sliding lime blob (blob + label color share timing) --- */
  :root {
    --t-pill: 0.48s;
    --e-pill: cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  #pill-nav { overflow: hidden; isolation: isolate; }
  #pill-blob {
    position: absolute; left: 0; top: 5px; height: calc(100% - 10px); width: 0;
    border-radius: 999px; background: #D6F5A8;
    transform: translate3d(0,0,0); opacity: 0;
    transition: transform var(--t-pill) var(--e-pill), width var(--t-pill) var(--e-pill), opacity calc(var(--t-pill) * 0.6) var(--e-pill);
    will-change: transform, width; pointer-events: none; z-index: 0;
  }
  #pill-nav a {
    position: relative; z-index: 1; border-radius: 999px;
    transition: color var(--t-pill) var(--e-pill) !important;
  }

  #pt-track, #ulim-track { padding-bottom: 34px !important; margin-bottom: -26px; }

  /* ==================== MOBILE PASS ==================== */
  html, body { overflow-x: clip; }
  body { touch-action: pan-y pinch-zoom; }
  :focus-visible { outline: 2px solid #D6F5A8; outline-offset: 2px; }

  @media (max-width: 1024px) {
    :root { --gut: 24px; }
    /* pan-x alone trapped the finger on the track and blocked page scroll */
    #pt-track, #ulim-track { touch-action: pan-x pan-y; }
  }
  @media (max-width: 360px) { :root { --gut: 20px; } }

  @media (max-width: 768px) {
    /* --- rhythm + gutters --- */
    section { padding-left: var(--gut) !important; padding-right: var(--gut) !important; padding-top: 64px !important; padding-bottom: 64px !important; }
    #top, section[data-screen-label="Panorama"] { padding: 0 !important; }
    #projekt, #procedura { padding-left: 0 !important; padding-right: 0 !important; }
    #projekt { padding-top: 28px !important; padding-bottom: 20px !important; }
    #inwestycje { padding-top: 24px !important; }
    #procedura { padding-bottom: 24px !important; }
    #fakty { padding-top: 24px !important; }
    #woda { padding-bottom: 36px !important; }
    #projekt .swipe-hint-full { display: none !important; }
    #projekt .swipe-hint-short { display: inline !important; }
    #pt-bar, #ulim-bar { padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
    /* wordmark flush with page bottom (pill nav overlays the letters, as on desktop edge) */
    #kontakt { padding-bottom: 0 !important; }
    #footer-word {
      margin-top: 18px !important;
      margin-bottom: 0 !important;
      margin-left: calc(-1 * var(--gut)) !important;
      margin-right: calc(-1 * var(--gut)) !important;
    }
    /* keep colophon clear of the floating pill */
    #kontakt > div:nth-last-child(2) {
      padding-bottom: 8px !important;
      margin-bottom: 0 !important;
    }
    #wizja { padding-bottom: 40px !important; }
    .stmt { margin-top: 28px !important; }
    .stmt-rule { margin-top: 28px !important; }
    #wizja .intro-grid { row-gap: 16px !important; }

    /* woda photo: shorter + full-bleed */
    #woda .water-photo {
      width: calc(100% + 2 * var(--gut)) !important;
      max-width: none !important;
      margin-left: calc(-1 * var(--gut)) !important;
      margin-right: calc(-1 * var(--gut)) !important;
      margin-bottom: 8px !important;
    }
    #woda .water-photo-frame,
    #woda .water-photo > div {
      aspect-ratio: 16 / 10 !important;
    }

    /* lokalizacja: text in gutters, photo full-bleed flush to next section */
    #lokalizacja {
      padding-top: 36px !important;
      padding-bottom: 0 !important;
    }
    #lokalizacja .loc-grid {
      padding-left: 0 !important;
      padding-right: 0 !important;
      gap: 20px !important;
    }
    #lokalizacja .loc-col {
      padding-right: 0 !important;
      gap: 22px !important;
    }
    #lokalizacja .loc-col > div:first-child {
      gap: 14px !important;
    }
    #lokalizacja .loc-photo {
      width: calc(100% + 2 * var(--gut)) !important;
      max-width: none !important;
      margin-top: 16px !important;
      margin-left: calc(-1 * var(--gut)) !important;
      margin-right: calc(-1 * var(--gut)) !important;
      margin-bottom: 0 !important;
      min-height: 0 !important;
      height: auto !important;
      aspect-ratio: 16 / 10 !important;
      align-self: stretch !important;
    }

    /* --- type scale --- */
    h1 { font-size: 34px !important; line-height: 1.05 !important; }
    h2 { font-size: 32px !important; line-height: 1.06 !important; }
    h3 { font-size: 20px !important; line-height: 1.24 !important; }
    section p { font-size: 16px !important; line-height: 1.7 !important; }
    .stmt-base, .stmt-fill { font-size: 26px !important; line-height: 1.2 !important; }
    .hero-statement { font-size: 24px !important; line-height: 1.24 !important; }

    /* filary → panorama: kill the dark empty pad before the photo band */
    #filary {
      padding-top: 48px !important;
      padding-bottom: 0 !important;
    }

    /* panorama: match #woda h2 ("Od betonu / do błękitu") type exactly */
    .pano,
    section[data-screen-label="Panorama"] {
      height: 42svh !important;
      min-height: 300px !important;
      max-height: 400px !important;
    }
    .pano-inner {
      padding: 24px var(--gut) 28px !important;
    }
    .pano-br { display: none !important; }
    #woda h2,
    .pano-copy,
    section[data-screen-label="Panorama"] p.pano-copy {
      font-size: 32px !important;
      line-height: 1.06 !important;
      letter-spacing: -0.038em !important;
      font-weight: 600 !important;
      max-width: none !important;
      text-wrap: pretty;
    }

    /* --- 4. WIZJA / filary + PAKIET: number beside title, stacked body --- */
    #pillars, #inw-list { margin-left: calc(-1 * var(--gut)) !important; margin-right: calc(-1 * var(--gut)) !important; }
    #pillars [data-pillar], #inwestycje [data-inw] { grid-template-columns: auto 1fr !important; column-gap: 14px !important; row-gap: 14px !important; padding: 32px var(--gut) !important; align-items: start !important; }
    #pillars [data-pillar] > .split, #inwestycje [data-inw] > div:not(:last-child) { grid-template-columns: 1fr !important; gap: 12px !important; }
    #pillars [data-pillar] > span, #inwestycje [data-inw] > span:first-of-type { min-width: 34px !important; font-size: 24px !important; }
    #pillars [data-pillar] > .split > div, #inwestycje [data-inw] > div:last-child { grid-column: 1 !important; width: 100% !important; aspect-ratio: 16 / 10 !important; margin-top: 4px !important; }
    #inwestycje [data-inw] > div:last-child { grid-column: 2 !important; }
    #inw-rail, #inw-dot { display: none !important; }

    /* --- karuzele: touch rules --- */
    .pt-card, .ulim-card { flex: 0 0 min(85vw, 340px) !important; width: min(85vw, 340px) !important; scroll-snap-align: start; }
    #pt-track, #ulim-track { padding-left: var(--gut) !important; padding-right: 44px !important; scroll-padding-left: var(--gut); scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; }
    #pt-arrows, #ulim-arrows { display: none !important; }
    #pt-right { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; width: 100%; }
    #pt-legend, #ulim-legend { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; flex-wrap: wrap !important; }
    #pt-legend > span, #ulim-legend > span { min-height: 0 !important; align-items: center; padding-block: 2px; }
    #pt-legend > span[aria-hidden="true"], #ulim-legend > span[aria-hidden="true"] { display: none !important; }

    /* --- bilans / korzyści (stack refined for phone) --- */
    .chart-pair { grid-template-columns: 1fr !important; gap: 40px !important; }
    #korzysci {
      overflow: hidden !important;
      padding-top: 56px !important;
      padding-bottom: 72px !important;
    }
    /* font-size left to fitOdo() — !important clamp fought the roll metrics */
    #korzysci #odo {
      width: max-content !important;
      max-width: none !important;
    }
    #korzysci #odo-cap {
      max-width: none !important;
      font-size: 22px !important;
    }
    #korzysci .kz-metric,
    #korzysci .kz-qual {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
    }
    #korzysci .kz-metric svg {
      width: min(100%, 260px) !important;
      max-width: 260px !important;
      margin-top: -32px !important;
      margin-bottom: -10px !important;
    }
    #korzysci .kz-metric-val {
      margin-top: 12px !important;
    }

    /* --- fakty --- */
    #fakty > div > .split {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      align-items: start !important;
    }
    #fakty > div > .split h2 {
      margin-left: 0 !important;
    }
    .faq-pair { grid-template-columns: 1fr !important; gap: 16px !important; }
    #fakty .myth-txt {
      font-size: 22px !important;
      line-height: 1.32 !important;
    }
    .fact-card { width: 100% !important; }

    /* --- formularz --- */
    #kontakt input, #kontakt textarea, #kontakt select { min-height: 48px !important; font-size: 16px !important; }
    #kontakt button[type="submit"] { width: 100% !important; justify-self: stretch !important; min-height: 52px; }

    /* --- header + nawigacja --- */
    #pill-nav {
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
      gap: 2px !important;
      padding: 5px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(242,240,230,0.18) !important;
      background: rgba(6,24,20,0.78) !important;
      backdrop-filter: blur(28px) saturate(175%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
      box-shadow: 0 14px 36px rgba(6,24,18,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
      max-width: calc(100vw - 20px) !important;
    }
    #pill-nav a {
      padding: 11px 14px !important;
      font-size: 10px !important;
      letter-spacing: 0.06em !important;
      min-height: 0 !important;
      height: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 999px !important;
      line-height: 1 !important;
    }
    #pill-blob { top: 5px !important; height: calc(100% - 10px) !important; border-radius: 999px !important; }
  }

  /* --- HERO: content-height (slightly roomier), 3-line headline, CTA --- */
  @media (max-width: 768px) {
    /* nudge crop right so cyclist / path stay a bit more in frame */
    #top .hero-bg {
      object-position: 68% 50% !important;
      background-position: 68% 50% !important;
    }
    #top {
      min-height: 0 !important;
      height: auto !important;
      scroll-margin-top: 0;
    }
    .hero-inner {
      flex: 0 0 auto !important;
      min-height: 0 !important;
      box-sizing: border-box !important;
      padding: calc(128px + env(safe-area-inset-top, 0px)) var(--gut) 108px !important;
      justify-content: flex-start !important;
      gap: 0 !important;
    }
    section[id] { scroll-margin-top: 72px; }
    .hero-head { display: contents !important; }
    .hero-inner h1,
    .hero-title {
      order: 1;
      font-size: clamp(28px, 7.5vw, 32px) !important;
      line-height: 1.14 !important;
      letter-spacing: -0.04em !important;
      margin: 4px 0 0 !important;
      max-width: none !important;
      text-wrap: pretty;
    }
    .hero-inner h1 > span {
      display: block !important;
    }
    .hero-foot {
      order: 2;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 0 !important;
      margin-bottom: 0 !important;
    }
    .hero-statement {
      order: 2;
      text-align: left !important;
      max-width: 34ch !important;
      font-size: clamp(17px, 4.5vw, 20px) !important;
      line-height: 1.32 !important;
      margin-top: 36px !important;
      margin-bottom: 26px !important;
    }
    .hero-cta,
    .hero-inner > .hero-head > a,
    .hero-inner a[href="#wizja"] {
      order: 3;
      margin-top: 4px !important;
      min-height: 48px;
      align-items: center;
      align-self: flex-start !important;
      width: auto !important;
      max-width: max-content !important;
      padding: 15px 24px !important;
      flex: 0 0 auto !important;
    }
    .hero-cue, .scroll-cue { display: none !important; }
  }

  @media (max-width: 430px) {
    #pill-nav a { padding: 10px 12px !important; font-size: 9.5px !important; letter-spacing: 0.05em !important; }
  }
  @media (max-width: 360px) {
    #pill-nav a { padding: 10px 10px !important; font-size: 9px !important; letter-spacing: 0.04em !important; }
  }

  /* --- 5. touch: no hover-only information --- */
  @media (hover: none) {
    #pt-track.pt-dim .pt-card, #pt-track.dim-exist .pt-card, #pt-track.dim-new .pt-card { transition: opacity var(--t-fast) var(--e-out); }
    .pt-card:hover, .ulim-card:hover { background: inherit; }
    #pt-legend > span, #ulim-legend > span { min-height: 0; padding-block: 2px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0s !important;
      animation-timeline: auto !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      animation-play-state: running !important;
    }
    #top .hero-bg,
    #top .hero-title span,
    #top .hero-cta,
    #top .hero-foot,
    #top .hero-statement {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    #pill-blob { transition: none !important; }
  }
  @keyframes rmfade { from { opacity: 1; } to { opacity: 1; } }


  /* runtime baseline (matches the prototype host) */
  html, body { margin: 0; }
  /* generated interactive states — these were style-hover / style-focus props in the prototype */
  [data-s="1"]:hover { background: rgba(242,240,230,0.12); }
  [data-s="2"]:hover { background: rgba(242,240,230,0.12); }
  [data-s="3"]:hover { background: rgba(242,240,230,0.12); }
  [data-s="4"]:hover { background: rgba(242,240,230,0.12); }
  [data-s="5"]:hover { background: rgba(242,240,230,0.12); }
  [data-s="6"]:hover { background: #F2F0E6; }
  [data-s="7"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="8"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="9"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="10"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="11"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="12"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="13"]:hover { background: rgba(242,240,230,0.04); }
  [data-s="14"]:hover { background: rgba(86,127,139,0.07); }
  [data-s="15"]:hover { background: rgba(86,127,139,0.07); }
  [data-s="16"]:hover { background: rgba(86,127,139,0.07); }
  [data-s="17"]:hover { background: rgba(86,127,139,0.07); }
  [data-s="18"]:hover { background: #D6F5A8; border-color: #D6F5A8; }
  [data-s="19"]:hover { background: #D6F5A8; border-color: #D6F5A8; }
  [data-s="20"]:hover { background: rgba(12,46,37,0.045); }
  [data-s="21"]:hover { background: rgba(12,46,37,0.045); }
  [data-s="22"]:hover { background: rgba(12,46,37,0.045); }
  [data-s="23"]:hover { background: #D6F5A8; border-color: #D6F5A8; }
  [data-s="24"]:hover { background: #D6F5A8; border-color: #D6F5A8; }
  [data-s="25"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(6,24,18,0.2); }
  [data-s="26"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(6,24,18,0.2); }
  [data-s="27"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(6,24,18,0.2); }
  [data-s="28"]:hover { border-color: #D6F5A8; color: #F2F0E6; }
  /* Form underline: draw L→R on focus (not instant full border) */
  #kontakt .form-field {
    position: relative;
    display: block;
  }
  #kontakt .form-field input,
  #kontakt .form-field textarea {
    border-bottom: none !important;
    border-radius: 0;
  }
  #kontakt .form-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(242,240,230,0.18);
    pointer-events: none;
    overflow: hidden;
  }
  #kontakt .form-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #D6F5A8;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--e-out);
  }
  #kontakt .form-field:focus-within .form-line::after {
    transform: scaleX(1);
  }
  #kontakt .form-field.is-invalid .form-line {
    background: rgba(214,245,168,0.35);
  }
  #kontakt .form-field.is-invalid .form-line::after {
    transform: scaleX(1);
    background: #D6F5A8;
  }
  #kontakt .consent-row.is-invalid .consent-box {
    border-color: #D6F5A8 !important;
    box-shadow: 0 0 0 1px rgba(214,245,168,0.45);
  }

  /* RODO: short 2-line preview, expand/collapse without fade mask */
  #kontakt .rodo-fold {
    overflow: hidden;
    max-height: 3.24em; /* 2 lines × line-height 1.62 */
    transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #kontakt .rodo-fold.is-open {
    max-height: 48rem;
  }
  #kontakt .rodo-copy {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.62;
    color: rgba(242,240,230,0.62);
    text-wrap: pretty;
  }
  #kontakt .rodo-fold.is-open .rodo-copy {
    color: rgba(242,240,230,0.68);
  }
  @media (prefers-reduced-motion: reduce) {
    #kontakt .rodo-fold {
      transition: none;
    }
  }
  #kontakt .l100-form-status--err button:hover {
    background: #D6F5A8 !important;
    color: #0C2E25 !important;
  }
  #kontakt form [type="submit"][disabled],
  #kontakt form [type="submit"][aria-busy="true"] {
    opacity: 0.72;
    cursor: wait;
  }
  [data-s="29"]:focus,
  [data-s="30"]:focus,
  [data-s="31"]:focus,
  [data-s="32"]:focus {
    border-bottom-color: transparent !important;
  }
  [data-s="33"]:hover { color: #D6F5A8; }
  [data-s="34"]:hover { background: #F2F0E6; }
  [data-s="35"]:hover { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; opacity: 1; border-color: rgba(242,240,230,0.06); }
  [data-s="36"]:hover { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; opacity: 1; border-color: rgba(242,240,230,0.06); }
  [data-s="37"]:hover { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; opacity: 1; border-color: rgba(242,240,230,0.06); }
  [data-s="38"]:hover { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; opacity: 1; border-color: rgba(242,240,230,0.06); }
  [data-s="39"]:hover { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; opacity: 1; border-color: rgba(242,240,230,0.06); }
  [data-s="40"]:hover { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; opacity: 1; border-color: rgba(242,240,230,0.06); }