/* Generated from theme sources. Do not edit. */

/* css/ds/fonts.css */
/* Manrope — self-hosted woff2, copied verbatim from the theme
   (wp-content/themes/mato-efekt/assets/fonts/). Weights in use: 400, 600, 700, 800.
   The latin-ext subsets are required: all product copy is Polish. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("../../assets/fonts/manrope-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("../../assets/fonts/manrope-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("../../assets/fonts/manrope-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("../../assets/fonts/manrope-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../../assets/fonts/manrope-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../../assets/fonts/manrope-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("../../assets/fonts/manrope-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("../../assets/fonts/manrope-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* css/ds/colors.css */
/* Colors — base palette + semantic aliases, verbatim from the theme's :root.
   The palette is deliberately tiny: two brand colors, one neutral, three surfaces.
   Green is an ACCENT (underline, bullet, arrow, active state), not a text color
   on light backgrounds — see readme.md → Visual foundations. */
:root{
  /* Base palette */
  --brand-navy:#0f2533;
  --brand-green:#54c26b;
  --neutral-white:#ffffff;
  --neutral-600:#66737c;
  --surface-soft:#f4f6f7;
  --border-default:#dce2e6;
  --surface-success-soft:#eaf6ee;

  /* Deep navy used for the footer and every dark hero band */
  --brand-navy-deep:#0a1a24;
  /* Green that passes WCAG AA (4.5:1) as small text on white, --surface-soft
     and --surface-success-soft. The bright --brand-green stays an accent. */
  --brand-green-text:#1f7a38;
  /* Print / PDF body grey — darker than --neutral-600 for paper */
  --neutral-700:#4d5b64;

  /* Backgrounds */
  --background-primary:var(--neutral-white);
  --background-secondary:var(--surface-soft);
  --background-inverse:var(--brand-navy);
  --background-inverse-deep:var(--brand-navy-deep);
  --background-success:var(--surface-success-soft);

  /* Text */
  --text-primary:var(--brand-navy);
  /* --neutral-600 is ~4.5:1 on white but fails on --surface-soft / mint cards. */
  --text-secondary:var(--neutral-700);
  --text-inverse:var(--neutral-white);
  --text-inverse-secondary:rgba(255,255,255,0.72);
  --text-inverse-muted:rgba(255,255,255,0.48);
  --text-effect:var(--brand-green);

  /* Actions */
  --action-primary:var(--brand-navy);
  --action-primary-text:var(--neutral-white);
  --action-accent:var(--brand-green);
  --action-accent-text:var(--brand-navy);

  /* Borders & data */
  --border-strong:var(--neutral-600);
  --border-inverse:rgba(255,255,255,0.12);
  --border-inverse-strong:rgba(255,255,255,0.28);
  --data-primary:var(--brand-navy);
  --data-positive:var(--brand-green);

  /* Feedback — the only reds in the system (form validation, comparison "no") */
  --feedback-error-border:#c44b4b;
  --feedback-error-text:#b42318;
  --feedback-negative:#c45c5c;

  /* Hairlines drawn on light grounds inside sections (hero rules, dividers) */
  --rule-light:rgba(15,37,51,0.12);
  --rule-faint:rgba(15,37,51,0.06);
  --grid-line:rgba(15,37,51,0.04);
  --logo-muted:rgba(15,37,51,0.38);
}

/* css/ds/typography.css */
/* Typography — one family, four weights, fluid display sizes.
   Values are the theme's exact clamp() expressions and letter-spacing. */
:root{
  --font:"Manrope",system-ui,sans-serif;
  --font-sans:var(--font);

  --weight-regular:400; /* @kind other */
  --weight-semibold:600; /* @kind other */
  --weight-bold:700; /* @kind other */
  --weight-extrabold:800; /* @kind other */

  /* Body */
  --body-size:16px;
  --body-line:1.625; /* @kind other */

  /* Display / headings */
  --h1-size:clamp(2.5rem,5vw,3.5rem);
  --h1-line:1.14; /* @kind other */
  --h1-weight:800; /* @kind other */
  --h1-tracking:-0.03em; /* @kind other */

  /* Hero h1 is tighter and smaller than a generic h1 */
  --hero-h1-size:clamp(2.1rem,4vw,3.15rem);
  --hero-h1-line:1.1; /* @kind other */
  --hero-h1-tracking:-0.035em; /* @kind other */

  --h2-size:clamp(2rem,3.5vw,2.5rem);
  --h2-line:1.2; /* @kind other */
  --h2-weight:700; /* @kind other */
  --h2-tracking:-0.025em; /* @kind other */

  --h3-size:1.375rem;
  --h3-line:1.35; /* @kind other */
  --h3-weight:700; /* @kind other */
  --h3-tracking:-0.02em; /* @kind other */

  /* Lead paragraph under a heading */
  --lead-size:clamp(1.125rem,1.5vw,1.25rem);
  --lead-line:1.5; /* @kind other */
  --lead-measure:40rem; /* @kind other */

  /* Eyebrow — uppercase label with a 2px green underline */
  --eyebrow-size:12px;
  --eyebrow-line:1.33; /* @kind other */
  --eyebrow-weight:600; /* @kind other */
  --eyebrow-tracking:0.08em; /* @kind other */

  /* Card / UI text */
  --card-title-size:1.1875rem;
  --card-body-size:0.9375rem;
  --card-body-line:1.55; /* @kind other */
  --meta-size:0.8125rem;
  --meta-line:1.4; /* @kind other */

  /* Big numbers (proof stats, case stats) */
  --stat-size:clamp(1.75rem,2.4vw,2.35rem);
  --stat-line:1.05; /* @kind other */
  --stat-tracking:-0.03em; /* @kind other */
}

