/* =====================================================================
   technikslask.pl - Template B "Flaga Śląska"
   Token architecture: PRIMITIVE (--p-*) -> SEMANTIC -> COMPONENT,
   direction B fills the color + font slots. Layout CSS below is unique
   to this direction (search-centric, horizontal bands).
   ===================================================================== */

/* ---------- LAYER 1: PRIMITIVES (shared scale) ---------- */
:root{
  --p-weight-regular:400;--p-weight-medium:500;--p-weight-semibold:600;--p-weight-bold:700;--p-weight-black:800;
  --p-space-1:.25rem;--p-space-2:.5rem;--p-space-3:.75rem;--p-space-4:1rem;--p-space-5:1.25rem;--p-space-6:1.5rem;
  --p-space-8:2rem;--p-space-10:2.5rem;--p-space-12:3rem;--p-space-14:3.5rem;--p-space-16:4rem;--p-space-20:5rem;
  --p-space-24:6rem;--p-space-32:8rem;
  --p-radius-0:0;--p-radius-1:.125rem;--p-radius-2:.25rem;--p-radius-3:.5rem;--p-radius-4:.75rem;
  --p-radius-5:1rem;--p-radius-6:1.5rem;--p-radius-full:999px;
  --p-border-1:1px;--p-border-2:2px;--p-border-3:3px;
  --p-text-xs:clamp(1.0625rem,1.04rem + .1vw,1.125rem);
  --p-text-base:clamp(1.125rem,1.0833rem + 0.1852vw,1.25rem);
  --p-text-1:clamp(1.35rem,1.2444rem + 0.4694vw,1.6667rem);
  --p-text-2:clamp(1.62rem,1.4194rem + 0.8917vw,2.2219rem);
  --p-text-3:clamp(1.9438rem,1.6044rem + 1.5083vw,2.9619rem);
  --p-text-4:clamp(2.3325rem,1.7939rem + 2.3935vw,3.9481rem);
  --p-text-5:clamp(2.15rem,1.5rem + 3.2vw,4.6rem);
  --p-leading-tight:1.05;--p-leading-snug:1.2;--p-leading-normal:1.5;--p-leading-relaxed:1.65;
  --p-tracking-tight:-0.02em;--p-tracking-wide:0.06em;
  --p-duration-1:120ms;--p-duration-2:180ms;--p-duration-3:240ms;--p-duration-4:360ms;--p-duration-5:560ms;
  --p-ease-out:cubic-bezier(0.22,1,0.36,1);--p-ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --p-ease-in:cubic-bezier(0.55,0,1,0.45);--p-ease-press:cubic-bezier(0.3,0,0.2,1);
  --p-size-44:2.75rem;--p-size-48:3rem;--p-size-56:3.5rem;--p-size-64:4rem;--p-size-72:4.5rem;
  --p-container:76rem;
}

/* ---------- DIRECTION B: fills every color slot + fonts ---------- */
[data-direction="b"]{
  /* Neutrals: cool, tinted toward granat. Warmth comes from gold, brick and the familok photo */
  --p-n-0:#FCFDFE;   --p-n-50:#F4F6F9;  --p-n-100:#E8EDF3; --p-n-200:#D3DBE5; --p-n-300:#AEB9C7;
  --p-n-500:#5F6B7C; --p-n-700:#3D4654;  --p-n-800:#2A2C30; --p-n-900:#0F1D2E; --p-n-950:#08264A;
  /* Brand = Śląskie złoto (the call colour) */
  --p-brand-100:#FDF3C6; --p-brand-500:#F5C518; --p-brand-600:#F5C518; --p-brand-700:#E3B20A; --p-brand-800:#C99B04;
  /* Accent = cegła familoka (tiny doses) */
  --p-accent-100:#F6E4DC; --p-accent-500:#9E3B24; --p-accent-700:#7C2C18;
  /* Granat (flag blue) as a named primitive for bands */
  --p-navy-500:#0B3B6F; --p-navy-600:#09325E; --p-navy-700:#072849; --p-navy-200:#B9CBE0;
  /* Signals (-700 on -100 >= 7:1) */
  --p-info-100:#E3ECF6;     --p-info-700:#0B3B6F;
  --p-progress-100:#E2EEF0; --p-progress-700:#1B5560;
  --p-warn-100:#FBEFCF;     --p-warn-700:#6E4700;
  --p-ok-100:#E1F0E5;       --p-ok-700:#17502B;
  --p-danger-100:#F7E1DA;   --p-danger-700:#8E2A15;
  --p-shadow-tint:#0B3B6F;

  --p-font-display:"Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --p-font-text:"Atkinson Hyperlegible", "Verdana", sans-serif;
  --p-font-figures:"Bricolage Grotesque", "Trebuchet MS", sans-serif;

  /* personality hooks for B */
  --radius-control:var(--p-radius-4);
  --radius-surface:var(--p-radius-6);
  --border-surface:var(--p-border-2);
}

/* ---------- LAYER 2: SEMANTIC ---------- */
:root{
  --color-page:var(--p-n-50);
  --color-surface:var(--p-n-50);
  --color-surface-raised:var(--p-n-0);
  --color-surface-sunken:var(--p-n-100);
  --color-surface-inverse:var(--p-navy-500);
  --color-ink:var(--p-n-900);
  --color-ink-muted:var(--p-n-700);
  --color-ink-inverse:var(--p-n-0);
  --color-border:var(--p-n-300);
  --color-border-strong:var(--p-n-700);
  --color-divider:var(--p-n-200);

  --color-action:var(--p-brand-600);
  --color-action-hover:var(--p-brand-700);
  --color-action-pressed:var(--p-brand-800);
  --color-action-tint:var(--p-brand-100);
  --color-on-action:var(--p-navy-700);          /* granatowy tekst na złocie, ok. 9:1 */
  --color-accent:var(--p-accent-500);
  --color-accent-strong:var(--p-accent-700);
  --color-accent-tint:var(--p-accent-100);
  --color-brand-band:var(--p-navy-500);
  --color-brand-band-deep:var(--p-navy-700);
  --color-focus:var(--p-navy-500);
  --color-focus-halo:var(--p-n-0);

  --color-info:var(--p-info-700);         --color-info-tint:var(--p-info-100);
  --color-progress:var(--p-progress-700); --color-progress-tint:var(--p-progress-100);
  --color-warning:var(--p-warn-700);      --color-warning-tint:var(--p-warn-100);
  --color-success:var(--p-ok-700);        --color-success-tint:var(--p-ok-100);
  --color-danger:var(--p-danger-700);     --color-danger-tint:var(--p-danger-100);
  --color-shadow:var(--p-shadow-tint);

  --font-display:var(--p-font-display);--font-text:var(--p-font-text);--font-figures:var(--p-font-figures);
  --text-body:var(--p-text-base);--text-small:var(--p-text-xs);--text-lead:var(--p-text-1);
  --text-h3:var(--p-text-2);--text-h2:var(--p-text-4);--text-h1:var(--p-text-5);
  --leading-body:var(--p-leading-relaxed);--leading-heading:var(--p-leading-snug);--leading-display:var(--p-leading-tight);
  --tracking-heading:var(--p-tracking-tight);--tracking-label:var(--p-tracking-wide);

  --space-gutter:clamp(1rem,3vw,2rem);
  --space-section:clamp(4rem,8vw,7.5rem);
  --space-section-tight:clamp(2.5rem,5vw,4.5rem);

  --radius-pill:var(--p-radius-full);
  --border-control:var(--p-border-2);

  --elevation-1:0 1px 2px color-mix(in oklab,var(--color-shadow) 10%,transparent),0 1px 1px color-mix(in oklab,var(--color-shadow) 6%,transparent);
  --elevation-2:0 2px 4px color-mix(in oklab,var(--color-shadow) 8%,transparent),0 6px 14px color-mix(in oklab,var(--color-shadow) 10%,transparent);
  --elevation-3:0 4px 8px color-mix(in oklab,var(--color-shadow) 8%,transparent),0 16px 32px color-mix(in oklab,var(--color-shadow) 14%,transparent);
  --elevation-4:0 8px 16px color-mix(in oklab,var(--color-shadow) 12%,transparent),0 28px 56px color-mix(in oklab,var(--color-shadow) 24%,transparent);
  --elevation-up:0 -6px 20px color-mix(in oklab,var(--color-shadow) 16%,transparent);

  --motion-fast:var(--p-duration-1);--motion-base:var(--p-duration-2);--motion-slow:var(--p-duration-4);--motion-slower:var(--p-duration-5);
  --ease-enter:var(--p-ease-out);--ease-exit:var(--p-ease-in);--ease-move:var(--p-ease-in-out);--ease-press:var(--p-ease-press);

  --z-header:100;--z-callbar:200;--z-skiplink:900;
  --target-min:var(--p-size-48);--target-primary:var(--p-size-56);--target-hero:var(--p-size-64);
  --focus-ring:0 0 0 3px var(--color-focus-halo),0 0 0 6px var(--color-focus);
}

