/* ============================================================
   Solidcon — Modern industrial skin
   Loaded last: restyles the whole site (PL/SK/CS) without
   touching page markup. Warm concrete neutrals + graphite ink
   + one strong orange accent. Archivo typeface.
   ============================================================ */

:root {
  /* New design language */
  --ink:        #16181d;   /* graphite – dark sections, headings, footer */
  --ink-soft:   #23262d;
  --paper:      #f6f5f2;   /* warm concrete white – light sections */
  --line:       #e6e4de;   /* warm hairline borders */
  --line-strong:#d4d1c9;
  --steel:      #5d646e;   /* secondary text */
  --accent:     #f97316;   /* brand orange – buttons, accents, icons */
  --accent-deep:#e05f04;
  --btn-bg:      #f97316;
  --btn-bg-hover:#e05f04;
  --accent-ink:  #ffffff;  /* text on orange */

  /* Re-map legacy tokens so every old rule follows the new look */
  --dark:      #16181d;
  --gray-50:   #f6f5f2;
  --gray-100:  #eeece7;
  --gray-200:  #e6e4de;
  --gray-300:  #d4d1c9;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(23,24,29,.05);
  --shadow-md: 0 8px 24px rgba(23,24,29,.08);
  --shadow-lg: 0 18px 44px rgba(23,24,29,.12);
  --grad-orange: none;
  --grad-navy:   none;

  /* Sticky header: 60px inner row + 1px bottom border. The hero subtracts
     this so header + hero add up to exactly one screen. */
  --header-h: 61px;
  /* Fixed call/quote bar shown on phones; it overlays the bottom of the
     viewport, so the hero and the cookie banner subtract it there too.
     The bar stacks an icon over a label, which measures ~67px - the rule
     below pins it to this token so the two can never drift apart. */
  --sticky-h: 68px;
}

/* ── Typeface ──────────────────────────────────────────────── */
body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #35393f;
  font-size: 16.5px;
}
h1, h2, h3, h4 { color: var(--ink); }
h1 { font-weight: 800; letter-spacing: -.03em; }
h2, .section-title { font-weight: 750; letter-spacing: -.025em; }

/* Eyebrow: industrial tag with rule */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--accent-deep);
  font-size: .74rem;
  letter-spacing: .16em;
}
.section-eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  background: var(--accent);
}
.section-subtitle { color: var(--steel); }

/* Section title underline: thinner, quieter */
.section-header .section-title::after,
.section-header--center .section-title::after {
  width: 2rem;
  height: 2px;
  margin-top: .75rem;
}

/* ── Header: clean, solid, precise ─────────────────────────── */
.site-header {
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(23,24,29,.07); }
.main-nav a, .nav-dropdown__trigger { font-size: .9rem; font-weight: 500; color: #43474e; }
.main-nav a:hover, .nav-dropdown__trigger:hover { color: var(--ink); background: var(--paper); }
.main-nav a.active, .nav-dropdown.is-active .nav-dropdown__trigger { color: var(--ink); }
.main-nav a.active { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.header-lang-switcher {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
}
.header-lang-btn { color: var(--steel); }
.header-lang-btn:hover { background: var(--paper); color: var(--ink); }
.header-lang-btn.is-active { background: var(--ink); color: #fff; box-shadow: none; }

.header-phone {
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--ink);
  font-weight: 600;
}
.header-phone:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.header-cta {
  background: var(--btn-bg);
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
  box-shadow: none;
}
.header-cta:hover { background: var(--btn-bg-hover); color: #fff; transform: none; filter: none; box-shadow: none; }

/* ── Buttons: flat, confident, no gradients ────────────────── */
.btn {
  border-radius: 7px;
  font-weight: 700;
  letter-spacing: .005em;
}
.btn--primary,
.mobile-nav .btn--primary {
  background: var(--btn-bg);
  color: #fff;
  box-shadow: 0 1px 2px rgba(23,24,29,.16);
}
.btn--primary:hover,
.mobile-nav .btn--primary:hover {
  background: var(--btn-bg-hover);
  color: #fff;
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(224,95,4,.30);
}
.btn--primary:active { box-shadow: 0 1px 2px rgba(23,24,29,.2); }
/* `.mobile-nav a` (0,1,1) outranks `.btn--primary` (0,1,0), which turned the
   quote button's label grey inside the mobile menu. */
.mobile-nav .btn--outline { color: var(--ink); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--ink); }

/* ── Icons: bare line icons, no colored tiles ──────────────── */
:is(.trust-card__icon, .info-card__icon, .strength-card__icon,
    .contact-info-item__icon, .coverage-card__icon, .advantage-item__icon,
    .coordination-card__icon) {
  width: 2.5rem;
  height: 2.5rem;
  flex-basis: 2.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--accent-deep);
  justify-content: flex-start;
}
:is(.trust-card__icon, .info-card__icon, .strength-card__icon,
    .contact-info-item__icon, .coverage-card__icon, .advantage-item__icon,
    .coordination-card__icon) svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.6;
  color: var(--accent-deep);
  stroke: var(--accent-deep);
}
.advantage-item__icon { margin-top: 0; }
.advantage-item__icon svg { width: 1.6rem; height: 1.6rem; }
:is(.section--dark, .section--blue) .info-card__icon {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--accent);
}
:is(.section--dark, .section--blue) .info-card__icon svg { color: var(--accent); stroke: var(--accent); }
.quote-info-item__check { background: var(--accent); }
.reason-item > span { background: var(--ink); box-shadow: none; border-radius: 7px; }