/* css/ds/spacing.css */
/* Layout & spacing — container, section rhythm, card padding.
   The theme has no abstract 4/8 scale; it uses these named steps. */
:root{
  --container:1240px;
  --container-gutter:20px;          /* < 768px  */
  --container-gutter-md:32px;       /* >= 768px */
  --container-gutter-lg:80px;       /* >= 1200px */

  --header-h:80px;
  --hero-h:640px;                   /* 680px at >= 1400px */

  /* Vertical rhythm */
  --section-y:80px;                 /* < 1024px */
  --section-y-lg:112px;             /* >= 1024px */
  --section-head-gap:48px;
  --section-head-measure:42rem; /* @kind other */

  /* Grids */
  --grid-gap:20px;
  --grid-gap-lg:22px;

  /* Card interiors */
  --card-pad:28px;
  --card-pad-lg:36px;
  --form-pad:28px;
  --form-pad-lg:32px;

  /* Controls */
  --control-h:48px;
  --control-pad-x:22px;
  --control-pad-y:12px;
  --tap-min:48px;

  /* Icon containers */
  --icon-tile:52px;
  --icon-tile-glyph:28px;
  --icon-glyph:24px;
}

/* css/ds/radius.css */
/* Corner radii — five steps plus a pill. Nothing is fully square except
   the tiny 1.5–3px green bullet/marker shapes. */
:root{
  --radius-small:8px;    /* stat tiles, mobile-nav rows, menu button */
  --radius-button:12px;  /* buttons, inputs, icon tiles */
  --radius-medium:16px;  /* cards, FAQ items, contact points */
  --radius-large:24px;   /* case cards, photos, forms, panels */
  --radius-pill:999px;   /* tags, badges */
  --radius-marker:3px;   /* green square bullets and decor marks */
  --radius-hero-panel:32px 32px 0 0; /* hero art panel, 26px on mobile */
}

/* css/ds/elevation.css */
/* Elevation — one soft shadow does almost all the work. Depth is expressed
   with 1px borders far more often than with shadow. */
:root{
  --shadow-soft:0 12px 40px rgba(15,37,51,0.06);
  --shadow-header:0 8px 24px rgba(15,37,51,0.04);
  --shadow-case:0 18px 48px rgba(15,37,51,0.1),0 2px 0 rgba(255,255,255,0.55) inset;
  --shadow-pricing:0 20px 60px rgba(15,37,51,0.08);
  --shadow-portrait:drop-shadow(-12px 8px 28px rgba(15,37,51,0.12)); /* @kind other */
  --focus-ring:2px solid var(--brand-green); /* @kind other */
  --focus-offset:3px; /* @kind other */
}

/* css/ds/motion.css */
/* Motion — one easing curve, three durations. Reveals are translateY(18–28px)
   + opacity, staggered by index. Nothing bounces, nothing spins.
   Durations: micro = hover/focus/colour · standard = header, nav underline,
   accordion chrome · reveal = scroll reveal · slow = staggered entrances. */
:root{
  --ease:cubic-bezier(0.22,1,0.36,1); /* @kind other */
  --duration-micro:160ms; /* @kind other */
  --duration-standard:260ms; /* @kind other */
  --duration-reveal:420ms; /* @kind other */
  --duration-slow:620ms; /* @kind other */
  --stagger-col:72ms; /* @kind other */
  --stagger-step:110ms; /* @kind other */
  --stagger-item:90ms; /* @kind other */
  --reveal-offset:18px; /* @kind other */
  --reveal-offset-card:28px; /* @kind other */
}

/* css/ds/components.css */
/* Design-system components.
   Every value is taken verbatim from the Claude Design bundle
   (MaToEfektDesignSystem_7fc1df). Do not "tidy" the numbers — they are the spec. */