/* ---------- LAYER 3: COMPONENT TOKENS ---------- */
:root{
  --btn-font:var(--font-text);--btn-size:var(--text-body);--btn-height:var(--target-primary);
  --btn-pad-x:var(--p-space-6);--btn-radius:var(--radius-control);--btn-press-scale:.97;
  --btn-call-bg:var(--color-action);--btn-call-bg-hover:var(--color-action-hover);--btn-call-bg-pressed:var(--color-action-pressed);
  --btn-call-fg:var(--color-on-action);--btn-call-shadow:var(--elevation-2);--btn-call-shadow-hover:var(--elevation-3);
  --btn-call-height:var(--target-hero);
  --input-height:var(--target-primary);--input-radius:var(--radius-control);--input-bg:var(--color-surface-raised);
  --input-fg:var(--color-ink);--input-border:var(--color-border-strong);--input-border-error:var(--color-danger);
  --input-bg-error:var(--color-danger-tint);
  --card-radius:var(--radius-surface);--card-border:var(--color-divider);
  --pill-height:2.25rem;--pill-radius:var(--radius-pill);
  --callbar-height:var(--p-size-72);
  --callbar-pad-bottom:max(var(--p-space-2),env(safe-area-inset-bottom));
  --callbar-page-offset:calc(var(--callbar-height) + var(--callbar-pad-bottom));
  --callbar-hidden-y:calc(100% + var(--p-space-4));
}

@media (prefers-reduced-motion: reduce){
  :root{--motion-fast:0ms;--motion-base:0ms;--motion-slow:0ms;--motion-slower:0ms;--btn-press-scale:1}
}
@media (forced-colors: active){
  .btn{border:2px solid ButtonText}
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem;scroll-padding-bottom:calc(var(--callbar-page-offset) + 1rem)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--color-page);color:var(--color-ink);
  font-family:var(--font-text);font-size:var(--text-body);line-height:var(--leading-body);
  padding-bottom:var(--callbar-page-offset);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (min-width:64rem){body{padding-bottom:0}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);margin:0;text-wrap:balance;font-variation-settings:"opsz" 72}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid transparent;outline-offset:3px;box-shadow:var(--focus-ring);border-radius:var(--p-radius-3)}
.on-navy{--color-focus:var(--p-brand-500);--color-focus-halo:var(--p-navy-700)}
.on-navy .finder{--color-focus:var(--p-navy-500);--color-focus-halo:var(--p-n-0)}
.wrap{width:100%;max-width:var(--p-container);margin-inline:auto;padding-inline:var(--space-gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:var(--z-skiplink);background:var(--color-action);color:var(--color-on-action);
  padding:.75rem 1.25rem;border-radius:var(--radius-control);font-weight:700;text-decoration:none;transition:transform var(--motion-base) var(--ease-enter)}
.skip:focus{transform:translateY(5rem)}
.ico{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:var(--btn-height);
  padding:0 var(--btn-pad-x);border-radius:var(--btn-radius);border:var(--border-control) solid transparent;
  font:700 var(--btn-size)/1.1 var(--btn-font);text-decoration:none;cursor:pointer;white-space:nowrap;
  touch-action:manipulation;
  transition:background-color var(--motion-fast) var(--ease-move),transform var(--motion-base) var(--ease-press),box-shadow var(--motion-base) var(--ease-move),border-color var(--motion-fast) var(--ease-move);
}
.btn:active{transform:scale(var(--btn-press-scale))}
.btn--call{background:var(--btn-call-bg);color:var(--btn-call-fg);box-shadow:var(--btn-call-shadow)}
@media (hover:hover) and (pointer:fine){.btn--call:hover{background:var(--btn-call-bg-hover);box-shadow:var(--btn-call-shadow-hover)}}
.btn--call:active{background:var(--btn-call-bg-pressed)}
.btn--ghost-light{color:var(--color-ink-inverse);border-color:color-mix(in oklab,var(--p-n-0) 70%,transparent);background:transparent}
@media (hover:hover) and (pointer:fine){.btn--ghost-light:hover{background:color-mix(in oklab,var(--p-n-0) 10%,transparent);border-color:var(--p-n-0)}}
.btn--ghost{color:var(--color-ink);border-color:var(--color-border-strong);background:transparent}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:var(--color-action-tint)}}
.callnum{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.callnum small{font:400 var(--text-small)/1.2 var(--font-text)}
.lbl-full,.callbar b,.faq__phone,.foot__phone,.finder__fail a,input[type=tel]{font-family:var(--font-figures);font-feature-settings:"tnum" 1}
.callnum b{font:800 var(--text-lead)/1.05 var(--font-figures);font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:-.01em}

/* =====================================================================
   HEADER (light strip above the navy hero band)
   ===================================================================== */
.site-head{background:var(--color-surface-raised);border-bottom:2px solid var(--color-divider);position:relative;z-index:var(--z-header)}
.site-head__row{display:flex;align-items:center;gap:.75rem;min-height:4.5rem}
@media (min-width:64rem){.site-head__row{gap:1.5rem}}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--color-ink);flex:none;min-height:var(--target-min)}
.logo svg{width:2.5rem;height:2.5rem}
.logo__word{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + .6vw,1.4rem);letter-spacing:-.02em;line-height:1;font-weight:600}
.logo__word strong{font-weight:800}
.logo__word span{font-size:.75em;color:var(--color-ink-muted);font-weight:500}
.nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 .85rem;border-radius:var(--radius-control);
  text-decoration:none;font-weight:700;font-size:var(--text-small);color:var(--color-ink)}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:var(--color-surface-sunken)}}
.site-head .btn--call{margin-left:auto;min-height:var(--target-min);padding:0 1rem}
.site-head .btn--call .lbl-full{display:none}
@media (min-width:64rem){
  .nav{display:block}
  .site-head .btn--call{margin-left:0}
  .site-head .btn--call .lbl-full{display:inline}
  .site-head .btn--call .lbl-short{display:none}
}

/* =====================================================================
   HERO: full-width granat band with the order "finder"
   ===================================================================== */
.hero{position:relative;background:var(--color-brand-band);color:var(--color-ink-inverse);overflow:hidden;isolation:isolate}
.hero::before{ /* fine weave texture, like flag fabric */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background:
    radial-gradient(120% 90% at 85% -10%,color-mix(in oklab,var(--p-navy-200) 22%,transparent),transparent 55%),
    repeating-linear-gradient(90deg,color-mix(in oklab,var(--p-n-0) 3%,transparent) 0 1px,transparent 1px 6px);
}
.hero__spodek{position:absolute;z-index:-1;right:-6rem;top:1.5rem;width:min(46rem,90vw);color:var(--p-brand-500);opacity:.28;pointer-events:none;contain:paint}
@media (max-width:63.99rem){.hero__spodek{top:auto;bottom:6rem;width:120vw;right:-30vw;opacity:.18}}
@media (min-width:64rem){.hero__spodek{top:auto;bottom:4.5rem;right:-4rem;width:38rem}}
.hero__inner{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem);display:flex;flex-direction:column}
.hero h1{font-size:var(--text-h1);line-height:1.04;max-width:20ch;font-weight:800;font-variation-settings:"opsz" 96}
.hero h1 em{font-style:normal;color:var(--p-brand-500)}
.hero__lead{margin-top:1.25rem;font-size:var(--text-lead);line-height:1.45;max-width:46ch;color:color-mix(in oklab,var(--p-n-0) 92%,var(--p-navy-500))}