/* ── Cards: hairline borders, quiet depth ──────────────────── */
:is(.trust-card, .info-card, .strength-card, .coverage-card, .reason-item,
    .quote-info-item, .service-card, .customer-card, .coordination-card,
    .logo-cloud__item, .process-step--light) {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}
:is(.trust-card, .info-card, .strength-card, .coverage-card, .reason-item,
    .service-card, .customer-card, .coordination-card):hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(23,24,29,.09);
}
.trust-card { border-bottom-width: 1px; }
.trust-card:hover { border-bottom-color: var(--line-strong); }
:is(.section--dark, .section--blue) .info-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}

/* ── Sections: warm paper instead of cool gray ─────────────── */
.section--gray, main > .section--gray {
  background: var(--paper);
}
.breadcrumbs { background: var(--paper); border-bottom-color: var(--line); }
.breadcrumbs li:last-child { color: var(--ink); }

/* ── Dark sections: graphite, flat, editorial ──────────────── */
.section--dark, .cta-section {
  background: var(--ink);
  background-image: none;
}
.cta-section { border-top: 1px solid rgba(255,255,255,.08); }
.cta-section::before, .cta-section::after { display: none; }
.process-step {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.process-step:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(249,115,22,.5);
}
/* Outlined oversized numerals */
.process-step__number,
.coordination-card__number {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.coordination-card__number { -webkit-text-stroke: 1.25px var(--line-strong); }

/* ── Hero: editorial, no pulsing badge ─────────────────────── */
.hero-badge,
.hero--fullbleed .hero-badge {
  animation: none;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: .1rem 0 .1rem .8rem;
  color: rgba(255,255,255,.88);
  letter-spacing: .16em;
  box-shadow: none;
}
.hero--fullbleed .hero-badge { animation: hero-rise .7s .05s cubic-bezier(.16,1,.3,1) both; }
.hero:not(.hero--fullbleed) {
  background-image: linear-gradient(150deg, #16181d 0%, #23262d 55%, #2a2e37 100%);
}
.hero:not(.hero--fullbleed)::after {
  background: linear-gradient(90deg, var(--accent) 0%, rgba(249,115,22,.2) 45%, transparent 70%);
}
.hero-image {
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
@media (min-width: 900px) {
  .hero-image { transform: none; }
}
.hero--fullbleed .hero-overlay {
  background:
    linear-gradient(to bottom, rgba(14,15,18,.58) 0%, rgba(14,15,18,.44) 55%, rgba(14,15,18,.85) 100%);
}
.hero-stat__val { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── Forms: minimal, technical ─────────────────────────────── */
.form-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--steel);
}
.form-label .req { color: var(--accent-deep); }
.form-control {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  padding: .78rem 1rem;
}
.form-control:hover:not(:focus) { border-color: #b9b5ab; }
.form-control:focus,
main form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.14);
}
.consent-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.consent-card:hover { border-color: var(--line-strong); background: #fff; }
.consent-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.consent-card input[type="checkbox"] { accent-color: var(--accent-deep); }
.consent-card__text a { color: var(--accent-deep); }
.consent-card__text a:hover { color: var(--accent); }

/* ── FAQ: hairline editorial list ──────────────────────────── */
.faq-list, .section--gray .faq-list {
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.faq-item, .section--gray .faq-list .faq-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
  box-shadow: none;
}
.faq-item.open { border-color: var(--line); box-shadow: none; }
.faq-question { font-size: 1.05rem; padding: 1.3rem 0; color: var(--ink); }
.faq-question:hover { color: var(--accent-deep); }
.faq-question svg { color: var(--accent-deep); }

/* ── Tables ────────────────────────────────────────────────── */
.data-table-wrap { border: 1px solid var(--line); box-shadow: none; }
.data-table thead { background: var(--ink); }
.data-table tbody tr:nth-child(even) { background: var(--paper); }
.data-table tbody tr:hover { background: rgba(249,115,22,.06) !important; }
.data-table .td-class { color: var(--accent-deep); }

/* ── Notices ───────────────────────────────────────────────── */
.notice--info { background: var(--paper); border: 1px solid var(--line-strong); color: #3c4046; }
.advantage-note { background: var(--paper); }

/* ── Footer: graphite, minimal ─────────────────────────────── */
.site-footer {
  background: #131417;
  background-image: none;
  border-top: 2px solid var(--accent);
}
.footer-bottom { border-top-color: #2b2d33; }
.footer-lang-btn--active { border-color: var(--accent); color: #ffb27a; background: rgba(249,115,22,.12); }
.footer-contact-item svg { color: var(--accent); }

/* ── Sticky mobile bar ─────────────────────────────────────── */
.sticky-mobile-bar { background: var(--ink); min-height: var(--sticky-h); }
.sticky-mobile-bar a:first-child { background: var(--ink); }
.sticky-mobile-bar a:first-child:hover { background: var(--ink-soft); }
.sticky-mobile-bar a:last-child { background: var(--btn-bg); color: #fff; }
.sticky-mobile-bar a:last-child:hover { background: var(--btn-bg-hover); }

/* ── Back to top ───────────────────────────────────────────── */
.back-to-top { background: rgba(22,24,29,.88); }
.back-to-top:hover { background: var(--btn-bg); color: #fff; }

/* Cookie banner and any other orange action buttons follow the same rule. */
#cookie-accept, .cookie-save-btn {
  background: var(--btn-bg);
  color: #fff;
}
#cookie-accept:hover, .cookie-save-btn:hover { background: var(--btn-bg-hover); }
.quote-info-item__check { background: var(--btn-bg); }

/* ── Links & accents that were blue ────────────────────────── */
.service-card__link, .customer-card-link { color: var(--accent-deep); }
.main-nav .nav-dropdown__menu a:hover,
.main-nav .nav-dropdown__menu a.active { color: var(--ink); background: var(--paper); }
.nav-dropdown__menu { border-color: var(--line); }
.mobile-nav a:hover { color: var(--ink); background: var(--paper); }
.mobile-nav > a.active,
.mobile-nav-offer__links a.active { color: var(--accent-deep); background: rgba(249,115,22,.07); }

/* ── Language switcher: flags ──────────────────────────────── */
.header-lang-switcher { gap: .2rem; padding: .22rem; border-radius: 8px; }
.header-lang-btn {
  min-width: 0;
  width: 2.35rem;
  height: 1.85rem;
  padding: 0;
  border-radius: 5px;
}
.header-lang-flag {
  width: 1.45rem;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(23,24,29,.16);
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.header-lang-btn:hover { background: var(--paper); }
.header-lang-btn:hover .header-lang-flag { opacity: .9; transform: scale(1.06); }
.header-lang-btn.is-active { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.header-lang-btn.is-active .header-lang-flag {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(23,24,29,.28);
}

.mobile-language-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-color: var(--line);
  border-radius: 7px;
}
.mobile-lang-flag {
  width: 1.25rem;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(23,24,29,.18);
}
.mobile-language-menu a.is-active {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

/* ── Credibility / social proof ────────────────────────────── */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
@media (min-width: 860px) {
  .proof-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.proof-strip__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .35rem;
  padding: 1.5rem 1.4rem;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Trim the outer edges so only interior rules remain visible. */
.proof-strip__item:nth-child(2n) { border-right: 0; }
.proof-strip__item:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 860px) {
  .proof-strip__item { border-bottom: 0; }
  .proof-strip__item:nth-child(2n) { border-right: 1px solid var(--line); }
  .proof-strip__item:last-child { border-right: 0; }
}
.proof-strip__value {
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.proof-strip__label {
  color: var(--steel);
  font-size: .82rem;
  line-height: 1.5;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.testimonial:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(23,24,29,.09);
}
.testimonial__mark {
  color: var(--accent);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: .6;
  height: .9rem;
}
.testimonial blockquote {
  flex: 1;
  margin: 0;
  color: #35393f;
  font-size: .97rem;
  line-height: 1.75;
}
.testimonial figcaption {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: .82rem;
  line-height: 1.5;
}
.testimonial figcaption strong {
  display: block;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
}

/* Company credentials row */
.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
  justify-content: center;
}
.credential {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--steel);
  font-size: .82rem;
}
.credential svg { width: 1rem; height: 1rem; color: var(--accent-deep); stroke: var(--accent-deep); }
.credential strong { color: var(--ink); font-weight: 700; }

/* ── Vertical rhythm: tighter, fluid spacing ───────────────── */
.section          { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.section--sm      { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.section--lg      { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta-section      { padding: clamp(2.75rem, 5.5vw, 4rem) 0; }
.hero:not(.hero--fullbleed) {
  min-height: 0;
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
}

/* Neighbouring sections that share a background read as one block —
   collapse the doubled gap instead of stacking two full paddings. */
.section--white + .section--white,
.section--gray  + .section--gray { padding-top: 0; }

/* Headings sit closer to the content they introduce */
.section-header { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.section-title  { margin-bottom: .6rem; }
.section-header .section-title::after,
.section-header--center .section-title::after { margin-top: .6rem; }

/* Grids: slightly tighter gutters */
.trust-grid, .services-grid, .strength-cards, .coverage-grid,
.reasons-grid, .info-cards, .customer-cards, .process-steps,
.logo-cloud, .coordination-grid {
  gap: clamp(.9rem, 1.8vw, 1.25rem);
}
.two-col { gap: clamp(1.75rem, 4vw, 3.25rem); }
main .section-title + :is(.trust-grid, .info-cards, .strength-cards, .coverage-grid, .reasons-grid),
main .section-subtitle + :is(.trust-grid, .info-cards, .strength-cards, .coverage-grid, .reasons-grid) {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}
.logo-cloud, .coverage-grid { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.logo-cloud__item { min-height: 0; padding: 1.15rem 1rem; }
.credentials { margin-top: 1.5rem; }

/* Footer: less dead space */
.site-footer { padding-top: clamp(2.25rem, 4.5vw, 3rem); }
.footer-grid { gap: clamp(1.75rem, 3.5vw, 2.25rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.25rem); }

/* ── Contact / quote form ──────────────────────────────────── */
.form-grid { gap: 1rem 1.15rem; }
.form-group { gap: .4rem; }

/* The contact form sits in a two-column page layout, so viewport media
   queries lie about how much room it actually has. Measure the form
   itself: below ~30rem of real width one column beats two cramped ones. */
main form:is(#quote-form, #contact-form, #calculator-quote-form) { container: quoteform / inline-size; }
@container quoteform (max-width: 26rem) {
  .form-grid { grid-template-columns: 1fr; }
}

/* On the contact page the form carries far more fields than the info
   column beside it, so give it the larger share of the row. */
@media (min-width: 900px) {
  .two-col:has(form:is(#quote-form, #contact-form, #calculator-quote-form)) {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  }
}

/* Give the form a real surface so it reads as one task, not loose fields */
main form:is(#quote-form, #contact-form, #calculator-quote-form) {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 10px 30px rgba(23,24,29,.05);
}
.section--gray main form,
.section--gray form:is(#quote-form, #contact-form, #calculator-quote-form) { background: #fff; }

/* Full-width fields that deserve the room */
#quote-form .form-group:has(#location),
#contact-form .form-group:has(#location),
#quote-form .form-group:has(textarea),
#contact-form .form-group:has(textarea) { grid-column: 1 / -1; }

/* Captcha reads as a small question, not a data field */
.form-group:has(#captcha_answer) {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.form-group:has(#captcha_answer) .form-label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
#captcha_answer { width: 5.5rem; flex: 0 0 5.5rem; }

/* Submit button: full width on phones, comfortable target everywhere */
main form button[type="submit"] {
  margin-top: 1.25rem;
  min-height: 3rem;
}
@media (max-width: 599px) {
  main form button[type="submit"] { width: 100%; justify-content: center; }
}

/* Consent block sits flush with the grid */
.form-consent { grid-column: 1 / -1; }

/* Inline validation feedback */
.form-control:user-invalid {
  border-color: #c2410c;
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}

/* ── Accent-underlined key word in headings (Breedon-style) ── */
h1 em, h2 em, .section-title em, .hero-slide-title em {
  font-style: normal;
  color: inherit;
  box-shadow: inset 0 -.26em 0 rgba(249,115,22,.4);
}
.hero h1 em, .hero--fullbleed h1 em, .hero--fullbleed .hero-slide-title em {
  box-shadow: inset 0 -.24em 0 rgba(249,115,22,.55);
}

/* ── Hero video background ─────────────────────────────────── */
.hero-bg video {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 40%;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg video { display: none; }
  .hero-bg { background-size: cover; background-position: center 40%; }
}

/* ── Statement band (big editorial claim, Breedon-inspired) ── */
.statement-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.statement {
  max-width: 880px;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
.statement em {
  font-style: normal;
  box-shadow: inset 0 -.26em 0 rgba(249,115,22,.35);
}

/* ── Hero slider (Holcim-inspired numbered carousel) ───────── */
.hero-slider {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
/* Content centres in the space left above the tab bar, so slides do not
   drift downwards as the bar takes height. */
.hero-slider .hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.hero-slider-bgs { position: absolute; inset: 0; z-index: 0; }
.hero-slider .hero-bg img { image-rendering: auto; }

/* Brand texture over the photo: a fine diagonal weave plus a subtle dot
   grid, tinted with the navy/orange palette. Sits above the background and
   below the copy, so headlines stay readable on busy site photos. */
.hero-slider .hero-overlay::after,
.hero:not(.hero--fullbleed)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.030) 0 1px,
      transparent 1px 5px
    ),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: auto, 4px 4px;
  mix-blend-mode: overlay;
  opacity: .85;
}

/* Warm brand wash + vignette so the photo recedes behind the message. */
.hero-slider .hero-overlay {
  background:
    radial-gradient(ellipse 120% 85% at 50% 45%, transparent 0%, rgba(10,15,24,.55) 100%),
    linear-gradient(180deg, rgba(19,31,51,.60) 0%, rgba(19,31,51,.44) 45%, rgba(10,15,24,.82) 100%),
    linear-gradient(115deg, rgba(249,115,22,.10) 0%, transparent 45%);
}

/* Thin accent rule where the photo meets the tab bar. */
.hero-slider .hero-overlay::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(249,115,22,.25) 35%, transparent 65%);
  pointer-events: none;
}
.hero-slider .hero-bg {
  opacity: 0;
  transition: opacity .9s ease;
  animation: none;
}
.hero-slider .hero-bg.is-active {
  opacity: 1;
  animation: hero-zoom 8s cubic-bezier(.16,1,.3,1) both;
}

/* Copy blocks stacked in one grid cell, crossfading.
   Breedon-style: left-aligned, generous scale, one clear action. */
.hero-slider .hero-content { text-align: center; }
.hero-slides-copy { display: grid; width: 100%; justify-items: center; }
.hero-slide-copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Every slide shares one grid cell sized by the tallest one (slide 1 with
     its stat bar). Centre the shorter slides instead of letting them hang
     from the top with dead space underneath. */
  justify-content: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
  pointer-events: none;
}
/* The last block in a slide must not add trailing margin, otherwise the
   centred content sits low. Needs to outrank `.hero-slider .hero-ctas`. */
.hero-slider .hero-slide-copy > :last-child { margin-bottom: 0; }
.hero-slider .hero-sub { max-width: 600px; margin-bottom: 1.75rem; }
.hero-slider .hero-ctas { justify-content: center; }
.hero-slider .hero-stats { max-width: 620px; margin-inline: auto; }
.hero-slide-copy.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* Non-h1 slide titles share the h1's look */
.hero--fullbleed .hero-slide-title,
.hero-slider h1 {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 1.15rem;
  /* Wide enough for the longest slide line to keep its intended <br> break
     instead of wrapping into a third line. */
  max-width: 27ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Numbered tab bar */
.hero-slider-nav {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(10,15,24,.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: 1rem 1.25rem;
  color: rgba(255,255,255,.62);
  font-size: .86rem;
  font-weight: 600;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  transition: color .2s ease, background .2s ease;
  white-space: nowrap;
}
.hero-tab:last-child { border-right: 0; }
.hero-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.hero-tab.is-active { color: #fff; background: rgba(255,255,255,.08); }
.hero-tab__num {
  font-size: .72rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .05em;
}
/* Progress hairline shows time to the next slide */
.hero-tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-tab.is-active::after {
  animation: hero-tab-progress var(--hero-interval, 5.5s) linear forwards;
}
.hero-slider:hover .hero-tab.is-active::after,
.hero-slider:focus-within .hero-tab.is-active::after {
  animation-play-state: paused;
}
@keyframes hero-tab-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ── Hero slider: hero + header fill exactly one screen ─────── */
/* The sticky header is 60px tall plus a 1px bottom border, so the hero takes
   whatever is left of the viewport. svh (not vh) keeps mobile browser chrome
   from making the first screen taller than it really is. */
.hero-slider {
  min-height: calc(100svh - var(--header-h));
  height: auto;
  padding: 0;
}
.hero-slider .hero-content {
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.hero-slider .hero-sub {
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  margin-bottom: clamp(1.1rem, 2.5vh, 1.75rem);
}
.hero-slider .hero-ctas { margin-bottom: clamp(1.25rem, 3vh, 2.25rem); }
.hero-slider .hero-stats { padding-top: clamp(1rem, 2.5vh, 1.5rem); }

@media (max-width: 1100px) {
  .hero-slider-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hero-slider-nav::-webkit-scrollbar { display: none; }
  .hero-tab { padding: .8rem 1rem; font-size: .8rem; flex: 0 0 auto; min-width: 8.5rem; }
}

/* Tablet: same full screen, tighter type, stats stay in one row */
@media (max-width: 900px) {
  .hero--fullbleed .hero-slide-title,
  .hero-slider h1 { font-size: clamp(2rem, 5.4vw, 2.9rem); max-width: 20ch; }
  .hero-slider .hero-stats {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    gap: 0;
  }
  .hero-slider .hero-stat {
    flex: 1;
    padding: 0 .75rem;
    border-right: 1px solid rgba(255,255,255,.13);
    border-bottom: 0;
    align-items: center;
  }
  .hero-slider .hero-stat:last-child { border-right: 0; padding-bottom: 0; }
  .hero-slider .hero-stat__val { font-size: 1rem; }
  .hero-slider .hero-stat__label { font-size: .62rem; text-align: center; }
}

/* Phone: left-aligned, stats stack, buttons go full width */
@media (max-width: 640px) {
  .hero-slider {
    /* The fixed call/quote bar covers the bottom of the screen on phones,
       so the tab bar has to stop above it. */
    min-height: calc(100svh - var(--header-h) - var(--sticky-h));
    align-items: stretch;
  }
  .hero-slider .hero-content { text-align: left; padding-block: 1.75rem; }
  .hero-slide-copy { align-items: flex-start; }
  .hero-slider .hero-ctas { justify-content: flex-start; width: 100%; gap: .6rem; }
  .hero-slider .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .hero--fullbleed .hero-slide-title,
  .hero-slider h1 {
    margin-inline: 0;
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    max-width: 100%;
  }
  .hero-slider .hero-sub { max-width: 100%; }
  .hero-slider .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    margin-inline: 0;
  }
  .hero-slider .hero-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 .5rem;
    align-items: flex-start;
  }
  .hero-slider .hero-stat:first-child { padding-left: 0; }
  .hero-slider .hero-stat__val { font-size: .92rem; white-space: normal; }
  .hero-slider .hero-stat__label { font-size: .58rem; text-align: left; }
  .hero-tab { min-width: 7rem; padding: .7rem .85rem; font-size: .74rem; }
}

/* Short landscape screens: drop the stat bar so the copy still fits the
   one-screen hero instead of overflowing it. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-slider .hero-stats { display: none; }
  .hero-slider .hero-content { padding-block: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tab.is-active::after { animation: none; transform: scaleX(1); }
}

/* ============================================================
   Subpages: same visual language as the homepage
   ============================================================ */

/* ── Subpage hero: full-bleed photo, same language as the homepage ──
   The old layout squeezed a 16:9 photo into a 4:3 box beside the text,
   cropping a quarter of it and leaving a flat grey panel behind. The photo
   now fills the whole hero and the copy sits over a scrim. */
main > .breadcrumbs + .hero:not(.hero--fullbleed) {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 44svh, 500px);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  overflow: hidden;
  background-color: var(--ink);
  background-image: none;
}

main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* Scrim: dark where the copy sits, clearing towards the right so the photo
   still reads. Painted above the img as a child pseudo-element. */
main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(16,22,34,.93) 0%,
      rgba(16,22,34,.86) 34%,
      rgba(16,22,34,.55) 68%,
      rgba(16,22,34,.42) 100%),
    linear-gradient(180deg, rgba(16,22,34,.35) 0%, transparent 35%);
}

main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-inner {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-inner > div:first-child {
  max-width: 660px;
}
main > .breadcrumbs + .hero:not(.hero--fullbleed) h1 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: .9rem;
  text-wrap: balance;
}
main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-sub {
  max-width: 52ch;
  margin-bottom: 1.6rem;
  color: rgba(255,255,255,.82);
}
/* Keep the orange base rule on top of the photo. */
main > .breadcrumbs + .hero:not(.hero--fullbleed)::after { z-index: 3; }
/* The texture layer also has to clear the photo. */
main > .breadcrumbs + .hero:not(.hero--fullbleed)::before { z-index: 1; }

/* The global mobile inset would break the absolute full-bleed photo. */
@media (max-width: 899px) {
  main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-image {
    width: 100%;
    margin-inline: 0;
  }
  main > .breadcrumbs + .hero:not(.hero--fullbleed) .hero-image::after {
    background:
      linear-gradient(180deg, rgba(16,22,34,.72) 0%, rgba(16,22,34,.86) 100%);
  }
}

/* ── Content photos on subpages ────────────────────────────── */
.content-photo,
main .two-col figure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}
.content-photo:hover,
main .two-col figure:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(23,24,29,.10);
}
.content-photo img { max-height: 420px; }
.content-photo figcaption {
  border-top: 1px solid var(--line);
  background: var(--paper);
}
main .two-col > div > img,
main .advantages-image img {
  border-radius: var(--radius);
  box-shadow: none;
  border: 1px solid var(--line);
}

/* ── Concrete class table: technical, legible ──────────────── */
.data-table-wrap { border-radius: var(--radius); }
.data-table th {
  font-size: .68rem;
  letter-spacing: .1em;
  padding: .9rem 1.15rem;
}
.data-table td { padding: .85rem 1.15rem; }
.data-table .td-class {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ── Checklists read as spec lines, not bullets ────────────── */
.checklist li {
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  color: #3c4046;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  width: .4rem;
  height: .4rem;
  border-radius: 1px;
  background: var(--accent);
  margin-top: .55rem;
  transform: rotate(45deg);
}

/* ── Notice / advantage callouts ───────────────────────────── */
.notice--orange,
.advantage-note {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  color: #3c4046;
}

/* ── Page bottom: quote block, FAQ and CTA ─────────────────── */

/* The quote section right before the CTA gets a clear frame so the two
   dark/!light blocks at the bottom do not merge into one grey mass. */
main > .section--gray:has(form) {
  border-top: 1px solid var(--line);
}

/* FAQ: generous, readable, quiet dividers */
.faq-answer p { font-size: .95rem; color: #4a4e55; }
.faq-item:last-child { border-bottom: 0; }

/* Closing CTA: editorial, with an accent rule instead of blobs */
.cta-section {
  position: relative;
  border-top: 0;
}
.cta-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 3px;
  background: var(--accent);
}
.cta-section h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -.03em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cta-section p {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  max-width: 52ch;
}
.cta-section .btn--outline-white { border-color: rgba(255,255,255,.5); }
.cta-section .btn--outline-white:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* Footer sits flush under the CTA without a seam */
.cta-section + .site-footer { border-top: 0; }

/* ── Selection & focus ─────────────────────────────────────── */
::selection { background: rgba(249,115,22,.28); }
:focus-visible { outline-color: var(--accent-deep); }

/* ============================================================
   Cookie consent: readable, equal-weight, thumb-friendly
   The banner is the first thing every visitor touches, so it
   gets real touch targets and an "reject" button that carries
   the same visual weight as "accept" (EU consent guidance).
   ============================================================ */
#cookie-banner {
  background: var(--ink);
  border-top: 2px solid var(--accent);
  /* Sit above the sticky call/quote bar and clear of the iOS home bar. */
  bottom: calc(env(safe-area-inset-bottom, 0px));
  max-height: min(88svh, 44rem);
}
.cookie-top { gap: 1rem 1.25rem; }
.cookie-lead { align-items: flex-start; }
.cookie-lead-icon {
  background: rgba(249,115,22,.16);
  border-radius: 10px;
  /* Align the icon with the first line of the heading, not the block centre. */
  margin-top: .1rem;
}
.cookie-lead-text strong { margin-bottom: .15rem; }
.cookie-lead-text span { color: #b3b6bd; }
.cookie-lead-text a { color: #ffb27a; }

/* Accept / reject share one button shape so neither nudges the choice. */
#cookie-accept,
#cookie-reject {
  min-height: 44px;
  padding: .6rem 1.35rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
}
#cookie-reject {
  background: transparent;
  color: #f2f3f5;
  border: 1px solid rgba(255,255,255,.42);
}
#cookie-reject:hover,
#cookie-reject:focus-visible {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
}
/* Settings is the secondary path, so it reads as a link, not a third button. */
#cookie-customize {
  min-height: 44px;
  padding: .6rem .9rem;
  background: transparent;
  border: 0;
  color: #b3b6bd;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#cookie-customize:hover,
#cookie-customize:focus-visible { background: transparent; color: #fff; }

/* Details panel scrolls inside the banner instead of pushing it off-screen. */
#cookie-details {
  background: #1b1d22;
  border-top-color: rgba(255,255,255,.09);
  overflow-y: auto;
}
.cookie-details-title { color: #9a9da4; }
.cookie-toggle-info strong { color: #f2f3f5; }
.cookie-toggle-info span { color: #9a9da4; }
.cookie-switch { min-height: 44px; }
.cookie-save-btn { min-height: 44px; border-radius: 8px; }

@media (max-width: 767px) {
  #cookie-banner {
    bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
    max-height: min(76svh, 34rem);
  }
  .cookie-top {
    /* Copy first, then the two equal choices, then settings underneath. */
    flex-direction: column;
    align-items: stretch;
    gap: .95rem;
    padding: 1rem 1rem 1.15rem;
  }
  .cookie-lead { min-width: 0; }
  .cookie-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  /* Equal tracks only hold if the labels are allowed to shrink and wrap. */
  #cookie-accept, #cookie-reject {
    width: 100%;
    min-width: 0;
    padding-inline: .5rem;
    font-size: .85rem;
    white-space: normal;
  }
  /* Settings spans the full row below the pair. */
  #cookie-customize { grid-column: 1 / -1; width: 100%; }
  .cookie-toggle-row { gap: 1rem; padding: .8rem 0; }
}

/* Very narrow phones: stack the pair rather than squeezing two labels. */
@media (max-width: 359px) {
  .cookie-btns { grid-template-columns: 1fr; }
}

/* ============================================================
   Quote form on phones
   ============================================================ */

/* Number fields: drop the spinners, they steal width and mis-tap easily. */
.form-control[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.form-control[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Comfortable target on every control, including native date/select. */
.form-control { min-height: 48px; }
textarea.form-control { min-height: 7rem; }
select.form-control {
  /* Native arrow is inconsistent across mobile browsers, so draw our own. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2372757c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.05rem;
  padding-right: 2.6rem;
}

/* The consent checkbox is a required control, so give it a real tap area. */
.consent-card input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

@media (max-width: 599px) {
  main form:is(#quote-form, #contact-form, #calculator-quote-form) {
    /* Tighter card padding: on a 360px screen the desktop inset ate ~15% of
       the usable field width. */
    padding: 1.15rem 1rem 1.35rem;
    border-radius: 12px;
  }
  .form-grid { gap: .9rem; }
  .form-label { font-size: .7rem; }
  /* Captcha: question on its own line so the answer box is not squeezed. */
  .form-group:has(#captcha_answer) {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  #captcha_answer { width: 100%; flex: 1 1 auto; }
  .consent-card { padding: .85rem .9rem; }
}

/* ============================================================
   Poprawki responsywnosci (telefony)
   ============================================================ */

/* ── Hamburger: czytelny przycisk, nie trzy cienkie kreski ──── */
.mobile-menu-btn {
  /* 40x40 bylo ponizej progu 44px i bez zadnej ramki czytalo sie
     jak dekoracja, a nie jak przycisk otwierajacy menu. */
  width: 44px;
  height: 44px;
  padding: 11px 8px;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
}
.mobile-menu-btn span {
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
}
.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
  background: var(--paper);
  border-color: var(--ink);
}
.mobile-menu-btn.open {
  background: var(--ink);
  border-color: var(--ink);
}
.mobile-menu-btn.open span { background: #fff; }
/* Krzyzyk musi obrocic sie wokol nowego odstepu (4px zamiast 5px). */
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero na telefonie: zdjecie ma byc widoczne ──────────────
   Na desktopie hero jest wysokie i jasny srodek gradientu pokazuje
   zdjecie. Na telefonie tresc zajmuje niemal cala wysokosc, wiec
   widac tylko ciemny dol nakladki (ok. 92% czerni) i hero wyglada
   jak plaskie tlo. Ponizej rozjasniamy gorna czesc i zostawiamy
   przyciemnienie tylko pod blokiem tekstu. */
@media (max-width: 640px) {
  .hero-slider .hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(10, 15, 24, .18) 0%,
        rgba(10, 15, 24, .30) 38%,
        rgba(10, 15, 24, .68) 72%,
        rgba(10, 15, 24, .86) 100%
      );
  }
  /* Delikatna tekstura na malym ekranie tylko zamula zdjecie. */
  .hero-slider .hero-overlay::after { opacity: .35; }

  /* Cien pod tekstem utrzymuje kontrast mimo jasniejszej nakladki. */
  .hero-slider h1,
  .hero-slider .hero-slide-title { text-shadow: 0 2px 14px rgba(8, 12, 20, .75); }
  .hero-slider .hero-sub { text-shadow: 0 1px 10px rgba(8, 12, 20, .8); }
}

/* Subpage hero ma ten sam problem, tylko lagodniejszy. */
@media (max-width: 640px) {
  .hero--subpage .hero-overlay {
    background: linear-gradient(to bottom, rgba(10, 15, 24, .34) 0%, rgba(10, 15, 24, .78) 100%);
  }
}

/* ── Pasek zakladek slidera: widac, ze jest ich wiecej ──────── */
@media (max-width: 1100px) {
  .hero-slider-nav {
    /* Wygaszenie przy prawej krawedzi sygnalizuje, ze lista sie przewija. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
  }
  .hero-tab { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  /* Wezsze zakladki: zamiast 3 z 5 widac 4, reszta w zasiegu kciuka. */
  .hero-tab { padding-inline: .7rem; }
  .hero-tab span:not(.hero-tab__num) { font-size: .72rem; }
}

/* ── Cele dotykowe: linki listowe byly wysokie na 15 px ─────── */
@media (max-width: 899px) {
  .footer-col ul a,
  .footer-contact-item a,
  .footer-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-lang-btn { min-height: 40px; min-width: 44px; }
  .service-card__link,
  .customer-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .sitemap-page__card a { display: inline-flex; align-items: center; min-height: 38px; }
  .breadcrumbs a { display: inline-block; padding-block: .35rem; }
}

/* ── Menu mobilne: wygodne cele dotykowe ─────────────────────
   Pomierzone przed zmiana: akcje 41 px, przelacznik jezyka 39 px,
   linki miast 39 px. Wszystko ponizej progu 44 px, a przy gestej
   liscie miast latwo bylo trafic w sasiedni wpis. */
.mobile-nav > a,
.mobile-nav-offer > summary,
.mobile-locations > summary {
  min-height: 50px;
  padding-block: .85rem;
  display: flex;
  align-items: center;
}

.mobile-nav-offer__links a {
  min-height: 46px;
  padding-block: .8rem;
  display: flex;
  align-items: center;
}

.mobile-locations__region > summary {
  min-height: 48px;
  padding-block: .8rem;
  display: flex;
  align-items: center;
}

.mobile-locations__cities {
  padding-inline: .75rem;
  gap: .25rem;
}
.mobile-locations__cities a {
  min-height: 44px;
  padding: .7rem .9rem;
  display: flex;
  align-items: center;
  border-radius: 7px;
}

.mobile-language-menu {
  gap: .6rem;
  padding-block: 1rem .5rem;
}
.mobile-language-menu a {
  min-height: 46px;
  padding: .7rem .9rem;
  justify-content: center;
  border-radius: 8px;
}

/* Telefon i wycena obok siebie: dwa rowne przyciski w jednym rzedzie
   zamiast dwoch zawijajacych sie blokow. */
.mobile-nav-actions {
  gap: .6rem;
  padding-top: 1.15rem;
  flex-wrap: nowrap;
}
.mobile-nav-actions a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  padding: .8rem .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .82rem;
  white-space: nowrap;
}

/* Wiecej powietrza wokol calej listy, zeby menu nie bylo scisniete. */
.mobile-nav { padding-block: 1rem 2rem; }

/* `.mobile-nav a` rysuje kazdemu linkowi separator (1 px var(--gray-100)).
   Na przyciskach CTA i pigulkach jezyka nadpisywalo to dolna krawedz ramki:
   przycisk telefonu mial trzy boki ciemne, a dol jasnoszary. Separator
   dotyczy pozycji listy, wiec w tych dwoch blokach go zdejmujemy. */
/* Pigulki jezyka maja wlasna ramke dookola - separator listy zastepowal jej
   dolna krawedz, wiec zamiast kasowac dol, przywracamy pelna ramke.
   Prefiks `.mobile-nav` jest potrzebny, bo `.mobile-nav a:last-child` (0,2,1)
   zdejmowalo dol ostatniej pigulce, czyli CZ. */
.mobile-nav .mobile-language-menu a {
  border: 1px solid var(--line);
}
.mobile-nav .mobile-language-menu a.is-active {
  border-color: var(--ink);
}
/* `.mobile-nav a:last-child { border-bottom: none }` ma wyzsza specyficznosc
   niz zwykly selektor klasy, a przycisk wyceny jest ostatnim linkiem w menu.
   Stad selektory z `a.btn`, zeby ramka byla pelna na wszystkich czterech bokach. */
.mobile-nav-actions a.btn--outline {
  border: 1px solid var(--ink);
}
.mobile-nav-actions a.btn--primary {
  border: 1px solid var(--btn-bg);
}

/* ── Strona bledu 404 ────────────────────────────────────────
   Wczesniej kolory byly wpisane inline (stary niebieski #22548e),
   przez co strona nie nadazyla za zmiana skorki. */
.error-404-section { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.error-404-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.error-404-badge {
  display: inline-block;
  margin-bottom: 1.35rem;
  padding: .4rem 1rem;
  border-radius: 50px;
  background: rgba(249, 115, 22, .12);
  color: var(--accent-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.error-404-heading {
  margin-bottom: 1rem;
  font-size: clamp(1.7rem, 5.5vw, 2.75rem);
  line-height: 1.15;
  text-wrap: balance;
}
.error-404-sub {
  max-width: 56ch;
  margin: 0 auto 2.25rem;
  color: var(--steel);
  font-size: 1.05rem;
  line-height: 1.65;
}
.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
  margin-bottom: 2.75rem;
}
.error-404-actions .btn { min-width: 210px; }
.error-404-links { border-top: 1px solid var(--line); padding-top: 2rem; }
.error-404-links__title {
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.error-404-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
}
.error-404-links__list a {
  color: var(--accent-deep);
  font-size: .95rem;
  font-weight: 600;
}
.error-404-links__list a:hover { color: var(--ink); }

@media (max-width: 599px) {
  /* Na telefonie przyciski w kolumnie zamiast dwoch waskich obok siebie. */
  .error-404-actions { flex-direction: column; }
  .error-404-actions .btn { width: 100%; min-width: 0; }
  .error-404-links__list { flex-direction: column; gap: 0; }
  .error-404-links__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
  }
  .error-404-links__list a:last-child { border-bottom: 0; }
}