/* ---------------------------------------------------------------- Icon ---- */
.me-icon {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  color: currentColor;
}

/* -------------------------------------------------------------- Button ---- */
.me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--control-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-micro) var(--ease),
    color var(--duration-micro) var(--ease),
    border-color var(--duration-micro) var(--ease),
    box-shadow var(--duration-micro) var(--ease);
}

.me-btn--full {
  display: flex;
  width: 100%;
}

.me-btn[disabled],
.me-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

.me-btn__arrow {
  flex-shrink: 0;
  display: block;
  transition: transform var(--duration-micro) var(--ease);
}

.me-btn:hover .me-btn__arrow,
.me-btn:focus-visible .me-btn__arrow {
  transform: translateX(2px);
}

.me-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: var(--action-primary);
}
.me-btn--primary .me-btn__arrow path { fill: var(--brand-green); }
.me-btn--primary:hover {
  background: #1c3543;
  border-color: var(--brand-green);
  box-shadow: var(--shadow-soft);
}

.me-btn--accent {
  background: var(--action-accent);
  color: var(--action-accent-text);
  border-color: var(--action-accent);
}
.me-btn--accent .me-btn__arrow path { fill: var(--action-accent-text); }
.me-btn--accent:hover {
  background: #48a95d;
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-soft);
}

.me-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.me-btn--secondary .me-btn__arrow path { fill: var(--brand-green); }
.me-btn--secondary:hover {
  background: var(--neutral-white);
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-soft);
}

/* On light sections the secondary button sits on white, not on the section tint. */
.me-btn--secondary.me-btn--on-soft { background: #fff; border-color: var(--border-default); }

.me-btn--ghost-light {
  background: transparent;
  color: var(--text-inverse);
  border-color: var(--border-inverse-strong);
}
.me-btn--ghost-light .me-btn__arrow path { fill: var(--brand-green); }
.me-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-green);
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------- Eyebrow ---- */
.me-eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 0 10px;
  font-family: var(--font);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
}

.me-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--brand-green);
}

.me-eyebrow--inverse { color: var(--text-effect); }

/* --------------------------------------------------------- SectionHead ---- */
.me-sectionhead {
  max-width: var(--section-head-measure);
  margin-bottom: var(--section-head-gap);
}

.me-sectionhead--center {
  margin-inline: auto;
  text-align: center;
}

.me-sectionhead__title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  color: var(--text-primary);
  text-wrap: pretty;
}

.me-sectionhead--inverse .me-sectionhead__title { color: var(--text-inverse); }

.me-sectionhead__lead {
  margin: 16px 0 0;
  max-width: var(--lead-measure);
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.me-sectionhead--center .me-sectionhead__lead { margin-inline: auto; }
.me-sectionhead--inverse .me-sectionhead__lead { color: var(--text-inverse-secondary); }

/* ----------------------------------------------------------------- Tag ---- */
.me-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-success-soft);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
}

.me-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-green);
  flex-shrink: 0;
}

.me-tag--inverse { background: rgba(255, 255, 255, 0.08); color: var(--text-inverse); }

/* --------------------------------------------------------------- Badge ---- */
/* The nav "Nowe" marker — small uppercase green label, no pill. */
.me-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green-text);
}

/* The reassurance pill ("Odpowiadam w ciągu 24 godzin"). */
.me-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #a6dcb5;
  border-radius: var(--radius-pill);
  background: var(--surface-success-soft);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.me-pill .me-icon { color: var(--brand-green); }

/* ------------------------------------------------------------ IconTile ---- */
.me-icontile {
  display: inline-grid;
  place-items: center;
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-button);
  flex-shrink: 0;
  overflow: visible;
  background: var(--surface-success-soft);
  color: var(--brand-green);
}

.me-icontile--white { background: var(--neutral-white); }
.me-icontile--inverse { background: rgba(255, 255, 255, 0.06); }

/* ------------------------------------------------------------- FaqItem ---- */
.me-faq {
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--neutral-white);
  overflow: hidden;
  font-family: var(--font);
  transition: border-color var(--duration-standard) var(--ease);
}

.me-faq[open] { border-color: #a9d8b8; }

.me-faq::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-green);
  border-radius: 3px 0 0 3px;
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  transition: transform 420ms var(--ease), opacity 280ms var(--ease);
  z-index: 1;
}

.me-faq[open]::before { transform: scaleY(1); opacity: 1; }

.me-faq__q {
  cursor: pointer;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  box-sizing: border-box;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-primary);
  list-style: none;
}

.me-faq__q::-webkit-details-marker { display: none; }