/* Finder = the hero form, behaving like a marketplace search bar */
.finder{margin-top:clamp(1.75rem,4vw,2.75rem);background:var(--color-surface-raised);color:var(--color-ink);
  border-radius:calc(var(--radius-surface) + .25rem);padding:.75rem;box-shadow:var(--elevation-4)}
.finder__grid{display:grid;gap:.75rem}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label{font-weight:700;font-size:var(--text-small);padding-left:.25rem}
.field__hint{font-size:var(--text-small);color:var(--color-ink-muted);padding-left:.25rem;line-height:1.35}
.field label .opt{font-weight:400;color:var(--color-ink-muted)}
.field__control{position:relative}
.field__control .ico{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--color-ink-muted);pointer-events:none}
.input{width:100%;min-height:var(--input-height);border:var(--border-control) solid var(--input-border);border-radius:var(--input-radius);
  background:var(--input-bg);color:var(--input-fg);font:400 var(--text-body)/1.2 var(--font-text);padding:0 1rem 0 3.1rem;
  transition:border-color var(--motion-fast) var(--ease-move),box-shadow var(--motion-fast) var(--ease-move);appearance:none}
.input::placeholder{color:var(--color-ink-muted);opacity:1}
select.input{padding-right:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F1D2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;cursor:pointer}
@media (hover:hover) and (pointer:fine){.input:hover{border-color:var(--color-ink)}}
.input:focus-visible{outline:3px solid transparent;border-color:var(--color-focus);box-shadow:var(--focus-ring);border-radius:var(--input-radius)}
.input[aria-invalid="true"]{border-color:var(--input-border-error);background-color:var(--input-bg-error)}
.field__err{display:none;align-items:flex-start;gap:.4rem;color:var(--color-danger);font-weight:700;font-size:var(--text-small);padding-left:.25rem}
.field__err .ico{width:1.15rem;height:1.15rem;margin-top:.15rem}
.field.is-error .field__err{display:flex}
.finder__submit{min-height:var(--btn-call-height);width:100%;font-size:var(--text-lead);border-radius:var(--radius-control)}
.finder__note{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center;justify-content:space-between;padding:.85rem .5rem .25rem;font-size:var(--text-small);color:var(--color-ink-muted)}
.finder__note strong{color:var(--color-ink)}
.finder__more{border:0;background:none;padding:.5rem .25rem;min-height:var(--target-min);font:700 var(--text-small)/1.2 var(--font-text);color:var(--p-navy-500);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.finder__extra{display:grid;gap:.75rem;padding:.25rem .25rem .5rem}
.finder__extra[hidden]{display:none}
.finder__extra .input{padding-left:1rem}
textarea.input{min-height:6rem;padding-top:.85rem;resize:vertical}
.finder__ok{display:none;padding:1.5rem 1.25rem;gap:1rem;align-items:flex-start}
.finder.is-sent .finder__grid,.finder.is-sent .finder__note,.finder.is-sent .finder__extra,.finder.is-sent .finder__legal,.finder.is-sent .finder__fail{display:none}
.finder.is-sent .finder__ok{display:flex}
.finder__ok .ico{width:2.25rem;height:2.25rem;color:var(--color-success);stroke-width:2.4}
.finder__ok h2{font-size:var(--text-h3)}
.finder__ok p{margin-top:.35rem}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.finder__legal{padding:0 .5rem .5rem;font-size:var(--text-small);color:var(--color-ink-muted)}
.finder__legal a,.finder__fail a{color:var(--p-navy-500);font-weight:700}
.finder__fail{margin:.25rem .5rem .75rem;padding:.85rem 1rem;border-radius:var(--radius-control);background:var(--color-danger-tint);color:var(--color-danger);font-weight:700}
.finder__fail a{color:var(--color-danger)}

@media (min-width:64rem){
  .finder{padding:.6rem;border-radius:calc(var(--radius-surface) + .5rem)}
  .finder__grid{grid-template-columns:1.25fr 1fr 1.05fr auto;align-items:start;gap:0}
  .finder__grid .field{padding:.4rem .5rem .5rem;position:relative}
  .finder__grid .field + .field::before{content:"";position:absolute;left:0;top:1.1rem;height:6.5rem;width:2px;background:var(--color-divider)}
  .finder__grid .input{border-color:var(--p-n-500);background-color:var(--color-surface)}
  .finder__grid .input:hover{border-color:var(--color-ink)}
  .finder__grid .input[aria-invalid="true"]{border-color:var(--input-border-error);background-color:var(--input-bg-error)}
  .finder__submit-wrap{padding:.5rem;align-self:end}
  .finder__submit{width:auto;padding:0 2rem;min-height:var(--target-hero)}
  .finder__extra{grid-template-columns:1fr 2fr;padding:.25rem .5rem .75rem}
}

.hero__alt{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.hero__alt p{font-size:var(--text-small);color:color-mix(in oklab,var(--p-n-0) 88%,var(--p-navy-500))}
.hero__alt .btn{min-height:var(--target-hero)}
@media (max-width:63.99rem){.hero__alt{margin-top:1.5rem}.hero__alt .btn{width:100%;justify-content:flex-start}}
@media (min-width:64rem){.hero__alt{order:1}}

/* Golden guarantee strip (signature) */
.goldbar{background:var(--p-brand-500);color:var(--color-on-action);position:relative}
.goldbar__list{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;list-style:none;margin:0 auto;padding-block:1.1rem}
.goldbar__list li{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:var(--text-small);line-height:1.25;min-height:2.75rem}
.goldbar__list li b{font-family:var(--font-figures);font-size:1.25em;font-weight:800;font-feature-settings:"tnum" 1}
.goldbar__list .ico{width:1.35rem;height:1.35rem;stroke-width:2.4}
.goldbar__list li:first-child{grid-column:1/-1}
@media (min-width:64rem){
  .goldbar__list{display:flex;justify-content:space-between;padding-block:.9rem}
  .goldbar__list li:first-child{grid-column:auto}
  .goldbar__list li + li{padding-left:1rem;border-left:2px solid color-mix(in oklab,var(--p-navy-700) 25%,transparent)}
}

/* =====================================================================
   FAMILOK atmosphere band
   ===================================================================== */
.atmo{position:relative;background:var(--p-navy-700)}
.atmo img{width:100%;height:clamp(14rem,34vw,26rem);object-fit:cover;object-position:center 60%;filter:saturate(.9) contrast(1.05)}
.atmo__cap{position:absolute;inset:auto 0 0 0;padding:4rem 0 1.25rem;background:linear-gradient(to top,color-mix(in oklab,var(--p-navy-700) 92%,transparent) 15%,transparent)}
.atmo__cap p{color:var(--p-n-0);font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);line-height:1.15;max-width:24ch}
@media (max-width:40rem){.atmo img{height:11rem}}

/* =====================================================================
   CATEGORIES: editorial bento. Telewizory as the wide featured tile,
   six photo tiles beside and below it. 2 rows on desktop; on phones the
   featured tile stays big and the rest become thumbnail rows.
   ===================================================================== */
.sec{padding-block:var(--space-section)}
.sec--tight{padding-block:var(--space-section-tight)}
.sec h2{font-size:var(--text-h2);font-weight:800;line-height:1.08}
.sec__lead{margin-top:.85rem;max-width:52ch;color:var(--color-ink-muted);font-size:var(--text-lead);line-height:1.45;text-wrap:pretty}
.num{font-family:var(--font-figures);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;font-variation-settings:"opsz" 16;letter-spacing:0;white-space:nowrap}

.bento{margin:2.25rem 0 0;padding:0;list-style:none;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.bento > li{display:flex;min-width:0}
.tile{position:relative;display:flex;flex-direction:column;width:100%;margin:0;padding:0;text-align:left;font:inherit;color:var(--color-ink);
  background:var(--color-surface-raised);border:var(--border-surface) solid var(--card-border);border-radius:var(--card-radius);cursor:pointer;overflow:hidden;
  transition:transform var(--motion-base) var(--ease-enter),border-color var(--motion-base) var(--ease-move),box-shadow var(--motion-slow) var(--ease-enter)}
.tile:focus-visible{outline:3px solid transparent;box-shadow:var(--focus-ring)}
.tile:active{transform:scale(.985)}
.tile__media{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--p-n-100)}
.tile__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-enter)}
.tile__body{display:flex;flex-direction:column;gap:1rem;flex:1;padding:1.25rem 1.35rem 1.35rem}
.tile__head{display:flex;align-items:center;gap:.8rem}
.tile__icon{flex:none;width:3rem;height:3rem;border-radius:.85rem;display:grid;place-items:center;background:var(--color-info-tint);color:var(--p-navy-500)}
.tile__icon svg{width:1.95rem;height:1.95rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile__t{font-family:var(--font-display);font-size:var(--p-text-1);font-weight:700;line-height:1.1;letter-spacing:var(--tracking-heading)}
.tile__info{display:flex;flex-direction:column;gap:.85rem}
.tile__faults{display:flex;flex-direction:column;gap:.35rem;font-size:var(--text-small);line-height:1.3;color:var(--color-ink-muted)}
.tile__faults > span{display:flex;align-items:baseline;gap:.6rem}
.tile__faults > span::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:2px;background:var(--p-brand-700);transform:translateY(-.12em)}
.tile__price{font-size:var(--text-small);color:var(--color-ink-muted)}
.tile__price b{font-family:var(--font-figures);font-size:1.4em;font-weight:800;color:var(--color-ink);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.tile__go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;white-space:nowrap;padding-top:.4rem;
  font-weight:700;color:var(--p-navy-500)}