.me-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--surface-soft);
  transition:
    color var(--duration-micro) var(--ease),
    background var(--duration-micro) var(--ease),
    transform var(--duration-standard) var(--ease);
}

.me-faq__icon::before { content: "+"; }

.me-faq[open] .me-faq__icon {
  color: var(--brand-green);
  background: var(--surface-success-soft);
  transform: rotate(45deg);
}

.me-faq__a { padding: 0 20px 20px; }

.me-faq__a p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--card-body-size);
  line-height: 1.6;
}

/* --------------------------------------------------------------- Field ---- */
.me-field {
  display: grid;
  gap: 8px;
  align-content: start;
  font-family: var(--font);
}

.me-field--full { grid-column: 1 / -1; }

.me-field__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.me-field__req {
  color: var(--brand-green-text);
  font-weight: 700;
}

.me-field__opt {
  font-weight: 400;
  color: var(--text-secondary);
}

.me-field__control {
  width: 100%;
  min-height: 48px;
  min-height: var(--control-h);
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-button);
  background: var(--neutral-white);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: none;
  transition: border-color var(--duration-standard) var(--ease);
  box-sizing: border-box;
}

input.me-field__control,
select.me-field__control {
  height: 48px;
  height: var(--control-h);
}

.me-field__control::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

.me-field__control--area {
  min-height: 140px;
  resize: vertical;
}

.me-field__control--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5' stroke='%2366737C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

.me-field__control[aria-invalid="true"] {
  border-color: var(--feedback-error-border);
  box-shadow: 0 0 0 1px rgba(196, 75, 75, 0.35);
}

.me-field__error {
  margin: 0;
  font-size: var(--meta-size);
  line-height: 1.4;
  font-weight: 600;
  color: var(--feedback-error-text);
}

/* ---------------------------------------------------------- CheckField ---- */
.me-check {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  min-height: var(--tap-min);
  padding-block: 6px;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.me-check__input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--border-default);
  border-radius: 6px;
  background: var(--neutral-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
  transition:
    border-color var(--duration-micro) var(--ease),
    background var(--duration-micro) var(--ease);
}

.me-check__input:checked {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.4 11l6.1-6.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.me-check__label {
  flex: 1;
  cursor: pointer;
}

.me-check__error {
  flex: 1 0 100%;
  padding-left: 32px;
  margin: 0;
  font-size: var(--meta-size);
  font-weight: 600;
  color: var(--feedback-error-text);
}

/* ------------------------------------------------------------ FormNote ---- */
.me-formnote {
  margin: 0;
  font-size: var(--meta-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* css/base.css */
/* Base — reset, document defaults, container and section rhythm.
   The design canvas draws at a fixed 1440px artboard with 100px side padding.
   That is reproduced exactly at >=1440px; below it the gutter steps down. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--background-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--body-size);
  /* The design system ships tokens only — the artboards leave the document
     leading at `normal` and set line-height per component. Matching that here
     keeps every inherited line box identical to the design. `--body-line` is
     applied to editor prose instead (see .me-prose). */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Long-form content coming from the editor gets the reading leading. */
.me-prose {
  line-height: var(--body-line);
  max-width: 46rem;
}

img,
svg,
video { max-width: 100%; }

img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 { text-wrap: pretty; }

button,
input,
select,
textarea { font: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

.screen-reader-text,
.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;
}

.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 12px 18px;
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-button);
  font-weight: 700;
}

/* ----------------------------------------------------------- Container ---- */
/* The artboard is 1440 wide with 100px padding => 1240px of content. */
.me-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 100px;
}

/* Above the tablet breakpoint the artboard's container is a fixed 1240: a
   viewport narrower than 1440 — a 1440 screen showing a scrollbar, say — eats
   into the margin, never into the content. Padding on a 100%-wide box does the
   opposite, so the desktop container is expressed as a capped width instead.
   The narrower breakpoints keep their own padding and are left untouched. */
@media (min-width: 1280px) {
  .me-shell {
    max-width: 1240px;
    padding-inline: 0;
  }
}

@media (max-width: 1279px) {
  .me-shell { padding-inline: 48px; }
}

@media (max-width: 1023px) {
  .me-shell { padding-inline: 32px; }
}

@media (max-width: 767px) {
  .me-shell { padding-inline: 20px; }
}

@media (max-width: 389px) {
  .me-shell { padding-inline: 16px; }
}

.me-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* ------------------------------------------------------------- Section ---- */
.me-section { padding-block: var(--section-y-lg); }
.me-section--soft { background: var(--surface-soft); }
.me-section--navy {
  background: var(--brand-navy);
  color: var(--text-inverse);
}
.me-section--ruled { border-top: 1px solid var(--rule-faint); }

.me-section--navy a { color: inherit; }

/* Utility rules used by several sections. */
.me-hairline { border: 0; border-top: 1px solid var(--rule-light); margin: 0; }
.me-muted { color: var(--text-secondary); }
.me-effect { color: var(--brand-green-text); }

/* Bot-trap field: off-canvas, never focusable by a real visitor. */
.me-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------ Grid/flex hygiene ---- */
/* Grid tracks in this theme are `minmax(0, 1fr)`, so a track may end up
   narrower than its content. Without this the item keeps its automatic
   `min-width: auto` and spills out of the track — which is what pushed
   the service pages past the viewport between 1024px and 1279px. */
.abo-approach__item > *,
.abo-approach__list > *,
.abo-contact__inner > *,
.abo-contact__points > *,
.abo-grid > *,
.abo-head > *,
.abo-hero__inner > *,
.abo-hero__stats > *,
.abo-skill__tile > *,
.abo-skills__cards > *,
.abo-skills__head > *,
.abo-split > *,
.abo-tl > *,
.cas-cols > *,
.cas-cols--3 > *,
.cas-evidence > *,
.cas-evidence ul > *,
.cas-facts > *,
.cas-hero__inner > *,
.cas-list > *,
.cas-media > *,
.cas-media--2 > *,
.cas-metrics > *,
.cas-related__grid > *,
.home-about__inner > *,
.home-about__points > *,
.home-clients__grid > *,
.home-contact__inner > *,
.home-contact__points > *,
.home-faq__inner > *,
.home-faq__list > *,
.home-feature > *,
.home-feature__links > *,
.home-feature__tile > *,
.home-form__consents > *,
.home-form__grid > *,
.home-group__links > *,
.home-group__tile > *,
.home-groups > *,
.home-head > *,
.home-hero__inner > *,
.home-hero__points > *,
.home-point__tile > *,
.home-process__grid > *,
.home-proof__grid > *,
.kon-facts__grid > *,
.kon-faq__inner > *,
.kon-faq__list > *,
.kon-main__inner > *,
.kon-step__num > *,
.kon-steps__grid > *,
.me-mega__aside-links > *,
.me-mega__grid > *,
.me-mega__list > *,
.me-mobilenav__cta > *,
.me-social > *,
.pos-prose ol > *,
.pos-prose ul > *,
.pos-related__grid > *,
.rea-card__facts > *,
.rea-grid > *,
.rea-hero__inner > *,
.rea-hero__points > *,
.rea-proof__tile > *,
.site-footer__grid > *,
.site-footer__list > *,
.svc-cases__grid > *,
.svc-contact__channels > *,
.svc-contact__inner > *,
.svc-coop__cards > *,
.svc-coop__steps > *,
.svc-cost__inner > *,
.svc-cost__list > *,
.svc-cost__paneltile > *,
.svc-faq__inner > *,
.svc-faq__list > *,
.svc-group > *,
.svc-group__cards > *,
.svc-group__tile > *,
.svc-hero__inner > *,
.svc-jump__row > *,
.usl-card__tile > *,
.usl-cards > *,
.usl-case__inner > *,
.usl-coop__ctatile > *,
.usl-coop__panel > *,
.usl-coop__panelcards > *,
.usl-coop__steps > *,
.usl-faq__inner > *,
.usl-faq__list > *,
.usl-flow__step > *,
.usl-hero__inner > *,
.usl-items > *,
.usl-items--1 > *,
.usl-items--2 > *,
.usl-items--3 > *,
.usl-loc__inner > *,
.usl-next__cards > *,
.usl-next__inner > *,
.usl-point__num > *,
.usl-points > *,
.usl-scope__split > *,
.usl-slot > *,
.wie-grid > *,
.wie-hero__inner > *,
.wie-hero__points > * {
  min-width: 0;
}

/* Long unbroken strings (URLs, e-mail addresses) must not widen a track. */
.me-prose, .me-prose p, .me-prose li, address, blockquote {
  overflow-wrap: break-word;
}

/* ------------------------------------------------- Pill note + quotes ---- */
/* „Próbki demonstracyjne …” — a rounded caveat the artboards put under a
   heading, and the quote cards that follow it. */
.me-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 9px 16px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.me-pill__icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
}

.me-quote {
  margin: 0 0 18px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--brand-green);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.me-quotecards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.me-quotecards--1 { grid-template-columns: minmax(0, 1fr); }
.me-quotecards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.me-quotecard {
  padding: 32px;
  border-radius: 20px;
  background: var(--surface-soft);
}