.tile__go .ico{flex:none;width:2.25rem;height:2.25rem;padding:.45rem;border-radius:50%;background:transparent;border:1.5px solid var(--color-border);color:var(--p-navy-500);
  transition:transform var(--motion-base) var(--ease-enter),background-color var(--motion-base) var(--ease-move),border-color var(--motion-base) var(--ease-move)}
.tile:focus-visible .tile__go .ico{background:var(--p-brand-500);border-color:var(--p-brand-500);color:var(--color-on-action)}
.tile--photo .tile__icon{display:none}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-3px);border-color:var(--p-navy-200);box-shadow:var(--elevation-3)}
  .tile:hover .tile__media img{transform:scale(1.04)}
  .tile:hover .tile__go .ico{transform:translateX(3px);background:var(--p-brand-500);border-color:var(--p-brand-500);color:var(--color-on-action)}
}
@media (min-width:40rem){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__feature{grid-column:1 / -1}
  .tile--wide{flex-direction:row}
  .tile--wide .tile__media{flex:0 0 52%;aspect-ratio:auto;min-height:100%}
  .tile__media{aspect-ratio:896/640}
  .tile--photo .tile__icon{display:none}
}
@media (min-width:64rem){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem}
  .bento > li{grid-column:span 3}
  .bento > li.bento__feature{grid-column:span 6}
  .tile--wide .tile__body{padding:1.75rem 1.5rem 1.5rem}
  .tile--wide .tile__t{font-size:var(--p-text-2);font-weight:800}
  /* featured TV photo: wider crop, focal point between the screen and the technician */
  .tile--wide .tile__media{flex-basis:56%}
  .tile--wide .tile__media img{object-position:20% 50%}
}
@media (min-width:40rem){
  .tile--wide .tile__body{justify-content:center;gap:1.4rem}
  .tile--wide .tile__go{margin-top:0}
  .tile--wide .tile__faults{font-size:var(--text-body);gap:.5rem}
  .tile--wide .tile__price{font-size:var(--text-body)}
}
/* phones: featured photo tile (Telewizory), the other six as compact rows with a 96px square thumbnail */
@media (max-width:39.99rem){
  .bento{gap:.6rem;grid-template-columns:minmax(0,1fr)}
  .tile--wide .tile__media{aspect-ratio:16/9}
  .tile__body{gap:.75rem;padding:1rem 1.1rem 1.05rem}
  .tile--wide .tile__info{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem}
  .tile__go .ico{width:2rem;height:2rem;padding:.4rem}
  .bento > li:not(.bento__feature) .tile{flex-direction:row;align-items:center;padding:.5rem}
  .bento > li:not(.bento__feature) .tile__media{flex:0 0 6rem;width:6rem;height:6rem;aspect-ratio:1/1;border-radius:calc(var(--card-radius) - .5rem)}
  .bento > li:not(.bento__feature) .tile__body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3rem .75rem;padding:.25rem .5rem .25rem 1rem}
  .bento > li:not(.bento__feature) .tile__head,
  .bento > li:not(.bento__feature) .tile__info{grid-column:1}
  .bento > li:not(.bento__feature) .tile__t{font-size:1.2rem}
  .bento > li:not(.bento__feature) .tile__faults{display:none}
  .bento > li:not(.bento__feature) .tile__go{grid-column:2;grid-row:1 / span 2;margin:0;padding:0;font-size:0}
}

/* "Także serwisujemy": other company lines — icon tiles, no photos, no "od X zł" (priced on site) */
.cats-extra__h{margin-top:3rem;font-family:var(--font-display);font-size:var(--p-text-2);font-weight:800;line-height:1.1;letter-spacing:var(--tracking-heading)}
.cats-extra{margin:1.25rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)}
.cats-extra > li{display:flex;min-width:0}
.tile--icon{gap:.85rem;padding:1.1rem 1.2rem 1.15rem}
.tile--icon .tile__go{padding-top:.2rem}
@media (min-width:40rem){.cats-extra{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.cats-extra{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media (max-width:39.99rem){
  .tile--icon{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 .75rem;padding:.75rem .75rem .75rem 1rem}
  .tile--icon .tile__faults{display:none}
  .tile--icon .tile__go{grid-column:2;grid-row:1;margin:0;padding:0;font-size:0}
}
.cats-extra__gas{margin-top:1.25rem;padding:.85rem 1rem;border-radius:var(--radius-control);
  background:var(--color-warning-tint);color:var(--color-ink);font-size:var(--text-small);line-height:1.45;max-width:72ch}
.cats-extra__gas a{color:inherit;font-weight:800}

/* =====================================================================
   PROMISES + TECHNIK: ledger next to a portrait
   ===================================================================== */
.trust{background:var(--color-surface-raised);border-block:2px solid var(--color-divider)}
.trust__grid{display:grid;gap:2.5rem}
.tech{position:relative;max-width:26rem;margin:0}
.tech img{width:100%;aspect-ratio:640/832;object-fit:cover;border-radius:var(--radius-surface)}
.ledger{margin:2rem 0 0;display:grid;gap:0;border-top:3px solid var(--color-ink)}
.ledger__row{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;align-items:baseline;padding:1.1rem 0;border-bottom:2px solid var(--color-divider)}
.ledger__row dt{font-family:var(--font-figures);font-weight:800;font-size:var(--p-text-2);line-height:1;color:var(--p-navy-500);font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:-.02em}
.ledger__row dt small{display:block;font-size:max(.55em,1rem);font-weight:600;letter-spacing:0;margin-top:.2rem;color:var(--color-ink-muted)}
.ledger__row dd{margin:0}
.ledger__row dd strong{display:block;font-size:var(--text-body)}
.ledger__row dd span{display:block;color:var(--color-ink-muted);font-size:var(--text-small);line-height:1.45}
.ledger__row--key dt{color:var(--color-accent)}
.trust__group{margin-top:1.75rem;display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.1rem;background:var(--color-surface);border-radius:var(--radius-control);font-size:var(--text-small)}
.trust__group .ico{color:var(--p-navy-500);margin-top:.1rem}
@media (min-width:64rem){
  .trust__grid{grid-template-columns:minmax(18rem,26rem) 1fr;gap:4.5rem;align-items:start}
}

/* =====================================================================
   HOW IT WORKS: horizontal route with a stop line
   ===================================================================== */
.route{margin-top:2.75rem;position:relative;display:grid;gap:2rem;list-style:none;padding:0}
.route::before{content:"";position:absolute;left:1.5rem;top:1rem;bottom:1rem;width:4px;border-radius:4px;
  background:repeating-linear-gradient(180deg,var(--p-navy-500) 0 14px,transparent 14px 22px)}
.stop{position:relative;display:grid;grid-template-columns:3.25rem 1fr;gap:1.1rem;align-items:start}
.stop__dot{width:3.25rem;height:3.25rem;border-radius:50%;display:grid;place-items:center;background:var(--p-brand-500);color:var(--color-on-action);
  font:800 1.35rem/1 var(--font-figures);box-shadow:0 0 0 6px var(--color-page);position:relative;z-index:1}
.stop h3{font-size:var(--p-text-1);font-weight:700;margin-top:.5rem}
.stop p{margin-top:.4rem;color:var(--color-ink-muted);max-width:34ch}
.how__photo{margin-top:3rem;display:grid;gap:.75rem}
.how__photo img{width:100%;border-radius:var(--radius-surface);aspect-ratio:896/640;object-fit:cover}
@media (min-width:64rem){
  .route{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .route::before{left:1.6rem;right:1.6rem;top:1.55rem;bottom:auto;width:auto;height:4px;
    background:repeating-linear-gradient(90deg,var(--p-navy-500) 0 14px,transparent 14px 22px)}
  .stop{grid-template-columns:1fr;gap:.5rem}
  .how__photo{grid-template-columns:1.4fr 1fr;align-items:stretch}
  .how__photo img{height:100%}
}

/* =====================================================================
   STATUS PREVIEW: tracker with a clear current step + Android SMS thread
   (example data, labelled "Przykład")
   ===================================================================== */
.status{background:var(--color-surface-sunken)}
.status__grid{display:grid;gap:2.5rem;margin-top:2.5rem;align-items:start}
.tracker{background:var(--color-surface-raised);border:var(--border-surface) solid var(--card-border);border-radius:var(--radius-surface);padding:1.5rem 1.5rem .5rem;box-shadow:var(--elevation-2)}
.tracker__top{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem 1rem;padding-bottom:1.1rem;border-bottom:2px solid var(--color-divider)}
.tracker__no{font-size:var(--text-small);color:var(--color-ink-muted)}
.tracker__no .num{color:var(--color-ink);font-weight:700}
.tracker__what{margin-top:.2rem;font-family:var(--font-display);font-size:var(--p-text-1);font-weight:700;line-height:1.15}
.tag-example{flex:none;font:700 var(--text-small)/1 var(--font-text);color:var(--color-warning);background:var(--color-warning-tint);padding:.5rem .8rem;border-radius:var(--radius-pill)}
.steps{list-style:none;margin:1.35rem 0 0;padding:0}
.steps > li{position:relative;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:1rem;padding-bottom:1.15rem;color:var(--color-ink-muted)}
.steps > li::before{content:"";position:absolute;left:calc(1.125rem - 1px);top:2.5rem;bottom:.25rem;width:2px;border-radius:2px;background:var(--color-divider)}
.steps > li:last-child::before{display:none}
.steps > li.now::before,.steps > li:not(.done):not(.now)::before{background:none;width:0;border-left:2px dashed var(--p-n-500);border-radius:0}
.steps > li.now::before{top:calc(var(--now-dy) + 2.5rem)}
.steps > li.done::before{background:var(--color-success)}
.steps .mk{position:relative;z-index:1;width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;border:2px solid var(--color-border);background:var(--color-surface-raised)}
.steps > li:not(.done):not(.now) .mk{border-color:var(--p-n-500);border-style:dashed}
.steps .mk svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.steps > li > div > b{display:block;font-size:var(--text-body);line-height:1.3;padding-top:.3rem}
.steps > li > div > span{display:block;margin-top:.15rem;font-size:var(--text-small);line-height:1.4}
.steps > li.done{color:var(--color-ink)}
.steps > li.done > div > span{color:var(--color-ink-muted)}
.steps > li.done .mk{background:var(--color-success-tint);border-color:var(--color-success);color:var(--color-success)}
.steps > li.now{color:var(--color-ink)}
.steps > li.now .mk{background:var(--p-brand-500);border-color:var(--p-brand-800);color:var(--color-on-action);box-shadow:0 0 0 5px color-mix(in oklab,var(--p-brand-500) 35%,transparent)}
.steps > li.now{--now-dy:1.05rem}
.steps > li.now .mk{margin-top:var(--now-dy)}
.steps > li.now .mk svg{fill:currentColor;stroke:none}
.now__card{background:var(--color-action-tint);border:2px solid var(--p-brand-700);border-radius:var(--radius-control);padding:1rem 1.1rem 1.1rem}
.now__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem}
.now__head b{font-family:var(--font-display);font-size:var(--p-text-1);line-height:1.15}
.pill{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--pill-height);padding:.3rem .85rem;border-radius:var(--pill-radius);border:1px solid;font:700 var(--text-small)/1.1 var(--font-text)}
.pill svg{flex:none;width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pill--diag{background:var(--color-surface-raised);color:var(--p-navy-700);border-color:var(--p-brand-800)}
.now__sub{margin-top:.25rem;font-weight:700}
.now__price{margin-top:.8rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem}
.now__cost{font-family:var(--font-display);font-size:2rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums lining-nums}
.now__price small{font-size:var(--text-small);color:var(--color-ink-muted)}
.now__actions{display:grid;gap:.6rem;margin-top:1.1rem}
.now__actions .btn{min-height:var(--target-primary)}
@media (min-width:48rem){.now__actions{display:flex;flex-wrap:wrap}.now__actions .btn--call{flex:1 1 11rem}.now__actions .btn--ghost{flex:0 1 auto}}
.now__actions .btn--ghost{background:var(--color-surface-raised);border-width:1px;border-color:var(--color-border)}
.now__note{margin-top:.75rem;font-size:var(--text-small);font-weight:700;color:var(--color-success)}
.now__note:empty{margin:0}

@media (prefers-reduced-motion: no-preference){
  .steps > li.now .mk{animation:nowpulse 2.4s var(--p-ease-in-out) infinite}
  @keyframes nowpulse{50%{box-shadow:0 0 0 9px color-mix(in oklab,var(--p-brand-500) 12%,transparent)}}
}

/* Android Messages style phone */
.sms{width:100%;max-width:25rem;justify-self:center}
.droid{display:flex;flex-direction:column;overflow:hidden;background:var(--p-n-0);border:10px solid var(--p-navy-700);border-radius:2.25rem;box-shadow:var(--elevation-4)}
.droid__bar{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem .8rem;background:var(--p-n-50);border-bottom:1px solid var(--color-divider)}
.droid__back{width:1.4rem;height:1.4rem;fill:none;stroke:var(--color-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.droid__ava{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--p-navy-500);color:var(--p-n-0);font:800 1.1rem/1 var(--font-display)}
.droid__who b{display:block;font-size:1.05rem;line-height:1.2}
.droid__who small{display:block;font-size:.9rem;color:var(--color-ink-muted)}
.droid__thread{display:flex;flex-direction:column;gap:.7rem;padding:.9rem .9rem 1.2rem}
.droid__day{align-self:center;margin:.2rem 0 0;font-size:.9rem;font-weight:700;color:var(--color-ink-muted)}
.msg{align-self:flex-start;max-width:90%}
.msg p{background:var(--p-n-100);padding:.75rem .95rem;border-radius:1.25rem 1.25rem 1.25rem .35rem;font-size:var(--text-small);line-height:1.45}
.msg--key p{background:var(--color-info-tint);box-shadow:inset 0 0 0 2px var(--p-navy-200)}
.msg time{display:block;margin:.3rem 0 0 .7rem;font-size:.9rem;color:var(--color-ink-muted)}
.msg__link{display:inline-block;font-weight:700;color:var(--p-navy-500);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.droid__input{padding:.2rem .8rem .9rem}
.droid__input span{display:block;padding:.75rem 1.1rem;border-radius:var(--radius-pill);background:var(--p-n-100);color:var(--color-ink-muted);font-size:.95rem}
.status__points{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:1.25rem 0 0;list-style:none;padding:0;font-weight:700}
.status__points li{display:flex;gap:.5rem;align-items:flex-start}
#status .sec__lead{max-width:62ch}
.sms-quote{display:none;margin:0}
.sms-quote p{background:var(--color-info-tint);box-shadow:inset 0 0 0 2px var(--p-navy-200);padding:.8rem 1rem;border-radius:1.25rem 1.25rem 1.25rem .35rem;font-size:var(--text-small);line-height:1.45}
.sms-quote figcaption{margin:.35rem 0 0 .7rem;font-size:var(--text-small);color:var(--color-ink-muted)}
@media (max-width:47.99rem){.sms{display:none}.sms-quote{display:block}}
.status__points .ico{color:var(--color-success);margin-top:.15rem}
@media (max-width:39.99rem){
  .tracker{padding:1.15rem .9rem .25rem}
  .steps > li{grid-template-columns:2rem minmax(0,1fr);gap:.7rem}
  .steps > li::before{left:calc(1rem - 1px);top:2.25rem}
  .steps .mk{width:2rem;height:2rem}
  .now__card{padding:.85rem .8rem .9rem}
  .pill{font-size:.95rem;padding:.3rem .7rem;white-space:nowrap}
  .now__actions .btn{width:100%}
  .steps > li.now{--now-dy:.75rem}
  .steps > li.now::before{top:calc(var(--now-dy) + 2.25rem)}
}
@media (min-width:64rem){
  .status__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:3.5rem}
  .sms{justify-self:start}
}

/* =====================================================================
   CITIES: real map (powiat + voivodeship borders, real city coordinates)
   + checker + balanced list. Map and list highlight each other.
   ===================================================================== */
.cities__grid{display:grid;gap:2rem;margin-top:2.5rem}
.map{position:relative;margin:0;padding:.75rem .75rem .25rem;overflow:hidden;border-radius:var(--radius-surface);
  background:radial-gradient(120% 90% at 55% 45%,var(--p-navy-500),var(--p-navy-700))}
.map__svg{display:block;width:100%;height:auto}
.city.core text{opacity:0}
.city.core.is-peek text,.city.core.is-hit text{opacity:1}
.map-powiaty{fill:none;stroke:color-mix(in oklab,var(--p-navy-200) 42%,transparent);stroke-width:1.2;stroke-linejoin:round}
.map-woj{fill:none;stroke:var(--p-brand-500);stroke-width:2.6;stroke-dasharray:11 7;stroke-linejoin:round;opacity:.9}
.city{cursor:pointer}
.city__hit{fill:transparent}
.city__dot{fill:var(--p-n-0);stroke:var(--p-navy-700);stroke-width:2;transition:fill var(--motion-base) var(--ease-move)}
.city.major .city__dot{fill:var(--p-brand-500)}
.city text{fill:var(--p-n-0);font:700 20px var(--font-text);paint-order:stroke;stroke:var(--p-navy-700);stroke-width:5px;stroke-linejoin:round;pointer-events:none;
  transition:opacity var(--motion-base) var(--ease-move),fill var(--motion-base) var(--ease-move)}
.city.major text{font:800 25px var(--font-display);stroke-width:6px}
.city__ring{fill:none;stroke:var(--p-brand-500);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);
  transition:opacity var(--motion-base) var(--ease-enter),transform var(--motion-slow) var(--ease-enter)}
.city.is-peek .city__ring{opacity:.55;transform:scale(.85)}
.city.is-hit .city__ring{opacity:1;transform:none}
.city.is-hit .city__dot,.city.is-peek .city__dot{fill:var(--p-brand-500)}
.city.is-hit text{fill:var(--p-brand-500);opacity:1}
@media (hover:hover) and (pointer:fine){.city:hover .city__dot{fill:var(--p-brand-500)}.city:hover text{opacity:1}}
.map-scale rect{fill:var(--p-n-0);stroke:var(--p-n-0);stroke-width:1.5}
.map-scale rect.alt{fill:transparent}
.map-scale text{fill:var(--p-n-0);font:700 18px var(--font-text);paint-order:stroke;stroke:var(--p-navy-700);stroke-width:4px}
.map__legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding:.5rem .5rem .6rem;color:var(--p-n-0);font-size:.875rem}
.map__legend span{display:inline-flex;align-items:center;gap:.45rem}
.map__legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--p-n-0)}
.map__legend i.g{background:var(--p-brand-500)}
.map__legend i.ln{width:1.4rem;height:0;border-radius:0;background:none;border-top:2px solid color-mix(in oklab,var(--p-navy-200) 70%,transparent)}
.map__legend i.ln--woj{border-top:3px dashed var(--p-brand-500)}
/* phones: the map renders small, so only the 6 major labels stay; others appear on tap, hover or highlight */
@media (max-width:47.99rem){
  .map{padding:.5rem .5rem 0}
  .city:not(.major) text{opacity:0;font-size:30px;stroke-width:8px}
  .city.major text{font-size:34px;stroke-width:8px}
  .city.is-peek text,.city.is-hit text{opacity:1}
  .map-scale text{font-size:26px}
  .city{pointer-events:none;cursor:default}
}
.cities__side{display:grid;gap:1.25rem;align-content:start}
.cities__call{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding-top:1.1rem;border-top:1px solid var(--color-divider)}
.cities__call p{font-size:var(--text-small);color:var(--color-ink-muted)}
.checker{display:grid;gap:.75rem}
.checker label{font-weight:700;font-size:var(--text-lead);line-height:1.2;font-family:var(--font-display)}
.checker .input{padding-left:1rem}
.checker__row{display:grid;gap:.75rem}
.checker__out{display:block;min-height:3.25rem;padding:.85rem 1rem;border-radius:var(--radius-control);font-weight:700}
.checker__out:empty{min-height:0;padding:0}
.checker__out a{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 .25rem;font-weight:800;color:inherit;text-underline-offset:3px}
.checker__out.is-yes{background:var(--color-success-tint);color:var(--color-success)}
.checker__out.is-ask{background:var(--color-info-tint);color:var(--color-info)}
.cities__tip{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-small);color:var(--color-ink-muted)}
.cities__tip .ico{flex:none;color:var(--p-navy-500);margin-top:.15rem}
/* list: chips on phones (names never break), balanced 3 columns from tablet up */
.towns-wrap{margin-top:2.5rem}
.towns{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.towns-more{margin-top:.75rem}
.towns-more > summary{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 .25rem;font-weight:700;color:var(--p-navy-500);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.towns-more > summary:focus-visible{outline:3px solid transparent;box-shadow:var(--focus-ring);border-radius:var(--radius-control)}
.towns-more[open] > summary{margin-bottom:.6rem}
.towns li{display:flex;min-width:0}
.towns button{appearance:none;display:inline-flex;align-items:center;gap:.6rem;min-height:var(--target-min);margin:0;padding:0 1rem;white-space:nowrap;
  font:inherit;color:var(--color-ink);text-align:left;cursor:pointer;background:var(--color-surface-raised);border:2px solid var(--color-divider);border-radius:var(--radius-pill);
  transition:background-color var(--motion-base) var(--ease-move),border-color var(--motion-base) var(--ease-move),color var(--motion-base) var(--ease-move)}
.towns button::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--p-n-0);box-shadow:inset 0 0 0 2px var(--p-navy-500)}
.towns li.main button{font-weight:700}
.towns li.main button::before{width:.75rem;height:.75rem;background:var(--p-brand-500);box-shadow:inset 0 0 0 2px var(--p-brand-800)}
.towns button:focus-visible{outline:3px solid transparent;box-shadow:var(--focus-ring)}
.towns button[aria-pressed="true"]{background:var(--p-navy-500);border-color:var(--p-navy-500);color:var(--p-n-0)}
.towns button[aria-pressed="true"]::before{background:var(--p-brand-500);box-shadow:none}
@media (hover:hover) and (pointer:fine){.towns button:hover{border-color:var(--p-navy-500);background:color-mix(in oklab,var(--p-navy-500) 8%,var(--color-surface-raised))}
  .towns button[aria-pressed="true"]:hover{background:var(--p-navy-500)}}