.me-quotecard__label {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.me-quotecard__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* on a soft section the card takes the opposite tone */
.usl-section--soft .me-quotecard,
.cas-section--soft .me-quotecard { background: #fff; border: 1px solid var(--border-default); }

/* <picture> must not steal flex/grid slots meant for the inner img. */
.op-belt picture,
.op-card__foot picture,
.pos-author picture,
.err-help__photo picture,
.svc-person__media picture,
.prj-card__media picture,
.case-card__media picture,
.offer-hero__photo picture,
.offer-work__media picture,
.usl-cases__shot picture,
.cas-cardlink__media picture,
.usl-rc__media picture,
.portfolio-card__visual picture,
.portfolio-card__name picture,
.me-person-card__photo picture,
.bluterm-person picture,
.doc-person__media picture {
  display: contents;
}

/* PageSpeed tap targets: 48×48px and ≥8px between neighbors. */
.svc-card__link,
.case-card__link,
.abo-card__link,
.post-card__link,
.rea-card__link,
.cas-cardlink,
.usl-rc__cta,
.err-exit__cta {
  min-height: var(--tap-min);
}

.home-link {
  min-height: var(--tap-min);
  align-items: center;
}

.wie-filter {
  min-height: var(--tap-min);
}

/* css/chrome.css */
/* Site chrome — header, mega menu, mobile nav, footer.
   Values are taken verbatim from SiteHeader.dc.html / SiteFooter.dc.html.
   The mobile nav has no artboard: it is built from the same tokens. */

/* ========================================================== HEADER ======= */
/* Sticky lives on the wrapper: a sticky child cannot stick inside a parent
   that is only as tall as the bar. Mega stays a sibling so fixed positioning
   and hit-testing are not trapped by this layer. */
.site-header-root {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: transform var(--duration-standard) var(--ease);
}

.site-header-root.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

#main {
  position: relative;
  z-index: 0;
}

.site-header {
  position: relative;
  z-index: 1;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--rule-faint);
  font-family: var(--font);
}

/* Blur on a sibling layer so it does not become the containing block for
   the fixed mega menu — otherwise the panel paints over the page but the
   hero underneath eats hover and clicks. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
  .site-header-root { transition: none; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 100%;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img { height: 26px; display: block; width: auto; }

.me-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 32px;
  font-size: 15px;
  font-weight: 600;
}

.me-nav > .me-navlink {
  display: flex;
  align-items: center;
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ------------------------------------------------------------- navlink ---- */
.me-navlink {
  position: relative;
  color: var(--brand-navy);
  text-decoration: none;
  white-space: nowrap;
}

.me-navlink:hover { color: var(--brand-green); }

.me-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease);
}

.me-navlink:hover::after,
.me-navlink[aria-current="page"]::after { transform: scaleX(1); }

.me-navlink--has-mega {
  display: flex;
  align-items: center;
  gap: 7px;
}

.me-chev {
  display: inline-block;
  font-size: 11px;
  color: var(--text-secondary);
  transition: transform 200ms var(--ease), color var(--duration-micro) var(--ease);
}

/* ---------------------------------------------------------- mega menu ---- */
.me-mega-wrap {
  position: static;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

.me-mega-wrap > .me-navlink {
  display: flex;
  align-items: center;
}

.me-mega {
  position: fixed;
  top: calc(var(--header-h) - 8px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--container);
  max-width: calc(100vw - 48px);
  padding-top: 8px;
  z-index: 1000;
  isolation: isolate;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease), visibility 200ms;
}

body:has(.me-mega-wrap:hover) .me-mega,
body:has(.me-mega-wrap:focus-within) .me-mega,
body:has(.me-mega:hover) .me-mega,
body:has(.me-mega:focus-within) .me-mega,
.me-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hero (and the rest of the page) must not intercept mega-menu hits. */
body:has(.me-mega.is-open) #main,
body:has(.me-mega-wrap:hover) #main,
body:has(.me-mega-wrap:focus-within) #main,
body:has(.me-mega:hover) #main,
body:has(.me-mega:focus-within) #main {
  pointer-events: none;
}

body.admin-bar .site-header-root { top: 32px; }
body.admin-bar .me-mega { top: calc(var(--header-h) + 32px - 8px); }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header-root { top: 46px; }
  body.admin-bar .me-mega { top: calc(var(--header-h) + 46px - 8px); }
}

body:has(.me-mega-wrap:hover) .me-chev,
body:has(.me-mega-wrap:focus-within) .me-chev,
body:has(.me-mega:hover) .me-chev,
body:has(.me-mega:focus-within) .me-chev,
.me-mega-wrap.is-open .me-chev {
  transform: rotate(180deg);
  color: var(--brand-green);
}