@media (min-width:40rem){
  .checker__row{grid-template-columns:1fr auto}
  .towns-wrap{padding-top:1.25rem;border-top:3px solid var(--color-ink)}
  .towns-more > summary{display:none}
  .towns-more{margin-top:.5rem}
  .towns--rest{display:block;columns:3;column-gap:2rem}
  .towns--rest li{break-inside:avoid}
  .towns--rest button{width:100%;border:0;border-radius:var(--radius-control);background:none;padding:0 .75rem}
  .towns--rest button[aria-pressed="true"]{background:var(--p-navy-500)}
  @media (hover:hover) and (pointer:fine){.towns--rest button:hover{background:color-mix(in oklab,var(--p-navy-500) 8%,transparent)}}
}
@media (min-width:64rem){.cities__grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:3rem;align-items:start}.cities__side{align-self:center}}

/* =====================================================================
   REVIEWS: Google widget (mockup data, badge "Przykład"; production must
   render from Google Places API, see HTML comment)
   ===================================================================== */
.reviews__top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.reviews__top .tag-example{flex:0 1 auto;line-height:1.3}
.reviews__summary{margin-top:1.75rem;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.35rem 1rem;
  padding:1.25rem 1.35rem;background:var(--color-surface-raised);border:var(--border-surface) solid var(--card-border);border-radius:var(--card-radius)}
.gmark{grid-row:1 / span 2;width:3rem;height:3rem}
.reviews__score{display:flex;align-items:center;gap:.75rem}
.reviews__score .num{font-family:var(--font-figures);font-weight:800;font-size:var(--p-text-3);line-height:1;color:var(--color-ink)}
.reviews__count{color:var(--color-ink-muted);font-size:var(--text-small)}
.reviews__all{grid-column:1 / -1;margin-top:.9rem;justify-self:start;white-space:normal}
.stars{display:inline-flex;gap:.15rem;color:var(--p-brand-700)}
.stars svg{width:1.5rem;height:1.5rem;fill:currentColor}
.stars--sm svg{width:1.15rem;height:1.15rem}
.reviews__list{margin:1.25rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}
.review{display:flex;flex-direction:column;gap:.85rem;padding:1.35rem 1.35rem 1.5rem;background:var(--color-surface-raised);
  border:var(--border-surface) solid var(--card-border);border-radius:var(--card-radius)}
.review__who{display:flex;align-items:center;gap:.85rem}
.review__avatar{flex:none;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--p-navy-500);color:var(--p-brand-500);
  font:800 1.3rem/1 var(--font-display)}
.review__who p{display:flex;flex-direction:column;line-height:1.3}
.review__who strong{font-size:var(--text-body)}
.review__who p span{font-size:var(--text-small);color:var(--color-ink-muted)}
.review__text{line-height:var(--leading-body);text-wrap:pretty}
@media (min-width:48rem){
  .reviews__summary{grid-template-columns:auto auto 1fr auto;gap:1.25rem}
  .gmark{grid-row:auto}
  .reviews__all{grid-column:auto;margin-top:0;justify-self:end}
}
@media (min-width:64rem){
  .reviews__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq__grid{display:grid;gap:2rem}
.faq__list{display:grid;gap:.75rem}
.qa{border:var(--border-surface) solid var(--card-border);border-radius:var(--radius-control);background:var(--color-surface-raised)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:var(--target-primary);padding:1rem 1.25rem;font-weight:700;font-size:var(--text-body)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{transition:transform var(--motion-base) var(--ease-enter);color:var(--p-navy-500)}
.qa[open] summary .ico{transform:rotate(45deg)}
.qa[open]{border-color:var(--p-navy-200)}
.qa__a{padding:0 1.25rem 1.25rem;color:var(--color-ink-muted);max-width:62ch}
.faq__phone{font-weight:700;color:var(--color-ink)}
.faq__grid{max-width:48rem;margin-inline:auto;grid-template-columns:1fr}

/* =====================================================================
   FINAL CTA (granat band, form again)
   ===================================================================== */
.final{background:var(--color-brand-band);color:var(--color-ink-inverse);position:relative;overflow:hidden;isolation:isolate}
.final .hero__spodek{right:auto;left:-10rem;top:auto;bottom:-4rem;width:40rem;opacity:.3}
.final__grid{display:grid;gap:2.5rem;padding-block:var(--space-section)}
.final h2{font-size:var(--text-h2);font-weight:800;line-height:1.06;max-width:16ch}
.final h2 em{font-style:normal;color:var(--p-brand-500)}
.final__lead{margin-top:1rem;font-size:var(--text-lead);line-height:1.45;max-width:36ch;color:color-mix(in oklab,var(--p-n-0) 90%,var(--p-navy-500))}
.final__call{margin-top:2rem}
.final__call .btn{min-height:4.5rem;padding:0 1.75rem}
.final .finder{margin-top:0}
.final .finder__grid{grid-template-columns:1fr;gap:.75rem}
.final .finder__grid .field{padding:0}
.final .finder__grid .field + .field::before{display:none}
.final .finder__submit{width:100%}
.final .finder__submit-wrap{padding:0}
.final .finder__grid .input{border-color:var(--input-border);background-color:var(--input-bg)}
@media (min-width:64rem){.final__grid{grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}.final .finder{padding:1.25rem}}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{background:var(--p-navy-700);color:color-mix(in oklab,var(--p-n-0) 90%,var(--p-navy-700));font-size:var(--text-small);border-top:6px solid var(--p-brand-500)}
.foot__grid{display:grid;gap:2rem;padding-block:3rem 2rem}
.foot .logo{color:var(--p-n-0)}
.foot .logo__word span{color:var(--p-navy-200)}
.foot h2{font:700 var(--text-body)/1.2 var(--font-display);color:var(--p-n-0);margin-bottom:.75rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.foot a{display:inline-flex;align-items:center;min-height:var(--target-min);text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--p-n-0)}}
.foot__phone{font:800 var(--p-text-2)/1 var(--font-figures);color:var(--p-brand-500);font-feature-settings:"tnum" 1}
.foot__legal{border-top:1px solid color-mix(in oklab,var(--p-n-0) 18%,transparent);padding-block:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
@media (min-width:64rem){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* =====================================================================
   STICKY CALL BAR
   ===================================================================== */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-callbar);background:var(--p-navy-700);
  padding:.5rem var(--space-gutter) var(--callbar-pad-bottom);box-shadow:var(--elevation-up);border-top:3px solid var(--p-brand-500);
  transform:translateY(0);transition:transform var(--motion-slow) var(--ease-enter)}
.callbar__row{display:grid;grid-template-columns:1.4fr 1fr;gap:.5rem;max-width:var(--p-container);margin-inline:auto}
.callbar .btn{min-height:var(--target-primary);padding:0 .75rem;font-size:var(--text-body)}
.callbar .btn--call b{font-family:var(--font-figures);font-size:1.25rem;font-feature-settings:"tnum" 1}
.callbar__promise{display:none}
@media (max-width:30rem){.callbar .btn--call .cb-lbl{display:none}.callbar .btn{gap:.5rem;padding:0 .5rem}.callbar .btn--ghost-light{white-space:normal;text-align:center;line-height:1.1}}
@media (min-width:64rem){
  .callbar{transform:translateY(var(--callbar-hidden-y));visibility:hidden;transition:transform var(--motion-base) var(--ease-exit),visibility 0s linear var(--motion-base)}
  .callbar.is-on{transform:translateY(0);visibility:visible;transition:transform var(--motion-slow) var(--ease-enter),visibility 0s}
  .callbar__row{grid-template-columns:1fr auto auto;align-items:center}
  .callbar__promise{display:block;color:var(--p-n-0);font-weight:700}
  .callbar .btn{padding:0 1.5rem;font-size:var(--text-body)}
}
/* hidden while a form field has focus (keyboard) and over the final band, which has its own call + form */
.callbar.is-hidden,.callbar.is-hidden-final{transform:translateY(var(--callbar-hidden-y));visibility:hidden;transition:transform var(--motion-base) var(--ease-exit),visibility 0s linear var(--motion-base)}

/* =====================================================================
   MOTION: one orchestrated hero entrance + light scroll reveals
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .hero__spodek .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s var(--p-ease-in-out) .15s forwards}
  .hero__spodek .draw:nth-child(2n){animation-delay:.35s}
  .hero__spodek .draw:nth-child(3n){animation-delay:.55s}
  @keyframes draw{to{stroke-dashoffset:0}}
  /* entrance moves only, never hides: h1 and form are visible from first paint */
  .rise{transform:translateY(14px);animation:rise .6s var(--p-ease-out) forwards}
  .rise--2{animation-delay:.08s}.rise--3{animation-delay:.16s}.rise--4{animation-delay:.24s}
  @keyframes rise{to{transform:none}}
  /* scroll reveal enhances visible content; unsupported browsers just show it */
  @supports (animation-timeline:view()){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
}

/* =====================================================================
   WORDPRESS — dodatki motywu (poza makietą szablonu B)
   Formularz: zgoda, honeypot, Turnstile; podstrony SEO; treść stron; WP.
   ===================================================================== */
picture{display:contents}
picture > source{display:none} /* przy display:contents <source> stawałby się elementem siatki */
.wp-site-blocks{padding:0}

/* Zgoda RODO w formularzu (zastępuje akapit finder__legal z makiety) */
.finder__consent{padding:.25rem .5rem .5rem;gap:.25rem}
.field .consent{display:flex;align-items:flex-start;gap:.65rem;font-weight:400;font-size:var(--text-small);color:var(--color-ink-muted);line-height:1.4;cursor:pointer;padding-left:0}
.consent input{flex:none;width:1.5rem;height:1.5rem;margin:.05rem 0 0;accent-color:var(--p-navy-500);cursor:pointer}
.consent input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.consent a{color:var(--p-navy-500);font-weight:700}
.finder__consent.is-error .consent input{outline:2px solid var(--color-danger);outline-offset:2px}
.finder.is-sent .finder__consent,.finder.is-sent .finder__captcha{display:none}
.finder__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.finder__captcha{padding:0 .5rem .5rem}
.finder__captcha:empty{display:none}

/* Opinie: źródło i wygaszone gwiazdki */
.reviews__source{font:700 var(--text-small)/1 var(--font-text);color:var(--color-ink-muted)}
.stars svg.is-off{opacity:.28}
.review__who a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Podstrony SEO */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;list-style:none;margin:0 0 1rem;padding:0;font-size:var(--text-small);color:color-mix(in oklab,var(--p-n-0) 85%,var(--p-navy-500))}
.crumbs li + li::before{content:"/";margin-right:.5rem;opacity:.6}
.crumbs a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.map--mini .city:not(.is-hit) text{display:none}
.map--mini .city{pointer-events:none}
.local__h{font-size:var(--text-lead);margin-top:1.75rem}
.local__links{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.local__links a,.local__home a{color:var(--p-navy-500);font-weight:700;text-underline-offset:3px}
.local__home{margin-top:1.25rem}
.landing__body:has(.wp-block-post-content:empty){display:none}

/* Treść stron (polityka prywatności, regulamin, 404) */
.ts-prose > *{max-width:46rem}
.ts-prose > * + *,.ts-prose .wp-block-post-content > * + *{margin-block-start:1.15em}
.ts-prose h1{font-size:var(--text-h2)}
.ts-prose h2{font-size:var(--text-h3);margin-block-start:2em}
.ts-prose h3{font-size:var(--text-lead)}
.ts-prose a{color:var(--p-navy-500);font-weight:700;text-underline-offset:3px}
.ts-prose ul,.ts-prose ol{padding-left:1.25em}

/* Baner zgody na cookies (inc/tracking.php + assets/js/consent.js). Nad paskiem „Zadzwoń”, bez blokowania strony. */
:root{--z-cc:300}
.cc{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cc);padding:0 var(--space-gutter) max(var(--p-space-3),env(safe-area-inset-bottom));pointer-events:none}
.cc[hidden]{display:none}
.cc__inner{pointer-events:auto;max-width:44rem;max-height:min(85vh,40rem);overflow:auto;overscroll-behavior:contain;
  background:var(--color-surface-raised);color:var(--color-ink);border:var(--border-surface) solid var(--color-divider);
  border-top:4px solid var(--p-brand-500);border-radius:var(--radius-surface);box-shadow:var(--elevation-4);padding:var(--p-space-5) var(--p-space-5) var(--p-space-4)}