body:has(.me-mega-wrap:hover) .me-navlink--has-mega::after,
body:has(.me-mega-wrap:focus-within) .me-navlink--has-mega::after,
body:has(.me-mega:hover) .me-navlink--has-mega::after,
body:has(.me-mega:focus-within) .me-navlink--has-mega::after,
.me-mega-wrap.is-open .me-navlink--has-mega::after {
  transform: scaleX(1);
}

.me-mega__panel {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(15, 37, 51, 0.1);
  overflow: hidden;
}

.me-mega__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 300px;
}

.me-mega__col { padding: 28px 30px; }
.me-mega__col + .me-mega__col { border-left: 1px solid var(--rule-light); }

.me-mega__col--aside {
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
}

.me-mega__list { display: grid; }
.me-mega__list--spaced { margin-bottom: 26px; }

/* group heading */
.me-grp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-navy);
  text-decoration: none;
}

.me-grp:hover { color: var(--brand-green); }
.me-grp .me-icon { color: var(--brand-green); }

/* menu item */
.me-mi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-small);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease);
}

.me-mi:hover,
.me-mi:focus,
.me-mi:focus-visible,
.me-mi[aria-current="page"] {
  background: var(--surface-success-soft);
  color: var(--brand-navy);
}

.me-mi[aria-current="page"] { color: var(--brand-green-text); }

.me-mi--new { color: var(--brand-navy); }

.me-mi-arr {
  opacity: 0;
  color: var(--brand-green);
  transition: opacity var(--duration-micro) var(--ease), transform 200ms var(--ease);
}

.me-mi:hover .me-mi-arr,
.me-mi:focus .me-mi-arr,
.me-mi:focus-visible .me-mi-arr,
.me-mi[aria-current="page"] .me-mi-arr { opacity: 1; transform: translateX(2px); }

/* aside card links keep their arrow visible */
.me-mi--card {
  background: #fff;
  border: 1px solid var(--border-default);
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-navy);
}

.me-mi--card .me-mi-arr { opacity: 1; }

.me-mi--card[aria-current="page"] {
  border-color: rgba(84, 194, 107, 0.45);
  background: var(--surface-success-soft);
}

.me-mega__aside-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.me-mega__aside-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.me-mega__aside-links { display: grid; gap: 10px; margin-bottom: 22px; }

.me-mega__aside-foot {
  margin-top: auto;
  border-top: 1px solid var(--rule-light);
  padding-top: 18px;
}

.me-mega__aside-foot p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------- social ---- */
.me-socials { display: flex; align-items: center; gap: 8px; }

.me-social {
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--neutral-600);
  transition: background var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease);
}

.me-social:hover { background: var(--surface-success-soft); color: var(--brand-green); }

/* ---------------------------------------------------------- mobile nav ---- */
.me-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--brand-navy);
  cursor: pointer;
}

.me-navtoggle__bars,
.me-navtoggle__bars::before,
.me-navtoggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--duration-standard) var(--ease), opacity var(--duration-micro) var(--ease);
}

.me-navtoggle__bars { position: relative; }
.me-navtoggle__bars::before,
.me-navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.me-navtoggle__bars::before { top: -6px; }
.me-navtoggle__bars::after { top: 6px; }

.me-navtoggle[aria-expanded="true"] .me-navtoggle__bars { background: transparent; }
.me-navtoggle[aria-expanded="true"] .me-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.me-navtoggle[aria-expanded="true"] .me-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .me-nav,
  .me-mega,
  .me-socials { display: none; }
  .me-navtoggle { display: inline-flex; }
  .site-header__inner { gap: 16px; }
}

/* ------------------------------------------------------ mobile sheet ---- */
/* Full-height panel under the bar. „Usługi” is an accordion that starts
   closed — the artboard opens it only on tap. */
.me-sheet {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 19;
  display: none;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.me-sheet[data-open="true"] {
  display: block;
  animation: me-sheet-in 260ms var(--ease);
}

@keyframes me-sheet-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.me-sheet__nav { padding: 12px 20px 28px; }

.me-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-light);
  background: none;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand-navy);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* `:last-of-type` counts element types, and the toggle is the only <button>
   in the sheet — scope the borderless row to the last link. */
.me-sheet__nav > a.me-row:last-of-type { border-bottom: 0; }

.me-plus {
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 200ms var(--ease), color var(--duration-micro) var(--ease);
}

.me-plus[data-open="true"] { transform: rotate(45deg); color: var(--brand-green); }

.me-sub__arr { color: var(--brand-green); }

.me-sheet__services { padding: 6px 0 18px; }

.me-sheet__grp {
  margin: 0 0 4px;
  padding: 18px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.me-sheet__services > .me-sheet__grp:first-child { padding-top: 12px; }

.me-sheet__list { display: grid; }

.me-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--rule-light);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}

.me-sub:hover,
.me-sub:active,
.me-sub[aria-current="page"] { color: var(--brand-green); }

.me-sub[aria-current="page"] { border-left-color: var(--brand-green); }

.me-sheet__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-navy);
  text-decoration: none;
}

.me-sheet__cta { margin-top: 24px; display: grid; gap: 14px; }

.me-sheet__mail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-navy);
  text-decoration: none;
}

.me-sheet__mail .me-icon { color: var(--brand-green); flex: none; }

.me-sheet__socials {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.me-sheet__socials .me-social { width: 44px; height: 44px; }

body.me-nav-open { overflow: hidden; }

/* ========================================================== FOOTER ======= */
.site-footer {
  position: relative;
  background: var(--brand-navy-deep);
  color: #fff;
  padding: 72px 0 28px;
  overflow: hidden;
  font-family: var(--font);
}

.site-footer__dots {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
}

.site-footer__glow {
  position: absolute;
  top: -220px;
  left: 520px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(84, 194, 107, 0.1), transparent 62%);
}

.site-footer__inner { position: relative; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 88px;
  align-items: start;
}

/* brand column */
.site-footer__logolink { display: inline-block; margin-bottom: 24px; }
.site-footer__logo {
  display: block;
  width: 194px;
  height: 38px;
  max-width: min(100%, 220px);
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}

.site-footer__claim {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
}

.site-footer__details {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-inverse);
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.site-footer__contact .me-icon { color: var(--brand-green); flex: none; }

.site-footer__area {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-inverse-secondary);
}

.site-footer__area .me-icon { color: var(--brand-green); flex: none; }

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.site-footer .me-social,
.site-footer .me-foot-social {
  width: var(--tap-min);
  height: var(--tap-min);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    color var(--duration-micro) var(--ease),
    border-color var(--duration-micro) var(--ease),
    background-color var(--duration-micro) var(--ease);
}

.site-footer a.me-social:hover,
.site-footer a.me-foot-social:hover {
  color: var(--brand-green);
  border-color: rgba(84, 194, 107, 0.55);
  background: rgba(84, 194, 107, 0.1);
}

.site-footer .me-social .me-icon,
.site-footer .me-foot-social .me-icon {
  display: block;
}

/* link columns */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.me-foot-grp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.me-foot-grp .me-icon { color: var(--brand-green); flex: none; }

.site-footer__list { display: grid; }
.site-footer__list + .me-foot-grp { margin-top: 28px; }

.me-foot-svc {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-inverse-secondary);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease);
}

.me-foot-svc:hover { color: #fff; }

.me-foot-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-inverse-secondary);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease);
}

.me-foot-link:hover { color: var(--brand-green); }

.me-phone-reveal {
  all: unset;
  position: relative;
  display: inline;
  cursor: pointer;
  font-family: var(--font);
  color: var(--brand-green-text);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

.me-phone-reveal::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

.site-footer .me-phone-reveal {
  color: var(--brand-green);
}

[data-phone-reveal] [data-phone-value] {
  color: var(--brand-green-text);
  font-weight: 600;
  text-decoration: none;
}

.site-footer [data-phone-reveal] [data-phone-value] {
  color: var(--text-inverse-secondary);
  min-height: 0;
}

.site-footer [data-phone-reveal] [data-phone-value]:hover {
  color: var(--brand-green);
}

/* Component display rules (e.g. .home-point__value { display: block })
   must not leak the number next to the desktop reveal control. */
[data-phone-reveal] [data-phone-value][hidden],
[data-phone-reveal] [data-phone-trigger][hidden] {
  display: none !important;
}

/* Phone: tappable number on touch/narrow. Desktop (also GTM Preview
   with a side panel under 1024px) keeps "Pokaż numer telefonu". */
@media (max-width: 1023px) and (hover: none), (max-width: 1023px) and (pointer: coarse) {
  [data-phone-reveal] [data-phone-trigger] {
    display: none !important;
  }

  [data-phone-reveal] [data-phone-value],
  [data-phone-reveal] [data-phone-value][hidden] {
    display: inline !important;
  }

  .home-point[data-phone-reveal] [data-phone-value],
  .home-point[data-phone-reveal] [data-phone-value][hidden] {
    display: block !important;
  }
}

.site-footer__bottom {
  position: relative;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-inverse-muted);
}

.site-footer__bottom p { margin: 0; }
.site-footer__bottom .me-foot-link { font-size: 13px; }

/* Breadcrumb tap targets — shared across templates. */
.me-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.me-crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 8px 6px;
  color: var(--text-secondary);
  text-decoration: none;
}

.me-crumbs a:hover { color: var(--brand-green-text); }
.me-crumbs__current { font-weight: 600; color: var(--text-primary); }