.cc:focus-visible{box-shadow:none}
.cc:focus-visible .cc__inner{box-shadow:var(--focus-ring),var(--elevation-4)}
.cc__title{font:800 var(--text-lead)/1.15 var(--font-display);letter-spacing:var(--tracking-heading);margin-bottom:.5rem}
.cc__desc{font-size:var(--text-small);line-height:1.5;color:var(--color-ink-muted)}
.cc__desc a,.cc__opt a{color:var(--p-navy-500);font-weight:700;text-underline-offset:3px}
.cc__prefs{margin-top:1rem}
.cc__prefs fieldset{border:0;margin:0;padding:0;display:grid;gap:.5rem}
.cc__prefs legend{font-weight:700;margin-bottom:.5rem;padding:0}
.cc__opt{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border:1px solid var(--color-divider);border-radius:var(--radius-control);
  background:var(--color-surface);font-size:var(--text-small);line-height:1.4;cursor:pointer}
.cc__opt input{flex:none;width:1.5rem;height:1.5rem;margin:.05rem 0 0;accent-color:var(--p-navy-500);cursor:pointer}
.cc__opt input:disabled{cursor:not-allowed}
.cc__opt input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.cc__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}
.cc__btn{min-height:var(--target-min);padding:0 1rem;white-space:normal;text-align:center;line-height:1.15}
.cc__actions .btn--ghost{grid-column:1 / -1}
.cc__actions [hidden]{display:none}
@media (min-width:48rem){
  .cc{padding-bottom:var(--p-space-5)}
  .cc__inner{margin-left:0}
  .cc__actions{grid-template-columns:auto auto 1fr}
  .cc__actions .btn--ghost{grid-column:auto;justify-self:end}
}
/* Gdy baner jest otwarty, pasek „Zadzwoń” chowa się pod nim (nie zasłaniają się nawzajem). */
.has-cc .callbar{visibility:hidden}
.foot__btn{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
@media (hover:hover) and (pointer:fine){.foot__btn:hover{text-decoration:underline;text-underline-offset:3px;color:var(--p-n-0)}}
.city-pages{margin-top:1.5rem}
.city-pages__list{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.25rem 1.5rem;margin-top:1rem}
.city-pages__list a{display:inline-flex;align-items:center;min-height:var(--target-min)}